/* =============================================================================
   privatinso.com - Richtung "Begleitung" (Konzeptphase 2026-09)
   app.css: EIN Stylesheet fuer Startseite, Schnellcheck und App. Tokens und Seitenrahmen
   stehen in chrome.css, das jede Seite zuerst laedt.

   Haltung: Ein Mensch begleitet Sie. Warmes Papier, tiefes Gruen, weiche Ecken.
   - Eine echte Person kehrt wieder (.person): klein neben der Zusage, nie als Bildflaeche,
     nie neben Scham-Eingaben. Solange kein Foto vorliegt: Initialen, kein Platzhaltergesicht.
   - Sprechen und Bedienen = Hanken Grotesk 18/19 px, Titel = Newsreader im Normal- bis
     Halbfettschnitt, nie klein. Keine Versalien. Zahlen in Hanken, tabellarisch.
   - Flaechen hell und wenig gesaettigt; Gruen traegt die Handlung, das Gelb der Marke ist
     nur Marker. Keine Schatten, keine Verlaeufe.
   - MOBIL ZUERST: Grundregeln fuer 375 px, Desktop ab 768 px als Ableitung.
   - Status nie ueber Farbe allein: Form + Wort + Farbe.
   Was gilt und WARUM: docs/design/konzept/begleitung/system.md.
   Schutztests: apps/common/tests/test_designsystem.py.
   ========================================================================== */

/* ---------------------------------------------------------------- reset/base */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;}
/* Feste Leiste unten (mobil) und fester Kopf (Desktop): Sprungziele und fokussierte
   Elemente landen nicht darunter (WCAG 2.4.11 Focus Not Obscured). */
html{scroll-padding-bottom:96px;}
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--body-ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  accent-color:var(--pine);
  font-variant-numeric:lining-nums;
}
.app-anwalt,.app-admin{font-size:16px;}
a{color:var(--pine);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover,a:active{color:var(--ink);}
:focus-visible{outline:3px solid var(--pine);outline-offset:3px;}
::selection{background:var(--signal);color:var(--ink);}
img{max-width:100%;height:auto;}

h1,h2,h3,h4,h5{color:var(--ink);text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
/* Titel in Newsreader: die Stimme eines Briefs. Nur gross und nie fett (hoher Strichkontrast
   leidet in fetten, kleinen Schnitten, Beier & Oderkerk 2021). */
h1,h2{font-family:var(--serif);font-weight:600;}
h1{font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.015em;}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;}
h3,h4,h5{font-family:var(--display);font-weight:700;}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em;}
h4,h5{font-size:19px;line-height:1.3;}
p{margin:0 0 var(--gap-text);}
strong,b{font-weight:700;color:var(--ink);}
.serif{font-family:var(--serif);font-style:normal;font-weight:500;}
.mono{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;}
/* Textmarker hinter der Grundlinie: zwei identische Farbstopps = Flaeche, kein Verlauf. */
.mk{background:linear-gradient(var(--signal),var(--signal)) bottom/100% 38% no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ------------------------------------------------------ vertikaler rhythmus */
h1,h2,h3,h4,h5{margin:var(--gap-section) 0 0;}
h1{margin-bottom:var(--gap-h1);}
h2{margin-bottom:var(--gap-h2);}
h3{margin-bottom:var(--gap-h3);}
h4,h5{margin-bottom:var(--gap-h4);}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0;}
.kicker,.badge.eyebrow{margin-bottom:var(--gap-eyebrow);}
.badge.eyebrow{display:block;width:fit-content;}
.kicker+h1,.kicker+h2,.kicker+h3,.kicker+h4,.klabel+h2,
.badge.eyebrow+h1,.badge.eyebrow+h2,.badge.eyebrow+h3,.badge.eyebrow+h4{margin-top:0;}
.backlink{margin:0 0 var(--sp-3);font-weight:600;font-size:16px;}
.backlink+h1,.backlink+h2,.backlink+h3,.schritt-zeile+h1,.standort+h1,.person+h1,.person+h2{margin-top:0;}
.row>h1,.row>h2,.row>h3,.row>h4,.stack>h1,.stack>h2,.stack>h3,.stack>h4,
.doc-head>h1,.doc-head>h2,.doc-head>h3,.doc-head>h4,
.case-id>h1,.case-id>h2,.case-id>h3,.case-id>h4{margin:0;}
.card>strong:first-child,.note>strong:first-child,.addon>strong:first-child{
  display:block;margin-bottom:var(--gap-h4);font-weight:700;font-size:19px;line-height:1.3;color:var(--ink);}
.note>strong:first-child{font-size:inherit;}
.card>:last-child,.note>:last-child,.addon>:last-child,.doc-modal-inner>:last-child,
.kpi>:last-child,.frage>:last-child,.blatt>:last-child,.naechster>:last-child{margin-bottom:0;}

/* ------------------------------------------------------------ die Person
   Dieselbe echte Person ueber die ganze Reise (Sillence 2004; Riegelsberger 2003): klein neben
   der Zusage, nie als Bildflaeche (Crutzen 2013: ein Gesicht darf nicht mit der Handlung
   konkurrieren). Ohne Foto stehen die Initialen - kein Platzhaltergesicht, kein Stockfoto,
   kein KI-Portraet (Nightingale & Farid 2022). */
.person{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-3);}
.person-bild{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;background:var(--sage);color:var(--pine);border:2px solid var(--pine);
  font-family:var(--serif);font-weight:600;font-size:20px;line-height:1;letter-spacing:.01em;}
.person-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.person-text{min-width:0;font-size:16px;line-height:1.3;color:var(--grey);}
.person-text b{display:block;font-size:17px;font-weight:700;color:var(--ink);}
.person.gross .person-bild{width:88px;height:88px;font-size:32px;}
.person.gross .person-text b{font-size:21px;}
/* Mit Foto ist der Rahmen ein Knopf: ein Klick zeigt das Bild gross (Owner 2026-09-18).
   Der Knopf traegt keine eigene Flaeche - er sieht aus wie der Rahmen und verhaelt sich
   wie ein Bedienelement. Der Zeiger und der Fokusring sagen, dass hier etwas passiert. */
button.person-bild{padding:0;cursor:zoom-in;}
button.person-bild:focus-visible{outline:3px solid var(--pine);outline-offset:3px;}
button.person-bild:hover img,button.person-bild:focus-visible img{transform:scale(1.04);}
button.person-bild img{transition:transform .2s var(--ease);}

/* Die Lupe selbst: das Bild gross auf dunklem Grund, ueber allem. Sie entsteht erst beim
   ersten Klick (person.js) und laedt die grosse Fassung erst dann. */
.foto-lupe{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3);background:rgba(27,43,36,.72);}
.foto-lupe[hidden]{display:none;}
.foto-lupe-rahmen{position:relative;max-width:min(560px,100%);}
.foto-lupe img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--paper);}
.foto-lupe-zu{position:absolute;top:calc(-1 * var(--sp-2) - 44px);right:0;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-s);background:var(--white);color:var(--ink);cursor:pointer;
  font-family:var(--display);font-size:24px;line-height:1;}
.foto-lupe-zu:hover{background:var(--sage);}
.foto-lupe-zu:focus-visible{outline:3px solid var(--white);outline-offset:2px;}
/* Der Hintergrund scrollt nicht mit, solange die Lupe offen ist. */
.lupe-offen,.lupe-offen body{overflow:hidden;}

/* ------------------------------------------------------------- app-chrome */
.app-bar{background:var(--paper);border-bottom:1px solid var(--line);}
.app-bar-row{max-width:var(--content);margin:0 auto;padding:0 var(--edge);
  min-height:56px;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.app-bar .spacer{margin-inline-start:auto;}
.app-nav-links,.app-bar .app-user,.app-bar .app-bar-link{display:none;}
.app-bar-signal{background:var(--paper);}
.app-body{background:var(--paper);}
main{max-width:var(--content);margin:12px auto var(--sp-5);padding:0 var(--edge);}
.app-mandant main{max-width:calc(720px + 2 * var(--edge));}
.app-admin main{max-width:1440px;}
.app-mandant h1{font-size:27px;line-height:1.15;margin-bottom:12px;}
.app-mandant .person{margin-bottom:10px;}
.app-mandant .lead{margin-bottom:12px;}
@media (min-width:768px){
  .app-bar{position:sticky;top:0;z-index:50;}
  html{scroll-padding-top:88px;scroll-padding-bottom:0;}
  .app-bar-row{min-height:72px;gap:var(--sp-4);}
  .app-bar .app-user,.app-bar .app-bar-link{display:inline-flex;}
  main{margin:var(--sp-5) auto var(--sp-7);}
  .app-mandant h1{font-size:38px;}
  .app-nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);}
  .app-nav-links>a,.app-drop-btn{display:inline-flex;align-items:center;min-height:44px;
    font-family:var(--display);font-weight:500;font-size:17px;color:var(--body-ink);text-decoration:none;
    background:none;border:0;padding:0;cursor:pointer;border-bottom:2px solid transparent;}
  /* Feedback #84: offen bei Hover ODER Tastatur-Fokus - nicht bei jedem Fokus. Ein Mausklick
     auf den Knopf gibt ihm den Fokus; mit :focus-within blieb das Menue dann offen, obwohl die
     Maus laengst weg war. :focus-visible trifft nur die Tastatur. */
  .app-nav-links>a:hover,.app-nav-links>a.on,.app-drop:hover .app-drop-btn,
  .app-drop:has(:focus-visible) .app-drop-btn{color:var(--ink);border-bottom-color:var(--pine);}
  .app-drop{position:relative;display:inline-flex;}
  .app-menu{position:absolute;top:100%;left:-12px;z-index:60;display:none;min-width:320px;
    flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-2);}
  .app-drop:hover .app-menu,.app-drop:has(:focus-visible) .app-menu{display:flex;}
  .app-menu a,.app-menu .schritt{display:flex;gap:var(--sp-2);align-items:center;min-height:44px;
    padding:6px 12px;border-radius:8px;font-weight:500;font-size:16px;line-height:1.3;color:var(--ink);text-decoration:none;}
  .app-menu a:hover,.app-menu a:focus{background:var(--sage);}
  .app-menu .schritt.is-locked{color:var(--grey);}
  .app-menu .journey-dot{flex:0 0 auto;width:26px;height:26px;font-size:14px;}
  .app-menu .journey-nav-note{font-size:14px;color:var(--grey);}
}
.app-bar-link{align-items:center;min-height:44px;font-weight:600;font-size:16px;}
.app-user{align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:15px;color:var(--grey);}
.app-user .who{color:var(--body-ink);overflow-wrap:anywhere;}
.app-nav{display:none;background:var(--paper);border-bottom:1px solid var(--line);}
.app-nav-row{max-width:var(--content);margin:0 auto;padding:0 var(--edge);display:flex;flex-wrap:wrap;font-weight:500;font-size:16px;}
.app-admin .app-nav-row,.app-admin .app-bar-row{max-width:1440px;}
.app-nav a{color:var(--grey);padding:14px var(--sp-3);text-decoration:none;border-bottom:3px solid transparent;}
.app-nav a:first-child{padding-left:0;}
.app-nav a:hover{color:var(--ink);}
.app-nav a.active{color:var(--ink);border-bottom-color:var(--pine);font-weight:700;}
@media (min-width:768px){.app-nav{display:block;}}

/* ------------------------------------------------------------------ cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);margin-bottom:var(--gap-card);}
.card.flush{padding:0;overflow:hidden;}
.card.narrow{max-width:640px;}
.card-hover{transition:border-color .15s var(--ease);}
.card-hover:hover{border-color:var(--pine);}
.card-grid{display:grid;gap:var(--gap-card);grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));margin-bottom:var(--gap-card);}
.card-grid>*{background:var(--white);border:1px solid var(--line);border-radius:var(--r);min-width:0;padding:var(--sp-3);}
.card-grid>a{text-decoration:none;color:var(--ink);}
.card-grid>a:hover{border-color:var(--pine);}
.card-grid h2,.card-grid h3{font-size:21px;}
.card h2,.addon h2{font-size:24px;}
.card h3,.addon h3{font-size:19px;}
@media (min-width:768px){
  .card{padding:var(--sp-5);}
  .card-grid>*{padding:var(--sp-5);}
  .card h2,.addon h2{font-size:28px;}
}
.lead{color:var(--body-ink);font-size:var(--fs-body);max-width:56ch;}
.muted{color:var(--grey);font-size:var(--fs-small);}
/* Dachzeile: Satzschreibung, ruhig, in Gruen. Keine Versalien, keine Sperrung. */
.kicker{display:block;font-weight:600;font-size:var(--fs-eyebrow);line-height:1.4;color:var(--pine);}
@media (min-width:768px){.lead{font-size:var(--fs-read);}}

/* Das Blatt: eine ruhige Aufstellung (Schaetzung, Glaeubigerliste, Kennzahlen). Links das
   Wort, rechts der Wert; Betraege tabellarisch. Tabellen sind am Telefon Blattzeilen. */
.blatt{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:var(--gap-card);}
.blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:12px var(--sp-3);
  background:var(--sage);font-weight:700;font-size:16px;color:var(--ink);}
.blatt-kopf .ist-beispiel{padding:2px 10px;border-radius:var(--r-pill);background:var(--white);font-weight:600;font-size:14px;color:var(--pine);}
.blatt-inhalt{padding:var(--sp-3);}
.blatt-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding:13px var(--sp-3);border-bottom:1px solid var(--hair);font-size:17px;color:var(--ink);}
.blatt-zeile:last-child{border-bottom:0;}
.blatt-zeile .zl{min-width:0;color:var(--body-ink);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;}
.blatt-zeile .zl small{display:block;font-size:15px;color:var(--grey);}
.blatt-zeile .zw{flex:0 0 auto;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--ink);}
/* Vorschlag aus einem Bescheid (Feedback #77): Name links, zwei Knoepfe - am Telefon
   passen sie nicht neben den Namen und brechen darunter um. */
