/* =====================================================
   DESIGN-D-ERGEBNIS.CSS — Testdesign D2 „Reisebuch“, Ergebnisseite

   Zuständig: Paket 4 (Kopf, Buch mit Kapiteln und Etappen, mitlesende Karte,
   Praktisches, Abschluss).
   Geladen: index.html, Design-Schalter (nur html[data-design="d"]), als letzte
   der D-Dateien nach css/design-d.css, design-d-start.css und
   design-d-schritte.css. Ohne den Schalter lädt diese Datei nicht.

   Stand 02.10.: Teil 1 (Raster, Kopf, Perlenschnur, Kapitel, Etappen,
   Knoten, mitlesende Karte) und Teil 2 (Praktisches, Abschluss) stehen in
   den Abschnitten D2 REISEBUCH am Ende; die übrigen Abschnitte kommen aus
   css/design-d.css (Paket 1) und gelten weiter für den Bearbeitungsmodus,
   die bisherige Detailansicht und die Werkbank.
   ===================================================== */

/* =========================================================
   KARTEN: Stiel-Pins, Linien, Etappenmarken (Hero und Ergebniskarte)
   ========================================================= */

/* Kartenbedienung der Ergebniskarte: Kalk-Knöpfe 40 px mit Schwebeschatten (sie
   liegen über der Karte), Kartenstil als Segment, aktiv Tinte. Lage im Abschnitt
   D2 REISEBUCH (oben rechts Teilen und Vollbild, unten rechts Stil, unten links Zoom). */
html[data-design="d"] .result-map-wrap { background: var(--d-meer); border-radius: 0; box-shadow: none; border: 0; margin: 0; }
html[data-design="d"] .map-fullscreen-btn,
html[data-design="d"] .map-export-btn,
html[data-design="d"] .result-names-toggle,
html[data-design="d"] .result-basemap-toggle {
  background: var(--d-flaeche); color: var(--d-tinte);
  border: 0;
  box-shadow: var(--d-schweben);
  border-radius: var(--d-r-ui);
}
html[data-design="d"] .map-fullscreen-btn:hover,
html[data-design="d"] .map-export-btn:hover { background: var(--d-flaeche-2); color: var(--d-tinte); border-color: transparent; }
html[data-design="d"] .result-names-toggle.is-on { background: var(--d-laub-blass); border-color: var(--d-laub); color: var(--d-tinte); }
html[data-design="d"] .result-basemap-toggle button[aria-pressed="true"] { background: var(--d-tinte); color: var(--d-flaeche); border-radius: var(--d-r-rund); }

/* =========================================================
   ERGEBNISSEITE: Stopp-Karten, Etappen, Hinweise, Budget
   ========================================================= */
html[data-design="d"] .optionb-stream::before {
  border-left: 2px solid var(--d-weg);
  opacity: 1;
  left: 19px;
}
html[data-design="d"] .optionb-stop-pin {
  width: auto; min-width: 30px; height: 30px; padding: 0 8px;
  left: -55px; top: 20px;
  border-radius: 999px;
  background: var(--d-tinte); color: var(--d-flaeche);
  border: 2.5px solid var(--d-grund);
  font-size: 14px; font-weight: 640;
  box-shadow: none;
}
html[data-design="d"] .optionb-stopcard.active .optionb-stop-pin { background: var(--d-tinte); box-shadow: 0 0 0 2px var(--d-tinte); }
html[data-design="d"] .optionb-stopcard {
  border-radius: 6px;
}
html[data-design="d"] .optionb-stopcard:hover { box-shadow: none; transform: none; border-color: rgba(var(--d-tinte-rgb), .28); }
html[data-design="d"] .optionb-stopcard-photo {
  border-radius: 2px;
  border: 4px solid var(--d-flaeche);
  outline: 1px solid rgba(var(--d-tinte-rgb), .16);
  outline-offset: 0;
  background-color: var(--d-kiesel);
}
html[data-design="d"] .optionb-stopcard-city { font-size: 21px; font-weight: 640; letter-spacing: -0.008em; color: var(--d-tinte); font-variation-settings: "SHRP" 40; }
html[data-design="d"] .optionb-leg-pin {
  width: 28px; height: 28px; left: -55px;
  background: var(--d-grund); border: 2px solid var(--d-weg); color: var(--d-tinte);
}
html[data-design="d"] .optionb-leg-line { font-size: 14px; color: var(--d-tinte-hell); }
html[data-design="d"] .optionb-leg-line strong { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--d-tinte); font-weight: 600; }
html[data-design="d"] .optionb-routegroup { background: var(--d-flaeche-alt); box-shadow: inset 1px 0 0 var(--d-kiesel); border-radius: 6px; }
html[data-design="d"] .optionb-routespan-name { font-style: normal; font-weight: 620; font-size: 18px; }
html[data-design="d"] .optionb-routespan-meta { font-size: 13.5px; letter-spacing: 0; color: var(--d-tinte-hell); }

/* Etappenverbinder (Transport-Badge-Regel: alle legModes behalten ihre Klassen) */
html[data-design="d"] .overview-leg-badge,
html[data-design="d"] .leg-badge,
html[data-design="d"] [class*="map-leg-badge-"] {
  background: var(--d-flaeche) !important; color: var(--d-tinte) !important;
  border: 1px solid rgba(var(--d-tinte-rgb), .22) !important; box-shadow: none !important;
  letter-spacing: 0; text-transform: none;
}

/* Hinweis-Boxen */
html[data-design="d"] .notice {
  background: var(--d-flaeche-alt); border-left: 3px solid var(--d-wasser); border-radius: 6px; box-shadow: none;
}

/* Klimadiagramm und Kosten: Abschnitt D2 REISEBUCH, TEIL 2 am Dateiende
   (eigenes Markup, die Farben setzt js/design-d.js in ClimateChart.COLORS und _computeBudget) */

/* Ladehinweis der Stopp-Details (Inline-Stil aus results.js) */
html[data-design="d"] .detail-status-note { background: var(--d-flaeche-alt) !important; color: var(--d-tinte) !important; border-left: 3px solid var(--d-wasser); border-radius: 6px !important; }
html[data-design="d"] .detail-status-note button { border-color: rgba(var(--d-tinte-rgb), .42) !important; color: var(--d-tinte) !important; border-radius: 8px !important; }

/* =========================================================
   NACHSCHLIFF (Review 01.10.): Reste der alten Sprache in Schritten,
   Ergebnisseite und Startseite
   ========================================================= */

/* Ergebnisseite: Höhepunkte mit Komma direkt am Wort (results.js setzt unter D
   ohnehin Kommas; das hier fängt ältere Ausgaben ab) */
html[data-design="d"] .optionb-tags i { padding: 0; margin: 0; font-size: 0; color: inherit; }
html[data-design="d"] .optionb-tags i::after { content: ", "; font-size: 14px; white-space: pre; color: inherit; }

/* Ergebnisseite, Abschluss: Raster und Bausteine im Abschnitt D2 REISEBUCH, TEIL 2
   am Dateiende. Hier nur das Routen-Feedback darunter (in Tokens). */
html[data-design="d"] .rfb { border-top-color: rgba(var(--d-tinte-rgb), .14); }
html[data-design="d"] .rfb-lead, html[data-design="d"] .rfb-note, html[data-design="d"] .rfb-error, html[data-design="d"] .rfb-label span { color: var(--d-tinte-hell); }
html[data-design="d"] .rfb-q, html[data-design="d"] .rfb-label { color: var(--d-tinte); }
html[data-design="d"] .rfb-choice { background: var(--d-flaeche); border: 1.5px solid rgba(var(--d-tinte-rgb), .22); border-radius: 6px; color: var(--d-tinte); }
html[data-design="d"] .rfb-choice:hover { border-color: rgba(var(--d-tinte-rgb), .42); color: var(--d-tinte); }
html[data-design="d"] .rfb-choice.is-on { background: var(--d-laub-blass); border-color: var(--d-laub); color: var(--d-tinte); }
html[data-design="d"] .rfb-text { background: var(--d-flaeche); border: 1.5px solid rgba(var(--d-tinte-rgb), .30); border-radius: 6px; color: var(--d-tinte); }
html[data-design="d"] .rfb-text::placeholder { color: var(--d-tinte-hell); }
html[data-design="d"] .rfb-text:focus { outline: none; border-color: var(--d-tinte); }
html[data-design="d"] .rfb-send { background: transparent; border: 1.5px solid var(--d-rand); border-radius: 8px; color: var(--d-tinte); }
html[data-design="d"] .rfb-send:hover { background: var(--d-kiesel); border-color: var(--d-rand); color: var(--d-tinte); }
html[data-design="d"] .rfb-done { color: var(--d-laub); }
html[data-design="d"] .rfb-note a:hover, html[data-design="d"] .rfb-error a:hover { color: var(--d-laub); }

/* =========================================================
   RESTE DER ALTEN SPRACHE (Prüfscan zierrat.js, 02.10.)
   Knöpfe mit Radius 8, Segmente und Abschnittsleiste mit Radius 6, keine Pfeile in
   Links, Erdocker nie als Symbolfarbe
   ========================================================= */
/* Ergebnisseite: Kartenstil-Umschalter, Abschnittsleiste, Knöpfe */
html[data-design="d"] .result-basemap-toggle button { border-radius: 6px; }
html[data-design="d"] .route-adjust-btn { border-radius: var(--d-r-ui); }

/* =========================================================
   D2 REISEBUCH, TEIL 1: Raster, Kopf, Perlenschnur, Kapitel, Etappen,
   Start- und Endknoten, mitlesende Karte
   Markup: js/results.js (_renderKopfD, _renderBuchD, _d2KarteLesen).
   Breiten: ≥1025 Desktop-Raster (Karte rechts, klebt), 769–1024 gestapelt
   mit Desktop-Schrift, ≤768 Handy (Kopf vor der Karte, Knopfzeile darunter).
   ========================================================= */

/* --- Rahmen: Buch links mit Seitenrand, Karte bis an den Fensterrand --- */
html[data-design="d"] #step-5.step { padding-top: 0; }
html[data-design="d"] #step-5 > .container:has(> .optionb-layout) { max-width: none; padding-left: 0; padding-right: 0; }
html[data-design="d"] #step-5 > .container:has(> .optionb-layout) > :not(.optionb-layout) {
  max-width: 1240px; margin-left: auto; margin-right: auto;
  padding-left: var(--d-seite); padding-right: var(--d-seite);
}
html[data-design="d"] .optionb-layout { margin: 0; gap: 0; }
html[data-design="d"] .optionb-header { margin: 0; padding: 0; border: 0; }
html[data-design="d"] .optionb-stream-col { gap: 0; }
/* Kopf und Buch sofort zeigen (die Karte baut sich weiter Pin für Pin auf) */
html[data-design="d"] #step-5.reveal-mode .optionb-stream-col { opacity: 1; pointer-events: auto; }
html[data-design="d"] .optionb-map-col #result-map { height: 100%; border-radius: 0; }

@media (min-width: 1025px) {
  html[data-design="d"] .optionb-layout {
    grid-template-columns: minmax(0, 1fr) clamp(460px, 40vw, 600px);
    column-gap: 56px;
    padding-left: var(--d-seite);
    align-items: start;
  }
  html[data-design="d"] .optionb-stream-col { order: 1; width: 100%; max-width: 760px; justify-self: center; padding: 40px 0 0; }
  html[data-design="d"] .optionb-map-col { order: 2; top: calc(var(--sticky-top, 86px) + 12px); gap: 0; }
  /* 44 statt 28 px Abstand nach unten: Platz für die Zeile „Unterwegs mit …“ unter der Karte
     (Results._kartenMittelZeile), sonst lag sie in der klebenden Spalte unter dem Fensterrand */
  html[data-design="d"] .optionb-map-col .result-map-wrap { height: clamp(480px, calc(100vh - var(--sticky-top, 86px) - 44px), 860px); }
}

