/* ==========================================================================
   Login-Page — v4 Re-Skin

   Zentrierte weiße Karte mit Gold-Top-Akzent, Gold-Wortmarke und nüchternem
   Institut-Footer. Alle Werte token-basiert (brand.css); erweitert Bootstrap 5.
   ========================================================================== */

/* Hintergrund der Login-Seite */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background-color: var(--bg-body);
}

/* Login-Karte mit Haarlinien-Rand + Gold-Top-Akzent */
.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2.4rem 2rem;
    border: 1px solid var(--border-hairline);
    border-top: 4px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(26, 28, 30, 0.12);
    background-color: var(--surface-card);
}

/* Wortmarke: das Firmenlogo (self-hosted JPG, weißer Grund auf weißer Karte),
   rechtsbündig — volle Kartenbreite wirkte zu wuchtig (PO-Entscheid 2026-07-10). */
.login-wortmarke {
    margin-bottom: var(--space-5);
    display: flex;
    justify-content: flex-end;
}

.login-logo {
    width: 230px;
    max-width: 100%;
    height: auto;
}

/* Überschrift + dezente Tagline */
.login-heading {
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: var(--line-height-snug);
    margin: 0 0 var(--space-1);
}

.login-tagline {
    font-size: var(--font-size-body);
    color: var(--text-muted);
    margin: 0 0 var(--space-5);
}

/* Formular-Labels (Sans) */
.login-card .form-label {
    font-family: var(--font-sans);
    color: var(--text-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: 0.4rem;
}

/* Eingabefeld-Wrapper mit führendem Icon */
.login-input-wrap {
    position: relative;
}

.login-input-icon {
    position: absolute;
    left: 0.85rem;
    /* Höhe der Eingabefeld-ZEILE (vertikales Padding 2x0.7rem + form-control
       line-height 1.5 + 1px Rahmen oben/unten), damit das Icon an der Input-Mitte
       zentriert bleibt und nicht durch ein expandiertes .invalid-feedback absinkt. */
    top: 0;
    height: calc(1.4rem + var(--font-size-body-lg) * 1.5 + 2px);
    display: inline-flex;
    align-items: center;
    color: var(--text-faint);
    pointer-events: none;
}

.login-input-icon .icon {
    width: 17px;
    height: 17px;
}

/* Eingabefelder */
.login-card .form-control {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem 0.7rem 2.5rem;
    font-size: var(--font-size-body-lg);
    color: var(--text-heading);
    transition: border-color var(--motion-dur-fast) var(--motion-ease-standard),
        box-shadow var(--motion-dur-fast) var(--motion-ease-standard);
}

.login-card .form-control:focus {
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px var(--gold-050);
}

/* Submit-Button im Goldton (#a6895a, weiße Schrift) */
.login-card .btn-gold {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-sans);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--gold-primary);
    color: var(--text-on-gold);
    transition: background-color var(--motion-dur-fast) var(--motion-ease-standard);
}

.login-card .btn-gold:hover,
.login-card .btn-gold:focus {
    background-color: var(--gold-600);
    color: var(--text-on-gold);
}

.login-card .btn-gold:active {
    background-color: var(--gold-700);
    color: var(--text-on-gold);
}

/* Fehlermeldung */
.login-card .alert {
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    margin-bottom: var(--space-5);
}

.login-card .alert-danger {
    background-color: var(--gold-050);
    border: 1px solid var(--gold-300);
    color: var(--text-on-gold-dark);
}

/* Footer-Disclaimer */
.login-footer {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-hairline);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-faint);
}