/* ══════════════════════════════════════════════════════════════════════════
   NEXUS SCHIEFER — das Design-System des Mitarbeiter-Portals
   Fassung 1.0 · 18.08.2026 · von Collin gewählt am 18.08.2026

   GRUNDIDEE: In diesem Haus ist jede Zahl GEMESSEN, nicht geschrieben.
   Also sagt jede Fläche, woher ihre Zahl kommt und wie alt sie ist.
   Sortiert wird nach Messwert — nicht nach Zeit, nicht nach Vorgang.

   DREI REGELN, die diese Sprache ausmachen:
     1. Flächen werden durch HELLIGKEIT getrennt, nicht durch Rahmen.
        Kein Glas, keine Verläufe, keine Schlagschatten. Matt.
     2. Jede Beschriftung, jeder Schlüssel und jeder Wert steht in
        Schreibmaschinenschrift. Nur Fließtext ist proportional.
     3. Wo eine Zahl steht, steht auch ihre Quelle und ihr Alter.

   ⚠️ DIESE DATEI IST DIE EINZIGE QUELLE. Sie wird zentral ausgeliefert
   (/nx/nexus.css) und NICHT mehr in die Apps kopiert. Der Logo-Wechsel vom
   17.08.2026 ist genau daran gescheitert: 27 Handkopien, 12 davon vergessen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN ─────────────────────────────────────────────────────────────
   Schiefer ist DUNKEL-ZUERST: der bare :root-Block ist die dunkle Fassung.
   Die helle Fassung ist der Sonderfall (Druck, öffentliche Werkzeuge).
   Alle Werte sind gemessen — die Kontrastangaben stehen dabei.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Flächen, nur durch Helligkeit getrennt */
  --nx-grund:      #10141C;   /* die Seite */
  --nx-flaeche:    #171C26;   /* Platte, Karte, Zeile */
  --nx-flaeche-2:  #1C222E;   /* dieselbe Platte unter der Maus */
  --nx-leiste:     #141922;   /* Kopfleiste, Tabellenkopf */
  --nx-schiene:    #151A24;   /* die schmale Werkzeugschiene links */
  --nx-vertieft:   #1A202B;   /* Eingabefeld, ruhender Knopf */

  /* Linien — nur wo Helligkeit allein nicht reicht */
  --nx-haar:       #232B3A;
  --nx-haar-hell:  #2A3341;
  /* Rand von Bedienelementen — braucht 3:1, nicht 1,5:1 (WCAG 1.4.11). */
  --nx-feld-rand:  #667490;   /* 3,47:1 auf --nx-vertieft */

  /* Schrift. GENAU ZWEI Grautöne, mehr nicht. */
  --nx-text:       #E4E9F2;   /* 13,9:1 auf --nx-flaeche */
  --nx-gedaempft:  #8A94A8;   /*  5,59:1 auf --nx-flaeche — NIE aufhellen! */

  /* Rollenfarben. Blau = Handlung. Petrol = Messwert. */
  --nx-blau:       #7FA8FF;   /* 6,73:1 auf --nx-flaeche */
  --nx-blau-grund: #1E2942;   /* getönte Fläche hinter Blau */
  --nx-blau-linie: #2E3E63;
  --nx-petrol:     #2CB4CE;

  /* ⚠️ Blau ist im Dunkeln eine TEXT-Farbe. Als Füllfläche trägt sie
     Weiß nur mit 2,35:1. Deshalb ein eigenes Paar für gefüllte Knöpfe: */
  --nx-fuell:      #7FA8FF;
  --nx-fuell-text: #0E1116;   /* 8,06:1 — dunkle Schrift auf hellem Blau */

  /* Zustände — bewusst getrennt von der Markenfarbe */
  --nx-gut:        #4FCF8F;   --nx-gut-balken:  #3FBF7F;  --nx-gut-grund:  #16301F;
  --nx-warnung:    #E0A93C;   --nx-warn-balken: #E0A93C;  --nx-warn-grund: #3A2E15;
  --nx-fehler:     #E88A7A;   --nx-fehl-balken: #E06B5A;  --nx-fehl-grund: #3A1E18;
  --nx-neutral:    #8A94A8;   --nx-neut-balken: #2E3849;  --nx-neut-grund: #20283A;

  /* Schrift: Mono für ALLES Beschriftende, proportional nur für Fließtext */
  --nx-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --nx-text-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Schriftleiter — dicht. Grundmaß 13 px, nicht 14. */
  --nx-s-winzig:  9px;    /* Zeitstempel unter Messwerten */
  --nx-s-klein:  10px;    /* Beschriftungen, Marken */
  --nx-s-eng:    11px;    /* Nebentext, Tabellenzellen */
  --nx-s-basis:  13px;    /* Fließtext */
  --nx-s-gross:  15px;    /* Zwischenüberschrift */
  --nx-s-wert:   24px;    /* die große Zahl */
  --nx-s-titel:  22px;    /* Seitentitel */

  /* Abstände — enge Leiter, damit viel auf einen Bildschirm passt */
  --nx-a1: 4px;  --nx-a2: 7px;  --nx-a3: 11px;
  --nx-a4: 15px; --nx-a5: 22px; --nx-a6: 30px;

  /* Radien — klein. Schiefer ist kantig, nicht rund. */
  --nx-r-klein: 4px;  --nx-r: 7px;  --nx-r-gross: 8px;

  /* Sperrung für Mono-Beschriftungen */
  --nx-sperr: .1em;

  color-scheme: dark;
}

