/* ═══════════════════════════════════════════════════════════════════════════
   nachtschicht.css — Design-System „Nachtschicht" für AIghtshift
   ───────────────────────────────────────────────────────────────────────────
   Die EINE Quelle für Aussehen und Zustände. Jede App und das HQ binden diese
   Datei ein. Neue Apps bauen ausschließlich aus diesen Klassen. Ein Wert, der
   hier fehlt, wird HIER ergänzt (mit Styleguide-Eintrag), nie lokal in einer App.

   Aufbau:  1 Werte  ·  2 Grundlagen  ·  3 Zustände  ·  4 Bausteine
            5 Rückmeldung  ·  6 Überlagerungen  ·  7 HQ  ·  8 Umbrüche

   Zustandsklassen (überall gleich, nie eigene erfinden):
     .is-aktiv      aktueller Menüpunkt / Reiter / Stufe   (+ aria-current)
     .is-gewaehlt   gewählte Option / Chip / Karte          (+ aria-pressed)
     .is-gesperrt   nicht erlaubt, Grund daneben            (+ aria-disabled)
     .is-fehler     Eingabe verletzt eine Regel
     .is-laedt      Skelett statt Inhalt
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 WERTE ─────────────────────────────────────────────────────────────── */

:root {
  /* Flächen — von tief nach hoch */
  --ns-tief:      #060911;   /* Kopfzeile, Fußzeile, abgesetzte Bänder */
  --ns-grund:     #0A0E1A;   /* Seitenhintergrund, Eingabe im Bearbeiten-Modus */
  --ns-erhoeht:   #0E1526;   /* Kartenköpfe, Felder, Tabellenköpfe, ruhende Chips */
  --ns-karte:     #121A2E;   /* Karten, Schubladen, Dialoge, Meldungen */
  --ns-aktiv:     #17203A;   /* Hover-Fläche, gewählte Zeile, gewählter Chip */

  /* Linien */
  --ns-linie-zart:  #131C33; /* Trenner zwischen Tabellenzeilen */
  --ns-linie:       #1A2440; /* Kartenrand, Kartenkopf-Unterkante */
  --ns-linie-feld:  #263252; /* Feld-, Chip-, Optionsrand */
  --ns-linie-knopf: #2F3D63; /* Sekundärknopf-Rand, Checkbox-Rand */
  --ns-linie-hover: #3A4A75; /* Hover-Rand für Chips und Filter */
  --ns-linie-aus:   #1E2740; /* Rand gesperrter Knöpfe */

  /* Text */
  --ns-text:      #EAF0F6;   /* Überschriften, Werte, aktiver Text      15,8:1 */
  --ns-text-2:    #C3CDE0;   /* Fließtext auf Karten */
  --ns-text-3:    #A7B2CB;   /* Absätze                                  8,1:1 */
  --ns-label:     #8B96B8;   /* NUR Labels, ruhende Menüpunkte           5,2:1 */
  --ns-hilfe:     #5D6A8A;   /* NUR Hilfstext, Stifte, Pfeile — nie Inhalt 3,1:1 */
  --ns-aus:       #4F5C78;   /* Text gesperrter Knöpfe */
  --ns-durch:     #6F7B99;   /* durchgestrichener Vorher-Wert */

  /* Signal */
  --ns-teal:      #2DD4BF;   /* Akzent, Erfolg, Fokus, gewählt */
  --ns-teal-hell: #5EEBD8;   /* Links, Datensatznummern */
  --ns-blau:      #5B9DFF;   /* Info, GEÄNDERT */
  --ns-gold:      #F5B841;   /* Warnung, In Prüfung, FREIGABE */
  --ns-alarm:     #F2777A;   /* Fehler, Löschen, GELÖSCHT */
  --ns-lila:      #9B7FFF;   /* RECHTE, Aktionen in der Palette */

  /* Bänder (Rand / Fläche) */
  --ns-info-rand:  #1E3050;  --ns-info-flaeche:  rgba(91,157,255,.08);
  --ns-warn-rand:  #3A3520;  --ns-warn-flaeche:  #12100B;
  --ns-fehl-rand:  #3A2430;  --ns-fehl-flaeche:  #17111A;
  --ns-gut-rand:   #1E3A32;  --ns-gut-flaeche:   #0C1A18;

  /* Primärverlauf — genau EIN Primärknopf je Bildschirm */
  --ns-verlauf: linear-gradient(100deg, #2DD4BF, #5B9DFF);
  --ns-auf-verlauf: #06131A;

  /* Schrift */
  --ns-titel: "Chakra Petch", system-ui, sans-serif;
  --ns-sans:  "IBM Plex Sans", system-ui, sans-serif;
  --ns-mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Radien */
  --ns-r-pille: 4px;  --ns-r-marke: 3px;  --ns-r-knopf: 8px;  --ns-r-chip: 7px;
  --ns-r-option: 9px; --ns-r-karte: 12px; --ns-r-dialog: 14px; --ns-r-rund: 999px;

  /* Maße */
  --ns-tipp: 44px;           /* Mindest-Antippfläche */
  --ns-zeile-mobil: 56px;    /* Mindesthöhe Feldzeile auf Mobil */

  /* Bewegung */
  --ns-kurz: .15s ease;
  --ns-weich: cubic-bezier(.2,.8,.2,1);

  /* Schatten — nur für Überlagerungen, nie für Karten */
  --ns-schatten-meldung: 0 18px 40px rgba(4,6,13,.5);
  --ns-schatten-schublade: -24px 0 60px rgba(4,6,13,.55);
  --ns-schatten-palette: 0 30px 70px rgba(4,6,13,.6);
  --ns-abdunkeln: rgba(4,6,13,.66);
}


/* ── 2 GRUNDLAGEN ────────────────────────────────────────────────────────── */

html, body { margin: 0; background: var(--ns-grund); color: var(--ns-text);
  font-family: var(--ns-sans); -webkit-font-smoothing: antialiased; }
input, select, button, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--ns-teal-hell); text-decoration: none; }
a:hover { color: var(--ns-blau); }
p, li, h1, h2, h3 { text-wrap: pretty; }

