/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3.css erzeugt). Regeln: routaris-design-system-b4.md */
/* =====================================================
   DESIGN-B4.CSS — Grundschicht des Designs B4, entstanden aus D2 „Gelände“/„Reisebuch“ (01.10.2026)

   Selektoren unter html[data-design="d"].

   Idee: Die Karte zeigt das Gelände, die Fotos zeigen die Orte.
   D2 „Reisebuch“ (02.10.2026): Sandstein (Seitengrund), Kalk (Flächen,
   Reiseland), Kiesel (Nachbarländer, Hover), Tinte (Text, Bleistift), Laub
   (alles, was man drückt), Wegmarke (nur die Route), Fjord (nur Wasser). Bunt
   sind allein die Fotos. Eine Schrift: Geologica. Nächte sind Nebentext, kein
   Blickfang.
   Fest gesetzte Schriften, Großbuchstaben und Farben der alten Stylesheets
   fängt css/design-d-auto.css ab (tools/build-design.js d).

   D2 (02.10.2026): Hier bleiben Schrift, Tokens, Knöpfe, Zierrat, Links, Kopf und
   Fuß, Chips und Filter, Felder, Schrittleiste, Modals, Karten (Stiel-Pins,
   Etappenmarken, gemeinsame Leaflet-Regeln) und der Testansicht-Hinweis. Die
   Bereichsregeln stehen in design-d-start.css (Paket 2), design-d-schritte.css
   (Paket 3) und design-d-ergebnis.css (Paket 4); index.html lädt sie direkt nach
   dieser Datei, in dieser Reihenfolge.
   ===================================================== */

@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/alegreya-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/alegreya-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/alegreya-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/alegreya-sans-800.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/alegreya-sans-900.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/alegreya-sans-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/alegreya-sans-500-italic.woff2') format('woff2'); }
/* --- Tokens D2 „Reisebuch“ (Paket 1, Schritt B, 02.10.2026) ---
   :root zusätzlich, damit diese Werte vor den gleichnamigen Gegenregeln aus
   design-d-auto.css (--lp-*) stehen.
   Drei Farbrollen bleiben streng getrennt: Laub nur für Handlung, Wegmarke nur
   für die Route, Fjord nur für Wasser. Bunt sind nur die Fotos. Dieselben Werte
   für Skripte: window.ROUTARIS_D2 in js/design-d.js. */
