/* ============================================================
   HAMBURG ZWISCHEN DEN REGALEN – Basis-Stylesheet
   Layout, Schriften, Abstände – und KEINE festen Farbwerte.
   Jede Farbe kommt aus einer CSS-Variablen, die pro Markt in
   css/theme-<markt>.css gesetzt wird. Jede Seite bindet zuerst
   diese Datei, dann die Theme-Datei ihres Marktes ein.

   ------------------------------------------------------------
   FARB-VARIABLEN – WAS SIE JEWEILS ÄNDERN
   (die konkreten Werte stehen in css/theme-<markt>.css)
   ------------------------------------------------------------
   GRUNDFLÄCHEN & TEXT
     --page-bg          Seitenhintergrund hinter allem
     --page-gradient    optionaler Verlauf über --page-bg (none = aus)
     --header-bg        alle dunklen Kopf-/Leistenflächen: Sticky-Kopf
                        der Startseite, Kartenkopf, Intro-Kopf,
                        Kachel-Beschriftung, Markt-Kachel-Kopf
     --body-bg          Füllfläche aller Inhaltskarten: Hafenstopp-
                        Karte, Intro-Box, Hafenstopp-Kachel, Markt-Kachel
     --body-text        Haupttext auf heller Kartenfläche: Teaser-Text,
                        CTA-Text, Intro-Leadsatz
     --body-text-2      Nebentext auf heller Kartenfläche: Abschnitts-
                        Fließtext, Intro-Absätze, Markt-Beschreibung
     --muted-text       kleine gedämpfte Zeilen auf dunklen Flächen:
                        Kopf-Unterzeilen, Karten-Tagline, Intro-Unter-
                        zeile, Titelzeile auf den Kacheln
   AKZENTE
     --gold             Hauptakzent auf dunklen Flächen: Kampagnen-
                        titel, Karten-Untertitel, Intro-Titel, Markt-
                        Name, Kachel-Sortiment, Klapp-Pfeil und aktive
                        Sprache im Umschalter
     --accent-body      Akzent im hellen Textteil: Teaser-Label, linker
                        Rand der Teaser-Box, Abschnitts-Überschrift,
                        CTA-Überschrift, Hover der Impressum-Links
     --stops-title-color Schriftfarbe der Überschrift
                        „Die neun Hafenstopps" (Fallback: --gold)
   RAHMEN & LINIEN
     --card-outline        Rahmen von Hafenstopp-Karte, Intro-Box,
                           Kacheln und Markt-Kacheln (Ruhezustand)
     --card-outline-hover  derselbe Rahmen beim Überfahren einer
                           Kachel / Markt-Kachel
     --divider             feine Trennlinien: unter dem Sticky-Kopf und
                           über dem Karten-Untertitel
   BADGE / MARKE
     --badge-bg         Fläche des Buttons „Hafenstopp X von 9", des
                        runden Heim-Knopfes daneben und der
                        „Stopp X"-Marke auf den Kacheln
     --badge-text       Schrift bzw. Haus-Symbol auf diesen Flächen
   SPRACHUMSCHALTER
     --lang-surface     Fläche von Knopf und aufgeklapptem Menü
     --lang-border      Rahmen von Knopf und Menü
     --lang-menu-text   Schrift der Menüeinträge (Deutsch / English)
     --lang-menu-divider Trennlinie zwischen den beiden Einträgen
     --lang-menu-hover-bg Hintergrund eines Eintrags beim Überfahren
   BOXEN IM TEXTTEIL / STARTSEITE
     --teaser-bg        Fläche der „Wusstest du schon"-Box
     --cta-bg           Fläche der CTA-Box (Handlungsaufruf)
     --cta-border       Rahmen der CTA-Box
     --stops-panel-bg     Fläche hinter dem Kachelblock der Startseite
     --stops-panel-border Rahmen dieser Fläche (auch Rahmen des
                          Überschriften-Kastens „Die neun Hafenstopps")
     --stops-panel-bw     Rahmenbreite dieser Fläche (0 = keine)  [Layout]
     --stops-panel-pad    Innenabstand dieser Fläche (0 = keiner)  [Layout]
     --stops-title-pad    Innenabstand NUR des Überschriften-Kastens
                          „Die neun Hafenstopps"; bestimmt dessen Höhe
                          (Standard 12px, in beiden Designs gleich)  [Layout]
   IMPRESSUM / DATENSCHUTZ
     --legal-text       Schriftfarbe der Impressum/Datenschutz-Zeile
     --legal-underline  Unterstrich-Farbe dieser Links (Ruhezustand)
   EFFEKTE
     --shadow-color     Farbe aller Schlagschatten (Karten, Kacheln,
                        Badge, Sprachmenü, Sticky-Kopf)
     --card-img-fade    Verlauf, mit dem das Kartenfoto unten in den
                        Kartenkopf übergeht
     --deko-filter      kompletter filter-Wert der Deko-Möwen: helles
                        Design nur Schlagschatten, dunkles Design
                        zusätzlich heller Schein (sonst verschwinden
                        die schwarzen Flügel auf den dunklen Flächen)
   LAYOUT (keine Farbe)
     --radius           Eckenradius der großen Karten
     --img-badge-h      Höhe des Badges „Hafenstopp X von 9" auf dem
                        Kartenfoto UND zugleich der Durchmesser des
                        runden Heim-Knopfes daneben (beide sollen exakt
                        gleich hoch sein – daher ein gemeinsamer Wert)
   ============================================================ */

