/* ============================================================
   THEME: Überseeboulevard – dunkles 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).
   Durchgehend dunkler Kupfer-Textteil.
   ============================================================ */
:root {

  /* ---------- GRUNDFLÄCHEN & TEXT ---------- */
  --page-bg:        #121010;   /* Seitenhintergrund hinter allem */
  --page-gradient:  linear-gradient(180deg, #1A1717 0%, #121010 45%, #0C0A0A 100%);
                               /* Verlauf über dem Seitenhintergrund (none = aus) */
  --header-bg:      #262323;   /* alle dunklen Kopfflächen: Sticky-Kopf,
                                  Kartenkopf, Intro-Kopf, Kachel-Beschriftung,
                                  Markt-Kachel-Kopf */
  --body-bg:        #554F4F;   /* Füllfläche aller Karten: Hafenstopp-Karte,
                                  Intro-Box, Kachel, Markt-Kachel */
  --body-text:      #ffffff;   /* Haupttext auf Kartenfläche: Teaser-Text,
                                  CTA-Text, Intro-Leadsatz */
  --body-text-2:    rgba(242,240,236,1);  /* Nebentext: Abschnitts-Fließtext,
                                  Intro-Absätze, Markt-Beschreibung */
  --muted-text:     rgba(242,240,236,0.62); /* gedämpfte Kleinzeilen auf dunkel:
                                  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:    #F2C061;   /* Akzent im Textteil: Teaser-Label + -Rand,
                                  Abschnitts-Überschrift, CTA-Überschrift,
                                  Hover der Impressum-Links.
                                  Hier Gold statt Bronze – sonst dunkel
                                  auf dunkel unsichtbar. */
  --stops-title-color: #F2C061; /* Überschrift „Die neun Hafenstopps" */

  /* ---------- 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 */

  /* ---------- SPRACHUMSCHALTER ---------- */
  --lang-surface:       rgba(38,35,35,0.85);   /* 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.10);/* Linie zwischen den Einträgen */
  --lang-menu-hover-bg: rgba(242,192,97,0.14); /* Eintrag beim Überfahren */

  /* ---------- BOXEN IM TEXTTEIL / STARTSEITE ---------- */
  --teaser-bg:      rgba(0,0,0,0.22);      /* „Wusstest du schon"-Box */
  --cta-bg:         rgba(0,0,0,0.40);      /* CTA-Box (Handlungsaufruf) */
  --cta-border:     rgba(242,192,97,0.50); /* Rahmen der CTA-Box */
  --stops-panel-bg:     transparent;       /* Fläche hinter Überschrift +
                                  Kachelblock der Startseite (aus) */
  --stops-panel-border: transparent;       /* Rahmen dieser Fläche (aus) */
  --stops-panel-bw:     0;                  /* Rahmenbreite (Layout) */
  --stops-panel-pad:    0;                  /* Innenabstand (Layout) */

  /* ---------- IMPRESSUM / DATENSCHUTZ ---------- */
  --legal-text:      rgba(242,240,236,0.62); /* Schrift der Impressum/
                                  Datenschutz-Zeile */
  --legal-underline: rgba(242,192,97,0.4);   /* Unterstrich dieser Links */

  /* ---------- EFFEKTE ---------- */
  --shadow-color:  rgba(0,0,0,0.6); /* alle Schlagschatten: Karten, Kacheln,
                                  Badge, Sprachmenü, Sticky-Kopf */
  --card-img-fade: linear-gradient(180deg,
                     rgba(38,35,35,0) 0%,
                     rgba(38,35,35,0.35) 65%,
                     rgba(38,35,35,0.85) 100%);
                               /* Übergang Kartenfoto -> Kartenkopf */
  --deko-filter:   drop-shadow(0 0 1px rgba(242, 192, 97,0.50))
                   drop-shadow(0 0 3px rgba(255,255,255,0.15))
                   drop-shadow(0 3px 6px rgba(0,0,0,0.50));
                               /* Deko-Möwen: heller Schein rund um die
                                  Silhouette, damit die schwarzen Flügel
                                  auf den dunklen Kopf-/Leistenflächen
                                  nicht verschwinden */
}