/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3-portrait.css erzeugt). Regeln: routaris-design-system-b4.md */ /* ===================================================== DESIGN-B4-PORTRAIT.CSS — Länderportrait im Design B4 (08.10.2026) Lädt auf den Länderseiten (laender/index.html, laender/.html), nach design-b4.css, design-b4-basis.css und design-b4-dunkel.css. Aufbau: js/design-b4-portrait.js. Regeln: routaris-design-system-b4.md (Abschnitt 5.12 Länderportrait). Die Seite trägt weiter .mag-page, weil Bilder (.fig) und Karten (.geo-map .cms-fig) ihre Grundregeln aus laender/magazin.css bekommen; Farben, Schrift und Maße setzt diese Datei. Flächen: Kapitel im Wechsel weiß und Kiesel; Tafeln (Steckbrief, Kosten, Notruf) liegen auf Weiß als Kiesel und auf Kiesel als Grund, damit sie sich im dunklen Modus ebenso abheben. ===================================================== */ /* ---------- Seite ---------- */ html[data-design="d"][data-variante="b4"] .mag-page.pt-seite { background: var(--d-grund); color: var(--b4-text); font-size: var(--d-fs-text); line-height: var(--d-lh-text); overflow-x: clip; } /* Papierkorn des Magazins entfällt */ html[data-design="d"][data-variante="b4"] .mag-page.pt-seite::after { display: none; } html[data-design="d"][data-variante="b4"] .pt-seite-inhalt { display: block; padding-top: 64px; } html[data-design="d"][data-variante="b4"] .pt-innen, html[data-design="d"][data-variante="b4"] .pt-kopf { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--d-seite); } /* Sprungziele landen unter Kopfzeile und Kapitelleiste (--pt-oben setzt js/design-b4-portrait.js) */ html[data-design="d"][data-variante="b4"] .pt-kap, html[data-design="d"][data-variante="b4"] .pt-moment, html[data-design="d"][data-variante="b4"] .pt-abschluss { scroll-margin-top: var(--pt-oben, 128px); } /* Kopfzeile: fest, in beiden Modi in der Farbe der Kopfzone (design-b4-basis.css), ohne Schrumpfen beim Rollen; das Magazin setzte sie halbdurchsichtig mit Weichzeichner */ html[data-design="d"][data-variante="b4"] .site-header, html[data-design="d"][data-variante="b4"] .site-header.is-shrunk { height: 64px; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .2s ease; } html[data-design="d"][data-variante="b4"] .site-header .nav-burger span { background: var(--d-tinte); } /* Wo man ist: der Menüpunkt der Seite unterstrichen (das Magazin zeigte das mit einer Linie, die das neue Design ausblendet) */ html[data-design="d"][data-variante="b4"] .site-header .header-nav .nav-primary[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: currentColor; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .site-header, html[data-design="d"][data-variante="b4"] .site-header.is-shrunk { height: 60px; } html[data-design="d"][data-variante="b4"] .pt-seite-inhalt { padding-top: 60px; } /* Die Kapitelleiste hängt an --header-h und bleibt bei 60 px: Am Handy ändert sich der Wert an beim Rollen nicht (design-b4.css), und .pt-leiste steht nicht in der Liste der Leisten, die mit dem Kopf auf 56 px schrumpfen. Beim Weggleiten setzt design-b4-basis.css 0. */ } /* Am Desktop schrumpft die Kopfzeile hier ebenfalls nicht: Die Leiste lag sonst 8 px unter ihr (.d-kopf-klein:root setzt 56 px). .d-pt-seite setzt js/design-b4-portrait.js, .d-kopf-klein js/nav.js (kein :has() an ); der Wert ändert sich nicht, also rechnet nur neu. */ @media (min-width: 769px) { html[data-design="d"][data-variante="b4"].d-pt-seite.d-kopf-klein:root { --header-h: 64px !important; } } /* Fuß: „Route planen“ steht schon im Abschluss darüber, ein zweites Gold entfällt */ html[data-design="d"][data-variante="b4"] .pt-seite .site-footer-cta { display: none; } /* ---------- Schrift ---------- */ html[data-design="d"][data-variante="b4"] .pt-titel { margin: 0; font-size: var(--d-fs-display); line-height: var(--d-lh-display); font-weight: 800; letter-spacing: var(--d-track-display); color: var(--b4-titel); text-wrap: balance; } html[data-design="d"][data-variante="b4"] .pt-h2 { margin: 0; font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); font-weight: 800; letter-spacing: var(--d-track-kapitel); color: var(--b4-titel); text-wrap: balance; } html[data-design="d"][data-variante="b4"] .pt-h2:focus { outline: none; } html[data-design="d"][data-variante="b4"] .pt-h3 { margin: 0 0 var(--d-a3); font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: 700; color: var(--b4-titel); text-wrap: balance; } html[data-design="d"][data-variante="b4"] .pt-h4 { margin: 0 0 var(--d-a2); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-text, html[data-design="d"][data-variante="b4"] .pt-lead, html[data-design="d"][data-variante="b4"] .pt-dek, html[data-design="d"][data-variante="b4"] .pt-klein, html[data-design="d"][data-variante="b4"] .pt-notiz, html[data-design="d"][data-variante="b4"] .pt-erklaer { text-wrap: pretty; } html[data-design="d"][data-variante="b4"] .pt-text { margin: 0 0 var(--d-a4); font-size: var(--d-fs-text); line-height: var(--d-lh-text); color: var(--b4-text); max-width: 68ch; } html[data-design="d"][data-variante="b4"] .pt-lead, html[data-design="d"][data-variante="b4"] .pt-dek { margin: 0 0 var(--d-a4); font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--b4-text); max-width: 52ch; } html[data-design="d"][data-variante="b4"] .pt-dek { margin: var(--d-a4) 0 0; } html[data-design="d"][data-variante="b4"] .pt-klein { margin: 0 0 var(--d-a3); font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-text b, html[data-design="d"][data-variante="b4"] .pt-text strong { font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-text em { font-style: normal; } /* Textknopf: Waldgrün unterstrichen, beim Zeigen wird der Strich zum Gold-Marker (5.1) */ html[data-design="d"][data-variante="b4"] .pt-link { padding: 0; background: none; border: 0; font: inherit; cursor: pointer; 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; transition: text-decoration-color .15s ease, text-decoration-thickness .15s ease, text-underline-offset .15s ease; } html[data-design="d"][data-variante="b4"] .pt-link:hover { text-decoration-color: var(--b4-marker); text-decoration-thickness: 7px; text-underline-offset: -3px; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] .pt-link:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-link:hover { text-decoration-thickness: 3px; text-underline-offset: 4px; } /* Knöpfe: Form und Farbe aus dem Knopfsystem (design-b4-basis.css); hier nur Anzeige und Lage */ html[data-design="d"][data-variante="b4"] :is(.pt-seite, .pt-leiste) .btn { display: inline-flex; text-decoration: none; } /* „Route planen“ im Abschluss in M wie der Zweitknopf daneben: L gibt es nur im Hero (5.1), mit L standen 54 und 48 px nebeneinander (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-seite .btn.pt-gross { min-height: var(--b4-k-m); padding: 0 22px; font-size: 16px; } html[data-design="d"][data-variante="b4"] .pt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-a3); margin: var(--d-a6) 0 var(--d-a3); } /* Leere Bildflächen: Kiesel ohne Platzhaltertext und Streifen */ html[data-design="d"][data-variante="b4"] .pt-seite .slot, html[data-design="d"][data-variante="b4"] .pt-seite .slot--dark { background: var(--d-kiesel); border: 0; } html[data-design="d"][data-variante="b4"] .pt-seite .slot__label { display: none; } html[data-design="d"][data-variante="b4"] .pt-seite .fig { background: var(--d-kiesel); border-radius: var(--d-r-foto); } html[data-design="d"][data-variante="b4"] .pt-seite .fig img { width: 100%; height: 100%; object-fit: cover; filter: none; } /* Hochformat in Querformat-Rahmen (Porträts, Standbilder): oberes Drittel statt der Mitte, sonst fehlen die Köpfe (Prüfung 09.10.2026); Klasse aus js/design-b4-portrait.js nach dem Laden */ html[data-design="d"][data-variante="b4"] .pt-seite .fig img.pt-bild-hoch { object-position: 50% 15%; } /* Fotos erscheinen ohne Einblendung (Abschnitt 7: Bewegung nur als Antwort auf eine Handlung) */ html[data-design="d"][data-variante="b4"] .pt-seite .fig.is-loaded img { animation: none; } /* Bildnachweis auf dem Foto: Pille in Tinte, in beiden Modi gleich */ html[data-design="d"][data-variante="b4"] .pt-seite .fig .credit { font-size: 11px; letter-spacing: 0; font-weight: 500; background: rgba(23, 58, 46, .73); text-shadow: none; } /* Fotos tragen eine feine Innenkante (helle Himmel liefen sonst in den weißen Grund aus, 5.11) */ html[data-design="d"][data-variante="b4"] .pt-seite .fig:not(.cms-fig)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--d-tinte-rgb), .08); } /* ---------- Raster ---------- */ html[data-design="d"][data-variante="b4"] .pt-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--d-a6); row-gap: var(--d-a7); align-items: start; } html[data-design="d"][data-variante="b4"] .pt-raster > * { grid-column: 1 / -1; min-width: 0; } /* ---------- Kopf ---------- */ html[data-design="d"][data-variante="b4"] .pt-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--d-a6); align-items: center; padding-top: var(--d-a7); padding-bottom: var(--d-a8); } html[data-design="d"][data-variante="b4"] .pt-kopf-bild { grid-column: 6 / -1; grid-row: 1; min-width: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf-bild .fig { aspect-ratio: 3 / 2; } html[data-design="d"][data-variante="b4"] .pt-kopf-text { grid-column: 1 / span 5; grid-row: 1; min-width: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf-satz { margin: var(--d-a5) 0 0; font-size: var(--d-fs-lead); line-height: var(--d-lh-lead); color: var(--b4-text); max-width: 30ch; text-wrap: pretty; } /* ---------- Kapitel ---------- */ html[data-design="d"][data-variante="b4"] .pt-kap { padding: 80px 0; background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .pt-kap--kiesel { background: var(--b4-lavur); } html[data-design="d"][data-variante="b4"] .pt-kap-kopf { margin: 0 0 var(--d-a7); } html[data-design="d"][data-variante="b4"] .pt-tafel { box-sizing: border-box; padding: var(--d-a5); background: var(--b4-lavur); border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-kap--kiesel .pt-tafel { background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .pt-tafel > :last-child { margin-bottom: 0; } /* Angabenpaare (Steckbrief, Reisezeit): Name klein, Wert darunter */ html[data-design="d"][data-variante="b4"] .pt-paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-a4) var(--d-a5); margin: 0; } html[data-design="d"][data-variante="b4"] .pt-paare > div { min-width: 0; } html[data-design="d"][data-variante="b4"] .pt-paare dt { font-size: var(--d-fs-klein); line-height: 1.3; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-paare dd { margin: 2px 0 0; font-size: 17px; line-height: 1.35; color: var(--b4-text); font-weight: 700; overflow-wrap: anywhere; } html[data-design="d"][data-variante="b4"] .pt-paare--saison { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .pt-paare-zusatz { display: block; margin-top: 1px; font-size: var(--d-fs-klein); line-height: 1.3; font-weight: 500; color: var(--b4-grau); } /* Listen mit Zeichen */ html[data-design="d"][data-variante="b4"] .pt-liste { margin: 0; padding: 0; list-style: none; } html[data-design="d"][data-variante="b4"] .pt-liste li { position: relative; margin: 0 0 var(--d-a2); padding-left: 26px; font-size: var(--d-fs-text); line-height: 1.5; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-liste li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; font-weight: 800; color: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-liste--ja li::before { content: "✓"; } html[data-design="d"][data-variante="b4"] .pt-liste--nein li::before { content: "✕"; color: var(--d-fehler); } html[data-design="d"][data-variante="b4"] .pt-liste--achtung li::before { content: ""; top: .62em; left: 5px; width: 8px; height: 8px; border: 2px solid var(--b4-daten); border-radius: 50%; box-sizing: border-box; } html[data-design="d"][data-variante="b4"] .pt-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-a5) var(--d-a6); margin: var(--d-a4) 0; } /* ---------- Überblick ---------- */ html[data-design="d"][data-variante="b4"] .pt-ueberblick-text { grid-column: 1 / span 7; } html[data-design="d"][data-variante="b4"] .pt-steckbrief { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-notiz { margin: var(--d-a5) 0 0; padding-top: var(--d-a4); border-top: 1px solid var(--d-line); font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-grau); max-width: 60ch; } /* ---------- Große Momente ---------- */ html[data-design="d"][data-variante="b4"] .pt-erklaer { margin: calc(-1 * var(--d-a5)) 0 var(--d-a7); font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-text); max-width: 72ch; } html[data-design="d"][data-variante="b4"] .pt-erklaer b { color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-moment-auf { display: none; } html[data-design="d"][data-variante="b4"] .pt-momente-karte-kopf { grid-column: 1 / -1; } html[data-design="d"][data-variante="b4"] .pt-momente-karte-kopf .pt-text { max-width: 72ch; margin-bottom: 0; } html[data-design="d"][data-variante="b4"] .pt-momente { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--d-a7) var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-moment { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; } html[data-design="d"][data-variante="b4"] .pt-moment-bild .fig { aspect-ratio: 3 / 2; } html[data-design="d"][data-variante="b4"] .pt-moment-text { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-moment-name { margin: 0; font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-moment-claim { margin: var(--d-a1) 0 var(--d-a3); font-size: var(--d-fs-klein); line-height: 1.4; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-moment-teaser { margin: 0 0 var(--d-a3); font-size: 17px; line-height: 1.55; color: var(--b4-text); text-wrap: pretty; } html[data-design="d"][data-variante="b4"] .pt-moment-einordnung { margin: 0 0 var(--d-a4); font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-text); text-wrap: pretty; } html[data-design="d"][data-variante="b4"] .pt-moment-einordnung b { font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-moment-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-a3) var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-moment-wo { margin: 0 0 var(--d-a3); font-size: var(--d-fs-klein); line-height: 1.4; color: var(--b4-text); font-weight: 500; } /* Erster Moment breit: Foto 7, Text 5 */ html[data-design="d"][data-variante="b4"] .pt-moment--erst { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--d-a6); align-items: center; } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-text { padding-top: 0; } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-name { font-size: var(--d-fs-kapitel); line-height: var(--d-lh-kapitel); } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-teaser { font-size: var(--d-fs-text); } /* Letzte Reihe füllt die Breite (nur Desktop; Tablet und Handy unten): ein Moment allein steht breit wie der erste, zwei teilen sich die Zeile */ @media (min-width: 1100px) { html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):nth-child(3n+2):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--d-a6); align-items: center; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):nth-child(3n+2):last-child .pt-moment-text { padding-top: 0; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):nth-child(3n+2):nth-last-child(2), html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):nth-child(3n+3):last-child { grid-column: span 3; } } /* Merken: eine Pille mit Zustand wie „Anpinnen“ in Schritt 3, schon ungewählt in der Klickfarbe */ html[data-design="d"][data-variante="b4"] .pt-seite .hl-save { display: inline-flex; align-items: center; min-height: var(--b4-pille); padding: 0 14px; box-sizing: border-box; background: var(--b4-papier); border: 1.5px solid var(--b4-tinte); border-radius: 999px; color: var(--b4-tinte); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } html[data-design="d"][data-variante="b4"] .pt-seite .hl-save:hover { background: var(--b4-k-an); border-color: var(--b4-tinte); color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .pt-seite .hl-save:is(.on, [aria-pressed="true"]), html[data-design="d"][data-variante="b4"] .pt-seite .hl-save:is(.on, [aria-pressed="true"]):hover { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); } html[data-design="d"][data-variante="b4"] .pt-seite .hl-save:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } /* Karte der Momente: höchstens 7 Spalten und rund 700 px hoch (die Form folgt dem Land, --hl-ar), daneben Zählung, Liste mit den Nummern der Karte und Merkliste */ html[data-design="d"][data-variante="b4"] .pt-momente-karte { margin-top: var(--d-a8); align-items: start; } /* Karte auf der Kante von Überschrift und Text (vorher mittig in der Spalte, 128 px eingerückt), die Liste daneben beginnt auf Höhe der Karte (vorher 28 px tiefer) (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte { grid-column: 1 / span 7; justify-self: start; width: 100%; max-width: min(100%, calc(var(--hl-ar, .8) * 700px)); margin: 0; } html[data-design="d"][data-variante="b4"] .pt-momente-karte-text > .pt-momente-index:first-child { margin-top: 0; } html[data-design="d"][data-variante="b4"] .pt-momente-karte-text { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-momente-index { columns: 2; column-gap: var(--d-a5); margin: var(--d-a4) 0 0; padding: 0; list-style: none; } html[data-design="d"][data-variante="b4"] .pt-momente-index li { break-inside: avoid; margin: 0 0 6px; font-size: 16px; line-height: 1.35; } html[data-design="d"][data-variante="b4"] .pt-momente-index a { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 0; color: var(--b4-tinte); font-weight: 500; 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"] .pt-momente-index a:hover { text-decoration-color: currentColor; } html[data-design="d"][data-variante="b4"] .pt-momente-index a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } html[data-design="d"][data-variante="b4"] .pt-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; align-self: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--b4-daten); color: var(--b4-auf-daten); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; } html[data-design="d"][data-variante="b4"] .pt-momente-index li.is-aussen .pt-nr { background: transparent; color: var(--b4-daten); box-shadow: inset 0 0 0 1.5px var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-merkliste { margin-top: var(--d-a5); padding: var(--d-a5); background: var(--b4-lavur); border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-kap--kiesel .pt-merkliste { background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .pt-merkliste[hidden] { display: none; } html[data-design="d"][data-variante="b4"] .pt-merk-zeile { margin: 0 0 var(--d-a2); font-size: var(--d-fs-text); line-height: 1.45; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-merk-zeile b { color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-merkliste .btn { margin-top: var(--d-a2); } /* Welterbe und „Abseits“ */ html[data-design="d"][data-variante="b4"] .pt-welterbe { margin-top: var(--d-a8); } html[data-design="d"][data-variante="b4"] .pt-welterbe-text { grid-column: 1 / span 7; } html[data-design="d"][data-variante="b4"] .pt-abseits { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-welterbe-liste { display: flex; flex-wrap: wrap; gap: var(--d-a2) var(--d-a5); margin: var(--d-a4) 0 0; padding: 0; list-style: none; } html[data-design="d"][data-variante="b4"] .pt-welterbe-liste li { font-size: var(--d-fs-text); line-height: 1.5; } html[data-design="d"][data-variante="b4"] .pt-welterbe-liste span { color: var(--b4-grau); font-size: var(--d-fs-klein); font-weight: 500; font-variant-numeric: tabular-nums; } /* ---------- Kosten ---------- */ html[data-design="d"][data-variante="b4"] .pt-kosten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-kosten-stufe { box-sizing: border-box; padding: var(--d-a5); background: var(--b4-lavur); border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-kap--kiesel .pt-kosten-stufe { background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .pt-kosten-stufe .pt-h4 { margin: 0; font-size: var(--d-fs-klein); font-weight: 500; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .pt-kosten-betrag { margin: var(--d-a1) 0 var(--d-a3); font-size: var(--d-fs-kapitel); line-height: 1.1; font-weight: 800; color: var(--b4-titel); font-variant-numeric: lining-nums tabular-nums; } html[data-design="d"][data-variante="b4"] .pt-kosten-stufe .pt-text { margin: 0; font-size: 16px; line-height: 1.5; } html[data-design="d"][data-variante="b4"] .pt-kosten-hinweis { margin-top: var(--d-a5); max-width: 80ch; } /* ---------- Für wen ---------- */ html[data-design="d"][data-variante="b4"] .pt-fuer-wen-text { grid-column: 1 / span 7; } html[data-design="d"][data-variante="b4"] .pt-erwartet { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-erwartet .pt-weniger { margin: var(--d-a4) 0 0; } html[data-design="d"][data-variante="b4"] .pt-familie-route { margin: var(--d-a4) 0 0; } html[data-design="d"][data-variante="b4"] .pt-ideal { margin: 0 0 var(--d-a6); padding: 0; list-style: none; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-ideal li { margin: 0; padding: var(--d-a3) 0; border-bottom: 1px solid var(--d-line); font-size: var(--d-fs-text); line-height: 1.5; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-ideal b { display: block; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-weniger { margin: 0 0 var(--d-a7); font-size: var(--d-fs-text); line-height: 1.5; color: var(--b4-text); max-width: 68ch; } html[data-design="d"][data-variante="b4"] .pt-weniger b { display: block; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-familie { margin-top: var(--d-a7); padding: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-familie .pt-text { max-width: 72ch; } /* ---------- Regionen ---------- */ html[data-design="d"][data-variante="b4"] .pt-zonen { grid-column: 1 / span 7; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte { grid-column: 8 / -1; } /* .zone bekommt aus laender/magazin.css ein Raster mit Nummernspalte; hier ein Block ohne Nummer */ html[data-design="d"][data-variante="b4"] .mag-page .pt-zone { display: block; margin: 0 0 var(--d-a3); padding: var(--d-a4) var(--d-a4) var(--d-a2); border: 0; border-left: 3px solid transparent; border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-zone .zone__t { margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-zone .zone__d { margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-zone.zone--mappable { cursor: pointer; } html[data-design="d"][data-variante="b4"] .pt-zone.zone--mappable:hover, html[data-design="d"][data-variante="b4"] .pt-zone.zone--active { background: var(--b4-k-hover); border-left-color: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-zone:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .pt-zonen-hinweis { margin: var(--d-a3) 0 0 var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-geo-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-a5) var(--d-a6); margin: var(--d-a8) 0 0; padding-top: var(--d-a5); border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-geo-fakten dt { font-size: var(--d-fs-klein); color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-geo-fakten dd { margin: 2px 0 0; } html[data-design="d"][data-variante="b4"] .pt-geo-fakten dd b { display: block; font-size: var(--d-fs-zwischen); line-height: 1.3; font-weight: 800; color: var(--b4-titel); font-variant-numeric: lining-nums tabular-nums; } html[data-design="d"][data-variante="b4"] .pt-geo-fakten dd span { display: block; margin-top: 2px; font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-text); } /* ---------- Karten: helle Fenster (5.2), Kartenstil Skizze aus js/design-b4.js ---------- Im dunklen Modus behalten Karte, Kartenknöpfe und Karteninfo die hellen Werte, wie .leaflet-container in design-b4-basis.css */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-seite .geo-map { --b4-tinte: #2B6E55; --b4-text: #173A2E; --b4-titel: #173A2E; --b4-grau: #4B6259; --b4-daten: #173A2E; --b4-auf-daten: #FFFFFF; --b4-auf-tinte: #FFFFFF; --b4-papier: #FFFFFF; --b4-lavur: #EDF4F1; --b4-linie: #DBE5E1; --b4-k-rand: rgba(23, 58, 46, .28); --b4-k-rand-hover: rgba(23, 58, 46, .54); --b4-k-hover: #F4F8F6; --b4-k-an: #DDF0E7; --b4-unterstrich: rgba(43, 110, 85, .5); --d-tinte-rgb: 23, 58, 46; color-scheme: light; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-fig { border-radius: var(--d-r-karte); border: 1px solid rgba(var(--d-tinte-rgb), .12); background: #FFFAF2; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-frame { border-radius: var(--d-r-karte); } /* Grundkarte im Dunkeln um 15 % gedämpft wie die übrigen Karten (5.2); Pins und Namen bleiben */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-seite .geo-map .cms-svg > .msk-under, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-seite .geo-map .cms-svg > .msk-over, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-seite .geo-map .cms-svg > .cms-island-dots, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .pt-seite .geo-map .cms-svg > .cms-river { filter: brightness(.85); } /* Zoom und Zurücksetzen als Kreise des Knopfsystems */ html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-zoom-ctl { gap: 6px; } /* Zoomknöpfe unter der Karte statt darauf: oben rechts deckten sie Pins und Namen (Krüger, Hongkong, Japanisches Meer am Handy, Chiles schmale Karte am Desktop; Prüfung 09.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-fig { margin-bottom: calc(var(--b4-kreis) + var(--d-a3)); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-zoom-ctl { top: calc(100% + var(--d-a3)); right: 0; flex-direction: row; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-zoom-ctl button { width: var(--b4-kreis); height: var(--b4-kreis); border-radius: 50%; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); box-shadow: none; font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 19px; font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-zoom-ctl 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"] .pt-seite .geo-map .cms-zoom-ctl button:active { transform: none; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-zoom-ctl button:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .pt-seite .map-locator__lbl { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--b4-grau); } /* Gemerkte Momente auf der Karte: Ring in der Farbe der Route (dein Weg), Zahl in Tinte */ html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg--sketch .mk-highlight.is-saved .mk-hl-ring, html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg--sketch .mk-highlight.is-saved .mk-hl-dot { stroke: var(--b4-marker); stroke-width: 3.4; } html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg--sketch .mk-highlight.is-saved .mk-hl-badge, html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg--sketch .mk-highlight.is-saved:not(.mk-highlight--photo) .mk-hl-dot { fill: var(--b4-daten); } /* Regionen leuchten in Tinte statt Terracotta */ html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-region-ring { stroke: var(--b4-daten); opacity: .55; } /* Orte, Hauptstadt und Sehenswürdigkeiten in Tinte (Rolle Nummern, Pins, Datenflächen), Natur im Nebenton */ html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-pin-ring { stroke: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-pin-dot { fill: var(--b4-daten); stroke: #FFFAF2; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-label-bg-cap { fill: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-label-cap { fill: var(--b4-auf-daten); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-svg--sketch .mk-label { fill: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-svg--sketch .mk-callout-line { stroke: rgba(var(--d-tinte-rgb), .38); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-poi-glyph { fill: var(--b4-daten); stroke: #FFFAF2; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-poi-label { fill: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .mk-nature-glyph { fill: var(--b4-grau); stroke: #FFFAF2; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-svg--sketch .mk-hl-dot, html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-svg--sketch .mk-hl-badge { fill: var(--b4-daten); } /* Kartenschrift in echten Pixeln (--k aus js/design-b4-portrait.js, wie am Klimadiagramm): vorher schrumpften Namen mit der Karte auf 4 bis 9 px. Ortsnamen ohne Pille, mit hellem Rand in der Landfarbe; auf der Karte der Momente stehen die Namen in der Liste daneben, die Karte trägt nur Fotos und Nummern, die Nummern ab 11 px. */ html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg .mk-neighbor-label { font-size: calc(12px * var(--k, 1)); } /* Nachbar- und Meeresnamen wie auf der Almanac-Karte im PDF (design-b4-pdf.css, Spiegel-Vertrag), Inselpunkte in der Tinte des Designs: beide standen noch in der Tinte des Live-Designs (Scan 11.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg .mk-neighbor-label { fill: #4B6259; opacity: .8; } html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg--sketch .cms-island-dot { stroke: rgba(23, 58, 46, .54); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-label, html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-label-cap, html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-poi-label { font-size: calc(13px * var(--k, 1)); font-weight: 700; font-style: normal; fill: var(--b4-text); dominant-baseline: central; paint-order: stroke; stroke: #FFFAF2; stroke-width: calc(3.5px * var(--k, 1)); stroke-linejoin: round; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-label-cap { font-weight: 800; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-label-bg, html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .mk-label-bg-cap { display: none; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-label, html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-label-bg, html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-callout-line { display: none; } /* Auseinandergerückte Pins: feiner Strich zum echten Ort (js/design-b4-portrait.js pinsEntzerren) */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .pt-hl-versatz line { stroke: var(--b4-daten); stroke-linecap: round; opacity: .6; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .pt-hl-versatz circle { fill: var(--b4-daten); } /* Namen liegen direkt an ihrem Punkt (namenSetzen), die Hinweislinie zur alten Pille entfällt */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .pt-namen-frei .mk-callout-line { display: none; } /* Namen ohne freien Platz entfallen (Punkt bleibt, Name beim Antippen oder Hineinzoomen) */ html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg .pt-name-aus { display: none; } /* Gelände: Namen von Gebirgen, Flüssen und Gipfeln (js/map-geo-layer.js) erst, wenn sie beim Zoomen 11 px erreichen (Klasse aus js/design-b4-portrait.js); das Gipfelzeichen bleibt, die Höhe steht in den Geo-Fakten und im Kurzporträt */ html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg:not(.pt-gelaende-lesbar) .geo-labels text, html[data-design="d"][data-variante="b4"] .pt-seite .cms-svg .geo-peak text ~ text { display: none; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-badge, html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-num { transform-box: fill-box; transform-origin: center; } /* Nummer 11,6 px, Kreis darum 17 px (echte Pixel) */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-num { transform: scale(max(1, calc(var(--k, 1) * 1.45))); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-badge { transform: scale(max(1, calc(var(--k, 1) * 1.15))); } /* Momente ohne Foto (in dichten Gegenden setzt die Karte nur den Punkt): Punkt so groß wie die Nummernkreise, vorher 7 px unter einer 11,6-px-Nummer (Kap; Prüfung 09.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-highlight:not(.mk-highlight--photo) .mk-hl-dot { transform-box: fill-box; transform-origin: center; transform: scale(max(1, calc(var(--k, 1) * .91))); } /* Am Desktop die Fotos größer, damit sie neben der Nummer als Foto lesbar bleiben (am Handy wären sie in dichten Gegenden übereinander) */ @media (min-width: 769px) { html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-photo-wrap { transform: scale(clamp(1, calc(var(--k, 1) * .9), 1.6)); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-highlight--photo:hover .mk-hl-photo-wrap { transform: scale(calc(clamp(1, calc(var(--k, 1) * .9), 1.6) * 1.35)); } } /* Globus „Lage“: Meer und Land wie die Skizze, das Land in Tinte */ html[data-design="d"][data-variante="b4"] .pt-seite .map-locator { background: rgba(255, 250, 242, .94); border-color: rgba(var(--d-tinte-rgb), .14); box-shadow: none; } html[data-design="d"][data-variante="b4"] .pt-seite .gl-ocean { fill: #D6EAF7; } html[data-design="d"][data-variante="b4"] .pt-seite .gl-land { fill: #FFFAF2; stroke: rgba(var(--d-tinte-rgb), .2); } html[data-design="d"][data-variante="b4"] .pt-seite .gl-target, html[data-design="d"][data-variante="b4"] .pt-seite .gl-pin { fill: var(--b4-daten); stroke: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-seite .gl-ring { stroke: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-seite .gl-rim { stroke: rgba(var(--d-tinte-rgb), .35); } /* Karteninfo (Antippen eines Moments oder Orts): Fläche, Schrift und Knöpfe wie die Seite */ html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop { background: var(--b4-papier); border-color: rgba(var(--d-tinte-rgb), .14); color: var(--b4-text); border-radius: var(--d-r-flaeche); box-shadow: 0 1px 0 rgba(var(--d-tinte-rgb), .14), 0 8px 24px rgba(var(--d-tinte-rgb), .16); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop:not(.cms-info-pop--below)::after { border-top-color: var(--b4-papier); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop.cms-info-pop--below::after { border-bottom-color: var(--b4-papier); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop .cms-info-eyebrow { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop .cms-info-eyebrow::before { display: none; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop .cms-info-name { font-size: 20px; font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-pop .cms-info-note { font-size: 14px; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-chip { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--b4-grau); border-color: var(--b4-k-rand); } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-jump { color: var(--b4-tinte); font-weight: 700; font-size: 14px; text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-underline-offset: 4px; border: 0; } html[data-design="d"][data-variante="b4"] .pt-seite .geo-map .cms-info-credit { font-size: 12px; color: var(--b4-grau); } /* ---------- Reisezeit ---------- */ html[data-design="d"][data-variante="b4"] .pt-klima { grid-column: 1 / span 7; margin: 0; } html[data-design="d"][data-variante="b4"] .pt-klima .climate-chart { max-width: 620px; } html[data-design="d"][data-variante="b4"] .pt-reisezeit-text { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-reisezeit-text .pt-paare { margin-bottom: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-landesteile { margin-top: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-teil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: var(--d-a3) 0; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-teil--achse { border-top: 0; padding-top: 2px; } html[data-design="d"][data-variante="b4"] .pt-teil-name { margin: 0; font-size: var(--d-fs-klein); line-height: 1.35; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-teil-name b { font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-teil-name span { margin-left: 8px; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-teil-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; } html[data-design="d"][data-variante="b4"] .pt-teil-band i { display: block; height: 10px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px var(--d-line-stark); } html[data-design="d"][data-variante="b4"] .pt-teil-band i.an { background: var(--b4-daten); box-shadow: none; } html[data-design="d"][data-variante="b4"] .pt-teil-band span { font-size: 12px; line-height: 1; text-align: center; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-teil-zeit { margin: 0; font-size: var(--d-fs-klein); color: var(--b4-text); font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-teil--achse .pt-teil-zeit, html[data-design="d"][data-variante="b4"] .pt-teil--achse .pt-teil-name { display: none; } html[data-design="d"][data-variante="b4"] .pt-feste-titel { margin-top: var(--d-a8); } html[data-design="d"][data-variante="b4"] .pt-feste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-a6); margin-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-fest { padding-top: var(--d-a3); border-top: 2px solid var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-fest-monat { margin: 0 0 var(--d-a1); font-size: var(--d-fs-klein); color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-fest .pt-text { font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); } html[data-design="d"][data-variante="b4"] .pt-weiter { display: grid; gap: var(--d-a3); margin: var(--d-a7) 0 0; padding: 0; list-style: none; font-size: var(--d-fs-text); line-height: 1.45; } /* ---------- Gut zu wissen ---------- */ html[data-design="d"][data-variante="b4"] .pt-praxis-liste { grid-column: 1 / span 8; columns: 2; column-gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-notruf { grid-column: 9 / -1; } html[data-design="d"][data-variante="b4"] .pt-praxis { break-inside: avoid; margin: 0 0 var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-praxis > summary { display: block; list-style: none; cursor: default; margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-praxis > summary::-webkit-details-marker { display: none; } html[data-design="d"][data-variante="b4"] .pt-praxis-titel { display: block; font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-praxis-kern { display: block; margin-top: 2px; font-size: var(--d-fs-klein); line-height: 1.4; color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-praxis-text .pt-text { margin-bottom: 0; } html[data-design="d"][data-variante="b4"] .pt-praxis-wege { margin: 0; } html[data-design="d"][data-variante="b4"] .pt-praxis-wege > div { padding: var(--d-a2) 0; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-praxis-wege dt { font-size: 16px; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-praxis-wege dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-praxis-wege dd em { font-style: normal; font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-notruf-liste { margin: 0 0 var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-notruf-liste > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--d-a3); padding: var(--d-a2) 0; border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-notruf-liste dt { font-size: 16px; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-notruf-liste dd { margin: 0; font-size: var(--d-fs-zwischen); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } html[data-design="d"][data-variante="b4"] .pt-notruf-liste a { color: var(--b4-tinte); text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* Deutsche Botschaft unter den Notrufnummern (js/notfall.js, 19.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-notruf-h { margin-top: var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-gewaehr { margin-top: var(--d-a5); max-width: 90ch; } /* ---------- Beispielroute ---------- */ html[data-design="d"][data-variante="b4"] .pt-route { align-items: center; } html[data-design="d"][data-variante="b4"] .pt-route-bild { grid-column: 1 / span 7; } html[data-design="d"][data-variante="b4"] .pt-route-bild { position: relative; margin: 0; aspect-ratio: 7 / 5; overflow: hidden; border-radius: var(--d-r-foto); background: var(--d-kiesel); } html[data-design="d"][data-variante="b4"] .pt-route-bild img, html[data-design="d"][data-variante="b4"] .pt-weitere-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } html[data-design="d"][data-variante="b4"] .pt-route .pt-aktionen { gap: var(--d-a3) var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-weitere-titel { margin-top: var(--d-a8); } html[data-design="d"][data-variante="b4"] .pt-weitere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a6); margin-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-weitere-bild { position: relative; display: block; margin-bottom: var(--d-a3); aspect-ratio: 7 / 5; overflow: hidden; border-radius: var(--d-r-foto); background: var(--d-kiesel); } html[data-design="d"][data-variante="b4"] .pt-weitere-route .pt-text { margin-bottom: var(--d-a2); font-size: 16px; line-height: 1.5; } html[data-design="d"][data-variante="b4"] .pt-weitere-links { display: flex; flex-wrap: wrap; gap: var(--d-a2) var(--d-a5); margin: 0; font-size: 16px; } /* Nur eine weitere Route: quer statt einer Kachel in einer Dreierreihe (Prüfung 09.10.2026) */ @media (min-width: 769px) { html[data-design="d"][data-variante="b4"] .pt-weitere:has(> .pt-weitere-route:only-child) { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .pt-weitere-route:only-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--d-a3) var(--d-a6); align-items: center; } html[data-design="d"][data-variante="b4"] .pt-weitere-route:only-child .pt-weitere-bild { margin-bottom: 0; grid-row: 1 / span 2; } html[data-design="d"][data-variante="b4"] .pt-weitere-route:only-child .pt-text { align-self: end; max-width: var(--measure, 47ch); } html[data-design="d"][data-variante="b4"] .pt-weitere-route:only-child .pt-weitere-links { align-self: start; } } html[data-design="d"][data-variante="b4"] .pt-route-text { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-route-fakten { margin: calc(-1 * var(--d-a2)) 0 var(--d-a4); font-size: var(--d-fs-text); color: var(--b4-grau); font-weight: 500; } /* Stopps im Raster: Als Fließreihe wirkten sie wie Spalten, die nicht fluchten (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-route-stopps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--d-a2) var(--d-a4); margin: var(--d-a4) 0 0; padding: 0; list-style: none; counter-reset: stopp; } html[data-design="d"][data-variante="b4"] .pt-route-stopps li { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--b4-titel); counter-increment: stopp; } html[data-design="d"][data-variante="b4"] .pt-route-stopps li span { font-weight: 500; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .pt-route-stopps li::before { content: counter(stopp); display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--b4-daten); color: var(--b4-auf-daten); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Geschichte: Jahre als Zeitleiste ---------- */ html[data-design="d"][data-variante="b4"] .pt-zeit { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-ereignis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--d-a6); align-items: start; padding: var(--d-a6) 0; border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-jahr { grid-column: 1 / span 2; grid-row: 1; margin: 0; font-size: var(--d-fs-kapitel); line-height: 1; font-weight: 800; color: var(--b4-titel); font-variant-numeric: lining-nums tabular-nums; } html[data-design="d"][data-variante="b4"] .pt-jahr span { display: block; margin-top: var(--d-a2); font-size: var(--d-fs-klein); line-height: 1.3; font-weight: 500; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .pt-ereignis-text { grid-column: 3 / span 6; grid-row: 1; } html[data-design="d"][data-variante="b4"] .pt-ereignis-bild { grid-column: 9 / -1; grid-row: 1; } html[data-design="d"][data-variante="b4"] .pt-ereignis-bild .fig { aspect-ratio: 3 / 2; } html[data-design="d"][data-variante="b4"] .pt-heute { margin-top: var(--d-a7); max-width: 900px; } /* ---------- Küche ---------- */ html[data-design="d"][data-variante="b4"] .pt-kueche { align-items: center; } html[data-design="d"][data-variante="b4"] .pt-kueche-bild { grid-column: 1 / span 6; } html[data-design="d"][data-variante="b4"] .pt-kueche-bild .fig { aspect-ratio: 4 / 3; } html[data-design="d"][data-variante="b4"] .pt-kueche-text { grid-column: 7 / -1; } html[data-design="d"][data-variante="b4"] .pt-kueche-text:only-child { grid-column: 1 / span 8; } html[data-design="d"][data-variante="b4"] .pt-gerichte-titel { margin-top: var(--d-a8); } html[data-design="d"][data-variante="b4"] .pt-gerichte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-a6); margin-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-gericht .fig { aspect-ratio: 1 / 1; margin-bottom: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-gericht .pt-text { font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-notizen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a6); margin-top: var(--d-a8); padding-top: var(--d-a5); border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-notizen .pt-text { font-size: 16px; line-height: 1.5; } /* ---------- Sprache ---------- */ html[data-design="d"][data-variante="b4"] .pt-saetze { grid-column: 1 / span 7; width: 100%; border-collapse: collapse; } html[data-design="d"][data-variante="b4"] .pt-saetze caption { text-align: left; caption-side: top; } html[data-design="d"][data-variante="b4"] .pt-saetze th, html[data-design="d"][data-variante="b4"] .pt-saetze td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--d-line); text-align: left; vertical-align: baseline; font-size: 16px; line-height: 1.4; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-saetze thead th { font-size: var(--d-fs-klein); font-weight: 500; color: var(--b4-grau); border-bottom-color: var(--d-line-stark); } html[data-design="d"][data-variante="b4"] .pt-saetze tbody th { font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-saetze td:last-child { color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-saetze td:nth-child(2) { color: var(--b4-titel); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-schrift { grid-column: 8 / -1; } html[data-design="d"][data-variante="b4"] .pt-schrift-probe { margin: 0 0 var(--d-a2); font-size: clamp(40px, 5vw, 72px); line-height: 1.15; font-weight: 700; color: var(--b4-titel); overflow-wrap: anywhere; } html[data-design="d"][data-variante="b4"] .pt-sitten { margin-top: var(--d-a8); } /* ---------- Architektur ---------- */ html[data-design="d"][data-variante="b4"] .pt-bauten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-bau .fig { aspect-ratio: 4 / 3; margin-bottom: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-bau-zeit { margin-bottom: var(--d-a1); } html[data-design="d"][data-variante="b4"] .pt-bau .pt-text { font-size: 16px; line-height: 1.55; } /* ---------- Erleben ---------- */ html[data-design="d"][data-variante="b4"] .pt-erlebnisse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-erlebnis .fig { aspect-ratio: 4 / 3; margin-bottom: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-erlebnis-art { margin-bottom: var(--d-a1); } html[data-design="d"][data-variante="b4"] .pt-erlebnis .pt-text { font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); } /* Partner-Link (Affiliate.activitiesLink): Textknopf, Hinweis klein */ html[data-design="d"][data-variante="b4"] .pt-partner { margin-top: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-partner .exp-aff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--d-a3); margin: 0; padding: 0; background: none; border: 0; text-align: left; } html[data-design="d"][data-variante="b4"] .pt-partner .exp-aff-link { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: var(--d-fs-text); font-weight: 700; color: var(--b4-tinte); 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"] .pt-partner .exp-aff-link:hover { text-decoration-color: var(--b4-marker); text-decoration-thickness: 7px; text-underline-offset: -3px; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] .pt-partner .exp-aff-link span[aria-hidden] { display: none; } html[data-design="d"][data-variante="b4"] .pt-partner .exp-aff-note { font-size: var(--d-fs-klein); color: var(--b4-grau); font-weight: 500; letter-spacing: 0; text-transform: none; } /* ---------- Mitnehmen ---------- */ html[data-design="d"][data-variante="b4"] .pt-medien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-medium ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-medium li { padding: var(--d-a3) 0; border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-medium b { display: block; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-medium span { display: block; margin-top: 2px; font-size: var(--d-fs-klein); line-height: var(--d-lh-klein); color: var(--b4-text); } /* ---------- Nachhaltig reisen ---------- */ html[data-design="d"][data-variante="b4"] .pt-nachhaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-nh-wert { display: block; margin-bottom: 2px; font-size: var(--d-fs-kapitel); line-height: 1.05; font-weight: 800; font-variant-numeric: lining-nums; } /* ---------- Abschluss ---------- */ html[data-design="d"][data-variante="b4"] .pt-abschluss { padding: 96px 0; background: var(--d-grund); border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-abschluss .pt-h2 { font-size: var(--d-fs-titel); line-height: var(--d-lh-titel); letter-spacing: var(--d-track-titel); } html[data-design="d"][data-variante="b4"] .pt-abschluss .pt-lead { margin-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-abschluss .pt-klein { margin-top: var(--d-a4); } /* ---------- Kapitelleiste (wie die Ergebnisseite, design-d-ergebnis.css .d2-kl) ---------- */ html[data-design="d"][data-variante="b4"] .pt-leiste { position: fixed; left: 0; right: 0; top: var(--header-h, 64px); z-index: 90; background: var(--d-grund); border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-leiste[hidden] { display: none; } html[data-design="d"][data-variante="b4"] .pt-leiste-innen { display: flex; align-items: center; gap: var(--d-a4); box-sizing: border-box; max-width: 1440px; min-height: 56px; margin: 0 auto; padding: 4px var(--d-seite); } html[data-design="d"][data-variante="b4"] .pt-leiste-ort { display: none; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--b4-titel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-design="d"][data-variante="b4"] .pt-leiste-ziele { display: flex; flex: 1 1 auto; min-width: 0; gap: 20px; margin: 0; overflow: hidden; font-size: 15px; } html[data-design="d"][data-variante="b4"] .pt-leiste-ziele a { padding: 12px 0; line-height: 20px; white-space: nowrap; color: var(--b4-tinte); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); } html[data-design="d"][data-variante="b4"] .pt-leiste-ziele a:hover { text-decoration-color: currentColor; } html[data-design="d"][data-variante="b4"] .pt-leiste-ziele a[aria-current] { color: var(--b4-titel); font-weight: 700; text-decoration-color: var(--b4-titel); text-decoration-thickness: 2px; } html[data-design="d"][data-variante="b4"] .pt-leiste-ziele a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } html[data-design="d"][data-variante="b4"] .pt-inhalt { display: none; position: relative; flex: none; } html[data-design="d"][data-variante="b4"] .pt-leiste.is-menue .pt-leiste-ort { display: block; } html[data-design="d"][data-variante="b4"] .pt-leiste.is-menue .pt-leiste-ziele { position: absolute; visibility: hidden; pointer-events: none; } html[data-design="d"][data-variante="b4"] .pt-leiste.is-menue .pt-inhalt { display: block; } html[data-design="d"][data-variante="b4"] .pt-inhalt-knopf { list-style: none; display: inline-flex; align-items: center; box-sizing: border-box; cursor: pointer; user-select: none; min-height: var(--b4-pille); padding: 0 14px; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 999px; color: var(--b4-text); font-size: 15px; font-weight: 500; line-height: 1; } html[data-design="d"][data-variante="b4"] .pt-inhalt-knopf:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); } html[data-design="d"][data-variante="b4"] .pt-inhalt-knopf:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .pt-inhalt[open] > .pt-inhalt-knopf { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-inhalt-knopf::-webkit-details-marker { display: none; } html[data-design="d"][data-variante="b4"] .pt-inhalt-knopf::marker { content: ""; } html[data-design="d"][data-variante="b4"] .pt-inhalt-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; display: grid; min-width: 220px; max-height: calc(100vh - 160px); overflow-y: auto; padding: 6px; box-sizing: border-box; background: var(--d-flaeche); border-radius: var(--d-r-flaeche); box-shadow: 0 1px 0 rgba(var(--d-tinte-rgb), .14), 0 8px 24px rgba(var(--d-tinte-rgb), .16); } html[data-design="d"][data-variante="b4"] .pt-inhalt-menue a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--b4-text); text-decoration: none; } html[data-design="d"][data-variante="b4"] .pt-inhalt-menue a:hover { background: var(--b4-k-hover); text-decoration: underline; text-underline-offset: 4px; } html[data-design="d"][data-variante="b4"] .pt-inhalt-menue a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: -2px; } html[data-design="d"][data-variante="b4"] .pt-inhalt-menue a[aria-current] { font-weight: 700; color: var(--b4-titel); box-shadow: inset 3px 0 0 var(--b4-daten); } html[data-design="d"][data-variante="b4"] .pt-leiste .btn.pt-leiste-plan { flex: none; min-height: var(--b4-k-s); padding: 0 16px; font-size: 15px; } html[data-design="d"][data-variante="b4"] .pt-zaehler { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--b4-auf-gelb); color: var(--b4-marker); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } html[data-design="d"][data-variante="b4"] .pt-zaehler[hidden] { display: none; } /* Blätterknöpfe und Zähler unter den Wischreihen: nur am Handy (unten) */ html[data-design="d"][data-variante="b4"] .pt-reihe-steuer { display: none; } html[data-design="d"][data-variante="b4"] .pt-kreis { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--b4-kreis); height: var(--b4-kreis); padding: 0; border-radius: 50%; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); cursor: pointer; } html[data-design="d"][data-variante="b4"] .pt-kreis:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); } html[data-design="d"][data-variante="b4"] .pt-kreis:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .pt-kreis:disabled { opacity: .4; cursor: default; } /* ---------- Übersicht der Länderportraits und Beispielrouten (laender/, ?view=inspiration) ---------- Kacheln wie die Länderwahl der Startseite: Foto, darunter Name und Angaben, keine Schrift auf dem Foto. Filter und Suche aus laender/index.html: Kontinente als Pillen (Knopfsystem), Suche als Feld. */ html[data-design="d"][data-variante="b4"] .pt-liste-wurzel { background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .pt-liste-seite { padding-bottom: 96px; } html[data-design="d"][data-variante="b4"] .pt-liste-kopf { padding-top: 64px; padding-bottom: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-liste-kopf .pt-lead { margin-top: var(--d-a5); max-width: 60ch; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar { align-items: center; flex-wrap: wrap; gap: var(--d-a4) var(--d-a6); margin: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filter-label { display: none; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filterwrap { gap: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filter-tabs { gap: var(--d-a2); border-bottom: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filter-tabs button { display: inline-flex; padding: 0 14px; font-size: 15px; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filter-tabs button::after { display: none; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .filter-tabs .count { font-size: 13px; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .searchwrap { flex: 0 1 320px; max-width: 320px; gap: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search { box-sizing: border-box; min-height: var(--b4-k-m); padding: 0 14px; gap: var(--d-a2); background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: var(--d-r-ui); box-shadow: none; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search:focus-within { border-color: var(--b4-tinte); box-shadow: 0 0 0 1px var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search svg { width: 18px; height: 18px; stroke: var(--b4-grau); stroke-width: 2; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search:focus-within svg { stroke: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 16px; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search input::placeholder { color: var(--b4-grau); font-family: 'Alegreya Sans', system-ui, sans-serif; font-style: normal; opacity: 1; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search .clear { width: 32px; height: 32px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-status { margin: var(--d-a4) 0 var(--d-a6); font-size: var(--d-fs-klein); color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-status .count-line em { font-size: inherit; font-weight: 700; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-status .reset { font-size: var(--d-fs-klein); font-weight: 700; color: var(--b4-tinte); text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-status .chip-active { padding: 2px 4px 2px 12px; background: var(--b4-tinte); color: var(--b4-auf-tinte); font-size: 14px; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-status .chip-active button { width: 28px; height: 28px; color: var(--b4-auf-tinte); opacity: 1; font-size: 18px; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty { padding: var(--d-a7) var(--d-a6); background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty .ekick { display: none; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty h3 { font-size: var(--d-fs-zwischen); font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty h3 em { color: inherit; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty p { font-size: var(--d-fs-klein); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty .ebtn { display: inline-flex; align-items: center; min-height: var(--b4-k-m); padding: 0 22px; background: var(--b4-papier); border: 1.5px solid var(--b4-tinte); border-radius: var(--d-r-ui); color: var(--b4-tinte); font-size: 16px; font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-empty .ebtn:hover { background: var(--b4-k-an); } html[data-design="d"][data-variante="b4"] .pt-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-a7) var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-kachel { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-kachel-bild { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--d-r-foto); background: var(--d-kiesel); } html[data-design="d"][data-variante="b4"] .pt-kachel--karte .pt-kachel-bild, html[data-design="d"][data-variante="b4"] .pt-liste-routen .pt-kachel-bild { aspect-ratio: 4 / 3; } html[data-design="d"][data-variante="b4"] .pt-kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } html[data-design="d"][data-variante="b4"] .pt-kachel-bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--d-tinte-rgb), .08); pointer-events: none; } html[data-design="d"][data-variante="b4"] .pt-stempel { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--b4-papier); color: var(--b4-text); font-size: 13.5px; line-height: 1.2; font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-kachel-text { display: flex; flex-direction: column; gap: 2px; padding-top: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-kachel-land { font-size: var(--d-fs-klein); color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-kachel-name { font-size: var(--d-fs-zwischen); line-height: 1.25; font-weight: 800; color: var(--b4-titel); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; } html[data-design="d"][data-variante="b4"] .pt-kachel:hover .pt-kachel-name { text-decoration-color: var(--b4-marker); } html[data-design="d"][data-variante="b4"] .pt-kachel:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 4px; } html[data-design="d"][data-variante="b4"] .pt-kachel-zeile { font-size: var(--d-fs-klein); line-height: 1.4; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .pt-kachel-weg { color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .pt-liste-quellen { margin-top: var(--d-a7); } /* ---------- Tablet ---------- */ @media (max-width: 1099px) { html[data-design="d"][data-variante="b4"] .pt-kopf { align-items: start; } html[data-design="d"][data-variante="b4"] .pt-kopf-bild { grid-column: 1 / -1; grid-row: 1; } html[data-design="d"][data-variante="b4"] .pt-kopf-text { grid-column: 1 / -1; grid-row: 2; padding-top: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-kopf-satz { max-width: 40ch; } html[data-design="d"][data-variante="b4"] .pt-ueberblick-text, html[data-design="d"][data-variante="b4"] .pt-steckbrief, html[data-design="d"][data-variante="b4"] .pt-fuer-wen-text, html[data-design="d"][data-variante="b4"] .pt-erwartet, html[data-design="d"][data-variante="b4"] .pt-zonen, html[data-design="d"][data-variante="b4"] .pt-welterbe-text, html[data-design="d"][data-variante="b4"] .pt-abseits, html[data-design="d"][data-variante="b4"] .pt-klima, html[data-design="d"][data-variante="b4"] .pt-reisezeit-text, html[data-design="d"][data-variante="b4"] .pt-praxis-liste, html[data-design="d"][data-variante="b4"] .pt-notruf, html[data-design="d"][data-variante="b4"] .pt-route-bild, html[data-design="d"][data-variante="b4"] .pt-route-text, html[data-design="d"][data-variante="b4"] .pt-kueche-bild, html[data-design="d"][data-variante="b4"] .pt-kueche-text, html[data-design="d"][data-variante="b4"] .pt-saetze, html[data-design="d"][data-variante="b4"] .pt-schrift, html[data-design="d"][data-variante="b4"] .pt-momente-karte-text { grid-column: 1 / -1; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte { grid-column: 1 / -1; max-width: 560px; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte { grid-column: 1 / -1; } html[data-design="d"][data-variante="b4"] .pt-momente { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .pt-moment { grid-column: span 1; } html[data-design="d"][data-variante="b4"] .pt-moment--erst { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-text { padding-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-gerichte, html[data-design="d"][data-variante="b4"] .pt-erlebnisse, html[data-design="d"][data-variante="b4"] .pt-feste, html[data-design="d"][data-variante="b4"] .pt-geo-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .pt-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .pt-kosten, html[data-design="d"][data-variante="b4"] .pt-weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .pt-ereignis-text { grid-column: 3 / -1; } html[data-design="d"][data-variante="b4"] .pt-ereignis-bild { grid-column: 3 / span 6; grid-row: 2; margin-top: var(--d-a4); } } @media (min-width: 769px) and (max-width: 1099px) { html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):nth-child(even):last-child { grid-column: 1 / -1; } } /* ---------- Handy ---------- */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .pt-kopf { padding-top: 0; padding-bottom: var(--d-a7); } html[data-design="d"][data-variante="b4"] .pt-kopf-bild { margin: 0 calc(-1 * var(--d-seite)); } html[data-design="d"][data-variante="b4"] .pt-kopf-bild .fig { aspect-ratio: 4 / 3; border-radius: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf-text { padding-top: var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-kopf .pt-aktionen { margin-top: var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-kap { padding: 52px 0; } html[data-design="d"][data-variante="b4"] .pt-kap-kopf { margin-bottom: var(--d-a6); } /* Ohne Spaltenlücke: zwölf Spalten mit 32 px Lücke brauchen 352 px, unter 388 px Breite ragten die Kapitelblöcke über den rechten Rand (360 px: 10 px abgeschnitten, 375 px: Rand 5 statt 18 px). Am Handy belegt jeder Block die volle Breite, die Lücke hat dort keine Aufgabe (15.10.2026). */ html[data-design="d"][data-variante="b4"] .pt-raster { row-gap: var(--d-a6); column-gap: 0; } html[data-design="d"][data-variante="b4"] .pt-paare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--d-a3) var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-paare dd { font-size: 16px; } html[data-design="d"][data-variante="b4"] .pt-zwei { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .pt-erklaer { margin-top: calc(-1 * var(--d-a3)); margin-bottom: var(--d-a5); } /* Wischreihen: mehr als drei Karten nebeneinander, die nächste schaut rechts heraus (4.); Reihenfolge aus dem Markup, ohne CSS order */ html[data-design="d"][data-variante="b4"] [data-pt-reihe] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--d-a4); margin-left: calc(-1 * var(--d-seite)); margin-right: calc(-1 * var(--d-seite)); padding: 0 var(--d-seite) var(--d-a2); scroll-padding: 0 var(--d-seite); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-top: 0; } html[data-design="d"][data-variante="b4"] [data-pt-reihe]::-webkit-scrollbar { display: none; } html[data-design="d"][data-variante="b4"] [data-pt-reihe] > * { scroll-snap-align: start; grid-column: auto; } /* Karten der Reihe als Kacheln: gleiche Höhe ist dann gewollt sichtbar, statt Leerraum unter der kürzeren Karte (5.2: Kiesel auf Weiß, auf Kiesel der Grund) */ html[data-design="d"][data-variante="b4"] [data-pt-reihe] > * { box-sizing: border-box; margin: 0; padding: 0 0 var(--d-a4); overflow: hidden; background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .pt-kap--kiesel [data-pt-reihe] > * { background: var(--d-grund); } html[data-design="d"][data-variante="b4"] [data-pt-reihe] > * > :not(.fig):not(.pt-moment-bild):not(.pt-ereignis-bild) { padding-left: var(--d-a4); padding-right: var(--d-a4); } html[data-design="d"][data-variante="b4"] [data-pt-reihe] > * > .fig, html[data-design="d"][data-variante="b4"] [data-pt-reihe] :is(.pt-moment-bild, .pt-ereignis-bild) .fig { border-radius: 0; margin-bottom: var(--d-a3); } html[data-design="d"][data-variante="b4"] [data-pt-reihe] .pt-moment-bild, html[data-design="d"][data-variante="b4"] [data-pt-reihe] .pt-ereignis-bild { margin: 0; } html[data-design="d"][data-variante="b4"] [data-pt-reihe] > .pt-fest { padding-top: var(--d-a4); border-top: 0; } html[data-design="d"][data-variante="b4"] .pt-momente { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-moment--erst { display: flex; flex-direction: column; margin-bottom: var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-bild { margin: 0 calc(-1 * var(--d-seite)) var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-bild .fig { aspect-ratio: 4 / 3; border-radius: 0; } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-text { padding-top: 0; } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-name { font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen); } html[data-design="d"][data-variante="b4"] .pt-moment--erst .pt-moment-teaser { font-size: 17px; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--d-a4); align-items: start; padding: var(--d-a4) 0; border-top: 1px solid var(--d-line); } /* Vorschaufoto mit dem Nachweis darunter statt darauf (auf 96 px wäre er nicht lesbar) */ html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig::after { display: none; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig :where(img):is(img, .slot), html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig .slot { display: block; width: 96px; height: 96px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--d-r-foto); } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig .credit { position: static; display: block; max-width: none; margin-top: 4px; padding: 0; background: none; border-radius: 0; color: var(--b4-grau); text-shadow: none; text-align: left; font-size: 10px; line-height: 1.25; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-bild .fig .credit a { border-bottom-color: var(--d-line-stark); } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-text { padding-top: 0; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-name { font-size: 18.5px; line-height: 1.25; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-claim { margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst):not(.is-offen) .pt-moment-mehr { display: none; } html[data-design="d"][data-variante="b4"] .pt-moment.is-offen .pt-moment-mehr { margin-top: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-moment-auf { display: inline; min-height: 40px; } html[data-design="d"][data-variante="b4"] .pt-moment:not(.pt-moment--erst) .pt-moment-fuss { gap: var(--d-a2) var(--d-a4); } /* Zeitleiste als Wischreihe: Bild, Jahr, Text untereinander */ html[data-design="d"][data-variante="b4"] .pt-ereignis { display: flex; flex-direction: column; padding: 0 0 var(--d-a4); border: 0; } html[data-design="d"][data-variante="b4"] .pt-ereignis-bild { order: 0; margin: 0 0 var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-jahr { font-size: var(--d-fs-zwischen); line-height: 1.2; margin-bottom: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-jahr span { display: inline; margin: 0 0 0 8px; } html[data-design="d"][data-variante="b4"] .pt-gericht .fig { aspect-ratio: 4 / 3; } html[data-design="d"][data-variante="b4"] .pt-bauten, html[data-design="d"][data-variante="b4"] .pt-medien, html[data-design="d"][data-variante="b4"] .pt-nachhaltig, html[data-design="d"][data-variante="b4"] .pt-notizen { grid-template-columns: minmax(0, 1fr); gap: var(--d-a6); } html[data-design="d"][data-variante="b4"] .pt-geo-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--d-a7); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte, html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte { max-width: none; } html[data-design="d"][data-variante="b4"] .pt-momente-karte, html[data-design="d"][data-variante="b4"] .pt-welterbe { margin-top: var(--d-a7); } html[data-design="d"][data-variante="b4"] .pt-zone { padding: var(--d-a3) 0 var(--d-a1) var(--d-a3); } /* Gut zu wissen: aufklappbar, der Kern steht im Titel */ html[data-design="d"][data-variante="b4"] .pt-praxis-liste { columns: 1; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-praxis { margin: 0; border-bottom: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-praxis > summary { position: relative; margin: 0; padding: 14px 36px 14px 0; cursor: pointer; } html[data-design="d"][data-variante="b4"] .pt-praxis > summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--b4-tinte); border-bottom: 2px solid var(--b4-tinte); transform: rotate(45deg); } html[data-design="d"][data-variante="b4"] .pt-praxis[open] > summary::after { top: 26px; transform: rotate(225deg); } html[data-design="d"][data-variante="b4"] .pt-praxis-titel { font-size: 18px; } html[data-design="d"][data-variante="b4"] .pt-praxis-text { padding-bottom: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-saetze th, html[data-design="d"][data-variante="b4"] .pt-saetze td { font-size: 15.5px; padding-right: 8px; } html[data-design="d"][data-variante="b4"] .pt-abschluss { padding: 64px 0; } html[data-design="d"][data-variante="b4"] .pt-kosten, html[data-design="d"][data-variante="b4"] .pt-weitere { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .pt-reihe-steuer { display: flex; align-items: center; justify-content: flex-end; gap: var(--d-a3); margin-top: var(--d-a3); } html[data-design="d"][data-variante="b4"] .pt-reihe-zahl { min-width: 4.6em; text-align: center; font-size: var(--d-fs-klein); font-weight: 500; color: var(--b4-grau); font-variant-numeric: tabular-nums; } /* Übersicht und Beispielrouten: Zeilen mit Foto links (wie das Band am Handy, 5.10) */ html[data-design="d"][data-variante="b4"] .pt-liste-kopf { padding-top: 40px; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar { align-items: stretch; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .searchwrap { flex: 1 1 100%; max-width: none; align-items: stretch; } html[data-design="d"][data-variante="b4"] .pt-listen-inhalt .mag-toolbar .search { width: 100%; } html[data-design="d"][data-variante="b4"] .pt-kacheln { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] .pt-kachel { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--d-a4); align-items: center; padding: var(--d-a3) 0; border-bottom: 1px solid var(--d-line); border-radius: 0; } html[data-design="d"][data-variante="b4"] .pt-kachel-bild, html[data-design="d"][data-variante="b4"] .pt-kachel--karte .pt-kachel-bild, html[data-design="d"][data-variante="b4"] .pt-liste-routen .pt-kachel-bild { width: 96px; height: 96px; aspect-ratio: 1 / 1; } html[data-design="d"][data-variante="b4"] .pt-kachel-text { padding-top: 0; } html[data-design="d"][data-variante="b4"] .pt-kachel-name { font-size: 18.5px; } /* bis zwei Zeilen statt gekürzt („Kerala & der S…“ im 96-px-Bild) (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-stempel { left: 4px; top: auto; bottom: 4px; max-width: calc(100% - 8px); padding: 2px 6px; font-size: 12px; line-height: 1.25; white-space: normal; overflow: hidden; } /* Kapitelleiste am Handy: Kapitelname, „Inhalt“, „Route planen“ */ html[data-design="d"][data-variante="b4"] .pt-leiste { top: var(--header-h, 60px); } html[data-design="d"][data-variante="b4"] .pt-leiste-innen { min-height: 52px; gap: var(--d-a2); padding: 4px var(--d-seite); } html[data-design="d"][data-variante="b4"] .pt-leiste .btn.pt-leiste-plan { padding: 0 12px; } } @media (max-width: 359px) { html[data-design="d"][data-variante="b4"] .pt-leiste .pt-leiste-plan { display: none; } html[data-design="d"][data-variante="b4"] .pt-kopf .pt-aktionen .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { html[data-design="d"][data-variante="b4"] .pt-link { transition: none; } } /* ===================================================== NACHTRAG 10.10.2026: Kopf als Vollbild, Fotos mit Nummer am Rand auf der Karte der Momente, Landschaften mit Pillen (js/design-b4-portrait.js: kopf, nummerAmRand, landschaftenWahl) ===================================================== */ /* ---------- Kopf als Vollbild ---------- Titelbild über die ganze Breite, unten Land, Hauptreisezeit, Eckdaten und Reise-Almanac in Weiß auf einem Verlauf. Kein Gold im Kopf: „Route planen“ trägt die Kapitelleiste, sobald man liest, und der Abschluss. Der Kopf endet so weit über dem unteren Rand, dass die Überschrift des Überblicks hereinschaut (Abstand des Kapitels plus Überschrift): das zeigt, dass es weitergeht. */ html[data-design="d"][data-variante="b4"] .pt-kopf.pt-kopf--voll { position: relative; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; max-width: none; margin: 0; padding: 0; min-height: max(540px, calc(100svh - 64px - 136px)); max-height: 880px; background: #173A2E; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-bild { position: absolute; inset: 0; z-index: -1; margin: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-bild .fig { position: absolute; inset: 0; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-bild .fig img { width: 100%; height: 100%; object-fit: cover; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, 0) 76%); } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-bild .credit { position: absolute; right: 12px; bottom: 10px; z-index: 1; margin: 0; padding: 0; background: none; font-size: 12px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-text { box-sizing: border-box; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--d-seite) 64px; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-titel { margin: 0; color: #FFFFFF; font-size: clamp(64px, 9vw, 128px); line-height: .95; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-satz { margin: var(--d-a4) 0 0; max-width: 34ch; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten { display: flex; flex-wrap: wrap; gap: var(--d-a3) var(--d-a7); margin: var(--d-a6) 0 0; } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten dt { font-size: 14px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .85); } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: #FFFFFF; font-variant-numeric: lining-nums tabular-nums; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-aktionen { margin: var(--d-a7) 0 0; gap: var(--d-a3); align-items: center; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-aktionen > * { margin: 0; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-pdf:focus-visible { outline: 2.5px solid #FFFFFF; outline-offset: 3px; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-pdf svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[data-design="d"][data-variante="b4"] .pt-seite .btn.pt-kopf-pdf { display: inline-flex; align-items: center; gap: 8px; min-height: var(--b4-k-l); padding: 0 22px; border-radius: 999px; background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .85); font-size: 17px; font-weight: 700; } html[data-design="d"][data-variante="b4"] .pt-seite .btn.pt-kopf-pdf:hover { background: rgba(255, 255, 255, .14); } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .pt-kopf.pt-kopf--voll { min-height: max(480px, calc(100svh - 60px - 96px)); } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-text { padding-bottom: 32px; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-titel { font-size: clamp(48px, 15vw, 64px); } /* Am Handy kompakt, damit das Foto sichtbar bleibt: drei Eckdaten in einer Reihe (die Hauptstadt steht im Steckbrief darunter) */ html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-kopf-satz { margin-top: var(--d-a3); font-size: 17px; line-height: 1.4; } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: var(--d-a2) var(--d-a5); margin-top: var(--d-a4); } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten .pt-nur-breit { display: none; } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten dt { font-size: 13px; } html[data-design="d"][data-variante="b4"] .pt-kopf-fakten dd { font-size: 16px; white-space: nowrap; } html[data-design="d"][data-variante="b4"] .pt-kopf--voll .pt-aktionen { margin-top: var(--d-a5); flex-wrap: nowrap; gap: var(--d-a2); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-kopf--voll .btn.pt-kopf-pdf { padding: 0 18px; font-size: 16px; } } /* ---------- Karte der Momente am Handy: Fotos rund 32 px, Nummer am Rand ---------- Die Fotos stehen in echten Pixeln gleich groß, auch nach dem Zoomen (Maßstab aus --k); die Nummer (Kreis 17 px, Ziffer 11,6 px) setzt js/design-b4-portrait.js (nummerAmRand) außen auf den Rand. */ /* Ohne Übergang beim Aufbau: das Magazin lässt die Fotos in 0,18 s wachsen, das Auseinanderrücken (pinsEntzerren) maß sie sonst noch klein und die Fotos lagen übereinander */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-photo-wrap { transition: none; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-highlight--photo:hover .mk-hl-photo-wrap { transition: transform .18s ease; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-photo-wrap { transform-box: fill-box; transform-origin: center; transform: scale(clamp(.5, calc(var(--k, 1) * 16 / var(--pt-foto-r, 17)), 5)); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-hl-karte .mk-hl-ring { stroke: #FFFFFF; stroke-width: 2.4; } } /* ---------- Landschaften: Auswahl sichtbar machen ---------- Die gewählte Landschaft leuchtet auf der Karte deutlich (Fläche und Rand in Waldgrün), vorher ein blasser Verlauf in der Farbe des Live-Designs. Pillen nur am Handy und Tablet. */ html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .cms-region-glow { fill: rgba(43, 110, 85, .18); } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen-karte .cms-region-ring { stroke: var(--b4-tinte); opacity: .9; stroke-dasharray: none; stroke-width: calc(2px * var(--k, 1)); } html[data-design="d"][data-variante="b4"] .pt-zonen-wahl { display: none; } @media (max-width: 1099px) { html[data-design="d"][data-variante="b4"] .pt-regionen { display: flex; flex-direction: column; } html[data-design="d"][data-variante="b4"] .pt-seite .pt-regionen .pt-regionen-karte { order: -1; width: 100%; max-width: 640px; } html[data-design="d"][data-variante="b4"] .pt-zonen-wahl { display: flex; flex-wrap: wrap; gap: var(--d-a2); margin: 0 0 var(--d-a5); } html[data-design="d"][data-variante="b4"] .pt-zonen-pille { /* Pille nach 5.1: Höhe 36 (Handy 40), Schnitt 500, gewählt Waldgrün gefüllt; vorher Knopfmaß M (50 px), Schnitt 600 und gewählt wie eine Kachel (Feinheiten 17.10.2026) */ display: inline-flex; align-items: center; min-height: var(--b4-pille); padding: 0 16px; border-radius: 999px; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; } html[data-design="d"][data-variante="b4"] .pt-zonen-pille:hover { border-color: var(--b4-k-rand-hover); } html[data-design="d"][data-variante="b4"] .pt-zonen-pille[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"] .pt-zonen-pille:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } /* gewählt: nur der Text der gewählten Landschaft, ihr Name steht in der Pille */ html[data-design="d"][data-variante="b4"] .pt-zone-gewaehlt .pt-zone:not(.zone--active) { display: none; } html[data-design="d"][data-variante="b4"] .mag-page .pt-zone-gewaehlt .pt-zone { padding: 0; margin: 0; border: 0; background: none; cursor: default; pointer-events: none; } html[data-design="d"][data-variante="b4"] .pt-zone-gewaehlt .pt-zone .zone__t { display: none; } html[data-design="d"][data-variante="b4"] .pt-zone-gewaehlt .pt-zonen-hinweis-wahl { display: none; } html[data-design="d"][data-variante="b4"] .pt-zone-gewaehlt .pt-zonen-hinweis { margin: var(--d-a4) 0 0; } } /* Monatsbereiche in den Momenten ohne Umbruch am Bindestrich (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .pt-nw { white-space: nowrap; }