/* ---------- SCHRIFTEN ---------- */
@font-face {
  font-family: 'REWEMato';
  src: url('../fonts/REWEMatoWeb.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'REWEMato';
  src: url('../fonts/REWEMatoWebMedium.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* ---------- LAYOUT-VARIABLE ----------
   Einziger Nicht-Farb-Wert, der hier fest steht. Alle Farben
   siehe Kopf dieser Datei + css/theme-<markt>.css. */
:root {
  --radius: 16px;
  /* Höhe des Hafenstopp-Badges = Durchmesser des Heim-Knopfes.
     28px statt der früher rein aus Schrift + Innenabstand entstandenen
     ~21px: Der runde Knopf ist damit noch bequem mit dem Daumen zu
     treffen, ohne neben dem Badge zu groß zu wirken. */
  --img-badge-h: 28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Waagerechtes Überlaufen abschneiden. Wichtig: `hidden`, NICHT `clip`.
   Die per 100vw volle Kopffläche und die Deko-Möwe .deko-moewe--fly
   ragen über den 430px-Inhalt hinaus. `overflow-x: clip` schneidet das
   zwar optisch ab, lässt aber die *scrollbare* Breite wachsen – und
   `body { margin: 0 auto }` zentriert dann in dieser zu breiten Fläche,
   wodurch die ganze Startseite seitlich „verrutscht" (v. a. auf schmalen
   Fenstern, wo die Möwe über den Viewport-Rand ragt). Nur `hidden`
   kappt auch die scrollbare Breite. `overflow-y` wird dadurch
   automatisch zu `auto`; der Sticky-Kopf klebt weiterhin. */
html { overflow-x: hidden; }

body {
  font-family: 'REWEMato', sans-serif;
  font-weight: 400;
  background: var(--page-bg);
  background-image: var(--page-gradient, none);
  background-attachment: fixed;
  color: var(--body-text);
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 32px;
}

/* ---------- STICKY BANNER (nur Übersichtsseite) ----------
   Die dunkle Kopf-FLÄCHE passt sich automatisch der Gerätebreite an:
   Hintergrund, Schatten, Trennlinie und die Möwen-Deko ziehen sich über
   die volle Viewport-Breite (100vw), obwohl der Seiteninhalt auf 430px
   begrenzt bleibt. Die INHALTE des Kopfes (Titel, Unterzeile, Sprach-
   umschalter) bleiben unverändert mittig im 430px-Raster – sie sitzen im
   normal breiten .site-header, nur die Fläche dahinter wird freigestellt. */
.site-header {
  text-align: center;
  padding: 16px 20px 14px;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Die eigentliche Fläche: volle Gerätebreite, mittig ausgerichtet.
   Freistellung über `left: calc(50% - 50vw)` statt `left: 50%` +
   `transform: translateX(-50%)`. Ein `transform` auf einem Element,
   das beim Scrollen (Sticky-Kopf, fixierter Hintergrund) jede Frame
   neu gezeichnet wird, kann um einzelne Pixel zittern – die Kopf-
   fläche „verrutscht" dann sichtbar gegen den Inhalt. Ohne transform
   ist die Position statisch. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--header-bg);
  box-shadow: 0 2px 14px var(--shadow-color, rgba(0,0,0,0.6));
  border-bottom: 1px solid var(--divider, rgba(242,192,97,0.5));
}
/* Eigener Rahmen fürs Wasserzeichen – ebenfalls über die volle Breite,
   so sitzt die Möwe immer in der echten oberen rechten Ecke der Fläche.
   Overflow verhindert zugleich, dass der Kopf das aufgeklappte
   Sprachmenü abschneidet. */
.site-header__deko {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
}
.site-header .header-gull {
  position: absolute;
  left: -8px; top: -12px;
  width: 84px;
  opacity: 0.14;
  /* gespiegelt (scaleX(-1)), damit die Möwe auf der linken Kopf-Seite
     in die Fläche hinein statt aus ihr heraus fliegt */
  transform: rotate(6deg) scaleX(-1);
}
.site-header__title {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  position: relative;
  padding: 0 44px;   /* Platz für den Sprachumschalter */
}
.site-header__sub {
  font-size: 9px;
  color: var(--muted-text, rgba(242,240,236,0.62));
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  padding: 0 44px;
}

/* ---------- KARTE ---------- */
.card {
  margin: 22px 16px 0;
  background: var(--body-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.6)),
              0 2px 8px var(--shadow-color, rgba(0,0,0,0.6));
  border: 1.5px solid var(--card-outline, rgba(242,192,97,0.45));
  animation: fadeUp 0.5s ease both;
}

/* ---------- BILD ---------- */
.card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card:hover .card__img { transform: scale(1.03); }

/* Verlauf: Foto blendet unten in den Kartenkopf über */
.card__img-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: var(--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%));
  pointer-events: none;
}

