/* Agility One - gemeinsame Design-Tokens fuer Website und SaaS Die einzige Stelle im gesamten
 * Projekt, die konkrete Farbwerte, Abstaende, Radien, Schriftgroessen und Layoutmasse festlegt.
 * Komponenten verwenden ausschliesslich diese semantischen Namen und wissen nicht, welches
 * Schema gerade aktiv ist. */

:root {
/* ===================================================================
   1. Themeunabhaengig Ein Symbol aendert beim Schemawechsel seine Farbe, nicht seine Groesse. */

    /* --- Radien ---------------------------------------- */
    --radius-sm: 6px;    /* Felder und Schaltflaechen */
    --radius-md: 10px;   /* Hinweise, Tabellenrahmen, Toasts */
    --radius-lg: 16px;   /* Karten, Glasflaechen, Dialoge */
    --radius-xl: 24px;   /* nur die grossen Flaechen der oeffentlichen Website */
    --radius-full: 999px; /* Abzeichen, Zaehler und die Knoepfe der Website */

    /* --- Abstandsskala ---------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 3.5rem;
    /* Fortsetzung derselben Skala nach oben. Sie entstand fuer die Arbeitsoberflaeche, wo 3rem der
       groesste sinnvolle Abstand ist. */
    --space-10: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    /* --- Typografie -------------------------------------
       Keine extern geladene Schrift als Betriebsabhaengigkeit. */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* 0.72rem traegt ausschliesslich Versalienueberschriften - die Gruppentitel der Seitenleiste. */
    --font-size-2xs: 0.72rem;
    /* Der leise Zusatz unter einem Wert - der Vereinsname unter dem Konto. */
    --font-size-xs: 0.78rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2.25rem;
    /* Die naechste Stufe der Skala: der Anspruch auf der Buehne der Anmeldeseite. */
    --font-size-3xl: 3rem;
    --font-size-huge: clamp(2.5rem, 8vw, 5rem);

    --line-height-tight: 1.25;
    --line-height-base: 1.6;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* --- Symbolgroessen --------------------------------- */
    --icon-size-nav: 28px;
    --icon-size-sm: 18px;

    /* --- Zielgroessen -------------------------------
       44px ist die Untergrenze fuer jede Hauptaktion, auch mit Handschuhen und auf einem
       naessegesprenkelten Tablet. 36px ausschliesslich fuer nachgeordnete Aktionen in einer
       Tabellenzeile. */
    --target-min: 44px;
    --target-small: 36px;
    --target-nav: 48px;
    /* Ein Textbereich ist mindestens 88px hoch - zwei Zeilen plus Innenabstand. Ein einzeiliges
       Textfeld sieht aus wie eine Eingabezeile und laedt nicht dazu ein, den Satz zu Ende zu
       schreiben. */
    --target-textarea: 88px;
    /* Die Ringkonsole hat eine eigene, groessere Zielgroessenskala. */
    --target-ring: 72px;
    --target-ring-grob: 80px;

    /* --- Maschenweite des Haarlinienrasters ------------------------------- */
    --raster-weite: 88px;

    /* --- Ringschrift -------------------------------- */
    --font-size-ring-nummer: clamp(2.5rem, 12vw, 4.5rem);
    --font-size-ring-name: clamp(1.35rem, 5vw, 2.25rem);
    --font-size-ring-zaehler: clamp(2rem, 8vw, 3rem);

    /* --- Layoutmasse -------------------------------------
       Die Seitenleiste ist von 240px auf 264px gewachsen: Sie traegt jetzt Gruppenueberschriften,
       den Vereinsnamen und das angemeldete Konto. */
    --sidebar-width: 264px;
    --topbar-height: 56px;
    --content-max-width: 1280px;

    /* --- Bewegung -------------------------------------- */
    --duration-control: 0.12s;
    --duration-fade: 0.15s;
    /* Der ruhige Farbwechsel einer Hervorhebung, die dem Scrollen folgt. */
    --duration-highlight: 0.4s;
    --theme-transition: 180ms;

    /* --- Glasunschaerfe ------------------------------------------------- */
    --glass-blur: 22px;
    /* --- Sportarten -------------------------------------------------------
       Fuenf Kategorienfarben fuer den Marktplatz „Veranstaltungen finden": das Band links an einer
       Listenzeile, das Faehnchen im Monatskalender und der Punkt in der Legende darunter. */
    --sportart-agility: #dcc23c;
    --sportart-hoopers: #7fc48c;
    --sportart-rally-obedience: #b79ce0;
    --sportart-text: #101012;
}