/* --- Kartenbedienung (Desktop, Tablet, Vollbild): Teilen und Vollbild oben
   rechts, Stil unten rechts, Zoom unten links, Kartenquelle oben links --- */
html[data-design="d"] .result-map-wrap .map-export-btn {
  top: 16px; right: 64px; left: auto;
  height: 40px; min-height: 40px; padding: 0 14px; gap: 8px;
  font-size: 14px; font-weight: 560; letter-spacing: 0;
}
html[data-design="d"] .result-map-wrap .map-fullscreen-btn {
  top: 16px; right: 16px; left: auto;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  border-radius: 50%;
}
html[data-design="d"] .result-map-wrap .result-basemap-toggle {
  left: auto; right: 16px; bottom: 16px;
  padding: 3px; gap: 2px;
  border-radius: var(--d-r-rund);
}
html[data-design="d"] .result-map-wrap .result-basemap-toggle button {
  min-height: 34px; padding: 0 13px;
  border-radius: var(--d-r-rund);
  font-size: 13.5px; font-weight: 520; letter-spacing: 0;
  color: var(--d-tinte-hell);
}
html[data-design="d"] .result-map-wrap .result-basemap-toggle button:hover { color: var(--d-tinte); background: var(--d-flaeche-2); }
html[data-design="d"] .result-map-wrap .result-basemap-toggle button[aria-pressed="true"] { color: var(--d-flaeche); background: var(--d-tinte); }
html[data-design="d"] .result-map-wrap .result-basemap-toggle button:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; }
html[data-design="d"] .result-basemap-toggle [data-basemap="skizze"] { order: 1; }
html[data-design="d"] .result-basemap-toggle [data-basemap="plan"] { order: 2; }
html[data-design="d"] .result-basemap-toggle [data-basemap="sat"] { order: 3; }
/* Namen stehen in D immer am Stiel-Pin: ohne eigenen Schalter */
html[data-design="d"] .result-map-wrap .result-names-toggle { display: none; }
html[data-design="d"] .result-map-wrap .leaflet-bottom.leaflet-left .leaflet-control-zoom { margin: 0 0 8px 16px; }
html[data-design="d"] .result-map-wrap .leaflet-bottom.leaflet-right { top: 12px; bottom: auto; left: 12px; right: auto; }
html[data-design="d"] .result-map-wrap.map-fullscreen .leaflet-bottom.leaflet-right { top: 20px; left: 150px; }
html[data-design="d"] .result-map-wrap.map-fullscreen .result-basemap-toggle { right: 20px; bottom: 20px; left: auto; }
html[data-design="d"] .result-map-wrap.map-fullscreen .map-export-btn { top: 16px; right: 16px; }
html[data-design="d"] .map-fullscreen-close {
  background: var(--d-flaeche); color: var(--d-tinte); border: 0; box-shadow: var(--d-schweben);
  border-radius: var(--d-r-ui); min-height: 40px; font-weight: 560;
}
html[data-design="d"] .map-fullscreen-close:hover { background: var(--d-flaeche-2); color: var(--d-tinte); }

/* --- Kopf --- */
html[data-design="d"] #result-header { display: flex; flex-direction: column; align-items: flex-start; }
html[data-design="d"] .d2-titel {
  order: 1; margin: 0; max-width: 20ch;
  font-size: var(--d-fs-titel); line-height: var(--d-lh-titel); font-weight: var(--d-fw-titel);
  letter-spacing: var(--d-track-titel); font-variation-settings: var(--d-shrp-titel);
  color: var(--d-tinte); text-wrap: balance;
}
html[data-design="d"] .d2-beschreibung {
  order: 2; margin: 18px 0 0; max-width: var(--d-mass);
  font-size: 17px; line-height: 1.55; color: var(--d-tinte); text-wrap: pretty;
}
html[data-design="d"] .d2-fakten {
  order: 3; margin: 18px 0 0; max-width: var(--d-mass);
  font-size: var(--d-fs-faktensatz); line-height: 1.5; color: var(--d-tinte);
  font-variant-numeric: tabular-nums;
}
html[data-design="d"] .d2-fakten b { font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-aktionen { order: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
html[data-design="d"] .d2-aktionen .btn-primary { min-height: 48px; padding: 0 22px; gap: 10px; }
html[data-design="d"] .d2-aktionen svg { flex: none; }
html[data-design="d"] .d2-kurz { display: none; }
html[data-design="d"] .d2-speichern.is-saved { border-color: var(--d-laub); color: var(--d-laub); }
html[data-design="d"] .d2-speichern.is-saved svg path { fill: currentColor; }
html[data-design="d"] .d2-ki { order: 5; margin: 14px 0 0; max-width: var(--d-mass); font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-ki .d2-textknopf { font-size: inherit; }
html[data-design="d"] .d2-mehr,
html[data-design="d"] .d2-aendern-zeile { display: none; }

/* --- Perlenschnur (Desktop: Inhaltsverzeichnis unter dem Kopf) --- */
html[data-design="d"] .d2-buch { position: relative; }
html[data-design="d"] .d2-perlen-wache { display: block; height: 0; }
html[data-design="d"] .d2-perlen { margin-top: 36px; }
html[data-design="d"] .d2-perlen-kopf,
html[data-design="d"] .d2-sprung,
html[data-design="d"] .d2-perlen-ziele { display: none; }
html[data-design="d"] .d2-perlen-zeile { position: relative; padding-top: 8px; }
html[data-design="d"] .d2-perlen-liste { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
html[data-design="d"] .d2-perlen-liste::before,
html[data-design="d"] .d2-perlen-liste::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--d2-la, 46px); top: calc(var(--d2-ly, 36px) - 1.5px);
  height: 3px; border-radius: 2px;
}
html[data-design="d"] .d2-perlen-liste::before { width: var(--d2-lb, 0px); background: rgba(var(--d-weg-rgb), .35); }
html[data-design="d"] .d2-perlen-liste::after { width: var(--d2-lf, 0px); background: var(--d-weg); transition: width .4s ease; }
html[data-design="d"] .d2-perlen-liste > li { position: relative; z-index: 1; flex: 0 0 auto; }
html[data-design="d"] .d2-perle-knopf {
  display: grid; justify-items: center; align-content: start; gap: 6px;
  min-width: 84px; max-width: 124px; padding: 4px 4px 6px; margin: 0;
  border: 0; background: none; border-radius: var(--d-r-ui);
  font: inherit; color: var(--d-tinte); text-align: center; cursor: pointer;
}
html[data-design="d"] .d2-perle {
  position: relative; display: block;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--d-kiesel);
  box-shadow: 0 0 0 3px var(--d-flaeche), 0 0 0 4.5px var(--d-tinte);
  transition: transform .3s ease;
}
html[data-design="d"] .d2-perle img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html[data-design="d"] .d2-perle-nr {
  position: absolute; left: -6px; top: -7px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: var(--d-tinte); color: var(--d-flaeche);
  font-size: 12px; font-weight: 660; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--d-flaeche);
}
html[data-design="d"] .d2-perle-name { margin-top: 4px; font-size: 14px; font-weight: 620; line-height: 1.2; overflow-wrap: normal; hyphens: manual; }
html[data-design="d"] .d2-perle-tage { font-size: 12.5px; line-height: 1.2; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-perlen--zweizeilig .d2-perle-name { min-height: 2.4em; }
html[data-design="d"] .d2-perle-knopf:hover .d2-perle-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-design="d"] .d2-perle-knopf.is-aktiv .d2-perle { transform: scale(1.12); box-shadow: 0 0 0 3px var(--d-flaeche), 0 0 0 5.5px var(--d-tinte); }
html[data-design="d"] .d2-perle-knopf:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; }
/* ab 9 Stopps waagrecht blättern */
html[data-design="d"] .d2-perlen--lang .d2-perlen-zeile { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; }
html[data-design="d"] .d2-perlen--lang .d2-perlen-liste { justify-content: flex-start; gap: 4px; width: max-content; padding: 0 2px; }
html[data-design="d"] .d2-perlen--lang .d2-perlen-liste > li { scroll-snap-align: start; }

/* --- Start- und Endknoten, Strecken-Kopfzeile --- */
html[data-design="d"] .d2-knoten { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: center; margin: 28px 0 0; }
html[data-design="d"] .d2-knoten--ende { margin: 16px 0 8px; }
html[data-design="d"] .d2-knoten-linie { position: relative; height: 56px; display: grid; place-items: center; }
html[data-design="d"] .d2-knoten-linie::before { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--d-weg); }
html[data-design="d"] .d2-knoten--start .d2-knoten-linie::before { top: 50%; bottom: 0; }
html[data-design="d"] .d2-knoten--ende .d2-knoten-linie::before { top: 0; bottom: 50%; }
html[data-design="d"] .d2-knoten-ring { position: relative; box-sizing: border-box; width: 13px; height: 13px; border-radius: 50%; background: var(--d-flaeche); border: 2.5px solid var(--d-tinte); }
html[data-design="d"] .d2-knoten-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--d-tinte); }
/* Für unterwegs (Google Maps, GPX) direkt unter dem Endknoten, bündig mit dessen Text */
html[data-design="d"] .d2-unterwegs { margin: 0 0 8px 52px; }
html[data-design="d"] .d2-unterwegs .d2-textknopf { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-align: left; }
html[data-design="d"] .d2-knoten-text b { display: block; font-weight: 640; }
html[data-design="d"] .d2-knoten-text span { display: block; font-size: 14.5px; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-strecke { margin: 48px 0 0; padding-top: 14px; border-top: 1.5px solid var(--d-tinte); }
html[data-design="d"] .d2-strecke-name { margin: 0; font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: var(--d-fw-zwischen); letter-spacing: var(--d-track-zwischen); color: var(--d-tinte); }
html[data-design="d"] .d2-strecke-meta { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-strecke-meta .d2-textknopf { font-size: inherit; }

/* --- Kapitel --- */
html[data-design="d"] .optionb-stopcard.d2-kapitel {
  display: block; position: relative;
  margin: 48px 0 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  cursor: auto; transform: none; transition: none;
  scroll-margin-top: calc(var(--sticky-top, 86px) + 16px);
}
html[data-design="d"] .optionb-stopcard.d2-kapitel:hover,
html[data-design="d"] .optionb-stopcard.d2-kapitel:focus-within,
html[data-design="d"] .optionb-stopcard.d2-kapitel.active,
html[data-design="d"] .optionb-stopcard.d2-kapitel.optionb-stopcard--inspan { background: none; border: 0; box-shadow: none; transform: none; }
html[data-design="d"] .d2-buch > .d2-etappe + .optionb-stopcard.d2-kapitel { margin-top: 0; }
html[data-design="d"] .d2-buch > .d2-knoten--start + .optionb-stopcard.d2-kapitel { margin-top: 16px; }
html[data-design="d"] .d2-buch > .d2-strecke + .optionb-stopcard.d2-kapitel { margin-top: 24px; }
html[data-design="d"] .d2-slot-erlebnisse,
html[data-design="d"] .d2-slot-uebernachten { display: contents; }
html[data-design="d"] .d2-foto { margin: 0; }
html[data-design="d"] .d2-foto[hidden] { display: none; }
html[data-design="d"] .d2-foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--d-r-foto); background: var(--d-kiesel);
  /* Helle Himmel liefen in den weißen Grund aus und rissen eine Lücke (Etosha, 08.10.2026) */
  outline: 1px solid rgba(var(--d-tinte-rgb), .10); outline-offset: -1px;
}
html[data-design="d"] #step-5 .d2-quelle { margin: 8px 0 0; font-size: var(--d-fs-mikro); line-height: var(--d-lh-mikro); font-weight: var(--d-fw-mikro); color: var(--d-tinte-hell); }
html[data-design="d"] #step-5 .d2-quelle a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
html[data-design="d"] #step-5 .d2-quelle a:hover { color: var(--d-tinte); }
/* Wikipedia-Pflicht-Credit (_attachWikiCredit) als Teil der Bildunterschrift, nicht als Etikett */
html[data-design="d"] #step-5 .d2-quelle .img-wiki-credit { position: static; display: inline; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; font: inherit; color: inherit; }
html[data-design="d"] .d2-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; margin-top: 22px; }
html[data-design="d"] .d2-nr {
  grid-row: span 2; align-self: start; margin-top: 2px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--d-tinte); color: var(--d-flaeche);
  font-size: 17px; font-weight: 660;
}
html[data-design="d"] .d2-ort {
  margin: 0; font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); font-weight: var(--d-fw-kapitel);
  letter-spacing: var(--d-track-kapitel); color: var(--d-tinte);
}
html[data-design="d"] .d2-ort:focus { outline: none; }
html[data-design="d"] .d2-tage { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-leitsatz { margin: 14px 0 0; max-width: 58ch; font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--d-tinte); text-wrap: pretty; }
html[data-design="d"] .d2-erlebnisse { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
html[data-design="d"] .d2-erlebnisse li { border-top: 2px solid var(--d-tinte); padding-top: 10px; }
html[data-design="d"] .d2-erlebnisse:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-design="d"] .d2-erlebnisse > li:only-child { grid-column: 1 / -1; max-width: 62ch; }
html[data-design="d"] .d2-erlebnisse h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 650; color: var(--d-tinte); }
html[data-design="d"] .d2-erlebnisse p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--d-tinte); }
/* Insider als Tafel in Kiesel (19.10.2026, Nutzer: Kapitel am Handy „sehr monoton“): zwischen Foto und Tagesplan ein
   zweiter Ruhepunkt, am wertvollsten Tipp des Stopps. Vorher Randstrich wie Fließtext; im PDF bleibt er (5.13). */
