/* Lean QM Audit – Gestaltung nach dem Entwurf aus Claude Design.
 *
 * Quelle: docs/Design/webapplikation-mit-seitenmen/project/Audit App.dc.html
 * Farben, Größen und Abstände sind von dort übernommen.
 *
 * Aufbau der Seite (Vollbild, nur die Inhaltsfläche scrollt):
 *
 *   +--------------------------------------------------+
 *   | Kopfzeile 52 px                                  |
 *   +--------------------------------------------------+
 *   | Meldungsleiste (nur bei Bedarf)                  |
 *   +-------------+------------------------------------+
 *   | Seitenmenü  | Inhalt (scrollt)                   |
 *   | 212 / 56 px |                                    |
 *   +-------------+------------------------------------+
 *
 * Der Entwurf ist hell gehalten und bringt keine dunkle Farbwelt mit.
 * Deshalb gibt es hier bewusst keinen Dunkelmodus – siehe docs/Test/AUD-17.md.
 */

:root {
  /* --- Farben aus dem Entwurf ------------------------------------- */
  --grund:            oklch(97.5% 0.002 250);   /* Seitenhintergrund */
  --flaeche:          #ffffff;                  /* Kopfzeile, Karten */
  --flaeche-leise:    oklch(98% 0.002 250);     /* Abschnittsköpfe */
  --seitenmenue:      oklch(96% 0.003 250);

  --rand:             oklch(90% 0.004 250);
  --rand-leise:       oklch(93% 0.004 250);
  --rand-zart:        oklch(95% 0.004 250);

  --text:             oklch(22% 0.005 250);
  --text-gedaempft:   oklch(48% 0.006 250);
  --text-leise:       oklch(55% 0.006 250);

  /* Akzent: Vorgabe des Entwurfs, wird vom Mandanten überschrieben.
   * Seit AUD-58 in oklch auf Farbton 250 – wie alle Farben des Blattes. */
  --akzent:           oklch(52% 0.13 250);
  --akzent-flaeche:   oklch(96% 0.025 250);     /* aktiver Menüpunkt */
  --akzent-text:      oklch(42% 0.11 250);
  --akzent-auswahl:   oklch(96% 0.025 250);     /* gewählte Zeile, neutral */

  --meldung-grund:    oklch(96% 0.025 250);
  --meldung-rand:     oklch(89% 0.045 250);
  --meldung-text:     oklch(42% 0.11 250);

  /* --- Schaltflaechen (AUD-58) ------------------------------------
   *
   * **Eine gefuellte Hauptaktion je Maske, alles andere Umriss.**
   *
   * Die vier Funktionsfarben aus AUD-49 sind damit weg. Vier gefuellte,
   * gesaettigte Knoepfe nebeneinander lesen sich als vier gleich wichtige
   * Aktionen - genau der laute, prototypische Eindruck, den Bjoern gemeldet
   * hat. Der Ausreisser mit weisser Schrift auf Blau war ein Symptom davon:
   * Er entstand nur, weil die Fuellung so dunkel sein musste.
   *
   * Jetzt tragen alle Umrissknoepfe dunklen Text auf nahezu weissem Grund
   * und liegen deutlich ueber 4,5:1; die gefuellten tragen weisse Schrift
   * auf 50 % Helligkeit, ebenfalls darueber. **Keine Ausnahme mehr noetig.**
   */
  --knopf-rand:         oklch(87% 0.005 250);
  --knopf-text:         oklch(30% 0.006 250);

  /* Die Hauptaktion. Fest und **nicht** die Mandantenfarbe: Bjoern am
   * 08.09.2026 auf Nachfrage - Speichern ist ueberall gruen. Die
   * Mandantenfarbe traegt weiterhin Fokusrahmen, Verweise und das Menue. */
  --knopf-primaer:      oklch(50% 0.115 150);
  --knopf-primaer-rand: oklch(45% 0.115 150);

  /* Die Auditmaske hat eine andere Hauptaktion als Speichern: den
   * Fragenkatalog. Sie traegt den Farbton ihrer Welt. */
  --knopf-primaer-audit:      oklch(50% 0.13 250);
  --knopf-primaer-audit-rand: oklch(45% 0.13 250);

  --knopf-gefahr:       oklch(98.5% 0.012 25);
  --knopf-gefahr-rand:  oklch(87% 0.055 25);
  --knopf-gefahr-text:  oklch(47% 0.17 25);

  /* --- Kennzeichen (AUD-58) ---------------------------------------
   *
   * Vorher trugen alle Statusmarken denselben grauen Rand, unabhaengig von
   * der Bedeutung. Jetzt vier Auspraegungen bei **gleicher Geometrie** -
   * die Form sagt „Zustand", die Farbe sagt „welcher".
   */
  --kennzeichen-neutral:      oklch(96.5% 0.003 250);
  --kennzeichen-neutral-rand: oklch(90% 0.004 250);
  --kennzeichen-neutral-text: oklch(40% 0.006 250);

  --kennzeichen-blau:      oklch(96% 0.025 250);
  --kennzeichen-blau-rand: oklch(89% 0.045 250);
  --kennzeichen-blau-text: oklch(42% 0.11 250);

  --kennzeichen-gruen:      oklch(96% 0.025 150);
  --kennzeichen-gruen-rand: oklch(88% 0.05 150);
  --kennzeichen-gruen-text: oklch(41% 0.10 150);

  --kennzeichen-rot:      oklch(96% 0.025 25);
  --kennzeichen-rot-rand: oklch(88% 0.05 25);
  --kennzeichen-rot-text: oklch(47% 0.16 25);

  --fehler:           oklch(58% 0.17 25);
  --fehler-grund:     oklch(93% 0.05 25);
  --fehler-text:      oklch(47% 0.16 25);
  --erfolg:           oklch(62% 0.13 150);
  --laufend:          oklch(58% 0.12 250);

  /* --- Maße -------------------------------------------------------- */
  --kopfhoehe:        52px;
  --menuebreite:      212px;
  --menuebreite-schmal: 56px;

  /* --- Eingabeelemente (Design.md, Regel 15) -----------------------
   *
   * Ein Maß für alle Steuerelemente: die Höhe der Suchauswahl. Jedes Feld,
   * jede Schaltfläche nimmt eine dieser drei Höhen – niemals eine eigene
   * Zahl, sonst steht in der nächsten Maske wieder etwas 2 px daneben.
   */
  --feld-hoehe:         34px;   /* der Regelfall in Formularen */
  --feld-hoehe-kompakt: 30px;   /* Kopfzeile und Leisten über Listen */
  --feld-hoehe-klein:   24px;   /* Sammelwahl innerhalb einer Gruppe */

  --feld-rand:          oklch(88% 0.004 250);
  --feld-grund-aus:     oklch(97% 0.002 250);   /* readonly und gesperrt */
  --feld-text-aus:      oklch(45% 0.006 250);
  --feld-schrift:       12.5px;

  /* Der Fokusring folgt der Mandantenfarbe. `--akzent` wird zur Laufzeit
   * überschrieben, also lässt sich der Ring nicht vorher ausrechnen.
   *
   * **Nicht `color-mix()`**, obwohl es hier nicht driften würde: Mit
   * AUD-58 ist kein gemischter Wert mehr im Blatt, und eine einzige
   * Ausnahme wäre die Stelle, an der die nächste dazukommt. Die
   * relative Farbschreibweise nimmt Helligkeit, Buntheit und Farbton
   * unverändert und setzt nur die Deckkraft. */
  --feld-ring:          0 0 0 3px oklch(from var(--akzent) l c h / 28%);

  /* Die Karte tritt hinter ihren Inhalt zurueck: leiser Rand, flacher
   * Schatten statt einer kraeftigen Kante (AUD-58). */
  --karte-rand:       oklch(92.5% 0.004 250);
  --karte-schatten:   0 1px 2px rgba(16, 24, 40, .04);

  /* Der Winkel an Aufklappern und Auswahlfeldern. Gezeichnet, nicht
   * getippt - siehe `.winkel`. */
  --winkel-farbe:     oklch(58% 0.006 250);
  --winkel-staerke:   2.2px;

  --radius-klein:     6px;
  --radius:           7px;
  --radius-gross:     9px;
  --radius-karte:     10px;

  --schatten-flyout:  0 10px 28px oklch(20% 0.01 250 / .16);
}

/* Der Entwurf nutzt Inter. Die Schrift wird NICHT von einem fremden Server
 * geladen (DSGVO, siehe docs/09-compliance.md) – ist sie lokal vorhanden,
 * wird sie genommen, sonst greift die Systemschrift. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--grund);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* Ein eigenes display: würde das hidden-Attribut aushebeln – deshalb hier
   ausdrücklich Vorrang für hidden. */
[hidden] { display: none !important; }

::selection { background: oklch(89% 0.045 250); }

input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; }

a { color: oklch(48% 0.12 250); text-decoration: none; }
a:hover { color: oklch(38% 0.14 250); text-decoration: underline; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: oklch(85% 0.004 250); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 13px; }

/* ================================================================= Rahmen */

