/*
Theme Name: GfW Wilhelmshaven Child
Theme URI: https://gfw-whv.de
Description: Child-Theme für Divi – Gemeinsam für Wilhelmshaven. Alle Farben und Schriften werden zentral über CSS-Variablen gesteuert. Erstellt für die Umsetzung des modernen Webseiten-Designs.
Author: Werbeagentur
Template: Divi
Version: 1.0.0
Text Domain: gfw-child
*/

/* =====================================================================
   1) ZENTRALE DESIGN-VARIABLEN
   --------------------------------------------------------------------
   HIER alle Farben und Schriften ändern – wirkt auf die ganze Seite.
   ===================================================================== */
:root{
  /* ---- Farben ---- */
  --gfw-navy:        #13233f;   /* Hauptfarbe Dunkelblau */
  --gfw-navy-2:      #1c3358;   /* Dunkelblau heller */
  --gfw-navy-deep:   #0c1830;   /* Dunkelblau sehr dunkel (Footer) */
  --gfw-gelb:        #ffcc00;   /* Akzentfarbe Gelb */
  --gfw-gelb-2:      #ffd633;   /* Gelb heller (Hover) */
  --gfw-gelb-tief:   #e6b800;   /* Gelb dunkler (Text auf Weiß) */
  --gfw-weiss:       #ffffff;
  --gfw-hell:        #f4f7fb;   /* heller Sektions-Hintergrund */
  --gfw-grau:        #5a6470;   /* Fließtext-Grau */
  --gfw-rand:        #e3e8ef;   /* Rahmen / Trennlinien */

  /* ---- Schriften ---- */
  --gfw-font-headline: 'Sora', 'Segoe UI', sans-serif;   /* Überschriften */
  --gfw-font-body:     'Outfit', 'Segoe UI', sans-serif; /* Fließtext */

  /* ---- Sonstiges ---- */
  --gfw-radius:        16px;    /* Eckenrundung Karten/Buttons */
  --gfw-slider-hoehe:  480px;   /* HÖHE DES OBEREN SLIDERS – hier anpassen */
}

/* =====================================================================
   2) SCHRIFTEN GLOBAL ÜBERSCHREIBEN
   ===================================================================== */
body,
body.et-db #et-boc .et-l p,
.et_pb_module{
  font-family: var(--gfw-font-body);
  color: var(--gfw-navy);
}
h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4{
  font-family: var(--gfw-font-headline) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--gfw-navy);
}

/* =====================================================================
   3) FARBEN GLOBAL ÜBERSCHREIBEN (Divi-Standardelemente)
   ===================================================================== */

/* Buttons – Primär (Gelb) */
.et_pb_button,
a.et_pb_button{
  background: var(--gfw-gelb) !important;
  color: var(--gfw-navy) !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: var(--gfw-font-headline) !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  transition: all .3s ease !important;
}
.et_pb_button:hover{
  background: var(--gfw-gelb-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,204,0,.4);
}

/* Links */
a{ color: var(--gfw-gelb-tief); }
a:hover{ color: var(--gfw-navy); }

/* =====================================================================
   4) EIGENE HILFSKLASSEN  (im Divi-Modul unter "CSS-Klasse" eintragen)
   ===================================================================== */

