/* =====================================================================
   SOS Igel in Not · Lehr- und Lernpfad Drautal
   THEMENFARBEN – eine Farbe pro Themenbereich

   Diese Datei wird auf jeder Seite als LETZTES Stylesheet geladen.
   Sie fügt keine Inhalte hinzu und entfernt keine, sie ordnet den
   bestehenden Bausteinen nur die Farbe des jeweiligen Themenbereichs zu.

   Aufbau:
     1) Zentrale Farb-, Radien- und Schatten-Variablen
     2) Harmonisierung der älteren Farbnamen auf dasselbe System
     3) Themenauflösung pro Seite (data-theme am <body>)
     4) Navigation (ruhig, aktive Seite in ihrer Themenfarbe)
     5) Kopfzeile: dünne Themenlinie zur Orientierung
     6) Seitenkopf (Hero) mit dem Verlauf des Themenbereichs
     7) Wiederkehr der Themenfarbe in den gemeinsamen Bausteinen
     8) Karten- und Wissensbox-System
     9) Naturnahe Deko: Themenband über dem Fußbereich
    10) Seitenspezifische Akzente
    11) Rücksicht auf reduzierte Bewegung

   Neue Unterseiten brauchen nur zwei Angaben:
     <body data-page="…" data-theme="garden">   (Themenfarbe)
     und den passenden data-key in der Navigation.
   ===================================================================== */


/* =====================================================================
   1) ZENTRALE VARIABLEN
   ===================================================================== */
:root {
  --color-cream: #FFF8E8;
  --color-beige: #F4E4BD;
  --color-sage: #A9B98C;
  --color-nature: #87965E;
  --color-forest: #496331;
  --color-forest-dark: #26321F;
  --color-terracotta: #C96A3D;
  --color-emergency: #C94A38;
  --color-emergency-dark: #A9362A;
  --color-honey: #F4BE3E;
  --color-sky-soft: #AFCBD1;
  --color-text: #2D2118;

  /* Festgelegte Erkennungsfarben der Themenbereiche */
  --theme-start: #2D2118;
  --theme-emergency: #C94A38;
  --theme-trail: #F4BE3E;
  --theme-knowledge: #A9B98C;
  --theme-garden: #496331;
  --theme-children: #F4BE3E;
  --theme-about: #C96A3D;
  --theme-directions: #87965E;
  --theme-support: #496331;
  --theme-shop: #F4BE3E;

  /* Abgeleitete, lesbare Varianten (nur dunklere Abstufungen der
     Systemfarben – nötig, damit heller Text die Kontrastvorgaben
     erfüllt: Creme auf Naturgrün liegt bei 3,0:1, auf dem dunkleren
     Naturgrün bei 4,8:1). */
  --color-nature-deep: #66744A;
  --color-terracotta-deep: #A8522C;
  --color-honey-deep: #D89A1A;

  --radius-small: 10px;
  --radius-medium: 18px;
  --radius-large: 28px;

  --shadow-soft: 0 8px 24px rgba(45, 33, 24, 0.10);
  --shadow-card: 0 4px 14px rgba(45, 33, 24, 0.08);
}


/* =====================================================================
   2) HARMONISIERUNG
   Die Seiten benutzen seit Anfang an eigene Farbnamen. Sie zeigen ab
   jetzt auf das gemeinsame Natur-Farbsystem, damit alle Unterseiten
   dieselbe Grundstimmung haben – ohne dass jede Regel umgeschrieben
   werden muss.
   ===================================================================== */
:root {
  --sun: var(--color-honey);
  --sun-soft: #F4D77A;
  --sun-deep: var(--color-honey-deep);
  --sun-bg: var(--color-beige);
  --honey: var(--color-honey);
  --honey-light: var(--color-beige);

  --ink: var(--color-text);
  --ink-soft: #4A3520;
  --bark: var(--color-text);
  --text-mid: #4A3520;

  --cream: var(--color-cream);
  --cream-warm: var(--color-cream);
  --paper: #FFFCF3;
  --paper-shadow: var(--color-beige);

  --leaf: var(--color-forest);
  --leaf-soft: var(--color-nature);
  --moss: var(--color-forest);
  --moss-dark: var(--color-forest-dark);
  --success: var(--color-nature);

  /* Rot bleibt dem Notfall vorbehalten. */
  --accent-red: var(--color-emergency);
  --accent-red-deep: var(--color-emergency-dark);
  --emergency: var(--color-emergency);

  /* „Terracotta“ war früher ein Rotton und wurde für Fließtext-Links
     genutzt. Jetzt ist es das wärmere Terrakotta in einer lesbaren
     Abstufung. */
  --terracotta: var(--color-terracotta-deep);
  --terracotta-dark: #8C4223;

  --berry: var(--color-terracotta-deep);
  --sky: #5C7F91;

  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-soft);
}


/* =====================================================================
   3) THEMENAUFLÖSUNG
   Jede Seite setzt genau eine Themenfarbe. Zusätzlich zu data-theme
   greifen die bekannten data-page-Werte, damit bestehende und neue
   Seiten auch ohne zweites Attribut richtig eingefärbt werden.

   --theme        Erkennungsfarbe wie in der Zuordnung festgelegt
   --theme-fill   Fläche, die Schrift trägt (kontrastgeprüft)
   --theme-on     Schriftfarbe auf --theme-fill
   --theme-text   Themenfarbe als Schriftfarbe auf hellem Grund
   --theme-line   dünne Linien, Karten- und Kartenrahmen
   --theme-tint   sehr heller Themenhintergrund
   --theme-accent zweite Themenfarbe für Zahlen, Icons, Details
   ===================================================================== */
body {
  /* Standard (Rechtliches, Bildnachweise, 404): ruhig und neutral */
  --theme: var(--color-text);
  --theme-fill: var(--color-text);
  --theme-fill-hover: #43321F;
  --theme-on: var(--color-cream);
  --theme-text: var(--color-text);
  --theme-accent: var(--color-honey);
  --theme-link: var(--color-terracotta-deep);
  --theme-link-hover: #8C4223;
  --theme-line: rgba(45, 33, 24, 0.30);
  --theme-tint: rgba(244, 190, 62, 0.14);
  --theme-tint-soft: rgba(244, 190, 62, 0.08);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4E4BD 60%, #E5C978 100%);
  --theme-hero-size: 100% 100%;
  --theme-hero-ink: var(--color-text);
  --theme-hero-ink-soft: #4A3520;
}

