/* ==========================================================================
   vivekaweb.net — Startseite und Verkaufsseiten, Premium-Fassung (ab 14.10.2026)
   Design-Plan: 02_Design/design-plan-premium.md · ersetzt für diese Seite site.css und das eingebettete CSS.
   Präzision als Bildsprache: Haarlinien, Messpunkte, Tabellenziffern, Lime nur als Signal.
   szene.css bleibt unverändert geladen (Mechanik); ihr Aussehen wird hier übersteuert.
   ========================================================================== */

/* Grundlage (Schriften, Tokens, Knöpfe) steht in basis.css und lädt vor dieser Datei. */

/* ==========================================================================
   Navigation (gleiche Klassen wie das Partial, damit site.js greift)
   ========================================================================== */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; display: flex; align-items: center;
    border-bottom: 1px solid transparent;
    transition: background-color 0.35s var(--ease), border-color 0.35s;
}
/* Ohne Glas (Grundsatz «kein Glas», Analyse 16.10.2026): deckendes Papier, über Navy deckendes Navy */
.nav--scrolled { background: var(--papier); border-bottom-color: var(--linie); }
.nav__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo { display: flex; align-items: center; z-index: 1001; border-radius: 6px; }
.nav__logo svg { height: 39px; width: auto; display: block; }   /* 15 % grösser (Entscheid 21.10.2026), vorher 34 px */
.nav__logo svg text:nth-of-type(2) { transition: fill 0.35s; }
.nav--scrolled .nav__logo svg text:nth-of-type(2) { fill: var(--navy); }
.nav--scrolled .nav__logo svg text:nth-of-type(3) { fill: #6B7686; }
.nav__links { display: flex; align-items: center; gap: 2.25rem; }
.nav__link { display: inline-block; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.78); transition: color 0.2s; }
.nav__link:hover { color: #fff; }
.nav--scrolled .nav__link { color: var(--neben); }
.nav--scrolled .nav__link:hover { color: var(--navy); }
.nav__cta {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 0.95rem 0 1.1rem; border-radius: var(--radius);
    background: var(--lime); color: var(--navy); font-size: 0.875rem; font-weight: 600; transition: background-color 0.25s;
}
.nav__cta:hover { background: var(--lime-hell); }
.nav__cta .pfeil { width: 15px; height: 15px; }
.nav__cta:hover .pfeil { transform: translateX(2px); }
.nav__item { position: relative; }
.nav__drop {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); padding-top: 0.9rem;
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 1100;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__drop-panel {
    min-width: 330px; padding: 0.45rem; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(10, 31, 61, 0.1), 0 18px 40px -18px rgba(10, 31, 61, 0.35);
}
.nav__drop-link { display: block; padding: 0.75rem 0.9rem; border-radius: 6px; transition: background-color 0.2s; }
.nav__drop-link:hover { background: var(--papier); }
.nav__drop-name { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.nav__drop-sub { display: block; font-size: 0.8125rem; color: var(--neben); margin-top: 1px; line-height: 1.45; }

/* Über dunklen Abschnitten (Galerie, Schluss) wird die Leiste dunkel statt als heller Streifen */
.nav--scrolled.nav--dunkel { background: var(--navy); border-bottom-color: rgba(255, 255, 255, 0.08); }
.nav--dunkel .nav__logo svg text:nth-of-type(2) { fill: #fff; }
.nav--dunkel .nav__logo svg text:nth-of-type(3) { fill: #8B97AC; }
.nav--dunkel .nav__link { color: rgba(255, 255, 255, 0.78); }
.nav--dunkel .nav__link:hover { color: #fff; }
.nav--dunkel .nav__hamburger:not(.active) span { background: #fff; }   /* stärker als .nav--scrolled (sonst Navy auf Navy über dunklen Abschnitten); offen gilt das Kreuz auf Papier */
.nav__aktionen { display: none; align-items: center; gap: 0.5rem; }
.nav__cta--mobil { min-height: 44px; padding: 0 0.85rem; font-size: 0.8125rem; white-space: nowrap; }
.nav__hamburger { display: none; width: 44px; height: 44px; margin-right: -10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 1001; }
.nav__hamburger span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform 0.3s var(--ease), opacity 0.3s, background-color 0.3s; }
.nav--scrolled .nav__hamburger span, .nav__hamburger.active span { background: var(--navy); }
.nav__hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav__mobile {
    display: none; position: fixed; inset: 0; z-index: 999; background: var(--papier);
    flex-direction: column; justify-content: center; padding: 6rem var(--rand) 3rem;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.nav__mobile.active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nav__mobile a:not(.knopf) { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; color: var(--navy); padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.nav__mobile .knopf { margin-top: 2rem; width: 100%; }
@media (max-width: 1100px) { .nav__links { gap: 1.5rem; } }
@media (max-width: 960px) {
    .nav__inner { gap: 1rem; }   /* Mindestabstand Logo–Knopf; mit dem grösseren Logo reichen 2rem bei 390 px nicht */
    .nav__links { display: none; }
    .nav__aktionen { display: flex; }
    .nav__hamburger { display: flex; }
    .nav__mobile { display: flex; }
    .nav__drop { display: none; }
}
/* Offenes Menü: Leiste hell, damit Logo und Kreuz auf dem Papier stehen */
.nav:has(.nav__mobile.active) { background: var(--papier); border-bottom-color: var(--linie); }
.nav:has(.nav__mobile.active) .nav__logo svg text:nth-of-type(2) { fill: var(--navy); }

/* ==========================================================================
   Szene «Die Verwandlung» — Aussehen (Mechanik in szene.css/szene.js)
   ========================================================================== */
/* Grund: Navy mit leisem Studiolicht hinter dem Rahmen statt Punktraster und Lime-Glow */
.szene__grund {
    background-color: var(--navy);
    background-image: linear-gradient(180deg, #0C2447 0%, #0A1F3D 52%, #081A33 100%);
    background-size: auto;
}
.szene__grund::before { content: none; animation: none; }

/* Messraster im Hero (raster.js): Leinwand hinter dem Inhalt, bleibt in der Szene sichtbar, solange die Bühne Navy ist */
.szene__raster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
/* Dasselbe Raster auf jeder Navy-Fläche mit data-raster (Wunsch 15.10.2026): Startseite Einstieg und Schluss, Unterseiten
   Kauf, Projekte und Schluss. raster.js setzt die Leinwand als erstes Kind, der Inhalt liegt darüber. Die Fusszeile
   (--tiefe) bleibt ohne. */
.dunkel[data-raster] { position: relative; isolation: isolate; }
.dunkel[data-raster] > .wrap { position: relative; z-index: 1; }

/* Hero-Text */
.szene .hero__headline { font-family: var(--font-display); font-weight: 400; color: #fff; letter-spacing: -0.015em; line-height: 1; text-wrap: balance; }
.szene .hero__hl { font-style: italic; color: var(--lime); }
.szene .hero__lead { color: rgba(255, 255, 255, 0.74); line-height: 1.6; }
.hero__fakten { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 1.1rem; }
.hero__fakten li { display: flex; flex-direction: column; padding-right: 1.6rem; margin-right: 1.6rem; border-right: 1px solid rgba(255, 255, 255, 0.16); line-height: 1.35; }
.hero__fakten li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__fakten b { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.hero__fakten span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); margin-top: 0.15rem; }
.hero__aktion { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.9rem; }
.szene .textlink { color: #fff; }

html.szene-an .szene__hero { left: 182px; top: 206px; width: 540px; }
html.szene-an .szene__hero .hero__headline { font-size: 70px; margin-bottom: 24px; }
html.szene-an .szene__hero .hero__lead { font-size: 19px; max-width: 540px; margin: 0 0 26px; }   /* volle Spalte: Lead mit Problem-Satz bleibt bis 1280 px dreizeilig (15.10.) */
html.szene-an .hero__fakten { margin-bottom: 30px; }
html.szene-an .szene__hero .hero__lead { font-size: max(19px, calc(16px / var(--k, 1))); }
html.szene-an .hero__fakten li { padding-right: 1.3rem; margin-right: 1.3rem; }
html.szene-an .hero__fakten b { font-size: max(15px, calc(13px / var(--k, 1))); }
html.szene-an .hero__fakten span { font-size: max(14px, calc(13px / var(--k, 1))); }
html.szene-an .szene .knopf { font-size: max(16px, calc(14px / var(--k, 1))); min-height: max(56px, calc(44px / var(--k, 1))); }
html.szene-an .szene .textlink { font-size: max(17px, calc(14px / var(--k, 1))); }
html.szene-an .szene__sub { font-size: max(16px, calc(15px / var(--k, 1))); }
html.szene-an .szene__hinweis { font-size: max(12px, calc(12px / var(--k, 1))); }

/* Sätze 2 bis 6 */
.szene__satz { letter-spacing: -0.012em; }
.szene__neu { font-style: italic; }
.szene--hell .szene__schluss .textlink { color: var(--navy); }

/* Das Objekt: Browserrahmen, feiner gebaut */
.szene__objekt {
    border-radius: 14px; background: #0E223F;
    box-shadow: 0 60px 110px -40px rgba(1, 7, 18, 0.85), 0 22px 40px -22px rgba(1, 7, 18, 0.7);
}
.szene--hell .szene__objekt { box-shadow: 0 50px 100px -40px rgba(10, 31, 61, 0.38), 0 16px 32px -16px rgba(10, 31, 61, 0.2); }
.szene__objekt::after { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.objekt__leiste {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 0;
    height: 40px; padding: 0 14px; background: linear-gradient(180deg, #13294A, #0F2342); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.objekt__punkte i { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.17); }
.objekt__adresse {
    justify-self: center; width: min(100%, 380px); justify-content: center; gap: 6px; padding: 5px 12px;
    background: rgba(255, 255, 255, 0.07); border-radius: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.005em;
}
.objekt__marke { border-radius: 4px; padding: 5px 9px 4px; font: 600 11px/1.3 var(--font-text); letter-spacing: 0.08em; }

/* Etiketten als Messanzeigen: Haarlinie, keine Schatten, Ziffern tabellarisch */
.etikett { width: 236px; padding: 11px 14px 10px; background: rgba(6, 18, 37, 0.95); border: 1px solid rgba(196, 240, 82, 0.5); border-radius: 6px; }
.etikett b { font: 500 13px/1.25 var(--font-text); color: rgba(255, 255, 255, 0.9); letter-spacing: 0.005em; }
.etikett strong { font: 600 24px/1 var(--font-text); letter-spacing: -0.02em; }
.etikett strong small { font: 500 11px/1 var(--font-text); color: rgba(255, 255, 255, 0.5); }
/* Messlinien und Messpunkte (Ring statt Scheibe) */
.szene__linien line { stroke-width: 1.25; }
.szene__linien circle { fill: var(--navy); stroke: var(--lime); stroke-width: 2.25; }
.szene--hell .szene__linien line { stroke: #7FA321; }
.szene--hell .szene__linien circle { fill: #fff; stroke: #6E8F17; }

.szene__gesamt { letter-spacing: -0.02em; }
.szene__gesamt small { font: 400 26px/1 var(--font-text); color: rgba(255, 255, 255, 0.58); letter-spacing: 0; }
.szene__gesamt-lbl { font: 500 14px/1.35 var(--font-text); color: rgba(255, 255, 255, 0.62); letter-spacing: 0; }

/* Report-Blatt */
.szene__blatt { border-radius: 8px; box-shadow: 0 50px 90px -40px rgba(10, 31, 61, 0.45), 0 10px 24px -14px rgba(10, 31, 61, 0.25); }
.blatt__lbl { color: var(--lime-text); letter-spacing: 0.1em; }
.blatt__titel { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.01em; line-height: 1.05; }
.blatt__balken { height: 4px; border-radius: 2px; }

/* Hinweis und Scroll-Zeichen: leise */
.szene__hinweis { color: rgba(255, 255, 255, 0.58); }
.szene__pille { flex-direction: column; padding: 0; border: 0; background: none; gap: 10px; font: 500 12.5px/1 var(--font-text); letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.66); }
.szene__pille span:last-child { display: inline-block; width: 1px; height: 26px; overflow: hidden; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); }
.szene--hell .szene__pille { border: 0; background: none; color: var(--neben); }
.szene--hell .szene__pille span:last-child { background: linear-gradient(180deg, rgba(10, 31, 61, 0.45), rgba(10, 31, 61, 0)); }

/* Fassung ohne Szene (schmal, Hochformat, reduzierte Bewegung, ohne Skript) */
html:not(.szene-an) .szene { background: linear-gradient(180deg, #0C2447 0%, #0A1F3D 60%, #081A33 100%); }
html:not(.szene-an) .szene__grund { display: none; }
html:not(.szene-an) .szene__buehne { padding: 8.5rem 0 5rem; }
html:not(.szene-an) .szene__box { max-width: var(--wrap); padding: 0 var(--rand); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; }
html:not(.szene-an) .szene .hero__headline { font-size: clamp(2.75rem, 1.4rem + 4.4vw, 4.4rem); margin-bottom: 1.5rem; }
html:not(.szene-an) .szene .hero__lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); margin-bottom: 1.9rem; max-width: 32em; }
html:not(.szene-an) .hero__fakten { margin-bottom: 2.1rem; }
@media (max-width: 1024px) {
    html:not(.szene-an) .szene__box { grid-template-columns: 1fr; gap: 3.25rem; }
}
@media (max-width: 640px) {
    html:not(.szene-an) .szene__buehne { padding: 7rem 0 3.5rem; }
    html:not(.szene-an) .szene__objekt { border-radius: 10px; }
    html:not(.szene-an) .objekt__leiste { height: 32px; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 0 10px; }
    html:not(.szene-an) .objekt__punkte i { width: 7px; height: 7px; }
    html:not(.szene-an) .objekt__adresse { font-size: 10.5px; padding: 3px 8px; }
    .hero__fakten { flex-direction: column; padding-top: 0; border-top: 0; }
    .hero__fakten li { flex-direction: row; flex-wrap: wrap; gap: 0 0.4rem; padding: 0.7rem 0; margin: 0; border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
    .hero__fakten li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .hero__fakten span { margin-top: 0; }
    .hero__aktion { flex-direction: column; align-items: stretch; gap: 1.1rem; }
    .hero__aktion .textlink { align-self: flex-start; }
}

/* Am Handy ohne Browserfenster im Hero (Entscheid 21.10.2026): Derselbe Fall folgt gleich darunter in «Aus 40 wird 90»,
   dort mit vorher und nachher. Hochformat bis 640 px und Querformat bis 500 px Höhe; mit Szene bleibt alles, wie es ist */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
    html:not(.szene-an) .szene__objekt { display: none; }
}

/* Statischer Vergleich (nur ohne Szene sichtbar) */
.umbau-statisch { padding: var(--abschnitt) 0; background: var(--papier); }
.vergleich { margin: 0; max-width: 960px; }
.vergleich__rahmen { position: relative; }
.vergleich__fenster { position: relative; }
.vergleich__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; max-width: none; }
.vergleich__vorher { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.35); pointer-events: none; }
.vergleich__griff::after { content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.35), 0 6px 16px -6px rgba(10, 31, 61, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 12l-5 5 5 5M20 12l5 5-5 5' fill='none' stroke='%230A1F3D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vergleich__marke { position: absolute; top: 4%; padding: 4px 8px 3px; border-radius: 4px; font: 600 11px/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.vergleich__marke--vorher { left: 3%; background: rgba(10, 31, 61, 0.85); color: #fff; }
.vergleich__marke--nachher { right: 3%; background: var(--lime); color: var(--navy); }
.vergleich__regler { position: absolute; left: 0; right: 0; top: 36px; bottom: 0; width: 100%; height: calc(100% - 36px); margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; touch-action: pan-y; }
.vergleich__rahmen:has(.vergleich__regler:focus-visible) { outline: 3px solid var(--lime); outline-offset: 3px; box-shadow: 0 0 0 6px var(--navy); }
.vergleich__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.vergleich__hinweis { font-size: 0.875rem; color: var(--neben); margin-top: 0.9rem; }
/* «Aus 40 wird 90» (17.10.2026): die fünf Kategorien als Messlatten wie im Prüfblatt von /webseiten-check statt einer Zeile mit
   zehn Zahlen. Jede Linie beginnt links bei 0 (Entscheid 21.10.2026, vorher lag sie zwischen zwei Punkten, die wie Regler
   aussahen): grau bis zum Wert vorher, Navy weiter bis nachher, in den Farben der beiden Zahlen rechts; nachher in der Serif */
.umbau-werte__legende { display: flex; justify-content: flex-end; gap: 0.45rem; max-width: 640px; margin-top: 1.5rem; padding-bottom: 0.4rem; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--leise); }
.umbau-werte__legende span:last-child { min-width: 1.6rem; text-align: right; }
.umbau-werte { max-width: 640px; border-top: 1px solid var(--linie-stark); }
.umbau-werte li { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) 4.6rem; column-gap: 1.1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.umbau-werte__name { font-size: 0.875rem; line-height: 1.35; color: var(--text); }
.umbau-werte__spur { position: relative; display: block; height: 6px; border-radius: 3px; background: #E6EAF0; }
.umbau-werte__spur i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--nachher) * 1%); border-radius: 3px; background: var(--navy); overflow: hidden; }
.umbau-werte__spur i::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--vorher) / var(--nachher) * 100%); background: var(--leise); }
.umbau-werte__zahl { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.45rem; font-variant-numeric: tabular-nums; }
.umbau-werte__vorher { font-size: 0.8125rem; color: var(--leise); }
.umbau-werte__nachher { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--navy); }
@media (max-width: 640px) {
    .umbau-werte li { grid-template-columns: minmax(0, 1fr) 4.2rem; row-gap: 0.4rem; }
    .umbau-werte__spur { grid-column: 1 / -1; grid-row: 2; }
}
.messwert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linie); }   /* zu schmal: die Bezeichnung steht über der Zahl, «/ 100» bricht nie allein um */
.messwert__lbl { font-size: 0.875rem; font-weight: 500; color: var(--neben); min-width: 4.5rem; }
.messwert__zahl { font-family: var(--font-display); font-size: 3.25rem; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.messwert__zahl small { font-family: var(--font-text); font-size: 0.9375rem; color: var(--leise); margin-left: 0.2rem; }
.messwert__zahl--neu em { font-style: italic; color: var(--lime-text); }
.umbau-statisch__details { font-size: 0.9375rem; color: var(--neben); margin-top: 0.6rem; line-height: 1.6; }
.umbau-statisch__cta { margin-top: 3rem; }
@media (max-width: 640px) {
    .vergleich__regler { top: 28px; height: calc(100% - 28px); }
    .vergleich__werte { gap: 1.25rem; }
    .messwert__zahl { font-size: 2.75rem; }
    .umbau-statisch__cta .knopf { width: 100%; }
}
html.szene-an .umbau-statisch { display: none; }

/* ==========================================================================
   Rahmen: der Browserrahmen der Szene als wiederkehrendes Objekt
   ========================================================================== */
.rahmen { display: block; position: relative; border-radius: 12px; overflow: hidden; background: #0E223F; isolation: isolate; }
.dunkel .rahmen::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; z-index: 3; }
.rahmen__leiste { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; height: 36px; padding: 0 12px; background: linear-gradient(180deg, #13294A, #0F2342); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rahmen__punkte { display: flex; gap: 6px; }
.rahmen__punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.17); }
.rahmen__adresse { justify-self: center; display: flex; align-items: center; justify-content: center; justify-content: safe center; gap: 6px; width: min(100%, 340px); padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; line-height: 1.2; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rahmen__adresse svg { width: 10px; height: 10px; opacity: 0.6; flex: none; }
.rahmen__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* lange Adresse in schmalen Rahmen: Auslassungspunkte statt abgeschnittener Zeichen */
.rahmen__fenster { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.rahmen__seite { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform: translateY(0); transition: transform 1.1s var(--ease); will-change: transform; }
/* Beim Zeigen fährt die Seite langsam abwärts: man sieht mehr als den ersten Bildschirm */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.rahmen:hover .rahmen__seite, a.rahmen:focus-visible .rahmen__seite { transform: translateY(-56%); transition: transform 7s cubic-bezier(0.45, 0, 0.4, 1); }
}
.dunkel .rahmen { box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.75), 0 20px 40px -24px rgba(0, 0, 0, 0.55); }
.rahmen--hell { box-shadow: 0 40px 80px -40px rgba(10, 31, 61, 0.35), 0 12px 24px -16px rgba(10, 31, 61, 0.18); }
@media (max-width: 640px) {
    .rahmen, .rahmen::after { border-radius: 9px; }
    .rahmen__leiste { height: 28px; grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 0 9px; }
    .rahmen__punkte { gap: 4px; }
    .rahmen__punkte i { width: 6px; height: 6px; }
    .rahmen__adresse { font-size: 10px; padding: 2px 8px; }
}

/* ==========================================================================
   Arbeiten — die eine dunkle Fläche in der Mitte
   ========================================================================== */
.arbeiten { position: relative; isolation: isolate; padding: var(--abschnitt) 0 calc(var(--abschnitt) + 1rem); }
.arbeiten > .wrap { position: relative; z-index: 1; }   /* über dem Messraster (raster.js setzt die Leinwand als erstes Kind, Wunsch 15.10.) */
.projekt--breit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
.projekt--breit .rahmen { grid-column: 1 / span 8; }
.projekt--breit .projekt__text { grid-column: 9 / -1; }
.projekt--gespiegelt { margin-top: clamp(3rem, 2.25rem + 3vw, 5rem); }
.projekt--gespiegelt .rahmen { grid-column: 5 / -1; grid-row: 1; }
.projekt--gespiegelt .projekt__text { grid-column: 1 / span 4; grid-row: 1; }
.projekte-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: clamp(3rem, 2.25rem + 3vw, 5rem); }
.projekte-paar .projekt__text { margin-top: 1.6rem; }
.projekt__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.85rem, 1.5rem + 1vw, 2.3rem); line-height: 1; letter-spacing: -0.01em; color: #fff; }
.projekt__art { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.55rem; }
.projekt__satz { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.76); margin-top: 0.9rem; max-width: 30em; }
.projekt__fakten { margin-top: 1.1rem; border-top: 1px solid var(--linie-hell); }
.projekt__fakten li { font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); padding: 0.55rem 0; border-bottom: 1px solid var(--linie-hell); }
.projekt .textlink { margin-top: 1.2rem; color: #fff; }
.projekte-paar .projekt__fakten { display: grid; grid-template-columns: 1fr; }

/* ==========================================================================
   Haltung — wer dahinter steht und wie wir arbeiten. Links das Typenschild (Navy-Platte wie ein Datenblatt)
   ========================================================================== */
.haltung { padding: var(--abschnitt) 0; }
/* Zwei gleiche Hälften: links Titel und Typenschild, rechts Einleitung und Grundsätze; Platte und Grundsätze gleich hoch */
.kopf--haltung .titel { grid-column: 1 / span 6; }
.kopf--haltung .lead { grid-column: 7 / -1; }
.haltung__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: stretch; }
.typenschild { grid-column: 1 / span 6; display: flex; flex-direction: column; background: var(--navy); color: #fff; border-radius: 12px; padding: 1.9rem 2.1rem 1.6rem; }
.typenschild__kopf { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.typenschild__zeichen { width: 40px; height: 40px; flex: none; }
.typenschild__kopf p { display: flex; flex-direction: column; line-height: 1.3; }
.typenschild__kopf b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.typenschild__kopf span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.62); }
.datenblatt { flex: 1; display: flex; flex-direction: column; }
.datenblatt div { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 3.1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); line-height: 1.4; }
.datenblatt dt { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.64); }
.datenblatt dd { font-size: 1rem; color: #fff; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.typenschild__fuss { display: flex; align-items: center; gap: 0.55rem; padding-top: 1.3rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.62); }
.typenschild__fuss::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }
.grundsaetze { grid-column: 7 / -1; display: flex; flex-direction: column; border-top: 1px solid var(--linie-stark); }
.grundsatz { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.6rem 0; border-bottom: 1px solid var(--linie); }
.grundsatz:last-child { border-bottom-color: var(--linie-stark); }
.grundsatz h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.8rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
.grundsatz p { font-size: 1rem; color: var(--neben); margin-top: 0.55rem; line-height: 1.6; max-width: 33em; }

