@charset "UTF-8";
/**
 * Design-System – Tokens, siehe docs/modernisierung/DESIGN-SYSTEM.md Abschnitt A.
 */
:root {

  /* Primitiv – nur hier sichtbar; die Styles nehmen die Zweck-Tokens darunter. */

  /* Primitiv – Neutral-Rampe (hell → dunkel), kühles Grau */
  --color-white: #fff;
  --color-neutral-50: #f6f8f9;
  --color-neutral-100: #eef1f2;
  --color-neutral-150: #e6eaec;
  --color-neutral-200: #dde3e6;
  --color-neutral-300: #cfd6da;
  --color-neutral-500: #7b868e;
  --color-neutral-600: #5f6b73;
  --color-neutral-700: #4a5660;
  --color-neutral-800: #2b2f33;
  --color-neutral-900: #1f2a30;
  --color-neutral-900-a30: rgb(31 42 48 / 0.3);

  /* Primitiv – Farben */
  --color-green-50: #d4ebd8;
  --color-green-600: #1a6e2c;
  --color-green-620: #49883f;
  --color-green-700: #3b7300;
  --color-green-800: #2f5c00;
  --color-green-900: #264b00;
  --color-blue-50: #e8f0f8;
  --color-blue-600: #2767a8;
  --color-blue-800: #1d4f82;
  --color-amber-50: #fdf3e1;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-red-50: #f8dcd8;
  --color-red-600: #b03427;
  --color-yellow-200: #ffff99;

  /* Primitiv – Dunkelmodus: Nacht-Rampe (hell → dunkel) und helle Stufen der Farben */
  --color-night-50: #dbe1e4;
  --color-night-100: #b4bec4;
  --color-night-200: #9aa6ad;
  --color-night-500: #38434a;
  --color-night-600: #2e373c;
  --color-night-700: #283035;
  --color-night-800: #21282c;
  --color-night-850: #1d2327;
  --color-night-900: #15191c;
  --color-night-50-a35: rgb(219 225 228 / 0.35);
  --color-black-a60: rgb(0 0 0 / 0.6);
  --color-green-200: #8fc95f;
  --color-green-300: #7aba48;
  --color-green-250: #74c98a;
  --color-green-400: #64a133;
  --color-green-950: #1b3a25;
  --color-blue-200: #93bff0;
  --color-blue-300: #7ab3ee;
  --color-blue-950: #1b3047;
  --color-amber-200: #f0b46a;
  --color-amber-300: #f0a454;
  --color-amber-950: #3b2d16;
  --color-red-300: #f4907f;
  --color-red-950: #46221d;
  --color-yellow-900: #5b5418;

  /* Primitiv – Diagramm-Reihen (ChartHelper), ab der neunten wieder von vorn */
  --color-chart-1: #2f80d1;
  --color-chart-2: #f08c2e;
  --color-chart-3: #8a5cc2;
  --color-chart-4: var(--color-green-600);
  --color-chart-5: var(--color-red-600);
  --color-chart-6: #0099c6;
  --color-chart-7: #dd4477;
  --color-chart-8: #66aa00;

  /* Semantisch – Flächen */
  --color-canvas: var(--color-neutral-100);
  --color-surface: var(--color-white);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-control: var(--color-neutral-100);
  --color-surface-control-hover: var(--color-neutral-150);
  --color-surface-control-active: var(--color-neutral-200);
  --color-surface-inverse: var(--color-neutral-800);
  --color-backdrop: var(--color-neutral-900-a30);

  /* Semantisch – Text */
  --color-text: var(--color-neutral-800);
  --color-text-strong: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-caption: var(--color-neutral-700);
  --color-text-inverse: var(--color-white);
  /* Gesperrter Knopf: 3,7:1 auf Weiß, lesbar und doch deutlich leiser als jeder bedienbare Text */
  --color-text-disabled: var(--color-neutral-500);

  /* Semantisch – Ränder */
  --color-border: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-150);
  --color-border-strong: var(--color-neutral-500);

  /* Semantisch – Link, Aktion, Akzent, Marke */
  --color-link: var(--color-blue-600);
  --color-action: var(--color-green-700);
  --color-action-hover: var(--color-green-800);
  --color-action-active: var(--color-green-900);
  --color-action-text: var(--color-white);
  --color-accent: var(--color-amber-700);
  --color-logo: var(--color-green-620);

  /* Semantisch – Zustände: Text (auch Linie, Füllung) und Fläche */
  --color-success: var(--color-green-600);
  --color-success-surface: var(--color-green-50);
  --color-warning: var(--color-amber-800);
  --color-warning-surface: var(--color-amber-50);
  --color-danger: var(--color-red-600);
  --color-danger-surface: var(--color-red-50);
  --color-info: var(--color-blue-800);
  --color-info-surface: var(--color-blue-50);
  /* Fortschritt („wie weit“): Füllung eines Balkens ohne Wertung, 3:1 auf surface-control */
  --color-progress: var(--color-neutral-500);
  /* markiert: Antwortzeile unter der Maus, Aufblitzen, Ladeanzeige, neue Chat-Nachricht */
  --color-highlight: var(--color-yellow-200);

  /* Kante um den Punkt in der Korbfarbe aus der DB: hält auch helle Farben auf Weiß sichtbar */
  --color-basket-edge: var(--color-neutral-900-a30);

  /* Unterlage für Bilder aus Inhalten und Illustrationen: zeigt schwarze Linien auf Transparenz */
  --color-image-backdrop: transparent;

  /* Radius (Abschnitt A.3) */
  --radius-1: 2px;
  --radius-2: 3px;
  --radius-3: 5px;
  --radius-box: 8px;
  --radius-pill: 999px;
  /* Ecke von Feld und Knopf: was in einer Zeile nebeneinander steht, hat dieselbe. */
  --radius-control: var(--radius-3);

  /* Schatten (Abschnitt A.2): Kasten auf der Flaeche, schwebende Ebene (Dialog, Hilfe) */
  --shadow-1: 0 1px 2px rgb(20 30 35 / 0.06), 0 1px 3px rgb(20 30 35 / 0.08);
  --shadow-2: 0 4px 12px rgb(20 30 35 / 0.12), 0 12px 32px rgb(20 30 35 / 0.16);

  /* Bewegung: Hover und Aufklappen; bei prefers-reduced-motion 0s (unten) */
  --motion-fast: 120ms;
  /* Einblenden des Toasts; km.slide nimmt dieselben 150 ms (slide.js) */
  --motion-medium: 150ms;

  /* Spacing – 5px-Raster mit einer Haarlinien-Stufe darunter, siehe A.4. */
  --space-2xs: 3px;
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 25px;
  --space-2xl: 30px;

  /* Schriftfamilien (Abschnitt A.6); Inter liegt unter web/fonts/ (base.css). */
  --type-family-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --type-family-mono: ui-monospace, Consolas, "SF Mono", Menlo, "Courier New", monospace;

  /* Groessen-Leiter (Abschnitt A.6) in rem an der 16px-Wurzel: keine Stufe rechnet
     gegen ihren Container. Kleiner als --type-xs ist nur der Kastentitel in Versalien. */
  --type-2xs: 0.6875rem;
  --type-xs: 0.75rem;
  --type-base: 0.875rem;
  --type-prose: 0.9375rem;
  --type-lg: 1rem;
  --type-xl: 1.125rem;
  --type-2xl: 1.25rem;
  --type-3xl: 1.5rem;

  --type-leading: 1.5;
  --type-leading-prose: 1.6;
  --type-leading-heading: 1.25;
  /* Buchstabenabstand der Versalien: Tabellenkopf, Kennzeile, „oder“; der kleinere Kastentitel braucht mehr. */
  --type-caps-tracking: 0.05em;
  --type-caps-tracking-wide: 0.1em;

  /* Z-Index (benannte Leiter Abschnitt A.7) */
  --z-dropdown: 100;
  --z-modal: 9999;
  --z-notify: 99999;

  /* Fokus-Ring (Abschnitt A.1, Kontrast), Abstand nach Rolle: 1 px außen um alles mit Rand oder
     Fläche, 2 px um Textlinks, innen an Einträgen, die an einer Kante stehen. Dunkle und farbige
     Flächen setzen --focus-ring-color auf -inverse. */
  --focus-ring-color: var(--color-link);
  --focus-ring-color-inverse: var(--color-white);
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;
  --focus-ring-offset-text: 2px;
  --focus-ring-offset-inset: -2px;
  /* Abstand des Unterstrichs eines Links im Fließtext. */
  --link-underline-offset: 0.15em;
  /* Kleinste Trefferfläche eines Bedienelements in beiden Richtungen (WCAG 2.5.8). */
  --target-min: 24px;

  /* Seitengeruest (layout.css): Rahmen, Hauptspalte, Seitenleiste, Abstand dazwischen. */
  --layout-width: 992px;
  --layout-main: 680px;
  --layout-aside: 302px;
  --layout-gap: 6px;
  /* Rest der Seitenleistenspalte rechts neben der Leiste; Kopf und
     Feedback-Lasche enden auf der Kante der Leiste. */
  --layout-aside-rest: calc(var(--layout-width) - var(--layout-main) - var(--layout-gap) - var(--layout-aside));
  /* Hoehe der Kopfzeile (Logo, Metamenue) und des Hauptmenues; --aside-top rechnet damit. */
  --layout-header: 3.625rem;
  --layout-nav: 2.75rem;

  /* Hoehe eines einzeiligen Felds samt Rand (base.css). */
  --form-control-height: calc(1.375rem + 2 * var(--space-2xs) + 2px);
  /* Ankreuzfeld und Optionsfeld neben Text; dichte Rollen (Baum, Kategorie-Schalter) nehmen 13px. */
  --control-check: 1rem;
}

