/* San Ecosystem — App-Brücke auf das Design-System „Nocturne Android" (Detroit-Stil).
   app.css = Design-System 1:1 (Tokens, Basis, na-*-Komponenten aus dem Claude-Design-Export).
   Diese Datei bildet die bestehenden App-Klassen (.btn, .card, .stat, table.data, .badge,
   .ampel, .field …) auf dieselben Regeln ab — so erscheint jede Seite ohne Template-Umbau
   im neuen Stil — und ergänzt App-eigene Bausteine: Menü (Klappgruppen, Pins, Schmal-Modus),
   Kopfleiste, Befehls-Palette, Matrizen mit fixierter Namensspalte, Präsenz-LEDs, Druck. */

/* Boot „Holo-Decode": Panels stabilisieren wie ein Hologramm — aus leichter Tiefe und Unschärfe
   scharf werden, die Schrift rastet mit einem kurzen Blau/Rot-Versatz ein, und aus dem Akzent-Winkel
   läuft ein weicher Lichtimpuls durch die Fläche. Kein Laufbalken. */
@property --sc-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sc-a { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes sc-holo {
  0%   { opacity: 0; transform: translateY(8px) scale(.988); }
  100% { opacity: 1; transform: none; }
}
@keyframes sc-puls { 0% { --sc-r: 0px; --sc-a: 34%; } 100% { --sc-r: 1600px; --sc-a: 0%; } }
@keyframes sc-bracket { 0%, 30% { box-shadow: none; } 50% { box-shadow: 0 0 14px var(--color-accent); } 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent); } }
.na-dialog, .cmdk, .topmenu-pop { animation-name: sc-holo; }
.na-dialog::before, .cmdk::before { display: none; }
/* Seitenstart: „Signal-Lock" — Bild ist kurz unscharf mit feinen Scanlinien und rastet ein */
.na-scan-overlay { background: repeating-linear-gradient(transparent 0 2px, color-mix(in srgb, var(--color-bg-deep) 45%, transparent) 2px 3px);
  -webkit-backdrop-filter: blur(7px) brightness(.85); backdrop-filter: blur(7px) brightness(.85);
  animation: sc-lock 1.1s var(--ease-out) both; }
.na-scan-overlay::before { display: none; }
@keyframes sc-lock { 0% { opacity: 1; } 100% { opacity: 0; -webkit-backdrop-filter: blur(0) brightness(1); backdrop-filter: blur(0) brightness(1); } }

/* ── Legacy-Tokens & App-Variablen ──────────────────────────────────────────── */
:root {
  --bg: var(--color-bg); --panel: var(--color-surface); --panel2: var(--color-surface-2);
  --ink: var(--color-text); --ink-soft: var(--color-text-muted);
  --line: var(--color-divider); --blue: var(--color-accent); --violet: var(--color-accent-400);
  --ok: var(--st-ok); --warn: var(--st-warn); --down: var(--st-crit);
  --font: var(--font-body); --mono: var(--font-mono);
  /* Firmenfarbe des angemeldeten Mitarbeiters — tönt nur Avatare (Akzent bleibt Blurple) */
  --firma-self: var(--color-accent);
}
/* Firmen-Themes: der Akzent folgt der Firma des angemeldeten Mitarbeiters — gleiche
   Disziplin (Akzent als Linie/Glow, tonale Rampe), nur der Farbton wechselt.
   E = San TGA Engineering (Logo-Blau) · C = San TGA Consult (Logo-Grün) ·
   EC = in beiden Firmen beschäftigt: Blurple-Akzent, Marke & Avatar zweifarbig. */
body.firma-e { --firma-self: var(--firma-e);
  --color-accent: #6f9fdc; --color-accent-ink: #c5dbfb;
  --color-accent-100: #f2f6fe; --color-accent-200: #e0eafd; --color-accent-300: #c5dbfb;
  --color-accent-400: #9cc0f5; --color-accent-500: #7aa3dd; --color-accent-600: #6186ba;
  --color-accent-700: #4b6890; --color-accent-800: #364a66; --color-accent-900: #232f3f;
  --color-accent-glow: color-mix(in srgb, #6f9fdc 45%, transparent);
  --scan-ink: color-mix(in srgb, #6f9fdc 18%, transparent); }
body.firma-c { --firma-self: var(--firma-c);
  --color-accent: #79bd8f; --color-accent-ink: #bee5c9;
  --color-accent-100: #f0f9f2; --color-accent-200: #dcf1e1; --color-accent-300: #bee5c9;
  --color-accent-400: #96d2a8; --color-accent-500: #79b98d; --color-accent-600: #619772;
  --color-accent-700: #4b7358; --color-accent-800: #37523f; --color-accent-900: #243329;
  --color-accent-glow: color-mix(in srgb, #79bd8f 45%, transparent);
  --scan-ink: color-mix(in srgb, #79bd8f 18%, transparent); }
[data-theme="light"] body.firma-e {
  --color-accent: #2f63b8; --color-accent-ink: #244c8f;
  --color-accent-100: #232f3f; --color-accent-200: #364a66; --color-accent-300: #4b6890;
  --color-accent-400: #6186ba; --color-accent-500: #7aa3dd; --color-accent-600: #9cc0f5;
  --color-accent-700: #c5dbfb; --color-accent-800: #e0eafd; --color-accent-900: #f2f6fe;
  --color-accent-glow: color-mix(in srgb, #2f63b8 30%, transparent);
  --scan-ink: color-mix(in srgb, #2f63b8 12%, transparent); }
[data-theme="light"] body.firma-c {
  --color-accent: #2e8f52; --color-accent-ink: #226b3d;
  --color-accent-100: #243329; --color-accent-200: #37523f; --color-accent-300: #4b7358;
  --color-accent-400: #619772; --color-accent-500: #79b98d; --color-accent-600: #96d2a8;
  --color-accent-700: #bee5c9; --color-accent-800: #dcf1e1; --color-accent-900: #f0f9f2;
  --color-accent-glow: color-mix(in srgb, #2e8f52 30%, transparent);
  --scan-ink: color-mix(in srgb, #2e8f52 12%, transparent); }
body.firma-ec .na-brand-mark::after, body.firma-ec .sidebar .bottom .avatar,
.mix-mark { background: linear-gradient(135deg, var(--firma-e), var(--firma-c)) !important; color: var(--color-neutral-100) !important; }
body.firma-ec .na-brand-mark { border-color: var(--firma-c); }
.firma-mix-line { height: 2px; background: linear-gradient(90deg, var(--firma-e), var(--firma-c)); }

*, *::before, *::after { margin: 0; padding: 0; }
body { min-height: 100vh; }
[hidden] { display: none !important; }
a { color: inherit; }
.icon.sm { width: 14px; height: 14px; } .icon.lg { width: 18px; height: 18px; }

/* ── Layout: Rail + Hauptfläche ─────────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
  view-transition-name: sidebar;
  /* Breite folgt der Grid-Spur (252px normal, 66px im Schmal-Modus). Das Design-System
     setzt auf .na-sidebar eine feste width:252px — die würde die Spur überschreiben und
     der Rail-Modus bliebe optisch 252px breit (Menü ließe sich nicht einklappen). */
  width: auto; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.main { padding: 0 44px 56px; min-width: 0; max-width: none; width: 100%; view-transition-name: main; }
@media (min-width: 2700px) { .main { max-width: 2560px; margin: 0 auto; } }

/* Seitenwechsel: Hauptfläche gleitet, Rail bleibt stehen (Cross-Document View Transitions) */
@view-transition { navigation: none; }   /* Seitenwechsel ohne Übergangs-Capture: sofort reagieren */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(main) { animation: na-page-out var(--dur-base) var(--ease-in-out) both; }
::view-transition-new(main) { animation: na-page-in var(--dur-slow) var(--ease-out) both; }
.main { animation: na-page-in var(--dur-base) var(--ease-out) both; }

/* Boot-Sweep nur beim ersten Laden je Sitzung (html[data-boot] setzt base.html im <head>) */
.na-scan-overlay { display: none; }
html[data-boot] .na-scan-overlay { display: block; }

/* ── Marke & Menü ───────────────────────────────────────────────────────────── */
.brand-row { display: flex; align-items: center; gap: 6px; padding: 0 0 var(--space-4); }
.brand-row .na-brand { flex: 1; min-width: 0; padding: 0 var(--space-2); text-decoration: none; color: inherit; }
.brand-row .na-brand > div { min-width: 0; }
.brand-row .na-brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-collapse { flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-400);
  cursor: pointer; clip-path: var(--clip-notch-tr); --notch: 6px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.nav-collapse:hover { color: var(--color-text); border-color: var(--color-divider-strong); }
/* mobil ist das Menü ein Drawer (schließt beim Tippen daneben) — der Schmal-Modus-Knopf hat dort keine Aufgabe */
@media (max-width: 1100px) { .nav-collapse { display: none; } }

.nav-section { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--color-text-faint); margin: var(--space-6) var(--space-3) var(--space-2); }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radius-md); color: var(--color-neutral-400); font-size: var(--text-base);
  text-decoration: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.nav-item .icon { color: inherit; }
.nav-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-glow); }
.nav-badge { font: 500 10.5px/1 var(--font-mono); padding: 3px 7px; border-radius: var(--radius-sm);
  background: var(--color-accent-800); color: var(--color-accent-100); white-space: nowrap; }

/* Klappgruppen (details/summary) — Kopf im Caps-Stil der Menüabschnitte */
.nav-group { margin-top: var(--space-2); }
.nav-grouphd { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  cursor: pointer; list-style: none; user-select: none;
  font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-text-faint); transition: color var(--dur-fast), background var(--dur-fast); }
.nav-grouphd::-webkit-details-marker { display: none; }
.nav-grouphd .icon { color: var(--color-neutral-500); }
.nav-grouphd:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.nav-grouphd .g-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-grouphd .nav-chev { margin-left: auto; opacity: .55; transition: transform var(--dur-base) var(--ease-out); }
.nav-grouphd .nav-badge + .nav-chev { margin-left: 8px; }
.nav-group[open] > .nav-grouphd { color: var(--color-text-muted); }
.nav-group[open] > .nav-grouphd .nav-chev { transform: rotate(90deg); }
.nav-groupitems { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 8px; margin: 2px 0 0 13px;
  background: var(--rule-v) no-repeat left / 1px 100%; animation: na-fade var(--dur-base) both; }

/* Menü-Symbole: ruhige Graphit-Kacheln mit leichter Tiefe (Licht oben, Schatten unten) — Gruppen UND Einträge,
   keine bunten Farben; aktiv/hover kippt das Akzentlicht dazu. */
.g-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--color-neutral-300);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-text) 16%, var(--color-surface-2)) 0%, var(--color-surface-2) 55%, color-mix(in srgb, var(--color-bg-deep) 60%, var(--color-surface-2)) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.35);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), color var(--dur-fast); }
.g-ico .icon { width: 14px; height: 14px; color: inherit; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.nav-grouphd:hover .g-ico, .nav-group[open] > .nav-grouphd .g-ico { color: var(--color-accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.nav-grouphd:hover .g-ico { transform: translateY(-1px); }
/* Untermenü-Einträge: dasselbe Kachel-Prinzip, eine Nummer kleiner */
.nav-groupitems .nav-item > .icon, #nav-pinned-user .nav-item > .icon, #nav-recent-list .nav-item > .icon, nav > .nav-item > .icon {
  flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 6px; color: var(--color-neutral-400);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-text) 12%, var(--color-surface-2)) 0%, var(--color-surface-2) 60%, color-mix(in srgb, var(--color-bg-deep) 50%, var(--color-surface-2)) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.30);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), color var(--dur-fast), background var(--dur-fast); }