/* ==========================================================================
   Leiter — vier Stationen auf einer Linie, Karten gleich hoch, Zeilen über alle Karten bündig (subgrid)
   Lime bleibt dem Check vorbehalten; Stufe 02 ist Navy mit hellem Knopf
   ========================================================================== */
/* Leiter (15.10.2026, Design-Plan §21 und §25): Karten nach der alten Startseite, noch etwas hochwertiger. Zwei mal zwei
   Karten mit blasser Nummer, Name, kursiver Zeile mit Lime-Kante (wie die Pakete), Preis in der Serif, Haken-Liste.
   Weicher Schatten, der beim Darüberfahren leicht hebt; ruhige Umriss-Knöpfe, nur die Navy-Stufe trägt den weissen Knopf
   (Lime bleibt der Hauptaktion). Seit 20.10.2026 (Design-Plan §44): Auf der Startseite steht nur die Nummer, das Etikett
   darüber ist weg (Eyebrow, Anti-Slop-Liste). Haarlinie plus Schatten und die Lime-Kante sind gepinnt (Entscheid 20.10.). */
.leiter { padding: var(--abschnitt) 0; }   /* keine Trennlinie zwischen hellen Abschnitten (Wunsch 18.10.2026), auch nicht bei .einstieg, .fragen, .checkliste */
/* Zwei helle Abschnitte hintereinander: ohne Trennlinie war der doppelte Abstand zu gross. Der zweite beginnt mit einem halben
   Abstand, zusammen also anderthalb statt zwei (Wunsch 18.10.2026). Ein Skript zwischen den Abschnitten zählt nicht */
