/* ==========================================================================
   vivekaweb.net — Unterseiten der Premium-Fassung (14.10.2026)
   /webseiten, /angebote, /webseiten-check, /vorschau. Lädt nach premium.css und nutzt dessen Tokens und Bausteine
   (.kopf, .stufen, .produkte, .fragen, .optin, .typenschild, .schluss, .rahmen, .knopf). Hier steht nur, was neu ist.
   Design-Plan: 02_Design/design-plan-premium.md, Abschnitt 9.
   ========================================================================== */

[id] { scroll-margin-top: 84px; }
.abschnitt { padding: var(--abschnitt) 0; }
.titel--mittel { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.1rem); line-height: 1.05; }
.kopf--nur-titel { margin-bottom: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.textlink--navy { color: var(--navy); }
.notiz { font-size: 0.9375rem; line-height: 1.65; color: var(--neben); max-width: 46em; }
.notiz .textlink, .notiz a { color: var(--navy); }
.notiz a:not(.textlink) { text-decoration: underline; text-underline-offset: 3px; }

/* Knöpfe auf Navy: Rand hell */

/* Leiste: wo man ist (seite.js setzt aria-current und die Markierung am Menüpunkt) */
.nav__link--aktiv { position: relative; color: #fff; }
.nav__link--aktiv::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--lime); }
.nav--scrolled:not(.nav--dunkel) .nav__link--aktiv::after { background: var(--lime-text); }
.nav--scrolled .nav__link--aktiv { color: var(--navy); }
.nav--scrolled.nav--dunkel .nav__link--aktiv { color: #fff; }
.nav__drop-link[aria-current="page"] { background: var(--papier); }
.nav__drop-link[aria-current="page"] .nav__drop-name::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 0.2em 0.45rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.2); vertical-align: middle; }
.nav__mobile a[aria-current="page"] { color: var(--lime-text); }

/* ==========================================================================
   Seitenkopf: Navy wie die Bühne der Startseite, mit Messraster (raster.js über data-raster)
   ========================================================================== */
.seitenkopf {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    min-height: 100svh; display: flex; align-items: center;
    padding: calc(72px + clamp(2.5rem, 1rem + 4vw, 4.5rem)) 0 clamp(3.5rem, 2rem + 4vw, 6rem);
    background: linear-gradient(180deg, #0C2447 0%, #0A1F3D 52%, #081A33 100%);
}
.seitenkopf > .wrap { position: relative; z-index: 1; }
.seitenkopf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.seitenkopf__text { grid-column: 1 / span 6; }
.seitenkopf__objekt { grid-column: 7 / -1; margin: 0; min-width: 0; }
.seitenkopf__titel {
    font-family: var(--font-display); font-weight: 400; color: #fff;
    font-size: clamp(2.75rem, 1.3rem + 4.1vw, 4.5rem); line-height: 1; letter-spacing: -0.015em; text-wrap: balance;
}
.seitenkopf__titel em { font-style: italic; color: var(--lime); }
.seitenkopf__lead { margin: 1.5rem 0 1.9rem; max-width: 32em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: rgba(255, 255, 255, 0.74); text-wrap: pretty; }
.seitenkopf .textlink { color: #fff; }
.seitenkopf__unterzeile { margin-top: 1.1rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }

/* /webseiten: Vorher/Nachher im Rahmen, darunter die Messwerte des Falls */
.kopfvergleich { max-width: none; }
.kopfvergleich .vergleich__hinweis { color: rgba(255, 255, 255, 0.62); }
/* Preis als erste Tatsache, Ziffern in gleicher Breite (Analyse 16.10.2026) */
.seitenkopf .hero__fakten b { font-variant-numeric: tabular-nums; }
.kopfvergleich__werte { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); }
.kopfvergleich__werte b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.kopfvergleich__werte em { font-style: normal; font-weight: 600; color: var(--lime); font-variant-numeric: tabular-nums; }

/* /webseiten-check: das Prüfblatt mit den Werten des Beispiel-Reports (16.10.2026). Ein Blatt mit zweitem Blatt darunter,
   Kopfzeile wie im Report, Gesamt-Score als Ring mit Messpunkt, je Kategorie der Wert in der Serif und eine Messlatte mit
   den Bändern des Prüfkatalogs (40, 60, 85), darunter die Skala */
.messblatt {
    position: relative; overflow: hidden; justify-self: end; width: 100%; max-width: 500px; margin-left: auto;
    background: #fff; color: var(--text); border-radius: 4px; padding: 1.6rem 2rem 1.35rem;
    box-shadow: 10px 10px 0 -1px #D9E0EA, 0 60px 100px -50px rgba(0, 0, 0, 0.75), 0 20px 40px -24px rgba(0, 0, 0, 0.55);
}
.messblatt__kopf, .wahlblatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--navy); font-size: 0.75rem; color: var(--leise); }
.messblatt__marke, .wahlblatt__marke { display: inline-flex; align-items: center; gap: 0.55rem; }
.messblatt__marke svg, .wahlblatt__marke svg { flex: none; width: 20px; height: 20px; }
.messblatt__marke b, .wahlblatt__marke b { font-size: 0.8125rem; font-weight: 600; color: var(--navy); }
.messblatt__gesamt { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 1.3rem; align-items: center; padding: 1.2rem 0 1.15rem; border-bottom: 1px solid var(--linie); }
.messblatt__ring-feld { position: relative; width: 88px; height: 88px; }
.messblatt__ring { display: block; width: 100%; height: 100%; }
.messblatt__spur { fill: none; stroke: #E6EAF0; stroke-width: 5; }
.messblatt__bogen { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--wert) 100; transform: rotate(-90deg); transform-origin: 50px 50px; }
.messblatt__dreh { transform: rotate(calc(var(--wert) * 3.6deg)); transform-origin: 50px 50px; }
.messblatt__punkt { fill: #fff; stroke: #6E8F17; stroke-width: 2.25; }
.messblatt__score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.messblatt__score b { font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.messblatt__score span { margin-top: 0.1rem; font-size: 0.6875rem; color: var(--leise); }
.messblatt__band b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--navy); }
.messblatt__band span { display: block; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.45; color: var(--neben); }
.messblatt__werte li { padding: 0.7rem 0 0.75rem; border-bottom: 1px solid var(--linie); }
.messblatt__werte li:last-child { border-bottom: 0; }
.messblatt__zeile { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: baseline; font-size: 0.875rem; line-height: 1.35; color: var(--text); }
.messblatt__nr { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--leise); font-variant-numeric: tabular-nums; }
.messblatt__zahl { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.messblatt__zahl small { margin-left: 0.15rem; font-family: var(--font-text); font-size: 0.6875rem; color: var(--leise); }
/* Messlatte: Spur mit den drei Bandgrenzen, der Wert in Navy, am Ende ein Messpunkt */
.messblatt__balken { position: relative; display: block; height: 9px; margin: 0.5rem 0 0 2.2rem;
    background: linear-gradient(#C9D1DC, #C9D1DC) 40% 50% / 1px 9px no-repeat, linear-gradient(#C9D1DC, #C9D1DC) 60% 50% / 1px 9px no-repeat,
        linear-gradient(#C9D1DC, #C9D1DC) 85% 50% / 1px 9px no-repeat, linear-gradient(#E6EAF0, #E6EAF0) 0 50% / 100% 2px no-repeat; }
.messblatt__balken::after { content: ''; position: absolute; left: 0; top: 50%; width: calc(var(--wert) * 1%); height: 2px; margin-top: -1px; background: var(--navy); transform-origin: left center; }
.messblatt__balken::before { content: ''; position: absolute; z-index: 1; left: calc(var(--wert) * 1%); top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.75px var(--navy); }
.messblatt__skala { position: relative; height: 2.35rem; margin: 0.15rem 0 0 2.2rem; border-top: 1px solid var(--navy); font-size: 0.6875rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.messblatt__skala span { position: absolute; top: 0.35rem; left: calc(var(--x) * 1%); transform: translateX(-50%); }
.messblatt__skala span:first-child { transform: none; }
.messblatt__skala span:nth-child(5) { transform: translateX(-100%); }
.messblatt__skala span::before { content: ''; position: absolute; top: calc(-0.35rem - 4px); left: 50%; width: 1px; height: 6px; background: var(--navy); }
.messblatt__skala span:first-child::before { left: 0; }
.messblatt__skala span:nth-child(5)::before { left: auto; right: 0; }
.messblatt__skala i { position: absolute; top: 1.35rem; left: calc(var(--x) * 1%); transform: translateX(-50%); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--leise); white-space: nowrap; }   /* 4,7 : 1 */
.messblatt figcaption, .wahlblatt figcaption { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.7rem; padding-top: 0.85rem; border-top: 1px solid var(--linie); font-size: 0.75rem; line-height: 1.5; color: var(--leise); }
.messblatt figcaption::before, .wahlblatt figcaption::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.25); transform: translateY(-0.05em); }

/* /vorschau: das Wahlblatt aus der Muster-Vorschau (16.10.2026), Geschwister des Prüfblatts. Kopfzeile wie dort, die drei Richtungen
   als ruhige Zeilen (Kopf des Entwurfs, Name, ein Satz), die Empfehlung mit einem schlichten Lime-Rahmen. Zuerst mit Farbtupfern,
   Schriftnamen und Griffen gebaut, das war «zu voll und unruhig» (Entscheid 16.10.2026) */
.wahlblatt {
    position: relative; overflow: hidden; justify-self: end; width: 100%; max-width: 520px; margin-left: auto;
    background: #fff; color: var(--text); border-radius: 4px; padding: 1.6rem 1.9rem 1.35rem;
    box-shadow: 10px 10px 0 -1px #D9E0EA, 0 60px 100px -50px rgba(0, 0, 0, 0.75), 0 20px 40px -24px rgba(0, 0, 0, 0.55);
}
.wahlblatt__titel { padding: 1.1rem 0 0.5rem; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--navy); }
/* Drei Zeilen wie die Kategorien im Prüfblatt: links der Kopf des Entwurfs, rechts Buchstabe, Name und ein Satz zur Wirkung */
.wahlblatt__richtung { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); column-gap: 1.25rem; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid var(--linie); }
.wahlblatt__richtung:last-child { border-bottom: 0; }
.wahlblatt__bild { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 3px; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); }
.wahlblatt__bild img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; object-position: top center; }
/* Die Empfehlung: ein schlichter Lime-Rahmen wie eine Auswahl, mit feiner dunkler Kante, damit er auf Weiss trägt */
.wahlblatt__richtung--gewaehlt .wahlblatt__bild::after { content: ''; position: absolute; inset: -4px; border-radius: 6px; box-shadow: 0 0 0 2px var(--lime), 0 0 0 3px rgba(10, 31, 61, 0.28); pointer-events: none; }
.wahlblatt__text { min-width: 0; }
.wahlblatt__name { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.wahlblatt__buchstabe { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.wahlblatt__wirkung { display: block; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.45; color: var(--neben); }
.wahlblatt__empfehlung { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; font-size: 0.75rem; font-weight: 600; color: var(--lime-text); }
.wahlblatt__empfehlung::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.25); }