/* --- 1 · START ------------------------------------------------------ */
body[data-theme="start"],
body[data-page="start"] {
  --theme: var(--theme-start);
  --theme-fill: var(--theme-start);
  --theme-fill-hover: #43321F;
  --theme-on: var(--color-cream);
  --theme-text: var(--color-text);
  --theme-accent: var(--color-honey);
  --theme-link: var(--color-terracotta-deep);
  --theme-link-hover: #8C4223;
  /* Dunkles Braun bleibt die Erkennungsfarbe der Startseite, als
     Kartenkante aber etwas weicher als eine fast schwarze Linie. */
  --theme-line: rgba(45, 33, 24, 0.55);
  --theme-tint: rgba(244, 190, 62, 0.18);
  --theme-tint-soft: rgba(244, 190, 62, 0.09);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4E4BD 55%, #E5C978 78%, #A9B98C 100%);
}

/* --- 2 · IGEL-NOTFALL ---------------------------------------------- */
body[data-theme="emergency"],
body[data-page="notfall"] {
  --theme: var(--theme-emergency);
  --theme-fill: var(--color-emergency);
  --theme-fill-hover: var(--color-emergency-dark);
  --theme-on: #FFFFFF;
  --theme-text: var(--color-emergency-dark);
  --theme-accent: var(--color-honey);
  --theme-link: var(--color-emergency-dark);
  --theme-link-hover: #8C2C22;
  --theme-line: var(--color-emergency);
  --theme-tint: rgba(201, 74, 56, 0.10);
  --theme-tint-soft: rgba(201, 74, 56, 0.06);
  --theme-gradient: linear-gradient(135deg, #A9362A 0%, #C94A38 100%);
  --theme-hero-ink: var(--color-cream);
  --theme-hero-ink-soft: #FFFFFF;
}

/* --- 3 · LEHRPFAD -------------------------------------------------- */
body[data-theme="trail"],
body[data-page="lehrpfad"] {
  --theme: var(--theme-trail);
  --theme-fill: var(--color-honey);
  --theme-fill-hover: var(--color-honey-deep);
  --theme-on: var(--color-text);
  --theme-text: var(--color-forest);
  --theme-accent: var(--color-forest);
  --theme-link: var(--color-forest);
  --theme-link-hover: #354923;
  --theme-line: var(--color-forest);
  --theme-tint: rgba(244, 190, 62, 0.20);
  --theme-tint-soft: rgba(244, 190, 62, 0.10);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4D77A 25%, #D6C86E 45%, #87965E 72%, #496331 100%);
  /* Der Verlauf endet in Waldgrün. Im Seitenkopf wird deshalb nur der
     helle Beginn gezeigt, damit die dunkle Schrift lesbar bleibt. */
  --theme-hero-size: 100% 260%;
}

/* --- 4 · IGELWISSEN ------------------------------------------------ */
body[data-theme="knowledge"],
body[data-page="wissen"] {
  --theme: var(--theme-knowledge);
  --theme-fill: var(--color-sage);
  --theme-fill-hover: #97A87A;
  --theme-on: var(--color-text);
  --theme-text: var(--color-nature-deep);
  --theme-accent: var(--color-nature);
  --theme-link: var(--color-nature-deep);
  --theme-link-hover: #4E5937;
  --theme-line: var(--color-nature);
  --theme-tint: rgba(169, 185, 140, 0.22);
  --theme-tint-soft: rgba(169, 185, 140, 0.12);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4E4BD 35%, #E8E2C5 55%, #A9B98C 100%);
}

/* --- 5 · NATURGARTEN ----------------------------------------------- */
body[data-theme="garden"],
body[data-page="naturgarten"] {
  --theme: var(--theme-garden);
  --theme-fill: var(--color-forest);
  --theme-fill-hover: var(--color-forest-dark);
  --theme-on: var(--color-cream);
  --theme-text: var(--color-forest);
  --theme-accent: var(--color-terracotta-deep);
  --theme-link: var(--color-forest);
  --theme-link-hover: #354923;
  --theme-line: var(--color-nature);
  --theme-tint: rgba(73, 99, 49, 0.12);
  --theme-tint-soft: rgba(73, 99, 49, 0.07);
  --theme-gradient: linear-gradient(180deg, #DDE7C6 0%, #A9B98C 28%, #6F8450 62%, #496331 100%);
  --theme-hero-size: 100% 260%;
}

/* --- 6 · FÜR KINDER ------------------------------------------------ */
body[data-theme="children"],
body[data-page="kinder"] {
  --theme: var(--theme-children);
  --theme-fill: var(--color-honey);
  --theme-fill-hover: var(--color-honey-deep);
  --theme-on: var(--color-text);
  --theme-text: var(--color-terracotta-deep);
  --theme-accent: var(--color-terracotta);
  --theme-link: var(--color-terracotta-deep);
  --theme-link-hover: #8C4223;
  --theme-line: var(--color-terracotta);
  --theme-tint: rgba(244, 190, 62, 0.22);
  --theme-tint-soft: rgba(244, 190, 62, 0.11);
  --theme-gradient: linear-gradient(135deg, #FFF8E8 0%, #F4D77A 42%, #DFA06A 72%, #A9B98C 100%);
}

/* --- 7 · ÜBER UNS -------------------------------------------------- */
body[data-theme="about"],
body[data-page="ueber-uns"] {
  --theme: var(--theme-about);
  --theme-fill: var(--color-terracotta-deep);
  --theme-fill-hover: #8C4223;
  --theme-on: var(--color-cream);
  --theme-text: var(--color-terracotta-deep);
  --theme-accent: var(--color-terracotta);
  --theme-link: var(--color-terracotta-deep);
  --theme-link-hover: #8C4223;
  --theme-line: var(--color-terracotta);
  --theme-tint: rgba(201, 106, 61, 0.14);
  --theme-tint-soft: rgba(201, 106, 61, 0.07);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4E4BD 52%, #E6B181 78%, #D99A68 100%);
}

/* --- 8 · ANFAHRT --------------------------------------------------- */
body[data-theme="directions"],
body[data-page="anfahrt"] {
  --theme: var(--theme-directions);
  --theme-fill: var(--color-nature-deep);
  --theme-fill-hover: #4E5937;
  --theme-on: var(--color-cream);
  --theme-text: var(--color-nature-deep);
  --theme-accent: var(--color-nature);
  --theme-link: var(--color-nature-deep);
  --theme-link-hover: #4E5937;
  --theme-line: var(--color-nature);
  --theme-tint: rgba(135, 150, 94, 0.18);
  --theme-tint-soft: rgba(135, 150, 94, 0.09);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #E8E5CA 30%, #DDE2C3 55%, #A9B98C 78%, #87965E 100%);
}

/* --- 9 · UNTERSTÜTZEN ---------------------------------------------- */
body[data-theme="support"],
body[data-page="mitmachen"] {
  --theme: var(--theme-support);
  --theme-fill: var(--color-forest);
  --theme-fill-hover: var(--color-forest-dark);
  --theme-on: var(--color-cream);
  --theme-text: var(--color-forest);
  --theme-accent: var(--color-terracotta-deep);
  --theme-link: var(--color-forest);
  --theme-link-hover: #354923;
  --theme-line: var(--color-nature);
  --theme-tint: rgba(73, 99, 49, 0.12);
  --theme-tint-soft: rgba(73, 99, 49, 0.07);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F1E2B8 30%, #C7D0A8 58%, #87965E 78%, #496331 100%);
  --theme-hero-size: 100% 260%;
}

/* --- 10 · SHOP ----------------------------------------------------- */
body[data-theme="shop"],
body[data-page="shop"] {
  --theme: var(--theme-shop);
  --theme-fill: var(--color-honey);
  --theme-fill-hover: var(--color-honey-deep);
  --theme-on: var(--color-text);
  --theme-text: var(--color-text);
  --theme-accent: var(--color-nature);
  --theme-link: var(--color-terracotta-deep);
  --theme-link-hover: #8C4223;
  /* Honiggelb mit dezentem Naturgrün als ruhige Linienfarbe */
  --theme-line: var(--color-nature);
  --theme-tint: rgba(244, 190, 62, 0.18);
  --theme-tint-soft: rgba(244, 190, 62, 0.09);
  --theme-gradient: linear-gradient(180deg, #FFF8E8 0%, #F4E4BD 62%, #F4D77A 82%, #F4BE3E 100%);
}


/* =====================================================================
   4) NAVIGATION – jeder Bereich in seiner eigenen Farbe
   Grundhaltung: Jeder Menüpunkt liegt dauerhaft auf einer hellen Fläche
   in der Farbe seines Themenbereichs und trägt darunter einen Strich in
   derselben Farbe. So ist auf den ersten Blick zu sehen, dass oben
   Bereiche zur Auswahl stehen, und zu welchem Thema jeder Bereich
   gehört – dieselben Farben kommen auf der Startseite und auf den
   Unterseiten wieder.
   Beim Überfahren füllt sich die Fläche mit der vollen Bereichsfarbe,
   die geöffnete Seite trägt sie dauerhaft. Erkennbar ist die aktive
   Seite zusätzlich an Ring, Schriftstärke und einem Punkt vor dem
   Namen, also nicht allein an der Farbe. Notfall und Shop bleiben
   dauerhaft runde Buttons und heben sich damit als Handlung von den
   Bereichen ab.
   ===================================================================== */

/* Farbwerte des jeweiligen Menüpunkts:
   --nav-fill  volle Bereichsfarbe (Überfahren, geöffnete Seite)
   --nav-on    Schriftfarbe auf der vollen Fläche
   --nav-line  Strich bzw. Ring in einer kontrastgeprüften Abstufung
   --nav-tint  helle Ruhefläche in der Bereichsfarbe */
.nav a[data-key="start"]       { --nav-fill: var(--theme-start);      --nav-on: var(--color-cream); --nav-line: var(--color-text);        --nav-tint: rgba(45, 33, 24, 0.10); }
.nav a[data-key="notfall"]     { --nav-fill: var(--color-emergency);  --nav-on: #FFFFFF;            --nav-line: var(--color-emergency-dark); --nav-tint: rgba(201, 74, 56, 0.12); }
.nav a[data-key="lehrpfad"]    { --nav-fill: var(--color-honey);      --nav-on: var(--color-text);  --nav-line: var(--color-forest);      --nav-tint: rgba(244, 190, 62, 0.32); }
.nav a[data-key="wissen"]      { --nav-fill: var(--color-sage);       --nav-on: var(--color-text);  --nav-line: var(--color-nature);      --nav-tint: rgba(169, 185, 140, 0.38); }
.nav a[data-key="naturgarten"] { --nav-fill: var(--color-forest);     --nav-on: var(--color-cream); --nav-line: var(--color-forest);      --nav-tint: rgba(73, 99, 49, 0.17); }
.nav a[data-key="kinder"]      { --nav-fill: var(--color-honey);      --nav-on: var(--color-text);  --nav-line: var(--color-terracotta);  --nav-tint: rgba(244, 190, 62, 0.32); }
.nav a[data-key="ueber-uns"]   { --nav-fill: var(--color-terracotta-deep); --nav-on: var(--color-cream); --nav-line: var(--color-terracotta); --nav-tint: rgba(201, 106, 61, 0.20); }
.nav a[data-key="anfahrt"]     { --nav-fill: var(--color-nature-deep); --nav-on: var(--color-cream); --nav-line: var(--color-nature);     --nav-tint: rgba(135, 150, 94, 0.28); }
.nav a[data-key="mitmachen"]   { --nav-fill: var(--color-forest);     --nav-on: var(--color-cream); --nav-line: var(--color-nature-deep); --nav-tint: rgba(102, 116, 74, 0.20); }
.nav a[data-key="shop"]        { --nav-fill: var(--color-honey);      --nav-on: var(--color-text);  --nav-line: var(--color-text);        --nav-tint: rgba(244, 190, 62, 0.32); }

/* Etwas Luft zwischen den Feldern, damit die Bereiche als einzelne
   Flächen lesbar bleiben. Bricht die Leiste auf schmalen Notebooks in
   eine zweite Zeile um, sitzt diese mit demselben Abstand darunter. */
.nav {
  gap: 5px;
  row-gap: 8px;
}

/* Ruhezustand: helle Fläche in der Bereichsfarbe, Strich darunter */
.nav a {
  position: relative;
  color: var(--color-text);
  background: var(--nav-tint);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.9rem;
  box-shadow: inset 0 -3px 0 var(--nav-line);
  transition: background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}

/* Überfahren am Desktop: die Fläche nimmt die volle Bereichsfarbe an */
@media (hover: hover) and (min-width: 941px) {
  .nav a:hover {
    background: var(--nav-fill);
    color: var(--nav-on);
    box-shadow: inset 0 -3px 0 var(--nav-line), 0 5px 14px rgba(45, 33, 24, 0.20);
    transform: translateY(-1px);
  }
}

/* Tastaturbedienung: deutlich sichtbarer Rahmen */
.nav a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Bereichskennzeichnung: Unterseiten eines Bereichs (z. B. die
   Fallgeschichten im Wissensbereich) umreißen ihr Feld zusätzlich. */
body[data-theme="start"]      .nav a[data-key="start"],
body[data-theme="emergency"]  .nav a[data-key="notfall"],
body[data-theme="trail"]      .nav a[data-key="lehrpfad"],
body[data-theme="knowledge"]  .nav a[data-key="wissen"],
body[data-theme="garden"]     .nav a[data-key="naturgarten"],
body[data-theme="children"]   .nav a[data-key="kinder"],
body[data-theme="about"]      .nav a[data-key="ueber-uns"],
body[data-theme="directions"] .nav a[data-key="anfahrt"],
body[data-theme="support"]    .nav a[data-key="mitmachen"],
body[data-theme="shop"]       .nav a[data-key="shop"] {
  background: var(--nav-tint);
  color: var(--color-text);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--nav-line);
}

/* Geöffnete Seite: volle Bereichsfarbe, Ring, kräftigere Schrift, Punkt */
.nav a[aria-current="page"],
body[data-page="start"]       .nav a[data-key="start"],
body[data-page="notfall"]     .nav a[data-key="notfall"],
body[data-page="lehrpfad"]    .nav a[data-key="lehrpfad"],
body[data-page="wissen"]      .nav a[data-key="wissen"],
body[data-page="naturgarten"] .nav a[data-key="naturgarten"],
body[data-page="kinder"]      .nav a[data-key="kinder"],
body[data-page="ueber-uns"]   .nav a[data-key="ueber-uns"],
body[data-page="anfahrt"]     .nav a[data-key="anfahrt"],
body[data-page="mitmachen"]   .nav a[data-key="mitmachen"],
body[data-page="shop"]        .nav a[data-key="shop"] {
  background: var(--nav-fill);
  color: var(--nav-on);
  font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--nav-line), 0 3px 10px rgba(45, 33, 24, 0.18);
}

/* Kleine Markierung vor dem Namen – die aktive Seite ist damit auch
   ohne Farbwahrnehmung erkennbar. */
.nav a[aria-current="page"]::before,
body[data-page="start"]       .nav a[data-key="start"]::before,
body[data-page="notfall"]     .nav a[data-key="notfall"]::before,
body[data-page="lehrpfad"]    .nav a[data-key="lehrpfad"]::before,
body[data-page="wissen"]      .nav a[data-key="wissen"]::before,
body[data-page="naturgarten"] .nav a[data-key="naturgarten"]::before,
body[data-page="kinder"]      .nav a[data-key="kinder"]::before,
body[data-page="ueber-uns"]   .nav a[data-key="ueber-uns"]::before,
body[data-page="anfahrt"]     .nav a[data-key="anfahrt"]::before,
body[data-page="mitmachen"]   .nav a[data-key="mitmachen"]::before,
body[data-page="shop"]        .nav a[data-key="shop"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 7px;
  vertical-align: 0.12em;
}

/* Notfall: dauerhaft roter Button, egal auf welcher Seite */
.nav a.nav-notfall {
  background: var(--color-emergency);
  color: #FFFFFF;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--color-emergency-dark), 0 3px 12px rgba(169, 54, 42, 0.30);
  border: 0;
  padding: 11px 18px;
}
@media (hover: hover) {
  .nav a.nav-notfall:hover {
    background: var(--color-emergency-dark);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--color-text), 0 3px 12px rgba(169, 54, 42, 0.35);
  }
}
body[data-page="notfall"] .nav a.nav-notfall {
  background: var(--color-emergency-dark);
  color: #FFFFFF;
  box-shadow: 0 0 0 2px var(--color-text);
}

/* Shop: dauerhaft kompakter honiggelber Button */
.nav a.nav-shop {
  background: var(--color-honey);
  color: var(--color-text);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(45, 33, 24, 0.22);
  padding-inline: 14px;
}
@media (hover: hover) {
  .nav a.nav-shop:hover {
    background: var(--color-honey-deep);
    color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-text);
  }
}
body[data-page="shop"] .nav a.nav-shop {
  background: var(--color-honey);
  color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text);
}

