/* ==========================================================================
   lp-sub.css - Stile nur fuer die Unterseiten (Redesign 2026-09-28, Runde 3).
   Laedt auf allen acht Unterseiten NACH lp-app.css. lp-app.css liefert die
   gemeinsame Grundlage (Token, Seitenverlauf, Glas-Kopfzeile, Pillen,
   .app-card, Fusszeile .site-foot); hier steht nur, was die Unterseiten
   zusaetzlich brauchen. Farben nur aus _ds/tokens/colors.css und dem
   Token-Block von lp-app.css.
   ========================================================================== */

/* ══ Rechtsseiten: Impressum, Datenschutz, Changelog ══════════════════════
   Bereich: main.sub-legal. Die drei Seiten tragen im Markup noch
   Inline-Stile am Seitenkopf und an der Karte sowie einen seitenlokalen
   <style>-Block (.doc h2, .doc p ...), der nach diesem Stylesheet laedt.
   Deshalb: Bereichsklasse fuer hoehere Spezifitaet gegen den <style>-Block,
   !important nur dort, wo ein Inline-Stil ueberschrieben wird (Markup soll
   laut Auftrag nur Klassen dazubekommen). */

/* Seitenkopf wie die App-Seitenkoepfe (Screenshot 2: "Bewerbungen" klein
   ueber "Meine Bewerbungen"). Das Label ist ein schlichtes Wort in --text-2,
   keine Versalien-Zeile. Gilt per :is() auch fuer die Inhalts-Unterseiten
   (main.sub-inhalt, Runde 3 D). */
:is(.sub-legal,.sub-inhalt) .sub-label{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--text-2)!important;margin:0 0 var(--hero-gap-label)!important}
/* Zeilenhoehe, Laufweite und Abstand zum Lead aus lp-app.css (--hero-*),
   dieselben Werte wie die Startseiten-H1 (lp-hero.css). Seit 2026-09-29
   72 statt 80px Obergrenze: die Startseite bleibt mit 96px die lauteste
   Stufe. Kein Zeilenmass mehr: der Titel laeuft ueber die volle
   Containerbreite (--wrap-max), linke Kante = Logo der Kopfzeile;
   balance verteilt lange Titel auf zwei gleich lange Zeilen. Zentrierte
   Koepfe (/kaufen/) zentrieren auf derselben Achse wie die Kopfzeile. */
:is(.sub-legal,.sub-inhalt) .sub-title{font-family:var(--font-display)!important;font-weight:300!important;
  font-size:clamp(2.625rem,5.4vw,4.5rem)!important;line-height:var(--hero-h1-lh)!important;letter-spacing:var(--hero-h1-ls)!important;
  text-wrap:balance;hyphens:auto}
:is(.sub-legal,.sub-inhalt) .sub-title:not(:last-child){margin-bottom:var(--hero-gap-lead)!important}
.sub-head[style*="text-align:center"] .sub-title{margin-inline:auto!important}
/* Unter 420px ist 40px fuer "Datenschutzerklaerung" zu breit (brach ohne
   Trennstrich mitten im Wort). Kleinere Stufe plus hyphens:auto (lang=de):
   bei 375px trennt es sauber als "Datenschutz-erklaerung". */
@media (max-width:420px){:is(.sub-legal,.sub-inhalt) .sub-title{font-size:clamp(2.375rem,10.2vw,2.75rem)!important}}
.sub-legal .sub-head .sub{margin-top:4px}

/* Rechtstext als App-Karte. .app-card steht im Markup und liefert Flaeche,
   Rand, 24px-Radius und Schatten; hier nur der Innenabstand (inline stand
   clamp 24/3vw/44). legal.css setzt unter 540px die Seitenpolster mit
   !important auf 20px; die hoehere Spezifitaet hier gewinnt. */
.sub-legal .legal-card{padding:clamp(24px,4vw,56px)!important}

/* Inhaltsverzeichnis: Titel ohne Versalien, Eintraege mit Kachel-Radius
   wie die Zeilen der App-Tabelle. */
.sub-legal .toc strong{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--text-1)}
.sub-legal .toc a{border-radius:var(--r-tile);transition:background-color .15s var(--ease-app),color .15s var(--ease-app)}
.sub-legal .toc a:hover{background:var(--tile)}
.sub-legal .toc a[aria-current],.sub-legal .toc a:focus-visible{border-radius:var(--r-tile)}
@media (max-width:860px){.sub-legal .toc a{border-radius:var(--r-pill);border-color:var(--line)}}

/* Lesebreite: die Textspalte endet bei 72ch. Die Zeilenlaenge der Absaetze
   bleibt bei den seitenlokal nachgemessenen Werten (58ch bzw. 46ch, siehe
   <style>-Block der Seiten: ch ist in PCS Sanft breiter als ein
   Durchschnittszeichen, 72ch Absatzbreite ergaebe rund 95 Zeichen). */
.sub-legal .doc{max-width:72ch}

/* Zwischenueberschriften und Fliesstext */
.sub-legal .doc h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.875rem);
  line-height:1.15;letter-spacing:-.01em;color:var(--text-1);margin:48px 0 12px}
