/* =============================================================================
   Website V2 · Nexus KI — Seitenaufbau auf dem V2-Design (v2-design.css)
   Nur Anordnung und Website-Bauteile. Farben, Licht, Glas, Schrift und Bewegung
   kommen aus den --v2-Tokens. Regeln: V2-DESIGN.md (Abschnitt 10 „Website“).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2?v=3100e775") format("woff2-variations"),
       url("fonts/inter-latin-wght-normal.woff2?v=3100e775") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-tight-latin-wght-normal.woff2?v=77fefe8c") format("woff2-variations"),
       url("fonts/inter-tight-latin-wght-normal.woff2?v=77fefe8c") format("woff2");
}

/* ---------- Grundlagen ----------
   In der Schicht v2-basis, damit die Bauteile (.v2-knopf, .v2-feld …) darüber gewinnen.
   Ungeschichtete Regeln würden sonst jede Schicht schlagen. */
@layer v2-basis {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--v2-kopf) + 24px); }
  body { min-height: 100vh; overflow-x: clip; }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.springen { position: absolute; left: 16px; top: -100px; z-index: var(--v2-z-fenster); padding: 10px 16px; border-radius: var(--v2-pille);
  background: var(--v2-glas-stark); color: var(--v2-text-hell); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
.springen:focus { top: 12px; }
/* Seitenkopf (oben, größtes Element = LCP): Text sofort lesbar, nur noch die kleine Aufwärtsbewegung statt Einblenden aus
   unsichtbar – vorher wurde die Unterzeile erst nach 0,82 s sichtbar (LCP Desktop ≈ 1,0 s statt 0,2 s, Messung 15.10.2026) */
@keyframes v2-erscheinen-kopf { from { transform: translateY(12px); } }
/* MES-1: auch der Kopf in der Bühne (assistenten.html, .buehne-text) – dort LCP vorher ≈ 1,04 s statt ≈ 0,25 s */
.seitenkopf .v2-erscheinen, .buehne-text .v2-erscheinen { animation-name: v2-erscheinen-kopf; }

/* TODO-Markierung: sichtbar, ruhig, nie unter 14 px */
.todo { font-size: max(14px, .85em); font-weight: 500; color: #FFC46B; background: rgba(255, 196, 107, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .30); border-radius: 6px; padding: .05em .4em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow-wrap: anywhere; }

/* FOB-2 (16.10.): Mit großen Textabständen (WCAG 1.4.12) oder auf 320-px-Telefonen passt ein langes Wort
   („Automatisierung“) nicht mehr in die Spalte. Dann darf es als letzter Ausweg im Wort umbrechen, statt die Seite zu
   verbreitern. Im normalen Satz ändert das nichts (Wörter passen; gemessen per Lage-Vergleich aller Elemente). */
h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote { overflow-wrap: break-word; }

/* Text-Links im Fließtext */
.lesetext-link, .v2-lesetext a, .recht a { color: var(--v2-text-hell); text-decoration: underline; text-decoration-color: rgba(var(--v2-licht-rgb), .6);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lesetext-link:hover, .v2-lesetext a:hover, .recht a:hover { text-decoration-color: var(--v2-licht); }

/* Pfeil-Link */
.weiter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--v2-text-hell); text-decoration: none; }
.weiter svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--v2-licht); stroke-width: 1.8; transition: transform var(--v2-schnell) var(--v2-kurve); }
.weiter:hover svg { transform: translateX(3px); }

/* ---------- Kopfzeile ---------- */
.v2-kopf { padding-inline: max(20px, calc((100% - var(--v2-breite)) / 2), env(safe-area-inset-left), env(safe-area-inset-right)); }   /* Geräte mit Aussparung (W7) */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--v2-text-hell); flex: none; }
.logo svg { width: 27px; height: 27px; }
.logo-wort { font: 700 19px/1 var(--v2-schrift-titel); letter-spacing: -0.02em; }
.hauptnav { display: none; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kopf-knopf { display: none; }
.menue-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--v2-pille);
  border: 0; cursor: pointer; background: rgba(140, 180, 255, .07); box-shadow: inset 0 0 0 1px var(--v2-linie); color: var(--v2-text); font-size: 15px; font-weight: 550; }
.menue-knopf svg { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html:not(.js) .menue-knopf { display: none; }
html:not(.js) .hauptnav { display: flex; flex-wrap: wrap; gap: 2px; }

.menue { position: fixed; left: 0; right: 0; top: var(--v2-kopf); z-index: var(--v2-z-menue); max-height: calc(100dvh - var(--v2-kopf)); overflow-y: auto;
  padding: 16px var(--v2-rand) 28px; background: var(--v2-glas-stark); border-bottom: 1px solid var(--v2-linie);
  -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe); }
.menue[hidden] { display: none; }
.menue .v2-reiter { font-size: 18px; padding: 14px 14px; }
.menue ul { display: grid; gap: 4px; margin-bottom: 20px; }
.menue .v2-knopf { width: 100%; min-height: 48px; font-size: 16px; }

@media (min-width: 1024px) {
  .hauptnav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
  .hauptnav ul { display: flex; gap: 2px; }
  .kopf-knopf { display: inline-flex; }
  .menue-knopf, .menue { display: none !important; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(80px, 9vw, 128px); }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 60ch; }   /* EBA-1: Spur nie breiter als der Platz (lange Wörter brechen um) */
.abschnitt-kopf.breit { max-width: none; }
.vorzeile { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 550; color: var(--v2-text-2); }
.titel { font: 680 clamp(30px, 1.6vw + 20px, 42px)/1.08 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); margin: 0; text-wrap: balance; }
.abschnitt-kopf .v2-unterzeile { max-width: 62ch; }
@media (min-width: 1024px) {
  .abschnitt-kopf.zweispaltig { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: end; max-width: none; }
}

/* ---------- Bühne (erster Bildschirm) ---------- */
.buehne { min-height: min(820px, calc(100svh - var(--v2-kopf))); display: flex; align-items: stretch; }
.buehne::after { /* ruhiges Licht, auch ohne JavaScript */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 72% 46%, rgba(79, 216, 255, .10), transparent 70%), radial-gradient(30% 36% at 80% 64%, rgba(138, 92, 255, .10), transparent 70%);
}
.buehne-raster { display: grid; gap: 8px; align-content: center; padding-block: 24px 48px; }
.buehne-text { display: grid; gap: 22px; align-content: center; max-width: 640px; }
.buehne-text .v2-unterzeile { font-size: 19px; color: var(--v2-text-2); max-width: 46ch; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf-reihe .v2-knopf { min-height: 48px; padding: 0 22px; font-size: 16px; }
.objekt { position: relative; height: 340px; }
.objekt-schild { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 2; transition: opacity var(--v2-mittel) var(--v2-kurve); }
.objekt-leiste { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 8px); }
.objekt { container-type: inline-size; }
.objekt-leiste button { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; }
.objekt-leiste button .v2-punkt { box-shadow: none; }
.objekt-leiste [data-pause] .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Wird es eng, zeigt die Leiste nur Punkte (V2-DESIGN.md: „bricht nie um“) */
@container (max-width: 620px) {
  .objekt-leiste .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .objekt-leiste button { min-width: 40px; height: 40px; justify-content: center; }
}
.buehne-hinweis { font-size: 14px; color: var(--v2-text-3); }
@media (min-width: 1024px) {
  .buehne-raster { grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: 40px; padding-block: 48px; }
  .objekt { order: 2; height: auto; min-height: 560px; }
  .objekt-schild { top: 12%; }
  .objekt-leiste { bottom: 4%; }
}

/* ---------- Die sechs Bereiche: Haarlinien-Zeilen ---------- */
.bereiche { border-bottom: 1px solid var(--v2-linie-fein); }
.bereich {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px 16px; align-items: start;
  padding: 22px 8px; border-top: 1px solid var(--v2-linie-fein); text-decoration: none; color: var(--v2-text);
  border-radius: 12px; transition: background var(--v2-schnell) var(--v2-kurve);
}
.bereich:hover { background: rgba(var(--v2-licht-rgb), .06); }
.bereich .v2-punkt { margin-top: 9px; }
.bereich-name { font: 650 21px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.bereich-text { grid-column: 2; color: var(--v2-text-2); font-size: 17px; max-width: 62ch; }
.bereich-status { grid-column: 2; display: flex; align-items: center; gap: 12px; }
.bereich .weiter-pfeil { display: none; }
.marke-status.entwicklung { color: #FFC46B; background: rgba(255, 196, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .28); }
.marke-status.verfuegbar { color: #45F08A; background: rgba(69, 240, 138, .10); box-shadow: inset 0 0 0 1px rgba(69, 240, 138, .28); }
@media (min-width: 900px) {
  .bereich { grid-template-columns: 18px minmax(0, 4fr) minmax(0, 6fr) auto 20px; gap: 24px; align-items: center; padding: 24px 12px; }
  .bereich .v2-punkt { margin-top: 0; }
  .bereich-text, .bereich-status { grid-column: auto; }
  .bereich .weiter-pfeil { display: block; width: 18px; height: 18px; fill: none; stroke: var(--v2-text-3); stroke-width: 1.8; transition: transform var(--v2-schnell) var(--v2-kurve), stroke var(--v2-schnell); }
  .bereich:hover .weiter-pfeil { stroke: var(--v2-licht); transform: translateX(3px); }
}

/* ---------- Ablauf (echte Reihenfolge, Nummern in Bernstein) ---------- */
.ablauf { display: grid; gap: 28px; counter-reset: schritt; }
.schritt { position: relative; display: grid; gap: 10px; padding-top: 22px; }
.schritt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--v2-licht-verlauf); opacity: .35; }
.schritt-nr { font: 680 26px/1.1 var(--v2-schrift-titel); letter-spacing: -0.02em; color: var(--v2-licht); font-variant-numeric: tabular-nums; } /* Bernstein nur für „in Entwicklung“ (A4-12) */
.schritt h3 { font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.schritt p { color: var(--v2-text-2); font-size: 17px; }
@media (min-width: 900px) { .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

.aufruf-karte { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px); }
.aufruf-karte h3 { font: 680 clamp(24px, 1vw + 18px, 30px)/1.15 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); }
.aufruf-karte p { color: var(--v2-text-2); max-width: 56ch; }
@media (min-width: 900px) { .aufruf-karte { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; } }

/* ---------- Werkstatt ---------- */
.werkzeuge { display: grid; gap: 14px; }
.werkzeug { display: grid; gap: 14px; align-content: start; padding: 22px 24px; border-radius: var(--v2-radius-m); background: var(--v2-flaeche); border: 1px solid var(--v2-linie); }
.werkzeug .v2-status { padding: 10px 14px; }
.werkzeug h3 { font: 650 22px/1.25 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.werkzeug p { color: var(--v2-text-2); font-size: 17px; }
.werkzeug .weiter { margin-top: 4px; }
@media (min-width: 900px) { .werkzeuge { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* ---------- Preise: Haarlinien-Zeilen mit tabellarischen Zahlen ---------- */
.preise { border-bottom: 1px solid var(--v2-linie-fein); }
.preis-kopf, .preis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 8px; align-items: baseline; }
.preis-kopf { font-size: 15px; color: var(--v2-text-3); padding-block: 0 10px; }
.preis { border-top: 1px solid var(--v2-linie-fein); }
.preis-name { font: 650 20px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); letter-spacing: -0.015em; }
.preis-wert { font-variant-numeric: tabular-nums; text-align: right; color: var(--v2-text); font-size: 18px; }
.preis-wert small { display: block; font-size: 14px; color: var(--v2-text-3); }
.preis-kopf .spalte-monat, .preis .spalte-monat { display: none; }
@media (min-width: 640px) {
  .preis-kopf, .preis { grid-template-columns: minmax(0, 1fr) 160px 160px; }
  .preis-kopf .spalte-monat, .preis .spalte-monat { display: block; }
  .preis-wert small { display: none; }
  .preis-kopf span:not(:first-child) { text-align: right; }
}
.preis-raster { display: grid; gap: 40px; }
@media (min-width: 1024px) { .preis-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } }

/* Fragen (Haarlinien, aufklappbar) */
.fragen { border-bottom: 1px solid var(--v2-linie-fein); max-width: 880px; }
.fragen details { border-top: 1px solid var(--v2-linie-fein); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 8px; cursor: pointer; list-style: none;
  font: 600 18px/1.35 var(--v2-schrift); color: var(--v2-text-hell); border-radius: 10px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { background: rgba(var(--v2-licht-rgb), .06); }
.fragen summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--v2-licht); border-bottom: 1.8px solid var(--v2-licht); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--v2-schnell) var(--v2-kurve); }
.fragen details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.fragen .antwort { padding: 0 8px 20px; color: var(--v2-text-2); max-width: 70ch; }

/* ---------- Über uns: Kennzahlen und Grundsätze ---------- */
.ueber-raster { display: grid; gap: 40px; }
@media (min-width: 1024px) { .ueber-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.ueber-raster .v2-lesetext p + p { margin-top: 16px; }
.v2-kachel b + span { margin-top: 2px; }
.ueber-raster .v2-kacheln { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kachel-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe, var(--v2-licht)); box-shadow: 0 0 10px var(--farbe, rgba(var(--v2-licht-rgb), .7)); }
.grundsaetze { display: grid; border-bottom: 1px solid var(--v2-linie-fein); }
.grundsaetze div { display: grid; gap: 6px; padding: 18px 8px; border-top: 1px solid var(--v2-linie-fein); }
.grundsaetze dt { font: 650 20px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); letter-spacing: -0.015em; }
.grundsaetze dd { color: var(--v2-text-2); font-size: 17px; }

/* ---------- Abschluss: Problem schildern ---------- */
.schluss .v2-karte { display: grid; gap: 22px; padding: clamp(26px, 4vw, 48px); max-width: 920px; margin-inline: auto; text-align: left; }
.schluss h2 { font: 700 clamp(30px, 2.4vw + 16px, 52px)/1.05 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); text-wrap: balance; }
.schluss .v2-frage { padding: 6px; padding-left: 20px; }
.schluss .v2-frage input { font-size: 17px; min-height: 44px; }
.schluss .v2-frage .v2-knopf { min-height: 44px; flex: none; }
.schluss-kontakt { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--v2-text-2); font-size: 16px; }
.schluss-kontakt b { color: var(--v2-text-hell); font-weight: 600; }
@media (max-width: 520px) {
  .schluss .v2-frage { flex-wrap: wrap; border-radius: 20px; padding: 10px; }
  .schluss .v2-frage input { width: 100%; padding: 4px 8px; }
  .schluss .v2-frage .v2-knopf { width: 100%; }
}

/* ---------- Seitenkopf der Unterseiten (ruhig, kein zweites Schauspiel) ---------- */
.seitenkopf { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.seitenkopf .v2-schlagzeile { font-size: clamp(38px, 3.2vw + 1rem, 64px); max-width: 18ch; }
.seitenkopf .v2-unterzeile { margin-top: 20px; font-size: 19px; max-width: 56ch; }
.pfad ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 22px; font-size: 15px; color: var(--v2-text-3); }
.pfad li { display: inline-flex; align-items: center; gap: 10px; }
.pfad li + li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--v2-text-3); }
.pfad a { color: var(--v2-text-2); text-decoration: none; }
.pfad a:hover { color: var(--v2-text-hell); text-decoration: underline; }
.pfad [aria-current] { color: var(--v2-text); }

/* Bereich im Detail (Lösungen-Seite) */
.bereich-detail { display: grid; gap: 18px; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--v2-linie-fein); scroll-margin-top: calc(var(--v2-kopf) + 16px); }
.bereich-detail:first-child { border-top: 0; padding-top: 0; }
.bereich-detail-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bereich-detail h2 { font: 680 clamp(28px, 1.4vw + 18px, 38px)/1.1 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); }
.bereich-detail .v2-lesetext { color: var(--v2-text-2); }
.punkte { display: grid; gap: 8px; }
.punkte li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.punkte li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--farbe, var(--v2-licht)); transform: translateY(-2px); }
@media (min-width: 1024px) {
  .bereich-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 56px; align-items: start; }
  .bereich-detail-kopf, .bereich-detail h2 { grid-column: 1; }
  .bereich-detail .v2-lesetext, .bereich-detail .punkte, .bereich-detail .weiter { grid-column: 2; }
  .bereich-detail .v2-lesetext { grid-row: 1 / span 2; }
}

/* ---------- Formular ---------- */
.kontakt-raster { display: grid; gap: 48px; }
@media (min-width: 1024px) { .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; } }
.formular { display: grid; gap: 22px; }
.feld-reihe { display: grid; gap: 22px; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: grid; min-width: 0; }
.feld .pflicht { color: var(--v2-licht); }
.feld-hinweis { margin-top: 6px; font-size: 14px; color: var(--v2-text-3); }
.feld-fehler { display: none; margin-top: 6px; font-size: 15px; font-weight: 550; color: var(--v2-fehler); }
.feld[data-fehler] .feld-fehler { display: block; }
.feld[data-fehler] .v2-feld { border-color: rgba(255, 107, 107, .7); }
textarea.v2-feld { min-height: 160px; resize: vertical; }
select.v2-feld { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, #B3C2E2 50%), linear-gradient(135deg, #B3C2E2 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
select.v2-feld option { background: #0b1226; color: var(--v2-text); }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--v2-text-2); }
.zustimmung input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--v2-licht); flex: none; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.formular-aktionen .v2-knopf { min-height: 48px; padding: 0 24px; font-size: 16px; }
.formular-meldung { display: none; }
.formular-meldung.sichtbar { display: flex; }
.formular-meldung ul { margin-top: 6px; display: grid; gap: 2px; }
.formular-meldung a { color: inherit; }
.formular-meldung.fehler { background: rgba(255, 107, 107, .08); border-color: rgba(255, 107, 107, .4); }
.formular-meldung > div { display: grid; gap: 4px; }

.seitenleiste { display: grid; gap: 28px; align-content: start; }
.kontaktwege { border-bottom: 1px solid var(--v2-linie-fein); }
.kontaktwege div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 6px; border-top: 1px solid var(--v2-linie-fein); }
.kontaktwege dt { color: var(--v2-text-3); font-size: 15px; }
.kontaktwege dd { color: var(--v2-text); min-width: 0; overflow-wrap: anywhere; }
.danach { display: grid; gap: 0; }
.danach li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; }
.danach .nr { grid-row: span 2; font: 680 20px/1.3 var(--v2-schrift-titel); color: var(--v2-licht); font-variant-numeric: tabular-nums; }
.danach b { color: var(--v2-text-hell); font-weight: 600; }
.danach span:not(.nr) { color: var(--v2-text-2); font-size: 16px; }

