/* ============================================================
   Mittelfranken Informatik — Eichschein-Archiv, stil.css
   Die Gestalt. ALLE Werte kommen aus design.css — hier steht keine
   einzige Farbe, kein fester Abstand, keine feste Schriftgröße.
   `test-design.js` prüft das bei jedem Lauf.

   Die Ausnahme sind Haltepunkte in `@media`: dort wirken CSS-Variablen
   nicht. Sie sind auch keine Abstände, sondern Geräteklassen.

   Aufbau der Datei folgt dem Weg durch die Anwendung:
   Kopf → Anmeldung → Suche → Trefferliste → Detailansicht → Tabellen.
   ============================================================ */

/* ============================================================
   KOPFBEREICH — der einzige Ort mit dem Logo-Rot
   ============================================================ */
/* ---- Schmale Geräte zuerst ----
   Hier ist `#kopf` eine Zeile, die umbrechen darf: auf 375px passen
   Logo, Schriftzug und die Bedienelemente nicht nebeneinander. Ohne
   `wrap` legten sie sich übereinander — auf dem Telefon getestet und
   genau so vorgefunden.

   Zur Seitenleiste wird der Bereich erst ab 56rem (ganz unten). */
#kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-4);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--mfi-flaeche);
  border-bottom: var(--linie-duenn) solid var(--mfi-linie);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  text-decoration: none;
  color: var(--mfi-primaer);
  min-height: var(--tippflaeche);
}

/* ---- Das Logo ----
   Nicht unter 40px hoch: das Schild trägt zwei Mammuts und den
   Schriftzug "EICHSERVICE"; darunter wird beides zu Grafik ohne
   Aussage. Die Datei ist 215×137 — bei 48px Höhe also 75px breit und
   noch deutlich über der eigenen Auflösung. */
.marke img {
  height: var(--logo-hoehe);
  width: auto;
  display: block;
}

/* Der Schriftzug neben dem Logo. Hier — und NUR hier — steht das
   Logo-Rot. Sobald es an einer zweiten Stelle auftaucht, ist das Rot
   der abgelaufenen Scheine kein Signal mehr, sondern Dekoration. */
.marke-text {
  display: flex;
  flex-direction: column;
  line-height: var(--zeilenhoehe-eng);
}
.marke-haupt {
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-lg);
  color: var(--mfi-primaer);
  /* Sonst bricht "Eichschein-Archiv" auf dem Telefon mitten im Wort um
     und schiebt den Kopf in die Höhe. */
  white-space: nowrap;
}
.marke-zusatz {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--sperrung-weit);
  text-transform: uppercase;
  color: var(--mfi-akzent);
}

#kopf nav {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  flex-wrap: wrap;
}

/* ---- Der aktive Punkt wird MARKIERT, nicht eingefärbt ----
   Vorher war jeder Navigationspunkt blau — und blau war gleichzeitig
   die Primäraktion, der Rahmen der Sekundärknöpfe, der Fokusring und
   die Infofläche. Wenn alles blau ist, heisst blau nichts mehr; das ist
   der erste Befund des Gestaltungsentwurfs.

   Jetzt: Punkte in Textfarbe, der aktive trägt eine Fläche und (in der
   Seitenleiste) eine Kante. `aria-current="page"` setzt app.js — die
   Auszeichnung ist damit nicht nur sichtbar, sondern auch vorgelesen. */
#kopf nav a {
  color: var(--mfi-text-leise);
  text-decoration: none;
  font-weight: var(--gewicht-halbfett);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  border-left: var(--linie-kante) solid transparent;
  min-height: var(--tippflaeche);
  display: inline-flex;
  align-items: center;
  transition: background var(--uebergang), color var(--uebergang);
}
#kopf nav a:hover { background: var(--mfi-flaeche-tief); color: var(--mfi-text); }
#kopf nav a[aria-current="page"] {
  background: var(--mfi-primaer-hell);
  color: var(--mfi-text);
}

/* Wer angemeldet ist, und der Weg hinaus. Kein Navigationsziel, deshalb
   ein eigener Kasten. */
.kopf-fuss {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
}
/* Der eigene Name: kräftig, in Textfarbe. Vorher stand er leise und
   klein mit der Rolle in Klammern — man musste hinsehen, um zu lesen,
   wer angemeldet ist (Phase 10, Punkt 3). */
#werBinIch {
  color: var(--mfi-text);
  font-size: var(--schrift-md);
  font-weight: var(--gewicht-fett);
  overflow-wrap: break-word;
}

main {
  max-width: var(--breite-inhalt);
  margin: var(--abstand-0) auto;
  padding: var(--abstand-5) var(--abstand-4) var(--abstand-8);
}

/* ---- Ein Seitenkopf für ALLE Ansichten (Entwurf, Phase 9) ----
   Titel und ein Satz Erklärung, überall gleich aufgebaut. Vorher hatte
   jede Ansicht eine eigene Kopfstruktur, und die Suche gar keine. */
.seitenkopf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-5);
}
.seitenkopf h1 { margin: var(--abstand-0); }

/* ---- Dateinamen brechen um, wo es sein muss (Phase 14) ----
   Ein Dateiname ist Fremdeingabe und oft EIN langes Wort ohne
   Trennstelle. "FH14000-14019_500kg_1000kg_M2_12.03.2026.pdf" war als
   Titel der Prüfmaske 561 px breit und schob auf 375 px die ganze Seite
   seitwärts — gefunden in der Browser-Runde mit einem echten Scan, die
   kurzen Namen der Prüfsätze passten. `anywhere` bricht nur, wenn das
   Wort sonst nicht passt; gewöhnliche Wörter bleiben ganz, und kein
   Zeichen geht verloren. Drei Stellen zeigen den Namen: Titel der
   Prüfmaske, Eintrag der Warteschlange, Zeile beim Hochladen. */
#pruefTitel, .queue-kopf strong, .upload-name { overflow-wrap: anywhere; }
.seitenkopf .augenbraue { margin: var(--abstand-0); }
.seitenkopf .hinweis { margin: var(--abstand-0); max-width: var(--breite-suche); }

/* Kleine Überschrift über einer Liste ("Zuletzt hochgeladen"). */
.augenbraue {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--mfi-text-leise);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
  margin: var(--abstand-5) 0 var(--abstand-2);
}

h1 { font-size: var(--schrift-2xl); margin: var(--abstand-0) 0 var(--abstand-2); line-height: var(--zeilenhoehe-eng); }
h2 { font-size: var(--schrift-xl); margin: var(--abstand-6) 0 var(--abstand-3); }
h3 { font-size: var(--schrift-lg); margin: var(--abstand-0); }

.laedt, .hinweis, .fuss { color: var(--mfi-text-leise); }
.fuss { font-size: var(--schrift-sm); }
.fehler { color: var(--gefahr); font-weight: var(--gewicht-halbfett); }

/* ============================================================
   KNÖPFE — vier Stufen (Entwurf, Phase 9)

   Vorher war jeder Knopf gleich laut: "Archivieren", "Passwort neu",
   "Deaktivieren" und "Zum Administrator machen" waren alle dieselbe
   blaue Pille. Nichts war wichtiger als das andere, und die
   gefährlichste Handlung sah aus wie die harmloseste.

     button / .knopf   PRIMÄR — gefüllt, eine Handlung je Ansicht
     .knopf-zweit      SEKUNDÄR — Rahmen, gleichrangige Nebenhandlung
     .knopf-still      LEISE — nur Text, für Handlungen in Zeilen
     .knopf-gefahr     DESTRUKTIV — roter Text

   ---- Welches Rot der destruktive Knopf trägt ----
   NICHT `--mfi-akzent`: das Logo-Rot steht ausschliesslich im
   Kopfbereich, sonst ist es nach der dritten Fläche keine Marke mehr
   (und `test-design.js` zählt seine Fundstellen). Der Entwurf schlägt
   es vor; hier wird abgewichen.

   Bis Phase 14 stand hier `--ampel-abgelaufen`, mit der Begründung,
   eine dritte Rotquelle sei eine zu viel. Phase 14 hat das umgekehrt:
   die Ampelfarben stehen AUSSCHLIESSLICH für die Gültigkeit, und
   Zerstörendes und Fehler tragen die eigene Variable `--gefahr`
   (design.css). Eine Änderung am Ampelrot färbt so keinen Knopf um.
   ============================================================ */
button, .knopf {
  font: inherit;
  font-weight: var(--gewicht-halbfett);
  cursor: pointer;
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-5);
  border: var(--linie-dick) solid var(--mfi-aktion);
  border-radius: var(--radius);
  background: var(--mfi-aktion);
  color: var(--mfi-aktion-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  transition: background var(--uebergang), border-color var(--uebergang);
}
button:hover:not(:disabled), .knopf:hover {
  background: var(--mfi-primaer-dunkel);
  border-color: var(--mfi-primaer-dunkel);
}
button:disabled { opacity: var(--deckkraft-still); cursor: default; }