/* Die HELLE Fassung — Sonderfall für Druck und öffentliche Werkzeuge.
   Nicht die Identität dieser Sprache, aber vollständig gepflegt.
   Wird über [data-nx-thema="hell"] am <html> gesetzt. */
:root[data-nx-thema="hell"]{
  --nx-grund:      #EEF1F6;
  --nx-flaeche:    #FFFFFF;
  --nx-flaeche-2:  #F7F9FC;
  --nx-leiste:     #F3F5FA;
  --nx-schiene:    #FFFFFF;
  --nx-vertieft:   #F0F3F8;

  --nx-haar:       #DCE1EB;
  --nx-haar-hell:  #C9D0DE;
  --nx-feld-rand:  #767E8E;   /* 4,08:1 auf Weiss, 3,52:1 auf dem Seitengrund */
  --nx-vertieft:   #FFFFFF;   /* war #F0F3F8 = 1,02:1 gegen die Seite: unsichtbar */

  --nx-text:       #131720;   /* 17,3:1 auf Weiß */
  --nx-gedaempft:  #575F70;   /*  6,2:1 auf Weiß — die gemessene Untergrenze */

  --nx-blau:       #2856CE;   /*  5,6:1 auf --nx-blau-grund */
  --nx-blau-grund: #E8EEFF;
  --nx-blau-linie: #BACDF7;
  --nx-petrol:     #0A6274;

  --nx-fuell:      #2F63E8;   /* trägt Weiß mit 5,16:1 */
  --nx-fuell-text: #FFFFFF;

  --nx-gut:        #16603F;   --nx-gut-balken:  #1C7A50;  --nx-gut-grund:  #E2F2E9;
  --nx-warnung:    #8A5A0C;   --nx-warn-balken: #D99126;  --nx-warn-grund: #FBF0DC;
  --nx-fehler:     #A8302A;   --nx-fehl-balken: #CC4A3E;  --nx-fehl-grund: #FBE9E7;
  --nx-neutral:    #575F70;   --nx-neut-balken: #C9D0DE;  --nx-neut-grund: #E9EDF4;

  color-scheme: light;
}

/* ── 2. GRUNDLAGE ────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--nx-grund);
  color: var(--nx-text);
  font-family: var(--nx-text-schrift);
  font-size: var(--nx-s-basis);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Tastaturbedienung ist Pflicht, nicht Kür */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--nx-blau);
  outline-offset: 2px;
  border-radius: var(--nx-r-klein);
}

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

/* ── 3. DAS ERKENNUNGSZEICHEN: DIE MESSLEISTE ────────────────────────────
   Jede Fläche, die eine Zahl zeigt, trägt oben einen 2-px-Streifen in der
   Zustandsfarbe und darunter einen Zeitstempel mit Quelle. Wer eine Zahl
   zeigt, ohne zu sagen woher sie kommt, benutzt diese Sprache falsch.
   ───────────────────────────────────────────────────────────────────────── */
.nx-mess{
  position: relative;
  background: var(--nx-flaeche);
  padding: var(--nx-a4) var(--nx-a4) var(--nx-a3);
  /* ⚠️ Eine Messflaeche kann ein <a> sein. Ohne diese zwei Zeilen erscheint
     sie im Standard-Linkblau des Browsers und komplett unterstrichen —
     direkt neben Kacheln ohne Link, die richtig aussehen. Am 23.08.2026
     von zwei Pruefern unabhaengig belegt. */
  color: inherit;
  text-decoration: none;
}
/* ⚠️ KEIN overflow:hidden hier. Es schnitt den Fokusrahmen zu 100 % weg —
   mit Tastatur war nicht erkennbar, wo man steht (WCAG 2.4.7). Statt zu
   clippen zeichnen wir den Rahmen nach INNEN. */
.nx-mess:focus-visible{ outline: 2px solid var(--nx-blau); outline-offset: -3px; }
a.nx-mess:hover{ background: var(--nx-flaeche-2); }
.nx-mess::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--nx-neut-balken);
}
.nx-mess--gut::before    { background: var(--nx-gut-balken); }
.nx-mess--warnung::before{ background: var(--nx-warn-balken); }
.nx-mess--fehler::before { background: var(--nx-fehl-balken); }