/* ---------- Rechtstexte ---------- */
.recht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 72ch; }   /* FOB-2: Spalte nie breiter als der Platz */
.recht h2 { font: 650 22px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--v2-linie-fein); }
.recht h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recht p { color: var(--v2-text-2); }
.recht-hinweis { margin-bottom: 36px; max-width: 72ch; }

/* ---------- 404 ---------- */
.verirrt { padding-block: clamp(72px, 10vw, 140px); }
.verirrt .weg { display: grid; gap: 0; margin-top: 36px; max-width: 520px; border-bottom: 1px solid var(--v2-linie-fein); }
.verirrt .weg a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 8px; border-top: 1px solid var(--v2-linie-fein); text-decoration: none; font-size: 19px; font-weight: 600; color: var(--v2-text-hell); border-radius: 10px; }
.verirrt .weg a:hover { background: rgba(var(--v2-licht-rgb), .06); }
.verirrt .weg svg { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--v2-licht); stroke-width: 1.8; }

/* ---------- Fuß ---------- */
.fuss-raster { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuss-marke { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 36ch; align-content: start; }
.fuss-nav { display: grid; gap: 10px; align-content: start; min-width: 0; }
.fuss-nav p { color: var(--v2-text-3); font-size: 15px; }
.fuss-nav ul { display: grid; gap: 0; }
.fuss-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
.fuss-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-unten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--v2-linie-fein); color: var(--v2-text-3); font-size: 14px; }
@media (min-width: 1024px) {
  .fuss-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); }
  .fuss-marke { grid-column: auto; }
}

/* ---------- Kontrast-Korrektur Knöpfe ----------
   In Rosarot und Violett fällt der Standard-Verlauf (100 % → 72 %) auf Nacht unter 4,8 : 1
   (gemessen 3,7 bzw. 4,5 : 1). Mit 90 % am Ende: Rosarot 5,3 : 1, Violett 6,5 : 1.
   Gehört eigentlich in v2-design.css — dort nachziehen. */
[data-licht="rose"] .v2-knopf:not(.zweit):not(.leise),
[data-licht="violett"] .v2-knopf:not(.zweit):not(.leise) {
  background: linear-gradient(135deg, rgba(var(--v2-licht-rgb), 1), rgba(var(--v2-licht-rgb), .9));
}
.objekt-leiste svg { flex: none; width: 12px; height: 12px; max-width: none; }

/* =============================================================================
   Inhalte der Live-Website (Stand 02.10.2026): weitere Website-Bauteile
   ========================================================================== */
.logo-wort span { color: #93B8FF; }
.kopf-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* EBA-1 */
.kopf-rechts-spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: end; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; }   /* FOB-2: einspaltig nie breiter als der Platz */
@media (min-width: 1024px) { .zwei-spalten { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.zwei-spalten .abschnitt-kopf { margin-bottom: 20px; }

/* Kopfzeile mit 5 Reitern + Knopf (W2, A4-9): passt ab 1024 px in eine Zeile */
@media (min-width: 1024px) { .hauptnav .v2-reiter { padding: 9px 12px; } }

/* Neu-Pille und Vertrauenszeile im ersten Bildschirm */
.neu-pille { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 5px 14px 5px 6px; border-radius: var(--v2-pille);
  background: var(--v2-glas-leiste); box-shadow: inset 0 0 0 1px var(--v2-linie); text-decoration: none; color: var(--v2-text); font-size: 15px; }
.neu-pille:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
.neu-pille svg { width: 14px; height: 14px; fill: none; stroke: var(--v2-licht); stroke-width: 1.8; }
.buehne-links { margin-top: -6px; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--v2-text-2); }
.vertrauen span { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #45F08A; box-shadow: 0 0 8px rgba(69, 240, 138, .7); }

/* Haarlinien-Listen (Titel + Text) */
.zeilenliste { display: grid; border-bottom: 1px solid var(--v2-linie-fein); }
.zeilenliste > div { display: grid; gap: 6px 32px; padding: 20px 8px; border-top: 1px solid var(--v2-linie-fein); }
.zeilenliste dt { font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.zeilenliste dd { color: var(--v2-text-2); font-size: 17px; max-width: 68ch; }
.zeilenliste dd .weiter { margin-top: 8px; display: flex; width: max-content; }
.zeilenliste.gross dt { font-size: clamp(22px, 1vw + 16px, 28px); }
.zeilenliste.kompakt > div { padding: 14px 8px; }
.zeilenliste.kompakt dt { font-size: 18px; }
.situationen .zeit { display: block; font: 500 15px/1.4 var(--v2-schrift); color: var(--v2-licht); margin-bottom: 4px; letter-spacing: 0; }
@media (min-width: 900px) {
  .zeilenliste > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; }
  .zwei-spalten .zeilenliste > div { grid-template-columns: 1fr; }
}

/* Haken- und Kreuzlisten */
.haken, .kreuz { display: grid; gap: 10px; }
.haken li, .kreuz li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; color: var(--v2-text); }
.haken li::before { content: ''; width: 12px; height: 7px; border-left: 2px solid var(--v2-licht); border-bottom: 2px solid var(--v2-licht); transform: rotate(-45deg) translate(2px, -2px); }
.kreuz li::before { content: '–'; color: var(--v2-text-3); font-weight: 600; }
.liste-gross li { font-size: 18px; padding: 10px 0; border-top: 1px solid var(--v2-linie-fein); }
.liste-gross { gap: 0; border-bottom: 1px solid var(--v2-linie-fein); }

/* Lösung + Beispielfenster */
.loesung-raster { display: grid; gap: 40px; }
.loesung-text { display: grid; gap: 28px; align-content: start; }
.assistent { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--v2-linie-fein); }
.assistent h3 { font: 650 22px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.assistent p, .made-in { color: var(--v2-text-2); font-size: 17px; }
.made-in b { color: var(--v2-text-hell); }
@media (min-width: 1024px) { .loesung-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } }
.fenster-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--v2-linie-fein); font-size: 15px; color: var(--v2-text-2); }
.fenster-leiste .v2-marke { margin-left: auto; }
.punkte { display: inline-flex; gap: 6px; flex: none; }
.punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140, 180, 255, .22); }
.punkte i:first-child { background: var(--farbe, var(--v2-licht)); box-shadow: 0 0 8px var(--farbe, rgba(var(--v2-licht-rgb), .7)); }
.beispiel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.chat { display: grid; gap: 10px; }
.chat-meta { font-size: 14px; color: var(--v2-text-3); justify-self: end; }
.blase { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 16px; line-height: 1.45; }
.blase.kunde { justify-self: end; background: rgba(var(--v2-licht-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .4); color: var(--v2-text-hell); border-bottom-right-radius: 6px; }
.blase.bot { justify-self: start; background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie); color: var(--v2-text); border-bottom-left-radius: 6px; }
.anruf { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(69, 240, 138, .06); box-shadow: inset 0 0 0 1px rgba(69, 240, 138, .25); font-size: 15px; color: var(--v2-text); }
.beispiel figcaption { margin-top: 12px; font-size: 14px; color: var(--v2-text-3); }

/* Kennzahlen als Haarlinien-Reihe (echte Werte, kein Hochzählen) */
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--v2-linie-fein); border-bottom: 1px solid var(--v2-linie-fein); }
.werte li { display: grid; gap: 6px; padding: 22px 20px 22px 0; }
.werte li + li { border-left: 1px solid var(--v2-linie-fein); padding-left: 20px; }
.werte b { font: 680 clamp(28px, 1.5vw + 18px, 38px)/1.1 var(--v2-schrift-titel); letter-spacing: -0.025em; color: var(--v2-text-hell); font-variant-numeric: tabular-nums; }
.werte span { color: var(--v2-text-2); font-size: 16px; }
@media (max-width: 640px) { .werte li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--v2-linie-fein); } }

/* Ablauf mit variabler Spaltenzahl */
@media (min-width: 900px) { .ablauf { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); } }

/* Preistabelle */
.rabatt { margin-bottom: 20px; }
.preistabelle { border-bottom: 1px solid var(--v2-linie-fein); }
.pt-kopf, .pt-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px 20px; padding: 16px 10px; align-items: baseline; }
.pt-kopf { font-size: 15px; color: var(--v2-text-3); padding-block: 0 10px; }
.pt-zeile { border-top: 1px solid var(--v2-linie-fein); border-radius: 10px; }
.pt-zeile.hervor { background: linear-gradient(90deg, rgba(var(--v2-licht-rgb), .10), rgba(var(--v2-licht-rgb), .02)); }
.pt-name { font: 650 20px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.pt-name a { text-decoration: none; }
.pt-name a:hover { text-decoration: underline; text-decoration-color: rgba(var(--v2-licht-rgb), .6); text-underline-offset: 3px; }
.pt-name .v2-marke { margin-left: 6px; vertical-align: 2px; }
.pt-fuer { color: var(--v2-text-2); font-size: 16px; }
.pt-wert { font-variant-numeric: tabular-nums; color: var(--v2-text); }
.pt-wert s { color: var(--v2-text-3); margin-right: 6px; }
.pt-wert b { color: var(--v2-text-hell); font-weight: 650; font-size: 18px; }
.pt-wert small { color: var(--v2-text-3); font-size: 14px; }
.pt-kopf .pt-fuer, .pt-kopf span:nth-child(n+3) { display: none; }
.pt-zeile .pt-fuer { grid-column: 1 / -1; order: 3; }
@media (min-width: 900px) {
  .pt-kopf, .pt-zeile { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .pt-kopf .pt-fuer, .pt-kopf span:nth-child(n+3) { display: block; }
  .pt-zeile .pt-fuer { grid-column: auto; order: 0; }
}

/* Pakete (Preise-Seite) */
.pakete { display: grid; gap: 20px; }
.paket { display: grid; gap: 16px; align-content: start; padding: 24px 22px; border-top: 1px solid var(--v2-linie); scroll-margin-top: calc(var(--v2-kopf) + 16px); }
.paket.v2-karte { padding: 26px 24px; }
.paket-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.paket h2 { font: 680 28px/1.1 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); }
.paket-fuer { color: var(--v2-text-2); font-size: 16px; }
.paket-preis { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.paket-preis s { color: var(--v2-text-3); font-size: 16px; }
.paket-preis b { font: 680 34px/1.1 var(--v2-schrift-titel); letter-spacing: -0.025em; color: var(--v2-text-hell); }
.paket-monat { color: var(--v2-text-2); font-size: 16px; }
.paket-monat b { font: inherit; font-weight: 650; color: var(--v2-text-hell); font-size: 16px; letter-spacing: 0; }
.paket-einfach { color: var(--v2-text); font-size: 16px; }
.paket .haken { font-size: 16px; }
.paket .v2-knopf { justify-self: start; margin-top: 6px; }
@media (min-width: 760px) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
/* Anfrage-Spiegel: volle Leistungsliste aufklappbar (<details>, ohne JS) – W-Fix, V-W Befund 2 */
.paket-details { border-top: 1px solid var(--v2-linie-fein); }
.paket-details summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; color: var(--v2-text-hell); }
.paket-details summary::-webkit-details-marker { display: none; }
.paket-details summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.8px solid var(--v2-licht); border-bottom: 1.8px solid var(--v2-licht); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--v2-schnell) var(--v2-kurve); }
.paket-details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.paket-details summary:focus-visible { outline: 2px solid var(--v2-licht); outline-offset: 2px; border-radius: 6px; }
.paket-details[open] > :not(summary) { margin-top: 4px; }
.paket-details > .v2-klein { margin-top: 12px; }
/* Telefon-Assistent: schmales Band über die volle Breite unter dem Paketraster (in Entwicklung, ohne Preis) */
.telefon-band { display: grid; gap: 12px; align-items: center; margin-top: 20px; padding: 18px 22px; border-radius: var(--v2-radius-l, 18px);
  border: 1px dashed rgba(140, 180, 255, .28); background: rgba(10, 18, 40, .45); scroll-margin-top: calc(var(--v2-kopf) + 16px); }
.telefon-band-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.telefon-band h2 { font: 650 20px/1.2 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); margin: 0; }
.telefon-band p { margin: 0; color: var(--v2-text-2); font-size: 16px; }
.telefon-band p b { color: var(--v2-text-hell); font-weight: 650; }
.telefon-band .v2-knopf { justify-self: start; }
@media (min-width: 900px) { .telefon-band { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; } .telefon-band .v2-knopf { justify-self: end; } }

/* Preisliste (Zusatzleistungen) */
.preisliste { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--v2-linie-fein); }
/* FOB-2: Passt der Preis nicht mehr neben die Leistung (320 px mit großen Textabständen), rutscht er rechtsbündig in die
   nächste Zeile. dt mit Grundgröße 0: umgebrochen wird nur, wenn nicht einmal das längste Wort danebenpasst. */
.preisliste > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 14px 8px; border-top: 1px solid var(--v2-linie-fein); }
.preisliste dt { flex: 1 1 0; color: var(--v2-text); font-size: 17px; }
.preisliste dd { margin-left: auto; color: var(--v2-text-hell); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 900px) { .preisliste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }

/* Paket-Berater */
.berater { display: grid; gap: 22px; max-width: 900px; }
.berater .frage { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.berater legend { font: 600 18px/1.4 var(--v2-schrift); color: var(--v2-text-hell); padding: 0; margin-bottom: 10px; }
.berater .v2-schalter { flex-wrap: wrap; border-radius: 22px; max-width: 100%; }
.berater .v2-schalter button { height: auto; min-height: 40px; padding: 8px 14px; white-space: normal; text-align: left; }
.berater-ergebnis { display: grid; gap: 14px; }
.berater-ergebnis h3 { font: 680 26px/1.15 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); }
.berater-ergebnis p { color: var(--v2-text-2); }

/* Klartext */
.klartext { display: grid; gap: 32px; }
.klartext h3 { font: 650 20px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); margin-bottom: 14px; }
.klartext li { padding: 12px 0; border-top: 1px solid var(--v2-linie-fein); font-size: 17px; }
.klartext ul { gap: 0; border-bottom: 1px solid var(--v2-linie-fein); }
@media (min-width: 900px) { .klartext { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }

/* Nexus-Welt: Fenster */
.welt { display: grid; gap: 20px; }
.welt-leisten { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.welt-leiste { flex: 0 0 auto; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; min-width: 200px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--v2-linie); background: var(--v2-glas-leiste); color: var(--v2-text); text-align: left; transition: border-color var(--v2-schnell), background var(--v2-schnell); }
.welt-leiste .punkte { grid-row: span 2; }
.welt-name { font: 650 17px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.welt-adresse { font-size: 14px; color: var(--v2-text-3); }
.welt-leiste:hover { border-color: rgba(var(--v2-licht-rgb), .45); }
.welt-leiste[aria-selected="true"] { background: rgba(var(--v2-licht-rgb), .14); border-color: rgba(var(--v2-licht-rgb), .55); box-shadow: 0 0 22px -8px rgba(var(--v2-licht-rgb), .9); }
.welt-stapel { display: grid; gap: 16px; }
.js .welt-fenster[data-zu] { display: none; }
.welt-fenster { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 34px); }
.welt-fenster h3 { font: 700 clamp(28px, 1.6vw + 18px, 40px)/1.08 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); }
.welt-fenster > p { color: var(--v2-text-2); max-width: 60ch; }
.welt-url { font-size: 15px; color: var(--v2-text-2); }
.welt-vorschau { display: grid; gap: 8px; }
.welt-vorschau ul { display: grid; border-bottom: 1px solid var(--v2-linie-fein); }
.welt-vorschau li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px; border-top: 1px solid var(--v2-linie-fein); color: var(--v2-text); font-size: 16px; }
.welt-vorschau b { font-weight: 600; color: var(--v2-text-hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.welt-fenster .v2-knopf { justify-self: start; margin-top: 6px; }
@media (min-width: 1024px) {
  .welt { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px; align-items: start; }
  .welt-leisten { flex-direction: column; overflow: visible; padding: 0; }
  .welt-leiste { min-width: 0; }
}

/* App-Familie */
.app-gruppe + .app-gruppe { margin-top: 32px; }
.app-gruppe-titel { font: 600 16px/1.4 var(--v2-schrift); color: var(--v2-text-2); margin-bottom: 8px; }
.app-liste { border-bottom: 1px solid var(--v2-linie-fein); }
.app-zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 8px; border-top: 1px solid var(--v2-linie-fein); text-decoration: none; color: var(--v2-text); border-radius: 12px; transition: background var(--v2-schnell); }
.app-zeile:hover { background: rgba(var(--v2-licht-rgb), .06); }
.app-zeichen { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 650 15px/1 var(--v2-schrift-titel); color: var(--v2-text-hell);
  background: color-mix(in srgb, var(--farbe) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe) 45%, transparent); }