.nav-item:hover > .icon { transform: translateY(-1px); color: var(--color-text); }
.nav-item.active > .icon { color: var(--color-accent-ink); background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 34%, var(--color-surface-2)), color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-2)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.30), 0 0 10px color-mix(in srgb, var(--color-accent) 35%, transparent); }
[data-theme="light"] .g-ico, [data-theme="light"] .nav-groupitems .nav-item > .icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12); }
.nav-grouphd { padding: 7px 8px; }
.nav-item { padding: 6px 10px; }
.nav-item.nur-mobil, .nav-badge.nur-mobil { display: none; }
@media (max-width: 1100px) { .nav-item.nur-mobil { display: flex; } .nav-badge.nur-mobil { display: inline-block; } }

/* Anpinnen: Stecknadel je Menüpunkt (bei Hover), aktiv = angepinnt */
#sidebar .nav-groupitems .nav-item, #nav-pinned-user .nav-item { padding-right: 28px; }
.nav-pin { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 20px; height: 20px; border: 0; background: transparent; color: var(--color-neutral-600); cursor: pointer;
  border-radius: var(--radius-sm); opacity: 0; transition: opacity var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.nav-item:hover .nav-pin { opacity: .85; }
.nav-pin:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-text) 9%, transparent); opacity: 1; }
.nav-pin.pinned { opacity: 1; color: var(--color-accent); }

/* Nutzerkasten am Rail-Fuß */
.sidebar .bottom { display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 12px; flex: none;
  background: var(--rule-h-soft) no-repeat top / 100% 1px; }
.sidebar .bottom .avatar { background: color-mix(in srgb, var(--firma-self) 22%, transparent); color: var(--color-text); }
.userbox { flex: 1; min-width: 0; }
.userbox .name { display: block; font-size: 13px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox .role { display: block; margin-top: 3px; font: 500 9.5px/1.3 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--color-text-faint); }
.userbox a { color: var(--color-text-muted); }
.userbox a:hover { color: var(--color-accent); }

/* Schmal-Modus (Rail): nur Icons — nur am Desktop; mobil ist das Menü ein Drawer und bleibt vollständig */
@media (min-width: 1101px) {
  body.nav-rail .layout { grid-template-columns: 66px 1fr; }
  body.nav-rail .sidebar { width: 100%; padding-left: var(--space-2); padding-right: var(--space-2); overflow: visible; }
  body.nav-rail .sidebar .na-brand > div, body.nav-rail .sidebar .nav-section, body.nav-rail .sidebar .nav-item .grow,
  body.nav-rail .sidebar .g-title, body.nav-rail .sidebar .nav-grouphd .nav-chev, body.nav-rail .sidebar .nav-grouphd .nav-badge,
  body.nav-rail .sidebar .userbox, body.nav-rail .sidebar .bottom form, body.nav-rail .nav-pin { display: none; }
  body.nav-rail .brand-row { flex-direction: column; gap: 8px; }
  body.nav-rail .sidebar .nav-item, body.nav-rail .sidebar .nav-grouphd, body.nav-rail .sidebar .bottom { justify-content: center; }
  body.nav-rail .sidebar .nav-groupitems { margin-left: 0; padding-left: 0; background: none; }
  body.nav-rail .sidebar .nav-item .nav-badge { position: absolute; top: 3px; right: 6px; padding: 2px 5px; }
}

/* ── Kopfleiste (klebrig): Ziel-Zeile · Suche · Glocke · Theme · Neu ────────── */
.apptop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0 var(--space-4);
  margin-bottom: var(--space-4); position: sticky; top: 0; z-index: 30;
  background: linear-gradient(var(--color-bg) 70%, transparent); }
.apptop .spacer { flex: 1; }
.apptop .na-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-search { text-transform: none; letter-spacing: .04em; font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-muted); gap: 10px; }
.top-search .kbd { padding: 1px 6px; }
@media (max-width: 1100px) { .top-search .kbd, .top-search .lbl { display: none; } }
.icon-btn { padding: 8px !important; width: 36px; height: 36px; }
.topmenu { position: relative; }
.topmenu > summary { list-style: none; cursor: pointer; }
.topmenu > summary::-webkit-details-marker { display: none; }
.bell-wrap { position: relative; display: inline-grid; place-items: center; }
.notif-dot { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-red); box-shadow: 0 0 8px color-mix(in srgb, var(--led-red) 70%, transparent); }
.notif-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--led-red);
  animation: na-led-pulse .7s var(--ease-out) infinite; }
.topmenu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px;
  background: var(--color-surface); box-shadow: var(--shadow-md); padding: var(--space-2);
  clip-path: var(--clip-notch); --notch: 8px; animation: sc-holo var(--dur-slow) var(--ease-out) both; }
.topmenu-pop a, .topmenu-pop .tp-empty { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 13.5px; color: var(--color-neutral-300); text-decoration: none; }
.topmenu-pop a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.topmenu-pop a .nav-badge { margin-left: auto; }
.topmenu-pop .grp { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-text-faint); padding: 8px 10px 5px; }

/* ── Seitenkopf ─────────────────────────────────────────────────────────────── */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-8); }
.pagehead h1 { font-size: 30px; font-weight: 400; letter-spacing: .01em; }
.pagehead .sub { color: var(--color-text-muted); font-size: var(--text-base); margin-top: 6px; }
.crumb { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 8px; }
.pagehead .actions-inline, .pagehead > div:last-child:not(:first-child) { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ── Buttons: Caps-Label, Akzent-Kontur, Wisch-Füllung, Glow, Ecke ─────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; isolation: isolate; overflow: hidden;
  font: 500 var(--text-sm)/1.1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-accent); background: transparent; border: 1px solid var(--color-accent);
  padding: 10px 18px; border-radius: var(--radius-md);
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); transition: transform var(--dur-base) var(--ease-snap); }
.btn::after { content: ""; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: .7; pointer-events: none; }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { box-shadow: 0 0 18px var(--color-accent-glow); }
.btn:active { transform: translateY(1px); background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn.secondary { color: var(--color-text); border-color: var(--color-divider-strong); }
.btn.secondary::before { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn.secondary:hover { box-shadow: none; border-color: var(--color-text-muted); }
.btn.ghost { color: var(--color-text-muted); border-color: transparent; }
.btn.ghost::before { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn.ghost:hover { color: var(--color-text); box-shadow: none; }
.btn.danger { color: var(--st-crit); border-color: color-mix(in srgb, var(--st-crit) 55%, transparent); }
.btn.danger::before { background: var(--st-crit-dim); }
.btn.danger:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--st-crit) 40%, transparent); }
.btn.led { color: var(--led-blue); border-color: color-mix(in srgb, var(--led-blue) 60%, transparent); }
.btn.led::before { background: var(--led-blue-dim); }
.btn.led:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--led-blue) 40%, transparent); }
.btn.sm { padding: 6px 12px; font-size: var(--text-xs); }
.btn.lg { padding: 14px 26px; font-size: var(--text-base); }
.btn.block { width: 100%; }
.btn .icon { width: 15px; height: 15px; fill: currentColor; flex: none; }
.btn.sm .icon { width: 13px; height: 13px; }
button.linklike { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 11px; padding: 0; }
button.linklike:hover { color: var(--color-accent); }

/* ── Karten: HUD-Panel (Kerbe + Akzent-Winkel), Boot-Wischen + Scanlinie ───── */
.card { position: relative; display: block; padding: 18px 20px; margin-bottom: 20px;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-accent) var(--sc-a), transparent) 0, transparent var(--sc-r)), var(--color-surface);
  box-shadow: var(--shadow-sm); border-radius: 0; clip-path: var(--clip-notch);
  transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
  animation: sc-holo var(--dur-slow) var(--ease-out) both;   /* leicht: nur Opazität/Transform — kein Blur, kein Gradient-Puls */
  animation-delay: calc(var(--i, 0) * var(--stagger)); }