html[data-design="d"] .d2-insider { margin: var(--d-a5) 0 0; display: block; max-width: var(--d-mass); box-sizing: border-box; padding: var(--d-a4) var(--d-a5) var(--d-a5); background: var(--b4-lavur); border-radius: var(--d-r-flaeche); }
html[data-design="d"] .d2-insider h3 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--d-tinte); }
html[data-design="d"] .d2-insider p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--d-tinte); }
html[data-design="d"] .d2-uebernachten { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 15.5px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] .d2-uebernachten b { font-weight: 640; }
html[data-design="d"] .d2-anzeige { margin-left: -8px; font-size: 12px; color: var(--d-tinte-hell); }
/* Unterkünfte und Touren (seit 10.10.2026): je Link ein Paar mit seiner Anzeige-Kennzeichnung */
html[data-design="d"] .d2-ue-link { display: inline-flex; align-items: baseline; gap: 6px; }
html[data-design="d"] .d2-ue-link .d2-anzeige { margin-left: 0; }

/* Tagesplan im Kapitel (results.js _d2TageHtml, seit 10.10.2026): Überschrift, darunter jeder
   Tag als Zeile mit Tag und Titel zum Aufklappen (Chevron vorn, ≥ 48 px), die Tipps als
   letzte Zeile. Vorher steckte der ganze Plan hinter einer Zeile; die Prüfer fanden die Tage nicht. */
html[data-design="d"] .d2-plan { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--d-line); }
html[data-design="d"] .d2-plan-t { margin: 0 0 8px; font-size: 16px; line-height: 1.3; font-weight: 640; color: var(--d-tinte); scroll-margin-top: calc(var(--header-h, 56px) + 64px); }
html[data-design="d"] .d2-plan-t:focus { outline: none; }
html[data-design="d"] .d2-plan-t:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; border-radius: 4px; }
html[data-design="d"] .d2-tagzeilen { list-style: none; margin: 0; padding: 0; }
html[data-design="d"] .d2-tagzeilen > li { border-top: 1px solid var(--d-line); }
html[data-design="d"] .d2-tagzeilen > li:last-child,
html[data-design="d"] .d2-tipps-auf { border-bottom: 1px solid var(--d-line); }
html[data-design="d"] .d2-tag-auf > summary,
html[data-design="d"] .d2-tag-auf.is-leer {
  list-style: none; display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); column-gap: 10px; align-items: start;
  min-height: 48px; padding: 12px 0; box-sizing: border-box; color: var(--d-tinte);
}
html[data-design="d"] .d2-tag-auf.is-leer { padding-left: 28px; grid-template-columns: 76px minmax(0, 1fr); }
html[data-design="d"] .d2-tag-auf > summary { cursor: pointer; }
html[data-design="d"] .d2-tag-auf > summary::-webkit-details-marker { display: none; }
html[data-design="d"] .d2-tag-auf > summary::marker { content: ""; }
html[data-design="d"] .d2-tag-auf > summary .d2-plan-chev { margin-top: 1px; }
html[data-design="d"] .d2-tag-auf[open] > summary .d2-plan-chev { transform: rotate(90deg); }
html[data-design="d"] .d2-tag-auf > summary:hover .d2-tag-titel { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
html[data-design="d"] .d2-tag-auf > summary:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; border-radius: 4px; }
html[data-design="d"] .d2-tag-auf .d2-tag { padding-top: 1px; }
html[data-design="d"] .d2-tag-auf .d2-tag .d2-num { white-space: nowrap; }
html[data-design="d"] .d2-tag-auf .d2-tag small { display: block; margin-left: 0; }
html[data-design="d"] .d2-tag-titel { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--d-tinte); }
html[data-design="d"] .d2-tag-auf > p { margin: -2px 0 16px; padding-left: 114px; max-width: 62ch; font-size: 15px; line-height: 1.58; color: var(--d-tinte); }
html[data-design="d"] .d2-tipps-auf > summary { grid-template-columns: 18px minmax(0, 1fr); }
html[data-design="d"] .d2-tipps-auf .d2-tipps { margin: 0 0 16px 28px; }
@media (max-width: 768px) {
  html[data-design="d"] .d2-tag-auf > summary { grid-template-columns: 18px 60px minmax(0, 1fr); }
  html[data-design="d"] .d2-tipps-auf > summary { grid-template-columns: 18px minmax(0, 1fr); }
  html[data-design="d"] .d2-tag-auf.is-leer { grid-template-columns: 60px minmax(0, 1fr); }
  html[data-design="d"] .d2-tag-auf > p { padding-left: 28px; }
}

/* Aufklapp-Chevron (Tage, Tipps, „Was in dieser Schätzung steckt“) und Ladezustand des Plans */
html[data-design="d"] .d2-plan-chev { flex: none; color: var(--d-tinte); transition: transform .2s ease; }
html[data-design="d"] .d2-plan-inhalt:empty { display: none; }
html[data-design="d"] .d2-plan-inhalt > .d2-plan-status { margin: 4px 0 10px; }
/* Offene Tagesliste der Detailansicht (_d2PlanInhaltHtml) */
html[data-design="d"] .d2-tagliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
html[data-design="d"] .d2-tagliste > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
html[data-design="d"] .d2-tag { margin: 0; padding-top: 2px; font-size: 14px; line-height: 1.35; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-tag small { display: block; font-size: 12.5px; font-weight: 450; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-tagliste h4 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-tagliste li div > p { margin: 3px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.58; color: var(--d-tinte); }
html[data-design="d"] .d2-tipps { margin: 20px 0 0; padding: 14px 16px; display: grid; gap: 8px; background: var(--d-flaeche); border-radius: var(--d-r-flaeche); }
html[data-design="d"] .d2-tipps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] .d2-tipps b { font-weight: 640; }
html[data-design="d"] .d2-alles { margin: 16px 0 0; font-size: 15px; }
html[data-design="d"] .d2-alles .d2-textknopf { font-size: inherit; }
html[data-design="d"] .d2-plan-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-plan-status.is-fehler { color: var(--d-fehler); }
html[data-design="d"] .d2-plan-status .d2-textknopf { font-size: inherit; }
html[data-design="d"] .d2-lader { flex: none; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: d2-dreh .8s linear infinite; }
@keyframes d2-dreh { to { transform: rotate(360deg); } }

/* --- Etappe zwischen zwei Kapiteln: ein Stück Route, ohne Preis --- */
html[data-design="d"] .d2-etappe { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: center; margin: 16px 0; }
html[data-design="d"] .d2-etappe-linie { position: relative; height: 64px; display: grid; place-items: center; }
html[data-design="d"] .d2-etappe-linie::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--d-weg); }
/* Signaturen wie auf der Karte: Flug gepunktet, Boot gestrichelt */
html[data-design="d"] .d2-etappe--flight .d2-etappe-linie::before { background: repeating-linear-gradient(to bottom, var(--d-weg) 0 3px, transparent 3px 9px); }
html[data-design="d"] .d2-etappe--boat .d2-etappe-linie::before { background: repeating-linear-gradient(to bottom, var(--d-weg) 0 8px, transparent 8px 13px); }
/* Goldene Hülle wie die Route auf der Karte (Frage des Nutzers 19.10.2026): Kern 3 px auf 13 px Gold, am Handy 9 px
   wie die Kartenlinie bei schmaler Breite (Results.LINIE_FUER); bei Flug und Boot bleibt die Hülle durchgehend wie dort */
html[data-design="d"] .d2-etappe-linie::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 13px; margin-left: -6.5px; border-radius: 7px; background: var(--map-casing); }
html[data-design="d"] .d2-etappe-linie::before { z-index: 1; }
html[data-design="d"] .d2-etappe-symbol { z-index: 2; }
html[data-design="d"] .d2-etappe--reisetag .d2-etappe-linie { height: 84px; }
html[data-design="d"] .d2-etappe-symbol {
  position: relative; width: 34px; height: 34px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--d-flaeche); border: 2px solid var(--d-weg); color: var(--d-tinte);
}
html[data-design="d"] .d2-etappe-symbol svg { width: 16px; height: 16px; }
html[data-design="d"] .d2-etappe-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--d-tinte); }
html[data-design="d"] .d2-etappe-text b { display: block; font-weight: 640; }
html[data-design="d"] .d2-etappe-text span { display: block; color: var(--d-tinte-hell); font-variant-numeric: tabular-nums; }
html[data-design="d"] .d2-etappe-text .d2-etappe-zusatz { font-size: 14px; margin-top: 2px; }

/* --- Mitlesende Karte: gelesener Pin ×1,5 um die Fotomitte, ohne neue Platzierung --- */
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-head { transform: scale(1.5); transition: transform .25s ease; }
/* Der Name wächst nur auf das 1,125-Fache (0,75 im 1,5-fach skalierten Kopf) und bleibt an der
   Fotoseite stehen: weniger Überstand an der Kartenkante und zu Nachbarn */
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-name { font-weight: 700; transform: scale(.75); }
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-name--r { transform-origin: 0 50%; }
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-name--l { transform-origin: 100% 50%; }
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-name--b { transform-origin: 50% 0; }
html[data-design="d"] .leaflet-marker-icon.is-reading .stem-name--t { transform-origin: 50% 100%; }
html[data-design="d"] #result-map .leaflet-overlay-pane path { transition: stroke-opacity .3s ease; }

