/* ===========================================================================
   tokens.css — FröschlRacing (Bausatz-Marken-Schicht), Portal HELL.
   Wolfgang 05.10. abends: dunkles Portal zu unübersichtlich → Portal hell, Seitenleiste schwarz,
   öffentliche Buchung bleibt dunkel (dunkel.css, nur /buchen/). Ersetzt W-17 für das Portal.
   Marke bleibt: Logo-Grün #59C134, Squada One / Geist Mono, eckige Form (Radien 0–2 px).
   =========================================================================== */
/* Fließtext Barlow (Wolfgang 05.10.: besser lesbar als Geist Mono, passt zu Squada One; Website und Portal) */
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Squada One";src:url(/assets/fonts/squada-one-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --abstand-1:4px;  --abstand-2:8px;  --abstand-3:12px;
  --abstand-4:16px; --abstand-5:24px; --abstand-6:32px;
  --schrift-1:12px; --schrift-2:14px; --schrift-3:16px;
  --schrift-4:20px; --schrift-5:24px;
  --radius-karte:2px; --radius-knopf:0px; --radius-pill:2px;      /* eckig wie die Website */
  --dauer-1:100ms; --dauer-2:200ms; --dauer-3:300ms;
  --kurve:cubic-bezier(.2,.8,.2,1);
  --leiste-breite:250px;

  /* Grün: Fläche #59C134 (Knöpfe, Balken), Text auf Hell #2B6E1C (6,27:1 auf Weiß, gemessen 04.10.) */
  --marke:#59C134;
  --marke-dunkel:#2B6E1C;
  --marke-hell:#7fd85f;
  --marke-bg:#eef7ea;

  /* Seitenleiste schwarz (Wolfgang 05.10.) */
  --leiste:#101010;
  --leiste-text:#EDEDED;
  --leiste-mute:#9C9C9C;
  --leiste-aktiv:rgba(89,193,52,.18);
  --leiste-aktiv-linie:#59C134;
  --leiste-fokus:#59C134;

  /* Primärknopf grün mit dunkler Schrift (8,25:1) */
  --knopf-primaer:#59C134;
  --knopf-primaer-hover:#4caa2b;
  --knopf-primaer-text:#101010;

  /* Neutrale Flächen, leicht grün getönt */
  --tinte:#101010;   --text:#2a2d2a;   --text-2:#5b605b;  --text-3:#6b706b;
  --linie:#e1e5df;   --linie-2:#f0f2ee;
  --flaeche:#f4f5f2; --karte:#fff;

  --gruen:#1a7f3c; --gruen-bg:#eef7f0; --gruen-linie:#cfe6d5;
  --gelb:#a86a12;  --gelb-bg:#fbf7e8;  --gelb-linie:#e8d9a8;
  --rot:#c0392b;   --rot-bg:#fdeeec;   --rot-linie:#f2cec9;
  --blau:#305bab;  --blau-bg:#eaf0fb;

  --schatten-h:120 10% 15%;
  --schatten-1:0 1px 1px hsl(var(--schatten-h)/.04),0 2px 2px hsl(var(--schatten-h)/.04),0 4px 4px hsl(var(--schatten-h)/.04);
  --schatten-2:0 2px 2px hsl(var(--schatten-h)/.05),0 4px 4px hsl(var(--schatten-h)/.05),0 8px 8px hsl(var(--schatten-h)/.05),0 16px 16px hsl(var(--schatten-h)/.04);
  --schatten-3:0 4px 4px hsl(var(--schatten-h)/.06),0 8px 8px hsl(var(--schatten-h)/.06),0 16px 16px hsl(var(--schatten-h)/.06),0 32px 32px hsl(var(--schatten-h)/.05);

  --font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-marke:"Squada One","Barlow",sans-serif;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}