.card::before, .card::after { animation: sc-bracket var(--dur-boot) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.card::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--color-accent); pointer-events: none; }
.card::after  { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 34px; background: var(--color-accent); pointer-events: none; }
.card:nth-child(2) { --i: 1; } .card:nth-child(3) { --i: 2; } .card:nth-child(4) { --i: 3; } .card:nth-child(5) { --i: 4; }
.card:nth-child(6) { --i: 5; } .card:nth-child(7) { --i: 6; } .card:nth-child(n+8) { --i: 7; }
.card.plain { clip-path: none; border-radius: var(--radius-lg); }
.card.plain::before, .card.plain::after { display: none; }
.card.interactive { cursor: pointer; }
.card.interactive:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.card > h2 { font: 500 var(--text-lg)/1.2 var(--font-heading); letter-spacing: var(--track-heading); margin-bottom: var(--space-3); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-kicker { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 6px; }
.card-title, .card-head .card-title { font: 500 var(--text-lg)/1.2 var(--font-heading); letter-spacing: var(--track-heading); }
.card-meta { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-faint); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.card .reveal { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base), margin var(--dur-slow); }
.card:hover .reveal, .card:focus-within .reveal { max-height: 200px; opacity: 1; margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-6); }

/* Seitenelemente steigen gestaffelt ein (Karten booten stattdessen) */
.main > *:not(.card):not(.apptop):not(script):not(style):not(.na-scan-overlay) { animation: na-rise var(--dur-slow) var(--ease-out) both; }
.main > *:nth-child(2) { animation-delay: 45ms; } .main > *:nth-child(3) { animation-delay: 90ms; }
.main > *:nth-child(4) { animation-delay: 135ms; } .main > *:nth-child(5) { animation-delay: 180ms; }
.main > *:nth-child(n+6) { animation-delay: 225ms; }
.main > .apptop { animation: none; }

/* ── Kennzahlen ─────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; row-gap: var(--space-6); margin-bottom: 26px; }
.stat { padding: 0 var(--space-6); background: var(--rule-v) no-repeat left / 1px 100%; min-width: 0;
  animation: na-rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.stats > .stat:first-child { padding-left: 0; background: none; }
.stat::before { content: ""; display: block; width: 22px; height: 2px; background: var(--color-accent); margin-bottom: 10px; }
.stat.ok::before { background: var(--st-ok); } .stat.warn::before { background: var(--st-warn); } .stat.crit::before { background: var(--st-crit); }
.stat .n { font: 500 var(--text-2xl)/1 var(--font-heading); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat.ok .n { color: var(--st-ok); } .stat.warn .n { color: var(--st-warn); } .stat.crit .n { color: var(--st-crit); }
.stat .l { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 8px; }
.stat .metaline { margin-top: 5px; font-size: var(--text-sm); color: var(--color-text-faint); }
.stat:nth-child(2) { --i: 1; } .stat:nth-child(3) { --i: 2; } .stat:nth-child(4) { --i: 3; } .stat:nth-child(5) { --i: 4; } .stat:nth-child(n+6) { --i: 5; }
/* Verbundenes Kennzahlen-Panel (Cockpit-Kopf) */
.kpi-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 0; margin-bottom: 20px;
  background: var(--color-surface); clip-path: var(--clip-notch); --notch: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
  animation: sc-holo var(--dur-boot) var(--ease-out) both; }
.kpi-hero > * { background: var(--color-surface); padding: 18px 20px; box-shadow: -1px 0 0 var(--color-divider), 0 -1px 0 var(--color-divider); }
.kpi-hero > .stat { animation: none; }
.kpi-hero .na-stat { background: var(--color-surface); }

/* ── Tabellen ───────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-base); background: transparent; }
table.data th { text-align: left; font: 500 var(--text-xs)/1.2 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--color-text-muted); padding: 10px 14px; border: 0; }
table.data th .metaline { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-weight: 400; }
table.data td { padding: 11px 14px; border: 0; font-size: var(--text-base); }
table.data thead tr, table.data tr:has(th) { background: var(--rule-h) no-repeat bottom / 100% 1px; }
table.data tbody tr:not(:has(th)), table.data > tr:not(:has(th)) {
  background: var(--rule-h-soft) no-repeat bottom / 100% 1px; transition: background-color var(--dur-fast);
  animation: na-rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
table.data tbody tr:not(:has(th)):hover, table.data > tr:not(:has(th)):hover {
  background: linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent), color-mix(in srgb, var(--color-accent) 6%, transparent)) no-repeat 0 0 / 100% 100%,
              var(--rule-h-soft) no-repeat bottom / 100% 1px; }
table.data td.hm { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data td .badge, table.data td .ampel { vertical-align: middle; }

/* Fixierte Kopfzeile + Namensspalte (wie Excel „Fenster fixieren") für breite Matrizen */
.table-scroll.freeze { overflow: auto; max-height: calc(100vh - 210px); }
.table-scroll.freeze table.data { border-collapse: separate; border-spacing: 0; }
.table-scroll.freeze table.data tr { animation: none; }
.table-scroll.freeze table.data th { position: sticky; top: 0; z-index: 3; background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-divider); }
.table-scroll.freeze table.data th:first-child, .table-scroll.freeze table.data td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--color-bg);
  box-shadow: inset -1px 0 0 var(--color-divider), inset 0 -1px 0 color-mix(in srgb, var(--color-text) 8%, transparent);
  min-width: 190px; max-width: 280px; }
.table-scroll.freeze table.data th:first-child { z-index: 4; box-shadow: inset -1px 0 0 var(--color-divider), inset 0 -1px 0 var(--color-divider); }
.table-scroll.freeze table.data tr:hover td:first-child { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.table-scroll.freeze table.data td:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; right: -10px; width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.28), transparent); pointer-events: none; opacity: var(--freeze-shadow, 0); transition: opacity var(--dur-base); }
.table-scroll.freeze.scrolled-x { --freeze-shadow: 1; }
[data-theme="light"] .table-scroll.freeze table.data td:first-child::after { background: linear-gradient(to right, rgba(20,22,31,.10), transparent); }

/* Heatmap & Kalender: Zellen im LED-Vokabular */
table.heatmap td { font: 500 11px/1 var(--font-mono); text-align: center; padding: 7px 6px; font-variant-numeric: tabular-nums; }
td.hm { border-radius: var(--radius-sm); }
td.hm.gruen { background: var(--st-ok-dim); color: var(--st-ok); }
td.hm.gelb { background: var(--st-warn-dim); color: var(--st-warn); }
td.hm.rot { background: var(--st-crit-dim); color: var(--st-crit); }
td.hm.frei { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text-faint); }
td.abw-U { background: color-mix(in srgb, var(--color-accent) 24%, transparent); color: var(--color-accent-ink); font-weight: 600; }
td.abw-b { background: var(--st-warn-dim); color: var(--st-warn); font-weight: 600; }
td.abw-K { background: var(--st-crit-dim); color: var(--st-crit); font-weight: 600; }
td.abw-H { background: var(--color-accent-900); color: var(--color-accent-300); font-weight: 600; }
td.abw-we { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text-faint); }
td.hm.j1 { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-ink); }
td.hm.j2 { background: color-mix(in srgb, var(--color-accent) 26%, transparent); color: var(--color-accent-100); }
td.hm.j3 { background: color-mix(in srgb, var(--color-accent) 40%, transparent); color: var(--color-accent-100); }
td.hm.j4 { background: color-mix(in srgb, var(--color-accent) 54%, transparent); color: var(--color-neutral-100); }
td.hm.probe { background-image: repeating-linear-gradient(45deg, transparent, transparent 3px,
  color-mix(in srgb, var(--st-warn) 45%, transparent) 3px, color-mix(in srgb, var(--st-warn) 45%, transparent) 6px); }
/* leere Matrix-Zelle: unaufdringliches Plus, sichtbar erst beim Überfahren */
.matrix-leer { display: inline-block; min-width: 22px; text-align: center; color: transparent; border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast); }
tr:hover .matrix-leer { color: var(--color-neutral-600); }
.matrix-leer:hover { color: var(--color-accent) !important; background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* ── Tags (Badges) & LEDs (Ampel) ───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; white-space: nowrap;
  border-radius: var(--radius-sm); font: 500 var(--text-xs)/1.3 var(--font-heading); letter-spacing: .12em;
  text-transform: uppercase; background: var(--color-surface-3); color: var(--color-text-muted); }
