:root{
    --navy:#0d1b2a;
    --navy-2:#10283c;
    --blue:#1667b1;
    --green:#74b02e;
    --yellow:#fdb515;
    --light:#f2f4f7;
    --text:#132238;
    --muted:#6b778c;
    --border:#dfe5ec;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:#f4f7fa}
body{min-height:100vh}

/*
 * Layout:
 * links kompakter Werbebereich,
 * rechts EIN zusammenhaengender heller Bereich.
 * Der Login wird exakt innerhalb dieses rechten Bereichs zentriert.
 */
.login-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(300px,26vw) minmax(0,1fr);
    background:
        radial-gradient(circle at 68% 30%,rgba(22,103,177,.07),transparent 28%),
        radial-gradient(circle at 78% 78%,rgba(116,176,46,.07),transparent 24%),
        #f4f7fa;
}

.hero{
    grid-column:1;
    grid-row:1;
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background:
        radial-gradient(circle at 72% 24%,rgba(22,103,177,.58),transparent 36%),
        radial-gradient(circle at 18% 82%,rgba(116,176,46,.18),transparent 32%),
        linear-gradient(145deg,#071728 0%,#0d2741 58%,#10283c 100%);
    box-shadow:14px 0 42px rgba(13,27,42,.08);
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(125deg,transparent 0 56%,rgba(116,176,46,.07) 56% 58%,transparent 58% 100%);
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,35,.06),rgba(4,16,28,.48))}
.hero-content{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:6vh clamp(26px,2.6vw,48px);
    color:#fff;
}
.eyebrow{color:#a7d95b;font-weight:800;letter-spacing:.13em;font-size:.74rem}
.hero h1{font-size:clamp(2rem,2.65vw,3.35rem);line-height:1.02;margin:.65rem 0 1.1rem;letter-spacing:-.035em}
.hero h1 span{color:var(--green)}
.hero p{font-size:.94rem;line-height:1.55;max-width:410px;color:#dce8f2;margin:0}
.feature-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:1.8rem;max-width:400px}
.feature-grid div{padding:12px 14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);backdrop-filter:blur(6px);border-radius:11px}
.feature-grid strong,.feature-grid span{display:block}
.feature-grid strong{margin-bottom:3px;font-size:.9rem}
.feature-grid span{color:#b7c8d8;font-size:.79rem}

/*
 * WICHTIG: Der Login sitzt nicht mehr in einer kuenstlichen Mittelspalte,
 * sondern wird ueber die komplette helle Flaeche rechts zentriert.
 */
.login-panel{
    grid-column:2;
    grid-row:1;
    min-width:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:42px clamp(32px,4vw,72px);
    position:relative;
    z-index:3;
}
.login-card{
    width:min(100%,560px);
    margin:0 auto;
    background:#fff;
    border:1px solid #e3e9ef;
    border-radius:20px;
    padding:48px 50px 40px;
    box-shadow:0 22px 70px rgba(13,27,42,.12);
}
.logo{display:block;max-width:400px;width:100%;height:auto;margin:0 auto 28px}
.login-card h2{font-size:2rem;line-height:1.2;margin:0 0 7px;letter-spacing:-.02em}
.muted{margin:0 0 28px;color:var(--muted);line-height:1.55}
label{display:block;margin-bottom:18px}
label span{display:block;font-size:.9rem;font-weight:700;margin-bottom:8px}
input{width:100%;height:52px;border:1px solid var(--border);border-radius:10px;padding:0 15px;font-size:1rem;background:#fff;outline:none;transition:border-color .16s ease,box-shadow .16s ease}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,103,177,.1)}
button{width:100%;height:52px;border:0;border-radius:10px;background:linear-gradient(90deg,#6aa522,#84bd38);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;transition:transform .14s ease,filter .14s ease}
button:hover{filter:brightness(1.03)}
button:active{transform:translateY(1px)}
.alert{padding:12px 14px;background:#fff3f3;border:1px solid #ffd2d2;color:#9d2020;border-radius:9px;margin-bottom:18px}
.footer{text-align:center;color:#8b96a6;font-size:.82rem;margin-top:30px}

@media(max-width:1320px){
    .login-layout{grid-template-columns:minmax(290px,28vw) minmax(0,1fr)}
    .hero-content{padding-left:28px;padding-right:28px}
    .login-panel{padding:36px 34px}
    .login-card{padding:44px 42px 38px}
}

@media(max-width:1040px){
    .login-layout{grid-template-columns:minmax(280px,32vw) minmax(0,1fr)}
    .hero-content{padding-left:24px;padding-right:24px}
    .feature-grid{gap:8px}
    .login-panel{padding:30px 26px}
    .login-card{padding:40px 34px 34px}
}

@media(max-width:820px){
    .login-layout{grid-template-columns:1fr}
    .hero{display:none}
    .login-panel{grid-column:1;min-height:100vh;padding:24px}
    .login-card{max-width:560px;padding:36px 30px}
}

/*
 * Tablet / kleinere Notebook-Hoehen:
 * Der komplette Login soll auch bei ca. 834 px Viewport-Hoehe sichtbar bleiben.
 * Breite und Desktop-Aufteilung bleiben erhalten, nur vertikale Abstaende werden kompakter.
 */
@media (min-width:821px) and (max-height:900px){
    .login-layout,
    .hero,
    .hero-content,
    .login-panel{
        min-height:100dvh;
    }

    .hero-content{
        justify-content:center;
        padding-top:24px;
        padding-bottom:24px;
    }
    .hero h1{
        font-size:clamp(1.85rem,2.3vw,2.7rem);
        margin:.45rem 0 .75rem;
    }
    .hero p{
        font-size:.86rem;
        line-height:1.42;
    }
    .feature-grid{
        margin-top:1.05rem;
        gap:7px;
    }
    .feature-grid div{
        padding:9px 12px;
    }
    .feature-grid strong{
        font-size:.84rem;
    }
    .feature-grid span{
        font-size:.73rem;
    }

    .login-panel{
        padding:18px 26px;
    }
    .login-card{
        width:min(100%,540px);
        padding:24px 34px 22px;
        border-radius:18px;
    }
    .logo{
        max-width:290px;
        margin-bottom:14px;
    }
    .login-card h2{
        font-size:1.65rem;
        margin-bottom:5px;
    }
    .muted{
        margin-bottom:17px;
        font-size:.92rem;
        line-height:1.4;
    }
    label{
        margin-bottom:12px;
    }
    label span{
        margin-bottom:6px;
        font-size:.84rem;
    }
    input,
    button{
        height:46px;
    }
    .alert{
        padding:9px 12px;
        margin-bottom:12px;
    }
    .footer{
        margin-top:17px;
        font-size:.76rem;
    }
}

/* iPad 11\" Hochformat liegt knapp ueber dem normalen Mobile-Breakpoint. */
@media (min-width:821px) and (max-width:900px){
    .login-layout{
        grid-template-columns:minmax(235px,29vw) minmax(0,1fr);
    }
    .hero-content{
        padding-left:20px;
        padding-right:20px;
    }
    .hero h1{
        font-size:clamp(1.8rem,4vw,2.35rem);
    }
    .login-panel{
        padding-left:20px;
        padding-right:20px;
    }
    .login-card{
        padding-left:28px;
        padding-right:28px;
    }
}


/* V6: neues Logo im Login deutlicher hervorheben, ohne die Card selbst aufzublasen. */
@media (min-width:901px) and (min-height:901px){
    .login-card{
        padding-top:40px;
    }
    .logo{
        max-width:400px;
        margin-bottom:28px;
    }
}

@media (min-width:821px) and (max-height:900px){
    .logo{
        max-width:290px;
        margin-bottom:14px;
    }
}


/* V7: Logo im dunklen Werbebereich besser lesbar */
.login-promo .logo,
.login-sidebar .logo,
.promo-panel .logo,
.hero-panel .logo{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.28);
    border-radius:16px;
    padding:12px 16px;
    box-shadow:0 10px 28px rgba(4,16,31,.18);
    box-sizing:border-box;
}

/* Falls das Logo in der linken Fläche als eigenes Brand-Element geführt wird */
.login-promo .brand,
.login-sidebar .brand,
.promo-panel .brand,
.hero-panel .brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.28);
    border-radius:16px;
    padding:10px 14px;
    box-shadow:0 10px 28px rgba(4,16,31,.18);
}

/* Bild selbst nicht zusätzlich abdunkeln */
.login-promo .brand img,
.login-sidebar .brand img,
.promo-panel .brand img,
.hero-panel .brand img{
    display:block;
    max-width:100%;
    height:auto;
    filter:none;
}