/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3-seiten.css erzeugt). Regeln: routaris-design-system-b4.md */
/* =====================================================
   DESIGN-B4-SEITEN.CSS — weitere Seiten im neuen Design (10.10.2026)

   Reisezeit nach Land und nach Monat, Über uns, Kontakt, Bildnachweise, Reisekompass, 404.
   Diese Seiten entstehen aus den Erzeugern in tools/ (Kopf und Fuß aus tools/site-header.js)
   und tragen das Magazin-Gerüst (laender/magazin.css, routen/routen.css) mit Bausteinen,
   deren Schrift und Farbe inline im Erzeuger stehen. Der Lader im Kopf
   (designLaderKopf) hängt diese Datei nach Tokens, Knopfsystem und dunklem Modus an; alle
   Regeln stehen unter html[data-variante="b4"], ohne Schalter greift keine.

   Gestaltung wie Startseite, Länderportrait und Ergebnisseite (routaris-design-system-b4.md):
   weißer Grund, Titel in der Titelfarbe ohne Überzeile und ohne Akzentwort, Links in der
   Klickfarbe mit Unterstrich, Knöpfe nach dem Knopfsystem (Hauptaktion Gold, Zweitaktion
   weiß mit Rand), Filter als Pillen, Kacheln in Kiesel ohne Rand und Schatten, keine Schrift
   auf Fotos außer der Quellenangabe.

   ===================================================== */

/* --- Grundlage: Farben des Magazins auf die Rollen des neuen Designs --- */
html[data-design="d"][data-variante="b4"] .mag-page {
  --mag-terracotta: var(--b4-tinte); --mag-terra-dark: var(--b4-tinte); --mag-terra-deep: var(--b4-tinte);
  --mag-terra-tint: var(--b4-k-an); --mag-cream: var(--d-grund); --mag-paper: var(--b4-lavur); --mag-paper-edge: var(--b4-linie);
  --mag-ink: var(--b4-text); --mag-ink-block: var(--b4-text);
  --mag-ink-78: var(--b4-text); --mag-ink-62: var(--b4-grau); --mag-ink-60: var(--b4-grau);
  --mag-ink-45: rgba(var(--d-tinte-rgb), .45); --mag-ink-30: rgba(var(--d-tinte-rgb), .3);
  --mag-ink-12: var(--b4-linie); --mag-ink-08: var(--b4-linie);
  --mag-gold: var(--b4-grau); --mag-jade: var(--b4-grau); --mag-jade-deep: var(--b4-text);
  --mag-serif: 'Alegreya Sans', system-ui, sans-serif; --mag-sans: 'Alegreya Sans', system-ui, sans-serif; --mag-mono: 'Alegreya Sans', system-ui, sans-serif;
  --terracotta: var(--b4-tinte); --terracotta-text: var(--b4-tinte); --terracotta-deep: var(--b4-tinte);
  --charcoal: var(--b4-text); --gold: var(--b4-k-an); --ink-60: var(--b4-grau);
  background: var(--d-grund); color: var(--b4-text);
}
html[data-design="d"][data-variante="b4"] .mag-page main h1,
html[data-design="d"][data-variante="b4"] .mag-page main h2,
html[data-design="d"][data-variante="b4"] .mag-page main h3,
html[data-design="d"][data-variante="b4"] .mag-page main h4,
html[data-design="d"][data-variante="b4"] .mag-page main h5,
html[data-design="d"][data-variante="b4"] .mag-page main p,
html[data-design="d"][data-variante="b4"] .mag-page main a,
html[data-design="d"][data-variante="b4"] .mag-page main li,
html[data-design="d"][data-variante="b4"] .mag-page main span,
html[data-design="d"][data-variante="b4"] .mag-page main td,
html[data-design="d"][data-variante="b4"] .mag-page main th,
html[data-design="d"][data-variante="b4"] .mag-page main strong,
html[data-design="d"][data-variante="b4"] .mag-page main b,
html[data-design="d"][data-variante="b4"] .mag-page main em,
html[data-design="d"][data-variante="b4"] .mag-page main small,
html[data-design="d"][data-variante="b4"] .mag-page main label,
html[data-design="d"][data-variante="b4"] .mag-page main button,
html[data-design="d"][data-variante="b4"] .mag-page main input,
html[data-design="d"][data-variante="b4"] .mag-page main select,
html[data-design="d"][data-variante="b4"] .mag-page main textarea,
html[data-design="d"][data-variante="b4"] .mag-page main figcaption,
html[data-design="d"][data-variante="b4"] .mag-page main dt,
html[data-design="d"][data-variante="b4"] .mag-page main dd {
  font-family: 'Alegreya Sans', system-ui, sans-serif; letter-spacing: 0;
}
html[data-design="d"][data-variante="b4"] .mag-page main h1,
html[data-design="d"][data-variante="b4"] .mag-page main h2 { font-weight: 800; line-height: 1.1; color: var(--b4-titel); text-wrap: balance; }
html[data-design="d"][data-variante="b4"] .mag-page main h3,
html[data-design="d"][data-variante="b4"] .mag-page main h4 { font-weight: 700; color: var(--b4-titel); font-style: normal; }
html[data-design="d"][data-variante="b4"] .mag-page main :is(h1, h2, h3) :where(em):is(em, .serif-it),
html[data-design="d"][data-variante="b4"] .mag-page main :is(h1, h2, h3) .serif-it { font-style: normal; color: inherit; }
html[data-design="d"][data-variante="b4"] .mag-page .kicker { display: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-hero { background: var(--d-grund); }
/* Kopfzone (17.10.2026): Der Body hält die Kopfzeile schon frei (72 px aus dem Erzeuger), am
   Handy kam das main-Polster der Startseite dazu (design-b4-basis.css, 60 px), dazu 64 px
   Abschnittsabstand: Der Titel stand 136 px unter der Kopfzeile, auf der Übersicht der
   Länderportraits sind es 40 (Desktop 64). Jetzt wie dort. */
html[data-design="d"][data-variante="b4"] .mag-page.rt-page:not(.rt-b4) main { padding-top: 0; }
html[data-design="d"][data-variante="b4"] .mag-page.rt-page:not(.rt-b4) .rt-hero { padding-top: clamp(28px, 4vw, 56px); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-h1 { font-size: var(--d-fs-titel); letter-spacing: -.01em; }
html[data-design="d"][data-variante="b4"] .mag-page :where(.rz-h2):is(.rz-h2, .mo-sek > h2),
html[data-design="d"][data-variante="b4"] .mag-page :where(.bn-h2):is(.bn-h2, .mo-sek > h2),
html[data-design="d"][data-variante="b4"] .mag-page :where(.h-sub):is(.h-sub, .mo-sek > h2),
html[data-design="d"][data-variante="b4"] .mag-page :is(.mo-sek > h2),
html[data-design="d"][data-variante="b4"] .mag-page :is(.ue-sek > h2) { font-size: var(--d-fs-kapitel); letter-spacing: -.01em; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-lead { max-width: 52ch; font-size: var(--d-fs-lead); line-height: 1.5; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page main p { color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page main a:not([class]) {
  color: var(--b4-tinte); text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
/* Kacheln und Knöpfe, deren Link keine Klasse trägt, ohne Unterstrich: auf den Kacheln der
   Routenübersicht und „Noch mehr …“ war jede Zeile unterstrichen, auf „Über uns“ die Knöpfe
   Instagram und Pinterest (Feinheiten 17.10.2026) */
html[data-design="d"][data-variante="b4"] .mag-page main :is(.rt-hubcard, .rt-sib, .ue-social) > a { text-decoration: none; }

/* --- Knöpfe nach dem Knopfsystem (5.1) --- */
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn,
html[data-design="d"][data-variante="b4"] .mag-page .kf-submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--b4-k-m); padding: 0 20px;
  border-radius: var(--d-r-ui); font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: none;
}
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn-pri,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn-pri,
html[data-design="d"][data-variante="b4"] .mag-page .kf-submit {
  background: var(--b4-marker); color: var(--b4-auf-gelb); border: 1.5px solid var(--b4-marker);
}
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn-pri:hover,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn-pri:hover,
html[data-design="d"][data-variante="b4"] .mag-page .kf-submit:hover { background: var(--b4-marker-tief); border-color: var(--b4-marker-tief); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn-sec,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn-sec {
  background: var(--b4-papier); color: var(--b4-tinte); border: 1.5px solid var(--b4-k-rand);
}
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn-sec:hover,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn-sec:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-btn:focus-visible,
html[data-design="d"][data-variante="b4"] .mag-page .mo-btn:focus-visible,
html[data-design="d"][data-variante="b4"] .mag-page .kf-submit:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }

/* --- Filter als Pillen: Länder und Monate --- */
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-nav, .mo-nav) a {
  display: inline-flex; align-items: center; min-height: var(--b4-pille); padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--b4-k-rand); background: var(--b4-papier); color: var(--b4-text); font-size: 15px; font-weight: 500;
}
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-nav, .mo-nav) a:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-nav, .mo-nav) a.on { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; }