.sub-legal .doc h2:first-of-type{margin-top:0}
.sub-legal .doc h3{font-family:var(--font-sans);font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-1)}
.sub-legal .doc p,.sub-legal .doc li,.sub-legal .doc dd{font-family:var(--font-sans);color:var(--text-1);line-height:1.65}
.sub-legal .doc ul{color:var(--text-1);line-height:1.65}
.sub-legal .doc dl{line-height:1.65}
.sub-legal .doc dt{color:var(--text-2)}
.sub-legal .doc a{color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
.sub-legal .doc a:hover{text-decoration-thickness:2px}
/* Stand- und Datumszeilen: Mono wie die Zeitmarken der App, ohne Versalien. */
.sub-legal .doc .stand,.sub-legal .doc .wann{font-family:var(--font-mono);text-transform:none;letter-spacing:0;color:var(--text-2)}
/* Hinweiskasten: Kachel-Radius statt 8px. Seit 2026-09-29 auf --info-dim
   ohne Warnrand: der Kasten erklaert, er warnt nicht (Changelog
   Versionsnummern). Text --text-1 auf --info-dim, siehe Bericht. */
.sub-legal .doc .notice{border-radius:var(--r-tile);background:var(--info-dim);border-color:transparent}
.sub-legal .doc .notice p{color:var(--text-1)}

/* ── Changelog: Versionseintraege als Kacheln ────────────────────────────
   Jeder Eintrag (.cl-eintrag, h2 bis vor die naechste h2) ist eine
   16px-Kachel auf --tile in der Karte, wie die inneren Flaechen der App.
   Versionsnummer (.cl-ver) und Datum (.wann) in Mono. Die Gruppenlabels
   (Neu, Verbessert, Behoben ...) sind das Status-Element des Eintrags und
   stehen als Status-Pille wie die Chips der App ("Interview"), ohne Punkt. */
/* Changelog: die Eintraege sind selbst Kacheln. Die aeussere Karte faellt
   weg, sonst stecken Karten in Karten und der Text wird auf dem Handy eng.
   Das Inhaltsverzeichnis bekommt dafuer eine eigene Kachel. */
.sub-legal .legal-card:has(.cl-eintrag){background:transparent;box-shadow:none;border:0;padding:0!important}
.sub-legal .legal-card:has(.cl-eintrag) .toc{background:var(--tile);border-radius:var(--r-tile);padding:20px}
.sub-legal .cl-eintrag{background:var(--tile);border-radius:var(--r-tile);padding:clamp(20px,2.6vw,32px);margin:0 0 12px}
.sub-legal .notice+.cl-eintrag{margin-top:28px}
.sub-legal .cl-eintrag h2{margin:0 0 6px}
/* Versionsnummer als Teal-Chip (Struktur). Seit 2026-09-29 tragen Eintraege,
   die laut Text von KI handeln (.cl-eintrag--ki: 0.14.0, 0.13.0), den Chip in
   Orange mit --on-accent-2 (5,9:1), sonst bleibt alles gleich. */
.sub-legal .cl-ver{display:inline-block;max-width:100%;padding:3px 10px;border-radius:var(--r-pill);background:var(--accent-dim);
  font-family:var(--font-mono);font-size:.62em;line-height:1.4;letter-spacing:0;color:var(--accent-strong);vertical-align:.18em}
/* Seit 2026-10-07 ohne nowrap, mit max-width: Die Marke ist ein inline-block und
   rutscht erst als Ganzes in die naechste Zeile. Umbrechen muss sie nur, wenn
   sie allein breiter ist als die Spalte (200 % Schrift: "0.12.0 bis 0.12.3:"). */
.sub-legal .cl-eintrag--ki .cl-ver{background:var(--accent-2);color:var(--on-accent-2)}
.sub-legal .cl-eintrag .wann{margin:0 0 14px}
.sub-legal .cl-eintrag h3,.sub-legal .cl-eintrag h3:first-of-type{display:flex;width:fit-content;align-items:center;
  min-height:28px;margin:18px 0 8px;padding:2px 12px;border-radius:var(--r-pill);background:var(--surface);
  font-size:.8125rem;line-height:1.3;color:var(--text-1)}
/* Listen im Eintrag ohne Aufzaehlungspunkte: die Trennung tragen Abstand und
   die fette Kernaussage am Zeilenanfang. Gilt nur fuer .cl-eintrag; die
   Listen in Impressum und Datenschutz bleiben unveraendert. */
.sub-legal .cl-eintrag ul{list-style:none;padding:0;margin:0 0 var(--sp-3)}
.sub-legal .cl-eintrag li{margin-bottom:var(--sp-4)}
.sub-legal .cl-eintrag li:last-child{margin-bottom:0}
.sub-legal .cl-eintrag>:last-child{margin-bottom:0}
.sub-legal .cl-eintrag+.stand{margin-top:28px}

@media (prefers-reduced-motion:reduce){.sub-legal .toc a{transition:none}}

/* ══ Inhalts-Unterseiten: Preise, Beta, KI, Vergleich, Ueber ═════════════
   Bereich: main.sub-inhalt plus je Seite .sub-kaufen, .sub-beta, .sub-ki,
   .sub-vergleich, .sub-ueber. Die Bauformen kommen von der Startseite:
   Seitenkopf aus dem Block "Rechtsseiten" oben (per :is erweitert),
   .app-card und .app-tile, die grosse h2 (.sub-h2), die Tabelle aus
   #vergleich, der Steckbrief aus #kurzprofil, das Ledger aus #ki-offen, die
   FAQ aus #faq und die Pillen-Felder aus #warteliste. Diese Startseiten-
   Regeln sind in lp-app.css per Selektor fuer die Unterseiten erweitert;
   hier steht nur, was die Unterseiten zusaetzlich brauchen. */
/* hyphens:manual statt auto (Rechtsseiten): sonst trennt /ueber/ bei
   375px den Produktnamen ("Bewer-bungsManager"). */
.sub-inhalt .sub-title{margin:0 0 14px;hyphens:manual}
/* Titel einer Karte oder eines Kartenabschnitts: wie die Kartentitel der
   App ("Aktuelle Bewerbungen"), Display-Schrift, leicht. */
.sub-inhalt .karten-titel{font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,2.2vw,1.75rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--text-1);margin:0 0 14px}

/* ── Preise (/kaufen/): Karten, Stufen-Tabelle .cmp, FAQ ─────────────────
   Die Preisseite traegt einen seitenlokalen <style>-Block (.plan, .seg,
   table.cmp ...), der nach diesem Stylesheet laedt; die Bereichsklasse
   .sub-kaufen hebt die Spezifitaet. */
/* Empfohlene Stufe: Petrol-Rand wie die Auswahl in der App, gleicher
   Schatten wie die Nachbarkarte statt --shadow-pop. */
.sub-kaufen .plan{padding:clamp(24px,3vw,36px)}
.sub-kaufen .plan.hi{border:1.5px solid var(--accent);box-shadow:var(--shadow-app)}
.sub-kaufen .plan h2{font-weight:400;font-size:clamp(1.375rem,2vw,1.625rem);line-height:1.2;letter-spacing:-.01em}
.sub-kaufen .plan .price{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,5vw,4rem);letter-spacing:-.02em}
/* Stufen-Label ("Probezeit", "Pass") wie die Seitenlabels der App,
   ohne Versalien; die Farbe steht inline. */
.sub-kaufen .plan .eyebrow{font-size:var(--fs-sm);font-weight:400;letter-spacing:0;text-transform:none}
.sub-kaufen .badge{border-radius:var(--r-pill);padding:6px 14px}
/* Umschalter wie "4 W / 12 W / Jahr": Pillen-Spur auf --tile; die Kontur
   aus --control-off bleibt (3:1 gegen die Karte, siehe <style>-Block). */