.seite {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  flex: none;
  height: var(--kopfhoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  z-index: 20;
}

.kopf .links { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Hamburger zum Ein- und Ausklappen des Seitenmenüs */
.menue-schalter {
  width: 30px; height: 30px;
  border: none; background: none; padding: 0;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.menue-schalter:hover { background: var(--rand-zart); }
.menue-schalter span {
  display: block; width: 16px; height: 2px;
  background: oklch(35% 0.006 250); border-radius: 2px;
}
.menue-schalter span + span { margin-top: 3px; }

.kopf .titel { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kopf .titel .text {
  font-size: 14px; font-weight: 600; letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopf .titel .anzahl {
  font-size: 12px; color: var(--text-leise); font-variant-numeric: tabular-nums;
}

.kopf .rechts { display: flex; align-items: center; gap: 9px; flex: none; }
.kopf .benutzer { text-align: right; line-height: 1.3; }
.kopf .benutzer .name { font-size: 12.5px; font-weight: 600; }
.kopf .benutzer .rolle { font-size: 11px; color: var(--text-gedaempft); }

.kuerzel {
  width: 32px; height: 32px; border-radius: 999px;
  background: oklch(96% 0.025 250);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: oklch(42% 0.11 250); flex: none;
}

.kopf .mandantenlogo { height: 26px; width: auto; border-radius: 3px; flex: none; }

/* Anwendungs-Icon oben links */
.anwendungsicon { display: flex; flex: none; line-height: 0; }
.anwendungsicon img { width: 26px; height: 26px; display: block; }
.anwendungsicon:hover { text-decoration: none; }

/* -------------------------------------------------------- Meldungsleiste */

/* Entspricht der Systemmeldung des Entwurfs. Hinweise und Erfolgsmeldungen
 * blenden sich nach kurzer Zeit aus, Fehler bleiben stehen. */
.meldungen { flex: none; }

.meldung {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  font-size: 12.5px; font-weight: 500;
  background: var(--meldung-grund);
  border-bottom: 1px solid var(--meldung-rand);
  color: var(--meldung-text);
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
  max-height: 34px; overflow: hidden;
}
.meldung.fehler {
  background: var(--fehler-grund);
  border-bottom-color: var(--fehler);
  color: var(--fehler-text);
}
.meldung.verblasst { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* Hinweis *im Inhalt* - nicht zu verwechseln mit der Meldungsleiste oben.
 * Die traegt display:flex und max-height:34px; beides ist fuer eine
 * einzeilige Leiste gedacht und wuerde einen mehrzeiligen Hinweis zerlegen
 * und beschneiden. */
.hinweiskasten {
  padding: 10px 14px;
  border: 1px solid var(--meldung-rand);
  border-radius: var(--radius);
  background: var(--meldung-grund);
  color: var(--meldung-text);
  font-size: 12.5px; line-height: 1.55;
}

/* ----------------------------------------------------------------- Körper */

.koerper { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ------------------------------------------------------------ Seitenmenü */

.seitenmenue {
  flex: none;
  width: var(--menuebreite);
  display: flex; flex-direction: column;
  background: var(--seitenmenue);
  border-right: 1px solid var(--rand);
  transition: width .18s ease;
  min-height: 0;
}
.seite.menue-schmal .seitenmenue { width: var(--menuebreite-schmal); }

.seitenmenue .eintraege {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}

.menuepunkt {
  display: flex; align-items: center; gap: 11px;
  height: 36px; padding: 0 10px;
  border-radius: 8px;
  color: oklch(32% 0.006 250);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  border: none; background: none; width: 100%;
  cursor: pointer; text-align: left;
}
.menuepunkt:hover { background: oklch(93% 0.004 250); text-decoration: none; color: oklch(32% 0.006 250); }
.menuepunkt.aktiv {
  background: var(--akzent-flaeche);
  color: var(--akzent-text);
  font-weight: 600;
}
/* Menüpunkte ohne Ziel – die Funktion entsteht mit einer späteren Karte. */
.menuepunkt.geplant { color: var(--text-leise); cursor: default; }
.menuepunkt.geplant:hover { background: none; }

.menuepunkt .sinnbild {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.menuepunkt .beschriftung {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menuepunkt .winkel {
  font-size: 11px; color: var(--text-leise);
  transform: rotate(-90deg); transition: transform .15s ease;
}
.menuepunkt[aria-expanded="true"] .winkel { transform: rotate(0deg); }

.menuepunkt .marke {
  font-size: 10px; color: var(--text-leise);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0 5px;
}

.unterpunkte { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.unterpunkt {
  font-size: 12.5px; color: oklch(46% 0.006 250);
  padding: 7px 10px 7px 41px; border-radius: var(--radius);
  text-decoration: none; display: block;
}
.unterpunkt:hover { background: oklch(93% 0.004 250); text-decoration: none; }

/* Im schmalen Zustand bleiben nur die Sinnbilder stehen. */
.seite.menue-schmal .menuepunkt { padding: 0; justify-content: center; }
.seite.menue-schmal .menuepunkt .beschriftung,
.seite.menue-schmal .menuepunkt .winkel,
.seite.menue-schmal .menuepunkt .marke,
.seite.menue-schmal .unterpunkte,
.seite.menue-schmal .menue-fuss .beschriftung,
.seite.menue-schmal .menue-fuss .winkel,
.seite.menue-schmal .menue-version { display: none; }

.menue-abschnitt {
  padding: 10px 10px 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-leise);
}
/* Im schmalen Menue bleibt statt der Ueberschrift nur ein Trennstrich -
   der Text passt in 56 px nicht ohne Ueberlauf. */
.seite.menue-schmal .menue-abschnitt {
  font-size: 0; padding: 6px 0 0; margin: 4px 8px 0;
  border-top: 1px solid var(--rand);
}

.menue-fuss { flex: none; padding: 6px 8px; border-top: 1px solid oklch(91% 0.004 250); }
.menue-version {
  flex: none; padding: 10px 14px;
  font-size: 10.5px; color: oklch(60% 0.006 250);
  border-top: 1px solid var(--rand);
}

/* ------------------------------------------------------------- Ausklapper */

/* Bereichswahl in der Fußzeile: als <details> gebaut, damit sie auch ohne
   JavaScript aufgeht. Der Ausklapper liegt über dem Inhalt. */
.bereichswahl-fuss { position: relative; }
.bereichswahl-fuss > summary { list-style: none; cursor: pointer; }
.bereichswahl-fuss > summary::-webkit-details-marker { display: none; }
.bereichswahl-fuss[open] > summary { background: var(--akzent-flaeche); color: var(--akzent-text); }
.bereichswahl-fuss[open] > summary .winkel { transform: rotate(0deg); }
.bereichswahl-fuss .flyout { position: absolute; bottom: 0; left: calc(100% + 8px); }
/* Ein eigenes display: am Kind haebelt die Browser-Regel fuer geschlossene
   <details> aus - deshalb hier ausdruecklich ausblenden. */
.bereichswahl-fuss:not([open]) .flyout { display: none; }

.flyout {
  min-width: 200px;
  background: var(--flaeche); border: 1px solid oklch(89% 0.004 250);
  border-radius: var(--radius-gross); box-shadow: var(--schatten-flyout);
  padding: 5px; z-index: 200;
  display: flex; flex-direction: column; gap: 1px;
}
.flyout button, .flyout a {
  font-size: 12.5px; font-weight: 500; color: oklch(32% 0.006 250);
  padding: 9px 11px; border-radius: var(--radius);
  border: none; background: none; text-align: left; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.flyout button:hover, .flyout a:hover { background: oklch(95% 0.004 250); text-decoration: none; }
.flyout button.aktiv { background: var(--akzent-flaeche); color: var(--akzent-text); font-weight: 600; }

/* --------------------------------------------------------------- Inhalt */

.inhalt {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; min-width: 0;
}
/* Kein Kind der Inhaltsflaeche darf schrumpfen. Ohne diese Zeile quetscht der
 * Flex-Container hohe Elemente zusammen, bis ihr Inhalt herauslaeuft - zu
 * sehen gewesen am Hinweiskasten der Maske Ansicht-Standard im Modus Experte.
 * Gescrollt wird die Flaeche als Ganzes, nicht das einzelne Element. */
.inhalt > * { flex: none; }

/* --------------------------------------------------------- Abschnitte */

.abschnitt {
  flex: none;
  background: var(--flaeche);
  border: 1px solid var(--karte-rand);
  border-radius: var(--radius-karte);
  box-shadow: var(--karte-schatten);
  overflow: hidden;
}

/* **Zarte Toenung plus eine 3-px-Kante links** statt einer vollen Farbflaeche
 * (AUD-58). Die Welt bleibt ablesbar, die Karte tritt hinter ihren Inhalt
 * zurueck.
 *
 * Die Weltfarben stehen als Merkmale (`--welt-kopf`, `--welt-linie`,
 * `--welt-kante`) an der Seite oder am Abschnitt; hier werden sie nur
 * benutzt. Auf einer neutralen Maske greift jeweils der Ersatzwert - dann
 * ist die Kante durchsichtig und der Kopf grau wie zuvor. **Damit braucht
 * es keine zweite Regel je Welt mehr**, und ein Abschnitt mit eigener Welt
 * (die Feststellung in der Massnahmenmaske) hebt sich von selbst ab. */
.abschnitt > .kopfleiste {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--welt-kopf, var(--flaeche-leise));
  border-bottom: 1px solid var(--welt-linie, var(--rand-leise));
  box-shadow: inset 3px 0 0 var(--welt-kante, transparent);
  border-radius: 0;
  width: 100%; border-left: none; border-right: none; border-top: none;
  cursor: pointer; text-align: left;
}
.abschnitt > .kopfleiste .name { font-size: 13px; font-weight: 600; }
.abschnitt > .kopfleiste .neben { font-size: 11.5px; color: oklch(50% 0.006 250); flex: 1; }
.abschnitt > .kopfleiste .winkel { flex: none; }
.abschnitt > .kopfleiste[aria-expanded="false"] .winkel { transform: rotate(-90deg); }

/* Der Winkel ist **gezeichnet, nicht getippt** (AUD-58).
 *
 * Vorher stand dort das Schriftzeichen `⌄`. Das sah je nach Schriftart
 * anders aus, sass nie ganz mittig und wirkte wie ein Platzhalter. Jetzt
 * zwei Kanten eines Quadrats, um 45 Grad gedreht - dieselbe Strichstaerke
 * wie ueberall, und es dreht sich sauber mit. */
.winkel {
  position: relative; display: inline-block;
  width: 14px; height: 14px;
  transition: transform .15s ease;
}
.winkel::before {
  content: ""; position: absolute; left: 3px; top: 2px;
  width: 7px; height: 7px;
  border-right: var(--winkel-staerke) solid var(--winkel-farbe);
  border-bottom: var(--winkel-staerke) solid var(--winkel-farbe);
  transform: rotate(45deg);
}
.abschnitt > .kopfleiste[aria-expanded="false"] + .abschnitt-inhalt { display: none; }

.abschnitt-inhalt { padding: 18px 16px 20px; }

/* ------------------------------------------------------------- Kacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid oklch(91% 0.004 250);
  border-radius: var(--radius-karte);
  padding: 14px;
}
.kachel h2 { font-size: 11.5px; font-weight: 600; color: var(--text-gedaempft); margin: 0; }
.kachel .wert {
  font-size: 30px; font-weight: 700; line-height: 1.15;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
/* Erlaeuternder Kleintext. Galt bisher nur in der Kachel, wird aber auch
 * daneben verwendet - etwa auf der Anmeldeseite und in der Hilfe. */
.fussnote { font-size: 11.5px; color: var(--text-leise); }
.kachel .fussnote { margin: .35rem 0 0; }

/* ------------------------------------------------------------ Formulare */

.felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 20px;
}
/* **Ein Abstand, eine Schrift** (AUD-58). Vorher standen zwischen
 * Beschriftung und Feld mal 4, mal 6 px, und die Beschriftungen trugen zwei
 * Grautöne und zwei Schriftstärken - das liest sich als Unruhe, ohne dass
 * man den Grund benennen kann. */
label { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
label > span:first-child,
.feldname {
  font-size: 11.5px; font-weight: 600;
  color: oklch(45% 0.006 250); letter-spacing: .01em;
}

/* Ein Feld, ein Aussehen (Design.md, Regel 15).
 *
 * Die Auswahl geht über **Ausnahmen**, nicht über eine Aufzählung der Typen:
 * Ein `input` ist ein Textfeld, solange es nicht ausdrücklich etwas anderes
 * ist. Mit einer Aufzählung fehlten `date` und `time` – genau der Fehler,
 * den AUD-35 gemeldet hat. Kommt morgen ein `email`- oder `tel`-Feld dazu,
 * sieht es von sich aus richtig aus.
 *
 * Die Schriftgröße gehört mit dazu: Ein Datumsfeld ohne `font-size` nimmt
 * die Vorgabe des Browsers (13,3 px) und steht neben einem Auswahlfeld mit
 * 12,5 px erkennbar daneben. Die Schriftart kommt schon aus dem Grundriss
 * weiter oben (`input, select, textarea, button { font-family: inherit }`).
 */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=range]),
select,
textarea,
.suchauswahl-feld {
  height: var(--feld-hoehe); padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--feld-rand);
  font-size: var(--feld-schrift);
  background: var(--flaeche); color: var(--text);
  width: 100%;
}

/* Das Textfeld wächst, deshalb Polster statt Höhe. */
textarea { height: auto; min-height: calc(var(--feld-hoehe) * 2); padding: 8px 10px; }

/* Fokus: Rahmen **und** Ring. Der Rahmen allein ist auf hellem Grund kaum
 * zu sehen; der Ring nennt die Stelle, an der man gerade tippt. */
input:focus, select:focus, textarea:focus, .suchauswahl-feld:focus {
  outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring);
}

/* Nicht änderbar sieht überall gleich aus – gleich, ob `readonly` (Feld
 * bleibt im Formular) oder `disabled` (Feld wird nicht gesendet). */
input[readonly], textarea[readonly],
input:disabled, select:disabled, textarea:disabled {
  background: var(--feld-grund-aus); color: var(--feld-text-aus);
}
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

/* Datum und Zeit: der Knopf für den Kalender beziehungsweise die Uhr gehört
 * zum Feld und bekommt dieselbe Farbe wie der übrige Text. */
input[type=date], input[type=time], input[type=datetime-local] { padding-right: 6px; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* Datei wählen: der Browser malt hier seinen eigenen Knopf. Rahmen und Höhe
 * kommen von uns, damit das Feld in der Reihe nicht herausfällt. */
input[type=file] {
  height: var(--feld-hoehe); width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text);
  font-family: inherit; font-size: 12px;
}
input[type=file]::file-selector-button {
  height: 22px; margin-right: 10px; padding: 0 9px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius-klein);
  background: var(--flaeche-leise); color: var(--text);
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--feld-grund-aus); }

/* Schalter und Radioknopf: nicht auf die Feldhöhe aufblasen, aber überall
 * gleich groß und in der Mandantenfarbe. */
/* **Ein sichtbarer Rand** (AUD-58). Vorher war das Kästchen randlos und im
 * leeren Zustand kaum als Bedienelement zu erkennen - es sah aus wie ein
 * heller Fleck. `accent-color` färbt den angehakten Zustand weiterhin in der
 * Mandantenfarbe; der Rand wirkt nur davor. */
input[type=checkbox], input[type=radio] {
  width: 16px; height: 16px; margin: 0; flex: none;
  accent-color: var(--akzent); cursor: pointer;
}
input[type=checkbox]:not(:checked), input[type=radio]:not(:checked) {
  appearance: none; -webkit-appearance: none;
  background: var(--flaeche);
  border: 1px solid oklch(74% 0.006 250);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(16, 24, 40, .06);
}
input[type=radio]:not(:checked) { border-radius: 999px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { cursor: not-allowed; }

/* Schaltflächen tragen dieselbe Höhe wie die Felder: In einer Filterleiste
 * steht ein Knopf neben einem Auswahlfeld, und 2 px Unterschied sieht man. */
button, .schaltflaeche {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--feld-hoehe); padding: 0 12px;
  border-radius: var(--radius);
  font-family: inherit; font-size: var(--feld-schrift); font-weight: 500;
  border: 1px solid var(--knopf-rand);
  color: var(--knopf-text); background: var(--flaeche);
  cursor: pointer; white-space: nowrap;
}
button:hover, .schaltflaeche:hover { background: var(--feld-grund-aus); text-decoration: none; }
button:focus-visible, .schaltflaeche:focus-visible {
  outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring);
}
button:disabled { background: var(--feld-grund-aus); color: var(--feld-text-aus); cursor: not-allowed; }
/* **Die eine gefuellte Hauptaktion je Maske** (AUD-58). Alles andere ist
 * Umriss - siehe den Abschnitt „Schaltflaechen" weiter unten. */
button.betont, .schaltflaeche.betont {
  background: var(--knopf-primaer); border-color: var(--knopf-primaer-rand);
  color: #fff; font-weight: 600;
}
/* Die Auditmaske hat eine andere Hauptaktion als Speichern: den
 * Fragenkatalog. Sie traegt den Farbton ihrer Welt. */
button.betont-audit, .schaltflaeche.betont-audit {
  background: var(--knopf-primaer-audit);
  border-color: var(--knopf-primaer-audit-rand);
  color: #fff; font-weight: 600;
}
button.betont:hover, .schaltflaeche.betont:hover,
button.betont-audit:hover, .schaltflaeche.betont-audit:hover {
  filter: brightness(.94);
}
.feldfehler { font-size: 11.5px; color: var(--fehler-text); }

/* Feld und Knopf in einer Zeile (Jira-Link, AUD-39). Beide tragen schon
 * dieselbe Höhe (Regel 15), hier fehlt nur die Anordnung. */
.feld-mit-knopf { display: flex; align-items: center; gap: 8px; }
.feld-mit-knopf > input { flex: 1 1 auto; min-width: 0; }
.feld-mit-knopf > .schaltflaeche, .feld-mit-knopf > .fussnote { flex: none; }

/* Segmentierte Bereichswahl in der Kopfzeile */
.bereichswahl { display: flex; }
.bereichswahl button { border-radius: 0; height: var(--feld-hoehe-kompakt); }
.bereichswahl button:first-of-type { border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.bereichswahl button:last-of-type { border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.bereichswahl button + button { border-left: none; }
.bereichswahl button[aria-pressed="true"] {
  background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600;
}

.kopf select { height: var(--feld-hoehe-kompakt); width: auto; min-width: 160px; }

/* ------------------------------------------------------------- Anmeldung */

.anmeldeseite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--grund);
}
.anmeldeseite .karte {
  width: 100%; max-width: 380px;
  background: var(--flaeche);
  border: 1px solid oklch(91% 0.004 250);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-flyout);
  padding: 28px;
}
.anmeldeseite .marke {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.anmeldeseite .marke img { width: 40px; height: 40px; }
.anmeldeseite h1 { font-size: 17px; margin: 0; }
.anmeldeseite .meldung { border-radius: var(--radius); border: 1px solid var(--meldung-rand); margin-bottom: 12px; }
.anmeldeseite .meldung.fehler { border-color: var(--fehler); }

/* ---------------------------------------------------------- Fehlerseiten */

.fehlerseite { max-width: 40rem; }
.fehlerseite .nummer { font-size: 46px; font-weight: 700; line-height: 1; color: var(--akzent); }

/* ------------------------------------------------ Ansichts-/Verwaltungsmasken */

.ansicht-gruppen { display: flex; flex-direction: column; gap: 10px; }

.ansicht-gruppe {
  background: var(--flaeche);
  border: 1px solid oklch(91% 0.004 250);
  border-radius: var(--radius-karte);
  overflow: hidden;
}
.ansicht-gruppe h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 11px 14px;
  background: var(--flaeche-leise);
  border-bottom: 1px solid var(--rand-leise);
  font-size: 13px;
}
.ansicht-gruppe .ausklappen {
  border: none; background: none; padding: 0; height: auto;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-right: auto; cursor: pointer;
}
/* Derselbe gezeichnete Winkel wie am Abschnittskopf (AUD-58) - vorher
 * standen hier die Schriftzeichen `⌄` und `›`. */
.ansicht-gruppe .ausklappen::before {
  content: ""; display: inline-block; vertical-align: -1px;
  width: 7px; height: 7px; margin-right: 8px;
  border-right: var(--winkel-staerke) solid var(--winkel-farbe);
  border-bottom: var(--winkel-staerke) solid var(--winkel-farbe);
  transform: rotate(45deg);
}
.ansicht-gruppe:not([open]) .ausklappen::before { transform: rotate(-45deg); }
.ansicht-gruppe:not([open]) .eintraege { display: none; }

.sammelwahl button { height: var(--feld-hoehe-klein); padding: 0 8px; font-size: 11px; }

.ansicht-gruppe .eintraege { padding: 6px 14px 12px; }

.eintrag {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem; margin: 0; padding: .4rem 0; font-weight: normal;
  border-bottom: 1px solid var(--rand-zart);
}
.eintrag:last-child { border-bottom: none; }
.eintrag .bezeichnung { font-size: 12.5px; font-weight: 600; }
.eintrag .abschnitt-name { font-size: 11.5px; color: var(--text-leise); }
.eintrag code { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-leise); }