/* --- Gestapelt (≤1024): Kopf vor der Karte, Perlenschnur als Klebeleiste --- */
@media (max-width: 1024px) {
  html[data-design="d"] .optionb-layout { display: flex; flex-direction: column; align-items: stretch; }
  html[data-design="d"] .optionb-stream-col,
  html[data-design="d"] #result-header { display: contents; }
  html[data-design="d"] #result-header > * { margin-left: var(--d-seite); margin-right: var(--d-seite); }
  html[data-design="d"] .d2-titel { order: 1; margin-top: 20px; max-width: none; }
  html[data-design="d"] .d2-fakten { order: 2; margin-top: 12px; }
  html[data-design="d"] .d2-aktionen { order: 3; margin-top: 18px; }
  html[data-design="d"] .optionb-map-col { order: 4; align-self: stretch; position: relative; top: 0; margin: 18px 0 0; gap: 0; scroll-margin-top: var(--header-h, 56px); }
  html[data-design="d"] .optionb-map-col .result-map-wrap { height: clamp(420px, 60vw, 600px); min-height: 0; max-height: none; }
  html[data-design="d"] .d2-beschreibung { order: 5; margin-top: 20px; }
  html[data-design="d"] .d2-mehr { order: 6; }
  html[data-design="d"] .d2-ki { order: 7; }
  html[data-design="d"] .d2-aendern-zeile { order: 8; }
  html[data-design="d"] #optionb-stops { order: 9; padding: 0 var(--d-seite); }
  html[data-design="d"] #bplan-teaser { order: 10; margin-left: var(--d-seite); margin-right: var(--d-seite); }

  html[data-design="d"] .d2-perlen {
    position: sticky; top: var(--header-h, 56px); z-index: 30;
    margin: 28px calc(var(--d-seite) * -1) 0;
    padding: 2px var(--d-seite) 1px;   /* 2 + Kopf 44 + Zeile 48 + 1 + Linie 1 = 96 px */
    background: var(--d-grund);   /* deckend: bei 96 % schien Fließtext als Geisterschrift durch */
    border-bottom: 1px solid transparent;
  }
  html[data-design="d"] .d2-perlen.is-klebt { border-bottom-color: var(--d-line); }
  /* Beim Lesen nach unten nur Zeile 1 (results.js setzt is-knapp): Die Fotozeile verschwindet
     hinter einer Kante, die Leiste behält ihre Höhe im Fluss, also springt nichts. Unten
     reicht die Kante weit genug für das offene Menü „Inhalt“. */
  html[data-design="d"] .d2-perlen { clip-path: inset(0 0 -420px 0); transition: clip-path .22s ease; }
  html[data-design="d"] .d2-perlen.is-knapp { clip-path: inset(0 0 calc(100% - 47px) 0); }
  html[data-design="d"] .d2-perlen.is-knapp .d2-perlen-kopf { box-shadow: 0 1px 0 var(--d-line); }
  html[data-design="d"] .d2-perlen .d2-perlen-zeile { transition: opacity .15s ease; }
  html[data-design="d"] .d2-perlen.is-knapp .d2-perlen-zeile { opacity: 0; }
  /* Zeile 1: Ort (bis zwei Zeilen), Sprungziele (ab 769 als Textlinks, am Handy als Menü), Kartenknopf */
  html[data-design="d"] .d2-perlen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
  html[data-design="d"] .d2-perlen-ort {
    flex: 1 1 auto; margin: 0; min-width: 0; font-size: 14px; line-height: 1.25; color: var(--d-tinte);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html[data-design="d"] .d2-perlen-ort b { font-weight: 620; }
  html[data-design="d"] .d2-perlen-ort span { font-weight: 450; color: var(--d-tinte-hell); }
  html[data-design="d"] .d2-perlen-karte {
    flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid var(--d-rand); background: transparent; color: var(--d-tinte); cursor: pointer;
  }
  html[data-design="d"] .d2-perlen-karte:hover { background: var(--d-kiesel); }
  html[data-design="d"] .d2-perlen-zeile {
    display: flex; align-items: center; gap: 18px;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--d-seite) * -1); padding: 4px var(--d-seite);
  }
  html[data-design="d"] .d2-perlen-zeile::-webkit-scrollbar { display: none; }
  html[data-design="d"] .d2-perlen-liste { flex: none; justify-content: flex-start; gap: 6px; }
  html[data-design="d"] .d2-perle-knopf { width: 44px; min-width: 44px; max-width: 44px; gap: 0; padding: 0; }
  html[data-design="d"] .d2-perle { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--d-flaeche), 0 0 0 3.25px var(--d-tinte); }
  html[data-design="d"] .d2-perle-knopf.is-aktiv .d2-perle { transform: scale(1.1); box-shadow: 0 0 0 2px var(--d-flaeche), 0 0 0 4px var(--d-tinte); }
  html[data-design="d"] .d2-perle-nr { left: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: 10.5px; line-height: 17px; }
  html[data-design="d"] .d2-perle-name,
  html[data-design="d"] .d2-perle-tage { display: none; }
  /* Menü „Inhalt“: alle Kapitel der Seite (results.js _D2_KAPITEL), auch in der Kapitelleiste */
  html[data-design="d"] .d2-sprung { display: block; position: relative; flex: none; }
  html[data-design="d"] .d2-sprung-knopf {
    list-style: none; display: inline-flex; align-items: center; box-sizing: border-box;
    min-height: 44px; padding: 0 15px; border-radius: var(--d-r-rund);
    border: 1.5px solid var(--d-rand); background: transparent; color: var(--d-tinte);
    font-size: 14px; font-weight: 560; line-height: 1; cursor: pointer; user-select: none;
  }
  html[data-design="d"] .d2-sprung-knopf::-webkit-details-marker { display: none; }
  html[data-design="d"] .d2-sprung-knopf::marker { content: ""; }
  html[data-design="d"] .d2-sprung-knopf:hover { background: var(--d-kiesel); }
  html[data-design="d"] .d2-sprung-knopf:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; }
  html[data-design="d"] .d2-sprung[open] > .d2-sprung-knopf { background: var(--d-tinte); border-color: var(--d-tinte); color: var(--d-flaeche); }
  html[data-design="d"] .d2-sprung-menue {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    display: grid; min-width: 196px; padding: 6px; box-sizing: border-box;
    background: var(--d-flaeche); border-radius: var(--d-r-flaeche); box-shadow: var(--d-schweben);
  }
  html[data-design="d"] .d2-sprung-menue a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
    font-size: 15px; font-weight: 560; color: var(--d-tinte); text-decoration: none;
  }
  html[data-design="d"] .d2-sprung-menue a:hover { background: var(--d-flaeche-2); text-decoration: underline; text-underline-offset: 4px; }
  html[data-design="d"] .d2-sprung-menue a:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: -2px; }
  html[data-design="d"] .d2-sprung-menue a[aria-current] { font-weight: 700; box-shadow: inset 3px 0 0 var(--d-tinte); }
  /* Feinschliff steht im Fluss nach dem Buch (results.js _d2FeinschliffVerlegen) */
  html[data-design="d"] #route-adjust-container { order: 11; }
  html[data-design="d"] .optionb-stopcard.d2-kapitel { scroll-margin-top: calc(var(--header-h, 56px) + 112px); }
}

