/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3-dunkel.css erzeugt). Regeln: routaris-design-system-b4.md */
/* B4 dunkel: Tokens in Nachtfarben. Die Karten bleiben helle Fenster (eigener Token-Satz). */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] {  --d-grund: #092018;          /* Sandstein: Seitengrund, Kopfzeile (96 %), nie für Kästen */
  --d-flaeche: #112B22;        /* Kalk: Felder, Kacheln, Karussellkarten, Pin-Ringe, Reiseland */
  --d-flaeche-2: #15372C;      /* Kalk 2: nur Hover auf Kalk */
  --d-kiesel: #0D3125;         /* Nachbarländer, Hover auf Sandstein, leere Fotoflächen */
  --d-kiesel-tief: #284B3E;    /* Ränder an Kieselflächen */
  --d-tinte: #F2EEE6;          /* Text, Bleistift, Stiele, Nummern */
  --d-tinte-hell: #ABBCB5;     /* Nebentext, Quellen, Achsen (ersetzt alle Goldtöne) */
  --d-laub: #98C0A9;           /* nur Handlung */
  --d-laub-tief: #B2D1BF;      /* Handlung: Hover, gedrückt */
  --d-laub-blass: #173D2F;     /* gewählte Fläche, immer mit 1,5 px Laub-Rand */
  --d-weg: #F2EEE6;            /* Wegmarke: nur Route, nie Text, Knopf, Fläche oder Zustand */
  --d-wasser: #6FB3E6;         /* Fjord: nur Wasser */
  --d-wasser-tief: #8FC3EA;    /* Regen über 100 mm (Walter/Lieth) */
  --d-meer: #1A3352;           /* Meeresfläche */
  --d-fehler: #FF6B5E;         /* Fehler, Temperatur und aride Zeit im Klimadiagramm */
  --d-band: #05140F;           /* das eine dunkle Band der Beispielrouten */
  --d-band-text: #FFFFFF;
  --d-band-text-2: #C9D9D2;
  --d-line: rgba(242, 238, 230, .14);
  --d-line-stark: rgba(242, 238, 230, .32);
  --d-rand: rgba(242, 238, 230, .36);   /* Rahmen der Zweitknöpfe und runden Knöpfe */
  --d-feldrand: rgba(242, 238, 230, .6);  /* Feldrand: Kalk auf Sandstein erkennt man nur am Rand, ≥ 3:1 */
  --d-kosten-1: #F2EEE6;
  --d-kosten-2: #C4D1CC;
  --d-kosten-3: #95AAA1;
  --d-kosten-4: #6F877D;
  --d-kosten-5: #4E6A5F;       /* Puffer, schraffiert */
  /* Kanäle für rgba(var(--…-rgb), Deckkraft) */
  --d-tinte-rgb: 242, 238, 230;
  --d-flaeche-rgb: 17, 43, 34;
  --d-grund-rgb: 9, 32, 24;
  --d-laub-rgb: 152, 192, 169;
  --d-weg-rgb: 242, 238, 230;
  --d-strecke-rgb: var(--d-weg-rgb);  /* Ring an Strecken-Zielen in Schritt 3: Wegmarke */
  --d-flaeche-alt: var(--d-flaeche);
  --d-ocker-tief: var(--d-tinte-hell);
  /* Alte D-Namen als Alias (hero-v2.js liest var(--d-umbra), var(--d-flechte)) */
  --d-flechte: var(--d-grund);
  --d-kalk: var(--d-flaeche);
  --d-kalkgrund: var(--d-grund);
  --d-stein: var(--d-kiesel);
  --d-umbra: var(--d-tinte);
  --d-umbra-hell: var(--d-tinte-hell);
  --d-moos: var(--d-laub);
  --d-moos-tief: var(--d-laub-tief);
  --d-moos-blass: var(--d-laub-blass);
  --d-erdocker: var(--d-weg);
  --d-schiefer: var(--d-wasser);
  --d-lavur: var(--d-meer);
  --d-schweben: 0 1px 0 rgba(242, 238, 230, .14), 0 8px 24px rgba(242, 238, 230, .16);
  --cream: #112B22;
  --cream-dark: #112B22;
  --cream-soft: #112B22;
  --paper-edge: #0D3125;
  --white: #112B22;
  --ink: #F2EEE6;
  --ink-78: rgba(242, 238, 230, .88);
  --ink-62: #ABBCB5;           /* deckend: 4,8:1 auch auf Kiesel */
  --ink-45: rgba(242, 238, 230, .45);
  --ink-30: rgba(242, 238, 230, .30);
  --ink-15: rgba(242, 238, 230, .15);
  --ink-12: rgba(242, 238, 230, .12);
  --ink-08: rgba(242, 238, 230, .08);
  --terracotta: #98C0A9;
  --terracotta-dark: #B2D1BF;
  --terracotta-text: #98C0A9;
  --terracotta-deep: #CADED3;
  --terracotta-light: #87AF99;
  --terracotta-pale: #173D2F;
  --terracotta-soft: #245442;
  --teal: #6FB3E6;
  --teal-dark: #8FC3EA;
  --teal-light: #5E8DB5;
  --teal-pale: #16304D;
  --gold: #ABBCB5;
  --gold-pale: #112B22;
  --sage: #98C0A9;
  --sage-pale: #173D2F;
  --border: #1F4235;
  --sand-dark: #284B3E;
  --danger: #FF6B5E;
  --jade: #ABBCB5;
  --car: #ABBCB5;
  --car-pale: #112B22;
  --shadow-md: 0 0 0 1px rgba(242, 238, 230, .14);
  --shadow-lg: 0 14px 36px rgba(242, 238, 230, .16);
  --shadow-xl: 0 20px 48px rgba(242, 238, 230, .20);
  --lp-cream: #112B22;
  --lp-cream-dark: #112B22;
  --lp-charcoal: #F2EEE6;
  --lp-muted: #ABBCB5;
  --lp-teal: #98C0A9;
  --lp-terra: #98C0A9;
  --lp-terra-dark: #B2D1BF;
  --lp-sand: #0D3125;
  --lp-shadow-lg: 0 0 0 1px rgba(242, 238, 230, .14);
  --lp-shadow-xl: 0 20px 48px rgba(242, 238, 230, .20);
  color-scheme: dark;
}
html[data-variante="b4"][data-modus="dunkel"] .leaflet-container,
html[data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard,
html[data-variante="b4"][data-modus="dunkel"] .hero-v2-map,
html[data-variante="b4"][data-modus="dunkel"] .lpk-stage {  --d-grund: #FFFFFF;          /* Sandstein: Seitengrund, Kopfzeile (96 %), nie für Kästen */
  --d-flaeche: #FFFFFF;        /* Kalk: Felder, Kacheln, Karussellkarten, Pin-Ringe, Reiseland */
  --d-flaeche-2: #F4F8F6;      /* Kalk 2: nur Hover auf Kalk */
  --d-kiesel: #EDF4F1;         /* Nachbarländer, Hover auf Sandstein, leere Fotoflächen */
  --d-kiesel-tief: #C8DAD2;    /* Ränder an Kieselflächen */
  --d-tinte: #173A2E;          /* Text, Bleistift, Stiele, Nummern */
  --d-tinte-hell: #4B6259;     /* Nebentext, Quellen, Achsen (ersetzt alle Goldtöne) */
  --d-laub: #2B6E55;           /* nur Handlung */
  --d-laub-tief: #144F3A;      /* Handlung: Hover, gedrückt */
  --d-laub-blass: #DDF0E7;     /* gewählte Fläche, immer mit 1,5 px Laub-Rand */
  --d-weg: #173A2E;            /* Wegmarke: nur Route, nie Text, Knopf, Fläche oder Zustand */
  --d-wasser: #2E86C9;         /* Fjord: nur Wasser */
  --d-wasser-tief: #1F5F92;    /* Regen über 100 mm (Walter/Lieth) */
  --d-meer: #D6EAF7;           /* Meeresfläche */
  --d-fehler: #B3261E;         /* Fehler, Temperatur und aride Zeit im Klimadiagramm */
  --d-band: #173A2E;           /* das eine dunkle Band der Beispielrouten */
  --d-band-text: #FFFFFF;
  --d-band-text-2: #C9D9D2;
  --d-line: rgba(23, 58, 46, .15);
  --d-line-stark: rgba(23, 58, 46, .34);
  --d-rand: rgba(23, 58, 46, .39);   /* Rahmen der Zweitknöpfe und runden Knöpfe */
  --d-feldrand: rgba(23, 58, 46, .65);  /* Feldrand: Kalk auf Sandstein erkennt man nur am Rand, ≥ 3:1 */
  --d-kosten-1: #173A2E;
  --d-kosten-2: #405C51;
  --d-kosten-3: #6F877D;
  --d-kosten-4: #9BADA5;
  --d-kosten-5: #BFCDC7;       /* Puffer, schraffiert */
  /* Kanäle für rgba(var(--…-rgb), Deckkraft) */
  --d-tinte-rgb: 23, 58, 46;
  --d-flaeche-rgb: 255, 255, 255;
  --d-grund-rgb: 255, 255, 255;
  --d-laub-rgb: 43, 110, 85;
  --d-weg-rgb: 23, 58, 46;
  --d-strecke-rgb: var(--d-weg-rgb);  /* Ring an Strecken-Zielen in Schritt 3: Wegmarke */
  --d-flaeche-alt: var(--d-flaeche);
  --d-ocker-tief: var(--d-tinte-hell);
  /* Alte D-Namen als Alias (hero-v2.js liest var(--d-umbra), var(--d-flechte)) */
  --d-flechte: var(--d-grund);
  --d-kalk: var(--d-flaeche);
  --d-kalkgrund: var(--d-grund);
  --d-stein: var(--d-kiesel);
  --d-umbra: var(--d-tinte);
  --d-umbra-hell: var(--d-tinte-hell);
  --d-moos: var(--d-laub);
  --d-moos-tief: var(--d-laub-tief);
  --d-moos-blass: var(--d-laub-blass);
  --d-erdocker: var(--d-weg);
  --d-schiefer: var(--d-wasser);
  --d-lavur: var(--d-meer);
  --map-route: #173A2E;
  --map-casing: #EBB431;
  --map-pin-ink: #173A2E;
  --d-schweben: 0 1px 0 rgba(23, 58, 46, .15), 0 8px 24px rgba(23, 58, 46, .17);
  --cream: #FFFFFF;
  --cream-dark: #FFFFFF;
  --cream-soft: #FFFFFF;
  --paper-edge: #EDF4F1;
  --white: #FFFFFF;
  --ink: #173A2E;
  --ink-78: rgba(23, 58, 46, .95);
  --ink-62: #4B6259;           /* deckend: 4,8:1 auch auf Kiesel */
  --ink-45: rgba(23, 58, 46, .48);
  --ink-30: rgba(23, 58, 46, .32);
  --ink-15: rgba(23, 58, 46, .16);
  --ink-12: rgba(23, 58, 46, .13);
  --ink-08: rgba(23, 58, 46, .09);
  --terracotta: #2B6E55;
  --terracotta-dark: #144F3A;
  --terracotta-text: #2B6E55;
  --terracotta-deep: #0D3929;
  --terracotta-light: #5E8C78;
  --terracotta-pale: #DDF0E7;
  --terracotta-soft: #D1EADF;
  --teal: #2E86C9;
  --teal-dark: #1F5F92;
  --teal-light: #8DB9DD;
  --teal-pale: #E3F0F9;
  --gold: #4B6259;
  --gold-pale: #FFFFFF;
  --sage: #2B6E55;
  --sage-pale: #DDF0E7;
  --border: #DBE5E1;
  --sand-dark: #C8DAD2;
  --danger: #B3261E;
  --jade: #4B6259;
  --car: #4B6259;
  --car-pale: #FFFFFF;
  --shadow-md: 0 0 0 1px rgba(23, 58, 46, .15);
  --shadow-lg: 0 14px 36px rgba(23, 58, 46, .17);
  --shadow-xl: 0 20px 48px rgba(23, 58, 46, .22);
  --lp-cream: #FFFFFF;
  --lp-cream-dark: #FFFFFF;
  --lp-charcoal: #173A2E;
  --lp-muted: #4B6259;
  --lp-teal: #2B6E55;
  --lp-terra: #2B6E55;
  --lp-terra-dark: #144F3A;
  --lp-sand: #EDF4F1;
  --lp-shadow-lg: 0 0 0 1px rgba(23, 58, 46, .15);
  --lp-shadow-xl: 0 20px 48px rgba(23, 58, 46, .22);
  color-scheme: light;
}