/* ============================================================
   HERR SANIERUNGS-LP V2 — DESIGN-TOKENS („Industrielle Ehrlichkeit")
   Single Source of Truth. Keine Hardcodes in styles.css.
   Herkunft der Markenwerte: herr-fenster.de (Crawl 2026-07-02)
   ============================================================ */

:root {
  /* ---------- FARBE · Werkhalle (dunkle Flächen) ---------- */
  --hall-950: #131719;            /* tiefster Grund (Footer, Vignetten) */
  --hall-900: #191f22;            /* Basis dunkler Sektionen */
  --hall-800: #212930;            /* Kartenflächen auf dunkel */
  --hall-700: #2b3338;            /* Bestand-Anthrazit (RAL-7016-nah) */
  --hall-600: #3c454b;            /* Linien-Graphit, sek. Flächen */

  /* ---------- FARBE · Weiß (helle Flächen — klares Weiß, kein Beige) ---------- */
  --paper:      #ffffff;          /* Grundweiß (Auftragsbuch, Beleg) */
  --paper-2:    #f5f5f6;          /* neutrales helles Band */
  --paper-warm: #ffffff;          /* Sektionen 07–10 (Wärme kommt aus Bild & Akzent) */
  --dusk-veil:  #2a2018;          /* warmes Dämmerungs-Overlay (Formular) */

  /* ---------- FARBE · Marke ---------- */
  --wine-500: #a03247;            /* helleres Bordeaux (Linien auf dunkel) */
  --wine-600: #8b2738;            /* Marke, Stempelfarbe, CTAs */
  --wine-700: #701d2c;            /* Hover */
  --wine-800: #59131f;            /* gedrückt / dunkles Bordeaux */
  --wine-tint: rgba(139, 39, 56, .10);
  --wine-glow: rgba(160, 50, 71, .35);   /* Fortschrittsfaden-Schein */

  /* ---------- FARBE · Spark (exakt 1 Einsatzort: Rechner-Ergebnis) ---------- */
  --spark-500: #f98500;
  --spark-050: rgba(249, 133, 0, .12);

  /* ---------- FARBE · Text ---------- */
  --ink:        #1f2225;          /* Text auf Papier */
  --ink-soft:   #4a5055;          /* Sekundärtext auf Papier */
  --snow:       #f4f1ec;          /* Text auf Dunkel (warmes Weiß, ≥7:1 auf hall-900) */
  --snow-soft:  #c4c9cc;          /* Sekundärtext auf Dunkel (≥4.5:1) */
  --snow-dim:   #9aa1a6;          /* Bildvermerke auf Dunkel (nur ≥18px/Labels) */

  /* ---------- FARBE · Technische Zeichnung ---------- */
  --line-dark:  rgba(244, 241, 236, .16);   /* Hairlines auf Dunkel */
  --line-light: rgba(31, 34, 37, .18);      /* Hairlines auf Papier */
  --dot-dark:   rgba(244, 241, 236, .38);   /* punktierte Führungslinien */
  --dot-light:  rgba(31, 34, 37, .40);
  --tick:       var(--wine-600);            /* Maßstrich-Ticks */

  /* ---------- TYPO · Familien (lokal, assets/fonts/fonts.css) ---------- */
  --font-display: "Lato", "Lato Fallback", system-ui, sans-serif;
  --font-body:    "Roboto", "Roboto Fallback", system-ui, sans-serif;

  /* ---------- TYPO · Fluide Skala ---------- */
  --step--1: clamp(.82rem, .78rem + .18vw, .93rem);
  --step-0:  clamp(1.06rem, 1rem + .3vw, 1.13rem);    /* Body 17–18px */
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.75vw, 3rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  --step-5:  clamp(2.75rem, 2rem + 3.9vw, 5.1rem);    /* H1 */
  --step-6:  clamp(3.2rem, 2.2rem + 5.2vw, 6.4rem);   /* Werkszahlen */

  /* ---------- TYPO · Stempel-Label (3. Register) ---------- */
  --stamp-size: .72rem;                /* ~11.5px */
  --stamp-track: .09em;
  --stamp-weight: 500;                 /* Roboto Medium, Versalien via CSS */

  /* ---------- TYPO · Zeilen ---------- */
  --leading-tight: 1.05;               /* Display */
  --leading-head:  1.15;
  --leading-body:  1.65;

  /* ---------- RAUM ---------- */
  --space-1: .5rem;   /* 8 */
  --space-2: 1rem;    /* 16 */
  --space-3: 1.5rem;  /* 24 */
  --space-4: 2rem;    /* 32 */
  --space-5: 3rem;    /* 48 */
  --space-6: 4.5rem;  /* 72 */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8.75rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 76rem;          /* 1216px */
  --container-wide: 85rem;     /* 1360px */
  --measure: 62ch;

  /* ---------- FORM (bewusst kantig — technische Zeichnung) ---------- */
  --radius-1: 2px;             /* Standard: fast keine Rundung */
  --radius-2: 4px;             /* Buttons, Inputs */
  --radius-3: 8px;             /* Beleg-Karten */
  --radius-pill: 999px;        /* nur Stationspunkte/Badges */

  /* ---------- TIEFE (sparsam, warm getönt) ---------- */
  --shadow-card: 0 1px 2px rgba(19, 23, 25, .18), 0 12px 32px -12px rgba(19, 23, 25, .28);
  --shadow-beleg: 0 2px 6px rgba(19, 23, 25, .22), 0 24px 48px -18px rgba(19, 23, 25, .38);
  --shadow-cta: 0 10px 24px -10px rgba(139, 39, 56, .55);

  /* ---------- KORN (gegen Flatness auf Dunkel) ---------- */
  --grain-opacity: .05;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.6, 0, .2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 450ms;
  --dur-4: 700ms;
  --reveal-shift: 12px;

  /* ---------- Z-EBENEN ---------- */
  --z-skip: 100;
  --z-header: 60;
  --z-bottombar: 55;
  --z-hud: 20;

  /* ---------- KOMPONENTEN-KONSTANTEN ---------- */
  --header-h: 4rem;
  --touch-min: 48px;
  --scrolly-track: 350vh;      /* Pin-Höhe Werksreise */
  --frame-ratio: 16 / 9;
}