.app-name { font: 650 18px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.app-text { grid-column: 2; color: var(--v2-text-2); font-size: 16px; }
.app-plattform { display: none; color: var(--v2-text-3); font-size: 15px; }
.app-status { grid-column: 3; grid-row: 1 / span 2; }
.app-zeile .weiter-pfeil { display: none; }
@media (min-width: 900px) {
  .app-zeile { grid-template-columns: 44px minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr) auto 20px; gap: 20px; }
  .app-zeichen, .app-text, .app-status { grid-row: auto; grid-column: auto; }
  .app-plattform { display: block; }
  .app-zeile .weiter-pfeil { display: block; width: 18px; height: 18px; fill: none; stroke: var(--v2-text-3); stroke-width: 1.8; transition: transform var(--v2-schnell), stroke var(--v2-schnell); }
  .app-zeile:hover .weiter-pfeil { stroke: var(--v2-licht); transform: translateX(3px); }
  .app-liste:not(:has(.app-plattform)) .app-zeile { grid-template-columns: 44px minmax(0, 3fr) minmax(0, 6fr) auto 20px; }
}
.marke-status.eigen { color: #C9D7F5; background: rgba(140, 180, 255, .10); box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .24); }

/* Civic kurz, Abos */
.civic-kurz { display: grid; gap: 32px; }
.abo-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--v2-linie-fein); border-bottom: 1px solid var(--v2-linie-fein); align-self: end; }
.abo-zeile li { display: grid; gap: 4px; padding: 18px 14px 18px 0; }
.abo-zeile li + li { border-left: 1px solid var(--v2-linie-fein); padding-left: 14px; }
.abo-zeile span { color: var(--v2-text-2); font-size: 15px; }
.abo-zeile b { font: 680 28px/1.1 var(--v2-schrift-titel); color: var(--v2-text-hell); font-variant-numeric: tabular-nums; }
.abo-zeile small { color: var(--v2-text-3); font-size: 14px; }
@media (min-width: 1024px) { .civic-kurz { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; } }
.abos { display: grid; gap: 20px; }
.abo { display: grid; gap: 14px; align-content: start; padding: 24px 22px; border-top: 1px solid var(--v2-linie); }
.abo h3 { font: 680 24px/1.15 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.abo-preis b { font: 680 34px/1.1 var(--v2-schrift-titel); color: var(--v2-text-hell); font-variant-numeric: tabular-nums; }
.abo-preis span { color: var(--v2-text-2); }
.abo .v2-knopf { justify-self: start; }
@media (min-width: 900px) { .abos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kostenlos */
.kostenlos-liste { border-bottom: 1px solid var(--v2-linie-fein); }
.kostenlos-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr) 20px; gap: 4px 16px; align-items: center; padding: 18px 8px; border-top: 1px solid var(--v2-linie-fein); text-decoration: none; color: var(--v2-text); border-radius: 12px; }
.kostenlos-zeile:hover { background: rgba(var(--v2-licht-rgb), .06); }
.kz-name { font: 650 20px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.kz-text { grid-column: 2; color: var(--v2-text-2); font-size: 17px; }
.kostenlos-zeile .weiter-pfeil { grid-row: 1 / span 2; grid-column: 3; width: 18px; height: 18px; fill: none; stroke: var(--v2-text-3); stroke-width: 1.8; }
@media (min-width: 900px) { .kostenlos-zeile { grid-template-columns: 18px minmax(0, 3fr) minmax(0, 7fr) 20px; } .kz-text { grid-column: auto; } .kostenlos-zeile .weiter-pfeil { grid-row: auto; grid-column: auto; } }
.frei-liste { display: grid; gap: 0; border-bottom: 1px solid var(--v2-linie-fein); }
.frei { display: grid; gap: 14px; padding: 28px 8px; border-top: 1px solid var(--v2-linie-fein); scroll-margin-top: calc(var(--v2-kopf) + 16px); }
.frei-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.frei h2 { font: 680 clamp(24px, 1vw + 18px, 30px)/1.15 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); }
.frei .v2-lesetext { color: var(--v2-text-2); }

/* Person, Monogramm */
.person { display: grid; gap: 28px; align-items: start; }
.monogramm { width: 88px; height: 88px; border-radius: 24px; display: grid; place-items: center; font: 700 30px/1 var(--v2-schrift-titel); color: var(--v2-text-hell);
  background: var(--v2-glas); box-shadow: inset 0 0 0 1px var(--v2-linie), 0 0 0 6px rgba(var(--v2-licht-rgb), .05); }
@media (min-width: 760px) { .person { grid-template-columns: 88px minmax(0, 1fr); gap: 36px; } }

/* Bausteine, Kette */
.bausteine { display: grid; gap: 28px; }
.bausteine li { display: grid; gap: 10px; padding-top: 22px; position: relative; }
.bausteine li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--v2-licht-verlauf); opacity: .35; }
.bausteine h3 { font: 650 22px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.bausteine h3 a { text-decoration: none; }
.bausteine h3 a:hover { text-decoration: underline; text-decoration-color: rgba(var(--v2-licht-rgb), .6); text-underline-offset: 4px; }
.bausteine p { color: var(--v2-text-2); font-size: 17px; }
@media (min-width: 900px) { .bausteine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.kette { display: grid; gap: 0; counter-reset: k; border-left: 1px solid rgba(var(--v2-licht-rgb), .35); margin-left: 12px; }
.kette li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0 10px 22px; position: relative; color: var(--v2-text); font-size: 17px; }
.kette li::before { content: ''; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--v2-licht); box-shadow: 0 0 10px rgba(var(--v2-licht-rgb), .7); }
.kette .schritt-nr { font-size: 18px; }

/* Produktseiten */
.app-kopf-raster { display: grid; gap: 32px; align-items: center; }
.app-unterzeile { font: 600 clamp(20px, .8vw + 16px, 24px)/1.35 var(--v2-schrift-titel); color: var(--v2-text-hell); margin-top: 16px; letter-spacing: -0.01em; }
.app-kopf .v2-unterzeile { margin-top: 14px; }
.app-ring { justify-self: center; width: clamp(160px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--farbe) 16%, transparent), transparent 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe) 55%, transparent), 0 0 60px -10px color-mix(in srgb, var(--farbe) 60%, transparent); }
.app-ring span { font: 700 clamp(44px, 4vw, 64px)/1 var(--v2-schrift-titel); letter-spacing: -0.03em; color: var(--v2-text-hell); }
@media (prefers-reduced-motion: no-preference) { .app-ring { animation: ring-atmen 5s ease-in-out infinite; } }
@keyframes ring-atmen { 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe) 75%, transparent), 0 0 80px -6px color-mix(in srgb, var(--farbe) 70%, transparent); } }
@media (min-width: 1024px) { .app-kopf-raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.fakten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fakten li { padding: 4px 12px; border-radius: var(--v2-pille); background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie); font-size: 15px; color: var(--v2-text-2); }
.verwandt { margin-top: 36px; display: grid; gap: 12px; }
.verwandt ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.werkzeug-gruppen { display: grid; gap: 28px; }
@media (min-width: 1024px) { .werkzeug-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } .werkzeug-gruppen .zeilenliste > div { grid-template-columns: 1fr; } }
.paket-zeile { margin-top: 18px; color: var(--v2-text-2); font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.assistent-detail { display: grid; gap: 32px; }
@media (min-width: 1024px) { .assistent-detail { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; } }

/* Fuß */
.fuss-marken { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) { .fuss-raster { grid-template-columns: minmax(0, 3fr) repeat(5, minmax(0, 2fr)); gap: 36px 28px; } }

/* Hilfe-Chat (Nexus-Assistent) */
.hilfe { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--v2-z-leiste); display: grid; justify-items: end; gap: 12px; }
.hilfe-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border-radius: var(--v2-pille); border: 0; cursor: pointer;
  background: var(--v2-glas-stark); color: var(--v2-text-hell); font-weight: 600; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .45), 0 18px 40px -20px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe); }
.hilfe-knopf:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .75), 0 0 24px -6px rgba(var(--v2-licht-rgb), .6); }
.hilfe-fenster { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 120px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 10px; padding: 16px;
  border-radius: var(--v2-radius-l); background: var(--v2-glas-stark); border: 1px solid var(--v2-linie); box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: var(--v2-unschaerfe); backdrop-filter: var(--v2-unschaerfe); }
.hilfe-fenster[hidden] { display: none; }
.hilfe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hilfe-kopf b { font: 650 17px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.hilfe-zu { border: 0; background: transparent; color: var(--v2-text-2); font-size: 15px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.hilfe-zu:hover { color: var(--v2-text-hell); background: rgba(140, 180, 255, .1); }
.hilfe-verlauf { overflow-y: auto; display: grid; gap: 8px; align-content: start; padding-right: 4px; }
.hilfe-verlauf p { max-width: 90%; padding: 9px 12px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.hilfe-bot { justify-self: start; background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie); color: var(--v2-text); }
.hilfe-ich { justify-self: end; background: rgba(var(--v2-licht-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .4); color: var(--v2-text-hell); }
.hilfe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hilfe-chips button { border: 0; cursor: pointer; padding: 6px 12px; border-radius: var(--v2-pille); background: rgba(140, 180, 255, .08); box-shadow: inset 0 0 0 1px var(--v2-linie); color: var(--v2-text); font-size: 14px; }
.hilfe-chips button:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
.hilfe-form { display: flex; gap: 8px; }
.hilfe-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--v2-linie); background: rgba(5, 9, 22, .6); color: var(--v2-text); font-size: 16px; }
.hilfe-form input:focus-visible { outline: none; border-color: rgba(var(--v2-licht-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--v2-licht-rgb), .55); }
.hilfe-hinweis { font-size: 14px; color: var(--v2-text-3); }
@media print { .hilfe { display: none; } }

/* ---------- Feinschliff nach Sichtprüfung ---------- */
/* Abstand zwischen Abschnitten 96–128 px gesamt (V2-DESIGN.md §10) */
.abschnitt { padding-block: clamp(48px, 5vw, 64px); }
.seitenkopf { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 48px); }
.schritt { align-content: start; }
@media (min-width: 900px) {
  .app-zeile { grid-template-columns: 44px minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr) 150px 20px; }
  .app-liste:not(:has(.app-plattform)) .app-zeile { grid-template-columns: 44px minmax(0, 3fr) minmax(0, 6fr) 150px 20px; }
  .app-status { justify-self: end; }
}
.fuss-marken .v2-marke { border-radius: 10px; line-height: 1.4; padding: 3px 10px; }

/* Sichtprüfung Runde 2 */
/* „hidden“ gilt immer, auch wenn ein Bauteil display setzt (Berater-Ergebnis) */
@layer v2-basis { [hidden] { display: none !important; } }
/* Preise brechen nie mitten im Betrag um */
.pt-wert s, .pt-wert b, .abo-zeile b, .abo-preis b, .preis-zahl, .preisliste b { white-space: nowrap; }
@media (max-width: 899px) {
  .pt-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-zeile .pt-wert:nth-of-type(3) { justify-self: end; text-align: right; }
}
/* App-Zeilen auf dem Handy: Status unter den Text statt daneben */
@media (max-width: 899px) {
  .app-zeile { grid-template-columns: 44px minmax(0, 1fr); align-items: start; row-gap: 6px; }
  .app-zeichen { grid-row: 1 / span 3; }
  .app-status { grid-column: 2; grid-row: auto; justify-self: start; }
}
/* Civic-Abos auf schmalen Bildschirmen als Liste */
@media (max-width: 559px) {
  .abo-zeile { grid-template-columns: 1fr; }
  .abo-zeile li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 14px 0; }
  .abo-zeile li + li { border-left: 0; border-top: 1px solid var(--v2-linie-fein); padding-left: 0; }
  .abo-zeile small { grid-column: 2; justify-self: end; }
}
/* Chat-Knopf auf dem Handy kompakt, damit er keinen Text verdeckt */
@media (max-width: 619px) {
  .hilfe-knopf { min-height: 48px; width: 48px; padding: 0; justify-content: center; }
  .hilfe-knopf > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hilfe-knopf::before { content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hilfe-knopf .v2-punkt { position: absolute; top: 9px; right: 9px; }
  .hilfe-knopf { position: relative; }
  .v2-fuss { padding-bottom: 88px; }
}
.pt-wert small { white-space: nowrap; }
.werkzeug-gruppen .app-gruppe + .app-gruppe { margin-top: 0; }

/* =====================================================================
   Startseite: Scroll-Film „Ein Tag im Betrieb“ (assets/film.js, Bilder in assets/film/)
   Zwei Darstellungen: html.fahrt = Film mit Scrollstrecke; sonst ruhige Darstellung (ein Standbild je Abschnitt).
   ===================================================================== */
.story { --strecke: var(--strecke-breit); position: relative; }
@media (max-aspect-ratio: 19/20) { .story { --strecke: var(--strecke-hoch); } }
.story-canvas, .story-schleier, .story-leiste { display: none; }
.story-kapitel .vorzeile { font-size: 15px; }
.story-glas h2 { font: 680 clamp(26px, 1.4vw + 18px, 38px)/1.12 var(--v2-schrift-titel); letter-spacing: -0.028em; color: var(--v2-text-hell); text-wrap: balance; }
.story-glas p { color: var(--v2-text-2); font-size: 18px; }
.story-glas { display: grid; gap: 14px; }
.story-glas .knopf-reihe { margin-top: 6px; }
.story-klein { font-size: 14px !important; color: var(--v2-text-3) !important; }
.story-ruhig-leiste { display: none; }
.story-fehlertext { display: none; }

/* ---------- Ruhige Darstellung (ohne Bewegung, ohne WebGL, ohne JavaScript) ----------
   Gleiche Inhalte ohne Scrollstrecke: Startseitentext mit Startbild, darunter die Kapitel mit Standbildern. */
html:not(.fahrt) .story-buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); width: min(var(--v2-breite), calc(100% - 40px)); margin-inline: auto; padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 56px); }
html:not(.fahrt) .story-texte { display: contents; }
html:not(.fahrt) .story-kapitel.held { display: grid; gap: 22px; max-width: 680px; align-self: center; }
html:not(.fahrt) .story-poster { display: block; }
/* Illustrations-Hinweis als Bildunterschrift unter dem Startbild (§ 5 UWG, V-W3-1); in der Fahrt ist dasselbe Element das
   Schild auf der Bühne. Die Kapitel tragen ihn als Zeile .story-klein (nur hier sichtbar, siehe Fahrt unten). */
