/* ==========================================================================
   lp-app.css - App-Stil der Startseite (Redesign 2026-09-28).
   Laedt NACH lp.css, lp-page.css, lp-motion.css und ueberschreibt deren
   Optik. Farben kommen aus _ds/tokens/colors.css; hier stehen nur die
   Ableitungen aus docs/design-versuch/stil.css der Web App.
   ========================================================================== */
:root{
  --r-card:24px;--r-tile:16px;--r-field:14px;--r-pill:999px;
  --ease-app:cubic-bezier(.22,1,.36,1);
  --page-a:#EEF3F3;--page-b:#D9EEF1;
  --card:rgba(255,255,255,.72);--card-edge:rgba(255,255,255,.9);
  --tile:rgba(237,244,245,.8);--hatch:rgba(18,42,46,.28);
  /* Abschnittsrhythmus der Startseite (seit 2026-10-07, Audit Paket 3):
     vorher fuenf Inline-Polster im HTML. Werte unveraendert. */
  --abschnitt-xl:96px;--abschnitt-l:72px;--abschnitt-m:48px;--abschnitt-s:24px;
  /* Seit 2026-10-07 (Audit Paket 3, Entscheidung B) enger: vorher
     0 12px 32px -12px, das Muster "duenner Rand, breiter Schatten".
     Gleicher Wert wie --ui-shadow der Web App (src/styles/ui/tokens.css). */
  --shadow-app:0 1px 2px rgba(18,42,46,.06),0 4px 12px -4px rgba(18,42,46,.14);
  /* Hero-Ueberschrift, ein Satz Werte fuer alle Seiten (seit 2026-09-29).
     Vorher line-height 1.02 bzw. 1.04 und letter-spacing -.02em: bei 80 bis
     96px stiessen die Oberlaengen der zweiten Zeile fast an die erste, die
     Zeichen standen gedrueckt. 1.1 und -.01em lassen PCS Werk atmen.
     Keine Zeilenbegrenzung mehr (vorher --hero-h1-measure 20ch): die
     Ueberschrift nutzt die volle Breite von --wrap-max (lp.css), wie die
     Kopfzeile darueber; text-wrap:balance verteilt mehrzeilige Titel.
     Die Abstaende folgen dem 4px-Raster (_ds/tokens/spacing.css):
     Label 12, Lead 24, CTA 32. */
  --hero-h1-lh:1.05;--hero-h1-ls:-.025em;
  --hero-gap-label:var(--sp-3);--hero-gap-lead:var(--sp-6);--hero-gap-cta:var(--sp-8);
}
body{background:linear-gradient(160deg,var(--page-a) 0%,var(--bg) 45%,var(--page-b) 100%) fixed}
/* .sub-inhalt: auf den Inhalts-Unterseiten (lp-sub.css) liegen die Klassen
   neben alten Kartenklassen (.card24, .plan), deren seitenlokale <style>-
   Bloecke nach diesem Stylesheet laden; die Bereichsklasse hebt die
   Spezifitaet, der Regelkoerper bleibt einer. */
.app-card,.sub-inhalt .app-card{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow-app)}
.app-tile,.sub-inhalt .app-tile{background:var(--tile);border-radius:var(--r-tile)}
/* lp.css .pill folgt --r-ctl (4px, eckige Kontrollflaeche); die App-CTAs in
   Kopfzeile und Hero sind volle Pillen. Gilt fuer jede .pill, betroffen sind
   header.top .pill-accent und die Hero-CTA. */
.pill{border-radius:var(--r-pill)}
/* Abgleich mit der Web App (Entscheidung 2026-09-29, Designsystem
   "personal BewerbungsManager V2"): Buttons tragen die Werte von .ui-btn -
   14px, Gewicht 500, Polster 0 20px; die Primaeraktion mit --shadow-app.
   Sekundaer (.pill-line) bleibt ohne Schatten wie .ui-btn--ghost. */
.pill{font-size:.875rem;font-weight:500;padding:0 20px}
.pill-accent{box-shadow:var(--shadow-app)}
/* Entscheidung D (2026-10-07 Nacht, Critique Runde 7, im Designsystem
   eingetragen): nur die zwei Hero-Knoepfe 16px und Gewicht 600, unter der
   bis zu 90px grossen Ueberschrift wirkten 14px/500 zu leicht. */
.stage-copy .hero-cta .pill{font-size:1rem;font-weight:var(--fw-semibold)}

/* ── Kopfzeile im App-Stil ────────────────────────────────────────────────
   lp.css haelt header.top sticky und blockfarbig (Begruendung dort: kein
   Blur). Hier wird daraus die freischwebende Pillen-Kopfzeile der App
   (Screenshot 1): Marke, Navigation und Umschalter je eine eigene Pille auf
   dem Seitenverlauf, keine durchgehende Leiste mehr. Sticky bleibt aus
   lp.css erhalten, nur Flaeche und Rand fallen weg.
   Kein Glas (Entscheidung B, 2026-10-07): die Ausnahme vom Blur-Verbot ist
   zurueckgenommen. Die Kopfzeile traegt volle Flaeche --bg, damit beim
   Scrollen kein Inhalt durchscheint; den Abstand zum Inhalt zeigt der
   Schatten aus lp.css (header.top.is-scrolled, lp-motion.js). */
header.top{background:var(--bg);border-bottom:0}
.lp-brand{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:6px 16px 6px 6px}
.lp-nav{background:var(--card);box-shadow:var(--shadow-app);border-radius:var(--r-pill);padding:6px;gap:4px}
/* Navigation mittig zur Seite (Michael 2026-09-29). Im Flex-Layout stand die
   Nav-Pille direkt neben der Marke, weil nur .lp-act per margin-left:auto
   nach rechts rueckte. Drei Spalten mit gleich breiten Aussenspalten setzen
   die Mitte der Pille auf die Seitenmitte, egal wie breit Marke und Aktionen
   sind. Nur solange die Navigation sichtbar ist (lp.css blendet sie unter
   1120px aus, dann gilt wieder das Flex-Layout mit Burger). */
@media (min-width:1121px){
  .lp-hd{display:grid;grid-template-columns:1fr auto 1fr}
  .lp-brand{justify-self:start}
  .lp-act{justify-self:end;margin-left:0}
}
/* lp-page.css:53-61 gibt jedem Nav-Punkt eine 2px-Grundlinie, die bei Hover
   und aktiver Seite einfaerbt - das war die Loesung fuer eine flache Leiste
   ohne Pille. Auf der Pille braucht es diese Linie nicht mehr: border-bottom
   auf 0 neutralisiert sie, der Hover-Zustand wandert stattdessen auf die
   Flaeche der Pille (naeher am App-Vorbild). */
.lp-nav a{padding:10px 18px;border-radius:var(--r-pill);color:var(--text-2);border-bottom:0}
.lp-nav a:hover{background:var(--surface-2)}
/* .pill-accent (CTA "Auf die Warteliste") bleibt unveraendert Petrol aus
   lp.css - kein Override hier. */

/* ── Quellen der Jobsuche als ein Satz ────────────────────────────────
   Seit 2026-10-07 ein Satz statt Logo-Wand (bei zwei Quellen las sich das
   wie eine halb leere Wand), seit Critique 2026-10-09 (vierter Lauf) im
   Steckbrief #was-ist-das statt als eigenes Band (Lage in lp-hero.css).
   Die Namen tragen Gewicht ueber --text-1, der Rest steht in --text-2. */
.band-satz{max-width:62ch;margin:0;text-align:center;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.5;color:var(--text-2);text-wrap:balance}
.band-satz strong{font-weight:var(--fw-semibold);color:var(--text-1)}

/* ══ Abschnitte 1: Problem, Kurzprofil, Ablauf, Funktionen ════════
   Diese fuenf Abschnitte uebernehmen die Bauformen der Web App: Karten mit
   24px Radius auf --card, innere Flaechen als 16px-Kacheln auf --tile,
   Ueberschriften wie "Meine Bewerbungen" (Screenshot 2), Filter-Pillen wie
   "4 Wochen / 8 Wochen" (Screenshot 4). Die Abschnitte ab #vergleich folgen
   in Task 6 und sind hier bewusst nicht erfasst. */

/* Ueberschriften: gross, leicht, eng - in diesen Abschnitten und (Task 6)
   in den Abschnitten ab #vergleich bis #warteliste. Die Fusszeile bleibt
   bewusst draussen: ihre h2 sind Spaltentitel. */
.problem h2,#ablauf h2,#erweiterung h2,#funktionen h2,
#vergleich h2,#preise h2,#kontrolle h2,#ki-offen h2,#faq h2,body:has(#top.stage) #warteliste h2,
.sub-inhalt .sub-h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.875rem,4.2vw,3.25rem);line-height:1.05;letter-spacing:-.02em}
/* .sub steht schon in lp.css auf --text-2, das entspricht den Unterzeilen
   der App ("Letzte 8 Wochen, Stand heute"); kein Override noetig. */

/* ── Problem: das Foto als App-Karte (seit 2026-09-29, ersetzt .beleg) ─── */

/* ── Bildhinweis (seit 2026-09-29) ──────────────────────────────────────
   Eine Klasse fuer alle Bildzeilen zu KI-Bildern und bearbeiteten Fotos
   (KI-VO Art. 50 Abs. 4 und 5, docs/ki-bilder-kennzeichnung-2026-09-29.md):
   echter Text neben dem Bild, nie als Etikett auf dem Bild, ohne Hover und
   ohne Animation sichtbar. --fs-micro in --text-2: auf --bg 7,0:1, auf
   --surface 7,3:1. Auf dunklen Flaechen die Variante unten. */
.bild-hinweis{margin:8px 0 0;font-size:var(--fs-micro);line-height:1.4;color:var(--text-2);text-align:right}
.problem-bild{margin:0}

