/*
 * Login-Formular und Markenkarte: Premium-Ebene.
 * Ruhige Felder mit klarem Fokus, Autofill ohne Browser-Blau, Begrüßung, Feststelltasten-Hinweis,
 * gläserne Markenkarte mit Live-Himmelsanzeige. Firmenfarben über --brand-accent-*.
 */

.login-premium {
    --login-accent: var(--brand-accent-action, var(--theme-primary));
    --login-accent-rgb: var(--brand-accent-rgb, var(--theme-primary-rgb));
    --login-field-bg: #f6f7f9;
    --login-field-border: rgba(16, 19, 26, 0.1);
    --login-field-radius: 0.875rem;
    --login-field-height: 3.25rem;
}

/* Rahmen der Anmeldekarte: weiche, tiefe Schwebe. */
.login-premium .login-container {
    box-shadow:
        0 0.125rem 0.375rem rgba(16, 22, 36, 0.06),
        0 2rem 4rem -1.5rem rgba(16, 22, 36, 0.28);
}

/* Kopf: Begrüßung als Eyebrow, kräftiger Titel. */
.login-premium .login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--brand-accent-text, var(--login-accent));
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-premium .login-eyebrow::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--login-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--login-accent-rgb), 0.16);
    content: '';
}

.login-premium .login-title {
    font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.login-premium .login-title::after {
    display: none;
}

.login-premium .login-subtitle {
    margin-top: 0.625rem;
    color: #5f6673;
    font-size: 1rem;
}

/* Felder */
.login-premium .login-form .form-label {
    margin-bottom: 0.5rem;
    color: #2a2f38;
    font-size: 0.875rem;
    font-weight: 600;
}

.login-premium .login-form .form-control {
    height: var(--login-field-height);
    padding-inline: 1rem;
    border: 1px solid var(--login-field-border);
    border-radius: var(--login-field-radius);
    background: var(--login-field-bg);
    box-shadow: inset 0 1px 1px rgba(16, 19, 26, 0.03);
    font-size: 1rem;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}

.login-premium .login-form .form-control:hover {
    border-color: rgba(16, 19, 26, 0.18);
    background: #f3f4f7;
}

.login-premium .login-form .form-control:focus {
    border-color: var(--login-accent);
    background: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(var(--login-accent-rgb), 0.16);
}

/* Browser-Autofill: gleiche Fläche wie das Feld statt Hellblau. */
.login-premium .login-form .form-control:-webkit-autofill,
.login-premium .login-form .form-control:-webkit-autofill:hover,
.login-premium .login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100rem #ffffff inset;
    -webkit-text-fill-color: #15171b;
    caret-color: #15171b;
    transition: background-color 9999s ease-out 0s;
}

.login-premium .password-toggle {
    border-radius: 0.625rem;
}

/* Feststelltaste */
.login-premium .login-capslock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(242, 178, 0, 0.35);
    border-radius: 0.625rem;
    background: rgba(242, 178, 0, 0.1);
    color: #7a5600;
    font-size: 0.8125rem;
    font-weight: 500;
}

.login-premium .login-capslock[hidden] {
    display: none;
}

/* Anmelden: Firmenfarbe mit Tiefe, Pfeil gleitet beim Überfahren. */
.login-premium .login-form .btn-login {
    height: var(--login-field-height);
    border: 0;
    border-radius: var(--login-field-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.75rem 1.5rem -0.75rem rgba(var(--login-accent-rgb), 0.75);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    transition: box-shadow 200ms ease, filter 160ms ease;
}

.login-premium .login-form .btn-login .btn-text::after {
    display: inline-block;
    margin-left: 0.5rem;
    content: '→';
    transition: transform 220ms cubic-bezier(0.34, 1.36, 0.64, 1);
}

.login-premium .login-form .btn-login:not(:disabled):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1rem 2rem -0.75rem rgba(var(--login-accent-rgb), 0.85);
    filter: brightness(1.04);
}

.login-premium .login-form .btn-login:not(:disabled):hover .btn-text::after {
    transform: translateX(0.25rem);
}

.login-premium .login-form__security {
    margin-top: 1.25rem;
    color: #6a717d;
    font-size: 0.8125rem;
}

/* Markenkarte: echtes Glas über dem lebenden Himmel. */
.login-premium .login-branding__content {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1.25rem;
    /* Nachts deckender, damit Logo und Slogan auf dunklem Himmel lesbar bleiben. */
    background: color-mix(in srgb, #ffffff calc(62% + var(--rail-night, 0) * 22%), transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1.5rem 3rem -1.25rem rgba(8, 14, 30, 0.45);
    backdrop-filter: blur(1.25rem) saturate(1.6);
    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
}

.login-premium .login-sky-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem auto 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: #3a404b;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .login-premium .login-sky-chip {
        display: none;
    }
}

.login-premium .login-sky-chip:empty,
.login-premium .login-sky-chip:not([data-phase]) {
    display: none;
}

.login-premium .login-sky-chip[data-phase='night'] .bi {
    color: #5563a8;
}

.login-premium .login-sky-chip:is([data-phase='day'], [data-phase='dawn'], [data-phase='dusk']) .bi {
    color: var(--login-accent);
}

/* Sanfter Auftritt des Formulars. */
@media (prefers-reduced-motion: no-preference) {
    .login-premium .login-form-wrapper > * {
        animation: login-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .login-premium .login-form-wrapper > :nth-child(2) {
        animation-delay: 80ms;
    }
}

@keyframes login-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}