:root {
  color-scheme: light dark;

  --font-ueberschrift: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", Consolas, "SF Mono", monospace;
  --schrift-display: 28px;
  --schrift-h1: 22px;
  --schrift-h2: 17px;
  --schrift-h3: 14px;
  --schrift-koerper: 14px;
  --schrift-daten: 13px;
  --schrift-klein: 12px;
  --schrift-label: 11px;
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --radius-klein: 4px;
  --radius-panel: 8px;
  --radius-rund: 999px;

  --flaeche-seite: #F2F5F6;
  --flaeche-panel: #FFFFFF;
  --flaeche-panel-erhoben: #FFFFFF;
  --flaeche-eingelassen: #E9EEF0;
  --flaeche-hover: #EDF2F4;
  --flaeche-aktiv: #DEEAEE;
  --flaeche-eingabe: #FFFFFF;
  --rahmen: #D7DFE3;
  --rahmen-stark: #AFBEC5;
  --linie: #E3E7E9;
  --text-primaer: #1C2B33;
  --text-sekundaer: #5C6B74;
  --text-gedimmt: #8A99A1;
  --text-invers: #FFFFFF;
  --schatten-panel: 0 1px 2px rgb(28 43 51 / 0.06);
  --schatten-overlay: 0 8px 28px rgb(28 43 51 / 0.18);
  --akzent: #176578;
  --akzent-hover: #124F5E;
  --akzent-flaeche: #E3EEF1;
  --fokus-ring: #176578;
  --status-gut-farbe: #2E7D46;
  --status-gut-flaeche: #E2F1E6;
  --status-gut-text: #1F5A32;
  --status-warnung-farbe: #B26A00;
  --status-warnung-flaeche: #F7EBD7;
  --status-warnung-text: #7A4A02;
  --status-kritisch-farbe: #B3372E;
  --status-kritisch-flaeche: #F8E4E2;
  --status-kritisch-text: #8A2A23;
  --status-blockiert-farbe: #7E2B3B;
  --status-blockiert-flaeche: #F3E0E4;
  --status-blockiert-text: #5F202C;
  --status-laufend-farbe: #33648F;
  --status-laufend-flaeche: #E4EDF4;
  --status-laufend-text: #264C6D;
  --status-neutral-farbe: #5C6B74;
  --status-neutral-flaeche: #EBEEF0;
  --status-neutral-text: #46535B;
  --prio-hoch-farbe: #B3372E;
  --prio-hoch-rahmen: #D9A19C;
  --prio-mittel-farbe: #B26A00;
  --prio-mittel-rahmen: #DCC29B;
  --prio-niedrig-farbe: #5C6B74;
  --prio-niedrig-rahmen: #C3CDD2;
  --flaeche-sidebar: #16232B;
  --sidebar-text: #E8EEF1;
  --sidebar-text-gedimmt: #93A6AF;
  --sidebar-akzent: #4FA3B8;
}
@media (prefers-color-scheme: dark) {
:root {

  --flaeche-seite: #0E1113;
  --flaeche-panel: #16191C;
  --flaeche-panel-erhoben: #1C2023;
  --flaeche-eingelassen: #0A0C0D;
  --flaeche-hover: #1E2226;
  --flaeche-aktiv: #242A2F;
  --flaeche-eingabe: #0F1214;
  --rahmen: #2A2F33;
  --rahmen-stark: #3A4045;
  --linie: #202427;
  --text-primaer: #EDEFF1;
  --text-sekundaer: #9AA3AA;
  --text-gedimmt: #62696F;
  --text-invers: #0E1113;
  --schatten-panel: 0 1px 2px rgb(0 0 0 / 0.5);
  --schatten-overlay: 0 12px 32px rgb(0 0 0 / 0.65);
  --akzent: #3FC1D6;
  --akzent-hover: #63D3E5;
  --akzent-flaeche: #12333A;
  --fokus-ring: #3FC1D6;
  --status-gut-farbe: #4ADE80;
  --status-gut-flaeche: #123322;
  --status-gut-text: #86EFAC;
  --status-warnung-farbe: #F5A524;
  --status-warnung-flaeche: #3A2A0D;
  --status-warnung-text: #FBC56D;
  --status-kritisch-farbe: #F0453A;
  --status-kritisch-flaeche: #3A1512;
  --status-kritisch-text: #F8A39C;
  --status-blockiert-farbe: #E0527A;
  --status-blockiert-flaeche: #33141F;
  --status-blockiert-text: #F0A0BB;
  --status-laufend-farbe: #5B9FE0;
  --status-laufend-flaeche: #132535;
  --status-laufend-text: #9BC4EE;
  --status-neutral-farbe: #8A929A;
  --status-neutral-flaeche: #1C2024;
  --status-neutral-text: #B4BAC0;
  --prio-hoch-farbe: #F0453A;
  --prio-hoch-rahmen: #6B2F2B;
  --prio-mittel-farbe: #F5A524;
  --prio-mittel-rahmen: #5C4420;
  --prio-niedrig-farbe: #8A929A;
  --prio-niedrig-rahmen: #383D41;
  --flaeche-sidebar: #0A0C0D;
  --sidebar-text: #EDEFF1;
  --sidebar-text-gedimmt: #7C848B;
  --sidebar-akzent: #3FC1D6;
}
}
:root[data-theme="dark"] {

  --flaeche-seite: #0E1113;
  --flaeche-panel: #16191C;
  --flaeche-panel-erhoben: #1C2023;
  --flaeche-eingelassen: #0A0C0D;
  --flaeche-hover: #1E2226;
  --flaeche-aktiv: #242A2F;
  --flaeche-eingabe: #0F1214;
  --rahmen: #2A2F33;
  --rahmen-stark: #3A4045;
  --linie: #202427;
  --text-primaer: #EDEFF1;
  --text-sekundaer: #9AA3AA;
  --text-gedimmt: #62696F;
  --text-invers: #0E1113;
  --schatten-panel: 0 1px 2px rgb(0 0 0 / 0.5);
  --schatten-overlay: 0 12px 32px rgb(0 0 0 / 0.65);
  --akzent: #3FC1D6;
  --akzent-hover: #63D3E5;
  --akzent-flaeche: #12333A;
  --fokus-ring: #3FC1D6;
  --status-gut-farbe: #4ADE80;
  --status-gut-flaeche: #123322;
  --status-gut-text: #86EFAC;
  --status-warnung-farbe: #F5A524;
  --status-warnung-flaeche: #3A2A0D;
  --status-warnung-text: #FBC56D;
  --status-kritisch-farbe: #F0453A;
  --status-kritisch-flaeche: #3A1512;
  --status-kritisch-text: #F8A39C;
  --status-blockiert-farbe: #E0527A;
  --status-blockiert-flaeche: #33141F;
  --status-blockiert-text: #F0A0BB;
  --status-laufend-farbe: #5B9FE0;
  --status-laufend-flaeche: #132535;
  --status-laufend-text: #9BC4EE;
  --status-neutral-farbe: #8A929A;
  --status-neutral-flaeche: #1C2024;
  --status-neutral-text: #B4BAC0;
  --prio-hoch-farbe: #F0453A;
  --prio-hoch-rahmen: #6B2F2B;
  --prio-mittel-farbe: #F5A524;
  --prio-mittel-rahmen: #5C4420;
  --prio-niedrig-farbe: #8A929A;
  --prio-niedrig-rahmen: #383D41;
  --flaeche-sidebar: #0A0C0D;
  --sidebar-text: #EDEFF1;
  --sidebar-text-gedimmt: #7C848B;
  --sidebar-akzent: #3FC1D6;
}
:root[data-theme="light"] {

  --flaeche-seite: #F2F5F6;
  --flaeche-panel: #FFFFFF;
  --flaeche-panel-erhoben: #FFFFFF;
  --flaeche-eingelassen: #E9EEF0;
  --flaeche-hover: #EDF2F4;
  --flaeche-aktiv: #DEEAEE;
  --flaeche-eingabe: #FFFFFF;
  --rahmen: #D7DFE3;
  --rahmen-stark: #AFBEC5;
  --linie: #E3E7E9;
  --text-primaer: #1C2B33;
  --text-sekundaer: #5C6B74;
  --text-gedimmt: #8A99A1;
  --text-invers: #FFFFFF;
  --schatten-panel: 0 1px 2px rgb(28 43 51 / 0.06);
  --schatten-overlay: 0 8px 28px rgb(28 43 51 / 0.18);
  --akzent: #176578;
  --akzent-hover: #124F5E;
  --akzent-flaeche: #E3EEF1;
  --fokus-ring: #176578;
  --status-gut-farbe: #2E7D46;
  --status-gut-flaeche: #E2F1E6;
  --status-gut-text: #1F5A32;
  --status-warnung-farbe: #B26A00;
  --status-warnung-flaeche: #F7EBD7;
  --status-warnung-text: #7A4A02;
  --status-kritisch-farbe: #B3372E;
  --status-kritisch-flaeche: #F8E4E2;
  --status-kritisch-text: #8A2A23;
  --status-blockiert-farbe: #7E2B3B;
  --status-blockiert-flaeche: #F3E0E4;
  --status-blockiert-text: #5F202C;
  --status-laufend-farbe: #33648F;
  --status-laufend-flaeche: #E4EDF4;
  --status-laufend-text: #264C6D;
  --status-neutral-farbe: #5C6B74;
  --status-neutral-flaeche: #EBEEF0;
  --status-neutral-text: #46535B;
  --prio-hoch-farbe: #B3372E;
  --prio-hoch-rahmen: #D9A19C;
  --prio-mittel-farbe: #B26A00;
  --prio-mittel-rahmen: #DCC29B;
  --prio-niedrig-farbe: #5C6B74;
  --prio-niedrig-rahmen: #C3CDD2;
  --flaeche-sidebar: #16232B;
  --sidebar-text: #E8EEF1;
  --sidebar-text-gedimmt: #93A6AF;
  --sidebar-akzent: #4FA3B8;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  font-size: var(--schrift-koerper);
  line-height: 1.5;
  background: var(--flaeche-seite);
  color: var(--text-primaer);
}
h1, h2, h3 { font-family: var(--font-ueberschrift); font-weight: 600; margin: 0; }
h1 { font-size: var(--schrift-h1); line-height: 1.25; letter-spacing: -0.005em; }
h2 { font-size: var(--schrift-h2); line-height: 1.3; }
h3 { font-size: var(--schrift-h3); line-height: 1.4; }
p { margin: 0 0 var(--raum-3) 0; }
a { color: var(--akzent); }
code, pre, .mono { font-family: var(--font-mono); font-size: var(--schrift-daten); }
:focus-visible { outline: 2px solid var(--fokus-ring); outline-offset: 2px; }
.schrift-display { font-family: var(--font-ueberschrift); font-size: var(--schrift-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.schrift-klein { font-size: var(--schrift-klein); line-height: 1.4; }
.schrift-label { font-size: var(--schrift-label); font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; }
.text-sekundaer { color: var(--text-sekundaer); }
.text-gedimmt { color: var(--text-gedimmt); }
.zahl { font-variant-numeric: tabular-nums; }

.app-rahmen { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--flaeche-sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}
.sidebar-kopf { padding: var(--raum-5) var(--raum-4) var(--raum-4) var(--raum-4); }
.wortmarke {
  font-family: var(--font-ueberschrift);
  font-weight: 600;
  font-size: var(--schrift-h3);
  color: var(--sidebar-text);
  letter-spacing: 0.02em;
}
.umgebungshinweis { font-size: var(--schrift-klein); color: var(--sidebar-text-gedimmt); margin-top: var(--raum-1); }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: var(--raum-2) 0; }
.nav-punkt {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  height: 36px;
  padding: 0 var(--raum-4) 0 calc(var(--raum-4) - 2px);
  border-left: 2px solid transparent;
  color: var(--sidebar-text-gedimmt);
  text-decoration: none;
  font-size: var(--schrift-koerper);
  font-weight: 500;
}
.nav-punkt:hover { background: rgb(255 255 255 / 0.06); }
.nav-punkt-aktiv, .nav-punkt-aktiv:hover {
  border-left-color: var(--sidebar-akzent);
  background: rgb(255 255 255 / 0.08);
  color: var(--sidebar-text);
}
.nav-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-zaehler {
  margin-left: auto;
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung-text);
  border-radius: var(--radius-rund);
  font-size: var(--schrift-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px var(--raum-2);
  min-width: 20px;
  text-align: center;
}
.sidebar-fuss { padding: var(--raum-4); border-top: 1px solid rgb(255 255 255 / 0.08); }
.nutzerkennung { font-size: var(--schrift-klein); color: var(--sidebar-text-gedimmt); margin-bottom: var(--raum-2); }
/* Abmelden (TEIL XIV, WP-4). Eigene Regel statt der generischen
   Button-Klassen: die sind fuer den hellen Inhaltsbereich gedacht und
   setzen dunkle Schrift — auf der dunklen Sidebar waere der Text
   unsichtbar (in der PREVIEW-Browserpruefung genau so aufgefallen).
   Uebernimmt deshalb exakt die Form der Theme-Knoepfe darunter. */
.abmelden-formular { margin-bottom: var(--raum-2); }
.abmelden-formular .button {
  width: 100%;
  height: 26px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--sidebar-text-gedimmt);
  font-size: var(--schrift-klein);
}
.abmelden-formular .button:hover { background: rgb(255 255 255 / 0.08); color: var(--sidebar-text); }
.theme-umschalter { display: flex; gap: var(--raum-1); }
.theme-knopf {
  flex: 1;
  height: 26px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--sidebar-text-gedimmt);
  font: inherit;
  font-size: var(--schrift-klein);
  cursor: pointer;
}
.theme-knopf:hover { background: rgb(255 255 255 / 0.08); color: var(--sidebar-text); }
.hauptbereich { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: 0 var(--raum-5);
  background: var(--flaeche-panel);
  border-bottom: 1px solid var(--rahmen);
}
.topbar-titel { font-family: var(--font-ueberschrift); font-size: var(--schrift-h2); font-weight: 600; line-height: 1.3; }
.topbar-kontext { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
/* Umgebungskennzeichnung (TEIL XII, Team E): vollbreiter, unübersehbarer
   Warnbalken über dem Inhalt auf jeder Seite (alle Nicht-REAL-Zustände) —
   bewusst im Hauptbereich, NICHT in der < 768 px ausgeblendeten Sidebar.
   Ausschließlich vorhandene Design-Tokens. */
.umgebungsbalken {
  padding: var(--raum-2) var(--raum-5);
  background: var(--status-warnung-farbe);
  color: var(--text-invers);
  font-weight: 600;
  font-size: var(--schrift-koerper);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.umgebungsbalken-unklar { background: var(--status-kritisch-farbe); }
/* REAL: eindeutige, ruhige Kennzeichnung als Topbar-Badge (kein Alarm) —
   die Topbar bleibt auf allen Breiten sichtbar. */
.umgebung-badge-real {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--raum-2);
  border: 1px solid var(--status-gut-farbe);
  border-radius: var(--radius-rund);
  background: var(--status-gut-flaeche);
  color: var(--status-gut-text);
  font-size: var(--schrift-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.topbar-meta { margin-left: auto; font-size: var(--schrift-klein); color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }
.nav-toggle { display: none; }
/* Skip-Link (II-11): erstes Body-Element, unsichtbar bis Tastaturfokus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  padding: var(--raum-2) var(--raum-4);
  background: var(--akzent);
  color: var(--text-invers);
  border-radius: 0 0 var(--radius-klein) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
.inhalt {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--raum-6);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
}

/* Panel (B 5.2) — keine Akzent-/Statusleisten an Panels */
.panel {
  background: var(--flaeche-panel);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-panel);
  box-shadow: var(--schatten-panel);
  padding: var(--raum-5);
}
.panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3); margin-bottom: var(--raum-4); }
/* Panel-Modifikatoren (WNA Command Design Language): nicht jeder Abschnitt
   braucht eine eigene Box. */
