/* Stufen-Token (SPEC 4.2).
 *
 * Jeder Abschnitt trägt seine eigene Stufe: <section data-stufe="1".."6">.
 * Die Seite verwandelt sich also beim Scrollen Abschnitt für Abschnitt.
 * Kopf, Regler und Fuß tragen das Attribut auch, JavaScript setzt es passend
 * zum Abschnitt dahinter. Ohne Attribut gilt Stufe 6 (:root), das Luma-Design.
 * Jede Komponente liest nur diese Variablen.
 *
 * Abweichungen von der Tabelle in SPEC 4.2 (begründet im ARBEITSLOG):
 * - Stufe 2 Akzent #B5461A statt #C9501A: #C9501A hat auf #F7F7F5 nur 4,2:1,
 *   für Fließtext-Links braucht es 4,5:1. #B5461A liegt bei 5,1:1.
 * - --on-accent ergänzt: Text auf Akzentflächen. Orange (#FF6A1A) trägt nur
 *   dunklen Text lesbar (weiß: 2,9:1).
 */

:root {
  --luma-orange: #FF6A1A;
  --luma-rot: #E8381C;
  --luma-gelb: #FFB347;
  --luma-verlauf: linear-gradient(135deg, #FFB347 0%, #FF6A1A 50%, #E8381C 100%);

  --schrift-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-manrope: "Manrope", var(--schrift-system);
  --schrift-fraunces: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-bricolage: "Bricolage Grotesque", "Arial Black", var(--schrift-system);
  --schrift-instrument: "Instrument Serif", Georgia, "Times New Roman", serif;
  --schrift-unbounded: "Unbounded", "Arial Black", var(--schrift-system);
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rand: max(20px, env(safe-area-inset-left, 0px));
  --rand-rechts: max(20px, env(safe-area-inset-right, 0px));
  --breite: 1180px;
  --leiste-hoehe: 56px; /* Regler-Leiste am Handy */
}

/* ---------- Stufe 1: Schlicht ---------- */
[data-stufe="1"] {
  --bg: #FFFFFF;
  --fg: #000000;
  --muted: #333333;
  --line: #000000;
  --flaeche: #FFFFFF;
  --accent: #0000EE;
  --accent-2: #0000EE;
  --on-accent: #FFFFFF;
  --font-display: var(--schrift-system);
  --display-weight: 700;
  --display-style: normal;
  --font-body: var(--schrift-system);
  --radius: 0px;
  --shadow: none;
  --motion: 0;
  --grain: 0;
  --h1-size: 2rem;
  --h1-leading: 1.2;
  --h2-size: 1.5rem;
  --tracking: 0em;
  --kopf-bg: #FFFFFF;
  --uebergang: 0s;
  color-scheme: light;
}

/* ---------- Stufe 2: Sauber ---------- */
[data-stufe="2"] {
  --bg: #F7F7F5;
  --fg: #1E2124;
  --muted: #5C6168;
  --line: #D9DAD6;
  --flaeche: #FFFFFF;
  --accent: #B5461A;
  --accent-2: #B5461A;
  --on-accent: #FFFFFF;
  --font-display: var(--schrift-manrope);
  --display-weight: 800;
  --display-style: normal;
  --font-body: var(--schrift-manrope);
  --radius: 6px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .04);
  --motion: 0.4;
  --grain: 0;
  --h1-size: clamp(2.2rem, 5vw, 3.4rem);
  --h1-leading: 1.1;
  --h2-size: clamp(1.8rem, 3.4vw, 2.5rem);
  --tracking: -0.01em;
  --kopf-bg: rgb(247 247 245 / .9);
  --uebergang: .6s;
  color-scheme: light;
}