/* SEKUNDÄR: gleicher Rang, andere Handlung. */
.knopf-zweit, button.knopf-zweit {
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  border-color: var(--mfi-linie-kraeftig);
}
.knopf-zweit:hover, button.knopf-zweit:hover {
  background: var(--mfi-flaeche-tief);
  border-color: var(--mfi-linie-kraeftig);
}

/* LEISE: die Handlung in einer Tabellenzeile. Sie steht dort zwanzig
   Mal untereinander — als Pille wäre die Tabelle eine Knopfleiste. */
.knopf-still, button.knopf-still {
  background: transparent;
  color: var(--mfi-primaer);
  border-color: transparent;
}
.knopf-still:hover, button.knopf-still:hover {
  background: var(--mfi-primaer-hell);
  border-color: transparent;
}

/* DESTRUKTIV: deaktivieren, ablehnen, Rechte entziehen. */
.knopf-gefahr, button.knopf-gefahr {
  background: transparent;
  color: var(--gefahr);
  border-color: transparent;
}
.knopf-gefahr:hover, button.knopf-gefahr:hover {
  background: var(--gefahr-flaeche);
  border-color: transparent;
}

/* ---- Der gefüllte Gefahrknopf: NUR in einer Rückfrage (Phase 14) ----
   In der Zeile stehen zerstörende Handlungen neutral ("Deaktivieren",
   "Archivieren"); rot wird erst der Knopf, der sie bestätigt. */
.knopf-gefahr-voll, button.knopf-gefahr-voll {
  background: var(--gefahr);
  border-color: var(--gefahr);
  color: var(--gefahr-text);
}
.knopf-gefahr-voll:hover, button.knopf-gefahr-voll:hover:not(:disabled) {
  background: var(--gefahr);
  border-color: var(--gefahr-text);
}

/* ============================================================
   ANMELDUNG
   ============================================================ */
.anmeldung {
  max-width: var(--breite-schmal);
  margin: var(--abstand-7) auto;
  padding: var(--abstand-6);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius-gross);
  background: var(--mfi-flaeche);
  box-shadow: var(--schatten-leicht);
}
.anmeldung-logo {
  display: block;
  height: var(--logo-hoehe-gross);
  width: auto;
  margin: var(--abstand-0) auto var(--abstand-5);
}
.anmeldung h1 { text-align: center; font-size: var(--schrift-xl); }
.anmeldung .hinweis { text-align: center; font-size: var(--schrift-sm); }
.anmeldung label { display: block; margin: var(--abstand-4) 0; font-weight: var(--gewicht-halbfett); }
.anmeldung input {
  display: block;
  width: 100%;
  margin-top: var(--abstand-1);
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-3);
  font: inherit;
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
}
.anmeldung button { width: 100%; margin-top: var(--abstand-2); }
.anmeldung .fuss { text-align: center; margin-bottom: var(--abstand-0); }

/* ============================================================
   SUCHE — das beherrschende Element der Startseite

   Werner tippt eine Nummer und drückt Enter. Das ist der ganze Ablauf,
   und die Seite soll aus nichts anderem bestehen.
   ============================================================ */
.suche { max-width: var(--breite-suche); margin: var(--abstand-0) auto; }

/* Etwas Luft über dem Suchfeld auf dem grossen Bildschirm — dort ist
   Platz, und die Startseite IST das Suchfeld. Die Klasse bleibt auch
   nach dem Suchen stehen (die Seite wird mit Ergebnis neu gezeichnet):
   das Feld springt also nicht, wenn eine Meldung darunter erscheint.
   (Der Kommentar hier behauptete bis Phase 11 das Gegenteil — dass
   alles nach oben rutscht. Das tat es nie.)

   Auf dem Telefon entfällt die Luft, siehe unten bei 34rem. */
.suche.leer { padding-top: var(--abstand-5); }

/* Das Suchfeld liegt auf einer Karte, nicht frei auf dem Grund. Vorher
   schwebte es in der Mitte des Nichts (Entwurf, Befund 4). */
.suche form {
  display: flex;
  gap: var(--abstand-3);
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--mfi-flaeche);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  padding: var(--abstand-5);
}
.suche label {
  flex: 0 0 100%;
  font-weight: var(--gewicht-halbfett);
  font-size: var(--schrift-lg);
  margin-bottom: var(--abstand-1);
}
#q {
  flex: 1 1 var(--breite-schmal);
  min-height: var(--tippflaeche-gross);
  padding: var(--abstand-3) var(--abstand-4);
  font: inherit;
  font-size: var(--schrift-suche);
  font-family: var(--schriftfamilie-fest);
  border: var(--linie-dick) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  transition: border-color var(--uebergang);
}
/* Der Rahmen wird kräftiger — der Fokusring aus design.css bleibt
   davon unberührt und wird NICHT ersetzt. */
#q:focus { border-color: var(--mfi-primaer); }
#q::placeholder { color: var(--mfi-text-leise); font-family: var(--schriftfamilie); font-size: var(--schrift-md); }

.suche form button { min-height: var(--tippflaeche-gross); padding-inline: var(--abstand-6); }

.trefferzahl {
  margin: var(--abstand-6) 0 var(--abstand-3);
  font-weight: var(--gewicht-halbfett);
  font-size: var(--schrift-lg);
}

/* ============================================================
   TREFFERLISTE — der Unterschied muss auf einen Blick erkennbar sein

   Bei einer mehrdeutigen Nummer steht der Nutzer vor dem Klotz und
   muss entscheiden, welcher der beiden es ist. Die Karte trägt deshalb
   die unterscheidenden Angaben groß: Art, Nennwert, Klasse — und den
   Namensraum, der die eigentliche Ursache der Mehrdeutigkeit ist.
   ============================================================ */
.karten {
  display: grid;
  gap: var(--abstand-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--breite-karte), 1fr));
}
.karte {
  display: flex;
  gap: var(--abstand-4);
  align-items: flex-start;
  padding: var(--abstand-4);
  text-decoration: none;
  color: inherit;
  /* Kein farbiger Balken links (Phase 9): jede Karte hatte ihn, also
     unterschied er keine von der anderen. Was die Karten unterscheidet,
     ist der Namensraum — und der steht als Text darin. */
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  box-shadow: var(--schatten-leicht);
  transition: box-shadow var(--uebergang), border-color var(--uebergang);
}
.karte:hover { box-shadow: var(--schatten); border-color: var(--mfi-primaer); }

.karte-bild {
  flex: 0 0 var(--breite-vorschau);
  height: var(--breite-vorschau);
  display: grid;
  place-items: center;
  background: var(--mfi-flaeche-tief);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.kein-bild {
  font-size: var(--schrift-xs);
  color: var(--mfi-text-leise);
  text-align: center;
  padding: var(--abstand-1);
}

.karte-text { min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-1); }
.karte-text h3 {
  font-family: var(--schriftfamilie-fest);
  font-size: var(--schrift-xl);
}
.karte .art { margin: var(--abstand-0); font-weight: var(--gewicht-halbfett); }
.karte .daten {
  margin: var(--abstand-0);
  display: flex;
  gap: var(--abstand-3);
  flex-wrap: wrap;
  font-size: var(--schrift-lg);
  font-weight: var(--gewicht-halbfett);
}
.karte .namensraum {
  margin: var(--abstand-0);
  font-size: var(--schrift-sm);
  color: var(--mfi-text-leise);
}

/* ============================================================
   AMPEL — Farbe, Klartext UND Symbol

   Drei Träger derselben Aussage. Die Farbe allein reicht nicht: Rot
   und Grün sind für etwa jeden zwölften Mann nicht sicher zu
   unterscheiden, und im Halbdunkel einer Werkhalle für weitere.
   Das Symbol ist eine FORM, kein eingefärbter Punkt — sonst trägt es
   dieselbe Information wie die Farbe und keine eigene.
   ============================================================ */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-weight: var(--gewicht-halbfett);
  padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-rund);
  border: var(--linie-duenn) solid currentColor;
  font-size: var(--schrift-sm);
  align-self: flex-start;
}
.ampel svg { width: var(--symbol-groesse); height: var(--symbol-groesse); flex: 0 0 auto; }
.ampel .wort { color: var(--mfi-text); }

.ampel-gruen { color: var(--ampel-gueltig);      background: var(--ampel-gueltig-flaeche); }
.ampel-gelb  { color: var(--ampel-bald);          background: var(--ampel-bald-flaeche); }
.ampel-rot   { color: var(--ampel-abgelaufen);    background: var(--ampel-abgelaufen-flaeche); }
.ampel-grau  { color: var(--ampel-unbestimmt);    background: var(--ampel-unbestimmt-flaeche); }

/* In der Detailansicht trägt die Ampel die Hauptaussage und wird groß. */
.ampel-gross {
  font-size: var(--schrift-lg);
  padding: var(--abstand-2) var(--abstand-4);
}
.ampel-gross svg { width: var(--symbol-groesse-gross); height: var(--symbol-groesse-gross); }