/* Zehn farbige Felder brauchen auf Notebook-Breiten etwas weniger
   Luft, damit die Leiste einzeilig bleibt. */
@media (max-width: 1300px) {
  .nav { gap: 4px; }
  .nav a { padding-inline: 8px; font-size: 0.86rem; }
  .nav a.nav-notfall { padding-inline: 14px; }
  .nav a.nav-shop { padding-inline: 12px; }
}

@media (max-width: 1080px) {
  .nav { gap: 3px; }
  .nav a { padding-inline: 7px; font-size: 0.82rem; }
  .nav a.nav-notfall { padding-inline: 12px; }
  .nav a.nav-shop { padding-inline: 11px; }
}

/* Handy-Menü: dieselben Bereichsfarben, nur als Zeilen statt Felder.
   Jede Zeile trägt links einen breiten Balken in ihrer Bereichsfarbe,
   darüber steht, worum es in der Liste geht. */
@media (max-width: 940px) {
  .nav {
    background: var(--color-cream);
    gap: 7px;
  }
  .nav::before {
    content: 'Bereiche';
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 2px 4px 6px;
  }
  .nav a {
    border-radius: var(--radius-small);
    background: var(--nav-tint);
    padding: 15px 16px 15px 20px;
    font-size: 1.05rem;
    box-shadow: inset 5px 0 0 var(--nav-line);
    transform: none;
  }
  body[data-theme="start"]      .nav a[data-key="start"],
  body[data-theme="emergency"]  .nav a[data-key="notfall"],
  body[data-theme="trail"]      .nav a[data-key="lehrpfad"],
  body[data-theme="knowledge"]  .nav a[data-key="wissen"],
  body[data-theme="garden"]     .nav a[data-key="naturgarten"],
  body[data-theme="children"]   .nav a[data-key="kinder"],
  body[data-theme="about"]      .nav a[data-key="ueber-uns"],
  body[data-theme="directions"] .nav a[data-key="anfahrt"],
  body[data-theme="support"]    .nav a[data-key="mitmachen"],
  body[data-theme="shop"]       .nav a[data-key="shop"] {
    box-shadow: inset 5px 0 0 var(--nav-line), inset 0 0 0 2px var(--nav-line);
  }
  .nav a[aria-current="page"],
  body[data-page="start"]       .nav a[data-key="start"],
  body[data-page="notfall"]     .nav a[data-key="notfall"],
  body[data-page="lehrpfad"]    .nav a[data-key="lehrpfad"],
  body[data-page="wissen"]      .nav a[data-key="wissen"],
  body[data-page="naturgarten"] .nav a[data-key="naturgarten"],
  body[data-page="kinder"]      .nav a[data-key="kinder"],
  body[data-page="ueber-uns"]   .nav a[data-key="ueber-uns"],
  body[data-page="anfahrt"]     .nav a[data-key="anfahrt"],
  body[data-page="mitmachen"]   .nav a[data-key="mitmachen"],
  body[data-page="shop"]        .nav a[data-key="shop"] {
    /* Der Balken nimmt die Schriftfarbe der Fläche an, damit er auch
       auf den dunklen Bereichsfarben sichtbar bleibt. */
    border-radius: var(--radius-small);
    box-shadow: inset 5px 0 0 var(--nav-on);
  }
  .nav a.nav-notfall,
  .nav a.nav-shop {
    border-radius: var(--radius-small);
    padding: 15px 18px;
  }
  .nav a.nav-notfall {
    margin: 2px 0 6px;
    padding: 17px 18px;
    font-size: 1.12rem;
    box-shadow: inset 5px 0 0 var(--color-text), 0 3px 12px rgba(169, 54, 42, 0.30);
  }
  .nav a.nav-shop { box-shadow: inset 5px 0 0 var(--color-text); }
}

