/* ============================================================================
   Konzeptberater — Komponenten. Lesen NUR Tokens aus tokens.css.
   Keine Hex-Farben, keine px-Abstände hier hart — alles über var(--…).
   Fehlt eine Komponente: hier + Token in tokens.css ergänzen, dann nutzen.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
a  { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--c-text-muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.lead { font-size: var(--fs-h3); color: var(--c-text-muted); margin: 0 0 var(--sp-4); }
code { background: var(--c-surface-muted); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-weight: var(--fw-semibold);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent; border-radius: var(--btn-radius);
  cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary   { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-bd); }
.btn-ghost     { background: transparent; color: var(--c-text-muted); }
.btn-danger    { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 14px 24px; }

/* Karte */
.card  { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-pad); }
.card-h { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }

/* Formularfeld */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); }
.input, .select {
  height: var(--field-h); background: var(--field-bg); border: 1px solid var(--field-bd);
  border-radius: var(--field-radius); padding: 0 var(--sp-3); color: var(--c-text); font: inherit;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.input--sm { height: 36px; width: 6rem; padding: 0 var(--sp-2); }
.textarea { background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: var(--field-radius); padding: var(--sp-2) var(--sp-3); color: var(--c-text); font: inherit; line-height: var(--lh); min-height: 104px; resize: vertical; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--badge-radius); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning-text); }
.badge--error   { background: var(--c-error-bg);   color: var(--c-error); }
.badge--info    { background: var(--c-info-bg);     color: var(--c-info); }
.badge--neutral { background: var(--c-surface-muted); color: var(--c-text-muted); }
.badge--spart   { background: var(--c-spart-bg);    color: var(--c-spart); }  /* Erfolg/Abschluss (grün wie Ersparnis) */

/* Tabelle */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th { text-align: left; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); }
.table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); }
.table tbody tr:hover { background: var(--c-surface-muted); }

/* Facetten-Filterleiste (Backoffice-Tabellen; GET-Formular, ohne JS nutzbar) */
.facet-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.facet-bar__search { flex: 1 1 220px; min-width: 0; }
.facet-filter { display: flex; flex-direction: column; gap: var(--sp-1); }
.facet-filter__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.facet-filter__select { height: var(--field-h); }

/* Sortierbarer Tabellenkopf (Sortier-Link + Pfeil-Indikator ⇅ ▲ ▼) */
.sortable-th { padding: 0; }
.sortable-th a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--field-h); padding: var(--sp-2) var(--sp-3); color: inherit; font: inherit; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.sortable-th a:hover { color: var(--c-primary); text-decoration: none; }
.sortable-th a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); border-radius: var(--r-sm); }
.sortable-th.is-sorted a { color: var(--c-primary); }
.sortable-th__arrow { font-size: 10px; color: var(--c-text-soft); }
.sortable-th.is-sorted .sortable-th__arrow { color: var(--c-primary); }

/* Leer-Zustand (Tabellen/Listen ohne Treffer) */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8); color: var(--c-text-muted); text-align: center; }

/* Layout-Hüllen */
.container { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-8) var(--sp-10); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); background: var(--c-surface-raised); border-bottom: 1px solid var(--c-border-soft); }
.brand { font-weight: var(--fw-bold); color: var(--c-primary); }

/* Kunden-Konzept „Ruhiges Konzept": schmale, ruhige Spalte + Key-Value-Zeile */
/* Kundenname im Konzept-Kopf: groß, fett, farbig — der Kunde soll sich sofort wiederfinden.
   Bewusst nur hier so prominent (Owner-Entscheidung 2026-07-16). */
.konzept-kunde { font-size: var(--konzept-kunde-fs); font-weight: var(--fw-bold); color: var(--konzept-kunde-fg); line-height: 1.15; margin: var(--sp-1) 0 var(--sp-4); }

/* ── Versorgungs-Konzept: Lebenslagen-Kacheln (Design-Handoff 2026-07-16) ─────────
   Löst Balken/Prozente ab. Jede Aussage ist ein Euro-Betrag oder ein Satz.
   Zustand trägt immer AUCH ohne Farbe: Wort + Glyph-Form + Rahmen (Druck, Rot-Grün-Schwäche). */
.vk { max-width: var(--content-max); margin: 0 auto; }

.vk-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; }
.vk-kopf__id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.vk-name { margin: 0; font-size: var(--vk-name-fs); font-weight: var(--fw-bold); color: var(--vk-name-fg); line-height: 1.05; letter-spacing: -.015em; }
.vk-meta { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); flex-wrap: wrap; }
.vk-meta__sep { color: var(--c-text-soft); }
.vk-erstellt { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-text-soft); }
/* Personen-Beschriftung über einer Kachel-Gruppe: klare Luft nach oben (neue Person
   beginnt), fester Abstand zum Grid darunter (Owner 2026-07-20: Spacing war zu eng). */
.vk-person { margin: var(--sp-8) 0 var(--sp-3); }
.vk-person:first-of-type { margin-top: var(--sp-6); }

/* Umschalter Heute / Mit Konzept — Segment-Pille, etwas größer als die Standard-Tabs */
.tabs--switch .tabs__btn { height: 38px; font-size: var(--fs-body); padding: 0 var(--sp-5); }

/* 3 Spalten; minmax(0,1fr) ist nötig, sonst quetschen lange Wörter die letzte Spalte */
.vk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }

.vk-karte { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--vk-karte-radius); background: var(--vk-karte-bg); border: 1.5px solid var(--c-border); position: relative; }
/* Offenes Edit-Panel: volle Deckkraft + über Nachbarn/Bilanz heben. Nötig, weil das
   opacity-Dimmen der „Geprüft"-Kacheln einen Stacking-Kontext erzeugt, der das
   Tarif-Dropdown sonst gefangen hält (durchscheinend, von der Bilanzkarte überlagert). */
.vk-karte:has(.vk-edit[open]) { opacity: 1; z-index: 30; }
.vk-karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.vk-karte__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--vk-icon-kachel-bg); }
.vk-karte__icon img { width: 26px; height: 26px; display: block; }
.vk-karte__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.vk-karte__haupt { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.35; text-wrap: pretty; }
/* Die Euro-Zahl trägt die Kachel-Aussage: groß, fett, Zustandsfarbe; Altwert leise durchgestrichen. */
.vk-karte__betrag { font-size: var(--fs-h2); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.25; text-wrap: pretty; }
.vk-karte__betrag-alt { color: var(--c-text-soft); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.vk-karte__betrag-pfeil { color: var(--c-text-soft); font-weight: var(--fw-regular); }
.vk-karte__betrag-sub { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); margin-top: 2px; }
.vk-karte[data-zustand="selbst"]     .vk-karte__betrag { color: var(--vk-selbst-fg); }
.vk-karte[data-zustand="gedeckt"]    .vk-karte__betrag { color: var(--vk-gedeckt-fg); }
.vk-karte[data-zustand="teilweise"]  .vk-karte__betrag { color: var(--vk-teil-fg); }
.vk-karte__begr { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-soft); line-height: 1.4; text-wrap: pretty; }
.vk-karte__fuss { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zustands-Pille: Glyph + Wort. Farbe ist nur Verstärkung. */
.vk-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 11px 4px 8px; border-radius: var(--r-full); font-size: var(--fs-caption); font-weight: var(--fw-bold); border: 1px solid transparent; }
.vk-pill__glyph { width: 14px; height: 14px; flex: none; }

.vk-karte[data-zustand="selbst"]     .vk-karte__haupt { color: var(--vk-selbst-fg); }
.vk-pill[data-zustand="selbst"]      { background: var(--vk-selbst-bg); color: var(--vk-selbst-fg); border-color: var(--vk-selbst-bd); }
.vk-karte[data-zustand="teilweise"]  { border-color: var(--vk-teil-bd); }
.vk-pill[data-zustand="teilweise"]   { background: var(--vk-teil-bg); color: var(--vk-teil-fg); border-color: var(--vk-teil-bd); }
.vk-karte[data-zustand="gedeckt"]    { border-color: var(--vk-gedeckt-bd); }
.vk-karte[data-zustand="gedeckt"]    .vk-karte__haupt { color: var(--vk-gedeckt-fg); }
.vk-pill[data-zustand="gedeckt"]     { background: var(--vk-gedeckt-bg); color: var(--vk-gedeckt-fg); border-color: var(--vk-gedeckt-bd); }
/* offen: gestrichelt + ruhig — sichtbar anders als „nicht abgedeckt" */
.vk-karte[data-zustand="offen"]      { border-style: dashed; border-color: var(--vk-offen-dash); background: var(--vk-karte-bg-leise); }
.vk-karte[data-zustand="offen"]      .vk-karte__haupt { color: var(--vk-offen-fg); }
.vk-karte[data-zustand="offen"]      .vk-karte__icon img { opacity: .7; }
.vk-pill[data-zustand="offen"]       { background: var(--vk-offen-bg); color: var(--vk-offen-fg); border-color: var(--vk-offen-bd); }
/* kein Bedarf: stark zurückgenommen, kein Mangel-Eindruck */
.vk-karte[data-zustand="keinbedarf"] { border-width: 1px; border-color: var(--c-border-soft); background: var(--vk-karte-bg-leise); opacity: var(--vk-kein-op); }
.vk-karte[data-zustand="keinbedarf"] .vk-karte__haupt { color: var(--vk-kein-fg); }
.vk-karte[data-zustand="keinbedarf"] .vk-karte__icon img { opacity: .45; }
.vk-pill[data-zustand="keinbedarf"]  { background: var(--vk-kein-bg); color: var(--vk-kein-fg); border-color: var(--vk-kein-bd); }

/* Kosten-Bilanz: echte Beiträge (GKV + Bausteine) als Kopfzahl, darunter die Punkteliste
   „Risiken & Lücken heute" bzw. „Das löst dein Konzept" — Problem zeigen, Lösung verkaufen. */
/* Bilanz-Hero (Owner 2026-07-22): zweispaltig — Kopfzahl links, Punkte rechts
   (volle Breite, flache Box). Weißer Hintergrund mit farbiger Umrandung +
   Schrift statt Farbe-auf-Farbe (Lesbarkeit). */