.badge.ok { background: var(--st-ok-dim); color: var(--st-ok); }
.badge.warn { background: var(--st-warn-dim); color: var(--st-warn); }
.badge.down { background: var(--st-crit-dim); color: var(--st-crit); }
.badge.muted { background: var(--color-surface-3); color: var(--color-text-muted); }
.badge.accent, .badge.mp-1 { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-ink); }
.badge.mp-2 { background: var(--st-warn-dim); color: var(--st-warn); }
.badge.mp-3 { background: var(--st-crit-dim); color: var(--st-crit); }
.badge.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--color-divider-strong); }
.badge.mono { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
tr.mp-2 td:first-child { box-shadow: inset 2px 0 0 var(--st-warn); }
tr.mp-3 td:first-child { box-shadow: inset 2px 0 0 var(--st-crit); }

.ampel { position: relative; display: inline-flex; align-items: center; padding-left: 17px;
  font: 500 var(--text-sm)/1.2 var(--font-heading); letter-spacing: .06em; white-space: nowrap;
  font-variant-numeric: tabular-nums; --led-c: var(--led-blue); color: var(--led-c); }
.ampel::before, .ampel::after { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; border-radius: 50%; background: var(--led-c); }
.ampel::before { box-shadow: 0 0 10px color-mix(in srgb, var(--led-c) 70%, transparent), inset 0 0 2px rgba(255,255,255,.5); }
.ampel::after { animation: na-led-pulse 2.2s var(--ease-out) infinite; }
.ampel.gruen { --led-c: var(--led-blue); }
.ampel.gelb { --led-c: var(--led-yellow); } .ampel.gelb::after { animation-duration: 1.2s; }
.ampel.rot { --led-c: var(--led-red); } .ampel.rot::after { animation-duration: .7s; }
.ampel.rot::before { animation: na-led-breathe .7s ease-in-out infinite; }
.ampel.grau, .ampel.aus { --led-c: var(--led-off); color: var(--color-text-faint); }
.ampel.grau::before, .ampel.aus::before { box-shadow: none; } .ampel.grau::after, .ampel.aus::after { animation: none; }

/* ── Formulare: Fläche-2, Fokus leuchtet an der Unterkante ─────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-6); }
.field label:not(:has(input)) { display: block; font: 500 var(--text-xs)/1.2 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field select, .field textarea, .searchbar input, .searchbar select, .searchbar textarea {
  width: 100%; min-height: 40px; padding: 9px 12px; font: inherit; font-size: var(--text-base); color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface-2); border: 1px solid var(--color-divider);
  border-bottom-color: var(--color-divider-strong); border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-base); }
.field input:hover, .field select:hover, .field textarea:hover, .searchbar input:hover, .searchbar select:hover { border-color: var(--color-divider-strong); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.searchbar input:focus-visible, .searchbar select:focus-visible { outline: none; border-bottom-color: var(--color-accent);
  box-shadow: 0 1px 0 var(--color-accent), 0 6px 18px -8px var(--color-accent-glow); }
.field input::placeholder, .searchbar input::placeholder { color: var(--color-text-faint); }
.field textarea { min-height: 96px; resize: vertical; }
.field select, .searchbar select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option, .searchbar select option { background: var(--color-surface); color: var(--color-text); }
.field input[type="checkbox"], .field input[type="radio"], .checkrow input, .check input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--color-accent); }
.field input[type="file"] { padding: 7px 10px; }
.field input[type="file"]::file-selector-button { font: 500 var(--text-xs)/1.1 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--color-accent); background: transparent; border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm); padding: 5px 10px; margin-right: 10px; cursor: pointer; }
.field .hint { font-size: var(--text-sm); color: var(--color-text-faint); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-bottom-color: var(--st-crit); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.row2 > *, .row3 > * { min-width: 0; }
/* Datumsfelder haben in Mobil-Browsern eine feste Eigenbreite — nie breiter als ihre Spalte */
.field input[type="date"], .field input[type="time"], .field input[type="month"], .field input[type="datetime-local"] {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.checkrow, .check { display: flex; align-items: center; gap: 10px; font-size: var(--text-base); cursor: pointer; }
.check { margin: var(--space-2) 0 var(--space-4); }
.actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.searchbar { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; align-items: center; }
.searchbar input, .searchbar select { flex: 1; min-width: 160px; width: auto; }
.searchbar .field { margin: 0; }

/* Filter-Pillen → segmentierte Schaltung */
.chips { display: inline-flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--space-4); padding: 3px; max-width: 100%;
  border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); }
.chip { padding: 6px 14px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-decoration: none;
  font: 500 var(--text-xs)/1.2 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted);
  transition: color var(--dur-fast), background var(--dur-base), box-shadow var(--dur-base); }
.chip:hover { color: var(--color-text); background: transparent; }
.chip.active { color: var(--color-accent-ink); border: 0; background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow: inset 0 -1px 0 var(--color-accent); }

/* Reiter */
.tabs { display: flex; gap: 2px; margin-bottom: var(--space-6); flex-wrap: wrap; background: var(--rule-h) no-repeat bottom / 100% 1px; padding-bottom: 1px; }
.tabs a, .tabs button { position: relative; padding: 9px 14px; border: 0; border-radius: 0; background: transparent; cursor: pointer; text-decoration: none;
  color: var(--color-text-muted); font: 500 var(--text-xs)/1.2 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase;
  transition: color var(--dur-fast); }
.tabs a:hover, .tabs button:hover { color: var(--color-text); background: transparent; }
.tabs a.active, .tabs button.active { color: var(--color-accent-ink); box-shadow: none; }
.tabs a.active::after, .tabs button.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-glow); }

/* ── Hinweise & Meta ────────────────────────────────────────────────────────── */
.flash { position: relative; display: block; padding: var(--space-3) var(--space-4) var(--space-3) 36px; margin-bottom: var(--space-4);
  font-size: var(--text-base); border: 1px solid; border-radius: var(--radius-md); --tc: var(--color-accent);
  color: var(--tc); border-color: color-mix(in srgb, var(--tc) 35%, transparent); background: color-mix(in srgb, var(--tc) 9%, transparent); }
.flash::before, .flash::after { content: ""; position: absolute; left: 14px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
.flash::before { box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 70%, transparent), inset 0 0 2px rgba(255,255,255,.5); }
.flash::after { animation: na-led-pulse 2.2s var(--ease-out) infinite; }
.flash.success { --tc: var(--led-blue); }
.flash.info, .flash.message { --tc: var(--color-accent); }
.flash.warning { --tc: var(--led-yellow); } .flash.warning::after { animation-duration: 1.2s; }
.flash.danger, .flash.error { --tc: var(--led-red); } .flash.danger::after, .flash.error::after { animation-duration: .7s; }
.flash b { font-weight: 600; } .flash a { color: inherit; text-decoration: underline; }
.empty { color: var(--color-text-faint); text-align: center; padding: var(--space-8); font-size: var(--text-base); letter-spacing: .04em; }
.metaline { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.metaline b { color: var(--color-neutral-300); font-weight: 500; }
.text-muted { color: var(--color-text-muted); }
.editbar { display: flex; align-items: center; gap: 9px; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: 13px; color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); }
.editbar .ic, .editbar b { color: var(--color-accent-300); }
.kollision { display: flex; gap: 9px; align-items: flex-start; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: 13px; color: var(--st-crit-ink);
  background: var(--st-crit-dim); border: 1px solid color-mix(in srgb, var(--st-crit) 35%, transparent); }
.kollision .ic { color: var(--st-crit); }
.section-sep { margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-6);
  font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-accent);
  background: var(--rule-h) no-repeat top / 100% 1px; }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--rule-h); }
.pagination { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); justify-content: center; }

/* ── Posteingang-Zeilen & Avatare ───────────────────────────────────────────── */
.inbox-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.inbox-row:last-child { background: none; }
.inbox-row .txt { flex: 1; min-width: 0; }
.inbox-row .t1 { display: block; font-size: var(--text-base); } .inbox-row .t1 b { font-weight: 600; }
.inbox-row .t2 { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; font-family: var(--font-mono); }
.inbox-row .do { display: flex; gap: var(--space-2); flex: none; align-items: center; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-accent-900); color: var(--color-accent-200); font: 500 11px/1 var(--font-heading); letter-spacing: .06em; }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.sq { border-radius: var(--radius-sm); clip-path: var(--clip-notch); --notch: 6px; }
.avatar.e { background: color-mix(in srgb, var(--firma-e) 22%, transparent); color: var(--color-text); }
.avatar.c { background: color-mix(in srgb, var(--firma-c) 22%, transparent); color: var(--color-text); }

/* ── Präsenz (Heartbeat) im LED-Vokabular ──────────────────────────────────── */
.pz-online { color: var(--led-blue) !important; }
.pz-abwesend { color: var(--led-red) !important; }
.pz-offen { color: var(--color-text-faint) !important; }
.pz-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; --led-c: var(--led-off); background: var(--led-c); }
.pz-dot.pz-online { --led-c: var(--led-blue); } .pz-dot.pz-abwesend { --led-c: var(--led-red); } .pz-dot.pz-offen { --led-c: var(--led-off); }
.pz-dot.pz-online, .pz-dot.pz-abwesend { box-shadow: 0 0 10px color-mix(in srgb, var(--led-c) 70%, transparent), inset 0 0 2px rgba(255,255,255,.5); }
.pz-dot.pz-online::after, .pz-dot.pz-abwesend::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--led-c);
  animation: na-led-pulse 2.2s var(--ease-out) infinite; }
.pz-dot.pz-abwesend::after { animation-duration: .7s; }
.pz-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.pz-row:last-child { background: none; }
.pz-row .pz-av { position: relative; width: 32px; height: 32px; flex: none; }
.pz-row .pz-av .pz-dot { position: absolute; right: -2px; bottom: -2px; border: 2px solid var(--color-surface); box-sizing: content-box; width: 8px; height: 8px; }
.pz-row .pz-name { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-row.is-offen { opacity: .62; }
.pz-chip { flex: none; padding: 3px 9px; border-radius: var(--radius-sm); font: 500 var(--text-xs)/1.3 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; }
.pz-chip.pz-online { background: var(--led-blue-dim); }
.pz-chip.pz-abwesend { background: var(--led-red-dim); }
.pz-chip.pz-offen { background: var(--color-surface-3); }

/* ── Firmen-Übersicht ───────────────────────────────────────────────────────── */
.firmenboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-6); align-items: start; }
.firmenspalte { --fa: var(--color-accent); position: relative; background: var(--color-surface); box-shadow: var(--shadow-sm);
  clip-path: var(--clip-notch); --notch: 12px; overflow: hidden; animation: sc-holo var(--dur-boot) var(--ease-out) both; }
