/* ═══════════════════════════════════════════════════════════════════════════
   MyPolicyBook – gemeinsames Design-System (mpb.css), seit v0.99.60
   Grundlage: Mockup Variante 8 „Synthese" (_Design/2026-09-28_Redesign/Variante-8-Synthese.html)
   Apple-Struktur, grüner Markencharakter aus High-End, Linien-Icons, KI-Kennzeichnung.

   Regeln
   - Farben, Typo, Abstände, Radien, Schatten und Bewegung NUR über die Tokens in :root.
     insurtrack.php soll sie später 1:1 übernehmen (gleiche Namen).
   - Dunkelmodus: folgt dem System (@media prefers-color-scheme). Manueller Vorrang (Entscheidung E2 = B,
     29.09.2026) nur per data-theme="light|dark" auf <html>, gesetzt von der App (insurtrack.php) aus
     settings.theme. Die übrigen Seiten setzen kein data-theme und folgen weiter nur dem System.
   - Farbrollen: Marke (Grün) = Aktionen + Hervorhebung · Kategorie = nur Icons ·
     Status (ok/warn/danger/neutral) = immer mit Symbol + Text · Tresor = die eine dunkelgrüne Markenfläche.
   - Klickziele mindestens 44 px (--touch), Fokus immer sichtbar (--focus).
   - Schriften lokal (fonts/), keine CDNs. Nur die Schnitte, die wirklich gebraucht werden:
     Inter 400/600, Space Grotesk 600/700.
   - Seitenspezifisches Layout liegt in css/start.css, css/scan.css, css/doku.css – ebenfalls nur mit Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── Schriften (lokal) ───────────── */
