/* Vera Design-Tokens */
:root {
  --paper: #F6F4EF; /* Seitengrund. Warmes Papierweiss statt #F9F9F9 – ersetzt das Bergfoto im Hero. */
  --surface: #FFFFFF; /* Karten, Tabellen, Formularfelder auf paper. */
  --surface-sunken: #ECE8DF; /* Zurückgesetzte Flächen: Tabellenkopf, Vorher-Spalte, Hover-Zeile. */
  --ink: #14181F; /* Überschriften und Fliesstext auf paper, surface, surface-sunken (min. 13:1). Auch Text auf brand. */
  --ink-2: #414956; /* Sekundärtext auf paper, surface, surface-sunken (min. 7.4:1). */
  --ink-3: #5E6877; /* Hilfstext, Tabellenkopf, Metazeilen auf paper, surface, surface-sunken (min. 4.6:1). Nie kleiner als 13px. */
  --line: #D9D4C8; /* Haarlinien und Trenner. Rein dekorativ – trägt keine Bedeutung. */
  --line-strong: #858B95; /* Rahmen von Eingabefeldern und sekundären Buttons (3.1:1 auf paper, 3.4:1 auf surface). */
  --brand: #FF6B00; /* Vera-Orange aus dem Signet. NUR für die eine Hauptaktion (Button-Fläche) und die Zahl im night-Panel. Nie als Textfarbe auf hellem Grund (2.6:1), nie als Status. */
  --on-brand: var(--ink); /* Text und Icons auf brand (6.2:1). Ersetzt den weissen Button-Text der Live-Seite (2.9:1). */
  --brand-hover: #E85F00; /* Hover und Active der Hauptaktion. Text bleibt on-brand (5.1:1). */
  --brand-deep: #A04100; /* Orange als Text auf hellem Grund: Kicker, Textlinks, betontes Wort (5.9:1 auf paper, 6.5:1 auf surface, 5.5:1 auf brand-tint). Wert stammt aus der Live-Seite. */
  --brand-tint: #FFE9D6; /* Ruhige orange Fläche für Hinweise und die aktive Zeile. Text darauf: ink oder brand-deep. */
  --night: #14181F; /* Dunkles Panel für Nachher-Spalte und Abschluss-CTA. Höchstens zwei night-Flächen pro Seite. */
  --night-2: #222933; /* Erhöhte Fläche innerhalb von night (Formularkarte, Listenzeile). */
  --on-night: #F6F4EF; /* Text auf night und night-2 (16:1). */
  --on-night-muted: #A9B1BD; /* Sekundärtext auf night (8.2:1) und night-2 (6.8:1). */
  --sicher-fill: #0F766E; /* Ampel «Sicher»: Balkensegment und Icon. Blaugrün statt Grün, damit es neben Rot auch bei Rot-Grün-Schwäche lesbar bleibt. */
  --sicher-tint: #D9F0EC; /* Pillenfläche «Sicher». */
  --sicher-text: #0B5750; /* Text und Icon auf sicher-tint (7.1:1). */
  --pruefen-fill: #E0A800; /* Ampel «Prüfen»: Balkensegment. Nie allein als Bedeutungsträger auf surface (2.2:1) – immer mit Wort. */
  --pruefen-tint: #FFF1C2; /* Pillenfläche «Prüfen». Hellste Ampelstufe. */
  --pruefen-text: #6B4E00; /* Text und Icon auf pruefen-tint (6.9:1). */
  --unsicher-fill: #B42318; /* Ampel «Unsicher»: Balkensegment und Icon. Rot statt Orange – Orange gehört der Marke. */
  --unsicher-tint: #FBE1DD; /* Pillenfläche «Unsicher». */
  --unsicher-text: #8C1C13; /* Text und Icon auf unsicher-tint (7.4:1). Auch Fehlermeldungen in Formularen. */
  --keinmatch-fill: #5E6877; /* Ampel «Kein Match»: Balkensegment und Icon. Neutral, weil kein Urteil vorliegt. */
  --keinmatch-tint: #E7E9ED; /* Pillenfläche «Kein Match». */
  --keinmatch-text: #3A424E; /* Text und Icon auf keinmatch-tint (8.4:1). */
  --focus: var(--ink); /* Fokusring: 2px solid, 2px Abstand, auf paper/surface/brand. Auf night stattdessen on-night. */
  --shadow-card: 0 1px 2px rgba(20,24,31,0.06), 0 12px 32px rgba(20,24,31,0.10); /* Nur die Produkt-Tabelle im Hero. Sonst trennen Linien, keine Schatten. */
  --space-1: 4px; /* Icon zu Text in Pillen. */
  --space-2: 8px; /* Label zu Feld, Abstand zwischen Pillen. */
  --space-3: 12px; /* Zellen-Innenabstand vertikal, Button-Gruppen. */
  --space-4: 16px; /* Zellen-Innenabstand horizontal, Seitenrand mobil. */
  --space-5: 24px; /* Karten-Innenabstand, Abstand Headline zu Text. */
  --space-6: 32px; /* Abstand Text zu Button, Spaltenabstand. */
  --space-7: 48px; /* Innenabstand grosser Panels, Seitenrand Desktop. */
  --space-8: 72px; /* Abstand zwischen Abschnitten mobil. */
  --space-9: 112px; /* Abstand zwischen Abschnitten Desktop. */
  --radius-sm: 4px; /* Pillen, Eingabefelder, Tabellen-Hover. */
  --radius-md: 8px; /* Buttons und Karten. Alle Buttons gleich – die Live-Seite mischt 2px und 12px. */
  --radius-lg: 16px; /* Grosse Panels (night, Hero-Tabelle). Obergrenze – keine 48/64px mehr. */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Vera — Komponenten-Stylesheet. Farben, Abstände, Radien kommen aus tokens.json (tokens.css).
   Schriftgrössen spiegeln die Type-Styles in tokens.json. Keine Abhängigkeit ausser den drei Google-Schriften. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 27px; -webkit-font-smoothing: antialiased; }