/* Der Schlüssel über dem Wert */
.nx-schluessel{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-klein);
  letter-spacing: var(--nx-sperr);
  text-transform: uppercase;
  color: var(--nx-gedaempft);
  margin: 0 0 var(--nx-a2);
}

/* Der Wert selbst */
.nx-wert{
  margin: 0;
  font-size: var(--nx-s-wert);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--nx-a2);
}
.nx-wert .nx-neben{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-eng);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--nx-gedaempft);
}

/* Herkunft und Alter — das Herzstück der Sprache */
.nx-herkunft{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-winzig);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-gedaempft);
  margin: var(--nx-a2) 0 0;
}

/* Mehrere Messflächen als fugenloses Raster: die Haarlinie ist die Lücke */
.nx-messraster{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--nx-haar);
  border: 1px solid var(--nx-haar);
  border-radius: var(--nx-r-gross);
  overflow: hidden;
}

/* ── 4. ABSCHNITTE ───────────────────────────────────────────────────────── */
.nx-abschnitt{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-klein);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--nx-gedaempft);
  margin: var(--nx-a6) 0 var(--nx-a2);
  display: flex; align-items: center; gap: var(--nx-a3);
}
.nx-abschnitt::after{
  content: ""; flex: 1; height: 1px; background: var(--nx-haar);
}

.nx-titel{
  font-size: var(--nx-s-titel);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 var(--nx-a1);
}
.nx-untertitel{
  color: var(--nx-gedaempft);
  font-size: var(--nx-s-eng);
  margin: 0 0 var(--nx-a5);
}

/* ── 5. LISTE — die Arbeitsform dieser Sprache ───────────────────────────── */
.nx-liste{
  border: 1px solid var(--nx-haar);
  border-radius: var(--nx-r-gross);
  overflow: hidden;
}
.nx-zeile{
  display: grid;
  grid-template-columns: 76px 1fr auto auto;
  gap: var(--nx-a4);
  align-items: center;
  padding: var(--nx-a3) var(--nx-a4);
  background: var(--nx-flaeche);
  border-bottom: 1px solid var(--nx-haar);
  text-decoration: none;
  color: inherit;
}
.nx-zeile:last-child{ border-bottom: 0; }
.nx-zeile:hover{ background: var(--nx-flaeche-2); }
/* Rahmen nach innen, sonst frisst ihn das overflow:hidden der Liste. */
.nx-zeile:focus-visible, .nx-bereich:focus-visible{ outline-offset: -3px; }
.nx-zeile-haupt b{
  display: block;
  font-size: var(--nx-s-eng);
  font-weight: 560;
  color: var(--nx-text);
}
.nx-zeile-haupt small{
  font-size: var(--nx-s-eng);
  color: var(--nx-gedaempft);
}
.nx-zeit{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-eng);
  color: var(--nx-gedaempft);
  font-variant-numeric: tabular-nums;
}
.nx-zeile--faellig .nx-zeit{ color: var(--nx-warnung); }
.nx-pfeil{ color: var(--nx-gedaempft); font-size: var(--nx-s-eng); }

@media (max-width: 640px){
  .nx-zeile{ grid-template-columns: 1fr auto; row-gap: var(--nx-a2); }
  .nx-zeit{ grid-column: 1 / -1; }
  .nx-pfeil{ display: none; }
}

/* ── 6. MARKEN (Zustände in Wortform) ────────────────────────────────────── */
.nx-zustand{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-winzig);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--nx-r-klein);
  white-space: nowrap;
  background: var(--nx-neut-grund);
  color: var(--nx-neutral);
}
.nx-zustand--gut     { background: var(--nx-gut-grund);  color: var(--nx-gut); }
.nx-zustand--warnung { background: var(--nx-warn-grund); color: var(--nx-warnung); }
.nx-zustand--fehler  { background: var(--nx-fehl-grund); color: var(--nx-fehler); }
.nx-zustand--info    { background: var(--nx-blau-grund); color: var(--nx-blau); }

