/* ══════════════════════════════════════════════════════════════════════════════
   ABNAHME & ÜBERGABE — DIE DESIGNVORGABEN ALS SCHICHT
   ──────────────────────────────────────────────────────────────────────────────
   Verbindlich: docs/ABNAHME_SANIERUNG.md § Designvorgaben (Stand 01.11.2026).
   Gemessen von tests/abnahme_design.cjs (D-01 … D-15) — nicht behauptet.

   WARUM DIESE DATEI UND NICHT handover.css.
   handover.css ist über zwei Jahre gewachsen und beschreibt das ALTE Bild:
   Karten in Karten, Versalien-Abschnitte, eine Schrittleiste als schwebende
   Insel, eine Prüfzeile aus Flex mit `space-between`. Diese Datei beschreibt
   das Gerüst, in dem die Abnahme ab jetzt steht. Was sie ersetzt, ist in
   handover.css GELÖSCHT, nicht überschrieben — sonst stünden zwei Wahrheiten
   übereinander und die nächste Änderung träfe die falsche.

   DIE REGELN, KURZ:
     · Abstände nur aus 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64
     · Schrift nur aus den sechs Stufen (28/600 · 20/600 · 15/600 · 15/400 ·
       13/400 · 12/500) — über --vg-*-size/-weight, nie als Zahl
     · genau zwei Flächenebenen, EIN Scrollkontext, EINE Primäraktion
     · jede Farbe trägt genau eine Bedeutung (--vg-ok/-befund/-sperre/-entfaellt)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · SEITENGERÜST ═══════════════════════════════════════════════════════
   EIN Scrollkontext: die SEITE scrollt. Kein Element dieser Seite bekommt
   `overflow:auto` — Ausnahme ist allein die PDF-Vorschau (§9). Der graue
   Schritt-Container um alles herum ist ersatzlos entfallen; die Fläche unter
   den Karten ist der Seitenhintergrund. */
.abn-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--vg-ebene0);
  /* Platz für den unteren Riegel, damit die letzte Karte nicht darunter liegt. */
  padding-bottom: var(--vg-fuss-h);
  /* DIE BREITE, DIE ZÄHLT, IST DIE VERFÜGBARE — NICHT DIE DES FENSTERS.
     Die Anwendung hat links eine eigene Navigation von rund 272 px. Auf einem
     1440-px-Bildschirm bleiben also 1136 px, und dort passen 240 + 880 + 280
     nicht nebeneinander. Mit einer Fensterabfrage (`@media`) hätte die rechte
     Spalte trotzdem gestanden und den Inhalt auf 536 px gequetscht — jedes
     Prüfpunktlabel war abgeschnitten. Die Abfragen unten gelten deshalb für
     DIESEN Kasten. */
  container-type: inline-size;
  container-name: abn;
}

/* Spalten: Navigation 240 fest · Inhalt max. 880 · rechte Spalte 280.
   EINE linke Kante für Krume, Titel, Navigation und Inhalt — sie entsteht
   dadurch, dass Kopf, Raster und Fuß dasselbe Elternelement und keinen
   eigenen Innenabstand haben. */
.abn-raster {
  display: grid;
  grid-template-columns: var(--vg-nav-w) minmax(0, var(--vg-inhalt-max)) var(--vg-rechts-w);
  gap: var(--space-5);
  align-items: start;
}
@container abn (max-width: 1439px) {
  /* Reicht die Breite nicht für 240 + 880 + 280, fällt die rechte Spalte weg
     und der Inhalt bekommt seine vollen 880 px. Ihr Inhalt ist nicht verloren:
     er steht dann UNTER dem Schrittinhalt (.abn-rechts--unten) — nicht
     darüber, denn sonst schiebt die Zusammenfassung die Arbeit nach unten. */
  .abn-raster { grid-template-columns: var(--vg-nav-w) minmax(0, var(--vg-inhalt-max)); }
  .abn-rechts { display: none; }
}

/* ══ 2 · KOPFBEREICH — aus drei Zeilen werden zwei ════════════════════════
   Zeile 1: Krume. Zeile 2: Titel + Aktionen, darunter die Metazeile mit
   Statuspille und Protokollart. Die separate Chip-Zeile ist entfallen. */
.abn-kopf { display: flex; flex-direction: column; gap: var(--space-2); }
.abn-krume {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); line-height: var(--lh-normal);
}
.abn-krume-sep { color: var(--gray-400); }
.abn-krume button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--gray-500); text-decoration: underline; text-underline-offset: 2px;
}
.abn-krume button:hover { color: var(--gray-900); }
.abn-krume-akt { color: var(--gray-900); }

