/* ПЕРВЫЙ СЕТ · ЯЩИК — HUD der Kiste, Plattenrueckseite (Sheet), Bestellzettel, «Список», CSS-3D-Ersatzkiste.
 * Drei Farben: Schwarz = Welt, Papier #f2f2f0 = alles Anfassbare, Lime = «jetzt / Aktion». Text ≥ 15 px, Ziele ≥ 44 px. */

/* ---------- Kisten-HUD ---------- */
/* App-Modus (/media/appmode.js): Seitentaste rechts unter Kopfzeile und Kisten-Reitern; im Pult unter dem ✕, neben den «+» */
:root{--sla-top:calc(var(--st) + 114px)}
/* Wellenkarte statt Reitern: 5 Orte (Beschriftung oben, ganze Hoehe = Tippflaeche), Wellenform + Striche je Karte im Canvas,
 * lime Abspielkopf folgt der Kamera (nur transform). Unterkante ≤ st+106: darunter liegt rechts die Seitentaste (st+114…182). */
.wnav{position:fixed;left:12px;right:12px;top:calc(var(--st) + 56px);height:50px;z-index:24;display:flex;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}
.wnav button{position:relative;z-index:1;flex:1 1 0;min-width:max-content;height:50px;display:flex;align-items:flex-start;justify-content:center;gap:5px;padding:8px 2px 0;font:500 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color .25s}
.wnav button[aria-current="true"]{color:var(--paper)}
.wnav button[aria-current="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;margin-top:2.5px}
.wnav canvas{position:absolute;left:0;bottom:0;width:100%;height:26px;pointer-events:none}
.wnav .ph{position:absolute;left:-1px;bottom:0;width:2px;height:28px;border-radius:1px;background:var(--lime);box-shadow:0 0 10px rgb(210 238 82/.7);pointer-events:none;will-change:transform}
.wnav.jump .ph{transition:transform .5s var(--e-out)}
.wnav.drag .ph{transition:none}
.cui{position:fixed;left:0;right:0;bottom:0;z-index:22;pointer-events:none;padding:40px 16px calc(var(--sb) + 12px);display:grid;gap:10px;background:linear-gradient(to top,rgb(0 0 0/.8),rgb(0 0 0/.6) 58%,transparent)}   /* Integration: kraeftiger + 40 px hoeher, Titel bleibt ueber Pult/Plakat/Paket lesbar */
.cui>*{pointer-events:auto}
/* Verb-Zeile unter der Bildunterschrift: was man hier tut («↓ сорви афишу»), je Ort nach 2 eigenen Griffen weg */
.chint{justify-self:start;margin-top:-4px;font-size:11px;color:var(--muted);text-align:left;transition:opacity .5s;pointer-events:none!important}
.chint.off{opacity:0}
.ccap{position:relative;display:grid;justify-items:start;gap:6px;text-align:left;min-height:44px;padding:4px 52px 4px 0;color:var(--paper)}
.ccap::after{content:"";position:absolute;right:0;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1px solid rgb(242 242 240/.32);background:rgb(0 0 0/.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 14.5l6-6 6 6' fill='none' stroke='%23f2f2f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ccap:active::after{background-color:rgb(242 242 240/.16)}
/* Kanten-Chip ueber der Bildunterschrift: «Дальше: СОБЫТИЯ →» / «← ПУЛЬТ» */
.cedge{position:absolute;left:16px;bottom:100%;margin-bottom:10px;display:inline-flex;align-items:center;min-height:44px;max-width:calc(100% - 72px);padding:0 16px;border-radius:999px;background:rgb(10 10 10/.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgb(210 238 82/.6);font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .22s,transform .26s var(--e-out)}
.cedge.on{opacity:1;transform:none}
.ccap .k{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ccap b{font:800 22px/1.05 var(--f-d);letter-spacing:-.03em;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance}   /* bis 2 Zeilen statt «…»: der Chevron nimmt rechts 52 px */
.ccap .s{font:400 15px/1.25 var(--f-b);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar{display:grid;grid-template-columns:48px 1fr auto 48px;gap:10px;align-items:center}
.cpill{min-height:52px;font-size:16px;white-space:nowrap;overflow:hidden}
.cpill.tight{font-size:14.5px;padding:0 12px;gap:6px}.cpill.tighter{font-size:13px;padding:0 8px;letter-spacing:-.01em}
.ib{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);color:var(--paper);background:rgb(0 0 0/.35)}
#snd .x{display:none}#snd[aria-pressed="true"] .x{display:inline}#snd[aria-pressed="true"] .w{display:none}
body.pulled .cui,body.pulled .wnav,body.pulled .coach{opacity:0;pointer-events:none;transition:opacity .25s}
.cui,.wnav{transition:opacity .35s}
/* Kapitelkarte: erste Ankunft je Ort, Glyphen steigen durch die Maske und landen auf dem Schlag, dann nach oben weg */
.kt{position:fixed;left:16px;right:56px;top:calc(var(--st) + 150px);z-index:23;pointer-events:none;color:var(--paper)}
.kt-k{font:500 11px/1 var(--f-m);letter-spacing:.16em;color:var(--muted);margin-bottom:10px;opacity:0;transition:opacity .25s}
.kt-h{font:800 clamp(52px,16vw,80px)/.9 var(--f-d);letter-spacing:-.05em;margin-left:-.04em;white-space:nowrap;text-shadow:0 0 36px rgb(0 0 0/.65)}
.kt-h .ln{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .06em .1em 0}
.kt-h .g{display:inline-block;transform:translateY(110%);opacity:0}
.kt-t{font:500 12px/1.35 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:rgb(242 242 240/.86);margin-top:12px;text-shadow:0 1px 12px rgb(0 0 0/.8)}
.kt-t i{font-style:normal;opacity:0}
.kt.in .kt-k{opacity:1}
.kt.in .g{transform:none;opacity:1;transition:transform .42s var(--e-expo) calc(var(--i) * 22ms),opacity .24s linear calc(var(--i) * 22ms)}
.kt.in .kt-t i{opacity:1;transition:opacity 0s linear calc(420ms + var(--j) * var(--sd))}
.kt.out .g{transform:translateY(-110%);opacity:1;transition:transform .28s var(--e-in) calc(var(--i) * 12ms)}
.kt.out .kt-t i{opacity:1}
.kt.out .kt-k,.kt.out .kt-t{opacity:0;transition:opacity .2s}
.kt.r{opacity:0;transition:opacity .15s linear}.kt.r.in{opacity:1}.kt.r.out{opacity:0}
.kt.r .g,.kt.r.out .g{transform:none;opacity:1;transition:none}.kt.r .kt-t i,.kt.r .kt-k{opacity:1;transition:none}
/* Coach: dunkle Platte ueber der Bildunterschrift, nur «Пропустить» nimmt Tipps an (CTA + Telegram bleiben frei) */
.coach{position:fixed;left:16px;right:16px;bottom:210px;z-index:23;display:grid;grid-template-columns:26px 1fr;gap:8px 12px;align-items:center;padding:14px 12px 8px 16px;border-radius:16px;background:rgb(12 12 14/.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(242 242 240/.12);box-shadow:0 18px 40px -12px rgb(0 0 0/.7);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--e-out)}
.coach.on{opacity:1;transform:none}
.co-ic{width:26px;height:26px;color:var(--lime)}.co-ic svg{display:block;width:100%;height:100%}
.co-t{font:500 17px/1.3 var(--f-b);color:var(--paper)}
.co-f{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.co-d{display:flex;gap:10px;font:500 11px/1 var(--f-m);letter-spacing:.14em;color:var(--faint)}
.co-d i{font-style:normal}.co-d i.on{color:var(--lime)}
.co-x{pointer-events:auto;min-height:44px;padding:0 14px;margin-right:-4px;border-radius:999px;border:1px solid var(--line);font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
/* Geisterhand (Coach): Hand in Papier ueber einem eigenen lime Ring (sieht aus wie #thumb, teilt aber keinen Zustand mit dem Spiel), Wischbahn lime gestrichelt */
.gring{position:fixed;z-index:13;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1.5px solid var(--lime);box-shadow:0 0 24px rgb(210 238 82/.3);pointer-events:none;opacity:0}
.ghand{position:fixed;z-index:14;width:56px;height:56px;pointer-events:none;opacity:0;transform-origin:20px 5px;filter:drop-shadow(0 6px 10px rgb(0 0 0/.5))}
.ghand svg{display:block}
.gpath{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:12;pointer-events:none;display:none;opacity:0;overflow:visible}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 96px);z-index:60;transform:translate(-50%,8px);opacity:0;pointer-events:none;padding:12px 16px;border-radius:999px;background:var(--paper);color:#0a0a0a;font:500 15px/1.2 var(--f-b);transition:opacity .25s,transform .25s;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Plattenrueckseite (Sheet) ---------- */
.scrim{position:fixed;inset:0;z-index:41;background:rgb(0 0 0/.6);opacity:0;transition:opacity .3s}
.scrim.on{opacity:1}
.sheet{--shTop:50dvh;position:fixed;left:0;right:0;bottom:0;top:var(--shTop);z-index:40;background:var(--paper);color:#0a0a0a;border-radius:20px 20px 0 0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:0 20px calc(var(--sb) + 28px);transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.8,.2,1);box-shadow:0 -24px 60px -20px rgb(0 0 0/.8);-webkit-user-select:text;user-select:text;
  background-image:radial-gradient(circle at 78% 34%,transparent 0 41%,rgb(0 0 0/.035) 41.3% 42.2%,transparent 42.6%),radial-gradient(circle at 78% 34%,rgb(0 0 0/.025) 0 3%,transparent 3.4%)}
.sheet.on{transform:none}
.sheet.full{--shTop:calc(var(--st) + 10px)}
.sheet.drag{transition:none}
.sh-grip{position:sticky;top:0;z-index:2;display:flex;justify-content:center;align-items:center;height:30px;margin:0 -20px;background:linear-gradient(var(--paper) 70%,rgb(242 242 240/0));touch-action:none;cursor:grab}
.sh-grip i{width:44px;height:4px;border-radius:2px;background:rgb(0 0 0/.22)}
.sh-x{position:absolute;right:8px;top:6px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#0a0a0a}
.sh-x svg{width:20px;height:20px}
.sh-cat{font:500 12px/1.2 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgb(0 0 0/.58);margin:4px 48px 10px 0}
.sheet h2{font:800 28px/1.04 var(--f-d);letter-spacing:-.035em;margin:0 0 8px}
.sheet h2:focus,.slip h2:focus,.list h2:focus{outline:none}
.sh-sub{font:500 16px/1.35 var(--f-b);color:rgb(0 0 0/.7);margin-bottom:12px}
.sh-lead{font:400 16px/1.5 var(--f-b);margin-bottom:16px}
.sh-k{font:500 12px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:rgb(0 0 0/.5);margin:18px 0 8px;padding-top:12px;border-top:1px solid rgb(0 0 0/.12)}
.sh-tl{list-style:none;display:grid;gap:0}
.sh-tl li{display:grid;grid-template-columns:40px 1fr;gap:4px 8px;padding:10px 0;border-bottom:1px solid rgb(0 0 0/.08);font:400 15px/1.45 var(--f-b)}
.sh-tl li .n{font:500 13px/1.6 var(--f-m);letter-spacing:.06em;color:rgb(0 0 0/.55)}
.sh-tl li b{font-weight:600;display:block}
.sh-cr{font:400 15px/1.5 var(--f-b);color:rgb(0 0 0/.72)}
.sh-act,.sh-alts{display:grid;gap:8px;margin:22px 0 6px}
.sh-act .btn,.sh-alts .btn{min-height:54px}
/* Hauptaktion klebt am unteren Blattrand (Rand des Blatts = padding-bottom, daher negativ), Nebenwege bleiben im Fluss darueber */
.sh-sticky{position:sticky;bottom:calc(-1 * (var(--sb) + 28px));z-index:2;margin:22px -20px 0;padding:18px 20px calc(var(--sb) + 14px);background:linear-gradient(rgb(242 242 240/0),var(--paper) 28%)}
.sh-alts+.sh-sticky{margin-top:0}
.sh-sticky .btn{width:100%;min-height:54px}
/* Einlauf des Blatts: cat → h2 → sub → lead → Zeilen, je 40 ms; danach steht alles */
.sheet.on .sx{animation:sh-in .38s var(--e-out) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes sh-in{from{opacity:0;transform:translateY(12px)}}
.btn.dot{background:#0a0a0a;color:var(--paper);gap:12px}
.btn.dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgb(210 238 82/.18);flex:none}
.btn.line{border:1px solid rgb(0 0 0/.2);color:#0a0a0a;background:none}
.sh-row{display:flex;flex-wrap:wrap;gap:8px}
.sh-row .btn{flex:1 1 auto;min-height:48px;font-size:15px;padding:0 14px}
.sh-thumb{display:block;width:min(62vw,260px);aspect-ratio:1;object-fit:cover;border-radius:4px;margin:6px 0 16px;box-shadow:0 18px 40px -16px rgb(0 0 0/.6);background:#111}
.sh-addr{font:500 16px/1.45 var(--f-b);margin:6px 0 4px}
.sh-addr small{display:block;font:400 15px/1.4 var(--f-b);color:rgb(0 0 0/.6)}
/* Quiz-Chips */
.qz{display:grid;gap:18px;margin-top:8px}
.qz fieldset{border:0;display:grid;gap:8px}
.qz legend{font:600 16px/1.3 var(--f-b);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgb(0 0 0/.22);font:500 15px/1.2 var(--f-b);color:#0a0a0a;background:rgb(255 255 255/.4)}
.chips input:checked+span{background:#0a0a0a;color:var(--paper);border-color:#0a0a0a}
.chips input:focus-visible+span{outline:2px solid #0a0a0a;outline-offset:2px}
.qres{margin-top:18px;padding:16px;border-radius:12px;background:#0a0a0a;color:var(--paper);display:grid;gap:8px}
.qres h3{font:800 20px/1.1 var(--f-d);letter-spacing:-.02em}
.qres p{font:400 15px/1.45 var(--f-b);color:rgb(242 242 240/.82)}
.qres .btn.dot{background:var(--paper);color:#0a0a0a}

/* ---------- Bestellzettel ---------- */
.slip{position:fixed;left:0;right:0;bottom:var(--kb, 0px);top:calc(var(--st) + 10px);z-index:45;background:var(--paper);color:#0a0a0a;border-radius:6px 6px 0 0;overflow:auto;overscroll-behavior:contain;padding:22px 20px calc(var(--sb) + 30px);transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.8,.2,1);-webkit-user-select:text;user-select:text} /* --kb: Tastatur (sheets.js, visualViewport) */
.slip::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;background:radial-gradient(circle at 7px -2px,#000 5px,transparent 5.5px) 0 0/14px 10px repeat-x}
.slip.on{transform:none}
.sl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid #0a0a0a;padding-bottom:12px;margin-bottom:6px}
.sl-top p{font:500 12px/1.5 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgb(0 0 0/.6)}
.slip h2{font:800 26px/1.05 var(--f-d);letter-spacing:-.03em;margin:12px 0 6px}
.sl-lead{font:400 15px/1.45 var(--f-b);color:rgb(0 0 0/.7);margin-bottom:8px}
.slip .sh-x{position:static;flex:none;margin:-10px -10px 0 0}
.fld{display:grid;gap:6px;padding:14px 0;border-bottom:1px dashed rgb(0 0 0/.25)}
.fld>label,.fld .lbl{font:500 12px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:rgb(0 0 0/.6)}
.fld input[type=text],.fld input[type=tel],.fld textarea{width:100%;min-height:46px;border:0;border-bottom:1.5px solid rgb(0 0 0/.35);border-radius:0;background:transparent;font:500 18px/1.3 var(--f-b);color:#0a0a0a;padding:8px 0;outline:none;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:88px;resize:vertical;font-size:16px;line-height:1.45}
.fld input:focus,.fld textarea:focus{border-bottom-color:#0a0a0a;box-shadow:0 1.5px 0 #0a0a0a}
.fld .err{display:none;font:500 15px/1.3 var(--f-b);color:#a3000f}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad textarea{border-bottom-color:#a3000f}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Zettel: «Что дальше» — 4 Schritte aus «Как записаться», Schritt 1 = diese Anfrage (lime) */
/* Stempel nach echtem ok von /api/lead: schlaegt mit Ueberschwingen auf (scale 1.6 → 1, −8°) */
.sl-stamp{display:inline-block;margin-bottom:14px;padding:7px 12px 6px;border:2px solid var(--lime);border-radius:4px;color:var(--lime);font:800 15px/1 var(--f-d);letter-spacing:.04em;font-style:normal;text-transform:uppercase;transform:rotate(-8deg);transform-origin:30% 60%}
.slip.ok .sl-stamp{animation:sl-slam .26s var(--e-snap) both}
@keyframes sl-slam{from{opacity:0;transform:rotate(-8deg) scale(1.6)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.sl-send{margin-top:18px;width:100%}
.sl-send[disabled]{opacity:.6}
/* Zettel = Lead-Block (18.10.): Absicht → Telegram (2 Tipps), Angebote, DJ Manager, Rueckruf nur Telefon */
.sl-int{margin:8px 0 16px}
.slip .sl-tg{width:100%;gap:10px;border:1.5px solid #0a0a0a}
.sl-tg svg{width:22px;height:22px;flex:none}
.sl-next{margin-top:10px;font:400 14px/1.45 var(--f-b);color:rgb(0 0 0/.62)}
.sl-offers{list-style:none;display:grid;gap:8px;margin:14px 0}
.sl-offers li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px dashed rgb(0 0 0/.32);border-radius:8px;font:500 15px/1.35 var(--f-b)}
.sl-offers li::before{content:"";flex:none;width:9px;height:9px;margin-top:.38em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px #0a0a0a}
.slip .sl-djm{width:100%;gap:10px}
.sl-orb{width:26px;height:26px;flex:none;border-radius:50%;background:radial-gradient(circle,var(--lime) 0 12%,#0a0a0a 13% 26%,transparent 27%),repeating-radial-gradient(circle,#1b1d21 0 1.4px,#08090b 1.4px 2.8px);box-shadow:0 0 0 2px var(--lime)}
.sl-call{margin-top:12px;border-top:1px dashed rgb(0 0 0/.3)}
.sl-call summary{display:flex;align-items:center;gap:12px;min-height:52px;list-style:none;cursor:pointer;font:600 16px/1.3 var(--f-b)}
.sl-call summary::-webkit-details-marker{display:none}
.sl-call summary::after{content:"+";margin-left:auto;font:400 24px/1 var(--f-b)}
.sl-call[open] summary::after{content:"−"}
.sl-cons{margin-top:10px;font:400 13px/1.45 var(--f-b);color:rgb(0 0 0/.62)}
.sl-cons a{text-decoration:underline;text-underline-offset:2px}
.slip.ok :is(#sl-h,.sl-int,.sl-tg,.sl-next,.sl-offers,.sl-djm,.sl-call){display:none}
/* DJ Manager in der unteren Leiste der Kiste (#dj-manager, djm.js baut den Knopf hinein): nur die Platte, deckt keine Spielsteuerung */
.cbar #dj-manager .djm-launch{min-height:48px;width:48px;padding:1px;gap:0;justify-content:center;border-radius:50%}
.cbar #dj-manager .djm-lt{display:none}
.sl-alt{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sl-alt a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 14px;border-radius:999px;border:1px solid rgb(0 0 0/.2);font:500 15px/1.2 var(--f-b)}
.sl-msg .sl-alt a{border-color:rgb(242 242 240/.28);color:var(--paper)}
.sl-msg{display:none;margin-top:14px;padding:14px;border-radius:10px;background:#0a0a0a;color:var(--paper)}
.sl-msg b{display:block;font:800 18px/1.15 var(--f-d);margin-bottom:6px}
.sl-msg p{font:400 15px/1.45 var(--f-b);color:rgb(242 242 240/.85)}
.slip.fail .sl-msg.e{display:block}
.slip.ok form{display:none}
.slip.ok .sl-msg.ok{display:block;margin-top:24px;padding:22px 18px}
.sl-msg.ok .btn{margin-top:14px}
.sl-msg .btn.dot{background:var(--paper);color:#0a0a0a}

/* ---------- «Список» ---------- */
.list{position:fixed;inset:0;z-index:44;background:#050505;color:var(--paper);overflow:auto;overscroll-behavior:contain;padding:calc(var(--st) + 12px) 16px calc(var(--sb) + 40px);transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);-webkit-user-select:text;user-select:text}
.list.on{transform:none}
.ls-top{position:sticky;top:calc(-1 * var(--st) - 12px);z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 -16px;padding:calc(var(--st) + 8px) 16px 8px;background:linear-gradient(#050505 80%,rgb(5 5 5/0))}
.ls-top h2{font:800 15px/1.2 var(--f-d)}
.ls-top .sh-x{position:static;color:var(--paper)}
.ls-nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 18px}
.ls-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase}
.list section{padding:18px 0 8px;border-top:1px solid var(--line)}
.list section>h3{font:500 12px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:6px 0 14px}
.li{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid rgb(242 242 240/.08)}
.li .c{font:500 12px/1 var(--f-m);letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.li h4{font:700 19px/1.2 var(--f-d);letter-spacing:-.02em}
.li p{font:400 15px/1.5 var(--f-b);color:rgb(242 242 240/.8)}
.li ul,.li ol{padding-left:20px;font:400 15px/1.55 var(--f-b);color:rgb(242 242 240/.78)}
.li .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.li .acts .btn{min-height:46px;font-size:15px;padding:0 16px}
.li .acts .btn.ghost{border-color:var(--line)}
.btn.dotd{background:var(--paper);color:#0a0a0a;gap:10px}
.btn.dotd::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px #0a0a0a;flex:none}
.ls-foot{margin-top:24px;display:grid;gap:12px}

/* ---------- CSS-3D-Ersatzkiste (kein WebGL2 / zu langsam): DOM-Huellen mit perspective, Gyro ueber --tx ---------- */
.cssx{position:fixed;inset:0;z-index:5;background:radial-gradient(70% 46% at 50% 30%,#15171c 0,#08090b 55%,#000 82%);overflow:hidden;touch-action:none;--tx:0}
.cx-lamp{position:absolute;left:50%;top:0;width:min(90vw,420px);height:72vh;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 0,rgb(244 246 255/.14),transparent 72%);pointer-events:none}
.cx-wrap{position:absolute;left:50%;top:calc(var(--st) + 210px);width:min(80vw,340px);transform:translateX(-50%) rotateY(calc(var(--tx) * 6deg));transform-style:preserve-3d}
.cx-tab{position:absolute;right:4%;top:-92px;padding:10px 18px 70px;border-radius:9px 9px 0 0;background:var(--paper);color:#0a0a0a;font:800 17px/1 var(--f-d);letter-spacing:-.01em;pointer-events:none}
.cx-stage{position:relative;aspect-ratio:1;perspective:900px;perspective-origin:50% -30%}
.cx-card{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.35,.4,1),filter .3s;border-radius:2px;background:#151311;box-shadow:0 -1px 0 rgb(255 255 255/.06) inset,0 18px 30px -18px #000}
.cx-card img,.cx-card .cx-t{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px;filter:saturate(.75) brightness(.8)}
.cx-card.cur img,.cx-card.cur .cx-t{filter:saturate(1)}
.cx-card .cx-t{display:grid;align-content:start;padding:18px;background:#0d0d0d;color:var(--paper);font:800 21px/1.05 var(--f-d);letter-spacing:-.02em}
.cx-card.paper .cx-t{background:var(--paper);color:#0a0a0a}
.cx-st{position:absolute;right:8%;top:8%;width:62px;height:62px;border-radius:50%;background:var(--lime);color:#0a0a0a;display:grid;place-items:center;font:800 13px/1 var(--f-d);transform:rotate(-12deg)}
.cx-front{position:absolute;left:-9%;right:-9%;bottom:-7%;height:30%;background:linear-gradient(#1b1d22,#0b0c0e 70%);border-radius:2px;box-shadow:0 30px 50px -10px #000,0 -1px 0 rgb(220 228 245/.22) inset;pointer-events:none;z-index:40}
.cx-front::before,.cx-front::after{content:"";position:absolute;bottom:0;width:6%;height:260%;background:linear-gradient(#5b6069,#2a2d33 40%,#141519)}
.cx-front::before{left:0}.cx-front::after{right:0}
/* ---------- Station ПУЛЬТ: echtes Pult der 2D-Seite (deck.js) im Spielmodus. Regeln aus src2d/styles.css (.deck, .deck-stage,
 * .deck.game), Variablen der 2D-Seite nur innerhalb der Ebene, damit die Pult-Leisten genau wie dort aussehen. Geschlossen
 * liegt die Ebene links ausserhalb des Bildes (gleiche Groesse → Pult-Kamera bleibt heil, IntersectionObserver haelt die Decks an). ---------- */
.deck{--bg:#060607;--line:rgb(242 242 240/.09);--line2:rgb(242 242 240/.17);--muted:#a4a7af;--dim:#767a83;--ink:#0a0b05;
  position:fixed;inset:0;z-index:1000;width:auto;height:100vh;height:100dvh;min-height:0;overflow:hidden;border:0;border-radius:0;touch-action:none;outline:none;
  background:radial-gradient(120% 90% at 50% 0%,#15171c,#08090b 70%);color:var(--paper);
  visibility:hidden;transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.deck.on{visibility:visible;transform:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* Iris: das Pult oeffnet sich als Kreis aus dem linken Jog der 3D-Station (--ox/--oy aus hub.project('deck')) und schliesst dorthin */
.deck.iris{transform:none;clip-path:circle(0px at var(--ox) var(--oy));transition:clip-path .56s var(--e-expo),visibility 0s linear .56s}
.deck.iris.on{clip-path:circle(150vmax at var(--ox) var(--oy));visibility:visible;transition:clip-path .56s var(--e-expo),visibility 0s}
.deck-stage{position:absolute;inset:0}
.deck-stage canvas{display:block;width:100%;height:100%;touch-action:none!important}
.deck-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.8)}
.deck.live .deck-start,.deck.live .deck-poster{display:none}
.deck-start{position:absolute;inset:0;z-index:3;display:grid;align-content:end;justify-items:start;gap:14px;text-align:left;
  padding:calc(var(--st) + 64px) 16px calc(var(--sb) + 22px);background:linear-gradient(to top,rgb(6 6 7/.96) 34%,rgb(6 6 7/.62) 66%,rgb(6 6 7/.3))}
.dk-x{position:absolute;top:calc(var(--st) + 8px);right:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--paper);background:rgb(6 6 7/.62);border:1px solid var(--line2)}
.dk-x svg{width:20px;height:20px}
.dk-k{font:500 11px/1.2 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.dk-k::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lime);flex:none}
.deck-start h2{font:800 clamp(38px,11vw,56px)/.92 var(--f-d);letter-spacing:-.045em;margin-left:-.03em;max-width:9em}
.dk-i{font:500 17px/1.35 var(--f-b);color:var(--paper);max-width:24em}
.dk-go{width:100%;min-height:60px;font-size:17px;margin-top:6px}
.dk-go[disabled]{opacity:.7}
.deck-msg{font:500 12px/1.5 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.deck-msg:empty{display:none}
.deck-msg a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.dk-h{font:400 15px/1.45 var(--f-b);color:var(--muted);max-width:30em}
/* Modell-Hinweis (CC BY) als LED-Punkt am Pult: halten → Name klappt aus dem Punkt, loslassen → zu */
.mdot{position:absolute;z-index:4;top:calc(var(--st) + 8px);left:8px;width:44px;height:44px;padding:0;display:grid;place-items:center;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.deck.live .mdot{top:auto;left:max(4px,calc(env(safe-area-inset-left) - 4px));bottom:calc(max(.6rem,var(--sb)) + 78px)}
.md-h{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#202126,#09090b 70%);border:1px solid var(--line2);box-shadow:inset 0 2px 4px rgb(0 0 0/.85),0 1px 0 rgb(255 255 255/.07),0 6px 14px rgb(0 0 0/.55)}
.md-h i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fbffe0 0 10%,#e4f77e 26%,var(--lime) 48%,#6f8513 100%);box-shadow:inset 0 -2px 3px rgb(0 0 0/.35),0 0 10px rgb(210 238 82/.5),0 0 0 1px rgb(0 0 0/.45);transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;animation:md-glow 3.2s ease-in-out infinite}
.md-h::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--lime);opacity:0;pointer-events:none}
.mdot.on .md-h i{transform:translateY(1px) scale(.82);animation:none;box-shadow:inset 0 2px 3px rgb(0 0 0/.4),0 0 18px rgb(210 238 82/.95),0 0 0 1px rgb(0 0 0/.45)}
.mdot.on .md-h::after{animation:md-ring .55s cubic-bezier(.2,.8,.2,1)}
.mdot:focus-visible .md-h{outline:2px solid var(--lime);outline-offset:3px}
.md-l{position:absolute;left:7px;top:50%;display:grid;gap:3px;white-space:nowrap;text-align:left;padding:8px 16px 8px 40px;border-radius:999px;background:rgb(6 6 7/.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(210 238 82/.35);box-shadow:0 10px 28px rgb(0 0 0/.55);pointer-events:none;opacity:0;transform:translateY(-50%) scale(.6);transform-origin:16px 50%;clip-path:inset(0 calc(100% - 32px) 0 0 round 999px);transition:clip-path .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1),opacity .16s}
.mdot.on .md-l{opacity:1;transform:translateY(-50%) scale(1);clip-path:inset(0 0 0 0 round 999px);transition:clip-path .42s cubic-bezier(.2,.9,.25,1),transform .34s cubic-bezier(.3,1.4,.5,1),opacity .12s}
.md-l b{font:500 10px/1.15 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.md-l i{font:400 10px/1.15 var(--f-m);font-style:normal;letter-spacing:.06em;color:var(--muted)}
@media (max-width:350px){.md-l{padding-right:12px}.md-l i{letter-spacing:0}}
@keyframes md-glow{50%{box-shadow:inset 0 -2px 3px rgb(0 0 0/.35),0 0 4px rgb(210 238 82/.25),0 0 0 1px rgb(0 0 0/.45)}}
@keyframes md-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.3)}}
@media (prefers-reduced-motion:reduce){.md-h i{animation:none}.mdot.on .md-h::after{animation:none}.md-l,.mdot.on .md-l{transform:translateY(-50%);clip-path:none;transition:opacity .12s}}
@media (max-height:640px){.dk-h{display:none}.deck-start h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){.cx-card{transition-duration:.01s}.sheet,.slip,.list{transition-duration:.01s}.deck,.deck.on{transition:none}.sheet.on .sx{animation:none}.slip.ok .sl-stamp{animation:none}}
@media (max-height:700px){.ccap b{font-size:19px}.ccap .s{display:none}}