/* base.css – Reset, CSS-Variablen, Typografie (CLAUDE.md Abschnitt 5).
   Dark Mode ist verbindlich und permanent – kein Hell-Modus, kein Umschalter. */

:root {
  /* Kurven-/Größenfarben: hell genug für dunklen Hintergrund! */
  --color-primary:     #5B9BD5;   /* helles Blau – s(t)-Kurve */
  --color-secondary:   #2FBF8F;   /* helles Grün – v(t)-Kurve */
  --color-tertiary:    #E8763F;   /* helles Orange – a(t)-Kurve */
  --color-quaternary:  #9B7FD4;   /* helles Violett – p(t)-Kurve, p-Vektor */
  --color-accent:      #FF7A1A;   /* Leucht-Orange – aktiver Cursor, ROI-Rahmen */

  --bg-primary:        #0f1115;   /* App-Hintergrund */
  --bg-secondary:      #1a1e24;   /* Cards, Bars, erhabene Flächen */
  --bg-dark:           #0a0a0a;   /* Video-Hintergrund */
  --bg-panel:          #0f0f0f;   /* Diagramm-Hintergrund */

  --text-primary:      #e5e7eb;
  --text-secondary:    #9ca3af;

  --border-light:      rgba(255,255,255,0.08);
  --border-medium:     rgba(255,255,255,0.15);

  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         14px;

  /* Präsentationsmodus (S32): EIN Faktor skaliert alle Schriftgrößen der
     Oberfläche. Am Beamer kennt der Browser die tatsächliche Bildgröße
     nicht (nur Auflösung, nicht Zoll und nicht die Sehentfernung) – darum
     stellt die Lehrkraft die Stufe selbst ein, statt dass die App rät.
     Wert wird in main.js gesetzt und in IndexedDB gemerkt. */
  --ui-skala: 1;

  --text-xs:   calc(11px * var(--ui-skala));
  --text-sm:   calc(13px * var(--ui-skala));
  --text-base: calc(16px * var(--ui-skala));   /* Minimum für Fließtext */
  --text-lg:   calc(18px * var(--ui-skala));
  --text-xl:   calc(22px * var(--ui-skala));
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  /* System-Font-Stack – kein externer Font-Load */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* Gürtel zu den Hosenträgern im viewport-Meta: touch-action ohne
     double-tap-zoom auf allen Flächen, die kein eigenes touch-action setzen.
     Der Browser-Seitenzoom hat in der App nichts zu suchen. */
  touch-action: manipulation;
}

button, select, input, label {
  touch-action: manipulation;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.25;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

small, .text-secondary {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

canvas, img, video {
  display: block;
  max-width: 100%;
}