/* AEX Klientenportal — Bausteine und Seiten
   Alle Werte kommen aus tokens.css (Fundament): Schriftgrade, Farben, Radien, Schatten. Abstände nur aus
   dem Raster 4 · 8 · 12 · 16 · 24 · 32 · 48. Rahmen (Seitenleiste, Kopf, Handy-Leiste) und Feinschliff in shell.css.
   Struktur: Grundgerüst · Bausteine (Karten, Pillen, Knöpfe, Umschalter) · Seiten (Start, Auswertungen, OP,
   Saldenliste, Rückmeldungen, Checkliste, Ablage, Leerzustände, Anmeldung, Rechnungen) · Mobil · Druck. */

/* ---------- Grundgerüst ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* „hidden“ heißt unsichtbar — auch wenn eine Regel dem Element eine Anzeigeart gibt (.kp-btn,
   .kp-flt__chip …). Sonst stand z. B. der Hochladen-Knopf da, den das Skript ausgeblendet hatte. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-app); color-scheme: light; }
/* Beträge in der Hausschrift mit gleich breiten Ziffern: Spalten bleiben vergleichbar, ohne Schreibmaschinenschrift */
body {
  background: var(--bg-app);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-text);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--action-hover); }
/* Hervorhebung im Text mit der stärksten Stärke der Skala (600) — die Voreinstellung der Browser wäre 700 */
b, strong { font-weight: 600; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
.kp-tnum { font-variant-numeric: tabular-nums lining-nums; }
/* Ein Fokusring für alles, was man mit der Tastatur erreicht */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Bausteine ---------- */
.kp-h1 { font: 600 var(--text-xl)/var(--lh-tight) var(--font-sans); letter-spacing: -0.01em; color: var(--text-strong); }
.kp-sub { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); margin-top: 4px; }
.kp-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kp-pagehead .kp-stand { margin-top: 8px; }

.kp-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.kp-card__head { padding: 16px var(--card-pad); border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-md) var(--radius-md) 0 0; }
/* Kopf mit Titel und Begleitern in einer Zeile (Zähler, „Alle“, Status) */
.kp-card__head--leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kp-card__title { font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-card__sub { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); margin-top: 4px; }

/* Stand-Stempel (_Freigabe): wer die Zahlen freigegeben hat und welcher Stand — auf jeder Zahlen-Seite gleich.
   In der Kachel und am Handy ohne „von Ihrer Kanzlei“, damit er in einer Zeile bleibt. */
.kp-stand { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--accent-soft); border-radius: var(--radius-pill); padding: 4px 12px; font: 600 var(--text-xs) var(--font-sans); color: var(--action-text); }
.kp-stand svg { flex: none; }
.kp-tile .kp-stand__kanzlei { display: none; }
@media (max-width: 600px) { .kp-stand__kanzlei { display: none; } }

/* ---------- Knöpfe: EIN System für das ganze Portal ----------
   .kp-btn primär (gefüllt, höchstens einer je Ansicht) · --ghost zweitrangig (umrandet) · --still nur Text ·
   --gefahr löscht oder nimmt Zugang · --gefahr-leise (mit --ghost) ist ihr Auslöser vor der Rückfrage.
   Zwei Größen (Standard, --sm), --voll über die ganze Breite, --mehr nur „⋯“. Beschriftung: Verb + Objekt. */
.kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 0 16px;
  background: var(--action); border: 1px solid transparent; border-radius: var(--radius-sm); font: 500 var(--text-sm) var(--font-sans);
  color: var(--text-on-action); text-align: center; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.kp-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-btn:hover { background: var(--action-hover); color: var(--text-on-action); }
.kp-btn:active { background: var(--action-press); }
.kp-btn:disabled, .kp-btn[aria-disabled="true"] { cursor: default; opacity: .5; }
.kp-btn--ghost { background: var(--bg-surface); border-color: var(--border-default); color: var(--action-text); }
.kp-btn--ghost:hover { background: var(--bg-hover); border-color: var(--border-control); color: var(--action-text); }
.kp-btn--ghost:active { background: var(--bg-muted); }
.kp-btn--still { background: transparent; color: var(--action-text); padding: 0 8px; }
.kp-btn--still:hover { background: var(--bg-muted); color: var(--action-text); }
.kp-btn--gefahr { background: var(--danger); }
.kp-btn--gefahr:hover { background: var(--danger-hover); }
.kp-btn--ghost.kp-btn--gefahr-leise { color: var(--danger-text); }
.kp-btn--ghost.kp-btn--gefahr-leise:hover { color: var(--danger-text); border-color: currentColor; background: var(--status-fehler-bg); }
.kp-btn--sm { min-height: var(--control-h-sm); padding: 0 12px; }
.kp-btn--voll { width: 100%; }
/* „⋯ Weitere Aktionen“ neben Stichtag und Jahr (Löschen) */
.kp-btn.kp-btn--mehr { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 8px; }
.kp-btn--mehr svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Eingabefelder: EIN Aussehen für Text, Zahl, Datum, Auswahl und Mehrzeiler ----------
   :where() hält die Regel ohne Gewicht — Bausteine setzen nur, was abweicht (Breite, kleine Höhe). Rahmen ≥ 3:1,
   Schrift am Handy 16 px (--control-font). Platzhalter nur als Formatbeispiel, das Label steht über dem Feld. */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=color], [type=range], [type=image]), select, textarea) {
  box-sizing: border-box; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background-color: var(--bg-surface); color: var(--text-strong); font: 400 var(--control-font) var(--font-sans); }
:where(textarea) { padding: 8px 12px; line-height: var(--lh-text); resize: vertical; }
/* Auswahl mit eigenem Pfeil (Symbol in der gedämpften Schriftfarbe --text-muted), auf jedem Gerät gleich */
:where(select) { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background: var(--bg-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f646b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
:where(input, textarea)::placeholder { color: var(--text-placeholder); }
:where(input, select, textarea):disabled { background-color: var(--bg-muted); color: var(--text-muted); }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--action); }

/* ---------- Feld: Beschriftung über dem Eingabefeld (nie der Platzhalter als Beschriftung), darunter ein Hinweis ---------- */
.kp-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-feld > span:first-child, .kp-feld > label, .kp-feld__kopf > label { font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kp-feld__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kp-feld--mittel { max-width: 480px; }
.kp-feld__hinweis { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-feld > input, .kp-feld > select, .kp-feld > textarea { width: 100%; }
/* In einem Formular einer Karte so breit wie die Eingabe (Passwörter, Namen), nicht über die ganze Karte */
.kp-form .kp-feld { max-width: 360px; }

/* ---------- Umschalter: EIN Aussehen ----------
   Eine graue Spur, die gewählte Option hebt sich weiß mit Haarlinie ab — so hoch wie ein Knopf. Monat/Quartal/Jahr,
   Forderungen/Verbindlichkeiten, Bereiche WP/StB/LV, Jahre der Rechnungen, Lage und Größe des Logos, Zahlen am Handy. */
.kp-seg, .kp-rg-jahre { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--bg-muted); align-self: flex-start; }
.kp-seg__opt, .kp-rg-jahre a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h-sm); padding: 0 12px;
  border-radius: var(--radius-sm); font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); text-decoration: none; }
.kp-seg__opt:hover, .kp-rg-jahre a:hover { color: var(--text-strong); }
.kp-seg__opt.is-active, .kp-rg-jahre a.is-aktiv { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-subtle); color: var(--action-text); }

/* ---------- Meldungen: EIN Kasten, der Ton sagt, was es ist ----------
   Grundform: Hinweis oder Bestätigung (blaue Kante). --ok erledigt · --warn Warnung (Orange nur hier) · --fehler nicht
   möglich/nicht gespeichert · --kanzlei was die Kanzlei vermerkt. Der Text sagt es immer aus, nie nur die Farbe. */
.kp-meldung { padding: 12px 16px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-md);
  background: var(--bg-surface); font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-strong); }
.kp-meldung--ok { background: var(--status-ok-bg); border-color: var(--status-ok-line); border-left-color: var(--status-ok-fg); color: var(--status-ok-fg); }
.kp-meldung--warn { background: var(--status-warn-bg); border-color: var(--status-warn-line); border-left-color: var(--status-warn-mark); color: var(--status-warn-fg); }
.kp-meldung--fehler { background: var(--status-fehler-bg); border-color: var(--status-fehler-line); border-left-color: var(--danger); color: var(--status-fehler-fg); }
.kp-meldung--kanzlei { background: var(--status-kanzlei-bg); border-color: var(--status-kanzlei-line); border-left-color: var(--status-kanzlei-mark); color: var(--status-kanzlei-fg); }
.kp-meldung a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.kp-meldung__liste { margin: 4px 0 0; padding-left: 16px; }
/* Meldung innerhalb einer Karte: mit dem Innenabstand der Karte */
.kp-meldung--karte { margin: 16px var(--card-pad) 0; }

/* Beschriftung vor einer Auswahl (Stichtag der Ablage) */
.kp-select__pre { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }

/* Spaltenköpfe aller Listen: klein, gedämpft, in Großbuchstaben — die Zeilen der Liste setzen nur ihr Raster.
   Doppelte Klasse, wo der Kopf die Zeilenklasse mitträgt: so gewinnt diese Regel gegen die Schrift der Zeile,
   gleich wo die steht. Die Durchsicht (tools/PortalDurchsicht) erkennt einen Listenkopf an der Großschreibung. */