h1 { font-family: var(--ns-titel); font-weight: 600; font-size: clamp(20px,2.6vw,26px); line-height: 1.25; margin: 0; }
h2 { font-family: var(--ns-titel); font-weight: 600; font-size: clamp(20px,2.2vw,25px); line-height: 1.3; margin: 0; }
h3 { font-family: var(--ns-titel); font-weight: 600; font-size: 17px; margin: 0; }

.ns-label   { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ns-label); }
.ns-nummer  { font-family: var(--ns-mono); font-size: 11px; letter-spacing: .1em; color: var(--ns-teal-hell); }
.ns-mono    { font-family: var(--ns-mono); }
.ns-hilfe   { font-size: 13px; line-height: 1.6; color: var(--ns-hilfe); }
.ns-absatz  { font-size: 14.5px; line-height: 1.65; color: var(--ns-text-3); max-width: 740px; }

/* Fokus — immer sichtbar per Tastatur, unsichtbar per Maus (§23) */
:focus-visible { outline: 2px solid var(--ns-teal); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ns-linie-feld); border-radius: 5px; }
::-webkit-scrollbar-track { background: var(--ns-grund); }

@keyframes ns-einblenden  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ns-schublade   { from { transform: translateX(100%) } to { transform: none } }
@keyframes ns-blatt       { from { transform: translateY(100%) } to { transform: none } }
@keyframes ns-dialog      { from { opacity: 0; transform: translateY(16px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes ns-palette     { from { opacity: 0; transform: translateY(-14px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes ns-meldung     { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes ns-skelett     { 0%,100% { opacity: .5 } 50% { opacity: .85 } }
@keyframes ns-puls        { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes ns-tippen      { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── 3 ZUSTÄNDE — gelten für jeden Baustein ─────────────────────────────── */

.is-gesperrt, [aria-disabled="true"], button:disabled {
  cursor: not-allowed !important;
}
.is-laedt { background: var(--ns-linie) !important; color: transparent !important;
  animation: ns-skelett 1.5s ease-in-out infinite; border-radius: 5px; }


/* ── 4 BAUSTEINE ─────────────────────────────────────────────────────────── */

/* 4.1 Knöpfe ─────────────────────────────────────────────────────────────── */
.ns-knopf {                                   /* Sekundär — der Normalfall */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--ns-tipp); padding: 11px 17px; border-radius: var(--ns-r-knopf);
  border: 1px solid var(--ns-linie-knopf); background: transparent; color: var(--ns-text);
  font-size: 14px; white-space: nowrap; cursor: pointer; box-sizing: border-box;
  transition: border-color var(--ns-kurz), background var(--ns-kurz), color var(--ns-kurz);
}
.ns-knopf:hover { border-color: var(--ns-teal); }

.ns-knopf--primaer { border: 0; background: var(--ns-verlauf); color: var(--ns-auf-verlauf); font-weight: 600; padding: 12px 20px; }
.ns-knopf--primaer:hover { filter: brightness(1.06); }
.ns-knopf--primaer.is-gesperrt, .ns-knopf--primaer:disabled { background: var(--ns-erhoeht); color: var(--ns-aus); filter: none; }

.ns-knopf--gefahr { border-color: var(--ns-alarm); color: var(--ns-alarm); }
.ns-knopf--gefahr:hover { background: rgba(242,119,122,.1); border-color: var(--ns-alarm); }

.ns-knopf--warn { border-color: var(--ns-gold); color: var(--ns-gold); }
.ns-knopf--warn:hover { background: rgba(245,184,65,.1); border-color: var(--ns-gold); }

.ns-knopf--klein { min-height: 36px; padding: 8px 14px; font-size: 13px; border-radius: var(--ns-r-chip); }

.ns-knopf.is-gesperrt, .ns-knopf:disabled { border-color: var(--ns-linie-aus); color: var(--ns-aus); background: transparent; }

.ns-link-knopf { background: none; border: 0; padding: 0; color: var(--ns-teal-hell); font-size: 13px; cursor: pointer; }
.ns-link-knopf:hover { color: var(--ns-blau); }

.ns-symbol-knopf {                            /* ✕, ▲, ▼ — immer mit aria-label UND title */
  width: 32px; height: 32px; display: grid; place-items: center; line-height: 1;
  border-radius: var(--ns-r-chip); border: 1px solid var(--ns-linie-feld);
  background: transparent; color: var(--ns-label); cursor: pointer;
}
.ns-symbol-knopf:hover { border-color: var(--ns-teal); color: var(--ns-text); }

/* 4.2 Chips, Filter, Rollenwahl ──────────────────────────────────────────── */
.ns-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
  padding: 9px 15px; border-radius: var(--ns-r-chip); font-size: 13.5px; white-space: nowrap; cursor: pointer;
  background: var(--ns-erhoeht); border: 1px solid var(--ns-linie-feld); color: var(--ns-label);
  transition: border-color var(--ns-kurz), background var(--ns-kurz), color var(--ns-kurz);
}
.ns-chip:hover { border-color: var(--ns-linie-hover); }
.ns-chip.is-gewaehlt, .ns-chip[aria-pressed="true"] { background: var(--ns-aktiv); border-color: var(--ns-teal); color: var(--ns-text); }
.ns-chip__zahl { font-family: var(--ns-mono); font-size: 11px; color: var(--ns-hilfe); }
.ns-chip.is-gewaehlt .ns-chip__zahl { color: var(--ns-teal); }

/* 4.3 Reiter (waagerechte Navigation in Apps) ──────────────────────────────── */
.ns-reiter { display: flex; gap: 2px; overflow-x: auto; border-top: 1px solid var(--ns-linie-zart); }
.ns-reiter__punkt {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; white-space: nowrap;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--ns-label); font-size: 13.5px; cursor: pointer;
  transition: color var(--ns-kurz), border-color var(--ns-kurz);
}
.ns-reiter__punkt:hover { color: var(--ns-text); }
.ns-reiter__punkt.is-aktiv, .ns-reiter__punkt[aria-current="page"] { color: var(--ns-text); border-bottom-color: var(--ns-teal); }
.ns-reiter__zahl { font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-hilfe); }
.ns-reiter__punkt.is-aktiv .ns-reiter__zahl { color: var(--ns-teal); }

/* 4.4 Karten ─────────────────────────────────────────────────────────────── */
.ns-karte { border: 1px solid var(--ns-linie); border-radius: var(--ns-r-karte); background: var(--ns-karte); overflow: hidden; min-width: 0; }
.ns-karte__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--ns-linie); background: var(--ns-erhoeht); }
.ns-karte__rumpf { padding: 18px; }
.ns-karte__fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--ns-linie); background: var(--ns-erhoeht);
  font-family: var(--ns-mono); font-size: 11px; color: var(--ns-label); }
.ns-karte--warn { border-color: var(--ns-warn-rand); }
.ns-karte--klickbar { cursor: pointer; transition: border-color var(--ns-kurz); }
.ns-karte--klickbar:hover { border-color: var(--ns-linie-knopf); }

/* 4.5 Pillen (Status) und KI-Marke ──────────────────────────────────────────
   Farbe über Modifikator. Text ist IMMER dabei — Farbe allein trägt nie (§23). */
.ns-pille { display: inline-block; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; border-radius: var(--ns-r-pille); padding: 4px 9px; white-space: nowrap; }
.ns-pille--klein { font-size: 9px; padding: 3px 6px; }
.ns-pille--neutral { color: var(--ns-label); background: rgba(139,150,184,.12); }
.ns-pille--teal    { color: var(--ns-teal);  background: rgba(45,212,191,.12); }
.ns-pille--blau    { color: var(--ns-blau);  background: rgba(91,157,255,.12); }
.ns-pille--gold    { color: var(--ns-gold);  background: rgba(245,184,65,.12); }
.ns-pille--alarm   { color: var(--ns-alarm); background: rgba(242,119,122,.12); }
.ns-pille--lila    { color: var(--ns-lila);  background: rgba(155,127,255,.12); }

.ns-ki { display: inline-block; font-family: var(--ns-mono); font-size: 8px; letter-spacing: .1em;
  color: var(--ns-teal); border: 1px solid var(--ns-teal); border-radius: var(--ns-r-marke); padding: 1px 4px; }
/* An JEDEM Namen eines Agenten, überall (§4, Art. 50 KI-VO). */

.ns-zaehler { font-family: var(--ns-mono); font-size: 10px; font-weight: 600; background: var(--ns-teal);
  color: #04060D; border-radius: 9px; padding: 2px 7px; }

/* 4.6 Felder ─────────────────────────────────────────────────────────────── */
.ns-feld { display: grid; gap: 8px; }
.ns-feld__label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-label); }
.ns-feld__hilfe { font-size: 12.5px; line-height: 1.55; color: var(--ns-hilfe); }
.ns-feld__fehler { font-size: 12.5px; line-height: 1.5; color: var(--ns-alarm); }
.ns-eingabe {
  width: 100%; box-sizing: border-box; min-height: var(--ns-tipp); padding: 11px 14px;
  background: var(--ns-erhoeht); border: 1px solid var(--ns-linie-feld); border-radius: var(--ns-r-knopf);
  color: var(--ns-text); font-size: 14px; outline: none; transition: border-color var(--ns-kurz);
}
.ns-eingabe::placeholder { color: var(--ns-hilfe); }
.ns-eingabe:focus { border-color: var(--ns-teal); }
.ns-eingabe.is-fehler { border-color: var(--ns-alarm); background: var(--ns-fehl-flaeche); }
.ns-eingabe.is-gesperrt, .ns-eingabe:disabled { background: var(--ns-grund); color: var(--ns-aus); }
textarea.ns-eingabe { resize: vertical; line-height: 1.6; }