.vk-bilanzkarte { margin-top: var(--sp-6); padding: var(--sp-6); border-radius: var(--r-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-3) var(--sp-8); align-items: start; background: var(--c-surface); }
.vk-bilanzkarte[data-ansicht="heute"]   { color: var(--vk-selbst-fg); border: 2px solid var(--vk-selbst-fg); }
.vk-bilanzkarte[data-ansicht="konzept"] { color: var(--vk-gedeckt-fg); border: 2px solid var(--vk-gedeckt-fg); }
.vk-bilanzkarte__links, .vk-bilanzkarte__rechts { min-width: 0; }
.vk-bilanzkarte__rechts .vk-punkte__titel { margin-top: 0; }
@media (max-width: 760px) { .vk-bilanzkarte { grid-template-columns: minmax(0, 1fr); } }
.vk-bilanzkarte__kopf { display: flex; flex-direction: column; gap: 2px; }
.vk-bilanzkarte__titel { font-weight: var(--fw-semibold); }
/* Herkunfts-Hinweis: die Zahl kommt aus den eigenen Angaben des Kunden (Commitment). */
.vk-bilanzkarte__sub { font-size: var(--fs-caption); font-weight: var(--fw-medium); opacity: .75; }
.vk-bilanzkarte__zahl { margin-top: var(--sp-3); font-size: var(--vk-bilanz-num); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vk-bilanzkarte__einheit { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.vk-bilanzkarte__monat { margin-top: 2px; font-size: var(--fs-sm); font-weight: var(--fw-medium); opacity: .8; font-variant-numeric: tabular-nums; }
.vk-bilanzkarte__delta { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.vk-punkte__titel { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.vk-punkte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.vk-punkte__punkt { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4; text-wrap: pretty; }
/* Ton nur als Verstärkung — das Wort trägt. „offen" bleibt ruhig, kein Alarm. */
.vk-punkte__punkt[data-ton="offen"] { opacity: .8; }
.vk-punkte__mark { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.vk-punkte__mark svg { width: 100%; height: 100%; display: block; }

.vk-fussnote { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); text-align: right; }

/* Risiko-Zeile auf der Kachel: heute Warnung (Dunkelrot-Rolle), im Konzept gelöst (Grün-Rolle). */
.vk-karte__risiko { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1.35; text-wrap: pretty; border: 1px solid transparent; }
.vk-karte__risiko[data-ton="neg"] { background: var(--vk-selbst-bg); color: var(--vk-selbst-fg); border-color: var(--vk-selbst-bd); }
.vk-karte__risiko[data-ton="pos"] { background: var(--vk-gedeckt-bg); color: var(--vk-gedeckt-fg); border-color: var(--vk-gedeckt-bd); }
.vk-karte__risiko-glyph { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.vk-karte__risiko-glyph svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1199px) { .vk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .vk-grid { grid-template-columns: 1fr; }
  .vk-name { font-size: var(--fs-h1); }
}
/* Kassen-Vorteile auf der Konzept-Seite (Kundensicht, lazy geladen) —
   kompakt je Kategorie, Einzelleistungen klappen per <details> auf. */
.vk-kassekarte { margin-top: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.vk-kassekarte__kopf { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.vk-kassekarte__name { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.vk-kassekarte__quelle { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); }
.vk-vorteil { border-top: 1px solid var(--c-border); }
.vk-vorteil__kopf { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; cursor: pointer; list-style: none; }
.vk-vorteil__kopf::-webkit-details-marker { display: none; }
.vk-vorteil__titel { font-weight: var(--fw-medium); }
.vk-vorteil__label { margin-left: auto; color: var(--c-text-muted); font-size: var(--fs-sm); }
.vk-vorteil__pfeil { color: var(--c-text-muted); transition: transform var(--t-fast); }
.vk-vorteil[open] .vk-vorteil__pfeil { transform: rotate(180deg); }
.vk-vorteil__liste { margin: 0 0 var(--sp-3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.vk-vorteil__liste li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.vk-vorteil__liste li span:last-child { color: var(--c-text-muted); text-align: right; }

/* Kassen-Gegenüberstellung alt vs. neu (Konsole aufklappbar, Konzept ausgestellt) —
   gleiche Leistungspunkte in einer Zeile: Titel | alte Kasse | neue Kasse.
   Nutzt die vk-vorteil-Kopfzeile für die Kategorien; Zeilen als 3-Spalten-Grid. */
.kv-duell__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.kv-duell__seite { display: flex; align-items: center; gap: var(--sp-3); }
.kv-duell__vs { color: var(--c-text-muted); font-size: var(--fs-h2); }
.kv-duell__zeilen { padding-bottom: var(--sp-3); }
.kv-duell__zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; font-size: var(--fs-sm); align-items: baseline; }
.kv-duell__zeile--kopf { color: var(--c-text-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-semibold); border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-2); }
.kv-duell__zeile--bedarf .kv-duell__titel { font-weight: var(--fw-semibold); }
.kv-duell__wert { color: var(--c-text-muted); }
.kv-duell__wert--neu { color: var(--c-text); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
/* Bessere Kondition laut API: grüne Box + dunkelgrüne Schrift (Berater-Sicht) */
.kv-duell__wert--besser { color: var(--c-spart); font-weight: var(--fw-semibold); background: var(--c-spart-bg); border: 1px solid var(--c-spart); border-radius: var(--r-sm); padding: 2px var(--sp-2); width: fit-content; }
.kv-duell__leer { color: var(--c-text-soft); }
.kv-duell__minus { color: var(--c-text-soft); font-size: var(--fs-caption); }
.kv-duell__kat { border-top: 1px solid var(--c-border); }
.kv-duell__kat[open] .vk-vorteil__pfeil { transform: rotate(180deg); }
/* Aktions-Zeile im GKV-Block: Duell-Toggle + GKV-Vergleich als Buttons nebeneinander.
   Offenes Duell nimmt die volle Zeile (das Panel braucht die Breite). */
.gkv-aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); }
.kv-duell-details { min-width: 0; }
.kv-duell-details[open] { flex: 1 1 100%; }
/* Der „GKV-Vergleich öffnen"-Knopf bleibt beim Aufklappen der Gegenüberstellung OBEN
   (Owner-Befund 2026-07-30): das offene Duell nimmt die volle Zeile, sonst rutschte der
   Knopf unter das ganze Panel und war nicht mehr auffindbar. order:-1 zieht ihn vor die
   aufgeklappte Gegenüberstellung. */
.kv-duell-details[open] ~ .gkv-vergleich__oeffnen { order: -1; margin-bottom: var(--sp-1); }
.kv-duell-details__knopf { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.kv-duell-details__knopf::-webkit-details-marker { display: none; }
.kv-duell-details[open] > summary .vk-vorteil__pfeil { transform: rotate(180deg); }
.kv-duell-details > .kv-duell, .kv-duell-details > [data-kasseninfo] { margin-top: var(--sp-3); }
/* Berater-Ausblenden je Kategorie (Call 2026-07-24): Toggle im Kategorie-Kopf;
   ausgeblendete Kategorie in der Konsole gedämpft (erscheint nicht im Konzept). */
.kv-duell__aus { display: inline-flex; margin-left: auto; }
.kv-duell__aus + .vk-vorteil__pfeil { margin-left: var(--sp-2); }
.kv-duell__kat--aus > summary { opacity: .55; }
.kv-duell__kat--aus > summary .badge--neutral { opacity: 1; }
/* Einzeln ausgeblendete Bedarfs-Felder (Call 2026-07-24 #4): Konsole zeigt sie gedimmt,
   der Zeilen-Toggle sitzt rechts im Titel (gleiche Sprache wie das Kategorie-Ausblenden). */
.kv-duell__zeile--aus { opacity: .55; }
.kv-duell__titel--aktionen { display: inline-flex; align-items: center; gap: var(--sp-1); }
.kv-duell__titel--aktionen .kv-duell__aus { margin-left: 0; }

/* Bilanz: Gesamtkosten-Details fix/variabel (Ole/Alex 2026-07-27). */
.vk-bilanzkarte__details { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.vk-bilanzkarte__details > summary { cursor: pointer; color: var(--c-accent); font-weight: var(--fw-medium); list-style: none; }
.vk-bilanzkarte__details > summary::-webkit-details-marker { display: none; }
.vk-bilanzkarte__aufschluesselung { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.vk-bilanzkarte__aufschluesselung li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.vk-bilanzkarte__aufschluesselung li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vk-bilanzkarte__aufschluesselung-sub { color: var(--c-text-muted); font-size: var(--fs-caption); padding-left: var(--sp-3); }

/* ── Konzept-Präsentation, zwei Schritte (ks-*, v9 D FINAL, 2026-07-29) ─────────
   Owner-Prototyp „Gesundheitskonzept v9 D" (handoff-v9d). Schritt 1 =
   Ein-Zeilen-Scanliste mit Schweregraden, Schritt 2 = Vergleichstabelle
   Kategorie | Aktuell | Pfeil | Empfehlung. EINE Zeile = EIN <details>;
   `name`-Attribut = natives Akkordeon (immer nur eine Zeile offen).
   Spec: wissen/design-system.md §Konzept-Präsentation. */
.ks { margin-top: var(--sp-6); zoom: var(--ks-zoom); }

/* Schweregrad-Farbe als Custom Property je Zeile — Balken, Punkt und Kernbetrag
   lesen sie gemeinsam. */
[data-grad="hoch"] { --ks-grad: var(--ks-grad-hoch); }
[data-grad="mittel"] { --ks-grad: var(--ks-grad-mittel); }
[data-grad="gering"] { --ks-grad: var(--ks-grad-gering); }
/* Schon abgesichert (Bestandstarif) ist KEIN Risiko → grün statt Schweregrad-Farbe
   (Owner 2026-07-30): der Schweregrad bleibt intern, darf aber nicht mehr alarmieren. */
.ks-scan__zeile[data-status="vorhanden"] { --ks-grad: var(--kk-green); }

/* ── Schritt 1: Scanliste ── */
.ks-scan__liste { display: grid; gap: var(--sp-2); max-width: var(--ks-scan-w); }
.ks-scan__zeile { border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); border-left: var(--ks-balken) solid var(--ks-grad, var(--c-border)); overflow: hidden; }
.ks-scan__kopf { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.ks-scan__kopf::-webkit-details-marker { display: none; }
.ks-scan__kopf:hover { background: var(--c-surface-muted); }
.ks-scan__icon { width: var(--ks-scan-icon); height: var(--ks-scan-icon); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ks-scan__icon img { width: var(--ks-icon-bild); height: var(--ks-icon-bild); object-fit: contain; }
.ks-scan__titel { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); text-wrap: pretty; }
.ks-scan__wert { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ks-grad); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-scan__punkt { width: var(--ks-punkt); height: var(--ks-punkt); flex: none; border-radius: var(--r-full); background: var(--ks-grad); }
.ks-scan__pill { display: inline-flex; align-items: center; flex: none; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); border: 1px solid var(--c-border); color: var(--c-text-soft); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.ks-scan__pill-auf, .ks-scan__zeile[open] .ks-scan__pill-zu { display: none; }
.ks-scan__zeile[open] .ks-scan__pill-auf { display: inline; }
.ks-scan__auf { padding: 0 var(--sp-4) var(--sp-4) calc(var(--ks-scan-icon) + var(--sp-3) * 2); }
.ks-scan__kopfzeile { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); text-wrap: pretty; }
.ks-scan__risiko { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ks-grad); text-wrap: pretty; }

/* ── GKV-Hero (Schritt 1, Design-Handoff 2026-07-30) ──────────────────────────
   Die Krankenkasse ist der wichtigste Beratungsbestandteil → dominanter Container
   ganz oben, immer offen, Logo der aktuellen Kasse sichtbar. Statusfarbe via
   --ks-grad (data-grad + data-status wie die Scanzeilen; vorhanden = grün). */
.ks-gkv-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-6); max-width: var(--ks-scan-w); margin: 0 0 var(--sp-4); padding: 24px 28px; border-radius: 18px; background: var(--c-surface); border: 1.5px solid var(--ks-hero-bd); border-left: 6px solid var(--ks-grad, var(--c-border)); box-shadow: var(--ks-hero-shadow); }
.ks-gkv-hero[data-status="vorhanden"] { --ks-grad: var(--kk-green); }
.ks-gkv-hero__logo { flex: 0 0 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: 16px 14px; background: var(--ks-hero-tile-bg); border: 1px solid var(--ks-hero-tile-bd); border-radius: var(--r-md); }
.ks-gkv-hero__logo-img { max-width: 120px; max-height: 44px; object-fit: contain; }
.ks-gkv-hero__mono { width: 72px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-primary); font-size: 18px; font-weight: var(--fw-bold); }
.ks-gkv-hero__logo-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-soft); text-align: center; }
.ks-gkv-hero__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.ks-gkv-hero__eyebrow { margin: 0 0 2px; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.ks-gkv-hero__headline { margin: 0 0 var(--sp-1); font-size: 19px; font-weight: var(--fw-bold); color: var(--c-text); line-height: 1.25; text-wrap: pretty; }
.ks-gkv-hero__status { margin: 0 0 10px; font-size: 14px; font-weight: var(--fw-bold); color: var(--ks-grad); text-wrap: pretty; }
.ks-gkv-hero__punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.ks-gkv-hero__punkte li { display: flex; gap: 7px; font-size: 13px; font-weight: var(--fw-medium); color: var(--c-text-muted); line-height: 1.5; text-wrap: pretty; }
.ks-gkv-hero__punkte li::before { content: "–"; color: var(--ks-grad); flex: none; }
.ks-gkv-hero__betrag { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 2px; }
.ks-gkv-hero__wert { display: flex; align-items: center; gap: var(--sp-2); font-size: 26px; font-weight: var(--fw-bold); color: var(--ks-grad); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-gkv-hero__dot { width: 11px; height: 11px; flex: none; border-radius: var(--r-full); background: var(--ks-grad); }
.ks-gkv-hero__betrag-sub { font-size: 12px; font-weight: var(--fw-semibold); color: var(--c-text-soft); white-space: nowrap; }
.ks-gkv-hero__aktuell { margin-top: 6px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); white-space: nowrap; }
@media (max-width: 640px) { .ks-gkv-hero__betrag { margin-left: 0; align-items: flex-start; } }

.ks-legende { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-2) 0 0; padding: 0 var(--sp-2); }
.ks-legende__eintrag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.ks-legende__punkt { width: var(--ks-punkt); height: var(--ks-punkt); border-radius: var(--r-full); background: var(--ks-grad); }

.ks-fazit { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 2px solid var(--c-border); max-width: var(--ks-scan-w); }
.ks-fazit__karte { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--ks-zeile-radius); background: var(--c-surface); border: 1px solid var(--kk-violet-bd); flex-wrap: wrap; }
.ks-fazit__icon { width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ks-fazit__icon img { width: 34px; height: 34px; object-fit: contain; }
.ks-fazit__text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--sp-1); }
.ks-fazit__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); }
.ks-fazit__wert { font-size: var(--ks-fazit-fs); font-weight: var(--fw-bold); color: var(--c-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ks-fazit__hinweis { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); text-wrap: pretty; }

/* ── Schritt 2: Vergleichstabelle ── */
.ks-kopfzeile { display: grid; grid-template-columns: var(--ks-spalte-kat) minmax(0, 1fr) var(--ks-spalte-delta) minmax(0, 1fr); gap: var(--sp-2); }
.ks-kopfzeile__spalte { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); }
.ks-kopfzeile__spalte--aktuell { color: var(--kg-heute-fg); text-align: center; }
.ks-kopfzeile__spalte--empf { color: var(--kg-konzept-fg); text-align: center; }
.ks-liste { display: grid; gap: var(--sp-2); }

.ks-zeile { border-radius: var(--ks-zeile-radius); }
.ks-zeile__kopf { display: grid; grid-template-columns: var(--ks-spalte-kat) minmax(0, 1fr) var(--ks-spalte-delta) minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; cursor: pointer; list-style: none; }
.ks-zeile__kopf::-webkit-details-marker { display: none; }

/* Kategorie-Spalte OHNE Kasten: nur Icon + Label. */
.ks-kategorie { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-1); }
.ks-kategorie__icon { width: var(--ks-icon); height: var(--ks-icon); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ks-kategorie__icon img { width: var(--ks-icon-bild); height: var(--ks-icon-bild); object-fit: contain; }
.ks-kategorie__label { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-wrap: pretty; overflow-wrap: break-word; }

/* Zellen: weiß mit 4-px-Seitenbalken; Inhalt zugeklappt vertikal zentriert,
   aufgeklappt oben bündig (beide Zellen klappen als EIN <details> gemeinsam). */
/* flex-wrap: die zugeklappte Tarif-Vorschau (.ks-tarifmini, flex-basis 100%) rutscht
   in eine EIGENE Zeile unter Kopftext + ✎ + Caret — sonst quetscht ein langer
   Tarifname den Pinsel/Caret über den Text (Owner-Befund 2026-07-30). */
.ks-zelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--ks-zeile-radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.ks-zelle--aktuell { border-left: var(--ks-balken) solid var(--kg-heute-fg); }
.ks-zelle--empf { border-left: var(--ks-balken) solid var(--kg-konzept-fg); }
.ks-zeile[open] .ks-zelle { align-items: flex-start; }
.ks-zelle__inhalt { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.ks-zelle__kopftext { min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); line-height: 1.3; text-wrap: pretty; font-variant-numeric: tabular-nums; }
.ks-tag { flex: none; padding: 2px var(--sp-2); border-radius: var(--r-full); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ks-tag--aktuell { background: var(--kk-error-soft); color: var(--kg-heute-fg); }
.ks-tag--empf { background: var(--kk-green-soft); color: var(--kg-konzept-fg); }
.ks-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: var(--r-full); border: 1px solid var(--c-border); color: var(--c-text-soft); font-size: var(--fs-caption); }
.ks-zeile[open] .ks-pfeil { transform: rotate(180deg); }
.ks-zelle--empf .ks-pfeil { visibility: visible; }

/* Pfeil-Spalte: graues → mittig, darunter das Delta. */
.ks-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.ks-delta__pfeil { color: var(--kk-ink-soft); font-size: var(--fs-body); }
/* Deltas verstärkt (Design-Handoff Schritt 2, 2026-07-30): 12,5 px statt caption,
   Gewicht 700/800; Summe 15 px/800. Farbe bleibt Token. */
.ks-delta__text { font-size: 12.5px; font-weight: var(--fw-bold); text-align: center; line-height: 1.3; font-variant-numeric: tabular-nums; text-wrap: balance; }
.ks-delta--laufend .ks-delta__text { color: var(--ks-delta-laufend); font-weight: 800; }
.ks-delta--risiko .ks-delta__text { color: var(--ks-delta-risiko); font-weight: var(--fw-bold); }
.ks-delta--leise .ks-delta__text { color: var(--ks-delta-leise); font-weight: var(--fw-semibold); }
.ks-zeile--summe .ks-delta__text { font-size: 15px; font-weight: 800; }

/* Zurückgenommene Zustände: „offen" bleibt ruhig (Owner-Regel), „aus" trägt den
   Warnton nur im Chip — nie als Fläche. */
.ks-zeile[data-status="offen"] .ks-tag--empf { background: var(--c-surface-muted); color: var(--c-text-muted); }
/* Schon abgesichert = grün (kein Risiko), nicht grau/rot (Owner 2026-07-30): der
   „Aktuell"-Tag + linke Kante der Zeile werden grün, weil hier schon Schutz besteht. */
.ks-zeile[data-status="vorhanden"] .ks-tag--aktuell { background: var(--kk-green-soft); color: var(--kg-konzept-fg); }
.ks-zeile[data-status="vorhanden"] .ks-zelle--aktuell { border-left-color: var(--kg-konzept-fg); }
.ks-zeile[data-status="aus"] .ks-tag--empf { background: var(--kk-error-soft); color: var(--kg-heute-fg); }

/* Summenzeile: 12-%-Tönung, Chip ÜBER dem Betrag gestapelt (nie umbrechen). */
.ks-zeile--summe .ks-zelle--aktuell { background: var(--ks-tint-a-bg); border-color: var(--ks-tint-a-bd); border-left-color: var(--kg-heute-fg); }
.ks-zeile--summe .ks-zelle--empf { background: var(--ks-tint-e-bg); border-color: var(--ks-tint-e-bd); border-left-color: var(--kg-konzept-fg); }
.ks-zeile--summe .ks-zelle__inhalt { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.ks-zeile--summe .ks-zelle__kopftext { font-size: var(--ks-summe-fs); white-space: nowrap; }
.ks-zeile--summe .ks-zelle--aktuell .ks-zelle__kopftext { color: var(--kg-heute-fg); }
.ks-zeile--summe .ks-zelle--empf .ks-zelle__kopftext { color: var(--kg-konzept-fg); }

/* Aufgeklappt: Inhalt unter den Zellen im selben Raster. */
.ks-zeile__auf { display: grid; grid-template-columns: var(--ks-spalte-kat) minmax(0, 1fr) var(--ks-spalte-delta) minmax(0, 1fr); gap: var(--sp-2); padding-top: var(--sp-2); }
.ks-auf { min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--ks-zeile-radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.ks-auf--aktuell { grid-column: 2; }
.ks-auf--empf { grid-column: 4; }
.ks-auf__hinweis { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-wrap: pretty; }
.ks-auf__hinweis--aktuell { color: var(--kg-heute-fg); }
.ks-auf__hinweis--empf { color: var(--kg-konzept-fg); }
.ks-punkte { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.ks-punkte__punkt { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-wrap: pretty; }
.ks-punkte--aktuell .ks-punkte__punkt::before { content: "–"; color: var(--kg-heute-fg); font-weight: var(--fw-bold); flex: none; }
.ks-punkte--empf .ks-punkte__punkt::before { content: "–"; color: var(--kg-konzept-fg); font-weight: var(--fw-bold); flex: none; }

/* Posten-Box der Summenzeile: Label fest, Annahme schrumpft mit Ellipsis —
   lange Tarifnamen dürfen die Grid-Spalte nie sprengen (Prototyp-Fix). */
.ks-posten { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); overflow: hidden; }
.ks-posten__zeile { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.ks-posten__label { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text); white-space: nowrap; }
.ks-posten__annahme { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-caption); color: var(--kk-ink-soft); text-align: right; white-space: nowrap; }
.ks-posten__wert { flex: none; text-align: right; font-size: var(--fs-caption); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-posten__gesamt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; padding-top: var(--sp-1); border-top: 1px solid var(--c-border); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.ks-posten__gesamt--aktuell { color: var(--kg-heute-fg); border-top-color: var(--ks-tint-a-bd); }
.ks-posten__gesamt--empf { color: var(--kg-konzept-fg); border-top-color: var(--ks-tint-e-bd); }

/* Tarif-Chip im Empfehlungs-Expand (weiße Karte mit grünem Rahmen). */
.ks-tarif { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--kg-konzept-bd); }
.ks-tarif__logo { max-height: 16px; max-width: 44px; flex: none; object-fit: contain; }
.ks-tarif__name { flex: 1; min-width: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--kg-konzept-fg); }
.ks-tarif__preis { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--kg-konzept-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-tarif__vergleich { flex: 1 1 100%; justify-content: center; text-align: center; margin-top: var(--sp-1); border: 0; border-radius: var(--r-full); background: var(--kg-konzept-fg); color: var(--c-surface); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
/* Pinsel im Kartenkopf (Design-Handoff Edit-Modal 2026-07-30): 24px runder Violett-
   Chip, links vom Caret. Sitzt im <summary>; app.js unterbindet das Karten-Toggle. */
.ks-edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--r-full); background: var(--ks-edit-bg); color: var(--ks-edit-fg); font: inherit; font-size: 11px; line-height: 1; cursor: pointer; }
.ks-edit:hover { background: var(--ks-edit-bg-hover); }

/* Erspar-Banner: 12-%-Grün-Tönung, Text dunkelgrün; Mehrkosten neutral violett. */
.ks-banner { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--ks-zeile-radius); background: var(--ks-banner-bg); border: 1px solid var(--ks-banner-bd); color: var(--ks-banner-fg); font-size: var(--fs-h3); font-weight: var(--fw-bold); text-align: center; text-wrap: pretty; }
.ks-banner--mehr { background: var(--ks-banner-mehr-bg); border-color: var(--ks-banner-mehr-bd); color: var(--ks-banner-mehr-fg); }

/* ── Kassen-Hero über der Vergleichstabelle (Schritt 2, Design-Handoff 2026-07-30):
   Kasse aus der Liste heraus, Aktuell (rosé) → Delta → Empfehlung (grün). Nur Tokens. */
