/* LoopFest Franklin 2026 — Design-Tokens
   Einzige Quelle für Farbe, Radius, Schrift und Trefferflächen.
   Werte übernommen aus dem Design-Dokument (Abschnitt 04 — Palette). */

:root {
  /* Asphalt — Kopfzeilen, Navigation, Seitenleiste */
  --lf-asphalt: #16181B;
  --lf-asphalt-2: #23272C;
  --lf-asphalt-3: #32373D;

  /* Beton — Flächen der Besucher-App */
  --lf-beton: #F3F0E8;
  --lf-beton-2: #E6E1D4;
  --lf-beton-3: #D6D0BE;

  --lf-ink: #14161A;
  --lf-ink-60: #5A6067;

  /* Signal — der Loop. Aktiver Zustand, Primäraktion, Zeitschiene. */
  --lf-signal: #FF5C1A;
  --lf-signal-dark: #C93F06;
  --lf-signal-soft: #FFE3D5;

  --lf-gruen: #1F7A5C;
  --lf-blau: #2C5FD1;
  --lf-warn: #E4B200;
  --lf-rot: #C4291C;

  /* Kategoriefarben — steuern Marker, Gruppenkopf und Detailkopfzeile */
  --lf-cat-essen: #E4572E;
  --lf-cat-suess: #B5476B;
  --lf-cat-getraenke: #B87A08;
  --lf-cat-handwerk: #2F7D4F;
  --lf-cat-kinder: #0E7F96;
  --lf-cat-verein: #4A5FA5;
  --lf-cat-musik: #6C4BD1;

  /* Kartenfarben.
     Die Karte ist das ruhigste Element auf dem Schirm — sie muss es sein, damit
     die Kategoriefarben der Marker das Lauteste bleiben. Deshalb keine bunte
     Standardkarte, sondern dieselbe Beton-Familie wie der Rest der App.
     js/map-style.js liest diese Werte aus, sie stehen nirgends doppelt. */
  --lf-map-ground: #E7E2D5;
  --lf-map-green: #DCE2CB;
  --lf-map-water: #BFD2DA;
  --lf-map-building: #D8D2C0;
  --lf-map-building-line: #C6BFA9;
  --lf-map-road: #F8F6F1;
  --lf-map-road-minor: #EFEBE0;
  /* Fußwege dunkler als Straßen: sie liegen meist auf Grün, und dort geht eine
     helle Linie unter. Auf dem Franklin-Gelände ist der Loop ein Fußweg — er
     muss zu sehen sein, weil sich Besucher daran orientieren. */
  --lf-map-path: #B9B19A;
  --lf-map-rail: #CFC9B8;
  --lf-map-label: #5A6067;
  --lf-map-label-halo: #F3F0E8;
  /* Hausnummern treten hinter Straßennamen zurück: sie sind der letzte Schritt
     beim Suchen, nicht der erste. */
  --lf-map-housenumber: #8C8574;

  /* Statusflächen */
  --lf-ok-bg: #E4F3EC;
  --lf-ok-fg: #14603F;
  --lf-off-bg: #EAE6DA;
  --lf-off-fg: #6B6659;
  --lf-warn-bg: #FFEFD9;
  --lf-warn-fg: #8A5A00;
  --lf-note-bg: #FFF4E8;
  --lf-note-border: #F0D6B8;

  --lf-r-s: 8px;
  --lf-r-m: 14px;
  --lf-r-l: 22px;
  --lf-r-full: 999px;

  /* Mindesttrefferfläche — Abschnitt 03, „Daumen zuerst" */
  --lf-tap: 48px;

  --lf-font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --lf-font-text: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Der Loop als Linie: eine Strichbreite für Karte, Tab, Zeitschiene, Trenner. */
  --lf-loop-w: 6px;
}

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

html { color-scheme: light; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--lf-font-text);
  font-size: 17px;
  color: var(--lf-ink);
  background: var(--lf-beton);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--lf-signal-dark); text-decoration: none; }
a:hover { color: var(--lf-signal); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

/* Alle Icons sind Strichzeichnungen und tragen die Farbe ihres Kontexts.
   Einzelne Icons (WC, P) setzen fill/stroke selbst und überschreiben das. */
.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

input, select, textarea {
  font-family: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--lf-signal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Auf Asphalt braucht der Fokusring eine hellere Farbe, sonst verschwindet er. */
.on-asphalt :focus-visible { outline-color: #FFB48C; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 8px; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.tnum { font-variant-numeric: tabular-nums; }

/* Geländeplan (siteplan.js) — von Besucher-App und Admin-Portal gemeinsam
   benutzt, deshalb hier und nicht in einer der beiden Oberflächen. Der Plan
   füllt seinen Rahmen vollständig aus; Marker und Pin sitzen in Prozent
   desselben Rahmens und stehen dadurch über ihrem Ort. */
.plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Nur für Screenreader — Sprungmarken und Statusmeldungen. */
.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;
}

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