html[data-design="d"]:root {
  /* Rollen */
  --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 */
  /* Übergänge aus Schritt A (Literal-Tabelle): D-Kalkgrund wird Kalk, Ocker tief wird Tinte hell */
  --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);

  /* Kartentokens (results.js, hero-v2.js, pdf-export.js, map-export.js) */
  --map-route: #173A2E;
  --map-casing: #EBB431;
  --map-pin-ink: #173A2E;

  /* Schrift: eine Familie (Geologica), Rollen Desktop; Handy im Media-Query unten */
  --d-fs-display: 62px;  --d-lh-display: 1.02;  --d-fw-display: 700;  --d-track-display: -0.03em;
  --d-fs-titel: 44px;    --d-lh-titel: 1.08;    --d-fw-titel: 690;    --d-track-titel: -0.02em;
  --d-fs-kapitel: 34px;  --d-lh-kapitel: 1.12;  --d-fw-kapitel: 680;  --d-track-kapitel: -0.018em;
  --d-fs-zwischen: 20px; --d-lh-zwischen: 1.3;  --d-fw-zwischen: 640; --d-track-zwischen: -0.01em;
  --d-fs-lead: 19px;     --d-lh-lead: 1.5;      --d-fw-lead: 400;
  --d-fs-text: 16.5px;   --d-lh-text: 1.62;     --d-fw-text: 400;
  --d-fs-klein: 14px;    --d-lh-klein: 1.45;    --d-fw-klein: 450;
  --d-fs-mikro: 12px;    --d-lh-mikro: 1.35;    --d-fw-mikro: 460;
  --d-fs-betrag: 52px;   --d-lh-betrag: 1.05;   --d-fw-betrag: 700;   --d-track-betrag: -0.01em;
  --d-fs-faktensatz: 17px;
  --d-shrp-display: "SHRP" 60;
  --d-shrp-titel: "SHRP" 50;
  --d-mass: 60ch;

  /* Abstände im 4er-Raster */
  --d-a1: 4px; --d-a2: 8px; --d-a3: 12px; --d-a4: 16px; --d-a5: 24px;
  --d-a6: 32px; --d-a7: 48px; --d-a8: 64px; --d-a9: 96px;
  --d-seite: 56px;             /* Seitenrand ≥1100; 32 Tablet, 18 Handy (unten) */
  --d-abschnitt: 96px;         /* Abstand der Abschnitte; Handy 64 */

  /* Radien */
  --d-r-foto: 4px;
  --d-r-ui: 10px;              /* Knöpfe, Felder, Auswahlkacheln */
  --d-r-flaeche: 12px;         /* Modals, Tipps-Kasten, Legenden */
  --d-r-karte: 14px;           /* nur Karussellkarten über der Karte */
  --d-r-rund: 999px;           /* Pillen, Reiter, Foto-Pins, Nummern */

  /* Schatten nur für das, was über der Karte schwebt, und für Modals */
  --d-schweben: 0 1px 0 rgba(23, 58, 46, .15), 0 8px 24px rgba(23, 58, 46, .17);

  /* Alte Namen → D2 */
  /* Flächen */
  --cream: #FFFFFF;
  --cream-dark: #FFFFFF;
  --cream-soft: #FFFFFF;
  --paper-edge: #EDF4F1;
  --white: #FFFFFF;
  /* Tinte */
  --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);
  /* Handlung */
  --terracotta: #2B6E55;
  --terracotta-dark: #144F3A;
  --terracotta-text: #2B6E55;
  --terracotta-deep: #0D3929;
  --terracotta-light: #5E8C78;
  --terracotta-pale: #DDF0E7;
  --terracotta-soft: #D1EADF;
  /* Wasser und Info */
  --teal: #2E86C9;
  --teal-dark: #1F5F92;
  --teal-light: #8DB9DD;
  --teal-pale: #E3F0F9;
  /* Gold gibt es nicht mehr: Nebentext */
  --gold: #4B6259;
  --gold-pale: #FFFFFF;
  --sage: #2B6E55;
  --sage-pale: #DDF0E7;
  --border: #DBE5E1;
  --sand-dark: #C8DAD2;
  --danger: #B3261E;
  --jade: #4B6259;
  --car: #4B6259;
  --car-pale: #FFFFFF;

  --font-display: 'Alegreya Sans', system-ui, sans-serif;
  --font-body: 'Alegreya Sans', system-ui, sans-serif;
  --track-4xl: -0.03em;
  --track-3xl: -0.02em;
  --track-2xl: -0.018em;
  --track-xl: -0.01em;

  /* Schatten: Karten und Kacheln haben keinen */
  --shadow-xs: none;
  --shadow-sm: none;
  --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);
  /* Radien */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Startseite (css/steps.css, --lp-*) */
  --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-font-display: 'Alegreya Sans', system-ui, sans-serif;
  --lp-font-body: 'Alegreya Sans', system-ui, sans-serif;
  --lp-shadow-md: none;
  --lp-shadow-lg: 0 0 0 1px rgba(23, 58, 46, .15);
  --lp-shadow-xl: 0 20px 48px rgba(23, 58, 46, .22);
}
/* Tablet: Seitenrand 32 */
@media (min-width: 769px) and (max-width: 1099px) {
  html[data-design="d"]:root { --d-seite: 32px; }
}
/* Handy: dieselben Namen, kleinere Werte */
@media (max-width: 768px) {
  html[data-design="d"]:root {
    --d-fs-display: 38px;  --d-lh-display: 1.04;
    --d-fs-titel: 30px;    --d-lh-titel: 1.12;
    --d-fs-kapitel: 28px;
    --d-fs-zwischen: 18.5px;
    --d-fs-lead: 17px;
    --d-fs-text: 16px;
    --d-fs-betrag: 44px;
    --d-fs-faktensatz: 15.5px;
    --d-seite: 18px;
    --d-abschnitt: 64px;
  }
}

/* --- Eine Schrift für alles (auch Monospace-Labels und SVG-Text) --- */
html[data-design="d"] body,
html[data-design="d"] body *:not(svg):not(svg *) {
  font-family: 'Alegreya Sans', system-ui, sans-serif !important;
}
html[data-design="d"] svg text { font-family: 'Alegreya Sans', system-ui, sans-serif !important; }
html[data-design="d"] body { color: var(--d-tinte); background: var(--d-grund); font-variant-numeric: lining-nums; }
html[data-design="d"] p { color: var(--ink-78); }
html[data-design="d"] h1, html[data-design="d"] h2, html[data-design="d"] h3 { color: var(--d-tinte); }
html[data-design="d"] em, html[data-design="d"] i { font-style: normal; }
/* Fokus: 2,5 px Tinte mit 3 px Abstand (auf dem dunklen Band Kalk, design-d-start.css) */
html[data-design="d"] :focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] [tabindex="-1"]:focus,
html[data-design="d"] [tabindex="-1"]:focus-visible { outline: none; }
html[data-design="d"] ::selection { background: var(--d-laub-blass); color: var(--d-tinte); }
html[data-design="d"] { scrollbar-color: var(--d-kiesel-tief) var(--d-grund); }
html[data-design="d"] ::-webkit-scrollbar-thumb { background: var(--d-kiesel-tief); border: 3px solid var(--d-grund); border-radius: 8px; }
html[data-design="d"] ::-webkit-scrollbar-track { background: var(--d-grund); }
/* Zahlen in Budget, Tabellen, Fahrzeiten, Kapseln: tabellarisch */
html[data-design="d"] .optionb-leg-line,
html[data-design="d"] .d-cap, html[data-design="d"] .stepper-step .n, html[data-design="d"] .d2-num { font-variant-numeric: tabular-nums; }
/* Reduzierte Bewegung: Übergänge sofort, kein weiches Scrollen, keine Pin-Vergrößerung als
   Animation (.stem-head). Kein automatisches Blättern regeln die Skripte der Bereiche. */