.panel-erhoben { background: var(--flaeche-panel-erhoben); }
.panel-flach {
  background: none;
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  padding: var(--raum-4) 0 0 0;
}
.panel-flach .panel-kopf { margin-bottom: var(--raum-3); }

/* Tabelle (B 5.3) — overflow-Container, sticky Kopf, keine Zebra-Streifen */
.tabelle-container { overflow-x: auto; border-radius: var(--radius-panel); }
.tabelle { border-collapse: collapse; width: 100%; font-size: var(--schrift-daten); }
.tabelle th {
  position: sticky;
  top: 0;
  background: var(--flaeche-eingelassen);
  color: var(--text-sekundaer);
  font-size: var(--schrift-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--rahmen-stark);
}
.tabelle td { padding: var(--raum-2) var(--raum-3); border-bottom: 1px solid var(--rahmen); }
.tabelle tbody tr:hover { background: var(--flaeche-hover); }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.zeile-blockiert {
  box-shadow: inset 3px 0 0 var(--status-blockiert-farbe);
  background: var(--status-blockiert-flaeche);
  background: color-mix(in srgb, var(--status-blockiert-flaeche) 40%, transparent);
}

/* Liste (B 5.4) — heterogene Einträge, kein Karten-pro-Eintrag */
.liste { list-style: none; margin: 0; padding: 0; }
.liste-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 44px;
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--rahmen);
}
.liste-zeile:hover { background: var(--flaeche-hover); }
.liste-titel { font-weight: 500; }
.liste-meta { margin-left: auto; font-size: var(--schrift-klein); color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }
/* Finale QA TEIL XIV (2026-09-03): auf schmalen Geraeten bricht die Listenzeile um,
   statt den Meta-Text (Adresse, Zuweisung) ueber den rechten Rand zu schieben —
   betrifft nur Zeilen, die sonst horizontal ueberlaufen wuerden. */
@media (max-width: 767px) {
  .liste-zeile { flex-wrap: wrap; }
  .liste-meta { min-width: 0; overflow-wrap: anywhere; }
}

