/* bbe-leads — Kundencenter: dbl9-Anbau an die App-Schale des Hausbauteils.
   Hier stehen NUR zwei Dinge: die Farbtoken der Marke dbl9/AGEN.OS, die die
   Token der Schale ueberschreiben, und die Bauteile, die es in der Schale
   nicht gibt (Angebot, Beauftragung, Unterschrift, Speicher).
   Keine Regel greift in .rail, .navi, .topbar oder .app hinein — sonst waere
   der naechste Modul-Abgleich ein Konflikt (memory: gezogener Stil plus
   eigener Anbau). */

:root {
  /* dbl9-CD, gemessen aus lib/mailrahmen.mjs — ein Wert an einem Ort.
     Akzent #C40B0B auf Weiss = 6,2:1, Weiss auf Akzent ebenso (R5). */
  --lime: #C40B0B; --lime-strong: #A50909; --on-lime: #FFFFFF;
  --bg: #F4F1EF; --surface: #FFFFFF; --surface-2: #FAF8F7; --surface-3: #F4F1EF;
  --ink: #13111A; --ink-soft: #4A4756; --ink-faint: #6F6C7A;
  --line: #E2DEEA; --line-strong: #CFC9DA;
  /* Operator 2026-09-11: "mach bitte alles hell weiss in dem fall head und
     nav an der siete". Die Navigation wird deshalb ueber die TOKEN der Schale
     hell gestellt, nicht ueber Regeln in .rail — das Hausbauteil bleibt
     unberuehrt (memory: gezogener Stil plus eigener Anbau). Weil der
     Untergrund jetzt hell ist, gilt die dunkle Fassung des Logos ohne
     eigenen Untersatz (memory: feedback_marke_folgt_dem_untergrund). */
  --rail: #FFFFFF; --rail-2: #FAF8F7; --rail-ink: #13111A; --rail-ink-soft: #6F6C7A;
  --rail-line: rgba(19,17,26,.10); --rail-active: rgba(196,11,11,.09);
  --rail-hover-ink: #13111A; --rail-hover-bg: rgba(19,17,26,.05);

  /* Abstands-Leiter des Kundencenters. Operator 2026-09-09: "mehr Platz",
     "alles zu eng". Jeder Abstand kommt aus dieser Leiter, keiner aus einem
     Pixelwert im Bauteil (R14) — sonst laeuft die Luft an jeder Stelle anders
     auf, und "mehr Platz" waere eine Meinung statt einer Zahl. */
  --kc-l1: 8px; --kc-l2: 14px; --kc-l3: 22px; --kc-l4: 32px; --kc-l5: 48px; --kc-l6: 72px;
  --kc-blockpad: var(--kc-l4);
}
@media (min-width: 720px) { :root { --kc-blockpad: var(--kc-l5); } }

/* [hidden] verliert gegen jede display-Regel. Beide Zustaende dieser Seite
   tragen display (Tor = grid, Center = grid der Schale), also war das Tor beim
   Umschalten weiter sichtbar und stand als leere Karte ueber dem Kundencenter
   (gemessen 2026-09-09 im Bild). Der Zustand gehoert in den Zustand: hidden
   muss hier staerker sein als das Layout. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------- Tor */
/* Die Anmeldung steht ohne Schale: vor der Anmeldung gibt es keine
   Navigation, die irgendwohin fuehren koennte. */
/* Operator 2026-09-11: "das ist kein SOTA design style", "Abstand,
   unterschiedliche Breiten von Eingabe und CTA-Buttons, Text ist viel zu
   gross". Die Groessen stehen deshalb HIER an einer Stelle und sind eine
   Leiter, keine Meinung: Titel 1.35rem, Fliesstext .9rem, Beiwerk .8rem.
   Jedes Bedienteil im Tor ist genau so breit wie die Karte — Eingabefeld,
   Knopf und Meldung an derselben Kante. */
.kc-tor { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center;
  gap: var(--kc-l3); padding: var(--kc-l4) var(--kc-l3); background: var(--bg); }
.kc-tor-karte { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); padding: var(--kc-l4) var(--kc-l3); box-shadow: var(--shadow); }
@media (min-width: 480px) { .kc-tor-karte { padding: var(--kc-l4); } }
/* Die Bildmarke steht ueber dem Titel, klein und ohne Plakette — der
   Untergrund ist weiss, also braucht das dunkle Logo keinen zweiten Kasten. */
.kc-tor-marke { display: flex; align-items: center; gap: var(--kc-l2); margin-bottom: var(--kc-l3);
  padding-bottom: var(--kc-l2); border-bottom: 1px solid var(--line); }
.kc-tor-marke img { display: block; height: 20px; width: auto; }
.kc-tor-marke-text { font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-faint);
  text-transform: uppercase; }
/* Alles im Tor faellt eine Stufe kleiner aus als im Kundencenter: hier steht
   EINE Handlung, und die braucht keine Plakatschrift. */
#tor-inhalt h1 { margin: 0 0 var(--kc-l2); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
#tor-inhalt .kc-leer { font-size: .9rem; line-height: 1.6; margin-bottom: var(--kc-l3); }
/* Beiwerk ist Beiwerk: der Konto-Satz und der Betrugshinweis tragen die
   kleinste Stufe und stehen abgesetzt (Operator: "das hat keine Relevanz,
   es muss kleiner sein"). */
#tor-inhalt .kc-klein { font-size: .875rem; line-height: 1.55; color: var(--ink-faint); margin: 0; }
#tor-inhalt .kc-klein-abgesetzt { margin-top: var(--kc-l3); padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
/* EIN Mass fuer jedes Bedienteil im Tor: gleiche Breite, gleiche Hoehe. */
#tor-inhalt .kc-form { gap: var(--kc-l2); }
#tor-inhalt .kc-akt { display: grid; gap: var(--kc-l2); }
#tor-inhalt .kc-akt .btn { width: 100%; min-width: 0; justify-content: center; }
/* R4 Type-Scale-Floor: Beiwerk faellt auf 14 px, nicht darunter — die
   Rangfolge traegt die Farbe und der Platz, nicht die Unlesbarkeit. */
#tor-inhalt .kc-feld label { font-size: .875rem; }
#tor-inhalt .kc-feld-fehler { font-size: .875rem; margin: 0; }
/* Trennzeile zwischen den beiden Anmeldewegen (Konto oben, Code darunter).
   Die Haarlinien laufen als Hintergrund durch: so braucht es kein weiteres
   Element, und die Zeile bleibt bei jeder Textlänge mittig.
   Abstände aus der Leiter, kein Pixelwert im Bauteil (R14). */
.kc-trenner { display: flex; align-items: center; gap: var(--kc-l2);
  margin: var(--kc-l3) 0; font-size: .875rem; color: var(--ink-faint); }
.kc-trenner::before, .kc-trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.kc-tor-fuss { margin: 0; font-size: .875rem; color: var(--ink-faint); text-align: center; }
.kc-tor-fuss a { color: var(--ink-soft); }

.kc-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.kc-mark { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--lime); color: var(--on-lime);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
.kc-marke-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kc-marke-text b { font-size: 1.05rem; letter-spacing: -.01em; }
.kc-marke-text span { font-size: .875rem; color: var(--ink-faint); }

/* Ladezustand in der Form des Ergebnisses, kein Kreisel (R48). */
.kc-skelett { display: grid; gap: 12px; }
.kc-skelett span { height: 18px; border-radius: 6px; background: var(--ink); opacity: .09; }
.kc-skelett span.kurz { width: 55%; }

/* --------------------------------------------------------------- Schale */
.kc-tb-rechts { display: flex; align-items: center; gap: 10px; }
.kc-fuss-weg { font-size: .875rem; color: var(--rail-ink-soft); text-decoration: none; padding: 4px 8px; }
.kc-fuss-weg:hover { color: var(--rail-ink); text-decoration: underline; }
.kc-zahl { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--lime); color: var(--on-lime);
  font-size: .875rem; font-weight: 700; text-align: center; }
.kc-main { display: grid; gap: var(--kc-l4); align-content: start; padding-block: var(--kc-l2) var(--kc-l6); }

/* ------------------------------------------------------------- Bauteile */
/* Raster-Regel (oktogen-verifier 421b9cb V-P3-3): feste Stufen 1/2/3, nie vier Karten in einer Reihe. */
.kc-karten { display: grid; gap: var(--kc-l3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .kc-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: var(--kc-l3) var(--kc-l3) var(--kc-l4); display: grid; gap: var(--kc-l1); align-content: start; }
.kc-karte-lbl { font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kc-karte-zahl { font-size: 2.2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin-block: var(--kc-l1) 2px; }
.kc-karte-text { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }

/* Operator 2026-09-14: "wozu hast du einen hellen Container und dann Platz
   verschwendet, um dann nochmal einen neuen weißen Container einzubauen?"
   Ein Block ist ein Abschnitt, kein Kasten: kein Rahmen, kein Innenabstand.
   Abschnitte trennt eine Haarlinie; Rahmen tragen nur die Dinge IN einem
   Abschnitt (Paket, Person, Karte). */
.kc-block { background: var(--surface); padding: 0; display: grid; gap: var(--kc-l3); align-content: start; }
.kc-main > * + .kc-block { border-top: 1px solid var(--line); padding-top: var(--kc-l4); }
.kc-block-kopf { display: grid; gap: 4px; }
.kc-block-kopf h2 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.kc-block-kopf p { margin: 0; font-size: .95rem; color: var(--ink-faint); }

.kc-leer { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 46rem; }
/* Eine Knopfgroesse je Reihe. Gemessen 2026-09-09: 238x44, 192x44 und 183x38
   nebeneinander — drei Groessen in einer Zeile lesen sich als drei Rangstufen,
   obwohl es drei gleichrangige Wege sind. Gleiche Hoehe, gleiche Mindestbreite. */
.kc-akt { display: flex; flex-wrap: wrap; gap: var(--kc-l2); }
.kc-akt .btn { min-width: 13rem; justify-content: center; }
@media (max-width: 520px) { .kc-akt { display: grid; } .kc-akt .btn { width: 100%; justify-content: center; } }

.kc-zeilen { display: grid; }
.kc-zeile { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l4); justify-content: space-between; align-items: baseline;
  padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-zeile:last-child { border-bottom: 0; }
.kc-zeile-k { font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.kc-zeile-w { font-size: .95rem; line-height: 1.5; }

/* Angebot: Preis gross, Listenpreis daneben durchgestrichen, damit der Rabatt
   sichtbar ist statt behauptet. */
.kc-angebot { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 20px; background: var(--surface); }
.kc-angebot + .kc-angebot { margin-top: 16px; }
.kc-angebot[data-zustand="angenommen"] { border-color: var(--lime); border-width: 2px; }
.kc-angebot-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.kc-angebot-kopf h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.kc-preise { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 16px; }
.kc-preis-zahl { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kc-preis-lbl { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.kc-liste-weg { font-size: .95rem; color: var(--ink-faint); text-decoration: line-through; }
.kc-rabatt { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: .875rem; font-weight: 700; }
.kc-angebot-text { font-size: .95rem; line-height: 1.65; white-space: pre-wrap; color: var(--ink-soft); margin: 0 0 16px; }

/* Leistungsverzeichnis: waagerecht rollbar in SEINEM Kasten, nie die Seite. */
.kc-lv-huelle { overflow-x: auto; }
.kc-lv { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.kc-lv th { text-align: left; font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 var(--kc-l3) var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-lv td { padding: var(--kc-l3) var(--kc-l3) var(--kc-l3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kc-lv td.z, .kc-lv th.z { text-align: right; padding-right: 0; white-space: nowrap; }
.kc-lv-bez { font-weight: 600; }
.kc-lv-bes { display: block; margin-top: 5px; font-size: .88rem; color: var(--ink-faint); line-height: 1.6; }

/* Beauftragung: eine Spalte am Telefon, zwei ab 900 px. */
.kc-form { display: grid; gap: var(--kc-l3); }
.kc-form-reihe { display: grid; gap: var(--kc-l3); }
@media (min-width: 900px) { .kc-form-reihe { grid-template-columns: 1fr 1fr; } .kc-form-reihe.drei { grid-template-columns: 1fr 1fr 1fr; } }
.kc-feld { display: grid; gap: 6px; }
.kc-feld label, .kc-feld > .kc-lbl { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-feld .inp, .kc-feld input, .kc-feld select, .kc-feld textarea { width: 100%; }
.kc-feld-fehler { font-size: .875rem; color: var(--bad); }
.kc-feld [aria-invalid="true"] { border-color: var(--bad); }

.kc-wahl { display: grid; gap: var(--kc-l2); }
.kc-wahl-opt { display: flex; gap: var(--kc-l2); align-items: flex-start; padding: var(--kc-l3); border: 1px solid var(--line);
  border-radius: var(--r, 12px); cursor: pointer; background: var(--surface); }
.kc-wahl-opt:hover { border-color: var(--line-strong); }
.kc-wahl-opt:has(input:checked), .kc-wahl-opt:has(.tgl.on) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); background: var(--surface-2); }
/* CI-Schalter statt Häkchen (modul/schalter.js): steht rechts, die
   Beschriftung nimmt den Rest der Zeile. */
.kc-wahl-opt .tgl { order: 2; margin-inline-start: auto; }
/* Das Hausbauteil setzt Eingabefelder auf volle Breite. Ein Auswahlkaestchen
   ist aber kein Eingabefeld: mit width:100% und flex:none nahm es die ganze
   Zeile und drueckte die Beschriftung aus dem Fenster (gemessen 2026-09-09,
   303 px breites Radio). Breite und Hoehe werden deshalb ausdruecklich
   zurueckgesetzt, nicht nur das Schrumpfen verboten. */
.kc-wahl-opt input { margin: 3px 0 0; accent-color: var(--lime); flex: none;
  width: 1.15rem; height: 1.15rem; min-width: 1.15rem; padding: 0; }
.kc-wahl-txt { display: grid; gap: 3px; }
.kc-wahl-txt b { font-size: .96rem; }
.kc-wahl-txt span { font-size: .875rem; color: var(--ink-faint); line-height: 1.5; }

/* Unterschrift: Zeichenflaeche mit Grundlinie, Finger und Maus gleich. */
.kc-person { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: var(--kc-l4); display: grid; gap: var(--kc-l3); }
.kc-person + .kc-person { margin-top: var(--kc-l3); }
.kc-person-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.kc-person-kopf b { font-size: .95rem; }
.kc-sig-huelle { position: relative; }
.kc-sig { width: 100%; height: 170px; display: block; border: 1px dashed var(--line-strong); border-radius: var(--r, 12px);
  background: var(--surface-2); touch-action: none; cursor: crosshair; }
.kc-sig-linie { position: absolute; left: 24px; right: 24px; bottom: 46px; border-bottom: 1px solid var(--line-strong); pointer-events: none; }
.kc-sig-hinweis { position: absolute; left: 24px; bottom: 24px; font-size: .875rem; color: var(--ink-faint); pointer-events: none; }
.kc-sig-fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.kc-sig-stand { font-size: .875rem; color: var(--ink-faint); }
.kc-sig-stand[data-gesetzt="ja"] { color: var(--good); font-weight: 600; }

/* Der Speicher: Ablegeflaeche plus Liste. */
.kc-ablage { border: 2px dashed var(--line-strong); border-radius: var(--r-lg, 16px); padding: var(--kc-l5) var(--kc-l3); text-align: center;
  background: var(--surface-2); display: grid; gap: var(--kc-l2); justify-items: center; }
.kc-ablage[data-ueber="ja"] { border-color: var(--lime); background: var(--surface); }
.kc-ablage b { font-size: 1rem; }
/* Operator 2026-09-11: "bei Auftraege ist Datei auswaehlen in grau, das muss
   weiss sein." Gemessen: die Knopfschrift stand auf #6F6C7A auf rotem Grund,
   Kontrast 1,4:1 (R5 verlangt 4,5:1) — die Auswahl ging ueber den ELEMENTTYP
   und traf damit auch das span IM Knopf. Ein Typ-Selektor bricht, sobald ein
   zweites Element desselben Typs dazukommt; deshalb greift die Regel jetzt
   nur auf das direkte Kind (memory: Auswahl ueber die Klasse, nicht den
   Elementtyp — derselbe Fehler wie am 2026-09-09 in .kc-hinweis). */
.kc-ablage > span { font-size: .88rem; color: var(--ink-faint); line-height: 1.5; max-width: 34rem; }
.kc-ablage .btn span { color: inherit; font-size: inherit; max-width: none; }
.kc-datei { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l3); align-items: baseline; justify-content: space-between;
  padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-datei-name { font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.kc-datei-mass { font-size: .875rem; color: var(--ink-faint); white-space: nowrap; }
.kc-datei-notiz { flex-basis: 100%; font-size: .875rem; color: var(--ink-soft); }

.kc-nachrichten-liste { display: grid; gap: var(--kc-l3); }
.kc-nachricht { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: var(--kc-l3); display: grid; gap: var(--kc-l2); }
.kc-nachricht[data-richtung="kunde"] { background: var(--surface-2); border-style: dashed; }
.kc-nachricht-kopf { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l3); font-size: .875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: var(--kc-l1); border-bottom: 1px solid var(--line); }
.kc-nachricht-txt { font-size: .95rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.kc-spur { display: grid; gap: 0; }
.kc-spur-eintrag { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.kc-spur-zeit { font-variant-numeric: tabular-nums; color: var(--ink-faint); min-width: 10rem; }

.kc-hinweis { display: flex; gap: var(--kc-l2); align-items: flex-start; padding: var(--kc-l3); border-radius: var(--r, 12px);
  background: var(--surface-2); border: 1px solid var(--line); font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.kc-fehler { border-color: var(--bad); background: var(--bad-bg); color: var(--ink); }

/* Ueberlauf-Riegel. Raster- und Flex-Kinder haben von sich aus min-width:auto:
   ein breiter Inhalt (lange Bezeichnung, Leistungsverzeichnis, langes Wort)
   schiebt dann die ganze Seite nach rechts, statt in seinem Kasten zu bleiben.
   Gemessen 2026-09-09: 216 px Ueberlauf mobil in "Angebote", 191 px in
   "Meine Angaben". Deshalb hier EIN Riegel fuer alle Kaesten dieses Bereichs,
   statt an jeder Stelle einzeln (memory: weglassen statt beschneiden — der
   Inhalt bleibt, er rollt nur in SEINEM Kasten). */
.kc-main, .kc-main > *, .kc-block, .kc-karten > *, .kc-form-reihe > *,
.kc-feld, .kc-wahl-opt, .kc-wahl-txt, .kc-angebot, .kc-person,
.kc-zeile > *, .kc-datei > *, .kc-nachricht, .kc-spur-eintrag > * { min-width: 0; }
/* min-width:0 allein laesst ein Flex-Kind auf 0 SCHRUMPFEN, statt es nur am
   Schieben zu hindern — gemessen 2026-09-09: .kc-wahl-txt stand auf 0 px
   Breite, seine Beschriftung ragte 60 px aus dem Fenster. Ein Kind, das den
   Restplatz fuellen soll, braucht beides: flex:1 UND min-width:0. */
/* Die Auswahl geht ueber die KLASSE, nicht ueber den Elementtyp: `.kc-hinweis
   > span` traf ab dem 2026-09-09 auch das Symbolfeld, weil das ebenfalls ein
   span ist — beide Kinder bekamen flex:1, der Text lief 34 px aus dem Fenster.
   Eine Typ-Auswahl bricht, sobald ein zweites Element desselben Typs dazukommt. */
.kc-wahl-txt, .kc-hinweis-txt, .kc-marke-text { flex: 1; min-width: 0; }
.kc-sym { flex: 0 0 auto; }
.kc-lv-huelle { min-width: 0; max-width: 100%; }
/* Lange Bezeichnungen, Adressen und Kennungen brechen im Wort, statt zu
   schieben — Fliesstext bleibt davon unberuehrt. */
.kc-zeile-w, .kc-lv-bez, .kc-lv-bes, .kc-karte-text, .kc-wahl-txt span,
.kc-angebot-kopf h3, .kc-block-kopf h2 { overflow-wrap: anywhere; }

/* Topbar am Telefon. Bei 390 px standen Burger, Titel, Untertitel, Firmenname
   und Abmelden-Knopf nebeneinander; gemessen 2026-09-09 war der Knopf auf
   171 px Breite und 325 px HOEHE gequetscht und der Untertitel dreizeilig.
   Weglassen statt beschneiden: was auf dem Telefon anderswo steht (Untertitel
   im Bereich, Firmenname in der Navigation), faellt hier raus — der Titel
   bleibt einzeilig, der Knopf traegt nur noch sein Symbol. */
.topbar .tb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-tb-rechts { flex: none; }
.kc-tb-rechts .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .topbar .tb-title small { display: none; }
  #kc-firma { display: none; }
  .kc-tb-rechts .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kc-tb-rechts .btn { padding-inline: 10px; }
}

/* Die Rasterspalte der Schale ist `1fr` = `minmax(auto, 1fr)`: ihr Minimum ist
   der min-content ihres Inhalts. Ein einziges Feld mit nativer Mindestbreite
   (Datumsfeld) zog die ganze Spalte auf 407 px bei 390 px Fenster — Topbar und
   Hauptteil wanderten mit (gemessen 2026-09-09 in der Beauftragung).
   `minmax(0, 1fr)` nur fuer das Kundencenter, damit das Hausbauteil selbst
   unangetastet bleibt. */
#center.app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) { #center.app { grid-template-columns: var(--railw) minmax(0, 1fr); } }
body.rail-collapsed #center.app { grid-template-columns: var(--railw-c) minmax(0, 1fr); }
@media (max-width: 900px) { body.rail-collapsed #center.app { grid-template-columns: minmax(0, 1fr); } }
/* Eingabefelder bleiben in ihrem Kasten, auch wenn sie nativ breiter waeren. */
.kc-feld input, .kc-feld select, .kc-feld textarea { max-width: 100%; }

/* ===================================================== Pakete und Angebot ==
   Operator 2026-09-09: "wie ein Angebot auf einer Webseite, Paket 1 2 3 usw.,
   wenn man Pakete auswaehlt" und "so gestalten wie bei sevDesk — mehr Platz,
   wie ein digitales PDF, nur kein PDF".

   Zwei Ansichten: die AUSWAHL (Karten nebeneinander, wie eine Preistabelle)
   und das DOKUMENT (ein Angebot in voller Breite mit Leistungsverzeichnis).
   Die Karten fluchten ueber subgrid — mit `margin-top:auto` am Knopf wird der
   Versatz groesser statt kleiner, das ist gemessen (memory: Flexspalte kennt
   die Nachbarkarte nicht). */

.kc-pakete { display: grid; gap: var(--kc-l3); grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr auto; }
@media (min-width: 760px) {
  .kc-pakete[data-anzahl="2"], .kc-pakete[data-anzahl="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .kc-pakete[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Ein einzelnes Paket bekommt eine lesbare Breite statt eines Drittels. */
.kc-pakete[data-anzahl="1"] { max-width: 34rem; }

.kc-paket { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: var(--kc-l2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: var(--kc-l4); position: relative; text-align: left; }
.kc-paket[data-empfohlen="ja"] { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-paket[data-zustand="angenommen"] { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.kc-paket-band { position: absolute; top: calc(var(--kc-l3) * -1); left: var(--kc-l4);
  background: var(--lime); color: var(--on-lime); font-size: .875rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.kc-paket-nr { font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kc-paket h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; }
/* Der Preisblock ist EINE subgrid-Zeile: hat ein Paket eine Listenpreis-Zeile
   und das andere nicht, zieht subgrid die Zeile bei beiden auf. Ohne
   align-content:start rutscht die Einheit im Paket ohne Listenpreis nach unten
   und steht wie ein Fehler unter der Zahl (gemessen 2026-09-09 im Bild). */
.kc-paket-preis { display: grid; gap: 2px; align-content: start; }
.kc-paket-zahl { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.kc-paket-einheit { font-size: .875rem; font-weight: 600; color: var(--ink-faint); }
.kc-paket-liste { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l2); align-items: center; margin-top: 2px; }
.kc-paket-merkmale { display: grid; gap: var(--kc-l2); align-content: start; margin: var(--kc-l2) 0; }
.kc-merkmal { display: flex; gap: var(--kc-l2); align-items: flex-start; font-size: .95rem; line-height: 1.55; }
.kc-merkmal .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--lime); }
.kc-merkmal b { font-weight: 600; }
.kc-merkmal span { color: var(--ink-soft); }
.kc-paket .kc-akt { margin: 0; }
/* pm-33958 T3: der Knopf steht in jeder Karte zuerst, der Auftrags-Stand
   darunter — sonst schiebt ein Stand-Etikett den Knopf einer Karte tiefer
   als den der Nachbarkarte. */
.kc-paket .kc-akt > .chip { order: 2; }
.kc-paket .kc-akt .btn { width: 100%; min-width: 0; }

/* Das Angebot als Dokument: Kopf mit Nummer und Datum, Zahlenband, Text,
   Leistungsverzeichnis mit Summenzeile — der Aufbau eines Angebots auf Papier,
   nur ohne Papier. */
.kc-dok { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: var(--kc-blockpad); display: grid; gap: var(--kc-l5); }
.kc-dok-kopf { display: grid; gap: var(--kc-l3); padding-bottom: var(--kc-l4); border-bottom: 2px solid var(--ink); }
.kc-dok-meta { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l4); font-size: .875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dok-kopf h2 { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
@media (max-width: 640px) { .kc-dok-kopf h2 { font-size: 1.45rem; } }
.kc-band { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.kc-band-feld { display: grid; gap: 2px; }
.kc-band-zahl { font-size: 1.7rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.kc-band-lbl { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dok-text { font-size: 1rem; line-height: 1.75; white-space: pre-wrap; color: var(--ink-soft); max-width: 52rem; margin: 0; }
.kc-dok-teil { display: grid; gap: var(--kc-l3); }
.kc-dok-teil h3 { margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kc-lv-summe td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 800; font-size: 1rem; padding-top: var(--kc-l3); }
/* Monatlich und einmalig: je eine Gruppe mit Überschrift, nie in einer Zeile. */
.kc-lv-gruppe td { padding-top: var(--kc-l5); font-size: .875rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line-strong); }

/* Pflichtangaben im Kopf: Etikett über Wert, so viele Spalten wie Platz. */
.kc-dok-angaben { display: grid; gap: var(--kc-l2) var(--kc-l4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.kc-dok-angaben div { display: grid; gap: 2px; }
.kc-dok-angaben dt { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dok-angaben dd { margin: 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.kc-dok-antwort { display: grid; gap: var(--kc-l4); }
.kc-antwort-flaeche { border-top: 1px solid var(--line); padding-top: var(--kc-l4); max-width: 44rem; }
.kc-feld-hinweis { margin: 4px 0 0; font-size: .875rem; color: var(--ink-faint); }

.kc-dialog { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: var(--kc-blockpad);
  width: min(36rem, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
.kc-dialog::backdrop { background: var(--ink); opacity: .45; }
.kc-dialog h2 { margin: var(--kc-l3) 0 var(--kc-l2); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.kc-dialog h3 { margin: var(--kc-l4) 0 var(--kc-l2); font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dialog p { margin: 0 0 var(--kc-l2); line-height: 1.6; }
.kc-dialog-liste { margin: 0 0 var(--kc-l3); padding-left: 1.2rem; display: grid; gap: var(--kc-l1); line-height: 1.5; }

/* Knopfleiste (D13, pm-33996; public/modul/knopfleiste.js ordnet sie):
   entweder EINE Reihe gleich breiter Knöpfe oder alle untereinander — nie
   eine halbe zweite Reihe. Alle Knöpfe gleich hoch, Text einzeilig, flach
   (kein Schatten, kein Anheben). Gilt in jedem Fenster des Kundencenters. */
.kc-knopfleiste { display: grid; gap: var(--kc-l1); margin-top: var(--kc-l3); min-width: 0; }
.kc-knopfleiste, .kc-knopfleiste[data-lage="reihe"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.kc-knopfleiste[data-lage="spalte"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
.kc-knopfleiste[data-lage="messen"] { display: flex; flex-wrap: nowrap; width: max-content; max-width: none; }
/* Ein Glied der Leiste ist ein Knopf — direkt oder in einer Hülle ohne Kasten (.kc-knopf-huelle, display: contents). */
.kc-knopfleiste > :is(.btn, a.btn, button), .kc-knopfleiste > .kc-knopf-huelle > .btn { width: 100%; min-width: 0; height: 44px; justify-content: center; white-space: nowrap;
  box-shadow: none; transform: none; }
.kc-knopfleiste > :is(.btn, a.btn, button):hover, .kc-knopfleiste > .kc-knopf-huelle > .btn:hover { box-shadow: none; transform: none; }
.kc-knopfleiste[data-lage="messen"] > *, .kc-knopfleiste[data-lage="messen"] > .kc-knopf-huelle > .btn { width: auto; flex: none; }
.kc-knopfleiste.ist-klein > :is(.btn, a.btn, button), .kc-knopfleiste.ist-klein > .kc-knopf-huelle > .btn { height: 38px; padding: 0 14px; font-size: .88rem; border-radius: var(--r-btn-sm, 10px); }
.kc-knopfleiste > [hidden] { display: none; }
/* Knopfleiste im Seitenfuß (Formular-Bearbeiter, Integration 0930): ohne eigenen Abstand nach oben, mobil in voller Breite. */
.kc-bg-fuss .kc-knopfleiste { margin-top: 0; }
@media (max-width: 599.98px) { .kc-bg-fuss .kc-knopfleiste { width: 100%; } }
/* Unter 600 px: Fenster randlos an der Unterkante, volle Breite (Mobil randlos). */
@media (max-width: 599.98px) {
  .kc-dialog, .kc-dialog:is(.kc-vf-fenster, .kc-z-dialog) { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 0; border-inline: 0; border-bottom: 0;
    max-height: calc(100dvh - 24px); }
}

/* Filter wie im Verbandsverzeichnis: Gruppen, eine Zahl je Wahl (Operator 2026-09-14). */
.kc-partner-filter { display: grid; gap: var(--kc-l3); padding: var(--kc-l4); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); }
.kc-partner-filter-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2) var(--kc-l3); }
.kc-partner-treffer { font-size: 1rem; font-weight: 800; margin-right: auto; }
.kc-partner-filter-kopf .inp { width: min(22rem, 100%); }
/* Operator 2026-09-14: "beim Filter wollen wir doch nur ein- und ausblenden,
   nicht immer alles offen — das verschwendet maximal Platz". Jede Gruppe ist
   ein zugeklapptes Auswahlmenü; die gewählten Werte stehen als Chips darunter. */
/* Volle Breite, nie an den Inhalt geschrumpft: sonst wächst die Leiste mit jedem offenen Menü (gemessen 284/302/319 px bei 390 px). */
.kc-partner-gruppen { display: flex; flex-wrap: wrap; gap: var(--kc-l2); width: 100%; min-width: 0; }
.kc-partner-gruppe { position: relative; }
.kc-partner-griff { list-style: none; display: inline-flex; align-items: center; gap: var(--kc-l2); min-height: 40px; padding: 0 var(--kc-l3);
  border: 1px solid var(--line-strong); border-radius: var(--r, 12px); background: var(--surface); cursor: pointer; font-size: .9rem; font-weight: 700; }
.kc-partner-griff::-webkit-details-marker { display: none; }
/* Das Haus-Zeichen i-chevron zeigt nach links: zu = nach unten, offen = nach oben. */
.kc-partner-griff .ic { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
.kc-partner-gruppe[open] > .kc-partner-griff { border-color: var(--ink); }
.kc-partner-gruppe[open] > .kc-partner-griff .ic { transform: rotate(90deg); }
.kc-griff-zahl:empty { display: none; }
/* Operator 2026-09-15: "jedes Dropdown 1 Zeile und 1 Spalte, jedes Menü gleich
   breit und gleich lang, wenn es sein muss innen scrollbar". */
.kc-partner-optionen { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(28rem, 90vw); height: 22rem; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; padding: var(--kc-l2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r, 12px); }
.kc-partner-optionen > * { white-space: nowrap; }
.kc-partner-aktiv { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-partner-aktiv:empty { display: none; }
.kc-partner-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); white-space: nowrap;
  border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.kc-partner-chip .ic { width: 12px; height: 12px; }
@media (max-width: 640px) {
  /* max-width begründet (R6): unter 640 px liegen die Menüs im Fluss, gleich breit wie die Leiste; die Einträge dürfen umbrechen, nichts läuft über den Rand. */
  .kc-partner-gruppe { flex: 1 1 100%; width: 100%; min-width: 0; }
  .kc-partner-griff { width: 100%; justify-content: space-between; }
  .kc-partner-optionen { position: static; width: 100%; height: 22rem; margin-top: 6px; }
  .kc-partner-optionen > * { white-space: normal; }
}
.kc-filter-opt { display: flex; align-items: center; gap: var(--kc-l2); min-height: 40px; padding: 0 var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); cursor: pointer; font-size: .9rem; }
.kc-filter-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kc-filter-opt input { margin: 0; accent-color: var(--ink); }
.kc-filter-text { flex: 1; }
.kc-filter-zahl { min-width: 2.2em; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.kc-filter-opt[data-leer="ja"] { opacity: .5; }

/* Kennzeichen an Partnern (Operator 2026-09-14): Spezial und Vermittler. */
.kc-partner-kennzeichen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kc-partner-kennzeichen .kc-partner-klasse { margin-top: 0; }
.kc-partner-marke { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-sm); font-size: .875rem; font-weight: 800;
  border: 1px solid var(--ink); background: var(--surface); color: var(--ink); white-space: nowrap; }
.kc-partner-marke[data-art="vermittler"] { border-style: dashed; color: var(--ink-soft); border-color: var(--line-strong); }

/* Tools buchen — Bauform „Ledger Grid" mit Zeilentrennlinien (design-scout
   2026-09-15, 5-Lens-Vote 22/25). Drei Karten, SIEBEN Zeilen gleicher Rolle:
   Kopf, Titel, Kennzahlen, Preis, Laufzeit, Konditionen, Handlung. Die Zeilen
   fluchten über subgrid — margin-top:auto richtet nur die eigene Karte aus
   (memory: Flexspalte kennt die Nachbarkarte nicht). Die Spaltenzahl folgt der
   Breite des Rahmens (Container), nicht der des Fensters: die Konsole hat
   eine Seitenleiste. Unter 58rem stapeln die Karten, dann entfällt subgrid. */
.kc-tools-rahmen { container-type: inline-size; }
.kc-tools { display: grid; gap: var(--kc-l3); grid-template-columns: 1fr; }
.kc-tool { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); padding: var(--kc-l4); }
.kc-tool > * { padding-block: var(--kc-l3); border-top: 1px solid var(--line); }
.kc-tool > :first-child { padding-top: 0; border-top: 0; }
.kc-tool > :last-child { padding-bottom: 0; }
/* Raster 1/2/3, nie 4 (Operator 2026-09-28): Vorgabe drei Spalten,
   data-raster="2" für zwei (vier Karten stehen 2 + 2), "1" für eine. Jede
   Karte hat SECHS Zeilen (Titel, Kennzahlen, Preis, Laufzeit, Konditionen,
   Handlung); die Reihen fluchten je Kartenreihe über subgrid, zwischen den
   Kartenreihen steht der Kartenabstand. */
@container (min-width: 58rem) {
  .kc-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: var(--kc-l3); }
  .kc-tools[data-raster="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-tools[data-raster="1"] { grid-template-columns: minmax(0, 1fr); }
  .kc-tool { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; align-content: start; }
}
.kc-tool-kopf { align-items: center; }
.kc-tool-titel { display: grid; gap: var(--kc-l1); align-content: start; }
/* Keine Linie über dem Titel (Operator 2026-09-28) — er ist die erste Zeile. */
.kc-tool > .kc-tool-titel { border-top: 0; padding-top: 0; }
.kc-tool-stand { margin-bottom: var(--kc-l1); }
/* Premium-Kopf (Operator 2026-09-30): Medaillon mit eigenem Bildzeichen
   (public/portal-tool-bild.js), daneben der Titel, darunter über die volle
   Breite der eine Satz. Die erste Zeile ist so hoch wie das Medaillon (ein
   zweizeiliger Titel passt hinein) — so sind alle Köpfe gleich hoch, auch
   über die Kartenreihen hinweg (subgrid fluchtet nur je Reihe). Farben nur
   aus Token: der Akzent-Hauch ist --rail-active. */
.kc-tool-kopfzeile { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--kc-l3); row-gap: var(--kc-l2); }
.kc-tool-titeltext { display: grid; gap: var(--kc-l1); align-content: center; min-width: 0; }
.kc-tool-kopfzeile > .kc-tool-claim { grid-column: 1 / -1; }
.kc-tool-bild { display: inline-grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 20px; color: var(--lime);
  background: linear-gradient(145deg, var(--rail-active) 0%, var(--rail-active) 35%, var(--surface-2) 100%);
  border: 1px solid var(--line); }
/* Unter 74rem Rahmen kann der Satz auf zwei Zeilen brechen — dann halten alle
   Köpfe zwei Zeilen Platz, damit die Kartenreihen gleich hoch bleiben. */
@container (max-width: 74rem) {
  .kc-tool-kopfzeile { grid-template-rows: auto 1fr; min-height: calc(72px + var(--kc-l2) + 2 * 1.55 * .95rem); }
  .kc-tool-kopfzeile > .kc-tool-claim { align-self: start; }
}
.kc-tool-bild svg { width: 60px; height: 60px; display: block; overflow: visible; }
.kc-tool-bild-flaeche { fill: currentColor; fill-opacity: .14; stroke: none; }
.kc-tool-bild-tinte { stroke: var(--ink); }
.kc-tool-bild-lupe { fill: var(--surface); stroke: none; }
.kc-z-produkt .kc-tool-bild { width: 56px; height: 56px; border-radius: 16px; }
.kc-z-produkt .kc-tool-bild svg { width: 44px; height: 44px; }
@media (max-width: 599px) {
  .kc-tool-kopfzeile { column-gap: var(--kc-l2); }
  .kc-tool-bild { width: 60px; height: 60px; border-radius: 17px; }
  .kc-tool-bild svg { width: 46px; height: 46px; }
  /* Mobil randlos (R145): die Karte bis zur Fensterkante, ohne Rundung. */
  .kc-tool { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
}
.kc-tool h3 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.kc-tool-claim { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.kc-tool-text { margin: 0; line-height: 1.6; color: var(--ink-soft); font-size: .9rem; }
/* Drei Kacheln je Reihe wie in der Vorlage (produkte übersicht.png) erst ab 74rem Rahmen — bei 1440 px mit Seitenleiste (≈69rem) bleiben zwei, sonst brechen „4 Mio. €“ und „0 Monate“ (gemessen 2026-09-15). */
.kc-tool-zugang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l1); align-content: start; }
@container (max-width: 74rem) { .kc-tool-zugang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-tool-zahl { display: grid; gap: 2px; padding: var(--kc-l2) var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); min-width: 0; }
.kc-tool-zahl b { font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kc-tool-zahl span { font-size: .75rem; color: var(--ink-faint); line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
/* Eine Zusage sieht anders aus als eine gezählte Zahl: gestrichelter Rand,
   Akzent an der Zahl — der Kunde soll den Unterschied sehen (Abnahme P2). */
.kc-tool-zahl[data-quelle="zusage"] { border-style: dashed; border-color: var(--line-strong); background: var(--surface); }
.kc-tool-zahl[data-quelle="zusage"] b { color: var(--lime); }
.kc-tool-zahl-quelle { font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
/* pm-33958 T3: jede Kennzahl-Kachel auf der Tools-Seite ist gleich groß —
   Platz für Zahl, zwei Zeilen Titel und die Zeile „Zusage". Die Höhe ist fest
   (nicht die der längsten Nachbarkachel), damit auch Kacheln verschiedener
   Karten und Reihen fluchten; die Messprobe prüft, dass nichts darüber
   hinausläuft (nicht beschnitten). */
.kc-tool .kc-tool-zahl { height: 6.5rem; align-content: start; }
/* Preis: Zahl, Einheit, darunter Streichpreis + Rabatt-Pille als Zug-Punkt.
   Ohne Listenpreis steht ein unsichtbarer Platzhalter, damit die Preiszeile
   in allen Karten dieselbe innere Ordnung hat. */
.kc-tool-preis { display: grid; gap: 4px; align-content: start; }
.kc-tool-preis .kc-paket-zahl { font-size: 2.4rem; }
.kc-tool-liste-leer { visibility: hidden; }
.kc-tool-laufzeit { display: grid; align-content: start; }
.kc-tool-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-tool-wahl .kc-wahl-opt { padding: var(--kc-l2); }
.kc-tool-pille { display: inline-flex; align-items: center; min-height: 3.4rem; padding: var(--kc-l2) var(--kc-l3); border: 1px dashed var(--line-strong);
  border-radius: var(--r, 12px); font-size: .96rem; font-weight: 700; color: var(--ink-soft); justify-self: start; }
.kc-tool-konditionen { margin: 0; gap: var(--kc-l2); }
.kc-tool-merkmal { font-size: .9rem; line-height: 1.5; }
.kc-tool-merkmal .ic { color: var(--ink-faint); }
.kc-tool-merkmal-hervor .ic { color: var(--lime); }
.kc-tool-merkmal-hervor span { color: var(--ink); font-weight: 600; }
/* Stichtag-Hinweis der Bonitätsprüfung (pm-33989): sichtbar, ruhig, kein Kasten. */
.kc-tool-stichtag { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-faint); }
.kc-tool-details { margin-top: var(--kc-l1); }
.kc-tool-details summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ink-faint); list-style: none; }
.kc-tool-details summary::before { content: '+ '; }
.kc-tool-details[open] summary::before { content: '– '; }
.kc-tool-details summary::-webkit-details-marker { display: none; }
.kc-tool-details p { margin-top: var(--kc-l1); }
.kc-tool-akt { display: grid; gap: var(--kc-l1); align-content: start; }
/* Upgrade zum Abo (pm-33958 T4): freiwillig, im CI der Karten, über der Reihe. */
.kc-tool-upgrade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2) var(--kc-l3); align-items: start;
  padding: var(--kc-l3); margin-bottom: var(--kc-l3); border: 1px solid var(--lime); border-radius: var(--r-lg, 16px);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-tool-upgrade-txt { display: grid; gap: 4px; min-width: 0; }
.kc-tool-upgrade-txt b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.kc-tool-upgrade-txt span { color: var(--ink-soft); line-height: 1.55; font-size: .95rem; }
.kc-tool-upgrade-kicker { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.kc-tool-upgrade-akt { grid-column: 1 / -1; }
.kc-z-rechts .kc-tool-upgrade { margin: var(--kc-l3) 0 0; }
@media (max-width: 599px) { .kc-tool-upgrade { margin-inline: -20px; border-radius: 0; border-inline: 0; box-shadow: none; } }
.kc-tool-akt .btn { width: 100%; }
.kc-tool-zahlarten { display: grid; gap: 2px; font-size: .875rem; color: var(--ink-faint); text-align: center; letter-spacing: .01em; }
.kc-tool-zahlarten > span:empty { display: none; }

/* Auswahl: mehrere Tools mit einer Zahlung (Operator 2026-10-07; Design-Gate
   Richtung A „Ledger-Haken“). Der Schalter steht IN der Handlungszeile — keine
   siebte Zeile im subgrid; die gewählte Karte trägt den Rand der gewählten
   Option (.kc-wahl-opt). Die Leiste ist ein Block unter den Karten, der beim
   Blättern unten stehen bleibt; ihre Zahlen kommen vom Dienst. */
.kc-tool[data-auswahl="ja"] { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-tool-auswahl { align-items: center; }
.kc-auswahl { position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--kc-l2); margin-top: var(--kc-l3); padding: var(--kc-l3);
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: var(--r-lg, 16px); }
.kc-auswahl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--kc-l1) var(--kc-l3); }
.kc-auswahl-kopf b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.kc-auswahl-kopf span { font-size: .875rem; color: var(--ink-faint); }
.kc-auswahl .kc-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-auswahl .kc-band-zahl { font-size: clamp(1.15rem, 4.6vw, 1.7rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-auswahl[aria-busy="true"] .kc-band-zahl { color: var(--ink-faint); }
/* Leer: ein ruhiger Satz an seinem Platz, ohne Kleben und ohne Linie. */
.kc-auswahl[data-leer="ja"] { position: static; border-top-width: 1px; }
.kc-auswahl-leer { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.kc-auswahl-hinweise { display: grid; gap: var(--kc-l1); margin: 0; padding: 0; list-style: none; }
.kc-auswahl-hinweise li { display: flex; gap: var(--kc-l1); align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.kc-auswahl-hinweise .ic { flex: none; color: var(--lime); margin-top: 2px; }
.kc-auswahl-akt { display: grid; gap: var(--kc-l1); }
.kc-auswahl-akt .btn { width: 100%; white-space: nowrap; }
.kc-auswahl-akt .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (min-width: 720px) {
  .kc-auswahl { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--kc-l4); }
  .kc-auswahl > :not(.kc-auswahl-akt) { grid-column: 1; }
  .kc-auswahl-akt { grid-column: 2; grid-row: 1 / span 3; min-width: 15rem; }
}
/* Mobil randlos (R145): die Leiste bis an die Fensterkante, ohne Rundung —
   um den Seitenrand der Telefonansicht hinaus wie .kc-tool. */
@media (max-width: 599px) {
  .kc-auswahl { margin-inline: -20px; padding: var(--kc-l2) 20px; gap: var(--kc-l1); border-radius: 0; border-inline: 0; border-bottom: 0; }
  /* Am Telefon bleibt die Leiste flach: Beschriftung ohne Sperrsatz, eine Zeile je Feld. */
  .kc-auswahl .kc-band { gap: var(--kc-l1); }
  .kc-auswahl .kc-band-lbl { text-transform: none; letter-spacing: 0; white-space: nowrap; }
  .kc-auswahl-hinweise li { font-size: .875rem; }
}

/* Unternehmensangaben: eine Sektion je Zuständigkeit (Operator 2026-09-14). */
.kc-u-fehlend { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--kc-l1); color: var(--bad); font-weight: 600; }
.kc-block[data-stand="komplett"] .kc-block-kopf .kc-sym { color: var(--good); }
.kc-u-personen { display: grid; gap: var(--kc-l3); }
.kc-u-person { display: grid; gap: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); padding: var(--kc-l3); }
.kc-u-adresse { display: grid; gap: var(--kc-l2); padding-top: var(--kc-l2); }
.kc-u-unter { margin: var(--kc-l3) 0 0; font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
/* Operator 2026-09-14: die Leiste nahm zu viel Höhe. Eine Zeile: Knopf und
   Meldung nebeneinander, halber Innenabstand. */
.kc-u-speichern { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-top: 1px solid var(--line);
  padding-block: var(--kc-l1); flex-wrap: wrap; align-items: center; gap: var(--kc-l2); }
.kc-u-speichern .kc-feld-fehler { margin: 0; }
.kc-u-nachweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); }
.kc-u-person select.inp, .kc-u-sektion select.inp { width: 100%; }

/* Leistungsmerkmale einer Position als Liste statt als Absatz. */
.kc-lv-liste { margin: 4px 0 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: .875rem; color: var(--ink-soft); }
.kc-merkmal-titel b { font-weight: 700; }
.kc-dok[data-fassung="v4"] .kc-lv-liste { color: var(--line-strong); }

/* Agent als Kachel statt als Textzeile (Operator 2026-09-09). Der Name traegt
   die Kachel, die Aufgabe steht darunter — kein Schluessel-Wert-Paar in einer
   Zeile, das sich beim Lesen wie eine Tabelle anfuehlt. */
.kc-agent { gap: var(--kc-l2); }
.kc-agent-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.kc-agent .kc-karte-text { font-size: .95rem; }
/* Aufklapper fuer den Rechenweg: geschlossen eine Zeile, offen die Herleitung. */
details.kc-hinweis { display: block; cursor: pointer; }
details.kc-hinweis > summary { font-weight: 600; color: var(--ink); list-style: none; }
details.kc-hinweis > summary::-webkit-details-marker { display: none; }
details.kc-hinweis > summary::after { content: " +"; color: var(--ink-faint); }
details.kc-hinweis[open] > summary::after { content: " –"; }
details.kc-hinweis[open] > summary { margin-bottom: var(--kc-l2); }

/* ========================================================= Symbolfelder ==
   Operator 2026-09-09: "mach mal hier mit Icons, SVGs — das muss mehr Design,
   mehr catchy sein", "alles, nicht nur das".

   Jedes Zeichen kommt aus dem Haus-Sprite (modul/cf-sprite.svg) und sitzt in
   einem Feld aus der Akzent-Lasur. EINE Farbe, kein Regenbogen: eine Marke mit
   einem Akzent verliert ihn, sobald jede Kachel eine eigene Farbe bekommt
   (memory: Verlauf aus einer Farbe ist eine Flaeche). Vier Groessen, sonst
   nichts — die Groesse traegt die Bedeutung, nicht der Farbton. */
.kc-sym { display: inline-grid; place-items: center; flex: none; border-radius: 10px;
  background: rgba(196, 11, 11, .10); color: var(--lime); }
.kc-sym .ic { width: 55%; height: 55%; }
.kc-sym-xs { width: 22px; height: 22px; border-radius: 6px; }
.kc-sym-xs .ic { width: 14px; height: 14px; }
.kc-sym-s  { width: 32px; height: 32px; border-radius: 8px; }
.kc-sym-m  { width: 46px; height: 46px; border-radius: 12px; }
.kc-sym-l  { width: 72px; height: 72px; border-radius: 20px; }

.kc-block-titel { display: flex; align-items: center; gap: var(--kc-l2); }
.kc-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); }
.kc-karte-kopf .kc-karte-lbl { margin: 0; }

/* Agent-Kachel: Zeichen oben, Name, Aufgabe. Beim Zeigen hebt sie sich an —
   der Hinweis, dass hier etwas Eigenes steht, nicht eine Tabellenzeile. */
.kc-agent { gap: var(--kc-l2); transition: transform .16s var(--ease, ease), border-color .16s; }
.kc-agent:hover { transform: translateY(-2px); border-color: var(--lime); }

/* Leerer Bereich mit Bild statt nur Text. */
.kc-leerbild { display: grid; justify-items: center; text-align: center; gap: var(--kc-l3);
  padding: var(--kc-l5) var(--kc-l3); }
.kc-leerbild b { font-size: 1.1rem; }
.kc-leerbild .kc-leer { max-width: 34rem; }

.kc-paket-kopf { display: flex; align-items: center; gap: var(--kc-l2); }
/* Operator 2026-09-14: der Hover war "zu hell, nutze ein Graphit". */
.kc-paket:hover, .kc-paket[data-empfohlen="ja"]:hover { border-color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.kc-nachricht-kopf .kc-sym { align-self: center; }
.kc-datei .kc-sym { align-self: center; }
.kc-hinweis .kc-sym { margin-top: 1px; }
.kc-merkmal .kc-sym { margin-top: 1px; }
.kc-fehler .kc-sym { background: rgba(162, 61, 41, .14); color: var(--bad); }

/* Schreibfeld und Knopf sind EIN Bauteil, linksbuendig an derselben Kante wie
   das Feld — als zwei Bloecke untereinander sassen sie an verschiedenen
   Kanten (Operator 2026-09-09: "ist nicht in der Mitte"). */
.kc-schreiben { display: grid; gap: var(--kc-l2); }
.kc-schreiben > label { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-schreiben > .inp { width: 100%; }
.kc-schreiben > .kc-akt { justify-content: flex-start; }

/* Unterlagen: Loeschen umkehrbar, Endgueltiges hinter einer zweiten Frage. */
.kc-datei-akt { margin-left: auto; }
.kc-datei-akt { display: flex; flex-wrap: wrap; gap: var(--kc-l2); }
.kc-datei-korb { opacity: .78; }
.kc-datei-korb .kc-datei-name { text-decoration: line-through; font-weight: 500; }
.kc-gefahr { color: var(--bad); }
.btn.kc-gefahr { border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); }
.kc-gefahr:hover, .btn.kc-gefahr:focus-visible { background: var(--bad-bg); border-color: var(--bad); }
.kc-gefahr-voll { background: var(--bad); border-color: var(--bad); color: var(--on-lime); }
.kc-loesch-fenster { width: min(100%, 32rem); }
.kc-loesch-name { display: flex; gap: var(--kc-l2); align-items: center; overflow-wrap: anywhere; color: var(--bad); }
.kc-loesch-fenster .kc-bg-bestaetigen { margin: var(--kc-l3) 0; }
/* Die Rueckfrage steht im Bauteil, nicht in einem Browser-Dialog (R1). */
.kc-frage { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center;
  padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--bad); border-radius: var(--r, 12px);
  background: var(--bad-bg); font-size: .9rem; line-height: 1.5; }
.kc-frage > span { flex: 1 1 16rem; min-width: 0; }
.kc-frage > .kc-knopfleiste { margin-top: 0; }
@media (max-width: 560px) {
  .kc-datei-akt { margin-left: 0; }
  .kc-datei-akt { width: 100%; }
  .kc-datei-akt .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------- Kopfleiste und Abmelden
   Operator 2026-09-10: Bildmarke links, Menü rechts, Abmelden aus der
   Kopfleiste heraus und unten in die Navigation. Alle Werte kommen aus den
   Token des Hausbauteils; in .topbar, .rail und .navi selbst greift keine
   Regel hinein (das Modul bleibt unberührt, R130). */
/* Operator 2026-09-11: "das Logo ist umrandet mit einer Pille oder Container,
   das sieht mies aus". Mit heller Navigation hat die Plakette keinen Zweck
   mehr — sie verschwindet ersatzlos, das Logo steht direkt auf dem Weiss. */
.kc-marke { display: inline-flex; align-items: center; flex: none;
  background: none; border-radius: 0; padding: 0; margin: 0; }
.kc-marke img { display: block; height: 22px; width: auto; }
/* Seitenverhältnis der Bildmarke (viewBox 285,58 × 55,56): die Breite steht schon vor dem Laden fest, kein Layoutsprung bei 18/20/22 px Höhe. */
.kc-marke img, .kc-tor-marke img { aspect-ratio: 285.58 / 55.56; }
.topbar .burger { flex: none; margin-inline-start: var(--kc-l2, 8px); }

/* Abmelden: unterste Gruppe der Navigation, Wort vor Symbol, mit einer
   Zeile, die sagt, was danach geschieht. */
/* Die Gruppe steht als LETZTE in der Liste — .rail-scroll ist kein
   Flex-Behälter, ein margin-top:auto haette hier nichts bewirkt und nur
   so ausgesehen, als sei es geregelt. */
.kc-abmelden .lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.kc-abmelden .lbl small { font-size: .875rem; color: var(--rail-ink-soft); font-weight: 400; }
.kc-abmelden:hover, .kc-abmelden:focus-visible { color: var(--bad); }

/* Bestandsbefund am Tor-Fuß, hier mitbehoben: die beiden Rechtsverweise
   waren 17 px hoch und damit unter der Trefferfläche von 24 px (R28b). */
.kc-tor-fuss a { display: inline-flex; align-items: center; min-height: 24px; padding-inline: 4px; }
.kc-fuss-weg { display: inline-flex; align-items: center; min-height: 24px; padding-inline: 4px; }
/* R28b: auch die Rechtslinks am Anmeldetor brauchen 24 px Trefferfläche. */
.kc-tor-fuss a { display: inline-flex; align-items: center; min-height: 24px; padding-inline: 4px; }

/* Kopfzeile der Navigation: Marke und Wortmarke stehen untereinander.
   Nebeneinander wurde "Kundencenter" auf 390 px beschnitten — abgeschnitten
   ist nicht weniger, sondern falsch (memory: Weglassen statt beschneiden). */
.rail-head:has(.kc-marke-rail) { flex-direction: column; align-items: flex-start; gap: 10px; }
.rail-head .rail-brand { min-width: 0; }
.kc-marke-rail img { height: 20px; }


/* ================================================ Operator 2026-09-11 ======
   Die Liste dieses Laufs: helle Schale, EIN Logo, Konto-Bauteil im Fuss,
   Adresse je Bereich, Vorgabetext mittig, Angaben erst lesen dann aendern.
   docs/AUFGABEN-2026-09-11-KUNDENCENTER.md fuehrt jede Nummer mit Beleg. */

/* ---------------------------------------------- Konto-Bauteil im Fuss (11)
   Bauform aus dem Hausbauteil (.acct/.acctbtn/.acct-menu). Hier stehen NUR
   die Stellen, die der helle Untergrund braucht — die Schale selbst bleibt
   unberuehrt. */
.kc-rail-foot { border-top: 1px solid var(--rail-line); }
.kc-rail-foot .acct { width: 100%; }
.kc-rail-foot .acctbtn { color: var(--rail-ink); }
/* Das Kuerzel steht auf der Marke, nicht auf einem grauen Verlauf: auf
   weissem Grund war der Haus-Verlauf ein zweiter dunkler Fleck neben dem
   Logo. */
.kc-rail-foot .ava { background: var(--lime); color: var(--on-lime); font-size: .875rem; }
.kc-rail-foot .who b { font-size: .9rem; }
.kc-rail-foot .who span { display: block; font-size: .875rem; color: var(--rail-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-konto-pfeil { width: 16px; height: 16px; flex: none; color: var(--rail-ink-soft);
  transition: transform .16s var(--ease, ease); }
.acct.open .kc-konto-pfeil { transform: rotate(180deg); }
/* Das Menue haengt am Bauteil, nicht am Fenster: es steht damit IMMER ueber
   dem Knopf und faehrt nicht aus der Ecke ein (Aufgabenliste A/4 vom
   Vormittag — dieselbe Klasse Fehler, hier nicht wiederholt). */
.kc-rail-foot .acct-menu { box-shadow: var(--shadow-lg, 0 18px 40px rgba(19,17,26,.18)); }

/* --------------------------------------------------- Eingaben hell (14/15)
   Operator: "bei Auftraege ist Datei auswaehlen in grau, das muss weiss
   sein". Das Hausbauteil setzt Eingabefelder und Ablageflaeche auf
   --surface-2; im Kundencenter stehen sie auf Weiss, der Rand traegt die
   Abgrenzung. */
.kc-main .inp, .kc-feld input, .kc-feld select, .kc-feld textarea { background: var(--surface); }
.kc-ablage { background: var(--surface); }
.kc-ablage[data-ueber="ja"] { background: var(--surface-2); }

/* Die VORGABE steht senkrecht in der Mitte ihres Kastens, nicht oben
   (Operator: "das muss die Vorgabe in dem Container immer mittig sein").
   align-content wirkt im Blockfluss: bei mehr Text als Platz faellt es
   automatisch auf start zurueck, nichts wird abgeschnitten. */
.kc-feld textarea, .kc-schreiben textarea { align-content: center; padding-block: var(--kc-l2); }
.kc-feld textarea::placeholder, .kc-schreiben textarea::placeholder { line-height: 1.5; }

/* ------------------------------------------- Nachricht an uns (16)
   Feld und Knopf sind EIN Bauteil an derselben Kante und in derselben
   Breite — vorher sass der Knopf schmal unter einem breiten Feld. */
.kc-schreiben > .kc-akt { justify-content: stretch; }
.kc-schreiben > .kc-akt .btn { width: 100%; min-width: 0; justify-content: center; }
@media (min-width: 620px) {
  .kc-schreiben > .kc-akt { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------- Meine Angaben: erst lesen (17-20) ==
   Operator 2026-09-11: "ich will die Frage mit der getroffenen Auswahl
   haben; wenn der Kunde auf Bearbeiten klickt, dann kommt das, was du jetzt
   hast". Die Lesefassung ist deshalb der Normalzustand, das Formular die
   Ausnahme. */
.kc-af { display: grid; gap: 0; }
.kc-af-zeile { display: grid; gap: 4px; padding: var(--kc-l3) 0; border-bottom: 1px solid var(--line); }
.kc-af-zeile:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .kc-af-zeile { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--kc-l4); align-items: baseline; }
}
.kc-af-frage { font-size: .88rem; color: var(--ink-faint); line-height: 1.5; }
.kc-af-wert { font-size: .98rem; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Eine fehlende Antwort ist ein Zustand, kein leerer Platz: sie steht als
   Wort da, damit der Kunde sieht, was noch fehlt (R16). */
.kc-af-wert[data-leer="ja"] { font-weight: 500; color: var(--ink-faint); font-style: normal; }
.kc-af-geaendert { font-size: .875rem; color: var(--ink-faint); }
.kc-af-marke { display: inline-block; margin-left: var(--kc-l1); padding: 1px 8px; border-radius: 999px;
  background: rgba(196, 11, 11, .10); color: var(--lime); font-size: .875rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* Der Balken mit den offenen Aenderungen bleibt beim Rollen stehen: er
   traegt den Weg nach draussen (Uebermitteln), und der darf nicht
   weggescrollt werden. */
.kc-af-offen { position: sticky; bottom: var(--kc-l2); z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--kc-l2) var(--kc-l3); align-items: center; justify-content: space-between;
  padding: var(--kc-l3); border: 1px solid var(--lime); border-radius: var(--r-lg, 16px);
  background: var(--surface); box-shadow: var(--shadow-lg, 0 18px 40px rgba(19,17,26,.14)); }
.kc-af-offen > span { flex: 1 1 16rem; min-width: 0; font-size: .92rem; line-height: 1.55; }
.kc-af-offen .kc-akt { flex: none; }


/* ------------------------------------------- Akzent-Reste des Hausbauteils
   Das Modul traegt seinen eigenen Akzent auch in Schatten und Fokusringen:
   `.btn-primary` wirft einen Schein in rgba(207,221,40,…) und `.inp:focus`
   einen Ring in derselben Farbe. Unter einem ROTEN Knopf ist das ein
   gelbgruener Schimmer — gemessen im Bild 2026-09-11, und genau das meinte
   der Operator mit "kein SOTA Design". Die Farbe des Schattens gehoert dem
   Akzent der Marke, nicht dem des Moduls. */
.kc-tor .btn-primary, .kc-main .btn-primary, .acct-menu .btn-primary {
  box-shadow: 0 8px 22px rgba(196, 11, 11, .22);
}
.kc-tor .btn-primary:hover, .kc-main .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(196, 11, 11, .30);
}
.kc-tor .inp:focus, .kc-main .inp:focus, .kc-tor input:focus, .kc-main input:focus,
.kc-tor textarea:focus, .kc-main textarea:focus, .kc-main select:focus {
  box-shadow: 0 0 0 3px rgba(196, 11, 11, .16);
}

/* Der Pfeil am Konto-Knopf zeigt dorthin, wo das Menue aufgeht: nach oben,
   und im offenen Zustand zurueck nach unten. Das Zeichen des Hauses ist ein
   Winkel nach links — gedreht, nicht neu gezeichnet (R: nie ein Zeichen
   erfinden, das der Sprite nicht hat). */
.kc-konto-pfeil { transform: rotate(90deg); }
.acct.open .kc-konto-pfeil { transform: rotate(-90deg); }

/* ══════════════════════════════════════════════════════════════════════════
   Befunde des Operators vom 2026-09-11, je mit der Messung, die sie belegt
   ══════════════════════════════════════════════════════════════════════════ */

/* MELDUNG — "die notification sind alle weiß auf weiß"

   Gemessen: das Hausbauteil setzt `.toast{background:var(--rail);color:#fff}`
   (cf-chrome.css). Es ist für die dunkle Konsole gebaut, wo --rail #0A0B0C
   ist. Hier oben steht --rail auf #FFFFFF, weil der Operator die Schale hell
   wollte — damit stand weiße Schrift auf weißem Grund, Kontrast 1,00:1. Jede
   Bestätigung und jeder Fehler im Kundencenter waren unsichtbar.

   Der Kasten bekommt deshalb seinen eigenen dunklen Grund, statt den der
   Navigation zu leihen: eine Meldung ist kein Teil der Schale, sie liegt
   darüber und muss sich von jedem Untergrund abheben. #13111A (--ink) gegen
   #FFFFFF ergibt 17,9:1.

   Die Art wird nicht allein über Farbe getragen (R28d): der Text beginnt mit
   "Fehler:" (gemeinsam.js), und die Kante links trägt die Farbe. Wer die
   Farben nicht unterscheidet, liest den Unterschied trotzdem. */
/* Ein Selektor, nicht zwei: `.kc-tor ~ #meldung` hätte 0,2,0 und damit mehr
   Gewicht als `#meldung[data-art="schlecht"]` (0,1,1) — die Fehlerkante wäre
   still grün geblieben. Gemessen 2026-09-11, bevor es jemand gesehen hat. */
#meldung {
  background: var(--ink);
  color: var(--surface);
  border-left: 4px solid var(--good);
  max-width: min(92vw, 30rem);
  text-align: left;
  line-height: 1.45;
  font-weight: 600;
}
#meldung[data-art="schlecht"] {
  /* Rot auf Dunkel bliebe unter der Schwelle; deshalb trägt die Kante die
     Farbe und die Schrift bleibt hell (R30: Farbe aus dem Token, nicht als
     Literal). */
  border-left-color: var(--bad);
}
#meldung .ic { color: var(--lime); }

/* BREITE — "warum alles so breit gezogen"

   Gemessen: .kc-main hatte kein Maß, der Inhalt lief über die volle
   Fensterbreite. Auf einem 27-Zoll-Schirm standen Fragen und Antworten
   1,7 m auseinander, und eine Textzeile lief über 200 Zeichen — lesbar ist
   sie bis etwa 75.

   EIN Maß an EINER Stelle (R3, Container-Anchor): --kc-max. Jeder Bereich
   des Kundencenters hängt daran, keiner bringt sein eigenes mit. Die
   Navigation bleibt außen bündig — sie gehört zur Schale, nicht zum
   Inhalt. */
:root { --kc-max: 1160px; }
.kc-main { max-width: var(--kc-max); width: 100%; margin-inline: auto; }
/* Operator 2026-09-14: "mach alles weiß und mach den Viewport breiter", für
   alle Bereiche gleich. Das Maß steht hier einmal; der Arbeitsbereich trägt
   die Fläche der Karten, keinen getönten Grund, auf dem Kästen stehen. */
.kc-main { max-width: 105rem; }
body, #center, #kc-main { background: var(--surface); }

/* AUSWAHL — "warum nicht 2 oder 3 Spalten geiler designed! warum die
   Darstellung so mies nur Text billig"

   Gemessen: elf Wahlmöglichkeiten standen einspaltig untereinander, je eine
   Zeile aus Kästchen und fettem Wort. Auf 1440 px blieben rechts 900 px
   leer, und die Liste war dreimal so hoch wie das Fenster.

   Jetzt ein Gitter nach derselben Formel wie die Kacheln des Überblicks
   (auto-fit / minmax) — eine Rasterregel im Haus, nicht zwei. Daraus
   ergeben sich drei Spalten ab etwa 1040 px, zwei ab 640 px, darunter eine,
   ohne eine einzige eigene Haltestelle (R7: stapeln, nicht quetschen).

   Das Ziel ist die ganze Kachel: das Etikett umschließt Symbol, Kästchen und
   Text, die Mindesthöhe liegt weit über 44 px (R: Trefferfläche ist das
   Ziel, gemessen wird das Ziel, nicht das Kästchen im Etikett). */
.kc-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--kc-l2);
  align-items: stretch;
}
.kc-wahl-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--kc-l1) var(--kc-l2);
  padding: var(--kc-l3);
  min-height: 5.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  cursor: pointer;
  /* Kein Wechsel der Fläche beim Überfahren, nur die Kante wird schärfer —
     dieselbe Sprache wie bei den Paketkarten. */
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Mit Symbol: Symbol und Kästchen in der Kopfzeile, Text darunter über die
   volle Breite. Ohne Symbol rückt der Text in die erste Spalte. */
.kc-wahl[data-bild="ja"] .kc-wahl-opt { grid-template-columns: auto 1fr; }
.kc-wahl[data-bild="ja"] .kc-wahl-opt > .kc-sym { grid-row: 1; grid-column: 1; }
.kc-wahl[data-bild="ja"] .kc-wahl-opt > input { grid-row: 1; grid-column: 2; justify-self: end; }
.kc-wahl[data-bild="ja"] .kc-wahl-txt { grid-row: 2; grid-column: 1 / -1; }

.kc-wahl-opt:hover { border-color: var(--line-strong); }
.kc-wahl-opt:has(input:checked) {
  border-color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime);
  background: var(--surface-2);
}
/* Der Fokus gehört dem Kästchen, gezeigt wird er an der Kachel — sonst
   sieht man mit der Tastatur nicht, welches Ziel gerade gilt. */
.kc-wahl-opt:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-wahl-opt:has(input:focus-visible) input { outline: none; }

/* Das Symbolfeld der Kachel bleibt ruhig, bis die Kachel gewählt ist: ein
   Gitter aus elf farbigen Feldern liest sich als Dekor, nicht als Wahl. */
.kc-wahl-opt > .kc-sym { background: var(--surface-3); color: var(--ink-soft); }
.kc-wahl-opt:has(input:checked) > .kc-sym { background: rgba(196, 11, 11, .10); color: var(--lime); }

/* LEISTE — "Bestätigen und Abbrechen geht immer nur ganz oben! Wenn du in
   der Sektion bist, dann muss auch dort bestätigen oder abbrechen kommen"

   Gemessen: im Bearbeiten-Zustand stand "Abbrechen" im Kopfblock und
   "Änderungen speichern" hinter sechs Abschnitten — auf 1600 px waren das
   4.800 px Rollweg zwischen den beiden Hälften derselben Entscheidung.

   Die Leiste klebt jetzt am unteren Rand des Inhalts. Sie ist Teil des
   Flusses, nicht darüber gelegt (position: sticky, nicht fixed): so
   verdeckt sie am Ende der Seite nichts und braucht keinen Freiraum, den
   irgendwer später vergisst. */
.kc-leiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: var(--kc-l3);
  /* Der eigene Grund schneidet den Inhalt sauber ab, der darunter
     durchrollt — ohne ihn liest sich Text durch die Leiste hindurch. */
  background: linear-gradient(to bottom, transparent, var(--surface) 28%);
  padding-block: var(--kc-l3) var(--kc-l2);
}
.kc-leiste-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-l2);
  padding: var(--kc-l2) var(--kc-l3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--shadow-lg);
}
.kc-leiste .kc-akt { margin: 0; }
.kc-leiste-stand { font-size: .88rem; color: var(--ink-faint); }
/* Offen heißt: es gibt etwas zu verlieren. Das trägt die Schrift, nicht nur
   die Farbe — wer Rot nicht von Grau unterscheidet, liest den Satz. */
.kc-leiste-stand[data-offen="ja"] { color: var(--lime); font-weight: 700; }

/* Am Telefon steht der Stand über den Knöpfen, und die Knöpfe teilen sich
   die Breite — nebeneinander gequetscht bräche die Beschriftung um (R12). */
@media (max-width: 560px) {
  .kc-leiste-inhalt { flex-direction: column; align-items: stretch; }
  .kc-leiste .kc-akt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kc-l1); }
  .kc-leiste .kc-akt .btn { width: 100%; }
}

/* PROFIL — der Aufklapper für das erweiterte Unternehmensprofil.
   <details> bringt Tastatur, Sprachausgabe und Zustand mit; hier bekommt es
   nur sein Aussehen. Das eigene Dreieck des Browsers fällt weg, weil das
   Zeichen des Hauses danebensteht. */
.kc-profil > summary { list-style: none; }
.kc-profil > summary::-webkit-details-marker { display: none; }
.kc-profil-griff {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-l1);
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;          /* Trefferfläche: gemessen wird das Ziel */
}
.kc-profil-griff:hover { border-color: var(--lime); color: var(--lime); }
.kc-profil-griff .ic { width: 17px; height: 17px; transform: rotate(-90deg); transition: transform .18s ease; }
.kc-profil[open] .kc-profil-griff .ic { transform: rotate(90deg); }
.kc-profil-form { display: grid; gap: var(--kc-l3); margin-top: var(--kc-l3); }

/* LEISTUNGEN — der Katalog als Karten, ohne Preis.

   Dieselbe Rasterformel wie überall im Kundencenter (auto-fit / minmax), nur
   mit breiterem Mindestmaß: eine Karte trägt hier vier Umfangszeilen, und
   unter 18rem bricht jede davon zweizeilig um.

   Die Fluchtlinie ist der Punkt: alle Karten enden mit dem Knopf auf
   derselben Höhe, obwohl die Texte verschieden lang sind. Ohne subgrid
   säßen die neun Knöpfe auf neun Höhen — und eine Preistabelle, deren
   Zeilen nicht fluchten, liest sich als Zufall statt als Auswahl. */
.kc-leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--kc-l3);
  align-items: stretch;
}
.kc-leistung {
  /* Spalte statt Gitter, und die Aktion mit margin-top:auto ans Ende
     gedrueckt. Mit festen Gitterzeilen rutschte der Knopf bei jeder Karte
     OHNE Nachweis eine Zeile hoch — gemessen 2026-09-11: neun Karten, drei
     Reihen, aber VIER Knopfhoehen. Eine Preistabelle, deren Zeilen nicht
     fluchten, liest sich als Zufall statt als Auswahl. */
  display: flex;
  flex-direction: column;
  gap: var(--kc-l2);
  padding: var(--kc-l4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kc-leistung:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.kc-leistung[data-angefragt="ja"] { border-color: var(--lime); }

.kc-leistung-kopf { display: flex; align-items: center; gap: var(--kc-l2); }
.kc-leistung-kopf h3 { margin: 0; font-family: var(--disp, inherit); font-weight: 800; font-size: 1.08rem; }
.kc-leistung-kurz { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }

/* An der Stelle, an der eine Preistabelle den Preis führt, steht der
   Umfang. Die Häkchen sind das Zeichen des Hauses, keine Aufzählungspunkte
   des Browsers — und kein Emoji (R2). */
.kc-leistung-umfang { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); align-content: start; }
.kc-leistung-umfang li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .88rem; line-height: 1.5; }
.kc-leistung-umfang .ic { width: 16px; height: 16px; color: var(--lime); margin-top: 3px; }

.kc-leistung-nachweis {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 0; padding: 12px 14px;
  background: var(--surface-3); border-radius: var(--r, 12px);
  font-size: .875rem; line-height: 1.5; color: var(--ink-soft);
}
.kc-leistung-nachweis .ic { width: 16px; height: 16px; color: var(--ink-faint); margin-top: 2px; }
.kc-leistung-akt { align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: var(--kc-l1); }
.kc-leistung-stand { font-size: .875rem; color: var(--lime); font-weight: 700; }
.kc-leistung-form { grid-column: 1 / -1; display: grid; gap: var(--kc-l2); padding-top: var(--kc-l2); border-top: 1px solid var(--line); }

/* Der Ladezustand hat die Form des Ergebnisses, nicht die eines Kreisels
   (R48): die Karte steht schon, nur ihr Inhalt fehlt noch. */
.kc-leistung-platz { min-height: 19rem; }
.kc-skelett-block {
  height: 100%;
  border-radius: var(--r, 12px);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: kc-schimmer 1.4s ease infinite;
}
@keyframes kc-schimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .kc-skelett-block { animation: none; } }

/* ANFRAGESEITE einer Leistung (leistungen/<id>): links die Leistung, rechts
   das Formular, das beim Rollen stehen bleibt. Unter 980 px untereinander. */
.kc-anfrage-kopf .btn { min-width: 0; }
.kc-anfrage { display: grid; gap: var(--kc-l4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .kc-anfrage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.kc-anfrage-info { display: grid; gap: var(--kc-l2); align-content: start; }
.kc-anfrage-info h2 { margin: 0; font-family: var(--disp, inherit); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.kc-anfrage-kurz { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 44rem; }
.kc-anfrage-form { display: grid; gap: var(--kc-l2); padding: var(--kc-l4); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); background: var(--surface); box-shadow: var(--shadow); }
@media (min-width: 980px) { .kc-anfrage-form { position: sticky; top: calc(var(--kc-l6) + var(--kc-l2)); } }
/* Abnahme 7f511e9 (P2): .inp setzt height:46px — das Hauptfeld braucht Höhe. */
.kc-anfrage-form textarea.inp { height: auto; min-height: 9rem; resize: vertical; }
.kc-anfrage-form h3 { margin: 0; font-family: var(--disp, inherit); font-size: 1.2rem; font-weight: 800; }
.kc-anfrage-hinweis { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-faint); }

/* ANGEBOTE nebeneinander und die weiteren Leistungen darunter. */
.kc-angebote-raster { display: grid; gap: var(--kc-l4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1180px) {
  .kc-angebote-raster:not([data-anzahl="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kc-angebote-raster:not([data-anzahl="1"]) .kc-pakete[data-anzahl="1"] { max-width: none; }
/* Eine Art mit mehreren Paketen belegt die ganze Zeile des Rasters: in der
   halben Spalte hatten zwei Karten je ~150 px, Beträge wie "62.479,60 €" und
   Positionstexte liefen gemessen über den Kartenrand (Auslieferung 58ac3ae,
   B.A.Transporte, 1440 px). Nur Einzelangebote stehen nebeneinander. */
.kc-angebote-raster > [data-pakete]:not([data-pakete="1"]) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .kc-pakete[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Raster-Regel (oktogen-verifier 421b9cb V-P3-3): feste Stufen 1/2/3, nie vier in einer Reihe. */
.kc-produkte { display: grid; gap: var(--kc-l2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .kc-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-produkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-produkt { display: grid; grid-template-rows: auto 1fr auto; gap: var(--kc-l1); padding: var(--kc-l3);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface);
  transition: border-color .15s ease; }
.kc-produkt:hover { border-color: var(--line-strong); }
.kc-produkt h3 { margin: 0; font-family: var(--disp, inherit); font-size: 1rem; font-weight: 800; }
.kc-produkt-kurz { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.kc-produkt-akt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); padding-top: var(--kc-l1); }
.kc-produkt-akt .btn { min-width: 0; }

/* GLOSSAR: eine Liste zum Nachschlagen, kein Kartenraster. Begriff links,
   Kurzsatz rechts; aufgeklappt die Erklärung in Lesebreite. */
.kc-glossar-suche { max-width: 36rem; }
.kc-glossar-kategorien { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-glossar-chip { cursor: pointer; min-height: 32px; }
.kc-glossar-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kc-glossar-treffer { margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-glossar { display: grid; border-top: 1px solid var(--line); }
.kc-glossar-eintrag { border-bottom: 1px solid var(--line); }
.kc-glossar-eintrag > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
  gap: var(--kc-l3); align-items: baseline; padding-block: var(--kc-l2); min-height: 44px; }
.kc-glossar-eintrag > summary::-webkit-details-marker { display: none; }
.kc-glossar-eintrag > summary b { font-weight: 800; }
.kc-glossar-eintrag > summary span { color: var(--ink-soft); line-height: 1.5; }
.kc-glossar-eintrag[open] > summary b { color: var(--lime); }
@media (max-width: 640px) { .kc-glossar-eintrag > summary { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.kc-glossar-inhalt { display: grid; gap: var(--kc-l1); padding-bottom: var(--kc-l3); max-width: 52rem; }
.kc-glossar-inhalt p { margin: 0; line-height: 1.65; }
.kc-glossar-meta { font-size: .875rem; color: var(--ink-faint); }
.kc-glossar-siehe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); font-size: .875rem; }
.kc-glossar-link { border: 0; background: none; padding: 2px 4px; min-height: 24px; color: var(--lime); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; }

/* ======================================================= Ihr Weg bei uns ===
   Der Vorgang als Schrittfolge. Das Bauteil ist `.cfu-step` aus
   modul/cf-uikit.css und `.progress` aus modul/cf-chrome.css — hier steht
   NUR, was der Zustand am Bauteil ändert: welche Marke leuchtet, welcher
   Schritt zurücktritt, und die Linie, die die Schritte verbindet. Kein
   eigenes Token, kein Farbwert — alles aus dem Modul
   (memory: gezogener Stil plus eigener Anbau). */
.kc-weg-spur { display: flex; align-items: center; gap: var(--kc-l2); margin-bottom: var(--kc-l3); }
/* Schriftboden 14 px (R4): auch Beiwerk muss lesbar bleiben. */
.kc-weg-quote { font-size: .875rem; font-weight: 800; color: var(--ink-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.kc-weg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-l2); }
.kc-weg .cfu-step { position: relative; }
/* Die Linie zwischen zwei Schritten sitzt über der Marke des unteren — sie
   ist die Zeitachse, nicht ein Rahmen um die Karte. */
.kc-weg .cfu-step + .cfu-step::before {
  content: ""; position: absolute; left: 28px; top: calc(-1 * var(--kc-l2));
  width: 2px; height: var(--kc-l2); background: var(--line-strong);
}
/* Die Marke trägt eine Ziffer — also gilt auch für sie der Schriftboden von
   14 px (R4). Das Bauteil setzt 22 px Kreis bei 11,5 px Ziffer; der Kreis
   wächst mit, statt die Ziffer zu schrumpfen. Die Mittellinie darüber sitzt
   damit auf 28 px (15 px Polster + halber Kreis). */
.kc-weg .cfu-step-n { width: 26px; height: 26px; font-size: .875rem; }
.kc-weg .cfu-step-n .ic { width: 14px; height: 14px; }
.kc-weg .cfu-step-t p { color: var(--ink-soft); }
/* Der Adapter nimmt Fremdgestaltung ZURÜCK, er stellt keine neue daneben:
   das Bauteil setzt seinen Titel als 11,5-px-Versalzeile — das ist eine
   Rubrik über einem Absatz, hier aber der Name des Schrittes und damit die
   Zeile, die gelesen wird. Also Schriftboden 14 px und gemischte Schrift
   (R4), kein neuer Kasten daneben. */
.kc-weg .cfu-step-t b { font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 2px; }

/* Erledigt tritt zurück: es ist Beleg, nicht Aufforderung. */
.kc-weg .cfu-step[data-stand="fertig"] .cfu-step-n { background: var(--good); color: var(--surface); }
/* Der laufende Schritt ist der einzige, der die Aufmerksamkeit bekommt. */
.kc-weg .cfu-step[data-stand="jetzt"] { background: var(--surface); border-color: var(--lime); }
.kc-weg .cfu-step[data-stand="jetzt"] .cfu-step-t p { color: var(--ink); }
/* Was noch aussteht, bleibt lesbar, aber ruhig — es ist eine Ankündigung. */
.kc-weg .cfu-step[data-stand="offen"] .cfu-step-n { background: var(--surface-3); color: var(--ink-faint); }
.kc-weg .cfu-step[data-stand="offen"] .cfu-step-t b,
.kc-weg .cfu-step[data-stand="offen"] .cfu-step-t p { color: var(--ink-faint); }

/* Stempel und Handlung teilen eine Zeile und brechen umeinander, statt sich
   zu schneiden — auf 360 px steht der Knopf unter dem Datum, nie daneben
   abgeschnitten (memory: Weglassen statt beschneiden). */
.kc-weg-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kc-l2);
  margin-top: var(--kc-l2); }
.kc-weg-stempel { font-size: .875rem; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kc-weg-fuss .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .kc-weg-fuss .btn { width: 100%; justify-content: center; } }

/* R28b: die Fußverweise vor der Anmeldung waren 17 px hoch — die Trefferfläche
   wächst, die Zeile bleibt, wie sie ist. */
.kc-tor-fuss a { display: inline-flex; align-items: center; min-height: 24px; }

/* ================================================= RASTER-REGEL (pm-117) ==
   Operator 2026-09-14: "alles muss gleich sein und eine Höhe haben … halte
   dich an das Grid-System, das ist der Key zu Perfektion und Symmetrie."

   EINE Regel für jedes Kartenraster (Finanzierungsarten, Einordnung, Partner,
   Leistungen) und jede Spaltenzahl:
     1. Karten teilen ihre Zeilen über subgrid — Linien, Kennzeichen und
        Knöpfe fluchten über die ganze Reihe, egal wie lang ein Text ist.
     2. Fließtext höchstens drei Zeilen, Chips höchstens zwei Reihen; der
        Rest wird unscharf und klappt auf (.kc-klappe).
     3. Knöpfe einer Karte sind gleich breit und tragen auf jeder Karte
        denselben Text; Unterschiede stehen als Kennzeichen, nicht im Knopf.
     4. Kein Schatten auf Auswahl und Knöpfen — wie "Drucken oder als PDF".
     5. Kartenraster nutzen die volle Breite neben der Navigation. */

/* 4. Auswahl ohne Schatten, jede Option gleich breit. Der Adapter nimmt den
   Schatten des Hausbauteils zurück, er baut keine neue Auswahl. */
.kc-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; }
.kc-seg button { justify-content: center; min-height: 40px; font-size: .9rem; white-space: nowrap; }
.kc-seg button.on { box-shadow: none; outline: 1px solid var(--line-strong); outline-offset: -1px; }
.kc-main .btn-primary { box-shadow: none; }
/* max-width begründet (R6): unter 760 px passen vier Optionen nicht in eine
   Zeile — sie stehen dann zwei zu zwei, weiter gleich breit. */
@media (max-width: 759px) { .kc-seg { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }

/* 2. Die Klappe. */
.kc-klappe { display: grid; gap: 4px; align-content: start; min-width: 0; }
.kc-klappe-inhalt { position: relative; overflow: hidden; font-size: .95rem; line-height: 1.55; }
.kc-klappe[data-zeilen="2"] .kc-klappe-inhalt { max-height: calc(2 * 2rem + 6px); }
.kc-klappe[data-zeilen="3"] .kc-klappe-inhalt { max-height: calc(3 * 1.55em); }
.kc-klappe[data-zeilen="4"] .kc-klappe-inhalt { max-height: calc(4 * 1.55em); }
/* Umfang einer Leistung: vier zweizeilige Punkte wie bei "KI-Agenten" —
   Operator: "die Größe kannst du als Standard nehmen". */
.kc-klappe[data-zeilen="9"] .kc-klappe-inhalt { max-height: calc(9 * 1.55em); }
.kc-klappe-knopf .ic { transform: rotate(-90deg); }
.kc-klappe[data-offen="ja"] .kc-klappe-knopf .ic { transform: rotate(90deg); }
/* Die Zahlenspalten des Leistungsverzeichnisses stießen aneinander
   ("MENGEEINZELN") — zwischen zwei rechtsbündigen Spalten steht Luft. */
.kc-lv th.z + th.z, .kc-lv td.z + td.z { padding-left: var(--kc-l3); }
/* Tätigkeitsfelder als ruhige Chips: die Farbe gehört den Leistungen. */
.kc-partner-felder .chip, .kc-partner-profil .kc-partner-felder .chip { padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink); font-weight: 600; }
.kc-partner-felder .chip.kc-partner-it { background: var(--surface); border-color: var(--ink); color: var(--ink); font-weight: 800; }
.kc-klappe[data-offen="ja"] .kc-klappe-inhalt { max-height: none; }
.kc-klappe[data-voll="nein"]:not([data-offen="ja"]) .kc-klappe-inhalt { cursor: pointer; }
.kc-klappe[data-voll="nein"]:not([data-offen="ja"]) .kc-klappe-inhalt::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1.6em; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  background: linear-gradient(to bottom, transparent, var(--surface)); }
.kc-klappe-knopf { display: none; justify-self: start; align-items: center; gap: 4px; min-height: 28px; padding: 0;
  border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.kc-klappe[data-voll="nein"] .kc-klappe-knopf { display: inline-flex; }
.kc-klappe-knopf:hover { color: var(--ink); }
.kc-klappe-knopf .ic { width: 14px; height: 14px; transition: transform .15s ease; }
.kc-klappe[data-offen="ja"] .kc-klappe-knopf .ic { transform: rotate(180deg); }

/* Kopf eines Bereichs ohne Rahmen: die Fläche gehört dem Raster. */
.kc-bereich-kopf { display: grid; gap: var(--kc-l1); }
.kc-bereich-kopf h2 { margin: 0; font-family: var(--disp, inherit); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.kc-bereich-kopf p { margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* Finanzierungsarten und Einordnung als Kacheln. */
.kc-arten, .kc-klassen, .kc-partner-raster { display: grid; gap: var(--kc-l3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .kc-arten, .kc-klassen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Raster-Regel (oktogen-verifier 421b9cb V-P3-3): die vier Arten als 2 × 2 —
   nie vier in einer Reihe (vorher ab 1180 px), kein 3 + 1. */
.kc-art, .kc-klasse { display: grid; grid-template-rows: subgrid; row-gap: var(--kc-l2); min-width: 0;
  padding: var(--kc-l3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  color: var(--ink); font: inherit; text-align: left; }
.kc-art { grid-row: span 3; }
.kc-klasse { grid-row: span 2; cursor: pointer; transition: border-color .15s ease; }
.kc-klasse:hover, .kc-klasse:focus-visible { border-color: var(--lime); }
.kc-art h3 { margin: 0; font-family: var(--disp, inherit); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.kc-art-oben { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); }
.kc-art-stand { font-size: .875rem; font-weight: 800; padding: 3px 10px; border-radius: var(--r-sm); white-space: nowrap;
  border: 1px dashed var(--line-strong); background: var(--surface-3); color: var(--ink-soft); }
.kc-klasse-zahl { font-size: .875rem; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }

/* Partnerraster: Spaltenwahl 1–4, vier Spalten erst mit Platz dafür. */
.kc-partner-leiste, .kc-fassungen { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center; justify-content: space-between; }
@media (min-width: 760px) { .kc-partner-raster:not([data-spalten="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-partner-raster:is([data-spalten="3"], [data-spalten="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .kc-partner-raster[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* max-width begründet (R6): unter 760 px gibt es nur eine Spalte. */
@media (max-width: 759px) { .kc-partner-spalten { display: none; } }

/* 1. Sieben Zeilen je Karte: Logo, Kopf, Wer dahintersteht, Leistungen,
   Tätigkeitsfelder, Knöpfe, Kontakt. */
.kc-partner { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.kc-partner > * { min-width: 0; padding-inline: var(--kc-l3); }
/* Operator 2026-09-15: "Logos alle gleich linksbündig angeordnet, nicht eins so
   und das andere so" — feste Höhe, linke Kante, Bild und Namens-Ersatz gleich. */
.kc-partner-logo { display: flex; align-items: center; justify-content: flex-start; height: 4.5rem; padding-block: var(--kc-l3) 0; }
.kc-partner-logo img { height: 2.5rem; width: auto; max-width: 60%; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
/* Logos aus dem BDL-Verzeichnis tragen oft einen weißen Grund; multiply lässt
   ihn auf der hellen Karte verschwinden, ohne das Bild zu verändern. */
.kc-partner-logo-text { font-family: var(--disp, inherit); font-size: 1rem; font-weight: 800; color: var(--ink-soft); line-height: 1.2; overflow-wrap: anywhere; }
.kc-partner-klasse[data-klasse="hersteller"] { background: var(--info); border-color: var(--info); color: var(--surface); }
.kc-partner-klasse[data-klasse="unbelegt"] { border-style: dashed; color: var(--ink-soft); }
.kc-partner-weg-fehlt { color: var(--ink-faint); font-weight: 600; cursor: default; }
.kc-partner-weg-fehlt:hover { background: none; }
.kc-partner-kopf { display: grid; gap: 4px; align-content: start; padding-block: var(--kc-l2); }
.kc-partner-kopf h3, .kc-partner-kopf h2 { margin: 0; font-family: var(--disp, inherit); font-size: 1.1rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.kc-partner-meta { font-size: .875rem; color: var(--ink-faint); }
.kc-partner-klasse { justify-self: start; display: inline-flex; align-items: center; margin-top: 4px; font-size: .875rem; font-weight: 800;
  padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--ink); white-space: nowrap; }
.kc-partner-klasse[data-klasse="bank"] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
/* Bürgschaften (Operator 2026-09-15: Aufbau wie bei den Banken): dieselben
   sieben Zeilen, die Gruppen als Filterleiste, eine Farbe je Anbietergruppe
   aus den Token der Schale. */
.kc-aval { display: grid; gap: var(--kc-l3); }
.kc-aval-gruppen .chip { cursor: pointer; font: inherit; font-size: .875rem; }
.kc-aval-gruppen .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 800; }
.kc-aval-verband { margin: 0; }
.kc-aval-verweis { font-weight: 700; color: var(--ink); }
.kc-partner-klasse[data-klasse="landesbank"] { background: var(--info); border-color: var(--info); color: var(--surface); }
.kc-partner-klasse[data-klasse="buergschaftsbank"] { background: var(--good); border-color: var(--good); color: var(--surface); }
.kc-partner-klasse[data-klasse="foerderbank"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kc-partner-klasse[data-klasse="kreditversicherer"] { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.kc-partner-zelle { display: grid; gap: 6px; align-content: start; padding-block: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-partner-etikett { font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.kc-partner-text { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.kc-partner-leistungen, .kc-partner-felder { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-partner-leistung.new-chip { display: inline-flex; align-items: center; min-height: 2rem; font-size: .875rem; letter-spacing: .02em; padding: 0 10px; }
/* Eine Farbe je Leistungsart, alle aus den Token der dbl9-Schale (Weiß auf
   jedem Grund ≥ 6:1). Die Art kommt aus lib/partner.mjs LEISTUNG_ART. */
.kc-partner-leistung[data-art="leasing"] { background: var(--lime); color: var(--on-lime); }
.kc-partner-leistung[data-art="it"] { background: var(--ink); color: var(--surface); }
.kc-partner-leistung[data-art="mietkauf"] { background: var(--info); color: var(--surface); }
.kc-partner-leistung[data-art="kredit"] { background: var(--good); color: var(--surface); }
.kc-partner-leistung[data-art="factoring"] { background: var(--warn); color: var(--surface); }
.kc-partner-leistung[data-art="sonstig"] { background: var(--ink-soft); color: var(--surface); }
/* Sortierung und Feldfilter in derselben Leiste wie Filter und Spalten. */
.kc-partner-felder button.chip { cursor: pointer; font: inherit; font-size: .875rem; }
.kc-partner-felder button.chip:hover, .kc-partner-felder button.chip:focus-visible { border-color: var(--ink); }
.kc-partner-felder .chip { display: inline-flex; align-items: center; min-height: 2rem; font-size: .875rem; white-space: normal; }
.kc-partner-felder .kc-partner-it { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 800; }
/* 3. Zwei gleich breite Knöpfe, ohne Zeichen — so passen sie in jede Breite. */
.kc-partner-akt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); align-content: start;
  padding-block: var(--kc-l2) var(--kc-l3); border-top: 1px solid var(--line); }
.kc-partner-akt .btn { width: 100%; min-width: 0; justify-content: center; }
.kc-partner-akt .btn .ic { display: none; }
.kc-partner > .kc-partner-kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 0; border-top: 1px solid var(--line); }
.kc-partner-weg { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding-inline: 4px;
  font-size: .875rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kc-partner-weg + .kc-partner-weg { border-left: 1px solid var(--line); }
.kc-partner-weg:hover { background: var(--surface-2); }
.kc-partner-weg .ic { width: 16px; height: 16px; flex: none; }

/* Profil: Kopf, zwei Spalten (Beschreibung und Fakten | Kontakt), Felder. */
.kc-partner-zurueck { display: flex; }
.kc-partner-profil { display: grid; gap: var(--kc-l4); padding: var(--kc-blockpad); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.kc-partner-profil-kopf { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--kc-l4); align-items: center; }
.kc-partner-profil .kc-partner-logo { height: auto; padding: 0; }
.kc-partner-profil .kc-partner-logo img { max-height: 4rem; max-width: 100%; }
.kc-partner-profil-raster { display: grid; gap: var(--kc-l4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .kc-partner-profil-raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.kc-partner-profil-spalte { display: grid; gap: var(--kc-l3); align-content: start; }
.kc-partner-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); }
.kc-partner-wege .btn { width: 100%; min-width: 0; justify-content: center; }
@media (max-width: 640px) { .kc-partner-profil-kopf { grid-template-columns: minmax(0, 1fr); } }

/* Leistungen nach derselben Regel: fünf Zeilen je Kachel (Kopf, Kurztext,
   Umfang, Nachweis, Knopf), gleich hoch über die Reihe. */
/* Raster-Regel (oktogen-verifier 421b9cb V-P3-3): feste Stufen 1/2/3, nie vier in einer Reihe. */
.kc-leistungen { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .kc-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-leistung { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--kc-l2); }
.kc-leistung:has(.kc-leistung-form) { grid-row: span 6; }
.kc-leistung:hover { box-shadow: none; }
.kc-leistung-nachweis-leer { display: block; padding: 0; background: none; }
.kc-leistung-akt, .kc-dok > .kc-akt { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.kc-leistung-akt .btn, .kc-dok > .kc-akt .btn { width: 100%; min-width: 0; justify-content: center; }

/* ------------------------------------------ Angebot in fünf Fassungen -----
   Dieselbe Auszeichnung, fünf Gestaltungen wie beim Hillebrand-Dokument
   (V1 Geschäftsbrief, V2 Editorial, V3 Datenblatt, V4 Premium Dunkel,
   V5 Prospekt). Das PDF ist der Druck derselben Seite — digitale Ansicht und
   PDF können deshalb nicht auseinanderlaufen. */
.kc-brief-kopf { display: grid; gap: var(--kc-l2); }
.kc-brief-absender { justify-self: start; font-size: .875rem; color: var(--ink-faint); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.kc-brief-an { display: grid; font-size: 1rem; line-height: 1.5; }
/* Die Fußzeile bricht zwischen den Spalten, nie in einer Angabe: eine IBAN,
   deren letzte zwei Ziffern allein in der nächsten Zeile stehen, liest
   niemand richtig ab. */
.kc-brief-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kc-l2) var(--kc-l4);
  padding-top: var(--kc-l3); border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-faint); line-height: 1.55; }
.kc-brief-fuss div { display: grid; min-width: 0; }
.kc-brief-fuss span { white-space: nowrap; }
@media (max-width: 520px) { .kc-brief-fuss span { white-space: normal; overflow-wrap: anywhere; } }
.kc-lv-optional td { color: var(--ink-faint); font-style: italic; }
.kc-lv-netto td, .kc-lv-ust td { border-bottom: 0; padding-block: 4px; }
.kc-lv-netto td { border-top: 1px solid var(--line); padding-top: var(--kc-l2); }

.kc-dok[data-fassung="v1"] .kc-dok-kopf h2 { font-size: 1.6rem; }

.kc-dok[data-fassung="v2"] { border-top: 8px solid var(--lime); gap: var(--kc-l6); }
.kc-dok[data-fassung="v2"] .kc-brief-kopf { display: none; }
.kc-dok[data-fassung="v2"] .kc-dok-kopf { border-bottom-width: 1px; }
.kc-dok[data-fassung="v2"] .kc-dok-kopf h2 { font-size: 2.6rem; line-height: 1.08; }
.kc-dok[data-fassung="v2"] .kc-dok-text { font-size: 1.15rem; line-height: 1.8; }

.kc-dok[data-fassung="v3"] { gap: var(--kc-l3); }
.kc-dok[data-fassung="v3"] .kc-dok-kopf h2 { font-size: 1.35rem; }
.kc-dok[data-fassung="v3"] .kc-dok-text { display: none; }
.kc-dok[data-fassung="v3"] .kc-band { gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.kc-dok[data-fassung="v3"] .kc-band-feld { padding: var(--kc-l2); border-right: 1px solid var(--line); }
.kc-dok[data-fassung="v3"] .kc-band-zahl { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kc-dok[data-fassung="v3"] .kc-lv th, .kc-dok[data-fassung="v3"] .kc-lv td { border: 1px solid var(--line); padding: var(--kc-l1) var(--kc-l2); }
.kc-dok[data-fassung="v3"] .kc-lv th { background: var(--surface-3); color: var(--ink); }

/* V4: der Grund ist die Tinte des Hauses. Das Kundencenter hat nur die helle
   Schale (gemessen mit dunklem Farbschema: die Seite bleibt hell), deshalb
   ist V4 in jedem Schema dunkel. */
.kc-dok[data-fassung="v4"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kc-dok[data-fassung="v4"] .kc-dok-kopf { border-bottom-color: var(--lime); }
.kc-dok[data-fassung="v4"] .kc-band-zahl { color: var(--lime); }
.kc-dok[data-fassung="v4"] :is(.kc-dok-meta, .kc-band-lbl, .kc-lv th, .kc-lv-bes, .kc-dok-teil h3, .kc-dok-text, .kc-brief-absender, .kc-brief-fuss, .kc-lv-optional td) { color: var(--line-strong); }
.kc-dok[data-fassung="v4"] :is(.kc-lv td, .kc-brief-absender, .kc-brief-fuss) { border-color: var(--ink-soft); }
.kc-dok[data-fassung="v4"] .kc-lv-summe td { border-top-color: var(--lime); color: var(--lime); }
.kc-dok[data-fassung="v4"] :is(.kc-lv-gruppe td, .kc-dok-angaben dt, .kc-feld-hinweis) { color: var(--line-strong); }
/* Auf dem dunklen Grund war der Hover der Knöpfe hell (Operator: "zu hell,
   nutze ein Graphit"). */
.kc-dok[data-fassung="v4"] .btn-ghost { color: var(--surface); border-color: var(--ink-soft); background: transparent; }
.kc-dok[data-fassung="v4"] .btn-ghost:hover, .kc-dok[data-fassung="v4"] .btn-ghost:focus-visible { background: var(--ink-soft); color: var(--surface); }
/* Operator 2026-09-14: "Premium Dunkel ist bei Mouseover immer noch hell".
   Ursache: das Hausmodul färbt jede Tabellenzeile beim Zeigen hell
   (cf-chrome.css: tbody tr:hover). Das Leistungsverzeichnis ist ein Dokument,
   keine klickbare Liste — seine Zeilen reagieren in keiner Fassung. */
.kc-lv tbody tr { cursor: default; }
.kc-lv tbody tr:hover { background: transparent; }

.kc-dok[data-fassung="v5"] .kc-dok-kopf { background: var(--lime); color: var(--on-lime); border: 0; border-radius: var(--r); padding: var(--kc-l5) var(--kc-l4); }
.kc-dok[data-fassung="v5"] .kc-dok-kopf h2 { font-size: 2.8rem; line-height: 1.05; }
.kc-dok[data-fassung="v5"] :is(.kc-dok-meta, .kc-band-lbl) { color: var(--on-lime); }
@media (max-width: 640px) {
  .kc-dok[data-fassung="v2"] .kc-dok-kopf h2 { font-size: 1.8rem; }
  .kc-dok[data-fassung="v5"] .kc-dok-kopf { padding: var(--kc-l3); }
  .kc-dok[data-fassung="v5"] .kc-dok-kopf h2 { font-size: 1.9rem; }
}

/* Drucken und PDF: nur das Dokument, ohne Schale und ohne Handlungen. */
/* Übernommenes dbl9-Angebot: das Blatt bringt seinen Stil selbst mit
   (lib/angebotdokument.mjs). Hier nur der Rahmen im Kundencenter — am
   Bildschirm ein Blatt mit Schatten, unter 600 px randlos. */
.kc-beleg { display: block; }
.kc-beleg[aria-busy="true"] { min-height: 60vh; }
.kc-beleg .b9 { border-radius: var(--r, 12px); box-shadow: var(--shadow, 0 10px 30px rgba(19, 17, 26, .06)); }
.kc-beleg-leiste { flex-wrap: wrap; }
.kc-beleg-antwort { margin-top: var(--kc-l4); }
@media (max-width: 600px) { .kc-beleg .b9 { border-radius: 0; box-shadow: none; } }

@media print {
  body { background: var(--surface); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Mit dem Blatt eines dbl9-Angebots druckt NUR das Blatt: kein Hinweis,
     keine Antwortfläche, kein Rahmen des Kundencenters. */
  body:has(.kc-beleg) .kc-main > :not(.kc-beleg) { display: none !important; }
  .kc-beleg .b9 { border-radius: 0; box-shadow: none; }
  /* Die Brotkrume („Angebote“) gehört zum Kundencenter, nicht zum Blatt. */
  .rail, .topbar, .scrim, .kc-krume, .kc-fassungen, .kc-main > .kc-akt, .kc-dok > .kc-akt, .kc-dok-antwort, .kc-dialog { display: none !important; }
  .app { display: block; }
  .kc-main { padding: 0; max-width: none; }
  /* Ein Raster bricht im Druck nicht über Seiten: das Leistungsverzeichnis
     sprang gemessen ganz auf Seite 2 und ließ Seite 1 halb leer. Im Druck
     steht das Dokument deshalb als Block, der Abstand kommt vom Folgeteil. */
  .kc-dok { display: block; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .kc-dok > * + * { margin-top: var(--kc-l4); }
  .kc-lv-huelle { overflow: visible; }
  .kc-lv tr { break-inside: avoid-page; }
  @page { size: A4; margin: 14mm; }
}

/* ================================================= Dienstrad-Vergleich =====
   Operator 2026-09-15: "strukturiert, systemisch, übersichtlich, symmetrisch,
   viel Platz, Design, nicht nur Text, premium". Richtung „Katalog Premium"
   (design-scout): Karten ohne Rand mit Schatten, ein Signal (--lime),
   Kennzahlen groß und tabellarisch, Kriterien in Clustern; Desktop-Tabelle
   mit fester erster Spalte, mobil ein Akkordeon je Anbieter — nichts wird
   beschnitten, die Tabelle rollt in ihrem eigenen Kasten. */
.kc-dr { display: grid; gap: var(--kc-l4); padding: var(--kc-l4); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-lg, 16px); box-shadow: var(--shadow, 0 10px 30px rgba(19, 17, 26, .06)); }
.kc-dr-huelle-aussen[aria-busy="true"] { min-height: 8rem; }
.kc-dr-kopf { display: grid; gap: var(--kc-l1); }
.kc-dr-kopf h2 { margin: 0; font-family: var(--disp, inherit); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.kc-dr-kopf p { margin: 0; color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
.kc-dr h3 { margin: 0; font-family: var(--disp, inherit); font-size: 1.15rem; font-weight: 800; }
.kc-dr-zahlen { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.kc-dr-zahl { display: grid; gap: 4px; align-content: start; padding: var(--kc-l3); background: var(--surface-2); border-radius: var(--r, 12px); }
.kc-dr-zahl b { font-family: var(--disp, inherit); font-size: 2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
/* Ein Satz statt einer Zahl: kleiner, damit kein Wort mitten im Wort bricht (R75). */
.kc-dr-zahl b[data-lang="ja"] { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
.kc-dr-zahl span { font-size: .875rem; color: var(--ink-soft); line-height: 1.4; }
.kc-dr-wahl { justify-self: start; }
.kc-dr-huelle { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r, 12px); }
.kc-dr-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .9rem; }
.kc-dr-matrix th, .kc-dr-matrix td { padding: var(--kc-l2) var(--kc-l3); vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); min-width: 14rem; max-width: 22rem; background: var(--surface); }
.kc-dr-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.kc-dr-matrix .kc-dr-erste { position: sticky; left: 0; z-index: 1; min-width: 11rem; max-width: 13rem; background: var(--surface-2); font-weight: 800; box-shadow: 1px 0 0 var(--line); }
.kc-dr-matrix thead .kc-dr-erste { z-index: 3; }
.kc-dr-matrix tbody tr:nth-child(even) td { background: var(--surface-2); }
.kc-dr-matrix td.kc-dr-leer .kc-dr-wert { color: var(--ink-faint); }
.kc-dr-wert { margin: 0 0 6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kc-dr-anbieter { display: grid; gap: 6px; justify-items: start; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.kc-dr-anbieter:hover .kc-dr-anbieter-name, .kc-dr-anbieter:focus-visible .kc-dr-anbieter-name { text-decoration: underline; }
.kc-dr-anbieter-name { font-family: var(--disp, inherit); font-weight: 800; }
.kc-dr-logo { display: flex; align-items: center; height: 3rem; }
.kc-dr-logo img { max-height: 2.5rem; max-width: 9rem; object-fit: contain; mix-blend-mode: multiply; }
.kc-dr-logo-text { font-family: var(--disp, inherit); font-weight: 800; color: var(--ink-soft); }
.kc-dr-quelle { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.kc-dr-quelle .ic { width: 12px; height: 12px; }
.kc-dr-quelle:hover { color: var(--ink); border-color: var(--ink); }
.kc-dr-quelle-fehlt { border: 0; color: var(--ink-faint); }
.kc-dr-akkordeon { display: none; }
.kc-dr-karte { border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); }
.kc-dr-karte + .kc-dr-karte { margin-top: var(--kc-l2); }
.kc-dr-karte > summary { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); cursor: pointer; list-style: none; }
.kc-dr-karte > summary::-webkit-details-marker { display: none; }
.kc-dr-karte > summary b { font-family: var(--disp, inherit); font-size: 1.1rem; }
.kc-dr-kopfwerte { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-dr-kopfwert { display: grid; gap: 2px; min-width: 0; }
.kc-dr-kopfwert small { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dr-kopfwert span { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.kc-dr-liste { display: grid; gap: 0; padding: 0 var(--kc-l3) var(--kc-l3); }
.kc-dr-reihe { display: grid; gap: 4px; padding: var(--kc-l2) 0; border-top: 1px solid var(--line); }
.kc-dr-reihe-k { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.kc-dr-reihe-w { display: flex; flex-wrap: wrap; gap: 6px var(--kc-l2); align-items: baseline; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kc-dr-akt { display: flex; flex-wrap: wrap; gap: var(--kc-l2); padding-top: var(--kc-l3); }
.kc-dr-cluster { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.kc-dr-clusterbox { display: grid; gap: 0; align-content: start; padding: var(--kc-l3); background: var(--surface-2); border-radius: var(--r, 12px); }
.kc-dr-clusterbox h3 { margin-bottom: var(--kc-l2); }
.kc-dr-clusterbox .kc-dr-reihe:first-of-type { border-top: 0; }
.kc-dr-fremd { display: grid; gap: var(--kc-l2); }
.kc-dr-fremdquelle { border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); }
.kc-dr-fremdquelle > summary { display: grid; gap: 2px; padding: var(--kc-l3); cursor: pointer; }
.kc-dr-fremdliste { display: grid; padding: 0 var(--kc-l3) var(--kc-l3); }
@media (max-width: 719px) {
  /* max-width begründet (R6): unter 720 px trägt das Akkordeon die Matrix, die Tabelle wäre 18 Spalten breit. */
  .kc-dr-huelle { display: none; }
  .kc-dr-akkordeon { display: block; }
  .kc-dr { padding: var(--kc-l3); }
}

/* Lizenzvermerk an einem Logo aus fremder Quelle (CC BY-SA verlangt ihn am Anzeigeort). */
.kc-logo-vermerk { flex-basis: 100%; justify-self: start; align-self: start; width: max-content; font-size: .65rem; line-height: 1.2; font-weight: 700; color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.kc-partner-logo:has(.kc-logo-vermerk) { flex-wrap: wrap; align-content: center; row-gap: 2px; }
.kc-partner-logo:has(.kc-logo-vermerk) img { max-height: 2rem; height: 2rem; }
.kc-logo-vermerk:hover { color: var(--ink); border-color: var(--ink); }

/* ================================================ Zahlseite (Operator 2026-09-15, Vorlage „dbl99 pay tools“) ====
   Drei Schritte, zwei Karten auf einer Linie, der Knopf so breit wie die Spalte. Nur Token des Moduls. */
.kc-z { display: grid; gap: var(--kc-l4); align-content: start; }
.kc-z-laden { margin: 0; color: var(--ink-faint); }
.kc-z-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kc-l3); position: relative; }
.kc-z-stufe { display: flex; align-items: center; gap: var(--kc-l2); min-width: 0; position: relative; }
.kc-z-stufe + .kc-z-stufe::before { content: ''; position: absolute; right: calc(100% + var(--kc-l2)); top: 50%; width: calc(100% - 12rem); max-width: 14rem; height: 2px; background: var(--line); }
.kc-z-stufe[data-zustand="fertig"] + .kc-z-stufe::before { background: var(--lime); }
.kc-z-kreis { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-weight: 800; font-size: .95rem; color: var(--ink-faint); }
.kc-z-kreis .ic { width: 16px; height: 16px; }
.kc-z-stufe[data-zustand="aktiv"] .kc-z-kreis { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.kc-z-stufe[data-zustand="fertig"] .kc-z-kreis { color: var(--lime); border-color: var(--rail-active); background: var(--rail-active); }
.kc-z-stufe-txt { display: grid; gap: 1px; min-width: 0; }
.kc-z-stufe-txt b { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.kc-z-stufe-txt span { font-size: .8125rem; color: var(--ink-faint); white-space: nowrap; }
.kc-z-kopf { display: grid; gap: 6px; }
.kc-z-kicker { margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.kc-z-kopf h2 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.kc-z-sub { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
/* Beide Karten enden bündig (Abnahme 32a10cd P2): das Raster streckt, die
   rechte Karte ist eine Flexspalte und schiebt ihren Fuß nach unten. */
.kc-z-raster { display: grid; grid-template-columns: 1fr; gap: var(--kc-l3); align-items: stretch; }
@media (min-width: 62rem) { .kc-z-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kc-z-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: var(--kc-l3); display: grid; gap: var(--kc-l3); align-content: start; min-width: 0; }
.kc-z-rechts { display: flex; flex-direction: column; }
.kc-z-rechts > .kc-z-fuss, .kc-z-rechts > .kc-z-frage { margin-top: auto; }
.kc-z-leiste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l3); align-items: center; }
/* Ein Zurück, eigene Zeile über den Schritten (Operator 2026-09-28). */
.kc-z > .kc-z-zurueck-oben.btn { justify-self: start; }
.kc-z-zurueck-oben.btn { color: var(--lime); }
.kc-z-abwickler { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: .8125rem; color: var(--ink-faint); }
.kc-z-abwickler b { font-size: 1rem; font-weight: 800; color: var(--ink-soft); letter-spacing: -.02em; }
.kc-z-abwickler b + b { padding-left: 10px; border-left: 1px solid var(--line-strong); }
.kc-z-seitenfuss { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-l2); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--kc-l2); font-size: .8125rem; color: var(--ink-faint); }
.kc-z-rechtstexte { display: inline-flex; gap: var(--kc-l2); }
.kc-z-rechtstexte a { color: inherit; text-decoration: none; }
.kc-z-rechtstexte a:hover { color: var(--ink); }
.kc-z-produkt { display: grid; grid-template-columns: auto 1fr auto; gap: var(--kc-l2); align-items: start; }
.kc-z-produkt-txt { display: grid; gap: 4px; min-width: 0; }
.kc-z-produkt-txt h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; }
.kc-z-produkt-txt p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.kc-z-pille { align-self: start; padding: 5px 12px; border-radius: 999px; background: var(--rail-active); color: var(--lime); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.kc-z-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-z-zahlen .kc-tool-zahl b { font-size: 1.35rem; }
.kc-z-preis-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kc-l2); border-top: 1px solid var(--line); padding-top: var(--kc-l3); }
.kc-z-preis-kopf h4 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.kc-z-preis-kopf span { font-size: .8125rem; color: var(--ink-faint); }
.kc-z-preis { display: grid; }
.kc-z-zeile { display: flex; justify-content: space-between; gap: var(--kc-l2); align-items: baseline; padding: 6px 4px; font-size: .95rem; border-bottom: 1px solid var(--line-soft, var(--line)); }
.kc-z-zeile:last-child { border-bottom: 0; }
/* Auswahl: je Tool eine Zeile über der Summe, leiser als die Summe. */
.kc-z-posten { color: var(--ink-soft); }
.kc-z-lbl { color: var(--ink-soft); min-width: 0; }
.kc-z-wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-z-total { background: var(--surface-2); border-radius: var(--r, 10px); padding: 10px 8px; margin-top: 4px; border-bottom: 0; }
.kc-z-total .kc-z-lbl { color: var(--ink); font-weight: 700; }
.kc-z-total .kc-z-wert { font-size: 1.15rem; font-weight: 800; }
.kc-z-einmalig { background: var(--rail-active); border: 1px solid rgba(196, 11, 11, .18); border-radius: var(--r, 12px); padding: 6px 8px; }
.kc-z-einmalig-kopf .kc-z-lbl { color: var(--lime); font-weight: 700; }
.kc-z-total-rot { background: transparent; }
.kc-z-total-rot .kc-z-lbl, .kc-z-total-rot .kc-z-wert { color: var(--lime); }
.kc-z-fakten { display: grid; border-top: 1px solid var(--line); padding-top: var(--kc-l2); }
.kc-z-fakt { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-l2); padding: 7px 4px; font-size: .95rem; border-bottom: 1px solid var(--line-soft, var(--line)); }
.kc-z-fakt:last-child { border-bottom: 0; }
.kc-z-fakt-l { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.kc-z-fakt-l .ic { width: 18px; height: 18px; color: var(--ink-faint); }
.kc-z-fakt b { font-weight: 700; white-space: nowrap; }
.kc-z-steuer { display: grid; gap: var(--kc-l1); border-top: 1px solid var(--line); padding-top: var(--kc-l3); }
.kc-z-steuer .kc-lbl { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.kc-z-steuer select.kc-feld, .kc-z-steuer input.kc-feld { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); color: var(--ink); padding: 10px 14px; font: inherit; font-size: .95rem;
  appearance: none; -webkit-appearance: none; }
.kc-z-steuer select.kc-feld { background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.kc-z-steuer .kc-feld:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-z-ustid { display: grid; gap: var(--kc-l1); }
.kc-z-ustid-reihe { display: flex; gap: var(--kc-l1); }
.kc-z-ustid-reihe .kc-feld { flex: 1 1 auto; text-transform: uppercase; }
.kc-z-steuer-meldung { margin: 0; min-height: 1.2em; font-size: .875rem; color: var(--ink-faint); }
.kc-z-rechts-titel { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; }
.kc-z-zahlarten { display: grid; gap: var(--kc-l2); }
.kc-z-za { display: flex; align-items: center; gap: var(--kc-l2); width: 100%; text-align: left; cursor: pointer; padding: var(--kc-l2) var(--kc-l3); min-height: 64px;
  border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); color: inherit; font: inherit; }
.kc-z-za:hover { border-color: var(--line-strong); }
.kc-z-za[aria-checked="true"] { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); background: var(--rail-active); }
.kc-z-za:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-z-punkt { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; }
.kc-z-za[aria-checked="true"] .kc-z-punkt { border-color: var(--lime); }
.kc-z-za[aria-checked="true"] .kc-z-punkt::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.kc-z-za-txt { display: grid; gap: 2px; min-width: 0; }
.kc-z-za-txt b { font-size: .98rem; font-weight: 700; }
.kc-z-za-txt span { font-size: .875rem; color: var(--ink-faint); line-height: 1.4; }
.kc-z-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l2); }
.kc-z-tabs .kc-z-za { min-height: 56px; justify-content: center; padding: var(--kc-l2); }
.kc-z-tabs .kc-z-punkt { display: none; }
.kc-z-hinweis { margin: 0; font-size: .875rem; color: var(--ink-faint); }
/* Kartenmarken unter der Zahlart (Operator 2026-10-02): geholte Marken auf hellem Feld, in beiden Fassungen gleich. */
.kc-z-marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); margin: 0; padding: 0; list-style: none; }
.kc-z-marken li { display: grid; place-items: center; width: var(--kc-l5); height: var(--kc-l4); padding: calc(var(--kc-l1) / 2) var(--kc-l1); border: 1px solid var(--line); border-radius: var(--kc-l1); background: var(--on-lime); }
.kc-z-marken img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Ein Zeichen, das selbst Fläche ist (Amex Blue Box, quadratisch), füllt die 3:2-Kachel randlos;
   object-fit nimmt nur Blau oben und unten weg, die Schrift bleibt ganz. */
.kc-z-marken li[data-flaeche="ja"] { display: block; padding: 0; }
/* Zahlungslink: der ruhige zweite Weg unter dem Bezahlknopf. */
.kc-z-link { margin-top: var(--kc-l1); }
/* Zahlungslink-Dialog: Link und Kopieren in einer Zeile, darunter Luft zur Empfängerwahl. */
.kc-zl-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--kc-l1); margin-bottom: var(--kc-l3); }
@media (max-width: 599px) { .kc-zl-zeile { grid-template-columns: minmax(0, 1fr); } }
.kc-z-marken li[data-flaeche="ja"] img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: calc(var(--kc-l1) - 1px); }
.kc-z-za[data-gesperrt="ja"] > svg:last-child { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.kc-z-rechnung { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-z-rechnung h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.kc-z-rechnung p { margin: 0; font-size: .9rem; line-height: 1.5; }
.kc-z-rechnung-stand { color: var(--ink-faint); }
.kc-z-rechnung-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kc-l2); }
.kc-z-rechnung-knoepfe .btn { justify-content: center; margin: 0; }
.kc-z-formular { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-z-formular:empty { display: none; }
.kc-z-stripe { border: 1px solid var(--line); border-radius: var(--r, 12px); overflow: hidden; background: var(--surface); }
.kc-z-fehler { padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--bad, #b91c1c); border-radius: var(--r, 12px); color: var(--bad, #b91c1c); font-size: .9rem; }
/* Gesperrt eigene Farbe statt halber Deckkraft (Abnahme 3b368e9 P3: 2,65:1). */
.kc-z-cta.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--surface-2); color: var(--ink-soft); border-color: var(--line-strong); box-shadow: none; }
.kc-z-dialog { max-width: 36rem; }
.kc-z-cta.btn { width: 100%; box-sizing: border-box; margin: 0; justify-self: stretch; justify-content: center; }
.kc-z-agb { margin: 0; font-size: .875rem; color: var(--ink-faint); line-height: 1.5; }
/* Vertragsbedingungen mit Unterschrift (pm-33989) im freien Platz der Zahlart-Spalte. */
.kc-z-zustimmung { margin: 0; padding: var(--kc-l3); display: grid; gap: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); min-width: 0; }
/* Telefon: die Fläche randlos bis an die Fensterkante, Rundung 0 (feedback_mobil_randlos, Integration 0929). */
@media (max-width: 599px) { #kc-main .kc-z-zustimmung { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; } }
.kc-z-zustimmung legend { padding: 0 var(--kc-l1); font-size: 1rem; font-weight: 800; }
.kc-z-haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: start; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.kc-z-haken input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--lime); }
.kc-z-unterschrift { font-size: 1.05rem; font-style: italic; }
.kc-z-trust { list-style: none; margin: 0; padding: var(--kc-l2) var(--kc-l3); display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-z-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); }
.kc-z-trust .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-faint); }
.kc-z-fuss { display: flex; justify-content: flex-end; align-items: center; gap: var(--kc-l2); flex-wrap: nowrap; }
.kc-z-zurueck.btn { min-width: 0; }
.kc-z-zurueck .ic { transform: rotate(180deg); }
.kc-z-erfolg { justify-self: center; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: var(--rail-active); color: var(--lime); }
.kc-z-erfolg .ic { width: 38px; height: 38px; }
.kc-z-erfolg-wartet { color: var(--ink-faint); background: var(--surface-2); }
.kc-z-danke { margin: 0; text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.kc-z-danke-sub { margin: 0; text-align: center; color: var(--ink-soft); }
.kc-z-danke-liste { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-z-danke-zeile { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-z-danke-zeile div { display: grid; gap: 2px; }
.kc-z-danke-zeile b { font-size: .98rem; }
.kc-z-danke-zeile span { font-size: .9rem; color: var(--ink-soft); }
.kc-z-frage { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-l2); flex-wrap: wrap; }
.kc-z-frage div { display: grid; gap: 2px; }
.kc-z-frage span { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 40rem) {
  .kc-z-stepper { grid-template-columns: 1fr; gap: var(--kc-l1); }
  .kc-z-leiste { grid-template-columns: 1fr; }
  .kc-z-fuss { flex-wrap: wrap; }
  .kc-z-stufe + .kc-z-stufe::before { display: none; }
  .kc-z-kopf h2 { font-size: 1.6rem; }
  .kc-z-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-z-tabs { grid-template-columns: 1fr; }
}


/* --- Angebot: symmetrisch geordnet (Operator 2026-09-23: "nicht symmetrisch
   strukturiert … mtl verschiebt den Bereich nach links") ---
   1. Kopfdaten als Zeilen Etikett | Wert mit Haarlinie, eine Spalte am
      Telefon, zwei gleich breite Spalten ab 720 px — gleiche Zeilenhöhe,
      gleiche Kante, egal wie viele Angaben es sind.
   2. Zahlenband: so viele gleich breite Spalten wie Zahlen, am Telefon zwei.
   3. Leistungsverzeichnis: Betrag und Takt getrennt; die Takt-Spanne hat
      feste Breite, damit jeder Betrag auf derselben rechten Kante steht. */
.kc-dok-angaben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--kc-l5); }
/* Am Telefon: Etikett über dem Wert, jede Angabe eine Zeile mit Haarlinie. */
.kc-dok-angaben div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-dok-angaben dd { overflow-wrap: anywhere; }
@media (min-width: 720px) {
  /* Ab 720 px zwei gleich breite Spalten, darin Etikett | Wert auf einer
     Grundlinie, der Wert rechtsbündig. */
  .kc-dok-angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-dok-angaben div { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; gap: var(--kc-l2); }
  .kc-dok-angaben dd { text-align: right; }
}
.kc-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .kc-band { grid-template-columns: repeat(var(--kc-band-n, 4), minmax(0, 1fr)); }
}
.kc-band-feld { align-content: start; }
.kc-band-zahl { font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 5.2vw, 1.7rem); overflow-wrap: anywhere; }
.kc-lv-bez { display: block; }
.kc-lv td.z { font-variant-numeric: tabular-nums; }
.kc-lv-summe-zelle { white-space: nowrap; }
.kc-lv-betrag { display: inline-block; }
.kc-lv-takt { display: inline-block; width: 3.4em; text-align: left; padding-left: .35em; font-size: .82rem; color: var(--ink-faint); }
.kc-lv th.z:last-child { padding-right: 3.4em; }

/* Leistungsverzeichnis am Telefon (unter 640 px): jede Position ein Block —
   Bezeichnung und Beschreibung über die volle Breite, darunter Menge,
   Einzeln und Summe in drei gleich breiten Spalten mit Etikett. Summen-
   zeilen: Text links, Betrag rechts. Kein waagerechtes Wischen mehr (R7).
   R6-Begründung für die Weiche nach unten: sie hebt Tabellenregeln auf, die
   für alle Breiten gelten (min-width 34rem, Zellrahmen). */
@media screen and (width < 640px) {
  .kc-lv { min-width: 0; }
  .kc-lv, .kc-lv tbody { display: block; }
  .kc-lv thead { display: none; }
  .kc-lv tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--kc-l2);
    padding: var(--kc-l3) 0; border-bottom: 1px solid var(--line); }
  .kc-lv td { display: block; padding: 0; border: 0; min-width: 0; }
  .kc-lv tr > td:first-child { grid-column: 1 / -1; }
  .kc-lv td.z { text-align: left; white-space: normal; }
  .kc-lv td.z[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
  .kc-lv td.z[data-label="Einzeln"] { text-align: left; }
  /* Summe über die volle Breite: Etikett links, Betrag rechts — nie neben
     "Einzeln" gequetscht (gemessen 2026-09-23: Überlappung bei 360 px). */
  .kc-lv td.z[data-label="Summe"] .kc-lv-betrag { margin-left: auto; }
  /* Optionale Position: die Klammer rückt mit dem Betrag nach rechts —
     sie stand sonst allein am Etikett („SUMME (      354,00 €)“). */
  .kc-lv td.z[data-label="Summe"] .kc-lv-klammer:not(:empty) { margin-left: auto; }
  .kc-lv td.z[data-label="Summe"] .kc-lv-klammer:not(:empty) + .kc-lv-betrag { margin-left: 0; }
  .kc-lv td.z[data-label="Summe"] { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: baseline;
    white-space: nowrap; padding-top: 4px; border-top: 1px dashed var(--line); }
  .kc-lv td.z[data-label="Summe"]::before { display: inline; }
  .kc-lv tr.kc-lv-summenzeile { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-lv tr.kc-lv-summenzeile > td:first-child { grid-column: auto; }
  .kc-lv tr.kc-lv-summenzeile > td.z:empty { display: none; }
  .kc-lv tr.kc-lv-summenzeile > td.z { text-align: right; white-space: nowrap; }
  .kc-lv tr.kc-lv-gruppe { display: block; }
}

/* ================================================ Bürgschaften-Strecke ====
   Operator 2026-09-23, Plan docs/BUERGSCHAFT-STRECKE-PLAN.md, Abschnitt 3.
   Nur Klassen mit Präfix kc-bg; Farben ausschließlich aus Token der Schale
   und der Marke (R10), Abstände aus der Leiter --kc-l1…l6 (R8). Feste Maße
   aus den Screens: rechte Spalte 320 px, Stufenmarke 32 px; mobil läuft jede
   Fläche über den Seitenrand der Schale (20 px, .main in cf-chrome.css)
   randlos bis an die Fensterkante (R145). Mobil zuerst (R6). */
.kc-bg { display: grid; gap: var(--kc-l4); min-width: 0; }

.kc-bg-krumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); font-size: .875rem; color: var(--ink-faint); }
.kc-bg-krumen a { color: var(--ink-faint); text-decoration: none; }
.kc-bg-krumen a:hover, .kc-bg-krumen a:focus-visible { color: var(--ink); text-decoration: underline; }
.kc-bg-krumen .ic { width: 14px; height: 14px; transform: rotate(-90deg); color: var(--line-strong); }
.kc-bg-krumen span:last-child { color: var(--ink); font-weight: 600; }

.kc-bg-kopf { display: grid; gap: var(--kc-l3); align-items: start; }
.kc-bg-kopf h1 { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.kc-bg-kopf p { margin: var(--kc-l1) 0 0; max-width: 64ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.kc-bg-klein { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-pille { display: inline-flex; align-items: center; justify-self: start; align-self: start; padding: 2px var(--kc-l1);
  border-radius: 999px; background: var(--rail-active); color: var(--lime-strong); font-size: .875rem; font-weight: 700; white-space: nowrap; }

.kc-bg-leiste-huelle { min-width: 0; }
.kc-bg-leiste { display: none; }
.kc-bg-leiste-kurz { display: grid; gap: var(--kc-l1); }
.kc-bg-leiste-kurz b { font-size: .9375rem; }
.kc-bg-balken { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.kc-bg-balken span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--lime); border-radius: inherit; }

.kc-bg-stufe-marke { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-faint);
  font-size: .875rem; font-weight: 700; }
.kc-bg-stufe-marke .ic { width: 16px; height: 16px; }
.kc-bg-stufe-marke.xl { width: 40px; height: 40px; font-size: 1rem; background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.ist-erledigt > .kc-bg-stufe-marke { background: var(--good); border-color: var(--good); color: var(--on-lime); }
.ist-aktuell > .kc-bg-stufe-marke { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }

/* Acht Stufen brauchen gut 100 px je Stufe: erst ab 1200 px Fensterbreite
   die volle Leiste, darunter die Fortschrittszeile (weglassen statt quetschen). */
@media (min-width: 1200px) {
  .kc-bg-leiste-kurz { display: none; }
  .kc-bg-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
  .kc-bg-stufe { position: relative; display: grid; justify-items: start; gap: var(--kc-l1); padding-right: var(--kc-l1); min-width: 0; }
  /* Die Linie läuft von Marke zu Marke; erledigt in Erfolgsfarbe. */
  .kc-bg-stufe:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(32px + var(--kc-l1));
    right: var(--kc-l1); height: 2px; background: var(--line); }
  .kc-bg-stufe.ist-erledigt:not(:last-child)::after { background: var(--good); }
  .kc-bg-stufe-text { display: grid; gap: 2px; min-width: 0; }
  /* Zwei Zeilen Platz für jeden Titel: sonst stehen die Unterzeilen je nach
     Umbruch auf verschiedener Höhe (Screen 1–12 zeigten genau das). */
  .kc-bg-stufe-text b { font-size: .875rem; line-height: 1.25; min-height: 2.5em; hyphens: auto; overflow-wrap: anywhere; }
  .kc-bg-stufe-text small { font-size: .875rem; color: var(--ink-faint); }
  .kc-bg-stufe.kann { cursor: pointer; border-radius: var(--r-sm, 10px); }
  .kc-bg-stufe.kann:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
  .kc-bg-stufe.ist-aktuell b { color: var(--lime-strong); }
}

.kc-bg-raster { display: grid; gap: var(--kc-l3); align-items: start; min-width: 0; }
.kc-bg-inhalt, .kc-bg-rail { display: grid; gap: var(--kc-l3); align-content: start; min-width: 0; }
@media (min-width: 1200px) { .kc-bg-raster { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--kc-l4); } }

.kc-bg-karte, .kc-bg-railkarte, .kc-bg-kpis, .kc-bg-weg-karte, .kc-bg-wahl-karte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); min-width: 0; }
.kc-bg-karte { display: grid; gap: var(--kc-l3); padding: var(--kc-l3); align-content: start; }
.kc-bg-karte > h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
/* Ein Knopf in einer Karte steht in seiner Breite, nicht über die ganze Karte. */
.kc-bg-karte > .btn { justify-self: start; }
.kc-bg-railkarte { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); }
.kc-bg-railkopf { display: flex; align-items: center; gap: var(--kc-l2); }
.kc-bg-railkopf h2, .kc-bg-railkopf h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.kc-bg-railkopf p { margin: 2px 0 0; color: var(--ink-soft); }
.kc-bg-railkarte p { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
/* Einklappbare Karte der rechten Spalte: der Titel ist der Schalter
   (aria-expanded), das Symbol zeigt den Zustand; Trefferfläche 44 px (R28b). */
.kc-bg-railkopf h3 { flex: 1 1 auto; min-width: 0; }
.kc-bg-railschalter { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l1); width: 100%; min-height: 44px;
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.kc-bg-railschalter .ic { flex: none; width: 18px; height: 18px; color: var(--ink-faint); transform: rotate(90deg); }
.kc-bg-railkarte.ist-zu .kc-bg-railschalter .ic { transform: rotate(-90deg); }
.kc-bg-railschalter:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-sm, 10px); }
.kc-bg-railinhalt { display: grid; gap: var(--kc-l2); }
@media (min-width: 720px) { .kc-bg-karte { padding: var(--kc-l4); } }

.kc-bg-haken { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-bg-haken li { display: flex; gap: var(--kc-l1); align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.kc-bg-haken .ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--lime); }
.kc-bg-voll { width: 100%; justify-content: center; }
.kc-bg .btn { white-space: nowrap; }
.kc-bg .btn.kc-bg-pfeil .ic { order: 2; }

.kc-bg-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--kc-l2);
  padding-top: var(--kc-l3); border-top: 1px solid var(--line); }
.kc-bg-fuss > div { display: flex; flex-wrap: wrap; gap: var(--kc-l2); }
.kc-bg-fuss > div:last-child { margin-left: auto; }
.kc-bg-fehler { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--bad);
  border-radius: var(--r, 12px); background: var(--bad-bg); color: var(--ink); font-size: .9375rem; }
.kc-bg-fehler ul { margin: 0; padding-left: 1.2rem; }

.kc-bg-form { display: grid; gap: var(--kc-l3); }
@media (min-width: 720px) {
  .kc-bg-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-bg-form > .kc-bg-breit { grid-column: 1 / -1; }
}
.kc-bg-pflicht { color: var(--lime); }
.kc-bg-einheit { position: relative; }
.kc-bg-einheit .inp { padding-right: 4.5rem; }
.kc-bg-einheit span { position: absolute; right: var(--kc-l2); top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: .875rem; pointer-events: none; }
.kc-bg-zaehler { justify-self: end; font-size: .875rem; color: var(--ink-faint); }
.kc-bg-herkunft { font-size: .875rem; font-weight: 600; color: var(--warn); }
/* Auswahlfeld im CI (public/modul/auswahl.js, pm-33952): Hausbauteil .cidd
   (cf-chrome.css, „replaces native select everywhere“), Verhalten im Modul.
   Hier: Höhe, Rundung und Fläche wie .inp (46 px), damit Felder einer Zeile
   gleich hoch stehen; der Wert bricht um, statt abgeschnitten zu werden;
   Optionen mit Hausmaß-Trefferfläche (R28b); Suchfeld ohne Systemdarstellung. */
.ci-auswahl { min-width: 0; }
.ci-auswahl .cidd-btn { min-height: 46px; border-radius: var(--r-in, 12px); background: var(--surface); font-size: .96rem; cursor: pointer; }
.ci-auswahl.mini .cidd-btn { min-height: 38px; padding: 6px 10px; font-size: .875rem; }
.ci-auswahl .cidd-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.ci-auswahl .cidd-btn[aria-invalid="true"] { border-color: var(--bad, #C40B0B); }
.ci-auswahl .cidd-val { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* i-chevron zeigt im Sprite nach links: zu nach unten, offen nach oben. */
.ci-auswahl .cidd-btn .ic { flex: none; transform: rotate(-90deg); }
.ci-auswahl.open .cidd-btn .ic { transform: rotate(90deg); }
.ci-auswahl .cidd-menu { min-width: max(100%, 12rem); right: auto; max-height: 320px; display: grid; gap: 4px; align-content: start; }
.ci-auswahl .cidd-menu[hidden] { display: none; }
.ci-auswahl .cidd-optionen { display: grid; gap: 2px; }
.ci-auswahl .cidd-menu [role="option"] { min-height: 44px; }
.ci-auswahl .cidd-menu [role="option"][hidden] { display: none; }
.ci-auswahl .cidd-menu [role="option"].ist-aktiv { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--lime); }
.cidd-suche { -webkit-appearance: none; appearance: none; width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: .9rem; outline: 0; }
.cidd-suche:focus { border-color: var(--ink); background: var(--surface); }
.cidd-leer { margin: 0; padding: 10px 11px; font-size: .875rem; color: var(--ink-faint); }
/* Zwischenüberschrift einer gruppierten Liste (Bürgschaftsarten, Runde 2). */
.cidd-gruppe { padding: 12px 11px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.cidd-gruppe[hidden] { display: none; }
.cidd-platzhalter { color: var(--ink-faint); }
.cidd-marken { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.cidd-marke { display: inline-flex; align-items: center; padding: 2px var(--kc-l1); border-radius: 999px;
  background: var(--rail-active); color: var(--lime-strong); font-size: .875rem; font-weight: 600; }
.cidd-marke.mehr { background: var(--surface-2); color: var(--ink-soft); }
/* Suchfelder ohne Systemdarstellung (Hausregel, G3): kein Abbrechen-Kreuz,
   keine Lupe, kein Ergebnis-Knopf des Browsers — falls irgendwo noch ein
   type=search steht. Die Kundencenter-Felder sind type=text role=searchbox. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Wiederholte Einträge (Befund 2026-09-23): die Tabelle mit Kopfzeile lief
   ab fünf Spalten neben der rechten Spalte zusammen und über die Zellen.
   Jetzt in jeder Breite eine Karte je Eintrag; die Felder tragen ihre
   eigene Beschriftung und stehen im Raster (auto-fill, R7), nie gequetscht. */
.kc-bg-liste { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-bg-liste-inhalt { display: grid; gap: var(--kc-l2); }
.kc-bg-liste-zeile { display: grid; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3) var(--kc-l3); border: 1px solid var(--line);
  border-radius: var(--r, 12px); background: var(--surface-2); min-width: 0; }
.kc-bg-liste-felder { display: grid; gap: var(--kc-l2) var(--kc-l3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.kc-bg-plus { justify-self: start; }
/* Beschriftung unten bündig: bricht eine in zwei Zeilen, stehen die Felder
   derselben Zeile trotzdem auf einer Kante und gleich hoch (R133). */
/* Raster-Ausrichtung für JEDES Formularraster und jedes Kartenraster des
   Kundencenters (Operator 2026-09-28, „Fehler1/Fehler2 … überall im gesamten
   Portal abstellen“): Beschriftung, Eingabe und Hinweis einer Reihe liegen
   auf gemeinsamen Linien (Subgrid) — bricht eine Beschriftung zweizeilig um,
   rutscht ihr Feld nicht mehr aus der Reihe. Felder mit mehr als drei Teilen
   (Zähler, Fehler) behalten die Ausrichtung der Beschriftung nach unten. */
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld:not(:has(> :nth-child(4))) {
  grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
/* Vier oder fünf Teile (Zähler, „Liegt uns schon vor“, Fehler): das Feld
   belegt entsprechend mehr Zeilen des Subgrids — die ersten drei Linien
   fluchten weiter mit den Nachbarn (Abnahme e744d86 P2: mit 1fr schwamm das
   Feld oben aus der Reihe). */
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld:has(> :nth-child(4)) {
  grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld:has(> :nth-child(5)) { grid-row: span 5; }
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld:has(> :nth-child(6)) { grid-row: auto; grid-template-rows: 1fr; }
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld > label { align-self: end; }
:is(.kc-dp-form, .kc-bg-form, .kc-bg-liste-felder, .kc-form-reihe) > .kc-feld > :nth-child(3) { align-self: start; }
/* Produktkarten: Titel, Text und Knopf je Reihe auf einer Linie. */
.kc-produkt { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--kc-l1); }

.kc-bg-wege { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kc-bg-weg-pfeil { display: none; }
/* Subgrid: Symbol, Titel, Text und Knopf stehen in allen vier Karten auf
   derselben Linie, auch wenn ein Titel zweizeilig ist. */
.kc-bg-weg-karte { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); grid-row: span 4; grid-template-rows: subgrid; }
.kc-bg-weg-pfeil { grid-row: span 4; }
.kc-bg-weg-karte h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.kc-bg-weg-karte p { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }
.kc-bg-weg-karte.ist-aus { opacity: .5; filter: grayscale(1); }
.kc-bg-weg-karte.ist-aus .btn { cursor: not-allowed; }
.kc-bg-weg-karte .btn { justify-content: center; }
@media (min-width: 1280px) {
  .kc-bg-wege { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--kc-l2); align-items: stretch; }
  .kc-bg-weg-pfeil { display: grid; place-items: center; color: var(--ink-faint); }
  .kc-bg-weg-pfeil .ic { width: 20px; height: 20px; }
}
.kc-bg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--kc-l3); padding: var(--kc-l3); }
.kc-bg-kpi { display: flex; align-items: center; gap: var(--kc-l2); min-width: 0; }
.kc-bg-kpi b { display: block; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bg-kpi span { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-kpi-quelle { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-bg-kartenkopf { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bg-kartenkopf h2 { margin: 0; font-size: 1.125rem; }
.kc-bg-kartenkopf p { margin: var(--kc-l1) 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }
.kc-bg-buchen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3);
  border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-bg-buchen > span { flex: 1 1 16rem; font-size: .9375rem; color: var(--ink-soft); }
.kc-bg-limit-zahl { display: flex; align-items: center; gap: var(--kc-l3); }
/* Runde 2 Punkt 8: das Limit des Hauses ist eine Einschätzung — der Hinweis steht direkt unter der Zahl. */
.kc-bg-hinweis-limit { margin: var(--kc-l2) 0 0; padding: var(--kc-l2); border-left: 3px solid var(--warn); background: var(--surface-2); font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.kc-bg-limit-zahl > div { display: grid; gap: 2px; }
.kc-bg-limit-zahl b { font-size: 2rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bg-limit-zahl b.kc-bg-limit-offen { font-size: 1.25rem; line-height: 1.3; }

.kc-bg-wahl { display: grid; gap: var(--kc-l3); }
@media (min-width: 900px) { .kc-bg-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-bg-wahl-karte { position: relative; display: grid; gap: var(--kc-l3); padding: var(--kc-l4) var(--kc-l3) var(--kc-l3); grid-template-rows: auto 1fr auto; }
.kc-bg-wahl-karte.empfohlen { border-color: var(--lime); background: linear-gradient(var(--rail-active), var(--rail-active)), var(--surface); }
.kc-bg-wahl-karte.ist-gewaehlt { box-shadow: inset 0 0 0 1px var(--lime); }
.kc-bg-wahl-karte > .kc-bg-pille { position: absolute; top: var(--kc-l2); right: var(--kc-l2); }
.kc-bg-wahl-karte .btn { justify-content: center; }
/* Eine Frage je Bildschirm (Vorlage „Bürgschaften Portal“ 01:38:06): große
   Wahlkarten mit rundem Symbol, fünf Haken, Knopf über die ganze Breite. */
.kc-bg-schrittzeile { margin: 0 0 var(--kc-l1); font-size: 1rem; color: var(--ink-soft); }
.kc-bg-frage .kc-bg-kopf h1 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.25rem); letter-spacing: -.02em; }
.kc-bg-frage-inhalt { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-bg-wahl-gross .kc-bg-wahl-karte { gap: var(--kc-l3); padding: var(--kc-l4) var(--kc-l3) var(--kc-l3); border-width: 1px; background: var(--surface); }
.kc-bg-wahl-gross .kc-bg-wahl-karte.empfohlen { border: 2px solid var(--lime); background: linear-gradient(var(--rail-active), var(--rail-active)), var(--surface); }
.kc-bg-wahl-kopf { display: grid; justify-items: center; gap: var(--kc-l1); text-align: center; }
.kc-bg-wahl-kopf h2 { margin: var(--kc-l1) 0 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
.kc-bg-wahl-kopf p { margin: 0; font-size: 1.0625rem; color: var(--ink-soft); }
.kc-bg-wahl-kreis { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--rail-active); color: var(--lime); }
.kc-bg-wahl-kreis .ic { width: 38px; height: 38px; }
.kc-bg-wahl-gross .kc-bg-haken { gap: 10px; }
.kc-bg-wahl-gross .kc-bg-haken li { font-size: .9375rem; }
.kc-bg-frage .kc-bg-kopf p:not(.kc-bg-schrittzeile) { max-width: 62rem; }
.kc-bg-frage .kc-bg-railkarte { padding-block: var(--kc-l2); }
.kc-bg-wahl-gross .kc-bg-wahl-karte .btn { width: 100%; min-height: 52px; font-size: 1.0625rem; }
@media (max-width: 599px) { .kc-bg-wahl-gross .kc-bg-wahl-karte { padding: var(--kc-l4) var(--kc-l3) var(--kc-l3); } .kc-bg-wahl-kreis { width: 72px; height: 72px; } .kc-bg-wahl-kreis .ic { width: 32px; height: 32px; } }
/* Akzent zum Vergleich am Bild (Operator-Vorlagen: frühe Fassung blau, späte rot). Ohne das Attribut gilt die Hausfarbe. */
:root[data-akzent="blau"] { --lime: #0B5BD3; --lime-strong: #0947A8; --on-lime: #FFFFFF; --rail-active: rgba(11, 91, 211, .09); }
.kc-bg-teile { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-auto-rows: 1fr; }
/* Runde 2 Punkt 6: jede Karte füllt ihre Zeile — gleich hoch, egal wie der Titel umbricht. */
.kc-bg-teile > li { display: flex; min-width: 0; }
.kc-bg-teile > li > .kc-bg-teil-knopf { height: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-content: center; min-height: 76px; }
.kc-bg-teil-zeichen { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rail-active); color: var(--lime-strong); }
.kc-bg-teil-zeichen .ic { width: 18px; height: 18px; }
.kc-bg-teil-knopf { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--kc-l2); align-items: center; text-align: left;
  padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.kc-bg-teil-knopf .kc-bg-stufe-marke { grid-row: span 2; }
.kc-bg-teil-knopf b { font-size: .9375rem; }
.kc-bg-teil-knopf small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-teil-knopf:hover:not(:disabled) { border-color: var(--ink-faint); }
.kc-bg-teil-knopf:disabled { cursor: default; opacity: .6; }
.kc-bg-teile .fertig .kc-bg-stufe-marke { background: var(--good); border-color: var(--good); color: var(--on-lime); }
/* Benötigte Unterlagen (Befund 2026-09-23): im Zweierraster lagen lange
   Titel unter dem Knopf. Jetzt eine Zeile je Unterlage; unter 600 px steht
   der Knopf unter dem Text statt daneben. */
.kc-bg-dokraster { display: grid; gap: var(--kc-l2); }
.kc-bg-dok { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--kc-l1) var(--kc-l2);
  padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); }
.kc-bg-dok > .btn { grid-column: 2; justify-self: start; }
@media (min-width: 600px) {
  .kc-bg-dok { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kc-bg-dok > .btn { grid-column: auto; }
}
.kc-bg-dok > div { display: grid; gap: 2px; min-width: 0; }
.kc-bg-dok b { font-size: .9375rem; hyphens: auto; overflow-wrap: anywhere; }
.kc-bg-dok small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-dok.da { border-color: var(--good); }
.kc-bg-dok.da .kc-sym { color: var(--good); }

.kc-bg-profilgitter { display: grid; gap: var(--kc-l3); }
@media (min-width: 900px) { .kc-bg-profilgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-bg-profilkarte { display: flex; flex-direction: column; gap: var(--kc-l2); padding: var(--kc-l3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); min-width: 0; }
/* Der Knopf steht in jeder Karte unten rechts, auch wenn die Nachbarkarte länger ist. */
.kc-bg-profilkarte > .btn { align-self: flex-end; margin-top: auto; }
.kc-bg-profilkopf { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-l2); }
.kc-bg-profilkopf h3 { margin: 0; font-size: 1rem; }
.kc-bg-status { padding: 2px var(--kc-l1); border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.kc-bg-status.st-ok { background: var(--good-bg); color: var(--good); }
.kc-bg-status.st-warn { background: var(--warn-bg); color: var(--warn); }
.kc-bg-status.st-bad { background: var(--bad-bg); color: var(--bad); }
.kc-bg-kurz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--kc-l1) var(--kc-l2); margin: 0; font-size: .875rem; }
.kc-bg-kurz dt { color: var(--ink-faint); hyphens: auto; overflow-wrap: anywhere; }
.kc-bg-kurz dd { margin: 0; overflow-wrap: anywhere; }
.kc-bg-befunde { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: .875rem; }
.kc-bg-befunde .fehlt { color: var(--bad); }
.kc-bg-befunde .hinweis { color: var(--warn); }
.kc-bg-freigabe { margin-top: var(--kc-l4); border-color: var(--lime); box-shadow: inset 3px 0 0 var(--lime); }
.kc-bg-bestaetigen { display: flex; gap: var(--kc-l2); align-items: flex-start; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); }
.kc-bg-bestaetigen input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); flex: 0 0 auto; }
.kc-bg-bestaetigen label { font-size: .9375rem; line-height: 1.5; }

/* Antrags-Autopilot (pm-33996): ein Formular je Versicherer, Maße aus der Leiter. */
.kc-bg-formular { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) 0; border-top: 1px solid var(--line); }
.kc-bg-formular:first-of-type { border-top: 0; }
.kc-bg-formular-kopf { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bg-formular-kopf input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); flex: 0 0 auto; }
.kc-bg-formular-titel { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kc-bg-formular-zahlen { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l2); font-size: .875rem; }
.kc-bg-formular-aktionen { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: center; }
/* B4 (pm-33996): Angaben, die im Profil fehlen — eine Zeile, Sprung ins Profil. */
.kc-bg-formular-fehlt { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l2); align-items: center; justify-content: space-between; padding: var(--kc-l1) var(--kc-l2); border-radius: var(--r-sm, 10px); background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: .9375rem; }
.kc-bg-formular-fehlt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kc-bg-formular-hash { font-family: ui-monospace, monospace; }
/* pm-34032: bei 390 px drückte die einzeilige Statusmarke den Titel auf eine Buchstabenspalte
   (Bild zeile-vorab-390.png der Probe antrag-vorab-sicht, V7 misst die Breite). Der Kopf bricht jetzt um: reicht der Platz nicht, steht die Marke unter dem Titel. */
.kc-bg-formular-kopf { flex-wrap: wrap; }
.kc-bg-formular-titel { flex-basis: 12rem; }
/* pm-34032: Vorab-Selbstauskunft — kein Formular des Versicherers; der Satz steht an der Zeile. */
.kc-bg-formular-vorab { display: grid; gap: 2px; margin: 0; padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface-2); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.kc-bg-formular-details summary { cursor: pointer; font-size: .875rem; font-weight: 700; }
.kc-bg-formular-details ul { margin: var(--kc-l1) 0 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: .875rem; }

/* Stufe 5: Avalgeber wählen, gruppiert nach Art. */
.kc-bg-geberwahl { display: grid; gap: var(--kc-l2); }
.kc-bg-gebergruppe { border: 1px solid var(--line); border-radius: var(--r, 12px); }
.kc-bg-gebergruppe > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); cursor: pointer; }
.kc-bg-geberzeile { display: grid; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); border-top: 1px solid var(--line); }
.kc-bg-geberkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); }
.kc-bg-geberkopf input { width: 20px; height: 20px; accent-color: var(--lime); }
.kc-bg-geberkopf label { font-weight: 600; flex: 1 1 12rem; }
.kc-bg-geberdetails { display: grid; gap: var(--kc-l2); padding-left: var(--kc-l4); }

/* Tabellen der Anträge: mobil gestapelt mit Etikett je Zelle, ab 900 px Spalten. */
.kc-bg-tabelle { display: grid; min-width: 0; }
.kc-bg-tzeile { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-bg-tzeile.kopf { display: none; }
.kc-bg-tzelle { display: flex; gap: var(--kc-l1); align-items: center; min-width: 0; font-size: .9375rem; hyphens: auto; overflow-wrap: anywhere; }
.kc-bg-tzelle::before { content: attr(data-titel); flex: 0 0 9rem; color: var(--ink-faint); font-size: .875rem; }
.kc-bg-tzelle[data-titel=""]::before { display: none; }
.kc-bg-zahl { font-variant-numeric: tabular-nums; }
.kc-bg-tname { display: grid; gap: 2px; min-width: 0; }
.kc-bg-tname small { font-size: .875rem; color: var(--ink-faint); }
@media (min-width: 900px) {
  .kc-bg-tzeile, .kc-bg-tzeile.kopf { display: grid; grid-template-columns: minmax(0, 2.4fr) 8rem 8rem; align-items: center; gap: var(--kc-l2); }
  /* Letzte Spalte in Knopfbreite: der Knopf bestimmt sie, nicht ein Anteil. */
  .kc-bg-tabelle.mit-wahl .kc-bg-tzeile { grid-template-columns: minmax(0, 2fr) 8rem 7rem minmax(0, 1.4fr) 9.5rem; }
  .kc-bg-tzelle .kc-bg-zahl { white-space: nowrap; }
  .kc-bg-tzeile.kopf { padding-top: 0; font-size: .875rem; font-weight: 600; color: var(--ink-faint); }
  .kc-bg-tzelle::before { display: none; }
}

.kc-bg-zeit { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bg-zeit li { display: grid; gap: 2px; padding-left: var(--kc-l2); border-left: 2px solid var(--line); }
.kc-bg-zeit b { font-size: .9375rem; font-weight: 600; }
.kc-bg-zeit small { font-size: .875rem; color: var(--ink-faint); }

/* Stufe 8: Abrufe und Geber-Akte. */
.kc-bg-abruf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-bg-abruf > div:first-child { display: grid; gap: 2px; min-width: 0; }
.kc-bg-abruf small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-abruf-freigabe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); }
.kc-bg-abruf-freigabe input { width: 20px; height: 20px; accent-color: var(--lime); }
.kc-bg-abruf-freigabe label { flex: 1 1 14rem; font-size: .9375rem; }
.kc-bg-geberliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bg-geberliste li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--kc-l1); }
.kc-bg-verbunden { display: flex; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--good); border-radius: var(--r, 12px); background: var(--good-bg); }

/* Mobil randlos (R145): max-width, weil es die Ausnahme vom Grundstock ist. */
@media (max-width: 599px) {
  .kc-bg-karte, .kc-bg-railkarte, .kc-bg-kpis, .kc-bg-weg-karte, .kc-bg-wahl-karte, .kc-bg-bestaetigen, .kc-bg-profilkarte {
    margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; border-top: 0; }
  .kc-bg-fuss > div, .kc-bg-fuss > div:last-child { width: 100%; margin-left: 0; }
  .kc-bg-fuss .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 1024px) {
  .kc-bg-kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-bg-kopf h1 { font-size: 2.25rem; }
}

/* Zwei Funktionen, ein Layout (Operator 2026-09-25, Screen-Analyse
   docs/BUERGSCHAFT-SCREEN-ANALYSE.md): Kopf mit Kachel, Fuß mit Stand,
   Fortschrittskarte rechts, Übersicht mit Bild und zwei Bereichskarten. */
.kc-bg-kachel { display: flex; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.kc-bg-kachel > div { display: grid; gap: 2px; }
.kc-bg-kachel small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-kachel b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
/* Telefon: die Kachel im Kopf randlos (R145, Integration 0929) — nach der Grundregel, sonst gewinnt deren Rundung. */
@media (max-width: 599px) { .kc-bg-kachel { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; } }
.kc-bg-fuss > .kc-bg-fuss-stand { flex: 1 1 auto; justify-content: center; align-items: center; gap: var(--kc-l1); font-size: .875rem; color: var(--ink-faint); }
.kc-bg-fuss-stand:empty { display: none; }
.kc-bg-fuss-stand .ic { width: 16px; height: 16px; color: var(--good); }
.kc-bg-fortschritt { display: grid; gap: var(--kc-l1); }
.kc-bg-fortschritt b { font-size: .9375rem; }
.kc-bg-naechste { margin: 0; padding-left: 1.25rem; display: grid; gap: 4px; font-size: .9375rem; color: var(--ink-soft); }
.kc-bg-kurz { min-width: 0; }
.kc-bg-status.st-aus { background: var(--surface-3); color: var(--ink-faint); }

/* Übersicht nach der Vorlage des Operators (2026-09-26, pm-33945, Bild
   „Bürgschaften Portal“ 1536 × 1024): Maße aus dem Bild gemessen, auf die
   Leiter gerundet. Inhalt der Kopfzeilen fluchtet mit dem Karteninhalt
   (Kartenrand + --kc-l3), vier Schritt-Karten gleich hoch mit Knöpfen auf
   einer Linie, Kennzahlen in fünf gleichen Zellen, unten zwei gleich hohe
   Karten. Mobil (< 600 px) randlos bis zur Fensterkante (R145). */
.kc-bg-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.kc-bg-start { --kc-bg-rand: 34px; --kc-bg-fach: 52px; gap: var(--kc-l3); position: relative; }
@media (max-width: 1180px) { .kc-bg-start { --kc-bg-rand: 20px; } }
.kc-bg-start h2 { margin: 0; letter-spacing: -.01em; }

/* Kopf mit Fassade als hellem, ausgeblendetem Grund */
/* Der Kopf reicht mit negativem Außenrand bis an den Rand der Schale, damit
   das Bild dort anliegt; waagerecht wird geschnitten (kein Seitenrollen),
   senkrecht läuft das Bild unter die Karten aus. */
.kc-bg-start-kopf { position: relative; display: grid; min-height: 150px; align-content: start; margin-right: calc(-1 * var(--kc-bg-rand));
  padding: var(--kc-l2) var(--kc-bg-rand) 0 var(--kc-l3); overflow-x: clip; }
.kc-bg-start-bild { position: absolute; z-index: 0; margin: 0; top: calc(-1 * var(--kc-l5)); right: 0; width: min(620px, 46%); height: 320px;
  pointer-events: none; opacity: .72;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%), linear-gradient(to bottom, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 55%), linear-gradient(to bottom, #000 45%, transparent 100%); mask-composite: intersect; }
.kc-bg-start-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.kc-bg-start-text { position: relative; z-index: 1; display: grid; gap: 0; min-width: 0; max-width: 700px; }
.kc-bg-start-krume { display: flex; align-items: center; gap: var(--kc-l1); margin-bottom: var(--kc-l1); color: var(--lime); font-size: .9375rem; font-weight: 700; }
.kc-bg-start-krume .ic { width: 18px; height: 18px; stroke-width: 2.2; margin-left: calc(-1 * var(--kc-l3)); }
.kc-bg-start-text h1 { margin: 0; font-size: 2.625rem; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.kc-bg-start-text p { margin: 10px 0 0; max-width: 680px; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.kc-bg-start-marke { position: absolute; z-index: 1; top: 76px; right: calc(var(--kc-bg-rand) + var(--kc-l3)); display: flex; align-items: center; gap: var(--kc-l2);
  width: 240px; padding: var(--kc-l2) var(--kc-l3) var(--kc-l2) var(--kc-l2); background: var(--surface); border-radius: var(--r-sm, 10px);
  box-shadow: 0 1px 2px rgba(20, 22, 25, .06), 0 10px 30px rgba(20, 22, 25, .10); font-size: .875rem; line-height: 1.45; color: var(--ink); }
.kc-bg-start-marke .ic { flex: none; width: 36px; height: 36px; color: var(--lime); stroke-width: 1.8; }

/* Symbolfach: hellrot für Schritte, grau für Kennzahlen */
.kc-bg-start-fach { display: inline-grid; place-items: center; flex: none; width: var(--kc-bg-fach); height: var(--kc-bg-fach); border-radius: 12px;
  background: rgba(196, 11, 11, .09); color: var(--lime); }
.kc-bg-start-fach .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.kc-bg-start-fach.grau { --kc-bg-fach: 48px; background: var(--surface-3); color: var(--ink-soft); }

/* Vier Schritt-Karten mit Pfeilen */
.kc-bg-start-karte, .kc-bg-start-zahlen, .kc-bg-start-karte2 { position: relative; z-index: 1; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r, 14px); box-shadow: 0 1px 2px rgba(20, 22, 25, .04); }
.kc-bg-start-wege { position: relative; z-index: 1; display: grid; gap: var(--kc-l3); grid-template-columns: minmax(0, 1fr); }
.kc-bg-start-pfeil { display: none; }
.kc-bg-start-karte { display: grid; grid-template-rows: auto auto 1fr auto; align-content: stretch; padding: var(--kc-l3); }
.kc-bg-start-karte > .kc-bg-start-fach { margin-bottom: var(--kc-l2); }
.kc-bg-start-karte h2 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.kc-bg-start-karte p { margin: var(--kc-l1) 0 12px; color: var(--ink-faint); font-size: 1rem; line-height: 1.45; }
.kc-bg-start-knopf.btn { width: 100%; justify-content: center; }
.kc-bg-start-karte .btn { align-self: end; }
@media (min-width: 600px) { .kc-bg-start-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Raster-Regel (oktogen-verifier 421b9cb V-P3-3): die vier Schritt-Karten
   bleiben auf jeder Breite 2 × 2 — die frühere Reihe mit vier Karten und
   Pfeilen ab 1400 px entfällt. Gleiche Höhe je Reihe: stretch (Vorgabe). */

/* Kennzahlen-Leiste: fünf gleiche Zellen, Trennlinien dazwischen */
.kc-bg-start-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-bg-start-zahl { display: flex; align-items: center; gap: var(--kc-l2); min-width: 0; padding: 20px var(--kc-l2) 20px var(--kc-l3); }
.kc-bg-start-zahl > div { display: grid; gap: 2px; min-width: 0; }
.kc-bg-start-zahl b { font-size: 1.375rem; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-bg-start-zahl span:not(.kc-bg-start-fach) { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-start-mehr { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--kc-l1); min-height: 44px; padding: var(--kc-l2);
  border-top: 1px solid var(--line); color: var(--ink); font-size: .8125rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
.kc-bg-start-mehr .ic { width: 18px; height: 18px; flex: none; }
.kc-bg-start-mehr:hover span, .kc-bg-start-mehr:focus-visible span { text-decoration: underline; }
.kc-bg-start-mehr:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: var(--r-sm, 10px); }
@media (min-width: 600px) and (max-width: 1279px) {
  .kc-bg-start-zahl:nth-child(even) { border-left: 1px solid var(--line); }
  .kc-bg-start-zahl:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* Fünf Zellen in einer Reihe wie im Bild erst, wenn jede Zelle Platz für
   ihren Wert hat (ab 1500 px); darunter vier (ab 1280 px) oder zwei Zellen, Verweis als Fußzeile. */
@media (min-width: 1280px) {
  .kc-bg-start-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kc-bg-start-zahl + .kc-bg-start-zahl { border-left: 1px solid var(--line); }
}
@media (min-width: 1500px) {
  .kc-bg-start-zahlen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kc-bg-start-zahl span:not(.kc-bg-start-fach) { white-space: nowrap; }
  .kc-bg-start-mehr { grid-column: auto; border-top: 0; border-left: 1px solid var(--line); }
}

/* Unten: So funktioniert es | Ihre Vorteile, gleich hoch */
.kc-bg-start-unten { display: grid; gap: var(--kc-l3); }
@media (min-width: 1024px) { .kc-bg-start-unten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-bg-start-karte2 { display: grid; align-content: start; gap: 16px; padding: 20px var(--kc-l3); }
.kc-bg-start-karte2 h2 { font-size: 1.1875rem; font-weight: 800; }
.kc-bg-start-folge { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kc-bg-start-folge li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--kc-l2); align-items: start; }
.kc-bg-start-folge li:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 40px; bottom: -6px; width: 1px; background: var(--line-strong); }
.kc-bg-start-nr { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--ink); font-size: .9375rem; font-weight: 700; }
.kc-bg-start-nr .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.ist-jetzt > .kc-bg-start-nr { background: var(--lime); color: var(--on-lime); }
.ist-erledigt > .kc-bg-start-nr { background: rgba(196, 11, 11, .09); color: var(--lime); }
.kc-bg-start-folge li > div { display: grid; gap: 2px; padding-top: 6px; min-width: 0; }
.kc-bg-start-folge b { font-size: .9375rem; font-weight: 700; }
.kc-bg-start-folge span { letter-spacing: -.015em; font-size: .8125rem; line-height: 1.45; color: var(--ink-soft); }
.kc-bg-start-haken { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kc-bg-start-haken li { display: flex; align-items: flex-start; gap: var(--kc-l2); font-size: .90625rem; line-height: 1.4; }
.kc-bg-start-haken .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lime); stroke-width: 2.4; }
.kc-bg-start-frage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); margin-top: var(--kc-l1); padding: 12px var(--kc-l3);
  border-radius: var(--r-sm, 10px); background: rgba(196, 11, 11, .07); }
.kc-bg-start-frage > .ic { flex: none; width: 28px; height: 28px; color: var(--lime); }
.kc-bg-start-frage > div { flex: 1 1 12rem; display: grid; gap: 2px; min-width: 0; }
.kc-bg-start-frage b { font-size: .9375rem; }
.kc-bg-start-frage span { letter-spacing: -.01em; font-size: .8125rem; color: var(--ink-soft); }
.kc-bg-start-frage .kc-bg-start-knopf.btn { width: auto; padding-inline: var(--kc-l2); background: var(--surface); }

/* Mobil: Karten untereinander, randlos; Bild und Karte in den Fluss */
@media (max-width: 899px) {
  /* Mobil reicht der Kopf auch links bis an die Kante (Schnitt waagerecht),
     sonst schneidet er die randlose Kachel „Starke Partnerschaften“. */
  .kc-bg-start-kopf { margin-left: calc(-1 * var(--kc-bg-rand)); padding-left: var(--kc-bg-rand); min-height: 0; }
  .kc-bg-start-krume .ic { margin-left: 0; }
  .kc-bg-start-bild { width: 70%; height: 240px; opacity: .5; }
  .kc-bg-start-marke { position: relative; top: auto; right: auto; width: auto; justify-self: start; margin-top: var(--kc-l3); }
  .kc-bg-start-text h1 { font-size: 2.125rem; }
  .kc-bg-start-text p { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
  .kc-bg-start-bild { width: 85%; }
  .kc-bg-start-karte, .kc-bg-start-zahlen, .kc-bg-start-karte2 { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; box-shadow: none; }
  .kc-bg-start-marke { justify-self: stretch; margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-block: 1px solid var(--line); box-shadow: none; }
  .kc-bg-start-zahlen { padding-inline: 0; }
  .kc-bg-start-zahlen { grid-template-columns: minmax(0, 1fr); }
  .kc-bg-start-zahl { padding: var(--kc-l2) 20px; gap: var(--kc-l2); }
  .kc-bg-start-zahl + .kc-bg-start-zahl { border-top: 1px solid var(--line); }
  .kc-bg-start-frage .kc-bg-start-knopf.btn { width: 100%; }
}

.kc-bg-zeitplan { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l3); }
.kc-bg-zeitplan li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--kc-l2); row-gap: 2px; align-items: center; }
.kc-bg-zeitplan li > b { font-size: 1rem; }
.kc-bg-zeitplan li > small { grid-column: 2; font-size: .875rem; color: var(--ink-faint); }
.kc-bg-zeitplan li.fertig > .kc-bg-stufe-marke { background: var(--good); border-color: var(--good); color: var(--on-lime); }
.kc-bg-sprungliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-bg-sprungliste li { display: grid; gap: 2px; padding: var(--kc-l1) 0; border-bottom: 1px solid var(--line); }
.kc-bg-sprungliste li:last-child { border-bottom: 0; }
.kc-bg-sprungliste small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-sprungliste a { color: var(--ink); font-weight: 600; }
.kc-bg-fehlend { border-color: var(--bad); }
.kc-bg-aktionsliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
/* Operator 2026-09-29 (pm-33996): Symbol und Text linksbündig (vorher stand
   der Text bei einem Symbol vorn ganz rechts). */
.kc-bg-aktionsliste .btn { justify-content: flex-start; text-align: left; }

.kc-bg-reiterhuelle { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-bg-reiter { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-bg-reiter-knopf { min-height: 44px; padding: 0 var(--kc-l2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-soft); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.kc-bg-reiter-knopf[aria-selected="true"] { border-color: var(--lime); background: var(--rail-active); color: var(--lime-strong); }
.kc-bg-reiter-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bg-vorschau-link { margin-top: 2px; font-size: .875rem; color: var(--lime-strong); }
.kc-bg-vorschau-teil { display: grid; gap: var(--kc-l1); padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-bg-vorschau-teil h3 { margin: 0; font-size: 1rem; font-weight: 700; }

.kc-bg-spur { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bg-spur li { display: flex; align-items: center; gap: var(--kc-l2); color: var(--ink-faint); }
.kc-bg-spur li b { font-size: .9375rem; }
.kc-bg-spur li.fertig { color: var(--ink); }
.kc-bg-spur li.fertig > .kc-bg-stufe-marke { background: var(--good); border-color: var(--good); color: var(--on-lime); }
.kc-bg-spur li.aktuell { color: var(--ink); }
.kc-bg-spur li.aktuell > .kc-bg-stufe-marke { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.kc-bg-spur li.achtung { color: var(--ink); }
.kc-bg-spur li.achtung > .kc-bg-stufe-marke { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
@media (min-width: 900px) {
  .kc-bg-spur { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .kc-bg-spur li { display: grid; justify-items: start; gap: var(--kc-l1); }
}
.kc-bg-hinweis { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-bg-hinweis.warn { border-color: var(--warn); background: var(--warn-bg); }
.kc-bg-hinweis p { margin: 0; }
@media print {
  .kc-bg-vorschau .btn, .kc-bg-fuss, .kc-bg-rail, .kc-bg-krumen { display: none !important; }
}

/* Verborgene Partner (Operator 2026-09-25, pm-33935: "alles blurry und auch
   nicht ansatzweise erkennen"). Unscharf ist nur neutraler Blindtext — der
   echte Name kommt vom Dienst gar nicht erst. Dieselben sieben Zeilen wie
   jede Partnerkarte, damit das Raster fluchtet. */
.kc-blind { display: grid; gap: 4px; filter: blur(5px); user-select: none; pointer-events: none; color: var(--ink-soft); }
.kc-blind > span { display: block; font-size: .95rem; line-height: 1.55; white-space: nowrap; overflow: hidden; }
.kc-blind-logo > span { font-family: var(--disp, inherit); font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.kc-blind-meta > span { font-size: .875rem; }
.kc-blind-knopf, .kc-blind-weg { filter: blur(3px); user-select: none; pointer-events: none; }
.kc-partner-verborgen { background: var(--surface-2); }
.kc-verborgen-hinweis { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .9375rem; color: var(--ink); }
.kc-verborgen-hinweis .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.kc-verborgen-leiste { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: var(--kc-l2) var(--kc-l3);
  border: 1px solid var(--line-strong); border-radius: var(--r, 12px); background: var(--surface-3); color: var(--ink); font-size: .9375rem; }
.kc-verborgen-leiste .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.kc-dr-anbieter:disabled { cursor: default; }
.kc-bg-verborgen { display: inline-flex; align-items: center; gap: 6px; }
.kc-bg-verborgen .ic { width: 14px; height: 14px; }
/* Mobil randlos (R145): unter 600 px reichen Karten und Leisten bis zur Fensterkante. */
@media (max-width: 599px) {
  .kc-partner, .kc-partner-filter, .kc-verborgen-leiste { margin-inline: -20px; border-radius: 0; border-inline: 0; }
}

/* Bürgschafts-Schublade von rechts (pm-34002, S1.3/1.4; public/portal-bg-schublade.js).
   Gerüst ist das Hausbauteil .sidep/.sidep-scrim aus cf-chrome.css; hier nur
   die Ergänzungen mit Präfix kc-bgs. Farben aus den Token der Schale, hell
   und dunkel ohne eigene Werte; Abstände aus der Leiter. */
.kc-bgs-leiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l1); min-width: 0; }
.kc-bgs-leiste .btn { justify-content: center; min-width: 0; height: 38px; white-space: nowrap; text-align: center; padding-inline: 10px; background: var(--surface); border-color: var(--line); color: var(--ink); }
.kc-bgs-leiste .btn:hover, .kc-bgs-leiste .btn:focus-visible { border-color: var(--line-strong); background: var(--surface-2); }
.kc-bgs-leiste .btn .ic { flex: none; width: 16px; height: 16px; }
@media (min-width: 600px) { .kc-bgs-leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sidep.kc-bgs { height: 100dvh; max-height: 100dvh; }
.sidep.kc-bgs[hidden], .sidep-scrim.kc-bgs-scrim[hidden] { display: none; }
html.kc-bgs-offen { overflow: hidden; }
.kc-bgs .sidep-h h3 { margin: 0; }
.kc-bgs-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.kc-bgs-reiter button { min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.kc-bgs-reiter button:hover { color: var(--ink); border-color: var(--line-strong); }
.kc-bgs-reiter button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--lime); }
.kc-bgs-b { padding-top: var(--kc-l2); }
.kc-bgs-stapel { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-bgs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l1); }
.kc-bgs-kpi { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.kc-bgs-kpi b { font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.kc-bgs-kpi span { font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-karte { display: grid; gap: 10px; min-width: 0; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-bgs-karte h4 { margin: 0; font-size: 1rem; color: var(--ink); }
.kc-bgs-hinweis, .kc-bgs-text { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-bgs-meldung { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-meldung:empty { display: none; }
.kc-bgs-meldung[data-art="fehler"] { color: var(--bad); }
.kc-bgs-meldung[data-art="ok"] { color: var(--good); }
.kc-bgs-leer { display: grid; gap: 4px; padding: var(--kc-l2); border: 1px dashed var(--line-strong); border-radius: 12px; }
.kc-bgs-leer b { color: var(--ink); } .kc-bgs-leer p { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-geber, .kc-bgs-enth { display: grid; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.kc-bgs-geber:first-of-type, .kc-bgs-enth:first-of-type { border-top: 0; padding-top: 0; }
.kc-bgs-zeilenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.kc-bgs-zeilenkopf b { color: var(--ink); overflow-wrap: anywhere; }
.kc-bgs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-bgs-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); font-size: .875rem; }
.kc-bgs-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l1); margin: 0; }
.kc-bgs-zahlen div { min-width: 0; }
.kc-bgs-zahlen dt { font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-zahlen dd { margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.kc-bgs-balken { height: 6px; border-radius: 3px; background: var(--surface-3); }
.kc-bgs-balken span { display: block; height: 100%; border-radius: 3px; background: var(--lime); }
.kc-bgs-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.kc-bgs-zeile > div:first-child { display: grid; gap: 2px; min-width: 0; }
.kc-bgs-zeile small { color: var(--ink-soft); font-size: .875rem; overflow-wrap: anywhere; }
.kc-bgs-zeile b { color: var(--ink); overflow-wrap: anywhere; }
.kc-bgs-rechts { display: grid; justify-items: end; gap: 6px; }
.kc-bgs-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.kc-bgs-form { display: grid; gap: 10px; min-width: 0; }
.kc-bgs-form label { display: grid; gap: 4px; min-width: 0; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-form input:not([type="checkbox"]), .kc-bgs-form select, .kc-bgs-form textarea, .kc-bgs-karte > label select {
  box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; }
.kc-bgs-karte > label { display: grid; gap: 4px; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-form label.kc-bgs-haken { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; color: var(--ink); }
.kc-bgs-eck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--kc-l1); margin: 0; }
.kc-bgs-eck div { min-width: 0; } .kc-bgs-eck dt { font-size: .875rem; color: var(--ink-soft); } .kc-bgs-eck dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kc-bgs-zugang { display: grid; gap: 8px; justify-items: start; }
.kc-bgs-entwurf { margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.kc-bgs-vorlagen { margin: 0; padding-left: 1.2em; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-verlauf { display: grid; margin: 0; padding: 0; list-style: none; }
.kc-bgs-verlauf li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.kc-bgs-verlauf li:first-child { border-top: 0; }
.kc-bgs-verlauf time, .kc-bgs-verlauf small { font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-verlauf span { color: var(--ink); overflow-wrap: anywhere; }
/* Mobil (R145, Wache MR-A/B/C): volle Breite, randlos; Karten bis zur Fensterkante, Rundung 0. */
@media (max-width: 599.98px) {
  .sidep.kc-bgs { width: 100%; border-left: 0; box-shadow: none; }
  .kc-bgs-reiter { padding-inline: 10px; }
  .kc-bgs-reiter button { padding-inline: 4px; }
  .kc-bgs-karte, .kc-bgs-stapel > .kc-bgs-leer { margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .kc-bgs-kpi { border-radius: 0; }
  .kc-bgs-kpis { margin-inline: -20px; }
  .kc-bgs-zahlen, .kc-bgs-kpis { gap: 6px; }
  .kc-bgs-leiste { margin-inline: 0; }
}

/* ================================================== pm-33945 (2026-09-25) ==
   Angebotsansicht, Rasterwahl, Unterlagen mit Vorschau, Glossar nach Vorlage.
   Alle Farben aus den Token oben; Kategorie-Töne des Glossars als Paare aus
   heller Fläche und dunkler Schrift (Kontrast >= 4,5:1, gemessen in
   test/angebot-ansicht-probe.mjs). */

/* Punkt 2 — die Knöpfe der Angebotsansicht: gleiche Spalten, gleiche Höhe.
   Vier nebeneinander ab 1280 px, darunter zwei, unter 600 px einer je Zeile
   in voller Breite. Jeder Knopf füllt seine Spalte. */
.kc-knopfreihe { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(var(--knopf-n, 4), minmax(0, 1fr)); max-width: 76rem; }
.kc-knopfreihe > .btn { width: 100%; min-width: 0; height: 44px; min-height: 44px; justify-content: center; }
.kc-knopfreihe > .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fünf Knöpfe (seit "An Leasing-Bank senden") passen erst ab 1600 px in
   eine Reihe, ohne dass Beschriftungen zweizeilig umbrechen — darunter drei
   gleiche Spalten. */
@media (max-width: 1599px) { .kc-knopfreihe[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .kc-knopfreihe, .kc-knopfreihe[data-n="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .kc-knopfreihe, .kc-knopfreihe[data-n="5"] { grid-template-columns: minmax(0, 1fr); } }

/* Punkt 3 — unter 600 px randlos bis zur Fensterkante (R145). */
@media (max-width: 599px) {
  .kc-beleg { margin-inline: -20px; }
  .kc-beleg .b9 { padding-inline: 16px; }
}

/* Druckansicht im Kundencenter (angebote/<nummer>/druck): nur die Seiten. */
body.kc-druckbild .rail, body.kc-druckbild .topbar, body.kc-druckbild .scrim { display: none !important; }
body.kc-druckbild .app { display: block; }
body.kc-druckbild .kc-main { max-width: none; }
body.kc-druckbild .kc-beleg .b9 { box-shadow: none; }
body.kc-druckbild, body.kc-druckbild #center, body.kc-druckbild #kc-main { background: var(--bg); }
body.kc-druckbild .kc-knopfreihe { margin-inline: auto; width: min(100%, 210mm); }
@media print {
  /* Die Seiten des Belegs sind fertige A4-Kästen (lib/angebotdokument.mjs,
     benannte Seite b9a4 ohne Rand): nichts vom Kundencenter darf sie
     verschieben — kein Abstand, kein Raster, kein Rand darüber. */
  body:has(.kc-beleg), body:has(.kc-beleg) #center, body:has(.kc-beleg) .app, body:has(.kc-beleg) .kc-main,
  body:has(.kc-beleg) .kc-beleg { margin: 0 !important; padding: 0 !important; gap: 0 !important; border: 0 !important; background: #ffffff !important; }
  body:has(.kc-beleg) .kc-main { display: block !important; }
}

/* Punkt 12 — Rasterwahl als Symbole und das Raster dazu. */
.kc-listenkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); flex-wrap: wrap; }
.kc-listenkopf-text { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.kc-rasterwahl { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.kc-rasterwahl-knopf { display: grid; place-items: center; width: 40px; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--ink-faint); cursor: pointer; }
.kc-rasterwahl-knopf:hover { color: var(--ink); background: var(--surface-2); }
.kc-rasterwahl-knopf[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.kc-rasterwahl-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (min-width: 600px) {
  .kc-block-kopf:has(> .kc-rasterwahl) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--kc-l2); }
  .kc-block-kopf > .kc-rasterwahl { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* n Spalten, solange jede mindestens --raster-min breit ist, sonst weniger. */
.kc-raster[data-raster] { --raster-gap: var(--kc-l3); gap: var(--raster-gap); max-width: none !important;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--raster-min, 16rem), calc((100% - (var(--raster-n, 3) - 1) * var(--raster-gap)) / var(--raster-n, 3) - 1px)), 1fr)) !important; }
/* Mit der Rasterwahl stehen die Arten untereinander, die Karten im Raster. */
.kc-angebote-raster:has(.kc-raster) { grid-template-columns: minmax(0, 1fr) !important; }
/* pm-33958 T3: die Karte selbst ist KEIN Größen-Container mehr —
   container-type schließt ihr Layout ein, und eine eingeschlossene Karte ist
   kein subgrid (gemessen: Knöpfe bis 17 px versetzt). Der Container ist das
   Raster; die Zahl richtet sich nach der Spaltenbreite (Rasterbreite / n). */
.kc-raster[data-raster] { container-type: inline-size; }
/* Spaltenbreite aus den TATSÄCHLICH stehenden Spalten (--raster-ist, gezählt
   in modul/raster-wahl.js), nicht aus der Wahl --raster-n. Wird an der
   Kernzahl eingesetzt, dort löst 100cqi gegen das Raster auf. */
.kc-raster[data-raster] { --raster-spalte: calc((100cqi - (var(--raster-ist, var(--raster-n, 3)) - 1) * var(--raster-gap, 22px)) / var(--raster-ist, var(--raster-n, 3))); }
/* 13 % der Inhaltsbreite einer Karte wie vorher (Spalte minus Innenabstand). */
.kc-raster .kc-paket-zahl { font-size: min(2.4rem, calc((var(--raster-spalte) - 2 * var(--kc-l4)) * .13)); }
.kc-raster .kc-paket h3, .kc-raster .kc-merkmal, .kc-raster .kc-paket-nr { overflow-wrap: anywhere; }
.kc-raster .kc-paket > *, .kc-raster .kc-paket-kopf > * { min-width: 0; }
.kc-raster .kc-paket-kopf { flex-wrap: wrap; }
@media (max-width: 599px) {
  .kc-rasterwahl { display: none; }
  /* Mobil randlos (R145): die Angebotskarten reichen bis zur Fensterkante. */
  .kc-paket { margin-inline: -20px; border-radius: 0; border-inline: 0; }
}

/* Punkt 7 — mit freigeschalteter oder gebuchter Finanzierung wird die
   Angebotskarte beim Überfahren markenrot, alle Schrift weiß (6,2:1). */
.kc-paket[data-klickbar="ja"] { cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) {
  background: var(--lime); border-color: var(--lime); box-shadow: none; color: var(--on-lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) :where(*) { color: var(--on-lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) :is(.kc-sym, .chip, .kc-rabatt, .kc-paket-band) {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); color: var(--on-lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .btn-ghost {
  background: transparent; border-color: rgba(255, 255, 255, .8); color: var(--on-lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .btn-primary {
  background: var(--on-lime); color: var(--lime-strong); box-shadow: none; }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .btn-primary :where(*) { color: var(--lime-strong); }

/* Punkt 18 — Unterlagen: zwei Reiter, Karten mit Vorschau der ersten Seite. */
.kc-reiter { display: flex; flex-wrap: wrap; gap: var(--kc-l1); border-bottom: 1px solid var(--line); }
.kc-reiter-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 var(--kc-l2); margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.kc-reiter-knopf .ic { width: 18px; height: 18px; }
.kc-reiter-knopf:hover { color: var(--ink); }
.kc-reiter-knopf[aria-current="page"] { color: var(--ink); border-bottom-color: var(--lime); }
.kc-reiter-zahl { font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); }
.kc-unterlagen-gitter { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.kc-unterlage { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); min-width: 0; }
.kc-unterlage-bild { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(15rem, 26vw, 22rem); padding: var(--kc-l2);
  border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0; background: var(--surface-3); cursor: zoom-in; }
.kc-unterlage-bild img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 1px 6px rgba(19, 17, 26, .12); background: #ffffff; }
.kc-unterlage-bild:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
/* D22: in zwei Spalten ist die Karte breit genug für ein größeres Blatt. */
.kc-raster[data-raster="2"] .kc-unterlage-bild { height: clamp(18rem, 30vw, 30rem); }
.kc-unterlage-text { display: grid; gap: 6px; align-content: start; padding: var(--kc-l3); min-width: 0; }
.kc-unterlage-name { overflow-wrap: anywhere; line-height: 1.4; }
.kc-unterlage-akt { display: flex; flex-wrap: wrap; gap: var(--kc-l1); margin-top: var(--kc-l1); }
.kc-raster[data-raster="1"] .kc-unterlage { grid-template-columns: 11rem minmax(0, 1fr); grid-template-rows: none; }
.kc-raster[data-raster="1"] .kc-unterlage-bild { border-bottom: 0; border-right: 1px solid var(--line); border-radius: var(--r-lg, 16px) 0 0 var(--r-lg, 16px); }
@media (max-width: 599px) {
  .kc-reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .kc-reiter-knopf { justify-content: center; text-align: center; padding: 8px 6px; font-size: .9rem; }
  .kc-unterlage { margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .kc-unterlage-bild { border-radius: 0; height: 20rem; }
  .kc-raster[data-raster="1"] .kc-unterlage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .kc-raster[data-raster="1"] .kc-unterlage-bild { border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* Die große Vorschau (public/modul/dokument-vorschau.js). */
body.kc-vorschau-offen { overflow: hidden; }
.kc-vorschau { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: var(--kc-l3); background: rgba(19, 17, 26, .72); }
.kc-vorschau-kasten { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 64rem); height: 100%; max-height: 100%;
  background: var(--surface); border-radius: var(--r-lg, 16px); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.kc-vorschau-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); border-bottom: 1px solid var(--line); }
.kc-vorschau-titel { flex: 1 1 14rem; overflow-wrap: anywhere; }
.kc-vorschau-zaehler { font-size: .9rem; color: var(--ink-soft); }
.kc-vorschau-kopf .kc-vorschau-akt { margin-top: 0; }
.kc-vorschau-kasten.mit-fuss { grid-template-rows: auto minmax(0, 1fr) auto; }
.kc-vorschau-fuss { display: flex; justify-content: center; padding: var(--kc-l1) var(--kc-l3); border-top: 1px solid var(--line); }
.kc-vorschau-fuss .kc-knopfleiste { margin-top: 0; }
.kc-vorschau-kasten.mit-fuss .kc-vorschau-flaeche { border-radius: 0; }
.kc-vorschau-flaeche { overflow: auto; min-height: 0; overscroll-behavior: contain; display: grid; justify-items: center; align-content: start; gap: var(--kc-l3); padding: var(--kc-l3); background: var(--surface-3); border-radius: 0 0 var(--r-lg, 16px) var(--r-lg, 16px); }
.kc-vorschau-bild { display: block; max-width: 100%; height: auto; background: #ffffff; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.kc-vorschau-bild.ist-wartend { width: min(100%, 56rem); aspect-ratio: 210 / 297; }
.kc-vorschau-flaeche:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: -2px; }
.kc-vorschau-leer { max-width: 30rem; text-align: center; color: var(--ink-soft); }
/* PDF-Unterlage bearbeiten (public/portal-dok-bearbeiten.js, Operator 2026-10-01). */
.kc-dokb .kc-dokb-kasten { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.kc-dokb-oben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); padding: var(--kc-l1) var(--kc-l3); border-bottom: 1px solid var(--line); }
.kc-dokb-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-dokb-werkzeuge .btn.on { border-color: var(--lime); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 35%, transparent); }
.kc-dokb-hinweis { font-size: .875rem; color: var(--ink-soft); }
.kc-dokb-flaeche { justify-items: stretch; }
.kc-dokb-seite { display: grid; gap: var(--kc-l1); width: min(100%, 52rem); margin-inline: auto; }
.kc-dokb-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-l1); }
.kc-dokb-seitenkopf .kc-knopfleiste { margin-top: 0; }
.kc-dokb-rahmen { display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
.kc-dokb-dreher { position: relative; width: 100%; background: #ffffff; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.kc-dokb-bild { display: block; width: 100%; height: 100%; }
.kc-dokb-schicht { position: absolute; inset: 0; }
.kc-dokb[data-werkzeug="text"] .kc-dokb-schicht { cursor: text; }
.kc-dokb[data-werkzeug="unterschrift"] .kc-dokb-schicht { cursor: crosshair; }
.kc-dokb-seite.ist-entfernt .kc-dokb-dreher { opacity: .28; filter: grayscale(1); }
.kc-dokb-seite.ist-entfernt .kc-dokb-schicht { pointer-events: none; }
.kc-dokb-marke { position: absolute; display: flex; align-items: flex-start; gap: 2px; outline: 1px dashed var(--lime); outline-offset: 2px; }
.kc-dokb-marke img { display: block; width: 100%; height: auto; }
.kc-dokb-text { min-width: 4rem; padding: 0; border: 0; background: color-mix(in srgb, #ffffff 82%, transparent); color: #121c54; font-family: Helvetica, Arial, sans-serif; line-height: 1; }
.kc-dokb-marke-weg { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -24px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--bad); cursor: pointer; }
.kc-dokb-marke-weg .ic { width: 12px; height: 12px; }
.kc-dokb-formular { width: min(100%, 52rem); margin-inline: auto; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); }
.kc-dokb-formular > summary { font-weight: 800; cursor: pointer; }
.kc-dokb-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--kc-l2); margin-top: var(--kc-l2); }
.kc-dokb-feld { display: grid; gap: 4px; font-size: .875rem; min-width: 0; }
.kc-dokb-feld > span { color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-dokb-feld input[type="text"], .kc-dokb-feld textarea, .kc-dokb-feld select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-btn-sm, 10px); background: var(--surface); color: var(--ink); font: inherit; }
.kc-dokb-haken { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.kc-dokb-haken input { width: 20px; height: 20px; accent-color: var(--lime); }
.kc-dokb-fuss { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--kc-l2); }
.kc-dokb-sig { width: min(100%, 40rem); }
.kc-dokb-zus { width: min(100%, 36rem); }
.kc-dokb-zus-liste { display: grid; gap: var(--kc-l1); max-height: 45vh; overflow: auto; margin-bottom: var(--kc-l3); }
.kc-dokb-zus-zeile { display: grid; grid-template-columns: auto 1.6rem minmax(0, 1fr); align-items: center; gap: var(--kc-l1); padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r-btn-sm, 10px); cursor: pointer; }
.kc-dokb-zus-zeile.on { border-color: var(--lime); }
.kc-dokb-zus-zeile input { width: 20px; height: 20px; accent-color: var(--lime); }
.kc-dokb-zus-nr { font-weight: 800; text-align: center; }
.kc-dokb-zus-name { overflow-wrap: anywhere; }
.kc-dokb-zus .kc-dokb-feld { margin-bottom: var(--kc-l3); }
.kc-unterlagen-werkzeug { display: flex; justify-content: flex-end; margin-bottom: var(--kc-l2); }
/* Dokument im Rahmen (modul/dokument-vorschau.js rahmenÖffnen): die Fläche
   trägt das Blatt als iframe, A4 in voller Breite der Ebene. */
.kc-rahmen .kc-vorschau-kasten { width: min(100%, 60rem); }
.kc-rahmen-flaeche { display: block; min-height: 0; padding: 0; overflow: hidden; }
.kc-rahmen-blatt { display: block; width: 100%; height: 100%; border: 0; background: var(--surface-3); border-radius: 0 0 var(--r-lg, 16px) var(--r-lg, 16px); }
@media (max-width: 599px) {
  .kc-vorschau { padding: 0; }
  .kc-vorschau-kasten { border-radius: 0; }
  .kc-vorschau-flaeche { padding: 0; border-radius: 0; }
  .kc-rahmen-blatt { border-radius: 0; }
  .kc-vorschau-akt { width: 100%; }
}

/* Punkt 20 — Glossar nach der Vorlage dbl9-Glossar.png: Kopf mit Suche,
   Kategorien mit Anzahl, Liste links, Begriff rechts. */
/* Glossar — kompakt (pm-33952, G1): Schrift, Abstände und Kartenhöhen eine
   Stufe kleiner; gemessen in test/glossar-ansicht-probe.mjs (vorher/nachher). */
.kc-gl { display: grid; gap: var(--kc-l2); }
.kc-gl-kopf { display: grid; gap: var(--kc-l2); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1100px) { .kc-gl-kopf { grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); } }
.kc-gl-titel h2 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.kc-gl-titel p { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.kc-gl-suche { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: text; }
.kc-gl-suche .ic { width: 17px; height: 17px; color: var(--ink-soft); flex: none; }
/* G3: das Feld trägt keinen eigenen Rahmen, keinen Fokusrahmen und keine
   Systemdarstellung — der Kasten zeigt den Fokus (focus-within). */
.kc-gl-suche input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: .9rem; color: var(--ink); }
.kc-gl-suche input:focus, .kc-gl-suche input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.kc-gl-suche input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset; -webkit-text-fill-color: var(--ink); }
.kc-gl-suche:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19, 17, 26, .08); }
.kc-gl-kbd { flex: none; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1.2; color: var(--ink-soft); }
/* G5: Kategorien in EINER Zeile, waagrecht rollbar, nie umbrechen. */
.kc-gl-chipleiste { position: relative; display: flex; align-items: center; min-width: 0; }
.kc-gl-chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; flex: 1; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 2px 0; scroll-padding-inline: 40px; }
.kc-gl-chips::-webkit-scrollbar { display: none; }
.kc-gl-chipleiste::before, .kc-gl-chipleiste::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.kc-gl-chipleiste::before { left: 0; background: linear-gradient(to right, var(--surface) 30%, transparent); }
.kc-gl-chipleiste::after { right: 0; background: linear-gradient(to left, var(--surface) 30%, transparent); }
.kc-gl-chipleiste[data-links="ja"]::before, .kc-gl-chipleiste[data-rechts="ja"]::after { opacity: 1; }
.kc-gl-chip-pfeil { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 3px rgba(19, 17, 26, .12)); }
.kc-gl-chip-pfeil .ic { width: 16px; height: 16px; }
.kc-gl-chip-pfeil-links { left: 0; }
.kc-gl-chip-pfeil-rechts { right: 0; }
.kc-gl-chip-pfeil-rechts .ic { transform: rotate(180deg); }
.kc-gl-chip-pfeil:hover { border-color: var(--ink); }
.kc-gl-chipleiste:not([data-links="ja"]) .kc-gl-chip-pfeil-links, .kc-gl-chipleiste:not([data-rechts="ja"]) .kc-gl-chip-pfeil-rechts { display: none; }
.kc-gl-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.kc-gl-chip:hover { border-color: var(--ink-faint); }
.kc-gl-chip:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.kc-gl-chip-zahl { padding: 1px 6px; border-radius: 999px; background: var(--surface-3); font-size: .72rem; color: var(--ink-soft); }
.kc-gl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kc-gl-chip[aria-pressed="true"] .kc-gl-chip-zahl { background: rgba(255, 255, 255, .18); color: var(--surface); }
.kc-gl-raster { display: grid; gap: var(--kc-l2); grid-template-columns: minmax(0, 1fr); align-items: start; }
.kc-gl-liste, .kc-gl-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); min-width: 0; }
.kc-gl-liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); padding: 8px 12px 6px 16px; border-bottom: 1px solid var(--line); }
.kc-gl-anzahl { font-size: .86rem; color: var(--ink-soft); font-weight: 600; }
.kc-gl-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); }
.kc-gl-sort .ci-auswahl .cidd-btn { min-width: 6.5rem; }
.kc-gl-sort .ci-auswahl .cidd-menu { left: auto; right: 0; }
.kc-gl-eintraege { list-style: none; margin: 0; padding: 4px 6px 6px; display: grid; }
.kc-gl-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.kc-gl-eintrag .kc-sym { width: 30px; height: 30px; border-radius: 9px; }
.kc-gl-eintrag .kc-sym .ic { width: 16px; height: 16px; }
.kc-gl-eintrag:hover { background: var(--surface-2); }
.kc-gl-eintrag[aria-current="true"] { background: rgba(196, 11, 11, .06); box-shadow: inset 3px 0 0 var(--lime); }
.kc-gl-eintrag:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.kc-gl-eintrag-text { display: grid; gap: 1px; min-width: 0; }
.kc-gl-eintrag-text b { font-size: .9rem; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.kc-gl-eintrag-text span { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-gl-pfeil { width: 15px; height: 15px; color: var(--ink-faint); transform: rotate(180deg); }
.kc-gl-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; background: #F1F0F4; color: #4A4756; }
.kc-gl-tag[data-kategorie="kredit"] { background: #E6EFFA; color: #0D4A80; }
.kc-gl-tag[data-kategorie="leasing"] { background: #E7F4EC; color: #1B5E34; }
.kc-gl-tag[data-kategorie="factoring"] { background: #FBF0DC; color: #7A4B00; }
.kc-gl-tag[data-kategorie="buergschaft"] { background: #F0E9FB; color: #5B2A99; }
.kc-gl-tag[data-kategorie="bonitaet"] { background: #E5F4F2; color: #0F5C56; }
.kc-gl-tag[data-kategorie="unterlagen"] { background: #EEF0F3; color: #3B4250; }
.kc-gl-tag[data-kategorie="fintech"] { background: #FFEFE3; color: #8A3A00; }
.kc-gl-tag[data-kategorie="recht"] { background: #FCE8E8; color: #A50909; }
.kc-gl-tag[data-kategorie="steuern"] { background: #E8EEFB; color: #1E3F99; }
.kc-gl-tag[data-kategorie="at_ch"] { background: #E8F2FF; color: #1D4F91; }
.kc-gl-tag-gross { font-size: .76rem; padding: 3px 10px; }
.kc-gl-detail { padding: var(--kc-l3); }
.kc-gl-zurueck { margin-bottom: var(--kc-l2); }
/* Kopf: Zeichen links, rechts Titel, Kurzfassung und darunter die Kategorie —
   die Kategorie als dritte Spalte drückte lange Titel auf Silbenbreite. */
.kc-gl-detail-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--kc-l2); align-items: start; }
.kc-gl-detail-kopf > .kc-sym { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; }
.kc-gl-detail-kopf > .kc-gl-tag { grid-column: 2; grid-row: 2; justify-self: start; }
.kc-gl-detail-text h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.kc-gl-detail-text h3:focus { outline: none; }
.kc-gl-detail-text p { margin: 3px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.kc-gl-reiter { display: flex; flex-wrap: wrap; column-gap: var(--kc-l2); margin: var(--kc-l3) 0 var(--kc-l2); border-bottom: 1px solid var(--line); }
/* Umbrechen statt seitlich rollen: mit dem Reiter "Beispiele" sind es bis zu vier, und ein angeschnittener Reiter wäre unsichtbar (Abnahme 56b5838). */
.kc-gl-reiter-knopf { min-height: 38px; padding: 0 4px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.kc-gl-reiter-knopf[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lime); }
.kc-gl-flaeche { display: grid; gap: var(--kc-l2); }
.kc-gl-erklaerung { margin: 0; font-size: .9rem; line-height: 1.6; }
.kc-gl-punkte { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.kc-gl-punkte > b { display: block; margin-bottom: 8px; font-size: .88rem; }
.kc-gl-punkte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kc-gl-punkte li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.kc-gl-punkte li .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--lime); }
.kc-gl-auch { margin: 0; font-size: .8rem; color: var(--ink-faint); }
.kc-gl-recht { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; }
.kc-gl-recht > .ic { width: 22px; height: 22px; color: var(--lime); }
.kc-gl-recht p { margin: 2px 0 0; color: var(--ink-soft); line-height: 1.45; }
.kc-gl-verwandt { display: grid; gap: 2px; }
.kc-gl-eintrag-klein { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (min-width: 900px) {
  /* Liste und Detail gleich hoch (Verifier 0930, D16): eine feste Höhe für
     beide Kästen, die Liste rollt in sich, das Detail ebenso. */
  .kc-gl-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch;
    --gl-hoehe: max(30rem, calc(100dvh - 15rem)); }
  .kc-gl-liste, .kc-gl-detail { height: var(--gl-hoehe); }
  .kc-gl-liste { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .kc-gl-eintraege { min-height: 0; overflow: auto; align-content: start; }
  .kc-gl-detail { overflow: auto; }
  .kc-gl-zurueck { display: none; }
}
/* Anbieter und Bürgschaftsarten (D16): Kopf wie die neuen Seiten, Reiter, Nachschlage-Bauform. */
.kc-bgk { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-bgk-reiter { margin-top: calc(-1 * var(--kc-l1)); }
.kc-bgk-reiter .kc-bga-reiter-knopf { gap: 8px; text-decoration: none; }
.kc-bgk-tool { flex: 0 0 auto; box-shadow: none; }
.kc-bgk-oben { display: grid; gap: var(--kc-l1); }
.kc-bgk .kc-gl-titel:empty { display: none; }
.kc-bgk .kc-gl-kopf { grid-template-columns: minmax(0, 1fr); }
.kc-ns-marken .chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .875rem; }
.kc-bgk-detail .kc-aval-akte { justify-self: start; }
.kc-gl-tag[data-kategorie="kern"] { background: #F0E9FB; color: #5B2A99; }
.kc-gl-tag[data-kategorie="verborgen"] { background: #F1F0F4; color: #4A4756; }
@media (max-width: 599.98px) {
  .kc-bgk-tool.btn { width: 100%; justify-content: center; }
  /* Mobil randlos: Hinweisflächen bis an die Fensterkante. */
  .kc-bgk .kc-ns-hinweis { margin-inline: -20px; border-radius: 0; border-inline: 0; }
}
/* Nachschlage-Bauform (modul/nachschlagen.js): Gruppenkopf in der Liste. */
.kc-ns-gruppe { display: flex; align-items: center; gap: 8px; padding: 12px 8px 6px; font-size: .875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); list-style: none; }
.kc-ns-gruppe:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); }
.kc-ns-detail-abschnitt { display: grid; gap: 6px; }
.kc-ns-detail-abschnitt > b { font-size: .875rem; font-weight: 700; color: var(--ink-soft); }
.kc-ns-detail-abschnitt p { margin: 0; font-size: .9rem; line-height: 1.55; }
.kc-ns-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-ns-logo { display: flex; align-items: center; gap: var(--kc-l2); min-height: 48px; }
/* Fester Kasten statt Näherungsmaß (Operator 2026-09-30): Breite und Höhe
   stehen vor dem Laden fest, das Bild passt sich ein — kein Sprung. */
.kc-ns-logo img { width: 160px; height: 48px; object-fit: contain; object-position: left center; flex: none; }
.kc-ns-wege { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kc-ns-wege a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--lime-strong); font-weight: 600; text-decoration: none; }
.kc-ns-wege a:hover { text-decoration: underline; }
.kc-ns-wege .ic { width: 16px; height: 16px; }
.kc-ns-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.kc-ns-hinweis .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 899px) {
  .kc-gl[data-ansicht="detail"] :is(.kc-gl-liste, .kc-gl-chipleiste, .kc-gl-kopf) { display: none; }
  .kc-gl[data-ansicht="liste"] .kc-gl-detail { display: none; }
}
@media (max-width: 599px) {
  .kc-gl-titel h2 { font-size: 1.4rem; }
  .kc-gl-kbd { display: none; }
  .kc-gl-chipleiste { margin-inline: -20px; }
  .kc-gl-chips { padding-inline: 20px; scroll-padding-inline: 20px; }
  .kc-gl-chip-pfeil-links { left: 6px; }
  .kc-gl-chip-pfeil-rechts { right: 6px; }
  .kc-gl-liste, .kc-gl-detail { margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .kc-gl-detail { padding: var(--kc-l3) 20px; }
  .kc-gl-eintrag { grid-template-columns: auto minmax(0, 1fr) auto; }
  /* Die Kategorie zeigt am Telefon das Zeichen links; die Marke als eigene
     Zeile machte jeden Eintrag gemessen 104 px hoch (G1). */
  .kc-gl-eintraege .kc-gl-eintrag > .kc-gl-tag { display: none; }
}
/* Konfigurator (pm-33945, public/modul/konfigurator.js): Produktwahl, Anzahl,
   Ergebnis im Leistungsverzeichnis des Kundencenters. Nur Token der Leiter. */
.kc-konfig-inhalt { display: grid; gap: var(--kc-l3); }
.kc-konfig-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: start; }
.kc-konfig-kopf h3 { margin: 0 0 4px; font-size: 1.1rem; }
.kc-konfig-staffel { margin: var(--kc-l1) 0 0; font-size: .875rem; color: var(--ink-faint); line-height: 1.5; }
.kc-konfig-reihe { align-items: end; }
.kc-konfig-reihe .inp { max-width: 14rem; }
.kc-konfig-wahl { display: inline-flex; align-items: center; gap: var(--kc-l1); min-height: 44px; font-size: .95rem; cursor: pointer; }
.kc-konfig-wahl input { width: 18px; height: 18px; accent-color: var(--lime); }
.kc-konfig-fuss { font-size: .875rem; color: var(--ink-faint); }
.kc-konfig-lv td:first-child { width: 55%; }
/* Abnahme 0e3236a P3-1: die Konfigurator-Zeilen reservieren keine Klammer-
   und Takt-Spannen (.kc-lv-takt); der Kopf "Gesamt" steht darum bündig an
   der Betragskante, nicht 4,1em davor (.kc-lv th.z:last-child weiter unten).
   Zwei Klassen am Tisch: schlägt die spätere Regel gleicher Reihenfolge. */
.kc-lv.kc-konfig-lv th.z:last-child { padding-right: 0; }
.kc-paket-kopf:has(.kc-chip-konfig) { flex-wrap: wrap; }
.kc-paket-kopf:has(.kc-chip-konfig) .kc-paket-nr { min-width: 0; flex: 1 1 12rem; }
.kc-chip-konfig { flex: none; white-space: nowrap; border: 1px solid var(--lime); color: var(--lime); background: var(--surface); font-weight: 700; }
@media (max-width: 599px) {
  .kc-konfig-reihe .inp { max-width: none; }
  .kc-konfig-lv td:first-child { width: auto; }
}
/* E-Mail & Anschreiben (pm-33945, public/portal-versand.js). Bauteile des
   Kundencenters (kc-block, kc-wahl, kc-zeile, kc-seg) — hier nur, was sie
   zusammenhält: Reiterleiste, Gruppen ohne Rahmen, die Mail-Vorschau als
   Blatt und die Listen. */
/* EIN Abstand für alle Kästen dieser Ansicht (Operator 2026-09-30: „Container
   überlappen mit Leisten und Eingabefeldern, Abstände einheitlich“). Gemessen
   standen Reiterleiste -> Inhalt 54 px (Außenabstand 22 + Lücke des Hauptteils
   32), Block-Kästen 22 px, Kartengruppen 14 px, Signatur und Knopfleiste 44 px.
   Jetzt: zwischen Kästen im Block überall --kc-l3, zwischen Leiste und
   Blöcken --kc-l4 wie im ganzen Kundencenter; kein Kasten trägt einen eigenen
   Außenabstand. Wache: test/email-versand-abstand-probe.mjs (U1–U4). */
.kc-post-reiter { margin: 0; }
.kc-post-inhalt { display: grid; gap: var(--kc-l4); }
.kc-post-inhalt .kc-block { gap: var(--kc-l3); }
.kc-post-inhalt .kc-block > * { margin-block: 0; }
.kc-post-inhalt .kc-wahl, .kc-post-inhalt .kc-form-reihe { gap: var(--kc-l3); }
.kc-post-inhalt .kc-block > div:empty { display: none; }
/* Felder aus Beschriftung und Eingabe (ohne Hinweis) belegen zwei statt drei
   Subgrid-Zeilen — sonst hing unter jeder Eingabe eine leere Hinweiszeile
   (14 px) und der sichtbare Abstand zur nächsten Reihe war größer als der
   zwischen den Kästen. */
.kc-post-inhalt .kc-form-reihe > .kc-feld:not(:has(> :nth-child(3))) { grid-row: span 2; }
.kc-post-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--kc-l2); }
.kc-post-gruppe legend { padding: 0; margin-bottom: var(--kc-l1); font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-post-quelle, .kc-post-etikett { margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-post-quelle:empty { display: none; }
.kc-post-mail { border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); padding: var(--kc-l3);
  overflow-wrap: anywhere; color: var(--ink); }
.kc-post-mail p { margin: 0 0 12px; }
.kc-post-vorschau:empty { display: none; }
.kc-post-oauth { display: grid; gap: var(--kc-l3); }
/* pm-33958 E1: drei Anbieter-Karten nebeneinander, gleich groß (subgrid:
   Kopf, Stand, Text, Knopf fluchten); unter 900 px untereinander. */
@media (min-width: 900px) {
  .kc-post-oauth { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); row-gap: 0; column-gap: var(--kc-l3); }
  .kc-post-oauth-karte { grid-row: span 4; grid-template-rows: subgrid; }
}
.kc-post-oauth-karte { display: grid; gap: var(--kc-l1); padding: var(--kc-l3); border: 1px dashed var(--line-strong); border-radius: var(--r, 12px); background: var(--surface-2); align-content: start; }
.kc-post-oauth-karte p { margin: 0; font-size: .875rem; color: var(--ink-faint); line-height: 1.5; }
.kc-post-oauth-karte[data-gewaehlt="ja"] { border-style: solid; border-color: var(--lime); background: var(--surface); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-post-oauth-kopf { display: flex; gap: var(--kc-l2); align-items: center; }
.kc-post-oauth-kopf b { font-size: 1.05rem; font-weight: 800; }
.kc-post-oauth-karte .kc-akt { margin: var(--kc-l1) 0 0; align-self: end; }
.kc-post-oauth-karte .kc-akt .btn { width: 100%; justify-content: center; }
.kc-post-folgt { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); }
.kc-post-server { display: grid; gap: var(--kc-l3); }
@media (min-width: 900px) { .kc-post-server { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-post-server fieldset { display: grid; gap: var(--kc-l2); align-content: start; margin: 0; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); min-width: 0; }
.kc-post-server legend { padding: 0 6px; font-weight: 800; font-size: .95rem; }
.kc-post-erkannt { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.kc-post-erkannt:empty { display: none; }
.kc-post-erkannt b { color: var(--ink); }
.kc-post-sicher { display: grid; gap: 6px; }
.kc-post-sicher > span { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-post-sicher .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); width: 100%; }
.kc-post-sicher .seg button { min-width: 0; white-space: nowrap; }
.kc-post-sicher-fest { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: var(--r, 12px); font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.kc-post-test { display: grid; gap: var(--kc-l1); margin: 0; padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--good, #15803d); border-radius: var(--r, 12px); background: var(--surface); }
.kc-post-test[data-ok="nein"] { border-color: var(--bad, #b91c1c); }
.kc-post-test-zeile { display: flex; gap: var(--kc-l2); align-items: center; font-size: .95rem; }
.kc-post-test-zeile .ic { width: 18px; height: 18px; flex: none; color: var(--good, #15803d); }
.kc-post-test[data-ok="nein"] .kc-post-test-zeile[data-ok="nein"] .ic { color: var(--bad, #b91c1c); }
.kc-post-liste { display: grid; gap: var(--kc-l3); }
.kc-post-zeile { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center; justify-content: space-between;
  padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); }
.kc-post-zeile .kc-wahl-txt { min-width: 0; flex: 1 1 18rem; }
.kc-post-zeile .kc-wahl-txt b, .kc-post-zeile .kc-wahl-txt span { overflow-wrap: anywhere; }
.kc-post-zeile-akt { display: flex; gap: var(--kc-l1); flex-wrap: wrap; }
.kc-post-frage:empty { display: none; }
.kc-post-frage { display: grid; gap: var(--kc-l3); }
/* Mobil randlos (R145). */
@media (max-width: 599px) {
  .kc-post-zeile, .kc-post-mail, .kc-post-oauth-karte, .kc-post-server fieldset, .kc-post-test,
  .kc-post-inhalt .kc-hinweis, .kc-post-inhalt .kc-wahl-opt { margin-inline: -20px; border-radius: 0; border-inline: 0; }
}
/* Topbar unter 360 px: die rechte Gruppe war 316 px breit bei 320 px Fenster
   und schob die Seite 34 px quer (gemessen 2026-09-30, U4). Weglassen statt
   beschneiden: der Pfeil am Kontoknopf fällt, die Knöpfe rücken zusammen. */
@media (max-width: 359.98px) {
  .kc-tb-rechts { gap: 0; }
  .kc-tb-rechts .kc-kopf-knopf { min-width: 40px; padding-inline: 6px; }
  .kc-tb-rechts .burger { margin-left: var(--kc-l1); }
  .kc-kopf-kontoknopf > .ic { display: none; }
}
/* Prüf-Vorschau (Kontrolle der KI-Texte, pm-33945): Text der KI mit feiner
   gepunkteter Unterstreichung im Akzent, eingesetzte Werte hell hinterlegt mit
   ihrer kurzen Bezeichnung als Randnotiz am Wert und voll als Liste darunter. */
.kc-post-pruef p { line-height: 1.9; }
.kc-post-legende { display: flex; flex-wrap: wrap; gap: var(--kc-l2); margin: 0 0 var(--kc-l2) !important; line-height: 1.5 !important;
  font-size: .8125rem; color: var(--ink-faint); }
.kc-post-ki { text-decoration: underline dotted color-mix(in srgb, var(--lime) 55%, transparent); text-decoration-thickness: 1px;
  text-underline-offset: 4px; }
.kc-post-wert { background: color-mix(in srgb, var(--lime) 8%, var(--surface)); color: var(--ink); border-radius: 4px; padding: 0 3px;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lime) 45%, transparent); }
.kc-post-wert { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kc-post-bez { margin-left: 6px; padding-left: 6px; border-left: 1px solid color-mix(in srgb, var(--lime) 35%, transparent);
  font-size: .6875rem; font-weight: 600; color: var(--lime-strong); letter-spacing: .01em; white-space: nowrap; }
.kc-post-muster { padding: 1px 6px; }
.kc-post-sig { margin-top: var(--kc-l3); padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-post-sig-ki { text-decoration: underline dotted color-mix(in srgb, var(--lime) 55%, transparent); text-underline-offset: 4px; }
.kc-post-werte { display: grid; gap: var(--kc-l1); }
.kc-post-werte dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px var(--kc-l2); margin: 0; font-size: .875rem; }
.kc-post-werte dt { font-weight: 600; overflow-wrap: anywhere; }
.kc-post-werte dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-post-geprueft { border-color: var(--line-strong); }
.kc-akt .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Textfelder der Kundenpost: der Brief braucht Höhe, lange Dateinamen brechen um. */
.kc-post-inhalt textarea { min-height: 7rem; height: auto; resize: vertical; }
.kc-post-inhalt #kc-post-text { min-height: 18rem; }
.kc-post-inhalt #kc-sig-text { min-height: 11rem; }
.kc-post-inhalt .kc-wahl-txt b, .kc-post-inhalt .kc-wahl-txt span { overflow-wrap: anywhere; min-width: 0; }
.kc-post-inhalt .kc-wahl-opt { min-width: 0; }

/* Takt in "Premium Dunkel" in der gedämpften Farbe dieser Fassung — mit
   --ink-faint stand er dort bei 2,6:1 (Abnahme 2026-09-23, P2-AG). */
.kc-dok[data-fassung="v4"] .kc-lv-takt { color: var(--line-strong); }
.kc-lv-klammer { display: inline-block; }

/* AK (Abnahme 2026-09-23, P2): die schließende Klammer optionaler Beträge in
   eigener Spanne mit fester Breite, direkt am €; die Takt-Spanne trägt nur
   "/Mon." und bricht nie um — im A4-PDF war "/Mon." abgeschnitten. Jede
   Zeile reserviert beide Spannen, so bleibt die €-Kante gleich. */
.kc-lv-klammer-zu { display: inline-block; width: .5em; text-align: left; }
.kc-lv-takt { width: 3.6em; white-space: nowrap; }
.kc-lv th.z:last-child { padding-right: 4.1em; }
/* ============================================================   Angebote — je Raster ein eigenes Bild der Karte (pm-33952, A1–A3).
   Operator 2026-09-25: "nicht einfach nur breiter oder schmaler" und im
   4er-Raster wird der INHALT kleiner, nicht nur die Karte.
     1  Liste: Bild links, Inhalt in der Mitte, Preisblock und Knopf rechts
     2  große Karte: Bildband oben, Preis auf eigener Fläche, Merkmale
     3  kompakte Karte: nur Positionen, kleinere Zahl, kleine Knöpfe
     4  Kachel: Zeichen, Kernzahl und Titel — keine Merkmale
   Überlauf je Raster misst test/angebote-raster-design-probe.mjs.
   =================================================================== */
.kc-paket-bild { display: none; position: relative; min-height: 0; border-radius: 12px; isolation: isolate;
  background: radial-gradient(120% 95% at 88% 12%, color-mix(in srgb, var(--lime) 24%, transparent), transparent 62%),
              linear-gradient(135deg, color-mix(in srgb, var(--lime) 7%, var(--surface)), var(--surface-2)); }
.kc-paket-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: -1; }
.kc-paket-bild-zeichen { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--surface); color: var(--lime); box-shadow: 0 1px 3px rgba(19, 17, 26, .1); }
.kc-paket-bild-zeichen .ic { width: 22px; height: 22px; }
.kc-paket-bild-kennung { position: absolute; right: 14px; bottom: 8px; max-width: calc(100% - 28px); font-size: 2.4rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1; white-space: nowrap; color: color-mix(in srgb, var(--lime) 22%, transparent); }
.kc-paket-bild.mit-bild > span { display: none; }
.kc-merkmal-mehr-kurz { display: none; }
.kc-chip-nachlass { flex: none; white-space: nowrap; background: color-mix(in srgb, var(--good, #1B7F4B) 12%, var(--surface)); color: var(--good, #1B7F4B); font-weight: 700; }
.kc-paket-kopf:has(.kc-chip-nachlass) { flex-wrap: wrap; }

/* 1 — Liste */
.kc-pakete[data-raster="1"] { grid-template-rows: none; }
.kc-pakete[data-raster="1"] .kc-paket { grid-row: auto; grid-template-rows: none; align-items: start; padding: var(--kc-l3);
  grid-template-columns: clamp(9rem, 18%, 13rem) minmax(0, 1fr) minmax(11rem, 14rem); column-gap: var(--kc-l4); row-gap: 6px;
  grid-template-areas: "bild kopf preis" "bild titel preis" "bild merkmale preis" "bild merkmale akt"; }
.kc-pakete[data-raster="1"] .kc-paket-bild { display: block; grid-area: bild; align-self: stretch; min-height: 150px; }
.kc-pakete[data-raster="1"] .kc-paket-kopf { grid-area: kopf; }
.kc-pakete[data-raster="1"] .kc-paket-kopf > .kc-sym { display: none; }
.kc-pakete[data-raster="1"] .kc-paket h3 { grid-area: titel; font-size: 1.15rem; }
.kc-pakete[data-raster="1"] .kc-paket-merkmale { grid-area: merkmale; margin: 4px 0 0; gap: 4px var(--kc-l3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.kc-pakete[data-raster="1"] .kc-merkmal { font-size: .88rem; line-height: 1.45; }
.kc-pakete[data-raster="1"] .kc-paket-preis { grid-area: preis; align-self: stretch; padding-left: var(--kc-l3); border-left: 1px solid var(--line); }
.kc-pakete[data-raster="1"] .kc-paket-zahl { font-size: min(1.9rem, calc(var(--raster-spalte, 100cqi) * .14)); }
.kc-pakete[data-raster="1"] .kc-akt { grid-area: akt; align-self: end; padding-left: var(--kc-l3); border-left: 1px solid var(--line); flex-direction: column; align-items: stretch; }
.kc-pakete[data-raster="1"] .kc-paket-band { left: calc(clamp(9rem, 18%, 13rem) + var(--kc-l3) + var(--kc-l4)); }
@media (max-width: 899px) {
  .kc-pakete[data-raster="1"] .kc-paket { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "kopf" "titel" "preis" "merkmale" "akt"; }
  .kc-pakete[data-raster="1"] .kc-paket-bild { min-height: 120px; }
  .kc-pakete[data-raster="1"] :is(.kc-paket-preis, .kc-akt) { padding-left: 0; border-left: 0; }
  .kc-pakete[data-raster="1"] .kc-paket-band { left: var(--kc-l3); }
}

/* 2 — große Karte mit Bildband */
.kc-pakete[data-raster="2"] { grid-template-rows: auto auto auto auto 1fr auto; }
.kc-pakete[data-raster="2"] .kc-paket { grid-row: span 6; padding: 0 0 var(--kc-l4); }
.kc-pakete[data-raster="2"] .kc-paket > :not(.kc-paket-bild, .kc-paket-band) { margin-inline: var(--kc-l4); }
.kc-pakete[data-raster="2"] .kc-paket-bild { display: block; height: 128px; border-radius: 15px 15px 0 0; }
.kc-pakete[data-raster="2"] .kc-paket-band { top: 12px; left: auto; right: var(--kc-l3); }
.kc-pakete[data-raster="2"] .kc-paket-preis { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.kc-pakete[data-raster="2"] .kc-paket-merkmale { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px var(--kc-l3); }
@media (max-width: 599px) {
  .kc-pakete[data-raster="2"] .kc-paket > :not(.kc-paket-bild, .kc-paket-band) { margin-inline: 20px; }
  .kc-pakete[data-raster="2"] .kc-paket-bild { border-radius: 0; }
}

/* 3 — kompakte Karte */
.kc-pakete[data-raster="3"] { --raster-min: 14rem; }
.kc-pakete[data-raster="3"] .kc-paket { padding: var(--kc-l3); gap: 8px; }
.kc-pakete[data-raster="3"] .kc-paket-kopf .kc-sym { width: 30px; height: 30px; border-radius: 9px; }
.kc-pakete[data-raster="3"] .kc-paket-nr { font-size: .72rem; letter-spacing: .06em; }
.kc-pakete[data-raster="3"] .kc-paket h3 { font-size: 1rem; }
.kc-pakete[data-raster="3"] .kc-paket-zahl { font-size: min(1.6rem, calc(var(--raster-spalte, 100cqi) * .11)); }
.kc-pakete[data-raster="3"] .kc-paket-einheit { font-size: .78rem; }
.kc-pakete[data-raster="3"] .kc-paket-merkmale { gap: 5px; margin: 4px 0; }
.kc-pakete[data-raster="3"] .kc-merkmal { font-size: .84rem; line-height: 1.4; gap: 8px; }
.kc-pakete[data-raster="3"] .kc-merkmal:not(.kc-merkmal-titel, .kc-merkmal-mehr-kurz) { display: none; }
.kc-pakete[data-raster="3"] .kc-merkmal-mehr-kurz { display: flex; }
.kc-pakete[data-raster="3"] .kc-paket .kc-akt .btn { height: 38px; padding: 0 12px; font-size: .88rem; border-radius: var(--r-btn-sm, 10px); }

/* 4 — Kachel: Zeichen, Kernzahl, Titel */
.kc-pakete[data-raster="4"] { --raster-min: 11rem; grid-template-rows: none; }
.kc-pakete[data-raster="4"] .kc-paket { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.kc-pakete[data-raster="4"] .kc-paket-kopf { gap: 8px; }
.kc-pakete[data-raster="4"] .kc-paket-kopf .kc-sym { width: 28px; height: 28px; border-radius: 8px; }
.kc-pakete[data-raster="4"] .kc-paket-kopf .chip { font-size: .68rem; padding: 2px 6px; }
.kc-pakete[data-raster="4"] .kc-paket-nr { font-size: .68rem; letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; }
.kc-pakete[data-raster="4"] .kc-paket-preis { order: 2; margin-top: 4px; }
.kc-pakete[data-raster="4"] .kc-paket-zahl { font-size: min(1.35rem, calc(var(--raster-spalte, 100cqi) * .11)); letter-spacing: -.02em; }
.kc-pakete[data-raster="4"] .kc-paket-einheit { font-size: .7rem; }
.kc-pakete[data-raster="4"] .kc-paket-liste { font-size: .72rem; }
.kc-pakete[data-raster="4"] .kc-paket h3 { order: 3; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.kc-pakete[data-raster="4"] .kc-paket-merkmale { display: none; }
.kc-pakete[data-raster="4"] .kc-akt { order: 4; margin-top: auto; padding-top: 4px; gap: 6px; }
.kc-pakete[data-raster="4"] .kc-akt .chip { font-size: .68rem; }
.kc-pakete[data-raster="4"] .kc-paket .kc-akt .btn { height: 38px; padding: 0 10px; font-size: .88rem; border-radius: var(--r-btn-sm, 10px); }
.kc-pakete[data-raster="4"] .btn .ic { width: 14px; height: 14px; }
.kc-pakete[data-raster="4"] .kc-paket-band { top: -10px; left: 14px; font-size: .64rem; padding: 3px 8px; }
.kc-pakete[data-raster="2"] .kc-paket-kopf > .kc-sym { display: none; }

/* Konfigurator zweispaltig (pm-33952, A5): links Auswahl, rechts das
   Ergebnis, beim Rollen stehend; unter 900 px einspaltig. */
.kc-konfig-links, .kc-konfig-rechts { display: grid; gap: var(--kc-l3); align-content: start; min-width: 0; }
.kc-konfig-rechts { padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface-2); }
@media (min-width: 900px) {
  .kc-konfig-inhalt { grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); align-items: start; column-gap: var(--kc-l4); }
  .kc-konfig-rechts { position: sticky; top: var(--kc-l3); }
}
@media (max-width: 599px) { .kc-konfig-rechts { margin-inline: -20px; border-radius: 0; border-inline: 0; } }
.kc-konfig-rechts .kc-akt { display: grid; gap: var(--kc-l1); margin: 0; }
.kc-konfig-rechts .kc-akt .btn { width: 100%; }
.kc-konfig-summe { display: grid; gap: var(--kc-l2); }
.kc-konfig-summe-kopf { display: grid; gap: 2px; }
.kc-konfig-summe-kopf b { font-size: 1.05rem; }
.kc-konfig-summe-kopf span { font-size: .84rem; color: var(--ink-faint); }
.kc-konfig-posten { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.kc-konfig-posten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kc-konfig-posten li > div { display: grid; gap: 2px; min-width: 0; }
.kc-konfig-posten-bez { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.kc-konfig-posten-det { font-size: .78rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-konfig-posten-betrag { font-size: .88rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kc-konfig-posten li.ist-optional { color: var(--ink-faint); }
.kc-konfig-posten li.ist-nachlass .kc-konfig-posten-bez, .kc-konfig-posten li.ist-nachlass .kc-konfig-posten-betrag { color: var(--good, #1B7F4B); }
.kc-konfig-summen { margin: 0; display: grid; gap: 4px; }
.kc-konfig-summen > div { display: flex; justify-content: space-between; gap: var(--kc-l2); font-size: .86rem; color: var(--ink-soft); }
.kc-konfig-summen dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-konfig-summen .ist-summe { font-size: .95rem; font-weight: 800; color: var(--ink); }
.kc-konfig-nachlass-text { margin: 0; font-size: .8rem; color: var(--ink-faint); line-height: 1.45; }
/* Anzahl: keine Drehknöpfe des Systems. */
#kc-konfig-anzahl { -moz-appearance: textfield; appearance: textfield; }
#kc-konfig-anzahl::-webkit-inner-spin-button, #kc-konfig-anzahl::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Ankreuzfeld im CI: appearance:none + eigener Kasten und Haken (R1). */
.kc-haken { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; }
.kc-haken:checked { background: var(--lime); border-color: var(--lime); }
.kc-haken:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-lime, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kc-haken:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Mehrsystem-Nachlass (A4) */
.kc-mehrsystem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: start; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--good, #1B7F4B) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--good, #1B7F4B) 6%, var(--surface)); }
.kc-mehrsystem-text { display: grid; gap: 2px; min-width: 0; }
.kc-mehrsystem-text b { font-size: .92rem; }
.kc-mehrsystem-text span { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; overflow-wrap: anywhere; }
.kc-mehrsystem-platz:empty { display: none; }
@media (max-width: 599px) { .kc-mehrsystem { margin-inline: -20px; border-radius: 0; border-inline: 0; } }

/* Ankreuzfelder und Wahlknöpfe im CI, überall im Kundencenter (pm-33952,
   R1): accent-color färbt nur den gesetzten Zustand — der ungesetzte Kasten
   bliebe Systemdarstellung (im dunklen Thema ein weißer Kasten). Das Feld
   bleibt ein echtes <input> (Tastatur, Vorlesen), nur die Darstellung ist
   eigen. :where() hält die Spezifität bei 0, Größen der Bauteile gelten. */
:where(input[type="checkbox"], input[type="radio"]) { -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; vertical-align: middle; }
:where(input[type="checkbox"]) { border-radius: 6px; }
:where(input[type="radio"]) { border-radius: 999px; }
:where(input[type="checkbox"], input[type="radio"]):checked { border-color: var(--lime); }
:where(input[type="checkbox"]):checked { background: var(--lime); }
:where(input[type="checkbox"]):checked::after { content: ""; position: absolute; left: 50%; top: 45%; width: 28%; height: 52%;
  border: solid var(--on-lime, #fff); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
:where(input[type="radio"]):checked::after { content: ""; position: absolute; inset: 22%; border-radius: 999px; background: var(--lime); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .55; cursor: default; }
/* Punkt 7 im Raster 2: die Preisfläche wird auf der roten Karte zur Lasur,
   sonst stünde weiße Schrift auf hellem Grund (gemessen 1,06:1). */
/* Nur im Raster 2 hat die Preisfläche Innenabstand — in den übrigen Rastern
   lag die Lasur ohne Rand direkt an der Zahl (Operator 2026-09-28, Ordner
   „dbl99 Kundeportal - Fehler Design“). */
.kc-angebote-raster[data-finanzierung="frei"] .kc-pakete[data-raster="2"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .kc-paket-preis { background: rgba(255, 255, 255, .14); }
/* Das Bildband bleibt beim Überfahren hell — Zeichen und Kennung behalten
   darum ihre eigenen Farben; die weiße Schrift der roten Karte machte das
   Zeichen zur leeren Kachel und die Kennung unsichtbar (gleicher Ordner). */
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .kc-paket-bild .kc-paket-bild-zeichen {
  background: var(--surface); border-color: transparent; color: var(--lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .kc-paket-bild .kc-paket-bild-zeichen :where(*) { color: var(--lime); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .kc-paket-bild .kc-paket-bild-kennung { color: color-mix(in srgb, var(--lime) 22%, transparent); }
.kc-angebote-raster[data-finanzierung="frei"] .kc-paket[data-klickbar="ja"]:is(:hover, :focus-within) .kc-chip-nachlass { background: var(--surface); color: var(--good, #1B7F4B); }
/* Portal-Spiegel (Operator 2026-09-22): feste Leiste am unteren Rand,
   damit der Bereich darüber genau so steht wie beim Kunden. Nur mit
   einer Sitzung des Hauses sichtbar. */
.kc-einsicht { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l3);
  align-items: baseline; padding: var(--kc-l2) var(--kc-l3); background: var(--ink); color: var(--surface); font-size: .9rem; line-height: 1.5;
  border-top: 3px solid var(--warn); }
.kc-einsicht strong { color: var(--surface); }
.kc-einsicht-nein { color: var(--surface); font-weight: 600; }
.kc-einsicht-lang { display: none; }
body.kc-einsicht-an { padding-bottom: var(--kc-l5); }
@media (min-width: 600px) {
  .kc-einsicht-lang { display: inline; }
  body.kc-einsicht-an { padding-bottom: var(--kc-l6); }
}
/* Ab 901 px steht die Seitenleiste fest links; die Leiste beginnt rechts
   davon und verdeckt den Kontoknopf unten in der Seitenleiste nicht
   (Abnahme 0146ae3, P3). */
@media (min-width: 901px) {
  .kc-einsicht { left: var(--railw); }
  body.rail-collapsed .kc-einsicht { left: var(--railw-c); }
}

/* ===================================================================
   Beauftragung Schritt für Schritt (pm-33958, public/portal-beauftragung.js).
   Gestalt wie die Schritt-Kette der SSR-/B&O-Beauftragung: Banner-Kopf mit
   Chip und zweizeiliger Schlagzeile, darunter die verbundenen Schritte auf
   dunklem Band. Abstände aus der Leiter --kc-l*, Farben aus den Token. */
.kc-bf-kopf { display: grid; gap: var(--kc-l2); padding: var(--kc-l4); border-radius: 18px; background: var(--ink); color: var(--surface); }
.kc-bf-chip { justify-self: start; padding: 4px var(--kc-l2); border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kc-bf-schlag { margin: 0; display: grid; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; color: var(--surface); text-wrap: balance; }
.kc-bf-schlag span:last-child { color: var(--on-lime); opacity: .72; }
.kc-bf-kopftext { margin: 0; color: var(--surface); opacity: .8; font-size: 1rem; }
.kc-bf-kette { list-style: none; margin: var(--kc-l2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--kc-l1); counter-reset: none; }
.kc-bf-glied { position: relative; display: grid; } /* Glieder einer Reihe gleich hoch, auch mit zweizeiligem Titel (Integration 0929) */
.kc-bf-glied-knopf { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l1); align-items: center;
  padding: var(--kc-l1) var(--kc-l2); border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--surface); cursor: pointer; }
.kc-bf-glied-knopf:disabled { cursor: default; opacity: .55; }
.kc-bf-glied-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bf-nr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); font-weight: 800; font-size: .9rem; }
.kc-bf-nr .ic { width: 16px; height: 16px; }
.kc-bf-glied-txt { display: grid; min-width: 0; overflow-wrap: break-word; hyphens: auto; } /* R75: Trennung mit Strich statt „Auftraggebe|r“ (pm-33996) */
.kc-bf-glied-txt b { font-size: .95rem; }
.kc-bf-glied-txt small { font-size: .82rem; opacity: .75; }
.kc-bf-glied.jetzt .kc-bf-glied-knopf { background: var(--lime); border-color: var(--lime); opacity: 1; }
.kc-bf-glied.jetzt .kc-bf-nr { border-color: var(--on-lime); background: var(--on-lime); color: var(--lime-strong); }
.kc-bf-glied.erledigt .kc-bf-nr { border-color: var(--lime); background: var(--lime); color: var(--on-lime); }
/* Verbindungslinie zwischen den Gliedern (ab zwei Spalten nebeneinander). */
@media (min-width: 900px) {
  .kc-bf-kette { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kc-bf-glied:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--kc-l1)); width: var(--kc-l1); height: 2px; background: rgba(255, 255, 255, .3); }
  .kc-bf-glied.erledigt:not(:last-child)::after { background: var(--lime); }
}
.kc-bf-tafel { display: grid; gap: var(--kc-l3); }
.kc-bf-nav { justify-content: space-between; }
.kc-bf-zurueck .ic { transform: scaleX(-1); }
.kc-bf-bausteine { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.kc-bf-baustein-huelle { display: grid; gap: var(--kc-l1); align-content: start; }
.kc-bf-baustein { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: var(--kc-l1); padding: var(--kc-l3); border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.kc-bf-baustein:hover { border-color: var(--ink-faint); }
.kc-bf-baustein:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bf-baustein.on { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-bf-baustein-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: center; }
.kc-bf-haken { position: relative; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-strong); }
.kc-bf-baustein.on .kc-bf-haken { background: var(--lime); border-color: var(--lime); }
.kc-bf-baustein.on .kc-bf-haken::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-lime); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kc-bf-preis { font-weight: 800; white-space: nowrap; }
.kc-bf-baustein-pos { margin: 0; padding-left: var(--kc-l3); color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.kc-bf-einzeln { justify-self: start; }
.kc-bf-summe { padding: var(--kc-l3); border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); transition: opacity .15s ease; }
.kc-bf-summe.laedt { opacity: .55; }
.kc-bf-brutto .kc-zeile-w { font-weight: 800; color: var(--lime-strong); }
.kc-bf-sigs { display: grid; gap: var(--kc-l3); }
.kc-bf-sig { display: grid; gap: var(--kc-l1); }
@media (max-width: 599px) {
  /* Mobil randlos (R145): Banner und Summe bis zur Fensterkante. */
  .kc-bf-kopf, .kc-bf-summe { margin-inline: -20px; border-radius: 0; }
}

/* Der Vertrag (lib/vertrag.mjs): dbl9-Rot, weiße Schrift auf roten
   Deckflächen, Tabellen wie die Seite „Unternehmens-Daten“ der Vorlage. */
.kc-bf-vertrag { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: var(--kc-l2); }
.kc-vertrag { display: grid; gap: var(--kc-l3); color: var(--ink); font-size: 1rem; line-height: 1.55; hyphens: auto; }
.kc-v-deck { display: grid; gap: var(--kc-l2); padding: var(--kc-l5) var(--kc-l4); background: var(--lime); color: var(--on-lime); border-radius: 12px; }
.kc-v-deck-leist { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l3); font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.kc-v-deck h1 { margin: var(--kc-l3) 0 0; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--on-lime); letter-spacing: .02em; overflow-wrap: anywhere; }
.kc-v-deck-sub, .kc-v-deck-marke { margin: 0; color: var(--on-lime); }
.kc-v-deck-marke { font-weight: 800; }
.kc-v-blatt { display: grid; gap: var(--kc-l2); padding: var(--kc-l4); background: var(--surface); border-radius: 12px; }
.kc-v-band { margin: 0; padding: var(--kc-l1) var(--kc-l2); background: var(--lime); color: var(--on-lime); font-size: 1rem; font-weight: 800; letter-spacing: .04em; border-radius: 6px; }
.kc-v-tab { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kc-v-tab th, .kc-v-tab td { text-align: left; vertical-align: top; padding: var(--kc-l1) var(--kc-l2); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.kc-v-tab tbody th { width: 38%; color: var(--ink-soft); font-weight: 600; }
.kc-v-tab thead th { background: var(--surface-2); font-weight: 800; }
.kc-v-tab .z { text-align: right; white-space: nowrap; }
.kc-v-tab td small { display: block; color: var(--ink-soft); font-size: .88rem; }
.kc-v-pos tfoot th { text-align: right; font-weight: 600; }
.kc-v-summe th, .kc-v-summe td { border-top: 2px solid var(--ink); }
.kc-v-brutto th, .kc-v-brutto td { font-weight: 800; color: var(--lime-strong); }
.kc-v-parteien { gap: var(--kc-l3); }
.kc-v-satz { margin: 0; font-style: italic; color: var(--ink-soft); }
.kc-v-inhalt { margin: 0; padding-left: var(--kc-l3); columns: 2 16rem; }
.kc-v-budget { display: grid; gap: 4px; padding: var(--kc-l3); background: var(--lime); color: var(--on-lime); border-radius: 10px; }
.kc-v-budget b { font-size: 1.8rem; }
.kc-v-normen { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.kc-v-norm { display: grid; gap: 4px; padding: var(--kc-l2); border: 2px solid var(--lime); border-radius: 10px; }
.kc-v-norm b { font-size: 1.3rem; color: var(--lime-strong); }
.kc-v-norm span { font-weight: 800; }
.kc-v-norm small, .kc-v-klein { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.kc-v-text h2.kc-v-par { margin: var(--kc-l3) 0 0; font-size: 1.15rem; color: var(--lime-strong); }
.kc-v-text h3 { margin: var(--kc-l1) 0 0; font-size: 1rem; }
.kc-v-text h4 { margin: var(--kc-l1) 0 0; font-size: .98rem; font-weight: 700; }
.kc-v-text p { margin: 0; text-wrap: pretty; }
.kc-v-text ul { margin: 0; padding-left: var(--kc-l3); }
.kc-v-normliste li { font-weight: 700; }
.kc-v-sigs { display: grid; gap: var(--kc-l3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.kc-v-sig-linie { height: 48px; border-bottom: 2px solid var(--ink) !important; }
.kc-v-fuss { padding: var(--kc-l2); font-size: .82rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 599px) {
  .kc-bf-vertrag { margin-inline: -20px; border-radius: 0; border-inline: 0; padding: 0; }
  .kc-v-deck, .kc-v-blatt { border-radius: 0; padding-inline: var(--kc-l2); }
}
@media print {
  body.kc-druck-vertrag > *:not(#kc-druck) { display: none !important; }
  body.kc-druck-vertrag { background: #ffffff; }
  #kc-druck .kc-vertrag { gap: 0; }
  #kc-druck .kc-v-deck { min-height: 90vh; break-after: page; border-radius: 0; }
  #kc-druck .kc-v-blatt { break-inside: auto; border-radius: 0; padding-inline: 0; }
  #kc-druck .kc-v-band, #kc-druck .kc-v-deck, #kc-druck .kc-v-budget { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #kc-druck .kc-v-tab tr { break-inside: avoid; }
}
/* Der Druckbehälter steht nur im Druck, nie auf dem Bildschirm. */
#kc-druck { display: none; }
@media print { body.kc-druck-vertrag > #kc-druck { display: block; } }
/* Der gespeicherte Vertrag als eigene Seite (…/auftrag/<nummer>/vertrag). */
body.kc-vertrag-seite { margin: 0 auto; max-width: 960px; padding: var(--kc-l3); background: var(--bg); color: var(--ink); font-family: system-ui, sans-serif; }
.kc-v-pruefsumme { margin: var(--kc-l3) 0 0; font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
@media print { body.kc-vertrag-seite { background: #ffffff; padding: 0; max-width: none; } }

/* ------------------------------------------------ Kopfzeile nach Vorlage
   (Operator 2026-09-26, pm-33945; public/portal-kopf.js). Suchfeld links
   in der Flucht des Inhalts, rechts Hilfe, Glocke, Konto. Der Bereichstitel
   der Schale steht nicht mehr in der Kopfleiste, sondern als rote Krume
   über dem Inhalt (.kc-krume) — ein Titel an einem Ort. Nur eigene Klassen;
   an der Schale selbst allein das Ausblenden des Titels. */
.kc-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.topbar.kc-kopf .tb-title { display: none; }
.kc-suche { position: relative; flex: 0 1 656px; min-width: 0; margin-left: 10px; }
.kc-suche-feld { display: flex; align-items: center; gap: var(--kc-l2); height: 46px; padding: 0 var(--kc-l1) 0 var(--kc-l2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); box-shadow: 0 1px 2px rgba(20, 22, 25, .04); }
.kc-suche-feld:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(196, 11, 11, .12); }
.kc-suche-feld > .ic { width: 20px; height: 20px; color: var(--ink-soft); }
.kc-suche-eingabe { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: .9375rem; }
.kc-suche-eingabe::placeholder { color: var(--ink-faint); opacity: 1; }
.kc-suche-kuerzel { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-soft); font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.kc-suche-liste { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 520px); overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); box-shadow: var(--shadow-lg); }
.kc-suche-gruppe { padding: var(--kc-l1) 10px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.kc-suche-treffer { display: flex; align-items: center; gap: var(--kc-l2); min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.kc-suche-treffer[aria-selected="true"], .kc-suche-treffer:hover { background: var(--rail-active); }
.kc-suche-fach { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(196, 11, 11, .09); color: var(--lime); }
.kc-suche-fach .ic { width: 16px; height: 16px; }
.kc-suche-text { display: grid; min-width: 0; }
.kc-suche-text b { font-size: .9375rem; font-weight: 600; }
.kc-suche-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--ink-faint); }
.kc-suche-leer { padding: var(--kc-l2); font-size: .9375rem; color: var(--ink-soft); }
.kc-such-ziel { outline: 2px solid var(--lime); outline-offset: 3px; }

.kc-kopf-knopf { display: inline-flex; align-items: center; gap: var(--kc-l1); min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-sm, 10px);
  background: none; color: var(--ink-soft); font: inherit; font-size: .9375rem; cursor: pointer; justify-content: center; position: relative; }
.kc-kopf-knopf:hover { background: var(--surface-2); color: var(--ink); }
.kc-kopf-knopf:focus-visible, .kc-kopf-kontoknopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-kopf-knopf .ic { width: 22px; height: 22px; }
.kc-kopf-hilfe { margin-right: var(--kc-l2); }
.kc-kopf-zahl { position: absolute; top: 3px; right: 3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--surface);
  background: var(--lime); color: var(--on-lime); font-size: .75rem; font-weight: 700; line-height: 16px; text-align: center; }
.kc-suche-auf { display: none; }
.kc-kopf-konto { position: relative; margin-left: var(--kc-l2); }
.kc-kopf-kontoknopf { display: flex; align-items: center; gap: var(--kc-l2); min-height: 44px; padding: 0 4px; border: 0; border-radius: var(--r-sm, 10px); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.kc-kopf-ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #1B2140; color: #FFFFFF; font-size: 1rem; font-weight: 700; }
.kc-kopf-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; }
.kc-kopf-kontoknopf > .ic { width: 18px; height: 18px; color: var(--ink-soft); transform: rotate(-90deg); }
.kc-kopf-kontoknopf[aria-expanded="true"] > .ic { transform: rotate(90deg); }
.kc-kopf-menue { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 240px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.kc-kopf-menue button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; cursor: pointer; }
.kc-kopf-menue button:hover, .kc-kopf-menue button:focus-visible { background: var(--surface-2); outline: 0; }
.kc-kopf-menue .ic { width: 18px; height: 18px; color: var(--ink-soft); }
.kc-kopf-menue .sep { height: 1px; margin: 5px 8px; background: var(--line); }

/* Rote Krume über jedem Bereich (wie die Krume der Bürgschaften) */
.kc-krume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); margin-bottom: calc(var(--kc-l1) - var(--kc-l4)); color: var(--lime); font-size: .9375rem; font-weight: 700; }
.kc-krume .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.kc-krume a { color: inherit; text-decoration: none; }
.kc-krume a:hover, .kc-krume a:focus-visible { text-decoration: underline; }
.kc-krume-trenner { color: var(--ink-faint); font-weight: 400; }
/* Die Krume ist kein Block: der erste Block darunter trägt keine Trennlinie. */
.kc-main > .kc-krume + .kc-block { border-top: 0; padding-top: 0; }

/* Zähler in der Navigation rund wie in der Vorlage */
#rail-nav .kc-zahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: .8125rem; line-height: 1; }
#rail-nav .kc-zahl[hidden] { display: none; }

@media (max-width: 1180px) { .kc-kopf-name, .kc-kopf-hilfe span { display: none; } .kc-kopf-hilfe { margin-right: 0; } }
/* Mobil: Suche als Symbol; geöffnet liegt das Feld randlos über der Kopfleiste. */
@media (max-width: 900px) {
  .kc-suche { display: none; margin: 0; }
  .kc-suche-auf { display: inline-flex; }
  .kc-kopf-hilfe { min-width: 44px; padding-inline: 10px; }
  .kc-kopf-konto { margin-left: 0; }
  .topbar.kc-kopf.kc-suche-offen .kc-suche { display: block; position: absolute; inset: 0; z-index: 70; flex: none; background: var(--surface); }
  .topbar.kc-kopf.kc-suche-offen .kc-suche-feld { height: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding-inline: 20px; }
  .topbar.kc-kopf.kc-suche-offen .kc-suche-liste { top: 100%; border-radius: 0; border-inline: 0; max-height: calc(100vh - 70px); }
  .kc-suche-kuerzel { display: none; }
  .kc-kopf-menue { position: fixed; top: 70px; left: 0; right: 0; border-radius: 0; border-inline: 0; }
}

/* Gruppenüberschriften der Navigation weniger gesperrt (Vorlage). Einzige
   Regel an .grp-lbl der Schale; nur der Buchstabenabstand. */
#rail-nav .grp-lbl { letter-spacing: .04em; font-weight: 600; font-size: .75rem; }
/* Operator 2026-09-29 (pm-33996): „Mein Vorgang“ / „Meine Daten“ zu eng —
   mehr Abstand zwischen den Gruppen und zwischen den Einträgen. */
#rail-nav .grp { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
#rail-nav .grp + .grp { margin-top: var(--kc-l4); }
#rail-nav .grp-lbl { padding-bottom: var(--kc-l1); }

/* Untermenüs (Operator 2026-09-30, docs/PORTAL-NAVI.md, public/portal-navi.js):
   Bereichsknopf bleibt das Hausbauteil .navi; die Hülle trägt daneben den
   Pfeil-Knopf und darunter die eingerückten Unterpunkte. Einzug = Polster
   (12) + Symbol (22) + Abstand (13) des .navi — der Text der Unterpunkte
   steht bündig unter dem Text des Bereichs. */
.kc-navi-gruppe { position: relative; display: grid; gap: 2px; }
.kc-navi-gruppe > .navi { padding-right: 26px; } /* cta-einzeilig Z4: „Konten & Bankensicht“ ragte bei 32 px um 3 px heraus */
.kc-navi-klappe { position: absolute; top: 4px; right: 2px; width: 24px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--rail-ink-soft); cursor: pointer; }
.kc-navi-klappe:hover { background: var(--rail-hover-bg); color: var(--rail-ink); }
.kc-navi-klappe:focus-visible, .kc-navi-unterpunkt:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.kc-navi-klappe .ic { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .16s var(--ease, ease); }
.kc-navi-gruppe.ist-offen .kc-navi-klappe .ic { transform: rotate(-90deg); }
.kc-navi-unter { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 2px; position: relative; }
/* Führungslinie unter der Symbolmitte des Bereichs (12 + 11 px). */
.kc-navi-unter::before { content: ""; position: absolute; left: 23px; top: 2px; bottom: 6px; width: 1px; background: var(--rail-line); }
.kc-navi-unter[hidden] { display: none; }
.kc-navi-unterpunkt { position: relative; display: flex; align-items: center; min-height: 36px;
  padding: 6px 12px 6px 47px; border-radius: 9px; color: var(--rail-ink-soft); text-decoration: none;
  font-size: .9375rem; line-height: 1.3; }
.kc-navi-unterpunkt:hover { background: var(--rail-hover-bg); color: var(--rail-ink); }
.kc-navi-unterpunkt.on { color: var(--rail-ink); font-weight: 600; background: var(--rail-active); }
.kc-navi-unterpunkt.on::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--lime); }
@media (prefers-reduced-motion: reduce) { .kc-navi-klappe .ic { transition: none; } }
/* Anker der Unterpunkte (#bankensicht, Karte unter „Tools buchen“): nicht
   unter der klebenden Kopfleiste (70 px) landen, dazu eine Stufe Luft. */
#kc-main #bankensicht, #kc-main .kc-tool { scroll-margin-top: calc(70px + var(--kc-l3)); }

/* Schließen-Knopf der Schublade: nur, wo die Navigation eine Schublade ist. */
.kc-nav-zu { display: none; }
@media (max-width: 900px) {
  .kc-nav-zu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    position: absolute; top: 14px; right: 12px; border: 0; border-radius: 11px; background: none; color: var(--rail-ink); cursor: pointer; }
  .kc-nav-zu:hover { background: var(--rail-hover-bg); }
  .kc-nav-zu .ic { width: 22px; height: 22px; }
  #center > .rail .rail-head { position: relative; }
}
/* Unter 600 px randlos (Hausregel MR-A): die Schublade nimmt die volle Breite. */
@media (max-width: 599.98px) {
  #center > .rail { width: 100%; box-shadow: none; }
}

/* Geber-Akte (S15/S16, public/portal-bg-akte.js). Präfix kc-bgk; Abstände
   aus der Leiter, Farben aus den Token des Kundencenters. */
.kc-bgk-kopf { display: flex; gap: var(--kc-l3); align-items: center; min-width: 0; }
.kc-bgk-kopf .kc-bg-kopf-text { min-width: 0; }
.kc-bgk-marke { flex: none; display: grid; place-items: center; width: 136px; height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-bgk-marke img { max-width: 112px; max-height: 48px; object-fit: contain; }
.kc-bgk-marke.ist-hell { background: #1f2a44; border-color: #1f2a44; }
.kc-bgk-marke .ic { width: 32px; height: 32px; color: var(--ink-faint); }
.kc-bgk-chips { display: flex; flex-wrap: wrap; gap: var(--kc-l1); margin-top: var(--kc-l1); }
.kc-bgk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--kc-l1); border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--surface-3); color: var(--ink-faint); }
.kc-bgk-chip .ic { width: 14px; height: 14px; }
.kc-bgk-chip.ist-ok { background: var(--good-bg); color: var(--good); }
.kc-bgk-chip.ist-warn { background: var(--bad-bg); color: var(--bad); }
.kc-bgk-kopfknoepfe { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: center; justify-content: flex-end; }
.kc-bgk-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin-bottom: var(--kc-l3); -webkit-overflow-scrolling: touch; }
.kc-bgk-reiter .kc-bg-reiter-knopf { flex: none; }
.kc-bg-karte .kc-bgk-kpis { border: 0; background: none; box-shadow: none; border-radius: 0; margin: 0; }
.kc-bgk-kpis { padding: 0; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--kc-l2); }
.kc-bgk-kpis .kc-bg-kpi { align-items: flex-start; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: 12px; }
.kc-bgk-kpis .kc-bg-kpi b { font-size: 1.125rem; overflow-wrap: anywhere; }
.kc-bgk-kpis .kc-bg-kpi small { display: block; color: var(--ink-faint); font-size: .8125rem; }
.kc-bgk-aufbau-kopf { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bgk-aufbau-kopf h2 { margin: 0 0 4px; }
.kc-bgk-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kc-l1); list-style: none; margin: var(--kc-l2) 0 0; padding: 0; }
.kc-bgk-schritt button { width: 100%; display: flex; align-items: center; gap: var(--kc-l1); min-height: 44px; padding: 0 var(--kc-l1); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.kc-bgk-schritt-marke { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); font-weight: 700; font-size: .8125rem; }
.kc-bgk-schritt.fertig .kc-bgk-schritt-marke { background: var(--good); color: #fff; }
.kc-bgk-schritt-marke .ic { width: 14px; height: 14px; }
.kc-bgk-unter { margin: var(--kc-l2) 0 var(--kc-l1); font-size: 1rem; }
.kc-bgk-zahl b { font-size: 1.5rem; }
.kc-bgk-doks { list-style: none; margin: var(--kc-l1) 0; padding: 0; display: grid; gap: var(--kc-l1); }
.kc-bgk-doks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--kc-l1); align-items: start; }
.kc-bgk-doks li span { overflow-wrap: anywhere; }
.kc-bgk-doks li small { grid-column: 2; color: var(--ink-faint); }
.kc-bgk-ablage { display: grid; gap: var(--kc-l2); margin-top: var(--kc-l2); }
.kc-bgk-zone { display: grid; justify-items: center; gap: 4px; padding: var(--kc-l3); border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: center; }
.kc-bgk-zone.ueber, .kc-bgk-zone:focus-visible { border-color: var(--lime); background: var(--rail-active); }
.kc-bgk-zone .ic { width: 24px; height: 24px; }
.kc-bgk-zone small { color: var(--ink-faint); }
.kc-bgk-sicher { display: flex; gap: var(--kc-l2); align-items: flex-start; margin-top: var(--kc-l2); padding: var(--kc-l2); border-radius: 12px; background: var(--surface-3); }
.kc-bgk-sicher p { margin: 0; }
.kc-bgk-schnell { display: grid; gap: var(--kc-l1); }
.kc-bgk-schnell-knopf { display: flex; gap: var(--kc-l2); align-items: center; width: 100%; min-height: 56px; padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.kc-bgk-schnell-knopf:disabled { opacity: .55; cursor: not-allowed; }
.kc-bgk-schnell-knopf span { display: grid; min-width: 0; }
.kc-bgk-schnell-knopf small { color: var(--ink-faint); }
.kc-bgk-punkte { list-style: none; margin: var(--kc-l1) 0; padding: 0; display: grid; gap: 6px; }
.kc-bgk-punkte li { display: flex; gap: var(--kc-l1); align-items: flex-start; color: var(--ink-faint); }
.kc-bgk-punkte li.fertig { color: var(--ink); }
.kc-bgk-punkte li .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.kc-bgk-punkte li.fertig .ic { color: var(--good); }
/* Operator 2026-10-01 / 2026-10-02: „berühren sich am Rand, bitte mehr Platz“ — Kacheln mit Abstand zum
   Kasten der Gruppe (vorher 0 px) und untereinander (vorher 8 px); breiter, damit kein Name mitten im Wort bricht. */
.kc-bgk-liste { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--kc-l2); }
.kc-bg-gebergruppe > .kc-bgk-liste { margin-top: 0; padding: 0 var(--kc-l3) var(--kc-l3); }
.kc-bgk-eintrag { display: flex; align-items: center; gap: var(--kc-l2); min-height: 64px; padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.kc-bgk-eintrag span:not(.kc-bgk-marke-klein) { flex: 1; min-width: 0; overflow-wrap: break-word; }
.kc-bgk-marke-klein { flex: none; display: grid; place-items: center; width: 56px; height: 32px; }
.kc-bgk-marke-klein img { max-width: 56px; max-height: 28px; object-fit: contain; }
.kc-bgk-marke-klein .ic, .kc-bgk-eintrag > .ic { width: 16px; height: 16px; color: var(--ink-faint); }
.kc-bgk-gruppe { margin-top: var(--kc-l2); }
.kc-aval-akte { color: inherit; text-decoration: none; }
.kc-aval-akte:hover, .kc-aval-akte:focus-visible { color: var(--lime-strong); text-decoration: underline; }
@media (max-width: 899px) { .kc-bgk-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .kc-bgk-kopf { flex-direction: column; align-items: flex-start; gap: var(--kc-l2); }
  .kc-bgk-marke { width: 104px; height: 56px; }
  .kc-bg-karte .kc-bgk-kpis { margin-inline: 0; padding-inline: 0; }
  .kc-bgk-kopfknoepfe { justify-content: flex-start; width: 100%; }
  .kc-bgk-kopfknoepfe .btn { flex: 1 1 100%; }
}
/* Bürgschaften-Tool nach S20, S12, S25–S27 (public/portal-bg-tool.js,
   docs/BG-SCREENS-SOLL-IST.md). Präfix kc-bgt, nur Haus-Token. */
.kc-bgt-klein, .kc-bgt-lbl { font-size: .875rem; color: var(--ink-faint); }
.kc-bgt-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-l3); }
.kc-bgt-kopfzeile > div:first-child { display: grid; gap: var(--kc-l1); flex: 1 1 18rem; min-width: 0; }
.kc-bgt-kopfzeile h2 { margin: 0; font-size: 1.125rem; }
.kc-bgt-ring { --anteil: 0; flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--good) calc(var(--anteil) * 1%), var(--line) 0); }
.kc-bgt-ring b { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--surface); font-size: 1rem; font-variant-numeric: tabular-nums; }
.kc-bgt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); }
.kc-bgt-link { background: none; border: 0; padding: 0; color: var(--lime-strong); font-weight: 600; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: var(--kc-l1); font-size: .9375rem; }
.kc-bgt-dokgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--kc-l2); }
.kc-bgt-dok { display: grid; gap: var(--kc-l1); align-content: start; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); color: var(--ink); text-decoration: none; min-width: 0; }
.kc-bgt-dok small { font-size: .875rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-bgt-mehr { place-items: center; font-weight: 700; cursor: pointer; font-size: .9375rem; }
.kc-bgt-pruefliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-bgt-pruefliste li { display: flex; gap: var(--kc-l1); align-items: center; font-size: .9375rem; }
.kc-bgt-pruefliste li.fertig > svg { color: var(--good); }
.kc-bgt-pruefliste li.offen { color: var(--ink-faint); }
.kc-bgt-kreis { flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); }
.kc-bgt-werkzeuge { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kc-l1); }
.kc-bgt-kpis5 .kc-bg-kpi small { display: block; }
.kc-bgt-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--kc-l2); }
.kc-bgt-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--kc-l2); }
.kc-bgt-vspalte { display: grid; gap: var(--kc-l2); align-content: start; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-bgt-vspalte.gewaehlt { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.kc-bgt-vspalte h3 { margin: 0; font-size: 1rem; }
.kc-bgt-vspalte .kc-bg-status { justify-self: start; }
.kc-bgt-vspalte .btn { justify-self: start; }
.kc-bgt-schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bgt-schritte li { display: flex; gap: var(--kc-l2); align-items: flex-start; color: var(--ink-faint); }
.kc-bgt-schritte li > div { display: grid; gap: 2px; }
.kc-bgt-schritte li small { font-size: .875rem; }
.kc-bgt-schritte li.fertig, .kc-bgt-schritte li.aktuell { color: var(--ink); }
.kc-bgt-schritte li.fertig > .kc-bg-stufe-marke { background: var(--good); border-color: var(--good); color: var(--on-lime); }
.kc-bgt-schritte li.aktuell > .kc-bg-stufe-marke { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.kc-bgt-heldkopf { display: flex; gap: var(--kc-l3); align-items: flex-start; }
.kc-bgt-heldkopf h2 { margin: 0 0 var(--kc-l1); font-size: 1.375rem; }
.kc-bgt-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--kc-l2); }
.kc-bgt-punkt { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bgt-punkt > div { display: grid; gap: 2px; }
.kc-bgt-punkt small { font-size: .875rem; color: var(--ink-faint); }
.kc-bgt-glueck { justify-items: center; text-align: center; }
.kc-bgt-glueck h2 { font-size: 1.75rem; text-wrap: balance; }
.kc-bgt-gross { margin: 0; font-size: 1.125rem; font-weight: 700; }
.kc-bgt-haken { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--good-bg); color: var(--good); }
.kc-bgt-haken svg { width: 2.25rem; height: 2.25rem; }
.kc-bgt-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kc-l2); }
.kc-bgt-vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--kc-l2); }
.kc-bgt-kachel { display: grid; gap: var(--kc-l1); align-content: start; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-bgt-kachel p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.kc-bgt-kachel .kc-bgt-link { justify-self: start; }
.kc-bgt-ansprech { display: grid; gap: var(--kc-l1); }
.kc-bgt-tel { display: inline-flex; gap: var(--kc-l1); align-items: center; color: var(--ink); }
/* Dashboard (Operator 2026-09-29, pm-33996): EINE Rahmenkarte mit Ring
   (Gesamtrahmen + Verfügbar), darunter drei Karten im 3er-Raster, jede mit
   Titel, Wert, Unterzeile, Link auf gemeinsamen Zeilen (Subgrid). */
.kc-bgt-rahmenkarte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l3); align-items: center; padding: var(--kc-l3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.kc-bgt-rahmenkarte .kc-bgt-ring { width: 6rem; height: 6rem; }
.kc-bgt-rahmenkarte .kc-bgt-ring b { width: 4.5rem; height: 4.5rem; white-space: nowrap; }
.kc-bgt-rahmen-text { display: grid; gap: var(--kc-l1); justify-items: start; min-width: 0; }
.kc-bgt-rahmen-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kc-l1) var(--kc-l2); }
.kc-bgt-rahmen-zeile .kc-bgt-lbl { min-width: 7rem; }
.kc-bgt-rahmen-zeile b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bgt-rahmen-zeile small, .kc-bgt-rahmen-text > small { font-size: .875rem; color: var(--ink-faint); }
.kc-bgt-dashkacheln { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--kc-l3); }
@media (min-width: 900px) { .kc-bgt-dashkacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-bgt-dashkachel { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--kc-l1); align-items: start; justify-items: start; padding: var(--kc-l3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.kc-bgt-dashkachel b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bgt-dashkachel small { font-size: .875rem; color: var(--ink-faint); }
.kc-bg-tzelle .kc-bgt-art { white-space: nowrap; }
.kc-bgt-zweier { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--kc-l3); }
.kc-bgt-erledigt { display: flex; gap: var(--kc-l1); align-items: center; font-weight: 600; }
.kc-bgt-erledigt > svg { color: var(--good); }
.kc-bg-zeit li.ungelesen b { color: var(--lime-strong); }
@media (min-width: 900px) {
  .kc-bgt-antragstabelle .kc-bg-tzeile { grid-template-columns: minmax(0, 1.3fr) 7rem minmax(0, 2fr) auto; }
  /* pm-33996: Art-Spalte mit Mindestbreite der Kurzform, Projekt ohne Silbenbruch. */
  .kc-bgt-buetabelle .kc-bg-tzeile { grid-template-columns: 2.5rem minmax(9rem, 2fr) minmax(8.5rem, 1fr) 6.5rem 6rem max-content; }
}
/* Sieben Spalten brauchen die breite Inhaltsspalte; darunter bleibt die Kartenform der Zeile. */
@media (min-width: 1400px) {
  .kc-bgt-statustabelle .kc-bg-tzeile { grid-template-columns: 4.5rem minmax(8rem, 1fr) 6.5rem 8rem 6rem 4rem; gap: var(--kc-l1); }
  .kc-bgt-angebotstabelle .kc-bg-tzeile { grid-template-columns: 1.25rem minmax(6rem, 1fr) 6.5rem 7rem 7.5rem 6.5rem 7.5rem; gap: var(--kc-l1); }
}
/* Mobil randlos (R145): Ausnahme vom Grundstock, darum max-width. */
@media (max-width: 599px) {
  .kc-bgt-dashkachel, .kc-bgt-rahmenkarte { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
  .kc-bgt-werkzeuge { justify-content: stretch; }
  .kc-bgt-werkzeuge > * { flex: 1 1 auto; justify-content: center; }
}
/* ================================================== pm-33945 (2026-09-26) ==
   Bürgschaften-Onboarding nach den Screens S1–S8, S14–S19
   (public/portal-bg-onboarding.js, docs/BG-SCREENS-SOLL-IST.md). Präfix
   kc-bgo. Nur Token aus cf-chrome.css und der Leiter --kc-l*. */

/* S14: vier Unterschritte — sichtbar in jeder Breite (vier passen), unter
   600 px zwei je Zeile. Die Linie zwischen den Marken kommt aus .kc-bg-stufe. */
.kc-bgo-unterleiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); margin: 0; padding: 0; list-style: none; }
.kc-bgo-unterleiste .kc-bg-stufe { display: flex; align-items: center; gap: var(--kc-l1); min-width: 0; }
.kc-bgo-unterleiste .kc-bg-stufe-text { color: var(--ink-soft); text-decoration: none; min-width: 0; }
.kc-bgo-unterleiste a.kc-bg-stufe-text:hover b, .kc-bgo-unterleiste a.kc-bg-stufe-text:focus-visible b { text-decoration: underline; }
.kc-bgo-unterleiste a.kc-bg-stufe-text:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-sm, 10px); }
.kc-bgo-unterleiste .ist-aktuell b { color: var(--lime-strong); }
/* Einzeilig, Umbruch nie mitten im Wort (oktogen-verifier 58485c1): die
   Leiste misst ihre Breite selbst (container), bei schmalen Spalten steht
   die Kurzbeschriftung. */
.kc-bgo-unterleiste { container-type: inline-size; }
.kc-bgo-unterleiste b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow-wrap: normal; hyphens: manual; }
.kc-bgo-unterleiste .kc-bgo-lang { display: none; }
@container (min-width: 820px) {
  .kc-bgo-unterleiste .kc-bgo-lang { display: inline; }
  .kc-bgo-unterleiste .kc-bgo-kurz { display: none; }
}
@media (min-width: 600px) { .kc-bgo-unterleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .kc-bgo-unterleiste { display: grid; grid-auto-flow: row; }
  .kc-bgo-unterleiste .kc-bg-stufe { display: flex; }
  .kc-bgo-unterleiste .kc-bg-stufe-text b { min-height: 0; }
  .kc-bgo-unterleiste .kc-bg-stufe:not(:last-child)::after { display: none; }
}

/* S14 Unterschritt 2: Auskunfteien als wählbare Karten. */
/* Fünf Auskunfteien (A1, 2026-09-30): höchstens drei je Zeile (Raster-Regel 1/2/3). */
.kc-bgo-auskunft { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, calc((100% - 2 * var(--kc-l2)) / 3))), 1fr)); }
.kc-bgo-auskunftkarte { display: flex; align-items: center; gap: var(--kc-l2); min-height: 56px; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); cursor: pointer; }
.kc-bgo-auskunftkarte input { width: 20px; height: 20px; accent-color: var(--lime-strong); flex: none; }
.kc-bgo-auskunftkarte:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bgo-auskunftkarte.ist-gewaehlt { border-color: var(--lime); background: var(--rail-active); }
.kc-bgo-empfehlung { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.kc-bgo-empfkachel { display: flex; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); }
.kc-bgo-empfkachel > div { display: grid; gap: 2px; min-width: 0; }
.kc-bgo-empfkachel b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bgo-empfkachel small { font-size: .875rem; color: var(--ink-faint); }
/* A3 (2026-09-30): Kernpartner vorn, Rand- und Spezialgeschäft danach — gleiche Kachel, Titel statt Zahl. */
.kc-bgo-empfkachel[data-gruppe] b { font-size: 1.125rem; line-height: 1.3; }
.kc-bgo-empfkachel[data-gruppe="partner"] { border-color: var(--lime); }
/* A2 (2026-09-30): Uhr der Bonitätsprüfung und Hinweis des Teams zum Ergebnis. */
.kc-bg-uhr { display: grid; gap: var(--kc-l2); }
.kc-bg-uhr .kc-bg-limit-zahl b { font-size: 1.25rem; line-height: 1.3; }
.kc-bg-uhr .kc-bg-uhr-zeit { font-size: 1.5rem; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bg-uhr-balken { height: 8px; border-radius: 999px; background: var(--surface-2); }
.kc-bg-uhr-balken > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--lime); }
.kc-bg-teamhinweis { margin: var(--kc-l2) 0 0; padding: var(--kc-l2); border-left: 3px solid var(--lime); background: var(--surface-2); font-size: .9375rem; line-height: 1.5; }

/* Ja-Felder als Schalter (PSD2-Wunsch, „keine Avale“, Einwilligung). */
.kc-feld.kc-bgo-schalterfeld { display: flex; align-items: flex-start; gap: var(--kc-l2); grid-template-rows: none; }
.kc-bgo-schalterfeld input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime-strong); flex: none; }
.kc-bgo-schalterfeld input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bgo-schalterfeld > label { align-self: auto; line-height: 1.45; }

/* S17/S18: zwölf Unterlagen als Kacheln; so viele Spalten, wie die Kachel
   mit 17rem Platz hat (R7). Der Knopf steht unter dem Text, nie daneben —
   neben dem Knopf brachen lange Titel Silbe für Silbe (Befund 2026-09-26). */
.kc-bgo-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.kc-bg-dok.kc-bgo-kachel { grid-template-columns: auto minmax(0, 1fr); align-content: start; }
.kc-bg-dok.kc-bgo-kachel > .btn { grid-column: 2; justify-self: start; }
.kc-bgo-fortschritt { display: grid; gap: var(--kc-l1); font-size: .9375rem; font-weight: 600; }
.kc-bgo-zone { display: grid; justify-items: center; gap: var(--kc-l1); padding: var(--kc-l4) var(--kc-l3); border: 2px dashed var(--line-strong); border-radius: var(--r, 12px); background: var(--surface-2); text-align: center; }
.kc-bgo-zone small { font-size: .875rem; color: var(--ink-faint); }
.kc-bgo-zone.ist-drueber { border-color: var(--lime); background: var(--rail-active); }
.kc-bgo-zone .btn { margin-top: var(--kc-l1); }
.kc-bgo-ziel { margin: 0; font-size: .875rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-bgo-teildateien { display: grid; gap: var(--kc-l2); padding-top: var(--kc-l3); border-top: 1px solid var(--line); }
.kc-bgo-teildateien h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.kc-bgo-teildateien p { margin: 0; }
.kc-bgo-psd2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: center; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface-2); }
.kc-bgo-psd2 > div { display: grid; gap: 2px; min-width: 0; }
.kc-bgo-psd2 small { font-size: .875rem; color: var(--ink-soft); line-height: 1.45; }
.kc-bgo-psd2 > .btn { grid-column: 2; justify-self: start; }
@media (min-width: 600px) {
  .kc-bgo-psd2 { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kc-bgo-psd2 > .btn { grid-column: auto; }
}

/* S3/S5/S6: Einträge als Tabelle. Kurzzeile je Eintrag, Kopf ab 900 px;
   darunter gestapelt mit Etikett je Zelle (.kc-bg-tzelle::before). */
.kc-bgo-tabkopf { display: none; }
.kc-bgo-eintrag { padding: var(--kc-l2); gap: var(--kc-l2); }
.kc-bgo-kurz { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-bgo-kurzzellen { display: grid; gap: var(--kc-l1); min-width: 0; }
.kc-bgo-kurzaktion { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-bgo-eintrag > .kc-bg-liste-felder { padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-bgo-leer { margin: 0; color: var(--ink-faint); font-size: .9375rem; }
@media (min-width: 900px) {
  /* Aktionen als Symbolknöpfe (Stift, Papierkorb wie S3) mit aria-label;
     die Spalte ist genau zwei Trefferflächen breit. */
  .kc-bgo-tabkopf { display: grid; grid-template-columns: repeat(var(--bgo-spalten, 4), minmax(0, 1fr)) calc(88px + var(--kc-l1)); gap: var(--kc-l2);
    padding: 0 var(--kc-l2); font-size: .875rem; font-weight: 600; color: var(--ink-faint); }
  .kc-bgo-tabkopf span { hyphens: auto; overflow-wrap: anywhere; }
  .kc-bgo-kurz { grid-template-columns: minmax(0, 1fr) calc(88px + var(--kc-l1)); align-items: center; }
  .kc-bgo-kurzzellen { grid-template-columns: repeat(var(--bgo-spalten, 4), minmax(0, 1fr)); gap: var(--kc-l2); }
  .kc-bgo-kurzzellen .kc-bg-tzelle::before { display: none; }
  .kc-bgo-kurzaktion { justify-content: flex-end; flex-wrap: nowrap; }
  .kc-bgo-kurzaktion .btn { position: relative; width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  .kc-bgo-kurzaktion .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* S4: Kennzahlen als Jahres-Spalten. Ab 900 px Etikettspalte links und je
   Jahr eine Spalte; darunter je Jahr ein Block mit eigenen Beschriftungen. */
.kc-bgo-etiketten { display: none; }
.kc-bgo-spaltenkoerper { display: grid; gap: var(--kc-l2); }
.kc-bgo-spalte { display: grid; gap: var(--kc-l2); padding: var(--kc-l2); }
@media (min-width: 900px) {
  .kc-bgo-spalten { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--kc-l2); align-items: start; }
  .kc-bgo-etiketten { display: grid; grid-auto-rows: 44px; row-gap: var(--kc-l2); padding-top: var(--kc-l2); font-size: .875rem; color: var(--ink-soft); }
  .kc-bgo-etiketten span { display: flex; align-items: center; }
  .kc-bgo-spaltenkoerper { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .kc-bgo-spalte { grid-auto-rows: 44px; row-gap: var(--kc-l2); }
  .kc-bgo-spalte > .kc-feld { display: block; }
  .kc-bgo-spalte > .kc-feld > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kc-bgo-spalte > .kc-feld:first-child .inp { font-weight: 700; text-align: center; }
  /* Die Einheit steht in der Überschrift des Felds (Tsd. €), nicht in jeder Zelle. */
  .kc-bgo-spalte .kc-bg-einheit span { display: none; }
  .kc-bgo-spalte .kc-bg-einheit .inp, .kc-bgo-spalte .inp { width: 100%; min-width: 0; padding-inline: var(--kc-l1); text-align: right; font-variant-numeric: tabular-nums; }
}

/* S19: Reiter, Werkzeugzeile, Alle Daten. */
.kc-bgo-panel { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-bgo-werkzeug { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kc-l1); }
.kc-bgo-alle { display: grid; gap: var(--kc-l3); }
.kc-bgo-alleblock { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); }
.kc-bgo-pruefkopf { display: block; margin-top: var(--kc-l2); font-size: .9375rem; color: var(--bad); }
.kc-bgo-unterlagen .kc-bgo-fortschritt { max-width: 32rem; }
@media (max-width: 599px) {
  .kc-bgo-psd2, .kc-bgo-alleblock { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
}

/* Unternehmensprofil als Bericht (lib/bg-profilbericht.mjs): Druck und PDF. */
.kc-bgo-bericht { margin: 0 auto; max-width: 48rem; padding: var(--kc-l4) var(--kc-l3); background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1.45; }
.kc-bgo-bericht h1 { margin: 0 0 var(--kc-l1); font-size: 1.75rem; }
.kc-bgo-bericht h2 { margin: var(--kc-l4) 0 var(--kc-l1); padding-bottom: var(--kc-l1); border-bottom: 2px solid var(--line-strong); font-size: 1.125rem; }
.kc-bgo-bericht h2 small { font-weight: 400; color: var(--ink-faint); font-size: .875rem; }
.kc-bgo-bericht table { border-collapse: collapse; width: 100%; }
.kc-bgo-bericht-kopf, .kc-bgo-bericht-druck { color: var(--ink-soft); margin: 0 0 var(--kc-l3); }
.kc-bgo-bericht-felder th { text-align: left; font-weight: 400; color: var(--ink-soft); width: 42%; padding: 3px var(--kc-l1) 3px 0; vertical-align: top; }
.kc-bgo-bericht-felder td { padding: 3px 0; vertical-align: top; }
.kc-bgo-bericht-felder th.kc-bgo-bericht-unter { color: var(--ink); font-weight: 700; padding-top: var(--kc-l2); }
.kc-bgo-bericht-liste th, .kc-bgo-bericht-liste td { border: 1px solid var(--line); padding: 3px var(--kc-l1); font-size: .875rem; text-align: left; }
.kc-bgo-bericht-liste th { background: var(--surface-2); }
.kc-bgo-bericht-befunde { margin: var(--kc-l1) 0 0; padding-left: var(--kc-l3); }
.kc-bgo-bericht-befunde .ist-fehlt { color: var(--bad); }
.kc-bgo-bericht-befunde .ist-hinweis { color: var(--warn); }
@media print {
  .kc-bgo-bericht { padding: 0; max-width: none; }
  .kc-bgo-bericht-druck { display: none; }
  .kc-bgo-bericht section { break-inside: avoid-page; }
  .kc-bgo-bericht tr { break-inside: avoid; }
}
/* Akte je Antrag (Screens S21–S24, public/portal-bg-antrag.js). Grundstock
   für 360 px, Erweiterung über min-width (R6); Flächen sind kc-bg-karte und
   damit unter 600 px randlos (R145). */
.kc-bga-reiter { display: flex; flex-wrap: wrap; gap: 0 var(--kc-l3); border-bottom: 1px solid var(--line); }
.kc-bga-reiter-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.kc-bga-reiter-knopf[aria-current="page"] { border-bottom-color: var(--lime); color: var(--ink); }
.kc-bga-reiter-knopf:hover { color: var(--ink); }
.kc-bga-reiter-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bga-antraege { display: grid; gap: var(--kc-l3); }
.kc-bga-antrag { gap: var(--kc-l3); }
.kc-bga-antrag[hidden] { display: none; }
.kc-bga-antrag-kopf { display: grid; gap: var(--kc-l2); align-items: start; }
.kc-bga-antrag-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1) var(--kc-l2); min-width: 0; }
.kc-bga-antrag-titel h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.kc-bga-antrag-titel h2 a { color: var(--ink); text-decoration: none; }
.kc-bga-antrag-titel h2 a:hover { text-decoration: underline; }
.kc-bga-antrag-titel small { flex: 1 1 100%; font-size: .875rem; color: var(--ink-faint); hyphens: auto; overflow-wrap: anywhere; }
.kc-bga-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--kc-l2); margin: 0; }
.kc-bga-fakten dt { font-size: .875rem; color: var(--ink-faint); }
.kc-bga-fakten dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-bga-antrag-knopf { justify-self: start; white-space: nowrap; }
.kc-bga-punkt-text { display: grid; gap: 2px; }
.kc-bga-punkt-text small { font-size: .875rem; color: var(--ink-faint); }
.kc-bga-antrag-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); margin: 0; padding: var(--kc-l1) var(--kc-l2);
  border-radius: var(--r, 12px); background: var(--surface-2); font-size: .9375rem; }
.kc-bga-antrag-hinweis a { margin-left: auto; color: var(--lime-strong); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
/* Die Inhaltsspalte ist neben Navigation und rechter Spalte schmal (rund
   470 px bei 1440): Titel und Knopf in einer Zeile, die Fakten darunter. */
@media (min-width: 600px) {
  .kc-bga-antrag-kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-bga-fakten { grid-column: 1 / -1; grid-row: 2; }
  .kc-bga-antrag-knopf { justify-self: end; grid-column: 2; grid-row: 1; }
}

.kc-bga-postraum { display: grid; gap: var(--kc-l3); align-items: start; min-width: 0; }
/* Liste neben dem Leser erst, wenn die Inhaltsspalte breit genug ist. */
@media (min-width: 1700px) { .kc-bga-postraum { grid-template-columns: minmax(16rem, .9fr) minmax(0, 1.6fr); } }
.kc-bga-postspalte input[type="search"] { width: 100%; min-height: 44px; padding: 0 var(--kc-l2); border: 1px solid var(--line-strong); border-radius: var(--r, 12px);
  background: var(--surface); color: var(--ink); font: inherit; }
.kc-bga-postspalte input[type="search"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bga-postliste { margin: 0; padding: 0; list-style: none; display: grid; }
.kc-bga-post { border-bottom: 1px solid var(--line); }
.kc-bga-post-knopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); width: 100%; min-height: 44px; padding: var(--kc-l2) var(--kc-l1);
  border: 0; border-left: 3px solid transparent; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.kc-bga-post.aktiv .kc-bga-post-knopf { border-left-color: var(--lime); background: var(--rail-active); }
.kc-bga-post-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.kc-bga-post-text { display: grid; gap: 2px; min-width: 0; }
.kc-bga-post-zeile { display: flex; justify-content: space-between; gap: var(--kc-l1); }
.kc-bga-post-zeile small, .kc-bga-post-vorschau { font-size: .875rem; color: var(--ink-faint); }
.kc-bga-post-betreff { font-weight: 600; overflow-wrap: anywhere; }
.kc-bga-post-vorschau { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-bga-post .kc-bg-status { justify-self: start; }
.kc-bga-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); font-weight: 700; }
.kc-bga-avatar.von-kunde { background: var(--rail-active); color: var(--lime-strong); }
.kc-bga-leserspalte { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-bga-leser-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--kc-l2); }
.kc-bga-leser-kopf > div { display: grid; gap: 2px; }
.kc-bga-leser-kopf small { font-size: .875rem; color: var(--ink-faint); }
.kc-bga-leser h2 { margin: 0; font-size: 1.125rem; }
.kc-bga-leser-text { display: grid; gap: var(--kc-l2); }
.kc-bga-leser-text p { margin: 0; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.kc-bga-anhaenge { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-bga-anhaenge li { display: flex; align-items: center; gap: var(--kc-l1); font-size: .9375rem; overflow-wrap: anywhere; }
.kc-bga-anhaenge a { color: var(--lime-strong); }
.kc-bga-antwort label { font-weight: 600; }
.kc-bga-antwort textarea { width: 100%; min-height: 8rem; padding: var(--kc-l2); border: 1px solid var(--line-strong); border-radius: var(--r, 12px);
  background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.kc-bga-antwort textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-knopfleiste > .kc-knopf-huelle { display: contents; }
.kc-bga-antwort-leiste { margin-top: 0; }
.kc-bga-datei { display: inline-flex; }
.kc-bga-je { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-bga-dokliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bga-dokliste li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--kc-l1) var(--kc-l2); }
.kc-bga-dokliste li > span:not(.kc-bga-datei) { display: grid; gap: 2px; min-width: 0; }
.kc-bga-dokliste li b { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.kc-bga-dokliste li small { font-size: .875rem; color: var(--ink-faint); }
.kc-bga-dokliste li .kc-bga-datei { grid-column: 2; }
.kc-bga-dokliste li.fehlt .ic { color: var(--warn); }
.kc-bga-dokliste li:not(.fehlt) .ic { color: var(--good); }
.kc-bga-dokgruppe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-l2); padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-bga-dokgruppe > div { display: grid; gap: 2px; }
.kc-bga-dok-oben { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--kc-l1); min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kc-bga-dok-oben::-webkit-scrollbar { display: none; }
.kc-bga-dok-oben .kc-bg-reiter { flex-wrap: nowrap; flex: 1 1 auto; min-width: max-content; }
.kc-bga-dok-oben .kc-bg-reiter-knopf { flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kc-bga-dok-oben > .kc-bga-datei { flex: none; margin-left: auto; }
.kc-bga-dok-oben > .kc-bga-datei .btn { box-shadow: none; }
.kc-bga-filter-zahl { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-bg-reiter-knopf[aria-selected="true"] .kc-bga-filter-zahl { background: var(--surface); }
/* Kommunikation (D15): Suche im CI, Treffer, ein Leerzustand. */
.kc-bga-suchfeld { height: 44px; }
.kc-bga-treffer { margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-bga-treffer:empty { display: none; }
.kc-bga-leer { padding: var(--kc-l2) var(--kc-l1); font-size: .9375rem; color: var(--ink-faint); list-style: none; }
.kc-bga-doktabelle { display: grid; min-width: 0; }
.kc-bga-dokzeile { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-bga-dokzeile.kopf { display: none; }
.kc-bga-dokzeile.aktiv { background: var(--rail-active); }
.kc-bga-dokzelle { min-width: 0; font-size: .9375rem; }
.kc-bga-dokzelle[data-titel]:not([data-titel="Name"])::before { content: attr(data-titel) ": "; color: var(--ink-faint); font-size: .875rem; }
.kc-bga-dokname { display: flex; align-items: center; gap: var(--kc-l1); min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer; hyphens: auto; }
.kc-bga-dokname:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bga-dokzeile.fehlt .kc-bga-dokname .ic { color: var(--warn); }
/* Als Tabelle erst ab einer Inhaltsspalte, in der der Name Platz hat; darunter
   steht je Dokument ein Block mit beschrifteten Zeilen. */
.kc-bga-dokzeile { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: center; padding-inline: var(--kc-l1); }
.kc-bga-dokzelle[data-titel="Name"] { grid-column: 1 / -1; }
@media (min-width: 1700px) {
  .kc-bga-dokzeile, .kc-bga-dokzeile.kopf { display: grid; grid-template-columns: minmax(0, 2.4fr) 6rem 6.5rem 7.5rem 8rem auto; gap: var(--kc-l2); }
  .kc-bga-dokzelle[data-titel="Name"] { grid-column: auto; }
  .kc-bga-dokzeile.kopf { font-size: .875rem; color: var(--ink-faint); font-weight: 600; }
  .kc-bga-dokzelle[data-titel]:not([data-titel="Name"])::before { content: none; }
}
.kc-bga-vorschau { justify-items: start; }
.kc-bga-vorschaubild { display: block; width: 100%; max-width: 44rem; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface-2); }
.kc-bga-zeit li.achtung { border-left-color: var(--warn); }

/* ================================================== Runde 2, Punkt 7 ==
   Konten & Bankensicht (public/portal-konten.js) und die PSD2-Leiste im
   Bürgschaften-Onboarding. Präfix kc-kto; nur Haus-Token. */
.kc-bgo-psd2 > .kc-bgo-psd2-knoepfe { display: flex; flex-wrap: wrap; gap: var(--kc-l1); grid-column: 2; }
@media (min-width: 600px) { .kc-bgo-psd2 > .kc-bgo-psd2-knoepfe { grid-column: auto; justify-content: flex-end; } }
.kc-kto { display: grid; gap: var(--kc-l4); min-width: 0; }
.kc-kto .kc-block-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--kc-l2); }
.kc-kto-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); }
.kc-kto-demo { display: inline-flex; align-items: center; padding: 2px var(--kc-l1); border-radius: 999px; background: var(--rail-active); color: var(--lime-strong); font-size: .8125rem; font-weight: 600; }
.kc-kto-punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-kto-punkte li { display: flex; gap: var(--kc-l2); align-items: flex-start; color: var(--ink-soft); }
.kc-kto-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--kc-l2); }
.kc-kto-kennzahl { display: flex; gap: var(--kc-l2); align-items: center; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); min-width: 0; }
.kc-kto-kennzahl > div { display: grid; gap: 2px; min-width: 0; }
.kc-kto-kennzahl b { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-kto-kennzahl span { font-size: .875rem; color: var(--ink-faint); }
.kc-kto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--kc-l3); }
.kc-kto-konto { display: grid; gap: var(--kc-l2); align-content: start; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); min-width: 0; }
.kc-kto-konto-kopf { display: flex; gap: var(--kc-l2); align-items: center; min-width: 0; }
.kc-kto-konto-kopf > div { display: grid; gap: 2px; min-width: 0; }
.kc-kto-konto-kopf small { font-size: .875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-kto-saldo { display: grid; gap: 2px; }
.kc-kto-saldo b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-kto-saldo small { font-size: .875rem; color: var(--ink-faint); }
.kc-kto-linie { width: 100%; height: 40px; }
.kc-kto-linie polyline { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kc-kto-letzte { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kc-kto-letzte li { display: flex; justify-content: space-between; gap: var(--kc-l1); font-size: .875rem; min-width: 0; }
.kc-kto-letzte li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.kc-kto-ein { color: var(--good); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-kto-aus { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-kto-konto > .btn { justify-self: start; }
.kc-kto-tabelle { display: grid; min-width: 0; }
.kc-kto-zeile { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-kto-datum { font-size: .875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kc-kto-text { display: grid; gap: 2px; min-width: 0; }
.kc-kto-text b, .kc-kto-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-kto-text small { font-size: .8125rem; color: var(--ink-faint); }
.kc-kto-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-l2); font-size: .875rem; color: var(--ink-faint); }
.kc-kto-bestaetigen, .btn.ist-bestaetigen { border-color: var(--bad); color: var(--bad); }
.kc-kto-gesamt { display: flex; flex-wrap: wrap; gap: var(--kc-l4); align-items: center; }
.kc-kto-ring { --anteil: 0; flex: 0 0 auto; width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-content: center; justify-items: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--good) calc(var(--anteil) * 1%), var(--line) 0); }
.kc-kto-ring b { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.kc-kto-ring small { font-size: .8125rem; color: var(--ink-faint); }
.kc-kto-ampelzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--kc-l2); flex: 1 1 20rem; }
.kc-kto-ampelzahlen > div { display: grid; grid-template-columns: auto auto; gap: 2px var(--kc-l1); align-items: center; justify-content: start; }
.kc-kto-ampelzahlen b { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-kto-ampelzahlen span:not(.kc-kto-punkt) { grid-column: 1 / -1; font-size: .875rem; color: var(--ink-faint); }
.kc-kto-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); flex: none; }
.kc-kto-punkt.ist-green { background: var(--good); }
.kc-kto-punkt.ist-yellow { background: var(--warn); }
.kc-kto-punkt.ist-red { background: var(--bad); }
.kc-kto-hinweis { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.kc-kto-paywall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: center; padding: var(--kc-l3); border: 1px solid var(--lime); border-radius: var(--r-lg, 16px); background: var(--rail-active); }
.kc-kto-paywall > div { display: grid; gap: 4px; min-width: 0; }
.kc-kto-paywall small { font-size: .875rem; color: var(--ink-soft); line-height: 1.45; }
.kc-kto-paywall > .btn { grid-column: 2; justify-self: start; }
@media (min-width: 900px) { .kc-kto-paywall { grid-template-columns: auto minmax(0, 1fr) auto; } .kc-kto-paywall > .btn { grid-column: auto; } }
/* V-P2-2 (oktogen-verifier 421b9cb): höchstens drei Spalten, gleiche Höhen je Reihe (stretch). */
.kc-kto-cluster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l3); align-items: stretch; }
@media (min-width: 760px) { .kc-kto-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-kto-cluster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-kto-clusterkarte { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); min-width: 0; align-content: start; }
.kc-kto-cluster-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: start; }
.kc-kto-cluster-kopf > div { display: grid; gap: 2px; min-width: 0; }
.kc-kto-cluster-kopf small { font-size: .8125rem; color: var(--ink-faint); line-height: 1.4; }
.kc-kto-gesundheit { font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-kto-merkmale { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-kto-merkmale li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l1); align-items: start; }
.kc-kto-merkmale li > .kc-kto-punkt { margin-top: 5px; }
.kc-kto-merkmale li > div { display: grid; gap: 2px; min-width: 0; }
.kc-kto-merkmale b { font-size: .9375rem; font-weight: 600; }
.kc-kto-merkmale small { font-size: .8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-kto-merkmale li.ist-grey b { color: var(--ink-faint); font-weight: 500; }
.kc-kto-basis { color: var(--ink-faint) !important; }
.kc-kto-gesperrt { color: var(--ink-faint) !important; font-style: italic; }
.kc-kto-hebel { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--lime-strong) !important; font-size: .8125rem; }
.kc-kto-hebel .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 599px) {
  .kc-kto-kennzahl, .kc-kto-konto, .kc-kto-clusterkarte, .kc-kto-paywall { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
  .kc-kto-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-kto-datum { grid-column: 1 / -1; }
}
.kc-kto-leer { font-size: .875rem; color: var(--ink-faint); }
/* Die Leiste sitzt auch in schmalen Karten (Teil Banken): Knöpfe immer in eigener Zeile unter dem Text. */
.kc-bgo-psd2 > .kc-bgo-psd2-knoepfe { grid-column: 1 / -1; justify-content: flex-start; }
.kc-bgo-psd2:has(> .kc-bgo-psd2-knoepfe) { grid-template-columns: auto minmax(0, 1fr); }

/* ================================================== Unternehmensprofil ==
   Kostenloses Onboarding aus dem Datenpunkt-Register (public/portal-onboarding.js,
   docs/DATENPUNKT-REGISTER.md). Präfix kc-dp, nur Token des Kundencenters. */
.kc-dp { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-dp-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--kc-l2); }
.kc-dp-kennzahl { display: flex; gap: var(--kc-l2); align-items: flex-start; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); min-width: 0; }
.kc-dp-kennzahl > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.kc-dp-kennzahl b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-dp-kennzahl span { font-size: .875rem; color: var(--ink-faint); }
/* Telefon: Kennzahlen randlos bis an die Fensterkante, Rundung 0 (feedback_mobil_randlos, Integration 0929). */
@media (max-width: 599px) { .kc-dp-kennzahlen { gap: 0; } .kc-dp-kennzahl { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; } .kc-dp-kennzahl + .kc-dp-kennzahl { border-top: 0; } }
.kc-dp-balken { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: var(--kc-l1); }
.kc-dp-balken > i { display: block; height: 100%; background: var(--lime); }
.kc-dp-klein { margin: 0; font-size: .875rem; color: var(--ink-faint); line-height: 1.45; }
.kc-dp-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--kc-l3); align-items: stretch; }
.kc-dp-wege[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }
.kc-dp-weg { display: grid; gap: var(--kc-l1); align-content: start; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); }
.kc-dp-weg h3 { margin: 0; font-size: 1.0625rem; }
.kc-dp-weg p { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.kc-dp-weg .btn { justify-self: start; }
.kc-dp-marke { justify-self: start; padding: 2px var(--kc-l1); border-radius: 999px; background: var(--good-bg, #e8f5ec); color: var(--good); font-size: .8125rem; font-weight: 700; }
.kc-dp-marke-premium { background: var(--rail-active); color: var(--lime-strong); }
.kc-dp-reihe { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: center; }
.kc-dp-vorschlag, .kc-dp-konfliktzeile { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) 0; border-top: 1px solid var(--line); }
.kc-dp-vorschlag h4 { margin: 0; font-size: 1rem; }
.kc-dp-kurz { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 2px var(--kc-l2); margin: 0; font-size: .9375rem; }
.kc-dp-kurz dt { color: var(--ink-faint); }
.kc-dp-kurz dd { margin: 0; font-variant-numeric: tabular-nums; }
.kc-dp-kurz .kc-dp-fund { grid-column: 2; font-size: .8125rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-dp-abschnitte { display: grid; gap: var(--kc-l2); }
.kc-dp-abschnitt { border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); min-width: 0; }
.kc-dp-abschnitt-kopf { display: flex; gap: var(--kc-l2); align-items: center; width: 100%; min-height: 64px; padding: var(--kc-l2) var(--kc-l3); background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.kc-dp-abschnitt-kopf:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.kc-dp-abschnitt-titel { display: grid; gap: 2px; min-width: 0; }
.kc-dp-abschnitt-titel small { color: var(--ink-faint); font-size: .875rem; }
.kc-dp-abschnitt-inhalt { display: grid; gap: var(--kc-l2); padding: 0 var(--kc-l3) var(--kc-l3); }
/* Operator 2026-09-29 (pm-33996): jedes Feld dieselben drei Zeilen —
   Titel, Eingabe, EINE Hinweiszeile — und mehr Luft zwischen den Feldern. */
/* V-P2-1 (oktogen-verifier 421b9cb): feste Stufen 1/2/3 statt auto-fit — bei
   1920 px standen fünf Felder in einer Reihe. */
.kc-dp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l4) var(--kc-l3); }
@media (min-width: 760px) { .kc-dp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-dp-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-dp-feld { display: grid; gap: 4px; align-content: start; min-width: 0; }
.kc-dp-breit { grid-column: 1 / -1; }
.kc-dp-meta { display: block; margin: 0; min-width: 0; font-size: .8125rem; line-height: 1.4; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zweck in derselben Größe wie die übrigen Hinweise — er stand größer als
   das Etikett darüber (Operator 2026-09-28, Ordner „dbl99 Kundeportal"). */
.kc-dp-bekannt, .kc-dp-veraltet, .kc-dp-konflikt, .kc-dp-fragen, .kc-dp-zweck { font-size: .8125rem; line-height: 1.4; }
.kc-dp-bekannt { color: var(--good); }
.kc-dp-veraltet { color: var(--warn); }
.kc-dp-konflikt { color: var(--bad); }
.kc-dp-fragen { color: var(--ink-faint); }
.kc-dp-zweck { color: var(--ink-faint); }
.kc-bg-herkunft.kc-dp-bekannt { color: var(--good); }
/* D19–D21 (pm-33996): EIN Maß für jedes Eingabefeld des Profils — Text,
   Auswahl, Datum, Listenfelder: 46 px wie .inp (cf-chrome.css). Chips,
   Knöpfe und Hinweise je EINE Zeile; Raster 1/2/3 Spalten, nie 4. */
.kc-dp .kc-feld :is(input.inp, .ci-auswahl .cidd-btn, .cidt-btn) { height: 46px; min-height: 46px; }
.kc-dp .cidt-btn { border-radius: var(--r-in, 12px); font-size: .96rem; font-weight: 500; }
.kc-dp .ci-auswahl .cidd-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; min-width: 0; }
/* Mehrfachauswahl: Chip-Raster. Jeder Chip einzeilig, gleich hoch, je
   Raster gleich breit; über zwei Reihen läuft das Raster unscharf aus und
   klappt auf (Aufklapper nur, wenn gemessen etwas verborgen ist). */
.kc-dp-chipfeld { display: grid; gap: var(--kc-l1); min-width: 0; }
.kc-dp-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l1); min-width: 0; }
@media (min-width: 600px) { .kc-dp-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-dp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-dp-chips.ist-zu { max-height: calc(2 * 46px + var(--kc-l1)); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent); mask-image: linear-gradient(to bottom, black 55%, transparent); }
.kc-dp-chipfeld:has(> .kc-dp-chips-mehr[hidden]) > .kc-dp-chips.ist-zu { -webkit-mask-image: none; mask-image: none; }
.kc-dp-chip { display: flex; gap: var(--kc-l1); align-items: center; height: 46px; min-width: 0; padding: 0 var(--kc-l2); border: 1px solid var(--line-strong); border-radius: var(--r-in, 12px); background: var(--surface); font-size: .9375rem; cursor: pointer; }
.kc-dp-chip.ist-gewaehlt { border-color: var(--lime); background: var(--rail-active); }
.kc-dp-chip:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-dp .kc-dp-chip input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 0; flex: none; }
.kc-dp .kc-dp-chip input[type="checkbox"]:focus-visible { outline: none; }
.kc-dp-chip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dp-chips-mehr { justify-self: start; }
.kc-dp .kc-dp-chip input[type="checkbox"]:checked { background: var(--lime); border-color: var(--lime); }
.kc-dp-chips-mehr .ic { transform: rotate(-90deg); }
.kc-dp-chips-mehr[aria-expanded="true"] .ic { transform: rotate(90deg); }
/* Freitext über die volle Breite, mehrzeilig. */
.kc-dp textarea.kc-dp-text { height: auto; min-height: calc(4 * 1.5em + 24px); align-content: start; }
/* Listen (Geschäftsführung, Gesellschafter, Banken …): Felder im Raster
   1/2/3 wie das Formular, Entfernen in normaler Knopfgröße im Fuß. */
.kc-dp-liste { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-dp-zeilen { display: grid; gap: var(--kc-l2); }
.kc-dp-zeile { display: grid; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3) var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface-2); min-width: 0; }
.kc-dp-zeile-felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l2) var(--kc-l3); align-items: end; }
@media (min-width: 760px) { .kc-dp-zeile-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kc-dp-zeile-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc-dp-zeile-felder > .kc-feld { display: grid; gap: 6px; min-width: 0; }
.kc-dp-zeile-felder > .kc-feld > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dp-zeile-fuss { display: flex; justify-content: flex-end; }
.kc-dp-liste > .btn, .kc-dp-abschnitt-inhalt > .btn { justify-self: start; }
/* Unterlagen: eine Zeile je Unterlage, alle gleich hoch, Status als Chip. */
.kc-dp-unterlagen { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-dp-unterlagen li { display: grid; grid-template-columns: auto minmax(0, 1fr) 8.5rem; gap: var(--kc-l2); align-items: center; height: 64px; padding: 0 var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); }
.kc-dp-unterlage-text { display: grid; gap: 2px; min-width: 0; }
.kc-dp-unterlage-titel, .kc-dp-unterlage-hinweis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dp-unterlage-hinweis { color: var(--ink-faint); font-size: .875rem; }
.kc-dp-status { justify-self: stretch; text-align: center; padding: 3px var(--kc-l1); border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dp-status.st-ok { background: var(--good-bg); color: var(--good); }
.kc-dp-status.st-warn { background: var(--warn-bg); color: var(--warn); }
.kc-dp-status.st-offen { background: var(--surface-2); color: var(--ink-soft); }
/* Feld, das einem Antragsformular fehlt (Sprung aus den Formularen, B4). */
.kc-dp-feld.ist-fehlt > label::after { content: " · fehlt im Formular"; color: var(--warn); font-weight: 600; }
/* Bürgschafts-Admin: Portale je Avalgeber (B6). */
.kc-dp-portale { display: grid; gap: var(--kc-l1); padding-top: var(--kc-l3); border-top: 1px solid var(--line); }
.kc-dp-portale-titel { margin: 0; font-size: 1rem; }
.kc-dp-portal-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-dp-portal { display: grid; grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 14rem) auto; gap: var(--kc-l2); align-items: center; min-height: 64px; padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); }
.kc-dp-portal-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dp-portal-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.kc-dp-portal-pw[data-passwort="fehlt"] { font-family: inherit; color: var(--ink-faint); user-select: none; }
/* Knöpfe je Zeile gleich breit (Integration 0930: „Formular“ und „Anzeigen“ waren unterschiedlich breit). */
.kc-dp-portal-akt { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); gap: var(--kc-l1); justify-content: end; align-items: center; }
/* Fenster „Portal-Passwort“: Beschriftung über dem Feld. */
.kc-dp-pw-fenster label { display: block; margin: var(--kc-l2) 0 6px; }
.kc-dp-pw-fenster .kc-dp-portal-pw { display: block; font-size: 1.05rem; margin: var(--kc-l2) 0; }
.kc-dp-portal-code { width: 8.5rem; }
.kc-dp-portal-akt > .btn { justify-content: center; }
@media (max-width: 759px) {
  .kc-dp-portal { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-dp-portal-pw { grid-column: 1; }
  .kc-dp-portal-akt { grid-column: 1 / -1; justify-content: stretch; }
  .kc-dp-portal-akt > * { flex: 1; }
  .kc-dp-unterlagen li { grid-template-columns: auto minmax(0, 1fr) 6.5rem; }
}
.kc-dp-fuss { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center; justify-content: space-between; padding-top: var(--kc-l3); border-top: 1px solid var(--line); }
/* Mobil randlos (R145): Flächen bis zur Fensterkante. */
@media (max-width: 599px) {
  .kc-dp-abschnitt, .kc-dp-weg { margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .kc-dp-abschnitt-kopf, .kc-dp-abschnitt-inhalt { padding-inline: 20px; }
  .kc-dp-weg { padding-inline: 20px; }
  .kc-dp-kurz { grid-template-columns: minmax(0, 1fr); }
  .kc-dp-kurz .kc-dp-fund { grid-column: 1; }
}
/* Felder des Unternehmensprofils in der Hausform (.inp aus cf-chrome.css). */
.kc-dp textarea.inp { height: auto; min-height: 6rem; padding: 11px 15px; line-height: 1.5; resize: vertical; }
.kc-dp select.inp { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2383858C' stroke-width='1.8' stroke-linecap='round'><path d='M6 8l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.kc-dp .kc-dp-reihe .ci-auswahl { width: auto; flex: 1 1 16rem; min-width: 0; max-width: 100%; }
.kc-dp-feld > label { font-weight: 600; font-size: .9375rem; }
/* Kein Kind darf die Spalte über die Fensterbreite drücken (lange Dateinamen in der Auswahl). */
.kc-dp > *, .kc-dp-weg, .kc-dp-wege > * { min-width: 0; }
.kc-dp-weg { grid-template-columns: minmax(0, 1fr); }
.kc-dp-reihe { min-width: 0; }

/* Runde 2 Punkt 3 (pm-33945): druckt jemand eine Seite der Bürgschaften-Strecke
   mit der Browserfunktion, fällt der Rand weg — ohne Rand setzt Chromium keinen
   Kopf/Fuß mit Datum und Adresse. Das Blatt mit Kopf, Fuß und Hinweisen kommt
   ohnehin als PDF vom Server („Als PDF drucken“). Eigene Seite nur für .kc-bg. */
@page bgblatt { margin: 0; }
@media print {
  .kc-bg { page: bgblatt; padding: 14mm 16mm; }
  .kc-bg .kc-bg-krumen, .kc-bg .kc-bg-rail, .kc-bg .kc-bg-fuss, .kc-bg .kc-bg-leiste, .kc-bg [data-druck], .kc-bg .kc-bg-kachel { display: none !important; }
  .kc-bg .kc-bg-raster { display: block; }
}

/* Runde 2 Punkt 11 (pm-33945): Angebot auf einen Blick — Rahmen, Prämie p. a. in € und %,
   Aufteilung je Bürgschaftsart als Balken. */
.kc-bg-angebot { display: grid; gap: var(--kc-l2); margin-top: var(--kc-l2); }
.kc-bg-angebot-zahlen { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.kc-bg-angebot.kurz .kc-bg-angebot-zahlen { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.kc-bg-angebot-zahl { display: flex; gap: var(--kc-l1); align-items: flex-start; min-width: 0; }
.kc-bg-angebot-zahl > div { display: grid; gap: 1px; min-width: 0; }
.kc-bg-angebot-zahl b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-bg-angebot-zahl span, .kc-bg-angebot-zahl small { font-size: .8125rem; color: var(--ink-faint); }
.kc-bg-aufteilung { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l1); }
.kc-bg-aufteilung li { display: grid; gap: 4px; }
.kc-bg-aufteilung-kopf { display: flex; justify-content: space-between; gap: var(--kc-l1); font-size: .875rem; }
.kc-bg-aufteilung-kopf span { min-width: 0; overflow-wrap: anywhere; }
.kc-bg-aufteilung-kopf b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kc-bg-aufteilung-balken { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.kc-bg-aufteilung-balken span { display: block; height: 100%; background: var(--lime); border-radius: 3px; }
.kc-bg-aufteilung small { font-size: .8125rem; color: var(--ink-faint); }
.kc-bgt-praemie { display: grid; gap: 1px; }
.kc-bgt-praemie small { font-size: .75rem; color: var(--ink-faint); font-weight: 400; }
.kc-bgt-praemiezeile { display: block; color: var(--ink-soft); }

/* Runde 2 Punkt 9: eine gewählte Zusage bleibt Zweitknopf, trägt aber sichtbar die Wahl. */
.btn.btn-ghost.ist-gewaehlt { border-color: var(--good); color: var(--good); background: var(--good-bg); }

/* ============================================== Knopf-Regel (pm-33945 R2) ==
   Operator 2026-09-26: „die Buttons sind alle unterschiedlich — gemäß
   Design-System anpassen, systemisch“. EINE Regel, gemessen von
   test/knopf-system-probe.mjs (0 px Toleranz):
     normal  .btn         44 px hoch · Radius 12 · Schrift .94rem (15.04 px) · 700
     klein   .btn.btn-sm  38 px hoch · Radius 10 · Schrift .88rem (14.08 px) · 700
   Maße kommen allein aus cf-chrome.css (.btn/.btn-sm); ein Bereich darf
   Breite und Ausrichtung setzen, nie Höhe, Radius oder Schrift. Rollen:
   Hauptknopf .btn-primary · Zweitknopf .btn-ghost · Gefahr .btn-ghost.kc-gefahr
   (Rahmen und Schrift rot, Papierkorb-Zeichen) · Gefahr bestätigt .kc-gefahr-voll.
   Zeichen stehen links vom Text (18 px). */

/* Unterlagen: Werkzeugleiste, Gruppen, Karten (Runde 2, pm-33945 #71233). */
.kc-unt-liste { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-unt-leiste { display: grid; gap: var(--kc-l2); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .kc-unt-leiste { grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 14rem) minmax(11rem, 14rem); } }
.kc-unt-feld { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--kc-l1); align-items: center; min-width: 0; }
.kc-unt-feld > .ic { width: 16px; height: 16px; color: var(--ink-faint); }
.kc-unt-etikett { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-unt-feld > .inp { grid-column: 1 / -1; width: 100%; min-width: 0; height: 44px; }
.kc-unt-feld > .cidd { grid-column: 1 / -1; width: 100%; min-width: 0; }
.kc-unt-feld > .cidd .cidd-btn { width: 100%; height: 44px; }
.kc-unt-treffer { margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-unt-treffer:empty { display: none; }
.kc-unt-gruppen { display: grid; gap: var(--kc-l4); min-width: 0; }
.kc-unt-gruppe { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-unt-gruppe-kopf { display: flex; align-items: center; gap: var(--kc-l1); margin: 0; font-size: 1rem; font-weight: 700; }
.kc-unt-gruppe-kopf .ic { width: 18px; height: 18px; color: var(--lime-strong); }
.kc-unt-art { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; padding: 2px 10px 2px 8px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: .8125rem; font-weight: 600; }
.kc-unt-art .ic { width: 14px; height: 14px; flex: none; color: var(--lime-strong); }
.kc-unt-art > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-unt-mass { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .875rem; color: var(--ink-faint); }
.kc-unt-mass .ic { width: 14px; height: 14px; flex: none; }
.kc-unt-mass .ic:not(:first-child) { margin-left: var(--kc-l1); }
.kc-unterlage-text { gap: var(--kc-l1); }
/* 10.5rem: „Herunterladen“ mit Zeichen braucht die Breite — bei 8.5rem wurde es mit „…“ abgeschnitten, sobald zwei Knöpfe nebeneinander standen (cta-einzeilig Z2, Gesamtlauf dd63e9f). */
.kc-unterlage-akt { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--kc-l1); margin-top: var(--kc-l2); }
.kc-unterlage-akt .btn { width: 100%; min-width: 0; justify-content: center; }
.kc-raster[data-raster="1"] .kc-unterlage-akt { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 11rem)); justify-content: end; }
.kc-raster[data-raster="4"] .kc-unterlage-akt { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 599px) {
  .kc-unt-leiste { margin-inline: 0; }
  .kc-raster[data-raster="1"] .kc-unterlage-akt { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); justify-content: stretch; }
}

/* Mitwachsendes Textfeld im Unternehmensprofil: gleiche Starthöhe wie ein
   einzeiliges Feld, kein Ziehgriff (Operator 2026-09-28, Fehler1). */
/* Leerzustand: der Knopf steht unter dem mittig gesetzten Text, nicht am
   linken Rand (Operator 2026-09-28, Angebotsseite der Prüfkopie). */
.kc-leerbild + .kc-akt { justify-content: center; }
/* Angebotsseite nach Richtung „Ledger Grid“ (design-scout 2026-09-28,
   Operator: „Design nicht SOTA angepasst“): Beträge als Tabellenziffern,
   damit Zahlen untereinander fluchten; Belegnummer als ruhige Referenz statt
   gesperrter Großbuchstaben; Merkmale in fester Zeilenhöhe. Die rote
   Überfahr-Karte bleibt (Operator-Vorgabe Punkt 7), jetzt lesbar. */
.kc-paket-zahl, .kc-paket-einheit, .kc-paket-liste { font-variant-numeric: tabular-nums; }
.kc-paket-nr { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: none; font-variant-numeric: tabular-nums; }
.kc-pakete[data-raster="3"] .kc-paket-nr { font-size: .75rem; letter-spacing: .01em; }
.kc-merkmal { line-height: 1.45; }

/* ===== Angebotsseite, Operator 2026-09-28 („Produkt und Preis sind primär,
   die Angebotsnummer ist sekundär und ohne visuelle Aussagekraft“; „jede
   Sektion muss für sich stehen und sichtbar beginnen“; „kein Hover-Effekt“) */
/* Produkt zuerst, dann Preis; die Nummer tritt zurück. */
.kc-paket .kc-paket-bild { order: -2; }
.kc-paket h3 { order: -1; }
.kc-paket-nr { font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }
.kc-paket-kopf .kc-sym { display: none; }
.kc-paket-kopf { order: 1; }
/* 1 — Liste: Bild | Produkt, Preis-Nebeninfo, Merkmale in EINER Spalte | Preis und Knopf. */
.kc-pakete[data-raster="1"] .kc-paket { grid-template-areas: "bild titel preis" "bild kopf preis" "bild merkmale preis" "bild merkmale akt"; align-items: start; }
.kc-pakete[data-raster="1"] .kc-paket-merkmale { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kc-pakete[data-raster="1"] .kc-paket-bild { min-height: 100%; }
/* 2 — große Karte: Nummer unter dem Preisblock, klein. */
.kc-pakete[data-raster="2"] .kc-paket-bild { height: 168px; }
/* 4 — Kachel: lang gezogen mit Bildband, Produkt, Preis, dann Nummer. */
.kc-pakete[data-raster="4"] .kc-paket { padding: 0 0 16px; min-height: 22rem; gap: 10px; }
.kc-pakete[data-raster="4"] .kc-paket > :not(.kc-paket-bild, .kc-paket-band) { margin-inline: 16px; }
.kc-pakete[data-raster="4"] .kc-paket-bild { display: block; height: 132px; border-radius: 15px 15px 0 0; flex: none; }
.kc-pakete[data-raster="4"] .kc-paket h3 { order: 1; font-size: 1rem; font-weight: 800; margin-top: 4px; }
.kc-pakete[data-raster="4"] .kc-paket-preis { order: 2; margin-top: 0; }
.kc-pakete[data-raster="4"] .kc-paket-kopf { order: 3; }
.kc-pakete[data-raster="4"] .kc-akt { order: 4; }
/* Eigene Sektionen: Konfigurator und Weitere Leistungen beginnen sichtbar neu. */
.kc-block.kc-sektion { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line); }
.kc-block.kc-sektion > .kc-block-kopf h2 { font-size: 1.5rem; }
.kc-block.kc-sektion > .kc-block-kopf { margin-bottom: 24px; }
/* Produktkarten reagieren sichtbar auf den Zeiger. */
.kc-produkt { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.kc-produkt:hover, .kc-produkt:focus-within { border-color: var(--lime); box-shadow: 0 8px 24px rgba(19, 17, 26, .08); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kc-produkt { transition: none; } .kc-produkt:hover { transform: none; } }
/* Nummer ohne Tabellenziffern (sperrte „AN-1000-…“ auseinander); der Chip
   „Kundenkonfiguration“ ist Auskunft, keine Warnung — neutral statt rot. */
.kc-paket-nr, .kc-pakete[data-raster] .kc-paket-nr { font-variant-numeric: normal; letter-spacing: 0; }
.kc-paket .kc-chip-konfig { border-color: var(--line); color: var(--ink-soft); background: var(--surface-2); font-weight: 600; }

/* ------------------------------------------------------------ Verifikation
   pm-33996 (public/portal-verifikation.js). Hausregel: Raster 1/2/3 Spalten,
   Karten einer Reihe gleich hoch mit fluchtenden Zeilen (subgrid), flach wie
   eine Druckansicht (kein Schatten auf Karte oder Knopf), keine Schrift unter
   14 px; unter 600 px randlos ohne Container. Nur Token der Schale. */
.kc-vf { display: grid; gap: var(--kc-l4); min-width: 0; }
.kc-vf .btn, .kc-vf-fenster .btn { box-shadow: none; }
.kc-vf .btn-primary:hover, .kc-vf-fenster .btn-primary:hover { box-shadow: none; transform: none; }
.kc-vf-kopf, .kc-seite-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--kc-l2) var(--kc-l3); }
.kc-vf-kopf-text, .kc-seite-kopf-text { display: grid; gap: 6px; min-width: 0; flex: 1 1 26rem; }
.kc-vf-kopf h1, .kc-seite-kopf h1 { margin: 0; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.kc-vf-unter, .kc-seite-unter { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.kc-vf-so { flex: 0 0 auto; }
.kc-vf-probehinweis { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); font-size: .875rem; color: var(--ink-soft); }
.kc-vf-klein { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-faint); }

.kc-vf-reihe { display: grid; gap: var(--kc-l3); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.kc-vf-sym { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--lime) 9%, var(--surface)); color: var(--lime); }
.kc-vf-sym .ic { width: 22px; height: 22px; }
.kc-vf-titel { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.kc-vf-unterzeile { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }

/* Chips: Zustand in Farbe UND Wort (nie Farbe allein). */
.kc-vf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.kc-vf-chip .ic { width: 14px; height: 14px; }
.kc-vf-chip.ist-gut { background: var(--good-bg); color: var(--good); }
.kc-vf-chip.ist-warten { background: var(--warn-bg); color: var(--warn); }
.kc-vf-chip.ist-schlecht { background: var(--bad-bg); color: var(--bad); }
.kc-vf-chip.ist-neutral { background: var(--surface-3); color: var(--ink-soft); }

/* Reihe 1: drei Karten, fünf feste Zeilen (Kopf, Titel, Unterzeile, Werte, Knopf). */
.kc-vf-karte { display: grid; gap: var(--kc-l2); align-content: start; min-width: 0; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r, 14px); }
.kc-vf-karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kc-l1); }
.kc-vf-werte { display: grid; gap: 10px; align-content: start; min-width: 0; }
.kc-vf-wert { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kc-l2); font-size: .9375rem; min-width: 0; }
.kc-vf-wert-k { color: var(--ink-faint); flex: none; }
.kc-vf-wert-v { font-weight: 600; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kc-vf-karte-fuss { display: grid; align-content: end; }
.kc-vf-knopf.btn { width: 100%; justify-content: center; margin: 0; }
.kc-vf-knopf.btn > .ic:last-child { margin-left: 2px; }
.kc-vf-konto { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); padding: 10px 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.kc-vf-konto-text { display: grid; gap: 2px; min-width: 0; }
.kc-vf-konto-text b { font-size: .9375rem; }
.kc-vf-konto-text small { font-size: .875rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-vf-konto .btn { flex: none; }
.kc-vf-unterschrift-bild { display: grid; place-items: center; height: 84px; padding: 6px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-2); }
.kc-vf-unterschrift-bild img { display: block; max-width: 100%; max-height: 70px; width: auto; height: auto; }
.kc-vf-schalter { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 4px 0; background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.kc-vf-schalter:disabled { cursor: not-allowed; color: var(--ink-faint); }
.kc-vf-schalter-bahn { position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; background: var(--line-strong); transition: background .16s; }
.kc-vf-schalter-bahn::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .16s; }
.kc-vf-schalter[aria-checked="true"] .kc-vf-schalter-bahn { background: var(--lime); }
.kc-vf-schalter[aria-checked="true"] .kc-vf-schalter-bahn::after { transform: translateX(18px); }
.kc-vf-schalter:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

/* Reihe 2: Schrittleiste (2/3) und Aktionskarte (1/3), gleich hoch. */
.kc-vf-status, .kc-vf-aktion, .kc-vf-tafel { display: grid; gap: var(--kc-l3); align-content: start; min-width: 0; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r, 14px); }
.kc-vf-status-kopf, .kc-vf-tafel-kopf { display: flex; align-items: flex-start; gap: var(--kc-l2); min-width: 0; }
.kc-vf-status-kopf > div, .kc-vf-tafel-kopf > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.kc-vf-tafel-kopf > .btn { flex: none; }
.kc-vf-leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--kc-l1); }
.kc-vf-schritt { position: relative; display: grid; justify-items: start; gap: 4px; min-width: 0; }
.kc-vf-schritt::before { content: ''; position: absolute; top: 12px; left: 32px; right: calc(-1 * var(--kc-l1) + 4px); height: 2px; background: var(--line); }
.kc-vf-schritt:last-child::before { display: none; }
.kc-vf-schritt.ist-erfuellt::before { background: var(--good); }
.kc-vf-punkt { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--surface); }
.kc-vf-schritt.ist-erfuellt .kc-vf-punkt { border-color: var(--good); background: var(--good); }
.kc-vf-punkt .ic { width: 14px; height: 14px; }
.kc-vf-schritt b { font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.kc-vf-schritt small { font-size: .875rem; color: var(--ink-faint); }
.kc-vf-schritt.ist-erfuellt small { color: var(--good); font-weight: 600; }
.kc-vf-schritt.ist-optional small { font-style: italic; }
.kc-vf-aktion { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: stretch; }
.kc-vf-aktion.ist-fertig { background: color-mix(in srgb, var(--lime) 4%, var(--surface)); border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); }
.kc-vf-aktion-text { display: grid; gap: 4px; min-width: 0; }
.kc-vf-cta.btn { grid-column: 1 / -1; align-self: end; width: 100%; justify-content: center; margin: 0; white-space: nowrap; text-align: center; height: 44px; }

/* Reihe 3: zwei Tafeln mit Tabelle, je 1/2. */
.kc-vf-leer { margin: 0; font-size: .9375rem; color: var(--ink-faint); }
.kc-vf-tabelle { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9375rem; }
.kc-vf-tabelle th { padding: 0 8px 8px; text-align: left; font-size: .875rem; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.kc-vf-tabelle td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: middle; min-width: 0; }
.kc-vf-tabelle th:first-child, .kc-vf-tabelle td:first-child { padding-left: 0; }
.kc-vf-tabelle th:last-child, .kc-vf-tabelle td:last-child { padding-right: 0; text-align: right; }
.kc-vf-td-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kc-vf-tabelle { table-layout: fixed; }
.kc-vf-tabelle th:nth-child(1) { width: 38%; }
.kc-vf-tabelle th:nth-child(2) { width: 27%; }
.kc-vf-tabelle.ist-dok th:nth-child(2) { width: 22%; }
.kc-vf-tabelle.ist-dok th:nth-child(4) { width: 104px; }
.kc-vf-tabelle th:nth-child(4) { width: 48px; }
.kc-vf-td-person > div { display: grid; gap: 1px; min-width: 0; }
.kc-vf-td-person b { font-weight: 700; overflow-wrap: anywhere; }
.kc-vf-td-person small { font-size: .875rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-vf-kuerzel, .kc-vf-dok-sym { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--surface-3); color: var(--ink-soft); font-size: .875rem; font-weight: 800; }
.kc-vf-dok-sym { color: var(--lime); background: color-mix(in srgb, var(--lime) 9%, var(--surface)); }
.kc-vf-dok-sym .ic { width: 18px; height: 18px; }
.kc-vf-rolle { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--ink-soft); }
.kc-vf-rolle.ist-gf, .kc-vf-rolle.ist-prokura { background: color-mix(in srgb, var(--lime) 10%, var(--surface)); color: var(--lime-strong); }
.kc-vf-td-status { white-space: normal; }
.kc-vf-status-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kc-vf-status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.kc-vf-status-text.ist-gut .kc-vf-status-punkt { background: var(--good); }
.kc-vf-status-text.ist-warten .kc-vf-status-punkt { background: var(--warn); }
.kc-vf-status-text.ist-schlecht .kc-vf-status-punkt { background: var(--bad); }
.kc-vf-vertretung { display: block; margin-top: 2px; font-size: .875rem; white-space: normal; }
.kc-vf-vertretung.ist-gut { color: var(--good); }
.kc-vf-vertretung.ist-warten { color: var(--warn); }
.kc-vf-mehr.btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
.kc-vf-details.btn { padding-inline: 10px; }
.kc-vf-hash { font-size: .875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Fenster: Unterschrift, Einwilligung, Person, Probe. */
.kc-vf-fenster { width: min(40rem, calc(100vw - 32px)); }
.kc-vf-fenster > * + * { margin-top: var(--kc-l2); }
.kc-vf-form { display: grid; gap: var(--kc-l2); }
.kc-vf-teil { display: grid; gap: var(--kc-l1); padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-vf-teil .btn { justify-self: start; }
.kc-vf-zeichenflaeche { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; }
.kc-vf-zeichenflaeche canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.kc-vf-linie { position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1px dashed var(--line-strong); pointer-events: none; }
.kc-vf-autopilot-bild { display: grid; gap: 6px; padding: var(--kc-l1) var(--kc-l2); border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); }
.kc-vf-autopilot-bild img { max-height: 56px; max-width: 100%; width: auto; }
.kc-vf-autopilot-bild small { font-size: .875rem; color: var(--ink-faint); }

@media (min-width: 1280px) {
  /* Drei gleiche Karten mit fluchtenden Zeilen: jede Karte ist ein Subgrid
     über die fünf Zeilen der Reihe. */
  .kc-vf-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; row-gap: 0; }
  .kc-vf-drei > .kc-vf-karte { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--kc-l2); }
  .kc-vf-zweidrittel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* „Personen im Unternehmen“ und „Anträge & Verträge“ stehen in voller
     Breite untereinander (Integration 0929): halbiert brachen E-Mail und
     Status um. */
}
/* Schrittleiste: jede Stufe ein Subgrid über drei Zeilen (Punkt, Titel,
   Stand) — ein zweizeiliger Titel („Digitale Unterschrift“) macht die
   Titelzeile ALLER Stufen gleich hoch, der Stand fluchtet (Integration 0929). */
@media (min-width: 720px) {
  .kc-vf-leiste { grid-template-rows: auto auto auto; row-gap: 4px; }
  .kc-vf-schritt { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; }
  .kc-vf-schritt b { align-self: stretch; text-wrap: balance; }
}
@media (max-width: 719px) {
  .kc-vf-leiste { grid-template-columns: minmax(0, 1fr); gap: var(--kc-l2); }
  .kc-vf-schritt { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--kc-l2); align-items: center; }
  .kc-vf-schritt b { grid-column: 2; }
  .kc-vf-schritt small { grid-column: 2; }
  .kc-vf-punkt { grid-row: 1 / span 2; }
  .kc-vf-schritt::before { top: 28px; bottom: calc(-1 * var(--kc-l2)); left: 12px; right: auto; width: 2px; height: auto; }
}
/* Telefon: randlos bis an die Fensterkante, Rundung 0 (feedback_mobil_randlos). */
@media (max-width: 599px) {
  .kc-vf-karte, .kc-vf-status, .kc-vf-aktion, .kc-vf-tafel {
    margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
  .kc-vf-so.btn { width: 100%; justify-content: center; }
  .kc-vf-tafel-kopf { flex-wrap: wrap; }
  .kc-vf-tafel-kopf > .btn { width: 100%; justify-content: center; }
  .kc-vf-tabelle thead { display: none; }
  .kc-vf-tabelle, .kc-vf-tabelle tbody { display: block; }
  .kc-vf-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--kc-l2); padding: 12px 0; border-top: 1px solid var(--line); }
  .kc-vf-tabelle td { display: block; padding: 0; border: 0; text-align: left; }
  .kc-vf-tabelle td:last-child { text-align: right; grid-column: 2; grid-row: 1; align-self: center; }
  .kc-vf-tabelle td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--kc-l2); white-space: normal; }
  .kc-vf-tabelle td[data-label]::before { content: attr(data-label); color: var(--ink-faint); font-size: .875rem; }
  .kc-vf-td-status { text-align: right; }
}

/* Grundregel des Plans (Operator 2026-09-29, pm-33996): keine harten
   Schatten im Kundencenter — Karten stehen flach mit Linie, wie Druck/PDF.
   Fenster und aufklappende Menüs behalten ihren Schatten (sie schweben). */
#kc-main .card, #kc-main .kc-dr { box-shadow: none; }
/* Integration 0929: auch die Startseite der Bürgschaften steht flach (Karten, Zahlenleiste, Marke). */
#kc-main .kc-bg-start-karte, #kc-main .kc-bg-start-zahlen, #kc-main .kc-bg-start-karte2, #kc-main .kc-bg-start-marke { box-shadow: none; }

/* Formulare 0930 (pm-33996, C8–C12, B5): Bearbeiter wie das
   Verhandlungsprotokoll B&O der SSR — alle Seiten des echten PDFs
   untereinander, Felder im Blatt anklickbar. Raster 1/2, keine Schatten,
   Knöpfe einer Reihe gleich breit, CTA einzeilig, mobil randlos. */
.kc-bga-vorschau-seiten { display: grid; gap: var(--kc-l2); width: 100%; max-height: 80vh; overflow: auto; padding-right: 2px; }
.kc-bgf-hinweis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kc-l2) var(--kc-l3); align-items: center;
  margin-bottom: var(--kc-l3); padding: var(--kc-l3); border: 1px solid var(--warn); border-radius: var(--r-lg, 16px); background: var(--warn-bg); }
.kc-bgf-hinweis-text { display: grid; gap: 4px; }
.kc-bgf-hinweis-text p { margin: 0; font-size: .9375rem; line-height: 1.5; }
.kc-bgf-hinweis .btn, .kc-bgf-hand-akt .btn, .kc-bgf-weg .btn, .kc-bg-formular-aktionen .btn { white-space: nowrap; justify-content: center; box-shadow: none; }
.kc-bgf-zahlweg { display: flex; flex-wrap: wrap; gap: var(--kc-l1) var(--kc-l2); align-items: center; }
.kc-bgf-zahlweg-wahl { width: auto; min-width: 12rem; }
.kc-bg-formular-aktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.kc-bg-formular-aktionen .kc-bg-formular-hash { grid-column: 1 / -1; }
/* Produktunterlagen und Abruf je Avalgeber (Operator 2026-10-01, lib/bg-unterlagen.mjs):
   je Avalgeber eine Zeile in der Bauform der Antragsformulare (gleiche Maße
   wie .kc-bg-formular, eigene Klasse — die Zeile ist kein Formular), darin
   die Unterlagen als Liste (Text links, ein Knopf rechts) und die
   Abruf-Hinweise als Begriffsliste. Am Telefon eine Spalte. */
.kc-bgu-geber { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) 0; border-top: 1px solid var(--line); }
.kc-bgu-geber:first-of-type { border-top: 0; }
.kc-bgu-kopf { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bgu-titel { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kc-bgu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-l1); }
.kc-bgu-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; gap: var(--kc-l1) var(--kc-l2); align-items: center; }
.kc-bgu-zeile > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kc-bgu-zeile .btn { white-space: nowrap; justify-content: center; box-shadow: none; }
.kc-bgu-abruf { margin: var(--kc-l1) 0 0; display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2px var(--kc-l2); font-size: .875rem; }
.kc-bgu-abruf dt { font-weight: 700; }
.kc-bgu-abruf dd { margin: 0; }
@media (max-width: 600px) {
  .kc-bgu-zeile, .kc-bgu-abruf { grid-template-columns: minmax(0, 1fr); }
  .kc-bgu-abruf dd { margin-bottom: var(--kc-l1); }
}
.kc-bgf-absenden { display: grid; gap: var(--kc-l3); }
.kc-bgf-wege { margin: 0; padding: 0; border: 0; display: grid; gap: var(--kc-l1); }
.kc-bgf-wege legend { padding: 0; margin-bottom: var(--kc-l1); font-weight: 700; }
.kc-bgf-wege-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); }
.kc-bgf-weg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--kc-l1) var(--kc-l2); align-items: start;
  padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); cursor: pointer; }
.kc-bgf-weg:has(input:checked) { border-color: var(--lime); }
.kc-bgf-weg input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); }
.kc-bgf-weg .btn { grid-column: 2; justify-self: start; }
.kc-bgf-weg.ist-gesperrt { cursor: default; background: var(--surface-2); }
.kc-bgf-weg-text { display: grid; gap: 2px; }
.kc-bgf-weg-text b { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: center; }
.kc-bgf-weg-text small { color: var(--ink-faint); font-size: .875rem; }
.kc-bgf-marke { padding: 1px 8px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: .75rem; font-weight: 700; }
.kc-bgf-best { display: flex; gap: var(--kc-l2); align-items: flex-start; }
.kc-bgf-best input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); flex: 0 0 auto; }
.kc-bgf-best label { font-size: .9375rem; line-height: 1.5; }
.kc-bgf-leiste { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center; margin-bottom: var(--kc-l2); }
.kc-bgf-blatt { display: grid; gap: var(--kc-l3); justify-items: center; margin-bottom: var(--kc-l4); }
.kc-bgf-seite { position: relative; width: 100%; max-width: 62rem; border: 1px solid var(--line); background: #fff; }
.kc-bgf-seite-bild { display: block; width: 100%; height: 100%; object-fit: contain; }
.kc-bgf-seitenzahl { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-faint); font-size: .75rem; }
.kc-bgf-feld { position: absolute; display: block; border: 1px dashed transparent; border-radius: 2px; cursor: text; }
.kc-bgf-feld:hover, .kc-bgf-feld:focus-visible { border-color: var(--lime); outline: none; background: rgba(196, 11, 11, .06); }
.kc-bgf-feld[data-stand="fehlt"], .kc-bgf-feld[data-stand="offen"] { background: rgba(245, 190, 40, .28); }
.kc-bgf-feld.ist-neu { border-color: var(--lime); background: rgba(196, 11, 11, .10); }
.kc-bgf-checkbox, .kc-bgf-radiogroup { cursor: pointer; }
.kc-bgf-checkbox.ist-neu[data-wert="ja"]::after, .kc-bgf-radiogroup.ist-neu[data-wert="ja"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--lime); font-weight: 700; }
.kc-bgf-ein { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 2px; border: 1px solid var(--lime); border-radius: 2px;
  background: #fff; color: #000; font-family: Helvetica, Arial, sans-serif; line-height: 1.1; resize: none; }
.kc-bgf-hand { display: grid; gap: var(--kc-l2); max-width: 44rem; }
.kc-bgf-hand h2 { margin: 0; }
.kc-bgf-hand-kopf { display: flex; justify-content: space-between; gap: var(--kc-l2); align-items: center; }
.kc-bgf-hand-fortschritt { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.kc-bgf-hand-fortschritt span { display: block; height: 100%; background: var(--lime); }
.kc-bgf-hand-akt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); }
@media (max-width: 599px) {
  .kc-bgf-hinweis { grid-template-columns: minmax(0, 1fr); margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; }
  .kc-bgf-hinweis .btn { width: 100%; }
  .kc-bgf-wege-raster { grid-template-columns: minmax(0, 1fr); }
  .kc-bgf-seite { margin-inline: -20px; width: calc(100% + 40px); max-width: none; border-inline: 0; }
  .kc-bgf-hand { margin-inline: -20px; padding-inline: 20px; }
}

/* Firmenstempel (pm-33996, B7): eigener Punkt in voller Breite unter den drei
   Verifikationskarten; Generator mit 8 Vorlagen + KI-Variante im Dreierraster. */
.kc-vf-stempel-inhalt { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--kc-l3); align-items: center; margin-top: var(--kc-l2); }
.kc-vf-stempel-vorschau { display: grid; place-items: center; min-height: 8rem; padding: var(--kc-l2); border: 1px dashed var(--line-strong); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-vf-stempel-bild { display: block; max-width: 100%; max-height: 10rem; object-fit: contain; }
.kc-vf-stempel-fenster { width: min(56rem, calc(100vw - 32px)); }
.kc-vf-stempel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l2); margin: var(--kc-l2) 0; }
.kc-vf-stempel-kachel { display: grid; grid-template-rows: 6rem auto auto; gap: 4px; justify-items: center; padding: var(--kc-l2); border: 1px solid var(--line);
  border-radius: var(--r, 12px); background: var(--surface); color: var(--ink); text-align: center; cursor: pointer; font: inherit; }
.kc-vf-stempel-kachel[aria-pressed="true"] { border-color: var(--lime); background: var(--surface-2); }
.kc-vf-stempel-kachel .kc-vf-stempel-bild { width: 100%; height: 6rem; max-height: none; }
.kc-vf-stempel-kachel small { color: var(--ink-faint); font-size: .8125rem; }
.kc-vf-stempel-ki-bild { display: grid; place-items: center; width: 100%; height: 6rem; border: 1px dashed var(--line-strong); border-radius: 50%; color: var(--lime); font-size: 1.5rem; font-weight: 700; }
.kc-vf-stempel-gross { display: grid; place-items: center; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); background: #fff; }
.kc-vf-stempel-gross .kc-vf-stempel-bild { max-height: 12rem; }
@media (max-width: 599px) {
  .kc-vf-stempel-inhalt { grid-template-columns: minmax(0, 1fr); }
  .kc-vf-stempel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------ CTA einzeilig
   Operator 2026-09-30: „Anfrage senden? Nochmals klicken — 2-zeiliger CTA,
   das ist verboten! … prüfe alle Systeme, ob es einen 2-zeiligen CTA geben
   kann, wenn ja stelle ihn ab!“ Jede Knopf-Beschriftung steht in EINER
   Zeile. Die Beschriftung selbst muss passen (kurz formuliert, Raster, die
   in eine eigene Zeile rücken); dieses Netz fängt nur ab, was keine Probe
   vorhersah: der Knopf wird nie breiter als seine Spalte, der Text nie
   zweizeilig — schlimmstenfalls „…“, das test/cta-einzeilig-probe.mjs
   ebenfalls rot meldet. */
.btn, .chipbtn { white-space: nowrap; max-width: 100%; }
/* Beim Messen der Knopfleiste (modul/knopfleiste.js) zählt die natürliche Breite — ohne Deckel.
   Die Regel „messen“ oben (Zeile .kc-knopfleiste[data-lage="messen"] > *) verlor gegen
   „.kc-knopfleiste > :is(.btn, a.btn, button)“ (höhere Spezifität: width 100 %) — gemessen
   wurde so die Spaltenbreite statt der Textbreite; mit dem Netz unten hieß das „…“. */
.kc-knopfleiste[data-lage="messen"] > :is(.btn, a.btn, button), .kc-knopfleiste[data-lage="messen"] > .kc-knopf-huelle > .btn { width: auto; flex: none; max-width: none; }
.btn > span:not(.ic), .chipbtn > span:not(.ic) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 399px) {
  .kc-bgs-leiste { grid-template-columns: minmax(0, 1fr); }
  /* „Unternehmensangaben speichern“ (Proben lesen den Wortlaut) passt bei 320 px nur ohne Symbol. */
  .kc-u-speichern .btn { padding-inline: 12px; }
  .kc-u-speichern .btn .ic { display: none; }
}

/* ------------------------------------------------ E-Mail-Signatur (Operator 2026-09-30)
   Formular links in Gruppen, Vorschau rechts (klebt beim Scrollen), darüber
   die Pflichtangaben. Abstände nur aus der Hausleiter --kc-l1…l4. */
.kc-esig-raster { display: grid; gap: var(--kc-l4); align-items: start; }
@media (min-width: 1200px) { .kc-esig-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .kc-esig-seite { position: sticky; top: var(--kc-l3); } }
.kc-esig-formular { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-esig-gruppe { display: grid; gap: var(--kc-l2); margin: 0; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); min-width: 0; }
.kc-esig-gruppe > legend { padding: 0 var(--kc-l1); font-size: .9375rem; font-weight: 800; color: var(--ink); }
.kc-esig-gruppe .kc-form-reihe { gap: var(--kc-l2); }
.kc-esig-vorlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l1); }
@media (max-width: 599px) { .kc-esig-vorlagen { grid-template-columns: minmax(0, 1fr); } }
.kc-esig-vorlage { display: grid; gap: 2px; padding: var(--kc-l2); border: 1px solid var(--line-strong); border-radius: var(--r-btn-sm, 10px); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.kc-esig-vorlage b { font-size: .9375rem; }
.kc-esig-vorlage span { font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); }
.kc-esig-vorlage.on { border-color: var(--lime); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 35%, transparent); }
.kc-esig-farbe input[type="color"] { width: 4rem; height: 40px; padding: 2px; }
.kc-esig-eigene { display: grid; gap: var(--kc-l2); }
.kc-esig-eigen { display: grid; gap: var(--kc-l1); grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; }
.kc-esig-gruppe > .btn { justify-self: start; }
.kc-esig-zert { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.kc-esig-gruppe > .kc-esig-hinweis { margin: 0; font-size: .875rem; line-height: 1.5; }
.kc-esig-bildzeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.kc-esig-bildzeile > .kc-esig-bild-stand { grid-column: 1 / -1; white-space: normal; }
/* Vorschau wie im Mailprogramm: die Tabellen der Signatur sind so breit wie ihr Inhalt
   (cf-chrome.css zieht jede Tabelle der Seite auf volle Breite, mindestens 640 px). */
.kc-post-sig table { width: auto; min-width: 0; font-size: inherit; }
@media (max-width: 599px) { .kc-esig-bildzeile { grid-template-columns: minmax(0, 1fr); } }
.kc-esig-bild { display: grid; gap: var(--kc-l1); }
.kc-esig-bild-kopf { display: grid; gap: 2px; }
.kc-esig-bild-kopf span, .kc-esig-bild-stand { font-size: .8125rem; color: var(--ink-soft); }
.kc-esig-bild-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l1); }
.kc-esig-bild-stand { min-width: 0; flex: 1 1 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-esig-seite { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-esig-vorschau-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-l1); }
.kc-esig-vorschau-kopf .kc-post-etikett { margin: 0; }
.kc-esig-vorschau { margin-top: 0; padding: var(--kc-l3); overflow-x: auto; background: #fff; color: #222; }
.kc-esig-klartext { margin: 0; padding: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.kc-esig-pflicht { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--warn); border-radius: var(--r, 12px); background: var(--warn-bg); font-size: .875rem; line-height: 1.45; }
.kc-esig-pflicht.ist-voll { border-color: var(--good); background: var(--good-bg); }
.kc-esig-pflicht:empty { display: none; }
.kc-esig-pflicht-kopf { display: flex; align-items: center; gap: var(--kc-l1); }
.kc-esig-pflicht-kopf .ic { width: 18px; height: 18px; }
.kc-esig-pflicht ul { margin: 0; padding-left: 1.2rem; }
.kc-esig-pflicht p { margin: 0; }
.kc-esig-norm, .kc-esig-hinweis { color: var(--ink-soft); }
.kc-esig-akt { margin-top: var(--kc-l3); }
@media (max-width: 599px) { .kc-esig-eigen { grid-template-columns: minmax(0, 1fr); } .kc-esig-gruppe { padding: var(--kc-l2); } }

/* ------------------------------------------------ Seitenkopf und Karten (CI-Durchgang 2026-09-30)
   Meine Angaben und Nachrichten nach den Vorlagen „Konto Psd2“ und
   „Verifikation“: ein h1 mit Satz, darunter Karten mit h2 — derselbe Aufbau
   wie Konten & Bankensicht (portal-konten.css .kc-kx-kopf). Abstände nur aus
   der Leiter --kc-l1…l4, geprüft von test/ci-bereiche-sicht.mjs. */
.kc-seite { display: grid; gap: var(--kc-l3); min-width: 0; }
.kc-seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--kc-l2) var(--kc-l3); }
.kc-seitenkopf-text { display: grid; gap: 6px; min-width: 0; flex: 1 1 26rem; }
.kc-seitenkopf h1 { margin: 0; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.kc-seitenkopf p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.kc-seitenkopf-akt { flex: 0 0 auto; }
.kc-seite .kc-karte { display: grid; align-content: start; gap: var(--kc-l2); padding: var(--kc-l3); border-radius: 14px; min-width: 0; }
.kc-seite .kc-karte-kopf { flex-wrap: wrap; align-items: flex-start; }
.kc-seite .kc-karte-titel { display: flex; align-items: flex-start; gap: var(--kc-l2); min-width: 0; flex: 1 1 18rem; }
.kc-seite .kc-karte-titel h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.kc-seite .kc-karte-titel p { margin: 2px 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
.kc-fortschritt { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.kc-fortschritt > span { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.kc-af-karte .kc-af-zeile { padding: var(--kc-l2) 0; }
.kc-af-karte > .kc-akt { justify-content: flex-start; }
.kc-nachrichten-raster { display: grid; gap: var(--kc-l3); align-items: start; }
@media (min-width: 1100px) { .kc-nachrichten-raster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .kc-nachrichten-neu { position: sticky; top: var(--kc-l3); } }
.kc-nachrichten-verlauf .kc-leerbild { padding-block: var(--kc-l4); }
@media (max-width: 599px) {
  .kc-seite .kc-karte { margin-inline: -20px; padding-inline: 20px; border-radius: 0; border-inline: 0; box-shadow: none; }
  .kc-seitenkopf-akt { width: 100%; }
  .kc-seitenkopf-akt .btn { flex: 1 1 100%; justify-content: center; }
}
.kc-nachrichten-neu textarea.inp { min-height: 8.5rem; height: auto; resize: vertical; }
/* Signatur-Stufen (Operator 2026-09-30, pm-33996): alle Personen mit Stand,
   Stufen-Abzeichen, Fenster „Digitale Unterschriften“, Unterschriftsfeld
   (zeichnen/tippen/hochladen), Ausweis-Abgleich, Stempel-Portfolio.
   Nur Token der Schale, keine Schrift unter 14 px auf der Seite. */
.kc-vf-signliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.kc-vf-signzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.kc-vf-signzeile .kc-vf-kuerzel { width: 30px; height: 30px; border-radius: 8px; }
.kc-vf-signzeile-name { display: grid; gap: 0; min-width: 0; }
.kc-vf-signzeile-name b { font-size: .9375rem; overflow-wrap: anywhere; }
.kc-vf-signzeile-name small { font-size: .875rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.kc-vf-stufe { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-soft); }
.kc-vf-stufe.ist-s1 { background: var(--info-bg); color: var(--info); }
.kc-vf-stufe.ist-s2 { background: var(--good-bg); color: var(--good); }
.kc-vf-stufe-pips { display: inline-flex; gap: 2px; }
.kc-vf-stufe-pips i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; opacity: .55; }
.kc-vf-stufe-pips i.ist-an { background: currentColor; opacity: 1; }
.kc-vf-signaturen { width: min(56rem, calc(100vw - 32px)); }
.kc-vf-stufenliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-l2); }
.kc-vf-stufenliste li { display: grid; gap: 6px; align-content: start; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.kc-vf-stufenliste li .kc-vf-stufe { justify-self: start; }
.kc-vf-stufenliste b { font-size: .9375rem; }
.kc-vf-stufenliste small { font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.kc-vf-ehrlich { padding-left: var(--kc-l1); border-left: 3px solid var(--line-strong); }
.kc-vf-sigpersonen { display: grid; gap: var(--kc-l2); }
.kc-vf-sigperson { display: grid; gap: var(--kc-l1); padding: var(--kc-l2); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-vf-sigperson-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--kc-l1) var(--kc-l2); }
.kc-vf-sigperson-inhalt { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--kc-l2); align-items: start; }
.kc-vf-bedingungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--kc-l2); font-size: .875rem; color: var(--ink-soft); }
.kc-vf-bedingungen li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.kc-vf-bedingungen li.ist-erfuellt { color: var(--good); font-weight: 600; }
.kc-vf-bed-punkt { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--surface); }
.kc-vf-bedingungen li.ist-erfuellt .kc-vf-bed-punkt { border-color: var(--good); background: var(--good); }
.kc-vf-bed-punkt .ic { width: 11px; height: 11px; }
.kc-vf-naechster { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.kc-vf-sigperson .kc-vf-schalter { justify-self: start; }
.kc-vf-einladen-haken { margin-top: var(--kc-l1); }
.kc-vf-probelink { display: grid; gap: var(--kc-l1); }
.kc-vf-probelink .kc-vf-chip { justify-self: start; }
.kc-vf-abgleich { width: min(46rem, calc(100vw - 32px)); }
.kc-vf-abgleich-kopf { display: grid; gap: 4px; }
.kc-vf-abgleich-kopf small { font-size: .875rem; color: var(--ink-faint); }
.kc-vf-abgleich-ergebnis { display: grid; gap: var(--kc-l1); }
.kc-vf-abgleich-ergebnis p { margin: 0; font-size: .9375rem; line-height: 1.5; }
.kc-vf-abgleich-ergebnis > span { justify-self: start; }

/* Unterschriftsfeld (public/modul/unterschrift-feld.js) */
.kc-uf { display: grid; gap: var(--kc-l1); }
.kc-uf-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
.kc-uf-reiter-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.kc-uf-reiter-knopf .ic { width: 18px; height: 18px; }
.kc-uf-reiter-knopf[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 17, 26, .08); }
.kc-uf-reiter-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-uf-tippen, .kc-uf-hoch { display: grid; gap: 6px; }
.kc-uf-tippen label { font-size: .9375rem; font-weight: 600; }
.kc-uf-schriften { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-uf-schrift[aria-pressed="true"] { border-color: var(--lime); color: var(--lime-strong); }
.kc-uf-hoch .btn { justify-self: start; }
.kc-vf-zeichenflaeche:not(.ist-zeichnen) canvas { cursor: default; }

/* Ausweis-Abgleich (public/modul/ausweis-abgleich.js) */
.kc-aa { display: grid; gap: var(--kc-l1); }
.kc-aa-wahl.btn { justify-self: start; }
.kc-aa-buehne { position: relative; justify-self: center; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; touch-action: none; cursor: crosshair; background: var(--surface-2); }
.kc-aa-buehne:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-aa-bild { display: block; max-width: 100%; max-height: 22rem; width: auto; height: auto; user-select: none; pointer-events: none; }
.kc-aa-rahmen { position: absolute; border: 2px solid var(--lime); border-radius: 4px; background: rgba(196, 11, 11, .08); box-shadow: 0 0 0 9999px rgba(19, 17, 26, .28); pointer-events: none; }
.kc-aa-rahmen-text { position: absolute; left: 4px; top: 2px; padding: 0 6px; border-radius: 4px; background: var(--lime); color: var(--on-lime); font-size: .875rem; font-weight: 700; line-height: 1.5; }

/* Stempel-Portfolio 2026-09-30: Gruppen, Premium, Farbe */
.kc-vf-stempel-gruppe { margin: var(--kc-l2) 0 0; font-size: 1rem; font-weight: 800; color: var(--ink); }
.kc-vf-stempel-halter { display: grid; place-items: center; width: 100%; height: 6rem; }
.kc-vf-stempel-halter .kc-vf-stempel-bild { width: 100%; height: 6rem; max-height: none; }
.kc-vf-stempel-kachel b { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.kc-vf-premium { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #b98f22 18%, var(--surface)); color: #6b520f; font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.kc-vf-stempel-farben { display: flex; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-vf-farbe { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: .9375rem; color: var(--ink); cursor: pointer; }
.kc-vf-farbe[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kc-vf-farbe-punkt { width: 16px; height: 16px; border-radius: 50%; background: #1f3a8a; }
.kc-vf-farbe.ist-rot .kc-vf-farbe-punkt { background: #a61b1b; }
.kc-vf-farbe.ist-schwarz .kc-vf-farbe-punkt { background: #1c1c1e; }
.kc-vf-farbe.ist-violett .kc-vf-farbe-punkt { background: #5b2a86; }
.kc-vf-farbe.ist-tanne .kc-vf-farbe-punkt { background: #156d47; }
.kc-vf-farbe.ist-marke .kc-vf-farbe-punkt { background: var(--lime); }

@media (max-width: 719px) {
  .kc-vf-stufenliste { grid-template-columns: minmax(0, 1fr); }
  .kc-vf-sigperson-inhalt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .kc-vf-bedingungen { grid-template-columns: minmax(0, 1fr); }
  .kc-uf-reiter-knopf { padding-inline: 4px; font-size: .875rem; }
  .kc-uf-reiter-knopf .ic { display: none; }
}

/* Einladungsseite (/o/unterschrift/<wort>) und Prüfseite (/o/siegel/<kennung>):
   dieselbe Tor-Karte wie die Anmeldung, nur breiter — hier wird gezeichnet
   und gelesen. Unter 600 px randlos wie das Kundencenter. */
.kc-ein-karte, .kc-sg-karte { max-width: 46rem; display: grid; gap: var(--kc-l2); }
.kc-ein #ein-inhalt, .kc-sg #sg-inhalt { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-ein h1, .kc-sg h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.kc-ein h2, .kc-sg h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.kc-ein .kc-leer, .kc-sg .kc-leer { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); }
.kc-ein .kc-vf-stufe, .kc-sg .kc-vf-chip { justify-self: start; }
.kc-ein-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: start; padding-top: var(--kc-l2); border-top: 1px solid var(--line); }
.kc-ein-schritt > div { display: grid; gap: 4px; }
.kc-ein-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--on-lime); font-weight: 800; }
.kc-sg-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l3); align-items: center; }
.kc-sg-kopf-text { display: grid; gap: 6px; min-width: 0; }
.kc-sg-siegel { display: block; width: 150px; height: 150px; }
.kc-sg-werte { display: grid; gap: 0; border-top: 1px solid var(--line); }
.kc-sg-wert { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--kc-l2); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.kc-sg-wert-k { color: var(--ink-faint); font-weight: 600; }
.kc-sg-wert-v { color: var(--ink); line-height: 1.5; }
.kc-sg-hash { font-family: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.kc-sg-pruefen { display: grid; gap: var(--kc-l1); padding-top: var(--kc-l2); }
.kc-sg-pruefen .btn { justify-self: start; }
.kc-sg-ergebnis { display: grid; gap: 6px; }
.kc-sg-ergebnis .kc-vf-chip { justify-self: start; white-space: normal; }
@media (max-width: 599px) {
  .kc-ein, .kc-sg { padding-inline: 0; }
  .kc-ein-karte, .kc-sg-karte { border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: 20px; }
  .kc-sg-kopf { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .kc-sg-wert { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Signatur-Stufen, Nachsteuerung nach dem Bild 2026-09-30: das Abzeichen
   steht unter dem Namen (neben ihm brach „Geschäftsführer“ mitten im Wort),
   Titel und Erklärung einer Stufe stehen untereinander. */
.kc-vf-signzeile { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.kc-vf-signzeile > .kc-vf-stufe { grid-column: 2; justify-self: start; margin-top: -4px; }
.kc-vf-stufenliste li > div { display: grid; gap: 4px; }
/* Sicht-Gate: jedes Bild hat sein Maß vor dem Laden (kein Nachrutschen). */
.kc-sg-siegel { aspect-ratio: 1 / 1; }
.kc-ein-karte .kc-tor-marke img, .kc-sg-karte .kc-tor-marke img { width: auto; height: 20px; aspect-ratio: 285.58 / 55.56; }
/* Nachsteuerung nach der Messung (375 px Fenster, 768 px Einladung): nichts drückt über den Rand. */
.kc-vf-sigpersonen, .kc-vf-sigperson, .kc-vf-sigperson > *, .kc-vf-stufenliste li, .kc-vf-stufenliste li > * { min-width: 0; }
.kc-vf-stufenliste .kc-vf-stufe, .kc-ein .kc-vf-stufe { white-space: normal; }
@media (max-width: 899px) { .kc-ein .kc-vf-stufenliste { grid-template-columns: minmax(0, 1fr); } }
.kc-vf-sigperson .kc-vf-stufe { white-space: normal; max-width: 100%; }

/* ===================================================================
   Abendlauf 2026-10-01, Scheibe A — Kaufweg (pm-34018,
   docs/BUILDPLAN-2026-10-01-ABEND.md). Farben nur aus den Token. */

/* Nr. 14 — Schrittleiste der Beauftragung hell. Operator: „das ist zu dunkel
   in Schwarz … zu krass der Kontrast“. Der Kopf steht jetzt auf der Fläche
   der Seite; der laufende Schritt trägt den Akzent, erledigte den Haken im
   Akzentton, kommende sind ruhig. Gesperrte Schritte werden nicht mehr
   durchsichtig gestellt (das drückte die kleine Zeile unter 4,5:1), sie
   tragen die leisere Tinte. */
.kc-bf-kopf { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.kc-bf-chip { background: var(--rail-active); color: var(--lime-strong); }
.kc-bf-schlag { color: var(--ink); }
.kc-bf-schlag span:last-child { color: var(--lime-strong); opacity: 1; }
.kc-bf-kopftext { color: var(--ink-soft); opacity: 1; }
.kc-bf-glied-knopf { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.kc-bf-glied-knopf:disabled { opacity: 1; color: var(--ink-soft); }
.kc-bf-glied-knopf:not(:disabled):hover { border-color: var(--lime); background: var(--rail-active); }
.kc-bf-nr { border-color: var(--line-strong); background: var(--surface); color: var(--ink-soft); }
.kc-bf-glied-txt small { color: var(--ink-faint); opacity: 1; }
.kc-bf-glied.jetzt .kc-bf-glied-knopf { background: var(--rail-active); border-color: var(--lime); color: var(--ink); }
.kc-bf-glied.jetzt .kc-bf-nr { border-color: var(--lime); background: var(--lime); color: var(--on-lime); }
.kc-bf-glied.erledigt .kc-bf-nr { border-color: var(--lime); background: var(--surface); color: var(--lime-strong); }
@media (min-width: 900px) {
  .kc-bf-glied:not(:last-child)::after { background: var(--line-strong); }
  .kc-bf-glied.erledigt:not(:last-child)::after { background: var(--lime); }
}

/* Nr. 7 — zwei Wege an jeder Angebotskarte: ansehen und beauftragen. Breite
   Karten (Raster 1 und 2) tragen sie nebeneinander, schmale untereinander;
   eine Marke („Beauftragt · AO-…“) nimmt die ganze Zeile. */
.kc-paket-akt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: center; }
/* Der Container ist die Knopfreihe, NICHT die Karte: container-type an der Karte schaltet ihr subgrid ab
   (Layout-Eingrenzung) — die fünf Zeilen der Karten einer Reihe fluchteten dann nicht mehr (gemessen
   2026-10-02 an den Leistungskarten: Kopf 81 / 75 / 79 px in derselben Reihe). */
.kc-paket-akt { container-type: inline-size; }
.kc-text-kurz { display: none; }
@container (max-width: 15rem) {
  .kc-paket-akt .kc-text-lang { display: none; }
  .kc-paket-akt .kc-text-kurz { display: inline; }
}
.kc-paket-akt .chip { grid-column: 1 / -1; justify-self: start; }
.kc-paket-akt .btn { width: 100%; min-width: 0; }

/* Nr. 17 — Hinweis zum Zahlweg Leasing über den Bedingungen. */
.kc-bf-leasing { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kc-l2); align-items: start; margin-bottom: var(--kc-l3);
  padding: var(--kc-l3); border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: 12px; background: var(--surface-2); }
.kc-bf-leasing[hidden] { display: none; }
.kc-bf-leasing > .ic { width: 22px; height: 22px; color: var(--lime-strong); margin-top: 2px; }
.kc-bf-leasing b { display: block; margin-bottom: var(--kc-l1); }
.kc-bf-leasing p { margin: 0 0 var(--kc-l1); line-height: 1.55; color: var(--ink-soft); }
.kc-bf-leasing .btn { margin-top: var(--kc-l1); }

/* Nr. 13 — Meldung als Fenster in der Mitte statt als Leiste unten.
   Operator: „nicht unten, sondern Pop-up mittig, so dass man es besser zur
   Kenntnis nimmt — aber dann überall so“. Helle Karte, Art über Zeichen,
   Kante und Wort („Fehler:“), nicht über Farbe allein. */
#meldung.kc-meld-fenster { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; margin: 0;
  width: min(92vw, 30rem); max-width: none; box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: start;
  padding: var(--kc-l3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-left: 4px solid var(--good); border-radius: 16px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 24%, transparent);
  font-size: 1rem; font-weight: 600; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -46%);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index: 2147483000; }
#meldung.kc-meld-fenster.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); transition-delay: 0s; }
#meldung.kc-meld-fenster[data-art="schlecht"] { border-left-color: var(--bad); }
.kc-meld-zeichen { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); }
#meldung[data-art="schlecht"] .kc-meld-zeichen { background: var(--rail-active); color: var(--bad); }
#meldung.kc-meld-fenster .kc-meld-zeichen .ic { width: 18px; height: 18px; color: inherit; }
.kc-meld-text { align-self: center; overflow-wrap: anywhere; }
.kc-meld-zu { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border-radius: 10px; color: var(--ink-faint); cursor: pointer; }
.kc-meld-zu:hover { background: var(--rail-active); color: var(--lime-strong); }
.kc-meld-zu:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
#meldung.kc-meld-fenster .kc-meld-zu .ic { width: 18px; height: 18px; color: inherit; }
@media (max-width: 599px) {
  /* Mobil randlos (R145): die Meldung spannt die Fensterbreite. */
  #meldung.kc-meld-fenster { width: 100vw; border-radius: 0; border-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { #meldung.kc-meld-fenster { transition: none; } }

/* Nr. 18 — Dank nach dem Auftrag. */
.kc-dank-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-l2); }
.kc-dank-marke { padding: 4px var(--kc-l2); border-radius: 999px; background: var(--rail-active); color: var(--lime-strong); font-size: .875rem; font-weight: 800; letter-spacing: .04em; }
.kc-dank h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.kc-dank-text { font-size: 1.05rem; color: var(--ink-soft); }
.kc-konfetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483001; }
@media print { .kc-konfetti, #meldung { display: none !important; } }

/* Nr. 20 — Vertrags-PDF, Seite „Unterschriften“: die Angaben der beiden
   Parteien lagen übereinander (gemessen 2026-10-01: linke Spalte 183 px,
   „Bielefeld, 01.10.2026“ lief in die rechte). Zwei Tabellen mit freier
   Spaltenrechnung in einem Raster ohne Mindestmaß — jetzt feste
   Spaltenrechnung, Rasterkinder dürfen schrumpfen, und zwei Parteien stehen
   immer in zwei gleich breiten Spalten nebeneinander. */
.kc-v-sigs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.kc-v-sig { min-width: 0; }
.kc-v-sig .kc-v-tab { table-layout: fixed; }
.kc-v-sig .kc-v-tab tbody th { width: 42%; }
.kc-v-sig-bild { display: block; width: 100%; height: 44px; object-fit: contain; object-position: left bottom; }
.kc-v-sig .kc-v-sig-linie { height: 52px; padding-block: 2px; overflow: hidden; }
@media print {
  #kc-druck .kc-v-sigs, body.kc-vertrag-seite .kc-v-sigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kc-vertrag-seite .kc-v-sig { break-inside: avoid; }
}

/* Nr. 30 — CI-Auswahl statt System-Dropdown in der Bürgschafts-Schublade und
   im Dokument-Bearbeiter: Etikett über der Auswahl wie bei den übrigen Feldern. */
.kc-bgs-feld { display: grid; gap: 4px; min-width: 0; font-size: .875rem; color: var(--ink-soft); }
.kc-bgs-feld .ci-auswahl, .kc-dokb-feld .ci-auswahl { width: 100%; min-width: 0; }
.kc-bgs-feld .cidd-btn, .kc-dokb-feld .cidd-btn { width: 100%; }

/* ===================================================================
   Abendlauf 2026-10-01, Scheibe B — Einheitlichkeit (pm-34018). */
/* Nr. 5 — über den Angeboten steht nur noch die Rasterwahl, rechts. */
.kc-listenkopf.nur-wahl { justify-content: flex-end; }

/* Nr. 2 — Angebotskarten ohne Bild (bis die neuen Bilder vorliegen): die
   Raster 1, 2 und 4 waren um das Bild herum gebaut. Ohne Bild fällt die
   Bildspalte weg und die Karte bekommt oben ihren Innenabstand zurück. */
.kc-pakete[data-raster="1"] .kc-paket[data-bild="nein"] { grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
  grid-template-areas: "titel preis" "kopf preis" "merkmale preis" "merkmale akt"; }
.kc-pakete[data-raster="1"] .kc-paket[data-bild="nein"] .kc-paket-band { left: var(--kc-l3); }
.kc-pakete[data-raster="2"] .kc-paket[data-bild="nein"] { padding-top: var(--kc-l4); }
.kc-pakete[data-raster="4"] .kc-paket[data-bild="nein"] { padding-top: 16px; min-height: 0; }
@media (max-width: 899px) {
  .kc-pakete[data-raster="1"] .kc-paket[data-bild="nein"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "kopf" "preis" "merkmale" "akt"; }
}

/* Nr. 4 und 12 — EIN Hover für jede Karte, die zu einer Handlung führt:
   Markenrot, alle Schrift weiß (6,2:1). Operator 2026-10-01: „bei Hover warum
   nicht rot wie oben auch — sei konsistent im System, nicht mal so, mal so“.
   Vorher: Angebotskarte rot nur mit freigeschalteter Finanzierung,
   Leistungskarte grauer Rand, Produktkarte roter Rand mit Sprung nach oben.
   Die Regel steht einmal, für alle drei; neue Kartenarten kommen in die Liste.
   Operator 2026-10-02: „wo ist die Hover-Funktion hier bei den Containern“ (ISO-Seite) — die wählbaren Karten der
   ISO-Seite (Tempo, Norm) stehen jetzt in derselben Liste; vorher färbte sich dort nur der Rand. */
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm) {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) {
  background: var(--lime); border-color: var(--lime); box-shadow: none; transform: none; color: var(--on-lime); }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) :where(*) { color: var(--on-lime); }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) :is(.kc-sym, .chip, .kc-rabatt, .kc-paket-band, .kc-leistung-nachweis, .kc-paket-preis, .kc-iso-dauer, .kc-iso-haken) {
  background: color-mix(in srgb, var(--on-lime) 16%, transparent); border-color: color-mix(in srgb, var(--on-lime) 70%, transparent); color: var(--on-lime); }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) .btn-ghost {
  background: transparent; border-color: color-mix(in srgb, var(--on-lime) 80%, transparent); color: var(--on-lime); }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) .btn-primary {
  background: var(--on-lime); border-color: var(--on-lime); color: var(--lime-strong); box-shadow: none; }
:is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung:not(.kc-leistung-platz), .kc-iso-tempo[data-tempo], .kc-iso-norm):is(:hover, :focus-within) .btn-primary :where(*) { color: var(--lime-strong); }
@media (prefers-reduced-motion: reduce) { :is(.kc-paket[data-klickbar="ja"], .kc-produkt, .kc-leistung) { transition: none; } }

/* Nr. 3 — Kartentitel einzeilig, solange die Karte breit genug ist; erst
   unter 20rem Kartenbreite darf er umbrechen (kein Abschneiden). */
:is(.kc-produkt, .kc-leistung) > .kc-leistung-kopf { container-type: inline-size; }
/* Gemessen 2026-10-01 bei 1440 px: neben dem Zeichen blieben dem Titel 225 px,
   „ISO 27001 Informationssicherheit“ braucht 290 — sieben von 18 Titeln
   brachen um. Das Zeichen steht deshalb ÜBER dem Titel, der Titel hat die
   ganze Kartenbreite und bleibt einzeilig. */
:is(.kc-produkt, .kc-leistung) > .kc-leistung-kopf { flex-direction: column; align-items: flex-start; gap: var(--kc-l1); }
/* Feste Zeilenhöhe: mit „normal“ machten Zeichen aus der Ersatzschrift (Gedankenstrich, Ü) den Kopf einzelner Karten 5 px höher — die fünf Zeilen der Karten fluchteten nicht mehr (kundencenter-sicht). */
:is(.kc-produkt, .kc-leistung) > .kc-leistung-kopf h3 { white-space: nowrap; min-width: 0; max-width: 100%; font-size: .9375rem; line-height: 1.3; height: 1.3em; }
@container (max-width: 17rem) { :is(.kc-produkt, .kc-leistung) > .kc-leistung-kopf h3 { white-space: normal; text-wrap: balance; height: auto; } }

/* Nr. 1 und 19 — Knöpfe im Kopf einer Dokument-Ebene (Angebot, Vertrag,
   Vorschau): eine Reihe neben dem Titel, nie untereinander. Die Leiste ist
   so breit wie ihr Inhalt; fehlt der Platz neben dem Titel, rückt sie als
   ganze Reihe unter ihn; fehlt er auch dort, zeigen die Knöpfe nur ihr
   Zeichen (der Text bleibt für Vorleser). */
.kc-vorschau-kopf .kc-vorschau-akt { flex: 0 0 auto; width: auto; max-width: 100%; margin-left: auto; }
.kc-vorschau-akt .btn { gap: 8px; }
.kc-vorschau-akt .btn .ic { width: 16px; height: 16px; flex: none; }
.kc-vorschau-akt[data-kompakt="ja"] { grid-auto-columns: 44px; }
.kc-vorschau-akt[data-kompakt="ja"] > :is(.btn, a.btn, button) { width: 44px; height: 44px; padding: 0; }
.kc-vorschau-akt[data-kompakt="ja"] .kc-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kc-vorschau-akt[data-kompakt="ja"] .btn .ic { width: 18px; height: 18px; }

/* Nr. 8 — Angebotsseite: oben fünf Werkzeuge in EINER Reihe (ab 1340 px) oder
   alle untereinander — nie 3 + 2 (Regel des Operators vom 30.09.: „niemals
   2 Reihen und dann unsymmetrisch“). Unten fünf Entscheidungen: der rote
   Knopf über die volle Breite, die vier anderen gleich breit darunter. */
@media (min-width: 1340px) { .kc-knopfreihe[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1339px) { .kc-knopfreihe[data-n="5"] { grid-template-columns: minmax(0, 1fr); } }
.kc-entscheid { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 76rem; }
.kc-entscheid > .btn { width: 100%; min-width: 0; min-height: 48px; justify-content: center; white-space: nowrap; }
.kc-entscheid > .kc-entscheid-haupt { grid-column: 1 / -1; min-height: 56px; font-size: 1.05rem; }
@media (max-width: 1339px) { .kc-entscheid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .kc-entscheid { grid-template-columns: minmax(0, 1fr); } }

/* Nr. 22 — lange Zeichenketten in der Notiz einer Unterlage (Prüfsumme des
   Vertrags, 64 Zeichen ohne Leerraum) liefen aus der Karte. */
.kc-datei-notiz { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.kc-unterlage-text { min-width: 0; }
/* Nr. 24 — Knöpfe der Unterlage 2 × 2, sobald die Karte dafür breit genug
   ist; der letzte einer ungeraden Zahl nimmt die ganze Zeile. Die Schwelle
   hängt an der KARTE (Containerabfrage), nicht am Fenster: bei 768 px sind
   Karten im Dreierraster schmaler als im Zweierraster bei 600 px. */
.kc-unterlage { container-type: inline-size; }
.kc-unterlage-akt { grid-template-columns: minmax(0, 1fr); }
.kc-unterlage-akt .btn { padding-inline: 10px; gap: 6px; }
@container (min-width: 21rem) {
  .kc-unterlage-akt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-unterlage-akt > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.kc-raster[data-raster="1"] .kc-unterlage-akt { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 11rem)); }
.kc-raster[data-raster="1"] .kc-unterlage-akt > :last-child:nth-child(odd) { grid-column: auto; }
@media (max-width: 599px) { .kc-vorschau-titel { flex: 1 1 8rem; } }

/* ===================================================================
   Abendlauf 2026-10-01, Scheibe E — Avalgeber (pm-34018, Nr. 28 und 29).
   Jeder Avalgeber ist eine eigene Sektion: Kopf mit Logo und Namen, darunter
   Kontakt und Portal nebeneinander, dann Unterlagen, Abruf, Arten, Eckwerte. */
.kc-bgu-sprung { display: flex; flex-wrap: wrap; gap: var(--kc-l1); margin: var(--kc-l2) 0 var(--kc-l3); }
.kc-bgu-sprungziel { padding: 6px var(--kc-l2); border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--surface); }
.kc-bgu-sprungziel:hover, .kc-bgu-sprungziel:focus-visible { border-color: var(--lime); background: var(--lime); color: var(--on-lime); }
.kc-bgu-geber { padding: var(--kc-l3); margin-top: var(--kc-l3); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); gap: var(--kc-l2); scroll-margin-top: 96px; }
.kc-bgu-geber:first-of-type { border-top: 1px solid var(--line); }
.kc-bgu-kopf { align-items: center; padding-bottom: var(--kc-l2); border-bottom: 1px solid var(--line); }
.kc-bgu-logo { flex: none; width: 96px; height: 40px; object-fit: contain; object-position: left center; }
.kc-bgu-titel b { font-size: 1.15rem; }
.kc-gi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2); }
.kc-gi-teil { display: grid; gap: var(--kc-l1); align-content: start; min-width: 0; padding: var(--kc-l2); border-radius: 12px; background: var(--surface-2); }
.kc-gi-breit, .kc-gi-stand { grid-column: 1 / -1; }
.kc-gi-kopf { display: flex; align-items: center; gap: var(--kc-l1); margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.kc-gi-kopf .ic { width: 16px; height: 16px; color: var(--lime-strong); }
.kc-gi-werte { margin: 0; display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 6px var(--kc-l2); font-size: .9375rem; }
.kc-gi-werte dt { color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-gi-werte dd { margin: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.kc-gi-ruf { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kc-gi-ruf[href]:hover, .kc-gi-ruf[href]:focus-visible { color: var(--lime-strong); text-decoration: underline; }
.kc-gi-text { margin: 0; line-height: 1.55; }
.kc-gi-neben { margin: 0; font-size: .875rem; color: var(--ink-soft); line-height: 1.5; }
/* Operator 2026-10-02: „der CTA-Schatten ist zu hoch“ — in der getönten Kachel steht der Knopf flach, auch beim Überfahren. */
.kc-gi-teil > .btn { justify-self: start; }
.kc-gi .btn, .kc-gi .btn-primary:hover { box-shadow: none; transform: none; }
.kc-gi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-l1); }
.kc-gi-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; gap: var(--kc-l1) var(--kc-l2); align-items: center; padding: var(--kc-l1) 0; border-top: 1px solid var(--line); }
.kc-gi-zeile:first-child { border-top: 0; }
.kc-gi-zeile > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kc-gi-zeile .btn { justify-content: center; white-space: nowrap; box-shadow: none; }
.kc-gi-mehr summary { cursor: pointer; font-size: .875rem; font-weight: 700; padding: var(--kc-l1) 0; }
.kc-gi-marken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-gi-marken li { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; background: var(--surface); }
.kc-gi-stand { margin: 0; font-size: .875rem; color: var(--ink-faint); }
@media (max-width: 899px) { .kc-gi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  /* Die Sektion steht IN einer Karte: Rahmen nur oben, kein eigener Kasten (R146), Inhalt im Maß der Karte. */
  .kc-bgu-geber { padding-inline: 0; border-radius: 0; border-inline: 0; border-bottom: 0; }
  .kc-gi-werte, .kc-gi-zeile { grid-template-columns: minmax(0, 1fr); }
  .kc-gi-zeile .btn { justify-self: stretch; }
}
.kc-gi-alles { grid-column: 1 / -1; }
.kc-gi-alles > summary { cursor: pointer; padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line-strong); border-radius: 10px; font-size: .9375rem; font-weight: 700; background: var(--surface); }
.kc-gi-alles > summary:hover { border-color: var(--lime); color: var(--lime-strong); }
.kc-gi-alles[open] > summary { margin-bottom: var(--kc-l2); }
.kc-gi-innen { display: grid; gap: var(--kc-l2); }
/* „Ansehen und bearbeiten“ lief bei 12,5rem in „…“ (gemessen 2026-10-01, 222 px Spalte): Spalte so breit wie der längste Knopf. */
.kc-bg-formular-aktionen { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }

/* Abnahme #71726 — P2-3: das beschnittene Unterschriftsbild darf die Zeile füllen. P3-5: Dank-Fenster am Telefon
   ohne Rollen bis zu den Knöpfen (Liste enger, Kopf kleiner). */
.kc-v-sig-bild { height: 46px; }
@media (max-width: 599px) {
  .kc-dank { padding-block: var(--kc-l3); max-height: 100dvh; overflow-y: auto; }
  .kc-dank h2 { margin: var(--kc-l2) 0 var(--kc-l1); font-size: 1.45rem; }
  .kc-dank h3 { margin: var(--kc-l2) 0 var(--kc-l1); }
  .kc-dank .kc-dialog-liste { margin-bottom: var(--kc-l2); gap: 4px; }
}

/* ===================================================================
   Abendlauf 2026-10-01, Scheibe C — Kommandozentrale (pm-34018, Nr. 9;
   public/portal-zentrale.js). Aufbau nach der Vorlage „Guten Tag, …“
   (bg-014249): große Begrüßung, darunter die Kommandozeile als das eine
   hervorgehobene Feld, Schnellbefehle als ruhige Kacheln, rechts daneben
   bzw. darunter „Das steht an“. Farben nur aus den Token. */
.kc-zt { display: grid; gap: var(--kc-l3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--kc-l4); }
.kc-zt-kopf { display: grid; gap: var(--kc-l2); }
.kc-zt-gruss { margin: 0; font-family: var(--disp, inherit); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.kc-zt-unter { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 46rem; }
.kc-zt-zeile { position: relative; display: grid; gap: 6px; margin-top: var(--kc-l1); }
.kc-zt-etikett { font-size: .875rem; font-weight: 700; color: var(--ink-soft); }
.kc-zt-feld { display: flex; align-items: center; gap: var(--kc-l2); min-height: 64px; padding: 8px 8px 8px var(--kc-l3);
  border: 2px solid var(--lime); border-radius: 16px; background: var(--surface); }
.kc-zt-feld:focus-within { box-shadow: 0 0 0 4px var(--rail-active); }
.kc-zt-feld > .ic { flex: none; width: 22px; height: 22px; color: var(--lime-strong); }
.kc-zt-eingabe { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 1.05rem; }
.kc-zt-eingabe::placeholder { color: var(--ink-faint); opacity: 1; }
.kc-zt-eingabe:focus-visible { outline: none; box-shadow: none; }
.kc-zt-los { flex: none; min-height: 48px; }
.kc-zt-los .ic { width: 18px; height: 18px; }
.kc-zt-treffer { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 16%, transparent); }
.kc-zt-treffer[hidden] { display: none; }
.kc-zt-treffer-zeile { display: flex; align-items: center; gap: var(--kc-l2); min-height: 48px; padding: 6px var(--kc-l2); border-radius: 10px; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.kc-zt-treffer-zeile .ic { flex: none; width: 18px; height: 18px; color: var(--lime-strong); }
.kc-zt-treffer-zeile[aria-selected="true"], .kc-zt-treffer-zeile:hover { background: var(--lime); color: var(--on-lime); }
.kc-zt-treffer-zeile[aria-selected="true"] .ic, .kc-zt-treffer-zeile:hover .ic { color: var(--on-lime); }
.kc-zt-schnell { display: grid; gap: var(--kc-l2); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.kc-zt-kachel { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: start; gap: var(--kc-l1); min-height: 96px; padding: var(--kc-l2) var(--kc-l3);
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 700; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.kc-zt-kachel-zeichen { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rail-active); color: var(--lime-strong); }
.kc-zt-kachel-zeichen .ic { width: 18px; height: 18px; }
.kc-zt-kachel-text { align-self: end; font-size: .9375rem; }
.kc-zt-kachel:hover, .kc-zt-kachel:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.kc-zt-kachel:hover .kc-zt-kachel-zeichen, .kc-zt-kachel:focus-visible .kc-zt-kachel-zeichen { background: color-mix(in srgb, var(--on-lime) 16%, transparent); color: var(--on-lime); }
.kc-zt-kachel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kc-zt-an { display: grid; gap: var(--kc-l2); padding: var(--kc-l3); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.kc-zt-an-titel { margin: 0; font-size: 1.2rem; font-weight: 800; }
.kc-zt-an-leer { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.kc-zt-an-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-l1); }
.kc-karten.kc-karten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) { .kc-karten.kc-karten-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .kc-karten.kc-karten-vier { grid-template-columns: minmax(0, 1fr); } }
.kc-zt-an-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-zt-an-zeile[data-dringend="ja"] { border-color: var(--lime); box-shadow: inset 3px 0 0 var(--lime); }
.kc-zt-an-zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rail-active); color: var(--lime-strong); }
.kc-zt-an-zeichen .ic { width: 18px; height: 18px; }
.kc-zt-an-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kc-zt-an-text span { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.kc-zt-an-zeile .btn { white-space: nowrap; }
.kc-zt-an-zeile .btn .ic { width: 16px; height: 16px; }
@media (min-width: 1180px) {
  /* In der schmalen rechten Spalte steht der Knopf UNTER dem Text — daneben bräche der Titel in vier Zeilen. */
  .kc-zt-an-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .kc-zt-an-zeile .btn { grid-column: 2; justify-self: start; }
  .kc-zt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .kc-zt-kopf, .kc-zt-schnell { grid-column: 1; }
  .kc-zt-an { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 599px) {
  .kc-zt-feld { padding-left: var(--kc-l2); }
  .kc-zt-los span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kc-zt-los { width: 48px; padding: 0; justify-content: center; }
  .kc-zt-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-zt-an { margin-inline: -20px; border-radius: 0; border-inline: 0; padding-inline: 20px; }
  .kc-zt-an-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .kc-zt-an-zeile .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .kc-zt-kachel { transition: none; } }

/* Nr. 15 — Einstellungen und Benachrichtigungen (public/portal-einstellungen.js). */
.kc-einst-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2) 0; border-top: 1px solid var(--line); }
.kc-einst-zeile:first-of-type { border-top: 0; }
.kc-einst-zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--rail-active); color: var(--lime-strong); }
.kc-einst-zeichen .ic { width: 18px; height: 18px; }
.kc-einst-text { display: grid; gap: 2px; min-width: 0; }
.kc-einst-text span { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.kc-einst-stand { font-size: .875rem; color: var(--ink-faint); white-space: nowrap; }
.kc-einst-wahl { grid-column: 3 / -1; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.kc-einst-wahlknopf { all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; padding: 0 var(--kc-l2); border-radius: 9px; font-size: .9375rem; font-weight: 600; text-align: center; white-space: nowrap; color: var(--ink-soft); }
.kc-einst-wahlknopf:hover { color: var(--lime-strong); }
.kc-einst-wahlknopf[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.kc-einst-wahlknopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-benachr { width: min(92vw, 34rem); }
.kc-benachr h2 { margin-top: 0; }
.kc-benachr-leer { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.kc-benachr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(60vh, 30rem); overflow-y: auto; }
.kc-benachr-knopf { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--kc-l2); align-items: center; padding: var(--kc-l1) var(--kc-l2); border-radius: 12px; }
.kc-benachr-knopf:hover, .kc-benachr-knopf:focus-visible { background: var(--rail-active); }
.kc-benachr-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.kc-benachr-knopf > .ic { width: 16px; height: 16px; color: var(--ink-faint); }
.kc-benachr-zeichen { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rail-active); color: var(--lime-strong); }
.kc-benachr-zeichen .ic { width: 16px; height: 16px; }
.kc-benachr-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kc-benachr-text span { color: var(--ink-soft); font-size: .9375rem; }
.kc-benachr-text small { color: var(--ink-faint); font-size: .875rem; }
@media (max-width: 599px) {
  .kc-einst-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kc-einst-stand { display: none; }
  .kc-einst-wahl { grid-column: 1 / -1; }
}

/* Nr. 25 — Marken im Dokument-Bearbeiter verschieben und in der Größe ziehen
   (public/portal-dok-bearbeiten.js). Greifer oben links, Eckgriff unten
   rechts; beide 28 px sichtbar mit 44 px Trefferfläche. */
.kc-dokb-marke { touch-action: none; }
.kc-dokb-marke.wird-bewegt { outline-style: solid; }
.kc-dokb-marke-unterschrift img { cursor: grab; touch-action: none; user-select: none; }
.kc-dokb-marke.wird-bewegt img { cursor: grabbing; }
.kc-dokb-marke-greif, .kc-dokb-marke-gross { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--lime); border-radius: 50%; background: var(--surface); color: var(--lime-strong); touch-action: none; }
.kc-dokb-marke-greif::after, .kc-dokb-marke-gross::after { content: ""; position: absolute; inset: -8px; }
.kc-dokb-marke-greif { left: -14px; top: -32px; cursor: grab; }
.kc-dokb-marke-greif .ic { width: 14px; height: 14px; }
.kc-dokb-marke-gross { right: -14px; bottom: -14px; cursor: nwse-resize; }
.kc-dokb-marke-gross::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.kc-dokb-marke-greif:focus-visible, .kc-dokb-marke-gross:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Abnahme #71749 (BLOCK auf cd511bc) — N1: die Spalte der Kommandozentrale maß sich am Eingabefeld (dessen
   Eigenbreite zählt trotz min-width 0 zur Mindestbreite der Rasterspur) und lief bei 320–375 px 70–15 px über.
   N2: Raster-Regel des Hauses, höchstens drei Flächen je Zeile — Schnellbefehle 3/2, Kennzahlen 2 × 2, die
   Wahl der Spaltenzahl als eine Leiste (flex) statt als Raster. N4: das Fenster der Glocke am Telefon randlos. */
.kc-zt-kopf, .kc-zt-zeile { grid-template-columns: minmax(0, 1fr); }
.kc-zt-schnell { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-karten.kc-karten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-einst-wahl { display: inline-flex; }
.kc-einst-wahlknopf { flex: 1 1 0; }
@media (max-width: 599px) {
  .kc-zt-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-zt-los span { display: none; }
  .kc-einst-wahl { display: flex; }
  dialog.kc-benachr { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 0; border-inline: 0; border-bottom: 0; }
}
@media (max-width: 479px) { .kc-karten.kc-karten-vier { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .kc-einst-wahlknopf { padding: 0 6px; font-size: .875rem; min-width: 0; } }

/* ===================================================================
   Abendlauf 2026-10-01, Nr. 21 — das Blatt des Vertrags (pm-34018).

   Operator 2026-10-01: „dann habe ich dir eine Vorlage aus dem Canva gegeben …
   da ist der Vertrag für Zertifizierung! und hier können wir doch auch das
   Design nutzen, damit wir einheitlich sind! dein Design PDF ist very low und
   auch nicht konsistent zum Angebot“.

   Vorlage: Canva „TCC_dbl9 GmbH_Auftragsvereinbarung“ (31 Seiten). Übernommen:
     - Deckblatt: rote Fläche, Bildmarke oben links, Leistungen groß und dünn
       in Versalien, Streifenband, unten die Angaben
     - Titelblock je Abschnitt: rote Fläche, großer dünner Titel, Pfeil nach
       rechts unten; das Inhaltsverzeichnis in Dunkel mit Punktraster
     - Datenzeilen: Name fett links, Wert daneben, dunkle Haarlinie
     - Textseiten: Bildmarke oben links auf JEDER Seite, § fett und dunkel,
       „Seite x von y“ unten rechts
     - Schlussseite: rote Fläche, Bildmarke groß, Stammdaten
   Schrift wie im Angebot (lib/angebotdokument.mjs): Open Sans — Angebot und
   Vertrag sind ein Schriftbild. Farben nur aus den Token des Hauses.

   Nur Stil: am gespeicherten Vertrag (HTML und SHA-256 des Vertragstexts)
   ändert sich nichts — auch früher geschlossene Verträge drucken so. Gilt nur
   für die eigene Vertragsseite (body.kc-vertrag-seite) und ihr PDF;
   lib/vertrag-druck.mjs bettet Schrift und Bildmarken für den Druck ohne Netz
   ein. Die Vorschau in der Beauftragung bleibt, wie sie ist. */
@font-face { font-family: "Open Sans dbl9"; font-weight: 300 800; font-display: swap;
  src: url("/modul/fonts/open-sans.woff2") format("woff2"); }
body.kc-vertrag-seite {
  --kc-v-rand: 20mm;
  max-width: 210mm; padding: 0; background: var(--bg); color: var(--ink);
  font-family: "Open Sans dbl9", "Open Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  font-size: 9.5pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body.kc-vertrag-seite .kc-vertrag { gap: 6mm; font-size: inherit; line-height: inherit; color: inherit; hyphens: manual; padding-block: 6mm; }

/* Deckblatt */
body.kc-vertrag-seite .kc-v-deck {
  display: flex; flex-direction: column; gap: 0; box-sizing: border-box; min-height: 297mm; padding: 14mm var(--kc-v-rand) 16mm;
  background: var(--lime); color: var(--on-lime); border-radius: 0; position: relative; overflow: hidden;
}
body.kc-vertrag-seite .kc-v-deck::before { content: ""; order: 0; flex: none; width: 62mm; height: 12mm;
  background: url("/marke/dbl9-logo-auf-rot.svg") no-repeat left center / contain; }
body.kc-vertrag-seite .kc-v-deck-leist { order: 1; display: grid; gap: 0; margin-top: 24mm; font-size: 25pt; font-weight: 300; letter-spacing: 0; line-height: 1.16; }
body.kc-vertrag-seite .kc-v-deck-leist span { display: block; }
/* Streifenband der Vorlage: drei Reihen schräger Balken, hell · dunkel · hell. */
body.kc-vertrag-seite .kc-v-deck::after { content: ""; order: 2; flex: none; height: 62mm; margin: 22mm calc(-1 * var(--kc-v-rand)) auto;
  background:
    repeating-linear-gradient(104deg, var(--on-lime) 0 4.2mm, transparent 4.2mm 8.4mm) 0 0 / 100% 19mm no-repeat,
    repeating-linear-gradient(104deg, var(--ink) 0 4.2mm, transparent 4.2mm 8.4mm) 0 21.5mm / 100% 19mm no-repeat,
    repeating-linear-gradient(104deg, var(--on-lime) 0 4.2mm, transparent 4.2mm 8.4mm) 0 43mm / 100% 19mm no-repeat; }
body.kc-vertrag-seite .kc-v-deck h1 { order: 3; margin: 14mm 0 0; font-size: 27pt; font-weight: 300; letter-spacing: 0; line-height: 1.12; color: var(--on-lime); overflow-wrap: anywhere; hyphens: manual; }
body.kc-vertrag-seite .kc-v-deck-sub { order: 4; margin: 5mm 0 0; font-size: 11pt; font-weight: 400; color: var(--on-lime); }
body.kc-vertrag-seite .kc-v-deck-marke { order: 5; margin: 10mm 0 0; padding-top: 4mm; border-top: .3mm solid color-mix(in srgb, var(--on-lime) 55%, transparent); font-size: 10pt; font-weight: 600; color: var(--on-lime); }

/* Blätter */
body.kc-vertrag-seite .kc-v-blatt { display: block; box-sizing: border-box; padding: 16mm var(--kc-v-rand); background: var(--surface); border-radius: 0; }
body.kc-vertrag-seite .kc-v-blatt > * + * { margin-top: 6mm; }
/* Titelblock: rote Fläche, großer dünner Titel, Pfeil. */
body.kc-vertrag-seite h2.kc-v-band {
  position: relative; box-sizing: border-box; display: flex; align-items: flex-end; min-height: 44mm; margin: 0; padding: 9mm 30mm 9mm 9mm;
  background: var(--lime); color: var(--on-lime); border-radius: 0; font-size: 25pt; font-weight: 300; letter-spacing: 0; line-height: 1.12;
  overflow-wrap: anywhere; break-after: avoid; break-inside: avoid;
}
body.kc-vertrag-seite h2.kc-v-band::after { content: ""; position: absolute; right: 9mm; bottom: 9mm; width: 11mm; height: 11mm;
  background:
    linear-gradient(var(--on-lime), var(--on-lime)) right bottom / 100% 2.4mm no-repeat,
    linear-gradient(var(--on-lime), var(--on-lime)) right bottom / 2.4mm 100% no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1.2mm), var(--on-lime) calc(50% - 1.2mm), var(--on-lime) calc(50% + 1.2mm), transparent calc(50% + 1.2mm)); }
/* Inhaltsverzeichnis: dunkle Fläche mit Punktraster. */
body.kc-vertrag-seite .kc-v-blatt:has(> .kc-v-inhalt) > h2.kc-v-band { min-height: 58mm; padding-bottom: 24mm; align-items: flex-start; color: var(--surface);
  background: radial-gradient(circle, color-mix(in srgb, var(--surface) 70%, transparent) .35mm, transparent .45mm) 0 100% / 5mm 5mm, var(--ink); }
body.kc-vertrag-seite .kc-v-blatt:has(> .kc-v-inhalt) > h2.kc-v-band::after { filter: none;
  background:
    linear-gradient(var(--surface), var(--surface)) right bottom / 100% 2.4mm no-repeat,
    linear-gradient(var(--surface), var(--surface)) right bottom / 2.4mm 100% no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1.2mm), var(--surface) calc(50% - 1.2mm), var(--surface) calc(50% + 1.2mm), transparent calc(50% + 1.2mm)); }
/* Zwischentitel: Versalien, fett, roter Strich — wie „AUFTRAGNEHMER“ der Vorlage. */
body.kc-vertrag-seite h3.kc-v-band { margin: 0; padding: 0 0 2mm; background: none; color: var(--ink); border-radius: 0; border-bottom: .5mm solid var(--lime);
  font-size: 9pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; break-after: avoid; }

body.kc-vertrag-seite .kc-v-blatt > * + h3.kc-v-band { margin-top: 10mm; }
/* Datenzeilen: Name fett links, Wert daneben, dunkle Haarlinie. */
/* min-width 0: das Stilblatt der Schale gibt JEDER Tabelle 640 px Mindestbreite (für Rollflächen am Schirm). Im
   Druck ist es eingebettet — zwei Unterschriftsblöcke nebeneinander wurden damit breiter als die Seite, und
   Chromium verkleinerte dafür Deckblatt und Schlussseite auf zwei Drittel. */
body.kc-vertrag-seite .kc-v-tab { font-size: 9.5pt; min-width: 0; }
body.kc-vertrag-seite .kc-v-tab th, body.kc-vertrag-seite .kc-v-tab td { padding: 2.6mm 0; border-bottom: .25mm solid var(--ink); }
body.kc-vertrag-seite .kc-v-tab td { padding-left: 4mm; }
body.kc-vertrag-seite .kc-v-tab tbody th { width: 36%; color: var(--ink); font-weight: 700; }
body.kc-vertrag-seite .kc-v-tab thead th { background: none; padding-block: 2mm; border-bottom: .5mm solid var(--ink); font-size: 8pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.kc-vertrag-seite .kc-v-tab thead th + th { padding-left: 4mm; }
body.kc-vertrag-seite .kc-v-tab td small { color: var(--ink-soft); font-size: 8.5pt; }
body.kc-vertrag-seite .kc-v-tab tr { break-inside: avoid; }
/* Die Seite „Unternehmens-Daten“: große Zeilen, Wert rechts — wie Seite 2 der Vorlage. */
body.kc-vertrag-seite .kc-v-deck + .kc-v-blatt .kc-v-tab { font-size: 13pt; margin-top: 14mm; }
body.kc-vertrag-seite .kc-v-deck + .kc-v-blatt .kc-v-tab th, body.kc-vertrag-seite .kc-v-deck + .kc-v-blatt .kc-v-tab td { padding-block: 4.2mm; }
body.kc-vertrag-seite .kc-v-deck + .kc-v-blatt .kc-v-tab td { text-align: right; }
body.kc-vertrag-seite .kc-v-pos tfoot th { text-align: right; font-weight: 600; }
body.kc-vertrag-seite .kc-v-summe th, body.kc-vertrag-seite .kc-v-summe td { border-top: .5mm solid var(--ink); }
body.kc-vertrag-seite .kc-v-brutto th, body.kc-vertrag-seite .kc-v-brutto td { font-weight: 800; font-size: 11pt; color: var(--lime); border-bottom: .5mm solid var(--ink); }
body.kc-vertrag-seite .kc-v-klein, body.kc-vertrag-seite .kc-v-norm small { color: var(--ink-soft); font-size: 8.5pt; }
body.kc-vertrag-seite .kc-v-satz { color: var(--ink-soft); font-style: normal; font-size: 9pt; }
body.kc-vertrag-seite .kc-v-partei { break-inside: avoid; }
body.kc-vertrag-seite .kc-v-partei .kc-v-tab th, body.kc-vertrag-seite .kc-v-partei .kc-v-tab td { border-bottom-color: var(--line-strong); }
body.kc-vertrag-seite .kc-v-partei .kc-v-tab tbody th { font-weight: 600; }
body.kc-vertrag-seite .kc-v-inhalt { margin-top: 10mm; padding: 0; list-style: none; columns: auto; font-size: 10.5pt; line-height: 2; }

/* Budget: große Zahl auf Rot, Normen mit rotem Strich. */
body.kc-vertrag-seite .kc-v-budget { gap: 1mm; padding: 9mm; background: var(--lime); color: var(--on-lime); border-radius: 0; break-inside: avoid; }
body.kc-vertrag-seite .kc-v-budget b { font-size: 30pt; font-weight: 300; line-height: 1.1; }
body.kc-vertrag-seite .kc-v-budget span { font-size: 10pt; }
body.kc-vertrag-seite .kc-v-normen { gap: 5mm; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.kc-vertrag-seite .kc-v-norm { gap: 1mm; padding: 4mm 0 4mm 5mm; border: 0; border-left: 1mm solid var(--lime); border-radius: 0; break-inside: avoid; }
body.kc-vertrag-seite .kc-v-norm b { font-size: 16pt; font-weight: 300; color: var(--ink); }
body.kc-vertrag-seite .kc-v-norm span { font-weight: 700; }

/* Vertragstext: § fett und dunkel, Absätze ruhig. */
body.kc-vertrag-seite .kc-v-text { font-size: 9pt; line-height: 1.6; }
body.kc-vertrag-seite .kc-v-text > * + * { margin-top: 2.2mm; }
body.kc-vertrag-seite .kc-v-text h2.kc-v-par { margin: 9mm 0 0; padding-top: 4mm; border-top: .25mm solid var(--line-strong); font-size: 11pt; font-weight: 800; color: var(--ink); break-after: avoid; }
body.kc-vertrag-seite .kc-v-text h2.kc-v-par:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body.kc-vertrag-seite .kc-v-text h3 { margin: 5mm 0 0; font-size: 9pt; font-weight: 800; break-after: avoid; }
body.kc-vertrag-seite .kc-v-text h4 { margin: 3mm 0 0; font-size: 9pt; font-weight: 700; break-after: avoid; }
body.kc-vertrag-seite .kc-v-text p { orphans: 3; widows: 3; }
body.kc-vertrag-seite .kc-v-text ul { padding-left: 5mm; }

/* Unterschriften. */
body.kc-vertrag-seite .kc-v-sigs { gap: 10mm; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.kc-vertrag-seite .kc-v-sig { break-inside: avoid; }
body.kc-vertrag-seite .kc-v-sig .kc-v-tab { font-size: 8.5pt; }
body.kc-vertrag-seite .kc-v-sig .kc-v-tab th, body.kc-vertrag-seite .kc-v-sig .kc-v-tab td { border-bottom-color: var(--line-strong); padding-block: 2mm; }
body.kc-vertrag-seite .kc-v-sig .kc-v-sig-linie { height: 16mm; border-bottom: .5mm solid var(--ink) !important; }
body.kc-vertrag-seite .kc-v-sig-bild { height: 14mm; }
body.kc-vertrag-seite .kc-v-pruefsumme { margin: -6mm 0 0; padding: 0 var(--kc-v-rand) 12mm; background: var(--surface); color: var(--ink-soft); font-size: 7.5pt; line-height: 1.5; overflow-wrap: anywhere; }

/* Schlussseite */
body.kc-vertrag-seite .kc-v-fuss {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; min-height: 297mm; padding: 14mm var(--kc-v-rand) 16mm;
  background: var(--lime); color: var(--on-lime); text-align: left; font-size: 8.5pt; line-height: 1.7; overflow: hidden;
}
body.kc-vertrag-seite .kc-v-fuss::before { content: ""; position: absolute; left: var(--kc-v-rand); top: 14mm; width: 62mm; height: 12mm;
  background: url("/marke/dbl9-logo-auf-rot.svg") no-repeat left center / contain; }
body.kc-vertrag-seite .kc-v-fuss::after { content: ""; order: -1; flex: none; height: 33mm; margin-bottom: 9mm;
  background: url("/marke/dbl9-logo-auf-rot.svg") no-repeat left bottom / contain; }
@media screen and (max-width: 800px) {
  body.kc-vertrag-seite { --kc-v-rand: 20px; }
  body.kc-vertrag-seite .kc-v-deck, body.kc-vertrag-seite .kc-v-fuss { min-height: 0; }
  body.kc-vertrag-seite .kc-v-deck-leist, body.kc-vertrag-seite .kc-v-deck h1, body.kc-vertrag-seite h2.kc-v-band { font-size: clamp(1.4rem, 6vw, 2.1rem); }
  body.kc-vertrag-seite .kc-v-sigs, body.kc-vertrag-seite .kc-v-normen { grid-template-columns: minmax(0, 1fr); }
}
/* Druck: jede Seite trägt die Bildmarke oben links und „Seite x von y“ unten rechts (Seitenrandfelder,
   Chromium ab 131). Deckblatt und Schlussseite sind eigene randlose Seiten ohne Randfelder. Die benannte
   Seite „kcvertrag“ gilt nur für die Vertragsseite — kein anderer Druck des Kundencenters ändert sich. */
@page kcvertrag { size: A4; margin: 34mm 20mm 22mm;
  @top-left { content: ""; background: url("/marke/dbl9-logo-dunkel.svg") no-repeat left 13mm / 46mm auto; }
  @bottom-left { content: "dbl9 GmbH · Vertrag"; font: 7pt/1.3 "Open Sans dbl9", "Open Sans", Arial, sans-serif; vertical-align: top; padding-top: 6mm; }
  @bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 7pt/1.3 "Open Sans dbl9", "Open Sans", Arial, sans-serif; vertical-align: top; padding-top: 6mm; }
}
@page kcvertragdeck { size: A4; margin: 0; }
@media print {
  body.kc-vertrag-seite { max-width: none; margin: 0; background: var(--surface); page: kcvertrag; }
  body.kc-vertrag-seite .kc-vertrag { display: block; padding: 0; }
  body.kc-vertrag-seite .kc-v-deck, body.kc-vertrag-seite .kc-v-fuss { page: kcvertragdeck; height: 297mm; min-height: 0; }
  body.kc-vertrag-seite .kc-v-deck { break-after: page; }
  body.kc-vertrag-seite .kc-v-fuss { break-before: page; }
  body.kc-vertrag-seite .kc-v-blatt { padding: 0; break-before: page; }
  /* Zahlweg und Unterschriften stehen zusammen; die Unterschriften beginnen keine eigene Seite. */
  /* Kein „break-inside: avoid“ am ganzen Blatt: mit zwei und mehr Unterzeichnern füllte es die Seite, und die
     Prüfzeile stand allein auf einem fast leeren Blatt (Abnahme #71770 P3-2). Die einzelnen Blöcke bleiben ganz. */
  body.kc-vertrag-seite .kc-v-blatt:has(.kc-v-sigs) { break-before: auto; margin-top: 12mm; }
  /* Ab fünf Blöcken (drei Reihen) beginnen die Unterschriften eine eigene Seite — sonst stünde der fünfte Block
     allein mit der Prüfzeile auf dem Folgeblatt (Abnahme #71788 P3-c). */
  body.kc-vertrag-seite .kc-v-blatt:has(.kc-v-sig:nth-child(5)) { break-before: page; margin-top: 0; }
  body.kc-vertrag-seite .kc-v-blatt:has(.kc-v-sigs) > h2.kc-v-band { min-height: 0; padding: 4mm 9mm; font-size: 14pt; }
  body.kc-vertrag-seite .kc-v-blatt:has(.kc-v-sigs) > h2.kc-v-band::after { display: none; }
  body.kc-vertrag-seite .kc-v-pruefsumme { margin: 0; padding: 4mm 0 0; break-before: avoid; }
  body.kc-vertrag-seite .kc-v-sigs { gap: 6mm 10mm; }
}

/* ===================================================================
   Abendlauf 2026-10-01, Nr. 32 — Stufe 4 der Bürgschaften-Strecke nach den
   Vorlagen bg-013848 „Angaben prüfen & absenden“ und bg-013851 „Prüfbereiche“
   (public/portal-bg-pruefung.js). Aufklappbare Zeilen: Zeichen, Titel mit
   Kurzfassung, rechts Stand oder „Bearbeiten“, Pfeil. Farben nur aus den Token. */
.kc-bgo-werkzeug { align-items: center; }
.kc-bgp-titel { margin: 0 auto 0 0; font-size: 1.15rem; font-weight: 800; }
.kc-bgp-liste { display: grid; gap: var(--kc-l1); }
.kc-bgp-zeile { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-bgp-zeile[open] { border-color: var(--line-strong); }
.kc-bgp-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--kc-l2); min-height: 56px; padding: var(--kc-l1) var(--kc-l2); cursor: pointer; list-style: none; border-radius: 12px; }
.kc-bgp-kopf::-webkit-details-marker { display: none; }
.kc-bgp-kopf:hover { background: var(--surface-2); }
.kc-bgp-kopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bgp-zeichen { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rail-active); color: var(--lime-strong); }
.kc-bgp-zeichen .ic { width: 18px; height: 18px; }
.kc-bgp-text { display: grid; gap: 2px; min-width: 0; }
.kc-bgp-text b { font-size: 1rem; }
.kc-bgp-text span { color: var(--ink-soft); font-size: .875rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-bgp-zeile[open] .kc-bgp-text span { white-space: normal; }
.kc-bgp-stand { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.kc-bgp-stand .ic, .kc-bgp-ausruf { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; font-size: .8rem; font-weight: 800; line-height: 1; }
.kc-bgp-stand.st-ok { color: var(--good); }
.kc-bgp-stand.st-ok .ic { background: var(--good); color: var(--surface); }
.kc-bgp-stand.st-warn { color: var(--warn); }
.kc-bgp-stand.st-warn .kc-bgp-ausruf { background: var(--warn); color: var(--surface); }
.kc-bgp-stand.st-bad { color: var(--bad); }
.kc-bgp-stand.st-bad .ic { background: var(--bad); color: var(--surface); }
.kc-bgp-bearbeiten { all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; display: inline-grid; align-items: center; padding: 0 var(--kc-l1); border-radius: 8px; color: var(--lime-strong); font-size: .875rem; font-weight: 700; }
.kc-bgp-bearbeiten:hover { text-decoration: underline; }
.kc-bgp-bearbeiten:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-bgp-pfeil { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink-soft); transform: rotate(-90deg); transition: transform .15s ease; }
.kc-bgp-pfeil .ic { width: 16px; height: 16px; }
.kc-bgp-zeile[open] .kc-bgp-pfeil { transform: rotate(90deg); }
.kc-bgp-koerper { display: grid; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l2) var(--kc-l3) calc(36px + 2 * var(--kc-l2)); border-top: 1px solid var(--line); }
.kc-bgp-hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--kc-l2); padding: var(--kc-l2) var(--kc-l3); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-bgp-hinweis.st-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.kc-bgp-hinweis.st-bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.kc-bgp-hinweis.st-ok { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.kc-bgp-hinweis-zeichen { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; color: var(--surface); background: var(--warn); }
.kc-bgp-hinweis.st-bad .kc-bgp-hinweis-zeichen { background: var(--bad); }
.kc-bgp-hinweis.st-ok .kc-bgp-hinweis-zeichen { background: var(--good); }
.kc-bgp-hinweis-zeichen .ic { width: 14px; height: 14px; }
.kc-bgp-hinweis-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kc-bgp-hinweis-text span { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.kc-bgp-hinweis .btn { white-space: nowrap; background: var(--surface); }
.kc-bgp-besttext { display: grid; gap: 4px; min-width: 0; }
.kc-bgp-zusatz { color: var(--ink-soft); font-size: .875rem; line-height: 1.5; }
.kc-bgp-zusatz a { color: var(--lime-strong); font-weight: 600; }
.kc-bgp-zeitplan, .kc-bgp-prozess { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kc-l2); }
.kc-bgp-zeitplan li { position: relative; display: grid; gap: 2px; padding-left: 26px; }
.kc-bgp-zeitplan li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.kc-bgp-zeitplan li[data-jetzt="ja"]::before { background: var(--lime); }
.kc-bgp-zeitplan li + li::after { content: ""; position: absolute; left: 8.5px; top: calc(-1 * var(--kc-l2) - 2px); width: 1px; height: calc(var(--kc-l2) + 4px); background: var(--line-strong); }
.kc-bgp-zeitplan span, .kc-bgp-prozess li { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.kc-bgp-prozess { counter-reset: bgp; }
.kc-bgp-prozess li { counter-increment: bgp; position: relative; padding-left: 32px; min-height: 22px; }
.kc-bgp-prozess li::before { content: counter(bgp); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
@media (max-width: 599px) {
  .kc-bgp-kopf { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .kc-bgp-kopf > .kc-bgp-stand, .kc-bgp-kopf > .kc-bgp-bearbeiten { grid-column: 2; grid-row: 2; justify-self: start; padding-left: 0; }
  .kc-bgp-pfeil { grid-column: 3; grid-row: 1; }
  .kc-bgp-text span { white-space: normal; }
  .kc-bgp-koerper { padding-left: var(--kc-l2); }
  .kc-bgp-hinweis { grid-template-columns: auto minmax(0, 1fr); }
  .kc-bgp-hinweis .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .kc-bgp-pfeil { transition: none; } }

/* Abnahme #71794 — Wächter der Fokusfalle in der Druckansicht (public/modul/dokument-vorschau.js): nimmt den Fokus
   nur an, um ihn weiterzugeben; ohne Fläche, ohne Rahmen. */
.kc-fokus-waechter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); outline: 0; }

/* ============================================================== Live-Chat
   Operator 2026-10-02 (pm-34032): Chatfenster über der Seite (public/modul/livechat.js). Eigener Block
   kc-chat, nur vorhandene Tokens. Ab 600 px steht das Fenster unten rechts; darunter füllt es den Schirm
   randlos (Rundung 0, kein Rahmen). Das Fenster IST eine Ebene des Hauses (.kc-vorschau, .kc-vorschau-kasten,
   .kc-vorschau-kopf mit Knopfleiste): Lage im Stapel, Abdunklung und Kopf kommen von dort; hier stehen nur
   Platz, Größe und der Inhalt des Chats. */
.kc-vorschau.kc-chat { place-items: end; }
.kc-chat .kc-chat-kasten { display: flex; flex-direction: column; width: min(100%, 26rem); height: min(100%, 38rem);
  min-width: 0; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: clip; }
.kc-chat .kc-chat-kopf { flex-wrap: nowrap; }
.kc-chat-marke { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--lime); }
.kc-chat-marke .ic { width: 20px; height: 20px; }
.kc-chat .kc-chat-namen { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kc-chat-titel { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.kc-chat-unter { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.kc-chat .kc-chat-kopf .kc-vorschau-akt { flex: none; width: auto; }
.kc-chat-hinweis { margin: 0; padding: var(--kc-l1) var(--kc-l3); font-size: .875rem; line-height: 1.45; color: var(--ink-soft);
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.kc-chat-verlauf { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: grid; align-content: start; gap: var(--kc-l2);
  padding: var(--kc-l3); background: var(--surface-2); }
.kc-chat-verlauf:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.kc-chat-leer { margin: var(--kc-l4) 0; text-align: center; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.kc-chat-zeile { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.kc-chat-zeile[data-richtung="kunde"] { justify-items: end; }
.kc-chat-blase { display: grid; gap: 4px; max-width: 86%; min-width: 0; padding: var(--kc-l1) var(--kc-l2); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); background: var(--surface); font-size: .95rem; line-height: 1.5; }
.kc-chat-zeile[data-richtung="kunde"] .kc-chat-blase { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.kc-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.kc-chat-betreff { font-size: .875rem; overflow-wrap: anywhere; }
.kc-chat-zeit { font-size: .875rem; color: var(--ink-soft); }
.kc-chat-stand { margin: 0; padding: var(--kc-l1) var(--kc-l3); font-size: .875rem; line-height: 1.45; color: var(--ink); background: var(--bad-bg);
  border-top: 1px solid var(--line); }
.kc-chat-eingabe { display: grid; gap: var(--kc-l1); padding: var(--kc-l2) var(--kc-l3) var(--kc-l3); border-top: 1px solid var(--line); background: var(--surface); }
.kc-chat-feldname { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-chat-eingabe .kc-knopfleiste { margin-top: 0; }
.kc-chat textarea.kc-chat-feld { height: auto; min-height: 4.25rem; max-height: 9rem; padding: var(--kc-l1) var(--kc-l2); line-height: 1.5; resize: none; }
.kc-chat-feld:focus-visible, .kc-chat .btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-chat-los { justify-content: center; }
.kc-chat-hilfe { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--ink-faint); }
@media (max-width: 599px) {
  .kc-vorschau.kc-chat { place-items: stretch; background: var(--surface); }
  .kc-chat .kc-chat-kasten { width: 100%; height: 100%; border: 0; box-shadow: none; }
  .kc-chat .kc-chat-kopf { padding-inline: var(--kc-l2); }
  .kc-chat-verlauf { padding: var(--kc-l2); }
  .kc-chat-eingabe { padding: var(--kc-l2); }
  .kc-chat-blase { max-width: 92%; }
}
/* Die Zeile zum Messenger in den Formularen (Seite Nachrichten, Rückfrage, Rückruf, Preisvorschlag) — derselbe Text wie im Chatfenster. */
.kc-chat-wegweis { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
/* Rechnungen (public/portal-rechnungen.js): je Muster eine Zeile — Name, Art und Betrag, zwei gleich breite Knöpfe.
   Telefon: alles untereinander, Knöpfe in voller Breite; ab 640 px die Knöpfe nebeneinander; ab 1024 px eine Reihe. */
.kc-rechnung-zeile { display: grid; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2) 0; border-bottom: 1px solid var(--line); }
.kc-rechnung-zeile:last-child { border-bottom: 0; }
.kc-rechnung-zeile > * { min-width: 0; }
.kc-rechnung-zeile .btn { width: 100%; min-width: 0; justify-content: center; }
.kc-rechnung-betrag { font-size: .95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .kc-rechnung-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-rechnung-zeile > .kc-zeile-k, .kc-rechnung-zeile > .kc-rechnung-betrag { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .kc-rechnung-zeile { grid-template-columns: minmax(0, 1fr) auto 11rem 11rem; }
  .kc-rechnung-zeile > .kc-zeile-k, .kc-rechnung-zeile > .kc-rechnung-betrag { grid-column: auto; }
  .kc-rechnung-betrag { text-align: right; white-space: nowrap; }
}
/* Register (public/portal-versand.js, Operator 2026-10-02): ein Dokument ist eine Zeile, keine Kachel. Zeilen stehen in
   Gruppen mit 1-px-Linie; die Gruppe hält ihre Zeilen mit Innenabstand, damit keine Zeile die Rundung berührt. Die
   gewählte Zeile trägt Balken und Tönung. Telefon zuerst: Name und Nebenangabe untereinander, ab 640 px nebeneinander. */
.kc-reg { display: grid; gap: var(--kc-l2); min-width: 0; }
.kc-reg-zahl { margin: 0; font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.kc-reg-gruppe { display: grid; gap: 2px; min-width: 0; padding: var(--kc-l1); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kc-reg-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--kc-l2); align-items: center; min-height: 48px; padding: 0 var(--kc-l2); border-radius: 8px; cursor: pointer; list-style: none; }
.kc-reg-kopf::-webkit-details-marker { display: none; }
.kc-reg-kopf:hover { background: var(--surface-2); }
.kc-reg-titel { font-size: .96rem; font-weight: 700; }
.kc-reg-stand { font-size: .875rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kc-reg-kopf .ic { width: 18px; height: 18px; color: var(--ink-soft); transform: rotate(-90deg); transition: transform .16s; }
.kc-reg-gruppe[open] > .kc-reg-kopf .ic { transform: rotate(90deg); }
.kc-reg-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--kc-l2); align-items: center; min-height: 48px; padding: var(--kc-l1) var(--kc-l2);
  border-radius: 8px; border-inline-start: 3px solid transparent; cursor: pointer; }
.kc-reg-zeile:hover { background: var(--surface-2); }
.kc-reg-zeile:has(input:checked) { background: var(--surface-2); border-inline-start-color: var(--lime); }
.kc-reg-zeile:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-reg-zeile:has(input:disabled) { cursor: not-allowed; color: var(--ink-soft); }
.kc-reg-zeile input { width: 18px; height: 18px; margin: 0; accent-color: var(--lime); grid-row: 1 / span 2; }
/* Ein Dateiname ist eine Kennung, kein Fließtext: er bricht an Leerstellen und Trennzeichen und nur dann im Wort, wenn das Wort allein nicht in die Zeile passt (bei 320 px: „Unternehmenspräsentation.pdf“). Silbentrennung ist aus — sie trennte bei 390 px auch Wörter, die in die nächste Zeile gepasst hätten. */
.kc-reg-name { font-size: .96rem; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; hyphens: manual; }
/* Die Nebenangabe trägt beim Empfänger eine Mailadresse — eine Kennung, kein Wort: sie darf überall umbrechen, sonst schiebt sie die Seite bei 320 px in die Breite (Abnahme #71899, email-versand-abstand-probe U4). */
.kc-reg-neben { grid-column: 2; min-width: 0; font-size: .875rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-reg-leiste { display: flex; flex-wrap: wrap; gap: var(--kc-l2); align-items: center; justify-content: space-between; }
.kc-vl-zeile { display: grid; gap: var(--kc-l2); align-items: center; padding: var(--kc-l2); border-radius: 8px; }
.kc-vl-zeile + .kc-vl-zeile { border-top: 1px solid var(--line); border-radius: 0; }
.kc-vl-text { display: grid; gap: 3px; min-width: 0; }
.kc-vl-kopf { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: baseline; }
.kc-vl-kopf b { font-size: .96rem; overflow-wrap: break-word; }
.kc-vl-standard { font-size: .875rem; font-weight: 700; color: var(--lime-strong); }
.kc-vl-inhalt { font-size: .875rem; color: var(--ink-soft); }
.kc-vl-akt { display: grid; gap: var(--kc-l1); }
.kc-vl-akt .btn { width: 100%; min-width: 0; justify-content: center; box-shadow: none; }
.kc-vl-formular { display: grid; gap: var(--kc-l2); }
.kc-vl-formular:empty { display: none; }
.kc-vl-titel { margin: var(--kc-l2) 0 0; font-size: 1.05rem; }
@media (min-width: 640px) {
  .kc-reg-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kc-reg-zeile input { grid-row: auto; }
  .kc-reg-neben { grid-column: auto; white-space: nowrap; }
  .kc-vl-zeile { grid-template-columns: minmax(0, 1fr) 27rem; }
  .kc-vl-akt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tätigkeitsfelder in der Partner-Ansicht (public/portal-finanzierung.js): reine Angaben, keine Knöpfe. Ein Feld wie
   „Komplette Produktions- und Versorgungsanlagen“ passt bei 320 px nicht in eine Zeile — als Angabe darf es an
   Leerstellen umbrechen; die Knopf-Regel „einzeilig“ gilt für Bedienelemente (.chip, .btn), nicht für Angaben. */
.kc-partner-feld { display: inline-flex; align-items: center; min-height: 2rem; padding: 4px 11px; border-radius: 12px; font-size: .875rem; font-weight: 700;
  line-height: 1.35; color: var(--ink-soft); background: var(--surface-2); overflow-wrap: break-word; }

/* ------------------------------------------------ Rechnungen nach Bildvorlage (Operator 2026-10-02, pm-34032)
   Aufbau aus den Bauteilen des Kundencenters: Raster mit rechter Spalte (.kc-bg-raster), Kennzahl-Kacheln
   (.kc-kto-kennzahl), Reiter (.kc-bg-reiter), Karten (.kc-bg-karte, .kc-bg-railkarte), Tabelle (.kc-bg-tabelle),
   Statusmarke (.kc-bg-status), Suchfeld (.kc-gl-suche), Auswahl (.cidd). Hier steht nur, was die Vorlage
   darüber hinaus verlangt. Abstände aus der Leiter --kc-l*, Farben aus den Token der Schale. */
/* Dichte wie in der Vorlage: Krümelpfad, Titel und Inhalt stehen enger als der Seitenabstand der Schale
   (--kc-l4); die negativen Ränder nehmen ihn auf --kc-l1 und --kc-l2 zurück (Abnahme #71904, sechs Zeilen). */
.kc-re-krumen { margin-bottom: calc(var(--kc-l1) - var(--kc-l4)); }
.kc-re-kopf { margin-bottom: calc(var(--kc-l2) - var(--kc-l4)); }
.kc-re-krumen a { display: inline-flex; align-items: center; min-height: 44px; }
.kc-re-raster .kc-bg-inhalt { gap: var(--kc-l2); container: rechnungsinhalt / inline-size; }
/* Der Pfeil des Krümelpfads zeigt nach rechts (das Zeichen im Sprite zeigt nach links). */
.kc-bg-krumen.kc-re-krumen .ic { transform: rotate(180deg); }
/* Kopfknöpfe: am Telefon untereinander und gleich breit, ab 600 px nebeneinander. */
.kc-re-kopf .kc-seitenkopf-akt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l1); width: 100%; }
.kc-re-kopf .kc-seitenkopf-akt .kc-re-menue, .kc-re-kopf .kc-seitenkopf-akt .kc-knopf-huelle { display: grid; }
.kc-re-kopf .kc-seitenkopf-akt .btn { width: 100%; justify-content: center; }
.kc-rechnungen { display: grid; gap: var(--kc-l3); min-width: 0; }

/* Vier Kennzahlen wie in der Vorlage: eine Spalte am Telefon, zwei ab 600 px, vier ab 1200 px. */
.kc-kto-kennzahlen.kc-re-kennzahlen { grid-template-columns: minmax(0, 1fr); gap: var(--kc-l1); }
.kc-re-kennzahl { padding: 10px; gap: 8px; }
.kc-re-kennzahl .kc-kx-kz-text { gap: 0; line-height: 1.3; }
.kc-re-kennzahl .kc-kx-kz-text span { white-space: nowrap; }
.kc-re-kennzahl .kc-sym-m { width: 36px; height: 36px; border-radius: 10px; }
.kc-re-kennzahl .kc-re-summe { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-re-kennzahl[data-kennzahl="bezahlt"] .kc-sym { background: var(--good-bg); color: var(--good); }
.kc-re-kennzahl[data-kennzahl="offen"] .kc-sym { background: var(--warn-bg); color: var(--warn); }
.kc-re-kennzahl[data-kennzahl="verzug"] .kc-sym { background: var(--bad-bg); color: var(--bad); }

/* Reiter: der gewählte ist in der Vorlage gefüllt. */
.kc-re-reiter .kc-bg-reiter-knopf { font-weight: 700; }
.kc-re-reiter .kc-bg-reiter-knopf[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }

/* Filterleiste */
.kc-re-filter { display: flex; flex-wrap: wrap; gap: var(--kc-l1); align-items: flex-end; padding: 12px; container-type: inline-size; container-name: rechnungsfilter; }
.kc-re-filter > .kc-re-feld { flex: 1 1 100%; }
.kc-re-filter > .kc-re-suche { flex: 1 1 100%; }
.kc-re-filter > .kc-re-mehrknopf { flex: 1 1 100%; }
.kc-re-feld { display: grid; gap: 6px; min-width: 0; }
.kc-re-etikett { font-size: .875rem; color: var(--ink-faint); }
.kc-re-feld .cidd { position: relative; width: 100%; }
.kc-re-feld .cidd > .ic { display: none; position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; z-index: 1; }
.kc-re-feld .cidd .cidd-btn { width: 100%; height: 44px; }
/* Ab 36 rem stehen Auswahlfelder, Suche und „Weitere Filter“ in EINER Zeile wie in der Vorlage; die Zeichen in den
   Auswahlfeldern kommen erst dazu, wenn die Suche daneben noch Platz hat (ab 58 rem). */
@container rechnungsfilter (min-width: 36rem) {
  .kc-re-filter > .kc-re-feld { flex: 0 0 auto; }
  .kc-re-filter > .kc-re-feld:nth-child(1) { width: 11rem; }
  .kc-re-filter > .kc-re-feld:nth-child(2), .kc-re-filter > .kc-re-feld:nth-child(3) { width: 9.25rem; }
  .kc-re-feld .cidd .cidd-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kc-re-filter > .kc-re-suche { flex: 1 1 5.5rem; }
  .kc-re-filter > .kc-re-mehrknopf { flex: 0 0 auto; padding-inline: 12px; }
  .kc-re-filter > .kc-re-mehr { width: 14rem; }
}
@container rechnungsfilter (min-width: 58rem) {
  .kc-re-feld .cidd > .ic { display: block; }
  .kc-re-feld .cidd .cidd-btn { padding-left: 38px; }
  .kc-re-filter > .kc-re-feld:nth-child(1) { width: 13.25rem; }
  .kc-re-filter > .kc-re-feld:nth-child(2), .kc-re-filter > .kc-re-feld:nth-child(3) { width: 10.5rem; }
}
.kc-re-suche { height: 44px; min-width: 0; }
.kc-re-mehrknopf { justify-content: center; box-shadow: none; }
.kc-re-mehr[hidden] { display: none; }

/* Tabelle */
.kc-re-liste { padding: 12px; gap: var(--kc-l1); }
.kc-re-tabelle .kc-bg-tzelle { hyphens: manual; }
/* Gestapelt darf eine lange Nummer umbrechen; in der Zeilenform steht sie in einer Zeile (Spalte nach der längsten Nummer). */
.kc-re-nr { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-re-nr .ic { flex: none; width: 18px; height: 18px; color: var(--lime); }
.kc-re-stand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
.kc-re-stand .ic { width: 14px; height: 14px; flex: none; }
.kc-re-aktionen { display: flex; align-items: center; gap: var(--kc-l1); }
/* Am Telefon (Zellen untereinander) sind die Knöpfe Tippziele mit 44 px. */
.kc-re-aktionen .btn { box-shadow: none; height: 44px; }
.kc-re-punkte { width: 44px; padding: 0; justify-content: center; }
/* Hochgeladene Datei: der Name bricht an jeder Stelle um, statt aus der Zelle zu laufen. */
.kc-re-tabelle .kc-bg-tname.ist-datei b { overflow-wrap: anywhere; word-break: break-word; hyphens: none; }
.kc-re-tabelle .kc-bg-tname { min-width: 0; }
.kc-re-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.kc-re-sort .ic { width: 12px; height: 12px; color: var(--ink-faint); }
.kc-re-sort.auf .ic { transform: rotate(180deg); color: var(--ink); }
.kc-re-sort.ab .ic { color: var(--ink); }
.kc-re-sort:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }
.kc-re-treffer { margin: 0; font-size: .875rem; color: var(--ink-faint); }
.kc-re-treffer:empty { display: none; }
.kc-re-tabelle .kc-bg-tzeile.ist-gewählt { background: var(--rail-active); box-shadow: inset 2px 0 0 var(--lime); }

/* Seitenfeld der Rechnung (Bildvorlage „mit slideout.png“, Aufbau des Kopfs nach der Schublade des SSR-Cockpits):
   Gerüst ist das Hausbauteil .sidep/.sidep-h/.sidep-b aus modul/cf-chrome.css; hier nur Inhalt und Maße. Ohne
   Schleier – die Seite rückt neben dem Feld zusammen (.mit-seitenfeld), die Liste bleibt sichtbar und bedienbar. */
.kc-rechnungen, .kc-re-kopf { --kc-re-feld: min(38rem, 100vw); }
/* Ab 1280 px steht das Feld NEBEN der Liste: es nimmt, was neben Navigation (rund 21 rem samt Rändern) und einer
   Liste von 40 rem bleibt – mindestens 22 rem (die Breite des Feldes in „mit slideout.png“), höchstens 38 rem.
   So bleibt die Liste bei jeder Breite ab 1280 px in Zeilenform (Abnahme #71964 P1-1). */
@media (min-width: 1280px) { .kc-rechnungen, .kc-re-kopf { --kc-re-feld: clamp(22rem, calc(100vw - 61rem), 38rem); } }
.sidep.kc-re-seitenfeld { height: 100dvh; max-height: 100dvh; width: var(--kc-re-feld); }
.kc-re-sf-kopf { align-items: flex-start; }
.kc-re-sf-titel { display: grid; gap: 2px; justify-items: start; flex: 1 1 auto; min-width: 0; }
.kc-re-sf-nr { font-size: .875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kc-re-sf-titel h2 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.kc-re-sf-titel p { margin: 0; font-size: .9375rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.kc-re-sf-betrag { margin-top: var(--kc-l1); font-size: 1.875rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kc-re-sf-betrag.ist-offen { font-size: 1.125rem; color: var(--ink-soft); letter-spacing: 0; }
.kc-re-sf-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Während des Bezahlens steht der Schritt im Vordergrund: der Kopf wird schmal (Betrag klein, keine Marken), damit
   TAN-Feld und Freigabe-Knopf auch bei 320×800 und 1280×720 im Bild stehen (Abnahme #72003 P3-F). */
.kc-re-seitenfeld.ist-zahlung .kc-re-sf-marken { display: none; }
.kc-re-seitenfeld.ist-zahlung .kc-re-sf-betrag { margin-top: 2px; font-size: 1.125rem; }
.kc-re-sf-b { display: grid; gap: var(--kc-l2); align-content: start; padding-top: var(--kc-l2); container: rechnungsfeld / inline-size; }
/* Drei Eckwerte in einer Reihe – eine Fläche mit Trennlinien (Kennzahlen-Leiste des Hauses). */
.kc-re-sf-eck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r, 12px); }
.kc-re-sf-eckwert { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-left: 1px solid var(--line); min-width: 0; }
.kc-re-sf-eckwert:first-child { border-left: 0; }
.kc-re-sf-eckwert span { font-size: .875rem; color: var(--ink-soft); }
.kc-re-sf-eckwert b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@container rechnungsfeld (max-width: 27rem) {
  .kc-re-sf-eck { grid-template-columns: minmax(0, 1fr); }
  .kc-re-sf-eckwert { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--kc-l2); border-left: 0; border-top: 1px solid var(--line); }
  .kc-re-sf-eckwert:first-child { border-top: 0; }
  .kc-re-sf-eckwert small { grid-column: 2; }
}
.kc-re-sf-eckwert small { font-size: .875rem; color: var(--ink-soft); }
.kc-re-sf-eckwert[data-ton="schlecht"] b, .kc-re-sf-eckwert[data-ton="schlecht"] small { color: var(--bad); }
.kc-re-sf-eckwert[data-ton="gut"] b { color: var(--good); }
/* Reiter des Seitenfelds */
.kc-re-sf-reiter { display: flex; gap: var(--kc-l3); border-bottom: 1px solid var(--line); }
.kc-re-sf-reiter button { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer; }
.kc-re-sf-reiter button[aria-selected="true"] { color: var(--lime-strong); border-bottom-color: var(--lime); }
.kc-re-sf-reiter button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }
.kc-re-sf-teil { display: grid; gap: var(--kc-l2); align-content: start; min-width: 0; }
.kc-re-sf-teil[hidden] { display: none; }
/* Angaben zweispaltig: Etikett über Wert, zwei Paare je Reihe (nie eine lange Liste über viele Zeilen). */
.kc-re-sf-angaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-l2) var(--kc-l3); margin: 0; }
.kc-re-sf-angaben > div { display: grid; gap: 2px; min-width: 0; padding-bottom: var(--kc-l1); border-bottom: 1px solid var(--line); }
.kc-re-sf-angaben > div.ist-breit { grid-column: 1 / -1; }
.kc-re-sf-angaben dt { font-size: .875rem; color: var(--ink-soft); }
.kc-re-sf-angaben dd { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kc-re-sf-verlauf { display: grid; gap: var(--kc-l1); }
.kc-re-sf-verlauf h3, .kc-re-sf-okopf h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.kc-re-sf-zeit { display: grid; gap: var(--kc-l1); margin: 0; padding: 0 0 0 var(--kc-l2); list-style: none; border-left: 2px solid var(--line); }
.kc-re-sf-zeit li { display: flex; flex-wrap: wrap; gap: 4px var(--kc-l2); font-size: .9375rem; }
.kc-re-sf-zeit li span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kc-re-sf-zeit li[data-zukunft] b { font-weight: 600; color: var(--ink-soft); }
/* Das Dokument */
.kc-re-sf-original { display: grid; gap: var(--kc-l1); min-width: 0; }
.kc-re-sf-okopf { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-l2); }
.kc-re-sf-okopf .btn { box-shadow: none; }
.kc-re-sf-blatt { display: grid; gap: var(--kc-l2); padding: var(--kc-l1); border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface-2); }
.kc-re-sf-blatt:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-re-sf-seite { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--surface); }
/* Das Rechnungsblatt als verkleinertes DIN-A4-Blatt: der Rahmen ist 794 px breit und wird als Ganzes skaliert
   (Breite und Höhe setzt portal-rechnungen.js), der Halter trägt die verkleinerte Höhe. */
.kc-re-sf-a4 { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.kc-re-sf-rahmen { display: block; border: 0; transform-origin: 0 0; background: var(--surface); }
/* Werkzeuge der Rechnung: gleich große Knöpfe – drei nebeneinander, am Telefon untereinander. */
.kc-re-sf-werkzeug { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l1); }
.kc-re-sf-werkzeug .btn { width: 100%; justify-content: center; box-shadow: none; }
/* Drei Knöpfe nebeneinander erst, wo jeder sein Wort ganz fasst („Groß ansehen“ wurde bei 29 rem gekürzt, Abnahme #71982 P2-3). */
@container (min-width: 26rem) { .kc-re-sf-werkzeug { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 34rem) { .kc-re-sf-werkzeug { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-re-sf-werkzeug[data-anzahl="2"], .kc-re-sf-werkzeug[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-re-sf-teil { container-type: inline-size; }
/* Bezahlen im Seitenfeld: Schrittleiste der Zahlseite des Hauses (.kc-z-stepper), hier schmal. */
.kc-re-sf-zahlen { width: 100%; justify-content: center; }
.kc-re-zahl { display: grid; gap: var(--kc-l2); align-content: start; min-width: 0; }
.kc-re-zahl h3 { margin: 0; font-size: 1.125rem; font-weight: 800; }
.kc-re-zahl > p { margin: 0; color: var(--ink-soft); }
.kc-z-stepper.kc-re-z-stepper { gap: var(--kc-l1); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-re-z-stepper .kc-z-stufe { gap: var(--kc-l1); }
.kc-re-z-stepper .kc-z-stufe + .kc-z-stufe::before { display: none; }
/* Im Feld steht die Zahl ÜBER dem Wort: so passt „Bestätigung“ ganz in seine Spalte und bricht nie mitten im Wort
   (Abnahme #71982 P2-2). Die Unterzeile steht erst, wo die Spalte sie fasst. */
.kc-re-z-stepper .kc-z-stufe { flex-direction: column; align-items: flex-start; }
.kc-re-z-stepper .kc-z-stufe-txt b { font-size: .8125rem; white-space: nowrap; }
.kc-re-z-stepper .kc-z-stufe-txt span { display: none; font-size: .8125rem; white-space: nowrap; }
@container rechnungsfeld (min-width: 30rem) { .kc-re-z-stepper .kc-z-stufe-txt b { font-size: .95rem; } .kc-re-z-stepper .kc-z-stufe-txt span { display: block; } }
.kc-re-zahl-wahl { display: grid; gap: var(--kc-l1); margin: 0; padding: 0; border: 0; min-width: 0; }
.kc-re-zahl-wahl legend { padding: 0; margin-bottom: 4px; font-size: .875rem; color: var(--ink-soft); }
.kc-re-zahl-option { display: flex; align-items: flex-start; gap: var(--kc-l1); min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r, 12px); cursor: pointer; }
.kc-re-zahl-option:has(input:checked) { border-color: var(--lime); background: var(--rail-active); }
.kc-re-zahl-option input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); }
.kc-re-zahl-option span { display: grid; gap: 2px; min-width: 0; }
.kc-re-zahl-option b { font-weight: 700; overflow-wrap: anywhere; }
.kc-re-zahl-option small { font-size: .875rem; color: var(--ink-soft); }
.kc-re-zahl-tan { height: 48px; font-size: 1.25rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.kc-re-zahl-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-l1); }
.kc-re-zahl-knoepfe .btn { width: 100%; justify-content: center; }
.kc-re-zahl-ergebnis { display: grid; justify-items: center; gap: var(--kc-l1); padding: var(--kc-l3) var(--kc-l2); border: 1px solid var(--line); border-radius: var(--r, 12px); text-align: center; }
.kc-re-zahl-ergebnis h3 { margin: 0; }
.kc-re-zahl-ergebnis p { margin: 0; font-size: 1.125rem; font-weight: 700; }
.kc-re-zahl-ergebnis .kc-sym { background: var(--good-bg); color: var(--good); }
.kc-re-zahl-ergebnis.ist-schlecht .kc-sym { background: var(--bad-bg); color: var(--bad); }
/* Druck einer hochgeladenen Rechnung: nur ihre Seiten. */
.kc-re-druckblatt { display: none; }
@media print {
  body.kc-re-druckt > *:not(.kc-re-druckblatt) { display: none !important; }
  body.kc-re-druckt .kc-re-druckblatt { display: block; }
  body.kc-re-druckt .kc-re-druckblatt img { display: block; width: 100%; height: auto; page-break-after: always; break-after: page; }
}
.kc-re-sf-leer { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.kc-re-musteroffen { margin-top: 0; }
.kc-re-tabelle .kc-re-dateiname { display: block; overflow-wrap: anywhere; }
.kc-re-tabelle .kc-bg-tname > * { min-width: 0; }
@media (max-width: 599px) { .sidep.kc-re-seitenfeld { border-left: 0; } }
/* Neben dem offenen Seitenfeld rückt die Seite zusammen: die rechte Spalte weicht, die Liste bleibt bedienbar. */
@media (min-width: 1280px) {
  .kc-rechnungen.mit-seitenfeld, .kc-re-kopf.mit-seitenfeld { margin-right: calc(var(--kc-re-feld) - var(--kc-l3)); }
  .kc-rechnungen.mit-seitenfeld .kc-re-rail { display: none; }
  .kc-rechnungen.mit-seitenfeld .kc-bg-raster.kc-re-raster { grid-template-columns: minmax(0, 1fr); }
  .kc-re-kopf.mit-seitenfeld { grid-template-columns: minmax(0, 1fr) auto; }
  .kc-re-kopf.mit-seitenfeld .kc-seitenkopf-akt .btn { width: auto; }
}
/* Neben dem offenen Seitenfeld ist die Liste schmal: statt zu stapeln zeigt sie eine knappe Zeilenform – Nummer,
   Anbieter, Betrag, Status und „Ansehen“. Datum und Fälligkeit stehen dann im Seitenfeld (wie in „mit slideout.png“
   bleibt die Liste eine Liste). */
@container rechnungsliste (min-width: 34.5rem) and (max-width: 52.49rem) {
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile, .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile.kopf { display: grid; grid-template-columns: 20px minmax(10.25rem, 1fr) minmax(5.5rem, 1.4fr) 7.25rem 5.5rem 2.25rem; column-gap: var(--kc-l1); row-gap: 0; align-items: center; padding: var(--kc-l1) 0; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile > :nth-child(4), .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile > :nth-child(5) { display: none; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile.kopf { font-size: .875rem; font-weight: 700; color: var(--ink-soft); line-height: 1.2; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzelle { font-size: .875rem; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzelle::before { display: none; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-re-rechts { justify-content: flex-end; text-align: right; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-re-nr { white-space: nowrap; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-re-nr .ic, .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-re-stand .ic { display: none; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tname { gap: 0; line-height: 1.3; }
  .kc-rechnungen.mit-seitenfeld .kc-re-aktionen { justify-content: flex-end; width: 100%; }
  .kc-rechnungen.mit-seitenfeld .kc-re-aktionen .kc-re-menue { display: none; }
  .kc-rechnungen.mit-seitenfeld .kc-re-aktionen .btn { height: 36px; }
  .kc-rechnungen.mit-seitenfeld .kc-re-aktionen [data-aktion="rechnung.ansehen"] { width: 36px; padding: 0; justify-content: center; }
  .kc-rechnungen.mit-seitenfeld .kc-re-aktionen [data-aktion="rechnung.ansehen"] span { display: none; }
}
@media print { .sidep.kc-re-seitenfeld { display: none; } }

/* Menü (Rechnung erstellen, Zeilenmenü) */
.kc-re-menue { position: relative; display: inline-flex; }
.kc-re-menue-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; min-width: max-content; max-width: calc(100vw - 2 * var(--kc-l1)); padding: 6px; border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); box-shadow: var(--shadow-lg, var(--shadow)); }
.kc-re-menue-liste[hidden] { display: none; }
.kc-re-menue-punkt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 var(--kc-l2); white-space: nowrap; border: 0; border-radius: var(--r-sm, 10px); background: none; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.kc-re-menue-punkt .ic { flex: none; width: 17px; height: 17px; color: var(--ink-soft); }
.kc-re-menue-punkt small { margin-left: auto; padding-left: var(--kc-l1); font-size: .875rem; color: var(--ink-faint); white-space: nowrap; }
.kc-re-menue-punkt:hover, .kc-re-menue-punkt:focus-visible { background: var(--surface-3); outline: 0; }
.kc-re-menue-punkt[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.kc-re-menue-punkt[aria-disabled="true"]:hover { background: none; }

/* Rechte Spalte */
.kc-re-railkarte .kc-bg-railkopf { align-items: flex-start; flex-wrap: wrap; gap: var(--kc-l1); }
.kc-re-railkarte .kc-bg-railkopf > div { flex: 1 1 8rem; min-width: 0; }
.kc-re-railkarte[data-karte="hochladen"] { border-color: var(--bad-bg); background: var(--rail-active); }
.kc-re-ablage { display: grid; justify-items: center; gap: 4px; width: 100%; padding: var(--kc-l3) var(--kc-l2); border: 1px dashed var(--line-strong); border-radius: var(--r, 12px); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.kc-re-ablage .ic { width: 28px; height: 28px; color: var(--ink-soft); margin-bottom: 4px; }
.kc-re-ablage span { font-size: .875rem; color: var(--ink-faint); }
.kc-re-ablage:hover, .kc-re-ablage.zieht { border-color: var(--lime); }
.kc-re-ablage:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.kc-re-arten { display: block; text-align: center; font-size: .875rem; color: var(--lime-strong); }
.kc-re-neu { margin-left: auto; }
.kc-re-railkarte .kc-bg-haken li[data-stand="folgt"] { color: var(--ink-faint); }
.kc-re-railkarte .kc-bg-haken li[data-stand="folgt"] .ic { color: var(--ink-faint); }
.kc-re-voll { width: 100%; justify-content: center; box-shadow: none; }
.kc-re-aktliste { display: grid; }
.kc-re-akt { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.kc-re-akt:last-child { border-bottom: 0; }
.kc-re-akt > .ic:first-child { flex: none; width: 17px; height: 17px; color: var(--ink-soft); }
.kc-re-akt > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.kc-re-akt.ist-gesperrt { cursor: default; color: var(--ink-faint); padding-block: 6px; }
.kc-re-akt.ist-gesperrt > span { display: grid; white-space: normal; }
.kc-re-akt > .ic:last-child { flex: none; width: 16px; height: 16px; color: var(--ink-faint); transform: rotate(180deg); }
.kc-re-akt small { font-size: .875rem; color: var(--ink-faint); }
button.kc-re-akt:hover span, button.kc-re-akt:focus-visible span { text-decoration: underline; }
.kc-re-akt:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }
.kc-re-dbl9 { display: grid; gap: var(--kc-l3); min-width: 0; container: rechnungdbl9 / inline-size; }
/* Die Muster-Zeile richtet sich hier nach dem Platz, den sie wirklich hat, nicht nach dem Fenster: neben der rechten
   Spalte ist der Inhalt schmaler als das Fenster, und die einreihige Form druckte die Bezeichnung in den Betrag. */
.kc-re-dbl9 .kc-rechnung-zeile { grid-template-columns: minmax(0, 1fr); }
.kc-re-dbl9 .kc-rechnung-zeile > .kc-zeile-k, .kc-re-dbl9 .kc-rechnung-zeile > .kc-rechnung-betrag { grid-column: 1 / -1; overflow-wrap: anywhere; }
.kc-re-dbl9 .kc-rechnung-betrag { text-align: left; white-space: normal; }
@container rechnungdbl9 (min-width: 30rem) {
  .kc-re-dbl9 .kc-rechnung-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container rechnungdbl9 (min-width: 56rem) {
  .kc-re-dbl9 .kc-rechnung-zeile { grid-template-columns: minmax(0, 1fr) auto 11rem 11rem; }
  .kc-re-dbl9 .kc-rechnung-zeile > .kc-zeile-k, .kc-re-dbl9 .kc-rechnung-zeile > .kc-rechnung-betrag { grid-column: auto; }
  .kc-re-dbl9 .kc-rechnung-betrag { text-align: right; white-space: nowrap; }
}

@media (min-width: 600px) {
  .kc-re-kopf .kc-seitenkopf-akt { display: flex; width: auto; }
  .kc-re-kopf .kc-seitenkopf-akt .btn { width: auto; }
  .kc-re-krumen a { min-height: 0; }
}
/* Unter 1366 px steht die rechte Spalte als Band unter dem Inhalt: so viele Karten nebeneinander, wie hineinpassen
   (eine feste Dreiteilung ab 900 px Fenster ragte neben der Navigation aus dem Fenster, Abnahme #71904 N2). */
.kc-re-rail { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.kc-re-railkarte { min-width: 0; }
/* Die Tabelle richtet sich nach IHRER Breite, nicht nach dem Fenster: neben der rechten Spalte ist sie schmaler
   als das Fenster vermuten lässt. Unter 52,5 rem stehen die Zellen untereinander (mit Etikett), ab 52,5 rem als
   Zeile mit „Ansehen“ als Zeichen, ab 70 rem mit Wort. */
.kc-re-liste { container-type: inline-size; container-name: rechnungsliste; }
/* Grundform (schmale Liste): Zellen untereinander mit Etikett. Sie überstimmt die Fensterregel des Hausbauteils
   (ab 900 px drei Spalten und OHNE Etikett), die für acht Spalten nicht taugt: solange der Kopf fehlt, trägt jede
   Zelle ihr Etikett – sonst stehen zwei Daten ohne Bedeutung nebeneinander (Abnahme #71904 N1). */
.kc-re-tabelle .kc-bg-tzeile { display: grid; grid-template-columns: minmax(0, 1fr); }
.kc-re-tabelle .kc-bg-tzeile.kopf { display: none; }
.kc-re-tabelle .kc-bg-tzelle::before { display: block; flex-basis: 7.5rem; }
.kc-re-tabelle .kc-bg-tzelle[data-titel=""]::before { display: none; }
/* Mittlere Breite (Tablet, schmaler Schreibtisch ohne Platz für acht Spalten): die Zellen stehen zu zweit nebeneinander. */
@container rechnungsliste (min-width: 40rem) {
  .kc-re-tabelle .kc-bg-tzeile { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--kc-l3); }
}
@container rechnungsliste (min-width: 52.5rem) {
  /* Dichte Zeilenform neben der rechten Spalte: Spaltenbreiten nach dem breitesten Inhalt bei 14 px Schrift
     (Nummer 12 Zeichen, Datum 10 Zeichen, Betrag bis 99.999,99 €, Marke „Überfällig“), der Kunde bekommt den Rest.
     Die Schwelle liegt eine Rollleistenbreite unter der Liste bei 1366 px Fenster (Abnahme #71904 N4). */
  /* Verteilung (Operator 2026-10-02: „zu viel Platz in der Mitte, bei den anderen zu wenig – es muss perfekt
     aufgeteilt sein“): jede Spalte hat ihre Mindestbreite nach dem breitesten Inhalt und nimmt ihren Anteil am
     freien Platz; auch die Abstände wachsen mit der Liste. Die Rechnungsnummer bekommt Platz für die langen
     Nummern der Anbieter. */
  .kc-re-tabelle .kc-bg-tzeile, .kc-re-tabelle .kc-bg-tzeile.kopf { display: grid; grid-template-columns: 20px minmax(10.25rem, 1fr) minmax(10.5rem, 2fr) minmax(5rem, .8fr) minmax(5rem, .8fr) minmax(7.25rem, .8fr) minmax(5.5rem, .6fr) var(--kc-re-akt-spalte, 4.875rem); column-gap: clamp(6px, calc((100cqi - 52.5rem) * .05 + 6px), 16px); row-gap: 0; align-items: center; padding: var(--kc-l1) 0; }
  .kc-re-tabelle .kc-bg-tname { gap: 0; line-height: 1.3; }
  .kc-re-tabelle .kc-bg-tzelle { font-size: .875rem; }
  .kc-re-tabelle .kc-bg-tzelle::before { display: none; }
  .kc-re-tabelle .kc-re-rechts { justify-content: flex-end; text-align: right; }
  .kc-re-tabelle .kc-bg-tzeile.kopf { font-size: .875rem; font-weight: 700; color: var(--ink-soft); padding-block: 0; line-height: 1.2; }
  .kc-re-sort { white-space: nowrap; min-height: 32px; }
  .kc-re-tabelle .kc-re-nr { white-space: nowrap; }
  .kc-re-tabelle .kc-re-nr .ic { display: none; }
  .kc-re-tabelle .kc-re-stand .ic { display: none; }
  .kc-re-tabelle .kc-re-stand { justify-content: center; }
  .kc-re-tabelle .kc-bg-tname b { overflow-wrap: normal; hyphens: manual; }
  .kc-re-aktionen { justify-content: flex-end; width: 100%; gap: 6px; }
  .kc-re-aktionen .btn { height: 36px; }
  .kc-re-punkte { width: 36px; }
  .kc-re-aktionen [data-aktion="rechnung.ansehen"] { width: 36px; padding: 0; justify-content: center; }
  /* Nur das Zeichen: der Name steht im aria-label des Knopfs. Ein versteckter Rest der Beschriftung gälte als abgeschnittener Text. */
  .kc-re-aktionen [data-aktion="rechnung.ansehen"] span { display: none; }
  .kc-re-menue.rechts .kc-re-menue-liste { left: auto; right: 0; }
  /* Am Tastschirm (Tablet in der dichten Form) bleiben die Tippziele 44 px hoch (Abnahme #71913 C). */
  @media (pointer: coarse) {
    .kc-re-aktionen .btn { height: 44px; }
    .kc-re-punkte, .kc-re-aktionen [data-aktion="rechnung.ansehen"] { width: 44px; }
    .kc-re-sort { min-height: 44px; }
    .kc-re-tabelle { --kc-re-akt-spalte: 5.875rem; }
  }
}
@container rechnungsliste (min-width: 70rem) {
  .kc-re-tabelle .kc-bg-tzeile, .kc-re-tabelle .kc-bg-tzeile.kopf { grid-template-columns: 20px minmax(12.75rem, 1fr) minmax(13rem, 2fr) minmax(5.5rem, .8fr) minmax(5.5rem, .8fr) minmax(7.75rem, .8fr) minmax(7rem, .6fr) var(--kc-re-akt-spalte-weit, 10.5rem); column-gap: clamp(14px, calc((100cqi - 70rem) * .06 + 14px), 28px); }
  .kc-re-tabelle .kc-bg-tzelle { font-size: .9375rem; }
  .kc-re-tabelle .kc-re-nr .ic { display: block; }
  .kc-re-tabelle .kc-re-stand .ic { display: block; }
  .kc-re-aktionen { gap: var(--kc-l1); }
  .kc-re-aktionen .btn { height: 38px; }
  .kc-re-punkte { width: 38px; }
  .kc-re-aktionen [data-aktion="rechnung.ansehen"] { width: auto; padding: 0 14px; }
  .kc-re-aktionen [data-aktion="rechnung.ansehen"] span { display: inline; }
  @media (pointer: coarse) {
    .kc-re-aktionen .btn { height: 44px; }
    .kc-re-punkte { width: 44px; }
    .kc-re-tabelle { --kc-re-akt-spalte-weit: 11rem; }
  }
}
/* Rechte Spalte erst ab 1536 px: darunter bekommt die Tabelle die ganze Breite, damit keine Spalte gedrungen steht
   (Operator 2026-10-02: „nichts darf zu eng und gedrungen sein“); die drei Karten stehen dann als Band unter dem
   Inhalt. Breite der rechten Spalte und Rinne stehen an EINER Stelle und gelten für Raster und Seitenkopf. */
.kc-re-kopf, .kc-rechnungen { --kc-re-rail: 15.25rem; --kc-re-rinne: var(--kc-l2); }
@media (min-width: 1200px) { .kc-bg-raster.kc-re-raster { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1536px) {
  .kc-bg-raster.kc-re-raster { grid-template-columns: minmax(0, 1fr) var(--kc-re-rail); gap: var(--kc-re-rinne); }
  .kc-re-railkarte { padding: 12px; }
}
@media (min-width: 1200px) {
  /* Kopf wie in der Vorlage: Titel und Knöpfe in einer Reihe, der Untertitel darunter über die volle Breite
     (einzeilig) statt neben den Knöpfen umbrochen. */
  .kc-re-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--kc-l3); }
  .kc-re-kopf .kc-seitenkopf-text { display: contents; }
  .kc-re-kopf h1 { grid-column: 1; grid-row: 1; }
  .kc-re-kopf .kc-seitenkopf-akt { grid-column: 2; grid-row: 1; }
  .kc-re-kopf p { grid-column: 1 / -1; grid-row: 2; }

}
@media (min-width: 1536px) {
  /* Der Kopfknopf steht im selben Raster wie die Seite: genau über der rechten Spalte, in ihrer Breite
     (Operator 2026-10-02, „grid fehler.png“: die Knöpfe standen quer über der Rinne). */
  .kc-re-kopf { grid-template-columns: minmax(0, 1fr) var(--kc-re-rail); column-gap: var(--kc-re-rinne); }
  .kc-re-kopf .kc-seitenkopf-akt { display: grid; }
  .kc-re-kopf .kc-seitenkopf-akt .kc-knopf-huelle { display: grid; }
  .kc-re-kopf .kc-seitenkopf-akt .btn { width: 100%; justify-content: center; }
}
/* Knappe Zeilenform neben dem Seitenfeld: die Aktionsspalte trägt nur das Auge, ihr Kopf bleibt leer; die Unterzeile
   des Anbieters steht in einer Zeile. */
@container rechnungsliste (min-width: 34.5rem) and (max-width: 52.49rem) {
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tzeile.kopf > :last-child { font-size: 0; }
  .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tname small, .kc-rechnungen.mit-seitenfeld .kc-re-tabelle .kc-bg-tname b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Zeilenform: die Unterzeile (Vertrag, Dateiname) steht in EINER Zeile – so bleiben alle Zeilen gleich hoch; der
   volle Text steht im Titel und im Seitenfeld. */
@container rechnungsliste (min-width: 52.5rem) {
  .kc-re-tabelle .kc-bg-tname small, .kc-re-tabelle .kc-bg-tname b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Kennzahlen richten sich nach dem Platz des Inhalts, nicht nach dem Fenster: neben dem offenen Seitenfeld ist der
   Inhalt schmaler als das Fenster (Abnahme #71964 P1-1: dort überdruckten sich die Kacheln). */
@container rechnungsinhalt (min-width: 30rem) {
  .kc-kto-kennzahlen.kc-re-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container rechnungsinhalt (min-width: 56rem) {
  /* Vier Kennzahlen in einer Reihe wie in der Vorlage – als EINE Fläche mit Trennlinien (Kennzahlen-Leiste des
     Hauses), nicht als vier Karten: die Raster-Regel erlaubt höchstens drei Flächen je Zeile
     (test/kundencenter-raster-sicht.mjs). Die erste Zelle trägt das längste Etikett („Rechnungen gesamt“). */
  .kc-kto-kennzahlen.kc-re-kennzahlen { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); }
  .kc-kto-kennzahlen.kc-re-kennzahlen .kc-re-kennzahl { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; min-height: 0; }
  .kc-kto-kennzahlen.kc-re-kennzahlen .kc-re-kennzahl:first-child { border-left: 0; }
}
.kc-re-tabelle .kc-bg-zahl.ist-vorschlag { font-weight: 600; font-style: italic; }