/* ============================================================
   DETAILANSICHT — zuerst für das Handy

   Sie wird per QR-Code am Gewicht stehend aufgerufen: eine Hand hält
   das Telefon, die andere ist am Klotz. Nummer und Ampel stehen
   deshalb ganz oben und ohne Scrollen; alles Bedienbare ist mindestens
   eine Daumenbreite groß.
   ============================================================ */
.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  margin-bottom: var(--abstand-3);
  color: var(--mfi-primaer);
  text-decoration: none;
  font-weight: var(--gewicht-halbfett);
}
.zurueck:hover { text-decoration: underline; }

/* Der Kopf der Detailansicht: Nummer und Ampel zuerst, Bild danach.
   Auf dem Handy untereinander — die Reihenfolge im HTML ist bereits
   die richtige, deshalb braucht es hier keine Umsortierung. */
.gewicht-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
}
.gewicht-titel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}
/* ---- "Dieses Stück wird anders geführt" (Phase 18) ----
   Eine Auskunft, keine Warnung: dieselbe ruhige Form wie die
   Namensraumzeile der Prüfmaske — leise Fläche, Kante in der
   Linienfarbe, keine Ampelfarbe. */
.praefix-hinweis {
  margin: var(--abstand-0);
  padding: var(--abstand-2) var(--abstand-3);
  border-left: var(--linie-kante) solid var(--mfi-linie-kraeftig);
  background: var(--mfi-flaeche-tief);
  border-radius: var(--radius);
  font-size: var(--schrift-sm);
}
.gewicht-titel h1 {
  font-family: var(--schriftfamilie-fest);
  font-size: var(--schrift-3xl);
  margin: var(--abstand-0);
}
.gewicht-bild {
  width: 100%;
  max-width: var(--breite-bild);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--mfi-flaeche);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.gewicht-bild img { width: 100%; height: 100%; object-fit: cover; }

dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-0);
  margin: var(--abstand-4) 0;
}
dt {
  color: var(--mfi-text-leise);
  font-size: var(--schrift-sm);
  margin-top: var(--abstand-3);
}
dd { margin: var(--abstand-0); font-weight: var(--gewicht-halbfett); }

/* ---- Scheine ---- */
.schein {
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  padding: var(--abstand-4);
  margin-bottom: var(--abstand-4);
  background: var(--mfi-flaeche);
}
/* Der aktuelle Schein ist die Antwort auf die Frage, mit der jemand
   hergekommen ist — er hebt sich ab. */
.schein.aktuell {
  border-color: var(--mfi-primaer);
  border-width: var(--linie-dick);
  background: var(--mfi-primaer-hell);
}
.schein header {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-2);
}
.merker {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-rund);
  background: var(--mfi-primaer);
  /* Die Schrift der Aktionsfarbe — im Dunkelmodus dunkel (Phase 14):
     weiss auf dem hellen Blau hatte 2.29:1. */
  color: var(--mfi-aktion-text);
}
/* "archiviert": Schrift in der Flächenfarbe — weiss auf dem hellen Grau
   des Dunkelmodus hätte 2:1 gehabt (Phase 14 nachgerechnet). */
.merker-alt { background: var(--mfi-text-leise); color: var(--mfi-flaeche); }

.knoepfe {
  display: flex;
  gap: var(--abstand-3);
  flex-wrap: wrap;
  margin: var(--abstand-4) 0 var(--abstand-0);
}
/* Auf dem Handy füllt der PDF-Knopf die Breite: er ist der Grund,
   warum die Seite aufgerufen wurde. */
.knoepfe .knopf { flex: 1 1 var(--breite-knopf); }

details.historie, details.qr { margin-top: var(--abstand-5); }
details summary {
  cursor: pointer;
  font-weight: var(--gewicht-halbfett);
  color: var(--mfi-primaer);
  padding: var(--abstand-3) var(--abstand-0);
  min-height: var(--tippflaeche);
  display: flex;
  align-items: center;
}
.qr-box { padding: var(--abstand-4) var(--abstand-0); }
.qr-box img {
  width: var(--breite-qr);
  height: var(--breite-qr);
  background: var(--mfi-weiss);
  padding: var(--abstand-2);
  border-radius: var(--radius);
  border: var(--linie-duenn) solid var(--mfi-linie);
}
.qr-box .knopf { display: inline-flex; margin-top: var(--abstand-3); }

/* ============================================================
   TABELLEN
   ============================================================ */
/* ============================================================
   Die REGELN FÜR TABELLEN (Phase 10, Punkt 2)

   1. Eine Tabellenzelle bleibt eine Tabellenzelle. Kein `display`
      auf `td` oder `th` — weder direkt noch über eine Klasse. Mit
      `display: flex` wächst eine Zelle nicht mehr auf die Höhe ihrer
      Zeile, und ihre Unterlinie wird dort gezogen, wo IHR Inhalt
      aufhört. Das war zweimal der Fall: der Strich unter
      "blockgewicht" (Phase 9) und die rechte Spalte der Nutzerliste
      mit ihren eigenen Linien (Phase 10). `test-design.js` sucht
      danach.
   2. Mehrere Dinge in einer Zelle stapeln sich als Blöcke
      (`td.stapel`), die Zelle selbst bleibt unverändert.
   3. Fläche, Rand und Radius trägt der RAHMEN um die Tabelle, nicht
      die Tabelle. Er rollt auf schmalen Geräten waagerecht — die
      Tabelle selbst wird dafür nicht mehr umgebaut.
   4. Die Linien trägt die Zeile, genauer: jede Zelle unten die
      gleiche. `collapse` lässt sie zu EINER Linie über die volle
      Breite zusammenfallen.
   ============================================================ */
.tabelle-rahmen {
  margin: var(--abstand-4) 0;
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  overflow-x: auto;
  /* ---- Ein Schatten, wo die Tabelle weitergeht (Phase 12) ----
     Auf 375 px ist eine Pflegetabelle 800 px breit und rollt im
     Rahmen. Die Spalte an der Kante war dabei einfach abgeschnitten:
     "Interv… (Mona…" las sich wie ein kaputter Spaltenkopf, obwohl der
     Rest nur nach rechts weggerollt war — gemessen: kein Kopf bricht
     mitten im Wort, die Rahmenkante schneidet.

     Jetzt liegt an jeder Kante, hinter der noch etwas kommt, ein
     Schatten. Das Muster: zwei Abdeckungen in Flächenfarbe rollen MIT
     dem Inhalt (`local`) und verdecken den Schatten, sobald man am Rand
     angekommen ist; die beiden Schatten stehen fest am Rahmen
     (`scroll`). Rollt nichts, verdecken die Abdeckungen beide Schatten
     — der breite Bildschirm sieht aus wie vorher. */
  background:
    linear-gradient(to right, var(--mfi-flaeche) 30%, transparent) left center / var(--abstand-7) 100% no-repeat local,
    linear-gradient(to left, var(--mfi-flaeche) 30%, transparent) right center / var(--abstand-7) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--schatten-rand), transparent) left center / var(--abstand-4) 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--schatten-rand), transparent) right center / var(--abstand-4) 100% no-repeat scroll,
    var(--mfi-flaeche);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: var(--abstand-3);
  border-bottom: var(--linie-duenn) solid var(--mfi-linie);
  vertical-align: middle;
  /* Umbrechen statt abschneiden — aber an Wortgrenzen, und mit
     Silbentrennung (die Seite trägt lang="de"). `anywhere` brach
     vorher auch dort mitten im Wort, wo die Zeile Platz gehabt hätte. */
  overflow-wrap: break-word;
  hyphens: auto;
}
th {
  color: var(--mfi-text-leise);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  border-bottom-color: var(--mfi-linie-kraeftig);
  /* Ein Spaltenkopf bricht NIE mitten im Wort (Phase 12) — nur an
     Leerzeichen. Dass jedes Kopfwort in seine Spalte passt, misst
     test-handy.js bei 375 px und bei voller Breite. */
  overflow-wrap: normal;
  hyphens: manual;
}
tr:last-child td { border-bottom: 0; }
table tr:hover td { background: var(--mfi-flaeche-tief); }
tr.deaktiviert td { opacity: var(--deckkraft-still); text-decoration: line-through; }

/* Die Zwischenüberschrift einer Gruppe ("Leser (3)", Phase 13): eine
   Zeile über die volle Breite, eine Stufe tiefer hinterlegt, damit man
   beim Durchsehen sieht, wo eine Gruppe beginnt. */
tr.gruppe th {
  background: var(--mfi-flaeche-tief);
  color: var(--mfi-text);
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-fett);
  padding-block: var(--abstand-2);
  border-bottom-color: var(--mfi-linie);
}