/* Das Badge „Hafenstopp X von 9" sitzt mittig am oberen Bildrand –
   zwischen dem runden Heim-Knopf links (.card__img-home) und dem
   Sprachumschalter rechts (.lang). Beide stehen in derselben Zeile
   (top: 12px), deshalb ist die Breite des Badges begrenzt: links der
   Knopf (--img-badge-h + 12px Rand), rechts der Sprachknopf (~74px).
   Der größere der beiden Werte wird symmetrisch von beiden Seiten
   abgezogen, damit das Badge echt mittig bleibt und trotzdem nie an
   den Sprachumschalter stößt. Sehr lange Beschriftungen würden hier
   abgeschnitten – die tatsächlichen Texte („Hafenstopp 1 von 9" /
   „Harbour Stop 1 of 9") passen bis hinunter zu 320px Bildschirm. */
.card__img-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * 74px);
  height: var(--img-badge-h, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  background: var(--badge-bg, var(--gold));
  color: var(--badge-text, var(--header-bg));
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.6));
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Badge ist jetzt ein Link zurück zur Startseite.
   Das translateX(-50%) muss im Hover-Zustand wiederholt werden, sonst
   springt das mittig gesetzte Badge beim Überfahren nach rechts. */
.card__img-badge:hover,
.card__img-badge:focus-visible {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 10px var(--shadow-color, rgba(0,0,0,0.6));
}

/* ---------- HEIM-KNOPF OBEN LINKS AUF DEM KARTENFOTO ----------
   Führt zurück auf die Startseite DESSELBEN Marktes (gleiches Ziel wie
   das Badge, nur als eigener, sofort erkennbarer Knopf). Gestaltet wie
   die runden Pfeil-Knöpfe der Vor/Zurück-Leiste (goldene Fläche, Symbol
   in --header-bg – dasselbe geprüfte Kontrastpaar wie beim Badge), sein
   Durchmesser ist exakt die Badge-Höhe --img-badge-h.

   Das Haus ist ein Inline-SVG mit `fill: currentColor`: Ein Unicode-
   Haus (U+2302 ⌂) fehlt in vielen Systemschriften und in der REWE-Mato,
   ein Emoji-Haus brächte eine fremde Farbigkeit mit. Anders als ein
   Bild-Asset (PNG) hat das SVG hier keine Transparenz-/Kontrast-
   Probleme, weil es dieselbe Farbe wie der Pfeil-Text erbt. */
