/*
 * Glaskarte der Anmeldung. Stufen: deckend als sichere Basis, Milchglas mit backdrop-filter,
 * Lichtbrechung am Rand in Chromium (login-glass-refraction.js).
 * Tönung, Reflex und Schatten setzt login-glass-light.js nach Sonne und Mond.
 */
.login-premium .login-form-wrapper {
    --glass-tint: 0.7;
    --glass-light: 255 255 255;
    --glass-strength: 0.6;
    --glass-x: 50%;
    --glass-y: 0%;
    --glass-cast-x: 0px;
    --glass-cast-y: 28px;
    border: 1px solid transparent;
    border-radius: 1.75rem;
    background: rgb(255 255 255 / 0.95);
    box-shadow:
        inset 0 0 26px rgb(var(--glass-light) / 0.32),
        0 2px 6px rgb(10 28 60 / 0.1),
        var(--glass-cast-x) var(--glass-cast-y) 72px rgb(10 28 60 / 0.3);
    transition: background-color 1.2s ease, box-shadow 1.2s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .login-premium .login-form-wrapper {
        background: rgb(255 255 255 / var(--glass-tint));
        backdrop-filter: blur(28px) saturate(1.2) brightness(1.04);
        -webkit-backdrop-filter: blur(28px) saturate(1.2) brightness(1.04);
    }
}

/* Lichtreflex auf der Fläche, dort wo Sonne oder Mond stehen. */
.login-premium .login-form-wrapper::before {
    content: '';
    position: absolute;
    inset-block-start: var(--glass-y);
    inset-inline-start: var(--glass-x);
    z-index: -1;
    inline-size: 16rem;
    block-size: 16rem;
    border-radius: 50%;
    background: rgb(var(--glass-light) / var(--glass-strength));
    filter: blur(54px);
    pointer-events: none;
    translate: -50% -50%;
    transition: inset-block-start 1.2s ease, inset-inline-start 1.2s ease, background-color 1.2s ease;
}

/* Feines Korn: Das Glas wirkt wie Material, nicht wie eine Tönung. */
.login-premium .login-form-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.32;
    pointer-events: none;
}

/* Lichtkante: Verlauf und Richtung setzt login-glass-light.js. */
.login-premium .login-glass-rim {
    position: absolute;
    inset: -1px;
    z-index: 3;
    inline-size: calc(100% + 2px);
    block-size: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
}

.login-premium .login-glass-defs {
    position: absolute;
    inline-size: 0;
    block-size: 0;
}

/* Mobil: Weißes Blatt bis zum unteren Rand, nur oben gerundet, ohne Glas. */
@media (max-width: 991.98px) {
    .login-premium .login-form-wrapper {
        flex: 1 0 auto;
        max-inline-size: none !important;
        padding: 1.75rem max(1.25rem, calc((100% - 26rem) / 2)) 1.5rem !important;
        overflow: visible;
        border: 0;
        border-radius: 1.5rem 1.5rem 0 0;
        background: var(--premium-surface);
        box-shadow: var(--premium-shadow-none);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none !important;
    }

    .login-premium .login-form-wrapper::before,
    .login-premium .login-form-wrapper::after,
    .login-premium .login-glass-rim {
        display: none;
    }
}

/* Wer weniger Transparenz oder mehr Kontrast wünscht, bekommt eine deckende Karte. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .login-premium .login-form-wrapper {
        background: var(--premium-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .login-premium .login-form-wrapper::before,
    .login-premium .login-form-wrapper::after {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .login-premium .login-form-wrapper {
        border: 2px solid var(--premium-ink-strong);
    }

    .login-premium .login-glass-rim {
        display: none;
    }
}