.v-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.v-stage--col { display: block; }
.v-stage--night { background: var(--night); }

/* ---------- Typografie ---------- */
.v-display, .v-h1, .v-h2, .v-h3, .v-figure { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }
.v-display { font-size: 52px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; }
.v-h1 { font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.015em; }
.v-h2 { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.v-h3 { font-size: 21px; line-height: 28px; font-weight: 600; }
.v-figure { font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.v-lead { font-size: 20px; line-height: 30px; color: var(--ink-2); margin: 0; max-width: 56ch; text-wrap: pretty; }
.v-body { font-size: 17px; line-height: 27px; color: var(--ink-2); margin: 0; max-width: 62ch; text-wrap: pretty; }
.v-small { font-size: 14px; line-height: 20px; color: var(--ink-3); margin: 0; }
.v-label { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-deep); margin: 0; }
.v-data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.v-mark { color: var(--brand-deep); }

/* ---------- Button ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1.5px solid transparent; font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease; }
.v-btn svg { width: 18px; height: 18px; flex: none; }
.v-btn--primary { background: var(--brand); color: var(--on-brand); }
.v-btn--primary:hover { background: var(--brand-hover); }
.v-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.v-btn--secondary:hover { border-color: var(--ink); background: var(--surface); }
.v-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 18px; }
.v-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 15px; }
.v-btn--block { width: 100%; }
.v-btn:focus-visible, .v-link:focus-visible, .v-field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-night .v-btn--secondary { color: var(--on-night); border-color: var(--on-night-muted); }
.v-night .v-btn--secondary:hover { background: var(--night-2); border-color: var(--on-night); }
.v-night .v-btn:focus-visible, .v-night .v-link:focus-visible, .v-night .v-field__input:focus-visible { outline-color: var(--on-night); }
.v-link { color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; border-radius: var(--radius-sm); }
.v-night .v-link { color: var(--on-night); }

/* ---------- StatusPill (Ampel) ---------- */
.v-status { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.v-status svg { width: 14px; height: 14px; flex: none; }
.v-status--sicher { background: var(--sicher-tint); color: var(--sicher-text); }
.v-status--pruefen { background: var(--pruefen-tint); color: var(--pruefen-text); }
.v-status--unsicher { background: var(--unsicher-tint); color: var(--unsicher-text); }
.v-status--keinmatch { background: var(--keinmatch-tint); color: var(--keinmatch-text); }

/* ---------- PositionTable ---------- */
.v-lv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; width: 100%; }
.v-lv--raised { box-shadow: var(--shadow-card); }
.v-lv__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.v-lv__title { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; margin: 0; }
.v-lv__meter { padding: 0 var(--space-5) var(--space-4); }
.v-lv__bar { display: flex; height: 8px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; background: var(--surface); }
.v-lv__bar i { display: block; height: 100%; }
.v-lv__bar .is-sicher { background: var(--sicher-fill); }
.v-lv__bar .is-rest { background: var(--pruefen-fill); }
.v-lv__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.v-lv__legend b { color: var(--ink); font-weight: 600; }
.v-lv__scroll { overflow-x: auto; }
.v-lv table { width: 100%; border-collapse: collapse; min-width: 540px; }
.v-lv th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); color: var(--ink-3); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.v-lv td { padding: var(--space-3) var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink); vertical-align: top; }
.v-lv th:first-child, .v-lv td:first-child { padding-left: var(--space-5); }
.v-lv th:last-child, .v-lv td:last-child { padding-right: var(--space-5); }
.v-lv .is-num { text-align: right; white-space: nowrap; }
.v-lv .is-pos { color: var(--ink-3); white-space: nowrap; }
.v-lv__src { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.v-lv tr.is-active td { background: var(--brand-tint); }
.v-lv__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-sunken); font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* ---------- Nav ---------- */
.v-nav { display: flex; align-items: center; gap: var(--space-6); width: 100%; height: 72px; padding: 0 var(--space-7); background: var(--paper); border-bottom: 1px solid var(--line); }
.v-nav__brand { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.v-nav__links { display: flex; gap: var(--space-5); margin-left: auto; }
.v-nav__links a { color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 500; }
.v-nav__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.v-nav__phone { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }

/* ---------- Hero ---------- */
.v-hero { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); gap: var(--space-7); align-items: center; padding: var(--space-8) var(--space-7); }
.v-hero__copy > * + * { margin-top: var(--space-5); }
.v-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.v-assure { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.v-assure li { display: inline-flex; align-items: center; gap: 6px; }
.v-assure svg { width: 16px; height: 16px; color: var(--sicher-fill); flex: none; }
.v-night .v-assure { color: var(--on-night-muted); }
.v-night .v-assure svg { color: var(--on-night); }

/* ---------- ProofBar ---------- */
.v-proof { width: 100%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.v-proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-proof__item { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.v-proof__item + .v-proof__item { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.v-proof__item p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.v-proof__cap { padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-3); }

/* ---------- Compare (Heute / Mit Vera) ---------- */
.v-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.v-compare__side { padding: var(--space-7); background: var(--surface-sunken); }
.v-compare__side.v-night { background: var(--night); color: var(--on-night); }
.v-compare__side .v-label { color: var(--ink-3); }
.v-compare__side.v-night .v-label { color: var(--on-night-muted); }
.v-compare__side .v-figure { margin-top: var(--space-3); }
.v-compare__side.v-night .v-figure { color: var(--brand); }
.v-compare__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.v-compare__list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink-2); }
.v-compare__list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--ink-3); }
.v-night .v-compare__list li { border-top-color: var(--night-2); color: var(--on-night); }
.v-night .v-compare__list svg { color: var(--brand); }

