/*
 * Designsystem des Labs (Recplast Labs, Admin-Schulung DORA).
 *
 * Erste Stylesheet-Datei: Alles danach baut auf diesen Tokens auf. Die Doku steht in
 * 08_Pruefstand_V2/28_Designsystem.md, die lebende Musterseite ist designsystem.html.
 *
 * Aufbau
 *   1. Tokens (:root)        Farben, dunkles Werkzeug-Set, Typografie, Abstaende, Radien,
 *                            Tiefe, Raender, Fokus, Bewegung. Je Token eine Bedeutung.
 *   2. Dunkler Geltungsbereich (.ds-dark)   Semantische Tokens auf das dunkle Set gelegt;
 *                            jeder Baustein darin wird dunkel, ohne eigene Regeln.
 *   3. Grundregeln           Fokusring, tabulare Ziffern, reduzierte Bewegung.
 *   4. Bausteine (.ds-*)     Fensterrahmen, Werkzeugkopf, Reiter, Werkzeugleiste, Knoepfe,
 *                            Eingaben, Auswahl, Haken/Schalter, Tabelle, Statusmarke, Chip,
 *                            Kennzahl, Leerzustand, Seitenpanel, Hinweisband, Fortschritt,
 *                            Tooltip, Toast, Dialog, Skeleton.
 *
 * Regeln
 *   - Schriftgroessen nur aus der Skala --fs-*, kleinste Stufe 12 px (Zoom auf dem Laptop).
 *   - Textfarben nur aus --ds-text, --ds-text-2, --ds-text-3 (hell) beziehungsweise dem
 *     dunklen Set; alle Paare sind auf 4,5:1 geprueft (Skript im Scratchpad, Doku 28).
 *   - Bewertungsgruen #1F7A4C bedeutet "richtig" und sonst nichts.
 *   - Keine externen Schriften, keine CDNs: Systemschriften mit Rueckfallkette.
 */

/* ================================================================
   1. Tokens
   ================================================================ */
