/* tokens.css — Hölscher Automobile (Autohaus 8). Werte 1:1 aus bau-brief.md §2.1–2.4. */
:root {
  /* 2.1 Palette */
  --tageslicht: #eceef1;
  --halle: #dfe3e9;
  --tinte: #101720;
  --kobalt: #1b4fd1;
  --laerche: #b98a4e;

  --tiefblau: #0e1a33;
  --kobalt-hell: #6e9dff;
  --laerche-tief: #7a5220;
  --meta: #5c6675;

  /* 2.2 / 2.3 Typo */
  --f-display: "Archivo", sans-serif;
  --f-body: "Figtree", sans-serif;

  --t-display-xxl: clamp(3.4rem, 10.4vw, 9rem);
  /* trägt seit der Head-Korrektur (§0e-123) den Display-Moment nach §0b Nr. 4: ≥ 8rem */
  --t-zahl-display: clamp(3.2rem, 9.4vw, 8.4rem);
  --t-display-l: clamp(2.5rem, 5.6vw, 5rem);
  --t-h1-unter: clamp(2.1rem, 4.2vw, 3.8rem);
  --t-h2: clamp(1.75rem, 2.9vw, 2.75rem);
  --t-h3: clamp(1.2rem, 1.55vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.35vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-preis: clamp(1.3rem, 1.9vw, 1.75rem);
  --t-caption: 0.8125rem;

  /* 2.7 Motion */
  --ease-verdeck: cubic-bezier(0.12, 0.66, 0.14, 1);
  --dur-reveal: 620ms;
  --dur-text-versatz: 120ms;

  /* Device: die offene Ecke */
  --ecke-radius: 14px;
  --ecke-kontur: 1.5px;

  --rand: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1600px;
}

/* ===== Rollen-Ebene für Hell/Dunkel (GESETZ Kap. 1: Start DUNKEL, hell per Schalter) =====
   Die Palette oben benennt MATERIAL (tageslicht, halle, tinte). Ein Themenwechsel braucht
   aber ROLLEN (Grund, Text, Akzent) — sonst müsste "--tageslicht" im dunklen Thema dunkel
   sein und der Name lügt. Deshalb: Material bleibt unverändert, Rollen zeigen je Thema
   auf ein anderes Material.

   Bewusst NICHT umgeschaltet werden die dunklen Bühnen (Head, Fuß, .rechts-dunkel,
   .cta-dunkel, fab-anruf). Die stehen in beiden Themen auf --tiefblau mit heller Schrift —
   GESETZ Kap. 11: "Medien-Bühnen behalten helle Schrift". Ein Kunde, der auf Hell
   schaltet, bekommt also weiterhin dieselbe cinematische Bühne, nur die Lesestrecken
   dazwischen werden hell. */
:root {
  --grund: #0b1524;
  --grund-2: #111e31;
  --text: #eceef1;
  --text-leise: #9aa6b8;
  --akzent: #6e9dff;
  --akzent-warm: #d3a768;
  --flaeche-cta: #1b4fd1;
  --flaeche-cta-text: #eceef1;
  --kontur: rgba(236, 238, 241, 0.14);
  --leiste: rgba(11, 21, 36, 0.88);
  --leiste-kontur: rgba(236, 238, 241, 0.1);
  /* Aufgesetzte Flächen, die Text tragen: Bewertungskarte, Formularfeld, Marginalie.
     Diese standen fest auf #ffffff — im dunklen Thema wurde daraus heller Text auf
     weißem Grund. Sie brauchen eine eigene Rolle, nicht den Seitengrund. */
  --flaeche: #142235;
  --flaeche-kontur: rgba(236, 238, 241, 0.16);
  --flaeche-kontur-stark: rgba(236, 238, 241, 0.38);
  /* Bewertungssterne: das Marken-Gold trägt auf der dunklen Karte (7,24:1), auf der
     weißen Karte im hellen Thema nur 2,22:1. Deshalb je Thema ein eigener Ton. */
  --stern: #e8a020;
  /* Schlagschatten: dunkel auf dunkel ist unsichtbar — im dunklen Thema tiefer/satter. */
  --schatten-weich: 0 10px 26px rgba(0, 0, 0, 0.45);
  --schatten-kante: 0 18px 46px -22px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

[data-thema="hell"] {
  --grund: var(--tageslicht);
  --grund-2: var(--halle);
  --text: var(--tinte);
  --text-leise: var(--meta);
  --akzent: var(--kobalt);
  --akzent-warm: var(--laerche-tief);
  --flaeche-cta: var(--kobalt);
  --flaeche-cta-text: var(--tageslicht);
  --kontur: rgba(16, 23, 32, 0.14);
  --leiste: rgba(236, 238, 241, 0.86);
  --leiste-kontur: rgba(16, 23, 32, 0.08);
  --flaeche: #ffffff;
  --flaeche-kontur: rgba(16, 23, 32, 0.14);
  --flaeche-kontur-stark: rgba(16, 23, 32, 0.34);
  --stern: #a06a00;
  --schatten-weich: 0 10px 26px rgba(16, 23, 32, 0.08);
  --schatten-kante: 0 18px 46px -22px rgba(16, 23, 32, 0.45);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-reveal: 1ms;
    --dur-text-versatz: 0ms;
  }
}