/* /angebote: die echten Ergebnisse der Einstiegsprodukte, gefächert */
.blaetter { position: relative; width: 100%; max-width: 540px; margin-left: auto; aspect-ratio: 1 / 0.98; }
.blaetter img { position: absolute; height: auto; border-radius: 3px; }
.blaetter .blatt-deck { width: 44%; left: 4%; top: 2%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 70px -40px rgba(0, 0, 0, 0.8); }
.blaetter .blatt-massnahmen { width: 44%; left: 30%; top: 9%; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 16px 30px -20px rgba(0, 0, 0, 0.6); }
.blaetter .blatt-vorschau { width: 68%; left: 30%; top: 56%; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 16px 30px -20px rgba(0, 0, 0, 0.6); }
.blaetter__marke { position: absolute; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.8rem 0.5rem; border-radius: 6px; background: rgba(6, 18, 37, 0.95); border: 1px solid rgba(196, 240, 82, 0.5); font-size: 0.75rem; line-height: 1.3; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.blaetter__marke b { font-size: 0.8125rem; font-weight: 600; color: #fff; }
.blaetter__marke--check { left: 0; top: 52%; }
.blaetter__marke--vorschau { right: 0; top: 46%; }
.kopfblaetter figcaption { max-width: 540px; margin-left: auto; }

@media (max-width: 1024px) {
    .seitenkopf { min-height: 0; }
    .seitenkopf__raster { display: block; }
    .seitenkopf__objekt { margin-top: 3.5rem; max-width: 640px; }
    .messblatt, .wahlblatt, .blaetter, .kopfblaetter figcaption { margin-left: 0; }
}
@media (max-width: 640px) {
    .seitenkopf { padding: calc(72px + 2.25rem) 0 3.5rem; }
    .seitenkopf__objekt { margin-top: 2.75rem; }
    .messblatt { padding: 1.35rem 1.15rem 1.1rem; box-shadow: 7px 7px 0 -1px #D9E0EA, 0 40px 70px -40px rgba(0, 0, 0, 0.7); }
    .messblatt__gesamt { grid-template-columns: 76px minmax(0, 1fr); column-gap: 1rem; }
    .messblatt__ring-feld { width: 76px; height: 76px; }
    .messblatt__score b { font-size: 1.95rem; }
    .wahlblatt { padding: 1.35rem 1.15rem 1.1rem; box-shadow: 7px 7px 0 -1px #D9E0EA, 0 40px 70px -40px rgba(0, 0, 0, 0.7); }
    .wahlblatt__titel { font-size: 1.35rem; }
    .wahlblatt__richtung { column-gap: 0.9rem; padding: 0.8rem 0; }
    .wahlblatt__name { gap: 0.4rem; font-size: 0.875rem; }
    .wahlblatt__buchstabe { font-size: 1.4rem; }
    .wahlblatt__wirkung { font-size: 0.75rem; }
    .blaetter__marke { font-size: 0.75rem; padding: 0.45rem 0.6rem 0.4rem; }
    .blaetter__marke b { font-size: 0.8125rem; }
}

/* ==========================================================================
   Gegenüberstellung (/webseiten): Visitenkarte und verkaufende Webseite, Zeile für Zeile
   ========================================================================== */
.gegenueber__kopf, .gegenueber__zeile { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.6fr) minmax(0, 5fr); }
.gegenueber__kopf { align-items: end; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--neben); }
.gegenueber__kopf span { padding: 0 2rem 1rem; }
.gegenueber__kopf span:first-child { padding-left: 0; }
.gegenueber__kopf .g-neu { padding-top: 1.6rem; background: var(--navy); border-radius: 14px 14px 0 0; color: #fff; }
.gegenueber__thema, .gegenueber__heute { border-top: 1px solid var(--linie-stark); }
.gegenueber__thema { padding: 1.85rem 1.5rem 2rem 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.65rem, 1.25rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); }
.gegenueber__heute, .gegenueber__neu { padding: 2rem 2rem 2.1rem; }
.gegenueber__neu { background: var(--navy); }
.gegenueber__zeile + .gegenueber__zeile .gegenueber__neu { border-top: 1px solid var(--linie-hell); }
.gegenueber__zeile:last-child .gegenueber__neu { border-radius: 0 0 14px 14px; padding-bottom: 2.4rem; }
/* Der heutige Satz gestrichen wie bei einer Korrektur, der neue gross in Weiss */
.gegenueber__satz { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 1.15rem + 0.8vw, 1.95rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.gegenueber__heute .gegenueber__satz { color: var(--leise); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(10, 31, 61, 0.4); }
.gegenueber__neu .gegenueber__satz { color: #fff; }
.gegenueber__text { margin-top: 0.8rem; max-width: 34em; font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.gegenueber__neu .gegenueber__text { color: rgba(255, 255, 255, 0.72); }
.gegenueber__marke { display: none; }
.g-neu-punkt { display: inline-block; width: 7px; height: 7px; margin-right: 0.5rem; border-radius: 50%; background: var(--lime); vertical-align: 0.05em; }
@media (max-width: 760px) {
    .gegenueber__kopf { display: none; }
    .gegenueber__zeile { display: block; padding: 1.75rem 0 0.4rem; border-top: 1px solid var(--linie-stark); }
    .gegenueber__thema, .gegenueber__heute { border-top: 0; }
    .gegenueber__thema { padding: 0 0 1rem; font-size: 1.75rem; }
    .gegenueber__heute { padding: 0 0 1.25rem; }
    .gegenueber__neu, .gegenueber__zeile + .gegenueber__zeile .gegenueber__neu, .gegenueber__zeile:last-child .gegenueber__neu { padding: 1.3rem 1.25rem 1.45rem; border-top: 0; border-radius: 12px; }
    .gegenueber__marke { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--leise); }
    .gegenueber__neu .gegenueber__marke { color: var(--lime); }
    .gegenueber__satz { font-size: 1.5rem; }
}

/* ==========================================================================
   Pakete (/webseiten): drei Karten, Zeilen über alle Karten bündig (subgrid). Business als Navy-Spalte
   ========================================================================== */
/* Pakete (15.10.2026, Design-Plan §21): Karten nach der alten Seite, etwas hochwertiger. Name, Preis in der Serif,
   kursive Zeile mit Lime-Kante, Liste mit Lime-Punkten, Knopf über die ganze Breite. Business mit Navy-Rand und hängender
   Plakette statt Navy-Fläche; ohne den Lime-Verlauf der alten Karten. */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 20px; }
.paket { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 2.6rem 2.1rem 2.1rem; background: var(--platte); border: 1px solid var(--linie); border-radius: 14px; transition: border-color 0.3s var(--ease); }
.paket:hover { border-color: var(--linie-stark); }
.paket__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.paket__name { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--navy); }
.paket__preis { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; margin-top: 0.75rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 2rem + 1vw, 2.85rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.paket__preis small { font-family: var(--font-text); font-size: 0.8125rem; letter-spacing: 0; color: var(--neben); }
.paket__satz { align-self: start; margin-top: 1.35rem; 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); }
.paket__inhalt { margin-top: 1.5rem; }
.paket__liste li { position: relative; padding: 0.42rem 0 0.42rem 1.2rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.paket__liste li::before { content: ''; position: absolute; left: 0; top: 0.92rem; width: 6px; height: 6px; border: 1px solid rgba(10, 31, 61, 0.16); border-radius: 50%; background: var(--lime); }
.paket__liste b { font-weight: 600; color: var(--navy); }
.paket__weg { align-self: end; margin-top: 2rem; }
.paket__weg .knopf { width: 100%; }
.knopf--zart { background: #EDF1F6; color: var(--navy); box-shadow: none; }
.knopf--zart:hover { background: #E1E7EF; }
/* Navy-Rand und Plakette tragen die Empfehlung, ohne Schatten (Analyse 16.10.2026) */
.paket--haupt { border: 1.5px solid var(--navy); }
.paket__plakette { position: absolute; top: -1px; left: 2.1rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.8rem 0.48rem; border-radius: 0 0 8px 8px; background: var(--navy); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; }
.paket__plakette::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.pakete__fuss { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 1.6rem; font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.pakete__fuss::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.25); transform: translateY(-0.1em); }

/* Konditionsblatt (Runde 1b, 16.10.2026): ein Blatt, Kennwert gross, Erklärung darunter */
.konditionsblatt { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: clamp(1.5rem, 0.9rem + 2vw, 2.6rem) clamp(1.35rem, 0.7rem + 2.2vw, 2.75rem) clamp(1.3rem, 0.8rem + 1.5vw, 2.1rem); background: var(--platte); border: 1px solid var(--linie); border-radius: 14px; }
.konditionsblatt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; padding-bottom: 1.15rem; border-bottom: 1.5px solid var(--navy); }
.konditionsblatt__titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.15rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.konditionsblatt__stand { font-size: 0.8125rem; color: var(--leise); }
.konditionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.konditionen > div { padding: 1.6rem 1.75rem 1.75rem; border-bottom: 1px solid var(--linie); }
.konditionen > div:nth-child(3n + 1) { padding-left: 0; }
.konditionen > div:nth-child(3n) { padding-right: 0; }
.konditionen > div:nth-child(3n + 2), .konditionen > div:nth-child(3n) { border-left: 1px solid var(--linie); }
.konditionen > div:nth-last-child(-n + 3) { border-bottom: 0; }
.konditionen dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--neben); }
.konditionen__wert { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.45rem + 0.9vw, 2.35rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.konditionen dd:not(.konditionen__wert) { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.konditionen dd b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.konditionsblatt__fuss { padding-top: 1.3rem; border-top: 1px solid var(--linie); font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.konditionsblatt__fuss b { margin-right: 0.5rem; font-weight: 600; color: var(--navy); }
.konditionsblatt a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--navy) 40%, transparent); }

@media (max-width: 1100px) {
    .pakete { column-gap: 14px; }
    .paket { padding: 2.4rem 1.5rem 1.7rem; }
    .paket__plakette { left: 1.5rem; }
}
@media (max-width: 900px) {
    .pakete { display: flex; flex-direction: column; gap: 16px; }
    .paket { display: flex; flex-direction: column; }
    .paket__preis, .paket__weg { align-self: auto; }
    .konditionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .konditionen > div, .konditionen > div:nth-child(n) { padding: 1.4rem 1.4rem 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--linie); }
    .konditionen > div:nth-child(2n) { padding: 1.4rem 0 1.5rem 1.4rem; border-left: 1px solid var(--linie); }
    .konditionen > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 640px) {
    .konditionen { display: block; }
    .konditionen > div, .konditionen > div:nth-child(n), .konditionen > div:nth-child(2n) { padding: 1.25rem 0 1.3rem; border-left: 0; border-bottom: 1px solid var(--linie); }
    .konditionen > div:last-child { border-bottom: 0; }
}
@media (max-width: 355px) {
    /* Paketknöpfe bleiben bis 312 px einzeilig (Handy-Analyse 20.10.2026); die Plakette folgt dem Polster */
    .paket { padding-inline: 1rem; }
    .paket__plakette { left: 1rem; }
}