.card__img-home {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: var(--img-badge-h, 28px);
  height: var(--img-badge-h, 28px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-bg, var(--gold));
  color: var(--badge-text, var(--header-bg));
  box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.6));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.card__img-home svg {
  width: 58%;
  height: 58%;
  display: block;
  fill: currentColor;
}
/* Vergrößerte Trefferfläche: Der sichtbare Kreis bleibt 28px, antippbar
   sind rundherum 8px mehr (≈44px) – ohne das Badge zu überdecken. */
.card__img-home::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.card__img-home:hover,
.card__img-home:focus-visible,
.card__img-home:active {
  transform: scale(1.08);
  box-shadow: 0 4px 10px var(--shadow-color, rgba(0,0,0,0.6));
}

/* KI-Kennzeichnung – dezent, untere linke Ecke jedes Fotos.
   Betrifft nur echte Motiv-Fotos, nicht die Möwen-Grafiken oder das
   REWE-Logo, da nur die Fotos KI-generiert sind. */
.ai-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 8px;
  width: auto;
  z-index: 2;
  opacity: 0.6;
  pointer-events: none;
}
/* Auf den Kacheln der Startseite (16:9, volle Breite) etwas kleiner als
   auf den großen Fotos, aber noch erkennbar. */
.ai-badge--tile {
  height: 7px;
  left: 7px;
  bottom: 7px;
}

/* ---------- HEADER DER KARTE ---------- */
.card__header {
  position: relative;
  background: var(--header-bg);
  padding: 20px 18px 18px;
  text-align: center;
  overflow: hidden;
}
.card__gull {
  position: absolute;
  right: -6px; top: -8px;
  width: 92px;
  opacity: 0.12;
  transform: rotate(4deg);
  pointer-events: none;
}
.card__campaign {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.35;
  position: relative;
}
.card__tagline {
  font-size: 9.5px;
  color: var(--muted-text, rgba(242,240,236,0.62));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 5px;
  position: relative;
}
.card__subtitle {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 11px;
  line-height: 1.35;
  padding-top: 11px;
  border-top: 1px solid var(--divider, rgba(242,192,97,0.5));
  position: relative;
}

/* ---------- TEXTTEIL ---------- */
.card__body {
  position: relative;
  overflow: hidden;
}
.card__body-gull {
  position: absolute;
  right: -30px;
  bottom: 60px;
  width: 220px;
  opacity: 0.15;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}
.card__body > *:not(.card__body-gull) {
  position: relative;
  z-index: 1;
}

/* „Wusstest du schon…" */
.card__teaser {
  position: relative;   /* Bezug für die Deko-Möwe .deko-moewe--land */
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: var(--teaser-bg);
  border-left: 3px solid var(--accent-body);
  border-radius: 0 8px 8px 0;
}
.card__teaser-label {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-body);
  margin-bottom: 5px;
}
.card__teaser-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body-text);
}

/* Haupttext */
.card__section { padding: 16px 18px 8px; }
.card__section-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent-body);
  line-height: 1.35;
  margin-bottom: 8px;
}
.card__section-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--body-text-2);
}

/* Abstand zwischen mehreren Absätzen im selben Textblock.
   Ein Fließtext in content.json darf ein String sein (ein Absatz) oder
   eine Liste von Strings (mehrere Absätze) – build.py macht daraus je
   ein <p>. Diese Regel setzt den Abstand zwischen aufeinanderfolgenden
   Absätzen; der erste bleibt ohne oberen Abstand. */
.card__teaser-text  + .card__teaser-text,
.card__section-text + .card__section-text,
.card__cta-text     + .card__cta-text {
  margin-top: 0.9em;
}

/* Call to Action */
.card__cta {
  margin: 12px 18px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
}
.card__cta-title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--accent-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.card__cta-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--body-text);
}

/* ---------- FUSSZEILE ---------- */
.card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px 14px;
}
.rewe-logo { height: 48px; width: auto; }

/* ---------- VOR / ZURÜCK ZWISCHEN DEN HAFENSTOPPS ----------
   Im Textteil der Hafenstopp-Karte direkt nach der CTA-Box und noch vor
   dem REWE-Logo im Karten-Footer. build.py berechnet die Ziele aus der
   Reihenfolge der Stops in content.json – im Kreis, immer innerhalb
   desselben Marktes und derselben Sprache. Kein Ziel wird je ausgeblendet.

   Der Knopf ist ein einfacher goldener Kreis, der nur den Pfeil enthält
   (--gold-Fläche, Pfeil in --header-bg – dasselbe geprüfte Kontrastpaar
   wie beim Hafenstopp-Badge). Die Beschriftung steht DANEBEN, außerhalb
   des Kreises, direkt auf der Kartenfläche – daher Textfarben passend zu
   --body-bg: Label in --accent-body (laut Theme-Regel auf --body-bg
   lesbar, WCAG ≥ 4.5:1), Nachbarname in --body-text-2. */
