@font-face{font-family:"Baloo";src:url(assets/fonts/baloo-2-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Baloo";src:url(assets/fonts/baloo-2-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Baloo";src:url(assets/fonts/baloo-2-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Pacifico";src:url(assets/fonts/pacifico-latin-400-normal.woff2) format("woff2");font-display:swap}

:root{
  --pink:#ff4f9a; --pink-2:#ff7ab6; --pink-3:#ffc2dc; --pink-4:#ffe6f1;
  --berry:#b8467f; --ink:#5a1838; --gold:#ffd36e; --white:#fff;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#ffd9e8;color:var(--ink);
  font-family:"Baloo",ui-rounded,-apple-system,system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- Welt (Hintergrund) ---------- */
#world{position:fixed;inset:0;overflow:hidden;opacity:0;transition:opacity 1.2s}
#world.on{opacity:1}
#world .land{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
#night{position:absolute;inset:0;background:linear-gradient(#170f3a 0%,#3d2366 55%,#7a3f7f 100%);opacity:0;transition:opacity 3s;mix-blend-mode:multiply;pointer-events:none}
body.night #night{opacity:.86}
#stars{position:absolute;inset:0 0 45% 0;opacity:0;transition:opacity 3s 1s;pointer-events:none}
body.night #stars{opacity:1}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:twinkle 2.4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.2;transform:scale(.6)}to{opacity:1;transform:scale(1.2)}}

#sky-orb{position:absolute;top:calc(var(--safe-top) + 64px);right:28px;width:74px;height:74px;transition:transform 3s cubic-bezier(.6,0,.3,1)}
#sky-orb .sun,#sky-orb .moon{position:absolute;inset:0;transition:opacity 1.5s, transform 3s}
#sky-orb .sun{border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff3b0,#ffd36e 60%,#ffb347);box-shadow:0 0 30px 12px rgba(255,211,110,.65);animation:sunpulse 4s ease-in-out infinite}
@keyframes sunpulse{50%{box-shadow:0 0 44px 18px rgba(255,211,110,.8)}}
#sky-orb .face{position:absolute;inset:0;font-size:11px}
#sky-orb .face i{position:absolute;top:30px;width:7px;height:9px;border-radius:50%;background:#7a3b16}
#sky-orb .face i:nth-child(1){left:22px}#sky-orb .face i:nth-child(2){right:22px}
#sky-orb .face b{position:absolute;top:42px;left:29px;width:16px;height:8px;border-bottom:3px solid #7a3b16;border-radius:0 0 10px 10px}
#sky-orb .face u{position:absolute;top:40px;width:10px;height:6px;border-radius:50%;background:#ff8fb3;opacity:.8}
#sky-orb .face u:nth-of-type(1){left:10px}#sky-orb .face u:nth-of-type(2){right:10px}
#sky-orb .moon{opacity:0;transform:rotate(-40deg) scale(.6)}
#sky-orb .moon::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:-14px 6px 0 0 #fff6cf;filter:drop-shadow(0 0 14px rgba(255,246,207,.9))}
body.night #sky-orb .sun{opacity:0;transform:translateY(60px) scale(.6)}
body.night #sky-orb .moon{opacity:1;transform:rotate(0) scale(1)}

.sprite{position:absolute;font-size:30px;line-height:1;filter:drop-shadow(0 3px 2px rgba(120,20,60,.25));pointer-events:auto}
.duck{bottom:21.5%;animation:bob 2.2s ease-in-out infinite alternate}
.duck.d1{left:12%}.duck.d2{left:58%;font-size:24px;animation-delay:-.7s}.duck.d3{left:76%;font-size:20px;animation-delay:-1.3s}
.duck.flip{transform:scaleX(-1)}
@keyframes bob{from{translate:0 0;rotate:-4deg}to{translate:0 -5px;rotate:4deg}}
.duck.quack{animation:quack .5s}
@keyframes quack{30%{scale:1.4 .8}60%{scale:.9 1.2}}
#chick{left:-60px;bottom:calc(var(--safe-bot) + 6px);font-size:40px;transition:left .8s cubic-bezier(.3,1.6,.5,1)}
#chick.peek{left:6px}
#thermo{left:10px;top:calc(var(--safe-top) + 58px);font-size:26px;opacity:.95}
#thermo.hot{animation:shake .4s 3}
#corn{right:14px;bottom:calc(var(--safe-bot) + 92px);font-size:28px;opacity:0;transition:opacity .6s}
body.show-corn #corn{opacity:1}

#plane{position:absolute;top:22%;left:0;width:150px;pointer-events:auto;transform:translateX(-200px);will-change:transform}
#plane.fly{animation:fly 7s linear forwards}
@keyframes fly{0%{transform:translateX(-220px) translateY(0) rotate(4deg)}25%{transform:translateX(15vw) translateY(-14px) rotate(-3deg)}50%{transform:translateX(45vw) translateY(10px) rotate(3deg)}75%{transform:translateX(75vw) translateY(-12px) rotate(-2deg)}100%{transform:translateX(110vw) translateY(0) rotate(4deg)}}
#plane .banner{position:absolute;right:146px;top:6px;white-space:nowrap;background:#fff;color:var(--pink);font-weight:800;font-size:14px;padding:3px 12px;border-radius:4px;box-shadow:0 2px 6px rgba(150,30,80,.25);display:none;animation:flutter .35s ease-in-out infinite alternate}
#plane .banner::after{content:"";position:absolute;right:-26px;top:50%;width:26px;border-top:1px solid #a55}
#plane.has-banner .banner{display:block}
@keyframes flutter{to{transform:skewY(2deg) scaleY(.94)}}
#plane .prop{transform-box:fill-box;transform-origin:center;animation:prop .08s linear infinite}
@keyframes prop{to{transform:scaleY(.15)}}
#plane.roll svg{animation:roll 1.4s ease-in-out}
@keyframes roll{0%{transform:rotate(0)}50%{transform:rotate(-80deg) translateY(-30px)}100%{transform:rotate(-360deg)}}

/* ---------- Partikel-Canvas & HUD ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
#hud{position:fixed;top:calc(var(--safe-top) + 8px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;z-index:30;pointer-events:none;opacity:0;transition:opacity .8s}
#hud.on{opacity:1}
#hud .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1.5px rgba(184,70,127,.35);transition:all .4s}
#hud .dot.done{background:var(--pink);box-shadow:0 0 8px var(--pink-2)}
#hud .dot.now{width:22px;border-radius:6px;background:var(--pink)}
#mute{position:fixed;top:calc(var(--safe-top) + 54px);right:12px;z-index:31;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(184,70,127,.25);font-size:18px;display:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#mute.on{display:block}
#eggs{position:fixed;left:50%;bottom:calc(var(--safe-bot) + 10px);transform:translateX(-50%);z-index:31;font-size:13px;font-weight:600;color:var(--berry);background:rgba(255,255,255,.7);padding:2px 12px;border-radius:20px;opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
#eggs.on{opacity:1}
#toast{position:fixed;left:50%;top:calc(var(--safe-top) + 120px);transform:translate(-50%,-20px) scale(.9);z-index:50;max-width:86vw;width:max-content;background:#fff;color:var(--ink);border-radius:18px;padding:10px 16px;font-weight:600;font-size:16px;text-align:center;box-shadow:0 10px 30px rgba(184,70,127,.35);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.3,1.5,.5,1)}
#toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- Bühne & Karten ---------- */
#stage{position:fixed;inset:0;z-index:20;scroll-behavior:smooth;display:flex;flex-direction:column;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-top) + 64px) 18px calc(var(--safe-bot) + 46px);pointer-events:none}
.screen{position:relative;width:100%;max-width:400px;pointer-events:auto;margin:auto 0;flex-shrink:0}
.card{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-radius:30px;padding:24px 20px 20px;box-shadow:0 20px 50px rgba(184,70,127,.28),inset 0 0 0 2px rgba(255,255,255,.7);text-align:center}
.kicker{font-family:"Pacifico",cursive;color:var(--pink);font-size:22px;margin:0 0 4px}
h1,h2{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.3px}
h1{font-size:32px}h2{font-size:26px}
.lead{font-size:18px;line-height:1.35;margin:10px 0 18px;color:#7b2a52}
.small{font-size:14px;color:#a0577c;margin-top:10px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;min-height:60px}
.btn{position:relative;padding:14px 26px;border-radius:999px;font-size:19px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff5fa2,#ff2d7a);box-shadow:0 8px 0 #c4155a,0 14px 26px rgba(255,45,122,.4);transition:transform .12s, box-shadow .12s}
.btn:active{transform:translateY(5px);box-shadow:0 3px 0 #c4155a,0 6px 14px rgba(255,45,122,.4)}
.btn.ghost{background:#fff;color:var(--pink);box-shadow:0 8px 0 #f1b6cf,0 14px 26px rgba(184,70,127,.18)}
.btn.big{font-size:22px;padding:16px 34px}
.btn.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.no-btn{transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .3s;z-index:2}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.opt{position:relative;background:#fff;border-radius:22px;padding:14px 8px 12px;box-shadow:0 6px 0 #f6c3da,0 10px 22px rgba(184,70,127,.15);transition:transform .15s, box-shadow .15s, background .3s;overflow:hidden}
.opt .em{font-size:40px;display:block;line-height:1.1;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.opt .lb{display:block;font-weight:800;font-size:16px;margin-top:4px;line-height:1.1}
.opt .sub{display:block;font-size:12.5px;color:#b0638a;line-height:1.15;margin-top:2px}
.opt:active{transform:scale(.96)}
.opt.sel{background:linear-gradient(160deg,#fff,#ffe1ee);box-shadow:0 6px 0 var(--pink),0 0 0 3px var(--pink),0 14px 28px rgba(255,79,154,.35)}
.opt.sel .em{transform:scale(1.25) rotate(-8deg)}
.opts.dim .opt:not(.sel){opacity:.45;transform:scale(.94)}
.next{margin-top:0;max-height:0;padding-bottom:0;overflow:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:all .45s}
.next.on{margin-top:18px;max-height:220px;padding-bottom:12px;opacity:1;transform:none;pointer-events:auto}

/* Kalender */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}
.day{background:#fff;border-radius:16px;padding:7px 2px 6px;min-width:0;box-shadow:0 5px 0 #f6c3da;transition:all .2s;position:relative}
.day .wd{font-size:13px;font-weight:600;color:#b0638a;display:block}
.day .dd{font-size:24px;font-weight:800;display:block;line-height:1}
.day .tag{font-size:10px;color:var(--pink);display:block;min-height:22px;line-height:1.1;padding:2px 2px 0}
.day.sel{background:var(--pink);color:#fff;box-shadow:0 5px 0 #c4155a,0 0 20px rgba(255,79,154,.6);transform:scale(1.04)}
.day.sel .wd,.day.sel .tag{color:#ffe3ef}
.month{grid-column:1/-1;font-family:"Pacifico";color:var(--pink);font-size:18px;margin-top:4px;text-align:left;padding-left:4px}

/* Polaroids */
.pstack{position:relative;width:250px;height:300px;margin:6px auto 4px}
.pol{position:absolute;inset:0;background:#fff;padding:10px 10px 44px;border-radius:6px;box-shadow:0 12px 30px rgba(90,24,56,.3);transition:transform .6s cubic-bezier(.3,1.2,.4,1),opacity .6s}
.pol img,.pol video{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;pointer-events:none}
.pol .cap{position:absolute;left:0;right:0;bottom:10px;font-family:"Pacifico";color:var(--berry);font-size:17px}
.pol.gone{opacity:0}
.tap-hint{font-size:13px;color:#b0638a;animation:pulse 1.6s infinite}

/* Ticket */
.ticket{position:relative;background:linear-gradient(160deg,#fff,#ffeaf3);border-radius:22px;padding:18px 18px 16px;text-align:left;box-shadow:0 18px 40px rgba(184,70,127,.3);overflow:hidden}
.ticket::before,.ticket::after{content:"";position:absolute;top:62%;width:26px;height:26px;border-radius:50%;background:#ffd0e3}
.ticket::before{left:-13px}.ticket::after{right:-13px}
.ticket .tt{font-family:"Pacifico";color:var(--pink);font-size:22px;text-align:center}
.ticket .film{font-weight:800;font-size:23px;text-align:center;line-height:1.05;margin:2px 0 10px;background:linear-gradient(90deg,#7b1fa2,#c2185b,#ff9800);-webkit-background-clip:text;background-clip:text;color:transparent}
.ticket .row{display:flex;justify-content:space-between;gap:10px;border-top:2px dashed #f6c3da;padding:7px 2px;font-size:15.5px}
.ticket .row b{font-weight:800;text-align:right}
.stamp{position:absolute;right:16px;bottom:16px;border:4px solid #e0115f;color:#e0115f;font-weight:800;font-size:22px;padding:2px 10px;border-radius:10px;transform:rotate(-14deg) scale(3);opacity:0;letter-spacing:1px}
.stamp.on{animation:stamp .45s cubic-bezier(.5,0,.5,1.5) forwards}
@keyframes stamp{to{transform:rotate(-14deg) scale(1);opacity:.9}}

/* Sonne & Mond Zettel */
.note{width:84%;margin:8px auto 6px;background:#fff;padding:10px 10px 12px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 16px 40px rgba(20,10,40,.45);position:relative}
.note img{width:100%;display:block;border-radius:2px}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:rgba(255,194,220,.85);transform:rotate(4deg)}
body.night .card{background:rgba(255,255,255,.88)}

/* Komik */
.comic{position:fixed;left:50%;top:42%;z-index:45;font-weight:800;font-size:64px;color:#ffe14d;-webkit-text-stroke:3px #c2185b;paint-order:stroke;text-shadow:5px 5px 0 #7b1fa2;transform:translate(-50%,-50%) scale(0) rotate(-12deg);pointer-events:none;white-space:nowrap}
.comic.on{animation:bam 1.4s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes bam{0%{transform:translate(-50%,-50%) scale(0) rotate(-12deg)}25%{transform:translate(-50%,-50%) scale(1.15) rotate(-6deg)}80%{transform:translate(-50%,-50%) scale(1) rotate(-6deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.4) rotate(-6deg);opacity:0}}
.glitch{position:relative;display:inline-block;font-weight:800;font-size:34px;letter-spacing:1px;background:linear-gradient(90deg,#6a1b9a,#d81b60,#ff8f00);-webkit-background-clip:text;background-clip:text;color:transparent;animation:glitch 3s infinite}
@keyframes glitch{0%,92%,100%{transform:none;filter:none}93%{transform:translate(2px,-1px) skewX(8deg);filter:hue-rotate(60deg)}95%{transform:translate(-2px,1px) skewX(-6deg)}97%{transform:translate(1px,0)}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translate(-6px,3px) rotate(-1deg)}40%{transform:translate(6px,-3px) rotate(1deg)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-1px)}}

/* Ein- und Ausblendungen (abwechselnd) */
.in-pop{animation:inpop .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes inpop{from{transform:scale(.6) translateY(40px);opacity:0}}
.in-drop{animation:indrop .8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes indrop{from{transform:translateY(-110vh) rotate(-8deg)}}
.in-flip{animation:inflip .8s cubic-bezier(.3,1.3,.5,1) both}
@keyframes inflip{from{transform:perspective(800px) rotateY(-100deg);opacity:0}}
.in-swirl{animation:inswirl .9s cubic-bezier(.3,1.3,.5,1) both}
@keyframes inswirl{from{transform:rotate(-200deg) scale(.1);opacity:0}}
.in-slide{animation:inslide .7s cubic-bezier(.3,1.3,.5,1) both}
@keyframes inslide{from{transform:translateX(110vw) skewX(-12deg)}}
.in-rise{animation:inrise .9s cubic-bezier(.3,1.2,.5,1) both}
@keyframes inrise{from{transform:translateY(100vh) scale(.8)}}
.in-zoom{animation:inzoom .9s cubic-bezier(.2,1,.3,1) both}
@keyframes inzoom{from{transform:scale(2.4);opacity:0;filter:blur(10px)}}
.out-left{animation:outleft .45s ease-in both}
@keyframes outleft{to{transform:translateX(-110vw) rotate(-10deg);opacity:0}}
.out-up{animation:outup .5s ease-in both}
@keyframes outup{to{transform:translateY(-100vh) scale(.7);opacity:0}}
.out-shrink{animation:outshrink .45s ease-in both}
@keyframes outshrink{to{transform:scale(0) rotate(30deg);opacity:0}}
.out-fade{animation:outfade .5s ease both}
@keyframes outfade{to{opacity:0;filter:blur(8px)}}

/* ---------- Intro ---------- */
#intro{position:fixed;inset:0;z-index:15;background:radial-gradient(120% 80% at 50% 0%,#ffe0ee,#ffb6d5 60%,#ff8fc0);overflow:hidden;transition:opacity 1s}
#intro.off{opacity:0;pointer-events:none}
.fheart{position:absolute;bottom:-40px;font-size:22px;opacity:.7;animation:floatup linear infinite}
@keyframes floatup{to{transform:translateY(-115vh) rotate(25deg);opacity:0}}
.typed::after{content:"|";animation:blink .8s infinite;color:var(--pink);font-weight:400}
.typed.done::after{content:""}
@keyframes blink{50%{opacity:0}}
.no-msg{min-height:22px;font-size:15px;color:#c03c7c;font-weight:600;margin-top:12px;transition:transform .3s}
.no-msg.bump{animation:inpop .4s}

/* ---------- Vito-Szene ---------- */
#vito{position:fixed;inset:0;z-index:25;background:#0b0710;overflow:hidden;display:none}
#vito.on{display:block}
#vito .blur{position:absolute;inset:-40px;background:url(assets/img/vans-night.webp) center/cover;filter:blur(24px) brightness(.55);transform:scale(1.2)}
#vito .cam{position:absolute;left:50%;top:50%;width:220vw;aspect-ratio:1400/980;transform:translate(-50%,-50%) scale(1.15);transform-origin:47% 55%;will-change:transform,filter}
#vito .cam.go{transition:transform 5s cubic-bezier(.4,0,.2,1)}
#vito .layer{position:absolute;inset:0;background:url(assets/img/vito.webp) center/100% 100% no-repeat}
#vito .hole{position:absolute;inset:0;clip-path:polygon(39.7% 41.3%,43.9% 33.7%,47.1% 32.4%,55% 31.8%,55.4% 45.9%,56.1% 75.5%,40.4% 76%,40% 61.2%);background:radial-gradient(45% 35% at 62% 52%,rgba(255,170,210,.95) 0%,rgba(255,90,160,.55) 35%,rgba(40,10,30,.95) 75%),linear-gradient(#1a0a16,#2b0f22 60%,#120610);opacity:0;transition:opacity .4s}
#vito .glow{position:absolute;inset:0;clip-path:inherit}
#vito .door{position:absolute;inset:0;background:url(assets/img/vito.webp) center/100% 100% no-repeat;clip-path:polygon(39.7% 41.3%,43.9% 33.7%,47.1% 32.4%,55% 31.8%,55.4% 45.9%,56.1% 75.5%,40.4% 76%,40% 61.2%);transform-origin:40% 50%;transition:transform 2.2s cubic-bezier(.5,0,.2,1),filter 2.2s;backface-visibility:visible}
#vito .persp{position:absolute;inset:0;perspective:900px;perspective-origin:40% 50%}
#vito.open .door{transform:rotateY(-78deg);filter:brightness(.8)}
#vito.open .hole{opacity:1}
#basti{position:absolute;right:-4%;bottom:0;height:50%;aspect-ratio:700/1452;transform:translateX(30%) translateY(8%);opacity:0;transition:transform 1.4s cubic-bezier(.3,1.3,.5,1),opacity .8s;filter:drop-shadow(0 0 18px rgba(255,140,190,.55))}
#vito.basti #basti{opacity:1;transform:translateX(0) translateY(0)}
#basti img:first-child{width:100%;height:100%;display:block}
#basti .rose{position:absolute;left:23%;top:36%;width:62%;transform-origin:85% 50%;animation:rosewig 1.2s ease-in-out infinite alternate}
@keyframes rosewig{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
#vito .vtxt{position:absolute;left:0;right:0;text-align:center;color:#fff;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.7);padding:0 20px;opacity:0;transition:opacity .8s, transform .8s;transform:translateY(10px)}
#vito .vtxt.on{opacity:1;transform:none}
#vito .t1{top:calc(var(--safe-top) + 70px);font-size:28px}
#vito .t2{top:calc(var(--safe-top) + 70px);font-family:"Pacifico";font-weight:400;font-size:30px}
#vito .go-btn{position:absolute;left:50%;bottom:calc(var(--safe-bot) + 46px);transform:translateX(-50%) scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
#vito.ready .go-btn{transform:translateX(-50%) scale(1)}
#vito .cam.toon{animation:toon 2.6s ease-in forwards}
@keyframes toon{0%{filter:none}40%{filter:saturate(2.2) contrast(1.4) hue-rotate(-20deg) brightness(1.2)}100%{filter:saturate(3) contrast(1.8) brightness(2.2) hue-rotate(-40deg) blur(6px)}}
#flash{position:fixed;inset:0;z-index:60;background:radial-gradient(circle,#fff,#ffd6ea 50%,#ff7ab6);opacity:0;pointer-events:none}
#flash.on{animation:flash 1.6s ease forwards}
@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
#vito video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#vito.has-video video{display:block}
#vito.has-video .cam,#vito.has-video .blur,#vito.has-video #basti{display:none}
#vito video.v2{opacity:0;transition:opacity .2s}
#vito.clip2 video.v2{opacity:1}

.capy{width:96px;margin:0 auto -6px;display:block}
.welcome{position:fixed;left:0;right:0;top:34%;z-index:45;text-align:center;font-family:"Pacifico";font-size:46px;color:#fff;text-shadow:0 4px 0 var(--pink),0 10px 30px rgba(184,70,127,.5);opacity:0;pointer-events:none}
.welcome.on{animation:welcome 3.2s ease forwards}
@keyframes welcome{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.05)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-30px)}}
.welcome small{display:block;font-family:"Baloo";font-weight:800;font-size:18px;letter-spacing:4px;text-shadow:0 2px 8px rgba(184,70,127,.6)}

@media (prefers-reduced-motion:reduce){.fheart,.cl,.cl2,.cl3{animation:none}}

#capy{right:-90px;bottom:calc(var(--safe-bot) + 10px);width:66px;transition:right .9s cubic-bezier(.3,1.5,.5,1)}
body.show-capy #capy{right:4px}
/* kleinere Displays bzw. Safari mit eingeblendeter Leiste */
@media (max-height:740px){
  #stage{padding-top:calc(var(--safe-top) + 30px);padding-bottom:calc(var(--safe-bot) + 34px)}
  .card{padding:18px 16px 16px;border-radius:26px}
  h1{font-size:27px}h2{font-size:22px}.kicker{font-size:19px}
  .lead{font-size:16px;margin:8px 0 14px}
  .btn{padding:12px 22px;font-size:17px}.btn.big{font-size:19px;padding:13px 28px}
  .opt{padding:10px 6px 9px}.opt .em{font-size:32px}.opt .lb{font-size:15px}
  .day{padding:5px 4px}.day .dd{font-size:20px}.cal{gap:8px}
  .pstack{width:210px;height:250px}
  .note{width:72%}
  .ticket .row{padding:5px 2px;font-size:14.5px}.ticket .film{font-size:20px}
  .capy{width:76px}
  #mute{top:calc(var(--safe-top) + 34px)}#thermo{top:calc(var(--safe-top) + 34px)}
}

#stage.scroll{pointer-events:auto}