.sub-kaufen .seg{border-radius:var(--r-pill);background:var(--tile);padding:4px}
.sub-kaufen .seg button{border-radius:var(--r-pill);padding:0 18px}
.sub-kaufen .seg button[aria-pressed="true"]{box-shadow:var(--shadow-app)}
.sub-kaufen .tick{border-radius:var(--r-pill)}
/* "geplant" und der Vorbehalt: Status-Pille ohne Punkt. */
.sub-kaufen .geplant-chip{display:inline-flex;align-items:center;padding:5px 10px;border-color:transparent;border-radius:var(--r-pill)}
.sub-kaufen .preis-vorbehalt{border-radius:var(--r-tile)}
.sub-kaufen .foerder-hinweis{border:0;box-shadow:none}
/* Textblock neben dem Symbol ist ein Flex-Kind: ohne min-width:0 hielt er bei
   200 % Schrift die Breite seines laengsten Worts und lief ueber (2026-10-07).
   Die Trennung faengt Woerter wie "Vermittlungsfachkraft" ab, die allein
   breiter sind als die Spalte. */
.sub-kaufen .foerder-hinweis>div{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Stufen-Tabelle table.cmp wie die App-Tabelle (Screenshot 2): Kopf klein in
   --text-2, gepunktete Zeilenlinien, Werte in Mono als Status-Pillen ohne
   Punkt. separate statt collapse, damit die getoenten Zeilen (abweichende
   Stufen, wie die ausgewaehlte Zeile der App) runde Enden bekommen. */
.sub-kaufen table.cmp{border-collapse:separate;border-spacing:0}
.sub-kaufen table.cmp th,.sub-kaufen table.cmp td{border-bottom:1px dotted var(--line-strong);vertical-align:middle}
.sub-kaufen table.cmp thead th{font-size:.8125rem;font-weight:400;color:var(--text-2);border-bottom:1.5px dotted var(--line-strong)}
.sub-kaufen table.cmp th.grp{background:transparent;padding-top:22px;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:400;color:var(--text-3)}
.sub-kaufen table.cmp tr.diff th[scope="row"],.sub-kaufen table.cmp tr.diff td{border-bottom-color:transparent}
.sub-kaufen table.cmp tr.diff th[scope="row"]{border-radius:var(--r-tile) 0 0 var(--r-tile)}
.sub-kaufen table.cmp tr.diff td:last-child{border-radius:0 var(--r-tile) var(--r-tile) 0}
.sub-kaufen table.cmp :is(.yes,.no,.none){display:inline-flex;align-items:center;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--surface);font-size:.8125rem;white-space:nowrap}
.sub-kaufen table.cmp .yes{background:var(--ok-dim)}
/* Farbsystem der Startseite (2026-09-29, docs/unterseiten-farben-2026-09-29.md):
   Probezeit als ruhige helle Karte wie #preise .lohnt-teal, Pass auf
   Petrol wie #preise .lohnt-feld. Orange nur dort, wo es um KI geht: der
   Badge "Mit Pass KI ohne Zählen", die Haken der KI-Zeilen (.feat-ki). Die
   Tabelle traegt keine Punkte mehr. Der Umschalter bleibt Teal-Familie:
   auf Petrol als Spur aus --on-field-3 (4,8:1, Bedienelement-Grenze 3:1),
   gewaehlt ein heller Einsatz mit Tinte --accent-strong. Die CTA auf Petrol
   ist die helle Inverse (--on-field auf --field), Teal auf Teal traegt nicht. */
.sub-kaufen .plan:not(.plan--feld){background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.sub-kaufen .plan.plan--feld{background:var(--field);color:var(--on-field);border:1px solid var(--field);box-shadow:var(--shadow-app)}
.plan--feld :is(h2,.price,strong){color:var(--on-field)}
.plan--feld :is(.eyebrow,.plan-for,.seg-hint,#pnote,.plan-hinweis){color:var(--on-field-2)}
.sub-kaufen .plan--feld .feats li{color:var(--on-field-2)}
.sub-kaufen .plan--feld .tick{background:color-mix(in oklab,var(--on-field) 16%,transparent);color:var(--on-field)}
.sub-kaufen .feat-ki .tick,.sub-kaufen .plan--feld .feat-ki .tick{background:var(--accent-2);color:var(--on-accent-2)}
.sub-kaufen .plan--feld .badge{background:var(--accent-2);color:var(--on-accent-2)}
.sub-kaufen .plan--feld .seg{background:color-mix(in oklab,var(--on-field) 10%,transparent);border-color:var(--on-field-3)}
.sub-kaufen .plan--feld .seg button{color:var(--on-field-2)}
.sub-kaufen .plan--feld .seg button:hover{color:var(--on-field)}
.sub-kaufen .plan--feld .seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent-strong)}
.sub-kaufen .plan--feld .seg button:focus-visible{box-shadow:var(--focus-ring-on-field)}
.sub-kaufen .plan--feld .pill-accent{background:var(--on-field);color:var(--field)}
.sub-kaufen .plan--feld .pill-accent:hover{background:var(--on-field-2);color:var(--field)}
.sub-kaufen .plan--feld .pill-accent:focus-visible{box-shadow:var(--focus-ring-on-field)}
@media (max-width:540px){.sub-kaufen .plan{padding:24px}}
/* #zugang traegt inline padding:52px; auf schmalen Schirmen zu viel. */
@media (max-width:860px){.sub-kaufen #zugang .card24{padding:clamp(24px,5vw,40px)!important}}

/* ── Beta (/beta/): Kopf wie die anderen Unterseiten, Formular .beta-form ─
   Seit Runde 4 F keine Petrol-Flaeche mehr: der Kopf ist ein .sub-head wie
   auf /ki/ (Label, .sub-title, Lead), das Label behaelt den Mono-Look
   (.beta-flag, Wortlaut in Kleinschrift) auf hellem Grund. Die Kapazitaet
   steht als ruhige Kachel darunter, der Balken wie die Pipeline der App
   (volle Pille, --accent). Die Beta-Seite laedt ihren <style>-Block im body
   nach diesem Stylesheet, daher .sub-beta bzw. #beta-form als Bereich. */
.sub-beta .beta-flag{border-radius:var(--r-pill);letter-spacing:0;padding:6px 14px;text-transform:none}
.sub-beta .beta-leise{color:var(--text-2)}
.sub-beta .beta-lead{margin:0;font-size:var(--fs-h3);max-width:60ch}
.sub-beta #beta-top .hero-cta{margin-top:var(--hero-gap-cta)}
.sub-beta #beta-top .hero-note{margin:12px 0 0;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-2)}
/* Formular wie die Warteliste der Startseite: Pillen-Felder (48px, per
   erweitertem Selektor aus lp-app.css), Mehrzeiler als Kachel-Radius statt
   Pille, Auswahlfelder mit Platz fuer den Pfeil. */
.sub-beta .beta-form{padding:clamp(24px,4.4vw,48px);gap:20px}
.sub-beta .beta-form .sub-h2{font-size:clamp(1.875rem,3.6vw,2.75rem)}
.sub-beta .beta-label{font-weight:var(--fw-medium);gap:8px}
#beta-form textarea.ds-field{border-radius:var(--r-field);padding:14px 20px;min-height:132px}
#beta-form select.ds-field{padding-right:14px}
/* Erfolg: dieselbe Kartenform, getoent wie die ausgewaehlte Zeile der App. */
.sub-beta #beta-success{border-radius:var(--r-card);box-shadow:var(--shadow-app);padding:clamp(28px,4.4vw,48px)}
.sub-beta #beta-success-heading{font-family:var(--font-display);font-weight:400;font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.15;letter-spacing:-.01em}
.sub-beta .beta-steps .step-head{margin:14px 0 6px}
/* "So geht es weiter" seit 2026-09-29 auf dem Petrolband wie #ablauf der
   Startseite: keine Karten auf dem Band, Nummern als helle Kreise
   (--on-field mit --field, 7,2:1), Titel --on-field, Text --on-field-2
   (6,1:1). Die Verbindungslinie laeuft nur, solange die drei in einer Reihe
   stehen (.beta-steps wechselt bei 860px auf eine Spalte). Das Formular
   darueber und die Hinweiskarte darunter bleiben hell. */
.beta-ablauf .sub-h2{color:var(--on-field)}
.beta-ablauf .beta-steps{--luecke:clamp(24px,3vw,40px);gap:var(--luecke)}
.beta-ablauf .beta-steps li{position:relative}
.beta-ablauf .beta-steps .step-num{background:var(--on-field);color:var(--field);font-size:.9375rem;font-weight:var(--fw-semibold)}
.beta-ablauf .beta-steps .step-head{margin:18px 0 8px;color:var(--on-field)}
.beta-ablauf .beta-steps p{color:var(--on-field-2)}
@media (min-width:861px){
  .beta-ablauf .beta-steps li:not(:last-child)::after{content:"";position:absolute;top:20px;left:52px;right:calc(12px - var(--luecke));height:1px;background:color-mix(in oklab,var(--on-field) 24%,transparent)}
}
/* Lesebreite (seit 2026-09-29): Formular und Hinweiskarte laufen jetzt ueber
   die volle Containerbreite, der Fliesstext darin endet bei --measure. */
.sub-beta .beta-note p,.sub-beta .beta-consent{max-width:var(--measure)}
.sub-beta .beta-note h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,1.8vw,1.5rem)}
.sub-beta .beta-note svg{color:var(--accent-strong)}