/* ---------- Steps ---------- */
.v-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.v-steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.v-steps li::before { content: "0" counter(step); display: block; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); margin-bottom: var(--space-2); }
.v-steps p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ---------- TrustList ---------- */
.v-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); width: 100%; }
.v-trust__item { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.v-trust__item svg { width: 28px; height: 28px; color: var(--ink); display: block; margin-bottom: var(--space-4); }
.v-trust__item p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ---------- Field + DemoForm ---------- */
.v-field { display: block; }
.v-field__label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.v-field__hint { font-weight: 400; color: var(--ink-3); }
.v-field__input { display: block; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 22px; }
.v-field__input::placeholder { color: var(--ink-3); }
.v-field__error { display: flex; gap: 6px; align-items: center; margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--unsicher-text); }
.v-field__error svg { width: 16px; height: 16px; flex: none; }
.v-field.is-error .v-field__input { border-color: var(--unsicher-fill); border-width: 2px; }
.v-drop { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.v-drop svg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.v-form { display: grid; gap: var(--space-4); width: 100%; max-width: 440px; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.v-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.v-form .v-small { text-align: center; }
.v-night .v-form .v-link { color: var(--brand-deep); }
.v-night .v-form .v-btn:focus-visible, .v-night .v-form .v-link:focus-visible, .v-night .v-form .v-field__input:focus-visible { outline-color: var(--focus); }
.v-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: var(--space-5); align-items: start; }

/* ---------- CTABand ---------- */
.v-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-7); align-items: center; width: 100%; padding: var(--space-7); border-radius: var(--radius-lg); background: var(--night); color: var(--on-night); }
.v-cta .v-h1, .v-cta .v-h2 { color: var(--on-night); }
.v-cta .v-lead { color: var(--on-night-muted); margin-top: var(--space-4); }
.v-cta .v-label { color: var(--on-night-muted); margin-bottom: var(--space-3); }
.v-cta__alt { margin-top: var(--space-6); font-size: 16px; line-height: 24px; color: var(--on-night-muted); }
.v-cta__alt a { color: var(--on-night); font-weight: 600; }