.stop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 16px 18px 4px;
}
.stop-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
.stop-nav__btn--prev { justify-content: flex-start; text-align: left; }
.stop-nav__btn--next { justify-content: flex-end; text-align: right; }

/* Der runde Knopf – enthält nur den Pfeil */
.stop-nav__circle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--header-bg);
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.4));
  transition: transform 0.15s ease;
}
.stop-nav__btn:hover .stop-nav__circle,
.stop-nav__btn:focus-visible .stop-nav__circle,
.stop-nav__btn:active .stop-nav__circle { transform: scale(1.08); }

/* Beschriftung neben dem Kreis; Label + Nachbarname untereinander.
   Darf bei schmalem Viewport (~375px) zweizeilig umbrechen, statt die
   Schrift weiter zu verkleinern. */
.stop-nav__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stop-nav__label {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--accent-body);
}
.stop-nav__name {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 2px;
  color: var(--body-text-2);
}

/* ---------- HINWEIS-/DISCLAIMER-SEITE ----------
   Gleiche Kartenoptik wie die Hafenstopps, aber ohne Foto oben: der
   Kartenkopf beginnt direkt mit einer kurzen Überschrift. Er gibt das
   aufklappende Sprachmenü frei (overflow sichtbar, sonst würde der Kopf
   es abschneiden) und reserviert oben Platz für den Sprachumschalter. */
.card__header--plain {
  overflow: visible;
  padding-top: 46px;
}
/* Dezenter Rücklink unter dem Hinweistext – kein Call-to-Action. */
.card__back {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-body);
  text-decoration: underline;
  text-decoration-color: var(--legal-underline, rgba(242,192,97,0.4));
  text-underline-offset: 3px;
}
.card__back:hover,
.card__back:focus-visible { color: var(--gold); }

/* ---------- ANIMATION ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SPRACHUMSCHALTER
   ============================================================ */
.lang {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
}

/* Im Seitenkopf folgt der Sprach-Umschalter der vollen Gerätebreite:
   Er sitzt immer 12px vom rechten Bildschirmrand – nicht vom Rand des
   auf 430px begrenzten Inhalts. (100vw - 100%) / 2 ist der Abstand
   zwischen Inhaltskante und Bildschirmrand; auf Geräten bis 430px ist
   diese Klammer 0 und es bleibt bei 12px wie bisher. Das aufklappende
   Menü bleibt über `right: 0` weiterhin unter dem Knopf ausgerichtet. */
.site-header .lang {
  right: calc(12px - (100vw - 100%) / 2);
}

/* Der antippbare Knopf mit der aktuellen Flagge */
.lang__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--lang-surface, rgba(38,35,35,0.85));
  border: 1px solid var(--lang-border, rgba(242,192,97,0.55));
  border-radius: 20px;
  padding: 5px 9px 5px 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang__btn img {
  width: 22px;
  height: auto;
  border-radius: 2px;
  display: block;
}
.lang__btn::after {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gold);
  transition: transform 0.2s ease;
}
.lang.is-open .lang__btn::after { transform: rotate(180deg); }

/* Aufklappende Auswahl */
.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--lang-surface, var(--header-bg));
  border: 1px solid var(--lang-border, rgba(242,192,97,0.55));
  border-radius: 10px;
  overflow: hidden;
  min-width: 148px;
  box-shadow: 0 6px 20px var(--shadow-color, rgba(0,0,0,0.6));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang__menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  text-decoration: none;
  color: var(--lang-menu-text, #F2F0EC);
  font-size: 13.5px;
  font-weight: 400;
}
.lang__menu a + a { border-top: 1px solid var(--lang-menu-divider, rgba(255,255,255,0.10)); }
.lang__menu a:hover { background: var(--lang-menu-hover-bg, rgba(242,192,97,0.14)); }
.lang__menu a[aria-current="true"] {
  color: var(--gold);
  font-weight: 600;
}
.lang__menu img {
  width: 24px;
  height: auto;
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
}

