/* ═══════════════════════════════════════════════════════════════════════════
   PRIMITIVES — die ~20 Bausteine, auf die 76 Klassen-Familien zurückgeführt
   werden
   ═══════════════════════════════════════════════════════════════════════════

   Seit Phase 3 in allen fünf Entrypoints verlinkt, in dieser Reihenfolge:

     core.css → tokens.css → icons.css → primitives.css → components.css
     → overlays.css → badge.css → verlauf.css → handwerker.css → ui.css → drag.css

   Bewusst NACH tokens/icons und VOR components.css: die alten Familien sollen
   während der Migration gewinnen, damit nichts abrupt umspringt. Wenn eine
   Familie abgebaut ist, verschwindet ihr Block aus core.css und
   components.css — und das Primitiv trägt. Bei den Buttons (Phase 4) ist das
   passiert: die Altnamen stehen jetzt als Aliase in Abschnitt 5.

   Wo ein Altname weiter in einer späteren Datei deklariert wird, gewinnt die
   spätere Datei — deshalb muss ein Alias hier immer mit dem Löschen der
   Altregel dort einhergehen, nicht statt dessen.

   Zuordnung Familie → Primitiv: docs/design/COMPONENT-CONSOLIDATION.md
   Alle Zahlenwerte:               docs/design/redesign-mockup.html
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. GLOBALE GRUNDLAGEN ═════════════════════════════════════════════════
   Fehlten bisher komplett und sind der Grund, warum die App an den Rändern
   „nach Browser" aussieht.
   ═════════════════════════════════════════════════════════════════════════ */

/* Ein einziger Fokusstil für alles. Vorher gab es zwei konkurrierende
   Fokusfarben (--purple 7×, --amber 7×) und viele Stellen ohne jeden. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-mark);
  outline-offset: 1px;
  border-radius: var(--r-1);
}
/* Maus-Fokus nicht anzeigen — :focus-visible übernimmt das. */
:where(button, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Formularelemente erben die Schrift NICHT — der Browser setzt seine eigene.
   Ohne diese Zeile rendert die Hauptnavigation in Arial 13,33px statt in
   IBM Plex: .rail-item, .rail-group-header, .rail-label, .mobile-nav-item,
   .user-btn, .cti-demo-btn, .hilfe-close und .hamburger setzen alle keine
   font-family. Neun Regeln zu flicken wäre die falsche Ebene. */
button, input, select, textarea { font-family: inherit; }

::selection { background: var(--brand-mark); color: var(--t-inv); }

/* <small> erbt sonst `font-size: smaller` aus dem Browser-Stylesheet — das
   sind 0,833 × Elterngröße und landet damit immer neben der Skala
   (gemessen: 9,17px in einem 11px-Kontext). Sechs Vorkommen im Projekt. */
small { font-size: var(--fs-1); }

::placeholder { color: var(--t-3); opacity: 1; }

/* Scrollbars. Ohne das sind sie im Dark-Theme hellgrau und stechen heraus. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--t-4); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}


/* ═══ 2. NATIVE CONTROLS ════════════════════════════════════════════════════
   Die eigentliche Lücke: 51 Checkboxen, 78 Datumsfelder, 9 Radios,
   9 File-Inputs — bisher NULL CSS-Regeln. Eine Standard-Checkbox rendert
   als hellblaues OS-Control und ist auf warmem Graphit der sichtbarste
   Fremdkörper überhaupt.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Checkbox ─────────────────────────────────────────────────────────────
   Eigene Darstellung statt accent-color allein, weil accent-color die
   Größe, den Radius und den Haken nicht kontrolliert.                     */
input[type="checkbox"]:where(.cb, .kf-cb, [class*="check"]),
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--s-input);
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: -0.15em;
  transition: background var(--t-fast), border-color var(--t-fast);
}
input[type="checkbox"]::before {
  content: ''; width: 10px; height: 10px;
  transform: scale(0); transition: transform var(--t-fast) var(--ease-out);
  background: var(--t-inv);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 8%, 38% 70%);
}
input[type="checkbox"]:checked {
  background: var(--brand-mark); border-color: var(--brand-mark);
}
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate {
  background: var(--brand-mark); border-color: var(--brand-mark);
}
input[type="checkbox"]:indeterminate::before {
  transform: scale(1); clip-path: none; height: 2px; width: 9px; border-radius: 1px;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--t-4); }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── Radio ────────────────────────────────────────────────────────────── */
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--s-input);
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: -0.15em;
  transition: border-color var(--t-fast);
}
input[type="radio"]::before {
  content: ''; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--brand-mark);
  transform: scale(0); transition: transform var(--t-fast) var(--ease-out);
}
input[type="radio"]:checked { border-color: var(--brand-mark); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="radio"]:hover:not(:disabled) { border-color: var(--t-4); }
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── Datum / Monat / Zeit ─────────────────────────────────────────────────
   78 Datumsfelder ohne jedes CSS. Wichtig ist das Kalender-Icon: unbehandelt
   ist es dunkelgrau und auf dunklem Grund praktisch unsichtbar.            */