/* --- Handy (≤768) --- */
@media (max-width: 768px) {
  html[data-design="d"] .d2-titel { margin-top: 16px; }
  html[data-design="d"] .d2-fakten { margin-top: 10px; line-height: 1.45; }
  html[data-design="d"] .d2-aktionen { flex-wrap: nowrap; gap: 8px; margin-top: 16px; align-self: stretch; }
  html[data-design="d"] .d2-aktionen > button { min-height: 46px; height: 46px; padding: 0 12px; gap: 6px; font-size: 14.5px; }
  html[data-design="d"] .d2-aktionen > button svg { width: 16px; height: 16px; }
  /* PDF nimmt den Rest der Zeile, Teilen und Speichern so breit wie ihr Text */
  html[data-design="d"] .d2-aktionen .d2-pdf { flex: 1 1 0; min-width: 0; font-size: 15.5px; }
  html[data-design="d"] .d2-aktionen .d2-teilen,
  html[data-design="d"] .d2-aktionen .d2-speichern { flex: 0 0 auto; }
  html[data-design="d"] .d2-aktionen .d2-aendern { display: none; }
  html[data-design="d"] .d2-lang { display: none; }
  html[data-design="d"] .d2-kurz { display: inline; }
  html[data-design="d"] .optionb-map-col { margin-top: 14px; }
  /* Karte randlos, Knopfzeile darunter (Polster unten), damit nichts Pins verdeckt */
  html[data-design="d"] .optionb-map-col .result-map-wrap {
    height: calc(var(--d2-karte-h, clamp(400px, calc(100svh - 380px), 560px)) + 60px);
    padding-bottom: 60px; box-sizing: border-box;
    background: var(--d-grund);
  }
  html[data-design="d"] .optionb-map-col #result-map { background: var(--d-meer); }
  html[data-design="d"] .optionb-map-col .result-map-wrap .result-basemap-toggle {
    top: auto; bottom: 8px; left: var(--d-seite); right: auto;
    box-shadow: none; border: 1.5px solid var(--d-line-stark);
  }
  html[data-design="d"] .optionb-map-col .result-map-wrap .result-basemap-toggle button { min-height: 36px; }
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-export-btn,
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-fullscreen-btn {
    top: auto; bottom: 8px; left: auto;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
    justify-content: center; gap: 0; font-size: 0;
    border-radius: 50%; background: transparent; border: 1.5px solid var(--d-rand); box-shadow: none;
  }
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-export-btn { right: calc(var(--d-seite) + 54px); }
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-fullscreen-btn { right: var(--d-seite); }
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-export-btn svg,
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-fullscreen-btn svg { width: 19px; height: 19px; }
  html[data-design="d"] .optionb-map-col .result-map-wrap .leaflet-control-zoom { display: none; }
  html[data-design="d"] .optionb-map-col .result-map-wrap .leaflet-bottom.leaflet-right { top: auto; bottom: 0; left: auto; right: 0; }
  html[data-design="d"] .result-map-wrap.map-fullscreen { padding-bottom: 0; }
  /* Vollbild: Quellenzeile unter „Schließen“; daneben lag sie halb unter „Als Bild teilen“ */
  html[data-design="d"] .result-map-wrap.map-fullscreen .leaflet-bottom.leaflet-right { top: 68px; left: 16px; }

  html[data-design="d"] .d2-beschreibung { margin-top: 18px; font-size: 16px; line-height: 1.55; }
  html[data-design="d"] .d2-beschreibung:not(.is-offen) .d2-beschreibung-rest { display: none; }
  html[data-design="d"] .d2-mehr:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 15px; }
  html[data-design="d"] .d2-ki { margin-top: 10px; }
  html[data-design="d"] .d2-aendern-zeile { display: block; margin-top: 4px; margin-bottom: 0; }
  html[data-design="d"] .d2-aendern-zeile .d2-textknopf { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

  html[data-design="d"] .d2-foto { margin: 0 calc(var(--d-seite) * -1); }
  html[data-design="d"] .d2-foto img { aspect-ratio: 4 / 3; border-radius: 0; }
  html[data-design="d"] #step-5 .d2-foto .d2-quelle { padding: 0 var(--d-seite); }
  html[data-design="d"] .optionb-stopcard.d2-kapitel { margin-top: 40px; }
  html[data-design="d"] .d2-kopf { margin-top: 18px; column-gap: 12px; }
  html[data-design="d"] .d2-nr { width: 34px; height: 34px; font-size: 15.5px; }
  html[data-design="d"] .d2-tage { font-size: 14.5px; }
  html[data-design="d"] .d2-leitsatz { margin-top: 10px; font-size: 17px; }
  html[data-design="d"] .d2-erlebnisse { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }
  /* auch bei zwei Erlebnissen untereinander: Die Regel für zwei Spalten oben ist spezifischer,
     Windhoek stand am Handy in zwei 170 px schmalen Spalten (Feinheiten 17.10.2026) */
  html[data-design="d"] .d2-erlebnisse:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  html[data-design="d"] .d2-erlebnisse li { border-top-width: 1.5px; padding-top: 12px; }
  /* Titel der Erlebnisse eine Stufe über dem Text (19.10.2026): mit 16 zu 15 px verschwammen Titel und Text */
  html[data-design="d"] .d2-erlebnisse h3 { font-size: 18px; }
  html[data-design="d"] .d2-erlebnisse p { font-size: 15px; margin-top: 6px; }
  html[data-design="d"] .d2-insider { padding: var(--d-a4); }
  html[data-design="d"] .d2-tagliste > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html[data-design="d"] .d2-tag small { display: inline; margin-left: 6px; }
  html[data-design="d"] .d2-etappe { column-gap: 12px; }
  html[data-design="d"] .d2-etappe-linie::after { width: 9px; margin-left: -4.5px; border-radius: 5px; }
  html[data-design="d"] .d2-knoten { column-gap: 12px; }

  /* Titel: höchstens drei Zeilen (results.js _d2TitelPassen setzt 28 bzw. 26 px) */
  html[data-design="d"] .d2-titel.d2-titel--28 { font-size: 28px; }
  html[data-design="d"] .d2-titel.d2-titel--26 { font-size: 26px; }

  /* Klebeleiste am Handy: Ort in Zeile 1 (gekürzt), „Stopp n von N, Tag a–b“ immer in Zeile 2;
     das Komma dazwischen bleibt für Screenreader. Sprungziele als Menü „Springen“. */
  html[data-design="d"] .d2-perlen-ort { display: block; -webkit-line-clamp: none; }
  html[data-design="d"] .d2-perlen-ort b,
  html[data-design="d"] .d2-perlen-ort .d2-num { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-design="d"] .d2-perlen-komma { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =========================================================
   D2 REISEBUCH, TEIL 2: Praktisches (Reisezeit, Kosten, Gut zu wissen)
   und Abschluss „Nimm die Reise mit“.
   Markup: js/results.js (_d2ReisezeitHtml, _renderKostenD, _d2WissenHtml,
   _layoutFinaleD, _d2CoverVorschau, _d2BuchenVorschau).
   ========================================================= */

/* --- Hinweis „Bevor du buchst“ nach dem Buch: ruhige Zeile statt Kasten --- */
html[data-design="d"] #bplan-teaser { margin-top: 32px; margin-bottom: 0; }
html[data-design="d"] .bplan-teaser-btn {
  display: grid; gap: 2px; width: 100%; box-sizing: border-box;
  padding: 14px 0; margin: 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); border-radius: 0; box-shadow: none;
  font: inherit; color: var(--d-tinte);
}
html[data-design="d"] .bplan-teaser-btn:hover { background: none; border-color: var(--d-line); }
html[data-design="d"] .bplan-teaser-btn:hover .bplan-teaser-t { color: var(--d-laub); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
html[data-design="d"] .bplan-teaser-btn:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .bplan-teaser-k { font-size: 13.5px; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); }
html[data-design="d"] .bplan-teaser-t { font-size: 16px; font-weight: 620; line-height: 1.4; color: var(--d-tinte); }
html[data-design="d"] .bplan-teaser-d { font-size: 14px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .bplan-teaser-d [aria-hidden="true"] { display: none; }

/* --- Praktisches: eigener Bereich auf Sandstein, ohne Opener und Kapitel-Leiste --- */
html[data-design="d"] .handbook { background: var(--d-grund); border-top: 1px solid var(--d-line-stark); margin: var(--d-a8) 0 0; padding: 0; }
html[data-design="d"] .handbook::after { content: none; display: none; }
html[data-design="d"] .handbook .hb-open,
html[data-design="d"] #handbuch-bar-slot { display: none; }
html[data-design="d"] .handbook .handbook-inner {
  max-width: 1440px; margin: 0 auto; box-sizing: border-box;
  padding: 96px var(--d-seite) 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 72px; row-gap: var(--d-abschnitt); align-items: start;
}
html[data-design="d"] .handbook-inner > #season-container { grid-column: 1; }
html[data-design="d"] .handbook-inner > #budget-container { grid-column: 2; }
html[data-design="d"] .handbook-inner:has(> #season-container:empty) > #budget-container { grid-column: 1; }
html[data-design="d"] .handbook-inner > #booking-links-container,
html[data-design="d"] .handbook-inner > #travelinfo-container { grid-column: 1 / -1; }
/* „Beste Zeit nach Landesteil“ (results.js _d2RegionenVerlegen): über beide Spalten unter
   Reisezeit und Kosten, 64 px darunter statt des Abschnittsabstands */
html[data-design="d"] .handbook-inner > #d2-regionen-zone { grid-column: 1 / -1; margin-top: calc(var(--d-a8) - var(--d-abschnitt)); }
html[data-design="d"] #d2-regionen-zone .d2-prak-h3 { margin-top: 0; }
/* Sprungziele (Klebeleiste) fokussieren die Überschrift; kein Ring um die Überschrift */
html[data-design="d"] .handbook h2[tabindex="-1"]:focus,
html[data-design="d"] .finale-zone h2[tabindex="-1"]:focus { outline: none; }
html[data-design="d"] .handbook-inner > :empty { display: none; }
html[data-design="d"] #season-container,
html[data-design="d"] #budget-container,
html[data-design="d"] #travelinfo-container,
html[data-design="d"] #finale-card { scroll-margin-top: calc(var(--header-h, 72px) + 64px); }
html[data-design="d"] #route-adjust-container { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
html[data-design="d"] #optionb-stops { scroll-margin-top: var(--header-h, 56px); }
/* Bis 1024 px steht der Feinschliff nach dem Buch, also unter der Kapitelleiste (49 px): Der Sprung
   dorthin landete 21 px unter ihr (Handy, 15.10.2026) */
@media (max-width: 1024px) {
  html[data-design="d"] #route-adjust-container { scroll-margin-top: calc(var(--header-h, 56px) + 64px); }
}
html[data-design="d"] #step-5 > .container.d2-leer { display: none; }

/* Verkehrsmittel unter der Karte (Results._kartenMittelZeile): nur wenn eines der Route auf der
   Karte kein Symbol hat, dann alle, wie im Teilen-Bild */
html[data-design="d"] .d2-karten-mittel {
  margin: 10px 0 0; padding: 0 var(--d-seite);
  font-size: 15px; line-height: 22px; color: var(--d-tinte-hell);
}
html[data-design="d"] .d2-karten-mittel[hidden] { display: none; }
html[data-design="d"] .d2-km-m { display: inline-flex; align-items: center; gap: 5px; color: var(--d-tinte); font-weight: 600; white-space: nowrap; }
html[data-design="d"] .d2-km-m svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 1025px) {
  html[data-design="d"] .d2-karten-mittel { margin-top: 6px; padding: 0; font-size: 14px; line-height: 18px; }
}

/* --- Kapitelleiste nach dem Buch (results.js _d2Kapitelleiste): fest unter dem Kopf,
   das aktuelle Kapitel links, rechts die übrigen (Desktop) bzw. das Menü „Inhalt“ --- */
html[data-design="d"] .d2-kl {
  position: fixed; left: 0; right: 0; top: var(--header-h, 56px); z-index: 30;
  background: var(--d-grund); border-bottom: 1px solid var(--d-line);
}
html[data-design="d"] .d2-kl[hidden] { display: none; }
html[data-design="d"] .d2-kl-innen {
  display: flex; align-items: center; gap: 16px; box-sizing: border-box;
  max-width: 1440px; min-height: 52px; margin: 0 auto; padding: 4px var(--d-seite);
}
html[data-design="d"] .d2-kl-ort {
  flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.25; font-weight: 680;
  color: var(--d-tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-design="d"] .d2-kl-ziele { display: flex; flex: none; gap: 24px; margin: 0; font-size: 15px; }
html[data-design="d"] .d2-kl-ziele a {
  padding: 12px 0; line-height: 20px; white-space: nowrap; 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"] .d2-kl-ziele a:hover { text-decoration-color: currentColor; }
html[data-design="d"] .d2-kl-ziele a[aria-current] { color: var(--d-tinte); font-weight: 700; text-decoration-color: var(--d-tinte); text-decoration-thickness: 2px; }
html[data-design="d"] .d2-kl-ziele a:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; border-radius: 2px; }
@media (min-width: 1025px) {
  html[data-design="d"] .d2-kl-ort { display: none; }
}
@media (max-width: 1024px) {
  html[data-design="d"] .d2-kl-ziele { display: none; }
  html[data-design="d"] .d2-kl-innen { min-height: 48px; padding: 2px var(--d-seite); }
}

/* --- Feinschliff (results.js _d2FeinschliffRender): Kapitelkopf, zwei Wege als Liste wie die
   Werkzeuge am Seitenende (Symbol, Titel, Erklärung), darunter der Freitext --- */
html[data-design="d"] #step-5 .route-adjust-section.d2-fs .d2-fs-h { margin: 0; }
html[data-design="d"] .d2-fs-wege { margin: 18px 0 0; border-top: 1px solid var(--d-line-stark); }
html[data-design="d"] .d2-fs-weg {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center;
  width: 100%; margin: 0; padding: 14px 0; box-sizing: border-box;
  background: none; border: 0; border-bottom: 1px solid var(--d-line); border-radius: 0;
  font: inherit; color: var(--d-tinte); text-align: left; cursor: pointer;
}
html[data-design="d"] .d2-fs-ico {
  width: 36px; height: 36px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--d-line-stark); color: var(--d-tinte);
}
html[data-design="d"] .d2-fs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-design="d"] .d2-fs-t { font-size: 16px; line-height: 1.3; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-fs-d { font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); text-wrap: pretty; }
html[data-design="d"] .d2-fs-weg:hover .d2-fs-t { color: var(--d-laub); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
html[data-design="d"] .d2-fs-weg:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; border-radius: 4px; }
html[data-design="d"] .d2-fs .wb-editing { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--d-line); font-size: 15px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] #step-5 .d2-fs .wb-way--text { margin-top: 28px; padding-top: 0; border-top: 0; }

html[data-design="d"] .d2-prak-h {
  margin: 0; font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); font-weight: var(--d-fw-kapitel);
  letter-spacing: var(--d-track-kapitel); color: var(--d-tinte); text-wrap: balance;
}
html[data-design="d"] .d2-prak-satz { margin: 14px 0 0; max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--d-tinte); text-wrap: pretty; }
html[data-design="d"] .d2-prak-h3 { margin: 44px 0 0; font-size: 17px; line-height: 1.35; font-weight: 640; color: var(--d-tinte); }