/* ---------- Seite ---------- */
.v-page { background: var(--paper); }
.v-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-7); }
.v-section { padding: var(--space-9) 0 0; }
.v-section__head { max-width: 720px; margin-bottom: var(--space-7); }
.v-section__head > * + * { margin-top: var(--space-4); }
.v-foot { margin-top: var(--space-9); border-top: 1px solid var(--line); padding: var(--space-6) 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-3); }
.v-foot a { color: var(--ink-2); margin-left: var(--space-5); }

@media (max-width: 900px) {
  .v-display { font-size: 44px; line-height: 48px; letter-spacing: -0.015em; }
  .v-h1 { font-size: 34px; line-height: 38px; }
  .v-h2 { font-size: 27px; line-height: 33px; }
  .v-figure { font-size: 44px; line-height: 46px; }
  .v-hero, .v-compare, .v-cta { grid-template-columns: minmax(0, 1fr); }
  .v-hero { padding: var(--space-7) var(--space-4); gap: var(--space-6); }
  .v-steps, .v-trust, .v-proof__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .v-proof__item + .v-proof__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .v-compare__side, .v-cta { padding: var(--space-5); }
  .v-wrap { padding: 0 var(--space-4); }
  .v-nav { padding: 0 var(--space-4); gap: var(--space-4); }
  .v-nav__links, .v-nav__phone { display: none; }
  .v-nav .v-btn { margin-left: auto; }
  .v-section { padding-top: var(--space-8); }
  .v-form__row { grid-template-columns: 1fr; }
  .v-hero__actions .v-btn { width: 100%; }
}

