/* ==========================================================================
   LOUWIETEC: site.css
   Statisch, ohne Build. Diese Datei rendert die vollständige stille Version:
   jeder Zustand hier ist ein Endzustand. Bewegung lebt ausschließlich in
   motion.css (media-gegatet, unter html.js-motion) und in den JS-Modulen.
   Abschnitte: 1 Tokens · 2 Schriften · 3 Reset/Base · 4 Flächen & Layout ·
   5 Komponenten · 6 Utilities
   ========================================================================== */

/* ---------- 1 · TOKENS ------------------------------------------------- */
:root {
  /* Marke */
  --ink: #0B0F19;
  --paper: #F6F5F1;
  --signal: #4F8DFF;
  --verify: #2FD37A;          /* genau zweimal verwendet: Beleg-ok · Verifiziert-Stempel */
  --navy: #14213D;
  /* Eckenradius: 16 px auf allen Flächen (Entscheidung Louis, 2026-09-07; ersetzt „Radius 0“ des
     Design-Plans). --radius-sm für Elemente, die schmaler als ~40 px sind (Kettenglieder, Marken,
     Chips), dort würde der volle Radius die Form zur Pille verziehen. */
  --radius: 16px;
  --radius-sm: 6px;

  /* Flächen-Tinten */
  --ink-2: #121826;
  --ink-3: #1A2233;
  --paper-2: #ECEAE3;
  --paper-3: #E2DFD6;

  /* Flächenabhängige Variablen: Standard: Papier */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: rgba(11, 15, 25, .64);
  --line: rgba(11, 15, 25, .14);
  --line-strong: rgba(11, 15, 25, .48);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --link: var(--navy);
  --focus: var(--navy);
  --accent: var(--navy);      /* Auf Papier nie --signal als Text/Fokus (2,9:1) */
  --alarm: #B3261E;           /* Papier-Rot 6,0:1 (Papier-3 4,9:1) */

  /* Schrift */
  --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-symbol: "Geist Mono", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;

  /* Typo-Skala (fluid) */
  --step-hero: clamp(3rem, 1rem + 8vw, 8rem);        /* 48 px @375 · ~98 px @1024 · 128 px ≥1400 */
  --step-h1: clamp(2.25rem, 1rem + 4.5vw, 5.5rem);
  --step-h2: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  --step-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --step-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --step-body: 1.0625rem;
  --step-small: .875rem;
  --step-mono-xs: .75rem;
  --step-count: clamp(4rem, 2rem + 18vw, 18rem);

  --measure: 68ch;
  --measure-narrow: 52ch;

  /* Raum */
  --s-1: .25rem; --s-2: .5rem; --s-3: 1rem; --s-4: 1.5rem;
  --s-5: 2rem; --s-6: 3rem; --s-7: 5rem; --s-8: 8rem;
  --section-pad: clamp(4rem, 10vw, 10rem);
  --header-h: 4rem;
  --rail-w: 2.75rem;
  --rail-h-mobile: .5rem;
  --container: 80rem;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Bewegung (nur Werte; Anwendung in motion.css) */
  --snap-ms: 120ms;
  --snap-ms-mobile: 60ms;
  --ease-snap: cubic-bezier(.2, .9, .3, 1.2);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* Flächenwechsel: Bühne: gilt auch für Bühnen-Seiten (Root), Bühnen-Karten und das Beleg-Popover */
.sec--stage,
[data-surface="stage"],
html[data-theme="stage"],
.card--stage,
.beleg-pop {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: rgba(246, 245, 241, .66);
  --line: rgba(246, 245, 241, .16);
  --line-strong: rgba(246, 245, 241, .45);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --link: var(--signal);
  --focus: var(--signal);
  --accent: var(--signal);
  --alarm: #E5484D;           /* Bühnen-Rot 4,9:1 */
  color-scheme: dark;
}

/* Flächenwechsel: Papier (explizit, z. B. Header über Papier) */
.sec--paper,
[data-surface="paper"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: rgba(11, 15, 25, .64);
  --line: rgba(11, 15, 25, .14);
  --line-strong: rgba(11, 15, 25, .48);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --link: var(--navy);
  --focus: var(--navy);
  --accent: var(--navy);
  --alarm: #B3261E;
  color-scheme: light;
}

/* ---------- 2 · SCHRIFTEN ---------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist/Geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Geist";
  src: url("/assets/fonts/geist/Geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist/GeistMono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Geist Mono";
  src: url("/assets/fonts/geist/GeistMono-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metrik-kompatible Fallbacks gegen Layout-Shift beim Swap.
   size-adjust = Vorschubbreite eines deutschen Textmusters Geist ÷ Liberation Sans (1,04); ascent/descent aus hhea,
   geteilt durch size-adjust (die Overrides werden mit skaliert). Siehe docs/qa/tools/font-metrics.mjs. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 96.6%;
  descent-override: 28.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Courier New"), local("Liberation Mono"), local("Menlo");
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

/* ---------- 3 · RESET / BASE ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.55;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--step-h1); letter-spacing: -.03em; line-height: 1; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
p, li, td, th, dd, dt, figcaption, label { text-wrap: pretty; }
strong { font-weight: 600; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--signal); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- 4 · FLÄCHEN & LAYOUT --------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--fg);
}
.sec--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
/* Papier schiebt sich über die Bühne: der Bericht auf dem Tisch */
.sec--slide {
  z-index: 1;
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 48px rgba(11, 15, 25, .35);
}
.sec--stage + .sec--stage { border-top: 1px solid var(--line); }

/* Bühnen-Textur: leise Hash-Zeilen im Hintergrund (nur Typografie) */
.texture {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--step-mono-xs);
  line-height: 2.2; color: var(--fg); opacity: .07; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.texture > span { display: block; padding-inline: var(--gutter); }
.texture > span::before { content: attr(data-t); }   /* Textur als generierter Inhalt: kein DOM-Text (dekorativ, nicht für Screenreader, nicht kontrastpflichtig) */
.sec > .container { position: relative; z-index: 1; }

/* Raster-Helfer */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }
.stack--tight > * + * { margin-top: var(--s-2); }
.stack--loose > * + * { margin-top: var(--s-6); }
.measure { max-width: var(--measure); }
.measure--narrow { max-width: var(--measure-narrow); }