/*
 * Dunkelmodus: setzt nur Zweck-Tokens (DESIGN-SYSTEM.md A.1). data-theme setzt das Skript im
 * Kopf von layout.php vor dem ersten Zeichnen; gedruckt wird immer hell.
 */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --color-chart-4: var(--color-green-250);
    --color-chart-5: var(--color-red-300);

    --color-canvas: var(--color-night-900);
    --color-surface: var(--color-night-850);
    --color-surface-subtle: var(--color-night-800);
    --color-surface-control: var(--color-night-700);
    --color-surface-control-hover: var(--color-night-600);
    --color-surface-control-active: var(--color-night-500);
    --color-surface-inverse: var(--color-neutral-150);
    --color-backdrop: var(--color-black-a60);

    --color-text: var(--color-night-50);
    --color-text-strong: var(--color-neutral-100);
    --color-text-muted: var(--color-night-200);
    --color-text-caption: var(--color-night-100);
    --color-text-inverse: var(--color-night-900);
    --color-text-disabled: var(--color-neutral-500);

    --color-border: var(--color-night-500);
    --color-border-subtle: var(--color-night-600);
    --color-border-strong: var(--color-neutral-500);

    /* Aktion hell mit dunkler Schrift: ein dunkles Grün hielte als Strich keine 3:1 auf der Fläche. */
    --color-link: var(--color-blue-300);
    --color-action: var(--color-green-400);
    --color-action-hover: var(--color-green-300);
    --color-action-active: var(--color-green-200);
    --color-action-text: var(--color-night-900);
    --color-accent: var(--color-amber-300);

    --color-success: var(--color-green-250);
    --color-success-surface: var(--color-green-950);
    --color-warning: var(--color-amber-200);
    --color-warning-surface: var(--color-amber-950);
    --color-danger: var(--color-red-300);
    --color-danger-surface: var(--color-red-950);
    --color-info: var(--color-blue-200);
    --color-info-surface: var(--color-blue-950);
    --color-progress: var(--color-neutral-500);
    --color-highlight: var(--color-yellow-900);

    --color-basket-edge: var(--color-night-50-a35);
    --color-image-backdrop: var(--color-neutral-50);

    --focus-ring-color-inverse: var(--color-night-900);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; --motion-medium: 0s; }
}