/* ==========================================================================
   TAKT — Design-DNA · tokens.css
   Werkstoffe der Netzplan-Welt: Farben, Linienfarben, Typo, Easing, Reset.
   Wird von landing.css UND app.css geladen — keine Seitenstile hier.
   ========================================================================== */

:root {
  /* Werkstoffe */
  --papier:      #f2f3ee;             /* Netzplan-Papier — Seitengrund */
  --papier-2:    #e9ebe3;             /* zweite Fläche (Karten-Zonen, Wochenende) */
  --tinte:       #14181f;             /* Verkehrsschild-Anthrazit — Text, Linienraster */
  --tinte-70:    rgba(20, 24, 31, .70);  /* Sekundärtext */
  --tinte-45:    rgba(20, 24, 31, .45);  /* gedämpfte Labels */
  --linie-stark: rgba(20, 24, 31, .34);  /* starke Haarlinie */
  --linie:       rgba(20, 24, 31, .16);  /* Standard-Haarlinie */
  --signal:      #ffcd00;             /* Leitgelb — RATIONIERT (Stellenliste in brief.md) */

  /* Status (reserviert, NIE dekorativ) */
  --ok:      #1a7f37;                 /* Abgefahren / verbunden */
  --achtung: #c8321e;                 /* überfällig / Fehler — NUR Status */

  /* Die 8 Linienfarben (feste Reihenfolge, validiert — NIE ändern) */
  --l1: #1f6fd6;
  --l2: #d26400;
  --l3: #0093a8;
  --l4: #b02418;
  --l5: #178f4e;
  --l6: #d63384;
  --l7: #9a5615;
  --l8: #7a4bd0;

  /* Form & Motion */
  --r: 10px;                                      /* Karten/Buttons; Badges = 999px */
  --ease:      cubic-bezier(.25, .9, .25, 1);     /* Haus-Easing */
  --ease-dock: cubic-bezier(.3, 1.45, .4, 1);     /* Overshoot — NUR taktile Quittungen */
}

/* --------------------------------------------------------------------------
   Fonts (lokal, WOFF2 latin subset, DSGVO)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plexmono-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Basis-Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Typo-Utilities (Rollen aus der Produktwelt)
   -------------------------------------------------------------------------- */

/* Das Bahnsteigschild: Display/Headlines */
.display {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: .95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Die Abfahrtstafel: Zeiten, Nummern, Daten */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Kicker: „LINIE S12 · SAISONVERKEHR" */
.kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .22em;
}

/* --------------------------------------------------------------------------
   Selektion & Fokus
   -------------------------------------------------------------------------- */

::selection {
  background: var(--signal);
  color: var(--tinte);
}

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion (Pflicht) — Netzplan zeigt den fertigen Zustand,
   das Zuglicht steht. JS prüft die Query zusätzlich selbst.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}