/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3-start.css erzeugt). Regeln: routaris-design-system-b4.md */
/* =====================================================
   DESIGN-B4-START.CSS — Startseite im Design B4 (04.10.2026)

   Lädt auf der Startseite nach css/design-b4-basis.css. Aufbau und Inhalte wie
   B2 (aus css/design-b2-start.css übernommen): Hero und Band, danach die Abschnitte der
   Live-Startseite. Farben über die B4-Tokens, damit beide Modi stimmen.
   ===================================================== */

/* ---------- Satzkante ----------
   Bis 1440 px Fensterbreite der Seitenrand (56 / 32 / 18 px), darüber ein mittiger Rahmen
   von 1440 px. Alle Bereiche rechnen mit derselben Formel, damit Wortmarke, Hero-Text,
   Überschriften, Länderraster und Fußzeile auf einer Linie beginnen. */
html[data-design="d"][data-variante="b4"] { --b4-rand: var(--d-seite); }
/* Nur auf der Startseite; Schritte und Ergebnisseite laufen über die volle Breite und
   behalten den Seitenrand (sonst stünde der Kopf über Schritt 3 nicht über dem Inhalt).
   Den Schritt setzt App.showStep als data-planschritt an <html> (kein :has(), siehe design-d.css) */
/* Gesetzt an den vier Bereichen, die den Rand lesen, nicht an <html>: Ein neuer Wert an <html> erbt
   jedes Element, der Tipp auf eine Länderkachel rechnete so den Stil der ganzen Seite neu (am Handy
   rund 0,1 s, 15.10.2026). #step-0 steht danach ohnehin auf display: none. */
html[data-design="d"][data-variante="b4"][data-planschritt="0"] .site-header,
html[data-design="d"][data-variante="b4"][data-planschritt="0"] .routaris-stepper,
html[data-design="d"][data-variante="b4"][data-planschritt="0"] #step-0,
html[data-design="d"][data-variante="b4"][data-planschritt="0"] .site-footer {
  --b4-rand: max(var(--d-seite), calc((100vw - 1440px) / 2 + var(--d-seite)));
}
html[data-design="d"][data-variante="b4"] .site-header .container { padding-left: var(--b4-rand); padding-right: var(--b4-rand); }
html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-trail { padding-left: calc(var(--b4-rand) - 2px); padding-right: var(--b4-rand); }
html[data-design="d"][data-variante="b4"] #step-0 .lp-section { padding-left: var(--b4-rand); padding-right: var(--b4-rand); }
html[data-design="d"][data-variante="b4"] #step-0 .lp-inner { max-width: none; margin: 0; }
html[data-design="d"][data-variante="b4"] :where(.country-section-head):is(.country-section-head, #country-month-strip),
html[data-design="d"][data-variante="b4"] #country-month-strip,
html[data-design="d"][data-variante="b4"] :where(.country-toolbar):is(.country-toolbar, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.country-status):is(.country-status, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.country-grid):is(.country-grid, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.country-grid + .d2-quellen):is(.country-grid + .d2-quellen, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.lp-routes-teaser):is(.lp-routes-teaser, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.site-footer-inner):is(.site-footer-inner, #country-month-strip),
html[data-design="d"][data-variante="b4"] :where(.site-footer-base):is(.site-footer-base, #country-month-strip) {
  max-width: none; margin-left: 0; margin-right: 0;
  padding-left: var(--b4-rand); padding-right: var(--b4-rand);
}
html[data-design="d"][data-variante="b4"] .lp-leine-line {
  margin-left: calc(-1 * var(--b4-rand)); margin-right: calc(-1 * var(--b4-rand));
  padding-left: var(--b4-rand); padding-right: var(--b4-rand); scroll-padding-inline: var(--b4-rand);
}
@media (min-width: 1100px) {
  html[data-design="d"][data-variante="b4"] .landing-hero { padding-left: var(--b4-rand); }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-wrap { margin-left: calc(-1 * var(--b4-rand)); }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip { padding-left: var(--b4-rand); padding-right: var(--b4-rand); scroll-padding-left: var(--b4-rand); }
  html[data-design="d"][data-variante="b4"] .d-strip-head,
  html[data-design="d"][data-variante="b4"] .d-mapnote { padding-right: var(--b4-rand); }
}

/* ---------- Bewegung: keine Einblendungen beim Scrollen ----------
   Die Klasse rv-in setzt index.html weiter, damit die Vorführung in „In drei Schritten
   zur Reise“ (Wünsche, Mini-Route) läuft; Deckkraft und Versatz bleiben aber neutral. */
html.rv[data-design="d"][data-variante="b4"] #step-0 [data-rv] { opacity: 1; transform: none; transition: none; }
html[data-design="d"][data-variante="b4"] .hero-v2-strip-card { animation: none; }
/* Der ganze Schritt blendete beim Laden ein; dabei zeigte sich unter dem Hero kurz die
   Kante des dunklen Körperverlaufs */
html[data-design="d"][data-variante="b4"] #step-0 { animation: none; }
html.rv[data-design="d"][data-variante="b4"] .how-mini.rv-in .how-mini-pin { animation: none; }

/* ---------- Grundrhythmus der Abschnitte ---------- */
html[data-design="d"][data-variante="b4"] #step-0 .lp-section { padding-top: 104px; padding-bottom: 104px; }
html[data-design="d"][data-variante="b4"] #step-0 .chap-label { display: none; }
html[data-design="d"][data-variante="b4"] #step-0 .chap-head { margin-bottom: 14px; max-width: none; }
html[data-design="d"][data-variante="b4"] #step-0 .chap-title { margin: 0; text-wrap: balance; }
html[data-design="d"][data-variante="b4"] #step-0 .lp-lead { max-width: 52ch; color: var(--d-tinte-hell); text-wrap: pretty; }
/* Zwischentitel und Kartentexte haben auf der ganzen Seite dieselbe Stufe */
html[data-design="d"][data-variante="b4"] :where(.how-mini-title):is(.how-mini-title, #lp-inside .lp-index-title),
html[data-design="d"][data-variante="b4"] :is(#lp-inside .lp-index-title),
html[data-design="d"][data-variante="b4"] :is(#lp-deliver .deliver-title) {
  font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: var(--d-fw-zwischen);
  letter-spacing: var(--d-track-zwischen);
}
html[data-design="d"][data-variante="b4"] :where(.how-mini-body):is(.how-mini-body, #lp-inside .lp-index-desc),
html[data-design="d"][data-variante="b4"] :is(#lp-inside .lp-index-desc),
html[data-design="d"][data-variante="b4"] :is(#lp-deliver .deliver-desc) {
  font-size: 15.5px; line-height: 1.55; color: var(--d-tinte-hell); text-wrap: pretty;
}

/* ---------- In drei Schritten zur Reise ----------
   Der Vorspann wiederholte die Hero-Unterzeile, er entfällt. Ziffer und Titel stehen auf
   einer Zeile; Titel, Text und Material stehen über alle drei Spalten auf gleicher Höhe
   (subgrid). Keine Linie zwischen den Ziffern. */
html[data-design="d"][data-variante="b4"] #lp-how .lp-lead { display: none; }
html[data-design="d"][data-variante="b4"] .how-mini {
  margin-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 0 48px;
}
html[data-design="d"][data-variante="b4"] .how-mini::before,
html[data-design="d"][data-variante="b4"] .how-mini::after,
html[data-design="d"][data-variante="b4"] .how-mini-star { content: none; display: none; }
html[data-design="d"][data-variante="b4"] .how-mini-step {
  grid-row: 1 / span 4;
  display: grid; grid-template-rows: subgrid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; align-content: start;
  padding: 0;
}
html[data-design="d"][data-variante="b4"] .how-mini-step > * { grid-column: 1 / -1; }
html[data-design="d"][data-variante="b4"] .how-mini-pin {
  position: static; grid-column: 1; grid-row: 1; align-self: center;
  width: 30px; height: 30px; font-size: 14px;
  box-shadow: none !important;
}
html[data-design="d"][data-variante="b4"] .how-mini-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
html[data-design="d"][data-variante="b4"] .how-mini-body { grid-row: 2; margin: 10px 0 0; max-width: 34ch; }
html[data-design="d"][data-variante="b4"] .how-mini-material { grid-row: 3; margin-top: 20px; box-sizing: border-box; }
html[data-design="d"][data-variante="b4"] .how-mini-step > .d2-quellen { grid-row: 4; }
/* Länderfotos mit Quellenzeile als ein Baustein (js/design-b4-start.js) */
html[data-design="d"][data-variante="b4"] .d4-how-fotos { grid-row: 3; margin-top: 20px; min-width: 0; }
html[data-design="d"][data-variante="b4"] .d4-how-fotos > .how-mini-material { margin-top: 0; }
/* Schritt 1: die drei Länderfotos stehen frei wie im Länderraster */
html[data-design="d"][data-variante="b4"] .hml-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); background: none; border: 0; padding: 0; }
html[data-design="d"][data-variante="b4"] .hml-cards + .d2-quellen { margin-top: 8px; }
/* Schritt 1 am Desktop: die Länderfotos so hoch wie die Flächen von Schritt 2 und 3, damit die
   drei Beispiele unten auf einer Linie enden; die Quellenzeile steht darunter */
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] .d4-how-fotos { position: relative; align-self: stretch; display: flex; flex-direction: column; }
  html[data-design="d"][data-variante="b4"] .d4-how-fotos > .hml-cards { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); }
  html[data-design="d"][data-variante="b4"] .d4-how-fotos .hml-card { height: auto; aspect-ratio: auto; min-height: 150px; }
  html[data-design="d"][data-variante="b4"] .d4-how-fotos > .d2-quellen { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; }
}
/* Schritt 2 und 3: Ausschnitte der Oberfläche als helle Fläche */
html[data-design="d"][data-variante="b4"] .hml-prefs,
html[data-design="d"][data-variante="b4"] .hmm {
  max-width: none; padding: 16px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-flaeche);
}

