/* ===== Peppige Animationen ===== */
body{animation:pagein .9s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* Nebelschwaden */
.fog{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fog i{position:absolute;left:-30%;width:160%;height:45vh;border-radius:50%;filter:blur(60px);opacity:.14;background:radial-gradient(ellipse at center,#ffb27a 0,transparent 65%)}
.fog i:nth-child(1){bottom:-12vh;animation:fogmove 38s linear infinite}
.fog i:nth-child(2){bottom:8vh;opacity:.09;background:radial-gradient(ellipse at center,#c0553a 0,transparent 65%);animation:fogmove 55s linear infinite reverse}
.fog i:nth-child(3){top:-14vh;opacity:.08;animation:fogmove 70s linear infinite}
@keyframes fogmove{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

/* Mauszeiger-Glut */
#glow{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:-1;
background:radial-gradient(circle,#e8741e33 0,#e8741e10 40%,transparent 70%);opacity:0;transition:opacity .5s;will-change:transform}
#glow.on{opacity:1}

/* Hero: gestaffelter Einflug, glühender Titel, schwebende Maske */
.hero .in>*{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) backwards}
.hero .in>*:nth-child(1){animation-delay:.2s}.hero .in>*:nth-child(2){animation-delay:.55s}.hero .in>*:nth-child(3){animation-delay:.8s}
.hero .in>*:nth-child(4){animation-delay:1.05s}.hero .in>*:nth-child(5){animation-delay:1.25s}.hero .in>*:nth-child(6){animation-delay:1.4s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.hero .mask{animation:rise 1.2s .2s cubic-bezier(.2,.8,.2,1) backwards,flicker 5s 1.4s infinite,floaty 7s 1.4s ease-in-out infinite;transition:translate .25s ease-out}
@keyframes floaty{50%{transform:translateY(-12px) rotate(1.2deg)}}
.hero h1{background:linear-gradient(100deg,#f3c26f 20%,#fff2c9 38%,#f3c26f 52%,#e8741e 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:rise 1.1s .55s cubic-bezier(.2,.8,.2,1) backwards,shine 6s 2s linear infinite;filter:drop-shadow(0 0 22px #e8741e99);text-shadow:none}
@keyframes shine{to{background-position:-250% 0}}
.hero .sub{animation:rise 1.1s .8s backwards,spread 2.4s .8s ease-out both}
@keyframes spread{from{letter-spacing:.1em}to{letter-spacing:.5em}}

/* Überschriften: Linie zeichnet sich, Stern dreht */
.title h2{position:relative;display:inline-block}
.title h2:after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,var(--ember),transparent);transition:left .9s .2s,right .9s .2s}
.title.in h2:after{left:0;right:0}
.title:after{animation:spin 8s linear infinite;display:block;width:1.2em;margin:14px auto 0}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reveal-Varianten */
.reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.from-left{transform:translateX(-60px)}.reveal.from-right{transform:translateX(60px)}.reveal.zoom{transform:scale(.88)}
.reveal.in{opacity:1;transform:none}

/* Termine: Datum glüht, Hover-Glanz */
.termin{position:relative;overflow:hidden}
.termin:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#e8741e22,transparent);transform:skewX(-20deg);transition:left .8s;pointer-events:none}
.termin:hover:before{left:130%}
.termin .d b{animation:emberglow 3.2s ease-in-out infinite}
@keyframes emberglow{50%{text-shadow:0 0 18px #e8741e,0 0 4px #ffb27a;color:#ffd48a}}
.termin .tag{animation:blink 4s ease-in-out infinite}
@keyframes blink{50%{box-shadow:0 0 14px #8f1d1488}}

/* Karten: 3D-Neigung + Lichtkante */
.card{transform-style:preserve-3d;will-change:transform}
.card.in{transition:transform .25s ease-out,box-shadow .35s,opacity .9s}
.card:hover{box-shadow:0 18px 50px #000c,0 0 36px #e8741e55;border-color:var(--ember)}
.card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffb27a33,transparent 55%);opacity:0;transition:opacity .3s}
.card:hover:before{opacity:1}
.card .cap{transition:padding .35s,color .3s}.card:hover .cap{padding-bottom:24px;color:#ffd48a}

/* Buttons: Glanz-Sweep */
.btn{position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffd48a66,transparent);transform:skewX(-20deg)}
.btn:hover:before{animation:sweep .8s}
@keyframes sweep{to{left:140%}}
.btn:hover{transform:translateY(-3px)}
.hero .in>.btn{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) backwards,pulse 3.2s ease-in-out infinite}
.hero .in>.btn:nth-child(5){animation-delay:1.25s,2.8s}.hero .in>.btn:nth-child(6){animation-delay:1.4s,3.2s}
@keyframes pulse{50%{box-shadow:0 0 30px #e8741e88 inset,0 0 22px #e8741e55}}

/* Logo, Sponsoren, Kontakt, Bilder, Fakten, Footer */
.brand img{animation:flicker 6s infinite}
.sp{animation:bob2 6s ease-in-out infinite}.sp:nth-child(2n){animation-delay:-3s}
@keyframes bob2{50%{transform:translateY(-6px)}}
a.sp:hover{animation:none;transform:translateY(-4px)}
.kcard{transition:transform .35s,box-shadow .35s,opacity .9s}.kcard:hover{transform:translateY(-6px);box-shadow:0 20px 50px #000b,0 0 30px #e8741e44}
.pics a:hover{transform:scale(1.02) rotate(-.4deg);box-shadow:0 12px 40px #000c,0 0 24px #e8741e55;z-index:2}
.facts div:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 0 30px #e8741e44}
.site-footer:before{animation:linepulse 4s ease-in-out infinite}
@keyframes linepulse{50%{opacity:.35}}
#lb.on img{animation:lbin .4s cubic-bezier(.2,.8,.2,1)}
@keyframes lbin{from{opacity:0;transform:scale(.9)}}

/* Scroll-Fortschritt */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--blood),var(--ember),var(--gold));box-shadow:0 0 12px var(--ember)}

@media(prefers-reduced-motion:reduce){.fog,#glow{display:none}.hero .in>*,.hero h1,.hero .mask{animation:none!important}.hero h1{-webkit-text-fill-color:initial;background:none}}
@media(hover:none){#glow{display:none}}

/* Vereinsname: zweite Zeile im Hero-Titel */
.hero h1{font-size:clamp(2rem,5vw,3.4rem)}
.hero h1 .ev{display:block;font-family:var(--head);font-size:.5em;letter-spacing:.22em;text-transform:uppercase;margin-top:.35em}
.brand b{white-space:nowrap}