/* Animationen 1:1 aus dem Design "26-Minuten-Countdown" (Wortwand + Uebergaenge) */
.stage-wrap{position:relative;overflow:hidden;background:#111111}
.stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#F7F7F2;color:#111111;font-family:'Inter Tight',system-ui,sans-serif}
.stage *{box-sizing:content-box}
@keyframes slam{0%{transform:translateY(90px) scale(1.4);opacity:0}55%{transform:translateY(-8px) scale(.97);opacity:1}100%{transform:none;opacity:1}}
@keyframes fall{0%{transform:translateY(-760px)}55%{transform:translateY(0)}70%{transform:translateY(-46px)}84%{transform:translateY(0)}92%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes blurin{0%{filter:blur(28px);opacity:0;transform:scale(1.7)}100%{filter:blur(0);opacity:1;transform:none}}
@keyframes wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes drop{0%{transform:translateY(-1000px)}50%{transform:translateY(0) scale(1.18,.82)}66%{transform:translateY(-80px) scale(1)}82%{transform:translateY(0) scale(1.05,.95)}100%{transform:translateY(0) scale(1)}}
@keyframes zoomthru{0%{transform:scale(.3);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(26);opacity:0}}
@keyframes stripes{0%{background-position:0 0}100%{background-position:226px 0}}
@keyframes curL{0%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes curR{0%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes popin{0%{transform:scale(.4) rotate(-4deg);opacity:0}60%{transform:scale(1.07) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,-2px)}}
@keyframes blink{50%{opacity:0}}
.w-slam{animation:slam .45s cubic-bezier(.2,.9,.3,1.2) both}
.w-fall{animation:fall .8s ease-in both}
.w-blur{animation:blurin .5s ease-out both}
.w-wipe{animation:wipe .3s ease-out both}
.w-hidden{opacity:0}
@keyframes flipX{0%{transform:perspective(800px) rotateX(-90deg);opacity:0}60%{transform:perspective(800px) rotateX(16deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes wpop{0%{transform:scale(0) rotate(-8deg)}60%{transform:scale(1.15) rotate(2deg)}100%{transform:none}}
@keyframes tileIn{0%{transform:scale(0)}100%{transform:scale(1)}}
.w-flip{transform-origin:50% 0;animation:flipX .5s cubic-bezier(.2,.8,.3,1.2) both}
.w-pop{animation:wpop .4s cubic-bezier(.2,.9,.3,1.3) both}
.flap{transform-origin:50% 50%;animation:flipX .45s cubic-bezier(.2,.8,.3,1.2) both}
.tile-on{animation:tileIn .2s ease-out both}
.ch-hide{color:transparent}
.ch-red{color:transparent;background:#111111}
@keyframes uiIn{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}}
.ui-in{animation:uiIn .5s ease-out .2s both}
.drop{animation:drop 1.2s ease-in both}
.zoomthru{animation:zoomthru 1.5s cubic-bezier(.6,0,.9,.4) both}
.stripes{animation:stripes .35s linear infinite}
.curL{animation:curL .9s cubic-bezier(.7,0,.3,1) .15s both}
.curR{animation:curR .9s cubic-bezier(.7,0,.3,1) .15s both}
.popin{animation:popin .5s cubic-bezier(.2,.9,.3,1.2) both}
.shake{animation:shake .12s infinite}
.blink{animation:blink .6s steps(1) infinite}

@keyframes fwPunch{0%{transform:scale(1.8);filter:blur(14px);opacity:0}20%{transform:scale(.93);filter:blur(0);opacity:1}34%{transform:scale(1.03)}50%{transform:scale(1)}86%{transform:scale(1);opacity:1}100%{transform:scale(.88);opacity:0}}
@keyframes fwRing{0%{transform:scale(.25);opacity:.9}100%{transform:scale(2.8);opacity:0}}
@keyframes fwBar{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.fw-num{display:inline-block;animation:fwPunch 1s cubic-bezier(.2,.8,.2,1) both}
.fw-ring{animation:fwRing .85s cubic-bezier(.1,.6,.3,1) both}
.fw-bar{transform-origin:0 50%;animation:fwBar 1s linear both}

@keyframes zwDrop{0%{transform:translateY(-130%) rotate(-10deg);opacity:0}55%{transform:translateY(6%) rotate(1deg);opacity:1}75%{transform:translateY(-3%) rotate(0)}100%{transform:none;opacity:1}}
@keyframes zwOut{0%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(50px) scale(.96)}}
@keyframes zwSub{0%{opacity:0;letter-spacing:.9em}100%{opacity:1;letter-spacing:.3em}}
@keyframes zwBg{0%{transform:scale(1.25);opacity:0}100%{transform:scale(1);opacity:1}}
.zw-word{animation:zwOut 1s linear both}
.zw-l{display:inline-block;animation:zwDrop .5s cubic-bezier(.2,.9,.3,1.2) both}
.zw-sub{animation:zwSub .5s ease-out .2s both}
.zw-bg{animation:zwBg .7s cubic-bezier(.2,.8,.2,1) both}

@keyframes gpLo{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,3px)}40%{transform:translate(6px,-2px)}60%{transform:translate(-3px,0)}80%{transform:translate(9px,2px)}}
@keyframes gcLo{0%,100%{transform:translate(0,0)}25%{transform:translate(7px,-3px)}50%{transform:translate(-6px,2px)}75%{transform:translate(4px,1px)}}
@keyframes gpHi{0%,100%{transform:translate(0,0)}20%{transform:translate(-26px,9px)}40%{transform:translate(19px,-7px)}60%{transform:translate(-10px,0)}80%{transform:translate(28px,6px)}}
@keyframes gcHi{0%,100%{transform:translate(0,0)}25%{transform:translate(22px,-9px)}50%{transform:translate(-19px,7px)}75%{transform:translate(12px,3px)}}
@keyframes gs1{0%,100%{clip-path:inset(10% 0 82% 0);transform:translateX(30px)}20%{clip-path:inset(42% 0 50% 0);transform:translateX(-42px)}40%{clip-path:inset(70% 0 22% 0);transform:translateX(20px)}60%{clip-path:inset(25% 0 66% 0);transform:translateX(-24px)}80%{clip-path:inset(56% 0 36% 0);transform:translateX(52px)}}
@keyframes gs2{0%,100%{clip-path:inset(60% 0 30% 0);transform:translateX(-30px)}25%{clip-path:inset(15% 0 78% 0);transform:translateX(46px)}50%{clip-path:inset(80% 0 12% 0);transform:translateX(-16px)}75%{clip-path:inset(35% 0 58% 0);transform:translateX(28px)}}
@keyframes glFlash{0%{opacity:1}100%{opacity:0}}
@keyframes glJump{0%{transform:scale(1.16) skewX(-9deg)}12%{transform:scale(.97) skewX(4deg)}24%{transform:none}100%{transform:none}}
.gp-lo{animation:gpLo .32s steps(1) infinite}
.gc-lo{animation:gcLo .27s steps(1) infinite}
.gp-hi{animation:gpHi .2s steps(1) infinite}
.gc-hi{animation:gcHi .17s steps(1) infinite}
.gs-lo{animation:gs1 .5s steps(1) infinite}
.gs-hi{animation:gs1 .22s steps(1) infinite}
.gs2-lo{animation:gs2 .43s steps(1) infinite}
.gs2-hi{animation:gs2 .19s steps(1) infinite}
.gl-flash{animation:glFlash .14s steps(2) both}
.gl-jump{animation:glJump .32s steps(4) both}
.gl-shake{animation:shake .09s steps(1) infinite}

@keyframes wave{0%{transform:translateX(0)}100%{transform:translateX(-320px)}}
@keyframes waveR{0%{transform:translateX(-320px)}100%{transform:translateX(0)}}
@keyframes bubble{0%{transform:translate(0,0);opacity:0}10%{opacity:.75}100%{transform:translate(24px,-720px);opacity:0}}
@keyframes bob{0%{transform:translateY(-34px) scale(1.12)}35%{transform:translateY(10px) scale(.98)}60%{transform:translateY(-6px) scale(1.01)}80%{transform:translateY(2px)}100%{transform:none}}
.wv-f{animation:wave 1.5s linear infinite}
.wv-b{animation:waveR 2.4s linear infinite}
.bub{position:absolute;bottom:-40px;border-radius:50%;border:3px solid #111111;animation-name:bubble;animation-timing-function:ease-in;animation-iteration-count:infinite}
.bob{display:inline-block;animation:bob .9s cubic-bezier(.3,.7,.4,1) both}

@keyframes stamp{0%{transform:rotate(var(--r,0deg)) scale(2.7);opacity:0}14%{transform:rotate(var(--r,0deg)) scale(.92);opacity:1}22%{transform:rotate(var(--r,0deg)) scale(1.04)}30%{transform:rotate(var(--r,0deg)) scale(1)}86%{opacity:1}100%{transform:rotate(var(--r,0deg)) scale(.97);opacity:0}}
@keyframes stShake{0%,100%{transform:none}20%{transform:translate(-16px,9px)}40%{transform:translate(13px,-11px)}60%{transform:translate(-8px,6px)}80%{transform:translate(5px,-3px)}}
@keyframes pt1{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-520px,-260px) rotate(200deg) scale(.2);opacity:0}}
@keyframes pt2{0%{transform:translate(0,0);opacity:1}100%{transform:translate(520px,-260px) rotate(-200deg) scale(.2);opacity:0}}
@keyframes pt3{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-560px,120px) rotate(160deg) scale(.2);opacity:0}}
@keyframes pt4{0%{transform:translate(0,0);opacity:1}100%{transform:translate(560px,140px) rotate(-160deg) scale(.2);opacity:0}}
@keyframes pt5{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-260px,-340px) rotate(120deg) scale(.2);opacity:0}}
@keyframes pt6{0%{transform:translate(0,0);opacity:1}100%{transform:translate(260px,330px) rotate(-120deg) scale(.2);opacity:0}}
@keyframes pt7{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-300px,320px) rotate(220deg) scale(.2);opacity:0}}
@keyframes pt8{0%{transform:translate(0,0);opacity:1}100%{transform:translate(300px,-330px) rotate(-220deg) scale(.2);opacity:0}}
.st-wrap{animation:stShake .3s linear .12s both}
.st-box{animation:stamp 1s cubic-bezier(.3,.8,.3,1) both}
.pt{position:absolute;left:630px;top:350px;width:22px;height:22px;background:#111111;animation-duration:.55s;animation-delay:.12s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.1,.7,.3,1)}

@keyframes snTop{0%,70%{transform:none}100%{transform:translate(-90px,-470px) rotate(-5deg)}}
@keyframes snBot{0%,70%{transform:none}100%{transform:translate(90px,470px) rotate(5deg)}}
@keyframes snCut{0%,56%{transform:rotate(-7.66deg) scaleX(0);opacity:1}67%{transform:rotate(-7.66deg) scaleX(1);opacity:1}80%,100%{transform:rotate(-7.66deg) scaleX(1);opacity:0}}
.sn-top{animation:snTop 1s cubic-bezier(.6,0,.9,.5) both}
.sn-bot{animation:snBot 1s cubic-bezier(.6,0,.9,.5) both}
.sn-cut{animation:snCut 1s linear both}
@keyframes snNext{0%,66%{opacity:0}72%,100%{opacity:1}}
.sn-next{animation:snNext 1s linear both}
@keyframes ldPop{0%{transform:translateY(-40px);opacity:0}22%{transform:translateY(6px);opacity:1}34%{transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(20px)}}
.ld-num{display:inline-block;animation:ldPop 1s cubic-bezier(.2,.8,.3,1) both}

@keyframes mqL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes mqR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes lfPop{0%{transform:scale(0) rotate(-24deg)}24%{transform:scale(1.1) rotate(4deg)}38%{transform:scale(.97) rotate(-1deg)}50%{transform:scale(1) rotate(0)}86%{transform:scale(1);opacity:1}100%{transform:scale(.8) rotate(6deg);opacity:0}}
.mq-l{animation-name:mqL;animation-timing-function:linear;animation-iteration-count:infinite}
.mq-r{animation-name:mqR;animation-timing-function:linear;animation-iteration-count:infinite}
.lf-pop{animation:lfPop 1s cubic-bezier(.2,.8,.3,1) both}

@keyframes spA{0%{transform:translate(-760px,-340px)}50%{transform:translate(60px,20px)}66%{transform:translate(-20px,-6px)}80%,100%{transform:translate(0,0)}}
@keyframes spB{0%{transform:translate(760px,300px)}50%{transform:translate(-60px,-20px)}66%{transform:translate(20px,6px)}80%,100%{transform:translate(0,0)}}
.sp-a{animation:spA .9s cubic-bezier(.3,.7,.3,1) both}
.sp-b{animation:spB .9s cubic-bezier(.3,.7,.3,1) both}
@keyframes fdOn{0%{transform:rotateY(90deg) scale(.6)}60%{transform:rotateY(-10deg) scale(1.05)}100%{transform:none}}
.fd{width:60px;height:60px;border-radius:50%;animation:fdOn .3s ease-out both}
@keyframes ekDraw{0%{stroke-dashoffset:1000;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.15}}
@keyframes ekBeat{0%,28%{transform:scale(1)}36%{transform:scale(1.18)}50%{transform:scale(.97)}62%{transform:scale(1.04)}75%,100%{transform:scale(1)}}
.ek-line{stroke-dasharray:1000;animation:ekDraw 1s linear both}
.ek-num{display:inline-block;animation:ekBeat 1s ease-out both}
@keyframes jlL{0%{transform:translateX(-1300px)}40%{transform:translateX(0)}82%{transform:translateX(0)}100%{transform:translateX(1300px)}}
@keyframes jlR{0%{transform:translateX(1300px)}40%{transform:translateX(0)}82%{transform:translateX(0)}100%{transform:translateX(-1300px)}}
.jl-l{animation:jlL .78s cubic-bezier(.6,0,.2,1) both}
.jl-r{animation:jlR .78s cubic-bezier(.6,0,.2,1) both}
@keyframes tun{0%{transform:scale(.05);opacity:0}15%{opacity:1}100%{transform:scale(4.2);opacity:0}}
.tun{position:absolute;left:480px;top:270px;width:320px;height:180px;box-sizing:border-box;animation:tun 1.6s cubic-bezier(.55,0,1,.45) infinite}
@keyframes ldStr{0%{background-position:0 0}100%{background-position:60px 0}}
@keyframes ldFill{0%{width:0%}100%{width:100%}}
.ld-fill{animation:ldFill 10s linear both, ldStr .6s linear infinite}

@keyframes wipePanel{0%{transform:translateX(-2000px) skewX(-18deg)}45%,62%{transform:translateX(-260px) skewX(-18deg)}100%{transform:translateX(1500px) skewX(-18deg)}}
.wp-panel{animation:wipePanel 1.4s cubic-bezier(.7,0,.3,1) both}
@keyframes wslide{0%{transform:translateX(180px);opacity:0;filter:blur(10px)}100%{transform:none;opacity:1;filter:blur(0)}}
.w-slide{animation:wslide .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes scanReveal{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes scanLine{0%{transform:translateY(0)}100%{transform:translateY(720px)}}
.sc-text{animation:scanReveal 1.1s linear both}
.sc-line{animation:scanLine 1.1s linear both}
.w-scan{animation:scanReveal .35s linear both}
@keyframes kbIn{0%{transform:scale(0) rotate(-12deg)}40%{transform:scale(1.25) rotate(3deg)}60%{transform:scale(.95)}75%,100%{transform:scale(1) rotate(0)}}
@keyframes kbRing{0%{transform:scale(.1);opacity:1}100%{transform:scale(3.4);opacity:0}}
@keyframes kbShake{0%,100%{transform:none}15%{transform:translate(-18px,10px)}30%{transform:translate(16px,-12px)}45%{transform:translate(-10px,8px)}60%{transform:translate(8px,-4px)}75%{transform:translate(-4px,2px)}}
.kb-in{animation:kbIn .6s cubic-bezier(.2,.9,.3,1.2) both}
.kb-ring{position:absolute;left:340px;top:60px;width:600px;height:600px;border-radius:50%;border:18px solid #111111;box-sizing:border-box;animation:kbRing .8s cubic-bezier(.1,.6,.3,1) both}
.kb-shake{animation:kbShake .45s linear .2s both}
.kaboom{animation:kbIn .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes neonOn{0%{opacity:0}8%{opacity:1}12%{opacity:.1}20%{opacity:1}26%{opacity:.2}34%{opacity:.9}40%{opacity:.3}55%,100%{opacity:1}}
.neon-on{animation:neonOn 1.2s steps(1) both}
.w-flick{animation:neonOn .5s steps(1) both}
@keyframes cardIn{0%{transform:translateY(800px) rotate(-14deg)}60%{transform:translateY(-20px) rotate(-1deg)}100%{transform:translateY(0) rotate(-3deg)}}
@keyframes stampIn{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.95) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-7deg);opacity:1}}
@keyframes stampW{0%{transform:scale(1.9) rotate(-6deg);opacity:0}70%{transform:scale(.96) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
.card-in{animation:cardIn .6s cubic-bezier(.2,.8,.3,1) both}
.stamp-in{animation:stampIn .35s cubic-bezier(.3,.8,.3,1) .6s both}
.w-stamp{animation:stampW .3s cubic-bezier(.3,.8,.3,1) both}

/* Wuerfel: kippt pro Sekunde in die Richtung aus --ax */
@keyframes cubeTurn{0%{transform:translateZ(-300px)}100%{transform:translateZ(-300px) var(--ax)}}
.cube-turn{animation:cubeTurn .6s cubic-bezier(.5,-.25,.3,1.35) both}