/* Nach Mass: dunkles Kapitel vor den Projekten (Runde 1b, 16.10.2026) */
.nachmass { position: relative; padding: clamp(5rem, 3.5rem + 6vw, 8.5rem) 0 clamp(4.5rem, 3.2rem + 5vw, 7.5rem); }
.nachmass > .wrap { position: relative; z-index: 1; }
.nachmass__titel { max-width: 12em; font-size: clamp(2.7rem, 1.5rem + 4.2vw, 5.4rem); line-height: 0.98; text-wrap: balance; }
.nachmass__band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); padding-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); border-top: 2px solid var(--lime); }
.nachmass__band .lead { grid-column: 1 / span 6; }
.nachmass__liste { grid-column: 8 / -1; }
.nachmass__liste li { padding: 0.85rem 0 0.95rem; border-bottom: 1px solid var(--linie-hell); font-family: var(--font-display); font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.7rem); line-height: 1.2; color: #fff; }
.nachmass__liste li:first-child { padding-top: 0.15rem; }
.nachmass__weg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); }
.nachmass__weg span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); }
.nachmass + .projekte-kompakt { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (max-width: 900px) {
    .nachmass__band { display: block; }
    .nachmass__liste { margin-top: 1.75rem; }
}
@media (max-width: 640px) {
    .nachmass__weg .knopf { width: 100%; }
}

/* ==========================================================================
   Betreuung (Runde 1b, 16.10.2026): drei Karten wie die Pakete, Zeilen bündig (subgrid), Plus empfohlen
   ========================================================================== */
.tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 20px; }
.tarif { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 2.5rem 2rem 2rem; background: var(--platte); border: 1px solid var(--linie); border-radius: 14px; }
.tarif--haupt { border: 1.5px solid var(--navy); }
.tarif__plakette { position: absolute; top: -1px; left: 2rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.8rem 0.48rem; border-radius: 0 0 8px 8px; background: var(--navy); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; }
.tarif__plakette::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.tarif__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tarif__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.55rem + 0.8vw, 2.3rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.tarif__satz { margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.55; color: var(--neben); }
.tarif__preis { align-self: end; display: flex; align-items: baseline; gap: 0.45rem; margin-top: 1.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 1.95rem + 0.9vw, 2.8rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.tarif__preis small { font-family: var(--font-text); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--neben); }
.tarif__notiz { margin-top: 0.55rem; font-size: 0.8125rem; line-height: 1.5; color: var(--leise); }
/* Der Preisanker: Plus kostet weniger als eine Stunde nach Aufwand (CHF 100, Entscheid K22) */
.tarif__anker { display: block; margin-top: 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--lime-text); }
.tarif__liste { margin-top: 1.4rem; border-top: 1px solid var(--linie); }
.tarif__liste li { position: relative; padding: 0.6rem 0 0.6rem 1.2rem; border-bottom: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.tarif__liste li::before { content: ''; position: absolute; left: 0; top: 1.08rem; width: 6px; height: 6px; border: 1px solid rgba(10, 31, 61, 0.16); border-radius: 50%; background: var(--lime); }
.tarif__liste li.tarif__basis { padding-left: 0; font-weight: 600; color: var(--navy); }
.tarif__liste li.tarif__basis::before { display: none; }
/* WhatsApp als Merkmal bei Premium, ohne Link (Entscheid 16.10.2026): Pille in Navy, das Zeichen in seinem Grün, damit man es sofort erkennt */
.marke--whatsapp { gap: 0.45rem; padding: 0.42rem 0.85rem 0.42rem 0.6rem; border-radius: 999px; background: var(--navy); font-size: 0.75rem; color: #fff; }
.marke--whatsapp::before { display: none; }
.marke--whatsapp svg { width: 16px; height: 16px; fill: #25D366; }
@media (max-width: 900px) {
    .tarife { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        margin-inline: calc(-1 * var(--rand)); padding: 1px var(--rand) 1rem; scroll-padding-inline: var(--rand); scrollbar-width: none; }
    .tarife::-webkit-scrollbar { display: none; }
    .tarif { flex: 0 0 min(84%, 340px); display: flex; flex-direction: column; scroll-snap-align: start; padding: 2.3rem 1.4rem 1.5rem; }
    .tarif__plakette { left: 1.4rem; }
    .tarif__preis { align-self: auto; }
    .tarife + .wischhinweis { display: block; }
}

/* ==========================================================================
   Fahrplan (/webseiten, Runde 1b, 16.10.2026): fünf Schritte mit echtem Bildschirm, darunter die Messlinie
   mit den Stationen, die letzte in Lime. Seit 16.10.2026 auf allen vier Verkaufsseiten
   ========================================================================== */
.fahrplan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; }
.fahrt { position: relative; min-width: 0; }
.fahrt__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--navy); isolation: isolate; }
/* Geräte ragen von unten ins Bild: Handy für das, was du tust, Browser für deine Seite */
.handy { position: absolute; left: 50%; top: 10%; width: 74%; transform: translateX(-50%); padding: 4px 4px 0; border-radius: 24px 24px 0 0; background: var(--linie); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65); }
.handy img { display: block; width: 100%; height: auto; border-radius: 20px 20px 0 0; }
.fenster { position: absolute; left: 50%; top: 14%; width: 160%; transform: translateX(-50%); background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65); }
.fenster__leiste { display: flex; align-items: center; justify-content: center; height: 22px; background: #E3E8EF; }
.fenster__adresse { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 4px; background: #fff; font-size: 9px; font-weight: 500; line-height: 1.2; color: var(--neben); white-space: nowrap; }
.fenster__adresse svg { width: 8px; height: 8px; }
.fenster__adresse--live::after { content: ''; width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.3); }
.fenster__seite { position: relative; display: block; }
.fenster__seite img { display: block; width: 100%; height: auto; }
/* Entwurf: der Titel ausgewählt wie in einem Gestaltungswerkzeug */
.auswahl { position: absolute; left: 28.6%; top: 17.4%; width: 42.8%; height: 6.4%; border: 1px solid var(--lime); }
.auswahl b { position: absolute; left: -1px; bottom: 100%; margin-bottom: 3px; padding: 1px 5px; border-radius: 2px; background: var(--navy); font-size: 8px; font-weight: 600; line-height: 1.3; color: var(--lime); }
.auswahl i { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid var(--lime); }
.auswahl i:nth-of-type(1) { left: -3px; top: -3px; } .auswahl i:nth-of-type(2) { right: -3px; top: -3px; }
.auswahl i:nth-of-type(3) { left: -3px; bottom: -3px; } .auswahl i:nth-of-type(4) { right: -3px; bottom: -3px; }
/* Durchsicht: Anmerkungen mit Nummer */
.anmerkung { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.5rem 0.22rem 0.22rem; border-radius: 7px; background: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45); font-size: 9px; font-weight: 600; line-height: 1.25; color: var(--navy); white-space: nowrap; }
.anmerkung b { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--navy); font-size: 8px; color: #fff; }
.fahrt__nr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.65rem; margin-top: 1.75rem; padding-top: 1.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--neben); font-variant-numeric: tabular-nums; }
.fahrt__nr b { font-weight: 600; letter-spacing: 0.02em; color: var(--navy); }
.fahrt__nr::before { content: ''; position: absolute; top: -5px; left: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--navy); }
.fahrt__nr::after { content: ''; position: absolute; top: 0; left: 0; right: -28px; height: 1px; background: var(--navy); }
.fahrt:last-child .fahrt__nr::before { background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.3); }
.fahrt:last-child .fahrt__nr::after { right: 0; background: linear-gradient(90deg, var(--navy), rgba(10, 31, 61, 0)); }
.fahrt__name { margin-top: 0.85rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.55vw, 1.85rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
.fahrt__text { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.fahrplan__wisch { display: none; }
@media (max-width: 1000px) {
    .fahrplan { display: flex; gap: 20px; 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; }
    .fahrplan::-webkit-scrollbar { display: none; }
    .fahrt { flex: 0 0 min(74%, 300px); scroll-snap-align: start; }
    .fahrt__nr::after { right: -20px; }
    .fahrplan__wisch { display: block; margin-top: 0.5rem; }
}

/* ==========================================================================
   Protokoll (/webseiten-check): was geprüft wird, Kategorie und Frage auf einer Zeile
   ========================================================================== */
.protokoll { border-top: 1px solid var(--linie-stark); }
.protokoll li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: baseline; padding: 1.55rem 0; border-bottom: 1px solid var(--linie); }
.protokoll h3 { grid-column: 1 / span 5; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); }
.protokoll p { grid-column: 6 / -1; max-width: 36em; font-size: 1.0625rem; line-height: 1.6; color: var(--neben); }
@media (max-width: 760px) {
    .protokoll li { display: block; padding: 1.3rem 0; }
    .protokoll p { margin-top: 0.45rem; font-size: 1rem; }
}