/* ── Kurzprofil: Datenblatt als Karte, Zeilen wie die App-Tabelle ──────── */
:is(#kurzprofil,.sub-ki) .datenblatt{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow-app);padding:8px}
/* separate statt collapse: nur so greift die Rundung an den Zellen der
   Reifegrad-Zeile. Es gibt nur obere Linien, also keine Doppelkanten. */
:is(#kurzprofil,.sub-ki) .steckbrief{border-collapse:separate;border-spacing:0}
:is(#kurzprofil,.sub-ki) .datenblatt .vgl caption{background:transparent;border-bottom:1px dotted var(--line-strong)}
:is(#kurzprofil,.sub-ki) .steckbrief th,:is(#kurzprofil,.sub-ki) .steckbrief td{border-top:1px dotted var(--line-strong)}
:is(#kurzprofil,.sub-ki) .steckbrief tbody tr:first-child th,:is(#kurzprofil,.sub-ki) .steckbrief tbody tr:first-child td{border-top:0}
:is(#kurzprofil,.sub-ki) .steckbrief tbody th{font-family:var(--font-mono);color:var(--text-3);background:transparent}
/* Die Reifegrad-Zeile behaelt ihren warmen Ton (Farbgrammatik lp-page.css),
   jetzt als eingelegte Kachel statt als Vollflaechenzeile. */
:is(#kurzprofil,.sub-ki) .steckbrief .zeile-warm th,:is(#kurzprofil,.sub-ki) .steckbrief .zeile-warm td{background:var(--brand-warm-dim);color:var(--brand-warm-deep)}
:is(#kurzprofil,.sub-ki) .steckbrief .zeile-warm td{color:var(--text-2)}
:is(#kurzprofil,.sub-ki) .steckbrief .zeile-warm th{border-radius:var(--r-tile) 0 0 var(--r-tile)}
:is(#kurzprofil,.sub-ki) .steckbrief .zeile-warm td{border-radius:0 var(--r-tile) var(--r-tile) 0}

/* ── Ablauf: volle Petrolflaeche, Schritte als Kreise, Beispielkarte ───── */
/* Seit 2026-09-29 steht #ablauf auf .band-field (Flaeche und Tinten aus
   lp-page.css). Die Nummern 1 bis 3 sind KI-Schritte und tragen --accent-2
   mit --on-accent-2 (Zwei-Akzent-Regel, tokens/colors.css); Schritt 4 ist ein
   weisser Kreis (--on-field) mit Glocke in --field. Die Verbindungslinie
   laeuft nur, solange die vier Schritte in einer Reihe stehen. */
/* Abschnittskopf: Ueberschrift links, Unterzeile rechts auf der Grundlinie.
   .abschnitt-kopf ist dieselbe Bauform fuer #funktionen (seit 2026-09-29). */
#ablauf .ablauf-kopf,.abschnitt-kopf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,56px)}
#ablauf .ablauf-kopf h2,.abschnitt-kopf h2{margin:0}
#ablauf .ablauf-kopf .sub,.abschnitt-kopf .sub{max-width:44ch}
/* Seit 2026-10-07 Nacht (Critique Runde 7): in #ablauf steht die Unterzeile
   unter der kurzen Ueberschrift; rechts entstand eine grosse Luecke.
   #funktionen und das KI-Band behalten links und rechts. */
#ablauf .ablauf-kopf{grid-template-columns:minmax(0,1fr)}
#ablauf .schritte-feld{--luecke:clamp(24px,3vw,40px);margin:0;gap:var(--luecke)}
#ablauf .schritte-feld li{position:relative;background:none;border-radius:0;padding:0}
#ablauf .schritte-feld .step-head{margin:18px 0 8px;color:var(--on-field);text-wrap:balance}
#ablauf .schritte-feld .sub{color:var(--on-field-2);font-size:var(--fs-body)}
#ablauf .step-num,.beta-steps .step-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:.75rem}
#ablauf .step-num{font-size:.9375rem;font-weight:var(--fw-semibold)}
#ablauf .step-num--ki{background:var(--accent-2);color:var(--on-accent-2)}
#ablauf .step-num--frist{background:var(--on-field);color:var(--field)}
#ablauf .step-num svg{display:block}
@media (min-width:1121px){
  #ablauf .schritte-feld 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)}
}
/* minmax(0,1fr) seit 2026-10-07: mit 1fr lief der Kopf von #ki-offen bei 200 %
   Schrift auf 375px 4px ueber den Rand (Spalte 379px statt 327px). */
@media (max-width:860px){#ablauf .ablauf-kopf,.abschnitt-kopf{grid-template-columns:minmax(0,1fr)}}

/* Ablauf-Video (seit 2026-10-07, Entwurf B): Standbild und Film liegen in
   derselben Rasterzelle uebereinander. lp-video.js blendet das Standbild
   erst aus, wenn der Film wirklich laeuft; bei langsamem Netz bleibt also
   kein schwarzer Kasten. Der Knopf ist Petrol auf dem hellen Standbild
   (--on-field auf --field 7,20:1), die Dauer in Mono, weil sie eine Zeit
   misst. Rundung an Bild und Film selbst statt overflow:hidden an der
   Buehne, damit der Fokusring des Knopfs nie abgeschnitten wird. */
/* Seit 2026-10-07 spaet steht das Video direkt unter dem Kopf, vor den
   Schritten; der Kopf bringt den Abstand nach oben mit. */
#ablauf .ablauf-video{margin:0}
/* Ab 1100px steht das Video neben dem Kopf statt darunter (Critique
   2026-10-09, sechster Lauf): rechts neben Ueberschrift und Unterzeile war
   Platz frei, das Video belegte 1280 x 720 px. Textfassung und Schritte
   laufen darunter ueber die ganze Breite. */
@media (min-width:1100px){
  #ablauf .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);align-items:center}
  #ablauf .wrap>*{grid-column:1 / -1}
  #ablauf .wrap>.ablauf-kopf{grid-column:1;margin-bottom:0}
  #ablauf .wrap>.ablauf-video{grid-column:2}
  #ablauf .ablauf-kopf h2{text-wrap:balance}
}
#ablauf .ablauf-textfassung{margin-bottom:clamp(40px,5vw,64px);border-bottom:1px solid color-mix(in oklab,var(--on-field) 24%,transparent)}
.ablauf-video-buehne{position:relative;display:grid}
.ablauf-video-buehne>*{grid-area:1/1}
.ablauf-video-standbild img,.ablauf-video-film{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-tile);background:var(--field-ink)}
/* Bis das (lazy geladene) Standbild da ist, steht eine helle Flaeche im Ton
   des Bildes statt eines dunklen Kastens. */
.ablauf-video-standbild img{background:var(--bg)}
.ablauf-video-film[hidden]{display:none}
.ablauf-video-standbild{z-index:1;pointer-events:none}
/* Knopf oben links seit Standbild v5 (Kalender, Critique 2026-10-09, sechster
   Lauf): unten links stehen Untertitel und Etikett "4 Dranbleiben" im Bild. */
.ablauf-video-start{z-index:2;align-self:start;justify-self:start;margin:clamp(12px,2.2vw,28px);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 18px 6px 6px;border:0;border-radius:var(--r-pill);background:var(--field);color:var(--on-field);font:var(--fw-semibold) var(--fs-body)/1.2 var(--font-display);cursor:pointer;box-shadow:0 6px 20px -6px rgb(10 32 36/.45);transition:background-color .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}
.ablauf-video-start[hidden]{display:none}
.ablauf-video-start:hover{background:var(--field-ink)}
.ablauf-video-start:active{transform:translateY(1px)}
.ablauf-video-start:focus-visible{outline:none;box-shadow:0 0 0 3px var(--on-field),0 0 0 6px var(--field)}
.ablauf-video-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);background:var(--on-field);color:var(--field)}
.ablauf-video-icon svg{display:block;margin-left:3px}
.ablauf-video-dauer{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:var(--fs-sm);color:var(--on-field-2);font-variant-numeric:tabular-nums}
/* Ganze Buehne als Trefferflaeche (Critique 2026-10-07): das ::after des
   Knopfs spannt sich ueber die Buehne, weil der Knopf selbst nicht
   positioniert ist. Der Fokusring bleibt an der Kapsel. */
.ablauf-video-start::after{content:"";position:absolute;inset:0;border-radius:var(--r-tile)}
.ablauf-video-buehne:has(.ablauf-video-start:hover:not(.ist-laden)) .ablauf-video-standbild img{filter:brightness(.97)}
.ablauf-video-ton{font-family:var(--font-sans);font-size:var(--fs-micro)}
/* Ladezustand zwischen Klick und erstem Bild: Ring statt Dreieck. */
.ablauf-video-start.ist-laden{cursor:progress}
.ablauf-video-start.ist-laden .ablauf-video-icon svg{display:none}
.ablauf-video-start.ist-laden .ablauf-video-icon::before{content:"";width:16px;height:16px;border-radius:var(--r-pill);border:2.5px solid color-mix(in oklab,var(--field) 25%,transparent);border-top-color:var(--field);animation:ablauf-laden .8s linear infinite}
@keyframes ablauf-laden{to{transform:rotate(1turn)}}
.ablauf-video-fehler{z-index:2;align-self:end;justify-self:start;margin:clamp(12px,2.2vw,28px);padding:10px 16px;border-radius:var(--r-tile);background:var(--field-ink);color:var(--on-field);font-size:var(--fs-sm)}
.ablauf-video-fehler a{color:var(--on-field);text-decoration:underline;text-underline-offset:3px}
/* Nach dem Ende (Fassung 5): echter Link ueber dem Schlussbild, das dort
   "Auf die Warteliste" zeigt. Unten bleiben 56px frei fuer die Steuerleiste
   des Browsers (Nochmal abspielen). Der Text ist nur fuer Screenreader und
   Tastatur; sichtbar traegt das Videobild die Botschaft. */
.ablauf-video-ende{position:absolute;z-index:3;inset:0 0 56px 0;border-radius:var(--r-tile) var(--r-tile) 0 0;cursor:pointer;color:transparent;font-size:0;overflow:hidden}
.ablauf-video-ende:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--field),inset 0 0 0 6px var(--on-field)}
/* Bildunterschrift (seit 2026-10-07 spaet): links was das Video zeigt,
   rechts die KI-Kennzeichnung als echter Text (KI-VO Art. 50). */
.ablauf-video-unterzeile{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;font-size:var(--fs-sm);line-height:1.45;color:var(--on-field-2)}
.ablauf-video-unterzeile strong{color:var(--on-field);font-weight:var(--fw-medium)}
#ablauf .ablauf-video .bild-hinweis{margin:0;color:var(--on-field-2);text-align:left}
/* Textfassung mit Zeitmarken: zu, bis jemand sie oeffnet. Pfeil aus zwei
   Raendern, kein Zeichen aus der Schrift. */
.ablauf-textfassung{margin-top:16px;border-top:1px solid color-mix(in oklab,var(--on-field) 24%,transparent)}
.ablauf-textfassung>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-family:var(--font-display);font-size:1.0625rem;color:var(--on-field)}
.ablauf-textfassung>summary::-webkit-details-marker{display:none}
.ablauf-textfassung>summary::before{content:"";flex:none;width:8px;height:8px;margin:0 2px 3px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s cubic-bezier(.16,1,.3,1)}
.ablauf-textfassung[open]>summary::before{transform:rotate(45deg);margin-bottom:6px}
.ablauf-textfassung>summary:focus-visible{outline:none;box-shadow:var(--focus-ring-on-field);border-radius:var(--r-sm)}
.ablauf-textfassung ol{list-style:none;margin:0;padding:0 0 8px 24px;max-width:76ch}
.ablauf-textfassung li{display:grid;grid-template-columns:4.5ch minmax(0,1fr);gap:4px 16px;padding:8px 0;border-bottom:1px solid color-mix(in oklab,var(--on-field) 12%,transparent)}
.ablauf-textfassung li:last-child{border-bottom:0}
.ablauf-textfassung time{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;color:var(--on-field-3)}
.ablauf-textfassung p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--on-field-2)}
.ablauf-im-bild{display:block;margin-top:2px;font-size:var(--fs-sm);font-style:italic;color:var(--on-field-3)}
@media (max-width:520px){.ablauf-textfassung ol{padding-left:0}}
@media (prefers-reduced-motion:reduce){.ablauf-textfassung>summary::before{transition:none}}
/* Handy: Das Standbild ist nur gut 320px breit; in voller Groesse deckte der
   Knopf drei Viertel davon ab. 44px bleibt als Trefferflaeche. */
@media (max-width:520px){
  .ablauf-video-start{min-height:44px;gap:8px;padding:4px 14px 4px 4px;margin:10px;font-size:var(--fs-sm)}
  .ablauf-video-icon{width:32px;height:32px}
  .ablauf-video-icon svg{width:12px;height:14px}
  .ablauf-video-dauer{font-size:var(--fs-micro)}
  /* "mit Ton" bleibt im Namen des Knopfs; sichtbar kostet es hier ein
     Viertel des Standbilds. Auf dem Handy startet das Video im Vollbild. */
  .ablauf-video-ton{display:none}
}
@media (prefers-reduced-motion:reduce){.ablauf-video-start{transition:none}.ablauf-video-start:active{transform:none}.ablauf-video-start.ist-laden .ablauf-video-icon::before{animation-duration:2.4s}}

/* Beispielkarte "Stellenanalyse": echter Text statt Bild, damit Suche,
   Vorlesen und Uebersetzung sie lesen. Karte auf --surface mit den
   --text-Tinten; einzige KI-Farbe ist der Knopf "Uebernehmen" und der
   gestrichelte Rand der Luecken. Die Knoepfe sind Abbild (aria-hidden). */
#ablauf .analyse{margin:clamp(44px,6vw,72px) 0 0}
#ablauf .analyse figcaption{margin-top:14px;font-size:var(--fs-micro);color:var(--on-field-2)}
.analyse-karte{background:var(--surface);color:var(--text-1);border-radius:var(--r-card);box-shadow:var(--shadow-pop);overflow:hidden}
.analyse-leiste{display:flex;align-items:center;gap:14px;padding:11px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-micro);color:var(--text-2)}
.analyse-inhalt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.analyse-stelle,.analyse-cv{padding:clamp(20px,3vw,32px);min-width:0}
.analyse-cv{border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.analyse-titelzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 16px;margin-bottom:24px}
/* Seit 2026-10-07 (Entscheidung C, 17px): bei 200 % Schrift sonst Ueberlauf. */
.analyse-titelzeile>div{min-width:0}
.analyse-titel{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,2vw,1.5625rem);line-height:1.15;letter-spacing:-.01em;color:var(--text-1);text-wrap:balance}
.analyse-meta{margin:0;font-size:var(--fs-sm);color:var(--text-2)}
.analyse-treffer{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:var(--r-pill);background:var(--field);color:var(--on-field);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.analyse-label{margin:0 0 10px;font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--accent-strong)}
.analyse-label--luecke{margin-top:22px;color:var(--text-2)}
/* max-width und overflow-wrap seit 2026-10-07 Nacht: bei 200 % Schrift ragte
   "Terminkoordination" 3 px aus der Karte. */
.analyse-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.analyse-chips li{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;padding:6px 13px;border-radius:var(--r-pill);background:var(--accent-dim);color:var(--text-1);font-size:var(--fs-sm);line-height:1.3}
.analyse-chips--luecke li{padding:5px 12px;background:transparent;border:1px dashed var(--control-off)}
.analyse-alt,.analyse-neu{margin:0;padding:10px 14px;border-radius:var(--r-tile);font-size:var(--fs-sm);line-height:1.45;color:var(--text-1)}
/* Farben seit Critique Runde 10 (Variante A): Orange heisst KI. Der Vorschlag
   der KI ist warm, die alte Zeile und die Luecken neutral. */
.analyse-alt{background:var(--surface-2);color:var(--text-2)}
.analyse-alt del{text-decoration-color:var(--text-3)}
.analyse-neu{background:var(--brand-warm-dim);box-shadow:inset 0 0 0 1px var(--accent-2-line)}
.analyse-neu ins{text-decoration:none}
/* Seit 2026-10-07 Nacht ein Satz statt zwei Muster-Knoepfen. */
.analyse-entscheid{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-1)}
/* Zuschnitt wie in V2 (seit 2026-10-07 spaet): Abdeckung vorher in Petrol,
   der Zugewinn durch die KI in Orange (Orange heisst KI). */