.blatt-zeile.vorschlag{flex-wrap:wrap;align-items:center;}
.vorschlag-aktionen{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
/* Im Foto lief „Kindergeldbescheid_Familienkasse_NRW.pdf" rechts aus dem Kasten
   (Messwert: kein Ueberlauf - er lag INNERHALB der Zeile), und der zweite Knopf
   erbte die Einrueckung von .btn + .inline-form. */
.blatt-zeile.vorschlag .zl{overflow-wrap:anywhere;}
/* Welle 1, Befund 80: Dateinamen aufgegangener Schreiben im Belegfenster - derselbe
   Fall, im Foto lag der Name ueber dem Betrag. */
.blatt-zeile.datei .zl{overflow-wrap:anywhere;}
.vorschlag-aktionen .btn + .inline-form{margin-inline-start:0;}
.blatt-zeile .zw.wort{font-size:18px;}
/* Ein WORT als Wert (Plan-Art) darf umbrechen: „Feste Raten / Einmalzahlung" drückte
   die Beschriftung sonst auf drei Zeilen (Foto #57, 24.09.2026). Zahlen bleiben
   ungebrochen. */
.blatt-zeile .zw.wort{white-space:normal;text-align:right;max-width:60%;}
/* Gegenprobe Fix-Runde 2 (06.10.2026): In „Meine Daten“ lag „Unterhaltsberechtigte“ ueber
   „noch nicht erfasst“ - die Beschriftung (min-width:0) wurde schmaler als ihr laengstes
   Wort, und der Wert gab keinen Platz ab. Ein WORT als Wert gibt jetzt nach, die
   Beschriftung trennt (lang="de") oder bricht um, statt in den Wert zu laufen. */
.blatt-zeile .zw.wort{flex:0 1 auto;}
.blatt-zeile.summe{border-top:1px solid var(--line);background:var(--paper);}
.blatt-zeile.betont{background:var(--sage);}
.blatt-fuss{padding:12px var(--sp-3);border-top:1px solid var(--hair);font-size:var(--fs-small);color:var(--body-ink);}
/* Blattzeile mit Link oder Nebenaktion (Rollout B11): Ein Link IN der Zeile ist so hoch
   wie die Zeile - gemessen 23 px. Senkrechte Polsterung hebt ihn auf 44 px, ohne die
   Zeile zu veraendern (dasselbe Mittel wie bei .opt a, B1). */
.blatt-zeile .zl a{display:inline-block;padding-block:11px;}
/* Info-Zeichen an einer Blatt-Zeile (Feedback #61). <details>, kein Skript: der
   Text steht auch ohne JavaScript da. Der Kreis gehoert zu den frei geformten
   Kleinteilen; das Ziel ist 44 px gross, der sichtbare Ring 22 px. NICHT in die
   Wertspalte - die ist white-space:nowrap und fuer ZAHLEN gemacht. */
.zl-info{display:inline;}
.zl-info>summary{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-inline-start:2px;vertical-align:middle;
  cursor:pointer;list-style:none;}
.zl-info>summary::-webkit-details-marker{display:none;}
.zl-info>summary>span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px solid var(--pine);border-radius:50%;
  font-family:var(--display);font-weight:700;font-size:14px;line-height:1;color:var(--pine);}
.zl-info>summary:hover>span[aria-hidden]{background:var(--sage);}
.zl-info>summary:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
.zl-info p{margin:var(--sp-1) 0 0;font-size:15px;line-height:1.45;color:var(--grey);max-width:52ch;}
.blatt-zeile>.btn{flex:0 0 auto;}
.bildzeile{margin:var(--sp-2) 0 0;font-size:15px;color:var(--grey);}
details.leise>summary{display:flex;align-items:center;min-height:48px;padding:0 var(--sp-3);list-style:none;
  font-weight:600;font-size:16px;color:var(--pine);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
details.leise>summary::-webkit-details-marker{display:none;}
details.leise[open]>summary{color:var(--ink);}

/* ----------------------------------------------------------------- badges */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-weight:600;font-size:14px;line-height:1.35;
  background:var(--white);color:var(--ink);border:1px solid var(--grey-dark);vertical-align:middle;}
.badge.eyebrow{border:0;padding:0;border-radius:0;background:none;font-weight:600;font-size:var(--fs-eyebrow);color:var(--pine);}
.badge.verified,.badge.ok{color:var(--green-ink);border-color:var(--green);}
.badge.warn{background:var(--signal);color:var(--ink);border-color:var(--ink);}
.badge.none{color:var(--red-ink);border-color:var(--red);}
.badge.review{background:var(--pine);color:var(--white);border-color:var(--pine);}
/* Status als Wort mit Form und Farbe (nie Farbe allein, WCAG 1.4.1). */
.status{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:var(--r-pill);
  border:1px solid var(--grey-dark);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);background:var(--white);}
.status::before{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  font-weight:700;font-size:14px;line-height:1;color:var(--white);background:var(--grey);}
.status.ok{border-color:var(--green);color:var(--green-ink);}
.status.ok::before{content:"\2713";background:var(--green-ink);}
.status.warn{border-color:var(--amber);color:var(--amber-ink);}
.status.warn::before{content:"!";background:var(--amber-ink);border-radius:6px;}
.status.err{border-color:var(--red);color:var(--red-ink);}
.status.err::before{content:"\00D7";background:var(--red-ink);border-radius:6px;}
.status.wait::before{content:"\2026";background:var(--grey);}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--sage);color:var(--ink);border:1px solid var(--hair);}

/* ---------------------------------------------------------------- buttons
   Signifier statt Schmuck: gefuellte Flaeche, klare Form, Verb als Text, immer derselbe Ort
   (Meyer/NN-g 2017, Burmistrov 2015). Gruen traegt die Handlung: Rot macht Online-Entscheidungen
   vorsichtiger (Gnambs 2015) und bleibt Fehlern vorbehalten. Mobil volle Breite, 56 px hoch. */
/* Das hidden-Attribut muss staerker sein als die display-Regel der Klasse: Das
   Browser-Stylesheet setzt [hidden]{display:none} mit derselben Spezifitaet wie
   .btn{display:inline-flex} und verliert deshalb. Gefunden im Rollout B4 - auf der
   Datenpruefung standen beide Umschalt-Knoepfe gleichzeitig da, obwohl einer als
   hidden ausgezeichnet war. */
.btn[hidden],.status[hidden],.pill[hidden],.badge[hidden],.actions[hidden]{display:none;}
/* Feedback #54 (23.09.2026), dieselbe Fehlerklasse zum dritten Mal: Im Gläubiger-Check
   standen die Felder hinter „Ja" (.grid-2) und der Hinweis unter „Weiter" (.opt-hint)
   immer offen da. Seitdem prüft test_hidden_54 JEDE Vorlage: hidden an einer Klasse
   mit eigenem display braucht hier eine Gegenregel. */
.grid-2[hidden],.grid-3[hidden],.opt-hint[hidden]{display:none;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:12px 22px;cursor:pointer;border-radius:var(--r-s);
  font-family:var(--display);font-weight:600;font-size:var(--fs-btn);line-height:1.2;letter-spacing:0;
  text-transform:none;text-decoration:none;text-align:center;
  background:var(--white);color:var(--pine);border:2px solid var(--pine);
  transition:background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);}.btn:hover,.btn:active{background:var(--sage);color:var(--ink);border-color:var(--ink);text-decoration:none;}
.btn-primary,.btn-ok{min-height:var(--tap-primary);background:var(--pine);color:var(--white);border-color:var(--pine);font-weight:700;}.btn-primary:hover,.btn-primary:active,.btn-ok:hover,.btn-ok:active{background:var(--ink-900);color:var(--white);border-color:var(--ink-900);}
.btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink);}.btn-dark:hover,.btn-dark:active{background:var(--pine);color:var(--white);border-color:var(--pine);}
.btn-ghost,.btn-light{background:transparent;color:var(--pine);border:2px solid var(--pine);}.btn-ghost:hover,.btn-light:hover,.btn-ghost:active,.btn-light:active{background:var(--sage);color:var(--ink);border-color:var(--ink);}
.btn-danger{background:var(--white);color:var(--red-ink);border:2px solid var(--red);}.btn-danger:hover,.btn-danger:active{background:var(--red);color:var(--white);}
.btn-sm{min-height:44px;padding:8px 16px;font-size:16px;}
.btn.is-disabled,.btn[disabled],.btn:disabled{background:var(--paper);border:2px solid var(--line);color:var(--grey);cursor:not-allowed;}
.btn.is-disabled{pointer-events:none;}
.btn .arr{transition:transform .2s var(--ease);}.btn:hover .arr,.btn:active .arr{transform:translateX(3px);}
.btn-breit{width:100%;justify-content:space-between;}
.actions .btn-primary,.actions .btn-ok{width:100%;justify-content:space-between;}
@media (min-width:768px){
  .actions .btn-primary,.actions .btn-ok{width:auto;justify-content:center;}
}
.btn-link,.op-link,.next-step-go,.textlink,.backlink a{appearance:none;background:none;border:0;
  display:inline-flex;align-items:center;min-height:44px;padding:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--pine);text-align:left;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}.btn-link:hover,.op-link:hover,.next-step-go:hover,.textlink:hover,.btn-link:active,.textlink:active{color:var(--ink);}
.step-d-hint{margin-top:var(--sp-2);font-size:15px;color:var(--amber-ink);}
.step-d-hint:empty{display:none;}
/* Mehrere Hinweise stehen untereinander. Eine Auskunft („schon erfasst", „bleibt
   erfasst") ist keine Mahnung und steht deshalb in Lesetinte statt Amber. */
.step-d-hint-text{display:block;}
.step-d-hint-text+.step-d-hint-text{margin-top:var(--sp-1);}
.step-d-hint-text.info{color:var(--body-ink);}

/* ------------------------------------------------------------- forms/inputs
   Label ueber dem Feld, Satzschreibung, nie als Platzhalter (NN/g). */
label{font-weight:600;font-size:var(--fs-label);line-height:1.3;color:var(--ink);}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=month],input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;min-height:54px;padding:12px 14px;border:2px solid var(--grey-dark);border-radius:var(--r-s);background:var(--white);
  font-family:var(--display);font-size:18px;color:var(--ink);}
textarea.rechtstext-editor{font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;font-size:14px;line-height:1.6;min-height:28rem;resize:vertical;}
/* Mailvorlagen (24.09.2026): Texte in der Leseschrift, nicht Mono - sie sind Briefe, kein Code. */
textarea.mailtext-editor{font-size:16px;line-height:1.6;min-height:8rem;resize:vertical;}
/* Vorschau der fertigen Mail. Die Hoehe ist ein Startwert, app.js passt sie an die Mail an -
   ohne Skript bleibt die Mail darin scrollbar und vollstaendig. */
.mail-vorschau{display:block;width:100%;height:720px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);margin:0 0 var(--sp-5);}
/* Mailvorlagen: Listen statt Tabellen. Eine Tabelle mit fuenf Spalten scrollte am Telefon
   INNERHALB ihres Kastens und schnitt Stand und Knopf ab (Gegenprobe am Bild, 24.09.2026). */
.mail-liste{list-style:none;margin:0 0 var(--sp-5);padding:0;border-top:1px solid var(--line);}
.mail-liste>li{padding:var(--sp-3) 0;border-bottom:1px solid var(--line);}
.mail-liste.dicht>li{padding:var(--sp-2) 0;}
.mail-liste .ml-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);}
.mail-liste p.ml-aktion{margin-top:var(--sp-2);}
/* Unterschrift des Anwalts (29.09.2026): freigestellt auf Papier, so wie sie auf der
   Bescheinigung steht. Die Hoehe ist begrenzt - ein Bild im Hochformat fuellte sonst
   den ersten Bildschirm. */
.unterschrift-vorschau{display:block;width:auto;max-width:100%;height:auto;max-height:160px;
  padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  margin:0 0 var(--sp-3);}
.mail-liste p{margin:var(--sp-1) 0 0;overflow-wrap:anywhere;}
.mail-liste .ml-meta{color:var(--grey);font-size:16px;}
/* Fokus (WCAG 1.4.11 + 2.4.7): 3 px Gruen aussen (7:1 auf Papier), Rand wird Gruen. */
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,
input[type=date]:focus,input[type=month]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=search]:focus,
select:focus,textarea:focus{outline:3px solid var(--pine);outline-offset:2px;border-color:var(--pine);}
select{cursor:pointer;}
input[type=file]{font-family:var(--display);font-size:16px;min-height:44px;max-width:100%;}
label input,label select,label textarea{margin-top:var(--sp-2);}
.app-anwalt td input,.app-anwalt td select,.app-admin td input,.app-admin td select,
.eingabe-form input,.eingabe-form select{min-height:40px;padding:6px 10px;font-size:15px;border-radius:8px;}
.field-gap input,.field-gap select,.field-gap textarea,input.gap,select.gap{background:linear-gradient(var(--signal),var(--signal)) left/6px 100% no-repeat var(--white);}
.form-field{margin:0 0 var(--sp-3);}
.form-field>label{display:block;margin-bottom:var(--sp-2);}
.form-field .form-error{display:block;margin-top:6px;}
.req{color:var(--red-ink);font-weight:700;}
.form-error,.field-error{color:var(--red-ink);font-weight:600;font-size:16px;}
input[aria-invalid=true]{border-color:var(--red);}
.t-ok{color:var(--green-ink);font-weight:700;}

/* Frage und Antwortkacheln. Sichtbare Optionen statt Auswahlfeld (Couper 2004, Healey 2007),
   gestapelt, ganze Zeile ist das Ziel, 56 px: Aeltere treffen Ziele unter 14 mm deutlich
   schlechter (Leitao & Silva 2012). Gewaehlt = Salbei + gruener Rand + gefuellter Punkt mit
   Haken, also nie Farbe allein. Nichts ist vorbelegt. Jede Frage ist eine eigene Karte. */
.frage{border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:var(--sp-3);margin:0 0 var(--sp-3);min-width:0;}
.frage>legend,.frage-titel{display:block;width:100%;padding:0;margin:0 0 var(--sp-2);
  font-weight:700;font-size:20px;line-height:1.3;color:var(--ink);text-transform:none;}
/* Nur die legend schwebt (sonst setzt der Browser sie in den Rahmen). Der Fragetitel als
   Absatz schwebt NICHT: Feedback #110/#111 (30.09.2026) - hinter dem schwebenden Titel lag
   die Warum-Zeile, und die Antwortkacheln daneben hatten 0 px Breite („Texte fallen rechts
   aus dem Kasten"). */
.frage>legend{float:left;}
.frage>legend+*{clear:both;}
/* Folgefrage in derselben Karte (erscheint nach einer Antwort): Abstand zur Kachel darueber,
   und zwischen zwei Teilfragen. */
.frage-folge{margin-top:var(--sp-3);}
.frage-folge .angabe-opts+.frage-titel{margin-top:var(--sp-3);}
/* Fix-Runde 15 F, C29b: die Datumsfrage nach der Folgefrage zur Insolvenzstraftat. */
.frage-folge .rsb-straftat+.frage-titel{margin-top:var(--sp-3);}
.frage-folge .opt-hint+.row{margin-top:var(--sp-2);}
/* Eigene Forderungsaufstellung (01.10.2026): die Markierung "vielleicht doppelt" beim Anwalt. */
.db-list .doppelt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin:var(--sp-1) 0 0;}
/* Ein langer Dateiname ohne Leerzeichen machte die Spalte des Rasters breiter als die
   Karte (Foto 01.10.2026, 375 px) - Rasterkinder duerfen schmaler werden. */