.ks-hero2 { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sh-card); }
.ks-hero2__label { flex: 0 0 150px; min-width: 0; }
.ks-hero2__eyebrow { margin: 0 0 2px; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.ks-hero2__sub { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-soft); text-wrap: pretty; }
.ks-hero2__box { flex: 1 1 200px; min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--c-border); border-left: var(--ks-balken) solid var(--c-border); }
.ks-hero2__box--alt { background: var(--ks-tint-a-bg); border-color: var(--ks-tint-a-bd); border-left-color: var(--kg-heute-fg); }
.ks-hero2__box--neu { background: var(--ks-tint-e-bg); border-color: var(--ks-tint-e-bd); border-left-color: var(--kg-konzept-fg); }
.ks-hero2__tag { margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ks-hero2__tag--alt { color: var(--kg-heute-fg); }
.ks-hero2__tag--neu { color: var(--kg-konzept-fg); }
.ks-hero2__zeile { display: flex; align-items: center; gap: var(--sp-3); }
.ks-hero2__logo { max-height: 20px; max-width: 60px; flex: none; object-fit: contain; }
.ks-hero2__preis { font-size: 17px; font-weight: 800; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-hero2__preis--neu { color: var(--kg-konzept-fg); }
.ks-hero2__meta { margin: 4px 0 0; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.ks-hero2__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 4px; flex-wrap: wrap; }
.ks-hero2__vergleich { padding: 4px 11px; border: 0; border-radius: var(--r-full); background: var(--kg-konzept-fg); color: var(--c-surface); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ks-hero2__pfeil { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ks-hero2__pfeil-ico { color: var(--c-text-soft); font-size: var(--fs-body); }
.ks-hero2__delta { font-size: var(--fs-body); font-weight: 800; color: var(--kg-konzept-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kg-steuerung--hero { margin: 0 0 var(--sp-5); padding-top: 0; border-top: 0; }

/* Zugeklappte Tarif-Vorschau in der Empfehlungszelle — beim Aufklappen ausgeblendet. */
.ks-tarifmini { flex: 1 1 100%; display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-1); }
.ks-zeile[open] .ks-tarifmini { display: none; }
.ks-tarifmini__logo { width: 30px; height: 13px; flex: none; margin-top: 2px; object-fit: contain; object-position: left center; }
.ks-tarifmini__txt { flex: 1; min-width: 0; }
.ks-tarifmini__name { display: block; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); line-height: 1.4; text-wrap: pretty; }
.ks-tarifmini__preis { display: block; font-size: 11px; font-weight: var(--fw-bold); color: var(--c-text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Vertrags-Überblick „Das schließt du konkret ab" (Schritt 2, Design-Handoff). */
.ks-vertrag { margin-top: var(--sp-6); }
.ks-vertrag__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); padding: 0 var(--sp-1); }
.ks-vertrag__titel { font-size: var(--fs-h3); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.ks-vertrag__zaehler { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.ks-vertrag__liste { display: grid; gap: var(--sp-2); }
.ks-vertrag__karte { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border-soft); box-shadow: var(--sh-sm); flex-wrap: wrap; }
.ks-vertrag__logo { width: 56px; height: 22px; flex: none; object-fit: contain; object-position: left center; }
.ks-vertrag__logo--leer { background: var(--c-surface-muted); border-radius: var(--r-sm); }
.ks-vertrag__mitte { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ks-vertrag__name { font-size: var(--fs-sm); font-weight: 800; color: var(--c-text); text-wrap: pretty; }
.ks-vertrag__deckt { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.ks-vertrag__rechts { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ks-vertrag__preis { font-size: var(--fs-sm); font-weight: 800; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-vertrag__typ { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); white-space: nowrap; }
.ks-vertrag__summe { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); background: var(--kk-violet-50); border: 1px solid var(--kk-violet-bd); }
.ks-vertrag__summe-label { font-size: var(--fs-sm); font-weight: 800; color: var(--kk-violet-800); }
.ks-vertrag__summe-wert { font-size: var(--fs-h3); font-weight: 800; color: var(--kk-violet-800); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ks-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap: wrap; }
.ks-fuss__rechts { display: flex; align-items: center; gap: var(--sp-3); }

/* Grüner Primär-Knopf („Konzept aktivieren") — Marken-Grün statt Violett. */
.btn--gruen { background: var(--kk-green); border-color: var(--kk-green); color: var(--c-surface); }
.btn--gruen:hover { filter: brightness(.94); color: var(--c-surface); }

/* ── Regie-Präsentation v11 B (kr-*, Owner-Paket handoff-v11b, 2026-07-31) ───────
   Schritt 1: Kapitel-Chips + Szenario-Karten (Risiko baut sich auf, Rosé);
   Schritt 2: Vorher/Nachher-Hero + Ist→Optimiert-Kapitel (Risiko → 0, Grün) +
   „Alles auf einen Blick". Zustand lebt in Query-Params — alles sind Links. */
@keyframes kr-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Chip-Leiste (Kapitel) + Badge + Risiko-Filter */
.kr-leiste { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.kr-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 13px 5px 9px; border: 1px solid var(--kr-karte-bd); border-radius: var(--r-full); background: var(--c-surface); color: var(--kr-pill-gering); text-decoration: none; white-space: nowrap; }
.kr-chip:hover { text-decoration: none; border-color: var(--kr-chip-besucht-bd); color: var(--kr-akzent); }
.kr-chip__icon { width: 24px; height: 24px; flex: none; display: inline-flex; }
.kr-chip__icon img { width: 100%; height: 100%; object-fit: contain; }
.kr-chip__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.kr-chip__label { font-size: 11.5px; font-weight: var(--fw-bold); }
.kr-chip__wert { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kr-chip--aktiv, .kr-chip--aktiv:hover { background: var(--kr-akzent); border-color: var(--kr-akzent); color: var(--c-text-on-accent); }
.kr-chip--durch { background: var(--kr-chip-durch-bg); border-color: var(--kr-rose-bd-stark); color: var(--kr-rose); }
.kr-chip--durch.kr-chip--s2 { background: var(--kr-chip-durch2-bg); border-color: var(--kr-gruen-bd); color: var(--kr-gruen); }
.kr-chip--offenrest { background: var(--kr-chip-durch-bg); border-color: var(--kr-rose-bd-stark); color: var(--kr-rose); }
.kr-chip--besucht { border-color: var(--kr-chip-besucht-bd); color: var(--kr-akzent); }
.kr-badge { margin-left: auto; display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-badge--rose { background: var(--kr-rose-bg-stark); border: 1px solid var(--kr-rose-bd-stark); color: var(--kr-rose); }
.kr-badge--gruen { background: var(--kr-gruen-bg); border: 1px solid var(--kr-gruen-bd); color: var(--kr-gruen); }
.kr-filter { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kr-filter__label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kr-pill-gering); }
.kr-filter__pill { padding: 4px 11px; border: 1px solid var(--kr-pill-gering-bd); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-muted); font-size: 10.5px; font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.kr-filter__pill:hover { text-decoration: none; border-color: var(--kr-akzent); color: var(--kr-akzent); }
.kr-filter__pill.is-an, .kr-filter__pill.is-an:hover { background: var(--kr-akzent); border-color: var(--kr-akzent); color: var(--c-text-on-accent); }

/* Kapitelkarte */
.kr-karte { display: flex; flex-direction: column; gap: var(--sp-4); border: 1px solid var(--kr-karte-bd); border-radius: var(--kr-radius-gross); background: var(--c-surface); padding: 22px 26px; min-height: 340px; }
.kr-karte__kopf { display: flex; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--kr-akzent); }
.kr-karte__titel { margin: 0; font-size: var(--fs-h3); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); }
.kr-karte__eyebrow { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-primary); }
.kr-karte__intro { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--kr-pill-gering); text-wrap: pretty; }

/* Basisschutz-Band (dunkel-lila, Kassen-Logo, OHNE Zusatzbeitrag) */
.kr-basis { display: flex; align-items: center; gap: var(--sp-4); border-radius: var(--kr-radius); background: var(--kr-akzent); padding: 14px 20px; }
.kr-basis__logo { display: inline-flex; align-items: center; justify-content: center; width: var(--kr-basis-logo-w); height: var(--kr-basis-logo-h); border-radius: var(--kr-radius-innen); background: var(--c-surface); flex: none; }
.kr-basis__logo img { max-width: 66px; max-height: 33px; object-fit: contain; }
.kr-basis__mono { font-weight: 800; color: var(--kr-akzent); }
.kr-basis__name { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text-on-accent); }
.kr-basis__wert { font-size: var(--fs-h3); font-weight: 800; color: var(--c-text-on-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-basis__text { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--kk-warning); text-wrap: pretty; }

/* Szenario-Karten (einzeln aufgedeckt) */
.kr-szenarien { display: grid; gap: var(--sp-2); }
.kr-szenario { display: flex; border-radius: var(--kr-radius); border: 1px solid var(--kr-karte-bd); background: var(--c-surface); overflow: hidden; animation: kr-drop-in .2s cubic-bezier(.33, 1, .68, 1); }
.kr-szenario__icon { flex: none; display: flex; align-items: center; justify-content: center; width: var(--kr-icon-spalte); border-right: 1px solid var(--kr-karte-trenner); background: var(--kr-kopf-bg); }
.kr-szenario__icon img { width: var(--kr-icon); height: var(--kr-icon); object-fit: contain; }
.kr-szenario__inhalt { flex: 1; min-width: 0; }
.kr-szenario__kopf { display: flex; align-items: center; gap: var(--sp-4); padding: 12px 16px; background: var(--kr-kopf-bg); border-bottom: 1px solid var(--kr-karte-trenner); }
.kr-szenario__frage { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text); text-wrap: pretty; }
.kr-szenario__wert { font-size: 14.5px; font-weight: 800; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-szenario__detail { padding: 10px 18px 14px 16px; }
.kr-szenario__heute { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--kk-warning); text-wrap: pretty; }
/* Gesetzliches Vorsorge-Pflichtprogramm im Regie-Kapitel (Owner 2026-08-03):
   Katalog mit Zielgruppe/Intervall, aktive Zeilen der Person mit Haken. */
.kr-programm { margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-border-soft); border-radius: var(--kr-radius-box); background: var(--c-surface); }
.kr-programm__titel { margin: 0 0 var(--sp-3); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.kr-programm__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.kr-programm__zeile { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.kr-programm__zeile--aktiv { color: var(--c-text); }
.kr-programm__check { flex: none; width: 18px; text-align: center; color: var(--c-text-muted); }
.kr-programm__zeile--aktiv .kr-programm__check { color: var(--c-spart); font-weight: var(--fw-bold); }
.kr-programm__name { font-weight: var(--fw-medium); }
.kr-programm__zeile--aktiv .kr-programm__name { font-weight: var(--fw-semibold); }
.kr-programm__meta { margin-left: auto; font-size: var(--fs-caption); color: var(--c-text-muted); text-align: right; }
.kr-programm__hinweis { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--c-text-soft); }

/* Übersichtskarten „Alles auf einen Blick" — v13 B Kompakt (Handoff 2026-08-03):
   2-Spalten-Grid, Karten einer Reihe gleich hoch (kein align-items:start),
   Vorher/Jetzt als Label-Spalte, Baustein EINMAL im Karten-Fuß. */
.ku-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .ku-grid { grid-template-columns: 1fr; } }
.ku-karte { border: 1px solid var(--ku-karte-bd); border-radius: 14px; background: var(--c-surface); display: flex; flex-direction: column; }
.ku-karte__kopf { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; flex-wrap: wrap; }
.ku-karte__icon { width: 28px; height: 28px; flex: none; }
.ku-karte__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ku-karte__titel { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text); }
.ku-karte__risiko { margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px; }
.ku-karte__alt { font-size: 12px; font-weight: 700; color: var(--kr-rose); text-decoration: line-through; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ku-karte__pfeil { color: var(--c-text-muted); font-size: 11px; }
.ku-karte__null { font-size: 13px; font-weight: 800; color: var(--kr-gruen); white-space: nowrap; }
.ku-karte__rest { font-size: 12px; font-weight: 700; color: var(--kr-rose); white-space: nowrap; }
.ku-karte__eintraege { padding: 0 18px; }
.ku-eintrag { padding: 10px 0; border-top: 1px solid var(--ku-linie); }
.ku-eintrag__anlass { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--c-text); }
.ku-vj { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 3px 12px; align-items: baseline; }
.ku-vj__label { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ku-vj__label--vorher { color: var(--ku-vorher-label); }
.ku-vj__label--jetzt { color: var(--kr-gruen); }
.ku-vj__wert--vorher { font-size: 12px; font-weight: 500; color: var(--kr-rose); line-height: 1.5; }
.ku-vj__wert--jetzt { font-size: 12px; font-weight: 700; color: var(--kr-gruen); line-height: 1.5; }
.ku-karte__fuss { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 11px 18px 14px; border-top: 1px solid var(--ku-linie); flex-wrap: wrap; }
.ku-karte__logo { width: 34px; height: 14px; object-fit: contain; flex: none; }
.ku-karte__tarif { font-size: 12px; font-weight: 700; color: var(--c-text); }
.ku-karte__preis { font-size: 11px; font-weight: 700; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ku-vergleichen { padding: 4px 11px; border: 0; border-radius: var(--r-full); background: var(--kr-gruen); color: var(--c-text-on-accent); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* Minimal-Standard der Szenario-Karten (Owner 2026-08-03): nur Heute-Zeile +
   ggf. Warnung; die Punkte liegen hinter „Details anzeigen" (<details>, kein JS). */
.kr-mehr { margin-top: var(--sp-2); }
.kr-mehr > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary); }
.kr-mehr > summary::-webkit-details-marker { display: none; }
.kr-mehr[open] > summary .vk-vorteil__pfeil { transform: rotate(180deg); }
.kr-mehr__weniger { display: none; }
.kr-mehr[open] .kr-mehr__weniger { display: inline; }
.kr-mehr[open] .kr-mehr__mehr { display: none; }

/* Rote Gesetzes-Warnung am Szenario (Owner 2026-08-03, z. B. BStabG: Zahnersatz-Festzuschuss sinkt ab 2027). */
.kr-szenario__warnung { margin: var(--sp-2) 0 0; display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-error); }
.kr-szenario__warnung-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--c-error); color: var(--c-text-on-accent); font-size: var(--fs-caption); font-weight: var(--fw-bold); }

/* Risiko-Pills: weißer Grund, farbiger Rand (hoch/mittel/kaum) */
.kr-pill { display: inline-flex; align-items: center; padding: 3px 11px; flex: none; border-radius: var(--r-full); border: 1px solid var(--kr-pill-gering-bd); background: var(--c-surface); color: var(--kr-pill-gering); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.kr-pill--hoch { border-color: var(--kr-pill-hoch-bd); color: var(--kr-pill-hoch); }
.kr-pill--mittel { border-color: var(--kr-pill-mittel-bd); color: var(--kr-pill-mittel); }

/* Spiegelstrich-Listen (Marker per Modifier: neutral / rosé / grün) */
.kr-punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kr-punkte li { display: flex; gap: 7px; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--c-text-muted); line-height: 1.5; text-wrap: pretty; }
.kr-punkte li::before { content: "–"; color: var(--c-primary); flex: none; }
.kr-punkte--rose li::before { color: var(--kr-rose); }
.kr-punkte--gruen li::before { color: var(--kr-gruen); }

