/* The Pizzary Konzept Seite (Social Bites). Look nach CI Handbuch Juni 2026:
   Base, Cheesy, Tomato red, Veggie greens, Berlin Sky, Urban Pink, Schwarz. Zackige Farbflächen, diagonale Bänder,
   Bright Dreams nur als Störer in Versalien, Bisko für Handschrift, Haus Fallback Avenir Next.
   Mobile first. Ohne Klasse .smooth ist alles eine normale statische Seite (kein JS, reduzierte Bewegung). */

@font-face{font-family:"Bright Dreams";src:url("assets/fonts/BrightDreams-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Bisko";src:url("assets/fonts/Bisko.otf") format("opentype");font-display:swap}

:root{
  --base:#F4F4ED;--herobg:#6887DD;--cheesy:#F5F5AF;--gold:#FFC31E;--red:#BE2337;--sky:#7D82D9;--pink:#DE7DCE;--green:#AFCDAF;--ink:#000;
  --f-house:"Ariana Pro","Avenir Next","Avenir","Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-loud:"Bright Dreams","Arial Black",Impact,sans-serif;
  --f-hand:"Bisko","Comic Sans MS","Segoe Print",cursive;
  --hh:56px;--pad:clamp(16px,4.4vw,56px);
  --zz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 22 L11 0 L22 22 L33 0 L44 22Z'/%3E%3C/svg%3E");
  --burst:polygon(50% 1.3%,58% 14.7%,71.4% 5.5%,72.7% 21.6%,89.6% 18.4%,81% 35.1%,96.4% 39.4%,87.2% 50%,97.6% 60.9%,81.6% 65.2%,91% 82.7%,72.4% 78.1%,72.4% 96.6%,58% 85%,50% 99.7%,42.3% 83.9%,28% 95.7%,26.7% 79.2%,10.8% 81.2%,16.8% 66%,0.4% 61.3%,15.6% 50%,0.5% 38.6%,17.3% 34.2%,11.7% 19.4%,28.6% 23.2%,27.5% 3.3%,42% 15%);
  --chamfer:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--herobg);color:var(--ink);font:400 1rem/1.5 var(--f-house);overflow-x:hidden}