.kp-oprow.kp-oprow--head, .kp-slrow.kp-slrow--head, .kp-rg-zeile.kp-rg-zeile--kopf, .kp-opb.kp-opb--kopf,
.kp-monate__zeile.kp-monate__zeile--kopf, .kp-files__head, .kp-kz-tab__head, .kp-pk__kopf, .kp-dl__kopf,
.kp-vl-zeile.kp-vl-zeile--kopf,
.kp-sb-tab th { font: 500 var(--text-xs) var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Status-Pille: nur für Zustände, nie als Knopf ----------
   Töne nach Bedeutung; die fachlichen Namen (eingegangen, beantwortet …) sind Verweise auf einen Ton. Der Text trägt
   die Aussage, die Farbe unterstreicht sie nur. */
.kp-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); padding: 2px 8px; font: 500 var(--text-xs) var(--font-sans); white-space: nowrap;
  background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.kp-pill--ok, .kp-pill--beantwortet, .kp-pill--erledigt { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.kp-pill--pruefen { background: var(--status-pruefen-bg); color: var(--status-pruefen-fg); }
.kp-pill--warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.kp-pill--fehler { background: var(--status-fehler-bg); color: var(--status-fehler-fg); }
.kp-pill--info, .kp-pill--inbearbeitung { background: var(--status-info-bg); color: var(--status-info-fg); }
.kp-pill--neutral, .kp-pill--offen, .kp-pill--eingegangen { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
/* Rolle oder Herkunft („Hauptnutzer“, „von Ihrer Kanzlei“): zurückhaltend mit Haarlinie */
.kp-pill--tag { background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 1px 7px; color: var(--text-muted); font-weight: 400; }
.kp-pill--count { background: var(--accent-soft); color: var(--action-text); padding: 0 8px; font-weight: 600; }

/* ---------- Startseite ---------- */
.kp-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.kp-tiles--2 { grid-template-columns: 1fr 1fr; }
.kp-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--card-pad); display: flex; flex-direction: column; gap: 12px; min-height: 200px; color: inherit; transition: border-color var(--dur-fast) var(--ease-standard); }
.kp-tile:hover { border-color: var(--border-default); color: inherit; }
.kp-tile__head { display: flex; align-items: center; gap: 12px; font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-tile__icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.kp-tile__desc { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }
/* Kennzahlen der Nachbarkacheln stehen auf einer Höhe; was abschließt (Stand, Knopf), sitzt unten */
.kp-tile__foot { flex: 1; display: flex; flex-direction: column; }
.kp-tile__foot > :last-child { margin-top: auto; }
.kp-tile__foot > .kp-stand, .kp-tile__foot > .kp-btn { align-self: flex-start; }
.kp-tile__big { font: 600 var(--text-display)/var(--lh-tight) var(--font-sans); letter-spacing: -0.02em; color: var(--text-strong); }
.kp-tile__note { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); margin-top: 4px; }
.kp-spark { margin: 12px 0 16px; height: 76px; }
.kp-spark canvas { width: 100%; height: 76px; }

/* Mini-Listen auf der Startseite */
.kp-mini { padding: 0; }
.kp-mini__row { display: flex; align-items: baseline; gap: 12px; padding: 12px var(--card-pad); font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-mini__row + .kp-mini__row { border-top: 1px solid var(--border-subtle); }
.kp-mini__name { font-weight: 500; color: var(--text-strong); }
.kp-mini__meta { color: var(--text-muted); font-size: var(--text-xs); }
.kp-mini__amount { margin-left: auto; font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-mini__foot { padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); font: 500 var(--text-sm) var(--font-sans); }
/* Symbol vor dem Kartentitel: Akzentfarbe, Orange nur für den Hinweis auf lange offene Forderungen */
.kp-mini__symbol { flex: none; color: var(--accent); }
.kp-mini__symbol--warn { color: var(--status-warn-mark); }
.kp-card__head--leiste > .kp-pill:last-child { margin-left: auto; }
/* Neueste Antwort der Kanzlei: die eigene Anmerkung leise, darunter die Antwort im Info-Kasten */
.kp-mini__antwort { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--card-pad) 0; }
.kp-mini__antwort .kp-mini__zitat { color: var(--text-muted); }

/* Kennzahlen-Zeile (Dashboard) */
.kp-stats { display: flex; align-items: stretch; gap: 0; padding: 0; }
/* Lange Beschriftungen („Zugangsanfragen“) trennen nach Silben statt aus der Karte zu ragen */
.kp-stat { flex: 1; padding: 16px var(--card-pad); border-left: 1px solid var(--border-subtle); }
.kp-stat:first-child { border-left: none; }
.kp-stat__label { font: 500 var(--text-sm) var(--font-sans); color: var(--text-muted); hyphens: auto; overflow-wrap: anywhere; }
.kp-stat__value { font: 600 var(--text-xl) var(--font-sans); letter-spacing: -0.01em; color: var(--text-strong); margin-top: 4px; }
.kp-stat--hero .kp-stat__value { font-size: var(--text-display); letter-spacing: -0.02em; color: var(--action-text); }
.kp-stat--hero .kp-trend { white-space: nowrap; }
.kp-trend { display: inline-flex; align-items: center; gap: 4px; background: var(--status-ok-bg); color: var(--status-ok-fg); border-radius: var(--radius-pill); padding: 2px 8px; font: 500 var(--text-xs) var(--font-sans); margin-top: 8px; }

/* ---------- Dashboard Auswertungen ---------- */
.kp-dash { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: stretch; }
.kp-dash__side { display: flex; flex-direction: column; gap: 16px; }
.kp-dash__side .kp-kpi { flex: 1; }
.kp-chartbox { padding: 16px var(--card-pad) 12px; }
.kp-chartbox canvas { width: 100%; height: 360px; }
.kp-kpi { padding: var(--card-pad); }
.kp-kpi__label { font: 500 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-kpi__value { font: 600 var(--text-xl) var(--font-sans); letter-spacing: -0.01em; color: var(--text-strong); margin-top: 8px; }
.kp-kpi__warn { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 var(--text-sm) var(--font-sans); color: var(--status-warn-fg); }
.kp-kpi__note { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); margin-top: 8px; }
.kp-kpi__link { display: inline-block; font: 500 var(--text-sm) var(--font-sans); margin-top: 12px; }

