/* ============================================================================
   FreakCash Theme — Festival-Look (Portal-Optik vom Helfer-Portal uebernommen)
   Vorlage: FreakValleyVol.Blazor / wwwroot/css/anmeldung.css
   ----------------------------------------------------------------------------
   WARTUNG (Kurzanleitung):
   - FARBE AENDERN        -> nur im Token-Block unten den Wert tauschen; alle
                             Seiten/Komponenten nutzen var(--fv-...).
   - HINTERGRUND-DEKO AUS -> im MainLayout.razor das <div class="fv-bgfx">
                             loeschen; alles andere laeuft unveraendert weiter.
   - DEVEXPRESS           -> Accent kommt offiziell aus FreakCash.Web/Components/
                             App.razor (ThemeFluentAccentColor.Moss). Hier gibt
                             es BEWUSST keine .dxbl-*-Overrides: das sind
                             undokumentierte Interna, die bei DX-Updates brechen.
   - LADE-REIHENFOLGE     -> diese Datei wird in beiden Hosts NACH app.css
                             geladen (Web: App.razor, MAUI: wwwroot/index.html)
                             und gewinnt deshalb bei gleicher Spezifitaet.
   ========================================================================== */

/* --- Token: die EINZIGE Stelle fuer Farben ------------------------------- */
:root {
    color-scheme: dark;
    /* Palette wie Helfer-Portal: Grund = Blaugrau des "Welcome to Freak
       Valley"-Schilds, Leitton = Gruen des Rock-Freaks-Logos, Schrift = Creme,
       Zweitakzent = Ockerbraun des RF-Logos */
    --fv-bg: #161b26;
    --fv-panel: #222a3a;
    --fv-panel2: #29334a;
    --fv-line: #3a4459;
    --fv-fg: #eef0dc;
    --fv-mut: #a3adc2;
    --fv-green: #3ec254;
    --fv-green2: #2a9c3c;
    --fv-green-bright: #6fe084;
    --fv-green-soft: #9be8a6;
    --fv-slate: #505070;
    --fv-slate-hi: #6a7396;
    --fv-ocker: #c07020;
    --fv-error: #ff8fa0;
    --fv-warn: #fbbf24;
    --fv-input-bg: #12161f;
    --fv-hover: rgba(255, 255, 255, 0.04);
    --fv-font-display: 'Bungee', 'Oswald', 'Impact', sans-serif;
    --fv-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Bootstrap-Anbindung */
    --bs-body-bg: var(--fv-bg);
    --bs-body-color: var(--fv-fg);
    --bs-border-color: var(--fv-line);
    --bs-secondary-color: var(--fv-mut);
    --bs-secondary-bg: var(--fv-panel);
    --bs-emphasis-color: var(--fv-fg);
    --bs-tertiary-bg: var(--fv-panel2);
}

html, body {
    font-family: var(--fv-font-body);
    line-height: 1.5;
}

/* --- Hintergrund-Deko (fixe Ebene hinter dem Inhalt) ---------------------
   1:1 vom Portal uebernommen. Drei Schichten:
   1) ::before - langsam treibende Farbnebel (gruen/slate)
   2) ::after  - psychedelische Ripple-Ringe nur an den Raendern
                 (Maske haelt die Mitte ruhig fuer den Inhalt)
   3) .fv-bgfx - feines Film-Korn (SVG-Turbulence, inline)
   Einmal geschrieben, nie anfassen. Abschalten: div im MainLayout loeschen. */

.fv-bgfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Korn */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.14;
}

.fv-bgfx::before {
    content: "";
    position: absolute;
    inset: -20%;
    /* Alphas kraeftiger als im Portal-Original (dort 0.16/0.26/0.13/0.22) —
       die Gruppen-Opacity 0.14 von .fv-bgfx daempft sie stark ab. */
    background:
        radial-gradient(42% 30% at 82% 6%, rgba(106, 115, 150, 0.40), transparent 70%),
        radial-gradient(45% 38% at 6% 34%, rgba(42, 156, 60, 0.65), transparent 70%),
        radial-gradient(36% 30% at 92% 82%, rgba(42, 156, 60, 0.34), transparent 70%),
        radial-gradient(30% 26% at 30% 96%, rgba(80, 80, 112, 0.55), transparent 70%);
    filter: blur(48px);
    animation: fv-drift 26s ease-in-out infinite alternate;
}

.fv-bgfx::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Alphas ~5x ueber Portal-Original (0.10/0.12/0.08): die Gruppen-
       Opacity 0.14 daempft sie sonst bis zur Unsichtbarkeit. */
    background:
        repeating-radial-gradient(circle at -12% 42%,
            rgba(106, 115, 150, 0.55) 0 2px, transparent 2px 30px),
        repeating-radial-gradient(circle at 112% 24%,
            rgba(62, 194, 84, 0.60) 0 2px, transparent 2px 26px),
        repeating-radial-gradient(circle at 108% 92%,
            rgba(62, 194, 84, 0.45) 0 2px, transparent 2px 34px);
    /* Ringe nur an den Raendern, Mitte bleibt ruhig fuer den Inhalt */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
}

@keyframes fv-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2.5%, -2%) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .fv-bgfx::before { animation: none; }
}

/* Mobile/WebView: Animation aus, Blur guenstiger (Android-Akku/GPU) */
@media (max-width: 640.98px) {
    .fv-bgfx::before {
        animation: none;
        filter: blur(28px);
    }
}

/* --- Primitives ----------------------------------------------------------- */

/* Seitentitel: Gruen-Verlaufstext mit Glow (wie Portal-Titel) */
h1 {
    font-family: var(--fv-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, var(--fv-green-soft) 0%, var(--fv-green) 45%, var(--fv-green2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 32px rgba(42, 156, 60, 0.25);
}

/* Karten: Verlauf + Glanzkante oben + Tiefe nach unten (wie Portal-Card).
   Padding/Layout bleibt Sache der jeweiligen Seite. */
.fv-card {
    background: linear-gradient(180deg, var(--fv-panel2) 0%, var(--fv-panel) 55%);
    border: 1px solid var(--fv-line);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(62, 194, 84, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Abschnitts-Ueberschrift: Ocker-Stern + Verlaufs-Unterstrich */
.fv-heading {
    font-family: var(--fv-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fv-green);
    padding-bottom: 6px;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, var(--fv-green2), var(--fv-ocker), transparent) 1;
}

.fv-heading::before {
    content: "\2605 ";
    color: var(--fv-ocker);
    font-size: 0.85em;
}

/* Primaer-Button: Gruen-Verlauf, dunkle Schrift, Glow */
.btn-primary {
    background: linear-gradient(90deg, var(--fv-green), var(--fv-green2));
    border-color: var(--fv-green2);
    color: #0b1a0f;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(42, 156, 60, 0.35);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: linear-gradient(90deg, var(--fv-green-bright), var(--fv-green));
    border-color: var(--fv-green);
    color: #0b1a0f;
}

/* Eingaben: dunkler Grund, Ocker-Fokus (wie Portal-Formulare) */
.form-control, .form-select, .input-group-text {
    background-color: var(--fv-input-bg);
    color: var(--fv-fg);
    border-color: var(--fv-line);
    border-radius: 6px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--fv-input-bg);
    color: var(--fv-fg);
    border-color: var(--fv-ocker);
    box-shadow: 0 0 0 3px rgba(106, 115, 150, 0.25);
}

.form-control::placeholder { color: var(--fv-mut); }