/* Monatsband: Hauptreisezeit Tinte, Schulter schraffiert, Neben Kiesel; Reise umrandet */
html[data-design="d"] .d2-monatsband {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 30px auto;
  column-gap: 3px; row-gap: 6px; margin: 28px 0 0;
}
html[data-design="d"] .d2-mb-reise { grid-row: 1; justify-self: start; margin-left: -1px; font-size: 13px; line-height: 1.2; font-weight: 620; color: var(--d-tinte); white-space: nowrap; }
html[data-design="d"] .d2-mb-feld { grid-row: 2; display: block; border-radius: 3px; background: var(--d-kiesel); box-shadow: inset 0 0 0 1px var(--d-kiesel-tief); }
html[data-design="d"] .d2-mb-feld.is-hi { background: var(--d-tinte); box-shadow: none; }
html[data-design="d"] .d2-mb-feld.is-mid { background: repeating-linear-gradient(-45deg, var(--d-tinte) 0 2px, transparent 2px 6px), var(--d-kiesel); box-shadow: none; }
html[data-design="d"] .d2-mb-rahmen { grid-row: 2; margin: -4px -3px; border: 2px solid var(--d-tinte); border-radius: 6px; pointer-events: none; }
html[data-design="d"] .d2-mb-mon { grid-row: 3; margin-top: 2px; text-align: center; font-size: 12.5px; line-height: 1.2; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-mb-mon.is-reise { color: var(--d-tinte); font-weight: 640; }
html[data-design="d"] .d2-mb-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--d-tinte); }
html[data-design="d"] .d2-mb-legende span { display: inline-flex; align-items: center; gap: 7px; }
html[data-design="d"] .d2-mb-legende i { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background: var(--d-kiesel); box-shadow: inset 0 0 0 1px var(--d-kiesel-tief); }
html[data-design="d"] .d2-mb-legende i.is-hi { background: var(--d-tinte); box-shadow: none; }
html[data-design="d"] .d2-mb-legende i.is-mid { background: repeating-linear-gradient(-45deg, var(--d-tinte) 0 2px, transparent 2px 6px), var(--d-kiesel); box-shadow: none; }
html[data-design="d"] .d2-mb-legende i.is-reise { background: transparent; box-shadow: inset 0 0 0 2px var(--d-tinte); }

/* Klimadiagramm (js/climate-chart.js, Preset result-narrow): Schrift der Seite */
html[data-design="d"] .d2-klima { margin: 40px 0 0; }
html[data-design="d"] .d2-klima .climate-chart { max-width: 500px; font-family: inherit !important; }
html[data-design="d"] .d2-klima .climate-legend { font-family: inherit !important; max-width: 560px; }

/* In deiner Reisezeit */
html[data-design="d"] .d2-ereignisse { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 16px; }
html[data-design="d"] .d2-ereignisse > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
html[data-design="d"] .d2-ereignis-ico { color: var(--d-tinte); padding-top: 1px; }
html[data-design="d"] .d2-ereignis-ico svg { display: block; width: 18px; height: 18px; }
html[data-design="d"] .d2-ereignis-t { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--d-tinte); }
html[data-design="d"] .d2-ereignis-t b { font-weight: 620; }
html[data-design="d"] .d2-ereignis-t span { font-size: 14px; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-ereignisse > li p:not(.d2-ereignis-t) { margin: 3px 0 0; max-width: 60ch; font-size: 14.5px; line-height: 1.5; color: var(--d-tinte); }

/* Beste Zeit nach Landesteil: Name, Mini-Monatsband, Monate */
html[data-design="d"] .d2-regionen-hinweis { margin: 6px 0 0; max-width: 60ch; font-size: 14.5px; line-height: 1.5; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-regionen { list-style: none; margin: 12px 0 0; padding: 0; }
html[data-design="d"] .d2-regionen > li {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; column-gap: 16px; row-gap: 3px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--d-line);
}
html[data-design="d"] .d2-region-name { font-size: 15.5px; line-height: 1.35; font-weight: 620; color: var(--d-tinte); }
html[data-design="d"] .d2-region-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-self: center; }
html[data-design="d"] .d2-region-band i { position: relative; display: block; height: 8px; border-radius: 1.5px; background: var(--d-kiesel); box-shadow: inset 0 0 0 1px var(--d-kiesel-tief); }
html[data-design="d"] .d2-region-band i.is-gut { background: var(--d-tinte); box-shadow: none; }
html[data-design="d"] .d2-region-band i.is-reise::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -5px; height: 2px; border-radius: 1px; background: var(--d-tinte); }
html[data-design="d"] .d2-region-mo { font-size: 14.5px; line-height: 1.35; color: var(--d-tinte); text-align: right; white-space: nowrap; }
html[data-design="d"] .d2-regionen small { grid-column: 1 / -1; max-width: 62ch; font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }
@media (min-width: 1025px) {
  /* volle Breite: Name | Mini-Band | Monate | erster Satz in einer Zeile */
  html[data-design="d"] #d2-regionen-zone .d2-regionen > li { grid-template-columns: 260px 132px 172px minmax(0, 1fr); column-gap: 28px; }
  html[data-design="d"] #d2-regionen-zone .d2-region-mo { text-align: left; white-space: normal; }
  html[data-design="d"] #d2-regionen-zone .d2-regionen small { grid-column: 4; grid-row: 1; max-width: none; font-size: 14px; }
}

/* Kosten: Summe, Balken in Tintenstufen (Puffer schraffiert), Posten, Gesamt */
html[data-design="d"] .d2-summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 18px 0 0; }
html[data-design="d"] .d2-summe strong {
  font-size: var(--d-fs-betrag); line-height: var(--d-lh-betrag); font-weight: var(--d-fw-betrag);
  letter-spacing: var(--d-track-betrag); color: var(--d-tinte); white-space: nowrap;
}
html[data-design="d"] .d2-summe span { font-size: 17px; line-height: 1.4; color: var(--d-tinte); }
html[data-design="d"] .d2-summe-pp { margin: 8px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-balken { display: flex; gap: 2px; height: 14px; margin: 26px 0 0; border-radius: 3px; overflow: hidden; }
html[data-design="d"] .d2-balken i { display: block; flex: 1 1 0; min-width: 4px; height: 100%; }
html[data-design="d"] .d2-balken i.is-puffer,
html[data-design="d"] .d2-feld.is-puffer { background-image: repeating-linear-gradient(-45deg, rgba(var(--d-tinte-rgb), .45) 0 1.5px, transparent 1.5px 5px); }
html[data-design="d"] .d2-posten { list-style: none; margin: 18px 0 0; padding: 0; }
html[data-design="d"] .d2-posten > li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 3px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--d-line);
}
html[data-design="d"] .d2-feld { display: block; width: 12px; height: 12px; border-radius: 2px; align-self: center; }
html[data-design="d"] .d2-posten b { font-size: 16px; line-height: 1.35; font-weight: 620; color: var(--d-tinte); }
html[data-design="d"] .d2-pct { min-width: 3.4em; text-align: right; font-size: 13.5px; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-betrag { min-width: 5.2em; text-align: right; font-size: 16.5px; font-weight: 640; color: var(--d-tinte); white-space: nowrap; }
html[data-design="d"] .d2-posten small { grid-column: 2 / -1; max-width: 56ch; font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-gesamt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0; padding: 14px 0 0; border-top: 1.5px solid var(--d-tinte);
  font-size: 16px; line-height: 1.35; font-weight: 640; color: var(--d-tinte);
}
html[data-design="d"] .d2-gesamt strong { font-size: 20px; font-weight: 700; white-space: nowrap; }
html[data-design="d"] .d2-annahmen { margin: 24px 0 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); border-radius: 0; }
html[data-design="d"] .d2-annahmen > .d2-aufklapp,
html[data-design="d"] .d2-aufklapp {
  list-style: none; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 0; box-sizing: border-box; margin: 0;
  font-size: 15.5px; font-weight: 620; line-height: 1.3; color: var(--d-tinte); cursor: pointer;
  background: none; border: 0;
}
html[data-design="d"] .d2-aufklapp::-webkit-details-marker { display: none; }
html[data-design="d"] .d2-aufklapp::marker { content: ""; }
html[data-design="d"] .d2-aufklapp::after { content: none; display: none; }
html[data-design="d"] .d2-aufklapp:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
html[data-design="d"] .d2-aufklapp:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; border-radius: 4px; }
html[data-design="d"] .d2-annahmen[open] .d2-plan-chev { transform: rotate(90deg); }
html[data-design="d"] .d2-annahmen .budget-assumptions-body { padding: 0 0 18px; margin: 0; background: none; border: 0; }
html[data-design="d"] .d2-annahmen .ba-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] .d2-annahmen .ba-list { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; }
html[data-design="d"] .d2-annahmen .ba-list dt { margin: 0; font-size: 14.5px; font-weight: 620; color: var(--d-tinte); }
html[data-design="d"] .d2-annahmen .ba-list dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] .d2-annahmen .ba-out { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-annahmen .ba-out strong { color: var(--d-tinte); font-weight: 620; }
html[data-design="d"] .d2-kosten-hinweis { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }

/* Gut zu wissen: nur geprüfte Almanac-Fakten, drei Spalten, ohne Kästen */
html[data-design="d"] .d2-fakten-raster { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
html[data-design="d"] .d2-fakt { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-content: start; padding-top: 14px; border-top: 1.5px solid var(--d-tinte); }
html[data-design="d"] .d2-fakt-ico { grid-row: span 2; color: var(--d-tinte); padding-top: 2px; }
html[data-design="d"] .d2-fakt-ico svg { display: block; width: 22px; height: 22px; }
html[data-design="d"] .d2-fakt h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-fakt-fazit { margin: 1px 0 0; font-size: 14px; line-height: 1.35; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-fakt > p:not(.d2-fakt-fazit),
html[data-design="d"] .d2-fakt-nummern { grid-column: 1 / -1; margin: 10px 0 0; font-size: 15px; line-height: 1.58; color: var(--d-tinte); }
html[data-design="d"] .d2-fakt-nummern div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--d-line); }
html[data-design="d"] .d2-fakt-nummern dt { margin: 0; color: var(--d-tinte); }
html[data-design="d"] .d2-fakt-nummern dd { margin: 0; font-weight: 640; color: var(--d-tinte); white-space: nowrap; }
/* Aufklappbare Karten (19.10.2026): Kopf wie die übrigen Karten (Symbol, Titel, Antwort), Text darunter in voller Breite.
   Am Handy zugeklappt wie die Länderfakten im Porträt, am Desktop offen; zugeklappt trägt der Kopf den Winkel. */
html[data-design="d"] .d2-fakt--auf { display: block; }
html[data-design="d"] .d2-fakt-auf > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; list-style: none; cursor: default; }
html[data-design="d"] .d2-fakt-auf > summary::-webkit-details-marker { display: none; }
html[data-design="d"] .d2-fakt-auf .d2-fakt-fazit { display: block; }
html[data-design="d"] .d2-fakt-auf > p { margin: 10px 0 0; font-size: 15px; line-height: 1.58; color: var(--d-tinte); }
html[data-design="d"] .d2-fakt-auf:not([open]) > summary { position: relative; padding-right: 34px; cursor: pointer; }
html[data-design="d"] .d2-fakt-auf:not([open]) > summary::after { content: ""; position: absolute; right: 6px; top: 50%; margin-top: -8px; width: 9px; height: 9px; border-right: 2px solid var(--d-tinte); border-bottom: 2px solid var(--d-tinte); transform: rotate(45deg); }
@media (max-width: 768px) {
  html[data-design="d"] .d2-fakt-auf > summary { position: relative; padding-right: 34px; cursor: pointer; }
  html[data-design="d"] .d2-fakt-auf[open] > summary::after { content: ""; position: absolute; right: 6px; top: 50%; margin-top: -3px; width: 9px; height: 9px; border-right: 2px solid var(--d-tinte); border-bottom: 2px solid var(--d-tinte); transform: rotate(225deg); }
}
html[data-design="d"] .d2-fakt-auf > summary:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 4px; border-radius: 2px; }
/* Notrufnummern als Anruf-Link (results.js _d2WissenHtml): unterstrichen, damit man sie antippt */
html[data-design="d"] .d2-tel { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(var(--d-laub-rgb), .45); }
html[data-design="d"] .d2-tel:hover { color: var(--d-laub); text-decoration-color: currentColor; }
html[data-design="d"] .d2-wissen-stand { margin: 28px 0 0; max-width: 92ch; font-size: 13.5px; line-height: 1.55; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-wissen-stand .d2-link { font-size: 14.5px; margin-left: 4px; }
html[data-design="d"] .d2-hinweise { margin: 0; }
html[data-design="d"] .d2-hinweise + .d2-wissen { margin-top: 72px; }
html[data-design="d"] .d2-hinweise-ki { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-hinweise-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
html[data-design="d"] .d2-hinweise-liste > li { padding-top: 12px; border-top: 1px solid var(--d-line); }
html[data-design="d"] .d2-hinweise-liste h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-hinweise-liste p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--d-tinte); }