.db-list>*{min-width:0;}
.db-list .doppelt a{overflow-wrap:anywhere;padding-block:10px;}
.aufstellung-zeile .lesung-wert{margin-top:var(--sp-2);}
.aufstellung-zeile .check-choices{margin-top:var(--sp-2);}
.aufstellung-datei{margin:var(--sp-3) 0 var(--sp-2);font-weight:600;font-size:var(--fs-small);color:var(--ink);overflow-wrap:anywhere;}
.aufstellung-zeile .frage-grund,.aufstellung-zeile .lesung-wert{overflow-wrap:anywhere;}
.aufstellung-zeile .aufstellung-beleg{margin:var(--sp-2) 0 0;}
/* Forderungsabfrage nach § 305 Abs. 2 InsO (#114): Antworten untereinander, getrennt durch eine Linie. */
.abfrage-antwort+.abfrage-antwort{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);}
.abfrage-antwort>.db-group{margin-bottom:var(--sp-3);}
.abfrage-wortlaut{padding:0 12px 12px;overflow-wrap:anywhere;}
.abfrage-liste{margin-bottom:var(--sp-3);}
/* Nicht waehlbar (ohne E-Mail, schon gefragt): gestrichelt statt Kachel - lesbar bleibt der Grund darunter. */
.opt input:disabled{cursor:default;}
.opt input:disabled+span{background:var(--paper);border-style:dashed;cursor:default;}
.opt input:disabled+span::before{border-color:var(--line);}
.aktenzeichen{overflow-wrap:anywhere;}
.abfrage-muster>.brieftext,.abfrage-muster>p{padding:0 12px;}
/* Terminwahl (01.10.2026): Tag und Uhrzeit als zwei Felder; mobil untereinander. */
.terminwahl .row{margin-top:var(--sp-3);}
.terminwahl .row>.form-field{margin-bottom:0;}
/* Feedback #49: Eine nach dem Absenden erneut gezeigte Frage traegt ihren Grund -
   Rahmen plus Zeichen plus Wort (.status), nie Farbe allein. */
.frage.fehlt{border:2px solid var(--amber);}
.frage.neu{border:2px solid var(--pine);}
.frage-grund{margin:0 0 var(--sp-2);font-size:var(--fs-small);color:var(--body-ink);}
.frage-grund .status{margin-inline-end:6px;}
/* Feedback #51: der Betrag erst nach „Ja"; #53: eine Warnung erst nach ihrer Antwort. */
.frage .betrag-bei-ja{display:none;margin:var(--sp-3) 0 0;}
.frage:has(.opt-ja:checked) .betrag-bei-ja,.frage .betrag-bei-ja.hat-fehler{display:block;}
/* Fix-Runde 7 (Nachtrag zu E14): die Folgefrage als Satz über ihren Feldern, der Satz vor
   zwei Fragen mit Abstand zum Satz über die Person (wizard/_verstorben_fragen.html). */
.betrag-bei-ja>.lesung-wert{margin:0 0 var(--sp-2);}
.verstorben-einleitung{margin:var(--sp-2) 0 var(--sp-3);}
/* Fix-Runde 8 (F6): die Bitte um die Sterbeurkunde vor der Datumsfrage; die Felder einer
   Datumsfrage stehen ohne Kacheln immer da. */
.verstorben-bitte{margin:var(--sp-2) 0 var(--sp-2);}
.verstorben-felder{margin:var(--sp-2) 0 0;}
.frage .opt-warnung{display:none;margin:var(--sp-3) 0 0;font-size:var(--fs-small);line-height:1.45;color:var(--body-ink);}
.frage:has(.opt-warnt:checked) .opt-warnung{display:block;}
.opt-warnung .status{margin-inline-end:6px;}
.frage-nr{display:block;margin-bottom:4px;font-weight:600;font-size:var(--fs-eyebrow);color:var(--pine);}
/* Schnellcheck, oberste Stufe (Feedback #35-#37): Das Zahlenfeld erscheint erst mit der
   Wahl der offenen Stufe - reines CSS, kein Inhalt wartet auf JavaScript. Bei einem
   Fehler steht es sofort da. */
.frage .qc-exakt{display:none;margin:var(--sp-3) 0 0;}
.frage:has(.opt-oben:checked) .qc-exakt,.frage .qc-exakt.hat-fehler{display:block;}
/* Fix-Runde 6, E5: die zwei freiwilligen Felder erst mit „Weiß ich nicht" (ANWALTS_REVIEW 69). */
.frage .abzug-mehr{display:none;margin:var(--sp-3) 0 0;}
.frage:has(.opt-weissnicht:checked) .abzug-mehr{display:block;}
.warum{margin:0 0 12px;padding:8px 12px;border-radius:var(--r-s);background:var(--sage);
  font-size:var(--fs-small);line-height:1.45;color:var(--body-ink);}
.angabe-opts{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);}
.angabe-opts.inline{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2);}
/* „Weiß ich nicht …" steht in den Fragen der Datenpruefung (_fragen.html) NACH der Gruppe,
   nicht in ihr - ohne eigenen Abstand klebte die Kachel an der letzten Antwort (Feedback #97,
   Owner 29.09.: „der abstand zwischen boxen soll überall auf der plattform gleich sein").
   Derselbe Abstand wie zwischen den Kacheln der Gruppe (Waechter test_abstand_97). */
.frage>.opt.defer{margin-top:var(--sp-2);}
.angabe-opts.inline>.opt{flex:1 1 0;min-width:46px;}
.angabe-opts input[type="number"]{max-width:12rem;}
.angabe-opts input[type="text"]{max-width:26rem;}
.opt{position:relative;display:flex;align-items:stretch;min-height:56px;cursor:pointer;
  font-weight:500;font-size:18px;line-height:1.25;color:var(--ink);}
.opt input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer;}
.opt>span{flex:1 1 auto;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 14px;
  background:var(--white);border:2px solid var(--grey-dark);border-radius:var(--r-s);}
.opt>span::before{content:"";flex:0 0 auto;width:24px;height:24px;border:2px solid var(--grey-dark);border-radius:50%;
  background:var(--white);display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;line-height:1;color:var(--white);}
.opt input[type=checkbox]+span::before{border-radius:7px;}
.opt input:checked+span{background:var(--sage);border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine);font-weight:700;}
.opt input:checked+span::before{content:"\2713";background:var(--pine);border-color:var(--pine);}
.opt input:focus-visible+span{outline:3px solid var(--pine);outline-offset:3px;}
.opt:active>span{background:var(--sage);}
.angabe-opts.inline>.opt>span{justify-content:center;padding:10px 6px;}
.angabe-opts.inline>.opt>span::before{display:none;}
/* Eine Antwortkachel mit Erlaeuterung (Feedback #63). `.opt>span` ist eine
   FLEX-Zeile - ein <small> darin landete daneben, und der Titel brach auf drei
   Zeilen, waehrend rechts eine schmale Textsaeule stand. Die Messwerte meldeten
   „kein Ueberlauf"; dass es unlesbar war, hat erst das Foto gezeigt (die Lehre
   vom 22.09.). Titel und Erlaeuterung stehen deshalb UNTEREINANDER. */
.opt>span:has(small){flex-direction:column;align-items:flex-start;gap:2px;}
.opt>span:has(small)::before{position:absolute;left:14px;top:50%;margin-top:-12px;}
.opt>span small{display:block;font-weight:400;font-size:var(--fs-small);line-height:1.45;color:var(--grey);}
.opt>span:has(small){padding-inline-start:50px;}
.opt-hint{display:block;margin:var(--sp-1) 0 0;font-weight:400;font-size:var(--fs-small);color:var(--grey);}
/* Antwortkachel mit zweiter Zeile (Rollout B2): Bezeichnung und Begruendung stapeln.
   Ohne diesen Stapel sind beide Flex-Kinder der Kachel und stehen nebeneinander. */
.opt-stapel{min-width:0;}
/* Links MITTEN IM SATZ (Zustimmungszeile, Hilfetext) nimmt WCAG 2.5.8 von der 44-px-Regel
   aus - ihre Groesse ist durch die Zeile bestimmt. Ein wenig senkrechte Polsterung kostet
   aber nichts und macht sie am Telefon deutlich besser treffbar, ohne die Zeile zu
   veraendern: Die Polsterung waechst ueber die Zeilenhoehe hinaus, nicht in sie hinein
   (gemessen in B1: 23 px Trefferhoehe waren zu wenig). */
.opt a,.opt-hint a,.blatt-fuss a{padding-block:9px;}
/* Ein Link IN einer Kachel (Feedback #39/#62): Das Eingabefeld liegt absolut ueber der
   ganzen Kachel und finge den Klick ab. Eine eigene Ebene hebt den Link darueber - der
   Klick oeffnet ihn, statt das Haekchen zu setzen (Wächter test_meldungen_31_34_62). */
.opt a{position:relative;z-index:1;}
/* Der PDF-Link steht als eigene Zeile UNTER der Zustimmungs-Kachel (#58-#60) und braucht
   Abstand zur naechsten Kachel - im Foto klebte er an der Stundungs-Kachel. */
.opt-hint.pdf-zeile{margin:var(--sp-1) 0 var(--sp-3);}
/* Bestand: Optionen ohne Kachel-Span (Datenpruefung der App) bleiben bedienbar. */
.opt:not(:has(>span)){align-items:center;gap:10px;min-height:48px;}
.opt:not(:has(>span)) input{position:static;opacity:1;width:22px;height:22px;flex:0 0 auto;}
/* Unsichere Lesung (Feedback #71/#73): der gelesene Wert steht gross genug, um ihn
   mit dem Dokument zu vergleichen; das Korrekturfeld erscheint erst mit der Wahl
   „korrigieren" - reines CSS, kein Inhalt wartet auf JavaScript. */
/* Seit 23.09. (Owner) ist die Zeile ein ganzer Fragesatz: Feld, Dokument, Wert. Er
   traegt die Zeile, also Lesegroesse; Dateinamen ohne Leerzeichen brechen (#70). */
.lesung-wert{margin:0;font-size:var(--fs-label);line-height:1.45;color:var(--body-ink);overflow-wrap:anywhere;}
.lesung-wert b,.lesung-wert strong{color:var(--ink);}
.fl-label .src-open{align-self:flex-start;margin-top:var(--sp-1);}
.check-choices{display:flex;flex-direction:column;gap:var(--sp-2);}
.check-choices .einzug{margin-left:var(--sp-4);}
.check-choices .corr{display:none;}
.check-choices:has(input[value="korrigieren"]:checked) .corr{display:block;}
/* Der Dateiname ist die Ueberschrift der Gruppe, aber kein Titel: Hanken statt
   Newsreader, und er bricht auch ohne Leerzeichen (Feedback #70). */
.card h2.fl-dok{font-family:var(--display);font-size:var(--fs-label);font-weight:700;line-height:1.3;
  overflow-wrap:anywhere;hyphens:none;-webkit-hyphens:none;}
.pruefung.needs-only .fl-gruppe.clear{display:none;}
/* Zwei Lesungen einer Unterlage liefen im Foto ineinander (die Kacheln der
   einen, direkt darunter der Name der naechsten). Eine Haarlinie trennt die Fragen. */
.fl-gruppe .fl-row.lesung~.fl-row.lesung{border-top:1px solid var(--hair);padding-top:var(--sp-3);}
/* Hinweis ueber „Weiter", solange eine unsichere Angabe ohne Antwort ist (Owner
   23.09.2026: weiter geht es immer, aber nicht stumm). Salbei ist die ruhige Flaeche. */
.weiter-hinweis{border-radius:var(--r-s);background:var(--sage);padding:12px 14px;margin:var(--sp-3) 0 0;
  font-size:var(--fs-small);line-height:1.5;color:var(--body-ink);}
.weiter-hinweis[hidden]{display:none;}
.angaben-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.angabe{padding:var(--sp-3) 0;border-bottom:1px solid var(--hair);}
.angabe-q{font-weight:700;font-size:20px;color:var(--ink);}
.angabe .defer{margin-top:var(--sp-2);color:var(--grey);}
fieldset{border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-3);margin:0 0 var(--sp-3);min-width:0;}
legend{font-weight:600;font-size:16px;color:var(--ink);padding:0 var(--sp-1);}
details>summary{cursor:pointer;}
/* Schrittzeile kurzer Strecken: Text statt Balken (Villar 2013, Conrad 2010). */
.schritt-zeile{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2);font-weight:600;font-size:var(--fs-eyebrow);color:var(--pine);}
.schritt-zeile b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--pine);color:var(--white);font-weight:700;font-size:14px;}

/* ------------------------------------------------------------------ notes */
.note{border-radius:var(--r-s);background:var(--sage);padding:12px 14px;font-size:var(--fs-small);line-height:1.5;color:var(--body-ink);margin-bottom:var(--gap-text);}
.note.info{background:var(--white);border:1px solid var(--line);color:var(--grey);}
.addon{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);margin-bottom:var(--gap-card);}
.addon.attention{background:var(--sage);border-color:var(--sage);}
.logo-preview{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);}

/* --------------------------------------------------------------- messages */
.messages{list-style:none;padding:0;margin:0 0 var(--sp-4);}
.messages li{position:relative;padding:13px 14px 13px 48px;margin-bottom:var(--sp-2);background:var(--white);border-radius:var(--r-s);
  border:2px solid var(--grey-dark);font-weight:500;font-size:17px;line-height:1.4;color:var(--ink);}
.messages li::before{content:"i";position:absolute;left:13px;top:13px;width:24px;height:24px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--grey);color:var(--white);font-weight:700;font-size:14px;line-height:1;}
.messages li.success{border-color:var(--green);}
.messages li.success::before{content:"\2713";background:var(--green-ink);}
.messages li.error{border-color:var(--red);}
.messages li.error::before{content:"!";background:var(--red-ink);border-radius:6px;}
.messages li.warning{border-color:var(--amber);background:var(--white);}
.messages li.warning::before{content:"!";background:var(--amber-ink);border-radius:6px;}