/* ---- Feste Spaltenbreiten ----
   Ohne sie verteilt der Browser die Breite nach dem Inhalt, und die
   Spalten wandern von Zeile zu Zeile. In der Stammdatenmaske stand
   deshalb "Gusseisen, Block, fuer K…" abgeschnitten neben einer
   halbleeren Nachbarspalte. Die Breiten setzt ein <colgroup> im
   Quelltext der jeweiligen Ansicht. */
.tabelle-fest { table-layout: fixed; min-width: var(--breite-tabelle); }

/* ---- Die Bereichstabelle der Suchmeldung ----
   Die einzige Tabelle, die am Telefon gelesen wird — von jedem, der
   am Gewicht eine Nummer ohne Treffer eintippt. Sie rollt deshalb
   nicht, sondern passt: vier kurze Spalten mit engerem Zellabstand.
   Und ein Nummernbereich bleibt zusammen: "7000–7999" brach bei 375px
   hinter dem Strich um, und "7999" stand allein in der nächsten Zeile
   wie eine eigene Nummer. */
table.bereiche th, table.bereiche td { padding-inline: var(--abstand-2); }
table.bereiche td:last-child { white-space: nowrap; }

/* ---- Mehrere Dinge in einer Zelle ----
   Rolle und "Zum Administrator machen", Kennung und Freitext-Merker,
   "Passwort neu" und "Deaktivieren": untereinander, sauber gestapelt.
   Die KINDER werden zu Blöcken, nicht die Zelle. Knöpfe bleiben so
   breit wie ihr Text — `display: flex` steht hier auf dem Knopf selbst,
   und der ist keine Zelle. */
td.stapel > * { display: block; }
td.stapel > * + * { margin-top: var(--abstand-2); }
td.stapel > button, td.stapel > .knopf {
  display: flex;
  width: fit-content;
  max-width: 100%;
  /* Bricht ein Knopftext doch einmal um (schmale Geräte), steht er
     linksbündig wie alles andere in der Zelle — zentriert wirkte er
     zweizeilig schief. */
  justify-content: flex-start;
  text-align: left;
}
td.stapel > select { max-width: 100%; }
td.stapel > code { font-family: var(--schriftfamilie-fest); font-size: var(--schrift-sm); }

/* ---- Die Rückmeldung eines Feldes verschiebt nichts ----
   "speichert …", "gespeichert": vorher erschien sie unter dem Feld, und
   die Zeile wurde in diesem Augenblick höher. Der erste Versuch in
   Phase 10 hat ihr eine Zeile fest reserviert — dann sassen alle Felder
   einige Pixel höher als der Text in den Nachbarzellen, weil nur die
   Feldzellen die Reserve trugen. Beim Bedienen gesehen.

   Jetzt: ALLE Zellen einer Pflegetabelle haben oben und unten denselben,
   etwas grösseren Abstand, und die Rückmeldung liegt ÜBER dem unteren
   Abstand, statt Platz einzunehmen. Jede Zelle ist damit gleich hoch
   und ihr Inhalt auf derselben Mittellinie — vor und nach dem
   Speichern. Nur eine Fehlermeldung darf die Zeile wachsen lassen: sie
   soll vollständig lesbar sein und ist selten. */
.tabelle-fest td {
  position: relative;
  padding-block: calc(var(--abstand-3) + var(--abstand-2));
}
.tabelle-fest td > .pos-stand {
  position: absolute;
  left: var(--abstand-3);
  right: var(--abstand-3);
  bottom: var(--abstand-1);
  margin: var(--abstand-0);
  line-height: var(--zeilenhoehe-eng);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabelle-fest td > .pos-stand.fehler {
  position: static;
  margin-top: var(--abstand-1);
  white-space: normal;
}

.meldung {
  padding: var(--abstand-4);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  border: var(--linie-duenn) solid var(--mfi-linie);
  margin: var(--abstand-5) 0;
}

/* Der Leerzustand ist keine Meldung mit Rahmen, sondern eine leere
   Fläche mit einem Satz darin. */
.meldung-leer {
  background: transparent;
  border-style: dashed;
  border-color: var(--mfi-linie-kraeftig);
  color: var(--mfi-text-leise);
  text-align: center;
  padding: var(--abstand-7) var(--abstand-4);
}

/* ============================================================
   DIE RÜCKFRAGE (Phase 14)

   Ein <dialog> statt `confirm()`: der eingebaute Dialog des Browsers
   lässt seinen Knopf nicht einfärben — und die Farbe gehört genau
   dorthin. In der Zeile steht die zerstörende Handlung neutral, rot
   ist erst der Knopf, der sie bestätigt. Der vorgewählte Knopf ist
   "Abbrechen"; Esc bricht ab.
   ============================================================ */
dialog.rueckfrage {
  max-width: min(var(--breite-formular), calc(100vw - var(--abstand-6)));
  padding: var(--abstand-5);
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  box-shadow: var(--schatten);
}
dialog.rueckfrage::backdrop { background: var(--schleier); }
dialog.rueckfrage h2 { margin: var(--abstand-0) 0 var(--abstand-3); font-size: var(--schrift-lg); }
dialog.rueckfrage p { margin: var(--abstand-0) 0 var(--abstand-5); }
.rueckfrage-knoepfe { display: flex; gap: var(--abstand-3); justify-content: flex-end; flex-wrap: wrap; }

/* ============================================================
   DER EINGEKLAPPTE ANLEGEKASTEN (Phase 10, Punkt 1)

   Die Tabelle wird täglich gebraucht, das Formular selten. Deshalb
   steht es hinter einem Klick. Das Plus-/Minuszeichen ersetzt das
   Dreieck, das `details summary { display: flex }` dem Browser nimmt —
   ohne Zeichen sähe die Zeile aus wie eine Überschrift und nicht wie
   etwas, das man aufklappt.
   ============================================================ */
details.anlegen {
  margin-top: var(--abstand-5);
  background: var(--mfi-flaeche);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
}
details.anlegen > summary {
  padding: var(--abstand-3) var(--abstand-4);
  gap: var(--abstand-3);
}
details.anlegen > summary::before {
  content: "+";
  font-weight: var(--gewicht-fett);
  width: var(--symbol-groesse);
  text-align: center;
}
details.anlegen[open] > summary::before { content: "−"; }
details.anlegen[open] > summary { border-bottom: var(--linie-duenn) solid var(--mfi-linie); }
details.anlegen > .formular {
  margin: var(--abstand-0);
  padding: var(--abstand-2) var(--abstand-4) var(--abstand-4);
  border-top: 0;
}

/* Beschriftung und Hilfetext eines Feldes: der Text halbfett, der
   Hilfetext leise darunter. */
.feld-text { display: block; }
.feld-hilfe {
  display: block;
  margin-top: var(--abstand-1);
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-normal);
  color: var(--mfi-text-leise);
}

/* Ein Spaltenkopf mit Sprechblase (`title`) zeigt es am Zeiger. Den
   Hilfetext IM Kopf (`.th-hilfe`) gibt es seit Phase 12 nicht mehr —
   er steht als Satz unter der Tabelle. */
th[title] { cursor: help; }
.unter-tabelle { margin-top: calc(var(--abstand-2) * -1); }

/* ============================================================
   ANLEGEN-FORMULARE

   Dieselbe Gestalt für Nutzer, Gewichtsarten und Nummernbereiche —
   deshalb heisst die Klasse seit Phase 9 `.formular` und nicht mehr
   `.nutzer-neu`. Sie stand schon vorher an allen drei Stellen; der
   Name behauptete nur etwas anderes.

   Ab 40rem stehen Beschriftung und Feld nebeneinander (Entwurf):
   links, was man liest, rechts, was man ausfüllt.
   ============================================================ */
.formular {
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-5);
  border-top: var(--linie-duenn) solid var(--mfi-linie);
}
.formular label { display: block; margin: var(--abstand-3) 0; font-weight: var(--gewicht-halbfett); }
.formular input, .formular select {
  display: block;
  width: 100%;
  margin-top: var(--abstand-1);
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-3);
  font: inherit;
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  max-width: var(--breite-formular);
}
.ausgabe { margin-top: var(--abstand-3); font-weight: var(--gewicht-halbfett); }
.ausgabe.erfolg {
  color: var(--erfolg);
  /* Das erzeugte Passwort steht hier und wird nie wieder angezeigt —
     also muss es sich vollständig markieren lassen. */
  font-family: var(--schriftfamilie-fest);
  user-select: all;
  word-break: break-all;
}
.ausgabe.fehler { color: var(--gefahr); }
/* "Angelegt: …" — eine Bestätigung, kein Passwort. Deshalb nicht
   `.erfolg`: die Klasse setzt Monospace und macht den Text vollständig
   markierbar, beides ist für das einmal angezeigte Passwort gedacht. */
.ausgabe.hinweis-erfolg { color: var(--erfolg); }