/* Beispiel-Report (/webseiten-check): zwei echte Seiten, gross */
.beispiel__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.beispiel__text { grid-column: 1 / span 5; }
.beispiel__text .lead { margin-top: 1.5rem; }
.beispiel__text .textlink { margin-top: 1.75rem; color: var(--navy); }
.beispiel__blaetter { grid-column: 7 / -1; position: relative; display: block; aspect-ratio: 1 / 0.86; border-radius: 6px; }
.beispiel__blaetter img { position: absolute; width: 50%; height: auto; border-radius: 3px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.beispiel__blaetter img:first-of-type { left: 2%; top: 0; box-shadow: 0 40px 70px -40px rgba(10, 31, 61, 0.55), 0 10px 22px -14px rgba(10, 31, 61, 0.3); }
.beispiel__blaetter img:last-of-type { left: 46%; top: 9%; box-shadow: 0 50px 90px -40px rgba(10, 31, 61, 0.55), 0 12px 26px -14px rgba(10, 31, 61, 0.3); }
@media (max-width: 900px) {
    .beispiel__raster { display: block; }
    .beispiel__blaetter { margin-top: 3rem; max-width: 560px; }
}

/* ==========================================================================
   Entscheidung (Navy): Kaufbeleg als weisse Platte, daneben die Begründung
   ========================================================================== */
.kauf { padding: var(--abschnitt) 0; }
/* Der Bundle-Kasten steht links unter dem Text (Entscheid 16.10.2026), im Markup aber nach dem Kaufbeleg, damit er am Handy
   danach kommt. Die rechte Spalte läuft über beide Zeilen; die zweite Zeile ist flexibel, so bleibt der Kasten direkt unter dem Text */
.kauf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
.kauf__text { grid-column: 1 / span 5; grid-row: 1; }
.kauf__text .lead { margin-top: 1.5rem; }
.kauf__hinweis { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie-hell); font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.66); max-width: 32em; }
.kauf__belege { margin-top: 1.2rem; font-size: 0.9375rem; line-height: 1.7; color: rgba(255, 255, 255, 0.66); max-width: 32em; }
.kauf__belege a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.kauf__belege a:hover { text-decoration-color: #fff; }
.kauf__rechts { grid-column: 7 / -1; grid-row: 1 / span 2; }
.kauf__raster > .zusatz { grid-column: 1 / span 5; grid-row: 2; align-self: end; }   /* schliesst unten mit dem Kaufbeleg ab */
.kaufbeleg { background: #fff; color: var(--text); border-radius: 12px; padding: 2.1rem 2.1rem 1.7rem; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.75), 0 20px 40px -24px rgba(0, 0, 0, 0.5); }
.kaufbeleg__kopf { padding-bottom: 1.1rem; border-bottom: 2px solid var(--navy); }
.kaufbeleg__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.5rem + 0.8vw, 2.2rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); }
.kaufbeleg__satz { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.5; color: var(--neben); }
.kaufbeleg__preis { margin-top: 1.4rem; font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; }
.kaufbeleg__preis small { margin-right: 0.4rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--neben); }
.kaufbeleg__notiz { margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: var(--leise); }
.kaufbeleg__liste { margin-top: 1.4rem; border-top: 1px solid var(--linie); }
.kaufbeleg__liste li { position: relative; padding: 0.62rem 0 0.62rem 1.6rem; border-bottom: 1px solid var(--linie); font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.kaufbeleg__liste li::before { content: ''; position: absolute; left: 0.25rem; top: 1.02rem; width: 5px; height: 10px; border: solid var(--navy); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.kaufbeleg__liste li b { font-weight: 600; }
.kaufbeleg .knopf { width: 100%; margin-top: 1.75rem; }
.kaufbeleg__sicher { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; margin-top: 1rem; font-size: 0.8125rem; color: var(--neben); }
.kaufbeleg__sicher span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 1.1rem 0.2em -0.55rem; border-radius: 50%; background: var(--linie-stark); vertical-align: middle; }
.guthaben { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1.4rem; padding: 0.85rem 1rem; border-radius: 8px; background: #F2F9DC; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.guthaben[hidden] { display: none; }
.guthaben svg { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; color: var(--lime-text); }
/* Bundle als ruhiger Textblock mit Haarlinie wie der Hinweis darüber, ohne eigenen Kasten (Entscheid 16.10.2026: als Kasten links
   «nicht mehr harmonisch», zweite Karte neben dem Kaufbeleg, Raster schien durch) */
.zusatz { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-hell); }
.zusatz[hidden], .knopf[hidden] { display: none; }
.zusatz h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.zusatz p { margin-top: 0.6rem; max-width: 32em; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.zusatz p b { font-weight: 600; color: #fff; }
.zusatz .knopf { margin-top: 1.2rem; }
@media (max-width: 900px) {
    .kauf__raster { display: block; }
    .kauf__rechts { margin-top: 3rem; max-width: 560px; }
    .kauf__raster > .zusatz { margin-top: 2.5rem; max-width: 560px; }
}
@media (max-width: 640px) {
    .kaufbeleg { padding: 1.6rem 1.25rem 1.4rem; }
    .zusatz .knopf { width: 100%; }
}

/* ==========================================================================
   Weg mit «Du bist hier» (Einstiegsseiten): die Leiter der Startseite, die Station dieser Seite in Lime
   ========================================================================== */
.stufe__hier { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--lime-text); }
.stufe__hier::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.25); }
.stufen--weg .stufe--haupt::before { background: var(--navy); box-shadow: none; }
.stufen--weg .stufe--hier::before { background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.35); }
.stufe--haupt .stufe__hier { color: var(--lime); }