/* ------------------------------------------------------------------ tables */
table{border-collapse:collapse;width:100%;background:transparent;}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--hair);vertical-align:top;}
th:first-child,td:first-child{padding-left:0;}
th{font-weight:600;font-size:15px;color:var(--grey);border-bottom:1px solid var(--line);}
td{font-size:16px;}
tfoot th,tfoot td{border-top:1px solid var(--line);border-bottom:0;}
code{font-family:ui-monospace, Consolas, monospace;font-size:.85em;background:var(--white);padding:1px 5px;border:1px solid var(--line);border-radius:4px;color:var(--ink);}
.table-scroll{overflow-x:auto;}
.num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.total-row td,.total-row th{font-weight:700;border-top:1px solid var(--line);}
.subrow td{background:var(--white);}
.subrow td:first-child{padding-left:var(--sp-4);}
tr:target td,tr:target th{background:var(--sage);}
tr.is-selected td{box-shadow:inset 0 0 0 2px var(--red);}
tr.field-row{cursor:pointer;}
td .progressbar{margin-top:var(--sp-2);}
.card table,.table-scroll table{min-width:480px;}
.card:has(table){overflow-x:auto;}
@media (hover:hover) and (min-width:768px){
  tbody tr:hover{background:var(--sage);}
  tbody tr.detailzeile:hover{background:transparent;}
  tbody tr:has(input,select,textarea):hover{background:var(--white);}
}
@media (min-width:768px){
  .card table,.table-scroll table{min-width:0;}
  .app-anwalt th,.app-admin th{font-size:14px;}
  .app-admin td,.app-admin th{padding:8px 10px;}
  .app-admin td:first-child,.app-admin th:first-child{padding-left:0;}
}

/* ------------------------------------------------- Ihr Weg (Aufgabenliste)
   Ein Weg mit Stationen, in Klartext. Kein Prozentwert und kein Gesamtbalken: Ein Balken, der
   in der Wartezeit wochenlang steht, zeigt Stillstand (Conrad 2010, Villar 2013; GOV.UK Task
   list). Erledigt = gefuellter Kreis mit Haken + Wort, jetzt = Ring + "jetzt" + Salbei,
   spaeter = grauer Ring + Grund. */
.journey{list-style:none;margin:0;padding:var(--sp-2) 0;}
.journey-step{position:relative;display:flex;align-items:flex-start;gap:14px;padding:12px var(--sp-3);}
.journey-step::before{content:"";position:absolute;left:calc(var(--sp-3) + 14px);top:0;bottom:0;width:2px;background:var(--line);}
.journey-step:first-child::before{top:26px;}
.journey-step:last-child::before{bottom:calc(100% - 26px);}
.journey-dot{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;background:var(--white);color:var(--ink);border:2px solid var(--grey-dark);}
.journey-label{min-width:0;padding-top:2px;font-weight:500;font-size:18px;line-height:1.3;color:var(--ink);}
.journey-phase{display:block;margin-top:2px;font-weight:400;font-size:15px;line-height:1.35;color:var(--grey);}
/* Faden: Die zurueckgelegte Strecke ist gruen, die kommende grau; die aktuelle Station haengt
   am gruenen Ende (siehe .hero-ablauf). */
.journey-step.done::before{background:var(--pine);}
.journey-step.current::after{content:"";position:absolute;left:calc(var(--sp-3) + 14px);top:0;width:2px;height:27px;background:var(--pine);}
.journey-step.done .journey-dot{background:var(--pine);border-color:var(--pine);color:var(--white);}
.journey-step.done .journey-label{color:var(--body-ink);}
.journey-step.current{background:var(--sage);}
.journey-step.current .journey-dot{border-color:var(--pine);border-width:3px;color:var(--pine);}
.journey-step.current .journey-label{font-weight:700;}
.journey-step.current .journey-phase{color:var(--body-ink);}
.journey-step.upcoming .journey-label{color:var(--grey);}
.journey-step.upcoming .journey-dot{color:var(--grey);}
.journey-nav-note{display:block;font-size:14px;color:var(--grey);}

/* Der naechste Schritt: eine Nachricht von Ihrem Anwalt mit genau EINER Handlung (Chernev 2015). */
.naechster{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);margin-bottom:var(--gap-card);}
.naechster h1,.naechster h2{font-size:25px;line-height:1.18;margin-bottom:var(--sp-2);}
.naechster p{font-size:var(--fs-body);}
.naechster .actions{margin-top:var(--sp-3);margin-bottom:0;}
.naechster.wartet{background:var(--sage);border-color:var(--sage);}
.standort{margin:0 0 var(--sp-3);font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;color:var(--ink);}
.standort small{display:block;margin-top:6px;font-family:var(--display);font-weight:400;font-size:17px;line-height:1.4;color:var(--body-ink);}
@media (min-width:768px){
  .naechster{padding:var(--sp-5);}
  .naechster h1,.naechster h2{font-size:32px;}
  .standort{font-size:32px;}
}

/* ----------------------------------------------------- Glaeubiger-Ampel (Status) */
.ampel{width:14px;height:14px;display:inline-block;flex:0 0 auto;}
.ampel-gruen{background:var(--green);border-radius:50%;}
.ampel-gelb{background:var(--amber);transform:rotate(45deg) scale(.8);}
.ampel-rot{background:var(--red);border-radius:3px;}
.ampel-grau{background:var(--grey-dark);border-radius:50%;}
/* Glaeubigerzeile (Rollout B10): am Telefon untereinander, damit "Schriftwechsel" eine
   ganze Nebenaktion sein kann - als Link in der Zeile war er gemessen 99 x 23 px, und
   zwar siebenmal auf einer Seite. Ab 768 px wieder eine Zeile. */
.glaeubiger-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--hair);}
.glaeubiger-row:last-child{border-bottom:0;}
.glaeubiger-pos{align-self:stretch;min-width:0;color:inherit;padding:6px 8px;margin:-6px -8px;
  border-radius:var(--r-s);text-decoration:none;}
.glaeubiger-pos strong{display:block;}
.glaeubiger-pos small{display:block;margin-top:2px;font-size:15px;color:var(--grey);}
.glaeubiger-pos:hover{background:var(--sage);color:var(--ink);}
.glaeubiger-stand{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;color:var(--body-ink);}
.brief-link{flex:0 0 auto;}
@media (min-width:768px){
  .glaeubiger-row{flex-direction:row;align-items:center;gap:var(--sp-3);}
  .glaeubiger-pos{flex:1 1 auto;align-self:auto;}
  .glaeubiger-stand{flex:0 0 auto;}
}
.brieftext{white-space:pre-wrap;margin-top:var(--sp-2);line-height:1.55;}
.ampel-bar{display:flex;height:10px;overflow:hidden;border-radius:var(--r-pill);background:var(--hair);margin:var(--sp-2) 0;}
.ampel-bar i{display:block;height:100%;}
.ampel-bar .seg-gruen{background:var(--green);}
.ampel-bar .seg-gelb{background:var(--amber);}
.ampel-bar .seg-rot{background:var(--red);}

/* ---------------------------------------- Live-Glaeubigerliste (Upload, Startseite) */
.ledger-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--pine);margin-bottom:var(--sp-2);}
.ledger-head .d{width:8px;height:8px;border-radius:50%;background:var(--pine);}
.ledger-stat{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:var(--sp-1);}
.ledger-stat .big{font-weight:700;font-size:32px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.ledger-stat .lab{font-size:15px;color:var(--grey);margin-top:var(--sp-1);}
.ledger-stat .sum{margin-inline-start:auto;text-align:right;}
.ledger-stat .sum .big{font-size:24px;}
.lc-row{display:flex;align-items:center;gap:12px;padding:10px var(--sp-3);border-bottom:1px solid var(--hair);
  transition:background-color .4s ease, opacity .3s var(--ease), transform .3s var(--ease);}
.lc-row.lc-verdeckt{opacity:0;transform:translateY(-6px);}
.lc-row.lc-neu{animation:lcneu .3s var(--ease);}
@keyframes lcneu{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.lc-row.flash{background:var(--sage);}
.lc-av{width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--pine);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.lc-nm{flex:1;font-weight:600;font-size:16px;min-width:0;overflow-wrap:anywhere;color:var(--ink);}
.lc-nm small{display:block;font-weight:400;color:var(--grey);font-size:14px;}
.lc-amt{font-weight:600;font-size:16px;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap;}
.lc-empty{color:var(--grey);font-size:16px;padding:var(--sp-2) 0;}

/* Upload */
.upload-grid{display:flex;flex-direction:column;gap:var(--sp-4);}
.upload-grid>*{min-width:0;}
.upload-grid .upload-side:has(.ledger.live){order:-1;}
@media (min-width:768px){
  .upload-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));align-items:start;}
  .upload-grid .upload-side:has(.ledger.live){order:0;}
}
/* Die Hinweisliste ist der Aufklapper des Systems (.faq, Zustandsblatt); hier steht
   nur der Abstand. Bis Rollout B2 hatte sie eigene summary-Regeln mit einem " +" im
   Text - zwei Aufklapper-Muster auf derselben Seite, und die Trefferflaeche haengte
   an der Zeilenhoehe. */
.upload-info{margin-top:var(--sp-3);}
.up-docs{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);}
/* Ohne Dokumente ist die Auswertungsleiste versteckt - dann trennt die Linie nichts
   und stand als leeres Band oben in der Karte (Rollout B2). */
#analyse-strip[hidden]+#upload-results .up-docs{margin-top:0;padding-top:0;border-top:0;}
.doc-list li.in-arbeit{background:var(--sage);border-radius:8px;padding-left:10px;}
.cat-list{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);}
.cat-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;}
.cat-list li .ci{width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--pine);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;font-size:14px;font-weight:700;}
.cat-list li b{color:var(--ink);}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;}
.doc-list{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;}
.doc-list li{display:flex;align-items:center;gap:var(--sp-2);font-size:16px;min-width:0;padding:2px 0;border-bottom:1px solid var(--hair);}
.doc-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
/* Der Dateiname ist ein Ziel fuer den Finger, kein Link im Fliesstext: Er oeffnet das
   Dokument. Gemessen in B2 waren es 24 px Hoehe, verlangt sind 44 (WCAG 2.5.8). */
.doc-list .doc-name{display:flex;align-items:center;min-height:44px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;color:var(--body-ink);overflow-wrap:anywhere;}
/* Feedback #81: die Art des Dokuments als ruhige zweite Zeile statt als Pille; sie
   rueckt an den Namen heran, dessen Zeile fuer den Finger 44 px hoch bleibt. */
.doc-art{display:block;margin:-8px 0 6px;font-size:var(--fs-small);line-height:1.3;color:var(--grey);}
.doc-del{flex:0 0 auto;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--grey);
  cursor:pointer;font-size:16px;line-height:1;}
.doc-del:hover{border-color:var(--red);color:var(--red-ink);}
/* Befunde 31/177 (Fix-Runde 5): eine nicht angenommene Datei bleibt als Zeile stehen -
   Name, Status (Zeichen + Wort + Farbe) und darunter der Grund in ganzen Saetzen. */
.doc-list li.abgelehnt .doc-name{color:var(--body-ink);}
.absage-grund{display:block;margin:0 0 6px;font-size:var(--fs-small);line-height:1.4;color:var(--body-ink);}
.absage-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2);margin:var(--sp-2) 0 0;}
.absage-hinweis a{display:inline-block;padding-block:11px;white-space:nowrap;}
/* E18 (ANWALTS_REVIEW 82): der P-Konto-Hinweis oben im Kopf der Upload-Seite. Das Wort
   „P-Konto-Bescheinigung“ bricht nicht am Bindestrich (Foto bei 375 px: „P-“ allein am Zeilenende). */
.pkonto-oben .nw{white-space:nowrap;}
/* F16 (Fix-Runde 14 D): die leise Frage traegt ihren Link als Nebenaktion - 44 px hoch. */
.pkonto-oben a[data-m="pkonto-link"]{display:inline-block;padding-block:11px;}
/* Seiten eines Belegs auf der Zuordnen-Seite (Rollout B2): untereinander, mit Rand,
   damit sie als Abbild kenntlich sind und nicht als Teil der Karte. */
.beleg-seiten{display:flex;flex-direction:column;gap:var(--sp-2);}
.beleg-seiten img{width:100%;display:block;border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);}

/* Feldliste (Datenpruefung) */
.field-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.fl-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:start;}
.fl-row>*{min-width:0;}
.fl-label{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;}
.fl-row>:not(.fl-label){flex:1.2 1 260px;}
.fl-label label{margin:0;}
/* Wie ein Label, aber ohne Feld dahinter: der Name einer Zeile, die keine Eingabe hat
   (Dateiname, unsichere Lesung). Rollout B4 - vorher stand dort ein label, das auf
   nichts zeigte. */
/* Feedback #70: „Aufenthaltstitel_Zusatzblatt_Auslaenderbehoerde.pdf" hat keine
   Leerzeichen - der Name lief aus seiner Spalte heraus und ueber den Knopf
   daneben. Die Messwerte melden dabei KEINEN Ueberlauf: Die Seite scrollt nicht,
   es ueberlagert sich nur etwas INNERHALB eines Kastens (Lehre vom 22.09.). */
.fl-name{font-weight:600;font-size:var(--fs-label);line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere;}
.fl-label .chip{align-self:flex-start;}
.fl-grund{margin-top:var(--sp-1);font-size:15px;line-height:1.45;color:var(--body-ink);max-width:68ch;}
/* Der Knopf, der den Beleg oeffnet (Rollout B4). Vorher war das ein span: nur mit der
   Maus zu treffen, fuer die Tastatur gar nicht da (WCAG 2.1.1). „bitte pruefen" traegt
   den Marker (Signalgelb heisst: hier fehlt etwas), „im Dokument ansehen" ist der
   ruhige Fall. */
.src-open{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px;
  border:1px solid var(--ink);border-radius:var(--r-pill);background:var(--signal);
  color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.3;}
.src-open.src-link{background:var(--white);border-color:var(--line);color:var(--pine);font-weight:500;}
.src-open:hover,.src-open:active{background:var(--sage);border-color:var(--pine);color:var(--ink);}
.src-open:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
.pruefung.needs-only .fl-row.clear{display:none;}
.pruefung .fl-row.has-source{padding:6px;margin:-6px;border-radius:8px;}
.pruefung .fl-row.has-source:hover{background:var(--sage);}
/* „Das weiss ich schon" (Upload-First, Scheibe 1). Die belegte Zeile ist hier
   genauso anklickbar wie in der Pruefliste - die Regel darueber haengt aber an
   .pruefung, und dieser Block ist keine Pruefliste (kein „needs-only", keine
   Auswahl). Deshalb eine eigene Regel statt der Klasse: was sie kann, soll sie,
   was sie nicht soll, kommt nicht mit. */
