/* ============================================================
   SOLIDUM: Design Tokens (kanonische Quelle)
   Stand: 2026-07-31 · Kapitel-Referenzen: 03-farben.md, 04-typografie.md, 06-web-ui.md
   Konvention: Werte ohne Marker sind gesetzt/gemessen (captured),
   [abgeleitet] = von uns bestimmt, nicht aus einer Quelle gemessen.
   Kontrast-Angaben: WCAG 2.1, exakt berechnet (siehe 03-farben.md Matrix).
   ============================================================ */

/* ---------- Schrift: EINE Familie, self-hosted ----------
   Nohemi trägt das gesamte System. Hierarchie entsteht über
   Größe, Gewicht und Tracking, nie über eine zweite Familie. */
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Farben · Beige-Familie (Canvas-Schichtung) ----------
     Wärme entsteht durch eine Familie nah beieinanderliegender
     Off-Whites, nicht durch einen satten Ton. */
  --papier:        #FAF6F2;  /* Canvas, die EINE Seitenhintergrundfarbe (Arne, 31.07.): keine Sektion trägt einen eigenen Hintergrund-Tint */
  --papier-2:      #F2EEE7;  /* Sektions-Tint, ruhige Flächen */
  --papier-3:      #E8E3DA;  /* Hover heller Flächen, graue Bento-Karte */
  --milch:         #FFFFFF;  /* Karten, Inputs. Schwebt auf Papier */
  --linie:         #E6DFD4;  /* [abgeleitet] Haarlinien/Borders */

  /* ---------- Farben · Tinte & Dunkel ---------- */
  --tinte:         #1E1B16;  /* Primärtext: warm, 15,95:1 auf Papier (AAA) */
  --stahl:         #605C55;  /* Sekundärtext: 6,18:1 auf Papier, ab 14px */
  --werkbank:      #12110F;  /* NUR für die eine dunkle Bento-Karte und
                                dunkle Pill-Buttons. Keine Sektion ist dunkel. */
  --papier-auf-dunkel: #FAF6F2; /* Text auf Werkbank: 17,54:1 */

  /* ---------- Farben · Lime (der eine Akzent) ----------
     Flächen-Regel: Lime-Flächen tragen immer dunklen Text (Tinte 13,16:1);
     Weiß auf Lime (1,30:1) ist verboten. Genau 1 Lime-Primärfläche pro Viewport.
     Akzent-Wörter in großen Headlines dürfen --lime-text verwenden.
     Kleine Texte und Bedienelemente verwenden --lime-text-aa, damit
     WCAG AA für normalen Text erreicht wird. */
  --lime:          #B0F566;  /* Primärakzent-Fläche. Tinte darauf: 13,16:1 (AAA) */
  --lime-hover:    #A2EE52;  /* [abgeleitet] Hover. Tinte darauf: 12,17:1 */
  --lime-chip:     #E6FBCF;  /* [abgeleitet] heller Tint (Bento-Karte 1) */
  --lime-tief:     #223A12;  /* [abgeleitet] Text auf lime-chip (10,11:1) */
  --lime-dunkel:   #333D26;  /* [abgeleitet] dunkle Olivfläche (Bento-Karte):
                                Papier darauf 10,63:1, Lime darauf 8,77:1 */
  --lime-text:     #549114;  /* [abgeleitet] Display-Text, 3,59:1 auf Papier */
  --lime-text-aa:  #497D13;  /* [abgeleitet] kleiner Text, 4,62:1 auf Papier */

  --fehler:        #B3261E;  /* [abgeleitet] Formular-Fehlertext: 6,9:1 */

  /* ---------- Radius-System ---------- */
  --radius-s:      8px;      /* kleine Elemente */
  --radius-karte:  20px;     /* Karten, Accordion, Media */
  --radius-gross:  28px;     /* große Bento-Rechtecke */
  --radius-pill:   999px;    /* Buttons, Chips, Toggle, Stadion-Karten */
  /* Ausnahme: Die Beleg-Karte behält radius 0. Sie ist ein Dokument,
     kein UI-Element (siehe 06-web-ui.md §3.7). */

  /* ---------- Spacing (8er-Raster) ---------- */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;
  --sektion:       120px;    /* Vertikalabstand zwischen Sektionen (Desktop) */
  --sektion-m:     72px;     /* [abgeleitet] mobil */

  /* ---------- Layout ---------- */
  --maxw:          1440px;   /* Satzspiegel, breit wie das Vorbild */
  --rand:          24px;     /* Seitenrand mobil */
  --rand-d:        48px;     /* [abgeleitet] Seitenrand Desktop */

  /* ---------- Typografie ----------
     Signature: große Headlines in Regular (400) mit stark negativem
     Tracking und Zeilenhöhe ≤ 1.05. Hierarchie über Größe, nie über Fette.
     Kicker und Quellzeilen werden gesperrt gesetzt. Das ersetzt die
     frühere zweite (Mono-)Familie vollständig. */
  --font: "Nohemi", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:       clamp(42px, 6.6vw, 78px);  /* H1, LH 1.0 */
  --fs-h2:         clamp(32px, 4.8vw, 54px);  /* Sektions-H2, LH 1.04 */
  --fs-h3:         clamp(26px, 3.2vw, 38px);  /* Bento-Titel */
  --fs-h4:         20px;                      /* kleine Karten-Titel */
  --fs-zahl:       clamp(48px, 8vw, 96px);    /* Display-Kennzahlen, tabular-nums */
  --fs-lead:       clamp(17px, 2vw, 20px);    /* Lead-Absätze */
  --fs-body:       16px;                      /* Basis */
  --fs-s:          14px;                      /* Sekundäres, Trust-Zeile */
  --fs-meta:       12.5px;                    /* Kicker, Quellzeilen, Positionszeilen */

  --lh-body:       1.55;
  --track-hero:    -0.04em;   /* Headline-Signature */
  --track-h2:      -0.035em;
  --track-meta:    0.07em;    /* Kicker/Quellzeilen: gesperrt statt Mono-Familie */
  --fw-light:      300;
  --fw-regular:    400;       /* Standard, auch für Headlines */
  --fw-medium:     500;       /* Buttons, Karten-Titel, aktive Zustände */
  --fw-semibold:   600;       /* Logo-Leiste, Kennzahlen */

  /* ---------- Motion ---------- */
  --ease:          cubic-bezier(0.2, 0, 0, 1);
  --ease-weich:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover:       160ms;     /* Zustandswechsel */
  --t-wechsel:     320ms;     /* Toggle, Carousel, Accordion */
  --t-reveal:      700ms;     /* Scroll-Reveal der Bento-Karten */
  --marquee-dauer: 46s;       /* Logo-Leiste, linear, pausiert bei Hover */
}