/* ==========================================================================
   vivekaweb.net — Formular und Danke-Seiten der Premium-Fassung (14.10.2026)
   /check-start, /danke-check, /danke-vorschau, /danke-paket, /danke-checkliste. Lädt nach basis.css (Schriften, Tokens,
   Knöpfe), ohne premium.css und unterseiten.css: /check-start erreichen auch die Nischenseiten, ohne Premium-CSS im Cache.
   Klassen, an denen Live-Skripte hängen, heissen wie live (.form__*, .mailoptin*).
   Design-Plan: 02_Design/design-plan-premium.md, Abschnitt 10.
   ========================================================================== */

[hidden] { display: none !important; }
body.kasse { min-height: 100svh; display: flex; flex-direction: column; }
.kasse main { flex: 1 0 auto; }
.kasse .lead { max-width: 32em; }
.pfeil--zurueck { transform: scaleX(-1); }
.textlink:hover .pfeil--zurueck { transform: scaleX(-1) translateX(3px); }

/* ==========================================================================
   Kopf- und Fussleiste (Partials kopfleiste, fussleiste): Logo und Kontakt, keine Menüs
   ========================================================================== */
.kopfleiste { position: relative; z-index: 2; }
.kasse--dunkel .kopfleiste { position: absolute; top: 0; left: 0; right: 0; }
.kasse--hell .kopfleiste { border-bottom: 1px solid var(--linie); }
.kopfleiste__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.kopfleiste__logo { display: flex; flex: none; border-radius: 6px; }
.kopfleiste__logo svg { height: 39px; width: auto; display: block; }   /* 15 % grösser wie in der Leiste der Hauptseiten (Entscheid 21.10.2026), vorher 34 px */
.kasse--hell .kopfleiste__logo svg text:nth-of-type(2) { fill: var(--navy); }
.kasse--hell .kopfleiste__logo svg text:nth-of-type(3) { fill: #6B7686; }
.kopfleiste__kontakt {
    font-size: 0.875rem; color: rgba(255, 255, 255, 0.74); white-space: nowrap;
    text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 0.35em;
    transition: color 0.2s, text-decoration-color 0.2s;
}
.kopfleiste__kontakt:hover { color: #fff; text-decoration-color: currentColor; }
.kasse--hell .kopfleiste__kontakt { color: var(--neben); text-decoration-color: var(--linie-stark); }
.kasse--hell .kopfleiste__kontakt:hover { color: var(--navy); text-decoration-color: currentColor; }

.fussleiste { border-top: 1px solid var(--linie); }
.fussleiste__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.6rem 1.9rem; font-size: 0.875rem; line-height: 1.5; color: var(--neben); }
.fussleiste__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.fussleiste__links a { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.3em; transition: color 0.2s; }
.fussleiste__links a:hover { color: var(--navy); text-decoration-color: currentColor; }

/* ==========================================================================
   /check-start: links das Formular als weisse Platte, rechts der Prüfauftrag als Typenschild (füllt sich beim Tippen)
   ========================================================================== */
.auftrag { padding: clamp(2.25rem, 1.25rem + 3vw, 4rem) 0 clamp(4.5rem, 3rem + 5vw, 7rem); }
.auftrag__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.auftrag__haupt { grid-column: 1 / span 7; }
.auftrag__seite { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 420px; position: sticky; top: 2rem; margin-top: 2.9rem; }
.auftrag__zurueck { font-size: 0.9375rem; color: var(--neben); }
.auftrag__zurueck:hover { color: var(--navy); }
.auftrag__titel {
    margin-top: 1.4rem; font-family: var(--font-display); font-weight: 400; color: var(--navy);
    font-size: clamp(2.5rem, 1.6rem + 2.7vw, 3.75rem); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance;
}
.auftrag__haupt .lead { margin-top: 1.1rem; }
/* video.php (Handy-Analyse 20.10.2026, H16): Dort steht kein Zurück-Link vor dem Titel, also kein Abstand dafür; am Handy auch
   weniger über dem Formular, damit «Video anfordern» im ersten Bildschirm liegt. /check-start (Zurück-Link zuerst) bleibt gleich */
.auftrag__haupt > .auftrag__titel:first-child { margin-top: 0; }
@media (max-width: 640px) { .auftrag__haupt > .auftrag__titel:first-child ~ .form { margin-top: 1.5rem; } }

/* Die Platte mit dem Formular (Feldnamen, IDs und data-Haken wie live, check-start.js hängt daran) */
.form { position: relative; margin-top: 2.25rem; background: var(--platte); border: 1px solid var(--linie-stark); border-radius: 12px; padding: clamp(1.4rem, 0.9rem + 2vw, 2.4rem); }   /* Arbeitsfläche: Kante statt Schatten */
.form__field + .form__field { margin-top: 1.35rem; }
.form__label { display: block; margin-bottom: 0.45rem; font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.form__opt { font-weight: 400; color: var(--neben); }
.form__input {
    width: 100%; 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;
}
.form__input::placeholder { color: #7A8494; }
.form__input:hover { border-color: #5B6677; }
.form__input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: none; border-color: var(--navy); border-radius: var(--radius); }
.form__input[aria-invalid="true"] { border-color: #B42318; }
.form__hint { display: block; margin-top: 0.45rem; font-size: 0.8125rem; line-height: 1.5; color: var(--neben); }
.form__error { display: block; font-size: 0.8125rem; line-height: 1.45; color: #B42318; }
.form__error:not(:empty) { margin-top: 0.4rem; }
.form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text); cursor: pointer; }
.form__consent--wa { margin-top: 0.9rem; }
.form__consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); cursor: pointer; }
.form__consent small { display: block; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.5; color: var(--neben); }
.form__consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
/* Aufwertung zum Bundle (15.10.2026): eine Option direkt über dem Zahlknopf. Haarlinie auf Papier, gewählt mit Navy-Kante
   auf Weiss; kein Lime, das bleibt dem Zahlknopf. */
.aufwertung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem 0.85rem; align-items: start; margin-top: 1.75rem; padding: 1.05rem 1.15rem 1.1rem; background: var(--papier); border: 1px solid var(--linie-stark); border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.aufwertung:hover { border-color: var(--navy); }
.aufwertung:has(input:checked) { background: var(--platte); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.aufwertung input { grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); cursor: pointer; }
.aufwertung__titel { grid-column: 2; grid-row: 1; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.aufwertung__preis { grid-column: 3; grid-row: 1 / span 2; margin-left: 1.6rem; text-align: right; white-space: nowrap; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--navy); }
.aufwertung__preis small { display: block; margin-top: 0.3rem; font-family: var(--font-text); font-size: 0.75rem; line-height: 1.3; color: var(--neben); }
.aufwertung__text { grid-column: 2; grid-row: 2; font-size: 0.875rem; line-height: 1.55; color: var(--neben); }
.aufwertung__text b { font-weight: 600; color: var(--navy); }
/* Der Preis läuft rechts über Titel und Text, damit der Text direkt unter dem Titel beginnt (16.10.2026, sonst Lücke neben dem Etikett).
   Ersparnis gut sichtbar (Wunsch 16.10.2026): Etikett wie die Plakette «Empfohlen», Navy mit Lime-Punkt. Kein Lime als Fläche,
   das bleibt dem Zahlknopf; kein Streichpreis, die Rechtsfrage dazu ist offen */
.aufwertung__ersparnis, .ersparnis { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; 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; line-height: 1.2; letter-spacing: 0; color: #fff; }
.aufwertung__ersparnis::before, .ersparnis::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
@media (max-width: 480px) {   /* schmal: Preis unter den Titel, damit der Titel nicht dreizeilig bricht */
    .aufwertung { grid-template-columns: auto minmax(0, 1fr); }
    .aufwertung__preis { grid-column: 2; grid-row: 2; margin-left: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem; text-align: left; font-size: 1.45rem; }
    .aufwertung__preis small { margin-top: 0; }
    .aufwertung__ersparnis { margin-top: 0.3rem; }
    .aufwertung__text { grid-row: 3; }
}
.form .knopf { width: 100%; margin-top: 1.75rem; }
.form .knopf[aria-busy="true"] { cursor: wait; opacity: 0.75; }
.form__status { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: #B42318; }
.form__status:empty { margin-top: 0; }
/* Fakten unter dem Knopf: je ein Haken statt Trennpunkten, damit ein Umbruch keine Zeile mit einem Punkt beginnt */
.form__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--neben); }
.form__facts li { position: relative; padding-left: 1.05rem; }
.form__facts li::before { content: ''; position: absolute; left: 0.15rem; top: 0.32em; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Der Prüfauftrag: Typenschild in Navy wie auf der Startseite */
.pruefauftrag { background: var(--navy); color: #fff; border-radius: 12px; padding: 1.8rem 1.9rem 1.5rem; box-shadow: 0 50px 90px -50px rgba(10, 31, 61, 0.55), 0 14px 28px -20px rgba(10, 31, 61, 0.3); }
.pruefauftrag__kopf { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pruefauftrag__zeichen { width: 40px; height: 40px; flex: none; }
.pruefauftrag__kopf p { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pruefauftrag__name { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.01em; }
.pruefauftrag__kopf span { margin-top: 0.15rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.64); }
.pruefauftrag__kopf [data-heute] { margin-left: auto; align-self: flex-start; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.64); font-variant-numeric: tabular-nums; }
.pruefauftrag__daten div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 0.78rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); line-height: 1.4; }
.pruefauftrag__daten dt { flex: none; font-size: 0.875rem; color: rgba(255, 255, 255, 0.64); }
/* Was nicht neben die Beschriftung passt, läuft nach rechts statt über sie (safe; flex-end davor für Browser ohne safe).
   tabular-nums nur noch bei Preis und Datum: Es gab dem Bindestrich Ziffernbreite («E - Mail») (Handy-Analyse 20.10.2026) */
.pruefauftrag__daten dd { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; justify-content: safe flex-end; font-size: 0.9375rem; font-weight: 500; text-align: right; }
.pruefauftrag__wert { display: inline-flex; align-items: baseline; gap: 0.55rem; min-width: 0; max-width: 100%; color: rgba(255, 255, 255, 0.6); font-weight: 400; transition: color 0.3s; }   /* baseline: Punkt und Beschriftung auf der ersten Zeile, auch wenn der Wert umbricht */
.pruefauftrag__wert::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); transition: background-color 0.3s, box-shadow 0.3s; }
.pruefauftrag__wert--da { color: #fff; font-weight: 500; }
.pruefauftrag__wert--da::before { background: var(--lime); box-shadow: none; }
.pruefauftrag__text { overflow: hidden; overflow-wrap: anywhere; text-wrap: balance; }   /* lange Adressen brechen um statt «…», ausgewogen (Handy-Analyse 20.10.2026) */
/* Bundle: «einzeln CHF 327» rückt über den Preis, sobald beides nicht nebeneinander passt (Handy-Analyse 20.10.2026) */
.pruefauftrag__preis dd { flex-wrap: wrap; column-gap: 0.55rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pruefauftrag__preis small { white-space: nowrap; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.64); }
.pruefauftrag__fuss { display: flex; align-items: center; gap: 0.55rem; padding-top: 1.15rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
.pruefauftrag__fuss::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.auftrag__notiz { margin-top: 1.1rem; padding-inline: 0.25rem; font-size: 0.875rem; line-height: 1.6; color: var(--neben); }

/* ==========================================================================
   Danke-Seiten: Kopf in Navy mit Messraster, rechts die Statustafel
   ========================================================================== */
.bestaetigung {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    padding: calc(76px + clamp(2.25rem, 1rem + 3.5vw, 4rem)) 0 clamp(3.75rem, 2.5rem + 4vw, 6.5rem);
    background: linear-gradient(180deg, #0C2447 0%, #0A1F3D 55%, #081A33 100%);
}
.bestaetigung > .wrap { position: relative; z-index: 1; }
.szene__raster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.bestaetigung__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.bestaetigung__text { grid-column: 1 / span 6; }
.bestaetigung__objekt { grid-column: 8 / -1; min-width: 0; }
.bestaetigung__titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 1.4rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.bestaetigung__titel em { font-style: italic; color: var(--lime); }
.bestaetigung__lead { margin-top: 1.5rem; max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: rgba(255, 255, 255, 0.74); text-wrap: pretty; }
.bestaetigung__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.bestaetigung__unterzeile { margin-top: 2rem; padding-top: 1.15rem; border-top: 1px solid var(--linie-hell); max-width: 30em; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }
.bestaetigung__lead a, .bestaetigung__unterzeile a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.bestaetigung__lead a:hover, .bestaetigung__unterzeile a:hover { text-decoration-color: #fff; }
.bestaetigung .textlink { color: #fff; }

/* Die Statustafel: ein weisses Blatt wie eine Sendungsverfolgung. Erledigt Navy-Haken, läuft Lime-Punkt, kommt leerer Ring */
.statustafel { 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); }   /* Blatt wie Prüf- und Wahlblatt (17.10.2026) */
.statustafel__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--navy); font-size: 0.8125rem; line-height: 1.4; color: var(--leise); }
.statustafel__kopf b { font-weight: 600; color: var(--navy); }
.statustafel__kopf [data-heute] { font-variant-numeric: tabular-nums; }
.statustafel__titel { margin: 1.05rem 0 1.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); }
.station { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.2rem; }
.station:last-child { padding-bottom: 0.2rem; }
.station:not(:last-child)::before { content: ''; position: absolute; left: 8.25px; top: 25px; bottom: 3px; width: 1.5px; background: var(--linie); }
.station--erledigt:not(:last-child)::before { background: var(--navy); }
.station__punkt { position: relative; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.station--erledigt .station__punkt { background: var(--navy); box-shadow: none; }
.station--erledigt .station__punkt::after { content: ''; position: absolute; left: 6.5px; top: 3.6px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.station--jetzt .station__punkt { background: radial-gradient(circle, var(--navy) 0 2.6px, var(--lime) 3.2px); box-shadow: none; border: 1px solid rgba(10, 31, 61, 0.35); }
.station--jetzt .station__punkt::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--lime-text); opacity: 0; pointer-events: none; }
.station__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.station__marke { font-size: 0.8125rem; font-weight: 600; color: var(--lime-text); }
.station--offen .station__name { color: var(--text); font-weight: 500; }
.station__text { margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.55; color: var(--neben); }
.station__aktion { margin-top: 0.85rem; }
.station__aktion .knopf { min-height: 48px; padding: 0 1.15rem 0 1.3rem; font-size: 0.9375rem; }
.knopf[aria-disabled="true"] { opacity: 0.7; pointer-events: none; }
.statustafel__fuss { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.8125rem; line-height: 1.45; color: var(--neben); }
.statustafel__fuss::before { content: ''; flex: none; box-sizing: content-box; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); border: 1px solid rgba(10, 31, 61, 0.3); }