#bekannt .fl-row.has-source{padding:6px;margin:-6px;}
#bekannt .fl-row.has-source:hover{background:var(--sage);}
/* Der Aendern-Knopf ist eine kleine Aktion, keine zweite Spalte: ohne diese
   Regel greift .fl-row>:not(.fl-label) und gibt ihm 260 px Grundbreite. */
#bekannt .fl-row>.inline-form,#bekannt .fl-row>.btn{flex:0 0 auto;margin-inline-start:auto;}
/* Feedback #42: Auswahl und Knopf in der Zeile „braucht kurz Ihre Hilfe" - am Telefon
   untereinander, volle Breite. */
.zuordnen{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.zuordnen select{flex:1 1 220px;min-width:0;}
/* Ein Wert, den eine Unterlage NAHELEGT (Upload-First, Scheibe 3). Er steht
   unter dem Hilfetext und sah genauso aus wie er - dabei erklaert der Hilfetext
   die Frage, waehrend dieser Satz eine Antwort vorschlaegt und sagt, woher.
   Eine Linie, keine Farbe: Signalgelb heisst „hier fehlt etwas", und hier
   fehlt nichts. */
.hinweis-quelle{border-left:2px solid var(--line);padding-left:var(--sp-2);}
.doc-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(27,43,36,.6);padding:18px;}
.doc-modal[hidden]{display:none;}
.doc-modal-inner{background:var(--paper);border-radius:var(--r);width:100%;max-width:900px;max-height:90vh;overflow:auto;padding:var(--sp-3);}
.doc-modal-inner.doc-modal-wide{max-width:1200px;}
.doc-modal-frage{margin-top:var(--sp-2);}
.doc-modal-frage[hidden]{display:none;}
.doc-modal-frage p{margin:0 0 var(--sp-2);overflow-wrap:anywhere;}
.doc-modal-antworten{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.doc-modal-stage{position:relative;margin-top:var(--sp-2);}
.doc-modal-stage img{width:100%;display:block;border:1px solid var(--line);}
.doc-modal-stage .hl,.pdf-page .hl{position:absolute;display:none;background:rgba(237,232,141,.45);border:2px solid var(--ink);pointer-events:none;}

/* Datenbasis, Kommunikation, Rechtstexte (Anwaltsansicht; Bestand auf neuen Tokens) */
.db-groups{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-1) 0;}
.db-group{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);flex:0 0 auto;min-width:0;max-width:100%;}
.db-group[open]{flex:1 1 100%;}
.db-group>summary{cursor:pointer;list-style:none;min-height:44px;padding:8px 12px;font-weight:600;font-size:15px;color:var(--ink);
  display:flex;align-items:center;gap:var(--sp-2);user-select:none;}
.db-group>summary::-webkit-details-marker{display:none;}
.db-group>summary::after{content:"+";}
.db-group[open]>summary::after{content:"\2212";}
.db-group>summary b{background:var(--sage);color:var(--pine);border-radius:var(--r-pill);padding:0 8px;font-weight:700;}
.db-list{margin:0;padding:4px 16px 16px 32px;display:grid;gap:4px;font-size:16px;color:var(--body-ink);}
.db-group>.db-body{padding:4px 16px 16px;}
.db-group>.db-body>.db-list{padding:0 0 0 16px;}
/* Owner 05.10.2026: ein Formular direkt in einer Gruppe der Datenbasis (Anrede) - Rand wie die Liste. */
.db-group>.kontakt-adresse{margin:0;padding:4px 16px 16px;}
.komm-list{display:block;border-top:1px solid var(--line);}
.komm-item{border-bottom:1px solid var(--hair);}
.komm-item[open]{background:var(--white);}
.komm-item>summary{cursor:pointer;list-style:none;min-height:44px;padding:12px 4px;display:flex;align-items:baseline;gap:var(--sp-2);
  flex-wrap:wrap;user-select:none;font-size:16px;color:var(--body-ink);}
.komm-item>summary::-webkit-details-marker{display:none;}
.komm-item>summary::after{content:"+";margin-inline-start:auto;color:var(--pine);}
.komm-item[open]>summary::after{content:"\2212";}
.komm-item>summary b{font-weight:700;color:var(--ink);}
.komm-body{padding:4px 4px 16px;}
.doku-detail{border-bottom:2px solid var(--line);}
.doku-detail .komm-item{border-bottom:0;}
.komm-verlauf{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);}
.komm-verlauf>li{border-left:4px solid var(--line);padding-left:14px;}
.komm-verlauf>li.eingehend{border-left-color:var(--pine);}
.komm-kopf{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;font-size:14px;color:var(--grey);}
.komm-text{white-space:pre-wrap;font-size:16px;color:var(--body-ink);}
.abfrage-anhang{margin-top:var(--sp-2);}
.abfrage-anhang>.komm-text{padding:0 12px 12px;overflow-wrap:anywhere;}
.rechtstext{max-height:60vh;overflow:auto;max-width:60rem;border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-3);background:var(--white);}
.rechtstext p{margin:var(--sp-2) 0;font-size:16px;color:var(--body-ink);max-width:68ch;}
.rechtstext h4{margin:var(--sp-3) 0 var(--sp-1);}
.rechtstext-li{position:relative;padding-left:20px;}
.rechtstext-li::before{content:"\2013";position:absolute;left:4px;}
.rechtstext .zeile{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--hair);}
.rechtstext .zeile-dt{flex:0 0 100%;max-width:220px;font-weight:600;font-size:15px;color:var(--grey);}
.rechtstext .zeile-dd{flex:1 1 260px;font-size:16px;color:var(--ink);overflow-wrap:break-word;}

/* Step-Pills, Fortschritt, Analyse
   Die Pille IST der Link (Rollout B4). Vorher stand ein a IN der Pille: Die Pille war
   44 px hoch, das Ziel fuer den Finger aber nur 23 - auf allen sieben Pruefseiten. */
.steps-pill{display:flex;gap:6px;flex-wrap:wrap;max-width:100%;}
.steps-pill .pill{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:15px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--white);color:var(--grey);border:1px solid var(--line);text-decoration:none;}
.steps-pill a.pill:hover,.steps-pill a.pill:active{background:var(--sage);color:var(--ink);}
.steps-pill a.pill:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
.steps-pill .pill.current{background:var(--sage);color:var(--ink);font-weight:700;border-color:var(--pine);}
/* Am Telefon liegt die Reihe hinter dem Knopf, der den aktuellen Teil nennt (B4,
   dasselbe Muster wie die Themenwahl des Ratgebers). Ab 768 px steht sie immer da. */
.schritte-knopf{margin-top:var(--sp-2);}
.schritte-knopf[aria-expanded="false"]+.steps-pill{display:none;}
.schritte-knopf[aria-expanded="true"]+.steps-pill{margin-top:var(--sp-2);}
.progressbar{height:6px;border-radius:var(--r-pill);background:var(--hair);overflow:hidden;min-width:90px;}
.progressbar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--pine);}
.progressbar.full i{background:var(--green);}
.upload-progress{margin-top:var(--sp-3);}
.upload-progress p{margin:var(--sp-2) 0 0;font-size:15px;}
.analyse-strip{margin-top:var(--sp-3);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);font-size:16px;}
.analyse-strip.live{background:var(--sage);border-color:var(--sage);}
.analyse-strip .progressbar{margin-top:var(--sp-2);}
.analyse-fehler{color:var(--red-ink);}
.doc-status{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--sp-2) 0 var(--sp-3);}
.doc-status .progressbar{flex:1 1 100%;}
.inline-form{display:inline;margin:0;}
.eingabe-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:4px 0;}
.eingabe-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.eingabe-form select,.eingabe-form input{margin:0;width:auto;}

/* Anwalt-Dokumentreview */
.review-grid{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start;}
.review-pdf{flex:1 1 420px;min-width:0;max-height:820px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);padding:10px;}
.review-fields{flex:1 1 380px;min-width:0;}
.pdf-page{position:relative;margin:0 auto 12px;width:fit-content;border:1px solid var(--hair);}
.pdf-page img{display:block;max-width:100%;height:auto;}
.field-row.active td,.field-row.active th{background:var(--sage);}
/* Pruefseite des Anwalts (Feedback #67): oben die offenen Punkte als Karten mit Grund
   und „Stimmt"/„Ändern", darunter eingeklappt, was eindeutig gelesen wurde. */
.pruef-h{margin:0 0 var(--sp-1);}
.pruef-karte{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);
  padding:var(--sp-3);margin:var(--sp-2) 0;}
.pruef-karte.field-row{cursor:pointer;}
.pruef-karte.active{border-color:var(--pine);background:var(--sage);}
.pruef-name{display:block;font-weight:600;font-size:15px;color:var(--grey);}
.pruef-wert{margin:var(--sp-1) 0;font-weight:700;font-size:18px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;}
.pruef-grund{margin:0 0 var(--sp-2);font-size:15px;line-height:1.45;color:var(--body-ink);}
.pruef-aktionen{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-start;}
.pruef-aendern>summary{list-style:none;}
.pruef-aendern>summary::-webkit-details-marker{display:none;}
.pruef-aendern[open]>summary{background:var(--sage);}
.pruef-aendern-form{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2);}
.pruef-aendern-form input[type="text"]{flex:1 1 180px;min-width:0;min-height:44px;}
.pruef-aendern-form .btn{flex:0 0 auto;white-space:nowrap;}
.pruef-aendern .stack{margin-top:var(--sp-2);}
/* Eindeutige Werte als Zeilen: Name ueber Wert, rechts „Ändern"; offen ueber die volle Breite. */
.pruef-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:10px 16px;border-top:1px solid var(--hair);}
.pruef-zeile.active{background:var(--sage);}
.pruef-zeile-text{flex:1 1 200px;min-width:0;}
.pruef-zeile-wert{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.pruef-zeile .pruef-aendern[open]{flex-basis:100%;}
/* Aufklappen wie .doc-group: Kasten, „+" / „−" rechts - sonst sah niemand, dass hier Werte stehen. */
.pruef-eindeutig{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);margin:var(--sp-4) 0 var(--sp-2);}
.pruef-eindeutig>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:48px;padding:10px 16px;font-weight:600;color:var(--ink);}
.pruef-eindeutig>summary::-webkit-details-marker{display:none;}
.pruef-eindeutig>summary::after{content:"+";margin-inline-start:auto;color:var(--pine);}
.pruef-eindeutig[open]>summary::after{content:"\2212";}
.pruef-freigabe{margin-top:var(--sp-4);}
.bigline{font-weight:700;font-size:26px;line-height:1.1;color:var(--ink);margin:0 0 var(--sp-1);font-variant-numeric:tabular-nums lining-nums;}

/* Arbeitsmasken des Anwalts (Rollout D1, 22.09.2026).
   Bis dahin standen diese Breiten als `style="min-width:15rem"` in den
   Vorlagen - 20 Attribute ueber fuenf Seiten. Der Owner-Entscheid zu Block D
   lautet "konsistent machen, nicht neu entwerfen": Die Arbeitslogik der dichten
   Zeilen bleibt, die Werte ziehen nur aus dem Attribut in eine benannte Regel.
   Die Breiten entsprechen dem, was das Feld aufnehmen muss - eine PLZ ist
   fuenfstellig, eine Hausnummer kuerzer, eine E-Mail lang. */
.kontakt-zeile b{min-width:12rem;}
.kontakt-zeile input[name="email"]{min-width:15rem;}
/* Feedback #75/#76: Empfaengerliste der Mandantenseite - E-Mail zuerst mit „Speichern"
   daneben, die Anschrift als Text mit „Ändern" (review/mandant_detail.html). */
.kontakt-liste{list-style:none;margin:var(--sp-2) 0 0;padding:0;}
.kontakt{display:grid;gap:var(--sp-2);padding:var(--sp-3) 0;border-top:1px solid var(--line);}
.kontakt-name{font-size:17px;color:var(--ink);}
.kontakt-mail>label[for]{display:block;margin-bottom:4px;font-weight:600;font-size:15px;color:var(--grey);}
.kontakt-mail-zeile{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.kontakt-mail-zeile input{flex:1 1 260px;min-width:0;max-width:420px;}
.kontakt-verz{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;color:var(--grey);}
.kontakt-anschrift{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:flex-start;}
.kontakt-text{flex:0 1 auto;min-width:0;line-height:1.5;align-self:center;}
.kontakt-aendern>summary{list-style:none;}
.kontakt-aendern>summary::-webkit-details-marker{display:none;}
.kontakt-aendern[open]{flex-basis:100%;}
.kontakt-aendern[open]>summary{background:var(--sage);}
.kontakt-adresse{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-2);max-width:560px;margin-top:var(--sp-2);}
.kontakt-adresse label{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--grey);}
.kontakt-adresse input[name="postal_code"]{max-width:8rem;}
.kontakt-adresse button{justify-self:start;}
@media (min-width:768px){
  .kontakt-adresse{grid-template-columns:minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 2fr);}
  .kontakt-adresse .kontakt-breit{grid-column:1 / -1;}
}
.kontakt-zeile input[name="frist_tage"],.kontakt-zeile input[type="number"]{width:5.5rem;}
/* Die Suche ueber der Mandantenliste: ein Feld, ein Knopf, hoechstens 480 px -
   eine Suchzeile ueber die ganze Breite laesst das Feld leer wirken. */
.suchzeile{max-width:480px;}
.suchzeile input[type="text"]{flex:1;}
/* Anwalts-Dashboard (#85, #93, #94): unter dem Wert eine zweite Zeile - die Rufnummer fuer
   das anstehende Gespraech (gut sichtbar, deshalb fett), das Paket, was beauftragt ist. */
td .zusatz{display:block;margin-top:var(--sp-1);}
.als-naechstes .rufnummer{font-weight:600;color:var(--ink);}
/* Zwei Felder nebeneinander, die NICHT gleich breit sind (Strasse/Hausnummer,
   PLZ/Ort). `.row>p{flex:1 1 200px}` macht sie sonst gleich gross. */
.row.tight>p.weit{flex:3;}
.row.tight>p.schmal{flex:1;}
/* Ein Wort statt einer Zahl in der Kennzahl: „erfasst", „Nullplan". Die grosse
   Ziffernstufe der KPI ist fuer Zahlen gemacht. */
.kpi-value.wort{font-size:1.1rem;}