:root {
  /* Netzzonen (Firewall, Topologie): reine Kennfarben ohne Bewertung. Bewusst keine
     Semantikfarbe, damit keine Zone wie "richtig" oder "falsch" aussieht. */
  --ds-zone-internet: #64748b;
  --ds-zone-dmz:      #a16207;
  --ds-zone-office:   #2f6fae;
  --ds-zone-admin:    #6d4fc2;
  --ds-zone-core:     #0f766e;
  /* ---------- Neutrale Grautreppe (kuehl, wie Linear/Vercel) ----------
     0 bis 150 sind Flaechen, 200 bis 400 Linien und Griffe, 600 bis 900 Text. 500 ist
     die Grenze: Symbole und Platzhalter, nie Fliesstext (3,9:1 auf Weiss). */
  --ds-gray-0:   #ffffff;
  --ds-gray-50:  #f8f9fb;
  --ds-gray-100: #f1f3f6;
  --ds-gray-150: #e9edf1;
  --ds-gray-200: #dfe4ea;
  --ds-gray-300: #cbd2da;
  --ds-gray-400: #a6b0bb;
  --ds-gray-500: #7c8793;
  --ds-gray-600: #5f6d79;
  --ds-gray-700: #3f4b56;
  --ds-gray-800: #27313a;
  --ds-gray-900: #131a21;

  /* ---------- Primaerfarbe: Aktion und Fokus ----------
     Ein ruhiges Blau fuer den einen wichtigen Knopf, den Fokusring und Auswahlzustaende.
     Werkzeugfarben (Registry) sind Identitaet, nicht Aktion. */
  --ds-primary:        #2a67b2;
  --ds-primary-hover:  #235a9e;
  --ds-primary-active: #1d4c86;
  --ds-primary-soft:   #e9f0f9;   /* Auswahlzeile, aktiver Reiter, Chip "an" */
  --ds-primary-text:   #1d4c86;   /* Text auf --ds-primary-soft */
  --ds-primary-ring:   rgba(42, 103, 178, 0.28);

  /* ---------- Semantik (hell): Flaeche fuer Marken, Text auf der weichen Flaeche ----------
     ok    = richtig, zulaessig, abgeschlossen (Bewertungsgruen, bleibt #1F7A4C)
     warn  = Hinweis, Entwurf, Frist laeuft
     bad   = kritisch, falsch, verweigert
     info  = neutrale Auskunft (Primaerfamilie) */
  --ds-ok:        #1f7a4c;
  --ds-ok-soft:   #e6f4ec;
  --ds-ok-text:   #1a6440;
  --ds-warn:      #b7791f;
  --ds-warn-soft: #fbf1dd;
  --ds-warn-text: #7a5206;
  --ds-bad:       #c0392b;
  --ds-bad-soft:  #fbeae8;
  --ds-bad-text:  #a5281c;
  --ds-info:      #2a67b2;
  --ds-info-soft: #e9f0f9;
  --ds-info-text: #1d4c86;

  /* ---------- Semantik (dunkel): dieselben Bedeutungen auf dunklem Grund ---------- */
  --ds-ok-dk:   #35b37e;
  --ds-warn-dk: #e0a020;
  --ds-bad-dk:  #ef5f64;
  --ds-info-dk: #3d9be0;

  /* ---------- Marke ----------
     Das Rot der Schulungsunterlagen, nur als Markenzeichen (Kachel, Kante). Keine
     Flaeche, kein Knopf: Das Lab soll wie ein Betrieb aussehen, nicht wie ein Handout. */
  --ds-brand: #a01d22;

  /* ---------- Semantische Flaechen und Texte (hell, Vorgabe) ---------- */
  --ds-bg-app:      #dfe5ec;             /* Desktop-Grund */
  --ds-bg-surface:  var(--ds-gray-0);    /* Fenster, Karten, Tabellen */
  --ds-bg-subtle:   var(--ds-gray-50);   /* Listenflaechen, Lesebereich */
  --ds-bg-muted:    var(--ds-gray-100);  /* Tabellenkopf, Werkzeugleiste, Zebra */
  --ds-bg-sunken:   var(--ds-gray-150);  /* Spur, Eingabe-Hintergrund, Trennflaechen */
  --ds-bg-hover:    var(--ds-gray-100);
  --ds-bg-active:   var(--ds-gray-150);
  --ds-text:        var(--ds-gray-900);
  --ds-text-2:      var(--ds-gray-700);
  --ds-text-3:      var(--ds-gray-600);  /* hellste erlaubte Textfarbe */
  --ds-text-inverse: #ffffff;
  --ds-icon:        var(--ds-gray-500);
  --ds-border:        var(--ds-gray-200);
  --ds-border-subtle: var(--ds-gray-150);
  --ds-border-strong: var(--ds-gray-300);

  /* ---------- Dunkles Werkzeug-Set (SIEM, EDR, Konsole, Terminal) ----------
     Ein eigenes Set, kein invertiertes Grau: Kalt-blaues Nachtblau wie Splunk, Sentinel
     und Live-Response-Konsolen. siem-shell.css liegt auf denselben Werten. */
  --ds-dk-bg:          #0e1621;
  --ds-dk-surface:     #16212e;
  --ds-dk-surface-2:   #1c2836;
  --ds-dk-surface-3:   #243242;
  --ds-dk-hover:       #22303f;
  --ds-dk-border:      #2a3a4d;
  --ds-dk-border-strong: #3a4c61;
  --ds-dk-text:        #e3ebf2;
  --ds-dk-text-2:      #cdd8e3;
  --ds-dk-text-3:      #9fb0bf;          /* gedaempft, mindestens 5,2:1 auf jedem dk-Grund */
  --ds-dk-icon:        #7a8a9b;
  --ds-dk-accent:      #3d9be0;
  --ds-dk-term-bg:     #0a1119;
  --ds-dk-term-dim:    #8a9bad;

  /* ---------- Huelle des Arbeitsplatzes (Titelleiste, Taskleiste, Startmenue) ----------
     Etwas waermer als das Werkzeug-Set, damit SIEM und Taskleiste nicht zu einer Flaeche
     verschmelzen. */
  --ds-shell-bg:       #1a2632;
  --ds-shell-bg-2:     #14202b;
  --ds-shell-raised:   #22303f;
  --ds-shell-hover:    #24333f;
  --ds-shell-active:   #33475a;
  --ds-shell-border:   #2a3a4d;
  --ds-shell-text:     #dbe6ef;
  --ds-shell-text-dim: #9fb0bf;

  /* ---------- Typografie ----------
     Eine Sans aus Systemschriften (Windows: Segoe UI Variable oder Segoe UI; sonst die
     Systemschrift), eine Mono. Keine Schrift wird nachgeladen. */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Liberation Mono", monospace;

  /* Skala, sechs Stufen, kleinste 12 px (Zoom auf 1366 x 768). Der Rauchtest prueft
     Untergrenze und Zugehoerigkeit jeder font-size in den Stylesheets der Oberflaeche.
       xs  Mikroetiketten, Chips, Badges, Zeitstempel         12 px, oft Versalien
       s   dichte Tabellen, Metadaten, Monospace              13 px
       m   Fliesstext in Werkzeugen, Listen, Knoepfe          14 px
       l   Werkzeugtitel, Mail- und Dokumenttext, Lead        16 px
       xl  Ueberschriften (Urteil, Beitritt, Dialogfrage)     20 px
       xxl grosse Zahlen (Kennzahl), Seitentitel              24 px */
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-l: 16px;
  --fs-xl: 20px;
  --fs-xxl: 24px;
  --fs-mono: 13px;
  --fs-display: 44px;   /* Uhr auf dem Desktop (Workplace V3) */
  --fs-hero: 30px;      /* Begruessung im Startmenue */

  --lh-tight: 1.2;     /* Ueberschriften, Kennzahlen */
  --lh-snug: 1.35;     /* Tabellen, Listen */
  --lh-base: 1.5;      /* Fliesstext in Werkzeugen */
  --lh-relaxed: 1.6;   /* Mail, Dokument, Auswertung */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-caps: 0.06em;   /* Sperrung fuer Versalien-Etiketten */
  --ls-tight: -0.01em; /* grosse Ueberschriften */

  /* Tintenstufen (Altnamen, von Werkzeugen und Modulen genutzt): auf die Grautreppe
     gelegt, damit alte Klassen das neue System bekommen, ohne umzuziehen. */
  --ink: var(--ds-text);
  --ink-2: var(--ds-text-2);
  --ink-3: var(--ds-text-3);
  --ink-dim: var(--ds-dk-text-3);
  --ink-dim-term: var(--ds-dk-term-dim);
  --line: var(--ds-border-subtle);

  /* ---------- Abstaende (4er-Raster) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- Radien ----------
     xs Marken und Tabellenzellen, s Knoepfe und Eingaben, m Karten und Panels,
     l Fenster und Dialoge, pill Chips und Zaehler. */
  --r-xs: 3px;
  --r-s: 5px;
  --r-m: 8px;
  --r-l: 12px;
  --r-pill: 999px;

  /* ---------- Tiefe ----------
     1 Haarlinie (Karte auf Flaeche), 2 Karte mit Abstand, 3 schwebendes Fenster,
     4 Dialog und Menue ueber allem. Schatten sind reine Tinte, ohne Farbe. */
  --sh-1: 0 1px 2px rgba(19, 26, 33, 0.06), 0 0 0 1px rgba(19, 26, 33, 0.04);
  --sh-2: 0 1px 2px rgba(19, 26, 33, 0.06), 0 8px 24px -12px rgba(19, 26, 33, 0.22);
  --sh-3: 0 2px 6px rgba(19, 26, 33, 0.10), 0 18px 48px -16px rgba(19, 26, 33, 0.34);
  --sh-4: 0 4px 12px rgba(19, 26, 33, 0.14), 0 32px 80px -20px rgba(19, 26, 33, 0.48);
  --sh-dk-3: 0 2px 6px rgba(0, 0, 0, 0.30), 0 18px 44px -12px rgba(0, 0, 0, 0.55);

  /* ---------- Raender ---------- */
  --bd: 1px solid var(--ds-border);
  --bd-subtle: 1px solid var(--ds-border-subtle);
  --bd-strong: 1px solid var(--ds-border-strong);

  /* ---------- Fokus ---------- */
  --focus-ring: 0 0 0 3px var(--ds-primary-ring);
  --focus-outline: 2px solid var(--ds-primary);

  /* ---------- Bewegung ----------
     1 Rueckmeldung (Hover, Druck), 2 Zustandswechsel (Reiter, Panel), 3 Einlaufen
     (Fenster, Toast). Unter prefers-reduced-motion werden alle drei null. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Masse der Huelle ---------- */
  --ds-control-h: 32px;     /* Knoepfe, Eingaben, Auswahl */
  --ds-control-h-sm: 26px;
  --ds-row-h: 32px;         /* dichte Tabellenzeile */
  --ds-head-h: 52px;        /* Werkzeugkopf */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* ================================================================
   2. Dunkler Geltungsbereich
   Innerhalb von .ds-dark gelten die semantischen Tokens des dunklen Sets. Jeder
   Baustein darunter wird dunkel, ohne eine eigene Regel. Werkzeuge mit dunkler
   Flaeche (SIEM, EDR, Konsole) setzen die Klasse an ihrem Rahmen.
   ================================================================ */
.ds-dark {
  --ds-bg-app:      var(--ds-dk-bg);
  --ds-bg-surface:  var(--ds-dk-surface);
  --ds-bg-subtle:   var(--ds-dk-surface-2);
  --ds-bg-muted:    var(--ds-dk-surface-2);
  --ds-bg-sunken:   var(--ds-dk-bg);
  --ds-bg-hover:    var(--ds-dk-hover);
  --ds-bg-active:   var(--ds-dk-surface-3);
  --ds-text:        var(--ds-dk-text);
  --ds-text-2:      var(--ds-dk-text-2);
  --ds-text-3:      var(--ds-dk-text-3);
  --ds-icon:        var(--ds-dk-icon);
  --ds-border:        var(--ds-dk-border);
  --ds-border-subtle: var(--ds-dk-border);
  --ds-border-strong: var(--ds-dk-border-strong);
  --ds-primary:        var(--ds-dk-accent);
  --ds-primary-hover:  #58abe6;
  --ds-primary-active: #2f87c9;
  --ds-primary-soft:   rgba(61, 155, 224, 0.16);
  --ds-primary-text:   #8cc8f0;
  --ds-primary-ring:   rgba(61, 155, 224, 0.35);
  --ds-ok:        var(--ds-ok-dk);
  --ds-ok-soft:   rgba(53, 179, 126, 0.14);
  --ds-ok-text:   #7ad6a8;
  --ds-warn:      var(--ds-warn-dk);
  --ds-warn-soft: rgba(224, 160, 32, 0.14);
  --ds-warn-text: #f0c56a;
  --ds-bad:       var(--ds-bad-dk);
  --ds-bad-soft:  rgba(229, 72, 77, 0.14);
  --ds-bad-text:  #f59a9d;
  --ds-info:      var(--ds-dk-accent);
  --ds-info-soft: rgba(61, 155, 224, 0.14);
  --ds-info-text: #8cc8f0;
  --ink: var(--ds-dk-text);
  --ink-2: var(--ds-dk-text-2);
  --ink-3: var(--ds-dk-text-3);
  --line: var(--ds-dk-border);
  --sh-2: var(--sh-dk-3);
  --sh-3: var(--sh-dk-3);
  color: var(--ds-text);
  background: var(--ds-bg-app);
  color-scheme: dark;
}

/* ================================================================
   3. Grundregeln
   ================================================================ */
/* Ein Fokusring fuer alles Bedienbare. Nur bei Tastaturfokus, nie beim Mausklick. */
.ds-btn:focus-visible, .ds-input:focus-visible, .ds-select:focus-visible,
.ds-textarea:focus-visible, .ds-tab:focus-visible, .ds-chip:focus-visible,
.ds-check input:focus-visible, .ds-radio input:focus-visible, .ds-switch input:focus-visible,
.ds-window-btn:focus-visible, .ds-table tr:focus-visible, .ds-table th:focus-visible,
.ds-panel-close:focus-visible, .ds-toast-x:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 1px;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: var(--focus-ring);
}

/* Zahlen, Zeiten und Kennungen stehen in Spalten: gleiche Breite je Ziffer. */
.ds-num, .ds-table, .ds-kpi-value, .ds-mono, .ds-window, .ds-toolhead-meta-v {
  font-variant-numeric: tabular-nums;
}
.ds-mono { font-family: var(--font-mono); font-size: var(--fs-s); }

/* Mikroetikett in Versalien: 12 px ist die Untergrenze, die Sperrung macht es lesbar. */
.ds-kicker, .ds-label-caps {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ds-text-3);
}
.ds-section-title {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: var(--fw-semibold);
  color: var(--ds-text);
  letter-spacing: var(--ls-tight);
}
.ds-sep { height: 1px; background: var(--ds-border-subtle); border: 0; margin: var(--sp-3) 0; }
.ds-vsep { width: 1px; align-self: stretch; background: var(--ds-border); margin: 0 var(--sp-1); }