.ns-suche { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; }
.ns-suche::before { content: "⌕"; position: absolute; left: 14px; font-size: 14px; color: var(--ns-hilfe); pointer-events: none; }
.ns-suche .ns-eingabe { padding-left: 36px; }

/* 4.7 Inline-Bearbeitung — JEDES Feld eines Datensatzes (§14) ─────────────────
   Ruhe: Wert + Stift (unsichtbar ohne Recht).  Hover: Fläche --ns-aktiv.
   Klick: Eingabe mit Teal-Rand.  Enter übernimmt · Esc verwirft · Verlassen speichert. */
.ns-inline { display: inline-block; max-width: 100%; margin: -5px -9px; padding: 5px 9px;
  border-radius: var(--ns-r-knopf); cursor: text; transition: background var(--ns-kurz); }
.ns-inline:hover { background: var(--ns-aktiv); }
.ns-inline__stift { font-size: 12px; margin-left: 8px; color: var(--ns-hilfe); }
.ns-inline.is-gesperrt { cursor: default; }
.ns-inline.is-gesperrt:hover { background: transparent; }
.ns-inline.is-gesperrt .ns-inline__stift { opacity: 0; }
.ns-inline__eingabe { width: 100%; box-sizing: border-box; background: var(--ns-grund);
  border: 1px solid var(--ns-teal); border-radius: 7px; color: var(--ns-text); padding: 8px 12px; outline: none; font: inherit; }

