/* Koch Oldtimer – Design-Tokens
   Welt: Roadbook & Startnummer. Rot gehört nur Schildrand, Routenlinie und aktiven Zuständen. */

@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/ArchivoExpanded-900-digits.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+30-39; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Farbe */
  --paper: #f4f5f2;          /* Roadbook-Bogen */
  --plate: #ffffff;          /* Emailschild */
  --on-ink: #ffffff;         /* Text auf Schwarz und Rot */
  --on-ink-2: #dcddd9;       /* Sekundärtext auf Schwarz, 14.6:1 */
  --rivet: #d3d5d0;          /* Nietenkopf */
  --rivet-rim: #8d908b;      /* Nietenrand */
  --ink: #141414;            /* Druckschwarz */
  --ink-2: #44474a;          /* Sekundärtext, 8.9:1 auf --paper */
  --hair: #c8cac5;           /* Haarlinien, Raster */
  --red: #a3141b;            /* Schildrand, Route, aktiv – 7.4:1 auf Weiss */
  --asphalt: #232527;        /* Ziel-Block */
  --asphalt-2: #2f3235;
  --on-asphalt: #ecede9;     /* 13.9:1 auf --asphalt */
  --on-asphalt-2: #b5b8b3;   /* 8.4:1 auf --asphalt */
  --focus: var(--red);
  --focus-on-dark: #ffffff;
  --scrim: rgb(20 20 20 / 0.94);   /* Lightbox-Hintergrund */
  --google-star: #fbbc04;     /* nur Bewertungs-Schild: Google-Sterne */
  --google-star-edge: #b07c00;

  /* Schrift */
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
  --font-numerals: "Archivo Expanded", "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Typo-Skala (fluid, 375 → 1440) */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.625rem, 1.44rem + 0.8vw, 2.25rem);
  --step-3: clamp(2.125rem, 1.75rem + 1.6vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --step-plate: min(clamp(5rem, 3.6rem + 6vw, 9rem), 22vw);

  --lh-tight: 0.95;
  --lh-head: 1.05;
  --lh-body: 1.55;
  --track-label: 0.08em;
  --measure: 62ch;

  /* Abstand (4er-Raster) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --gutter: min(clamp(1rem, 0.6rem + 1.8vw, 3rem), 4.5vw);  /* bei grosser Systemschrift nicht breiter */
  --stage-gap: clamp(4.5rem, 3rem + 6vw, 9rem);       /* neue Etappe, neues Thema */
  --stage-gap-near: clamp(3rem, 2.4rem + 1.8vw, 4rem); /* Fortsetzung derselben Strecke */

  /* Roadbook-Randspalte */
  --rail: min(clamp(3.25rem, 2.6rem + 2.6vw, 5.5rem), 14vw);
  --tulip: min(clamp(2.5rem, 2.2rem + 1.2vw, 3.5rem), 11vw);
  --route: 3px;
  --hover-mark: 4px;         /* roter Balken unter Leistenfeldern */

  /* Radien */
  --r-plate: clamp(0.875rem, 0.6rem + 1vw, 1.375rem);
  --r-control: 0;
  --rim: clamp(0.5rem, 0.3rem + 0.8vw, 0.875rem);

  /* Tiefe */
  --shadow-plate: 0 1px 0 rgb(20 20 20 / 0.06), 0 22px 40px -22px rgb(20 20 20 / 0.55);
  --shadow-photo: 0 18px 36px -24px rgb(20 20 20 / 0.6);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  --header-h: 3.5rem;
  --max: 84rem;
}

@media (min-width: 60em) {
  :root { --header-h: 4rem; }
}