/* =======================================================================
 * 2. Dunkel - die Voreinstellung `:root` ohne Attribut traegt dieselben Werte. */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* --- Flaechen ------------------------------------------------------- */
    --bg-primary: #101012;
    --bg-secondary: #16161a;
    --bg-elevated: #1b1b1f;
    --bg-elevated-hover: #212127;
    --bg-input: #131315;

    --sidebar-surface: #16161a;
    --topbar-surface: #16161a;
    --table-head-surface: #16161a;
    --row-hover-surface: #212127;
    --code-surface: rgba(19, 19, 21, 0.6);
    --disabled-surface: rgba(255, 255, 255, 0.04);

    /* Abdunkelung hinter Dialogen und dem mobilen Menue. */
    --bg-backdrop: rgba(0, 0, 0, 0.6);
    --bg-backdrop-strong: rgba(8, 8, 10, 0.68);

    /* Dekorativer Lichtverlauf. Nur auf zentralen Hauptflaechen einsetzen, nicht auf Arbeitsseiten. */
    --page-gradient:
        radial-gradient(68% 52% at 10% -5%, rgba(232, 255, 58, 0.10), transparent 60%),
        radial-gradient(52% 46% at 92% 4%, rgba(232, 255, 58, 0.06), transparent 62%),
        radial-gradient(58% 55% at 62% 104%, rgba(255, 255, 255, 0.05), transparent 66%);

    /* --- Glasflaechen ----------------------------------- */
    --glass-surface:
        linear-gradient(
            158deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.022) 44%,
            rgba(255, 255, 255, 0.05) 100%
        );
    --glass-surface-strong: rgba(255, 255, 255, 0.09);
    --glass-surface-soft: rgba(255, 255, 255, 0.05);
    --glass-surface-hover: rgba(255, 255, 255, 0.07);
    --glass-surface-subtle: rgba(255, 255, 255, 0.03);

    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-strong: rgba(255, 255, 255, 0.16);
    --glass-divider: rgba(255, 255, 255, 0.07);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    --glass-shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.6);

    --glass-fallback: #1b1b1f;

    /* --- Text -----------------------------------------------------------
       Alle Werte gegen --bg-primary UND --bg-elevated auf mindestens 4,5:1 geprueft.
       --text-disabled ist von der Textanforderung ausgenommen, muss aber die 3:1 fuer
       Bedienelemente halten. */
    --text-primary: #f4f3ef;
    --text-secondary: #b6b5ae;
    --text-muted: #93928c;
    --text-disabled: #6b6a66;
    --text-on-accent: #101012;
    --text-on-danger: #ffffff;

    /* --- Raender und Fokus ----------------------------------------------
       Der Fokusring wird niemals entfernt. */
    --border-color: #2a2a2f;
    --border-color-strong: #3a3a41;
    --divider-color: #2a2a2f;
    --input-border: #7a7a84;
    --input-border-hover: #93928c;
    --focus-ring: #e8ff3a;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* --- Akzent -----------------------------------------------------------
       Die Signalfarbe des Produkts ist #e8ff3a. Sie gilt fuer die gesamte Loesung - Website,
       angemeldete Anwendung, Client. */
    --accent: #e8ff3a;
    --accent-hover: #f1ff7d;
    --accent-active: #f6ffb4;
    --accent-muted: rgba(232, 255, 58, 0.16);

    --accent-surface: #e8ff3a;
    --accent-surface-hover: #f1ff7d;
    --accent-surface-active: #d5ec1f;

    /* --marke-flaeche ist die dritte Rolle: das Markenzeichen selbst. Es ist in BEIDEN Schemata
       dieselbe Signalfarbe mit schwarzer Schrift - anders als --accent-surface, das im hellen
       Schema tiefschwarz wird. */
    --marke-flaeche: #e8ff3a;
    --marke-schrift: #101012;

    /* --- Statusfarben ----------------------------------------------------
       Farbe traegt nie allein die Bedeutung. Zu jedem Status gehoert in der Oberflaeche ein
       sichtbares Wort. */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.14);
    --success-border: rgba(34, 197, 94, 0.35);
    --success-text: #b6f0c8;

    --warning: #f5a524;
    --warning-bg: rgba(245, 165, 36, 0.14);
    --warning-border: rgba(245, 165, 36, 0.35);
    --warning-text: #ffdba3;

    --danger: #ef4444;
    --danger-hover: #d63c3c;
    --danger-bg: rgba(239, 68, 68, 0.14);
    --danger-border: rgba(239, 68, 68, 0.35);
    --danger-text: #ffb4b4;

    /* Wie bei --accent gilt auch hier: --danger ist eine *Schriftfarbe*, --danger-surface eine
       *Flaeche*, auf der weisse Schrift steht. */
    --danger-surface: #dc2626;
    --danger-surface-hover: #b91c1c;
    --danger-surface-active: #991b1b;

    --info: #38bdf8;
    --info-bg: rgba(56, 189, 248, 0.14);
    --info-border: rgba(56, 189, 248, 0.35);
    --info-text: #bfe8ff;

    --neutral-bg: rgba(244, 243, 239, 0.12);

    /* --- Schatten --------------------------------------------------------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);

    /* Farbe der Browserleiste auf Mobilgeraeten. */
    --theme-color-meta: #101012;

    /* --- Abzeichentoene --------------------------------------------------- */
    --badge-neutral: #a8a7a0;
    --badge-neutral-bg: var(--neutral-bg);
    --badge-accent: #e8ff3a;
    --badge-accent-bg: var(--accent-muted);
    --badge-success: var(--success);
    --badge-success-bg: var(--success-bg);
    --badge-warning: var(--warning);
    --badge-warning-bg: var(--warning-bg);
    --badge-danger: #f15c5c;
    --badge-danger-bg: var(--danger-bg);
    --badge-info: var(--info);
    --badge-info-bg: var(--info-bg);

    /* --- Roadmap-Status ---------------------------------------------------
       Ausschliesslich Verweise auf bereits gepruefte Abzeichentoene. */
    --status-umgesetzt: var(--badge-success);
    --status-umgesetzt-bg: var(--badge-success-bg);
    --status-in-arbeit: var(--badge-warning);
    --status-in-arbeit-bg: var(--badge-warning-bg);
    --status-als-naechstes: var(--badge-info);
    --status-als-naechstes-bg: var(--badge-info-bg);
    --status-spaeter: var(--badge-neutral);
    --status-spaeter-bg: var(--badge-neutral-bg);
    --status-geaendert: var(--badge-accent);
    --status-geaendert-bg: var(--badge-accent-bg);
}