/* Kategorie-Banner (Schritt 1 rosé aufgebaut, Schritt 2 grün abgebaut) */
.kr-banner { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 18px; border-radius: var(--kr-radius); animation: kr-drop-in .2s cubic-bezier(.33, 1, .68, 1); }
.kr-banner--rose { background: var(--kr-rose-bg); border: 1px solid var(--kr-rose-bd-stark); }
.kr-banner--rose .kr-banner__label { color: var(--kr-rose); }
.kr-banner--gruen { background: var(--kr-gruen-bg); border: 1px solid var(--kr-gruen-bd); }
.kr-banner__label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--c-text); }
.kr-banner__wert { font-size: 19px; font-weight: 800; color: var(--kr-rose); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-banner__alt { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--kr-rose); text-decoration: line-through; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-banner__pfeil { color: var(--c-text-soft); }
.kr-banner__null { font-size: 19px; font-weight: 800; color: var(--kr-gruen); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-banner__rest { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--kr-rose); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Karten-Navigation + Regie-Buttons */
.kr-nav { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); }
.kr-nav__rechts { margin-left: auto; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.kr-btn { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--kr-radius-box); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.kr-btn:hover { text-decoration: none; }
.kr-btn--outline { border: 1.5px solid var(--kr-akzent); background: var(--c-surface); color: var(--kr-akzent); }
.kr-btn--outline:hover { background: var(--kk-violet-50); color: var(--kr-akzent); }
.kr-btn--voll { border: 0; background: var(--kr-akzent); color: var(--c-text-on-accent); }
.kr-btn--voll:hover { filter: brightness(1.15); color: var(--c-text-on-accent); }

/* Vorher/Nachher-Hero (Schritt 2, rechnet live über die Engine-Summen) */
.kr-vn { display: flex; align-items: stretch; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.kr-vn__box { flex: 1 1 240px; min-width: 0; border-radius: var(--kr-radius-gross); padding: 16px 22px; }
.kr-vn__box--vorher { background: var(--kr-rose-bg); border: 1px solid var(--kr-rose-bd-stark); border-left: 5px solid var(--kr-rose); }
.kr-vn__box--nachher { background: var(--kr-gruen-bg); border: 1px solid var(--kr-gruen-bd); border-left: 5px solid var(--kr-gruen); }
.kr-vn__tag { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kr-rose); }
.kr-vn__tag--gruen { color: var(--kr-gruen); }
.kr-vn__wert { margin: 0 0 3px; font-size: 32px; font-weight: 800; color: var(--kr-rose); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kr-vn__wert--gruen { color: var(--kr-gruen); }
.kr-vn__sub { margin: 0; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); text-wrap: pretty; }
.kr-vn__pfeil { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 4px; }
.kr-vn__pfeil-ico { font-size: 22px; color: var(--c-text-soft); }
.kr-vn__diff { font-size: var(--fs-caption); font-weight: 800; color: var(--kr-gruen); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-vn__diff--mehr { color: var(--kk-violet-800); }

/* Ist → Optimiert (geführter Modus) */
.kr-vgl-liste { display: grid; gap: var(--sp-3); }
.kr-vgl { border-radius: var(--kr-radius); border: 1px solid var(--kr-karte-bd); background: var(--c-surface); overflow: hidden; }
.kr-vgl__kopf { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 16px; background: var(--kr-kopf-bg); border-bottom: 1px solid var(--kr-karte-trenner); }
.kr-vgl__icon { width: 28px; height: 28px; flex: none; display: inline-flex; }
.kr-vgl__icon img { width: 100%; height: 100%; object-fit: contain; }
.kr-vgl__kategorie { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--c-text); }
.kr-vgl__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: 12px 16px 14px; }
.kr-box { border-radius: var(--kr-radius-box); padding: 12px 14px; }
.kr-box--aktuell { background: var(--kr-rose-bg); border: 1px solid var(--kr-rose-bd); border-left: 4px solid var(--kr-rose); }
.kr-box--opt { background: var(--kr-gruen-bg); border: 1px solid var(--kr-gruen-bd); border-left: 4px solid var(--kr-gruen); }
.kr-box__tag { margin: 0 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kr-rose); }
.kr-box__tag--gruen { margin: 0; color: var(--kr-gruen); }
.kr-box__kopfzeile { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 4px; }
.kr-box__wert { margin: 0 0 6px; font-size: 14px; font-weight: var(--fw-bold); color: var(--kk-ink); text-wrap: pretty; }
.kr-box__wert--gruen { color: var(--kr-gruen); }
.kr-box__risiko { margin: 0 0 6px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--kr-rose); text-wrap: pretty; }
.kr-tauschen { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 0; border-radius: var(--r-full); background: var(--ks-edit-bg); color: var(--ks-edit-fg); font: inherit; font-size: 10.5px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; }
.kr-tauschen:hover { background: var(--ks-edit-bg-hover); }
.kr-vergleichen { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 0; border-radius: var(--r-full); background: var(--kr-gruen); color: var(--c-text-on-accent); font: inherit; font-size: 10.5px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; }
.kr-vergleichen:hover { filter: brightness(.94); }
.kr-tarifzeile { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 6px; }
.kr-tarifzeile__logo { width: 36px; height: 14px; flex: none; object-fit: contain; object-position: left center; }
.kr-tarifzeile__name { flex: 1; min-width: 0; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.kr-tarifzeile__preis { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--c-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* „Alles auf einen Blick" */
.kr-toggle { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.kr-toggle__btn { padding: 7px 14px; border: 1px solid var(--kr-karte-bd); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.kr-toggle__btn:hover { text-decoration: none; border-color: var(--kr-chip-besucht-bd); }
.kr-sektionen { display: grid; gap: 22px; }
.kr-sek__kopf { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 9px; padding: 0 2px 8px; border-bottom: 2px solid var(--kr-akzent); }
.kr-sek__icon { width: 26px; height: 26px; flex: none; display: inline-flex; }
.kr-sek__icon img { width: 100%; height: 100%; object-fit: contain; }
.kr-sek__titel { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text); }
.kr-sek__risiko { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.kr-sek__alt { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--kr-rose); text-decoration: line-through; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-sek__pfeil { color: var(--c-text-soft); font-size: var(--fs-caption); }
.kr-sek__null { font-size: 14px; font-weight: 800; color: var(--kr-gruen); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-sek__rest { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--kr-rose); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-blick-liste { display: grid; gap: var(--sp-2); }
.kr-blick { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr) 250px; gap: var(--sp-3); align-items: center; padding: 11px 16px; border-radius: var(--kr-radius); border: 1px solid var(--kr-karte-bd); background: var(--c-surface); }
.kr-blick__kat { min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--c-text); text-wrap: pretty; }
.kr-blick__aktuell { min-width: 0; padding: 8px 12px; border-radius: var(--kr-radius-innen); background: var(--kr-rose-bg); border-left: 3px solid var(--kr-rose); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--kr-rose); text-wrap: pretty; }
.kr-blick__opt { min-width: 0; padding: 8px 12px; border-radius: var(--kr-radius-innen); background: var(--kr-gruen-bg); border-left: 3px solid var(--kr-gruen); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--kr-gruen); text-wrap: pretty; }
.kr-blick__tarif { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.kr-blick__logo { width: 36px; height: 14px; flex: none; object-fit: contain; object-position: right center; }
.kr-blick__tarif-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.kr-blick__tarif-name { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text); text-align: right; text-wrap: pretty; }
.kr-blick__tarif-preis { font-size: 11px; font-weight: var(--fw-bold); color: var(--c-text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kr-mini-edit { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border: 0; border-radius: var(--r-full); background: var(--ks-edit-bg); color: var(--ks-edit-fg); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.kr-mini-edit:hover { background: var(--ks-edit-bg-hover); }

/* Abschluss-Seite „Das schließt du konkret ab" (v11 B rev. 2) */
.kr-weiter { display: flex; justify-content: flex-end; margin-top: 18px; }
.kr-btn--gross { padding: 11px 22px; font-size: 14px; }
.kr-abschluss__kopf { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 4px; padding: 0 2px 8px; border-bottom: 2px solid var(--kr-akzent); }
.kr-abschluss__titel { margin: 0; font-size: var(--fs-h3); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); }
.kr-abschluss__eyebrow { margin-left: auto; flex: none; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-primary); white-space: nowrap; }
.kr-abschluss__sub { margin: 0 2px 14px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--kr-pill-gering); text-wrap: pretty; }
.ks-vertrag__kopf--zaehler { justify-content: flex-end; }
.ks-vertrag__aktionen { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.ks-vertrag__aktionen form { display: inline-flex; }
.kr-mini-raus { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--kr-karte-bd); border-radius: var(--r-full); background: var(--c-surface); color: var(--kr-rose); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.kr-mini-raus:hover { border-color: var(--kr-rose-bd-stark); background: var(--kr-rose-bg); }
.kr-vergleichen--gross { padding: 5px 12px; font-size: 11px; }

@media (max-width: 900px) {
  .kr-vgl__spalten { grid-template-columns: minmax(0, 1fr); }
  .kr-blick { grid-template-columns: minmax(0, 1fr); }
  .kr-blick__tarif { justify-content: flex-start; }
  .kr-szenario__icon { width: 84px; }
  .kr-szenario__icon img { width: 68px; height: 68px; }
}

/* Berater-Steuerung im Aufklapper — optisch abgesetzt, im Druck weg. */
.kg-steuerung { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border-soft); }

/* Kassen-Vergleich im Overlay (natives <dialog>, s. .modal).
   Der Breit-Modifier steht bewusst UNTEN bei den .modal-Regeln — hier stünde er
   vor `.modal__box` und würde von dessen Breite überschrieben (gleiche Spezifität). */
.kg-modal__kopf { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); }
.kg-modal__icon { width: var(--kg-icon); height: var(--kg-icon); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--vk-icon-kachel-bg); }
.kg-modal__icon img { width: 22px; height: 22px; object-fit: contain; }
.kg-modal__titel { flex: 1; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-primary); }

@media (max-width: 900px) {
  .kg-boxen { grid-template-columns: minmax(0, 1fr); }
}

/* Duell-Filterleiste: Bulk „nur bessere Kategorien" (Ole 2026-07-27). */
.kv-duell__filterleiste { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3); border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; }

/* Tarif-Zeile der Baustein-Karte: Combo + ✕ zum Entfernen (Owner 2026-07-27). */
.baustein__tarifzeile { display: flex; align-items: center; gap: var(--sp-1); }
.baustein__tarifzeile .combo { flex: 1; min-width: 0; }
.baustein__tarifzeile .icon-btn { flex: none; }

/* Bedarfs-Fragen in der Baustein-Karte (Ole/Alex 2026-07-27): Frequenz je Konto. */
.baustein__bedarf { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border-soft); display: grid; gap: var(--sp-2); }
.baustein__bedarf-titel { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.baustein__frage { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
/* Einstiegsfrage („Schon zusatzversichert?"): länger als die Ja/Nein-Fragen —
   Text auf voller Breite, die drei Antwort-Chips in eigener Zeile darunter. */
.baustein__gate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.baustein__gate-text { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-wrap: pretty; }
.baustein__frage-text { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.baustein__bedarf-zeile { display: flex; align-items: center; gap: var(--sp-1); }
.baustein__bedarf-label { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.baustein__bedarf-zeile .input--sm { width: 4.5rem; }
.baustein__bedarf-summe { font-size: var(--fs-caption); color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ausgaben-Erfassung mit Frequenz (Ole/Alex 2026-07-27): Anzahl × Betrag oder €/Jahr. */
.konto-frequenz { display: flex; align-items: center; gap: var(--sp-1); }
.konto-frequenz .input--sm { width: 5rem; }
.konto-frequenz__mal { color: var(--c-text-muted); flex: none; }
.konto-frequenz__oder { color: var(--c-text-soft); font-size: var(--fs-caption); flex: none; }
.konto-frequenz__hinweis { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-text-muted); }

/* ── Antragsstrecke (A3-Redesign 2026-07-28) ─────────────────────────────────────
   Zwei Zonen je Antrag: „aus der Beratung übernommen" als Chips (Zone 1) und
   „das brauchen wir noch" als große Touch-Widgets (Zone 2). Ausgelöste Felder
   erscheinen als violette Unterkarte. Spec: wissen/design-system.md §Antragsstrecke. */
.af-antrag { max-width: var(--antrag-max); margin: 0 auto; overflow: hidden; }
.card--flush { padding: 0; }

.af-kopf { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--c-border-soft); }
/* Logo-Box wächst mit breiten Kassen-Logos mit (Owner 2026-08-03: „BKK firmus
   abgeschnitten") — feste 46px beschnitten alles über Wort-Bild-Marken-Breite. */
.af-kopf__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 var(--sp-2); flex: none; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-border-soft); }
.af-kopf__logo .logo-img--md { max-height: 36px; max-width: 120px; }
.af-kopf__text { flex: 1; min-width: 0; }
.af-kopf__titel { font-size: 17px; font-weight: var(--fw-bold); }
.af-kopf__meta { font-size: var(--fs-caption); color: var(--c-text-soft); }
.badge--ok-antrag { background: var(--antrag-ok-bg); color: var(--antrag-ok-fg); border: 1px solid var(--antrag-ok-bd); font-weight: var(--fw-bold); }
.badge--offen-antrag { background: var(--antrag-offen-bg); color: var(--antrag-offen-fg); border: 1px solid var(--antrag-offen-bd); font-weight: var(--fw-bold); }

.af-zone { padding: var(--sp-5) var(--sp-6); }
.af-zone + .af-zone { padding-top: 0; }
.af-eyebrow { margin: 0 0 var(--sp-3); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; }
.af-eyebrow--ok { color: var(--antrag-ok-fg); }
.af-eyebrow--offen { color: var(--antrag-offen-fg); }

/* Zone 1 — Zusammenfassungs-Chip je fertiger Gruppe, aufklappbar und editierbar. */
.af-chips { display: grid; gap: var(--sp-2); }
.af-chip { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); background: var(--c-surface); }
.af-chip[open] { background: var(--antrag-unter-bg); }
.af-chip > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.af-chip > summary::-webkit-details-marker { display: none; }
.af-chip__haken { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-full); background: var(--antrag-ok-bg); color: var(--antrag-ok-fg); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.af-chip__titel { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.af-chip__werte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text-muted); }
.af-chip__aendern { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary); }
.af-chip[open] .af-chip__aendern { color: var(--c-text-soft); }
.af-chip > .felder-grid { padding: 0 var(--sp-4) var(--sp-4); margin-bottom: 0; animation: kk-drop-in var(--dur-fast) var(--ease-out); }
/* Doppelte Klasse: sticht die Basis-.felder-grid weiter unten in dieser Datei aus. */
.felder-grid.felder-grid--breit { grid-template-columns: repeat(auto-fill, minmax(var(--antrag-feld-min), 1fr)); }

/* Zone 2 — offene Gruppen: alles sichtbar, Übernommenes mit grüner Kante. */
.af-gruppe-offen { display: grid; gap: var(--sp-4); }
.af-gruppe-offen + .af-gruppe-offen { margin-top: var(--sp-5); }
.af-gruppe-offen__titel { margin: 0; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--antrag-offen-fg); }
.af-gruppe-offen .field { margin-bottom: 0; }
.field--ok .input, .field--ok .af-seg__btn, .af-frage--ok .input { border-color: var(--antrag-ok-bd); }

/* Segment-Knöpfe (ja_nein/toggle + Auswahl bis 3 Optionen) — Radios, ohne JS nutzbar. */
.af-seg { position: relative; display: flex; gap: 6px; }
.af-seg__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.af-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: var(--antrag-seg-h); padding: 0 var(--sp-3); border: var(--antrag-seg-bd) solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text-muted); font-weight: var(--fw-semibold); text-align: center; cursor: pointer; }
.af-seg__btn:hover { border-color: var(--c-accent); }
.af-seg__input:checked + .af-seg__btn { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); }
.af-seg__input:focus-visible + .af-seg__btn { box-shadow: 0 0 0 3px var(--c-focus-ring); }

/* Frage-Zeile: langes Label links, Widget rechts in fester Breite. */
.af-frage { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.af-frage__text { flex: 1; min-width: 280px; font-weight: var(--fw-semibold); text-wrap: pretty; }
.af-frage__widget { width: var(--antrag-widget-w); flex: none; }
.af-frage__widget .input { width: 100%; }

/* Karten-Checkbox mit „mehr anzeigen" — Volltext bleibt IMMER im DOM (rechtlich). */
.af-erk { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--antrag-seg-bd) solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.af-erk + .af-erk { margin-top: var(--sp-2); }
.af-erk--an, .af-erk:has(.af-erk__box:checked) { border-color: var(--antrag-ok-bd); background: var(--antrag-ok-leise); }
.af-erk__box { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.af-erk__haken { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-top: 1px; border: var(--antrag-seg-bd) solid var(--c-border); border-radius: 7px; background: var(--c-surface); cursor: pointer; }
.af-erk__haken::after { content: "✓"; color: var(--c-text-on-accent); font-weight: var(--fw-bold); opacity: 0; }
.af-erk__box:checked + .af-erk__haken { background: var(--antrag-ok-fg); border-color: var(--antrag-ok-fg); }
.af-erk__box:checked + .af-erk__haken::after { opacity: 1; }
.af-erk__box:focus-visible + .af-erk__haken { box-shadow: 0 0 0 3px var(--c-focus-ring); }
.af-erk__text { flex: 1; min-width: 0; font-size: var(--fs-sm); text-wrap: pretty; }
.af-erk__text label { cursor: pointer; }
.af-mehr > summary { list-style: none; cursor: pointer; }
.af-mehr > summary::-webkit-details-marker { display: none; }
.af-mehr__link { margin-left: var(--sp-1); color: var(--c-primary); font-weight: var(--fw-semibold); }
.af-mehr__link--zu, .af-mehr[open] .af-mehr__kurz, .af-mehr[open] .af-mehr__link--auf { display: none; }
.af-mehr[open] .af-mehr__link--zu { display: inline; }
.af-mehr__voll { display: none; }
.af-mehr[open] .af-mehr__voll { display: inline; }

/* Ausgelöste Felder — eingerückte violette Unterkarte direkt unter der Frage. */
.af-unter { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--antrag-feld-min), 1fr)); gap: var(--sp-3); grid-column: 1 / -1; padding: var(--sp-4); border: 1px solid var(--antrag-unter-bd); border-radius: var(--r-md); background: var(--antrag-unter-bg); animation: kk-drop-in var(--dur-base) var(--ease-out); }
.af-unter .field { margin-bottom: 0; }
.af-unter .af-frage { grid-column: 1 / -1; }
@keyframes kk-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.af-headline { grid-column: 1 / -1; font-weight: var(--fw-semibold); margin-top: var(--sp-2); }
.af-fest { margin: 0; color: var(--c-text-muted); }
.af-hinweis { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-text-soft); }
.af-fehler { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-error); }
.af-fussnote { max-width: var(--antrag-max); margin: var(--sp-4) auto 0; font-size: var(--fs-sm); color: var(--c-text-soft); text-wrap: pretty; }

/* Sticky Footer: Fortschritt über ALLE Anträge + Speichern/Übergeben. */
.af-footer { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: center; margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--antrag-footer-bg); backdrop-filter: var(--antrag-footer-blur); border-top: 1px solid var(--c-border-soft); }
.af-footer__inner { display: flex; align-items: center; gap: var(--sp-4); width: var(--antrag-max); max-width: 100%; }
.af-footer__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-muted); white-space: nowrap; }
.af-balken { flex: 1; height: var(--antrag-balken-h); border-radius: var(--r-full); background: var(--c-surface-muted); overflow: hidden; }
.af-balken__fuell { display: block; height: 100%; border-radius: var(--r-full); background: var(--antrag-ok-fg); transition: width var(--t-slow); }
.btn-uebergeben { background: var(--antrag-ok-fg); color: var(--c-text-on-accent); }
.btn-uebergeben:hover { background: var(--antrag-ok-fg); filter: brightness(.94); }

/* Kassen-Vergleich, KUNDEN-Layout (Konzept; Vorbild bonusrechner_vergleich2):
   Ersparnis-Aufmacher, „Details zum Vergleichen"-Toggle, Box-Paare je Leistung —
   die laut API bessere Kasse grün, die andere grau; Zeilen expandieren zu Texten. */
.kvk-hero { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.kvk-hero__label { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.kvk-hero__wert { font-size: 2rem; font-weight: var(--fw-bold); color: var(--c-spart); }
.kvk-hero__wert--minus { color: var(--c-text); }
.kvk-kurz { margin: var(--sp-3) 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.kvk-kurz__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); }
.kvk-minus { color: var(--c-text-soft); font-size: var(--fs-caption); }
.kvk-details__knopf { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; }
.kvk-details__knopf::-webkit-details-marker { display: none; }
.kvk-details[open] > .kvk-details__knopf .vk-vorteil__pfeil { transform: rotate(180deg); }
.kvk-abschnitt { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-h2); }
.kvk-spalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.kvk-logos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); margin-bottom: var(--sp-1); }
.kvk-logos__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.kvk-logos__zelle { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-muted); text-align: center; }
.kvk-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
/* Einrückung nur am Titel — läge sie auf der Zeile, verschöben sich die
   Box-Spalten gegenüber Logo-Kopf + Monatsbeitrag (Owner 2026-08-03: „nicht aligned"). */