/* ── KI offengelegt (/ki/): Ledger und Steckbrief ─────────────────────────
   Ledger (.ki-spalte) und Steckbrief (.steckbrief im .datenblatt) nehmen
   die Startseiten-Regeln aus #ki-offen bzw. #kurzprofil (lp-app.css, per
   Selektor erweitert). Hier nur der Abstand der Beschriftung, die auf /ki/
   ueber der ersten Zeile steht. */
.sub-ki .steckbrief{margin-top:0}
.sub-ki .datenblatt{margin-top:24px}
/* Der Steckbrief ist Fliesstext in Tabellenzeilen. Auf voller
   Containerbreite liefen die Zellen auf rund 130 Zeichen; die Karte beginnt
   deshalb an der linken Kante und endet bei Beschriftung plus Lesebreite. */
.sub-ki .datenblatt{max-width:calc(14rem + var(--measure))}
/* Seit 2026-10-07: Bei grosser Schrift passen Beschriftung und Text nicht mehr
   nebeneinander (200 % auf 375px: Tabelle 539px breit, rechts abgeschnitten).
   Unter 18rem Kartenbreite steht die Beschriftung ueber dem Text. rem im
   Container Query folgt der Wurzelschrift: 288px bei 16px, also bleibt 375px
   bei 100 % zweispaltig (Karte 327px). #steckbrief hebt die Spezifitaet ueber
   die Regeln aus lp-app.css (:is(#kurzprofil,.sub-ki)). */
.sub-ki .datenblatt{container-type:inline-size}
@container (max-width:18rem){
  .sub-ki #steckbrief .steckbrief tbody :is(th,td){display:block;width:auto;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .sub-ki #steckbrief .steckbrief tbody td{border-top:0;padding-top:4px}
  .sub-ki #steckbrief .steckbrief tbody .ist-ki td{border-radius:var(--r-tile)}
}
/* Seit 2026-09-29 steht der Ledger auf dem Orangeband .band-ki wie #ki-offen
   auf der Startseite (lp-app.css): die Seite handelt von KI, Orange fuehrt.
   Im Steckbrief tragen nur die Zeilen, die ein Sprachmodell betreffen
   (.ist-ki: Modelle, Training, KI-Verordnung, Kennzeichnung), die helle
   orange Flaeche --accent-2-dim (Zelle und Beschriftung), die Beschriftung in
   --text-1 und halbfett. --text-1 misst auf der Flaeche 12,92:1 hell und
   12,37:1 dunkel, --text-2 (Fliesstext der Zelle) 6,30:1 und 8,02:1,
   Links in --accent-strong 6,19:1 und 7,99:1. */
