/*
 * Login-Formular: schwebende Labels, Felder und Button der Anmeldekarte.
 */
/* Schwebende Labels: Das Label sitzt im Feld und gleitet beim Tippen nach oben. */
.login-premium .login-form .input-wrapper {
    position: relative;
    z-index: 1;
}

.login-premium .login-form .form-group {
    position: relative;
    margin: 0 0 var(--login-form-group-gap) !important;
}

.login-premium .login-form .form-label {
    position: absolute;
    inset-block-start: var(--login-floating-label-offset);
    inset-inline-start: var(--login-floating-label-offset);
    z-index: 5 !important;
    margin: 0 !important;
    color: var(--premium-ink) !important;
    font-size: var(--login-floating-label-size) !important;
    font-weight: var(--login-floating-label-weight) !important;
    line-height: var(--login-floating-label-leading) !important;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms ease;
}

.login-premium .login-form .form-label > i {
    display: none !important;
}

.login-premium .login-form .form-group:has(.form-control:focus) .form-label,
.login-premium .login-form .form-group:has(.form-control:not(:placeholder-shown)) .form-label,
.login-premium .login-form .form-group:has(.form-control:-webkit-autofill) .form-label {
    color: var(--premium-ink) !important;
    transform: translate3d(0, -0.5625rem, 0) scale(0.8);
}

.login-premium .login-form .form-group:has(.form-control:focus) .form-label {
    color: var(--primary-text) !important;
}

.login-premium .login-form .form-control {
    block-size: var(--login-field-height) !important;
    min-block-size: var(--login-field-height) !important;
    padding: var(--login-glass-field-padding) !important;
    border: var(--login-field-border-width) solid var(--login-glass-field-border) !important;
    border-radius: var(--geometry-radius-control, 10px) !important;
    background: var(--login-glass-field-surface) !important;
    box-shadow: var(--login-glass-field-shadow) !important;
    color: var(--premium-ink-strong) !important;
    font-size: var(--login-floating-label-size) !important;
    transition: border-color 140ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.login-premium .login-form .form-control::placeholder {
    color: transparent !important;
}

.login-premium .login-form .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--premium-surface) inset !important;
    -webkit-text-fill-color: var(--premium-ink-strong);
}

.login-premium .login-form input[type='password'] {
    padding-inline-end: 3rem !important;
}

.login-premium .login-form .form-control:focus {
    border-color: var(--login-field-focus-border) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--login-glass-focus-shadow) !important;
}

.login-premium .login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 100px var(--premium-surface) inset,
        var(--login-glass-focus-shadow) !important;
}

.login-premium .login-form .password-toggle {
    inset-block-start: 50% !important;
    inset-inline-end: 0.5rem !important;
    inline-size: 2.25rem !important;
    block-size: 2.25rem !important;
    transform: translateY(-50%) !important;
}

.login-premium .login-form .btn-login {
    position: relative;
    inline-size: 100%;
    block-size: var(--login-action-height) !important;
    min-block-size: var(--login-action-height) !important;
    margin: 0.25rem 0 0 !important;
    padding: 0 1rem !important;
    border-radius: var(--geometry-radius-control, 10px) !important;
    box-shadow: var(--login-action-shadow) !important;
    font-size: var(--login-floating-label-size) !important;
    font-weight: var(--login-label-weight) !important;
    transform: none !important;
    transition: filter 140ms ease, scale 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.login-premium .login-form .btn-login:not(:disabled):hover {
    filter: brightness(0.96);
    transform: none !important;
}

.login-premium .login-form .btn-login:not(:disabled):active {
    scale: 0.985;
}

/* Mobil liegen die Felder auf weißem Blatt: fester Rand statt Glas. */
@media (max-width: 991.98px) {
    .login-premium .login-form .form-control {
        border-color: var(--login-field-mobile-border) !important;
        background: var(--premium-surface) !important;
        box-shadow: var(--premium-shadow-none) !important;
    }
}

/* Hinweise: eigene helle Fläche, damit sie auf dem Glas immer lesbar sind. */
.login-premium .login-form :is(.login-error, .login-success).show {
    margin: 0 0 var(--login-feedback-gap) !important;
    padding: var(--login-feedback-padding) !important;
    border: var(--line-hairline) solid transparent !important;
    border-radius: var(--geometry-radius-control, 10px) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow-none) !important;
    font-size: var(--login-support-size) !important;
    font-weight: var(--login-feedback-weight) !important;
    line-height: var(--login-feedback-leading) !important;
    opacity: 1 !important;
}

.login-premium .login-form .login-error.show {
    border-color: var(--login-error-border) !important;
    color: var(--login-error-ink) !important;
}

.login-premium .login-form .login-success.show {
    border-color: var(--login-success-border) !important;
    color: var(--login-success-ink) !important;
}