/* Menü-Schaltfläche am Handy: honiggelb wie die Marke, damit sofort
   klar ist, dass sich dahinter die Bereiche öffnen. */
.burger {
  background: var(--color-honey);
  border: 2px solid var(--color-text);
  color: var(--color-text);
}
.burger[aria-expanded="true"] {
  background: var(--color-text);
  color: var(--color-honey);
}

@media (prefers-reduced-motion: reduce) {
  .nav a,
  .nav a:hover { transition: none; transform: none; }
}


/* =====================================================================
   5) KOPFZEILE – dünne Themenlinie
   Sie zeigt auf jeder Seite, in welchem Themenbereich man sich befindet.
   ===================================================================== */
.site-header {
  background: rgba(255, 248, 232, 0.97);
  box-shadow: inset 0 -4px 0 var(--theme);
  border-bottom: 1px solid rgba(45, 33, 24, 0.10);
}


/* =====================================================================
   6) SEITENKOPF MIT THEMENVERLAUF
   Die Klasse .theme-hero ersetzt die früheren Einfarb-Varianten
   (.bg-sun, .bg-leaf, …) am Seitenkopf.
   ===================================================================== */
/* Der Verlauf liegt unten, darüber ein sehr zartes Blattmuster als
   Naturkunde-Note. Beides als Hintergrundebene, damit frei positionierte
   Bilder und Deko-Elemente in den Seitenköpfen unverändert liegen
   bleiben. */