.kennzeichen {
  display: inline-block; font-size: 10px; font-weight: 600;
  border: 1px solid var(--akzent); color: var(--akzent);
  border-radius: 999px; padding: 0 6px;
}

.tabelle-umbruch { overflow-x: auto; }
table.freigaben { border-collapse: collapse; min-width: 100%; font-size: 12.5px; }
table.freigaben th, table.freigaben td {
  border: 1px solid var(--rand-leise); padding: 9px 12px; text-align: left;
}
table.freigaben thead th {
  background: var(--flaeche-leise); white-space: nowrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-gedaempft);
}
table.freigaben tbody th .abschnitt-name,
table.freigaben tbody th code { display: block; font-weight: normal; }
table.freigaben td { text-align: center; }

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: 12.5px; }
dl.angaben dt { color: var(--text-gedaempft); }
dl.angaben dd { margin: 0; }

/* ------------------------------------------------------------ Schmale Geräte */

/* Unter 768 px klappt das Seitenmenü zu und wird über den Hamburger
 * eingeblendet – auf dem Tablet hochkant bleibt so Platz für den Inhalt. */
@media (max-width: 767px) {
  .seitenmenue {
    position: fixed; top: var(--kopfhoehe); bottom: 0; left: 0;
    z-index: 30; box-shadow: var(--schatten-flyout);
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .seite:not(.menue-schmal) .seitenmenue { transform: translateX(0); }
  .seite.menue-schmal .seitenmenue { width: var(--menuebreite); }
  .kopf .benutzer { display: none; }
  .felder { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- Hilfe */

/* Fragezeichen in der Kopfzeile, führt zum Hilfetext der Maske. */
.hilfe-knopf {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1.5px solid var(--rand); background: var(--flaeche);
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--text-gedaempft);
}
.hilfe-knopf:hover {
  border-color: var(--akzent); color: var(--akzent); text-decoration: none;
}
/* Nur als Bild im Fließtext der Hilfe-Übersicht. */
.hilfe-knopf-muster {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 999px;
  border: 1.5px solid var(--rand); font-size: 10px; font-weight: 700;
  vertical-align: -3px;
}

.hilfe-gruppe {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-gedaempft); margin: 1.4rem 0 .5rem;
}
.hilfe-gruppe:first-of-type { margin-top: .6rem; }

.hilfe-liste { display: flex; flex-direction: column; gap: 6px; }
.hilfe-eintrag {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--rand-leise); border-radius: var(--radius);
  background: var(--flaeche);
}
.hilfe-eintrag:hover {
  border-color: var(--akzent); background: var(--flaeche-leise);
  text-decoration: none;
}
.hilfe-eintrag .titel { font-size: 12.5px; font-weight: 600; color: var(--text); }
.hilfe-eintrag .kurz { font-size: 11.5px; color: var(--text-leise); }

.hilfe-zurueck { font-size: 12px; margin: 0 0 12px; }

/* Fließtext eines Hilfethemas. Bewusst schmal: lange Zeilen liest niemand. */
.hilfe-text { max-width: 46rem; font-size: 13px; line-height: 1.62; }
.hilfe-text > :first-child { margin-top: 0; }
.hilfe-text > :last-child { margin-bottom: 0; }
.hilfe-text h3 {
  font-size: 13px; font-weight: 600; margin: 1.5rem 0 .45rem;
  padding-top: .9rem; border-top: 1px solid var(--rand-zart);
}
.hilfe-text p { margin: 0 0 .75rem; }
.hilfe-text ul, .hilfe-text ol { margin: 0 0 .75rem; padding-left: 1.3rem; }
.hilfe-text li { margin-bottom: .3rem; }
.hilfe-text dl.angaben {
  font-size: 13px; gap: .55rem 1.2rem; margin: 0 0 .75rem;
  align-items: baseline;
}
.hilfe-text dl.angaben dt { font-weight: 600; color: var(--text); }
.hilfe-text dl.angaben dd { color: var(--text-gedaempft); }

/* Hilfe ohne Anmeldung (Thema „anmeldung"): breiter als die Anmeldekarte. */
.anmeldeseite.hilfe-offen { align-items: flex-start; padding-top: 40px; }
.anmeldeseite.hilfe-offen .karte { max-width: 640px; }

@media (max-width: 767px) {
  /* Auf schmalen Geräten passen Begriff und Erklärung nicht nebeneinander. */
  .hilfe-text dl.angaben { grid-template-columns: 1fr; gap: .1rem; }
  .hilfe-text dl.angaben dd { margin-bottom: .6rem; }
}

/* ---------------------------------------------------- Werkzeugleiste */

/* Spalte rechts vom Seitenmenü: Werkzeugleiste steht fest, nur der Inhalt
 * darunter scrollt. */
.inhaltsspalte {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}

/* Aus dem Entwurf (ACTION TOOLBAR). Schaltflächen einer Maske stehen hier
 * oben, nicht unter dem Formular - siehe docs/Design.md. */
.werkzeugleiste {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
}
.werkzeugleiste .leistentitel {
  flex: none; margin-right: 4px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-gedaempft);
}
.werkzeugleiste button, .werkzeugleiste .schaltflaeche { flex: none; }
.leistentrenner {
  flex: none; width: 1px; height: 22px; margin: 0 2px;
  background: var(--rand);
}

/* ------------------------------------------------------- Stammdaten */

/* Kacheln der Stammdaten-Uebersicht. Anklickbar, sobald die Maske dahinter
 * existiert; bis dahin als "geplant" gekennzeichnet und ohne Link. */
.stammdatenkachel { display: block; }
a.stammdatenkachel:hover {
  border-color: var(--akzent); background: var(--flaeche-leise);
  text-decoration: none;
}
.stammdatenkachel h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text);
}
.stammdatenkachel.geplant h2 { color: var(--text-leise); }
.stammdatenkachel.geplant .fussnote { color: var(--text-leise); }
.stammdatenkachel .marke {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0 6px;
}

/* -------------------------------------------------- Benutzerverwaltung */

/* Liste und Detailbereich nebeneinander, sobald genug Platz ist - wie in der
 * Altanwendung. Darunter untereinander. */
.benutzerverwaltung {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1100px) {
  .benutzerverwaltung { grid-template-columns: 1fr; }
}

.filterleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.filterleiste input[type=text] { width: auto; min-width: 220px; flex: 1; }

/* Schalter mit erklaerendem Text daneben. */
.schalterliste { display: flex; flex-direction: column; gap: 10px; }
.schalterfeld {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: 8px; margin: 0; font-weight: normal;
}
.schalterfeld input[type=checkbox] { margin-top: 2px; }
.schalterfeld > span { font-size: 12px; color: var(--text-gedaempft); }
.schalterfeld > span strong { color: var(--text); }

table.liste { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.liste th, table.liste td {
  text-align: left; padding: 7px 10px;
  border-bottom: 1px solid var(--rand-zart);
}
table.liste thead th {
  background: var(--flaeche-leise);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-gedaempft); white-space: nowrap;
}
table.liste thead th a { color: inherit; }
table.liste tbody tr:hover { background: var(--flaeche-leise); }
/* **Eine Kante statt einer Farbflaeche** (AUD-58). Eine volle Flaeche macht
 * die gewaehlte Zeile zum lautesten Element der Tabelle, obwohl sie nur
 * sagt, wo man gerade steht. Derselbe Griff wie beim aktiven Menuepunkt. */