@media (prefers-reduced-motion: reduce) {
  html[data-design="d"], html[data-design="d"] body { scroll-behavior: auto !important; }
  html[data-design="d"] *, html[data-design="d"] *::before, html[data-design="d"] *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- Knöpfe ---
   Hauptknopf: Laub, 48 px (Handy 50), Radius 10, 16/620, Hover Laub tief. Zweitknopf
   (.btn-secondary, .btn-outline, .d2-zweitknopf): 44 px, transparent, 1,5 px --d-rand,
   Hover Kiesel. Textknopf: .d2-textknopf im Link-Stil. Klein (.btn-sm) bleibt 36 px. */
html[data-design="d"] .btn { border-radius: var(--d-r-ui); box-shadow: none; font-weight: 600; font-size: 15.5px; min-height: 44px; letter-spacing: 0; transform: none; }
html[data-design="d"] .btn:hover, html[data-design="d"] .btn:active { transform: none; box-shadow: none; }
html[data-design="d"] .btn:active { transform: translateY(1px); }
html[data-design="d"] .btn.btn-sm { min-height: 36px; }
html[data-design="d"] .btn-primary,
html[data-design="d"] .landing-hero-cta {
  background: var(--d-laub);
  color: #fff;
  border-radius: var(--d-r-ui);
  font-size: 16px;
  font-weight: 620;
  box-shadow: none;
}
html[data-design="d"] .btn-primary:not(.btn-sm) { min-height: 48px; }
html[data-design="d"] .btn-primary:hover,
html[data-design="d"] .landing-hero-cta:hover { background: var(--d-laub-tief); color: #fff; box-shadow: none; }
html[data-design="d"] .btn-primary:focus-visible,
html[data-design="d"] .landing-hero-cta:focus-visible { box-shadow: none; outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .btn-primary:disabled,
html[data-design="d"] .btn-primary[disabled] { background: var(--d-kiesel); color: var(--d-tinte-hell); }
html[data-design="d"] .btn-outline,
html[data-design="d"] .d2-zweitknopf { background: transparent; color: var(--d-tinte); border: 1.5px solid var(--d-rand); border-radius: var(--d-r-ui); font-size: 15px; font-weight: 560; }
html[data-design="d"] .btn-outline:hover,
html[data-design="d"] .d2-zweitknopf:hover { background: var(--d-kiesel); color: var(--d-tinte); border-color: var(--d-rand); }
html[data-design="d"] .d2-zweitknopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; text-decoration: none; white-space: nowrap; }
html[data-design="d"] .d2-textknopf { background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; font: inherit; }
@media (max-width: 768px) {
  html[data-design="d"] .btn-primary:not(.btn-sm) { min-height: 50px; }
}
html[data-design="d"] .btn .arrow, html[data-design="d"] .arrow { display: none !important; }

/* --- Zierrat raus: Pfeile, Sterne, Versal-Kicker, Badge-Zeile --- */
html[data-design="d"] .hero-v2-badge,
html[data-design="d"] .chap-label,
html[data-design="d"] .subtitle-star,
html[data-design="d"] .how-mini-star,
html[data-design="d"] text.hmm-star,
html[data-design="d"] .alm-mom-endnote-star,
html[data-design="d"] .finale-star,
html[data-design="d"] .hml-int-star { display: none !important; }

/* --- Links --- */
html[data-design="d"] .landing-kompass-link,
html[data-design="d"] .lp-kompass-alt a,
html[data-design="d"] .d-caption-link,
html[data-design="d"] .d-mapnote a,
html[data-design="d"] .site-footer a,
html[data-design="d"] .d2-link,
html[data-design="d"] .d2-textknopf {
  color: var(--d-laub);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(var(--d-laub-rgb), .45);
}
html[data-design="d"] .landing-kompass-link:hover,
html[data-design="d"] .lp-kompass-alt a:hover,
html[data-design="d"] .d-caption-link:hover,
html[data-design="d"] .d-mapnote a:hover,
html[data-design="d"] .site-footer a:hover,
html[data-design="d"] .d2-link:hover,
html[data-design="d"] .d2-textknopf:hover { text-decoration-color: currentColor; color: var(--d-laub-tief); }

/* --- Kopf: Wortmarke, Textnavigation, „Meine Routen“ als Feld --- */
html[data-design="d"] .site-header { background: rgba(var(--d-grund-rgb), .96); box-shadow: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html[data-design="d"] .site-header.d-scrolled { border-bottom-color: rgba(var(--d-tinte-rgb), .12); box-shadow: none; }
html[data-design="d"] .d-wordmark {
  display: inline-block;
  font-size: 25px; font-weight: 720; line-height: 1;
  letter-spacing: -0.015em;
  font-variation-settings: "SHRP" 60;
  color: var(--d-tinte);
}
html[data-design="d"] .logo-subtitle { display: none !important; }
html[data-design="d"] .header-nav .nav-primary {
  font-size: 15.5px; font-weight: 450; color: var(--d-tinte); letter-spacing: 0;
  text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
html[data-design="d"] .header-nav .nav-primary:hover { text-decoration: underline; color: var(--d-tinte); background: none; }
html[data-design="d"] .header-nav .nav-primary::after { display: none !important; }
html[data-design="d"] .saved-routes-header-btn {
  height: 42px; padding: 0 16px 0 13px;
  border-radius: var(--d-r-rund); border: 0;
  background: var(--d-kiesel); color: var(--d-tinte);
  font-size: 15px; font-weight: 500;
  box-shadow: none;
}
html[data-design="d"] .saved-routes-header-btn:hover { background: #D2DFD9; color: var(--d-tinte); }
html[data-design="d"] .account-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--d-rand); background: transparent; color: var(--d-tinte);
}
html[data-design="d"] .account-btn:hover { background: var(--d-kiesel); }
html[data-design="d"] .nav-dropdown-panel { background: var(--d-flaeche); border: 1px solid var(--d-line); border-radius: var(--d-r-flaeche); box-shadow: var(--shadow-lg); }

/* --- Reiter und Chips: 36-px-Pille, aktiv Tinte mit Kalk-Schrift --- */
html[data-design="d"] .when-tab,
html[data-design="d"] .vmk-tab,
html[data-design="d"] .filter-tabs button,
html[data-design="d"] .hml-chip {
  min-height: 36px;
  background: var(--d-flaeche);
  border: 1.5px solid var(--d-line-stark);
  border-radius: var(--d-r-rund);
  color: var(--d-tinte);
  font-weight: 500;
  box-shadow: none;
}
html[data-design="d"] .when-tab:hover,
html[data-design="d"] .vmk-tab:hover,
html[data-design="d"] .filter-tabs button:hover { background: var(--d-flaeche-2); }
html[data-design="d"] .when-tab.active, html[data-design="d"] .when-tab[aria-selected="true"],
html[data-design="d"] .vmk-tab.active, html[data-design="d"] .vmk-tab[aria-selected="true"],
html[data-design="d"] .filter-tabs button.active, html[data-design="d"] .filter-tabs button[aria-pressed="true"],
html[data-design="d"] .chip-active {
  background: var(--d-tinte);
  border-color: var(--d-tinte);
  color: var(--d-flaeche);
  font-weight: 600;
}
/* Zähler im Reiter („Alle 27“): Nebentext, im aktiven Reiter Bandtext auf Tinte (9,8:1).
   Doppelte Klasse, damit die Regel auch nach den Bereichsdateien gilt. */
html[data-design="d"] .vmk-tabs .vmk-tab.active .dest-tab-count,
html[data-design="d"] .vmk-tabs .vmk-tab[aria-selected="true"] .dest-tab-count { color: var(--d-band-text-2); }
/* Kein Kursiv: weder als Akzent noch als Hinweis */
html[data-design="d"] body *:not(svg):not(svg *) { font-style: normal !important; }

/* --- Felder --- */
html[data-design="d"] .form-input,
html[data-design="d"] input[type="text"],
html[data-design="d"] input[type="email"],
html[data-design="d"] input[type="search"],
html[data-design="d"] input[type="date"],
html[data-design="d"] select,
html[data-design="d"] textarea {
  background: var(--d-flaeche);
  border: 1.5px solid var(--d-feldrand);
  border-radius: var(--d-r-ui);
  color: var(--d-tinte);
  box-shadow: none;
}
/* Einzeilige Felder 44 px hoch */
html[data-design="d"] input[type="text"],
html[data-design="d"] input[type="email"],
html[data-design="d"] input[type="search"],
html[data-design="d"] input[type="date"],
html[data-design="d"] select { min-height: 44px; }
/* Fokus-Hinweis im Formular: Rand in Laub (der Fokusring bleibt Tinte) */
html[data-design="d"] .form-input:focus,
html[data-design="d"] input:focus,
html[data-design="d"] select:focus,
html[data-design="d"] textarea:focus { border-color: var(--d-laub); box-shadow: none; }
html[data-design="d"] ::placeholder { color: var(--d-tinte-hell); opacity: 1; }
/* Platzhalter aufrecht und in Textgewicht (die Suchzeile der Länderwahl setzte ihn kursiv in der Titelschrift) */
html[data-design="d"] input::placeholder,
html[data-design="d"] textarea::placeholder,
html[data-design="d"] .country-toolbar .search input::placeholder { font-style: normal; font-weight: 400; font-variation-settings: normal; letter-spacing: 0; }

/* --- Schrittleiste: Kapseln 24 px; erledigt Tinte, aktuell Laub mit weißer Ziffer,
   offen als Kontur --- */
html[data-design="d"] .routaris-stepper { background: var(--d-grund); border-bottom: 1px solid var(--d-line); }
html[data-design="d"] .routaris-stepper .stepper-step { background: transparent !important; padding: 4px 10px 4px 2px; }
html[data-design="d"] .routaris-stepper .stepper-step .n {
  width: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--d-r-rund);
  background: transparent; color: var(--d-tinte);
  box-shadow: inset 0 0 0 1.5px var(--d-line-stark);
  font-size: 12.5px; font-weight: 640;
}
html[data-design="d"] .routaris-stepper .stepper-step .lbl { color: var(--d-tinte-hell); font-size: var(--d-fs-klein); letter-spacing: 0; }
html[data-design="d"] .routaris-stepper .stepper-step.is-active .n { background: var(--d-laub); color: #fff; box-shadow: none; }
html[data-design="d"] .routaris-stepper .stepper-step.is-active .lbl { color: var(--d-tinte); font-weight: 620; }
html[data-design="d"] .routaris-stepper .stepper-step.is-done .n { background: var(--d-tinte); color: var(--d-flaeche); box-shadow: none; }
html[data-design="d"] .routaris-stepper .stepper-step.is-done .lbl { color: var(--d-tinte); }
html[data-design="d"] .routaris-stepper .stepper-sep { background: var(--d-line-stark); height: 1.5px; max-width: 36px; }
@media (max-width: 768px) {
  html[data-design="d"] .routaris-stepper .stepper-sep { max-width: 24px; }
}

/* --- Modals, Drawer, Toasts, Hinweise --- */
html[data-design="d"] .modal,
html[data-design="d"] .saved-routes-panel,
html[data-design="d"] .auth-modal { background: var(--d-flaeche); border-radius: var(--d-r-flaeche); }
html[data-design="d"] .modal-backdrop { background: rgba(var(--d-tinte-rgb), .40); }
html[data-design="d"] .error-toast,
html[data-design="d"] .toast { background: var(--d-tinte); color: var(--d-flaeche); border-radius: var(--d-r-ui); font-size: 14.5px; }

/* --- Fußzeile: hell, Linie oben --- */
html[data-design="d"] .site-footer { background: var(--d-grund); color: var(--d-tinte-hell); border-top: 1px solid var(--d-line); }
html[data-design="d"] .site-footer * { color: inherit; }
html[data-design="d"] .site-footer a { color: var(--d-laub); }
html[data-design="d"] .site-footer-wordmark, html[data-design="d"] .site-footer-nav-title { color: var(--d-tinte); }
html[data-design="d"] .site-footer-wordmark { filter: none; }

/* Hover-Karte der Pins: Hero und Ergebniskarte (results.js baut dieselben Klassen
   .hero-v2-tip, .d-tip-head, .d-caps, .d-cap), deshalb gemeinsame Kartenregel */
html[data-design="d"] .hero-v2-tip {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-tinte-rgb), .18);
  border-left: 3px solid var(--d-tinte);
  border-radius: var(--d-r-ui);
  box-shadow: var(--d-schweben);
  padding: 9px 12px 9px 11px;
  white-space: normal;
  max-width: 280px;
}
html[data-design="d"] .d-tip-head { display: flex; align-items: center; gap: 8px; }
html[data-design="d"] .d-caps { display: inline-flex; gap: 3px; flex: none; }
html[data-design="d"] .d-cap {
  display: inline-block; box-sizing: border-box;
  height: 21px; min-width: 21px; padding: 0 6px;
  border-radius: 11px; background: var(--d-tinte); color: var(--d-flaeche);
  font-size: 12px; font-weight: 640; line-height: 21px; text-align: center;
  font-variant-numeric: tabular-nums;
}
html[data-design="d"] .hero-v2-tip-name { font-size: 15.5px; font-weight: 600; color: var(--d-tinte); font-style: normal; line-height: 1.2; }
html[data-design="d"] .hero-v2-tip-nights { font-size: 13.5px; font-weight: 400; color: var(--d-tinte-hell); line-height: 1.35; margin-top: 3px; }
/* Nächte am Ort stehen im Kärtchen, auch wenn die Karte sie nicht zeigt (User 11.10.2026):
   zwischen Ortsname und Zeile der Route, in der Schrift des Namens */
html[data-design="d"] .d-tip-naechte { display: block; font-size: 13.5px; font-weight: 640; color: var(--d-tinte); line-height: 1.3; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* =========================================================
   KARTEN: Stiel-Pins, Linien, Etappenmarken (Hero und Ergebniskarte)
   ========================================================= */
html[data-design="d"] .leaflet-marker-icon.stem-pin { overflow: visible; background: none; border: 0; }
html[data-design="d"] .stem-wrap { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 0; overflow: visible; }
html[data-design="d"] .stem-geo { position: absolute; overflow: visible; pointer-events: none; display: block; max-width: none; max-height: none; }
html[data-design="d"] .stem-head { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform .18s ease; }
html[data-design="d"] .stem-photo {
  position: absolute; display: block;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--d-tinte);
  background: var(--d-flaeche);
  overflow: hidden;
}
html[data-design="d"] .stem-photo .thumb-marker-img,
html[data-design="d"] .premium-thumb:hover .stem-photo .thumb-marker-img {
  width: 100% !important; height: 100% !important;
  box-sizing: border-box;
  border: 3px solid var(--d-flaeche);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none !important;
  transform: none !important;
  transition: none;
  display: block;
  background: var(--d-kiesel);
}
html[data-design="d"] .stem-nrs { position: absolute; left: 0; top: 0; display: flex; gap: 3px; z-index: 2; white-space: nowrap; }
html[data-design="d"] .stem-nr { display: block; flex: none; }
html[data-design="d"] .stem-nr svg { display: block; max-width: none; }
/* Die SVGs im Stiel-Pin (Stiel, Ring, Kapseln) sind keine alten Tropfen-Pins: ohne
   deren Schlagschatten, Hover-Sprung (scale 1.15, −4 px: Ring und Stiel rutschten vom
   Ort) und Puls-Animation. Hover vergrößert nur den Kopf (.stem-head, unten). */
html[data-design="d"] .premium-marker.stem-pin svg,
html[data-design="d"] .premium-marker.stem-pin:hover svg { transform: none; filter: none; animation: none; transition: none; }
html[data-design="d"] .premium-marker.stem-pin.stem-pin--nophoto .stem-nr svg { filter: drop-shadow(0 0 0.5px rgba(var(--d-tinte-rgb), .9)); }
html[data-design="d"] .stem-name {
  position: absolute; left: 0; top: 0;
  padding: 3px 6px;
  white-space: nowrap;
  font-weight: 600; line-height: 1.2;
  color: var(--d-tinte);
  text-shadow: 0 0 1px var(--d-flaeche), 0 0 3px var(--d-flaeche), 0 0 6px var(--d-flaeche), 0 0 10px rgba(var(--d-flaeche-rgb), .8);
  pointer-events: auto;
}
/* Zweite Zeile am Ortsnamen (Teilen-Bild „Ausführlich“: Nächte), leiser als der Name */
html[data-design="d"] .stem-name-sub { display: block; font-weight: 500; line-height: 1.2; color: var(--d-tinte-hell); }
html[data-design="d"] .stem-pin:hover .stem-head,
html[data-design="d"] .leaflet-marker-icon.marker-hover-highlight .stem-head { transform: scale(1.08); }
html[data-design="d"] .leaflet-marker-icon.marker-hover-highlight .thumb-marker { box-shadow: none; }
/* Aufbau-Animation: das ganze Icon wächst aus dem Stopp */
html[data-design="d"] .premium-marker.is-revealing > .stem-wrap { transform-origin: 0 0; }

/* Etappenmarken (seit 13.10.2026, Variante „D“ des Nutzers): immer die normale Symbol-Pille auf
   der Linie; die Fahrzeit steht klein daneben als eigene Beschriftung (.leg-zeit), gedreht auf der
   Linie hinter dem Symbol, bei steilen Strecken waagerecht daneben (Results._legZeitSetzen). Nur die
   Gesamtzeit („3 h“, „2,5 h“, „45 min“, Results.legZeitKurz). Der Schrifthof spart die Linie unter
   der Zeit aus. Vorher: Kapsel aus Pille und Zeit (zu groß), davor Symbol ohne Kreis und Zeit samt
   Zusätzen frei neben der Linie. */
html[data-design="d"] .leg-zeit {
  position: absolute; left: 0; top: 0; display: block;
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--d-tinte); font-variant-numeric: proportional-nums;
  text-shadow: 0 0 1px var(--d-flaeche), 0 0 2px var(--d-flaeche), 0 0 3px var(--d-flaeche), 0 0 5px var(--d-flaeche), 0 0 8px rgba(var(--d-flaeche-rgb), .85);
  transform-origin: 50% 50%; pointer-events: none;
}
html[data-design="d"] .leg-zeit-t { display: block; }
/* Satellitenbild (Ergebniskarte, PDF und Teilen-Bild, alle mit .result-map-wrap.sat): Ortsname samt
   Nächten auf einer hellen Plakette statt mit Hof. Auf Meer, dunklem Grün und hellem Sand trug der Hof
   die Schrift nicht, die Nächte waren kaum zu lesen (Befund Peru 11.10.2026, Yucatán 15.10.2026). Die
   Regel fiel am 13.10.2026 mit dem Umbau der Etappenmarken weg; wie im Hero (design-b4-start.css).
   Die Fahrzeit behält ihre Größe (mit Plakette fanden an engen Stellen zwei von fünf Zeiten keinen
   Platz mehr) und bekommt einen dichten Hof, der die Schrift als feste Kontur umgibt.
   Auf der Skizze bleibt der weiche Hof, das Papier trägt ihn. */
