/* Design-Tokens »Flanke« — Werte wörtlich aus artefakte/09-DESIGN-SYSTEM.md (Version 2) */
:root {
  /* Farben: Gummi & Beton, ein Akzent aus dem Logo */
  --gummi: #121415;
  --gummi-2: #1B1E20;
  --gummi-3: #2B3033;
  --praegung: #40474B;
  --grafit: #58595B;
  --stahl: #9EA3A6;
  --beton: #E7E5DF;
  --kreide: #F4F3EF;
  --weiss: #FFFFFF;
  --linie: #CFCCC4;
  --tarjan: #A6CE39;
  --tarjan-hell: #B8DC52;
  --tarjan-tief: #4D6614;
  --signal: #B3261E;

  /* Schrift: Archivo (variabel 62–125 % Breite) + Martian Mono, beide self-hosted, SIL OFL 1.1 */
  --font: 'Archivo', sans-serif;
  --mono: 'Martian Mono', monospace;

  --fs-flanke: clamp(2.3rem, 6.6vw, 5.8rem);
  --fs-h1: clamp(2.1rem, 5vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 4vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-klein: .9375rem;
  --fs-code: .8125rem;

  /* Raster & Abstände */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px; --s-160: 160px;
  --container: 1320px;
  --rand: clamp(20px, 5vw, 64px);
  --sek: clamp(64px, 9vw, 128px);
  --header-h: 64px;

  /* Bewegung: »Rollen, nicht hüpfen« */
  --roll: cubic-bezier(.22, 1, .36, 1);
  --t-ui: 180ms;
  --t-reveal: 700ms;

  /* Profilspur: Abdruck eines laufrichtungsgebundenen Profils */
  --spur-gruen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath d='M2 2h10l12 12-12 12H2l12-12z' fill='%23A6CE39'/%3E%3C/svg%3E");
  --spur-gummi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath d='M2 2h10l12 12-12 12H2l12-12z' fill='%23121415'/%3E%3C/svg%3E");
  --spur-praegung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath d='M2 2h10l12 12-12 12H2l12-12z' fill='%232B3033'/%3E%3C/svg%3E");
}
@media (min-width: 960px) {
  :root { --header-h: 80px; }
}