/* ============================================================
   GROSSER BILDSCHIRM — die Erweiterung, nicht der Ausgangspunkt
   Haltepunkte sind literal: in @media wirken CSS-Variablen nicht.
   ============================================================ */
/* ---- Der Kopf auf schmalen Geräten ----
   Die Navigation rutscht auf eine eigene Zeile und verteilt sich darauf,
   statt sich neben das Logo zu quetschen. Nichts wird ausgeblendet: wer
   angemeldet ist, soll sehen, als wer — gerade wenn sich Werner und ein
   Eichbeamter dasselbe Telefon teilen. */
@media (max-width: 34rem) {
  /* ---- Der Kopf auf dem Telefon, so niedrig wie es geht ----
     Er stand vor Phase 11 in drei festen Zeilen: Marke, Menü, Name mit
     "Abmelden" — auch beim Kunden, dessen Menü aus EINEM Punkt besteht.
     Jetzt darf der Kasten mit Name und "Abmelden" neben dem Menü stehen,
     wenn er dort Platz hat (beim Kunden und beim Leser hat er ihn), und
     rückt sonst in eine eigene Zeile. Das Menü selbst wird so breit wie
     seine Punkte, höchstens eine Zeile, und bricht danach um. */
  #kopf { padding-block: var(--abstand-2); column-gap: var(--abstand-3); }

  /* ---- Das Menü beginnt immer links, unter der Marke (Phase 11, Punkt 3) ----
     Die Marke nimmt die erste Zeile allein. Sonst rutschte beim Kunden
     sein einziger Punkt "Suche" neben den Schriftzug, beim
     Administrator aber in die zweite Zeile — dasselbe Menü an zwei
     verschiedenen Stellen, je nach Rolle. */
  .marke { flex-basis: 100%; }

  /* ---- Gleichmässig, linksbündig, nicht auseinandergezogen ----
     Hier stand `justify-content: space-between`. Beim Administrator
     brach das Menü in zwei Zeilen, und die zweite hatte nur zwei
     Punkte: "Stammdaten" ganz links, "Nutzer" ganz rechts, dazwischen
     eine Lücke — das las sich wie zwei getrennte Gruppen. Jetzt: überall
     derselbe Abstand, und die zweite Zeile beginnt bündig unter der
     ersten. */
  #kopf nav {
    margin-left: var(--abstand-0);
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: var(--abstand-2);
  }

  /* ---- Der aktive Punkt: Fläche UND Kante ----
     In der Seitenleiste markiert eine Kante links; in einer Zeile, die
     umbricht, gehört sie nach unten — wie bei den Reitern. Die Fläche
     allein (#E6EFF5 auf Weiss) ist im Sonnenlicht einer Werkhalle kaum
     zu sehen. Die Antippfläche bleibt bei 44px. */
  #kopf nav a {
    border-left: 0;
    border-bottom: var(--linie-dick) solid transparent;
    border-radius: var(--radius-klein) var(--radius-klein) var(--abstand-0) var(--abstand-0);
  }
  #kopf nav a[aria-current="page"] { border-bottom-color: var(--mfi-primaer); }

  /* Name und "Abmelden" bleiben beieinander. Passen sie neben das Menü
     (Kunde, Leser: ein Punkt), stehen sie dort rechts; sonst in einer
     eigenen Zeile. */
  .kopf-fuss {
    margin-left: auto;
    gap: var(--abstand-3);
  }
  /* "Abmelden" ist ein Nebenknopf: auf dem Telefon mit schmalerem
     Innenabstand, damit Name und Knopf beim Kunden und beim Leser neben
     "Suche" passen. Die Höhe bleibt bei 44px. Ohne das rutschten sie in
     eine dritte Zeile, und das Suchfeld sank um 52px — nachgemessen. */
  .kopf-fuss button { padding-inline: var(--abstand-3); }

  /* ---- Die Suche: das Feld nach oben (Phase 11, Punkt 2) ----
     Gemessen vorher, als Kunde auf 375 × 812: Feld bei 411–476 px, also
     in der Mitte — auf einem 667 px hohen Telefon bei 62–71 %. Öffnet
     sich dort die Tastatur, rollt der Browser das Feld an den unteren
     Rand über der Tastatur, und über ihm steht der ganze Kopf.

     Drei Dinge rücken es hoch:
       * keine zusätzliche Luft über dem Feld und weniger Innenabstand
         der Karte;
       * der Hinweissatz ("Mit oder ohne Präfix …") steht auf dem
         Telefon UNTER dem Feld — als Hilfetext an dem, was er erklärt,
         wie die Hinweise in den Formularen seit Phase 10. Auf dem
         grossen Bildschirm bleibt er im Seitenkopf;
       * die Beschriftung "Nummer des Gewichtstücks" wird auf dem Telefon
         nur noch vorgelesen, nicht gezeigt: direkt darüber steht
         "Gewicht suchen", und im Feld steht das Beispiel.

     `display: contents` löst den Seitenkopf der Suche auf, damit Titel
     und Hinweis sich einzeln einordnen lassen — Titel vor dem Feld,
     Hinweis danach, Ergebnis zuletzt. Das Ergebnis erscheint damit unter
     allem und verschiebt das Feld nicht. */
  main { padding-top: var(--abstand-4); }
  .suche.leer { padding-top: var(--abstand-0); }
  .suche { display: flex; flex-direction: column; }
  .suche .seitenkopf { display: contents; }
  .suche .seitenkopf h1 { order: 0; margin-bottom: var(--abstand-3); }
  .suche form { order: 1; padding: var(--abstand-4); }
  .suche .seitenkopf .hinweis {
    order: 2;
    margin-top: var(--abstand-2);
    font-size: var(--schrift-sm);
  }
  .suche #ergebnis { order: 3; }
  .suche label {
    position: absolute;
    width: var(--linie-duenn);
    height: var(--linie-duenn);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: var(--abstand-0);
  }

  /* ---- Auf dem Telefon bleibt der Kopf NICHT stehen ----
     Mit fünf Navigationspunkten, dem Namen und "Abmelden" ist er auf
     375px 230px hoch — ein Viertel des Bildschirms, dauerhaft belegt.
     Auf dem Schreibtisch ist das eine schmale Zeile, auf dem Telefon
     ist es die Hälfte der Detailansicht. Dort wird am Gewicht stehend
     gelesen; also scrollt er weg, wie jeder andere Inhalt auch.
     Gefunden beim Bedienen bei Handybreite. */
  #kopf { position: static; }

  /* ---- Auf dem Telefon rollt der RAHMEN, nicht die Seite ----
     Hier stand bis Phase 10 `#inhalt table { display: block }`. Das
     liess die Tabelle rollen — und machte sie dabei zur Nicht-Tabelle:
     der Browser legt dann eine unsichtbare Tabelle hinein, die nur so
     breit ist wie ihr Inhalt, und die Trennlinien hörten mitten in der
     Zeile auf. Das Rollen übernimmt seitdem `.tabelle-rahmen`, für
     jede Breite gleich. */
}

@media (min-width: 40rem) {
  dl { grid-template-columns: max-content 1fr; gap: var(--abstand-2) var(--abstand-5); }
  dt { margin-top: var(--abstand-0); }
  .knoepfe .knopf { flex: 0 0 auto; }

  /* Beschriftung links, Feld rechts. Darunter bleibt es untereinander:
     zwei Spalten auf 375px wären zwei zu schmale Spalten. */
  .formular label {
    display: grid;
    grid-template-columns: minmax(0, var(--breite-beschriftung)) minmax(0, var(--breite-formular));
    gap: var(--abstand-4);
    align-items: center;
  }
  .formular input, .formular select { margin-top: var(--abstand-0); }
}

