/* ALUR Tokens, Designsystem 5.0 (Stand 2026-11-08). Quelle: Paper „ALUR · Marke 5.0“; Regeln in Worten: Wiki, Seite „Brand Guide“.
   Farben nach Brand Guide „Farbe“.
   Text: Überschrift Tanne 950, Fließtext Tanne 700, Nebentext Tanne 500. Grund digital Weiß, Papier für ruhige Flächen und Druck.
   Amber ist der Akzent: sparsam, als Text nur mit Kontrast nach WCAG, nie Status, Logofarbe oder Daten; in Grafiken die Farbe der KI. Statusfarben nur mit Symbol und Wort, nie als Fläche, nur auf Hell.
   Schrift: Schibsted Grotesk 400, 500, 600, selbst gehostet in fonts/. */
:root {
  --alur-tanne-950: #1D2920;
  --alur-tanne: #26392B;
  --alur-tanne-700: #405042;
  --alur-tanne-500: #5B685A;
  --alur-tanne-300: #8F9F8A;
  --alur-tanne-100: #D4D1C6;
  --alur-weiss: #FFFFFF;
  --alur-papier: #F7F4EE;
  --alur-sand: #EAE4D9;
  --alur-stein: #C9BBA7;
  --alur-amber: #DC9A3C;
  --alur-amber-700: #AD762D;
  --alur-amber-300: #E7AD64;
  --alur-amber-100: #EBD5BA;
  --alur-akzent: var(--alur-amber);
  --alur-ki: var(--alur-akzent); --alur-aufruf: var(--alur-akzent); /* Alias nach Brand Guide „Farbe“; in Grafiken bleibt Amber die KI */
  --alur-fokus: var(--alur-amber-700);
  --alur-hinweis: #3E6178; --alur-warnung: #7A5814; --alur-erledigt: #2D6E3E; --alur-fehler: #A33A32;
  /* Glas */
  --alur-glas-dunkel: #1D2920A3; --alur-glas-hell: #FFFFFFB3; --alur-klarglas: #FFFFFF1F;
  --alur-glas-kante: #FFFFFF29; --alur-glas-kante-hell: #FFFFFF99; --alur-ki-flaeche-dunkel: #DC9A3C29;
  /* Auf Dunkel (Grund Tanne 950): Überschrift Weiß, Text Tanne 100, Etikett und Nebentext Tanne 300, Linie Weiß 12 %, Kapitelzahl Tanne 700 */
  --alur-dunkel-grund: #1D2920; --alur-dunkel-text: #D4D1C6; --alur-dunkel-nebentext: #8F9F8A; --alur-dunkel-linie: #FFFFFF1F; --alur-dunkel-kapitelzahl: #405042;
  /* Schrift */
  --alur-schrift: "Schibsted Grotesk", Arial, sans-serif;
  --alur-gewicht-text: 400; --alur-gewicht-etikett: 500; --alur-gewicht-kopf: 600;
  /* Skala für 1440 px: Größe / Zeile (Brand Guide, „Schrift“) */
  --alur-text-zahl: 88px;   --alur-zeile-zahl: 76px;   --alur-laufweite-zahl: -0.04em;
  --alur-text-titel: 80px;  --alur-zeile-titel: 80px;  --alur-laufweite-titel: -0.035em;
  --alur-text-folientitel: 64px;
  --alur-text-h1: 56px;     --alur-zeile-h1: 60px;     --alur-laufweite-h1: -0.03em;
  --alur-text-h2: 36px;     --alur-zeile-h2: 42px;     --alur-laufweite-h2: -0.02em;
  --alur-text-h3: 24px;     --alur-zeile-h3: 30px;     --alur-laufweite-h3: -0.01em;
  --alur-text-lead: 20px;   --alur-zeile-lead: 30px;
  --alur-text-text: 18px;   --alur-zeile-text: 27px;
  --alur-text-kompakt: 16px; --alur-zeile-kompakt: 24px;
  --alur-text-klein: 14px;  --alur-zeile-klein: 20px;
  --alur-text-etikett: 12px; --alur-zeile-etikett: 16px; --alur-laufweite-etikett: 0.1em;
  --alur-text-mikro: 11px;  --alur-zeile-mikro: 14px;  --alur-laufweite-mikro: 0.12em;
  /* Schmale Ansichten: Titel und H1 40 px, H2 28 px, Text 17 px */
  --alur-text-titel-schmal: 40px; --alur-text-h2-schmal: 28px; --alur-text-text-schmal: 17px;
  /* Raster und Abstände (Schritte von 8 px) */
  --alur-abstand-1: 4px; --alur-abstand-2: 8px; --alur-abstand-3: 12px; --alur-abstand-4: 16px; --alur-abstand-6: 24px;
  --alur-abstand-8: 32px; --alur-abstand-12: 48px; --alur-abstand-16: 64px; --alur-abstand-20: 80px; --alur-abstand-24: 96px;
  --alur-abstand-32: 128px; --alur-abstand-36: 144px;
  --alur-seite: 1440px; --alur-inhalt: 1280px; --alur-textbreite: 640px; --alur-rand: 80px; --alur-spalten: 12; --alur-spaltenabstand: 24px;
  --alur-kapitel-luft: 128px;
  /* Umbrüche (nur als Referenz; in Media Queries die Zahl schreiben): 480, 768, 1024, 1280 */
  --alur-umbruch-s: 480px; --alur-umbruch-m: 768px; --alur-umbruch-l: 1024px; --alur-umbruch-xl: 1280px;
  /* Radien */
  --alur-radius-knopf: 4px; --alur-radius-flaeche: 6px; --alur-radius-knoten: 8px; --alur-radius-glas: 14px; --alur-radius-rund: 999px;
  /* Linien, Schatten, Fokus */
  --alur-linie-stark: 1px; --alur-linie-aktiv: 2px;
  --alur-schatten-glas: 0 32px 64px -28px #0A100C99; /* Tanne-Schwarz 60 % */
  --alur-fokus-breite: 2px; --alur-fokus-abstand: 3px;
  --alur-klickflaeche: 44px; --alur-knopf-hoehe: 48px; --alur-feld-hoehe: 48px;
  /* Bewegung (Brand Guide, „Bewegung“): nur Deckkraft und Lage, Wege bis 16 px */
  --alur-dauer-kurz: 160ms; --alur-dauer-mittel: 280ms; --alur-dauer-lang: 480ms;
  --alur-kurve-ankommen: cubic-bezier(0.16, 1, 0.3, 1); --alur-kurve-wechseln: cubic-bezier(0.65, 0, 0.35, 1); --alur-kurve-gleichmaessig: linear;
  --alur-weg: 16px;
}