.firmenspalte::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--fa); }
.firmenspalte::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 34px; background: var(--fa); }
.firmenkopf { padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: 12px;
  background: linear-gradient(to right, color-mix(in srgb, var(--fa) 16%, transparent), transparent 72%);
  box-shadow: inset 0 -1px 0 var(--color-divider); }
.firmenkopf .fk-mark { width: 22px; height: 2px; background: var(--fa); flex: none; box-shadow: 0 0 10px color-mix(in srgb, var(--fa) 60%, transparent); }
.firmenkopf h2 { font-size: var(--text-lg); margin: 0; }
.firmenkopf .fk-sub { font: 500 var(--text-xs)/1.3 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); }
.firmenkorpus { padding: var(--space-4) var(--space-6) var(--space-6); }
.abt-gruppe { margin-top: var(--space-5); } .abt-gruppe:first-child { margin-top: 0; }
.abt-titel { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fa); margin-bottom: var(--space-3); }
.ma-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.ma-karte { display: flex; align-items: center; gap: 10px; padding: var(--space-3); background: var(--color-surface-2);
  clip-path: var(--clip-notch); --notch: 6px; text-decoration: none; color: var(--color-text);
  transition: background var(--dur-fast), transform var(--dur-fast); }
.ma-karte:hover { background: color-mix(in srgb, var(--fa) 12%, var(--color-surface-2)); transform: translateY(-1px); }
.ma-karte .avatar { width: 34px; height: 34px; background: color-mix(in srgb, var(--fa) 22%, transparent); color: var(--color-text); flex: none; }
.ma-karte .mk-txt { min-width: 0; flex: 1; }
.ma-karte .mk-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-karte .mk-rolle { font-size: 11px; color: var(--color-text-muted); }
.ma-karte .mk-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; --led-c: var(--led-off); background: var(--led-c); }
.mk-dot.gruen { --led-c: var(--led-blue); } .mk-dot.gelb { --led-c: var(--led-yellow); } .mk-dot.rot { --led-c: var(--led-red); }
.mk-dot.gruen, .mk-dot.gelb, .mk-dot.rot { box-shadow: 0 0 10px color-mix(in srgb, var(--led-c) 70%, transparent), inset 0 0 2px rgba(255,255,255,.5); }
.mk-dot.gruen::after, .mk-dot.gelb::after, .mk-dot.rot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--led-c); animation: na-led-pulse 2.2s var(--ease-out) infinite; }
.mk-dot.gelb::after { animation-duration: 1.2s; } .mk-dot.rot::after { animation-duration: .7s; }

/* ── Organigramm ────────────────────────────────────────────────────────────── */
.org-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.org-kasten { background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 7px; padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2); transition: background var(--dur-fast); }
.org-kasten:hover { background: var(--color-surface-3); }
.org-kasten b { display: block; font-size: 13px; font-weight: 500; }
.org-kasten .metaline { word-break: break-all; }
.org-kasten.grau { opacity: .4; }
.org-titel { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); }

/* ── Login (Vollseite) ──────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8); }
.login-card { width: 100%; max-width: 380px; background: var(--color-surface); padding: var(--space-8); box-shadow: var(--shadow-md);
  position: relative; clip-path: var(--clip-notch); --notch: 14px; animation: sc-holo var(--dur-boot) var(--ease-out) both; }
.login-card::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--color-accent); }
.login-card::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 34px; background: var(--color-accent); }
.login-card h1 { font-size: var(--text-xl); font-weight: 400; display: flex; align-items: center; gap: 10px; }
.login-card h1::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--color-accent); flex: none; }
.login-card .sub { color: var(--color-text-muted); font-size: 13px; margin: 8px 0 var(--space-6); }
.login-foot { font-size: 11px; color: var(--color-text-faint); text-align: center; padding-top: var(--space-3); margin-top: var(--space-4);
  background: var(--rule-h-soft) no-repeat top / 100% 1px; }

/* ── Seiten-Hilfe („Was macht diese Seite?") ────────────────────────────────── */
.seiten-info { margin: 0 0 var(--space-6); background: var(--color-surface); box-shadow: var(--shadow-sm); clip-path: var(--clip-notch); --notch: 8px; overflow: hidden; }
.seiten-info > summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: 8px;
  font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-muted); user-select: none; }
.seiten-info > summary::-webkit-details-marker { display: none; }
.seiten-info > summary .icon { color: var(--color-accent); }
.seiten-info > summary:hover { color: var(--color-text); }
.seiten-info[open] > summary { color: var(--color-text); background: var(--rule-h) no-repeat bottom / 100% 1px; }
.seiten-info > div { padding: var(--space-4) var(--space-4) var(--space-5); font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-300); }

/* ── Cockpit-Raster & Widgets ───────────────────────────────────────────────── */
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); align-items: start; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); align-items: start; margin-bottom: 20px; }
.dash > .card { margin-bottom: 0; }
.dash-wide { grid-column: 1 / -1; }
.widgets .widget { margin-bottom: 0; }
.widget-zahlen { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.widget-zahl .n { font: 500 var(--text-xl)/1 var(--font-heading); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.widget-zahl .l { font: 500 10px/1.3 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; }
.widget-zahl.ok .n { color: var(--st-ok); } .widget-zahl.warn .n { color: var(--st-warn); } .widget-zahl.crit .n { color: var(--st-crit); }
/* Native Formularelemente (Select-Aufklapplisten, Datumswähler, Scrollbalken) folgen dem Thema:
   ohne festes color-scheme malt der Browser die Optionsliste weiß mit hellem Text. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
select, select option, select optgroup { background-color: var(--color-surface); color: var(--color-text); }
select option:checked { background-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface)); color: var(--color-text); }
.fokus-form select { background-color: transparent; }

/* Helles Thema: kleine Nebentexte (11–12px) brauchen auf Weiß mehr Kontrast (WCAG AA ≥ 4,5:1) */
[data-theme="light"] { --color-text-faint: #666a7d; --color-neutral-500: #6f7386; }

/* ── Cockpit-Raster: Flex-Zeilen + Container-Abfragen ───────────────────────────
   --wm-auto (je Karte) = wie viele Karten je Zeile passen: Inhaltsbreite ≥ 1280px → 4, ≥ 900px → 3,
   ≥ 600px → 2, darunter 1 (Handy). „Auto"-Karten wachsen und füllen die Zeile (1 Karte = ganz,
   2 = halb, 3 = Drittel, 4 = Viertel); feste Stufen ¼ ⅓ ½ 1/1 (.wm-s-q/-t/-h/-f) werden auf schmalen
   Bildschirmen auf die nächste darstellbare Stufe gehoben. dashboard.js setzt die Klassen. */
[data-dashgrid] { display: flex !important; flex-wrap: wrap; gap: var(--wm-gap); align-items: flex-start;
  container-type: inline-size; --wm-gap: 16px; }
[data-dashgrid] > .card { --wm-auto: 4; flex: 1 1 calc(100% / var(--wm-auto) - var(--wm-gap)); max-width: 100%; margin: 0; min-width: 0; position: relative; }
[data-dashgrid] > .card[style*="1/-1"], [data-dashgrid] > .card.dash-wide { flex-basis: 100%; }   /* Standard vor dem Skript */
[data-dashgrid] > .card.wm-s-a { flex-basis: calc(100% / var(--wm-auto) - var(--wm-gap)); }
[data-dashgrid] > .card.wm-s-q { flex-basis: calc(25% - var(--wm-gap)); }
[data-dashgrid] > .card.wm-s-t { flex-basis: calc(33.333% - var(--wm-gap)); }
[data-dashgrid] > .card.wm-s-h { flex-basis: calc(50% - var(--wm-gap)); }
[data-dashgrid] > .card.wm-s-f { flex-basis: 100%; }
@container (max-width: 1279px) {
  [data-dashgrid] > .card { --wm-auto: 3; }
  [data-dashgrid] > .card.wm-s-q { flex-basis: calc(33.333% - var(--wm-gap)); }
  .wm-seg [data-s="q"] { display: none; }
}
@container (max-width: 899px) {
  [data-dashgrid] > .card { --wm-auto: 2; }
  [data-dashgrid] > .card.wm-s-q, [data-dashgrid] > .card.wm-s-t { flex-basis: calc(50% - var(--wm-gap)); }
  .wm-seg [data-s="t"] { display: none; }
}
@container (max-width: 599px) {
  [data-dashgrid] > .card { --wm-auto: 1; flex-basis: 100% !important; }
  .wm-seg, .wm-resize { display: none !important; }
}
/* weiches Nachrücken beim Hinzufügen/Entfernen/Breite ändern — nicht während des Ziehens selbst */
[data-dashgrid] > .card:not(.wm-resizing):not(.wm-dragging) { transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out),
  flex-basis var(--dur-base) var(--ease-out); }
body.wm-dragging-body [data-dashgrid] > .card { transition: none; }

/* Bearbeiten-Modus: Werkzeugleiste je Karte (Griff · Name · Breite · ×) im Fluss oben in der Karte,
   Innenring statt Outline (eine Outline würde von der Kerbe abgeschnitten), Eck-Griff für die Breite */
.wm-tools { display: none; align-items: center; gap: 6px; margin: -8px -10px 12px; padding: 4px 6px;
  background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
body.wm-edit [data-dashgrid] > .card .wm-tools { display: flex; }
.wm-grip { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--color-text-muted); cursor: grab;
  display: grid; place-items: center; border-radius: var(--radius-sm); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; transition: color var(--dur-fast), background var(--dur-fast); }
.wm-grip::before { content: ""; width: 8px; height: 14px;
  background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 4px 4.6px; }
.wm-grip:hover, .wm-grip:focus-visible { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.wm-grip:active, .wm-dragging .wm-grip { cursor: grabbing; }
.wm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 10.5px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-muted); }
.wm-seg { display: inline-flex; gap: 1px; padding: 2px; flex: none; border-radius: var(--radius-sm);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); }
.wm-seg button { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; min-width: 28px; padding: 5px 7px;
  border-radius: 3px; font: 500 11px/1 var(--font-heading); letter-spacing: .04em; transition: color var(--dur-fast), background var(--dur-fast); }