html[data-design="d"] .result-map-wrap.sat .stem-name {
  /* 86 % (Wunsch des Nutzers: weniger mächtig): Die Nächte halten auf dunklem Meer noch 5 : 1, bei 78 % nur 4,2 */
  background: rgba(var(--d-flaeche-rgb), .86); border-radius: 6px; text-shadow: none;
}
html[data-design="d"] .result-map-wrap.sat .leg-zeit {
  text-shadow: 0 0 1px var(--d-flaeche), 0 0 1px var(--d-flaeche), 0 0 2px var(--d-flaeche), 0 0 2px var(--d-flaeche),
    0 0 3px var(--d-flaeche), 0 0 4px var(--d-flaeche), 0 0 6px rgba(var(--d-flaeche-rgb), .9);
}
/* Teilen-Bild (Karte im Export-Rahmen von map-export.js, 1080 px breit, Pille 47 px) */
html[data-design="d"] .map-export-container .leg-zeit { font-size: 21px; }
/* Symbol-Pillen (Ergebniskarte am Handy, PDF): Kalk mit Tinte-Symbol, Rand in Wegmarke */
html[data-design="d"] .leg-pill.leg-pill-icon-only { background: var(--d-flaeche); border: 1.5px solid var(--d-weg); box-shadow: none; }
html[data-design="d"] .leg-pill-circle { background: transparent; color: var(--d-tinte); }
/* Zoomknöpfe aller Leaflet-Karten: rund, Kalk (die übrige Kartenbedienung der
   Ergebniskarte steht in design-d-ergebnis.css) */