.kvk-zeile--sub .kvk-zeile__titel { padding-left: var(--sp-4); }
.kvk-zeile__titel { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.kvk-boxpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.kvk-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-muted); color: var(--c-text-soft); font-size: var(--fs-sm); text-align: center; }
.kvk-box--besser { background: var(--c-spart-bg); border-color: var(--c-spart); color: var(--c-text); }
.kvk-summe { border-top: 1px solid var(--c-border); margin-top: var(--sp-3); }
.kvk-summe__rechnung { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-sm); color: var(--c-text-soft); }
.kvk-summe__gesamt { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-spart); }
.kvk-kategorie { border-top: 1px solid var(--c-border); padding: var(--sp-2) 0; }
/* Kopf im Zeilen-Grid: das Bewertungs-Label („sehr gut → sehr gut") steht mittig
   ÜBER dem Box-Paar, auf das es sich bezieht — nicht lose am rechten Rand. */
.kvk-kategorie__kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
.kvk-kategorie__links { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.kvk-kategorie__kopf .vk-vorteil__label { margin-left: 0; text-align: center; }
.kvk-kategorie__titel { font-weight: var(--fw-semibold); }
/* Zarte Trenner zwischen den Leistungszeilen — die Box-Paare „schwimmen" sonst. */
.kvk-kategorie .kvk-zeile { border-top: 1px solid var(--c-border-soft); }
.kvk-leistung > summary { cursor: pointer; list-style: none; }
.kvk-leistung > summary::-webkit-details-marker { display: none; }
.kvk-leistung[open] .vk-vorteil__pfeil { transform: rotate(180deg); }
.kvk-leistung__texte { padding: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); display: flex; flex-direction: column; gap: var(--sp-2); }
.kvk-leistung__texte p { margin: 0; }
/* EIN „Weitere Details laden"-Umschalter (CSS-Checkbox, kein JS): Standard zeigt
   nur Zeilen mit Vorteil der neuen Kasse; :checked blendet die .kvk-rest-Blöcke
   in Ersparnis-Rechnung UND Leistungen & Bonus ein. */
.kvk-alle { display: none; }
.kvk-rest { display: none; }
.kvk-alle:checked ~ .kvk-rest, .kvk-alle:checked ~ * .kvk-rest { display: block; }
/* Vollbreiter Umschalt-Knopf statt frei schwebend in der Mitte (Owner 2026-08-03):
   spannt die Inhaltsbreite und trennt zugleich die beiden Abschnitte sichtbar. */
.kvk-alle__block { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); margin: var(--sp-5) 0; }
.kvk-alle__block > label { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.kvk-alle__hinweis { font-size: var(--fs-caption); color: var(--c-text-muted); }
.kvk-alle__weniger { display: none; }
.kvk-alle:checked ~ * .kvk-alle__weniger { display: inline; }
.kvk-alle:checked ~ * .kvk-alle__mehr { display: none; }
.kvk-alle:checked ~ * .kvk-alle__block .vk-vorteil__pfeil, .kvk-alle:checked ~ .kvk-alle__block .vk-vorteil__pfeil { transform: rotate(180deg); }
@media print { .kvk-details { break-inside: auto; } .kvk-kategorie { break-inside: avoid; } }

/* Präsentationen: Kachel-Übersicht (Quick-Access) + Vollbild-Viewer (kein Download). */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.pv-tile { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; }
.pv-tile:hover { border-color: var(--c-primary); }
.pv-tile__typ { font-size: var(--fs-h1); line-height: 1; }
.pv-tile__titel { font-weight: var(--fw-semibold); }
.pv-tile__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
/* Konzept-Varianten-Umschalter (Topbar-Mitte Konsole/Konzept) */
.konzept-umschalter { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.konzept-umschalter__aktiv { cursor: default; }

/* Präsentationen-Dropdown (Topbar Konsole/Konzept) + Overlay-Dialog */
.pv-menu { position: relative; }
.pv-menu__knopf { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.pv-menu__knopf::-webkit-details-marker { display: none; }
.pv-menu[open] > .pv-menu__knopf .vk-vorteil__pfeil { transform: rotate(180deg); }
.pv-menu__liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; display: flex; flex-direction: column; padding: var(--sp-2); background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.pv-menu__item { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); }
.pv-menu__item:hover { background: var(--c-surface-muted); }
/* Vollbild UNTERHALB der Topbar (Owner 2026-07-22: „Fullscreen, aber die Leiste
   bleibt stehen") — nicht-modaler Dialog (show statt showModal): die Topbar
   bleibt sichtbar UND bedienbar (z.B. nächste Präsentation, Abschluss). app.js
   setzt `top` auf die gemessene Topbar-Unterkante. */
.pv-modal { position: fixed; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--c-border); background: var(--c-surface); display: flex; flex-direction: column; z-index: 40; }
.pv-modal:not([open]) { display: none; }
.pv-modal__kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.pv-modal__titel { font-weight: var(--fw-semibold); }
.pv-modal__frame { flex: 1; width: 100%; border: 0; }

.pv-viewer { display: flex; flex-direction: column; height: 100vh; }
.pv-viewer__kopf { flex: none; }
.pv-viewer__frame { flex: 1; width: 100%; border: 0; }
.pv-viewer__buehne { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-6); background: var(--c-surface-muted); }
.pv-viewer__bild { max-width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--card-shadow); }

@media print { .vk-karte { break-inside: avoid; } .vk-bilanzkarte { break-inside: avoid; } .vk-kassekarte { break-inside: avoid; } .vk-edit { display: none; } .kv-duell__kat { break-inside: avoid; } }

.concept { max-width: var(--concept-max); margin: 0 auto; }
.concept > * + * { margin-top: var(--sp-6); }
.concept .card + .card { margin-top: var(--sp-4); }   /* Schutz-Bausteine nicht aneinanderkleben */

/* „Deine Situation heute" — was fehlt und aus eigener Tasche geht */
.luecke { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); }
.luecke:last-child { border-bottom: 0; }
.luecke__mark { flex: none; width: 18px; font-weight: var(--fw-bold); color: var(--luecke-mark-fg); line-height: 1.5; }
.luecke.is-abgesichert .luecke__mark { color: var(--luecke-ok-fg); }
.luecke__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.luecke__name { font-weight: var(--fw-semibold); }
.luecke__sub { font-size: var(--fs-sm); color: var(--c-text-soft); }
.luecke__loesung { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--luecke-loesung-fg); margin-top: 2px; }
.luecke__wert { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.luecke__betrag { font-weight: var(--fw-bold); color: var(--luecke-betrag-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.luecke__wert-sub { font-size: var(--fs-caption); color: var(--c-text-soft); }
.luecke.is-abgesichert .luecke__wert-sub { color: var(--luecke-ok-fg); }

/* Modal: Bestätigungs-Dialog im eigenen Design (statt des nativen confirm()).
   Basis ist das <dialog>-Element — bringt Fokus-Falle, Esc und Backdrop von Haus aus mit. */
.modal { border: 0; padding: 0; background: transparent; max-width: 92vw; }
.modal::backdrop { background: var(--modal-backdrop); }
.modal__box { width: var(--modal-box-w); max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
/* Breite Variante (Kassen-Vergleich v6) — muss NACH .modal__box stehen. */
.modal__box--breit { width: var(--modal-box-w-breit); max-height: 86vh; overflow-y: auto; }
.modal__titel { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.modal__text { color: var(--c-text-muted); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); }
.modal[open] { animation: modal-in var(--dur-fast) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Ladebalken: dünne Fortschrittsleiste am oberen Rand während einer AJAX-Neuberechnung.
   Zeigt dem Berater sofort, dass sein Klick angekommen ist — der Server braucht ~0,5 s,
   ohne Feedback klickt man sonst nochmal. `is-active` schaltet JS beim Fetch. */
.ladebalken { position: fixed; top: 0; left: 0; right: 0; height: var(--ladebalken-h); z-index: 2000; overflow: hidden; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.ladebalken.is-active { opacity: 1; }
.ladebalken__inner { position: absolute; top: 0; height: 100%; width: 40%; border-radius: var(--r-full); background: var(--ladebalken-fg); animation: ladebalken-sweep var(--ladebalken-dur) var(--ease-out) infinite; }
@keyframes ladebalken-sweep { 0% { left: -40%; } 100% { left: 100%; } }
/* Während eine Anfrage läuft: Progress-Cursor überall — auch über Buttons (höhere Spezifität). */
html.is-pending, html.is-pending * { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .ladebalken__inner { animation-duration: 1.8s; } }
@media print { .ladebalken { display: none; } }

/* Konzept-Tabs: teilen die Präsentation in heute → Konzept → Bilanz.
   Ohne JS bleiben alle Panels sichtbar (die Leiste blendet sich dann aus) — die Seite
   ist dann lang, aber vollständig. Erst `html.js` schaltet auf echte Tabs um. */
.tabs { display: none; }
.js .tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--sp-5); background: var(--tabs-bg); border-radius: var(--r-full); }
/* Varianten-Wechsel-Formulare in der Tab-Leiste (Konzept): Buttons fluchten wie Tabs */
.tabs form { display: contents; }
.tabs__btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-full); background: transparent; color: var(--tabs-btn-fg); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.tabs__btn:hover { color: var(--tabs-btn-active-fg); }
.tabs__btn.is-active { background: var(--tabs-btn-active-bg); color: var(--tabs-btn-active-fg); box-shadow: var(--sh-sm); }
.tabs__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Panel-Überschrift trägt nur den Druck — auf dem Schirm sagt das der aktive Tab. */
.tab-panel__titel { display: none; }
@media print {
  .tabs { display: none; }
  /* Das PDF muss vollständig sein: alle drei Ansichten drucken, mit Überschrift. */
  .tab-panel[hidden] { display: block !important; }
  .tab-panel { break-before: page; }
  .tab-panel:first-of-type { break-before: auto; }
  .tab-panel__titel { display: block; margin-bottom: var(--sp-4); font-size: var(--fs-h1); }
}


/* Kachel-Edit: Stift auf der Kachel klappt das Baustein-Formular GENAU dieser Kachel auf.
   <details> — funktioniert ohne JS; ersetzt den früheren globalen Bearbeiten-Modus. */
.vk-edit { margin-top: var(--sp-2); border-top: 1px dashed var(--c-border-soft); padding-top: var(--sp-2); }
.vk-edit__stift { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); border-radius: var(--r-sm); padding: 2px 6px; transition: color var(--t-fast), background var(--t-fast); }
.vk-edit__stift::-webkit-details-marker { display: none; }
.vk-edit__stift:hover { color: var(--c-primary); background: var(--kk-violet-50); }
.vk-edit__stift:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.vk-edit__stift svg { width: 13px; height: 13px; flex: none; }
.vk-edit[open] .vk-edit__stift { color: var(--c-primary); }
.vk-edit__panel { margin-top: var(--sp-3); }
/* Das eingebettete Baustein-Formular kommt aus der Konsole — in der schmalen Kachel
   ohne eigene Karten-Optik (die Kachel IST die Karte). */
.vk-edit__panel .baustein { border: 0; box-shadow: none; padding: 0; background: transparent; }
.vk-edit__hinweis { margin: 0 0 var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-soft); }
.eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border-soft); }
.kv:last-child { border-bottom: 0; }
.kv__label { color: var(--c-text-muted); }
.kv__value { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; }

/* Konzept-Kopf: KassenKompass-Marke als Briefkopf */
.concept-head { display: flex; align-items: center; gap: var(--sp-4); }
.concept-head h1 { margin: 0; }
.concept-brand { height: 30px; width: auto; display: block; }

/* Kasse inline: Logo + Name (einheitlich in Konzept, Backoffice, Konsole) */
.kasse-inline { display: inline-flex; align-items: center; gap: var(--sp-2); }
.kasse-inline > span { font-weight: var(--fw-semibold); }

/* Empfehlungs-Kopf: Sparten-Icon + Tarifname */
.empfehlung-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }

/* Sparten-Tags: Icon-Chips (ambulant, zahn, …) */
.sparten-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sparte-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px 6px 8px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sparte-tag:hover { border-color: var(--c-accent-2); box-shadow: var(--sh-sm); }
.sparte-tag__icon { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* Empfehlungs-Box: dünne Lila-Umrandung wie die aktive Baustein-Karte in der Konsole */
.card--empfehlung { border-color: var(--konzept-empfehlung-bd); }

/* Ergebnis-Hero: große, farblich hervorgehobene Kernzahl (Ersparnis grün / Mehrbeitrag lila) */
.konzept-hero { border-radius: var(--card-radius); padding: var(--sp-6) var(--sp-4); text-align: center; background: var(--konzept-hero-mehr-bg); box-shadow: var(--konzept-hero-shadow); }
.konzept-hero.is-spart { background: var(--konzept-hero-spart-bg); }
.konzept-hero__num { font-size: var(--konzept-hero-num); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.05; }
.konzept-hero.is-spart .konzept-hero__num { color: var(--c-spart); }
.konzept-hero__label { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-primary); margin-top: var(--sp-1); }
.konzept-hero.is-spart .konzept-hero__label { color: var(--c-spart); }
.konzept-hero__sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }

/* ---- Backoffice-Shell (Sidebar + Inhalt) ---- */
.admin { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); padding: var(--sp-5) var(--sp-4); border-right: 1px solid var(--kk-shell-bd); }
.sidebar__brand { font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--c-primary); margin-bottom: var(--sp-1); }
.sidebar__logo { height: 24px; width: auto; display: block; }
.sidebar__tag { display: block; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--sidebar-fg-muted); margin-bottom: var(--sp-6); }
.nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__item { color: var(--sidebar-fg-muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-weight: var(--fw-medium); }
.nav__item:hover { color: var(--sidebar-fg); background: var(--nav-hover-bg); text-decoration: none; }
.nav__item.is-active { color: var(--nav-active-fg); background: var(--nav-active-bg); font-weight: var(--fw-semibold); }
/* Gruppen-Überschrift in der Sidebar (z.B. „Aktueller Fall", „Verwaltung"). */
.nav__gruppe { margin: var(--sp-3) var(--sp-3) 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); }
.admin-main { padding: var(--sp-8) var(--sp-10); background: var(--c-bg); min-width: 0; }

/* ── Accordion-Navigation (Design-Handoff „handoff-navigation", 2026-07-30) ───────
   Eine stabile Leiste für ALLE Bereiche: alles sichtbar, Hierarchie als Dropdown,
   aktiver Pfad markiert (Icon-Chip + Text + Führungslinie), Zuklapp-Punkt bei
   eingeklappter Gruppe mit aktiver Seite. Auf-/Zu in app.js (localStorage).
   Spec: wissen/design-system.md §Navigation. */
.nav2 { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.nav2-group { display: flex; flex-direction: column; }

/* Ebene-1-Zeile (Gruppen-Header ODER Top-Blatt). */
.nav2-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--nav2-fg); font: inherit; font-size: 13.5px; font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.nav2-item:hover { background: var(--nav-hover-bg); text-decoration: none; }
.nav2-icon { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--nav2-chip-bg); color: var(--nav2-icon); }
.nav2-icon svg { width: 14px; height: 14px; display: block; }
.nav2-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav2-caret { flex: none; font-size: 10px; color: var(--c-text-soft); transform: rotate(-90deg); transition: transform var(--t-fast); }
.nav2-group.is-open > .nav2-item .nav2-caret,
.nav2-group.is-open > .nav2-child--group .nav2-caret { transform: rotate(0deg); }

/* Aktiver Pfad (Gruppe enthält aktive Seite) + aktives Top-Blatt. */
.nav2-group.in-path > .nav2-item { color: var(--nav2-active-fg); font-weight: var(--fw-bold); }
.nav2-group.in-path > .nav2-item .nav2-icon,
.nav2-item.is-active .nav2-icon { background: var(--nav2-chip-bg-active); color: var(--nav2-icon-active); }
.nav2-item.is-active { background: var(--nav2-active-bg); color: var(--nav2-active-fg); font-weight: var(--fw-bold); }

/* Zuklapp-Punkt: nur wenn Gruppe zu ist UND die aktive Seite enthält (reines CSS). */
.nav2-dot { display: none; flex: none; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--nav2-dot); }
.nav2-group[data-has-active]:not(.is-open) > .nav2-item .nav2-dot,
.nav2-group[data-has-active]:not(.is-open) > .nav2-child--group .nav2-dot { display: block; }

/* Kinder-Container — eingeklappt weg (Accordion). */
.nav2-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-left: 19px; }
.nav2-group:not(.is-open) > .nav2-sub { display: none; }
.nav2-group--sub > .nav2-sub { padding-left: 14px; margin: 1px 0 2px; }

.nav2-trenner { padding: 8px 10px 3px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--nav2-trenner); }

/* Kind-Zeile (Blatt oder Untergruppen-Header) — 2px-Führungslinie zeigt den Pfad. */
.nav2-child { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-left: 2px solid var(--nav2-line-none); border-radius: 8px; background: transparent; color: var(--nav2-child-fg); font: inherit; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.nav2-child:hover { background: var(--nav-hover-bg); text-decoration: none; }
.nav2-child--group { color: var(--c-text); font-weight: var(--fw-bold); }
.nav2-child[data-line="active"] { border-left-color: var(--nav2-line-active); }
.nav2-child[data-line="path"] { border-left-color: var(--nav2-line-path); }
.nav2-child.is-active { background: var(--nav2-active-bg); color: var(--nav2-active-fg); font-weight: var(--fw-bold); }

.nav2-avatar { flex: none; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: var(--fw-bold); }
.nav2-badge { flex: none; font-size: 10px; font-weight: var(--fw-bold); color: var(--c-text-soft); white-space: nowrap; }

/* Breadcrumb im Content-Header (Pfad zum aktiven Knoten). */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); padding: 14px var(--sp-8); background: var(--topbar-bg); border-bottom: 1px solid var(--kk-shell-bd); font-size: 13px; color: var(--c-text-soft); flex-wrap: wrap; }
.breadcrumb__sep { color: var(--kk-shell-bd); }
.breadcrumb__glied--last { color: var(--c-text); font-weight: var(--fw-bold); }

