/* ============================================================
   Datei:        assets/css/shared/variablen.css
   Seite:        alle Seiten
   Zweck:        Einzige Quelle für Farben, Schriften, Abstände, Radien, Schatten und Zeiten
   Abhängig von: nichts
   Genutzt von:  alle HTML-Seiten (muss als erste CSS-Datei geladen werden)
   ============================================================ */

:root {
  /* --- 1. Farben --- */
  --farbe-hintergrund: #403d42;
  --farbe-flaeche: #4b484f;
  --farbe-flaeche-hell: #58555e;
  --farbe-rahmen: #736f7a;
  --farbe-text: #f6f2f0;
  --farbe-text-gedaempft: #dcd6d6;
  --farbe-wein: #8f2a4b;
  --farbe-text-auf-wein: #f6f2f0;
  --akzent-1: #f0a3b5;
  --akzent-2: #aebfd6;
  --farbe-salbei: #a9c5a0;
  --farbe-orange: #fbbf24;
  --farbe-auf-akzent: #2a1d24;

  /* --- 2. Schriften --- */
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --schrift-klein: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --schrift-basis: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --schrift-gross: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --schrift-titel: clamp(2.1rem, 1.3rem + 4vw, 4rem);
  --zeilenhoehe: 1.6;
  --text-breite: 65ch;

  /* --- 3. Abstände, Radius, Schatten --- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 1rem;
  --abstand-4: 1.5rem;
  --abstand-5: 2.5rem;
  --abstand-6: 4rem;
  --radius: 1rem;
  --radius-klein: 0.4rem;
  --radius-rund: 999px;
  --schatten-glow: 0 0 0 1px color-mix(in srgb, var(--kat-farbe, var(--akzent-1)) 35%, transparent),
    0 14px 40px -14px color-mix(in srgb, var(--kat-farbe, var(--akzent-1)) 55%, transparent);

  /* --- 4. Layout und Zeiten --- */
  --inhalt-breite: 1200px;
  --kopfzeile-hoehe: 4rem;
  --dauer-kurz: 150ms;
  --dauer-mittel: 300ms;
  --dauer-lang: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}