/* --- Reisezeit nach Land --- */
html[data-design="d"][data-variante="b4"] .mag-page .rz-answer { background: var(--b4-lavur); border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-answer p { font-size: 17px; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-answer strong { font-weight: 700; }
/* Drei Stufen der Saison in Leiste, Legende und Tabelle: Hauptreisezeit Daten, Schulterzeit die
   mittlere Stufe, Nebensaison Kiesel (17.10.2026; vorher stand die Schulterzeit in der gewählten
   Kachel und hob sich hell kaum von der Nebensaison ab) */
html[data-design="d"][data-variante="b4"] .mag-page .rz-strip li { background: var(--d-kiesel); color: var(--b4-text); border-radius: var(--d-r-ui); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-strip li.hi { background: var(--b4-daten); color: var(--b4-auf-daten); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-strip li.mid { background: var(--b4-saison-mitte); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-strip .m { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-strip .t { font-size: 15px; font-weight: 500; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend { gap: 8px 18px; font-size: 14px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend i { border-radius: 3px; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend i.hi { background: var(--b4-daten); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend i.mid { background: var(--b4-saison-mitte); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend i.lo { background: var(--d-kiesel); box-shadow: inset 0 0 0 1px var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-card,
html[data-design="d"][data-variante="b4"] .mag-page .mo-fest { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); box-shadow: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-card h3 { font-size: 21px; font-weight: 700; }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-card .sub),
html[data-design="d"][data-variante="b4"] .mag-page :is(.mo-fest .land),
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-card .best),
html[data-design="d"][data-variante="b4"] .mag-page :is(.mo-card .sub) {
  font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--b4-grau);
}
html[data-design="d"][data-variante="b4"] .mag-page .rz-card .best { font-weight: 700; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-table, .bn-table) :is(th) { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-table, .bn-table) :is(td) { font-size: 15px; color: var(--b4-text); border-color: var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .mag-page .bn-table tr { border-color: var(--b4-linie); }   /* Handy: Zeile als Block mit Linie (Feinheiten 17.10.2026) */
html[data-design="d"][data-variante="b4"] .mag-page .bn-table td::before { color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-table .rz-fest { color: var(--b4-grau); }
/* Saisonpunkte der Monatstabelle in denselben drei Stufen wie Leiste und Legende (vorher
   Waldgrün, gewählte Kachel und ein festes Beige aus dem Live-Design) */
html[data-design="d"][data-variante="b4"] .mag-page .rz-table .s { background: var(--d-kiesel); box-shadow: inset 0 0 0 1px var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-table .s.hi { background: var(--b4-daten); box-shadow: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-table .s.mid { background: var(--b4-saison-mitte); box-shadow: none; }

/* --- Reisezeit nach Land, Übersicht: Reisezeit-Tabelle (17.10.2026) ---
   Je Land eine Zeile mit zwölf Feldern in den Stufen der Saisonleiste, nach den Regionen der
   Länderportraits. Die ganze Zeile führt zur Länderseite (Link im Ländernamen, über die Zeile
   gespannt, beim Darüberfahren gerahmt), die Monatsköpfe am Desktop zum Monats-Guide. Den
   Monatskopf wiederholt jede weitere Region, der laufende Monat ist darin gefüllt wie eine
   gewählte Pille und in der Legende erklärt (zwei Prüfer ohne Vorwissen fanden ab Europa keinen
   Monat mehr und hielten die Pille für einen Filter). Nebensaison mit feiner Kontur, sonst
   lasen sich halbe Zeilen auf Weiß als leer. Vorher 30 gleiche Kacheln mit den Monaten als Text. */
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel { font-size: 17px; line-height: 1.25; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel thead th { font-size: 14px; font-weight: 700; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel thead a {
  color: var(--b4-tinte); text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: var(--d-r-ui);
}
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel thead a:hover { text-decoration-color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel thead a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.rg-m { font-size: 14px; font-weight: 700; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel .jetzt .lang,
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel .jetzt .kurz { background: var(--b4-tinte); color: var(--b4-auf-tinte); border-radius: var(--d-r-ui); }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel .jetzt a.lang { text-decoration-color: var(--b4-auf-tinte-2); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend-jetzt b { background: var(--b4-tinte); color: var(--b4-auf-tinte); border-radius: var(--d-r-ui); font-weight: 700; }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel tbody th a { font-weight: 700; }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel tbody tr:hover th a { color: var(--b4-tinte); text-decoration-color: var(--b4-tinte); }
@media (hover: hover) {
  html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel tbody tr:hover th a::after { outline: 1.5px solid var(--b4-k-rand-hover); outline-offset: 1px; border-radius: var(--d-r-flaeche); }
}
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel tbody th a:focus-visible::after { outline: 2.5px solid var(--b4-tinte); outline-offset: 1px; border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.s { background: var(--d-kiesel); border-radius: var(--d-r-ui); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.s.lo { box-shadow: inset 0 0 0 1px var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.s.hi { background: var(--b4-daten); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.s.mid { background: var(--b4-saison-mitte); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.tx { font-size: 16px; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel :is(tr.rg th),
html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel :where(.rz-erste):is(.rz-erste, tr.rg th) { font-size: var(--d-fs-zwischen); font-weight: 800; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-legend-tafel { color: var(--b4-text); }
@media (max-width: 720px) {
  html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel :where(thead th):is(thead th, td.rg-m),
  html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.rg-m { font-size: 13px; }
  html[data-design="d"][data-variante="b4"] .mag-page .rz-tafel td.s { border-radius: 4px; }
  html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel tbody th a { font-size: 15px; }
}
@media (max-width: 359px) {
  html[data-design="d"][data-variante="b4"] .mag-page main .rz-tafel tbody th a { font-size: 14px; }
}

/* --- Reisezeit nach Monat: Text unter dem Foto statt darauf --- */
html[data-design="d"][data-variante="b4"] .mag-page .mo-card {
  display: flex; flex-direction: column; height: auto; min-height: 0; aspect-ratio: auto; background: var(--b4-lavur); border-radius: var(--d-r-flaeche); overflow: hidden;
}
html[data-design="d"][data-variante="b4"] .mag-page .mo-card img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; opacity: 1; }
html[data-design="d"][data-variante="b4"] .mag-page .mo-card .ov { display: none; }
html[data-design="d"][data-variante="b4"] .mag-page .mo-card .tx { position: static; padding: 14px 16px 16px; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page .mo-card h3 { font-size: 21px; font-weight: 700; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .mag-page .mo-card .fakt { font-size: 14.5px; opacity: 1; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page .mo-fest h4 { font-size: 17px; }
html[data-design="d"][data-variante="b4"] .mag-page .mo-fest p { font-size: 14.5px; color: var(--b4-text); }

/* --- Kontakt: Felder wie in den Planungsschritten --- */
html[data-design="d"][data-variante="b4"] .mag-page .kf-field input,
html[data-design="d"][data-variante="b4"] .mag-page .kf-field select,
html[data-design="d"][data-variante="b4"] .mag-page .kf-field textarea {
  border: 1.5px solid var(--b4-k-rand); border-radius: var(--d-r-ui); background: var(--b4-papier); color: var(--b4-text); font-size: 16px; box-shadow: none;
}
/* Ein- und Auswahlfeld gleich hoch (vorher 50 und 44 px untereinander) */
html[data-design="d"][data-variante="b4"] .mag-page .kf-field input,
html[data-design="d"][data-variante="b4"] .mag-page .kf-field select { box-sizing: border-box; height: var(--b4-k-m); min-height: 0; padding-top: 0; padding-bottom: 0; }
html[data-design="d"][data-variante="b4"] .mag-page .kf-field input:focus,
html[data-design="d"][data-variante="b4"] .mag-page .kf-field select:focus,
html[data-design="d"][data-variante="b4"] .mag-page .kf-field textarea:focus { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .mag-page .kf-field label { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--b4-text); }
/* Als Kachel mit Innenabstand rundum: der Erzeuger setzt nur den Einzug neben der Linie des
   Live-Designs (Handy: oben 26, links 0), der Text stand am Rand der Fläche (Feinheiten 17.10.2026) */
html[data-design="d"][data-variante="b4"] .mag-page .kf-aside { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); padding: var(--d-a5); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.kf-aside h2),
html[data-design="d"][data-variante="b4"] .mag-page :is(.kf-aside h3),
html[data-design="d"][data-variante="b4"] .mag-page :is(.kf-aside h4) { font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--b4-titel); }

/* Wege unter den Monatskacheln als Textknöpfe: vorher trug jede Kachel einen goldenen Knopf
   (ein Gold je Bereich, Abschnitt 2); das Gold bleibt dem Abschluss der Seite */
html[data-design="d"][data-variante="b4"] .mag-page .mo-ctarow { gap: 6px 18px; margin: 10px 16px 0; }   /* auf der Kante des Kacheltexts (vorher 2 px vom Kachelrand) */
/* Kacheln einer Reihe gleich hoch, die Wege darunter auf einer Linie (vorher endeten die Kacheln
   bei zweizeiliger „Beste Zeit“ 12 bis 20 px versetzt); Kachel und Wege als Gruppe mit 32 px bis
   zur nächsten Kachel, vorher saßen die Wege fast mittig dazwischen (Feinheiten 17.10.2026) */
html[data-design="d"][data-variante="b4"] .mag-page .mo-grid { row-gap: var(--d-a6); }
html[data-design="d"][data-variante="b4"] .mag-page .mo-grid > li { display: flex; flex-direction: column; }
html[data-design="d"][data-variante="b4"] .mag-page .mo-grid > li > .mo-card { flex: 1 1 auto; }
html[data-design="d"][data-variante="b4"] .mag-page .mo-ctarow .mo-btn {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--b4-tinte); font-size: 15px; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
html[data-design="d"][data-variante="b4"] .mag-page .mo-ctarow .mo-btn:hover { background: none; text-decoration-color: var(--b4-marker); }

/* Pillen der Filter ohne Unterstrich (die Linkregel oben gilt nur für Links im Text) */
html[data-design="d"][data-variante="b4"] .mag-page main :is(.rz-nav, .mo-nav) a { text-decoration: none; }

/* --- Reisekompass (reisekompass/index.html, kompass.css, kompass.js) ---
   Karte in der Skala der Vorschau auf der Startseite (--kompass-*, js/kompass-teaser.js):
   Hauptreisezeit dunkel, Schulterzeit mittel, Nebensaison hell, Schraffur für Länder ohne
   Planung in denselben Stufen (kompass.js liest die Tokens). Überschrift ohne Stern, Labels
   ohne Versalien, Monate und Filter als Pillen, gewählt in der Klickfarbe.
   .d-seite-kompass steht fest an <html> in reisekompass/index.html (kein :has() an <html>,
   siehe css/design-d.css). */
html[data-design="d"][data-variante="b4"].d-seite-kompass {
  --terracotta: var(--kompass-hi); --terracotta-dark: var(--b4-text); --terracotta-text: var(--b4-tinte); --terracotta-pale: var(--b4-lavur);
  --gold: var(--kompass-mid); --gold-pale: var(--b4-lavur);
  --cream: var(--d-grund); --cream-dark: var(--b4-lavur); --cream-soft: var(--b4-lavur); --paper-edge: var(--b4-linie);
  --ink: var(--b4-text); --ink-light: var(--b4-text); --ink-muted: var(--b4-grau); --white: var(--b4-papier); --border: var(--b4-linie);
  --font-display: 'Alegreya Sans', system-ui, sans-serif; --font-body: 'Alegreya Sans', system-ui, sans-serif;
  --shadow-md: none; --shadow-lg: 0 0 0 1px var(--b4-linie);
}
html[data-design="d"][data-variante="b4"].d-seite-kompass body { background: var(--d-grund); color: var(--b4-text); }
/* Auf der Kante der Kopfzeile (--d-seite): Kopf und Filter standen bei 22 px (Handy 14), die Kopfzeile
   bei 56 (18). Am Handy laufen die wischbaren Reihen bis an den Bildschirmrand, der Inhalt beginnt auf
   der Kante (vorher endeten sie 14 px davor) (Feinheiten 17.10.2026) */
html[data-design="d"][data-variante="b4"].d-seite-kompass .k-intro { padding-left: var(--d-seite); padding-right: var(--d-seite); }
html[data-design="d"][data-variante="b4"].d-seite-kompass .controls { padding-left: var(--d-seite); padding-right: var(--d-seite); }
html[data-design="d"][data-variante="b4"].d-seite-kompass .legend { left: var(--d-seite); }
@media (max-width: 760px) {
  html[data-design="d"][data-variante="b4"].d-seite-kompass .controls { padding-left: 0; padding-right: 0; }
  html[data-design="d"][data-variante="b4"].d-seite-kompass .controls > .rail,
  html[data-design="d"][data-variante="b4"].d-seite-kompass .controls > .chips,
  html[data-design="d"][data-variante="b4"].d-seite-kompass .controls > .k-top { padding-left: var(--d-seite); padding-right: var(--d-seite); scroll-padding-inline: var(--d-seite); }
}
html[data-design="d"][data-variante="b4"] .k-intro h1 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .k-intro h1 .star,
html[data-design="d"][data-variante="b4"] .p-head .brand > span[style] { display: none; }
html[data-design="d"][data-variante="b4"] .k-intro p { font-size: 15px; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] :is(.k-intro p, .k-static-note, .k-months) a {
  color: var(--b4-tinte); text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
html[data-design="d"][data-variante="b4"] :where(.mbtn):is(.mbtn, .regnav button),
html[data-design="d"][data-variante="b4"] :where(.chip):is(.chip, .regnav button),
html[data-design="d"][data-variante="b4"] :is(.regnav button) { font-size: 14px; font-weight: 500; color: var(--b4-text); border: 1.5px solid var(--b4-k-rand); background: var(--b4-papier); }
html[data-design="d"][data-variante="b4"] .regnav button { border-color: transparent; }
html[data-design="d"][data-variante="b4"] :where(.mbtn):is(.mbtn, .regnav button):hover,
html[data-design="d"][data-variante="b4"] :where(.chip):is(.chip, .regnav button):hover,
html[data-design="d"][data-variante="b4"] :is(.regnav button):hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] :where(.mbtn.on):is(.mbtn.on, .regnav button.on),
html[data-design="d"][data-variante="b4"] :where(.chip.on):is(.chip.on, .regnav button.on),
html[data-design="d"][data-variante="b4"] :is(.regnav button.on) { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; }
html[data-design="d"][data-variante="b4"] .mbtn.play { color: var(--b4-tinte); background: var(--b4-papier); border-color: var(--b4-k-rand); }
html[data-design="d"][data-variante="b4"] .rail .mbtn.play { box-shadow: -16px 0 10px -4px var(--d-grund); }
html[data-design="d"][data-variante="b4"] :is(.chips .grp),
html[data-design="d"][data-variante="b4"] :where(.sec h3):is(.sec h3, .chips .grp),
html[data-design="d"][data-variante="b4"] :is(.fest .fm),
html[data-design="d"][data-variante="b4"] :where(.k-static-h3):is(.k-static-h3, .chips .grp),
html[data-design="d"][data-variante="b4"] :where(.kt-l):is(.kt-l, .chips .grp) {
  font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--b4-text);
}
html[data-design="d"][data-variante="b4"] .k-static-h3 { font-size: var(--d-fs-zwischen); font-weight: 800; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .stage { background: var(--b4-papier); }
html[data-design="d"][data-variante="b4"] .map .bg { fill: var(--kompass-land); stroke: var(--kompass-edge); }
html[data-design="d"][data-variante="b4"] .map .c.lo,
html[data-design="d"][data-variante="b4"] .map .dot.lo { fill: var(--kompass-lo); }
html[data-design="d"][data-variante="b4"] .map .c.off,
html[data-design="d"][data-variante="b4"] .map .dot.off { fill: var(--kompass-land); }
html[data-design="d"][data-variante="b4"] .map .dot.x.lo { stroke: var(--kompass-lo-hx); }
html[data-design="d"][data-variante="b4"] .map .lbl { font-weight: 700; fill: var(--b4-text); stroke: rgba(255, 255, 255, .85); }
html[data-design="d"][data-variante="b4"] .legend { background: var(--b4-papier); border-color: var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .legend .lg-m:nth-child(3) .sw { background: var(--kompass-lo) !important; }
html[data-design="d"][data-variante="b4"] .status.hi { background: var(--kompass-hi); color: #FFFFFF; }
html[data-design="d"][data-variante="b4"] .status.mid { background: var(--b4-k-an); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .status.lo { background: var(--b4-lavur); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .band .cell.lo { background: var(--kompass-lo); }
html[data-design="d"][data-variante="b4"] .k-static h2 { font-weight: 800; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .k-static h2 em { font-style: normal; color: inherit; }
html[data-design="d"][data-variante="b4"] .k-static-lead { font-size: 17px; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .tip { background: var(--b4-text); color: #FFFFFF; }
/* Länderfenster (seit 11.10.2026 in pruefen.js): Monate und Klimazone ab 12 px, die Unter-Marke
   („Sakurapfad“, 4,4 : 1) entfällt wie überall im Design; bei Ländern ohne Planung trägt dieselbe
   Pille „Nur Reisezeit-Info“ und bleibt. Feste auch im dunklen Modus als Fläche (vorher Kiesel auf Kiesel). */
html[data-design="d"][data-variante="b4"] .reg .rt { font-size: 13px; }
html[data-design="d"][data-variante="b4"] .mchip { font-size: 12px; padding: 3px 8px; }
html[data-design="d"][data-variante="b4"] .panel:not(.is-extra) .p-head .brand { display: none; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .fest { background: var(--b4-k-an); }
/* Familien-Abzeichen („Gut mit Kindern“ …) ab 12 px in den Flächen des Designs; „vorbereitung“ stand im
   Altgold-Braun der Unter-Marke (im Dunkeln 3 : 1) */
html[data-design="d"][data-variante="b4"] .fam .badge { font-size: 12.5px; }
html[data-design="d"][data-variante="b4"] .fam .badge.gut { background: var(--b4-k-an); color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .fam .badge:is(.vorbereitung, .aeltere) { background: var(--b4-lavur); color: var(--b4-text); }

/* --- 404: Fichte mit der dunklen Wortmarke in 56 px (CI/marke/LIESMICH.md, Formate) ---
   .d-seite-404 steht fest an <html> in 404.html (kein :has() an <html>, siehe css/design-d.css) */
html[data-design="d"][data-variante="b4"].d-seite-404 body { background: var(--d-band); color: #FFFFFF; font-family: 'Alegreya Sans', system-ui, sans-serif; }
html[data-design="d"][data-variante="b4"] body > .wm { content: url('/CI/marke/routaris-wortmarke-klein-dunkel.svg'); width: auto; height: 56px; filter: none; }
html[data-design="d"][data-variante="b4"] body > .code { font-family: 'Alegreya Sans', system-ui, sans-serif; font-weight: 800; color: #FFFFFF; }
html[data-design="d"][data-variante="b4"] body > .code ~ h1 { font-family: 'Alegreya Sans', system-ui, sans-serif; font-style: normal; font-weight: 800; color: #FFFFFF; }
html[data-design="d"][data-variante="b4"] body > .code ~ p { color: rgba(255, 255, 255, .86); }
html[data-design="d"][data-variante="b4"] body > .btns a.btn { min-height: var(--b4-k-m); border-radius: var(--d-r-ui); font-weight: 700; font-size: 16px; }
html[data-design="d"][data-variante="b4"] body > .btns a.primary { background: var(--b4-marker); color: var(--b4-auf-gelb); }
html[data-design="d"][data-variante="b4"] body > .btns a.primary:hover { background: var(--b4-marker-tief); }
html[data-design="d"][data-variante="b4"] body > .btns a.ghost { border: 1.5px solid rgba(255, 255, 255, .5); color: #FFFFFF; }
html[data-design="d"][data-variante="b4"] body > .route path { stroke: var(--b4-marker); }
html[data-design="d"][data-variante="b4"] body > .route circle { fill: #FFFFFF; }
/* Liste „Hauptreisezeit im Monat“ und Alternativen im Länderfenster: Länder als Pillen ohne Stern */
html[data-design="d"][data-variante="b4"] .x-star { display: none; }
html[data-design="d"][data-variante="b4"] .kt-b,
html[data-design="d"][data-variante="b4"] .x-alt-b { font-size: 14px; font-weight: 500; color: var(--b4-text); border: 1.5px solid var(--b4-k-rand); background: var(--b4-papier); }
html[data-design="d"][data-variante="b4"] .kt-b:hover,
html[data-design="d"][data-variante="b4"] .x-alt-b:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); }
html[data-design="d"][data-variante="b4"] .kt-b.on { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; }
html[data-design="d"][data-variante="b4"] .kt-b.kt-reg { border-style: dashed; }

/* --- Beispielroute zum Lesen, Testfassung (routen/b4/<slug>.html aus tools/build-route-pages.js) ---
   Wie die Ergebnisseite: links Kopf und Reisebuch, rechts die Routenkarte, die mitläuft; am
   Handy und Tablet die Karte direkt unter dem Kopf. Die Perlen stehen fest im Fluss (die App
   klappt sie beim Lesen zusammen, die statische Seite kann das nicht). */
html[data-design="d"][data-variante="b4"] .rt-b4 main { padding-top: 8px; }
html[data-design="d"][data-variante="b4"] .rt-b4-werk {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--d-seite);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "kopf karte" "route karte"; column-gap: 56px; align-items: start;
}
html[data-design="d"][data-variante="b4"] .rt-b4-kopf { grid-area: kopf; padding-top: 32px; }
/* Suchbegriff der Seite („Japan Rundreise 2 Wochen (14 Tage)“, wie im Titel-Tag) als zweite Zeile der H1:
   Der Routenname allein trug die Suche nicht (25.09.2026). Keine Überzeile (Abschnitt 4), deshalb unter
   dem Namen, in der Größe des Faktensatzes und in Nebentext-Farbe. */
html[data-design="d"][data-variante="b4"] .rt-b4 .d2-titel .rt-h1-kw {
  display: block; margin-top: 10px; max-width: none;
  font-size: var(--d-fs-faktensatz); line-height: 1.35; font-weight: 700; letter-spacing: 0; color: var(--b4-grau);
}
html[data-design="d"][data-variante="b4"] .rt-b4-route { grid-area: route; }
html[data-design="d"][data-variante="b4"] .rt-b4-karte { grid-area: karte; position: sticky; top: 84px; margin: 32px 0 0; }
html[data-design="d"][data-variante="b4"] .rt-b4-karte img { display: block; width: 100%; height: auto; border-radius: var(--d-r-karte); box-shadow: 0 0 0 1px var(--b4-linie); }
html[data-design="d"][data-variante="b4"] .rt-b4-karte .rt-figcap { margin-top: 8px; font-size: 13.5px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .rt-b4 .d2-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
html[data-design="d"][data-variante="b4"] .rt-b4 :is(.d2-aktionen, .rt-b4-wege) .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--b4-k-m); height: auto; padding: 0 22px; line-height: 1.2; text-decoration: none;
}
html[data-design="d"][data-variante="b4"] .rt-b4 .d2-perlen { position: static; }
html[data-design="d"][data-variante="b4"] .rt-b4 .d2-perlen-wache { display: none; }
html[data-design="d"][data-variante="b4"] .rt-b4-schluss .rt-b4-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; }
html[data-design="d"][data-variante="b4"] .rt-b4-schluss .rt-b4-link {
  color: var(--b4-tinte); font-weight: 700; text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
@media (max-width: 1024px) {
  html[data-design="d"][data-variante="b4"] .rt-b4-werk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "karte" "route"; }
  html[data-design="d"][data-variante="b4"] .rt-b4-karte { position: static; margin-top: 24px; }
  /* Die Routenspalte bekommt aus dem Ergebnis-CSS den Seitenrand (#optionb-stops), den hier schon der
     Container trägt: Stopptexte und Stoppreihe standen bei 36 px, Titel und Karte bei 18
     (Feinheiten 17.10.2026). Fotos und Stoppreihe laufen jetzt wie auf der Ergebnisseite zum Rand. */
  html[data-design="d"][data-variante="b4"] .rt-b4 #optionb-stops { padding-left: 0; padding-right: 0; }
}
/* Abschnitte unter der Route (Kurzfassung, Kosten, Mit Kindern, Noch mehr, Fragen, Abschluss) auf
   der linken Kante und in der Breite der Routenspalte, wie Kosten und Abschluss der Ergebnisseite.
   Vorher standen sie in einem mittigen Container: Die Kante sprang von 56 auf 197 px, jeder
   Abschnitt hatte 130 px Innenabstand (zwischen zwei weißen Abschnitten 260 px Leere) und die
   Köpfe standen mal 12, mal 64 px über ihrem Inhalt (Feinheiten 17.10.2026). Die Breite greift
   mit :where() ohne Gewicht, engere Lesemaße der Blöcke bleiben stehen. */
html[data-design="d"][data-variante="b4"] .rt-b4 main > .section,
html[data-design="d"][data-variante="b4"] .rt-b4 main > .section--tight { padding-top: var(--d-a7); padding-bottom: var(--d-a7); }
html[data-design="d"][data-variante="b4"] .rt-b4 main > :is(.section, .section--tight) > .wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--d-seite); padding-right: var(--d-seite); }
:where(html[data-design="d"][data-variante="b4"] .rt-b4 main > :is(.section, .section--tight) > .wrap) > * { max-width: calc((100% - 56px) * 7 / 12); }
html[data-design="d"][data-variante="b4"] .rt-b4 main > :is(.section, .section--tight) .sec-head { margin-bottom: var(--d-a4); }
@media (max-width: 1024px) {
  :where(html[data-design="d"][data-variante="b4"] .rt-b4 main > :is(.section, .section--tight) > .wrap) > * { max-width: none; }
}
@media (max-width: 768px) {
  html[data-design="d"][data-variante="b4"] .rt-b4 main > .section,
  html[data-design="d"][data-variante="b4"] .rt-b4 main > .section--tight { padding-top: var(--d-a6); padding-bottom: var(--d-a6); }
}

/* Übersicht der Beispielrouten (routen/index.html): Kacheln wie die Beispielrouten des Porträts,
   ohne laufende Nummer und ohne Untermarke auf dem Foto */
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-no,
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-brand { display: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard > a { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); box-shadow: none; overflow: hidden; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard > a:hover { background: var(--b4-k-an); transform: none; box-shadow: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-land { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-name { font-size: 19px; font-weight: 700; color: var(--b4-titel); }
/* Mehrspaltig zwei Titelzeilen vorhalten: Die Zeile „14 Tage, 6 Stopps“ einer Reihe steht auf einer
   Linie (vorher bei einzeiligem Titel 28 px höher als bei den Nachbarn) (Feinheiten 17.10.2026) */
@media (min-width: 640px) {
  html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-name { line-height: 1.3; min-height: 2.6em; }
}
html[data-design="d"][data-variante="b4"] .mag-page .rt-hubcard-meta { font-size: 14px; color: var(--b4-text); }

/* --- Nachtrag nach pruefen.js (10.10.2026): dunkler Modus, Knopf und Mindestschrift ---
   Die Erzeuger setzen Farben inline (Kasten in festem Hellgrau, weiße Pille, Diagrammfarben des
   Live-Designs); die Regeln hier holen sie auf die Rollen, damit beide Modi mitgehen. */

/* Abschluss der Reisezeit- und Monatsseiten: Kiesel statt festem Hellgrau. Der Weg zum Kompass
   ist auf der Monatsseite die Hauptaktion des Abschlusses und trägt deshalb das Gold. */
html[data-design="d"][data-variante="b4"] .mag-page .rz-cta,
html[data-design="d"][data-variante="b4"] .mag-page .mo-cta { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-cta, .mo-cta) p { font-size: 16px; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page :is(.rz-cta, .mo-cta) p strong { color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .mag-page main .mo-cta > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--b4-k-m); padding: 0 20px;
  border-radius: var(--d-r-ui); background: var(--b4-marker); color: var(--b4-auf-gelb); font-size: 16px; font-weight: 700; text-decoration: none;
}
html[data-design="d"][data-variante="b4"] .mag-page main .mo-cta > a:hover { background: var(--b4-marker-tief); color: var(--b4-auf-gelb); }
html[data-design="d"][data-variante="b4"] .mag-page main .mo-cta > a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }

/* Über uns (11.10.2026): Der Abschluss lag als Kasten in festem Hellgrau mit einem Knopf, dessen
   Schrift dieselbe Farbe hatte wie seine Fläche (Kontrast 1,0, der Knopf war leer). Jetzt Kiesel mit
   der Hauptaktion in Gold wie auf den Reisezeit- und Monatsseiten. Instagram und Pinterest führen
   etwas aus: Zweitaktion nach 5.1 (weiß mit Rand, Wort in Waldgrün), keine Pille. */
html[data-design="d"][data-variante="b4"] .mag-page .ue-cta { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page .ue-cta p { font: inherit; font-size: 16px; line-height: 1.5; color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page main .ue-cta > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--b4-k-m); padding: 0 20px;
  border-radius: var(--d-r-ui); background: var(--b4-marker); color: var(--b4-auf-gelb); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
}
html[data-design="d"][data-variante="b4"] .mag-page main .ue-cta > a:hover { background: var(--b4-marker-tief); color: var(--b4-auf-gelb); }
html[data-design="d"][data-variante="b4"] .mag-page main .ue-cta > a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }
html[data-design="d"][data-variante="b4"] .mag-page .ue-social a {
  min-height: var(--b4-k-s); padding: 0 16px; border-radius: var(--d-r-ui); border: 1.5px solid var(--b4-k-rand);
  background: var(--b4-papier); color: var(--b4-tinte); font: inherit; font-size: 15px; font-weight: 700;
}
html[data-design="d"][data-variante="b4"] .mag-page .ue-social a:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-tinte); }
html[data-design="d"][data-variante="b4"] .mag-page .ue-social a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; }

/* „Nur in einzelnen Regionen“: Länder als Pillen, gestrichelt wie die regionalen im Kompass */
html[data-design="d"][data-variante="b4"] .mag-page main .mo-reglist a {
  align-items: center; min-height: var(--b4-pille); padding: 0 14px; border: 1.5px dashed var(--b4-k-rand); background: var(--b4-papier);
  color: var(--b4-text); font-size: 15px; font-weight: 700; text-decoration: none;
}
html[data-design="d"][data-variante="b4"] .mag-page main .mo-reglist a span { font-weight: 400; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page main .mo-reglist a:hover { border-style: solid; border-color: var(--b4-k-rand-hover); background: var(--b4-k-hover); }

/* Klimadiagramm der Reisezeit-Seite: im Erzeuger mit den Farben des Live-Designs gezeichnet
   (js/climate-chart.js). Hell auf Weiß mit Linie, dunkel auf der Fläche des Modus mit
   Schrift, Linien und Halo in dessen Farben. Die Teile werden über ihren Farbwert gewählt
   (Tinte mit .62, .78, .09, .30, .22). Seit 11.10.2026 auch Temperatur, Regen und Tinte wie im
   Diagramm der Ergebnisseite (dort setzt design-b4.js die Farben vor dem Zeichnen): vorher stand
   hier die Temperatur in Terrakotta und die Schrift in der Tinte des Live-Designs. */
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart { background: var(--b4-papier); border: 1px solid var(--b4-linie); border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [fill="#C4654A" i] { fill: var(--d-fehler); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [stroke="#C4654A" i] { stroke: var(--d-fehler); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [fill="#2B6FA3" i] { fill: var(--d-wasser); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [fill="#1D4B72" i] { fill: var(--d-wasser-tief); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [fill$=",.62)"] { fill: var(--d-tinte-hell); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [fill$=",.78)"] { fill: rgba(var(--d-tinte-rgb), .88); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [stroke$=",.09)"] { stroke: rgba(var(--d-tinte-rgb), .09); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [stroke$=",.30)"] { stroke: rgba(var(--d-tinte-rgb), .30); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart [stroke$=",.22)"] { stroke: rgba(var(--d-tinte-rgb), .22); }
/* Legende darunter: Farben stehen inline im Erzeuger, deshalb mit !important */
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart :where(.climate-legend):is(.climate-legend, .climate-legend [style*="color"]),
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart :is(.climate-legend [style*="color"]) { color: var(--d-tinte-hell) !important; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart .climate-legend i[style*="#C4654A" i] { border-top-color: var(--d-fehler) !important; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart .climate-legend i[style*="#2B6FA3" i] { background: var(--d-wasser) !important; }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart .climate-legend i[style*="#1D4B72" i] { background: var(--d-wasser-tief) !important; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart { background: var(--b4-lavur); border-color: transparent; }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [fill$=",.62)"] { fill: var(--b4-grau); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [fill$=",.78)"] { fill: var(--b4-text); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [stroke="#FFFFFF"] { stroke: var(--b4-lavur); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [stroke$=",.09)"] { stroke: var(--b4-linie); }
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [stroke$=",.30)"],
html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mag-page .rz-chart [stroke$=",.22)"] { stroke: var(--b4-grau); }

/* Schrift des Diagramms nie unter 11 px: --k (Zeichnung zu Anzeige) setzt klimaSkala() in
   js/design-b4-start.js an jedes Klimadiagramm, wie auf der Ergebnisseite (design-b4-basis.css);
   die Werte sind die Schriftgrößen der Zeichnung in der Fassung „reisezeit“ */
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="13"] { font-size: max(13px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="11.5"] { font-size: max(11.5px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="11.44"] { font-size: max(11.44px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="11.18"] { font-size: max(11.18px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="10.4"] { font-size: max(10.4px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="10.12"] { font-size: max(10.12px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size="9.89"] { font-size: max(9.89px, calc(11px * var(--k, 1))); }
html[data-design="d"][data-variante="b4"] .mag-page .rz-chart text[font-size^="9.2"] { font-size: max(9.2px, calc(11px * var(--k, 1))); }

/* Beispielroute zum Lesen: „Mit Kindern“ und die weiteren Routen des Landes. Schrift in den
   Rollen statt in fester Tinte des Live-Designs, Kacheln in Kiesel, die Art der Route als
   Angabe ohne Versalien in 14 px (vorher 11 px gesperrt). */
html[data-design="d"][data-variante="b4"] .mag-page :is(.rt-fam-list li),
html[data-design="d"][data-variante="b4"] .mag-page :where(.rt-fam-hint):is(.rt-fam-hint, .rt-fam-list li),
html[data-design="d"][data-variante="b4"] .mag-page :where(.rt-sib-kurz):is(.rt-sib-kurz, .rt-fam-list li) { color: var(--b4-text); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-fam-medical { font-family: 'Alegreya Sans', system-ui, sans-serif; font-style: normal; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib a { background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib a:hover { background: var(--b4-k-an); transform: none; }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib-label { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib-name { font-size: 19px; font-weight: 700; letter-spacing: 0; color: var(--b4-titel); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib-meta { font-size: 14px; color: var(--b4-grau); }
html[data-design="d"][data-variante="b4"] .mag-page .rt-sib-kurz { font-size: 15px; }

/* Reisekompass: Ländernamen in der Karte nie kleiner als 11 px (Abschnitt 3, Grafiken);
   kompass.js liest die Untergrenze und lässt dann auch am Desktop die Namen ausweichen */
html[data-design="d"][data-variante="b4"].d-seite-kompass { --kompass-lbl-min: 11; }

/* Unter-Marken der Länder („Sakurapfad“) gibt es nicht, die Marke ist Routaris: Seit 18.10.2026 schreiben
   die Erzeuger der Monats- und Reisezeitseiten sie gar nicht mehr (vorher hier ausgeblendet). */