/* Schriften: Inter und Space Grotesk, Lizenz SIL OFL 1.1 – Lizenztext und Copyright siehe fonts/OFL.txt */
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/spacegrotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/spacegrotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ───────────── Tokens ───────────── */
:root{
  color-scheme:light;
  /* Marke */
  --brand:#119A79;          /* Flächen, Balken, Grafik (≥ 3:1 auf Weiß) */
  --brand-text:#0A6B54;     /* Grün für Text/Links auf Hell (≥ 4.5:1 auch auf --bg) */
  --brand-tint:#E2F3ED;
  --action:#0B7359;         /* primäre Aktion: Fläche */
  --action-hover:#095F4A;
  --on-action:#FFFFFF;
  --glow:#2BD3A8;           /* primäre Aktion auf der Tresor-Fläche */
  --on-glow:#03241C;
  /* Tresor-Fläche (in beiden Modi dunkelgrün) */
  --vault-1:#05241E; --vault-2:#0A3A30; --vault-ink:#EAFBF5; --vault-muted:#A9D1C5; --vault-line:rgba(234,251,245,.14);
  --vault-soft:rgba(234,251,245,.06); --vault-warn:#F5C06E;
  /* Flächen */
  --bg:#F1F5F3; --surface:#FFFFFF; --surface-2:#F5F8F7; --shell:#E9EFED;
  --line:rgba(12,40,34,.11); --line-strong:rgba(12,40,34,.22);
  --line-input:rgba(12,40,34,.52);   /* Rand von Eingabefeldern: ≥ 3:1 (WCAG 1.4.11) */
  --scrim:rgba(4,20,16,.52);
  /* Text */
  --ink:#0D1B18; --text-2:#35463F; --muted:#52635D;
  /* Status */
  --ok:#0A6B54;     --ok-bg:#E2F3ED;
  --warn:#8A4B00;   --warn-bg:#FDF0D8; --warn-line:rgba(138,75,0,.30);
  --danger:#B3261E; --danger-bg:#FCEBE9; --danger-line:rgba(179,38,30,.30);
  --neutral:#46564F; --neutral-bg:#EDF1EF;
  --info:#245A9C;   --info-bg:#E5EEF8;   /* Hinweis „kommt noch“ (z. B. Vertrag startet bald) – immer mit Symbol + Text */
  /* Kategorien (nur Icons) */
  --cat-wohnen:#2B64A8; --cat-haftung:#15707C; --cat-mobil:#4F4DB3; --cat-recht:#7A45A5; --cat-gesund:#A43B69; --cat-vorsorge:#4A5B70;
  /* Abstände */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* Radien (eine Skala) */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  /* Tiefe nur, wo sie eine Aufgabe hat: schwebender Kopf, Dialog, Toast */
  --sh-float:0 1px 2px rgba(8,40,33,.06), 0 8px 24px -10px rgba(8,40,33,.18);
  --sh-sheet:0 2px 6px rgba(8,40,33,.08), 0 24px 60px -18px rgba(8,40,33,.35);
  /* Typo */
  --f-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-md:.9375rem; --t-lg:1.0625rem; --t-xl:1.3125rem; --t-2xl:1.75rem;
  --t-display:clamp(2rem,5.5vw,3.25rem);
  /* Bewegung (Kurven: stark ease-out für UI, Schubladen-Kurve für Flächen) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --d-press:140ms; --d-ui:200ms; --d-panel:380ms; --d-reveal:520ms;
  /* Fokus + Ziele */
  --focus-c:#0A6B54;
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--focus-c);
  --touch:44px;
  --maxw:1160px;
}
/* Dunkle Tokens. :not(:where(…)) hält die Spezifität bei :root – ohne data-theme bleibt die Kaskade wie bisher. */
@media (prefers-color-scheme: dark){
  :root:not(:where([data-theme="light"])){
    color-scheme:dark;
    --brand:#1FB38D; --brand-text:#4FD8B1; --brand-tint:rgba(79,216,177,.13);
    --action:#3FD3A9; --action-hover:#5FDDB8; --on-action:#03140F; --glow:#3FD3A9; --on-glow:#03140F;
    --vault-1:#031713; --vault-2:#0A3029; --vault-line:rgba(234,251,245,.12);
    --bg:#070C0B; --surface:#0E1715; --surface-2:#13201D; --shell:#16231F;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
    --line-input:rgba(255,255,255,.36);
    --scrim:rgba(0,0,0,.62);
    --ink:#EAF2EF; --text-2:#BCCBC6; --muted:#98AAA4;
    --ok:#4FD8B1; --ok-bg:rgba(79,216,177,.13);
    --warn:#F2BA66; --warn-bg:rgba(242,186,102,.13); --warn-line:rgba(242,186,102,.32);
    --danger:#F5998F; --danger-bg:rgba(245,153,143,.13); --danger-line:rgba(245,153,143,.32);
    --neutral:#B3C2BD; --neutral-bg:rgba(255,255,255,.06); --info:#8DB8F2; --info-bg:rgba(141,184,242,.13);
    --cat-wohnen:#86B5F0; --cat-haftung:#5FCAD6; --cat-mobil:#A9ABF7; --cat-recht:#C9A2EC; --cat-gesund:#F29AC0; --cat-vorsorge:#AFC0D3;
    --sh-float:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -12px rgba(0,0,0,.7);
    --sh-sheet:0 2px 6px rgba(0,0,0,.5), 0 28px 70px -20px rgba(0,0,0,.8);
    --focus-c:#4FD8B1;
  }
}

/* Manueller Vorrang Dunkel (data-theme="dark"): dieselben Werte wie oben, auch bei hellem System.
   Manuell Hell (data-theme="light") braucht keinen eigenen Block: dann greift der Dunkel-Block oben nicht. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#1FB38D; --brand-text:#4FD8B1; --brand-tint:rgba(79,216,177,.13);
  --action:#3FD3A9; --action-hover:#5FDDB8; --on-action:#03140F; --glow:#3FD3A9; --on-glow:#03140F;
  --vault-1:#031713; --vault-2:#0A3029; --vault-line:rgba(234,251,245,.12);
  --bg:#070C0B; --surface:#0E1715; --surface-2:#13201D; --shell:#16231F;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
  --line-input:rgba(255,255,255,.36);
  --scrim:rgba(0,0,0,.62);
  --ink:#EAF2EF; --text-2:#BCCBC6; --muted:#98AAA4;
  --ok:#4FD8B1; --ok-bg:rgba(79,216,177,.13);
  --warn:#F2BA66; --warn-bg:rgba(242,186,102,.13); --warn-line:rgba(242,186,102,.32);
  --danger:#F5998F; --danger-bg:rgba(245,153,143,.13); --danger-line:rgba(245,153,143,.32);
  --neutral:#B3C2BD; --neutral-bg:rgba(255,255,255,.06); --info:#8DB8F2; --info-bg:rgba(141,184,242,.13);
  --cat-wohnen:#86B5F0; --cat-haftung:#5FCAD6; --cat-mobil:#A9ABF7; --cat-recht:#C9A2EC; --cat-gesund:#F29AC0; --cat-vorsorge:#AFC0D3;
  --sh-float:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -12px rgba(0,0,0,.7);
  --sh-sheet:0 2px 6px rgba(0,0,0,.5), 0 28px 70px -20px rgba(0,0,0,.8);
  --focus-c:#4FD8B1;
}

/* ───────────── Basis ───────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--t-md);line-height:1.5;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--brand-text);text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-80px;z-index:100;padding:var(--s-3) var(--s-4);border-radius:var(--r-pill);background:var(--action);color:var(--on-action);font-weight:600;text-decoration:none;transition:top var(--d-ui) var(--ease-out)}
.skip:focus-visible{top:var(--s-3)}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--muted)}

/* Linien-Icons (SVG-Symbole, stroke = currentColor) */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.ic.xs{width:14px;height:14px;vertical-align:-2px}
.ic.sm{width:16px;height:16px;vertical-align:-3px}
.ic.lg{width:24px;height:24px}
.ic.xl{width:28px;height:28px}