.wm-seg button:hover { color: var(--color-text); }
.wm-seg button.active { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  box-shadow: inset 0 -1px 0 var(--color-accent); }
.wm-x { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex: none; transition: color var(--dur-fast), background var(--dur-fast); }
.wm-x:hover, .wm-x:focus-visible { color: var(--st-crit); background: color-mix(in srgb, var(--st-crit) 12%, transparent); }
.wm-resize { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border: 0; background: transparent; padding: 0;
  cursor: ew-resize; display: none; z-index: 2; color: var(--color-text-muted); touch-action: none; }   /* außerhalb der 10px-Kerbe */
.wm-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .75; }
.wm-resize:hover, .wm-resize:focus-visible { color: var(--color-accent); }
body.wm-edit [data-dashgrid] > .card .wm-resize { display: block; }
body.wm-edit [data-dashgrid] > .card { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent); }
[data-dashgrid] > .card.wm-dragging { opacity: .45; box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--color-accent); }
[data-dashgrid] > .card.wm-resizing { user-select: none; box-shadow: var(--shadow-glow); }
body.wm-dragging-body { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.wm-ghost { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; padding: 8px 12px; max-width: 240px;
  background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent);
  clip-path: var(--clip-notch); --notch: 8px; font: 500 11px/1 var(--font-heading); letter-spacing: var(--track-caps);
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; will-change: transform; }

/* „Cockpit anpassen"-Leiste — im Seitenfluss über dem Raster, nie über Inhalten schwebend */
.wm-panel { margin-bottom: 16px; padding: 12px 14px; background: var(--color-surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
  clip-path: var(--clip-notch); --notch: 10px; animation: sc-holo var(--dur-slow) var(--ease-out) both; }
.wm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wm-panel-kicker { color: var(--color-accent); margin-bottom: 5px; }
.wm-hint { font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted); max-width: 78ch; }
.wm-hint b { color: var(--color-text); font-weight: 500; }
.wm-panel-actions { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
.wm-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; padding-top: 10px;
  background: var(--rule-h-soft) no-repeat top / 100% 1px; }
.wm-cat-k { font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-accent); }
.wm-cat-grp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wm-cat-g { font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); margin-right: 2px; }
.wm-item { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 11px 7px 8px; font: inherit; font-size: 12.5px;
  color: var(--color-text); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider);
  clip-path: var(--clip-notch); --notch: 6px; transition: background var(--dur-fast), color var(--dur-fast); }
.wm-item .icon { color: var(--color-accent); }
.wm-item:hover, .wm-item:focus-visible { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-2)); color: var(--color-accent-ink); }
.wm-none { font-size: 12.5px; color: var(--color-text-faint); }
/* Firmen-Übersicht-Widget (kompakt, mit Filter E/C/Minijob/alle) */
.fw-heads { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.fw-head { flex: 1 1 140px; padding: 8px 10px; background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 6px; }
.fw-head .fw-nums { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.fw-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.fw-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; text-decoration: none; color: inherit;
  background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.fw-row:last-child { background: none; }
.fw-row .pz-av { position: relative; width: 28px; height: 28px; flex: none; }
.fw-row .pz-av .pz-dot { position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border: 2px solid var(--color-surface); box-sizing: content-box; }
.fw-txt { flex: 1; min-width: 0; }
.fw-name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-meta { display: block; font-size: 11px; color: var(--color-text-faint); }
.fw-tags { display: flex; gap: 4px; flex: none; }
.fw-tabs { margin-bottom: 4px; }
/* Karten per Ziehen umsortieren */
.rd-drag { cursor: grab; color: var(--color-neutral-600); display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast); }
.rd-drag:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.rd-drag:active { cursor: grabbing; }
.card-head .rd-drag { margin-right: 6px; width: 22px; height: 22px; }
[data-card].rd-dragging { opacity: .4; }
[data-dashgrid].rd-over { outline: 1px dashed color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 6px; }
/* Abteilungs-Balken, Wochen-Kacheln u. ä. in Cockpits */
.day-tile { padding: 10px 12px; background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 6px; }
.day-tile.today { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-2)); }
.sys-tile { padding: 12px 14px; background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 8px; }

/* Anzeiger-Beschriftung darf umbrechen („Resturlaub 2026" passt sonst nicht in den Bogen) */
.na-gauge-label .l { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.na-gauge-label .n { white-space: nowrap; }

/* Abteilungs-Fokus im Leitungs-Cockpit */
.fokus-form { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-divider); clip-path: var(--clip-notch); --notch: 8px; }
.fokus-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent); }
.fokus-form select { border: 0; background: transparent; min-height: 36px; padding: 6px 8px; color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; }
.fokus-form select:focus-visible { outline: none; box-shadow: inset 0 -1px 0 var(--color-accent); }

/* ── Schritt-für-Schritt-Hinweise (Urlaub, Krankmeldung) ────────────────────── */
ol.schritte { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
ol.schritte > li { position: relative; padding-left: 38px; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-200); }
ol.schritte > li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
  display: grid; place-items: center; font: 500 12px/1 var(--font-heading); color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent); clip-path: var(--clip-notch); --notch: 6px; }
ol.schritte > li b { color: var(--color-text); font-weight: 500; }
ol.schritte > li.erledigt::before { content: "✓"; background: color-mix(in srgb, var(--st-ok) 18%, transparent); color: var(--st-ok); }
ol.schritte .schritt-aktion { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ── Personalakte: Kopfkarte, Definitionsraster, Reiter mit Zählern ─────────── */
.akte-kopf { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1.4fr); gap: 20px 28px; align-items: start; }
@media (max-width: 900px) { .akte-kopf { grid-template-columns: 1fr; } }
.akte-id { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.akte-av { width: 64px; height: 64px; font-size: 22px; flex: none; }
.akte-idtxt { min-width: 0; flex: 1; }
.akte-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.akte-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 18px; margin: 0; }
.akte-dl > div { min-width: 0; padding: 7px 0; background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.akte-dl dt { font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 4px; }
.akte-dl dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.akte-dl.kompakt { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.akte-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
@media (max-width: 640px) { .akte-kpis { grid-template-columns: 1fr 1fr; } }
.akte-tabs { margin: 16px 0; }
.chip-n { margin-left: 6px; font: 600 10px/1 var(--font-mono); padding: 2px 6px; border-radius: 8px; background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-ink); }
.akte-sek { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-accent); margin: 0 0 10px; }

/* ── Persönliche Notizen (Seite + Cockpit-Widget) ───────────────────────────── */
.nz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: start; }
.nz-list { display: flex; flex-direction: column; gap: 8px; }
.nz { position: relative; padding: 14px 16px 12px 18px; background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 8px; }
.nz-list .nz { padding: 10px 12px 10px 14px; }
.nz::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nz-c, var(--color-divider)); }
.nz-accent { --nz-c: var(--color-accent); } .nz-ok { --nz-c: var(--st-ok); } .nz-warn { --nz-c: var(--st-warn); } .nz-crit { --nz-c: var(--st-crit); }
.nz-head { display: flex; align-items: flex-start; gap: 6px; }
.nz-title { flex: 1; min-width: 0; font: 500 14px/1.35 var(--font-heading); overflow-wrap: anywhere; padding-top: 3px; }
.nz-title .icon { color: var(--st-warn); vertical-align: -1px; }
.nz-pin { color: var(--color-text-faint); flex: none; }
.nz.pinned .nz-pin, .nz.pinned .nz-head .icon.nz-pin { color: var(--color-accent); }
.nz-head .icon.nz-pin { margin-top: 6px; }
.nz-body { margin-top: 8px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-neutral-200); }
.nz-body.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nz-meta { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-faint); }
.nz-meta .sp { flex: 1; }
.nz-secret { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nz-secret-mask { font: 500 13px/1 var(--font-mono); letter-spacing: .18em; color: var(--color-text-faint); margin-right: 4px; }
.nz-secret.open .nz-secret-mask { display: none; }
.nz-secret-text { display: none; flex-basis: 100%; padding: 8px 10px; font: 500 13px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--st-warn) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-warn) 40%, transparent); }
.nz-secret.open .nz-secret-text { display: block; }
.nz-secret [data-nz-copy] { display: none; }
.nz-secret.open [data-nz-copy] { display: inline-flex; }
.nz-quick { display: grid; gap: 8px; }
.nz-quick .field { margin: 0; }
.nz-quick .row { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.nz-quick .row > input { flex: 1; }
.nz-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); cursor: pointer; }
.nz-chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); }
.nz-farben { display: inline-flex; gap: 8px; align-items: center; }
.nz-farben label { position: relative; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--nz-c, var(--color-neutral-600)); box-shadow: 0 0 0 1px var(--color-divider); }
.nz-farben input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.nz-farben input:checked + i { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--nz-c, var(--color-neutral-500)); }
.nz-farben .f-accent { --nz-c: var(--color-accent); } .nz-farben .f-ok { --nz-c: var(--st-ok); }
.nz-farben .f-warn { --nz-c: var(--st-warn); } .nz-farben .f-crit { --nz-c: var(--st-crit); }