/* Speicherzustand — sichtbar, solange etwas bearbeitbar ist */
.ns-speicher { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ns-mono);
  font-size: 10.5px; letter-spacing: .06em; border-radius: 6px; padding: 6px 10px; white-space: nowrap; }
.ns-speicher--ok      { color: var(--ns-teal); border: 1px solid rgba(45,212,191,.27); background: rgba(45,212,191,.08); }
.ns-speicher--laeuft  { color: var(--ns-gold); border: 1px solid rgba(245,184,65,.27); background: rgba(245,184,65,.08); }
.ns-speicher--offen   { color: var(--ns-blau); border: 1px solid rgba(91,157,255,.27); background: rgba(91,157,255,.08); }
/* Texte: „Gespeichert" · „Speichert …" · „Ungespeichert" */

/* 4.8 Optionen (Auswahl in Formularen / Konfigurator) ─────────────────────── */
.ns-option {
  display: flex; align-items: flex-start; gap: 12px; min-height: 52px; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid var(--ns-linie-feld); border-radius: var(--ns-r-option);
  background: var(--ns-erhoeht); cursor: pointer; transition: border-color var(--ns-kurz), background var(--ns-kurz);
}
.ns-option:hover { border-color: var(--ns-teal); }
.ns-option.is-gewaehlt { background: var(--ns-aktiv); border-color: var(--ns-teal); }
.ns-option.is-gesperrt { background: #140F14; border-color: var(--ns-fehl-rand); }
.ns-option.is-gesperrt:hover { border-color: var(--ns-fehl-rand); }
.ns-option.is-gesperrt .ns-option__text { color: var(--ns-durch); }
.ns-option__grund { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ns-alarm); }
/* Gesperrte Optionen werden AUSGEGRAUT mit Grund, nie ausgeblendet (§15). */
.ns-option--zweig { cursor: default; background: #0C1220; border-color: var(--ns-linie-aus); }
.ns-option--zweig.is-gewaehlt { background: rgba(45,212,191,.06); border-color: var(--ns-teal); }
.ns-option__kinder { margin: 9px 0 4px 26px; padding-left: 16px; border-left: 1px solid var(--ns-linie-aus); display: flex; flex-direction: column; gap: 8px; }

.ns-kasten { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center;
  font-size: 10px; border-radius: 5px; background: var(--ns-grund); border: 1px solid var(--ns-linie-knopf); color: transparent; }
.ns-kasten--rund { border-radius: 50%; }
.is-gewaehlt > .ns-kasten, .ns-kasten.is-gewaehlt { background: rgba(45,212,191,.18); border-color: var(--ns-teal); color: var(--ns-teal); }
.is-gesperrt > .ns-kasten { border-color: var(--ns-fehl-rand); }

/* Mengenregler */
.ns-menge { display: inline-flex; align-items: center; border: 1px solid var(--ns-linie-feld); border-radius: var(--ns-r-chip); overflow: hidden; background: var(--ns-grund); }
.ns-menge button { width: 32px; height: 32px; border: 0; background: var(--ns-aktiv); color: var(--ns-text); font-size: 15px; line-height: 1; cursor: pointer; }
.ns-menge button:last-child { color: var(--ns-teal); }
.ns-menge button:disabled { background: transparent; color: #3F4A63; cursor: not-allowed; }
.ns-menge output { min-width: 34px; text-align: center; font-family: var(--ns-mono); font-size: 14px; }

/* Schalter (aktiv / inaktiv) */
.ns-schalter { width: 44px; height: 26px; padding: 0 3px; display: flex; align-items: center; justify-content: flex-start;
  border-radius: 13px; border: 1px solid var(--ns-linie-knopf); background: var(--ns-grund); cursor: pointer; }
.ns-schalter::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #3F4A63; }
.ns-schalter[aria-checked="true"] { justify-content: flex-end; border-color: var(--ns-teal); background: rgba(45,212,191,.18); }
.ns-schalter[aria-checked="true"]::after { background: var(--ns-teal); }

/* 4.9 Tabellen ───────────────────────────────────────────────────────────── */
.ns-tabelle { width: 100%; border-collapse: collapse; }
.ns-tabelle th { padding: 11px 18px; text-align: left; background: var(--ns-erhoeht); border-bottom: 1px solid var(--ns-linie);
  font-family: var(--ns-mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ns-label); }
.ns-tabelle td { padding: 14px 18px; border-bottom: 1px solid var(--ns-linie-zart); font-size: 14px; vertical-align: middle; }
.ns-tabelle tbody tr { cursor: pointer; transition: background var(--ns-kurz); }
.ns-tabelle tbody tr:hover { background: var(--ns-aktiv); }
.ns-tabelle tbody tr.is-gewaehlt { background: var(--ns-aktiv); box-shadow: inset 2px 0 0 var(--ns-teal); }
.ns-tabelle .ns-zahl { font-family: var(--ns-mono); text-align: right; }
.ns-tabelle .ns-pfeil { color: var(--ns-hilfe); text-align: right; width: 28px; }

.ns-balken { display: block; height: 5px; border-radius: 3px; background: var(--ns-linie); overflow: hidden; min-width: 34px; }
.ns-balken > span { display: block; height: 100%; background: var(--ns-gold); }
.ns-balken.is-voll > span { background: var(--ns-teal); }

/* 4.10 Statusfluss ───────────────────────────────────────────────────────────
   Jede Stufe ist direkt anklickbar, nicht nur automatisch erreichbar. */
.ns-spur { display: flex; align-items: center; max-width: 520px; }
.ns-spur__punkt { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; background: var(--ns-linie-feld); }
.ns-spur__punkt.is-fertig { background: var(--ns-teal); }
.ns-spur__punkt.is-aktiv { background: var(--stufe, var(--ns-gold)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stufe, var(--ns-gold)) 16%, transparent); }
.ns-spur__linie { flex: 1; height: 2px; background: var(--ns-linie); }
.ns-spur__linie.is-fertig { background: var(--ns-teal); }

.ns-stufe { display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 13px 14px;
  border: 1px solid var(--ns-linie-feld); border-radius: 10px; background: var(--ns-erhoeht); color: var(--ns-text); cursor: pointer; text-align: left; }
.ns-stufe:hover { border-color: var(--ns-teal); }
.ns-stufe.is-aktiv { background: var(--ns-aktiv); border-color: var(--stufe, var(--ns-gold)); cursor: default; }
.ns-stufe.is-gesperrt { opacity: .55; }
.ns-stufe__marke { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--ns-mono); font-size: 11px; color: var(--ns-hilfe); background: var(--ns-grund); border: 1px solid var(--ns-linie-knopf); }
.ns-stufe.is-fertig .ns-stufe__marke { color: var(--ns-teal); background: rgba(45,212,191,.14); border-color: var(--ns-teal); }
.ns-stufe.is-aktiv .ns-stufe__marke { color: var(--stufe, var(--ns-gold)); border-color: var(--stufe, var(--ns-gold)); }
/* Marke: Ziffer 1, 2, 3 — erledigt „✓". NIE Emoji (§4). */