.analyse-abdeckung{display:flex;flex-direction:column;gap:10px}
.analyse-abdeckung-kopf{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;font-size:var(--fs-sm);color:var(--text-2)}
.analyse-abdeckung-kopf strong{font-family:var(--font-mono);font-weight:var(--fw-semibold);color:var(--text-1);white-space:nowrap}
.analyse-balken{position:relative;height:8px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.analyse-balken span{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill)}
.analyse-balken-ki{width:80%;background:var(--accent-2)}
.analyse-balken-vorher{width:40%;background:var(--field)}
.analyse-gehalt{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:var(--fs-sm);color:var(--text-2)}
.analyse-gehalt strong{color:var(--text-1);font-weight:var(--fw-semibold)}
@media (max-width:860px){
  .analyse-inhalt{grid-template-columns:1fr}
  .analyse-cv{border-left:0;border-top:1px solid var(--line)}
}

/* ── Funktionen: zwei Flaechen ──────────────────────────────────────────
   Seit 2026-10-07 (Audit Paket 3, A-K-7): weisse Karten (.fcard--plain),
   die Fotokarte auf Petrol (.fcard--feld). Orange markiert nur, wo die KI
   arbeitet (.ki-marke). Gemessen (hell): --text-2 auf --surface 7,4:1,
   --brand-warm-deep auf --brand-warm-dim 6,2:1, --on-field-2 auf --field
   6,0:1. Bis dahin fuenf Toene (Orange- und Teal-Familie). */
/* Seit Critique Runde 5 (2026-10-07, polish) ohne Label ueber der
   Ueberschrift: die Reiter "Funktionen" und "Datenschutz" standen nur an 2
   von 9 Abschnitten; die Ueberschriften tragen sich allein. */
/* Sechs Karten in 3 x 2 ueber die volle Containerbreite. Gleich hohe
   Karten je Reihe kommen aus dem Grid (stretch); der Versatz jeder zweiten
   Karte aus lp-page.css (.fgrid) faellt weg, in drei Spalten ergaebe er
   ein Zickzack statt Reihen. lp-page.css setzt unter 980px eine Spalte mit
   !important; die ID-Spezifitaet hier haelt dort zwei Spalten, erst unter
   620px wird es eine. */
