/* Shell — Rahmen der Plattform.
 *
 * Die Werte stammen aus shared/ui-tokens/tokens.json, Fassung 2.0.0 (gepinnt in
 * core/module.yaml). Wer sie hier ändert, ändert sie am falschen Ort — die
 * Tokens sind eigenständig versioniert.
 *
 * Was hier steht, ist der RÜCKFALL. Im Betrieb schreibt die Shell dieselben
 * Werte beim Start als Variablen auf den Wurzelknoten; sind sie da, gilt der
 * Token-Wert. Fehlt `shared/ui-tokens`, sieht die Shell trotzdem richtig aus.
 *
 * 2.0.0 übernimmt die Werte von DataCatalog Pro — Michaels Entscheidung vom
 * 30.07.2026, damit die Plattform und die Anwendung, die sie ablöst, nicht
 * nebeneinander wie zwei Programme aussehen. Die Falle dabei steht in
 * shared/ui-tokens/UMSTELLUNG-2.0.0.md: `linie-2` war heller als `linie` und
 * ist jetzt dunkler.
 */

/* Inter, selbst ausgeliefert. Kein Aufruf an fonts.googleapis.com — Begründung
   in shared/ui-tokens/schrift/HERKUNFT.md. Muss die erste Zeile bleiben:
   @import ist nur vor allen anderen Regeln gültig. */
@import url("/shared/ui-tokens/schrift.css");

/* Die gemeinsamen Oberflächenteile — Knöpfe, Fenster, Listenzeilen, Marken.
   Danach folgt in dieser Datei nur noch, was an der Shell wirklich anders ist:
   die dunkle Modulleiste, die Anmeldung, die Verwaltungsmasken. */
@import url("/shared/ui-tokens/bausteine.css");

:root {
  --marke: #009DC4;
  --marke-dunkel: #007A99;
  --marke-hell: #E5F6FB;

  --flaeche: #F0F4F7;
  --weiss: #FFFFFF;
  --flaeche-2: #F5F8FA;
  --flaeche-3: #EBF0F5;

  --linie: #DDE4EC;
  --linie-2: #C4D0DC;   /* die BETONTE Kante — dunkler als --linie */

  --text: #1A2332;
  --text-2: #4A5E72;
  --text-3: #8A9BAD;

  --gut: #27AE60;
  --achtung: #E67E22;
  --fehler: #E74C3C;
  --soll: #8E44AD;
  --akzent: #16A085;
  --betont: #D35400;
  --ruhend: #C4D0DC;

  --gut-linie: #A8DDB8;
  --achtung-linie: #F5CBA7;
  --fehler-linie: #F5B7B1;

  --schatten: 0 2px 8px rgba(0,0,0,.08);
  --schatten-mittel: 0 4px 16px rgba(0,0,0,.1);
  --schatten-gross: 0 4px 20px rgba(0,0,0,.18);

  /* Die dunkle Leiste ist im Entwurf keine Token-Farbe, sondern gehört zur
     Shell. Deshalb steht sie hier und nicht in tokens.json. */
  --leiste: #12212c;

  --r: 6px;
  --radius-klein: 4px;
  --radius-gross: 10px;
  --radius-pille: 20px;

  --leiste-breit: 74px;
  --kopf-hoch: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 13px/1.5 Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--flaeche);
}

button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

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

.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.anmeldung form {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 30px;
  width: 100%;
  max-width: 380px;
}

.anmeldung .logo { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.anmeldung .u {
  color: var(--text-3); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px;
}
.anmeldung p.hint { color: var(--text-2); font-size: 12.5px; margin: 6px 0 22px; }

/* `.feld` meint hier dasselbe wie in `bausteine.css` — Beschriftung über
   Eingabe —, nur war es zweimal gebaut: dort als Flex-Spalte mit `gap: 3px`,
   hier als Block mit `margin-bottom: 5px` am Label. Beides zusammen ergab 8 px
   statt der gemeinten 5. Jetzt trägt der gemeinsame Baustein das Layout, und
   Core sagt nur noch, wie weit die Beschriftung abstehen soll. */
.feld { margin-bottom: 14px; gap: 5px; }
.feld label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-3);
}
.feld input {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--weiss); color: var(--text);
}
.feld input:focus { outline: 2px solid var(--marke-hell); border-color: var(--marke); }
.feld input:disabled { background: var(--flaeche-2); color: var(--text-3); }

.feldhinweis { color: var(--text-3); font-size: 11.5px; margin: 5px 0 0; }
.feldhinweis code {
  background: var(--flaeche-2); padding: .1rem .3rem; border-radius: 3px;
  font-size: 11px;
}
.freiwillig {
  color: var(--text-3); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 10.5px;
}

.knopf {
  width: 100%; padding: 10px; border: 1px solid var(--marke);
  background: var(--marke); color: #fff; border-radius: var(--r);
  font-weight: 600;
}
.knopf:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
.knopf:disabled { opacity: .55; cursor: default; }