.sub-ki .band-ki .ki-ledger{margin-top:0}
.sub-ki .steckbrief tbody .ist-ki :is(th,td){background:var(--accent-2-dim)}
.sub-ki .steckbrief tbody .ist-ki th{color:var(--text-1);font-weight:var(--fw-semibold);border-radius:var(--r-tile) 0 0 var(--r-tile)}
.sub-ki .steckbrief tbody .ist-ki td{border-radius:0 var(--r-tile) var(--r-tile) 0}
.sub-ki .steckbrief tbody .ist-ki a{color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ── Vergleich (/vergleich/): Tabelle und #grenzen ────────────────────────
   Die Tabelle nimmt die Regeln aus #vergleich (lp-app.css). Seit 2026-09-29
   traegt die eigene Spalte hier eine Flaeche aus der Teal-Familie
   (--accent-dim, Kopf --accent-strong, 5,9:1); der Zeilen-Hover wechselt
   deshalb auf dieser Seite auf --surface-2, in der eigenen Spalte auf eine
   kraeftigere Teal-Mischung. #kategorie als Bereich, weil die Grundregeln
   ueber :is(#vergleich,...) ID-Spezifitaet tragen.
   Die Grenzen stehen auf dem Petrolband (.band-field, lp-page.css): sie sind
   die Vertrauensaussage der Seite. Orange faellt weg, es gehoert der KI; die
   Kacheln sind --on-field 8%, ohne Punkte. */
.sub-vergleich #kategorie .karten-titel{margin:0}
#kategorie .vgl .vgl-uns{background:var(--accent-dim)}
/* Seit 2026-10-07: Die Trennregel aus lp-page.css (@media max-width:23em)
   folgt nur der Schrift aus den Browser-Einstellungen. Waechst die Wurzelschrift
   anders (200 % auf 375px), lief die Tabelle rechts hinaus. Der Container Query
   misst die Breite neben der Tabelle in rem. Seit Entscheidung C (17px,
   Tabellenzellen 14px) passt die Tabelle auch bei 100 % nicht mehr in 327px
   (387px); die Grenze liegt deshalb bei 24rem (384px bei 16px): Handys bis
   etwa 430px trennen immer, breitere Fenster erst bei grosser Schrift. */
#kategorie .wrap:has(>.vgl){container-type:inline-size}
@container (max-width:24rem){
  #kategorie .vgl :is(th,td){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
}
#kategorie .vgl thead .vgl-uns{background:var(--accent-dim);border-radius:var(--r-tile) var(--r-tile) 0 0}
#kategorie .vgl tbody tr:last-child .vgl-uns{border-radius:0 0 var(--r-tile) var(--r-tile)}
#kategorie .vgl tbody tr:hover :is(th,td){background:var(--surface-2)}
#kategorie .vgl tbody tr:hover td.vgl-uns{background:color-mix(in oklab,var(--accent-dim) 70%,var(--accent-line))}
#grenzen .grenzen{margin:0;padding:0;border-top:0}
#grenzen .karten-titel{color:var(--on-field);margin:0 0 20px}
#grenzen .grenzen ul{list-style:none;padding:0;margin:0;gap:8px;max-width:none;grid-template-columns:minmax(0,1fr)}
/* Sechs Grenzen: ab 861px zwei Spalten, damit die Kacheln die volle Breite
   nutzen und jede Zeile lesbar kurz bleibt. */
@media (min-width:861px){#grenzen .grenzen ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
#grenzen .grenzen li{position:relative;background:color-mix(in oklab,var(--on-field) 8%,transparent);border-radius:var(--r-tile);padding:16px 20px;color:var(--on-field-2)}
#grenzen .grenzen li strong{color:var(--on-field)}

/* Petrolbaender der Unterseiten (/vergleich/, /beta/, /ueber/): Links im
   Fliesstext auf dem Band in --on-field mit Unterstrich (Farbe allein ist
   kein Signal), Fokus als heller Ring (--focus-ring-on-field). */
.sub-inhalt .band-field .sub{color:var(--on-field-2)}
.sub-inhalt .band-field :is(p,li) a{color:var(--on-field);text-decoration:underline;text-underline-offset:3px}
.sub-inhalt .band-field :is(p,li) a:hover{text-decoration-thickness:2px}
.sub-inhalt .band-field a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-field);border-radius:var(--r-sm)}

/* Ueber den Entwickler */
/* /ueber/: Die Textbloecke stehen je in einer .app-card, der Kontakt ebenso; die
   Adresse liegt als Kachel darin. Die Absaetze tragen ihre Abstaende inline
   (margin 0 0 14px); der letzte in der Karte braucht keinen, daher
   !important. */
/* Kopf als Portrait-Karte (seit 2026-09-29, zweite Fassung; ersetzt den
   4:5-Portraitblock vom selben Tag). Eine grosse helle Karte ueber die
   Containerbreite: Text links (55 %), freigestelltes Schwarzweiss-Portrait
   rechts (45 %). Die Karte schneidet nicht (overflow sichtbar), damit der
   Kopf ueber ihre Oberkante ragt (--ueber-ueberstand, rund 11 % der
   Portraithoehe). Die figure reicht per negativem Rand bis an die rechte
   und untere Kartenkante; dort schneidet sie das Bild (overflow:hidden,
   Radius nur unten rechts wie die Karte). Das Bild fuellt die figure per
   object-fit:cover von oben: der Kopf steht immer oben, abgeschnitten wird
   nur der Koerper an der Unterkante.
   Kartenflaeche: --accent-dim, zu 70 % mit --surface aufgehellt. Darauf
   Zeile 2 der Ueberschrift in --accent: 4,29:1 (AA fuer grosse Schrift),
   Lead in --text-2: 6,5:1.
   Teal ist hier Struktur, Orange (KI) kommt auf dieser Seite nicht vor. */
.sub-ueber .ueber-hero-sec{
  --ueber-pad:clamp(28px,4.4vw,64px);--ueber-gap:clamp(24px,4vw,56px);--ueber-ueberstand:clamp(48px,6vw,88px);
  padding:calc(var(--ueber-ueberstand) + 40px) 0 clamp(40px,5vw,64px)}
.sub-ueber .ueber-hero{position:relative;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:var(--ueber-gap);
  min-height:clamp(480px,40vw,600px);padding:var(--ueber-pad);box-sizing:border-box;
  background:color-mix(in srgb,var(--accent-dim) 70%,var(--surface));border:1px solid var(--card-edge);
  border-radius:var(--r-card);box-shadow:var(--shadow-app)}
/* Die Textspalte ist ein Container: die Ueberschrift skaliert mit ihrer
   Breite (cqi), damit jeder Satz ab Desktop auf eine Zeile passt
   ("Von einem Bewerber gebaut." ist rund 13,2 em breit). */
.sub-ueber .ueber-hero-text{grid-column:1;grid-row:1;align-self:center;min-width:0;position:relative;z-index:2;container-type:inline-size}
.sub-ueber .ueber-hero-titel{font-family:var(--font-display);font-weight:300;font-size:clamp(1.875rem,7.2cqi,3.25rem);
  line-height:var(--hero-h1-lh);letter-spacing:var(--hero-h1-ls);color:var(--text-1);margin:0 0 var(--hero-gap-lead);text-wrap:balance;hyphens:manual}
.sub-ueber .ueber-hero-titel>span{display:block}
.sub-ueber .ueber-hero-titel-2{color:var(--accent)}
.sub-ueber .ueber-hero-lead{font-size:var(--fs-h3);line-height:1.6;color:var(--text-2);max-width:52ch;margin:0;text-wrap:pretty}
.sub-ueber .ueber-hero-lead a{color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
.sub-ueber .ueber-hero-lead a:hover{text-decoration-thickness:2px}
.sub-ueber .ueber-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:var(--hero-gap-cta) 0 0}
/* Eine Kennzahl (seit 2026-09-29 nur noch "seit 1995"): Wert in der
   Display-Schrift, Beschriftung klein daneben auf derselben Grundlinie,
   liest sich als ein Satz. Keine Trennlinie, keine Kachel. */
.sub-ueber .ueber-hero-zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:clamp(32px,4vw,48px) 0 0}
.sub-ueber .ueber-hero-zahl strong{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1;letter-spacing:-.01em;color:var(--text-1);white-space:nowrap}
.sub-ueber .ueber-hero-zahl span{font-size:var(--fs-h3);line-height:1.4;color:var(--text-2)}