/* ---------- Offene Posten ---------- */
.kp-op-summary { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-op-summary strong { font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-op-summary .warn { color: var(--status-warn-fg); }
.kp-optable { overflow: hidden; }
.kp-oprow { display: grid; grid-template-columns: 100px minmax(160px,1fr) 92px 164px 124px 164px; gap: 12px; align-items: center; padding: 12px var(--card-pad); font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-oprow + .kp-oprow { border-top: 1px solid var(--border-subtle); }
.kp-oprow:hover { background: var(--bg-hover); }
.kp-oprow--head { background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); padding: 8px var(--card-pad); }
.kp-oprow--head:hover { background: var(--bg-subtle); }
.kp-oprow__beleg { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }

/* ---------- Saldenliste ---------- */
/* Aufbau wie eine gedruckte Saldenliste: eine Zeile je Konto mit Eroeffnung, Soll, Haben
   und Saldo, Zwischensummen je Kontoklasse, Schlusssumme unten. Gleiches Zeilenraster wie
   die Offenen Posten, damit beide Listen sich gleich lesen. */
.kp-sl { overflow: hidden; }
.kp-slrow { display: grid; grid-template-columns: 84px minmax(180px,1fr) 128px 128px 128px 150px; gap: 12px; align-items: center; padding: 8px var(--card-pad); font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-slrow + .kp-slrow { border-top: 1px solid var(--border-subtle); }
.kp-slrow:hover { background: var(--bg-hover); }
.kp-slrow--head { background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); padding: 8px var(--card-pad); }
.kp-slrow--head:hover { background: var(--bg-subtle); }
.kp-slrow--group { background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); padding: 12px var(--card-pad); }
.kp-slrow--group:hover { background: var(--bg-subtle); }
.kp-slrow--foot { border-top: 1px solid var(--border-default); background: var(--bg-subtle); font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); padding: 12px var(--card-pad); }
.kp-slrow--foot:hover { background: var(--bg-subtle); }
.kp-sl__nr { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-sl__bez { font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sl__num { text-align: right; font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-sl__num--saldo { font-weight: 600; color: var(--text-strong); }
.kp-sl__num--leer { color: var(--text-muted); }
/* Im Kopf erben die Zahlenspalten die Schrift des Kopfs (sonst 14 px neben 12 px) */
.kp-slrow.kp-slrow--head > .kp-sl__num { font: inherit; color: inherit; }
.kp-sl__fuss { padding: 12px var(--card-pad); font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); border-top: 1px solid var(--border-subtle); }

/* ---------- Vorschläge & Rückmeldungen ---------- */
.kp-form { padding: 16px var(--card-pad); display: flex; flex-direction: column; gap: 12px; }
.kp-form__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kp-form__label { font: 500 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-form__hint { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
/* Pfeil der Auswahl: Symbol in der gedämpften Schriftfarbe (--text-muted) */
.kp-form select { width: 280px; }
.kp-form textarea { width: 100%; min-height: 88px; }
.kp-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kp-form > .kp-text { padding: 0; }
.kp-form__expect { font: 400 var(--text-xs)/var(--lh-text) var(--font-sans); color: var(--text-muted); max-width: 640px; }
/* Bestätigung nach dem Senden (Skript): Meldung im Ton --ok, bis dahin verborgen */
.kp-form__sent { display: none; align-items: center; gap: 8px; }
.kp-form__sent.is-visible { display: flex; }

.kp-vs { padding: 16px var(--card-pad); display: flex; flex-direction: column; gap: 12px; }
.kp-vs + .kp-vs { border-top: 1px solid var(--border-subtle); }
.kp-vs__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-vs__date { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-vs__meta .kp-pill:last-child { margin-left: auto; }
.kp-vs__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-body); }
.kp-vs__text--leer { color: var(--text-muted); }
.kp-vs__answer { background: var(--status-info-bg); border: 1px solid var(--status-info-line); border-radius: var(--radius-md); padding: 8px 12px; }
.kp-vs__ahead { font: 600 var(--text-xs) var(--font-sans); color: var(--status-info-fg); }
.kp-vs__atext { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-body); margin-top: 4px; }

/* ---------- Checkliste (Paket B) ---------- */
.kp-ctx { padding: 12px var(--card-pad); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; container-type: inline-size; }
.kp-ctx__right { order: 1; margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Aktionen der Kanzlei (Freigeben, Erinnerung, Checkliste bearbeiten, ⋯) in eigener Zeile unter Bereich, Stichtag und
   Fortschritt — in einer Zeile mit allem brach der Fortschritt bei 1440 px allein nach rechts unten um */
.kp-ctx__aktionen { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--border-subtle); }
/* Schmale Leiste (mit den kurzen Bereichsnamen unter rund 1130 px): der Fortschritt steht links beim Stichtag statt allein
   rechts in einer eigenen Zeile; „Positionen dieser Checkliste“ steht dann nur im Tooltip */
@container (max-width: 800px) {
  .kp-ctx__right { margin-left: 0; }
  .kp-ctx__countsub { display: none; }
}
.kp-ring { flex: none; }
.kp-ring__bahn { stroke: var(--bg-muted); }
.kp-ring__wert { stroke: var(--accent); }
.kp-ctx__count { font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-ctx__countsub { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-cl { overflow: hidden; }
.kp-cl__group { display: flex; align-items: baseline; gap: 8px; padding: 12px var(--card-pad); }
.kp-cl__group b { font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-cl__group span { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-cl__group--sep { border-top: 1px solid var(--border-subtle); }
/* Gruppe, Prüfgebiet und Position nutzen dieselben Spalten — Pfeil · Nummer · Titel: Positionen haben links keinen
   Pfeil und rücken um seine Spalte ein (18 px + Abstand), so stehen alle Nummern auf einer Linie (Emil 23.09.2026) */
.kp-cl__pos { display: grid; grid-template-columns: 52px minmax(0, 1fr) 116px 28px; gap: 8px; align-items: baseline; padding: 12px var(--card-pad) 12px calc(var(--card-pad) + 26px); width: 100%; text-align: left; cursor: pointer; }
.kp-cl__pos > .kp-cl__chev { align-self: center; }
.kp-cl__pos:hover { background: var(--bg-hover); }
.kp-cl__pos + .kp-cl__pos, .kp-cl__pos + .kp-cl__panelwrap { border-top: 1px solid var(--border-subtle); }
.kp-cl__pos.is-open { background: var(--bg-selected); }
.kp-cl__nr { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-cl__pos.is-open .kp-cl__nr { font-weight: 600; color: var(--action-text); }
.kp-cl__ptitle { font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-cl__pos.is-open .kp-cl__ptitle { font-weight: 600; color: var(--text-strong); }
.kp-cl__psub { display: block; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); margin-top: 4px; }
.kp-cl__pstatus { text-align: right; }
.kp-cl__chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.kp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px 8px; font: 400 var(--text-xs) var(--font-sans); color: var(--text-body); }
.kp-chip svg { color: var(--text-muted); }
.kp-chip button { padding: 0; display: inline-flex; }
.kp-cl__panel { margin: 0 var(--card-pad) 16px 88px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
/* Positions-Beschreibung = Untertitel, kein Kommentar-Kasten (Emil 2026-08-27: „schaut aus wie ein Kommentar, ist aber quasi der Untertitel") */
.kp-cl__desc { white-space: pre-line; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }
/* min-width 0: das Textfeld bringt eine Wunschbreite von gut 20 Zeichen mit — ohne die Grenze schob es die Zeile
   in einer schmalen Karte über den Rand (Durchsicht 390 px, Kanzlei-Antwort auf /Vorschlaege) */
.kp-note__form { display: flex; gap: 8px; margin-top: 8px; min-width: 0; }
.kp-note__form input { flex: 1; min-width: 0; width: 0; min-height: var(--control-h-sm); }
.kp-note__form .kp-btn { min-height: var(--control-h-sm); padding: 0 12px; }
.kp-drop { border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-subtle); }
.kp-answer { display: flex; align-items: center; gap: 8px; }
.kp-answer input { flex: 1; }

/* Checkliste mit permanentem Verlauf-Panel rechts (wie Nextcloud-Seitenleiste) */
.kp-cl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
/* Ohne freigeschalteten Verlauf (W08) bekommt die Liste die ganze Breite — zwei Klassen, damit keine Breiten-Regel sie überstimmt */
.kp-cl-layout.kp-cl-layout--ohne-verlauf { grid-template-columns: minmax(0, 1fr); }
.kp-verlauf { position: sticky; top: 16px; }
.kp-verlauf__body { padding: 16px var(--card-pad); display: flex; flex-direction: column; gap: 12px; }
#kp-cl-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Filterleiste (Chips mit Zählern + Suche + Alle einklappen — wie aexdocs v0.37;
   bleibt beim Scrollen sichtbar wie in aexdocs v0.65) */
.kp-flt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; background: var(--bg-app); padding: 8px 0; margin: -8px 0 8px; }
.kp-flt__chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h-sm); border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: var(--radius-sm); padding: 0 12px; font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.kp-flt__chip:hover { background: var(--bg-hover); border-color: var(--border-control); }
.kp-flt__chip.is-active { background: var(--bg-selected); border-color: var(--action); color: var(--action-text); }
.kp-flt__cnt { font: 600 var(--text-xs) var(--font-sans); background: var(--bg-muted); border-radius: var(--radius-pill); padding: 0 8px; }
.kp-flt__chip.is-active .kp-flt__cnt { background: var(--bg-surface); }
.kp-flt__filter { padding: 4px; border-radius: var(--radius-md); background: var(--bg-muted); }
.kp-flt__filter .kp-flt__chip { border-color: transparent; background: transparent; color: var(--text-secondary); }
.kp-flt__filter .kp-flt__chip:hover { border-color: transparent; background: transparent; color: var(--text-strong); }
.kp-flt__filter .kp-flt__chip.is-active { border-color: transparent; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-subtle); color: var(--action-text); }
.kp-flt__filter .kp-flt__chip.is-active .kp-flt__cnt { background: var(--bg-muted); }
/* Zahl in einem Knopf (Vorbereitete freigeben, Erinnerung senden) */
.kp-btn .kp-flt__cnt { background: var(--bg-muted); color: var(--text-secondary); }
.kp-btn:not(.kp-btn--ghost) .kp-flt__cnt { background: var(--action-zahl); color: var(--text-on-action); }
.kp-flt__suche { display: flex; }
.kp-flt__search { flex: 1; min-width: 200px; min-height: var(--control-h-sm); }

/* Prüfgebiets-Block (einklappbar, mit Fortschrittsbalken) — hell wie die Tabellenköpfe statt dunkelblauem Balken */
.kp-cl__block { display: grid; grid-template-columns: 18px 52px minmax(0,1fr) 120px 56px; gap: 8px; align-items: center; padding: 8px var(--card-pad); width: 100%; text-align: left; background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.kp-cl__block:hover { background: var(--bg-hover); }
.kp-cl__block svg { stroke: var(--text-muted); }
.kp-cl__bnr { font: 600 var(--text-xs) var(--font-sans); color: var(--text-muted); }
/* Prüfgebietsnamen brechen um statt mit „…“ zu enden („Forderungen aus Lieferungen un…“) — lange Wörter mit
   Silbentrennung, sonst liefe „Rechnungsabgrenzungsposten“ am Handy aus der Zeile */
.kp-cl__bname { font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); hyphens: auto; overflow-wrap: anywhere; }
/* Name und Kanzlei-Aktionen teilen sich die Titelspalte: die Knöpfe stehen rechts neben dem Namen und rutschen erst bei
   Platzmangel darunter — Fortschritt und Zähler bleiben in ihren festen Spalten */
.kp-cl__btitel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.kp-cl__btitel > .kp-cl__bname { min-width: 0; margin-right: 4px; }
/* Die Knöpfe fließen einzeln mit — was neben den Namen passt, bleibt in seiner Zeile */
.kp-cl__baktionen { display: contents; }
/* Ist die Zeile schmal (Checkliste neben dem Verlauf, z. B. bei 1280 px), weicht der Fortschrittsbalken wie am Handy —
   die Zahl daneben bleibt — und Name und Knöpfe bekommen seinen Platz. Nur im fünfspaltigen Raster (ab 901 px). */
.kp-cl__block { container-type: inline-size; }
@media (min-width: 901px) {
  @container (max-width: 640px) {
    .kp-cl__block > .kp-cl__bprog { display: none; }
    .kp-cl__block > .kp-cl__btitel { grid-column: 3 / 5; }
  }
}
.kp-cl__bprog { height: 6px; background: var(--bg-muted); border: none; border-radius: var(--radius-pill); overflow: hidden; }
.kp-cl__bprog span { display: block; height: 100%; background: var(--accent); }
.kp-cl__bcount { font: 600 var(--text-xs) var(--font-sans); color: var(--text-secondary); text-align: right; }
.kp-cl__chev { display: inline-flex; color: var(--text-muted); }
.kp-cl__chev svg { transition: transform var(--dur-fast) var(--ease-standard); }
.kp-cl__chev.is-open svg { transform: rotate(90deg); }

/* Verlauf */
.kp-hist { display: flex; gap: 12px; }
.kp-hist__date { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); flex: none; width: 80px; padding-top: 2px; }
.kp-hist__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }
.kp-hist__text .nr { font: 600 var(--text-xs) var(--font-sans); color: var(--action-text); }