/* Buttons (B 5.5) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-1);
  height: 32px;
  padding: 0 var(--raum-4);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--text-primaer);
  font: inherit;
  font-size: var(--schrift-koerper);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.button-klein { height: 26px; padding: 0 var(--raum-3); }
.button-primaer { background: var(--akzent); color: var(--text-invers); }
.button-primaer:hover:not(:disabled) { background: var(--akzent-hover); }
.button-primaer:active:not(:disabled) { background: var(--akzent-hover); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2); }
.button-sekundaer { border-color: var(--rahmen-stark); }
.button-sekundaer:hover:not(:disabled) { background: var(--flaeche-hover); }
.button-sekundaer:active:not(:disabled) { background: var(--flaeche-aktiv); }
.button-destruktiv { border-color: var(--status-kritisch-farbe); color: var(--status-kritisch-farbe); }
.button-destruktiv:hover:not(:disabled) { background: var(--status-kritisch-flaeche); }
.button-destruktiv:active:not(:disabled) { background: var(--status-kritisch-farbe); color: var(--text-invers); }

/* Status-Badge (B 5.6): runde gefüllte Pille + Punkt.
   Fallback-Regel 8.4: Basis-Klasse = neutral — ein unbekannter Status-Wert
   ohne Modifikator-Klasse rendert automatisch in den Neutral-Tokens. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 var(--raum-2);
  border-radius: var(--radius-rund);
  background: var(--status-neutral-flaeche);
  color: var(--status-neutral-text);
  font-size: var(--schrift-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.status-badge .status-punkt { flex: none; width: 6px; height: 6px; border-radius: var(--radius-rund); background: var(--status-neutral-farbe); }
.status-gut { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.status-gut .status-punkt { background: var(--status-gut-farbe); }
.status-warnung { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); }
.status-warnung .status-punkt { background: var(--status-warnung-farbe); }
.status-kritisch { background: var(--status-kritisch-flaeche); color: var(--status-kritisch-text); }
.status-kritisch .status-punkt { background: var(--status-kritisch-farbe); }
.status-laufend { background: var(--status-laufend-flaeche); color: var(--status-laufend-text); }
.status-laufend .status-punkt { background: var(--status-laufend-farbe); }
.status-neutral { background: var(--status-neutral-flaeche); color: var(--status-neutral-text); }
.status-neutral .status-punkt { background: var(--status-neutral-farbe); }

/* Agentenstatus-Indikator (B 5.7): 4 Zustände des W1a-Contracts */
.status-laufend .status-punkt { animation: status-puls 2s ease-in-out infinite; }
@keyframes status-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-blockiert { background: var(--status-blockiert-flaeche); color: var(--status-blockiert-text); }
.status-blockiert .status-punkt { background: var(--status-blockiert-farbe); border-radius: 0; }
.status-erledigt { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.status-erledigt .status-punkt { display: none; }
.status-erledigt::before { content: "\2713"; font-size: 10px; line-height: 1; color: var(--status-gut-farbe); }
.status-wartet-auf-freigabe {
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung-text);
  box-shadow: inset 0 0 0 1px var(--status-warnung-farbe);
}
.status-wartet-auf-freigabe .status-punkt { background: var(--status-warnung-farbe); }
/* Reine Punktform für dichte Tabellen (Textlabel steht daneben) */
.status-punkt-solo { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-rund); background: var(--status-neutral-farbe); }
.status-punkt-solo.status-gut, .status-punkt-solo.status-erledigt { background: var(--status-gut-farbe); }
.status-punkt-solo.status-warnung, .status-punkt-solo.status-wartet-auf-freigabe { background: var(--status-warnung-farbe); }
.status-punkt-solo.status-kritisch { background: var(--status-kritisch-farbe); }
.status-punkt-solo.status-blockiert { background: var(--status-blockiert-farbe); border-radius: 0; }
.status-punkt-solo.status-laufend { background: var(--status-laufend-farbe); animation: status-puls 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .status-laufend .status-punkt, .status-punkt-solo.status-laufend {
    animation: none;
    box-shadow: 0 0 0 1px var(--status-laufend-flaeche), 0 0 0 2px var(--status-laufend-farbe);
  }
}

/* Prioritäts-Chip (B 5.6): eckig, nur Rahmen, nie gefüllt */
.prio-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--raum-2);
  border: 1px solid var(--prio-niedrig-rahmen);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--prio-niedrig-farbe);
  font-size: var(--schrift-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.prio-hoch { border-color: var(--prio-hoch-rahmen); color: var(--prio-hoch-farbe); }
.prio-mittel { border-color: var(--prio-mittel-rahmen); color: var(--prio-mittel-farbe); }
.prio-niedrig { border-color: var(--prio-niedrig-rahmen); color: var(--prio-niedrig-farbe); }

/* Formular-Basics (B 5.8) */
.feld { display: flex; flex-direction: column; gap: var(--raum-1); margin-bottom: var(--raum-4); }
.feld-label { font-size: var(--schrift-klein); font-weight: 600; color: var(--text-sekundaer); }
.eingabe {
  height: 32px;
  background: var(--flaeche-eingabe);
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-klein);
  padding: 0 var(--raum-3);
  font: inherit;
  font-size: var(--schrift-koerper);
  color: var(--text-primaer);
}
textarea.eingabe { height: auto; min-height: 64px; padding: var(--raum-2) var(--raum-3); resize: vertical; }
.eingabe::placeholder { color: var(--text-gedimmt); }
.eingabe:focus { border-color: var(--akzent); outline: 2px solid var(--fokus-ring); outline-offset: 2px; }
.feld-gruppe { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Empty State (B 5.11) — einzige erlaubte Zentrierung, immer ehrlich beschriftet */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-7);
  text-align: center;
}
.empty-state-icon { width: 32px; height: 32px; color: var(--text-gedimmt); }
.empty-state-text { font-size: var(--schrift-koerper); color: var(--text-sekundaer); margin: 0; }

/* Inline-Hinweisbanner (B 5.10) */
.hinweisbanner {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-klein);
  background: var(--status-neutral-flaeche);
  color: var(--status-neutral-text);
  font-size: var(--schrift-koerper);
}
.hinweisbanner-gut { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.hinweisbanner-warnung { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); }
.hinweisbanner-kritisch { background: var(--status-kritisch-flaeche); color: var(--status-kritisch-text); }

/* KPI-Kachel (B 5.14) — Zahl vor Diagramm */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--raum-4); }
.kpi-kachel {
  background: var(--flaeche-panel);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-panel);
  padding: var(--raum-4);
}
.kpi-name { display: flex; justify-content: space-between; gap: var(--raum-2); font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.kpi-wert {
  font-family: var(--font-ueberschrift);
  font-size: var(--schrift-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primaer);
  font-variant-numeric: tabular-nums;
}
.kpi-einheit { font-size: var(--schrift-koerper); font-weight: 400; color: var(--text-sekundaer); }
.kpi-ohne-daten .kpi-wert { color: var(--text-gedimmt); }

/* Lagebild-Kopfzeile (einzeilige Kennzahlen-Zeile, Komposition aus B-Bausteinen) */
.lagebild-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.lagebild-posten { display: inline-flex; align-items: baseline; gap: var(--raum-1); font-size: var(--schrift-daten); color: var(--text-sekundaer); }
.lagebild-wert { font-weight: 600; color: var(--text-primaer); font-variant-numeric: tabular-nums; }
.lagebild-posten-warnung .lagebild-wert { color: var(--status-kritisch-farbe); }

/* Seitenkopf (B §5.15): Breadcrumb -> h1 -> Kontext -> Aktionen rechts */
.seitenkopf { display: flex; flex-direction: column; gap: var(--raum-2); }
.seitenkopf-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--raum-4); }
.seitenkopf-titel { font-size: var(--schrift-h1); line-height: 1.25; letter-spacing: -0.005em; }
.seitenkopf-kontext { font-size: var(--schrift-klein); color: var(--text-sekundaer); margin-top: var(--raum-1); }
.seitenkopf-aktionen { display: flex; align-items: center; gap: var(--raum-2); flex: none; }

/* Breadcrumb (B §5.16): nur auf Detail-Screens, erste Zeile des Seitenkopfs */
.brotkrume { font-size: var(--schrift-klein); color: var(--text-sekundaer); display: flex; align-items: center; gap: var(--raum-1); flex-wrap: wrap; }
.brotkrume a { color: var(--text-sekundaer); }
.brotkrume a:hover { color: var(--akzent); }
.brotkrume [aria-current="page"] { color: var(--text-primaer); }
.brotkrume-trenner { color: var(--text-gedimmt); }

/* Unternav-Pillen (B §5.17, K5/K6): Pillen = Navigation, ein Ort, alle Breiten */
.unternav { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.unternav-pille {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--raum-3);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-rund);
  color: var(--text-sekundaer);
  text-decoration: none;
  font-size: var(--schrift-koerper);
}
.unternav-pille:hover { background: var(--flaeche-hover); color: var(--text-primaer); }
.unternav-pille-aktiv, .unternav-pille-aktiv:hover {
  background: var(--akzent-flaeche);
  border-color: var(--akzent);
  color: var(--akzent);
  font-weight: 500;
}

/* Tab-Leiste (B §5.18, K5): Tabs = Unterteilung derselben Datenmenge */
.tab-leiste { display: flex; gap: var(--raum-4); border-bottom: 1px solid var(--rahmen); }
.tab-link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  padding: var(--raum-2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-sekundaer);
  text-decoration: none;
  font-size: var(--schrift-koerper);
  white-space: nowrap;
}
.tab-link:hover { color: var(--text-primaer); }
.tab-aktiv, .tab-aktiv:hover { border-bottom-color: var(--akzent); color: var(--text-primaer); font-weight: 500; }
.tab-zaehler { font-size: var(--schrift-klein); color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }

/* Filterleiste + Segmented Control + Filter-Chips (B §5.19, K5):
   Segmente = exklusiver Filter in eingelassener Box */