.abn-kopf-zeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
/* `flex: 1 1 320px` ist der Unterschied zwischen zwei und drei Kopfzeilen: ohne
   eine Basis nimmt der Textblock seine MIN-CONTENT-Breite aus der längsten
   Metazeile, und die Aktionen rutschen in eine eigene Zeile. Gemessen: 147 px
   statt 92 px Kopfhöhe. */
.abn-kopf-tx { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.abn-titel {
  margin: 0;
  font-size: var(--vg-titel-size); font-weight: var(--vg-titel-weight);
  line-height: var(--lh-tight); color: var(--gray-900); overflow-wrap: anywhere;
}
.abn-meta {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-2);
  min-width: 0; overflow: hidden;
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
}
.abn-meta-fakten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abn-meta-sep { color: var(--gray-400); }
.abn-kopf-akt { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Der Speicherzustand (ALL-06). Er steht im Kopf, weil die Formulare keinen
   Speichern-Knopf mehr haben. Drei Zustände, kein vierter. */
.abn-speicher {
  font-size: var(--vg-marke-size); font-weight: var(--vg-marke-weight);
  color: var(--gray-500); white-space: nowrap;
}
.abn-speicher[data-state="laeuft"] { color: var(--gray-700); }
.abn-speicher[data-state="fehler"] { color: var(--vg-befund); }

/* ══ 3 · NAVIGATIONSSPALTE ════════════════════════════════════════════════
   Eine SPALTE, keine Karte: kein eigener Hintergrund, kein Radius, KEIN
   eigener Scrollbalken. Sie klebt unter der Kopfzeile. Vier Phasen sichtbar,
   die Schritte nur in der aktiven Phase. Keine Nummernkreise, keine Tooltips. */
.abn-nav {
  position: sticky; top: var(--space-5); align-self: start;
  display: flex; flex-direction: column; gap: var(--space-1);
  background: none; border: 0; border-radius: 0; padding: 0;
  /* ausdrücklich kein overflow: das war der zweite Scrollbalken (D-02) */
}
.abn-nav-phase { display: flex; flex-direction: column; }
.abn-nav-phase + .abn-nav-phase { margin-top: var(--space-3); }
.abn-nav-ph {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  width: 100%; min-height: var(--vg-touch-min);
  background: none; border: 0; border-bottom: 1px solid var(--vg-linie);
  padding: 0 0 var(--space-1); cursor: pointer; text-align: left;
  font-size: var(--vg-sect-size); font-weight: var(--vg-sect-weight);
  color: var(--gray-700); line-height: var(--lh-snug);
}
.abn-nav-ph:hover { color: var(--gray-900); }
.abn-nav-phase.is-active .abn-nav-ph { color: var(--gray-900); }
.abn-nav-ph-z {
  margin-left: auto; font-size: var(--vg-marke-size); font-weight: var(--vg-marke-weight);
  color: var(--gray-500); font-variant-numeric: tabular-nums;
}
.abn-nav-steps { display: flex; flex-direction: column; padding-top: var(--space-1); }
.abn-nav-i {
  /* `justify-content: flex-start` steht hier ausdrücklich: ein <button> bekommt
     vom Browser die Mitte, und dann steht der Schrittname zentriert in einer
     240-px-Spalte — gesehen am 01.11.2026. */
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  width: 100%; min-height: var(--vg-touch-min);
  background: none; border: 0; border-left: 3px solid transparent;
  padding: 0 var(--space-2) 0 var(--space-3); cursor: pointer; text-align: left;
  font-size: var(--vg-text-size); font-weight: var(--vg-text-weight);
  color: var(--gray-700); line-height: var(--lh-snug);
}
.abn-nav-i:hover { color: var(--gray-900); background: var(--gray-50); }
/* Der aktive Schritt: 3 px Balken links und fetter Text. KEIN gefüllter
   grüner Kreis — Grün gehört dem Zustand, nicht dem Fortschritt. */
.abn-nav-i.is-active {
  border-left-color: var(--gray-900);
  color: var(--gray-900); font-weight: var(--vg-sect-weight);
}
/* Statuspunkt je Eintrag: offen / in Arbeit / erledigt / Prüfbedarf. */
.abn-nav-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--vg-offen-rand); box-sizing: border-box;
}
.abn-nav-dot.is-done { background: var(--vg-ok); border-color: var(--vg-ok); }
.abn-nav-dot.is-attn { background: var(--vg-sperre); border-color: var(--vg-sperre); }
.abn-nav-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abn-nav-n {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--vg-marke-size); font-weight: var(--vg-marke-weight);
  color: var(--vg-sperre); font-variant-numeric: tabular-nums;
}
/* Ein erledigter Schritt bekommt einen grauen Haken, keine grüne Fläche. */
.abn-nav-ok { margin-left: auto; flex-shrink: 0; color: var(--gray-400); font-size: var(--vg-marke-size); }