.sub-ueber .ueber-hero-bild{grid-column:2;grid-row:1;margin:calc(-1 * (var(--ueber-pad) + var(--ueber-ueberstand))) calc(-1 * var(--ueber-pad)) calc(-1 * var(--ueber-pad)) 0;
  overflow:hidden;border-radius:0 0 calc(var(--r-card) - 1px) 0}
.sub-ueber .ueber-hero-bild picture{display:block;height:100%}
.sub-ueber .ueber-hero-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Bildzeile ("Foto: Hintergrund entfernt, ..."): steht unter der Karte,
   rechtsbuendig; Schrift und Farbe aus .bild-hinweis (lp-app.css), --text-2
   auf --bg 7,0:1. Die figure schneidet (overflow:hidden), ist aber bewusst
   nicht positioniert: so bezieht sich die absolut gesetzte Zeile auf die
   Karte und wird nicht mit abgeschnitten. */
.sub-ueber .ueber-hero-bild figcaption{position:absolute;right:0;top:100%;margin:10px 0 0}

/* "Direkter Draht": dunkle Karte ueber dem unteren Teil des Portraits, ragt
   in den Spaltenabstand Richtung Text. --field-ink zu 86 % deckend plus
   Volle Flaeche --field-ink, kein Blur (bis 2026-10-07 Ausnahme vom
   Blur-Verbot, von Michael zurueckgenommen): so stoeren Hemd und Weste
   die Schrift ebenso wenig. Tinten --on-field*: Titel Weiss mindestens 9,7:1, Label
   --on-field-3 mindestens 6,4:1, auch ueber dem weissen Hemd. */
.sub-ueber .ueber-draht{grid-column:2;grid-row:1;align-self:end;justify-self:start;position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:end;
  width:min(320px,100%);box-sizing:border-box;margin:0 0 0 calc(-.75 * var(--ueber-gap));padding:20px 20px 20px 24px;
  background:var(--field-ink);color:var(--on-field);border-radius:var(--r-tile);box-shadow:var(--shadow-pop)}
.sub-ueber .ueber-draht>p{grid-column:1;margin:0}
.sub-ueber .ueber-draht-label{font-size:var(--fs-micro);color:var(--on-field-3);margin-bottom:6px!important}
.sub-ueber .ueber-draht-titel{font-family:var(--font-display);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.2;color:var(--on-field)}
.sub-ueber .ueber-draht-text{font-size:var(--fs-sm);color:var(--on-field-2);margin-top:4px!important}
.sub-ueber .ueber-draht-knopf{grid-column:2;grid-row:1 / span 3;display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r-tile);background:var(--on-field);color:var(--field-ink);transition:transform .2s var(--ease-app)}
.sub-ueber .ueber-draht-knopf:hover{transform:translate(2px,-2px);color:var(--field-ink)}
.sub-ueber .ueber-draht-knopf:focus-visible{outline:none;box-shadow:0 0 0 2px var(--field-ink),0 0 0 4px var(--on-field)}

/* Tablet: gleiche Idee, kleiner. Die Kontaktkarte wird schmaler. */
@media (max-width:1023px){
  .sub-ueber .ueber-hero{grid-template-columns:minmax(0,58fr) minmax(0,42fr);min-height:0}
  .sub-ueber .ueber-draht{width:min(280px,100%);margin-left:calc(-.4 * var(--ueber-gap));padding:16px 16px 16px 20px;column-gap:14px}
  .sub-ueber .ueber-draht-knopf{width:44px;height:44px}
}
/* Mobil: gestapelt. Portrait oben in der Karte, der Kopf ragt weiter ueber
   die Oberkante; der Koerper blendet nach unten in die Kartenflaeche aus,
   weil hier keine Kartenkante ihn schneidet. Darunter Text und Kennzahl,
   dann die Kontaktkarte als normale Karte in voller Breite. */
@media (max-width:699px){
  .sub-ueber .ueber-hero-sec{--ueber-pad:24px;--ueber-ueberstand:44px}
  .sub-ueber .ueber-hero{grid-template-columns:minmax(0,1fr);row-gap:28px}
  /* Seitenverhaeltnis, Schnitt und Ausblendung sitzen hier auf picture,
     nicht auf der figure: sonst schnitte und maskierte die figure auch die
     Bildzeile darunter. */
  .sub-ueber .ueber-hero-bild{grid-column:1;grid-row:1;justify-self:center;width:min(100%,340px);
    margin:calc(-1 * (var(--ueber-pad) + var(--ueber-ueberstand))) 0 0;border-radius:0;overflow:visible}
  .sub-ueber .ueber-hero-bild picture{height:auto;aspect-ratio:4 / 4.2;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,black 72%,transparent);mask-image:linear-gradient(to bottom,black 72%,transparent)}
  .sub-ueber .ueber-hero-bild figcaption{position:static;margin-top:6px}
  .sub-ueber .ueber-hero-text{grid-row:2}
  .sub-ueber .ueber-draht{grid-column:1;grid-row:3;justify-self:stretch;width:auto;margin:0;
    box-shadow:none}
}

/* Schwerpunkte unter der Karte: Pillen, die umbrechen. Bis 2026-10-07 ein
   Endlos-Laufband; gestrichen, weil das Designsystem Endlos-Animationen
   verbietet (Audit, Entscheidung B). */
.sub-ueber .ueber-laufband{margin-top:clamp(40px,3.8vw,52px)}
.sub-ueber .ueber-laufband-liste{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
/* max-width und anywhere seit 2026-10-07 (Entscheidung C): "Eskalationsmanagement" ist bei 200 % Schrift allein breiter als die Spalte. */
.sub-ueber .ueber-laufband-liste li{max-width:100%;overflow-wrap:anywhere;padding:10px 18px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--card);font-size:var(--fs-sm);line-height:1.3;color:var(--text-1)}
@media (prefers-reduced-motion:reduce){
  .sub-ueber .ueber-draht-knopf{transition:none}
}
.sub-ueber .ueber-block{margin-top:20px;padding:clamp(22px,3.4vw,36px)}
.sub-ueber .ueber-block>:last-child{margin-bottom:0!important}
.sub-ueber .ueber-block .sub{max-width:var(--measure)}
.sub-ueber .ueber-kontakt address{background:var(--tile);border-radius:var(--r-tile);padding:14px 20px;font-family:var(--font-mono);font-size:var(--fs-sm)}
/* Seit 2026-09-29 steht "Was davon in dieser Anwendung steckt" auf dem
   Petrolband (.band-field): Arbeitsweise, Datenschutz und Sicherheitstest
   sind die Vertrauensaussage der Seite. Auf dem Band keine Karte, der Titel
   eine Stufe groesser, Tinten --on-field und --on-field-2. Die erste Karte
   nach dem Band braucht keinen Abstand nach oben, den gibt der Abschnitt. */