/* ── 7. TABELLE — dicht, Zahlen rechts, Kopf in Mono ─────────────────────── */
.nx-tabelle{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-s-eng);
  border: 1px solid var(--nx-haar);
  border-radius: var(--nx-r-gross);
  overflow: hidden;
}
.nx-tabelle th{
  text-align: left;
  padding: var(--nx-a2) var(--nx-a4);
  background: var(--nx-leiste);
  border-bottom: 1px solid var(--nx-haar);
  font-family: var(--nx-mono);
  font-size: var(--nx-s-winzig);
  letter-spacing: var(--nx-sperr);
  text-transform: uppercase;
  color: var(--nx-gedaempft);
  font-weight: 600;
  white-space: nowrap;
}
.nx-tabelle td{
  padding: var(--nx-a2) var(--nx-a4);
  background: var(--nx-flaeche);
  border-bottom: 1px solid var(--nx-haar);
  color: var(--nx-gedaempft);
}
.nx-tabelle tr:last-child td{ border-bottom: 0; }
.nx-tabelle tbody tr:hover td{ background: var(--nx-flaeche-2); }
.nx-tabelle td b{
  color: var(--nx-text);
  font-weight: 560;
  font-size: var(--nx-s-eng);
}
.nx-tabelle .nx-zahl{
  text-align: right;
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  color: var(--nx-text);
}
.nx-tabelle .nx-still{
  font-family: var(--nx-mono);
  color: var(--nx-gedaempft);
}
/* Breite Tabellen rollen in SICH, nie die ganze Seite */
.nx-tabelle-rahmen{ overflow-x: auto; }

/* Ein Balken als Größenvergleich in der Zelle */
.nx-balken{
  display: inline-block;
  height: 5px;
  border-radius: 3px;
  background: var(--nx-blau);
  vertical-align: middle;
  min-width: 3px;
}

/* ── 8. KNÖPFE UND FELDER ────────────────────────────────────────────────── */
.nx-knopf{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-klein);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--nx-a2) var(--nx-a3);
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-blau-linie);
  background: var(--nx-blau-grund);
  color: var(--nx-blau);
  cursor: pointer;
  min-height: 30px;
}
.nx-knopf:hover{ border-color: var(--nx-blau); }
.nx-knopf--voll{
  background: var(--nx-fuell);
  color: var(--nx-fuell-text);
  border-color: var(--nx-fuell);
}
.nx-knopf--stumm{
  background: var(--nx-vertieft);
  border-color: var(--nx-haar-hell);
  color: var(--nx-gedaempft);
}

.nx-feld{
  background: var(--nx-vertieft);
  border: 1px solid var(--nx-feld-rand);
  border-radius: var(--nx-r);
  padding: var(--nx-a2) var(--nx-a3);
  font-family: var(--nx-mono);
  /* ⚠️ 16 px, sonst zoomt iOS beim Antippen in das Feld hinein.
     Die Gesprächskarte macht das richtig — hier wird es zur Regel. */
  font-size: 16px;
  color: var(--nx-text);
  min-height: 34px;
  width: 100%;
}
.nx-feld::placeholder{ color: var(--nx-gedaempft); }
@media (min-width: 768px){
  /* Am Rechner darf es wieder dicht werden — dort gibt es kein Zoom-Problem. */
  .nx-feld{ font-size: var(--nx-s-eng); }
}

/* ── 9. GERÜST: SCHIENE LINKS, LEISTE OBEN ───────────────────────────────── */
.nx-geruest{
  display: grid;
  grid-template-columns: 64px 1fr;
  min-height: 100vh;
}
.nx-schiene-nav{
  background: var(--nx-schiene);
  border-right: 1px solid var(--nx-haar);
  padding: var(--nx-a4) 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.nx-schiene-knopf{
  width: 40px; height: 36px;
  border-radius: var(--nx-r);
  display: grid; place-items: center;
  color: var(--nx-gedaempft);
  font-size: var(--nx-s-eng);
  text-decoration: none;
  position: relative;
}
.nx-schiene-knopf:hover{ background: var(--nx-flaeche-2); color: var(--nx-text); }
.nx-schiene-knopf[aria-current]{ background: var(--nx-blau-grund); color: var(--nx-blau); }
.nx-schiene-knopf[aria-current]::before{
  content: "";
  position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 2px; border-radius: 2px; background: var(--nx-blau);
}
/* Ein Punkt = hier wartet etwas */
.nx-punkt{
  position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nx-warnung);
}

.nx-kopfleiste{
  display: flex; align-items: center; gap: var(--nx-a4);
  padding: var(--nx-a3) var(--nx-a5);
  background: var(--nx-leiste);
  border-bottom: 1px solid var(--nx-haar);
}
.nx-pfad{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-eng);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-gedaempft);
}
.nx-pfad b{ color: var(--nx-text); font-weight: 600; }

/* Der Messstempel der ganzen Seite */
.nx-stempel{
  margin-left: auto;
  font-family: var(--nx-mono);
  font-size: var(--nx-s-klein);
  letter-spacing: .05em;
  color: var(--nx-gedaempft);
  display: flex; align-items: center; gap: var(--nx-a2);
}
.nx-stempel::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nx-gut-balken);
}
.nx-stempel--alt::before{ background: var(--nx-warn-balken); }
.nx-stempel--tot::before { background: var(--nx-fehl-balken); }