/* ==========================================================================
   /angebote (16.10.2026): Karten wie die Pakete mit dem echten Ergebnis oben, das Rechenbeispiel als Beleg auf Navy,
   im Fahrplan Papier für das, was du bekommst. Ersetzt die drei Ergebnis-Sätze und die Preisskala
   ========================================================================== */
/* Karten mit Bild: eine Zeile mehr im Subgrid, das Bild oben auf Papier wie bei den Einstiegsprodukten der Startseite */
.pakete--bild { grid-template-rows: repeat(6, auto); }
.pakete--bild .paket { grid-row: span 6; padding-top: 2.4rem; }
.paket__bild { position: relative; aspect-ratio: 16 / 10; margin-bottom: 1.6rem; overflow: hidden; border-radius: 10px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.paket__bild .blatt { position: absolute; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 22px 34px -20px rgba(0, 0, 0, 0.45); }
.paket__bild--check .blatt--hinten { width: 36%; left: 15%; top: 11%; }
.paket__bild--check .blatt--vorn { width: 36%; left: 46%; top: 19%; }
.paket__bild .blatt--quer { width: 80%; left: 10%; top: 50%; transform: translateY(-50%); }
.paket__bild--bundle .blatt--hinten { width: 32%; left: 10%; top: 9%; }
.paket__bild--bundle .blatt--quer { width: 64%; left: 28%; top: 60%; }

/* Rechenbeispiel als Beleg (Navy-Kapitel): Posten mit Betrag rechtsbündig in gleicher Ziffernbreite, die Summe gross mit Lime-Strich */
.anrechnung { padding: var(--abschnitt) 0; }
.anrechnung__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.anrechnung__text { grid-column: 1 / span 5; }
.anrechnung__text .lead { margin-top: 1.5rem; }
.anrechnung__beleg { grid-column: 7 / -1; }
.restpreise { margin-top: 2.4rem; }
.restpreise__titel { padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie-hell); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.62); }
.restpreise dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 0 0.85rem; border-bottom: 1px solid var(--linie-hell); }
.restpreise dt { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem); line-height: 1.1; color: #fff; }
.restpreise dd { font-size: 1.0625rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.restpreise dd small { margin-left: 0.6rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.anrechnung__weg { margin-top: 2.25rem; }
.beleg { background: #fff; color: var(--text); border-radius: 12px; padding: 2.1rem 2.2rem 1.6rem; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.75), 0 20px 40px -24px rgba(0, 0, 0, 0.5); }
.beleg__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--navy); }
.beleg__titel { font-family: var(--font-display); font-size: clamp(1.75rem, 1.45rem + 0.8vw, 2.15rem); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.beleg__fall { font-size: 0.8125rem; font-weight: 500; color: var(--neben); }
.beleg__posten li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; column-gap: 0.8rem; align-items: baseline; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--linie); }
.beleg__posten li:last-child { border-bottom: 0; }
.beleg__nr { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--leise); font-variant-numeric: tabular-nums; }
.beleg__name { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.beleg__name small, .beleg__summe > span:first-child small { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--neben); }
.beleg__betrag { font-size: 1.0625rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.beleg__betrag small { margin-right: 0.15rem; font-size: 0.75rem; font-weight: 500; color: var(--leise); }
.beleg__summe { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.2rem 0 0.3rem; border-top: 2px solid var(--navy); }
.beleg__summe > span:first-child { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.beleg__summe .beleg__betrag { position: relative; padding-bottom: 0.45rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 1.9rem + 1vw, 2.85rem); line-height: 1; letter-spacing: -0.01em; }
.beleg__summe .beleg__betrag::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.12); }
.beleg__fuss { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.8125rem; line-height: 1.5; color: var(--neben); }
@media (max-width: 900px) {
    .anrechnung__raster { display: block; }
    .anrechnung__beleg { margin-top: 3rem; max-width: 560px; }
}
@media (max-width: 640px) {
    .beleg { padding: 1.6rem 1.25rem 1.3rem; }
    .beleg__posten li { grid-template-columns: 1.7rem minmax(0, 1fr) auto; column-gap: 0.6rem; }
    .anrechnung__weg .knopf { width: 100%; }
}