section:not(.dunkel):not(.szene) + section:not(.dunkel),
section:not(.dunkel):not(.szene) + script + section:not(.dunkel) { padding-top: calc(var(--abschnitt) * 0.5); }
.stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); column-gap: 24px; }
.stufe { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: 2.6rem 2.7rem 2.5rem; background: var(--platte); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 30px 60px -48px rgba(10, 31, 61, 0.32); transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
.stufe:hover { border-color: var(--linie-stark); box-shadow: 0 44px 80px -50px rgba(10, 31, 61, 0.42); translate: 0 -3px; }   /* translate statt transform: das Einblenden (Bewegung 2) nutzt transform */
.stufe:nth-child(n+3) { margin-top: 24px; }
.stufe__nr { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* span: nur noch «Du bist hier» auf /vorschau und /webseiten-check (.stufe__hier); die Startseite zeigt nur die Nummer */
.stufe__nr span { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neben); }
.stufe__nr span::before { content: ''; width: 6px; height: 6px; border: 1px solid rgba(10, 31, 61, 0.2); border-radius: 50%; background: var(--lime); }
.stufe__nr b { margin: -0.55rem -0.15rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--linie-stark); }
.stufe__name { margin-top: 1.5rem; font-size: 1.55rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; color: var(--navy); }
.stufe__satz { margin-top: 0.85rem; max-width: 30em; padding: 0.1rem 0 0.1rem 1rem; border-left: 2px solid var(--lime); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--text); }
.stufe__preis { align-self: end; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.5rem; margin-top: 1.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 2rem + 1vw, 2.9rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.stufe__preis small { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--neben); }
.stufe__preis--wort { font-size: clamp(2rem, 1.7rem + 0.8vw, 2.4rem); }
.stufe__notiz { margin-left: 0.15rem; font-family: var(--font-text); font-size: 0.8125rem; letter-spacing: 0; color: var(--neben); }
.stufe__liste { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.stufe__liste li { position: relative; padding: 0.3rem 0 0.3rem 1.65rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.stufe__liste li::before { content: ''; position: absolute; left: 0.15rem; top: 0.68rem; width: 9px; height: 5px; border: solid var(--lime-text); border-width: 0 0 1.75px 1.75px; transform: rotate(-45deg); }
/* WhatsApp-Band wie live auf /webseiten, im Premium-Look (Wunsch 15.10.2026): feine grüne Kante, ruhige Tönung, Radius
   des Systems, zwei Zeilen. Das Zeichen bleibt in seiner Farbe, rein beschreibende Nennung (Markenrecht). */
.stufe__liste li.stufe__kanal { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.9rem; padding: 0.85rem 1rem; border: 1px solid rgba(37, 211, 102, 0.42); border-radius: var(--radius); background: rgba(37, 211, 102, 0.06); }
.stufe__liste li.stufe__kanal::before { content: none; }
.stufe__kanal svg { width: 28px; height: 28px; flex: none; color: #25D366; }
.stufe__kanal span { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.3; }
.stufe__kanal b { font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.stufe__kanal small { font-size: 0.8125rem; color: var(--neben); }
.stufe__weg { align-self: end; margin-top: 1.9rem; }
.stufe--haupt { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 50px 90px -55px rgba(10, 31, 61, 0.6); }
.stufe--haupt:hover { border-color: var(--navy); box-shadow: 0 60px 100px -55px rgba(10, 31, 61, 0.68); }
.stufe--haupt .stufe__nr b { color: rgba(255, 255, 255, 0.16); }
.stufe--haupt .stufe__name, .stufe--haupt .stufe__preis { color: #fff; }
.stufe--haupt .stufe__satz { color: rgba(255, 255, 255, 0.86); }
.stufe--haupt .stufe__preis small, .stufe--haupt .stufe__notiz { color: rgba(255, 255, 255, 0.66); }
.stufe--haupt .stufe__liste { border-color: var(--linie-hell); }
.stufe--haupt .stufe__liste li { color: rgba(255, 255, 255, 0.88); }
.stufe--haupt .stufe__liste li::before { border-color: var(--lime); }
.wischhinweis { display: none; font-size: 0.8125rem; color: var(--neben); margin: -0.25rem 0 0; }
.leiter__fuss { margin-top: 2.5rem; max-width: 44em; font-size: 0.9375rem; line-height: 1.65; color: var(--neben); }
.leiter__fuss .textlink { color: var(--navy); }

/* Marke «Empfohlen»: Lime-Punkt; auf hellem Grund Text in Lime-Text, auf Navy in Lime */
.marke { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--lime-text); }
.marke::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.18); }
.dunkel .marke, .stufe--haupt .marke { color: var(--lime); }

/* ==========================================================================
   Einstieg — die Einstiegsprodukte im Einzelnen (Wunsch 14.10.): Bild des Ergebnisses, Zeilen bündig
   ========================================================================== */
.einstieg { padding: var(--abschnitt) 0; }   /* Papier wie alle hellen Abschnitte (15.10.); die Bildkacheln sind darum weiss */
.produkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: 32px; }
/* Karte: Bild, Texte, Preis und Knopf in einer Box (Wunsch 18.10.: «den Textinhalt in die Box»); das Bild liegt oben in einer Ablage */
.produkt { display: grid; grid-row: span 7; grid-template-rows: subgrid; padding: 12px 12px 1.5rem; border-radius: 16px; background: var(--platte); box-shadow: inset 0 0 0 1px var(--linie); }
.produkt > :not(.produkt__bild) { padding-inline: 1rem; }
.produkt__bild { position: relative; aspect-ratio: 5 / 4; border-radius: 10px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; container-type: inline-size; margin-bottom: 1.5rem; }
.produkt__bild .blatt { position: absolute; height: auto; border-radius: 3px; box-shadow: 0 22px 34px -20px rgba(10, 31, 61, 0.5); }
.produkt__bild--check .blatt--hinten { width: 42%; left: 12%; top: 13%; }
.produkt__bild--check .blatt--vorn { width: 42%; left: 44%; top: 22%; }
.produkt__bild .blatt--quer { width: 84%; left: 8%; top: 50%; transform: translateY(-50%); }
.produkt__bild--bundle .blatt--hinten { width: 38%; left: 8%; top: 10%; }
.produkt__bild--bundle .blatt--quer { width: 70%; left: 26%; top: 58%; }
.produkt__art { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 500; color: var(--neben); }
.produkt__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.35rem + 0.6vw, 1.95rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); margin-top: 0.45rem; }
.produkt__satz { font-size: 0.9375rem; line-height: 1.55; color: var(--neben); margin-top: 0.65rem; }
.produkt__liste { margin-top: 1.1rem; border-top: 1px solid var(--linie); }
.produkt__liste li { font-size: 0.875rem; line-height: 1.45; color: var(--text); padding: 0.5rem 0; border-bottom: 1px solid var(--linie); }
.produkt__preis { align-self: end; margin-top: 1.25rem; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.produkt__preis small { display: inline-block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--neben); margin-left: 0.3rem; }   /* rutscht als Ganzes in die nächste Zeile */
.produkt__preis small span { white-space: nowrap; }   /* «Geld-zurück-Garantie» bricht nie am Bindestrich */
/* Ersparnis beim Bundle (Wunsch 16.10.2026, wie im Formular /check-start): Etikett mit Lime-Punkt, gerechnet gegen die heutigen
   Einzelpreise, ohne Streichpreis (Rechtsfrage offen). Auf Navy als Umriss */
