/* ==========================================================================
   BASE – Fonts, Design-Tokens, Reset, Utilities
   ==========================================================================
   Gestaltungsidee: «Live-Übertragung aus der Arena».
   Die Overlays verhalten sich wie ein TV-Sportgrafik-Paket über einem
   Stadion-Feed: Lower-Thirds unten links, Timing-Tower rechts, Telemetrie
   im HUD. Licht ist das Material – Text in Flutlicht-Weiss, Akzent in
   Sägemehl (Manege + Arena-Boden), Tally-Rot nur für «Live/Buchen».
   ========================================================================== */

/* --- Fonts (selbst gehostet, SIL Open Font License) ---------------------- */
@font-face {
  font-family: 'Big Shoulders';
  src: url('../assets/fonts/big-shoulders-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Farbe – Basis */
  --c-night: #070a10;   /* Nachthimmel / Nebel der Szene */
  --c-asphalt: #0e1117; /* Panel-Grund */
  --c-flood: #fff3e0;   /* Flutlicht-Weiss – Primärtext */
  --c-sawdust: #cfa56a; /* Sägemehl – Akzent */
  --c-tally: #e5231b;   /* Tally-Rot – nur Live/Buchen */
  --c-beam: #bfd6ff;    /* Beam-Blau – Fokus */

  /* Farbe – abgeleitet */
  --c-text: var(--c-flood);
  --c-text-2: rgb(255 243 224 / 0.74);
  --c-text-3: rgb(255 243 224 / 0.52);
  --c-line: rgb(255 243 224 / 0.12);
  --c-line-strong: rgb(255 243 224 / 0.26);
  --c-fill: rgb(255 243 224 / 0.07);
  --c-fill-hover: rgb(255 243 224 / 0.13);
  --c-panel: rgb(14 17 23 / 0.86);
  --c-sawdust-soft: rgb(207 165 106 / 0.16);

  /* Typografie */
  --f-display: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --f-text: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Klassische Skala: 12 · 14 · 16 · 18 · 21 · 24 · 36 · 48 */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-24: 1.5rem;
  --t-36: 2.25rem;
  --t-48: 3rem;
  --t-hero: min(clamp(3.75rem, 1.4rem + 7.4vw, 9.75rem), 16vh);

  /* Abstände */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Layout */
  --gutter: clamp(16px, 2.4vw, 36px);
  --topbar-h: 76px;
  --hud-h: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Form: Broadcast-Fase oben rechts */
  --cut: 16px;
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 480ms;

  /* Ebenen */
  --z-stage: 0;
  --z-hotspots: 10;
  --z-ui: 20;
  --z-chrome: 30;
  --z-loader: 100;
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

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

body {
  margin: 0;
  overflow: hidden; /* Dashboard: kein Seiten-Scroll, Panels scrollen intern */
  overscroll-behavior: none;
  background: var(--c-night);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--t-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

a {
  color: inherit;
}

::selection {
  background: var(--c-sawdust);
  color: var(--c-night);
}

:focus-visible {
  outline: 2px solid var(--c-beam);
  outline-offset: 3px;
}

/* --- Utilities ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: calc(var(--z-loader) + 1);
  padding: var(--s-2) var(--s-4);
  background: var(--c-flood);
  color: var(--c-night);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --- Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}