/* Erzeugt aus css/tokens.css mit node marketing/tools/build-site.mjs. Hier nicht ändern. */
/* Fore Friends · Design-Tokens
   Erzeugt aus design/tokens.json mit `npm run tokens`. Nicht von Hand ändern:
   Werte in design/tokens.json anpassen und das Skript erneut ausführen. */

:root {
    /* Farben */
    --bg: #0a0a0a; /* Grund: Seiten, Reiterleiste, Statusleisten-Streifen, Vollbild-Fenster, Startfarbe der iOS-Hülle. */
    --surface: #111111; /* Boards, Listen, Gruppen, Kacheln, Akkordeon, Seitenmenü, Export-Vorschau. */
    --raised: #141414; /* Popups, Sheets von unten, Onboarding-Karte. */
    --field: #161616; /* Eingabefelder, Zahlen-Kacheln (Statistik), Teilen-Knopf, Linkbox, Plus-HCP-Knopf. */
    --control: #1b1b1b; /* Knöpfe, Chips, runde Schließen-Knöpfe, Icon-Kacheln im Menü, Toasts, gedrückte Menüzeile. */
    --control-down: #262626; /* Gedrückt: Standard-Knopf, runder Knopf, Team-Chip; Spur von Fortschrittsbalken (Onboarding, Live-Duell). */
    --line: #1f1f1f; /* Trenner in einer Fläche: Spaltenkopf, Gruppen-Trenner, Sonderwertungen, Fensterfuß, Runden-Matrix, Stepper-Grund. */
    --hairline: rgba(255, 255, 255, 0.04); /* Zeilentrenner in Boards (Auswertung, Scorekarte), gedrückte Listenzeile. */
    --hairline-item: rgba(255, 255, 255, 0.06); /* Trenner zwischen Listeneinträgen (.ff-item). */
    --border: #232323; /* Kante von Boards, Listen, Gruppen, Kacheln, Popups, Sheets, Switch, Statistik-Kacheln; Grundlinie unter den Reitern. */
    --border-strong: #2a2a2a; /* Kante von Bedienelementen: Knöpfe, Felder, Chips, runde Knöpfe, Toasts, Stepper, Turnierkarten. */
    --border-check: #3a3a3a; /* Helle Kante: Schalter aus, leerer Auswahlkreis, Onboarding-Kreis, Griff am Sheet, Scrollbalken. */
    --text-strong: #ffffff; /* Turniername, Titel, Ergebnisse, Text auf Primär-Füllung. Auf allen Flächen. */
    --text: #f5f5f5; /* Namen, Zeilentitel, Gruppentitel, Knopftext, Seitenmenü auf surface und raised. */
    --text-2: #d4d4d4; /* Zahlen: Rundenwerte, HCP, Chips, Matrix-Werte, Hinweistext auf Gold-Hinweis. */
    --text-prose: #b5b5b5; /* Fließtext in Fenstern, Dialogen, Hilfe und Versionshinweisen auf bg, surface und raised. */
    --text-3: #a3a3a3; /* Beschreibungen, Feldbeschriftung, Teammitglieder, Notiztext, inaktives Switch-Segment auf surface. */
    --text-muted: #8a8a8a; /* Meta, Spaltenköpfe, Unterzeilen, inaktive Reiter, Labels, leise Hinweise („Laden …“, Rechtliches). 5,5:1 auf surface. */
    --icon-quiet: #6b6b6b; /* Lupe im Suchfeld, Akkordeon-Pfeil, Pfeil der Startkacheln, inaktives Plus-HCP. */
    --text-faint: #5a5a5a; /* Platzhalter, Pfeile, gestrichene Runden, Par-Zeile der Matrix. Nie für Lesetext. */
    --text-placeholder: #4a4a4a; /* Platzhalter im Ergebnisfeld, offene Runde „–“, Listenpfeil, Meta-Punkt. */
    --primary-50: 240 249 255; /* Tailwind sky-50 (--primary-50 in css/styles.css). */
    --primary-100: 224 242 254; /* Tailwind sky-100; als Farbe über info-title. */
    --primary-200: 186 230 253; /* Tailwind sky-200; als Farbe über info-text. */
    --primary-300: 125 211 252; /* Text auf blauer Tönung: Tint-Knopf, Abzeichen, Demo-Pille, Fokusring des Schalters (#7dd3fc). */
    --primary-400:  56 189 248; /* Der Akzent (#38bdf8): Reiter-Strich, Links, Stableford, Fortschritt, Icons in Kacheln. */
    --primary-500:  14 165 233; /* Fokus und An-Zustand (#0ea5e9): Feldrand, Schalter an, Haken, gewählter Chip. */
    --primary-600:   2 132 199; /* Tailwind sky-600. */
    --primary-700:   3 105 161; /* Tailwind sky-700; als Farbe über demo-dot. */
    --primary-800:   7  89 133; /* Tailwind sky-800. */
    --primary-900:  12  74 110; /* Tailwind sky-900. */
    --accent: rgb(var(--primary-400)); /* Kurzname für den Akzent. Text, Icons und Striche auf bg, surface, raised (8,8:1 auf surface). */
    --accent-strong: rgb(var(--primary-500)); /* Kurzname für Fokus und An-Zustand. */
    --accent-soft: rgb(var(--primary-300)); /* Kurzname für Text auf blauer Tönung. */
    --info-text: rgb(var(--primary-200)); /* Text im Info-Hinweis, Pille, Einladungs-Abzeichen. */
    --info-title: rgb(var(--primary-100)); /* Titel und Fettes im Info-Hinweis. */
    --demo-dot: rgb(var(--primary-700)); /* Punkt in der Demo-Pille. */
    --button-primary: #0279bb; /* Füllung des Hauptknopfs, aktives Switch-Segment, Akkordeon-Nummer, Onboarding-Pille. Weiß darauf 4,7:1. */
    --button-primary-down: #026aa4; /* Hauptknopf gedrückt. */
    --button-primary-edge: #0a8fd6; /* Kante des Hauptknopfs und des aktiven Plus-HCP. */
    --accent-tint: rgba(14, 165, 233, 0.12); /* Blaue Tönung: Icon-Kacheln, Kachel-Icons, Abzeichen, Pille, Tint-Knopf, Ergebnisfeld mit Fokus. */
    --accent-tint-strong: rgba(14, 165, 233, 0.16); /* Stärkere blaue Tönung: Tint-Knopf gedrückt, Ring um den aktiven Punkt, Einladungs-Abzeichen, Icon im Tipp. */
    --accent-wash: rgba(14, 165, 233, 0.08); /* Leichteste blaue Tönung: Info-Hinweis; gedrückt bei Geister-Knopf und „Spieler hinzufügen“. */
    --accent-edge: rgba(56, 189, 248, 0.3); /* Blaue Kante: Tint-Knopf, Versions-Marke, Pille, Info-Hinweis, Icon in „Das ist neu“. */
    --accent-edge-strong: rgba(56, 189, 248, 0.38); /* Kräftige blaue Kante: eigene Version, Einladungs-Abzeichen, Tipp-Karte. */
    --focus-glow: rgba(14, 165, 233, 0.3); /* 3px-Schein um ein fokussiertes Feld. */
    --ok: #34d399; /* Fertig: Runde komplett, Platz gewonnen ▲, Toast „Gespeichert“, Fortschritt der Turnierkarte. */
    --ok-text: #6ee7b7; /* Text im grünen Abzeichen auf ok-tint. */
    --ok-soft: #a7f3d0; /* Text im Erfolgs-Hinweis, Label der fertigen Runde (90 %). */
    --ok-tint: rgba(6, 78, 59, 0.5); /* Grund des grünen Abzeichens. */
    --warn: #fbbf24; /* Achtung: Pro-HCP, fehlendes Handicap, offenes Team, Platz-Warnung. */
    --warn-text: #fcd34d; /* Text im Pro-Abzeichen und Warn-Knopf auf warn-tint. */
    --warn-soft: #fde68a; /* Text im Warn-Hinweis und in der Sieger-Zeile. */
    --warn-title: #fef3c7; /* Titel und Fettes im Warn-Hinweis. */
    --warn-tint: rgba(120, 53, 15, 0.45); /* Grund von Pro-Abzeichen und Pro-Rang (Warn-Knopf 0.3, Warn-Hinweis 0.22). */
    --danger: #fb7185; /* Vorsicht: Platz verloren ▼, offline, Fehler-Toast, Geister-Knopf Löschen. */
    --danger-text: #fda4af; /* Text im Löschen-Knopf, „Turnier beenden“, Fehlermeldungen auf danger-tint. */
    --danger-tint: rgba(136, 19, 55, 0.22); /* Grund von Löschen-Knopf und „Turnier beenden“. */
    --danger-edge: rgba(251, 113, 133, 0.4); /* Kante von Löschen-Knopf und „Turnier beenden“. */
    --danger-solid: #be123c; /* Gefüllter Knopf für die endgültige Bestätigung (Dialog). Weiß darauf 6,3:1. */
    --danger-solid-edge: #e11d48; /* Kante des gefüllten Löschen-Knopfs. */
    --invalid: rgb(244, 63, 94); /* Ergebnis außerhalb des gültigen Bereichs (Grund mit 12 %, Ring rgba(251,113,133,.7)). */
    --rank-up: #22c55e; /* Kurzes Aufleuchten, wenn ein Spieler Plätze gewinnt (rankUp). */
    --rank-down: #ef4444; /* Kurzes Aufleuchten, wenn ein Spieler Plätze verliert (rankDown). */
    --gold: #facc15; /* Sieger: Pokal, Label der Sieger-Kachel, Gewinner im Archiv, Hinweis „Alle Ergebnisse sind da“. */
    --medal-1-from: #fde047; /* Platz 1, Verlauf 135° von hier nach medal-1-to. Auch Gold-Knopf. */
    --medal-1-to: #ca8a04; /* Platz 1, Ende des Verlaufs. */
    --on-medal-1: #1c1400; /* Ziffer auf Platz 1 und Text im Gold-Knopf. */
    --medal-2-from: #f5f5f5; /* Platz 2, Verlauf 135° nach medal-2-to. */
    --medal-2-to: #9ca3af; /* Platz 2, Ende des Verlaufs. */
    --on-medal-2: #171717; /* Ziffer auf Platz 2. */
    --medal-3-from: #fdba74; /* Platz 3, Verlauf 135° nach medal-3-to. */
    --medal-3-to: #c2410c; /* Platz 3, Ende des Verlaufs. */
    --on-medal-3: #1c0d00; /* Ziffer auf Platz 3. */
    --row-1: rgba(250, 204, 21, 0.14); /* Zeile Platz 1: Verlauf 90° von hier nach rgba(250,204,21,.02). */
    --row-2: rgba(229, 229, 229, 0.08); /* Zeile Platz 2: Verlauf 90° nach transparent. */
    --row-3: rgba(251, 146, 60, 0.1); /* Zeile Platz 3: Verlauf 90° nach transparent. */
    --avatar-to: #10b981; /* Avatar: Verlauf 135° von accent-strong nach hier. */
    --glass: rgba(255, 255, 255, 0.08); /* Runder Knopf auf dem Kopfbild (Menü). */
    --glass-edge: rgba(255, 255, 255, 0.14); /* Kante des runden Knopfs auf dem Foto; Grund, wenn gedrückt. */
    --glass-on: rgba(255, 255, 255, 0.13); /* Gewählte Runde in der Rundenwahl. */
    --glass-on-edge: rgba(255, 255, 255, 0.34); /* Kante der gewählten Runde. */
    --glass-track: rgba(255, 255, 255, 0.16); /* Leere Spur der Fortschrittsbalken auf dem Foto. */
    --on-photo: rgba(255, 255, 255, 0.84); /* Platzname und Meta auf dem Kopfbild. */
    --on-photo-muted: rgba(255, 255, 255, 0.62); /* Runden-Labels und Icons auf dem Kopfbild. */
    --photo-fade: rgba(10, 10, 10, 0.92); /* Unteres Ende des dunklen Verlaufs über dem Kopfbild (oben .25, Mitte .45). */
    --photo-tint: rgba(17, 24, 39, 0.7); /* Linke Seite des blaugrauen Seitenverlaufs über dem Kopfbild (rechts .15). */
    --scrim: rgba(0, 0, 0, 0.6); /* Abdunklung hinter Sheets; Popups 0.65, Vollbild 0.5 mit 4px Unschärfe. */
    --scrim-menu: rgba(10, 10, 12, 0.45); /* Abdunklung hinter dem Seitenmenü, mit 6px Unschärfe. */
    --signin-bg: #ffffff; /* Anmeldeknöpfe (Apple, Google) auf dem Login. */
    --signin-text: #1f1f1f; /* Text der Anmeldeknöpfe. */
    --invite-bubble: #1d3b2a; /* Vorschau der Einladungsnachricht (WhatsApp-Grün), Text #e7f5ec. */
    --team-blau: #3b82f6; /* Teamfarbe Blau (TEAM_COLORS, js/state.js). Nur als Punkt neben dem Teamnamen. */
    --team-rot: #ef4444; /* Teamfarbe Rot. */
    --team-gruen: #22c55e; /* Teamfarbe Grün. */
    --team-gelb: #eab308; /* Teamfarbe Gelb. */
    --team-lila: #a855f7; /* Teamfarbe Lila. */
    --team-orange: #f97316; /* Teamfarbe Orange. */
    --team-tuerkis: #06b6d4; /* Teamfarbe Türkis. */
    --team-pink: #ec4899; /* Teamfarbe Pink. */

    /* Schriften */
    --font-display: "Bebas Neue", sans-serif;
    --font-text: "Inter", sans-serif;

    /* Schriftgrößen */
    --fs-9: 0.63rem; /* Kleinste Labels: Statistik-Label, Pro-Rang, Par-Zeile der Matrix. */
    --fs-10: 0.69rem; /* Spaltenköpfe, Board-Tag, Abzeichen, Versions-Marke, Labels in Großbuchstaben. */
    --fs-11: 0.76rem; /* Meta und Unterzeilen, Rundenlabels, Abschnitts-Labels, Pillen, Rechtliches. */
    --fs-12: 0.83rem; /* Feldbeschriftung, Chips, Unterzeile im Fensterkopf, Teammitglieder. */
    --fs-13: 0.9rem; /* Hinweise, Rundeninfo, Rundenwerte, Switch, Links, kleiner Knopf. */
    --fs-14: 0.97rem; /* Namen, Fließtext, Toasts, Hilfe, Versionshinweise, Sonderwertungs-Titel. */
    --fs-15: 1.04rem; /* Knöpfe, Reiter, Gruppen- und Kacheltitel, Seitenmenü. */
    --fs-16: 1.11rem; /* Eingabe in Feldern, Teamname, Avatar, Schrittitel. */
    --fs-17: 1.18rem; /* Ergebnisse und Summen, Login-Slogan. */
    --fs-22: 1.53rem; /* Wortmarke im Kopfbereich (Bebas). */
    --fs-24: 1.67rem; /* Board-Titel, Onboarding-Titel (Bebas). */
    --fs-28: 1.94rem; /* Dialogtitel, Statistik-Zahl, Leerzustand-Titel, Versionsnummer, Turnier-Code (Bebas). */
    --fs-30: 2.08rem; /* Fenstertitel, Menütitel (Bebas). */
    --fs-32: 2.22rem; /* Stepper-Wert, Turnierkarte, Turniername für sehr lange Namen (Bebas). */
    --fs-34: 2.36rem; /* Sheet-Titel, Archivkarte, Code-Eingabe (Bebas). */
    --fs-38: 2.64rem; /* Turniername, lang (Bebas). */
    --fs-44: 3.06rem; /* Turniername, mittel (Bebas). */
    --fs-52: 3.61rem; /* Turniername, Login-Wortmarke (Bebas). */

    /* Abstände */
    --space-2: 0.14rem; /* 2px: Board-Titel unten, Abstand Name zu Meta (2px fest). */
    --space-3: 0.21rem; /* 3px: Titel zu Text in Hinweisen und Glossar. */
    --space-4: 0.28rem; /* 4px: Stepper-Lücke, Platzzeile, Fensterkopf-Unterzeile. */
    --space-5: 0.35rem; /* 5px: Chip-Lücke, Scorekarten-Zeile oben/unten, Icon-Abstand in Rundenkacheln. */
    --space-6: 0.42rem; /* 6px: Rundenwahl-Lücke, Chips untereinander, Spaltenkopf, Feld-Label. */
    --space-7: 0.49rem; /* 7px: Innenabstand der Rundenkacheln, Listenzeile oben/unten. */
    --space-8: 0.56rem; /* 8px: Spaltenabstand in Boards, Knopf-Icon zum Text, Knöpfe im Fuß. */
    --space-10: 0.69rem; /* 10px: Board-Innenabstand, Kachel-Lücke, Gruppenzeile. */
    --space-12: 0.83rem; /* 12px: Formularabstand, Gruppen-Lücke, Notiz oben/unten, Chip seitlich. */
    --space-14: 0.97rem; /* 14px: Kachel-Innenabstand, Notiz seitlich, Hero unten. */
    --space-16: 1.11rem; /* 16px: Seitenrand in Fenstern, Knopf seitlich, Feld seitlich, Reiter-Rand. */
    --space-18: 1.25rem; /* 18px: Fensterkopf links, Toast-Abstand unten, Sheet-Liste. */
    --space-20: 1.39rem; /* 20px: Seitenrand im Kopfbereich, Dialog-Innenabstand, Abschnitt oben. */
    --space-24: 1.67rem; /* 24px: Fenster unten, Laden-Zustand. */
    --space-36: 2.5rem; /* 36px: Leerzustand oben/unten, Login-Untertitel. */

    /* Ecken */
    --radius-xs: 6px; /* Rundenwerte, Pro-Rang, Podest unten, Rundenwert der Live-Seite. */
    --radius-sm: 10px; /* Switch-Segment, Ergebnisfeld, Akkordeon-Nummer, Gold-Icon. */
    --radius-md: 12px; /* Icon-Kacheln (Seitenmenü, Sonderwertung, Einstellungen, „Das ist neu“), kleiner Knopf, Icon-Knopf, Chip, Stepper, Listen-Knopf. */
    --radius-row: 14px; /* Board-Zeile, Feld, Switch, Statistik-Kachel, Rundenkachel, Seitenmenü-Eintrag. */
    --radius-lg: 16px; /* Knopf, Listeneintrag, Toast, Hinweis, Teilen-Knopf, Anmeldeknopf, Leerzustand-Icon. */
    --radius-card: 20px; /* Alle Karten: Board, Liste, Gruppe, Kachel, Akkordeon, Versions- und Hinweiskarten, Turnierkarte, QR-Code, Karten der Live-Seite. */
    --radius-pop: 24px; /* Popup, Seitenmenü (links), Onboarding-Karte. */
    --radius-hero: 28px; /* Kopfbereich unten, Sheets oben (App und Live-Seite). */
    --radius-pill: 999px; /* Schalter, Abzeichen, Pillen, Speicherstatus. */

    /* Touch-Ziele */
    --touch: 3.06rem; /* 44px: Icon-Knöpfe, runde Knöpfe, Stepper, Ergebnisfeld, Namenszeile. */
    --touch-button: 3.47rem; /* 50px: Knöpfe, Rundenkacheln. */
    --touch-field: 3.61rem; /* 52px: Eingabefelder, „Spieler hinzufügen“, Teilen-Knopf, Akkordeon-Frage. */
    --touch-row: 3.89rem; /* 56px: Listeneintrag, „Turnier beenden“. */
    --touch-small: 2.64rem; /* 38px: kleiner Knopf, Link, Team-Chip. Unter 44pt: nur in dichten Zeilen. */
    --touch-chip: 2.78rem; /* 40px: Chip, Switch-Segment, Demo-Link. */

    /* Schatten */
    --shadow-pop: 0 30px 70px rgba(0, 0, 0, 0.65); /* Popups und Rückfragen. */
    --shadow-sheet: 0 -20px 60px rgba(0, 0, 0, 0.6); /* Sheet von unten. */
    --shadow-menu: -20px 0 50px rgba(0, 0, 0, 0.6); /* Seitenmenü rechts. */
    --shadow-toast: 0 14px 34px rgba(0, 0, 0, 0.6); /* Toasts. */
    --shadow-onboarding: 0 24px 60px rgba(0, 0, 0, 0.65); /* Onboarding-Karte. */
    --shadow-signin: 0 10px 30px rgba(0, 0, 0, 0.45); /* Weiße Anmeldeknöpfe auf dem Login. */
    --glow-primary: 0 6px 18px rgba(14, 165, 233, 0.3); /* Blauer Schein unter dem Hauptknopf. */
    --glow-switch: 0 4px 14px rgba(14, 165, 233, 0.35); /* Aktives Switch-Segment. */
    --glow-danger: 0 6px 18px rgba(225, 29, 72, 0.25); /* Gefüllter Löschen-Knopf. */
    --glow-gold: 0 6px 18px rgba(202, 138, 4, 0.3); /* Gold-Knopf (Siegerehrung). */
    --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.3); /* Fokussiertes Feld, zusammen mit Rand accent-strong. */

    /* Ebenen */
    --layer-tabs: 40; /* Reiterleiste, klebt unter der Statusleiste. */
    --layer-statusbar: 45; /* Streifen hinter der Statusleiste, sobald der Kopf weggescrollt ist. */
    --layer-onboarding: 90; /* Onboarding-Checkliste unten rechts. */
    --layer-menu-backdrop: 90; /* Abdunklung hinter dem Seitenmenü. */
    --layer-menu: 100; /* Seitenmenü. */
    --layer-page: 100; /* Vollbild-Fenster (.modal-overlay). */
    --layer-notice: 120; /* Hinweis „Neue Version verfügbar“ (inline in index.html). */
    --layer-popup: 150; /* Popup über einem Vollbild-Fenster (.modal-popup). */
    --layer-popup-over: 160; /* Export-Fenster über der Siegerehrung. */
    --layer-confetti: 400; /* Konfetti in der Siegerehrung (js/utils.js). */
    --layer-landing: 9998; /* Login. */
    --layer-splash: 9999; /* Startanimation (inline in index.html und live.html). */
    --layer-sheet: 10000; /* Sheet „Das ist neu“ und Versionshinweise. */
    --layer-dock: 10001; /* Logo und Wortmarke, die vom Splash in den Kopf fliegen. */
    --layer-dialog: 10100; /* Rückfragen aus js/dialogs.js, über Login und Splash. */
    --layer-toast: 10150; /* Toasts. */
    --layer-gate: 10500; /* Installations-Hinweis der Web-App (inline in index.html). */

    /* Dauern */
    --dur-press: 0.12s; /* Drücken: scale auf Knöpfen, Kacheln, runden Knöpfen. */
    --dur-fast: 0.15s; /* Zeilen, Haken, Listen-Knöpfe: Farbwechsel. */
    --dur-base: 0.2s; /* Standard für Farbe, Rand, Schatten, Deckkraft, Toast. */
    --dur-switch: 0.25s; /* Switch-Segment, Kopfzeile je Reiter, Popup öffnen. */
    --dur-page: 0.28s; /* Seite öffnen, Sheet-Abdunklung. */
    --dur-slow: 0.3s; /* Fortschritt im Assistenten, Reiter-Strich (Breite), Body-Farbe. */
    --dur-sheet: 0.32s; /* Sheet von unten, Abdunklung des Seitenmenüs. */
    --dur-menu: 0.38s; /* Seitenmenü einschieben. */
    --dur-tab: 0.45s; /* Reiter-Strich wandert (federnd). */
    --dur-shimmer: 2.4s; /* Schimmer im Balken der laufenden Runde. */

    /* Kurven */
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* Seitenmenü und seine Abdunklung. */
    --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1); /* Popup, Sheet von unten. */
    --ease-page: cubic-bezier(0.2, 0.8, 0.2, 1); /* Seite öffnen, Fortschrittsbalken der Runden. */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Reiter-Strich, federnd. */
    --ease-tab-width: cubic-bezier(0.25, 1, 0.5, 1); /* Breite des Reiter-Strichs. */
    --ease-toggle: cubic-bezier(0.3, 0.7, 0.4, 1); /* Knopf des An/Aus-Schalters. */
    --ease-bounce: cubic-bezier(0.4, 0, 0.6, 1); /* Sanftes Wippen des Pfeils im Installations-Hinweis. */
}