.nx-raum{ padding: var(--nx-a5); }

@media (max-width: 640px){
  .nx-geruest{ grid-template-columns: 1fr; }
  .nx-schiene-nav{
    flex-direction: row; justify-content: flex-start;
    border-right: 0; border-bottom: 1px solid var(--nx-haar);
    padding: var(--nx-a2) var(--nx-a3);
    overflow-x: auto;
  }
  .nx-schiene-knopf[aria-current]::before{
    left: 9px; right: 9px; top: auto; bottom: -8px;
    width: auto; height: 2px;
  }
  .nx-kopfleiste{ flex-wrap: wrap; padding: var(--nx-a3); }
  .nx-stempel{ margin-left: 0; width: 100%; }
  .nx-raum{ padding: var(--nx-a4) var(--nx-a3); }
}

/* ── 10. DIE MARKE ───────────────────────────────────────────────────────
   Logo-Fassung C „Aufgerichtet", verbindlich seit 17.08.2026.
   Als Data-URI, damit es keinen zweiten Netzabruf braucht — und damit ein
   Wechsel WIRKLICH nur an einer Stelle passiert.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --nx-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M36.69 26.08A14 14 0 1 1 25.22 18.05" stroke="%232CB4CE" stroke-width="8.5" stroke-linecap="round"/><path d="M51.47 40.03A14 14 0 0 1 38.78 45.95" stroke="%237FA8FF" stroke-width="8.5" stroke-linecap="round"/><path d="M27.31 37.92A14 14 0 0 1 51.47 23.97" stroke="%237FA8FF" stroke-width="8.5" stroke-linecap="round"/></svg>');
}
:root[data-nx-thema="hell"]{
  --nx-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M36.69 26.08A14 14 0 1 1 25.22 18.05" stroke="%230E93B0" stroke-width="8.5" stroke-linecap="round"/><path d="M51.47 40.03A14 14 0 0 1 38.78 45.95" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/><path d="M27.31 37.92A14 14 0 0 1 51.47 23.97" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/></svg>');
}
.nx-logo{
  width: 22px; height: 22px; flex: none;
  background: var(--nx-logo) center / contain no-repeat;
}
.nx-logo--gross{ width: 32px; height: 32px; }

/* ── 11. KÜRZEL (die zweibuchstabigen Bereichsmarken) ────────────────────── */
.nx-kuerzel{
  font-family: var(--nx-mono);
  font-size: var(--nx-s-winzig);
  letter-spacing: var(--nx-sperr);
  color: var(--nx-gedaempft);
  font-style: normal;
  display: block;
  margin-bottom: var(--nx-a1);
}

