/* ══════════════════════════════════════════════════════════════════
   ISO HUB · BRÜCKE v5 → v7
   Übersetzt die alten CleanHub-Variablen auf die v7-Design-Tokens.
   Dadurch erscheint jede bestehende Seite sofort im v7-Erscheinungs-
   bild (Navy/Türkis, Systemschrift, flache Schatten) – ohne dass
   eine einzige Seite angefasst werden muss.

   Ladereihenfolge: tokens.css → app.css → iso.css → v7.css → DIESE DATEI
   (Die Brücke muss zuletzt kommen, damit ihre :root-Werte gewinnen.)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Marke: Blau wird Türkis */
  --brand:       var(--teal-500);
  --brand-dark:  var(--teal-600);
  --brand-light: var(--teal-50);
  --brand-50:    var(--teal-50);
  --brand-100:   var(--teal-100);

  /* Text: Ink wird Navy (semantisch, damit der Dunkelmodus greift) */
  --ink:   var(--text-stark);
  --ink-2: var(--text-normal);
  --ink-3: var(--text-leise);
  --ink-4: var(--text-schwach);

  /* Flächen */
  --surface:   var(--bg-app);
  --surface-2: var(--bg-vertieft);
  --border:    var(--rand);
  --white:     var(--bg-flaeche);
  --sidebar:   var(--bg-flaeche);
  --sidebar-2: var(--bg-vertieft);
  --sidebar-3: var(--teal-50);

  /* Status auf die fünf v7-Farben */
  --success:    var(--gruen);
  --success-bg: var(--gruen-bg);
  --warning:    var(--orange);
  --warning-bg: var(--orange-bg);
  --danger:     var(--rot);
  --danger-bg:  var(--rot-bg);
  --info:       var(--blau);
  --info-bg:    var(--blau-bg);

  /* Radien und Schatten: v7 ist runder und flacher */
  --radius-sm:  var(--r-klein);
  --radius:     var(--r-klein);
  --radius-lg:  var(--r-karte);
  --radius-xl:  var(--r-gross);
  --radius-2xl: var(--r-modal);

  --shadow-xs:   var(--schatten-1);
  --shadow-sm:   var(--schatten-1);
  --shadow-card: var(--schatten-1);
  --shadow-md:   var(--schatten-3);
  --shadow-lg:   var(--schatten-4);
}

[data-thema="dunkel"] {
  --sidebar-3:   rgba(15, 165, 146, .14);
  --brand-light: rgba(15, 165, 146, .12);
  --brand-50:    rgba(15, 165, 146, .12);
  --brand-100:   rgba(15, 165, 146, .28);
}

/* ── Schrift: Systemschrift statt Inter-Webfont ───────────────── */
body {
  font-family: var(--schrift);
  background: var(--bg-app);
  color: var(--text-normal);
}

/* ── Feinschliff auf bestehenden Klassen ──────────────────────── */

/* Aktiver Navigationseintrag: türkiser Balken links wie in v7 */
.sidebar .nav-item.active {
  background: var(--sidebar-3);
  color: var(--text-aktion);
  box-shadow: inset 3px 0 0 var(--teal-500);
}

/* Primärknopf ohne blauen Schein */
.btn-primary { box-shadow: var(--schatten-1); }
.btn-primary:hover { box-shadow: var(--schatten-2); }

/* Tabellen nach v7-Regel: keine Zebrastreifen, keine Vertikallinien */
table tr:nth-child(even) td { background: transparent; }
th { text-transform: uppercase; letter-spacing: var(--track-weit); font-size: var(--t-11); color: var(--text-schwach); }

/* Fokus sichtbar, überall */
:focus-visible { outline: 2px solid var(--rand-fokus); outline-offset: 2px; }

/* ── Dunkelmodus-Nacharbeit für Altseiten ─────────────────────── */
[data-thema="dunkel"] img.schaubild,
[data-thema="dunkel"] .schaubild svg { background: #fff; border-radius: var(--r-klein); }

[data-thema="dunkel"] .badge-green  { background: var(--gruen-bg);  color: var(--gruen); }
[data-thema="dunkel"] .badge-amber  { background: var(--gelb-bg);   color: var(--gelb); }
[data-thema="dunkel"] .badge-red    { background: var(--rot-bg);    color: var(--rot); }
[data-thema="dunkel"] .badge-blue   { background: var(--blau-bg);   color: var(--blau); }
[data-thema="dunkel"] .badge-grey   { background: var(--bg-vertieft); color: var(--text-leise); }
[data-thema="dunkel"] .badge-purple { background: var(--bg-vertieft); color: var(--text-leise); }

/* Sanfter Übergang beim Umschalten */
body, .sidebar, .topbar, .card {
  transition: background var(--zeit-mittel) var(--kurve),
              color var(--zeit-mittel) var(--kurve),
              border-color var(--zeit-mittel) var(--kurve);
}
@media (prefers-reduced-motion: reduce) {
  body, .sidebar, .topbar, .card { transition: none; }
}