/* ============================================================
   THEME: Brauerknechtgraben – helles Design
   Reine Farbdatei. Layout/Struktur steht in css/base.css, dort
   ist auch für jede Variable notiert, welchen Teil der Website
   sie ändert (hier zur Sicherheit noch einmal je Zeile).
   Heller Textteil, weißer Seitenhintergrund (kein Verlauf).
   ============================================================ */
:root {

  /* ---------- GRUNDFLÄCHEN & TEXT ---------- */
  --page-bg:        #ffffff;   /* Seitenhintergrund hinter allem */
  --page-gradient:  none;      /* kein Verlauf – Hintergrund bleibt weiß */
  --header-bg:      #406A8C;   /* alle dunklen Kopfflächen: Sticky-Kopf,
                                  Kartenkopf, Intro-Kopf, Kachel-Beschriftung,
                                  Markt-Kachel-Kopf */
  --body-bg:        #ffffff;   /* Füllfläche aller Karten: Hafenstopp-Karte,
                                  Intro-Box, Kachel, Markt-Kachel */
  --body-text:      #000000;   /* Haupttext auf Kartenfläche: Teaser-Text,
                                  CTA-Text, Intro-Leadsatz */
  --body-text-2:    #000000;   /* Nebentext: Abschnitts-Fließtext,
                                  Intro-Absätze, Markt-Beschreibung */
  --muted-text:     rgba(255,255,255,0.88); /* gedämpfte Kleinzeilen auf den
                                  blauen Kopfflächen: Kopf-Unterzeilen,
                                  Karten-Tagline, Intro-Unterzeile,
                                  Kachel-Titelzeile */

  /* ---------- AKZENTE ---------- */
  --gold:           #F2C061;   /* Hauptakzent auf dunkel: Kampagnentitel,
                                  Karten-Untertitel, Intro-Titel, Markt-Name,
                                  Kachel-Sortiment, Klapp-Pfeil + aktive
                                  Sprache im Umschalter */
  --accent-body:    #6E5414;   /* Bronze – Akzent im hellen Textteil:
                                  Teaser-Label + -Rand, Abschnitts-Über-
                                  schrift, CTA-Überschrift, Hover der
                                  Impressum-Links */
  --stops-title-color: #F2C061; /* Überschrift „Die neun Hafenstopps"
                                  (Gold auf dem hellen Panel – wenig
                                  Kontrast; ggf. auf #6E5414 ändern) */

  /* ---------- RAHMEN & LINIEN ---------- */
  --card-outline:       rgba(242,192,97,0.45); /* Rahmen von Karte, Intro-Box,
                                  Kacheln, Markt-Kacheln (Ruhezustand) */
  --card-outline-hover: rgba(242,192,97,0.9);  /* derselbe Rahmen beim
                                  Überfahren einer Kachel / Markt-Kachel */
  --divider:            rgba(242,192,97,0.5);  /* feine Linien: unter dem
                                  Sticky-Kopf, über dem Karten-Untertitel */

  /* ---------- BADGE / MARKE ---------- */
  --badge-bg:       #F2C061;    /* Fläche von „Hafenstopp X von 9" und der
                                  „Stopp X"-Marke auf den Kacheln */
  --badge-text:     #262323;    /* Schrift auf diesem Badge (dunkel auf Gold) */

  /* ---------- SPRACHUMSCHALTER ---------- */
  --lang-surface:       #1d3d57;               /* Fläche von Knopf + Menü */
  --lang-border:        rgba(242,192,97,0.55); /* Rahmen von Knopf + Menü */
  --lang-menu-text:     #F2F0EC;               /* Schrift der Menüeinträge */
  --lang-menu-divider:  rgba(255,255,255,0.18);/* Linie zwischen den Einträgen */
  --lang-menu-hover-bg: rgba(255,255,255,0.12);/* Eintrag beim Überfahren */

  /* ---------- BOXEN IM TEXTTEIL / STARTSEITE ---------- */
  --teaser-bg:      rgba(105,131,159,0.20); /* „Wusstest du schon"-Box */
  --cta-bg:         rgba(105,131,159,0.40); /* CTA-Box (Handlungsaufruf) */
  --cta-border:     rgba(110,84,20,0.45);   /* Rahmen der CTA-Box */
  --stops-panel-bg:     rgba(64,106,140,0.2);            /* Fläche hinter Überschrift +
                                  Kachelblock der Startseite */
  --stops-panel-border: rgba(255,255,255,1); /* Rahmen dieser Fläche (weiß –
                                  auf dem hellen Panel kaum sichtbar) */
  --stops-panel-bw:     1px;                /* Rahmenbreite (Layout) */
  --stops-panel-pad:    12px;               /* Innenabstand (Layout) */

  /* ---------- IMPRESSUM / DATENSCHUTZ ---------- */
  --legal-text:      #000000;              /* Schrift der Impressum/
                                  Datenschutz-Zeile (schwarz) */
  --legal-underline: rgba(110,84,20,0.4);  /* Unterstrich dieser Links */

  /* ---------- EFFEKTE ---------- */
  --shadow-color:  rgba(20,40,60,0.18); /* alle Schlagschatten: Karten,
                                  Kacheln, Badge, Sprachmenü, Sticky-Kopf */
  --card-img-fade: linear-gradient(180deg,
                     rgba(64,106,140,0) 0%,
                     rgba(64,106,140,0.35) 65%,
                     rgba(64,106,140,0.85) 100%);
                               /* Übergang Kartenfoto -> blauer Kartenkopf */
  --deko-filter:   drop-shadow(0 0 1px rgba(110,84,20,0.35))
                   drop-shadow(0 2px 3px rgba(20,40,60,0.28))
                   drop-shadow(0 5px 8px rgba(20,40,60,0.20));
                               /* Deko-Möwen: zarte bronzefarbene Kante +
                                  enger Kontaktschatten + weicher Schlag-
                                  schatten – hebt die Möwen auf dem hellen
                                  Design deutlicher ab */
}