/* Anmeldemaske: 5 Varianten (.l1-.l5) und Intro: 10 Varianten (.i1-.i10). Nur CSS, kein JS, keine externen Dateien. */
.lg{margin:0;min-height:100vh;overflow-x:hidden;--g:#0f3d2a;--au:#b08d4b;--au2:#e2c98a}
.lg .scene{position:fixed;inset:0;overflow:hidden;z-index:0}
.lg .sky{position:absolute;left:0;bottom:0;width:100%;height:46vh;fill:var(--au);opacity:.35}
.lg .sky .w rect{fill:#fff;opacity:.8;animation:blink 4s infinite}.lg .sky .w rect:nth-child(odd){animation-delay:1.3s}
.lg .scene i{position:absolute;border-radius:50%;filter:blur(70px);display:none}
.lgwrap{position:relative;z-index:1;min-height:100vh;display:grid;align-items:center;padding:2rem clamp(1rem,5vw,5rem);gap:2rem}
.lg h1,.lg h2{color:inherit}
.claim img{width:72px;display:block;margin-bottom:1rem}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--au);margin:0 0 .5rem}
.claim h1{margin:0;font-size:clamp(2.8rem,7vw,5.5rem);line-height:.95;letter-spacing:-.04em;font-weight:600}
.claim h1 span{color:var(--au)}
.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:26ch;margin:1rem 0 0;opacity:.85}
.card-login{border-radius:18px;padding:2rem;width:100%;max-width:420px}
.card-login h2{margin:0;font-size:1.6rem;font-weight:600;letter-spacing:-.02em}
.card-login p{margin:.2rem 0 1.2rem}
.card-login label{display:block;font-size:.82rem;margin-top:.9rem}
.card-login input{width:100%;margin-top:.3rem;padding:.75rem .9rem;font-size:1rem;border-radius:10px}
.card-login .btn{width:100%;margin-top:1.4rem;padding:.85rem;font-size:1.05rem;border-radius:10px;font-weight:600;background:var(--g);color:#fff}
.card-login .errorlist{color:#d46a55}
@keyframes blink{0%,100%{opacity:.8}50%{opacity:.15}}
@keyframes drift{50%{transform:translate(8vw,-6vh) scale(1.2)}}

/* L1 geteilt: links dunkel mit Skyline, rechts weiße Karte */
.l1{background:#f5f8f4}.l1 .scene{right:auto;width:55%;background:linear-gradient(160deg,#0f3d2a,#09261a)}
.l1 .lgwrap{grid-template-columns:1.1fr .9fr}.l1 .claim{color:#fff}.l1 .card-login{background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px #0f3d2a1f;justify-self:center}
.l1 .claim h1{color:#fff}.l1 .muted{color:var(--muted)}
/* L2 zentriert, Glaskarte auf Verlauf */
.l2{color:#fff}.l2 .scene{background:radial-gradient(120% 90% at 50% 0,#1d6b49,#0f3d2a 55%,#071d14)}
.l2 .lgwrap{justify-items:center;text-align:center;align-content:center}.l2 .claim img{margin:0 auto 1rem}.l2 .lead{margin-inline:auto}
.l2 .card-login{background:#ffffff14;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #ffffff30;text-align:left;box-shadow:0 30px 80px #0006}
.l2 input{background:#ffffff1f;border:1px solid #ffffff40;color:#fff}.l2 .btn{background:var(--au)}.l2 .muted{color:#cfe0d4}
/* L3 Luxus: tiefes Grün, Gold, Serife */
.l3{background:#07261a;color:#f3ead4}.l3 .scene{background:radial-gradient(70% 60% at 20% 30%,#134d35,transparent)}
.l3 .sky{opacity:.18}.l3 .lgwrap{grid-template-columns:1.2fr 1fr}
.l3 h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.02em;color:var(--au2)}.l3 h1 span{font-style:italic;color:#fff}
.l3 .card-login{border:1px solid var(--au);background:#0a2f21;box-shadow:0 0 0 6px #0a2f21,0 0 0 7px #b08d4b66;justify-self:center}
.l3 .card-login h2{font-family:Georgia,serif;font-weight:400;color:var(--au2)}
.l3 input{background:transparent;border:0;border-bottom:1px solid var(--au);border-radius:0;color:#fff;padding-left:0}.l3 .btn{background:var(--au);color:#07261a;border-radius:0;letter-spacing:.08em;text-transform:uppercase}.l3 .muted{color:#a9c2b3}
/* L4 Editorial hell, große Typo */
.l4{background:#f3efe4;color:var(--g)}.l4 .sky{fill:var(--g);opacity:.09}.l4 .sky .w rect{fill:#f3efe4}
.l4 .lgwrap{grid-template-columns:1.4fr 1fr}.l4 .claim h1{font-size:clamp(3.2rem,9vw,8rem);color:var(--g)}.l4 .claim h1 span{display:block;color:var(--au)}
.l4 .lead{color:#3c5a49}.l4 .claim::after{content:"";display:block;width:5rem;height:4px;background:var(--au);margin-top:1.6rem}
.l4 .card-login{background:#fff;box-shadow:12px 12px 0 var(--g);border:2px solid var(--g);border-radius:4px;justify-self:center}
.l4 input{border:2px solid #cfd8c9;border-radius:4px}.l4 .btn{border-radius:4px;background:var(--g)}.l4 .muted{color:var(--muted)}
/* L5 Aurora in Bewegung */
.l5{background:#071d14;color:#fff}.l5 .scene i{display:block}
.l5 .o1{width:60vw;height:60vw;left:-10vw;top:-20vw;background:#2f9461;opacity:.55;animation:drift 14s infinite}
.l5 .o2{width:50vw;height:50vw;right:-10vw;bottom:-18vw;background:var(--au);opacity:.45;animation:drift 18s infinite reverse}
.l5 .sky{opacity:.22;fill:#fff}.l5 .lgwrap{grid-template-columns:1.1fr .9fr}
.l5 .claim h1 span{background:linear-gradient(90deg,var(--au),var(--au2),var(--au));background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.l5 .card-login{background:#ffffff12;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #ffffff2e;justify-self:center}
.l5 input{background:#00000040;border:1px solid #ffffff30;color:#fff}.l5 .btn{background:linear-gradient(90deg,var(--au),var(--au2));color:#0f3d2a}.l5 .muted{color:#cfe0d4}
@keyframes shine{to{background-position:-200% 0}}
@media(max-width:800px){.lgwrap,.l1 .lgwrap,.l3 .lgwrap,.l4 .lgwrap,.l5 .lgwrap{grid-template-columns:1fr}.l1 .scene{width:100%;height:42vh;bottom:auto}.l1 .claim{color:#fff;padding-top:1rem}.card-login{justify-self:center}.l1 .lgwrap{align-content:start}}

/* ---------- Intro (1-3 s), danach blendet es von selbst aus ---------- */
.intro{--T:2.6s;position:fixed;inset:0;z-index:99;display:grid;place-items:center;overflow:hidden;animation:out .5s calc(var(--T) - .5s) forwards;pointer-events:none}
@keyframes out{to{opacity:0;visibility:hidden}}
.in-bg{position:absolute;inset:0;background:#0f3d2a}
.intro .sky{position:absolute;left:0;bottom:0;width:100%;height:50vh;fill:var(--au);opacity:0}
.intro .sky .w{display:none}
.in-win{display:none}
.in-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;color:#fff}
.in-c img{width:min(28vw,120px)}.in-c b{font-size:clamp(1.8rem,5vw,3.2rem);font-weight:600;letter-spacing:.04em;color:#fff}
.in-c em{display:block;height:3px;width:0;background:var(--au)}
.intro .b{transform-box:fill-box;transform-origin:50% 100%}
/* 1 Logo zoom */
.i1{--T:2.2s}.i1 .in-c img{animation:zoom 1.2s ease-out both}.i1 .in-c b{animation:track 1.4s ease-out both}.i1 .in-c em{animation:line 1s .6s ease-out forwards}
@keyframes zoom{from{transform:scale(.5);opacity:0}}@keyframes track{from{letter-spacing:.5em;opacity:0}}@keyframes line{to{width:8rem}}
/* 2 Häuser wachsen nacheinander, Licht geht erst an, wenn das Haus steht */
.i2{--T:3s}.i2 .sky{opacity:1;height:70vh;fill:#1c5a3e}.i2 .sky .b{animation:grow .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.12s)}
.i2 .sky .w{display:block}.i2 .sky .w rect{fill:var(--au2);opacity:0;animation:lampe .35s both;animation-delay:calc(var(--i)*.12s + .65s + (var(--k,0))*.05s)}
.i2 .sky .w rect:nth-child(even){--k:1}.i2 .sky .w rect:nth-child(3n){--k:2}
.i2 .in-c{opacity:0;animation:zoom 1s 1.6s forwards}.i2 .in-c em{animation:line 1s 2s forwards}
@keyframes grow{from{transform:scaleY(0)}}@keyframes lampe{0%{opacity:0}30%{opacity:.9}45%{opacity:.2}to{opacity:1;filter:drop-shadow(0 0 3px #f6e2a8)}}
/* 3 Vorhang öffnet sich */
.i3{--T:2.4s;animation:none}.i3 .in-bg{background:none}.i3 .in-bg::before,.i3 .in-bg::after{content:"";position:absolute;top:0;bottom:0;width:50%;background:#0f3d2a}
.i3 .in-bg::before{left:0;animation:left 1s 1.1s cubic-bezier(.7,0,.2,1) forwards}.i3 .in-bg::after{right:0;animation:right 1s 1.1s cubic-bezier(.7,0,.2,1) forwards}
.i3 .in-c{animation:out .4s 1s forwards}.i3 .in-c em{animation:line .8s .2s forwards}.i3 .in-c img{animation:zoom .8s both}
.i3{animation:hide 0s 2.2s forwards}@keyframes hide{to{visibility:hidden}}@keyframes left{to{transform:translateX(-101%)}}@keyframes right{to{transform:translateX(101%)}}
/* 4 Wortmarke, Buchstaben ziehen zusammen */
.i4{--T:2.2s}.i4 .in-bg{background:#fff}.i4 .in-c img{display:none}.i4 .in-c b{color:#0f3d2a;font-size:clamp(2.2rem,8vw,5.5rem);animation:unblur 1.3s ease-out both}.i4 .in-c em{animation:line 1s .7s forwards;background:var(--au)}
@keyframes unblur{from{letter-spacing:.9em;filter:blur(14px);opacity:0}}
/* 5 Blende (Iris) */
.i5{--T:2.6s;animation:iris 1s 1.5s cubic-bezier(.6,0,.2,1) forwards}.i5 .in-bg{background:radial-gradient(circle,#1d6b49,#0f3d2a 70%)}
.i5 .in-c img{animation:zoom 1s both}.i5 .in-c b{animation:track 1.2s .2s both}
@keyframes iris{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0 at 50% 50%)}}
/* 6 Die 28 Wohneinheiten gehen an */
.i6{--T:2.8s}.i6 .in-win{display:grid;position:absolute;grid-template-columns:repeat(7,1fr);gap:.6rem;width:min(70vw,26rem);opacity:1;animation:out .4s 1.7s forwards}
.i6 .in-win span{aspect-ratio:1;background:var(--au);border-radius:4px;opacity:.12;animation:lit .5s calc(var(--i)*.04s + .1s) forwards}
.i6 .in-c{opacity:0;animation:zoom 1s 1.9s forwards}.i6 .in-c em{animation:line 1s 2s forwards}
@keyframes lit{to{opacity:1;box-shadow:0 0 18px var(--au2)}}
/* 7 Goldglanz */
.i7{--T:2.4s}.i7 .in-bg{background:linear-gradient(135deg,#0b2e20,#0f3d2a)}
.i7 .in-c b{background:linear-gradient(100deg,#8a6a2a 30%,#fff3cf 50%,#8a6a2a 70%);background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 1.8s .2s ease-in-out both}
.i7 .in-c img{animation:sweepimg 1.8s ease-in-out both}.i7 .in-c em{animation:line 1s .8s forwards}
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}@keyframes sweepimg{from{filter:brightness(.4);opacity:0}60%{filter:brightness(1.8)}}
/* 8 Diagonaler Wisch mit Goldkante */
.i8{--T:2.4s;animation:wipe .8s 1.5s cubic-bezier(.7,0,.2,1) forwards}.i8 .in-bg{background:linear-gradient(115deg,#0f3d2a 80%,var(--au) 80.5%,var(--au) 82%,#0f3d2a 82.5%)}
.i8 .in-c{animation:zoom 1s both}.i8 .in-c em{animation:line .9s .5s forwards}
@keyframes wipe{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}
/* 9 Bauplan zeichnet sich */
.i9{--T:2.8s}.i9 .in-bg{background:#0b3a5c;background:linear-gradient(#0f3d2a,#0f3d2a),repeating-linear-gradient(0deg,#ffffff10 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#ffffff10 0 1px,transparent 1px 28px);background-blend-mode:normal}
.i9 .in-bg{background:repeating-linear-gradient(0deg,#ffffff14 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#ffffff14 0 1px,transparent 1px 28px),#0f3d2a}
.i9 .sky{opacity:1;height:62vh;fill:none;stroke:var(--au2);stroke-width:.8}.i9 .sky .b{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.6s ease-out forwards;animation-delay:calc(var(--i)*.07s)}
.i9 .in-c{animation:zoom 1s 1.2s both}.i9 .in-c em{animation:line 1s 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* 10 Aurora, Schrift steigt aus dem Nebel */
.i10{--T:2.6s}.i10 .in-bg{background:radial-gradient(60% 60% at 25% 30%,#2f9461aa,transparent),radial-gradient(50% 50% at 80% 75%,#b08d4baa,transparent),#0b2e20;background-size:140% 140%;animation:aur 2.6s ease-in-out both}
.i10 .in-c img{animation:rise 1.2s both}.i10 .in-c b{animation:rise 1.2s .25s both}.i10 .in-c em{animation:line 1s .9s forwards}
@keyframes aur{from{background-position:0 0}to{background-position:60% 40%}}@keyframes rise{from{transform:translateY(24px);filter:blur(10px);opacity:0}}
@media(prefers-reduced-motion:reduce){.intro{display:none}.lg *{animation:none!important}}