.sub-ueber .ueber-band .ueber-block{margin:0;padding:0}
.sub-ueber .ueber-band .karten-titel{color:var(--on-field);font-size:clamp(1.75rem,3.2vw,2.5rem);margin:0 0 18px}
.sub-ueber .ueber-band + section > .wrap > .ueber-block:first-child{margin-top:0}
/* Karten direkt unter dem Laufband: der Abschnitt davor gibt den Abstand. */
.sub-ueber .ueber-start{padding:0 0 clamp(48px,6vw,72px)}
.sub-ueber .ueber-start .wrap>.ueber-block:first-child{margin-top:0}

/* ── Kontakt (/kontakt/, seit 2026-09-29, Paket A Task 4) ──────────────────
   Formular im Stil der Warteliste: .lp-waitlist/.wl-* aus lp.css und
   lp-page.css, Pillen-Felder und Fokusring wie #warteliste in lp-app.css.
   Mehrzeiler mit Kachel-Radius wie #beta-form. .kontakt-hp verbirgt den
   Honeypot "website" ohne Inline-Stil (nicht display:none, das erkennen
   manche Bots). */
#kontakt-form{max-width:640px;margin-top:28px}
#kontakt-form .ds-field{min-height:48px;padding:0 20px;border:1px solid var(--control-off);border-radius:var(--r-field);background:var(--surface)}
#kontakt-form .ds-field:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring-on-surface)}
#kontakt-form textarea.ds-field{border-radius:var(--r-field);padding:14px 20px;min-height:160px;line-height:var(--lh-body);resize:vertical}
#kontakt-form .wl-grid .kontakt-pflicht{font-weight:400;color:var(--text-2)}
#kontakt-form .kontakt-hinweis{margin:0 0 10px;font-size:var(--fs-sm);color:var(--text-2)}
#kontakt-form .wl-row .pill{min-height:48px;font-family:var(--font-sans);border:0;cursor:pointer}
#kontakt-form .wl-status{border-radius:var(--r-tile)}
.kontakt-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Seit 2026-09-29 (Paket A, Task 6): Endpreis-Hinweis klein unter dem Preis, wie
   #preise .preis-hinweis auf der Startseite (lp-app.css); gleiche Tokens. */
.sub-kaufen .preis-hinweis,#kategorie .preis-hinweis{margin:6px 0 12px;font-size:var(--fs-micro);line-height:1.4;color:var(--text-3)}

/* ══ Ratgeber: /lebenslauf-mit-ki/, /anschreiben-mit-ki/, /bewerbungen-verwalten/
   Seit 2026-09-29 (SEO Stufe 2). Grund: drei Textseiten mit Frage-
   Ueberschriften brauchen eine Lesespalte, die es auf den anderen
   Unterseiten so nicht gibt. Bereich main.sub-ratgeber. Nur vorhandene
   Token; Teal ist Struktur, Orange (KI) kommt hier bewusst nicht vor, auch
   wenn die Seiten von KI handeln: sie erklaeren, sie zeigen keine KI-Funktion.
   Seitenkopf, .karten-titel, .app-card, FAQ (.faq-liste) und Tabelle (.vgl im
   Bereich .sub-vergleich) kommen unveraendert von den anderen Unterseiten. */
.sub-ratgeber .ratgeber-lead{margin:0;font-size:var(--fs-h3);max-width:none;text-wrap:pretty}
/* Brotkrumen im Platz des Seitenlabels; der Link unterstrichen, weil Farbe
   allein kein Signal ist. */
.sub-ratgeber .brotkrumen a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.sub-ratgeber .brotkrumen a:hover{color:var(--text-1)}
.sub-ratgeber .brotkrumen [aria-current]{color:var(--text-1)}
/* Seit 2026-10-07 volle Containerbreite (--wrap-max) statt einer
   Lesespalte bis --measure: Michael fand Text und Titel zu weit nach links
   gedraengt, rechts blieb die halbe Seite leer. Abschnitte mit
   gleichmaessigem Abstand. */
.sub-ratgeber .ratgeber-abschnitt{margin:0 0 clamp(40px,5vw,56px)}
.sub-ratgeber .ratgeber-abschnitt:last-child{margin-bottom:0}
.sub-ratgeber .ratgeber-abschnitt :is(p,li){color:var(--text-1);line-height:1.65;text-wrap:pretty}
.sub-ratgeber .ratgeber-abschnitt>p{margin:0 0 14px}
.sub-ratgeber .ratgeber-abschnitt>p:last-child{margin-bottom:0}
.sub-ratgeber .ratgeber-abschnitt>ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
/* Liste mitten im Abschnitt (seit 2026-10-01, /eigenbemuehungen-nachweisen/): gleicher Abstand wie zwischen Absaetzen. */
.sub-ratgeber .ratgeber-abschnitt>ul:not(:last-child){margin-bottom:14px}
.sub-ratgeber .ratgeber-abschnitt p a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
/* "So laeuft es im personal BewerbungsManager" als einzige Karte: dort
   spricht das Produkt, in den Fragen davor und danach der Ratgeber. */
.sub-ratgeber .ratgeber-karte{padding:clamp(24px,3.4vw,40px)}
/* FAQ in der Lesespalte: ohne eigenen Abstand oben, Titel wie die Fragen. */
.sub-ratgeber .faq-liste .card24{margin-top:0}
/* Weiterlesen: Links als ruhige Pillen auf --tile, darunter die Warteliste. */
.sub-ratgeber .weiter ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sub-ratgeber .weiter li a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--tile);color:var(--text-1);text-decoration:none;transition:background-color .15s var(--ease-app)}
.sub-ratgeber .weiter li a:hover{background:var(--accent-dim)}
.sub-ratgeber .weiter li a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface)}
@media (prefers-reduced-motion:reduce){.sub-ratgeber .weiter li a{transition:none}}
/* Vergleichstabelle mit vier Spalten (/bewerbungen-verwalten/): auf schmalen
   Schirmen waagerecht scrollbar statt gequetscht. Innenabstand, damit der
   Kartenschatten der .vgl nicht am Scrollrand abgeschnitten wird. */
