/* Innovatura — Design-Tokens, Variante „Druckbogen in Tiefblau (FINAL)“. DIE EINZIGE STELLE mit Farb-, Schrift-, Größen-, Abstands-, Linien- und Radius-Werten.
   Namen = VERTRAG aus neu/site/assets/tokens.css (Stand 2026-10-10 00:53; Schriftpfade relativ zu dieser Datei), plus drei Zusätze am Ende (--schrift-titel, --gewicht-titel, --mass-kernsatz).
   Herleitung, Kontraste, Quellen: neu/design/DESIGN.md. Größen: Utopia-Methode 360 → 1240 px, Basis 18 px × 1.27 → 20 px × 1.414; neu rechnen statt von Hand ändern. 
   VERTRAG — diese Namen bleiben stabil; ein neuer Token-Satz muss jeden davon setzen.
   Farben
     --farbe-grund             Seitengrund
     --farbe-flaeche-1         helle Fläche: „Wand", Karten, Bildhintergrund
     --farbe-flaeche-2         die eine dunkle Fläche (Meer-Band)
     --farbe-text              Haupttext, Linien mit Gewicht, dunkle Knöpfe
     --farbe-text-leise        Nebentext (Kontrast ≥ 4,5:1 auf grund und flaeche-1)
     --farbe-text-umgekehrt    Text auf --farbe-text
     --farbe-auf-dunkel        Text auf --farbe-flaeche-2
     --farbe-auf-dunkel-leise  Nebentext auf --farbe-flaeche-2
     --farbe-linie             Haarlinien, Bildränder
     --farbe-akzent            NUR der Haupt-Knopf („Projekt beschreiben")
     --farbe-akzent-hover      Haupt-Knopf beim Überfahren
     --farbe-auf-akzent        Text auf dem Haupt-Knopf (Kontrast ≥ 4,5:1)
     --farbe-schleier          sehr leichte Tönung (gewählte Kacheln im Brief)
     --farbe-schatten          Schatten im Brief
     --farbe-tiefschwarz       Hover dunkler Knöpfe
     --farbe-fehler, --farbe-erfolg   Formular-Rückmeldung
   Schriften
     --schrift-display         Überschriften, Navigation, Knöpfe, Angaben
     --schrift-text            Fließtext
     --schrift-mono            Datenausgabe im Brief
     --gewicht-normal, --gewicht-fett
   Größen (Grundschrift --stufe-2, nie < 17 px; --stufe-1 ≥ 17 px)
     --stufe-0 Bildunterschrift/Fuß · --stufe-1 kleine Zeilen, Knöpfe · --stufe-2 Fließtext · --stufe-3 Zwischentitel
     --stufe-4 Titel in Listen · --stufe-5 h2/Display-Satz · --stufe-6 h1 · --stufe-7 Kernsatz Startseite
     --stufe-zahl Zahl als Bild · --stufe-zitat kurzes Kundenzitat · --stufe-band Zitat im Meer-Band
   Zeilenhöhen   --zeile-titel · --zeile-eng · --zeile-mittel · --zeile-knapp · --zeile-text
   Laufweiten    --laufweite-titel · --laufweite-display · --laufweite-abschnitt · --laufweite-zahl
   Abstände      --rand (Seitenrand) · --abstand-00 · --abstand-0 · --abstand-1 … --abstand-5 (zwischen Abschnitten)
   Linien/Radien --linie-duenn · --linie-stark · --linie-fokus · --radius-knopf · --radius-flaeche
   Bewegung      --dauer-kurz · --dauer-mittel · --dauer-lang · --kurve-ein · --kurve-feder
   Maße          --mass-text · --mass-seite · --mass-inhalt · --hoehe-leiste
   Zusätze FINAL --schrift-titel · --gewicht-titel (h1, h2, Display-Sätze, Preise, Zahlen) · --mass-kernsatz (Breite Kernsatz)
*/