/* --- Werkbank „Feinschliff“ zwischen Buch und Praktischem: wie das Buch ausgerichtet,
   ohne Kasten (der Kalk-Grund kam aus dem Generator, gemeint war „nur Hairlines“) --- */
html[data-design="d"] #step-5 > .container:has(> #route-adjust-container) { max-width: none; margin: 0; padding: 0; }
html[data-design="d"] #step-5 .route-adjust-section {
  max-width: none; margin: 72px 0 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; animation: none;
}
html[data-design="d"] #step-5 .route-adjust-section .util-head { margin: 0; }
html[data-design="d"] #step-5 .route-adjust-section .util-head span {
  font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: var(--d-fw-zwischen);
  letter-spacing: var(--d-track-zwischen); text-transform: none; white-space: normal; color: var(--d-tinte);
}
html[data-design="d"] #step-5 .route-adjust-subtitle { margin: 6px 0 14px; max-width: 60ch; font-size: 15.5px; line-height: 1.5; color: var(--d-tinte); }
@media (min-width: 1025px) {
  html[data-design="d"] #step-5 > .container:has(> #route-adjust-container) {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 40vw, 600px); column-gap: 56px; padding-left: var(--d-seite);
  }
  html[data-design="d"] #route-adjust-container { grid-column: 1; justify-self: center; width: 100%; max-width: 760px; }
}
@media (max-width: 1024px) {
  html[data-design="d"] #route-adjust-container { padding: 0 var(--d-seite); }
}
/* Ziel-Vorschläge in der Werkbank: Etiketten ohne Versalien, Geheimtipp lesbar (Tinte statt
   Gold → Tinte hell, 2,15:1), Themen-Chips in Kiesel statt Fjord (Fjord nur für Wasser),
   Knopf mit Radius 10, Karte ohne Schwebeschatten und ohne Hüpfen */
html[data-design="d"] #step-5 .suggestion-card { border: 0; border-radius: var(--d-r-flaeche); box-shadow: none; }
html[data-design="d"] #step-5 .suggestion-card:hover { border-color: transparent; box-shadow: none; transform: none; }
html[data-design="d"] #step-5 .suggestion-pill { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; background: rgba(var(--d-flaeche-rgb), .92); color: var(--d-tinte); }
html[data-design="d"] #step-5 .suggestion-pill-offbeat { background: var(--d-tinte); color: var(--d-flaeche); }
html[data-design="d"] #step-5 .suggestion-meta { font-family: inherit; font-size: 13px; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); }
html[data-design="d"] #step-5 .suggestion-name { font-family: inherit; font-size: 22px; font-weight: 660; letter-spacing: -0.01em; color: var(--d-tinte); }
html[data-design="d"] #step-5 .suggestion-reason { font-size: 15px; color: var(--d-tinte); }
html[data-design="d"] #step-5 .suggestion-tag { font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; background: var(--d-kiesel); color: var(--d-tinte); }
html[data-design="d"] #step-5 .suggestion-accept-btn { border-radius: var(--d-r-ui); min-height: 44px; padding: 0 18px; background: var(--d-laub); color: #fff; font-family: inherit; font-size: 15px; letter-spacing: 0; }
html[data-design="d"] #step-5 .suggestion-accept-btn:hover { background: var(--d-laub-tief); box-shadow: none; transform: none; }
html[data-design="d"] #step-5 .suggestion-accept-btn:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }

/* --- Familien-Check (nur Reisegruppe Familie): wie das Buch ausgerichtet, ohne Kicker.
   Ampel ohne Grün: --terracotta zeigt in D auf Laub, „nicht geeignet“ wäre sonst grün.
   Geeignet Tinte (voll), Hinweis Tinte hell (Ring), nicht geeignet Signalrot. --- */
@media (min-width: 1025px) {
  html[data-design="d"] #step-5 > .container:has(> .optionb-layout) > #family-container:not(:empty) {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 40vw, 600px); column-gap: 56px;
    max-width: none; margin: 0; padding: 0 0 0 var(--d-seite);
  }
  html[data-design="d"] #family-container > .fam-section { grid-column: 1; justify-self: center; width: 100%; max-width: 760px; }
}
html[data-design="d"] .fam-section { margin: 72px 0 0; }
html[data-design="d"] .fam-section .travelinfo-kicker { display: none; }
html[data-design="d"] .fam-section .travelinfo-title-h { margin: 0 0 12px; font-family: inherit; font-size: 28px; line-height: 1.15; font-weight: 680; letter-spacing: -0.018em; color: var(--d-tinte); }
html[data-design="d"] .fam-rating { font-family: inherit; font-size: 13px; font-weight: 620; letter-spacing: 0; text-transform: none; padding: 2px 10px; background: transparent; border: 1.5px solid currentColor; }
html[data-design="d"] .fam-rating--gruen { background: transparent; color: var(--d-tinte); }
html[data-design="d"] .fam-rating--gelb { background: transparent; color: var(--d-tinte-hell); }
html[data-design="d"] .fam-rating--rot { background: transparent; color: var(--d-fehler); }
html[data-design="d"] .fam-lead p { font-family: inherit; font-size: 15.5px; color: var(--d-tinte); }
html[data-design="d"] .fam-stops,
html[data-design="d"] .fam-prep-col { background: var(--d-flaeche); border: 0; border-radius: var(--d-r-flaeche); box-shadow: none; }
html[data-design="d"] .fam-stops-h { font-family: inherit; font-size: 14px; font-weight: 640; letter-spacing: 0; text-transform: none; color: var(--d-tinte); }
html[data-design="d"] .fam-klar-ico { color: var(--d-tinte); }
html[data-design="d"] .fam-stops--klar p { font-family: inherit; font-size: 15px; color: var(--d-tinte); }
html[data-design="d"] .fam-stop-tx b { font-family: inherit; font-weight: 640; }
html[data-design="d"] .fam-stop--green .fam-stop-dot { background: var(--d-tinte); }
html[data-design="d"] .fam-stop--yellow .fam-stop-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--d-tinte-hell); }
html[data-design="d"] .fam-stop--red .fam-stop-dot { background: var(--d-fehler); }
html[data-design="d"] .fam-stop--red .fam-stop-lab { color: var(--d-fehler); }
html[data-design="d"] .fam-stop-lab,
html[data-design="d"] .fam-prep-col h4 { font-family: inherit; font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); }
html[data-design="d"] .fam-prep-col h4 { font-size: 14px; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .fam-prep-col li,
html[data-design="d"] .fam-prep-col p { font-family: inherit; font-size: 15px; color: var(--d-tinte); }

/* --- Abschluss „Nimm die Reise mit“: Kalk-Band, drei Formen, Werkzeugzeile --- */
html[data-design="d"] .finale-zone { background: var(--d-flaeche); color: var(--d-tinte); border-top: 0; margin: 0; padding: 88px 0 96px; }
html[data-design="d"] .finale-zone > .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--d-seite); box-sizing: border-box; }
html[data-design="d"] .finale-zone .fz-grid.d2-alt { display: none; }
html[data-design="d"] .d2-ab-titel {
  margin: 0; font-size: var(--d-fs-titel); line-height: var(--d-lh-titel); font-weight: var(--d-fw-titel);
  letter-spacing: var(--d-track-titel); font-variation-settings: var(--d-shrp-titel); color: var(--d-tinte);
}
html[data-design="d"] .d2-ab-satz { margin: 12px 0 0; max-width: 54ch; font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--d-tinte); }
html[data-design="d"] .d2-ab-raster { display: grid; grid-template-columns: 1.25fr 1fr 1fr; column-gap: 56px; row-gap: 48px; margin: 48px 0 0; align-items: start; }
html[data-design="d"] .d2-ab-raster.d2-ohne-buchen { grid-template-columns: 1fr 1fr; }
html[data-design="d"] .d2-ab-block { position: relative; min-width: 0; }
html[data-design="d"] .d2-ab-block[hidden] { display: none; }
html[data-design="d"] .d2-ab-block:not([hidden]) ~ .d2-ab-block::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 1px; background: var(--d-line); }
html[data-design="d"] .d2-ab-block h3 { margin: 0; font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: var(--d-fw-zwischen); letter-spacing: var(--d-track-zwischen); color: var(--d-tinte); }
html[data-design="d"] .d2-ab-zweck { margin: 6px 0 0; max-width: 42ch; font-size: 15px; line-height: 1.5; color: var(--d-tinte); }