input[type="date"], input[type="month"], input[type="time"],
input[type="datetime-local"], input[type="week"] {
  font-family: inherit; font-size: var(--fs-3);
  color: var(--t-1); background: var(--s-input);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  height: 32px; padding: 0 var(--sp-10);
  font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(var(--icon-invert, 1)) opacity(.55);
  cursor: pointer; transition: opacity var(--t-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(var(--icon-invert, 1)) opacity(1); }
[data-theme="light"] { --icon-invert: 0; }
/* Leeres Datumsfeld soll nicht laut sein */
input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text { color: var(--t-3); }

/* ── Zahl ─────────────────────────────────────────────────────────────────
   Spinner weg: in Beträgen und Flächen stören sie und die Pfeile sind
   in keinem Browser gleich groß. Wo Schrittbedienung gebraucht wird,
   .num-stepper setzen.                                                    */
input[type="number"] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].num-stepper { -moz-appearance: auto; }
input[type="number"].num-stepper::-webkit-inner-spin-button { -webkit-appearance: auto; }

/* ── Select ───────────────────────────────────────────────────────────────
   Der Pfeil kommt als eingebettetes SVG mit currentColor-Ersatz statt als
   Hintergrundbild mit hartkodierter Farbe (so macht es core.css:151-190
   heute — der Pfeil bleibt dort im Light-Theme unsichtbar).                */
select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: var(--fs-3); color: var(--t-1);
  background-color: var(--s-input);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  height: 32px; padding: 0 var(--sp-32) 0 10px;
  cursor: pointer;
}
select:disabled { opacity: .45; cursor: not-allowed; }
select[multiple] { height: auto; padding: 4px; background-image: none; }
/* Die Optionsliste selbst rendert das OS. Wenigstens die Farben mitgeben. */
select option { background: var(--s-overlay); color: var(--t-1); }

/* ── Textarea ─────────────────────────────────────────────────────────── */
textarea {
  font-family: inherit; font-size: var(--fs-3); line-height: var(--lh-normal);
  color: var(--t-1); background: var(--s-input);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  padding: var(--sp-8) var(--sp-10); min-height: 72px; resize: vertical;
  field-sizing: content;   /* wächst mit dem Inhalt, wo unterstützt */
}
textarea.fixed { resize: none; field-sizing: fixed; }

/* ── File ─────────────────────────────────────────────────────────────────
   Der native Button ist in jedem Browser anders. Wir stylen ihn direkt;
   die 9 Fundstellen nutzen bereits upload-*-Klassen, dort dockt es an.     */
input[type="file"] {
  font-family: inherit; font-size: var(--fs-2); color: var(--t-2);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  font-family: inherit; font-size: var(--fs-2); font-weight: var(--fw-semi);
  height: 26px; padding: 0 var(--sp-8); margin-right: var(--sp-8);
  color: var(--t-1); background: var(--s-raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  cursor: pointer; transition: background var(--t-fast);
}
input[type="file"]::file-selector-button:hover { background: var(--s-hover); }

/* ── Range ────────────────────────────────────────────────────────────── */
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  height: 18px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-full); background: var(--s-sunken);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--r-full); background: var(--s-sunken);
}
input[type="range"]::-webkit-slider-thumb {
  /* -5px zentriert den 14px-Griff auf der 4px-Bahn. Geometrisch zwingend,
     kein Abstandswert — deshalb kein Token. */
  -webkit-appearance: none; margin-top: -var(--sp-4);
  width: 14px; height: 14px; border-radius: var(--r-full);
  background: var(--brand-mark); border: 2px solid var(--s-content);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid var(--s-content);
  border-radius: var(--r-full); background: var(--brand-mark);
}

/* ── Color (Tenant-Akzentfarbe im Admin) ──────────────────────────────── */
input[type="color"] {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 32px; padding: 2px;
  background: var(--s-input);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--r-1); }

/* ── Progress ─────────────────────────────────────────────────────────── */
progress {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 6px; border: none;
  background: var(--s-sunken); border-radius: var(--r-full); overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--s-sunken); }
progress::-webkit-progress-value { background: var(--brand-mark); border-radius: var(--r-full); }
progress::-moz-progress-bar { background: var(--brand-mark); }


/* ═══ 3. TYPOGRAFIE-PRIMITIVE ═══════════════════════════════════════════════
   Ersetzt 22 Familien mit 31 Regeln und 14 verschiedenen letter-spacings.
   ═════════════════════════════════════════════════════════════════════════ */

/* Der einzige erlaubte Uppercase-Stil. Von 32 uppercase-Deklarationen
   überleben genau drei Rollen: Tabellenköpfe, Navigations-/Settings-
   Gruppenlabels, Fieldset-Legenden.                                        */
.caption {
  font-size: var(--fs-1); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--t-3); line-height: var(--lh-none);
}
.sec-title {
  font-size: var(--fs-4); font-weight: var(--fw-semi); color: var(--t-1);
  letter-spacing: var(--ls-0);
  display: flex; align-items: center; gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.sec-title > .ic { color: var(--t-3); }
.view-title { font-size: var(--fs-5); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); }

/* Tabellenziffern. Auf jeden Betrag, Prozentwert, Zähler und Datumswert.
   Mono bleibt IBAN/BIC, technischen IDs, DATEV-Previews und <pre>.         */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: 0; }
.mono { font-family: var(--font-mono); font-size: var(--fs-2); }

.t-1 { color: var(--t-1); }  .t-2 { color: var(--t-2); }
.t-3 { color: var(--t-3); }  .muted { color: var(--t-3); }
.text-ok { color: var(--ok-ink); }  .text-wa { color: var(--wa-ink); }
.text-da { color: var(--da-ink); }  .text-in { color: var(--in-ink); }
.text-brand { color: var(--brand-mark); }