/* Karte: Flaeche mit Haarlinie. Auf Weiss trennt die Linie, auf Grau der Schatten. */
.ds-card {
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-m);
  padding: var(--sp-4) var(--sp-5);
  color: var(--ds-text);
}
.ds-card--raised { border: 0; box-shadow: var(--sh-2); }

/* ================================================================
   4. Bausteine
   ================================================================ */

/* ---------- Fensterrahmen und Fensterleiste ----------
   Der Rahmen des Desktops (.ws-win in workspace.css) teilt diese Regeln. Leiste hell,
   Titel mit Werkzeugmarke, drei Knoepfe rechts; der Fokus hebt den Schatten. */
.ds-window {
  display: flex;
  flex-direction: column;
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--r-m);
  box-shadow: var(--sh-2);
  overflow: hidden;
  color: var(--ds-text);
  font-family: var(--font-sans);
}
.ds-window.is-focused { border-color: var(--ds-gray-400); box-shadow: var(--sh-3); }
.ds-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-1) 0 var(--sp-3);
  background: var(--ds-bg-muted);
  border-bottom: var(--bd);
  user-select: none;
  flex-shrink: 0;
}
.is-focused > .ds-window-bar, .ds-window.is-focused .ds-window-bar { background: var(--ds-bg-surface); }
.ds-window-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.is-focused .ds-window-title { color: var(--ds-text); }
.ds-window-mark {
  width: 16px; height: 16px; border-radius: var(--r-xs); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.ds-window-mark svg { width: 62%; height: 62%; stroke-width: 2.4; }
.ds-window-btns { display: flex; gap: 2px; }
.ds-window-btn {
  width: 30px; height: 24px; border: 0; background: transparent; color: var(--ds-text-2);
  border-radius: var(--r-xs); cursor: pointer; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-l); line-height: 1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ds-window-btn:hover { background: var(--ds-bg-active); color: var(--ds-text); }
.ds-window-btn--close:hover { background: var(--ds-bad); color: #fff; }
.ds-window-body { flex: 1; min-height: 0; overflow: auto; }

/* ---------- Werkzeugkopf ----------
   Marke links, Name mit Version, Untertitel; rechts Zustand (Etikett + Wert). Dazwischen
   der Slot .ds-toolhead-sig fuer die Signatur des realen Vorbilds (Umgebungs-Badge,
   Suchleiste, Zeitfenster, Mandant). Varianten: --dark (Vorgabe, Fachwerkzeug), --light
   (Portal, Formular), --paper (Dokument, Ablage), --accent (Akzent als Flaeche). */
.ds-toolhead {
  --accent: var(--ds-primary);
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--ds-head-h);
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(180deg, #212a33 0%, #1a222a 100%);
  color: #eef3f7;
  position: relative;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.ds-toolhead::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent) 30%, transparent);
  opacity: 0.9;
}
.ds-toolhead-mark {
  width: 30px; height: 30px; border-radius: var(--r-m); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: color-mix(in srgb, var(--accent) 70%, white);
}
.ds-toolhead-mark svg { width: 17px; height: 17px; }
.ds-toolhead-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-toolhead-name {
  display: flex; align-items: baseline; gap: 7px;
  font-size: var(--fs-m); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
.ds-toolhead-ver {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); font-family: var(--font-mono);
  color: #93a4b4; border: 1px solid #35434f; border-radius: var(--r-xs); padding: 1px 5px;
}
.ds-toolhead-sub { font-size: var(--fs-s); color: #93a4b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-toolhead-sig { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; margin-left: var(--sp-2); }
.ds-toolhead-right { display: flex; gap: var(--sp-5); flex-shrink: 0; margin-left: auto; }
.ds-toolhead-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ds-toolhead-meta-l {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: #93a4b4;
}
.ds-toolhead-meta-v { font-size: var(--fs-s); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.ds-toolhead-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ok-dk); box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.16); }
.ds-toolhead-dot--warn { background: var(--ds-warn-dk); box-shadow: 0 0 0 3px rgba(224, 160, 32, 0.16); }
.ds-toolhead-dot--bad { background: var(--ds-bad-dk); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.16); }
/* Umgebungs-Badge in der Signatur (PROD, Mandant, Region) */
.ds-toolhead-env {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase;
  border-radius: var(--r-xs); padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, white);
}
/* Suchleiste in der Signatur (Splunk, Tenable) */
.ds-toolhead-search {
  display: flex; align-items: center; gap: var(--sp-2); flex: 1; max-width: 460px; min-width: 120px;
  height: 28px; padding: 0 var(--sp-2) 0 var(--sp-3);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-s); color: #cdd8e3; font-family: var(--font-mono); font-size: var(--fs-s);
  white-space: nowrap; overflow: hidden;
}
.ds-toolhead-search svg { width: 13px; height: 13px; color: #93a4b4; flex-shrink: 0; }
/* Tabs direkt im Kopf (Defender, ServiceNow) */
.ds-toolhead-tabs { display: flex; gap: 2px; margin-left: var(--sp-3); align-self: stretch; }
.ds-toolhead-tab {
  display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  font-size: var(--fs-s); font-weight: var(--fw-medium); color: #93a4b4;
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0;
}
.ds-toolhead-tab.is-active { color: #eef3f7; border-bottom-color: var(--accent); }

.ds-toolhead--light {
  background: var(--ds-bg-surface); color: var(--ds-text);
  border-bottom: var(--bd);
}
.ds-toolhead--light::after { opacity: 1; height: 2px; }
.ds-toolhead--light .ds-toolhead-mark { background: color-mix(in srgb, var(--accent) 12%, white); border-color: color-mix(in srgb, var(--accent) 35%, white); color: var(--accent); }
.ds-toolhead--light .ds-toolhead-sub, .ds-toolhead--light .ds-toolhead-meta-l, .ds-toolhead--light .ds-toolhead-tab { color: var(--ds-text-3); }
.ds-toolhead--light .ds-toolhead-ver { color: var(--ds-text-3); border-color: var(--ds-border-strong); }
.ds-toolhead--light .ds-toolhead-tab.is-active { color: var(--ds-text); }
.ds-toolhead--light .ds-toolhead-search { background: var(--ds-bg-muted); border-color: var(--ds-border); color: var(--ds-text-2); }
.ds-toolhead--light .ds-toolhead-env { color: color-mix(in srgb, var(--accent) 80%, black); }

.ds-toolhead--paper {
  background: #f4f2ed; color: #33302a; border-bottom: 1px solid #e2ddd2;
}
.ds-toolhead--paper::after { display: none; }
.ds-toolhead--paper .ds-toolhead-mark { background: #fff; border-color: #ddd6c8; color: #6f6350; }
.ds-toolhead--paper .ds-toolhead-name { font-size: var(--fs-l); font-weight: var(--fw-bold); }
.ds-toolhead--paper .ds-toolhead-sub, .ds-toolhead--paper .ds-toolhead-meta-l { color: #6f6757; }
.ds-toolhead--paper .ds-toolhead-ver { color: #6f6757; border-color: #ddd6c8; }

.ds-toolhead--accent { background: var(--accent); color: #fff; }
.ds-toolhead--accent::after { background: rgba(0, 0, 0, 0.18); }
.ds-toolhead--accent .ds-toolhead-mark { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.ds-toolhead--accent .ds-toolhead-sub, .ds-toolhead--accent .ds-toolhead-meta-l, .ds-toolhead--accent .ds-toolhead-tab { color: rgba(255, 255, 255, 0.82); }
.ds-toolhead--accent .ds-toolhead-ver { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.ds-toolhead--accent .ds-toolhead-env { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.ds-toolhead--accent .ds-toolhead-tab.is-active { color: #fff; border-bottom-color: #fff; }

/* ---------- Reiter ---------- */
.ds-tabs {
  display: flex; align-items: stretch; gap: 2px;
  border-bottom: var(--bd); background: var(--ds-bg-surface);
  padding: 0 var(--sp-3);
  flex-shrink: 0;
}
.ds-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 38px; padding: 0 var(--sp-3); margin: 0 0 -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: var(--fs-m); font-weight: var(--fw-medium); color: var(--ds-text-3);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ds-tab:hover { color: var(--ds-text); }
.ds-tab.is-active { color: var(--ds-text); border-bottom-color: var(--ds-primary); font-weight: var(--fw-semibold); }
.ds-tab-count {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ds-text-3);
  background: var(--ds-bg-sunken); border-radius: var(--r-pill); padding: 1px 7px;
}
.ds-tab.is-active .ds-tab-count { background: var(--ds-primary-soft); color: var(--ds-primary-text); }
/* Segment: Reiter als Knopfgruppe (Filter "Alle | Ungelesen") */
.ds-segment { display: inline-flex; background: var(--ds-bg-sunken); border-radius: var(--r-s); padding: 2px; gap: 2px; }
.ds-segment .ds-tab { height: 24px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-xs); font-size: var(--fs-s); margin: 0; }
.ds-segment .ds-tab.is-active { background: var(--ds-bg-surface); box-shadow: var(--sh-1); border: 0; }

/* ---------- Werkzeugleiste ---------- */
.ds-toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-1) var(--sp-3);
  background: var(--ds-bg-subtle); border-bottom: var(--bd);
  flex-shrink: 0; flex-wrap: wrap;
}
.ds-toolbar-group { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ds-toolbar-spacer { flex: 1; }
.ds-toolbar-count { font-size: var(--fs-s); color: var(--ds-text-3); white-space: nowrap; }

/* ---------- Knoepfe ----------
   Vorgabe ist sekundaer (Flaeche mit Linie). Primaer ist der eine Knopf, der den
   Vorgang weiterbringt. Geist fuer Nebenwege, Gefahr fuer Unwiderrufliches. */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ds-control-h); padding: 0 var(--sp-3);
  background: var(--ds-bg-surface); color: var(--ds-text);
  border: var(--bd-strong); border-radius: var(--r-s);
  font-family: inherit; font-size: var(--fs-m); font-weight: var(--fw-medium); line-height: 1;
  cursor: pointer; margin: 0; white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 1px rgba(19, 26, 33, 0.04);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ds-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ds-btn:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }
.ds-btn:active { background: var(--ds-bg-active); box-shadow: none; }
.ds-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.ds-btn--primary { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }
.ds-btn--primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ds-btn--primary:active { background: var(--ds-primary-active); }
.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ds-text-2); box-shadow: none; }
.ds-btn--ghost:hover { background: var(--ds-bg-hover); border-color: transparent; color: var(--ds-text); }
.ds-btn--danger { background: var(--ds-bg-surface); color: var(--ds-bad-text); border-color: var(--ds-bad); }
.ds-btn--danger:hover { background: var(--ds-bad); color: #fff; border-color: var(--ds-bad); }
.ds-btn--danger-solid { background: var(--ds-bad); color: #fff; border-color: var(--ds-bad); }
.ds-btn--danger-solid:hover { background: #a5281c; border-color: #a5281c; }
.ds-btn--ok { background: var(--ds-ok); color: #fff; border-color: var(--ds-ok); }
.ds-btn--ok:hover { background: #1a6640; border-color: #1a6640; }
.ds-btn--sm { height: var(--ds-control-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-s); border-radius: var(--r-xs); }
.ds-btn--sm svg { width: 13px; height: 13px; }
.ds-btn--icon { width: var(--ds-control-h); padding: 0; }
.ds-btn--icon.ds-btn--sm { width: var(--ds-control-h-sm); }
.ds-btn--block { width: 100%; }
.ds-btn-group { display: inline-flex; }
.ds-btn-group .ds-btn { border-radius: 0; margin-left: -1px; }
.ds-btn-group .ds-btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); margin-left: 0; }
.ds-btn-group .ds-btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.ds-btn-group .ds-btn.is-on { background: var(--ds-primary-soft); color: var(--ds-primary-text); border-color: var(--ds-primary); position: relative; z-index: 1; }

/* ---------- Eingabefelder und Auswahl ---------- */
.ds-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--sp-3); }
.ds-field--row { flex-direction: row; align-items: center; gap: var(--sp-3); }
.ds-label { font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); margin: 0; }
.ds-label-req::after { content: ' *'; color: var(--ds-bad); }
.ds-help { font-size: var(--fs-xs); color: var(--ds-text-3); margin: 0; line-height: var(--lh-snug); }
.ds-help--error { color: var(--ds-bad-text); font-weight: var(--fw-semibold); }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; box-sizing: border-box;
  height: var(--ds-control-h); padding: 0 var(--sp-3);
  background: var(--ds-bg-surface); color: var(--ds-text);
  border: var(--bd-strong); border-radius: var(--r-s);
  font-family: inherit; font-size: var(--fs-m); line-height: 1.3;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-gray-500); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-gray-400); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--ds-bg-muted); color: var(--ds-text-3); cursor: default; }