/* Fahrplan /angebote: Papier für das, was du bekommst. Der Report als zwei Blätter (die Entscheidungsseite als Blatt ist seit
   16.10.2026 ersetzt durch «Und jetzt?» auf dem Handy) */
.fahrt__bild .blatt { position: absolute; height: auto; border-radius: 3px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65); }
.fahrt__bild--report .blatt--hinten { width: 54%; left: 9%; top: 11%; }
.fahrt__bild--report .blatt--vorn { width: 54%; left: 37%; top: 21%; }
/* /vorschau (16.10.2026): die Skizze der Startseite als ganzes Blatt, schwebend wie der Report auf /angebote; der Entwurf im Fenster
   linksbündig, damit Kopfzeile, Titel und Bild lesbar bleiben (zentriert schnitt das Fenster den Titel ab) */
.fahrt__bild--skizze .blatt { width: 72%; left: 14%; top: 50%; padding: 7px; background: #fff; border-radius: 4px; transform: translateY(-50%); }
.fenster--links { left: 9%; width: 150%; transform: none; }
.fenster--links .fenster__leiste { justify-content: flex-start; padding-left: 10px; }

/* ==========================================================================
   /webseiten-check (16.10.2026): die Gegenüberstellung als Prüfprotokoll, der Fahrplan mit vier Stationen,
   Etiketten am Beispiel-Report
   ========================================================================== */
/* Mitte die Frage, die wir prüfen (nicht gestrichen), rechts ein Befund aus einem echten Report mit seinem Wert */
.gegenueber--pruefung .gegenueber__heute .gegenueber__satz { line-height: 1.2; color: var(--navy); text-decoration: none; }   /* Fragen laufen über drei Zeilen */
.gegenueber__wert { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.75rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.gegenueber__wert b { font-size: 1.0625rem; font-weight: 600; color: var(--lime); }
.fahrplan--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.beispiel__marke--score { left: -2%; top: 60%; }
.beispiel__marke--liste { right: -2%; top: 23%; }

/* ==========================================================================
   /vorschau (16.10.2026): Für wen als drei Lagen ohne Karten, Linien wie im Konditionsblatt, darunter die zwei anderen Wege.
   Die Muster-Vorschau als drei Blätter wie der Beispiel-Report auf /webseiten-check
   ========================================================================== */
.lagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--navy); }
.lagen li { padding: 1.7rem 2rem 1.9rem; }
.lagen li:first-child { padding-left: 0; }
.lagen li:last-child { padding-right: 0; }
.lagen li + li { border-left: 1px solid var(--linie); }
.lagen__fall { display: flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.35rem + 0.6vw, 1.95rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); }
.lagen__fall::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.3); }
.lagen p { margin-top: 0.75rem; max-width: 30em; font-size: 1rem; line-height: 1.6; color: var(--neben); }
.lagen__anders { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding-top: 1.4rem; border-top: 1px solid var(--linie-stark); }
.lagen__anders-titel { grid-column: 1 / span 4; font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.lagen__anders ul { grid-column: 5 / -1; }
.lagen__anders li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; padding-bottom: 1.1rem; }
.lagen__anders li + li { padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.lagen__anders p { max-width: 36em; font-size: 0.9375rem; line-height: 1.6; color: var(--neben); }
.lagen__anders p b { font-weight: 600; color: var(--text); }
.lagen__anders .textlink { flex: none; color: var(--navy); white-space: nowrap; }
@media (max-width: 900px) {
    .lagen { grid-template-columns: 1fr; }
    .lagen li, .lagen li:first-child, .lagen li:last-child { padding: 1.4rem 0 1.5rem; }
    .lagen li + li { border-left: 0; border-top: 1px solid var(--linie); }
    .lagen__anders { display: block; }
    .lagen__anders ul { margin-top: 1rem; }
    .lagen__anders li { flex-direction: column; align-items: flex-start; }
}

/* Muster-Vorschau: Aufbau und Vergleich hinten, Richtung A vorn, zwei Etiketten wie am Beispiel-Report */
.muster__blaetter { grid-column: 6 / -1; position: relative; display: block; aspect-ratio: 1 / 0.8; border-radius: 6px; }
.muster__blaetter img { position: absolute; height: auto; border-radius: 3px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.muster__blaetter img:nth-of-type(1) { width: 60%; left: 0; top: 0; box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 30px 60px -36px rgba(10, 31, 61, 0.5); }
.muster__blaetter img:nth-of-type(2) { width: 60%; left: 40%; top: 7%; box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 40px 70px -40px rgba(10, 31, 61, 0.55); }
.muster__blaetter img:nth-of-type(3) { width: 74%; left: 13%; top: 33%; box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 60px 100px -40px rgba(10, 31, 61, 0.55), 0 14px 30px -14px rgba(10, 31, 61, 0.3); }
.muster__marke--vergleich { right: -1%; top: 3%; }
.muster__marke--richtung { left: 3%; bottom: 9%; }
@media (max-width: 900px) {
    .muster__blaetter { margin-top: 3rem; max-width: 620px; }
}


/* Projekte auf /webseiten: Branche und Anfrage-Weg, dazu ein sichtbarer Link (Analyse 16.10.2026) */
.projektkachel .textlink { margin-top: 0.9rem; color: #fff; }

/* Schluss auf /webseiten: das Typenschild des Pakets auf Navy. Deckend in Navy-hoch (gleicher Ton wie vorher das
   durchscheinende Weiss), damit das Messraster nicht durch die Datenzeilen läuft (15.10.2026) */
/* Drei Paketknöpfe in einer Reihe: engerer Abstand als Knopf plus Textlink */
.schluss__aktion--pakete { gap: 0.75rem; }
.schluss__schild { grid-column: 8 / -1; }
.schluss .typenschild { background: var(--navy-hoch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
@media (max-width: 900px) {
    .schluss__schild { margin-top: 3.5rem; max-width: 520px; }
}

/* ==========================================================================
   Bewegung (gleiches Vokabular wie die Startseite: einmal, nur Transform und Deckkraft, nie bei reduzierter Bewegung)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Auftritt des Seitenkopfs beim Laden */
    /* Die Überschrift gleitet nur, ohne Einblenden: Sie zählt sonst erst nach dem Auftritt als grösstes Element (LCP) */
    html.bewegt .seitenkopf__titel { animation: fx-auf-titel 1s var(--ease) 0.05s backwards; }
    html.bewegt .seitenkopf__lead { animation: fx-auf 1s var(--ease) 0.17s backwards; }
    html.bewegt .seitenkopf .hero__fakten { animation: fx-auf 1s var(--ease) 0.27s backwards; }
    html.bewegt .seitenkopf .hero__aktion, html.bewegt .seitenkopf__unterzeile { animation: fx-auf 1s var(--ease) 0.37s backwards; }
    html.bewegt .seitenkopf__objekt { animation: fx-rahmen 1.3s var(--ease) 0.1s backwards; }

    /* Messblatt: die Linie liest die Werte ab, die Balken wachsen, wenn sie vorbeikommt (Zahlen bleiben voll lesbar) */
    html.bewegt-bereit .messblatt::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lime); opacity: 0; pointer-events: none; }
    html.bewegt-bereit .messblatt.ist-da::after { animation: fx-scan 1.6s cubic-bezier(0.45, 0, 0.3, 1) 0.1s; }
    /* Übergänge erst mit «ist-da» (16.10.2026): Im Kopf kommt «ist-da» gleich nach «bewegt-bereit», sonst wird schon der Weg in den
       Ausgangszustand animiert und Ring und Balken stehen sofort voll da */
    html.bewegt-bereit .messblatt__balken::after { transform: scaleX(0); }
    html.bewegt-bereit .messblatt.ist-da .messblatt__balken::after { transform: scaleX(1); transition: transform 0.9s var(--ease) var(--d, 0s); }
    html.bewegt-bereit .messblatt__balken::before { opacity: 0; transform: scale(0.4); }
    html.bewegt-bereit .messblatt.ist-da .messblatt__balken::before { opacity: 1; transform: none; transition: opacity 0.3s var(--ease) calc(var(--d, 0s) + 0.6s), transform 0.45s var(--ease) calc(var(--d, 0s) + 0.6s); }
    html.bewegt-bereit .messblatt__bogen { stroke-dasharray: 0 100; }
    html.bewegt-bereit .messblatt.ist-da .messblatt__bogen { stroke-dasharray: var(--wert) 100; transition: stroke-dasharray 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.15s; }
    html.bewegt-bereit .messblatt__dreh { transform: rotate(0deg); }
    html.bewegt-bereit .messblatt.ist-da .messblatt__dreh { transform: rotate(calc(var(--wert) * 3.6deg)); transition: transform 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.15s; }

    /* Wahlblatt: die Linie geht über das Blatt, die Entwürfe werden voll, wenn sie vorbeikommt, zuletzt fällt die Wahl auf A
       (effekte.js setzt --d je Zeile und --d-wahl). Übergänge erst mit «ist-da»: Im Kopf kommt «ist-da» gleich nach
       «bewegt-bereit», sonst würde schon der Weg in den Ausgangszustand animiert und die Wahl stünde sofort da */
    html.bewegt-bereit .wahlblatt::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lime); opacity: 0; pointer-events: none; }
    html.bewegt-bereit .wahlblatt.ist-da::after { animation: fx-scan 1.6s cubic-bezier(0.45, 0, 0.3, 1) 0.1s; }
    html.bewegt-bereit .wahlblatt__bild img { opacity: 0.55; }   /* Text daneben bleibt voll lesbar */
    html.bewegt-bereit .wahlblatt.ist-da .wahlblatt__bild img { opacity: 1; transition: opacity 0.5s var(--ease) var(--d, 0s); }
    html.bewegt-bereit .wahlblatt__richtung--gewaehlt .wahlblatt__bild::after, html.bewegt-bereit .wahlblatt__empfehlung { opacity: 0; }
    html.bewegt-bereit .wahlblatt.ist-da .wahlblatt__richtung--gewaehlt .wahlblatt__bild::after, html.bewegt-bereit .wahlblatt.ist-da .wahlblatt__empfehlung { opacity: 1; transition: opacity 0.45s var(--ease) var(--d-wahl, 1.6s); }

    /* Rechenbeispiel: die Linie rechnet Posten für Posten mit, zuletzt setzt die Summe ihren Lime-Strich (effekte.js wie beim Typenschild) */
    html.bewegt-bereit .beleg { position: relative; overflow: hidden; }
    html.bewegt-bereit .beleg::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lime); opacity: 0; pointer-events: none; }
    html.bewegt-bereit .beleg.ist-da::after { animation: fx-scan 1.6s cubic-bezier(0.45, 0, 0.3, 1) 0.1s; }
    html.bewegt-bereit .beleg .beleg__betrag { opacity: 0.65; transition: opacity 0.35s var(--ease); }   /* vor dem Scan noch 5,2 : 1 */
    html.bewegt-bereit .beleg.ist-da .beleg__betrag { opacity: 1; transition-delay: var(--d, 0s); }
    html.bewegt-bereit .beleg__summe .beleg__betrag::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--ease); }
    html.bewegt-bereit .beleg.ist-da .beleg__summe .beleg__betrag::after { transform: scaleX(1); transition-delay: calc(var(--d, 0s) + 0.2s); }

    /* Kleine Rückmeldungen: Blätter heben sich beim Zeigen */
    html.bewegt .paket__bild .blatt { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
    html.bewegt .paket:hover .paket__bild .blatt--hinten { transform: translate(-6px, 2px) rotate(-1.5deg); }
    html.bewegt .paket:hover .paket__bild .blatt--vorn { transform: translate(6px, -8px) rotate(1.2deg); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 30px 44px -22px rgba(0, 0, 0, 0.5); }
    html.bewegt .paket:hover .paket__bild:not(.paket__bild--bundle) .blatt--quer { transform: translateY(calc(-50% - 8px)); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 30px 44px -22px rgba(0, 0, 0, 0.5); }
    html.bewegt .paket:hover .paket__bild--bundle .blatt--quer { transform: translate(6px, calc(-50% - 8px)); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 30px 44px -22px rgba(0, 0, 0, 0.5); }
    html.bewegt .beispiel__blaetter:hover img:last-of-type, html.bewegt .beispiel__blaetter:focus-visible img:last-of-type { transform: translate(6px, -8px); box-shadow: 0 60px 100px -40px rgba(10, 31, 61, 0.6), 0 16px 30px -14px rgba(10, 31, 61, 0.35); }
    html.bewegt .beispiel__blaetter:hover img:first-of-type { transform: translate(-6px, 2px) rotate(-1deg); }
    html.bewegt .muster__blaetter:hover img:nth-of-type(3), html.bewegt .muster__blaetter:focus-visible img:nth-of-type(3) { transform: translate(6px, -8px); box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 70px 110px -40px rgba(10, 31, 61, 0.6), 0 16px 30px -14px rgba(10, 31, 61, 0.35); }
    html.bewegt .muster__blaetter:hover img:nth-of-type(1) { transform: translate(-6px, 2px) rotate(-1deg); }
    html.bewegt .muster__blaetter:hover img:nth-of-type(2) { transform: translate(6px, -2px) rotate(0.8deg); }
}