/* ══ 4 · INHALT UND KARTE ═════════════════════════════════════════════════
   Ebene 1 ist die Karte: weiß, 1 px Rand, Radius 10, KEIN Schatten.
   Eine dritte Ebene gibt es nicht — Einträge trennt eine Haarlinie. */
.abn-inhalt { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.abn-schritt {
  margin: 0;
  font-size: var(--vg-head-size); font-weight: var(--vg-head-weight);
  line-height: var(--lh-tight); color: var(--gray-900);
}
.abn-schritt-zeile { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.abn-schritt-prog {
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); font-variant-numeric: tabular-nums;
}
.abn-karten { display: flex; flex-direction: column; gap: var(--space-5); }
.abn-karte {
  background: var(--vg-ebene1);
  border: 1px solid var(--vg-karte-rand);
  border-radius: var(--vg-karte-radius);
  padding: var(--vg-karte-pad);
  box-shadow: none;
}
.abn-karte-h {
  margin: 0 0 var(--space-3);
  font-size: var(--vg-sect-size); font-weight: var(--vg-sect-weight);
  line-height: var(--lh-snug); color: var(--gray-900);
  /* Keine Versalien. „ALLGEMEINER ZUSTAND" war 11 px in Versalien aus einer
     anderen Entwurfsgeneration. */
  text-transform: none; letter-spacing: normal;
}
.abn-karte-hz { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Eine Karte, deren Inhalt eine Liste ist, trägt keinen Innenabstand an den
   Seiten — die Zeilen gehen bis an die Kante und ihre Trennlinien auch. */
.abn-karte--liste { padding: var(--space-20) 0 0; }
.abn-karte--liste > .abn-karte-h,
.abn-karte--liste > .abn-karte-hz { padding: 0 var(--space-20); }

/* ══ 5 · DIE PRÜFZEILE ════════════════════════════════════════════════════
   Das meistberührte Element. RASTER, nicht Flex mit space-between:
     Spalte 1  Statusbalken 3 px, volle Zeilenhöhe
     Spalte 2  Label, fit-content, höchstens 420 px — es wächst nicht weiter
     Spalte 3  Aktionen DIREKT dahinter
   `fit-content(420px)` ist der Kern: die Spalte ist so breit wie ihr Text
   (höchstens 420), nicht so breit wie der Platz. Vorher stand das Label bei
   x = 349 und der erste Knopf bei x = 840 — 490 px Leerraum, vierzehnmal je
   Raum. Die Restbreite bleibt jetzt rechts außen leer: Leerraum gehört an
   den Rand, nicht in die Mitte. */
.abn-liste { display: flex; flex-direction: column; }
.abn-zeile {
  display: grid;
  /* `fit-content(420px)` MUSS allein stehen. In `minmax(0, fit-content(420px))`
     ist es ungültig — der Browser verwirft dann die GANZE Angabe, das Raster
     fällt auf eine Spalte zurück und Label und Aktionen stehen untereinander.
     Genau das war am 01.11.2026 zu sehen, und die erste Fassung der Messung
     hielt es für erfüllt, weil sie den senkrechten Abstand mit 0 px maß.
     Seitdem meldet der Wächter die ACHSE mit (tests/abnahme_design.cjs §E). */
  grid-template-columns: 3px fit-content(420px) auto;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--vg-linie);
}
.abn-liste > .abn-zeile:last-child { border-bottom: 0; }
.abn-zeile-bar { align-self: stretch; width: 3px; background: transparent; }
.abn-zeile-bar.is-ok      { background: var(--vg-ok); }
.abn-zeile-bar.is-befund  { background: var(--vg-befund); }
.abn-zeile-bar.is-sperre  { background: var(--vg-sperre); }
.abn-zeile-bar.is-entfaellt { background: var(--vg-entfaellt); }
.abn-zeile-lbl {
  /* Die Ränder sind MARGIN, nicht PADDING: so endet das Kästchen des Labels am
     Text und der gemessene Abstand zur ersten Aktion ist der WAHRE Abstand.
     Der Abstand NACH RECHTS liegt bewusst an der Aktionsspalte (unten) — dort
     ist er EIN Wert, den der Wächter misst, und nicht die Summe aus zwei. */
  margin: 0 0 0 var(--space-3);
  min-width: 0;
  font-size: var(--vg-text-size); font-weight: var(--vg-text-weight);
  color: var(--gray-900); line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* D-03: HÖCHSTENS 24 px von hier bis zum Labelende, auf jeder Fensterbreite.
   16 px ist der gewählte Wert — er ist aus der Skala, er trennt sichtbar, und
   er lässt 8 px Luft bis zur Grenze. Vorher waren es rund 490. */
.abn-zeile-akt { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-4); }
/* Ein gesetzter Status färbt den Balken und die gewählte Fläche — NICHT die
   ganze Zeile. Vierzehn grüne Streifen untereinander sind unlesbar. */
.abn-zeile { background: var(--vg-ebene1); }

/* Die zwei sichtbaren Flächen: i.O. und Feststellung. */
.abn-wahl {
  min-width: 88px; min-height: var(--vg-btn-h-kompakt);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-3);
  background: var(--color-surface); border: 1px solid var(--vg-offen-rand);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--vg-sek-size); font-weight: var(--vg-marke-weight);
  color: var(--gray-700); white-space: nowrap;
}
.abn-wahl:hover { background: var(--gray-50); }
.abn-wahl:disabled { cursor: default; opacity: .65; }
.abn-wahl.is-on.is-ok {
  background: color-mix(in srgb, var(--vg-ok) var(--vg-pille-flaeche), transparent);
  border-color: color-mix(in srgb, var(--vg-ok) var(--vg-pille-rand), transparent);
  color: var(--vg-ok); font-weight: var(--vg-sect-weight);
}
.abn-wahl.is-on.is-befund {
  background: color-mix(in srgb, var(--vg-befund) var(--vg-pille-flaeche), transparent);
  border-color: color-mix(in srgb, var(--vg-befund) var(--vg-pille-rand), transparent);
  color: var(--vg-befund); font-weight: var(--vg-sect-weight);
}
/* Überlauf (die drei seltenen Status) und die Symbolknöpfe: 36 × 36. */
.abn-ikon {
  width: var(--vg-btn-h-kompakt); height: var(--vg-btn-h-kompakt);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--vg-offen-rand);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--vg-sek-size); color: var(--gray-600); line-height: 1;
}
.abn-ikon:hover { background: var(--gray-50); color: var(--gray-900); }
.abn-ikon:disabled { cursor: default; opacity: .65; }
.abn-ikon.is-on.is-sperre { background: color-mix(in srgb, var(--vg-sperre) var(--vg-pille-flaeche), transparent); color: var(--vg-sperre); border-color: color-mix(in srgb, var(--vg-sperre) var(--vg-pille-rand), transparent); }
.abn-ikon.is-on.is-entfaellt { background: color-mix(in srgb, var(--vg-entfaellt) var(--vg-pille-flaeche), transparent); color: var(--vg-entfaellt); border-color: color-mix(in srgb, var(--vg-entfaellt) var(--vg-pille-rand), transparent); }
.abn-ikon.is-on.is-ok { background: color-mix(in srgb, var(--vg-ok) var(--vg-pille-flaeche), transparent); color: var(--vg-ok); border-color: color-mix(in srgb, var(--vg-ok) var(--vg-pille-rand), transparent); }
.abn-ikon.is-on.is-befund { background: color-mix(in srgb, var(--vg-befund) var(--vg-pille-flaeche), transparent); color: var(--vg-befund); border-color: color-mix(in srgb, var(--vg-befund) var(--vg-pille-rand), transparent); }