.ds-input--sm, .ds-select--sm { height: var(--ds-control-h-sm); font-size: var(--fs-s); padding: 0 var(--sp-2); }
.ds-input--mono { font-family: var(--font-mono); font-size: var(--fs-s); }
.ds-input.is-invalid, .ds-select.is-invalid, .ds-textarea.is-invalid { border-color: var(--ds-bad); }
.ds-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22); }
.ds-textarea { height: auto; min-height: 84px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh-base); }
.ds-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6d79' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
  cursor: pointer;
}
.ds-dark .ds-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
/* Suchfeld: Lupe links im Feld */
.ds-search { position: relative; }
.ds-search > svg, .ds-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ds-icon); pointer-events: none;
}
.ds-search-icon svg { width: 14px; height: 14px; display: block; }
.ds-search .ds-input { padding-left: 32px; }
.ds-search .ds-input--sm { padding-left: 28px; }
.ds-search .ds-input--sm + svg, .ds-search .ds-input--sm ~ .ds-search-icon { left: 8px; }

/* ---------- Checkbox, Radio, Schalter ---------- */
.ds-check, .ds-radio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-m); color: var(--ds-text); cursor: pointer; margin: 0; font-weight: var(--fw-regular);
}
.ds-check input, .ds-radio input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--ds-gray-400); border-radius: var(--r-xs);
  background: var(--ds-bg-surface); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ds-radio input { border-radius: 50%; }
.ds-check input::before {
  content: ''; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat;
  transform: scale(0); transition: transform var(--dur-1) var(--ease);
}
.ds-radio input::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--dur-1) var(--ease); }
.ds-check input:checked, .ds-radio input:checked { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-check input:checked::before, .ds-radio input:checked::before { transform: scale(1); }
.ds-check input:hover, .ds-radio input:hover { border-color: var(--ds-primary); }
.ds-check--ok input:checked { background: var(--ds-ok); border-color: var(--ds-ok); }
.ds-check input:disabled, .ds-radio input:disabled { opacity: 0.5; cursor: default; }
.ds-switch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); color: var(--ds-text); cursor: pointer; margin: 0; }
.ds-switch input {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 20px; margin: 0; flex-shrink: 0; position: relative;
  border-radius: var(--r-pill); background: var(--ds-gray-300); border: 0; cursor: pointer;
  transition: background var(--dur-2) var(--ease);
}
.ds-switch input::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(19, 26, 33, 0.3);
  transition: transform var(--dur-2) var(--ease);
}
.ds-switch input:checked { background: var(--ds-primary); }
.ds-switch input:checked::before { transform: translateX(14px); }
.ds-dark .ds-switch input { background: var(--ds-dk-border-strong); }

/* ---------- Datentabelle ----------
   Dicht, Kopf fixiert (in .ds-table-wrap mit eigener Hoehe), Zebra auf Wunsch, Sortier-
   pfeil ueber aria-sort, Auswahlzeile, Zahlen rechtsbuendig mit .ds-num. */
