/*
 * 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 0.75rem !important;
}

.login-premium .login-form .form-label {
    position: absolute;
    inset-block-start: 0.9375rem;
    inset-inline-start: 0.9375rem;
    z-index: 5 !important;
    margin: 0 !important;
    color: var(--premium-ink) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.25 !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: 3.25rem !important;
    min-block-size: 3.25rem !important;
    padding: 1.125rem 0.875rem 0.25rem !important;
    border: 1px solid rgb(255 255 255 / 0.85) !important;
    border-radius: var(--geometry-radius-control, 10px) !important;
    background: rgb(255 255 255 / 0.74) !important;
    box-shadow: inset 0 1px 2px rgb(10 28 60 / 0.08) !important;
    color: var(--premium-ink-strong) !important;
    font-size: 0.9375rem !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(--primary-color) !important;
    background: var(--premium-surface) !important;
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
}

.login-premium .login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 100px var(--premium-surface) inset,
        0 0 0 0.1875rem color-mix(in srgb, var(--primary-color) 22%, transparent) !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: 3rem !important;
    min-block-size: 3rem !important;
    margin: 0.25rem 0 0 !important;
    padding: 0 1rem !important;
    border-radius: var(--geometry-radius-control, 10px) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !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: rgb(16 19 26 / 0.18) !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 0.875rem !important;
    padding: 0.625rem 0.75rem !important;
    border: 1px 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: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

.login-premium .login-form .login-error.show {
    border-color: color-mix(in srgb, var(--theme-danger, #b42318) 45%, transparent) !important;
    color: var(--theme-danger, #b42318) !important;
}

.login-premium .login-form .login-success.show {
    border-color: color-mix(in srgb, var(--theme-success, #157347) 45%, transparent) !important;
    color: color-mix(in srgb, var(--theme-success, #157347) 88%, #000000) !important;
}