table.liste tr.gewaehlt {
  background: var(--welt-kopf, var(--akzent-auswahl));
  box-shadow: inset 2px 0 0 var(--welt-kante, var(--akzent));
}
table.liste tr.archiviert td { color: var(--text-leise); }
table.liste .marke, table.liste .kennzeichen { margin-left: 6px; }
table.liste .marke {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0 6px;
}

/* -------------------------------------------------- Zuordnungslisten */

/* Mehrfachauswahl - das verbindliche Muster (docs/Design.md, Regel 12).
 *
 * Ein <select multiple> ist auf dem Tablet kaum bedienbar und verbirgt, was
 * gewaehlt ist. Grundlage ist deshalb eine Ankreuzliste mit ganzen klickbaren
 * Zeilen. Marken, Zaehler, Suche und "alle/keine" stehen im HTML auf `hidden`
 * und werden erst vom Skript eingeblendet - ohne JavaScript bleibt die reine
 * Liste stehen statt einer Schaltflaeche, die nichts tut.
 */
.zuordnungen {
  display: grid; gap: 14px 20px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mehrfachauswahl { display: flex; flex-direction: column; gap: 8px; }

.auswahlkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; min-height: 16px;
}
.auswahlzaehler {
  font-size: 11px; color: var(--text-leise); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Die Auswahl steht oben - man sieht sie, ohne die Liste zu durchsuchen. */
.auswahlmarken { display: flex; flex-wrap: wrap; gap: 6px; }
.auswahlmarke {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 3px 2px 9px;
  border: 1px solid var(--akzent); border-radius: 999px;
  background: var(--akzent-flaeche); color: var(--akzent-text);
  font-size: 11.5px; line-height: 18px;
}
.auswahlmarke button {
  all: unset;
  width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--akzent-text);
  cursor: pointer; opacity: .65;
}
.auswahlmarke button:hover { opacity: 1; background: var(--flaeche); }
.auswahlmarke button:focus-visible { outline: 2px solid var(--akzent); }
.auswahlmarken-leer { font-size: 11.5px; color: var(--text-leise); }

/* Die Suche innerhalb einer Mehrfachauswahl steht in einem Block über
   der Liste – dort gilt die kompakte Höhe (Regel 15). */
.auswahlsuche { height: var(--feld-hoehe-kompakt); font-size: 12px; }

.auswahlliste {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--rand-leise); border-radius: var(--radius);
  padding: 5px; background: var(--flaeche);
}
/* Die ganze Zeile ist klickbar. `flex-direction: row` steht hier
 * ausdruecklich: Die allgemeine Regel fuer <label> stellt Formularfelder
 * untereinander - ohne diese Zeile stuende das Kaestchen ueber dem Text. */
.auswahlzeile {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  margin: 0; padding: 5px 8px; border-radius: var(--radius-klein);
  font-weight: normal; font-size: 12.5px; color: var(--text);
  cursor: pointer;
}
.auswahlzeile:hover { background: var(--flaeche-leise); }
.auswahlzeile:has(input:checked) { background: var(--akzent-auswahl); }
.auswahlzeile:has(input:focus-visible) { outline: 2px solid var(--akzent); }
/* Größe und Farbe kommen aus der Grundregel für Schalter (Regel 15). */
.auswahl-ohne-treffer { margin: 4px 8px; }

.auswahlaktionen { display: flex; gap: 6px; align-items: center; }
.auswahlaktionen button {
  all: unset;
  font-size: 11.5px; color: var(--akzent-text);
  text-decoration: underline; cursor: pointer;
}
.auswahlaktionen button:hover { color: var(--akzent); }
.auswahlaktionen button:focus-visible { outline: 2px solid var(--akzent); }
.auswahlaktionen > span { font-size: 11.5px; color: var(--text-leise); }

/* Leiser Hinweis innerhalb eines Abschnitts - erklaert die Liste, meldet aber
 * nichts. Deshalb ohne Akzentfarbe. */
.hinweiskasten.leise {
  background: var(--flaeche-leise); border-color: var(--rand-leise);
  color: var(--text-gedaempft); margin-bottom: 12px;
}

/* ------------------------------------------- Formatiertes Textfeld (Regel 13)
 *
 * Grundlage ist das <textarea> mit dem HTML. Die Schreibflaeche darueber und
 * ihre Leiste stehen im HTML auf `hidden`; erst `reichtext()` in app.js
 * blendet sie ein und versteckt dafuer das Textfeld. Ohne JavaScript bleibt
 * das Textfeld sichtbar - und keine Schaltflaeche, die nichts tut.
 */
.infotexte { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }

.reichtext { display: flex; flex-direction: column; gap: 6px; }

/* Die Leiste bildet mit dem Feld darunter **eine Einheit** - deshalb
 * derselbe Rand und eine nur leicht abgesetzte Fläche (AUD-58). */
.reichtext-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 5px;
  border: 1px solid oklch(88% 0.004 250); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: oklch(97% 0.003 250);
}
/* **Fläche und Rand** (AUD-58). Vorher waren es randlose Spannen: Wer die
 * Maske zum ersten Mal sah, erkannte nicht, dass F, K und U Knöpfe sind. */
.reichtext-leiste button {
  all: unset;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche);
  border: 1px solid oklch(91% 0.004 250);
  border-radius: var(--radius-klein);
  font-size: 11.5px; color: oklch(35% 0.006 250);
  cursor: pointer;
}
.reichtext-leiste button:hover {
  background: var(--feld-grund-aus); color: var(--text);
}
.reichtext-leiste button:focus-visible { outline: 2px solid var(--akzent); }
/* Der Zustand kommt aus `document.queryCommandState` - fett bleibt gedrueckt,
 * solange der Schreibzeiger in fettem Text steht. */
.reichtext-leiste button[aria-pressed=true] {
  background: var(--akzent-flaeche); color: var(--akzent-text);
}
.reichtext-trenner {
  width: 1px; height: 16px; margin: 0 4px; background: var(--rand);
}

.reichtext-flaeche {
  min-height: 120px; max-height: 320px; overflow-y: auto;
  padding: 9px 11px;
  border: 1px solid var(--feld-rand);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--flaeche); color: var(--text);
  font-size: 12.5px; line-height: 1.55;
}
.reichtext-flaeche:focus {
  outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring);
}
.reichtext-flaeche p { margin: 0 0 .5rem; }
.reichtext-flaeche > :last-child { margin-bottom: 0; }
.reichtext-flaeche ul, .reichtext-flaeche ol { margin: 0 0 .5rem; padding-left: 1.3rem; }
.reichtext-flaeche a { color: var(--akzent-text); }
/* Ohne Leiste - also beim Nur-Lesen - gehoert der Rahmen ringsum. */
.reichtext-nur-lesen .reichtext-flaeche { border-radius: var(--radius); }

/* Das Textfeld mit dem HTML. Ohne JavaScript ist es das eigentliche
 * Eingabefeld, deshalb Schriftart und Groesse einer Quelltextansicht. */
.reichtext-quelle {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 11.5px; line-height: 1.5;
}

/* ------------------------------------------ Erscheinungsbild des Mandanten
 *
 * Farbe und Logo nebeneinander, auf schmalen Geraeten untereinander.
 */
.erscheinungsbild {
  display: grid; gap: 18px 22px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.erscheinung { display: flex; flex-direction: column; gap: 8px; }

.farbwahl { display: flex; align-items: center; gap: 12px; }
.farbwahl input[type=color] {
  width: 54px; height: var(--feld-hoehe); padding: 2px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--flaeche); cursor: pointer;
}
.farbtext { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.farbtext code {
  font-size: 12px; padding: 2px 6px;
  border-radius: var(--radius-klein); background: var(--flaeche-leise);
}

/* Karierter Grund, damit ein durchsichtiges Logo als solches erkennbar ist -
 * auf weissem Grund saehe ein weisses Logo aus wie gar keines. */
.logovorschau {
  display: flex; align-items: center; justify-content: center;
  min-height: 76px; padding: 10px;
  border: 1px solid var(--rand-leise); border-radius: var(--radius);
  background-color: var(--flaeche);
  background-image:
    linear-gradient(45deg, var(--flaeche-leise) 25%, transparent 25%),
    linear-gradient(-45deg, var(--flaeche-leise) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--flaeche-leise) 75%),
    linear-gradient(-45deg, transparent 75%, var(--flaeche-leise) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.logovorschau img { max-height: 56px; max-width: 100%; object-fit: contain; }
.logovorschau .fussnote { margin: 0; }

/* Bloecke, die an einem Auswahlfeld haengen (Fragentyp, AUD-28). Ohne
 * JavaScript sind sie alle sichtbar - deshalb ein leichter Rahmen, damit
 * erkennbar bleibt, was zusammengehoert. */
.typblock {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--rand-zart); border-radius: var(--radius);
  background: var(--flaeche-leise);
}
.typblock > .feldname { margin-bottom: 6px; }
.typblock label { margin-bottom: 0; }
.schalterliste .typblock { margin: 0; padding: 10px 12px; }

textarea.antwortliste { line-height: 1.6; }

/* --------------------------------------------- Audit planen (AUD-30/31) */

/* Die Audittypen zur Auswahl - Kacheln, keine Tabelle: Beschreibung und
 * Merkmale brauchen mehr Platz als eine Zeile hergibt. */
.audittypen {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.audittyp {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--rand-leise); border-radius: var(--radius-karte);
  background: var(--flaeche); color: var(--text);
  text-decoration: none;
}
.audittyp:hover { border-color: var(--akzent); background: var(--flaeche-leise); }
.audittyp .kopf { display: flex; align-items: baseline; gap: 8px; }
.audittyp .kuerzel {
  font-weight: 700; font-size: 13px; color: var(--akzent-text);
  padding: 1px 7px; border-radius: var(--radius-klein);
  background: var(--akzent-flaeche);
}
.audittyp .name { font-size: 13px; font-weight: 600; }
.audittyp .beschreibung { margin: 0; font-size: 12px; color: var(--text-gedaempft); }
.audittyp .merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
/* `.marke` hat KEINE allgemeine Regel, nur kontextabhaengige (Menue, Tabelle,
 * Kachel). In einem neuen Kontext bleibt sie sonst nackter Text - genau das
 * war am 03.09.2026 hier zu sehen. Deshalb hier eine eigene. */
.audittyp .merkmale .marke, .statusliste .marke {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise);
  border: 1px solid var(--rand); border-radius: 999px; padding: 1px 7px;
}

/* Statusmarke. Die Geometrie fuer alle gleich, die Farbe nach Bedeutung
 * (AUD-58, siehe „Kennzeichen" weiter unten). Der Auditstatus bringt seine
 * eigene Farbe als fertiges CSS am Element mit und gewinnt dagegen. */
.statusmarke {
  display: inline-flex; align-items: center; height: 20px;
  padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--kennzeichen-neutral);
  border: 1px solid var(--kennzeichen-neutral-rand);
  color: var(--kennzeichen-neutral-text);
  white-space: nowrap;
}
.statusliste { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------- Audit durchführen (AUD-34)
 *
 * Der Fragenkatalog als Seiten mit Fragenblöcken. `.negativblock` ist der
 * Teil, der nur bei negativer Antwort erscheint.
 */
.seitenwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.seitenwahl a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--rand-leise); background: var(--flaeche-leise);
  color: var(--text); font-size: 12px; text-decoration: none;
}
.seitenwahl a.aktiv { border-color: var(--akzent); background: var(--akzent-auswahl); font-weight: 600; }
.seitenwahl .seitennummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--akzent); color: #fff; font-size: 11px; font-weight: 600;
}

/* Zwei Spalten (AUD-36): links die Frage mit ihrer Antwort, rechts die
 * Feststellung – wie in der Altanwendung. Die rechte Spur bleibt reserviert,
 * auch wenn nichts darin steht: So beginnen die Feststellungen aller Fragen
 * auf derselben Linie, statt je nach Antwort zu springen. */