.tabelle-scroll{overflow-x:auto;margin:0 -12px 14px;padding:4px 12px 20px}
.tabelle-scroll:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-card)}
.tabelle-scroll .vgl{margin-top:0;min-width:600px}

/* ══ Seitenkopf mit Hintergrundfoto: /vergleich/, /ki/, /kaufen/ ══════════
   Seit 2026-10-07. Gleiche Bildwelt und Technik wie der Hero der Startseite
   (lp-hero.css): heller Schreibtisch, CSS-Hintergrund auf ::before mit
   image-set, Schleier aus --bg. Bei /vergleich/ und /ki/ steht der Text
   links, die Gegenstaende liegen rechts; der Schleier laeuft deshalb von
   links. /kaufen/ ist zentriert, Gegenstaende an beiden Raendern, Schleier
   von oben. Unter 1024px stark zurueckgenommen (mindestens 82 % --bg ueber
   dem Text), wie auf der Startseite. Prompts: docs/assets-prompts.md. */
.sub-head--bild{position:relative;isolation:isolate;min-height:clamp(420px,38vw,600px);display:flex;flex-direction:column;justify-content:center}
.sub-head--bild>.wrap{width:100%;box-sizing:border-box;max-width:calc(var(--wrap-max) + 2 * var(--gutter))}
.sub-head--bild::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:right center;
  /* Unten weich auslaufen: der folgende Abschnitt hat eine eigene Flaeche. */
  -webkit-mask-image:linear-gradient(to bottom,var(--bg) 72%,transparent);mask-image:linear-gradient(to bottom,var(--bg) 72%,transparent)}
.sub-head--bild .bild-hinweis{margin-top:24px;text-align:left}
.sub-vergleich .sub-head--bild::before{background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),url("/assets/img/hero-vergleich-1920.webp");background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),image-set(url("/assets/img/hero-vergleich-1920.avif") type("image/avif"),url("/assets/img/hero-vergleich-1920.webp") type("image/webp"))}
@media (min-width:1600px){.sub-vergleich .sub-head--bild::before{background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),url("/assets/img/hero-vergleich-2688.webp");background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),image-set(url("/assets/img/hero-vergleich-2688.avif") type("image/avif"),url("/assets/img/hero-vergleich-2688.webp") type("image/webp"))}}
@media (max-width:1023px){.sub-vergleich .sub-head--bild::before{background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),url("/assets/img/hero-vergleich-1280.webp");background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),image-set(url("/assets/img/hero-vergleich-1280.avif") type("image/avif"),url("/assets/img/hero-vergleich-1280.webp") type("image/webp"))}}
.sub-ki .sub-head--bild::before{background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),url("/assets/img/hero-ki-1920.webp");background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),image-set(url("/assets/img/hero-ki-1920.avif") type("image/avif"),url("/assets/img/hero-ki-1920.webp") type("image/webp"))}
@media (min-width:1600px){.sub-ki .sub-head--bild::before{background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),url("/assets/img/hero-ki-2688.webp");background-image:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 66%),linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 84%,var(--bg) 100%),image-set(url("/assets/img/hero-ki-2688.avif") type("image/avif"),url("/assets/img/hero-ki-2688.webp") type("image/webp"))}}
@media (max-width:1023px){.sub-ki .sub-head--bild::before{background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),url("/assets/img/hero-ki-1280.webp");background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),image-set(url("/assets/img/hero-ki-1280.avif") type("image/avif"),url("/assets/img/hero-ki-1280.webp") type("image/webp"))}}
.sub-kaufen .sub-head--bild::before{background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent 74%,var(--bg) 100%),url("/assets/img/hero-kaufen-1920.webp");background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent 74%,var(--bg) 100%),image-set(url("/assets/img/hero-kaufen-1920.avif") type("image/avif"),url("/assets/img/hero-kaufen-1920.webp") type("image/webp"))}
@media (min-width:1600px){.sub-kaufen .sub-head--bild::before{background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent 74%,var(--bg) 100%),url("/assets/img/hero-kaufen-2688.webp");background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent 74%,var(--bg) 100%),image-set(url("/assets/img/hero-kaufen-2688.avif") type("image/avif"),url("/assets/img/hero-kaufen-2688.webp") type("image/webp"))}}
@media (max-width:1023px){.sub-kaufen .sub-head--bild::before{background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),url("/assets/img/hero-kaufen-1280.webp");background-image:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),image-set(url("/assets/img/hero-kaufen-1280.avif") type("image/avif"),url("/assets/img/hero-kaufen-1280.webp") type("image/webp"))}}
.sub-kaufen .sub-head--bild::before{background-position:center bottom}
.sub-kaufen .sub-head--bild .bild-hinweis{text-align:center}
@media (max-width:1023px){.sub-head--bild{min-height:0}}
/* Titel und Einleitung bleiben links vom Foto (Desktop). */
@media (min-width:1024px){:is(.sub-vergleich,.sub-ki) .sub-head--bild :is(.sub-title,.sub){max-width:56%}}

/* Nachweis-Vorlage auf /warteliste/bestaetigt/ (seit 2026-10-09).
   Kein KI-Bezug, also kein Orange. Das Vorschaubild ist ein zweiter
   Download-Link fuer Maus und Touch, fuer Tastatur und Screenreader
   reichen die beiden Knoepfe (tabindex -1, aria-hidden). */
.nw{display:grid;grid-template-columns:minmax(0,62ch) 260px;justify-content:space-between;gap:clamp(24px,5vw,72px);align-items:start;margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.nw h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance;max-width:30ch}
.nw p{margin:0 0 12px;color:var(--text-2);line-height:1.7;max-width:62ch;text-wrap:pretty}
.nw-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 10px}
.nw-knoepfe .pill{min-height:48px;font-size:1rem}
.nw .nw-meta{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:20px}
.nw .nw-hinweis{font-size:var(--fs-sm);color:var(--text-1);background:var(--surface-2);border-radius:var(--r-tile);padding:12px 16px}
.nw .nw-bruecke{font-size:var(--fs-sm);margin:0}
.nw-bruecke a{color:var(--accent-strong);text-underline-offset:3px}
.nw-bild{display:block;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-pop);transform:rotate(1.2deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nw-bild:hover{transform:rotate(0) translateY(-2px)}
.nw-bild img{display:block;width:100%;height:auto}
.nw-zurueck{margin:32px 0 0}
@media (max-width:720px){
  .nw{grid-template-columns:minmax(0,1fr)}
  .nw-bild{grid-row:1;width:min(180px,50%);transform:none}
}
@media (prefers-reduced-motion:reduce){.nw-bild{transition:none}}