@media (min-width: 56rem) {
  /* Erst hier stehen Bild und Stammdaten nebeneinander. Auf dem Handy
     wäre das Bild sonst ein Riegel zwischen Nummer und Ampel. */
  .gewicht-kopf { flex-direction: row; align-items: flex-start; }
  .gewicht-bild { flex: 0 0 var(--breite-bild); }
  .gewicht-titel { flex: 1 1 auto; }

  /* ---- Ab hier ist der Kopfbereich eine SEITENLEISTE ----
     So zeichnet es der Entwurf (Richtung "Klarblau"). Die Klasse
     `mit-navigation` setzt app.js, sobald jemand angemeldet ist: auf
     der Anmeldeseite ist `#kopf` ausgeblendet, und ohne die Klasse
     bliebe dort eine leere 236px-Spalte stehen.

     Unterhalb dieses Haltepunkts gibt es die Leiste nicht — sie nähme
     auf 375px zwei Drittel der Breite, und eine Klappmechanik dafür
     zeigt der Entwurf nicht. Dort bleibt die Zeile von oben. */
  body.mit-navigation {
    display: grid;
    grid-template-columns: var(--breite-seitenleiste) minmax(0, 1fr);
    align-items: start;
  }
  body.mit-navigation #kopf {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--abstand-5);
    height: 100vh;
    padding: var(--abstand-5) var(--abstand-3);
    border-bottom: 0;
    border-right: var(--linie-duenn) solid var(--mfi-linie);
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* ---- Die Marke muss in 236px passen ----
     Beim Bedienen gefunden: "Eichschein-Archiv" stand bei --schrift-lg
     mit `white-space: nowrap` neben dem 48px-Logo, brauchte 244px in
     einer 212px breiten Spalte — der Schriftzug war auf
     "Eichschein-Arch" abgeschnitten und die Leiste bekam einen
     waagerechten Rollbalken. In der Kopfzeile (schmale Geräte) gab es
     das Problem nie, dort ist Platz nach rechts.

     Also: eine Stufe kleiner, und umbrechen darf er auch. Das Logo
     bleibt bei 48px — unter 40px werden die Mammuts zu Grafik ohne
     Aussage. */
  body.mit-navigation .marke {
    padding: var(--abstand-0) var(--abstand-2) var(--abstand-5);
    border-bottom: var(--linie-duenn) solid var(--mfi-linie);
    gap: var(--abstand-2);
  }
  body.mit-navigation .marke-text { min-width: 0; }
  body.mit-navigation .marke-haupt {
    font-size: var(--schrift-md);
    white-space: normal;
  }
  body.mit-navigation #kopf nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-1);
  }
  body.mit-navigation #kopf nav a {
    border-radius: var(--abstand-0) var(--radius-klein) var(--radius-klein) var(--abstand-0);
  }
  /* Die Kante links zeigt den aktiven Punkt — dieselbe Aussage wie die
     Fläche, aber am Rand und damit auch im Augenwinkel lesbar. */
  body.mit-navigation #kopf nav a[aria-current="page"] {
    border-left-color: var(--mfi-primaer);
  }
  body.mit-navigation .kopf-fuss {
    margin-left: var(--abstand-0);
    margin-top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-3);
    padding-top: var(--abstand-4);
    border-top: var(--linie-duenn) solid var(--mfi-linie);
  }
}

/* ============================================================
   UPLOAD (Punkt 3) — der Fortschritt ist der Inhalt

   Texterkennung dauert bei einem mehrseitigen Scan etwa eine Minute.
   Ohne sichtbare Rückmeldung hält Werner das für einen Absturz — also
   bekommt jede Datei ihre eigene Zeile mit laufender Sekundenzahl.
   ============================================================ */
.upload { max-width: var(--breite-suche); }

.ablage-feld {
  margin: var(--abstand-5) 0;
  padding: var(--abstand-6);
  text-align: center;
  border: var(--linie-dick) dashed var(--mfi-linie-kraeftig);
  border-radius: var(--radius-gross);
  background: var(--mfi-flaeche);
  transition: border-color var(--uebergang), background var(--uebergang);
}
/* Beim Darüberziehen: die Fläche nimmt sichtbar an. */
.ablage-feld.bereit {
  border-color: var(--mfi-primaer);
  background: var(--mfi-primaer-hell);
}
.ablage-feld .fuss { margin-bottom: var(--abstand-0); }
.ablage-symbol {
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  border-radius: var(--radius-rund);
  background: var(--mfi-primaer-hell);
  color: var(--mfi-primaer);
  display: grid;
  place-items: center;
  /* `display: grid` macht aus der Umschliessung einen Block — und ein
     Block richtet sich nicht nach `text-align: center` der Ablage aus.
     Ohne diese Zeile klebt das Symbol links oben in der Fläche. */
  margin: var(--abstand-0) auto var(--abstand-3);
}
.ablage-symbol svg { width: var(--symbol-groesse-gross); height: var(--symbol-groesse-gross); }

.upload-liste { margin-top: var(--abstand-5); display: flex; flex-direction: column; gap: var(--abstand-2); }
.upload-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-4);
  align-items: baseline;
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-left: var(--linie-kante) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
}
.upload-name { font-weight: var(--gewicht-halbfett); font-family: var(--schriftfamilie-fest); }
.upload-stand { color: var(--mfi-text-leise); font-size: var(--schrift-sm); }

/* Die vier Ausgänge eines Uploads tragen dieselbe Farblogik wie die
   Ampel — aber die Ampel-Variablen, nicht die Markenfarben. */
.upload-zeile.laeuft    { border-left-color: var(--mfi-primaer); }
/* Seit Phase 14 ohne Ampelfarben: gelungen = --erfolg, fehlgeschlagen =
   --gefahr, und die Dublette — kein Fehler, sondern der Normalfall bei
   zweimal demselben Schein — als Auskunft in der hellen Aktionsfarbe. */
.upload-zeile.gut       { border-left-color: var(--erfolg);           background: var(--erfolg-flaeche); }
.upload-zeile.dublette  { border-left-color: var(--mfi-primaer-rand); background: var(--mfi-primaer-hell); }
.upload-zeile.schlecht  { border-left-color: var(--gefahr);           background: var(--gefahr-flaeche); }

/* ============================================================
   REVIEW-QUEUE (Punkt 4)
   ============================================================ */
/* ---- Reiter sehen aus wie Reiter ----
   Vorher waren es drei gleich grosse blaue Pillen nebeneinander; der
   ausgewählte war gefüllt. Man sah eine Knopfleiste und musste raten,
   dass sie den Inhalt darunter umschaltet. */
.reiter {
  display: flex;
  gap: var(--abstand-0);
  /* ---- Eine Zeile, nie zwei (Phase 14, Punkt 2) ----
     Auf 375 px stand in der Warteschlange "Abgelehnt" allein in einer
     zweiten Zeile — dieselbe Lesart wie beim Hauptmenü in Phase 11:
     zwei Gruppen, wo eine ist. Jetzt bleibt die Leiste einzeilig und
     rollt seitlich, wenn sie nicht passt. Dass es dort weitergeht,
     zeigt derselbe Randschatten wie bei den Tabellen (Muster siehe
     .tabelle-rahmen), nur mit dem Seitengrund als Abdeckung — die
     Reiter stehen auf dem Grund, nicht auf einer Fläche. Die Rollleiste
     ist ausgeblendet: der Schatten ist der Hinweis, und eine Leiste
     unter den Reitern läge über ihrer Unterlinie. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin-bottom: var(--abstand-4);
  /* Die Unterlinie als innerer Schatten statt als Rand: ein Rand läge
     ausserhalb des Rollbereichs, und die Kante des aktiven Reiters,
     die über ihr liegen soll, würde an ihr abgeschnitten. */
  box-shadow: inset 0 calc(var(--linie-duenn) * -1) 0 var(--mfi-linie);
  background:
    linear-gradient(to right, var(--mfi-grund) 30%, transparent) left center / var(--abstand-7) 100% no-repeat local,
    linear-gradient(to left, var(--mfi-grund) 30%, transparent) right center / var(--abstand-7) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--schatten-rand), transparent) left center / var(--abstand-4) 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--schatten-rand), transparent) right center / var(--abstand-4) 100% no-repeat scroll,
    var(--mfi-grund);
}
.reiter::-webkit-scrollbar { display: none; }
/* Reiter gibt es als Knopf (Warteschlange: schaltet den Inhalt um) und
   als Link (Stammdaten: jede Unterseite hat ihre eigene Adresse). Sie
   sehen gleich aus — der Unterschied ist, ob das Neuladen dorthin
   zurückführt, und der ist unsichtbar. */
.reiter > button, .reiter > a {
  color: var(--mfi-text-leise);
  font-weight: var(--gewicht-halbfett);
  text-decoration: none;
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-5);
  display: inline-flex;
  align-items: center;
  border-radius: var(--abstand-0);
  border: 0;
  border-bottom: var(--linie-dick) solid transparent;
  background: transparent;
  flex: 0 0 auto;
  white-space: nowrap;
}
.reiter > button:hover, .reiter > a:hover { background: transparent; color: var(--mfi-text); }
.reiter > button.aktiv, .reiter > a.aktiv {
  background: transparent;
  color: var(--mfi-text);
  border-bottom-color: var(--mfi-primaer);
}

/* Reiter auf dem Telefon mit schmalerem Innenabstand: so passen
   "Offen · Übernommen · Abgelehnt" und "Gewichtsarten · Nummernbereiche"
   auf 375 px in eine Zeile, ohne zu rollen. Rollen muss die Leiste erst
   darunter (Phase 14).

   Der Haltepunkt steht HIER und nicht im grossen Block für schmale
   Geräte weiter oben: dort stand er zuerst und wirkte nicht — gleiche
   Spezifität, und die Grundregel der Reiter kommt in der Datei später
   und gewann. Nachgemessen: 361 px Leiste in 343 px Platz. */
@media (max-width: 34rem) {
  .reiter > button, .reiter > a { padding-inline: var(--abstand-3); }
}