/* Der Sprachumschalter sitzt über dem Kartenbild als Bezugsrahmen.
   .site-header ist NICHT hier gelistet: der bleibt `position: sticky`
   (siehe oben), sonst würde diese Regel das Kleben überschreiben. Als
   sticky-Element ist der Kopf trotzdem Bezugsrahmen für den absolut
   positionierten Sprach-Umschalter. */
.card__img-wrap { position: relative; }


/* ============================================================
   STARTSEITE: Intro + Kacheln
   ============================================================ */
.intro {
  margin: 22px 16px 0;
  background: var(--body-bg);
  border-radius: var(--radius);
  border: 1.5px solid var(--card-outline, rgba(242,192,97,0.45));
  box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.6)),
              0 2px 8px var(--shadow-color, rgba(0,0,0,0.6));
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.intro__head {
  position: relative;
  background: var(--header-bg);
  padding: 22px 18px 20px;
  text-align: center;
  overflow: hidden;
}
.intro__gull {
  position: absolute;
  left: -6px; top: -8px;
  width: 92px;
  opacity: 0.12;
  transform: rotate(4deg) scaleX(-1);
  pointer-events: none;
}
.intro__title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.35;
  position: relative;
}
.intro__sub {
  font-size: 10px;
  color: var(--muted-text, rgba(242,240,236,0.62));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 6px;
  position: relative;
}
.intro__body { padding: 18px 18px 20px; }
.intro__lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--body-text);
  font-weight: 600;
  margin-bottom: 10px;
}
.intro__text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--body-text-2);
}
.intro__text + .intro__text { margin-top: 10px; }

/* Überschrift über den Kacheln.
   Optionaler Panel-Hintergrund (--stops-panel-*) – standardmäßig
   unsichtbar (transparent, Rahmenbreite 0, kein Innenabstand),
   ein Theme kann daraus eine sichtbare Fläche mit Rahmen machen. */
.stops-title {
  margin: 26px 16px 2px;
  /* Eigener Innenabstand – NICHT --stops-panel-pad (das steuert nur die
     Fläche hinter den Kacheln). So ist der Kasten hinter der Überschrift
     in beiden Designs gleich hoch. */
  padding: var(--stops-title-pad, 12px);
  background: var(--header-bg, transparent);
  border: var(--stops-panel-bw, 0) solid var(--stops-panel-border, transparent);
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stops-title-color, var(--gold));
  text-align: center;
}

/* Kachelliste – eine Kachel pro Zeile, volle Kartenbreite.
   Gleicher optionaler Panel-Hintergrund wie .stops-title. Die Kacheln
   sind dadurch deutlich größer; Bildformat und Beschriftung sind an die
   neue Breite angepasst (16:9 wie das Foto auf den Hafenstopp-Seiten). */
.stops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 16px 0;
  padding: var(--stops-panel-pad, 0);
  background: var(--stops-panel-bg, transparent);
  border: var(--stops-panel-bw, 0) solid var(--stops-panel-border, transparent);
  border-radius: 14px;
}
.stop {
  display: block;
  text-decoration: none;
  background: var(--body-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--card-outline, rgba(242,192,97,0.45));
  box-shadow: 0 6px 24px var(--shadow-color, rgba(0,0,0,0.6));
  animation: fadeUp 0.5s ease both;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.stop:hover {
  transform: translateY(-3px);
  border-color: var(--card-outline-hover, rgba(242,192,97,0.9));
}
.stop__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.stop__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.stop__nr {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--badge-bg, var(--gold));
  color: var(--badge-text, var(--header-bg));
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.6));
}
.stop__label {
  background: var(--header-bg);
  padding: 12px 14px 13px;
  text-align: center;
}
.stop__sortiment {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.3;
}
.stop__titel {
  font-size: 12px;
  color: var(--muted-text, rgba(242,240,236,0.62));
  margin-top: 4px;
  line-height: 1.4;
}

/* Fußzeile der Startseite */
.page-footer {
  display: flex;
  justify-content: center;
  padding: 28px 16px 8px;
}
.page-footer img { height: 46px; width: auto; }

/* ---------- RECHTLICHE FUSSZEILE (Impressum/Datenschutz) ----------
   Erscheint auf jeder Seite, unterhalb des jeweiligen Fußbereichs.
   Führt direkt zu den zentralen REWE-Seiten. */