/* ── 12. BEREICHSKACHELN ─────────────────────────────────────────────────── */
.nx-bereiche{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1px;
  background: var(--nx-haar);
  border: 1px solid var(--nx-haar);
  border-radius: var(--nx-r-gross);
  overflow: hidden;
}
.nx-bereich{
  background: var(--nx-flaeche);
  padding: var(--nx-a3) var(--nx-a4);
  text-decoration: none;
  display: block;
  min-height: 44px;   /* Trefferfläche für Finger */
}
.nx-bereich:hover{ background: var(--nx-flaeche-2); }
.nx-bereich b{
  font-size: var(--nx-s-eng);
  font-weight: 560;
  color: var(--nx-text);
  display: block;
}
.nx-bereich s{
  text-decoration: none;
  font-family: var(--nx-mono);
  font-size: var(--nx-s-klein);
  color: var(--nx-gedaempft);
  display: block;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── 13. LEERZUSTAND — eine Einladung, keine Entschuldigung ──────────────── */
.nx-leer{
  border: 1px dashed var(--nx-haar-hell);
  border-radius: var(--nx-r-gross);
  padding: var(--nx-a6) var(--nx-a5);
  text-align: center;
  color: var(--nx-gedaempft);
}
.nx-leer b{
  display: block;
  color: var(--nx-text);
  font-size: var(--nx-s-gross);
  font-weight: 560;
  margin-bottom: var(--nx-a2);
}

/* ── 14. DRUCK — dunkle Flächen kosten sonst eine Tonerpatrone ───────────── */
@media print{
  :root{
    --nx-grund: #FFFFFF; --nx-flaeche: #FFFFFF; --nx-flaeche-2: #FFFFFF;
    --nx-leiste: #F2F4F8; --nx-schiene: #FFFFFF; --nx-vertieft: #FFFFFF;
    --nx-text: #000000; --nx-gedaempft: #444B58;
    --nx-haar: #B8BFCC; --nx-haar-hell: #98A0AE;
    --nx-blau: #1B44B0; --nx-petrol: #075E70;
  }
  body{ background: #FFFFFF; }
  .nx-schiene-nav, .nx-knopf{ display: none; }
  .nx-mess, .nx-zeile, .nx-tabelle td, .nx-tabelle th{
    background: #FFFFFF !important;
  }
  .nx-mess::before{ height: 3px; }   /* der Streifen muss auch in Grau tragen */
  /* Gefuellte Marken werden auf Papier zu Umriss statt Farbflaeche —
     sonst kosten sie Toner und sind mit 1,72:1 unlesbar. */
  .nx-zustand, .nx-marke, .nx-badge, .p-w-tun{
    background: #FFFFFF !important; color: #000000 !important;
    border: 1px solid #666666 !important;
  }
  .nx-geruest{ grid-template-columns: 1fr; }
  a{ text-decoration: underline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. ÜBERSETZUNGSSCHICHT für das alte nexus-design.css (Stand 20.07.2026)
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ WARUM ES DIESEN BLOCK GIBT — am 18.08.2026 gemessen:
   Die zwölf Apps benutzen 59–78 verschiedene `--nx-*`-Variablen des ALTEN
   Systems. Ein blinder Austausch der Datei hätte ALLE zwölf zerlegt.
   Erfreulich: sie sind fast vollständig variablengesteuert — feste Farben im
   App-CSS gibt es nur bei Radar (9), Akquise (4) und Meetings (1).
   Deshalb genügt es, die alten Namen hier auf Schiefer-Werte umzuhängen.

   Das ALTE System war HELL-zuerst (`html[data-thema="dunkel"]` schaltete um),
   Schiefer ist DUNKEL-zuerst. Die Umhängung dreht damit bewusst die
   Grundstimmung aller Apps — genau das ist der Auftrag.

   ⚠️ DREI NAMEN BEDEUTEN IN BEIDEN SYSTEMEN VERSCHIEDENES. Die alte
   Bedeutung gewinnt, weil zwölf Apps daran hängen; Schiefer ist ausgewichen:
       .nx-marke   = das LOGO            (Schiefer nennt seinen Chip .nx-zustand)
       .nx-raster  = Kartenraster        (Schiefer: .nx-messraster)
       .nx-inhalt  = zentrierter Inhalt  (Schiefer: .nx-raum)

   Dieser Block darf schrumpfen, sobald eine App auf Schiefer-Klassen
   umgebaut ist — aber NIE gelöscht werden, solange noch eine App ihn braucht.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* — Marke — */
  --nx-blau-hell:   #7FA8FF;
  --nx-blau-tief:   #2856CE;
  --nx-petrol-hell: #2CB4CE;
  --nx-tinte:       var(--nx-text);
  --nx-hell:        var(--nx-text);
  --nx-kachel-1:    var(--nx-flaeche);
  --nx-kachel-2:    var(--nx-grund);

  /* — Signalfarben: auf die Zustandsfarben von Schiefer — */
  --nx-gruen: var(--nx-gut);
  --nx-gelb:  var(--nx-warnung);
  --nx-rot:   var(--nx-fehler);

  /* — Akzent — */
  --nx-akzent:       var(--nx-blau);
  --nx-akzent-2:     var(--nx-petrol);
  --nx-akzent-weich: var(--nx-blau-grund);

  /* — Flächen — */
  --nx-grund-2:    var(--nx-leiste);
  --nx-karte:      var(--nx-flaeche);
  --nx-einsatz:    var(--nx-vertieft);
  --nx-linie:      var(--nx-haar-hell);
  --nx-linie-fein: var(--nx-haar);
  --nx-text-2:     var(--nx-gedaempft);
  --nx-text-3:     var(--nx-gedaempft);   /* KEIN dritter Grauton — Schiefer hat zwei */

  /* — Glas gibt es in Schiefer nicht. Aus Glas wird eine matte Fläche. — */
  --nx-glas:       var(--nx-leiste);
  --nx-glas-stark: var(--nx-flaeche);
  --nx-glas-rand:  var(--nx-haar);
  --nx-glas-blur:  none;

  /* — Typografie — */
  --nx-schrift: var(--nx-text-schrift);
  --nx-t-mini:  var(--nx-s-winzig);
  --nx-t-klein: var(--nx-s-klein);
  --nx-t-body:  var(--nx-s-basis);
  --nx-t-lead:  var(--nx-s-gross);
  --nx-t-h3:    16px;
  --nx-t-h2:    18px;
  --nx-t-h1:    var(--nx-s-titel);
  --nx-t-hero:  clamp(26px, 4vw, 40px);

  --nx-gew-normal: 400;  --nx-gew-mittel: 500;
  --nx-gew-halb:   600;  --nx-gew-fett:   700;
  --nx-zeile: 1.45;      --nx-zeile-eng: 1.2;
  --nx-sperr-titel: -.015em;
  --nx-sperr-label: var(--nx-sperr);

  /* — Form: Schiefer ist kantig. Aus 20 px werden 8. — */
  --nx-radius:       var(--nx-r-gross);
  --nx-radius-klein: var(--nx-r);
  --nx-radius-mini:  var(--nx-r-klein);
  --nx-radius-pille: 980px;

  --nx-abstand-1: var(--nx-a1);  --nx-abstand-2: var(--nx-a2);
  --nx-abstand-3: var(--nx-a3);  --nx-abstand-4: var(--nx-a4);
  --nx-abstand-5: var(--nx-a5);  --nx-abstand-6: var(--nx-a6);
  --nx-abstand-7: 44px;
  --nx-breite: 1180px;  --nx-breite-schmal: 760px;

  /* — Schatten gibt es in Schiefer nicht. Helligkeit trennt, nicht Schatten. — */
  --nx-schatten-1: none;  --nx-schatten-2: none;
  --nx-schatten-3: none;  --nx-schatten-akzent: none;

  --nx-ease: cubic-bezier(.22,.61,.36,1);
  --nx-schnell: .12s var(--nx-ease);
  --nx-normal:  .18s var(--nx-ease);
}

/* Das alte System schaltete Dunkel über html[data-thema="dunkel"].
   Schiefer IST dunkel — die Regel darf also nichts mehr tun. Und
   html[data-thema="hell"] muss auf die helle Schiefer-Fassung führen,
   sonst bekämen Apps helle Flächen mit heller Schrift. */
html[data-thema="hell"]{
  --nx-grund:#EEF1F6; --nx-flaeche:#FFFFFF; --nx-flaeche-2:#F7F9FC;
  --nx-leiste:#F3F5FA; --nx-schiene:#FFFFFF; --nx-vertieft:#F0F3F8;
  --nx-haar:#DCE1EB; --nx-haar-hell:#C9D0DE;
  --nx-text:#131720; --nx-gedaempft:#575F70;
  --nx-blau:#2856CE; --nx-blau-grund:#E8EEFF; --nx-blau-linie:#BACDF7;
  --nx-petrol:#0A6274; --nx-fuell:#2F63E8; --nx-fuell-text:#FFFFFF;
  --nx-gut:#16603F; --nx-gut-balken:#1C7A50; --nx-gut-grund:#E2F2E9;
  --nx-warnung:#8A5A0C; --nx-warn-balken:#D99126; --nx-warn-grund:#FBF0DC;
  --nx-fehler:#A8302A; --nx-fehl-balken:#CC4A3E; --nx-fehl-grund:#FBE9E7;
  --nx-neutral:#575F70; --nx-neut-balken:#C9D0DE; --nx-neut-grund:#E9EDF4;
  --nx-blau-hell:#2856CE; --nx-blau-tief:#1B44B0; --nx-petrol-hell:#0A6274;
  /* ⚠️ Ohne diese Zeile trug das Logo im hellen Thema die dunklen Farben —
     dieselbe Einstellung sah je nach Weg verschieden aus. */
  --nx-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M36.69 26.08A14 14 0 1 1 25.22 18.05" stroke="%230E93B0" stroke-width="8.5" stroke-linecap="round"/><path d="M51.47 40.03A14 14 0 0 1 38.78 45.95" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/><path d="M27.31 37.92A14 14 0 0 1 51.47 23.97" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/></svg>');
  color-scheme: light;
}

/* ── Die alten Bausteine, in Schiefer gekleidet ──────────────────────────── */

/* ⚠️ .nx-marke ist das LOGO. Hier steckte in allen zwölf Apps noch die
   Fassung von Mitte Juli. Diese eine Regel tauscht es überall auf Fassung C. */
.nx-marke{
  display: inline-block; width: 26px; height: 26px; flex: none;
  background: var(--nx-logo) center / contain no-repeat;
}
.nx-marke.gross{ width: 40px; height: 40px; }
.nx-marke.kachel{ width: 32px; height: 32px; }

.nx-karte{
  background: var(--nx-flaeche);
  border: 1px solid var(--nx-haar);
  border-radius: var(--nx-r-gross);
  padding: var(--nx-a4);
}
.nx-karte.glas{ background: var(--nx-flaeche); backdrop-filter: none; }
.nx-karte-titel{
  font-family: var(--nx-mono); font-size: var(--nx-s-klein);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--nx-sperr); color: var(--nx-gedaempft);
  margin: 0 0 var(--nx-a3);
}
.nx-raster{
  display: grid; gap: var(--nx-a3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.nx-inhalt{
  max-width: var(--nx-breite); margin: 0 auto;
  padding: var(--nx-a5) var(--nx-a4);
}
.nx-kopf{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--nx-a3);
  padding: var(--nx-a3) var(--nx-a5);
  background: var(--nx-leiste);
  border-bottom: 1px solid var(--nx-haar);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nx-badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--nx-r-klein);
  font-family: var(--nx-mono); font-size: var(--nx-s-winzig);
  letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  background: var(--nx-blau-grund); color: var(--nx-blau);
}
.nx-badge.erfolg { background: var(--nx-gut-grund);  color: var(--nx-gut); }
.nx-badge.warnung{ background: var(--nx-warn-grund); color: var(--nx-warnung); }
.nx-badge.fehler { background: var(--nx-fehl-grund); color: var(--nx-fehler); }
.nx-label{
  display: block; font-family: var(--nx-mono);
  font-size: var(--nx-s-klein); letter-spacing: var(--nx-sperr);
  text-transform: uppercase; color: var(--nx-gedaempft);
  margin: var(--nx-a4) 0 var(--nx-a1);
}
.nx-wortmarke{
  font-weight: 600; letter-spacing: -.01em; font-size: var(--nx-s-gross);
}
.nx-wortmarke b{ color: var(--nx-blau); font-weight: 600; }

/* Formularfelder, die das alte Blatt global gestylt hat */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], select, textarea{
  background: var(--nx-vertieft);
  color: var(--nx-text);
  border: 1px solid var(--nx-feld-rand);
  border-radius: var(--nx-r);
  padding: var(--nx-a2) var(--nx-a3);
  font-size: 16px;              /* iOS zoomt sonst beim Antippen hinein */
  font-family: var(--nx-mono);
  width: 100%;
}
@media (min-width: 768px){
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=search], input[type=date], select, textarea{ font-size: var(--nx-s-eng); }
}