.filterleiste { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.segment-gruppe {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--flaeche-eingelassen);
  border-radius: var(--radius-klein);
}
.segment {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  height: 26px;
  padding: 0 var(--raum-3);
  border-radius: var(--radius-klein);
  color: var(--text-sekundaer);
  text-decoration: none;
  font-size: var(--schrift-daten);
  white-space: nowrap;
}
.segment:hover { color: var(--text-primaer); }
.segment-aktiv, .segment-aktiv:hover {
  background: var(--flaeche-aktiv);
  color: var(--text-primaer);
  font-weight: 500;
  box-shadow: var(--schatten-panel);
}
.segment-zaehler { font-size: var(--schrift-label); color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  height: 26px;
  padding: 0 var(--raum-2) 0 var(--raum-3);
  background: var(--akzent-flaeche);
  color: var(--akzent);
  border-radius: var(--radius-rund);
  font-size: var(--schrift-daten);
}
.filter-chip-entfernen { color: var(--akzent); text-decoration: none; font-weight: 600; padding: 0 var(--raum-1); }
.filter-chip-entfernen:hover { color: var(--akzent-hover); }

/* Sortierbare Tabellenkoepfe (B §5.20) */
.sortier-link { display: inline-flex; align-items: center; gap: var(--raum-1); color: inherit; text-decoration: none; }
.sortier-link:hover { color: var(--akzent); }
.sortier-pfeil { font-size: 9px; line-height: 1; }

/* Zahlenband (B §5.21, II-5/K1): grosse klickbare Zahlen OHNE Panel-Rahmen
   je Zahl — bewusst KEIN Kachel-Grid. WNA Command Design Language: eine
   durchgehende Executive-Statuszeile statt fuenf Einzelkarten — Trennung
   ZWISCHEN den Posten per `--linie`-Randstrich (nicht Umrandung JEDES
   Postens); Hover/Fokus hellt die Flaeche leicht auf und unterstreicht nur
   die Zahl, ohne deren Farbe zu wechseln; der Warnzustand faerbt
   ausschliesslich Zahl + Icon, nie den Postenhintergrund. */
.zahlen-band { display: flex; flex-wrap: wrap; row-gap: var(--raum-3); }
.zahl-posten {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--raum-1);
  text-decoration: none;
  color: var(--text-primaer);
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--radius-klein);
}
.zahl-posten:first-child { padding-left: 0; }
.zahl-posten:not(:last-child) { border-right: 1px solid var(--linie); }
.zahl-posten:hover, .zahl-posten:focus-visible { background: var(--flaeche-hover); }
.zahl-wert {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-family: var(--font-ueberschrift);
  font-size: var(--schrift-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}
.zahl-posten:hover .zahl-wert, .zahl-posten:focus-visible .zahl-wert { text-decoration: underline; }
.zahl-label, .zahl-kurzlabel { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.zahl-kurzlabel { display: none; }
.zahl-posten-warnung .zahl-wert { color: var(--status-kritisch-farbe); }
/* Amber-Variante (QA-Fund H1 W-UI1-v2): Aufmerksamkeit, kein Kritisch-
   Fehler -- z. B. Deckungsbeitrag <= 0, Kritische Vorgaenge > 0. Rot bleibt
   echten Kritisch-Faellen vorbehalten (dringende Entscheidungen,
   ueberfaellige Leads). */
.zahl-posten-warnung-amber .zahl-wert { color: var(--status-warnung-farbe); }

/* "Nicht verfuegbar" (TEIL III, Korrektur 2026-08-13): Zielbild-KPI ohne
   angebundene Datenquelle — gedaempfter "--"-Wert statt Fake-Zahl, bewusst
   OHNE Warnfarbe (ein fehlender Datenanschluss ist kein Handlungsdruck). */
.zahl-posten-nicht-verfuegbar { cursor: default; }
.zahl-wert-nicht-verfuegbar, .kpi-wert-nicht-verfuegbar { color: var(--text-gedimmt); }
.zahl-hinweis, .kpi-hinweis { font-size: var(--schrift-label); color: var(--text-gedimmt); }

/* 5+1-Priorisierung (III-2a): "Kritische Vorgaenge" ist ein Statussignal,
   kein gleichrangiger Kernwert — abgesetzt per zusaetzlichem Trennstrich +
   Abstand statt einer siebten gleichgewichtigen Zahl. */
.zahl-posten-abgesetzt { margin-left: var(--raum-3); padding-left: var(--raum-4); border-left: 1px solid var(--linie); }

/* Kachel-Ausbau (B §5.22, B 5.14): klickbar + Warn-Variante */
.kpi-kachel-klickbar { display: block; text-decoration: none; color: inherit; }
.kpi-kachel-klickbar:hover { background: var(--flaeche-hover); }
.kpi-warnung .kpi-wert { color: var(--status-kritisch-farbe); }
/* Amber-Variante (spiegelbildlich zu .zahl-posten-warnung-amber, W-UI0-
   Ausbau IV-3/IV-7): Aufmerksamkeit, keine echte Blockade -- z. B.
   ueberfaellige Aufgabe ohne zwingenden Auftragsstopp. Rot (.kpi-warnung)
   bleibt echten Kritisch-Faellen vorbehalten. */
.kpi-kachel-warnung-amber .kpi-wert { color: var(--status-warnung-farbe); }
.kpi-kachel-nicht-verfuegbar { opacity: 0.82; }
/* Delta-Chips: vorbereitet fuer N5, noch von keiner Komponente gerendert */
.kpi-delta { display: inline-flex; align-items: center; gap: var(--raum-1); font-size: var(--schrift-klein); }
.kpi-delta-gut { color: var(--status-gut-farbe); }
.kpi-delta-kritisch { color: var(--status-kritisch-farbe); }
.kpi-delta-neutral { color: var(--text-sekundaer); }

/* Command-Kachel (TEIL III-4/III-11, W-UI1-v2): kompakte Bereichskachel des
   Command Centers — Icon+Titel, Zustandszeile, 2-4 Kennzahlen, max. 2
   Warnungen, EIN Ziel-Link je Kachel. Informationsdicht statt dekorativ:
   keine Charts, keine Tabellen, ruhige Flaeche wie die uebrigen S1-Panels. */
.command-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); }
@media (max-width: 1024px) { .command-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .command-kacheln { grid-template-columns: 1fr; } }
.command-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  background: var(--flaeche-panel-erhoben);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-panel);
  padding: var(--raum-4);
  text-decoration: none;
  color: inherit;
}
.command-kachel:hover, .command-kachel:focus-visible { background: var(--flaeche-hover); border-color: var(--akzent); }
.command-kachel-kopf { display: flex; align-items: center; gap: var(--raum-2); color: var(--text-sekundaer); }
.command-kachel-titel { font-size: var(--schrift-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.command-kachel-zustand { font-size: var(--schrift-h3); font-weight: 600; color: var(--text-primaer); }
.command-kachel-kennzahlen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--raum-1) var(--raum-2);
  margin: 0;
  font-size: var(--schrift-klein);
}
.command-kachel-kennzahlen dt { color: var(--text-sekundaer); }
.command-kachel-kennzahlen dd { margin: 0; color: var(--text-primaer); font-variant-numeric: tabular-nums; text-align: right; }
.command-kachel-kennzahl-nicht-verfuegbar dt, .command-kachel-kennzahl-nicht-verfuegbar dd { color: var(--text-gedimmt); }
.command-kachel-warnungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--raum-1); }
.command-kachel-warnungen li { display: flex; align-items: flex-start; gap: var(--raum-1); font-size: var(--schrift-klein); color: var(--status-warnung-farbe); }
.command-kachel-ziel { margin-top: auto; padding-top: var(--raum-2); font-size: var(--schrift-klein); color: var(--akzent); }

/* Entscheidungs-Karte (B §5.23, K2): NUR an Entscheidungsorten (S13/S4) */
.entscheidungs-karte {
  background: var(--flaeche-panel);
  border: 1px solid var(--rahmen);
  border-left: 3px solid var(--status-neutral-farbe);
  border-radius: var(--radius-panel);
  box-shadow: var(--schatten-panel);
  padding: var(--raum-4) var(--raum-5);
}
.entscheidungs-karte-wartet { border-left-color: var(--status-warnung-farbe); }
.entscheidungs-karte-blockiert { border-left-color: var(--status-blockiert-farbe); }
.entscheidungs-karte-korrektur { border-left-color: var(--status-kritisch-farbe); }
.entscheidungs-kopf { display: flex; align-items: baseline; gap: var(--raum-3); flex-wrap: wrap; }
.entscheidungs-titel { flex: 1; min-width: 0; }
.entscheidungs-meta { margin-left: auto; font-size: var(--schrift-klein); color: var(--text-sekundaer); white-space: nowrap; }
.entscheidungs-substanz { margin-top: var(--raum-3); }
.entscheidungs-aktionen { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: 1px solid var(--rahmen); }

/* Fakten-Liste (B §5.24): dedupliziert die detail-liste-Kopien */
.fakten-liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--raum-1) var(--raum-4); align-items: baseline; margin: 0; }
.fakten-liste dt { color: var(--text-sekundaer); font-size: var(--schrift-klein); font-weight: 600; }
.fakten-liste dd { margin: 0; }

/* Meldungsbanner (B §5.25, K8a): Form nach B 5.10, Position am Seitenkopf,
   bewusst ohne role="status" */
.meldungsbanner {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--radius-klein);
  background: var(--status-neutral-flaeche);
  color: var(--status-neutral-text);
  font-size: var(--schrift-koerper);
}
.meldungsbanner .icon { flex: none; }
.meldungsbanner-gut { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.meldungsbanner-warnung { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); }
.meldungsbanner-kritisch { background: var(--status-kritisch-flaeche); color: var(--status-kritisch-text); }
.meldungsbanner-ausblenden { margin-left: auto; color: inherit; font-size: var(--schrift-klein); }