html[data-design="d"] .leaflet-bar { border: 0 !important; box-shadow: none !important; }
html[data-design="d"] .leaflet-bar a {
  width: 40px !important; height: 40px !important; line-height: 40px !important;
  border-radius: 50% !important; margin-bottom: 8px;
  background: var(--d-flaeche); color: var(--d-tinte);
  border: 0 !important;
  box-shadow: var(--d-schweben);
}
html[data-design="d"] .leaflet-bar a:hover { background: var(--d-flaeche-2); }
/* Fußzeile: Wortmarke */
html[data-design="d"] .d-wordmark--foot { font-size: 24px; margin-bottom: 8px; display: block; }

/* Die Kopfzeile ist ein Raster aus drei Spalten (Wortmarke, Navigation, Konto). */
@media (min-width: 769px) {
  html[data-design="d"] .site-header .container > .logo { grid-column: 1; grid-row: 1; }
}
/* Tablet und kleine Laptops: Geologica läuft breiter, dazu steht der Hinweis im Kopf.
   Navigation ohne Umbruch und enger, „Meine Routen" als runder Symbolknopf wie am
   Handy (bei 1024 px rutschte sonst der Kontoknopf aus dem Bild). */
@media (min-width: 769px) and (max-width: 1199px) {
  html[data-design="d"] .header-nav { gap: 22px; }
  html[data-design="d"] .header-nav .nav-primary { white-space: nowrap; font-size: 14.5px; }
  html[data-design="d"] .saved-routes-header-btn { width: 42px; padding: 0; justify-content: center; background: transparent; border: 1.5px solid var(--d-rand); border-radius: 50%; }
  html[data-design="d"] .saved-routes-header-btn > span:not(.saved-routes-badge):not(.account-avatar) { display: none; }
}

