/* =====================================================================
   Elektro Pepel · Version B · Bewegung (ep-motion.css)
   Nach ep-tokens.css und ep-komponenten.css einbinden.
   Alle Animationen sind abgeschaltet, wenn das Gerät "weniger Bewegung"
   meldet (prefers-reduced-motion). Klassen sind 1:1 dieselben wie in den
   Vorlagen unter prototyp/ und quelle-dc/.
   Einstiegs-Animationen nutzen "backwards", damit Hover-Effekte danach
   wieder greifen – bitte nicht auf "both" ändern.
   ===================================================================== */
@view-transition{navigation:auto}
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
:root{--eo:cubic-bezier(.16,1,.3,1);--eio:cubic-bezier(.65,0,.35,1);--sh:0 1px 2px rgba(20,20,20,.04),0 10px 30px -14px rgba(20,20,20,.16);--sh2:0 2px 4px rgba(20,20,20,.05),0 24px 48px -20px rgba(20,20,20,.28)}
::selection{background:#FFE866;color:#141414}
:focus-visible{outline:2px solid #141414;outline-offset:3px}
*{scrollbar-width:thin;scrollbar-color:#D6D5CF transparent}
@keyframes bUp{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes bFade{from{opacity:0}to{opacity:1}}
@keyframes bLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes bDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes bPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes bScaleIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bSheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes bCount{from{--n:0}}
@keyframes bGrowX{from{transform:scaleX(0)}}
@keyframes bGrowY{from{transform:scaleY(0)}}
@keyframes bRing{from{stroke-dashoffset:var(--len,300)}}
@keyframes bDraw{from{stroke-dashoffset:var(--len,60)}to{stroke-dashoffset:0}}
@keyframes bPulse{0%{box-shadow:0 0 0 0 var(--pc,rgba(31,122,77,.45))}70%,100%{box-shadow:0 0 0 9px rgba(0,0,0,0)}}
@keyframes bBlink{50%{opacity:.2}}
@keyframes bSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@keyframes bRain{0%{transform:translateY(-3px);opacity:0}40%{opacity:1}100%{transform:translateY(4px);opacity:0}}
@keyframes bSheen{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(260%) skewX(-20deg)}}
@keyframes bToast{0%{opacity:0;transform:translate(-50%,24px) scale(.96)}10%,86%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,12px) scale(.98)}}
@keyframes bShake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes bNow{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes bFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.b-in{animation:bUp .8s var(--eo) backwards}
.b-fade{animation:bFade .6s ease backwards}
.b-pop{animation:bPop .55s var(--eo) backwards}
.b-scale{animation:bScaleIn .35s var(--eo) backwards}
.b-card{transition:transform .35s var(--eo),box-shadow .35s var(--eo)}
.b-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.b-card:active{transform:translateY(-1px) scale(.99)}
.b-arrow{transition:transform .35s var(--eo)}
.b-card:hover .b-arrow,.b-btn:hover .b-arrow{transform:translateX(4px)}
.b-btn{transition:transform .18s var(--eo),filter .2s,background-color .2s,box-shadow .25s}
.b-btn:hover{filter:brightness(1.1)}
.b-btn:active{transform:scale(.96)}
.b-sheen{position:relative;overflow:hidden;isolation:isolate}
.b-sheen::after{content:"";position:absolute;inset:-20% auto -20% 0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-130%) skewX(-20deg);pointer-events:none}
.b-sheen:hover::after{animation:bSheen .9s var(--eio)}
.b-spot{position:relative;overflow:hidden;isolation:isolate}
.b-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,221,0,.16),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:-1}
.b-spot:hover::before{opacity:1}
.b-row{transition:background-color .2s}
.b-row:hover{background-color:#FBFBF9}
.b-tile{transition:background-color .2s,color .2s,transform .2s var(--eo)}
.b-tile:hover{background-color:#F4F3EF!important;color:#141414!important}
.b-nav{transition:background-color .2s,color .2s}
.b-nav:hover{background-color:#F7F6F2}
.b-count{counter-reset:n var(--n);animation:bCount 1.6s var(--eo) backwards;font-variant-numeric:tabular-nums}
.b-count::after{content:counter(n)}
.b-tnum{counter-reset:n var(--n);transition:--n .9s var(--eo);font-variant-numeric:tabular-nums}
.b-tnum::after{content:counter(n)}
.b-ringt{transition:stroke-dashoffset 1s var(--eo),stroke .3s}
.b-wt{transition:width .9s var(--eo),background-color .3s}
.b-bar{transform-origin:left center;animation:bGrowX 1.3s var(--eo) backwards}
.b-barv{transform-origin:center bottom;animation:bGrowY 1.1s var(--eo) backwards}
.b-ring{animation:bRing 1.8s var(--eo) backwards}
.b-draw{stroke-dasharray:var(--len,60);animation:bDraw .7s var(--eo) both}
.b-live{animation:bPulse 2.2s ease-out infinite}
.b-blink{animation:bBlink 1s steps(1) infinite}
.b-now{animation:bNow 2.4s ease-in-out infinite}
.b-bell:hover svg{animation:bSwing .9s var(--eo);transform-origin:50% 12%}
.b-rain{animation:bRain 1.4s ease-in infinite}
.b-float{animation:bFloat 3.2s ease-in-out infinite}
.b-shake{animation:bShake .45s var(--eo)}
.b-toast{animation:bToast 2.6s var(--eo) both}
.b-fold{display:grid;transition:grid-template-rows .45s var(--eo),opacity .3s}
.b-fold>div{overflow:hidden;min-height:0}
.b-wide{transition:width .45s var(--eo),flex-basis .45s var(--eo),opacity .3s}
.b-chev{transition:transform .35s var(--eo)}
.b-input{transition:box-shadow .2s,border-color .2s}
.b-input:focus-within{box-shadow:0 0 0 4px rgba(255,221,0,.35),0 1px 2px rgba(20,20,20,.04)!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Zahlen-Wechsel (Stunden +/−): Klasse abwechselnd A/B setzen, damit die Animation neu startet */
@keyframes tUpA{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes tUpB{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes tDnA{from{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:none}}
@keyframes tDnB{from{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:none}}

/* Lade- und Willkommensbildschirm */
@keyframes lWire{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes lLever{from{transform:rotate(-32deg)}to{transform:rotate(0)}}
@keyframes lCurrent{from{stroke-dashoffset:var(--from)}to{stroke-dashoffset:var(--to)}}
@keyframes lOn{0%{opacity:.18;filter:grayscale(1) brightness(.9)}10%{opacity:1;filter:none}14%{opacity:.3;filter:grayscale(1)}26%{opacity:1;filter:none}30%{opacity:.55;filter:grayscale(.6)}40%,100%{opacity:1;filter:none}}
@keyframes lGlow{0%{box-shadow:0 0 0 0 rgba(255,221,0,0),0 24px 60px -24px rgba(20,20,20,.25)}60%{box-shadow:0 0 0 22px rgba(255,221,0,.16),0 0 120px 40px rgba(255,221,0,.42),0 24px 60px -24px rgba(20,20,20,.25)}100%{box-shadow:0 0 0 12px rgba(255,221,0,.12),0 0 90px 24px rgba(255,221,0,.30),0 24px 60px -24px rgba(20,20,20,.25)}}
@keyframes lRing{0%{transform:scale(.85);opacity:0}25%{opacity:.55}100%{transform:scale(2);opacity:0}}
@keyframes lBar{0%{width:0}30%{width:22%}55%{width:48%}75%{width:81%}100%{width:100%}}
@keyframes lPct{from{--n:0}to{--n:100}}
@keyframes lGrid{from{opacity:0}to{opacity:1}}
@keyframes lWord{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes lOut{to{opacity:0;transform:scale(.96);filter:blur(4px)}}
.l-pct{counter-reset:n var(--n);animation:lPct 2.4s cubic-bezier(.45,0,.2,1) .2s backwards;--n:100;font-variant-numeric:tabular-nums}
.l-pct::after{content:counter(n) " %"}
.l-word{display:inline-block;animation:lWord .8s cubic-bezier(.16,1,.3,1) backwards}