/* =======================================================================
 * 3. Hell Eigenstaendig gestaltet, nicht invertiert. */

:root[data-theme="light"] {
    color-scheme: light;

    /* --- Flaechen ------------------------------------------------------- */
    --bg-primary: #f1f3f7;
    --bg-secondary: #e7eaf0;
    --bg-elevated: #ffffff;
    --bg-elevated-hover: #f8f9fb;
    --bg-input: #ffffff;

    /* Die Leiste ist etwas heller als der Seitengrund - dieselbe Beziehung wie
     * im dunklen Schema, wo sie ebenfalls die hellere der beiden Flächen ist. */
    --sidebar-surface: rgba(255, 255, 255, 0.78);
    --topbar-surface: rgba(255, 255, 255, 0.82);
    --table-head-surface: #e7eaf0;
    --row-hover-surface: rgba(109, 40, 217, 0.055);
    --code-surface: rgba(20, 24, 31, 0.05);
    --disabled-surface: rgba(20, 24, 31, 0.04);

    /* Deutlich heller als im dunklen Modus: Ein tiefschwarzer Schleier vor
     * einer hellen Seite wirkt wie ein Fehler, nicht wie eine Ebene. */
    --bg-backdrop: rgba(20, 24, 31, 0.36);
    --bg-backdrop-strong: rgba(20, 24, 31, 0.44);

    /* Merklich zurueckhaltender - auf hellem Grund traegt schon wenig Farbe. */
    --page-gradient:
        radial-gradient(68% 52% at 10% -5%, rgba(109, 40, 217, 0.07), transparent 62%),
        radial-gradient(52% 46% at 92% 4%, rgba(109, 40, 217, 0.05), transparent 64%),
        radial-gradient(58% 55% at 62% 104%, rgba(18, 18, 20, 0.04), transparent 68%);

    /* --- Glasflaechen -----------------------------------------------------
       Die Aussenkontur ist hier dunkel, die Innenkante hell - genau umgekehrt zum dunklen Modus.
       Das erzeugt die Kante, die Glas ausmacht. */
    --glass-surface:
        linear-gradient(
            158deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.62) 44%,
            rgba(255, 255, 255, 0.78) 100%
        );
    --glass-surface-strong: rgba(255, 255, 255, 0.86);
    --glass-surface-soft: rgba(255, 255, 255, 0.6);
    --glass-surface-hover: rgba(109, 40, 217, 0.07);
    --glass-surface-subtle: rgba(255, 255, 255, 0.55);

    --glass-border: rgba(20, 24, 31, 0.13);
    --glass-border-strong: rgba(20, 24, 31, 0.20);
    --glass-divider: rgba(20, 24, 31, 0.10);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 1);
    --glass-shadow: 0 12px 32px rgba(20, 24, 31, 0.14);
    --glass-shadow-strong: 0 20px 48px rgba(20, 24, 31, 0.20);

    --glass-fallback: rgba(255, 255, 255, 0.96);
    --glass-blur: 18px;

    /* --- Text -------------------------------------------------------------
       Kein reines Schwarz: Es wirkt auf hellem Grund hart und ermuedet bei langer Arbeit im
       Wettkampfbuero. */
    --text-primary: #14181f;
    --text-secondary: #4a535f;
    --text-muted: #5c6674;
    --text-disabled: #838c99;
    --text-on-accent: #ffffff;
    --text-on-danger: #ffffff;

    /* --- Raender und Fokus ------------------------------------------------ */
    --border-color: #dfe3e9;
    --border-color-strong: #c7cdd6;
    --divider-color: #e3e7ed;
    --input-border: #6f7885;
    --input-border-hover: #5b6470;
    --focus-ring: #6d28d9;

    /* --- Akzent ------------------------------------------------------------
       Der helle Modus ist eine eigenstaendige Gestaltung, und an dieser Stelle muss er es sein:
       Neongelb ist hier unbrauchbar: als Schrift auf --bg-primary 1,1:1, als Knopfflaeche 1,0:1 -
       beides weit unter den 4,5:1 fuer Text und den 3:1 fuer Bedienelemente. */
    --accent: #6d28d9;
    --accent-hover: #5b21b6;
    --accent-active: #4c1d95;
    --accent-muted: rgba(109, 40, 217, 0.10);

    --accent-surface: #6d28d9;
    --accent-surface-hover: #5b21b6;
    --accent-surface-active: #4c1d95;

    --marke-flaeche: #e8ff3a;
    --marke-schrift: #101012;

    /* --- Statusfarben ------------------------------------------------------
       Eigene, kraeftigere Werte: Ein Gruen, das auf Dunkelblau leuchtet, ist auf Weiss zu blass
       fuer 4,5:1. Textfarbe und Flaeche sind getrennt gewaehlt, nicht voneinander abgeleitet. */
    --success: #146c34;
    --success-bg: rgba(22, 163, 74, 0.12);
    --success-border: rgba(22, 163, 74, 0.30);
    --success-text: #14532d;

    --warning: #9a4508;
    --warning-bg: rgba(217, 119, 6, 0.13);
    --warning-border: rgba(217, 119, 6, 0.32);
    --warning-text: #78350f;

    --danger: #c81e1e;
    --danger-hover: #b91c1c;
    --danger-bg: rgba(220, 38, 38, 0.10);
    --danger-border: rgba(220, 38, 38, 0.30);
    --danger-text: #991b1b;

    --danger-surface: #dc2626;
    --danger-surface-hover: #b91c1c;
    --danger-surface-active: #991b1b;

    --info: #035a8a;
    --info-bg: rgba(2, 132, 199, 0.11);
    --info-border: rgba(2, 132, 199, 0.30);
    --info-text: #075985;

    --neutral-bg: rgba(18, 18, 20, 0.08);

    /* --- Schatten ----------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06), 0 1px 3px rgba(20, 24, 31, 0.10);
    --shadow-md: 0 2px 4px rgba(20, 24, 31, 0.06), 0 8px 20px rgba(20, 24, 31, 0.12);
    --shadow-lg: 0 4px 8px rgba(20, 24, 31, 0.07), 0 16px 36px rgba(20, 24, 31, 0.14);
    --shadow-dialog: 0 8px 16px rgba(20, 24, 31, 0.10), 0 24px 56px rgba(20, 24, 31, 0.20);

    --theme-color-meta: #f1f3f7;

    /* --- Abzeichentoene ------------------------------------------------------ */
    --badge-neutral: #56565c;
    --badge-neutral-bg: var(--neutral-bg);
    --badge-accent: #6d28d9;
    --badge-accent-bg: var(--accent-muted);
    --badge-success: #146c34;
    --badge-success-bg: var(--success-bg);
    --badge-warning: #9a4508;
    --badge-warning-bg: var(--warning-bg);
    --badge-danger: #b91c1c;
    --badge-danger-bg: var(--danger-bg);
    --badge-info: #035a8a;
    --badge-info-bg: var(--info-bg);

    /* --- Roadmap-Status ------------------------------------------------------ */
    --status-umgesetzt: var(--badge-success);
    --status-umgesetzt-bg: var(--badge-success-bg);
    --status-in-arbeit: var(--badge-warning);
    --status-in-arbeit-bg: var(--badge-warning-bg);
    --status-als-naechstes: var(--badge-info);
    --status-als-naechstes-bg: var(--badge-info-bg);
    --status-spaeter: var(--badge-neutral);
    --status-spaeter-bg: var(--badge-neutral-bg);
    --status-geaendert: var(--badge-accent);
    --status-geaendert-bg: var(--badge-accent-bg);
}