body.loading{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
p{margin:0}
.loud{font-family:var(--f-loud);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.hand{font-family:var(--f-hand);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.burst{clip-path:var(--burst)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

section{position:relative}
.zig{position:absolute;left:0;right:0;top:0;height:22px;transform:translateY(-99%);background:var(--bgc);-webkit-mask:var(--zz) repeat-x bottom/44px 22px;mask:var(--zz) repeat-x bottom/44px 22px;pointer-events:none;z-index:2}

.btn{display:inline-block;margin-top:16px;background:var(--ink);color:var(--cheesy);padding:.8em 1.3em;font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;text-decoration:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);background:var(--red);color:var(--cheesy)}
.btn-y{background:var(--cheesy);color:var(--ink)}
.btn-y:hover{background:var(--pink);color:var(--ink)}

/* ---------- Ladebildschirm ---------- */
#loader{display:none}
.js #loader{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--herobg);color:#fff;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.js #loader.done{transform:translateY(-101%)}
.ld-in{width:min(80vw,380px);text-align:center}
.ld-logo{width:min(70%,240px);height:auto;margin:0 auto 22px}
.ld-line{font-size:1.4rem;color:var(--cheesy);min-height:1.6em}
.ld-bar{height:14px;background:rgba(255,255,255,.25);border:3px solid var(--ink);margin:10px 0 6px}
.ld-bar i{display:block;height:100%;width:0;background:var(--cheesy)}
.ld-num{font-size:2.4rem}

/* ---------- Kopfleiste und Menü ---------- */
.bar{position:fixed;left:0;right:0;top:0;height:var(--hh);z-index:100;display:flex;align-items:center;gap:12px;padding:0 var(--pad);background:transparent;color:#fff;border-bottom:3px solid transparent;transition:background .3s,border-color .3s}
.bar.solid{background:var(--ink);border-bottom-color:var(--ink)}
.bar-logo{display:block;margin-right:auto;line-height:0}
.bar-logo img{height:30px;width:auto}
.bar-nav{display:none}
.bar-tag{background:var(--red);color:var(--cheesy);padding:.15em .7em;font-size:.95rem;transform:rotate(-3deg)}
.bar-btn{appearance:none;border:3px solid var(--ink);background:var(--cheesy);color:var(--ink);font:900 .8rem var(--f-house);text-transform:uppercase;letter-spacing:.06em;padding:.5em .9em;cursor:pointer}
.bar-btn[aria-expanded="true"]{background:var(--ink);color:var(--cheesy)}
.bar-order{display:inline-block;border:3px solid var(--ink);background:var(--red);color:var(--cheesy);font:900 .8rem var(--f-house);text-transform:uppercase;letter-spacing:.06em;padding:.5em .9em;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,color .15s}
.bar-order:hover{background:var(--cheesy);color:var(--ink);transform:translate(-2px,-2px) rotate(-1deg)}
.menu{position:fixed;inset:0;z-index:90;background:var(--red);padding:calc(var(--hh) + 24px) var(--pad) 30px;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:auto}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:baseline;gap:14px;color:var(--cheesy);text-decoration:none;font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,8.6vw,3.6rem);line-height:1.12;letter-spacing:-.01em}
.menu a b{font:400 .9rem var(--f-loud);color:var(--pink);min-width:2ch}
.menu a:hover{color:var(--base);transform:translateX(8px)}
.menu a{transition:transform .2s,color .2s}
@media (min-width:1100px){
  :root{--hh:62px}
  .bar-nav{display:flex;gap:clamp(10px,1.5vw,22px);margin:0 auto 0 28px}
  .bar-nav a{font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;text-decoration:none;padding:.4em 0;border-bottom:3px solid transparent}
  .bar-nav a{color:#fff}
  .bar-nav a:hover{border-bottom-color:var(--cheesy)}
  .bar-btn{display:none}
  .bar-logo{margin-right:0}
}

/* ---------- 1 Hero: Pizza Aufbau als Scroll Video ---------- */
/* --herobg ist der im Browser gemessene Hintergrund des Videos (Berlin Sky im Video), damit Kanten unsichtbar bleiben */
.vhero{--bgc:var(--herobg);background:var(--herobg);color:#fff}
.vh-pin{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--herobg)}
.vh-media{position:absolute;inset:0}
.vh-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.vh-canvas{display:block;opacity:0}
.vh-canvas.ready{opacity:1}
.vh-ende{opacity:0}
.vh-video{opacity:0;transition:opacity .3s}
.vh-video.ready{opacity:1}
.vh-copy{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--hh) + 14px);z-index:3}
.vh-kicker{font-size:1.15rem;color:var(--cheesy);text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.vh-h1,.vh-end-h{font-family:var(--f-loud);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(3rem,15vw,7.4rem);line-height:.9;margin-top:4px}
.vh-h1 .ln{display:block;overflow:hidden;padding:.02em 0 .06em}
.vh-h1 .ln>span{display:block}
.vh-h1 .ln:first-child,.vh-end-h .l1{color:#fff;text-shadow:3px 3px 0 var(--ink)}
.vh-h1 .ln:last-child,.vh-end-h .l2{color:var(--ink)}
.vh-end-h span{display:block}
.vh-entwurf{display:none;margin-top:16px;max-width:30ch;font-size:.8rem;line-height:1.35;color:#fff;border:2px solid #fff;padding:7px 10px;transform:rotate(-1deg)}
.vh-entwurf b{display:inline-block;background:var(--red);color:var(--cheesy);padding:0 .5em;margin-right:.3em;font-size:.9rem}
.vh-steps{list-style:none;margin:0;padding:0;position:absolute;left:var(--pad);right:var(--pad);bottom:76px;height:64px;z-index:3}
.vh-step{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s}
.vh-step b{display:grid;place-items:center;width:58px;aspect-ratio:1;background:var(--cheesy);color:var(--ink);font-size:1.3rem;clip-path:var(--burst)}
.vh-step span{background:var(--ink);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.3rem,6vw,2rem);padding:.08em .45em;transform:rotate(-2deg)}
.vh-step:nth-child(5) b{background:var(--red);color:var(--cheesy)}
.vh-step.on{opacity:1;transform:none}
.vh-stoerer{position:absolute;right:calc(var(--pad) - 6px);top:calc(var(--hh) + 16px);width:clamp(86px,24vw,170px);aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--red);color:var(--cheesy);font-size:clamp(.85rem,3.4vw,1.45rem);line-height:.95;z-index:3;transform:rotate(10deg)}
.vh-end{position:absolute;left:var(--pad);right:var(--pad);bottom:84px;z-index:4}
.vh-btn{margin-top:14px;font-size:.95rem;padding:.9em 1.4em}
.vh-bar{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(0,0,0,.18);z-index:4}
.vh-bar i{display:block;height:100%;width:0;background:var(--cheesy)}
.scroll-cue{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:1.05rem;z-index:3;color:#fff}
.scroll-cue::after{content:"";display:block;width:13px;height:13px;margin:6px auto 0;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(7px) rotate(45deg)}}
.smooth .vh-end{opacity:0}
.rm .vh-ende{opacity:1}
.rm .vh-step{display:none}
html:not(.smooth) .scroll-cue{display:none}
@media (min-width:900px){
  .vh-copy{top:auto;bottom:15%;right:auto;max-width:36vw}
  .vh-h1,.vh-end-h{font-size:clamp(4rem,7.4vw,8.4rem)}
  .vh-entwurf{display:block}
  .vh-steps{left:var(--pad);right:auto;bottom:14%;width:min(40vw,520px);height:80px}
  .vh-step{left:0;right:auto}
  .vh-step b{width:72px;font-size:1.6rem}
  .vh-step span{font-size:clamp(1.6rem,2.6vw,2.6rem)}
  .vh-stoerer{right:auto;left:var(--pad);top:calc(var(--hh) + 30px)}
  .vh-end{bottom:15%;right:auto;max-width:38vw}
  html:not(.smooth) .vh-copy{top:calc(var(--hh) + 24px);bottom:auto}
  html:not(.smooth) .vh-h1{font-size:clamp(3.4rem,6vw,6.4rem)}
}

/* ---------- Bänder ---------- */
.bands{position:relative;height:clamp(180px,46vw,250px);overflow:hidden;background:var(--herobg);z-index:3}
.band{position:absolute;left:-6%;width:112%;overflow:hidden;white-space:nowrap;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.mq{display:inline-flex;will-change:transform;line-height:1.1;padding:.15em 0}
.mq span{padding-right:.6em}
.band-a{top:18%;background:var(--red);color:var(--cheesy);transform:rotate(-3.2deg);font-size:clamp(1.7rem,5.6vw,3.6rem)}
.band-b{top:52%;background:var(--ink);color:var(--pink);transform:rotate(2.6deg);font-size:clamp(1.5rem,4.8vw,3.1rem)}

/* ---------- 2 Statement mit Wort Reveal ---------- */
.statement{--bgc:var(--red);background:var(--bgc);color:var(--cheesy);padding:96px var(--pad) 110px}
.st-kick{color:var(--pink);font-size:1.3rem;margin-bottom:14px}
.reveal{font-size:clamp(2.5rem,10.4vw,7.6rem);line-height:.93;max-width:14ch}
.reveal .w{display:inline-block;margin-right:.22em}
.js:not(.rm) .reveal .w{opacity:.16}
.st-sub{margin-top:28px;max-width:40ch;color:var(--base);font-size:clamp(1rem,3.4vw,1.25rem);line-height:1.45}
@media (min-width:900px){.reveal{max-width:16ch}}

/* ---------- 2b Bau deine eigene (Mitmach Builder) ---------- */
.bauen{--bgc:var(--ink);background:var(--bgc);color:var(--base);padding-top:90px}
.bn-head{padding:0 var(--pad);max-width:980px}
.bn-head .hand{color:var(--pink);font-size:1.25rem;margin-bottom:8px}
.bn-head h2{color:var(--cheesy);font-size:clamp(2.6rem,11vw,6.2rem)}
.bn-lead{margin-top:14px;max-width:46ch;font-size:clamp(1rem,3.6vw,1.2rem);line-height:1.45}
.bn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:26px var(--pad) 60px}
.bn-ctrl,.bn-stage-wrap{min-width:0}
.bn-stage{position:relative;width:min(64vw,560px);aspect-ratio:1;margin:0 auto}
.bn-burst{position:absolute;inset:0;background:var(--red);clip-path:var(--burst);transform:rotate(-6deg)}
.bn-pizza{position:absolute;inset:11%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.bn-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bn-sauce,.bn-cheese{opacity:0}
.sprites{position:absolute;inset:0}
.sp{position:absolute;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.bn-price{position:absolute;right:-5%;top:-3%;width:31%;aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--cheesy);color:var(--ink);transform:rotate(12deg);z-index:5}
.bn-price span{font-size:clamp(1rem,4.6vw,1.9rem);line-height:1}
.bn-sum{margin:16px auto 0;max-width:40ch;text-align:center;color:var(--cheesy);font-weight:700;line-height:1.35;min-height:2.7em}
.bn-block{margin-bottom:14px}
.bn-block h3{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--base);margin-bottom:10px}
.bn-block h3 b{display:grid;place-items:center;width:34px;aspect-ratio:1;background:var(--cheesy);color:var(--ink);font-size:1rem;clip-path:var(--burst)}
.bn-block h3 em{margin-left:auto;font:400 1.1rem var(--f-loud);color:var(--cheesy)}
.stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stufe{appearance:none;cursor:pointer;background:var(--base);color:var(--ink);border:0;padding:.45em 0 .5em;font-family:var(--f-house);display:grid;justify-items:center;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:background .2s,color .2s,transform .2s}
.stufe b{font:400 1.8rem/1 var(--f-loud)}
.stufe span{font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.stufe i{font-style:normal;font-weight:800;font-size:.78rem;margin-top:2px}
.stufe:hover{transform:translateY(-3px)}
.stufe.on{background:var(--red);color:var(--cheesy)}
.stufe-inhalt{margin-top:8px;font-size:.85rem;opacity:.8}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{appearance:none;flex:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--base);border:2px solid rgba(244,244,237,.55);padding:.45em .8em;font:800 .78rem var(--f-house);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,opacity .15s,transform .15s}
.chip img{width:26px;height:26px;object-fit:contain}
.chip:hover{border-color:var(--cheesy);transform:translateY(-2px)}
.chip.on{background:var(--cheesy);color:var(--ink);border-color:var(--cheesy)}
.chip.full:not(.on){opacity:.38}
.chip.nope{animation:nope .35s}
@keyframes nope{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.bn-hint{min-height:1.4em;color:var(--pink);font-weight:800;margin:4px 0 10px}
.bn-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bn-actions .btn{margin-top:0}
.btn-ghost{background:var(--base);color:var(--ink);border:0;font-family:var(--f-house);cursor:pointer}
.bn-note{margin-top:16px;font-size:.75rem;line-height:1.45;opacity:.7;max-width:56ch}
.zutaten{overflow:hidden;background:var(--base);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:12px 0}
.zt-track{display:flex;gap:26px;width:max-content;will-change:transform}
.zt-track img{height:76px;width:auto}
@media (min-width:900px){
  .bn-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding-bottom:80px}
  .bn-stage{width:min(42vw,580px)}
  .chips{flex-wrap:wrap;overflow:visible}
  .zt-track img{height:92px}
}

/* ---------- 2c NEU: Döner Pizza (gepinnt, 360 Grad Bildfolge) ---------- */
/* --doenerbg wird beim Laden an der Bildecke gemessen und exakt angeglichen */
:root{--doenerbg:rgb(246,241,173)}
.doener{--bgc:var(--doenerbg);background:var(--doenerbg);color:var(--ink)}
.dn-pin{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--doenerbg)}
.dn-canvas,.dn-poster{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dn-poster{object-fit:contain;object-position:50% 58%}
.dn-canvas{opacity:0}
.dn-canvas.ready{opacity:1}
.dn-canvas.ready+.dn-poster{display:none}
.dn-head{position:absolute;left:var(--pad);top:calc(var(--hh) + 14px);z-index:3}
.dn-head .hand{font-size:1.2rem;color:var(--red)}
.dn-head h2{font-family:var(--f-loud);font-weight:400;font-size:clamp(2.6rem,12vw,6.4rem);line-height:.9;margin-top:4px}
.dn-neu{position:absolute;left:calc(100% + 6px);top:-4px;width:clamp(70px,18vw,124px);aspect-ratio:1;display:grid;place-items:center;background:var(--red);color:var(--cheesy);font-size:clamp(1.2rem,4.6vw,2.2rem);transform:rotate(-12deg);animation:neu 1.6s ease-in-out infinite}
@keyframes neu{50%{transform:rotate(-4deg) scale(1.08)}}
.dn-calls{list-style:none;margin:0;padding:0;position:absolute;left:var(--pad);right:var(--pad);bottom:58px;z-index:3;display:flex;flex-wrap:wrap;gap:8px}
.dn-c{display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--cheesy);padding:.35em .7em .35em .4em;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.78rem,3.3vw,.95rem);line-height:1.1;transform:rotate(var(--r,-1.5deg));box-shadow:3px 3px 0 var(--red)}
.dn-c b{display:grid;place-items:center;width:1.9em;aspect-ratio:1;background:var(--cheesy);color:var(--ink);clip-path:var(--burst);font-size:.95em;flex:none}
.dn-c:nth-child(2n){--r:1.5deg}
.dn-c.c1{background:var(--red)}
.fig.dn-must{position:absolute;right:calc(var(--pad) - 4px);top:calc(var(--hh) + 8px);width:clamp(84px,22vw,130px);z-index:4}
.dn-bar{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(0,0,0,.12);z-index:4}
.dn-bar i{display:block;height:100%;width:0;background:var(--red)}
.smooth .dn-c{opacity:0;transform:translateY(16px) rotate(var(--r,-1.5deg)) scale(.85)}
.smooth .dn-c.on{opacity:1;transform:rotate(var(--r,-1.5deg));transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
@media (min-width:900px){
  .dn-head{top:auto;bottom:16%}
  .dn-head h2{font-size:clamp(4rem,7vw,7.6rem)}
  .dn-calls{left:auto;right:var(--pad);top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;align-items:flex-end;gap:12px;width:min(28vw,360px)}
  .dn-c{font-size:1.05rem}
  .fig.dn-must{right:calc(var(--pad) + 30vw);left:auto;top:auto;bottom:10%;width:clamp(120px,10vw,170px)}
}

/* ---------- 3 Signature ---------- */
.sig{--bgc:var(--cheesy);background:var(--bgc)}
.sig-pin{background:var(--cheesy);padding-top:var(--hh);position:relative}
.sig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:30px var(--pad) 14px}
.sig-head h2{font-size:clamp(1.7rem,6vw,3.6rem)}
.sig-head .hand{display:none;font-size:1.1rem}
.sig-count{font-size:1.5rem;white-space:nowrap}
.sig-count b{color:var(--red);font-weight:400}
.sig-track{display:flex;gap:clamp(18px,3vw,40px);padding:6px var(--pad) 30px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sc{position:relative;flex:none;width:clamp(260px,76vw,420px);height:560px;scroll-snap-align:center}
.sc-panel{position:absolute;inset:150px 0 0 0;background:var(--base);clip-path:var(--chamfer);z-index:1}
.sc::after{content:"";position:absolute;inset:158px -8px -8px 8px;background:var(--ink);clip-path:var(--chamfer);z-index:0}
.sc-pizza{position:absolute;left:50%;top:0;width:82%;z-index:2;filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));will-change:transform}
.sc-head{position:absolute;left:-10px;top:96px;width:clamp(70px,22vw,108px);z-index:4;filter:drop-shadow(3px 3px 0 var(--ink));will-change:transform}
.sc-badge{position:absolute;left:-6px;top:100px;z-index:4;width:clamp(62px,19vw,92px);aspect-ratio:1;display:grid;place-items:center;background:var(--cheesy);color:var(--ink);font-size:clamp(1.8rem,6vw,2.7rem);clip-path:var(--burst);will-change:transform}
.sc-tag{position:absolute;right:-6px;top:104px;z-index:4;background:var(--red);color:var(--cheesy);padding:.1em .7em;font-size:1.05rem;transform:rotate(6deg)}
.sc-bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:16px 20px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sc-num{display:block;font-size:.95rem;color:var(--red);margin-bottom:4px}
.sc h3{font-size:clamp(1.9rem,7vw,3rem)}
.sc-bottom p:not(.sc-price){font-size:.86rem;line-height:1.35;margin-top:6px;max-width:32ch}
.sc-price{font-size:clamp(1.5rem,5.2vw,2.2rem);color:var(--red);white-space:nowrap}
.sc-end{width:clamp(240px,60vw,360px);display:grid}
.sc-end::after{display:none}
.sc-end-in{align-self:center;background:var(--ink);color:var(--cheesy);padding:30px 24px 34px;clip-path:var(--chamfer)}
.sc-end-in .loud{font-size:clamp(2.2rem,8vw,3.4rem);line-height:.95;margin-bottom:12px}
.sc-end-in p+p{font-weight:600;color:var(--base)}
.sc-end-in .btn{background:var(--cheesy);color:var(--ink)}
.sig-bar{display:none;height:8px;background:rgba(0,0,0,.18);margin:0 var(--pad)}
.sig-bar i{display:block;height:100%;width:0;background:var(--ink)}
.sig-note{padding:10px var(--pad) 22px;font-size:.74rem;opacity:.75}
.smooth .sig-pin{height:100svh;min-height:540px;display:flex;flex-direction:column;overflow:hidden}
.smooth .sig-head{padding:12px var(--pad) 8px;flex:none}
.smooth .sig-track{flex:1;min-height:0;overflow:visible;scroll-snap-type:none;width:max-content;padding:6px var(--pad) 8px}
.smooth .sig-bar{display:block;flex:none}
.smooth .sig-note{flex:none;padding:6px var(--pad) 10px}
@media (min-width:900px){
  .sig-head .hand{display:block;margin-left:auto;margin-right:auto}
  .sc{height:600px}
  .sc-panel{inset:170px 0 0 0}
  .sc::after{inset:178px -8px -8px 8px}
  .sc-head{top:116px}
  .sc-badge{top:120px}
  .sc-tag{top:124px}
}
.smooth .sc{height:auto;aspect-ratio:.72;width:min(82vw,calc((100svh - var(--hh) - 170px) * .72));align-self:center;min-height:0}
.smooth .sc-end{aspect-ratio:auto;height:auto;width:clamp(240px,60vw,360px)}
.smooth .sc-panel{inset:34% 0 0 0}
.smooth .sc::after{inset:calc(34% + 8px) -8px -8px 8px}
.smooth .sc-head{top:30%}.smooth .sc-badge{top:31%}.smooth .sc-tag{top:32%}
.smooth .sc-pizza{width:94%}
@media (min-width:900px){
  .smooth .sc{width:auto;height:100%;max-height:680px;aspect-ratio:.7}
  .smooth .sc-end{height:auto;aspect-ratio:auto;width:360px}
}