/* Das Überlaufmenü — dieselbe Ebene wie die Zeile, kein drittes Kästchen. */
.abn-ueber { position: relative; display: inline-flex; }
.abn-ueber-liste {
  position: absolute; z-index: 40; top: calc(100% + var(--space-1)); right: 0;
  min-width: 200px; display: none; flex-direction: column;
  background: var(--vg-ebene1); border: 1px solid var(--vg-karte-rand);
  border-radius: var(--vg-karte-radius); padding: var(--space-1) 0;
}
.abn-ueber.is-open .abn-ueber-liste { display: flex; }
.abn-ueber-liste button {
  min-height: var(--vg-touch-min); display: flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; padding: 0 var(--space-3); cursor: pointer; text-align: left;
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight); color: var(--gray-700);
}
.abn-ueber-liste button:hover { background: var(--gray-50); color: var(--gray-900); }
.abn-ueber-liste button.is-on { font-weight: var(--vg-sect-weight); color: var(--gray-900); }

/* Die aufgeklappte Feststellung: sie ERSETZT die Zeile nicht, sie erweitert
   sie nach unten. */
.abn-zeile-auf {
  border-bottom: 1px solid var(--vg-linie);
  padding: var(--space-3) var(--space-3) var(--space-4) calc(3px + var(--space-3));
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--vg-ebene1);
}
.abn-zeile-auf-reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

/* Gruppenüberschrift: 15/600, normale Schreibweise, sticky beim Scrollen,
   rechts „Alle i.O." als TERTIÄRER Knopf (nur Text, kein Rand). */
