/*
 * Login: Die Anmeldung ist der Mittelpunkt. Die Karte steht zentriert und groß im Himmel,
 * die Szene läuft unverändert als Kulisse über das ganze Fenster, der Zug fährt frei darunter durch.
 * Mobil: Szene oben, Formular als Blatt, das in die Szene hineinragt.
 */
.login-premium {
    --geometry-radius-control: 0.625rem;
    --geometry-radius-surface: 0.75rem;
}

/*
 * Himmelsbahn fürs Vollbild: Der Bogen nutzt die ganze Breite, und auch die niedrige Wintersonne
 * steht klar im Himmel. Mittags leuchtet sie durch die Glaskarte, statt an ihrer Kante zu kleben.
 */
.login-premium {
    --rail-solar-azimuth-half-span-degrees: 90;
    --rail-solar-full-sky-elevation-degrees: 38;
}

html:has(.login-premium),
.login-premium {
    min-block-size: 100dvh;
    margin: 0;
    padding: 0 !important;
    background: var(--premium-sidebar) !important;
}

.login-premium .login-container {
    position: relative;
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-block-size: 100dvh !important;
    block-size: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: var(--premium-shadow-none) !important;
}

.login-premium .login-branding {
    position: fixed !important;
    inset: 0 !important;
    inline-size: 100% !important;
    block-size: 100dvh !important;
    min-block-size: 0 !important;
}

/* Spruch: Abschluss in der Karte, mit Schiene und fahrendem Punkt. */
.login-premium .login-branding__content {
    position: static !important;
    display: block !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    min-block-size: 0 !important;
    margin: 1.5rem 0 0 !important;
    padding: 1rem 0 0 !important;
    border: 0 !important;
    border-block-start: 1px solid rgb(255 255 255 / 0.55) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: var(--premium-shadow-none) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    pointer-events: none;
}

.login-premium .login-logo-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 0.5rem !important;
    inline-size: auto !important;
    text-align: center !important;
}

.login-premium .login-branding__content .login-logo {
    display: none !important;
}

.login-premium .login-branding-subtitle {
    margin: 0 !important;
    color: var(--premium-ink) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    line-height: 1.4 !important;
    min-block-size: 2.8em !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.25em;
    text-align: center !important;
    text-shadow: none;
}

/* Jedes Wort läuft in einer eigenen Maske ein. */
.login-premium .login-slogan-word {
    display: inline-block;
    padding-block-end: 0.12em;
    margin-block-end: -0.12em;
    overflow: hidden;
    vertical-align: top;
}

.login-premium .login-slogan-word__inner {
    display: inline-block;
    transform-origin: left bottom;
    will-change: transform, opacity;
}

/* Schiene mit fahrendem Punkt: zeigt, wann der nächste Satz kommt. */
.login-premium .login-slogan-rail {
    position: relative;
    display: block;
    inline-size: 7rem;
    block-size: 1px;
    margin-block-start: 0;
    border-radius: var(--premium-radius-pill);
    background: rgb(16 19 26 / 0.16);
}

.login-premium .login-slogan-rail::before,
.login-premium .login-slogan-rail::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: 50%;
    background: rgb(16 19 26 / 0.3);
    translate: 0 -50%;
}

.login-premium .login-slogan-rail::before {
    inset-inline-start: 0;
}

.login-premium .login-slogan-rail::after {
    inset-inline-end: 0;
}

.login-premium .login-slogan-rail__train {
    position: absolute;
    inset-block-start: 50%;
    z-index: 1;
    inline-size: 1rem;
    block-size: 0.25rem;
    margin-block-start: -0.125rem;
    border-radius: var(--premium-radius-pill);
    background: var(--primary-color);
}

.login-premium .login-sky-chip {
    display: none !important;
}

/* Die Karte: Glas im Himmel. Sonne und Himmel scheinen durch, der Inhalt bleibt klar lesbar. */
.login-premium .login-form-section {
    position: relative !important;
    z-index: 6;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-block-size: 100dvh;
    padding: clamp(1.25rem, 8vh, 5rem) 1.5rem 3rem !important;
    background: transparent !important;
    pointer-events: none;
}