.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Metazeilen ────────────────────────────────────────────────────────────
   Nebentext unter einem Titel: 11px in gedämpfter Farbe. Vorher standen die
   folgenden 15 Regeln einzeln in components/core/ui/drag verteilt, mit
   9 · 10 · 10,5px — durch die Skalen-Normierung wurden sie wortgleich, und
   die Ratsche hat sie als Dubletten gemeldet. Die Selektoren bleiben, damit
   keine Aufrufstelle angefasst werden muss; sie entfallen mit ihr.
   Neuer Code nimmt .caption (mit Versalien) oder .fs-1.muted (ohne).        */
.tool-desc, .tool-subtitle, .uep-form-row label, .tool-stat-lbl,
.kor-row-range, .login-divider span, .settings-toggle-desc,
.hilfe-shortcut-desc, .liq-sidebar-sub {
  font-size: var(--fs-1); color: var(--t-3);
}
/* Eine Stufe heller — trägt einen Wert, nicht nur eine Beschreibung. */
.zahl-kpi-lbl, .uep-suggest-item small, .sidebar-count-bar span,
.sidebar-item-meta-sub, .demo-button-sub, .liq-filter-label {
  font-size: var(--fs-1); color: var(--t-2);
}


/* ═══ 4. CARD ═══════════════════════════════════════════════════════════════
   Ersetzt 79 Regeln in 42 Familien mit 15 Radien und 33 Paddings.
   Im Dark-Theme ohne Drop-Shadow — Flächenstufe + Linie + Innenkante.
   ═════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--s-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-16);
  box-shadow: var(--sh-1), var(--line-inset);
}
.card-flush { padding: 0; overflow: hidden; }
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-12); margin-bottom: var(--sp-12);
}
.card-t { font-size: var(--fs-4); font-weight: var(--fw-semi); color: var(--t-1); }
.card-ft {
  margin-top: var(--sp-16); padding-top: var(--sp-12);
  border-top: var(--bw) solid var(--line);
  display: flex; gap: var(--sp-8); justify-content: flex-end;
}

/* KPI — eine Implementierung statt fünf (Werte waren 14/20/22/24/26px). */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-12); }
.kpi {
  background: var(--s-raised); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); padding: var(--sp-16);
  box-shadow: var(--sh-1), var(--line-inset);
}
.kpi-v {
  font-size: var(--fs-7); font-weight: var(--fw-bold); color: var(--t-1);
  line-height: var(--lh-tight); letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.kpi-l { font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--t-2); margin-top: var(--sp-6); }
.kpi-center { text-align: center; }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-s { font-size: var(--fs-1); color: var(--t-3); margin-top: var(--sp-4); }

/* KPI-Streifen im Detail-Kopf (ersetzt hero-kpis) */
.kpi-strip {
  display: flex; background: var(--s-raised);
  border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line);
}
.kpi-strip > div { flex: 1; padding: 10px var(--sp-16); border-right: var(--bw) solid var(--line); min-width: 0; }
.kpi-strip > div:last-child { border-right: 0; }
.kpi-strip .v { font-size: var(--fs-4); font-weight: var(--fw-semi); color: var(--t-1); font-variant-numeric: tabular-nums; }
.kpi-strip .l { font-size: var(--fs-2); color: var(--t-3); margin-top: 2px; }


/* ═══ 5. BUTTON ═════════════════════════════════════════════════════════════
   Eine Leiter statt 93 Regeln in 38 Familien mit 50 verschiedenen Paddings.
   Drei Größen, fünf Varianten, vollständige Zustandsmatrix — inklusive
   :active, das im ganzen Projekt bisher nicht existierte. :focus-visible
   kommt aus Abschnitt 1 und gilt für jeden Button automatisch.

   Die Altnamen stehen als Aliase in denselben Selektoren statt in eigenen
   Regeln — dasselbe Muster wie in badge.css. Sie entfallen mit den
   Aufrufstellen. Vorher gab es fünf verschiedene Primary-Buttons
   (8px 20px · 9px · 8px 18px · 8px 14px · 10px 20px) plus einen bei 34px,
   und .btn-sm war zweimal definiert — die frühere Fassung mit !important,
   sodass die spätere Höhe griff, ihr Padding und ihre Schriftgröße aber
   nicht. Die Kaskade war gebrochen.

   Bewusst NICHT hier: die Segmented-Control-Familie (.filter-btn,
   .sb-tab-btn, .mv-toggle-btn, .type-select-btn, .uep-type-btn, .uep-pl-btn).
   Die tragen einen Auswahlzustand und sind ein eigenes Bauteil, kein
   Aktionsbutton. Ebenso außen vor: .login-btn (Phase 9), die gestrichelten
   Upload-Flächen (gehören zu .drop) und .timeline-delete-btn, das per
   opacity:0 erst beim Zeilen-Hover erscheint.
   ═════════════════════════════════════════════════════════════════════════ */