.abn-gruppe { display: flex; flex-direction: column; }
.abn-gruppe + .abn-gruppe { margin-top: var(--space-5); }
.abn-gruppe-h {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--vg-touch-min);
  padding: 0 var(--space-20) var(--space-2);
  background: var(--vg-ebene1); border-bottom: 1px solid var(--vg-karte-rand);
  font-size: var(--vg-sect-size); font-weight: var(--vg-sect-weight);
  color: var(--gray-900); text-transform: none; letter-spacing: normal;
}
.abn-liste { padding: 0 var(--space-20); }
.abn-gruppe .abn-liste { padding: 0 var(--space-20); }

/* ══ 6 · TASTATUR ═════════════════════════════════════════════════════════
   J/K bewegen, 1 = i.O., 2 = Feststellung, F = Kamera. Die aktive Zeile hat
   einen SICHTBAREN Rahmen, nicht nur den Browserstandard. */
.abn-zeile.is-cursor { outline: 2px solid var(--vg-prim); outline-offset: -2px; }
.abn-zeile-akt :focus-visible,
.abn-nav-i:focus-visible,
.abn-ueber-liste button:focus-visible { outline: 2px solid var(--vg-prim); outline-offset: 1px; }

/* ══ 7 · RECHTE SPALTE ════════════════════════════════════════════════════
   Fortschritt, offene Punkte mit Sprungzielen, die nächste Aktion. Das ist
   der Raum, der vorher ungenutzt in der MITTE lag. */
.abn-rechts { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-5); }
.abn-rechts--unten { display: none; }
@container abn (max-width: 1439px) {
  .abn-rechts--unten { display: flex; flex-direction: column; gap: var(--space-5); }
}
.abn-fort { display: flex; flex-direction: column; gap: var(--space-2); }
.abn-fort-z {
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-700); font-variant-numeric: tabular-nums;
}
.abn-sprung { display: flex; flex-direction: column; }
.abn-sprung button {
  /* `justify-content: flex-start` ausdrücklich: ein <button> zentriert seinen
     Inhalt von sich aus, und dann steht das Sprungziel mitten in der Spalte. */
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  min-height: var(--vg-touch-min); width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--vg-linie);
  padding: var(--space-1) 0; cursor: pointer; text-align: left;
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight); color: var(--gray-700);
}
.abn-sprung button:last-child { border-bottom: 0; }
.abn-sprung button:hover { color: var(--gray-900); }

/* ══ 8 · FUSSBEREICH ══════════════════════════════════════════════════════
   Am unteren Rand, nicht mitscrollend. 64 px, weiß, 1 px Linie oben, kein
   Radius. Links der Fortschritt in Worten, rechts Zurück/Weiter.
   „Zur Protokollliste" ist in die Krume gewandert. */