.ersparnis { display: flex; align-items: center; gap: 0.4rem; width: fit-content; padding: 0.32rem 0.65rem 0.34rem; border-radius: 6px; background: var(--navy); font-family: var(--font-text); font-size: 0.8125rem; font-weight: 600; font-style: normal; line-height: 1.2; letter-spacing: 0; color: #fff; }
.ersparnis::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.dunkel .ersparnis { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.produkt__preis .ersparnis { margin-bottom: 0.65rem; }
.produkt__weg { margin-top: 1rem; }
.produkt__weg .knopf { width: 100%; }
.produkte--kurz { grid-template-rows: repeat(6, auto); }   /* Startseite: ohne Liste, ein Satz je Produkt (Wunsch 15.10.: «zu viel») */
.produkte--kurz .produkt { grid-row: span 6; }
.produkte--kurz .produkt__satz { text-wrap: balance; }   /* kein einzelnes Wort allein in der zweiten Zeile */
.produkte--kurz .produkt { text-align: center; }   /* Texte mittig (Wunsch 15.10.) */
.produkte--kurz .produkt__art { justify-content: center; }
.produkte--kurz .produkt__art .marke { margin-left: 0; }   /* «Empfohlen» steht neben dem Etikett statt am rechten Rand */
.produkte--kurz .produkt__preis .ersparnis { margin-inline: auto; }   /* mittig wie Preis und Texte */
@media (min-width: 641px) and (max-width: 1100px) {
    /* Drei schmale Karten (Tablet, kleiner Laptop): knappere Abstände, Knöpfe einzeilig, «Empfohlen» unter das Etikett */
    .produkt { padding: 10px 10px 1.25rem; }
    .produkt > :not(.produkt__bild) { padding-inline: 0.25rem; }
    .produkt__weg .knopf { padding-inline: 0.8rem; gap: 0.45rem; }
    .produkte--kurz .produkt__art { flex-wrap: wrap; row-gap: 0.15rem; }
}
/* Einstieg auf Navy (Startseite, Wunsch 15.10.2026): Die Blätter liegen auf einer leicht gehobenen Navy-Fläche statt auf
   Papier; /angebote zeigt dieselben Karten weiter auf Weiss. */
.einstieg.dunkel { background: var(--navy); }
.dunkel .produkt { background: var(--navy-hoch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.dunkel .produkt__bild { background: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.dunkel .produkt__bild .blatt { box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.6); }
.dunkel .produkt__art { color: rgba(255, 255, 255, 0.62); }
.dunkel .produkt__name, .dunkel .produkt__preis { color: #fff; }
.dunkel .produkt__satz { color: rgba(255, 255, 255, 0.72); }
.dunkel .produkt__liste, .dunkel .produkt__liste li { border-color: var(--linie-hell); }
.dunkel .produkt__liste li { color: rgba(255, 255, 255, 0.88); }
.dunkel .produkt__preis small { color: rgba(255, 255, 255, 0.62); }
.dunkel .wischhinweis { color: rgba(255, 255, 255, 0.62); }
.dunkel .knopf--rand { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.dunkel .knopf--rand:hover { background: #fff; color: var(--navy); }

/* ==========================================================================
   Häufige Fragen
   ========================================================================== */
.fragen { padding: var(--abschnitt) 0; }
.fragen__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.fragen__kopf { grid-column: 1 / span 4; position: sticky; top: 110px; }
.fragen__hilfe { font-size: 1rem; color: var(--neben); margin-top: 1.5rem; max-width: 22em; }
.fragen__hilfe .textlink { color: var(--navy); }
/* Fragen (15.10.2026): Fragen in der Serif, der Schalter ein feiner Kreis, der beim Öffnen Navy wird; oben die
   Navy-Linie wie auf den Blättern der Seite */
.fragen__aktion { margin-top: 2rem; }   /* Hauptaktion in der klebenden Spalte (Unterseiten, seit 17.10.2026 auch die Startseite) */
.faq-list { grid-column: 6 / -1; border-top: 2px solid var(--navy); }
.faq-item { border-bottom: 1px solid var(--linie-stark); }
.faq-h { font: inherit; letter-spacing: normal; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.7rem 0; text-align: left; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.55vw, 1.7rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.005em; color: var(--navy); }
.faq-question:hover { color: #16305A; }
.faq-icon { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-question:hover .faq-icon { box-shadow: inset 0 0 0 1px var(--navy); }
.faq-item.active .faq-icon { background: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); color: #fff; }
.faq-item.active .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
/* Zugeklappt auch unsichtbar, damit der Tab-Fokus nicht in verborgenen Links landet (Analyse 16.10.2026) */
.faq-answer { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.32s var(--ease), visibility 0s linear 0.32s; }
.faq-item.active .faq-answer { visibility: visible; transition-delay: 0s; }
.faq-answer__inner { padding: 0 5rem 1.9rem 0; font-size: 1.0625rem; line-height: 1.7; color: var(--neben); max-width: 40em; }
.faq-answer__inner a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Checkliste (Opt-in)
   ========================================================================== */
.checkliste { padding: var(--abschnitt) 0; }   /* Papier wie alle hellen Abschnitte (Wunsch 15.10.: alle hellen Hintergründe gleich) */
.optin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.optin__text { grid-column: 1 / span 6; }
.optin__text .lead { margin-top: 1.5rem; }
.optin__punkte { margin-top: 1.75rem; border-top: 1px solid var(--linie); max-width: 32em; }
.optin__punkte li { font-size: 1rem; color: var(--text); padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.optin__form { margin-top: 2.25rem; max-width: 34em; position: relative; }
.optin__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 0.55rem; }
.optin__zeile { display: flex; gap: 0.6rem; }
.optin__input {
    flex: 1; min-width: 0; height: 56px; padding: 0 1rem; font: inherit; font-size: 1rem; color: var(--text);
    background: #fff; border: 1px solid var(--feldrand); border-radius: var(--radius); transition: border-color 0.2s, box-shadow 0.2s;
}
.optin__input::placeholder { color: #7A8494; }
.optin__input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 31, 61, 0.14); }
.optin__input:focus-visible { outline: none; border-radius: var(--radius); box-shadow: 0 0 0 3px rgba(10, 31, 61, 0.14); }
.optin__input[aria-invalid="true"] { border-color: #B91C1C; }
.optin__btn { flex: none; }
.optin__btn:disabled { opacity: 0.6; cursor: wait; }
.optin__consent { font-size: 0.8125rem; line-height: 1.55; color: var(--neben); margin-top: 0.85rem; }
.optin__consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.optin__status { font-size: 0.9375rem; line-height: 1.5; min-height: 1.4em; margin-top: 0.5rem; }
.optin__status--error { color: #B91C1C; }
.optin__status--ok { color: var(--lime-text); font-weight: 500; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Das gedruckte Blatt */
.optin__blatt { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 440px; background: #fff; border-radius: 3px; padding: 2.4rem 2.2rem 1.8rem;
    /* ein zweites Blatt darunter als Schatten, damit der Lime-Scan (overflow: hidden) es nicht abschneidet */
    box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.07), 12px 12px 0 -1px #fff, 12px 12px 0 0 rgba(10, 31, 61, 0.12), 0 60px 100px -50px rgba(10, 31, 61, 0.5), 0 16px 30px -20px rgba(10, 31, 61, 0.25); }
.optin__blatt-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--leise); padding-bottom: 0.9rem; border-bottom: 2px solid var(--navy); }
.optin__blatt-kopf b { color: var(--navy); font-weight: 600; }
.optin__blatt-titel { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; color: var(--navy); margin: 1.2rem 0 1.1rem; }
.optin__blatt-zeile { display: grid; grid-template-columns: 18px 1fr; gap: 0.85rem; align-items: start; padding: 0.62rem 0; border-top: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.45; color: var(--text); }
.optin__box { width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid #8A95A5; border-radius: 3px; position: relative; }
.optin__box--an { background: var(--lime); border-color: var(--lime); }
.optin__box--an::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.optin__blatt-fuss { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--leise); border-top: 1px solid var(--linie); margin-top: 0.4rem; padding-top: 0.9rem; }

/* ==========================================================================
   Schluss
   ========================================================================== */
.schluss { padding: var(--abschnitt) 0; overflow: hidden; }
.schluss__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.schluss__text { grid-column: 1 / span 7; }
.schluss .titel { font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem); max-width: 11em; }
.schluss .lead { margin-top: 1.75rem; max-width: 30em; }
.schluss__aktion { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.9rem; margin-top: 2.5rem; }
.schluss .textlink { color: #fff; }
.schluss__hinweis { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie-hell); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.66); max-width: 32em; }
.schluss__hinweis .textlink { color: #fff; }
.schluss__report { grid-column: 9 / -1; position: relative; margin: 0; padding: 0 0 0 1rem; }
.schluss__blaetter { position: relative; aspect-ratio: 760 / 1075; width: min(100%, 340px); margin-left: auto; }
.schluss__blaetter img { position: absolute; width: 100%; height: auto; border-radius: 3px; }
.schluss__blaetter .report--hinten { top: -6%; left: -22%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.schluss__blaetter .report--vorn { top: 6%; left: 8%; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 16px 30px -20px rgba(0, 0, 0, 0.6); }
.schluss__report figcaption { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.58); margin-top: 3.5rem; text-align: right; }

/* ==========================================================================
   Fusszeile (Klassen wie das Partial)
   ========================================================================== */
.footer { background: var(--tiefe); color: rgba(255, 255, 255, 0.72); padding: 5rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer__brand { max-width: 360px; }
.footer__logo { display: inline-block; border-radius: 6px; }
.footer__logo svg { height: 30px; width: auto; display: block; }
.footer__claim { font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.62); margin-top: 1.25rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__title { font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: 0.35rem; }
.footer__link { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.66); transition: color 0.2s; width: fit-content; }
.footer__link:hover { color: #fff; }
.footer__copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.58); margin-top: 1.75rem; }
.footer__copy .vw-credit { margin-left: 0; }
.footer__copy .vw-credit::before { content: none; }

/* ==========================================================================
   Hinweis beim Gehen (Logik in site.js): leise Navy-Leiste unten, ein Weg zum kleineren Schritt. Auf /webseiten nach
   den Paketen, auf der Startseite nach der Leiter (data-nach, Wunsch 15.10.2026). Vorne der Messpunkt.
   ========================================================================== */
.exit-bar {
    position: fixed; left: 50%; bottom: 18px; z-index: 900; display: flex; align-items: center; gap: 1rem;
    width: max-content; max-width: calc(100% - 2 * var(--rand)); padding: 0.65rem 0.65rem 0.65rem 1.3rem;
    background: var(--navy); color: #fff; border-radius: 12px;
    box-shadow: 0 24px 50px -20px rgba(1, 7, 18, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) translateY(calc(100% + 30px)); transition: transform 0.5s var(--ease); visibility: hidden;
}
.exit-bar::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.exit-bar--visible { transform: translateX(-50%) translateY(0); visibility: visible; }
.exit-bar__text { font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, 0.74); }
.exit-bar__text strong { font-weight: 600; color: #fff; }
.exit-bar__cta { min-height: 44px; padding: 0 1rem 0 1.15rem; font-size: 0.875rem; white-space: nowrap; }
.exit-bar__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; font-size: 1.4rem; line-height: 1; color: rgba(255, 255, 255, 0.7); }
.exit-bar__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.exit-bar__mob { display: none; }
@media (max-width: 640px) {
    .exit-bar { left: var(--rand); right: var(--rand); width: auto; max-width: none; transform: translateY(calc(100% + 30px)); padding-left: 1rem; gap: 0.6rem; }
    .exit-bar--visible { transform: translateY(0); }
    .exit-bar__desk { display: none; }
    .exit-bar__mob { display: inline; }
    .exit-bar__text { flex: 1; font-size: 0.875rem; }
}
/* Querformat: die kurze Fassung statt drei Zeilen über Lead und Fakten (Handy-Analyse 20.10.2026) */
@media (max-height: 480px) {
    .exit-bar__desk { display: none; }
    .exit-bar__mob { display: inline; }
}
/* Link-Fassung (Startseite und /webseiten): unter 400 px ist der Text selbst der Link, ohne zweiten Knopf. Er fliesst
   wie ein Satz; als Tabellenzelle bleibt er 44 px hoch und mittig, auch zweizeilig, so ist die Leiste überall rund
   65 px hoch und das Kreuz im Bild (Handy-Analyse 20.10.2026; vorher in unterseiten.css, die die Startseite nicht lädt,
   und in zwei Spalten) */
.exit-bar__link { display: none; }
@media (max-width: 399px) {
    .exit-bar--link .exit-bar__cta, .exit-bar--link .exit-bar__mob { display: none; }
    .exit-bar--link .exit-bar__link { display: table-cell; vertical-align: middle; height: 44px; color: rgba(255, 255, 255, 0.86); text-decoration: none; }
    .exit-bar--link .exit-bar__link strong { color: #fff; }
    .exit-bar--link .exit-bar__link .pfeil { display: inline-block; vertical-align: -0.22em; margin-left: 0.3rem; }
}

/* ==========================================================================
   Breiten
   ========================================================================== */
@media (max-width: 1100px) {
    .stufe { padding: 2rem 1.75rem 1.9rem; }
    .fragen__kopf { grid-column: 1 / span 5; }
    .faq-list { grid-column: 6 / -1; }
}
@media (max-width: 900px) {
    .kopf { display: block; }
    .kopf .lead { margin-top: 1.4rem; padding-bottom: 0; }
    .projekt--breit { display: block; }
    .projekt--breit .projekt__text { margin-top: 1.6rem; }
    .projekte-paar { grid-template-columns: 1fr; gap: 3.5rem; }
    .haltung__raster { display: block; }
    .typenschild { max-width: 560px; margin-bottom: 3rem; }
    .grundsatz { flex: none; }
    .fragen__raster { display: block; }
    .fragen__kopf { position: static; margin-bottom: 2.75rem; }
    .optin { display: block; }
    .optin__blatt { max-width: 440px; margin-top: 3.5rem; padding: 1.9rem 1.6rem 1.4rem; }
    .schluss__raster { display: block; }
    .schluss__report { margin-top: 4rem; padding: 0; }
    .schluss__blaetter { margin: 0 auto 0 22%; width: min(66%, 300px); }
    .schluss__report figcaption { text-align: left; margin-top: 3rem; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
    .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    body { font-size: 1rem; }
    html:not(.szene-an) .szene .hero__headline { line-height: 1.05; }
    /* Leiter und Einstiegsprodukte als Reihe zum Wischen: die nächste Karte schaut herein, Stationen und Linie bleiben */
    .stufen, .produkte { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 1rem; scroll-padding-inline: var(--rand); scrollbar-width: none; }
    .stufen::-webkit-scrollbar, .produkte::-webkit-scrollbar { display: none; }
    .stufe { flex: 0 0 86%; display: flex; flex-direction: column; scroll-snap-align: start; padding: 1.8rem 1.4rem 1.6rem; }
    .stufe:nth-child(n+3) { margin-top: 0; }
    .stufe__nr b { font-size: 2.9rem; }
    .faq-question { gap: 1.25rem; padding: 1.35rem 0; }
    .faq-icon { width: 34px; height: 34px; }
    .faq-answer__inner { padding-right: 0; }
    .produkt { flex: 0 0 84%; display: flex; flex-direction: column; scroll-snap-align: start; padding: 10px 10px 1.4rem; }
    .produkt > :not(.produkt__bild) { padding-inline: 0.35rem; }   /* Preis und Zusatz bleiben ab 375 px auf einer Zeile */
    .produkt:nth-child(n+3) { margin-top: 0; }
    .stufe__preis, .stufe__weg, .produkt__preis { align-self: auto; }
    .stufe__weg, .produkt__weg { margin-top: auto; padding-top: 1.4rem; }
    .wischhinweis { display: block; }
    .optin__zeile { flex-direction: column; }
    .optin__input { flex: none; width: 100%; }
    .optin__btn { width: 100%; }
    .optin__blatt { padding: 1.5rem 1.25rem 1.2rem; }
    .optin__blatt-titel { font-size: 1.45rem; }
    .schluss__aktion { flex-direction: column; align-items: stretch; }
    .schluss__aktion .textlink { align-self: flex-start; }
    .footer { padding-top: 4rem; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__copy { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
    .nav__cta--mobil { padding: 0 0.7rem; }
    .nav__logo svg { height: 30px; }   /* 15 % grösser (Entscheid 21.10.2026), vorher 26 px */
    /* 360 und 375 px (Android, iPhone SE und mini): Knöpfe der Leiter und Werte im Datenblatt bleiben einzeilig */
    .stufe__weg .knopf { padding-inline: 1.1rem 1rem; gap: 0.5rem; font-size: 0.9375rem; }
    .typenschild { padding-inline: 1.4rem; }
}
/* Leiste auf schmalen Handys (Handy-Analyse 20.10.2026, H32): Bei 320 px stiessen die Striche des Menüknopfs an den Rand,
   darunter waren sie abgeschnitten, bei 260 px (Safari-Schrift 150 %) lag der Menüknopf ganz ausserhalb. Unter 341 px rücken
   Knopf und Menüknopf zusammen, unter 301 px entfällt der Knopf, «Check starten» steht dann im Hero */
@media (max-width: 340px) {
    .nav__inner { gap: 0.75rem; }
    .nav__aktionen { gap: 0.25rem; }
    .nav__cta--mobil { padding: 0 0.6rem; }
}
@media (max-width: 320px) {
    .nav__logo svg { height: 28px; }   /* bei 312 px (Safari-Schrift 125 %) stiess der Menüknopf auf /vorschau sonst an den Rand */
}
@media (max-width: 300px) {
    .nav__cta--mobil { display: none; }
}
/* Schmale Handys (Handy-Analyse 20.10.2026): Unter 356 px brachen die Knöpfe der Leiter um, unter 341 px machte
   «Einstiegsprodukte» die erste Karte zudem breiter als die anderen. Polster, Name und Knopf werden stufenweise kleiner */
@media (max-width: 355px) {
    .stufe { padding-inline: 0.9rem; }
}
@media (max-width: 340px) {
    .stufe__name { font-size: 1.4rem; -webkit-hyphens: auto; hyphens: auto; }
    .stufe__weg .knopf { font-size: 0.875rem; padding-inline: 0.9rem 0.8rem; }
}
@media (max-width: 315px) {
    .stufe__weg .knopf { padding-inline: 0.7rem 0.6rem; }
}

/* ==========================================================================
   Bewegung «Die Messung läuft mit» (Entscheid 14.10.2026: Effekte 1, 2, 3, 4, 6, 7, 8 aus dem Prüfstand)
   Wo die Seite misst oder prüft, läuft einmal die Lime-Linie aus der Szene. Jeder Abschnitt hat höchstens einen
   Moment, nichts läuft endlos. html.bewegt setzt das Skript im <head> (nie bei reduzierter Bewegung); die
   Ausgangszustände gelten erst mit html.bewegt-bereit aus effekte.js, fällt das Skript aus, bleibt alles sichtbar.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* 1 · Auftritt im Hero beim Laden: Text steigt in Folge auf, der Rahmen setzt sich, die Seite darin schaltet ein */
    html.bewegt .szene .hero__headline { animation: fx-auf 1s var(--ease) 0.05s backwards; }
    html.bewegt .szene .hero__lead { animation: fx-auf 1s var(--ease) 0.17s backwards; }
    html.bewegt .szene .hero__fakten { animation: fx-auf 1s var(--ease) 0.27s backwards; }
    html.bewegt .szene__hero .hero__aktion { animation: fx-auf 1s var(--ease) 0.37s backwards; }
    html.bewegt .szene__objekt { animation: fx-rahmen 1.3s var(--ease) 0.1s backwards; }
    html.bewegt .objekt__neu::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #0E223F; pointer-events: none; animation: fx-einschalten 1s var(--ease) 0.55s both; }

    /* 2 · Leiter: die Karten erscheinen nacheinander (die Leiter-Linie entfiel mit den Karten im 2×2-Raster, 15.10.2026) */
    html.bewegt-bereit .stufe { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), translate 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
    html.bewegt-bereit .stufen.ist-da .stufe { opacity: 1; transform: none; }
    html.bewegt-bereit .stufen.ist-da .stufe:nth-child(2) { transition-delay: 0.38s, 0.38s, 0s, 0s, 0s; }   /* Verzögerung nur fürs Einblenden, nicht fürs Heben */
    html.bewegt-bereit .stufen.ist-da .stufe:nth-child(3) { transition-delay: 0.76s, 0.76s, 0s, 0s, 0s; }
    html.bewegt-bereit .stufen.ist-da .stufe:nth-child(4) { transition-delay: 1.14s, 1.14s, 0s, 0s, 0s; }

    /* 3 · Typenschild: die Linie liest die Werte ab, Zeile für Zeile */
    html.bewegt-bereit .typenschild, html.bewegt-bereit .optin__blatt { position: relative; overflow: hidden; }
    html.bewegt-bereit .typenschild::after, html.bewegt-bereit .optin__blatt::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lime); opacity: 0; pointer-events: none; }
    html.bewegt-bereit .typenschild.ist-da::after, html.bewegt-bereit .optin__blatt.ist-da::after { animation: fx-scan 1.6s cubic-bezier(0.45, 0, 0.3, 1) 0.1s; }
    html.bewegt-bereit .typenschild .datenblatt dd { opacity: 0.58; transition: opacity 0.35s var(--ease); }   /* vor dem Scan noch 5,8 : 1 */
    html.bewegt-bereit .typenschild.ist-da .datenblatt div dd { opacity: 1; transition-delay: var(--d, 0s); }

    /* 4 · Checkliste: die Linie prüft die ersten zwei Punkte, der Zähler geht mit (effekte.js) */
    html.bewegt-bereit .optin__box--an { background: transparent; border-color: #8A95A5; transition: background-color 0.25s, border-color 0.25s; }
    html.bewegt-bereit .optin__box--an::after { opacity: 0; transform: rotate(45deg) scale(0.4); transition: opacity 0.2s, transform 0.35s var(--ease); }
    html.bewegt-bereit .ist-da .optin__box--an { background: var(--lime); border-color: var(--lime); transition-delay: var(--d, 0s); }
    html.bewegt-bereit .ist-da .optin__box--an::after { opacity: 1; transform: rotate(45deg) scale(1); transition-delay: var(--d, 0s); }

    /* 6 · Kleine Rückmeldungen: Knopf gibt nach, Unterstrich zieht sich, Blätter heben sich beim Zeigen */
    html.bewegt .knopf { transition: background-color 0.25s var(--ease), color 0.25s, transform 0.12s var(--ease); }
    html.bewegt .knopf:active { transform: scale(0.98); }
    html.bewegt .textlink { text-decoration: none; padding-bottom: 3px;
        background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent));
        background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0% 1px, 100% 1px; transition: background-size 0.4s var(--ease); }
    html.bewegt .textlink:hover { background-size: 100% 1px, 100% 1px; }
    html.bewegt .produkt__bild .blatt { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
    html.bewegt .produkt:hover .blatt--hinten { transform: translate(-6px, 2px) rotate(-1.5deg); }
    html.bewegt .produkt:hover .blatt--vorn { transform: translate(6px, -8px) rotate(1.2deg); box-shadow: 0 30px 44px -22px rgba(10, 31, 61, 0.55); }
    html.bewegt .produkt:hover .produkt__bild:not(.produkt__bild--bundle) .blatt--quer { transform: translateY(calc(-50% - 8px)); box-shadow: 0 30px 44px -22px rgba(10, 31, 61, 0.55); }
    html.bewegt .produkt:hover .produkt__bild--bundle .blatt--quer { transform: translate(6px, calc(-50% - 8px)); box-shadow: 0 30px 44px -22px rgba(10, 31, 61, 0.55); }   /* die Mitte bleibt, das Blatt hebt sich nur (16.10.2026) */

    /* 8 · Schluss: der Report wird überreicht, das vordere Blatt steigt, das hintere rückt nach */
    html.bewegt-bereit .schluss__blaetter img { opacity: 0; transition: opacity 0.9s var(--ease), transform 1.3s var(--ease); }
    html.bewegt-bereit .schluss__blaetter .report--vorn { transform: translateY(48px); transition-delay: 0.12s; }
    html.bewegt-bereit .schluss__blaetter .report--hinten { transform: translateX(28px); }
    html.bewegt-bereit .schluss__blaetter.ist-da img { opacity: 1; transform: none; }
}
/* 7 · Messlinie: Lesefortschritt an der Unterkante der Leiste (Breite per transform aus effekte.js) */
.messlinie { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); transform-origin: left center; transform: scaleX(0); pointer-events: none; }
@keyframes fx-auf { from { opacity: 0; transform: translateY(18px); } }
@keyframes fx-rahmen { from { opacity: 0; scale: 0.97; } }
@keyframes fx-einschalten { to { opacity: 0; } }
@keyframes fx-scan { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--scan-h, 400px)); } }

/* ==========================================================================
   Bewegung reduzieren (WCAG 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .stufe:hover { translate: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    html { scroll-behavior: auto; }
}