/* ── 16. DIE „AUTO"-STUFE — Schiefer folgt derselben Regel wie die Apps ───
   ⚠️ Am 18.08.2026 live am Kompass gefunden: Die Apps haben einen eigenen
   Themenschalter mit DREI Stufen (hell / dunkel / auto, `app.js`). In der
   Voreinstellung „auto" ENTFERNT das Skript das Attribut wieder, damit die
   Systemeinstellung entscheidet. Ein `data-thema="dunkel"` in der Vorlage
   wird dadurch im Browser sofort wieder weggenommen — es ist der falsche Hebel.

   Also folgt Schiefer derselben Regel:
       data-thema="hell"    → hell
       data-thema="dunkel"  → dunkel
       kein Attribut        → die Systemeinstellung entscheidet
   Damit ist Schiefer ein echter Ersatz und nimmt niemandem den Schalter weg.
   Für die neuen Portal-Seiten wird `data-thema="dunkel"` ausdrücklich gesetzt.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light){
  :root:not([data-thema="dunkel"]):not([data-nx-thema="dunkel"]){
    --nx-grund:#EEF1F6; --nx-flaeche:#FFFFFF; --nx-flaeche-2:#F7F9FC;
    --nx-leiste:#F3F5FA; --nx-schiene:#FFFFFF; --nx-vertieft:#F0F3F8;
    --nx-haar:#DCE1EB; --nx-haar-hell:#C9D0DE;
    --nx-text:#131720; --nx-gedaempft:#575F70;
    --nx-blau:#2856CE; --nx-blau-grund:#E8EEFF; --nx-blau-linie:#BACDF7;
    --nx-petrol:#0A6274; --nx-fuell:#2F63E8; --nx-fuell-text:#FFFFFF;
    --nx-gut:#16603F; --nx-gut-balken:#1C7A50; --nx-gut-grund:#E2F2E9;
    --nx-warnung:#8A5A0C; --nx-warn-balken:#D99126; --nx-warn-grund:#FBF0DC;
    --nx-fehler:#A8302A; --nx-fehl-balken:#CC4A3E; --nx-fehl-grund:#FBE9E7;
    --nx-neutral:#575F70; --nx-neut-balken:#C9D0DE; --nx-neut-grund:#E9EDF4;
    --nx-blau-hell:#2856CE; --nx-blau-tief:#1B44B0; --nx-petrol-hell:#0A6274;
    --nx-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M36.69 26.08A14 14 0 1 1 25.22 18.05" stroke="%230E93B0" stroke-width="8.5" stroke-linecap="round"/><path d="M51.47 40.03A14 14 0 0 1 38.78 45.95" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/><path d="M27.31 37.92A14 14 0 0 1 51.47 23.97" stroke="%233F7BFF" stroke-width="8.5" stroke-linecap="round"/></svg>');
    color-scheme: light;
  }
}

/* Und umgekehrt: wer ausdruecklich "dunkel" waehlt, bekommt Dunkel —
   auch wenn das System auf hell steht. */
:root[data-thema="dunkel"]{ color-scheme: dark; }