:root{--navy:#0a2236;--orange:#ff6a00;--bg:#f4f6f8;--muted:#5d6b79}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(1200px 700px at 50% 40%,#fff 0%,var(--bg) 60%,#e8edf1 100%);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--navy);overflow:hidden}
#feld{position:fixed;inset:0;width:100%;height:100%;display:block}
main{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.logo{position:relative;display:flex;align-items:center;gap:clamp(14px,3vw,30px);padding:10px 4px}
.mark{height:clamp(70px,16vw,128px);width:auto;display:block;animation:schweben 5s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(10,34,54,.18))}
.word{height:clamp(46px,10.5vw,86px);width:auto;display:block;clip-path:inset(0 100% 0 0);animation:enthuellen 1.6s .5s cubic-bezier(.2,.8,.2,1) forwards}
.ring{position:absolute;left:var(--rx,100px);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:puls 3.2s ease-out infinite}
.ring.r2{animation-delay:1.6s}
h1{margin:6px 0 0;font-size:clamp(1.15rem,3.2vw,1.6rem);font-weight:700;letter-spacing:-.01em}
.dots i{font-style:normal;display:inline-block;animation:hupf 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.sub{margin:0;color:var(--muted);max-width:34ch}
.bar{width:min(300px,70vw);height:6px;border-radius:99px;background:#dbe2e8;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--navy),var(--orange));animation:lauf 2.2s ease-in-out infinite}
.login{position:fixed;right:16px;bottom:14px;z-index:2;color:var(--muted);font-size:13px;text-decoration:none;padding:6px 10px;border-radius:99px}
.login:hover{color:var(--orange);background:rgba(255,106,0,.08)}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes enthuellen{to{clip-path:inset(0 0 0 0)}}
@keyframes puls{0%{transform:scale(1);opacity:.75}100%{transform:scale(12);opacity:0}}
@keyframes hupf{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes lauf{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.word{clip-path:none}#feld{display:none}}