/* App-Shell: gleiche feste Sidebar wie das Backoffice, für die Berater-Seiten (Beratungen,
   Fall-Seite, Konsole). Kunden-Konzept nutzt sie bewusst nicht. */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; background: var(--c-bg); }

.stack > * + * { margin-top: var(--sp-6); }   /* gleichmäßiger Vertikal-Rhythmus */

/* Tabellen-Hülle: breite Tabellen scrollen in sich, nie der Body */
.table-wrap { overflow-x: auto; }

/* Backoffice + App-Shell mobil: Sidebar oben, Nav horizontal, Inhalt einspaltig */
@media (max-width: 767px) {
  .admin, .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .sidebar__tag { margin-bottom: var(--sp-3); }
  .nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .nav__gruppe { width: 100%; margin: var(--sp-2) var(--sp-1) 0; }
  .admin-main { padding: var(--sp-5) var(--sp-4); }
}

/* Seitenkopf */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-head h1 { margin: 0; }

/* Stat-Karten */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.stat { background: var(--c-surface-raised); border: 1px solid var(--c-border-soft); border-radius: var(--card-radius); padding: var(--sp-5); }
.stat__num { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; }
.stat__label { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Formular-Raster + Flash */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }
.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-5); background: var(--c-success-bg); color: var(--c-success); }
/* Globaler Flash-Stapel (base.html): eine Instanz für ALLE Seiten — schwebt oben
   zentriert über jedem Layout (auch Konsole/Konzept/Admin mit eigenem Chrome). */
.flash-stapel { position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(90vw, 560px); }
.flash-stapel .flash { margin: 0; box-shadow: var(--sh-lg); }

/* Datei-Upload (Dropzone) */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8); border: 2px dashed var(--c-border); border-radius: var(--card-radius); background: var(--c-surface); color: var(--c-text-muted); text-align: center; }

/* Inline-Reihe (Buttons/Badges nebeneinander) */
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row__name { flex: 0 0 13rem; font-weight: var(--fw-medium); }   /* Label-Spalte in einer Inline-Reihe */

/* Farb-Kachel (Styleguide) — zeigt einen Token; Farbe kommt aus dem Modifier */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.swatch { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); overflow: hidden; }
.swatch__chip { height: 56px; }
.swatch__label { padding: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-muted); }
.swatch--primary .swatch__chip { background: var(--c-primary); }
.swatch--primary-hover .swatch__chip { background: var(--c-primary-hover); }
.swatch--accent .swatch__chip { background: var(--c-accent); }
.swatch--accent-2 .swatch__chip { background: var(--c-accent-2); }
.swatch--bg .swatch__chip { background: var(--c-bg); }
.swatch--surface .swatch__chip { background: var(--c-surface); }
.swatch--muted .swatch__chip { background: var(--c-surface-muted); }
.swatch--ink .swatch__chip { background: var(--c-text); }
.swatch--border .swatch__chip { background: var(--c-border); }
.swatch--success .swatch__chip { background: var(--c-success); }
.swatch--warning .swatch__chip { background: var(--c-warning); }
.swatch--error .swatch__chip { background: var(--c-error); }
.swatch--info .swatch__chip { background: var(--c-info); }

/* Startseite: Hero + Einstiegs-Kacheln */
.home-hero { text-align: center; max-width: 640px; margin: 0 auto; padding: var(--sp-10) 0 var(--sp-2); }
.home-hero .actions { justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
a.card { color: inherit; }
a.card:hover { box-shadow: var(--sh-lg); border-color: var(--c-accent); text-decoration: none; }

/* ============================================================================
   Berater-Konsole (Design-Handoff 2026-07-14) — privat-banner, konsole-layout,
   monogramm, gkv-block, baustein-Karte, chip-radio, combo, bilanz(+bar).
   ========================================================================== */

/* „nicht teilen"-Kennung */
.privat-banner { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-6); background: var(--banner-bg); border-bottom: 1px dashed var(--banner-bd); }
.privat-banner__chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-full); background: var(--c-primary); color: var(--c-text-on-accent); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .08em; }
.privat-banner__text { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--banner-fg); }

/* Konsolen-Chrome */
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px var(--sp-8); background: var(--topbar-bg); border-bottom: 1px solid var(--kk-shell-bd); }
.app-topbar__group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-topbar__logo { height: 22px; display: block; }
.app-topbar__sep { width: 1px; height: 20px; background: var(--c-border); }
.app-topbar__titel { font-size: 14px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konsole-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--sp-6); padding: 28px var(--sp-8) var(--sp-10); align-items: start; max-width: var(--content-max); margin: 0 auto; }
/* Mehr Luft zwischen den Personen + Akzentkante, damit man die Blöcke sofort trennt. */
/* ── Konsole-Stepper (kst-*, Design handoff-konsole, 2026-07-29) ───────────────
   Drei Spalten: frei anspringbare Schritt-Navigation | EINE Schritt-Karte |
   Bilanz (bestehende .bilanz-spalte). Kein Zwangs-Wizard (Ole-Leitplanke).
   Spec: wissen/design-system.md §Konsole-Stepper. */
.konsole-wrap--stepper { grid-template-columns: var(--kst-nav-w) minmax(0, 1fr) var(--kst-bilanz-w); max-width: var(--kst-max); padding-left: clamp(var(--sp-5), 2.5vw, var(--sp-10)); padding-right: clamp(var(--sp-5), 2.5vw, var(--sp-10)); }
/* Mittlere Breiten (MacBook 13–15″ mit App-Sidebar): Navigation und Bilanz
   geben Platz an die Schritt-Karte ab. */
@media (max-width: 1499px) {
  .konsole-wrap--stepper { --kst-nav-w: 204px; --kst-bilanz-w: 312px; }
  .konsole-wrap--stepper .kst-karte { padding: var(--sp-5) var(--sp-6); }
}
/* Ab ~1500px wachsen Navigation und Bilanz mit — die Schritt-Karte bekommt den Rest. */
@media (min-width: 1500px) {
  .konsole-wrap--stepper { --kst-nav-w: 268px; --kst-bilanz-w: 400px; gap: var(--sp-8); }
  .konsole-wrap--stepper .kst-karte { padding: var(--sp-8) var(--sp-10); }
  .konsole-wrap--stepper .kst-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.kst-nav { position: sticky; top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.kst-nav__personen { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.kst-person { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kst-person--haupt { background: var(--kk-violet-100); border-color: var(--kk-violet-100); color: var(--c-primary); }
.kst-person--add { flex: none; border-style: dashed; color: var(--c-primary); text-decoration: none; }
.kst-nav__schritte { display: flex; flex-direction: column; gap: var(--sp-1); }
.kst-schritt { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; }
.kst-schritt:hover { background: var(--c-surface-muted); text-decoration: none; }
.kst-schritt.is-aktiv { background: var(--kk-violet-100); color: var(--c-primary); font-weight: var(--fw-bold); }
.kst-schritt__punkt { display: inline-flex; align-items: center; justify-content: center; width: var(--kst-punkt); height: var(--kst-punkt); flex: none; border-radius: var(--r-full); background: var(--c-surface-muted); color: var(--c-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.kst-schritt.is-aktiv .kst-schritt__punkt { background: var(--c-primary); color: var(--c-text-on-accent); }
.kst-schritt__punkt[data-zustand="beantwortet"] { background: var(--kst-punkt-fertig); color: var(--c-text-on-accent); }
.kst-schritt__label { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kst-schritt__status { flex: none; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.kst-nav__hinweis { margin: 0; padding: 0 var(--sp-3); font-size: var(--fs-caption); color: var(--c-text-soft); text-wrap: pretty; }

.kst-haupt { min-width: 0; }
.kst-karte { border-radius: var(--kst-karte-radius); padding: var(--sp-6) var(--sp-8); }
.kst-karte__titel { margin: 0 0 var(--sp-5); font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-primary); letter-spacing: -.01em; }
.kst-person-label { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-soft); }
.kst-personen-block + .kst-personen-block { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border-soft); }

.kst-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.kst-stat { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--kst-stat-bg); }
.kst-stat__label { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-soft); }
.kst-stat__wert { margin: 2px 0 0; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.kst-warnung { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--kk-error-leise); border: 1px solid var(--kk-error-bd); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--kk-error); }

.kst-fazit { display: grid; gap: var(--sp-2); }
.kst-fazit__zeile { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--kst-stat-bg); min-width: 0; }
.kst-fazit__label { flex: none; min-width: 110px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.kst-fazit__wert { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-text-muted); text-wrap: pretty; }
.kst-fazit__betrag { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kst-fazit__betrag--spart { color: var(--kk-green); }
.kst-fazit__betrag--offen { color: var(--c-primary); }
.kst-fazit__zeile--ergebnis { background: var(--kk-violet-50); border: 1px solid var(--kk-violet-bd); }
.kst-cta { margin-top: var(--sp-5); }

.kst-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-soft); }

/* Unter ~1400px (13″-MacBook + App-Sidebar) reicht der Platz nicht für drei
   Spalten — einspaltig, Schritte horizontal; die fixe Bilanz-Bar unten hält
   das Live-Feedback sichtbar. */
@media (max-width: 1399px) {
  .konsole-wrap--stepper { grid-template-columns: minmax(0, 1fr); }
  .kst-nav { position: static; }
  .kst-nav__schritte { flex-direction: row; flex-wrap: wrap; }
  .kst-schritt__status { display: none; }
}

.konsole-personen { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.konsole-personen > .card { border-top: 3px solid var(--person-accent-bd); }

/* Monogramm — Logo-Fallback ohne Bild */
.monogramm { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--kk-violet-100); color: var(--c-primary); font-size: 10px; font-weight: var(--fw-bold); flex: none; }
.monogramm--person { width: 36px; height: 36px; border-radius: var(--r-full); font-size: 14px; }
.logo-slot { display: inline-flex; align-items: center; justify-content: center; width: 40px; flex: none; }
.logo-slot img, .logo-img { max-height: 18px; max-width: 40px; object-fit: contain; display: block; }
.logo-img--md { max-height: 20px; max-width: 72px; }
/* Kassen-Logo im Konzept-Kopf (Owner 2026-07-29: „etwas größer, ersetzt den Namen") */
.logo-img--lg { max-height: 28px; max-width: 110px; }

/* Personen-Kopf */
.person-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; }
.person-head__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.person-head__name { font-size: 17px; font-weight: var(--fw-bold); }
.person-head__bilanz { font-size: 13px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.person-head__rechts { display: flex; align-items: center; gap: var(--sp-3); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-soft); cursor: pointer; font-size: 13px; line-height: 1; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.icon-btn:hover { border-color: var(--c-border); color: var(--c-text); }
.icon-btn--danger:hover { border-color: var(--c-error); color: var(--c-error); background: var(--c-error-bg); }

/* Basisträger-GKV-Block */
.gkv-block { background: var(--gkv-block-bg); border: 1px solid var(--gkv-block-bd); border-radius: var(--r-md); padding: var(--sp-4) 18px; margin-bottom: 14px; }
.gkv-block .eyebrow { color: var(--c-accent); letter-spacing: .06em; }
.gkv-block__zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gkv-block__aktuell { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
/* Familienmitglied: Kasse fest (wie Hauptperson) — keine Auswahl. */
.gkv-block__fest { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 220px; }
.gkv-block__kasse { display: flex; flex-direction: column; min-width: 0; }
.gkv-block__kasse-name { font-size: 13.5px; font-weight: var(--fw-semibold); }
.gkv-block__kasse-sub { font-size: 12px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.gkv-block__pfeil { color: var(--kk-violet-300); font-size: 18px; font-weight: var(--fw-bold); }
.gkv-block__neu { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Baustein-Karten */
.baustein-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.baustein { display: flex; flex-direction: column; gap: 10px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px var(--sp-4); }
.baustein.is-aktiv { border-color: var(--baustein-active-bd); }
.baustein.is-off { background: var(--baustein-off-bg); }
/* Kopf ist der Auf-/Zuklapp-Schalter des Bausteins (button-Reset). */
.baustein__kopf { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.baustein__kopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
.baustein__icon { width: 30px; height: 30px; object-fit: contain; flex: none; }
/* Abgewählt: Icon komplett grau. */
.baustein.is-off .baustein__icon { filter: grayscale(1); opacity: .45; }
.baustein__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.baustein__name { font-size: 14px; font-weight: var(--fw-bold); }
.baustein__sub { font-size: 11.5px; color: var(--c-text-soft); }
.baustein__caret { flex: none; color: var(--c-text-soft); font-size: 11px; transition: transform var(--t-fast); }
.baustein:not(.is-collapsed) .baustein__caret { transform: rotate(180deg); }
.baustein__body { display: flex; flex-direction: column; gap: 10px; }
.baustein.is-collapsed .baustein__body { display: none; }
.baustein__preis { font-size: 14px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.baustein__hinweis { font-size: 12px; color: var(--c-text-soft); margin: 0; }
.baustein__inputs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.baustein__inputs .input { height: 36px; }
.baustein__inputs .input--betrag { width: 84px; text-align: right; flex: none; }
.baustein__inputs .combo--versicherer { min-width: 160px; }
.baustein__frei { width: 100%; margin-top: var(--sp-2); }

/* Aufklappbare Personen-Formulare (hinzufügen / Basisdaten bearbeiten) */
.felder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.felder-grid .field { margin-bottom: 0; }
.person-add, .person-edit { margin-top: var(--sp-4); }
.person-add > summary, .person-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.person-add > summary::-webkit-details-marker, .person-edit > summary::-webkit-details-marker { display: none; }
.person-add__form, .person-edit__form { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--c-surface-raised); border: 1px solid var(--c-border-soft); border-radius: var(--card-radius); }
/* Basisdaten sitzen direkt unter dem Personen-Kopf, nicht am Blockende. */
.person-edit { margin-top: 0; margin-bottom: var(--sp-4); }
.person-edit__hinweis { font-size: var(--fs-caption); margin: 0 0 var(--sp-3); }
/* Abschnitts-Überschrift im Basisdaten-Formular (z.B. „Kontakt & Adresse") */
.person-edit__gruppe { margin: var(--sp-4) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border-soft); }
.hinweis-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); background: var(--c-warning-bg); color: var(--c-warning-text); font-size: 11.5px; font-weight: var(--fw-semibold); }

/* Empfehlungszeile (auto + Bedarf) */
.empfehlung { display: flex; align-items: center; gap: 10px; background: var(--kk-violet-50); border-radius: var(--r-sm); padding: 10px 12px; }
.empfehlung__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.empfehlung__name { font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empfehlung__sub { font-size: 11px; font-weight: var(--fw-semibold); color: var(--c-accent); }
.empfehlung__preis { font-size: 13px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* Gewählte Bausteine + Leistungen (Bullet-Points; Bilanz-Spalte & Konzept) */
.leistung-block { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); }
.leistung-block:last-child { border-bottom: 0; padding-bottom: 0; }
.leistung-block__kopf { display: flex; align-items: center; gap: var(--sp-2); }
.leistung-block__icon { width: 26px; height: 26px; object-fit: contain; flex: none; }
.leistung-block__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leistung-block__name { font-size: 13px; font-weight: var(--fw-bold); }
.leistung-block__sub { font-size: 11px; color: var(--c-text-soft); }
.leistung-block__preis { font-size: 13px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; flex: none; }
.leistung-liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 4px; }
.leistung-liste li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: 12px; }
.leistung-liste li::before { content: "✓"; position: absolute; left: -16px; color: var(--c-primary); font-weight: var(--fw-bold); font-size: 11px; }
.leistung-liste__label { color: var(--c-text-muted); }
.leistung-liste__wert { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Status-Chips (Radio-basiert — funktioniert ohne JS mit Speichern-Button) */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font-size: 11.5px; font-weight: var(--fw-semibold); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chip-radio:hover span { border-color: var(--c-accent-2); }
.chip-radio input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); }
.chip-radio input:focus-visible + span { border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); }

/* Kombi-Schnellauswahl im GKV-Vergleich: ein Button toggelt mehrere Themen-Chips
   (JS-Enhancement, kommt hidden aus dem Server-Markup). Optik = chip-radio,
   aktiv = alle hinterlegten Themen gewählt. */
.chip-kombi { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-full); border: 1px dashed var(--c-accent-2); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 11.5px; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
/* display:inline-flex würde das hidden-Attribut aushebeln — ohne JS blieben sonst
   tote Buttons sichtbar (Review-Befund 2026-07-20). */
.chip-kombi[hidden] { display: none; }
.chip-kombi:hover { border-color: var(--c-primary); }
.chip-kombi.is-active { background: var(--c-primary); border-color: var(--c-primary); border-style: solid; color: var(--c-text-on-accent); }
.chip-kombi.is-active .chip-kombi__sub { color: var(--c-text-on-accent); }
.chip-kombi:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.chip-kombi__sub { font-weight: var(--fw-regular); color: var(--c-text-muted); }

/* Combo — Custom-Select mit Logo + Suche (progressive enhancement über natives <select>) */
.combo { position: relative; flex: 1; min-width: 260px; }
/* In Formular-Grids (Basisdaten) darf die Combo ihre Spalte nicht sprengen — sonst
   schiebt sie sich über das Nachbarfeld (Bundesland). Breite kommt aus der Grid-Spalte. */