/* ---------- Stufe 3: Modern ---------- */
[data-stufe="3"] {
  --bg: #141311;
  --fg: #F4F1EA;
  --muted: #B7B1A5;
  --line: #2A2825;
  --flaeche: #1D1B18;
  --accent: #FF6A1A;
  --accent-2: #FFB347;
  --on-accent: #141311;
  --font-display: var(--schrift-fraunces);
  --display-weight: 600;
  --display-style: normal;
  --font-body: var(--schrift-manrope);
  --radius: 10px;
  --shadow: 0 20px 50px rgb(0 0 0 / .35);
  --motion: 0.7;
  --grain: 0;
  --h1-size: clamp(2.6rem, 7vw, 5rem);
  --h1-leading: 1.0;
  --h2-size: clamp(2rem, 4.6vw, 3.4rem);
  --tracking: -0.02em;
  --kopf-bg: rgb(20 19 17 / .72);
  --uebergang: .6s;
  color-scheme: dark;
}

/* ---------- Stufe 4: Mit Charakter ---------- */
[data-stufe="4"] {
  --bg: #1C1714;
  --fg: #F2E9DD;
  --muted: #B9AA98;
  --line: #352C26;
  --flaeche: #251E1A;
  --accent: #FF6A1A;
  --accent-2: #E8381C;
  --on-accent: #1C1714;
  --font-display: var(--schrift-bricolage);
  --display-weight: 800;
  --display-style: normal;
  --font-body: var(--schrift-manrope);
  --radius: 2px;
  --shadow: 0 2px 0 #000;
  --motion: 0.85;
  --grain: 0.12;
  --h1-size: clamp(2.8rem, 8vw, 6rem);
  --h1-leading: 0.95;
  --h2-size: clamp(2.2rem, 5.8vw, 4.4rem);
  --tracking: -0.03em;
  --kopf-bg: rgb(28 23 20 / .78);
  --uebergang: .6s;
  color-scheme: dark;
}

/* ---------- Stufe 5: Inszeniert ---------- */
[data-stufe="5"] {
  --bg: #0A0A0B;
  --fg: #F5F5F7;
  --muted: #9A9AA3;
  --line: #1F1F24;
  --flaeche: #121214;
  --accent: #FFB347;
  --accent-2: #FFFFFF;
  --on-accent: #0A0A0B;
  --font-display: var(--schrift-instrument);
  --display-weight: 400;
  --display-style: italic;
  --font-body: var(--schrift-manrope);
  --radius: 24px;
  --shadow: 0 30px 80px rgb(255 179 71 / .15);
  --motion: 1;
  --grain: 0.05;
  --h1-size: clamp(3rem, 9vw, 7rem);
  --h1-leading: 0.95;
  --h2-size: clamp(2.4rem, 6.4vw, 5rem);
  --tracking: -0.01em;
  --kopf-bg: rgb(10 10 11 / .6);
  --uebergang: .6s;
  color-scheme: dark;
}

/* ---------- Stufe 6: Immersiv (auch Grundwert) ---------- */
:root, [data-stufe="6"] {
  --bg: #05060D;
  --fg: #EEF1FF;
  --muted: #8D95C4;
  --line: #1B2140;
  --flaeche: #0B0E1C;
  --accent: #FF6A1A;
  --accent-2: #6EA8FF;
  --on-accent: #05060D;
  --font-display: var(--schrift-unbounded);
  --display-weight: 700;
  --display-style: normal;
  --font-body: var(--schrift-manrope);
  --radius: 16px;
  --shadow: 0 0 60px rgb(110 168 255 / .25);
  --motion: 1;
  --grain: 0;
  --h1-size: clamp(3rem, 9vw, 7.5rem);
  --h1-leading: 0.92;
  --h2-size: clamp(2rem, 5.2vw, 4.2rem);
  --tracking: -0.02em;
  --kopf-bg: rgb(5 6 13 / .55);
  --uebergang: .6s;
  color-scheme: dark;
}

/* Wer weniger Bewegung will, bekommt keine. Muss nach den Stufen stehen. */
@media (prefers-reduced-motion: reduce) {
  :root, [data-stufe] {
    --motion: 0;
    --uebergang: 0s;
  }
}