/* Gemeinsame Basis: Schriften, Variablen, Reset, von App UND Landing genutzte Regeln — generiert aus styles.css (1.10.2026), ab jetzt hier pflegen. */
/* ── SELF-HOSTED FONTS (Latin Subset, woff2) ────────────────────────────── */
/* Lokale .woff2 in /fonts/ — kein Google CDN, kein DSGVO-Issue, kein FOUT-Risk. */
/* Barlow Condensed — Headlines */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/barlow-condensed-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/barlow-condensed-400.woff2') format('woff2'); }
@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 Condensed'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/fonts/barlow-condensed-italic-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/fonts/barlow-condensed-900.woff2') format('woff2'); }
/* Barlow — Body */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/barlow-300.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'); }
/* IBM Plex Mono — Akzent / Mono */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
/* ── RESET + VARS ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg:        #0d0d0d;
  --surface:   #0d0d0d;
  --surface2:  #0f0f11;
  --border:    #27272e;  /* dezenter Hairline, aber über der Sichtbarkeitsschwelle (~1.3:1 zu --bg) */
  --border2:   #34343d;  /* stärkere Kante (Hover/aktive Container) */
  --accent:    #3d5af1;
  --red:       #dc2626;  /* Status: kritisch / überfällig — sattes Rot, Dark-Theme-tauglich */
  --amber:     #f59e0b;  /* Status: bald fällig / Warnung — warmes klares Amber */
  --green:     #16a34a;  /* Status: erledigt / OK / Achievement — sattes Grün */

  /* Kategorie-Farben (Cost-Breakdown Donut/Bars) — eine pro Aufgabentyp,
     bewusst NICHT die Status-Tokens red/amber/green. Blaue Tonalität für die
     „technischen" Typen (Reparatur/Service/Umbau) + zwei abgesetzte Töne für
     Pflege/Sonstiges. Sprit bleibt neutral grau. */
  --cat-service:   #b8d0f2;  /* hell — luftiges Pulverblau */
  --cat-repair:    #5577d5;  /* mittel — Patina-Blau (Reparatur) */
  --cat-mod:       #1e40af;  /* dunkel — sattes Marineblau (Umbau) */
  --cat-pflege:    #6fa3a0;  /* gedämpftes Petrol — Pflege */
  --cat-sonstiges: #9aa0ad;  /* Schiefergrau — Sonstiges */
  --cat-fuel:      #6e6e7a;

  --txt:       #efefef;
  --txt2:      #d8d8d8;
  --txt3:      #aeaeae;
  --mono:      'IBM Plex Mono', monospace;
  --cond:      'Barlow Condensed', sans-serif;
  --body:      'Barlow', sans-serif;
  --r:         3px;
  --shadow:    0 4px 24px rgba(0,0,0,0.5);

  /* ─── TYPE SCALE ──────────────────────────────────────────────────────────
     Einheitliche Token für Schriftgrößen quer durch die App. Wenn du eine
     Größe änderst willst → hier zentral. Mobile-Werte über @media unten.
     ROLLEN:
       --ts-hero      Page-Greeting, Vehicle-Card-Title (Cond, bold)
       --ts-title     Card-Title in Listen (Cond, bold) — el-title, dash-attn-title
       --ts-section   Section-Label (Mono caps bold) — MEINE FAHRZEUGE, etc.
       --ts-meta      Meta-/Kicker-Zeile (Mono caps) — vc-meta, dash-attn-label-row, el-meta
       --ts-kicker    Type-Badge (Mono caps bold, klein) — REPARATUR, UMBAU, SERVICE
       --ts-body      Notizen, Beschreibungen (Sans regular)
  */
  --ts-hero:    26px;
  --ts-title:   18px;
  --ts-section: 12px;
  --ts-meta:    11px;
  --ts-kicker:  11px;
  --ts-body:    14px;
}
/* Mobile-Adjustment für Hero (alles andere bleibt — Mobile soll lesbar bleiben). */
@media (max-width: 520px) {
  :root {
    --ts-hero: 22px;
  }
}
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}
/* Mobile-Tap-Highlight global aus — wir haben überall eigene :active-Animationen
   (scale, opacity, color), der Browser-Default-Overlay wäre nur Doppelung und
   wirkt mit seiner fixed-color/duration nicht editorial. */
* {
  -webkit-tap-highlight-color: transparent;
}
/* Accessibility: Keyboard-Tab-Navigation behält sichtbaren Focus-Ring.
   :focus-visible greift NUR bei Keyboard, nicht bei Tap/Mouse — clean. */
button, a, [role="button"], [tabindex]:not([tabindex="-1"]) {
  outline: none;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ── PAGE SYSTEM ────────────────────────────────────────────────────────── */
.page { display: none; min-height: 100vh; flex-direction: column; background: var(--bg); }
.page.active { display: flex; }