.abn-fuss {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--vg-fuss-h); margin-top: auto;
  /* KEIN Innenabstand: der Fortschritt links steht auf derselben Kante wie
     Titel und Navigation, „Zurück/Weiter" rechts auf derselben wie die
     Kopfaktionen. Ein Riegel mit eigenem Einzug wäre die fünfte Kante. */
  padding: 0;
  background: var(--vg-ebene1); border-top: 1px solid var(--vg-karte-rand);
  border-radius: 0;
}
.abn-fuss-tx {
  min-width: 0; font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); font-variant-numeric: tabular-nums;
}
.abn-fuss-akt { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ══ 9 · VORSCHAU ═════════════════════════════════════════════════════════
   Das PDF füllt mindestens 70 % der Fensterhöhe. EIN Scrollrahmen — der
   Dokumentkasten; er ist die eine erlaubte Ausnahme von D-02. Darüber genau
   eine Primäraktion. */
.abn-vorschau { display: flex; flex-direction: column; gap: var(--space-3); }
.abn-vorschau-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.abn-vorschau-doc {
  min-height: 70vh; max-height: 78vh; overflow-y: auto;
  border: 1px solid var(--vg-karte-rand); border-radius: var(--vg-karte-radius);
  background: var(--gray-100);
  -webkit-overflow-scrolling: touch;
}

/* ══ 10 · DIE EINE STATUSPILLE ════════════════════════════════════════════
   12/500, Innenabstand 8/4, Radius 6, Fläche in 12 % Deckkraft, Text in
   Vollfarbe. Kein Haken im Text, kein grüner Fließtext, keine zweite Variante. */
/* Der Rand gehört zur Pille: die 12-%-Fläche allein erreicht keine 3:1, und
   „kaum vom Weiß zu unterscheiden" war genau der Befund. Gemessen wird in
   tests/abnahme_design.cjs §D-10, dass FLÄCHE ODER RAND die 3:1 trägt. */
.vg-pille {
  display: inline-flex; align-items: center;
  padding: var(--vg-pille-pad-y) var(--vg-pille-pad-x);
  border: 1px solid var(--vg-offen-rand); border-radius: var(--vg-pille-radius);
  font-size: var(--vg-marke-size); font-weight: var(--vg-marke-weight);
  line-height: var(--lh-snug); white-space: nowrap;
  background: var(--gray-100); color: var(--gray-700);
}
.vg-pille--ok        { background: color-mix(in srgb, var(--vg-ok) var(--vg-pille-flaeche), transparent);        border-color: color-mix(in srgb, var(--vg-ok) var(--vg-pille-rand), transparent);        color: var(--vg-ok); }
.vg-pille--befund    { background: color-mix(in srgb, var(--vg-befund) var(--vg-pille-flaeche), transparent);    border-color: color-mix(in srgb, var(--vg-befund) var(--vg-pille-rand), transparent);    color: var(--vg-befund); }
.vg-pille--sperre    { background: color-mix(in srgb, var(--vg-sperre) var(--vg-pille-flaeche), transparent);    border-color: color-mix(in srgb, var(--vg-sperre) var(--vg-pille-rand), transparent);    color: var(--vg-sperre); }
.vg-pille--entfaellt { background: color-mix(in srgb, var(--vg-entfaellt) var(--vg-pille-flaeche), transparent); border-color: color-mix(in srgb, var(--vg-entfaellt) var(--vg-pille-rand), transparent); color: var(--vg-entfaellt); }
.vg-pille--offen     { background: var(--color-surface); border-color: var(--vg-offen-rand); color: var(--gray-700); }

/* ══ 11 · KNÖPFE ══════════════════════════════════════════════════════════
   Höhe 36 oder 40, nichts dazwischen. Primär genau einmal je Bildschirm.
   Zerstörend ist roter TEXT, kein roter Knopf — und steht nie neben der
   Primäraktion (das regelt die Reihenfolge im Markup, nicht das CSS). */
.abn-page .btn-primary,
.abn-page .btn-secondary,
.abn-page .btn-ghost,
.abn-page .btn-danger-text { min-height: var(--vg-btn-h); font-size: var(--vg-sek-size); }
.abn-page .btn-sm { min-height: var(--vg-btn-h-kompakt); }
.abn-tert {
  min-height: var(--vg-btn-h-kompakt); padding: 0 var(--space-2);
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--vg-sek-size); font-weight: var(--vg-marke-weight); color: var(--vg-prim);
}
.abn-tert:hover { background: var(--gray-50); }
.abn-weg {
  min-height: var(--vg-btn-h-kompakt); padding: 0 var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-size: var(--vg-sek-size); font-weight: var(--vg-marke-weight); color: var(--vg-befund);
}
.abn-weg:hover { text-decoration: underline; }

/* ══ 12 · FORMULARE ═══════════════════════════════════════════════════════
   Feldhöhe 40, Radius 8, 1 px Rand; im Fokus 2 px Rand in der Akzentfarbe,
   kein Schatten, keine Größenänderung. Label ÜBER dem Feld, 13/400, 4 px
   Abstand. Kein Speichern-Knopf (ALL-06) — der Zustand steht im Kopf. */
.abn-feld { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.abn-feld-l { font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight); color: var(--gray-500); }
.abn-page .form-input,
.abn-page .form-select,
.abn-page .abn-input {
  min-height: var(--vg-btn-h); border-radius: var(--radius-md);
  border: 1px solid var(--vg-offen-rand); background: var(--color-surface);
  font-size: var(--vg-text-size); color: var(--gray-900); box-shadow: none;
}
.abn-page .form-input:focus,
.abn-page .form-select:focus,
.abn-page .abn-input:focus {
  outline: none; border-width: 2px; border-color: var(--vg-prim); box-shadow: none;
}
.abn-page textarea.form-input { min-height: calc(var(--vg-btn-h) * 2); }
/* Zwei Felder nebeneinander NUR, wenn sie inhaltlich ein Paar sind. */
.abn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 899px) { .abn-paar { grid-template-columns: 1fr; } }
.abn-pflichtnote { font-size: var(--vg-sek-size); color: var(--gray-500); margin-top: var(--space-3); }

/* ══ 13 · LEERE ZUSTÄNDE UND HINWEISE ═════════════════════════════════════
   Eine Zeile sekundärer Text, linksbündig, KEIN Kasten, keine Zentrierung.
   Nie mehr als einer je Bildschirm sichtbar. Ein Hinweis, der eine Bedingung
   nennt, ist kein Hinweis, sondern eine Aktion — deshalb steht neben dem
   Satz ein Knopf und keine Prosa. */