/* =======================================================================
 * 4. Oeffentliche Website Ein eigener Satz Werte NUR fuer den oeffentlichen Auftritt. */

:root,
:root[data-theme="dark"] {
    /* Neutrales Fast-Schwarz. */
    --site-bg: #101012;
    --site-bg-soft: #17171a;
    --site-surface: #1b1b1f;
    --site-surface-hover: #212127;

    --site-ink: #f4f3ef;
    --site-ink-soft: #b6b5ae;  /* 9,2:1 */
    --site-ink-mute: #8a8984;  /* 5,4:1 auf Grund, 4,9:1 auf Flaeche */

    --site-line: #2a2a2f;
    --site-line-strong: #3a3a41;
    /* Die Kontur eines Knopfes ist ein Bedienelement und braucht 3:1 - eine Haarlinie, die nur
       trennt, nicht. */
    --site-line-control: #6e6e78;

    /* Die einzige Farbe des Auftritts. */
    --site-signal: #e8ff3a;
    --site-signal-hover: #f1ff7d;
    --site-signal-ink: #101012;  /* Schrift auf der Signalfarbe: 17,0:1 */
    /* Die Signalfarbe auf dem GRUND - als Schrift, Linie oder kleine Marke, nicht als vollflaechige
       Flaeche. Im dunklen Schema ist das dieselbe Farbe: 17,0:1. */
    --site-signal-text: #e8ff3a;
    --site-signal-text-hover: #f1ff7d;  /* 17,5:1 */

    /* Die Hauptaktion. Im dunklen Schema ist sie die Signalfarbe. */
    --site-action: #e8ff3a;
    --site-action-hover: #f1ff7d;
    --site-action-ink: #101012;

    --site-focus: #e8ff3a;
}