.btn,
/* Sekundär/neutral — die Grundstufe trägt sie alle. */
.btn-secondary, .kf-btn-cancel, .modal-btn, .tool-btn, .ein-btn-secondary,
.btn-cancel, .detail-action-btn, .detail-btn-edit, .hilfe-action-btn,
.sidebar-icon-btn, .tools-back-btn, .abrechnung-btn,
/* Gefüllte Varianten: Farbe kommt unten, Geometrie hier. */
.btn-primary, .kf-btn-save, .hwd-save-btn, .modal-btn-primary,
.ein-btn-primary, .tool-btn-primary, .btn-save, .dok-upload-btn,
.sidebar-new-btn, .hilfe-form-btn, .uep-generate-btn,
.btn-danger, .del-btn-confirm, .ein-btn-danger, .btn-ghost,
/* Icon-Buttons: quadratisch weiter unten. */
.btn-icon, .detail-action-btn-icon, .detail-btn-delete, .dok-action-btn,
.hilfe-topbar-btn, .ein-btn-icon,
.hw-new-btn, .kor-add-btn, .hilfe-back-btn, .login-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-6); flex: none;
  height: 32px; padding: 0 var(--sp-12);
  font-family: inherit; font-size: var(--fs-3); font-weight: var(--fw-semi);
  line-height: var(--lh-none); white-space: nowrap;
  color: var(--t-1); background: var(--s-raised);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-2);
  cursor: pointer; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover, .btn-secondary:hover, .kf-btn-cancel:hover, .modal-btn:hover,
.tool-btn:hover, .ein-btn-secondary:hover, .btn-cancel:hover,
.detail-action-btn:hover, .detail-btn-edit:hover, .hilfe-action-btn:hover,
.sidebar-icon-btn:hover, .tools-back-btn:hover, .abrechnung-btn:hover:not(:disabled),
.dok-action-btn:hover, .hilfe-topbar-btn:hover, .hilfe-back-btn:hover,
.hw-new-btn:hover, .kor-add-btn:hover {
  background: var(--s-hover); border-color: var(--t-4);
}
.btn:active { background: var(--s-selected); }
.btn:disabled, .btn[aria-disabled="true"],
.btn-primary:disabled, .kf-btn-save:disabled, .hwd-save-btn:disabled,
.dok-upload-btn:disabled, .del-btn-confirm:disabled, .uep-generate-btn:disabled {
  color: var(--t-4); background: var(--s-raised); border-color: var(--line);
  cursor: not-allowed;
}

.btn-lg, .login-btn { height: 38px; padding: 0 var(--sp-16); font-size: var(--fs-4); }
.btn-sm, .hw-new-btn, .kor-add-btn, .hilfe-back-btn { height: 26px; padding: 0 var(--sp-8); font-size: var(--fs-2); }
.btn-ico,
.btn-icon, .detail-action-btn-icon, .detail-btn-delete, .dok-action-btn,
.hilfe-topbar-btn, .ein-btn-icon { width: 32px; padding: 0; }
.btn-lg.btn-ico { width: 38px; }
.btn-sm.btn-ico { width: 26px; }
.btn-block { width: 100%; }
/* Der Hilfe-Knopf in der Topbar ist rund — der einzige Rest seiner Altregel. */
.hilfe-topbar-btn { border-radius: var(--r-full); }

.btn-pri,
.btn-primary, .kf-btn-save, .hwd-save-btn, .modal-btn-primary,
.ein-btn-primary, .tool-btn-primary, .btn-save, .dok-upload-btn,
.sidebar-new-btn, .hilfe-form-btn, .uep-generate-btn {
  background: var(--pri-bg); color: var(--pri-fg); border-color: transparent;
}
.btn-pri:hover,
.btn-primary:hover, .kf-btn-save:hover, .hwd-save-btn:hover,
.modal-btn-primary:hover, .ein-btn-primary:hover, .tool-btn-primary:hover,
.btn-save:hover, .dok-upload-btn:hover, .sidebar-new-btn:hover,
.hilfe-form-btn:hover, .uep-generate-btn:hover {
  background: var(--pri-bg-h); border-color: transparent;
}
.btn-pri:active { background: var(--pri-bg-a); }

.btn-da,
.btn-danger, .del-btn-confirm { background: var(--da-fill); color: #fff; border-color: transparent; }
.btn-da:hover,
.btn-danger:hover, .del-btn-confirm:hover { filter: brightness(1.12); }
.btn-da:active { filter: brightness(.94); }

/* Getönt statt gefüllt: destruktiv, aber nicht die Hauptaktion des Dialogs.
   Ersetzt sechs Varianten aus rgba(239,68,68,.08….15)-Literalen. */
.btn-da-soft,
.ein-btn-danger, .detail-action-btn.danger, .btn-icon-danger {
  background: var(--da-tint); color: var(--da-ink); border-color: var(--da-line);
}
.btn-da-soft:hover,
.ein-btn-danger:hover, .detail-action-btn.danger:hover,
.btn-icon-danger:hover, .detail-action-btn-icon.danger:hover,
.detail-btn-delete:hover {
  background: var(--da-tint); color: var(--da-ink); border-color: var(--da-ink);
}

.btn-ok-soft,
.detail-action-btn-success {
  background: var(--ok-tint); color: var(--ok-ink); border-color: var(--ok-line);
}
.btn-ok-soft:hover, .detail-action-btn-success:hover { border-color: var(--ok-ink); }

/* Ghost: für tertiäre Aktionen. Ersetzt die vielen randlosen Textbuttons. */
.btn-gh,
.btn-ghost, .btn-icon, .detail-action-btn-icon, .detail-btn-delete,
.ein-btn-icon {
  background: transparent; border-color: transparent;
  color: var(--t-2); font-weight: var(--fw-medium);
}
.btn-gh:hover,
.btn-ghost:hover, .btn-icon:hover, .detail-action-btn-icon:hover,
.ein-btn-icon:hover { background: var(--s-hover); color: var(--t-1); border-color: transparent; }
.btn-gh:active { background: var(--s-selected); }

/* Der eine gefüllte Marken-CTA. Genau ein Vorkommen: der Login-Button —
   deshalb steht .login-btn hier als Alias, statt die Klasse im Markup zu
   tauschen. Die Restregel in drag.css trägt nur noch Breite und Abstand. */
.btn-brand, .login-btn { background: var(--brand-fill); color: #fff; border-color: transparent; }
.btn-brand:hover, .login-btn:hover { background: var(--brand-fill-h); border-color: transparent; }

/* Textlink im Fließtext — kein Button der Leiter, sondern unterstrichener
   Text. Eine Aufrufstelle (datev.js). */
.btn-text-link {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}
.btn-text-link:hover { color: var(--t-1); }

.btn-group { display: inline-flex; }
/* -1px lässt die Rahmen aneinander liegen statt doppelt zu zeichnen. */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -var(--sp-2); }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }


/* ═══ 6. BADGE ══════════════════════════════════════════════════════════════
   Wohnt in css/badge.css — dort steht die ganze Familie inklusive der
   Alt-Farbnamen als Aliase. Zweimal definieren wäre genau die Dublette,
   die dieser Umbau abbaut.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ 7. LISTENZEILE ════════════════════════════════════════════════════════
   Ersetzt 23 Regeln in 16 Familien. Höhe kommt aus --row-h, damit die
   Dichte-Einstellung greift. Der virtuelle Scroller in kontakte.js muss
   denselben Wert lesen statt `const H = 62`.
   ═════════════════════════════════════════════════════════════════════════ */
.lst { display: flex; flex-direction: column; }
.lst-row {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-12);
  height: var(--row-h); padding: 0 var(--sp-12);
  border-bottom: var(--bw) solid var(--line);
  cursor: pointer; text-align: left;
  transition: background var(--t-fast);
}
.lst-row:last-child { border-bottom: 0; }
.lst-row:hover { background: var(--s-hover); }
.lst-row.sel { background: var(--s-selected); }
/* Die Ortsmarkierung: 2px Akzentkante. Nicht farbiger Text. */
.lst-row.sel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--brand-mark);
}
.lst-row-static { cursor: default; }
.lst-row-static:hover { background: transparent; }

.lst-lead { flex: none; display: flex; align-items: center; }
/* Die 10× wortgleiche `flex:1;min-width:0`-Regel. */
.lst-b, .grow { flex: 1; min-width: 0; }
.lst-t {
  font-size: var(--fs-3); font-weight: var(--fw-semi); color: var(--t-1);
  display: flex; align-items: center; gap: var(--sp-6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lst-s {
  font-size: var(--fs-2); color: var(--t-3); margin-top: var(--sp-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* In der kompakten Dichte hat die Unterzeile keinen Platz. */
[data-density="kompakt"] .lst-s { display: none; }
.lst-meta { flex: none; text-align: right; font-size: var(--fs-2); color: var(--t-2); font-variant-numeric: tabular-nums; }

/* Gruppentrenner in Listen */
.lst-group {
  position: sticky; top: 0; z-index: 1;
  padding: var(--sp-6) var(--sp-12); background: var(--s-bar);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--fs-1); font-weight: var(--fw-medium); color: var(--t-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}


/* ═══ 8. TABELLE ════════════════════════════════════════════════════════════
   Neu — es gab bisher KEIN Tabellensystem, nur ~20 einzeln inline gestylte
   <table>-Elemente.
   ═════════════════════════════════════════════════════════════════════════ */
.tbl-wrap {
  background: var(--s-raised); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); overflow: auto;
  box-shadow: var(--sh-1), var(--line-inset);
}
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  height: 32px; padding: 0 var(--sp-12);
  background: var(--s-bar); color: var(--t-3);
  font-size: var(--fs-1); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  text-align: left; white-space: nowrap;
  border-bottom: var(--bw) solid var(--line-strong);
}
.tbl tbody td {
  height: var(--cell-h); padding: 0 var(--sp-12);
  color: var(--t-1); vertical-align: middle;
  border-bottom: var(--bw) solid var(--line);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--s-hover); }
.tbl tbody tr.sel td { background: var(--s-selected); }
.tbl tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--brand-mark); }
.tbl tbody tr.clickable { cursor: pointer; }
/* Zahlen rechts und mit Tabellenziffern — sonst tanzen die Kommastellen. */
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td.r, .tbl .num { font-variant-numeric: tabular-nums; }
.tbl td .sub { font-size: var(--fs-1); color: var(--t-3); }
.tbl tfoot td {
  height: 34px; padding: 0 var(--sp-12);
  border-top: var(--bw) solid var(--line-strong);
  color: var(--t-2); font-size: var(--fs-2);
}
.tbl tfoot tr:last-child td { color: var(--t-1); font-weight: var(--fw-semi); font-size: var(--fs-3); }
/* Aktionsspalte erscheint erst bei Hover, damit die Zeile ruhig bleibt. */
.tbl td.act { width: 1%; white-space: nowrap; text-align: right; }
.tbl td.act > * { opacity: 0; transition: opacity var(--t-fast); }
.tbl tr:hover td.act > *, .tbl tr:focus-within td.act > * { opacity: 1; }