html:not(.fahrt) .story-bildhinweis { display: block; margin-top: 12px; font-size: 14px; color: var(--v2-text-3); }
html:not(.fahrt) .story-poster img, html:not(.fahrt) .story-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--v2-radius-l); box-shadow: inset 0 0 0 1px var(--v2-linie), 0 40px 80px -40px rgba(0, 0, 0, .9); background: var(--v2-flaeche); }
html:not(.fahrt) .story-kapitel:not(.held) { display: grid; gap: 24px; align-items: center; }
/* Hochformat: das Startbild ist das Hochformat-Bild 1 des Films – im Kasten 4 : 5 statt 16 : 10 (sonst nur ein Streifen) */
/* Hochkant: Startbild und Standbilder kommen im Hochformat (900 × 1600) → Kasten 4:5 statt eines beschnittenen Querbilds */
@media (max-aspect-ratio: 19/20) { html:not(.fahrt) .story-poster img, html:not(.fahrt) .story-bild { aspect-ratio: 4 / 5; } }
html.js.film-ok:not(.fahrt) .story-ruhig-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--v2-text-2); }
@media (min-width: 1024px) {
  html:not(.fahrt) .story-buehne { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; }
  html:not(.fahrt) .story-kapitel.held { grid-column: 1; grid-row: 1; }
  html:not(.fahrt) .story-start { grid-column: 2; grid-row: 1; align-self: center; }
  html:not(.fahrt) .story-ruhig-leiste { grid-column: 1 / -1; grid-row: 2; }
  html:not(.fahrt) .story-kapitel:not(.held) { grid-column: 1 / -1; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
  html:not(.fahrt) .story-kapitel:not(.held):nth-of-type(odd) .story-bild { order: 2; }
}
@media (max-width: 1023px) {
  html:not(.fahrt) .story-start { order: 1; }
  html:not(.fahrt) .story-kapitel.held { order: 0; }
  html:not(.fahrt) .story-ruhig-leiste { order: 2; }
  html:not(.fahrt) .story-kapitel:not(.held) { order: 3; }
}
.story.fehler .story-fehlertext { display: inline; }
.story-ruhig-leiste button { min-height: 44px; padding: 0 18px; border-radius: var(--v2-pille); border: 0; cursor: pointer; font: 600 15px var(--v2-schrift); color: var(--v2-text-hell); background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
.story-ruhig-leiste button:hover { background: rgba(var(--v2-licht-rgb), .14); }

/* ---------- Fahrt: Bühne klebt im Bild, die Dokumenthöhe liefert den Fortschritt ---------- */
html.fahrt .story { height: calc((1 + var(--strecke)) * 100svh); margin-top: calc(-1 * var(--v2-kopf)); background: var(--v2-nacht); }
html.fahrt .story-buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
html.fahrt .story-poster img, html.fahrt .story-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100lvh; }
html.fahrt .story-poster img { object-fit: cover; }
/* Startbild (Bild 1) liegt über der Zeichenfläche, bis der Player sein erstes Bild gezeichnet hat (Klasse „bereit“).
   Beide zeigen dieselbe Datei im selben Ausschnitt (cover, Mitte) → der Wechsel ist unsichtbar, daher ohne Überblendung. */
html.fahrt .story-canvas { display: block; z-index: 1; }
html.fahrt .story-poster { position: absolute; inset: 0; z-index: 2; }
html.fahrt .story.bereit .story-poster { visibility: hidden; }
html.fahrt .story-bild { display: none; }
.story-bild-quelle { display: contents; }
html.fahrt .story-start { display: contents; }
html.fahrt .story-schleier { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* Tagesbild: nur so viel Abdunklung, wie die Schrift links und Kopf/Leiste brauchen; das Bild bleibt hell */
  background:
    radial-gradient(130% 100% at 62% 42%, transparent 62%, rgba(3, 6, 15, .28) 100%),
    linear-gradient(90deg, rgba(3, 6, 15, .84) 0%, rgba(3, 6, 15, .66) 24%, rgba(3, 6, 15, .28) 42%, rgba(3, 6, 15, 0) 58%),
    linear-gradient(180deg, rgba(3, 6, 15, .5) 0, rgba(3, 6, 15, 0) 16%, rgba(3, 6, 15, 0) 80%, rgba(3, 6, 15, .62) 100%); }
/* feines Korn wie auf einer Filmaufnahme (statisch, kostet keine Rechenzeit) */
html.fahrt .story-schleier::after { content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
html.fahrt .story-texte { position: absolute; inset: var(--v2-kopf) 0 0; z-index: 4; display: grid; align-items: center; padding-block: 24px 96px; pointer-events: none; }
/* Kapitelwechsel nur über opacity/transform (T1): ein mitlaufendes filter: blur() auf der Karte zwang den Browser, die
   Glasfläche darin (backdrop-filter) in jedem Bild des Übergangs neu über die 3D-Szene zu rechnen – Hänger an den
   Kapitelgrenzen, vor allem in Safari */
/* Barrierefreiheit (M1): inaktive Kapitel nur optisch aus (opacity), nicht visibility:hidden – sonst fehlen sie
   Screenreadern. Ihre Links nimmt story.js aus der Tab-Folge; Klicks fängt pointer-events:none (.story-texte) ab. */
html.fahrt .story-kapitel { grid-area: 1 / 1; max-width: 470px; opacity: 0; transform: translateY(18px);
  transition: opacity 520ms var(--v2-kurve), transform 620ms var(--v2-kurve); }
html.fahrt .story-kapitel.held { max-width: 600px; display: grid; gap: 20px; }
html.fahrt .story-kapitel[data-aktiv] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
html.fahrt .story-glas { padding: 26px 28px; border-radius: var(--v2-radius-l); background: rgba(6, 12, 30, .7); border: 1px solid rgba(140, 180, 255, .16);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
html.fahrt .story-kapitel.held .v2-unterzeile { max-width: 44ch; }

/* Geräte mit Aussparung (viewport-fit=cover, W7): Textspalte mindestens so weit vom Rand wie die sichere Zone; ohne Aussparung
   (env = 0) gleich wie .v2-rahmen */
html.fahrt .story-texte { width: min(100% - 2 * max(var(--v2-rand), env(safe-area-inset-left), env(safe-area-inset-right)), var(--v2-breite)); }
/* Hinweis: Die Szene ist eine Illustration (kein echtes Firmengelände) */
.story-bildhinweis { display: none; }
html.fahrt .story-bildhinweis { display: block; position: absolute; right: 16px; top: calc(var(--v2-kopf) + 14px); z-index: 5; margin: 0; font-size: 12px; letter-spacing: .02em; color: rgba(233, 240, 255, .8); text-shadow: 0 1px 6px rgba(3, 6, 15, .85); pointer-events: none; }
@media (max-aspect-ratio: 19/20) { html.fahrt .story-bildhinweis { top: calc(var(--v2-kopf) + 58px); } }
/* In der Fahrt steht der Hinweis als Schild auf der Bühne; die Zeile in den Kapitelkarten gilt nur der ruhigen
   Darstellung (sonst doppelt, W5) */
html.fahrt .story-glas .story-klein { display: none; }

/* Leiste: Kapitel, Anhalten, Ohne Bewegung, Überspringen */
html.fahrt .story-leiste { display: inline-flex; position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right))); }
.story-punkte { display: flex; gap: 2px; }
.story-punkte button { display: inline-flex; align-items: center; gap: 8px; }
.story-punkt { width: 8px; height: 8px; border-radius: 50%; background: rgba(201, 215, 245, .45); transition: background var(--v2-schnell), box-shadow var(--v2-schnell); flex: none; }
.story-punkte button[aria-current] { color: var(--v2-text-hell); background: rgba(var(--v2-licht-rgb), .16); }
.story-punkte button[aria-current] .story-punkt { background: var(--v2-licht); box-shadow: 0 0 10px rgba(var(--v2-licht-rgb), .9); }
.story-punkte .name { font-size: 14px; }
.story-leiste [data-story-pause] { display: inline-flex; align-items: center; gap: 8px; }
.story-leiste svg { flex: none; width: 12px; height: 12px; }
.story-ueberspringen { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--v2-pille); font-size: 14px; color: #C9D7F5; text-decoration: none; }
.story-ueberspringen:hover { background: rgba(140, 180, 255, .12); color: var(--v2-text-hell); }
.story-leiste :is(button, a):focus-visible { outline: 2px solid var(--v2-licht); outline-offset: 2px; }
@media (max-width: 1100px) {
  html.fahrt .story-punkte button:not([aria-current]) .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.fahrt .story-punkte button:not([aria-current]) { min-width: 32px; justify-content: center; padding: 0; }
}

/* Symbolknöpfe (Hochformat und schmale Querformate): Anhalten, Ohne Bewegung und Überspringen ohne sichtbare
   Beschriftung; der Name bleibt als versteckter Text für Vorleseprogramme erhalten (W-Fix, V-W Befund 1) */
@media (max-aspect-ratio: 19/20), (max-width: 900px) {
  html.fahrt .story-leiste [data-story-ruhig] span, html.fahrt .story-leiste [data-story-pause] .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.fahrt .story-leiste [data-story-ruhig]::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
  html.fahrt .story-leiste [data-story-ruhig] { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 0; }
  html.fahrt .story-leiste [data-story-pause] { min-width: 32px; justify-content: center; padding: 0; }
  html.fahrt .story-ueberspringen { width: 32px; padding: 0; justify-content: center; }
  html.fahrt .story-ueberspringen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.fahrt .story-ueberspringen::before { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
}
/* Hochformat (Telefon): Text unten, Leiste oben, Schleier von unten */
@media (max-aspect-ratio: 19/20) {
  html.fahrt .story-schleier { background:
    linear-gradient(0deg, rgba(3, 6, 15, .92) 0%, rgba(3, 6, 15, .72) 28%, rgba(3, 6, 15, 0) 56%),
    linear-gradient(180deg, rgba(3, 6, 15, .5) 0, rgba(3, 6, 15, 0) 18%); }
  html.fahrt .story-texte { align-items: end; padding-block: 64px 28px; }
  html.fahrt .story-kapitel, html.fahrt .story-kapitel.held { max-width: 100%; }
  html.fahrt .story-kapitel.held { gap: 14px; }
  html.fahrt .story-kapitel.held .neu-pille, html.fahrt .story-kapitel.held .vertrauen, html.fahrt .story-kapitel.held .buehne-links { display: none; }
  html.fahrt .story-kapitel.held .v2-unterzeile { font-size: 17px; }
  html.fahrt .story-glas { padding: 20px; }
  html.fahrt .story-leiste { top: calc(var(--v2-kopf) + 10px); bottom: auto; }
}
/* Berührgeräte: jede Trefferfläche der Leiste mindestens 44 × 44 px */
@media (pointer: coarse) {
  html.fahrt .story-leiste :is(button, a), html.fahrt .story-punkte button:not([aria-current]),
  html.fahrt .story-leiste [data-story-pause], html.fahrt .story-leiste [data-story-ruhig] { min-width: 44px; height: 44px; }
}
@media (pointer: coarse) and (max-aspect-ratio: 19/20) {
  html.fahrt .story-bildhinweis { top: calc(var(--v2-kopf) + 72px); }
}
/* Schmale Telefone im Hochformat (unter 480 px): zwei Zeilen innerhalb der Bühne – oben die sechs Kapitelpunkte,
   darunter Anhalten, Ohne Bewegung, Überspringen; alle Knöpfe 44 × 44 px (W-Fix, V-W Befund 1) */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) {
  html.fahrt .story-leiste { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); transform: none; max-width: none; flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 4px; border-radius: 26px; }
  html.fahrt .story-punkte { flex: 1 0 100%; justify-content: center; gap: 0; }
  html.fahrt .story-punkte button:not([aria-current]), html.fahrt .story-punkte button[aria-current] { min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  html.fahrt .story-punkte .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.fahrt .story-leiste .trenner { display: none; }
  html.fahrt .story-leiste :is([data-story-pause], [data-story-ruhig], .story-ueberspringen) { min-width: 44px; width: 44px; height: 44px; }
  html.fahrt .story-bildhinweis { top: calc(var(--v2-kopf) + 120px); }
}
/* Kurze schmale Telefone (z. B. 320 × 640): Schlagzeile kleiner, damit der Kopftext nicht unter die zweizeilige Leiste rutscht */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 760px) {
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: 32px; }
  html.fahrt .story-kapitel.held .v2-unterzeile { font-size: 16px; }
  html.fahrt .story-texte { padding-bottom: 20px; }
  /* Kapitelkarten knapper */
  html.fahrt .story-glas { padding: 16px 18px; gap: 10px; }
  html.fahrt .story-glas h2 { font-size: 26px; }
  html.fahrt .story-glas p { font-size: 16px; }
  html.fahrt .story-glas .knopf-reihe { gap: 8px; }
}
/* Telefon quer (niedrige Fenster): Leiste oben rechts statt über dem Text, Karten knapper (W-Fix) */
@media (min-aspect-ratio: 19/20) and (max-height: 500px) {
  html.fahrt .story-leiste { top: calc(var(--v2-kopf) + 8px); bottom: auto; left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; }
  html.fahrt .story .story-bildhinweis { top: calc(var(--v2-kopf) + 20px); left: 16px; right: auto; }
  html.fahrt .story-texte { padding-block: 64px 12px; align-items: end; }
  html.fahrt .story-kapitel.held { gap: 10px; }
  html.fahrt .story-kapitel.held .neu-pille, html.fahrt .story-kapitel.held .vertrauen, html.fahrt .story-kapitel.held .buehne-links, html.fahrt .story-kapitel.held .vorzeile { display: none; }
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: 30px; }
  html.fahrt .story-kapitel.held .v2-unterzeile { font-size: 15px; }
  html.fahrt .story-glas { padding: 14px 18px; gap: 8px; }
  html.fahrt .story-glas h2 { font-size: 22px; }
  html.fahrt .story-glas p { font-size: 15px; }
  html.fahrt .story-glas .vorzeile { display: none; }
}
/* Auslauf am Ende der Strecke (A4-8): story.js setzt --auslauf (1 → 0) in den letzten 12 %; Tastaturfokus holt die Teile zurück */
html.fahrt .story-texte, html.fahrt .story-leiste { opacity: var(--auslauf, 1); transition: opacity 240ms linear; }   /* EBA-2: weich zurück nach Ruhe/Anhalten */
html.fahrt .story.ausgelaufen .story-leiste, html.fahrt .story.ausgelaufen .story-kapitel[data-aktiv] { pointer-events: none; }
html.fahrt .story-texte:focus-within, html.fahrt .story-leiste:focus-within { opacity: 1; }
html.fahrt .story.ausgelaufen .story-leiste:focus-within, html.fahrt .story.ausgelaufen .story-kapitel[data-aktiv]:focus-within { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  html.fahrt .story-kapitel { transition: opacity 200ms linear; transform: none; filter: none; }
}
@media print { .story-canvas, .story-leiste, .story-schleier { display: none !important; } html.fahrt .story { height: auto; } }

/* Partikelbühne auf Unterseiten (Assistenten) mit Pfad über der Vorzeile */
.buehne-unterseite .pfad { margin-bottom: 4px; }

/* =====================================================================
   W2 (06.10.2026): Seitenaufbau, Lesbarkeit über der hellen Szene, Abschnittslichter
   Nur Website-Anpassungen; v2-design.css bleibt unverändert.
   ===================================================================== */

/* Menü (Handy): zwei Aufrufe untereinander */
.menue-knoepfe { display: grid; gap: 10px; }

/* Status-Plaketten: „Vorschau“/„Beta“ ruhig im Lichtkanal, Bernstein bleibt „in Entwicklung“ vorbehalten (A4-12) */
.marke-status.vorschau { color: var(--v2-text-hell); background: rgba(var(--v2-licht-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .42); }

/* Abschnittslichter kräftiger (A4-5): herausgezoomt soll jeder Abschnitt sein eigenes Licht zeigen.
   Deckkraft .20 hält Nebentext (#B3C2E2) auch im hellsten Punkt bei ≥ 7 : 1 (gerechnet: Cyan 7,1 : 1). */
[data-ort="website"] .v2-abschnittslicht::before {
  background:
    radial-gradient(58% 68% at var(--x, 15%) var(--y, 20%), rgba(var(--v2-licht-rgb), .20), transparent 70%),
    radial-gradient(30% 40% at calc(100% - var(--x, 15%)) calc(100% - var(--y, 20%)), rgba(var(--v2-licht-rgb), .06), transparent 70%);
}
/* feine Lichtlinie oben an jedem Abschnitt, in der Farbe seines Kanals */
[data-ort="website"] main > .abschnitt.v2-abschnittslicht::after {
  content: ''; position: absolute; top: 0; left: max(var(--v2-rand), calc((100% - var(--v2-breite)) / 2)); right: max(var(--v2-rand), calc((100% - var(--v2-breite)) / 2));
  height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--v2-licht-rgb), .55), transparent); opacity: .6; pointer-events: none;
}

/* ---------- Startseite: Lesbarkeit über dem Film (A4-7, A4-13, A4-2; galt zuvor für die 3D-Szene) ---------- */
/* Schleier an die Textspalte gebunden: L = linker Rand der 1.240-px-Spalte; Text reicht bis L + 600 px */
html.fahrt .story-schleier {
  --spalte: max(var(--v2-rand), calc((100vw - var(--v2-breite)) / 2));
  background:
    linear-gradient(90deg, rgba(3, 6, 15, .9) 0, rgba(3, 6, 15, .82) calc(var(--spalte) + 560px), rgba(3, 6, 15, .45) calc(var(--spalte) + 780px), rgba(3, 6, 15, 0) calc(var(--spalte) + 1000px)),
    linear-gradient(180deg, rgba(3, 6, 15, .55) 0, rgba(3, 6, 15, 0) 16%, rgba(3, 6, 15, 0) 78%, rgba(3, 6, 15, .66) 100%);
}
html.fahrt .story-kapitel.held .v2-unterzeile { color: var(--v2-text); text-shadow: 0 1px 14px rgba(3, 6, 15, .9); }
html.fahrt .story-kapitel.held .vorzeile, html.fahrt .story-kapitel.held .vertrauen { color: var(--v2-text); text-shadow: 0 1px 10px rgba(3, 6, 15, .9); }
/* Bildhinweis als kleines Glasschild, 14 px (V2-DESIGN §5/§9) */
html.fahrt .story-bildhinweis { font-size: 14px; letter-spacing: 0; padding: 4px 12px; border-radius: 14px; color: var(--v2-text);
  max-width: min(calc(100% - 32px), 440px); line-height: 1.4; /* längerer Hinweis (06.10.): am Handy zwei Zeilen */
  background: rgba(6, 12, 30, .72); box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .18); text-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); right: max(16px, var(--v2-rand), env(safe-area-inset-right)); }
/* Breite Bildschirme: Hinweis unten rechts über Chat-Knopf und Kapitelleiste – oben rechts verdeckte der längere Text den
   Schriftzug am Turm (Prüfung S3, p 0,2). Handy/Hochformat und flache Querformate behalten ihren Platz oben. */
@media (min-aspect-ratio: 19/20) and (min-height: 501px) and (min-width: 900px) {
  html.fahrt .story-bildhinweis { top: auto; bottom: 92px; }
}
/* Schild nie über der Textspalte (Karten 470 px + 24 px Abstand): in schmalen Fenstern bricht es in zwei Zeilen (W4).
   „aspect-ratio > 19/20“, damit genau 19 : 20 (zählt auch als Hochformat) unverändert bleibt. */
@media (min-height: 501px) and (min-width: 900px) and (aspect-ratio > 19/20) {
  html.fahrt .story-bildhinweis { max-width: min(440px, calc(100% - 2 * var(--v2-rand) - 494px)); }
}
/* ---------- Niedrige Laptop- und Desktopfenster (W4, 07.10.2026) ----------
   Querformat ab 900 px Breite, 501–899 px Höhe (z. B. 1366×657, 1280×720, 1536×730): Startbereich und Kapitelkarten passen
   zwischen Kopfleiste und Kapitelleiste, die 64 px über dem Fensterrand beginnt. Ab 900 px Höhe bleibt alles wie bisher.
   Prüfung: Auftragsmappe werkzeuge/layout-pruefen.mjs (0 Überlappungen 501–1400 px Höhe, Luft zur Leiste ≥ 17 px). */