/* Mehr laden (B §5.26) */
.mehr-laden { text-align: center; padding: var(--raum-3) 0; font-size: var(--schrift-klein); }

/* Aktions-Details (B §5.27): <details>-Einklappmuster fuer Formulare > 1 Feld */
.aktions-details { border: 1px solid var(--rahmen); border-radius: var(--radius-klein); }
.aktions-details summary {
  cursor: pointer;
  padding: var(--raum-2) var(--raum-3);
  font-size: var(--schrift-koerper);
  font-weight: 500;
  color: var(--akzent);
}
.aktions-details[open] summary { border-bottom: 1px solid var(--rahmen); }
.aktions-details-inhalt { padding: var(--raum-3); }
@media (max-width: 767px) {
  .aktions-details { max-width: 100%; min-width: 0; }
  .aktions-details .eingabe { max-width: 100%; box-sizing: border-box; }
}

/* Tooltip (B §5.28, K9): CSS-only, NUR auf ohnehin fokussierbaren Traegern
   (Links/Buttons), nie einziger Informationsweg — title-Fallback gesetzt */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  padding: var(--raum-1) var(--raum-2);
  background: var(--flaeche-panel);
  color: var(--text-primaer);
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-overlay);
  font-size: var(--schrift-klein);
  white-space: nowrap;
}

/* Benannte Inhalts-Grids (B §5.29, K11): Kollapspunkte VERBINDLICH —
   grid-2-1 einspaltig < 1200 px (Seitenspalte zuerst), uebrige < 1024 px */
.inhalt-grid { display: grid; gap: var(--raum-5); align-items: start; }
.grid-1-1 { grid-template-columns: 1fr 1fr; }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) {
  .grid-2-1 { grid-template-columns: 1fr; }
  .grid-2-1 > :last-child { order: -1; }
}
@media (max-width: 1024px) {
  .grid-1-1, .grid-3 { grid-template-columns: 1fr; }
}

.anmeldung-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--raum-5);
  background: var(--flaeche-seite);
}
.anmeldung-body .umgebungsbalken { width: 100%; margin-bottom: var(--raum-5); }
.anmeldung-karte {
  width: 100%;
  max-width: 24rem;
  background: var(--flaeche-panel);
  border: 1px solid var(--linie);
  border-radius: var(--radius-panel);
  padding: var(--raum-5);
}
.anmeldung-titel { font-size: var(--schrift-h1); margin: 0 0 var(--raum-1); }
.anmeldung-formular { display: flex; flex-direction: column; gap: var(--raum-4); margin-top: var(--raum-4); }
.anmeldung-formular .button { width: 100%; }

@media (max-width: 1024px) {
  .app-rahmen { grid-template-columns: 56px 1fr; }
  .sidebar .nav-label, .sidebar .nav-zaehler, .sidebar .umgebungshinweis, .sidebar .sidebar-fuss { display: none; }
  .sidebar-kopf { padding: var(--raum-4) var(--raum-2); text-align: center; }
  .nav-punkt { justify-content: center; padding: 0; }
  .wortmarke { font-size: var(--schrift-label); }
  .panel { padding: var(--raum-4); }
  .inhalt { padding: var(--raum-4); }
}
@media (max-width: 768px) {
  .app-rahmen { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 20;
  }
  :root[data-nav-offen] .sidebar { transform: translateX(0); }
  .sidebar .nav-label, .sidebar .nav-zaehler, .sidebar .umgebungshinweis, .sidebar .sidebar-fuss { display: revert; }
  .sidebar .sidebar-fuss { display: block; }
  .sidebar-kopf { padding: var(--raum-5) var(--raum-4) var(--raum-4) var(--raum-4); text-align: left; }
  .nav-punkt { justify-content: flex-start; padding: 0 var(--raum-4) 0 calc(var(--raum-4) - 2px); min-height: 40px; }
  .wortmarke { font-size: var(--schrift-h3); }
  .nav-toggle { display: inline-flex; }
  .button { min-height: 40px; }
  .liste-zeile { min-height: 40px; }
  /* W-UI0 (II-10): Leisten horizontal scrollbar statt Umbruch */
  .tab-leiste, .unternav { overflow-x: auto; flex-wrap: nowrap; }
  .unternav-pille { white-space: nowrap; }
  /* Zahlenband 2-spaltig in Prioritaetsreihenfolge, Kurzlabels — die
     `--linie`-Trennstriche der Desktop-Fassung passen nicht auf ein Grid
     mit Zeilenumbruch, daher hier deaktiviert (Trennung uebernimmt `gap`). */
  .zahlen-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
  .zahl-posten { padding: 0; border-right: none; }
  .zahl-label { display: none; }
  .zahl-kurzlabel { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Screen S1 — Command Center (W-UI1-v2) */
.cc-zeile-rand-warnung { box-shadow: inset 3px 0 0 var(--status-warnung-farbe); }
.cc-fusslink { display: block; text-align: right; margin-top: var(--raum-3); font-size: var(--schrift-daten); }
.cc-leise { margin: 0; color: var(--text-sekundaer); }
/* TEIL XII Team C — Gruppentitel im Block "Noch zu planen" */
.cc-gruppen-titel { margin: var(--raum-3) 0 var(--raum-1); font-size: var(--schrift-daten); color: var(--text-sekundaer); font-weight: 600; }

.inbox-negativliste { font-size: var(--schrift-klein); color: var(--text-gedimmt); margin: 0; }
.inbox-erklaerung { padding: var(--raum-3) var(--raum-4); }
.inbox-erklaerung .panel-kopf { margin-bottom: var(--raum-1); }
.inbox-erklaerung p { margin: 0; line-height: 1.3; }

/* Bereich Eingang (TEIL XIII) */
.eg-kopfaktionen { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; flex-wrap: wrap; }
.eg-inline-formular { display: inline; }
.eg-upload-formular { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.eg-upload-formular input[type="file"] { max-width: 100%; }
.eg-rohtext { font-size: 13px; color: var(--text-sekundaer); white-space: pre-wrap; }
.eg-kandidaten { margin: 0 0 8px 18px; padding: 0; }
.eg-kandidaten li { margin-bottom: 4px; }

.vg-panel .vg-liste { list-style: none; padding: 0; margin: 0 0 var(--raum-2) 0; }
.vg-liste li { padding: 2px 0; }
.vg-liste .vg-fehlt { color: var(--status-warnung-farbe); }
.vg-liste .vg-ok { color: var(--text-sekundaer); }
.vg-zeichen { display: inline-block; width: 1.4em; }
.vg-schritt { border-top: 1px solid var(--linie); padding-top: var(--raum-2); margin-top: var(--raum-2); }
.vg-schritt h3 { margin: 0 0 var(--raum-1) 0; }
.vg-form { max-width: 34rem; }
.vg-status-warnung { color: var(--status-warnung-farbe); font-weight: 600; }
@media (max-width: 767px) { .vg-form { max-width: 100%; } }

.crm-executive { margin-bottom: var(--raum-4); }
.lead-alter-band { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.lead-alter-posten { display: flex; flex-direction: column; gap: var(--raum-1); padding: var(--raum-2) var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--flaeche-panel); min-width: 120px; }
.lead-alter-zahl { font-family: var(--font-ueberschrift); font-size: var(--schrift-h3); font-weight: 600; color: var(--text-primaer); font-variant-numeric: tabular-nums; }
.lead-alter-label { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
@media (max-width: 768px) {
  .lead-alter-band { flex-direction: column; }
  .lead-alter-posten { min-width: 0; }
}
.trichterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.trichter-stufe { display: inline-flex; align-items: baseline; gap: var(--raum-2); padding: var(--raum-2) var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--flaeche-panel); color: var(--text-sekundaer); text-decoration: none; font-size: var(--schrift-daten); }
.trichter-stufe:hover { background: var(--flaeche-hover); }
.trichter-stufe-aktiv, .trichter-stufe-aktiv:hover { border-color: var(--akzent); background: var(--akzent-flaeche); color: var(--akzent); }
.trichter-zahl { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primaer); }
.trichter-stufe-aktiv .trichter-zahl { color: var(--akzent); }
.trichter-pfeil { color: var(--text-gedimmt); }
.trichter-abgang { border-style: dashed; margin-left: var(--raum-3); }
.zeile-ueberfaellig { box-shadow: inset 3px 0 0 var(--status-kritisch-farbe); background: color-mix(in srgb, var(--status-kritisch-flaeche) 40%, transparent); }
.lead-sekundaerzeile { font-size: var(--schrift-klein); color: var(--text-sekundaer); margin-top: var(--raum-1); }
.lead-zeilen-aktionen { margin-top: var(--raum-1); }
.lead-zeilen-aktionen summary { cursor: pointer; font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.lead-zeilen-aktionen summary:hover { color: var(--akzent); }
.lead-zeilen-aktionen-inhalt { display: grid; gap: var(--raum-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--raum-3); padding: var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--flaeche-eingelassen); }
.lead-neu-aufklapper summary { cursor: pointer; font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.lead-neu-aufklapper summary:hover { color: var(--akzent); }
.lead-neu-inhalt { margin-top: var(--raum-3); padding: var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--flaeche-eingelassen); }
.naechster-schritt-ueberfaellig { color: var(--status-kritisch-farbe); font-weight: 600; }
.naechster-schritt-luecke { display: inline-block; padding: 1px var(--raum-2); border-radius: var(--radius-klein); background: var(--status-warnung-flaeche); color: var(--status-warnung-text); font-size: var(--schrift-klein); }
.status-lead-neu { background: var(--akzent-flaeche); color: var(--akzent); }
.status-lead-neu .status-punkt { background: var(--akzent); }
.status-lead-in_bearbeitung { background: var(--status-laufend-flaeche); color: var(--status-laufend-text); }
.status-lead-in_bearbeitung .status-punkt { background: var(--status-laufend-farbe); }
.status-lead-angebot_erstellt { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); }
.status-lead-angebot_erstellt .status-punkt { background: var(--status-warnung-farbe); }
.status-lead-gewonnen { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.status-lead-gewonnen .status-punkt { background: var(--status-gut-farbe); }
.detail-liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--raum-1) var(--raum-4); align-items: baseline; }
.detail-label { color: var(--text-sekundaer); font-size: var(--schrift-klein); font-weight: 600; }
.anforderung-text { white-space: pre-wrap; margin: var(--raum-2) 0 0 0; }
.verlauf-uebergang { font-family: var(--font-mono); font-size: var(--schrift-daten); }
.aktions-grid { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* S12 — Laufkarten & Gruppen */
/* F3/G11: Monitor-Beschriftung im Kopfbereich. */
.agenten-monitor-hinweis { margin: 0 0 var(--raum-3) 0; }
.lauf-gruppe { display: flex; flex-direction: column; gap: var(--raum-3); }
.lauf-gruppe-titel { color: var(--text-sekundaer); }
.lauf-karten { display: flex; flex-direction: column; gap: var(--raum-3); }
.lauf-karte { display: flex; flex-direction: column; gap: var(--raum-2); }
.lauf-karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-3); }
.lauf-karte-titel { font-family: var(--font-ueberschrift); font-size: var(--schrift-h3); font-weight: 600; color: var(--text-primaer); text-decoration: none; margin: 0; }
a.lauf-karte-titel:hover { color: var(--akzent); }
.lauf-karte-meta { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.lauf-karte-pakete { font-size: var(--schrift-daten); color: var(--text-sekundaer); }
.lauf-karte-punkte { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.lauf-punkt { display: inline-flex; align-items: center; gap: var(--raum-1); padding: var(--raum-1) var(--raum-2); border-radius: var(--radius-klein); font-size: var(--schrift-daten); font-weight: 600; text-decoration: none; }
.lauf-punkt-freigabe { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); }
.lauf-punkt-blocker { background: var(--status-blockiert-flaeche); color: var(--status-blockiert-text); }
.lauf-karte-aktiv { font-size: var(--schrift-daten); color: var(--status-laufend-text); }

/* S12 — Agentenübersicht-Tabelle (UI8.4/Plan IV-4): Erfolgsquote/Letzte
   Aktivität als zwei zusätzliche Spalten; < 768 px weicht einem
   Sekundärzeilen-Muster statt einer weiteren horizontalen Spalte. */
.zeile-agent-sekundaer { display: none; }
@media (max-width: 768px) {
  .spalte-erweitert { display: none; }
  .zeile-agent-sekundaer { display: table-row; }
  .zeile-agent-sekundaer td { padding-top: 0; border-bottom: 1px solid var(--rahmen); }
}

/* S13 — Entscheidungs-Karten */
.entscheidungs-karten { display: flex; flex-direction: column; gap: var(--raum-4); }
.freigabe-karte { border-left: 3px solid var(--status-warnung-farbe); }
.blocker-karte { border-left: 3px solid var(--status-blockiert-farbe); }
.karte-gegenstand { font-size: var(--schrift-koerper); }
.karte-liste { margin: 0 0 var(--raum-3) 0; padding-left: var(--raum-5); }
.karte-liste li { margin-bottom: var(--raum-1); }
.karte-folgen { background: var(--flaeche-eingelassen); border-radius: var(--radius-klein); padding: var(--raum-3); margin-bottom: var(--raum-3); }
.karte-folgen p { margin: 0; }
.karte-ursache { margin-bottom: var(--raum-3); }
.ursache-art { font-weight: 600; margin-bottom: var(--raum-1); }
.karten-aktionen { display: grid; gap: var(--raum-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--rahmen); padding-top: var(--raum-4); }
.aktion-formular { display: flex; flex-direction: column; }
.aktion-formular .button { align-self: flex-start; }
.aktion-hinweis { font-size: var(--schrift-klein); }
.bestaetigung { background: var(--status-warnung-flaeche); color: var(--status-warnung-text); border-radius: var(--radius-klein); padding: var(--raum-3); margin-bottom: var(--raum-3); }
.bestaetigung-wortlaut { font-weight: 600; margin-bottom: var(--raum-2); }
.bestaetigung-bedingungen .karte-liste { margin-bottom: 0; }

/* S13 — Aufgaben-Baum */
.baum-abschnitt { margin-bottom: var(--raum-4); }
.baum-abschnittskopf { display: flex; align-items: baseline; gap: var(--raum-3); padding-bottom: var(--raum-2); border-bottom: 1px solid var(--rahmen-stark); margin-bottom: var(--raum-2); }
.baum-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-3); min-height: 36px; padding: var(--raum-1) var(--raum-2); border-bottom: 1px solid var(--rahmen); font-size: var(--schrift-daten); }
.baum-zeile:hover { background: var(--flaeche-hover); }
.baum-ebene-2 { padding-left: var(--raum-6); }
.baum-titel { font-weight: 500; }
.baum-akteur { color: var(--text-sekundaer); }
.baum-aktivitaet { margin-left: auto; color: var(--text-sekundaer); font-size: var(--schrift-klein); }
.baum-zusammengefasst, .baum-aufklapper { margin: var(--raum-1) 0 var(--raum-2) var(--raum-5); font-size: var(--schrift-daten); }
.baum-zusammengefasst > summary { color: var(--status-gut-text); cursor: pointer; }
.baum-aufklapper > summary { color: var(--text-sekundaer); cursor: pointer; }
.ergebnis-detail { margin: 0 0 var(--raum-2) var(--raum-5); font-size: var(--schrift-daten); }
.ergebnis-detail > summary { cursor: pointer; color: var(--text-sekundaer); }
.ergebnis-inhalt { padding: var(--raum-2) var(--raum-3); background: var(--flaeche-eingelassen); border-radius: var(--radius-klein); margin-top: var(--raum-1); }
.verdikt-chip { text-transform: none; letter-spacing: normal; }