/* 4.11 Protokoll / Verlauf (§19) ─────────────────────────────────────────── */
.ns-eintrag { display: grid; grid-template-columns: 8px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ns-linie-zart); }
.ns-eintrag__punkt { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--art, var(--ns-hilfe)); }
.ns-eintrag__vorher { text-decoration: line-through; color: var(--ns-durch); }
.ns-eintrag__nachher { color: var(--ns-teal); }
/* Art → --art:  ANGELEGT teal · GEÄNDERT blau · GELÖSCHT alarm · FREIGABE gold ·
   ZUGRIFF label · RECHTE lila · SYSTEM hilfe */

/* 4.12 Kanban / Boards (§9) ──────────────────────────────────────────────────
   Karte ziehen und ueber einer Spalte fallen lassen aendert den Status. Wer
   keine Maus hat, nutzt die Pfeile auf der Karte (Tastatur-Alternative). */
.ns-kanban { display: grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap: 14px;
  overflow-x: auto; padding-bottom: 6px; }
.ns-kanban__spalte { min-width: 0; border-radius: var(--ns-r-karte); overflow: hidden;
  background: var(--ns-erhoeht); border: 1px solid var(--ns-linie);
  display: flex; flex-direction: column;
  transition: background var(--ns-kurz), border-color var(--ns-kurz); }
.ns-kanban__spalte.is-ziel { border-color: var(--ns-teal);
  background: color-mix(in srgb, var(--ns-teal) 6%, var(--ns-erhoeht)); }
.ns-kanban__kopf { display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  border-bottom: 1px solid var(--ns-linie); }
.ns-kanban__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--stufe, var(--ns-label)); flex: 0 0 8px; }
.ns-kanban__titel { font-family: var(--ns-mono); font-size: 11px; letter-spacing: .12em; color: var(--ns-text-2); }
.ns-kanban__zahl { margin-left: auto; font-family: var(--ns-mono); font-size: 11px; color: var(--ns-label); }
.ns-kanban__rumpf { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; flex: 1; }
.ns-kanban__leer { border: 1px dashed var(--ns-linie-feld); border-radius: var(--ns-r-option);
  padding: 20px 14px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ns-hilfe); }

.ns-kanban__karte { border-radius: var(--ns-r-option); background: var(--ns-karte); border: 1px solid var(--ns-linie);
  padding: 12px 13px; cursor: pointer; transition: opacity var(--ns-kurz), transform var(--ns-kurz), border-color var(--ns-kurz); }
.ns-kanban__karte:hover { border-color: var(--ns-linie-knopf); }
.ns-kanban__karte.is-gezogen { opacity: .4; transform: scale(.98); }
.ns-kanban__karte-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ns-kanban__griff { margin-left: auto; color: var(--ns-hilfe); font-size: 14px; line-height: 1; cursor: grab; }
.ns-kanban__karte-titel { font-size: 14px; font-weight: 500; line-height: 1.45; margin-bottom: 11px; }
.ns-kanban__zuweisung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-kanban__bild { width: 22px; height: 22px; border-radius: 5px; display: block; flex: 0 0 22px;
  background: var(--ns-aktiv) center/cover no-repeat; }
.ns-kanban__wer { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; color: var(--ns-label); }

/* Tastatur-Alternative zum Ziehen -- Styleguide §9 verlangt sie ausdruecklich, keine Option. */
.ns-kanban__pfeile { display: flex; gap: 6px; margin-top: 11px; }
.ns-kanban__pfeil { flex: 1; min-height: 32px; border: 1px solid var(--ns-linie-knopf); background: transparent;
  color: var(--ns-label); border-radius: 6px; font-family: var(--ns-mono); font-size: 10.5px; cursor: pointer; }