/* ── Notizen-Widget: Haftnotiz-Kacheln + Schnell-Eingabe ───────────────────── */
.nzw-neu { margin-bottom: 12px; }
.nzw-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-divider); clip-path: var(--clip-notch); --notch: 8px; }
.nzw-zeile:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.nzw-ic { color: var(--color-accent); display: grid; place-items: center; }
.nzw-zeile input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; min-height: 32px; padding: 4px 2px; font-size: 13.5px; }
.nzw-zeile input:focus-visible { outline: none; }
.nzw-mehr { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast); }
.nzw-mehr:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.nzw-mehr.offen { transform: rotate(90deg); color: var(--color-accent); }
.nzw-optionen { display: grid; gap: 8px; padding: 10px 10px 8px; background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface-2)); animation: na-fade var(--dur-base) both; }
.nzw-optionen textarea { width: 100%; resize: vertical; min-height: 54px; font-size: 13px; }
.nzw-opt-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nzw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.nzw-kachel { --nz-c: var(--color-neutral-500); position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 12px 12px 10px;
  color: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--nz-c) 14%, var(--color-surface-2)), var(--color-surface-2) 60%);
  clip-path: var(--clip-notch); --notch: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-c) 30%, var(--color-divider));
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.nzw-kachel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nz-c); box-shadow: 0 0 10px color-mix(in srgb, var(--nz-c) 60%, transparent); }
.nzw-kachel.nz-accent { --nz-c: var(--color-accent); } .nzw-kachel.nz-ok { --nz-c: var(--st-ok); } .nzw-kachel.nz-warn { --nz-c: var(--st-warn); } .nzw-kachel.nz-crit { --nz-c: var(--st-crit); }
.nzw-kachel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-c) 55%, var(--color-divider)), 0 8px 20px -12px color-mix(in srgb, var(--nz-c) 70%, transparent); }
.nzw-kachel.pinned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); }
.nzw-kopf { display: flex; align-items: flex-start; gap: 6px; }
.nzw-titel { flex: 1; min-width: 0; font: 500 13.5px/1.3 var(--font-heading); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit; text-decoration: none; }
.nzw-titel:hover { color: var(--color-accent-ink); }
.nzw-text { text-decoration: none; }
.nzw-marken { display: inline-flex; gap: 4px; flex: none; }
.nzw-marken .nzw-pin { color: var(--color-accent); } .nzw-marken .nzw-lock { color: var(--st-warn); }
.nzw-text { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-300); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nzw-text.leer { color: var(--color-text-faint); font-style: italic; }
.nzw-kachel .nz-secret { margin-top: 0; }
.nzw-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; color: var(--color-text-faint); padding-top: 6px; }
.nzw-edit { opacity: 0; transition: opacity var(--dur-fast); color: var(--color-accent); display: inline-flex; align-items: center; gap: 3px; }
.nzw-kachel:hover .nzw-edit { opacity: 1; }
.nzw-filter { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 10px; background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); border-radius: var(--radius-sm); }
.nzw-filter button { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 5px 9px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; }
.nzw-filter button i { font: 600 10px/1 var(--font-mono); font-style: normal; color: var(--color-text-faint); }
.nzw-filter button.on { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 0 -1px 0 var(--color-accent); }
.nzw-filter button.on i { color: var(--color-accent-ink); }
.nzw-grid.voll { max-height: 440px; overflow: auto; padding-right: 4px; }
.nzw-del { flex: none; margin: -4px -6px 0 0; }
.nzw-del button { border: 0; background: transparent; color: var(--color-text-faint); cursor: pointer; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: var(--radius-sm);
  opacity: 0; transition: opacity var(--dur-fast), color var(--dur-fast), background var(--dur-fast), width var(--dur-fast); font: 500 10px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; }
.nzw-del button span { display: none; }
.nzw-kachel:hover .nzw-del button, .nzw-del button.armed, .nzw-del button:focus-visible { opacity: 1; }
.nzw-del button:hover { color: var(--st-crit); background: color-mix(in srgb, var(--st-crit) 12%, transparent); }
.nzw-del button.armed { width: auto; padding: 0 8px; color: #fff; background: var(--st-crit); }
.nzw-del button.armed span { display: inline; }
@media (hover: none) { .nzw-del button { opacity: .75; } }   /* Touch: kein Hover → Löschen immer sichtbar */
.nzw-mehr-btn { border: 0; background: transparent; color: var(--color-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; padding: 4px 6px; border-radius: var(--radius-sm); }
.nzw-mehr-btn:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.nzw-mehr-btn.offen .icon { transform: rotate(90deg); }
.nzw-stat { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); }
.nzw-leer { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 12px; color: var(--color-text-muted); font-size: 12.5px; }
.nzw-leer b { color: var(--color-text); font-weight: 500; }
.nzw-leer-ic { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); clip-path: var(--clip-notch); --notch: 8px; }

/* ── Mitarbeiter-Profil (Firmen-Übersicht → Person) ───────────────────────── */
.profil-projekte { display: flex; flex-direction: column; }
.profil-projekt { display: flex; align-items: center; gap: 10px; padding: 8px 0; background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.profil-projekt:last-child { background: none; }
.profil-projekt .pp-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.profil-projekt .pp-name { color: var(--color-neutral-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.profil-projekt .pp-meta { flex-basis: 100%; font-size: 11.5px; color: var(--color-text-faint); display: inline-flex; gap: 6px; align-items: center; }

/* ── Werkzeuge: PDF → DXF (Widget + Seite) ──────────────────────────────────── */
.tl-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 14px; cursor: pointer;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface-2)); clip-path: var(--clip-notch); --notch: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); font-size: 13px; color: var(--color-neutral-200); transition: background var(--dur-fast); }
.tl-drop:hover, .tl-drop.over { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-2)); }
.tl-drop-ic { color: var(--color-accent); }
.tl-drop b { color: var(--color-text); font-weight: 500; }
.tl-jobs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tl-job { padding: 8px 10px; background: var(--color-surface-2); clip-path: var(--clip-notch); --notch: 6px; }
.tl-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; }
.tl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tl-st { flex: none; font: 500 10.5px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-muted); }
.tl-job[data-st="fertig"] .tl-st { color: var(--st-ok); } .tl-job[data-st="fehler"] .tl-st { color: var(--st-crit); } .tl-job[data-st="laeuft"] .tl-st { color: var(--color-accent); }
.tl-bar { height: 3px; margin: 7px 0 6px; background: color-mix(in srgb, var(--color-text) 8%, transparent); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-glow); transition: width .4s var(--ease-out); }
.tl-job[data-st="fertig"] .tl-bar i { background: var(--st-ok); } .tl-job[data-st="fehler"] .tl-bar i { background: var(--st-crit); }
.tl-job[data-st="laeuft"] .tl-bar i { background-image: linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.35) 50%, transparent 60% 100%); background-size: 200% 100%; animation: tl-shimmer 1.2s linear infinite; }
@keyframes tl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); min-height: 18px; }
.tl-msg { font-size: 12px; color: var(--color-text-muted); }
.tl-job[data-st="fehler"] .tl-msg { color: var(--st-crit); }

/* ── Chat-Dock (unten rechts, nur große Bildschirme) ────────────────────────── */
.cd { position: fixed; right: 18px; bottom: 0; z-index: 80; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.cd > * { pointer-events: auto; }
.cd-windows { display: flex; align-items: flex-end; gap: 10px; }
.cd-side { position: relative; }
.cd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 10px; border: 0; cursor: pointer; margin-bottom: 0;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--color-divider-strong);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; }
.cd-pill:hover { color: var(--color-accent-ink); }
.cd-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 8px var(--st-ok); }
.cd-pill.has-new .cd-pill-dot { background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); animation: na-led-pulse 1.4s var(--ease-out) infinite; }
.cd-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font: 600 10.5px/1 var(--font-mono);
  background: var(--color-accent); color: #fff; }
.cd-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: 320px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--color-surface); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-divider-strong); clip-path: var(--clip-notch); --notch: 10px;
  animation: sc-holo var(--dur-slow) var(--ease-out) both; }
.cd-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; font-size: 14px; }
.cd-panel-head a { margin-left: auto; font: 500 10.5px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-accent); text-decoration: none; }
.cd-tabs { display: flex; gap: 2px; margin: 0 12px 8px; padding: 3px; background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); border-radius: var(--radius-sm); }
.cd-tabs button { flex: 1; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 6px 8px; border-radius: 3px;
  font: 500 10.5px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cd-tabs button.on { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 0 -1px 0 var(--color-accent); }
.cd-av-a { background: color-mix(in srgb, var(--st-warn) 30%, var(--color-surface-2)); }
.cd-win-sub.zu { color: var(--color-text-faint); }
.cd-foot textarea:disabled { opacity: .6; }
.cd-search { margin: 0 12px 8px; padding: 8px 10px; width: calc(100% - 24px); font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface-2); border: 0;
  box-shadow: inset 0 0 0 1px var(--color-divider); }
.cd-search:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.cd-list { overflow: auto; padding: 0 6px 8px; }
.cd-grp { font: 500 10px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); padding: 10px 8px 4px; }
.cd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--color-text); cursor: pointer;
  padding: 7px 8px; border-radius: var(--radius-sm); font: inherit; }