/* ==========================================================================
   Danke-Seiten, Papier: der eine nächste Schritt (Angebot, Zahlungsplan, Guthaben), Mail-Opt-in, Rückweg
   ========================================================================== */
.anschluss { padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.anschluss + .anschluss { padding-top: 0; }
.anschluss__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.anschluss__text { grid-column: 1 / span 5; }
.anschluss__rechts { grid-column: 7 / -1; }
.anschluss__titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.2rem); line-height: 1.05; letter-spacing: -0.012em; color: var(--navy); text-wrap: balance; }
.anschluss__titel em { font-style: italic; }
.anschluss__text .lead { margin-top: 1.4rem; }
.anschluss__text .notiz { margin-top: 1.4rem; font-size: 0.9375rem; line-height: 1.65; color: var(--neben); max-width: 32em; }
.anschluss__text .notiz b { font-weight: 600; color: var(--text); }
.anschluss__weiter { margin-top: 1.75rem; }
.anschluss__weiter .textlink { color: var(--navy); }
/* Leiser Hinweis auf den nächsten Schritt nach dem Report (Danke Check, 17.10.2026): Haarlinie, kein Knopf */
.anschluss__danach { margin-top: 2.25rem; padding-top: 1.3rem; border-top: 1px solid var(--linie); max-width: 32em; font-size: 0.9375rem; line-height: 1.65; color: var(--neben); }
.anschluss__danach b { margin-right: 0.35rem; font-weight: 600; color: var(--navy); }
.anschluss__danach a { color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--navy) 40%, transparent); }
.anschluss__danach a:hover { text-decoration-color: var(--navy); }

