/* ============================================================
   ROTH INSTITUT · Design-Tokens v2
   Welt: „Messbild Führung", Farbregie nach CI-Broschüre.
   Grau trägt die Seite · Orange ist Nuance, nie Fläche ·
   Petrol als kühler Gegenpol (Perspektive B, Daten).
   Dunkelgrau bleibt erkennbar Grau — nie Schwarz.
   ============================================================ */
:root {
  /* ---- Grundflächen ---- */
  --weiss: #FFFFFF;
  --papier: #F7F6F4;          /* Seitengrund, minimal warm */
  --papier-2: #EFEEEB;        /* alternierende Sektion */

  /* ---- Grau-Skala (abgeleitet aus Broschüren-Grau #787877) ---- */
  --grau-100: #F4F4F3;
  --grau-200: #E4E4E2;
  --grau-300: #D0D0CE;        /* Linien hell */
  --grau-400: #B3B3B1;        /* Linien stark */
  --grau-500: #8C8C8B;
  --grau-600: #787877;        /* CI-Broschüre */
  --grau-700: #5C5C5B;        /* Sekundärtext, 6,7:1 auf Papier */
  --grau-800: #424241;
  --grau-900: #2E2E2C;        /* dunkle Flächen — Grau, nicht Schwarz */
  --grau-950: #1E1D1D;        /* CI-Broschüre, Fließtext */

  /* ---- Text ---- */
  --text: #1E1D1D;
  /* Sebastians Feedback (Folie 9): Fließtext wirkte "zu schmal"/zu hell.
     --text-2 von #5C5C5B auf #3F3F3E abgedunkelt (6,7:1 -> 9,8:1 auf Weiß).
     Kein reines Schwarz: #1E1D1D ist der CI-Ton, Schwarz flimmert auf hellen Flächen. */
  --text-2: #3F3F3E;
  --text-3: #5C5C5B;          /* alter Wert — für echte Beiwerk-Zeilen (Bildunterschriften, Meta) */
  --text-invers: #F7F6F4;
  --text-invers-2: #B3B3B1;

  /* ---- Akzent Orange: dezent, nie Fläche ---- */
  --orange: #FFBF00;          /* Signal: Linien, Punkte, einzelne Wörter (auf Grau-900: 8,2:1) */
  /* Luke 07.09.: Es gibt nur ein wahres Gelb (#FFBF00). Gold/Ocker sind nur noch Aliasse; Kleintext auf Weiß in Petrol. */
  --gold: var(--orange);
  --gold-text: var(--petrol-dunkel);
  --ocker: var(--petrol-dunkel);

  /* ---- Zweitfarbe Petrol: kühler Gegenpol ---- */
  --petrol: #2C6670;          /* Entscheidung Luke 07.09.: Akzentfarbe, 6,4:1 auf Weiß */
  --petrol-hell: #3B7C87;
  --petrol-tint: #E7EEEF;     /* sehr helle Fläche */
  --petrol-dunkel: #24565F;   /* Kleintext auf Gelb, 4,9:1 */

  /* ---- Linien ---- */
  --linie: var(--grau-300);
  --linie-stark: var(--grau-400);
  --linie-dunkel: #43433F;    /* auf Grau-900 */

  /* ---- Typografie: Manrope (modern, geometrisch-humanistisch) ---- */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-text: 'Manrope', system-ui, -apple-system, sans-serif;
  --display: clamp(2.75rem, 6vw, 5.25rem);
  --h1: clamp(2.25rem, 4.2vw, 3.5rem);
  --h2: clamp(1.6rem, 3.6vw, 3.375rem);
  --h3: 1.25rem;
  --body: 1.0625rem;
  --klein: 0.9375rem;
  --label: 0.75rem;

  /* ---- Raster ---- */
  --inhalt: 1320px;
  --rand: clamp(20px, 4vw, 48px);
  --sektion-y: clamp(88px, 9vw, 128px);

  /* ---- Abstände ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- Radien: dezent nach Sixt-Vorbild — Fläche wirkt, nicht die Ecke ---- */
  --r-klein: 4px;
  --r-karte: 8px;             /* Standardradius */
  --r-gross: 10px;
  --r-kachel: 12px;           /* große Bildkacheln */
  --r-sektion: 16px;
  --r-pill: 999px;            /* nur Buttons, Nav, Chips */

  /* ---- Tiefe ---- */
  --schatten-1: 0 1px 2px rgba(30,29,29,.04), 0 10px 28px -14px rgba(30,29,29,.16);
  --schatten-2: 0 2px 6px rgba(30,29,29,.06), 0 28px 56px -24px rgba(30,29,29,.24);
  --schatten-bild: 0 32px 64px -28px rgba(30,29,29,.38);
  --schatten-nav: 0 2px 8px rgba(30,29,29,.06), 0 16px 40px -20px rgba(30,29,29,.28);

  /* ---- Bewegung ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-schnell: 160ms;
  --t-normal: 240ms;
  --t-ruhig: 420ms;
  --t-zeichnen: 1200ms;
}