/* Login-Seite im visuellen Rhythmus der öffentlichen Startseite. */
.login-page{
    background:#fff;
    display:block;
    min-height:100vh;
    padding:0;
}

.login-header{
    align-items:center;
    background:#fff;
    display:grid;
    gap:28px;
    grid-template-columns:1fr auto 1fr;
    margin:0 auto;
    max-width:1500px;
    padding:17px 6%;
    position:relative;
    z-index:5;
}
.login-header .brand{justify-self:start}
.login-header .brand-logo{
    display:block;
    height:38px;
    max-width:100%;
    width:auto;
}
.login-header nav{
    display:flex;
    gap:24px;
    justify-content:center;
}
.login-header nav a{
    color:var(--muted);
    font-weight:650;
    padding:8px 5px;
    text-decoration:none;
}
.login-header nav a:hover{color:var(--primary)}
.login-header .login-button{
    border:1.5px solid #201f29;
    border-radius:999px;
    color:#201f29;
    font-weight:750;
    justify-self:end;
    padding:10px 27px;
    text-decoration:none;
}
.login-header .login-button:hover{background:#201f29;color:#fff}

.login-layout{
    display:grid;
    grid-template-columns:minmax(410px,35%) minmax(0,65%);
    margin:0 auto 24px;
    max-width:1500px;
    min-height:calc(100vh - 96px);
    overflow:hidden;
}
.login-panel{
    align-items:flex-start;
    background:linear-gradient(145deg,#fff 0%,#faf9ff 100%);
    display:flex;
    padding:74px clamp(44px,6vw,92px) 58px;
}
.login-card{
    box-shadow:none;
    max-width:540px;
    padding:0;
    width:100%;
}
.login-intro .landing-kicker{
    color:var(--primary);
    font-size:.78rem;
    letter-spacing:.11em;
    margin-bottom:24px;
}
.login-intro h1{
    display:grid;
    font-size:clamp(3rem,4.5vw,4.8rem);
    letter-spacing:-.055em;
    line-height:.98;
    margin:0 0 22px;
}
.login-intro h1 span{display:block}
.login-intro>.muted{
    font-size:1.02rem;
    line-height:1.65;
    margin:0;
    max-width:500px;
}
.login-auth{
    margin-top:42px;
    max-width:none;
    width:100%;
}
.login-auth h2{
    font-size:1.25rem;
    margin:0 0 18px;
}
.login-auth hanko-auth{
    display:block;
    width:100%;
    --color-primary:var(--primary);
    --color-primary-hover:var(--primary-dark);
    --color-text:var(--text);
    --color-text-secondary:var(--muted);
    --color-background:#fff;
    --color-border:#d7d4e2;
    --border-radius:12px;
    --font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-size:16px;
    --item-height:52px;
    --container-padding:0;
    --container-max-width:100%;
    --input-min-width:100%;
    --button-min-width:100%;
}
.login-auth hanko-auth::part(container){
    max-width:none;
    width:100%;
}
/* Passcode- und Passwortschritte werden wie das E-Mail-Formular vertikal aufgebaut. */
.login-auth hanko-auth::part(form){
    align-items:stretch;
    display:grid;
    gap:14px;
    grid-template-columns:minmax(0,1fr);
    width:100%;
}
.login-auth hanko-auth::part(form-item),
.login-auth hanko-auth::part(input-group),
.login-auth hanko-auth::part(button),
.login-auth hanko-auth::part(input){
    box-sizing:border-box;
    max-width:none;
    min-width:0;
    width:100%;
}
.login-auth hanko-auth::part(button){
    display:flex;
    justify-content:center;
}
.login-auth .notice{margin:0}
.login-security{
    align-items:flex-start;
    background:rgba(255,255,255,.82);
    border:1px solid #e5e1f0;
    border-radius:16px;
    display:flex;
    gap:12px;
    margin-top:34px;
    max-width:420px;
    padding:14px 16px;
}
.login-security>span{
    align-items:center;
    background:#eee9ff;
    border-radius:11px;
    color:#6652e8;
    display:flex;
    flex:0 0 38px;
    font-size:1.15rem;
    height:38px;
    justify-content:center;
}
.login-security strong,.login-security small{display:block}
.login-security strong{font-size:.83rem;margin-bottom:3px}
.login-security small{color:var(--muted);font-size:.73rem;line-height:1.45}

.login-preview{
    background:radial-gradient(circle at 86% 7%,rgba(255,157,94,.52),transparent 28%),radial-gradient(circle at 58% 100%,rgba(255,80,177,.28),transparent 34%),linear-gradient(120deg,#7838ef 0%,#8c2eed 48%,#c837de 100%);
    border-radius:28px 0 0 28px;
    color:#fff;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:48px 5% 38px;
    position:relative;
}
.login-preview:before{
    background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
    background-size:5px 5px;
    content:"";
    inset:0;
    mix-blend-mode:soft-light;
    opacity:.24;
    pointer-events:none;
    position:absolute;
}
.login-preview-copy,.login-mockup-wrap{position:relative;z-index:1}
.login-preview-copy{max-width:900px}
.login-preview .landing-kicker{color:#fff;margin-bottom:14px}
.login-preview h2{
    font-size:clamp(3rem,4.35vw,5.4rem);
    letter-spacing:-.055em;
    line-height:.95;
    margin:0 0 20px;
}
.login-preview h2 span{display:block}
.login-preview h2 mark{
    background:#fff45c;
    border-radius:12px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
    color:#17162b;
    display:inline-block;
    line-height:1.05;
    margin-top:12px;
    padding:4px 12px 10px;
}
.login-preview-copy>p:last-child{
    font-size:1rem;
    line-height:1.55;
    margin:0;
    max-width:720px;
}
.login-mockup-wrap{
    align-items:flex-start;
    display:flex;
    flex:1;
    justify-content:center;
    margin-top:22px;
    min-height:0;
    width:100%;
}
.login-mockup-wrap .dashboard-mockup{
    height:690px;
    left:auto;
    margin:0;
    max-width:none;
    position:relative;
    top:auto;
    transform:scale(.79);
    transform-origin:top center;
    width:980px;
}

@media(max-width:1200px){
    .login-header nav{gap:14px}
    .login-layout{grid-template-columns:minmax(360px,39%) minmax(0,61%)}
    .login-panel{padding:58px 7% 50px}
    .login-preview{padding-left:5%;padding-right:4%}
    .login-preview h2{font-size:clamp(2.7rem,5vw,4.5rem)}
    .login-mockup-wrap .dashboard-mockup{transform:scale(.68)}
}

@media(max-width:980px){
    .login-header{grid-template-columns:1fr auto}
    .login-header nav{display:none}
    .login-layout{grid-template-columns:1fr;margin-bottom:0}
    .login-panel{padding:52px 8%}
    .login-card,.login-auth{max-width:600px}
    .login-preview{border-radius:0;min-height:760px;padding:54px 7% 38px}
    .login-preview-copy{max-width:760px}
    .login-mockup-wrap{justify-content:flex-start}
    .login-mockup-wrap .dashboard-mockup{transform:scale(.72);transform-origin:top left}
}

@media(max-width:640px){
    .login-header .login-button{font-size:.8rem;padding:8px 16px}
    .login-panel{padding:42px 7% 44px}
    .login-intro .landing-kicker{margin-bottom:18px}
    .login-intro h1{font-size:clamp(2.45rem,13vw,3.35rem);margin-bottom:16px}
    .login-intro>.muted{font-size:.96rem;line-height:1.58}
    .login-auth{margin-top:34px}
    .login-preview{min-height:610px;padding:42px 0 34px 7%}
    .login-preview h2{font-size:clamp(2.35rem,11vw,3.5rem);padding-right:7%}
    .login-preview-copy>p:last-child{font-size:.93rem;padding-right:7%}
    .login-mockup-wrap{justify-content:flex-start;margin-top:22px}
    .login-mockup-wrap .dashboard-mockup{transform:scale(.47);transform-origin:top left}
}