/* ---------- 5 · KOMPONENTEN -------------------------------------------- */

/* Skip-Link */
.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 100;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--step-small);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--signal); outline-offset: -5px; }
main:focus, main:focus-visible { outline: 0; }   /* Skip-Link-Ziel (tabindex=-1): Fokus programmatisch, kein Rahmen um den Inhalt */

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: calc(var(--header-h) - 1px);   /* + 1 px border-bottom des Headers = --header-h */
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--fg); text-decoration: none; font-weight: 600;
  letter-spacing: .12em; font-size: .95rem;
}
.brand__icon { width: 2rem; height: 2rem; }
.brand__word { line-height: 1; padding-top: .1em; }

.site-nav__list { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); list-style: none; padding: 0; align-items: center; }
.site-nav__list a {
  color: var(--fg); text-decoration: none; font-size: var(--step-small); font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent; letter-spacing: .01em;
}
.site-nav__list a.is-product { font-family: var(--font-mono); letter-spacing: .08em; font-size: var(--step-mono-xs); font-weight: 600; }
.site-nav__list a:hover { border-bottom-color: var(--line-strong); }
body[data-page="ledger"] [data-nav="ledger"],
body[data-page="lens"] [data-nav="lens"],
body[data-page="forge"] [data-nav="forge"],
body[data-page="kostenlos"] [data-nav="kostenlos"],
body[data-page="investoren"] [data-nav="investoren"],
body[data-page="karriere"] [data-nav="karriere"],
body[data-page="ueber-uns"] [data-nav="ueber-uns"],
body[data-page="kontakt"] [data-nav="kontakt"],
body[data-page="faq"] [data-nav="faq"],
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.nav-toggle__bars { position: relative; display: block; width: 1.1rem; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Mobiles Menü (JS öffnet; ohne JS wird die Desktop-Liste umbrochen gezeigt) */
.site-menu {
  border-top: 1px solid var(--line);
  background: var(--bg); color: var(--fg);
  padding-block: var(--s-4) var(--s-6);
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;   /* kurze Viewports: Menü scrollt selbst */
}
.site-menu ul { list-style: none; padding: 0; display: grid; gap: .25rem; }
.site-menu a {
  display: block; padding: .8rem 0; color: var(--fg); text-decoration: none;
  font-size: var(--step-h3); font-weight: 500; border-bottom: 1px solid var(--line);
}
.site-menu a.is-product { font-family: var(--font-mono); letter-spacing: .1em; font-size: 1.05rem; font-weight: 600; }
.site-menu__legal { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.site-menu__legal a { font-size: var(--step-small); border: 0; padding: 0; color: var(--fg-muted); }

@media (max-width: 63.9375rem) {
  .site-nav { display: none; }
  html.js .nav-toggle { display: inline-flex; }
  html:not(.js) .site-nav { display: block; width: 100%; padding-bottom: var(--s-3); }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: .5rem 1rem; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .site-header { position: static; }   /* Header ist dann höher als --header-h: Ankerziele und Kette rechnen sonst falsch */
}
@media (min-width: 64rem) {
  .site-menu { display: none !important; }
}

/* Kicker, Lead, Prose */
.kicker {
  font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
}
.kicker::before { content: ""; display: inline-block; width: .5rem; height: .5rem; background: var(--accent); margin-right: .75rem; vertical-align: .1em; }
.lead { font-size: var(--step-lead); line-height: 1.45; max-width: var(--measure); }
.display { font-size: var(--step-hero); line-height: .95; letter-spacing: -.035em; font-weight: 600; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.tagline { font-family: var(--font-mono); font-size: var(--step-small); letter-spacing: .06em; color: var(--fg-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--fg-muted); }

/* Buttons: Signal ist die Interaktionsfarbe; Text darauf immer Tinte (6,0:1) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .85rem 1.4rem;
  font-weight: 500; font-size: var(--step-body); line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--signal); color: var(--ink); border-color: var(--ink); }
.sec--stage .btn--primary, [data-surface="stage"] .btn--primary { border-color: var(--signal); }
.btn--primary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--fg); }
.btn--ghost { padding-inline: .25rem; color: var(--fg); border-color: transparent; border-bottom: 2px solid var(--accent); min-height: 0; }
.btn--ghost:hover { color: var(--accent); }
.btn--vault { border: 2px solid var(--fg); border-radius: var(--radius); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--line-strong); padding-inline: 1.8rem; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row .btn { flex: 0 1 auto; }
@media (max-width: 47.9375rem) { .btn-row .btn { flex-basis: 100%; } }

/* Karten */
.card {
  position: relative;
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
}
.card > * + * { margin-top: var(--s-3); }
.card__kicker { font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.card__title { font-size: var(--step-h3); font-weight: 600; letter-spacing: -.01em; }
.card__claim { font-style: italic; color: var(--fg-muted); }
.card__link { font-weight: 500; }

/* Karte mit Knopf im Fliesstext (/kostenlos/): alle Knoepfe auf einer Linie.
   Der Knopf steckt im Absatz, nicht daneben. Ein Flex- oder Grid-Absatz scheidet
   deshalb aus: er wuerde auch <strong> und die Beleg-Knoepfe zu eigenen Zeilen
   machen und den Satz zerreissen. Der Absatz bleibt darum ein Block, haelt unten
   Platz frei und traegt den Knopf absolut an seiner Unterkante.
   Damit auch die Karte mit nachgestelltem Hinweis mithaelt, uebernehmen die
   Karten die Zeilen des Rasters: Zeile 1 traegt Text und Knopf, Zeile 2 den
   Hinweis. Karten ohne Hinweis lassen Zeile 2 leer, ihr Knopf steht dadurch auf
   derselben Linie. Unter 3 Spalten liegen die Karten untereinander, dort greift
   dieselbe Regel je Karte. Browser ohne :has() oder subgrid fallen auf den
   heutigen Fluss zurueck, der Knopf bleibt dann im Textfluss. */
:is(.grid--2, .grid--3):has(> .card .card__cta) { grid-template-rows: 1fr auto; }
:is(.grid--2, .grid--3):has(> .card .card__cta) > .card {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
}
.card > p:has(> .card__cta) {
  position: relative;
  /* Platz fuer den Knopf: bis zu zwei Zeilen Knopftext (je 1.2 x --step-body)
     plus Innenabstand und Rand aus .btn, dazu --s-3 Luft zum Text. */
  padding-bottom: calc(var(--s-3) + 2 * 1.2 * var(--step-body) + 1.7rem + 2px);
}
/* Linksbuendig und inhaltsbreit, nicht ueber die ganze Karte: verlangt war eine gemeinsame
   Linie, nicht ein groesserer Knopf. inset-inline-end bleibt auto. */
.card > p:has(> .card__cta) > .card__cta { position: absolute; inset-inline-start: 0; bottom: 0; }

/* ---------------------------------------------------------------- AI-Act-Selbstcheck (/kostenlos/)
   Ohne JavaScript stehen alle zehn Fragen untereinander und sind vollstaendig lesbar.
   Erst wenn selbstcheck.js laeuft, setzt es .is-schrittweise und es wird eine Frage je
   Bildschirm gezeigt. Scheitert das Modul, bleibt es beim lesbaren Vollbild. */
.sc__fortschritt { color: var(--fg-muted); font-size: var(--step-mono-xs); letter-spacing: .1em; text-transform: uppercase; }
.sc__frage { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.sc__frage legend { display: block; padding: 0; font-size: var(--step-lead); line-height: 1.35; }
.sc__block { display: block; margin-bottom: var(--s-2); font-size: var(--step-mono-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.choice-col { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.choice-col .choice { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.choice-col .choice:hover { border-color: var(--line-strong); }
.choice-col .choice:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-col .choice input { margin-top: .2rem; flex: none; }
.sc__grundlage { margin-top: var(--s-4); font-size: var(--step-mono-xs); line-height: 1.5; color: var(--fg-muted); border-left: 2px solid var(--line); padding-left: var(--s-3); }

/* Mit JavaScript stehen die Fragen 2 bis 10 von Anfang an auf display:none, nicht erst wenn
   selbstcheck.js geladen hat. Sonst liefert die Seite zehn Fragen aus, das Modul blendet neun
   davon weg, und das Layout springt: CLS ist im Haus auf 0 festgelegt. Scheitert das Modul,
   setzt main.js .is-offen und alle Fragen kommen zurueck. */
/* Nur bis das Modul uebernimmt: danach entscheidet .is-schrittweise zusammen mit .is-aktiv,
   welche Frage sichtbar ist. Ohne :not(.is-schrittweise) sticht diese Regel die naechste und
   die Fragen 2 bis 10 blieben fuer immer verborgen. */
html.js .sc:not(.is-schrittweise):not(.is-offen) .sc__frage:not(:first-of-type) { display: none; }
.sc.is-schrittweise .sc__frage { display: none; }
.sc.is-schrittweise .sc__frage.is-aktiv { display: block; }
.sc.is-schrittweise .sc__nav { margin-top: var(--s-5); }

/* Bewusst kleiner als eine H2: das Ergebnis ist eine Auskunft, keine Bühne. */
.sc__titel { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.25rem); line-height: 1.2; margin-top: var(--s-3); max-width: var(--measure); }
.sc__ergebnis p, .sc__luecken { max-width: var(--measure); }
.sc__luecken { margin-top: var(--s-4); padding-left: 1.1rem; }
.sc__luecken li { margin-bottom: var(--s-2); }
.sc__zusatz { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--fg-muted); }

/* Konditionen-Tabelle → auf Mobil Karten */
.table-wrap { overflow-x: auto; }
.konditionen {
  width: 100%; border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
  font-size: var(--step-small);
}
.konditionen th, .konditionen td {
  text-align: left; vertical-align: top;
  padding: .9rem .75rem;
  border-bottom: 1px solid var(--line);
}
.konditionen thead th {
  font-family: var(--font-mono); font-size: var(--step-mono-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
}
.konditionen tbody th { font-weight: 600; white-space: nowrap; }
.konditionen td.mono, .konditionen .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.konditionen tr > *:first-child { padding-left: 0; }
.konditionen tr > *:last-child { padding-right: 0; }
@media (max-width: 47.9375rem) {
  .konditionen, .konditionen tbody, .konditionen tr, .konditionen td, .konditionen th { display: block; }
  .konditionen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .konditionen tr { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-3); margin-top: var(--s-3); background: var(--surface-2); }
  .konditionen th, .konditionen td { border: 0; padding: .35rem 0; white-space: normal; }
  .konditionen td::before, .konditionen tbody th::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-muted); font-weight: 500; margin-bottom: .15rem;
  }
  .konditionen tbody th { font-size: var(--step-h3); white-space: normal; }
}
.konditionen-note { font-size: var(--step-small); color: var(--fg-muted); margin-top: var(--s-3); }

/* Beleg-Zeichen ⌖: Komponente. Grün nur im Zustand „ok“ (Verwendung 2 von 3). */
.beleg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; margin-left: .15em; vertical-align: -.25em;
  color: var(--fg-muted); border: 0; background: none; position: relative;
}
.beleg::after { content: ""; position: absolute; inset: -4px; }   /* Trefffläche ≥ 24 px auch im Fließtext (WCAG 2.5.8), Optik unverändert */
.beleg svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.beleg:hover, .beleg:focus-visible, .beleg[aria-expanded="true"] { color: var(--accent); }
.beleg.is-ok { color: var(--accent); }
.sec--stage .beleg.is-ok, [data-surface="stage"] .beleg.is-ok, .beleg-pop .beleg.is-ok, .demo--stage .beleg.is-ok { color: var(--verify); }
.glyph-beleg { font-family: var(--font-symbol); }
/* Beleg-Popover: immer Bühne (Ink), damit Grün lesbar bleibt */
.beleg-pop {
  position: absolute; z-index: 60; max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--s-3) var(--s-4);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step-small);
}
.beleg-pop__title { font-weight: 600; }
.beleg-pop__status { font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin-top: .35rem; }
.beleg-pop__artefakt { margin-top: .5rem; }
.beleg-pop__artefakt a { color: var(--signal); }

/* Ketten-Endpunkt: das letzte Glied schliesst sich. Kein Pruefurteil, kein Siegel, deshalb Signal statt
   Verifiziert-Gruen, geprueft wird erst, wenn es etwas zu pruefen gibt. Bewegung in motion.css. */
.chain-close { display: inline-block; color: var(--accent); }
.chain-close svg { display: block; width: clamp(6rem, 5rem + 4vw, 8.5rem); height: auto; }
/* Verifiziert-Stempel (klein, in Demos/Bericht): Verwendung 2 von 2 */
.stamp--verified {
  display: inline-block; font-family: var(--font-mono); font-size: var(--step-mono-xs);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: .3em .6em; border: 2px solid currentColor; border-radius: var(--radius-sm); color: var(--verify); background: var(--ink);
  transform: rotate(-2deg);
}

/* Beweiskette: Fortschrittsanzeige (statisch: alles geschlossen). */
.chain {
  position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 40;
  width: var(--rail-w); display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.chain ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; position: relative; z-index: 1; }
.chain__link a {
  display: block; width: 12px; height: 22px; pointer-events: auto;
  border: 2px solid var(--signal); border-radius: var(--radius-sm); background: rgba(79, 141, 255, .18);   /* geschlossen: Signal 18 % */
  box-shadow: 0 0 0 1px var(--ink);
}
.chain__link a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--ink); }
.chain__link--final a { background: var(--signal); }
.chain__progress {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); border-radius: var(--radius-sm);
  background: linear-gradient(to bottom, var(--signal) var(--progress, 100%), rgba(79,141,255,.15) 0);
}
@media (max-width: 63.9375rem) {
  .chain {
    top: var(--header-h); bottom: auto; left: 0; right: 0; width: auto; height: var(--rail-h-mobile);
    align-items: stretch;
  }
  .chain ol { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; width: 100%; padding-inline: var(--gutter); }
  .chain__link a { position: relative; width: 100%; height: var(--rail-h-mobile); border-width: 1px; }
  /* Trefffläche 24 px (WCAG 2.5.8): unsichtbar nach unten verlängert; nach oben deckt der Header (z 50) ohnehin ab */
  .chain__link a::after { content: ""; position: absolute; inset: 0 0 -16px; }
  .chain__progress { display: none; }
}
.chain--demo { position: static; width: auto; height: auto; pointer-events: auto; justify-content: flex-start; }
.chain--demo ol { grid-auto-flow: column; gap: 8px; }
body[data-chain] { --content-offset: var(--rail-w); }
@media (min-width: 64rem) { body[data-chain] .sec > .container { padding-left: calc(var(--gutter) + var(--rail-w) * .5); } }