:root[data-theme="light"] {
    --site-bg: #f1f3f7;
    --site-bg-soft: #e7eaf0;
    --site-surface: #ffffff;
    --site-surface-hover: #eef1f6;

    --site-ink: #14181f;       /* 16,0:1 auf Grund, 17,8:1 auf der Flaeche */
    --site-ink-soft: #4a535f;  /* 7,0:1 */
    --site-ink-mute: #5c6674;  /* 5,2:1 auf Grund, 4,8:1 auf der weichen Flaeche */

    --site-line: #dfe3e9;
    --site-line-strong: #c7cdd6;
    /* Die Kontur eines Knopfes ist ein Bedienelement und braucht 3:1. 4,0:1
     * auf dem Grund, 4,5:1 auf der Flaeche. */
    --site-line-control: #6f7885;

    /* Der Akzent, vollflaechig - das Band ueber der Seite. Im hellen Schema
     * traegt es weisse Schrift (7,1:1); das Neongelb mit seiner schwarzen
     * Schrift bleibt dem dunklen Schema vorbehalten. */
    --site-signal: #6d28d9;
    --site-signal-hover: #5b21b6;
    --site-signal-ink: #ffffff;
    /* Derselbe Akzent auf dem Grund - als Schrift, Linie oder kleine Marke. */
    --site-signal-text: #6d28d9;
    --site-signal-text-hover: #5b21b6;

    --site-action: #6d28d9;
    --site-action-hover: #5b21b6;
    --site-action-ink: #ffffff;   /* 7,1:1 */

    --site-focus: #6d28d9;
}

/* ======================================================================= */

.theme-ready body,
.theme-ready .glass,
.theme-ready .card,
.theme-ready .button,
.theme-ready .badge,
.theme-ready .site-header,
.theme-ready input,
.theme-ready select,
.theme-ready textarea {
    transition:
        background-color var(--theme-transition) ease,
        border-color var(--theme-transition) ease,
        color var(--theme-transition) ease,
        box-shadow var(--theme-transition) ease;
}

@media (prefers-reduced-motion: reduce) {
    .theme-ready body,
    .theme-ready .glass,
    .theme-ready .card,
    .theme-ready .button,
    .theme-ready .badge,
    .theme-ready .site-header,
    .theme-ready input,
    .theme-ready select,
    .theme-ready textarea {
        transition: none;
    }
}