/* ═══ 9. FORMULAR ═══════════════════════════════════════════════════════════
   kf-* ist mit 1.133 Verwendungen die meistgenutzte Familie der App;
   vf-* (279) ist ihre 1:1-Dublette und entfällt. Hier das Primitiv.
   ═════════════════════════════════════════════════════════════════════════ */
.fld { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fld > label, .fld-label {
  font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--t-2);
  display: flex; align-items: center; gap: var(--sp-4);
}
.fld-req::after { content: '*'; color: var(--da-ink); }
.fld-hint { font-size: var(--fs-1); color: var(--t-3); }
.fld-err {
  font-size: var(--fs-1); color: var(--da-ink);
  display: flex; align-items: center; gap: 4px;
}

.inp {
  width: 100%; height: 32px; padding: 0 var(--sp-10);
  font-family: inherit; font-size: var(--fs-3); color: var(--t-1);
  background: var(--s-input);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-2);
  transition: border-color var(--t-fast);
}
.inp:hover:not(:disabled) { border-color: var(--t-4); }
.inp:disabled, .inp[readonly] { color: var(--t-3); background: var(--s-canvas); cursor: not-allowed; }
.inp.bad, .inp[aria-invalid="true"] { border-color: var(--da-ink); }
.inp-lg { height: 38px; font-size: var(--fs-4); }
.inp-sm { height: 26px; font-size: var(--fs-2); padding: 0 var(--sp-8); }

/* Eingabe mit führendem Icon */
.inp-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.inp-wrap > .ic:first-child {
  position: absolute; left: 9px; color: var(--t-3); pointer-events: none;
}
.inp-wrap > .ic:first-child ~ .inp { padding-left: var(--sp-32); }

/* Formularsektion — ersetzt kf-section und vf-section */
.form-sec {
  background: var(--s-raised); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); padding: var(--sp-16); margin-bottom: var(--sp-16);
  box-shadow: var(--sh-1), var(--line-inset);
}
.form-sec > legend, .form-sec-title {
  font-size: var(--fs-1); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--t-3);
  margin-bottom: var(--sp-12); padding: 0;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-12); }
.form-grid-addr { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-12); }
.form-grid-plz  { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-12); }
.form-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-grid-2, .form-grid-3, .form-grid-addr, .form-grid-plz { grid-template-columns: 1fr; }
}
.form-ft {
  display: flex; gap: var(--sp-8); justify-content: flex-end;
  padding-top: var(--sp-12); border-top: var(--bw) solid var(--line);
}

/* Checkbox/Radio mit Label — die Zeile, die es 51+9 Mal braucht */
.check-row {
  display: flex; align-items: center; gap: var(--sp-8);
  font-size: var(--fs-3); color: var(--t-1); cursor: pointer; min-height: 26px;
}
.check-row input { flex: none; }
.check-row .fld-hint { margin-left: 24px; }

/* Schalter — ersetzt toggle-*, settings-toggle, ein-toggle-row */
.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  width: 34px; height: 20px; border-radius: var(--r-full);
  background: var(--s-selected); border: var(--bw) solid var(--line-strong);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.switch-track::after {
  content: ''; display: block;
  width: 14px; height: 14px; margin: 2px; border-radius: var(--r-full);
  background: var(--t-2);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.switch input:checked + .switch-track { background: var(--brand-mark); border-color: var(--brand-mark); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: #fff; }
.switch input:disabled + .switch-track { opacity: .45; }


/* ═══ 10. AVATAR ════════════════════════════════════════════════════════════
   Ersetzt 8 Familien. Tönung über --cat, damit sie mit den Kategoriepunkten
   zusammenpasst.
   ═════════════════════════════════════════════════════════════════════════ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--s-selected); color: var(--t-2);
  font-size: var(--fs-1); font-weight: var(--fw-semi);
  overflow: hidden; user-select: none;
}
.avatar-sm { width: 24px; height: 24px; font-size: var(--fs-1); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-3); }
.avatar-xl { width: 46px; height: 46px; font-size: var(--fs-4); }
.avatar-sq { border-radius: var(--r-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Eingefärbt: color-mix hält die Tönung automatisch themepassend. */
.avatar-tint {
  background: color-mix(in srgb, var(--cat, var(--t-4)) 18%, var(--s-raised));
  color: var(--cat, var(--t-2));
}


/* ═══ 11. TABS ══════════════════════════════════════════════════════════════
   Ersetzt 8 Familien / ~250 Verwendungen.
   ═════════════════════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 2px; padding: 0 var(--sp-16);
  background: var(--s-bar); border-bottom: var(--bw) solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: var(--sp-6); flex: none;
  height: 36px; padding: 0 var(--sp-10);
  font-family: inherit; font-size: var(--fs-3); font-weight: var(--fw-medium);
  color: var(--t-2); background: none; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--t-1); }
.tab.active { color: var(--t-1); font-weight: var(--fw-semi); border-bottom-color: var(--brand-mark); }
.tab.active .vb-count { color: var(--t-1); }
.tab-sep { width: 1px; align-self: center; height: 16px; background: var(--line); margin: 0 6px; flex: none; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }


/* ═══ 12. OVERLAYS: MODAL · MENÜ · TOOLTIP · TOAST ══════════════════════════
   Overlays bekommen in beiden Themes echte Schatten, weil sie die Ebene
   brechen müssen.
   ═════════════════════════════════════════════════════════════════════════ */
.ov {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-16);
}
[data-theme="light"] .ov { background: rgba(28,25,23,.32); }

.dlg {
  width: 100%; max-width: 520px; max-height: calc(100vh - var(--sp-32));
  display: flex; flex-direction: column;
  background: var(--s-raised); border: var(--bw) solid var(--line);
  border-radius: var(--r-4); box-shadow: var(--sh-3);
  overflow: hidden;
}
.dlg-sm { max-width: 400px; }
.dlg-lg { max-width: 780px; }
.dlg-xl { max-width: 1100px; }
.dlg-hd {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-16); border-bottom: var(--bw) solid var(--line); flex: none;
}
.dlg-t { font-size: var(--fs-5); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); flex: 1; min-width: 0; }
.dlg-body { padding: var(--sp-16); overflow-y: auto; flex: 1; }
.dlg-ft {
  display: flex; gap: var(--sp-8); justify-content: flex-end;
  padding: var(--sp-12) var(--sp-16);
  border-top: var(--bw) solid var(--line); background: var(--s-bar); flex: none;
}