/* Layout */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
.wrap.narrow{max-width:800px}
@media (max-width:767px){ .wrap{padding:0 var(--s-4)} }
.stack>*+*{margin-top:var(--s-4)}

/* ───────────── Karten + Flächen ───────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.pad{padding:var(--s-5)}
@media (max-width:599px){ .pad{padding:var(--s-4)} }
.card-h{margin:0 0 4px;font:600 var(--t-lg)/1.3 var(--f-display);letter-spacing:-.01em}
.card-p{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--muted)}
/* Tresor: die eine dunkelgrüne Markenfläche */
.vault{position:relative;color:var(--vault-ink);background-color:var(--vault-2);background-image:linear-gradient(150deg,var(--vault-2),var(--vault-1) 75%);
  border-radius:var(--r-lg);border:1px solid var(--vault-line)}
.vault h1,.vault h2,.vault h3{color:var(--vault-ink)}
.vault a{color:var(--vault-ink)}
.vault :focus-visible{box-shadow:0 0 0 2px var(--vault-2), 0 0 0 4px var(--glow)}
.vault .muted{color:var(--vault-muted)}

/* ───────────── Kopf: schwebende Leiste (einzige Fläche mit Schatten im Fluss) ───────────── */
.top{position:sticky;top:var(--s-3);z-index:40;margin:var(--s-3) 0 var(--s-5)}
.island{display:flex;align-items:center;gap:var(--s-2);min-width:0;padding:5px 5px 5px var(--s-4);border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border:1px solid var(--line);box-shadow:var(--sh-float)}
.island .spacer{flex:1;min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:var(--touch);flex:none;border-radius:var(--r-pill)}
.brand-mark{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--brand);flex:none}
.brand-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-word{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;white-space:nowrap}
.brand-word b{color:var(--brand-text);font-weight:700}
.top-title{font:600 var(--t-md)/1.2 var(--f-display);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:767px){ .island{padding-left:var(--s-3)} .brand-word{font-size:1rem} }
@media (max-width:420px){ .top-hide-sm{display:none !important} }

@media (prefers-reduced-transparency: reduce){ .island{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none} }

/* ───────────── Schaltflächen (eine Familie) ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);padding:0 var(--s-4);border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-size:var(--t-sm);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:transform var(--d-press) var(--ease-out), background-color var(--d-ui) ease, border-color var(--d-ui) ease, color var(--d-ui) ease}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--action);border-color:transparent;color:var(--on-action)}
.btn.tint{background:var(--brand-tint);border-color:transparent;color:var(--brand-text)}
.btn.quiet{border-color:transparent;background:none;color:var(--brand-text);padding:0 var(--s-3)}
.btn.danger{color:var(--danger);border-color:var(--danger-line)}
.btn.lg{min-height:52px;padding:0 var(--s-5);font-size:var(--t-md)}
.btn.block{display:flex;width:100%}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{background:var(--surface-2)}
  .btn.primary:not(:disabled):hover{background:var(--action-hover)}
  .btn.tint:not(:disabled):hover{background:color-mix(in srgb,var(--brand-tint) 70%,var(--brand) 12%)}
  .btn.quiet:not(:disabled):hover{background:var(--brand-tint)}
  .btn.danger:not(:disabled):hover{background:var(--danger-bg)}
}
/* auf der Tresor-Fläche */
.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);padding:0 var(--s-4);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;white-space:nowrap;text-decoration:none;
  border:1px solid var(--vault-line);background:var(--vault-soft);color:var(--vault-ink);transition:transform var(--d-press) var(--ease-out), background-color var(--d-ui) ease}
