/* ==========================================================================
   NEW ADVERTISING 2026 — Design Tokens
   Einzige Quelle für Farben, Typo, Raster und Abstände.
   Alles andere CSS greift ausschließlich auf diese Variablen zu.
   ========================================================================== */

:root {
  /* --- Farben -----------------------------------------------------------
     Reduzierte Palette aus dem Designkonzept „Editorial Digital".
     Der Akzent wird bewusst sparsam eingesetzt: Links, Hover, Linien,
     aktive Zustände, Kennzahlen. Nie flächig.                            */
  --ink:            #111111;   /* Text, Flächen im Negativ            */
  --ink-2:          #333333;   /* Sekundärtext                        */
  --ink-3:          #5f5f5f;   /* Meta, Labels — abgedunkelt von #6b6b6b,
                                  weil es auf --paper-2 nur 4,76:1 erreichte
                                  und damit knapp über der AA-Schwelle lag  */
  --paper:          #ffffff;
  --paper-2:        #f2f2f2;   /* abgesetzte Sektionen                */
  --line:           #e2e2e2;
  --line-strong:    #111111;
  --accent:         #a6e22e;   /* aus dem Designkonzept               */
  --accent-ink:     #111111;   /* Text auf Akzentfläche               */
  --focus:          #0b5fff;   /* Fokusring: bewusst nicht der Akzent,
                                  damit er auf Grün sichtbar bleibt   */

  /* --- Typografie -------------------------------------------------------
     Die im Konzept genannten Schriften (Poppins, Inter) liegen NICHT im
     Bestand. Der Rebuild läuft deshalb auf einem System-Stack: null
     Requests, kein FOUT, kein Layoutsprung.

     WICHTIG — warum hier "NA Display"/"NA Text" und nicht "Poppins"/"Inter"
     steht: ein blanker Familienname greift auf das zu, was der Besucher
     zufällig installiert hat. Auf einem Testrechner mit "Poppins Light"
     (nur der leichte, hier schräg laufende Schnitt) kippte damit die ganze
     Seite in Kursiv — obwohl font-style: normal gilt. Die Gestaltung hing
     also an einer fremden Schriftinstallation.

     "NA Display"/"NA Text" sind private Namen: sie treffen garantiert keine
     installierte Schrift. Solange keine @font-face-Regel sie definiert,
     greift sauber der System-Stack. Zum Selfhosting die Dateien nach
     /assets/fonts/ legen und in base.css @font-face auf genau diese Namen
     deklarieren — dann übernehmen sie, ohne dass hier etwas zu ändern ist. */
  --font-display: "NA Display", "Segoe UI Variable Display", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "NA Text", "Segoe UI Variable Text", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Schreibschrift des Hero-Zitats: „Dry Brush" von Levi Szekeres, selbst
     gehostet und auf die Zeichen des Zitats reduziert (@font-face in base.css).
     Kein Fremdrequest, kein Google Fonts.
     „NA Script" ist bewusst ein privater Name — ein blanker Familienname
     griffe auf das zu, was der Besucher zufällig installiert hat.
     Die Systemschriften dahinter tragen nur, bis die Datei geladen ist.
     LIZENZ NOCH ZU KLÄREN: assets/fonts/LIZENZ-dry-brush.txt              */
  --font-script:  "NA Script", "Segoe Script", "Bradley Hand", "Brush Script MT",
                  "Snell Roundhand", cursive;

  /* Fluid type: skaliert zwischen 360px und 1320px Viewport */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.09rem);
  --step-1:  clamp(1.2rem,  1.1rem  + 0.5vw,  1.5rem);
  --step-2:  clamp(1.5rem,  1.3rem  + 1vw,    2.1rem);
  --step-3:  clamp(1.9rem,  1.5rem  + 1.9vw,  3rem);
  --step-4:  clamp(2.4rem,  1.7rem  + 3.4vw,  4.5rem);
  --step-5:  clamp(3rem,    1.8rem  + 6vw,    7rem);   /* Hero */

  --leading-tight: 1.04;
  --leading-head:  1.12;
  --leading-body:  1.65;
  --tracking-tight: -0.02em;
  --tracking-label:  0.14em;

  /* --- Raster & Maße ----------------------------------------------------
     8-Punkt-System, 12 Spalten, Inhaltsbreite 1320px (aus dem Konzept). */
  --measure:      68ch;        /* max. Zeilenlänge Fließtext */
  --container:    1320px;
  --container-narrow: 900px;
  --container-wide:   1560px;  /* Arbeitsproben, Logostrecke */
  --gutter:       clamp(1.25rem, 4vw, 3.5rem);
  --col-gap:      clamp(1.5rem, 2.5vw, 2.5rem);

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: clamp(4rem, 9vw, 9rem);   /* Sektionsabstand */

  --rule: 1px;
  --radius: 0;                      /* Editorial: keine Rundungen */

  /* --- Bewegung --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  0.28s;
  --dur-slow: 0.5s;

  --z-header: 100;
  --z-overlay: 200;
}

/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; --dur-slow: 0.001s; }
}