/* Menü — Muster für User-Menü, Kontextmenüs, Dropdowns */
.menu {
  position: absolute; z-index: var(--z-user-menu);
  min-width: 180px; padding: var(--sp-4);
  background: var(--s-overlay); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--sh-2);
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-8); width: 100%;
  height: 30px; padding: 0 var(--sp-8); border-radius: var(--r-1);
  font-family: inherit; font-size: var(--fs-3); color: var(--t-1);
  background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--s-hover); }
.menu-item > .ic { color: var(--t-3); flex: none; }
.menu-item-da { color: var(--da-ink); }
.menu-item-da > .ic { color: var(--da-ink); }
.menu-sep { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.menu-label { padding: var(--sp-6) var(--sp-8) var(--sp-4); font-size: var(--fs-1); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--t-3); }

/* Tooltip — CSS-only, 400ms Verzögerung. Trägt in der Rail den VOLLEN
   Modulnamen, statt ihn auf „Instandh." zu kürzen. */
.tip-host { position: relative; }
.tip {
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-dropdown); pointer-events: none; opacity: 0;
  padding: var(--sp-4) var(--sp-8); border-radius: var(--r-1);
  background: var(--s-overlay); color: var(--t-1);
  border: var(--bw) solid var(--line); box-shadow: var(--sh-2);
  font-size: var(--fs-2); font-weight: var(--fw-medium); white-space: nowrap;
  transition: opacity var(--t-fast);
}
.tip-host:hover > .tip, .tip-host:focus-visible > .tip { opacity: 1; transition-delay: 400ms; }

/* Toast — unterscheidet sich durch Akzentkante UND Icon UND Sekundärzeile,
   nicht nur durch die Rahmenfarbe wie bisher. */
.toast {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: var(--sp-8);
  width: 320px; max-width: calc(100vw - var(--sp-32));
  padding: var(--sp-10) var(--sp-10) var(--sp-10) 0;
  background: var(--s-overlay); border: var(--bw) solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--sh-2);
  font-size: var(--fs-3); color: var(--t-1);
}
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.toast > .ic { margin: 0 0 0 var(--sp-10); flex: none; }
.toast-ok::before { background: var(--ok-fill); } .toast-ok > .ic { color: var(--ok-ink); }
.toast-wa::before { background: var(--wa-fill); } .toast-wa > .ic { color: var(--wa-ink); }
.toast-da::before { background: var(--da-fill); } .toast-da > .ic { color: var(--da-ink); }
.toast-in::before { background: var(--in-fill); } .toast-in > .ic { color: var(--in-ink); }
.toast-t { font-weight: var(--fw-semi); }
.toast-d { font-size: var(--fs-2); color: var(--t-2); margin-top: var(--sp-2); }


/* ═══ 13. ZUSTÄNDE: EMPTY · SKELETON · UPLOAD ═══════════════════════════════ */

/* Empty — 93 Fundstellen über einen Helper. Vorher 6× wörtlich derselbe
   Text mit ausgetauschtem Substantiv und ohne den CTA, den er beschreibt. */
.empty { text-align: center; padding: var(--sp-32) var(--sp-16); }
.empty > .ic { color: var(--t-4); }
.empty-t { font-size: var(--fs-4); font-weight: var(--fw-semi); color: var(--t-1); margin-top: 10px; }
.empty-d { font-size: var(--fs-3); color: var(--t-3); max-width: 38ch; margin: 4px auto var(--sp-16); }
.empty-act { display: flex; gap: var(--sp-8); justify-content: center; }
.empty-da > .ic { color: var(--da-ink); }

/* Skeleton — ersetzt die 66 nackten „Lädt…"-Texte. */
.skel { background: var(--s-selected); border-radius: var(--r-1); }
@media (prefers-reduced-motion: no-preference) {
  .skel {
    background: linear-gradient(90deg, var(--s-selected) 25%, var(--s-overlay) 37%, var(--s-selected) 63%);
    background-size: 400% 100%;
    animation: skel 1.4s ease-in-out infinite;
  }
}
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skel-line { height: 11px; margin-bottom: var(--sp-6); }
.skel-line:nth-child(3n)   { width: 72%; }
.skel-line:nth-child(3n+1) { width: 90%; }
.skel-row { display: flex; align-items: center; gap: var(--sp-12); height: var(--row-h); padding: 0 var(--sp-12); }
.skel-avatar { width: 30px; height: 30px; border-radius: var(--r-full); flex: none; }