/* =========================================================
   NACHSCHLIFF (Review 01.10.): Reste der alten Sprache in Schritten,
   Ergebnisseite und Startseite
   ========================================================= */
/* Pfeile als Symbol in Knöpfen und Links (cleanText erwischt nur Text-Pfeile) */
html[data-design="d"] :is(a, button) > svg:has(> path[d^="M5 12h14M13"]) { display: none !important; }
/* KI-Funkel am Knopf „Route erstellen" */
html[data-design="d"] .btn-spark { display: none !important; }
/* Abschnittslabels ohne nachgezogene Haarlinie (Zeitungsraster); der Platzhalter
   bleibt, damit „Monats-Guide" rechts steht */
html[data-design="d"] .util-head::after { background: none !important; }

/* Kategorien (Schritt 3, Punkte an den Tags): Tinten-Abstufungen, ohne Grün, Wasser-
   oder Wegfarbe (wie MapModule._catColors in js/design-d.js) */
html[data-design="d"]:root {
  --c-kultur: #173A2E;
  --c-natur: #405C51;
  --c-grossstadt: #173A2E;
  --c-kulinarik: #4B6259;
  --c-erholung: #6F877D;
  --c-abenteuer: #405C51;
  --c-geschichte: #4B6259;
  --c-nachtleben: #173A2E;
  --c-abseits: #6F877D;
  /* Reisekompass-Teaser (js/kompass-teaser.js liest diese Werte): Reisezeit in
     Tinten-Stufen wie das Monatsband, Nebensaison Kiesel, ohne Grün */
  --kompass-hi: #405C51;
  --kompass-mid: #9BADA5;
  --kompass-lo: #EDF4F1;
  --kompass-hx-bg: #FFFFFF;
  --kompass-lo-hx: #C8DAD2;
  --kompass-lo-hx-bg: #FFFFFF;
  --kompass-land: #F0F5F3;
  --kompass-edge: #FFFFFF;
}

