/* Bausteine — die Oberflächenteile der Plattform, einmal geschrieben.
 *
 * Einzubinden von der Shell UND von jedem Modul:
 *
 *     @import url("/shared/ui-tokens/schrift.css");
 *     @import url("/shared/ui-tokens/bausteine.css");
 *
 * als erste Zeilen des eigenen Stilblatts. Danach darf ein Modul überschreiben,
 * was bei ihm anders sein MUSS — die Reihenfolge der Kaskade sorgt dafür, dass
 * das Eigene gewinnt, ohne dass hier etwas mit `!important` verteidigt wird.
 *
 * ── Warum es diese Datei gibt ────────────────────────────────────────────────
 *
 * Michael am 30.07.2026: *„Ich will dasselbe Look & Feel wie bei DataCatalog
 * Pro — mit den gleichen Panels, Fenstern und Menüs."* Vier Module, die das je
 * für sich nachbauen, ergeben vier Annäherungen. `shared/README.md` schließt
 * Komponenten**bibliotheken** aus, und das bleibt richtig: Eine Bibliothek
 * zwänge allen Modulen ein Framework auf. Ein Stilblatt tut das nicht — es
 * setzt kein JavaScript voraus, schreibt keine Baumstruktur vor und lässt sich
 * von einem Modul Regel für Regel überstimmen.
 *
 * ── Woher die Werte stammen ──────────────────────────────────────────────────
 *
 * Maße und Farben aus DataCatalog Pro, ausgeschnitten in
 * `docs/vorbild-datacatalog-pro/`. Die Farben stehen hier nie als Zahl, sondern
 * immer als Variable — die Zahlen gehören in `tokens.json`.
 *
 * ── Was hier verbindlich ist ─────────────────────────────────────────────────
 *
 * `docs/Bedienbarkeit.md`: Der Mauszeiger sagt die Wahrheit, eine Ablagefläche
 * sieht aus wie eine Ablagefläche, ein leerer Zustand sagt was zu tun ist,
 * Beschriftungen beginnen mit einem Verb, jedes Zeichen ohne Text trägt einen
 * Hinweis beim Überfahren. Die ersten drei kann ein Stilblatt erzwingen — es
 * tut es unten. Die letzten beiden kann es nicht; sie stehen im Text der
 * Oberfläche und bleiben Sache des Moduls.
 */

/* ══════════════════════════════════════════════════ Grundlage ══════════════ */

/* ══════════════════════════════════════ Die fuenf Bausteinarten ═══════════
 *
 * **Michael am 04.09.2026:** *„wir muessen Kernprozesse, Teilprozesse,
 * Funktionen optisch staerker voneinander trennen — mache bitte
 * unterschiedliche Hintergrund-Farben — und das aber bitte in ALLEN Masken."*
 *
 * Das letzte Wort ist der Grund, warum sie HIER stehen und nicht im Modul:
 * Die fuenf Farben waren dreimal notiert — als linker Rand der Hauskarte, als
 * Hintergrund der Kennungsmarke und als Punkt im Filter der Landkarte —, mit
 * je eigenen Werten. Deshalb wirkte dieselbe Bausteinart in jeder Maske
 * anders. Ein Modul, das dazukommt, haette sie ein viertes Mal erfunden.
 *
 * Je Art ZWEI Werte: der starke Ton fuer Rand, Punkt und Text, und eine helle
 * Flaeche zum Hinterlegen. Die hellen Toene sind absichtlich blass — sie
 * liegen unter Text, und eine Karte soll sich von der naechsten unterscheiden,
 * nicht schreien.
 *
 * K traegt die Hausfarbe: Kernprozesse sind die Hauptsache, und das darf man
 * sehen. Die anderen vier sind daneben gewaehlt, nicht ueber sie hinweg.
 */
:root {
  --art-G: #7B61A8;  --art-G-flaeche: #F3EFF9;   /* Governance / Steuerung */
  --art-K: #009DC4;  --art-K-flaeche: #E6F5FA;   /* Kernprozesse           */
  --art-T: #3FA796;  --art-T-flaeche: #E6F4F1;   /* Teilprozesse           */
  --art-F: #8A9BA8;  --art-F-flaeche: #EEF2F5;   /* Funktionen / Services  */
  --art-R: #C08B3E;  --art-R-flaeche: #FAF3E6;   /* Regelwerke / Artefakte */
}

/* Fertige Marken fuer Listen und Karten. Wer eine Bausteinart zeigt, setzt
   `ui-art` plus `ui-art-<Buchstabe>` — dann stimmt sie ueberall. */