@font-face { font-family: "Archivo Condensed"; src: url("fonts/ArchivoCondensed-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Digits with a plain zero: Atkinson draws 0 with a slash ("890 €" was read as "899 €" in the fresh-eyes review) — only U+0030–0039 come from Hanken Grotesk (OFL) */
@font-face { font-family: "Ziffern"; src: url("fonts/HankenGrotesk-Ziffern-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Ziffern"; src: url("fonts/HankenGrotesk-Ziffern-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }

:root {
  /* Farben — Kontraste gemessen, siehe DESIGN.md */
  --farbe-grund: #F2F3F3;      /* oklch(0.963 0.001 197) · Seitengrund */
  --farbe-flaeche-1: #FFFFFF;  /* oklch(1.000 0.000 90) · die weiße Wand, auf der die Arbeit hängt */
  --farbe-flaeche-2: #283956;  /* oklch(0.344 0.056 261) · das eine Band */
  --farbe-text: #1A2333;       /* oklch(0.255 0.033 262) · Text, starke Linien, Fokus */
  --farbe-text-leise: #4A5363; /* oklch(0.441 0.029 262) · Nebentext */
  --farbe-text-umgekehrt: #FFFFFF; /* oklch(1.000 0.000 90) · Text auf --farbe-text */
  --farbe-auf-dunkel: #F2F3F3; /* oklch(0.963 0.001 197) · Text auf dem Band */
  --farbe-auf-dunkel-leise: #B9C3D4; /* oklch(0.815 0.026 261) · Nebentext auf dem Band */
  --farbe-linie: #C9CED3;      /* oklch(0.849 0.009 248) · Haarlinien */
  --farbe-akzent: #E84A00;     /* oklch(0.627 0.204 38) · NUR der Haupt-Knopf */
  --farbe-akzent-hover: #FF5A14; /* oklch(0.682 0.212 39) · Knopf Hover */
  --farbe-auf-akzent: #000000; /* oklch(0.000 0.000 0) · Schrift auf dem Knopf */
  --farbe-schleier: rgba(26, 35, 51, 0.06); /* Zustände */
  --farbe-schatten: rgba(26, 35, 51, 0.12); /* Schatten (sparsam) */
  --farbe-tiefschwarz: #000000;
  --farbe-fehler: #b3261e;
  --farbe-erfolg: #1f7a5a;

  /* Schriften */
  --schrift-display: "Ziffern", "Atkinson Hyperlegible Next", system-ui, sans-serif;   /* Navigation, Knöpfe, Angaben (und Überschriften, solange --schrift-titel nicht verdrahtet ist) */
  --schrift-text: "Ziffern", "Atkinson Hyperlegible Next", system-ui, sans-serif;   /* Fließtext */
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* nur Datenausgabe im Projekt-Brief */
  --gewicht-normal: 400;
  --gewicht-fett: 700;

  /* Schriftgrößen-Stufen (fluid, Utopia) */
  --stufe-0: 1rem;                                   /* 16 px: Bildunterschrift, Fuß, Legende */
  --stufe-1: 1.0625rem;                              /* 17 px: kleine Zeilen, Navigation, Knöpfe */
  --stufe-2: clamp(1.1250rem, 1.0739rem + 0.2273vw, 1.2500rem);  /* 18→20 px Fließtext */
  --stufe-3: clamp(1.4287rem, 1.2902rem + 0.6159vw, 1.7675rem);  /* 23→28 px Zwischentitel */
  --stufe-4: clamp(1.8145rem, 1.5344rem + 1.2450vw, 2.4992rem);  /* 29→40 px Titel in Listen */
  --stufe-5: clamp(2.3044rem, 1.8015rem + 2.2355vw, 3.5339rem);  /* 37→57 px Abschnitt (h2), Display-Satz — min ≥ 2 × Fließtext */
  --stufe-6: clamp(2.9266rem, 2.0797rem + 3.7643vw, 4.9970rem);  /* 47→80 px Seitentitel (h1) */
  --stufe-7: min(clamp(3.7168rem, 2.3468rem + 6.0889vw, 7.0657rem), 13vh);  /* 59→113 px Kernsatz der Startseite · höchstens 13 vh, damit Knopf auch bei 1280 × 680 im ersten Screen steht */
  --stufe-zahl: clamp(4.0000rem, 2.3636rem + 7.2727vw, 8.0000rem);  /* 64→128 px Zahl als Bild */
  --stufe-zitat: clamp(1.4287rem, 1.2902rem + 0.6159vw, 1.7675rem);  /* = Stufe 3 */
  --stufe-band: clamp(1.8145rem, 1.5344rem + 1.2450vw, 2.4992rem);  /* = Stufe 4 */

  /* Zeilenhöhen */
  --zeile-titel: 0.9;
  --zeile-eng: 0.95;
  --zeile-mittel: 1.25;
  --zeile-knapp: 1.4;
  --zeile-text: 1.55;

  /* Laufweiten */
  --laufweite-titel: -0.005em;
  --laufweite-display: -0.005em;
  --laufweite-abschnitt: 0em;
  --laufweite-zahl: -0.01em;

  /* Abstände */
  --rand: clamp(1rem, 4vw, 3rem);                    /* seitlicher Rand, mobil 16 px */
  --abstand-00: .2rem;
  --abstand-0: .35rem;
  --abstand-1: .5rem;
  --abstand-2: 1rem;
  --abstand-3: 1.6rem;
  --abstand-4: 2.4rem;
  --abstand-5: clamp(3.5rem, 8vw, 6rem);             /* zwischen Abschnitten */

  /* Linien, Radien */
  --linie-duenn: 1px;
  --linie-stark: 2px;
  --linie-fokus: 3px;
  --radius-knopf: 0;
  --radius-flaeche: 0;

  /* Bewegung (höchstens eine gleichzeitig, nur ohne reduce) */
  --dauer-kurz: 250ms;
  --dauer-mittel: 400ms;
  --dauer-lang: 600ms;
  --kurve-ein: cubic-bezier(0, 0, 0.2, 1);
  --kurve-feder: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Satzbreiten */
  --mass-text: 65ch;
  --mass-seite: min(72rem, 90vw);
  --mass-inhalt: min(48rem, 85vw);
  --hoehe-leiste: 3.5rem;

  /* ZUSÄTZE (nicht im Vertrag) — Überschriften-Stimme. Verdrahten in: .auftakt h1, .seitenkopf h1, h2, .display, .rahmen,
     .tafel dd, .paket__preis, .zahl b (font-family: var(--schrift-titel); font-weight: var(--gewicht-titel)).
     Ohne Verdrahtung greift --schrift-display — nichts bricht, nur die Titel-Stimme fehlt. */
  --schrift-titel: "Archivo Condensed", "Arial Narrow", sans-serif;
  --gewicht-titel: 900;
  --mass-kernsatz: 11ch;   /* .auftakt h1 max-width */
}