/* ==========================================================================
   Projekte kompakt (/webseiten): die vier Referenzen der Startseite im Raster, Rahmen wie dort
   ========================================================================== */
.projektraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 2rem + 3vw, 4.5rem) 32px; }
.projektkachel { min-width: 0; }
.projektkachel .projekt__name { margin-top: 1.5rem; font-size: clamp(1.7rem, 1.45rem + 0.7vw, 2.1rem); }
.wischhinweis--hell { color: rgba(255, 255, 255, 0.62); }
@media (max-width: 640px) {
    .projektraster { 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; }
    .projektraster::-webkit-scrollbar { display: none; }
    .projektkachel { flex: 0 0 84%; scroll-snap-align: start; }
    .projektkachel .projekt__name { margin-top: 1.1rem; }
}

/* Kopf am Handy (Analyse 16.10.2026): die drei Fakten nebeneinander, Score und Marken über dem Rahmen, damit Preis und
   Beleg im ersten Bildschirm stehen. Nur im Seitenkopf, die Startseite bleibt unberührt. */
@media (max-width: 640px) {
    .seitenkopf .hero__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 0.75rem 0; }
    .seitenkopf .hero__fakten li, .seitenkopf .hero__fakten li:last-child { flex-direction: column; gap: 0; padding: 0 0.65rem; margin: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
    .seitenkopf .hero__fakten li:first-child { padding-left: 0; border-left: 0; }
    .seitenkopf .hero__fakten span { margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.35; }
    .kopfvergleich { display: flex; flex-direction: column; }
    .kopfvergleich__werte { order: -1; margin: 0 0 0.6rem; }
}
@keyframes fx-auf-titel { from { transform: translateY(18px); } }