/* Countdown: riesige Mono-Zahl, statischer Wert im Markup. */
.count {
  font-family: var(--font-mono); font-size: var(--step-count); font-weight: 500;
  line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.count [data-countdown-big] { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }   /* fester Zahlenkasten: kein Shift beim Herunterzählen */
/* Ohne JavaScript steht im Countdown das Datum statt einer Zahl. Es braucht mehr Zeichen und
   darum weniger Größe, sonst läuft es aus der Zeile. countdown.js tauscht die beiden. */
.count__datum { display: inline-block; font-size: clamp(2rem, 1rem + 5vw, 5.5rem); letter-spacing: -.03em; line-height: 1; }
.count__unit { font-size: .22em; letter-spacing: .12em; text-transform: uppercase; vertical-align: .9em; margin-left: .2em; color: var(--accent); font-weight: 500; }
.count__line { font-size: var(--step-lead); margin-top: var(--s-3); }
.count__line time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Hash-Ticker (statisch: echte Hashes im Markup) */
.hash-ticker {
  overflow: hidden; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .04em;
  color: var(--fg-muted); border-block: 1px solid var(--line); padding-block: .5rem;
}
.hash-ticker span { display: inline-block; padding-right: 2.5rem; }
.hash-ticker span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border: 1px solid var(--signal); border-radius: var(--radius-sm); margin-right: .6rem; vertical-align: .05em; }

