/* Design B4 „Fichte & Goldgelb“, Quelldatei: von Hand pflegen (bis 18.10.2026 aus css/design-b3-basis.css erzeugt). Regeln: routaris-design-system-b4.md */ /* ===================================================== DESIGN-B4-BASIS.CSS — Design B4 „Fichte & Goldgelb“, alle Seiten (04.10.2026) Lädt auf allen Seiten nach den D2-Bereichsdateien (css/design-d-*.css). Aufbau wie B2 (aus css/design-b2-basis.css übernommen), Farben wie D4. Rollen der Farben: · Fichte: Schrift, Überschriften, Nummern und Pins, dunkle Flächen (Band, Fußzeile) · Waldgrün: alles Klickbare und Gewählte (Links, Nebenknöpfe, gewählte Pillen) · Goldgelb: Hauptaktion und Route (eine Farbe für „dein Weg und der nächste Schritt“) · Sand und Meerblau nur auf Karten Heller und dunkler Modus über dieselben Tokens (--b4-*, Abschnitt am Ende); die Karten bleiben in beiden Modi helle Fenster. ===================================================== */ html[data-design="d"][data-variante="b4"]:root { --b4-tinte: #2B6E55; /* Waldgrün: Titel, Karte, Daten, Links */ --b4-text: #173A2E; /* Fichte: Fließtext */ --b4-marker: #EBB431; /* Textmarker: Route, Hauptaktion, Fristen, aktueller Monat */ --b4-marker-tief: #DEA116; --b4-lavur: #EDF4F1; /* hinterlegte Flächen */ --b4-linie: #DBE5E1; /* Schriftgrade: Alegreya Sans läuft schmaler und kleiner als Geologica */ --d-fs-display: 70px; --d-lh-display: 0.96; --d-fw-display: 800; --d-track-display: -0.012em; --d-fs-titel: 50px; --d-lh-titel: 1.02; --d-fw-titel: 800; --d-track-titel: -0.008em; --d-fs-kapitel: 38px; --d-lh-kapitel: 1.06; --d-fw-kapitel: 800; --d-track-kapitel: -0.006em; --d-fs-zwischen: 23px; --d-lh-zwischen: 1.2; --d-fw-zwischen: 700; --d-track-zwischen: 0; --d-fs-lead: 21px; --d-lh-lead: 1.5; --d-fw-lead: 400; --d-fs-text: 18px; --d-lh-text: 1.58; --d-fs-klein: 15.5px; --d-lh-klein: 1.45; --d-fs-mikro: 13.5px; --d-lh-mikro: 1.35; --d-fw-mikro: 500; /* Nebentext dunkler als in der Palette: Alegreya wird in kleinen Graden dünn und blass */ --b4-grau: #4B6259; --d-fs-betrag: 56px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"]:root { --d-fs-display: 46px; --d-lh-display: 0.98; --d-fs-titel: 34px; --d-lh-titel: 1.06; --d-fs-kapitel: 30px; --d-fs-zwischen: 20.5px; --d-fs-lead: 18.5px; --d-fs-text: 17px; --d-fs-betrag: 46px; } } /* Alegreya Sans braucht etwas mehr Größe im Fließtext und keine Schärfung (Geologica-Achse) */ html[data-design="d"][data-variante="b4"] body { font-size: 17px; font-variation-settings: normal; } html[data-design="d"][data-variante="b4"] :where(h1):is(h1, .chap-title), html[data-design="d"][data-variante="b4"] :where(h2):is(h2, .chap-title), html[data-design="d"][data-variante="b4"] :where(h3):is(h3, .chap-title), html[data-design="d"][data-variante="b4"] .chap-title, html[data-design="d"][data-variante="b4"] .landing-h1 { font-variation-settings: normal; } /* Kleine Grade (Quellen, Kartennamen, Nebentext) einen Schnitt kräftiger */ html[data-design="d"][data-variante="b4"] :where(figcaption):is(figcaption, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d-print-cap):is(.d-print-cap, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d-mapnote):is(.d-mapnote, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d2-quellen):is(.d2-quellen, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d-caption-fotos):is(.d-caption-fotos, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d-mapattr):is(.d-mapattr, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.d-print-meta):is(.d-print-meta, .b4-tage-ort small), html[data-design="d"][data-variante="b4"] :where(.country-card-brand):is(.country-card-brand, .b4-tage-ort small) { font-weight: 500; } /* ===================================================== KNOPFSYSTEM B2 (03.10.2026): Tinte und Textmarker auf Papier Die Form sagt, was ein Knopf tut, die Farbe, wie wichtig er ist: Rechteck, 6 px führt etwas aus. Hauptaktion in Textmarker-Gelb (eine je Bereich), Zweitaktion auf Papier mit Rand und Wort in Waldgrün Pille hat einen Zustand: Reiter, Filter, Stufen, Kartenstil, Anpinnen. Gewählt ist sie Waldgrün gefüllt Kachel, 6 px wählt eine Option mit Inhalt; gewählt: Lavur mit Waldgrün Kreis Symbol ohne Wort: Zoom, Blättern, Schließen, Konto, Menü Textknopf Waldgrün unterstrichen; beim Zeigen wird die Unterstreichung zum Textmarker-Strich. Das ist die einzige Bewegung im System. Waldgrün heißt klickbar, Gelb heißt der nächste Schritt. Zwei Schnitte: 500 für Schalter, 700 für Aktionen und Gewähltes. Keine Schatten, kein Anheben, keine Verläufe, kein Weichzeichner. Jeder Knopf hat 1,5 px Rand (die Hauptaktion in ihrer eigenen Farbe), damit nebeneinander alles gleich hoch steht. Größen: L 54 (nur der Hero), M 48, S 40, Pille 36, Kreis 40; am Handy M 50, S 44, Pille 40, Kreis 44. Anzeige (display) und Lage (transform) setzt das System nie: Die Knöpfe sind bereits Flex-Elemente, und manche werden über display oder transform ein- und ausgeblendet. ===================================================== */ html[data-design="d"][data-variante="b4"]:root { --d-r-ui: 6px; --b4-k-l: 54px; --b4-k-m: 48px; --b4-k-s: 40px; --b4-pille: 36px; --b4-kreis: 40px; --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; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"]:root { --b4-k-m: 50px; --b4-k-s: 44px; --b4-pille: 40px; --b4-kreis: 44px; } } /* --- Rechteck: Hauptaktion und Zweitaktion teilen Form, Maß und Schrift --- */ html[data-design="d"][data-variante="b4"] .btn-primary, html[data-design="d"][data-variante="b4"] .btn-outline, html[data-design="d"][data-variante="b4"] .landing-hero-cta, html[data-design="d"][data-variante="b4"] .site-footer-cta, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--primary, html[data-design="d"][data-variante="b4"] .d2-zweitknopf, html[data-design="d"][data-variante="b4"] .route-adjust-btn, html[data-design="d"][data-variante="b4"] .map-export-btn, html[data-design="d"][data-variante="b4"] .saved-routes-header-btn, html[data-design="d"][data-variante="b4"] .pin-confirm-cancel, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-accept-btn, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn:not(.vmk-routehint-btn--primary):not(.vmk-routehint-btn--quiet) { align-items: center; justify-content: center; gap: 8px; min-height: var(--b4-k-m); padding: 0 22px; box-sizing: border-box; border: 1.5px solid; border-radius: var(--d-r-ui); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: 0.005em; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Hauptaktion: Textmarker-Gelb, Schrift Fichte */ html[data-design="d"][data-variante="b4"] .btn-primary, html[data-design="d"][data-variante="b4"] .landing-hero-cta, html[data-design="d"][data-variante="b4"] .site-footer-cta, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--primary { background: var(--b4-marker); border-color: var(--b4-marker); color: var(--b4-auf-gelb) !important; } html[data-design="d"][data-variante="b4"] .btn-primary:hover, html[data-design="d"][data-variante="b4"] .landing-hero-cta:hover, html[data-design="d"][data-variante="b4"] .site-footer-cta:hover, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--primary:hover { background: var(--b4-marker-tief); border-color: var(--b4-marker-tief); color: var(--b4-auf-gelb); } html[data-design="d"][data-variante="b4"] .btn-primary:disabled, html[data-design="d"][data-variante="b4"] .btn-primary[disabled], html[data-design="d"][data-variante="b4"] .btn-primary.is-disabled { background: var(--b4-lavur); border-color: var(--b4-lavur); color: var(--b4-grau) !important; cursor: default; } html[data-design="d"][data-variante="b4"] .landing-hero-cta { min-height: var(--b4-k-l); height: auto; padding: 0 30px; font-size: 18px; } /* Zweitaktion: Papier, Rand und Wort in Waldgrün; beim Zeigen Lavur */ html[data-design="d"][data-variante="b4"] .btn-outline, html[data-design="d"][data-variante="b4"] .d2-zweitknopf, html[data-design="d"][data-variante="b4"] .route-adjust-btn, html[data-design="d"][data-variante="b4"] .map-export-btn, html[data-design="d"][data-variante="b4"] .saved-routes-header-btn, html[data-design="d"][data-variante="b4"] .pin-confirm-cancel, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-accept-btn, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn:not(.vmk-routehint-btn--primary):not(.vmk-routehint-btn--quiet) { background: var(--b4-papier); border-color: var(--b4-tinte); color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] :where(.btn-outline):is(.btn-outline, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] :where(.d2-zweitknopf):is(.d2-zweitknopf, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] :where(.route-adjust-btn):is(.route-adjust-btn, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] .route-adjust-btn.is-ready:hover, html[data-design="d"][data-variante="b4"] :where(.map-export-btn):is(.map-export-btn, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] :where(.saved-routes-header-btn):is(.saved-routes-header-btn, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] :where(.pin-confirm-cancel):is(.pin-confirm-cancel, .route-adjust-btn.is-ready):hover, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-accept-btn:hover, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn:not(.vmk-routehint-btn--primary):not(.vmk-routehint-btn--quiet):hover { background: var(--b4-k-an); border-color: var(--b4-tinte); color: var(--b4-tinte); box-shadow: none; } html[data-design="d"][data-variante="b4"] .btn-outline:disabled, html[data-design="d"][data-variante="b4"] .d2-zweitknopf:disabled, html[data-design="d"][data-variante="b4"] .route-adjust-btn:disabled, html[data-design="d"][data-variante="b4"] .map-export-btn:disabled, html[data-design="d"][data-variante="b4"] .saved-routes-header-btn:disabled { background: var(--b4-papier); border-color: var(--b4-k-rand); color: var(--b4-grau); cursor: default; } /* Klein: in Karten, an der Karte, im Kopf */ html[data-design="d"][data-variante="b4"] .btn-sm, html[data-design="d"][data-variante="b4"] .route-adjust-btn, html[data-design="d"][data-variante="b4"] .map-export-btn, html[data-design="d"][data-variante="b4"] .saved-routes-header-btn, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-accept-btn, html[data-design="d"][data-variante="b4"] .result-map-wrap .map-export-btn { min-height: var(--b4-k-s); height: auto; padding: 0 16px; font-size: 15px; } html[data-design="d"][data-variante="b4"] .btn:focus-visible, html[data-design="d"][data-variante="b4"] .landing-hero-cta:focus-visible, html[data-design="d"][data-variante="b4"] .site-footer-cta:focus-visible, html[data-design="d"][data-variante="b4"] .d2-zweitknopf:focus-visible, html[data-design="d"][data-variante="b4"] .route-adjust-btn:focus-visible, html[data-design="d"][data-variante="b4"] .map-export-btn:focus-visible, html[data-design="d"][data-variante="b4"] .saved-routes-header-btn:focus-visible, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn:focus-visible, html[data-design="d"][data-variante="b4"] .pin-confirm-cancel:focus-visible, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-accept-btn:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; box-shadow: none; } /* Ergebnis am Handy: PDF, Teilen und Speichern teilen sich eine Zeile; die Nebenknöpfe rücken enger, damit die Hauptaktion die breiteste bleibt */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .d2-aktionen > button { padding: 0 12px; gap: 6px; font-size: 15px; } } /* Der leise Ausweg im Routenhinweis ist ein Textknopf */ html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--quiet { min-height: var(--b4-k-s); padding: 0 6px; background: transparent; border: 0; box-shadow: none; } /* --- Pille: hat einen Zustand --- :is() nimmt die Spezifität seines stärksten Glieds an; Glieder mit Elementnamen stehen deshalb einzeln, damit „Anpinnen“ unten die Grundpille überschreiben kann. */ html[data-design="d"][data-variante="b4"] .when-tab, html[data-design="d"][data-variante="b4"] .vmk-tab, html[data-design="d"][data-variante="b4"] .mustsee-order-toggle, html[data-design="d"][data-variante="b4"] .result-names-toggle, html[data-design="d"][data-variante="b4"] .d2-sprung-knopf, html[data-design="d"][data-variante="b4"] .d2s-anpinnen, html[data-design="d"][data-variante="b4"] .rfb-choice, html[data-design="d"][data-variante="b4"] .filter-tabs button { min-height: var(--b4-pille); padding: 0 14px; box-sizing: border-box; align-items: center; gap: 6px; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 999px; color: var(--b4-text); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: calc(var(--b4-pille) - 3px); letter-spacing: 0; text-transform: none; box-shadow: none; } html[data-design="d"][data-variante="b4"] .when-tab:hover, html[data-design="d"][data-variante="b4"] .vmk-tab:hover, html[data-design="d"][data-variante="b4"] .mustsee-order-toggle:hover, html[data-design="d"][data-variante="b4"] .result-names-toggle:hover, html[data-design="d"][data-variante="b4"] .d2-sprung-knopf:hover, html[data-design="d"][data-variante="b4"] .rfb-choice:hover, html[data-design="d"][data-variante="b4"] .filter-tabs 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"] .when-tab:focus-visible, html[data-design="d"][data-variante="b4"] .vmk-tab:focus-visible, html[data-design="d"][data-variante="b4"] .mustsee-order-toggle:focus-visible, html[data-design="d"][data-variante="b4"] .result-names-toggle:focus-visible, html[data-design="d"][data-variante="b4"] .d2-sprung-knopf:focus-visible, html[data-design="d"][data-variante="b4"] .d2s-anpinnen:focus-visible, html[data-design="d"][data-variante="b4"] .rfb-choice:focus-visible, html[data-design="d"][data-variante="b4"] .filter-tabs button:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .when-tab.active, html[data-design="d"][data-variante="b4"] .when-tab[aria-selected="true"], html[data-design="d"][data-variante="b4"] .vmk-tab.active, html[data-design="d"][data-variante="b4"] .vmk-tab[aria-selected="true"], html[data-design="d"][data-variante="b4"] .mustsee-order-toggle[aria-pressed="true"], html[data-design="d"][data-variante="b4"] .result-names-toggle.is-on, html[data-design="d"][data-variante="b4"] .rfb-choice[aria-pressed="true"], html[data-design="d"][data-variante="b4"] .when-tab.active:hover, html[data-design="d"][data-variante="b4"] .vmk-tab.active:hover, html[data-design="d"][data-variante="b4"] .mustsee-order-toggle[aria-pressed="true"]:hover, html[data-design="d"][data-variante="b4"] .rfb-choice[aria-pressed="true"]:hover, html[data-design="d"][data-variante="b4"] .filter-tabs button:is(.active, .on, [aria-pressed="true"]), html[data-design="d"][data-variante="b4"] .filter-tabs button:is(.active, .on, [aria-pressed="true"]):hover, html[data-design="d"][data-variante="b4"] .d2-sprung[open] > .d2-sprung-knopf { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; } /* Anpinnen ist der Kern von Schritt 3: dieselbe Pille, aber schon ungewählt in Waldgrün (klickbar); angeheftet gefüllt wie die Kapseln auf der Karte */ html[data-design="d"][data-variante="b4"] .d2s-anpinnen { border-color: var(--b4-tinte); color: var(--b4-tinte); font-weight: 700; } html[data-design="d"][data-variante="b4"] .d2s-anpinnen:hover { background: var(--b4-k-an); border-color: var(--b4-tinte); color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] :where(.d2s-anpinnen.is-an):is(.d2s-anpinnen.is-an, .d2s-anpinnen.is-an:hover), html[data-design="d"][data-variante="b4"] .d2s-anpinnen.is-an:hover { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); } html[data-design="d"][data-variante="b4"] .d2s-anpinnen svg { color: currentColor; } /* D rückt die erste Länderpille nach links (Reiterleiste), hier steht sie wie die übrigen */ html[data-design="d"][data-variante="b4"] .filter-tabs button:first-child { padding: 0 14px; } /* Zahlen und Zustandswörter in Pillen */ html[data-design="d"][data-variante="b4"] .mustsee-order-toggle .mot-label, html[data-design="d"][data-variante="b4"] .mustsee-order-toggle .mot-state { line-height: 1.2; } html[data-design="d"][data-variante="b4"] .mustsee-order-toggle .mot-state { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); } html[data-design="d"][data-variante="b4"] .mustsee-order-toggle[aria-pressed="true"] .mot-state { color: var(--b4-auf-tinte-2); } html[data-design="d"][data-variante="b4"] :is(.filter-tabs button, .vmk-tab) .count, html[data-design="d"][data-variante="b4"] :is(.filter-tabs button, .vmk-tab) .dest-tab-count { font-size: 12.5px; font-weight: 500; color: var(--d-tinte-hell); } html[data-design="d"][data-variante="b4"] :is(.filter-tabs button.on, .vmk-tab.active, .vmk-tab[aria-selected="true"]) .count, html[data-design="d"][data-variante="b4"] :is(.filter-tabs button.on, .vmk-tab.active, .vmk-tab[aria-selected="true"]) .dest-tab-count { color: var(--b4-auf-tinte-2); } /* Stufen- und Stilschalter: eine Pille mit Segmenten (Schritt 2, Hero, Ergebniskarte) */ html[data-design="d"][data-variante="b4"] .pref-seg, html[data-design="d"][data-variante="b4"] .result-basemap-toggle { gap: 2px; padding: 2px; background: var(--b4-papier); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--b4-k-rand); } html[data-design="d"][data-variante="b4"] :is(.pref-seg, .d4-stil, .result-basemap-toggle) button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--d-tinte-hell); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; } html[data-design="d"][data-variante="b4"] :is(.pref-seg, .d4-stil, .result-basemap-toggle) button:hover { background: var(--b4-k-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] :where(.pref-seg button.on):is(.pref-seg button.on, .pref-int.is-high .pref-seg button.on), html[data-design="d"][data-variante="b4"] :is(.pref-int.is-high .pref-seg button.on), html[data-design="d"][data-variante="b4"] :where(.result-basemap-toggle button[aria-pressed="true"]):is(.result-basemap-toggle button[aria-pressed="true"], .pref-int.is-high .pref-seg button.on), html[data-design="d"][data-variante="b4"] :is(.pref-seg button.on):hover, html[data-design="d"][data-variante="b4"] :is(.result-basemap-toggle button[aria-pressed="true"]):hover { background: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; } html[data-design="d"][data-variante="b4"] :is(.pref-seg, .d4-stil, .result-basemap-toggle) button:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] :is(.pref-seg, .d4-stil, .result-basemap-toggle) button { min-height: 40px; } } /* --- Kachel: Auswahl mit Inhalt (Flughafen, Abreise, Reisemittel, Tempo, Art der Planung) --- */ html[data-design="d"][data-variante="b4"] .radio-card, html[data-design="d"][data-variante="b4"] .mode-card, html[data-design="d"][data-variante="b4"] .pace-card, html[data-design="d"][data-variante="b4"] .pace-card-mini { border-radius: var(--d-r-ui); color: var(--b4-text); box-shadow: none; } html[data-design="d"][data-variante="b4"] .radio-card:hover, html[data-design="d"][data-variante="b4"] .mode-card:hover, html[data-design="d"][data-variante="b4"] .pace-card:hover, html[data-design="d"][data-variante="b4"] .pace-card-mini:hover { box-shadow: none; border-color: var(--b4-k-rand-hover); } html[data-design="d"][data-variante="b4"] .radio-card.active, html[data-design="d"][data-variante="b4"] .mode-card.active, html[data-design="d"][data-variante="b4"] .pace-card.active, html[data-design="d"][data-variante="b4"] .pace-card-mini.active { background: var(--b4-k-an); border-color: var(--b4-tinte); box-shadow: none; } /* --- Kreis: Symbol ohne Wort --- */ html[data-design="d"][data-variante="b4"] .account-btn, html[data-design="d"][data-variante="b4"] .hero-v2-strip-nav, html[data-design="d"][data-variante="b4"] .map-fullscreen-btn, html[data-design="d"][data-variante="b4"] .saved-routes-close-btn, html[data-design="d"][data-variante="b4"] .about-modal-close, html[data-design="d"][data-variante="b4"] .hero-v2-mapctrl-btn, html[data-design="d"][data-variante="b4"] .msheet-more, html[data-design="d"][data-variante="b4"] .lp-leine-nav button, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-dismiss, html[data-design="d"][data-variante="b4"] body.msheet-fs .msheet-back { width: var(--b4-kreis); height: var(--b4-kreis); min-width: 0; min-height: 0; padding: 0; box-sizing: border-box; align-items: center; justify-content: center; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; color: var(--b4-text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-design="d"][data-variante="b4"] .account-btn:hover, html[data-design="d"][data-variante="b4"] .hero-v2-strip-nav:hover, html[data-design="d"][data-variante="b4"] .map-fullscreen-btn:hover, html[data-design="d"][data-variante="b4"] .saved-routes-close-btn:hover, html[data-design="d"][data-variante="b4"] .about-modal-close:hover, html[data-design="d"][data-variante="b4"] .hero-v2-mapctrl-btn:hover, html[data-design="d"][data-variante="b4"] .msheet-more:hover, html[data-design="d"][data-variante="b4"] .lp-leine-nav button:hover, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-dismiss:hover, html[data-design="d"][data-variante="b4"] body.msheet-fs .msheet-back:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); box-shadow: none; } html[data-design="d"][data-variante="b4"] .account-btn:focus-visible, html[data-design="d"][data-variante="b4"] .hero-v2-strip-nav:focus-visible, html[data-design="d"][data-variante="b4"] .map-fullscreen-btn:focus-visible, html[data-design="d"][data-variante="b4"] .saved-routes-close-btn:focus-visible, html[data-design="d"][data-variante="b4"] .about-modal-close:focus-visible, html[data-design="d"][data-variante="b4"] .hero-v2-mapctrl-btn:focus-visible, html[data-design="d"][data-variante="b4"] .msheet-more:focus-visible, html[data-design="d"][data-variante="b4"] .lp-leine-nav button:focus-visible, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-dismiss:focus-visible, html[data-design="d"][data-variante="b4"] body.msheet-fs .msheet-back:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .hero-v2-strip-nav:disabled, html[data-design="d"][data-variante="b4"] .lp-leine-nav button:disabled { opacity: .35; cursor: default; background: transparent; } /* Titel über der Karte in Schritt 3 am Handy: Rand statt Schatten wie die Knöpfe daneben */ html[data-design="d"][data-variante="b4"] body.msheet-fs .d2s-titelpille { box-shadow: none; border: 1.5px solid var(--b4-k-rand); } /* Zoom aller Leaflet-Karten (D setzt Maße mit !important) */ html[data-design="d"][data-variante="b4"] .leaflet-bar a { width: var(--b4-kreis) !important; height: var(--b4-kreis) !important; line-height: calc(var(--b4-kreis) - 3px) !important; border: 1.5px solid var(--b4-k-rand) !important; box-sizing: border-box; background: var(--b4-papier); color: var(--b4-text); box-shadow: none; font: 500 22px/1 'Alegreya Sans', system-ui, sans-serif; } html[data-design="d"][data-variante="b4"] .leaflet-bar a:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover) !important; } html[data-design="d"][data-variante="b4"] .leaflet-bar a.leaflet-disabled { background: var(--b4-papier); color: rgba(23, 58, 46, .38); } html[data-design="d"][data-variante="b4"] .leaflet-bar a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } /* Zoom der Ergebniskarte: steps.css setzt dort Schrift und Fläche mit !important */ html[data-design="d"][data-variante="b4"] .result-map-wrap .leaflet-control-zoom a { background: var(--b4-papier) !important; color: var(--b4-text) !important; font-family: 'Alegreya Sans', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 22px !important; transition: background-color .15s ease !important; } html[data-design="d"][data-variante="b4"] .result-map-wrap .leaflet-control-zoom a:hover { background: var(--b4-k-hover) !important; color: var(--b4-text) !important; } html[data-design="d"][data-variante="b4"] .result-map-wrap .leaflet-control-zoom a.leaflet-disabled { background: var(--b4-papier) !important; color: rgba(23, 58, 46, .38) !important; } /* Ergebniskarte am Handy: Teilen und Vollbild sind Kreise unter der Karte (D blendet die Beschriftung über font-size: 0 aus), der Kartenstil ein Segment ohne Rahmenlinie */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .map-export-btn, html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .map-fullscreen-btn { width: var(--b4-kreis); height: var(--b4-kreis); min-width: 0; min-height: 0; padding: 0; gap: 0; font-size: 0; border-radius: 50%; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); box-shadow: none; } html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .map-export-btn:hover, html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .map-fullscreen-btn:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .result-basemap-toggle { border: 0; box-shadow: inset 0 0 0 1.5px var(--b4-k-rand); } html[data-design="d"][data-variante="b4"] .optionb-map-col .result-map-wrap .result-basemap-toggle button { min-height: 40px; } html[data-design="d"][data-variante="b4"] .d2-perlen-karte { width: var(--b4-kreis); height: var(--b4-kreis); background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .d2-perlen-karte:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); } } /* Schließen auf Vorschlagsfotos: kleiner Kreis auf Papier statt dunklem Glas */ html[data-design="d"][data-variante="b4"] #step-5 .suggestion-dismiss { width: 32px; height: 32px; } html[data-design="d"][data-variante="b4"] #step-5 .suggestion-dismiss svg { stroke: currentColor; } /* Auf dem waldgrünen Band */ html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .hero-v2-strip-nav { background: transparent; border-color: rgba(255, 255, 255, .5); color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .hero-v2-strip-nav:hover { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .landing-hero.d2-band .hero-v2-strip-nav:focus-visible { outline-color: var(--b4-marker); } /* Menü (Handy) als Kreis wie die übrigen Kopfknöpfe; Strichlage wie im Original, damit das Kreuz beim Öffnen stimmt */ @media (max-width: 980px) { html[data-design="d"][data-variante="b4"] .nav-burger { width: var(--b4-kreis); height: var(--b4-kreis); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; background: var(--b4-papier); } html[data-design="d"][data-variante="b4"] .nav-burger span { width: 18px; background: var(--b4-text); } html[data-design="d"][data-variante="b4"] .nav-burger:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); } } /* „Meine Routen“ wird unter 1200 px zum Kreis (nur Symbol, wie bisher) */ @media (max-width: 1199px) { html[data-design="d"][data-variante="b4"] .saved-routes-header-btn { width: var(--b4-kreis); height: var(--b4-kreis); min-height: 0; padding: 0; border-radius: 50%; border-color: var(--b4-k-rand); color: var(--b4-text); background: var(--b4-papier); } html[data-design="d"][data-variante="b4"] .saved-routes-header-btn:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } } /* --- Textknopf: Waldgrün unterstrichen; beim Zeigen wird der Strich zum Textmarker. Die Unterstreichung liegt unter der Schrift, deshalb trägt der dicke gelbe Strich den Text wie ein echter Marker, auch über Zeilenumbrüche und bei Knöpfen mit Symbol. --- */ html[data-design="d"][data-variante="b4"] .d2-textknopf, html[data-design="d"][data-variante="b4"] .b4-link, html[data-design="d"][data-variante="b4"] .b4-ansehen, html[data-design="d"][data-variante="b4"] .d-caption-link, html[data-design="d"][data-variante="b4"] .when-skip-link, html[data-design="d"][data-variante="b4"] .vmk-pref-edit, html[data-design="d"][data-variante="b4"] .deliver-mehr, html[data-design="d"][data-variante="b4"] .d2-link, html[data-design="d"][data-variante="b4"] .landing-kompass-link, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--quiet, html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta, html[data-design="d"][data-variante="b4"] :is(.b4-saison, .lp-kompass-alt) a { color: var(--b4-tinte); font-weight: 700; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, text-underline-offset .2s ease; } html[data-design="d"][data-variante="b4"] .d2-textknopf:hover, html[data-design="d"][data-variante="b4"] .b4-link:hover, html[data-design="d"][data-variante="b4"] .b4-ansehen:hover, html[data-design="d"][data-variante="b4"] .d-caption-link:hover, html[data-design="d"][data-variante="b4"] .when-skip-link:hover, html[data-design="d"][data-variante="b4"] .vmk-pref-edit:hover, html[data-design="d"][data-variante="b4"] .deliver-mehr:hover, html[data-design="d"][data-variante="b4"] .d2-link:hover, html[data-design="d"][data-variante="b4"] .landing-kompass-link:hover, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--quiet:hover, html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta:hover, html[data-design="d"][data-variante="b4"] :is(.b4-saison, .lp-kompass-alt) a:hover { color: var(--b4-tinte); background-color: transparent; text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] .d2-textknopf:focus-visible, html[data-design="d"][data-variante="b4"] .b4-link:focus-visible, html[data-design="d"][data-variante="b4"] .b4-ansehen:focus-visible, html[data-design="d"][data-variante="b4"] .d-caption-link:focus-visible, html[data-design="d"][data-variante="b4"] .when-skip-link:focus-visible, html[data-design="d"][data-variante="b4"] .vmk-pref-edit:focus-visible, html[data-design="d"][data-variante="b4"] .deliver-mehr:focus-visible, html[data-design="d"][data-variante="b4"] .d2-link:focus-visible, html[data-design="d"][data-variante="b4"] .landing-kompass-link:focus-visible, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--quiet:focus-visible, html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta:focus-visible, html[data-design="d"][data-variante="b4"] :is(.b4-saison, .lp-kompass-alt) a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { html[data-design="d"][data-variante="b4"] .d2-textknopf, html[data-design="d"][data-variante="b4"] .b4-link, html[data-design="d"][data-variante="b4"] .b4-ansehen, html[data-design="d"][data-variante="b4"] .d-caption-link, html[data-design="d"][data-variante="b4"] .when-skip-link, html[data-design="d"][data-variante="b4"] .vmk-pref-edit, html[data-design="d"][data-variante="b4"] .deliver-mehr, html[data-design="d"][data-variante="b4"] .d2-link, html[data-design="d"][data-variante="b4"] .landing-kompass-link, html[data-design="d"][data-variante="b4"] .vmk-routehint-btn--quiet, html[data-design="d"][data-variante="b4"] .lp-routes-teaser-cta, html[data-design="d"][data-variante="b4"] :is(.b4-saison, .lp-kompass-alt) a { transition: none; } } /* --- Dialoge und Menüs: dieselben Rollen wie auf den Seiten --- Schließen ist ein Kreis, je Dialog eine Hauptaktion in Gelb (Anmelden, Bild herunterladen, Teilen, Drucken, Anwenden), Nebenaktionen in Waldgrün, Format- und Motivwahl als Kachel bzw. Segment, Auswege und Hinweise als Textknopf. */ html[data-design="d"][data-variante="b4"] .share-rich-close, html[data-design="d"][data-variante="b4"] .sfm-close, html[data-design="d"][data-variante="b4"] .auth-modal-close, html[data-design="d"][data-variante="b4"] .bplan-close, html[data-design="d"][data-variante="b4"] .packlist-close { width: var(--b4-kreis); height: var(--b4-kreis); min-width: 0; min-height: 0; padding: 0; box-sizing: border-box; align-items: center; justify-content: center; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; color: var(--b4-text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-design="d"][data-variante="b4"] .share-rich-close:hover, html[data-design="d"][data-variante="b4"] .sfm-close:hover, html[data-design="d"][data-variante="b4"] .auth-modal-close:hover, html[data-design="d"][data-variante="b4"] .bplan-close:hover, html[data-design="d"][data-variante="b4"] .packlist-close:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .share-rich-close:focus-visible, html[data-design="d"][data-variante="b4"] .sfm-close:focus-visible, html[data-design="d"][data-variante="b4"] .auth-modal-close:focus-visible, html[data-design="d"][data-variante="b4"] .bplan-close:focus-visible, html[data-design="d"][data-variante="b4"] .packlist-close:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } /* Kleine Kreise in Bearbeitungszeilen: Nächte ±, Stopp entfernen */ html[data-design="d"][data-variante="b4"] .ns-btn, html[data-design="d"][data-variante="b4"] .optionb-stopcard-remove { width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; box-sizing: border-box; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; color: var(--b4-text); box-shadow: none; } html[data-design="d"][data-variante="b4"] .ns-btn:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .optionb-stopcard-remove:hover:not(:disabled) { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .ns-btn:disabled, html[data-design="d"][data-variante="b4"] .optionb-stopcard-remove:disabled, html[data-design="d"][data-variante="b4"] .optionb-stopcard-remove.is-locked { background: var(--b4-papier); border-color: rgba(23, 58, 46, .15); color: rgba(23, 58, 46, .38); } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .ns-btn, html[data-design="d"][data-variante="b4"] .optionb-stopcard-remove { width: 40px; height: 40px; } } /* Rechtecke in Dialogen */ html[data-design="d"][data-variante="b4"] .auth-btn-magic, html[data-design="d"][data-variante="b4"] .auth-btn-google, html[data-design="d"][data-variante="b4"] .auth-btn-ghost, html[data-design="d"][data-variante="b4"] .sfm-act-download, html[data-design="d"][data-variante="b4"] .sfm-act-share, html[data-design="d"][data-variante="b4"] .sfm-act-zip, html[data-design="d"][data-variante="b4"] .share-native-btn, html[data-design="d"][data-variante="b4"] .share-link-copy, html[data-design="d"][data-variante="b4"] .packlist-btn, html[data-design="d"][data-variante="b4"] .oet-btn, html[data-design="d"][data-variante="b4"] .saved-routes-save-btn, html[data-design="d"][data-variante="b4"] .auth-status-btn, html[data-design="d"][data-variante="b4"] .rsync-btn, html[data-design="d"][data-variante="b4"] .bplan-btn, html[data-design="d"][data-variante="b4"] .finale-cta, html[data-design="d"][data-variante="b4"] .ebtn, html[data-design="d"][data-variante="b4"] .rfb-send, html[data-design="d"][data-variante="b4"] .mob-account-signin, html[data-design="d"][data-variante="b4"] .cookie-banner-inner button { align-items: center; justify-content: center; gap: 8px; min-height: var(--b4-k-m); padding: 0 22px; box-sizing: border-box; border: 1.5px solid; border-radius: var(--d-r-ui); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: 0.005em; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } html[data-design="d"][data-variante="b4"] .sfm-act-zip, html[data-design="d"][data-variante="b4"] .share-link-copy, html[data-design="d"][data-variante="b4"] .packlist-btn, html[data-design="d"][data-variante="b4"] .oet-btn, html[data-design="d"][data-variante="b4"] .auth-status-btn, html[data-design="d"][data-variante="b4"] .rsync-btn, html[data-design="d"][data-variante="b4"] .bplan-btn, html[data-design="d"][data-variante="b4"] .ebtn, html[data-design="d"][data-variante="b4"] .rfb-send, html[data-design="d"][data-variante="b4"] .cookie-banner-inner button { min-height: var(--b4-k-s); padding: 0 16px; font-size: 15px; } /* Hauptaktion */ html[data-design="d"][data-variante="b4"] .auth-btn-magic, html[data-design="d"][data-variante="b4"] .sfm-act-download, html[data-design="d"][data-variante="b4"] .share-native-btn, html[data-design="d"][data-variante="b4"] .packlist-btn--primary, html[data-design="d"][data-variante="b4"] .oet-btn-primary { background: var(--b4-marker); border-color: var(--b4-marker); color: var(--b4-auf-gelb); } html[data-design="d"][data-variante="b4"] .auth-btn-magic:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .sfm-act-download:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .share-native-btn:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .packlist-btn--primary:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .oet-btn-primary:hover:not(:disabled) { background: var(--b4-marker-tief); border-color: var(--b4-marker-tief); color: var(--b4-auf-gelb); box-shadow: none; } html[data-design="d"][data-variante="b4"] .auth-btn-magic:disabled, html[data-design="d"][data-variante="b4"] .sfm-act-download:disabled, html[data-design="d"][data-variante="b4"] .share-native-btn:disabled, html[data-design="d"][data-variante="b4"] .packlist-btn--primary:disabled, html[data-design="d"][data-variante="b4"] .oet-btn-primary:disabled { background: var(--b4-lavur); border-color: var(--b4-lavur); color: var(--b4-grau); cursor: default; } html[data-design="d"][data-variante="b4"] :is(.share-native-btn, .oet-btn-primary) svg { color: currentColor; stroke: currentColor; } html[data-design="d"][data-variante="b4"] .share-native-btn { justify-content: flex-start; padding: 10px 18px; text-align: left; } html[data-design="d"][data-variante="b4"] .share-native-btn small { color: var(--b4-auf-gelb); opacity: .78; font-weight: 500; } /* Nebenaktion */ html[data-design="d"][data-variante="b4"] .auth-btn-google, html[data-design="d"][data-variante="b4"] .auth-btn-ghost, html[data-design="d"][data-variante="b4"] .sfm-act-share, html[data-design="d"][data-variante="b4"] .sfm-act-zip, html[data-design="d"][data-variante="b4"] .share-link-copy, html[data-design="d"][data-variante="b4"] .oet-btn-ghost, html[data-design="d"][data-variante="b4"] .oet-btn-secondary, html[data-design="d"][data-variante="b4"] .saved-routes-save-btn, html[data-design="d"][data-variante="b4"] .auth-status-btn, html[data-design="d"][data-variante="b4"] .rsync-btn, html[data-design="d"][data-variante="b4"] .bplan-btn, html[data-design="d"][data-variante="b4"] .finale-cta, html[data-design="d"][data-variante="b4"] .ebtn, html[data-design="d"][data-variante="b4"] .rfb-send, html[data-design="d"][data-variante="b4"] .mob-account-signin, html[data-design="d"][data-variante="b4"] .packlist-btn:not(.packlist-btn--primary), html[data-design="d"][data-variante="b4"] .cookie-banner-inner button { background: var(--b4-papier); border-color: var(--b4-tinte); color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .auth-btn-google:hover, html[data-design="d"][data-variante="b4"] .auth-btn-ghost:hover, html[data-design="d"][data-variante="b4"] .sfm-act-share:hover, html[data-design="d"][data-variante="b4"] .sfm-act-zip:hover, html[data-design="d"][data-variante="b4"] .share-link-copy:hover, html[data-design="d"][data-variante="b4"] .oet-btn-ghost:hover, html[data-design="d"][data-variante="b4"] .oet-btn-secondary:hover, html[data-design="d"][data-variante="b4"] .saved-routes-save-btn:hover, html[data-design="d"][data-variante="b4"] .auth-status-btn:hover, html[data-design="d"][data-variante="b4"] .rsync-btn:hover, html[data-design="d"][data-variante="b4"] .bplan-btn:hover, html[data-design="d"][data-variante="b4"] .finale-cta:hover, html[data-design="d"][data-variante="b4"] .ebtn:hover, html[data-design="d"][data-variante="b4"] .rfb-send:hover, html[data-design="d"][data-variante="b4"] .mob-account-signin:hover, html[data-design="d"][data-variante="b4"] .packlist-btn:not(.packlist-btn--primary):hover, html[data-design="d"][data-variante="b4"] .cookie-banner-inner button:hover { background: var(--b4-k-an); border-color: var(--b4-tinte); color: var(--b4-tinte); box-shadow: none; } html[data-design="d"][data-variante="b4"] :is(.sfm-act-zip, .saved-routes-save-btn, .bplan-btn, .finale-cta, .oet-btn) svg { color: currentColor; } html[data-design="d"][data-variante="b4"] .saved-routes-save-btn { width: 100%; border-style: solid; } /* Abschluss: „PDF erstellen“ ist die Hauptaktion des Abschnitts, wie „PDF-Reiseführer“ im Kopf (ein Gold je Bereich). Die Liste zum Abhaken ist Zweitknopf; abhaken geht schon in der Vorschau (Prüfung 08.10.2026: oben Gold für PDF, unten für die Liste, las sich beliebig) */ html[data-design="d"][data-variante="b4"] .finale-zone .d2-ab .finale-cta { min-height: var(--b4-k-m); padding: 0 22px; background: var(--b4-marker); border: 1.5px solid var(--b4-marker); color: var(--b4-auf-gelb); font-size: 16px; font-weight: 700; } html[data-design="d"][data-variante="b4"] .finale-zone .d2-ab .finale-cta:hover { background: var(--b4-marker-tief); border-color: var(--b4-marker-tief); color: var(--b4-auf-gelb); } /* Der Pfeil hinter dem Buchungslink fällt weg (die Adresse sagt, wohin es geht) */ html[data-design="d"][data-variante="b4"] .bplan-btn > span[aria-hidden="true"] { display: none; } html[data-design="d"][data-variante="b4"] .auth-btn:focus-visible, html[data-design="d"][data-variante="b4"] .sfm-act:focus-visible, html[data-design="d"][data-variante="b4"] .share-native-btn:focus-visible, html[data-design="d"][data-variante="b4"] .share-link-copy:focus-visible, html[data-design="d"][data-variante="b4"] .packlist-btn:focus-visible, html[data-design="d"][data-variante="b4"] .oet-btn:focus-visible, html[data-design="d"][data-variante="b4"] .saved-routes-save-btn:focus-visible, html[data-design="d"][data-variante="b4"] .auth-status-btn:focus-visible, html[data-design="d"][data-variante="b4"] .rsync-btn:focus-visible, html[data-design="d"][data-variante="b4"] .bplan-btn:focus-visible, html[data-design="d"][data-variante="b4"] .finale-cta:focus-visible, html[data-design="d"][data-variante="b4"] .ebtn:focus-visible, html[data-design="d"][data-variante="b4"] .rfb-send:focus-visible, html[data-design="d"][data-variante="b4"] .mob-account-signin:focus-visible, html[data-design="d"][data-variante="b4"] .cookie-banner-inner button:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; } /* Kacheln in Dialogen: Format, weitere Wege, Einladung zum Anpassen */ html[data-design="d"][data-variante="b4"] .sfm-card, html[data-design="d"][data-variante="b4"] .share-more-btn { border-radius: var(--d-r-ui); box-shadow: none; } html[data-design="d"][data-variante="b4"] .sfm-card:hover, html[data-design="d"][data-variante="b4"] .share-more-btn:hover { box-shadow: none; border-color: var(--b4-k-rand-hover); transform: none; } html[data-design="d"][data-variante="b4"] .sfm-card.is-selected, html[data-design="d"][data-variante="b4"] .sfm-card.is-selected:hover { background: var(--b4-k-an); border-color: var(--b4-tinte); box-shadow: none; } /* Segmente in Dialogen: wie der Kartenstil */ html[data-design="d"][data-variante="b4"] .share-rich-toggle, html[data-design="d"][data-variante="b4"] .sfm-pro-seg { gap: 2px; padding: 2px; background: var(--b4-papier); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--b4-k-rand); } html[data-design="d"][data-variante="b4"] :is(.share-rich-toggle, .sfm-pro-seg) button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--d-tinte-hell); box-shadow: none; font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; } html[data-design="d"][data-variante="b4"] :is(.share-rich-toggle, .sfm-pro-seg) button:hover { background: var(--b4-k-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] :is(.share-rich-toggle, .sfm-pro-seg) button:is(.on, .is-on, .is-active, [aria-pressed="true"]), html[data-design="d"][data-variante="b4"] :is(.share-rich-toggle, .sfm-pro-seg) button:is(.on, .is-on, .is-active, [aria-pressed="true"]):hover { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; box-shadow: none; } /* Fertige Sets (Story-Set, Poster) neben dem Motiv: Pillen in Segmenthöhe */ html[data-design="d"][data-variante="b4"] .motif-set-chip { min-height: var(--b4-pille); padding: 0 14px; box-sizing: border-box; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 999px; box-shadow: none; color: var(--b4-text); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .motif-set-chip:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } /* Einzelschalter unter „Inhalt“ (11.10.2026): Pillen mit Zustand, Bereich davor in Satzschrift */ html[data-design="d"][data-variante="b4"] .sfm-inhalt-lbl { font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--d-tinte-hell); } html[data-design="d"][data-variante="b4"] .sfm-chip { min-height: var(--b4-pille); padding: 0 14px; box-sizing: border-box; gap: 6px; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 999px; box-shadow: none; color: var(--b4-text); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; } @media (hover: hover) { html[data-design="d"][data-variante="b4"] .sfm-chip:hover:not(:disabled) { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } } html[data-design="d"][data-variante="b4"] .sfm-chip.is-on, html[data-design="d"][data-variante="b4"] .sfm-chip.is-on:hover:not(:disabled) { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; } html[data-design="d"][data-variante="b4"] .sfm-chip:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .sfm-chip:disabled { background: var(--b4-papier); border-color: var(--b4-k-rand); color: var(--b4-grau); font-weight: 500; opacity: 1; } /* Textknöpfe in Dialogen */ html[data-design="d"][data-variante="b4"] :where(.share-preview-save):is(.share-preview-save, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.auth-text-link):is(.auth-text-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-own-add):is(.bplan-own-add, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-own-edit):is(.bplan-own-edit, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-alt):is(.bplan-alt, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.rsync-link):is(.rsync-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.cb-link):is(.cb-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] .bplan-more > summary { color: var(--b4-tinte); font-weight: 700; background: transparent; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, text-underline-offset .2s ease; } html[data-design="d"][data-variante="b4"] .share-preview-save:hover, html[data-design="d"][data-variante="b4"] .auth-text-link:hover, html[data-design="d"][data-variante="b4"] .bplan-own-add:hover, html[data-design="d"][data-variante="b4"] .bplan-own-edit:hover, html[data-design="d"][data-variante="b4"] .bplan-alt:hover, html[data-design="d"][data-variante="b4"] .rsync-link:hover, html[data-design="d"][data-variante="b4"] .cb-link:hover, html[data-design="d"][data-variante="b4"] .bplan-more > summary:hover { color: var(--b4-tinte); background: transparent; text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } @media (prefers-reduced-motion: reduce) { html[data-design="d"][data-variante="b4"] :where(.share-preview-save):is(.share-preview-save, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.auth-text-link):is(.auth-text-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-own-add):is(.bplan-own-add, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-own-edit):is(.bplan-own-edit, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.bplan-alt):is(.bplan-alt, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.rsync-link):is(.rsync-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] :where(.cb-link):is(.cb-link, .sfm-act-linkrow u), html[data-design="d"][data-variante="b4"] .bplan-more > summary { transition: none; } } /* Fertige Sets (Story-Set, Poster) und der Karteneditor */ html[data-design="d"][data-variante="b4"] .sts-close { width: var(--b4-kreis); height: var(--b4-kreis); min-width: 0; min-height: 0; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; color: var(--b4-text); font: 500 22px/1 'Alegreya Sans', system-ui, sans-serif; box-shadow: none; } html[data-design="d"][data-variante="b4"] .sts-close:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .sts-btn, html[data-design="d"][data-variante="b4"] .sts-shuffle { align-items: center; justify-content: center; gap: 8px; min-height: var(--b4-k-s); padding: 0 16px; box-sizing: border-box; border: 1.5px solid var(--b4-tinte); border-radius: var(--d-r-ui); background: var(--b4-papier); color: var(--b4-tinte); box-shadow: none; font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.005em; text-transform: none; } html[data-design="d"][data-variante="b4"] .sts-btn:hover:not(:disabled), html[data-design="d"][data-variante="b4"] .sts-shuffle:hover:not(:disabled) { background: var(--b4-k-an); border-color: var(--b4-tinte); color: var(--b4-tinte); box-shadow: none; } html[data-design="d"][data-variante="b4"] .sts-btn.sts-btn-primary { background: var(--b4-marker); border-color: var(--b4-marker); color: var(--b4-auf-gelb); } html[data-design="d"][data-variante="b4"] .sts-btn.sts-btn-primary:hover:not(:disabled) { background: var(--b4-marker-tief); border-color: var(--b4-marker-tief); color: var(--b4-auf-gelb); } html[data-design="d"][data-variante="b4"] .sts-btn:focus-visible, html[data-design="d"][data-variante="b4"] .sts-shuffle:focus-visible, html[data-design="d"][data-variante="b4"] .sts-close:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; } html[data-design="d"][data-variante="b4"] .sts-seg { gap: 2px; padding: 2px; background: var(--b4-papier); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--b4-k-rand); } html[data-design="d"][data-variante="b4"] .sts-seg .sts-seg-btn { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--d-tinte-hell); box-shadow: none; font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .sts-seg .sts-seg-btn:hover { background: var(--b4-k-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .sts-seg .sts-seg-btn:is(.is-on, [aria-pressed="true"]), html[data-design="d"][data-variante="b4"] .sts-seg .sts-seg-btn:is(.is-on, [aria-pressed="true"]):hover { background: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; box-shadow: none; } /* Reiter im Karteneditor (Karte, Infoleiste, Text) sind Pillen wie die Reiter in Schritt 3 */ html[data-design="d"][data-variante="b4"] .sfm-tab { min-height: var(--b4-pille); padding: 0 14px; box-sizing: border-box; gap: 6px; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 999px; box-shadow: none; color: var(--b4-text); font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .sfm-tab:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .sfm-tab.is-on, html[data-design="d"][data-variante="b4"] .sfm-tab.is-on:hover { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); font-weight: 700; } html[data-design="d"][data-variante="b4"] .sfm-editor-reset { color: var(--b4-tinte); font-size: 14px; font-weight: 700; background: transparent; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, text-underline-offset .2s ease; } html[data-design="d"][data-variante="b4"] .sfm-editor-reset:hover { color: var(--b4-tinte); background: transparent; text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } /* Kacheln: eine Randstärke und ein Randton für alle */ html[data-design="d"][data-variante="b4"] .radio-card:not(.active):not(.is-selected), html[data-design="d"][data-variante="b4"] .mode-card:not(.active):not(.is-selected), html[data-design="d"][data-variante="b4"] .pace-card:not(.active):not(.is-selected), html[data-design="d"][data-variante="b4"] .pace-card-mini:not(.active):not(.is-selected), html[data-design="d"][data-variante="b4"] .sfm-card:not(.active):not(.is-selected), html[data-design="d"][data-variante="b4"] .share-more-btn:not(.active):not(.is-selected) { border-color: rgba(23, 58, 46, .17); } html[data-design="d"][data-variante="b4"] .radio-card:not(.active):not(.is-selected):hover, html[data-design="d"][data-variante="b4"] .mode-card:not(.active):not(.is-selected):hover, html[data-design="d"][data-variante="b4"] .pace-card:not(.active):not(.is-selected):hover, html[data-design="d"][data-variante="b4"] .pace-card-mini:not(.active):not(.is-selected):hover, html[data-design="d"][data-variante="b4"] .sfm-card:not(.active):not(.is-selected):hover, html[data-design="d"][data-variante="b4"] .share-more-btn:not(.active):not(.is-selected):hover { border-color: var(--b4-k-rand-hover); } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] :is(.share-rich-toggle, .sfm-pro-seg) button, html[data-design="d"][data-variante="b4"] .sts-seg .sts-seg-btn { min-height: 40px; } } /* ---------- Nummern, Pins und gewählte Zustände in Waldgrün ---------- In D trägt die Tinte Text und Kapseln zugleich; in B2 ist der Text Fichte, aber Nummern, Pins und alles Gewählte stehen wie auf der Karte in Waldgrün (Regel aus B). */ html[data-design="d"][data-variante="b4"] :where(.chip-active):is(.chip-active, .d2-werkzeuge .fz-action.is-saved .fz-ico), html[data-design="d"][data-variante="b4"] :where(.d2-marke.is-pflicht):is(.d2-marke.is-pflicht, .d2-werkzeuge .fz-action.is-saved .fz-ico), html[data-design="d"][data-variante="b4"] :where(.d2-ab-check input:checked + .d2-ab-box):is(.d2-ab-check input:checked + .d2-ab-box, .d2-werkzeuge .fz-action.is-saved .fz-ico), html[data-design="d"][data-variante="b4"] :is(.d2-werkzeuge .fz-action.is-saved .fz-ico) { background: var(--b4-tinte); border-color: var(--b4-tinte); color: var(--b4-auf-tinte); } /* Nummern und Pins */ html[data-design="d"][data-variante="b4"] :where(.d-cap):is(.d-cap, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.d2-perle-nr):is(.d2-perle-nr, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.d2-nr):is(.d2-nr, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.optionb-stop-pin):is(.optionb-stop-pin, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :is(.routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.mode-flow-dot.is-on):is(.mode-flow-dot.is-on, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.d2s-stiel):is(.d2s-stiel, .routaris-stepper .stepper-step.is-done .n), html[data-design="d"][data-variante="b4"] :where(.fam-stop--green .fam-stop-dot):is(.fam-stop--green .fam-stop-dot, .routaris-stepper .stepper-step.is-done .n) { background: var(--b4-daten); } html[data-design="d"][data-variante="b4"] .optionb-stopcard.active .optionb-stop-pin { background: var(--b4-daten); box-shadow: 0 0 0 2px var(--b4-daten); } /* Datenflächen: Hauptreisezeit und gute Reisezeit wie in der Tabelle der Startseite */ html[data-design="d"][data-variante="b4"] :where(.d2-mb-feld.is-hi):is(.d2-mb-feld.is-hi, .d2-mb-legende i.is-hi), html[data-design="d"][data-variante="b4"] :is(.d2-mb-legende i.is-hi), html[data-design="d"][data-variante="b4"] :is(.d2-region-band i.is-gut) { background: var(--b4-daten); } html[data-design="d"][data-variante="b4"] #step-5 .suggestion-pill-offbeat { background: var(--b4-daten); } /* ---------- Kopfzeile: Wortmarke in Waldgrün ---------- */ html[data-design="d"][data-variante="b4"] .d-wordmark { color: var(--b4-titel); font-weight: 900; letter-spacing: -0.005em; } html[data-design="d"][data-variante="b4"] .site-header .header-nav a { color: var(--b4-text); } /* ---------- Textmarker im Text ---------- */ html[data-design="d"][data-variante="b4"] .b4-marker { background: linear-gradient(180deg, transparent 0.16em, var(--b4-marker) 0.16em, var(--b4-marker) 1.12em, transparent 1.12em); color: inherit; padding: 0 0.12em; margin: 0 -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ---------- Fußzeile: Waldgrün ---------- */ html[data-design="d"][data-variante="b4"] .site-footer { background: var(--b4-band); border-top: 0; --d-tinte: #FFFFFF; --d-tinte-hell: #C9D9D2; --d-laub: #FFFFFF; --d-laub-tief: var(--b4-marker); --d-laub-rgb: 255, 255, 255; --d-line: rgba(255, 255, 255, .2); color: #C9D9D2; } html[data-design="d"][data-variante="b4"] .site-footer .d-wordmark { color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .site-footer-wordmark { filter: brightness(0) invert(1); } html[data-design="d"][data-variante="b4"] .site-footer-nav a { text-decoration: none; display: inline-block; padding-block: 4px; } html[data-design="d"][data-variante="b4"] .site-footer-nav a:hover { text-decoration: underline; text-decoration-color: currentColor; } html[data-design="d"][data-variante="b4"] .site-footer-cta { text-decoration: none !important; } html[data-design="d"][data-variante="b4"] .site-footer-base { border-top-color: rgba(255, 255, 255, .2); } html[data-design="d"][data-variante="b4"] .site-footer-social a { border-color: rgba(255, 255, 255, .35); width: var(--b4-kreis); height: var(--b4-kreis); } /* Kreis: 40, Handy 44 (vorher fest 40) */ /* Fußzeile auf derselben Kante wie Kopfzeile und Inhalt (--d-seite): Die Startseite setzt sie in design-b4-start.css, die übrigen Seiten standen mit 40 px Rand und 1440 px Höchstbreite 17 px weiter außen (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .site-footer-inner, html[data-design="d"][data-variante="b4"] .site-footer-base { max-width: none; padding-left: var(--d-seite); padding-right: var(--d-seite); } html[data-design="d"][data-variante="b4"] .site-footer a:focus-visible { outline: 2.5px solid var(--b4-marker); outline-offset: 3px; } /* Kleinste Stufe der Oberfläche ist 12 px (routaris-design-system-b4.md, Abschnitt 3). Ohne Versalien und Sperrung (Abschnitt 9): Auf den weiteren Seiten fehlte die Regel aus den D-Dateien, die das auf der Startseite aufhebt, dort standen „FOLGE UNS“ und „ENTDECKEN“ gesperrt (Scan 11.10.2026) */ html[data-design="d"][data-variante="b4"] .site-footer-nav-title, html[data-design="d"][data-variante="b4"] .site-footer-social-label { font-size: 12px; text-transform: none; letter-spacing: normal; } /* Deckblatt-Miniatur im Abschluss der Ergebnisseite: als Grafik mindestens 11 px */ html[data-design="d"][data-variante="b4"] :where(.d2-cover-marke):is(.d2-cover-marke, .d2-cover-text .d2-num), html[data-design="d"][data-variante="b4"] :is(.d2-cover-text .d2-num) { font-size: 11px; } /* ===================================================== B4: FARBEN DER ROLLEN IM HELLEN UND DUNKLEN MODUS Hell: Seiten weiß, Schrift Fichte, Klickbares Waldgrün. Dunkel: Seiten Nachtwald (Tokens --d-* aus css/design-b4-dunkel.css), Schrift warmes Weiß, Klickbares helles Waldgrün; Gelb bleibt in beiden Modi Hauptaktion und Route, die Schrift darauf Fichte. Die Karten bleiben helle Fenster und behalten deshalb die hellen Werte. ===================================================== */ html[data-design="d"][data-variante="b4"]:root { --b4-titel: #173A2E; /* Überschriften */ --b4-daten: #173A2E; /* Nummern, Pins, Datenflächen */ --b4-auf-daten: #FFFFFF; /* Schulterzeit zwischen Hauptreisezeit (Daten) und Nebensaison (Kiesel), Saisonleiste und Reisezeit-Tabelle; ein grüner Mittelton (Salbei mittel), Grau las sich als „aus“. Vorher die gewählte Kachel, die hell kaum vom Kiesel abstand (17.10.2026). */ --b4-saison-mitte: #87AF99; --b4-auf-tinte: #FFFFFF; /* Schrift auf Waldgrün (gewählte Pillen) */ --b4-auf-tinte-2: #D1EADF; /* Zahlen in gewählten Pillen */ --b4-auf-gelb: #173A2E; /* Schrift auf Goldgelb, in beiden Modi */ --b4-papier: #FFFFFF; /* Fläche von Knöpfen, Pillen und Kreisen */ --b4-band: #173A2E; /* Fußzeile (das Band nimmt --d-band) */ --b4-unterstrich: rgba(43, 110, 85, .5); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"]:root { --b4-tinte: #98C0A9; --b4-text: #F2EEE6; --b4-titel: #F2EEE6; --b4-grau: #ABBCB5; --b4-daten: #98C0A9; --b4-auf-daten: #092018; --b4-saison-mitte: #306550; --b4-auf-tinte: #092018; --b4-auf-tinte-2: #173D2F; --b4-papier: #112B22; --b4-band: #05140F; --b4-lavur: #112B22; --b4-linie: #1F4235; --b4-k-rand: rgba(242, 238, 230, .28); --b4-k-rand-hover: rgba(242, 238, 230, .55); --b4-k-hover: #15372C; --b4-k-an: #173D2F; --b4-unterstrich: rgba(152, 192, 169, .5); } /* Karten, Kartensteuerung und die Weltkarte des Reisekompass bleiben hell */ html[data-variante="b4"][data-modus="dunkel"] .leaflet-container, html[data-variante="b4"][data-modus="dunkel"] .hero-v2-mapcard, html[data-variante="b4"][data-modus="dunkel"] .hero-v2-map, html[data-variante="b4"][data-modus="dunkel"] .lpk-stage { --b4-tinte: #2B6E55; --b4-text: #173A2E; --b4-titel: #173A2E; --b4-grau: #4B6259; --b4-daten: #173A2E; --b4-auf-daten: #FFFFFF; --b4-auf-tinte: #FFFFFF; --b4-auf-tinte-2: #D1EADF; --b4-saison-mitte: #87AF99; --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); } /* Die Grundkarte bleibt ein helles Fenster, im Dunkeln aber um 15 % gedämpft: als volle helle Fläche über die halbe Bildschirmhöhe wirkte sie grell (Prüfung 08.10.2026). Route, Pins, Fahrzeiten und Namen liegen in eigenen Ebenen und bleiben ungedämpft. */ html[data-variante="b4"][data-modus="dunkel"] .leaflet-container .leaflet-tile-pane, html[data-variante="b4"][data-modus="dunkel"] .leaflet-container .leaflet-sketch-pane, html[data-variante="b4"][data-modus="dunkel"] .leaflet-container .leaflet-mu-pane, html[data-variante="b4"][data-modus="dunkel"] .leaflet-container .leaflet-borders-pane { filter: brightness(.85); } /* Textknopf im Dunkeln: der breite gelbe Strich läge unter heller Schrift; stattdessen wird die Unterstreichung gelb und etwas kräftiger */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-textknopf:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-ansehen:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d-caption-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .when-skip-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .vmk-pref-edit:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .deliver-mehr:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .landing-kompass-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .vmk-routehint-btn--quiet:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .lp-routes-teaser-cta:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .share-preview-save:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .auth-text-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .bplan-own-add:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .bplan-own-edit:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .bplan-alt:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .rsync-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .cb-link:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .sfm-editor-reset:hover, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] :is(.b4-saison, .lp-kompass-alt) a:hover { text-decoration-color: var(--b4-marker); text-decoration-thickness: 3px; text-underline-offset: 4px; } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-marker { color: var(--b4-auf-gelb); } /* ---------- Schalter hell/dunkel in der Kopfzeile (js/design-b4.js): ein Kreis ---------- */ html[data-design="d"][data-variante="b4"] .b4-modus { width: var(--b4-kreis); height: var(--b4-kreis); padding: 0; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--b4-papier); border: 1.5px solid var(--b4-k-rand); border-radius: 50%; color: var(--b4-text); cursor: pointer; } html[data-design="d"][data-variante="b4"] .b4-modus:hover { background: var(--b4-k-hover); border-color: var(--b4-k-rand-hover); } html[data-design="d"][data-variante="b4"] .b4-modus:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; } html[data-design="d"][data-variante="b4"] .b4-modus .b4-sonne, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-modus .b4-mond { display: none; } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .b4-modus .b4-sonne { display: block; } /* Alter Hinweis in Schritt 1 (Datumswahl) trug eine feste Farbe des Live-Designs */ html[data-design="d"][data-variante="b4"] .date-hint { color: var(--d-tinte-hell); } /* ---------- Klimadiagramm (js/climate-chart.js zeichnet mit festen Farben) ---------- Schrift wie die Seite; im Dunkeln Achsen, Beschriftung und Legende hell */ html[data-design="d"][data-variante="b4"] .climate-chart, html[data-design="d"][data-variante="b4"] .climate-legend { font-family: 'Alegreya Sans', system-ui, sans-serif !important; } /* Ergebnisseite: die Zeichnung (result-narrow, 420 breit) läuft am Handy auf rund 70 % ihrer Breite, Monate und Achsen standen bei 9 px. --k (js/design-b4-start.js) hält sie gerendert bei mindestens 11 px; kleiner, als die Zeichnung sie anlegt, werden sie nie (max). */ html[data-design="d"][data-variante="b4"] .d2-klima-svg text[font-size="13"] { font-size: max(13px, calc(11px * var(--k, 1))); } html[data-design="d"][data-variante="b4"] .d2-klima-svg text[font-size="11.44"] { font-size: max(11.44px, calc(11px * var(--k, 1))); } html[data-design="d"][data-variante="b4"] .d2-klima-svg text[font-size="11.18"] { font-size: max(11.18px, calc(11px * var(--k, 1))); } html[data-design="d"][data-variante="b4"] .d2-klima-svg text[font-size="10.4"] { font-size: max(10.4px, calc(11px * var(--k, 1))); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart text[fill="#4B6259"] { fill: #ABBCB5; } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart text[fill="#173A2E"] { fill: #F2EEE6; } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart text[fill="rgba(23,58,46,.95)"] { fill: rgba(242, 238, 230, .88); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart rect[fill="rgba(23,58,46,.09)"] { fill: rgba(242, 238, 230, .07); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart line[stroke="rgba(23,58,46,.32)"] { stroke: rgba(242, 238, 230, .32); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .climate-chart line[stroke="rgba(23,58,46,.1)"] { stroke: rgba(242, 238, 230, .10); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] :where(.climate-legend):is(.climate-legend, .climate-legend [style*="color"]), html[data-design="d"][data-variante="b4"][data-modus="dunkel"] :is(.climate-legend [style*="color"]) { color: #ABBCB5 !important; } /* Regenbalken und Temperaturlinie hatten auf dem Nachtgrund kaum Kontrast (Prüfung 08.10.2026). Nur auf der Ergebnisseite: der Ausschnitt der Startseite ist ein helles Fenster (5.2) */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [fill="#2E86C9" i] { fill: var(--d-wasser); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [stroke="#2E86C9" i] { stroke: var(--d-wasser); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [fill="#1F5F92" i] { fill: var(--d-wasser-tief); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [stroke="#1F5F92" i] { stroke: var(--d-wasser-tief); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [fill="#B3261E" i] { fill: var(--d-fehler); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .d2-klima .climate-chart [stroke="#B3261E" i] { stroke: var(--d-fehler); } /* ---------- Dialoge im Dunkeln: Reste mit festen hellen Farben ---------- */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .packlist-foot { background: var(--d-flaeche); border-top-color: var(--b4-linie); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .packlist-count { color: var(--d-tinte-hell); } html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .sts-lbl { color: var(--b4-grau); } /* Schmale Handys (bis 400 px): drei runde Kopfknöpfe (Modus, Meine Routen, Menü) passen bei 44 px nicht neben Wortmarke und Hinweis „Testansicht“; dann 40 px und engere Abstände. Ohne Hinweis (B4 seit 14.10.2026) gelten die 44 px des Knopfsystems mit 8 px Abstand: Die Kopfkreise maßen am Handy 40, die Kreise der Kartenleiste 44 (Feinheiten 17.10.2026). */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .site-header .header-utility { gap: var(--d-a2); } /* Knöpfe in die letzte Spalte: Die Navigation ist am Handy ausgeblendet, die Knöpfe rutschten in ihre Spalte, und die leere dritte Spalte samt 10 px Spaltenabstand stand rechts daneben (Gruppe endete 10 px vor der Inhaltskante) */ html[data-design="d"][data-variante="b4"] .site-header .container > .header-utility { grid-column: -2; grid-row: 1; } } /* Desktop: Navigation in der Mitte der Kopfzeile, unabhängig von der Breite der Knöpfe rechts. Die Startseite hat zusätzlich „Konto“, die Navigation sprang beim Seitenwechsel um 20 px (Feinheiten 17.10.2026) */ @media (min-width: 1100px) { html[data-design="d"][data-variante="b4"] .site-header .container { grid-template-columns: 1fr auto 1fr; } html[data-design="d"][data-variante="b4"] .site-header .container > .header-utility { justify-self: end; } } /* ===================================================== KOPFZONE: Kopfzeile und Schrittleiste in beiden Modi Fichte (04.10.2026) Fichte oben, im Band und in der Fußzeile fasst die Seite ein; beim Umschalten zwischen hell und dunkel bleibt der Kopf gleich, nur der Inhalt wechselt. Die Tokens der Kopfzone sind die des dunklen Modus, deshalb stimmen Knöpfe, Kreise, Links und die Schrittleiste ohne eigene Regeln. Aufklappmenü und Kontomenü gehören zur Kopfzone und stehen ebenfalls dunkel. ===================================================== */ html[data-design="d"][data-variante="b4"] .site-header, html[data-design="d"][data-variante="b4"] .routaris-stepper { --d-grund: #173A2E; --d-grund-rgb: 23, 58, 46; --d-flaeche: #112B22; --d-flaeche-2: #15372C; --d-flaeche-rgb: 17, 43, 34; --d-kiesel: #0D3125; --d-tinte: #F2EEE6; --d-tinte-rgb: 242, 238, 230; --d-tinte-hell: #ABBCB5; --d-laub: #98C0A9; --d-laub-tief: #B2D1BF; --d-laub-blass: #173D2F; --d-laub-rgb: 152, 192, 169; --d-line: rgba(242, 238, 230, .14); --d-line-stark: rgba(242, 238, 230, .32); --d-rand: rgba(242, 238, 230, .36); --d-feldrand: rgba(242, 238, 230, .6); --b4-tinte: #98C0A9; --b4-text: #F2EEE6; --b4-titel: #F2EEE6; --b4-grau: #ABBCB5; --b4-daten: #98C0A9; --b4-auf-daten: #092018; --b4-auf-tinte: #092018; --b4-auf-tinte-2: #173D2F; --b4-papier: transparent; --b4-linie: #1F4235; --b4-k-rand: rgba(242, 238, 230, .34); --b4-k-rand-hover: rgba(242, 238, 230, .6); --b4-k-hover: rgba(255, 255, 255, .08); --b4-k-an: rgba(255, 255, 255, .1); --b4-unterstrich: rgba(152, 192, 169, .5); color: var(--d-tinte); } html[data-design="d"][data-variante="b4"] .site-header { background: #173A2E; border-bottom-color: transparent; } html[data-design="d"][data-variante="b4"] .site-header.d-scrolled { border-bottom-color: rgba(242, 238, 230, .12); } html[data-design="d"][data-variante="b4"] .routaris-stepper { background: #173A2E; border-bottom-color: transparent; } html[data-design="d"][data-variante="b4"] .site-header .d-wordmark { color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .site-header .nav-primary, html[data-design="d"][data-variante="b4"] .site-header .nav-trigger { color: var(--d-tinte); } html[data-design="d"][data-variante="b4"] .site-header .nav-trigger:focus-visible, html[data-design="d"][data-variante="b4"] .site-header .nav-primary:focus-visible { outline-color: var(--b4-marker); } /* Menüs der Kopfzone: dunkle Fläche, helle Schrift (auth.css setzt feste helle Farben) */ html[data-design="d"][data-variante="b4"] .site-header .nav-dropdown-panel, html[data-design="d"][data-variante="b4"] .site-header .account-menu { background: var(--d-flaeche); border-color: var(--d-line); color: var(--d-tinte); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5); } html[data-design="d"][data-variante="b4"] .site-header :is(.nav-dropdown-panel, .account-menu) a, html[data-design="d"][data-variante="b4"] .site-header :is(.nav-dropdown-panel, .account-menu) button { color: var(--d-tinte); } html[data-design="d"][data-variante="b4"] .site-header .nav-sub-s, html[data-design="d"][data-variante="b4"] .site-header .account-menu-email { color: var(--d-tinte-hell); border-bottom-color: var(--d-line); } html[data-design="d"][data-variante="b4"] .site-header .nav-sub-item:is(:hover, :focus-visible), html[data-design="d"][data-variante="b4"] .site-header .account-menu-item:is(:hover, :focus-visible) { background: var(--d-flaeche-2); color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .site-header :is(.nav-sub-item:hover, .nav-sub-item:focus-visible) .nav-sub-t { color: var(--b4-tinte); } /* Spitze des Aufklappmenüs in der Fläche des Menüs; die Großbuchstaben-Überzeile entfällt (wie in D4: Überzeilen über Listen sehen nach Vorlage aus, die Einträge sprechen für sich) */ html[data-design="d"][data-variante="b4"] .site-header .nav-dropdown-panel::before { background: var(--d-flaeche); border-color: var(--d-line); } html[data-design="d"][data-variante="b4"] .site-header .nav-sub-head { display: none; } /* ===================================================== KONTRAST IN DIALOGEN (04.10.2026) Links im Impressum- und Datenschutz-Dialog tragen ihre Farbe inline (var(--teal), auf den Karten das Wasser): 3,9 : 1 auf Weiß. Hier wie alle Links in Waldgrün (dunkel helles Waldgrün). Beschriftungen im Teilen-Dialog (Format, Titelbild, Karte) waren Tinte mit halber Deckkraft, 3,2 : 1; im hellen Modus jetzt Nebentext (dunkel regelt das der Abschnitt oben). ===================================================== */ html[data-design="d"][data-variante="b4"] a[style*="color: var(--teal)"] { color: var(--b4-tinte) !important; } html[data-design="d"][data-variante="b4"]:not([data-modus="dunkel"]) .sts-lbl { color: var(--b4-grau); } /* ===================================================== PLANUNGSSCHRITTE (07.10.2026) Durchsicht des Ablaufs Land, Interessen, Orte und Rückfrage aus Nutzersicht, am Desktop und am Handy, hell und dunkel. Texte und Begriffe tauscht begriffe() in js/design-b4-start.js; hier steht, was Form und Lage betrifft. ===================================================== */ /* Kopfzone am Handy ohne Lücke: index.html setzt main auf 64 px (Kopfzeile des Live-Designs), die Kopfzeile ist hier am Handy 60 px hoch. Die 4 px dazwischen standen weiß zwischen Kopfzeile und Schrittleiste (und über dem Hero). */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] main { padding-top: 60px; } } /* Im Planer führt der Fuß nicht noch einmal zu „Route planen“: man plant schon, und ein zweites Gold neben „Weiter“ wäre eine zweite Hauptaktion im Blick. Den Schritt setzt App.showStep als data-planschritt an (kein :has() an , siehe design-d.css). */ html[data-design="d"][data-variante="b4"]:is([data-planschritt="1"], [data-planschritt="2"], [data-planschritt="3"], [data-planschritt="4"]) .site-footer-cta { display: none; } /* Schritt 3: Lesetext auf den Orts-Karten ab 13,5 px (Moment, Tagesausflug, Nächte) */ html[data-design="d"][data-variante="b4"] #step-3 .d2s-moment, html[data-design="d"][data-variante="b4"] #step-3 .d2s-ausflug, html[data-design="d"][data-variante="b4"] #step-3 .d2s-strecke, html[data-design="d"][data-variante="b4"] #step-3 .vmk-card-meta, html[data-design="d"][data-variante="b4"] #step-3 .vmk-card-nights-hint { font-size: 13.5px; } html[data-design="d"][data-variante="b4"] #step-3 .additional-notes-hint { font-size: 13.5px; } /* Die Legende gehört zum Kartenfenster und bleibt im dunklen Modus hell (Abschnitt 5.2); sie liegt neben .leaflet-container und bekommt die hellen Werte deshalb eigens */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .mustsee-map-wrap .vmk-legend { --d-flaeche: #FFFFFF; --d-flaeche-rgb: 255, 255, 255; --d-kiesel: #EDF4F1; --d-tinte: #173A2E; --d-tinte-hell: #4B6259; background: rgba(255, 255, 255, .92); color: #173A2E; box-shadow: 0 1px 0 rgba(23, 58, 46, .15), 0 8px 24px rgba(23, 58, 46, .17); } /* Rückfrage nach „Route erstellen“: Meldungen wie „Hoi An gepinnt“ lagen über dem Dialog (am Handy über Titel und Satz). Solange ein Dialog offen ist, treten sie hinter den abgedunkelten Grund zurück. Ob einer offen ist, prüft App.showToast beim Zeigen (.unter-dialog); body:has() rechnete nach jeder DOM-Änderung die ganze Seite neu. */ html[data-design="d"][data-variante="b4"] .routaris-toasts.unter-dialog { z-index: 900; } /* Das Tempo erscheint nur, wenn die KI ergänzt; der Zusatz „(nur wenn KI ergänzt)“ entfällt */ html[data-design="d"][data-variante="b4"] .pin-confirm-pace-hint { display: none; } html[data-design="d"][data-variante="b4"] .pin-confirm-btn-desc, html[data-design="d"][data-variante="b4"] .pace-card-mini-desc { font-size: 14px; line-height: 1.4; } html[data-design="d"][data-variante="b4"] .pin-confirm-text, html[data-design="d"][data-variante="b4"] .pin-confirm-distance, html[data-design="d"][data-variante="b4"] .pin-confirm-btn-desc { text-wrap: pretty; } /* Auf allen Seiten keine einzelnen Wörter in der letzten Zeile von Absätzen, Überschriften in ausgewogenen Zeilen (wie auf der Startseite). Ohne Gewicht, gezieltere Regeln gewinnen. Prüfer fanden „Nichts.“, „Länderportrait.“, „Goa“, „Hiroshima“ allein in der letzten Zeile (Feinheiten 17.10.2026) */ :where(html[data-design="d"][data-variante="b4"]) :where(p), :where(html[data-design="d"][data-variante="b4"]) :where(li), :where(html[data-design="d"][data-variante="b4"]) :where(dd), :where(html[data-design="d"][data-variante="b4"]) :where(figcaption) { text-wrap: pretty; } :where(html[data-design="d"][data-variante="b4"]) :where(h1), :where(html[data-design="d"][data-variante="b4"]) :where(h2), :where(html[data-design="d"][data-variante="b4"]) :where(h3), :where(html[data-design="d"][data-variante="b4"]) :where(h4) { text-wrap: balance; } /* Im dunklen Modus hellte der Schleier hinter Dialogen die Seite auf (Tinte war dort Warmweiß); jetzt dunkelt er ab, wie im hellen Modus */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .modal-backdrop { background: rgba(var(--d-grund-rgb), .78); } /* ---------- Schrittleiste: erledigt, aktuell und offen unterscheidbar ---------- Aktuell stand eine weiße Ziffer auf Salbei (1,9 : 1) und sah aus wie erledigt. Jetzt: aktuell gefüllt mit dunkler Ziffer, erledigt mit Haken (zurück antippbar), offen als Ring. */ html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-step.is-active .n { color: var(--b4-auf-tinte); } html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-step.is-done .n { position: relative; font-size: 0; } /* Am Handy alle vier Namen statt drei leerer Haken (Prüfung 08.10.2026); erst unter 375 px bleibt nur der Name des aktuellen Schritts */ @media (min-width: 375px) and (max-width: 768px) { html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-trail { gap: 4px; padding-left: 12px; padding-right: 12px; } html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-step { gap: 5px; padding: 4px 6px 4px 3px; } html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-step .lbl { display: inline; font-size: 13.5px; } html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-sep { min-width: 6px; max-width: 14px; } } html[data-design="d"][data-variante="b4"] .routaris-stepper .stepper-step.is-done .n::after { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat; } /* ---------- Schritte 1 und 2 an der linken Kante (10.10.2026) ---------- Logo, Schrittleiste und Schritt 3 beginnen an der Seitenkante (56 px). Schritt 1 und 2 standen in einer mittigen Spalte; beim Wechsel in Schritt 3 sprang die Überschrift um gut 200 px. */ html[data-design="d"][data-variante="b4"] :is(#step-1, #step-2) > .container.step-stage { margin-left: 0; margin-right: auto; } /* Schritt 3: „Mehr Optionen“ steht über den Reitern statt am Ende der Liste (js/map.js) */ html[data-design="d"][data-variante="b4"] #step-3 .vmk-cards-col > .d2s-optionen { margin: 12px 0 14px; } /* ---------- Schritt 1: Kacheln in der Form der Rückfrage (Abschnitt 5.9, 08.10.2026) ---------- Vorher Symbol oben, Titel und Satz mittig, am Handy je Kachel 100 bis 250 px hoch (Schritt 1 rund 3.400 px lang); fünf von sechs Flughäfen trugen dasselbe Flugzeug. Jetzt Symbol im Kiesel-Kreis links, Titel und Satz links, Haken oben rechts; Flughäfen ohne Symbol (das Flugzeug sagte nichts), Reisemittel am Handy als Liste (die Sätze sind lang). */ html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; align-content: center; justify-items: start; text-align: left; min-height: 0; padding: 12px 34px 12px 12px; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card .radio-card-icon { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card .radio-card-label, html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card .radio-card-desc { grid-column: 2; justify-self: start; text-align: left; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card .radio-card-label { font-size: 16px; font-weight: 700; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card .radio-card-desc { font-size: 14px; line-height: 1.35; } /* Ohne Satz (Abreise, Reisegruppe): Symbol und Titel auf einer Linie, keine leere zweite Zeile */ html[data-design="d"][data-variante="b4"] #step-1 .step-form .radio-card:not(:has(.radio-card-desc)) .radio-card-icon { grid-row: 1; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .airport-cards .radio-card { grid-template-columns: minmax(0, 1fr); padding: 12px 30px 12px 14px; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .airport-cards .radio-card .radio-card-icon { display: none; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .airport-cards .radio-card .radio-card-label, html[data-design="d"][data-variante="b4"] #step-1 .step-form .airport-cards .radio-card .radio-card-desc { grid-column: 1; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .return-toggle-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @media (max-width: 640px) { html[data-design="d"][data-variante="b4"] #step-1 .step-form #transport-cards { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] #step-1 .step-form .return-toggle-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* halbe Breite reicht nicht für Symbol, „Gleicher Ort“ und Haken: am Handy ohne Symbol */ html[data-design="d"][data-variante="b4"] #step-1 .step-form .return-toggle-cards .radio-card { grid-template-columns: minmax(0, 1fr); padding-left: 14px; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .return-toggle-cards .radio-card .radio-card-icon { display: none; } html[data-design="d"][data-variante="b4"] #step-1 .step-form .return-toggle-cards .radio-card .radio-card-label { grid-column: 1; } } /* Kalender in den Datumsfeldern: Waldgrün aus dem Token statt der Live-Markenfarbe im Bild */ html[data-design="d"][data-variante="b4"] #step-1 .date-input::-webkit-calendar-picker-indicator { opacity: 1; background: var(--b4-tinte); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") center / 18px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") center / 18px 18px no-repeat; } /* Hinweis unter den Datumsfeldern bündig mit den Feldern (stand eingerückt ohne Fläche) */ html[data-design="d"][data-variante="b4"] #step-1 .date-hint { margin: 6px 0 0; padding: 0; background: none; font-size: 14px; line-height: 1.45; color: var(--b4-grau); } /* „Noch kein festes Datum?“ tat dasselbe wie der Schalter „Nur Reisedauer“ direkt darüber */ html[data-design="d"][data-variante="b4"] #step-1 .when-skip { display: none; } /* Reisemittel als Skala (Prüfung 08.10.2026): ohne Flug, meist über Land, mit Flug, dann „Je nach Strecke“; Selbstfahren, Fahrer und Touren sind eine andere Frage und stehen dahinter. Die Kennungen kommen aus CountryConfig.transportModes (js/countries.js). */ html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card { order: 6; } html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card:is([data-transport="no-fly"], [data-transport="bus-only"], [data-transport="train-only"], [data-transport="marshrutka-only"]) { order: 1; } html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card:is([data-transport="ground-preferred"], [data-transport="train-preferred"], [data-transport="bus-preferred"], [data-transport="train-bus-mix"], [data-transport="minimize-flying"], [data-transport="island-hop"]) { order: 2; } html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card:is([data-transport="flight-preferred"], [data-transport="fast"], [data-transport="fly-mostly"]) { order: 3; } html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card[data-transport="no-preference"] { order: 4; } html[data-design="d"][data-variante="b4"] #transport-cards > .radio-card:is([data-transport^="self-drive"], [data-transport="rental-car"], [data-transport="driver-hired"], [data-transport="guided"], [data-transport="tour-based"]) { order: 5; } /* ---------- Schritt 2: Interessen ohne Kästen und ohne Symbole ---------- Sechs gleich gebaute Kästen mit Symbol und Satz sind das Vorlagenmuster aus Abschnitt 9, und die Symbole doppelten sich (zwei Schalen, zwei Berge). Jetzt Titel, Beispiele und die drei Stufen: am Desktop ein Raster ohne Rahmen, die Stufen einer Reihe auf einer Linie; am Handy eine Liste mit feinen Linien. Der Hinweis „jede Kategorie individuell gewichten“ wiederholte den Satz unter der Frage und entfällt. */ html[data-design="d"][data-variante="b4"] #step-2 .pref-section-label { display: none; } html[data-design="d"][data-variante="b4"] #step-2 .pref-block { margin: 0; } html[data-design="d"][data-variante="b4"] #step-2 .pref-int-grid { gap: 32px; } html[data-design="d"][data-variante="b4"] #step-2 :where(.pref-int):is(.pref-int, .pref-int.is-high), html[data-design="d"][data-variante="b4"] #step-2 .pref-int.is-high, html[data-design="d"][data-variante="b4"] #step-2 .pref-int:hover { display: flex; flex-direction: column; gap: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } html[data-design="d"][data-variante="b4"] #step-2 .pref-int-head svg { display: none; } html[data-design="d"][data-variante="b4"] #step-2 .pref-int-title { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] #step-2 .pref-int-sub { margin: 2px 0 12px; font-size: var(--d-fs-klein); line-height: 1.4; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] #step-2 .pref-seg { margin-top: auto; } html[data-design="d"][data-variante="b4"] #step-2 .pref-seg button { flex: 1 1 0; padding: 0 6px; } @media (max-width: 640px) { html[data-design="d"][data-variante="b4"] #step-2 .pref-int-grid { gap: 0; border-top: 1px solid var(--d-line); } html[data-design="d"][data-variante="b4"] #step-2 :where(.pref-int):is(.pref-int, .pref-int.is-high), html[data-design="d"][data-variante="b4"] #step-2 .pref-int.is-high, html[data-design="d"][data-variante="b4"] #step-2 .pref-int:hover { padding: 16px 0; border-bottom: 1px solid var(--d-line); } /* die letzte Zeile ohne Linie: darunter beginnt „Wie soll die Route entstehen?“ mit eigener */ html[data-design="d"][data-variante="b4"] #step-2 .pref-int:last-child { border-bottom: 0; } } /* ---------- Schritt 2: Art der Planung wie die Kacheln der Rückfrage ---------- Symbol im Kiesel-Kreis links, Titel und Satz rechts, Haken oben rechts. Die Punktreihe „4 Schritte, inkl. Karte“ entfällt, der Satz sagt es. Statt der Sonne (dasselbe Zeichen wie der Hell-Schalter) zeigt „KI-Inspiration“ eine Route mit drei Halten (js/design-b4-start.js). */ html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; min-height: 0; padding: 16px 40px 16px 16px; } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card-svg { width: 40px; height: 40px; margin: 0; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--d-kiesel); color: var(--d-tinte); } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card.active .mode-card-svg { background: rgba(var(--d-flaeche-rgb), .7); } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card-tx { gap: 4px; padding-top: 1px; } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card-title { font-size: 17px; font-weight: 700; } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card-desc { font-size: 14px; line-height: 1.4; } html[data-design="d"][data-variante="b4"] #step-2 .mode-block-v2 .mode-card-flow { display: none; } /* Reisetempo (nur bei KI-Inspiration): dieselbe Kachel wie in der Rückfrage, ohne Symbol, die Frage linksbündig wie alle anderen Fragen */ html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-label { margin: 24px 0 10px; text-align: left; font-size: 17px; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-cards { gap: 10px; } html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-card { align-items: flex-start; gap: 2px; min-height: 0; padding: 12px 36px 12px 14px; text-align: left; } html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-card-icon { display: none; } html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-card-title { font-size: 15.5px; font-weight: 700; } html[data-design="d"][data-variante="b4"] #step-2 .pace-group-v2 .pace-card-desc { font-size: 14px; line-height: 1.4; } /* Weiter und Zurück am Handy in einer Reihe wie in Schritt 3: „Zurück“ schmal links, der Hauptknopf daneben (vorher zwei gleich breite Knöpfe, „Zurück“ zuunterst am Daumen) */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] :is(#step-1, #step-2) .step-nav { flex-direction: row; align-items: stretch; gap: 10px; } html[data-design="d"][data-variante="b4"] :is(#step-1, #step-2) .step-nav .btn { width: auto; } html[data-design="d"][data-variante="b4"] :is(#step-1, #step-2) .step-nav .btn-outline { flex: none; padding: 0 18px; } html[data-design="d"][data-variante="b4"] :is(#step-1, #step-2) .step-nav .btn-primary { flex: 1 1 auto; padding: 0 16px; } } /* ---------- Schritt 3: Fotos, Nächte, Fuß ---------- Bildnachweis und Stempel waren zwei gleich laute weiße Pillen. Der Nachweis rückt nach unten rechts, kleiner und leiser; der Stempel bleibt die Pille. */ html[data-design="d"][data-variante="b4"] #step-3 .d2s-zeile :where(.img-wiki-credit):is(.img-wiki-credit, .img-wiki-credit.img-credit-sm), html[data-design="d"][data-variante="b4"] #step-3 .d2s-zeile .img-wiki-credit.img-credit-sm { left: auto; right: 6px; padding: 1px 5px; border-radius: 3px; background: rgba(var(--d-flaeche-rgb), .74); font-size: 11px; font-weight: 500; } /* Nächte: Plus und Minus am Handy mit 40 px Tippfläche (vorher 30) */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] #step-3 .vmk-card-nights-btn { min-width: 40px; min-height: 40px; } } /* Am Desktop lag die feste Leiste über der letzten Zeile des Fußes (Quellen) */ @media (min-width: 769px) { html[data-design="d"][data-variante="b4"][data-planschritt="3"] .site-footer { padding-bottom: 96px; } } /* ===================================================== ERGEBNISSEITE (08.10.2026) Durchsicht aus Nutzersicht wie bei den Planungsschritten. Texte tauscht begriffe() in js/design-b4-start.js, Bausteine des D-Designs stehen in js/results.js. ===================================================== */ /* „Bevor du buchst“ sah aus wie Fließtext: der Pfeil entfällt im neuen Design, die Unterstreichung kam nur beim Darüberfahren (am Handy nie). Jetzt eine Kachel mit einer sichtbaren Aktion „Liste öffnen“. */ html[data-design="d"][data-variante="b4"] .bplan-teaser-btn { padding: 16px 20px; background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); } html[data-design="d"][data-variante="b4"] .bplan-teaser-btn:hover { background: var(--b4-k-an); } html[data-design="d"][data-variante="b4"] .bplan-teaser-btn::after { content: "Liste öffnen"; justify-self: start; margin-top: 8px; font-size: 15.5px; 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; } /* Werkzeuge am Ende (Speichern, Kalender, Für unterwegs, Packliste, Reise-Almanac): am Handy eine Liste über die volle Breite statt zweier Spalten mit Symbol und Satz (Abschnitt 9); die ganze Zeile ist die Tippfläche */ html[data-design="d"][data-variante="b4"] .d2-werkzeuge .finale-act-d { font-size: 13.5px; } /* Lesetext ab 13,5 px (Werkbank, Vorschläge in der Nähe, PDF-Optionen lagen bei 12,8 bis 13) */ html[data-design="d"][data-variante="b4"] #step-5 .adjust-suggest-names, html[data-design="d"][data-variante="b4"] #step-5 .suggestion-meta, html[data-design="d"][data-variante="b4"] #step-5 .finale-pdf-opt-meta { font-size: 13.5px; } html[data-design="d"][data-variante="b4"] #step-5 .wb-label { font-size: 14px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .d2-werkzeuge { grid-template-columns: minmax(0, 1fr); column-gap: 0; } html[data-design="d"][data-variante="b4"] .d2-werkzeuge .fz-action { align-items: center; padding: 14px 0; border-bottom: 1px solid var(--d-line); } } /* Perlenleiste am Handy und Tablet: Der gelesene Stopp war nur am etwas dickeren Ring zu erkennen. Die übrigen Perlen tragen jetzt einen feinen Rand, die gelesene den Ring in Tinte und wird größer (Prüfung 08.10.2026). */ @media (max-width: 1024px) { html[data-design="d"][data-variante="b4"] .d2-perle { box-shadow: 0 0 0 2px var(--d-flaeche), 0 0 0 3.25px var(--d-line-stark); } html[data-design="d"][data-variante="b4"] .d2-perle-knopf.is-aktiv .d2-perle { transform: scale(1.12); box-shadow: 0 0 0 2px var(--d-flaeche), 0 0 0 4.5px var(--d-tinte); } } /* ===================================================== ERGEBNISSEITE, ZWEITE DURCHSICHT (10.10.2026) Zwei Prüfer ohne Vorwissen (Desktop, Handy) und eine Klickprobe mit echten Eingaben. Bausteine in js/results.js (_d2TageHtml, _d2UebernachtenHtml, selectStop und showOverview, _d2Faktensatz, _d2PerlenHtml, _D2_KAPITEL); Grund-CSS des Tagesplans in design-d-ergebnis.css. ===================================================== */ /* Faktensatz im Kopf: Reisezeit und Betrag führen zu ihren Kapiteln */ html[data-design="d"][data-variante="b4"] .d2-fakt-link { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, text-underline-offset .2s ease; } html[data-design="d"][data-variante="b4"] .d2-fakt-link:hover { text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] .d2-fakt-link:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } /* Detailansicht eines Stopps als eigene Ansicht (selectStop setzt .d2-detail-offen): Buch, Karte und Kapitel treten zurück, „Zur Route“ führt ins Kapitel des Stopps zurück */ html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen :where(.optionb-layout):is(.optionb-layout, #route-overview), html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen #route-overview, html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen #transport-container, html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen #family-container, html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen #route-adjust-container, html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen :where(.handbook):is(.handbook, #route-overview), html[data-design="d"][data-variante="b4"] #step-5.d2-detail-offen :where(.finale-zone):is(.finale-zone, #route-overview) { display: none; } /* Zeilen, die eine Ansicht öffnen (Route ändern, Werkzeuge am Ende): Titel in der Farbe der Textknöpfe mit Strich. Ohne Pfeil (Abschnitt 9) sahen sie aus wie Listenpunkte. */ html[data-design="d"][data-variante="b4"] :is(.d2-fs-weg .d2-fs-t), html[data-design="d"][data-variante="b4"] :is(.d2-werkzeuge .finale-act-t) { color: var(--b4-tinte); font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); } html[data-design="d"][data-variante="b4"] :where(.d2-fs-weg:hover .d2-fs-t):is(.d2-fs-weg:hover .d2-fs-t, .d2-werkzeuge .fz-action:hover .finale-act-t), html[data-design="d"][data-variante="b4"] :is(.d2-werkzeuge .fz-action:hover .finale-act-t) { color: var(--b4-tinte); text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] #d2-buchen, html[data-design="d"][data-variante="b4"] #d2-mitnehmen { scroll-margin-top: calc(var(--header-h, 56px) + 76px); } /* Desktop: Die Perlenleiste klebt wie am Handy unter dem Kopf. Ihr Kopf trägt die Kapitel als Textlinks (ab 1280 px auch den gelesenen Stopp); beim Lesen bleibt nur er stehen, die Karte daneben zeigt den Stopp. Vorher gab es während der Route keinen Weg zu Kosten oder Buchen. */ @media (min-width: 1025px) { html[data-design="d"][data-variante="b4"] .d2-perlen { position: sticky; top: var(--header-h, 56px); z-index: 30; margin-top: var(--d-a6); padding: 0 0 1px; background: var(--d-grund); border-bottom: 1px solid transparent; clip-path: inset(0 0 -420px 0); transition: clip-path .22s ease; } html[data-design="d"][data-variante="b4"] .d2-perlen.is-klebt { border-bottom-color: var(--d-line); } html[data-design="d"][data-variante="b4"] .d2-perlen.is-knapp { clip-path: inset(0 0 calc(100% - 50px) 0); } html[data-design="d"][data-variante="b4"] .d2-perlen.is-knapp .d2-perlen-kopf { box-shadow: 0 1px 0 var(--d-line); } html[data-design="d"][data-variante="b4"] .d2-perlen .d2-perlen-zeile { transition: opacity .15s ease; } html[data-design="d"][data-variante="b4"] .d2-perlen.is-knapp .d2-perlen-zeile { opacity: 0; pointer-events: none; } html[data-design="d"][data-variante="b4"] .d2-perlen-kopf { display: flex; align-items: center; gap: var(--d-a5); min-height: 48px; } html[data-design="d"][data-variante="b4"] .d2-perlen-ort { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; line-height: 1.3; color: var(--d-tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-design="d"][data-variante="b4"] .d2-perlen-ort b { font-weight: 700; } html[data-design="d"][data-variante="b4"] .d2-perlen-ort span { font-weight: 400; color: var(--d-tinte-hell); } html[data-design="d"][data-variante="b4"] .d2-perlen-ziele { display: flex; flex: none; gap: var(--d-a5); margin: 0 0 0 auto; font-size: 15px; } html[data-design="d"][data-variante="b4"] .d2-perlen-ziele a { padding: 13px 0; line-height: 20px; white-space: nowrap; color: var(--b4-tinte); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--b4-unterstrich); } html[data-design="d"][data-variante="b4"] .d2-perlen-ziele a:hover { text-decoration-color: var(--b4-marker); text-decoration-thickness: .42em; text-underline-offset: -.24em; text-decoration-skip-ink: none; } html[data-design="d"][data-variante="b4"] .d2-perlen-ziele a:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 2px; border-radius: 2px; } html[data-design="d"][data-variante="b4"] .d2-perlen-kopf .d2-sprung, html[data-design="d"][data-variante="b4"] .d2-perlen-kopf .d2-perlen-karte { display: none; } html[data-design="d"][data-variante="b4"] .optionb-stopcard.d2-kapitel { scroll-margin-top: calc(var(--header-h, 56px) + 64px); } /* Kosten laufen neben der längeren Reisezeit mit, statt eine leere Spalte zu lassen. Der Container füllt seine Rasterzeile, mitlaufen darf nur sein Inhalt: Ein klebendes Rasterkind wanderte bis in die Hinweise darunter. */ html[data-design="d"][data-variante="b4"] .handbook-inner > #budget-container { align-self: stretch; } html[data-design="d"][data-variante="b4"] .handbook-inner > #budget-container > .d2-kosten { position: sticky; top: calc(var(--header-h, 56px) + 76px); } /* Abschluss: links die Buchungsliste, rechts PDF und Teilen übereinander (vorher drei Spalten, zwei davon nach einem Drittel der Höhe leer) */ /* Zeilen auto und 1fr: Die Höhe von „Buchen und vorbereiten“ (über beide Zeilen) verteilte sich auf beide, unter „PDF erstellen“ standen 110 px leer bis „Teilen“ (Feinheiten 17.10.2026) */ html[data-design="d"][data-variante="b4"] .d2-ab-raster:not(.d2-ohne-buchen) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; row-gap: 0; } html[data-design="d"][data-variante="b4"] .d2-ab-raster:not(.d2-ohne-buchen) > .d2-ab-buchen { grid-column: 1; grid-row: 1 / span 2; } html[data-design="d"][data-variante="b4"] .d2-ab-raster:not(.d2-ohne-buchen) > .d2-ab-pdf { grid-column: 2; grid-row: 1; padding-bottom: var(--d-a6); } html[data-design="d"][data-variante="b4"] .d2-ab-raster:not(.d2-ohne-buchen) > .d2-ab-teilen { grid-column: 2; grid-row: 2; padding-top: var(--d-a6); border-top: 1px solid var(--d-line); } } @media (min-width: 1025px) and (max-width: 1279px) { html[data-design="d"][data-variante="b4"] .d2-perlen-ort { display: none; } } /* Hinweise zu deiner Route: zwei oder vier Einträge im Zweierraster statt 3 + 1 */ @media (min-width: 769px) { html[data-design="d"][data-variante="b4"] .d2-hinweise-liste:is(:has(> li:nth-child(4):last-child), :has(> li:nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Handy: Fuß in zwei Spalten wie am Desktop (eine Spalte füllte mehr als zwei Bildschirme); PDF-Umfang unter dem Titelblatt statt daneben */ @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .site-footer-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: var(--d-a5); row-gap: 0; align-items: start; justify-items: start; } html[data-design="d"][data-variante="b4"] .site-footer-nav > * { grid-column: 1; } /* ~ .site-footer-link statt ~ *: Ein rechtes Glied * prüft der Browser an jedem Element der Seite, samt Gang über alle Geschwister davor (nach den Titeln stehen auf allen Seiten nur Links) */ html[data-design="d"][data-variante="b4"] .site-footer-nav-title ~ .site-footer-nav-title, html[data-design="d"][data-variante="b4"] .site-footer-nav-title ~ .site-footer-nav-title ~ .site-footer-link { grid-column: 2; } html[data-design="d"][data-variante="b4"] .site-footer-nav-title { margin: 0 0 4px !important; } html[data-design="d"][data-variante="b4"] .site-footer-nav a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 6px; line-height: 1.3; } } @media (max-width: 479px) { html[data-design="d"][data-variante="b4"] .d2-ab-pdf-reihe { flex-direction: column; } html[data-design="d"][data-variante="b4"] .d2-ab-pdf-wahl { width: 100%; } } /* ===================================================== DIALOGE, DETAILANSICHT, LADEANSICHT (10.10.2026) Durchsicht der Dialoge aus Nutzersicht wie Ergebnisseite und Planungsschritte. Köpfe ohne Überzeile mit Strich (js/design-b4-start.js dialogKopf: die Überschrift sagt, was der Dialog tut, die Zeile darunter Route oder Eckdaten), eine Titelgröße für alle. Die Detailansicht eines Stopps ist gebaut wie sein Kapitel (Results._d2DetailHtml): Foto ohne Schrift, Kopf mit Nummer, keine Abschnittsnummern, Nachbarstopps mit ihrer Etappe. Die Ladeansicht: weiße Seite, Fotos ohne Korn und Vignette, Bildzeile als Tafel statt Schrift auf dem Foto, kein Zoomen des Fotos. ===================================================== */ html[data-design="d"][data-variante="b4"] :where(.share-rich-kicker):is(.share-rich-kicker, .sfm-modal--editor .sfm-kicker), html[data-design="d"][data-variante="b4"] :where(.auth-modal-kick):is(.auth-modal-kick, .sfm-modal--editor .sfm-kicker), html[data-design="d"][data-variante="b4"] :where(.bplan-kick):is(.bplan-kick, .sfm-modal--editor .sfm-kicker), html[data-design="d"][data-variante="b4"] :where(.packlist-kick):is(.packlist-kick, .sfm-modal--editor .sfm-kicker) { display: none; } html[data-design="d"][data-variante="b4"] :where(.share-rich-h):is(.share-rich-h, #packlist-h), html[data-design="d"][data-variante="b4"] :where(.auth-modal-title):is(.auth-modal-title, #packlist-h), html[data-design="d"][data-variante="b4"] :where(.bplan-title):is(.bplan-title, #packlist-h), html[data-design="d"][data-variante="b4"] #packlist-h, html[data-design="d"][data-variante="b4"] :where(.sfm-modal--editor .sfm-title):is(.sfm-modal--editor .sfm-title, #packlist-h) { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] :is(.share-rich-h, .bplan-title, #packlist-h) em { font-style: normal; color: inherit; } html[data-design="d"][data-variante="b4"] :where(.share-rich-sub):is(.share-rich-sub, .sfm-modal--editor .sfm-lede), html[data-design="d"][data-variante="b4"] :where(.bplan-eck):is(.bplan-eck, .sfm-modal--editor .sfm-lede), html[data-design="d"][data-variante="b4"] :where(.packlist-eck):is(.packlist-eck, .sfm-modal--editor .sfm-lede), html[data-design="d"][data-variante="b4"] :where(.auth-modal-msg):is(.auth-modal-msg, .sfm-modal--editor .sfm-lede), html[data-design="d"][data-variante="b4"] :is(.sfm-modal--editor .sfm-lede) { margin: 6px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--b4-grau); } /* Abstand zum Schließen-Kreis wie der Titel (steps.css): Die lange Zeile von „Für unterwegs“ lief am Handy unter den Kreis (18.10.2026) */ html[data-design="d"][data-variante="b4"] .bplan-head .bplan-eck { padding-right: 44px; } /* „Orte einzeln“, „Nur die Wege über Land“: 0,72 rem aus steps.css lag unter der Mindestgröße */ html[data-design="d"][data-variante="b4"] .rnav-sub { font-size: 12px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] :where(.share-rich-h):is(.share-rich-h, #packlist-h), html[data-design="d"][data-variante="b4"] :where(.auth-modal-title):is(.auth-modal-title, #packlist-h), html[data-design="d"][data-variante="b4"] :where(.bplan-title):is(.bplan-title, #packlist-h), html[data-design="d"][data-variante="b4"] #packlist-h, html[data-design="d"][data-variante="b4"] :where(.sfm-modal--editor .sfm-title):is(.sfm-modal--editor .sfm-title, #packlist-h) { font-size: 23px; } } /* Vorschau der teilbaren Karte: ohne Schatten (Abschnitt 9), feine Kante wie Fotos */ html[data-design="d"][data-variante="b4"] .share-preview-render { box-shadow: 0 0 0 1px var(--b4-linie); } /* --- Detailansicht eines Stopps --- */ html[data-design="d"][data-variante="b4"] .d2-detail-leiste { background: var(--d-grund); border-top: 0; border-bottom: 1px solid var(--b4-linie); box-shadow: none; gap: 16px; } html[data-design="d"][data-variante="b4"] .d2-detail-leiste .dtn-back { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .d2-detail-leiste .dtn-hier .ort { font-family: inherit; font-size: 17px; font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-detail-leiste .dtn-hier .zaehler { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .d2-detail-leiste .dtn-step { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .d2-detail { margin-top: 24px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; font-family: inherit; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .d2-detail::after { content: none; } html[data-design="d"][data-variante="b4"] .d2-detail-foto { height: clamp(240px, 38vw, 440px); border-radius: var(--d-r-foto); background-color: var(--d-kiesel); box-shadow: inset 0 0 0 1px rgba(23, 58, 46, .09); } html[data-design="d"][data-variante="b4"] .d2-detail-foto::after { content: none; } html[data-design="d"][data-variante="b4"] .d2-detail-foto .detailv2-hero-attr { right: 10px; bottom: 10px; } /* Quellen auf Fotos: in beiden Modi dunkle Plakette mit heller Schrift, das Foto bleibt ein Foto. Die automatische Umfärbung für den dunklen Modus machte die Plakette hell (Creme 62 %), die Schrift blieb weiß: 2,4 : 1 in der Detailansicht (pruefen.js, 13.10.2026). */ html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .img-wiki-credit, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .detailv2-hero-attr, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .suggestion-photo-attr, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .magspread-photo-attr, html[data-design="d"][data-variante="b4"][data-modus="dunkel"] .tb-stop-photo-attr { background: rgba(23, 58, 46, .72); color: rgba(255, 255, 255, .95); } html[data-design="d"][data-variante="b4"] .d2-detail-teil { margin-top: 40px; } html[data-design="d"][data-variante="b4"] .d2-detail-h { margin: 0 0 16px; font-size: var(--d-fs-zwischen); line-height: 1.2; font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; } html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse > li:only-child { grid-column: 1 / -1; max-width: 62ch; } html[data-design="d"][data-variante="b4"] .d2-erlebnis .detailv2-fig { aspect-ratio: 4 / 3; border-radius: var(--d-r-foto); background: var(--d-kiesel); } html[data-design="d"][data-variante="b4"] .d2-erlebnis h4 { margin: 12px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-erlebnis p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen { margin-top: 40px; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .detailv2-sec { padding: 0; margin: 0; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .detailv2-sechead { margin: 0 0 14px; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .detailv2-sechead .no, html[data-design="d"][data-variante="b4"] .d2-detail-buchen .detailv2-sechead .rule { display: none; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .detailv2-sechead .t { font-family: inherit; font-size: var(--d-fs-zwischen); font-weight: 800; letter-spacing: 0; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-loc { margin: 0 0 14px; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-loc-ico, html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-ico { display: none; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-loc-label { font-size: 15.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-loc-val { font-size: 15.5px; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-card { gap: 6px; padding: 16px 18px; background: var(--b4-lavur); border: 0; border-radius: var(--d-r-flaeche); box-shadow: none; transform: none; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-card:hover { background: var(--b4-k-an); box-shadow: none; transform: none; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-card-head b { font-size: 17px; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-card-sub { font-size: 14px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-cta { padding: 0; border: 0; border-radius: 0; background: none; color: var(--b4-tinte); font-size: 15.5px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--b4-unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-cta > span[aria-hidden] { display: none; } html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-card-prov, html[data-design="d"][data-variante="b4"] .d2-detail-buchen .aff-note { font-size: 13.5px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .d2-detail-nachbarn { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--b4-linie); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } html[data-design="d"][data-variante="b4"] .d2-detail-nachbar.next:first-child { grid-column: 2; } html[data-design="d"][data-variante="b4"] .d2-detail-weiter { display: grid; gap: 2px; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--b4-tinte); } html[data-design="d"][data-variante="b4"] .d2-detail-weiter small { font-size: 14px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .d2-detail-weiter span { font-size: 20px; font-weight: 800; 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"] .d2-detail-weiter:focus-visible { outline: 2.5px solid var(--b4-tinte); outline-offset: 3px; border-radius: 4px; } html[data-design="d"][data-variante="b4"] .d2-detail-nachbar .d2-etappe-text { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; margin-top: 12px; font-size: 15px; } html[data-design="d"][data-variante="b4"] .d2-detail-nachbar .d2-etappe-text > :not(.d2-detail-symbol) { grid-column: 2; } html[data-design="d"][data-variante="b4"] .d2-detail-symbol { grid-row: 1 / span 3; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--b4-text); display: grid; place-items: center; color: var(--b4-text); background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .d2-detail-symbol svg { width: 16px; height: 16px; } html[data-design="d"][data-variante="b4"] .d2-detail-nachbar .d2-link { justify-self: start; margin-top: 4px; font-size: 15px; } html[data-design="d"][data-variante="b4"] .d2-detail-fuss { margin: 32px 0 8px; display: flex; flex-wrap: wrap; gap: 12px 28px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse, html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse:has(> li:nth-child(4):last-child), html[data-design="d"][data-variante="b4"] .d2-detail-erlebnisse:has(> li:nth-child(2):last-child), html[data-design="d"][data-variante="b4"] .d2-detail-nachbarn { grid-template-columns: minmax(0, 1fr); } html[data-design="d"][data-variante="b4"] .d2-detail-nachbar.next:first-child { grid-column: auto; } html[data-design="d"][data-variante="b4"] .d2-detail { padding: 0 var(--d-seite); } html[data-design="d"][data-variante="b4"] .d2-detail-foto { margin: 0 calc(var(--d-seite) * -1); border-radius: 0; } } /* --- Mindestschrift in Dialogen (Abschnitt 3: Oberfläche ab 12 px) --- Teilen, Buchen und vorbereiten, Packliste und Anmelden kamen erst am 11.10.2026 in pruefen.js; ihre Kleinschrift (10 bis 11,5 px) stammte aus dem Live-Design. Feldbeschriftungen und Gruppentitel wie in den übrigen Formularen des Designs. */ html[data-design="d"][data-variante="b4"] .bplan-sheet label[for="bplan-start-in"] { font-size: 14px; } html[data-design="d"][data-variante="b4"] .bplan-sheet .aff-note { font-size: 13px; } html[data-design="d"][data-variante="b4"] .packlist-modal h4 { font-size: 14px; } html[data-design="d"][data-variante="b4"] .auth-modal .auth-field > span { font-size: 14px; } html[data-design="d"][data-variante="b4"] .auth-modal .auth-legal { font-size: 13px; } /* --- PDF-Erstellung: Hinweis über der Seite (js/pdf-export.js setzt Farben und Schriften inline, deshalb !important). Wie die Ladeansicht: Fläche, Kreisel in Tinte auf Kiesel, Titel fett. Vorher Terrakotta-Kreisel und Serife des Live-Designs (User 11.10.2026). --- */ html[data-design="d"][data-variante="b4"] #pdf-export-overlay { background: rgba(var(--d-tinte-rgb), .45) !important; } html[data-design="d"][data-variante="b4"] #pdf-export-overlay > div { background: var(--d-flaeche) !important; border-radius: var(--d-r-flaeche) !important; font-family: 'Alegreya Sans', system-ui, sans-serif !important; } html[data-design="d"][data-variante="b4"] #pdf-export-overlay > div > div:first-child { border-color: var(--b4-lavur) !important; border-top-color: var(--b4-text) !important; } html[data-design="d"][data-variante="b4"] #pdf-export-overlay > div > div:nth-child(2) { font-family: inherit !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--b4-titel) !important; } html[data-design="d"][data-variante="b4"] #pdf-export-text { font-size: 16px !important; color: var(--b4-grau) !important; } /* --- Ladeansicht --- */ html[data-design="d"][data-variante="b4"] .loading-stage, html[data-design="d"][data-variante="b4"] .loading-left { background: var(--d-grund); border-color: var(--b4-linie); } html[data-design="d"][data-variante="b4"] .l-kicker { display: none; } html[data-design="d"][data-variante="b4"] .l-title { font-family: inherit; font-size: clamp(30px, 3.2vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .l-meta { gap: 0; font-size: 15.5px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .l-meta .sep { display: none; } html[data-design="d"][data-variante="b4"] .l-meta strong { font-weight: 500; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .l-meta strong:not([hidden]) ~ strong:not([hidden])::before { content: ", "; } html[data-design="d"][data-variante="b4"] .meter-head { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .meter-head .pct, html[data-design="d"][data-variante="b4"] .meter-head .pct em { font-family: inherit; font-style: normal; font-weight: 800; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .meter-bar { background: var(--b4-lavur); } html[data-design="d"][data-variante="b4"] .meter-fill { background: var(--b4-text); } html[data-design="d"][data-variante="b4"] .meter-time-hint, html[data-design="d"][data-variante="b4"] .meter-long-hint { font-size: 14px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .phase .ph-name { font-family: inherit; font-size: 16px; font-weight: 700; color: var(--b4-titel); } html[data-design="d"][data-variante="b4"] .phase.pending .ph-name { color: var(--b4-grau); font-weight: 500; } html[data-design="d"][data-variante="b4"] .ph-detail { font-size: 14px; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .ph-icon { background: var(--d-grund); border: 1.5px solid var(--b4-k-rand); color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .phase.active .ph-icon { border-color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .phase.active .ph-icon svg { color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .phase.done .ph-icon { background: var(--b4-text); border-color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .phase.done .ph-icon svg { color: var(--d-grund); } html[data-design="d"][data-variante="b4"] .loading-right { background: var(--d-kiesel); } html[data-design="d"][data-variante="b4"] .loading-grain, html[data-design="d"][data-variante="b4"] .loading-vignette { display: none; } html[data-design="d"][data-variante="b4"] .loading-photo.on { animation: none; } html[data-design="d"][data-variante="b4"] .loading-photo-cap { left: 24px; right: 24px; bottom: 24px; align-items: flex-end; color: var(--b4-text); } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-left { max-width: min(440px, 72%); padding: 16px 20px; border-radius: var(--d-r-flaeche); background: var(--d-grund); } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-kick { margin: 0 0 4px; font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--b4-grau); } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-kick .lbar { display: none; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-title { font-family: inherit; font-style: normal; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: 0; color: var(--b4-titel); text-shadow: none; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-title em { font-style: normal; color: inherit; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-fact { font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--b4-text); text-shadow: none; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-fact strong { color: var(--b4-titel); font-weight: 700; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-attr { padding: 3px 8px; border-radius: 4px; background: rgba(23, 58, 46, .8); font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: #FFFFFF; line-height: 1.35; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-attr strong { color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .pdots span { background: rgba(255, 255, 255, .55); } @media (max-width: 900px) { html[data-design="d"][data-variante="b4"] .loading-photo-cap { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 8px; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-left { max-width: none; } html[data-design="d"][data-variante="b4"] .loading-photo-cap .pc-right { align-items: flex-end; } } @media (prefers-reduced-motion: reduce) { html[data-design="d"][data-variante="b4"] .loading-photo { transition: none; } } /* ===================================================== TEILEN-BILDER: Story-Set und Karussell (Studio, js/studio.js; 10.10.2026) Studio zeichnet die Bilder nach dem Titelbild aus HTML mit html2canvas. js/design-b4-marke.js schreibt das Markup vorher um (Wortmarke und routaris.com als Bild, „Stopp 3 von 5“, Land als Schild, keine Unter-Marke). Die Bilder sind in beiden Modi gleich: Papier weiß, Schrift Fichte. Storys (9:16) halten die Sicherheitszone: Lesbares in x 96–984 und y 250–1670. html2canvas kennt kein filter, deshalb Schatten nur als text-shadow und dunklere Verläufe. ===================================================== */ html[data-design="d"][data-variante="b4"] .rts-frame { --cream: #FFFFFF; --cream-soft: #FFFFFF; --ink: #173A2E; --ink-muted: #4B6259; --terracotta: #2B6E55; --font-display: 'Alegreya Sans', system-ui, sans-serif; --font-body: 'Alegreya Sans', system-ui, sans-serif; background: #FFFFFF; color: #173A2E; } html[data-design="d"][data-variante="b4"] .rts-frame img.rts-auf-papier { display: block; } html[data-design="d"][data-variante="b4"] .rts-frame img.rts-auf-foto { display: none; } html[data-design="d"][data-variante="b4"] .rts-frame :is(.rts-onphoto, .rts-lt) img.rts-auf-foto { display: block; } html[data-design="d"][data-variante="b4"] .rts-frame :is(.rts-onphoto, .rts-lt) img.rts-auf-papier { display: none; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-markenkopf { line-height: 0; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-marke { width: auto; height: 57px; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-head { align-items: center; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-land { display: block; flex: none; } /* Farben für die als Bild gezeichneten Teile (Schild), gelesen von js/design-b4-marke.js */ html[data-design="d"][data-variante="b4"] .rts-stage { --rts-papier: #FFFFFF; --rts-flaeche: #EDF4F1; --rts-schrift: #173A2E; } /* Stopp auf dem Foto */ html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcscrimtop { height: 420px; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcbody .rts-kick { font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #FFFFFF; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcbody .rts-city { font-weight: 800; letter-spacing: -.01em; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcbody .rts-meta { font-size: 30px; font-weight: 500; line-height: 1.45; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcbody .rts-meta b { display: block; font-weight: 800; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcbody .rts-meta .rts-tag { display: block; margin-top: 4px; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-sig .rts-sigpre { font-family: 'Alegreya Sans', system-ui, sans-serif; font-style: normal; font-size: 26px; font-weight: 500; color: #4B6259; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-lt .rts-sigpre { color: #FFFFFF; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); } html[data-design="d"][data-variante="b4"] .rts-frame .rts-sigmarke { width: auto; height: 43px; margin-top: 14px; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-b2cta .rts-sigmarke { margin: 8px auto 0; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-credit { font-family: 'Alegreya Sans', system-ui, sans-serif; font-size: 18px; letter-spacing: 0; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mccredit { color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); } /* Collage der weiteren Stopps: Fotos auf Papier, weiße Fugen */ html[data-design="d"][data-variante="b4"] .rts-frame .rts-b2 { background: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-b2h { font-weight: 800; letter-spacing: -.01em; color: #173A2E; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-b2sub { font-size: 26px; color: #4B6259; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mosaic { gap: 8px; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcity { font-weight: 800; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mliner { font-size: 24px; color: #FFFFFF; } html[data-design="d"][data-variante="b4"] .rts-frame .rts-mcredit { font-size: 16px; color: #4B6259; } /* Story 9:16: Sicherheitszone */ html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-head { top: 250px; left: 96px; right: 96px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-mcbody { left: 96px; right: 96px; bottom: 250px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-mccredit { right: 96px; bottom: 250px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-b2top { padding: 250px 96px 30px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-mosaic { margin: 0 72px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-badge { top: 24px; left: 24px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-b2cta { padding: 30px 96px 250px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r916 .rts-mcredit { right: 96px; } html[data-design="d"][data-variante="b4"] .rts-frame.rts-r45 .rts-b2cta { padding: 26px 24px 40px; } /* ===================================================== KOPFZEILE AM HANDY BEIM LESEN (10.10.2026) js/design-b4-start.js (kopfRollen) setzt .d-kopf-weg an , sobald man abwärts liest. Der Kopf gleitet nach oben weg, und die Leisten, die darunter andocken (Kapitelleiste Ergebnis und Porträt, Perlenleiste, Schrittleiste), rücken mit ihrem eigenen top nach. Nie --header-h an umschalten oder animieren (15.10.2026): Den Wert erbt jedes Element, jeder Richtungswechsel rechnete den Stil der ganzen Seite zwei- bis dreimal neu (am Handy 0,3 s je Rechnung, Startseite 1,7 bis 2,7 s Stocken je Wisch ab und auf). Neue Leisten, die am Kopf andocken, gehören in beide Listen hier und in die .d-kopf-klein-Liste in css/design-d.css. ===================================================== */ @property --header-h { syntax: ''; inherits: true; initial-value: 56px; } @media (max-width: 768px) { html[data-design="d"][data-variante="b4"] .site-header { transition: transform .2s ease, border-color .2s ease; } html[data-design="d"][data-variante="b4"].d-kopf-weg .site-header { transform: translateY(-100%); } html[data-design="d"][data-variante="b4"].d-kopf-weg .routaris-stepper, html[data-design="d"][data-variante="b4"].d-kopf-weg .d2-perlen, html[data-design="d"][data-variante="b4"].d-kopf-weg .d2-kl, html[data-design="d"][data-variante="b4"].d-kopf-weg .pt-leiste { --header-h: 0px; } html[data-design="d"][data-variante="b4"] .d2-perlen { transition: clip-path .22s ease, top .2s ease; } html[data-design="d"][data-variante="b4"] .d2-kl, html[data-design="d"][data-variante="b4"] .pt-leiste { transition: top .2s ease; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { html[data-design="d"][data-variante="b4"] .site-header, html[data-design="d"][data-variante="b4"] .d2-perlen, html[data-design="d"][data-variante="b4"] .d2-kl, html[data-design="d"][data-variante="b4"] .pt-leiste { transition: none; } }