/* --- Sektionen --- */
.gfw-bg-navy   { background-color: var(--gfw-navy)   !important; }
.gfw-bg-deep   { background-color: var(--gfw-navy-deep) !important; }
.gfw-bg-hell   { background-color: var(--gfw-hell)   !important; }
.gfw-text-light h1,.gfw-text-light h2,.gfw-text-light h3,
.gfw-text-light p,.gfw-text-light{ color:#fff !important; }
.gfw-accent    { color: var(--gfw-gelb) !important; }
.gfw-accent-dark{ color: var(--gfw-gelb-tief) !important; }

/* --- Eyebrow / kleine Überschrift mit Strich --- */
.gfw-eyebrow .et_pb_text_inner,
.gfw-eyebrow{
  color: var(--gfw-gelb-tief) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =====================================================================
   5) SLIDER OBEN – NIEDRIGER & MODERN
   Klasse "gfw-slider" am Divi-Slider-Modul eintragen
   ===================================================================== */
.gfw-slider .et_pb_slide{
  min-height: var(--gfw-slider-hoehe) !important;
  height: var(--gfw-slider-hoehe) !important;
  padding: 0 !important;
}
.gfw-slider .et_pb_slider,
.gfw-slider .et_pb_slides,
.gfw-slider .et_pb_slide_description{
  min-height: var(--gfw-slider-hoehe) !important;
}
.gfw-slider .et_pb_slide_description{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 0 8% !important;
}
.gfw-slider .et_pb_slide_overlay_container{ display:none; }
/* dunkler Verlauf über dem Bild für Lesbarkeit */
.gfw-slider .et_pb_slide{
  background-blend-mode: multiply;
}
.gfw-slider .et_pb_slide:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(12,24,48,.92) 0%,rgba(19,35,63,.7) 50%,rgba(19,35,63,.3) 100%);
}
.gfw-slider .et_pb_slide_description{ position:relative; z-index:2; }
.gfw-slider .et_pb_slide_title{
  font-family: var(--gfw-font-headline) !important;
  font-size: clamp(1.7rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  color:#fff !important;
}
.gfw-slider .et_pb_slide_content{
  color:#cdd7e6 !important;
  font-size: 1.05rem !important;
  max-width: 560px;
}
/* gelbe Schlagzeile-Markierung */
.gfw-slider .et_pb_slide_title span{ color: var(--gfw-gelb) !important; }
/* Pfeile gelb beim Hover */
.gfw-slider .et-pb-arrow-prev:hover,
.gfw-slider .et-pb-arrow-next:hover{ color: var(--gfw-gelb) !important; }
/* Pagination-Punkte */
.gfw-slider .et-pb-controllers a.et-pb-active-control{ background: var(--gfw-gelb) !important; }

/* =====================================================================
   6) KARTEN (Blurb-Module als News-/Themen-Karten)
   Klasse "gfw-card" am Blurb-Modul
   ===================================================================== */
.gfw-card{
  background:#fff !important;
  border:1px solid var(--gfw-rand) !important;
  border-radius: var(--gfw-radius) !important;
  padding: 30px !important;
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
  height:100%;
}
.gfw-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(19,35,63,.15);
  border-color: var(--gfw-gelb) !important;
}
.gfw-card .et_pb_blurb_content{ text-align:left; max-width:100%; }
.gfw-card .et-pb-icon{
  color: var(--gfw-gelb) !important;
  background: var(--gfw-navy);
  border-radius: 14px;
  width: 64px !important; height:64px !important;
  line-height:64px !important;
  transition:.4s;
}
.gfw-card:hover .et-pb-icon{
  background: var(--gfw-gelb) !important;
  color: var(--gfw-navy) !important;
  transform: rotate(-6deg);
}
.gfw-card h3,.gfw-card h4{ color:var(--gfw-navy) !important; margin-bottom:10px; }
.gfw-card:hover h4{ color: var(--gfw-gelb-tief) !important; }
.gfw-card p{ color: var(--gfw-grau) !important; }

/* News-Karte mit oberem Farbbalken */
.gfw-card-news{ position:relative; overflow:hidden; }
.gfw-card-news:before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--gfw-navy),var(--gfw-gelb));
}

/* =====================================================================
   7) STATISTIKEN (Number Counter)
   Klasse "gfw-stat" am Number-Counter-Modul
   ===================================================================== */
.gfw-stat .et_pb_number_counter .percent p,
.gfw-stat .percent-value{
  font-family: var(--gfw-font-headline) !important;
  color: var(--gfw-gelb) !important;
  font-weight: 800 !important;
}
.gfw-stat .et_pb_number_counter_title{ color:#cdd7e6 !important; }
.gfw-stat{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--gfw-radius);
  padding: 34px 24px !important;
  text-align:center;
  transition:.4s;
}
.gfw-stat:hover{
  transform: translateY(-6px);
  border-color: rgba(255,204,0,.4);
  background: rgba(255,255,255,.08);
}