@media (min-aspect-ratio: 19/20) and (min-width: 900px) and (min-height: 501px) and (max-height: 899px) {
  html.fahrt .story-texte { padding-block: 16px 80px; }   /* 16 px unter dem Kopf, mindestens 16 px über der Leiste */
  html.fahrt .story-kapitel.held { --held-abstand: clamp(10px, 5vh - 20px, 20px); gap: var(--held-abstand); }
  html.fahrt .story-kapitel.held .buehne-links { margin-top: calc(var(--held-abstand) * -.3); }
  /* Schlagzeile wie bisher 4,5vw + 1rem, aber nur so groß, wie die Höhe trägt: 24,5vh − 127px reicht für vier Zeilen;
     sonst bis 66 px (dann drei Zeilen), in niedrigen Fenstern 22,9vh − 91px. Nie unter 40 px. */
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: clamp(40px, min(4.5vw + 1rem, max(24.5vh - 127px, min(66px, 22.9vh - 91px))), 88px); }
}
/* Unter 550 px Höhe reicht der Platz sonst nicht: Neu-Pille (nur Hinweis-Link) aus, Kapitelkarten knapper (Text ≥ 16 px) */
@media (min-aspect-ratio: 19/20) and (min-width: 900px) and (min-height: 501px) and (max-height: 549px) {
  html.fahrt .story-kapitel.held .neu-pille { display: none; }
  html.fahrt .story-glas { padding: 18px 22px; gap: 10px; }
  html.fahrt .story-glas h2 { font-size: 28px; }
  html.fahrt .story-glas p { font-size: 16px; }
}
/* ---------- Hochformat: Chat-Knopf und Schild verdecken keinen Text (W5, 07.10.2026; V-W3-2, V-W3-15) ----------
   Kapitelkarten 1–4 enden 8 px über dem Chat-Knopf (48 px hoch, unten 16 px bzw. Sicherheitsabstand des Geräts).
   Startbereich und Schlusskarte bleiben unten: ihre Knöpfe und Links stehen links, die Ecke unter dem Knopf bleibt frei.
   Prüfung: Auftragsmappe belege/bilder/V-W3/werkzeug/handy-chat.mjs (kein Text verdeckt, Tippziele berühren sich nicht). */
@media (max-aspect-ratio: 19/20) {
  html.fahrt .story-kapitel:not(.held):not(:last-child) { margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 28px); }
}
@media (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 760px) {
  html.fahrt .story-kapitel:not(.held):not(:last-child) { margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 36px); }   /* Innenabstand hier 20 px */
}
/* Niedrige schmale Telefone (z. B. 320 × 640, 360 × 640, 375 × 667): Vorzeilen aus wie am Telefon quer – sonst verdeckt das
   zweizeilige Schild unter der Leiste die Vorzeile des Startbereichs und den Kopf der Schlusskarte */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 700px) {
  html.fahrt .story-kapitel .vorzeile { display: none; }
}
/* Sehr schmale Telefone (unter 340 px): Knöpfe im Startbereich etwas schmaler, damit „Kostenloses Erstgespräch“ den
   Chat-Knopf nicht berührt (320 px: vorher 5,5 px Überschneidung) */
@media (max-aspect-ratio: 19/20) and (max-width: 339px) {
  html.fahrt .story-kapitel.held .knopf-reihe .v2-knopf { padding-inline: 14px; }
}
/* ---------- Schmale Querformate (W5, 07.10.2026; V-W3-3): 600–899 px breit, 501–899 px hoch ----------
   Die Textspalte braucht hier fast die ganze Breite; neben ihr ist kein Platz für das Schild. Es steht deshalb wie ab 900 px
   unten rechts (über Kapitelleiste und Chat-Knopf), Startbereich und Karten enden darüber. Abstände wie W4; die Schlagzeile
   bleibt zweizeilig (höchstens 46 px bzw. 6,8vw) und wird in niedrigen Fenstern kleiner (49vh − 210px).
   „aspect-ratio > 19/20“, damit genau 19 : 20 (zählt auch als Hochformat) unverändert bleibt.
   Prüfung: Auftragsmappe werkzeuge/layout-pruefen.mjs (0 Überlappungen 600–899 × 501–899). */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 501px) and (max-height: 899px) and (aspect-ratio > 19/20) {
  html.fahrt .story-bildhinweis { top: auto; bottom: 84px; }
  html.fahrt .story-texte { padding-block: 16px 120px; }   /* Schild 84 + 28 px hoch, darüber 8 px Luft */
  html.fahrt .story-kapitel.held { --held-abstand: clamp(10px, 5vh - 20px, 20px); gap: var(--held-abstand); }
  html.fahrt .story-kapitel.held .buehne-links { margin-top: calc(var(--held-abstand) * -.3); }
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: clamp(36px, min(4.5vw + 1rem, 6.8vw, 49vh - 210px), 46px); }
}
/* unter 600 px Höhe: Neu-Pille aus, Kapitelkarten knapper (Text ≥ 16 px) – wie W4 unter 550 px */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 501px) and (max-height: 599px) and (aspect-ratio > 19/20) {
  html.fahrt .story-kapitel.held .neu-pille { display: none; }
  html.fahrt .story-glas { padding: 18px 22px; gap: 10px; }
  html.fahrt .story-glas h2 { font-size: 28px; }
  html.fahrt .story-glas p { font-size: 16px; }
}
/* unter 550 px Höhe zusätzlich die Vertrauenszeile aus */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 501px) and (max-height: 549px) and (aspect-ratio > 19/20) {
  html.fahrt .story-kapitel.held .vertrauen { display: none; }
}
/* ---------- Telefon quer: Illustrations-Schild unten rechts über dem Chat-Knopf (W6, 07.10.2026; V-N-4) ----------
   Oben links lag das Schild unter der Kapitelleiste (oben rechts) – „keine echten Personen“ war nicht lesbar. Rechts neben
   den Kapitelkarten (höchstens 470 px ab dem Seitenrand) ist die Spalte zwischen Leiste und Chat-Knopf frei: Das Schild
   steht dort wie auf breiten Bildschirmen unten rechts, 12 px über dem Chat-Knopf, und bricht in zwei Zeilen (schmalste
   Telefone bis vier), damit es nie in die Kartenspalte reicht (12 px Abstand). Seit W7 nur noch ab 961 px Breite (niedrige
   Desktopfenster); bis 960 px steht das Schild unter der Leiste (Block darunter). */
@media (min-aspect-ratio: 19/20) and (max-height: 500px) and (min-width: 961px) {
  html.fahrt .story .story-bildhinweis { top: auto; left: auto; right: max(16px, env(safe-area-inset-right));
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px);
    max-width: min(calc(16.5em + 24px), calc(100% - max(16px, env(safe-area-inset-right)) - max(var(--v2-rand), env(safe-area-inset-left), env(safe-area-inset-right)) - 482px)); }
}
/* ---------- Telefon quer bis 960 px: Schild einzeilig rechts direkt unter der Kapitelleiste (W7, 08.10.2026; V-W6a-1, V-W6b) ----------
   Unten rechts verdeckte es im Kapitel „Ihr Team“ die Figuren und brach bei 667/740 px in 3–4 Zeilen um; unter 660 px lag es unter
   der Leiste. Unter der Leiste ist nur Wand/Decke zu sehen. Wo die Höhe knapp ist (bis 380 px), wird der Startbereich knapper
   (Schlagzeile 28 px, Unterzeile zweizeilig) und „Pakete und Preise“ fällt in der Schlusskarte weg (wie Neu-Pille und
   Sichtbarkeits-Link im Startbereich; Preise bleiben über das Menü erreichbar). Unter 660 px steht das Schild im Startbereich
   schmal rechts neben Schlagzeile und Unterzeile (sonst reicht die Höhe nicht), bis 340 px Höhe sind die Karten knapper
   (Knöpfe 44 px, Text 15 px). Prüfung: Auftragsmappe belege/bilder/W7/werkzeug/schild-w7.mjs + W6/werkzeug/layout-touch.mjs. */
@media (min-aspect-ratio: 19/20) and (max-height: 500px) and (max-width: 960px) {
  html.fahrt .story .story-bildhinweis { top: calc(var(--v2-kopf) + 70px); bottom: auto; left: auto; right: max(16px, env(safe-area-inset-right));
    max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right))); padding-block: 3px; }
  html.fahrt .story-texte { padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* Home-Leiste (iPhone quer) frei, V-W7a */
}
@media (min-aspect-ratio: 19/20) and (max-height: 380px) and (max-width: 960px) {
  html.fahrt .story-kapitel.held { gap: 8px; }
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: 28px; }
  html.fahrt .story-kapitel.held .v2-unterzeile { max-width: calc(100vw - max(var(--v2-rand), env(safe-area-inset-left), env(safe-area-inset-right)) - max(16px, env(safe-area-inset-right)) - 64px); }
  html.fahrt .story-glas .story-mehr { display: none; }
}
@media (min-aspect-ratio: 19/20) and (max-height: 500px) and (max-width: 659px) {
  html.fahrt .story:has(.story-kapitel.held[data-aktiv]) .story-bildhinweis { max-width: calc(100% - max(var(--v2-rand), env(safe-area-inset-left), env(safe-area-inset-right)) - 390px - max(16px, env(safe-area-inset-right))); }
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: clamp(22px, 15vh - 26px, 28px); }
  html.fahrt .story-kapitel.held .v2-unterzeile { max-width: 378px; }
}
@media (min-aspect-ratio: 19/20) and (max-height: 340px) and (max-width: 659px) {
  html.fahrt .story-kapitel.held .v2-unterzeile { line-height: 1.5; }
  html.fahrt .story-kapitel .knopf-reihe .v2-knopf { min-height: 44px; }
  html.fahrt .story-glas { padding: 10px 16px; gap: 6px; }
  html.fahrt .story-glas h2 { font-size: 20px; }
  html.fahrt .story-glas p { line-height: 1.45; }
  html.fahrt .story-glas .knopf-reihe { margin-top: 0; }
}
/* Weicher Auslauf: helle Szene → dunkler Seitenrahmen (A4-8). FOB-1 (16.10.): Der Verlauf liegt IN der Bühne über Film,
   Schleier und Kapitelkarten (z 4, nach .story-texte gemalt), aber UNTER dem Bildhinweis (z 5) – vorher lag er als
   .story::after (z 6) über der ganzen Bühne und dunkelte den Hinweis am Filmende auf 1,2 : 1 ab. story.js setzt
   --auslauf-weg = Reststrecke bis zum Ende in px: Der Verlauf schiebt sich wie bisher von unten herein und steht ab p 1
   an der Bühnenunterkante (dieselbe Lage wie früher am Ende des Story-Abschnitts). Ohne Wert bleibt er unsichtbar.
   SBA-1 (17.10.): z 3 statt 4 – der Verlauf liegt jetzt UNTER den Kapitelkarten (z 4). Steht die Seite in Ruhe oder
   angehalten kurz vor dem Ende (Karte voll deckend, EBA-2), dunkelte er am Handy sonst die Signatur der Schlusskarte auf
   2,3–3,6 : 1 ab. Beim Scrollen blendet die Karte ohnehin aus (--auslauf), der Auslauf wirkt also gleich. */
html.fahrt .story-buehne::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34svh; z-index: 3; pointer-events: none;
  transform: translateY(min(var(--auslauf-weg, 100vh), 100%));
  background: linear-gradient(180deg, rgba(3, 6, 15, 0), rgba(3, 6, 15, .55) 45%, var(--v2-nacht)); }
@media (max-aspect-ratio: 19/20) {
  /* Hochformat: Text sitzt unten; der Schleier reicht bis über die Vorzeile (sie steht bei etwa 49 % Höhe) */
  html.fahrt .story-schleier { background:
    linear-gradient(0deg, rgba(3, 6, 15, .95) 0%, rgba(3, 6, 15, .84) 38%, rgba(3, 6, 15, .55) 60%, rgba(3, 6, 15, 0) 80%),
    linear-gradient(180deg, rgba(3, 6, 15, .5) 0, rgba(3, 6, 15, 0) 18%); }
  /* Vorzeile als Glas-Pille, damit sie unabhängig von der Szene lesbar bleibt (≥ 4,8 : 1) */
  html.fahrt .story-kapitel.held .vorzeile { justify-self: start; padding: 4px 12px; border-radius: var(--v2-pille); background: rgba(6, 12, 30, .72);
    box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: none; }
}

/* ---------- Chat-Knopf überdeckt keinen Text (A4-14) ----------
   Immer als runder 48-px-Knopf; ab 1.400 px Breite steht er im Rand neben der 1.240-px-Spalte. */
.hilfe-knopf { min-height: 48px; width: 48px; padding: 0; justify-content: center; position: relative; }
.hilfe-knopf > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hilfe-knopf::before { content: ''; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hilfe-knopf .v2-punkt { position: absolute; top: 9px; right: 9px; }
.v2-fuss { padding-bottom: 88px; }
@media (min-width: 1400px) { .hilfe { right: max(16px, calc((100vw - var(--v2-breite)) / 2 - 72px)); } }

/* ---------- Startseite: Bausteine ---------- */
.ehrlich { display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border-radius: 14px; color: var(--v2-text); font-size: 17px;
  background: rgba(var(--v2-licht-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .26); }
.ehrlich .v2-punkt { flex: none; transform: translateY(-2px); }
.ehrlich.gross { font-size: 19px; }
.assistent.einstieg h3 { font-size: 21px; }
.loesung-text > .knopf-reihe { align-items: center; gap: 12px 24px; }
.preise-kurz { display: grid; gap: 14px; }
.preis-kurz { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 24px 22px; border-radius: var(--v2-radius-m); text-decoration: none; color: var(--v2-text);
  background: var(--v2-flaeche); border: 1px solid var(--v2-linie); transition: border-color var(--v2-schnell), background var(--v2-schnell); }
.preis-kurz:hover { border-color: rgba(var(--v2-licht-rgb), .5); background: rgba(var(--v2-licht-rgb), .07); }
.pk-kopf { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.pk-name { font: 650 19px/1.3 var(--v2-schrift-titel); color: var(--v2-text-hell); letter-spacing: -0.015em; }
.pk-wert { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.pk-wert b { font: 680 32px/1.1 var(--v2-schrift-titel); letter-spacing: -0.025em; color: var(--v2-text-hell); white-space: nowrap; }
.pk-wert small { font-size: 15px; color: var(--v2-text-2); }
.pk-text { color: var(--v2-text-2); font-size: 16px; padding-right: 26px; }
.preis-kurz .weiter-pfeil { position: absolute; right: 20px; bottom: 22px; width: 18px; height: 18px; fill: none; stroke: var(--v2-licht); stroke-width: 1.8; transition: transform var(--v2-schnell); }
.preis-kurz:hover .weiter-pfeil { transform: translateX(3px); }
@media (min-width: 900px) { .preise-kurz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.zusagen-kurz { display: grid; gap: 8px; margin-top: 20px; }
.zusagen-kurz li { display: flex; gap: 12px; align-items: baseline; color: var(--v2-text); font-size: 17px; }
.zusagen-kurz li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-licht); box-shadow: 0 0 8px rgba(var(--v2-licht-rgb), .7); transform: translateY(-2px); }
.person-links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 22px; }

/* ---------- Lösungen auf Wunsch ---------- */
.arten { display: grid; gap: 14px; }
.arten > div { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; border-radius: var(--v2-radius-m); background: var(--v2-flaeche); border: 1px solid var(--v2-linie); }
.arten dt { font: 650 21px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); display: flex; gap: 12px; align-items: center; }
.arten dt::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-licht); box-shadow: 0 0 10px rgba(var(--v2-licht-rgb), .8); }
.arten dd { display: grid; gap: 12px; color: var(--v2-text-2); font-size: 17px; }
@media (min-width: 760px) { .arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .arten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.zielgruppen { display: grid; gap: 40px; }
.zielgruppe { display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1px solid rgba(var(--v2-licht-rgb), .35); }
.zielgruppe .haken li { font-size: 17px; }
@media (min-width: 900px) { .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.einstieg-raster { display: grid; gap: 32px; }
.einstieg-karte { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); }
@media (min-width: 1024px) { .einstieg-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; } }
.ehrlich-text { display: grid; gap: 18px; }

/* ---------- Werkstatt und Produkte: ruhige Karten ohne Kürzel-Kreise ---------- */
.werkstatt-raster, .produkt-raster { display: grid; gap: 14px; }
.werkstatt-karte, .produkt-karte { position: relative; display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; border-radius: var(--v2-radius-m);
  background: var(--v2-flaeche); border: 1px solid var(--v2-linie); scroll-margin-top: calc(var(--v2-kopf) + 16px); overflow: hidden; }
