/* Klarfall — tokens.css, kompiliert aus design-system/tokens.json. Nicht von Hand ändern. */
:root, :root[data-theme="light"] {
  --surface-0: #fafbfc;
  --surface-1: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #e6eaef;
  --ink: #16202a;
  --ink-2: #46515f;
  --ink-3: #5c6775;
  --line: #e6eaef;
  --line-soft: #eff2f5;
  --line-strong: #b5bdc8;
  --accent: #1e4d7b;
  --accent-hover: #173d62;
  --accent-soft: #e3ecf6;
  --on-accent: #ffffff;
  --ok: #0f6e5a;
  --ok-soft: #dcf1ea;
  --warn: #7f4a00;
  --warn-soft: #fbefd6;
  --danger: #b42318;
  --danger-soft: #fbe7e5;
  --focus: #1e4d7b;
  --shadow-1: 0 1px 2px rgba(22, 32, 42, 0.06);
  --shadow-2: 0 8px 24px rgba(22, 32, 42, 0.14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0e1216;
    --surface-1: #151b21;
    --surface-2: #1d242c;
    --surface-3: #28303a;
    --ink: #e8ecf1;
    --ink-2: #b6bfca;
    --ink-3: #8a95a3;
    --line: #262e38;
    --line-soft: #1c232b;
    --line-strong: #3f4a59;
    --accent: #8cb8e8;
    --accent-hover: #a9cbf0;
    --accent-soft: #172a3f;
    --on-accent: #0b1626;
    --ok: #4fcdb0;
    --ok-soft: #113630;
    --warn: #e2a93b;
    --warn-soft: #3a2c12;
    --danger: #f07b6e;
    --danger-soft: #40201d;
    --focus: #8cb8e8;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-0: #0e1216;
  --surface-1: #151b21;
  --surface-2: #1d242c;
  --surface-3: #28303a;
  --ink: #e8ecf1;
  --ink-2: #b6bfca;
  --ink-3: #8a95a3;
  --line: #262e38;
  --line-soft: #1c232b;
  --line-strong: #3f4a59;
  --accent: #8cb8e8;
  --accent-hover: #a9cbf0;
  --accent-soft: #172a3f;
  --on-accent: #0b1626;
  --ok: #4fcdb0;
  --ok-soft: #113630;
  --warn: #e2a93b;
  --warn-soft: #3a2c12;
  --danger: #f07b6e;
  --danger-soft: #40201d;
  --focus: #8cb8e8;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
.display-28 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.title-22 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.heading-15 { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.body-14 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.body-13 { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.label-12 { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-11 { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.04em; }
.mono-13 { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }
.mono-12 { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }

/* Klarfall — Komponenten. Jeder Wert kommt aus tokens.css, hier stehen nur Formen.
   Grundsatz der Akte: höchstens eine Rahmenlinie je Fläche, Trennung durch Weißraum und line-soft, keine Schatten. */

.kf { font-family: var(--font-sans); color: var(--ink); background: var(--surface-0); font-size: 14px; line-height: 20px; }
.kf *, .kf *::before, .kf *::after { box-sizing: border-box; }
.kf .tnum, .kf-table .num, .kf-frist__time, .kf-konf__value, .kf-timeline__time, .kf-stream__time { font-variant-numeric: tabular-nums; }
.kf :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Panel: nur auf der Demo-Seite außerhalb der App. In der Akte gibt es keine Panels. */
.kf-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); }
.kf-panel--raised { box-shadow: var(--shadow-1); }
.kf-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.kf-panel__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.kf-panel__title--case { font-size: 22px; line-height: 28px; }
.kf-panel__title .id { font-family: var(--font-mono); font-weight: 400; color: var(--ink-2); }
.kf-panel__body { padding: var(--space-4); }
.kf-panel__body--flush { padding: 0; }
.kf-panel__actions { display: flex; gap: var(--space-2); align-items: center; }

/* Button */
.kf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.kf-btn:hover { background: var(--surface-2); }
.kf-btn:active { background: var(--surface-3); }
.kf-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kf-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.kf-btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.kf-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.kf-btn--danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.kf-btn--danger:hover { border-color: var(--danger); }
.kf-btn--sm { height: 26px; padding: 0 var(--space-2); font-size: 12px; line-height: 16px; }
.kf-btn[disabled], .kf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kf-btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Field */
.kf-field { display: grid; gap: var(--space-1); min-width: 0; }
.kf-field__label { font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-field__control { width: 100%; height: 32px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink); font: 400 13px/18px var(--font-sans); }
.kf-field__control::placeholder { color: var(--ink-3); }
select.kf-field__control { padding-right: var(--space-6); }
textarea.kf-field__control { height: auto; min-height: 72px; padding: var(--space-2); resize: vertical; }
.kf-field__control:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
.kf-field__hint { font: 400 11px/14px var(--font-sans); color: var(--ink-3); }
.kf-field--mono .kf-field__control { font-family: var(--font-mono); }
.kf-field--error .kf-field__control { border-color: var(--danger); }
.kf-field--error .kf-field__hint { color: var(--danger); }
.kf-form { display: grid; gap: var(--space-3); }
.kf-form--2 { grid-template-columns: 1fr 1fr; }

/* GroupBadge */
.kf-group { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.kf-group__letter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--ink); font: 600 13px/1 var(--font-mono); }
.kf-group--active { color: var(--ink); }
.kf-group--active .kf-group__letter { background: var(--accent); color: var(--on-accent); }
.kf-group-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kf-group-row .kf-group { padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.kf-group-row .kf-group:hover { background: var(--surface-3); }
.kf-group-row .kf-group--active { background: var(--accent-soft); }

/* StatusPill: ein Pill mit Punkt und Wort. Wartezustand und Frist in Listen, Fallgruppe und Zustand im RecordHeader. */
.kf-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.kf-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.kf-pill--ok .kf-pill__dot { background: var(--ok); }
.kf-pill--warn .kf-pill__dot { background: var(--warn); }
.kf-pill--danger .kf-pill__dot { background: var(--danger); }
.kf-pill--accent .kf-pill__dot { background: var(--accent); }
.kf-pill--ok { color: var(--ok); background: var(--ok-soft); }
.kf-pill--warn { color: var(--warn); background: var(--warn-soft); }
.kf-pill--danger { color: var(--danger); background: var(--danger-soft); }
.kf-pill--accent { color: var(--accent); background: var(--accent-soft); }
.kf-pill--plain { background: transparent; padding: 0; color: var(--ink-2); height: auto; }
.kf-pill--plain.kf-pill--ok, .kf-pill--plain.kf-pill--warn, .kf-pill--plain.kf-pill--danger, .kf-pill--plain.kf-pill--accent { color: var(--ink-2); }
.kf-pill__meta { font: 400 12px/16px var(--font-mono); color: var(--ink-3); }

/* DeadlineChip (Fristuhr): Fläche und Text, kein Rahmen. In der Eigenschaftsliste einbettbar. */
.kf-frist { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-2) 0 var(--space-1); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.kf-frist__dial { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: conic-gradient(currentColor var(--kf-frist-pct, 0%), transparent 0); flex: none; }
.kf-frist__time { font: 400 12px/16px var(--font-mono); }
.kf-frist--ok { color: var(--ok); background: var(--ok-soft); }
.kf-frist--warn { color: var(--warn); background: var(--warn-soft); }
.kf-frist--over { color: var(--danger); background: var(--danger-soft); }
.kf-frist--none { color: var(--ink-3); background: transparent; padding-left: 0; }
.kf-frist--none .kf-frist__dial { background: none; border-style: dashed; }

/* StepChip: ein Schritt der Fallbearbeitung mit Status. Fläche und Text, kein Rahmen. */
.kf-step { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.kf-step__mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 9px/1 var(--font-mono); flex: none; }
.kf-step__name { font-weight: 600; }
.kf-step__meta { font: 400 12px/16px var(--font-mono); }
.kf-step--open { color: var(--warn); background: var(--warn-soft); }
.kf-step--open .kf-step__mark { border-style: dashed; }
.kf-step--done { color: var(--ok); background: var(--ok-soft); }
.kf-step--failed { color: var(--danger); background: var(--danger-soft); }
.kf-step--none { color: var(--ink-3); background: transparent; padding-left: 0; }
.kf-step--none .kf-step__mark { border-style: dashed; }

/* ConfidenceMeter */
.kf-konf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-3); font: 500 12px/16px var(--font-sans); color: var(--ink-2); }
.kf-konf__track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); }
.kf-konf__fill { height: 100%; width: var(--kf-konf-pct, 0%); border-radius: var(--radius-pill); background: var(--accent); }
.kf-konf__threshold { position: absolute; top: -4px; bottom: -4px; left: var(--kf-konf-threshold, 80%); width: 2px; margin-left: -1px; background: var(--ink); }
.kf-konf__value { font: 400 13px/18px var(--font-mono); color: var(--ink); }
.kf-konf__note { grid-column: 1 / -1; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-konf--abstain .kf-konf__fill { background: var(--ink-3); }
.kf-konf--abstain .kf-konf__note { color: var(--warn); font-weight: 500; }
.kf-konf--compact { grid-template-columns: 1fr auto; }
.kf-konf--compact .kf-konf__label { display: none; }

/* DecisionBadge + Begründungscodes. Ein Vorschlag trägt das Wort „Vorschlag" in ink-3 vor dem Badge, keinen gestrichelten Rahmen. */
.kf-decision { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.kf-decision__pre { font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-decision__badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-sm); font: 600 12px/16px var(--font-sans); }
.kf-decision__mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 10px/1 var(--font-mono); }
.kf-decision--refund .kf-decision__badge { background: var(--ok-soft); color: var(--ok); }
.kf-decision--decline .kf-decision__badge { background: var(--danger-soft); color: var(--danger); }
.kf-decision--hearing .kf-decision__badge { background: var(--warn-soft); color: var(--warn); }
.kf-decision--info .kf-decision__badge { background: var(--accent-soft); color: var(--accent); }
.kf-decision--word { font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.kf-reasons { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.kf-reason { font: 400 12px/16px var(--font-mono); padding: 0 var(--space-2); border-radius: var(--radius-xs); color: var(--ink-2); background: var(--surface-2); }
.kf-reason-text { font: 400 14px/20px var(--font-sans); color: var(--ink-2); margin: var(--space-2) 0 0; }

/* Checklist: Zeilen durch line-soft getrennt, kein Rahmen. In der Eigenschaftsliste einbettbar. */
.kf-check { list-style: none; margin: 0; padding: 0; }
.kf-check__item { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font: 400 13px/18px var(--font-sans); min-height: 32px; }
.kf-check__item:last-child { border-bottom: 0; }
.kf-check__state { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 700 10px/1 var(--font-mono); color: transparent; }
.kf-check__item--present .kf-check__state { background: var(--ok); border-color: var(--ok); color: var(--surface-1); }
.kf-check__item--missing .kf-check__state { border-color: var(--danger); color: var(--danger); }
.kf-check__item--requested .kf-check__state { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.kf-check__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.kf-check__item--missing .kf-check__meta { color: var(--danger); }
.kf-check__item--requested .kf-check__meta { color: var(--warn); }
.kf-check__source { font: 400 11px/14px var(--font-sans); color: var(--ink-3); margin-left: var(--space-2); white-space: nowrap; }
.kf-check__starts { font: 500 11px/14px var(--font-sans); color: var(--warn); margin-left: var(--space-2); white-space: nowrap; }

/* CaseTable: Zeilen 40px, eine Rahmenlinie außen, line-soft innen, Abschnittszeilen je Wartezustand. */
.kf-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: auto; background: var(--surface-1); }
.kf-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-sans); }
.kf-table th { text-align: left; font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.kf-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; height: 40px; }
.kf-table tbody tr:last-child td { border-bottom: 0; }
.kf-table tbody tr:hover { background: var(--surface-2); }
.kf-table tbody tr[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.kf-table tbody tr.kf-table__section td { height: 32px; padding-top: var(--space-3); font: 500 12px/16px var(--font-sans); color: var(--ink-3); background: var(--surface-1); border-bottom: 1px solid var(--line-soft); }
.kf-table tbody tr.kf-table__section:hover { background: var(--surface-1); }
.kf-table tbody tr.kf-table__section .count { font-family: var(--font-mono); margin-left: var(--space-2); }
.kf-table tbody tr[tabindex] { cursor: pointer; }
.kf-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kf-table .num, .kf-table th.num { text-align: right; }
.kf-table .num { font-family: var(--font-mono); }
.kf-table .id { font-family: var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.kf-table .muted { color: var(--ink-3); }
.kf-table .proposal { color: var(--ink-2); }

/* CaseList: zwei Zeilen je Fall, gruppiert nach Wartezustand. Unter 720px statt CaseTable. */
.kf-case-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); overflow: hidden; font: 400 13px/18px var(--font-sans); }
.kf-case-list__group { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink-3); padding: var(--space-3) var(--space-3) var(--space-1); border-bottom: 1px solid var(--line-soft); }
.kf-case-list__count { font: 400 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; }
.kf-case-list__item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.kf-case-list__item:last-child { border-bottom: 0; }
.kf-case-list__item:hover { background: var(--surface-2); }
.kf-case-list__item[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.kf-case-list__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kf-case-list__l1 { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.kf-case-list__id { font-family: var(--font-mono); color: var(--ink); }
.kf-case-list__who { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-case-list__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.kf-case-list__l2 { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kf-case-list__note { font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-case-list__empty { padding: var(--space-4) var(--space-3); color: var(--ink-3); }

/* RecordHeader: Name und ID, Pills, Aktionen rechts. Höchstens ein Primärbutton. */
.kf-record { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-soft); }
.kf-record__main { display: grid; gap: var(--space-2); min-width: 0; }
.kf-record__title { margin: 0; font: 600 22px/28px var(--font-sans); letter-spacing: -.01em; color: var(--ink); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.kf-record__id { font: 400 13px/18px var(--font-mono); color: var(--ink-2); }
.kf-record__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.kf-record__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* PropertyList: Schlüssel links in ink-3 mit fester Breite, Wert rechts. Gruppen mit kleinem Titel, einklappbar. Keine Linien zwischen Zeilen. */
.kf-props { display: grid; gap: var(--space-4); }
.kf-props__group { border-top: 1px solid var(--line-soft); padding-top: var(--space-2); }
.kf-props__group:first-child { border-top: 0; padding-top: 0; }
.kf-props__title { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-props__title::-webkit-details-marker { display: none; }
.kf-props__title::after { content: "▾"; color: var(--ink-3); }
.kf-props__group:not([open]) > .kf-props__title::after { content: "▸"; }
.kf-props__title:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kf-props__row { display: grid; grid-template-columns: var(--kf-props-key, 120px) minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 32px; padding: var(--space-1) 0; }
.kf-props__row--top { align-items: start; }
.kf-props__key { font: 400 13px/18px var(--font-sans); color: var(--ink-3); }
.kf-props__val { font: 400 14px/20px var(--font-sans); color: var(--ink); min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kf-props__val .mono { font: 400 13px/18px var(--font-mono); }
.kf-props__val--block { display: block; }
.kf-props__row--block { grid-template-columns: minmax(0, 1fr); }
.kf-props__row--block .kf-props__key:empty { display: none; }
.kf-props__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) 0 var(--space-2); }

/* ActivityStream: der Verlauf als Strom. Menschliche Einträge voll, Systemereignisse gruppiert und einklappbar, Dokumente als Karten. */
.kf-stream { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.kf-stream__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.kf-stream__dot { width: 10px; height: 10px; border-radius: 50%; margin: 5px auto 0; background: var(--surface-3); }
.kf-stream__item--human .kf-stream__dot { background: var(--accent); }
.kf-stream__item--deadline .kf-stream__dot { background: var(--warn); }
.kf-stream__item--statement .kf-stream__dot { background: var(--ink-2); }
.kf-stream__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font: 500 13px/18px var(--font-sans); color: var(--ink); }
.kf-stream__time { font: 400 12px/16px var(--font-mono); color: var(--ink-3); }
.kf-stream__text { font: 400 14px/20px var(--font-sans); color: var(--ink); margin: var(--space-1) 0 0; }
.kf-stream__item--system .kf-stream__text { color: var(--ink-2); }
.kf-stream__statement { font: 400 14px/20px var(--font-sans); color: var(--ink); margin: var(--space-1) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); max-width: 560px; }
.kf-stream__group { grid-column: 1 / -1; }
.kf-stream__group > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink-3); }
.kf-stream__group > summary::-webkit-details-marker { display: none; }
.kf-stream__group > summary .kf-stream__dot { background: var(--surface-3); }
.kf-stream__group > summary:hover { color: var(--ink); }
.kf-stream__group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kf-stream__group[open] > summary { margin-bottom: var(--space-3); }
.kf-stream__group .kf-stream { gap: var(--space-3); }
.kf-stream__card { margin-top: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); max-width: 640px; }
.kf-stream__card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font: 500 13px/18px var(--font-sans); }
.kf-stream__card-meta { font: 400 12px/16px var(--font-mono); color: var(--ink-3); }
.kf-stream__card-text { width: 100%; min-height: 96px; font: 400 12px/16px var(--font-mono); padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); resize: vertical; }
.kf-stream__card-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.kf-stream__bar { position: sticky; bottom: 0; background: var(--surface-1); border-top: 1px solid var(--line-soft); padding: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.kf-stream__bar-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Disclosure: aufklappbarer Abschnitt, auf der Demo-Seite. In der Akte stehen Dokumente als Karten im Strom. */
.kf-disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.kf-disclosure + .kf-disclosure { margin-top: var(--space-2); }
.kf-disclosure__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font: 500 12px/16px var(--font-sans); color: var(--ink-2); cursor: pointer; list-style: none; }
.kf-disclosure__summary::-webkit-details-marker { display: none; }
.kf-disclosure__summary > span:first-child::before { content: "▸ "; color: var(--ink-3); }
.kf-disclosure[open] > .kf-disclosure__summary > span:first-child::before { content: "▾ "; }
.kf-disclosure__summary:hover { background: var(--surface-2); color: var(--ink); }
.kf-disclosure__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kf-disclosure__meta { font: 400 12px/16px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kf-disclosure__body { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }
.kf-disclosure__text { width: 100%; min-height: 120px; font: 400 12px/16px var(--font-mono); padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); resize: vertical; }
.kf-disclosure__text:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