/* ---------- Ordner-Ansicht ---------- */
.kp-crumbs { display: flex; align-items: center; gap: 8px; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border-subtle); font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); flex-wrap: wrap; }
.kp-crumbs a { font-weight: 500; }
.kp-crumbs b { font-weight: 600; color: var(--text-strong); }
.kp-crumbs__trenner { flex: none; color: var(--text-placeholder); }
.kp-file__ordner { flex: none; color: var(--accent); }
.kp-files__rechts { text-align: right; }
/* Aktionen 160 px: bis zu fünf Knöpfe (Ansehen, Herunterladen, Umbenennen, Verschieben, Löschen = 5 × 24 + 4 × 10).
   Mit 110 px ragten sie nach links über die Größe („38 KB“ verdeckt, Fund 24.09.2026). */
.kp-files__head { display: grid; grid-template-columns: 24px minmax(240px,1fr) 130px 90px 160px; gap: 12px; align-items: center; padding: 8px var(--card-pad); background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); }
.kp-file { display: grid; grid-template-columns: 24px minmax(240px,1fr) 130px 90px 160px; gap: 12px; align-items: center; padding: 8px var(--card-pad); }
.kp-file + .kp-file { border-top: 1px solid var(--border-subtle); }
.kp-file:hover { background: var(--bg-hover); }
.kp-file__name { font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-file__name--folder { font-weight: 500; color: var(--text-strong); }
.kp-file__meta { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-file__size { text-align: right; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-file__actions { display: flex; gap: 8px; justify-content: flex-end; text-align: right; color: var(--text-muted); }
.kp-file__actions button { color: inherit; display: inline-flex; }
.kp-file__actions button:hover { color: var(--action-text); }
.kp-file__sub { display: none; }

/* ---------- Leerzustände ---------- */
.kp-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kp-empty__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.kp-empty__icon--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.kp-empty__title { font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); margin-top: 16px; }
.kp-empty__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); max-width: 46ch; margin: 8px auto 0; }
.kp-empty .kp-btn, .kp-empty .kp-btn--ghost { margin-top: 16px; }
.kp-empty .kp-row { justify-content: center; margin-top: 16px; }
.kp-empty .kp-row .kp-btn { margin-top: 0; }
/* Leerzeile in einer Liste: weniger Luft, Titel ohne Symbol darüber */
.kp-empty--kompakt { padding: 32px 24px; }
.kp-empty--kompakt .kp-empty__title { margin-top: 0; }
.kp-empty__code { font: 400 var(--text-xs) var(--font-mono); color: var(--text-muted); margin-top: 12px; }

/* ---------- Anmeldung: EINE ruhige Karte in der Mitte, das Logo oben in der Karte ----------
   Anmelden, Passwort vergessen, Zugang/Einladung und Anmeldecode haben dieselbe Einfassung (Brief: Anmeldung und Sicherheit
   mit eigener, ruhiger Einfassung). In der Karte steht alles an einer linken Kante; zentriert ist nur der Rahmen. */
.kp-landing { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-app); }
/* Das Band aus dem AEX-Zeichen: Primär-, Sekundär- und Tertiärblau, schräg wie im runden Logo. Am Handy ein schmaler
   Streifen über der Seite; am PC füllen die Bänder die ganze Seite, unten links die Kanzlei (_AnmeldeMarke) und die Karte
   genau in der Mitte (Emil 16.10.2026: „Log-in-Fenster sollte doch zentriert sein“). Das Logo steht in der Karte auf Weiß —
   auf dem Blau bräuchte es einen weißen Kasten, und den wollte Emil nicht. */
.kp-landing::before { content: ""; flex: none; height: 6px; background: var(--marke-band); }
/* 320 px für den Text selbst (content-box): mit dem Innenabstand blieben sonst 224 px, „Wirtschaftsprüfungsgesellschaft“ ragte hinaus */
.kp-marke { display: none; flex-direction: column; gap: 4px; box-sizing: content-box; max-width: 320px; padding: 0 48px 48px; color: var(--aex-neutral-000); }
.kp-marke__name { margin: 0 0 4px; font: 600 var(--text-md)/var(--lh-tight) var(--font-sans); }
.kp-marke__zeile { margin: 0; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: color-mix(in srgb, var(--aex-neutral-000) 86%, transparent); }
.kp-marke a { color: inherit; text-decoration: none; }
.kp-marke a:hover { color: var(--aex-neutral-000); text-decoration: underline; text-underline-offset: 3px; }
.kp-marke :focus-visible { outline-color: var(--aex-neutral-000); }
@media (min-width: 960px) {
  .kp-landing { display: grid; grid-template-rows: 1fr auto;
    /* Die Kanzleiangaben unten links stehen immer im dunklen Feld: es reicht mindestens 480 px den Verlauf entlang (der Text
       endet bei rund 410 px) — Weiß auf dem Sekundärblau hätte nur 3,9 : 1. Die Grundfarbe trägt, falls der Verlauf fehlt. */
    background-color: var(--aex-blue-900);
    background-image: linear-gradient(68deg, var(--aex-blue-900) 0 max(64%, 480px),
      var(--aex-blue-500) max(64%, 480px) max(84%, 600px), var(--aex-blue-300) max(84%, 600px)); }
  .kp-landing::before { display: none; }
  .kp-landing__body { grid-row: 1; }
  .kp-marke { display: flex; grid-row: 2; }
  /* Impressum und Datenschutz stehen bei der Kanzlei — der helle Fuß wäre auf den Bändern ein Fremdkörper */
  .kp-landing > .kp-footer { display: none; }
  .kp-landing__karte { box-shadow: var(--shadow-pop); }
}
.kp-landing__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; }
/* Logo mittig über dem Formular (Emil 22.10.2026: „können wir das Logo zentrieren?“) */
.kp-landing__logo { align-self: center; height: 40px; width: auto; margin-bottom: 8px; }
.kp-landing__karte { width: 100%; max-width: 400px; padding: var(--space-6); display: flex; flex-direction: column; gap: 16px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.kp-landing__title { font: 600 var(--text-lg)/var(--lh-tight) var(--font-sans); color: var(--text-strong); }
.kp-landing__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }
.kp-landing__btn { width: 100%; margin-top: 16px; }
.kp-landing__hint { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }
/* Weitere Wege (Code neu anfordern, anderer Code, Entwickler-Anmeldung): leise Knöpfe untereinander */
.kp-landing__neben { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kp-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); padding: 16px 24px; display: flex; align-items: center; justify-content: center; gap: 24px; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); flex-wrap: wrap; text-align: center; }

/* ---------- Offenlegung ohne Anmeldung (Impressum, Datenschutz — _Offenlegung) ----------
   Marke und „Zur Anmeldung“ oben, der Text in der Breite einer Lesespalte, der helle Fuß unten. Kein Menü: ein Besucher
   ohne Anmeldung sah bis 21.10.2026 links das ganze Portal (Emil: „da links alles sehen ist komisch“). */
.kp-offen { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-app); }
.kp-offen::before { content: ""; flex: none; height: 6px; background: var(--marke-band); }
.kp-offen__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--page-pad);
  background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.kp-offen__marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-strong); }