/* Upload-Dropzone */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-8); padding: var(--sp-24);
  border: 1px dashed var(--line-strong); border-radius: var(--r-3);
  background: var(--s-input); color: var(--t-2);
  font-size: var(--fs-3); text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.drop:hover, .drop.over { border-color: var(--brand-mark); background: var(--s-hover); }
.drop.over { border-style: solid; }
.drop > .ic { color: var(--t-3); }
.drop-file {
  display: flex; align-items: center; gap: var(--sp-8);
  height: 34px; padding: 0 var(--sp-8);
  border-bottom: var(--bw) solid var(--line); font-size: var(--fs-2);
}
.drop-file:last-child { border-bottom: 0; }


/* ═══ 14. BALKEN & DIAGRAMM-HILFEN ══════════════════════════════════════════ */
.bar-row { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-8); }
.bar-lbl { width: 132px; flex: none; font-size: var(--fs-2); color: var(--t-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-tr { flex: 1; height: 6px; background: var(--s-sunken); border-radius: var(--r-full); overflow: hidden; }
.bar-fl { height: 100%; border-radius: var(--r-full); background: var(--brand-mark); transition: width var(--t-base); }
.bar-fl-ok { background: var(--ok-fill); } .bar-fl-wa { background: var(--wa-fill); }
.bar-fl-da { background: var(--da-fill); }
.bar-v { width: 46px; flex: none; text-align: right; font-size: var(--fs-2);
  font-weight: var(--fw-medium); color: var(--t-1); font-variant-numeric: tabular-nums; }


/* ═══ 15. LAYOUT-UTILITIES ══════════════════════════════════════════════════
   ~40 Regeln, damit neuer Code eine billige Alternative zu Inline-Styles hat.
   Ohne sie wächst die Zahl der 3.900 Inline-Styles zurück.
   ═════════════════════════════════════════════════════════════════════════ */
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.center { justify-content: center; }
.ml-auto { margin-left: auto; }

/* Klassenname = Pixelwert, wie bei den --sp-*-Tokens. Vorher waren es
   Indizes (.gap-1 = 4px, .p-2 = 8px) — dieselbe Falle, die bei den Tokens
   schon beseitigt wurde: man muss die Tabelle kennen, um die Klasse zu
   lesen, und .gap-4 hieß 16px statt 4px. Es gab noch keine Aufrufstelle. */
.gap-4  { gap: var(--sp-4); }   .gap-8  { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }  .gap-16 { gap: var(--sp-16); }
.gap-20 { gap: var(--sp-20); }  .gap-24 { gap: var(--sp-24); }

.p-8  { padding: var(--sp-8); }   .p-12 { padding: var(--sp-12); }
.p-16 { padding: var(--sp-16); }  .p-20 { padding: var(--sp-20); }
.p-24 { padding: var(--sp-24); }

.mb-8  { margin-bottom: var(--sp-8); }   .mb-12 { margin-bottom: var(--sp-12); }
.mb-16 { margin-bottom: var(--sp-16); }  .mb-24 { margin-bottom: var(--sp-24); }

/* Hier bleibt der Index: .fs-3 gehört zu --fs-3, das ist die Skalenstufe
   und kein Pixelwert. */
.fs-1 { font-size: var(--fs-1); } .fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); } .fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); } .fs-6 { font-size: var(--fs-6); } .fs-7 { font-size: var(--fs-7); }
.fw-4 { font-weight: var(--fw-normal); } .fw-5 { font-weight: var(--fw-medium); }
.fw-6 { font-weight: var(--fw-semi); }   .fw-7 { font-weight: var(--fw-bold); }

/* Textfarben stehen schon in Abschnitt 3 (.t-1/.t-2/.t-3/.muted und
   .text-ok/-wa/-da/-in/-brand) — hier nicht wiederholen. Die Ratsche hat
   den zweiten Satz sofort als Dublette gemeldet. */

.sr-only {
  /* -2px, nicht `-var(--sp-2)`: ein Minus vor var() ist ungültiges CSS und
     die Deklaration wurde stillschweigend verworfen. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -2px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ═══ 16. DRUCK ═════════════════════════════════════════════════════════════
   Fehlte bisher komplett. Betrifft Bescheinigungen, NK-Abrechnungen und
   Übergabeprotokolle, die Nutzer aus dem Browser drucken.
   ═════════════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --s-canvas: #fff; --s-content: #fff; --s-raised: #fff; --s-bar: #fff;
    --t-1: #000; --t-2: #333; --t-3: #555;
    --line: #ccc; --line-strong: #999; --line-inset: none;
    --sh-1: none; --sh-2: none; --sh-3: none;
  }
  #nav-rail, #topbar, .tabs, .btn, .toast, .menu, .ov, .tip,
  .mobile-nav, .sb-tb, .empty-act { display: none !important; }
  .card, .kpi, .tbl-wrap { border: 1px solid #ccc; break-inside: avoid; }
  .tbl thead th { position: static; background: #f2f2f2; color: #000; }
  .tbl tbody tr { break-inside: avoid; }
  a[href]::after { content: ''; }
}