.frage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 12px 18px; align-items: start;
  border: 1px solid var(--rand-zart); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 12px; background: var(--flaeche, #fff);
}
.fragespalte { min-width: 0; }
.fragekopf { display: flex; gap: 10px; align-items: flex-start; }
.fragenummer {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px;
  background: var(--flaeche-leise); border: 1px solid var(--rand-leise);
  font-size: 12px; font-weight: 600;
}
.fragetext { font-size: 13.5px; line-height: 1.5; }
.fragetext p { margin: 0 0 .3rem; }
.fragetext p:last-child { margin-bottom: 0; }
.fragehinweis { margin: 6px 0 0 34px; }
.fragebild { margin: 10px 0 0 34px; }
.fragebild img { max-width: 320px; max-height: 240px; border-radius: var(--radius); border: 1px solid var(--rand-zart); }

.antwortbereich { margin: 10px 0 0 34px; }
.antwortbereich label { margin-bottom: 0; }
.antwortwahl { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.antwortwahl label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.zahlfeld input { max-width: 180px; }

/* Die rechte Spalte. Kein Aussenabstand mehr - sie sitzt in ihrer eigenen
 * Spur, nicht mehr unter der Antwort. */
.negativblock {
  margin: 0; padding: 10px 12px;
  border-left: 3px solid var(--negativ, #c0392b);
  background: var(--flaeche-leise); border-radius: 0 var(--radius) var(--radius) 0;
}
.negativkopf {
  font-size: 11.5px; font-weight: 600; color: var(--negativ, #c0392b);
  margin-bottom: 8px;
}

/* Auf schmalen Geraeten untereinander. Das Tablet quer hat Platz fuer zwei
 * Spalten, hochkant nicht (docs/Design.md: Tabletgroesse zuerst). */
@media (max-width: 900px) {
  .frage { grid-template-columns: 1fr; }
  .negativblock { margin-left: 34px; }
}
.negativblock .typblock { margin-top: 8px; }
.negativmarke { border-color: var(--negativ, #c0392b); color: var(--negativ, #c0392b); }
.marke.negativmarke {
  display: inline-block; font-size: 10px; font-weight: 600;
  border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; margin-left: 4px;
}
table.liste tr.negativ td:nth-child(3) { color: var(--negativ, var(--kennzeichen-rot-text)); }
table.liste tr.seitenzeile td {
  background: var(--flaeche-leise); font-weight: 600; font-size: 12px;
}

/* Feststellung: Audit links (nur lesbar), Formular rechts (AUD-32). */
.zweispaltig {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: 18px; align-items: start;
}
@media (max-width: 960px) { .zweispaltig { grid-template-columns: 1fr; } }
.frageauszug { font-size: 12px; color: var(--text-gedaempft); }
.frageauszug .fragetext { font-size: 12.5px; border-left: 3px solid var(--rand-leise); padding-left: 10px; }
.auditinfo { margin: 0; }

/* ----------------------------------------------- Suchauswahl (Regel 14)
 *
 * Aus einem `<select data-suchauswahl>` wird ein Textfeld mit aufklappender
 * Trefferliste. Uebernommen aus dem Fuhrpark (KFZ-61).
 *
 * `.suchauswahl-nativ` versteckt die Auswahlliste, **entfernt sie aber
 * nicht**: Sie bleibt der Traeger des Wertes und wird abgeschickt.
 */
.suchauswahl { position: relative; }
.suchauswahl-nativ { display: none !important; }
/* Höhe, Rahmen und Schrift kommen aus der Grundregel (Regel 15). */
.suchauswahl-feld { cursor: text; }
.suchauswahl.offen .suchauswahl-feld { border-color: var(--akzent); }

/* An `document.body` gehaengt und deshalb `fixed` - ein Abschnitt mit
 * `overflow` wuerde die Liste sonst abschneiden. */
.suchauswahl-liste {
  position: fixed; z-index: 1000; max-height: 260px; overflow-y: auto;
  background: var(--flaeche, #fff); border: 1px solid var(--rand-leise);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 4px;
}
.suchauswahl-eintrag {
  padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suchauswahl-eintrag.hervor,
.suchauswahl-eintrag:hover { background: var(--akzent-auswahl); }
.suchauswahl-eintrag.gewaehlt { font-weight: 600; }
.suchauswahl-leer { padding: 8px 10px; font-size: 12.5px; color: var(--text-leise); }

/* Offene Audits: ein Termin, der in der Vergangenheit liegt und noch offen ist
 * (AUD-34). Nur die Marke ist farbig - eine komplett rote Zeile schreit,
 * und ueberfaellig ist der Normalfall, sobald jemand ein paar Tage nicht
 * hineingesehen hat.
 */
.marke.ueberfaellig-marke {
  display: inline-block; font-size: 10px; font-weight: 600;
  border: 1px solid var(--fehler); color: var(--fehler-text);
  background: var(--fehler-grund);
  border-radius: 999px; padding: 0 6px; margin-left: 4px;
}
table.liste tr.ueberfaellig td:first-child { font-weight: 600; }

/* ------------------------------------------------ Dokumente (AUD-40)
 *
 * Je Dokument eine Zeile: links die kleine Vorschau, in der Mitte die
 * Angaben, rechts die Aktionen. Die Vorschau ist verlinkt - ein Klick
 * oeffnet das Ganze in einem neuen Tab.
 */
.dokumentenliste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.dokument {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 10px; border: 1px solid var(--rand-zart);
  border-radius: var(--radius); background: var(--flaeche);
}

.dokumentvorschau {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; overflow: hidden;
  border: 1px solid var(--rand-leise); border-radius: var(--radius-klein);
  background: var(--flaeche-leise); text-decoration: none;
}
.dokumentvorschau:hover { border-color: var(--akzent); }
.dokumentvorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Das eingebettete PDF nimmt keine Klicks entgegen - der Klick soll die
 * umgebende Verknuepfung treffen und das Dokument im neuen Tab oeffnen. */
.dokumentvorschau object { width: 100%; height: 100%; pointer-events: none; border: 0; }
.dokumentendung {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-gedaempft);
}

.dokumentangaben { min-width: 0; }
.dokumenttitel { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.dokumentkommentar { margin: 6px 0 0; font-size: 12.5px; color: var(--text-gedaempft); }

.dokumentaktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dokumentaktionen form { margin: 0; }

.dokumentaendern { margin-top: 8px; }
.dokumentaendern summary {
  font-size: 11.5px; color: var(--akzent-text);
  cursor: pointer; width: max-content;
}
.dokumentaendern summary:hover { text-decoration: underline; }
.dokumentaendern > form { margin-top: 8px; }

.dokumentupload {
  padding: 12px; border: 1px dashed var(--rand); border-radius: var(--radius);
  background: var(--flaeche-leise);
}

@media (max-width: 700px) {
  .dokument { grid-template-columns: 92px minmax(0, 1fr); }
  .dokument .dokumentaktionen { grid-column: 1 / -1; }
}

/* --------------------------- Fischgraetenmodell (AUD-42, Design AUD-47)
 *
 * Das ganze Audit in einem Bild: Wurzel links = Audit, davon der Ruecken,
 * daran Aeste = Feststellungen, an deren Straengen die Zweige = Massnahmen.
 * Die Anordnung rechnet `app/fischgraete.py` und liefert fertige Pixelwerte -
 * hier steht nur, wie die Teile aussehen.
 *
 * Zwei Ebenen uebereinander: ein <svg> mit den Linien, darueber die Kacheln
 * als gewoehnliches HTML. Deshalb sind die Kacheln anklickbar und tragen
 * dieselben Merkmale wie der Rest der Anwendung.
 */
.fischgraete-flaeche {
  overflow-x: auto;                 /* breite Bilder schieben, nie die Seite */
  overflow-y: hidden;
  padding-bottom: 6px;
  background: var(--flaeche-leise);
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
}
.fischgraete { position: relative; }

.fischgraete-linien { position: absolute; left: 0; top: 0; }
.fischgraete-linien line { stroke-linecap: round; }
/* Der Ruecken traegt das Bild - er ist die kraeftigste Linie. */
.fischgraete-linien .ruecken { stroke: var(--text-gedaempft); stroke-width: 3; }
.fischgraete-linien .stiel   { stroke: var(--text-leise);     stroke-width: 2.5; }
.fischgraete-linien .strang  { stroke: var(--text-leise);     stroke-width: 2; }
.fischgraete-linien .zweig   { stroke: var(--rand);           stroke-width: 1.5; }
.fischgraete-linien .knoten  { fill: var(--text-leise); }
.fischgraete-linien .knoten.klein { fill: var(--rand); }

/* Jede Kachel: farbiger Kopf mit ihrem Typ (AUD-47), weisser Koerper.
 *
 * Die Farbe kommt ueber `data-welt` aus AUD-46 - dieselben drei Farben wie
 * in Menue und Masken. Der Koerper bleibt weiss, wie ueberall dort, wo
 * gelesen wird (docs/Design.md, Regel 16).
 *
 * `overflow: hidden` ist Teil der Rechnung: Die Hoehen stehen in
 * `app/fischgraete.py` fest, damit sich die Anordnung ohne Kenntnis der
 * Textlaenge ausrechnen laesst. Zu langer Text wird deshalb abgeschnitten -
 * vollstaendig steht er in der Maske, zu der die Kachel fuehrt.
 */
.fk-kachel {
  position: absolute; box-sizing: border-box;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--welt-linie, var(--rand));
  border-radius: var(--radius-karte);
  color: var(--text); text-decoration: none;
  box-shadow: var(--karte-schatten);
}
a.fk-kachel:hover {
  border-color: var(--text-gedaempft); text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
a.fk-kachel:focus-visible {
  outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring);
}

/* Die Ueberschrift: der Typ der Kachel, in der Farbe seiner Welt. */
.fk-typ {
  flex: none;
  padding: 4px 10px;
  background: var(--welt-kopf, var(--flaeche-leise));
  border-bottom: 1px solid var(--welt-linie, var(--rand));
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text);
}

.fk-koerper {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; overflow: hidden;
}

.fk-titel {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status und Ueberfaelligkeit stehen nebeneinander: Beide sagen den Stand,
 * und untereinander braechen sie die Kachel auf. */
.fk-stand { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fk-kachel .statusmarke { font-size: 10px; padding: 1px 7px; }
.fk-kachel .ueberfaellig-marke { margin-left: 0; }

/* Die Einzelangaben: eine Zeile je Angabe, jede einzeilig. Kein Raster mit
 * Etiketten - auf 210 px bliebe fuer den Wert zu wenig uebrig. */
.fk-angaben { margin-top: auto; font-size: 11px; color: var(--text-gedaempft); }
.fk-zeile { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Die Wurzel ist das Audit - sie steht am Anfang und darf kraeftiger sein. */
.fk-wurzel { border-width: 2px; }
.fk-wurzel .fk-titel { font-size: 14px; }

/* Eine ueberfaellige Massnahme faellt zusaetzlich am Rahmen auf - die Marke
 * allein uebersieht man in einem grossen Bild. */
.fk-kachel.ueberfaellig { border-color: var(--fehler); }

/* ============================================ Farbwelten der Fachbereiche
 *
 * AUD-46: Audit, Feststellung und Massnahme bekommen je eine Farbe, damit
 * ohne Lesen erkennbar ist, worin man arbeitet. Welche Maske zu welcher Welt
 * gehoert, entscheidet `app/farbwelt.py`; die Farben stehen hier.
 *
 * NICHT zu verwechseln mit den Bereichen QM und Lean (`app/bereiche.py`).
 *
 * Zwei Farben bleiben davon unberuehrt:
 *   - `--akzent` (Hauptfarbe des Mandanten, AUD-29) traegt weiterhin
 *     Fokusrahmen, Links und alle neutralen Masken. Nur die betonten Knoepfe
 *     der Fachmasken uebernimmt die Weltfarbe.
 *   - Karten und Eingabefelder bleiben weiss - sonst litte die Lesbarkeit.
 */
/* **Vier Stufen je Welt, alle auf demselben Farbton** (AUD-58).
 *
 * Vorher stand hier **eine** Farbe je Welt, aus der alles andere mit
 * `color-mix()` gerechnet wurde. Das Ergebnis lag nicht mehr auf dem
 * Farbton der Welt: Der Seitenhintergrund der Feststellung landete bei
 * Farbton 274 - blaeulich, obwohl die Weltfarbe orange ist. Gemischte
 * Farben driften, feste nicht.
 *
 * Ueberall gleich gebildet, `H` ist der Farbton der Welt:
 *
 *     --welt-flaeche: oklch(98.2% 0.005 H)   Seitenhintergrund
 *     --welt-kopf:    oklch(97.6% 0.013 H)   Abschnittskopf
 *     --welt-linie:   oklch(91.5% 0.030 H)   Trennlinie darunter
 *     --welt-kante:   oklch(58%   0.130 H)   3-px-Kante, Streifen, Marker
 *     --welt-text:    oklch(44%   0.120 H)   Schrift auf `--welt-flaeche`
 *
 * Die Feststellung weicht bei der Kante ab: Orange wird bei 58 %
 * Helligkeit dumpf, deshalb dort 64 %.
 */
.welt-audit, [data-welt="audit"] {
  --welt-flaeche: oklch(98.2% 0.005 250);
  --welt-kopf:    oklch(97.6% 0.012 250);
  --welt-linie:   oklch(91.5% 0.028 250);
  --welt-kante:   oklch(58% 0.13 250);
  --welt-text:    oklch(44% 0.12 250);
}
.welt-feststellung, [data-welt="feststellung"] {
  --welt-flaeche: oklch(98.3% 0.006 65);
  --welt-kopf:    oklch(97.8% 0.014 65);
  --welt-linie:   oklch(91.5% 0.032 65);
  --welt-kante:   oklch(64% 0.13 65);
  --welt-text:    oklch(45% 0.12 65);
}
.welt-massnahme, [data-welt="massnahme"] {
  --welt-flaeche: oklch(98.2% 0.005 150);
  --welt-kopf:    oklch(97.6% 0.014 150);
  --welt-linie:   oklch(91.5% 0.030 150);
  --welt-kante:   oklch(58% 0.13 150);
  --welt-text:    oklch(44% 0.12 150);
}

/* Der Seitenhintergrund nur zart getoent: Die Karten darauf sind weiss, und
 * bei voller Farbe wuerde jede Karte ausgeschnitten wirken. */
.seite[class*="welt-"] .inhalt { background: var(--welt-flaeche); }

/* Der Streifen ueber der Werkzeugleiste traegt die kraeftige Kante - er ist
 * 3 px hoch, dort traegt sie ohne zu erschlagen. */
.seite[class*="welt-"] .werkzeugleiste { border-top: 3px solid var(--welt-kante); }

/* **Den Abschnittskopf faerbt keine Regel mehr hier.** Er nimmt
 * `--welt-kopf`, `--welt-linie` und `--welt-kante` von sich aus - siehe
 * `.abschnitt > .kopfleiste`. Damit gilt dieselbe Regel fuer die Maskenwelt
 * und fuer einen Abschnitt mit **eigener** Welt: In der Massnahmenmaske
 * steht links die Feststellung, in der Feststellungsmaske das Audit. So ist
 * die Kette Audit -> Feststellung -> Massnahme auf einem Bildschirm zu
 * sehen, statt dass der Zusammenhang die Farbe der Maske annimmt, auf der
 * er zufaellig steht. */

/* Im Menue traegt jeder der drei Punkte seine Farbe dauerhaft - am Sinnbild,
 * damit man den Weg schon sieht, bevor man dort ist. Der aktive Punkt
 * bekommt dieselbe Toenung samt Kante wie eine gewaehlte Tabellenzeile. */
.menuepunkt[data-welt] .sinnbild {
  background: var(--welt-linie);
  border-radius: var(--radius-klein);
  padding: 3px;
  box-sizing: content-box;
  margin: -3px;
}
.menuepunkt[data-welt].aktiv {
  background: var(--welt-kopf);
  box-shadow: inset 2px 0 0 var(--welt-kante);
  color: var(--text);
}

/* ------------------------------------------------- Briefkasten (AUD-45)
 *
 * Die Altmaske steht in drei Spalten: links die Einordnung, in der Mitte
 * der Text, rechts die Bewertung. Dasselbe Raster wie `.zweispaltig`, nur
 * mit einer Spalte mehr - und es faellt genauso frueh auf eine Spalte
 * zurueck, damit auf einem schmalen Bildschirm nichts gequetscht wird.
 */
.spalten-drei {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: start;
}
@media (max-width: 1200px) { .spalten-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .spalten-drei { grid-template-columns: 1fr; } }

/* Die Zeile zum Anlegen eines Stammdatenwertes: Feld und Knopf nebeneinander,
 * der Knopf unten buendig mit dem Feld (die Beschriftung steht darueber). */
.anlegezeile {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 12px; max-width: 520px;
}
.anlegezeile label { flex: 1; }
.anlegezeile button { flex: none; }

/* Eine Spalte, die nur eine Schaltflaeche traegt, soll nicht mitwachsen. */
table.liste th.schmal { width: 1%; white-space: nowrap; }

/* ------------------------------------------ Schaltflaechen (AUD-58)
 *
 * **Eine gefuellte Hauptaktion je Maske, alles andere Umriss.**
 *
 * Bis AUD-58 trug jeder Knopf seine Funktionsfarbe: Loeschen rot, Speichern
 * gruen, Neu hellgruen, Maskenwechsel blau - vier gefuellte Flaechen
 * nebeneinander. Sie lasen sich als vier gleich wichtige Aktionen, und weil
 * das Blau so dunkel sein musste, brauchte genau einer weisse Schrift.
 *
 * Jetzt sagt die **Fuellung**, was die Hauptsache ist, und die **Toenung**,
 * worum es geht. Die Klassennamen bleiben - sie benennen die Funktion, und
 * die hat sich nicht geaendert.
 */

/* Loeschen: der einzige Knopf, der von sich aus warnt. Getoent, nicht
 * gefuellt - eine rote Flaeche neben der Hauptaktion stritte mit ihr. */
button.schalter-loeschen, .schaltflaeche.schalter-loeschen {
  background: var(--knopf-gefahr);
  border-color: var(--knopf-gefahr-rand);
  color: var(--knopf-gefahr-text);
}

/* Speichern und Neu tragen **keine eigene Farbe** mehr. Speichern ist auf
 * den meisten Masken die Hauptaktion und traegt dann zusaetzlich `betont`;
 * die Klasse hier bleibt als Bedeutung stehen - der Drift-Test in
 * `tests/test_schalterfarben.py` haengt daran. */
button.schalter-speichern, .schaltflaeche.schalter-speichern,
button.schalter-neu, .schaltflaeche.schalter-neu,
button.schalter-wechseln, .schaltflaeche.schalter-wechseln {
  font-weight: 600;
}

/* Der Maskenwechsel traegt den Farbton der **Zielwelt**, nicht der eigenen:
 * Ein Knopf, der zur Feststellung fuehrt, ist orange - auch auf einer
 * Auditmaske. Woher der Knopf kommt, sieht man; wohin er fuehrt, nicht.
 *
 * Ohne `data-welt` bleibt er neutral: Nicht jeder Wechsel hat eine Welt
 * (Terminliste, Vollbild, Seiten). Nichts zu behaupten ist besser, als eine
 * Farbe zu raten (Regel 5). */
/* `:not(.betont…)`, weil beide dieselbe Staerke haetten und dann die
 * spaetere Regel gewaenne: Auf der Fischgraete ist „Zum Audit" **zugleich**
 * die Hauptaktion und ein Maskenwechsel. Gefuellt schlaegt getoent. */
.schalter-wechseln[data-welt]:not(.betont):not(.betont-audit) {
  background: var(--welt-flaeche);
  border-color: var(--welt-linie);
  color: var(--welt-text);
}

button[class*="schalter-"]:hover, .schaltflaeche[class*="schalter-"]:hover {
  filter: brightness(.97);
}
button[class*="schalter-"]:disabled {
  filter: grayscale(.7) opacity(.6);
}

/* --------------------------------------------- Kennzeichen (AUD-58)
 *
 * Vier Auspraegungen bei **gleicher Geometrie**: Die Form sagt „hier steht
 * ein Zustand", die Farbe sagt „welcher". Vorher trugen alle denselben
 * grauen Rand, unabhaengig von der Bedeutung.
 *
 * Der **Auditstatus geht hier nicht mit**: Seine Farben kommen aus der
 * Altanwendung und stehen als Daten in `app/models/auditstatus.py` - sie
 * kommen als fertiges CSS am Element an und gewinnen gegen diese Regeln.
 */
.statusmarke.status-offen {
  background: var(--kennzeichen-neutral);
  border-color: var(--kennzeichen-neutral-rand);
  color: var(--kennzeichen-neutral-text);
}
.statusmarke.status-in_arbeit {
  background: var(--kennzeichen-blau);
  border-color: var(--kennzeichen-blau-rand);
  color: var(--kennzeichen-blau-text);
}
.statusmarke.status-umgesetzt,
.statusmarke.status-wirksam,
.statusmarke.status-abgeschlossen {
  background: var(--kennzeichen-gruen);
  border-color: var(--kennzeichen-gruen-rand);
  color: var(--kennzeichen-gruen-text);
}
.statusmarke.status-abgelehnt,
.statusmarke.status-verworfen {
  background: var(--kennzeichen-rot);
  border-color: var(--kennzeichen-rot-rand);
  color: var(--kennzeichen-rot-text);
}


/* ============================ Kanban-Brett (AUD-55, Gestaltung AUD-59)
 *
 * **Eine Pinnwand**, nach Bjoerns Vorlage
 * (`docs/Vorgaben/Board von der Erklaerung.png`): Die Karten haengen leicht
 * schief an einer Nadel, die Spalten tragen die Farbe ihres Zustands.
 *
 * *„Auch das Schiefe auf dem Bild ist gewollt."* - Es sagt „hier wird
 * bewegt", bevor man etwas gelesen hat. **Fest je Stelle, nicht zufaellig**:
 * Ein zufaelliger Winkel spraenge bei jedem Laden anders, und das laese sich
 * als Fehler.
 */

.brett { display: flex; flex-direction: column; gap: 10px; }

/* ======================================== Die Filterzeile (AUD-64)
 *
 * Aus der Uebergabe von Claude Design
 * (`docs/Design/Artboards/Filterleiste-Aenderungen-fuer-Claude-Code.md`):
 *
 *   „Die neue Fassung ist **eine Zeile, vier Bedienelemente, alle 34 px
 *   hoch, zwei Formen**: Segmentleiste fuer die Umschalter, Auswahlfeld
 *   fuer die Listen."
 *
 * Vorher lagen dort vier Formensprachen auf drei Hoehen: gefuellte
 * Farbknoepfe, ein Auswahlfeld, ein Schieberegler und eine dauerhaft offene
 * Ankreuzliste, die allein so hoch war wie die uebrige Leiste.
 *
 * **Weiss mit einer Linie darunter**, nicht in der Seitenfarbe: So trennt
 * sich die Leiste vom Brett, statt mit ihm zu verschwimmen.
 */
.filterzeile {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  padding: 12px 14px 14px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--karte-rand);
}
.filtergruppe {
  display: flex; flex-direction: column; gap: 5px;
  flex: none; width: 190px;
}
/* Die beiden Segmentleisten richten sich nach ihrem Inhalt - eine feste
 * Breite liesse entweder Segmente abschneiden oder Luft stehen. */
.filtergruppe:has(> .segmentleiste) { width: auto; }
/* Der Trenner gliedert in „was wird gezeigt" (Ansicht) und „was davon". */
.filtertrenner {
  flex: none; align-self: stretch; width: 1px; margin: 0 -6px;
  background: var(--rand-leise);
}

/* Die Segmentleiste: ein Gehaeuse, das gewaehlte Segment weiss und leicht
 * erhaben. **Ohne Weltfarben** - drei gesaettigte Flaechen nebeneinander
 * lesen sich als drei gleichrangige Aktionen, und die Farbe hat den
 * gewaehlten Zustand nicht vermittelt; sie hat die Welt benannt, was der
 * Text schon tut. Die Weltfarbe gehoert ins Brett darunter. */
.segmentleiste {
  display: flex; height: var(--feld-hoehe); padding: 3px; gap: 2px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--flaeche-leise);
}
.segmentleiste > a {
  display: inline-flex; align-items: center; padding: 0 11px;
  border-radius: 5px; font-size: var(--feld-schrift); font-weight: 500;
  color: oklch(45% 0.006 250); text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.segmentleiste > a:hover { color: oklch(28% 0.006 250); text-decoration: none; }
.segmentleiste > [aria-selected="true"] {
  font-weight: 600; background: var(--flaeche); color: var(--knopf-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .10),
              inset 0 0 0 1px var(--rand);
}

/* Das Statusfeld: geschlossen, mit der Auswahl im Text. Als `<details>`
 * gebaut - Auf- und Zuklappen ohne Skript. */
.statusfeld { position: relative; }
.statusfeld > summary { list-style: none; cursor: pointer; }
.statusfeld > summary::-webkit-details-marker { display: none; }
.filter-feld {
  display: flex; align-items: center; gap: 8px;
  height: var(--feld-hoehe); padding: 0 10px;
  border: 1px solid var(--knopf-rand); border-radius: var(--radius);
  background: var(--flaeche); font-size: var(--feld-schrift);
  color: var(--text);
}
.filter-feld:hover { border-color: oklch(78% 0.006 250); }
/* Der Punkt sagt, dass gefiltert wird - dafuer braucht es keinen Zaehler. */
.filter-marke {
  flex: none; width: 7px; height: 7px; border-radius: 999px;
  background: var(--rand);
}
.filter-marke.aktiv { background: var(--akzent); }
.filter-wert {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-chevron { flex: none; color: var(--text-gedaempft); }
.statusfeld[open] .filter-chevron { transform: rotate(180deg); }

.status-liste {
  position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 5px;
  width: 100%; padding: 5px;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--flaeche); box-shadow: 0 6px 16px rgba(16, 24, 40, .10);
}
.status-liste > label {
  /* **flex-direction: row** ausdruecklich: Die allgemeine Regel fuer
   * `label` stellt die Beschriftung ueber das Feld (Spalte). Ohne das
   * Zuruecksetzen stuende hier das Kaestchen ueber dem Wort - genau so
   * stand es beim ersten Blick im Browser. Dieselbe Stelle wie bei
   * `.auswahlzeile`. */
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  margin: 0; padding: 6px 8px; border-radius: var(--radius-klein);
  font-size: var(--feld-schrift); font-weight: normal; cursor: pointer;
}
.status-liste > label:hover { background: var(--grund); }
.status-liste .fussnote { margin: 5px 8px 3px; }

/* Rechts der Stand: was zu sehen ist, und der Weg zurueck. Der Knopf
 * „Anzeigen" ist entfallen - die Filter wirken sofort, und ein Knopf
 * daneben liesse offen, ob die Anzeige gerade den Einstellungen
 * entspricht. */
.filter-stand {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  height: var(--feld-hoehe);
  font-size: var(--feld-schrift); font-weight: 600;
  color: oklch(35% 0.006 250);
}
.filter-stand a { font-weight: 500; }

.brettfuss { margin: 2px 0 0; }

/* Waagerecht scrollen statt umbrechen: Sieben Auditspalten passen auf
 * keinen Bildschirm, und umgebrochene Spalten sind kein Brett mehr.
 *
 * `stretch` statt `flex-start`: **Alle Spalten gleich lang** (AUD-59). Eine
 * kurze Spalte neben einer langen sieht aus wie ein abgeschnittenes Brett.
 */
.brettspalten {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  align-items: stretch;
}

/* **Breiter seit dem 09.09.2026** (Bjoern: *„Das Board kann groesser sein
 * und damit auch die Karten."*). Zuerst 264 px statt 232, dann 292:
 *
 * *„Der Sticker darf natuerlich nicht ueber die Statusspalte hinweggehen.
 * Die Spalte ein wenig breiter machen und die Karte in der gleichen Groesse
 * lassen."* Die zusaetzlichen 28 px sind **kein** Zuwachs der Karte,
 * sondern der Platz rechts, in den das Band hineinragt - siehe
 * `.brettfach`. */
.brettspalte {
  flex: none; width: 292px;
  display: flex; flex-direction: column;
  background: var(--kennzeichen-neutral);
  border: 1px solid var(--kennzeichen-neutral-rand);
  border-radius: 10px;
  padding: 8px; min-height: 180px;
}

/* Die Farbe des Zustands, pastellig - dieselben vier Bedeutungen wie die
 * Kennzeichen (AUD-58). Welcher Zustand welchen Ton traegt, entscheidet
 * `app/board.py`: Das ist Fachlichkeit, keine Gestaltung. */
.brettspalte[data-ton="blau"] {
  background: var(--kennzeichen-blau);
  border-color: var(--kennzeichen-blau-rand);
}
.brettspalte[data-ton="gruen"] {
  background: var(--kennzeichen-gruen);
  border-color: var(--kennzeichen-gruen-rand);
}
.brettspalte[data-ton="rot"] {
  background: var(--kennzeichen-rot);
  border-color: var(--kennzeichen-rot-rand);
}

/* Spalten, die kein Ziel sind, treten zurueck - sie zeigen an, mehr nicht. */
.brettspalte.nur-anzeige { opacity: .72; }

/* --- Eingeklappte Spalten (09.09.2026) -------------------------------
 *
 * Bjoern: *„Statusspalten einklappen, praktisch 3 Buchstaben breit. Der
 * Statustext steht dann Vertikal in der Spalte und darunter die Zahl."*
 *
 * Die Karten sind **ausgeblendet, nicht weg**: Die Zahl im Kopf sagt
 * weiterhin, wie viele darin liegen - eine zugeklappte Spalte ohne Zahl
 * verschwiege genau das, was man wissen will.
 */
.brettspalte.zu {
  width: 44px; min-width: 44px; padding: 8px 4px;
}
.brettspalte.zu .brettkopf {
  flex-direction: column; align-items: center; gap: 8px; padding: 0;
}
.brettspalte.zu .brettkopf .name {
  writing-mode: vertical-rl;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: 210px;
}

/* Der Klapper selbst - ein kleiner, ruhiger Schalter im Spaltenkopf. Er
 * traegt keine Rahmenfarbe: Im Kopf einer farbigen Spalte waere er sonst
 * das Lauteste. */
.spaltenklapper {
  flex: none; height: var(--feld-hoehe-klein); padding: 0 5px;
  border-color: transparent; background: transparent;
  color: var(--text-gedaempft); font-size: 12px; line-height: 1;
}
.spaltenklapper:hover { background: var(--flaeche); color: var(--text); }
/* Waehrend eine Karte darueber haengt. */
.brettspalte.zielt {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.brettkopf {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px 10px; font-size: 12px; font-weight: 600;
}
.brettkopf .zahl {
  margin-left: auto; font-weight: 600;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche); border: 1px solid var(--rand-leise);
  border-radius: var(--radius-klein);
}
.brettnotiz {
  margin: 0 0 8px; padding: 0 4px;
  font-size: 11px; color: var(--text-gedaempft);
}
/* Der Abstand ist seit dem 09.09.2026 groesser: Das Schraegband des
 * Blockers ragt unten aus der Karte heraus und braucht Luft, sonst liegt es
 * auf der naechsten Karte.
 *
 * **Das Polster rechts ist der Platz fuer das Band.** Es haelt die Karte
 * schmal, waehrend die Spalte breiter wurde - so bleibt das Band innerhalb
 * seiner Spalte, statt auf die naechste zu ragen. Die Karte ist damit
 * genauso gross wie vorher: 292 - 2x8 (Spalte) - 28 = 248 px. */
.brettfach {
  display: flex; flex-direction: column; gap: 22px; flex: 1;
  padding-right: 28px;
}
.brettleer {
  margin: 0; padding: 6px 4px; font-size: 12px;
  color: var(--text-gedaempft);
}

/* --- Die Karte an der Nadel ------------------------------------------- */

/* **Kein `overflow: hidden`** (09.09.2026). Genau daran wurde das
 * Schraegband des Blockers an der Kartenkante abgeschnitten - Bjoern:
 * *„Der Blocker ist am Ende der Karte abgeschnitten."* Es soll ueber die
 * Karte hinausragen, wie in seiner Vorlage. */
.bkarte {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  padding: 16px 12px 11px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
  cursor: grab;
}
/* Das Schiefe: fest je Stelle in der Spalte, damit es sich beim Laden nicht
 * aendert. Vier Winkel reichen - danach wiederholt sich das Muster, und das
 * faellt an einer Pinnwand niemandem auf.
 *
 * **Seit dem 09.09.2026 deutlicher** (Bjoern: *„Die Karte ein klein wenig
 * mehr quer stellen."*) - etwa doppelt so schief wie vorher, aber immer
 * noch unter zwei Grad: Darueber liest es sich nicht mehr als angeheftet,
 * sondern als verrutscht. */
.brettfach > .bkarte:nth-child(4n+1) { transform: rotate(-1.6deg); }
.brettfach > .bkarte:nth-child(4n+2) { transform: rotate(1.2deg); }
.brettfach > .bkarte:nth-child(4n+3) { transform: rotate(-0.9deg); }
.brettfach > .bkarte:nth-child(4n+4) { transform: rotate(1.9deg); }

/* Beim Ziehen richtet sich die Karte auf - sie ist dann in der Hand. */
.bkarte:hover { transform: rotate(0deg); box-shadow: 0 3px 10px rgba(16, 24, 40, .14); }
.bkarte.wird-getragen { opacity: .45; transform: rotate(0deg); }

/* Die Nadel. Ein Kreis mit Glanzpunkt - mehr braucht es nicht, damit man
 * „angeheftet" liest. */
.bkarte-nadel {
  position: absolute; top: 4px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--kennzeichen-rot-text);
  box-shadow: inset 1.5px -1.5px 0 rgba(255, 255, 255, .45),
              0 1px 2px rgba(16, 24, 40, .3);
}

/* **Dunkel, nicht blau** (AUD-59). In der Vorlage ist der Titel die
 * Ueberschrift der Karte, kein Verweis - dass er einer ist, zeigt sich beim
 * Ueberfahren. Ein blauer Titel je Karte machte das Brett unruhig. */
.bkarte-titel {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--text);
}
.bkarte-titel:hover { color: var(--text); text-decoration: underline; }
.bkarte-marken { margin-top: 6px; }
.bkarte-marken .statusmarke { height: 18px; font-size: 10px; }
.bkarte-zeilen {
  margin-top: 6px; font-size: 12px; line-height: 1.55;
  color: var(--text-gedaempft);
}

/* Der Blocker als Schraegband an der unteren Ecke (AUD-59). Er ist eine
 * **Lage, keine Sperre** - die Karte laesst sich weiterhin ziehen.
 *
 * **Es ragt ueber die Karte hinaus** (09.09.2026, nach Bjoerns Vorlage):
 * unten und rechts steht es ueber die Kante. Vorher lag es innerhalb und
 * wurde von `overflow: hidden` abgeschnitten.
 *
 * **Kleiner, und es bleibt in der Spalte** (Bjoern, spaeter am Tag). Der
 * Ueberstand ist mit Absicht kleiner als das Polster rechts in
 * `.brettfach`: Ein Band, das ueber die Spaltenkante ragt, liegt auf der
 * naechsten Spalte und sieht aus, als gehoerte es dorthin.
 *
 * Gedreht wird um die Mitte, das Band wird dadurch **hoeher, als es
 * aussieht**: 120 px Breite unter 16 Grad ergeben rund 33 px zusaetzliche
 * Hoehe - je 16 nach oben und unten. Mit `bottom: -2px` bleibt es
 * innerhalb der 22 px Abstand zur naechsten Karte. */
.bkarte.blockiert { padding-bottom: 12px; }
.bkarte-band {
  position: absolute; right: -14px; bottom: -1px;
  width: 120px; padding: 2px 0;
  transform: rotate(-16deg);
  background: var(--kennzeichen-rot-text);
  color: #fff; text-align: center;
  font-size: 9px; line-height: 1.3;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .32);
}
.bkarte-band .datum { display: block; font-weight: 700; }
.bkarte-band .grund {
  display: block; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; padding: 0 6px;
}

/* ------------------------------------------------------ Vollbildseite */

.vollbildseite {
  margin: 0; display: flex; flex-direction: column;
  height: 100vh; background: var(--grund);
}
.vollbildkopf {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.vollbildtitel { font-size: 13px; }
.vollbildkopf .schaltflaeche { margin-left: auto; }
.vollbildmeldungen { flex: none; padding: 8px 16px 0; }
.vollbildinhalt { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }

/* ============================== Ishikawa-Maske (AUD-57)
 *
 * Zwei Teile: **das Bild** und **die Spalten** zum Sammeln.
 *
 * Das Bild zeichnet `app/static/js/ishikawa.js` als SVG - hier stehen nur
 * die Farben und Staerken, damit sie aus den Merkmalen kommen (Regel 10)
 * und nicht als feste Werte im Skript.
 */
.fischbild {
  overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px;
}
.fischbild-svg { display: block; }

/* Der Ruecken traegt das ganze Bild und darf das dickste Element sein. */
.fisch-ruecken { stroke: var(--text); stroke-width: 3; }
.fisch-spitze  { fill: var(--text); }

/* Die Kategoriegraete: kraeftiger als eine Ursache, schwaecher als der
 * Ruecken. Die drei Staerken sind die Ordnung des Bildes. */
.fisch-grat    { stroke: var(--text-gedaempft); stroke-width: 2; }
.fisch-ursache { stroke: var(--text-leise); stroke-width: 1.4; }
.fisch-neben   { stroke: var(--text-leise); stroke-width: 1; }

/* Die Hauptursache: eine kraeftige Linie, keine Flaeche. Sie soll sich
 * abheben, ohne die uebrigen Ursachen zu entwerten - gesammelt wird auch
 * das Uebrige. */
.fisch-ursache.haupt { stroke: var(--welt-kante, var(--akzent)); stroke-width: 2.4; }
.fisch-text.haupt    { fill: var(--akzent-text); font-weight: 600; }

.fisch-text {
  fill: var(--text); font-size: 11.5px;
  font-family: inherit; dominant-baseline: auto;
}
.fisch-text.klein { fill: var(--text-gedaempft); font-size: 10.5px; }

.fisch-kopf {
  fill: var(--flaeche-leise); stroke: var(--text-gedaempft); stroke-width: 1;
}
.fisch-kopftext {
  fill: var(--text); font-size: 12px; font-weight: 600;
  font-family: inherit;
}

.fisch-problem-flaeche {
  fill: var(--flaeche); stroke: var(--text); stroke-width: 1.5;
}
.fisch-problem-typ {
  fill: var(--text-leise); font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-family: inherit;
}
.fisch-problem-text {
  fill: var(--text); font-size: 12px; font-family: inherit;
}
/* Fehlt das Problem, sagt der Kasten das - er wird nicht mit dem Titel der
 * Feststellung gefuellt (Regel 5). Gestrichelt, damit man den Unterschied
 * sieht, ohne den Text zu lesen. */
.fisch-problem.fehlt .fisch-problem-flaeche {
  stroke: var(--text-leise); stroke-dasharray: 5 4;
}
.fisch-problem.fehlt .fisch-problem-text { fill: var(--text-leise); }

/* --- Die Spalten zum Sammeln ------------------------------------------
 *
 * Je Kategorie eine Spalte: Ishikawa lebt davon, breit zu sammeln - und man
 * soll sehen, wo schon viel steht und wo noch nichts.
 *
 * Waagerecht scrollen statt umbrechen, wie beim Kanban-Brett: Acht Spalten
 * passen auf keinen Bildschirm, und umgebrochene Spalten sind keine Spalten
 * mehr.
 */
.ishikawa-spalten {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  align-items: flex-start; margin-bottom: 10px;
}
.ishikawa-spalte {
  flex: none; width: 240px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 10px; padding: 8px;
}
.ishikawa-kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px 8px; font-size: 12px; font-weight: 600;
}
.ishikawa-kopf .zahl {
  margin-left: auto; font-weight: 500; color: var(--text-gedaempft);
}
.ishikawa-zeile { margin-bottom: 8px; }

/* Die Nebenursache steht eingerueckt unter ihrer Ursache - dieselbe
 * Ordnung wie im Bild, wo sie an deren Strich haengt. Der senkrechte Strich
 * macht sichtbar, wohin sie gehoert. */
.ishikawa-zeile.neben {
  margin-left: 14px; padding-left: 8px;
  border-left: 1px solid var(--rand-leise);
}
.ishikawa-zeile.haupt {
  border-left: 3px solid var(--welt-kante, var(--akzent));
  padding-left: 6px; margin-left: -9px;
}
.ishikawa-zeile.neben.haupt { margin-left: 11px; }

.ishikawa-zeilenfuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11px;
}
.ishikawa-zeilenfuss .auswahlzeile { margin: 0; font-size: 11px; }

/* ============================ Sortierpfeile in Stammdatenlisten (AUD-61)
 *
 * **Gezeichnet, nicht getippt** - dieselbe Ueberlegung wie beim Winkel
 * (AUD-58): Ein Schriftzeichen sieht je nach Schriftart anders aus und
 * sitzt nie ganz mittig.
 *
 * Der Knopf ist bewusst klein und leise. Er steht in einer Liste, in der
 * jede Zeile einen hat; in Knopfgroesse waere die Liste nur noch Knoepfe.
 */
.sortierspalte {
  width: 1%; white-space: nowrap; text-align: right;
}
.pfeilknopf {
  all: unset;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.pfeilknopf:hover { background: var(--feld-grund-aus); }
.pfeilknopf:focus-visible {
  outline: none; box-shadow: var(--feld-ring);
}

.pfeil {
  position: relative; display: inline-block;
  width: 12px; height: 12px;
}
.pfeil::before {
  content: ""; position: absolute; left: 2px;
  width: 6px; height: 6px;
  border-right: var(--winkel-staerke) solid var(--winkel-farbe);
  border-bottom: var(--winkel-staerke) solid var(--winkel-farbe);
}
.pfeil.hoch::before   { top: 4px; transform: rotate(-135deg); }
.pfeil.runter::before { top: 1px; transform: rotate(45deg); }

/* ==================================== Schieberegler mit Skala (AUD-61)
 *
 * Fuer die *Groesse der Massnahme* im Briefkasten. Der Wert steht daneben,
 * die Stufen darunter - **beides zusammen**, weil ein Regler allein nicht
 * sagt, wo man gerade steht, und eine Zahl allein nicht, wie weit die
 * Spanne reicht.
 */
.regler { display: flex; align-items: center; gap: 10px; }
.regler input[type=range] {
  flex: 1 1 auto; min-width: 0;
  height: var(--feld-hoehe);
  accent-color: var(--akzent);
  cursor: pointer;
}
.reglerwert {
  flex: none; min-width: 26px;
  font-size: 15px; font-weight: 700; text-align: center;
  color: var(--text);
}
.reglerskala {
  display: flex; justify-content: space-between;
  margin: -4px 36px 0 2px;
  font-size: 10.5px; color: var(--text-leise);
}

/* ================================ Blocker als eine Zeile (AUD-59)
 *
 * Bjoern: *„Blocker in der Massnahme eher eine Zeile und hinten einen Button
 * zum Setzen des Blockers."* Der Blocker ist die Ausnahme, nicht der
 * Regelfall - als aufgeklappter Abschnitt mit eigenem Textfeld nahm er mehr
 * Platz ein als die Massnahme selbst.
 */
.blockerzeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.blockerzeile input[type=text] { flex: 1 1 260px; min-width: 0; }
.blockerzeile button { flex: none; }

/* Der Zettel am Kopf der Massnahme (AUD-55, Aenderungswunsch 09.09.2026).
 *
 * Bjoern: *„Wenn ein Blocker gesetzt wurde, haette ich gerne oben in der
 * Massnahme ein Postit ... mit BLOCKER und in der Farbe Rot."*
 *
 * Ein Zettel, kein Kasten: Papierfarbe, leichter Schatten, minimal schief -
 * dieselbe Sprache wie die Karten an der Pinnwand (AUD-59). Er schwimmt
 * rechts, damit der Text der Maske darunter weiterlaeuft, statt nach unten
 * geschoben zu werden.
 *
 * **Das Wort traegt die Warnfarbe, nicht der Zettel.** Ein ganz roter Zettel
 * schriee; der Blocker ist eine Lage, keine Sperre (siehe `_blocker.html`).
 */
/* **Dunkelrot mit weisser Schrift** (Bjoern am 09.09.2026). Vorher lag der
 * Zettel auf Apricot mit rotem Wort - zu leise fuer das, was er sagt.
 *
 * Es ist **dasselbe Dunkelrot wie das Schraegband** auf der Karte: Der
 * Blocker sieht in der Maske aus wie im Brett. Zwei Rottoene fuer dieselbe
 * Sache waeren zwei Sprachen. */
.blockerzettel {
  /* **Links, nicht rechts** (09.09.2026). Rechts lag der Zettel auf der
   * Kante der Inhaltsspalte; links steht er dort, wo das Auge anfaengt. */
  float: left;
  margin: -2px 16px 10px 0;
  min-width: 156px;
  padding: 8px 14px 9px;
  background: var(--kennzeichen-rot-text);
  border: 1px solid var(--kennzeichen-rot-text);
  border-radius: 2px;
  box-shadow: 0 2px 7px rgba(16, 24, 40, .28);
  transform: rotate(-1.2deg);
  text-align: center;
  line-height: 1.35;
  color: #fff;
}
.blockerzettel .wort {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
}
.blockerzettel .wer {
  display: block; font-size: 13px; font-weight: 600; color: #fff;
}
.blockerzettel .wann {
  display: block; font-size: 11px; color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
}
/* Woran es liegt - gekuerzt, damit der Zettel ein Zettel bleibt. Die feine
 * Linie darueber trennt die Lage von den Angaben, wer und wann. */
.blockerzettel .grund {
  display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: 11px; font-style: italic; color: rgba(255, 255, 255, .92);
}

/* Ist einer gesetzt, traegt die Zeile die Warnfarbe - aber getoent, nicht
 * gefuellt: Ein Blocker ist eine Lage, keine Sperre. */
.blockerzeile.aktiv {
  padding: 8px 10px;
  background: var(--kennzeichen-rot);
  border: 1px solid var(--kennzeichen-rot-rand);
  border-radius: var(--radius);
}
.blockermarke {
  flex: none;
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
  border-radius: 999px;
  background: var(--kennzeichen-rot-text); color: #fff;
  font-size: 11px; font-weight: 600;
}
.blockertext {
  flex: 1 1 200px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--kennzeichen-rot-text); font-weight: 600;
}
.blockerstand {
  flex: none; font-size: 11px; color: var(--text-gedaempft);
}

/* ============================== Die 5W-Kette im Ergebnis (AUD-60)
 *
 * Nach Bjoerns Vorlage: je Stufe ein Punkt „Warum ...? Weil ...", darunter
 * das Fazit. So liest sich die Analyse wie aufgeschrieben - und man sieht,
 * ob die naechste Frage den vorigen Grund aufgreift.
 */
.warumkette {
  margin: 4px 0 10px; padding-left: 1.1rem;
  font-size: 12.5px; line-height: 1.55;
}
.warumkette li { margin-bottom: 5px; }
.warumkette li::marker { color: var(--welt-kante, var(--akzent)); }
.warumgrund { display: block; color: var(--text-gedaempft); }
.warumkette li.fazit {
  list-style: none; margin-left: -1.1rem; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--rand-leise);
}

/* Eine Stufe in der Maske: Frage und Grund gehoeren zusammen und stehen
 * deshalb in einem Block - halb ausgefuellt faellt das auf. */
.warumstufe { margin-bottom: 6px; }
.warumstufe.unvollstaendig {
  border-left: 3px solid var(--kennzeichen-rot-rand);
  padding-left: 9px; margin-left: -12px;
}
.grundursachenfeld textarea { font-weight: 600; }

/* ------------------------------------------------- Handy-Zugang (AUD-67)
 *
 * Die Seite mit dem QR-Code am Schreibtisch. Der Code links, die Erklaerung
 * rechts - auf schmalen Fenstern untereinander.
 *
 * Die **Handy-Ansicht selbst** hat ein eigenes Stylesheet (`handy.css`):
 * Dort gelten andere Groessen (17 px Schrift, 42 px Flaechen), weil dort ein
 * Daumen bedient und keine Maus. Wer beides in eine Datei zwaenge, muesste
 * jede Regel mit einer Medienabfrage einklammern.
 */

.handyzugang {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.handyzugang .barcode {
  flex: none;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 10px;
}

/* **Regel 18: ein Barcode wird nie beschnitten.**
 *
 * `qr_svg()` liefert das SVG mit `viewBox` und **ohne** feste Masse - erst
 * damit skaliert eine CSS-Breite den Code, statt ihn abzuschneiden. `width`
 * setzt die Wunschgroesse, `max-width: 100%` haelt ihn in engen Fenstern
 * darin, `height: auto` behaelt das Quadrat.
 *
 * Am 09.09.2026 stand er hier abgeschnitten: 264 px SVG in 260 px Kasten,
 * ohne viewBox - und ein angeschnittener QR-Code ist kein QR-Code mehr. */
.handyzugang .barcode svg {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

.handyzugang .qrtext { flex: 1 1 320px; min-width: 0; }
.handyzugang .qrtext h1 { margin-top: 0; }

/* Die Adresse ist eine Berechtigung: nur lesen, aber ganz markierbar. */
.handyzugang .feldblock input { width: 100%; font-family: var(--schrift-fest, monospace); }