.login-premium .login-form-wrapper {
    position: relative;
    isolation: isolate;
    border-radius: 1.75rem;
    background: var(--premium-surface);
    inline-size: 100%;
    max-inline-size: 25rem !important;
    margin: 0 !important;
    padding: 2rem !important;
    overflow: hidden;
    pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .login-premium .login-form-wrapper {
        animation: login-card-arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes login-card-arrive {
    from {
        opacity: 0;
        transform: translate3d(0, 1.75rem, 0) scale(0.97);
    }
}

/* Logogröße kommt aus den Firmeneinstellungen (--company-login-logo-*). */
.login-premium .login-card-logo {
    display: block;
    inline-size: var(--company-login-logo-width, var(--layout-sidebar-logo-width));
    max-inline-size: 100%;
    block-size: auto;
    margin: 0.25rem auto 1.75rem;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 992px) and (max-width: 1024px) {
    .login-premium .login-card-logo {
        inline-size: var(--company-login-logo-mobile-width-lg, var(--company-login-logo-width, var(--layout-sidebar-logo-width)));
    }
}

/* Keine Begrüßung, keine zweite Überschrift: Die Karte hat genau eine Aufgabe.
   „Anmelden“ steht sichtbar auf dem Button, für Screenreader bleibt die Überschrift. */
.login-premium .login-header {
    margin: 0 !important;
}

.login-premium .login-eyebrow {
    display: none !important;
}

.login-premium .login-title {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    white-space: nowrap;
}

.login-premium .login-subtitle,
.login-premium .login-form__security {
    display: none !important;
}

/* Rechtszeile: schmale Leiste am unteren Rand, wie eine Bahnsteigkante. */
.login-premium .software-attribution {
    position: fixed;
    inset: auto 0 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1rem;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0 !important;
    padding: 0.3125rem 1rem !important;
    background: rgb(12 16 24 / 0.9);
    color: rgb(255 255 255 / 0.86) !important;
    font-size: 0.6875rem !important;
    line-height: 1.45;
    text-align: center;
}

.login-premium .software-attribution p {
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

.login-premium .software-attribution a {
    color: inherit !important;
}

/* Niedrige Fenster: Karte mittig, Seite darf scrollen. */
@media (min-width: 992px) and (max-height: 700px) {
    .login-premium .login-form-section {
        padding-block: 1rem 2.5rem !important;
    }

    .login-premium .login-branding__content {
        display: none !important;
    }

}

/* Tablet und Handy: Szene oben, Formular als Blatt, das in die Szene ragt. */
@media (max-width: 991.98px) {
    html:has(.login-premium),
    .login-premium {
        background: var(--premium-surface) !important;
        overflow-y: auto !important;
    }

    .login-premium {
        display: flex !important;
        flex-direction: column;
    }

    .login-premium .login-container {
        display: flex !important;
        flex: 1 0 auto;
        flex-direction: column;
        min-block-size: 0 !important;
    }

    .login-premium .login-branding {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto;
        block-size: clamp(14rem, 42dvh, 30rem) !important;
    }

    /* Das Logo steht in der Szene auf Zug und Bahnhofsschild. */
    .login-premium .login-branding__content {
        display: none !important;
    }

    .login-premium .login-form-section {
        flex: 1 0 auto;
        min-block-size: 0;
        justify-content: flex-start !important;
        margin-block-start: -1.25rem;
        padding: 0 !important;
        background: transparent !important;
    }

    .login-premium .login-card-logo {
        inline-size: var(--company-login-logo-mobile-width-lg, var(--company-login-logo-width, var(--layout-sidebar-logo-width)));
        margin-block-end: 1.25rem;
    }

    @media (max-width: 767.98px) {
        .login-premium .login-card-logo {
            inline-size: var(--company-login-logo-mobile-width-md, var(--company-login-logo-width, var(--layout-sidebar-logo-width)));
        }
    }

    @media (max-width: 480px) {
        .login-premium .login-card-logo {
            inline-size: var(--company-login-logo-mobile-width-sm, var(--company-login-logo-width, var(--layout-sidebar-logo-width)));
        }
    }

    /* 16 px verhindert den Zoom beim Fokus auf dem Handy. */
    .login-premium .login-form .form-control,
    .login-premium .login-form .form-label {
        font-size: 1rem !important;
    }

    .login-premium .software-attribution {
        position: static;
        display: block;
        padding: 0 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
        background: transparent;
        color: var(--premium-ink-muted) !important;
        text-align: center;
    }
}