.ds-table-wrap { overflow: auto; min-height: 0; flex: 1; background: var(--ds-bg-surface); scroll-padding-top: 36px; }   /* Fokus/scrollIntoView nicht unter den stehenden Kopf (UAT2) */
.ds-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-s); color: var(--ds-text); line-height: var(--lh-snug);
  background: var(--ds-bg-surface);
}
.ds-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ds-bg-muted);
  border-bottom: var(--bd);
  padding: 0 var(--sp-3); height: 32px;
  text-align: left; vertical-align: middle;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-text-3); white-space: nowrap;
}
.ds-table thead th.ds-num, .ds-table td.ds-num { text-align: right; }
.ds-table tbody td {
  padding: 0 var(--sp-3); height: var(--ds-row-h);
  border-bottom: var(--bd-subtle);
  vertical-align: middle;
}
.ds-table--loose tbody td { height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); vertical-align: top; }
.ds-table tbody tr { transition: background var(--dur-1) var(--ease); }
.ds-table tbody tr:hover { background: var(--ds-bg-hover); }
.ds-table--zebra tbody tr:nth-child(even) { background: var(--ds-bg-subtle); }
.ds-table--zebra tbody tr:hover { background: var(--ds-bg-hover); }
.ds-table tbody tr.is-selected, .ds-table tbody tr.is-selected:hover { background: var(--ds-primary-soft); box-shadow: inset 2px 0 0 var(--ds-primary); }
.ds-table tbody tr[tabindex] { cursor: default; }
.ds-table tbody tr:focus { outline: none; }
.ds-table tbody tr:focus-visible { outline-offset: -2px; }
.ds-table th[aria-sort] { cursor: pointer; user-select: none; }
.ds-table th[aria-sort]:hover { color: var(--ds-text); background: var(--ds-bg-active); }
.ds-table th[aria-sort]::after {
  content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor;
  opacity: 0; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.ds-table th[aria-sort="ascending"] { color: var(--ds-text); }
.ds-table th[aria-sort="ascending"]::after { opacity: 1; }
.ds-table th[aria-sort="descending"] { color: var(--ds-text); }
.ds-table th[aria-sort="descending"]::after { opacity: 1; transform: rotate(180deg); }
.ds-table .ds-mono { font-size: var(--fs-s); }
.ds-table-dim { color: var(--ds-text-3); }
.ds-table-strong { font-weight: var(--fw-semibold); }
/* Dichter (SIEM, Scanner mit vielen Zeilen) */
.ds-table--dense tbody td { height: 28px; padding: 0 var(--sp-2); }
.ds-table--dense thead th { height: 28px; padding: 0 var(--sp-2); }

/* ---------- Statusmarke / Badge ----------
   Weiche Flaeche, Text in der dunklen Stufe der Semantik. --dot setzt einen Punkt
   davor (Zustand, keine Bewertung). --solid fuer die eine wichtige Marke. */
.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap;
  background: var(--ds-bg-sunken); color: var(--ds-text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ds-badge--ok { background: var(--ds-ok-soft); color: var(--ds-ok-text); }
.ds-badge--warn { background: var(--ds-warn-soft); color: var(--ds-warn-text); }
.ds-badge--bad { background: var(--ds-bad-soft); color: var(--ds-bad-text); }
.ds-badge--info { background: var(--ds-info-soft); color: var(--ds-info-text); }
.ds-badge--plain { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); }
.ds-badge--solid { color: #fff; background: var(--ds-gray-600); }
.ds-badge--solid.ds-badge--ok { background: var(--ds-ok); }
.ds-badge--solid.ds-badge--warn { background: var(--ds-warn); }
.ds-badge--solid.ds-badge--bad { background: var(--ds-bad); }
.ds-badge--solid.ds-badge--info { background: var(--ds-info); }
.ds-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-badge--pill { border-radius: var(--r-pill); }
/* Zaehler (Taskleiste, Glocke, Ordner) */
.ds-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--ds-bad-dk); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
}
.ds-count--neutral { background: var(--ds-bg-sunken); color: var(--ds-text-2); }
.ds-count--primary { background: var(--ds-primary); }
/* Zustandspunkt mit Text (Konto aktiv, Dienst laeuft) */
.ds-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ds-text-2); white-space: nowrap; }
.ds-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-gray-400); flex-shrink: 0; }
.ds-state--ok::before { background: var(--ds-ok); }
.ds-state--warn::before { background: var(--ds-warn); }
.ds-state--bad::before { background: var(--ds-bad); }
.ds-state--info::before { background: var(--ds-info); }
.ds-state--off { color: var(--ds-text-3); }
.ds-dark .ds-state--ok::before { background: var(--ds-ok-dk); }
.ds-dark .ds-state--warn::before { background: var(--ds-warn-dk); }
.ds-dark .ds-state--bad::before { background: var(--ds-bad-dk); }
/* Schwere (Scanner, SIEM): Buchstabe auf Flaeche */
.ds-sev {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; line-height: 1;
}
.ds-sev--c { background: #7f1d1d; }
.ds-sev--h { background: var(--ds-bad); }
.ds-sev--m { background: var(--ds-warn); }
.ds-sev--l { background: var(--ds-gray-500); }
.ds-sev--i { background: var(--ds-info); }

/* ---------- Chip / Filter ---------- */
.ds-chipbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--ds-bg-surface); color: var(--ds-text-2);
  border: var(--bd-strong); font-family: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium);
  cursor: pointer; margin: 0; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ds-chip:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }
.ds-chip.is-on { background: var(--ds-primary-soft); border-color: var(--ds-primary); color: var(--ds-primary-text); }
.ds-chip-count { font-size: var(--fs-xs); color: var(--ds-text-3); }
.ds-chip.is-on .ds-chip-count { color: inherit; }
.ds-chip-x { display: inline-flex; width: 14px; height: 14px; margin-right: -4px; border-radius: 50%; align-items: center; justify-content: center; }
.ds-chip-x svg { width: 10px; height: 10px; }
.ds-chip-x:hover { background: rgba(0, 0, 0, 0.08); }
.ds-chip--static { cursor: default; }
.ds-chip--static:hover { background: var(--ds-bg-surface); border-color: var(--ds-border-strong); }

/* ---------- Kennzahl-Kachel ---------- */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.ds-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-m);
  min-width: 0;
}
.ds-kpi-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-kpi-value { font-size: var(--fs-xxl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ds-text); letter-spacing: var(--ls-tight); }
.ds-kpi-value small { font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--ds-text-3); margin-left: 3px; }
.ds-kpi-sub { font-size: var(--fs-s); color: var(--ds-text-3); }
.ds-kpi--ok .ds-kpi-value { color: var(--ds-ok-text); }
.ds-kpi--warn .ds-kpi-value { color: var(--ds-warn-text); }
.ds-kpi--bad .ds-kpi-value { color: var(--ds-bad-text); }
.ds-kpi--info .ds-kpi-value { color: var(--ds-info-text); }
.ds-kpi--inline { flex-direction: row; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.ds-kpi--inline .ds-kpi-value { font-size: var(--fs-l); }
.ds-kpi-delta { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ds-kpi-delta--up { color: var(--ds-bad-text); }
.ds-kpi-delta--down { color: var(--ds-ok-text); }

/* ---------- Leerzustand ---------- */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); color: var(--ds-text-3);
}
.ds-empty-mark { display: inline-flex; color: var(--ds-gray-300); margin-bottom: var(--sp-1); }
.ds-empty-mark svg { width: 36px; height: 36px; stroke-width: 1.5; }
.ds-dark .ds-empty-mark { color: var(--ds-dk-border-strong); }
.ds-empty-title { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text-2); margin: 0; }
.ds-empty-text { font-size: var(--fs-s); margin: 0; max-width: 44ch; line-height: var(--lh-base); }