/* ----------------------------------------------------------------- layout */
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.row>*{min-width:0;}
.row.between>:first-child{margin-inline-end:auto;}
.row.between,.row.center{align-items:center;}
.row.tight{gap:var(--sp-2);}
.row>p{flex:1 1 200px;}
.filter-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end;}
.filter-row select,.filter-row input,.filter-row .btn{height:54px;}
.stack{display:flex;flex-direction:column;gap:var(--sp-3);}
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin:var(--sp-4) 0 var(--gap-text);}
.actions:first-child{margin-top:0;}
.actions .spacer{margin-inline-start:auto;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:var(--gap-card);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));gap:var(--gap-card);}
.grid-2>*,.grid-3>*{min-width:0;}
.grid-2>.card,.grid-3>.card{margin-bottom:0;}
.grid-2,.grid-3{margin-bottom:var(--gap-card);}

/* ------------------------------------------- Admin / Formular-Mapping (dicht) */
.split{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));gap:var(--sp-4);align-items:start;}
.split>*{min-width:0;}
.sticky{position:sticky;top:96px;}
.preview-wrap{position:relative;border:1px solid var(--line);overflow:hidden;}
.preview-wrap img{width:100%;display:block;}
.preview-wrap.narrow{max-width:640px;}
.box{position:absolute;border:2px solid var(--red);background:rgba(140,47,34,.10);font-size:9px;color:var(--red-ink);}
.box.mapped{border-color:var(--green);background:rgba(51,142,107,.14);color:var(--green-ink);}
.box.related{border-color:var(--amber);background:rgba(138,100,18,.12);color:var(--amber-ink);}
.box.selected{z-index:2;}

/* ---------------------------------------------- Mandant-Detail: Kopf/Tabs */
.case-head{padding:var(--sp-4);margin-bottom:var(--sp-4);}
.case-head-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.case-id{display:flex;align-items:center;gap:var(--sp-3);flex:1 1 280px;min-width:0;}
.case-avatar{flex:none;width:48px;height:48px;border-radius:50%;background:var(--sage);color:var(--pine);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;text-transform:uppercase;}
.case-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;width:100%;}
@media (min-width:768px){.case-actions{width:auto;}}
.phase-strip{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);}
.phase{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;font-size:15px;color:var(--grey);
  appearance:none;border:none;background:none;cursor:pointer;text-decoration:none;padding:4px 6px;border-radius:8px;}
.phase:hover{color:var(--ink);background:var(--sage);}
.phase-dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;
  border:2px solid var(--grey-dark);color:var(--grey);}
.phase.done{color:var(--body-ink);}
.phase.done .phase-dot{background:var(--pine);border-color:var(--pine);color:var(--white);}
.phase.current{color:var(--ink);font-weight:700;}
.phase.current .phase-dot{border-color:var(--pine);color:var(--pine);}
.phase-sep{color:var(--grey-dark);}
.doc-group{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);margin-bottom:var(--sp-2);}
.doc-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:48px;padding:10px 16px;font-weight:600;font-size:18px;color:var(--ink);}
.doc-group>summary::-webkit-details-marker{display:none;}
.doc-group>summary::after{content:"+";margin-inline-start:auto;color:var(--pine);}
.doc-group[open]>summary::after{content:"\2212";}
.doc-group>summary b{background:var(--sage);color:var(--pine);border-radius:var(--r-pill);padding:0 8px;font-size:14px;}
.doc-group-body{padding:0 16px 12px;}
.doc-group-body table{margin:0;}
.cluster-sub + .cluster-sub{border-top:1px solid var(--hair);}
.cluster-sub-head{padding:8px 16px 2px;font-weight:600;font-size:15px;color:var(--grey);}
.bundle-list{margin:0;padding-left:24px;}
.bundle-list li{padding:4px 0;border-top:1px solid var(--hair);}
.bundle-list li:first-child{border-top:none;}
.bundle-list .muted{font-size:14px;}
.op-list{margin:var(--sp-1) 0 var(--gap-text);padding-left:22px;}
.op-list li{padding:4px 0;}
/* Nummerierte Schrittliste: was als Naechstes passiert (vor jeder Handlung, MaPS/CogCo 2023). */
.steps-list{list-style:none;counter-reset:sl;margin:var(--sp-2) 0 var(--gap-text);padding:0;}
.steps-list li{counter-increment:sl;position:relative;padding:10px 0 10px 42px;font-size:17px;line-height:1.4;color:var(--body-ink);}
.steps-list li::before{content:counter(sl);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--white);color:var(--pine);border:2px solid var(--pine);font-weight:700;font-size:15px;}
/* Faden zwischen den Stationen (siehe .hero-ablauf). */
.steps-list li::after{content:"";position:absolute;left:14px;top:38px;bottom:-8px;width:2px;background:var(--pine);}
.steps-list li:last-child::after{display:none;}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);}
.tab{appearance:none;background:none;border:none;cursor:pointer;min-height:44px;font-family:var(--display);font-weight:500;font-size:16px;color:var(--grey);
  padding:8px 16px;border-radius:var(--r-pill);text-decoration:none;}
.tab:hover{color:var(--ink);background:var(--sage);}
.tab.is-active{background:var(--pine);color:var(--white);font-weight:700;}
.tab b{background:var(--sage);color:var(--pine);border-radius:var(--r-pill);padding:0 7px;font-size:13px;font-weight:700;margin-inline-start:6px;}
/* Feedback #68: "17/20" am Reiter Dokumente - offen wie .badge.warn; die Zahl traegt den Status. */
.tab b.warn{background:var(--signal);color:var(--ink);}
.tabpanel{display:none;}
.tabpanel.is-active{display:block;animation:tabin .2s var(--ease);}
@keyframes tabin{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));gap:var(--sp-2);margin:var(--sp-1) 0 var(--gap-card);}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-3);min-width:0;}
.kpi-label{display:block;font-weight:600;font-size:15px;color:var(--grey);}
.kpi-value{display:block;margin-top:var(--sp-1);font-weight:700;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.kpi-value.sm{font-size:18px;overflow-wrap:anywhere;}
.next-step{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:12px 16px;margin-bottom:var(--sp-4);border-radius:var(--r-s);background:var(--sage);}
.next-step-label{font-weight:600;font-size:15px;color:var(--grey);}
.next-step strong{font-size:20px;}
/* Feedback #69: Termin und „Gespraech gefuehrt" stehen im Kasten, rechts von der Handlung. */
.next-step-termin{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-inline-start:auto;}
.hint-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0;}
.umfang{background:var(--sage);border-radius:var(--r-s);padding:16px;margin-bottom:var(--sp-4);}
.umfang .umfang-lab{display:block;margin-bottom:6px;font-weight:600;font-size:15px;color:var(--grey);}
.umfang p{font-size:16px;line-height:1.55;color:var(--body-ink);}
.input-short{max-width:12rem;}
.table-narrow{max-width:32rem;}
.break-all{word-break:break-all;}
.pre-wrap{white-space:pre-wrap;}
.check-columns{columns:2 16rem;column-gap:var(--sp-4);}
.check-columns>label{display:block;}
.search-form{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.search-form input[type=text],.search-form input[type=search]{flex:1 1 20rem;width:auto;min-width:0;}
.page-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--gap-h2);}
.page-head>h1,.page-head>h2,.page-head>h3{margin:0;}
.page-head>h1+*,.page-head>h2+*{margin-inline-start:auto;}
.inline-form + .btn,.btn + .inline-form{margin-inline-start:var(--sp-2);}
.search-row{max-width:480px;}
.search-row input{flex:1 1 auto;width:auto;min-width:0;}
.w-xs{width:4rem;}
.w-sm{width:6rem;}
.w-md{width:10rem;}
.w-lg{width:16rem;}

/* =============================================================== STARTSEITE
   Die Seite liest sich wie ein Brief: Die Person spricht zuerst, dann kommt der Weg, dann die
   Handlung. Ruhe entsteht aus hellen, wenig gesaettigten Flaechen im Wechsel Papier / Salbei. */
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--edge);}
.wrap>*{min-width:0;}
.sec{padding:var(--sp-6) 0;}
.sec.sanft{background:var(--sage);}
.sec-head{margin-bottom:var(--sp-4);}
.klabel{display:block;margin:0 0 var(--sp-2);font-weight:600;font-size:var(--fs-eyebrow);color:var(--pine);}
h2.sec-h{max-width:24ch;}
.sec-sub{font-size:var(--fs-read);line-height:1.5;color:var(--body-ink);max-width:60ch;margin:0;}
.prose p,.about-text p,.pk-grid p,.faq .ans,.final-text{font-size:var(--fs-read);line-height:1.55;max-width:62ch;}
.anker{display:block;height:0;overflow:hidden;}
@media (min-width:768px){.sec{padding:var(--sp-7) 0;}.sec-head{margin-bottom:var(--sp-6);}}

/* Hero: der erste Bildschirm entscheidet. Auf 375 x 812 stehen Person, Zusage, Preis, Ablauf
   und die eine Handlung ueber der Falz. */
.hero{padding:var(--sp-3) 0 0;}
.hero-v2{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-5);}
.hero-v2>*{min-width:0;}
.hero .person{margin-bottom:var(--sp-2);}
h1.hero-h{margin:0 0 var(--sp-2);}
/* Zweite Zeile der Ueberschrift: das Produkt, lesbar (20 px Hanken) statt als 13-px-Dachzeile.
   Uebernahme aus Richtung A (18.09.2026): Die Fuenf-Sekunden-Frage "Was ist das hier?" muss sitzen. */
.hero-h-sub{display:block;margin-top:10px;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;letter-spacing:0;color:var(--pine);}
/* Feedback #57/#78: Auf der Startseite traegt die zweite Zeile das Produkt - groesser, und
   das Produktwort in Tinte. Nur .hero .hero-h-sub: dieselbe Klasse steht auch im Flow. */
/* Feedback #71 (25.09.2026): die Unterzeile ist drei Saetze lang - 6 statt 10 px Abstand,
   damit der Knopf im ersten Bildschirm bleibt (gemessen bei 375 x 812). */
.hero .hero-h-sub{font-size:23px;line-height:1.25;margin-top:6px;}
.hero .hero-h-sub b{font-weight:800;color:var(--ink);}
/* Der Preis als eigene Zeile, Zahl aus pricing.py mit Grundlage (SRA-RCT; van der Bles 2020). */
.hero-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:0 0 var(--sp-2);font-weight:500;font-size:17px;line-height:1.3;color:var(--body-ink);}
.hero-preis .zahl{font-weight:700;font-size:30px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.hero-sub{margin:0 0 var(--sp-3);font-size:var(--fs-body);line-height:1.45;color:var(--body-ink);max-width:48ch;}
/* Ablauf VOR dem Button: Was nach dem Klick passiert, ist die groesste Schwelle; eine
   Ablauf-Karte hob die Hilfesuche von 34,6 auf 54,0 % (MaPS/CogCo 2023, n = 1.507). */
.hero-ablauf{list-style:none;margin:0 0 var(--sp-3);padding:8px var(--sp-3);border-radius:var(--r);background:var(--sage);}
.hero-ablauf li{position:relative;display:flex;align-items:center;gap:10px;padding:3px 0;font-weight:600;font-size:16px;line-height:1.3;color:var(--ink);}
/* Der gruene Faden (Formmotiv, 18.09.2026): Stationen als Kreise mit Ring, verbunden durch eine
   2-px-Linie in Kieferngruen. Verbundenes wird als zusammengehoerig gelesen (Palmer & Rock 1994,
   uniform connectedness); der Faden sagt ohne Farbe: ein Weg, in dieser Reihenfolge, begleitet.
   Er kehrt wieder in .steps-list und .journey. Am Desktop steht der Ablauf zweispaltig, dort
   entfaellt die Linie (zwei Ketten waeren falsch). */
.hero-ablauf li::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--pine);}
.hero-ablauf li:first-child::before{top:50%;}
.hero-ablauf li:last-child::before{bottom:50%;}
.hero-ablauf b{position:relative;flex:0 0 auto;display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--white);color:var(--pine);border:2px solid var(--pine);font-weight:700;font-size:13px;}
.hero-ablauf small{font-weight:400;font-size:15px;color:var(--body-ink);}
.hero-actions{margin:0 0 var(--sp-2);}
.hero-note{margin:0 0 var(--sp-3);font-size:var(--fs-small);line-height:1.45;color:var(--body-ink);}
.hero-price{margin:0 0 var(--sp-4);font-size:var(--fs-small);line-height:1.45;color:var(--body-ink);}
.hero-weiche{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3) var(--sp-3) var(--sp-2);}
.hero-weiche .hw-lab{display:block;font-weight:700;font-size:19px;color:var(--ink);}
.hero-weiche .hw-text{display:block;margin:4px 0 0;font-size:17px;line-height:1.45;color:var(--body-ink);}
.trust{margin-top:var(--sp-5);}
.trust-row{list-style:none;margin:0 auto;padding:0 var(--edge) var(--sp-5);display:grid;gap:10px;}
.trust-item{position:relative;padding-left:34px;font-weight:500;font-size:16px;line-height:1.4;color:var(--ink);}
.trust-item::before{content:"\2713";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--sage);color:var(--pine);font-weight:700;font-size:14px;}
@media (min-width:768px){
  .hero{padding-top:var(--sp-6);}
  .hero-v2{grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:var(--sp-6) var(--sp-7);align-items:start;}
  .hero-sub{font-size:var(--fs-read);}
  .hero .hero-h-sub{font-size:28px;}
  .hero-ablauf{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 var(--sp-4);padding:14px var(--sp-4);}
  .hero-ablauf li::before{display:none;}
  .hero-ablauf li{font-size:17px;}
  .hero-actions .btn{width:auto;min-width:320px;}
  .trust{margin-top:var(--sp-6);}
  .trust-row{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-3) var(--sp-6);padding-bottom:var(--sp-6);}
}
@media (min-width:1100px){.trust-row{grid-template-columns:repeat(4, minmax(0, 1fr));}}

/* Ablauf: fuenf Schritte, je ein kleines Bild des Owners zum Text (textgebundene Bilder helfen
   bei geringer Lesekompetenz, Houts 2006; sie erklaeren, sie schmuecken nicht). */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);}
.step{display:grid;grid-template-columns:56px minmax(0, 1fr);gap:4px var(--sp-3);align-items:start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);}
.step .num{grid-column:2;font-weight:600;font-size:var(--fs-eyebrow);color:var(--pine);}
.step .num::before{content:"Schritt ";}
.step-ikon{grid-column:1;grid-row:1 / span 3;display:block;width:56px;height:56px;}
.step h3{grid-column:2;margin:0 0 4px;font-size:20px;}
/* Feedback #66: Ab 900 px ist eine Karte rund 163 px breit - "Schuldenbereinigungsplan" lief
   ueber den Rand. Trennen wie bei den Ueberschriften, notfalls im Wort umbrechen. */