.werkstatt-karte::before, .produkt-karte::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--v2-licht-verlauf); opacity: .5; }
.werkstatt-karte:target, .produkt-karte:target { border-color: rgba(var(--v2-licht-rgb), .6); box-shadow: 0 0 30px -12px rgba(var(--v2-licht-rgb), .8); }
.wk-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wk-plattform { font-size: 14px; color: var(--v2-text-3); }
.werkstatt-karte h3, .produkt-karte h3 { font: 650 22px/1.25 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); margin-top: 4px; }
.werkstatt-karte p, .produkt-karte p { color: var(--v2-text-2); font-size: 17px; }
.produkt-karte .knopf-reihe { margin-top: 8px; align-items: center; gap: 12px 22px; }
@media (min-width: 700px) { .werkstatt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .produkt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .werkstatt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* Zähler im Kontaktformular: Warnfarbe, wenn zu lang (W1-Offen) */
.feld-hinweis.zu-lang { color: var(--v2-fehler); font-weight: 550; }

/* =====================================================================
   T3 (08.10.2026): Schlusszeile der Fahrt und Schleier-Variante zum Vergleich
   ===================================================================== */
/* Schlusszeile (Collin, wörtlich): leise Signatur unter den Knöpfen der Schlusskarte – Haarlinie darüber, Nebentext-Farbe
   (#B3C2E2 auf der Karte ≥ 7 : 1), 15 px; steht in der Fahrt und in der Darstellung ohne Bewegung */
.story .story-glas p.story-signatur { position: relative; margin-top: 2px; padding: 14px 0 0 19px; border-top: 1px solid var(--v2-linie);
  font-size: 15px; line-height: 1.45; color: var(--v2-text-2); text-wrap: pretty; }
.story-signatur .v2-punkt { position: absolute; left: 0; top: calc(14px + .725em - 4.5px); }
.story-signatur-angebot { color: var(--v2-text-hell); font-weight: 600; }
.story-signatur-angebot::before { content: '\A'; white-space: pre; }   /* zweiter Satz in eigener Zeile */
/* Knappe Formate: Schlusszeile 14 px (Klartext-Untergrenze) mit kleinerem Abstand. Telefon quer und sehr niedrige Telefone
   im Hochformat: „Pakete und Preise“ fällt in der Schlusskarte weg (wie bisher schon unter 380 px Höhe; Preise bleiben
   über das Menü erreichbar), damit die Karte nicht höher wird als vorher. */
@media (max-height: 600px), (max-aspect-ratio: 19/20) and (max-width: 479px) {
  .story .story-glas p.story-signatur { padding-top: 10px; font-size: 14px; line-height: 1.4; }
  .story-signatur .v2-punkt { top: calc(10px + .7em - 4.5px); }
}
@media (min-aspect-ratio: 19/20) and (max-height: 500px), (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 700px) {
  html.fahrt .story-glas .story-mehr:has(~ .story-signatur) { display: none; }
  html.fahrt .story .story-glas p.story-signatur { margin-top: 0; padding-top: 8px; }
  html.fahrt .story-signatur .v2-punkt { top: calc(8px + .7em - 4.5px); }
}
/* Telefon hochkant: Die Schlusszeile endet samt Haarlinie links vor dem Chat-Knopf (unten rechts, 48 px + 16 px Rand) –
   kein Text unter dem Knopf, die Ecke der Karte bleibt frei wie vorher (Layoutprüfung 10.10.: Text × Chat bei 375×667). */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) {
  html.fahrt .story .story-glas p.story-signatur { margin-right: 36px; }
}
/* T3-Nachbesserung (10.10.): Wo Platz ist, endet auch die Schlusskarte wie die Kapitel 1–4 über dem Chat-Knopf – vorher lag
   der Knopf auf der unteren rechten Kartenecke (Layoutprüfung: Karte × Chat bei 390×844, 360×740, 375×667; nur der Rahmen,
   kein Text). Nur in den Höhenbändern, die die Durchlaufmessung (Auftragsmappe track1/T3-bild/nach/layout/) als frei
   belegt: in den Lücken dazwischen stieße die gehobene Karte an das Hinweis-Schild, unter 360 px Breite (320/340) ist die
   Karte zu hoch – dort bleibt die Ecke wie im Hauptstand. */
@media (max-aspect-ratio: 19/20) and (min-width: 360px) and (max-width: 479px) and (min-height: 660px) and (max-height: 700px),
       (max-aspect-ratio: 19/20) and (min-width: 360px) and (max-width: 479px) and (min-height: 730px) and (max-height: 760px),
       (max-aspect-ratio: 19/20) and (min-width: 412px) and (max-width: 479px) and (min-height: 640px) and (max-height: 760px) {
  html.fahrt .story-kapitel:last-child { margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 36px); }
}
@media (max-aspect-ratio: 19/20) and (min-width: 360px) and (max-width: 479px) and (min-height: 800px) {
  html.fahrt .story-kapitel:last-child { margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 28px); }
}
/* Telefon quer (≤ 500 px Höhe) und sehr kleine Telefone hochkant (≤ 600 px Höhe): Dort wird die Schlusskarte zur höchsten
   Karte und schöbe alle Kapitel unter Kopfleiste und Hinweis-Schild. Der Satz unter der Überschrift weicht hier der
   Schlusszeile – die Karte ist so hoch wie vorher. Er wiederholt die beiden Knöpfe („Problem schildern“, „Erstgespräch
   buchen“) und nennt zusätzlich den Demo-Assistenten; dieser Hinweis fehlt hier in der Karte (der Demo-Assistent steht
   weiter unten auf der Startseite und im Fuß unter „Kostenlos“). Gestaltungsfrage an Collin. */
@media (min-aspect-ratio: 19/20) and (max-height: 500px), (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 600px) {
  html.fahrt .story-glas:has(> .story-signatur) > p:not([class]) { display: none; }
}

/* Schleier-Variante „leicht“ (nur Vorschau: Adresszusatz ?schleier=leicht im Entwurf, siehe build.mjs SCHLEIER_VORSCHAU).
   Die Tagesszene bleibt hell: Abdunklung nur schmal hinter der Textspalte, an keiner Stelle über 0,5 Deckkraft (links 0,35,
   oben/unten 0,2 → Ecke 1 − 0,65 · 0,8 = 0,48). Lesbarkeit tragen deckende Karten (0,9) statt großflächiger Unschärfe –
   ohne backdrop-filter, das über der bewegten Szene jedes Bild neu gerechnet werden muss. */
html.fahrt[data-schleier="leicht"] .story-schleier {
  background:
    linear-gradient(90deg, rgba(3, 6, 15, .35) 0, rgba(3, 6, 15, .3) calc(var(--spalte) + 420px), rgba(3, 6, 15, 0) calc(var(--spalte) + 640px)),
    linear-gradient(180deg, rgba(3, 6, 15, .2) 0, rgba(3, 6, 15, 0) 12%, rgba(3, 6, 15, 0) 86%, rgba(3, 6, 15, .2) 100%); }
html.fahrt[data-schleier="leicht"] .story-glas,
html.fahrt[data-schleier="leicht"] .story-kapitel.held { background: rgba(6, 12, 30, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fahrt[data-schleier="leicht"] .story-kapitel.held { padding: 24px 28px; border-radius: var(--v2-radius-l); border: 1px solid rgba(140, 180, 255, .16);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); }
@media (max-aspect-ratio: 19/20) {
  html.fahrt[data-schleier="leicht"] .story-schleier { background:
    linear-gradient(0deg, rgba(3, 6, 15, .45) 0%, rgba(3, 6, 15, .35) 30%, rgba(3, 6, 15, 0) 55%),
    linear-gradient(180deg, rgba(3, 6, 15, .2) 0, rgba(3, 6, 15, 0) 12%); }
  html.fahrt[data-schleier="leicht"] .story-kapitel.held { padding: 18px 20px; margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 40px); } /* Karte endet über dem Chat-Knopf */
  html.fahrt[data-schleier="leicht"] .story-kapitel.held .vorzeile { background: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Schleier über dem Film (Nachbesserung 14.10.2026) ----------
   Der kräftige Schleier stammt aus der 3D-Zeit. Er bleibt für den Startbereich (Kapitel 1: Schlagzeile ohne eigene Karte
   direkt auf dem Bild) und für den Feierabend (Kapitel 6: dunkles Bild, Schlusskarte blendet im Auslauf aus – mit leichtem
   Schleier fiel die Schlusszeile auf 4,25 : 1). In den Tagesabschnitten (Kapitel 2–5) tragen die Glaskarten ihre
   Lesbarkeit selbst → Schleier weich auf 35 % (nur opacity, wird vom Compositor überblendet).
   Gemessen (player/messung/schleier/): freie Bildfläche 0,71–0,80 → 0,90–0,93 der gerechneten Helligkeit, Kontrast ≥ 7 : 1. */
html.fahrt .story-schleier { transition: opacity 620ms var(--v2-kurve); }
html.fahrt .story:is([data-kapitel="1"], [data-kapitel="2"], [data-kapitel="3"], [data-kapitel="4"]) .story-schleier { opacity: .35; }
@media (prefers-reduced-motion: reduce) { html.fahrt .story-schleier { transition: none; } }
/* ---------- Feierabend (Kapitel 6) quer: eigener Schleier mit Verlauf (SBI-1, 17.10.2026) ----------
   Der kräftige Schleier (bis .82 bei Spalte + 560 px) lag genau über dem Monitor mit „Alles erledigt.“: Auf der Seite
   kamen nur 26–28 % der Bildhelligkeit an (Kopf 4,2, Liste 2,8, Uhr 3,0 : 1; im Rohbild 8,8–12,6 : 1). Jetzt: kräftig
   hinter der Karte, ab ihrer rechten Kante schnell schwach über dem Monitor; oben (Kopfleiste) und unten (Leiste) wie
   bisher, dazu eine weiche Randabdunklung für die Abendstimmung. Eigene Ebene (.story-buehne::before), damit der Wechsel
   aus Kapitel 5 eine reine Überblendung bleibt (opacity, Compositor) – ein Tausch des Hintergrunds springt.
   SBI-2: Die Kamera fährt in Kapitel 6 näher an den Monitor; die Karte (470 px) schnitt den Haken-Kreis an (1440 px:
   22 px, 1920 px: 56 px). Auf Desktopfenstern ab 700 px Höhe endet die Karte jetzt 20 px vor dem Kreis (Rohbild x ≈ 628 bei 1600 px
   Breite, cover-Faktor max(100vw/1600, 100lvh/900)), höchstens 470, mindestens 400 px breit. */
@media (min-aspect-ratio: 19/20) {
  html.fahrt .story {
    --k6-links: max(var(--v2-rand), env(safe-area-inset-left), env(safe-area-inset-right), (100vw - var(--v2-breite)) / 2);
    --k6-breite: 470px;
    --k6-rechts: calc(var(--k6-links) + var(--k6-breite)); }
  html.fahrt .story-buehne::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden;
    transition: opacity 620ms var(--v2-kurve), visibility 0s linear 620ms;   /* außerhalb von Kapitel 6 nicht gemalt */
    background:
      radial-gradient(125% 110% at 60% 45%, transparent 58%, rgba(3, 6, 15, .34) 100%),
      linear-gradient(90deg, rgba(3, 6, 15, .86) 0, rgba(3, 6, 15, .8) calc(var(--k6-rechts) - 120px), rgba(3, 6, 15, .42) var(--k6-rechts),
        rgba(3, 6, 15, .16) calc(var(--k6-rechts) + 90px), rgba(3, 6, 15, .08) calc(var(--k6-rechts) + 300px), rgba(3, 6, 15, 0) calc(var(--k6-rechts) + 520px)),
      linear-gradient(180deg, rgba(3, 6, 15, .55) 0, rgba(3, 6, 15, 0) 16%, rgba(3, 6, 15, 0) 78%, rgba(3, 6, 15, .66) 100%); }
  html.fahrt .story[data-kapitel="5"] .story-buehne::before { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.fahrt .story[data-kapitel="5"] .story-schleier { opacity: 0; }
}
/* Ab 700 px Höhe: Die schmalere Karte stellt die beiden Knöpfe untereinander (≈ 60 px höher); darunter bliebe zu wenig Luft
   zur Kapitelleiste (gemessen 1280×540/1100×520/960×600: Überlappung) – dort bleibt die Karte 470 px breit. */
@media (min-aspect-ratio: 19/20) and (min-width: 900px) and (min-height: 700px) {
  html.fahrt .story { --k6-breite: clamp(400px, 50vw - 172 * max(100vw / 1600, 100lvh / 900) - 20px - var(--k6-links), 470px); }
  html.fahrt .story-kapitel[data-kapitel="5"] { max-width: var(--k6-breite); }
  /* Überschrift bleibt einzeilig (gemessen 10,67 em breit, Reserve bis 10,9 em; Innenbreite = Karte − 2 × 28 px) statt „Sagen Sie / uns, …“ */
  html.fahrt .story-kapitel[data-kapitel="5"] .story-glas h2 { font-size: min(clamp(26px, 1.4vw + 18px, 38px), (var(--k6-breite) - 56px) / 10.9); }
}
@media (prefers-reduced-motion: reduce) { html.fahrt .story-buehne::before { transition: none; } }
@media print { html.fahrt .story-buehne::before { display: none; } }
/* ---------- Feierabend (Kapitel 6) auf Tablets und in kleinen Fenstern: Karte und Bildausschnitt (K6-1, 17.10.2026) ----------
   Collin („Karte umstellen“): Die Schlusskarte darf Uhr, Haken und Text des Feierabend-Monitors nirgends verdecken. Gemessen
   (kapitel6-tablet/): Die Monitorschrift steht im Filmbild (1600 × 900) bei x 617–973 (Bilder 215–240); bei 1024×768,
   1100×650, 960×960 lag die Karte über „Alles erledigt.“ und der Uhr, bei 1180×820 und 2560×1440 am Haken-Kreis.
   1. Bildausschnitt: In schmaleren Querformaten als 16 : 9 schneidet „cover“ links und rechts Bild ab. Die Zeichenfläche ist
      deshalb so breit wie das ganze Filmbild (mittig, Bühne schneidet ab – sonst sieht alles aus wie vorher). In Kapitel 6
      schwenkt sie weich nach rechts, bis die Monitorschrift 16 px rechts der Karte beginnt (story.js misst die Karte und setzt
      --k6-dx). Nur wo der Schwenk nicht reicht (niedrige Fenster, 2560 px), fährt das Bild zusätzlich leicht näher heran
      (--k6-s, höchstens 1,12, Ursprung linke Kante). Wird die Schrift so nicht ganz frei (Telefon quer, Karte unten), bleibt
      der Ausschnitt unverändert. Reine transform-Überblendung (Compositor), wie Schleier und Karten.
   2. Fenster 501–699 px hoch: Die Karte wird so schmal, dass die Schrift nach dem Schwenk frei bleibt (höchstens 470, mindestens
      360 px); die Knöpfe stehen dann untereinander. Damit die Karte nicht höher wird und die Kapitelleiste frei bleibt, weicht
      in der schmalen Karte (unter 460 px) der Satz unter der Überschrift – wie schon am Telefon quer (er wiederholt die beiden
      Knöpfe). Collins Schlusszeile bleibt. */
@media (min-aspect-ratio: 19/20) {
  html.fahrt .story-canvas { left: min(0px, 50% - 100lvh * 8 / 9); width: max(100%, 100lvh * 16 / 9); transform-origin: 0 50%;
    transition: transform 900ms var(--v2-kurve); }
  html.fahrt .story[data-kapitel="5"] .story-canvas { transform: translateX(var(--k6-dx, 0px)) scale(var(--k6-s, 1)); }
}
@media (min-aspect-ratio: 19/20) and (min-width: 900px) and (min-height: 501px) and (max-height: 699px) {
  html.fahrt .story { --k6-breite: clamp(360px, 616 * max(100vw / 1600, 100lvh / 900) - 16px - var(--k6-links), 470px); }
  html.fahrt .story-kapitel[data-kapitel="5"] { max-width: var(--k6-breite); }
  html.fahrt .story-kapitel[data-kapitel="5"] .story-glas { container: k6-karte / inline-size; }
  html.fahrt .story-kapitel[data-kapitel="5"] .story-glas h2 { font-size: min(clamp(26px, 1.4vw + 18px, 38px), (var(--k6-breite) - 56px) / 10.9); }
  @container k6-karte (max-width: 459px) {
    html.fahrt .story-glas:has(> .story-signatur) > p:not([class]) { display: none; }
  }
}
@media (min-aspect-ratio: 19/20) and (min-width: 900px) and (min-height: 501px) and (max-height: 549px) {
  html.fahrt .story-kapitel[data-kapitel="5"] .story-glas h2 { font-size: min(28px, (var(--k6-breite) - 44px) / 10.9); }
}
@media (prefers-reduced-motion: reduce) { html.fahrt .story-canvas { transition: none; } }
/* Sehr kleine Telefone (z. B. iPhone SE 1. Gen. 320 × 568): Startbereich knapper, sonst liegt die erste Zeile der
   Schlagzeile unter dem zweizeiligen Schild (Prüfung 14.10.: 262,8 × 20,3 px Überlappung). Schrift bleibt ≥ 15 px. */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) and (max-height: 600px) {
  html.fahrt .story-kapitel.held { gap: 10px; }
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: 28px; }
  html.fahrt .story-kapitel.held .v2-unterzeile { font-size: 15px; line-height: 1.45; }
  html.fahrt .story-kapitel.held .knopf-reihe { gap: 8px; }
}
/* Unter 360 px Breite bis 700 px Höhe (z. B. 320 × 640): In der Schlusskarte entfällt der Satz über den Knöpfen wie schon unter
   600 px Höhe – sonst liegt die Überschrift unter dem Schild (Prüfung 14.10.: 111 × 17 px). Die Knöpfe sagen dasselbe. */
@media (max-aspect-ratio: 19/20) and (max-width: 359px) and (max-height: 700px) {
  html.fahrt .story-glas:has(> .story-signatur) > p:not([class]) { display: none; }
}

/* =====================================================================
   Neuausrichtung 11.10.2026: Produktseiten, Produkt-Kacheln, Bühnen, Anfrage-Spiegel, Qualität, Startseite unter der Fahrt
   ===================================================================== */
/* Bühnen = V1-Animationen als Platzhalter bis zu echten App-Bildern (buehnen/<produkt>.css, umgestellt mit
   werkzeuge/v2-generator/buehnen-umstellen.mjs). Die V1-Farbnamen bekommen hier ihre V2-Werte: --accent folgt dem Licht
   des Abschnitts (data-licht), --accent2 ist V2-Blau. Immer als Illustration beschriftet. */