.theme-hero {
  --theme-hero-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232D2118' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M30 120c0-26 12-44 30-52-4 26-14 42-30 52z'/%3E%3Cpath d='M45 100c4-10 10-18 15-22'/%3E%3Cpath d='M120 40c0 22-10 38-26 46 4-22 12-37 26-46z'/%3E%3Cpath d='M108 58c-4 9-9 16-13 19'/%3E%3C/g%3E%3C/svg%3E");
  background-color: var(--color-cream);
  background-image: var(--theme-hero-leaves), var(--theme-gradient);
  background-repeat: repeat, no-repeat;
  background-size: 320px 320px, var(--theme-hero-size);
  background-position: top center, top center;
  color: var(--theme-hero-ink);
}

.theme-hero h1,
.theme-hero h2 { color: var(--theme-hero-ink); }
.theme-hero p,
.theme-hero .lead,
.theme-hero p.lead,
.page-hero-bold.theme-hero p.lead { color: var(--theme-hero-ink-soft); }

/* Dunkler Seitenkopf (Notfall): Fokusrahmen in Honiggelb bleibt sichtbar */
body[data-theme="emergency"] .theme-hero :focus-visible { outline-color: var(--color-honey); }

/* Kennzeichnung oberhalb der Überschrift: cremefarbene Pille mit
   Themenfarbe – auf jedem Verlauf lesbar. */
.theme-hero .eyebrow,
.theme-hero .lps-eyebrow,
.theme-hero .ga-eyebrow,
.theme-hero .hs-eyebrow {
  display: inline-block;
  background: var(--color-cream);
  color: var(--theme-text);
  box-shadow: inset 0 0 0 2px var(--theme-line);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 18px;
}
.theme-hero h1 mark,
.theme-hero h1 em {
  background: transparent;
  color: var(--theme-text);
}
.theme-hero.bg-red h1 em,
body[data-theme="emergency"] .theme-hero h1 em,
body[data-theme="emergency"] .theme-hero h1 mark {
  background: transparent;
  color: var(--color-honey);
}

/* Die Seitenköpfe mit eigenem Aufbau übernehmen denselben Verlauf.
   Die höhere Spezifität ist nötig, weil ihre Regeln in der Seite selbst
   stehen. */
.hero-split.theme-hero,
.lp-hero.theme-hero,
.shop-hero.theme-hero,
.page-hero.theme-hero,
.ursula-first.theme-hero {
  background-color: var(--color-cream);
  background-image: var(--theme-hero-leaves), var(--theme-gradient);
  background-repeat: repeat, no-repeat;
  background-size: 320px 320px, var(--theme-hero-size);
  background-position: top center, top center;
  color: var(--theme-hero-ink);
}
.shop-hero.theme-hero h1,
.shop-hero.theme-hero p,
.lp-hero.theme-hero h1,
.page-hero.theme-hero h1 { color: var(--theme-hero-ink); }
.lp-hero.theme-hero h1 em { color: var(--theme-text); font-style: italic; }
.shop-hero.theme-hero h1 .sun-mark { color: var(--theme-link); }