.meldung {
  margin-top: 14px; padding: 9px 12px; border-radius: var(--r);
  font-size: 12.5px; background: #fdecea; color: var(--fehler);
}
.meldung.gut { background: #e9f6ee; color: #2f7d50; }

/* ------------------------------------------------------------- Icon-Leiste */

.leiste {
  position: fixed; left: 0; top: var(--kopf-hoch); bottom: 0;
  width: var(--leiste-breit); background: var(--leiste);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 3px; z-index: 30;
  overflow-y: auto;
}

/* Schrift heller seit Core 1.14 (Michael, 03.10.2026: "die Schriftfarbe der
   Module in der schwarzen Modulleiste etwas heller"), vorher #8ba0ad. */
.leiste button {
  width: 60px; border: 0; background: transparent; color: #bccbd4;
  padding: 9px 2px 7px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; line-height: 1.15; text-align: center; letter-spacing: .1px;
  hyphens: auto;
}
.leiste button svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.leiste button:hover { background: rgba(255,255,255,.07); color: #eef4f7; }
.leiste button.an { background: var(--marke); color: #fff; }

/* ── In der Wissensbasis ist nicht jeder Bereich zu Hause (02.09.2026) ──────
 *
 * Michael: „die Modul-Button in der linken, schwarzen Spalte [müssen]
 * ausgegraut sein, wenn ich auf Wissensbasis klicke."
 *
 * Nachgezählt haben nur Geschäftsprozesse, Glossar und Data Vision
 * mandantenneutralen Inhalt; die übrigen zeigten dort die Daten eines Kunden.
 *
 * Blass und ohne Zeigefinger, aber SICHTBAR: Ein Bereich, der beim Umschalten
 * verschwindet, sieht aus wie ein Fehler — und man sucht ihn. Der Hinweistext
 * am Knopf sagt, warum er gerade nicht geht. */
.leiste button.nur-mandant {
  opacity: .32;
  cursor: default;
}
.leiste button.nur-mandant:hover { background: none; color: inherit; }

.leiste .luecke { height: 14px; }
.leiste .dehnung { flex: 1; }
.leiste .ich {
  width: 32px; height: 32px; border-radius: 50%; background: #31424f;
  color: #cfdde6; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; border: 0;
}
.leiste .ich:hover { background: #3d5261; }

.leer {
  color: #6b8290; font-size: 10px; text-align: center;
  padding: 12px 6px; line-height: 1.4;
}

/* ------------------------------------------------------------------- Kopf */

.kopf {
  height: var(--kopf-hoch); background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: 20px;
  padding: 0 26px 0 22px;
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
}

.kopf .logo {
  font-size: 20px; font-weight: 700; letter-spacing: -.5px;
  white-space: nowrap; min-width: 186px;
  /* Zwei Woerter statt einem (26.08.2026): Der Knopf ist `display:flex`, ein
     Leerzeichen im Markup wuerde dort verschluckt. */
  gap: .3em;
}
.kopf .logo .a { color: var(--text); }
.kopf .logo .b { color: var(--marke); }

.kopf .trenner { width: 1px; height: 26px; background: var(--linie); }
.kopf .wer { display: flex; align-items: center; gap: 9px; }
.kopf .kuerzel {
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--marke-hell); color: var(--marke-dunkel);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.kopf select {
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 6px 9px; font: inherit; background: var(--weiss); color: var(--text);
  max-width: 320px;
}
.kopf .dehnung { flex: 1; }
.kopf .stand { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* Sichtumschalter — nur für SDZeCOM-Rollen. */
.sicht { display: flex; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.sicht button {
  border: 0; background: var(--weiss); color: var(--text-2);
  padding: 6px 11px; font-size: 12px;
}
.sicht button.an { background: var(--marke-hell); color: var(--marke-dunkel); font-weight: 600; }

/* ------------------------------------------------------------------ Bühne */

/* `.buehne` sitzt schon per `left`/`top` an der richtigen Stelle (unter Kopf
   und neben der Icon-Leiste) - ein zusätzlicher `margin-left`/`padding-top`
   am Kind darin würde denselben Abstand ein zweites Mal aufaddieren. Genau
   das stand hier und schnitt der Verwaltung (die ihr HTML direkt in dieses
   Element rendert, siehe `verwaltung.js`) den unteren Teil ab, ohne dass es
   dafür eine Bildlaufleiste gab: `overflow-y` fehlte gänzlich. */
.buehne {
  position: fixed; left: var(--leiste-breit); right: 0; top: var(--kopf-hoch); bottom: 0;
  overflow-y: auto;
}
.buehne iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--weiss); }

.willkommen { max-width: 640px; margin: 0 auto; padding: 60px 26px; }
.willkommen h1 { font-size: 23px; letter-spacing: -.3px; margin: 0 0 8px; font-weight: 600; }
.willkommen p { color: var(--text-2); margin: 0 0 12px; }
.willkommen table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13.5px; }
.willkommen td { padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.willkommen td:first-child { color: var(--text-2); width: 12rem; }

/* Kurze Einblendung für `notify` aus einem Modul. */
.hinweis {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: var(--text); color: #fff; padding: 11px 16px;
  border-radius: var(--r); font-size: 13px; max-width: 380px;
  box-shadow: 0 6px 24px rgba(27,42,53,.22);
}

/* `overlay-open` aus einem Modul: Die Shell tritt zurück, damit ein Dialog im
   iframe nicht unter Kopfzeile und Leiste verschwindet. */
body.ueberlagert .leiste,
body.ueberlagert .kopf { filter: brightness(.94); }
body.ueberlagert .buehne { top: 0; left: 0; z-index: 50; }

/* ------------------------------------------------------------- Verwaltung */
/*
 * Kein Fachmodul, deshalb kein Menüeintrag: Der Zugang sitzt unten in der
 * Icon-Leiste beim Kürzel. Die sieben Einträge oben kommen aus der Registry —
 * ein achter, der aus dem Quelltext käme, würde genau die Aussage
 * verwässern, die die Leiste treffen soll.
 */
.leiste .zahnrad { color: #bccbd4; }
.leiste .zahnrad.an { background: var(--marke); color: #fff; }

/* Michael am 31.07.2026 mit einem Bildschirmfoto seines breiten Monitors:
   *„ist das sinnvoll? Bitte nutze doch die gesamte Bildschirmbreite."*

   1000 Pixel waren fuer Lesetext eine vernuenftige Zeilenlaenge — aber hier
   stehen Tabellen mit acht Spalten, und daneben lag auf 2560 Pixeln mehr
   leerer Raum als Inhalt. Eine Tabelle ist kein Fliesstext: Sie wird mit
   jeder Spalte, die man sieht, besser.

   Die Obergrenze bleibt gross genug, dass die Zeile auf einem sehr breiten
   Bild nicht ins Uferlose laeuft — 2200 Pixel sind etwa das, was man mit
   einem Blick noch erfasst. */
.verwaltung { max-width: 2200px; margin: 0 auto; padding: 30px 32px 70px; }

/* Der Kopf der Verwaltung bleibt stehen (21.09.2026).
 *
 * Gerollt wird in `.buehne` - sie ist `position: fixed` mit `overflow-y`,
 * also der Bildlaufbereich, an dem `sticky` haengt. `top: 0` heisst deshalb
 * „oben in der Buehne" und nicht „oben im Fenster"; der Kopf der Anwendung
 * und die Modulleiste stehen ohnehin fest.
 *
 * Die NEGATIVEN Raender heben die Polsterung von `.verwaltung` auf und die
 * Polsterung hier setzt sie wieder: Sonst endete die Flaeche des Kopfes 32 px
 * vor dem Rand, und der Inhalt zoege beim Rollen sichtbar daneben vorbei.
 *
 * `z-index` ueber den Karten, aber unter den Fenstern des Dialogs. */
.verwaltung-kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--flaeche);
  margin: -30px -32px 0;
  padding: 30px 32px 0;
}

/* Die Trennlinie gehoert jetzt an den KOPF, nicht an die Reiterleiste: Sie
   markiert die Kante, an der das Rollen beginnt. An der Leiste sitzend
   schwebte sie mit einer Lucke darunter. */
.verwaltung-kopf .reiter { margin-bottom: 0; }

#verwaltunginhalt { padding-top: 22px; }

/* Tabellenkoepfe der Verwaltung bleiben stehen (24.09.2026). Michael: „Ich
   koennte schwoeren, dass wir diese Tabelle schonmal so scrollbar gemacht
   haben, dass der Tabellenkopf stehen bleibt." Stehen blieb bis hierher nur
   der Kopf der VERWALTUNG (Core 1.41), nicht der der Tabellen. Jetzt haengt
   jede Kopfzeile direkt darunter: `--verwaltung-kopfhoehe` misst
   `verwaltung.js` an `.verwaltung-kopf`, weil dessen Hoehe mit dem Text
   darueber wechselt. */
.verwaltung table.liste thead th {
  position: sticky;
  top: var(--verwaltung-kopfhoehe, 0px);
  z-index: 3;
  background: var(--flaeche-2, #F4F7FA);
  box-shadow: 0 1px 0 var(--linie);
}

/* Die Aufteilung Listen | Eintraege war auf die 1000 Pixel gerechnet. Auf
   einem breiten Bild darf die linke Spalte schmal bleiben und der Rest an die
   Eintraege gehen — dort stehen die Tabellen. */
@media (min-width: 1400px) {
  .stammdaten-spalten { grid-template-columns: 18rem 1fr; }
}
.verwaltung h1 { font-size: 23px; letter-spacing: -.3px; margin: 0 0 4px; font-weight: 600; }
.verwaltung > p { color: var(--text-2); margin: 0 0 22px; font-size: 13.5px; }

.reiter { display: flex; border-bottom: 1px solid var(--linie); margin-bottom: 22px; }
.reiter button {
  border: 0; background: transparent; padding: 11px 16px; color: var(--text-2);
  border-bottom: 2px solid transparent; font-size: 13px;
}
.reiter button.an {
  color: var(--marke-dunkel); border-bottom-color: var(--marke); font-weight: 600;
}
/* Zweite Ebene innerhalb eines Reiters — Icons und Arten liegen zusammen unter
   „Icons & Arten" (20.08.2026). Kleiner und ohne eigene Trennlinie, damit die
   Rangfolge zu sehen ist: Der obere Reiter fuehrt, dieser waehlt darin. */
.reiter-klein { border-bottom: 0; margin-bottom: 12px; gap: 4px; }
.reiter-klein button { padding: 6px 12px; font-size: 12.5px; border-radius: 5px; }
.reiter-klein button.an {
  background: var(--marke-hell, #EAF6FA); border-bottom-color: transparent;
}

.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); margin-bottom: 20px;
}
.karte > h2 {
  padding: 13px 18px; border-bottom: 1px solid var(--linie);
  font-size: 13.5px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 12px;
}
.karte > h2 .dehnung { flex: 1; }
.karte .inhalt { padding: 18px; }

table.liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.liste th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-3); font-weight: 600;
  padding: 10px 18px; border-bottom: 1px solid var(--linie);
}
table.liste td { padding: 11px 18px; border-bottom: 1px solid var(--linie); }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tr.inaktiv td { color: var(--text-3); }

.marke {
  font-size: 10.5px; padding: 2.5px 8px; border-radius: 11px;
  font-weight: 600; white-space: nowrap;
}
.marke.gut { background: #e9f6ee; color: #2f7d50; }
.marke.ruhend { background: #eef2f5; color: #66757f; }
.marke.warnung { background: #fdf3e3; color: #8a5d12; }

.knopf.klein {
  width: auto; padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  background: var(--weiss); color: var(--text-2); border-color: var(--linie);
}
.knopf.klein:hover { border-color: var(--marke); color: var(--marke-dunkel);
  background: var(--weiss); }
.knopf.klein.wichtig {
  background: var(--marke); border-color: var(--marke); color: #fff;
}
.knopf.klein.wichtig:hover { background: var(--marke-dunkel); }

/* Bis 0.42.1 hieß das hier `.zeile` — und kollidierte mit `.zeile` aus
   `shared/ui-tokens/bausteine.css`, wo eine **Listen**zeile gemeint ist:
   `cursor: pointer`, Rahmen, `margin-bottom`, Hover-Hintergrund. Weil die
   Modul-Datei den gemeinsamen Baustein per `@import` an ihren Anfang holt,
   gewann Core nur bei `display` und `gap` — alles andere sickerte durch.

   Sichtbar war das in **Mandant anlegen** und **Benutzer anlegen**: Beim
   Überfahren einer Formularzeile leuchtete sie auf und der Mauszeiger wurde
   zum Klickzeiger, obwohl dort nichts anklickbar ist.

   Der Name ist derselbe wie in `geschaeftsprozesse` (`.formular-zeile`), wo
   dieselbe Sache dasselbe bedeutet. `tools/pruefe-css.py` hält den Fall
   künftig auf. */
.formular-zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.formular-zeile .feld { flex: 1; min-width: 190px; }

.schalter { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--linie); }
.schalter:last-child { border-bottom: 0; }
.schalter .name { flex: 1; }
.schalter .name small { display: block; color: var(--text-3); font-size: 11.5px; }
.schalter input { width: 17px; height: 17px; accent-color: var(--marke); }

.einmal {
  background: var(--marke-hell); border: 1px solid var(--marke);
  border-radius: var(--r); padding: 14px 16px; margin-top: 14px;
}
.einmal code {
  display: block; font-size: 15px; font-weight: 600; margin: 8px 0;
  word-break: break-all; color: var(--text);
}
.einmal p { margin: 0; font-size: 12.5px; color: var(--text-2); }

/* ─────────────────────────────────────────────── Verwaltung: KI-Zugang ────
 *
 * Ein Formular mit Erklaerungen unter jedem Feld. Ohne die steht der Benutzer
 * vor „Basis-URL" und raet — und bei einem Feld, dessen Aenderung 143
 * Vektoren unbrauchbar macht, ist Raten die falsche Bedienart.
 */
.formular { display: grid; gap: 18px; max-width: 60rem; margin-top: 16px; }
.formular .feldzeile { display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }
.formular .feldzeile > span:first-child { font-weight: 600; color: var(--text); }
.formular input[type="text"],
.formular input[type="url"],
.formular input[type="password"],
.formular input[type="number"],
.formular select {
  font: inherit; padding: 7px 10px;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--weiss); color: var(--text); width: 100%;
}
.formular input:focus, .formular select:focus { outline: none; border-color: var(--marke); }
.formular input[type="checkbox"] { width: auto; justify-self: start; }
.formular .knopfzeile { display: flex; gap: 8px; margin-top: 4px; }

/* ────────────────────────────────────────────────────── Stammdaten ────────
 *
 * Links die Listen, rechts ihre Eintraege. Bei zwoelf Listen mit teils
 * hunderten Eintraegen ist das die Aufteilung, die ohne Blaettern auskommt.
 */
.stammdaten-spalten {
  display: grid; grid-template-columns: 17rem 1fr; gap: 20px;
  align-items: start; margin-top: 16px;
}
@media (max-width: 900px) { .stammdaten-spalten { grid-template-columns: 1fr; } }

.stammdaten-listen {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 6px; background: var(--weiss); max-height: 70vh; overflow-y: auto;
}
.stammdaten-liste {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: none; border-radius: var(--radius-klein, 4px);
  background: none; font: inherit; font-size: 12.5px; color: var(--text-2);
  cursor: pointer; text-align: left; width: 100%;
}
.stammdaten-liste:hover { background: var(--flaeche-2); color: var(--text); }
.stammdaten-liste.an { background: var(--marke-hell); color: var(--marke-dunkel); font-weight: 600; }
.stammdaten-liste-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stammdaten-liste-zahl { color: var(--text-3); font-size: 11px; flex: none; }

.stammdaten-eintraege h2 { margin: 0 0 4px; font-size: 15px; }

/* Der beschreibende Satz unter der Ueberschrift. NICHT `.hinweis` — die
   Klasse gehoert der Meldungsblase der Shell, die unten rechts einschwebt.
   Genau das ist am 30.07.2026 passiert: Die Listenbeschreibung erschien als
   schwarzer Kasten in der Ecke. */
.erklaerung { font-size: 12px; color: var(--text-3); margin: 0 0 10px; max-width: 46rem; }

/* Die Anlegezeile. Jedes Feld traegt seine Beschriftung UEBER sich, nicht als
   Platzhalter darin — ein Platzhalter verschwindet beim Tippen, also genau
   dann, wenn man ihn braucht. Und ein Zahlenfeld mit einer „0" ohne
   Beschriftung sagt niemandem, dass die Reihenfolge gemeint ist. */
.stammdaten-anlegen {
  display: grid;
  /* Ein Feld fuer den Wert. Der Schluessel ist weg — er entsteht aus dem Wert
     (Michael, 30.07.2026), die Reihenfolge aus dem Ziehen. */
  grid-template-columns: minmax(16rem, 1fr);
  gap: 12px 14px; align-items: start;
  margin: 12px 0 16px; padding: 14px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r);
}
@media (max-width: 720px) { .stammdaten-anlegen { grid-template-columns: 1fr; } }

.stammdaten-feld { display: grid; gap: 4px; min-width: 0; }
.stammdaten-feld .feldname {
  font-size: 12px; font-weight: 600; color: var(--text);
}
/* Der Knopf ist ein Knopf, kein Balken (21.08.2026). `.knopf` traegt
   `width: 100%` — richtig in der Anmeldemaske, wo er die Zeile fuellen soll,
   falsch in einer Fusszeile mit `space-between`: Dort wurde daraus ein
   Band ueber die ganze Breite. Michael: „Das ist uebrigens kein Button mit
   dem Eintrag anlegen — warum so breit?" */
.stammdaten-anlegen-fuss .knopf { width: auto; }

.stammdaten-anlegen-fuss {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--linie); padding-top: 12px;
}
.stammdaten-anlegen .nebeneinander {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
}

/* Felder, die direkt in der Tabellenzelle stehen. Sie sehen zurueckhaltend
   aus, bis man sie anfasst — eine Tabelle aus lauter Rahmen ist unlesbar. */
.zellfeld {
  font: inherit; font-size: 12.5px; padding: 4px 7px; width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-klein, 4px);
  background: transparent; color: var(--text);
}
.zellfeld:hover:not(:disabled) { border-color: var(--linie); background: var(--weiss); }
.zellfeld:focus { outline: none; border-color: var(--marke); background: var(--weiss); }
.zellfeld:disabled { color: var(--text-3); }
.zellfeld.schmal { width: 5.5rem; }
/* Mehrzeilig in einer Tabellenzelle (19.08.2026, Beschreibung am System).
   `resize: none` und `overflow: hidden`, weil die Höhe im Skript mit dem Inhalt
   wächst — ein Ziehpunkt daneben wäre eine zweite, widersprechende Bedienung. */
.zellfeld-mehrzeilig {
  resize: none; overflow: hidden; line-height: 1.4;
  min-height: 1.9rem; font: inherit;
}
.spalte-beschreibung { min-width: 16rem; }

/* Das Zeichen einer Werteliste und die Auswahl der Systemart (20.08.2026). */
.spalte-zeichen { width: 4.5rem; }
.zeichenfeld {
  width: 3.2rem; text-align: center; font-size: 16px; line-height: 1.2;
}
.artfeld { min-width: 9rem; display: flex; align-items: center; gap: 5px; }
.artfeld select { width: 100%; min-width: 0; }
/* Das Bild des gewaehlten Icons neben dem Waehler — eine `<option>` kann keines
   tragen. `flex-shrink: 0`, sonst quetscht der Waehler es weg. */
.artfeld-bild {
  width: 1.4rem; height: 1.4rem; object-fit: contain; flex: 0 0 auto;
}