/* Beleg: weisse Platte auf Papier (Angebot oder Zahlungsplan) */
.beleg { background: var(--platte); border-radius: 4px; padding: 1.9rem 2rem 1.6rem; box-shadow: 10px 10px 0 -1px #E3E8EF, 0 50px 90px -50px rgba(10, 31, 61, 0.45), 0 14px 28px -20px rgba(10, 31, 61, 0.22); }   /* Blatt mit zweitem Blatt darunter (17.10.2026) */
.beleg__kopf { padding-bottom: 1.05rem; border-bottom: 2px solid var(--navy); }
.beleg__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + 0.7vw, 2.15rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); }
.beleg__satz { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.5; color: var(--neben); }
.beleg__preis { margin-top: 1.35rem; font-size: clamp(2.5rem, 2rem + 1.4vw, 3.2rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; }
.beleg__preis small { margin-right: 0.4rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--neben); }
.beleg__notiz { margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: var(--leise); }
.beleg__liste { margin-top: 1.35rem; border-top: 1px solid var(--linie); }
.beleg__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; }
.beleg__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); }
.beleg .knopf { width: 100%; margin-top: 1.7rem; }
.beleg__sicher { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--neben); }
.beleg__sicher span { position: relative; padding-left: 1.05rem; }
.beleg__sicher span::before { content: ''; position: absolute; left: 0.15rem; top: 0.32em; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }   /* Haken wie .form__facts */
/* Zahlungsplan (/danke-paket) */
.beleg__zeilen div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linie); line-height: 1.4; }
.beleg__zeilen dt { font-size: 0.9375rem; color: var(--neben); }
.beleg__zeilen dd { font-size: 1.0625rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleg__zeilen .beleg__bezahlt dt { color: var(--text); }
.beleg__bezahlt dt::after { content: 'bezahlt'; display: inline-flex; align-items: center; margin-left: 0.6rem; font-size: 0.8125rem; font-weight: 600; color: var(--lime-text); }
.beleg__zeilen .beleg__gesamt { align-items: flex-end; padding-top: 1.15rem; border-bottom: 0; border-top: 2px solid var(--navy); margin-top: -1px; }
.beleg__gesamt dt { font-weight: 600; color: var(--navy); }
.beleg__gesamt dd { position: relative; padding-bottom: 0.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.8rem + 0.9vw, 2.6rem); line-height: 1; letter-spacing: -0.01em; }
.beleg__gesamt dd::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); }   /* wie die Summe auf /angebote */
.beleg__fuss { margin-top: 0.4rem; font-size: 0.875rem; line-height: 1.6; color: var(--neben); }