.abn-leer {
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); text-align: left;
  background: none; border: 0; border-radius: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  min-height: var(--vg-touch-min);
}
.abn-satz {
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); line-height: var(--lh-normal); max-width: 75ch;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}

/* ══ 14 · ZAHLEN ══════════════════════════════════════════════════════════
   Tabellenziffern in jeder Liste, jeder Tabelle und jedem Zählerfeld. Ohne
   das springen Mengen und Zählerstände beim Scrollen. */
.abn-page table,
.abn-page input[type="number"],
.abn-page .abn-zahl,
.abn-page .abn-liste,
.abn-page .abn-meta { font-variant-numeric: tabular-nums; }

/* ══ 15 · DIE LEGENDE (D-09) ══════════════════════════════════════════════
   Jede Statusfarbe hat genau eine Bedeutung, und die Legende, die das sagt,
   ist in der Oberfläche erreichbar — eine Zeile über der Prüfliste, keine
   Karte. Sie trägt dieselbe EINE Pille wie jede andere Statusanzeige. */
.abn-legende { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.abn-leg-i {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight); color: var(--gray-500);
}
/* Legende und der Weg aufs Gerät stehen NEBENEINANDER. Ohne `flex: 1 1 0`
   nimmt die Legende ihre volle Wunschbreite und schiebt den Verweis in eine
   dritte Zeile — gemessen 104 px statt 52, und das sind zwei Prüfzeilen
   weniger im Sichtfenster (abnahme_s1_pfade §O). */