/* Formulare */
.form { max-width: 40rem; }
.form > * + * { margin-top: var(--s-4); }
.field { display: grid; gap: .4rem; }
.field__label { font-weight: 500; font-size: var(--step-small); }
.field__hint { font-size: var(--step-small); color: var(--fg-muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .75rem .9rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--field-border, var(--line-strong)); border-radius: var(--radius);
}
.field textarea { min-height: 8rem; resize: vertical; }
::placeholder { color: var(--fg-muted); opacity: 1; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field [aria-invalid="true"] { --field-border: var(--alarm); }  /* Variable statt Spezifitätskampf mit der Basisregel */
.field__error { font-size: var(--step-small); color: var(--alarm); font-weight: 500; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.field--check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--accent); }
.field--check label { font-size: var(--step-small); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: var(--step-small); min-height: 1.4em; }
.form__status.is-error { color: var(--alarm); }
.form__success { padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.choice { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step-small); }
.choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* Backend-Zustände (api.js setzt body[data-backend]) */
body[data-backend="down"] [data-requires-backend] { display: none !important; }
[data-product-cta] { min-height: 3rem; }
[data-product-cta]:empty::after { content: ""; display: inline-block; width: 16rem; max-width: 100%; height: 3rem; border: 1px dashed var(--line); border-radius: var(--radius); }
form.is-sent .field, form.is-sent fieldset, form.is-sent .btn-row, form.is-sent .field__hint, form.is-sent .grid { display: none; }
form.is-sent .form__success { display: block; }
form.is-sent [data-reserve-next].btn-row { display: flex; }

