/* ---- Phase 7: Schriften (selbst gehostet, OFL, Latin-Subset; Spec § 3.2) ---------- Preload-href in App.razor ≡ diese url() (Ruling R3). Nie von einer fremden Schrift-CDN laden — die CSP (font-src 'self') verbietet es; siehe tools/fonts/README.md. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-serif-4-600-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-var-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metrik-angepasste lokale Fallbacks (tools/fonts/metrics.py, Ruling R5): */ @font-face { font-family: "Konformo Serif Fallback"; src: local("Georgia"); size-adjust: 119.11%; ascent-override: 86.98%; descent-override: 28.13%; line-gap-override: 0%; } @font-face { font-family: "Konformo Sans Fallback"; src: local("Arial"); size-adjust: 120.75%; ascent-override: 84.89%; descent-override: 22.77%; line-gap-override: 0%; } /* ---- Phase 7: Design-Tokens (Spec § 3.1) — EIN :root-Block, hell-only (D4) -------- */ :root { --papier: #fbfaf7; --flaeche: #ffffff; --tinte: #1f2a24; --tinte-2: #4b5563; --marke: #1f4d3a; --marke-dunkel: #173d2e; --marke-hell: #edf3ef; --akzent: #b5552d; --akzent-hell: #fff7f2; --akzent-dunkel: #7a3a1c; --rand: #e6e2d8; /* Trennlinien-Pass 2026-09-26 (Stefan: „make the line beyond the header menu and the line above the footer and the line above the zurück/weiter in the check a little bit more visible"): die Linie der Kopfzeile, des Fußes, der Menütafel und des Wizard-Streifens — eine Stufe dunkler als --rand (1,55:1 statt 1,24:1 auf Papier); seit der zweiten Runde (Stefan: „make the line also a little bit thicker") 2 px — ein ganzer CSS-Pixel (KP1; Ränder rasten auf Gerätepixel, 1,5 px wären bei 100 % unverändert), die Deckel --kopf-hoehe sind um 1 px angehoben. Jede andere Linie behält --rand, 1 px. */ --rand-stark: #d2cbbd; /* Scroll-Schatten (2026-09-26, Stefan: „when scrolled down sometimes i dont know that there is content behind/above the header"): der Schatten der haftenden Leisten ist die Tinte (#1f2a24) mit Alpha; er liegt nur, während Inhalt hinter der Leiste ist (Scroll-Timeline, Block hinter der Wizard-Leiste). */ --schatten: rgba(31, 42, 36, 0.12); --fehler: #8a1c1c; --fehler-hell: #fbecec; --schrift-serif: "Source Serif 4", "Konformo Serif Fallback", Georgia, "Times New Roman", serif; --schrift-sans: "IBM Plex Sans", "Konformo Sans Fallback", system-ui, "Segoe UI", Roboto, sans-serif; --raum-1: 0.5rem; --raum-2: 1rem; --raum-3: 1.5rem; --raum-4: 2rem; --raum-5: 3rem; --raum-6: 4rem; /* Spaltenabstand der Kopfleiste (Stefan 2026-09-22: „a little bit more space … on bigger resolutions"): Untergrenze die früheren 1.5rem, bei 1920 px rund 31 px, bei 2560 px rund 37 px. Als Token, weil die Fußleiste drei davon in ihre Breite rechnet. */ --kopf-abstand: clamp(1.5rem, 0.75rem + 1vw, 3rem); --radius-s: 4px; --radius-m: 8px; color-scheme: only light; } * { box-sizing: border-box; } /* Die Rinne der Bildlaufleiste ist auf JEDER Seite reserviert: sonst wechselt die Layoutbreite zwischen langen und kurzen Seiten, und alles Zentrierte (Kopfnavigation, Spalte) springt um die halbe Leistenbreite. */ /* Jedes Sprungziel landet UNTER der haftenden Kopfzeile (2026-09-23): Ankerlinks der Inhaltsseiten, der Skip-Link, der Fokus auf „Schritt n" — scroll-padding gilt jedem Scrollen-ins-Bild. --kopf-hoehe ist der Deckel der Kopfhöhe: in CSS nicht ausdrückbar (drei Schriftgrößen an EINER Grundlinie); 86,8 px bei 1920 × 1080 sind ihr Maximum (seit der 2-px-Linie 2026-09-26, davor 85,8) — Polster und Schriften deckeln bei 1800 / 1200 px (gemessen, Chromium, gebündelte Schriften). Auf /check misst check-boot.js sie und überschreibt das Token auf . Das Token steht auf html, NICHT in :root: der ≤-600-px-Wert (unten) steht ebenfalls auf html — gleiche Spezifität, die Media Query gewinnt nach Reihenfolge; in :root (0,1,0) schlug der Deckel den html-Wert (0,0,1) auf jeder skriptfreien Seite (Hugo-Review 2026-09-23, I-1: Sprungziele am Handy 35 statt 16 px unter der Kopfzeile). */ html { font-size: 100%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; --kopf-hoehe: 5.4375rem; scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-2)); } /* Auf /check, solange die Wizard-Leiste steht: jedes Scrollen-ins-Bild endet ÜBER ihrem Streifen (2026-09-25, Spec wizard-leiste WL4/WL5) — sonst parkt ein Tab-Stopp unter dem haftenden Streifen (Sonde: Fokus-Unterkante 1 076 px bei Streifenoberkante 996 px). Deckel 6,5 rem seit dem Wizard-Kasten (2026-09-26, WK5; davor 5,5 rem): der Kasten misst 103 px bei 1920 × 1080 (Knopfzeile 51 + 2 × --raum-2 + 2 × Rand 2) und schwebt --raum-2 über der Kante — 104 px Deckel; NICHT gemessen wie --kopf-hoehe — nichts muss die Leiste exakt treffen. :has() wie beim Spaltenmaß von /check; ohne Leiste (Ergebnisseite, andere Seiten) kein Polster. */ html:has(.wizard-nav-sticky) { --wizard-leiste-hoehe: 6.5rem; scroll-padding-bottom: calc(var(--wizard-leiste-hoehe) + var(--raum-2)); } body { margin: 0; font-family: var(--schrift-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--tinte); background: var(--papier); display: flex; min-height: 100vh; flex-direction: column; } @media (max-width: 40rem) { body { font-size: 1rem; } } h1, h2, h3 { font-family: var(--schrift-serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; color: var(--tinte); } h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); margin: 0 0 var(--raum-2); } h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.75rem); margin: var(--raum-5) 0 var(--raum-2); } h3 { font-size: 1.2rem; margin: var(--raum-4) 0 var(--raum-1); } a { color: var(--marke); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--marke-dunkel); } small { font-size: 0.875rem; } /* 2026-09-22 (Stefan): EINE Eyebrow-Größe — Hero, „Schritt n" und „Ihr Ergebnis" wachsen mit dem Viewport (12 → 14 px), ≤ 600 px bleibt die Basisgröße; keine Regel darf sie überschreiben. */ .eyebrow { font-family: var(--schrift-sans); font-size: clamp(0.75rem, 0.65rem + 0.35vw, 0.875rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); margin: 0 0 var(--raum-1); } :focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; } /* ---- Shell: Kopf, Hauptspalte, Fuß (Spec § 4.1) ----------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--marke); color: #fff; padding: var(--raum-1) var(--raum-2); border-radius: 0 0 var(--radius-s) 0; } .skip-link:focus { left: 0; z-index: 10; } /* Senkrechtes Polster um GENAU 0.25rem kleiner als zuvor (0.9rem … 1.15rem → 0.65rem … 0.9rem, gleiche Steigung; Stefan 2026-09-22: „shrink the header height a little" — die Kopfzeile fällt bei 1920 × 1080 von 93 auf 85 px). Der Check-Button behält die Höhe der Seiten-Buttons, deshalb schrumpft das Polster, nicht der Inhalt. WARUM ein ganzer Viertel-rem: das Polster verschiebt die gemeinsame Grundlinie der Kopfzeile; die Unterstreichung der Links (text-decoration) und der gezeichnete Strich der Wortmarke (Hintergrundlinie) rasten verschieden auf das Pixelraster, ein Bruchteil von 4,8 px (Deckel 0.85rem) setzte den Wortmarkenstrich eine Gerätezeile über die Unterstreichung — WortmarkeStrichE2ETests.Strich_DerWortmarke_LiegtAufDerHoeheDerUnterstreichung fiel bei Pixeldichte 1, 1,5 und 2. Ganze CSS-Pixel (4 = 6 = 8 Gerätepixel) lassen beide Zeilen, wie sie waren. Senkrechte Geometrie der Kopfzeile nur in ganzen CSS-Pixeln verschieben. */ /* Die Kopfzeile HAFTET am oberen Rand (Stefan 2026-09-23: „the menu header in the top should be always visible (when scrolling)"): über der Ankerleiste des Ergebnisses (4) und der Wizard-Leiste unten (5), unter dem Skip-Link (10, beim Fokus). Im Druck wieder static (Druckblock). Als positionierter Kasten ist sie zugleich der Bezug der Menütafel ≤ 600 px (top: 100 %). */ .site-header { position: sticky; top: 0; z-index: 6; background: var(--papier); border-bottom: 2px solid var(--rand-stark); padding: clamp(0.65rem, 0.45rem + 0.4vw, 0.9rem) clamp(1rem, 4vw, 3rem); } /* Die Kopfnavigation kommt aus dem SeitenRegister und kann wachsen: sie umbricht, statt den Kopf horizontal zu sprengen. Der Spaltenabstand ist das Token --kopf-abstand (:root) und wächst mit dem Viewport (Stefan 2026-09-22). */ .site-header nav { --kopf-schrift: clamp(1.0625rem, 0.95rem + 0.3vw, 1.175rem); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.5rem var(--kopf-abstand); max-width: 72rem; margin: 0 auto; } /* Nur die Langform text-decoration-line: die Kurzform setzt text-decoration-thickness auf auto zurück (engine-eigen, WebKit 2 px) — die 1 px der Basisregel a gelten auch hier (2026-09-22). Die Schriftgröße der Links ist --kopf-schrift, weil der Strich der Wortmarke sie mitliest. Die Link-Regeln des Kopfes gelten den TEXTLINKS (:not(.cta)): der Menüpunkt des Checks ist seit 2026-09-22 (Stefan) ein Button der Klasse cta wie der Check-CTA der Seiten und sieht GENAU so aus — Farbe, Polster, Schriftgröße, Schweben allein aus .cta, keine eigene Kopfregel; als aktuelle Seite trägt er weder Unterstreichung noch eine andere Füllung („no darker hover on selection and also no underline when at betroffenheitscheck"). Schlügen die Kopfregeln (0,1,2) das .cta (0,1,0), stünde er in Tinte statt Weiß, mit Polster 0.25rem 0 und Unterstreichung beim Schweben. */ .site-header nav a:not(.cta) { text-decoration-line: none; color: var(--tinte); font-weight: 500; font-size: var(--kopf-schrift); padding: 0.25rem 0; } .site-header nav a:not(.cta):hover, .site-header nav a:not(.cta):focus-visible { color: var(--marke); text-decoration-line: underline; text-underline-offset: 0.25em; } /* Am Attribut, nicht am Wert: die aktuelle Seite trägt aria-current="page", ihr Abschnitt (der Hub auf einem Spoke) aria-current="true" — beide werden gleich hervorgehoben (2026-09-22). */ .site-header nav a:not(.cta)[aria-current] { color: var(--marke); text-decoration-line: underline; text-underline-offset: 0.25em; } /* Das Kopfmenü (2026-09-23, Stefan: „make it a sandwich menu then for the three points"): die drei Registerlinks stehen in EINEM details.kopfmenue hinter der Wortmarke — eine Quelle, kein Skript. Über 600 px ist es als Kasten unsichtbar: ein Flex-Kasten mit dem Kopfabstand (die Grundlinie des Kastens ist die seines ersten Links, also die der Zeile), die summary versteckt, der Inhalt des GESCHLOSSENEN details über ::details-content { display: contents } Teil der Zeile — Chromium 131, Firefox 138, WebKit 18.4; in drei Engines geprobt. Kennt eine Engine den Selektor nicht, wäre das Menü ein Loch: dort bleibt die summary sichtbar (@supports not), ein Schalter statt eines Lochs. */ .kopfmenue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem var(--kopf-abstand); border-top: 0; padding: 0; } /* Die generische details-Regel (unten: Rahmen oben, Polster --raum-1, Pfeil vor der summary) gilt dem Exakt-Rechner — hier machte sie die Kopfzeile 17 px höher (85 → 99,6 px bei 1920, gemessen). */ .kopfmenue summary { display: none; list-style: none; } .kopfmenue > summary::before { content: none; } .kopfmenue summary::-webkit-details-marker { display: none; } .kopfmenue::details-content { display: contents; } .kopfmenue-zeichen { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .kopfmenue[open] .linien, .kopfmenue:not([open]) .kreuz { display: none; } @supports not selector(::details-content) { .kopfmenue summary { display: flex; align-items: center; } } .site-header nav a.brand { font-family: var(--schrift-serif); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.7rem); letter-spacing: -0.01em; color: var(--tinte); margin-right: var(--raum-2); } /* Das Ring-o-Zeichen der Wortmarke (docs/brand/README-logo.md: bei 100 px Schrift 68 × 68, Lücke 7 px nach dem m) — in em, damit es mit der Schrift skaliert. Die -0.1em sind gegen die gelieferte Reinzeichnung gemessen (Ringunterkante 0.08em unter der Grundlinie, plus die 2/84 Innenrand der viewBox). Der Ring folgt currentColor, der Haken trägt den Akzent. */ .site-header nav a.brand .brand-zeichen { width: 0.68em; height: 0.68em; margin-left: 0.07em; vertical-align: -0.1em; } .brand-zeichen path { stroke: var(--akzent); } /* Der Strich unter der Wortmarke ist GEZEICHNET, nicht text-decoration: die zieht kein Browser unter ein Inline-SVG, das Zeichen bliebe ohne Strich. ::after ist ein leerer inline-block — seine Grundlinie ist die eigene Unterkante, vertical-align hängt ihn also unabhängig von den Schriftmetriken unter die Grundlinie des Textes: um 0,25 × die Schriftgröße der NACHBARLINKS (--kopf-schrift), nicht die eigene — die Kopfzeile richtet alle Links an EINER Grundlinie aus, und die Unterstreichung der Links liegt 0,25 ihres em darunter (text-underline-offset); mit dem eigenen em (27 px) läge der Wortmarkenstrich 2 px tiefer (2026-09-22, Stefan). 100 % Breite und -100 % Rand legen ihn ohne Vorschub unter das ganze Lockup. Die Tinte ist eine Hintergrundlinie von 1,5 px im 2-px-Kasten (2026-09-22, Stefan: Chrome, 4K bei 150 %): 1 px las er unter der 27-px-Serif als dünner, 2 px als dicker als die 1 px der Kopflinks; 1,5 px = das Verhältnis der Schriftgrößen (27,2 / 18,8). Ein Rahmen kann das nicht (Chrome rundet Rahmenbreiten auf ganze CSS-Pixel), eine Hintergrundgröße rundet er nicht — bei jeder Pixeldichte anderthalbmal die Tinte der Unterstreichung, gleich weich gerastert. Im Modus für erzwungene Farben fällt der Hintergrund weg, dort trägt ein Rahmen den Strich. Der Kasten ist in Ruhe und hervorgehoben gleich hoch — kein Layoutsprung. */ .brand-lockup { display: inline-block; white-space: nowrap; } .brand-lockup::after { content: ""; display: inline-block; width: 100%; margin-left: -100%; height: 2px; vertical-align: calc(-0.25 * var(--kopf-schrift) - 2px); } .site-header nav a.brand:hover, .site-header nav a.brand:focus-visible { text-decoration-line: none; } .site-header nav a.brand:hover .brand-lockup::after, .site-header nav a.brand:focus-visible .brand-lockup::after { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat; } @media (forced-colors: active) { .site-header nav a.brand:hover .brand-lockup::after, .site-header nav a.brand:focus-visible .brand-lockup::after { height: 0; border-top: 2px solid currentColor; } } /* ≤ 600 px (2026-09-23, Stefan): EINE Zeile statt des Tab-Streifens — die Wortmarke füllt sie (flex: 1; der Link bleibt breit, der Strich gehört dem Lockup), der Hamburger steht rechts (44 px Zielfläche, mittig in der Zeile, deshalb align-items: center statt baseline). Das OFFENE Menü hängt als Tafel unter der haftenden Kopfzeile: top: 100 % der positionierten Kopfzeile, keine Höhenkonstante. Nur das offene Menü trägt die Tafel — geschlossen bliebe vom leeren Polster sonst ein Streifen unter der Kopfzeile (geprobt). Inhaltsseiten bleiben skriptfrei:
schaltet nativ, die Enhanced Navigation räumt das open-Attribut beim Seitenwechsel ab. */ @media (max-width: 37.5rem) { html { --kopf-hoehe: 4.25rem; } /* gemessen 67,9 px: Wortmarke 45 px + Polster 2 × 10,4 + Rand 2 (seit 2026-09-26, davor 66,9 mit Rand 1) — auf html wie der Deckel oben, gewinnt nach Reihenfolge */ .site-header nav { align-items: center; } .site-header nav .brand { flex: 1; margin-right: 0; } /* Die Wortmarke steht ohne Nachbarlinks in der Zeile — der Strich hängt wieder 0,25 des eigenen em unter der Grundlinie. */ .site-header nav .brand .brand-lockup::after { vertical-align: calc(-0.25em - 2px); } .kopfmenue { display: block; } .kopfmenue summary { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-left: auto; border-radius: var(--radius-s); color: var(--tinte); cursor: pointer; } .kopfmenue summary:hover, .kopfmenue summary:focus-visible, .kopfmenue[open] summary { color: var(--marke); } .kopfmenue::details-content { display: block; } .kopfmenue[open]::details-content { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: var(--raum-1) clamp(1rem, 4vw, 3rem) var(--raum-2); background: var(--papier); border-bottom: 2px solid var(--rand-stark); box-shadow: 0 2px 12px var(--schatten); } .kopfmenue a:not(.cta) { display: block; padding: 0.5rem 0; } .kopfmenue a.cta { margin-top: var(--raum-1); } } main { flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--raum-4) clamp(1rem, 4vw, 3rem) var(--raum-6); } /* Die Check-Seiten tragen die Breite von vor dem Breiten-Pass (Stefan 2026-09-24). main darf kein class-Attribut tragen — erkannt wird /check am statischen .check-laden, das bis zum nächsten Seitenwechsel im DOM bleibt. */ main:has(> .check-laden) { max-width: 52rem; } details { border-top: 1px solid var(--rand); padding: var(--raum-1) 0; } details > summary { cursor: pointer; font-weight: 600; color: var(--marke); list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "▸ "; display: inline-block; transition: transform .15s; } details[open] > summary::before { transform: rotate(90deg); } /* Niedriger Fuß (Stefan 2026-09-22: „reduce the height of the footer"): --raum-2 oben und unten, bis dahin --raum-3 / --raum-4 (80 → 56 px bei 1920 × 1080). Das Seitenpolster bleibt das von main — im Tab-Streifen begrenzt es die Fußleiste auf die Spalte. */ .site-footer { border-top: 2px solid var(--rand-stark); padding: var(--raum-2) clamp(1rem, 4vw, 3rem) var(--raum-2); font-size: 0.9rem; color: var(--tinte-2); } /* Die Fußnavigation trägt seit 2026-09-22 (Stefan: „on the footer remove everything except Impressum and Datenschutz, where one is left and one right") genau die zwei Rechtstexte aus dem SeitenRegister: Impressum am linken, Datenschutz am rechten Rand der Spalte (space-between), auf jeder Breite — der Cluster steht in den Kacheln der Landing und im Hub. Bis dahin: der ganze Cluster plus Rechtstexte, zentriert, im Tab-Streifen linksbündig. Die Leiste spannt die Breite des KOPFCLUSTERS (Stefan, zweite Runde: „closer together like the distance of konformo to betroffenheitscheck in the header"): Impressum beginnt an der linken Kante der Wortmarke, Datenschutz endet an der rechten Kante des Check-Buttons. Der Kopf zentriert seine Elemente in Inhaltsbreite; ab rund 1216 px stehen alle Kopfschriften an ihren clamp()-Deckeln, dann ist der Cluster 30.66rem (Wortmarke 136 + Rand 16 + „NISG 2026" 95 + „FAQ" 35 + Button 208 px, gemessen in Chromium mit den gebündelten Schriften) plus drei Kopfabstände breit — FussleisteE2ETests misst die Kanten bei 1920 und 2560 px; ändert sich ein Kopftext, ändert sich hier die Konstante. Unter 1216 px ist die Leiste um wenige Pixel breiter als der Cluster, im Tab-Streifen begrenzt sie das Polster des Fußes auf die Spalte. */ .site-footer-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; max-width: calc(30.66rem + 3 * var(--kopf-abstand)); margin: 0 auto; } .site-footer-nav a { color: var(--tinte-2); } .site-footer-nav a[aria-current="page"] { color: var(--tinte); } /* ---- Landing (Spec § 4.2, L2) ---------------------------------------------------- */ .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3) clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: var(--raum-3) 0 var(--raum-4); } @media (max-width: 56rem) { .hero-split { grid-template-columns: 1fr; } } /* Hero-Pass 2026-09-17: Eyebrow + H1 über beiden Spalten; den Abstand zum Lead trägt der Zeilenabstand des Rasters, nicht der H1-Rand. */ .hero-kopf { grid-column: 1 / -1; } .hero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem); margin-bottom: 0; } .hero-lead { font-size: 1.1rem; color: var(--tinte); } .check-cta { margin: var(--raum-3) 0 0; } .check-cta p { margin: 0; } .cta { display: inline-block; background: var(--marke); color: #fff; text-decoration: none; font-weight: 600; padding: 0.8rem 1.5rem; border-radius: var(--radius-s); } .cta:hover, .cta:focus-visible { background: var(--marke-dunkel); color: #fff; } .ergebnis-vorschau { background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--marke); border-radius: var(--radius-m); padding: var(--raum-3) var(--raum-3) var(--raum-2); box-shadow: 0 10px 30px rgba(31, 42, 36, 0.06); } .vorschau-etikett { margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--marke); } .vorschau-verdikt { font-family: var(--schrift-serif); font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin: 0.25rem 0 0; } .vorschau-einzeiler { font-size: 0.95rem; margin: 0.4rem 0 0; } /* Die zwei Fristen-Spalten stehen 2.5rem = 40 px auseinander (Stefan 2026-09-22: „a little bit more space between inkraftreten and registrierung", dann „increase the distance further to 40px"; bis dahin --raum-3, dann --raum-4 — kein --raum-*-Token trägt 2.5rem). */ .vorschau-zahlen { display: flex; gap: 2.5rem; margin: var(--raum-2) 0 0; } .vorschau-zahlen div { margin: 0; } .vorschau-zahlen dt { font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.9rem); color: var(--tinte-2); } .vorschau-zahlen dd { margin: 0; font-family: var(--schrift-serif); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.4rem); color: var(--akzent); } .vorschau-spur { font-size: 0.8rem; color: var(--tinte-2); margin: var(--raum-2) 0 0; } .landing-block { margin-top: var(--raum-5); } .landing-hinweis { font-size: 0.9rem; color: var(--tinte-2); } .schritt-karten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-2); } @media (max-width: 48rem) { .schritt-karten { grid-template-columns: 1fr; } } .schritt-karten li { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-m); padding: var(--raum-2) var(--raum-3); } .schritt-nr { font-family: var(--schrift-serif); font-weight: 600; font-size: 1.6rem; color: var(--akzent); line-height: 1; margin-right: var(--raum-1); } .schritt-nr + div { display: inline; } .kacheln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: var(--raum-2); } @media (max-width: 40rem) { .kacheln { grid-template-columns: 1fr; } } .kachel { display: block; height: 100%; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-m); padding: var(--raum-2) var(--raum-3); text-decoration: none; color: var(--tinte); } .kachel:hover, .kachel:focus-visible { border-color: var(--marke); } .kachel strong { display: block; font-family: var(--schrift-serif); font-weight: 600; font-size: 1.1rem; color: var(--marke); margin-bottom: 0.25rem; } .kachel span { font-size: 0.92rem; color: var(--tinte-2); } .vertrauen-zeile { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); } .vertrauen { border: 1px solid var(--rand); background: var(--flaeche); border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.85rem; color: var(--tinte-2); } /* ---- Inhaltsseiten (Spec § 4.3) ---------------------------------------------------- */ .inhalt h1, .rechtstext h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.5rem); } .inhalt-kopf { margin-bottom: var(--raum-3); } .inhalt-lead { font-size: 1.1rem; } /* Die Haarlinie über jeder h2 gliedert die langen Cluster-Seiten in sichtbare Abschnitte — dieselbe Trennung, die „Auf dieser Seite" verlinkt. */ .inhalt h2 { padding-top: var(--raum-1); border-top: 1px solid var(--rand); } .inhalt h3 { font-family: var(--schrift-sans); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; } .inhalt li { margin-bottom: 0.4rem; } .rechtstext h2 { font-size: 1.3rem; } /* 2026-09-23 (Stefan): „Auf dieser Seite" liest sich in der Schriftgröße des Fließtexts — keine eigene font-size (bis dahin 0.92rem), Etikett und Links erben vom Körper (Ruling AS1). */ .auf-dieser-seite { margin: var(--raum-2) 0 var(--raum-3); padding: var(--raum-2) var(--raum-3); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-m); } .auf-dieser-seite ul { margin: 0.25rem 0 0; padding-left: 1.1rem; } .gesetzeszitat { margin: var(--raum-3) 0; padding: var(--raum-2) var(--raum-3); border-left: 4px solid var(--marke); background: var(--flaeche); border-radius: 0 var(--radius-m) var(--radius-m) 0; } .gesetzeszitat .zitat-quelle { display: block; font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 600; color: var(--marke); margin-bottom: 0.35rem; } .gesetzeszitat .zitat-text { margin: 0; font-family: var(--schrift-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.55; } /* Die Serif hat nur das Gewicht 600 (Ruling R1) — hier bewusst als „gesetzter" Text. */ /* Die Fristentabelle ist breiter als ein Telefondisplay: sie scrollt in ihrem eigenen Container, nicht im Seitenkörper. */ .tabelle-scroll { overflow-x: auto; margin: var(--raum-3) 0; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); } .fristen-tabelle, .ops-tabelle { border-collapse: collapse; width: 100%; min-width: 38rem; font-size: 0.95rem; } .ops-tabelle caption { text-align: left; font-size: 0.9rem; color: var(--tinte-2); padding: var(--raum-1) var(--raum-2); } .fristen-tabelle th, .fristen-tabelle td, .ops-tabelle th, .ops-tabelle td { border-bottom: 1px solid var(--rand); padding: 0.6rem 0.9rem; text-align: left; vertical-align: top; } .fristen-tabelle thead th, .ops-tabelle thead th { background: var(--marke-hell); border-bottom: 2px solid var(--marke); } .fristen-tabelle tbody tr:nth-child(even) td, .ops-tabelle tbody tr:nth-child(even) td { background: var(--papier); } .fristen-tabelle tbody th { font-family: var(--schrift-serif); font-weight: 600; color: var(--marke); white-space: nowrap; } .ops-tabelle td:first-child { font-weight: 600; } /* ---- Hinweis-Familie (eine Optik für Tipps, Boot-/Fehler-UI, Resume-Banner) ------ */ /* Tipp, noscript-Hinweis, Ladefehler und Resume-Banner sahen bis Phase 6 verschieden aus, obwohl sie dasselbe sagen: „lies das, bevor du weiterklickst". Ein Rahmen, ein grüner Balken links — die Farbe wechselt NUR beim Fehler. */ .hinweis-box, .wizard-hinweis { border: 1px solid var(--rand); border-left: 4px solid var(--marke); background: var(--flaeche); padding: var(--raum-2) var(--raum-3); border-radius: 0 var(--radius-m) var(--radius-m) 0; margin: var(--raum-2) 0; } .hinweis-box p, .wizard-hinweis p { margin: 0.4rem 0; } .hinweis-box.fehler, .wizard-hinweis.fehler { border-left-color: var(--fehler); background: var(--fehler-hell); } .hinweis-box button, .resume-banner button { font: inherit; padding: 0.45rem 0.9rem; border-radius: var(--radius-s); border: 1px solid var(--marke); background: var(--flaeche); color: var(--marke); cursor: pointer; margin: 0.25rem 0.5rem 0 0; } .hinweis-box button:hover, .resume-banner button:hover { background: var(--marke-hell); } /* ---- /check: Insel-Gerüst ---------------------------------------------------------- */ .check-laden { padding: var(--raum-4) 0; color: var(--tinte-2); } /* ---- Wizard (Spec § 5.1) ------------------------------------------------------------ */ .wizard { max-width: 44rem; } .wizard-fortschritt { margin-bottom: 0.25rem; } #wizard-titel:focus { outline: none; } .wizard-screen { margin-top: var(--raum-3); } .radio-cards { border: 0; padding: 0; margin: var(--raum-3) 0; } .radio-cards legend { font-weight: 600; margin-bottom: var(--raum-1); } /* Die ganze Karte ist das Label — sie ist damit auch die Trefferfläche (≥ 44 px), und das native Radio/Checkbox bleibt im DOM: sichtbar, fokussierbar, vorlesbar. */ .radio-card { display: flex; gap: 0.75rem; align-items: baseline; min-height: 44px; border: 1px solid var(--rand); background: var(--flaeche); border-radius: var(--radius-m); padding: 0.75rem 1rem; margin-bottom: 0.5rem; cursor: pointer; } .radio-card:hover { border-color: var(--marke); } .radio-card:has(input:checked) { border-color: var(--marke); background: var(--marke-hell); box-shadow: inset 0 0 0 1px var(--marke); } .radio-card:focus-within { outline: 2px solid var(--marke); outline-offset: 2px; } .radio-card input { accent-color: var(--marke); } /* `> label` grenzt die Auswahl der Karte selbst von den Ausnahme-Radios in ihrem Inneren ab: nur der eigene Schalter färbt die Karte. */ .entity-card { border: 1px solid var(--rand); background: var(--flaeche); border-radius: var(--radius-m); padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .entity-card:has(> label input:checked) { border-color: var(--marke); background: var(--marke-hell); } .entity-card > label { display: flex; gap: 0.75rem; cursor: pointer; min-height: 28px; align-items: baseline; } .entity-card input { accent-color: var(--marke); } .entity-details { border-top: 0; padding: 0.25rem 0 0; } .entity-details summary { font-size: 0.92rem; font-weight: 500; } .ausnahme-frage { margin: 0.75rem 0 0 1.5rem; } .ausnahme-umleitung { margin: 0.5rem 0 0; font-size: 0.95rem; } .wizard-nav { display: flex; justify-content: space-between; gap: var(--raum-2); margin-top: var(--raum-4); } .wizard-nav button { font: inherit; font-weight: 600; padding: 0.7rem 1.5rem; border-radius: var(--radius-s); border: 1px solid var(--marke); background: var(--flaeche); color: var(--marke); cursor: pointer; } .wizard-nav button.wizard-weiter, .wizard-nav button.s2-gate-ja { background: var(--marke); color: #fff; margin-left: auto; } .wizard-nav button.wizard-weiter:hover:not([disabled]) { background: var(--marke-dunkel); } .wizard-nav button[disabled] { opacity: 0.5; cursor: not-allowed; } /* Die eigene Wizard-Leiste haftet unten — seit 2026-09-25 auf JEDER Breite (Stefans Befund: auf S2 mit offenem Gate und auf S3 mit 67 Karten lagen die Knöpfe bei 1920 × 1080 551 bzw. 5 529 px unter dem Falz; bis dahin nur ≤ 600 px, Phase 7 § 5.1). Spec 2026-09-25-wizard-leiste-design, WL1–WL3′. Der Kasten behält die Grundgeometrie von .wizard-nav und haftet --raum-2 über der Fensterkante; den Streifen — Papier und Trennlinie, je --raum-2 über und unter den Knöpfen, in der Wizard-Spalte — malt ::before AUSSERHALB des Kastens (absolut, z-index -1 im eigenen Stapel): so wird kein Schritt höher. S1 ist bei 1920 × 1080 1 081 px hoch — die Regel im Fluss (Polster + Rand, +25 px) hätte ihm eine Bildlaufleiste gegeben (KopfnavigationRuhtE2ETests). In Ruhe liegt die Linie eine Einheit über den Knöpfen, wie am Handy. NUR die eigene Leiste (`wizard-nav-sticky`): das S2-Dienste-Gate rendert eine zweite `.wizard-nav` für dieselbe Knopfoptik — klebten beide, lägen sie übereinander. Das Polster unten für den Tastaturfokus steht in der Regel html:has(.wizard-nav-sticky) hinter der html-Regel (scroll-padding-bottom). Wizard-Kasten (2026-09-26, Stefan: „can we make the border fully around zurück/weiter - so also left/right/bottom"): das ::before ist ein VOLLER Kasten — Rand 2 px --rand-stark auf allen vier Seiten, Radius --radius-m wie die Karten, Papier (WK1/WK3) — und liegt auf dem Spaltenraster: die Knöpfe rücken per WAAGRECHTEM Polster der Leiste (padding: 0 --raum-2) in den Kasten; senkrecht trägt die Leiste weiter kein Polster, kein Schritt wird höher (WL3′ bleibt, S1 weiter ohne Bildlaufleiste). Die Leiste haftet 2 × --raum-2 über der Fensterkante, der Kasten endet also --raum-2 darüber und der Inhalt läuft in der Lücke sichtbar durch (WK2, überstimmt WL2 „Streifen bis zur Fensterkante"); in Ruhe steht der Kasten im Fluss unter der letzten Karte. */ .wizard-nav-sticky { position: sticky; bottom: calc(2 * var(--raum-2)); z-index: 5; padding: 0 var(--raum-2); } .wizard-nav-sticky::before { content: ""; position: absolute; inset: calc(-1 * var(--raum-2)) 0; z-index: -1; background: var(--papier); border: 2px solid var(--rand-stark); border-radius: var(--radius-m); } /* Scroll-Schatten (2026-09-26, Stefan: „when scrolled down sometimes i dont know that there is content behind/above the header. at the check the same problem exist (down/beyond the zurück/weiter buttons)"). Kopfzeile und Wizard-Leiste sind dasselbe Papier wie die Seite; steht unter der Linie gerade eine Absatzlücke, sieht nichts abgeschnitten aus. Der Hinweis ist deshalb ein Zustand der LEISTE, nicht des Inhalts: ein Schatten, den eine Scroll-Timeline führt — Kopfzeile: keiner am Seitenanfang, voll nach 3 rem Scrollweg; Streifen der Wizard-Leiste: nach oben geworfen vom Anfang bis 3 rem vor dem Ende, keiner am Ende (der Bereich ist am Ende des Scrollwegs verankert). Kein Skript (die Inhaltsseiten bleiben skriptfrei), keine Geometrie (KP1, --kopf-hoehe, WL3′ unberührt). Scrollt eine Seite gar nicht (S1 bei 1920 × 1080), ist die Timeline inaktiv und die Grundregel gilt: kein Schatten — nichts liegt dahinter. Der @supports-Wächter ist PFLICHT: ohne Scroll-Timelines liefe dieselbe Animation als Zeitanimation von 0 s und stünde sofort auf dem Endbild (Schatten immer, auch am Anfang); mit ihm rendert ein älterer Browser die Seite von heute. Chromium 115, Safari 26, Firefox 159 (caniuse 2026-09-26; animation-range in denselben Versionen). Reihenfolge: das Kurzformat `animation` setzt animation-timeline und animation-range zurück — beide stehen DAHINTER. Der Wizard-Kasten wirft einen Umgebungsschatten (0 0 12px, WK4) nach allen Seiten — bis zum Kasten (2026-09-26) war es ein Schatten nach oben (0 -2px 12px) mit clip-path auf die Oberkante, weil der randlose Streifen seitlich zwei Schleier aufs Papier gemalt hätte. Im Druck löst der Druckblock die Animation der Kopfzeile (Papier scrollt nicht; die Wizard-Leiste druckt nicht); unter forced-colors setzt der Browser box-shadow selbst auf none. Die Menütafel ≤ 600 px trägt ihren Schatten offen immer (Kopfblock): offen liegt sie immer über Inhalt. */ @supports (animation-timeline: scroll()) { .site-header { animation: kopf-schatten linear both; animation-timeline: scroll(root); animation-range: 0 3rem; } .wizard-nav-sticky::before { animation: leiste-schatten linear both; animation-timeline: scroll(root); animation-range: calc(100% - 3rem) 100%; } @keyframes kopf-schatten { from { box-shadow: none; } to { box-shadow: 0 2px 12px var(--schatten); } } @keyframes leiste-schatten { from { box-shadow: 0 0 12px var(--schatten); } to { box-shadow: none; } } } .s3-suche { display: block; width: 100%; font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--rand); border-radius: var(--radius-s); margin-top: 0.5rem; background: var(--flaeche); } .s3-suche:focus { border-color: var(--marke); } .s3-suche-label > span { font-weight: 600; } .s3-abschnitt { font-family: var(--schrift-sans); font-size: 1rem; margin: var(--raum-3) 0 var(--raum-1); } .s3-disambiguator { margin: -0.25rem 0 0.75rem 1rem; font-size: 0.95rem; color: var(--tinte-2); } .s3-nichts-davon-card { margin-top: var(--raum-2); } .s4-definition, .s5b-beispiele, .s5-gesetzestext, .exakt-schwellen { font-size: 0.95rem; color: var(--tinte-2); } .s4-exakt { margin-top: var(--raum-2); } .s4-exakt label, .s5-jae-exakt label, .exakt-rechner label { display: block; margin: 0.5rem 0; } .s4-exakt input, .s5-quote input, .s5-jae-exakt input, .exakt-rechner input, .share-zeile input, .pdf-cta input.pdf-email { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--rand); border-radius: var(--radius-s); background: var(--flaeche); } .s4-exakt input, .s5-quote input, .s5-jae-exakt input, .exakt-rechner input { margin-left: 0.5rem; } .s5b-kriterien li { margin-bottom: 0.5rem; } .s5-zeile { border: 1px solid var(--rand); background: var(--flaeche); border-radius: var(--radius-m); padding: var(--raum-2); margin-bottom: var(--raum-2); } .s5-baender { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.75rem 0; } .s5-baender select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--rand); border-radius: var(--radius-s); background: var(--flaeche); } .s5-stiftung { display: flex; gap: 0.5rem; margin: 0.5rem 0; } .s5-jae-exakt { margin: 0.75rem 0; } .s5-oeffentliche-karte { margin-top: var(--raum-2); } .s5-gabelung { border-top: 1px solid var(--rand); margin-top: var(--raum-3); padding-top: var(--raum-2); } .s5-gabelung button, .exakt-rechner button.exakt-berechnen, .share-zeile button, .antworten-aendern button { font: inherit; padding: 0.5rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--marke); background: var(--flaeche); color: var(--marke); cursor: pointer; } .s5-gabelung button:hover, .exakt-rechner button.exakt-berechnen:hover:not([disabled]), .share-zeile button:hover, .antworten-aendern button:hover { background: var(--marke-hell); } .exakt-rechner button.exakt-berechnen[disabled] { opacity: 0.5; cursor: not-allowed; } /* Fix-Welle (Ruling E16): die S5-Zeilenknöpfe sind die letzten ungestylten UA-Knöpfe im Wizard — `.s5-zeile-neu` (neue Zeile) und der Zeilen-Entfernen-Knopf (Klasse dynamisch `s5-entfernen-{i}`, daher strukturell über `.s5-zeile button`; im Markup ist der Entfernen-Knopf der einzige `