.v1-buehne, .mini-szene {
  --accent: var(--v2-licht); --accent2: #4F8BFF;
  --glass: rgba(12, 20, 42, .55); --glassbrd: rgba(140, 180, 255, .14); --glasshi: rgba(233, 241, 255, .07);
  --ink: var(--v2-text); --ink2: var(--v2-text-2); --card: rgba(12, 20, 42, .55); --bg2: rgba(1, 2, 8, .45);
  --line: var(--v2-linie); --ease: cubic-bezier(.3, .6, .2, 1);
}
.buehne-figur { margin: 0; display: grid; gap: 10px; min-width: 0; align-content: start; }
.v1-buehne { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; overflow: hidden;
  border-radius: var(--v2-radius-l); perspective: 1150px;
  background: radial-gradient(90% 70% at 50% 18%, rgba(var(--v2-licht-rgb), .09), transparent 70%), var(--v2-buehne);
  box-shadow: inset 0 0 0 1px var(--v2-linie), 0 26px 60px -34px rgba(0, 0, 0, .9); }
.v1-buehne > div { background: transparent !important; }
.v1-buehne > div::before, .v1-buehne > div::after { background: transparent; }
.buehne-hinweis { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--v2-text-3); }
.buehne-hinweis .v2-punkt { --farbe: var(--v2-text-3); box-shadow: none; }
/* außerhalb des Bildes angehalten (main.js); „Bewegung reduzieren“ = alles still (V2-DESIGN.md §8) */
.v1-buehne.angehalten *, .v1-buehne.angehalten *::before, .v1-buehne.angehalten *::after { animation-play-state: paused !important; }
@media (max-width: 600px) { .v1-buehne { min-height: 280px; } }
/* Echte App-Bilder (15.10.2026, werkzeuge/v2-generator/app-bilder.mjs): Bildschirmfotos mit Beispieldaten ersetzen die
   Illustration, sobald es sie gibt; immer beschriftet („Echte App, Beispieldaten“). Seitenverhältnis 16:10 wie die Dateien. */
.app-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--v2-radius-l); background: var(--v2-buehne);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .9); }
.app-bild picture, .app-bild-mini picture { display: contents; }   /* AVIF-Quelle mit WebP-Rückfall, Bild bleibt direkt im Rahmen */
.app-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-bild::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--v2-linie); pointer-events: none; }
.produkt-kachel .mini-szene.app-bild-mini { position: relative; overflow: hidden; background: var(--v2-buehne); }
.app-bild-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.app-bild-mini::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--v2-linie); pointer-events: none; }
.app-bild-marke { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 6px;
  font-size: 12px; line-height: 1.35; color: var(--v2-text); background: rgba(3, 6, 15, .82); box-shadow: inset 0 0 0 1px var(--v2-linie); }

/* Produkt-Kacheln: ruhige Fläche mit Haarlinie (keine Glaskarten-Raster, V2-DESIGN.md §10); Licht nur bei Zeiger/Fokus */
.produkt-kacheln { display: grid; gap: 12px; }
.produkt-kachel { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 4px 16px; height: 100%;
  padding: 16px 18px 16px 12px; border-radius: var(--v2-radius-m); text-decoration: none; color: var(--v2-text);
  background: var(--v2-flaeche); border: 1px solid var(--v2-linie); transition: border-color var(--v2-schnell), background var(--v2-schnell), box-shadow var(--v2-schnell); }
.produkt-kachel::before { content: ''; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--farbe), transparent); opacity: .45; transition: opacity var(--v2-schnell); }
.produkt-kachel:hover, .produkt-kachel:focus-visible { border-color: color-mix(in srgb, var(--farbe) 55%, transparent); background: color-mix(in srgb, var(--farbe) 7%, transparent);
  box-shadow: 0 22px 60px -34px color-mix(in srgb, var(--farbe) 80%, transparent); }
.produkt-kachel:hover::before, .produkt-kachel:focus-visible::before { opacity: 1; }
.produkt-kachel .mini-szene { grid-row: 1 / span 4; align-self: center; width: 104px; height: 96px; margin: 0; border-radius: 12px;
  background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--farbe) 12%, transparent), transparent 75%), rgba(1, 2, 8, .35); }
.produkt-kachel .gal3 .gal3-s { transform: var(--g3t) scale(.62); }
.pk2-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pk2-plattform { font-size: 14px; color: var(--v2-text-2); }   /* EBA-3: auf getönten Kacheln war --v2-text-3 nur 4,42 : 1 */
.pk2-name { font: 650 19px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.pk2-text { color: var(--v2-text-2); font-size: 16px; line-height: 1.5; }
.pk2-mehr { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; color: var(--v2-text-2); }
.pk2-mehr svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--v2-schnell); }
.produkt-kachel:hover .pk2-mehr, .produkt-kachel:focus-visible .pk2-mehr { color: var(--v2-text-hell); }
.produkt-kachel:hover .pk2-mehr svg { transform: translateX(3px); }
@media (min-width: 720px) {
  .produkt-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .produkt-kachel { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; padding: 14px 20px 20px; gap: 8px; }
  .produkt-kachel .mini-szene { grid-row: auto; width: auto; height: 120px; margin: 0 -6px 6px; }
  .produkt-kachel .gal3 .gal3-s { transform: var(--g3t); }
}
@media (min-width: 1100px) { .produkt-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } .produkt-kacheln.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) { .produkt-kachel:hover .gal3-s { transform: var(--g3th, var(--g3t)); } }

/* Miniszenen stehen still und bewegen sich nur unter dem Zeiger oder mit Fokus („Licht heißt etwas“) */
.mini-szene { --gc: var(--farbe, var(--v2-licht)); }
/* V1-Galerie: „.gal3 span { display: block }“ überstimmte dort die Pegel-Balken (display: flex) – hier richtiggestellt;
   der Umschlag von Kurier steht im Ruhebild mitten auf seiner Bahn statt unsichtbar am Anfang */
.mini-szene .gal3-sti-bars, .mini-szene .gal3-me-bars { display: flex; }
.mini-szene .gal3-ku-env { animation-delay: -2.6s; }
.mini-szene *, .mini-szene *::before, .mini-szene *::after { animation-play-state: paused !important; }
.produkt-kachel:focus-visible .mini-szene *, .produkt-kachel:focus-visible .mini-szene *::before, .produkt-kachel:focus-visible .mini-szene *::after { animation-play-state: running !important; }
@media (hover: hover) { .produkt-kachel:hover .mini-szene *, .produkt-kachel:hover .mini-szene *::before, .produkt-kachel:hover .mini-szene *::after { animation-play-state: running !important; } }

/* Eigene kleine Szenen für Produkte ohne V1-Miniatur (Chat, Bericht, Diktat, Civic, Telefon) */
.ms { position: relative; display: block; overflow: hidden; pointer-events: none; }
.ms span { position: absolute; display: block; }
/* feste Bühne 240 × 120 in der Mitte; in der schmalen Handy-Kachel verkleinert wie die V1-Miniszenen */
.ms .ms-s { left: 50%; top: 50%; width: 240px; height: 120px; margin: -60px 0 0 -120px; }
.produkt-kachel .ms .ms-s { transform: scale(.5); }
@media (min-width: 720px) { .produkt-kachel .ms .ms-s { transform: none; } }
.ms-chat .ms-b { height: 16px; border-radius: 8px; left: 50%; }
.ms-chat .ms-b1 { top: 26%; width: 46%; margin-left: -34%; background: color-mix(in srgb, var(--gc) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 50%, transparent); animation: ms-auf 6s var(--v2-kurve, ease) infinite; }
.ms-chat .ms-b2 { top: 46%; width: 34%; margin-left: -2%; background: rgba(233, 241, 255, .09); box-shadow: inset 0 0 0 1px var(--v2-linie); animation: ms-auf 6s var(--v2-kurve, ease) -2s infinite; }
.ms-chat .ms-b3 { top: 66%; width: 22%; margin-left: -34%; display: flex; align-items: center; justify-content: center; gap: 4px; background: color-mix(in srgb, var(--gc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); }
.ms-chat .ms-b3 i { width: 4px; height: 4px; border-radius: 50%; background: var(--gc); animation: ms-tippen 1.8s ease-in-out infinite; }
.ms-chat .ms-b3 i:nth-child(2) { animation-delay: .3s; } .ms-chat .ms-b3 i:nth-child(3) { animation-delay: .6s; }
@keyframes ms-auf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ms-tippen { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.ms-bericht .ms-ring { left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -54px; border-radius: 50%;
  background: conic-gradient(var(--gc) 0 64%, rgba(140, 180, 255, .16) 64% 100%); -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 70%); mask: radial-gradient(closest-side, transparent 68%, #000 70%); animation: ms-dreh 9s linear infinite; }
.ms-bericht .ms-zeile, .ms-welle .ms-zeile { left: 50%; height: 4px; border-radius: 2px; background: rgba(179, 194, 226, .35); }
.ms-bericht .ms-z1 { top: 38%; width: 22%; margin-left: 4px; background: color-mix(in srgb, var(--gc) 70%, transparent); }
.ms-bericht .ms-z2 { top: 50%; width: 30%; margin-left: 4px; }
.ms-bericht .ms-z3 { top: 62%; width: 18%; margin-left: 4px; }
@keyframes ms-dreh { to { transform: rotate(360deg); } }
.ms-welle .ms-balken { left: 50%; top: 22%; width: 60%; height: 36%; margin-left: -30%; display: flex; align-items: center; justify-content: space-between; }
.ms-welle .ms-balken i { width: 4px; height: 100%; border-radius: 2px; background: var(--gc); transform: scaleY(.35); animation: ms-pegel 1.6s ease-in-out infinite; }
.ms-welle .ms-balken i:nth-child(2n) { animation-delay: -.4s; opacity: .7; } .ms-welle .ms-balken i:nth-child(3n) { animation-delay: -.9s; } .ms-welle .ms-balken i:nth-child(4n) { animation-delay: -1.2s; opacity: .55; }
.ms-welle .ms-z1 { top: 70%; width: 46%; margin-left: -23%; } .ms-welle .ms-z2 { top: 80%; width: 30%; margin-left: -23%; }
@keyframes ms-pegel { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.ms-civic .ms-kern { left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(233, 241, 255, .85), var(--gc) 45%, color-mix(in srgb, var(--gc) 30%, transparent) 75%); box-shadow: 0 0 22px -2px var(--gc); }
.ms-civic .ms-bahn { left: 50%; top: 50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); animation: ms-dreh 12s linear infinite; }
.ms-civic .ms-bahn1 { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .ms-civic .ms-bahn2 { width: 92px; height: 92px; margin: -46px 0 0 -46px; animation-duration: 20s; animation-direction: reverse; opacity: .6; }
.ms-civic .ms-bahn i { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); }
.ms-ruf .ms-hoerer { left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--gc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent); }
.ms-ruf .ms-hoerer svg { width: 18px; height: 18px; fill: var(--gc); }
.ms-ruf .ms-welle { left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid var(--gc); opacity: 0; animation: ms-ruf 3.2s ease-out infinite; }
.ms-ruf .ms-w2 { animation-delay: -1.6s; }
@keyframes ms-ruf { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v1-buehne *, .v1-buehne *::before, .v1-buehne *::after, .mini-szene *, .mini-szene *::before, .mini-szene *::after { animation: none !important; transition: none !important; }
}

/* Sprungleiste (Produkte): die Gruppen als Pillen */
.sprungleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.sprungleiste a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--v2-pille); font-size: 15px; color: var(--v2-text);
  text-decoration: none; background: var(--v2-glas-leiste); box-shadow: inset 0 0 0 1px var(--v2-linie); transition: box-shadow var(--v2-schnell); }
.sprungleiste a:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .55); }

/* Produktseite: Kopf mit Bühne */
.produkt-kopf-raster { display: grid; gap: 36px; align-items: center; }
.produkt-kopf-text { min-width: 0; }
.produkt-kopf .v2-schlagzeile { max-width: 16ch; }
.produkt-kopf .app-unterzeile { max-width: 34ch; }
.produkt-kopf .knopf-reihe { margin-top: 28px; align-items: center; gap: 12px 24px; }
.produkt-vorzeile { flex-wrap: wrap; gap: 8px 12px; }
@media (min-width: 1024px) { .produkt-kopf-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; } }
.szene-block .v2-lesetext { color: var(--v2-text); font-size: 19px; }
.funktionen { display: grid; gap: 24px; }
.funktionen li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 20px; }
.funktionen li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--v2-licht-verlauf); opacity: .35; }
.funktionen h3 { font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); }
.funktionen p { color: var(--v2-text-2); font-size: 17px; }
@media (min-width: 720px) { .funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1100px) { .funktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.werkzeug-gruppen .app-gruppe-titel { margin-bottom: 4px; }
.produkt-stand { margin-top: 16px; }

/* Startseite: Das kennen Sie – so gelöst (jede Aussage mit Beispiel) */
.probleme { display: grid; gap: clamp(40px, 6vw, 72px); }
.problem-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--v2-linie-fein); }
.problem-zeile:first-child { border-top: 0; padding-top: 0; }
.problem-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }   /* minmax: 320-px-Telefone ohne Querlauf (15.10.2026) */
.problem-text h3 { font: 680 clamp(24px, 1vw + 18px, 30px)/1.15 var(--v2-schrift-titel); letter-spacing: -0.026em; color: var(--v2-text-hell); }
.problem-alltag { color: var(--v2-text-2); font-size: 18px; }
.problem-loesung { display: grid; gap: 10px; justify-items: start; color: var(--v2-text); font-size: 18px; padding: 16px 18px; border-radius: 14px;
  background: rgba(var(--v2-licht-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .22); }
.problem-links, .problem-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.problem-fuss { margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 1024px) {
  .problem-zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .problem-zeile:nth-child(even) .problem-text { order: 2; }
}
.beispiel-brief .brief { display: grid; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--v2-text); }
/* FOB-2 (16.10.): inline-block statt nowrap – passt die Lücke in die Zeile, bleibt sie ein Stück (wie bisher); ist sie
   breiter als die Spalte (320 px oder große Textabstände nach WCAG 1.4.12), bricht sie IN ihrem Kasten um, statt die
   Seite zu verbreitern (vorher 396 px Querlauf bei 375/390 px mit 1.4.12-Abständen). */
.luecke { display: inline-block; max-width: 100%; padding: 1px 6px; line-height: 1.25; border-radius: 6px; background: rgba(255, 196, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .35); color: #FFD898; overflow-wrap: anywhere; }
.beispiel-woche .woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.beispiel-woche .woche li { display: grid; gap: 6px; align-content: start; min-height: 132px; padding: 10px 8px; border-radius: 12px; background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie-fein); }
.beispiel-woche .woche b { font: 650 15px/1.2 var(--v2-schrift-titel); color: var(--v2-text-hell); }
.beispiel-woche .woche span { font-size: 14px; line-height: 1.35; color: var(--v2-text); padding: 6px 7px; border-radius: 8px; background: rgba(var(--v2-licht-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .25); overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { .beispiel-woche .woche { grid-template-columns: 1fr; } .beispiel-woche .woche li { min-height: 0; grid-template-columns: 34px 1fr; } .beispiel-woche .woche li span + span { grid-column: 2; } }
.weitere-produkte { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--v2-text-2); font-size: 16px; }
.weitere-produkte > span:first-child { color: var(--v2-text-3); }

/* Arbeitsweise in fünf Schritten (Startseite, Qualität), jeder Schritt mit Beispiel */
.arbeits-linie .schritt p:not(.schritt-beispiel) { font-size: 16px; }
.schritt-beispiel { display: grid; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--v2-linie-fein); font-size: 15px; }
.schritt-beispiel > span { font-size: 14px; color: var(--v2-text-3); }
.schritt-beispiel a { text-decoration-color: rgba(var(--v2-licht-rgb), .35); }
@media (min-width: 900px) and (max-width: 1179px) { .arbeits-linie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Lösungen und Qualität: Beispiele */
.arten-beispiele { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; }
.arten-beispiele > span:first-child { color: var(--v2-text-3); }
.beispiel-liste > li { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; border-radius: var(--v2-radius-m); background: var(--v2-flaeche); border: 1px solid var(--v2-linie); }
.beispiel-liste h3 { font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); display: flex; gap: 12px; align-items: baseline; }
.beispiel-liste h3::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-licht); box-shadow: 0 0 10px rgba(var(--v2-licht-rgb), .8); transform: translateY(-2px); }
.beispiel-liste p { color: var(--v2-text-2); font-size: 17px; }
.website-zeile { display: flex; gap: 12px; align-items: baseline; font-size: clamp(20px, .8vw + 15px, 24px); line-height: 1.4; color: var(--v2-text-2); }
.website-zeile b { color: var(--v2-text-hell); font-weight: 650; }
.website-zeile .v2-punkt { flex: none; transform: translateY(-3px); }