.abn-legende-zeile {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.abn-legende-zeile > .abn-legende { flex: 1 1 0; min-width: 0; }
.abn-legende-zeile > .abn-tert { flex: 0 0 auto; }

/* ══ 16 · ALTKLASSEN GLATTZIEHEN ══════════════════════════════════════════
   handover.css ist zwei Jahre alt und beschreibt an rund dreißig Stellen
   Kästen, die es nach den Designvorgaben nicht mehr gibt: grau hinterlegte
   Hinweisboxen, gestrichelte Rahmen, zentrierte Leerzustände. Die Regeln dort
   zu löschen hätte bedeutet, dreißig Aufrufstellen gleichzeitig umzuschreiben
   — und jede einzelne ist eine Gelegenheit, einen Satz zu verlieren. Statt
   dessen wird hier die FLÄCHE abgeräumt und der Text bleibt, wo er ist.
   Was dabei zu lang war, ist in handover.js tatsächlich gekürzt worden. */
.abn-page .ho-empty-inline,
.abn-page .ho-statement,
.abn-page .ho-sig-note,
.abn-page .ho-roadmap-note,
.abn-page .ho-muted-note,
.abn-page .ho-nb-hint,
.abn-page .ho-info-banner,
.abn-page .ho-case-start {
  background: none; border: 0; border-radius: 0; padding: 0; text-align: left;
  font-size: var(--vg-sek-size); font-weight: var(--vg-sek-weight);
  color: var(--gray-500); line-height: var(--lh-normal); max-width: 75ch;
  margin: 0 0 var(--space-3);
}
/* Eine Aussage, die einen ZUSTAND trägt, behält ihre Farbe — aber als Tinte,
   nicht als Fläche. */
.abn-page .ho-statement-ok   { color: var(--vg-ok); }
.abn-page .ho-statement-warn { color: var(--vg-sperre); }
.abn-page .ho-lock-banner    { background: none; border: 0; padding: 0; color: var(--vg-sperre); }
/* Die gewachsenen Blöcke der Nachbereitung und des Abschlusses stehen INNERHALB
   einer Karte. Sie dürfen deshalb KEINE eigene sein — das wäre die dritte
   Flächenebene (gemessen am 01.11.2026: Karte → ho-abschluss-block → Knopf).
   Getrennt wird durch eine Haarlinie, wie jeder andere Eintrag in einer Karte. */
.abn-page .ho-nb-block,
.abn-page .ho-abschluss-block,
.abn-page .ho-addform {
  background: none; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; margin: 0 0 var(--space-5);
}
.abn-page .ho-nb-block + .ho-nb-block,
.abn-page .ho-abschluss-block + .ho-abschluss-block {
  border-top: 1px solid var(--vg-linie); padding-top: var(--space-5);
}
.abn-page .ho-nb { display: flex; flex-direction: column; gap: var(--space-5); }
.abn-page .ho-nb-h,
.abn-page .ho-subhead,
.abn-page .ho-step-sec-h {
  font-size: var(--vg-sect-size); font-weight: var(--vg-sect-weight); color: var(--gray-900);
  text-transform: none; letter-spacing: normal; margin: 0 0 var(--space-3);
}
.abn-page .ho-hint { font-size: var(--vg-sek-size); color: var(--gray-500); }
/* Ein Eintrag in einer Karte wird durch eine Haarlinie getrennt, nie durch
   einen eigenen Kasten mit eigenem Grund (D-01). */
.abn-page .ho-card,
.abn-page .ho-fst-row,
.abn-page .ho-mtr-card,
.abn-page .ho-nb-row {
  background: none; border: 0; border-bottom: 1px solid var(--vg-linie);
  border-radius: 0; padding: var(--space-3) 0;
}
.abn-page .ho-list { display: flex; flex-direction: column; gap: 0; }
.abn-page .ho-mtr-list { display: flex; flex-direction: column; gap: 0; }
/* Jede Berührfläche mindestens 36 × 36 (D-04). `.ho-mini` war 26 × 26. */
.abn-page .ho-mini,
.abn-page .ho-del,
.abn-page .ho-modal-close {
  min-width: var(--vg-touch-min); min-height: var(--vg-touch-min);
}
.abn-page .ho-seg, .abn-page .ho-dec, .abn-page .ho-linkbtn, .abn-page .ho-jump {
  min-height: var(--vg-touch-min);
}
/* Bei einem Kästchen ist das ETIKETT die Trefferfläche — es war 16 px hoch. */
.abn-page .ho-check { min-height: var(--vg-touch-min); margin: 0; }
/* DER OBJEKTWÄHLER IST EIN GEMEINSAMER BAUSTEIN, und sein Eingabefeld ist
   16 px hoch, sein Löschkreuz 26 × 34 (gemessen 01.11.2026). Das gilt überall,
   wo er steht — die Abnahme ist nur der Ort, an dem es aufgefallen ist. Hier
   wird er auf das Maß gebracht; die Vorgabe für den Rest der Anwendung ist in
   docs/ABNAHME_UMSETZUNG.md als Befund notiert, damit es nicht bei dieser
   einen Seite bleibt. Nicht global geändert, weil eine Höhenänderung an einem
   Baustein jedes Modul trifft und das gemessen werden will, nicht geraten. */
.abn-page .vi-obj-picker-input { min-height: var(--vg-btn-h); }
.abn-page .vi-obj-picker-clear { min-width: var(--vg-touch-min); min-height: var(--vg-touch-min); }
.abn-page .ho-linkbtn, .abn-page .ho-jump {
  font-size: var(--vg-sek-size); font-weight: var(--vg-marke-weight);
  color: var(--vg-prim); text-decoration: none;
}
.abn-page .ho-linkbtn:hover, .abn-page .ho-jump:hover { text-decoration: underline; }
/* Die Alt-Pillen zeigen auf die EINE Pille. */
.abn-page .ho-pill, .abn-page .ho-meta-chip, .abn-page .ho-type-chip, .abn-page .ho-ftag {
  display: inline-flex; align-items: center;
  padding: var(--vg-pille-pad-y) var(--vg-pille-pad-x); border-radius: var(--vg-pille-radius);
  font-size: var(--vg-marke-size); font-weight: var(--vg-marke-weight);
  text-transform: none; letter-spacing: normal;
  background: var(--gray-100); color: var(--gray-700);
}
.abn-page .ho-pill-ok   { background: color-mix(in srgb, var(--vg-ok) var(--vg-pille-flaeche), transparent); color: var(--vg-ok); }
.abn-page .ho-pill-warn { background: color-mix(in srgb, var(--vg-sperre) var(--vg-pille-flaeche), transparent); color: var(--vg-sperre); }
/* Ein zugeklappter Zeilenanhang ist weg, nicht klein. */
.abn-zeile-auf.is-zu { display: none; }
/* Die direkten Kinder einer Listenkarte bekommen den Kartenrand — die Liste
   selbst bringt ihn mit, damit die Trennlinien bis an die Kante gehen. */
.abn-karte--liste > .ho-area-usage,
.abn-karte--liste > .abn-satz,
.abn-karte--liste > .ho-area-diff { padding: 0 var(--space-20); }

/* ══ 17 · SCHMALE FENSTER ═════════════════════════════════════════════════
   Unter 900 px öffnet der Feldmodus (eine Entscheidungsstelle in
   handover.js). Diese Seite wird dort nicht gerendert — trotzdem fällt das
   Raster sauber zusammen, damit ein breiter Zoom nichts abschneidet. */
@container abn (max-width: 899px) {
  .abn-raster { grid-template-columns: minmax(0, 1fr); }
  .abn-nav { position: static; }
  .abn-page { padding-bottom: var(--space-5); }
}