.legal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 24px;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.legal-footer a {
  color: var(--legal-text, rgba(242,240,236,0.62));
  text-decoration: underline;
  text-decoration-color: var(--legal-underline, rgba(242,192,97,0.4));
  text-underline-offset: 2px;
}
.legal-footer a:hover,
.legal-footer a:focus-visible {
  color: var(--accent-body);
  text-decoration-color: var(--accent-body);
}
.legal-footer span { color: var(--legal-text, rgba(242,240,236,0.35)); }


/* ============================================================
   WURZEL-STARTSEITE: Marktauswahl
   Zwei große Kacheln im gleichen Stil wie die Hafenstopp-Kacheln.
   ============================================================ */
.markets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 16px 0;
}
.market {
  display: block;
  text-decoration: none;
  background: var(--body-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--card-outline, rgba(242,192,97,0.45));
  box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.6)),
              0 2px 8px var(--shadow-color, rgba(0,0,0,0.6));
  animation: fadeUp 0.5s ease both;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.market:hover,
.market:focus-visible {
  transform: translateY(-3px);
  border-color: var(--card-outline-hover, rgba(242,192,97,0.9));
}
.market__head {
  position: relative;
  background: var(--header-bg);
  padding: 22px 18px 18px;
  text-align: center;
  overflow: hidden;
}
.market__gull {
  position: absolute;
  right: -6px; top: -8px;
  width: 92px;
  opacity: 0.12;
  transform: rotate(4deg);
  pointer-events: none;
}
.market__name {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.35;
  position: relative;
}
.market__body {
  padding: 14px 18px 16px;
  text-align: center;
}
.market__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--body-text-2);
}


/* ============================================================
   DEKO-MÖWEN – kleine farbige Blickfänger
   Drei Möwen-Illustrationen (fliegend, landend, stehend) als
   dezente, verspielte Accents. build.py bindet sie auf der
   Startseite und den Hafenstopp-Seiten ein – für welche Märkte,
   steht in build.py in der Menge DEKO_MAERKTE. Sie sind bewusst
   klein gehalten und per `pointer-events: none` klick-durchlässig,
   damit sie die Inhalte ergänzen und nicht überlagern. Der
   Sichtbarkeits-Effekt (Schatten / Schein) kommt pro Design aus
   --deko-filter in der jeweiligen theme-*.css. Anders als die
   blassen Wasserzeichen-Möwen (moewe-gold.png) sind das
   vollfarbige Grafiken.

   Sorten:
   - Rand-Möwe (--fly): sitzt im Clip-Rahmen <div class="deko-clip">
     (direktes <body>-Kind). Darf über die Kante ragen; der Rahmen
     schneidet den Überstand ab, ohne die Seite breiter zu machen.
   - Eingebettete Möwen (--foot / --foot-home / --title / --land):
     sitzen IN dem Element, an dem sie kleben sollen, und werden
     relativ dazu positioniert – dadurch sitzen sie geräteunabhängig
     immer an derselben Stelle, auch wenn sich die Seitenhöhe (z. B.
     Kartenfoto = 16:9 der Kartenbreite) je Gerät ändert:
       --foot       in <div class="card__footer">  (auf REWE-Logo-Höhe)
       --foot-home  in <footer class="page-footer"> (neben dem Logo)
       --title      in <h2 class="stops-title">     (an der Überschrift)
       --land       in <div class="card__teaser">   (an „Wusstest du…")
   ============================================================ */
body { position: relative; }

.deko-moewe {
  position: absolute;
  width: 56px;
  height: auto;
  pointer-events: none;
  /* --deko-filter kommt aus der Theme-Datei: helles Design nur ein
     weicher Schlagschatten, dunkles Design zusätzlich ein heller
     Schein, damit die schwarzen Flügel nicht in den dunklen Flächen
     verschwinden. Fallback = Verhalten des hellen Designs. */
  filter: var(--deko-filter,
    drop-shadow(0 4px 6px var(--shadow-color, rgba(20,40,60,0.18))));
}