/* ---------- AmpelLegend ---------- */
.v-ampel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); width: 100%; margin: 0; padding: 0; list-style: none; }
.v-ampel li { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.v-ampel strong { display: block; margin-top: var(--space-3); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.v-ampel span.v-ampel__txt { display: block; margin-top: var(--space-1); font-size: 15px; line-height: 22px; color: var(--ink-2); }
@media (max-width: 900px) { .v-ampel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= Landing v2 ================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Nav auf dunklem Hero */
.v-nav--night { background: var(--night); border-bottom-color: var(--night-2); position: relative; z-index: 2; }
.v-nav--night .v-nav__brand { color: var(--on-night); }
.v-nav--night .v-nav__links a { color: var(--on-night-muted); }
.v-nav--night .v-nav__links a:hover { color: var(--on-night); }
.v-nav__cta { display: flex; gap: var(--space-2); }

/* Hero: eine Aussage, riesig gesetzt */
.v-claim { background: var(--night); color: var(--on-night); display: flow-root; }
.v-claim .v-lv { color: var(--ink); }
.v-claim__in { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-7) 0; }
.v-claim .v-label { color: var(--on-night-muted); }
.v-claim__type { margin: var(--space-5) 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 16.2vw, 204px); line-height: .9; letter-spacing: -0.04em; }
.v-claim__old { position: relative; display: inline-block; color: var(--keinmatch-fill); }
.v-claim__old::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .075em; background: var(--brand); transform-origin: left center; animation: v-strike .55s cubic-bezier(.2,.7,.2,1) .35s both; }
.v-claim__new { display: block; color: var(--on-night); animation: v-rise .6s cubic-bezier(.2,.7,.2,1) .75s both; }
@keyframes v-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v-rise { from { opacity: 0; transform: translateY(.12em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v-claim__old::after, .v-claim__new { animation: none; } }
/* Masslinie wie auf dem Bauplan */
.v-dim { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); color: var(--on-night-muted); font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
.v-dim::before, .v-dim::after { content: ""; flex: 1; height: 13px; border-top: 0; background: linear-gradient(var(--on-night-muted), var(--on-night-muted)) center / 100% 1px no-repeat; }
.v-dim::before { border-left: 1px solid var(--on-night-muted); }
.v-dim::after { border-right: 1px solid var(--on-night-muted); }
.v-dim--ink { color: var(--ink-3); }
.v-dim--ink::before, .v-dim--ink::after { background-image: linear-gradient(var(--line-strong), var(--line-strong)); border-color: var(--line-strong); }
.v-claim__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; margin-top: var(--space-7); }
.v-claim__row .v-lead { color: var(--on-night); max-width: 50ch; }
.v-claim__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Produktfenster ragt aus dem Hero in den hellen Teil */
.v-peek { max-width: 1200px; margin: var(--space-8) auto 0; padding: 0 var(--space-7); position: relative; z-index: 1; margin-bottom: -300px; }
.v-peek .v-lv { box-shadow: 0 2px 4px rgba(20,24,31,.10), 0 32px 80px rgba(20,24,31,.28); }
.v-after-peek { padding-top: 340px; }
.v-lv__bar .is-mittel { background: var(--pruefen-fill); }
.v-lv__bar .is-pruefen { background: var(--unsicher-fill); }
.v-lv__bar .is-kein { background: var(--keinmatch-fill); }
.v-lv td { font-size: 15px; line-height: 22px; }
.v-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0; vertical-align: 1px; }

/* Lesehilfe unter dem Fenster */
.v-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.v-notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.v-notes .v-n { margin: 4px 0 0; width: 24px; height: 24px; font-size: 13px; }
.v-notes p { margin: var(--space-1) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* Abschnittskopf mit Laufnummer */
.v-sec { padding-top: var(--space-9); }
.v-sec__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 var(--space-5); margin-bottom: var(--space-7); border-top: 1px solid var(--ink); padding-top: var(--space-4); }
.v-sec__no { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.v-sec__head .v-h2 { margin-top: var(--space-2); max-width: 22ch; }
.v-sec__head .v-lead { margin-top: var(--space-4); }
.v-sec__body { padding-left: calc(88px + var(--space-5)); }

/* Vergleich hell */
.v-compare--light .v-compare__side.is-after { background: var(--surface); border-left: 1px solid var(--line); }
.v-compare--light .is-after .v-compare__list svg { color: var(--sicher-fill); }
.v-compare--light .is-after .v-label { color: var(--brand-deep); }

/* Videos */
.v-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.v-video { margin: 0; }
.v-video__frame { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-3); font-size: 15px; line-height: 22px; text-align: center; padding: var(--space-5); }
.v-video__frame video { width: 100%; height: 100%; object-fit: cover; }
.v-video figcaption { margin-top: var(--space-3); }
.v-video figcaption strong { display: block; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; }
.v-video figcaption span { font-size: 15px; line-height: 22px; color: var(--ink-2); }