/* ── Die Auswahl mit Bildern (17.09.2026) ─────────────────────────────────
   Ein Knopf im Gewand des Zellfelds, darunter eine eigene Liste am `body`. */
.bildwahl-knopf {
  display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer;
}
.bildwahl-knopf:disabled { cursor: default; }
.bildwahl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bildwahl-text.leer, .bildwahl-zeile .leer { color: var(--text-3); }
.bildwahl-pfeil { color: var(--text-3); font-size: 10px; flex: 0 0 auto; }
.bildwahl-liste {
  position: fixed; z-index: 300;
  background: var(--weiss); border: 1px solid var(--linie-2, #C4D0DC);
  border-radius: var(--radius-gross, 10px);
  box-shadow: var(--schatten-gross, 0 4px 20px rgba(0,0,0,.18));
  padding: 6px; max-height: 60vh; overflow-y: auto;
}
.bildwahl-zeile {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 10px; border: none; background: none; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer;
  border-radius: var(--radius-klein, 4px);
}
.bildwahl-zeile:hover, .bildwahl-zeile:focus { background: var(--flaeche-2, #F5F8FA); color: var(--text); outline: none; }
.bildwahl-zeile.aktiv { color: var(--marke); font-weight: 500; }
.bildwahl-platz { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.bildwahl-zeichen { font-size: 14px; }

/* ── Das hochgeladene Icon in der Pflegemaske (20.08.2026, nachts) ──────────
 *
 * Michael: „Bilddatei je Icon hochladen" — „und diese Bilddatei kann auch vom
 * User hochgeladen werden."
 *
 * Die Zelle zeigt entweder das Bild oder einen leeren Rahmen zum Hineinklicken.
 * Kein „Durchsuchen…"-Knopf: Ein `input[type=file]` sieht in jedem Browser
 * anders aus und in keinem gut. Das Feld liegt deshalb unsichtbar darueber, und
 * geklickt wird auf die Flaeche, in der das Bild danach steht — dort, wo man es
 * erwartet.
 *
 * `--schachbrett` liegt HINTER dem Bild: Ein Logo mit durchsichtigem Rand ist
 * sonst nicht von einem mit weissem Rand zu unterscheiden, und genau das ist die
 * Angabe, die man beim Hochladen pruefen will.
 */
.spalte-bild { width: 3.6rem; }

.bildfeld {
  position: relative; width: 2.2rem; height: 2.2rem;
  border: 1px dashed var(--linie-2); border-radius: var(--radius-klein, 4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 13px; line-height: 1;
  background-image:
    linear-gradient(45deg, var(--flaeche-2, #EEF2F6) 25%, transparent 25%),
    linear-gradient(-45deg, var(--flaeche-2, #EEF2F6) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--flaeche-2, #EEF2F6) 75%),
    linear-gradient(-45deg, transparent 75%, var(--flaeche-2, #EEF2F6) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.bildfeld.hat-bild { border-style: solid; border-color: var(--linie); }
.bildfeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Das Dateifeld liegt unsichtbar ueber der ganzen Flaeche. `opacity: 0` und
   nicht `display: none`: Ein ausgeblendetes Feld nimmt keine Klicks, und ein
   `label` drumherum waere in einer Tabellenzelle ein zweiter Klickbereich. */
.bildfeld input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.bildfeld input[type="file"]:disabled { cursor: default; }
.bildfeld:hover:not(.gesperrt) { border-color: var(--marke); }
/* Das Ruecknahmezeichen wie bei der Farbe (`.farbe-weg`) und aus demselben
   Grund: Es nimmt das BILD zurueck, nicht die Zeile. */
.bild-weg {
  position: absolute; top: -6px; right: -6px;
  width: 15px; height: 15px; padding: 0; line-height: 1;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--weiss); color: var(--text-2);
  font-size: 10px; cursor: pointer;
}
.bild-weg:hover { border-color: var(--marke); color: var(--marke); }
/* In der Anlegezeile sollen die Felder als solche zu erkennen sein — dort gibt
   es keine Tabellenzeile drumherum, die sie eingrenzt. */
.zellfeld.gerahmt { border-color: var(--linie-2); background: var(--weiss); }
/* Der Schluessel steht in Festbreitenschrift: Er ist eine Kennung, kein Text. */
.zellfeld.schluessel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ───────────────────────────────────── Wertelisten: Reihenfolge per Ziehen ─
 *
 * Michael, 30.07.2026: „Die Reihenfolge moechte ich per Drag & Drop schieben
 * koennen - nicht mit so einer bloeden Zahl." Eine Reihenfolge ist etwas, das
 * man sieht; ueber Zahlen muss man sie sich im Kopf ausrechnen.
 */
.spalte-griff { width: 2.2rem; }

.ziehgriff {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.6rem;
  color: var(--text-3); font-size: 15px; line-height: 1;
  cursor: grab;                      /* Bedienbarkeit, Regel 1 */
  border-radius: var(--radius-klein, 4px);
  user-select: none;
}
.ziehgriff:hover { background: var(--flaeche-3); color: var(--text); }
.ziehgriff:active { cursor: grabbing; }

/* Die gezogene Zeile bleibt sichtbar, aber zurueckgenommen — man soll waehrend
   des Zugs erkennen, WAS man schiebt und WOHIN es faellt. */
tr.zieht { opacity: .45; }
tr.zieht td { background: var(--marke-hell); }

/* Waehrend eines Zugs kein Textmarkieren: Sonst faerbt sich beim Schieben die
   halbe Tabelle blau. */
tbody:has(tr.zieht) { user-select: none; }

/* ─────────────────────────────────────────── Statusleiste: was gerade laeuft ─
 *
 * Michael, 30.07.2026: „ein generelles Status-Feld ... wo immer angezeigt
 * wird, wenn das System etwas tut - egal ob es konvertiert, KI-generiert,
 * exportiert oder laedt."
 *
 * UNTEN, nicht oben: Oben springt der Inhalt, und eine Zeile, die den Kopf
 * verschiebt, wird beim dritten Mal als Stoerung empfunden.
 *
 * Sie ueberlagert, statt Platz zu nehmen — ein Arbeitsbereich, der bei jedem
 * Vorgang um 32 Pixel schrumpft, laesst die Zeichenflaeche huepfen.
 */
.arbeitsleiste {
  position: fixed; left: var(--leiste-breit); right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  background: var(--text); color: #fff;
  font-size: 12px;
  box-shadow: 0 -2px 12px rgba(27,42,53,.18);
  animation: arbeitsleiste-auf 160ms ease-out;
}
@keyframes arbeitsleiste-auf {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Der Zustand des offenen Moduls — links, dauerhaft, gedämpft (0.55.0).
   Gedämpft, weil er immer dasteht: In derselben Helligkeit wie eine laufende
   Meldung würde er mit ihr um Aufmerksamkeit streiten, und die laufende ist
   die dringendere. */
.modulstatus {
  color: rgba(255, 255, 255, .74);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
/* Die Zahlen daneben in voller Helligkeit: Sie sind kurz, und sie sind das,
   worauf man schaut, bevor man etwas übernimmt. */
.modulzahl {
  color: #fff; flex: none; font-variant-numeric: tabular-nums;
}
.modulzahl:not(:empty) { margin-left: 4px; }
/* Schiebt den laufenden Vorgang nach rechts, damit der Zustand links stehen
   bleibt und nicht bei jedem Aufruf verrutscht. */
.arbeitsfueller { flex: 1; min-width: 12px; }

.arbeitskreisel {
  width: 13px; height: 13px; flex: none;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: arbeitskreisel-dreht 800ms linear infinite;
}
@keyframes arbeitskreisel-dreht { to { transform: rotate(360deg); } }

.arbeitstext { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die verstrichene Zeit. Sie erscheint erst ab drei Sekunden — vorher ist sie
   Unruhe, danach die Auskunft, auf die es ankommt: laeuft es noch, oder
   haengt es? */
.arbeitsdauer {
  flex: none; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.72); font-size: 11px;
}

/* Wer die Bewegung abgeschaltet hat, bekommt keine — die Leiste bleibt
   trotzdem sichtbar und lesbar. */
@media (prefers-reduced-motion: reduce) {
  .arbeitsleiste { animation: none; }
  .arbeitskreisel { animation-duration: 3s; }
}

/* Die Meldungsblase weicht der Statusleiste aus, statt sie zu verdecken.
   Beide sitzen unten rechts — ohne das lagen sie uebereinander. */
.hinweis.ueber-arbeit { bottom: 52px; }

/* Erklaerender Text im Inhalt. NICHT `.hinweis` — die Klasse gehoert der
   Meldungsblase, die fixiert unten rechts einschwebt. Am 30.07.2026 ist das
   zweimal passiert: erst in den Stammdaten, dann im KI-Reiter. Zwei
   Erklaerungen standen als schwarze Kaesten uebereinander in der Ecke. */
.verwaltung .erklaerung {
  font-size: 12px; color: var(--text-3); margin: 0 0 10px; max-width: 46rem;
}


/* ─────────────────────────────────────────────────────────────── Systeme ──
 *
 * Michael, 30.07.2026: „Bei den Systemen kann ich die Domaene und eine Farbe
 * definieren." Die Farbe steht ganz vorn: Sie faerbt das System im
 * Prozess-Editor ein, sie ist also Inhalt und nicht Zierde — und beim
 * Ueberfliegen der Liste sucht man nach ihr, nicht nach dem Namen.
 */
.systeme-anlegen { grid-template-columns: minmax(14rem, 1fr) 10rem 7rem; }
@media (max-width: 720px) { .systeme-anlegen { grid-template-columns: 1fr; } }

.spalte-farbe { width: 4.2rem; }

/* Der Farbwaehler des Browsers ist per Vorgabe ein klobiger Knopf mit dickem
   Rahmen. Hier soll er wie ein Farbfleck aussehen, den man anklicken kann. */
.farbwaehler {
  width: 2.2rem; height: 1.7rem; padding: 0;
  border: 1px solid var(--linie-2); border-radius: var(--radius-klein, 4px);
  background: none; cursor: pointer;
}
.farbwaehler:disabled { cursor: default; opacity: .6; }
.farbwaehler::-webkit-color-swatch-wrapper { padding: 2px; }
.farbwaehler::-webkit-color-swatch { border: none; border-radius: 2px; }
.farbwaehler::-moz-color-swatch { border: none; border-radius: 2px; }

/* Mehrere Domaenen je System. Als Marken mit Kreuz, nicht als
   Mehrfachauswahl: In einer Mehrfachauswahl sieht man nicht auf einen Blick,
   was gewaehlt IST. */
.domaenen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.domaenenmarke {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 3px 1px 7px; border-radius: 10px;
  background: var(--flaeche-3); color: var(--text-2);
  font-size: 11.5px; white-space: nowrap;
}
.domaenenmarke button {
  border: none; background: none; cursor: pointer; padding: 0 3px;
  color: var(--text-3); font-size: 13px; line-height: 1; border-radius: 8px;
}
.domaenenmarke button:hover { background: var(--fehler); color: var(--weiss); }

.domaenenwahl {
  font: inherit; font-size: 11.5px; padding: 2px 4px;
  border: 1px dashed var(--linie-2); border-radius: 10px;
  background: none; color: var(--text-3); cursor: pointer;
}
.domaenenwahl:hover { border-style: solid; color: var(--text); }

/* Ein leeres Feld soll als leer zu erkennen sein, nicht als vergessen. */
.leerwert { color: var(--text-3); }

/* Farbe eines Wertelisteneintrags. Der Waehler zeigt immer irgendeinen Wert —
   „keine Farbe" kann er nicht darstellen. Deshalb gestrichelt, solange keine
   gesetzt ist, und daneben ein Kreuz zum Entfernen. */
.farbfeld { display: flex; align-items: center; gap: 3px; }
.farbwaehler.ohne { border-style: dashed; opacity: .55; }
/* Der Farbfleck als Knopf (15.09.2026) — sieht aus wie vorher, oeffnet aber
   den eigenen, verschiebbaren Waehler statt des Browser-Panels. */
.farbknopf { box-shadow: inset 0 0 0 2px var(--weiss, #fff); }
.farbknopf.ohne { background: repeating-linear-gradient(45deg, #eef2f5 0 4px, #fff 4px 8px) !important; }

.farbe-weg {
  border: none; background: none; cursor: pointer; padding: 0 3px;
  color: var(--text-3); font-size: 14px; line-height: 1; border-radius: 3px;
}
.farbe-weg:hover { background: var(--fehler); color: var(--weiss); }
.farbe-weg[hidden] { display: none; }

/* Sagt, dass dieses Fenster aelter ist als das, was auf dem Server laeuft.
   Michael am 31.07.2026: „Die Version die Du anzeigst und die Version die ich
   auf dem Bildschirm habe, unterscheiden sich immer."

   Auffaellig, aber nicht sperrend: Automatisch neu zu laden riesse jemandem
   mitten im Zeichnen den Boden weg. */
.neuefassung {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 12px; margin-right: 12px;
  border: 1px solid var(--marke); border-radius: 14px;
  background: var(--marke-hell); color: var(--marke-dunkel);
  cursor: pointer; white-space: nowrap;
}
.neuefassung:hover { background: var(--marke); color: var(--weiss); }
.neuefassung[hidden] { display: none; }

/* Auswahlliste direkt in der Tabellenzelle — dieselbe Zurueckhaltung wie
   `.zellfeld`: sichtbar wird der Rahmen erst beim Anfassen. */
.zellwahl {
  font: inherit; font-size: 12.5px; padding: 3px 6px; width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-klein, 4px);
  background: transparent; color: var(--text);
}
.zellwahl:hover:not(:disabled) { border-color: var(--linie); background: var(--weiss); }
.zellwahl:focus { outline: none; border-color: var(--marke); background: var(--weiss); }
.zellwahl:disabled { color: var(--text-3); }
.zellwahl.gerahmt { border-color: var(--linie-2); background: var(--weiss); }

.regeln-anlegen { grid-template-columns: minmax(14rem, 1fr) 10rem 10rem 7rem; }
@media (max-width: 900px) { .regeln-anlegen { grid-template-columns: 1fr; } }

/* Verwendung eines Stammdatenwerts. Drei Zustaende, drei Aussagen:
   benutzt (Zahl), ungenutzt (loeschbar), unklar (ein Modul war stumm).
   „Unklar" bewusst NICHT als 0 — „nirgends benutzt" ist eine Erlaubnis zum
   Loeschen, „weiss ich nicht" ist keine. */
.spalte-verwendung { width: 7rem; white-space: nowrap; }

.verwendung {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; cursor: help;
}
.verwendung.benutzt { background: var(--marke-hell); color: var(--marke-dunkel); }
.verwendung.frei { background: var(--flaeche-3); color: var(--text-3); font-weight: 400; }
.verwendung.unklar {
  background: none; color: var(--text-3); font-weight: 400;
  border: 1px dashed var(--linie-2);
}

/* Mandantenzuordnung eines SDZeCOM-Nutzers. Haken statt Mehrfachauswahl:
   Eine `<select multiple>` mit Strg ist in einer Tabellenzeile kaum zu
   treffen — und man sieht darin nicht, was gewaehlt IST. */
.mandantenhaken { display: flex; flex-direction: column; gap: 2px; }
.mandantenhaken-zeile {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.mandantenhaken-zeile input { margin: 0; }
.mandantenhaken-zeile:hover { color: var(--text); }

/* ------------------------------------------------------- Modales Fenster
 *
 * Michael am 31.07.2026 zur Nutzerpflege: „Warum nicht draufklicken und dann
 * geht ein neues modales Fenster auf?" Acht Mandantenhaken in einer
 * Tabellenzeile machen aus der Liste eine Wand.
 */
.dialog {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dialog-kasten {
  width: 460px; max-width: 100%; max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--weiss); border-radius: var(--radius-gross, 8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 20px 22px;
}
.dialog-kasten > h3 { margin: 0 0 4px; font-size: 16px; }

.dialog-feld { display: block; margin: 14px 0 0; }
.dialog-feld .feldname {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.dialog-feld input[type="text"], .dialog-feld input[type="email"],
.dialog-feld select {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--linie-2); border-radius: var(--radius-klein, 4px);
  background: var(--weiss); color: var(--text);
}

/* Die Mandantenliste bekommt eine feste Hoehe mit Bildlauf: Bei zwanzig
   Mandanten waere der Speichern-Knopf sonst ausserhalb des Fensters. */
.dialog-mandanten {
  max-height: 11rem; overflow-y: auto;
  border: 1px solid var(--linie); border-radius: var(--radius-klein, 4px);
  padding: 6px 8px;
}

.dialog-fuss {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--linie);
}

/* Eine anklickbare Tabellenzeile muss sich als solche anfuehlen. */
tr.anklickbar { cursor: pointer; }
tr.anklickbar:hover > td { background: var(--flaeche-2); }

/* Das Einmal-Kennwort im eigenen Fenster: gross, in Festbreitenschrift und
   auswaehlbar. Abschreiben von „x7Kq-2mVt-9Rd" geht schief. */
.einmal-wert {
  display: block; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: .06em;
  color: var(--text); word-break: break-all; user-select: all; margin: 0;
}

/* ------------------------------------------------ Rollen & Rechte (0.35.0)
 *
 * Zwei Spalten: links die Rollen, rechts ihre Rechte. Untereinander wäre die
 * Verbindung „diese Rolle — diese Haken" nur noch erinnerbar, nicht sichtbar.
 * Unter 900 px fällt der Satz auf eine Spalte zurück; die Reihenfolge stimmt
 * dann von selbst, weil die Liste zuerst im Quelltext steht. */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.4fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: 1fr; }
}

table.liste tr.an td { background: var(--akzent-hell, #eef4fb); }
table.liste tbody tr { cursor: pointer; }
table.liste td small.feldhinweis { display: block; color: var(--text-3); }

.knopfreihe {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
}

.hinweiskarte {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--warnung, #d8a13a);
  background: #fdf7ea;
  color: var(--text-2);
  font-size: 13.5px;
}

.rechtegruppe {
  margin: 0 18px 14px;
  padding: 8px 12px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--r, 6px);
}

.rechtegruppe legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
}

/* Der Rechteschlüssel steht klein hinter der Bezeichnung. Er ist das, was in
   Protokollen und Fehlermeldungen auftaucht — ohne ihn ist eine Meldung
   „Recht core.users.write fehlt" in dieser Maske nicht wiederzufinden. */
.hakenzeile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13.5px;
}

.hakenzeile small.feldhinweis { color: var(--text-3); font-size: 11.5px; }

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

/* ══════════════════════════ Stammdatentabellen lesbarer (0.38.3)
 *
 * Michael am 31.07.2026 mit Bildschirmfoto: *„Bitte diese Liste schöner
 * gestalten, vor allem der Name braucht mehr Platz."*
 *
 * Die Tabelle verteilte die Breite gleichmäßig auf acht Spalten. Ergebnis:
 * „Länge < 40" abgeschnitten, „Compliance" unter dem Pfeil des Auswahlfelds
 * verschwunden — und daneben zwei Knöpfe, die so breit waren wie das
 * Namensfeld. Ein Knopf ist keine Spalte.
 *
 * `table-layout: fixed` und feste Breiten für alles, was eine bekannte Länge
 * hat; was übrig bleibt, geht an Name und Beschreibung. */
table.liste { table-layout: fixed; }

table.liste th, table.liste td { overflow: hidden; text-overflow: ellipsis; }

/* Die Eingabefelder füllen ihre Zelle — sonst stehen sie in einer breiten
   Spalte schmal in der Mitte und sehen aus wie abgeschnittener Text. */
table.liste td input[type="text"],
table.liste td input[type="number"],
table.liste td select,
table.liste td textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Die Wertelistentabelle: Spaltenbreiten (20.08.2026) ────────────────────
 *
 * **Michael, mit Bildschirmfoto von „Icons & Arten":** *„Diese Tabelle mit den
 * Icons eines Systems ist von der Spaltenbreite nicht optimal."*
 *
 * Auf dem Bild standen die Kopfzeilen als **„FA…", „ZEIC…", „BI…"** da, „Wert"
 * war einen halben Meter breit, und der Knopf „Entfernen" klebte am rechten
 * Bildschirmrand. Drei Ursachen, die zusammenkamen:
 *
 * 1. `table.liste th` hat **18 px Innenabstand links und rechts** — bei einer
 *    4,2 rem breiten Spalte bleiben davon 1,9 rem für den Text. „FARBE" in
 *    Großbuchstaben mit Sperrung braucht mehr, also wurde es abgeschnitten.
 * 2. „Zustand" und die Knopfspalte hatten **keine Klasse**. Bei
 *    `table-layout: fixed` teilen sich alle Spalten ohne Breite den Rest —
 *    „Wert", „Zustand" und die Knöpfe bekamen also je ein Drittel des freien
 *    Platzes, auf einem breiten Schirm je 700 Pixel.
 * 3. Die Tabelle nahm die **volle Fensterbreite**. Bei 2400 Pixeln ist das
 *    keine Tabelle mehr, sondern eine Zeile mit Löchern.
 *
 * Behoben an allen drei Stellen: engerer Innenabstand für die schmalen
 * Spalten, Klassen an den beiden letzten (in `stammdaten.js`), und eine
 * Höchstbreite für die Tabelle. Die Höchstbreite gilt NUR dieser Tabelle
 * (`liste-werte`) — andere Listen haben andere Spalten und andere Gründe.
 */
table.liste.liste-werte { max-width: 64rem; }

/* Die schmalen Spalten brauchen ihren Kopftext ganz. Innenabstand auf 9 px,
   damit die Breite dem Inhalt gehört und nicht dem Rand — 18 px sind für eine
   Spalte richtig, in der ein Satz steht, und für eine mit einem Farbwähler
   darin verschwendet. */
table.liste.liste-werte th.spalte-farbe,
table.liste.liste-werte td.spalte-farbe,
table.liste.liste-werte th.spalte-zeichen,
table.liste.liste-werte td.spalte-zeichen,
table.liste.liste-werte th.spalte-bild,
table.liste.liste-werte td.spalte-bild,
table.liste.liste-werte th.spalte-griff,
table.liste.liste-werte td.spalte-griff { padding-left: 9px; padding-right: 9px; }

table.liste.liste-werte .spalte-farbe   { width: 5.4rem; }
table.liste.liste-werte .spalte-zeichen { width: 5.6rem; }
table.liste.liste-werte .spalte-bild    { width: 4.4rem; }
/* Kein `overflow: hidden` auf diesen drei: Die Marke des Bildes und das
   Ruecknahmezeichen der Farbe ragen absichtlich ueber die Zelle hinaus
   (`.bild-weg` sitzt auf `top: -6px; right: -6px`). Mit dem geerbten
   `overflow: hidden` waeren sie halb abgeschnitten. */
table.liste.liste-werte th.spalte-farbe,
table.liste.liste-werte td.spalte-farbe,
table.liste.liste-werte th.spalte-bild,
table.liste.liste-werte td.spalte-bild { overflow: visible; }

.spalte-kategorie  { width: 11rem; }
.spalte-schwere    { width: 9rem; }
.spalte-zustand    { width: 7.5rem; }
/* Kein „…" hinter „stilllegen" und kein Punkt neben dem Griff (24.09.2026,
   Michael: „warum machst Du ... nach stilllegen?"). Das geerbte
   `text-overflow: ellipsis` aus `table.liste td` malte ihn, sobald der Knopf
   ein paar Pixel breiter war als die Spalte. Knoepfe und Griffe werden nicht
   gekuerzt — sie duerfen ueberstehen. */
table.liste td.spalte-zustand, table.liste td.spalte-griff,
table.liste td.spalte-knoepfe { overflow: visible; text-overflow: clip; }
.spalte-knoepfe    { width: 7.5rem; }

/* Knöpfe in einer Liste sind Beiwerk, nicht Inhalt: klein, rechtsbündig und
   nur so breit wie ihr Text. */
table.liste td .knopf { width: auto; padding: 4px 9px; font-size: 12px; }
table.liste td.spalte-knoepfe { text-align: right; white-space: nowrap; }
.spalte-farbe .farbwaehler { width: 2.4rem; height: 1.6rem; padding: 1px; }

/* Ein Wert in der Zeile, der zum Fenster führt: liest sich wie Text, verhält
   sich wie ein Knopf. Eine Beschreibung ist ein Satz und kein Tabellenwert —
   in der Zeile steht sie zum Lesen, geändert wird sie im Fenster. */
.zellknopf {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zellknopf:hover { border-color: var(--linie); background: var(--flaeche-2, #f1f4f6); }
.zellknopf.leer { color: var(--text-3); font-style: italic; }
.fensterinhalt textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 7px 9px;
  border: 1px solid var(--linie); border-radius: var(--r, 6px); resize: vertical; }

/* ══════════════════════════════════ Übersicht (05.08.2026) ═══════════════════
 *
 * **Michael:** *„Ich möchte im Dashboard die Ergebnisse aller
 * Qualitätsprüfungen aller Module nebeneinander — also pro Modul ein Rahmen."*
 *
 * `auto-fill` mit einer Mindestbreite und nicht eine feste Spaltenzahl: Bei fünf
 * Modulen auf einem Laptop stehen zwei Rahmen nebeneinander, auf Michaels
 * breitem Schirm vier. Eine festgelegte Zahl wäre auf einem der beiden falsch,
 * und die Spalte, die nicht passt, quetscht die Sätze in Silben. */
.ub-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ub-kopf h1 { margin: 0; }
.ub-unter { margin: 0; flex: 1 1 320px; color: var(--text-2); font-size: 13px; }
.ub-neu {
  flex: none; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--linie-2, #C4D0DC); border-radius: var(--r, 6px);
  background: var(--weiss, #fff); color: var(--text-2);
}
.ub-neu:hover:enabled { border-color: var(--marke); color: var(--marke); }
.ub-neu:disabled { opacity: .6; cursor: default; }

.ub-summe { display: flex; gap: 26px; margin: 18px 0 6px; }
.ub-zahl { display: flex; flex-direction: column; line-height: 1.15; }
.ub-zahl strong { font-size: 26px; font-weight: 700; }
.ub-zahl span { font-size: 12px; color: var(--text-3); }

.ub-schalter {
  display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 16px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}

.ub-gitter {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
}
.ub-modul {
  border: 1px solid var(--linie-2, #C4D0DC); border-radius: var(--r, 6px);
  background: var(--weiss, #fff); overflow: hidden;
}
.ub-modul-kopf {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 12px;
  background: var(--flaeche-3, #EBF0F5);
  border-bottom: 1px solid var(--linie-2, #C4D0DC); font-size: 13.5px;
}
.ub-version { margin-left: auto; font-size: 11px; color: var(--text-3); }
.ub-stand { padding: 7px 12px 0; font-size: 11.5px; color: var(--text-3); }

.ub-liste { padding: 6px 12px 12px; }
.ub-befund {
  display: flex; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--linie-zart, #EEF2F4);
}
.ub-befund:first-child { border-top: none; }
/* Der Punkt sitzt auf der Grundlinie der ersten Zeile und nicht mittig: Bei
   einem zweizeiligen Satz rutschte er sonst neben den Text. */
.ub-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; }
.ub-titel { font-size: 13px; font-weight: 600; }
.ub-satz { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.ub-vermutung {
  display: inline-block; margin-top: 3px; padding: 0 6px;
  font-size: 10.5px; color: var(--text-3);
  border: 1px dashed var(--linie-2, #C4D0DC); border-radius: 9px;
}
.ub-leise { margin: 8px 12px 12px; font-size: 12px; color: var(--text-3); line-height: 1.45; }


/* Die anklickbare Zeile hebt sich beim Ueberfahren (0.62.0). `cursor: pointer`
   stand schon oben — er verspricht, dass hier etwas passiert. Eine Zeile, die
   auf das Ueberfahren nicht reagiert, laesst das Versprechen offen. */
table.liste tbody tr:hover td { background: var(--flaeche-2, #F5F8FA); }
table.liste tbody tr.inaktiv:hover td { background: var(--flaeche-2, #F5F8FA); }

/* Kreuztabelle „Module je Mandant" (0.63.0). Die Kaestchen stehen mittig unter
   ihrer Spalte — linksbuendig waeren sie bei breiten Spaltenkoepfen nicht mehr
   der Spalte zuzuordnen. */
table.matrix th.mitte, table.matrix td.mitte { text-align: center; }
table.matrix th small { display: block; font-weight: 400; }
/* Zwölf Spalten (Core 1.14): Köpfe umbrechen statt abschneiden. */
table.matrix thead th { white-space: normal; padding-left: 6px; padding-right: 6px; }
table.matrix thead th span { white-space: normal; overflow: visible; text-overflow: clip; hyphens: auto; overflow-wrap: break-word; letter-spacing: .2px; }
table.matrix td:first-child small { display: block; }
table.matrix input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; }
table.matrix input[type=checkbox]:disabled { cursor: progress; opacity: .5; }
/* Die ZEILE ist hier nicht anklickbar — nur die Kaestchen sind es. Der Zeiger
   aus `table.liste tbody tr` wuerde sonst etwas versprechen, was es nicht gibt. */
table.matrix tbody tr { cursor: default; }
table.matrix tbody tr:hover td { background: transparent; }


/* ── Knoepfe in der letzten Spalte einer Liste (0.63.1) ────────────────────
 *
 * Michael am 12.08.2026, zur Nutzerliste: „warum ist das so schief?" Zwei
 * Knoepfe je Zeile standen treppenartig versetzt.
 *
 * Ursache: Der zweite Knopf trug `margin-left: 8px`. Passen beide nicht
 * nebeneinander, bricht der zweite um — und nimmt den Abstand mit. Daraus wird
 * eine Treppe, die bei jeder Fensterbreite anders aussieht.
 *
 * `gap` kann das nicht: Er wirkt nur ZWISCHEN Nachbarn in derselben Zeile, nie
 * am Anfang einer neuen. Die Knoepfe stehen jetzt rechts ausgerichtet, und beim
 * Umbruch stehen sie untereinander an derselben Kante.
 *
 * `:last-child` und nicht eine eigene Klasse: Die Aktionsspalte ist in ALLEN
 * Listen dieser Oberflaeche die letzte, und eine Klasse muesste an fuenf
 * Stellen nachgezogen werden — an vier waere sie es irgendwann nicht.
 */
table.liste td:last-child {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end; align-items: center;
}
/* Die Matrix hat keine Aktionsspalte — dort ist die letzte Spalte ein
   Kaestchen, und das bleibt mittig. */
table.matrix td:last-child { display: table-cell; }

/* ═══════════ Die Systemtabelle: feste Spaltenbreiten (20.08.2026, abends)
 *
 * Michael, mit Bildschirmfoto: „diese Tabelle ist nicht optimal". In der Spalte
 * Beschreibung stand jedes Wort in einer eigenen Zeile („Was / macht / das /
 * System / fachlich?"), die Kopfzeilen waren abgeschnitten („ART (RAHM…",
 * „BESCHREIB…", „VERWENDU…").
 *
 * `.spalte-beschreibung { min-width: 16rem }` stand laengst da und hat nichts
 * geholfen: **`min-width` an einer Zelle greift NICHT, wenn der Browser die
 * Tabelle quetscht.** Bei zehn Spalten verteilt `table-layout: auto` nach
 * Inhalt, und ein Platzhaltertext verliert dabei immer.
 *
 * Nur `.liste-systeme` -- zwei andere Tabellen teilen `.liste-werte` und haben
 * andere Spalten. Ihnen feste Breiten zu verpassen waere eine Aenderung an
 * Tabellen, die niemand bemaengelt hat. */
/* ── Die Breiten stehen in PROZENT, und das ist der ganze Punkt ────────────
 *
 * Mein erster Versuch gab sie in `rem`. Zusammen 64rem -- **breiter als die
 * Tabelle.** In `table-layout: fixed` gewinnt dann die Tabellenbreite: Der
 * Browser skaliert alle Spalten herunter, und die einzige mit `width: auto`
 * bekommt, was uebrig bleibt, also NULL.
 *
 * Michael, mit Bildschirmfoto: *„Deine System-Tabelle hat jetzt sehr viel
 * Luft"*. Zeilen von vierhundert Pixeln Hoehe. Denn in der nullbreiten Spalte
 * stand das `textarea` der Beschreibung, und **das waechst mit seinem Inhalt**
 * (`passeHoeheAn`) -- bei null Breite steht jedes Zeichen in einer eigenen
 * Zeile. Derselbe Mechanismus in der Kopfzeile: „Beschreibung" senkrecht
 * buchstabiert, daher der hohe grauer Balken.
 *
 * Prozente koennen das nicht. Sie summieren sich auf 100 und passen deshalb in
 * JEDE Containerbreite -- und sie haengen nicht an der Grundschriftgroesse,
 * die ich mit 16px nur angenommen hatte. */
/* ── Der Deckel, der die halbe Seite leer liess ────────────────────────────
 *
 * **Michael:** *„Aber bitte nutze die vorhande Breite doch aus - Beschreibung
 * ist doch auch viel zu schmal"*.
 *
 * Die Ursache war nicht meine Verteilung, sondern eine Zeile weiter unten:
 * `table.liste.liste-werte { max-width: 64rem; }`. Fuer eine Werteliste mit
 * vier Spalten ist der Deckel richtig -- eine Tabelle, die sich ueber zwei
 * Meter Bildschirm zieht, um „Aktiv" anzuzeigen, liest niemand.
 *
 * **Die Systemtabelle hat zehn Spalten.** Sie hat den Deckel nur geerbt, weil
 * sie `liste-werte` mittraegt. Deshalb blieben rechts sechshundert Pixel leer,
 * waehrend links jedes Wort umbrach -- und deshalb war meine Verteilung in
 * Prozent zwar richtig gerechnet, aber von einem zu kleinen Ganzen.
 *
 * `.verwaltung` erlaubt 2200px. Die nimmt sie sich jetzt. */
/* ── Warum hier ein `table` vor der Klasse steht (03.09.2026) ─────────────
 *
 * **Michael:** *„Weiterhin bitte die Spaltenbreite im System-Menue besser an
 * den Inhalt anpassen."* Die Regeln darunter standen seit dem 20.08.2026 da
 * und haben NICHTS getan. Gemessen, warum:
 *
 *     table.liste.liste-werte   { max-width: 64rem; }   Tag + 2 Klassen
 *     .liste.liste-systeme      { max-width: none;  }   nur 2 Klassen
 *
 * Die allgemeinere Regel ist die SPEZIFISCHERE und gewinnt. Die Tabelle war
 * also auf 64rem gedeckelt, obwohl daneben Platz lag. Dasselbe bei
 * `spalte-farbe` (5.4rem), `spalte-verwendung` (7rem) und `spalte-zustand`
 * (6.5rem): feste rem-Werte aus `liste-werte` schlugen die Prozente hier.
 * Feste Werte plus Prozente ergaben mehr als die Tabelle breit ist, und der
 * Browser hat alles zusammengequetscht — am staerksten die Beschreibung, die
 * als einzige `auto` hat und deshalb den Rest bekommt: fast nichts.
 *
 * Deshalb tragen ALLE Regeln dieses Blocks jetzt `table` vor der Klasse. Das
 * ist keine Schoenheit, es ist die Bedingung dafuer, dass sie gelten. */
table.liste.liste-systeme { table-layout: fixed; width: 100%; max-width: none; }
/* Seit Core 1.27 baut `Tabelle.bauen` diese Tabelle: Die Prozentbreiten unten
   bleiben als Vorgabe, eine gezogene Breite (Inline-Stil am Kopf) geht vor. */
.liste-werkzeuge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 8px; }
.liste-werkzeuge .liste-filter { flex: 1 1 18rem; max-width: 32rem; font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--linie, #DDE4EC); border-radius: 6px; }
.liste-werkzeuge .liste-filter:focus { outline: 2px solid var(--marke, #009DC4); outline-offset: -1px; }
.liste-werkzeuge .liste-zahl { color: var(--text-2, #4A5E72); white-space: nowrap; }
.liste-werkzeuge .ui-tabelle-spaltenwahl { margin-left: auto; }
table.liste.liste-systeme.ui-tabelle th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.liste.liste-systeme .zellfeld-name { resize: none; overflow: hidden; line-height: 1.35; font-weight: 500; }
/* ── Wer wie viel bekommt, und warum (20.08.2026, zweiter Durchgang) ───────
 *
 * **Michael, mit Bildschirmfoto:** *„Du hast doch Platz - auch fuer Art
 * (Rahmen) und ‚Verwendung'"*. Auf dem Bild stand „ART (RAHMEN )" ueber drei
 * Zeilen, „VERW ENDU NG" ueber drei, und die Werte waren abgeschnitten
 * („Software" ohne das e, „Ausgab").
 *
 * Er hat recht, und der Platz lag genau daneben: **Domaenen (13%) war in jeder
 * Zeile leer** -- fuer diesen Mandanten ist keine Domaene gepflegt. Eine Spalte
 * bekommt Breite nach dem, was drinsteht, nicht nach der Laenge ihres Namens.
 *
 * Also: Art 9 → 12, Verwendung 7 → 10, Domaenen 13 → 9. Art braucht mehr als
 * Icon, obwohl beide Waehler sind: „Ausgabekanal" ist ein langes Wort, und die
 * Werte der Art sind Gattungsnamen. Deshalb hat sie jetzt eine eigene Klasse
 * und teilt nicht mehr `spalte-icon`. */
/* Der Haushalt geht auf 100 % auf — vorher waren es 81 % Prozentspalten PLUS
   drei feste rem-Spalten aus `liste-werte`, zusammen mehr als die Tabelle
   breit ist.

   Der Name bekommt 16 statt 14: „SAP Business Workplace" ist der laengste
   Systemname im Bestand und stand als „SAP Business W" da. Ein Name, den man
   nicht ganz lesen kann, ist als Bezeichner wertlos.

   Die Beschreibung behaelt `auto` und bekommt damit 24,5 % — sie ist die
   einzige Spalte mit einem SATZ darin, und ihr Feld waechst mit dem Text
   (`passeHoeheAn`). Je breiter sie ist, desto weniger Zeilen braucht sie. */
table.liste.liste-systeme .spalte-griff        { width: 2.5%; }
table.liste.liste-systeme .spalte-farbe        { width: 4.5%; }
table.liste.liste-systeme .spalte-name         { width: 12%; }
/* Slot (18.09.2026): Name des Slots plus Marke „Platzhalter". */
table.liste.liste-systeme .spalte-slot         { width: 9%; }
table.liste.liste-systeme th.sortierkopf       { cursor: pointer; user-select: none; }
table.liste.liste-systeme th.sortierkopf:hover { text-decoration: underline; }
.slot-zelle { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.slot-name  { font-weight: 600; }
.slot-leer  { color: var(--text-3, #9aa5b1); }
/* Icon breiter (17.09.2026): Michael — „die Icon-Spalte ist zu klein und
   nicht immer klickbar". Bild plus Name („Datenblatt", „Website") brauchen
   rund 11 %; die drei Punkte gehen vom Namen ab, der mit 13 % noch
   „SAP Business Workplace" traegt. */
table.liste.liste-systeme .spalte-icon         { width: 10%; }
table.liste.liste-systeme .spalte-art          { width: 9%; }
/* Ohne eigene Angabe: sie bekommt, was uebrig bleibt (21%) -- und das ist der
   Sinn der Spalte. Kein `min-width`: In `table-layout: fixed` wird es an einer
   Zelle ohnehin nicht beachtet, es stand da als Beruhigung und half nichts. */
table.liste.liste-systeme .spalte-beschreibung { width: auto; }
table.liste.liste-systeme .spalte-domaenen     { width: 8%; }
table.liste.liste-systeme .spalte-verwendung   { width: 8.5%; }
/* 11 %: „aktiv (eigener Wert)" ist der laengste Eintrag der Auswahl und stand
   als „aktiv (eigener" da. */
table.liste.liste-systeme .spalte-zustand      { width: 10%; }
table.liste.liste-systeme .spalte-tun          { width: 3.5rem; }
/* Die Felder in der Icon- und Art-Spalte duerfen nicht breiter sein als
   ihre Zelle — `.artfeld { min-width: 9rem }` galt fuer die Wertelisten und
   schob hier den Inhalt ueber den Zellrand („Webs", „Dater"), unklickbar. */
table.liste.liste-systeme .artfeld { min-width: 0; width: 100%; }
table.liste.liste-systeme .bildwahl-knopf { width: 100%; min-width: 0; }
table.liste.liste-systeme td.spalte-icon,
table.liste.liste-systeme td.spalte-art { overflow: visible; }
/* Sollte die Tabelle trotzdem breiter sein als ihr Blatt, scrollt das Blatt
   waagerecht — ein abgeschnittener Knopf ist keine Bedienung. */
.liste-scroll { overflow-x: auto; }
/* Helle Flaeche, roter Rand (17.09.2026): Auf der gefuellten Gefahrenfarbe
   war das Papierkorb-Zeichen ein dunkler Fleck. Michael: „Farbe der Flaeche
   bitte viel heller". Rot bleibt am Rand und beim Ueberfahren. */
.knopf-papierkorb {
  padding: 2px 7px; font-size: 14px; line-height: 1.3;
  background: var(--weiss, #fff); color: var(--fehler, #E74C3C);
  border: 1px solid var(--fehler, #E74C3C);
}
.knopf-papierkorb:hover { background: #FDECEA; color: #C0392B; }

/* Der Innenabstand von `liste-werte` (9 px fuer die schmalen Waehlerspalten)
   gilt hier nicht: In dieser Tabelle stehen in fast jeder Spalte Woerter. */
table.liste.liste-systeme th.spalte-farbe,
table.liste.liste-systeme td.spalte-farbe { padding-left: 9px; padding-right: 9px; }

/* Die Felder fuellen ihre Zelle. Ein Eingabefeld, das schmaler ist als die
   Spalte, verschenkt genau den Platz, um den es hier geht. */
table.liste.liste-systeme td input[type="text"],
table.liste.liste-systeme td select,
table.liste.liste-systeme td textarea { width: 100%; box-sizing: border-box; }

/* Die Kopfzeilen brechen um, statt abzuschneiden. „Art (Rahmen)" in zwei Zeilen
   ist lesbar, „ART (RAHM…" ist es nicht. */
/* Umbrechen ja, TRENNEN nein: `hyphens: auto` hat aus „Verwendung" ein
   „VER-WEN-DUNG" ueber drei Zeilen gemacht (auf Michaels Bild zu sehen). Ein
   Trennstrich hilft bei Flattersatz in einem Absatz, nicht bei einem Wort in
   einer Tabellenspalte -- dort macht er die Zeile nur hoch. */
table.liste.liste-systeme thead th {
  white-space: normal; overflow-wrap: break-word; hyphens: manual;
  vertical-align: bottom;
}

/* Drei Koepfe, die NICHT umbrechen duerfen: Sie sind ein Wort, und ein Wort
   in zwei Zeilen („DOMAENE N", „VERWENDU NG" auf Michaels Bild) liest sich
   schlechter als ein etwas engerer Kopf. Die Spalten sind jetzt breit genug
   dafuer — vorher waren sie es nicht, und DESHALB brach es um. */
table.liste.liste-systeme thead th.spalte-domaenen,
table.liste.liste-systeme thead th.spalte-verwendung,
table.liste.liste-systeme thead th.spalte-zustand { white-space: nowrap; }

/* Zellen oben ausgerichtet: Die Beschreibung ist mehrzeilig, und ein einzeiliges
   Feld daneben soll auf ihrer ERSTEN Zeile stehen, nicht in ihrer Mitte. Der
   Knopf zum Entfernen dagegen mittig -- er gehoert zur ganzen Zeile, nicht zu
   ihrer ersten Zeile. */
table.liste.liste-systeme tbody td { vertical-align: top; }
table.liste.liste-systeme tbody td.spalte-tun {
  vertical-align: middle; text-align: right;
}

/* ── Werkzeuge ueber einer Liste (20.08.2026) ──────────────────────────────
 *
 * **Michael:** *„warum kein Neu-Button und dann erscheint ein modales Fenster"*.
 * Hier stand ein dauerhaftes Anlegeformular, das ein Drittel der Hoehe nahm und
 * in 99 von 100 Aufrufen im Weg war. Was bleibt, ist eine Zeile mit Knoepfen. */
.liste-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

/* Das Logo ist seit dem 20.08.2026 ein Knopf und fuehrt auf die Startseite
   (Michael: „Ein Klick auf das Logo bringt uns zur ‚Data Vision -
   Programmuebersicht'"). Es soll aussehen wie vorher -- ein Knopf bringt aber
   Rahmen, Grund und Systemschrift mit, und die muessen weg. */
button.logo {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer; display: flex; align-items: center;
}
button.logo:hover { opacity: .78; }
button.logo:focus-visible { outline: 2px solid var(--marke, #009DC4); outline-offset: 3px; }


/* ── Kategorien: Name und Beschreibung untereinander (21.08.2026) ────────────
   Der Name traegt die Zeile, die Beschreibung erklaert sie. Nebeneinander
   blieben fuer den laengeren der beiden Texte zwei Zentimeter. */
.kategorie-name input, .kategorie-name span { font-weight: 600; }
.kategorie-name input { width: 100%; }
.kategorie-beschreibung { margin-top: 3px; }
/* Die Kategorientabelle nimmt die Breite, die die Seite hat: `table` vor der
   Klasse, weil `table.liste.liste-werte { max-width: 64rem }` sonst gewinnt
   (siehe Systemtabelle, 03.09.2026). Kategorie breit, Verwenden und Zustand
   schmal, Handlung rechts. */
table.liste.liste-werte.liste-kategorien { max-width: none; }
table.liste.liste-werte.liste-kategorien .spalte-name { width: auto; }
table.liste.liste-werte.liste-kategorien .spalte-verwenden { width: 7rem; text-align: center; }
table.liste.liste-werte.liste-kategorien .spalte-zustand { width: 9rem; }
table.liste.liste-werte.liste-kategorien .spalte-tun { width: 11rem; }
table.liste.liste-werte.liste-kategorien td.spalte-name { white-space: normal; overflow: visible; }
table.liste.liste-werte.liste-kategorien .kategorie-name input,
table.liste.liste-werte.liste-kategorien .kategorie-beschreibung input { width: 100%; max-width: 40rem; box-sizing: border-box; }

/* Attribute je Kategorie (18.09.2026): alle Namen, umgebrochen — Michael:
   „Ich muss schon die Attribute sehen koennen." Der Zaehler ist der Sprung in
   den Reiter Musterattribute. */
.kategorie-attribute {
  margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--text-3, #7A8A99);
  white-space: normal;
}
.kategorie-attribute-sprung { color: var(--marke-dunkel, #007A99); font-weight: 600; text-decoration: none; }
.kategorie-attribute-sprung:hover { text-decoration: underline; }
table.liste-werte tr.vererbt td .kategorie-attribute { color: var(--text-3, #7A8A99); }
.kategorie-beschreibung input, .kategorie-beschreibung span {
  width: 100%;
  font-size: 12px;
  color: var(--text-2, #5b6672);
}

/* ── Stammdaten → Datenmodell (02.09.2026) ──────────────────────────────────
 *
 * Das Bild kommt fertig aus dem Dienst und bringt seine eigenen Maße mit. Diese
 * Regeln machen nur zwei Dinge: Sie geben ihm eine Bühne, auf der es scrollen
 * darf, und stellen die Erklärung daneben.
 *
 * `overflow: auto` auf der Bühne und NICHT auf der Seite: Ein Datenmodell ist
 * dreitausend Pixel breit, und eine Seite, die deswegen waagerecht rollt,
 * verschiebt auch die Reiterleiste aus dem Bild.
 */
.dm-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.dm-schema {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 13px; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--weiss); cursor: pointer;
}
.dm-schema:hover { border-color: var(--linie-2); }
.dm-schema.an { border-color: var(--marke); background: var(--marke-hell); }
.dm-schema-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dm-schema-zahl { font-size: 11px; color: var(--text-3); }

.dm-werkzeug { display: flex; gap: 8px; margin-bottom: 10px; }
.dm-werkzeug button {
  padding: 6px 12px; font-size: 12.5px; border-radius: 5px;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--text-2);
  cursor: pointer;
}
.dm-werkzeug button:hover { border-color: var(--linie-2); }

.dm-rahmen { display: flex; gap: 14px; align-items: flex-start; }
.dm-buehne {
  flex: 1; min-width: 0; overflow: auto; max-height: 74vh;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 6px;
}
/* „Einpassen": Das SVG bringt `width`/`height` mit — beides muss weg, sonst
   gewinnt die Angabe im Bild gegen die Regel hier. */
.dm-buehne.passend svg { width: 100%; height: auto; }
.dm-buehne svg { display: block; }

.dm-tafel {
  flex: 0 0 330px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 14px 16px; max-height: 74vh; overflow: auto;
}
.dm-tafel h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--text); }
.dm-tafel h4 {
  margin: 16px 0 6px; font-size: 11px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-3);
}
.dm-tabellenname {
  display: inline-block; font-size: 11.5px; color: var(--text-3);
  background: var(--flaeche-2); padding: 2px 6px; border-radius: 4px;
}
.dm-text { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.dm-text.dm-fehlt { color: var(--text-3); font-style: italic; }
.dm-leer { font-size: 12.5px; line-height: 1.55; color: var(--text-3); margin: 0; }
.dm-marke {
  margin: 10px 0 0; font-size: 11.5px; color: var(--marke-dunkel);
  background: var(--marke-hell); padding: 5px 8px; border-radius: 4px;
}
.dm-verweise { list-style: none; margin: 0; padding: 0; }
.dm-verweise li { display: flex; flex-direction: column; margin-bottom: 7px; }
.dm-sprung {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font-size: 12.5px; color: var(--marke-dunkel); text-decoration: underline;
}
.dm-regel { font-size: 11px; color: var(--text-3); }
.dm-spalten { width: 100%; border-collapse: collapse; }
.dm-spalten td {
  padding: 3px 4px; font-size: 11.5px; border-bottom: 1px solid var(--flaeche-3);
  vertical-align: top;
}
.dm-spalte { color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }
.dm-typ { color: var(--text-3); }
.dm-pflicht { color: var(--text-3); text-align: right; white-space: nowrap; }

/* ── Die Landkarte im Dashboard (02.09.2026) ─────────────────────────────────
 *
 * Michael: „Ich will das im Dashboard als eigenen Punkt haben — zoombar —
 * ähnlich wie das Datenmodell … und Filter in Form von Buttons oberhalb der
 * Grafik."
 *
 * Das Bild bringt seine Maße und sein Stilblatt selbst mit (es soll auch als
 * Datei allein wirken). Hier steht nur, wo es liegt und wie die Knöpfe
 * darüber aussehen.
 */
.lk-abschnitt { margin: 26px 0 8px; }
.lk-abschnitt h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text);
}
.lk-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 10px; }
.lk-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--weiss); color: var(--text-3);
}
.lk-knopf:hover { border-color: var(--linie-2); }
/* Aus heißt blass und durchgestrichen — nicht verschwunden: Ein Filterknopf,
   der sich versteckt, sobald man ihn benutzt, ist nicht wiederzufinden. */
.lk-knopf .lk-wort { text-decoration: line-through; }
.lk-knopf.an .lk-wort { text-decoration: none; }
.lk-knopf.an { color: var(--text); border-color: var(--linie-2); }
.lk-knopf .lk-punkt {
  width: 9px; height: 9px; border-radius: 3px; background: var(--ruhend);
}
.lk-knopf .lk-zahl { font-size: 11px; color: var(--text-3); }
/* Dieselben Töne wie im Bild — zwei Vorstellungen davon, welche Farbe ein
   Painpoint hat, wären zwei Anwendungen. */
.lk-knopf.an.lk-prozess   .lk-punkt { background: #009DC4; }
.lk-knopf.an.lk-usecase   .lk-punkt { background: #3FA796; }
.lk-knopf.an.lk-painpoint .lk-punkt { background: #C0563F; }
.lk-knopf.an.lk-massnahme .lk-punkt { background: #3C9A6B; }
.lk-knopf.an.lk-kennzahl  .lk-punkt { background: #C08B3E; }
.lk-knopf.an.lk-workflow  .lk-punkt { background: #5A6B7B; }
.lk-knopf.lk-alle .lk-punkt { display: none; }
.lk-knopf.lk-alle .lk-wort { text-decoration: none; }

.lk-buehne {
  overflow: auto; max-height: 72vh; padding: 6px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); color: var(--text-3); font-size: 12.5px;
}
/* „Einpassen": Das SVG bringt `width`/`height` mit — beides muss weg, sonst
   gewinnt die Angabe im Bild gegen die Regel hier. */
.lk-buehne.passend svg { width: 100%; height: auto; }
.lk-buehne svg { display: block; }

/* ── Der Mandantenwaehler in der Bibliothek (03.09.2026) ────────────────
 *
 * Ausgegraut statt versteckt. Michael: "Ja, Ausgrauung wenn
 * Bibliotheks-Seiten aufgerufen sind." Ein Waehler, der verschwindet, sieht
 * aus wie ein Fehler -- einer, der blass dasteht, sagt "gilt hier nicht".
 * Derselbe Griff wie bei `.leiste button.nur-mandant`.
 *
 * `pointer-events` statt `disabled`: Das Attribut gehoert `zeichneKopf`,
 * das es aus einem anderen Grund setzt. */
#mandantenwahl.ist-untaetig {
  opacity: .32;
  pointer-events: none;
}

/* ── KI-Anweisungen in der Verwaltung (03.09.2026) ──────────────────────────
 *
 * Eine Liste aufklappbarer Blöcke. Die Marke rechts sagt, ob man die Vorgabe
 * des Moduls liest oder die eigene Fassung — das ist die eine Information,
 * die man vor dem Tippen braucht (Migration 0055). */
.anweisung { border: 1px solid var(--linie, #d8dee4); border-radius: var(--r, 4px);
             margin-bottom: .5rem; background: var(--weiss, #fff); }
.anweisung-kopf { display: flex; align-items: center; gap: .75rem; width: 100%;
                  padding: .7rem .9rem; border: 0; background: none;
                  font: inherit; text-align: left; cursor: pointer; }
.anweisung-kopf:hover { background: var(--flaeche, #f6f8fa); }
.anweisung-kopf.an { border-bottom: 1px solid var(--linie, #d8dee4); }
.anweisung-titel { font-weight: 600; }
.anweisung-modul { color: var(--gedaempft, #6b7785); font-size: .85em; }
/* Nach rechts, damit die Marken untereinander stehen und man die Spalte auf
   einen Blick lesen kann. */
.anweisung-marke { margin-left: auto; font-size: .8em; padding: .1rem .5rem;
                   border-radius: 999px; background: var(--flaeche, #f6f8fa);
                   color: var(--gedaempft, #6b7785);
                   border: 1px solid var(--linie, #d8dee4); }
.anweisung-marke.eigen { background: #fff8e1; border-color: #e0c97f; color: #6b5518; }
.anweisung-koerper { padding: .9rem; }
.anweisung-platzhalter { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .8rem; }
.anweisung-platzhalter code { font-size: .8em; padding: .1rem .4rem;
                              background: var(--flaeche, #f6f8fa);
                              border: 1px solid var(--linie, #d8dee4);
                              border-radius: var(--r, 4px); }
/* Festbreitenschrift: Der Text geht wörtlich an ein Modell. Was man tippt,
   ist genau das, was ankommt — auch die Einrückung. */
.anweisung-feld { width: 100%; box-sizing: border-box; resize: vertical;
                  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                  font-size: .85rem; line-height: 1.45;
                  padding: .6rem .7rem; color: var(--text, #1d2733);
                  background: var(--weiss, #fff);
                  border: 1px solid var(--linie, #d8dee4);
                  border-radius: var(--r, 4px); }
.anweisung-fuss { display: flex; align-items: center; gap: .6rem;
                  margin-top: .7rem; flex-wrap: wrap; }
.anweisung-vorgabe { margin-top: .8rem; }
.anweisung-vorgabe pre { white-space: pre-wrap; font-size: .8rem;
                         background: var(--flaeche, #f6f8fa);
                         border: 1px solid var(--linie, #d8dee4);
                         border-radius: var(--r, 4px); padding: .6rem; }

/* ══════════════════════════════════ Datenmodell-Stand ═════════════════════
 *
 * Michaels „Update Datenmodell" (04.09.2026). Wenig eigenes CSS mit Absicht:
 * Karte, Liste und Knopf kommen aus `bausteine.css` und der Shell. Neu ist
 * nur, was es dort nicht gibt — das Feld für den Fingerabdruck und die
 * Färbung einer Tabellenzeile nach Befund.
 */
.dm-kopf {
  display: flex; align-items: baseline; gap: 12px;
  justify-content: space-between; flex-wrap: wrap;
}
.dm-kopf h3 { margin: 0; }
.abdruckreihe { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
/* `.knopf` ist in der Shell so breit wie das Anmeldeformular (width: 100%,
   oben). In dieser Maske steht "Kopieren" neben dem Abdruckfeld und drueckte
   es auf 20 Pixel zusammen; "Alle Migrationen zeigen" lief ueber die ganze
   Karte (31.10.2026). Hier gilt die Breite des Inhalts. */
.dm-stand .knopf { width: auto; padding: 7px 16px; }
.dm-stand .knopf.knopf-klein { padding: 5px 12px; font-size: 12.5px; }
.dm-stand .karte > .knopf { margin-top: 10px; }
/* Schreibmaschinenschrift: Der Abdruck wird verglichen, Zeichen für Zeichen.
   In einer Proportionalschrift sehen 0 und O gleich aus. */
.abdruckfeld {
  flex: 1; min-width: 0; width: 100%;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 7px 9px; border: 1px solid var(--rand, #d4dce4);
  border-radius: var(--r, 6px); background: #fbfcfd; color: #1A2332;
}
.leise { color: #6B7B8C; font-size: 12px; }
/* Die Meldung als Absatz IN einer Karte — `.meldung` allein ist die
   schwebende Leiste. */
p.meldung { margin: 8px 0; padding: 8px 11px; border-radius: var(--r, 6px);
            font-size: 12.5px; }
p.meldung.schlecht { background: #fdecea; color: #a33a2a; }
p.meldung.warnung  { background: #fdf5e6; color: #8a6116; }
.liste tr.gut td      { background: #f4faf6; }
.liste tr.warnung td  { background: #fdf9ef; }
.liste tr.schlecht td { background: #fdf1ef; }
.dm-erklaerung { margin: 4px 0 0; font-size: 12.5px; }
.dm-erklaerung dt { font-weight: 650; margin-top: 8px; color: #1A2332; }
.dm-erklaerung dd { margin: 2px 0 0; color: #4A5A6A; }

/* „+ Neuer Kunde" steht neben der Kundenauswahl im Kopf — schmal, damit er
   die Auswahl nicht überstimmt, und nicht als Primärknopf: Er ist ein Weg,
   nicht die Hauptsache dieses Bildschirms. */

/* ── Beispielattribute je Kategorie (musterattribute.js) ─────────────────── */
.ma-knopf { margin-right: 8px; }
/* Die Unterzeile hat nur EINE Zelle, die damit auch die letzte ist — und
   `td:last-child` (oben) macht daraus eine Flexbox mit rechtsbuendigem Inhalt.
   Hier ist sie eine Tabellenzelle ueber alle Spalten. */
table.liste tr.ma-zeile > td:last-child { display: table-cell; background: var(--flaeche-2, #F4F7FA); padding: 10px 18px 14px; text-align: left; }
tr.ma-zeile > td .erklaerung { max-width: 60rem; }
table.ma-tabelle td:last-child { display: table-cell; }
.ma-block { margin-top: 8px; }
.ma-block h4 { margin: 8px 0 4px; font-size: 12.5px; color: var(--text-2, #5A6B7D); font-weight: 600; }
table.ma-tabelle { font-size: 12.5px; }
table.ma-tabelle th, table.ma-tabelle td { padding: 4px 8px; }
table.ma-tabelle input[type=text] { width: 100%; box-sizing: border-box; font: inherit; }
table.ma-tabelle { table-layout: fixed; }
table.ma-tabelle .ma-sp-name        { width: 16%; }
table.ma-tabelle .ma-sp-system      { width: 8%; }
table.ma-tabelle .ma-sp-typ         { width: 11%; }
table.ma-tabelle .ma-sp-beschreibung{ width: 30%; }
table.ma-tabelle .ma-sp-pflicht     { width: 4%; text-align: center; }
table.ma-tabelle .ma-sp-beispiel    { width: 10%; }
/* Reiter Musterattribute (18.09.2026): Gesamttabelle mit Filterzeile,
   Sortierköpfen, Haken und Massenmenü. */
.ma-leiste { display: flex; gap: 16px; align-items: center; margin: 8px 0 10px; flex-wrap: wrap; }
.ma-leiste .ma-zahl { color: var(--text-leise, #6b7580); }
.ma-leiste .ma-spalten-knopf { margin-left: auto; }
.ma-leiste .ui-spaltenwahl-huelle { align-self: flex-start; width: 0; }
.ma-leiste .ui-spaltenwahl-klapp { top: 30px; }
table.ma-alle th.sortierkopf { cursor: pointer; user-select: none; white-space: nowrap; }
table.ma-alle th.sortierkopf:hover { text-decoration: underline; }
table.ma-alle .ma-filterzeile th { padding: 2px 6px; }
table.ma-alle .ma-filterzeile input,
table.ma-alle .ma-filterzeile select { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 3px 6px; }
/* Feste Spaltenbreiten (18.09.2026, Michael: „bitte die Spalten nach links
   ruecken"): Ohne `table-layout: fixed` warf der Browser den Ueberschuss in
   die Hakenspalte, sobald die Beschreibung ausgeblendet war. Die Beschreibung
   hat keine Breite und nimmt, was uebrig ist; ist sie weg, wachsen die
   anderen anteilig. */
table.ma-alle { table-layout: fixed; width: 100%; }
/* Die Hakenzelle: 18 px Rand links und rechts plus Haken passten nicht in
   2,2 rem — das geerbte `text-overflow: ellipsis` malte einen Punkt daneben. */
table.ma-alle th.ma-sp-haken, table.ma-alle td.ma-sp-haken {
  width: 2.4rem; padding-left: 6px; padding-right: 6px; text-align: center; overflow: visible;
}
table.ma-alle td.ma-sp-herkunft { overflow: visible; }
table.ma-alle td.ma-sp-herkunft button.leise { padding: 2px 6px; }
table.ma-alle .ma-sp-kategorie { width: 13%; }
table.ma-alle .ma-sp-name { width: 15%; }
table.ma-alle .ma-sp-data_type { width: 10%; }
table.ma-alle .ma-sp-systemart, table.ma-alle .ma-sp-quelle_systemart { width: 7.5%; }
table.ma-alle .ma-sp-quelle_feld { width: 11%; }
table.ma-alle .ma-sp-example_value { width: 9%; }
table.ma-alle .ma-sp-herkunft { width: 14%; }
table.ma-alle tr.gewaehlt td { background: var(--marke-hell, #eaf3fb); }
table.ma-alle tr.eigen .ma-sp-herkunft { font-style: italic; }
/* Vererbungslehre (18.09.2026): grau = vererbt aus dem Standard, schwarz =
   am Mandanten (eigen oder ueberschrieben). */
table.ma-alle tr.vererbt td { color: var(--text-3, #7A8A99); }
/* Ausgeblendetes System (Core 0067): gibt es bei diesem Kunden nicht — nur
   hier sichtbar, grau, damit man es wieder einblenden kann. */
table.liste-systeme tr.ausgeblendet td { opacity: .5; }
table.liste-systeme tr.ausgeblendet td.spalte-zustand { opacity: 1; }
table.ma-alle tr.ueberschrieben td.ma-sp-herkunft { font-weight: 600; font-style: normal; }
/* Ausgeblendet (0020): durchgestrichen — gibt es fuer diesen Mandanten nicht,
   bleibt sichtbar, damit man es wieder einblenden kann. */
table.ma-alle tr.ausgeblendet td:not(.ma-sp-haken):not(.ma-sp-herkunft) { text-decoration: line-through; opacity: .55; }
table.liste-werte tr.vererbt td .kategorie-name,
table.liste-werte tr.vererbt td .kategorie-beschreibung { color: var(--text-3, #7A8A99); }
.ma-herkunft { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.ma-herkunft button.leise { font-size: 11.5px; }
table.ma-alle td { white-space: nowrap; }
table.ma-alle td select, table.ma-alle td input[type=text], table.ma-alle td textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 3px 6px;
}
table.ma-alle td textarea { resize: vertical; min-height: 1.8em; }
/* Quellsystem gesetzt, Quellfeld leer: ein offener Punkt, sichtbar. */
table.ma-alle td select.fehlt { border-color: #EF9F27; }
.ma-anlegen { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ma-anlegen input[type=text] { flex: 1 1 14rem; }

/* Quelle (0014): Standard-System und Feld nebeneinander in einer Zelle. */
table.ma-tabelle .ma-sp-quelle      { width: 15%; }
table.ma-tabelle .ma-sp-quelle select { width: 42%; margin-right: 4px; }
table.ma-tabelle .ma-sp-quelle input  { width: 52%; }
table.ma-tabelle .ma-sp-tun         { width: 6rem; }
table.ma-tabelle td { vertical-align: top; }
table.ma-tabelle textarea.ma-beschreibung {
  width: 100%; box-sizing: border-box; font: inherit; line-height: 1.35;
  resize: vertical; min-height: 2.9em; padding: 4px 6px;
}
table.ma-tabelle select.ma-wahl { width: 100%; font: inherit; }
.ma-anlegen { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ma-anlegen input[type=text] { flex: 1 1 18rem; }
.ma-anlegen select.ma-wahl { font: inherit; max-width: 14rem; }
.ma-systemart { font: inherit; }

/* Fester System-Slot (Migration 0065) */
.slot-marke { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #e8eef5; color: #3B4A66; border: 1px solid #c9d6e5; white-space: nowrap; }


/* Die Umgebungsmarke in der Kopfzeile (Core 1.38). Michael am 21.09.2026:
   „dass die Software auch PROD anzeigt". PROD ruhig — es ist der Normalfall
   und darf nicht zum Hintergrundrauschen werden, das niemand mehr liest.
   DEV und TEST tragen Farbe, weil dort die Verwechslung teuer wird. */
.kopf .umgebungsmarke {
  display: inline-block; margin-right: 8px; padding: 1px 6px;
  border-radius: 3px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; vertical-align: 1px;
  border: 1px solid var(--linie-2, #C4D0DC); color: var(--text-2, #4A5B66);
}
.kopf .umgebungsmarke.u-dev,
.kopf .umgebungsmarke.u-test {
  border-color: #BA7517; color: #8A5710; background: #FDF3E3;
}
.kopf .umgebungsmarke.u-unbekannt {
  border-color: #B4553C; color: #fff; background: #B4553C;
}

/* ── Prüfstand (29.09.2026, `pruefstand.js`) ──────────────────────────── */
.ps-formular { margin-top: 0; }
.ps-ausgabe {
  margin: 0; padding: 14px 18px; max-height: 55vh; min-height: 120px; overflow: auto;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--flaeche-2, #F5F8FA); color: var(--text-2, #4A5E72);
  white-space: pre; border-radius: 0 0 var(--r) var(--r);
}
.ps-ausgabe .ps-z-gut { color: var(--gut, #27AE60); }
.ps-ausgabe .ps-z-schlecht { color: var(--gefahr, #C0392B); font-weight: 600; }
.ps-ausgabe .ps-z-neutral { color: var(--text-3, #8A9BA8); }
.ps-ausgabe .ps-z-kopf { color: var(--text, #1A2332); font-weight: 600; }
.ui-marke.ps-gut { color: var(--gut, #27AE60); border-color: var(--gut-linie, #A8DDB8); }
.ui-marke.ps-schlecht { color: var(--gefahr, #C0392B); border-color: var(--gefahr, #C0392B); }
.ui-marke.ps-laeuft { color: var(--marke, #009DC4); border-color: var(--marke, #009DC4); }
.ui-marke.ps-neutral { color: var(--text-3, #8A9BA8); }
.ps-meta { font-size: 12px; font-weight: 400; color: var(--text-3, #8A9BA8); }
.ps-liste { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.ps-liste li { margin: 4px 0; }
.ps-liste code { font-size: 12px; }
.ps-bildlink { font-size: 12px; }
.ps-bild { max-width: 100%; border: 1px solid var(--linie); border-radius: var(--r); margin-top: 6px; }
#psKopf .knopf { width: auto; padding: 5px 12px; }


/* ------------------------------------------- Reitergruppen und Zahnrad */
/*
 * Core 1.11, 02.10.2026. Michael: „Ich habe lediglich das Problem, dass die
 * linke Menüleiste schon so voll ist." Entwurf im Projektordner
 * (ENTWURF_2026-10-02_menueleiste-und-boards.html), Michael: „ich find's
 * super - machen wir so."
 */
:root { --reiter-hoch: 44px; }

.leiste button .reiterpunkte { display: flex; gap: 3px; height: 4px; margin-top: 1px; }
.leiste button .reiterpunkte i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6;
}

.reiterleiste {
  position: fixed; left: var(--leiste-breit); right: 0; top: var(--kopf-hoch);
  height: var(--reiter-hoch); z-index: 35;
  background: var(--weiss); border-bottom: 1px solid var(--linie);
  display: flex; align-items: flex-end; gap: 2px; padding: 0 20px;
}
.reiterleiste .reitergruppe-name {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding: 0 16px 13px 0; margin-right: 8px; border-right: 1px solid var(--linie);
}
/* Eigene Klasse, nicht `.reiter`: Die heisst in der Verwaltung schon etwas
   anderes und zog die Beschriftung aus der Leiste (Prüfstand-Bild 02.10.). */
.reiterleiste .gruppenreiter {
  border: 0; background: none; font: inherit; font-size: 13.5px; line-height: 1.2;
  margin: 0; height: auto; position: static;
  color: var(--text-2); padding: 0 16px 11px; cursor: pointer;
  border-bottom: 3px solid transparent; font-weight: 500;
}
.reiterleiste .gruppenreiter:hover { color: var(--text); }
.reiterleiste .gruppenreiter.an {
  color: var(--marke-dunkel); border-bottom-color: var(--marke); font-weight: 600; cursor: default;
}
body.mit-reitern .buehne { top: calc(var(--kopf-hoch) + var(--reiter-hoch)); }
body.ueberlagert .reiterleiste { filter: brightness(.94); }

.kopf .einstellungen { position: relative; }
.kopf .zahnradknopf {
  width: 34px; height: 34px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--weiss); color: var(--text-2); display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.kopf .zahnradknopf:hover { background: var(--flaeche-2); }
.kopf .zahnradknopf.an { background: var(--marke-hell); border-color: var(--marke); color: var(--marke-dunkel); }
.kopf .zahnradknopf svg,
.zahnradmenue svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.zahnradmenue {
  position: absolute; top: 42px; right: 0; min-width: 210px; z-index: 70;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: var(--schatten-gross); padding: 6px;
}
.zahnradmenue .zahnradmenue-kopf {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-3); padding: 6px 10px 4px; font-weight: 600;
}
.zahnradmenue button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; text-align: left; color: var(--text); font: inherit; font-size: 13.5px;
}
.zahnradmenue button:hover { background: var(--marke-hell); }
.zahnradmenue button.an { color: var(--marke-dunkel); font-weight: 600; }
.zahnradmenue button svg { color: var(--text-3); flex-shrink: 0; }

/* Freigabe für PROD in der Verwaltung (Core 1.25). */
.ps-freigabe-zeile { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; }
.ps-freigabe-zeile input { width: 1.2rem; height: 1.2rem; cursor: pointer; }
.ps-freigabe-label { font-weight: 600; cursor: pointer; }

/* Core 1.32: Befund von „KI prüfen" unter Verwaltung › KI-Zugang. */
.ki-befund { margin: 10px 0 0; padding: 8px 11px; border-radius: var(--r, 6px); font-size: 12.5px;
             background: var(--flaeche-2, #f2f6f9); color: var(--text-2, #4A5E72); }
.ki-befund.gut { background: #eaf6ee; color: #1E6B48; }
.ki-befund.schlecht { background: #fdecea; color: #a33a2a; }

/* Freigabe für PROD: Wächter-Lauf (Core 1.33) */
.ps-freigabe-lauf { display: flex; align-items: center; gap: 10px; margin: .6rem 0; padding: 8px 12px;
  border-radius: 6px; background: #E5F6FB; color: #007A99; font-weight: 600; font-size: 13px; }
.ps-kreisel { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C4D0DC; border-top-color: #007A99;
  animation: ps-dreh .9s linear infinite; flex: none; }
@keyframes ps-dreh { to { transform: rotate(360deg); } }
.ps-freigabe-warten { color: #8A5A00; }