/* ============================================================
   TOKENS - die EINZIGE Datei mit Designentscheidungen.
   Befuellt aus dna.yaml (Style-Tile-Wahl C "heller" + Canvas-Auswahl,
   22.08.2026). Alles andere referenziert nur Variablen.
   ============================================================ */

:root {
  /* Farben - Kundenbranding (Logo-Farben, gesampelt 20.08.2026) */
  --farbe-flaeche: #FBFBF9;      /* Grundflaeche hell */
  --farbe-flaeche-alt: #F7F6F2;  /* Wechselflaeche: Off-White (Paul 26.08., dritte
                                    Iteration: kein Grau, kein Gelbstich) */
  --farbe-text: #141414;
  --farbe-text-gedimmt: color-mix(in srgb, var(--farbe-text) 62%, var(--farbe-flaeche));
  --farbe-akzent: #FFF200;       /* Logo-Gelb, der Zuendfunke */
  --farbe-auf-akzent: #141414;   /* schwarz auf gelb, Kontrast ~17:1 */
  --farbe-linie: color-mix(in srgb, var(--farbe-text) 18%, transparent);
  --farbe-akzent-tief: #E8B800;  /* abgedunkeltes Gelb: Link-Unterstreichung, Ziffern auf hell */

  /* Buehne: die EINE Dunkelflaeche (nur Hero) */
  --farbe-buehne: #1C1F22;
  --farbe-auf-buehne: #FFFFFF;
  --farbe-auf-buehne-gedimmt: #DDDDD8;

  /* Gewerk-Farben (Farbcodierung, Vollton-Kopfleisten in leistungen-uebersicht;
     Ausnahme zu anzahl-max, dokumentiert in dna.yaml -> komposition) */
  --farbe-gewerk-rot: #ED1C24;   /* Heizung und Gas */
  --farbe-gewerk-blau: #00B3F0;  /* Wasser und Sanitaer */
  --farbe-gewerk-gelb: #E8B800;  /* Solar - abgedunkeltes Gelb fuer Kontrast auf hell */

  /* Typografie - fonts.css laedt Archivo (variabel) + Barlow, selbst gehostet */
  --schrift-display: "Archivo", Arial, sans-serif;
  --schrift-text: "Barlow", Arial, sans-serif;
  --display-gewicht: 700;        /* base.css-Hook: Ueberschriften fett */
  --display-breite: 106%;        /* font-stretch der Ueberschriften (moderat expanded) */
  --skala: 1.25;                 /* aus dna.yaml */
  --text-basis: 1.125rem;
  --text-s: calc(var(--text-basis) / var(--skala));
  --text-m: var(--text-basis);
  --text-l: calc(var(--text-basis) * var(--skala));
  --text-xl: calc(var(--text-l) * var(--skala));
  --text-2xl: calc(var(--text-xl) * var(--skala));
  --text-3xl: calc(var(--text-2xl) * var(--skala));
  --text-display: calc(var(--text-3xl) * var(--skala));
  --zeilenhoehe-text: 1.55;
  --zeilenhoehe-eng: 1.1;

  /* Form - harte Kanten (Kochbuch Handwerk, "rough" aus der design-vorgabe) */
  --radius: 0px;
  --linie: 1px solid var(--farbe-linie);

  /* Oberflaechen-Register (dna.yaml -> oberflaeche):
     verlauf: akzent (Foto-Overlay der Buehne) · toenung: eine-dunkelflaeche
     (Buehne) + helle Wechselflaeche · Signatur-Strahl als Akzentkante.
     Schatten und Konturen bleiben aus - flach und robust. */
  --schatten-flach: none;
  --schatten-schwebend: none;
  --kontur: none;
  --verlauf-zonierung: none;
  --verlauf-buehne: linear-gradient(rgb(18 20 22 / 75%), rgb(18 20 22 / 65%)); /* Foto-Overlay Hero */
  --verlauf-akzent: none;
  --farbe-toenung: var(--farbe-flaeche-alt);
  --akzentkante: 8px solid var(--farbe-akzent);  /* gelbe Oberkante (person-vorstellung) */

  /* Signatur-Element: der Logo-Strahl (gelber Balken aus den Logo-Strahlen).
     Orte: vor dem Kicker, unter Sektions-H2, als Listenmarker. */
  --strahl-breite: 56px;
  --strahl-hoehe: 6px;
  --strahl-breite-klein: 34px;

  /* Layout */
  --container-max: 1200px;       /* aus dna.yaml: 1200 zentriert */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 2rem;
  --raum-4: 4rem;
  --raum-sektion: 6rem;          /* Dichte "locker"; Brief 26.08.: 80-104px Desktop */
  --textspalte: 65ch;
}