/* (a) Buchen und vorbereiten: Vorschau der Liste, nur lesen */
html[data-design="d"] .d2-ab-zaehler { margin: 14px 0 0; font-size: 15px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-ab-zaehler b { font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-ab-buchen h4 { margin: 20px 0 0; font-size: 14.5px; line-height: 1.35; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .d2-ab-liste { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--d-line-stark); }
html[data-design="d"] .d2-ab-liste > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--d-line); }
html[data-design="d"] .d2-ab-check { position: relative; display: block; width: 44px; height: 44px; margin: -12px 0 -12px -13px; cursor: pointer; }
html[data-design="d"] .d2-ab-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-design="d"] .d2-ab-box { position: absolute; left: 13px; top: 14px; display: block; width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid var(--d-feldrand); background: var(--d-flaeche); pointer-events: none; }
html[data-design="d"] .d2-ab-check:hover .d2-ab-box { border-color: var(--d-tinte); }
html[data-design="d"] .d2-ab-check input:checked + .d2-ab-box { background: var(--d-tinte); border-color: var(--d-tinte); }
html[data-design="d"] .d2-ab-check input:checked + .d2-ab-box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--d-flaeche); border-width: 0 2px 2px 0; transform: rotate(45deg); }
html[data-design="d"] .d2-ab-check input:focus-visible + .d2-ab-box { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .d2-ab-liste > li.is-erledigt .d2-ab-zeile { color: var(--d-tinte-hell); }
html[data-design="d"] .d2-ab-zeile { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--d-tinte); }
html[data-design="d"] .d2-ab-liste small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-marke { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: var(--d-r-rund); font-size: 12px; line-height: 18px; font-weight: 640; vertical-align: 1px; }
html[data-design="d"] .d2-marke.is-pflicht { background: var(--d-tinte); color: var(--d-flaeche); border: 1.5px solid var(--d-tinte); }
html[data-design="d"] .d2-marke.is-empfohlen { background: transparent; color: var(--d-tinte); border: 1.5px solid var(--d-rand); font-weight: 560; }
html[data-design="d"] .d2-ab-mehr { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-ab-bu-inhalt { display: contents; }
html[data-design="d"] .d2-ab-liste-knopf { margin-top: 20px; padding: 0 22px; }
html[data-design="d"] .d2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* (b) PDF-Reiseführer: Titelblatt-Vorschau (A4) und Umfang */
html[data-design="d"] .d2-ab-pdf-reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin: 20px 0 0; }
html[data-design="d"] .d2-cover { flex: 0 0 132px; margin: 0; }
html[data-design="d"] .d2-cover[hidden] { display: none; }
/* Untergrund dunkel in beiden Modi (--d-band): Die Schrift ist weiß, auch wenn das Foto fehlt */
html[data-design="d"] .d2-cover-blatt { position: relative; width: 132px; height: 187px; overflow: hidden; border-radius: 3px; background: var(--d-band); box-shadow: 0 0 0 1px var(--d-line); }
html[data-design="d"] .d2-cover-blatt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-design="d"] .d2-cover-blatt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; background: linear-gradient(rgba(30, 24, 20, .5), rgba(30, 24, 20, 0)); }
html[data-design="d"] .d2-cover-blatt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(rgba(30, 24, 20, 0), rgba(30, 24, 20, .84)); }
html[data-design="d"] .d2-cover-marke { position: absolute; left: 10px; top: 9px; z-index: 2; font-size: 10.5px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
html[data-design="d"] .d2-cover-text { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; color: #FFFFFF; }
html[data-design="d"] .d2-cover-text b { display: block; font-size: 13px; line-height: 1.15; font-weight: 650; }
html[data-design="d"] .d2-cover-text small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.2; }
html[data-design="d"] #step-5 .d2-cover .d2-quelle { margin-top: 6px; }
html[data-design="d"] .d2-ab-pdf-wahl { flex: 1 1 200px; min-width: 0; }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-options { display: flex; flex-direction: column; gap: 8px; margin: 0; max-width: none; }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt {
  position: relative; display: block; margin: 0; padding: 10px 12px 10px 40px;
  background: var(--d-flaeche); border: 1.5px solid var(--d-line-stark); border-radius: var(--d-r-ui); box-shadow: none; cursor: pointer;
}
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt::before {
  content: ""; position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--d-feldrand); background: var(--d-flaeche);
}
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt:hover { background: var(--d-flaeche-2); border-color: var(--d-rand); }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt:has(input:checked) { background: var(--d-laub-blass); border-color: var(--d-laub); }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt:has(input:checked)::before { border: 5px solid var(--d-laub); }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt:has(input:focus-visible) { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt-text { display: block; }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt-badge { display: none; }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt-title { display: block; font-family: inherit; font-size: 15px; line-height: 1.35; font-weight: 620; color: var(--d-tinte); }
html[data-design="d"] .finale-zone .d2-ab .finale-pdf-opt-meta { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .finale-zone .d2-ab .finale-cta-row { display: flex; margin: 14px 0 0; }
html[data-design="d"] .finale-zone .d2-ab .finale-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: transparent; color: var(--d-tinte); border: 1.5px solid var(--d-rand); border-radius: var(--d-r-ui); box-shadow: none;
  font-family: inherit; font-size: 15px; font-weight: 560; letter-spacing: 0; cursor: pointer;
}
html[data-design="d"] .finale-zone .d2-ab .finale-cta:hover { background: var(--d-kiesel); color: var(--d-tinte); }
html[data-design="d"] .finale-zone .d2-ab .finale-cta:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .finale-zone .d2-ab .finale-meta { display: none; }

/* (c) Teilen */
html[data-design="d"] .d2-ab-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
html[data-design="d"] .d2-ab-knoepfe .d2-zweitknopf svg { flex: none; }

/* Werkzeugzeile: Speichern, Kalender, Für unterwegs, Packliste, Reise-Almanac (ohne Pfeile) */
html[data-design="d"] .d2-werkzeuge { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; margin: 64px 0 0; border-top: 1px solid var(--d-line-stark); }
html[data-design="d"] .d2-werkzeuge .fz-action {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  min-height: 44px; padding: 18px 0 4px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--d-tinte);
}
html[data-design="d"] .d2-werkzeuge .fz-ico { width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--d-line-stark); background: none; color: var(--d-tinte); }
html[data-design="d"] .d2-werkzeuge .fz-ico svg { width: 16px; height: 16px; }
html[data-design="d"] .d2-werkzeuge .fz-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html[data-design="d"] .d2-werkzeuge .finale-act-t { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--d-tinte); }
html[data-design="d"] .d2-werkzeuge .finale-act-d { font-size: 13px; line-height: 1.35; color: var(--d-tinte-hell); }
html[data-design="d"] .d2-werkzeuge .fz-arrow { display: none; }
html[data-design="d"] .d2-werkzeuge .fz-action:hover .finale-act-t { color: var(--d-laub); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
html[data-design="d"] .d2-werkzeuge .fz-action:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; border-radius: 4px; }
html[data-design="d"] .d2-werkzeuge .fz-action.is-saved .fz-ico { border-color: var(--d-tinte); background: var(--d-tinte); color: var(--d-flaeche); }
html[data-design="d"] .d2-werkzeuge .fz-action.is-saved .finale-act-t { color: var(--d-tinte); }
html[data-design="d"] .finale-zone .rfb { margin-top: 56px; }

/* --- Gestapelt (≤1024): Praktisches und Abschluss einspaltig --- */
@media (max-width: 1024px) {
  html[data-design="d"] .handbook .handbook-inner { grid-template-columns: minmax(0, 1fr); }
  html[data-design="d"] .handbook-inner > #season-container,
  html[data-design="d"] .handbook-inner > #budget-container { grid-column: 1; }
  /* einspaltig: Landesteile direkt nach der Reisezeit, dann Kosten und der Rest */
  html[data-design="d"] .handbook-inner > * { order: 4; }
  html[data-design="d"] .handbook-inner > #season-container { order: 1; }
  html[data-design="d"] .handbook-inner > #d2-regionen-zone { order: 2; margin-top: calc(40px - var(--d-abschnitt)); }
  html[data-design="d"] .handbook-inner > #budget-container { order: 3; }
  html[data-design="d"] .d2-ab-raster,
  html[data-design="d"] .d2-ab-raster.d2-ohne-buchen { grid-template-columns: minmax(0, 1fr); }
  html[data-design="d"] .d2-ab-block:not([hidden]) ~ .d2-ab-block::before { top: -24px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  html[data-design="d"] .d2-werkzeuge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Handy (≤768) --- */
@media (max-width: 768px) {
  html[data-design="d"] .handbook { margin-top: var(--d-a7); }
  html[data-design="d"] .handbook .handbook-inner { padding: 64px var(--d-seite) 56px; }
  html[data-design="d"] .d2-prak-satz { font-size: 16px; }
  html[data-design="d"] .d2-prak-h3 { margin-top: 36px; }
  html[data-design="d"] .d2-monatsband { column-gap: 2px; }
  html[data-design="d"] .d2-mb-reise { font-size: 12.5px; }
  html[data-design="d"] .d2-mb-rahmen { margin: -4px -2px; }
  html[data-design="d"] .d2-klima .climate-chart { max-width: none; }
  html[data-design="d"] .d2-regionen > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  html[data-design="d"] .d2-region-name { grid-column: 1 / -1; }
  html[data-design="d"] .d2-region-band { max-width: 200px; width: 100%; }
  html[data-design="d"] .d2-posten > li { grid-template-columns: 12px minmax(0, 1fr) auto; }
  html[data-design="d"] .d2-pct { display: none; }
  html[data-design="d"] .d2-fakten-raster,
  html[data-design="d"] .d2-hinweise-liste { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* nur nach einem Block in derselben Spalte: Als erstes Element der Spalte kam der Abstand zum
     Rasterabstand dazu, vor „Hinweise“ standen 120 px, vor „Gut zu wissen“ 85 (Feinheiten 17.10.2026) */
  html[data-design="d"] .d2-hinweise:not(:first-child) { margin-top: 48px; }
  html[data-design="d"] .d2-annahmen .ba-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html[data-design="d"] .d2-annahmen .ba-list dd { margin-bottom: 8px; }

  html[data-design="d"] .finale-zone { padding: 64px 0 64px; }
  html[data-design="d"] .d2-ab-satz { font-size: 17px; }
  html[data-design="d"] .d2-ab-raster { margin-top: 36px; }
  html[data-design="d"] .d2-ab-liste-knopf { width: 100%; justify-content: center; }
  html[data-design="d"] .d2-werkzeuge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; margin-top: 48px; }
  html[data-design="d"] .d2-werkzeuge .fz-action { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 16px 0 4px; align-items: start; }
  html[data-design="d"] .d2-werkzeuge .fz-ico { width: 34px; height: 34px; }
  html[data-design="d"] .finale-zone .rfb { margin-top: 48px; }
}

/* =========================================================
   NACHSCHLIFF NACH DER PRÜFUNG (02.10.): Aufklapper mit Chevron vorn,
   Bearbeitungsmodus ohne Stern
   ========================================================= */
/* Dialoge „Reise teilen“ und „Als Bild teilen“: ins Fundament verschoben (Modals, design-d.css). */

/* Bearbeitungsmodus: Hauptknopf „Anwenden …“ ohne Stern-Symbol */
html[data-design="d"] .oet-btn-primary svg:has(path[d^="M12 2l1.7"]) { display: none; }

/* Werkbank: „Oder ein Ziel in der Nähe einfügen“ mit Chevron vorn wie der Tagesplan
   (zu: nach rechts, offen: nach unten), ohne runden Knopf hinten */
html[data-design="d"] #step-5 .adjust-suggest-summary { align-items: center; min-height: 44px; }
html[data-design="d"] #step-5 .adjust-suggest-toggle {
  order: -1; width: 18px; height: 18px; margin-left: 0; border-radius: 0;
  background: none; color: var(--d-tinte); transform: rotate(-90deg);
}
html[data-design="d"] #step-5 .adjust-suggest-summary:hover .adjust-suggest-toggle { background: none; }
html[data-design="d"] #step-5 .adjust-suggest[open] .adjust-suggest-toggle { transform: none; }
html[data-design="d"] #step-5 .adjust-suggest-toggle svg { width: 16px; height: 16px; }
html[data-design="d"] #step-5 .adjust-suggest-summary:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html[data-design="d"] #step-5 .adjust-suggest-toggle { transition: none; }
}

/* Kartenquelle der Ergebniskarte: Aufklapp-Zeichen vor dem Text statt dahinter */
html[data-design="d"] .result-map-wrap .leaflet-control-attribution .attrib-esri-caret::before { content: none; }
html[data-design="d"] .result-map-wrap .leaflet-control-attribution .attrib-esri::before { content: "▸"; margin-right: 4px; font-size: 9px; opacity: .7; }
html[data-design="d"] .result-map-wrap .leaflet-control-attribution .attrib-esri.open::before { content: "▾"; }

/* =========================================================
   INTEGRATION (02.10.)
   ========================================================= */
/* „Als Bild teilen“ an der Karte mit demselben Bild-Symbol wie im Abschluss
   (results.js I.bild) statt des Download-Pfeils aus index.html */
html[data-design="d"] .map-export-btn > svg { display: none; }
html[data-design="d"] .map-export-btn::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 16l4.5-4.5 4 4 2.5-2.5 5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 16l4.5-4.5 4 4 2.5-2.5 5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (max-width: 768px) {
  html[data-design="d"] .optionb-map-col .result-map-wrap .map-export-btn::before { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="d"] :where(.d2-perlen):is(.d2-perlen, .d2-perlen .d2-perlen-zeile),
  html[data-design="d"] :is(.d2-perlen .d2-perlen-zeile) { transition: none; }
}