/*
 * Design-Tokens — Interaktive Kurspräsentationen
 * Einzige Quelle für Farbe, Schrift, Abstand und Größe.
 * Keine Farbwerte direkt in Komponenten. Siehe docs/design-system.md
 *
 * Stand Phase 1: Grundwerte.
 * Praevencio-Rot #BD2A19 ist vom Auftraggeber bestätigt (2026-08-26).
 */

:root {
  /* --- Leitfarbe --------------------------------------------------- */
  --prae-rot: #BD2A19;
  --prae-rot-dunkel: #8E1F13;
  --prae-rot-hell: #F4E3E0;

  /* --- Text und Flächen -------------------------------------------- */
  --text: #0B0B0B;
  --text-leise: #52514E;
  --text-still: #8A8A85;
  --text-auf-rot: #FFFFFF;

  --flaeche: #FCFCFB;
  --flaeche-karte: #FFFFFF;
  --linie: #E6E5E1;

  /* --- Schrift ------------------------------------------------------ */
  --schrift-ueberschrift: "Oswald", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --schriftgewicht-ueberschrift: 600;
  --schriftgewicht-text: 400;
  --schriftgewicht-betont: 700;

  /* Grundgröße. Im Präsentationsmodus wird sie über --massstab angehoben,
     damit dieselbe Folie auf Tablet und Beamer funktioniert.
     Auf Wunsch des Auftraggebers (27.08.) eine Stufe größer als zuvor —
     lesbar bis in die hintere Reihe, dafür weniger Text je Folie. */
  --massstab: 1;
  --schriftgroesse-basis: calc(17px * var(--massstab));

  --zeilenhoehe-text: 1.5;
  --zeilenhoehe-ueberschrift: 1.15;

  /* --- Abstände (8er-Raster) ---------------------------------------- */
  --abstand-1: calc(4px * var(--massstab));
  --abstand-2: calc(8px * var(--massstab));
  --abstand-3: calc(16px * var(--massstab));
  --abstand-4: calc(24px * var(--massstab));
  --abstand-5: calc(32px * var(--massstab));
  --abstand-6: calc(48px * var(--massstab));
  --abstand-7: calc(64px * var(--massstab));

  /* --- Formen -------------------------------------------------------- */
  --radius-klein: 8px;
  --radius: 14px;
  --radius-gross: 20px;

  /* --- Bedienelemente ------------------------------------------------ */
  /* Mindestberührfläche. Im Präsentationsmodus deutlich größer. */
  --beruehrflaeche-min: 48px;
  --beruehrflaeche-praesentation: 72px;

  /* --- Bewegung ------------------------------------------------------ */
  --uebergang-schnell: 120ms ease-out;
  --uebergang: 220ms ease-out;
}

/* Zweite Farbwelt: dunkel.
   Im abgedunkelten Schulungsraum wirken Bilder darauf wie im Kino, im hellen
   Raum ohne Verdunklung ist die helle Welt besser lesbar. Der Dozent schaltet
   selbst um (Knopf „Licht" oder Taste d) — die Wahl bleibt gespeichert.
   Es werden nur die Tokens getauscht, keine Regel im Bauteil kennt eine Farbe. */
[data-welt="dunkel"] {
  --prae-rot: #E0432F;
  --prae-rot-dunkel: #B3311F;
  --prae-rot-hell: #3A1712;

  --text: #F6F4F1;
  --text-leise: #B9B4AC;
  --text-still: #86817A;
  --text-auf-rot: #FFFFFF;

  --flaeche: #121110;
  --flaeche-karte: #1B1A18;
  --linie: #34322E;
}

/* Präsentationsmodus: alles wächst mit, damit es auf Beamer und
   Großbildschirm aus mehreren Metern Entfernung lesbar bleibt. */
.praesentation {
  --massstab: 1.55;

  /* WICHTIG: Schriftgröße und Abstände sind oben aus --massstab abgeleitet.
     Eine an :root berechnete Eigenschaft rechnet sich nicht neu, nur weil hier
     ein anderer Maßstab steht — sie muss hier noch einmal abgeleitet werden.
     Ohne das bleibt die Präsentation in Tabletgröße stehen (Fehler vom 27.08.). */
  --schriftgroesse-basis: calc(17px * var(--massstab));
  --abstand-1: calc(4px * var(--massstab));
  --abstand-2: calc(8px * var(--massstab));
  --abstand-3: calc(16px * var(--massstab));
  --abstand-4: calc(24px * var(--massstab));
  --abstand-5: calc(32px * var(--massstab));
  --abstand-6: calc(48px * var(--massstab));
  --abstand-7: calc(64px * var(--massstab));

  font-size: var(--schriftgroesse-basis);
}

@media (min-width: 1600px) {
  .praesentation { --massstab: 1.85; }
}

/* Nutzer, die Bewegung reduzieren möchten. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --uebergang-schnell: 1ms;
    --uebergang: 1ms;
  }
}