@font-face{font-family:Fraunces;src:url(/assets/Fraunces.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--paper:#F7F2E9;--surface:#FFFCF6;--ink:#173844;--muted:#4F6468;--petrol:#287E87;--coral:#DF705F;--ochre:#D9AC62;--rose:#D998AA;--aqua:#83C7C3;--action:#285F4F;--action-h:#1F4B3F;--rust:#B4533F;--night:#0f2a22;--night2:#1d4a3a}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--paper);font:18px/1.6 Arial,Helvetica,sans-serif}
img{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}

/* Bühne */
.stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;
 background:radial-gradient(120% 70% at 50% 110%,#2f5c47 0%,rgba(47,92,71,0) 60%),linear-gradient(#0a211b 0%,#133a2d 45%,var(--night2) 100%)}
.stage::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.18;mix-blend-mode:soft-light;
 background:radial-gradient(circle at 20% 30%,#fff3 0 1px,transparent 2px) 0 0/7px 7px,radial-gradient(circle at 70% 60%,#0002 0 1px,transparent 2px) 0 0/11px 11px}
.dawn{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(70% 55% at 50% 92%,rgba(217,172,98,.55),rgba(223,112,95,.18) 45%,rgba(223,112,95,0) 70%)}
.stars{position:absolute;inset:-2% -2% 40% -2%;z-index:1;pointer-events:none;translate:calc(var(--px,0)*-6px) calc(var(--py,0)*-4px + var(--sy,0)*60px)}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--paper);opacity:.7;animation:twinkle var(--tw,3s) ease-in-out var(--td,0s) infinite alternate}
@keyframes twinkle{from{opacity:.15}to{opacity:.85}}

.garland{position:absolute;left:-2%;right:-2%;top:-1%;height:19%;z-index:3;pointer-events:none;transform-origin:50% 0;animation:gsway 8s ease-in-out infinite alternate;translate:calc(var(--px,0)*5px) calc(var(--sy,0)*40px)}
@keyframes gsway{from{rotate:-.5deg}to{rotate:.6deg}}
.garland svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.garland path{fill:none;stroke:#e9e1d2;stroke-width:1.4;opacity:.75;vector-effect:non-scaling-stroke}
.lantern{position:absolute;width:clamp(12px,1.25vw,20px);aspect-ratio:3/4;translate:-50% 0;border-radius:40% 40% 46% 46%;
 background:radial-gradient(circle at 50% 40%,#fff8 0,var(--c) 55%);box-shadow:0 0 14px 4px color-mix(in srgb,var(--c) 70%,transparent),0 0 40px 10px color-mix(in srgb,var(--c) 30%,transparent);
 transform-origin:50% -7px;animation:flicker 2.8s ease-in-out var(--fd) infinite alternate,swing var(--sw,3.4s) ease-in-out var(--fd) infinite alternate}
@keyframes swing{from{rotate:-7deg}to{rotate:7deg}}
.lantern::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:7px;background:#e9e1d2;opacity:.7}
@keyframes flicker{from{filter:brightness(.92)}to{filter:brightness(1.12)}}

.ribbon{position:absolute;z-index:9;left:41%;top:86%;width:clamp(90px,10vw,160px);translate:-50% -50%;rotate:-7deg;pointer-events:none}
.ribbon img{width:100%;height:auto;filter:drop-shadow(0 6px 10px #0006);transform-origin:70% 50%;animation:rflut 3.6s ease-in-out infinite alternate}
@keyframes rflut{from{transform:rotate(-3deg) scaleX(1)}to{transform:rotate(3deg) scaleX(.97)}}
.ribbon{translate:calc(-50% + var(--px,0)*18px) calc(-50% + var(--sy,0)*-60px)}
.string{position:absolute;z-index:8;left:50%;top:0;width:1px;height:14%;background:#e9e1d2;opacity:0}

.crowd{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:4}
.f{position:absolute;left:calc(var(--x)*1%);bottom:calc(var(--b)*1%);height:calc(var(--h)*1%);z-index:var(--z,8);cursor:pointer;-webkit-tap-highlight-color:transparent;
 translate:calc(-50% + var(--px,0)*var(--dp,10)*1.6px) calc(var(--py,0)*var(--dp,10)*1px + var(--sy,0)*var(--dp,10)*-5px)}
.f .mv,.f .bb{height:100%}
.f img{height:100%;width:auto;max-width:none;transform-origin:50% 100%;animation:breathe var(--br,5s) ease-in-out var(--bd,0s) infinite alternate}
.f img.flip{scale:-1 1}
@keyframes breathe{from{transform:scaleY(1)}to{transform:scaleY(1.018)}}
.hill{position:absolute;left:-4%;right:-4%;bottom:0;pointer-events:none;translate:calc(var(--px,0)*var(--dp,6)*1.6px) calc(var(--sy,0)*var(--dp,6)*-5px)}
.hill svg{width:100%;height:100%;display:block}
.hill.back{height:40%;z-index:5;--dp:5}
.hill::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 2px);height:160px;background:#0f2a22}
.hill.back::after{background:#1a3d30}
.hill.front{height:17%;z-index:7;--dp:13}

.falter{position:absolute;z-index:9;left:90%;top:62%;height:clamp(54px,8vh,92px)}
.falter .flutter{height:100%}
.falter img{height:100%;width:auto;animation:hover 3.2s ease-in-out infinite alternate}
@keyframes hover{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(8px,-10px) rotate(3deg)}100%{transform:translate(-6px,4px) rotate(-2deg)}}

/* Positionen, breit */
#f-freunde{--x:9;--b:22;--h:52;--z:4} #f-musik{--x:26;--b:25;--h:44;--z:4} #f-familie{--x:45.5;--b:24;--h:56;--z:4} #f-grosseltern{--x:64.5;--b:24;--h:52;--z:4} #f-naehe{--x:83;--b:24;--h:49;--z:4}
#f-pfuetze{--x:93;--b:9;--h:34;--z:6}
#f-molch{--x:4.5;--b:2;--h:26} #f-maus{--x:11.5;--b:3;--h:20} #f-vogel{--x:19.5;--b:5;--h:15} #f-malina{--x:31;--b:1;--h:50} #f-morio{--x:51;--b:2;--h:40} #f-joris{--x:67.5;--b:2;--h:45} #f-otter{--x:80;--b:1;--h:19} #f-frosch{--x:90.5;--b:2;--h:27}

/* Text */
.hero{position:absolute;z-index:10;left:50%;top:13%;translate:-50% calc(var(--sy,0)*-60px);opacity:calc(1 - var(--sy,0)*1.3);width:min(92vw,880px);text-align:center;display:grid;justify-items:center;gap:clamp(10px,1.8vh,18px)}
.kicker{font:600 clamp(15px,1.25vw,19px)/1.3 Fraunces,Georgia,serif;letter-spacing:.02em;color:var(--ochre)}
.macher{font:italic 500 clamp(15px,1.15vw,18px)/1.4 Fraunces,Georgia,serif;color:#dfe6e2}
.lbl .wann{display:block;letter-spacing:.02em;text-transform:none;font-weight:400;margin-top:4px}
h1{font:600 clamp(34px,4.6vw,68px)/1.04 Fraunces,Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
[data-termin]{white-space:nowrap}
.sub{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:#dfe6e2;max-width:52ch;text-wrap:balance}
.count{display:flex;gap:clamp(10px,1.6vw,22px);align-items:flex-end;justify-content:center;margin-top:4px}
.lbl{font:700 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#cfd9d6;margin-top:6px}
.count .u{display:grid;justify-items:center;min-width:2.1em}
.count b{font:600 clamp(30px,3.6vw,52px)/1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;color:var(--paper)}
.count i{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#cfd9d6;margin-top:4px}
.count.open{font:600 clamp(22px,2.4vw,32px)/1.2 Fraunces,Georgia,serif;color:var(--ochre)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 28px;border-radius:10px;background:var(--ochre);color:var(--ink);font:700 17px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;box-shadow:0 8px 30px #0005;transition:transform .14s,background .14s}
.cta:hover{background:#e6bd78;transform:translateY(-2px)}
.cta:focus-visible,.ctrl:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.res :focus-visible{outline-color:var(--action)}

.lines{position:absolute;z-index:10;left:50%;top:36%;translate:-50% 0;width:min(90vw,760px);text-align:center;pointer-events:none}
.line{position:absolute;left:0;right:0;opacity:0;font:italic 500 clamp(22px,2.6vw,38px)/1.25 Fraunces,Georgia,serif;text-wrap:balance}
.line small{display:block;font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin-bottom:12px;font-style:normal}

.ctrl{position:absolute;z-index:12;top:max(14px,env(safe-area-inset-top));right:16px;background:#0e252dcc;color:var(--paper);border:1px solid #e9e1d266;border-radius:999px;padding:8px 16px;font:700 14px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.ctrl[hidden]{display:none}
.ctrl.pause{top:auto;bottom:max(14px,env(safe-area-inset-bottom));right:16px}
.ruhe .bug,.ruhe .shoot{display:none}
.ruhe *,.ruhe *::before,.ruhe *::after{animation:none!important;transition:none!important}
.ruhe .js .reveal,.ruhe.js .reveal{opacity:1;translate:none}
.ruhe .helper{translate:0 0!important}

/* Ablauf, nur mit .play */
.play .star{animation:starin 1.6s ease-out calc(var(--td,0s)*.3 + .2s) both,twinkle var(--tw,3s) ease-in-out 2s infinite alternate}
@keyframes starin{from{opacity:0}}
.play .dawn{animation:fade 2.6s ease-in-out 7.4s both}
@keyframes fade{from{opacity:0}}
.play .garland path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s ease-in-out 1.4s both}
@keyframes draw{to{stroke-dashoffset:0}}
.play .lantern{animation:pop .5s cubic-bezier(.3,1.6,.5,1) var(--ld) both,flicker 2.8s ease-in-out var(--fd) infinite alternate,swing var(--sw,3.4s) ease-in-out var(--fd) infinite alternate}
@keyframes pop{from{opacity:0;scale:.2}}
.play .string{animation:string 8.4s linear .4s both}
@keyframes string{0%{opacity:0;height:0}12%{opacity:.7;height:var(--sh,14%)}88%{opacity:.7;height:var(--sh,14%)}96%,100%{opacity:0;height:var(--sh,14%)}}
.play .ribbon{animation:ribbon 9.4s cubic-bezier(.45,0,.3,1) .4s both}
@keyframes ribbon{0%{top:-12%;left:50%;rotate:0deg;opacity:0}12%{top:var(--rtop,19%);left:50%;rotate:4deg;opacity:1}
 22%{rotate:-5deg;top:var(--rtop,19%)}32%{rotate:4deg;top:var(--rtop,19%)}42%{rotate:-4deg;top:var(--rtop,19%)}52%{rotate:3deg;top:var(--rtop,19%)}62%{rotate:-3deg;top:var(--rtop,19%)}72%,78%{rotate:2deg;top:var(--rtop,19%);left:50%}
 86%{top:58%;left:46%;rotate:-18deg}93%{top:78%;left:42%;rotate:6deg}100%{top:86%;left:41%;rotate:-7deg}}
.play .line{animation:line var(--ll,2.5s) ease-in-out var(--lt) both}
@keyframes line{0%{opacity:0;translate:0 12px}18%,82%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -8px}}
.play .hero>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) calc(8.3s + var(--i)*.14s) both}
@keyframes rise{from{opacity:0;translate:0 18px}}
.play .enter-l{animation:enterL var(--dur,2.2s) cubic-bezier(.25,.7,.25,1) var(--t) both}
.play .enter-r{animation:enterR var(--dur,2.2s) cubic-bezier(.25,.7,.25,1) var(--t) both}
@keyframes enterL{from{transform:translateX(-75vw)}}
@keyframes enterR{from{transform:translateX(75vw)}}
.play .trot{animation:trot .36s ease-in-out var(--t) 6}
@keyframes trot{50%{transform:translateY(-5%)}}
.play .up{animation:up 1.2s cubic-bezier(.2,.7,.2,1) var(--t) both}
@keyframes up{from{transform:translateY(45%);opacity:0}}
.play .hop{animation:hop 1.6s linear var(--t) both}
@keyframes hop{0%{transform:translate(36vw,0)}14%{transform:translate(30vw,-45%)}28%{transform:translate(24vw,0)}42%{transform:translate(17vw,-45%)}56%{transform:translate(11vw,0)}72%{transform:translate(5vw,-30%)}86%{transform:translate(1vw,0)}100%{transform:none}}
.play .fly{animation:fly 2s cubic-bezier(.3,.6,.3,1) var(--t) both}
@keyframes fly{0%{transform:translate(-30vw,-220%) rotate(-14deg);opacity:0}15%{opacity:1}60%{transform:translate(-6vw,-160%) rotate(6deg)}100%{transform:none}}
.play .flutter{animation:flutter 2.6s ease-in-out var(--t) both}
@keyframes flutter{0%{transform:translate(28vw,40vh) rotate(10deg);opacity:0}20%{opacity:1;transform:translate(20vw,24vh) rotate(-8deg)}45%{transform:translate(12vw,30vh) rotate(8deg)}70%{transform:translate(5vw,8vh) rotate(-6deg)}100%{transform:none}}


/* Glühwürmchen, Sternschnuppe, Funken */
.bug{position:absolute;z-index:6;width:5px;height:5px;border-radius:50%;background:#fbecb0;box-shadow:0 0 8px 3px #f3d77a88,0 0 22px 8px #f3d77a33;pointer-events:none;opacity:0;
 animation:bugdrift var(--dd,9s) ease-in-out var(--bdl,0s) infinite alternate,bugglow var(--dg,2.6s) ease-in-out var(--bdl,0s) infinite alternate}
@keyframes bugdrift{from{transform:translate(0,0)}to{transform:translate(var(--fx),var(--fy))}}
@keyframes bugglow{0%{opacity:0}40%,100%{opacity:var(--bo,.9)}}
.shoot{position:absolute;z-index:2;height:2px;width:clamp(80px,12vw,180px);border-radius:2px;background:linear-gradient(90deg,transparent,#fff);rotate:18deg;pointer-events:none;animation:shoot 1.1s ease-in forwards}
@keyframes shoot{0%{opacity:0;transform:translateX(0)}15%{opacity:1}100%{opacity:0;transform:translateX(34vw)}}
.spark{position:absolute;z-index:11;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:spark .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--sx),var(--sy2)) scale(.3);opacity:0}}

/* Aktionen der Figuren */
.bb.a-jump{animation:a-jump .7s cubic-bezier(.3,.7,.4,1)}
@keyframes a-jump{30%{transform:translateY(-14%) rotate(-3deg)}62%{transform:translateY(0) scaleY(.94)}80%{transform:translateY(-3%)}}
.bb.a-big{animation:a-big .9s cubic-bezier(.3,.7,.4,1)}
@keyframes a-big{35%{transform:translateY(-55%) rotate(-8deg)}70%{transform:translateY(0) scaleY(.9)}85%{transform:translateY(-6%)}}
.bb.a-prance{animation:a-prance 1s ease-in-out;transform-origin:30% 100%}
@keyframes a-prance{30%{transform:rotate(-7deg) translateY(-4%)}60%{transform:rotate(2deg)}80%{transform:rotate(-2deg)}}
.bb.a-nod{animation:a-nod 1s ease-in-out;transform-origin:50% 90%}
@keyframes a-nod{25%{transform:rotate(4deg)}50%{transform:rotate(-2deg)}75%{transform:rotate(3deg)}}
.bb.a-roll{animation:a-roll 1.2s ease-in-out;transform-origin:50% 80%}
@keyframes a-roll{30%{transform:rotate(-14deg) translateX(-4%)}65%{transform:rotate(8deg)}}
.bb.a-hop2{animation:a-hop2 .8s ease-out}
@keyframes a-hop2{20%{transform:translateY(-18%)}40%{transform:none}60%{transform:translateY(-12%) translateX(6%)}80%{transform:translateX(6%)}100%{transform:none}}
.bb.a-wiggle{animation:a-wiggle .8s ease-in-out}
@keyframes a-wiggle{20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.bb.a-sway{animation:a-sway 1.6s ease-in-out;transform-origin:50% 100%}
@keyframes a-sway{25%{transform:rotate(-2.2deg) translateY(-2%)}50%{transform:rotate(1.8deg)}75%{transform:rotate(-1deg) translateY(-1%)}}
.cta.pulse{animation:ctapulse 1.4s ease-in-out}
@keyframes ctapulse{40%{box-shadow:0 8px 30px #0005,0 0 0 10px #d9ac6233;transform:translateY(-2px)}}
.count b.flip{animation:flip .45s cubic-bezier(.2,.7,.2,1)}
@keyframes flip{from{transform:translateY(-35%);opacity:.2}}

.early{display:none}
.play .early{display:flex;position:absolute;z-index:11;left:50%;top:21%;translate:-50% 0;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:92vw;
 background:#0e252de0;border:1px solid #e9e1d244;border-radius:999px;padding:8px 8px 8px 18px;font:700 14px/1.3 Arial,Helvetica,sans-serif;color:var(--paper);
 animation:earlyout .6s ease 7.9s forwards}
.early b{font:600 17px/1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ochre)}
.early a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;background:var(--ochre);color:var(--ink);text-decoration:none}
@keyframes earlyout{to{opacity:0;visibility:hidden}}
/* Hinweis oben links (Besuch) */
.peek{position:absolute;z-index:12;top:max(14px,env(safe-area-inset-top));left:16px;display:inline-flex;align-items:center;gap:8px;background:#0e252dcc;color:var(--paper);border:1px solid #e9e1d266;border-radius:999px;padding:8px 16px 8px 12px;font:700 14px/1 Arial,Helvetica,sans-serif;text-decoration:none;transition:background .14s}
.peek:hover{background:#173844}
.peek svg{width:18px;height:18px}
.peek:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.kul{font-size:15px;color:#dfe6e2;background:#0e252dd9;padding:7px 16px;border-radius:999px;border:1px solid #e9e1d233}
.kul a{color:var(--ochre);font-weight:700}

/* Nach dem Vorverkaufsstart: Bühne kleiner, bleibt Einstieg */
body.offen .stage{height:72svh;min-height:520px}
body.offen .crowd{height:46%}
/* Reservierung: Einblenden, Helfer, Erfolg */
.js .reveal{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}
.res{position:relative;overflow:hidden}
.res figure img{animation:float 6s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-6px) rotate(-.6deg)}to{transform:translateY(6px) rotate(.6deg)}}
.helper{position:absolute;z-index:2;pointer-events:none;height:clamp(90px,13vw,170px);bottom:-6px}
.helper img{height:100%;width:auto}
.helper.morio{right:4%;transition:translate 1.6s cubic-bezier(.25,.7,.25,1);translate:40vw 0}
.helper.maus{left:3%;height:clamp(60px,7vw,96px);transition:translate 1.4s cubic-bezier(.25,.7,.25,1) .3s;translate:-30vw 0}
.res.in .helper{translate:0 0}
.done-card{display:none;padding:28px;border-radius:20px;background:var(--surface);border:1px solid #e2dcd1;max-width:520px}
.done-card h3{font:600 clamp(26px,2.6vw,34px)/1.15 Fraunces,Georgia,serif;margin-bottom:10px}
.res.ok form{display:none}
.res.ok .done-card{display:block;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.err{display:none;padding:12px 16px;border-radius:10px;background:#f6dcd8;color:#7a2e27;font-size:15px}
.err.on{display:block}
.send[disabled]{opacity:.7;cursor:wait}
.confetti{position:absolute;z-index:3;top:-20px;width:9px;height:16px;border-radius:3px;pointer-events:none;animation:conf var(--cd,2.6s) cubic-bezier(.3,.4,.4,1) forwards}
@keyframes conf{to{transform:translate(var(--cx),110vh) rotate(var(--cr));opacity:.9}}

/* Reservierung */
.res{background:var(--paper);color:var(--ink);padding:clamp(56px,9vw,112px) 16px}
.res-in{max-width:1100px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.res h2{font:600 clamp(30px,3.4vw,46px)/1.1 Fraunces,Georgia,serif;margin-bottom:16px}
.res a{color:var(--action)}
.res a:visited{color:#1F4B3F}
.preislogik{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:6px;font:600 clamp(17px,1.3vw,19px)/1.4 Fraunces,Georgia,serif}
.preislogik li::before{content:"·";color:var(--coral);margin-right:8px}
textarea{min-height:64px;border:1.5px solid #788586;border-radius:10px;padding:12px 14px;font:17px/1.4 Arial,Helvetica,sans-serif;background:var(--surface);color:var(--ink);width:100%;resize:vertical}
.res .lead{font:400 clamp(18px,1.4vw,21px)/1.55 Fraunces,Georgia,serif;color:var(--ink);margin-bottom:28px;max-width:44ch}
form{display:grid;gap:16px;max-width:520px}
label{display:grid;gap:6px;font:700 15px/1.3 Arial,Helvetica,sans-serif}
label span.opt{font-weight:400;color:var(--muted)}
input[type=email],input[type=text],select{min-height:52px;border:1.5px solid #788586;border-radius:10px;padding:12px 14px;font:17px Arial,Helvetica,sans-serif;background:var(--surface);color:var(--ink);width:100%}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 Arial,Helvetica,sans-serif}
.check input{width:22px;height:22px;margin-top:2px;flex-shrink:0;accent-color:var(--action)}
.send{min-height:56px;border:0;border-radius:10px;background:var(--ochre);color:var(--ink);font:700 17px/1.2 Arial,Helvetica,sans-serif;cursor:pointer;transition:background .14s,transform .14s}
.send:hover{background:#e6bd78;transform:translateY(-1px)}
.send:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.note{font-size:14px;color:var(--muted)}
.pv{display:none;padding:12px 16px;border-radius:10px;background:#f2e3c6;font-size:15px}
.pv.on{display:block}
.res figure{margin:0}
.res figure img{width:100%;height:auto}
.hp{position:absolute;left:-9999px}
footer{background:var(--ink);color:#dfe6e2;padding:40px 16px;font-size:15px}
.foot{max-width:1100px;margin:auto;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--ochre)}

@media (max-width:760px){
 .stage{min-height:640px}
 .garland{height:12%}
 .hero{top:10%}
 .kul{font-size:14px;padding:6px 12px}
 .stage{--rtop:33%;--sh:28%}
 .ctrl.pause{right:auto;left:16px}
 .lines{top:44%!important}
 .play .early{top:9%;border-radius:18px;padding:10px 12px;font-size:13px;gap:8px}
 .lines{top:31%}
 .crowd{height:45%}
 #f-freunde{--x:13;--b:30;--h:50} #f-familie{--x:50;--b:29;--h:58} #f-grosseltern{--x:86;--b:30;--h:52}
 #f-musik,#f-naehe,#f-pfuetze,#f-molch,#f-frosch,#f-vogel{display:none}
 #f-maus{--x:9;--b:4;--h:19} #f-malina{--x:31;--b:2;--h:44} #f-morio{--x:63;--b:3;--h:36} #f-joris{--x:86;--b:3;--h:40} #f-otter{--x:50;--b:0;--h:14}
 .falter{left:89%;top:31%;height:48px}
 .ribbon{left:48%}
 .res-in{grid-template-columns:1fr}
 .peek span{display:none}.peek{padding:8px 10px}
 .helper.morio{right:2%}

 .res figure{order:-1;max-width:420px;margin:auto}
 .row{grid-template-columns:1fr 1fr}
 .sub{max-width:34ch}
}
@media (max-height:700px) and (min-width:761px){.hero{top:10%}h1{font-size:clamp(30px,4vw,52px)}.crowd{height:48%}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .reveal{opacity:1;translate:none}
 .helper{translate:0 0!important}
 .bug,.shoot{display:none}
 *,*::before,*::after{animation:none!important;transition:none!important}
}