.step p{grid-column:2;margin:0;font-size:17px;line-height:1.5;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(5, minmax(0, 1fr));gap:var(--sp-3);}
  .step{display:block;padding:var(--sp-4) var(--sp-3);}
  .step-ikon{width:64px;height:64px;margin:0 0 var(--sp-2);}
  .step .num{display:block;margin-bottom:2px;}
  .step h3{font-size:19px;}
  .step p{font-size:16px;}
}
.zusagen{margin-top:var(--sp-5);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4) var(--sp-3) var(--sp-2);}
.zusagen-h{margin:0 0 var(--sp-2);font-family:var(--serif);font-weight:600;font-size:24px;}
.zusagen-liste{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.zusagen-liste li{display:grid;grid-template-columns:36px minmax(0, 1fr);gap:0 var(--sp-2);padding:12px 0;border-top:1px solid var(--hair);font-size:17px;line-height:1.5;}
.z-num{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;background:var(--sage);color:var(--pine);
  font-weight:700;font-size:14px;}
.k-box{border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:var(--sp-3);}
.k-box h3{margin-bottom:var(--sp-2);}
.k-box p{font-size:17px;line-height:1.5;}
.k-box.erstgespraech-box{margin-top:var(--sp-4);background:var(--sage);border-color:var(--sage);}
.erstgespraech-box .eg-cta{margin:var(--sp-3) 0 0;}
.erstgespraech-box .eg-cta .btn{width:100%;justify-content:space-between;}
@media (min-width:768px){
  .zusagen{padding:var(--sp-5);}
  .zusagen-h{font-size:30px;}
  .zusagen-liste{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 var(--sp-6);}
  .k-box{padding:var(--sp-5);}
  .erstgespraech-box .eg-cta .btn{width:auto;}
}
.about-grid{display:grid;gap:var(--sp-4);}
.schild{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);align-self:start;}
.schild .person{margin-bottom:var(--sp-2);}
.schild dl{margin:0;display:grid;gap:0;}
.schild dt{padding-top:10px;border-top:1px solid var(--hair);font-weight:600;font-size:15px;color:var(--grey);}
.schild dd{margin:0;padding:1px 0 10px;font-weight:600;font-size:17px;line-height:1.35;color:var(--ink);}
.about-text h3{margin-top:var(--sp-4);}
.about-text h3:first-child{margin-top:0;}
@media (min-width:900px){
  .about-grid{grid-template-columns:minmax(0, 360px) minmax(0, 1fr);gap:var(--sp-7);}
  .schild{position:sticky;top:104px;padding:var(--sp-4);}
}
/* Kosten als Blatt (Uebernahme aus A): mobil je Empfaenger untereinander, am Desktop zwei Spalten. */
.kosten .k-zeile{flex-direction:column;align-items:stretch;gap:6px;padding-top:14px;padding-bottom:14px;}
.kosten .k-zeile .zl .k-wer{display:block;font-weight:700;font-size:19px;line-height:1.3;color:var(--ink);}
.kosten .k-zeile .zl .k-wofuer{display:block;margin-top:2px;font-size:16px;color:var(--body-ink);}
.kosten .k-zeile .zw{flex:1 1 auto;white-space:normal;font-weight:500;font-size:17px;line-height:1.45;color:var(--ink);}
.kosten .k-zeile .zw .zahl{display:block;font-weight:700;font-size:24px;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;}
.kosten .k-zeile .zw small{display:block;margin-top:4px;font-size:16px;font-weight:400;color:var(--body-ink);}
.k-erl summary{list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:44px;cursor:pointer;font-weight:600;font-size:17px;color:var(--pine);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.k-erl summary::-webkit-details-marker{display:none;}
.k-erl summary .ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--sage);
  font-weight:700;font-size:18px;text-decoration:none;}
.k-erl[open] summary .ic{background:var(--pine);color:var(--white);}
.k-erl .ans{padding:var(--sp-2) 0 0;max-height:none;border:0;background:transparent;}
.k-erl .ans .zeile{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 0;border-bottom:1px solid var(--hair);}
.k-erl .ans .zeile-dt{flex:1 1 220px;max-width:none;font-weight:500;font-size:16px;color:var(--body-ink);}
.k-erl .ans .zeile-dd{flex:0 1 auto;max-width:100%;min-width:0;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums lining-nums;}
/* Kostenrechner (#112): Formular und Ergebnis - im Aufklapper der Kostenzeile und auf der
   eigenen Seite. Eigene Zeilen statt eines Blatts, weil er IN einer Blatt-Zeile steht; die
   Regeln stehen nach .kosten .k-zeile .zw und gewinnen dort bei gleicher Spezifitaet. */
.kr-form{margin:var(--sp-2) 0 0;}
.kr-form .form-field>label{font-weight:600;font-size:16px;color:var(--ink);}
.kr-ergebnis{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--line);}
.kr-ergebnis .kr-titel{margin:0 0 var(--sp-1);font-weight:700;font-size:17px;color:var(--ink);}
.kr-ergebnis .kr-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:10px 0;border-bottom:1px solid var(--hair);}
.kr-ergebnis .kr-zeile .zl{flex:1 1 auto;min-width:0;font-weight:500;font-size:16px;color:var(--body-ink);}
.kr-ergebnis .kr-zeile .zl small{display:block;margin:0;font-weight:400;font-size:15px;color:var(--grey);}
.kr-ergebnis .kr-zeile .zw{flex:0 0 auto;white-space:nowrap;font-weight:700;font-size:18px;line-height:1.3;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);}
.kr-ergebnis .kr-zeile.betont{padding-inline:var(--sp-2);border-bottom:0;border-radius:var(--r-s);background:var(--sage);}
.kr-ergebnis .kr-zeile.betont .zl{color:var(--ink);}
.kr-ergebnis .kr-fuss{margin:var(--sp-2) 0 0;font-weight:400;font-size:var(--fs-small);line-height:1.5;color:var(--body-ink);}
/* Die Annahmen im Fuss des Blatts (Schnellcheck-Ergebnis): derselbe Aufklapper, kleiner Text. */
.blatt-fuss .k-erl{margin-top:var(--sp-1);}
.blatt-fuss .k-erl .ans{margin:0;font-size:var(--fs-small);line-height:1.5;}
@media (min-width:900px){
  .kosten .k-zeile{flex-direction:row;align-items:flex-start;gap:var(--sp-5);padding:var(--sp-3) var(--sp-4);}
  .kosten .k-zeile .zl{flex:0 0 42%;}
}
.pk-sec{padding:var(--sp-6) 0;background:var(--sage);}
.pk-grid{display:grid;gap:0 var(--sp-6);}
.pk-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);margin:var(--sp-3) 0 0;}
.pk-actions .btn{justify-content:space-between;}
@media (min-width:768px){
  .pk-sec{padding:var(--sp-7) 0;}
  .pk-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .pk-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);}
}
.wn-grid{display:grid;gap:var(--sp-3);}
.wn{padding:var(--sp-3);background:var(--white);border:1px solid var(--line);border-radius:var(--r);}
.wn h3{font-size:19px;line-height:1.3;margin-bottom:6px;}
.wn p{margin:0;font-size:17px;line-height:1.5;}
@media (min-width:768px){.wn-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-4);}}
/* Aufklapper: ganze Zeile ist das Ziel, Plus im Kreis, Antwort in Lesegroesse. */
.faq-wrap{max-width:860px;display:grid;gap:var(--sp-2);}
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);padding:0 var(--sp-3);}
.faq summary{list-style:none;cursor:pointer;min-height:60px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-weight:700;font-size:18px;line-height:1.3;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .ic{width:32px;height:32px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-weight:500;font-size:20px;line-height:1;color:var(--pine);transition:transform .2s var(--ease);}
.faq[open] summary .ic{background:var(--pine);color:var(--white);transform:rotate(45deg);}
.faq .ans{padding:0 0 var(--sp-3);color:var(--body-ink);}
.faq-more{margin-top:var(--sp-3);}
@media (min-width:768px){.faq summary{font-size:20px;min-height:68px;}}

/* ------------------------------------------------------- Ratgeber (Rollout A3)
   Die Wissensseite ist eine lange Liste von Aufklappern, gegliedert in Themen und
   durchsuchbar. Sie erbt den Aufklapper von oben; hier stehen nur die Teile, die es
   sonst nirgends gibt: der schmale Lesesatz, die Suche, die Themenfilter und die
   Gruppen. Mobil zuerst, Desktop ausschliesslich ueber min-width. */
.wrap-narrow{width:100%;max-width:calc(880px + 2 * var(--edge));margin:0 auto;padding:0 var(--edge);}
.faq-sec{padding:var(--sp-5) 0 var(--sp-6);}

/* Suche: Label sichtbar, Hilfetext darunter, kein Platzhalter (system.md § 7). */
.suche{margin-bottom:var(--sp-3);}
.suche label{display:block;font-weight:600;font-size:var(--fs-label);line-height:1.3;
  color:var(--ink);margin-bottom:var(--sp-1);}
.suche input{width:100%;box-sizing:border-box;min-height:54px;padding:0 14px;
  border:2px solid var(--grey-dark);border-radius:var(--r-s);background:var(--white);
  font-family:var(--display);font-size:17px;line-height:1.4;color:var(--body-ink);}
.suche input:focus-visible{border-color:var(--pine);outline:3px solid var(--pine);outline-offset:1px;}
.suche .hilfe{margin:6px 0 0;font-size:var(--fs-small);line-height:1.45;color:var(--grey);}

/* Themenwahl: Am Telefon EIN Knopf, der aufklappt (Owner 2026-09-18) - acht Pillen
   untereinander kosteten gemessen 272 px und schoben die erste Frage aus dem ersten
   Bildschirm. Ab 768 px ist der Knopf weg und die Reihe immer da. Das entscheidet die
   Media-Query; JavaScript setzt nur aria-expanded, also den Zustand, nicht das Layout.
   Ohne JavaScript filtert die Seite ohnehin nicht (faq.js), es geht also nichts verloren. */
.themen-knopf,.schritte-knopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  width:100%;min-height:var(--tap);padding:0 var(--sp-3);
  border:2px solid var(--grey-dark);border-radius:var(--r-s);background:var(--white);
  color:var(--body-ink);cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:500;font-size:16px;line-height:1.3;}
.themen-knopf b,.schritte-knopf b{font-weight:700;color:var(--ink);}
.themen-knopf:hover,.themen-knopf:active,.schritte-knopf:hover,.schritte-knopf:active{background:var(--sage);}
.themen-knopf:focus-visible,.schritte-knopf:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
.themen-knopf .tk-ic,.schritte-knopf .tk-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--pine);
  font-size:18px;line-height:1;transition:transform .2s var(--ease);}
.themen-knopf[aria-expanded="true"] .tk-ic,.schritte-knopf[aria-expanded="true"] .tk-ic{background:var(--pine);color:var(--white);
  transform:rotate(45deg);}
/* Zugeklappt ist der Grundzustand am Telefon. */
.themen-knopf[aria-expanded="false"]+.filters{display:none;}
/* Feedback #68/#67 (22.09.2026): Diese Regeln standen bei den Pillen, also VOR
   dem gemeinsamen Stilblock oben - und `.themen-knopf,.schritte-knopf{display:flex}`
   hat sie ueberschrieben. Am Desktop stand der Knopf deshalb da, obwohl er dort
   nichts mehr zu tun hat: Ein Klick verschob nur die Pillen („die box hat keine
   funktion"). `.themen-knopf` hatte dieselbe Regel weiter unten und war deshalb
   in Ordnung - dieselbe Absicht, zwei Plaetze, ein Fehler.

   LEHRE: Gleiche Spezifitaet entscheidet die REIHENFOLGE. Eine Media-Query hebt
   sie nicht auf. Wer eine Regel verschiebt, fragt: steht sie noch hinter dem,
   was sie uebersteuern soll? */
@media (min-width:768px){
  .schritte-knopf{display:none;}
  .schritte-knopf[aria-expanded="false"]+.steps-pill{display:flex;}
  /* Ohne den Knopf traegt die Reihe ihren Abstand selbst - sonst klebt sie am
     Kasten darueber (#67). */
  .steps-pill{margin-top:var(--sp-2);}
}

/* Themenfilter: Auswahl traegt nie Farbe allein - gewaehlt ist Flaeche PLUS fetter
   PLUS Haken, und aria-pressed sagt es der Vorlesesoftware. */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);}
.filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);
  padding:0 var(--sp-3);border:2px solid var(--grey-dark);border-radius:var(--r-pill);
  background:var(--white);color:var(--body-ink);cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:16px;line-height:1;
  letter-spacing:0;text-transform:none;}
.filter-chip::before{content:"";width:0;overflow:hidden;}
.filter-chip:hover,.filter-chip:active{background:var(--sage);}
.filter-chip:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
.filter-chip[aria-pressed="true"]{background:var(--sage);border-color:var(--pine);
  color:var(--ink);font-weight:700;}
.filter-chip[aria-pressed="true"]::before{content:"\2713\00a0";width:auto;color:var(--pine);}

/* Themengruppen: Ueberschrift, darunter die Aufklapper der Gruppe. */
.group{margin-top:var(--sp-5);}
.group:first-child{margin-top:0;}
.group-head{margin-bottom:var(--sp-3);}
.group-head h2{margin:0;}
.group-list{display:grid;gap:var(--sp-2);}

/* Leerzustand der Suche: sagt, was zu tun ist, statt nur "nichts gefunden". */
.no-results{display:none;padding:var(--sp-3);background:var(--sage);border-radius:var(--r);
  font-size:var(--fs-body);line-height:1.5;color:var(--body-ink);}

/* ------------------------- Rechtsseiten und Vorschaltseite (Rollout A5)
   Impressum, Datenschutz und AGB tragen lange Texte. Sie brauchen Ruhe und einen
   schmalen Lesesatz, sonst nichts. Die Klassennamen sind bewusst eigene: .doc-head
   und .doc-meta gibt es im System schon fuer das Dokument-Overlay der App.
   Die Fusszeile steht hier, weil _legal_footer.html sie mit der Vorschaltseite teilt. */
.rechtsseite-kopf{padding-top:var(--sp-5);}
.rechtsseite-kopf h1{margin-top:0;}
.rechtsseite-meta{margin:0 0 var(--sp-4);font-family:var(--display);font-weight:600;
  font-size:var(--fs-eyebrow);line-height:1.4;letter-spacing:0;text-transform:none;color:var(--pine);}