/* Clip-Rahmen für die fliegende Möwe – zwei ineinander liegende Kästen:

   .deko-clip      geht über die volle Viewport-Breite und schneidet
                   mit `overflow: hidden` alles ab, was am Bildschirm-
                   rand übersteht. So darf die Möwe frei über die Kante
                   ragen, ohne die Seite je breiter zu machen – der
                   Überstand wird weggeschnitten statt die Seite seitlich
                   zu verschieben. z-index über dem Sticky-Kopf (100),
                   damit die Möwe davor liegt.

   .deko-clip__col ist die 430px-Inhaltsspalte (mittig wie <body>). Die
                   Möwe wird relativ zu DIESER Spalte positioniert, also
                   zur Kartenkante – nicht zum Bildschirmrand. Auf breiten
                   Fenstern ragt sie damit sichtbar in den Seitenrand wie
                   gehabt; auf schmalen Fenstern (Handy) fallen Spalten-
                   und Bildschirmrand zusammen und der Überstand wird von
                   .deko-clip abgeschnitten. */
.deko-clip {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 280px;
  overflow: hidden;
  pointer-events: none;
}
.deko-clip__col {
  position: relative;
  max-width: 430px;
  height: 100%;
  margin: 0 auto;
}
/* Startseite: fliegende Möwe an der oberen rechten Ecke der Intro-Box.
   `right` negativ = ragt über die Kartenkante; Überstand siehe oben. */
.deko-moewe--fly {
  top: 60px;
  right: -20px;
  width: 70px;
  transform: rotate(-45deg);
}

/* Hafenstopp: landende Möwe an der „Wusstest du schon…"-Box.
   Sitzt IN <div class="card__teaser"> und wird relativ zu DIESER Box
   positioniert – dadurch geräteunabhängig immer auf Teaser-Höhe.
   (Eine feste Pixel-Höhe von der Seitenoberkante wanderte je Gerät,
   weil die Höhe des Kartenfotos = 16:9 der Kartenbreite variiert.)
   `top: 50%` + translateY(-50%) = senkrecht auf der Box zentriert;
   `right` negativ = ragt ein Stück über die rechte Kante hinaus. */
.deko-moewe--land {
  top: 10%;
  right: -10px;
  width: 58px;
  transform: translateY(-50%);
}

/* Hafenstopp: stehende Möwe mittig auf der Kartenfläche, auf Höhe
   des REWE-Logos. Sitzt in <div class="card__footer"> (Logo dort
   rechtsbündig – keine Überschneidung). */
.card__footer { position: relative; }
.deko-moewe--foot {
  left: 50%;
  bottom: 0px;   /* gleiche Grundlinie wie das Logo */
  width: 50px;
  transform: translateX(-50%);
}

/* Startseite: stehende Möwe direkt neben dem REWE-Logo im Seitenfuß.
   Sitzt in <footer class="page-footer">; das Logo bleibt mittig,
   die Möwe steht rechts daneben auf gleicher Grundlinie. */
.page-footer { position: relative; }
.deko-moewe--foot-home {
  left: 50%;
  bottom: 8px;
  margin-left: 30px;   /* halbe Logobreite + kleiner Abstand */
  width: 38px;
}

/* Startseite: landende Möwe rechts an der Überschrift „Die neun
   Hafenstopps". Kommt von rechts an den Rand der Überschrift, der
   ausgestreckte Flügel zeigt nach links auf den Text. Sitzt IM
   <h2 class="stops-title"> (dieses ist dafür position: relative). */
.stops-title { position: relative; }
.deko-moewe--title {
  left: 15px;
  top: 35%;
  width: 70px;
  transform: translateY(-50%) scaleX(-1);
}

/* Sehr schmale Geräte: Möwen noch etwas kleiner halten */
/* Sehr schmale Geräte (≈320px, z. B. iPhone SE 1. Gen.): Zwischen
   Heim-Knopf und Sprachumschalter bleiben dort nur noch ~140px für das
   mittige Badge. Schrift und Innenabstand werden minimal kleiner, damit
   „Hafenstopp X von 9" / „Harbour Stop X of 9" weiterhin vollständig
   hineinpasst, statt abgeschnitten zu werden. Ab 360px Breite (dem
   üblichen Minimum aktueller Geräte) bleibt alles wie gewohnt. */
@media (max-width: 344px) {
  .card__img-badge {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    padding: 0 10px;
  }
}

@media (max-width: 360px) {
  .deko-moewe--fly       { width: 54px; }
  .deko-moewe--land      { width: 50px; }
  .deko-moewe--foot      { width: 34px; }
  .deko-moewe--foot-home { width: 34px; margin-left: 26px; }
  .deko-moewe--title     { width: 48px; }
}