/*
 * 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;
    --login-text-muted: #5f6673;
    --login-text-label: #2a2f38;
    --login-text-field: #15171b;
    --login-text-security: #6a717d;
    --login-field-hover-bg: #f3f4f7;
    --login-field-active-bg: #ffffff;
    --login-field-hover-border: rgba(16, 19, 26, 0.18);
    --login-field-inset-shadow: inset 0 1px 1px rgba(16, 19, 26, 0.03);
    --login-field-focus-shadow: 0 0 0 0.25rem rgba(var(--login-accent-rgb), 0.16);
    --login-warning-border: rgba(242, 178, 0, 0.35);
    --login-warning-bg: rgba(242, 178, 0, 0.1);
    --login-warning-text: #7a5600;
    --login-control-radius: 0.625rem;
    --login-label-size: 0.875rem;
    --login-body-size: 1rem;
    --login-support-size: 0.8125rem;
    --login-label-weight: 600;
    --login-action-weight: 650;
    --login-inline-gap: 0.5rem;
    --login-tablet-branding-padding: 1rem 1.5rem 1.5rem;
    --login-tablet-form-section-padding: 1.5rem 1.5rem 2.5rem;
    --login-tablet-header-margin-bottom: 1.25rem;
    --login-tablet-title-font-size: 1.75rem;
    --login-tablet-subtitle-font-size: 0.9rem;
    --login-tablet-subtitle-margin-top: 0.5rem;
    --login-tablet-form-group-margin-bottom: 1.25rem;
    --login-mobile-branding-padding: 1.5rem 1.25rem 1rem;
    --login-mobile-branding-title-font-size: 1.5rem;
    --login-mobile-branding-title-margin-top: 0.75rem;
    --login-mobile-branding-subtitle-font-size: 0.85rem;
    --login-mobile-form-section-padding: 1.25rem 1.25rem 2.5rem;
    --login-mobile-header-margin-bottom: 1rem;
    --login-mobile-title-font-size: 1.5rem;
    --login-mobile-subtitle-font-size: 0.85rem;
    --login-mobile-subtitle-margin-top: 0.5rem;
    --login-mobile-form-group-margin-bottom: 1.1rem;
    --login-mobile-form-group-padding: 0.2rem 0;
    --login-mobile-form-control-height: 50px;
    --login-mobile-form-control-font-size: calc(16px * var(--app-font-scale-ratio, 1));
    --login-mobile-form-control-padding: 0.75rem 3rem 0.75rem 1rem;
    --login-mobile-btn-login-height: 50px;
    --login-mobile-btn-login-margin-top: 0.6rem;
    --login-mobile-btn-login-margin-bottom: 1.5rem;
    --login-mobile-btn-login-font-size: 1rem;
    --login-mobile-password-toggle-padding: 0.75rem;
    --login-mobile-password-toggle-right: 0.75rem;
    --login-compact-branding-padding: 1.25rem 1rem 0.75rem;
    --login-compact-branding-title-font-size: 1.35rem;
    --login-compact-branding-title-margin-top: 0.5rem;
    --login-compact-branding-title-margin-bottom: 0.5rem;
    --login-compact-branding-subtitle-font-size: 0.8rem;
    --login-compact-form-section-padding: 1rem 1rem 2.5rem;
    --login-compact-header-margin-bottom: 0.9rem;
    --login-compact-title-font-size: 1.35rem;
    --login-compact-subtitle-font-size: 0.8rem;
    --login-compact-form-group-margin-bottom: 0.9rem;
    --login-compact-form-label-font-size: 0.9rem;
    --login-compact-form-label-margin-bottom: 0.4rem;
    --login-compact-form-control-height: 50px;
    --login-compact-btn-login-height: 50px;
    --login-compact-btn-login-margin-top: 0.5rem;
    --login-compact-btn-login-margin-bottom: 2rem;
    --login-landscape-branding-padding: 1.5rem;
    --login-landscape-branding-title-font-size: 1.25rem;
    --login-landscape-branding-title-margin-top: 1rem;
    --login-landscape-branding-subtitle-font-size: 0.85rem;
    --login-landscape-form-section-padding: 1.5rem;
    --login-landscape-title-font-size: 1.35rem;
    --login-landscape-subtitle-font-size: 0.85rem;
    --login-landscape-subtitle-margin-top: 0.65rem;
    --login-landscape-form-group-margin-bottom: 1.25rem;
    --login-landscape-btn-login-margin-top: 0.75rem;
    --login-landscape-btn-login-margin-bottom: 1rem;
    --login-branding-divider: rgb(255 255 255 / 0.55);
    --login-branding-subtitle-weight: 500;
    --login-branding-subtitle-leading: 1.4;
    --login-attribution-surface: rgb(12 16 24 / 0.9);
    --login-attribution-ink: rgb(255 255 255 / 0.86);
    --login-attribution-padding: 0.3125rem 1rem;
    --login-attribution-gap: 1rem;
    --login-attribution-size: 0.6875rem;
    --login-attribution-leading: 1.45;
    --login-security-gap: 1.25rem;
    --login-field-border-width: 1px;
    --login-field-focus-border: var(--primary-color);
    --login-field-mobile-border: var(--login-field-hover-border);
    --login-error-border: color-mix(in srgb, var(--theme-danger, #b42318) 45%, transparent);
    --login-error-ink: var(--theme-danger, #b42318);
    --login-success-border: color-mix(in srgb, var(--theme-success, #157347) 45%, transparent);
    --login-success-ink: color-mix(in srgb, var(--theme-success, #157347) 88%, #000000);
    --login-base-field-border-width: 2px;
    --login-base-field-border: var(--border-color);
    --login-base-field-hover-border: var(--gray-400);
    --login-base-form-padding: 3rem;
    --login-base-title-size: 2rem;
    --login-base-title-weight: 700;
    --login-base-subtitle-leading: 1.5;
    --login-base-group-padding: 0.25rem 0;
    --login-base-label-size: 0.95rem;
    --login-base-label-icon-size: 1.1rem;
    --login-base-ripple-surface: rgba(var(--theme-primary-rgb), 0.1);
    --login-base-field-padding: 0.75rem 3rem 0.75rem 1.25rem;
    --login-base-field-weight: 500;
    --login-base-placeholder-weight: 400;
    --login-base-focus-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.1), 0 4px 12px rgba(var(--theme-primary-rgb), 0.15);
    --login-base-toggle-padding: 0.5rem;
    --login-base-toggle-hover-surface: rgba(var(--theme-primary-rgb), 0.08);
    --login-base-toggle-icon-size: 1.2rem;
    --login-base-action-size: 1.05rem;
    --login-base-action-hover-shadow: 0 12px 32px rgba(var(--theme-primary-rgb), 0.4);
    --login-base-control-height: 56px;
    --login-base-control-radius: var(--radius-12px);
    --login-base-feedback-size: 0.9rem;
    --login-base-feedback-padding: 0.75rem 1rem;
    --login-base-feedback-gap: 1rem;
    --login-form-group-gap: 0.75rem;
    --login-floating-label-offset: 0.9375rem;
    --login-floating-label-size: 0.9375rem;
    --login-floating-label-weight: 400;
    --login-floating-label-leading: 1.25;
    --login-glass-field-padding: 1.125rem 0.875rem 0.25rem;
    --login-glass-field-border: rgb(255 255 255 / 0.85);
    --login-glass-field-surface: rgb(255 255 255 / 0.74);
    --login-glass-field-shadow: inset 0 1px 2px rgb(10 28 60 / 0.08);
    --login-glass-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary-color) 22%, transparent);
    --login-action-height: 3rem;
    --login-action-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
    --login-feedback-gap: 0.875rem;
    --login-feedback-padding: 0.625rem 0.75rem;
    --login-feedback-weight: 500;
    --login-feedback-leading: 1.4;
}

/* 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: var(--login-inline-gap);
    margin: 0 0 0.75rem;
    color: var(--brand-accent-text, var(--login-accent));
    font-size: var(--login-support-size);
    font-weight: var(--login-label-weight);
    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: var(--login-field-focus-shadow);
    content: '';
}

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

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

.login-premium .login-subtitle {
    margin-top: 0.625rem;
    color: var(--login-text-muted);
    font-size: var(--login-body-size);
}

/* Felder */
.login-premium .login-form .form-label {
    margin-bottom: 0.5rem;
    color: var(--login-text-label);
    font-size: var(--login-label-size);
    font-weight: var(--login-label-weight);
}