/* =========================================================
   HANDY (≤768): Kopfzeile (Startseite am Handy: design-d-start.css)
   ========================================================= */
@media (max-width: 768px) {
  html[data-design="d"] .site-header .container { min-height: 60px; }
  html[data-design="d"] .d-wordmark { font-size: 23px; }
  html[data-design="d"] .saved-routes-header-btn { width: 42px; padding: 0; justify-content: center; background: transparent; border: 1.5px solid var(--d-rand); border-radius: 50%; }
  html[data-design="d"] .saved-routes-header-btn span:not(.saved-routes-badge) { display: none; }
  html[data-design="d"] .account-control { display: none !important; }
}

/* =========================================================
   INTEGRATION (02.10.): eine linke Kante, Kopfzeilenhöhe, schmale Handys
   ========================================================= */
/* Wortmarke, Schrittleiste und Inhalt beginnen auf derselben Linie (--d-seite: 56 /
   32 / 18). Vorher stand die Wortmarke bei 40 px, die erste Schrittkapsel bei 84 px
   und der Inhalt bei 56 px. Die Kopfzeile läuft wie Hero und Schritt 3 über die ganze
   Breite (bei 1920 stand sie mittig ab 280 px). Die Wortmarke ist nur so breit wie
   ihr Text, damit der Klickbereich nicht unter den Hinweis „Testansicht D“ reicht. */