/* ---------- Was in deiner Route steckt: sechs Ausschnitte aus einer echten Route ----------
   Je Punkt eine hinterlegte Fläche: oben ein Ausschnitt aus der Beispielroute Namibia (dieselbe
   wie im Hero, gebaut in js/design-b4-start.js), darunter Titel und Satz. Die Flächen sind
   verschieden groß, damit kein gleichförmiges Raster entsteht: Reisezeit mit dem Klimadiagramm
   breit neben dem Budget, dann Familien-Check, Kalender und Packliste, unten die Praxis als
   breite Zeile mit Text links und Angaben rechts. Keine Symbole. */
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
  margin-top: 36px; border: 0;
}
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  grid-column: span 4; padding: 22px 24px 24px; border: 0; border-radius: var(--d-r-flaeche);
  background: var(--b4-lavur);
}
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-zeit { grid-column: span 7; }
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-budget { grid-column: span 5; }
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-praxis {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 40px; align-items: start;
}
html[data-design="d"][data-variante="b4"] #lp-inside .b4-aus-praxis .b4-aus { order: 2; }
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-ico { display: none; }
/* Text unter dem Ausschnitt: Titel als Zwischentitel, darunter der Satz */
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-body { display: block; margin-top: auto; }
html[data-design="d"][data-variante="b4"] #lp-inside .b4-aus-praxis .lp-index-body { margin-top: 0; }
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-title { display: block; margin: 0 0 4px; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-desc { display: block; margin: 0; color: var(--b4-text); max-width: 46ch; }
/* Herkunft der Beispiele, zwischen Vorspann und Kacheln (js/design-b4-start.js) */
html[data-design="d"][data-variante="b4"] .b4-inside-hinweis { margin: 14px 0 0; max-width: 64ch; font-size: 14.5px; line-height: 1.45; color: var(--b4-grau); }
/* Titel einer Reihe auf einer Linie: der Satz darunter steht mindestens zweizeilig */
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-desc { min-height: 3em; }
  /* Reisezeit neben dem höheren Budget: der freie Platz verteilt sich über und unter dem Diagramm,
     statt als Loch von 150 px zwischen Diagramm und Titel zu stehen (Feinheiten 17.10.2026) */
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-zeit > .b4-aus { margin-top: auto; margin-bottom: auto; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-zeit > .lp-index-body { margin-top: 0; }
}

/* Ausschnitte: Bausteine der Ergebnisseite im Kleinen */
html[data-design="d"][data-variante="b4"] .b4-aus { align-self: stretch; min-width: 0; color: var(--b4-text); font-size: 15px; line-height: 1.4; }
html[data-design="d"][data-variante="b4"] .b4-aus p,
html[data-design="d"][data-variante="b4"] .b4-aus ul,
html[data-design="d"][data-variante="b4"] .b4-aus ol,
html[data-design="d"][data-variante="b4"] .b4-aus dl { margin: 0; padding: 0; list-style: none; }
html[data-design="d"][data-variante="b4"] .b4-aus-klein { margin-top: 10px !important; font-size: 13.5px; color: var(--b4-grau); }
/* Familien-Check: gewähltes Alter wie der Schalter in Schritt 2, Urteil mit Haken, die Orte als Kapseln */
html[data-design="d"][data-variante="b4"] .b4-aus-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; box-sizing: border-box;
  background: var(--d-laub-blass); border: 1.5px solid var(--b4-tinte); border-radius: 999px;
  color: var(--b4-tinte); font-size: 13.5px; font-weight: 700;
}
html[data-design="d"][data-variante="b4"] .b4-aus-urteil { display: flex; align-items: center; gap: 10px; margin-top: 16px !important; font-size: 19px; font-weight: 800; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .b4-aus-haken {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--b4-daten); color: var(--b4-auf-daten);
}
html[data-design="d"][data-variante="b4"] .b4-aus-haken svg { width: 16px; height: 16px; }
html[data-design="d"][data-variante="b4"] .b4-aus-orte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
html[data-design="d"][data-variante="b4"] .b4-aus-orte li {
  padding: 4px 10px; border-radius: 999px; background: var(--b4-papier); box-shadow: inset 0 0 0 1px var(--b4-linie);
  font-size: 13.5px; font-weight: 700;
}
/* Beste Reisezeit: das Klimadiagramm der Ergebnisseite (js/climate-chart.js) als helles Fenster */
html[data-design="d"][data-variante="b4"] .b4-aus-fenster { padding: 10px 10px 4px; border-radius: 12px; background: #FFFFFF; }
html[data-design="d"][data-variante="b4"] .b4-aus-fenster svg { display: block; width: 100%; height: auto; }
/* Schrift im Diagramm: es skaliert auf die Kachelbreite, ohne Ausgleich standen die Monate am
   Desktop bei 10 px und am Handy bei 7 px. --k = Breite der Zeichnung / Breite der Anzeige
   (js/design-b4-start.js), damit stehen die Größen hier in echten Pixeln (CSS schlägt die
   font-size-Attribute). Monate 12 px, Temperaturen 12 (Handy 11), Achsen und Band 11. */
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-w text[font-size="10"] { font-size: calc(12px * var(--k, 1)); }
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-w text:is([font-size="8"], [font-size="8.6"], [font-size="8.8"]) { font-size: calc(11px * var(--k, 1)); }
/* Handy (schmale Fassung, Monate als Anfangsbuchstaben): Band ohne Beschriftung, die Zeile
   unter dem Diagramm nennt die Reisezeit */
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-n text[font-size="13"]:not([font-weight="600"]) { font-size: calc(13px * var(--k, 1)); }
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-n text[font-size="13"][font-weight="600"] { font-size: calc(11px * var(--k, 1)); }
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-n text:is([font-size="10.4"], [font-size="11.18"], [font-size="11.44"]) { font-size: calc(11px * var(--k, 1)); }
html[data-design="d"][data-variante="b4"] .b4-aus-fenster .cc-n .b4-aus-band { display: none; }
/* Dunkler Modus: das Diagramm bleibt ein helles Fenster wie Karten und Kompass. Die Umfärbung
   für die dunkle Ergebnisseite (design-b4-basis.css) machte Monate und Band hier unsichtbar. */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart text[fill="#4B6259"] { fill: #4B6259; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart text[fill="#173A2E"] { fill: #173A2E; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart text[fill="rgba(23,58,46,.95)"] { fill: rgba(23,58,46,.95); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart rect[fill="rgba(23,58,46,.09)"] { fill: rgba(23,58,46,.09); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart line[stroke="rgba(23,58,46,.32)"] { stroke: rgba(23,58,46,.32); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-aus-fenster .climate-chart line[stroke="rgba(23,58,46,.1)"] { stroke: rgba(23,58,46,.1); }
/* Budget: Summe groß, Posten als Balken und Liste, Puffer schraffiert wie auf der Ergebnisseite */
html[data-design="d"][data-variante="b4"] .b4-aus-budget {
  --b4-k1: var(--b4-daten); --b4-k2: #405C51; --b4-k3: #6F877D; --b4-k4: #9BADA5; --b4-k5: #BFCDC7;
}
html[data-design="d"][data-variante="b4"] .b4-aus-betrag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.01em; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .b4-aus-betrag span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--b4-grau); }
/* wie die Ergebnisseite (results.js _renderKostenD): Gesamt für die Gruppe, pro Person abgeleitet */
html[data-design="d"][data-variante="b4"] .b4-aus .b4-aus-pp { margin-top: 8px; font-size: 14px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .b4-aus-balken { display: flex; gap: 3px; height: 14px; margin: 18px 0 14px; }
html[data-design="d"][data-variante="b4"] .b4-aus-balken i { flex: 1 1 0; border-radius: 3px; }
html[data-design="d"][data-variante="b4"] :is(.b4-aus-balken, .b4-aus-posten) .k1 { background: var(--b4-k1); }
html[data-design="d"][data-variante="b4"] :is(.b4-aus-balken, .b4-aus-posten) .k2 { background: var(--b4-k2); }
html[data-design="d"][data-variante="b4"] :is(.b4-aus-balken, .b4-aus-posten) .k3 { background: var(--b4-k3); }
html[data-design="d"][data-variante="b4"] :is(.b4-aus-balken, .b4-aus-posten) .k4 { background: var(--b4-k4); }
html[data-design="d"][data-variante="b4"] :is(.b4-aus-balken, .b4-aus-posten) .k5 { background: repeating-linear-gradient(135deg, var(--b4-k5) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--b4-k5); }
html[data-design="d"][data-variante="b4"] .b4-aus-posten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
html[data-design="d"][data-variante="b4"] .b4-aus-posten li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
html[data-design="d"][data-variante="b4"] .b4-aus-posten li i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
html[data-design="d"][data-variante="b4"] .b4-aus-posten li b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Kalender: die Etappen als Termine mit Textmarker am Rand, darunter der Merkzettel */
html[data-design="d"][data-variante="b4"] .b4-aus-termine { display: grid; gap: 6px; }
html[data-design="d"][data-variante="b4"] .b4-aus-termine li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 12px 8px 14px; border-radius: 8px; background: var(--b4-papier);
  box-shadow: inset 4px 0 0 var(--b4-marker), inset 0 0 0 1px var(--b4-linie);
}
html[data-design="d"][data-variante="b4"] .b4-aus-termine li b { font-weight: 700; }
html[data-design="d"][data-variante="b4"] .b4-aus-termine li span { font-size: 13.5px; color: var(--b4-grau); white-space: nowrap; }
html[data-design="d"][data-variante="b4"] .b4-aus-gemerkt {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 12px 6px 10px;
  border-radius: 999px; background: var(--b4-daten); color: var(--b4-auf-daten); font-size: 13.5px; font-weight: 700;
}
html[data-design="d"][data-variante="b4"] .b4-aus-gemerkt svg { width: 16px; height: 16px; }
/* Packliste: abhakbar wie in der App, der erste Punkt ist erledigt */
html[data-design="d"][data-variante="b4"] .b4-aus-pack { display: grid; gap: 12px; }
html[data-design="d"][data-variante="b4"] .b4-aus-pack li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
html[data-design="d"][data-variante="b4"] .b4-aus-kasten {
  grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--b4-papier); box-shadow: inset 0 0 0 1.5px var(--d-line-stark); color: var(--b4-auf-daten);
}
html[data-design="d"][data-variante="b4"] .b4-aus-pack li.is-an .b4-aus-kasten { background: var(--b4-daten); box-shadow: none; }
html[data-design="d"][data-variante="b4"] .b4-aus-kasten svg { width: 14px; height: 14px; }
html[data-design="d"][data-variante="b4"] .b4-aus-pack li b { font-weight: 700; }
html[data-design="d"][data-variante="b4"] .b4-aus-pack li.is-an b { color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .b4-aus-pack .b4-aus-warum { grid-column: 2; font-size: 13.5px; color: var(--b4-grau); }
/* Praxis: Angabenpaare in vier Spalten */
html[data-design="d"][data-variante="b4"] .b4-aus-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
html[data-design="d"][data-variante="b4"] .b4-aus-fakten div { padding-top: 10px; border-top: 1.5px solid var(--b4-daten); }
html[data-design="d"][data-variante="b4"] .b4-aus-fakten dt { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .b4-aus-fakten dd { margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 700; color: var(--b4-titel); }

/* ---------- Deine Reise zum Teilen und Mitnehmen ----------
   Die Exporte im echten Format: Reiseführer und Almanac A4, flach. Hinter dem Titelblatt liegt
   eine Innenseite mit Text (Tagesplan Hakone, Küche), so weit nach rechts versetzt, dass ihre
   Textspalte zu sehen ist. Die Story 9:16 steckt als geöffnete Instagram-Story im Telefon
   (Nutzerentscheid 10.10.2026: man sieht sofort, dass sie zum Teilen ist). Kein Fächer, keine
   Seitenpille; Umfang und Format stehen im Text, der Knopf zum Durchblättern unter dem Text
   (js/design-b4-start.js). */
html[data-design="d"][data-variante="b4"] #lp-deliver {
  background: var(--d-grund);
  /* Breite der A4-Blätter so, dass Story und zwei aufgeschlagene Blätter in eine Reihe passen:
     Story (A4 × 1,414 × 9/16 = 0,795 A4) + 2 × (1 + Versatz) A4 + 2 Abstände. 100vw zählt die
     Scrollleiste mit (Windows 15 px); ohne die 20 px Reserve fehlten dort ein paar Pixel und der
     Almanac rutschte zwischen 1100 und 1920 px allein in eine zweite Reihe (Designcheck 13.10.2026).
     Was übrig bleibt, verteilt space-between, damit die Reihe rechts mit dem Abschnitt abschließt. */
  --d4-versatz: 0.62;
  --d4-a4: min(300px, calc((100vw - 2 * var(--b4-rand) - 132px) / 4.035));
  --d4-story: calc(var(--d4-a4) * 1.41421 * 0.5625);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 56px;
  margin-top: 48px;
}
/* Eine Reihe erst ab 1180 px: darunter bräche der Satz der schmalen Story-Spalte vierzeilig, und
   ihr Knopf stünde tiefer als die anderen. Bis dahin gilt die Tablet-Anordnung (unten). */
@media (min-width: 1180px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-grid { flex-wrap: nowrap; justify-content: space-between; }
}
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card { flex: 0 0 auto; width: var(--d4-w); max-width: 100%; align-items: flex-start; text-align: left; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share { --d4-w: var(--d4-story); }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-pdf,
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac { --d4-w: calc(var(--d4-a4) * (1 + var(--d4-versatz))); }
/* Almanac: die Innenseite (Übersichtskarte) etwas weniger weit versetzt, sodass sie genau an einer
   Wortgrenze unter dem Deckblatt hervorkommt. Bei 0,62 stand neben dem Deckblatt ein einzelnes „e“
   des Seitentitels (Designcheck 13.10.2026); bei 0,555 ist der Titel verdeckt, und der Untertitel
   beginnt mit einem ganzen Wort (gemessen an images/landing/b4/jp-almanac-9.jpg: Lücke bei 44,5 %). */
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac { --d4-versatz: 0.555; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-stage { display: block; width: 100%; height: auto; margin: 0 0 22px; padding: 0 !important; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-mock,
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card:hover .deliver-mock { transform: none; transition: none; }
/* Teilbare Karte im Telefon, so wie eine geöffnete Instagram-Story auf einem aktuellen Gerät
   aussieht (Maße nach einer Bildschirmaufnahme der App, 768 × 1713 px): oben Statusleiste und
   Schwarz, die Story in 9:16 mit runden Ecken ab 20,2 % der Breite, darin Fortschrittsbalken,
   Konto, „Folgen“ und senkrechte Punkte; darunter im Schwarz das Antwortfeld „Nachricht senden“
   mit Herz und Senden, unten der Home-Balken. Kein Verifiziert-Haken. Das Gerät ist so breit, dass
   es genau so hoch ist wie die A4-Blätter daneben (Titel einer Reihe auf einer Linie). Maße in
   cqw: am Gerät bezogen auf die Bühne, im Bildschirm auf dessen Breite (768 px = 100cqw).
   Die Leisten sind aria-hidden: Schmuck, die Story beschreibt ihr Alt-Text. 82,43 statt 82: Mit 82
   stand das Gerät gut 2 px niedriger als die Blätter, der Titel daneben entsprechend höher
   (gemessen bei 1024, 1180, 1440 px am 14.10.2026, immer 0,9948 der Blatthöhe). */
html[data-design="d"][data-variante="b4"] #lp-deliver .is-share .deliver-stage { --tel: 82.43; --tel-weg: 0px; container-type: inline-size; }
html[data-design="d"][data-variante="b4"] #lp-deliver .phone {
  container-type: inline-size; box-sizing: border-box;
  --tel-b: calc(var(--tel) * 1cqw - var(--tel-weg));
  width: var(--tel-b); padding: calc(var(--tel-b) * .026); border-radius: calc(var(--tel-b) * .16);
  background: rgb(0, 0, 0);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 0 1px var(--d-line-stark), 0 14px 22px -16px rgba(0, 0, 0, .55);
}
/* Seitentasten: links Aktionstaste und Lautstärke, rechts Seitentaste */
html[data-design="d"][data-variante="b4"] #lp-deliver .phone::before,
html[data-design="d"][data-variante="b4"] #lp-deliver .phone::after { content: ''; position: absolute; width: 1.3cqw; border-radius: 1cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .phone::before {
  left: -1cqw; top: 40cqw; height: 82cqw;
  background: linear-gradient(to bottom, rgb(0, 0, 0) 0 13cqw, rgba(0, 0, 0, 0) 13cqw 24cqw, rgb(0, 0, 0) 24cqw 50cqw, rgba(0, 0, 0, 0) 50cqw 56cqw, rgb(0, 0, 0) 56cqw);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .phone::after { right: -1cqw; top: 66cqw; height: 40cqw; background: rgb(0, 0, 0); }
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen {
  aspect-ratio: 768 / 1713; border-radius: 13cqw; background: rgb(0, 0, 0); box-shadow: none; overflow: hidden;
}
/* Statusleiste: Uhrzeit, Empfang, WLAN, Akku */
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 13.75cqw; z-index: 4;
  --tel-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 54'%3E%3Ctext x='51' y='37' text-anchor='middle' font-family='-apple-system,Segoe UI,Arial,sans-serif' font-size='17' font-weight='600' fill='white'%3E9:41%3C/text%3E%3Cg fill='white'%3E%3Crect x='291' y='29.5' width='3' height='5' rx='1'/%3E%3Crect x='295.5' y='27.5' width='3' height='7' rx='1'/%3E%3Crect x='300' y='25.5' width='3' height='9' rx='1'/%3E%3Crect x='304.5' y='23' width='3' height='11.5' rx='1'/%3E%3Cpath d='M322 34.6l2.6-2.7a3.7 3.7 0 0 0-5.2 0zM317.6 30.1a6.2 6.2 0 0 1 8.8 0l1.6-1.7a8.6 8.6 0 0 0-12 0zM313.9 26.4a11.4 11.4 0 0 1 16.2 0l1.6-1.7a13.8 13.8 0 0 0-19.4 0z'/%3E%3Crect x='345.5' y='26.5' width='19' height='9' rx='2'/%3E%3Crect x='368.6' y='29' width='1.6' height='4' rx='.8' fill-opacity='.45'/%3E%3C/g%3E%3Crect x='343' y='24' width='24.5' height='14' rx='4.2' fill='none' stroke='white' stroke-opacity='.4'/%3E%3C/svg%3E");
  -webkit-mask: var(--tel-status) center / 100% 100% no-repeat; mask: var(--tel-status) center / 100% 100% no-repeat;
  background: rgb(255, 255, 255); transition: background-color .2s ease;
}
/* Home-Balken */
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen::after {
  content: ''; position: absolute; left: 50%; bottom: 2cqw; z-index: 4; width: 35cqw; height: 1.2cqw;
  transform: translateX(-50%); border-radius: 1cqw; background: rgba(255, 255, 255, .92); transition: background-color .2s ease;
}
/* Helle Apps (WhatsApp, Pinterest): Statusleiste und Home-Balken dunkel, wie am Gerät */
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen.tel-hell::before { background: rgb(0, 0, 0); }
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen.tel-hell::after { background: rgba(0, 0, 0, .85); }
html[data-design="d"][data-variante="b4"] #lp-deliver .phone-screen .ig-photo { inset: 20.2cqw 0 auto; height: 177.78cqw; border-radius: 1.8cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-top { top: 20.2cqw; padding: 2cqw 1.3cqw 0; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-top::before { height: 24cqw; border-radius: 1.8cqw 1.8cqw 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bars { gap: .5cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bars span { height: max(1.5px, .45cqw); }
/* Aktueller Balken weiß, auch im dunklen Modus (die Gegenregel dort färbte ihn wie die Flächen) */
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bars span.on { background: rgb(255, 255, 255); }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-acct { gap: 2.4cqw; margin-top: 2.2cqw; padding: 0 1.6cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-av { width: 7.3cqw; height: 7.3cqw; min-width: 15px; min-height: 15px; border: 0; background: url("../CI/marke/signet/routaris-avatar.svg") center / cover no-repeat; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-av img { display: none; }
/* Instagram zeigt seine Leiste in der Systemschrift, nicht in der Schrift von Routaris. Einzige
   Ausnahme von „eine Schrift für alles“ (css/design-d.css setzt sie mit !important auf jedes
   Element), deshalb ebenfalls !important und nur innerhalb der nachgebauten App-Leisten. */
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-top,
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bottom,
html[data-design="d"][data-variante="b4"] #lp-deliver :is(.ig-top, .ig-bottom) * { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-name,
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-time,
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-folgen { font-size: max(11px, 3.2cqw); line-height: 1; }
/* Schmales Telefon (am Handy): bei 11 px Mindestschrift fehlt sonst der Platz für die Zeit */
@container (max-width: 180px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-time { display: none; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-folgen { padding-inline: 2.4cqw; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bottom { gap: 3cqw; padding: 0 2.4cqw 0 2cqw; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-reply { padding-inline: 2.6cqw; }
}
/* Sehr schmal (Handys mit 360 und 320 px Breite): erst das Herz, dann „Folgen“ weicht */
@container (max-width: 140px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-reply + .ig-act { display: none; }
}
@container (max-width: 125px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .ig-folgen { display: none; }
}
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-name { font-weight: 700; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-time { opacity: .75; font-weight: 400; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-folgen {
  display: inline-flex; align-items: center; margin-left: auto; padding: 1.6cqw 3.6cqw;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 2.4cqw; color: rgb(255, 255, 255); font-weight: 600;
}
/* Rechts nur die senkrechten Punkte; das X gibt es in der App nicht mehr */
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-acct .ig-r { margin-left: 2cqw; gap: 0; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-acct .ig-r svg { width: max(11px, 4.6cqw); height: max(11px, 4.6cqw); transform: rotate(90deg); }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-acct .ig-r svg + svg { display: none; }
/* Antwortfeld im Schwarz unter der Story */
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bottom { top: 200.2cqw; bottom: auto; gap: 4.2cqw; padding: 0 3.6cqw 0 2cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bottom::before { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-reply {
  padding: 3.6cqw 3.8cqw; font-size: max(11px, 3.4cqw); line-height: 1; white-space: nowrap; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85); color: rgb(255, 255, 255);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .ig-bottom .ig-act { width: max(13px, 5.6cqw); height: max(13px, 5.6cqw); }
/* ---------- Vier Formate zum Wischen (js/design-b4-start.js, teilenFolien, nur B4) ----------
   Die Folien liegen nebeneinander in einer Rastreihe im Bildschirm; Statusleiste und Home-Balken
   bleiben darüber stehen. Jede Folie ist ein eigener Container (100cqw = Bildschirmbreite), ihre
   Teile wachsen mit dem Gerät, Schrift nie unter 11 px. Farben der Apps nur hier (build-design-b4.js
   lässt sie unverändert): WhatsApp-Hintergrund, -Blase, -Schrift und -Haken, Pinterest-Rot,
   Instagram-Blau des Karussellpunkts. */
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-bahn {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: pointer;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-bahn::-webkit-scrollbar { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-folie {
  position: relative; flex: 0 0 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; container-type: inline-size;
  --tel-s: max(11px, 3.6cqw); --tel-i: max(13px, 5.8cqw);
  display: flex; flex-direction: column; padding: 13.75cqw 0 6.5cqw;
  background: rgb(0, 0, 0); color: rgb(255, 255, 255);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-folie.tel-story { display: block; padding: 0; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-wa,
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-pin,
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-ig,
html[data-design="d"][data-variante="b4"] #lp-deliver :is(.tel-wa, .tel-pin, .tel-ig) * {
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; letter-spacing: 0;
}
html[data-design="d"][data-variante="b4"] #lp-deliver :is(.tel-wa, .tel-pin, .tel-ig) svg { width: var(--tel-i); height: var(--tel-i); flex: 0 0 auto; display: block; }
html[data-design="d"][data-variante="b4"] #lp-deliver :is(.tel-wa, .tel-pin, .tel-ig) img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Schrift in den Apps fest in deren Farben, auch im dunklen Modus der Seite */
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-folie :where(p),
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-folie :where(b) { margin: 0; color: inherit; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-folie .ig-av { flex: 0 0 auto; }
/* Untere Leiste der Apps: fünf Symbole gleich verteilt */
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-tabs {
  display: flex; align-items: center; justify-content: space-around; margin-top: auto; padding: 2.4cqw 2cqw 0;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-tabs .ig-av { width: var(--tel-i); height: var(--tel-i); min-width: 0; min-height: 0; }

/* WhatsApp, hell: Kopf mit Kontakt, Chat auf dem beigen Grund, Eingabezeile */
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-wa { padding-top: 0; padding-bottom: 0; background: #EFEAE2; color: #111B21; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-kopf {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 2.2cqw; padding: 15cqw 3.4cqw 2.4cqw 2cqw;
  background: rgb(255, 255, 255); box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-av {
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  width: max(17px, 8.4cqw); height: max(17px, 8.4cqw); border-radius: 50%; background: rgba(0, 0, 0, .12); color: rgb(255, 255, 255);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-av svg { width: 82%; height: 82%; margin-bottom: -12%; stroke-width: 0; fill: currentColor; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-name { font-size: var(--tel-s); font-weight: 600; line-height: 1.1; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-r { display: flex; gap: 4.4cqw; margin-left: auto; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-verlauf {
  flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 1.8cqw; padding: 3cqw 3cqw 2.4cqw;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-tag {
  align-self: center; margin-bottom: auto; padding: 1cqw 2.6cqw; border-radius: 2cqw;
  background: rgba(255, 255, 255, .92); color: #667781; font-size: var(--tel-s); line-height: 1.2;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-blase {
  position: relative; max-width: 82%; border-radius: 2.6cqw; box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  font-size: var(--tel-s); line-height: 1.25;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-ein { align-self: flex-start; padding: 1.6cqw 2.6cqw; background: rgb(255, 255, 255); }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-aus { align-self: flex-end; width: 70cqw; flex: 0 0 auto; padding: 1cqw; background: #D9FDD3; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-aus img { height: auto; aspect-ratio: 4 / 5; border-radius: 1.8cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-zeit {
  display: inline-flex; align-items: center; gap: .8cqw; margin-left: 2cqw; vertical-align: -.1em;
  color: #667781; font-size: max(11px, 2.8cqw); white-space: nowrap;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-zeit.wa-auf-bild {
  position: absolute; right: 2.6cqw; bottom: 2.2cqw; margin: 0; padding: .4cqw 1.6cqw; border-radius: 99px;
  background: rgba(0, 0, 0, .55); color: rgb(255, 255, 255);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-zeit svg { width: max(12px, 4cqw); height: auto; color: #53BDEB; }
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-fuss {
  display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 3.4cqw 7.5cqw; background: rgb(255, 255, 255);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .wa-feld {
  flex: 1 1 auto; height: max(18px, 8cqw); border-radius: 99px; border: 1px solid rgba(0, 0, 0, .14);
}

/* Pinterest, hell: der Pin in der Detailansicht mit runden Ecken, Leiste mit „Merken“ */
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-pin { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-bild { position: relative; flex: 0 0 auto; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 5cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-zurueck {
  position: absolute; left: 3cqw; top: 3cqw; display: flex; align-items: center; justify-content: center;
  width: max(20px, 9cqw); height: max(20px, 9cqw); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(0, 0, 0);
}
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-zurueck svg { width: 62%; height: 62%; stroke-width: 2.4; }
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-leiste { display: flex; align-items: center; gap: 4cqw; padding: 2.6cqw 3.4cqw 1.6cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-merken {
  margin-left: auto; padding: 2cqw 4cqw; border-radius: 99px; background: #E60023; color: rgb(255, 255, 255);
  font-size: var(--tel-s); font-weight: 600; line-height: 1.1;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-konto { display: flex; align-items: center; gap: 2.2cqw; padding: 1.4cqw 3.4cqw 0; }
html[data-design="d"][data-variante="b4"] #lp-deliver .pin-name { font-size: var(--tel-s); font-weight: 600; line-height: 1.1; }

/* Instagram, dunkel: ein Beitrag mit Karussell (Zähler 1/7, Punkte unter dem Bild) */
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-kopf {
  display: grid; grid-template-columns: var(--tel-i) 1fr var(--tel-i); align-items: center; padding: 2.2cqw 3cqw;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-kopf span { text-align: center; font-size: var(--tel-s); font-weight: 700; line-height: 1.1; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-konto { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 3cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-name { font-size: var(--tel-s); font-weight: 700; line-height: 1.1; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-konto svg { margin-left: auto; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-bild { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 5; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-zahl {
  position: absolute; right: 2.6cqw; top: 2.6cqw; padding: 1cqw 2.2cqw; border-radius: 99px;
  background: rgba(0, 0, 0, .62); font-size: max(11px, 3cqw); line-height: 1.1; font-variant-numeric: tabular-nums;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-leiste { position: relative; display: flex; align-items: center; gap: 3.6cqw; padding: 2.6cqw 3cqw 1.4cqw; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-leiste > svg:last-child { margin-left: auto; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-punkte { position: absolute; left: 50%; top: 50%; display: flex; gap: 1cqw; transform: translate(-50%, -20%); }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-punkte i { width: max(4px, 1.4cqw); height: max(4px, 1.4cqw); border-radius: 50%; background: rgba(255, 255, 255, .35); }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-punkte i.an { background: #0095F6; }
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-text {
  padding: 1cqw 3cqw 0; font-size: var(--tel-s); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .igp-text b { font-weight: 700; }

/* Kreise und Zähler unter dem Telefon. Das Telefon wird um ihre Höhe kleiner, damit die Bühne
   so hoch bleibt wie die A4-Blätter daneben (Titel einer Reihe auf einer Linie): Gerätehöhe =
   2,1665 × Gerätebreite. Am Handy steht der Text daneben, dort behält das Telefon seine Breite. */
html[data-design="d"][data-variante="b4"] #lp-deliver .is-share.tel-wisch .deliver-flip { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-steuer {
  --tel-b: calc(var(--tel) * 1cqw - var(--tel-weg));
  display: flex; align-items: center; justify-content: center; gap: 6px; width: var(--tel-b); margin-top: 10px;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-kreis {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--b4-kreis); height: var(--b4-kreis); padding: 0; box-sizing: border-box; cursor: pointer;
  background: var(--b4-papier); color: var(--b4-text); border: 1.5px solid var(--b4-k-rand); border-radius: 50%;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-kreis:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-kreis:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-kreis:disabled { opacity: .4; cursor: default; }
html[data-design="d"][data-variante="b4"] #lp-deliver .tel-zahl {
  min-width: 4.4em; text-align: center; font-size: 15px; font-weight: 500; color: var(--b4-grau); font-variant-numeric: tabular-nums;
}
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .is-share.tel-wisch .deliver-stage { --tel-weg: calc((var(--b4-kreis) + 10px) / 2.1665); }
}
html[data-design="d"][data-variante="b4"] #lp-deliver .paper { width: var(--d4-a4); }
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet { border-radius: 2px; box-shadow: 0 0 0 1px var(--d-line-stark); transition: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet::after { display: none; }
/* Innenseite rechts hinter dem Titelblatt; das Titelblatt wirft einen schmalen Schatten auf sie */
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet.s1 { transform: translateX(calc(var(--d4-versatz) * 100%)) !important; }
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet.s2,
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet.s3,
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .sheet.s4,
html[data-design="d"][data-variante="b4"] #lp-deliver .paper :where(.corner):is(.corner, .sheet.s2) { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .paper .front { border-radius: 2px; box-shadow: 0 0 0 1px var(--d-line-stark), 12px 0 20px -12px rgba(23, 58, 46, .48); }
html[data-design="d"][data-variante="b4"] #lp-deliver .paper-tag { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-title { margin: 0 0 6px; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-desc { margin: 0; max-width: 40ch; }
/* „Ansehen“ und „Durchblättern“: die ganze Fläche bleibt Knopf (Klick aufs Bild), der Hinweis
   steht als eigener Knopf unter dem Text statt auf dem Bild (js/design-b4-start.js) */
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-flip { inset: 0; height: auto; padding: 0; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-flip-hint { display: none; }
html[data-design="d"][data-variante="b4"] #lp-deliver .b4-deliver-knopf {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  min-height: var(--b4-k-s); padding: 0 16px; box-sizing: border-box; cursor: pointer;
  background: var(--b4-papier); color: var(--b4-tinte); border: 1.5px solid var(--b4-tinte); border-radius: var(--d-r-ui);
  font: 700 15px/1.1 'Alegreya Sans', system-ui, sans-serif; letter-spacing: 0;
  transition: background-color .15s ease;
}
html[data-design="d"][data-variante="b4"] #lp-deliver .b4-deliver-knopf svg { width: 18px; height: 18px; flex: 0 0 auto; }
html[data-design="d"][data-variante="b4"] #lp-deliver .b4-deliver-knopf:hover { background: var(--b4-k-an); }
html[data-design="d"][data-variante="b4"] #lp-deliver .b4-deliver-knopf:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-flip:focus-visible { outline: 2.5px solid var(--d-laub); outline-offset: 4px; border-radius: var(--d-r-ui); }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-mehr { margin-top: 14px; }
/* Knöpfe einer Reihe auf einer Linie: der Satz der schmalen Karte bricht dreizeilig */
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver :is(.is-share, .is-pdf) .deliver-desc { min-height: 4.5em; }
}
@media (min-width: 1180px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .is-almanac .deliver-desc { min-height: 4.5em; }
}
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-pageind { left: auto; right: 10px; top: 10px; bottom: auto; transform: none; background: rgba(23, 58, 46, .93); }
html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-pageind.is-counter { color: #FFFFFF; top: 10px; bottom: auto; font-size: 12px; }

/* Großansicht der Blätter (js/landing-flip.js): Die Zeile mit Titel und Seitenzahl steht unten im
   Fenster; bei 900 px Fensterhöhe lag sie über dem unteren Rand des Blatts. Das Blatt ist
   deshalb etwas kleiner und rückt nach oben. */
@media (min-width: 641px) {
  html[data-design="d"][data-variante="b4"] .lbf-img { max-height: calc(100vh - 200px); }
  html[data-design="d"][data-variante="b4"] .lbf-stage { max-height: calc(100vh - 200px); transform: translateY(-36px); }
}
/* Die Zeile mittig über left/right statt left: 50 % (steps.css): so darf sie die ganze
   Fensterbreite nutzen und bricht am Handy nicht schon bei halber Breite um */
html[data-design="d"][data-variante="b4"] .lbf-meta { left: 0; right: 0; width: max-content; max-width: calc(100vw - 32px); margin-inline: auto; transform: none; box-sizing: border-box; }
/* Im dunklen Modus tauschen die Gegenregeln (css/design-b4-dunkel-auto.css) das Fichte des Schleiers
   gegen Kreide; darauf standen Titel, Seitenzahl und die weißen Knöpfe kaum lesbar (gefunden 14.10.2026).
   Schleier und Zeile bleiben dunkel wie im hellen Modus. */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .lbf-backdrop { background: rgba(5, 20, 15, .9); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .lbf-meta { background: rgba(255, 255, 255, .1); }

/* Reisekompass-Vorschau (Miniatur): Reiter der Regionen mindestens 11 px. Am Handy passen sie
   so nicht mehr in die Karte (die Leiste schneidet ab) und entfallen; der Kompass selbst hat sie. */
html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-regnav span { font-size: 11px; }
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-regnav { display: none; }
}

/* ---------- Länderwahl ----------
   Die Saisonleiste steht als Satz über dem Raster (js/design-b4-start.js), die Fotos
   stehen eine Zeile tiefer ohnehin. Filter ohne Beschriftungen darüber; die Trefferzeile
   erscheint erst, wenn ein Filter greift. */
html[data-design="d"][data-variante="b4"] #country-month-strip.b4-als-satz .cm-strip { display: none; }
html[data-design="d"][data-variante="b4"] .country-section-head { padding-bottom: 24px; }
html[data-design="d"][data-variante="b4"] .b4-saison {
  margin: 0 0 28px; max-width: 62ch;
  font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--b4-text); text-wrap: pretty;
}
html[data-design="d"][data-variante="b4"] .country-toolbar .filter-label { display: none; }
@media (min-width: 641px) { html[data-design="d"][data-variante="b4"] .country-toolbar { align-items: center; } }
html[data-design="d"][data-variante="b4"] .country-status:not(.filtered) { display: none; }
html[data-design="d"][data-variante="b4"] #country-cont-tabs { box-shadow: none; }
/* Der Reisekompass darüber steht wie die Länderwahl auf dem Seitengrund, ohne Flächenwechsel als
   Grenze; sein unterer Abstand trennt schon. Mit vollen 104 px darüber lagen hier 184 px Weiß wie
   eine leere Stelle (Designcheck 13.10.2026), jetzt zusammen ein Abschnittsabstand. */
html[data-design="d"][data-variante="b4"] .country-section-head { padding-top: 24px; }
html[data-design="d"][data-variante="b4"] .country-section-title { margin: 0 0 14px; }
html[data-design="d"][data-variante="b4"] .country-section-sub { font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--d-tinte-hell); margin: 0; }
/* Filter und Suche mit Luft zum Raster (vorher 0 px, das Suchfeld lag auf den Fotos); die
   Quellenzeile mit vollem Abschnittsabstand zur Kiesel-Fläche darunter (vorher 10 px, wie ein Fehler) */
html[data-design="d"][data-variante="b4"] .country-toolbar { margin-bottom: 28px; }
html[data-design="d"][data-variante="b4"] .country-grid + .d2-quellen { padding-bottom: 80px; max-width: calc(72ch + 2 * var(--b4-rand)); }
/* Tablet: sechs Pillen und das Suchfeld passen nicht in eine Zeile; die Pillen brachen um und
   das Feld stand mittig zwischen zwei Pillenreihen. Das Feld steht deshalb darunter. */
@media (min-width: 641px) and (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .country-toolbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  html[data-design="d"][data-variante="b4"] .country-toolbar > * { max-width: 100%; }
  html[data-design="d"][data-variante="b4"] .country-toolbar .searchwrap { width: min(100%, 420px); }
}

/* ---------- Hero: Kartenstil Skizze oder Satellit (js/hero-v2.js, D4 und B2) ---------- */
html[data-design="d"][data-variante="b4"] .d4-stil { display: inline-flex; margin-top: 10px; text-shadow: none; }
html[data-design="d"][data-variante="b4"] .d-caption.is-below .d4-stil { margin: 6px 0 2px; flex: 0 0 auto; }
/* Kartenstil als runder Symbolknopf unten rechts in der Karte, über der Quellenzeile (Kreis aus dem Knopfsystem,
   ohne Text); gedrückt = Satellit an, gefüllt in der Klickfarbe */
html[data-design="d"][data-variante="b4"] .hero-stil-knopf {
  position: absolute; bottom: 44px; right: 14px; z-index: 650;
  width: var(--b4-kreis); height: var(--b4-kreis); padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%;
  color: var(--b4-text); cursor: pointer;
  box-shadow: 0 1px 3px rgba(23, 58, 46, .19);
}
html[data-design="d"][data-variante="b4"] .hero-stil-knopf:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] .hero-stil-knopf[aria-pressed="true"] { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); }
html[data-design="d"][data-variante="b4"] .hero-stil-knopf:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; }
/* Auf dem Satellitenbild braucht die Schrift eine helle Fläche */
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d4-sat .d-caption:not(.is-below) {
  background: rgba(255, 250, 242, .94);
  padding: 12px 14px; border-radius: var(--d-r-flaeche);
  text-shadow: none;
}
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d4-sat .d-mapattr {
  background: rgba(255, 250, 242, .9); padding: 3px 8px; border-radius: 6px; text-shadow: none;
}
/* Ortsnamen und Fahrzeiten auf dem Satellitenbild: helle Plakette statt Hof */
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d4-sat .stem-name {
  background: rgba(255, 250, 242, .86); border-radius: 6px; text-shadow: none;
}
/* Fahrzeit: dichter Hof wie auf der Ergebniskarte (design-d.css), Größe bleibt für die Platzsuche */
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d4-sat .leg-zeit {
  text-shadow: 0 0 1px #FFFAF2, 0 0 1px #FFFAF2, 0 0 2px #FFFAF2, 0 0 2px #FFFAF2, 0 0 3px #FFFAF2, 0 0 4px #FFFAF2, 0 0 6px rgba(255, 250, 242, .9);
}
html[data-design="d"][data-variante="b4"] .d4-esri { display: none; }
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d4-sat .d4-esri { display: inline; }
/* Am Handy stehen beide Quellenzeilen sichtbar (an und unter der Karte): auf der Karte
   genügt „Powered by Esri“, die Datenanbieter stehen in der Zeile darunter */
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .d-mapattr .d4-esri-namen { display: none; }
}
/* Pin-Fotos im Hero ohne Namenszeile (10.10.2026): Die Pins zeigen nur Fotos aus
   PHOTO_DB (Pexels oder eigene), beide ohne Nennungspflicht; Foto-Pins auf Karten sind
   nach den Bildrechte-Regeln ausgenommen, die Fußzeile nennt Pexels. Pflicht bleiben die
   Streckenquelle (ODbL) und auf dem Satellitenbild Esri. Am Handy fällt die Zeile unter
   der Karte damit weg, außer auf dem Satellitenbild (dort stehen Esris Datenanbieter). */
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard .d-fotos,
html[data-design="d"][data-variante="b4"] .hero-v2-mapcard .d-fotos-sep { display: none; }
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .hero-v2-mapcard:not(.d4-sat):not(.d-cap-below) .d-caption-fotos { display: none; }
  html[data-design="d"][data-variante="b4"] .d-caption-fotos .d4-esri-sep { display: none; }
  /* Luft unter der letzten Zeile: im dunklen Modus endet hier das helle Kartenfenster */
  html[data-design="d"][data-variante="b4"] .hero-v2-mapcard .d-caption { padding-bottom: var(--d-a3); }
}
/* „Route ansehen“ zur Hero-Karte: der Strich liegt schon in Ruhe in Gold, damit der Link
   auch am Handy (ohne Zeigen, also ohne Marker) als Link zu erkennen ist. Beim Zeigen
   gelten die Regeln des Textknopfs (hell Marker, dunkel kräftiger Strich). */
html[data-design="d"][data-variante="b4"] .b4-ansehen:not(:hover),
html[data-design="d"][data-variante="b4"] .d-caption-link:not(:hover) {
  text-decoration-color: var(--b4-marker); text-decoration-thickness: 3px; text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* ---------- Tablet ---------- */
/* Hero am Tablet: Überschrift links, Satz, Knöpfe und Zusagen rechts daneben. Gestapelt stand der
   Text in einer 380 px schmalen Spalte, rechts blieben 600 × 450 px leer, und bei 1024 × 768 begann
   die Karte erst am unteren Rand des ersten Bildschirms (Designcheck 13.10.2026). */
@media (min-width: 769px) and (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .landing-hero-edit {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 44px; align-items: start;
    max-width: none; padding: 36px 0 32px;
  }
  html[data-design="d"][data-variante="b4"] .landing-hero-edit > .landing-h1 { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  html[data-design="d"][data-variante="b4"] .landing-hero-edit > :not(.landing-h1) { grid-column: 2; }
  html[data-design="d"][data-variante="b4"] .landing-hero-edit > .landing-sub { margin-top: 6px; }
}
/* In drei Schritten am Tablet: je Schritt eine Zeile, Text links, Beispiel rechts. In drei Spalten
   wurden die Länderfotos zu 94 × 470 px hohen Streifen und die Fläche von Schritt 2 auf die Höhe
   von Schritt 3 gezogen, unten 230 px leer (Designcheck 13.10.2026). */
@media (min-width: 769px) and (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .how-mini { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 48px; }
  html[data-design="d"][data-variante="b4"] .how-mini-step {
    grid-row: auto; grid-template-rows: auto auto 1fr; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 12px;
  }
  html[data-design="d"][data-variante="b4"] .how-mini-body { grid-column: 1 / 3; grid-row: 2; }
  html[data-design="d"][data-variante="b4"] .how-mini-step > .how-mini-material,
  html[data-design="d"][data-variante="b4"] .how-mini-step > .d4-how-fotos { grid-column: 3; grid-row: 1 / -1; margin: 0 0 0 28px; align-self: start; }
  html[data-design="d"][data-variante="b4"] .d4-how-fotos .hml-card { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .how-mini { column-gap: 28px; }
  /* Ausschnitte: Reisezeit über die volle Breite, die übrigen zu zweit */
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item { grid-column: span 6; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-zeit { grid-column: 1 / -1; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-budget { grid-column: span 6; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-praxis { grid-template-columns: minmax(0, 1fr); }
  html[data-design="d"][data-variante="b4"] #lp-inside .b4-aus-praxis .b4-aus { order: 0; }
}
@media (max-width: 1179px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-grid { gap: 40px 36px; }
  html[data-design="d"][data-variante="b4"] #lp-deliver { --d4-a4: 272px; }
}
/* Tablet: Karte und Reiseführer füllen die erste Reihe, der Almanac stünde allein in der
   zweiten. Dort quer gelegt, der Text neben dem Blatt statt darunter. */
@media (min-width: 769px) and (max-width: 1179px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac {
    display: grid; width: 100%; column-gap: 36px;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr;
  }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > .deliver-stage { grid-column: 1; grid-row: 1 / -1; width: calc(var(--d4-a4) * (1 + var(--d4-versatz))); margin: 0; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > :not(.deliver-stage) { grid-column: 2; justify-self: start; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > .deliver-title { grid-row: 2; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > .deliver-desc { grid-row: 3; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > .b4-deliver-knopf { grid-row: 4; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-almanac > .deliver-mehr { grid-row: 5; }
}

/* ---------- Handy ---------- */
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] #step-0 .lp-section { padding-top: 64px; padding-bottom: 64px; }
  /* So geht's: die Schritte untereinander, Ziffer und Titel auf einer Zeile */
  html[data-design="d"][data-variante="b4"] .how-mini { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; margin-top: 28px; padding-left: 0; }
  html[data-design="d"][data-variante="b4"] .how-mini-step { grid-row: auto; grid-template-rows: none; margin-bottom: 0; }
  html[data-design="d"][data-variante="b4"] .how-mini-pin { left: auto; top: auto; }
  html[data-design="d"][data-variante="b4"] .how-mini-title { font-size: 19px; padding-top: 0; }
  html[data-design="d"][data-variante="b4"] .how-mini-material { margin-top: 16px; }
  html[data-design="d"][data-variante="b4"] .hml-prefs,
  html[data-design="d"][data-variante="b4"] .hmm { padding: 12px; }
  /* Was in deiner Route steckt: die Ausschnitte als Wischreihe wie das Band der Beispielrouten;
     die nächste Fläche schaut rechts heraus. Untereinander wäre der Abschnitt 2.200 px lang. */
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index {
    display: flex; align-items: stretch; gap: 12px; margin: 24px calc(-1 * var(--b4-rand)) 0;
    padding: 0 var(--b4-rand) 4px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--b4-rand); scrollbar-width: none;
  }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index::-webkit-scrollbar { display: none; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item,
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item:is(.b4-aus-zeit, .b4-aus-budget, .b4-aus-praxis) {
    flex: 0 0 86%; box-sizing: border-box; scroll-snap-align: start; padding: 18px 18px 20px; gap: 16px;
  }
  html[data-design="d"][data-variante="b4"] .b4-aus-fenster { padding: 6px 4px 2px; margin-inline: -8px; }
  html[data-design="d"][data-variante="b4"] .b4-aus-betrag { font-size: 34px; }
  html[data-design="d"][data-variante="b4"] .b4-aus-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  html[data-design="d"][data-variante="b4"] .b4-saison { font-size: 17px; margin-bottom: 20px; }
  /* Teilen und Mitnehmen: untereinander, links bündig */
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-grid { flex-direction: column; gap: 44px; margin-top: 28px; }
  html[data-design="d"][data-variante="b4"] #lp-deliver { --d4-a4: min(250px, calc((100vw - 2 * var(--b4-rand)) / 1.62)); }
  /* Text über die ganze Breite; nur das Bild behält seine Breite (die Story ist schmal, ihr
     Text brach sonst in vier kurze Zeilen) */
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card { width: 100%; }
  /* Die Story ist halb so breit wie die aufgeschlagenen Blätter darunter; untereinander klebte
     sie links mit leerer rechter Hälfte. Deshalb Text daneben, mittig zur Story (wie der
     Almanac am Tablet). */
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share {
    display: grid; column-gap: var(--d-a5); align-items: start;
    grid-template-columns: min(44%, 220px) minmax(0, 1fr); grid-template-rows: 1fr repeat(3, auto) 1fr;
  }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > .deliver-stage { --tel: 100; grid-column: 1; grid-row: 1 / -1; width: 100%; margin: 0; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > :not(.deliver-stage) { grid-column: 2; justify-self: start; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > .deliver-title { grid-row: 2; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > .deliver-desc { grid-row: 3; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > .b4-deliver-knopf { grid-row: 4; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card:is(.is-pdf, .is-almanac) .deliver-stage { width: calc(var(--d4-a4) * (1 + var(--d4-versatz))); }
  html[data-design="d"][data-variante="b4"] .country-section-head { padding-top: 12px; }
  html[data-design="d"][data-variante="b4"] .country-toolbar { margin-bottom: 20px; }
  html[data-design="d"][data-variante="b4"] .country-grid + .d2-quellen { padding-bottom: 52px; }
  html[data-design="d"][data-variante="b4"] .country-toolbar .filter-tabs { scroll-snap-type: x proximity; scroll-padding-inline: var(--d-seite); }
  html[data-design="d"][data-variante="b4"] .country-toolbar .filter-tabs button { min-height: 40px; scroll-snap-align: start; }
  html[data-design="d"][data-variante="b4"] .site-footer-nav a { padding-block: 8px; }
}
@media (max-width: 380px) {
  html[data-design="d"][data-variante="b4"] .country-card-brand { font-size: 12px; letter-spacing: 0; }
  html[data-design="d"][data-variante="b4"] .country-grid { column-gap: 12px; }
}
/* Telefon höchstens 220 px breit (bei 768 px stand es 315 × 690 px groß und erdrückte den Abschnitt);
   unter 360 px der Text unter dem Telefon: daneben blieben 135 px, der Satz brach sechszeilig mit
   Trennungen (Designcheck 13.10.2026) */
@media (max-width: 359px) {
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share { display: block; }
  html[data-design="d"][data-variante="b4"] #lp-deliver .deliver-card.is-share > .deliver-stage { width: 62%; margin: 0 0 20px; }
}

/* =====================================================
   B2: was D4 nicht hat
   ===================================================== */

/* Der Hinweis auf den Reisekompass im Hero entfällt; der Kompass hat seinen Abschnitt */
html[data-design="d"][data-variante="b4"] .landing-kompass-link { display: none !important; }

/* ---------- Titel in Waldgrün ---------- */
html[data-design="d"][data-variante="b4"] #step-0 .landing-h1,
html[data-design="d"][data-variante="b4"] #step-0 .chap-title,
html[data-design="d"][data-variante="b4"] #step-0 .country-section-title,
html[data-design="d"][data-variante="b4"] #step-0 .how-mini-title,
html[data-design="d"][data-variante="b4"] #step-0 .deliver-title { color: var(--b4-titel); }
/* Die Kapitelüberschriften hatten eine Breite in ch (für Geologica); Alegreya läuft schmaler.
   40ch: „Lieber mit einer fertigen Route starten?“ steht am Desktop auf einer Zeile */
html[data-design="d"][data-variante="b4"] #step-0 .chap-title { max-width: 40ch; }

/* ---------- Hero ----------
   Aktion wie in B: „Route planen“ in Textmarker-Gelb, daneben „Diese Route ansehen“,
   darunter in klein die Zusagen. Die Bildunterschrift trägt deshalb keinen eigenen Link. */
html[data-design="d"][data-variante="b4"] .d-aktion { gap: 14px 28px; }
html[data-design="d"][data-variante="b4"] .b4-ansehen { font-size: 18px; }
html[data-design="d"][data-variante="b4"] .landing-trust { margin: 22px 0 0; }
html[data-design="d"][data-variante="b4"] .landing-trust .d-trust { max-width: none; font-size: 15px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .d-caption-link { display: none; }
/* Bildzeile in der Kartenecke mit ausgeglichenem Zeilenfall: bei 1920 px brach die lange Fassung
   als „… Küste und / Etosha, 14 Tage.“ um (Designcheck 13.10.2026) */
html[data-design="d"][data-variante="b4"] #step-0 .hero-v2-mapcard .d-caption-t { text-wrap: balance; }   /* #step-0: sonst gewinnt die Regel „pretty“ für alle Absätze (Kennung im :is) */
/* Bildunterschrift unter der Karte (keine Ecke frei): bündig unter der auslaufenden Karte */
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] .hero-v2-mapcard.d-cap-below .d-caption.is-below { bottom: 0; padding-top: 10px; }
}
/* Handy, dunkler Modus: Die Bildzeile unter der Karte gehört zur Seite, nicht zum hellen Fenster.
   Vorher stand sie auf einem weißen Streifen zwischen dunklem Hero und Band, und die Karte lief
   nach Weiß aus (Designcheck 13.10.2026). Jetzt läuft die Karte in den Nachtwald aus, die Zeile
   trägt die dunklen Werte. */
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard { background: #092018; }
  html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard .d-caption.is-below {
    background: transparent; color: #ABBCB5;
    --d-tinte: #F2EEE6; --d-tinte-hell: #ABBCB5; --d-laub: #98C0A9; --d-laub-tief: #B2D1BF;
    --b4-tinte: #98C0A9; --b4-text: #F2EEE6; --b4-titel: #F2EEE6; --b4-grau: #ABBCB5; --b4-unterstrich: rgba(152, 192, 169, .5);
  }
  /* die Quellenzeile steht im dunkelsten Teil des Auslaufs */
  html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard .d-mapattr,
  html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard .d-mapattr a { color: #DBE5E1; text-shadow: 0 0 3px rgba(0, 0, 0, .6); }
}
/* Band der Beispielrouten in Waldgrün; die Karte, die oben gezeigt wird, trägt den Textmarker */
html[data-design="d"][data-variante="b4"] .d-print.is-active .d-print-photo.hsc-cover { outline-color: var(--b4-marker); outline-width: 3px; }
html[data-design="d"][data-variante="b4"] .d-print-on { color: var(--b4-marker); }

/* ---------- In drei Schritten zur Reise: auf Lavur ----------
   Drei Schritte mit ihren Beispielflächen (Länderfotos, Wünsche, Mini-Route). Die Ziffern
   stehen in kleinen waldgrünen Kreisen wie in der Schrittleiste der App, nicht als
   große Zahlen. */
html[data-design="d"][data-variante="b4"] #lp-how { background: var(--b4-lavur); }
html[data-design="d"][data-variante="b4"] .how-mini-pin {
  width: 28px !important; height: 28px !important; min-width: 0; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--b4-daten) !important; color: var(--b4-auf-daten) !important; border: 0; border-radius: 50%;
  font: 800 14px/1 'Alegreya Sans', system-ui, sans-serif !important; letter-spacing: 0;
}
html[data-design="d"][data-variante="b4"] .hml-prefs,
html[data-design="d"][data-variante="b4"] .hmm { border-color: var(--b4-linie); }
/* Die Beispielflächen sind verkleinerte echte Bausteine und folgen deren Werten.
   Länderfotos mit Etikett wie „Ankunft“ auf den Zielkarten in Schritt 3 */
/* Das Vietnam-Foto (Ha Giang) hat oben viel weißen Himmel; in den hohen Fotos von Schritt 1 sah
   es wie ein nicht geladenes Bild aus, die Pille stand weiß auf Weiß (Designcheck 13.10.2026).
   Deshalb näher heran an Tal und Straße. */
html[data-design="d"][data-variante="b4"] .hml-card[style*="vietnam"] { background-size: auto 170%; background-position: 45% 100%; }
html[data-design="d"][data-variante="b4"] .hml-card i { left: 7px; top: 7px; padding: 2px 9px; border-radius: 999px; background: var(--b4-papier); color: var(--b4-text); font-size: 12.5px; font-weight: 700; }
/* Wünsche: Zeilen wie die Interessen in Schritt 2, Stufen-Schalter wie .pref-seg */
html[data-design="d"][data-variante="b4"] :is(.hml-int svg),
html[data-design="d"][data-variante="b4"] :is(.hml-int--hi svg) { color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .hml-int-lbl { font-size: 14px; font-weight: 700; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] :where(.hml-seg):is(.hml-seg, .hml-int--hi .hml-seg),
html[data-design="d"][data-variante="b4"] :is(.hml-int--hi .hml-seg) { padding: 2px; gap: 2px; border: 0; background: var(--b4-papier); box-shadow: inset 0 0 0 1.5px var(--d-line-stark); }
html[data-design="d"][data-variante="b4"] .hml-seg i { padding: 4px 9px; font-size: 12.5px; font-weight: 500; color: var(--d-tinte-hell); }
html[data-design="d"][data-variante="b4"] :where(.hml-seg i.on):is(.hml-seg i.on, .hml-int--hi .hml-seg i.on),
html[data-design="d"][data-variante="b4"] :is(.hml-int--hi .hml-seg i.on) { background: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; box-shadow: none; }
/* Gewählt (Reisegruppe, gepinnter Ort) wie die gewählte Kachel und „Gepinnt“;
   die Reisezeit als neutrale Angabe wie der Nächte-Schalter */
html[data-design="d"][data-variante="b4"] .hml-chip,
html[data-design="d"][data-variante="b4"] .hml-chip--pin {
  min-height: 32px; padding: 0 13px; gap: 6px;
  background: var(--d-laub-blass); border: 1.5px solid var(--b4-tinte); border-radius: 999px;
  color: var(--b4-tinte); font-size: 13.5px; font-weight: 700;
}
html[data-design="d"][data-variante="b4"] .hml-chip--pin svg { color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .hml-tick { margin-right: 0; color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .hml-season {
  min-height: 32px; padding: 0 13px;
  background: var(--b4-papier); box-shadow: inset 0 0 0 1.5px var(--d-line-stark); border-radius: 999px;
  color: var(--b4-text); font-size: 13.5px; font-weight: 500;
}
/* Mini-Route wie die Karte: Land mit Bleistiftkante in Waldgrün, Strecke Waldgrün auf
   gelbem Textmarker (Hülle setzt js/design-b4-start.js), Pins als Kapseln, Flug gepunktet */
html[data-design="d"][data-variante="b4"] .hmm-land { fill: #FFFAF2; stroke: rgba(23, 58, 46, .43); stroke-width: 0.7; }
html[data-design="d"][data-variante="b4"] .hmm-leg { stroke: #173A2E; stroke-width: 1.5; }
html[data-design="d"][data-variante="b4"] .hmm-leg-air { stroke-dasharray: 0.1 3.4; stroke-width: 1.9; }
html[data-design="d"][data-variante="b4"] .b4-hmm-marker { fill: none; stroke: var(--b4-marker); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; }
html[data-design="d"][data-variante="b4"] .hmm-reveal { stroke-width: 8; }
html[data-design="d"][data-variante="b4"] .hmm-pin circle { fill: #173A2E; stroke: #FFFFFF; stroke-width: 1.6; }
html[data-design="d"][data-variante="b4"] .hmm-pin text { font-family: 'Alegreya Sans', system-ui, sans-serif; font-weight: 800; fill: #FFFFFF; }   /* fest weiß: dunkel erbte die Ziffer die helle Schrift nicht und stand dunkel auf dunkel */
/* Liste daneben wie die Perlenschnur der Ergebnisseite: Kapseln auf einer durchgehenden Linie */
html[data-design="d"][data-variante="b4"] .hml-route::before { border-left: 2px solid #C8DAD2; opacity: 1; left: 10.5px; }
html[data-design="d"][data-variante="b4"] .hml-rpin { background: var(--b4-daten) !important; box-shadow: 0 0 0 2px var(--b4-papier) !important; font-weight: 800; }
/* Das Ziel trug im alten Design einen Stern in Großschrift; jetzt eine Nummer wie die anderen */
html[data-design="d"][data-variante="b4"] .hml-rpin--star { font-size: 10.5px; color: var(--b4-auf-tinte); border: 0; }
html[data-design="d"][data-variante="b4"] .hml-route-row b { font-weight: 700; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .hml-rn { font-size: 13px !important; color: var(--d-tinte-hell) !important; }

/* Kartentexte: Alegreya Sans braucht einen Grad mehr als Geologica */
html[data-design="d"][data-variante="b4"] :where(.how-mini-body):is(.how-mini-body, #lp-inside .lp-index-desc),
html[data-design="d"][data-variante="b4"] :is(#lp-inside .lp-index-desc),
html[data-design="d"][data-variante="b4"] :is(#lp-deliver .deliver-desc) { font-size: 17px; line-height: 1.5; }
/* Keine einzelnen Wörter in der letzten Zeile („(Pexels)“, „Bildnachweise.“, „Reiseführer.“) */
html[data-design="d"][data-variante="b4"] :is(#step-0, .site-footer) p,
html[data-design="d"][data-variante="b4"] :is(#step-0, .site-footer) li,
html[data-design="d"][data-variante="b4"] :is(#step-0, .site-footer) dd,
html[data-design="d"][data-variante="b4"] :is(#step-0, .site-footer) figcaption { text-wrap: pretty; }

/* ---------- Zwei Ebenen von Überschriften ----------
   Groß stehen nur die zwei Kapitel, um die es geht: wie die Route entsteht und die Wahl
   des Landes. Was drinsteckt, die Exporte, der Reisekompass und die fertigen Routen sind
   Unterkapitel mit kleinerer Überschrift und etwas weniger Luft. */
html[data-design="d"][data-variante="b4"] :is(#lp-inside, #lp-deliver, #lp-kompass, .lp-leine) .chap-title {
  font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); letter-spacing: var(--d-track-kapitel);
}
html[data-design="d"][data-variante="b4"] #step-0 #lp-inside,
html[data-design="d"][data-variante="b4"] #step-0 #lp-deliver,
html[data-design="d"][data-variante="b4"] #step-0 #lp-kompass { padding-top: 80px; padding-bottom: 80px; }

/* ---------- Flächen im Wechsel ----------
   Lavur für die Schritte, die Exporte und die fertigen Routen; dazwischen Weiß */
html[data-design="d"][data-variante="b4"] #lp-deliver { background: var(--b4-lavur); }
html[data-design="d"][data-variante="b4"] .lp-routes-teaser.lp-leine { background: var(--b4-lavur); padding-top: 80px; padding-bottom: 88px; }

/* ---------- Reisekompass: Text links, die Weltkarte des Monats rechts ----------
   Karte und Monatsleiste baut js/kompass-teaser.js mit den Farben aus --kompass-*. Der
   Knopf ist eine Zweitaktion des Knopfsystems; D setzt ihn mit !important. */
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-inner { max-width: none; margin: 0; gap: 64px; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-copy .lp-lead { margin-bottom: 28px; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--b4-k-m); padding: 0 22px; box-sizing: border-box;
  background: var(--b4-papier) !important; color: var(--b4-tinte) !important;
  border: 1.5px solid var(--b4-tinte) !important; border-radius: var(--d-r-ui) !important; box-shadow: none !important;
  font: 700 16px/1.1 'Alegreya Sans', system-ui, sans-serif; letter-spacing: 0.005em; text-decoration: none; transform: none;
}
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-cta:hover { background: var(--b4-k-an) !important; transform: none; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-cta:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-cta .arrow { display: none; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-alt { margin-top: 20px; font-size: 16px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-alt a { border-bottom: 0; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-stage { background: var(--b4-papier); border: 1px solid var(--b4-linie); border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-visual:hover .lpk-stage { border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-visual:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 4px; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-regnav,
html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-legend { border-color: var(--b4-linie); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] #lp-kompass :is(.lpk-regnav span.on),
html[data-design="d"][data-variante="b4"] #lp-kompass :where(.lpk-mbtn.on):is(.lpk-mbtn.on, .lpk-regnav span.on) { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); }
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-caption { font-size: 14px; font-weight: 500; color: var(--b4-grau); text-align: left; }
/* Ein Rahmen genügt (Designcheck 13.10.2026: Außenkasten, Kartenfenster und Legendenkasten lagen
   dreifach ineinander, schwerer als der Rest der Seite): das Kartenfenster behält seine Linie, der
   Außenkasten und die Legende nicht. Die Bildzeile steht links wie jede andere. */
html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-visual { border-color: transparent; padding-left: 0; padding-right: 0; }
html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-legend { border-color: transparent; }
/* Unter 1400 px passten die Monate nicht in die Leiste; sie war gerollt, „Bin flexibel“ fehlte, von
   „Jan“ stand ein blasses „n“. Die Vorschau zeigt einen Monat, „Bin flexibel“ entfällt dort. */
@media (max-width: 1399px) {
  html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-rail > .lpk-mbtn:first-child { display: none; }
}
/* Tablet und kleine Laptops: die Monate in zwei Reihen statt gerollt und links abgeschnitten */
@media (min-width: 769px) and (max-width: 1279px) {
  html[data-design="d"][data-variante="b4"] #lp-kompass .lpk-rail { flex-wrap: wrap; row-gap: 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Fertige Routen: Kopf mit Link und Blätterknöpfen wie beim Band ---------- */
html[data-design="d"][data-variante="b4"] .lp-leine-head { align-items: flex-end; }
html[data-design="d"][data-variante="b4"] .b4-leine-rechts { display: flex; align-items: center; gap: 20px; }
html[data-design="d"][data-variante="b4"] .b4-leine-rechts .lp-leine-nav { margin: 0; display: flex; gap: 8px; }
html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta:hover { background: transparent; }
html[data-design="d"][data-variante="b4"] .lp-leine-wrap { margin-top: 28px; }
html[data-design="d"][data-variante="b4"] .lp-leine-line { padding-top: 0; }

/* ---------- Fertige Routen als Postkarten an der Routenlinie (js/design-b4-start.js postkarten) ----------
   Die Leine ist unsere Route: Goldhülle mit Linie in Datenfarbe, Haltepunkte wie die Orte auf der
   Karte, die Karten hängen an kurzen Stielen. Darüber Filter nach Anlass. Lage, Schwingen und
   Durchhängen der Linie rechnet das Skript; hier stehen nur Form und Farbe. */
html[data-design="d"][data-variante="b4"] .b4-pk-satz { margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: var(--b4-grau); max-width: 52ch; }
html[data-design="d"][data-variante="b4"] .b4-pk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
html[data-design="d"][data-variante="b4"] .b4-pk-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--b4-pille); padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--b4-k-rand); border-radius: 999px; background: var(--b4-papier); color: var(--b4-text);
  font: 600 15px/1 'Alegreya Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
html[data-design="d"][data-variante="b4"] .b4-pk-chip:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] .b4-pk-chip:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; }
/* Gewählt wie jede Pille (5.1): Waldgrün gefüllt, die Zahl im hellen Ton der Reiter; vorher in
   Datenfarbe und damit anders als die Länderfilter weiter oben (Designcheck 13.10.2026) */
html[data-design="d"][data-variante="b4"] .b4-pk-chip[aria-pressed="true"] { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; }
html[data-design="d"][data-variante="b4"] .b4-pk-zahl { font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
html[data-design="d"][data-variante="b4"] .b4-pk-chip[aria-pressed="true"] .b4-pk-zahl { color: var(--b4-auf-tinte-2); opacity: 1; }
html[data-design="d"][data-variante="b4"] .b4-pk-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
html[data-design="d"][data-variante="b4"] .lp-leine-wrap:has(.b4-pk-leine) { margin-top: 10px; }
html[data-design="d"][data-variante="b4"] .lp-leine-line.b4-pk-leine { display: block; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; padding-top: 6px; padding-bottom: 8px; }
html[data-design="d"][data-variante="b4"] .lp-leine-line.b4-pk-leine::before { display: none; }
html[data-design="d"][data-variante="b4"] .b4-pk-buehne { position: relative; min-height: 420px; }
html[data-design="d"][data-variante="b4"] .b4-pk-linie { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
html[data-design="d"][data-variante="b4"] .b4-pk-huelle { fill: none; stroke: var(--b4-marker); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
html[data-design="d"][data-variante="b4"] .b4-pk-kern { fill: none; stroke: var(--b4-daten); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html[data-design="d"][data-variante="b4"] .b4-pk { position: absolute; left: 0; top: 0; width: 268px; transform-origin: 50% 0; will-change: transform; }
html[data-design="d"][data-variante="b4"] .b4-pk[hidden] { display: none; }
html[data-design="d"][data-variante="b4"] .b4-pk-stiel { position: absolute; left: 50%; top: 0; width: 2px; height: 20px; margin-left: -1px; background: var(--b4-daten); }
html[data-design="d"][data-variante="b4"] .b4-pk-halt { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; box-sizing: border-box; border-radius: 50%; background: var(--b4-papier); border: 3px solid var(--b4-daten); }
html[data-design="d"][data-variante="b4"] .b4-pk-papier {
  position: relative; margin-top: 20px; padding: 10px 10px 12px; border-radius: 4px; background: var(--b4-papier);
  box-shadow: 0 1px 0 rgba(23, 58, 46, .05), 0 16px 30px -14px rgba(23, 58, 46, .41);
}
html[data-design="d"][data-variante="b4"] .b4-pk-bild { position: relative; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .b4-pk-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-design="d"][data-variante="b4"] .b4-pk-etikett {
  position: absolute; left: 8px; top: 8px; padding: 5px 10px; border-radius: 999px; background: var(--b4-papier); color: var(--b4-text);
  font: 700 13px/1 'Alegreya Sans', system-ui, sans-serif;
}
html[data-design="d"][data-variante="b4"] .b4-pk-karte {
  position: absolute; right: 8px; bottom: 8px; width: 42%; aspect-ratio: 800 / 572; border-radius: 6px; overflow: hidden;
  border: 2.5px solid var(--b4-papier); box-shadow: 0 6px 14px rgba(23, 58, 46, .32); background: var(--b4-lavur);
}
html[data-design="d"][data-variante="b4"] .b4-pk-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-design="d"][data-variante="b4"] .b4-pk-link { display: block; margin-top: 12px; font: 800 19px/1.2 'Alegreya Sans', system-ui, sans-serif; color: var(--b4-titel); text-decoration: none; }
html[data-design="d"][data-variante="b4"] .b4-pk-link::after { content: ''; position: absolute; inset: 0; border-radius: 4px; }
html[data-design="d"][data-variante="b4"] .b4-pk-link:focus-visible { outline: none; }
html[data-design="d"][data-variante="b4"] .b4-pk-link:focus-visible::after { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }
html[data-design="d"][data-variante="b4"] .b4-pk-papier:hover .b4-pk-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
html[data-design="d"][data-variante="b4"] .b4-pk-unter { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--b4-grau); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-design="d"][data-variante="b4"] .b4-pk-meta { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .b4-pk-quelle { position: relative; z-index: 1; margin: 6px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--b4-grau); }   /* Bildnachweis: kleinste Lesestufe (Abschnitt 3), vorher 12 px */
html[data-design="d"][data-variante="b4"] .b4-pk-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Leinwände im Stil Druck (seit 13.10.2026, js/design-b4-start.js leinwand): das Plakat der
   Teilen-Funktion als aufgezogene Leinwand mit sichtbarer Kante, darunter ein Schild mit Name und
   Eckdaten. Der Schatten ist hier Teil des Gegenstands (Leinwand an der Leine), wie bei den
   Postkarten die bewusste Ausnahme zu Abschnitt 9. */
html[data-design="d"][data-variante="b4"] .b4-pk-galerie .b4-pk { width: 300px; }
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-papier { margin-top: 20px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-bild {
  aspect-ratio: 2 / 3; border-radius: 1px; overflow: visible; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(23, 58, 46, .09), 5px 6px 0 -1px rgba(23, 58, 46, .1), 5px 6px 0 0 rgba(23, 58, 46, .17), 0 22px 30px -16px rgba(23, 58, 46, .54);
}
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
/* Etikett als kleines Schild in Datenfarbe auf dem Papier (weiß auf Creme hob sich nicht ab) */
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-etikett { left: 10px; top: 10px; z-index: 1; background: var(--b4-daten); color: var(--b4-auf-daten); }
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-link { margin-top: 18px; font-size: 18px; }
html[data-design="d"][data-variante="b4"] .b4-pk--leinwand .b4-pk-meta { margin-top: 4px; font-weight: 600; color: var(--b4-grau); }
@media (min-width: 769px) and (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .b4-pk-galerie .b4-pk { width: 280px; }
}
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .b4-pk-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 22px calc(-1 * var(--b4-rand)) 0; padding: 0 var(--b4-rand) 4px; }
  html[data-design="d"][data-variante="b4"] .b4-pk-filter::-webkit-scrollbar { display: none; }
  html[data-design="d"][data-variante="b4"] :where(.b4-pk):is(.b4-pk, .b4-pk-galerie .b4-pk),
  html[data-design="d"][data-variante="b4"] :is(.b4-pk-galerie .b4-pk) { width: min(72vw, 270px); }
  html[data-design="d"][data-variante="b4"] .b4-pk-satz { font-size: 16.5px; }
}

@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .d-aktion { gap: 12px 20px; }
  html[data-design="d"][data-variante="b4"] .landing-trust { order: 2; margin: 0 0 14px; }
  /* Erklärsatz wie im Hero von D1 gleich unter der Überschrift, vor Knopf und Karte: was
     Routaris ist, steht so schon im ersten Bild (vorher erst unter der Karte) */
  html[data-design="d"][data-variante="b4"] .landing-sub { order: 2; margin: 0 0 18px; font-size: 17.5px; line-height: 1.48; text-wrap: pretty; max-width: 52ch; }   /* Lesemaß: bei 768 px liefen sonst 100 Zeichen je Zeile */
  /* Hero samt Karte im ersten Bild (js/design-b4-start.js): „Kostenlos …“ neben dem Knopf
     wie in D1, „Diese Route ansehen“ als „Route ansehen“ unter der Karte */
  html[data-design="d"][data-variante="b4"] .b4-ansehen { display: none; }
  html[data-design="d"][data-variante="b4"] .d-aktion { flex-wrap: nowrap; align-items: center; margin: 0 0 16px; }
  html[data-design="d"][data-variante="b4"] .d-aktion > .landing-trust { order: 3; margin: 0; }
  html[data-design="d"][data-variante="b4"] .d-aktion > .landing-trust .d-trust { display: block; font-size: 14px; line-height: 1.35; max-width: 19ch; }
  html[data-design="d"][data-variante="b4"] .d-caption-link { display: inline; }
  /* Reisekompass und fertige Routen (nach den Grundregeln oben, deshalb hier) */
  html[data-design="d"][data-variante="b4"] #lp-kompass .lp-kompass-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html[data-design="d"][data-variante="b4"] .lp-routes-teaser.lp-leine { padding-top: 52px; padding-bottom: 56px; }
  html[data-design="d"][data-variante="b4"] #step-0 #lp-inside,
  html[data-design="d"][data-variante="b4"] #step-0 #lp-deliver,
  html[data-design="d"][data-variante="b4"] #step-0 #lp-kompass { padding-top: 52px; padding-bottom: 52px; }
  html[data-design="d"][data-variante="b4"] :is(#lp-inside, #lp-deliver, #lp-kompass, .lp-leine) .chap-title { font-size: 26px; line-height: 1.1; }
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-desc { font-size: 16.5px; }
  html[data-design="d"][data-variante="b4"] .b4-leine-rechts .lp-leine-nav { display: none; }
}
/* Unter 360 px wird der Knopf breit (design-d-start.css); „Kostenlos …“ rückt dann
   darunter, statt neben dem Knopf über den Rand zu ragen */
@media (max-width: 359px) {
  html[data-design="d"][data-variante="b4"] .d-aktion { flex-wrap: wrap; }
  html[data-design="d"][data-variante="b4"] .d-aktion > .landing-trust .d-trust { max-width: none; }
}

/* ---------- Dunkler Modus: Startseite ----------
   Die Hero-Karte steht als helles Fenster auf dem Nachtwald; am Desktop links gerundet
   (rechts läuft sie bis an den Rand), am Handy über die volle Breite. */
@media (min-width: 1100px) {
  html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard { border-radius: 18px 0 0 18px; overflow: hidden; }
}
/* Abschnitte, die hell auf dem weißen Seitengrund stehen, nehmen auch dunkel den Seitengrund
   (--cream ist dunkel die Fläche); sonst lagen die Kacheln von „Was in deiner Route steckt“
   als Fläche auf Fläche und verschwanden */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #step-0 #lp-inside,
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #step-0 #lp-kompass { background: var(--d-grund); }
/* Kacheln auf Abschnitten, die dunkel die Fläche tragen (Designcheck 13.10.2026: dort lagen sie
   Fläche auf Fläche, nur der Rand oder ein unsichtbarer Schatten trennte):
   - die Ausschnitte von Schritt 2 und 3 als Fenster in die Oberfläche, auf deren Seitengrund;
   - die Postkarten als Papier eine Stufe heller, mit feiner Kante statt des Schattens. */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #lp-how .hml-prefs,
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #lp-how .hmm { background: var(--d-grund); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-pk-papier { background: var(--d-flaeche-2); box-shadow: 0 0 0 1px var(--b4-linie), 0 16px 30px -14px rgba(0, 0, 0, .5); }
/* Leinwände bleiben auch dunkel Papier; ohne Rahmen der Postkarte, der Schatten fällt dunkler */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-pk--leinwand .b4-pk-papier { background: none; box-shadow: none; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-pk--leinwand .b4-pk-bild { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 5px 6px 0 -1px rgba(242, 238, 230, .28), 5px 6px 0 0 rgba(0, 0, 0, .35), 0 22px 34px -14px rgba(0, 0, 0, .7); }
/* Weltkarte des Reisekompass: helles Fenster wie die Karten */
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #lp-kompass .lpk-stage { background: #FFFFFF; border-color: transparent; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] #lp-kompass .lpk-regnav span:not(.on) { color: #4B6259; }

/* =====================================================
   BAND DER BEISPIELROUTEN AM HANDY (07.10.2026)
   Befund (User): Die Wischfotos waren 281 × 520 px groß. Hero-Karte und Band passten nie
   zusammen ins Bild (1.184 px von der Kartenoberkante bis zum Ende der ersten Bandkarte,
   784 px Fenster); ein Tipp rollte zur Karte hoch, für die nächste Route ging es wieder
   hinunter. Jetzt am Handy:
   · Zeilenkarten: Foto 96 px quadratisch links, rechts Land, Route, Daten und Bildnachweis.
     Karte und Band brauchen zusammen rund 700 px und stehen gemeinsam im Bild.
   · Die Karten rasten mittig ein wie das Karussell in Schritt 3; die eingerastete Karte
     wechselt die Route auf der Karte darüber (bandKoppeln in js/design-b4-start.js).
   · Ohne Mini-Karte und ohne „Oben auf der Karte“: die große Karte steht ja darüber.
   ===================================================== */
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .d-strip-head { margin-top: 24px; padding: 24px 0 4px; }
  html[data-design="d"][data-variante="b4"] .d-strip-title { font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip { gap: 12px; padding: 12px 10vw 16px; scroll-padding-left: 0; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print {
    flex: 0 0 80vw; max-width: 320px;
    scroll-snap-align: center;
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
    align-content: start; text-align: left;
  }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-photo.hsc-cover {
    grid-column: 1; grid-row: 1 / span 4; align-self: start;
    width: 96px; height: 96px; aspect-ratio: 1;
  }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-stempel,
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-on { display: none; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-land { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 1.2; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-route { grid-column: 2; grid-row: 2; margin: 0; font-size: 14.5px; line-height: 1.35; -webkit-line-clamp: 1; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-meta { grid-column: 2; grid-row: 3; margin: 0; }
  /* Bildnachweis vollständig, notfalls in zwei Zeilen (nie abgeschnitten) */
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print .d-print-cap { grid-column: 2; grid-row: 4; margin: 2px 0 0; min-height: 0; }
}

/* Länderkacheln (10.10.2026): die Ortszeile übernimmt die Strecke der Beispielroute aus dem Band
   (js/design-b4-start.js, kachelOrte) und darf deshalb zwei Zeilen haben statt abgeschnitten zu werden */
html[data-design="d"][data-variante="b4"] .country-card { padding-bottom: 80px; }
html[data-design="d"][data-variante="b4"] .country-card .country-card-img { bottom: 80px; }
html[data-design="d"][data-variante="b4"] .country-card-name { top: calc(100% - 72px); }
html[data-design="d"][data-variante="b4"] .country-card-brand {
  top: calc(100% - 49px); white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* Kachelfotos fest in 4:3 (js/design-b4-start.js laenderFotos): die eigenen Fotos sind 3:2 und
   standen sonst niedriger als die übrigen */
html[data-design="d"][data-variante="b4"] .country-card img.country-card-img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
/* Unter 360 px brauchen lange Strecken drei Zeilen („Kapstadt, Garden Route, Krüger-Nationalpark
   und Johannesburg“); mit zwei standen Südafrika, Kanada und Neuseeland mit „…“ da (5.10: nicht
   abschneiden, Designcheck 13.10.2026) */
@media (max-width: 359px) {
  html[data-design="d"][data-variante="b4"] .country-card { padding-bottom: 98px; }
  html[data-design="d"][data-variante="b4"] .country-card .country-card-img { bottom: 98px; }
  html[data-design="d"][data-variante="b4"] .country-card-name { top: calc(100% - 90px); }
  html[data-design="d"][data-variante="b4"] .country-card-brand { top: calc(100% - 67px); -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ---------- Band am Desktop und Tablet: kompakt unter der Karte, an der Routenlinie ----------
   (js/design-b4-start.js bandLinie, seit 13.10.2026) Vorher 280 × 522 px je Karte und 130 px
   Abstand: wer ein Land wählte, sah die Karte darüber kaum noch. Jetzt Foto 3:2, eine Zeile Route,
   die gewählte Route hängt am goldenen Haltepunkt; „Oben auf der Karte“ entfällt. */
@media (min-width: 769px) {
  html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .d-strip-head { padding-top: 26px; padding-bottom: 4px; }
  html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .d-strip-title { font-size: 26px; line-height: 1.15; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip { position: relative; padding-top: 42px; gap: 22px; }
  html[data-design="d"][data-variante="b4"] .hero-v2-strip-card.d-print { flex-basis: 212px; position: relative; }
  html[data-design="d"][data-variante="b4"] .d-print-photo.hsc-cover { aspect-ratio: 3 / 2; }
  html[data-design="d"][data-variante="b4"] .d-print-stempel { width: 50px; padding: 3px; right: 6px; bottom: 6px; }
  html[data-design="d"][data-variante="b4"] .d-print-cap { margin: 8px 0 3px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-design="d"][data-variante="b4"] .d-print-land { font-size: 19px; line-height: 1.25; }
  html[data-design="d"][data-variante="b4"] .d-print-route { font-size: 14.5px; -webkit-line-clamp: 1; }
  html[data-design="d"][data-variante="b4"] .d-print-on { display: none; }
  html[data-design="d"][data-variante="b4"] .d-print.is-active .d-print-photo.hsc-cover { outline-color: var(--b4-marker); }
  html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .d-mapnote { padding-bottom: 30px; }
  /* Keine Mini-Karte im Foto, wie am Handy: die große Karte steht darüber, die 44 px kleine Skizze
     las sich blass wie ein leerer Platzhalter (Designcheck 13.10.2026) */
  html[data-design="d"][data-variante="b4"] .hero-v2-strip .d-print-stempel { display: none; }
  html[data-design="d"][data-variante="b4"] .b4-band-linie { position: absolute; left: 0; top: 6px; overflow: visible; pointer-events: none; }
  html[data-design="d"][data-variante="b4"] .b4-band-huelle { fill: none; stroke: var(--b4-marker); stroke-width: 8; stroke-linecap: round; }
  html[data-design="d"][data-variante="b4"] .b4-band-kern { fill: none; stroke: var(--b4-daten); stroke-width: 2.5; stroke-linecap: round; }
  html[data-design="d"][data-variante="b4"] .b4-band-stiel { position: absolute; left: 50%; top: -21px; width: 2px; height: 21px; margin-left: -1px; background: var(--d2-l-rand); }
  html[data-design="d"][data-variante="b4"] .b4-band-halt {
    position: absolute; left: 50%; top: -28px; width: 14px; height: 14px; margin-left: -7px; box-sizing: border-box; z-index: 1;
    border-radius: 50%; background: var(--b4-papier); border: 3px solid var(--b4-daten);
  }
  html[data-design="d"][data-variante="b4"] .d-print.is-active .b4-band-halt { width: 20px; height: 20px; margin-left: -10px; top: -31px; background: var(--b4-marker); border-color: var(--b4-papier); }
}

/* ---------- Blättern im Hero (js/design-b4-start.js heroBlaettern) ----------
   Desktop und Tablet: zwei Knöpfe in der Bildunterschrift der Karte mit dem Namen des vorigen
   und nächsten Lands. Handy: Wischen über die Karte, einmal ein Hinweis unten auf der Karte. */
html[data-design="d"][data-variante="b4"] .b4-blaettern { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html[data-design="d"][data-variante="b4"] .b4-blaettern-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; box-sizing: border-box;
  border: 1.5px solid var(--b4-k-rand); border-radius: 999px; background: var(--b4-papier); color: var(--b4-tinte);
  font: 700 14.5px/1 'Alegreya Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
html[data-design="d"][data-variante="b4"] .b4-blaettern-knopf:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] .b4-blaettern-knopf:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; }
html[data-design="d"][data-variante="b4"] .b4-wisch-hinweis {
  position: absolute; left: 50%; bottom: 18px; z-index: 1200; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--b4-daten); color: var(--b4-auf-daten); font: 700 15px/1 'Alegreya Sans', system-ui, sans-serif;
  box-shadow: 0 8px 20px rgba(23, 58, 46, .3); pointer-events: none; transition: opacity .5s ease;
}
html[data-design="d"][data-variante="b4"] .b4-wisch-hinweis.is-weg { opacity: 0; }
html[data-design="d"][data-variante="b4"] .b4-wisch-hand { position: relative; width: 28px; height: 16px; overflow: hidden; }
html[data-design="d"][data-variante="b4"] .b4-wisch-hand::before, html[data-design="d"][data-variante="b4"] .b4-wisch-hand::after {
  content: ''; position: absolute; top: 4px; width: 7px; height: 7px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); animation: b4-wischen 1.3s ease-in-out infinite;
}
html[data-design="d"][data-variante="b4"] .b4-wisch-hand::before { left: 12px; }
html[data-design="d"][data-variante="b4"] .b4-wisch-hand::after { left: 20px; animation-delay: .15s; }
html[data-design="d"][data-variante="b4"] .b4-wisch-hinweis.is-ruhig .b4-wisch-hand::before, html[data-design="d"][data-variante="b4"] .b4-wisch-hinweis.is-ruhig .b4-wisch-hand::after { animation: none; }
@keyframes b4-wischen { 0% { translate: 8px 0; opacity: 0; } 35% { opacity: 1; } 100% { translate: -12px 0; opacity: 0; } }
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .b4-blaettern { display: none; }
}

/* ---------- Reihenfolge und Länderwahl am Handy (14.10.2026) ----------
   Die Zweitrouten stehen jetzt zwischen Reisekompass und Länderwahl (js/design-b4-start.js,
   reihenfolge). Über der Länderwahl liegt damit eine Kiesel-Fläche: wieder ein voller
   Abschnittsabstand statt der 24 px (Handy 12 px), mit denen sie an den Reisekompass anschloss. */
html[data-design="d"][data-variante="b4"] .country-section-head { padding-top: 80px; }
/* Am Handy drei Spalten mit Foto und Namen: zwei Spalten mit Foto und zweizeiliger Strecke waren
   für 30 Länder fast 4.000 px hoch, rund fünf Bildschirme, und die Zweitrouten dahinter erreichte
   kaum jemand. Die Strecke jedes Lands steht im Band unter der Karte. */
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .country-section-head { padding-top: 52px; }
}
@media (max-width: 640px) {
  html[data-design="d"][data-variante="b4"] .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 16px; }
  html[data-design="d"][data-variante="b4"] .country-card { padding-bottom: 28px; }
  html[data-design="d"][data-variante="b4"] .country-card .country-card-img { bottom: 28px; }
  html[data-design="d"][data-variante="b4"] .country-card-name { top: calc(100% - 23px); font-size: 16px; line-height: 1.2; }
  html[data-design="d"][data-variante="b4"] .country-card-brand { display: none; }
}

/* ---------- Fragen vor der ersten Route (14.10.2026, js/design-b4-start.js fragen) ----------
   Kiesel wie die Zweitrouten, am Desktop der Kopf links (5 Teile) und die Fragen rechts (7).
   Jede Frage ist ein <details>: die ganze Zeile öffnet und schließt, das Zeichen rechts wird vom
   Plus zum Minus. Antworten im Lesemaß, Links als Textknöpfe (b4-link). */
html[data-design="d"][data-variante="b4"] #lp-fragen { background: var(--b4-lavur); scroll-margin-top: var(--sticky-top, 86px); }
html[data-design="d"][data-variante="b4"] #country-section { scroll-margin-top: var(--sticky-top, 86px); }   /* „mit Kind planen“ aus den Fragen: Überschrift nicht unter der Kopfleiste */   /* Anker aus „Wie Routaris die Route prüft“ landet unter dem Kopf, wie die Länderwahl */
html[data-design="d"][data-variante="b4"] #step-0 #lp-fragen { padding-top: 80px; padding-bottom: 88px; }
html[data-design="d"][data-variante="b4"] #lp-fragen .chap-title {
  margin: 0; font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); letter-spacing: var(--d-track-kapitel); text-wrap: balance;
}
html[data-design="d"][data-variante="b4"] .b4-fragen-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
  grid-template-areas: "titel liste" "kontakt liste"; column-gap: 64px; row-gap: 18px; align-items: start;
}
html[data-design="d"][data-variante="b4"] .b4-fragen-titel { grid-area: titel; }
html[data-design="d"][data-variante="b4"] .b4-fragen-liste { grid-area: liste; }
html[data-design="d"][data-variante="b4"] .b4-fragen-kontakt {
  grid-area: kontakt; margin: 0; max-width: 36ch;
  font-size: var(--d-fs-text); line-height: 1.5; color: var(--b4-text); text-wrap: pretty;
}
html[data-design="d"][data-variante="b4"] .b4-fragen-liste { border-top: 1px solid var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .b4-frage { border-bottom: 1px solid var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .b4-frage > summary {
  display: flex; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: var(--d-fs-zwischen); line-height: 1.25; font-weight: 700; color: var(--b4-titel);
}
html[data-design="d"][data-variante="b4"] .b4-frage > summary::-webkit-details-marker { display: none; }
html[data-design="d"][data-variante="b4"] .b4-frage-text { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
html[data-design="d"][data-variante="b4"] .b4-frage > summary:hover .b4-frage-text { color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .b4-frage > summary:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; border-radius: 2px; }
html[data-design="d"][data-variante="b4"] .b4-frage-zeichen { position: relative; flex: none; width: 18px; height: 18px; }
html[data-design="d"][data-variante="b4"] .b4-frage-zeichen::before,
html[data-design="d"][data-variante="b4"] .b4-frage-zeichen::after {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--b4-tinte);
}
html[data-design="d"][data-variante="b4"] .b4-frage-zeichen::after { transform: rotate(90deg); transition: transform .2s ease; }
html[data-design="d"][data-variante="b4"] .b4-frage[open] .b4-frage-zeichen::after { transform: rotate(0deg); }
html[data-design="d"][data-variante="b4"] .b4-antwort {
  margin: -4px 34px 24px 0; max-width: 60ch;
  font-size: var(--d-fs-text); line-height: 1.55; color: var(--b4-text); text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="d"][data-variante="b4"] .b4-frage-zeichen::after { transition: none; }
}
@media (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] .b4-fragen-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "titel" "liste" "kontakt"; row-gap: 28px; }
}
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] #step-0 #lp-fragen { padding-top: 52px; padding-bottom: 56px; }
  html[data-design="d"][data-variante="b4"] #lp-fragen .chap-title { font-size: 26px; line-height: 1.1; }
  html[data-design="d"][data-variante="b4"] .b4-frage > summary { padding: 16px 0; }
  html[data-design="d"][data-variante="b4"] .b4-antwort { margin-right: 0; }
}

/* ---------- Nach den drei Schritten: losplanen (14.10.2026, js/design-b4-start.js schritteAktion) ----------
   Hauptaktion des Abschnitts in Gold (Knopf M) und daneben der Weg zur Frage nach der Verlässlichkeit
   als Textknopf; an der linken Kante wie Überschrift und Schritte. */
html[data-design="d"][data-variante="b4"] .b4-schritte-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 48px; }
html[data-design="d"][data-variante="b4"] .b4-schritte-aktion .b4-link { font-size: var(--d-fs-text); }
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .b4-schritte-aktion { margin-top: 36px; gap: 14px 20px; }
}

/* ---------- Tagesplan-Kachel (14.10.2026, js/design-b4-start.js AUSSCHNITT „Tagesplan“) ----------
   Erste Reihe über die volle Breite: Ausschnitt links (8 Teile), Titel und Satz rechts (4), gespiegelt
   zu „Gut zu wissen“ in der letzten Reihe. Der Ausschnitt zeigt den Tagesplan wie die Ergebnisseite:
   Ort mit Tagen, „Tagesplan für Tag 3 bis 5“, je Tag eine Zeile (Ankunft und Abreise am Tag), Tag 4
   aufgeklappt. Zeilen als Papier mit feiner Kante wie die Termine im Kalender-Ausschnitt. */
html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-tage {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px 40px; align-items: start;
}
html[data-design="d"][data-variante="b4"] #lp-inside .b4-aus-tage .lp-index-body { margin-top: 0; align-self: center; }
html[data-design="d"][data-variante="b4"] .b4-aus-ortkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
html[data-design="d"][data-variante="b4"] .b4-aus-ortkopf b { font-size: var(--d-fs-zwischen); font-weight: 800; line-height: 1.2; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .b4-aus-ortkopf span { font-size: 13.5px; color: var(--b4-grau); font-variant-numeric: tabular-nums; }
html[data-design="d"][data-variante="b4"] .b4-aus-plantitel { margin: 12px 0 8px; font-size: 15px; font-weight: 700; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .b4-aus-tage { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
html[data-design="d"][data-variante="b4"] .b4-aus-tage li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 9px 14px; border-radius: 8px; background: var(--b4-papier); box-shadow: inset 0 0 0 1px var(--b4-linie);
}
html[data-design="d"][data-variante="b4"] .b4-aus-tag { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
html[data-design="d"][data-variante="b4"] .b4-aus-tag small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .b4-aus-tage li b { font-weight: 700; }
html[data-design="d"][data-variante="b4"] .b4-aus-tage li p { grid-column: 2; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--b4-text); text-wrap: pretty; }
/* Budget mit Rechengrundlagen: je Posten eine Zeile mit Grundlage darunter (Wortlaut der Ergebnisseite) */
html[data-design="d"][data-variante="b4"] .b4-aus-posten--grund { grid-template-columns: minmax(0, 1fr); gap: 8px; }
html[data-design="d"][data-variante="b4"] .b4-aus-posten--grund li { flex-wrap: wrap; row-gap: 1px; }
html[data-design="d"][data-variante="b4"] .b4-aus-posten--grund li small { flex: 0 0 100%; padding-left: 18px; font-size: 13.5px; line-height: 1.35; color: var(--b4-grau); }
@media (max-width: 1099px) {
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-tage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] #lp-inside .lp-index-item.b4-aus-tage {
    flex: 0 0 86%; box-sizing: border-box; scroll-snap-align: start; padding: 18px 18px 20px; gap: 16px;
  }
  html[data-design="d"][data-variante="b4"] .b4-aus-tage li { grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; padding: 8px 12px; }
  /* Der aufgeklappte Tag über die volle Breite: in der schmalen rechten Spalte war er zehn Zeilen
     hoch, und die Wischreihe macht alle Karten so hoch wie die höchste */
  html[data-design="d"][data-variante="b4"] .b4-aus-tage li p { grid-column: 1 / -1; margin-top: 8px; }
}