@media (max-width: 900px) {
  .v-claim__in { padding: var(--space-7) var(--space-4) 0; }
  .v-claim__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
  .v-claim__actions .v-btn { width: 100%; }
  .v-dim { font-size: 12px; line-height: 16px; gap: var(--space-2); }
  .v-peek { padding: 0 var(--space-4); margin-top: var(--space-7); margin-bottom: -260px; }
  .v-after-peek { padding-top: 292px; }
  .v-notes, .v-videos { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .v-sec { padding-top: var(--space-8); }
  .v-sec__head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-6); }
  .v-sec__body { padding-left: 0; }
  .v-nav__cta .v-btn--secondary { display: none; }
  .v-nav__cta { margin-left: auto; }
  .v-compare--light .v-compare__side.is-after { border-left: 0; border-top: 1px solid var(--line); }
}

/* ================= Hero v3: zentriert, Produktfenster mit Lichtschein ================= */
.v-glow { --deep: #0B0E13; background: var(--deep); color: var(--on-night); display: flow-root; position: relative; overflow: hidden; }
.v-glow .v-nav--night { background: transparent; border-bottom-color: rgba(246,244,239,.10); }
/* Raster wie Millimeterpapier, nach unten ausgeblendet */
.v-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(246,244,239,.16) 1px, transparent 1.4px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 0%, transparent 78%); }
/* warmer Schein hinter dem Fenster */
.v-glow::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: min(1500px, 130%); height: 78%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255,107,0,.30) 0%, rgba(255,107,0,.10) 42%, transparent 72%); }
.v-glow__in { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: var(--space-8) var(--space-5) 0; text-align: center; }
.v-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-4); border-radius: 999px; border: 1px solid rgba(246,244,239,.18); background: rgba(246,244,239,.05); color: var(--on-night-muted); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.v-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.v-glow__title { margin: var(--space-5) 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
  color: var(--on-night); background: linear-gradient(180deg, #FFFFFF 20%, #A9B1BD 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.v-glow__sub { margin: var(--space-5) auto 0; max-width: 46ch; font-size: 20px; line-height: 30px; color: var(--on-night-muted); text-wrap: pretty; }
.v-glow__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.v-glow .v-assure { justify-content: center; }

/* Produktfenster dunkel */
.v-win { position: relative; z-index: 1; max-width: 1120px; margin: var(--space-8) auto 0; padding: 0 var(--space-5); }
.v-win__box { text-align: left; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #12161C; border: 1px solid rgba(246,244,239,.14); border-bottom: 0; overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255,255,255,.22) inset, 0 -30px 120px -20px rgba(255,107,0,.35);
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
.v-win__bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid rgba(246,244,239,.10); }
.v-win__dots { display: flex; gap: 6px; }
.v-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,244,239,.18); }
.v-win__crumb { font-size: 14px; line-height: 20px; color: var(--on-night-muted); }
.v-win__crumb b { color: var(--on-night); font-weight: 600; }
.v-win__meta { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--on-night-muted); }
.v-win__meter { padding: var(--space-4) var(--space-5); }
.v-win__bar2 { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-sm); overflow: hidden; }
.v-win__bar2 i:first-child { background: #17A394; } .v-win__bar2 i:last-child { background: var(--pruefen-fill); }
.v-win__legend { display: flex; gap: var(--space-5); margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--on-night-muted); }
.v-win__legend b { color: var(--on-night); font-weight: 600; }
.v-win table { width: 100%; border-collapse: collapse; min-width: 640px; }
.v-win__scroll { overflow-x: auto; }
.v-win th { text-align: left; padding: var(--space-2) var(--space-3); background: rgba(246,244,239,.04); color: var(--on-night-muted); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.v-win td { padding: var(--space-3); border-top: 1px solid rgba(246,244,239,.08); font-size: 15px; line-height: 22px; color: var(--on-night); vertical-align: top; }
.v-win th:first-child, .v-win td:first-child { padding-left: var(--space-5); } .v-win th:last-child, .v-win td:last-child { padding-right: var(--space-5); }
.v-win .is-num { text-align: right; white-space: nowrap; } .v-win .is-pos { color: var(--on-night-muted); white-space: nowrap; }
.v-win .v-lv__src { color: var(--on-night-muted); }
.v-win tr.is-active td { background: rgba(255,107,0,.10); }
.v-win .v-n { background: var(--on-night); color: #0B0E13; }
.v-win .v-status--sicher { background: rgba(23,163,148,.20); color: #86DDD2; }
.v-win .v-status--pruefen { background: rgba(224,168,0,.20); color: #F4CF63; }
.v-win .v-status--unsicher { background: rgba(214,60,45,.26); color: #FFA79E; }
.v-win .v-status--keinmatch { background: rgba(169,177,189,.16); color: #CDD3DB; }
.v-after-glow { padding-top: var(--space-8); }
@media (max-width: 900px) {
  .v-glow__in { padding: var(--space-7) var(--space-4) 0; }
  .v-glow__sub { font-size: 18px; line-height: 27px; }
  .v-glow__actions .v-btn { width: 100%; }
  .v-win { padding: 0 var(--space-4); margin-top: var(--space-7); }
  .v-win__meta { display: none; }
  .v-badge { font-size: 13px; white-space: nowrap; padding: 0 var(--space-3); }
}

/* ================= Hero v4: dieselbe Komposition auf hellem Grund ================= */
.v-glow--light { background: var(--paper); color: var(--ink); }
.v-glow--light .v-nav { background: transparent; border-bottom-color: var(--line); position: relative; z-index: 2; }
.v-glow--light::before { background-image: radial-gradient(rgba(20,24,31,.20) 1px, transparent 1.4px); }
.v-glow--light::after { bottom: -4%; height: 70%; background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255,107,0,.34) 0%, rgba(255,107,0,.12) 40%, transparent 70%); }
.v-glow--light .v-badge { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.v-glow--light .v-glow__title { color: var(--ink); background-image: linear-gradient(180deg, #14181F 30%, #414956 100%); }
.v-glow--light .v-glow__sub { color: var(--ink-2); }
.v-glow--light .v-win__box { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(20,24,31,.06), 0 -24px 90px -24px rgba(255,107,0,.45), 0 24px 60px rgba(20,24,31,.10);
  -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
.v-glow--light .v-win__bar { border-bottom-color: var(--line); }
.v-glow--light .v-win__dots i { background: var(--line); }
.v-glow--light .v-win__crumb, .v-glow--light .v-win__meta, .v-glow--light .v-win__legend { color: var(--ink-3); }
.v-glow--light .v-win__crumb b, .v-glow--light .v-win__legend b { color: var(--ink); }
.v-glow--light .v-win__bar2 i:first-child { background: var(--sicher-fill); }
.v-glow--light .v-win th { background: var(--surface-sunken); color: var(--ink-3); }
.v-glow--light .v-win td { border-top-color: var(--line); color: var(--ink); }
.v-glow--light .v-win .is-pos, .v-glow--light .v-win .v-lv__src { color: var(--ink-3); }
.v-glow--light .v-win tr.is-active td { background: var(--brand-tint); }
.v-glow--light .v-win .v-n { background: var(--ink); color: var(--paper); }
.v-glow--light .v-win .v-status--sicher { background: var(--sicher-tint); color: var(--sicher-text); }
.v-glow--light .v-win .v-status--pruefen { background: var(--pruefen-tint); color: var(--pruefen-text); }
.v-glow--light .v-win .v-status--unsicher { background: var(--unsicher-tint); color: var(--unsicher-text); }
.v-glow--light .v-win .v-status--keinmatch { background: var(--keinmatch-tint); color: var(--keinmatch-text); }
.v-glow--light + main .v-after-glow { padding-top: var(--space-6); }