/* Abschnittspolster aus den Rhythmus-Tokens oben (vorher inline). */
#problem{padding:var(--abschnitt-xl) 0 var(--abschnitt-m)}
#erweiterung{padding:var(--abschnitt-l) 0 var(--abschnitt-m)}
#funktionen{padding:var(--abschnitt-m) 0 var(--abschnitt-l)}
#preise{padding:var(--abschnitt-s) 0 var(--abschnitt-l)}
#faq{padding:var(--abschnitt-s) 0 var(--abschnitt-xl)}
#warteliste{padding:0 0 var(--abschnitt-s)}
#funktionen .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#funktionen .fgrid>:nth-child(even){margin-top:0}
@media (max-width:980px){#funktionen .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){#funktionen .fgrid{grid-template-columns:minmax(0,1fr)!important}}
/* Wischreihe (seit Critique 2026-10-09, dritter Lauf, distill A): am Handy
   steht der Nachweis voll, die fuenf anderen Karten liegen nebeneinander
   (vorher 2.304 px untereinander). Ab 621px loest sich die Huelle auf, die
   Karten bleiben Teil des Rasters. Tab-Halt und Name setzt lp-start.js. */
#funktionen .fstreifen{display:contents}
#funktionen .fstreifen-hinweis{display:none}
#funktionen .fstreifen-stand{display:none}
@media (max-width:620px){
  #funktionen .fstreifen{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter,24px));padding:4px var(--gutter,24px) 16px;scroll-padding-inline:var(--gutter,24px)}
  #funktionen .fstreifen>.fcard{scroll-snap-align:start;margin:0}
  #funktionen .fstreifen:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  #funktionen .fstreifen-hinweis{display:block;margin:0;font-size:var(--fs-sm);color:var(--text-2)}
  /* Positionsanzeige unter der Reihe: rueckt an die Karten heran (das
     Polster der Reihe unten traegt schon 16px). */
  #funktionen .fstreifen-stand:not([hidden]){display:block;margin:-12px 0 0;font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
  #funktionen .fstreifen-nr{color:var(--text-1);font-weight:var(--fw-semibold)}
}
/* minmax(0,1fr) statt 1fr seit 2026-10-07 (Audit Runde 3): bei 200 % Schrift
   zog das laengste Wort die Spalte 24px ueber den Rand. break-word bricht
   nur Woerter, die sonst ueberlaufen; bei normaler Schrift aendert sich nichts. */
#funktionen .fcard,:is(#ki-offen,.sub-ki) .ki-spalte,#faq{overflow-wrap:break-word}
#funktionen .fcard{min-height:188px;justify-content:flex-start;gap:10px;padding:clamp(22px,2.4vw,28px);border:1px solid transparent;border-radius:var(--r-card)}
#funktionen .fcard .big{font-weight:400;text-wrap:balance}
/* Karte 4 mit Foto (seit 2026-09-29, Abend). Ab 981px 2 x 2 Zellen:
   1 2 3 / 4 4 5 / 4 4 6, drei volle Reihen, Reihenfolge unveraendert.
   Foto links ueber die volle Kartenhoehe (object-fit:cover auf das
   4:5-Motiv), Text rechts unten. Die Karte selbst hat kein Polster, das
   Foto laeuft bis an den Radius; der Text bekommt das Kartenpolster. */
#funktionen .fcard--foto{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:0;gap:0;overflow:hidden}
/* Das Bild liegt absolut im picture: so bestimmt es die Reihenhoehe nicht
   mit (ein 4:5-Foto in voller Breite wuerde die Reihen sonst strecken). */
/* Die figure ist eine Spalte: oben das Foto (fuellt den Rest), darunter
   die Bildzeile auf der Kartenflaeche. */
.fcard--foto .fcard-bild{display:flex;flex-direction:column;margin:0;min-height:0}
.fcard--foto .fcard-bild picture{display:block;position:relative;flex:1 1 auto;min-height:0}
.fcard--foto .fcard-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* --on-field-2 auf --field, siehe Messwerte oben. */
.fcard--foto .bild-hinweis{margin:0;padding:8px 14px 10px;color:var(--on-field-2)}
.fcard--foto .fcard-text{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(22px,2.6vw,36px)}
/* Seit 2026-10-07 dieselbe Titelgroesse wie die anderen Karten (vorher
   bis 34px gegen 24px). */
/* Tablet (zwei Spalten): seit Critique Runde 7 (2026-10-07 Nacht) gehen der
   Nachweis (Karte 1) und die Fotokarte (Karte 6) ueber die volle Breite:
   1 1 / 2 3 / 4 5 / 6 6. Vorher Karte 3 und 4 (1 2 / 3 3 / 4 4 / 5 6). Die Fotokarte
   steht dort nur eine Reihe hoch, Foto links, Hoehe aus dem Text plus
   Mindesthoehe. */
@media (max-width:980px){
  #funktionen .fcard--nachweis{grid-column:span 2}
  #funktionen .fcard--foto{grid-row:auto;min-height:340px}
}
/* Tablet: der Nachweis volle Breite, Titel und Text links, Blatt rechts.
   Hoehe aus dem Inhalt. */
@media (min-width:621px) and (max-width:980px){
  #funktionen .fcard--nachweis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,40px);align-items:start;min-height:0}
  #funktionen .fcard--nachweis>.nachweis-blatt{grid-column:2;grid-row:1 / span 2;margin:0}
}
/* Handy (eine Spalte): Foto oben, 4:3-Ausschnitt, Text darunter. */
@media (max-width:620px){
  #funktionen .fcard--nachweis,#funktionen .fcard--foto{grid-column:auto}
  #funktionen .fcard--foto{grid-template-columns:1fr;min-height:0}
  .fcard--foto .fcard-bild picture{flex:none;aspect-ratio:4/3}
}
.fcard--plain{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-card)}
.fcard--plain .big{color:var(--text-1)}
.fcard--plain p{color:var(--text-2)}
/* Fotokarte auf Petrol, KI-Marke statt Orange-Flaeche (seit 2026-10-07). */
.fcard--feld{background:var(--field)}
.fcard--feld .big{color:var(--on-field)}
.fcard--feld p{color:var(--on-field-2)}
.ki-marke{align-self:flex-start;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-medium);background:var(--brand-warm-dim);color:var(--brand-warm-deep)}
.fcard--feld .ki-marke{background:var(--brand-warm);color:var(--on-warm)}

/* ══ Abschnitte 2: Vergleich, Fuer wen, Kontrolle, KI, FAQ, CTA ════
   Dieselben Bauformen wie in "Abschnitte 1": Karten 24px auf --card, innere
   Flaechen als 16px-Kacheln auf --tile, die dunkle Feldflaeche wie die Karte
   "Antworten" (Screenshot 1), die Tabelle wie "Meine Bewerbungen"
   (Screenshot 2). Ueberschriften kommen aus der gemeinsamen h2-Regel oben. */

/* ── Vergleich: Tabelle als Karte, Kopf klein, gepunktete Zeilen ───────── */
/* lp-page.css gab der eigenen Spalte eine Flaeche und der Gegenspalte eine
   zweite. In der App traegt keine Spalte eine Flaeche; markiert wird ueber
   Tinte (Kopf ohne Punkt, Inhalt in --text-1), die
   Flaeche --accent-dim gehoert dem Zeilen-Hover. border-collapse:separate,
   weil nur so Radius und Rundung der Hover-Zeile greifen; die Beschriftung
   (caption) steht ausserhalb der Kartenflaeche. */