.vbtn:active{transform:scale(.97)}
.vbtn.go{background:var(--glow);border-color:transparent;color:var(--on-glow)}
.vbtn.lg{min-height:52px;padding:0 var(--s-5);font-size:var(--t-md)}
@media (hover:hover) and (pointer:fine){ .vbtn:not(.go):hover{background:rgba(234,251,245,.12)} .vbtn.go:hover{background:color-mix(in srgb,var(--glow) 88%,#fff)} }
.iconbtn{position:relative;width:var(--touch);height:var(--touch);flex:none;display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);
  transition:background-color var(--d-ui) ease, transform var(--d-press) var(--ease-out)}
.iconbtn:active{transform:scale(.95)}
.iconbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){ .iconbtn:not(:disabled):hover{background:var(--shell)} }
.linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--touch);padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:none;
  color:var(--brand-text);font-size:var(--t-sm);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){ .linkbtn:hover{background:var(--brand-tint)} }
.cost-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:600;background:none;color:inherit;border:1px solid currentColor}

/* Segment-Umschalter (zwei bis vier Optionen) */
.seg{display:inline-flex;position:relative;padding:3px;border-radius:var(--r-pill);background:var(--shell);border:1px solid var(--line)}
.seg button,.seg a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);min-width:var(--touch);padding:0 var(--s-4);border:0;background:none;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color var(--d-ui) ease, background-color var(--d-ui) ease, box-shadow var(--d-ui) ease}
.seg [aria-pressed="true"],.seg [aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
.seg.block{display:flex}
.seg.block button,.seg.block a{flex:1 1 0}
@media (hover:hover) and (pointer:fine){ .seg button:not([aria-pressed="true"]):hover,.seg a:not([aria-current="page"]):hover{color:var(--ink)} }

/* ───────────── Plaketten, Chips, Kategorien ───────────── */
.pill{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;white-space:nowrap;line-height:1.3;
  background:var(--neutral-bg);color:var(--neutral)}
.pill .ic{width:14px;height:14px;stroke-width:1.8;vertical-align:0}
.pill.warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-line)}
.pill.danger{background:var(--danger-bg);color:var(--danger)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.none{background:none;color:var(--neutral);box-shadow:inset 0 0 0 1px var(--line-strong)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--brand-tint);color:var(--brand-text)}
.eyebrow .ic{width:14px;height:14px;vertical-align:0}
.vault .eyebrow{background:rgba(234,251,245,.1);color:var(--vault-ink);box-shadow:inset 0 0 0 1px var(--vault-line)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch);padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);
  font-size:var(--t-sm);font-weight:600;color:var(--text-2);white-space:nowrap;text-decoration:none;transition:background-color var(--d-ui) ease, color var(--d-ui) ease}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
@media (hover:hover) and (pointer:fine){ .chip:not([aria-pressed="true"]):not([aria-current="page"]):hover{background:var(--surface-2)} }
/* Kategorie-Icon: eigene, zurückhaltende Farbe – nur hier (Farbe über --c) */
.cat{--c:var(--brand);width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;color:var(--c);
  background:color-mix(in srgb, var(--c) 11%, var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent)}
.cat .ic{width:21px;height:21px;stroke-width:1.7;vertical-align:0}
.cat.sm{width:28px;height:28px;border-radius:8px}
.cat.sm .ic{width:16px;height:16px}
.cat.lg{width:48px;height:48px;border-radius:var(--r-md)}
.cat.lg .ic{width:24px;height:24px}
.c-wohnen{--c:var(--cat-wohnen)} .c-haftung{--c:var(--cat-haftung)} .c-mobil{--c:var(--cat-mobil)} .c-recht{--c:var(--cat-recht)} .c-gesund{--c:var(--cat-gesund)} .c-vorsorge{--c:var(--cat-vorsorge)}
.c-ok{--c:var(--ok)} .c-warn{--c:var(--warn)} .c-danger{--c:var(--danger)} .c-neutral{--c:var(--neutral)}

