/* Finale Annäherung der Anmeldung an den Hero der öffentlichen Startseite. */

/* Harte Designregel: Kopfzeile und Logo entsprechen auf jeder Breite exakt der Startseite. */
.login-header{
    box-sizing:border-box;
    margin:0 auto;
    max-width:1500px;
    padding:22px 6% !important;
    width:100%;
}
.login-header .brand{
    justify-self:start;
    margin:0;
    padding:0;
}
.login-header .brand-logo{
    display:block;
    height:38px !important;
    max-width:100%;
    width:auto;
}

/* Linke Headline wie in der Referenz: zwei klare Zeilen statt vier Umbrüche. */
.login-intro h1{
    font-size:clamp(2.65rem,3.15vw,3.65rem);
    letter-spacing:-.05em;
    line-height:.98;
}
.login-intro h1>span{
    display:block;
    max-width:100%;
    white-space:nowrap;
    width:max-content;
}

/* Auf großen Bildschirmen erhält der Hero mehr Raum als das Login-Formular. */
@media(min-width:981px){
    .login-layout{
        grid-template-columns:minmax(410px,34%) minmax(0,66%);
    }

    .login-preview{
        padding:44px 4.2% 34px;
    }

    .login-preview-copy{
        max-width:none;
        width:100%;
    }

    /* Beide Aussagen bleiben wie in der Vorlage jeweils in genau einer Zeile. */
    .login-preview h2{
        font-size:clamp(2.8rem,3.55vw,4.2rem);
        letter-spacing:-.05em;
        line-height:1.02;
        margin:0 0 18px;
        width:100%;
    }
    .login-preview h2>span,
    .login-preview h2>mark{
        display:block;
        white-space:nowrap;
        width:max-content;
    }
    .login-preview h2>span{
        max-width:100%;
    }
    .login-preview h2>mark{
        background:#fff45c;
        border-radius:11px;
        box-sizing:border-box;
        color:#17162b;
        margin-top:10px;
        max-width:none;
        min-width:max-content;
        padding:3px 20px 9px;
    }

    /* Der Begleittext nutzt die volle Hero-Breite und läuft kontrolliert über 2–3 Zeilen. */
    .login-preview-copy>p:last-child{
        font-size:1rem;
        line-height:1.55;
        max-width:none;
        width:min(100%,82ch);
    }

    /* Kalender ohne Skalierung: groß, scharf und vollständig sichtbar. */
    .login-mockup-wrap{
        align-items:flex-start;
        justify-content:flex-start;
        margin-top:18px;
        min-height:690px;
        overflow:visible;
    }
    .login-mockup-wrap .dashboard-mockup{
        border-radius:24px;
        height:690px;
        left:auto;
        margin:0;
        max-width:100%;
        position:relative;
        top:auto;
        transform:none;
        width:100%;
    }
}

/* Mittlere Desktopbreiten: weiterhin einzeilige Hero-Aussagen und voller Kalender. */
@media(min-width:981px) and (max-width:1240px){
    .login-preview{
        padding-left:3.6%;
        padding-right:3.6%;
    }
    .login-preview h2{
        font-size:clamp(2.45rem,3.3vw,3.15rem);
    }
    .login-preview h2>mark{
        padding-left:16px;
        padding-right:16px;
    }
    .login-preview-copy>p:last-child{
        width:min(100%,74ch);
    }
}

/* Im gestapelten Layout darf der Text natürlich umbrechen. */
@media(max-width:980px){
    .login-intro h1>span{
        white-space:normal;
        width:auto;
    }
    .login-preview h2>span,
    .login-preview h2>mark{
        display:block;
        width:max-content;
        max-width:100%;
    }
    .login-preview-copy>p:last-child{
        max-width:72ch;
    }
    .login-mockup-wrap{
        min-height:690px;
    }
    .login-mockup-wrap .dashboard-mockup{
        height:690px;
        left:auto;
        max-width:100%;
        position:relative;
        top:auto;
        transform:none;
        width:100%;
    }
}

@media(max-width:640px){
    .login-mockup-wrap{
        min-height:360px;
        overflow:hidden;
    }
    .login-mockup-wrap .dashboard-mockup{
        height:690px;
        min-width:900px;
        transform:scale(.5);
        transform-origin:top left;
        width:900px;
    }
}