/* ============================================================
   HS-AUTOAUFBEREITUNG - Design-Tokens
   Dunkles Automotive-Premium · Schwarz / Weiß / Rot
   Basis: eigenes Designsystem des Betreibers (aus einem früheren,
   nie veröffentlichten eigenen Projekt), umgefärbt auf roten Akzent
   ============================================================ */

:root {
  /* ---- Flächen (Schwarz-Basis) ---- */
  --bg:        #0a0a0b;
  --bg-2:      #101012;
  --bg-3:      #15151a;
  --surface:   rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);

  /* ---- Schrift / Tinte (Weiß-Skala) ---- */
  --ink:       #f4f3f2;
  --ink-soft:  #c6c5c8;
  --ink-dim:   #8d8c92;
  --ink-faint: #5d5c63;

  /* ---- Marke: tiefes, mattes Rot (ein Akzent, gelockt) ---- */
  --accent:        #d12f2f;
  --accent-bright: #e85454;
  --accent-deep:   #8c1d1d;
  --accent-glow:   rgba(209, 47, 47, 0.38);
  --on-accent:     #ffffff;   /* Text auf roten Flächen → weiß */

  /* WhatsApp behält seine eigene Markenfarbe */
  --whatsapp:      #25d366;

  /* ---- Linien ---- */
  --line:        rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* ---- Radius (ein konsistentes System) ---- */
  --r-xl:   30px;
  --r-lg:   22px;
  --r-md:   16px;
  --r-sm:   11px;
  --r-pill: 999px;

  /* ---- Rhythmus ---- */
  --section: clamp(3.25rem, 6.5vw, 6rem);
  --gap:     clamp(1rem, 2.2vw, 1.7rem);
  --wrap:    1180px;

  /* ---- Motion (Emil-Kurven: kräftig, kein schwaches ease) ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);

  /* ============================================================
     Typografie – Archivo, eine Familie über die ganze Seite.
     Hierarchie entsteht über Gewicht + Größe + Laufweite.
     Details und Begründung siehe fonts.css.
     ============================================================ */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Laufweite: große Grade werden enger gesetzt, kleine weiter.
     Der Boden liegt bei -0.03em – enger berühren sich die Buchstaben. */
  --track-display: -0.030em;
  --track-section: -0.024em;
  --track-sub:     -0.014em;
  --track-label:    0.14em;   /* Kleine Versalien brauchen Luft */

  /* Modulare Skala, Verhältnis ≈ 1.28. Der Deckel liegt bewusst
     bei 5rem – darüber schreit die Seite, statt zu gestalten. */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.38rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.20vw, 2.55rem);
  --step-4:  clamp(2.30rem, 1.85rem + 2.20vw, 3.50rem);
  --step-5:  clamp(2.85rem, 2.00rem + 4.10vw, 5.00rem);

  /* Helle Schrift auf dunklem Grund wirkt leichter und braucht
     mehr Durchschuss als dieselbe Größe auf Weiß. */
  --lh-display: 1.03;
  --lh-heading: 1.12;
  --lh-body:    1.68;

  /* ============================================================
     Tiefe – geschichtete Schatten statt einer harten Kante.
     Ein Schatten aus mehreren Lagen mit unterschiedlicher
     Streuung liest sich als Licht; ein einzelner großer Wert
     liest sich als schwarzer Balken (genau das störte an den
     Ergebnis-Karten).
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30),
               0 4px 10px -4px rgba(0,0,0,0.40);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.24),
               0 10px 24px -12px rgba(0,0,0,0.55),
               0 24px 50px -30px rgba(0,0,0,0.60);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.22),
               0 16px 40px -20px rgba(0,0,0,0.55),
               0 44px 90px -50px rgba(0,0,0,0.70);

  /* Lichtkante oben: lässt Flächen wie lackiertes Blech wirken */
  --edge-light: inset 0 1px 0 rgba(255,255,255,0.07);

  /* ============================================================
     Scrims – die Verläufe über Fotos.
     Sechs Stopps mit weicher Progression statt zwei harter.
     Dadurch entsteht keine sichtbare Schattenkante mehr im Bild.
     ============================================================ */
  --scrim-soft:
    linear-gradient(to top,
      rgba(8,8,10,0.88) 0%,
      rgba(8,8,10,0.74) 14%,
      rgba(8,8,10,0.50) 30%,
      rgba(8,8,10,0.24) 47%,
      rgba(8,8,10,0.08) 64%,
      rgba(8,8,10,0.00) 82%);
  --scrim-strong:
    linear-gradient(to top,
      rgba(8,8,10,0.94) 0%,
      rgba(8,8,10,0.86) 16%,
      rgba(8,8,10,0.66) 33%,
      rgba(8,8,10,0.40) 50%,
      rgba(8,8,10,0.16) 68%,
      rgba(8,8,10,0.00) 88%);

  /* ---- Z-Index: benannte Ebenen, keine willkürlichen 9999 ---- */
  --z-base:     0;
  --z-raised:   1;
  --z-sticky:   100;
  --z-dock:     900;
  --z-overlay:  950;
  --z-nav:     1000;
  --z-grain:   2000;
}