/* ───────────── Listenzeilen (Schlüssel/Wert) ───────────── */
.rows{overflow:hidden}
.row{position:relative;display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:52px;padding:var(--s-3) var(--s-4);border:0;background:none;text-align:left;color:var(--ink);font-size:var(--t-md)}
.row + .row{border-top:1px solid var(--line)}
.row-k{flex:1;min-width:0;color:var(--text-2);font-size:var(--t-sm)}
.row-v{max-width:62%;text-align:right;font:600 var(--t-md)/1.3 var(--f-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.row-main{flex:1;min-width:0}
.row-t{display:block;font-weight:600;font-size:var(--t-md)}
.row-s{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--muted)}
.gh{margin:var(--s-5) 0 var(--s-2) var(--s-2);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gh:first-child{margin-top:0}

/* ───────────── Formulare ───────────── */
.field{display:block;margin:0 0 var(--s-4);text-align:left}
.field > label,.label{display:block;margin:0 0 6px;font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.input{display:block;width:100%;min-height:var(--touch);padding:10px 14px;border:1px solid var(--line-input);border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  font-size:16px;line-height:1.4;transition:border-color var(--d-ui) ease, box-shadow var(--d-ui) ease}   /* 16px: kein iOS-Auto-Zoom */
.input::placeholder{color:var(--muted);opacity:1}
.input:focus,.input:focus-visible{outline:none;border-color:var(--focus-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.hint{margin:6px 0 0;font-size:var(--t-xs);color:var(--muted)}
/* Meldung unter Formularen: Farbe über Klasse ok/err (bzw. per JS style.color mit Tokens) */
.msg{min-height:1.2em;margin:var(--s-3) 0 0;font-size:var(--t-sm);color:var(--muted)}
.msg.ok,.msg .ok{color:var(--ok)}
.msg.err,.msg .err{color:var(--danger)}

/* ───────────── Hinweise ───────────── */
.note{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--t-sm);color:var(--text-2);line-height:1.5}
.note > .ic{margin-top:1px;color:var(--brand-text)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.note.warn > .ic{color:var(--warn)}
.note.danger{background:var(--danger-bg);border-color:var(--danger-line)}
.note.danger > .ic{color:var(--danger)}
.note.plain{background:none;border:0;padding:0}
/* Einheitliche KI-Kennzeichnung (EU AI Act Art. 50 Abs. 2). Gleicher Klassenname wie in insurtrack.php (.ki-label). */
.ki-label,.kinote{display:flex;gap:8px;align-items:flex-start;margin:var(--s-3) 0 0;font-size:var(--t-xs);line-height:1.4;color:var(--muted)}
.ki-label .ic,.kinote .ic{width:15px;height:15px;margin-top:1px;color:var(--text-2);vertical-align:0}
.ki-label b,.kinote b{color:var(--text-2);font-weight:600}
.vault .ki-label,.vault .kinote{color:var(--vault-muted)}
.vault .ki-label b,.vault .kinote b,.vault .ki-label .ic,.vault .kinote .ic{color:var(--vault-ink)}

/* ───────────── Dialog (Modal) ───────────── */
.modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:var(--s-5);background:var(--scrim);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:1;transition:opacity var(--d-ui) var(--ease-out)}
.modal.on{display:flex}
.sheet{width:100%;max-width:400px;max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sheet);padding:var(--s-5);
  transform:none;opacity:1;transition:transform var(--d-panel) var(--ease-drawer), opacity var(--d-ui) var(--ease-out)}
@starting-style{ .modal.on{opacity:0} .modal.on .sheet{opacity:0;transform:translateY(10px) scale(.97)} }
.sheet h2,.sheet h3{margin:0 0 4px;font:600 var(--t-xl)/1.2 var(--f-display);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--s-2)}
.sheet .sub{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--muted)}
.sheet-acts{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.sheet-acts .btn{flex:1 1 0}
@media (max-width:480px){ .modal{align-items:flex-end;padding:var(--s-3)} @starting-style{ .modal.on .sheet{transform:translateY(24px)} } }

/* ───────────── Zentrierte Karte (Konto: Reset, Bestätigung, Scan-Login) ───────────── */
.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s-5) var(--s-4)}
.auth-card{width:100%;max-width:420px;padding:clamp(24px,5vw,36px) clamp(20px,5vw,32px);text-align:center}
.auth-ic{width:64px;height:64px;margin:0 auto var(--s-4);border-radius:var(--r-lg);display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-text)}
.auth-ic .ic{width:30px;height:30px;stroke-width:1.6;vertical-align:0}
.auth-card h1{margin:0 0 6px;font:600 var(--t-2xl)/1.15 var(--f-display);letter-spacing:-.03em}
.auth-card .sub{margin:0 auto var(--s-5);max-width:34ch;font-size:var(--t-md);color:var(--muted)}
.auth-card > p{margin:0 auto;max-width:34ch}
.auth-card .ok{color:var(--ok);font-weight:600}
.auth-card .err{color:var(--danger);font-weight:600}
.auth-brand{margin-top:var(--s-5)}