/* S13 — Zeitleiste */
.zeitleiste-tag { margin-bottom: var(--raum-4); }
.zeitleiste-datum { color: var(--text-sekundaer); margin-bottom: var(--raum-2); }
.zeitleiste-liste { list-style: none; margin: 0; padding: 0; }
.zeitleiste-eintrag { display: flex; gap: var(--raum-3); padding: var(--raum-2) 0; border-bottom: 1px solid var(--rahmen); font-size: var(--schrift-daten); }
.zeitleiste-zeit { flex: none; width: 44px; color: var(--text-sekundaer); }
.zeitleiste-akteur { flex: none; width: 160px; color: var(--text-sekundaer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeitleiste-inhalt { min-width: 0; }
.zeitleiste-qa { background: var(--akzent-flaeche); border-radius: var(--radius-klein); padding-left: var(--raum-2); padding-right: var(--raum-2); }
.zeitleiste-fehler { background: var(--status-kritisch-flaeche); border-radius: var(--radius-klein); padding-left: var(--raum-2); padding-right: var(--raum-2); }
.zeitleiste-kommentar .zeitleiste-absatz { white-space: pre-wrap; }
.zeitleiste-erstellt { color: var(--text-gedimmt); }
.zeitleiste-meta { font-size: var(--schrift-klein); }
@media (max-width: 768px) {
  .zeitleiste-akteur { width: auto; max-width: 120px; }
  .baum-ebene-2 { padding-left: var(--raum-5); }
}

.ops-umschalter { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.ops-lagebild { margin-bottom: var(--raum-2); }
.ops-zeile-gefaehrdet { box-shadow: inset 3px 0 0 var(--status-blockiert-farbe); background: color-mix(in srgb, var(--status-blockiert-flaeche) 40%, transparent); }
/* QA-Fund H1 (UI3): "gefaehrdet" ist keine einheitliche Kritikalitaet --
   eine echte Blockierung bleibt die staerkste Hervorhebung, ein Auftrag,
   der NUR ueberfaellige Aufgaben/Termine hat (keine Blockierung), erhaelt
   die schwaechere Amber-Stufe (Statusfarben-Disziplin: Rot NUR echte
   Kritisch-Faelle, Amber NUR Aufmerksamkeit). */
.ops-zeile-aufmerksamkeit { box-shadow: inset 3px 0 0 var(--status-warnung-farbe); background: color-mix(in srgb, var(--status-warnung-flaeche) 40%, transparent); }
.ops-aufgaben-blockiert { color: var(--status-blockiert-text); font-weight: 600; }
.ops-kopf-grid { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ops-kopf-block h3 { margin-bottom: var(--raum-2); color: var(--text-sekundaer); }
.ops-aufgabe-ueberfaellig { color: var(--status-kritisch-farbe); font-weight: 600; }
/* UI7-Fund: Amber-Variante fuer "ueberfaellig ohne Blockierung" -- muss zur
   Zeilenhervorhebung (.ops-zeile-aufmerksamkeit) passen, sonst zeigt
   dieselbe Zeile widerspruechlich Amber-Hintergrund + Rot-Badge. */
.ops-aufgabe-ueberfaellig-amber { color: var(--status-warnung-farbe); font-weight: 600; }
.ops-termine-vergangen { margin-top: var(--raum-2); font-size: var(--schrift-daten); }
.ops-termine-vergangen > summary { cursor: pointer; color: var(--text-sekundaer); }
.ops-kosten-summen { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); margin-top: var(--raum-3); font-size: var(--schrift-daten); color: var(--text-sekundaer); }
.ops-kosten-summe-wert { font-weight: 600; color: var(--text-primaer); font-variant-numeric: tabular-nums; }
.ops-detail-label { color: var(--text-sekundaer); font-size: var(--schrift-klein); font-weight: 600; }
.ops-db-zeile { display: flex; align-items: baseline; gap: var(--raum-3); margin-top: var(--raum-3); }
.ops-db-wert { font-family: var(--font-ueberschrift); font-size: var(--schrift-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primaer); }
.ops-db-negativ .ops-db-wert { color: var(--status-kritisch-farbe); }
.ops-db-negativ { background: var(--status-kritisch-flaeche); border-radius: var(--radius-klein); padding: var(--raum-2) var(--raum-3); }
.ops-notizen-text { white-space: pre-wrap; margin: var(--raum-2) 0 0 0; }
.ops-aktions-grid { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ops-verlauf-uebergang { font-family: var(--font-mono); font-size: var(--schrift-daten); }
/* TEIL IX, WS2 — S9-Panel "Leistungen & Einsatzplanung" (IX-11): flacher
   Panel-Stack-Baustein im etablierten ops-Muster, nur var(--...)-Tokens. */
.ops-ep-gruppe { margin-top: var(--raum-4); }
.ops-ep-gruppe > h3 { color: var(--text-sekundaer); margin-bottom: var(--raum-2); }
.ops-ep-position { border: 1px solid var(--rahmen); border-radius: var(--radius-klein); padding: var(--raum-3); margin-bottom: var(--raum-3); }
.ops-ep-position-kopf { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); align-items: baseline; }
.ops-ep-position-betrag { font-variant-numeric: tabular-nums; color: var(--text-sekundaer); }
.ops-ep-leistung { margin-top: var(--raum-3); padding-top: var(--raum-3); border-top: 1px solid var(--rahmen); }
.ops-ep-leistung-kopf { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); align-items: baseline; }
.ops-ep-intervall { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.ops-ep-regel { margin: var(--raum-2) 0 0 0; font-size: var(--schrift-daten); }
/* TEIL XII, Team B Punkt 4 — Sammelform "Bestandteile zuordnen": eine
   Checkbox-Zeile je Kandidat (eigener Feldname je Zeile, Hausmuster
   screen_kunden._parse_positionen_ids). */
.ops-ep-sammel-zeile { display: block; margin: var(--raum-2) 0; }
.ops-ep-naechster { margin: var(--raum-2) 0 0 0; font-size: var(--schrift-daten); color: var(--text-sekundaer); }
.ops-ep-aktionen { margin-top: var(--raum-2); }
/* FINISH F2 — G30-Inferenz-Kennzeichnung, A-8b(d)-Kennzeichnung und
   G35-Zeilenaktionen (nur var(--...)-Tokens, keine Hexwerte). */
.ops-termin-inferenz a { color: var(--text-sekundaer); }
.ops-termin-ohne-objekt { color: var(--status-warnung-farbe); }
.ops-termin-zeilenaktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); width: 100%; margin-top: var(--raum-2); font-size: var(--schrift-klein); }

/* S11 — Lagebild-Kachelband */
.at-lagebild { margin-bottom: var(--raum-2); }

/* S11 — Zeithorizont-Gruppen */
.at-horizont-titel { display: flex; align-items: baseline; gap: var(--raum-2); margin: var(--raum-4) 0 var(--raum-2) 0; color: var(--text-sekundaer); }
.at-horizont-anzahl { font-weight: 400; color: var(--text-gedimmt); }
.at-horizont-ueberfaellig { color: var(--status-kritisch-farbe); }
.at-horizont-beendet { color: var(--text-gedimmt); }
.at-zeile-ueberfaellig { box-shadow: inset 3px 0 0 var(--status-kritisch-farbe); }
.at-zeile-ueberfaellig td:first-child { color: var(--status-kritisch-farbe); font-weight: 600; }

/* S11 — nächste Aktionen (Eskalations-Panel) */
.at-erklaerzeile { font-size: var(--schrift-klein); margin-bottom: var(--raum-3); }
.at-erklaerzeile code { font-family: var(--font-mono); }

/* S11 — Aktions-Formulare */
.at-aktions-grid { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.at-formular { display: flex; flex-direction: column; border: 1px solid var(--rahmen); border-radius: var(--radius-klein); padding: var(--raum-3); }
.at-formular h3 { margin-bottom: var(--raum-3); }
.at-formular .button { align-self: flex-start; margin-top: auto; }

/* S11 — Einsatzplanung (TEIL IX, WS2: Bezug-Leistungsnamen + Reichweite) */
.at-termin-leistungen { color: var(--text-sekundaer); font-size: var(--schrift-klein); }
.at-ep-reichweite { margin-bottom: var(--raum-2); }

/* S11 — Zeilenaktionen (FINISH F2/G29) + A-8b(d)-Kennzeichnung */
.at-aktionszelle { min-width: 160px; }
.at-zeilenaktionen { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); font-size: var(--schrift-klein); }
.at-ohne-objekt { color: var(--status-warnung-farbe); }

.kd-sekundaerzeile { font-size: var(--schrift-klein); color: var(--text-sekundaer); margin-top: var(--raum-1); }
.kd-summenzeile td { font-weight: 600; border-top: 2px solid var(--rahmen-stark); background: var(--flaeche-eingelassen); }
.kd-aufklapper { margin-top: var(--raum-1); }
.kd-position-ausgeschlossen { color: var(--text-sekundaer); }
.kd-position-ausgeschlossen .kd-position-bezeichnung { text-decoration: line-through; text-decoration-color: var(--linie); }
.kd-position-kompakt { padding-block: var(--raum-1); }
.kd-position-kompakt .kd-aufklapper { margin-top: 0; }
.kd-position-aktion { display: inline-block; margin-right: var(--raum-1); }
.vg-panel .vg-liste { list-style: none; padding: 0; margin: 0 0 var(--raum-2) 0; }
.vg-liste li { padding: 2px 0; }
.vg-liste .vg-fehlt { color: var(--status-warnung-farbe); }
.vg-liste .vg-ok { color: var(--text-sekundaer); }
.vg-zeichen { display: inline-block; width: 1.4em; }
.vg-schritt { border-top: 1px solid var(--linie); padding-top: var(--raum-2); margin-top: var(--raum-2); }
.vg-schritt h3 { margin: 0 0 var(--raum-1) 0; }
.vg-form { max-width: 34rem; }
.vg-status-warnung { color: var(--status-warnung-farbe); font-weight: 600; }
@media (max-width: 767px) { .vg-form { max-width: 100%; } }
.kd-aufklapper summary { cursor: pointer; font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.kd-aufklapper summary:hover { color: var(--akzent); }
.kd-aufklapper-inhalt { margin-top: var(--raum-3); padding: var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--flaeche-eingelassen); }
.kd-status-entwurf { background: var(--status-neutral-flaeche); color: var(--status-neutral-text); }
.kd-status-entwurf .status-punkt { background: var(--status-neutral-farbe); }
.kd-status-versendet { background: var(--status-laufend-flaeche); color: var(--status-laufend-text); }
.kd-status-versendet .status-punkt { background: var(--status-laufend-farbe); }
.kd-status-angenommen, .kd-status-abgeschlossen { background: var(--status-gut-flaeche); color: var(--status-gut-text); }
.kd-status-angenommen .status-punkt, .kd-status-abgeschlossen .status-punkt { background: var(--status-gut-farbe); }
.kd-status-abgelehnt, .kd-status-storniert { background: var(--status-kritisch-flaeche); color: var(--status-kritisch-text); }
.kd-status-abgelehnt .status-punkt, .kd-status-storniert .status-punkt { background: var(--status-kritisch-farbe); }
.kd-status-geplant { background: var(--status-neutral-flaeche); color: var(--status-neutral-text); }
.kd-status-geplant .status-punkt { background: var(--status-neutral-farbe); }
.kd-status-laufend { background: var(--status-laufend-flaeche); color: var(--status-laufend-text); }
.kd-status-laufend .status-punkt { background: var(--status-laufend-farbe); }
.kd-zeile-aktiv { box-shadow: inset 3px 0 0 var(--status-gut-farbe); }
.kd-zeile-karteileiche, .kd-zeile-karteileiche a { color: var(--text-gedimmt); }
.kd-objekt-eintrag { display: block; }
.kd-objekt-auftraege { margin: var(--raum-2) 0 0 0; padding-left: var(--raum-6); border-left: 2px solid var(--rahmen); list-style: none; }
.kd-objekt-auftraege li { padding: var(--raum-1) 0; display: flex; align-items: baseline; gap: var(--raum-3); }
.kd-beauftragen { margin-top: var(--raum-4); padding-top: var(--raum-4); border-top: 1px solid var(--rahmen); }
.kd-beauftragen h3 { margin: 0 0 var(--raum-2) 0; font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.kd-position-liste { list-style: none; margin: 0 0 var(--raum-3) 0; padding: 0; }
.kd-position-zeile { display: flex; align-items: baseline; gap: var(--raum-3); padding: var(--raum-1) 0; }
.kd-position-zeile label { display: flex; align-items: baseline; gap: var(--raum-3); cursor: pointer; width: 100%; }
.kd-position-bezeichnung { flex: 1; }
.kd-position-marker { font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.kd-position-verbindlich .kd-position-marker { color: var(--status-gut-farbe); }
.kd-detail-liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--raum-1) var(--raum-4); align-items: baseline; }
.kd-detail-label { color: var(--text-sekundaer); font-size: var(--schrift-klein); font-weight: 600; }
.kd-aktions-grid { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kd-verlauf-uebergang { font-family: var(--font-mono); font-size: var(--schrift-daten); }

.kd-luecken { margin: var(--raum-2) 0; }
.kd-badge-unvollstaendig { color: var(--status-warnung-farbe); font-size: var(--schrift-klein); white-space: nowrap; }
.kd-bearbeiten-link { margin-right: var(--raum-2); }

.kd-stamm-form { max-width: 640px; }
.kd-stamm-form .eingabe { width: 100%; box-sizing: border-box; }
.kd-stamm-aktionen { display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center; }
@media (max-width: 767px) { .kd-stamm-form { max-width: 100%; } }

/* Screen S14 — Controlling */
.ctrl-erklaerung { margin: 0 0 var(--raum-4) 0; color: var(--text-sekundaer); font-size: var(--schrift-daten); }
.ctrl-fusslink { font-size: var(--schrift-daten); white-space: nowrap; }
.ctrl-zeile-warnung { box-shadow: inset 3px 0 0 var(--status-warnung-farbe); }
.ctrl-zeile-kritisch {
  box-shadow: inset 3px 0 0 var(--status-kritisch-farbe);
  background: var(--status-kritisch-flaeche);
  background: color-mix(in srgb, var(--status-kritisch-flaeche) 40%, transparent);
}
.ctrl-wert-kritisch { color: var(--status-kritisch-farbe); font-weight: 600; }
.ctrl-summenzeile td { font-weight: 600; border-top: 2px solid var(--rahmen-stark); background: var(--flaeche-eingelassen); }
.ctrl-datenbasis { margin-top: var(--raum-3); }
.ctrl-executive { margin-bottom: var(--raum-4); }
/* Management-Kacheln (2026-09-06): grosser KPI-Block direkt unter der
   Ueberschrift, Designsystem `.kpi-grid`/`.kpi-kachel`; nur die Groesse
   und das Umbruchverhalten werden verstaerkt. Wert und Einheit bleiben
   getrennt lesbar, kein horizontaler Overflow (min-width: 0 im Grid-Item,
   overflow-wrap fuer lange Werte, Einheit ohne Umbruch). */
.ctrl-management { margin: var(--raum-3) 0 var(--raum-5) 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ctrl-management .kpi-kachel { min-width: 0; padding: var(--raum-5) var(--raum-4); }
.ctrl-management .kpi-wert { font-size: clamp(1.75rem, 2.6vw, 2.5rem); overflow-wrap: anywhere; }
.ctrl-management .kpi-einheit { font-size: var(--schrift-koerper); white-space: nowrap; }
.ctrl-management .kpi-hinweis { margin-top: var(--raum-2); }
.ctrl-management-ist { margin-top: 0; }
.ctrl-management-ist .kpi-wert { font-size: clamp(1.4rem, 2vw, 1.9rem); }
/* Kompakter Detailbereich unter den Kacheln: je Dimension eine Liste. */
.ctrl-kopf-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--raum-4); margin-top: var(--raum-4); }
.ctrl-detail-block { min-width: 0; border-top: 1px solid var(--rahmen); padding-top: var(--raum-3); }
.ctrl-detail-titel { margin: 0 0 var(--raum-2) 0; font-size: var(--schrift-klein); color: var(--text-sekundaer); font-weight: 600; }
.ctrl-detail-liste { list-style: none; margin: 0; padding: 0; }
.ctrl-detail-liste li { display: flex; justify-content: space-between; gap: var(--raum-3); padding: var(--raum-1) 0; font-size: var(--schrift-daten); border-bottom: 1px dashed var(--rahmen); }
.ctrl-detail-liste li:last-child { border-bottom: none; }
.ctrl-detail-liste a { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.ctrl-detail-liste a:hover { text-decoration: underline; }
.ctrl-detail-wert { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .ctrl-kopf-details { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) { .ctrl-management { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ctrl-management { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
  .ctrl-management .kpi-kachel { padding: var(--raum-4) var(--raum-3); }
  .ctrl-management .kpi-wert { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
}
@media (max-width: 480px) { .ctrl-management { grid-template-columns: minmax(0, 1fr); } }
.ctrl-details-vertieft { margin-top: var(--raum-5); border-top: 1px solid var(--rahmen); padding-top: var(--raum-3); }
.ctrl-details-vertieft > summary { cursor: pointer; color: var(--text-sekundaer); font-weight: 600; padding: var(--raum-2) 0; }
.ctrl-details-vertieft[open] > summary { color: var(--text-primaer); }
.ctrl-details-inhalt > .ctrl-panel { margin-top: var(--raum-4); }

/* Screen S15 — Marketing / Growth */
.growth-fusslink { font-size: var(--schrift-daten); white-space: nowrap; }
.growth-herkunft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-5); align-items: start; }
@media (max-width: 1024px) { .growth-herkunft-grid { grid-template-columns: 1fr; } }
.growth-teiltabelle h3 { margin-bottom: var(--raum-2); }
.growth-zwischentitel { margin: var(--raum-5) 0 var(--raum-2) 0; }
.growth-leer { margin: 0 0 var(--raum-3) 0; color: var(--text-sekundaer); }
/* Vier gleichrangige Panels (SEO Performance/Gesundheit/Agent + Weitere
   Kanäle, QA-Korrektur UI8.5) — auto-fit statt fester Spaltenzahl, damit
   die Karten unabhängig von der genauen Panel-Anzahl sauber umbrechen. */
.growth-platzhalter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--raum-5); align-items: start; }
.growth-lauf-zusatz { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-1); }

/* S16 — System */
.sys-panel h3 { margin: var(--raum-4) 0 var(--raum-2) 0; }
.sys-lagebild-kacheln { margin-top: var(--raum-2); }
.sys-lagebild p { margin-top: var(--raum-3); }
/* Kompakter Amber-Badge fuer den Dev-normalen Retention-Zaehler (GF-
   Korrekturrunde nach UI8-Review C.2) -- reduzierte visuelle Gewichtung
   gegenueber der vollen .kpi-kachel-Flaeche, gleiche Amber-Semantik
   (status-badge status-warnung, bereits bestehende Klasse). */
.sys-lagebild-retention { margin-top: var(--raum-3); }
/* F3/G12: positiver Leerzustand des Lagebilds + Gruppe "Daten & Sicherheit". */
.sys-lagebild-leer { margin: 0; }
.sys-gruppe { margin-top: var(--raum-5); }
.sys-gruppen-titel { font-size: var(--schrift-koerper); color: var(--text-sekundaer); margin: 0 0 var(--raum-2) 0; text-transform: uppercase; letter-spacing: 0.04em; }
.sys-integration { padding-top: var(--raum-3); }
.sys-integration + .sys-integration { margin-top: var(--raum-4); padding-top: var(--raum-4); border-top: 1px solid var(--rahmen); }
.sys-integration-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3); margin-bottom: var(--raum-2); }
.sys-integration-kopf h3 { margin: 0; font-size: var(--schrift-koerper); }
.sys-kommando-hinweis { margin-top: var(--raum-3); }
.sys-kommando { display: block; width: fit-content; background: var(--flaeche-eingelassen); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); padding: var(--raum-1) var(--raum-3); margin-top: var(--raum-2); user-select: all; }
.sys-alarm-liste { list-style: none; margin: var(--raum-2) 0 0 0; padding: 0; }
.sys-alarm-eintrag { border-bottom: 1px solid var(--rahmen); padding: var(--raum-2) 0; font-size: var(--schrift-daten); }
.sys-alarm-eintrag > details > summary { cursor: pointer; }
.sys-alarm-text { background: var(--flaeche-eingelassen); border-radius: var(--radius-klein); padding: var(--raum-3); margin: var(--raum-2) 0 0 0; white-space: pre-wrap; }
.sys-typ-badge { display: inline-block; padding: 0 var(--raum-2); border-radius: var(--radius-klein); font-size: var(--schrift-klein); font-weight: 600; }
.sys-typ-mensch { background: var(--akzent-flaeche); color: var(--akzent); }
.sys-typ-agent { background: var(--flaeche-eingelassen); color: var(--text-sekundaer); }
.sys-aktionen-zelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.sys-inline-formular { display: inline-flex; align-items: center; gap: var(--raum-2); margin: 0; }
.sys-deaktivieren > summary { cursor: pointer; font-size: var(--schrift-klein); color: var(--text-sekundaer); }
.sys-deaktivieren[open] > summary { color: var(--status-kritisch-farbe); }
.sys-deaktivieren-bestaetigung { margin-top: var(--raum-2); padding: var(--raum-2) var(--raum-3); border: 1px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--status-kritisch-flaeche); max-width: 320px; }
.sys-deaktivieren-bestaetigung p { margin: 0 0 var(--raum-2) 0; }
.sys-select { height: 26px; width: auto; font-size: var(--schrift-klein); }
/* TEIL VI, Workstream 5 -- Dokument-Import */
.sys-import-fehler-liste { list-style: none; margin: var(--raum-2) 0 0 0; padding: 0; }
.sys-import-fehler-eintrag { border-bottom: 1px solid var(--rahmen); padding: var(--raum-2) 0; font-size: var(--schrift-daten); }
.sys-import-fehler-eintrag:last-child { border-bottom: none; }