/* =====================================================================
   8) FORMULAR (Kontaktformular dunkel)
   Klasse "gfw-form" am Kontaktformular-Modul
   ===================================================================== */
.gfw-form .et_pb_contact_field input,
.gfw-form .et_pb_contact_field textarea{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:10px !important;
}
.gfw-form ::placeholder{ color:#8fa0b8 !important; }
.gfw-form .et_pb_contact_field input:focus,
.gfw-form .et_pb_contact_field textarea:focus{
  border-color: var(--gfw-gelb) !important;
}

/* =====================================================================
   9) RESPONSIVE FEINSCHLIFF
   ===================================================================== */
@media (max-width: 980px){
  :root{ --gfw-slider-hoehe: 420px; }
}
@media (max-width: 600px){
  :root{ --gfw-slider-hoehe: 360px; }
  .gfw-slider .et_pb_slide_title{ font-size:1.5rem !important; }
}

/* =====================================================================
   10) UNTERSEITEN  (Page-Hero, Artikel, Akkordeon, Team)
   ===================================================================== */

/* --- Seiten-Hero (kleiner Kopf der Unterseiten) --- */
.gfw-page-hero{ position:relative; overflow:hidden; }
.gfw-page-hero:before{
  content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,204,0,.14),transparent 70%);
}
.gfw-page-hero h1{ position:relative; z-index:2; }

/* --- Artikel-Typografie (Detailseite) --- */
.gfw-article p{ color:var(--gfw-grau) !important; font-size:1.1rem; margin-bottom:18px; }
.gfw-article h3{ color:var(--gfw-navy) !important; margin:28px 0 12px; }
.gfw-article blockquote{
  border-left:4px solid var(--gfw-gelb);
  background:var(--gfw-hell);
  padding:20px 26px;margin:24px 0;border-radius:0 12px 12px 0;
  font-size:1.15rem;font-style:italic;color:var(--gfw-navy);
}

/* --- Akkordeon (Wahlprogramm) --- */
.gfw-accordion .et_pb_toggle{
  border:1px solid var(--gfw-rand) !important;
  border-radius:12px !important;
  margin-bottom:14px;
  background:#fff !important;
  overflow:hidden;
  transition:.3s;
}
.gfw-accordion .et_pb_toggle_open{
  border-color:var(--gfw-gelb) !important;
  box-shadow:0 14px 32px rgba(19,35,63,.1);
}
.gfw-accordion .et_pb_toggle_title{
  font-family:var(--gfw-font-headline) !important;
  color:var(--gfw-navy) !important;
  font-weight:700 !important;
  padding:6px 0;
}
.gfw-accordion .et_pb_toggle_open .et_pb_toggle_title{ color:var(--gfw-gelb-tief) !important; }
/* Plus/Minus-Icon gelb */
.gfw-accordion .et_pb_toggle_title:before{ color:var(--gfw-gelb-tief) !important; }
.gfw-accordion .et_pb_toggle p{ color:var(--gfw-grau) !important; }

/* --- Team-Mitglieder (Vorstand) --- */
.gfw-team{
  background:#fff !important;
  border:1px solid var(--gfw-rand) !important;
  border-radius:var(--gfw-radius) !important;
  padding:32px !important;
  text-align:center;
  transition:all .4s cubic-bezier(.16,1,.3,1) !important;
}
.gfw-team:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 48px rgba(19,35,63,.15);
  border-color:var(--gfw-gelb) !important;
}
.gfw-team .et_pb_team_member_image,
.gfw-team .et_pb_member_position{ }
.gfw-team h4{ color:var(--gfw-navy) !important; margin-top:14px; }
.gfw-team .et_pb_member_position{ color:var(--gfw-gelb-tief) !important; font-weight:600; }
.gfw-team .et_pb_team_member_description p{ color:var(--gfw-grau) !important; }
/* Platzhalter-Avatar falls kein Bild */
.gfw-team .et_pb_team_member_image:empty:before,
.gfw-team:not(:has(img)) .et_pb_team_member_image:before{
  content:"👤";font-size:54px;display:block;
}