.queue-liste { display: flex; flex-direction: column; gap: var(--abstand-3); }
.queue-eintrag {
  display: block;
  padding: var(--abstand-4);
  text-decoration: none;
  color: inherit;
  /* Kein farbiger Balken links: er trug keine Aussage — jeder Eintrag
     hatte ihn. Farbe steht hier nur an den Markierungen, und die
     bedeuten etwas. */
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  transition: box-shadow var(--uebergang), border-color var(--uebergang);
}
.queue-eintrag:hover { box-shadow: var(--schatten); border-color: var(--mfi-linie-kraeftig); }
.queue-kopf { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
/* "zu prüfen" (Phase 13): der Vorgang wartet auf jemanden. In der
   Aktionsfarbe, hell hinterlegt — vorher Amber, die Farbe von "läuft
   bald ab". */
.merker-pruefen {
  background: var(--mfi-primaer-hell);
  color: var(--mfi-primaer);
  border: var(--linie-duenn) solid var(--mfi-primaer-rand);
}

/* Die Zeile Klartext je Vorgang. Was aufhält, steht halbfett in der
   Aktionsfarbe; die Zahl der Hinweise in Textfarbe. */
.vorgang-stand { margin: var(--abstand-2) 0 var(--abstand-0); font-size: var(--schrift-sm); }
.stand-haelt { color: var(--mfi-primaer); font-weight: var(--gewicht-halbfett); }

/* ---- Die Markierungen: benannt, nicht nur farbig ----
   Eine Warnung, die man suchen muss, ist keine.

   ---- Warum die Klasse `markierung` heisst und nicht `marke` ----
   Sie hiess zuerst `.marke` — genau wie die Wortmarke im Kopfbereich.
   Beide Regeln galten dann für beide Elemente, und das Logo trug die
   amberfarbene Pille einer Warnung. Kein Prüfsatz konnte das finden:
   die Farben stammen ordnungsgemäss aus dem Designsystem, das HTML ist
   gültig, und nur das AUSSEHEN war falsch. Gefunden hat es das Bedienen
   im Browser.

   Zwei Dinge mit einem Namen sind ein Ding zu wenig. */
.marken { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-2) 0; }
/* ---- Zwei Arten (Phase 13) ----
   HINWEIS: ruhig und grau — zum Gegenlesen, nichts ist kaputt.
   HÄLT AUF: in der Aktionsfarbe, kräftiger — hier ist etwas zu tun.
   Vorher trugen beide Ampelfarben (Amber und Rot), und fünf davon
   nebeneinander sahen aus wie eine Störung. Die Ampelfarben stehen
   seitdem nur noch für die Gültigkeit. */
/* ---- Lange Marken (Phase 17, Punkt 3) ----
   Mit --radius-rund (999px) war jede Marke eine Pille — solange sie
   einzeilig ist. "Klasse weicht ab: im Schein M2, in der Liste DAkkS M1"
   bricht auf 375 px um, und dann wurden die Enden zu Halbkreisen über
   die ganze Höhe: bei zwei Zeilen blieben dem Text 4 px bis zur
   Kruemmung, bei drei schnitt sie ihn an. Jetzt ein fester Radius von
   der halben Hoehe einer EINZEILIGEN Marke (gemessen 28,6 px, also
   --radius-gross mit 14 px): einzeilig sieht sie aus wie vorher,
   mehrzeilig behaelt sie gerade Seiten. Breiter als ihr Behaelter wird
   sie nie; ein einzelnes zu langes Wort bricht notfalls im Wort. */
.markierung {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-gross);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--mfi-flaeche-tief);
  color: var(--mfi-text);
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
}
.markierung-halt {
  background: var(--mfi-primaer-hell);
  color: var(--mfi-primaer);
  border-color: var(--mfi-primaer);
  font-weight: var(--gewicht-fett);
}
/* Die Werte einer Abweichung ("im Schein M2, in der Liste DAkkS M1"). */
.markierung-werte { font-weight: var(--gewicht-normal); }

/* Die Konflikte der Stammdaten benutzen seit Phase 14 dieselbe ruhige
   Hinweismarke wie die Warteschlange: überlappende Nummernbereiche sind
   ein Datenproblem, keine Aussage über die Gültigkeit eines Scheins. */

/* ---- Das Paar: Bild links, Werte rechts ----
   Auf schmalen Geräten untereinander, sonst nebeneinander. Das Bild
   bleibt beim Scrollen stehen — sonst wandert es aus dem Blick, sobald
   man die dritte Position bearbeitet. */
.pruef-paar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-5);
  margin-top: var(--abstand-4);
}
.pruef-bild { min-width: 0; }
.pruef-bild img {
  width: 100%;
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  background: var(--mfi-weiss);
}
.seiten-wahl { display: flex; gap: var(--abstand-2); flex-wrap: wrap; margin-bottom: var(--abstand-3); }
/* Die Seitenwahl ist eine Auswahl, kein Zeilenbefehl: sie behält den
   Rahmen, den `.knopf-still` seit Phase 9 nicht mehr hat. */
.seite-knopf {
  min-width: var(--tippflaeche);
  padding-inline: var(--abstand-3);
  border-color: var(--mfi-linie-kraeftig);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
}
.seite-knopf:hover { background: var(--mfi-flaeche-tief); border-color: var(--mfi-linie-kraeftig); }
.seite-knopf.aktiv {
  background: var(--mfi-primaer);
  color: var(--mfi-aktion-text);
  border-color: var(--mfi-primaer);
}

.pruef-werte { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; }

.pos {
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-left: var(--linie-kante) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  padding: var(--abstand-4);
  background: var(--mfi-flaeche);
}
/* Eine Position, die die Übernahme aufhält: ihre Kante in der hellen
   Aktionsfarbe. Vorher Rot — und weil beim Import JEDE Position
   "Gewichtsart wählen" trägt, stand ein gewöhnlicher Schein mit 21 roten
   Kanten da. Hell und nicht kräftig, damit sie sich von der
   ausgewählten Position (Rahmen in der vollen Aktionsfarbe) abhebt. */
.pos-sperrt { border-left-color: var(--mfi-primaer-rand); }

/* ---- Die ausgewählte Position ----
   Ein Rahmen und keine andere Kantenfarbe: die linke Kante trägt schon
   eine Aussage (hellblau = hält die Übernahme auf, seit Phase 13). Zwei Bedeutungen auf einer Kante
   heißt, dass eine davon verschwindet — dieselbe Lektion wie bei
   `.marke` und `.markierung` in Phase 4. */
.pos-aktiv {
  outline: var(--linie-kante) solid var(--mfi-primaer);
  outline-offset: calc(var(--linie-kante) * -1);
  background: var(--mfi-flaeche-tief);
}
.pos-kopf { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.pos-nummer {
  font-family: var(--schriftfamilie-fest);
  font-size: var(--schrift-xl);
  font-weight: var(--gewicht-fett);
}
.winzig { font-size: var(--schrift-xs); min-height: var(--abstand-6); padding: var(--abstand-1) var(--abstand-3); }

/* Der Rohtext der Fundstelle — das, was auf dem Blatt stand. */
.rohtext {
  font-family: var(--schriftfamilie-fest);
  font-size: var(--schrift-sm);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--mfi-flaeche-tief);
  border-radius: var(--radius-klein);
  margin: var(--abstand-2) 0;
  overflow-wrap: anywhere;
}

.pos-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--breite-feld), 1fr));
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.pos-feld { display: flex; flex-direction: column; gap: var(--abstand-1); }
.pos-beschriftung { font-size: var(--schrift-sm); color: var(--mfi-text-leise); font-weight: var(--gewicht-halbfett); }
.pos-feld input, .vorgang-wahl select {
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-3);
  font: inherit;
  font-variant-numeric: tabular-nums;
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  width: 100%;
}
.pos-feld input:disabled { background: var(--mfi-flaeche-tief); }
.pos-stand { font-size: var(--schrift-xs); color: var(--mfi-text-leise); min-height: var(--abstand-4); }

/* Was beim Import erkannt wurde, steht leise daneben — es ist Herkunft,
   nicht Warnung. */
.pos-damals { font-size: var(--schrift-xs); color: var(--mfi-text-leise); font-style: italic; }

/* ---- Die Gewichtsart: eine Auswahl, keine Eingabe ----
   Sie steht als erstes Feld der Position, weil aus ihr der Namensraum
   entsteht und ohne sie nichts in den Bestand geht (Phase 6, Punkt 1). */
.pos-art select, .alle-arten select {
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-3);
  font: inherit;
  border: var(--linie-duenn) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
  color: var(--mfi-text);
  max-width: 100%;
  min-width: 0;
}
/* ---- Die Auswahl für alle Positionen (Phase 15) ----
   Eine Auswahlliste ist so breit wie ihr längster Eintrag, und ein
   Eintrag heisst "Name (kennung)". Mit den drei kurzen Arten der alten
   Demo fiel das nie auf; mit den 16 Arten der echten Liste war sie auf
   375 px 406 px breit ("Faßpaletten, quadratisch (fasspaletten-
   quadratisch)") und schob die Prüfmaske seitwärts. `max-width` allein
   half nicht: als Kind der umbrechenden Zeile .entscheiden war das Label
   nie schmaler als sein Inhalt (min-width: auto gewinnt gegen
   max-width). Jetzt steht es in einer eigenen Zeile und darf schmaler
   werden; die Auswahl behält ihre Breite, solange sie passt. */