.form-grid .combo, .felder-grid .combo { min-width: 0; }
/* In Column-Flex-Karten (Baustein) nicht vertikal strecken — sonst rutscht das Panel zu tief. */
.combo--tarife { flex: none; width: 100%; }
.combo__trigger { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--field-h); padding: 0 14px; background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: var(--field-radius); cursor: pointer; font: inherit; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.combo__trigger:focus-visible, .combo.is-open .combo__trigger { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.combo__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo__badge { display: inline-flex; padding: 2px 8px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); font-size: 10.5px; font-weight: var(--fw-bold); flex: none; }
.combo__wert { font-size: 13px; font-weight: var(--fw-semibold); color: var(--c-primary); font-variant-numeric: tabular-nums; flex: none; }
.combo__caret { color: var(--c-text-soft); font-size: 11px; flex: none; }
.combo__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--combo-panel-shadow); overflow: hidden; animation: kk-drop-in var(--dur-fast) var(--ease-out); }
.combo--kassen .combo__panel { min-width: 300px; }
.combo__search { padding: 10px 10px 8px; border-bottom: 1px solid var(--c-border-soft); }
.combo__search input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--field-bd); border-radius: 8px; font: inherit; font-size: 13px; color: var(--c-text); background: var(--c-bg); }
.combo__search input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); background: var(--c-surface); }
.combo__list { max-height: 264px; overflow-y: auto; overflow-x: hidden; padding: 6px; margin: 0; list-style: none; }
.combo__option { border-radius: 8px; }
.combo__option-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.combo__option-row:hover, .combo__option.is-active > .combo__option-row { background: var(--combo-option-hover); }
.combo__option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.combo__option-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.combo__option-name { font-size: 13px; font-weight: var(--fw-medium); overflow-wrap: anywhere; display: flex; flex-direction: column; }
.combo__option-sub { font-size: 11px; color: var(--c-text-soft); }
.combo__option-wert { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); font-variant-numeric: tabular-nums; flex: none; }

/* Leistungs-Filter im Tarif-Combo (Facetten-Chips + Wert-Badge je Option) */
.combo__facets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--c-border-soft); }
.combo__facets-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: var(--sp-1); }
.combo__facet-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: 11.5px; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.combo__facet-chip:hover { border-color: var(--c-accent-2); }
.combo__facet-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); }
.combo__facet-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
.combo__option-facet { display: inline-flex; padding: 2px 8px; border-radius: var(--r-full); background: var(--c-surface-muted); color: var(--c-text-muted); font-size: 10.5px; font-weight: var(--fw-bold); flex: none; }
.combo__leer { padding: 12px; text-align: center; color: var(--c-text-soft); font-size: 13px; list-style: none; }

/* Sortierung + aufklappbare Vorteile je Tarif-Option */
.combo__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--c-border-soft); }
.combo__option-expand { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: 11px; font-weight: var(--fw-semibold); cursor: pointer; flex: none; }
.combo__option-expand:hover { border-color: var(--c-accent-2); color: var(--c-primary); }
.combo__option-expand:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); }
.combo__option-expand-arrow { font-size: 9px; transition: transform var(--t-fast); }
.combo__option.is-expanded .combo__option-expand-arrow { transform: rotate(90deg); }
.combo__option-benefits { list-style: none; margin: 0; padding: 2px 10px 10px 44px; display: none; flex-direction: column; gap: 3px; }
.combo__option.is-expanded .combo__option-benefits { display: flex; }
.combo__option-benefits li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: 12px; }
.combo__option-benefits li::before { content: "✓"; position: absolute; left: -16px; color: var(--c-primary); font-weight: var(--fw-bold); font-size: 10px; }
.combo__benefit-label { color: var(--c-text-muted); }
.combo__benefit-wert { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.combo select.combo__native { width: 100%; }
.combo.is-enhanced select.combo__native { position: absolute; opacity: 0; pointer-events: none; height: 0; }

/* Bilanz-Modul (Desktop sticky) */
.bilanz-spalte { position: sticky; top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.bilanz__held { border-radius: var(--r-md); padding: 18px var(--sp-4); text-align: center; background: var(--bilanz-pos-bg); margin: var(--sp-3) 0; }
.bilanz__held.is-spart { background: var(--konzept-hero-spart-bg); }
.bilanz__held.is-neg { background: var(--bilanz-neg-bg); }
.bilanz__num { font-size: var(--bilanz-num-size); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bilanz__held.is-spart .bilanz__num { color: var(--bilanz-spart-fg); }
.bilanz__held.is-neg .bilanz__num { color: var(--bilanz-neg-fg); }
.bilanz__text { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-primary); margin-top: 2px; }
.bilanz__held.is-spart .bilanz__text { color: var(--bilanz-spart-fg); }
.bilanz__held.is-neg .bilanz__text { color: var(--bilanz-neg-fg); }
.bilanz__hint { font-size: 11.5px; color: var(--c-text-muted); margin-top: 4px; }
.bilanz__held.is-pulsing { animation: kk-pulse .5s var(--ease-out); }

/* Bilanz-Blöcke (Konsole): die Aufstellung gruppiert Krankenkasse / Bausteine / Gesamt
   als abgesetzte Boxen — eine flache kv-Liste war nicht scanbar (Owner 2026-07-17).
   GKV-Block trägt die violette GKV-Tint (Wiedererkennung zum Basisträger-Block links). */
.bilanz-block { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); padding: 2px var(--sp-3) 4px; margin: var(--sp-3) 0; }
.bilanz-block__titel { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); margin: var(--sp-2) 0 2px; }
.bilanz-block--gkv { background: var(--gkv-block-bg); border-color: var(--gkv-block-bd); }
.bilanz-block--gkv .bilanz-block__titel { color: var(--c-primary); }
.bilanz-block--extra { background: var(--c-info-bg); }
.bilanz-block--gesamt { border-color: var(--gkv-block-bd); }
.bilanz-block--gesamt .bilanz-block__titel { color: var(--c-primary); }
/* Zeilen-Töne: Ersparnis grün, Summenzeile abgesetzt, Gesamt größer, Konzept-Wert violett */
.kv--spart .kv__label, .kv--spart .kv__value { color: var(--bilanz-spart-fg); }
.kv--spart .kv__label { font-weight: var(--fw-semibold); }
.kv--summe { border-top: 1px solid var(--c-border-soft); }
.kv--summe .kv__label { color: inherit; font-weight: var(--fw-semibold); }
.kv--gesamt .kv__value { font-size: 1.125rem; }
.kv--konzept .kv__value { color: var(--c-primary); }
.kv__value--offen { color: var(--c-text-muted); font-weight: var(--fw-regular, 400); }

/* Sidebar-Fuß: angemeldeter Benutzer + Abmelden */
.sidebar__benutzer { margin-top: auto; padding: var(--sp-3) var(--sp-3) var(--sp-2); border-top: 1px solid var(--c-border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sidebar__benutzer-name { font-size: 12.5px; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Login (Stufe 1): zentrierte Karte, ohne Sidebar/Topbar — ruhiger Einstieg. */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: var(--c-bg); }
.login__karte { width: 100%; max-width: 380px; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: var(--sp-6) var(--sp-5); text-align: center; }
.login__logo { height: 34px; margin-bottom: var(--sp-3); }
.login__titel { font-size: 1.3rem; margin: 0; }
.login__sub { color: var(--c-text-muted); font-size: 13px; margin: 4px 0 var(--sp-4); }
.login__karte form { text-align: left; display: flex; flex-direction: column; gap: var(--sp-3); }
.login__knopf { width: 100%; }
.login__hinweis { color: var(--c-text-soft); font-size: 12px; margin-top: var(--sp-4); }

/* Tabellen-Aktionen: Knopf-Gruppe rechtsbündig in einer Zelle (z.B. Öffnen + Löschen) */
.table__aktionen { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

/* API-Doku (/docs): fangate-Stil — Anker-Sidebar links, Inhalt rechts, Endpunkt-Blöcke
   mit Methoden- und Status-Badges. Berater-/Entwickler-Werkzeug, kein Kunden-Screen. */
.docs { display: flex; gap: var(--sp-6); max-width: 1180px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); align-items: flex-start; }
.docs__nav { position: sticky; top: var(--sp-5); flex: 0 0 232px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.docs__nav a { color: var(--c-text-muted); text-decoration: none; padding: 3px var(--sp-2); border-radius: var(--r-sm); }
.docs__nav a:hover { color: var(--c-primary); background: var(--c-surface-muted); }
.docs__nav-titel { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); margin: var(--sp-3) 0 2px var(--sp-2); }
.docs__nav-titel:first-child { margin-top: 0; }
.docs__inhalt { flex: 1; min-width: 0; max-width: 860px; }
.docs__inhalt section { margin-bottom: var(--sp-6); }
.docs__inhalt h1 { font-size: 1.7rem; margin: 0 0 var(--sp-2); }
.docs__inhalt h2 { font-size: 1.2rem; margin: var(--sp-5) 0 var(--sp-2); }
.docs__inhalt h3 { font-size: .95rem; margin: var(--sp-3) 0 var(--sp-1); color: var(--c-text-muted); }
.docs-lead { font-size: 15px; color: var(--c-text-muted); }
.docs-stand { font-size: 12px; color: var(--c-text-muted); }
.docs-endpoint { border-top: 1px solid var(--c-border-soft); padding-top: var(--sp-3); }
.docs-endpoint h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-mono, monospace); font-size: 1.02rem; }
.docs-methode { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .05em; padding: 2px 8px; border-radius: var(--r-full); }
.docs-methode--get { background: var(--c-spart-bg); color: var(--c-spart); }
.docs-methode--post { background: var(--c-success-bg); color: var(--c-primary); }
.docs-methode--wh { background: var(--c-info-bg); color: var(--c-info); }
.docs-badge { font-size: 10.5px; font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--r-full); vertical-align: middle; }
.docs-badge--entwurf { background: var(--c-warning-bg); color: var(--c-warning-text); }
.docs-badge--live { background: var(--c-spart-bg); color: var(--c-spart); }
.docs-code { background: var(--c-surface-muted); border: 1px solid var(--c-border-soft); border-radius: var(--r-md); padding: var(--sp-3); font-size: 12.5px; line-height: 1.55; overflow-x: auto; white-space: pre; }
.docs-hinweis { background: var(--c-info-bg); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: 13px; margin: var(--sp-2) 0; }
.docs-hinweis--warn { background: var(--c-warning-bg); }
.docs code { background: var(--c-surface-muted); border-radius: var(--r-sm); padding: 1px 5px; font-size: .92em; }
.docs .docs-code code, .docs pre code { background: none; padding: 0; }
@media (max-width: 900px) {
  .docs { flex-direction: column; }
  .docs__nav { position: static; flex-basis: auto; flex-direction: row; flex-wrap: wrap; }
}

/* GKV-Vergleich (Konsole): optionales Panel im Basisträger-Block (?vergleich=1).
   Weiße Karte in der violetten GKV-Tint; Ranking scrollt, die Konsole bleibt ruhig.
   Reiner Absprung — kein Frage-Flow (Owner-Leitplanke, s. sv-integration). */
.gkv-vergleich { background: var(--card-bg); border: 1px solid var(--gkv-block-bd); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.gkv-vergleich__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gkv-vergleich__titel { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.gkv-vergleich__hinweis { color: var(--c-text-muted); font-size: 13px; margin: var(--sp-2) 0; }
.gkv-vergleich__sortierhinweis { font-size: 12px; color: var(--c-text-muted); margin: var(--sp-2) 0 0; }
.gkv-vergleich__liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.gkv-vergleich__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border-soft); }
.gkv-vergleich__zeile:last-child { border-bottom: 0; }
/* Platz 1 = klare Empfehlung: grün hinterlegt (Ersparnis-Farbe), Rang-Kreis je Zeile. */
.gkv-vergleich__zeile--top { background: var(--c-spart-bg); border-radius: var(--r-md); padding-left: var(--sp-2); padding-right: var(--sp-2); border-bottom-color: transparent; }
/* Gewählte Kasse: steht ganz oben, grau hinterlegt (Owner 2026-07-22) */
.gkv-vergleich__zeile--gewaehlt { background: var(--c-surface-muted); border-radius: var(--r-md); padding-left: var(--sp-2); padding-right: var(--sp-2); border-bottom-color: transparent; }
.gkv-vergleich__rang { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-border-soft); color: var(--c-text-muted); font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.gkv-vergleich__rang--top { background: var(--c-spart); color: var(--card-bg); }
.gkv-vergleich__ersparnis-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gkv-vergleich__kasse { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.gkv-vergleich__name { font-weight: var(--fw-semibold); }
.gkv-vergleich__name .badge { margin-left: var(--sp-1); }
.gkv-vergleich__sub { font-size: 12px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gkv-vergleich__rechts { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.gkv-vergleich__ersparnis { color: var(--c-spart); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gkv-vergleich__mehr { flex-basis: 100%; }
.gkv-vergleich__mehr summary { cursor: pointer; font-size: 12px; color: var(--c-text-muted); }
.gkv-vergleich__ocats { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
.gkv-vergleich__ocats li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 12.5px; padding: 2px 0; }
.gkv-vergleich__ocats li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Bedarfs-Vorauswahl: Themen-Chips je Kategorie (nutzt .chips/.chip-radio der Bausteine) */
.gkv-vergleich__fragen { margin: var(--sp-2) 0; border: 1px solid var(--c-border-soft); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.gkv-vergleich__fragen summary { cursor: pointer; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-primary); }
.gkv-vergleich__frage { margin-top: var(--sp-2); }
.gkv-vergleich__frage-label { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 4px; }
.gkv-vergleich__frage-aktionen { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
/* Druck: der Vergleich ist Berater-Werkzeug, nicht Teil des Konzepts */
@media print { .gkv-vergleich, .gkv-vergleich__oeffnen { display: none; } }

/* Bilanz-Bar (Mobile, fixiert unten) */
.bilanz-bar { display: none; }

@keyframes kk-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kk-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* JS-Enhancement-Helfer: sichtbare Fallback-Buttons verschwinden, sobald JS übernimmt */
.js .js-auto .btn[type="submit"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Responsive: Tablet — eine Spalte, Bilanz zuerst */
@media (max-width: 1199px) {
  .konsole-wrap { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-5) var(--sp-10); }
  .bilanz-spalte { position: static; order: -1; }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .app-topbar { padding: 12px var(--sp-4); flex-wrap: wrap; row-gap: var(--sp-2); }
  .app-topbar__logo { height: 18px; }
  .app-topbar__titel { font-size: 13px; }
  .privat-banner { padding: var(--sp-2) var(--sp-4); }
  .konsole-wrap { padding: var(--sp-4) var(--sp-4) 120px; }
  .baustein-grid { grid-template-columns: minmax(0, 1fr); }
  .chip-radio span { padding: 7px 12px; }   /* Touch: Chip-Höhe ≥ 30px */
  .chip-kombi { padding: 7px 12px; }        /* gleiche Touch-Höhe wie chip-radio */
  .card { padding: var(--sp-4); }
  .gkv-block__zeile .combo { min-width: 100%; }
  .bilanz-spalte { display: none; }
  .bilanz-bar { display: flex; align-items: center; gap: var(--sp-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--c-surface); border-top: 1px solid var(--c-border-soft); box-shadow: var(--bilanzbar-shadow); padding: 14px var(--sp-4) 20px; }
  .bilanz-bar__links { flex: 1; min-width: 0; }
  .bilanz-bar__label { font-size: 11px; color: var(--c-text-soft); }
  .bilanz-bar__werte { font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bilanz-bar__rechts { flex: none; text-align: right; }
  .bilanz-bar__diff { font-size: 22px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .bilanz-bar__diff.is-neg { color: var(--bilanz-neg-fg); }
  .bilanz-bar__status { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--c-primary); }
  .bilanz-bar__status.is-neg { color: var(--bilanz-neg-fg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Print: Kunden-Konzept als sauberes weißes PDF */
@media print {
  body { background: var(--kk-white); }
  .card { box-shadow: none; border-color: var(--c-border-soft); }
  .topbar { display: none; }
  /* Konsolen-Topbar dient als Briefkopf — Logo bleibt, interaktive Buttons raus */
  .app-topbar { border-bottom: 1px solid var(--c-border-soft); padding-left: 0; padding-right: 0; }
  .app-topbar .btn { display: none; }
  .konzept-hero { box-shadow: none; border: 1px solid var(--c-border-soft); }
  /* A4: Blöcke nicht über Seitenumbrüche zerreißen */
  .concept section, .card, .konzept-hero, .leistung-block { break-inside: avoid; }
  .concept > p:last-child { display: none; }   /* „Drucken"-Button raus */
  /* Berater-Steuerung gehört nie aufs Kundenblatt */
  .vk-edit { display: none !important; }   /* Kachel-Edit ist Berater-Werkzeug, kein Druckinhalt */
}

/* Konzept mobil: lange Kassen-Zeilen dürfen umbrechen (kein Body-Überlauf) */
@media (max-width: 767px) {
  .concept .kv { flex-wrap: wrap; }
  .concept .kv__value { white-space: normal; }
  .kasse-inline { min-width: 0; }
}

/* ============================================================================
   Varianten-Umschalter (Konzept 1 | 2 | ＋) — Pillen-Optik, funktioniert ohne JS.
   Rest des v3-Matrix-Blocks entfernt mit dem v6-Umbau (2026-07-28): Hero, Matrix,
   Pillen, Panels und Kassen-Panel sind durch `kg-*` ersetzt.
   ========================================================================== */
.km-varianten { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--tabs-bg); border-radius: var(--r-full); }
.km-varianten form { display: contents; }
.km-varianten__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-full); background: transparent; color: var(--tabs-btn-fg); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.km-varianten__btn.is-active { background: var(--tabs-btn-active-bg); color: var(--tabs-btn-active-fg); box-shadow: var(--sh-sm); cursor: default; }
.km-varianten__btn:hover:not(.is-active) { color: var(--tabs-btn-active-fg); }

@media print { .km-varianten { display: none !important; } }

/* ============================================================================
   Fall-Seite: Ausgaben-Redesign (Bonusrechner-Look, Alex 2026-07-30)
   Kennzahl-Kacheln + zeilenbasierte Ausgaben-Liste je Konto (löst das gequetschte
   4-Spalten-Grid ab). Live-Rechnung in app.js (reine Anzeige). Nur Tokens.
   Spec: wissen/design-system.md §Fall-Seite.
   ========================================================================== */

/* Section-/Personen-Überschrift in Dunkellila (18px/700). */
.fall-titel { margin: 0 0 var(--sp-4); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--fall-titel-fg); }

/* Kennzahl-Kacheln (Haushalts-Ergebnis) — 4er-Grid weißer Kacheln auf der Creme-Karte. */
.fall-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.fall-kennzahl { background: var(--fall-kennzahl-bg); border: 1px solid var(--fall-kennzahl-bd); border-radius: var(--r-md); padding: 14px 18px; }
.fall-kennzahl__label { font-size: 12.5px; color: var(--c-text-muted); margin-bottom: var(--sp-1); }
.fall-kennzahl__wert { font-size: 19px; font-weight: var(--fw-bold); color: var(--c-text); font-variant-numeric: tabular-nums; }
.fall-kennzahl__einheit { font-size: 12.5px; font-weight: var(--fw-medium); color: var(--c-text-muted); }
/* Ersparnis-Kachel — Grün-Ausnahme (wie im Konzept). */
.fall-kennzahl--spar { background: var(--c-spart-bg); border-color: var(--c-spart); }
.fall-kennzahl--spar .fall-kennzahl__label,
.fall-kennzahl--spar .fall-kennzahl__wert,
.fall-kennzahl--spar .fall-kennzahl__einheit { color: var(--c-spart); }
@media (max-width: 720px) { .fall-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kopfzeile der Ausgaben-Sektion: Eyebrow links, Hinweis rechts. */
.fall-ausgaben-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-2); flex-wrap: wrap; }
.fall-ausgaben-kopf .eyebrow { margin: 0; }
.fall-ausgaben-hint { font-size: var(--fs-sm); color: var(--c-text-muted); }
.fall-ausgaben-hint__oder { color: var(--kk-ink-faint); }

/* Weiße Liste, EINE Zeile pro Konto (kein Nebeneinander-Grid mehr). */
.konto-liste { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--konto-liste-bd); border-radius: var(--r-md); overflow: hidden; }
.konto-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: 13px var(--sp-5); border-bottom: 1px solid var(--konto-trenner); }
.konto-row__info { flex: 1 1 240px; min-width: 240px; display: flex; align-items: flex-start; gap: var(--sp-3); }
.konto-row__icon { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--fall-icon-bg); color: var(--fall-icon-fg); }
.konto-row__icon svg { width: 19px; height: 19px; display: block; }
.konto-row__name { font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--c-text); }
.konto-row__hint { margin-top: 2px; font-size: 12.5px; color: var(--c-text-muted); max-width: 340px; }
.konto-row__summary { margin-top: 2px; font-size: 12.5px; color: var(--fall-summary-fg); }
.konto-row__summary:empty { display: none; }

/* Eingabe-Cluster rechts — bricht als Ganzes um (nicht innerhalb). */
.konto-row__cluster { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; flex-wrap: wrap; }
.konto-input { width: 50px; background: var(--konto-input-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 0; font: inherit; font-size: 14.5px; color: var(--c-text); text-align: center; font-variant-numeric: tabular-nums; }
.konto-input--betrag { width: 62px; }
.konto-input--direkt { width: 70px; }
.konto-input:focus { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.konto-row__unit { font-size: 12.5px; color: var(--c-text-muted); white-space: nowrap; }
.konto-row__faint { color: var(--kk-ink-faint); }
.konto-row__oder { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--kk-ink-faint); text-transform: uppercase; margin: 0 var(--sp-1); }
.konto-row__result { min-width: 64px; margin-left: var(--sp-1); text-align: right; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--c-text); font-variant-numeric: tabular-nums; }
.konto-row__result[data-leer="1"] { color: var(--kk-ink-faint); }

/* Summenzeile — violett getönt, volle Breite unten. */
.konto-summe { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px var(--sp-5); background: var(--konto-summe-bg); }
.konto-summe__label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--konto-summe-fg); }
.konto-summe__wert { font-size: 16px; font-weight: var(--fw-bold); color: var(--konto-summe-fg); font-variant-numeric: tabular-nums; }