.ns-kanban__pfeil:hover { border-color: var(--ns-teal); color: var(--ns-text); }
.ns-kanban__pfeil:disabled { opacity: .35; cursor: not-allowed; }

/* Kopf-Filterzeile mit runden Agentenbildern (§9, Denis-Auftrag 2026-09-23) */
.ns-filterzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ns-avatar-chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ns-tipp);
  padding: 6px 14px 6px 6px; border-radius: var(--ns-r-rund); background: var(--ns-erhoeht);
  border: 1px solid var(--ns-linie-feld); color: var(--ns-label); font-size: 13px; cursor: pointer;
  transition: background var(--ns-kurz), border-color var(--ns-kurz), color var(--ns-kurz); }
.ns-avatar-chip:hover { border-color: var(--ns-linie-hover); }
.ns-avatar-chip.is-gewaehlt { background: var(--ns-aktiv); border-color: var(--ns-teal); color: var(--ns-text); }
.ns-avatar-chip__bild { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: block; background: var(--ns-aktiv) center/cover no-repeat; }
.ns-avatar-chip__mensch { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: grid; place-items: center;
  background: var(--ns-aktiv); border: 1px solid var(--ns-linie-feld); font-family: var(--ns-mono); font-size: 10px; color: var(--ns-label); }


/* ── 5 RÜCKMELDUNG ───────────────────────────────────────────────────────── */

.ns-band { display: grid; grid-template-columns: 26px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 18px; border: 1px solid; border-radius: 11px; font-size: 14px; line-height: 1.6; color: var(--ns-text-2); }
.ns-band__marke { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid; font-size: 12px; }
.ns-band--info { border-color: var(--ns-info-rand); background: var(--ns-info-flaeche); }
.ns-band--info .ns-band__marke { color: var(--ns-blau); border-color: var(--ns-blau); }
.ns-band--warn { border-color: var(--ns-warn-rand); background: var(--ns-warn-flaeche); }
.ns-band--warn .ns-band__marke { color: var(--ns-gold); border-color: var(--ns-gold); }
.ns-band--fehler { border-color: var(--ns-fehl-rand); background: var(--ns-fehl-flaeche); }
.ns-band--fehler .ns-band__marke { color: var(--ns-alarm); border-color: var(--ns-alarm); }
.ns-band--gut { border-color: var(--ns-gut-rand); background: var(--ns-gut-flaeche); }
.ns-band--gut .ns-band__marke { color: var(--ns-teal); border-color: var(--ns-teal); }
/* Jedes Band nennt: was passiert ist · was es bedeutet · was man jetzt tun kann (§24). */

.ns-leer { padding: 44px 20px; text-align: center; }
.ns-leer .ns-label { margin-bottom: 12px; }
.ns-leer p { max-width: 400px; margin: 0 auto 18px; font-size: 15px; line-height: 1.6; color: var(--ns-text-3); }
/* Leer-Zustand ist nie nur „Keine Daten": er sagt warum und bietet den nächsten Schritt. */


/* ── 6 ÜBERLAGERUNGEN ────────────────────────────────────────────────────── */

.ns-abdunkeln { position: fixed; inset: 0; z-index: 40; background: var(--ns-abdunkeln); animation: ns-einblenden .18s ease; }

/* Meldung (Toast) — unten rechts, 4–5 s, mit „Zurücknehmen" wenn rücknehmbar */
.ns-meldung { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 14px;
  max-width: 440px; padding: 15px 18px; border: 1px solid var(--ns-linie-feld); border-radius: 11px;
  background: var(--ns-karte); box-shadow: var(--ns-schatten-meldung); animation: ns-meldung .22s var(--ns-weich); }
.ns-meldung__marke { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; color: var(--ns-teal); background: rgba(45,212,191,.14); border: 1px solid var(--ns-teal); }
.ns-meldung--warn .ns-meldung__marke { color: var(--ns-gold); background: rgba(245,184,65,.14); border-color: var(--ns-gold); }

/* Schublade von rechts (Detail, Hilfe).
   Derselbe BUG wie bei .ns-dialog-huelle (Denis-Befund 2026-09-23, siehe
   Kommentar oben): das Steuern per hidden-Attribut (schublade.hidden=true/
   false, so in tickets-kanban.js) wird durch das eigene display:flex
   ausgehebelt -- [hidden]{display:none} ist eine UA-Regel, unser
   display:flex ist eine Autoren-Regel und gewinnt IMMER, unabhaengig vom
   hidden-Attribut. Per Playwright empirisch bestaetigt: die Tickets-
   Schublade stand die ganze Zeit sichtbar 440px breit am rechten Rand, auch
   mit hidden="". Jetzt display:none als Grundzustand, :not([hidden]) schaltet
   auf flex. */
.ns-schublade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(440px, 100vw);
  display: none; flex-direction: column; background: var(--ns-karte); border-left: 1px solid var(--ns-linie-feld);
  box-shadow: var(--ns-schatten-schublade); animation: ns-schublade .22s var(--ns-weich); }
.ns-schublade:not([hidden]) { display: flex; }
.ns-schublade__kopf { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--ns-linie); background: var(--ns-erhoeht); }
.ns-schublade__rumpf { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.ns-schublade__fuss { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--ns-linie); background: var(--ns-erhoeht); }