/* ───────────── Fließtext (Rechtsseiten, Hilfe) ───────────── */
.prose{max-width:72ch;font-size:1rem;line-height:1.7;color:var(--text-2);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.prose h1{margin:0 0 var(--s-2);font:600 clamp(1.875rem,5vw,2.625rem)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.prose .sub{margin:0 0 var(--s-6);font-size:var(--t-md);color:var(--muted)}
.prose h2{margin:var(--s-6) 0 var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line);font:600 var(--t-xl)/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.prose h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin:var(--s-5) 0 var(--s-2);font:600 var(--t-lg)/1.3 var(--f-display);color:var(--ink)}
.prose p{margin:0 0 var(--s-4)}
.prose ul{margin:0 0 var(--s-4);padding-left:1.3rem}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand-text);font-weight:600;overflow-wrap:anywhere}
.prose address{font-style:normal;margin:0 0 var(--s-4);padding:var(--s-4) var(--s-5);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-md);line-height:1.8;color:var(--ink)}
.prose .muted{font-size:var(--t-sm);color:var(--muted)}

/* ───────────── Fuß ───────────── */
.foot{margin:var(--s-8) 0 var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-4);flex-wrap:wrap;color:var(--muted);font-size:var(--t-xs)}
.foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-1)}
.foot a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 var(--s-2);border-radius:var(--r-sm);color:var(--text-2);font-weight:600;text-decoration:none}
.foot a[aria-current="page"]{color:var(--brand-text)}
@media (hover:hover) and (pointer:fine){ .foot a:hover{color:var(--brand-text);text-decoration:underline} }

/* ───────────── Toast ───────────── */
.toast{position:fixed;left:50%;bottom:24px;z-index:120;max-width:calc(100% - 32px);padding:10px 18px;border-radius:var(--r-pill);background:var(--vault-2);color:var(--vault-ink);font-size:var(--t-sm);font-weight:600;text-align:center;
  box-shadow:var(--sh-float);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity var(--d-ui) ease, transform var(--d-panel) var(--ease-drawer)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ───────────── Fortschritt ───────────── */
.progress{height:6px;border-radius:3px;background:var(--neutral-bg);overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:inherit;background:var(--brand);transition:width var(--d-ui) linear}

/* ───────────── Einblenden beim Scrollen (nur Deko, blockiert nie) ───────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);transition-delay:var(--dl,0ms)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* Sehr schmal (z. B. 390 px bei 200 % Zoom): Wortmarke weg, Schaltflächen dürfen umbrechen – kein horizontales Scrollen */
@media (max-width:360px){
  .island .brand-word{display:none}
  .btn,.vbtn,.linkbtn,.chip{white-space:normal;text-align:center;min-width:0}
  .island .btn,.btn.lg,.vbtn.lg{padding:0 var(--s-3)}
}
/* ───────────── Weniger Bewegung ───────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .rv{transform:none;transition:opacity 150ms ease}
  .btn,.vbtn,.iconbtn,.chip,.seg button{transition:none}
  .btn:active,.vbtn:active,.iconbtn:active{transform:none}
  .sheet{transition:opacity 150ms ease}
  @starting-style{ .modal.on .sheet{transform:none} }
  .toast{transition:opacity 150ms ease;transform:translate(-50%,0)}
}
@media (prefers-contrast: more){
  :root{--line:rgba(12,40,34,.3);--line-strong:rgba(12,40,34,.55);--muted:var(--text-2)}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not(:where([data-theme="light"])){--line:rgba(255,255,255,.3);--line-strong:rgba(255,255,255,.55)}
}
@media (prefers-contrast: more){
  :root[data-theme="dark"]{--line:rgba(255,255,255,.3);--line-strong:rgba(255,255,255,.55);--muted:var(--text-2)}
}
@media (forced-colors: active){
  .btn,.vbtn,.chip,.seg,.input,.card{border:1px solid CanvasText}
  :focus-visible{outline:2px solid Highlight;outline-offset:2px}
}