/* Start-Animation: Das Logo baut sich auf
   0.0s Aurora und Halo blühen auf
   0.2s Browserfenster steigt auf, 0.6s die drei Punkte ploppen
   0.6s Handy dockt von rechts an, 0.95s Notch
   1.05s Die M-Schleife zeichnet sich, 1.45s Beine wachsen
   1.75s Glanz läuft über das M, 1.8s Schriftzug
   2.75s Ausblenden (Kreis schließt sich auf das Logo) */

#intro{position:fixed;inset:0;z-index:100;background:#070c18;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  clip-path:circle(150% at 50% 46%);transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .4s ease .5s;font-family:Jakarta,system-ui,sans-serif}
#intro.weg{clip-path:circle(0% at 50% 46%);opacity:0}
.ohne-intro #intro{display:none}

/* Hintergrund: drei langsam treibende Farbflächen + feines Punktraster */
.intro-aurora{position:absolute;inset:-20%;opacity:0;animation:aurora-an 1.4s ease-out .05s forwards;pointer-events:none}
.intro-aurora i{position:absolute;border-radius:50%;will-change:transform}
.intro-aurora i:nth-child(1){width:46vmax;height:46vmax;left:8%;top:18%;background:radial-gradient(circle,#0ccdfc80 0,#0ccdfc00 68%);animation:treiben1 9s ease-in-out infinite alternate}
.intro-aurora i:nth-child(2){width:52vmax;height:52vmax;left:34%;top:30%;background:radial-gradient(circle,#1242fcaa 0,#1242fc00 68%);animation:treiben2 11s ease-in-out infinite alternate}
.intro-aurora i:nth-child(3){width:44vmax;height:44vmax;left:56%;top:8%;background:radial-gradient(circle,#9443fc90 0,#9443fc00 68%);animation:treiben3 10s ease-in-out infinite alternate}
@keyframes aurora-an{to{opacity:1}}
@keyframes treiben1{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes treiben2{to{transform:translate(-7vmax,-5vmax) scale(.9)}}
@keyframes treiben3{to{transform:translate(-5vmax,9vmax) scale(1.1)}}
.intro-grid{position:absolute;inset:0;background-image:radial-gradient(#ffffff22 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 0,transparent 62%);mask-image:radial-gradient(circle at 50% 46%,#000 0,transparent 62%);opacity:0;animation:einblenden 1.6s ease .3s forwards}

.intro-buehne{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.4vh,34px);transform:translateY(-2vh) scale(.9);animation:heranfahren 3s cubic-bezier(.3,0,.2,1) forwards}
@keyframes heranfahren{to{transform:translateY(-2vh) scale(1)}}
.intro-ring{position:absolute;left:50%;top:38%;width:min(46vw,300px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;border:2.5px solid #7fb4ff;opacity:0;transform:scale(.55);
  box-shadow:0 0 40px #1242fc88,inset 0 0 30px #9443fc55;animation:welle 1.3s cubic-bezier(.1,.7,.2,1) 1.9s forwards;pointer-events:none}
.intro-ring.r2{border-color:#b88bff;animation-delay:2.05s}
@keyframes welle{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(2.6)}}
.intro-halo{position:absolute;width:min(70vw,520px);aspect-ratio:1;top:50%;left:50%;translate:-50% -62%;border-radius:50%;
  background:radial-gradient(circle,#2b6bff66 0,#6a3cff33 38%,transparent 68%);transform:scale(.3);opacity:0;animation:halo 1.6s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes halo{60%{opacity:1}to{transform:scale(1);opacity:.85}}

.intro-logo{width:min(46vw,300px);height:auto;overflow:visible}
.intro-logo *{transform-box:fill-box}

/* Browserfenster */
.i-fenster{transform-origin:50% 100%;transform:translateY(46px) scale(.82) rotate(-6deg);opacity:0;animation:fenster .8s cubic-bezier(.2,1.35,.35,1) .2s forwards}
@keyframes fenster{to{transform:none;opacity:1}}
.i-punkt{transform-origin:center;transform:scale(0);animation:plopp .45s cubic-bezier(.3,1.8,.4,1) forwards}
.i-punkt:nth-of-type(1){animation-delay:.6s}.i-punkt:nth-of-type(2){animation-delay:.7s}.i-punkt:nth-of-type(3){animation-delay:.8s}
@keyframes plopp{to{transform:scale(1)}}
.i-inhalt{opacity:0;animation:einblenden .5s ease .55s forwards}

/* Handy dockt an */
.i-handy{transform-origin:0% 100%;transform:translateX(70px) rotate(14deg);opacity:0;animation:handy .85s cubic-bezier(.2,1.25,.35,1) .6s forwards}
@keyframes handy{to{transform:none;opacity:1}}
.i-notch{transform-origin:center;transform:scaleX(0);animation:notch .5s cubic-bezier(.3,1.5,.4,1) .95s forwards}
@keyframes notch{to{transform:scaleX(1)}}

/* Das M */
.i-schleife{stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen .85s cubic-bezier(.65,0,.25,1) 1.05s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.i-bein{transform-origin:50% 0%;transform:scaleY(0);animation:bein .55s cubic-bezier(.2,1.3,.35,1) 1.45s forwards}
.i-bein-r{animation-delay:1.55s}
@keyframes bein{to{transform:scaleY(1)}}
.i-glanz{transform:skewX(-18deg);animation:glanz 1s cubic-bezier(.4,0,.2,1) 1.75s forwards}
@keyframes glanz{to{transform:skewX(-18deg) translateX(420px)}}

/* Schriftzug */
.intro-wort{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;line-height:1}
.intro-wort .w{display:flex;font-weight:800;font-size:clamp(40px,7.5vw,68px);letter-spacing:-.04em;overflow:hidden;padding:0 .05em .08em}
.intro-wort .w b{display:inline-block;transform:translateY(105%);animation:buchstabe .7s cubic-bezier(.2,1,.3,1) forwards}
.intro-wort .w b:nth-child(1){animation-delay:1.8s}.intro-wort .w b:nth-child(2){animation-delay:1.86s}.intro-wort .w b:nth-child(3){animation-delay:1.92s}.intro-wort .w b:nth-child(4){animation-delay:1.98s}
@keyframes buchstabe{to{transform:none}}
.intro-wort .unter{font-size:clamp(13px,1.9vw,17px);font-weight:600;color:#aab6d6;letter-spacing:.5em;margin-right:-.5em;opacity:0;animation:unter .9s cubic-bezier(.2,.8,.2,1) 2.15s forwards}
@keyframes unter{from{letter-spacing:1.1em;margin-right:-1.1em}to{opacity:1}}
.intro-hinweis{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#ffffff55;font-size:12px;font-weight:500;opacity:0;animation:einblenden .6s ease 1.2s forwards}
@keyframes einblenden{to{opacity:1}}

/* Wenn die Seite dahinter erscheint: kurze, einmalige Einblendung der Inhalte */
.auftritt > *{animation:auftritt .6s cubic-bezier(.2,.8,.2,1) both}
.auftritt > *:nth-child(2){animation-delay:.06s}.auftritt > *:nth-child(3){animation-delay:.12s}.auftritt > *:nth-child(4){animation-delay:.18s}.auftritt > *:nth-child(5){animation-delay:.24s}
@keyframes auftritt{from{opacity:0;transform:translateY(14px)}}

/* ---------- Anmeldung: lebendiges Logo ---------- */
.login .art{background:#070c18;align-items:flex-start;justify-content:space-between}
.login .art::before{display:none}
.login .art .intro-aurora{opacity:1;animation:none}
.login .art .intro-grid{opacity:1;animation:none;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 70%);mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 70%)}
.login .schwebe{position:relative;z-index:1;align-self:center;margin:auto 0;width:min(52%,300px);animation:schweben 6s ease-in-out infinite;filter:drop-shadow(0 40px 70px #1242fc66)}
.login .schwebe img{width:100%;display:block}
@keyframes schweben{50%{transform:translateY(-14px) rotate(-1.5deg)}}
.login .art h2,.login .art p{z-index:1}
.login .kopf-mobil{display:none}
@media (max-width:860px){
  .login{background:#070c18}
  .login .form{align-content:start;padding:0 0 2rem}
  .login .kopf-mobil{display:grid;place-items:center;position:relative;overflow:hidden;height:min(42vh,320px);width:100%}
  .login .kopf-mobil .intro-aurora{opacity:1;animation:none}
  .login .kopf-mobil img{position:relative;width:132px;animation:schweben 6s ease-in-out infinite;filter:drop-shadow(0 26px 40px #1242fc77)}
  .login form{background:var(--surface);border-radius:26px 26px 0 0;padding:1.8rem 1.4rem 2rem;width:100%;margin-top:-26px;position:relative;min-height:calc(100vh - min(42vh,320px) + 26px);align-content:start}
}
@media (prefers-reduced-motion:reduce){
  #intro *{animation-duration:.01s!important;animation-delay:0s!important}
  .login .schwebe,.login .kopf-mobil img,.intro-aurora i{animation:none!important}
}