/* ---------- Seitenpanel / Detailpanel ---------- */
.ds-panel {
  display: flex; flex-direction: column; min-height: 0;
  width: 340px; flex-shrink: 0;
  background: var(--ds-bg-subtle); border-left: var(--bd);
  color: var(--ds-text);
}
.ds-panel--overlay { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; box-shadow: -10px 0 24px -12px rgba(19, 26, 33, 0.35); }
.ds-panel-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--bd); background: var(--ds-bg-surface); flex-shrink: 0;
}
.ds-panel-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ds-panel-title strong { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-panel-title span { font-size: var(--fs-s); color: var(--ds-text-3); overflow-wrap: anywhere; }
.ds-panel-close {
  width: 26px; height: 26px; border: 0; background: transparent; border-radius: var(--r-xs); cursor: pointer;
  color: var(--ds-text-2); font-size: var(--fs-l); line-height: 1; padding: 0; margin: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-panel-close:hover { background: var(--ds-bg-active); color: var(--ds-text); }
.ds-panel-body { overflow-y: auto; padding: var(--sp-1) var(--sp-4) var(--sp-4); min-height: 0; }
.ds-panel-body h4, .ds-panel-section { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ds-dl { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 6px var(--sp-3); margin: 0; font-size: var(--fs-s); }
.ds-dl dt { color: var(--ds-text-3); }
.ds-dl dd { margin: 0; color: var(--ds-text); overflow-wrap: anywhere; }
.ds-panel-foot { padding: var(--sp-3) var(--sp-4); border-top: var(--bd); background: var(--ds-bg-surface); display: flex; gap: var(--sp-2); justify-content: flex-end; flex-shrink: 0; }

/* ---------- Hinweisband ---------- */
.ds-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ds-bg-muted); border: var(--bd); border-left: 3px solid var(--ds-gray-500); border-radius: var(--r-s);
  font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-2);
}
.ds-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.ds-banner strong { color: var(--ds-text); font-weight: var(--fw-semibold); }
.ds-banner--ok { background: var(--ds-ok-soft); border-color: color-mix(in srgb, var(--ds-ok) 30%, transparent); border-left-color: var(--ds-ok); color: var(--ds-ok-text); }
.ds-banner--warn { background: var(--ds-warn-soft); border-color: color-mix(in srgb, var(--ds-warn) 35%, transparent); border-left-color: var(--ds-warn); color: var(--ds-warn-text); }
.ds-banner--bad { background: var(--ds-bad-soft); border-color: color-mix(in srgb, var(--ds-bad) 30%, transparent); border-left-color: var(--ds-bad); color: var(--ds-bad-text); }
.ds-banner--info { background: var(--ds-info-soft); border-color: color-mix(in srgb, var(--ds-info) 30%, transparent); border-left-color: var(--ds-info); color: var(--ds-info-text); }
.ds-banner--ok strong, .ds-banner--warn strong, .ds-banner--bad strong, .ds-banner--info strong { color: inherit; }
.ds-banner-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* ---------- Fortschritt ---------- */
.ds-progress { height: 6px; border-radius: var(--r-pill); background: var(--ds-bg-sunken); overflow: hidden; position: relative; }
.ds-progress-bar { height: 100%; border-radius: var(--r-pill); background: var(--ds-primary); transition: width var(--dur-3) var(--ease); min-width: 2px; }
.ds-progress--ok .ds-progress-bar { background: var(--ds-ok); }
.ds-progress--warn .ds-progress-bar { background: var(--ds-warn); }
.ds-progress--bad .ds-progress-bar { background: var(--ds-bad); }
.ds-progress--thick { height: 10px; }
.ds-progress--indeterminate .ds-progress-bar { width: 30%; position: absolute; left: 0; animation: ds-sweep 1.2s var(--ease) infinite; }
@keyframes ds-sweep { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.ds-progress-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-s); }
.ds-progress-row .ds-progress { flex: 1; }
.ds-progress-row .ds-num { min-width: 3ch; text-align: right; color: var(--ds-text-2); font-weight: var(--fw-semibold); }
/* Balken mit Beschriftung (Dashboard, Verteilung) */
.ds-bar { display: grid; grid-template-columns: minmax(140px, 2fr) 5fr auto; align-items: center; gap: var(--sp-3); }
.ds-bar-label { font-weight: var(--fw-medium); color: var(--ds-text); overflow-wrap: anywhere; }
.ds-bar-track { height: 22px; border-radius: var(--r-xs); background: var(--ds-bg-sunken); overflow: hidden; }
.ds-bar-fill { height: 100%; background: var(--ds-gray-400); border-radius: var(--r-xs); min-width: 2px; transition: width var(--dur-3) var(--ease); }
.ds-bar-fill--ok { background: var(--ds-ok); }
.ds-bar-fill--bad { background: var(--ds-bad); }
.ds-bar-fill--warn { background: var(--ds-warn); }
.ds-bar-fill--info { background: var(--ds-info); }
.ds-bar-value { font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; color: var(--ds-text); }

/* ---------- Tooltip ----------
   Reines CSS ueber data-tip; erscheint bei Hover und Tastaturfokus. Fuer Dinge, die
   man nachschlagen will, nicht fuer Pflichtinformation. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px);
  background: var(--ds-gray-900); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.35; letter-spacing: 0; text-transform: none;
  padding: 5px 8px; border-radius: var(--r-xs); white-space: nowrap; max-width: 320px;
  box-shadow: var(--sh-2);
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 6px); }
[data-tip][data-tip-pos="right"]::after { left: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%); }
[data-tip][data-tip-pos="right"]:hover::after { transform: translateY(-50%); }

/* ---------- Toast ----------
   Dunkle Karte unten rechts, Werkzeugmarke, Titel, eine Zeile Text. Der Desktop-Toast
   (.ws-toast) teilt die Regeln. */
.ds-toasts { display: flex; flex-direction: column; gap: var(--sp-2); width: 340px; pointer-events: none; }
.ds-toast {
  pointer-events: auto;
  background: var(--ds-dk-surface); color: var(--ds-dk-text-2);
  border: 1px solid var(--ds-dk-border); border-radius: var(--r-m);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  box-shadow: var(--sh-dk-3);
  font-size: var(--fs-m); font-family: var(--font-sans);
  cursor: pointer;
  animation: ds-toast-in var(--dur-3) var(--ease-out) both;
}
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ds-toast:hover { background: var(--ds-dk-surface-2); }
.ds-toast-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 5px; }
.ds-toast-app { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--ds-dk-text-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-semibold); }
.ds-toast-mark { width: 16px; height: 16px; border-radius: var(--r-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-toast-mark svg { width: 62%; height: 62%; color: #fff; stroke-width: 2.4; }
.ds-toast-x {
  background: transparent; border: 0; color: var(--ds-dk-text-3); cursor: pointer;
  font-size: var(--fs-l); line-height: 1; padding: 0 4px; margin: 0; border-radius: var(--r-xs);
}
.ds-toast-x:hover { background: var(--ds-dk-border); color: #fff; }
.ds-toast-title { font-weight: var(--fw-semibold); color: #fff; margin-bottom: 2px; font-size: var(--fs-m); }
.ds-toast-sub { color: var(--ds-dk-text-2); font-size: var(--fs-s); line-height: var(--lh-snug); }
.ds-toast--ok { border-left: 3px solid var(--ds-ok-dk); }
.ds-toast--warn { border-left: 3px solid var(--ds-warn-dk); }
.ds-toast--bad { border-left: 3px solid var(--ds-bad-dk); }

/* ---------- Dialog ----------
   Schleier ueber dem Arbeitsplatz, Fenster mit Leiste wie ein Desktop-Fenster, Rumpf,
   Fusszeile mit Knoepfen rechts. */
.ds-veil {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(14, 22, 33, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: ds-veil-in var(--dur-2) var(--ease-out) both;
}
@keyframes ds-veil-in { from { opacity: 0; } to { opacity: 1; } }
.ds-dialog {
  width: 560px; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--ds-bg-surface); color: var(--ds-text);
  border: 1px solid var(--ds-gray-400); border-radius: var(--r-l);
  box-shadow: var(--sh-4); overflow: hidden;
  font-family: var(--font-sans);
  animation: ds-dialog-in var(--dur-3) var(--ease-out) both;
}
@keyframes ds-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.ds-dialog--wide { width: 760px; }
.ds-dialog--narrow { width: 440px; }
.ds-dialog-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-3) 0 var(--sp-4);
  background: var(--ds-bg-muted); border-bottom: var(--bd);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); flex-shrink: 0;
}
.ds-dialog-bar .ds-window-mark { background: var(--ds-primary); }
.ds-dialog-body { padding: var(--sp-5) var(--sp-6) var(--sp-4); overflow: auto; min-height: 0; }
.ds-dialog-title { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ds-text); }
.ds-dialog-question { margin: 0 0 var(--sp-3); font-size: var(--fs-l); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.ds-dialog-body p { font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text-2); }
.ds-dialog-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6) var(--sp-4);
  border-top: var(--bd-subtle); background: var(--ds-bg-subtle); flex-shrink: 0;
}
.ds-dialog-foot-note { margin-right: auto; font-size: var(--fs-xs); color: var(--ds-text-3); }
.ds-dialog-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 6px 0 var(--sp-3); font-size: var(--fs-xs); color: var(--ds-text-3); }
.ds-dialog-meta .is-full { color: var(--ds-bad-text); font-weight: var(--fw-bold); }

/* ---------- Skeleton ---------- */
.ds-skeleton {
  display: block; height: 12px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--ds-bg-sunken) 0%, var(--ds-bg-muted) 50%, var(--ds-bg-sunken) 100%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s var(--ease) infinite;
}
.ds-skeleton--text { width: 100%; margin: 6px 0; }
.ds-skeleton--short { width: 40%; }
.ds-skeleton--block { height: 72px; border-radius: var(--r-m); }
.ds-skeleton--round { width: 32px; height: 32px; border-radius: 50%; }
@keyframes ds-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Avatar (Posteingang, Chat) ---------- */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em;
  background: var(--ds-gray-600);
}
.ds-avatar--sm { width: 24px; height: 24px; }
.ds-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-s); }

/* ---------- Listenzeile (Posteingang, Ablage, Chat-Faeden) ----------
   Linke Kante zeigt die Auswahl; ungelesen = fett. */