.cd-item:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.cd-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--font-heading);
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface-2)); color: var(--color-text); }
.cd-av-g { background: color-mix(in srgb, var(--firma-c) 30%, var(--color-surface-2)); }
.cd-on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 2px var(--color-surface); }
.cd-it { flex: 1; min-width: 0; display: grid; }
.cd-n { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-s { font-size: 11px; color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-cnt { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font: 600 10.5px/1 var(--font-mono); background: var(--color-accent); color: #fff; }
.cd-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--color-text-faint); }
.cd-ic { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm); font: 500 15px/1 var(--font-body); text-decoration: none; }
.cd-ic:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.cd-win { width: 320px; height: 430px; display: flex; flex-direction: column; background: var(--color-surface);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-divider-strong); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); animation: sc-holo var(--dur-slow) var(--ease-out) both; }
.cd-win.min { height: auto; }
.cd-win.min .cd-msgs, .cd-win.min .cd-foot { display: none; }
.cd-win.blink .cd-win-head { animation: na-led-pulse 1.4s var(--ease-out) infinite; box-shadow: inset 0 -2px 0 var(--color-accent); }
.cd-win-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); cursor: default; }
.cd-win-head .cd-av { width: 26px; height: 26px; font-size: 10px; }
.cd-win-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.cd-win-title b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-win-sub { font-size: 10.5px; color: var(--st-ok); }
.cd-msgs { flex: 1; overflow: auto; padding: 10px 10px 4px; display: flex; flex-direction: column; gap: 6px; }
.cd-day { align-self: center; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--color-text-faint); padding: 6px 0 2px; }
.cd-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.cd-msg.me { align-self: flex-end; align-items: flex-end; }
.cd-who { font-size: 10.5px; color: var(--color-accent); margin: 0 4px 1px; }
.cd-b { padding: 7px 11px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-2);
  border-radius: 12px 12px 12px 3px; box-shadow: inset 0 0 0 1px var(--color-divider); }
.cd-msg.me .cd-b { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); border-radius: 12px 12px 3px 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.cd-t { font-size: 10px; color: var(--color-text-faint); margin: 2px 4px 0; }
.cd-foot { display: flex; align-items: flex-end; gap: 6px; padding: 8px; background: var(--rule-h-soft) no-repeat top / 100% 1px; }
.cd-foot textarea { flex: 1; resize: none; border: 0; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--color-text);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); max-height: 96px; }
.cd-foot textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.cd-send { border: 0; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; background: var(--color-accent); color: #fff; font-size: 13px; clip-path: var(--clip-notch); --notch: 6px; }
@media (max-width: 1099px) { .cd { display: none !important; } }
@media print { .cd { display: none !important; } }

/* ── Befehls-Palette (Strg/⌘+K) ─────────────────────────────────────────────── */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center;
  padding: 12vh var(--space-4) var(--space-4); background: color-mix(in srgb, var(--color-bg-deep) 70%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: na-fade var(--dur-base) both; }
.cmdk-backdrop.open { display: flex; }
.cmdk { position: relative; width: min(560px, 100%); background: var(--color-surface); box-shadow: var(--shadow-lg); overflow: hidden;
  clip-path: var(--clip-notch); --notch: 14px; animation: sc-holo var(--dur-slow) var(--ease-out) both; }
.cmdk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-accent); opacity: .6; pointer-events: none;
  animation: na-scanline var(--dur-boot) var(--ease-in-out) both; }
.cmdk input { width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--color-text); caret-color: var(--color-accent);
  padding: var(--space-4) var(--space-6); }
.cmdk input:focus-visible { outline: none; }
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 0 var(--space-2) var(--space-2); background: var(--rule-h) no-repeat top / 100% 1px; }
.cmdk-group { font: 500 var(--text-xs)/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint);
  margin: var(--space-3) var(--space-3) var(--space-1); padding-top: var(--space-2); }
.cmdk-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--text-base);
  cursor: pointer; color: var(--color-neutral-300); }
.cmdk-item .meta { margin-left: auto; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
.cmdk-item.sel { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-ink); }
.cmdk-item.sel::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-glow); }
.cmdk-empty { padding: var(--space-6); text-align: center; font-size: 13.5px; color: var(--color-text-faint); }

/* ── Topbar nur mobil / Drawer ──────────────────────────────────────────────── */
.topbar { display: none; }
@media (max-width: 1100px) {
  .layout, body.nav-rail .layout { grid-template-columns: 1fr; }
  .topbar { display: flex; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 40; padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--color-divider); }
  .topbar .na-brand { padding: 0; text-decoration: none; color: inherit; }
  .topbar .spacer { flex: 1; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 85vw); z-index: 60; background: var(--color-surface);
    transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-lg); view-transition-name: none; }
  .sidebar.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 50; display: none; background: color-mix(in srgb, var(--color-bg-deep) 60%, transparent); }
  .scrim.open { display: block; animation: na-fade var(--dur-base) both; }
  .main { padding: 0 var(--space-4) 56px; }
  .apptop { top: 0; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats .stat:nth-child(3n+1) { padding-left: 0; background: none; }
  .table-scroll.freeze table.data th:first-child, .table-scroll.freeze table.data td:first-child { min-width: 140px; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:nth-child(3n+1) { padding-left: var(--space-6); background: var(--rule-v) no-repeat left / 1px 100%; }
  .stats .stat:nth-child(2n+1) { padding-left: 0; background: none; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr !important; }
  .inbox-row { flex-wrap: wrap; }
  .inbox-row .do { width: 100%; justify-content: flex-end; }
  .main { padding: 0 var(--space-3) 48px; }
  .pagehead h1 { font-size: 24px; }
  .na-toasts { right: var(--space-3); bottom: var(--space-3); }
}

/* ── Druck ──────────────────────────────────────────────────────────────────── */
.print-header, .print-fuss { display: none; }
@media print {
  body { background: #fff; color: #000; }
  .sidebar, .topbar, .no-print, .scrim, .cmdk-backdrop, .na-toasts, .na-dialog-backdrop, .na-scan-overlay, .apptop { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; max-width: none; background: none; }
  .main > *, .card, .stat, .kpi-hero, table.data tr, .firmenspalte { animation: none !important; }
  .card, .kpi-hero, .seiten-info, .firmenspalte, .login-card, .ma-karte, .org-kasten { clip-path: none; box-shadow: none; border: 1px solid #bbb; background: #fff; }
  .card::before, .card::after, .btn::after, .ampel::after, .flash::after, .firmenspalte::before, .firmenspalte::after { display: none; }
  .table-scroll.freeze { max-height: none; overflow: visible; }
  .table-scroll.freeze table.data th, .table-scroll.freeze table.data td:first-child { position: static; box-shadow: none; }
}

/* ── Offizielle Nachricht: In-Page-Dialog (nachricht.js) + Auslöser-Knopf ───────────────────────── */
.dn-trigger { color: var(--color-accent-ink); }
.dn-trigger:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.dn-dialog { width: min(540px, 100%); position: relative; }
.dn-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: var(--space-4); }
.dn-kopf .na-dialog-title { margin-bottom: 2px; }
.dn-kopf .na-caps { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dn-sub { font-size: 12px; color: var(--color-text-muted); }
.dn-av { flex: none; width: 44px; height: 44px; font-size: 15px; color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.dn-hinweis { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted);
  padding: 10px 12px; margin-bottom: var(--space-5); border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-2)), var(--color-surface-2));
  box-shadow: inset 2px 0 0 var(--color-accent); }
.dn-hinweis .icon { flex: none; color: var(--color-accent); margin-top: 2px; }
.dn-hinweis b { color: var(--color-text); font-weight: 500; }
.dn-form .field { margin-bottom: var(--space-4); }
.dn-form textarea { resize: vertical; min-height: 110px; }
.dn-actions { align-items: center; margin-top: var(--space-5); }
.dn-fehler { flex: 1; font-size: 12px; color: var(--st-crit); }
@media (max-width: 600px) { .dn-kopf { flex-direction: column-reverse; } .dn-actions { flex-wrap: wrap; } .dn-fehler { flex-basis: 100%; } }

/* ── Aufgaben-Hub: eine Karte, zwei Spuren (Memo / To-Do · Meine Aufgaben) + Reiter auf den Seiten ────── */
.hub-card .card-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.hub-n { color: var(--color-neutral-500); font-weight: 500; }
.hub-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 10px/1.3 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-text-faint); padding-top: 4px; }
.hub-legende span { display: inline-flex; align-items: center; gap: 5px; }
.hub-lanes { display: grid; gap: 22px; }
@media (min-width: 1000px) { .hub-lanes.zwei { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 28px; }
  .hub-lanes.zwei > .hub-lane + .hub-lane { padding-left: 28px; box-shadow: inset 1px 0 0 var(--color-divider); } }
.hub-lane { min-width: 0; }
.hub-lane-hd { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font: 500 var(--text-base)/1.2 var(--font-heading); letter-spacing: var(--track-heading); }
.hub-lane-hd > span { color: var(--color-neutral-500); font-weight: 500; }
.hub-lane-hd .btn { margin-left: auto; }
.hub-lane .card { box-shadow: none; }
.hub-pakete { display: flex; flex-direction: column; }
.hub-paket { display: flex; align-items: center; gap: 12px; padding: 10px 2px; text-decoration: none; color: inherit; background: var(--rule-h-soft) no-repeat bottom / 100% 1px; }
.hub-paket:hover .t1 { color: var(--color-accent-ink); }
.hub-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.hub-paket-txt { flex: 1; min-width: 0; }
.hub-paket-txt .t1 { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-paket-txt .t2 { display: block; font-size: 11px; color: var(--color-neutral-500); }
.hub-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--space-5); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-divider); border-radius: var(--radius-sm); }
.hub-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 3px; text-decoration: none; color: var(--color-text-muted);
  font: 500 11px/1 var(--font-heading); letter-spacing: var(--track-caps); text-transform: uppercase; }
.hub-tabs a:hover { color: var(--color-text); }
.hub-tabs a.on { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 0 -1px 0 var(--color-accent); }