/* Breiter, ruhiger Anmeldebereich; Authentifizierungsablauf bleibt bei Hanko. */
@media(min-width:981px){
    .login-layout{
        grid-template-columns:minmax(480px,38%) minmax(0,62%);
    }

    .login-panel{
        padding-left:44px;
        padding-right:44px;
    }

    .login-card,
    .login-auth{
        max-width:600px;
        width:100%;
    }

    .login-security{
        max-width:600px;
    }
}

/* Alle Hanko-Schritte nutzen dieselbe volle Breite. */
.login-auth hanko-auth,
.login-auth hanko-auth::part(container),
.login-auth hanko-auth::part(form){
    box-sizing:border-box;
    max-width:none;
    width:100%;
}

/* Jedes Form-Item belegt zuverlässig eine eigene Zeile. */
.login-auth hanko-auth::part(form-item){
    box-sizing:border-box;
    flex:1 0 100%;
    max-width:100%;
    min-width:100%;
    width:100%;
}

/* E-Mail/Weiter sowie Passwort/Anmelden und Passcode/Anmelden untereinander. */
.login-auth hanko-auth::part(input-group),
.login-auth hanko-auth::part(input),
.login-auth hanko-auth::part(text-input),
.login-auth hanko-auth::part(button),
.login-auth hanko-auth::part(primary-button),
.login-auth hanko-auth::part(secondary-button){
    box-sizing:border-box;
    max-width:none;
    min-width:100%;
    width:100%;
}

/* E-Mail-, Passwort- und Passcode-Eingaben optisch mittig ausrichten. */
.login-auth hanko-auth::part(input),
.login-auth hanko-auth::part(text-input),
.login-auth hanko-auth::part(passcode-input){
    text-align:center;
}

.login-auth hanko-auth::part(form){
    align-items:stretch;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.login-auth hanko-auth::part(button),
.login-auth hanko-auth::part(primary-button),
.login-auth hanko-auth::part(secondary-button){
    display:flex;
    justify-content:center;
    min-height:52px;
}

@media(max-width:1200px) and (min-width:981px){
    .login-layout{
        grid-template-columns:minmax(430px,40%) minmax(0,60%);
    }
    .login-panel{
        padding-left:34px;
        padding-right:34px;
    }
}

@media(max-width:980px){
    .login-card,
    .login-auth,
    .login-security{
        max-width:620px;
        width:100%;
    }
}