.ds-row {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  background: none; border: 0; border-bottom: var(--bd-subtle);
  padding: var(--sp-2) var(--sp-3); margin: 0;
  cursor: pointer; font-family: inherit; color: var(--ds-text);
  box-shadow: inset 2px 0 0 transparent;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ds-row:hover { background: var(--ds-bg-hover); }
.ds-row.is-selected { background: var(--ds-bg-surface); box-shadow: inset 2px 0 0 var(--ds-primary); }
.ds-row.is-unread .ds-row-title, .ds-row.is-unread .ds-row-meta { font-weight: var(--fw-bold); color: var(--ds-text); }
.ds-row-line { display: flex; align-items: baseline; gap: var(--sp-2); }
.ds-row-meta { font-size: var(--fs-s); color: var(--ds-text-2); flex: 1; min-width: 0; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ds-row-time { font-size: var(--fs-xs); color: var(--ds-text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ds-row-title { font-size: var(--fs-m); line-height: var(--lh-snug); color: var(--ds-text); }
.ds-row-preview { font-size: var(--fs-s); color: var(--ds-text-3); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Nachtrag 11.10.2026: Wünsche der Modul-Agenten ---------- */
/* hidden gewinnt immer, auch gegen Bausteine mit eigenem display. */
[hidden] { display: none !important; }
/* Schwere-Marken: Auf Gelb und auf den aufgehellten Flächen im Dunkeln erreicht weiße
   Schrift kein AA; dort steht dunkle Schrift. */
.ds-sev--m { color: var(--ds-gray-900); }
.ds-dark .ds-sev--h, .ds-dark .ds-sev--m, .ds-dark .ds-sev--i { color: var(--ds-dk-bg); }

/* Globale button- und table-Regeln aus style.css zurücksetzen, wo Bausteine eigene
   Flächen haben (Wunsch Modul B/H). */
.ds-toolhead-tab, .ds-chip, .ds-panel-close { margin: 0; height: auto; }
.ds-tab { margin: 0 0 -1px; }
.ds-table { margin: 0; }
/* Kontrast im Dunkeln: Auf den aufgehellten Primär-, Rot- und Gelbflächen erreicht weiße
   Schrift kein AA; dort steht die dunkle Grundfarbe. */
.ds-dark .ds-btn--primary, .ds-dark .ds-btn--danger-solid,
.ds-dark .ds-badge--solid.ds-badge--ok, .ds-dark .ds-badge--solid.ds-badge--warn,
.ds-dark .ds-badge--solid.ds-badge--bad, .ds-dark .ds-badge--solid.ds-badge--info,
.ds-dark .ds-count { color: var(--ds-dk-bg); }
.ds-sev--l { background: var(--ds-gray-600); }

/* ================================================================
   5. Workplace V3 (12.10.2026)
   Bausteine fuer Menues, Befehlsleisten, Navigation, Avatare und Leerzustaende. Doku
   in 28_Designsystem.md, Abschnitt Workplace V3. Alles aus den Tokens oben.
   ================================================================ */
:root {
  --ds-menu-bg: rgba(255, 255, 255, 0.98);
  --sh-menu: 0 0 0 1px rgba(19, 26, 33, 0.08), 0 4px 10px rgba(19, 26, 33, 0.08), 0 18px 40px -12px rgba(19, 26, 33, 0.30);
  --sh-win: 0 0 0 1px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px -8px rgba(15, 23, 42, 0.22);
  --sh-win-focus: 0 0 0 1px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.10), 0 28px 64px -16px rgba(15, 23, 42, 0.45);
  --r-win: 10px;
  /* Hintergrund des Arbeitsplatzes und der Beitrittsseite: Hausfarben der Recplast. */
  --ds-wallpaper:
    radial-gradient(1100px 680px at 88% -12%, rgba(45, 212, 191, 0.20), transparent 62%),
    radial-gradient(1000px 760px at -8% 112%, rgba(59, 130, 246, 0.30), transparent 60%),
    radial-gradient(760px 520px at 58% 118%, rgba(139, 92, 246, 0.14), transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M-50 620C220 540 380 700 640 610S1050 420 1320 500 1650 640 1700 600'/%3E%3Cpath d='M-50 660C230 580 390 740 650 650S1060 460 1330 540 1650 680 1700 640'/%3E%3Cpath d='M-50 700C240 620 400 780 660 690S1070 500 1340 580 1650 720 1700 680'/%3E%3Cpath d='M-50 740C250 660 410 820 670 730S1080 540 1350 620 1650 760 1700 720'/%3E%3Cpath d='M-50 780C260 700 420 860 680 770S1090 580 1360 660 1650 800 1700 760'/%3E%3Cpath d='M-50 260C200 330 420 180 700 250S1100 380 1350 300 1650 200 1700 230'/%3E%3Cpath d='M-50 220C210 290 430 140 710 210S1110 340 1360 260 1650 160 1700 190'/%3E%3Cpath d='M-50 180C220 250 440 100 720 170S1120 300 1370 220 1650 120 1700 150'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(158deg, #0b1322 0%, #0f1c30 46%, #142540 100%);
}

/* ---------- Menue (DsMenu) ---------- */
.ds-menu {
  position: fixed; z-index: 100000;
  min-width: 208px; max-width: 340px;
  padding: 5px;
  background: var(--ds-menu-bg);
  border-radius: var(--r-m);
  box-shadow: var(--sh-menu);
  font-family: var(--font-sans); font-size: var(--fs-m); color: var(--ds-text);
  backdrop-filter: blur(16px) saturate(1.2);
  animation: ds-menu-in var(--dur-2) var(--ease-out) both;
  outline: none;
}
@keyframes ds-menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.985); } to { opacity: 1; transform: none; } }
.ds-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 32px; margin: 0; padding: 0 10px 0 8px;
  background: transparent; border: 0; border-radius: var(--r-s);
  font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.ds-menu-item:hover, .ds-menu-item:focus-visible { background: var(--ds-primary-soft); color: var(--ds-primary-text); outline: none; }
.ds-menu-item:disabled { color: var(--ds-text-3); opacity: 0.6; cursor: default; background: transparent; }
.ds-menu-item.danger { color: var(--ds-bad-text); }
.ds-menu-item.danger:hover, .ds-menu-item.danger:focus-visible { background: var(--ds-bad-soft); color: var(--ds-bad-text); }
.ds-menu-ic { width: 16px; height: 16px; display: inline-flex; color: var(--ds-icon); flex-shrink: 0; }
.ds-menu-item:hover .ds-menu-ic, .ds-menu-item.an .ds-menu-ic { color: currentColor; }
.ds-menu-ic svg { width: 16px; height: 16px; }
.ds-menu-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-menu-kbd { font-size: var(--fs-xs); color: var(--ds-text-3); font-family: var(--font-sans); letter-spacing: 0.02em; }
.ds-menu-more { display: inline-flex; color: var(--ds-icon); }
.ds-menu-more svg { width: 14px; height: 14px; }
.ds-menu-sep { height: 1px; background: var(--ds-border-subtle); margin: 4px 6px; }
.ds-menu-head { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ds-menu-anker { background: var(--ds-bg-active) !important; }

/* ---------- Befehlsleiste (Office-, Fluent-, ServiceNow-artig) ---------- */
.ds-cmdbar {
  display: flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 6px var(--sp-3);
  background: var(--ds-bg-surface); border-bottom: 1px solid var(--ds-border-subtle);
  flex-shrink: 0; flex-wrap: wrap;
}
.ds-cmdbar-spacer { flex: 1; }
.ds-cmd-sep { width: 1px; height: 20px; background: var(--ds-border); margin: 0 6px; flex-shrink: 0; }
.ds-cmd {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px; margin: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-s);
  font-family: inherit; font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--ds-text-2);
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ds-cmd svg { width: 16px; height: 16px; color: var(--accent, var(--ds-primary)); flex-shrink: 0; }
.ds-cmd:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.ds-cmd:active { background: var(--ds-bg-active); }
.ds-cmd[aria-pressed="true"], .ds-cmd.is-on { background: var(--ds-primary-soft); color: var(--ds-primary-text); }
.ds-cmd:disabled { opacity: 0.45; cursor: default; background: transparent; }
.ds-cmd--primary { background: var(--ds-primary); color: #fff; font-weight: var(--fw-semibold); box-shadow: 0 1px 2px rgba(19, 26, 33, 0.12); }
.ds-cmd--primary svg { color: #fff; }
.ds-cmd--primary:hover { background: var(--ds-primary-hover); color: #fff; }
.ds-cmd .ds-cmd-caret { width: 12px; height: 12px; color: var(--ds-icon); margin-left: -2px; }
.ds-dark .ds-cmdbar { background: var(--ds-dk-surface); border-bottom-color: var(--ds-dk-border); }
.ds-dark .ds-cmd { color: var(--ds-dk-text-2); }
.ds-dark .ds-cmd:hover { background: var(--ds-dk-hover); color: var(--ds-dk-text); }
.ds-dark .ds-cmd svg { color: var(--accent, var(--ds-dk-accent)); }
.ds-dark .ds-cmd-sep { background: var(--ds-dk-border); }

/* Symbolknopf (32 px), etwa fuer "Weitere Aktionen" */
.ds-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-s);
  color: var(--ds-text-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ds-iconbtn svg { width: 17px; height: 17px; }
.ds-iconbtn:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.ds-iconbtn--sm { width: 26px; height: 26px; }
.ds-iconbtn--sm svg { width: 15px; height: 15px; }
.ds-dark .ds-iconbtn { color: var(--ds-dk-text-2); }
.ds-dark .ds-iconbtn:hover { background: var(--ds-dk-hover); color: var(--ds-dk-text); }

/* ---------- Avatar ---------- */
.ds-avatar {
  position: relative; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--av, var(--ds-gray-600)); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ds-avatar--sm { width: 24px; height: 24px; }
.ds-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-m); }
.ds-avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-ok-dk); box-shadow: 0 0 0 2px var(--ds-bg-surface);
}
.ds-avatar-dot--away { background: var(--ds-warn-dk); }
.ds-avatar-dot--busy { background: var(--ds-bad-dk); }
.ds-avatar-dot--off { background: var(--ds-gray-400); }

/* ---------- Statuspille mit Punkt ---------- */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  background: var(--ds-bg-muted); color: var(--ds-text-2);
}
.ds-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.ds-pill--ok { background: var(--ds-ok-soft); color: var(--ds-ok-text); }
.ds-pill--warn { background: var(--ds-warn-soft); color: var(--ds-warn-text); }
.ds-pill--bad { background: var(--ds-bad-soft); color: var(--ds-bad-text); }
.ds-pill--info { background: var(--ds-info-soft); color: var(--ds-info-text); }
.ds-pill--neutral { background: var(--ds-bg-muted); color: var(--ds-text-2); }
.ds-pill--plain::before { display: none; }