.alle-arten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-1);
  margin-bottom: var(--abstand-3);
  flex: 1 1 100%;
  min-width: 0;
}
/* Die Kennung ist ein Bezeichner — dieselbe feste Schrift wie beim
   Namensraum, damit man sie als solchen liest. */
/* Rolle: Auswahl bzw. Text, darunter der ausdrückliche Schritt
   (Phase 8). Untereinander, damit der Knopf nicht wie ein Teil der
   Auswahl aussieht. */
/* Die Rolle eines Administrators steht als Text, nicht als Auswahl —
   aber genauso hoch, damit seine Zeile nicht niedriger ist als die
   eines Lesers. `display: flex` auf dem TEXT, nicht auf der Zelle. */
td.stapel > .rollen-wert {
  display: flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding-inline: var(--abstand-2);
}

/* Was eine Rolle darf — einmal, über der Nutzertabelle. */
.rollen-liste {
  margin: var(--abstand-0) 0 var(--abstand-4);
  padding: var(--abstand-0);
  list-style: none;
  display: grid;
  gap: var(--abstand-1);
  color: var(--mfi-text-leise);
  font-size: var(--schrift-sm);
}
.rollen-liste strong {
  display: inline-block;
  min-width: var(--breite-rolle);
  color: var(--mfi-text);
  font-family: var(--schriftfamilie-fest);
}

/* `td.rollen-zelle` und `td.kennung` sind seit Phase 10 `td.stapel`
   (oben bei den Tabellen) — dieselbe Regel für alle Zellen mit mehr als
   einem Ding darin, statt je einer eigenen. */

/* ---- Die Markierungen von DAMALS sind grau ----
   Sie stehen unter "Beim Import erkannt" und sagen, wie die Maschine
   geurteilt hat. In denselben Farben wie der aktuelle Stand wären sie
   ein zweiter Satz Warnungen zu Werten, die es so nicht mehr gibt —
   und die Farbe, die etwas bedeutet, verliert ihre Bedeutung, wenn sie
   an zwei Stellen etwas anderes heisst. */
.marken-damals .markierung,
.marken-damals .markierung-halt {
  background: var(--mfi-flaeche-tief);
  color: var(--mfi-text-leise);
  border-color: var(--mfi-linie);
  /* Gestrichelt: seit Phase 13 sind auch die AKTUELLEN Hinweise grau —
     die von damals brauchen ein eigenes Zeichen, dass sie Geschichte
     sind. */
  border-style: dashed;
  font-weight: var(--gewicht-halbfett);
}
.pos-stand.erfolg { color: var(--erfolg); }
.pos-stand.fehler { color: var(--gefahr); }

/* ---- Der abgeleitete Namensraum ----
   Kein Eingabefeld: er folgt aus Präfix bzw. Gewichtsart und Nennwert.
   Deshalb sieht er auch nicht wie eines aus — die Form sagt schon,
   dass hier nichts einzutippen ist. */
.pos-namensraum {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  margin-top: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  border-left: var(--linie-kante) solid var(--mfi-linie-kraeftig);
  background: var(--mfi-flaeche-tief);
  border-radius: var(--radius);
}
.pos-namensraum strong { font-family: var(--schriftfamilie-fest); }

.vorgang-wahl { display: flex; flex-direction: column; gap: var(--abstand-1); margin-top: var(--abstand-3); }
.trotzdem { display: flex; align-items: center; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.trotzdem input { width: var(--kasten-groesse); height: var(--kasten-groesse); }

details.erkannt, details.korrekturen, details.technisch,
details.schein-seiten { margin-top: var(--abstand-2); }

/* ---- Der Schein als Bilder (Phase 7, Punkt 3) ----
   Fuer die Rolle kunde der einzige Weg zum Schein, fuer die anderen der
   schnellere. Das Bild wird auf die Breite des Kastens gebracht — ein
   300-dpi-Scan ist 1241 Punkte breit und wuerde die Seite sonst
   sprengen. */
.seiten-ansicht { margin-top: var(--abstand-2); }
.seiten-ansicht img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--abstand-2);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  background: var(--mfi-weiss);
}

/* ---- "Details" ist leise ----
   Es steht unter der Meldung und soll sie nicht überstrahlen: wer die
   Arbeitsweise wissen will, klappt auf; alle anderen lesen den Satz
   darüber (Phase 6, Punkt 3). */
details.technisch > summary {
  font-size: var(--schrift-sm);
  color: var(--mfi-text-leise);
  cursor: pointer;
}
details.technisch[open] > summary { margin-bottom: var(--abstand-2); }

.entscheiden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-4);
  border-top: var(--linie-duenn) solid var(--mfi-linie);
}
.entscheiden .meldung { flex: 1 1 100%; margin: var(--abstand-0); }
.entscheiden .ausgabe { flex: 1 1 100%; margin: var(--abstand-0); }

@media (min-width: 62rem) {
  /* Erst hier stehen Bild und Werte NEBENEINANDER. Darunter wäre das
     Bild so schmal, dass man die Ziffern nicht mehr lesen kann — und
     dann ist Nebeneinander schlechter als Untereinander. */
  .pruef-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pruef-bild { position: sticky; top: var(--abstand-8); }
}

/* ============================================================
   STAMMDATENPFLEGE (Punkt 5)
   ============================================================ */
.konflikte { margin: var(--abstand-4) 0; }
.konflikte h2 { margin-top: var(--abstand-0); font-size: var(--schrift-lg); }
.konflikt {
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-left: var(--linie-kante) solid var(--mfi-linie-kraeftig);
  border-radius: var(--radius);
  padding: var(--abstand-3) var(--abstand-4);
  margin-bottom: var(--abstand-3);
  background: var(--mfi-flaeche);
}
/* Widersprüchlich heisst: verschiedene Nennwerte oder Klassen im
   selben Nummernraum — der Fall, der tatsächlich schadet. Er bekommt
   die Kante der Aktionsfarbe (hier ist etwas zu tun), aber kein Rot:
   bis Phase 14 trug er Ampelrot, wie ein abgelaufener Schein. */
.konflikt-schwer { border-left-color: var(--mfi-primaer-rand); }
.konflikt strong { font-family: var(--schriftfamilie-fest); margin-right: var(--abstand-3); }
.konflikt .fuss { margin: var(--abstand-1) 0 var(--abstand-0); }

/* ---- Leise Felder ----
   Eine Tabelle, in der jede Zelle einen Eingaberahmen trägt, sieht aus
   wie ein Formular und liest sich wie keines. Der Rahmen erscheint
   beim Darüberfahren und beim Hineingehen — bedienbar bleibt alles,
   sichtbar wird es erst, wenn man hinwill (Entwurf, Befund 3). */
table input, table select {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: var(--abstand-1) var(--abstand-2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  border: var(--linie-duenn) solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--mfi-text);
  transition: background var(--uebergang), border-color var(--uebergang);
  /* ---- Abgeschnitten, aber SICHTBAR abgeschnitten ----
     Ein Eingabefeld bricht nicht um. "Müller Waagenb" stand da, als
     hiesse der Kunde so — ohne dass man sah, dass etwas fehlt. Jetzt
     endet ein zu langer Wert mit "…", und der volle Text steht als
     Sprechblase am Feld (feldZelle, nutzerFeld). Beim Hineingehen ist
     ohnehin alles da. */
  text-overflow: ellipsis;
}
table input:hover, table select:hover,
table input:focus, table select:focus {
  border-color: var(--mfi-linie-kraeftig);
  background: var(--mfi-flaeche);
}
table input:disabled {
  background: var(--mfi-flaeche-tief);
  border-color: transparent;
}

details.pflege { margin-top: var(--abstand-5); }
.pflege-innen {
  padding: var(--abstand-4);
  border: var(--linie-duenn) solid var(--mfi-linie);
  border-radius: var(--radius);
  background: var(--mfi-flaeche);
}

/* Bilder (Punkt 6) und Nutzerverwaltung (Punkt 7) */
.foto-pflege { margin-top: var(--abstand-5); padding-top: var(--abstand-4); border-top: var(--linie-duenn) solid var(--mfi-linie); }
.foto-pflege .knopf { cursor: pointer; }
/* `.nutzer-knoepfe` stand hier als `display: flex` — auf einer
   Tabellenzelle. Das war die rechte Spalte der Nutzerliste mit ihren
   eigenen Linien. Sie ist jetzt `td.stapel` wie jede andere Zelle mit
   mehreren Dingen darin. */