/* Live-Welt · Vorspann und Arbeiter: alte Folie mit Rissen und Scherben, Bauplan, Kran, Maler, Arbeiter in der Welt.
   Farben der alten Folie bewusst im Stil einer Standardvorlage; die Farben der neuen Welt kommen aus deck.css. */
:root{
  --ppt-blau:#1f3864;
  --ppt-blau-hell:#2f5597;
  --ppt-akzent:#4f81bd;
  --ppt-text:#262626;
  --ppt-grau:#7f7f7f;
  --ppt-schrift:"Carlito","Calibri","Segoe UI",Arial,sans-serif;
  --bauplan:#0e2a57;
  --bauplan-linie:rgba(150,200,255,.22);
  --bauplan-fein:rgba(150,200,255,.09);
}

/* Alte Folie: wie eine Präsentation im Vollbild, 16:9 mit schwarzen Rändern */
#oldslide{position:fixed;inset:0;z-index:4;background:#000;transition:background-color .25s ease}
#oldslide.offen{background:transparent}
.ppt{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%);container-type:inline-size}
.ppt-inhalt{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;background:#fff;color:var(--ppt-text);font-family:var(--ppt-schrift);overflow:hidden}
.ppt-kopf{padding:3.1cqw 5cqw 2.5cqw;background:linear-gradient(180deg,var(--ppt-blau-hell) 0%,var(--ppt-blau) 100%);color:#fff;border-bottom:.45cqw solid #a5b8d8}
.ppt-titel{margin:0;font-size:5.4cqw;line-height:1.04;font-weight:700;letter-spacing:-.01em;text-shadow:.12cqw .16cqw 0 rgba(0,0,0,.35)}
.ppt-unter{margin:.9cqw 0 0;font-size:2.2cqw;color:#dbe5f1}
.ppt-rumpf{display:grid;grid-template-columns:1.12fr 1fr;gap:3cqw;padding:2.6cqw 5cqw 1.2cqw;min-height:0}
.ppt-agenda h2{display:inline-block;margin:0 0 1.1cqw;padding-bottom:.25cqw;font-size:3cqw;font-weight:700;color:var(--ppt-blau);border-bottom:.22cqw solid var(--ppt-akzent)}
.ppt-agenda ul{margin:0;padding:0;list-style:none}
.ppt-agenda li{position:relative;padding-left:2.6cqw;font-size:2.55cqw;line-height:1.5}
.ppt-agenda li::before{content:"▪";position:absolute;left:.35cqw;top:0;color:var(--ppt-akzent)}
.ppt-seite{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;min-height:0}
.ppt-clip{display:block;width:100%;max-height:21cqw;object-fit:contain}
.ppt-platzhalter{width:100%;padding:1.3cqw 1.8cqw;border:.16cqw dashed #9a9a9a;color:#8c8c8c;font-size:1.8cqw;text-align:center}
.ppt-fuss{display:flex;justify-content:space-between;margin:0 3cqw;padding:.9cqw 2cqw 1.4cqw;border-top:.18cqw solid var(--ppt-akzent);font-size:1.4cqw;color:var(--ppt-grau)}

/* Risse und Scherben */
.ppt-risse{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.riss-dunkel{fill:none;stroke:rgba(18,22,30,.82);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.riss-hell{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.riss-punkt{fill:#fff;stroke:rgba(18,22,30,.75);stroke-width:1.6}
.ppt-scherben{position:absolute;inset:0;perspective:1400px;pointer-events:none}
.scherbe{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:visible}
.scherbe-risse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Selbstklicken: Sprengknopf auf der Bühne */
#sprengen{position:absolute;right:max(2.5vw,16px);top:50%;margin-top:calc(clamp(120px,12vw,190px) / -2);z-index:2;display:grid;place-items:center;width:clamp(120px,12vw,190px);aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ff8a7a 0%,#e5281b 46%,#9e130b 100%);box-shadow:0 0 0 clamp(8px,.9vw,14px) #1a1a1a,0 0 0 clamp(14px,1.5vw,24px) #ffc940,0 18px 50px rgba(0,0,0,.55);color:#fff;font:900 clamp(.95rem,1.2vw,1.25rem)/1.1 var(--font);text-align:center;letter-spacing:.02em;cursor:pointer;animation:knopf-puls 1.6s ease-in-out infinite}
#sprengen:hover{filter:brightness(1.08)}
#sprengen:active{transform:scale(.95)}
#sprengen:disabled{animation:none;filter:brightness(.85)}
@keyframes knopf-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion: reduce){#sprengen{animation:none}}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
#flash{position:fixed;inset:0;z-index:8;background:#fff;opacity:0;pointer-events:none}

/* Bauplan und Aufbau, in Weltkoordinaten (liegt in #world) */
#bau,#crew{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#bau{overflow:hidden}
.bau-grund{position:absolute;inset:0;background-color:var(--bauplan);
  background-image:linear-gradient(var(--bauplan-linie) 4px,transparent 4px),linear-gradient(90deg,var(--bauplan-linie) 4px,transparent 4px),
    linear-gradient(var(--bauplan-fein) 2px,transparent 2px),linear-gradient(90deg,var(--bauplan-fein) 2px,transparent 2px);
  background-size:480px 480px,480px 480px,96px 96px,96px 96px}
.bau-plan{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.bau-scan{position:absolute;left:-10px;top:0;width:20px;height:100%;background:linear-gradient(90deg,rgba(150,215,255,0),rgba(210,240,255,.95),rgba(150,215,255,0));box-shadow:0 0 90px 34px rgba(120,200,255,.42)}
.bau-stempel{position:absolute;right:140px;bottom:120px;display:grid;gap:14px;padding:44px 60px;border:10px solid rgba(190,225,255,.7);color:rgba(220,238,255,.92);font-family:var(--font);text-transform:uppercase;letter-spacing:.08em}
.bau-stempel b{font-size:78px;font-weight:900;line-height:1}
.bau-stempel span{font-size:52px;font-weight:600}
.bau-band{position:absolute;left:0;width:100%;background-repeat:no-repeat}
.bau-teil{position:absolute;border-radius:44px;outline:14px solid #fff;box-shadow:0 60px 120px rgba(0,0,0,.45);background-repeat:no-repeat}
.bau-seil{position:absolute;left:50%;bottom:calc(100% + 250px);width:12px;height:4000px;margin-left:-6px;background:linear-gradient(90deg,#9fb0c8,#e6edf6 50%,#9fb0c8)}
.bau-schlinge{position:absolute;left:0;bottom:100%;width:100%;height:260px;overflow:visible}
.schlinge-seil{fill:none;stroke:#e6edf6;stroke-width:9;vector-effect:non-scaling-stroke}
.schlinge-haken{fill:#ffc940;stroke:#1d2b53;stroke-width:6}
.bau-staub{position:absolute;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;background:radial-gradient(circle,rgba(236,241,248,.95) 0%,rgba(236,241,248,0) 70%)}

/* Maler: Rolle und Stiel gehören zur Figur und fahren mit */
.rolle{position:absolute;border-radius:46px;background:linear-gradient(90deg,#b9c6d8 0%,#ffffff 42%,#c6d1e0 100%);box-shadow:inset 0 0 0 8px #1d2b53,0 20px 40px rgba(0,0,0,.35)}
.stiel{position:absolute;height:14px;border-radius:7px;background:#9a6332;transform-origin:0 50%}

/* Arbeiter: flache Vektorfiguren, Posen per Klasse */
.figur{position:absolute;left:0;top:0;will-change:transform}
.figur .blick{position:relative;width:100%;height:100%}
.figur .blick.links{transform:scaleX(-1)}
.arbeiter{display:block;width:100%;height:100%;overflow:visible}
.arbeiter .bein,.arbeiter .arm,.arbeiter .koerper{transform-box:view-box}
.arbeiter.laeuft .bein.l{animation:schritt .42s ease-in-out infinite alternate}
.arbeiter.laeuft .bein.r{animation:schritt .42s ease-in-out infinite alternate-reverse}
.arbeiter.laeuft .arm.l{animation:schwung .42s ease-in-out infinite alternate-reverse}
.arbeiter.laeuft .arm.r{animation:schwung .42s ease-in-out infinite alternate}
.arbeiter.laeuft .koerper{animation:wippen .21s ease-in-out infinite alternate}
.arbeiter.rollt .arm.l,.arbeiter.rollt .arm.r{animation:none;transform:rotate(-78deg)}
.arbeiter.haemmert .arm.r{animation:hammer .3s cubic-bezier(.5,0,.3,1) infinite}
.arbeiter.haemmert .koerper{animation:nicken .3s ease-in-out infinite}
.arbeiter.jubelt .arm.l{transform:rotate(-168deg)}
.arbeiter.jubelt .arm.r{transform:rotate(-160deg)}
.arbeiter.jubelt .koerper{animation:huepfen .36s cubic-bezier(.3,0,.4,1) infinite alternate}
.arbeiter.winkt .arm.r{animation:winken .5s ease-in-out var(--phase,0s) infinite alternate}
.arbeiter.winkt .koerper{animation:wiegen 1s ease-in-out var(--phase,0s) infinite alternate}
.arbeiter.daumen .arm.r{transform:rotate(-125deg)}
@keyframes schritt{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
@keyframes schwung{from{transform:rotate(30deg)}to{transform:rotate(-30deg)}}
@keyframes wippen{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes hammer{0%{transform:rotate(-150deg)}55%{transform:rotate(-18deg)}100%{transform:rotate(-150deg)}}
@keyframes nicken{0%,100%{transform:translateY(0)}55%{transform:translateY(4px)}}
@keyframes huepfen{from{transform:translateY(0)}to{transform:translateY(-34px)}}
@keyframes winken{from{transform:rotate(-162deg)}to{transform:rotate(-118deg)}}
@keyframes wiegen{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}

/* Schilder kommen am Seil herunter, wenn Arbeiter sie aufhängen */
#labels .label.on.abseilen{animation:abseilen .85s cubic-bezier(.3,1.45,.5,1) var(--d,0s) both}
@keyframes abseilen{from{transform:translate(-50%,calc(-100% - 700px));opacity:0}25%{opacity:1}to{transform:translate(-50%,-100%);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .arbeiter *{animation:none!important}
  #labels .label.on.abseilen{animation:none}
}