/* Startseite: der Titelkopf behält seinen warmen Lichtkern hinter dem
   Originalfoto (die Regel in home.css ist bewusst mit !important gesetzt).
   Ergänzt wird nur der Farbverlauf des Themenbereichs START mit dem
   salbeigrünen Fuß – der Lichtraum für das Foto bleibt unverändert. */
body[data-theme="start"] .hero-split.hero-ursula.theme-hero {
  background:
    radial-gradient(120% 62% at 50% 24%,
      rgba(248, 213, 113, 0.95) 0%,
      rgba(251, 229, 168, 0.60) 48%,
      rgba(251, 229, 168, 0) 78%),
    var(--theme-hero-leaves),
    linear-gradient(180deg,
      #FFF8E8 0%,
      #F4E4BD 52%,
      #E5C978 80%,
      #C9D3A9 94%,
      #A9B98C 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-size: auto, 320px 320px, 100% 100% !important;
  background-position: top center, top center, top center !important;
}
.shop-hero.theme-hero::before { display: none; }
.shop-hero.theme-hero .eyebrow {
  background: var(--color-cream);
  color: var(--theme-text);
  box-shadow: inset 0 0 0 2px var(--theme-line);
}
.lp-hero.theme-hero .eyebrow,
.page-hero.theme-hero .eyebrow { color: var(--theme-text); }

/* Aufhellender Button: die Seitenköpfe sind jetzt hell, deshalb dunkle
   Schrift. Nur der rote Notfall-Kopf bleibt dunkel. */
.theme-hero .btn-ghost-light {
  background: rgba(255, 252, 243, 0.62);
  color: var(--color-text);
  border-color: var(--color-text);
}
.theme-hero .btn-ghost-light:hover {
  background: var(--color-cream);
  color: var(--color-text);
}
body[data-theme="emergency"] .theme-hero .btn-ghost-light {
  background: rgba(255, 248, 232, 0.14);
  color: var(--color-cream);
  border-color: rgba(255, 248, 232, 0.65);
}


/* =====================================================================
   7) WIEDERKEHR DER THEMENFARBE IN DEN GEMEINSAMEN BAUSTEINEN
   Bewusst sparsam: Flächen und Textkarten bleiben creme, die Themenfarbe
   erscheint an Kennzeichnungen, Zahlen, Linien, Rahmen und Buttons.
   ===================================================================== */

/* Fließtext-Links in der Themenfarbe (dunkle, lesbare Abstufung).
   Niedrige Spezifität, damit Links auf dunklen Flächen ihre eigenen
   Farben behalten. */
a { color: var(--theme-link); }
a:hover { color: var(--theme-link-hover); text-decoration: underline; }

/* Kleine Bereichskennzeichnung über der Überschrift */
.section-header .eyebrow { color: var(--theme-text); }

/* Kapitel- und Stationsmarken, Zahlen, Symbole */
.chapter-marker {
  background: var(--theme-fill);
  color: var(--theme-on);
}
.chapter-marker .ch-num {
  background: var(--theme-on);
  color: var(--theme-fill);
}
.feature-card .fc-num { color: var(--theme-text); }
.feature-card .fc-icon {
  background: var(--theme-tint);
  color: var(--theme-text);
}
.stat-tile .num { color: var(--theme-text); }
.stat-tile { border-color: var(--theme-line); }
.stat-tile:hover { background: var(--theme-tint); }
.badge {
  background: var(--theme-tint);
  color: var(--theme-text);
  box-shadow: inset 0 0 0 1px var(--theme-line);
}
.pill:not(.dark):not(.red):not(.leaf) {
  background: var(--theme-tint);
  color: var(--theme-text);
}

/* Markierte Begriffe */
.hl { background: linear-gradient(180deg, transparent 55%, var(--theme-tint) 55%); }

/* Dünne Trennlinien */
hr,
.theme-rule {
  border: 0;
  height: 2px;
  background: var(--theme-line);
  opacity: 0.55;
  border-radius: 2px;
  margin: var(--space-l, 34px) 0;
}

/* Buttons: die Hauptaktion trägt die Themenfarbe.
   Der rote Notfallbutton (.btn-sos) bleibt unverändert, damit er nicht
   mit normalen Aktionen verwechselt werden kann. */
.btn-primary {
  background: var(--theme-fill);
  color: var(--theme-on);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover {
  background: var(--theme-fill-hover);
  color: var(--theme-on);
}
.btn-secondary {
  color: var(--theme-text);
  border-color: var(--theme-line);
}
.btn-secondary:hover {
  background: var(--theme-fill);
  color: var(--theme-on);
  border-color: var(--theme-fill);
}

/* Auf dunklen Flächen bleibt die Hauptaktion hell – die Themenfarbe
   steckt dort in der Schrift. */
.bg-ink .btn-primary,
.bg-red .btn-primary,
.bg-leaf .btn-primary,
.bg-berry .btn-primary,
.cta-band.dark .btn-primary,
.site-footer .btn-primary {
  background: var(--color-cream);
  color: var(--color-text);
}
.bg-ink .btn-primary:hover,
.bg-red .btn-primary:hover,
.bg-leaf .btn-primary:hover,
.bg-berry .btn-primary:hover,
.cta-band.dark .btn-primary:hover,
.site-footer .btn-primary:hover {
  background: var(--color-beige);
  color: var(--color-text);
}
.bg-ink .btn-secondary,
.bg-red .btn-secondary,
.bg-leaf .btn-secondary,
.bg-berry .btn-secondary,
.cta-band.dark .btn-secondary {
  color: var(--color-cream);
  border-color: rgba(255, 248, 232, 0.65);
}
.bg-ink .btn-secondary:hover,
.bg-red .btn-secondary:hover,
.bg-leaf .btn-secondary:hover,
.bg-berry .btn-secondary:hover,
.cta-band.dark .btn-secondary:hover {
  background: var(--color-cream);
  color: var(--color-text);
  border-color: var(--color-cream);
}

/* Rot bleibt dem Notfall vorbehalten: der Schließen-Knopf der
   Bildansicht war der letzte rote Bedienknopf ohne Notfallbezug. */
.zoom-btn--close { background: var(--color-text); color: var(--color-cream); }
.zoom-btn--close:hover,
.zoom-btn--close:focus-visible { background: var(--color-cream); color: var(--color-text); }

/* Quellenangaben-Links nicht mehr rot */
.infobox--quelle a { color: var(--theme-link); }


/* =====================================================================
   7b) ROT BLEIBT DEM NOTFALL VORBEHALTEN
   Rot war bisher die allgemeine Akzentfarbe der Seite – von der
   Presse-Kennzeichnung bis zum Dankeschön-Feld. Ab jetzt tragen diese
   Stellen die Farbe ihres Themenbereichs. Rot bleibt dort, wo es eine
   echte Warnung ist: Notruf, Notfall-Schaltflächen, giftige Pflanzen,
   schädliches Futter, „das bitte nicht“ und Hinweise auf belastende
   Bilder.

   --theme-fill und --theme-on gehören zusammen und sind kontrastgeprüft,
   deshalb werden Fläche und Schrift immer als Paar gesetzt.
   ===================================================================== */

/* --- Farbige Kennzeichnungen, Marken und Dankesfelder -------------- */
.ab-flag,
.hs-eyebrow,
.thanks-panel-mark,
.presse-cta-neu,
.presse-online-eyebrow,
.news-flag,
.ga-thanks,
.prod-badge.top,
.mythos .my-mark,
.featured .ba .badge-vorher,
.story-card .badges .badge.red,
.steck-image .floating-tag.br,
.wq-fact-dots span.active,
.step-bold-card.featured .sb-num,
.entst-header h2 em,
.presse-page-view:hover .presse-page-zoom,
.presse-page-view:focus-visible .presse-page-zoom {
  background: var(--theme-fill);
  color: var(--theme-on);
}
.stat-tile.alt:hover {
  background: var(--theme-fill);
  color: var(--theme-on);
}
.blob-red { background: var(--theme-fill); }

/* Die große Schaltfläche der Startseite führt an einer Stelle zum Notruf
   und an zwei Stellen einfach weiter. Nur der Weg zum Notfall bleibt rot. */
a.hs-btn-red:not([href*="notfall"]):not([href^="tel:"]) {
  background: var(--theme-fill);
  color: var(--theme-on);
}
a.hs-btn-red:not([href*="notfall"]):not([href^="tel:"]):hover {
  background: var(--theme-fill-hover);
  color: var(--theme-on);
}

/* --- Zahlen, Quellenangaben und kleine Textakzente ---------------- */
.big-quote cite,
.erina-label,
.presse-source,
.pflegerin-text cite,
.presse-online-meta,
.hero-stats .hs-stat strong,
.wq-fact-num,
.step-bold-card .sb-arrow,
.thanks-list li::before,
.story-card .date,
.shared-story .shared-date,
.shared-extra .source,
.steck-list dt,
.art-card .art-latin,
.arten-table tbody th,
.quiz-finish .score,
.element-card .el-why,
.teaser-txt .teaser-more,
.agb-content h3,
.legal-content h3 {
  color: var(--theme-link);
}
.agb-content a { color: var(--theme-link); }
.ga-btn-ghost:hover { color: var(--theme-link); }

/* --- Dünne Linien und Zitatkanten -------------------------------- */
.case-report .case-quote,
.shared-quote,
.news-quote { border-left-color: var(--theme-line); }
.shared-lesson { border-color: var(--theme-line); }
.shared-byline::before,
.jahr-card ul li::before { background: var(--theme-line); }
.mythos { border-left-color: var(--theme-line); }


/* =====================================================================
   8) KARTEN- UND WISSENSBOX-SYSTEM
   Helle Karte, weiche Ecken, dezenter Schatten, dünne Linie in der
   Themenfarbe. Die inhaltlich codierten Boxen (Hinweis, Warnung, Gut)
   behalten ihre Bedeutungsfarben.
   ===================================================================== */
.infobox:not([class*="infobox--"]) {
  border: 2px solid var(--theme-line);
  border-left-width: 8px;
  border-radius: var(--radius-medium);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.infobox:not([class*="infobox--"]) h3,
.infobox:not([class*="infobox--"]) h4 { color: var(--theme-text); }

/* „Schon gewusst?“ / „Entdecke mehr“ – Wissensbausteine in der
   Themenfarbe, für bestehende und künftige Inhalte nutzbar. */
.wissensbox,
.entdecke-mehr {
  background: var(--paper);
  border: 2px solid var(--theme-line);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin: var(--space-m, 22px) 0;
}
.wissensbox > :last-child,
.entdecke-mehr > :last-child { margin-bottom: 0; }
.wissensbox h3,
.wissensbox h4,
.entdecke-mehr h3,
.entdecke-mehr h4 { color: var(--theme-text); margin-top: 0; }

/* Hervorgehobene Karte */
.card--theme {
  background: var(--paper);
  border: 2px solid var(--theme-line);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
}

/* Teaser-Karten: Rahmen in der Themenfarbe beim Überfahren */
.teaser:hover,
.teaser:focus-visible { border-color: var(--theme-line); }


/* --- 8b) Weiche, naturnahe Kartenkanten ---------------------------
   Die Inhaltskarten hatten bisher eine harte, fast schwarze Kontur.
   Breite, Abstände und Anordnung bleiben unverändert – nur die
   Randfarbe kommt jetzt aus dem Themenbereich, wie im Farbsystem
   vorgesehen. Bildrahmen, Schaltflächen, Zahlenmarken und alle
   Warnfelder behalten ihre bisherige Kontur.
   ------------------------------------------------------------------ */
.feature-card,
.contact-card,
.erina,
.ab-item,
.ab-address,
.ng-tip,
.wq-quiz,
.wq-facts,
.step-bold-card,
.pflegerin-card,
.pflegerin-schritte li,
.presse-online-card,
.presse-online-quote,
.news-card,
.news-feature,
.ziel-card,
.help-item,
.quellen-box,
.quiz-box,
.game-card,
.task-card,
.task-rules,
.fact-sticker,
.step-box,
.triage-col,
.shared-extra,
.ga-stat,
.shop-video-meta,
.steck-list,
.art-card,
.arten-table,
.arten-note,
.leben-card,
.element-card,
.jahr-card,
.mythos,
.botschaft-card,
.agb-content article,
.legal-content article {
  border-color: var(--theme-line);
}

/* Das Dankeschön-Feld trägt jetzt die Themenfläche – die Kontur wird
   deshalb hell, damit sie überhaupt sichtbar bleibt. */
.ga-thanks { border-color: rgba(255, 248, 232, 0.55); }

/* Harte, versetzte Schatten wirken wie aufgeklebtes Papier. Dieselben
   Karten bekommen den weichen Naturschatten – Position und Größe der
   Karten ändern sich dadurch nicht. */
.ab-item,
.news-card,
.ziel-card,
.help-item,
.news-feature { box-shadow: var(--shadow-card); }
.news-card:hover,
.news-card:focus-visible,
.nf-grid a:hover,
.nf-grid a:focus-visible { box-shadow: var(--shadow-soft); }


/* =====================================================================
   9) THEMENBAND ÜBER DEM FUSSBEREICH
   Der vollständige Verlauf des Themenbereichs als ruhiger Ausklang der
   Seite – rein dekorativ, ohne Text.
   ===================================================================== */
.theme-wash {
  height: 140px;
  background-image: var(--theme-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.theme-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%232D2118' stroke-opacity='0.13' stroke-width='2'%3E%3Cpath d='M20 120c0-24 11-41 28-48-4 24-13 39-28 48z'/%3E%3Cpath d='M34 102c4-9 9-16 14-20'/%3E%3Cpath d='M150 118c0-20 9-35 24-42-3 21-11 34-24 42z'/%3E%3Cpath d='M162 103c3-8 8-14 12-17'/%3E%3C/g%3E%3Cg fill='%232D2118' fill-opacity='0.10'%3E%3Cellipse cx='92' cy='116' rx='7' ry='5'/%3E%3Ccircle cx='85' cy='106' r='2.4'/%3E%3Ccircle cx='92' cy='104' r='2.4'/%3E%3Ccircle cx='99' cy='106' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 140px;
  background-repeat: repeat-x;
  background-position: bottom left;
}
@media (max-width: 700px) {
  .theme-wash { height: 96px; }
}


/* =====================================================================
   10) SEITENSPEZIFISCHE AKZENTE
   Nur die Stellen, die auf der jeweiligen Seite als Zahl, Kennzeichnung
   oder Auswahl gelesen werden.
   ===================================================================== */

/* Lehrpfad: Stationszahlen, Kategorie-Auswahl, Fortschritt */
body[data-theme="trail"] .lp-stats strong { color: var(--theme-text); }
body[data-theme="trail"] .cat-chip.active,
body[data-theme="trail"] .cat-chip:hover {
  background: var(--color-honey);
  color: var(--color-text);
  border-color: var(--color-forest);
}
body[data-theme="trail"] .lp-detail-inner { border-color: var(--theme-line); }

/* Igelwissen: Wissenstafeln und Steckbriefe */
body[data-theme="knowledge"] .art-card { border-color: var(--theme-line); }
/* Nur die Merkmalsspalte bekommt den Thementon. Der Kopf der Tabelle
   bleibt dunkel, sonst stünde seine helle Schrift auf hellem Grund. */
body[data-theme="knowledge"] .arten-table tbody th { background: var(--theme-tint); }

/* Naturgarten: Gartenelemente und Checklisten */
body[data-theme="garden"] .element-card { border-color: var(--theme-line); }
body[data-theme="garden"] .el-mass { color: var(--theme-text); }

/* Für Kinder: Spiel- und Rätselkarten */
body[data-theme="children"] .game-card { border-color: var(--theme-line); }
body[data-theme="children"] .fact-sticker { background: var(--theme-tint); }

/* Über uns: Zitate und Meilensteine */
body[data-theme="about"] .entst-quote-block { border-color: var(--theme-line); }
/* .hs-eyebrow ist eine gefüllte Pille – Fläche und Schrift setzt 7b als
   kontrastgeprüftes Paar, hier darf die Schriftfarbe nicht überschrieben
   werden. */

/* Anfahrt: Wegpunkte und Hinweise */
body[data-theme="directions"] .lps-fact-accent,
body[data-theme="directions"] .lps-addr-icon { color: var(--theme-text); }
body[data-theme="directions"] .lps-address-card { border-color: var(--theme-line); }

/* Unterstützen: Beträge und Spendenwege */
body[data-theme="support"] .price-amt,
body[data-theme="support"] .ga-stat strong { color: var(--theme-text); }
body[data-theme="support"] .bank-box { border-color: var(--theme-line); }

/* Shop: Preise, Kategorien, Bestellbuttons */
body[data-theme="shop"] .shop-notice {
  background: var(--color-cream);
  border-left-color: var(--color-honey-deep);
  box-shadow: var(--shadow-card);
}
body[data-theme="shop"] .prod-category { color: var(--color-nature); }
body[data-theme="shop"] .prod-card { border-color: rgba(45, 33, 24, 0.10); }
body[data-theme="shop"] .prod-card:hover { border-color: var(--color-honey); }
body[data-theme="shop"] .prod-order-btn,
body[data-theme="shop"] .cta-btn {
  background: var(--color-honey);
  color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text);
}
body[data-theme="shop"] .prod-order-btn:hover,
body[data-theme="shop"] .cta-btn:hover {
  background: var(--color-honey-deep);
  color: var(--color-text);
}

/* Notfall: die Signalfarbe bleibt, große Textbereiche bleiben hell */
body[data-theme="emergency"] .feed-rule { color: var(--color-emergency-dark); }

/* Die fünf Schritte im Kopf der Notfallseite sind kleine Schrift auf Rot.
   Ein leicht dunklerer Chip statt eines aufhellenden hebt den Kontrast von
   3,8:1 auf 5,4:1 – Aussehen und Anordnung bleiben unverändert. */
body[data-theme="emergency"] .notfall-toc a {
  background: rgba(45, 33, 24, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
body[data-theme="emergency"] .notfall-toc a:hover,
body[data-theme="emergency"] .notfall-toc a:focus-visible {
  background: var(--color-cream);
  color: var(--color-emergency-dark);
}


/* =====================================================================
   11) RÜCKSICHT AUF REDUZIERTE BEWEGUNG
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nav a { transition: none; }
}