/* ==========================================================================
   404 (Premium-Fassung, Wunsch 19.10.2026): Kopf wie die Unterseiten. Links Titel, Weg zur Startseite und vier Wege als Liste,
   rechts der Browserrahmen mit der Adresse, die ins Leere führt, und einer leeren Seite mit Messraster
   ========================================================================== */
.fehlt__wege { display: flex; flex-direction: column; max-width: 34em; margin-top: 2.75rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fehlt__wege a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.fehlt__name { grid-column: 1; font-family: var(--font-display); font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem); line-height: 1.1; }
.fehlt__zusatz { grid-column: 1; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.64); }
.fehlt__wege .pfeil { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
@media (hover: hover) { .fehlt__wege a:hover .pfeil { transform: translateX(4px); color: var(--lime); } }
.fehlt__objekt { display: flex; justify-content: flex-end; }
.fehlt__rahmen { width: min(100%, 560px); }
.fehlt__fenster {
    display: grid; place-content: center; justify-items: center; gap: 0.5rem; aspect-ratio: 16 / 10;
    background-color: #fff; background-image: linear-gradient(#EDF0F4 1px, transparent 1px), linear-gradient(90deg, #EDF0F4 1px, transparent 1px);
    background-size: 28px 28px; background-position: center;
}
.fehlt__code { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 6vw, 8.5rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--navy); }
.fehlt__notiz { font-size: 0.875rem; color: #5B6878; }
@media (max-width: 1024px) { .fehlt__objekt { justify-content: flex-start; } }
@media (max-width: 640px) {
    .fehlt__wege { margin-top: 2.25rem; }
    .fehlt__rahmen { width: 100%; }
    .fehlt__code { font-size: 4.5rem; }
}