/* ============================================================
   BWH Cockpit — gemeinsame Design-Tokens (einzige Quelle der Wahrheit)
   Wird von allen Apps per <link rel="stylesheet" href="/tokens.css">
   eingebunden. Eigene :root-Werte in den Apps entfallen; abweichende
   Namen nur als Alias (z. B. --r: var(--radius-sm)).
   ============================================================ */
:root {
  /* Flächen */
  --bg: #eef1f7;
  --bg-soft: #f6f8fc;
  --card: #ffffff;
  /* Text */
  --ink: #0f1b30;          /* Überschriften / Navy (Logo) */
  --text: #344054;         /* Fließtext */
  --muted: #7a869a;
  /* Linien */
  --line: #e6eaf1;
  --line-soft: #eef1f6;
  --line-strong: #d7deea;
  /* Marke */
  --brand: #1f4fd1;        /* Primär-Blau */
  --brand-2: #3b6ef0;      /* Verlauf-Ende */
  --brand-ink: #112248;    /* Navy für Marke */
  --brand-soft: rgba(31,79,209,.10);
  /* Status */
  --green: #167a52;
  --green-soft: #e3f5ec;
  --red: #c0341d;
  --red-soft: #fbe8e4;
  --amber: #a76a12;
  --amber-soft: #fcf1de;
  --violet: #6941c6;
  --violet-soft: #f0ebfb;

  /* Schrift */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-size: 14px;       /* Grundschrift in allen Apps (früher Plattform 15px, Apps 14px) */
  --line-height: 1.5;
  /* Schriftgrößen — nur diese Stufen verwenden (keine eigenen px-Werte in den Apps) */
  --fs-2xs: 11px;          /* Kleinst: Etiketten in Grafiken, Hochzahlen */
  --fs-xs: 11.5px;         /* Tabellenkopf, Abschnitts-Etiketten (GROSSBUCHSTABEN), Badges */
  --fs-sm: 12.5px;         /* Hinweise, Nebeninfos, Zeitangaben */
  --fs-md: 13px;           /* kleine Texte, Tabellen in dichten Ansichten, kleine Knöpfe */
  --fs-base: 14px;         /* Fließtext, Tabellen, Felder */
  --fs-lg: 16px;           /* Kartenüberschriften */
  --fs-xl: 18px;           /* Abschnittsüberschriften, Dialogtitel */

  /* Radien */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;

  /* Abstände (4er-Raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --page-pad-top: 30px;    /* oberer Abstand der Seite (Überschrift) */
  --page-pad-x: 34px;
  --page-pad-bottom: 64px;
  --content-max: 100%;     /* volle Fensterbreite (Wunsch Luis, 19.10.2026); früher 1120px */

  /* Bausteine — gleiche Maße in allen Apps (Knöpfe, Felder, Karten, Kennzahlen) */
  --control-h: 40px;        /* Knopf- und Feldhöhe */
  --control-h-sm: 32px;     /* kleine Knöpfe (Tabellen, Werkzeugleisten) */
  --control-font: 14px;
  --control-font-sm: 13px;
  --control-pad-x: 16px;
  --control-pad-x-sm: 12px;
  --title-size: 22px;       /* Seitenüberschrift */
  --label-size: var(--fs-xs);  /* Abschnitts-Etikett (GROSSBUCHSTABEN) */
  --head-gap: 20px;         /* Abstand Seitenkopf → Inhalt */
  /* Innenabstände: Paar-Werte nur allein verwenden (padding: var(--card-pad)).
     Für einzelne Seiten die -y/-x-Werte nehmen, z. B. padding: 0 var(--card-pad-x). */
  --card-pad-y: 20px; --card-pad-x: 22px;
  --card-pad: var(--card-pad-y) var(--card-pad-x);   /* Inhaltskarten */
  --kpi-pad-y: 18px;  --kpi-pad-x: 20px;
  --kpi-pad: var(--kpi-pad-y) var(--kpi-pad-x);      /* Kennzahl-Kacheln */
  --kpi-label: var(--fs-xs);
  --kpi-value: 26px;
  --kpi-value-lg: 30px;     /* große Einzelzahl (Kopfkachel) */
  --block-gap: 16px;        /* Abstand zwischen Karten / Kacheln */
  /* Tabellenzellen — auf kleinen Laptops (≤1280px) enger, damit weniger seitlich gescrollt wird */
  --cell-pad-y: 13px; --cell-pad-x: 16px;
  --cell-pad: var(--cell-pad-y) var(--cell-pad-x);
  --row-hover: var(--bg-soft);   /* Zeile unter der Maus */
  /* Überlagerung hinter Dialogen; gedämpfter Text auf Navy (Seitenleiste, dunkle Kacheln) */
  --overlay: rgba(15,27,48,.45);
  --on-navy: #ffffff;
  --on-navy-muted: rgba(255,255,255,.66);

  /* Bewegung — gleiche Dauer und Kurve in allen Apps (public/bewegung.js, Übergänge in CSS).
     Wer „Bewegung reduzieren“ im System eingestellt hat, bekommt keine Animationen. */
  --bewegung-kurz: 160ms;   /* Hover, Einblenden kleiner Teile */
  --bewegung: 240ms;        /* Seitenwechsel, Dialoge */
  --bewegung-lang: 560ms;   /* Diagramme, Balken */
  --kurve: cubic-bezier(.2, .8, .2, 1);

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(16,30,54,.06);
  --shadow-md: 0 2px 6px rgba(16,30,54,.06), 0 8px 24px rgba(16,30,54,.06);
  --shadow-lg: 0 8px 20px rgba(16,30,54,.10), 0 24px 60px rgba(16,30,54,.12);
}
@media (max-width: 1280px) {
  :root { --cell-pad-y: 10px; --cell-pad-x: 10px; --page-pad-x: 24px; }
}
@media (max-width: 800px) {
  :root { --page-pad-top: 22px; --page-pad-x: 16px; --page-pad-bottom: 48px; --title-size: 20px; --kpi-value: 22px; --kpi-value-lg: 24px; --card-pad-y: 16px; --card-pad-x: 16px; }
}