:is(#vergleich,.sub-vergleich) .vgl{border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow-app);padding:8px 12px 12px}
:is(#vergleich,.sub-vergleich) .vgl th,:is(#vergleich,.sub-vergleich) .vgl td{background:transparent;border-top:1px dotted var(--line-strong);border-radius:0;transition:background-color .15s var(--ease-app)}
:is(#vergleich,.sub-vergleich) .vgl thead th,:is(#vergleich,.sub-vergleich) .vgl thead td{border-top:0;border-bottom:1.5px dotted var(--line-strong);padding-top:14px;font-size:.8125rem;font-weight:400;color:var(--text-2)}
:is(#vergleich,.sub-vergleich) .vgl thead .vgl-uns{background:transparent;color:var(--accent-strong);font-weight:var(--fw-medium)}
:is(#vergleich,.sub-vergleich) .vgl tbody tr:first-child th,:is(#vergleich,.sub-vergleich) .vgl tbody tr:first-child td{border-top:0}
:is(#vergleich,.sub-vergleich) .vgl tbody .vgl-uns{color:var(--text-1);font-weight:var(--fw-medium)}
:is(#vergleich,.sub-vergleich) .vgl tbody tr:hover th,:is(#vergleich,.sub-vergleich) .vgl tbody tr:hover td{background:var(--accent-dim)}
:is(#vergleich,.sub-vergleich) .vgl tbody tr:hover th{border-radius:var(--r-tile) 0 0 var(--r-tile)}
:is(#vergleich,.sub-vergleich) .vgl tbody tr:hover td:last-child{border-radius:0 var(--r-tile) var(--r-tile) 0}
@media (max-width:620px){
  :is(#vergleich,.sub-vergleich) .vgl{padding:4px 4px 8px}
  :is(#vergleich,.sub-vergleich) .vgl thead th{font-size:var(--fs-micro)}
}
@media (prefers-reduced-motion:reduce){:is(#vergleich,.sub-vergleich) .vgl th,:is(#vergleich,.sub-vergleich) .vgl td{transition:none}}

/* ── Preise: Zeitleiste plus eine Karte (seit 2026-10-07, P2) ─────────────
   Seit der Critique vom 2026-10-09 (Variante B) traegt die Karte fuer neue
   Konten die vier Preise als Reihe, die Erklaerung des Passes und was ohne
   Pass bleibt. Leistungen und Laufzeiten im Detail stehen auf /kaufen/. */
#preise .preis-kurz{margin-top:clamp(24px,3vw,32px);padding:clamp(20px,2.6vw,28px)}
#preise .preis-kurz p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-1)}
#preise .preis-kurz strong{font-weight:var(--fw-semibold)}
#preise .preis-kurz .preis-hinweis{margin-top:6px;font-size:var(--fs-micro);line-height:1.4;color:var(--text-2)}
#preise .preis-kurz .preis-titel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px}
#preise .preis-kurz .preis-titel span{font-size:var(--fs-sm);color:var(--text-2)}
#preise .preis-kurz .preis-frei{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#preise .preis-kurz .preis-frei span{display:block;max-width:72ch}
/* Vier Preise als Reihe, Haarlinien statt Kaesten. Unter 640px zwei mal zwei. */
#preise .preis-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border-block:1px solid var(--line)}
#preise .preis-reihe li{display:grid;align-content:start;gap:4px;padding:16px clamp(16px,2vw,24px) 16px 0}
#preise .preis-reihe li+li{padding-left:clamp(16px,2vw,24px);border-left:1px solid var(--line)}
#preise .preis-reihe b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.625rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text-1);white-space:nowrap}
#preise .preis-reihe span{font-size:var(--fs-sm);line-height:1.4;color:var(--text-2)}
#preise .preis-reihe em{font-style:normal;font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--accent-strong)}
@media (max-width:640px){
  #preise .preis-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  #preise .preis-reihe li:nth-child(3){padding-left:0;border-left:0}
  #preise .preis-reihe li:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Zeitleiste ueber der Preiszeile (seit 2026-10-07): drei Stationen auf einer
   Haarlinie, die Station "Jetzt" traegt die Linie in Petrol. Unter 760px
   untereinander, die Linie bleibt oben (kein farbiger Balken links). Keine
   Nummern, die Reihenfolge tragen die Namen der Stationen. */
#preise .preis-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);
  list-style:none;margin:28px 0 36px;padding:0}
#preise .preis-weg li{display:grid;gap:6px;align-content:start;padding-top:14px;border-top:2px solid var(--line-strong)}
#preise .preis-weg li:first-child{border-top-color:var(--accent)}
#preise .preis-weg strong{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-1)}
#preise .preis-weg span{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);max-width:42ch}
@media (max-width:760px){#preise .preis-weg{grid-template-columns:1fr;gap:20px}}
/* Ein Knopf unter beiden Karten statt einem in der Start-Pass-Karte. */
#preise .preis-fuss,#erweiterung .erweiterung-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
#preise .preis-fuss .pill,#erweiterung .erweiterung-fuss .pill{min-height:48px;font-family:var(--font-sans)}
/* Knoepfe im Inhalt so gross wie Hero und Formular (Critique 2026-10-09,
   sechster Lauf). Die Kopfzeile bleibt auf allen Seiten in Navigationsgroesse. */
.hs-abschluss .pill,#preise .preis-fuss .pill{font-size:1rem;font-weight:var(--fw-semibold)}
#preise .preis-fuss p,#erweiterung .erweiterung-fuss p{margin:0;max-width:62ch;color:var(--text-2)}
/* Browser-Erweiterung (2026-10-23): drei Punkte mit Haarlinie wie die Zusagen
   unter #kontrolle, ohne Nummern; die Reihenfolge steht im Text. */
#erweiterung .erweiterung-schritte{margin:0;gap:clamp(24px,3vw,40px)}
#erweiterung .erweiterung-schritte li{border-top:1px solid var(--line);padding-top:18px}
#erweiterung .erweiterung-fuss .pill{font-size:1rem;font-weight:var(--fw-semibold)}
#erweiterung .erweiterung-schritte h3{margin:0 0 8px;font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--text-1);text-wrap:balance}
#erweiterung .erweiterung-schritte p{margin:0;font-size:var(--fs-body);color:var(--text-2)}

/* ── Kontrolle: heller Abschnitt ───────────────────────────────────────── */
/* Seit 2026-09-29 ohne .band-field: Petrol traegt jetzt den Ablauf, Orange
   die KI direkt davor. Die Zusagen stehen auf dem Seitengrund mit den
   hellen Tinten; .zusage-Grundregeln in lp-page.css sind fuer die
   Feldflaeche geschrieben und werden hier, nur unter #kontrolle, umgestellt.
   Das Siegel behaelt seinen weissen Traeger mit Schatten. */
#kontrolle{padding:clamp(56px,7vw,88px) 0 72px}
#kontrolle .zusage li{border-top-color:var(--line);color:var(--text-2)}
#kontrolle .zusage :is(strong,h3){color:var(--text-1)}


/* ── KI: zwei Karten, die zweite mit schraffiertem Rand ────────────────── */
/* Die Schraffur ist das Motiv der App fuer "Ohne Antwort" (Screenshot 1):
   hier markiert sie die Grenze, also das, was die KI nicht tut. Umgesetzt als
   zweilagiger Hintergrund: innen deckend --surface (padding-box), aussen die
   Streifen im 8px-Rand (border-box). */
#ki-offen{padding:24px 0 72px}
:is(#ki-offen,.sub-ki) .ki-ledger{gap:16px}
:is(#ki-offen,.sub-ki) .ki-spalte{border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px)}
:is(#ki-offen,.sub-ki) .ki-ja{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--shadow-app)}
:is(#ki-offen,.sub-ki) .ki-ja :is(h2,h3){color:var(--accent-strong)}
:is(#ki-offen,.sub-ki) .ki-ja li{color:var(--text-2)}
:is(#ki-offen,.sub-ki) .ki-ja li::before{color:var(--accent-strong)}
:is(#ki-offen,.sub-ki) .ki-nein{border:8px solid transparent;box-shadow:none;padding:clamp(14px,1.8vw,24px);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    repeating-linear-gradient(135deg,var(--hatch) 0 1.5px,transparent 1.5px 7px) border-box}

/* ── KI offengelegt auf voller Orangeflaeche (seit 2026-09-29) ──────────── */
/* Orange ist der KI-Akzent, deshalb steht der Abschnitt, der sagt, was die
   KI tut und was nicht, auf --accent-2. Jede Tinte ist --on-accent-2 (dunkel,
   5,87:1); Weiss erreicht auf Orange nur 2,9:1. Die beiden Spalten liegen als
   helle Karten darauf, die Schraffur der zweiten entfaellt hier (auf Orange
   war sie Laerm). Der Fokusring wechselt auf --on-accent-2, Teal auf Orange
   waere kaum sichtbar.
   Seit 2026-09-29 (Unterseiten) gilt .band-ki auch ohne #ki-offen: /ki/
   stellt denselben Ledger auf dasselbe Band. Jede Regel steht als Liste mit
   dem alten #ki-offen-Selektor zuerst, damit die Startseite dieselbe
   Spezifitaet und damit dasselbe Ergebnis behaelt; der Kartenblock nutzt
   :is(#ki-offen,.band-ki), das zaehlt wie eine ID und schlaegt die
   .sub-ki-Regeln weiter oben (Schraffur, Teal-Titel). */
#ki-offen.band-ki,.band-ki{background:var(--accent-2);color:var(--on-accent-2);padding:clamp(56px,7vw,88px) 0}
#ki-offen.band-ki h2,#ki-offen.band-ki>.wrap>.sub,.band-ki h2,.band-ki>.wrap>.sub,.band-ki>.wrap>.abschnitt-kopf :is(.sub,.ki-leitsatz){color:var(--on-accent-2)}
#ki-offen.band-ki>.wrap>.sub a,.band-ki>.wrap>.sub a,.band-ki>.wrap>.abschnitt-kopf .sub a{color:var(--on-accent-2);text-decoration:underline;text-underline-offset:3px}
#ki-offen.band-ki>.wrap>.sub a:hover,.band-ki>.wrap>.sub a:hover,.band-ki>.wrap>.abschnitt-kopf .sub a:hover{text-decoration-thickness:2px}
/* Kopf von #ki-offen seit Critique Runde 4 (2026-10-07) im Muster von
   .abschnitt-kopf: Ueberschrift und Leitsatz links, Unterzeile rechts.
   Vorher Inline-Style am Leitsatz und eine leere Orangeflaeche rechts. */
/* Seit Critique Runde 8 in der Ueberschriften-Schrift (19px, wie die
   Titel in #kontrolle): halbfett in 17px hob er sich kaum vom Text ab. */
#ki-offen .abschnitt-kopf .ki-leitsatz{margin:12px 0 0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-tight)}
#ki-offen .abschnitt-kopf>.sub{margin:0}
#ki-offen.band-ki a:focus-visible,.band-ki a:focus-visible{outline:2px solid var(--on-accent-2);outline-offset:3px;border-radius:var(--r-sm);box-shadow:none}
:is(#ki-offen,.band-ki) .ki-ja,:is(#ki-offen,.band-ki) .ki-nein{background:var(--surface);border:1px solid transparent;box-shadow:var(--shadow-card);padding:clamp(22px,2.6vw,32px)}
:is(#ki-offen,.band-ki) .ki-spalte :is(h2,h3){color:var(--text-1)}
:is(#ki-offen,.band-ki) .ki-spalte li{color:var(--text-2)}
/* Seit Critique 2026-10-09 (dritter Lauf, Flaeche A): #ki-offen der
   Startseite als getoente Flaeche statt vollem Orange. Der Abschnitt, der
   KI-Misstrauen abbauen soll, war die lauteste Flaeche der Seite. Orange
   traegt nur noch der Leitsatz. /ki/ (.band-ki ohne #ki-offen) bleibt. */
#ki-offen.band-ki{background:var(--accent-2-dim);color:var(--text-1)}
#ki-offen.band-ki h2{color:var(--text-1)}
#ki-offen.band-ki>.wrap>.abschnitt-kopf .ki-leitsatz{color:var(--accent-2-strong)}
#ki-offen.band-ki>.wrap>.abschnitt-kopf .sub{color:var(--text-2)}
#ki-offen.band-ki>.wrap>.abschnitt-kopf .sub a{color:var(--accent-2-strong)}

/* ── FAQ: Fragen als Kacheln, runder Plus-Knopf rechts ─────────────────── */
/* Die weisse Sammelkarte faellt weg (Kacheln in einer Karte waeren
   geschachtelte Karten); jede Frage ist eine eigene 16px-Kachel. Das Zeichen
   rechts ist der 40px-Rundknopf der App (".go"), hier mit Plus, das sich beim
   Oeffnen zum Kreuz dreht. Das Plus besteht aus zwei Verlaufs-Strichen, damit
   die Farbe aus Token kommt. */
:is(#faq,.faq-liste) .card24{background:transparent;box-shadow:none;border-radius:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
:is(#faq,.faq-liste) details.faq{background:var(--tile);border:0;border-radius:var(--r-tile)}
:is(#faq,.faq-liste) details.faq>summary{padding:16px 16px 16px 20px;border-radius:var(--r-tile);font-family:var(--font-display);font-weight:400;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.45}
/* Seit 2026-10-07: Die Frage ist anonymes Flex-Kind der summary und haelt die
   Breite ihres laengsten Worts; break-word aus lp.css hilft dort nicht. anywhere
   zaehlt fuer die Mindestbreite (200 % Schrift: "Initiativbewerbungen?"). */
:is(#faq,.faq-liste) details.faq>summary{overflow-wrap:anywhere}
:is(#faq,.faq-liste) details.faq>summary:focus-visible{border-radius:var(--r-tile)}
:is(#faq,.faq-liste) details.faq>summary::after,:is(#faq,.faq-liste) details.faq[open]>summary::after{
  width:40px;height:40px;margin:0;border:1px solid var(--line);border-radius:var(--r-pill);
  background:linear-gradient(var(--text-1),var(--text-1)) center/13px 1.5px no-repeat,
    linear-gradient(var(--text-1),var(--text-1)) center/1.5px 13px no-repeat,var(--surface);
  transform:none;transition:transform .3s var(--ease-app),background-color .18s var(--ease-app)}
:is(#faq,.faq-liste) details.faq>summary:hover::after{border-color:var(--accent);
  background:linear-gradient(var(--on-accent),var(--on-accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--on-accent),var(--on-accent)) center/1.5px 13px no-repeat,var(--accent)}
:is(#faq,.faq-liste) details.faq[open]>summary::after{transform:rotate(45deg)}
:is(#faq,.faq-liste) details.faq p{margin:0;padding:0 20px 20px;max-width:60ch}
:is(#faq,.faq-liste) details.faq p a{color:var(--accent-strong)}
@media (prefers-reduced-motion:reduce){:is(#faq,.faq-liste) details.faq>summary::after,:is(#faq,.faq-liste) details.faq[open]>summary::after{transition:none}}

/* ── Warteliste: Karte mit Bildhintergrund, Pillen-Felder ──────────────── */
/* Alle #warteliste-Regeln stehen unter body:has(#top.stage): /beta/ traegt
   ebenfalls id="warteliste" (Formular .beta-form) und bekaeme sonst das
   CTA-Bild und die grosse h2 der Startseite (Runde 3 C). Die Pillen-Felder,
   der 48px-Knopf und die Statuskachel gelten per erweitertem Selektor auch
   fuer #beta-form auf /beta/ (Runde 3 D, Rest in lp-sub.css). */
/* Seit Critique Runde 7 (2026-10-07 Nacht) ohne Hintergrundbild; das
   Wellenbild und der Schleier sind entfernt. */
body:has(#top.stage) #warteliste .card24{
  position:relative;border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow-app);
  padding:clamp(28px,4.4vw,56px);
  background-color:var(--surface);
}
body:has(#top.stage) #warteliste .lp-waitlist .ds-field,#beta-form .ds-field{min-height:48px;padding:0 20px;border:1px solid var(--control-off);border-radius:var(--r-field);background:var(--surface)}
body:has(#top.stage) #warteliste .lp-waitlist .ds-field:focus-visible,#beta-form .ds-field:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring-on-surface)}
/* Knoepfe auf dieselbe 48px-Pille wie die Felder. <button> erbt die Schrift
   nicht (fiel auf Arial zurueck), daher die Schrift ausdruecklich. */
/* border-radius kommt jetzt aus der allgemeinen .pill-Regel oben, hier nur
   noch Hoehe und Schrift. */
/* border:0 und cursor seit Critique Runde 8 (2026-10-07 Nacht): der <button>
   trug sonst den Standardrand des Browsers (2px outset). */
body:has(#top.stage) #warteliste .wl-row .pill,#beta-form .beta-submit-row .pill{min-height:48px;font-family:var(--font-sans);border:0;cursor:pointer}
/* Absende-Knopf so gross wie der Hero-Knopf, am Handy volle Breite (seit
   Critique 2026-10-09, vierter Lauf: die Hauptaktion hatte die kleinste Pille). */
#warteliste .wl-row .pill{font-size:1rem;font-weight:var(--fw-semibold)}
@media (max-width:620px){#warteliste .wl-row .pill{width:100%}}
/* lp.css .lp-waitlist>label (display:block) schlaegt .wl-consent aus
   lp-page.css an Spezifitaet; das Kaestchen stand dadurch im Textfluss. */
body:has(#top.stage) #warteliste .wl-consent{display:grid}
body:has(#top.stage) #warteliste .wl-row .pill-line{background:var(--surface)}
body:has(#top.stage) #warteliste .wl-status,#beta-form #beta-error{border-radius:var(--r-tile)}
/* Fehler am Feld (lp-form.js, 2026-10-07). Die Feldregeln oben setzen den
   Rand mit hoeherer Spezifitaet als components.css, daher hier noch einmal
   --danger. Die Meldung traegt Text und Farbe, Farbe allein ist kein Signal. */
body:has(#top.stage) #warteliste .lp-waitlist .ds-field[aria-invalid="true"],#beta-form .ds-field[aria-invalid="true"],#kontakt-form .ds-field[aria-invalid="true"]{border-color:var(--danger)}
.feld-fehler{margin:0 0 10px;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.4;color:var(--danger-strong)}
.wl-grid .feld-fehler{margin-top:-6px}
/* iOS zoomt beim Fokus in jedes Feld unter 16px. --fs-body ist 15.5px. */
.ds-field,.lp-waitlist .ds-field,#beta-form .ds-field{font-size:max(16px,var(--fs-body))}
/* Naechste Schritte nach der Anmeldung (lp-start.js), unter der Meldung. */
.wl-status .wl-weiter{display:block;margin-top:6px}
/* Adresse in der Meldung: lange Adressen brechen statt zu ueberlaufen. */
.wl-status strong{overflow-wrap:anywhere}
/* Korrekturweg nach dem Absenden (lp-start.js). */
.wl-korrektur{margin:12px 0 0}
.wl-korrektur .pill{font-family:var(--font-sans);cursor:pointer}
/* Seit Critique 2026-10-09 (sechster Lauf): Satz zur ersten Adresse unter dem Knopf. */
.wl-korrektur-satz{display:block;margin-top:8px;font-size:var(--fs-sm);line-height:1.45;color:var(--text-2)}
/* Beim Senden nur fuer Screenreader: der Knopf zeigt "Wird gesendet",
   die Statuszeile traegt die Ansage und den Fokus (lp-start.js). */
.wl-status[data-art="laeuft"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Nach Erfolg nur noch die Meldung mit der Adresse statt grauer Felder;
   "Andere Adresse eintragen" holt sie zurueck. */
.lp-waitlist.ist-gesendet .wl-grid,body:has(#top.stage) #warteliste .lp-waitlist.ist-gesendet .wl-consent,.lp-waitlist.ist-gesendet .wl-row{display:none}
.lp-waitlist.ist-gesendet .wl-status{margin-top:4px}
/* Tippfehler-Hinweis zur Mail-Domain (lp-form.js zeigeTipp). Der Knopf
   sieht aus wie ein Link im Satz, mit 24 px Hoehe als Ziel. */
.feld-tipp{margin:0 0 10px;font-size:var(--fs-sm);line-height:1.4;color:var(--text-1)}
.wl-grid .feld-tipp{margin-top:-6px}
.feld-tipp button{display:inline-flex;align-items:center;min-height:24px;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:var(--fw-semibold);color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere}
.feld-tipp button:hover{text-decoration-thickness:2px}

/* ── Fusszeile: Seitenverlauf statt Feldflaeche ────────────────────────── */
/* Vorher stand die Fusszeile inline auf --field; jetzt traegt die Klasse
   .site-foot die Optik. --page-b ist die helle bzw. dunkle Endfarbe des
   Seitenverlaufs, die Tinten sind die Standard-Tinten. Spaltentitel in
   Mono wie die Zeitmarken der App ("09:00"), ohne Versalien. */
footer.site-foot{position:relative;overflow:hidden;background:var(--page-b);padding:48px 0 40px}
footer.site-foot .card24{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow-app);padding:32px clamp(24px,4vw,52px)}
/* --text-2 statt --text-3: 12px auf der Karte ueber der Skyline mass nur
   4,17:1 (Audit 2026-10-06). */
footer.site-foot .gfoot h2{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:400;color:var(--text-2);margin:0 0 6px}
footer.site-foot a{color:var(--text-2)}
footer.site-foot a:hover{color:var(--text-1)}
/* Die Zeile traegt seit 2026-09-29 auch den Hinweis auf die KI-generierte
   Skyline im Hintergrund (docs/ki-bilder-kennzeichnung-2026-09-29.md);
   der Mittelpunkt dazwischen ist aria-hidden. Farbe --text-1 statt
   --text-2 wie beim Hero-Hinweis: die Zeile liegt auf der Skyline, dort
   kam --text-2 im unguenstigsten Pixel nur auf rund 4,45:1. */
.site-foot-note{margin:24px 0 0;text-align:center;font-size:var(--fs-micro);color:var(--text-1)}

/* Runde 2: Schritte-Bild -----------------------------------------------
   Ersetzt den fruehren Ambient-Loop in #ablauf durch ein statisches Bild.
   Der Rahmen
   traegt keinen eigenen Schatten mehr, das Bild bringt seinen Hintergrund
   schon mit; volle Breite des bisherigen Video-Containers, keine
   Verzerrung durch object-fit. */
#ablauf .schritte-bild{display:block;width:100%}
#ablauf .schritte-bild img{display:block;width:100%;height:auto;border-radius:var(--r-card)}

/* ── Lesetext mindestens --fs-body (Runde 4 F) ─────────────────────────────
   Vorher lief echter Lesetext (Absaetze in Karten, Bildunterschriften der
   Ansichten, Schritte, Listen in Karten, Tabellenzellen des Kurzprofils)
   auf --fs-sm (13.5px). Labels, Metadaten, Tabellenkoepfe, Chips, die
   Formular-Hinweise und die Einwilligung bleiben klein. */
.stage-copy .hero-note,.reifegrad,
#kurzprofil td,
.fcard p,.fcard .sub,
.lohnt-panel p,.lohnt-panel li,
#kontrolle .zusage li,
#ki-offen li{font-size:var(--fs-body)}

/* ── Einwilligung zur Reichweitenmessung ────────────────────────────────────
   Karte aus lp-consent.js, unten rechts, auf dem Handy mit 16px Rand.
   Sieht aus wie die anderen App-Karten (.app-card steht im Markup).
   Der Footer-Knopf ist optisch ein Footer-Link. */
.einwilligung{background:var(--surface);position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:520px;margin-left:auto;padding:20px 22px;box-sizing:border-box;animation:ew-ein var(--dur-fast) var(--ease)}
/* Ab 1024px schmaler (Critique Runde 10): mit 520px lag die Karte beim
   ersten Besuch bei 1280x800 ueber dem Hero-Knopf "Funktionen ansehen". */
@media (min-width:1280px){.einwilligung{max-width:400px}}
/* 1024 bis 1279px volle Breite (Critique Runde 11): mit 400px lag die Karte
   bei 1024x768 ueber "Funktionen ansehen"; breit ist sie flach genug und
   beginnt unter den Hero-Knoepfen. */
@media (min-width:1024px) and (max-width:1279px){.einwilligung{max-width:none}}
.einwilligung h2{font-family:var(--font-display);font-weight:400;font-size:1.375rem;line-height:1.25;color:var(--text-1);margin:0 0 8px}
.einwilligung h2:focus{outline:none}
.einwilligung h2:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-sm)}
.einwilligung p{margin:0 0 10px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.einwilligung .ew-aktuell{color:var(--text-1)}
.einwilligung a{color:var(--text-2);text-decoration:underline}
.einwilligung a:hover{color:var(--text-1)}
.einwilligung .ew-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.einwilligung .ew-knoepfe .pill{flex:1 1 140px;cursor:pointer;font-family:inherit}
.foot-knopf{display:block;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--text-2);padding:10px 0;font-size:var(--fs-sm)}
.foot-knopf:hover{color:var(--text-1)}
.foot-knopf.im-text{display:inline;max-width:100%;overflow-wrap:anywhere;padding:0;color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.foot-knopf.im-text:hover{color:var(--text-1)}
/* Nach .im-text, sonst gewinnt dessen display:inline bei gleicher Spezifitaet
   und der Knopf waere ohne JavaScript sichtbar, aber ohne Funktion. */
[data-einwilligung-oeffnen][hidden]{display:none}
.foot-knopf:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-sm)}
@keyframes ew-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.einwilligung{animation:none}}

/* 2026-09-29: zweifarbige Ueberschriften, Bauweise wie .ueber-hero-titel (lp-sub.css) */
.titel-teil{display:block}
.titel-akzent{display:block;color:var(--accent)}

/* Ratgeber-Links der Startseite (2026-09-29, SEO Stufe 2). Grund: die drei
   dezenten Textlinks stehen auf drei verschiedenen Flaechen (hell im
   Problem-Abschnitt, Orange in der Karte "Lebenslauf einmal hochladen.",
   Petrol in #ablauf). Teal-Tinte war auf Petrol und Orange nicht lesbar;
   deshalb erben sie die Farbe des umgebenden Textes, der auf jeder Flaeche
   schon den noetigen Kontrast hat, und tragen einen Unterstrich als Signal.
   Hier statt in lp-sub.css, weil die Startseite lp-sub.css nicht laedt. */
.ratgeber-link{margin:12px 0 0}
.ratgeber-link a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ratgeber-link a:hover{text-decoration-thickness:2px}
/* Trefferflaeche (seit 2026-10-07, Audit Paket 3): Polster oben und unten
   an der Inline-Box vergroessert die Klickflaeche auf rund 44px, ohne die
   Zeile zu verschieben (Inline-Polster wirkt nicht auf das Layout). */
.ratgeber-link a,#preise .preis-fuss p a{padding-block:10px}
.ratgeber-link a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-sm)}
#ablauf .ratgeber-link a:focus-visible{box-shadow:var(--focus-ring-on-field)}

/* Seit 2026-09-29 (SEO Stufe 2, Fix-Runde 1): Das Footer-Raster laeuft mit
   fuenf Gruppen per auto-fit; zwischen 700 und 900px wurde die Spalte
   schmaler als info@bewerbungsmanager.app, die Adresse ragte heraus.
   Seit Critique Runde 6 (2026-10-07) bricht die Adresse ueber <wbr> nach
   dem @ statt mitten im Wort ("...bewerbungsmanager.ap / p"); break-word
   greift nur noch, wenn ein Teil allein zu breit ist. */
footer.site-foot .gfoot a{overflow-wrap:break-word}

/* ── Barrierefreiheit (Audit 2026-10-07) ──────────────────────────────────
   1. Links im Fliesstext unterstrichen: die Grundregel im Designsystem
      (typography.css a{text-decoration:none}) nimmt jede Unterstreichung,
      Farbe allein unterschied FAQ-Links nur mit 1,02:1 vom Text
      (WCAG 1.4.1, Stufe A). Knoepfe (.pill) bleiben ohne. */
main p a:not(.pill),main label a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
main p a:not(.pill):hover,main label a:hover{text-decoration-thickness:2px}
/* Pfeil-Links am Absatzende waren am Handy 21 px hoch (Critique 2026-10-09,
   sechster Lauf). Innenabstand an einem Inline-Element vergroessert die
   Trefferflaeche, ohne die Zeilen zu verschieben. */
main p a:not(.pill):has(.arrow){padding-block:12px}
/* 1b. Seit 2026-10-07 (Audit Runde 3): Fliesstext-Links in --accent-strong.
      --accent lag auf dem Seitenverlauf (--page-b #D9EEF1) bei 4,07 bis
      4,57:1. Spezifitaet (0,0,2) mit :where(): schlaegt nur die Grundregel
      a{}; Baender (.band-ki, .ratgeber-link auf Petrol) behalten ihre Farbe. */
main :where(p,label) a:where(:not(.pill)){color:var(--accent-strong)}
/* 2. Fehlermeldung am Feld bleibt rot, auch als direktes Kind von
      .lp-waitlist (lp.css .lp-waitlist>p setzte sonst --text-2), und das
      Einwilligungs-Kaestchen zeigt den Fehler selbst. */
.lp-waitlist>p.feld-fehler{color:var(--danger-strong)}
input[type="checkbox"][aria-invalid="true"]{outline:2px solid var(--danger);outline-offset:2px}
/* 3. Fokus im Kontrastmodus (forced-colors): dort entfaellt box-shadow, die
      Fokusringe der Seite stehen auf outline:none plus box-shadow. */
@media (forced-colors:active){:focus-visible{outline:2px solid CanvasText!important;outline-offset:2px}}

/* ── Leiste zur Warteliste (P1, 2026-10-07) ──────────────────────────────
   Unter 680px fehlt der Knopf in der Kopfzeile (lp.css); zwischen Hero und
   Formular lagen dann acht Bildschirme ohne Weg zur Warteliste. Die Leiste
   klebt unten im Daumenbereich. lp-start.js setzt data-an="ja" nach dem
   Hero und "nein", solange #warteliste, Fusszeile oder Einwilligungskarte
   sichtbar sind. visibility nimmt den Link aus der Tab-Reihenfolge. */
.wl-leiste{display:none}
@media (max-width:680px){
  .wl-leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;
    padding:10px 16px max(10px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -1px 2px rgba(18,42,46,.06),0 -4px 12px -4px rgba(18,42,46,.14);
    transition:transform var(--dur-fast) var(--ease),visibility 0s linear 0s}
  .wl-leiste[data-an="nein"]{transform:translateY(110%);visibility:hidden;
    transition:transform var(--dur-fast) var(--ease),visibility 0s linear var(--dur-fast)}
  .wl-leiste p{margin:0;flex:1;min-width:0;font-size:var(--fs-sm);line-height:1.35;color:var(--text-2)}
  .wl-leiste strong{display:block;color:var(--text-1);font-weight:var(--fw-semibold)}
  .wl-leiste .pill{min-height:44px;flex:none}
}
@media (max-width:680px) and (prefers-reduced-motion:reduce){.wl-leiste,.wl-leiste[data-an="nein"]{transition:none}}
/* Absaetze unter der Ueberschrift in #warteliste standen ohne Abstand
   untereinander (.sub hat dort margin:0); seit P1 sind es drei. */
#warteliste .sub+.sub{margin-top:12px}
/* Fokus nicht hinter der Leiste (Audit Runde 3, WCAG 2.4.11): Solange die
   Leiste sichtbar ist, haelt der Browser beim Scrollen zum Fokus unten
   88px frei (Leiste 76px plus Luft). */
@media (max-width:680px){html:has(.wl-leiste[data-an="ja"]){scroll-padding-bottom:88px}}
/* Die Leiste springt seit 2026-10-09 auf #wl-form statt auf #warteliste:
   unter der Kopfzeile (64px) und etwas Luft liegt das Formular mit dem
   Absende-Knopf am Handy im Bild (Critique, Schritt 3). */
#wl-form{scroll-margin-top:84px}
/* Rechte Spalte in #warteliste (Audit Runde 3): Tuer, darunter drei Schritte
   nach dem Eintragen (das Logo dazwischen seit 2026-10-09 gestrichen). Gleiche Haarlinien wie die Preis-Zeitleiste, die erste
   Station in Petrol, keine Nummern. */
#warteliste .wl-seite{display:flex;flex-direction:column;gap:24px;align-items:stretch}
/* Seit 2026-10-07 (Entscheidung C, 17px): bei 200 % Schrift sonst Ueberlauf. */
#warteliste .wl-seite strong{min-width:0;overflow-wrap:anywhere}
#warteliste .wl-weg h3{margin:0 0 14px;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);color:var(--text-1)}
#warteliste .wl-weg ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}
#warteliste .wl-weg li{display:grid;gap:4px;padding-top:12px;border-top:2px solid var(--line-strong)}
#warteliste .wl-weg li:first-child{border-top-color:var(--accent)}
/* Nach dem Absenden ist Schritt 1 der aktuelle (lp-start.js, Critique
   2026-10-09, sechster Lauf): gleiche Farbe wie die Erfolgsmeldung. */
#warteliste .wl-weg li[aria-current="step"]{margin:0 -14px;padding:12px 14px 14px;border-top-color:var(--ok);background:var(--ok-dim);border-radius:0 0 var(--r-tile) var(--r-tile)}
#warteliste .wl-weg strong{color:var(--text-1);font-weight:var(--fw-semibold)}
#warteliste .wl-weg span{color:var(--text-2);line-height:var(--lh-body)}

/* Raster von #faq und #warteliste, bis 2026-10-07 inline im HTML (Critique
   Runde 5, polish). Unter 900px bzw. 980px greifen die einspaltigen
   !important-Regeln aus lp-page.css (.split, .g2) wie vorher. */
#faq .split{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,56px);align-items:start}
#faq .faq-kopf h2{margin:0}
#faq .faq-kopf .sub{margin:14px 0 0;max-width:34ch}
@media (min-width:901px){#faq .faq-kopf{position:sticky;top:calc(var(--kopf-h,76px) + 24px)}}
#warteliste .wl-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,44px);align-items:start}

/* Critique Runde 6 (2026-10-07): Faktenfeld in #kontrolle (ersetzt das
   Siegel). Die Beispielzeile des Nachweises ist seit Runde 7 ein Blatt. Mono fuer Daten, wie der
   Steckbrief; Untergrenze 14px (--fs-micro, Entscheidung C). */
.fakten{box-sizing:border-box;margin:0;justify-self:center;width:100%;max-width:320px;background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--r-card);box-shadow:var(--shadow-app);padding:8px 20px}
/* Einspaltig linksbuendig wie alles daneben (Critique 2026-10-09, sechster Lauf). */
@media (max-width:900px){.fakten{justify-self:start}}
.fakten>div{padding:12px 0;border-top:1px dotted var(--line-strong)}
.fakten>div:first-child{border-top:0}
.fakten dt{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-3)}
.fakten dd{margin:2px 0 0;color:var(--text-1);font-size:var(--fs-sm);line-height:1.45}

/* Critique Runde 6, P3 (2026-10-07): Karte 1 der Funktionen hat keine
   "mit KI"-Marke; ihre Ueberschrift stand 34px hoeher als die der Karten 2
   und 3 (Marke 24px plus Abstand). Nur im dreispaltigen Raster. FAQ-Fragen
   1.45 statt 1.3 (wrappende Fragen), Antworten und der Text in #kontrolle
   auf 60ch: bei 17px liefen 70ch auf 82 bis 93 Zeichen. */
/* Seit 2026-10-09 (Critique, Schritt 7) steht "mit KI" oben rechts in der
   Ecke der Karte statt ueber dem Titel. So beginnen alle Titel einer Reihe auf
   derselben Hoehe, und der leere Ausgleich ueber den Karten ohne Marke
   (Runden 7, 9 und 12) entfaellt. Die Fotokarte behaelt die Marke ueber dem
   Titel. */
#funktionen .fcard--plain.fcard--mit-ki{position:relative}
#funktionen .fcard--plain.fcard--mit-ki>.ki-marke{position:absolute;top:clamp(22px,2.4vw,28px);right:clamp(22px,2.4vw,28px);margin:0}
#funktionen .fcard--plain.fcard--mit-ki>.big{padding-right:76px}

/* Critique Runde 7 (2026-10-07 Nacht, Moeglichkeit B): Nachweis an Platz 1
   als Blatt in der Karte. Flaeche --tile wie vorher die Nachweis-Zeile,
   Mono nur fuer die Daten (Datum, Stand, Zeitraum). */
.nachweis-blatt{margin:6px 0 0;background:var(--tile);color:var(--text-1);border-radius:var(--r-tile);padding:14px 14px 10px}
.nachweis-blatt figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding-bottom:8px;border-bottom:2px solid var(--text-1)}
.nachweis-blatt figcaption strong{font-family:var(--font-display);font-weight:400;font-size:var(--fs-sm);min-width:0}
.nachweis-blatt figcaption span{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-2);min-width:0}
.nachweis-blatt table{width:100%;border-collapse:collapse;font-size:var(--fs-micro);line-height:1.4}
.nachweis-blatt th{text-align:left;font-weight:var(--fw-medium);color:var(--text-3);padding:8px 8px 6px 0}
.nachweis-blatt td{vertical-align:top;padding:8px 8px 8px 0;border-top:1px solid var(--line);color:var(--text-2)}
.nachweis-blatt td:first-child,.nachweis-blatt td:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.nachweis-blatt td:last-child,.nachweis-blatt th:last-child{padding-right:0}
.nachweis-fuss{margin:8px 0 0;font-size:var(--fs-micro);color:var(--text-3)}
/* .fcard p (lp-page.css) setzte die Zeile sonst groesser als die Tabelle. */
#funktionen .nachweis-blatt .nachweis-fuss{font-size:var(--fs-micro)}
/* Silbentrennung nur im Blatt (Critique Runde 8): am Handy brach
   "Sachbearbeitung" in 107px ohne Strich auf drei Zeilen. */
.nachweis-blatt td{hyphens:auto}
/* Seit Critique Runde 8 sind die Kartentitel und die #kontrolle-Punkte h3;
   Abstaende wie vorher bei span und strong. */
#funktionen .fcard h3.big{margin-bottom:0}
#kontrolle .zusage h3{margin-top:0}
/* Absender (seit Critique 2026-10-09, fuenfter Lauf): Foto rund, Satz wie /ueber/. */
#kontrolle .absender{display:flex;align-items:center;gap:20px;max-width:760px;margin:clamp(32px,4vw,48px) 0 0;padding-top:24px;border-top:1px solid var(--line)}
#kontrolle .absender img{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
#kontrolle .absender p{margin:0;color:var(--text-2)}
@media (max-width:620px){#kontrolle .absender{align-items:flex-start;gap:14px}#kontrolle .absender img{width:56px;height:56px}}
/* Satz zur Nachweis-Vorlage (seit 2026-10-09): dunkler als #wl-hint, weil er das Angebot nennt. */
#warteliste .wl-vorlage{color:var(--text-1)}
/* Nach dem Absenden nennt die Meldung die Vorlage (lp-start.js). */
.lp-waitlist.ist-gesendet .wl-vorlage{display:none}
/* Schmal (Karte im Raster, Handy, 200 % Schrift): jede Zeile zwei Zeilen
   hoch. Links Datum, in der Mitte Firma und darunter Stelle und Ort, rechts
   Stand und darunter der Weg (seit Critique 2026-10-09, fuenfter Lauf; vorher
   entfiel der Weg, obwohl die Karte ihn verspricht). Kopfzeile nur fuer
   Screenreader. */
@container nachweis (max-width:26rem){
  .nachweis-blatt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .nachweis-blatt table,.nachweis-blatt tbody{display:block}
  .nachweis-blatt tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;padding:7px 0;border-top:1px solid var(--line)}
  .nachweis-blatt tr:first-child{border-top:0}
  .nachweis-blatt td{border:0;padding:0}
  .nachweis-blatt td:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .nachweis-blatt td:nth-child(3){grid-column:3;grid-row:2;text-align:right;color:var(--text-3)}
  .nachweis-blatt td:last-child{grid-column:3;grid-row:1}
}
.nachweis-blatt{container:nachweis / inline-size;min-width:0}
/* Raster seit Critique Runde 7 (2026-10-07 Nacht): Nachweis links ueber zwei
   Reihen, die Fotokarte als letzte Karte ueber die volle Breite. Ab 981px
   1 2 3 / 1 4 5 / 6 6 6. Die Fotokarte nutzt dann den Aufbau aus dem
   Tablet (Foto links, Text rechts, Mindesthoehe). */
@media (min-width:981px){
  #funktionen .fcard--nachweis{grid-row:span 2}
  #funktionen .fcard--foto{grid-column:1 / -1;grid-row:auto;min-height:360px}
  .fcard--foto .fcard-text{justify-content:center;max-width:60ch}
}

/* Handy kuerzer (2026-10-07 Nacht, nach Critique Runde 7, nur Layout):
   Abschnitte enger, Foto der Gespraech-Karte aus (dekorativ, mit ihm faellt
   die Bildzeile weg), Fusszeile zweispaltig. Die Fusszeile nutzt eine
   Container Query in rem: bei 200 % Schrift ist 16rem breiter als das
   Fenster, dann bleibt sie einspaltig. 38rem grenzt nach oben ab. */
@media (max-width:620px){
  .fcard--foto .fcard-bild{display:none}
  :root{--abschnitt-xl:64px;--abschnitt-l:56px;}
}
footer.site-foot{container-type:inline-size}
@container (min-width:16rem) and (max-width:38rem){
  footer.site-foot .gfoot{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
  footer.site-foot .gfoot>:last-child:not(nav){grid-column:1 / -1}
  /* Nur hier Silbentrennung: in 128px Spalte brach "Eigenbemuehungen" sonst
     ohne Strich mitten im Wort (Entscheidung B gilt fuer den Fliesstext). */
  footer.site-foot .gfoot nav :is(a,button){hyphens:auto;overflow-wrap:break-word;max-width:100%}
  /* Der Knopf traegt ein weiches Trennzeichen (Reichweiten&shy;messung) und
     trennt nur dort; vorher stand am Handy "Reichweitenmes-" (Critique 2026-10-09). */
  footer.site-foot .gfoot nav .foot-knopf{hyphens:manual}
}

/* Ziel des Links in #ablauf Schritt 2 (Critique Runde 11). Ohne Buehne
   landet der Sprung mit Abstand unter der klebenden Kopfzeile. */
#beispiel{scroll-margin-top:88px}
/* Kein Umbruch nach dem Bindestrich in kurzen Begriffen. */
.nw{white-space:nowrap}