.ui-art {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 11.5px; font-weight: 650; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.ui-art-G { background: var(--art-G-flaeche); color: var(--art-G); border-color: var(--art-G); }
.ui-art-K { background: var(--art-K-flaeche); color: var(--art-K); border-color: var(--art-K); }
.ui-art-T { background: var(--art-T-flaeche); color: var(--art-T); border-color: var(--art-T); }
.ui-art-F { background: var(--art-F-flaeche); color: var(--art-F); border-color: var(--art-F); }
.ui-art-R { background: var(--art-R-flaeche); color: var(--art-R); border-color: var(--art-R); }

.baustein-grund,
.ui-baustein-grund {
  font: 13px/1.5 Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text, #1A2332);
}

/* Ohne diese Zeile schlägt eine Regel wie `.warten { display: flex }` das
   `hidden`-Attribut, und ein längst geladener Bildschirm liegt unter einem
   Wartetext. Genau das ist am 29.07.2026 in `geschaeftsprozesse.css`
   passiert und hat Stunden gekostet. Sie gehört deshalb hierher, nicht in
   jedes Modul einzeln. */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════ Schaltflächen ══════════════ */

.knopf,
.ui-knopf {
  padding: 7px 16px;
  border-radius: var(--r, 6px);
  border: none;
  cursor: pointer;                 /* Bedienbarkeit, Regel 1 */
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background var(--uebergang, 150ms), box-shadow var(--uebergang, 150ms),
              border-color var(--uebergang, 150ms), color var(--uebergang, 150ms);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Das Winkelzeichen vor der Beschriftung ist die Handschrift der Altanwendung.
   Es steht bewusst NICHT vor den kleinen Knöpfen — dort frisst es die Hälfte
   der Fläche. */
.knopf::before,
.ui-knopf::before { content: '\203A'; font-size: 14px; font-weight: 800; line-height: 1; }
.knopf-klein::before,
.ui-knopf-klein::before,
.knopf-winzig::before,
.ui-knopf-winzig::before,
.knopf-icon::before,
.ui-knopf-icon::before { display: none; }

.knopf-haupt,
.ui-knopf-haupt { background: var(--marke, #009DC4); color: #fff; }
.knopf-haupt:hover,
.ui-knopf-haupt:hover { background: var(--marke-dunkel, #007A99); box-shadow: 0 2px 8px rgba(0,157,196,.3); }

.knopf-gut,
.ui-knopf-gut { background: var(--gut, #27AE60); color: #fff; }
.knopf-gut:hover,
.ui-knopf-gut:hover { background: #219150; }

.knopf-gefahr,
.ui-knopf-gefahr { background: var(--fehler, #E74C3C); color: #fff; }
.knopf-gefahr:hover,
.ui-knopf-gefahr:hover { background: #C0392B; }

.knopf-zweit,
.ui-knopf-zweit { background: var(--weiss, #fff); color: var(--text, #1A2332); border: 1px solid var(--linie-2, #C4D0DC); }
.knopf-zweit:hover,
.ui-knopf-zweit:hover { background: var(--flaeche-3, #EBF0F5); border-color: var(--marke, #009DC4); }

.knopf-still,
.ui-knopf-still { background: none; color: var(--text-2, #4A5E72); border: 1px solid transparent; }
.knopf-still:hover,
.ui-knopf-still:hover { background: var(--flaeche-3, #EBF0F5); color: var(--text, #1A2332); }

.knopf-klein,
.ui-knopf-klein  { padding: 5px 12px; font-size: 11px; }
.knopf-winzig,
.ui-knopf-winzig { padding: 3px 8px; font-size: 10px; border-radius: var(--radius-klein, 4px); }

.knopf:disabled,
.ui-knopf:disabled {
  background: var(--linie-2, #C4D0DC) !important;
  color: var(--text-3, #8A9BAD) !important;
  cursor: not-allowed !important;   /* Regel 1: was nicht reagiert, sagt es */
  box-shadow: none !important;
}

.knopf-icon,
.ui-knopf-icon {
  background: var(--flaeche-3, #EBF0F5);
  border: 1px solid var(--linie, #DDE4EC);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: var(--r, 6px);
  font-size: 12px;
  color: var(--text-2, #4A5E72);
}
.knopf-icon:hover,
.ui-knopf-icon:hover { background: var(--marke-hell, #E5F6FB); color: var(--marke, #009DC4); border-color: var(--marke, #009DC4); }

/* ═══════════════════════════════════════════════ Werkzeugleiste ════════════ */

/* Die waagerechte Leiste über einer Fläche — im Lineage der Altanwendung. */
.werkzeugleiste,
.ui-werkzeugleiste {
  background: var(--weiss, #fff);
  border-bottom: 1px solid var(--linie, #DDE4EC);
  padding: 8px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: var(--schatten, 0 2px 8px rgba(0,0,0,.08));
}
.werkzeugleiste .fueller,
.ui-werkzeugleiste .ui-fueller { margin-left: auto; }

/* Die schwebende Leiste aus Zeichen — im Prozesseditor der Altanwendung.
   Sie schwebt, damit der Benutzer sie dorthin schiebt, wo sie nicht stört;
   eine feste Leiste nimmt der Zeichenfläche genau dort Platz weg, wo im
   Workshop das Diagramm hin soll. */
.schwebeleiste,
.ui-schwebeleiste {
  position: absolute;
  z-index: 200;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie-2, #C4D0DC);
  border-radius: var(--radius-gross, 10px);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, 32px);
  gap: 4px;
  box-shadow: var(--schatten-gross, 0 4px 20px rgba(0,0,0,.18));
  user-select: none;
}
.schwebeleiste-griff,
.ui-schwebeleiste-griff {
  grid-column: span 2;
  height: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  color: var(--text-3, #8A9BAD);
  font-size: 11px; letter-spacing: 4px;
  border-radius: var(--radius-klein, 4px);
}
.schwebeleiste-griff:hover,
.ui-schwebeleiste-griff:hover { background: var(--flaeche-2, #F5F8FA); }
.schwebeleiste-griff:active,
.ui-schwebeleiste-griff:active { cursor: grabbing; }
.schwebeleiste.zu .werkzeug,
.ui-schwebeleiste.ui-zu .ui-werkzeug,
.schwebeleiste.zu .werkzeug-trenner,
.ui-schwebeleiste.ui-zu .ui-werkzeug-trenner { display: none; }

.werkzeug,
.ui-werkzeug {
  background: var(--flaeche-2, #F5F8FA);
  border: 1px solid var(--linie-2, #C4D0DC);
  color: var(--text-2, #4A5E72);
  border-radius: var(--r, 6px);
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--uebergang, 150ms), color var(--uebergang, 150ms), border-color var(--uebergang, 150ms);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.werkzeug:hover,
.ui-werkzeug:hover { background: var(--flaeche-3, #EBF0F5); color: var(--text, #1A2332); }
.werkzeug.an,
.ui-werkzeug.ui-an { background: var(--marke, #009DC4); color: #fff; border-color: var(--marke, #009DC4); }
.werkzeug-gut,
.ui-werkzeug-gut { border-color: var(--gut, #27AE60); }
.werkzeug-gut:hover,
.ui-werkzeug-gut:hover,
.werkzeug-gut.an,
.ui-werkzeug-gut.ui-an { background: var(--gut, #27AE60); color: #fff; }
.werkzeug-gefahr,
.ui-werkzeug-gefahr { border-color: var(--fehler, #E74C3C); }
.werkzeug-gefahr:hover,
.ui-werkzeug-gefahr:hover { background: var(--fehler, #E74C3C); color: #fff; }
.werkzeug-trenner,
.ui-werkzeug-trenner { grid-column: span 2; height: 1px; background: var(--linie, #DDE4EC); margin: 1px 0; }

/* ════════════════════════════════════════════════ Menüleiste ═══════════════ */

.menueleiste,
.ui-menueleiste {
  position: absolute; top: 8px; left: 8px; z-index: 260;
  display: flex; gap: 2px;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie-2, #C4D0DC);
  border-radius: var(--radius-gross, 10px);
  padding: 3px;
  box-shadow: var(--schatten-mittel, 0 4px 16px rgba(0,0,0,.1));
  user-select: none;
}
.menueleiste-knopf,
.ui-menueleiste-knopf {
  background: none; border: none;
  color: var(--text-2, #4A5E72);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--r, 6px);
  cursor: pointer;
  transition: background var(--uebergang-kurz, 120ms);
}
.menueleiste-knopf:hover,
.ui-menueleiste-knopf:hover,
.menueleiste-knopf.offen,
.ui-menueleiste-knopf.ui-offen { background: var(--flaeche-2, #F5F8FA); color: var(--text, #1A2332); }

.menue,
.ui-menue {
  position: fixed; z-index: 300;
  background: var(--weiss, #fff);
  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;
  min-width: 180px;
}
.menue-eintrag,
.ui-menue-eintrag {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r, 6px);
  cursor: pointer;
  font: inherit; font-size: 12px;
  color: var(--text-2, #4A5E72);
  border: none; background: none;
  width: 100%; text-align: left;
  transition: background var(--uebergang-kurz, 120ms);
}
.menue-eintrag:hover,
.ui-menue-eintrag:hover { background: var(--flaeche-2, #F5F8FA); color: var(--text, #1A2332); }
.menue-eintrag svg,
.ui-menue-eintrag svg { flex-shrink: 0; opacity: .7; }
.menue-trenner,
.ui-menue-trenner { height: 1px; background: var(--linie, #DDE4EC); margin: 4px 0; }
.menue-gruppe,
.ui-menue-gruppe {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-3, #8A9BAD); padding: 5px 10px 2px;
}
/* Das Kürzel rechtsbündig — so lernt man es, ohne eine Hilfeseite zu suchen
   (Bedienbarkeit, Regel 5). */
.menue-kuerzel,
.ui-menue-kuerzel { margin-left: auto; color: var(--text-3, #8A9BAD); font-size: 10.5px; letter-spacing: .3px; }
.menue-haken,
.ui-menue-haken { margin-left: auto; color: var(--marke, #009DC4); font-weight: 700; font-size: 12px; }
.menue-eintrag.aus .menue-haken,
.ui-menue-eintrag.ui-aus .ui-menue-haken { visibility: hidden; }

/* ══════════════════════════════════════════ Verschiebbare Fenster ══════════ */

.fenster,
.ui-fenster {
  position: absolute;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie-2, #C4D0DC);
  border-radius: var(--radius-gross, 10px);
  box-shadow: var(--schatten-mittel, 0 4px 16px rgba(0,0,0,.1));
  min-width: 160px; max-width: 260px;
  user-select: none;
  z-index: 50;
  display: flex; flex-direction: column;
  transition: box-shadow var(--uebergang, 150ms);
}
.fenster.zieht,
.ui-fenster.ui-zieht { opacity: .92; box-shadow: var(--schatten-gross, 0 4px 20px rgba(0,0,0,.18)); }
.fenster-kopf,
.ui-fenster-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  cursor: grab;
  border-radius: var(--radius-gross, 10px) var(--radius-gross, 10px) 0 0;
  gap: 8px; flex-shrink: 0;
}
.fenster-kopf:active,
.ui-fenster-kopf:active { cursor: grabbing; }
.fenster-kopf:hover,
.ui-fenster-kopf:hover { background: var(--flaeche-2, #F5F8FA); }
.fenster.zu .fenster-kopf,
.ui-fenster.ui-zu .ui-fenster-kopf { border-radius: var(--radius-gross, 10px); }
.fenster-titel,
.ui-fenster-titel {
  font-size: 10px; font-weight: 700;
  color: var(--text-3, #8A9BAD);
  text-transform: uppercase; letter-spacing: .08em;
}
.fenster-auf,
.ui-fenster-auf {
  background: none; border: none; cursor: pointer;
  color: var(--text-3, #8A9BAD); font-size: 11px; padding: 0; line-height: 1;
  transition: transform .2s;
}
.fenster.zu .fenster-auf,
.ui-fenster.ui-zu .ui-fenster-auf { transform: rotate(180deg); }
/* Höhenvariabel mit eigenem Ziehgriff unten rechts — so macht es die Vorlage,
   damit eine lange Liste nicht das halbe Bild verdeckt. */
.fenster-körper,
.ui-fenster-körper { padding: 6px 10px 8px; overflow: auto; max-height: 280px; min-height: 60px; resize: vertical; }
.fenster.zu .fenster-körper,
.ui-fenster.ui-zu .ui-fenster-körper { display: none; }

/* ═══════════════════════════════════════════ Marke mit Farbpunkt ═══════════ */

.marke,
.ui-marke {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pille, 20px);
  border: 1px solid var(--linie-2, #C4D0DC);
  background: var(--weiss, #fff);
  color: var(--text-2, #4A5E72);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.marke-punkt,
.ui-marke-punkt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.marke-quadrat,
.ui-marke-quadrat { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.marke.anklickbar,
.ui-marke.ui-anklickbar { cursor: pointer; transition: border-color var(--uebergang, 150ms), background var(--uebergang, 150ms); }
.marke.anklickbar:hover,
.ui-marke.ui-anklickbar:hover { border-color: var(--marke, #009DC4); background: var(--marke-hell, #E5F6FB); }
.marke.gut,
.ui-marke.ui-gut     { color: var(--gut, #27AE60);     border-color: var(--gut-linie, #A8DDB8); }
.marke.achtung,
.ui-marke.ui-achtung { color: var(--achtung, #E67E22); border-color: var(--achtung-linie, #F5CBA7); }
.marke.fehler,
.ui-marke.ui-fehler  { color: var(--fehler, #E74C3C);  border-color: var(--fehler-linie, #F5B7B1); }
.marke.gut .marke-punkt,
.ui-marke.ui-gut .ui-marke-punkt     { background: var(--gut, #27AE60); }
.marke.achtung .marke-punkt,
.ui-marke.ui-achtung .ui-marke-punkt { background: var(--achtung, #E67E22); }
.marke.fehler .marke-punkt,
.ui-marke.ui-fehler .ui-marke-punkt  { background: var(--fehler, #E74C3C); }
/* Ein fehlender Wert wird als solcher gezeigt, nicht weggelassen — sonst sieht
   „kein Owner" aus wie „Owner steht woanders". */
.marke-leer,
.ui-marke-leer { color: var(--text-3, #8A9BAD); font-style: italic; border-style: dashed; }

/* Chip mit Entfernen-Kreuz. Das Kreuz erscheint erst beim Überfahren, damit
   eine Reihe von zwanzig Chips nicht wie ein Minenfeld aussieht. */
.chip,
.ui-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--flaeche-2, #F5F8FA);
  border: 1px solid var(--linie, #DDE4EC);
  border-radius: 14px;
  padding: 2px 4px 2px 9px;
  font-size: 11px;
  color: var(--text, #1A2332);
}
.chip.haupt,
.ui-chip.ui-haupt { background: var(--marke-hell, #E5F6FB); border-color: var(--marke, #009DC4); font-weight: 700; color: var(--marke-dunkel, #007A99); }
.chip-weg,
.ui-chip-weg { background: none; border: none; cursor: pointer; color: var(--text-3, #8A9BAD); padding: 0 4px; font-size: 14px; line-height: 1; opacity: 0; transition: opacity var(--uebergang-kurz, 120ms); }
.chip:hover .chip-weg,
.ui-chip:hover .ui-chip-weg { opacity: 1; }
.chip-weg:hover,
.ui-chip-weg:hover { color: var(--fehler, #E74C3C); }

/* ═══════════════════════════════════════════════ Listenzeilen ═════════════ */

.zeile,
.ui-zeile {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: var(--r, 6px);
  cursor: pointer;                 /* Regel 1 */
  margin-bottom: 2px;
  border: 1px solid transparent;
  transition: background var(--uebergang-kurz, 120ms), border-color var(--uebergang-kurz, 120ms);
}
.zeile:hover,
.ui-zeile:hover { background: var(--flaeche-2, #F5F8FA); }
.zeile.aktiv,
.ui-zeile.ui-aktiv { background: var(--marke-hell, #E5F6FB); border-color: var(--marke, #009DC4); }
.zeile.ueberfahren,
.ui-zeile.ui-ueberfahren { border-color: var(--marke, #009DC4); background: var(--marke-hell, #E5F6FB); }
.zeile-name,
.ui-zeile-name { flex: 1; font-size: 12px; color: var(--text, #1A2332); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-griff,
.ui-zeile-griff { color: var(--text-3, #8A9BAD); cursor: grab; font-size: 13px; flex-shrink: 0; padding: 0 2px; opacity: .5; }
.zeile-griff:hover,
.ui-zeile-griff:hover { opacity: 1; }
/* Handlungen erscheinen beim Überfahren. Sie sind trotzdem per Tastatur
   erreichbar — `opacity` nimmt sie nicht aus der Reihenfolge. */
.zeile-tat,
.ui-zeile-tat { color: var(--text-3, #8A9BAD); cursor: pointer; opacity: 0; font-size: 13px; padding: 0 2px; flex-shrink: 0; background: none; border: none; transition: color var(--uebergang-kurz, 120ms); }
.zeile:hover .zeile-tat,
.ui-zeile:hover .ui-zeile-tat,
.zeile-tat:focus-visible,
.ui-zeile-tat:focus-visible { opacity: 1; }
.zeile-tat:hover,
.ui-zeile-tat:hover { color: var(--marke, #009DC4); }
.zeile-tat.gefahr:hover,
.ui-zeile-tat.ui-gefahr:hover { color: var(--fehler, #E74C3C); }

/* ═════════════════════════════════════════ Suchzeile mit Trefferzahl ══════ */

.suchzeile,
.ui-suchzeile { display: flex; align-items: center; gap: 8px; }
.suchzeile input[type="search"],
.ui-suchzeile input[type="search"],
.suchfeld,
.ui-suchfeld {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  font: inherit; font-size: 12px;
  border: 1px solid var(--linie-2, #C4D0DC);
  border-radius: var(--r, 6px);
  background: var(--weiss, #fff);
  color: var(--text, #1A2332);
}
.suchzeile input[type="search"]:focus,
.ui-suchzeile input[type="search"]:focus,
.suchfeld:focus,
.ui-suchfeld:focus { outline: none; border-color: var(--marke, #009DC4); }
/* Die Trefferzahl steht immer da, auch bei „alle" — sonst weiß der Benutzer
   nach dem Tippen nicht, ob gefiltert wurde oder nichts passt. */
.trefferzahl,
.ui-trefferzahl { font-size: 11px; color: var(--text-3, #8A9BAD); white-space: nowrap; }

/* ═════════════════════════════════════════════════ Leerer Zustand ═════════ */

/* Bedienbarkeit, Regel 3: Der Text sagt, was zu tun ist, nicht was fehlt.
   Das Stilblatt kann den Satz nicht schreiben — es kann ihm nur den Platz
   geben und die Handlung darunter sichtbar machen. */
.leer,
.ui-leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  text-align: center;
  color: var(--text-2, #4A5E72);
  font-size: 12px;
}
.leer-zeichen,
.ui-leer-zeichen { color: var(--text-3, #8A9BAD); opacity: .7; }
.leer-satz,
.ui-leer-satz { max-width: 340px; }

/* ═════════════════════════════════════════════════ Ablagefläche ═══════════ */

/* Bedienbarkeit, Regel 2 — die Regel, die den Anlass für das ganze Papier gab.
   Gestrichelt, mit Zeichen, mit Verb, mit Formatangabe. Ein durchgezogener
   Rahmen sieht aus wie ein Textfeld; genau daran ist der Foliensatz-Upload
   gescheitert. */
.ablage,
.ui-ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 22px 18px;
  border: 2px dashed var(--linie-2, #C4D0DC);
  border-radius: var(--radius-gross, 10px);
  background: var(--flaeche-2, #F5F8FA);
  cursor: pointer;                 /* Regel 1 */
  text-align: center;
  transition: border-color var(--uebergang, 150ms), background var(--uebergang, 150ms);
}
.ablage:hover,
.ui-ablage:hover { border-color: var(--marke, #009DC4); background: var(--marke-hell, #E5F6FB); }
.ablage.ueberfahren,
.ui-ablage.ui-ueberfahren { border-color: var(--marke, #009DC4); background: var(--marke-hell, #E5F6FB); }
.ablage-zeichen,
.ui-ablage-zeichen { color: var(--marke, #009DC4); }
.ablage-satz,
.ui-ablage-satz { font-size: 12px; font-weight: 600; color: var(--text, #1A2332); }
.ablage-formate,
.ui-ablage-formate { font-size: 11px; color: var(--text-3, #8A9BAD); }

/* ═════════════════════════════════════════════════════ Tabellen ══════════ */

.liste,
.ui-liste { width: 100%; border-collapse: collapse; font-size: 12px; }
.liste thead th,
.ui-liste thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--flaeche-2, #F5F8FA);
  border-bottom: 1px solid var(--linie, #DDE4EC);
  padding: 8px 12px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  color: var(--text-3, #8A9BAD);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.liste thead th.sortierbar,
.ui-liste thead th.ui-sortierbar { cursor: pointer; }
.liste thead th.sortierbar:hover,
.ui-liste thead th.ui-sortierbar:hover { color: var(--text, #1A2332); background: var(--flaeche-3, #EBF0F5); }
.liste tbody td,
.ui-liste tbody td { padding: 7px 12px; border-bottom: 1px solid var(--linie, #DDE4EC); }
.liste tbody tr:hover,
.ui-liste tbody tr:hover { background: var(--flaeche-2, #F5F8FA); }
.liste tbody tr.aktiv,
.ui-liste tbody tr.ui-aktiv { background: var(--marke-hell, #E5F6FB); }

/* ═══════════════════════════════════════════════════════ Reiter ══════════ */

.reiter,
.ui-reiter { display: flex; flex-wrap: wrap; background: var(--flaeche-2, #F5F8FA); border-bottom: 1px solid var(--linie, #DDE4EC); padding: 0 4px; }
.reiter-knopf,
.ui-reiter-knopf {
  background: none; border: none;
  padding: 9px 16px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-3, #8A9BAD);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang-kurz, 120ms), background var(--uebergang-kurz, 120ms);
}
.reiter-knopf:hover,
.ui-reiter-knopf:hover { color: var(--text, #1A2332); background: var(--flaeche-3, #EBF0F5); }
.reiter-knopf.aktiv,
.ui-reiter-knopf.ui-aktiv { color: var(--marke, #009DC4); border-bottom-color: var(--marke, #009DC4); background: var(--weiss, #fff); }

/* ═══════════════════════════════════════════════════ Formularfeld ════════ */

.feld,
.ui-feld { display: flex; flex-direction: column; gap: 3px; }
.feld > label,
.ui-feld > label { font-size: 10px; color: var(--text-3, #8A9BAD); text-transform: uppercase; letter-spacing: .04em; }
.feld input,
.ui-feld input,
.feld textarea,
.ui-feld textarea,
.feld select,
.ui-feld select {
  background: var(--flaeche-2, #F5F8FA);
  border: 1px solid var(--linie-2, #C4D0DC);
  color: var(--text, #1A2332);
  border-radius: var(--radius-klein, 4px);
  padding: 5px 8px;
  font: inherit; font-size: 12px;
  width: 100%;
}
.feld textarea,
.ui-feld textarea { resize: vertical; min-height: 48px; }
.feld input:focus,
.ui-feld input:focus,
.feld textarea:focus,
.ui-feld textarea:focus,
.feld select:focus,
.ui-feld select:focus { outline: none; border-color: var(--marke, #009DC4); }
.feld input:disabled,
.ui-feld input:disabled,
.feld textarea:disabled,
.ui-feld textarea:disabled,
.feld select:disabled,
.ui-feld select:disabled { color: var(--text-3, #8A9BAD); cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════ Dialog ══════════ */

.dialog,
.ui-dialog { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.dialog-kasten,
.ui-dialog-kasten {
  background: var(--weiss, #fff);
  border: 1px solid var(--linie, #DDE4EC);
  border-radius: var(--radius-gross, 10px);
  padding: 20px;
  width: 520px; max-width: 94vw; max-height: 80vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
}
.dialog-kasten > h3,
.ui-dialog-kasten > h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--text, #1A2332); flex-shrink: 0; cursor: move; user-select: none; }
.dialog-fuss,
.ui-dialog-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════ Statusleiste ═════════ */

.statusleiste,
.ui-statusleiste {
  background: var(--weiss, #fff);
  border-top: 1px solid var(--linie, #DDE4EC);
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-3, #8A9BAD);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
}
.statusleiste .hinweis,
.ui-statusleiste .ui-hinweis { flex: 1; color: var(--text-2, #4A5E72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════ Zeichenfläche ════════ */

.zeichenflaeche,
.ui-zeichenflaeche {
  flex: 1; position: relative; overflow: hidden;
  background: var(--zeichenflaeche-grund, #EEF0F3);
  background-image: radial-gradient(circle, var(--zeichenflaeche-punkt, #C8CCD4) 1px, transparent 0);
  background-size: var(--zeichenflaeche-punktabstand, 24px) var(--zeichenflaeche-punktabstand, 24px);
}
.zeichenflaeche.hand > svg,
.ui-zeichenflaeche.ui-hand > svg { cursor: grab; }
.zeichenflaeche.hand.schiebt > svg,
.ui-zeichenflaeche.ui-hand.ui-schiebt > svg { cursor: grabbing; }

/* ══════════════════════════════════════════ Rücksicht auf Einstellungen ══ */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


/* ═══════════════════════════════════════ Stillgelegte Werte (2.4.0) ═══════
 *
 * **Michael am 03.08.2026:** *„Stilllegen muss am Wertelisteneintrag erkennbar
 * sein optisch (durchgestrichen geht nicht mehr / aber vielleicht kursiv und in
 * Klammern)."*
 *
 * ── Warum nicht durchgestrichen ───────────────────────────────────────────
 *
 * Durchgestrichen liest sich als **gelöscht**. Ein stillgelegter Wert ist aber
 * weiter gültig — er fällt nur aus der **Auswahl**. Wo er schon vergeben ist,
 * bleibt er die richtige Antwort auf die Frage „wer ist hier der Owner".
 *
 * ── Die Regel, die dahintersteht ──────────────────────────────────────────
 *
 * **Aus der Auswahl raus, in der Anzeige drin.** Ein Wert, der einfach
 * verschwindet, macht bestehende Daten unlesbar: Das Attribut hätte plötzlich
 * einen Owner, den es „nicht gibt".
 *
 * Die Klammern setzt das Stilblatt, nicht der Code — sonst stünde in der
 * Datenbank irgendwann ein Name MIT Klammern, und spätestens beim Export wäre
 * er falsch.
 */
.ui-stillgelegt {
  font-style: italic;
  color: var(--text-3, #8A9BAD);
}
.ui-stillgelegt::before { content: "("; }
.ui-stillgelegt::after  { content: ")"; }

/* In einer Auswahlliste kann `::before` nicht greifen — `<option>` trägt keine
   Pseudoelemente. Dort setzt der Code die Klammern in den Text, und diese
   Klasse macht nur kursiv. Die Ausnahme steht hier, damit sie beim nächsten
   Lesen nicht wie ein Versehen aussieht. */
option.ui-stillgelegt { font-style: italic; }
option.ui-stillgelegt::before,
option.ui-stillgelegt::after { content: none; }

/* Dasselbe gilt fuer ein Eingabefeld — und dort ist es sogar richtig SO:
   Klammern im Feld waeren Klammern im Wert, und der naechste Klick auf
   „Speichern" schriebe sie in die Datenbank. `input` traegt keine
   Pseudoelemente, die Regel greift also von selbst nicht; sie steht hier
   trotzdem, damit beim naechsten Lesen niemand sie „repariert". */
input.ui-stillgelegt { font-style: italic; }

/* ═════════════════════════════════ Das rechte Interna-Fenster (2.5.0) ═════
 *
 * **Michael am 03.08.2026:** *„für interne Dinge und Qualitätsprüfungen …
 * also NIE für den Kunden sichtbar sein"* und *„brauchen wir überall — kann
 * also ein Core-Element sein."*
 *
 * Gestalt wie die Diagrammliste im Prozess-Editor, nur gespiegelt: Es sitzt
 * rechts, die Ziehkante links davon, der Klappknopf an der Außenkante.
 *
 * Die Mechanik steht in `interna.js`. Hier nur, wie es aussieht.
 */
.ui-interna {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--flaeche, #fff);
  border-left: 1px solid var(--linie, #DDE4EC);
}

/* Zugeklappt bleibt der Knopf stehen — er ragt nach LINKS heraus und wäre mit
   `overflow: hidden` weg. Genau das ist im Prozess-Editor am 30.07.2026
   passiert. Also nicht abschneiden, sondern die Kinder einzeln ausblenden. */
.ui-interna.zu {
  width: 0; min-width: 0; border-left: none; overflow: visible;
}
.ui-interna.zu > *:not(.ui-interna-knopf) { display: none; }

.ui-interna-kante {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; z-index: 12;
  cursor: col-resize; background: transparent;
}
.ui-interna-kante:hover,
.ui-interna-kante.zieht { background: var(--marke, #009DC4); opacity: .35; }

/* ── Der Knopf muss zu FINDEN sein (2.7.0) ────────────────────────────────
 *
 * **Michael am 04.08.2026:** *„ich sehe kein Fenster rechts"* — und er hatte
 * recht, obwohl das Fenster da war. Es war zugeklappt, und der Knopf dazu war
 * ein 12 x 44 Pixel grosser grauer Streifen am rechten Rand eines 2400 Pixel
 * breiten Schirms.
 *
 * Zugeklappt zu starten bleibt richtig (siehe `interna.js`): Interna duerfen
 * nicht von selbst aufgehen, wenn der Bildschirm geteilt wird. **Aber ein
 * Zustand, aus dem der Benutzer nicht herausfindet, ist kein Zustand, sondern
 * ein Verschwinden.**
 *
 * Deshalb: breiter, senkrecht beschriftet und in der Farbe des Kopfes, den er
 * oeffnet. Wer „INTERN" liest, weiss, was dahinter liegt — ein Winkel oder ein
 * Pfeil sagt nur, dass sich etwas oeffnet, nicht was. */
/* ── Der Knopf SCHWEBT, seit 2.15.0 ────────────────────────────────────────
 *
 * **Michael am 12.08.2026:** *„Problem ist nun, dass ich den Button um das
 * Fenster rechts ein- oder auszuklappen nur nach ewigem Scrollen finde -
 * kannst Du den nicht schwebend machen - so dass er immer sichtbar ist?"*
 *
 * Gemessen in Data Vision: Der Modulrahmen ist 759 px hoch und sein Inhalt
 * 10801 px. Das Fenster ist so hoch wie der Inhalt, `top: 50%` lag also auf
 * halber Hoehe des INHALTS — der Knopf stand bei `top: 5349`, also knapp
 * fuenftausend Pixel unter dem Sichtfeld. Bei kurzen Seiten war das nie
 * aufgefallen.
 *
 * `position: fixed` bezieht sich im Modul auf den Modulrahmen, und die
 * aeussere Seite scrollt nicht (nachgemessen: `scrollHeight == clientHeight`).
 * Der Knopf steht damit immer in der Mitte des Sichtfelds.
 *
 * **`right` statt `left`.** Bei `fixed` zaehlen Prozente gegen das Sichtfeld,
 * nicht gegen das Fenster — `left: -22px` haette den Knopf an den linken
 * Bildschirmrand gesetzt. Er haengt jetzt am rechten Rand, um die Breite des
 * Fensters nach innen versetzt. Die liefert `interna.js` als
 * `--interna-breite`; zugeklappt ist sie nicht gesetzt, dann greift die 0.
 *
 * So macht es `qualitaetsfenster.js` seit 2.10.0 ohne diese Variable: Dort ist
 * das ganze Fenster `position: fixed`, der Knopf also von selbst mittig. Hier
 * traegt das Fenster Platz im Fluss (`flex` in `.schale`) und schiebt den
 * Inhalt zur Seite, statt ihn zu ueberdecken — das bleibt so, nur der Knopf
 * loest sich. */
.ui-interna-knopf {
  position: fixed; right: var(--interna-breite, 0px); top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 22px; height: 104px; padding: 0;
  display: grid; place-items: center;
  background: var(--flaeche, #fff); color: var(--text-3, #8A9BAD);
  border: 1px solid var(--linie, #DDE4EC); border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 10px; line-height: 1;
  cursor: pointer;
}
.ui-interna-knopf:hover { color: var(--marke, #009DC4); border-color: var(--marke, #009DC4); }

/* Die Beschriftung kommt aus dem Stilblatt und nicht aus dem HTML: Sie ist
   Gestaltung, und ein Modul, das sie selbst hineinschreibt, schreibt sie beim
   zweiten Modul anders. */
.ui-interna-knopf::after {
  content: "INTERN";
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
}
.ui-interna:not(.zu) .ui-interna-knopf::after { content: "ZU"; }
/* Farbe des Kopfes, den er oeffnet — damit der Zusammenhang ohne Text da ist. */
.ui-interna.zu .ui-interna-knopf {
  background: var(--warn-zart, #FFF8E6);
  color: var(--warn-text, #9A6C00);
  border-color: var(--warn-text, #9A6C00);
}

/* Der Kopf trägt den Hinweis, dass hier Internes steht. Er ist keine Zierde:
   Wer den Bildschirm teilt, soll auf einen Blick sehen, dass dieser Bereich
   nicht für den Mandanten gedacht ist. */
.ui-interna-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie, #DDE4EC);
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--warn-text, #9A6C00);
  background: var(--warn-zart, #FFF8E6);
}
.ui-interna-rumpf { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }

/* ═══════════════════════════ Die Werkzeugleiste einer Zeichenfläche (2.19.0) ═
 *
 * Michael am 20.08.2026: „Ich will auf jeden Fall bei der Bedienung eine
 * Einheitlichkeit … es nervt total Dir das dreimal zu erzählen und Du machst es
 * jedes mal anders."
 *
 * Die Maße sind die aus dem Prozess-Editor (32 Pixel, SVG mit `currentColor`),
 * weil `modellierung` sie von dort abgeschrieben hat — damit die Leisten nicht
 * wie zwei Anwendungen aussehen. Gebaut werden die Knöpfe von
 * `werkzeugleiste.js`; hier steht nur, wie sie aussehen.
 *
 * `.werkzeugleiste` weiter oben in dieser Datei ist die WAAGERECHTE Leiste mit
 * Rand unten. Ein Editor braucht das Gegenteil: senkrecht, schwebend, mit
 * Rahmen und Schatten. Dafür `.ui-wz-schwebend` — und die alte Klasse bleibt
 * unberührt, damit nichts umkippt, was sie heute benutzt.
 */
.ui-wz-schwebend {
  position: absolute; z-index: 44;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px; border-radius: 8px;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie, #DDE4EC);
  box-shadow: var(--schatten, 0 2px 8px rgba(26, 35, 50, .12));
}
.ui-wz-schwebend .ui-wz-griff {
  cursor: move; text-align: center; color: var(--text-3, #8A9BAD);
  font-size: 12px; line-height: 1; padding: 2px 0 4px;
  user-select: none;
}

/* Zweispaltig (Michael, 20.08.2026: „mache die Werkzeugleiste bitte
   2spaltig"). Ein Raster und keine umbrechende Reihe: Bei drei Knöpfen in einer
   Gruppe steht der dritte sonst allein und die Leiste wackelt in der Breite. */
.ui-wz-schwebend .ui-wz-gruppe {
  display: grid; grid-template-columns: repeat(2, 32px); gap: 3px;
}
.ui-wz-schwebend .ui-wz-trenner {
  height: 1px; background: var(--linie, #DDE4EC); margin: 2px 0;
}
/* Waagerecht eingebaut: dieselben Knöpfe, Gruppen nebeneinander. */
.ui-wz-gruppe { display: flex; gap: 3px; }
.ui-wz-trenner { width: 1px; background: var(--linie, #DDE4EC); margin: 0 4px; }

.ui-wz {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--weiss, #fff); color: var(--text-2, #55657A);
  border: 1px solid var(--linie, #DDE4EC); border-radius: 6px;
}
.ui-wz:hover:not(:disabled) {
  border-color: var(--marke, #009DC4); color: var(--marke-dunkel, #00728F);
}
.ui-wz:disabled { opacity: .45; cursor: default; }
.ui-wz.aktiv {
  background: var(--marke, #009DC4); border-color: var(--marke, #009DC4);
  color: var(--weiss, #fff);
}
.ui-wz svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Die gefüllten Formen in „Anordnen" und „Zuordnen": Ohne diese Zeile wären es
   leere Rahmen, und das Zeichen verliert seinen Sinn. Am Datenmerkmal und nicht
   an einer Kennung — `#wzAnordnen` gilt nur in einem Modul. */
.ui-wz[data-werkzeug="anordnen"] svg rect,
.ui-wz[data-werkzeug="systeme"] svg rect { fill: currentColor; stroke: none; }

/* ── Die Anschlusspunkte (2.19.0) ───────────────────────────────────────────
 *
 * Je Punkt ZWEI Kreise: ein großer durchsichtiger, der die Klicks nimmt, und
 * darüber der kleine sichtbare. Ein 4,5 Pixel großer Kreis ist mit der Maus
 * nicht zu treffen — und die Reihenfolge muss so sein, weil `:hover` in CSS nur
 * nach vorn wirkt (`+`). */
.ui-ankertreffer { fill: transparent; cursor: crosshair; }
.ui-ankertreffer:hover + .ui-ankerpunkt {
  fill: var(--marke, #009DC4); r: 6;
}
.ui-ankerpunkt {
  fill: var(--weiss, #fff); stroke: var(--marke, #009DC4); stroke-width: 1.5;
  pointer-events: none;
}
.ui-ankerpunkt.gewaehlt { fill: var(--marke, #009DC4); }

/* ── Die Bedienung der Linienenden (ui-tokens 2.30.0) ──────────────────────
 *
 * Gehoert zu `linienenden.js`. Die Farben stammen aus `systemmatrix.css`, wo
 * diese Bedienung zuerst entstanden ist -- sie wandert hierher, damit alle drei
 * Editoren dieselbe bekommen.
 *
 * **Michael am 21.08.2026:** „Es ist doch fuer den User voellig verwirrend,
 * wenn er Linien im Prozess-Editor anders zieht als im Systemmatrix-Editor." */

/* Der Punkt, auf dem das gezogene Ende gerade landen wuerde. Er leuchtet
   ANDERS als „gewaehlt" -- sonst saehe man beim Ziehen zwei gleich aussehende
   Punkte und wuesste nicht, welcher der neue ist. */
/* Die Vorschau, während eine neue Linie von einem Punkt aus gezogen wird
   (ui-tokens 2.35.0). Michael am 23.08.2026: „die Linie soll doch von Endpunkt
   zu Endpunkt."

   Gestrichelt und in der Markenfarbe: Sie ist noch keine Linie, sondern eine
   Absicht. Das Loslassen entscheidet, und bis dahin soll nichts so aussehen,
   als stünde es schon fest. `pointer-events: none`, damit die Vorschau nicht
   ihren eigenen Zielpunkt verdeckt. */
.ui-neuelinie {
  stroke: var(--marke, #009DC4); stroke-width: 2; stroke-dasharray: 5 4;
  fill: none; pointer-events: none;
}

.ui-ankerpunkt.trifft {
  fill: var(--marke-dunkel, #007A99);
  stroke: var(--weiss, #fff); stroke-width: 2;
  r: 6;
}

/* Der Griff an einem Linienende. Groesser als ein Ankerpunkt, weil er das
   genauere Ziel ist und obenauf liegt. */
.ui-linienende {
  fill: var(--weiss, #fff);
  stroke: var(--marke, #009DC4); stroke-width: 2;
  cursor: grab;
}
.ui-linienende:hover { fill: var(--marke, #009DC4); }
.ui-linienende:active { cursor: grabbing; }
.ui-linienende:focus-visible {
  outline: 2px solid var(--marke-dunkel, #007A99); outline-offset: 2px;
}

/* Das Stueck zwischen zwei Knicken. Unsichtbar breit, damit man es trifft --
   eine 1,4 Pixel dicke Linie zu greifen ist mit der Maus Gluecksache. */
.ui-segmentgriff {
  stroke: var(--marke, #009DC4); stroke-width: 10; opacity: 0;
}
.ui-segmentgriff:hover { opacity: .35; }
.ui-segmentgriff.waagrecht { cursor: ns-resize; }
.ui-segmentgriff.senkrecht { cursor: ew-resize; }

/* Der Text auf der Linie laesst sich schieben -- der Zeiger sagt es. */
.ui-linientext-griff { cursor: grab; }
.ui-linientext-griff:active { cursor: grabbing; }

/* ══════════════════════ Bildschau (ui-tokens 2.20.0) ═════════════════════════
 *
 * Zu `shared/ui-tokens/bildschau.js`. Michael am 20.08.2026: „Die hochgeladenen
 * Daten so mini dargestellt, dass man nix erkennen kann - auch nicht zoombar."
 *
 * Die Fassung ist die aus `data-vision/js/strategie.js` (`dv-vollbild`) -
 * dieselben Zahlen, damit sich dort nichts aendert, wenn die Aufrufstelle
 * umgestellt wird. Zwei Ergaenzungen: ein Name unten und eine Meldung, wenn das
 * Bild nicht laedt.
 *
 * `position: fixed` in der LANGFORM. Die Kurzform `inset: 0` stand in der
 * Ablegezone von Data Vision und hat sich dort in zwei Browsern verschieden
 * verhalten - bei einer Ueberlagerung waere derselbe Ausfall ein Bild, das
 * irgendwo im Fluss liegt und die halbe Maske verschiebt.
 */
.ui-bildschau {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 24, 32, .88);
  cursor: zoom-out;
}
.ui-bildschau img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r, 6px); background: var(--weiss, #fff);
}
/* 2.72.0: Buehne fuer den stufenlosen Zoom — das Bild traegt `transform`,
   die Buehne schneidet nichts ab (der Schleier ist der Rahmen). */
.ui-bildschau-buehne {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  cursor: zoom-in; overflow: hidden;
}
/* 2.73.3: echte Groesse statt transform — das SVG wird bei jeder Stufe neu gezeichnet. */
.ui-bildschau-buehne img {
  position: absolute; max-width: none; max-height: none;
  cursor: zoom-in; user-select: none;
}
.ui-bildschau-buehne.ist-gezoomt img { cursor: grab; }
.ui-bildschau-buehne.ist-gezoomt img:active { cursor: grabbing; }
.ui-bildschau-stand {
  position: absolute; top: .9rem; left: 1rem; font-size: 12.5px; font-weight: 600;
  color: var(--text, #1B2733); background: rgba(255, 255, 255, .9);
  border-radius: var(--r, 6px); padding: .25rem .6rem; pointer-events: none;
}
.ui-bildschau-stand:empty { display: none; }
.ui-bildschau-leiste {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.ui-bildschau-knopf {
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; min-width: 2.2rem;
  background: rgba(255, 255, 255, .9); color: var(--text, #1B2733);
  border: 0; border-radius: var(--r, 6px); padding: .35rem .6rem;
}
.ui-bildschau-knopf:hover { background: #fff; }
.ui-bildschau-hilfe {
  position: absolute; top: .95rem; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: rgba(255, 255, 255, .7); pointer-events: none;
}
.ui-bildschau-zu {
  position: absolute; top: .8rem; right: 1rem;
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--text, #1B2733);
  border: 0; border-radius: var(--r, 6px); padding: .25rem .6rem;
}
.ui-bildschau-name {
  position: absolute; bottom: .9rem; left: 0; right: 0;
  text-align: center; font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
}
.ui-bildschau-fehler {
  margin: 0; padding: 1.2rem 1.6rem;
  border-radius: var(--r, 6px);
  background: var(--weiss, #fff); color: var(--text-2, #4A5A6A);
  font-size: 13.5px;
}

/* ══════════════════════════════════════════ Statusmarke (`ui-tokens` 2.21.0)
 *
 * Woertlich `.standmarke` aus `geschaeftsprozesse.css` (dort seit 0.29.0), damit
 * der Umstieg dieses Moduls eine reine Namensaenderung bleibt und nicht wie eine
 * Gestaltungsaenderung aussieht.
 *
 * Die FARBE steht nicht hier: Sie kommt aus den Stammdaten und liegt als
 * Inline-Stil am Element (`statusmarke.js`). Eine CSS-Regel dafuer waere zur
 * Bauzeit noch nicht bekannt. */
.ui-standmarke {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--linie, #c9d2d8);
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
/* Als Knopf, sobald man den Stand aendern darf. Ein `button` bringt Rahmen,
   Schrift und Innenabstand des Browsers mit — ohne diese Zeilen saehe dieselbe
   Marke als Knopf anders aus als als Beschriftung, und dann waere „ich darf hier
   klicken" daran zu erkennen, dass die Marke die Form wechselt. */
button.ui-standmarke {
  cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.5;
}
button.ui-standmarke:hover { filter: brightness(1.08); }
button.ui-standmarke:focus-visible {
  outline: 2px solid var(--marke, #009DC4); outline-offset: 2px;
}
/* Der Aufklapper an der Marke (`Statusmarke.waehler`, 2.64.0): das Menue aus
   `.ui-menue`, je Eintrag ein Farbpunkt in der Farbe des Stands. */
.ui-standmarke-menue { min-width: 160px; }

/* ══════════════════════════ Archivfilter (2.65.0, 12.10.2026) ═════════════
   Der Haken „Archivierte Elemente einblenden" — `archivfilter.js`. Klein und
   ruhig, neben Suche oder Listenkopf; in schmalen Spalten als eigene Zeile. */
.ui-archivfilter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2, #4A5E72);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.ui-archivfilter input { margin: 0; cursor: pointer; }
.ui-archivfilter-zahl { color: var(--text-3, #8A9BAD); }
.ui-archivfilter.ui-archivfilter-zeile { display: flex; padding: 4px 10px 6px; font-size: 11px; }
.ui-standmarke-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--linie-2, #C4D0DC); }

/* ═══════════════════════════ Klappgriff links (`ui-tokens` 2.22.0)
 *
 * **Michael am 20.08.2026, mit Bildschirmfoto:** *„Kannst Du bitte den Auf- und
 * Zuklapp-Pfeil in blau oder grün hinterlegen - sonst sieht den keiner. Rechts
 * ist ja schon gelb - und das ist gut."*
 *
 * Also derselbe Griff wie `.ui-interna-knopf` am rechten Rand, gespiegelt und in
 * der Markenfarbe. Nicht nur eine Hintergrundfarbe an den alten 12 x 44 Pixel:
 * Der Griff rechts ist 22 x 104 gross und traegt ein Wort statt eines Pfeils —
 * und den findet Michael. Ein Pfeil, der niemandem auffaellt, wird durch einen
 * farbigen Pfeil, der niemandem auffaellt, nicht besser.
 *
 * ── Warum das Wort aus dem Markup kommt und nicht aus dem Stilblatt
 *
 * Bei `.ui-interna-knopf` steht es hier („INTERN"), mit der Begruendung: Es ist
 * Gestaltung, und ein Modul, das es selbst hineinschreibt, schreibt es beim
 * zweiten Modul anders. Fuer diesen Griff gilt das NICHT — er klappt in der
 * Systemmatrix die Matrizenliste auf und in `prozesse` die Diagrammliste. Der
 * Name ist die Sache des Moduls, das Aussehen die dieses Stilblatts. Deshalb
 * `attr(data-griff)`.
 *
 * ── Warum `aria-expanded` den Text steuert
 *
 * Der Griff sagt, was ein Klick TUT, nicht wo man ist: offen -> „ZU", zu -> der
 * Name. Genau wie rechts. Gesteuert wird das vom Merkmal, das die Bedienhilfe
 * ohnehin braucht — statt von einer zweiten Klasse, die daneben laufen kann.
 * Wer `aria-expanded` vergisst, sieht sofort den falschen Text. */
.ui-klappgriff {
  position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  z-index: 40;
  width: 22px; height: 104px; padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
  background: var(--marke-zart, #E4F4FA);
  color: var(--marke, #009DC4);
  border: 1px solid var(--marke, #009DC4); border-left: none;
  border-radius: 0 4px 4px 0;
  font-size: 10px; line-height: 1;
}
.ui-klappgriff:hover { background: var(--marke, #009DC4); color: var(--weiss, #fff); }
.ui-klappgriff:focus-visible {
  outline: 2px solid var(--marke-dunkel, #007A99); outline-offset: 2px;
}
.ui-klappgriff::after {
  content: attr(data-griff);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
}
.ui-klappgriff[aria-expanded="true"]::after { content: "ZU"; }

/* ══════════ Blattreiter unten, wie in Excel ═══════════════════════════════
 *
 * **Michael, 20.08.2026 (Geschaeftsprozesse):** „was haeltst du von 3 Reitern
 * fuer die Ansichten - unten wie in Excel anklickbar".
 * **Michael, 21.08.2026 (Data Vision):** „unterhalb der drei Kacheln zwei
 * Reiter anzubringen".
 *
 * Die Form traegt die Aussage: **Ein Blattreiter sitzt AM Inhalt und sagt „dies
 * ist eine Sicht auf dasselbe."** Eine Reiterzeile oben waere eine Leiste unter
 * vielen — und in Data Vision die zweite Navigation direkt unter der blauen.
 *
 * Die Linie oben durchgehend, nur der aktive Reiter unterbricht sie — genau das
 * macht aus einem Kasten ein Blatt, das nach vorne kommt.
 *
 * Zuerst gebaut in `geschaeftsprozesse` (0.75.0), hier ab ui-tokens 2.28.0 als
 * zweiter Nutzer. Die Regeln sind Zeichen fuer Zeichen dieselben, nur mit dem
 * `ui-`-Vorsatz dieser Datei. **`geschaeftsprozesse` benutzt weiter seine
 * eigene Fassung** — es laedt `bausteine.css` gar nicht, und ein Umstellen
 * waere eine sichtbare Aenderung in einem Modul, die niemand bestellt hat
 * (dieselbe Begruendung wie bei Aufgabe 25/`fenster.js`). Gehoert in denselben
 * Zug wie jene. */
.ui-blattreiter {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 0 0.5rem;
  border-top: 1px solid var(--linie);
}
.ui-blattreiter-knopf {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 16px; cursor: pointer;
  color: var(--text-2); background: var(--flaeche-2, #f2f6f9);
  border: 1px solid var(--linie); border-top: none;
  border-radius: 0 0 6px 6px;
  margin-top: -1px;
  display: flex; align-items: center; gap: 6px;
}
.ui-blattreiter-knopf:hover { color: var(--text); background: var(--flaeche-3, #e8eef3); }

/* Der aktive Reiter ist weiss und schneidet die Linie oben weg — er gehoert zum
   Blatt darueber, die anderen liegen dahinter. */
.ui-blattreiter-knopf.aktiv {
  color: var(--marke, #009DC4); background: var(--weiss, #fff);
  border-top: 2px solid var(--weiss, #fff);
  margin-top: -2px;
  padding-bottom: 7px;
}
.ui-blattreiter-knopf:focus-visible {
  outline: 2px solid var(--marke, #009DC4); outline-offset: -2px;
}

/* Die Zahl am Reiter — NUR wenn es etwas zu melden gibt. Ohne sie waere der
   Inhalt hinter dem Reiter unsichtbar; mit ihr an jedem Reiter markierte sie
   nichts. */
.ui-blattreiter-zahl {
  font-size: 11px; font-weight: 700; color: var(--weiss, #fff);
  background: #EF9F27; border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════ Massenleiste (2.41.0, 18.09.2026) ══
 *
 * Die schwebende Leiste fuer Massenoperationen: unten in der Mitte, erscheint
 * erst, wenn etwas gewaehlt ist. Zahl der gewaehlten Zeilen, EIN Auswahlfeld
 * mit den Aktionen (Michael am 31.07.2026: „Diese 4 Aktionen koennen doch in
 * ein Pull-Down-Menue" — fuer alle Massenoperationen), „Auswahl aufheben".
 *
 * Bis heute stand sie zweimal: dunkel in Geschaeftsprozesse (`.massenleiste`),
 * weiss im Datenkatalog (`.aktionsleiste`). Michael, 18.09.2026: „mal wieder
 * die einheitliche Optik — wir hatten das Aktions-Menue fuer Massenoperationen
 * immer am unteren Bildschirm schwebend." Hier die eine Fassung; die Module
 * stellen um, wenn sie angefasst werden.
 *
 *     <div class="ui-massenleiste">
 *       <span class="ui-massen-zahl">3 Zeilen gewaehlt</span>
 *       <select class="ui-massen-menue">…</select>
 *       <button class="ui-knopf ui-knopf-klein ui-massen-still">Auswahl aufheben</button>
 *     </div>
 *
 * `position: fixed` wirkt im iframe auf dessen Sichtfeld, in der Shell auf
 * das Fenster — beides gewollt. */
.ui-massenleiste {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--dunkel, #22303a);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  font-size: 13px;
}
.ui-massenleiste .ui-massen-zahl { padding: 0 6px; white-space: nowrap; font-weight: 600; }
.ui-massenleiste .ui-massen-hinweis { color: rgba(255, 255, 255, .7); white-space: nowrap; }
.ui-massenleiste .ui-massen-menue {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ui-massenleiste .ui-massen-menue:hover { background: rgba(255, 255, 255, .24); }
.ui-massenleiste .ui-massen-menue option { color: #22303a; background: #fff; }
.ui-massenleiste .ui-knopf { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; }
.ui-massenleiste .ui-knopf:hover { background: rgba(255, 255, 255, .26); }
.ui-massenleiste .ui-knopf.ui-massen-still { background: transparent; opacity: .75; }
.ui-massenleiste .ui-knopf.ui-knopf-gefahr { background: #a33; }


/* ══════════════════════════════════════ Spaltenwahl (2.42.0, 18.09.2026) ══
 *
 * Die Liste aus `spaltenwahl.js`: eine Zeile je Spalte, Griff, Haken, Name;
 * Ziehen ordnet, eine Linie ueber/unter der Zielzeile zeigt die Stelle. Als
 * `.ui-spaltenwahl-klapp` ein Klappfeld rechts unter dem Knopf „Spalten"
 * (Geschaeftsprozesse); im Datenkatalog steckt dieselbe Liste in einem
 * schwebenden Panel. */
.ui-spaltenwahl-huelle { position: relative; }
.ui-spaltenwahl { padding: 8px; min-width: 240px; }
.ui-spaltenwahl-klapp {
  position: absolute; right: 0; top: 2px; z-index: 40;
  background: var(--weiss, #fff);
  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));
  max-height: 60vh; overflow-y: auto;
}
.ui-spaltenwahl-hinweis { font-size: 11px; color: var(--text-3, #7A8A99); padding: 2px 8px 6px; }
.ui-spaltenwahl-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-klein, 4px);
  font-size: 12.5px; color: var(--text-2, #5A6B7D);
  cursor: grab; border-top: 2px solid transparent; border-bottom: 2px solid transparent;
}
.ui-spaltenwahl-zeile:hover { background: var(--flaeche-2, #f2f6f9); }
.ui-spaltenwahl-zeile:active { cursor: grabbing; }
.ui-spaltenwahl-zeile.gezogen { opacity: .35; }
.ui-spaltenwahl-zeile.davor { border-top-color: var(--marke, #009DC4); }
.ui-spaltenwahl-zeile.dahinter { border-bottom-color: var(--marke, #009DC4); }
.ui-spaltenwahl-zeile input[type="checkbox"] { margin: 0; cursor: pointer; }
/* Der Griff ist ein Griff: breit genug, um ihn zu sehen und zu treffen (mit
   letter-spacing -3px war er im Pruefstand null Pixel breit, 17.09.2026). */
.ui-spaltenwahl-griff {
  color: var(--text-3, #7A8A99); user-select: none; display: inline-block;
  min-width: 12px; text-align: center; letter-spacing: -1px; font-size: 13px;
}
.ui-spaltenwahl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zweiter Haken „Export" (2.46.0): „Zeigen" und „Export" im Kopf stehen je
   in einer Zelle fester Breite, die Haken darunter in derselben Breite. */
.ui-spaltenwahl-spaltenkopf {
  display: flex; align-items: flex-end; gap: 8px; padding: 0 8px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-3, #7A8A99);
}
.ui-spaltenwahl-kopfhaken, .ui-spaltenwahl-hakenzelle {
  flex: 0 0 44px; width: 44px; display: flex; justify-content: center;
}
.ui-spaltenwahl-kopfhaken { white-space: nowrap; }
.ui-spaltenwahl-marke {
  font-size: 9.5px; color: var(--marke-dunkel, #007A99); background: var(--marke-hell, #E6F5F9);
  border-radius: 9px; padding: 1px 6px;
}
.ui-spaltenwahl-zurueck {
  margin: 6px 8px 2px; font: inherit; font-size: 11.5px; color: var(--text-3, #7A8A99);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
}

/* „Rueckgaengig" in der Massenleiste (Datenkatalog): orange abgesetzt, weil es
   die einzige Handlung ist, die etwas zuruecknimmt. */
.ui-massenleiste .ui-knopf.ui-massen-rueckgaengig { border: 1px solid #EF9F27; color: #FFD27A; background: transparent; }
.ui-massenleiste .ui-knopf.ui-massen-rueckgaengig:hover { background: #EF9F27; color: #22303a; }


/* ══════════ Das schwebende Filterpanel (2.44.0) ════════════════════════════
 *
 * Aussehen und Maße des Filterpanels aus dem Lineage-Editor
 * (`modules/datenkatalog/frontend/lineage.css`, `.lineage-filterpanel` und
 * `.lineage-filter-*`), hierher gehoben, als es zum zweiten Mal gebraucht
 * wurde — Michael am 19.09.2026: „warum immer andere Filter-Panels?"
 *
 * In sich vollständig: Es hängt NICHT an `.fenster` des Datenkatalogs. Dort
 * kam die halbe Gestalt aus einer Klasse, die für das große Attributfenster
 * gemacht ist, und dreimal wurde an der falschen Stelle gesucht (die Geschichte
 * steht in `lineage.css`). Deshalb hier ausdrücklich: `right`/`bottom` frei,
 * keine Mindestgröße, `height: auto`.
 *
 * Die Lage setzt `Fenster.machSchwebend` (`left`/`top` als Inline-Stil). */
.ui-filterpanel {
  position: fixed; right: auto; bottom: auto;
  width: 232px; min-width: 0; min-height: 0; height: auto; max-height: 60vh;
  max-width: calc(100vw - 40px);
  display: flex; flex-direction: column;
  resize: both; overflow: hidden;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie, #DDE4EC);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(27, 42, 53, .17);
  font-size: 12px; z-index: 270;
  user-select: none;
}
.ui-filterpanel.zieht, .ui-filterpanel.ui-zieht { opacity: .92; }
.ui-filterpanel-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; flex: none;
  border-bottom: 1px solid var(--linie, #DDE4EC);
  cursor: move;
}
.ui-filterpanel.eingeklappt .ui-filterpanel-kopf { border-bottom: none; }
.ui-filterpanel-titel {
  margin: 0; flex: 1;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3, #8A9BAD);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* „Alle" ist ein Textknopf, kein Knopf mit Rahmen: Ein umrandeter Knopf im Kopf
   wiegt schwerer als die Liste darunter, um die es geht. */
.ui-filterpanel-alle {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-3, #8A9BAD); cursor: pointer;
}
.ui-filterpanel-alle:hover { color: var(--marke, #009DC4); }
.ui-filterpanel-knopf {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-3, #8A9BAD); line-height: 1; padding: 0 2px;
}
.ui-filterpanel-knopf:hover { color: var(--text, #1A2332); }
.ui-filterpanel-klappen { font-size: 12px; }
.ui-filterpanel-zu { font-size: 20px; }
/* `flex` UND `min-height: 0`: Ohne das zweite schrumpft ein Flex-Kind nicht
   unter seine Inhaltshöhe — das Panel würde beim Kleinerziehen abgeschnitten
   statt zu rollen. */
.ui-filterpanel-inhalt {
  padding: 6px 8px 8px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
/* Eingeklappt bleibt nur der Kopf. `display: none` und nicht Höhe Null: Ein
   unsichtbarer Rumpf finge weiter Klicks ab, die der Fläche gehören. */
.ui-filterpanel.eingeklappt .ui-filterpanel-inhalt { display: none; }
.ui-filterpanel.eingeklappt { resize: none; height: auto !important; }
.ui-filterpanel-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 5px;
  font-size: 12px; color: var(--text, #1A2332);
  cursor: pointer; transition: background .12s, opacity .12s;
}
.ui-filterpanel-zeile:hover { background: var(--flaeche-2, #F5F8FA); }
.ui-filterpanel-zeile:focus-visible { outline: 2px solid var(--marke, #009DC4); outline-offset: -2px; }
.ui-filterpanel-zeile.ausgeblendet { opacity: .4; }
.ui-filterpanel-zeile.ausgeblendet .ui-filterpanel-name { text-decoration: line-through; }
.ui-filterpanel-tupfer {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  border: 1px solid rgba(0, 0, 0, .08);
}
.ui-filterpanel-tupfer.ohne-farbe { border-color: transparent; background: none; }
.ui-filterpanel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ══════════════════════════════════════ Linienwahl (2.49.0, 24.09.2026) ══
 * Bildknoepfe fuer Strichmuster, Staerke, Verlauf und Pfeilspitzen —
 * `linienwahl.js`. Aus dem Linienfenster der Systemmatrix gehoben. */
.ui-lw-titel {
  margin-top: 0.6rem; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3, #8A9BAD);
}
.ui-lw-arten { display: flex; gap: 0.3rem; margin-top: 0.25rem; }
.ui-lw-art {
  flex: 1; height: 26px; padding: 0; cursor: pointer;
  background: var(--weiss, #fff);
  border: 1px solid var(--linie, #DDE4EC); border-radius: 4px;
}
.ui-lw-art:hover { border-color: var(--marke, #009DC4); }
.ui-lw-art.aktiv { border-color: var(--marke, #009DC4); background: var(--marke-hell, #EAF6FA); }
.ui-lw-art svg { width: 100%; height: 100%; }
.ui-lw-art svg path[fill="none"] { stroke: var(--text-2, #55657A); stroke-width: 1.6; }
.ui-lw-art svg path:not([fill="none"]) { fill: var(--text-2, #55657A); }
.ui-lw-art.aktiv svg path[fill="none"] { stroke: var(--marke, #009DC4); }
.ui-lw-art.aktiv svg path:not([fill="none"]) { fill: var(--marke, #009DC4); }
.ui-lw-art svg line { stroke: var(--text-2, #55657A); stroke-width: 2; }
.ui-lw-art.aktiv svg line { stroke: var(--marke, #009DC4); }
/* Linientypen Ja / Nein (2.68.0): immer in ihrer Farbe, aktiv mit Rahmen. */
.ui-lw-art.ist-ja svg line, .ui-lw-art.ist-ja.aktiv svg line { stroke: var(--ja, #2E7D32); stroke-width: 2.4; }
.ui-lw-art.ist-nein svg line, .ui-lw-art.ist-nein.aktiv svg line { stroke: var(--nein, #B3261E); stroke-width: 2.4; }


/* ═══════════════════════════════════ Ziehsortierung (2.50.0, 29.09.2026) ══
 *
 * Zeilen einer Liste per Drag & Drop ordnen (`ziehsortierung.js`). Dieselbe
 * Gestalt wie die Spaltenwahl: Griff ⋮⋮, gezogene Zeile blass, Linie in
 * Markenfarbe ueber oder unter der Zielzeile. Bei Tabellenzeilen liegt die
 * Linie auf den Zellen — `tr` zeichnet im `border-collapse`-Modell keinen
 * `box-shadow`. */
.ui-ziehgriff {
  color: var(--text-3, #7A8A99); user-select: none; display: inline-block;
  min-width: 12px; text-align: center; letter-spacing: -1px; font-size: 13px;
  cursor: grab; padding: 4px 2px;
}
.ui-ziehgriff:active { cursor: grabbing; }
.ui-ziehzeile.gezogen { opacity: .35; }

/* ══════════════════ Mitwachsend (`ui-tokens` 2.51.0, 29.09.2026) ═══════════
 * Zu `shared/ui-tokens/mitwachsend.js`: Das Feld ist nie kleiner als sein
 * Inhalt, also braucht es weder Rollbalken noch Ziehgriff. */
textarea.ui-mitwachsend { overflow: hidden; resize: none; }
.ui-ziehzeile.davor:not(tr) { box-shadow: inset 0 2px 0 var(--marke, #009DC4); }
.ui-ziehzeile.dahinter:not(tr) { box-shadow: inset 0 -2px 0 var(--marke, #009DC4); }
tr.ui-ziehzeile.davor > td, tr.ui-ziehzeile.davor > th { box-shadow: inset 0 2px 0 var(--marke, #009DC4); }
tr.ui-ziehzeile.dahinter > td, tr.ui-ziehzeile.dahinter > th { box-shadow: inset 0 -2px 0 var(--marke, #009DC4); }
/* Ein Feld, auf dem gerade „hinten anhaengen" moeglich ist (leere Liste,
   anderer Tag). */
.ui-ziehziel { outline: 2px dashed var(--marke, #009DC4); outline-offset: 2px; border-radius: var(--radius-klein, 4px); }
/* Zeigermodus (2.56.0): die Einfuegelinie als feste Leiste ueber der Seite —
   so zeichnet sie auch zwischen SVG-Zeilen, die keinen Schatten kennen. */
.ui-ziehlinie {
  position: fixed; height: 3px; margin-top: -1px; z-index: 10000;
  background: var(--marke, #009DC4); border-radius: 2px; pointer-events: none;
}


/* ═══════════════════════ Tabelle (`ui-tokens` 2.52.0, 30.09.2026) ══════════
 *
 * Zu `shared/ui-tokens/tabelle.js`: Kopfsortierung, Spaltenbreiten ziehen,
 * Spaltenwahl. Die Gestalt der Zellen (Schrift, Linien, Abstände) bleibt beim
 * Modul — hier steht nur, was die Maschine selbst dazustellt: der Sortierknopf
 * im Kopf, der Griff am rechten Rand und der Rahmen, der waagerecht rollt,
 * wenn gezogene Spalten breiter sind als die Karte. */
.ui-tabelle-rahmen { overflow-x: auto; max-width: 100%; }
/* Auswahlspalte (2.74.0) */
.ui-tabelle th.ui-tabelle-wahl, .ui-tabelle td.ui-tabelle-wahl { width: 34px; text-align: center; cursor: pointer; padding-left: 4px; padding-right: 4px; }
.ui-tabelle .ui-tabelle-wahl input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.ui-tabelle tr.ui-tabelle-gewaehlt > td { background: var(--marke-hell, #E5F6FB); }
.ui-tabelle { table-layout: fixed; }
.ui-tabelle th { position: relative; }
.ui-tabelle.zieht-gerade, .ui-tabelle.zieht-gerade * { cursor: col-resize !important; user-select: none; }

/* Der Kopf ist ein Knopf, sieht aber aus wie der Kopf: Schrift, Farbe und
   Ausrichtung erbt er vom `th` des Moduls. */
.ui-tabelle-sortknopf {
  all: unset; display: inline-flex; align-items: baseline; gap: 5px;
  cursor: pointer; max-width: 100%; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.ui-tabelle-sortknopf:focus-visible { outline: 2px solid var(--marke, #009DC4); outline-offset: 2px; border-radius: 3px; }
.ui-tabelle-sortzeichen { color: var(--text-3, #7A8A99); font-size: 10px; flex: none; }
.ui-tabelle-sortiert .ui-tabelle-sortknopf { color: var(--marke-dunkel, #007A99); }
.ui-tabelle-sortiert .ui-tabelle-sortzeichen { color: var(--marke, #009DC4); }

/* Der Griff: unsichtbar bis zur Berührung, dann eine Linie in Markenfarbe.
   7 Pixel breit — schmal genug, um den Kopftext nicht zu verdecken, breit
   genug, um ihn mit der Maus zu treffen. */
.ui-tabelle-griff {
  position: absolute; top: 0; right: -4px; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 2; touch-action: none;
}
.ui-tabelle-griff::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 1px;
  background: var(--linie-2, #C4D0DC);
}
.ui-tabelle-griff:hover::after, .ui-tabelle-griff.zieht::after, .ui-tabelle-griff:focus-visible::after {
  top: 0; bottom: 0; width: 2px; left: 2px; background: var(--marke, #009DC4);
}
.ui-tabelle-griff:focus-visible { outline: none; }
.ui-tabelle th:last-child .ui-tabelle-griff { right: 0; }

/* Knopf „Spalten" mit Klappfeld: die Hülle ist `position: relative` aus der
   Spaltenwahl; als Inline-Block steht sie in jeder Werkzeugzeile. */
.ui-tabelle-spaltenwahl { display: inline-block; }

/* ── Präsentation für den Beamer (2.57.0, `praesentation.js`) ──────────────
 *
 * Aus `data-vision.css` (`.ag-praes`, Agenda 1.3) hierher gehoben, als die
 * dritte Präsentation dazukam. Ein Schleier über der ganzen Anwendung
 * (`position: fixed` in der Langform, siehe `.ui-bildschau`), Schrift für den
 * Beamer 22 px. Die Folienform setzt 1280 × 720 und skaliert per `transform`
 * — gemessen und gesetzt wird immer in voller Größe. */
.ui-praes {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 8000;
  overflow: auto;
  background: var(--weiss, #fff);
  color: var(--text, #1A2332);
  font-size: 22px;
  line-height: 1.4;
}
.ui-praes-leiste {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  padding: 10px 24px;
  background: var(--flaeche-2, #F5F8FA);
  border-bottom: 1px solid var(--linie, #DDE4EC);
  font-size: 13px;
}
.ui-praes-leiste-titel { flex: 1; font-weight: 600; color: var(--text-2, #4A5E72); letter-spacing: .06em; text-transform: uppercase; }
.ui-praes-inhalt { max-width: 68rem; margin: 0 auto; padding: 2.2rem 3rem 4rem; }

.ui-praes-folien { display: flex; flex-direction: column; overflow: hidden; background: var(--flaeche-3, #EBF0F5); }
.ui-praes-folien .ui-praes-inhalt { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; position: relative; }
.ui-praes-blaettern { display: inline-flex; align-items: center; gap: .5rem; }
.ui-praes-pfeil::before { content: none !important; }
.ui-praes-pfeil { font-size: 16px; line-height: 1; min-width: 2.2rem; justify-content: center; }
.ui-praes-zaehler { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-2, #4A5E72); font-weight: 600; }
.ui-folien-buehne { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; cursor: pointer; outline: none; }
.ui-folien-rahmen {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  background: var(--weiss, #fff);
  box-shadow: var(--schatten-gross, 0 4px 20px rgba(0,0,0,.18));
}
/* Die Folie selbst. Kerning und Ligaturen aus: `pdfseiten.js` setzt jedes Wort
   mit den Vorschubbreiten der Schrift ab — so stimmen Bildschirm und PDF. */
.ui-folie {
  position: relative;
  width: 1280px; height: 720px;
  overflow: hidden;
  background: var(--weiss, #fff);
  color: var(--text, #1A2332);
  font-family: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
  overflow-wrap: anywhere;
  text-rendering: geometricPrecision;
}
.ui-folie[hidden] { display: none; }
.ui-folien-werkbank { position: fixed; left: -30000px; top: 0; width: 1280px; pointer-events: none; }

@media print {
  body > *:not(.ui-praes) { display: none !important; }
  .ui-praes { position: static; overflow: visible; font-size: 15px; }
  .ui-praes-leiste { display: none; }
  .ui-praes-inhalt { max-width: none; padding: 0; }
}