/* ---------- Leerzustand ---------- */
.ds-empty-v3 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); height: 100%; min-height: 160px;
  color: var(--ds-text-3); text-align: center;
}
.ds-empty-v3-ic {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-bg-muted); color: var(--ds-icon); margin-bottom: var(--sp-1);
}
.ds-empty-v3-ic svg { width: 28px; height: 28px; stroke-width: 1.6; }
.ds-empty-v3-t { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text-2); }
.ds-empty-v3-s { font-size: var(--fs-s); color: var(--ds-text-3); max-width: 320px; }
.ds-dark .ds-empty-v3-ic { background: var(--ds-dk-surface-2); color: var(--ds-dk-icon); }
.ds-dark .ds-empty-v3-t { color: var(--ds-dk-text-2); }

/* ---------- Breadcrumb ---------- */
.ds-crumbs { display: flex; align-items: center; gap: 4px; font-size: var(--fs-s); color: var(--ds-text-3); min-width: 0; flex-wrap: wrap; }
.ds-crumbs > * + *::before { content: '/'; margin-right: 4px; color: var(--ds-gray-400); }
.ds-crumbs > :last-child { color: var(--ds-text); font-weight: var(--fw-semibold); }

/* ---------- Navigationsliste (Ordner, Bereiche) ---------- */
.ds-navlist { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2); }
.ds-navhead { padding: var(--sp-3) var(--sp-2) var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ds-navitem {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; margin: 0; width: 100%;
  background: transparent; border: 0; border-radius: var(--r-s);
  font-family: inherit; font-size: var(--fs-m); color: var(--ds-text-2); text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ds-navitem svg { width: 17px; height: 17px; color: var(--ds-icon); flex-shrink: 0; }
.ds-navitem:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.ds-navitem.is-on, .ds-navitem[aria-current="true"] { background: var(--ds-primary-soft); color: var(--ds-primary-text); font-weight: var(--fw-semibold); }
.ds-navitem.is-on svg, .ds-navitem[aria-current="true"] svg { color: var(--accent, var(--ds-primary)); }
.ds-navitem.is-on::before, .ds-navitem[aria-current="true"]::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--accent, var(--ds-primary));
}
.ds-navitem-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-navitem-n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.ds-navitem.is-on .ds-navitem-n { color: var(--ds-primary-text); }

/* ---------- Panes mit Linie ---------- */
.ds-split { display: flex; min-height: 0; height: 100%; }
.ds-split > * { min-width: 0; min-height: 0; }
.ds-split > * + * { border-left: 1px solid var(--ds-border-subtle); }
.ds-pane-nav { background: var(--ds-bg-subtle); }
.ds-dark .ds-split > * + * { border-left-color: var(--ds-dk-border); }

/* ---------- Knoepfe V3: etwas Tiefe, klarer Druck ---------- */
.ds-btn { box-shadow: 0 1px 2px rgba(19, 26, 33, 0.06), inset 0 -1px 0 rgba(19, 26, 33, 0.04); }
.ds-btn--primary { box-shadow: 0 1px 2px rgba(19, 26, 33, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.ds-btn--ghost { box-shadow: none; }
.ds-btn:active { transform: translateY(0.5px); }

/* Kurze Rueckmeldung (DsMenu.hinweis), unten mittig ueber allem */
.ds-snack {
  position: fixed; left: 50%; bottom: 76px; z-index: 100001;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 12px; border-radius: var(--r-pill);
  background: rgba(15, 23, 42, 0.94); color: #f8fafc;
  font-family: var(--font-sans); font-size: var(--fs-s); font-weight: var(--fw-medium);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ds-snack.an { opacity: 1; transform: translate(-50%, 0); }
.ds-snack-ic { display: inline-flex; color: #34d399; }
.ds-snack-ic svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* Gesperrter Primaerbefehl: bleibt als Hauptaktion erkennbar, nur blass. */
.ds-cmd--primary:disabled { background: var(--ds-primary); color: #fff; opacity: 0.45; }
/* Suchfeld in Befehlsleisten */
.ds-cmd-search {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; min-width: 200px; padding: 0 10px; margin: 0 4px;
  background: var(--ds-bg-subtle); border: 1px solid var(--ds-border); border-radius: var(--r-s);
  color: var(--ds-icon);
}
.ds-cmd-search:focus-within { border-color: var(--ds-primary); box-shadow: var(--focus-ring); background: var(--ds-bg-surface); }
.ds-cmd-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.ds-cmd-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; box-shadow: none; margin: 0; padding: 0; font: inherit; font-size: var(--fs-m); color: var(--ds-text); }
.ds-dark .ds-cmd-search { background: var(--ds-dk-surface-2); border-color: var(--ds-dk-border); color: var(--ds-dk-icon); }
.ds-dark .ds-cmd-search input { color: var(--ds-dk-text); }

/* Dunkles Menue (DsMenu in SIEM, EDR, Terminal) */
.ds-menu--dark { --ds-menu-bg: rgba(22, 31, 46, 0.98); color: var(--ds-dk-text); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.7); }
.ds-menu--dark .ds-menu-item:hover, .ds-menu--dark .ds-menu-item:focus-visible { background: rgba(61, 155, 224, 0.18); color: #fff; }
.ds-menu--dark .ds-menu-item.danger { color: var(--ds-bad-dk); }
.ds-menu--dark .ds-menu-item.danger:hover { background: rgba(239, 95, 100, 0.16); color: #fecaca; }
.ds-menu--dark .ds-menu-ic, .ds-menu--dark .ds-menu-more { color: var(--ds-dk-icon); }
.ds-menu--dark .ds-menu-kbd, .ds-menu--dark .ds-menu-head { color: var(--ds-dk-text-3); }
.ds-menu--dark .ds-menu-sep { background: var(--ds-dk-border); }
.ds-menu--dark .ds-menu-item:disabled { color: var(--ds-dk-text-3); }
/* Primaerbefehl im Dunkeln: dunkle Schrift auf dem aufgehellten Blau (Kontrast). */
.ds-dark .ds-cmd--primary { background: var(--ds-dk-accent); color: var(--ds-dk-bg); }
.ds-dark .ds-cmd--primary svg { color: var(--ds-dk-bg); }
.ds-dark .ds-cmd--primary:hover { background: #63b0e8; color: var(--ds-dk-bg); }