/* Dialog — nur für Entscheidungen mit Folgen.
   BUG behoben 2026-09-23 (Denis: "das geht nicht weg", Diagnose per Playwright
   gegen die Live-Seite): .ns-dialog-huelle setzte display:grid/position:fixed
   OHNE [open]-Bedingung. Ein <dialog> ohne open-Attribut wird vom Browser
   eigentlich per UA-Stylesheet automatisch versteckt (dialog:not([open]){
   display:none}) -- aber JEDE Autoren-Regel schlaegt eine UA-Regel, unabhaengig
   von Spezifitaet. Die Klasse hat das UA-Verstecken damit fuer JEDEN Dialog
   mit dieser Klasse ausgehebelt: er war die ganze Zeit sichtbar UND blockierte
   Klicks (display:grid + position:fixed + margin:auto vom UA-Stylesheet
   zentrierten ihn mitten im Bildschirm), voellig unabhaengig davon, ob
   showModal()/close() je aufgerufen wurde. Kein JS-Fix konnte das je beheben,
   weil das Problem nie in der Oeffnen-Logik lag. Jetzt: alle sichtbarkeits-
   wirksamen Eigenschaften nur noch unter [open]; ohne [open] bleibt die
   Klasse effektiv display:none (UA-Standard greift wieder). Betrifft/behoben
   fuer ALLE Verwendungen: slAIck, MedCare (Papierkorb/Status/Endgueltig-
   loeschen), den gemeinsamen ns-bestaetigen-dialog in app_basis.html. */
.ns-dialog-huelle[open] { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: rgba(4,6,13,.72); animation: ns-einblenden .16s ease; }
.ns-dialog { width: 100%; max-width: 480px; border: 1px solid var(--ns-gut-rand); border-radius: var(--ns-r-dialog);
  background: var(--ns-karte); overflow: hidden; animation: ns-dialog .2s var(--ns-weich); }
.ns-dialog--gefahr { border-color: var(--ns-fehl-rand); }
.ns-dialog__rumpf { padding: 22px 26px 0; }
.ns-dialog__fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 22px 26px; }
/* Esc schließt · Klick auf Abdunkelung schließt · Fokus bleibt im Dialog und kehrt danach zurück (§23). */

/* Befehlspalette (§16) — derselbe [open]-Fehler, aus demselben Grund behoben
   (aktuell ungenutzt, aber Teil des dokumentierten Baukastens/Vorschauen). */
.ns-palette-huelle[open] { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 24px 24px; background: rgba(4,6,13,.72); animation: ns-einblenden .14s ease; }
.ns-palette { width: 100%; max-width: 600px; border: 1px solid var(--ns-linie-feld); border-radius: var(--ns-r-dialog);
  background: var(--ns-karte); overflow: hidden; box-shadow: var(--ns-schatten-palette); animation: ns-palette .18s var(--ns-weich); }
.ns-palette__eingabe { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--ns-linie); }
.ns-palette__eingabe input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ns-text); font-size: 16px; }
.ns-palette__liste { max-height: min(52vh, 400px); overflow-y: auto; padding: 8px; }
.ns-palette__gruppe { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .16em; color: #4F5C78; padding: 9px 12px 6px; }
.ns-palette__treffer { display: flex; align-items: center; gap: 13px; width: 100%; min-height: var(--ns-tipp); text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--ns-r-option); background: transparent; color: var(--ns-text); cursor: pointer; }
.ns-palette__treffer.is-aktiv { background: var(--ns-aktiv); box-shadow: inset 2px 0 0 var(--ns-teal); }
/* Markiert = Maus darüber ODER Pfeiltaste. Beides setzt .is-aktiv, es gibt nur EINEN markierten Treffer. */
.ns-palette__marke { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  font-family: var(--ns-mono); font-size: 12px; color: var(--m); background: color-mix(in srgb, var(--m) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--m) 33%, transparent); }
/* Gruppen: SPRINGEN → blau · DATENSÄTZE # teal · AKTIONEN ⌘ lila */
.ns-palette__fuss { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 20px; border-top: 1px solid var(--ns-linie);
  background: var(--ns-erhoeht); font-family: var(--ns-mono); font-size: 10px; color: var(--ns-hilfe); }

.ns-taste { font-family: var(--ns-mono); font-size: 10px; border: 1px solid var(--ns-linie-knopf); border-radius: 4px; padding: 2px 6px; color: var(--ns-label); }

/* Hilfe-Zugang (§21) — in der klebenden Kopfzeile. NICHT position:fixed über Listen. */
.ns-hilfe-knopf { display: inline-flex; align-items: center; gap: 9px; min-height: var(--ns-tipp); padding: 9px 14px;
  border: 1px solid var(--ns-linie-feld); border-radius: var(--ns-r-knopf); background: var(--ns-erhoeht);
  color: var(--ns-label); font-size: 13px; cursor: pointer; white-space: nowrap; }
.ns-hilfe-knopf:hover { border-color: var(--ns-teal); color: var(--ns-text); }
.ns-hilfe-knopf[aria-expanded="true"] { border-color: var(--ns-teal); background: var(--ns-aktiv); color: var(--ns-text); }
.ns-hilfe-knopf__marke { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(45,212,191,.16); border: 1px solid var(--ns-teal); color: var(--ns-teal); font-size: 11px; font-weight: 600; }

/* Kopfzeile der Apps */
.ns-kopf { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--ns-linie); background: var(--ns-tief); }
.ns-kopf__zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px clamp(14px,2vw,26px); }
.ns-kopf__app { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--ns-aktiv); border: 1px solid var(--ns-teal); font-family: var(--ns-mono); font-size: 10px; color: var(--ns-teal); }