html[data-design="d"] .site-header .container { max-width: none; padding: 0 var(--d-seite); }
html[data-design="d"] .site-header .container > .logo { justify-self: start; }
html[data-design="d"] .routaris-stepper .stepper-trail { max-width: none; padding-left: calc(var(--d-seite) - 2px); padding-right: var(--d-seite); }

/* Kopfzeile laut Bauanleitung 64 px am Desktop, 60 px am Handy, beim Scrollen 56 px.
   nav.js setzt --header-h inline auf 72/56 (Standardhöhe); unter D gilt der eigene
   Wert, damit Schrittleiste, Karte in Schritt 3 und Klebeleisten bündig andocken.
   Den geschrumpften Kopf meldet nav.js als .d-kopf-klein an <html>. Kein :root:has(): eine
   :has()-Regel an <html> lässt den Browser nach jeder DOM-Änderung den Stil der ganzen Seite
   neu berechnen (Startseite am Handy 15.10.2026: 3,9 s in den ersten 10 s).
   Am Handy bleibt --header-h an <html> beim Rollen fest: Jeder neue Wert dort erbt jedes
   Element, ein Wechsel kostete am Handy 0,3 s Stilberechnung der ganzen Seite. Den kleinen
   Wert bekommen nur die Leisten, die am Kopf andocken; Sprungziele behalten 60 px. */
html[data-design="d"] .site-header { height: 64px; }
html[data-design="d"] .site-header.is-shrunk { height: 56px; }
html[data-design="d"]:root { --header-h: 64px !important; }
@media (min-width: 769px) {
  html[data-design="d"].d-kopf-klein:root { --header-h: 56px !important; }
}
@media (max-width: 768px) {
  html[data-design="d"] .site-header { height: 60px; }
  html[data-design="d"] .site-header.is-shrunk { height: 56px; }
  html[data-design="d"]:root { --header-h: 60px !important; }
  html[data-design="d"].d-kopf-klein .routaris-stepper,
  html[data-design="d"].d-kopf-klein .d2-perlen,
  html[data-design="d"].d-kopf-klein .d2-kl { --header-h: 56px; }
}

/* Schmale Handys (360, 320): Menüsymbol ragte 7 bzw. 47 px über den Rand. Engere Spalten. */
@media (max-width: 400px) {
  html[data-design="d"] .site-header .container { column-gap: 10px; }
  html[data-design="d"] .header-utility { gap: 6px; }
}
@media (max-width: 359px) {
  html[data-design="d"] .d-wordmark { font-size: 21px; }
  html[data-design="d"] .saved-routes-header-btn { width: 40px; height: 40px; }
}
/* App.showStep(0) ruft beim Laden scrollIntoView auf, während die Einblend-Animation
   den Schritt noch um bis zu 24 px nach unten schiebt. Mit der niedrigeren Kopfzeile
   reichte der Abstand nicht mehr, die Startseite lud 3 bis 12 px gescrollt. */
html[data-design="d"] #step-0 { scroll-margin-top: calc(var(--sticky-top, 86px) + 24px); }

/* --- Dialoge: Teilen --- */
/* „Reise teilen“ (results.js openShareModal) und „Als Bild teilen“ (map-export.js):
   Kicker ohne Strich und nicht in Laub, keine Pfeile hinter Knopftexten.
   Aus design-d-ergebnis.css hierher verschoben (Integration 02.10.): Modals gehören ins Fundament. */
html[data-design="d"] .share-rich-bar { display: none; }
html[data-design="d"] .share-rich-kicker { gap: 0; color: var(--d-tinte-hell); }
html[data-design="d"] .share-opens-ic { display: none; }