/* Anfrage-Spiegel: Beispielbericht und „So entsteht Ihre Vorschau“ */
.bericht-raster, .vorschau-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }   /* FOB-2 */
@media (min-width: 1024px) { .bericht-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } .vorschau-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-top: clamp(40px, 5vw, 64px); } }
.bericht-beispiel { margin: 0; padding: clamp(18px, 2.4vw, 26px); }
.bericht-inhalt { display: grid; gap: 18px; }
.bericht-wert { display: flex; align-items: center; gap: 18px; }
.bericht-ring { flex: none; width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(var(--v2-licht) calc(var(--wert) * 1%), rgba(140, 180, 255, .14) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%); }
.bericht-wert p { display: grid; gap: 2px; }
.bericht-wert b { font: 680 28px/1.1 var(--v2-schrift-titel); color: var(--v2-text-hell); font-variant-numeric: tabular-nums; }
.bericht-wert span { font-size: 15px; color: var(--v2-text-2); }
.bericht-bereiche { display: grid; border-bottom: 1px solid var(--v2-linie-fein); }
.bericht-bereiche > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--v2-linie-fein); font-size: 15px; }
.bericht-bereiche dt { color: var(--v2-text); }
.bericht-bereiche dd { font-weight: 550; white-space: nowrap; }
.be-gut { color: #45F08A; } .be-auffaellig { color: #FFC46B; } .be-offen { color: var(--v2-text-3); }
.bericht-klein { font-size: 14px; color: var(--v2-text-3); }
.bericht-fragen { display: grid; gap: 8px; font-size: 15px; }
.bericht-fragen b { color: var(--v2-text-hell); font-weight: 600; }
.bericht-fragen ul { display: grid; gap: 6px; }
.bericht-fragen li { padding: 8px 12px; border-radius: 10px; background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie-fein); color: var(--v2-text); }
.bericht-beispiel figcaption { margin-top: 14px; font-size: 14px; color: var(--v2-text-3); }
.vorschau-ablauf { display: grid; gap: 28px; }
.vorschau-ablauf li { display: grid; gap: 10px; align-content: start; }
.vorschau-ablauf h3 { display: flex; align-items: baseline; gap: 12px; font: 650 20px/1.3 var(--v2-schrift-titel); letter-spacing: -0.015em; color: var(--v2-text-hell); margin-top: 8px; }
.vorschau-ablauf h3 .schritt-nr { font-size: 20px; }
.vorschau-ablauf p { color: var(--v2-text-2); font-size: 17px; }
/* drei Spalten: Bild, Überschrift und Text jeder Spalte auf gleicher Höhe (subgrid) */
@media (min-width: 900px) { .vorschau-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 10px 28px; }
  .vorschau-ablauf li { grid-row: span 3; grid-template-rows: subgrid; } }
.va-bild { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 176px; padding: 34px 16px 16px; border-radius: 16px;
  background: rgba(1, 2, 8, .5); box-shadow: inset 0 0 0 1px var(--v2-linie); overflow: hidden; }
.va-leiste { position: absolute; left: 12px; top: 12px; display: flex; gap: 5px; }
.va-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgba(140, 180, 255, .25); }
.va-feld { padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--v2-text); background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie); }
.va-knopf { align-self: flex-start; padding: 7px 14px; border-radius: var(--v2-pille); font-size: 14px; font-weight: 600; color: var(--v2-knopf-text, #03101A); background: var(--v2-licht); }
.va-schritt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--v2-text-2); }
.va-schritt::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--v2-text-3); }
.va-schritt.fertig { color: var(--v2-text); }
.va-schritt.fertig::before { background: #45F08A; border-color: #45F08A; box-shadow: 0 0 8px rgba(69, 240, 138, .6); }
.va-seite { justify-content: flex-start; }
.va-kopf { height: 10px; width: 46%; border-radius: 5px; background: rgba(179, 194, 226, .3); }
.va-text { height: 6px; width: 80%; border-radius: 3px; background: rgba(179, 194, 226, .16); }
.va-text.kurz { width: 56%; }
.va-widget { align-self: flex-end; display: grid; gap: 6px; width: min(78%, 240px); margin-top: 6px; padding: 10px; border-radius: 14px; background: var(--v2-glas-stark); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .35), 0 16px 30px -18px rgba(0, 0, 0, .9); }
.va-widget-kopf { font-size: 14px; font-weight: 600; color: var(--v2-text-hell); }
.va-blase { padding: 6px 10px; border-radius: 12px; font-size: 14px; line-height: 1.35; }
.va-blase.bot { justify-self: start; background: var(--v2-flaeche); box-shadow: inset 0 0 0 1px var(--v2-linie); color: var(--v2-text); }
.va-blase.kunde { justify-self: end; background: rgba(var(--v2-licht-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .4); color: var(--v2-text-hell); }

/* ===== Tippflächen auf Touch-Geräten mindestens 44 × 44 px (Optimierung 15.10.2026) =====
   Knöpfe wachsen um 4 px. Text-Links („weiter“, Pfad, Sprungleiste, Kontaktangaben) bekommen eine unsichtbar größere
   Tippfläche: Polster oben/unten, bei Flex/Block-Elementen mit gleich großem negativem Rand → das Layout bleibt gleich,
   nur die Fläche, die einen Finger annimmt, wird größer. Maus-Geräte bleiben unverändert. */
@media (pointer: coarse) {
  .v2-knopf, .berater .v2-schalter button, .v2-leiste:not(.story-leiste) button, .fuss-nav a, .logo { min-height: 44px; }
  .v2-leiste:not(.story-leiste) button, .berater .v2-schalter button { min-width: 44px; }
  .fuss-nav a { padding-inline: 6px; margin-inline: -6px; }
  .weiter { padding-block: 10px; margin-block: -10px; }
  .pfad a { padding: 10px 6px; margin: -10px -6px; }
  .sprungleiste a { padding-block: 10px; margin-block: -3px; }
  :is(.arten-beispiele, .weitere-produkte, .schluss-kontakt) .lesetext-link { padding: 10px 4px; margin: -10px -4px; }
  .schluss-kontakt .lesetext-link { padding-block: 12px; margin-block: -12px; }   /* Telefon/E-Mail sind eigenständige Ziele: 44 statt 40 px (Nachbesserung) */
  dd > a.lesetext-link { padding-block: 12px; }
}

/* ---------- Schlussrunde 15.10.2026: Barrierefreiheit (abnahme/barrierefreiheit.md) ---------- */
/* M1: Unsichtbare Kapitelkarten rechnen keine Glas-Unschärfe über dem Film. Abgeschaltet wird erst nach dem Ausblenden
   (wie früher visibility mit Verzögerung), eingeschaltet sofort beim Aktivieren. */
html.fahrt .story-kapitel:not([data-aktiv]) :is(.story-glas, .vorzeile) { -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: -webkit-backdrop-filter 0s linear 620ms, backdrop-filter 0s linear 620ms; }
@media (prefers-reduced-motion: reduce) {
  html.fahrt .story-kapitel:not([data-aktiv]) :is(.story-glas, .vorzeile) { transition-delay: 200ms; }
}
/* M3: Passt die Filmbühne nicht (Zoom 400 %, sehr kleine Fenster), schaltet story.js auf die ruhige Ansicht und
   setzt .zu-klein – „Film ansehen“ bleibt dann verborgen, bis wieder genug Platz ist. */
.story.zu-klein [data-story-fahrt] { display: none; }
/* N3: Ziel des Sprunglinks nimmt den Fokus an (main tabindex="-1"), ohne Rahmen um den ganzen Inhalt */
main[tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   Nachbesserung nach der Prüfrunde (15.10.2026, schlussrunde/pruefung/befunde-gesamt.md)
   ===================================================================== */
/* BIL-1/BAR-2 + NBI-1 (Runde 3): Leiste und Karten blenden im Auslauf aus (ab p 0,96, story.js AUSLAUF). Der Bildhinweis
   NICHT: Er ist im Film die einzige Kennzeichnung („Illustration: nachgestellter Betrieb …“) und bleibt voll deckend,
   solange Filmbild zu sehen ist – auch bei p 1 und während die Bühne aus dem Bild geschoben wird (er steckt in der Bühne
   und geht mit ihr). Vorher: Deckkraft 0,15 bei p 0,99 und 0 bei p 1 über dem voll sichtbaren Bild. */
html.fahrt .story-bildhinweis { opacity: 1; }

/* BIL-2: Die <source>-Elemente im <picture> der Kapitel belegten in der ruhigen Ansicht Rasterzellen (picture ist
   display: contents) – Text und Bild standen nie nebeneinander. Quellen sind nie sichtbar. */
.story-bild-quelle source { display: none; }

/* BAR-1 (WCAG 1.4.11): Inaktive Kapitelpunkte sind bis 1100 px das einzige sichtbare Zeichen ihres Knopfs – heller,
   damit sie über jedem Filmbild mindestens 3 : 1 gegen die Leistenfläche erreichen (vorher .45: 2,41–3,49 : 1). */
.story-punkt { background: rgba(201, 215, 245, .9); }

/* BIL-10: Kapitel 5 (Querformat): Die Karte endet 24 px vor dem linken Monitorrand. Der Monitor beginnt bei 40,06 % der
   Filmbreite (gemessen 1440 × 900: 561 px); der Film füllt die Bühne (cover, 16 : 9, Höhe 100lvh). Nie schmaler als 380 px. */
@media (min-aspect-ratio: 19/20) and (min-width: 900px) {
  html.fahrt .story-kapitel[data-kapitel="4"] {
    --film-b: max(100vw, 100lvh * 16 / 9);
    --spalte-l: max(var(--v2-rand), (100vw - var(--v2-breite)) / 2);
    max-width: clamp(380px, 50vw - .0994 * var(--film-b) - var(--spalte-l) - 24px, 470px);
  }
}

/* BIL-3: Handy hochkant (unter 480 px): mehr Film, weniger Bedienung.
   - Leiste einzeilig (vorher zwei Zeilen, 100 px): sechs Kapitelpunkte teilen sich die Breite (mindestens 24 px breit,
     44 px hoch), Anhalten, Ohne Bewegung und Überspringen je 40 × 44 px.
   - Bildhinweis unten links in der Zeile des Chat-Knopfs (vorher eigene Zeile unter der Leiste); 14 px bleiben.
   - Alle Karten enden über dieser Zeile; Karten knapper (Text 16 px, weniger Innenabstand), in der Schlusskarte fällt
     „Pakete und Preise“ weg (der Abschnitt mit den Preisen folgt direkt nach dem Film), im Startbereich die Vorzeile
     (wie bisher schon unter 700 px Höhe). Gemessen: freier Film 390 × 844 vorher 22–46 %, nachher siehe
     schlussrunde/nachbesserung-oberflaeche.md (BIL-3). */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) {
  html.fahrt .story-leiste { top: calc(var(--v2-kopf) + 8px); flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: var(--v2-pille); }
  html.fahrt .story-leiste .story-punkte { flex: 1 1 auto; min-width: 0; justify-content: space-around; }
  html.fahrt .story-punkte li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  html.fahrt .story-leiste .story-punkte button:is([aria-current], :not([aria-current])) { width: 100%; min-width: 24px; max-width: 44px; height: 44px; padding: 0; }
  html.fahrt .story-leiste :is([data-story-pause], [data-story-ruhig], .story-ueberspringen):is(button, a) { flex: none; min-width: 0; width: 40px; height: 44px; }
  /* NBI-3 (Runde 3): Der Hinweis ist eine Bildunterschrift, kein Bedienelement – ohne Rahmen und ohne 48-px-Mindesthöhe
     (die gilt nur für Knöpfe), eckiger als die Pillen-Knöpfe, mit Punkt wie die Bildunterschriften der Bühnen. Er sitzt
     bündig mit der Unterkante des Chat-Knopfs; Schrift bleibt 14 px (KLARTEXT), Farbe Nebentext auf dunkler Fläche (auch über hellem Bild ≥ 5 : 1). */
  html.fahrt .story .story-bildhinweis { top: auto; right: auto; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
    max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left)) - 58px); display: flex; align-items: baseline; gap: 7px;
    padding: 3px 9px 3px 8px; line-height: 1.3; border-radius: 6px; box-shadow: none; background: rgba(4, 8, 20, .76); color: var(--v2-text-2); }
  html.fahrt .story .story-bildhinweis::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--v2-text-3);
    transform: translateY(-2px); }
  html.fahrt .story .story-texte { padding-bottom: 28px; }
  html.fahrt .story .story-texte > .story-kapitel.story-kapitel { margin-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 28px); }
  html.fahrt .story-kapitel.held { gap: 12px; }
  html.fahrt .story-kapitel.held .vorzeile { display: none; }   /* wie schon unter 700 px Höhe; in der ruhigen Ansicht steht sie */
  html.fahrt .story-kapitel.held .v2-unterzeile { font-size: 16px; }
  html.fahrt .story-kapitel.held .knopf-reihe { gap: 8px; }
  html.fahrt .story-glas { padding: 16px 18px; gap: 10px; }
  html.fahrt .story-glas p:not([class]) { font-size: 16px; line-height: 1.5; }
  html.fahrt .story-glas .knopf-reihe { margin-top: 2px; gap: 8px; }
  html.fahrt .story-glas .story-mehr { display: none; }
  html.fahrt .story .story-glas p.story-signatur { margin-top: 0; padding-top: 8px; }
  html.fahrt .story-signatur .v2-punkt { top: calc(8px + .7em - 4.5px); }
}
/* über 760 px Höhe: Schlagzeile 36 px statt 40 px (darunter gilt weiter 32 px, siehe oben) */
@media (max-aspect-ratio: 19/20) and (max-width: 479px) and (min-height: 761px) {
  html.fahrt .story-kapitel.held .v2-schlagzeile { font-size: 36px; }
}

/* BIL-5: Knöpfe mit langem Text (z. B. „Termin für den Anfrage-Spiegel buchen“ in der Paketkarte) brechen sauber um:
   Zeilenhöhe 1,25 statt 1, mittig, ausgeglichene Zeilen. Einzeilige Knöpfe bleiben gleich hoch (min-height). */
.v2-knopf { line-height: 1.25; text-align: center; text-wrap: balance; padding-block: 8px; }
.paket .v2-knopf { justify-self: stretch; }

/* BIL-7: Die Lichtflächen der Abschnitte (::before, 10 % über und unter den Abschnitt hinaus) endeten mit hartem Rand –
   oben und unten laufen sie jetzt weich aus. */
[data-ort="website"] .v2-abschnittslicht::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

/* BIL-8: Produktkacheln – Gruppen mit nur einer oder zwei Kacheln füllen die Breite (Bild links, Text rechts) statt
   eine halb leere Viererreihe; Gruppen mit genau drei Kacheln stehen in drei Spalten. */
@media (min-width: 1100px) {
  .produkt-kacheln:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
  .produkt-kacheln:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .produkt-kacheln:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produkt-kacheln:is(:has(> li:only-child), :has(> li:nth-child(2):last-child)) .produkt-kachel {
    grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 24px; padding: 20px 24px 20px 20px; }
  .produkt-kacheln:is(:has(> li:only-child), :has(> li:nth-child(2):last-child)) .produkt-kachel .mini-szene {
    grid-row: 1 / span 4; align-self: stretch; width: 220px; height: auto; min-height: 140px; margin: 0; }
  .produkt-kacheln:has(> li:only-child) .produkt-kachel .pk2-text { max-width: 62ch; }
}

/* BIL-11: Chat-Knopf am Handy beim Lesen (Scrollen nach unten) zur Seite (main.js, Klasse „weg“); Fokus holt ihn zurück */
.hilfe-knopf { transition: transform 260ms var(--v2-kurve), opacity 200ms linear; }
.hilfe.weg .hilfe-knopf { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.hilfe.weg:focus-within .hilfe-knopf { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hilfe-knopf { transition: none; } }

/* BAR-3 (WCAG 2.2.2): Knopf „Anhalten“ in der Bildunterschrift der V1-Bühnen (HTML build.mjs, Logik main.js) */
.v1-buehne.pausiert *, .v1-buehne.pausiert *::before, .v1-buehne.pausiert *::after { animation-play-state: paused !important; }
.buehne-hinweis:has(.buehne-pause:not([hidden])) { flex-wrap: wrap; }
.buehne-pause { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--v2-pille);
  cursor: pointer; font: 600 14px var(--v2-schrift); color: var(--v2-text-2); background: rgba(140, 180, 255, .07); box-shadow: inset 0 0 0 1px var(--v2-linie); }
.buehne-pause[hidden] { display: none; }
/* NME-1 (Runde 3): Der Knopf kommt mit hidden aus build.mjs und wird erst vom verzögert geladenen main.js gezeigt – die
   Bildunterschrift wurde nach dem ersten Zeichnen höher (22 → 36 px), der Seitenkopf daneben sprang um 6,8 px (CLS 0,0055).
   Ihre Höhe ist deshalb vorab für den Knopf reserviert – mit Skript (html.js setzt das Inline-Skript im <head> vor dem
   ersten Zeichnen) und ohne „Bewegung reduzieren“, genau dann, wenn main.js ihn zeigt. ([hidden] lässt sich nicht per
   CSS aufheben: @layer v2-basis setzt display: none !important.) */
@media (prefers-reduced-motion: no-preference) {
  html.js .buehne-hinweis:has(.buehne-pause) { min-height: 36px; }
}
@media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  html.js .buehne-hinweis:has(.buehne-pause) { min-height: 44px; }
}
.buehne-pause svg { flex: none; width: 12px; height: 12px; }
.buehne-pause:hover { color: var(--v2-text-hell); background: rgba(140, 180, 255, .12); }
.buehne-pause.aktiv { color: var(--v2-text-hell); background: rgba(var(--v2-licht-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--v2-licht-rgb), .5); }
.buehne-pause:focus-visible { outline: 2px solid var(--v2-licht); outline-offset: 2px; }
@media (pointer: coarse) { .buehne-pause { min-height: 44px; } }

/* BAR-4 (WCAG 2.2.2): Pulsierender Punkt und Hintergrund-Schimmer laufen nicht endlos – der Punkt pulsiert zweieinhalb
   Mal (5 s, endet hell), der Schimmer wandert einmal in 5 s an seinen Platz. v2-design.css bleibt unverändert. */
.v2-punkt.atmet { animation-duration: 2s; animation-iteration-count: 2.5; }
body.v2-schimmer::before { animation-duration: 5s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; }

/* BAR-6: Ziel von „Film überspringen“ nimmt den Fokus an (tabindex="-1", build.mjs) – ohne Rahmen um den ganzen Abschnitt */
#nach-der-fahrt:focus { outline: none; }