.kp-offen__logo { height: 38px; width: auto; display: block; }
.kp-offen__sub { font: 600 var(--text-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.kp-offen__main { flex: 1; width: 100%; max-width: 960px; box-sizing: border-box; margin: 0 auto;
  padding: var(--space-6) var(--page-pad) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.kp-offen__kopf .kp-btn { white-space: nowrap; }
/* Begriff und Angabe untereinander wie im angemeldeten Rahmen (shell.css › Handy) — zweispaltig ragte die Angabe am
   Handy rechts aus der Karte */
@media (max-width: 900px) {
  .kp-offen .kp-deflist { grid-template-columns: 1fr; gap: 4px; }
  .kp-offen .kp-deflist dd { margin-bottom: 12px; overflow-wrap: anywhere; }
  .kp-offen .kp-deflist dd:last-child { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .kp-offen__logo { height: 28px; }
  .kp-offen__sub { display: none; }
  .kp-offen__main { padding: var(--space-4) var(--page-pad) var(--space-6); gap: var(--space-4); }
}

/* ---------- Hilfsklassen ---------- */
.kp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-grow { flex: 1; }
.kp-inline { display: inline-flex; }

/* ================= MOBIL (≤ 760px) ================= */
@media (max-width: 760px) {
  .kp-tiles { grid-template-columns: 1fr; gap: 16px; }
  .kp-tile { min-height: 0; }

  .kp-stats { flex-direction: column; }
  .kp-stat { border-left: none; border-top: 1px solid var(--border-subtle); }
  .kp-stat:first-child { border-top: none; }
  .kp-mini__row { flex-wrap: wrap; row-gap: 4px; }

  .kp-dash { grid-template-columns: 1fr; gap: 16px; }
  .kp-chartbox { padding: 12px var(--card-pad) 8px; }
  .kp-kpi__value { font-size: var(--text-lg); }

  .kp-pagehead { flex-direction: column; }

  /* Vorschläge */
  .kp-form select { width: 100%; }
  .kp-form__foot { flex-direction: column; align-items: stretch; }
  .kp-form .kp-btn { justify-content: center; }

  /* Checkliste */
  .kp-cl-layout { grid-template-columns: 1fr; }
  .kp-verlauf { position: static; }
  .kp-flt__search { min-width: 140px; }
  .kp-ctx { padding: 12px; gap: 12px; }
  .kp-ctx__countsub { display: none; }
  .kp-cl__pos > svg:last-child { display: none; }
  .kp-cl__panel { margin: 0 12px 12px 12px; padding: 16px; }
  .kp-answer { flex-direction: column; align-items: stretch; }
  .kp-answer .kp-btn { justify-content: center; }

  /* Ordner: Tabelle → Liste */
  .kp-files__head { display: none; }
  .kp-file { grid-template-columns: 20px 1fr 22px; gap: 8px; padding: 12px 16px; }
  .kp-file__meta, .kp-file__size, .kp-file__actions { display: none; }
  .kp-file__sub { display: block; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); margin-top: 2px; }
  .kp-crumbs { padding: 0; border: none; font-size: var(--text-xs); }

  .kp-landing__body { padding: 24px 16px; }
  .kp-landing__karte { padding: var(--space-5); }
  .kp-footer { padding: 12px 16px; gap: 12px; }
}

/* ================= Feinschliff: Rechtsseiten, Bewegung, Druck =================
   Ergänzt nach Prüfung gegen die Web Interface Guidelines (Vercel Labs). */

/* Definitionslisten (Impressum, Datenschutz) */
.kp-deflist { display: grid; grid-template-columns: 200px 1fr; gap: 8px 24px; padding: 16px var(--card-pad); margin: 0;
              font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); }
.kp-deflist dt { color: var(--text-muted); }
.kp-deflist dd { margin: 0; color: var(--text-strong); }
/* Lesetext (Datenschutz, Hilfe): 16 px und höchstens 72 Zeichen je Zeile */
.kp-text { padding: 16px var(--card-pad); margin: 0; font: 400 var(--text-md)/var(--lh-text) var(--font-sans); color: var(--text-body); max-width: 72ch; }
.kp-text + .kp-text { padding-top: 0; }

/* Überschriften brechen ausgewogen statt mit Einzelwort-Zeile */
.kp-h1, .kp-card__title, .kp-empty__title { text-wrap: balance; }

/* Kein 300-ms-Verzögerer auf Touch-Geräten */
a, button, .kp-btn, .kp-flt__chip { touch-action: manipulation; }

/* Wer Bewegung reduziert haben will, bekommt sie reduziert */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druckansicht ----------
   Klienten drucken die OP-Liste und die Auswertung. Ohne diese Regeln landen die Knöpfe
   mit auf dem Papier und Tabellen brechen mitten in einer Zeile. */
@media print {
  .kp-footer a, .kp-btn, .kp-flt, .kp-seg, .kp-form { display: none !important; }

  html, body { background: var(--bg-surface) !important; }
  .kp-card { border: 0.5pt solid var(--border-default) !important; break-inside: avoid; }
  .kp-oprow, .kp-cl__pos { break-inside: avoid; }
  .kp-oprow--head { break-after: avoid; }
  .kp-footer { border-top: 0.5pt solid var(--border-default); color: var(--text-secondary); font-size: 8pt; justify-content: flex-start; }
  a { text-decoration: none; color: inherit; }
  @page { margin: 14mm 12mm; }
}

/* Aktionszeile: Was man tun kann + der Knopf dazu. Das Warum steht im ToolTip, nicht als Absatz. */
.kp-aktionen { display: flex; flex-direction: column; }
.kp-aktion { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 12px var(--card-pad); font: 500 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-aktion + .kp-aktion { border-top: 1px solid var(--border-subtle); }

/* ---------- Testsystem-Hinweis ----------
   Orange ist im AEX-Corporate-Design ausschliesslich Warnfarbe - genau der richtige Fall. */
.mp-testhinweis { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 12px; padding: 8px 12px; border: 1px solid var(--status-warn-line); border-radius: var(--radius-sm); background: var(--status-warn-bg); color: var(--status-warn-fg); font: 400 var(--text-xs)/var(--lh-text) var(--font-sans); }
.mp-testhinweis svg { flex: none; margin-top: 2px; color: var(--status-warn-mark); }
.mp-testhinweis b { font-weight: 600; }

/* ---------- Anmeldung mit eigenen Zugangsdaten ---------- */
.kp-login { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.kp-login__label { font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); margin-top: 8px; }
/* 16 px auch am PC: dieselben Seiten öffnet das iPhone, und darunter zoomt es beim Antippen hinein */
.kp-login__feld { width: 100%; font-size: var(--text-md); }
.kp-login__feld--code { font: 600 var(--text-lg) var(--font-mono); letter-spacing: 6px; text-align: center; }
/* Fehler und Hinweis der Anmeldung sind Meldungen (kp-meldung); hier nur ihr Platz im schmalen Formular */
.kp-login__fehler { margin-top: 8px; }
/* Fehler beim Löschen: unter den Formularen der Karte „Konto löschen“, eingerückt wie die Zeilen */
.kp-loeschen__fehler { margin: 0 var(--card-pad) 16px; }
/* Aktionszeile mit Stand und Knopf rechts (Zwei-Faktor: „Code per E-Mail“ + „Authenticator-App einrichten“) */
.kp-aktion__rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Authenticator-App einrichten: QR-Code links, Schritte rechts; am Handy untereinander ---------- */
.kp-app { display: flex; gap: 24px; align-items: flex-start; padding: 16px var(--card-pad) 4px; }
/* Der QR-Code braucht immer weißen Grund — auch im Dunkelmodus */
.kp-app__qr { flex: none; width: 184px; height: 184px; background: var(--aex-neutral-000); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px; }
.kp-app__qr svg { display: block; width: 100%; height: 100%; }
.kp-app__schritte { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px;
  font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-body); }
.kp-app__schluessel { display: inline-block; margin-top: 4px; font: 600 var(--text-sm) var(--font-mono); letter-spacing: .04em;
  overflow-wrap: anywhere; color: var(--text-strong); }
.kp-app__form { display: flex; flex-direction: column; gap: 4px; max-width: 320px; padding: 8px var(--card-pad) 16px; }
.kp-app__knopf { margin-top: 12px; align-self: flex-start; }
@media (max-width: 640px) {
  .kp-app { flex-direction: column; align-items: center; }
  .kp-app__schritte { align-self: stretch; }
  .kp-app__form { max-width: none; }
}

/* ---------- Passkeys (Face ID, Touch ID, Windows Hello) ----------
   Knopf und Formular tragen „hidden“, bis passkey.js sie freigibt — die eigenen display-Regeln
   dürfen das nicht überstimmen. */
.kp-login[hidden], .kp-passkey-neu[hidden], .kp-passkey-neu__schritt[hidden] { display: none; }
.kp-login__oder { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-login__oder::before, .kp-login__oder::after { content: ""; flex: 1; border-top: 1px solid var(--border-subtle); }
.kp-passkey { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-passkey__info { font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-passkey-neu { border-top: 1px solid var(--border-subtle); }
.kp-passkey-neu__schritt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px var(--card-pad); font: 500 var(--text-sm) var(--font-sans); color: var(--text-strong); }
/* Knopf so hoch wie das Feld daneben — die Höhen selbst kommen aus den Regeln für Felder und Knöpfe. */
.kp-passkey-neu__eingabe { display: flex; align-items: stretch; gap: 8px; }
.kp-passkey-neu__eingabe .kp-login__feld { width: 200px; }
.kp-passkey-neu .kp-login__fehler { margin: 0 var(--card-pad) 12px; }
/* App-Sperre (sperre.js): bis Face ID bestätigt ist, wird nichts angezeigt */
.kp-gesperrt body { visibility: hidden; }
/* Angebot nach der Anmeldung (Startseite): „Künftig mit Face ID anmelden?“ */
.kp-passkey-angebot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--card-pad); }
.kp-passkey-angebot[hidden], .kp-passkey-angebot__knoepfe[hidden] { display: none; }
.kp-passkey-angebot__zeile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kp-passkey-angebot__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--action-text); }
.kp-passkey-angebot__titel { font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-passkey-angebot__sub { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); margin-top: 2px; }
.kp-passkey-angebot__knoepfe { display: flex; gap: 8px; flex: none; }
@media (max-width: 760px) {
  .kp-passkey-angebot { flex-direction: column; align-items: stretch; }
  .kp-passkey-angebot__knoepfe { flex-direction: column; }
  .kp-passkey-neu__schritt { flex-wrap: wrap; }
  .kp-passkey-neu__eingabe { width: 100%; }
  .kp-passkey-neu__eingabe .kp-login__feld { flex: 1; width: auto; }
}

/* ---------- Rechnungen (Fakturierung, Pilot 15.10.2026) — Design laut Artefakt „Klientenportal – Rechnungen“ ---------- */
.kp-rg { display: flex; flex-direction: column; gap: 24px; max-width: 1320px; }
.kp-rg-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
/* Nummern (Rechnung, nächste Nummer): nicht umbrechen, ohne Tabellenziffern — Inter macht mit „tnum“ auch den Bindestrich breit */
.kp-rg-nummer { white-space: nowrap; }
.kp-rg-h2 { margin: 0; font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-rg-unter { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-rg-klein { margin: 0; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }
.kp-rg-ueber { margin: 0; font: 600 var(--text-xs) var(--font-sans); color: var(--text-muted); }

.kp-rg-kopf { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.kp-rg-kopf--seite { justify-content: space-between; align-items: flex-end; }
.kp-rg-kopf__titel { display: flex; flex-direction: column; gap: 8px; }
/* Ein Zurück für alle Seiten: Pfeil-Symbol, leise Farbe, beim Überfahren kräftig */
.kp-rg-zurueck { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); text-decoration: none; min-height: var(--control-h); }
.kp-rg-zurueck svg, .kp-kl-zurueck svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-rg-zurueck:hover, .kp-kl-zurueck:hover { color: var(--text-strong); }


/* Übersicht */
.kp-rg-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kp-rg-kennzahl { padding: var(--card-pad); display: flex; flex-direction: column; gap: 4px; }
.kp-rg-kennzahl__titel { font: 500 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-rg-kennzahl__wert { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); white-space: nowrap; }
/* Am Handy: die drei Kennzahlen als eine ruhige Liste (Titel links, Wert rechts) statt drei hoher Karten vor der Liste */
@media (max-width: 560px) {
  .kp-rg-kennzahlen { gap: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
  .kp-rg-kennzahlen .kp-rg-kennzahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; }
  .kp-rg-kennzahlen .kp-rg-kennzahl + .kp-rg-kennzahl { border-top: 1px solid var(--border-subtle); }
  .kp-rg-kennzahl__wert { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--text-lg); }
  .kp-rg-kennzahl .kp-rg-klein { font-size: var(--text-xs); }
}
.kp-rg-abschnitt { display: flex; flex-direction: column; gap: 12px; }
.kp-rg-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.kp-rg-vorlage { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-strong); font-family: var(--font-sans); }
.kp-rg-vorlage__titel { font: 600 var(--text-md) var(--font-sans); }
.kp-rg-vorlage__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }

/* Liste: jede Zeile ein eigenes Grid, also nur feste Spalten plus eine 1fr (Spaltenflucht) */
.kp-rg-liste { overflow: hidden; container-type: inline-size; }
.kp-rg-liste__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px var(--card-pad); }
.kp-rg-leer { margin: 0; padding: 4px var(--card-pad) var(--card-pad); color: var(--text-muted); font: 400 var(--text-sm) var(--font-sans); }
.kp-rg-zeile { display: grid; grid-template-columns: 120px 96px minmax(0, 1fr) 130px 130px; gap: 16px; align-items: center; padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); color: var(--text-strong); text-decoration: none; font: 400 var(--text-sm) var(--font-sans); }
a.kp-rg-zeile:hover { background: var(--bg-hover); color: var(--text-strong); }
.kp-rg-zeile--kopf { padding-top: 8px; padding-bottom: 8px; background: var(--bg-subtle); }
.kp-rg-zeile--kopf span:nth-child(4) { text-align: right; }
.kp-rg-zeile__nr { font-weight: 600; }
.kp-rg-zeile__datum { color: var(--text-muted); }
.kp-rg-zeile__kunde { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rg-zeile__kunde .kp-pill { margin-left: 8px; }
.kp-rg-zeile__ort { color: var(--text-muted); }
.kp-rg-zeile__betrag { text-align: right; font-weight: 600; white-space: nowrap; }
.kp-rg-zeile--storniert .kp-rg-zeile__nr { text-decoration: line-through; color: var(--text-muted); }
.kp-rg-zeile--storniert .kp-rg-zeile__betrag, .kp-rg-zeile--storniert .kp-rg-zeile__kunde { color: var(--text-muted); }
@container (max-width: 820px) {
  .kp-rg-zeile { grid-template-columns: minmax(0, 1fr) 120px; gap: 4px 12px; padding: 12px 16px; }
  .kp-rg-zeile--kopf { display: none; }
  .kp-rg-zeile__datum { grid-row: 2; }
  .kp-rg-zeile__kunde { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
  .kp-rg-zeile__status { grid-column: 2; grid-row: 2; text-align: right; }
}

/* Bearbeiten: zwei Spalten, rechts Vorschau und Festschreiben */
.kp-rg-spalten { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kp-rg-haupt { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kp-rg-seite { flex: 1 1 360px; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1219px) { .kp-rg-seite { max-width: none; } }
.kp-rg-schritt { display: flex; align-items: center; gap: 12px; padding: 16px var(--card-pad) 4px; }
.kp-rg-schritt h2 { margin: 0; font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-rg-schritt h2 em, .kp-feld em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.kp-rg-schritt__neben { margin-left: auto; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-rg-nr { flex: none; min-width: 12px; font: 600 var(--text-md) var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.kp-rg-inhalt { padding: 12px var(--card-pad) var(--card-pad); display: flex; flex-direction: column; gap: 16px; }
.kp-rg-inhalt > [data-live]:not(:has(*)) { display: none; }
.kp-rg-faelle legend { font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kp-rg input:not([type=radio]):not([type=checkbox]), .kp-rg select, .kp-rg textarea { width: 100%; }
.kp-rg-empfaenger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-radius: var(--radius-md); background: var(--bg-subtle); border: 1px solid var(--border-subtle); font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }
.kp-rg-empfaenger strong { color: var(--text-strong); }
.kp-rg-uid { margin-left: auto; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.kp-rg-link { align-self: flex-start; font: 500 var(--text-sm) var(--font-sans); color: var(--text-link); }
.kp-rg-daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; align-items: end; }
.kp-rg-faelle { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kp-rg-faelle legend { margin-bottom: 8px; padding: 0; }
.kp-rg-faelle__wahl { display: grid; grid-template-columns: minmax(0, 480px); gap: 8px; }
.kp-rg-fall { display: flex; align-items: center; gap: 12px; min-height: var(--control-h); padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); cursor: pointer; box-sizing: border-box; }
.kp-rg-fall:has(input:checked) { background: var(--bg-selected); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.kp-rg-fall input { width: 16px; height: 16px; margin: 0; accent-color: var(--action); flex: none; }
.kp-rg-fall__titel { font: 500 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-rg-begruendung { margin: 0; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }

.kp-rg-zeilen { container-type: inline-size; padding-bottom: 8px; }
/* Drei Etagen je Zeile (_PositionZeile): Art mit Werkzeugen, die Bezeichnung über die volle Breite, darunter Menge · Einheit · Preis · Rabatt · Betrag */
.kp-rg-pos { display: grid; grid-template-columns: 80px 96px 128px 80px minmax(0, 1fr); gap: 8px 12px; align-items: end; padding: 16px var(--card-pad); border-top: 1px solid var(--border-subtle); }
.kp-rg-pos__kopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.kp-rg-pos__werkzeug { display: flex; gap: 4px; }
.kp-rg-werkzeug { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kp-rg-werkzeug svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-rg-werkzeug:hover { background: var(--accent-soft); color: var(--action-text); }
.kp-rg-werkzeug--weg:hover { background: var(--status-fehler-bg); color: var(--danger-text); }
.kp-rg-werkzeug:disabled { opacity: .3; cursor: default; background: transparent; }
@media (pointer: coarse) { .kp-rg-werkzeug { width: 40px; height: 40px; } }
/* Statuszeile oben im Editor: „Gespeichert um …“ und (ohne Skript) der Speichern-Knopf */
.kp-rg-speichern--oben { padding: 0 4px; min-height: var(--control-h-sm); }
.kp-card .kp-rg-speichern--oben { margin: 0 var(--card-pad); padding: 8px 0; border: 0; background: transparent; }
/* Mit editor.js speichert der Editor selbst — der Knopf weicht der Statuszeile */
form.is-live [data-editor-speichern] { display: none; }
[data-editor-status].is-fehler { color: var(--status-fehler-fg); font-weight: 600; }
.kp-rg-speichern__knoepfe { display: inline-flex; align-items: center; gap: 16px; }
.kp-rg-pos label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-rg-pos__text { grid-column: 1 / -1; }
.kp-rg-pos__label { font: 500 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-rg .kp-rg-zahl { text-align: right; font-family: var(--font-sans); }
.kp-rg-pos__betrag { line-height: var(--control-h); text-align: right; font-weight: 600; white-space: nowrap; }
/* Gliederung: Überschrift und Textzeile haben nur Text; die Überschrift trägt einen Strich links, damit die Gruppe erkennbar ist */
.kp-rg-pos--ueberschrift { box-shadow: inset 3px 0 0 var(--accent); }
.kp-rg .kp-rg-pos__ueberschrift { font-weight: 600; }
.kp-rg-bausteine { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--card-pad); border-top: 1px solid var(--border-subtle); }
@container (max-width: 560px) {
  .kp-rg-pos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px; }
  .kp-rg-pos__betrag { grid-column: 1 / -1; text-align: right; line-height: var(--lh-text); }
  .kp-rg-bausteine { padding: 12px 16px; }
}
.kp-rg-speichern { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font: 400 var(--text-xs) var(--font-sans); color: var(--text-muted); }

.kp-rg-vorschau { padding: var(--card-pad); display: flex; flex-direction: column; gap: 16px; }
.kp-rg-vorschau__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.kp-rg-vorschau__kopf a { font: 500 var(--text-sm) var(--font-sans); color: var(--text-link); white-space: nowrap; }
.kp-rg-summen { border-top: 1px solid var(--border-subtle); padding: 16px var(--card-pad) var(--card-pad); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 400 var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kp-rg-summen > div { display: flex; justify-content: space-between; gap: 16px; width: min(100%, 320px); }
.kp-rg-summen__gesamt { align-items: baseline; border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 4px; font-weight: 600; color: var(--text-strong); }
.kp-rg-summen__gesamt .kp-rg-mono { font-size: var(--text-xl); color: var(--text-strong); }
/* Ohne Steuerzeilen (Kleinunternehmer) steht der Gesamtbetrag allein — dann ohne zweite Linie */
.kp-rg-summen__gesamt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.kp-rg-pruefung { padding: 16px var(--card-pad); display: flex; flex-direction: column; gap: 12px; }
.kp-rg-ok { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 var(--text-sm) var(--font-sans); color: var(--status-ok-fg); }
.kp-rg-ok svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kp-rg-maengel { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 4px; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--status-warn-fg); }
.kp-rg-maengel__frei { margin: 0; font: 400 var(--text-sm) var(--font-sans); color: var(--text-body); }
.kp-rg-fest summary.kp-btn { width: 100%; justify-content: center; box-sizing: border-box; }

/* Festgeschrieben: das Blatt groß, Aktionen daneben */
.kp-rg-blatt { padding: 24px; border-radius: var(--radius-md); background: var(--bg-muted); align-items: center; box-sizing: border-box; }
.kp-rg-blatt .kp-rg-papier { width: 100%; max-width: 640px; padding: 44px 40px; font-size: 12.5px; }
.kp-rg-blatt .kp-rg-papier__absender strong { font-size: 19px; }
.kp-rg-blatt .kp-rg-papier__titel { font-size: 18px; }
@media (max-width: 640px) { .kp-rg-blatt { padding: 12px; } .kp-rg-blatt .kp-rg-papier { padding: 24px 16px; font-size: 11.5px; } }
.kp-rg-aktionen { padding: var(--card-pad); display: flex; flex-direction: column; gap: 8px; }
.kp-rg-aktionen form { display: flex; flex-direction: column; }
.kp-rg-betrag { font-size: var(--text-display); font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); }
.kp-rg-fakten { padding: 16px var(--card-pad); display: flex; flex-direction: column; }
.kp-rg-fakten > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font: 400 var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kp-rg-fakten > div + div { border-top: 1px solid var(--border-subtle); }
.kp-rg-fakten > div > :last-child { color: var(--text-strong); text-align: right; }
.kp-rg-storno { padding: var(--card-pad); display: flex; flex-direction: column; gap: 8px; }
.kp-rg-storno h2 { margin: 0; font: 600 var(--text-md) var(--font-sans); }
.kp-rg-storno p { margin: 0; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }

/* Das Blatt (Partial _RechnungPapier) — eine verkleinerte Rechnung: Schriftgrade und Ränder bilden das PDF nach,
   nicht die Typo-Skala der Oberfläche */
.kp-rg-papier { position: relative; overflow: hidden; box-sizing: border-box; background: var(--aex-neutral-000); border-radius: var(--radius-sm); padding: 24px 22px; box-shadow: var(--shadow-paper); display: flex; flex-direction: column; gap: 12px; font: 400 11px/1.5 var(--font-sans); color: var(--text-body); overflow-wrap: anywhere; }
/* Der Aufdruck ist Schmuck, kein Text: als ::after liest ihn kein Screenreader vor, und er überdeckt keinen Inhalt */
.kp-rg-papier--entwurf::after { content: "ENTWURF"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg); font: 600 40px var(--font-sans); letter-spacing: .04em; color: color-mix(in srgb, var(--status-warn-mark) 10%, transparent); pointer-events: none; white-space: nowrap; }
.kp-rg-papier__absender { display: flex; flex-direction: column; }
.kp-rg-papier__absender strong { font-size: 14px; }
.kp-rg-papier__absender span { color: var(--text-muted); font-size: .9em; }
.kp-rg-papier__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 4px; }
.kp-rg-papier__kopf dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 1px 12px; color: var(--text-muted); }
.kp-rg-papier__kopf dd { margin: 0; text-align: right; color: var(--text-body); }
.kp-rg-papier__leer { color: var(--text-muted); font-style: italic; }
.kp-rg-papier__titel { font-size: 14px; font-weight: 600; }
.kp-rg-papier__zeilen { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; border-top: 1px solid var(--text-body); padding-top: 6px; }
.kp-rg-papier__zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-rg-papier__gliederung { grid-column: 1 / -1; }
.kp-rg-papier__gliederung--ueberschrift { font-weight: 600; margin-top: 4px; }
.kp-rg-papier__rabatt { display: block; color: var(--text-muted); }
.kp-rg-papier__summe { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 2px 18px; border-top: 1px solid var(--border-default); padding-top: 6px; }
.kp-rg-papier__summe > :nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.kp-rg-papier__hinweis { font-weight: 600; }
.kp-rg-papier__zahlung { margin-top: 6px; color: var(--text-secondary); }

/* Meine Firmendaten / Meine Kunden im Rechnungs-Design (15.10.2026) */
.kp-rg-daten--ort { grid-template-columns: 80px minmax(0, 1fr) 72px; }
.kp-rg-daten--bank { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 150px; }
@container (max-width: 520px) { .kp-rg-daten--bank { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kp-rg-daten--bank, .kp-rg-daten--ort { grid-template-columns: minmax(0, 1fr); } }
.kp-rg-fall--breit { align-items: flex-start; padding: 12px 16px; }
.kp-rg-fall--breit input { margin-top: 2px; }
.kp-rg-fall--breit > span { display: flex; flex-direction: column; gap: 4px; }
.kp-rg-fall__text { font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-secondary); }
.kp-rg-naechste { margin: 0; font: 600 var(--text-md) var(--font-sans); color: var(--text-strong); }
.kp-rg-papier--kopf { gap: 8px; }
.kp-rg-suche { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.kp-rg-suche input { flex: 1 1 auto; }
.kp-rg-kunde { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); }
.kp-rg-kunde.is-aktiv { background: var(--bg-selected); }
.kp-rg-kunde__wer { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 400 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-rg-kunde__ort { color: var(--text-muted); overflow-wrap: anywhere; }
.kp-rg-kunde__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kp-rg-kunde__mail { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.kp-rg-kunde__aktionen { display: flex; gap: 8px; justify-content: flex-end; }
.kp-rg-kunde__aktionen form { display: flex; }
@container (max-width: 480px) {
  .kp-rg-kunde { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .kp-rg-kunde__aktionen { justify-content: flex-start; }
}
.kp-rg-liste__fuss { margin: 0; padding: 12px var(--card-pad) 16px; border-top: 1px solid var(--border-subtle); font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }
.kp-rg-liste__fuss a { color: var(--text-link); font-weight: 500; }
.kp-rg-haupt.kp-rg-liste { display: block; }

/* Ablage: Zeitraum des Jahres neben dem Umschalter (15.10.2026) */
.kp-jahr__zeitraum { font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.kp-rg-hinweise { margin: 0; padding: 12px 16px 12px 32px; border-radius: var(--radius-md); background: var(--status-pruefen-bg); display: flex; flex-direction: column; gap: 4px; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--status-pruefen-fg); }

/* Rechnungsvorlagen (15.10.2026): eigene Vorlagen des Klienten, Katalog der Kanzlei. Zeilen eigene Grids — feste Spalte plus 1fr */
.kp-rg-vorlage__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kp-rg-vorlage__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.kp-rg-vorlage__aktionen form { display: flex; }
.kp-rg-vorlagen__leer { margin: 0; font: 400 var(--text-sm)/var(--lh-text) var(--font-sans); color: var(--text-muted); }
.kp-rg-kopf__rechts { margin-left: auto; }
/* Rückfragen öffnen sich als Popover über die Karte hinaus — hier darf die Liste nichts abschneiden */
.kp-rg-liste--offen { overflow: visible; }
.kp-rg-vl { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px 16px; align-items: center; padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); }
.kp-rg-vl.is-aktiv { background: var(--bg-selected); }
.kp-rg-vl__was { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 400 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-rg-vl__text { flex-basis: 100%; color: var(--text-muted); overflow-wrap: anywhere; }
.kp-rg-vl__aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.kp-rg-vl__aktionen form { display: flex; }
.kp-rg-vl__hinweis { padding: 0 var(--card-pad) 16px; }
.kp-rg-pos--ohnepreis { grid-template-columns: 80px 96px minmax(0, 1fr); }
@container (max-width: 620px) {
  .kp-rg-vl { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .kp-rg-vl__aktionen { justify-content: flex-start; }
}
@container (max-width: 560px) {
  .kp-rg-pos--ohnepreis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gestaltung der Rechnung (15.10.2026): Logo, Schrift, Größe — die Vorschau nähert an, genau zeigt es das Muster-PDF */
.kp-rg-papier__logo { position: absolute; top: 18px; right: 20px; max-width: 34%; max-height: 52px; object-fit: contain; }
.kp-rg-papier__logo--links { position: static; align-self: flex-start; max-width: 50%; }
.kp-rg-blatt .kp-rg-papier__logo { top: 36px; right: 40px; max-height: 64px; }
.kp-rg-blatt .kp-rg-papier__logo--links { max-height: 64px; }
.kp-rg-papier__absender { padding-right: 36%; }
.kp-rg-papier__logo--links ~ .kp-rg-papier__absender, .kp-rg-papier:not(:has(.kp-rg-papier__logo)) .kp-rg-papier__absender { padding-right: 0; }
/* Schriften der Rechnung (Partial _RechnungPapier: kp-rg-schrift--@art) — die Hausschrift des Portals ist hier bewusst keine Wahl */
.kp-rg-schrift--opensans { font-family: "Open Sans", var(--font-sans); }
.kp-rg-schrift--roboto { font-family: Roboto, var(--font-sans); }
.kp-rg-schrift--standard { font-family: "Liberation Sans", Arial, var(--font-sans); }
/* „größer“ nur auf dem großen Blatt — die schmalen Vorschauen brächen sonst Wörter; die Größe zeigt das PDF */
.kp-rg-blatt .kp-rg-schrift--gross { font-size: 13.5px; }
@media (max-width: 640px) { .kp-rg-blatt .kp-rg-schrift--gross { font-size: 11.5px; } }
.kp-rg-abschnitt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Meine Firmendaten (15.10.2026, „Aufbau überdenken“): drei Reiter — Angaben · Aussehen · Nummern */
.kp-fd-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--bg-muted); }
.kp-fd-reiter a { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 16px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; }
.kp-fd-reiter a:hover { background: var(--bg-surface); color: var(--action-text); }
.kp-fd-reiter a.is-aktiv { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-subtle); color: var(--action-text); }
.kp-fd-reiter__titel { font: 600 var(--text-sm) var(--font-sans); }
.kp-fd-reiter__text { font: 400 var(--text-xs)/var(--lh-text) var(--font-sans); overflow-wrap: anywhere; }
@media (max-width: 560px) { .kp-fd-reiter__text { display: none; } .kp-fd-reiter a { align-items: center; padding: 12px 8px; } }

/* Aussehen: Einstellungen links, große Vorschau rechts (klebt beim Scrollen) */
.kp-fd-aussehen .kp-rg-seite { max-width: 560px; }
.kp-fd-vorschau > .kp-rg-vorschau { position: sticky; top: 16px; }
.kp-fd-blatt { padding: 16px; }
.kp-fd-blatt .kp-rg-papier { padding: 32px 28px; font-size: 11px; }

/* Briefkopf: zwei Wege als große Wahl; die Tafel des gewählten Wegs ist sichtbar (ohne :has() bleiben beide sichtbar) */
.kp-fd-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kp-fd-wahl label { position: relative; display: flex; cursor: pointer; }
.kp-fd-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.kp-fd-wahl span { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-default); font: 400 var(--text-sm) var(--font-sans); color: var(--text-muted); }
.kp-fd-wahl strong { font: 600 var(--text-sm) var(--font-sans); color: var(--text-strong); }
.kp-fd-wahl em { font-style: normal; }
.kp-fd-wahl input:checked + span { background: var(--bg-selected); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.kp-fd-wahl input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-fd-briefkopf:has(input[name=briefkopfArt][value=logo]:checked) .kp-fd-tafel--papier,
.kp-fd-briefkopf:has(input[name=briefkopfArt][value=papier]:checked) .kp-fd-tafel--logo { display: none; }
.kp-fd-tafel { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }

/* Datei hochladen: ein Knopf statt des Browser-Feldes, daneben das aktuelle Logo bzw. Briefpapier */
.kp-fd-datei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Logo und Briefpapier immer auf Weiß, wie auf dem Papier */
.kp-fd-datei__bild { max-width: 180px; max-height: 64px; object-fit: contain; padding: 8px; border-radius: var(--radius-md); background: var(--aex-neutral-000); border: 1px solid var(--border-subtle); }
.kp-fd-datei__knopf:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Das Datei-Feld selbst bleibt bedienbar (Tastatur, Vorlesen), aber unsichtbar — der Knopf ist sein Label */
.kp-rg .kp-fd-datei__knopf input.kp-fd-datei__eingabe { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.kp-fd-datei__knopf { position: relative; }
.kp-fd-datei__pdf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-fd-datei__pdf { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-sm) var(--font-sans); }
.kp-fd-datei .kp-rg-klein { flex-basis: 100%; }
.kp-fd-entfernen { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--text-sm) var(--font-sans); color: var(--danger-text); cursor: pointer; }

.kp-fd-gruppe { display: flex; flex-direction: column; gap: 8px; }
.kp-fd-gruppe__titel { font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); }

/* Segment-Wahl (Lage, Größe) */
.kp-fd-segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--bg-muted); align-self: flex-start; }
.kp-fd-segment label { position: relative; cursor: pointer; }
.kp-fd-segment input { position: absolute; opacity: 0; pointer-events: none; }
.kp-fd-segment span { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 12px; border-radius: var(--radius-sm); font: 500 var(--text-sm) var(--font-sans); color: var(--text-secondary); }
.kp-fd-segment input:checked + span { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-subtle); color: var(--action-text); }
.kp-fd-segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-fd-segment .kp-fd-segment--gross { font-size: var(--text-md); }

/* Farbfelder: rund wie Farbmuster; der Farbkreis steht für „eigene Farbe“ */
.kp-fd-farben { display: flex; flex-wrap: wrap; gap: 12px; }
.kp-fd-farbe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; cursor: pointer; }
.kp-fd-farbe input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.kp-fd-farbe__feld, .kp-fd-farbe__waehler { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 15%, transparent); }
.kp-rg .kp-fd-farbe input.kp-fd-farbe__waehler { -webkit-appearance: none; appearance: none; width: 40px; min-height: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: conic-gradient(#c0392b, #d4a017, #2e7d32, #0e7490, #4b3f72, #c0392b); cursor: pointer; }
.kp-fd-farbe__waehler::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.kp-fd-farbe--eigen:has(input[type=radio]:checked) .kp-fd-farbe__waehler::-moz-color-swatch { opacity: 1; }
.kp-fd-farbe__waehler::-webkit-color-swatch-wrapper { padding: 0; }
.kp-fd-farbe__waehler::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.kp-fd-farbe--eigen:has(input[type=radio]:checked) .kp-fd-farbe__waehler::-webkit-color-swatch { opacity: 1; }
.kp-fd-farbe__name { font: 500 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-fd-farbe input[type=radio]:checked ~ .kp-fd-farbe__feld,
.kp-fd-farbe--eigen:has(input[type=radio]:checked) .kp-fd-farbe__waehler { box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px var(--action); }
.kp-fd-farbe input[type=radio]:checked ~ .kp-fd-farbe__name { color: var(--action-text); font-weight: 600; }
.kp-fd-farbe input[type=radio]:focus-visible ~ .kp-fd-farbe__feld { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Schriften als Karten mit Schriftprobe */
.kp-fd-schriften { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kp-fd-schrift { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--radius-md); border: 1px solid var(--border-default); cursor: pointer; text-align: center; }
.kp-fd-schrift input { position: absolute; opacity: 0; pointer-events: none; }
.kp-fd-schrift:has(input:checked) { background: var(--bg-selected); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.kp-fd-schrift:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.kp-fd-schrift__probe { font-size: var(--text-display); line-height: var(--lh-tight); color: var(--text-strong); }
.kp-fd-schrift__name { font: 500 var(--text-xs) var(--font-sans); color: var(--text-secondary); }

/* Ränder für das Briefpapier: drei Felder mit „mm“ */
.kp-fd-raender { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kp-fd-raender label { display: flex; flex-direction: column; gap: 4px; font: 500 var(--text-xs) var(--font-sans); color: var(--text-muted); }
.kp-fd-mm { position: relative; display: flex; }
.kp-rg .kp-fd-mm input { padding-right: 40px; text-align: right; }
.kp-fd-mm em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 var(--text-sm) var(--font-sans); font-style: normal; color: var(--text-muted); pointer-events: none; }

.kp-fd-nummern { max-width: 640px; }
@container (max-width: 520px) {
  .kp-fd-wahl, .kp-fd-schriften, .kp-fd-raender { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kp-fd-wahl, .kp-fd-raender { grid-template-columns: minmax(0, 1fr); }
  .kp-fd-schriften { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Rechnung, Scheibe B: neuer Kunde direkt im Schritt 1, Schnellwahl für den Leistungszeitraum */
.kp-rg-neukunde > summary { cursor: pointer; list-style: none; display: inline-flex; min-height: 32px; align-items: center; font-weight: 600; }
.kp-rg-neukunde > summary::-webkit-details-marker { display: none; }
.kp-rg-neukunde__felder { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--bg-subtle); border: 1px solid var(--border-subtle); }
.kp-rg-neukunde__felder .kp-btn { align-self: flex-start; }
.kp-rg-schnell { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.kp-rg-schnell__titel { align-self: center; margin-right: 4px; font: 500 var(--text-xs) var(--font-sans); color: var(--text-muted); }

/* ---------- Checklisten-Vorlagen: Übersicht (Emil 20.10.2026: „ein Dashboard mit allen Vorlagen, dazu Stand“) ----------
   Jede Zeile ist ein eigenes Raster: feste Spaltenbreiten, nur der Name wächst — sonst fluchten die Spalten nicht. Schmal
   stehen die Werte zu zweit unter dem Namen, jeweils mit ihrer Spaltenüberschrift davor (data-label). */
.kp-vl-liste { overflow: hidden; container-type: inline-size; }
.kp-vl-liste__kopf { padding: 16px var(--card-pad) 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kp-vl-liste__kopf .kp-card__title .kp-kz-tag { margin-right: 8px; }
.kp-vl-liste__kopf .kp-card__title { margin: 0; }
.kp-vl-leer { margin: 0; padding: 0 var(--card-pad) var(--card-pad); color: var(--text-muted); font: 400 var(--text-sm) var(--font-sans); }
.kp-vl-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 88px 110px 120px 150px; gap: 16px; align-items: center;
  padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); color: var(--text-strong); text-decoration: none;
  font: 400 var(--text-sm) var(--font-sans); }
.kp-vl-zeile--mit { grid-template-columns: minmax(0, 1fr) 88px 110px 150px; }
a.kp-vl-zeile:hover { background: var(--bg-hover); color: var(--text-strong); }
.kp-vl-zeile--kopf { padding-top: 8px; padding-bottom: 8px; background: var(--bg-subtle); }
.kp-vl-zeile__name { font-weight: 600; overflow-wrap: anywhere; }
.kp-vl-zeile__name .kp-pill { margin-left: 8px; }
.kp-vl-zeile__wer { display: block; color: var(--text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.kp-vl-zeile__knopf { justify-self: end; }
.kp-vl-zeile:not(.kp-vl-zeile--mit) > .kp-vl-zeile__knopf { justify-self: start; }   /* Ordner-Listen: der Knopf steht in seiner Spalte */
@container (max-width: 740px) {
  .kp-vl-zeile, .kp-vl-zeile--mit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; padding: 12px 16px; }
  .kp-vl-zeile--kopf { display: none; }
  .kp-vl-zeile__name { grid-column: 1 / -1; }
  .kp-vl-zeile [data-label]::before { content: attr(data-label); display: block; font: 500 var(--text-xs) var(--font-sans);
    letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
  .kp-vl-zeile__knopf { grid-column: 1 / -1; justify-self: start; }
  .kp-vl-zeile:not(.kp-vl-zeile--mit) > .kp-vl-zeile__knopf { grid-column: auto; }
}