/* ===== Szene: alles in "em", 1em = 1 Entwurfspixel * --u (skaliert mit dem Bildschirm) ===== */
body.scene{overflow:hidden;height:100dvh}
#world{position:fixed;inset:0;overflow:hidden;z-index:2;pointer-events:none;--u:min(calc(100vw / 390),calc(100dvh / 844))}
@media (min-aspect-ratio:11/10){#world{--u:min(calc(100vw / 1280),calc(100dvh / 880))}}

body.scene #top{position:absolute;left:0;right:0;top:0;z-index:6;padding:max(10px,env(safe-area-inset-top)) 4vw 0;pointer-events:none}
body.scene #top::before{max-width:min(22rem,80vw);height:10px}
body.scene #title{font-size:clamp(1.5rem,calc(var(--u)*30),3rem);margin-bottom:0;max-width:min(26rem,92vw);padding-top:.25rem;padding-bottom:.35rem}
body.scene #hint{margin:.45rem auto 0;font:700 .85rem/1.2 var(--s-disp);letter-spacing:.04em;color:var(--s-ink);text-align:center;text-transform:uppercase;display:table;background:var(--s-paper);padding:.25rem .7rem;border:2px solid var(--s-ink);border-radius:999px;box-shadow:3px 3px 0 var(--s-ink)}
@media (min-aspect-ratio:11/10){
 body.scene #title{font-size:clamp(1.8rem,calc(var(--u)*46),3.4rem);max-width:min(60rem,92vw);flex-wrap:nowrap}
 body.scene #top::before{display:none}
}

#stage{position:absolute;top:0;left:calc(50% - var(--u)*195);width:calc(var(--u)*390);height:calc(var(--u)*844);will-change:transform}
@media (min-aspect-ratio:11/10){#stage{left:calc(50% - var(--u)*640);width:calc(var(--u)*1280);height:calc(var(--u)*760)}}

.obj{pointer-events:auto;--k:1;--e:calc(var(--u)*var(--k));position:absolute;font-size:var(--e);cursor:pointer;outline:0;z-index:2;animation:bob 6.5s ease-in-out infinite;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;translate:calc(var(--ofx,0)*100vw) calc(var(--ofy,0)*100vh)}
.obj.dragging{cursor:grabbing;z-index:6}
/* nur die sichtbaren Teile fangen Tipps, durchsichtige Ecken lassen die Blätter darunter erreichbar */
.obj,.obj .tv,.obj .bb{pointer-events:none}
.obj .ant,.obj .cab,.obj .foot,.obj .plate,.obj .tk,.obj .whip,.obj .handle,.obj .bbody,.obj .sub{pointer-events:auto}
.obj:focus-visible{filter:drop-shadow(0 0 0 var(--s-c)) drop-shadow(0 0 6px var(--s-c)) drop-shadow(0 0 2px #fff)}
.obj:active{transform:scale(.985)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3em)}}

#oTv{--k:.86;left:calc(var(--u)*49);top:calc(var(--u)*128);width:340em;height:306em}
#oSpot{--k:.86;left:calc(var(--u)*45);top:calc(var(--u)*478);width:350em;height:172em;animation-delay:-2s}
@media (min-aspect-ratio:11/10){
 #oTv{--k:1.2;left:calc(var(--u)*300);top:calc(var(--u)*130)}
 #oSpot{--k:1;left:calc(var(--u)*800);top:calc(var(--u)*330)}
}

.plate{position:absolute;font:400 calc(14*var(--e))/1 var(--s-disp);text-transform:uppercase;letter-spacing:.07em;background:var(--s-ink);color:var(--s-b);padding:.45em .85em .35em;border-radius:calc(6*var(--e));white-space:nowrap;box-shadow:calc(3*var(--e)) calc(3*var(--e)) 0 rgba(0,0,0,.28);z-index:5}

/* ---------- Fernseher ---------- */
.tv{position:relative;width:340em;height:306em;isolation:isolate}
.ant i{position:absolute;top:-14em;width:4em;height:62em;margin-left:-2em;left:170em;background:var(--s-ink);transform-origin:50% 100%;animation:wig 5s ease-in-out infinite}
.ant i::after{content:"";position:absolute;left:-5em;top:-6em;width:14em;height:14em;border-radius:50%;background:var(--s-b);border:3em solid var(--s-ink)}
.ant .a1{transform:rotate(-34deg)}
.ant .a2{transform:rotate(30deg);animation-delay:-2.2s}
@keyframes wig{0%,100%{rotate:0deg}50%{rotate:2.5deg}}
.ant .dome{position:absolute;left:138em;top:38em;width:64em;height:26em;border-radius:32em 32em 0 0;background:var(--s-ink)}
.cab{position:absolute;left:0;top:52em;width:340em;height:240em;border:5em solid var(--s-ink);border-radius:36em/42em;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 38%,rgba(0,0,0,.18)),var(--s-a);box-shadow:6em 6em 0 var(--s-ink);z-index:2}
.bezel{position:absolute;left:12em;top:12em;width:216em;height:188em;border-radius:30em/26em;background:#1a1a20;border:3em solid var(--s-ink);box-shadow:inset 0 0 10em #000,0 0 0 3em rgba(255,255,255,.35)}
.crt{position:absolute;inset:8em;border-radius:22em/18em;overflow:hidden;background:#05070a;box-shadow:inset 0 0 18em #000}
#tvPlayer{position:absolute;top:0;left:50%;height:100%;aspect-ratio:16/9;transform:translateX(-50%);background:#000}
#tvPlayer iframe{width:100%;height:100%;border:0;pointer-events:none;display:block}
.noise{position:absolute;inset:-20%;opacity:.0;transition:opacity .4s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/80em 80em;animation:snow .35s steps(4) infinite}
.noise.on{opacity:.75}
@keyframes snow{0%{transform:translate(0,0)}25%{transform:translate(-9%,6%)}50%{transform:translate(7%,-8%)}75%{transform:translate(-4%,-5%)}100%{transform:translate(0,0)}}
.fx{position:absolute;inset:0;z-index:3;cursor:pointer;background:
 linear-gradient(115deg,rgba(255,255,255,.22) 0 12%,transparent 12.5% 100%),
 radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%),
 repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.fx::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);animation:roll 5.5s linear infinite}
@keyframes roll{to{top:110%}}
.mtvmark{position:absolute;z-index:4;top:calc(7*var(--e));right:calc(8*var(--e));font:400 calc(15*var(--e))/1 var(--s-disp);color:#fff;background:var(--s-a);border:calc(2*var(--e)) solid #fff;padding:.12em .35em .08em;transform:rotate(3deg);pointer-events:none;box-shadow:calc(2*var(--e)) calc(2*var(--e)) 0 rgba(0,0,0,.6)}
#tvTitle{position:absolute;z-index:4;left:calc(6*var(--e));right:calc(6*var(--e));bottom:calc(6*var(--e));font:400 calc(14*var(--e))/1.15 var(--s-crt);color:#eaffef;background:rgba(0,0,0,.72);padding:.25em .5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transform:translateY(calc(8*var(--e)));transition:opacity .5s,transform .5s;text-shadow:0 0 6px rgba(120,255,170,.8)}
#tvTitle.on{opacity:1;transform:none}
#tvMute{position:absolute;z-index:5;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none}
#tvMute span{display:inline-block;font:400 calc(15*var(--e))/1 var(--s-disp);text-transform:uppercase;letter-spacing:.06em;background:var(--s-b);color:var(--s-ink);border:calc(3*var(--e)) solid var(--s-ink);border-radius:999px;padding:.5em .9em .4em;box-shadow:calc(3*var(--e)) calc(3*var(--e)) 0 var(--s-ink);animation:pulse 1.4s ease-in-out infinite}
#tvMute span::before{content:"\266A  "}
#tvScreen.sound #tvMute,#tvScreen.empty #tvMute{display:none}
@keyframes pulse{50%{transform:scale(1.09)}}
.panel{position:absolute;left:236em;top:12em;width:88em;height:188em;border:3em solid var(--s-ink);border-radius:12em;background:repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2em,transparent 2em 7em,rgba(255,220,160,.1) 7em 9em),linear-gradient(var(--s-wood),#4e2810);box-shadow:inset 0 0 8em rgba(0,0,0,.5)}
.cab>.led{position:absolute;left:20em;top:211em;width:9em;height:9em;border-radius:50%;background:#ff3a2e;box-shadow:0 0 8em #ff3a2e;animation:blink 2.4s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.tv .plate{left:calc(20*var(--e));top:calc(260*var(--e))}
.foot{position:absolute;top:288em;width:58em;height:18em;background:var(--s-ink);border-radius:0 0 12em 12em;z-index:1}
.foot.f1{left:36em}.foot.f2{right:36em}
/* Tasten am Gehäuse (Holzleiste rechts): zwei Spalten, gemalte Gummitasten */
.panel .tk{position:absolute;width:33em;height:40em;padding:0;display:grid;place-items:center;cursor:pointer;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),transparent 55%),var(--s-c);border:3em solid var(--s-ink);border-radius:11em;box-shadow:2em 3em 0 var(--s-ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.panel .tk::after{content:"";position:absolute;inset:-3em}
.panel .tk:nth-of-type(odd){left:4em}.panel .tk:nth-of-type(even){left:44em}
.panel .tk:nth-of-type(-n+2){top:4em}.panel .tk:nth-of-type(n+3):nth-of-type(-n+4){top:48em}.panel .tk:nth-of-type(n+5):nth-of-type(-n+6){top:92em}.panel .tk.tkf{top:136em;left:4em;width:73em}
.tk svg{width:22em;height:18em;fill:none;stroke:var(--s-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.tk svg .spkr{fill:var(--s-ink);stroke-width:1.5}
.tk .sl,.tk .fout{display:none}
.tk[aria-pressed=true] .fin{display:none}.tk[aria-pressed=true] .fout{display:block}
.tk[aria-pressed=true]{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.35),transparent 55%),var(--s-b)}
.tk[aria-pressed=true] .wv{display:none}.tk[aria-pressed=true] .sl{display:block;stroke:#d0102a}
.panel .tk:active{transform:translate(2em,2em);box-shadow:0 1em 0 var(--s-ink)}
.panel .tk:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tvb{flex:none;min-width:max(48px,calc(64*var(--e)));min-height:max(48px,calc(50*var(--e)));padding:0 .5em;font:400 max(16px,calc(20*var(--e)))/1 var(--s-disp);letter-spacing:-.12em;color:var(--s-ink);background:var(--s-c);border:max(3px,calc(4*var(--e))) solid var(--s-ink);border-radius:max(8px,calc(12*var(--e)));box-shadow:max(3px,calc(4*var(--e))) max(3px,calc(4*var(--e))) 0 var(--s-ink);touch-action:manipulation}
.tvb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--s-ink)}
.tvb:focus-visible{outline:3px solid var(--s-a);outline-offset:2px}
.tvnow{display:none;flex:1;min-width:0;font:700 max(13px,calc(15*var(--e)))/1.2 var(--s-crt);color:#eaffef;background:#111;border:max(2px,calc(3*var(--e))) solid var(--s-ink);border-radius:max(6px,calc(8*var(--e)));padding:.35em .6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 6px rgba(120,255,170,.8)}
.tvnow::before{content:"\266B  "}
.dctl{display:flex;gap:.6rem;margin:0 0 .6rem}
#detail .dctl .tvb{background:var(--s-c);color:var(--s-ink);border-color:var(--s-ink);flex:1;min-height:3.2rem;font-size:1.1rem;letter-spacing:.02em;border-width:3px;box-shadow:3px 3px 0 var(--s-ink);border-radius:.4rem}

/* ---------- Ghettoblaster ---------- */
.bb{position:relative;width:350em;height:172em;isolation:isolate}
.whip{position:absolute;left:300em;top:-26em;width:4em;height:78em;background:linear-gradient(#ccc,#888);border:2em solid var(--s-ink);border-radius:2em;transform-origin:50% 100%;transform:rotate(14deg);animation:wig 4s ease-in-out infinite}
.whip::after{content:"";position:absolute;left:-4em;top:-8em;width:10em;height:10em;border-radius:50%;background:var(--s-green);border:2em solid var(--s-ink)}
.handle{position:absolute;left:64em;top:2em;width:222em;height:44em;border:9em solid #2a2a32;border-bottom:0;border-radius:60em 60em 0 0;box-shadow:0 0 0 3em var(--s-ink);z-index:0}
.bbody{position:absolute;left:0;top:32em;width:350em;height:122em;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 30%),linear-gradient(#52525e,#262630);border:5em solid var(--s-ink);border-radius:20em;box-shadow:6em 6em 0 var(--s-ink);z-index:1}
.spk{position:absolute;top:8em;width:98em;height:98em;border-radius:50%;background:#0c0c0c;border:5em solid #9a9aa8;box-shadow:0 0 0 3em var(--s-ink),inset 0 0 0 2em var(--s-ink)}
.spk.l{left:8em}.spk.r{right:8em}
.spk::before,.spk::after{content:"";position:absolute;inset:-5em;border:4em solid var(--s-green);border-radius:50%;opacity:0;animation:ring 1.04s ease-out infinite;pointer-events:none}
.spk::after{animation-delay:.52s}
@keyframes ringS{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.35);opacity:0}}
@keyframes ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.cone{position:absolute;inset:5em;border-radius:50%;background:radial-gradient(circle,var(--s-green) 0 9%,#161616 10% 22%,#6c6c78 23% 25%,#1c1c1c 26% 50%,#5a5a66 51% 53%,#121212 54% 78%,#444 79% 82%,#0b0b0b 83%);animation:beat .52s ease-in-out infinite}
.spk.r .cone{animation-delay:.0s}
@keyframes beat{0%{transform:scale(1)}12%{transform:scale(1.09)}34%{transform:scale(.97)}60%,100%{transform:scale(1)}}
.mid{position:absolute;left:112em;top:8em;width:116em;height:98em}
.lcd{position:absolute;left:0;right:0;top:0;height:38em;background:#04140a;border:3em solid var(--s-ink);border-radius:6em;padding:4em 6em;box-shadow:inset 0 0 8em rgba(29,185,84,.5)}
.eq{display:flex;align-items:flex-end;justify-content:space-between;height:100%}
.eq i{display:block;width:8em;height:100%;background:linear-gradient(var(--s-b) 0 18%,var(--s-green) 18%);transform-origin:50% 100%;animation:eqb .6s ease-in-out infinite alternate;border-radius:1em}
.eq i:nth-child(1){animation-duration:.45s}.eq i:nth-child(2){animation-duration:.7s;animation-delay:-.2s}.eq i:nth-child(3){animation-duration:.55s;animation-delay:-.4s}.eq i:nth-child(4){animation-duration:.8s}.eq i:nth-child(5){animation-duration:.5s;animation-delay:-.3s}.eq i:nth-child(6){animation-duration:.65s;animation-delay:-.1s}.eq i:nth-child(7){animation-duration:.42s;animation-delay:-.35s}.eq i:nth-child(8){animation-duration:.75s;animation-delay:-.5s}.eq i:nth-child(9){animation-duration:.52s}
@keyframes eqb{0%{transform:scaleY(.12)}100%{transform:scaleY(1)}}
.tape{position:absolute;left:0;right:0;top:44em;height:32em;background:rgba(255,255,255,.14);border:3em solid #8a8a96;border-radius:6em;box-shadow:0 0 0 2em var(--s-ink)}
.reel{position:absolute;top:2em;width:22em;height:22em;border-radius:50%;background:radial-gradient(circle,var(--s-ink) 0 22%,transparent 24%),conic-gradient(#ddd 0 12%,#333 12% 33%,#ddd 33% 45%,#333 45% 66%,#ddd 66% 78%,#333 78% 100%);border:2em solid var(--s-ink);animation:spin 2.2s linear infinite}
.reel:first-child{left:10em}.reel:last-child{right:10em}
@keyframes spin{to{transform:rotate(360deg)}}
.btns{position:absolute;left:0;right:0;top:82em;height:14em;display:flex;gap:5em;justify-content:center}
.btns b{display:block;width:24em;height:100%;background:#c8c8d2;border:2em solid var(--s-ink);border-radius:3em}
.btns b.g{background:var(--s-green)}
.bb .plate{left:50%;top:calc(148*var(--e));transform:translateX(-50%);background:var(--s-green);color:#04140a;box-shadow:calc(3*var(--e)) calc(3*var(--e)) 0 var(--s-ink);border:calc(3*var(--e)) solid var(--s-ink)}

/* ---------- Polaroid-Stapel ---------- */
@keyframes sway{0%,100%{transform:rotate(calc(var(--r) - 2deg)) translateY(0)}50%{transform:rotate(calc(var(--r) + 2.4deg)) translateY(-5em)}}

/* ---------- Deko ---------- */
.dc{position:absolute;z-index:1;pointer-events:none;opacity:.9;animation:drift 9s ease-in-out infinite;font-size:var(--u)}
.dc.c1{left:calc(var(--u)*330);top:calc(var(--u)*455);width:24em;height:24em;border-radius:50%;background:var(--s-c);border:3em solid var(--s-ink)}
.dc.c2{left:calc(var(--u)*12);top:calc(var(--u)*118);width:30em;height:30em;background:var(--s-b);border:3em solid var(--s-ink);transform:rotate(18deg);animation-delay:-3s}
.dc.c3{left:calc(var(--u)*316);top:calc(var(--u)*690);width:0;height:0;border-left:16em solid transparent;border-right:16em solid transparent;border-bottom:28em solid var(--s-a);animation-delay:-5s;filter:drop-shadow(0 0 0 var(--s-ink))}
.dc.c4{left:calc(var(--u)*30);top:calc(var(--u)*690);width:46em;height:12em;background:var(--s-ink);border-radius:8em;animation-delay:-1s;transform:rotate(-14deg)}
@keyframes drift{0%,100%{translate:0 0}50%{translate:6em -10em}}
@media (min-aspect-ratio:11/10){
 .dc.c1{left:calc(var(--u)*270);top:calc(var(--u)*170)}
 .dc.c2{left:calc(var(--u)*1130);top:calc(var(--u)*150)}
 .dc.c3{left:calc(var(--u)*1100);top:calc(var(--u)*700)}
 .dc.c4{left:calc(var(--u)*440);top:calc(var(--u)*700)}
}
#world.paused *,#world.paused *::before,#world.paused *::after{animation-play-state:paused!important}

/* ---------- Detailansicht ---------- */
#detail .box{display:flex;flex-direction:column;overflow:hidden;width:min(94vw,52rem);height:min(90vh,52rem);max-height:none;padding-left:1rem;padding-right:1rem;transform-origin:0 0}
#detail .dhead{display:flex;align-items:center;gap:.8rem;flex:none;padding-bottom:.6rem}
#detail .dhead h2{margin:0!important;font-size:1.5rem!important;transform:none;flex:1;min-width:0}
#detail .back{min-height:48px;min-width:48px;padding:0 .9rem;font-size:1.05rem;flex:none;background:var(--s-b);color:var(--s-ink);border:3px solid var(--s-ink);box-shadow:3px 3px 0 var(--s-ink)}
#detail .dbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:.3rem .25rem 1.2rem;-webkit-overflow-scrolling:touch}
#detail .panel-d[hidden]{display:none}
@media (max-width:700px){
 #detail{padding:0;align-items:stretch}
 #detail .box{width:100%;height:100dvh;max-height:none;border-radius:0;padding:max(.8rem,env(safe-area-inset-top)) .8rem 0}
 #detail .dbody{padding-bottom:max(1.2rem,env(safe-area-inset-bottom))}
}
.now{font-weight:700;margin:.2rem 0 .7rem;color:var(--s-ink);background:var(--s-paper);border:3px solid var(--s-ink);padding:.5rem .7rem;font-size:.95rem}
.now[hidden]{display:none}
button.big{display:block;width:100%;min-height:3.4rem;font-size:1.2rem;margin:.4rem 0}
#tvLink{display:block;margin-top:.7rem;padding:.75rem 0;min-height:44px;font-weight:700;color:var(--s-ink)}
.vlist{list-style:none;margin:.6rem 0;padding:0;display:grid;gap:.5rem}
.vlist li{display:flex;align-items:center;gap:.7rem;min-height:3rem;padding:.45rem .7rem;background:var(--s-paper);color:var(--s-ink);border:3px solid var(--s-ink);font-weight:700;line-height:1.2;box-shadow:3px 3px 0 var(--s-ink)}
.vlist li{cursor:pointer}
.vlist li:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--s-ink)}
.vlist li:focus-visible{outline:4px solid var(--s-c);outline-offset:2px}
.vlist li.cur{background:var(--s-b)}
.vlist .n{flex:none;min-width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--s-ink);color:var(--s-b);font:400 .95rem var(--s-disp)}
.vlist .t{min-width:0;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
 .obj,.whip,#collage .st.ld b::after,.ant i,.cab>.led,.spk::before,.spk::after,.cone,.eq i,.reel,.dc,#collage .st,.fx::after,.noise,#tvMute span{animation:none!important}
 .eq i{transform:scaleY(.55)}
}

/* ---------- Collage: alle Begriffe als Hintergrund der ganzen Seite ---------- */
#collage{position:fixed;inset:0;overflow:hidden;z-index:0}
#collage .st{position:absolute;left:calc(var(--px) + var(--dx,0px));top:calc(var(--py) + var(--dy,0px));z-index:var(--z,auto);width:var(--sw);transform:translate(-50%,-50%) rotate(var(--sr));cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#collage .st.dragging{cursor:grabbing}
#collage .st .xdel{position:absolute;top:-12px;right:-12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font:900 15px/1 system-ui,sans-serif;color:#fff;text-transform:none;letter-spacing:0;animation:none}
#collage .st .xdel::before{content:"\00d7";display:flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;border-radius:13px;background:#222;border:2px solid #fff;font-size:18px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#collage .st .xdel.ask::before{content:"Weg?";background:#e0143c;font-size:13px;padding:0 8px}
#collage .st.big .xdel{display:none}
#collage .st.fl{animation:fl var(--stt,7s) ease-in-out var(--sd,0s) infinite}
#collage .st.new{animation:pop .55s cubic-bezier(.2,1.6,.4,1) both,fl var(--stt,7s) ease-in-out .6s infinite}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes pop{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
#collage .st .im{display:block}
#collage .st img{display:block;width:100%;height:calc(var(--sw)*.85);object-fit:contain;box-sizing:border-box;max-height:none}
#collage .st b{display:block;text-align:center;font-weight:900;word-break:normal;overflow-wrap:anywhere;hyphens:auto;font-size:clamp(.62rem,calc(var(--sw)*.11),1.5rem)}
#collage .st.txt b{font-size:clamp(.78rem,calc(var(--sw)*.17),2.2rem);padding:.3em .45em;margin:0;max-width:100%}
#collage .st.txt{min-height:46px;width:auto;min-width:calc(var(--sw)*.7);max-width:calc(var(--sw)*1.4)}
#collage .st.txt.lg b{font-size:max(.62rem,calc(var(--sw)*.115))}
#collage .st.gen .im{overflow:hidden;height:calc(var(--sw)*.8)}
#collage .st.gen img{height:calc(var(--sw)*.95);object-fit:cover;object-position:50% 0}
#collage .st.ld{opacity:.9}
#collage .st.ld b::after{content:" ...";animation:ldblink 1s steps(2) infinite}
@keyframes ldblink{50%{opacity:0}}
/* angetippt: kurz groß */
#collage.zoomed{z-index:40}
#collage.zoomed::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72);cursor:zoom-out;z-index:99999}
#collage .st.big{z-index:100000;left:50%;top:50%;width:min(78vw,26rem);--sw:min(78vw,26rem)!important;transform:translate(-50%,-50%) rotate(-2deg);animation:none;translate:0 0;cursor:zoom-out;transition:left .3s,top .3s,width .3s}
#collage .st.big.txt{width:min(78vw,26rem)}
#collage .st.big b,#collage .st.big.txt b{font-size:1.4rem}

/* ---------- Immer sichtbares Eingabefeld: eigener Mashup-Streifen (Cyan/Pink, nie Spotify-Gruen) ---------- */
:root{--s-pink:#ff3fb4}
#addBar{position:fixed;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--kb,0px));transform:translateX(-50%);width:min(94vw,40rem);z-index:10;margin:0}
#addBar .tag{position:absolute;left:.7rem;top:0;transform:translateY(-62%) rotate(-2deg);background:var(--s-pink);color:var(--s-ink);border:3px solid var(--s-ink);box-shadow:3px 3px 0 var(--s-ink);padding:.22rem .7rem;font:400 .85rem/1.1 var(--s-disp);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;z-index:2}
#addBar .row{display:flex;gap:.5rem;background:var(--s-c);border:3px solid var(--s-ink);box-shadow:5px 5px 0 var(--s-ink);padding:1rem .45rem .45rem;border-radius:.4rem;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px)}
#addBar input{flex:1;min-width:0;min-height:48px;padding:0 .75rem;font:700 1rem var(--s-disp);color:var(--s-ink);background:var(--s-paper);border:3px solid var(--s-ink);border-radius:.3rem}
#addBar input::placeholder{color:#555;font-weight:700}
#addBar input:focus{outline:3px solid var(--s-pink);outline-offset:1px}
#addBar button{flex:none;min-height:48px;min-width:48px;padding:0 1rem;font:400 1.05rem var(--s-disp);text-transform:uppercase;letter-spacing:.04em;background:var(--s-pink);color:var(--s-ink);border:3px solid var(--s-ink);box-shadow:3px 3px 0 var(--s-ink);border-radius:.3rem}
#addBar button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--s-ink)}
#addBar button:disabled{opacity:.6}
#addMsg{position:absolute;left:0;right:0;bottom:calc(100% + 18px);margin:0 auto;width:max-content;max-width:100%;background:var(--s-ink);color:var(--s-b);font:700 .9rem/1.25 var(--s-disp);padding:.4rem .8rem;border-radius:999px;text-align:center}
#addMsg[hidden]{display:none}

/* ---------- Ghettoblaster ist nur ein Link ---------- */
a.obj,a.obj:visited{color:inherit;text-decoration:none;display:block;-webkit-tap-highlight-color:transparent}
.bb .sub{position:absolute;left:50%;top:calc(176*var(--e));transform:translateX(-50%);font:700 calc(15*var(--e))/1 var(--s-disp);color:var(--s-ink);background:var(--s-paper);border:calc(2*var(--e)) solid var(--s-ink);border-radius:999px;padding:.35em .9em;white-space:nowrap;z-index:5;box-shadow:calc(2*var(--e)) calc(2*var(--e)) 0 var(--s-ink)}

/* ---------- Handy quer: Titel und Eingabestreifen kompakt ---------- */
@media (min-aspect-ratio:11/10) and (max-height:500px){
 body.scene #hint{display:none}
 body.scene #top{padding-top:max(6px,env(safe-area-inset-top))}
 body.scene #title{font-size:1.5rem;padding:.15rem .4rem .2rem;box-shadow:4px 4px 0 var(--s-a)}
 #addBar{width:min(70vw,30rem);bottom:calc(max(6px,env(safe-area-inset-bottom)) + var(--kb,0px))}
 #addBar .row{padding:.75rem .35rem .35rem}
 #addBar .tag{font-size:.72rem}
 #addBar input,#addBar button{min-height:44px}
}

/* ---------- Handy hoch: ein Stapel ausgeschnittener Bilder wie Papierschnipsel auf dem Tisch; Pfeile oben in den Ecken wälzen ihn um ---------- */
/* Bild-Sticker: keine Kachel, kein Theme-Rahmen. Freigestellte Bilder bringen Papierschnitt-Kontur und Schatten selbst mit (Canvas), Fotos bekommen einen weißen Schnittrand */
#collage.stk .st{animation:none;transition:none}
#collage.stk .st.new{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
#collage.stk .st:not(.txt){width:var(--sw);filter:none;background:none;border:0;padding:0;box-shadow:none}
#collage.stk .st.zz{visibility:hidden}
#collage.stk .st:not(.txt) .im{display:block;height:auto;overflow:visible}
#collage.stk .st:not(.txt) img{display:block;width:100%;height:var(--ihh,auto);max-height:none;object-fit:fill;padding:0;margin:0;background:none;border:0;outline:0;border-radius:0;box-shadow:none;filter:none;transition:opacity .25s}
#collage.stk .st.prep img{opacity:0}
#collage.stk .st.rect img{object-fit:cover;border:max(4px,calc(var(--sw)*.022)) solid #fff;box-shadow:0 0 0 1.5px #141018,3px 6px 7px rgba(0,0,0,.42)}
#collage.stk .st:not(.txt) b{position:relative;z-index:1;width:max-content;max-width:max(100%,9rem);margin:-.6em 0 0 50%;translate:-50% 0;font-size:clamp(.85rem,calc(var(--sw)*.08),1.35rem)}
#collage.stk .st.cut b{margin-top:-1.1em}
#collage.stk .st.txt{max-width:calc(var(--sw)*1.15)}
#collage.stk .st.big:not(.txt){width:var(--biw,min(86vw,28rem))!important}
#collage.stk .st.big img{height:auto}
.pgb{display:none}
@media (max-width:700px) and (max-aspect-ratio:11/10){
 /* Titel in der Mitte, links und rechts oben je eine dicke Pfeil-Taste */
 body.scene.stkon #top{padding-left:calc(3vw + 60px);padding-right:calc(3vw + 60px)}
 body.scene.stkon #title{font-size:clamp(1.15rem,calc(var(--u)*25),2rem);flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .3em;margin-top:0;margin-bottom:0}
 body.scene.stkon #title span{font-size:1em!important;display:inline-block}
 body.scene.stkon #hint{display:none}
 .pgb:not([hidden]){display:grid;place-items:center;position:absolute;top:max(env(safe-area-inset-top),calc(var(--pgy,40px) - 27px));width:56px;height:56px;min-height:0;padding:0 0 2px;pointer-events:auto;font:900 28px/1 system-ui,sans-serif;color:var(--s-ink);background:var(--s-c);border:3px solid var(--s-ink);border-radius:14px;box-shadow:4px 4px 0 var(--s-ink);touch-action:manipulation;z-index:7;-webkit-user-select:none;user-select:none}
 #rollL{left:3vw}#rollR{right:3vw}
 .pgb:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--s-ink)}
 .pgb:focus-visible{outline:3px solid var(--s-a);outline-offset:2px}
 /* Fernseher groß unten links über dem Eingabestreifen, Ghettoblaster (1,5-mal) rechts darüber; beide immer über dem Stapel */
 #oTv{--k:.8;left:calc(var(--u)*6);top:calc(100dvh - 112px - var(--u)*250)}
 #oSpot{--k:.72;left:calc(var(--u)*134);top:calc(100dvh - 112px - var(--u)*462);z-index:3;animation-delay:-2s}
 .tv .plate,.bb .plate,.bb .sub,.tvnow,.dc.c1,.dc.c2,.dc.c3,.dc.c4{display:none}
 /* Designer: Ringe nah am Gerät, Titel schärfer, Fernseher/Ghettoblaster liegen sichtbar über dem Papier */
 .spk::before,.spk::after{border-width:2em;animation-name:ringS}
 body.scene.stkon #title span{text-shadow:1.5px 0 var(--r),-1.5px 0 var(--c)}
 #oTv .tv,#oSpot .bb{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
}
}

/* ===== Platzhalter "wird ausgeschnitten" (neuer Begriff, KI-Bildwahl läuft) ===== */
#collage .st.cutph{width:var(--sw);cursor:default}
#collage .st.cutph .ph{position:relative;display:block;width:100%;height:var(--ihh,calc(var(--sw)*.75))}
#collage .st.cutph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 5px 5px rgba(0,0,0,.35))}
#collage .st.cutph .pp{fill:#fffdf4;stroke:#141018;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#collage .st.cutph .cl{fill:none;stroke:#e0143c;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:3 2.4;stroke-linecap:round;animation:cutrun 1.6s linear infinite}
#collage .st.cutph .ph em{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;font:700 clamp(.6rem,calc(var(--sw)*.085),.85rem)/1 ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.06em;color:#4a4458;animation:kiblink 1.4s ease-in-out infinite}
#collage .st.cutph .sc{position:absolute;left:0;top:0;font-style:normal;font-size:clamp(1.4rem,calc(var(--sw)*.2),2.2rem);line-height:1;color:#141018;text-shadow:-1.5px 0 #fff,1.5px 0 #fff,0 -1.5px #fff,0 1.5px #fff;translate:-50% -50%;animation:scissors 3.2s linear infinite;transform-origin:50% 50%;z-index:2}
#collage .st.cutph .sn{position:absolute;top:8%;width:7px;height:5px;background:#ffe14a;border:1px solid #141018;opacity:0;animation:snip 1.6s ease-in infinite}
#collage .st.cutph .sn.a{left:20%}
#collage .st.cutph .sn.b{left:55%;background:#ff4fa3;animation-delay:.5s}
#collage .st.cutph .sn.c{left:78%;background:#2de2e6;animation-delay:1s}
#collage .st.ghost{pointer-events:none;transition:opacity .4s}
@keyframes kiblink{50%{opacity:.35}}
@keyframes cutrun{to{stroke-dashoffset:-47.4}}
@keyframes scissors{0%{left:2%;top:6%;rotate:90deg}25%{left:90%;top:4%;rotate:100deg}50%{left:90%;top:84%;rotate:180deg}75%{left:2%;top:84%;rotate:270deg}100%{left:2%;top:6%;rotate:450deg}}
@keyframes snip{0%{opacity:0;translate:0 0;rotate:0deg}15%{opacity:1}100%{opacity:0;translate:6px 90%;rotate:200deg}}
@media (prefers-reduced-motion:reduce){#collage .st.cutph .cl,#collage .st.cutph .sc,#collage .st.cutph .sn,#collage .st.cutph .ph em{animation:none!important}#collage .st.cutph .sc{left:44%;top:-6%}#collage .st.cutph .sn{opacity:.8}}

/* ---------- Vollbild am Fernseher: riesiger Fernseher im Querformat (echtes Fullscreen oder CSS-Ersatz, z. B. iPhone; Hochformat wird um 90 Grad gedreht) ---------- */
body.tvfull{overflow:hidden}
body.tvfull #collage,body.tvfull #top,body.tvfull #addBar,body.tvfull #oSpot{visibility:hidden}
body.tvfull #stage{will-change:auto;transform:none!important;animation:none!important}
body.tvfull #world{z-index:60}
body.tvfull #oTv{--e:min(calc(var(--fw)/506),calc(var(--fh)/252));position:fixed;left:0;top:0;width:var(--fw);height:var(--fh);translate:none;animation:none!important;filter:none;z-index:60;cursor:default;background:radial-gradient(ellipse at 50% 40%,#2a2a34,#0b0b10)}
body.tvfull #oTv.rot{transform-origin:0 0;transform:translateX(var(--fh)) rotate(90deg)!important}
body.tvfull #oTv:active{transform:none}
body.tvfull #oTv.rot:active{transform:translateX(var(--fh)) rotate(90deg)!important}
body.tvfull #oTv .tv{position:absolute;filter:none;width:492em;height:240em;left:calc(50% - 246em);top:calc(50% - 120em)}
body.tvfull .ant,body.tvfull .foot,body.tvfull .tv .plate{display:none}
body.tvfull .cab{top:0;width:492em;height:234em}
body.tvfull .bezel{width:362em;height:210em}
body.tvfull .panel{left:382em;height:210em}
body.tvfull .panel .tk{height:42em}
body.tvfull .panel .tk:nth-of-type(-n+2){top:6em}
body.tvfull .panel .tk:nth-of-type(n+3):nth-of-type(-n+4){top:56em}
body.tvfull .panel .tk:nth-of-type(n+5):nth-of-type(-n+6){top:106em}
body.tvfull .panel .tk.tkf{top:156em}
body.tvfull .cab>.led{top:214em}

/* Sticker-Bilder fangen keine eigenen Gesten (iOS: natives Bild-Ziehen bricht sonst den Zug ab) */
#collage .st img{-webkit-user-drag:none;user-drag:none;pointer-events:none;-webkit-touch-callout:none}