/* Speichern-Zeile: Button + Ergebnis-Hinweis rechts. */
.fall-speichern { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }

/* „Person hinzufügen"-Karte: Titel links, Ghost-Button rechts. */
.fall-add { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.fall-add__titel { margin: 0 0 2px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--fall-titel-fg); }
.fall-add__sub { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Unter ~760px: der Eingabe-Cluster rutscht als Block unter den Konto-Namen. */
@media (max-width: 760px) {
  .konto-row__info { flex-basis: 100%; }
  .konto-row__cluster { flex-basis: 100%; padding-left: calc(34px + var(--sp-3)); }
  .konto-row__result { margin-left: auto; }
}

/* ============================================================================
   Konzept-Edit-Modal (Design-Handoff „Edit-Modal", 2026-07-30)
   720px, Flex-Spalte: Kopf fix, Inhalt scrollt intern. Die Tarif-/Versicherer-
   Auswahl ist eine Inline-Suchliste (kein schwebendes Dropdown → nichts wird
   mehr aus dem Modal geclippt). Spec: wissen/design-system.md §Edit-Modal.
   ========================================================================== */
.modal__box--edit { width: 720px; max-width: calc(100vw - 48px); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; gap: 0; padding: 0; }
.modal__box--edit .kg-modal__kopf { flex: none; padding: var(--sp-5) var(--sp-6); margin: 0; border-bottom: 1px solid var(--c-border-soft); }
.modal__box--edit .baustein--modal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal__box--edit .baustein__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Inline-Auswahlliste: Suchfeld (fix) + scrollende Radio-Karten. */
.tarifliste { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
.tarifliste__suche { width: 100%; box-sizing: border-box; height: var(--field-h); padding: 0 14px; border: 1px solid var(--field-bd); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); font: inherit; font-size: var(--fs-sm); }
.tarifliste__suche:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); background: var(--c-surface); }
.tarifliste__scroll { display: grid; gap: var(--sp-1); max-height: 42vh; overflow-y: auto; padding: 2px; margin: 0; }
.tarifopt { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; }
.tarifopt:hover { border-color: var(--c-accent-2); }
.tarifopt.is-sel { border-color: var(--c-primary); background: var(--kk-violet-50); box-shadow: inset 0 0 0 1px var(--c-primary); }
.tarifopt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tarifopt__logo { width: 32px; height: 20px; flex: none; object-fit: contain; }
.tarifopt__mono { width: 32px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-surface-muted); color: var(--c-text-muted); font-size: 10px; font-weight: var(--fw-bold); }
.tarifopt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarifopt__name { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarifopt__sub { font-size: var(--fs-caption); color: var(--c-text-muted); }
.tarifopt__badge { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); font-size: 10.5px; font-weight: var(--fw-bold); white-space: nowrap; }
.tarifopt__preis { flex: none; min-width: 72px; text-align: right; font-size: 13.5px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* „★ Empfohlen" — profil-optimaler Tarif (Design-Handoff 2026-07-30). Ersparnis-Grün
   signalisiert „bestes Preis-Leistungs-Verhältnis fürs Nutzungsprofil". */
.tarifopt__empf { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--c-spart-bg); color: var(--c-spart); font-size: 10.5px; font-weight: var(--fw-bold); white-space: nowrap; }
.tarifopt.is-sel .tarifopt__empf { background: var(--c-surface); }
.tarifopt[hidden] { display: none; }

/* ============================================================================
   Backoffice-Vorschau (bo-*) — Stammdaten-Editor mit adaptiver Live-Vorschau +
   Wirkungs-Legende (Design-Handoff „Backoffice Stammdaten Vorschau", 2026-07-30).
   Client-seitig gerendert von js/admin_vorschau.js. Nur Tokens, keine Rohfarben.
   ========================================================================== */
@keyframes bo-puls { 0% { opacity: 0; transform: translateY(-2px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

.bo-noscript { padding: var(--sp-4) var(--sp-5); background: var(--c-warning-bg); color: var(--c-warning-text); border-radius: var(--r-md); }

/* Kategorie-Tabs (welche Stammdaten-Art wird vorgeschaut) */
.bo-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.bo-tab { padding: 7px 15px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.bo-tab:hover { border-color: var(--kk-violet-300); color: var(--c-primary); }
.bo-tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); }

/* Modus-Umschalter (Auto / Andocken / Groß) */
.bo-modus { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bo-modus__lbl { font-size: var(--fs-caption); color: var(--c-text-soft); }
.bo-chip { padding: 5px 13px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; }
.bo-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); }

/* Bühne: Editor + Vorschau nebeneinander, unter ~1000px untereinander */
.bo-stage { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
.bo-col-editor { flex: 1 1 0; min-width: 340px; }
.bo-col-preview { flex: 0 0 340px; min-width: 300px; max-width: 100%; position: sticky; top: var(--sp-6); }
.bo-col-preview.is-split { flex: 1 1 58%; }

/* Listen */
.bo-listhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bo-listtitle { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text); }
.bo-list { display: grid; gap: var(--sp-2); }
.bo-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); cursor: pointer; text-align: left; font: inherit; width: 100%; }
.bo-row:hover { border-color: var(--kk-violet-300); background: var(--kk-bo-row-hover); }
.bo-row__main { flex: 1; min-width: 0; }
.bo-row__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text); }
.bo-row__sub { font-size: var(--fs-caption); color: var(--c-text-soft); }
.bo-row__go { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary); white-space: nowrap; }
.bo-listnote { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--c-text-soft); }

/* Editor-Kopf */
.bo-edithead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bo-edithead__l { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.bo-back { flex: none; padding: 5px 12px; border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.bo-edittitle { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text); }
.bo-draft { flex: none; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); background: var(--c-bg); border-radius: var(--r-full); padding: 3px 10px; white-space: nowrap; }

/* Erklär-Box (Neu-Modus) */
.bo-erk { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 11px 14px; margin-bottom: var(--sp-4); background: var(--kk-violet-50); border: 1px solid var(--kk-violet-bd); border-radius: var(--r-sm); }
.bo-erk__q { flex: none; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.bo-erk__t { margin: 0; font-size: var(--fs-sm); color: var(--kk-bo-ink-2); line-height: 1.55; }

/* Formular-Gitter (nutzt sonst .field/.label/.input/.select) */
.bo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.bo-span2 { grid-column: 1 / -1; }
.bo-hint { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--c-text-soft); }

/* Alterspreis-Box */
.bo-preisbox { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-sm); }
.bo-preisbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.bo-preisbox__lbl { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text-muted); letter-spacing: .04em; }
.bo-subbtn { padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--kk-violet-bd); background: var(--kk-violet-50); color: var(--c-primary); font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; }
.bo-preisrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 7px 10px; background: var(--kk-bo-chrome); border-radius: var(--r-sm); font-size: var(--fs-body); }
.bo-preisrow__preis { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Warn-/Lücke-Box (Editor + Vorschau) */
.bo-warn { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 11px; background: var(--c-error-bg); border: 1px solid var(--kk-error-bd); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-error); }
.bo-warn--dash { border-style: dashed; border-radius: var(--r-md); }

/* Wirkungs-Legende */
.bo-legend { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--kk-violet-50); border: 1px solid var(--kk-violet-100); border-radius: var(--r-sm); }
.bo-legend__h { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-primary); margin-bottom: var(--sp-2); }
.bo-legend__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bo-legend__intern { font-size: var(--fs-sm); color: var(--c-text-soft); }
.bo-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--kk-violet-100); font-size: var(--fs-caption); color: var(--c-text-muted); }
.bo-tag__reg { width: 18px; height: 18px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: var(--fw-bold); }
.bo-tag__reg--k { background: var(--kk-violet-100); color: var(--c-primary); }
.bo-tag__reg--z { background: var(--c-success-bg); color: var(--c-success); }

.bo-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ---- Vorschau-Bereich ---- */
.bo-persona { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 13px; background: var(--kk-shell); border: 1px solid var(--kk-shell-bd); border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
.bo-persona__av { width: 26px; height: 26px; flex: none; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-bold); }
.bo-persona__txt { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-persona__tag { flex: none; font-size: 10.5px; color: var(--c-text-soft); white-space: nowrap; }

.bo-frame { background: var(--c-surface); border: 1px solid var(--kk-shell-bd); border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }
.bo-frame__bar { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 13px; background: var(--kk-bo-chrome); border-bottom: 1px solid var(--kk-bo-chrome-bd); }
.bo-dots { display: inline-flex; gap: 4px; }
.bo-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--kk-bo-dot); }
.bo-frame__reg { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--c-primary); }
.bo-frame__spacer { flex: 1; }
.bo-frame__puls { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--c-success); animation: bo-puls 1s ease forwards; }
.bo-frame__draft { font-size: 10.5px; color: var(--c-text-soft); }
.bo-frag { padding: var(--sp-4); background: var(--kk-bo-fragment); display: grid; gap: var(--sp-4); }
.bo-fraglabel { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .05em; color: var(--c-text-soft); margin-bottom: var(--sp-2); }

/* Bearbeitungs-Ring (auf dem gerade geänderten Vorschau-Element) */
.is-editing { box-shadow: 0 0 0 2px var(--c-accent); border-radius: var(--r-sm); }
.bo-editbadge { font-size: 9.5px; font-weight: var(--fw-bold); color: var(--c-primary); background: var(--kk-violet-100); border-radius: var(--r-full); padding: 2px 7px; white-space: nowrap; }

/* Fragment: Lebenslagen-Kachel (Konten) */
.bo-kachel { background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-card); }
.bo-kachel__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bo-kachel__ico { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: var(--kk-violet-chip); display: inline-flex; align-items: center; justify-content: center; }
.bo-kachel__ico img { width: 20px; height: 20px; object-fit: contain; }
.bo-kachel__title { font-size: 15.5px; font-weight: var(--fw-bold); }
.bo-luecke { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 11px; background: var(--c-error-bg); border: 1px solid var(--kk-error-bd); border-radius: var(--r-sm); }
.bo-luecke__tag { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--c-surface); color: var(--c-error); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .05em; }
.bo-luecke__txt { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-error); }
.bo-luecke__betrag { flex: none; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-error); font-variant-numeric: tabular-nums; }

/* Fragment: Baustein-Karte (Tarife/Gesellschaften) */
.bo-bcard { display: flex; align-items: center; gap: var(--sp-2); padding: 11px 13px; background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); box-shadow: var(--sh-card); }
.bo-bcard__logo { width: 38px; height: 16px; flex: none; object-fit: contain; }
.bo-bcard__name { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.bo-bcard__badge { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); font-size: 10.5px; font-weight: var(--fw-bold); }
.bo-bcard__preis { flex: none; font-size: var(--fs-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-bcard__vorteile { flex: none; font-size: var(--fs-caption); color: var(--c-text-muted); white-space: nowrap; }
.bo-bullets { background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.bo-bullets ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text); }
.bo-bullets li { display: flex; gap: 7px; }
.bo-bullets li span[data-b] { color: var(--c-success); }

/* Fragment: GKV-Ranking + Duell */
.bo-rankrow { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 12px; background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); }
.bo-rankrow.is-me { border-color: var(--c-accent); }
.bo-rankrow__platz { flex: none; width: 18px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.bo-rankrow__name { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.bo-rankrow__zusatz { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--kk-violet-50); color: var(--c-primary); font-size: 10.5px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.bo-rankrow__beitrag { flex: none; font-size: var(--fs-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bo-duell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.bo-duell__box { border-radius: var(--r-md); padding: 10px 12px; text-align: center; }
.bo-duell__box--alt { background: var(--c-surface-muted); }
.bo-duell__box--neu { background: var(--c-success-bg); border: 1px solid var(--kk-green-bd); }
.bo-duell__lbl { font-size: var(--fs-caption); margin-bottom: 2px; }
.bo-duell__box--alt .bo-duell__lbl { color: var(--c-text-soft); }
.bo-duell__box--neu .bo-duell__lbl { color: var(--c-success); }
.bo-duell__name { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.bo-duell__box--alt .bo-duell__name, .bo-duell__box--alt .bo-duell__val { color: var(--c-text-muted); }
.bo-duell__box--neu .bo-duell__name, .bo-duell__box--neu .bo-duell__val { color: var(--c-success); }
.bo-duell__val { font-size: var(--fs-h3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Fragment: Gesellschaft (Dropdown-Eintrag + Duell-Spaltenkopf) */
.bo-gesdrop { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 12px; background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); }
.bo-geskopf { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: 10px; background: var(--c-surface); border: 1px solid var(--kk-violet-tile-bd); border-radius: var(--r-md); width: 140px; }
.bo-geskopf img { width: 56px; height: 18px; object-fit: contain; }
.bo-geskopf__name, .bo-gesdrop__name { font-size: var(--fs-sm); color: var(--c-text-muted); }
.bo-gesdrop__name { font-weight: var(--fw-bold); color: var(--c-text); }

/* Status-Toggle (GKV aktiv/inaktiv) */
.bo-statusbtn { align-self: flex-start; padding: 8px 16px; border-radius: var(--r-full); border: 1px solid transparent; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); cursor: pointer; }
.bo-statusbtn.is-on { background: var(--c-success-bg); color: var(--c-success); border-color: var(--kk-green-bd); }
.bo-statusbtn.is-off { background: var(--c-error-bg); color: var(--c-error); border-color: var(--kk-error-bd); }

.bo-basisnote { margin-top: var(--sp-3); font-size: 11px; color: var(--c-text-soft); line-height: 1.6; }