/* Mail-Opt-in für Käufer (kauf-optin.js blendet den Block nur ein, wenn ein Quentn-Endpunkt gesetzt ist) */
.mailoptin { margin-top: 3.5rem; max-width: 760px; padding-top: 2.2rem; border-top: 1px solid var(--linie-stark); }
.mailoptin__titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2rem); line-height: 1.1; color: var(--navy); }
.mailoptin__text { margin-top: 0.6rem; font-size: 1rem; line-height: 1.6; color: var(--neben); max-width: 36em; }
.mailoptin__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; margin-top: 1.3rem; }
.mailoptin__input { height: 56px; min-width: 0; padding: 0 1rem; font: inherit; font-size: 1rem; color: var(--text); background: #fff; border: 1px solid var(--feldrand); border-radius: var(--radius); }
.mailoptin__input::placeholder { color: #7A8494; }
.mailoptin__input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: none; border-color: var(--navy); border-radius: var(--radius); }
.mailoptin__input[aria-invalid="true"] { border-color: #B42318; }
.mailoptin__btn:disabled { opacity: 0.6; cursor: wait; }
.mailoptin__consent { grid-column: 1 / -1; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.55; color: var(--neben); }
.mailoptin__consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.mailoptin__status { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.5; }
.mailoptin__status:empty { margin-top: 0; }
.mailoptin__status--error { color: #B42318; }
.mailoptin__status--ok { color: var(--lime-text); font-weight: 500; }

.rueckweg { padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5rem); }   /* nur unten: .wrap gibt den Rand */
.rueckweg .textlink { color: var(--navy); font-size: 0.9375rem; }
main > .anschluss[hidden] ~ .rueckweg { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }   /* /danke-paket ohne ?paket=: Abstand zum Kopf */

/* ==========================================================================
   Danke-Seiten, Runde «genauso premium wie Vorschau» (17.10.2026): Statustafel und Beleg als Blätter wie Prüf- und Wahlblatt,
   der nächste Schritt mit einem echten Stück daneben (Muster-Vorschau, Beispiel-Report) statt einer zweiten Kaufkarte.
   Preis, Etikett und Knopf stehen links im Text, wie im Kopf der Produktseiten
   ========================================================================== */
.statustafel__marke { display: inline-flex; align-items: center; gap: 0.55rem; }
.statustafel__marke svg { flex: none; width: 20px; height: 20px; }
.anschluss__raster--stueck { align-items: center; }
.angebot { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.angebot__preis { 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; color: var(--navy); font-variant-numeric: tabular-nums; }
.angebot__preis small { display: block; margin-top: 0.5rem; font-family: var(--font-text); font-size: 0.875rem; line-height: 1.45; letter-spacing: 0; color: var(--neben); }
.angebot__vorteil { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; margin-top: 0.95rem; font-size: 0.875rem; line-height: 1.45; color: var(--neben); }
.angebot__vorteil .ersparnis { margin-top: 0; }
.angebot .knopf { margin-top: 1.5rem; }
.angebot__fein { margin-top: 0.95rem; max-width: 32em; font-size: 0.8125rem; line-height: 1.6; color: var(--leise); }
/* Echte Stücke: Blätter wie «So sieht dein Report aus» (/webseiten-check) und «So sieht eine Vorschau aus» (/vorschau) */
.anschluss__blaetter { position: relative; display: block; }
.anschluss__blaetter img { position: absolute; height: auto; border-radius: 3px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.anschluss__blaetter--report { aspect-ratio: 1 / 0.86; }
.anschluss__blaetter--report img:first-of-type { width: 50%; 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); }
.anschluss__blaetter--report img:last-of-type { width: 50%; 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); }
.anschluss__blaetter--vorschau { aspect-ratio: 1 / 0.8; }
.anschluss__blaetter--vorschau 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); }
.anschluss__blaetter--vorschau 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); }
.anschluss__blaetter--vorschau 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); }
.anschluss__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; }
.anschluss__marke b { font-size: 0.8125rem; font-weight: 600; color: #fff; }
.anschluss__marke--score { left: -2%; top: 60%; }
.anschluss__marke--liste { right: -2%; top: 23%; }
.anschluss__marke--vergleich { right: -1%; top: 3%; }
.anschluss__marke--richtung { left: 3%; bottom: 9%; }

/* ==========================================================================
   Brief-Strecke (18.10.2026, Design-Plan premium §43): /video.php mit Formular wie /check-start und Danke wie die
   Danke-Seiten, /anmeldung-bestaetigt nach dem Double-Opt-in ebenso. Hier steht nur, was dort fehlt
   ========================================================================== */
.auftrag__titel em, .statustafel__titel em { font-style: italic; overflow-wrap: anywhere; }   /* lange Adressen brechen statt überzulaufen, zuerst an den <wbr> aus video.php */
.bestaetigung__lead b { overflow-wrap: anywhere; }   /* Mailadresse der Danke-Ansicht: bricht nach dem @ statt gekappt zu werden (Handy-Analyse 20.10.2026) */
.auftrag__haupt > .auftrag__notiz { margin-top: 1.25rem; max-width: 36em; }
.auftrag__notiz a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
/* Danke der Brief-Strecke ganz in Navy (Wunsch 18.10.2026): Der Kopf füllt den Bildschirm bis zur Fussleiste, der Rückweg ist ein
   Umriss-Knopf im Kopf (wie .dunkel .knopf--rand auf den Verkaufsseiten; Lime bleibt der Hauptaktion), die Fussleiste liegt auf Navy */
body.kasse--voll { background: #081A33; }   /* Endfarbe des Kopf-Verlaufs, damit keine Kante zur Fussleiste entsteht */
.kasse--voll main { display: flex; flex-direction: column; }
.kasse--voll .bestaetigung { flex: 1 0 auto; display: flex; align-items: center; }
.bestaetigung .knopf--rand { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.bestaetigung .knopf--rand:hover { background: #fff; color: var(--navy); }
.kasse--voll .fussleiste { border-top-color: var(--linie-hell); }
.kasse--voll .fussleiste__innen { color: rgba(255, 255, 255, 0.62); }
.kasse--voll .fussleiste__links a { text-decoration-color: rgba(255, 255, 255, 0.32); }
.kasse--voll .fussleiste__links a:hover { color: #fff; text-decoration-color: currentColor; }
/* Hinweis auf die Bestätigungsmail (Danke mit Newsletter-Häkchen, Wunsch «besser sichtbar»): weisses Blatt wie die Statustafel */
.bestaetigung__hinweis { margin-top: 2rem; max-width: 30em; padding: 1.1rem 1.35rem 1.2rem; background: #fff; color: var(--text); border-radius: 4px; box-shadow: 6px 6px 0 -1px #D9E0EA; }
.bestaetigung__hinweis-titel { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.bestaetigung__hinweis-titel::before { content: ''; flex: none; box-sizing: content-box; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); border: 1px solid rgba(10, 31, 61, 0.3); }
.bestaetigung__hinweis-titel + p { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.55; color: var(--neben); }
@media (prefers-reduced-motion: no-preference) { html.bewegt .bestaetigung__hinweis { animation: fx-auf 1s var(--ease) 0.3s backwards; } }

/* ==========================================================================
   Schmal
   ========================================================================== */
@media (max-width: 1080px) {
    .auftrag__haupt { grid-column: 1 / span 7; }
    .auftrag__seite { grid-column: 8 / -1; max-width: 380px; }
    .pruefauftrag { padding: 1.6rem 1.5rem 1.35rem; }
}
@media (max-width: 900px) {
    .auftrag__raster, .bestaetigung__raster, .anschluss__raster { display: block; }
    .auftrag__seite { position: static; max-width: 560px; margin-top: 3rem; }
    .bestaetigung__objekt { margin-top: 3rem; max-width: 560px; }
    .anschluss__rechts { margin-top: 2.5rem; max-width: 560px; }
}
@media (max-width: 640px) {
    :root { --rand: 20px; }
    .kopfleiste__innen { min-height: 64px; }
    .kopfleiste__logo svg { height: 32px; }   /* vorher 28 px */
    .kopfleiste__frage { display: none; }
    .bestaetigung { padding-top: calc(64px + 2rem); }
    .statustafel, .beleg { padding: 1.4rem 1.2rem 1.2rem; box-shadow: 7px 7px 0 -1px #D9E0EA, 0 40px 70px -40px rgba(0, 0, 0, 0.7); }
    .beleg { box-shadow: 7px 7px 0 -1px #E3E8EF, 0 30px 60px -36px rgba(10, 31, 61, 0.4); }
    .angebot .knopf { width: 100%; }
    .pruefauftrag { padding: 1.45rem 1.25rem 1.25rem; }
    .bestaetigung__aktion .knopf { width: 100%; text-align: center; text-wrap: balance; }   /* bricht er um, dann mittig und ausgewogen (Handy-Analyse 20.10.2026) */
    .mailoptin__form { grid-template-columns: 1fr; }
    .fussleiste__innen { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
    .kopfleiste__kontakt { font-size: 0.8125rem; }
}
@media (max-width: 340px) {   /* 320 px, grosse Schrift (Handy-Analyse 20.10.2026) */
    .auftrag__titel em { font-size: 0.85em; }   /* längere Adressen im Titel brechen nur noch an den <wbr> */
    /* Preiszeile: «einzeln CHF 327» steht über dem Preis, die Beschriftung bricht dafür um */
    .pruefauftrag__preis dt { flex: 0 1 auto; }
    .pruefauftrag__preis dd { flex: none; flex-direction: column; align-items: flex-end; }
}

/* ==========================================================================
   Bewegung (Vokabular der Startseite: einmal, nur Transform und Deckkraft, nie bei reduzierter Bewegung)
   ========================================================================== */
@keyframes fx-auf { from { opacity: 0; transform: translateY(18px); } }
@keyframes fx-rahmen { from { opacity: 0; scale: 0.97; } }
@keyframes fx-strich { from { transform: scaleY(0); } }
@keyframes fx-punkt { from { opacity: 0; transform: scale(0.3); } }
@keyframes fx-ring { 0% { opacity: 0; transform: scale(1); } 12% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.9); } }
@keyframes fx-wert { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: no-preference) {
    /* Danke-Seiten: Auftritt, dann zieht die Linie zur laufenden Station, und dort setzt der Messpunkt einen Ring.
       Der Impuls des Messrasters (raster.js, data-raster-impuls="1900") geht im selben Moment von dort aus. */
    html.bewegt .bestaetigung__titel { animation: fx-auf 1s var(--ease) 0.05s backwards; }
    html.bewegt .bestaetigung__lead { animation: fx-auf 1s var(--ease) 0.17s backwards; }
    html.bewegt .bestaetigung__aktion, html.bewegt .bestaetigung__unterzeile { animation: fx-auf 1s var(--ease) 0.3s backwards; }
    html.bewegt .statustafel { animation: fx-rahmen 1.2s var(--ease) 0.1s backwards; }
    html.bewegt .station--erledigt:not(:last-child)::before { transform-origin: center top; animation: fx-strich 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.8s backwards; }
    html.bewegt .station--jetzt .station__punkt { animation: fx-punkt 0.45s var(--ease) 1.55s backwards; }
    html.bewegt .station--jetzt .station__punkt::before { animation: fx-ring 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) 1.9s backwards; }
    /* Danke-Seiten: die echten Stücke heben sich beim Zeigen wie auf den Produktseiten */
    html.bewegt .anschluss__blaetter--report:hover img:last-of-type, html.bewegt .anschluss__blaetter--report: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 .anschluss__blaetter--report:hover img:first-of-type { transform: translate(-6px, 2px) rotate(-1deg); }
    html.bewegt .anschluss__blaetter--vorschau:hover img:nth-of-type(3), html.bewegt .anschluss__blaetter--vorschau:focus-visible img:nth-of-type(3) { transform: translate(6px, -8px); }
    html.bewegt .anschluss__blaetter--vorschau:hover img:nth-of-type(1) { transform: translate(-6px, 2px) rotate(-1deg); }
    html.bewegt .anschluss__blaetter--vorschau:hover img:nth-of-type(2) { transform: translate(6px, -2px) rotate(0.8deg); }
    /* /check-start: was neu auf dem Prüfauftrag steht, setzt sich kurz */
    html.bewegt .pruefauftrag__wert--neu .pruefauftrag__text { animation: fx-wert 0.45s var(--ease); }
}
/* Sehr schmal (bis 340 px): Logo in der alten Grösse, sonst stösst die Kontaktadresse an den Rand */
@media (max-width: 340px) {
    .kopfleiste__logo svg { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::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; }
}