@import '_content/ChessCoach.UI/ChessCoach.UI.skrt1ys1lf.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App-Rahmen — Kopfleiste und Inhaltsflaeche.
   Umsetzung von ux-web-oberflaeche-2026-08-23/DESIGN.md, Abschnitt
   "App-Leiste". Nur hier, nicht in der RCL: die native Huelle hat ihre eigene
   Navigation und darf diese Leiste nicht bekommen. */

.appbar[b-qc8z3wdndp] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--cc-space-6);
    flex-wrap: wrap;
    min-height: 3.5rem;
    padding: 0 var(--cc-shell-inline);
    background: var(--cc-surface-raised);
    border-bottom: 1px solid var(--cc-border-subtle);
    box-shadow: var(--cc-elevation-raised);
    font-family: var(--cc-font-ui);
}

.appbar__brand[b-qc8z3wdndp] {
    font-family: var(--cc-font-reading);
    font-size: 1.25rem;
    color: var(--cc-text-primary);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.appbar__nav[b-qc8z3wdndp] {
    display: flex;
    align-self: stretch;
    gap: var(--cc-space-6);
}

.appbar__link[b-qc8z3wdndp] {
    display: flex;
    align-items: center;
    color: var(--cc-text-secondary);
    text-decoration: none;
    font-size: var(--cc-size-ui);
    /* Die Leiste unter dem Label ist die eigentliche Auszeichnung des aktiven
       Bereichs -- Farbe allein markiert ihn nicht. Sie ist immer da, nur
       normalerweise durchsichtig, damit das Label beim Wechsel nicht springt. */
    border-bottom: 2px solid transparent;
    transition: color var(--cc-motion-fast) var(--cc-ease),
                border-color var(--cc-motion-fast) var(--cc-ease);
}

.appbar__link:hover[b-qc8z3wdndp] {
    color: var(--cc-text-primary);
}

.appbar__link--active[b-qc8z3wdndp] {
    color: var(--cc-text-primary);
    border-bottom-color: var(--cc-accent);
}

.appbar__link:focus-visible[b-qc8z3wdndp],
.appbar__brand:focus-visible[b-qc8z3wdndp] {
    outline: 2px solid var(--cc-focus-ring);
    outline-offset: 2px;
}

.appbar__logout[b-qc8z3wdndp] {
    margin-left: auto;
}

.appshell[b-qc8z3wdndp] {
    min-height: calc(100vh - 3.5rem);
}

/* Unter 640px bricht die Leiste in zwei Zeilen: Marke oben, Bereiche darunter.
   Sie bleibt sticky -- der Bereichswechsel darf nicht davon abhaengen, wie
   weit man gescrollt hat. */
@media (max-width: 640px) {
    .appbar[b-qc8z3wdndp] {
        gap: var(--cc-space-3) var(--cc-space-4);
        padding-block: var(--cc-space-2);
    }

    .appbar__nav[b-qc8z3wdndp] {
        order: 3;
        flex-basis: 100%;
        gap: var(--cc-space-4);
    }

    .appshell[b-qc8z3wdndp] {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .appbar__link[b-qc8z3wdndp] {
        transition: none;
    }
}

/* Blazors Fehlerbanner. Der Standardtext war Englisch und generisch -- in
   einer sonst durchgehend deutschen Oberflaeche ein Fremdkoerper. */
#blazor-error-ui[b-qc8z3wdndp] {
    background: var(--cc-state-error-wash);
    backdrop-filter: blur(6px);
    color: var(--cc-text-primary);
    border-top: 1px solid var(--cc-state-error);
    bottom: 0;
    box-shadow: var(--cc-elevation-overlay);
    display: none;
    left: 0;
    padding: var(--cc-space-3) var(--cc-space-6);
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    font-family: var(--cc-font-ui);
}

    #blazor-error-ui a[b-qc8z3wdndp] {
        color: var(--cc-accent);
    }

    #blazor-error-ui .dismiss[b-qc8z3wdndp] {
        cursor: pointer;
        position: absolute;
        right: var(--cc-space-3);
        top: var(--cc-space-2);
    }
/* /Components/Pages/Login.razor.rz.scp.css */
/* Anmeldung.

   Bis zur Oberflaechen-Ueberarbeitung (2026-08-23) war diese Seite ein heller
   Fremdkoerper: weisse Karte, graue Raender, gruener Knopf -- gewachsen aus
   einer Notreparatur (Story 4.2), als die Seite noch gar kein Styling hatte
   und eine fehlgeschlagene Anmeldung als fast unsichtbarer Fliesstext
   erschien. Lesbar war sie danach, zugehoerig nie.

   Der Fehlerbanner bleibt das lauteste Element der Seite. Das ist Absicht:
   sein Fehlen war der urspruengliche Defekt. */

.login-page[b-9yx43r9x7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--cc-space-8) var(--cc-shell-inline);
}

.login-container[b-9yx43r9x7l] {
    width: 100%;
    max-width: 24rem;
    padding: var(--cc-space-8);
    background: var(--cc-surface-raised);
    border-radius: var(--cc-radius-md);
    box-shadow: var(--cc-elevation-overlay);
    font-family: var(--cc-font-ui);
}

.login-container h1[b-9yx43r9x7l] {
    margin: 0;
    font-family: var(--cc-font-reading);
    font-size: var(--cc-size-display);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.login-lead[b-9yx43r9x7l] {
    margin: var(--cc-space-2) 0 var(--cc-space-6);
    color: var(--cc-text-secondary);
    font-size: var(--cc-size-small);
}

.login-error[b-9yx43r9x7l] {
    margin-bottom: var(--cc-space-6);
    padding: var(--cc-space-3) var(--cc-space-4);
    background: var(--cc-state-error-wash);
    border-left: 3px solid var(--cc-state-error);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text-primary);
    font-weight: 600;
}

.login-field[b-9yx43r9x7l] {
    margin-bottom: var(--cc-space-4);
}

.login-field label[b-9yx43r9x7l] {
    display: block;
    margin-bottom: var(--cc-space-1);
    color: var(--cc-text-secondary);
    font-size: var(--cc-size-small);
}

.login-submit[b-9yx43r9x7l] {
    width: 100%;
    justify-content: center;
    margin-top: var(--cc-space-2);
    padding-block: var(--cc-space-3);
}