/* Hinweis-Kästen */
.note { padding: var(--s-4); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface-2); font-size: var(--step-small); }
.note--work::before { content: "in Arbeit"; display: block; font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .4rem; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .12em; text-transform: uppercase; padding: .25em .6em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--fg-muted); }

/* Footer: immer Bühne, Volllogo nur hier und im Über-uns-Abbinder */
.site-footer { padding-block: var(--s-7) var(--s-5); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__logo { width: min(20rem, 100%); }
.site-footer__h { font-family: var(--font-mono); font-size: var(--step-mono-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.site-footer li a { color: var(--fg); text-decoration: none; font-size: var(--step-small); }
.site-footer li a:hover { text-decoration: underline; }
.site-footer li a.is-product { font-family: var(--font-mono); letter-spacing: .08em; font-size: var(--step-mono-xs); font-weight: 600; }
.site-footer li a.is-product small { font-family: var(--font-sans); letter-spacing: 0; font-weight: 400; color: var(--fg-muted); text-transform: none; font-size: var(--step-small); margin-left: .15rem; }
.site-footer__meta {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
  font-size: var(--step-small); color: var(--fg-muted);
}
.site-footer__meta a { color: var(--fg); }

/* 404 / Meldungen */
.hero-simple { min-height: calc(100dvh - var(--header-h)); display: grid; align-content: center; }

/* ---------- 6 · UTILITIES ---------------------------------------------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.small { font-size: var(--step-small); }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.flow > * + * { margin-top: var(--s-3); }
.divider { border-top: 1px solid var(--line); margin-block: var(--s-6); }

/* Kurze Zustandsübergänge für Zeiger-Interaktion: nur wenn Bewegung erlaubt ist */
@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav__list a, .beleg, .card, .field input, .field select, .field textarea, .skip-link {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
}
@media print {
  :root, .sec--stage, [data-surface="stage"], html[data-theme="stage"], .card--stage, .beleg-pop, .sec--paper, [data-surface="paper"] {
    --bg: #fff; --fg: #000; --fg-muted: rgba(0, 0, 0, .7); --line: rgba(0, 0, 0, .25); --line-strong: rgba(0, 0, 0, .6);
    --surface-2: #fff; --surface-3: #fff; --link: #000; --focus: #000; --accent: #000; --alarm: #000;
  }
  .site-header, .site-footer, .chain, .nav-toggle, .skip-link, .texture, .hash-ticker { display: none !important; }
  body, .sec { background: #fff; color: #000; }
  .sec--slide { box-shadow: none; }
  a { color: #000; }
  .btn--primary, .chain-close, .stamp--verified { background: #fff; color: #000; box-shadow: none; }
  .beleg-pop { display: none !important; }
}