/* ── 7 HQ / COMMAND CENTER — eigene Palette, bewusste Ausnahme (§8) ──────── */

.hq {
  --ns-grund: #04060D; --ns-tief: #080C16; --ns-karte: #0B111F; --ns-erhoeht: #080C16;
  --ns-aktiv: #0E1626; --ns-linie: #16203A; --ns-linie-zart: #101827; --ns-linie-feld: #22304E;
  --ns-label: #7D90AB; --ns-hilfe: #3F5069; --ns-blau: #4C8DFF; --ns-gold: #F5B83D; --ns-lila: #A78BFA;
  --hq-akzent: #38D4FF;   /* Menübalken, gewählter Zeitraum — NUR im HQ */
  --hq-dienst: #37D67A;   /* „im Dienst" / „Schicht läuft" */
  --ns-verlauf: linear-gradient(100deg, #2DD4BF, #4C8DFF);
  background: var(--ns-grund);
}

/* Seitennavigation des HQ — das ist der blaue Balken links */
.hq-nav { width: 210px; flex: 0 0 210px; padding: 18px 0; display: flex; flex-direction: column; overflow-y: auto;
  border-right: 1px solid var(--ns-linie); background: var(--ns-tief); }
.hq-nav__gruppe { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .16em; color: var(--ns-hilfe); padding: 0 18px 9px; }
.hq-nav__punkt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 18px; text-align: left;
  border: 0; background: transparent; color: var(--ns-label); font-size: 13.5px; cursor: pointer;
  transition: background var(--ns-kurz), color var(--ns-kurz); }
.hq-nav__punkt:hover { background: var(--ns-aktiv); color: var(--ns-text); }               /* „leicht blau" */
.hq-nav__punkt.is-aktiv, .hq-nav__punkt[aria-current="page"] {
  background: var(--ns-aktiv); color: var(--ns-text); box-shadow: inset 2px 0 0 var(--hq-akzent);  /* blauer Balken */
}
.hq-nav__kuerzel { width: 18px; flex: 0 0 18px; font-family: var(--ns-mono); font-size: 10px; color: var(--ns-hilfe); }
.hq-nav__zahl { margin-left: auto; font-family: var(--ns-mono); font-size: 10px; border-radius: 3px; padding: 2px 6px;
  color: var(--ns-label); background: rgba(125,144,171,.12); }
.hq-nav__zahl--dringend { color: var(--ns-gold); background: rgba(245,184,61,.14); }   /* nur Freigaben */

.hq-zeitraum { padding: 8px 14px; border-radius: var(--ns-r-chip); font-size: 13px; cursor: pointer;
  background: var(--ns-karte); border: 1px solid var(--ns-linie); color: var(--ns-label); }
.hq-zeitraum:hover { border-color: var(--hq-akzent); }
.hq-zeitraum.is-gewaehlt { background: var(--ns-aktiv); border-color: var(--hq-akzent); color: var(--ns-text); }

.hq-dienst { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ns-mono); font-size: 11px; color: var(--ns-label); }
.hq-dienst::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hq-dienst); animation: ns-puls 2.4s ease-in-out infinite; }


/* ── 8 UMBRÜCHE (§22) ─────────────────────────────────────────────────────
   Unter 480 · 480–720 · 720–1080 · über 1080. Dazwischen nur dehnen. */

@media (max-width: 1080px) {
  .ns-zwei-spalten { grid-template-columns: 1fr !important; }
  .ns-klebt-rechts { position: static !important; }
}
@media (max-width: 900px) {
  .hq-rumpf { flex-direction: column; }
  .hq-nav { width: auto; flex: none; flex-direction: row; gap: 18px; overflow-x: auto; padding: 12px 0;
    border-right: 0; border-bottom: 1px solid var(--ns-linie); }
  .hq-nav__punkt.is-aktiv { box-shadow: inset 0 -2px 0 var(--hq-akzent); }   /* Balken wandert nach unten */
}
@media (max-width: 720px) {
  /* Tabellen werden Karten — nie Querscroller */
  .ns-tabelle thead { display: none; }
  .ns-tabelle, .ns-tabelle tbody, .ns-tabelle tr, .ns-tabelle td { display: block; width: 100%; box-sizing: border-box; }
  .ns-tabelle tr { margin: 0 0 10px; border: 1px solid var(--ns-linie); border-radius: var(--ns-r-karte); background: var(--ns-karte); padding: 14px 15px; }
  .ns-tabelle td { padding: 3px 0; border: 0; }
  .ns-tabelle td[data-label]::before { content: attr(data-label); display: block; font-family: var(--ns-mono);
    font-size: 10px; letter-spacing: .12em; color: var(--ns-label); margin-bottom: 3px; }
  .ns-tabelle .ns-nur-breit { display: none; }       /* höchstens vier Felder je Karte */
  .ns-option, .ns-stufe { min-height: var(--ns-zeile-mobil); }
  .ns-schublade { width: 100vw; top: auto; height: min(88vh, 720px); border-left: 0; border-top: 1px solid var(--ns-linie-feld);
    border-radius: var(--ns-r-dialog) var(--ns-r-dialog) 0 0; animation-name: ns-blatt; }   /* Blatt von unten */
  .ns-meldung { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ns-knopf--breit-mobil { width: 100%; }
  /* Kanban bleibt ein Board (Styleguide §9), keine gestapelten Karten -- schmalere
     Spalten mit Querscroll statt Tabellenregel, ein Board ist kein Querscroller-Verbot. */
  .ns-kanban { grid-template-columns: repeat(4, minmax(200px,1fr)); }
}