/* Timeline (Verlauf), ältere Form. In der Akte ersetzt der ActivityStream sie. */
.kf-timeline { list-style: none; margin: 0; padding: 0; }
.kf-timeline__item { display: grid; grid-template-columns: 112px 12px 1fr; gap: var(--space-3); padding: var(--space-2) 0; position: relative; }
.kf-timeline__item::before { content: ""; position: absolute; left: calc(112px + var(--space-3) + 5px); top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
.kf-timeline__item:first-child::before { top: 14px; }
.kf-timeline__item:last-child::before { bottom: calc(100% - 14px); }
.kf-timeline__time { font: 400 12px/16px var(--font-mono); color: var(--ink-3); text-align: right; padding-top: 1px; white-space: nowrap; }
.kf-timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 3px solid var(--line-strong); margin-top: 3px; position: relative; z-index: 1; }
.kf-timeline__item--system .kf-timeline__dot { border-color: var(--ink-3); }
.kf-timeline__item--human .kf-timeline__dot { border-color: var(--accent); background: var(--accent); }
.kf-timeline__item--deadline .kf-timeline__dot { border-color: var(--warn); }
.kf-timeline__text { font: 400 14px/20px var(--font-sans); }
.kf-timeline__by { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-3); }

/* Tabs */
.kf-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line-soft); padding: 0 var(--space-4); }
.kf-tabs__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-2) 0 var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: var(--space-1); align-items: baseline; }
.kf-tabs__tab:hover { color: var(--ink); }
.kf-tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.kf-tabs__count { font: 400 12px/16px var(--font-mono); color: var(--ink-3); }

/* Compare (Heute gegen Klarfall), Demo-Seite */
.kf-compare { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; font: 400 13px/18px var(--font-sans); }
.kf-compare > div { background: var(--surface-1); padding: var(--space-3) var(--space-4); min-width: 0; }
.kf-compare__head { font: 500 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.kf-compare__step { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.kf-compare__new { background: var(--accent-soft); }
.kf-compare__head.kf-compare__new { color: var(--accent); background: var(--accent-soft); }
.kf-compare__old { color: var(--ink-2); }
.kf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.kf-metric { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.kf-metric__label { font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.kf-metric__value { font: 600 28px/34px var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin-top: var(--space-1); }
.kf-metric__value .from { font: 400 14px/20px var(--font-mono); color: var(--ink-3); text-decoration: line-through; margin-right: var(--space-2); }
.kf-metric__note { font: 400 12px/16px var(--font-sans); color: var(--ink-3); margin-top: var(--space-1); }
button.kf-metric { appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%; color: inherit; }
button.kf-metric:hover { background: var(--surface-2); }
button.kf-metric:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.kf-metric[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-2); }