/* ---------- 4b Kiosk ---------- */
.kiosk{--bgc:var(--pink);background:var(--bgc);color:var(--ink);padding:96px var(--pad) 90px;overflow:hidden}
.kiosk-in{display:grid;gap:40px;align-items:center}
.kiosk-copy .hand{color:var(--ink);font-size:1.25rem;margin-bottom:8px}
.kiosk-copy h2{color:var(--ink);font-size:clamp(2.3rem,9vw,5rem);margin-bottom:16px}
.kiosk-copy p:not(.hand){max-width:44ch;line-height:1.5;font-size:1.05rem}
.kiosk-phones{position:relative;aspect-ratio:1.18;width:min(100%,560px);margin:0 auto}
.kp{position:absolute;width:37%;border-radius:16px;box-shadow:0 0 0 4px var(--ink),10px 10px 0 4px var(--ink)}
.kp-1{left:2%;top:10%;transform:rotate(-8deg)}
.kp-2{left:31.5%;top:0;transform:rotate(1.5deg);z-index:2}
.kp-3{left:61%;top:12%;transform:rotate(8deg)}
@media (min-width:900px){
  .kiosk-in{grid-template-columns:.9fr 1.1fr;gap:60px}
}

/* ---------- 5 Marke ---------- */
.marke{--bgc:var(--sky);background:var(--bgc);padding-top:96px;overflow:hidden}
.marke-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 var(--pad) 40px;align-items:end}
.marke-mid{grid-column:1/-1;order:-1;text-align:center}
.marke-mid>.hand{font-size:1.3rem;color:var(--cheesy);text-shadow:2px 2px 0 var(--ink);margin-bottom:6px}
.marke h2{font-size:clamp(2.2rem,9.4vw,5.2rem)}
.m-taube{width:min(60%,280px);margin:22px auto 8px}
.m-text{max-width:42ch;margin:0 auto;font-size:1.05rem;line-height:1.45;font-weight:500}
.m-manifest{margin:22px auto 0;max-width:22ch;font-size:clamp(1.5rem,6vw,2.4rem);line-height:1.05;background:var(--cheesy);padding:.35em .6em;transform:rotate(-1.6deg);border:3px solid var(--ink)}
.m-voll{width:100%}
.marke{padding-bottom:46px}
.heads{overflow:hidden;background:var(--ink);padding:14px 0;margin:30px -3% 0;transform:rotate(-1.6deg);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.heads-track{display:flex;gap:26px;width:max-content;will-change:transform}
.heads-track img{height:82px;width:auto}
@media (min-width:900px){
  .marke-in{grid-template-columns:1fr 1.15fr 1fr;gap:30px}
  .marke-mid{grid-column:auto;order:0}
  .m-yuki{order:-1}
  .m-mm{order:1}
  .heads-track img{height:110px}
}

/* ---------- 5b Reels ---------- */
.reels{--bgc:var(--ink);background:var(--bgc);color:var(--base);padding:90px 0 70px;overflow:hidden}
.rl-head{padding:0 var(--pad);margin-bottom:26px}
.rl-head .hand{color:var(--pink);font-size:1.25rem}
.rl-head h2{font-family:var(--f-loud);font-weight:400;color:var(--cheesy);font-size:clamp(2.6rem,11vw,6rem);margin:4px 0 8px}
.rl-track{display:flex;gap:clamp(16px,3vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:16px var(--pad) 26px;scrollbar-width:none}
.rl-track::-webkit-scrollbar{display:none}
.rl{flex:none;margin:0;width:clamp(200px,62vw,290px);scroll-snap-align:center;transform:rotate(var(--r))}
.rl-phone{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#222;border:5px solid var(--base);box-shadow:8px 8px 0 var(--red)}
.rl-phone video{width:100%;height:100%;object-fit:cover;display:block}
.rl-ton{position:absolute;right:10px;bottom:10px;min-width:44px;min-height:44px;border:0;border-radius:22px;background:rgba(0,0,0,.65);color:#fff;font:800 .72rem var(--f-house);text-transform:uppercase;letter-spacing:.05em;padding:0 14px;cursor:pointer}
.rl.ton .rl-ton{background:var(--cheesy);color:var(--ink)}
.rl figcaption{margin-top:14px;font-size:1.15rem;color:var(--cheesy);text-align:center}
.rl-cta{position:relative;z-index:3;padding:10px var(--pad) 0}
.reels{position:relative}
.rl-fig{right:4%;bottom:16px;height:min(30%,230px)}
.rl-head,.rl-track{position:relative;z-index:3}
@media (max-width:899px){.vh-step span{font-size:clamp(1.05rem,5vw,1.5rem)}}
.rl-cta .btn{min-height:48px;display:inline-flex;align-items:center}

/* ---------- 6 Besuch uns: Gäste Footer ---------- */
.besuch{position:relative;--bgc:var(--red);background:var(--bgc);color:var(--cheesy);padding:96px var(--pad) 40px}
.bs-in{display:grid;gap:40px}
.bs-logo{width:clamp(170px,46vw,280px);height:auto}
.bs-claim{margin-top:18px;font-size:clamp(1.8rem,7vw,3rem);line-height:.95;color:var(--cheesy)}
.bs-col h2{font-size:clamp(2.4rem,10vw,4.6rem);color:var(--base);margin-bottom:14px}
.bs-col h3{font-size:1rem;letter-spacing:.06em;color:var(--pink);margin:0 0 6px}
.bs-col h3:not(:first-child){margin-top:22px}
.bs-col p{font-size:1.15rem;line-height:1.4;color:var(--base);font-weight:600}
.bs-adr{font-weight:900!important;text-transform:uppercase;font-size:clamp(1.4rem,5vw,1.9rem)!important;line-height:1.1!important}
.bs-hint{margin-top:8px;color:var(--cheesy)!important;font-size:1.15rem!important}
.bs-insta{color:var(--cheesy);font-weight:900;font-size:1.4rem;text-decoration-thickness:3px;text-underline-offset:4px}
.bs-insta:hover{color:var(--base)}
.bs-fine{margin-top:60px;padding-top:22px;border-top:3px solid var(--cheesy);display:grid;gap:6px;font-size:.8rem;color:var(--base);opacity:.92}
.bs-legal{display:flex;gap:22px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;margin-bottom:6px}
.bs-legal a{color:var(--cheesy)}
@media (min-width:900px){
  .bs-in{grid-template-columns:1.1fr 1fr 1fr;align-items:start;gap:60px}
}

/* ---------- Figuren überall (ein WebGL Canvas zeichnet sie an ihre Platzhalter, Fallback CSS) ---------- */
.fig-layer{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
.fig{position:relative;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:6px}
.fig img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.fig-on img{visibility:hidden}
.fig-css img{transform-origin:50% 100%;animation:figsway var(--fdur,5.4s) ease-in-out var(--fdel,0s) infinite}
.fig.hop img{animation:fighop .8s cubic-bezier(.3,.7,.4,1)}
@keyframes figsway{0%,100%{transform:skewX(0) rotate(0) scaleY(1)}25%{transform:skewX(-1.6deg) rotate(.35deg) scaleY(1.008)}50%{transform:skewX(.2deg) rotate(0) scaleY(.996)}75%{transform:skewX(1.5deg) rotate(-.35deg) scaleY(1.006)}}
@keyframes fighop{0%{transform:scale(1,1)}15%{transform:scale(1.06,.86)}45%{transform:translateY(-13%) scale(.95,1.07)}70%{transform:translateY(0) scale(1.05,.9)}100%{transform:scale(1,1)}}
.fig-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.fig-clip .fig{pointer-events:auto}
.sec-fig{position:absolute;bottom:0}
.sec-fig img{height:100%;width:auto}
.bubble{position:fixed;left:0;top:0;z-index:80;width:max-content;max-width:min(260px,72vw);background:var(--cheesy);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:.5em .8em;font-size:1.05rem;line-height:1.1;text-align:center;box-shadow:4px 4px 0 var(--ink);transform:translate(-50%,-100%) scale(0) rotate(-3deg);transform-origin:50% 120%;transition:transform .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.bubble::after{content:"";position:absolute;left:50%;top:100%;width:16px;height:16px;background:var(--cheesy);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.bubble.on{transform:translate(-50%,-100%) scale(1) rotate(-3deg)}
/* Hero: zwei Figuren springen bei DEINE REGELN. rein */
.vh-figs{position:absolute;inset:0;pointer-events:none;z-index:4}
.vh-fig{position:absolute;bottom:0;pointer-events:auto}
.vh-fig img{height:100%;width:auto}
.vh-fig-2{right:2%;height:min(34svh,300px)}
.vh-fig-1{right:22%;height:min(40svh,400px)}
/* Hero: Figur oben rechts, wandert beim Scrollen am Rand entlang (verdeckt die Pizza nicht) */
.vh-top{position:absolute;right:2.5%;bottom:0;top:auto;height:57svh;pointer-events:none}
.vh-top img{height:100%;width:auto}
@media (max-width:899px){.vh-top{height:32svh;right:1%}.vh-stoerer{display:none}}
/* Abschnitts Figuren */
.statement{overflow:visible}
.st-fig{right:3%;height:min(52%,380px)}
.st-stempel{position:absolute;right:calc(var(--pad) + 6px);top:36px;width:clamp(84px,14vw,150px);height:auto;transform:rotate(14deg);opacity:.95;z-index:1}
.bn-head{position:relative}
.bn-taube{position:absolute;right:calc(var(--pad) - 10px);top:-30px;width:clamp(110px,12vw,170px)}
.kiosk{isolation:isolate}
.ki-fig{right:1%;height:min(46%,360px)}
.besuch{padding-bottom:130px}
.walk-clip{top:auto;height:190px}
.walker{position:absolute;bottom:0;left:0}
.walker img{height:100%;width:auto}
.walker-1{height:96px}
.walker-2{height:150px}
.bs-stempel{position:absolute;right:calc(var(--pad) + 4px);top:40px;width:clamp(80px,12vw,130px);height:auto;transform:rotate(-12deg)}
/* Köpfe in den Bändern als Sticker, wippen */
.bh{display:inline-block;height:1.05em;width:auto;margin:0 .35em;vertical-align:-.15em;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);animation:bob 1.6s ease-in-out infinite}
.bh:nth-child(2n){animation-delay:-.5s}.bh:nth-child(3n){animation-delay:-1.1s}
@keyframes bob{50%{transform:translateY(-8%) rotate(6deg)}}
.heads-track img{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff);animation:bob 2.2s ease-in-out infinite}
.heads-track img:nth-child(2n){animation-delay:-.8s}.heads-track img:nth-child(3n){animation-delay:-1.4s}
.sc-head{cursor:pointer}
@media (prefers-reduced-motion:reduce){.fig-css img,.bh,.heads-track img{animation:none}}
@media (max-width:899px){
  .statement{padding-bottom:250px}
  .st-fig{height:min(34%,230px);right:-2%}
  .vh-fig-2{height:min(22svh,190px);right:-2%}
  .walker-1{height:80px}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .scroll-cue::after{animation:none}
  *{scroll-behavior:auto!important}
}
.rm .reveal .w{opacity:1}
.rm .mq,.rm .zt-track,.rm .heads-track{will-change:auto}
.rm .zutaten,.rm .heads{overflow-x:auto}