/* ===========================================================================
   login_panel — Anmeldefläche

   Eigenständige Fachkomponente statt Inline-Stilen in der Anmeldeseite: Damit
   bleibt die Content Security Policy ohne 'unsafe-inline' und die Anmeldeseite
   folgt derselben Komponentenlogik wie der Rest der Oberfläche.

   Struktur siehe docs/css/structure/login_panel.md
   Blueprint    siehe blueprints/blueprint_login_panel.html
   =========================================================================== */

.login_panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space_16);
}

.login_panel_card {
    width: 100%;
    max-width: 26rem;
}

.login_panel_header {
    display: flex;
    align-items: center;
    gap: var(--space_12);
    margin-bottom: var(--space_24);
}

.login_panel_mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--radius_md);
    background: var(--color_accent);
    color: #ffffff;
    font-weight: var(--font_weight_bold);
    letter-spacing: -0.02em;
}

.login_panel_title {
    margin: 0;
    font-size: var(--font_size_lg);
    line-height: var(--line_height_tight);
}

.login_panel_subtitle {
    margin: 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

.login_panel_body {
    border: 0;
    border-radius: var(--radius_lg);
    background: var(--color_surface);
    padding: var(--space_22) var(--space_26);
    box-shadow: var(--shadow_sm);
}

.login_panel_field {
    margin-bottom: var(--space_16);
}

.login_panel_field_caption {
    display: block;
    margin-bottom: var(--space_4);
    font-weight: var(--font_weight_medium);
}

/* Der Anmeldeknopf nimmt die volle Breite ein — es gibt auf dieser Seite keine
   konkurrierende Aktion. */
.login_panel_submit {
    width: 100%;
    justify-content: center;
}

.login_panel_message {
    margin-bottom: var(--space_16);
}

.login_panel_footer {
    margin-top: var(--space_24);
    color: var(--color_text_muted);
    font-size: var(--font_size_xs);
    text-align: center;
}

@media (max-width: 480px) {
    .login_panel {
        align-items: flex-start;
        padding-top: var(--space_28);
    }
}