.login-premium .login-form .form-control {
    height: var(--login-field-height);
    padding-inline: 1rem;
    border: var(--line-hairline) solid var(--login-field-border);
    border-radius: var(--login-field-radius);
    background: var(--login-field-bg);
    box-shadow: var(--login-field-inset-shadow);
    font-size: var(--login-body-size);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}

.login-premium .login-form .form-control:hover {
    border-color: var(--login-field-hover-border);
    background: var(--login-field-hover-bg);
}

.login-premium .login-form .form-control:focus {
    border-color: var(--login-accent);
    background: var(--login-field-active-bg);
    box-shadow: var(--login-field-focus-shadow);
}

/* 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 var(--login-field-active-bg) inset;
    -webkit-text-fill-color: var(--login-text-field);
    caret-color: var(--login-text-field);
    transition: background-color 9999s ease-out 0s;
}

.login-premium .password-toggle {
    border-radius: var(--login-control-radius);
}

/* Feststelltaste */
.login-premium .login-capslock {
    display: flex;
    align-items: center;
    gap: var(--login-inline-gap);
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border: var(--line-hairline) solid var(--login-warning-border);
    border-radius: var(--login-control-radius);
    background: var(--login-warning-bg);
    color: var(--login-warning-text);
    font-size: var(--login-support-size);
    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: var(--login-body-size);
    font-weight: var(--login-action-weight);
    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: var(--login-security-gap);
    color: var(--login-text-security);
    font-size: var(--login-support-size);
}

/* Markenkarte: echtes Glas über dem lebenden Himmel. */
.login-premium .login-branding__content {
    border: var(--line-hairline) 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: var(--login-inline-gap);
    margin: 1rem auto 0;
    padding: 0.375rem 0.75rem;
    border: var(--line-hairline) 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: var(--login-label-weight);
}

@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;
    }
}