.rechtsseite{max-width:62rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-3);margin-bottom:var(--sp-6);}
.rechtsseite h2{font-size:var(--fs-h3);line-height:1.2;}
.rechtsseite h2:first-child{margin-top:0;}
.rechtsseite h4{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;
  margin:var(--sp-4) 0 var(--sp-2);}
.rechtsseite p{font-size:var(--fs-read);line-height:1.6;color:var(--body-ink);max-width:68ch;
  margin-bottom:var(--gap-text);overflow-wrap:break-word;}
.rechtsseite .rechtstext-li{position:relative;padding-left:24px;margin-bottom:8px;max-width:68ch;}
.rechtsseite .rechtstext-li::before{content:"\2013";position:absolute;left:4px;}
.rechtsseite .zeile{display:flex;flex-wrap:wrap;gap:8px 24px;padding:var(--sp-3) 0;
  font-size:17px;max-width:68ch;border-bottom:1px solid var(--hair);}
.rechtsseite .zeile-dt{flex:1 1 200px;max-width:240px;min-width:0;font-family:var(--display);
  font-weight:600;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--grey);}
.rechtsseite .zeile-dd{flex:1 1 300px;min-width:0;line-height:1.5;color:var(--ink);
  overflow-wrap:break-word;}
.rechtsseite .btn{margin-top:var(--sp-4);}
@media (min-width:768px){
  .rechtsseite-kopf{padding-top:var(--sp-6);}
  .rechtsseite{padding:var(--sp-5);}
}

/* Schmale Fusszeile: Rechtsseiten und Vorschaltseite. */
.foot-schlicht{background:var(--paper);border-top:1px solid var(--line);
  padding:var(--sp-4) 0;}
.foot-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);}
.cp{min-width:0;font-size:var(--fs-small);line-height:1.5;color:var(--grey);}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);}
/* min-width nicht vergessen: "AGB" ist so kurz, dass der Link sonst 31 px breit bleibt -
   44 px gelten in BEIDE Richtungen (gemessen in A5). Wie .foot-col a auf der Startseite. */
.foot-links a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;font-weight:500;font-size:16px;color:var(--body-ink);}

/* Vorschaltseite: eine Aussage, ein Weg hinein, sonst nichts. */
.stage{padding:var(--sp-6) 0 var(--sp-7);}
.stage-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-4);
  margin-top:var(--sp-4);}
.stage .sub{margin:0;font-size:var(--fs-read);line-height:1.55;color:var(--body-ink);max-width:56ch;}
.stage .panel{display:grid;gap:6px;border-radius:var(--r);background:var(--sage);
  padding:var(--sp-3);font-size:17px;line-height:1.5;color:var(--body-ink);}
.stage .panel strong{font-family:var(--display);font-weight:700;color:var(--ink);}
.schlicht-head{background:var(--paper);border-bottom:1px solid var(--line);}
.schlicht-head .nav-row{box-sizing:border-box;max-width:var(--content);margin:0 auto;
  padding:0 var(--edge);min-height:56px;display:flex;align-items:center;gap:var(--sp-3);}
.schlicht-head .signin{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--pine);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.schlicht-head .signin:hover{color:var(--ink);}
@media (min-width:768px){
  .stage-grid{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:var(--sp-6);align-items:start;}
}

/* ------------------------------------------------ Kanzleien, B2B (Rollout A4)
   Eigene Zielgruppe, eigener Kopf: Die Seite verkauft die White-Label-Plattform an
   Kanzleien und teilt deshalb NICHT den Verbraucher-Kopf mit der P-Konto-Akut-Leiste.
   Alles Uebrige (Hero, Sektionen, Buttons, Aufklapper, Fuss) erbt sie vom System.
   Mobil zuerst; Desktop ausschliesslich ueber min-width. */
.b2b-head{background:var(--paper);border-bottom:1px solid var(--line);}
.b2b-head .nav-row{box-sizing:border-box;max-width:var(--content);margin:0 auto;padding:0 var(--edge);
  min-height:56px;display:flex;align-items:center;gap:var(--sp-3);}
.b2b-head .brand .tag{font-family:var(--display);font-weight:600;font-size:15px;color:var(--grey);}
.b2b-head .nav-links{display:none;}
.b2b-head .nav-cta{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-3);}
.b2b-head .nav-cta .back{display:none;}
@media (min-width:768px){
  .b2b-head{position:sticky;top:0;z-index:50;}
  .b2b-head .nav-row{min-height:72px;gap:var(--sp-5);}
  .b2b-head .nav-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);}
  .b2b-head .nav-links a{display:inline-flex;align-items:center;min-height:44px;
    font-family:var(--display);font-weight:500;font-size:17px;color:var(--body-ink);
    text-decoration:none;border-bottom:2px solid transparent;}
  .b2b-head .nav-links a:hover{color:var(--ink);border-bottom-color:var(--pine);}
  .b2b-head .nav-cta .back{display:inline-flex;align-items:center;min-height:44px;}
}

/* Sektion auf Salbei statt auf Schwarz: gelesen wird nie auf einer kraeftigen Flaeche. */
.sec-sage{background:var(--sage);}
.hint-box{border-radius:var(--r-s);background:var(--sage);padding:10px 14px;
  font-size:var(--fs-small);line-height:1.45;color:var(--body-ink);}
.hero-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-5);}
.hero-visual{min-width:0;}
.split-cta{margin-top:var(--sp-3);}
.faq-split>*+*{margin-top:var(--sp-4);}

/* Vorteile und Partnerschaft: schlichte Karten, eine Spalte mobil. */
.vgrid,.pgrid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-3);}
.vcard,.pstep{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-3);}
.vcard h3,.pstep h4{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:19px;
  line-height:1.3;color:var(--ink);}
.vcard p,.pstep p{margin:0;font-size:17px;line-height:1.5;color:var(--body-ink);}
.pstep .num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  margin-bottom:var(--sp-2);border-radius:50%;border:2px solid var(--pine);background:var(--white);
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--pine);}

/* Preise: drei Karten, die mittlere hervorgehoben - durch Rand und Wort, nicht durch Farbe. */
.pricegrid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-3);}
.pcard{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);}
.pcard.feat{border:2px solid var(--pine);}
.pcard .pc-name{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);}
.pcard .pc-for{font-size:16px;line-height:1.45;color:var(--grey);}
.pcard .pc-amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;}
.pcard .pc-amt .big{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.pcard .pc-amt .un{font-size:16px;color:var(--grey);}
.pcard .pc-note{font-size:16px;line-height:1.45;color:var(--body-ink);}
.pcard .pc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.pcard .pc-list li,.flist li{display:flex;gap:8px;font-size:16px;line-height:1.45;color:var(--body-ink);}
.ck{flex:0 0 auto;color:var(--pine);font-weight:700;}
.pcard .btn{margin-top:auto;}

/* Demo-Formular: Label darueber, Hilfetext darunter, nie ein Platzhalter. */
.demo-form-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-5);}
.flist{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:8px;}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-3);display:grid;gap:var(--sp-3);}
.form-card .field{display:grid;gap:var(--sp-1);}
.form-card label{font-family:var(--display);font-weight:600;font-size:var(--fs-label);
  line-height:1.3;color:var(--ink);}
.form-card input,.form-card select{width:100%;box-sizing:border-box;min-height:54px;padding:0 12px;
  border:2px solid var(--grey-dark);border-radius:var(--r-s);background:var(--white);
  font-family:var(--display);font-size:17px;line-height:1.4;color:var(--body-ink);}
.form-card input:focus-visible,.form-card select:focus-visible{border-color:var(--pine);
  outline:3px solid var(--pine);outline-offset:1px;}
.form-card .hilfe{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--grey);}
.form-note{margin-top:0;}

/* Schluss der B2B-Seite: wie der Schluss der Startseite, auf Salbei. */
.final{background:var(--sage);}
.final-in{display:grid;gap:var(--sp-3);}
.final-in .actions{display:flex;flex-direction:column;gap:var(--sp-2);}

/* Die Vorschau: ein fremdes Produkt im Bildschirm gezeigt. Ihr Akzent ist DEMO-INHALT und
   kommt per --accent aus den data-Attributen der Farbfelder (kanzleien.js), nie aus der
   Palette dieser Seite. Ohne JavaScript steht Kieferngruen. */
.demo-shell{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);}
.demo-urlbar{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--paper);
  font-size:14px;color:var(--grey);}
.demo-urlbar b{color:var(--ink);}
.demo-app{display:grid;grid-template-columns:minmax(0, 1fr);}
.demo-side{padding:12px;border-bottom:1px solid var(--line);background:var(--paper);}
.demo-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);}
.demo-brand .m{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;background:var(--accent,var(--pine));color:var(--white);font-size:14px;}
.demo-nav{display:flex;flex-wrap:wrap;gap:4px 12px;}
.demo-nav .it{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--grey);}
.demo-nav .it.on{color:var(--ink);font-weight:700;}
.demo-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--line);}
.demo-nav .it.on .dot{background:var(--accent,var(--pine));}
.demo-main{padding:12px;display:grid;gap:8px;}
.demo-h{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2;color:var(--ink);}
.demo-s{font-size:14px;color:var(--grey);}
.demo-card{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--white);}
.demo-card .av{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--accent,var(--pine));color:var(--white);
  font-size:13px;font-weight:700;}
.demo-card .meta{min-width:0;flex:1 1 auto;}
.demo-card .n{font-size:15px;font-weight:700;color:var(--ink);}
.demo-card .d{font-size:13px;color:var(--grey);}
.demo-card .pill{flex:0 0 auto;border-radius:var(--r-pill);background:var(--sage);padding:2px 8px;
  font-size:13px;font-weight:700;color:var(--ink);}
.demo-btn{display:flex;align-items:center;justify-content:center;min-height:44px;
  border-radius:var(--r-s);background:var(--accent,var(--pine));
  color:var(--white);padding:10px;text-align:center;font-weight:700;font-size:15px;}

/* Farbfelder der Vorschau. Die Flaechenfarbe steht am Element (Demo-Inhalt); hier nur Form,
   Groesse und der Zustand - gewaehlt ist Ring plus Haken, nie Farbe allein. */
.brand-control{margin-top:var(--sp-3);display:grid;gap:var(--sp-2);}
.bc-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);}
.bc-row .lab{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);}
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.sw-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--white);
  font-size:18px;line-height:1;}
.sw-btn:focus-visible{outline:3px solid var(--pine);outline-offset:3px;}
.sw-btn.on{border-color:var(--ink);}
.sw-btn.on::before{content:"\2713";}
.brand-control .hint{font-size:var(--fs-small);line-height:1.45;color:var(--grey);}

@media (min-width:768px){
  .hero-grid{grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:var(--sp-6) var(--sp-7);
    align-items:start;}
  .vgrid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-4);}
  .pgrid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--sp-4);}
  .pricegrid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--sp-4);align-items:stretch;}
  .demo-form-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-7);align-items:start;}
  .faq-split{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);gap:var(--sp-7);
    align-items:start;}
  .faq-split>*+*{margin-top:0;}
  .demo-app{grid-template-columns:minmax(0, 150px) minmax(0, 1fr);}
  .demo-side{border-bottom:0;border-inline-end:1px solid var(--line);}
  .demo-nav{flex-direction:column;gap:6px;}
  .final-in .actions{flex-direction:row;}
  .form-card .field-row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-3);}
}

@media (min-width:768px){
  .faq-sec{padding:var(--sp-6) 0 var(--sp-7);}
  .suche input{min-height:56px;font-size:18px;}
  /* Am Desktop ist Platz: kein Aufklappen, die Reihe steht immer da - auch dann, wenn am
     Telefon zugeklappt wurde und das Fenster danach breiter wurde. */
  .themen-knopf{display:none;}
  .themen-knopf[aria-expanded="false"]+.filters{display:flex;}
  .filters{margin-top:0;}
}
/* Schluss: die Aussage und die Handlung auf ruhigem Salbei, mit der Person. */
.sec-final{background:var(--sage);}
.final-band{margin-top:var(--sp-4);}
.final-band .wrap{display:flex;flex-direction:column;gap:var(--sp-3);}
.final-band p{margin:0;font-weight:600;font-size:18px;line-height:1.35;color:var(--ink);}
@media (min-width:768px){
  .final-band .wrap{flex-direction:row;align-items:center;gap:var(--sp-5);}
  .final-band .btn{width:auto;min-width:300px;}
}
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding:var(--sp-5) 0 var(--sp-4);}
.foot-grid{display:grid;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);}
.foot-brand p{margin:var(--sp-3) 0 0;font-size:16px;line-height:1.5;color:var(--grey);max-width:40ch;}
.foot-col h5{margin:0 0 var(--sp-1);font-weight:700;font-size:16px;color:var(--ink);}
.foot-col a{display:flex;align-items:center;min-height:44px;min-width:44px;width:fit-content;font-weight:500;font-size:16px;color:var(--body-ink);}
.foot-pflicht{padding-top:var(--sp-3);display:grid;gap:4px;}
.foot-pflicht p{margin:0;font-size:15px;line-height:1.5;color:var(--body-ink);}
.foot-bottom{padding-top:var(--sp-3);font-size:14px;color:var(--grey);}
@media (min-width:768px){
  .foot-grid{grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));gap:var(--sp-6);}
  .foot-col a{min-height:32px;}
}

/* ------------------------------------------------------- print / reduced-motion */
@media print{
  .app-bar,.app-nav,.bottom-nav,.bottom-nav-spacer,.btn,.no-print,.akut{display:none !important;}
  body{background:#fff;}
  main{max-width:none;margin:0;padding:0;}
  /* Das Glaeubiger-Anschreiben, wie es auf Papier geht (Rollout D1, 22.09.2026).
     Stand bis dahin als eigener <style>-Block IN der Vorlage - der letzte
     Altbestand des Repos.

     Gedruckt wird NUR der Brief: alles andere wird unsichtbar (visibility, NICHT
     display:none - sonst bricht die Seitenaufteilung), der Brief rueckt nach
     oben links.

     `body:has(.print-area)` haelt die Regel auf der EINEN Seite, die sie
     braucht. Ohne diese Bedingung waere jede Seite des Repos beim Drucken leer,
     denn der Stilblock war vorher seitenweit und ist es hier nicht mehr.
     `:has()` ist im Haus bereits in Gebrauch (siehe `.card:has(table)`). */
  body:has(.print-area) *{visibility:hidden;}
  .print-area,.print-area *{visibility:visible;}
  .print-area{position:absolute;top:0;left:0;width:100%;border:none;box-shadow:none;}
  .letter-address{margin-bottom:var(--sp-6);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
}