/* EIPME IT-Spot "Läuft einfach." — 1200×1200, ~14.4s, comic style.
   Gleiche Figur/Werkstatt wie KI- und Cyber-Spot.
   Reads Stage/Sprite/useTime/useSprite/Easing/interpolate/clamp from window (animations.jsx). */

const { Stage, Sprite, useTime, useSprite, Easing, interpolate, clamp } = window;
const R = React;

/* ---------- palette (EIPME tokens, literal values) ---------- */
const C = {
  blue: "#1F5EFF", blue600: "#0A47E0", blue300: "#8AA8FF", blue100: "#D9E4FF", blue50: "#EEF3FF",
  orange: "#FF7A1A", orange300: "#FFA15C", orange100: "#FFDEC2",
  red: "#FF3B47", red600: "#E51F2D", red100: "#FFD6DA",
  green: "#0E6B27", greenTint: "rgba(14,107,39,0.14)",
  ink: "#0C0E13", ink700: "#1C202A", ink500: "#3D434F", ink300: "#858B98", ink100: "#D6D9DF",
  paper: "#FAFBFC", white: "#FFFFFF", sky: "#EEF3FF",
  skin: "#FFD9B8", skinShade: "#F2BE93", cheek: "#FFB08A",
};
const INK = C.ink;
const GEIST = "'Geist', system-ui, sans-serif";
const MONO = "'Geist Mono', ui-monospace, monospace";

/* ============================================================
   KOPF — shared comic head (identisch zu spot-ki.jsx).
   ============================================================ */
function Kopf({ expression = "grin", blink = 0, talkPhase = 0 }) {
  const shocked = expression === "shock";
  let eyes;
  if (expression === "tired") {
    eyes = (
      <g>
        <path d="M 139 116 q 10 8 22 6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 197 122 q 12 2 22 -6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <circle cx="151" cy="127" r="5.5" fill={INK} />
        <circle cx="207" cy="127" r="5.5" fill={INK} />
        <path d="M 142 140 q 9 5 18 1" stroke={C.skinShade} strokeWidth="5" fill="none" strokeLinecap="round" />
        <path d="M 198 141 q 9 4 18 0" stroke={C.skinShade} strokeWidth="5" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (expression === "relaxed") {
    eyes = (
      <g>
        <path d="M 140 120 q 10 -10 20 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 198 120 q 10 -10 20 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (expression === "wink") {
    eyes = (
      <g>
        <circle cx="150" cy="118" r="9" fill={INK} />
        <path d="M 196 118 q 12 10 24 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (shocked) {
    eyes = (
      <g>
        <circle cx="148" cy="130" r="20" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="151" cy="133" r="7" fill={INK} />
        <circle cx="210" cy="130" r="20" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="207" cy="133" r="7" fill={INK} />
      </g>
    );
  } else {
    const closed = blink > 0.5;
    eyes = closed ? (
      <g>
        <path d="M 141 120 q 9 6 18 0" stroke={INK} strokeWidth="6" fill="none" strokeLinecap="round" />
        <path d="M 199 120 q 9 6 18 0" stroke={INK} strokeWidth="6" fill="none" strokeLinecap="round" />
      </g>
    ) : (
      <g>
        <circle cx="150" cy="118" r="9" fill={INK} />
        <circle cx="208" cy="118" r="9" fill={INK} />
      </g>
    );
  }

  let mouth;
  if (expression === "tired") {
    mouth = <path d="M 156 166 q 23 -12 46 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />;
  } else if (expression === "talk") {
    const open = 5 + 11 * Math.abs(Math.sin(talkPhase));
    mouth = <ellipse cx="179" cy="162" rx="13" ry={open} fill={INK} />;
  } else if (expression === "smile" || expression === "relaxed") {
    mouth = <path d="M 150 152 q 29 26 58 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />;
  } else if (shocked) {
    mouth = <ellipse cx="179" cy="172" rx="17" ry="21" fill={INK} />;
  } else {
    mouth = <path d="M 146 148 q 33 34 66 0 z" fill={C.white} stroke={INK} strokeWidth="6" strokeLinejoin="round" />;
  }

  const brows =
    expression === "tired" ? (
      <g>
        <path d="M 138 102 q 15 -3 28 2" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 196 104 q 13 -5 28 -2" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    ) : shocked ? (
      <g>
        <path d="M 132 100 q 16 -14 34 -6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 192 94 q 18 -8 34 6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    ) : (
      <g>
        <path d="M 136 98 q 15 -8 30 -3" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 194 95 q 15 -5 30 3" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );

  return (
    <g transform="translate(-179 -282)">
      <rect x="160" y="248" width="38" height="38" rx="12" fill={C.skin} stroke={INK} strokeWidth="6" />
      <path d="M 106 130 q 0 -74 73 -74 q 73 0 73 74 l 0 60 q 0 62 -73 62 q -73 0 -73 -62 z" fill={C.skin} stroke={INK} strokeWidth="7" />
      <circle cx="103" cy="160" r="15" fill={C.skin} stroke={INK} strokeWidth="6" />
      <circle cx="255" cy="160" r="15" fill={C.skin} stroke={INK} strokeWidth="6" />
      {!shocked && <circle cx="128" cy="146" r="9" fill={C.cheek} opacity="0.55" />}
      {!shocked && <circle cx="230" cy="146" r="9" fill={C.cheek} opacity="0.55" />}
      {brows}
      {eyes}
      <ellipse cx="179" cy={shocked ? 148 : 136} rx="15" ry="12" fill={C.skinShade} stroke={INK} strokeWidth="6" />
      {mouth}
      <g>
        <path d="M 104 106 q 0 -62 75 -62 q 75 0 75 62 l 0 6 q -75 -18 -150 0 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <path d="M 96 108 q 83 -22 166 0 q 6 2 4 10 q -2 7 -10 6 q -77 -20 -154 0 q -8 1 -10 -6 q -2 -8 4 -10 z" fill={C.orange} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
        <circle cx="179" cy="76" r="15" fill={C.white} stroke={INK} strokeWidth="5" />
        <text x="179" y="83" textAnchor="middle" fontFamily={GEIST} fontWeight="800" fontStyle="italic" fontSize="20" fill={C.blue}>E</text>
      </g>
    </g>
  );
}

/* ---------- Sprechblase ---------- */
function SpeechBubble({ x, y, w, pop, text, tailX = 64, fontSize = 54, align = "left" }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  return (
    <div style={{ position: "absolute", left: x, top: y, width: w, transform: `scale(${s})`, transformOrigin: `${tailX + 30}px 100%`, opacity: clamp(pop * 2, 0, 1) }}>
      <div style={{ position: "relative", background: C.white, border: `7px solid ${INK}`, borderRadius: 36, padding: "28px 38px", boxShadow: "0 12px 0 rgba(12,14,19,0.12)" }}>
        <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize, lineHeight: 1.08, letterSpacing: "-0.02em", color: INK, textWrap: "balance", textAlign: align }}>{text}</div>
        <svg viewBox="0 0 60 52" style={{ position: "absolute", left: tailX, bottom: -46, width: 60, height: 52 }}>
          <path d="M 6 2 q 10 30 42 46 q -30 2 -46 -14 z" fill={C.white} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
          <rect x="2" y="-4" width="56" height="10" fill={C.white} />
        </svg>
      </div>
    </div>
  );
}

function Sparkle({ x, y, p, size = 26, color = C.orange }) {
  const lp = clamp(p, 0, 1);
  if (lp <= 0) return null;
  const s = Easing.easeOutBack(Math.min(1, lp * 1.6));
  const o = 1 - Math.max(0, lp - 0.6) / 0.4;
  return (
    <g transform={`translate(${x} ${y}) rotate(${lp * 80}) scale(${s * size / 24})`} opacity={o}>
      <path d="M 0 -12 L 3 -3 L 12 0 L 3 3 L 0 12 L -3 3 L -12 0 L -3 -3 Z" fill={color} stroke={INK} strokeWidth="2.5" strokeLinejoin="round" />
    </g>
  );
}

/* ---------- Cartoon-Stern (Benommenheit) ---------- */
function DizzyStar({ r = 12, color = C.orange }) {
  return <path d={`M 0 ${-r} L ${r * 0.28} ${-r * 0.28} L ${r} 0 L ${r * 0.28} ${r * 0.28} L 0 ${r} L ${-r * 0.28} ${r * 0.28} L ${-r} 0 L ${-r * 0.28} ${-r * 0.28} Z`} fill={color} stroke={INK} strokeWidth="3" strokeLinejoin="round" />;
}

/* ============================================================
   RAUM — Werkstatt-Kulisse für Szene 1 (Drucker statt Tisch).
   ============================================================ */
function Wanduhr({ clockH, clockM, x = 470, y = 204 }) {
  return (
    <g>
      <circle cx={x} cy={y} r="62" fill={C.white} stroke={INK} strokeWidth="9" />
      <g stroke={INK} strokeWidth="6" strokeLinecap="round">
        <line x1={x} y1={y - 52} x2={x} y2={y - 40} /><line x1={x} y1={y + 40} x2={x} y2={y + 52} />
        <line x1={x - 52} y1={y} x2={x - 40} y2={y} /><line x1={x + 40} y1={y} x2={x + 52} y2={y} />
      </g>
      <g transform={`rotate(${clockH} ${x} ${y})`}>
        <line x1={x} y1={y} x2={x} y2={y - 32} stroke={INK} strokeWidth="9" strokeLinecap="round" />
      </g>
      <g transform={`rotate(${clockM} ${x} ${y})`}>
        <line x1={x} y1={y} x2={x} y2={y - 44} stroke={C.blue600} strokeWidth="7" strokeLinecap="round" />
      </g>
      <circle cx={x} cy={y} r="7" fill={C.orange} stroke={INK} strokeWidth="4" />
    </g>
  );
}

function Pegboard() {
  return (
    <g>
      <rect x="100" y="300" width="240" height="180" rx="14" fill={C.white} stroke={INK} strokeWidth="7" />
      <g fill={C.ink100}>
        <circle cx="130" cy="328" r="4" /><circle cx="170" cy="328" r="4" /><circle cx="210" cy="328" r="4" /><circle cx="250" cy="328" r="4" /><circle cx="290" cy="328" r="4" />
        <circle cx="130" cy="452" r="4" /><circle cx="310" cy="390" r="4" />
      </g>
      <g transform="rotate(-10 165 390)">
        <rect x="158" y="360" width="14" height="86" rx="6" fill={C.orange300} stroke={INK} strokeWidth="5" />
        <rect x="136" y="344" width="58" height="26" rx="8" fill={C.ink700} stroke={INK} strokeWidth="5" />
      </g>
      <g transform="rotate(14 265 390)">
        <rect x="259" y="356" width="12" height="80" rx="6" fill={C.ink300} stroke={INK} strokeWidth="5" />
        <circle cx="265" cy="352" r="16" fill="none" stroke={C.ink300} strokeWidth="10" />
        <circle cx="265" cy="352" r="16" fill="none" stroke={INK} strokeWidth="4" />
      </g>
    </g>
  );
}

function NachtFenster() {
  return (
    <g>
      <rect x="800" y="210" width="290" height="250" rx="10" fill={C.ink700} stroke={INK} strokeWidth="9" />
      <path d="M 908 262 a 30 30 0 1 0 26 46 a 24 24 0 1 1 -26 -46 z" fill={C.white} opacity="0.92" />
      <circle cx="856" cy="330" r="4" fill={C.white} opacity="0.8" />
      <circle cx="1010" cy="292" r="4" fill={C.white} opacity="0.8" />
      <circle cx="960" cy="392" r="3.5" fill={C.white} opacity="0.7" />
      <line x1="800" y1="335" x2="1090" y2="335" stroke={INK} strokeWidth="7" />
      <line x1="945" y1="210" x2="945" y2="460" stroke={INK} strokeWidth="7" />
    </g>
  );
}

/* ---------- Drucker ---------- */
function Drucker({ t, offline = true, shake = 0, printedP = 0 }) {
  const blink = Math.sin(t * 6) > 0 ? 1 : 0.25;
  const rot = shake * Math.sin(t * 42) * 0.9;
  return (
    <g transform={`rotate(${rot} 850 730)`}>
      {/* eingeklemmtes Blatt oben */}
      <g transform="translate(850 626) rotate(-4)">
        <rect x="-70" y="-58" width="140" height="64" rx="6" fill={C.white} stroke={INK} strokeWidth="6" />
        <path d="M -48 -38 l 24 14 l -18 10" fill="none" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
        <line x1="6" y1="-34" x2="46" y2="-30" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
      </g>
      {/* Korpus */}
      <rect x="680" y="620" width="340" height="180" rx="22" fill={C.ink100} stroke={INK} strokeWidth="8" />
      <rect x="680" y="620" width="340" height="26" rx="13" fill={C.ink300} stroke={INK} strokeWidth="8" />
      <rect x="712" y="600" width="276" height="34" rx="10" fill={C.ink700} stroke={INK} strokeWidth="7" />
      {/* Display */}
      <rect x="712" y="646" width="150" height="58" rx="10" fill={C.ink700} stroke={INK} strokeWidth="6" />
      <text x="787" y="684" textAnchor="middle" fontFamily={MONO} fontWeight="500" fontSize="26" letterSpacing="0.14em" fill={offline ? C.red : "#7BE495"} opacity={offline ? blink : 1}>{offline ? "OFFLINE" : "BEREIT"}</text>
      {/* Knöpfe */}
      <circle cx="906" cy="721" r="15" fill={C.blue} stroke={INK} strokeWidth="5" />
      <circle cx="952" cy="721" r="15" fill={C.orange} stroke={INK} strokeWidth="5" />
      {/* Status-LED */}
      <circle cx="996" cy="648" r="10" fill={offline ? C.red : "#39B54A"} stroke={INK} strokeWidth="4" opacity={offline ? blink : 1} />
      {/* Ausgabefach */}
      <rect x="700" y="800" width="300" height="18" rx="8" fill={C.ink300} stroke={INK} strokeWidth="6" />
      {printedP > 0 && (
        <g transform={`translate(850 ${812 - 60 * printedP})`}>
          <rect x="-64" y="-52" width="128" height="58" rx="6" fill={C.white} stroke={INK} strokeWidth="6" />
          <line x1="-40" y1="-30" x2="40" y2="-30" stroke={C.blue} strokeWidth="5" strokeLinecap="round" />
          <line x1="-40" y1="-12" x2="18" y2="-12" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
        </g>
      )}
    </g>
  );
}

/* ---------- Stehende Figur, hämmert auf Drucker-Knöpfe ---------- */
function DruckerHandwerker({ expression, blink, jab, t }) {
  const bob = Math.sin(t * 2) * 3;
  const jabX = 14 * jab;
  return (
    <svg viewBox="0 0 360 520" style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>
      <g>
        <rect x="126" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <rect x="192" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <path d="M 116 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
        <path d="M 184 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
      </g>
      <g>
        <path d="M 96 290 q 83 -26 166 0 l 6 160 q -89 18 -178 0 z" fill={C.orange300} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <path d="M 106 336 q 73 -20 146 0 l 4 114 q -77 16 -154 0 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <rect x="138" y="300" width="82" height="72" rx="12" fill={C.blue} stroke={INK} strokeWidth="7" />
        <path d="M 118 292 l 30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <path d="M 240 292 l -30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <circle cx="150" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <circle cx="208" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <rect x="158" y="328" width="42" height="30" rx="8" fill={C.blue600} stroke={INK} strokeWidth="5" />
        <rect x="170" y="318" width="8" height="22" rx="3" fill={C.orange} stroke={INK} strokeWidth="4" />
      </g>
      {/* linke Hand in die Hüfte, rechter Arm hämmert */}
      <g>
        <path d="M 100 322 q -44 20 -28 62 q 8 20 34 22" stroke={C.blue600} strokeWidth="28" fill="none" strokeLinecap="round" />
        <g transform={`translate(${jabX} ${2 - 4 * jab})`}>
          <path d="M 258 330 Q 350 296 440 298" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
          <circle cx="452" cy="298" r="20" fill={C.skin} stroke={INK} strokeWidth="6" />
        </g>
      </g>
      <g transform={`translate(179 ${282 + bob})`}>
        <Kopf expression={expression} blink={blink} />
      </g>
    </svg>
  );
}

/* ============================================================
   SZENE 1 — Drucker offline, 18:30, "?"-Blase.  0 … 3.4
   ============================================================ */
function SceneDrucker() {
  const { localTime: lt } = useSprite();
  const sc = interpolate([0, 1.3, 3.35], [1.03, 1.1, 1.13], Easing.easeInOutCubic)(lt);
  const cy = interpolate([0, 1.3, 3.35], [4, 10, 12], Easing.easeInOutCubic)(lt);

  const jabRaw = Math.max(0, Math.sin(lt * 8.5));
  const jab = lt > 0.25 ? Easing.easeOutCubic(jabRaw) : 0;
  const expression = lt < 0.9 ? "shock" : lt < 2.4 ? "shock" : "tired";
  const blink = lt > 2.7 && lt < 2.88 ? 1 : 0;
  const bubblePop = clamp((lt - 0.7) / 0.45, 0, 1) * (lt < 3.0 ? 1 : clamp((3.3 - lt) / 0.3, 0, 1));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc}) translate(0px, ${-cy}px)`, transformOrigin: "620px 640px" }}>
        <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <rect width="1200" height="1200" fill="#DCE4F6" />
          <rect x="0" y="950" width="1200" height="250" fill="#C6CBD8" />
          <line x1="0" y1="950" x2="1200" y2="950" stroke={INK} strokeWidth="8" />
          <NachtFenster />
          <Pegboard />
          {/* 18:30 */}
          <Wanduhr clockH={195} clockM={180} x={290} y={210} />
          {/* Sideboard + Drucker */}
          <rect x="660" y="818" width="380" height="132" rx="14" fill={C.orange300} stroke={INK} strokeWidth="8" />
          <rect x="660" y="818" width="380" height="132" fill="rgba(12,14,19,0.10)" />
          <rect x="700" y="848" width="130" height="72" rx="10" fill={C.orange300} stroke={INK} strokeWidth="6" />
          <rect x="870" y="848" width="130" height="72" rx="10" fill={C.orange300} stroke={INK} strokeWidth="6" />
          <circle cx="765" cy="884" r="8" fill={INK} /><circle cx="935" cy="884" r="8" fill={INK} />
          <Drucker t={lt} offline shake={jab > 0.7 ? 1 : 0.2} />
          {/* Ärger-Strahlen am Drucker */}
          <g stroke={C.red} strokeWidth="7" strokeLinecap="round" opacity={0.5 + 0.5 * (Math.sin(lt * 6) > 0 ? 1 : 0)}>
            <line x1="1040" y1="600" x2="1066" y2="574" /><line x1="1052" y1="648" x2="1072" y2="646" /><line x1="662" y1="596" x2="636" y2="572" />
          </g>
        </svg>
        {/* Figur vor dem Drucker */}
        <div style={{ position: "absolute", left: 450, top: 446, width: 350, height: 505 }}>
          <DruckerHandwerker expression={expression} blink={blink} jab={jab} t={lt} />
        </div>
        {/* ?-Blase */}
        <SpeechBubble x={509} y={200} w={140} pop={bubblePop} tailX={70} fontSize={120} align="center" text={"?"} />
      </div>
      <div style={{ position: "absolute", inset: 0, background: C.paper, opacity: Math.max(0, 1 - lt / 0.3), pointerEvents: "none" }} />
    </div>
  );
}

/* ============================================================
   SZENE 2 — Chaos-Dreierschnitt: WLAN / Update / Passwort-Zettel.
   3.4 … 7.0 (je 1.2s)
   ============================================================ */
function PanelWlan({ p, t }) {
  const flick1 = Math.sin(t * 9) > -0.2;
  const flick2 = Math.sin(t * 7 + 1.7) > 0.55;
  return (
    <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
      {/* Lager-Regale */}
      <g>
        <rect x="120" y="256" width="960" height="22" rx="8" fill={C.ink300} stroke={INK} strokeWidth="6" />
        <rect x="120" y="620" width="960" height="22" rx="8" fill={C.ink300} stroke={INK} strokeWidth="6" />
        <rect x="150" y="278" width="16" height="574" fill={C.ink300} stroke={INK} strokeWidth="5" />
        <rect x="1034" y="278" width="16" height="574" fill={C.ink300} stroke={INK} strokeWidth="5" />
        <g fill={C.orange100} stroke={INK} strokeWidth="6">
          <rect x="200" y="178" width="130" height="78" rx="8" /><rect x="360" y="196" width="100" height="60" rx="8" />
          <rect x="760" y="540" width="150" height="80" rx="8" /><rect x="940" y="556" width="80" height="64" rx="8" />
          <rect x="200" y="546" width="110" height="74" rx="8" />
        </g>
        <g stroke={INK} strokeWidth="4" opacity="0.5">
          <line x1="222" y1="212" x2="308" y2="212" /><line x1="782" y1="576" x2="888" y2="576" />
        </g>
      </g>
      {/* Router auf dem Regal */}
      <g>
        <rect x="480" y="560" width="240" height="62" rx="14" fill={C.ink700} stroke={INK} strokeWidth="7" />
        <circle cx="524" cy="591" r="8" fill={C.red} opacity={flick1 ? 1 : 0.25} />
        <circle cx="556" cy="591" r="8" fill={C.ink300} />
        <line x1="510" y1="560" x2="496" y2="500" stroke={INK} strokeWidth="8" strokeLinecap="round" />
        <line x1="690" y1="560" x2="704" y2="500" stroke={INK} strokeWidth="8" strokeLinecap="round" />
      </g>
      {/* WLAN-Bögen: 1 Balken fest, 2 flackern */}
      <g fill="none" strokeLinecap="round">
        <circle cx="600" cy="470" r="12" fill={C.blue} stroke={INK} strokeWidth="5" />
        <path d="M 552 430 a 68 68 0 0 1 96 0" stroke={C.blue} strokeWidth="16" />
        <path d="M 510 388 a 128 128 0 0 1 180 0" stroke={flick1 ? C.ink100 : C.red} strokeWidth="16" opacity={flick1 ? 0.9 : 0.7} />
        <path d="M 468 346 a 188 188 0 0 1 264 0" stroke={flick2 ? C.ink100 : C.red} strokeWidth="16" opacity={flick2 ? 0.9 : 0.6} />
      </g>
      {/* kleines Ausrufe-Dreieck */}
      <g transform={`translate(782 398) scale(${Easing.easeOutBack(clamp((p - 0.3) / 0.2, 0, 1))})`}>
        <path d="M 0 -34 L 32 24 L -32 24 Z" fill={C.red} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
        <line x1="0" y1="-12" x2="0" y2="8" stroke={C.white} strokeWidth="7" strokeLinecap="round" />
        <circle cx="0" cy="17" r="3.6" fill={C.white} />
      </g>
    </svg>
  );
}

function PanelUpdate({ p, t }) {
  const popS = Easing.easeOutBack(clamp((p - 0.18) / 0.2, 0, 1));
  const prog = 0.07 + 0.05 * Easing.easeInOutCubic(clamp((p - 0.3) / 0.7, 0, 1));
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {/* Monitor */}
      <div style={{ position: "absolute", left: 600 - 330, top: 280, width: 660, height: 440, background: C.ink700, border: `9px solid ${INK}`, borderRadius: 24, padding: 14, boxSizing: "border-box" }}>
        <div style={{ width: "100%", height: "100%", background: C.blue50, borderRadius: 10, position: "relative", overflow: "hidden" }}>
          {/* Desktop-Reste */}
          <div style={{ position: "absolute", left: 24, top: 24, width: 54, height: 54, background: C.blue100, border: `4px solid ${INK}`, borderRadius: 10 }} />
          <div style={{ position: "absolute", left: 24, top: 96, width: 54, height: 54, background: C.orange100, border: `4px solid ${INK}`, borderRadius: 10 }} />
          {/* Update-Fenster */}
          <div style={{ position: "absolute", left: "50%", top: "50%", width: 430, transform: `translate(-50%,-50%) scale(${popS})`, background: C.white, border: `7px solid ${INK}`, borderRadius: 18, overflow: "hidden", boxShadow: "0 14px 0 rgba(12,14,19,0.14)" }}>
            <div style={{ background: C.blue, padding: "12px 18px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 20, letterSpacing: "0.14em", textTransform: "uppercase", color: C.white }}>Update 1 von 3</div>
              <div style={{ width: 22, height: 22, borderRadius: 6, background: C.white, opacity: 0.55 }} />
            </div>
            <div style={{ padding: "22px 22px 26px", display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <svg viewBox="0 0 24 24" style={{ width: 34, height: 34, transform: `rotate(${t * 220}deg)` }}>
                  <path d="M 12 3 a 9 9 0 1 1 -9 9" fill="none" stroke={C.blue} strokeWidth="3.6" strokeLinecap="round" />
                </svg>
                <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 27, color: INK }}>Bitte warten…</div>
              </div>
              <div style={{ height: 26, border: `5px solid ${INK}`, borderRadius: 999, overflow: "hidden", background: C.blue50 }}>
                <div style={{ height: "100%", width: `${prog * 100}%`, background: `linear-gradient(90deg,${C.blue},${C.blue600})` }} />
              </div>
              <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 17, letterSpacing: "0.14em", textTransform: "uppercase", color: C.ink500 }}>{Math.round(prog * 100)} % · Nicht ausschalten</div>
            </div>
          </div>
        </div>
      </div>
      <div style={{ position: "absolute", left: 600 - 60, top: 720, width: 120, height: 34, background: C.ink700, border: `7px solid ${INK}`, borderTop: "none", borderRadius: "0 0 14px 14px" }} />
      <div style={{ position: "absolute", left: 600 - 130, top: 754, width: 260, height: 22, background: C.ink300, border: `6px solid ${INK}`, borderRadius: 10 }} />
    </div>
  );
}

function PanelZettel({ p, t }) {
  const fly = Easing.easeInOutCubic(clamp((p - 0.22) / 0.6, 0, 1));
  const zx = 430 + 560 * fly;
  const zy = 480 - 240 * Math.sin(fly * Math.PI) + 60 * fly;
  const zr = -6 + 40 * fly + 9 * Math.sin(t * 10);
  const grabP = Easing.easeOutBack(clamp((p - 0.42) / 0.25, 0, 1));
  return (
    <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
      {/* Korkwand */}
      <rect x="230" y="270" width="740" height="470" rx="20" fill={C.orange100} stroke={INK} strokeWidth="8" />
      <g fill="rgba(12,14,19,0.12)">
        <circle cx="320" cy="350" r="5" /><circle cx="520" cy="320" r="5" /><circle cx="820" cy="360" r="5" />
        <circle cx="380" cy="600" r="5" /><circle cx="700" cy="640" r="5" /><circle cx="900" cy="560" r="5" />
      </g>
      {/* andere Zettel bleiben hängen */}
      <g>
        <rect x="300" y="390" width="120" height="110" rx="6" fill={C.white} stroke={INK} strokeWidth="5" transform="rotate(-5 360 445)" />
        <circle cx="360" cy="398" r="9" fill={C.red} stroke={INK} strokeWidth="4" />
        <rect x="770" y="430" width="130" height="100" rx="6" fill={C.blue100} stroke={INK} strokeWidth="5" transform="rotate(6 835 480)" />
        <circle cx="835" cy="440" r="9" fill={C.blue} stroke={INK} strokeWidth="4" />
      </g>
      {/* leere Nadel, wo der Passwort-Zettel war */}
      <circle cx="560" cy="420" r="10" fill={C.orange} stroke={INK} strokeWidth="5" />
      <g stroke={C.ink300} strokeWidth="5" strokeLinecap="round" strokeDasharray="2 14" opacity="0.9">
        <rect x="500" y="430" width="150" height="130" rx="8" fill="none" />
      </g>
      {/* davonflatternder Zettel */}
      <g transform={`translate(${zx} ${zy}) rotate(${zr})`}>
        <path d={`M -70 -60 q 70 ${-16 + 10 * Math.sin(t * 12)} 140 0 l -6 122 q -64 ${14 - 10 * Math.sin(t * 12)} -128 0 z`} fill="#FFF3B8" stroke={INK} strokeWidth="6" strokeLinejoin="round" />
        <text x="0" y="-14" textAnchor="middle" fontFamily={MONO} fontWeight="500" fontSize="30" letterSpacing="0.1em" fill={INK}>PA$$W0RT</text>
        <g stroke={C.ink300} strokeWidth="5" strokeLinecap="round">
          <line x1="-42" y1="12" x2="42" y2="12" /><line x1="-42" y1="36" x2="20" y2="36" />
        </g>
      </g>
      {/* Windlinien */}
      <g stroke={C.ink300} strokeWidth="6" strokeLinecap="round" fill="none" opacity={0.35 + 0.35 * Math.sin(t * 8)}>
        <path d={`M ${zx - 190} ${zy - 30} q 40 -18 84 -6`} />
        <path d={`M ${zx - 230} ${zy + 30} q 50 -14 96 -4`} />
      </g>
      {/* greifende Hand von links unten — verfehlt */}
      <g transform={`translate(${-40 + 130 * grabP} ${40 - 120 * grabP}) rotate(${-18 * grabP})`}>
        <path d="M 330 1090 q 130 -80 250 -150" stroke={C.blue600} strokeWidth="34" fill="none" strokeLinecap="round" />
        <circle cx="586" cy="936" r="26" fill={C.skin} stroke={INK} strokeWidth="7" />
        <path d="M 576 916 q 22 -12 34 6" fill="none" stroke={INK} strokeWidth="6" strokeLinecap="round" />
      </g>
    </svg>
  );
}

/* ---------- benommener Kopf mit kreisenden Sternen ---------- */
function DizzyBadge({ t, pop }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  return (
    <div style={{ position: "absolute", left: 64, bottom: 96, width: 210, height: 210, transform: `scale(${s})`, transformOrigin: "50% 100%" }}>
      <div style={{ position: "absolute", inset: 0, borderRadius: "50%", background: C.white, border: `7px solid ${INK}`, boxShadow: "0 10px 0 rgba(12,14,19,0.12)" }} />
      <svg viewBox="0 0 360 360" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible" }}>
        <g transform="translate(180 292) scale(0.78)">
          <Kopf expression="shock" />
        </g>
        {/* kreisende Sterne */}
        <g transform={`translate(180 44)`}>
          {[0, 1, 2].map((i) => {
            const a = t * 3.2 + (i * Math.PI * 2) / 3;
            return (
              <g key={i} transform={`translate(${Math.cos(a) * 74} ${Math.sin(a) * 20 - 8}) scale(${0.8 + 0.25 * Math.sin(a)})`} opacity={0.75 + 0.25 * Math.sin(a)}>
                <DizzyStar r={15} color={i === 1 ? C.blue300 : C.orange} />
              </g>
            );
          })}
        </g>
      </svg>
    </div>
  );
}

function SceneChaos({ showCaptions }) {
  const { localTime: lt } = useSprite();
  const SEG = 4 / 3;
  const seg = Math.min(2, Math.floor(lt / SEG));
  const segT = lt - seg * SEG;
  const p = clamp(segT / SEG, 0, 1);
  const enter = Easing.easeOutCubic(clamp(segT / 0.3, 0, 1));
  const inP = clamp(lt / 0.35, 0, 1);
  const bgs = ["#E7EDFB", C.blue50, "#F6EEE2"];
  const captions = ["WLAN · ein Balken", "Update · ausgerechnet jetzt", "Passwort · unauffindbar"];
  const capPop = Easing.easeOutBack(clamp((segT - 0.12) / 0.3, 0, 1));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: bgs[seg], opacity: inP }}>
      <div style={{ position: "absolute", inset: 0, transform: `translateX(${(1 - enter) * 90}px)`, opacity: enter }}>
        {seg === 0 && <PanelWlan p={p} t={lt} />}
        {seg === 1 && <PanelUpdate p={p} t={lt} />}
        {seg === 2 && <PanelZettel p={p} t={lt} />}
        <div style={{ position: "absolute", left: 64, top: 96, whiteSpace: "nowrap", fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.18em", color: C.ink500 }}>{seg + 1} / 3</div>
        {showCaptions && (
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 116, display: "flex", justifyContent: "center", transform: `scale(${capPop})`, transformOrigin: "50% 100%" }}>
            <div style={{ background: C.white, border: `6px solid ${INK}`, borderRadius: 999, padding: "16px 34px", fontFamily: MONO, fontWeight: 500, fontSize: 25, letterSpacing: "0.14em", textTransform: "uppercase", color: INK, boxShadow: "0 10px 0 rgba(12,14,19,0.12)" }}>{captions[seg]}</div>
          </div>
        )}
      </div>
      {/* benommener Handwerker mit Cartoon-Sternen */}
      <DizzyBadge t={lt} pop={clamp((lt - 0.25) / 0.35, 0, 1)} />
    </div>
  );
}

/* ============================================================
   SZENE 3 — Telefon + Anruf-Inset (Neffe), Stapel wächst, Uhr springt.
   7.0 … 9.85
   ============================================================ */
function Stapel({ x, w, h, p, t, seed }) {
  const n = Math.max(2, Math.round(h / 12));
  const sheets = [];
  for (let i = 0; i < n; i++) {
    sheets.push(
      <rect key={i} x={x - w / 2} y={770 - 11 * (i + 1)} width={w} height="10" rx="3"
        fill={C.white} stroke={INK} strokeWidth="4"
        transform={`rotate(${((i * 37 + seed * 13) % 5) - 2} ${x} ${770 - 11 * i})`} />
    );
  }
  const wob = Math.sin(t * 2 + seed) * 0.9 * Math.min(p, 1.2);
  return (
    <g transform={`rotate(${wob} ${x} 770) scale(1 ${Math.max(0.06, p)})`} style={{ transformOrigin: `${x}px 770px`, transformBox: "view-box" }}>
      {sheets}
    </g>
  );
}

function SceneTelefon() {
  const { localTime: lt } = useSprite();
  const sc = interpolate([0, 2.85], [1.05, 1.12], Easing.easeInOutCubic)(lt);
  const phoneUpP = clamp(lt / 0.4, 0, 1);
  const talking = (lt > 0.5 && lt < 1.3) || (lt > 1.8 && lt < 2.3);
  const expression = talking ? "talk" : lt < 1.6 ? "shock" : "tired";
  const blink = lt > 1.62 && lt < 1.78 ? 1 : 0;
  const bob = Math.sin(lt * 1.9) * 3;
  const cardP = clamp((lt - 0.25) / 0.35, 0, 1);
  // Stapel wächst in Schüben, Uhr springt weiter
  const growP = Easing.easeInOutCubic(clamp((lt - 0.7) / 1.4, 0, 1));
  const stackP = 1 + 0.35 * growP;
  const jumps = Math.min(3, Math.floor(Math.max(0, lt - 0.5) / 0.7));
  const clockM = 180 + jumps * 96;
  const clockH = 195 + jumps * 8;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc}) translate(6px, 4px)`, transformOrigin: "600px 600px" }}>
        <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <rect width="1200" height="1200" fill="#DCE4F6" />
          <rect x="0" y="950" width="1200" height="250" fill="#C6CBD8" />
          <line x1="0" y1="950" x2="1200" y2="950" stroke={INK} strokeWidth="8" />
          <NachtFenster />
          <Wanduhr clockH={clockH} clockM={clockM} x={655} y={204} />
          {/* Stuhllehne */}
          <rect x="478" y="560" width="244" height="230" rx="22" fill={C.ink700} stroke={INK} strokeWidth="8" />
          {/* Figur (Torso + Kopf) */}
          <g transform="translate(600 770)">
            <path d="M -106 40 q -6 -250 106 -250 q 112 0 106 250 z" fill={C.orange300} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
            <path d="M -50 -172 l -40 -34" stroke={C.blue} strokeWidth="15" strokeLinecap="round" />
            <path d="M 50 -172 l 40 -34" stroke={C.blue} strokeWidth="15" strokeLinecap="round" />
            <rect x="-52" y="-180" width="104" height="200" rx="14" fill={C.blue} stroke={INK} strokeWidth="7" />
            <circle cx="-34" cy="-160" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
            <circle cx="34" cy="-160" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
            <rect x="-28" y="-128" width="56" height="42" rx="9" fill={C.blue600} stroke={INK} strokeWidth="5" />
            <rect x="-16" y="-140" width="9" height="24" rx="4" fill={C.orange} stroke={INK} strokeWidth="4" />
            <g transform={`translate(0 ${-216 + bob}) scale(1.12)`}>
              <Kopf expression={expression} blink={blink} talkPhase={talking ? lt * 11 : 0} />
            </g>
          </g>
          {/* Tisch */}
          <rect x="200" y="796" width="800" height="144" fill={C.orange300} stroke={INK} strokeWidth="8" />
          <rect x="200" y="796" width="800" height="144" fill="rgba(12,14,19,0.10)" />
          <rect x="160" y="768" width="880" height="30" rx="10" fill={C.orange300} stroke={INK} strokeWidth="8" />
          {/* wachsende Papierstapel */}
          <Stapel x={262} w={150} h={190} p={stackP} t={lt} seed={1} />
          <Stapel x={392} w={124} h={122} p={stackP * 1.05} t={lt} seed={2} />
          <Stapel x={846} w={150} h={228} p={stackP} t={lt} seed={3} />
          <Stapel x={982} w={116} h={132} p={stackP * 1.1} t={lt} seed={4} />
          <g opacity="1">
            <rect x="268" y="990" width="86" height="62" rx="6" fill={C.white} stroke={INK} strokeWidth="5" transform="rotate(18 310 1020)" />
            <rect x="920" y="1010" width="86" height="62" rx="6" fill={C.white} stroke={INK} strokeWidth="5" transform="rotate(-14 962 1040)" />
          </g>
          {/* Arme: links auf Tisch, rechts Telefon am Ohr */}
          <g transform="translate(600 770)">
            <path d="M -95 -168 Q -190 -90 -170 -16" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
            <circle cx="-170" cy="-16" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
            <g transform={`rotate(${76 * (1 - Easing.easeOutBack(phoneUpP))} 95 -168)`}>
              <path d="M 95 -168 Q 165 -158 203 -264" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
              <circle cx="203" cy="-264" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
              <g transform="translate(196 -300) rotate(9)" opacity={phoneUpP > 0.05 ? 1 : 0}>
                <rect x="-26" y="-46" width="52" height="92" rx="13" fill={C.ink700} stroke={INK} strokeWidth="7" />
                <rect x="-18" y="-36" width="36" height="66" rx="6" fill={C.blue50} />
              </g>
            </g>
          </g>
        </svg>
        {/* Anruf-Inset: großes Handy-Display mit Kontakt „Neffe" */}
        <div style={{ position: "absolute", left: 120, top: 130, width: 350, height: 540, transform: `scale(${Easing.easeOutBack(cardP)})`, transformOrigin: "85% 85%", opacity: clamp(cardP * 2, 0, 1) }}>
          <div style={{ position: "absolute", inset: 0, background: C.ink700, border: `8px solid ${INK}`, borderRadius: 44, boxShadow: "0 14px 0 rgba(12,14,19,0.14)" }} />
          <div style={{ position: "absolute", inset: 14, background: C.blue50, borderRadius: 30, overflow: "hidden" }}>
            <div style={{ position: "absolute", left: 0, right: 0, top: 18, display: "flex", justifyContent: "center", alignItems: "center", gap: 12 }}>
              <div style={{ width: 14, height: 14, borderRadius: "50%", background: "#39B54A", opacity: 0.5 + 0.5 * Math.abs(Math.sin(lt * 3)) }} />
              <div style={{ whiteSpace: "nowrap", fontFamily: MONO, fontWeight: 500, fontSize: 18, letterSpacing: "0.16em", textTransform: "uppercase", color: C.ink500 }}>Anruf · 1:47</div>
            </div>
            <div style={{ position: "absolute", left: 0, right: 0, top: 206, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
              <div style={{ width: 116, height: 116, borderRadius: "50%", background: C.orange, border: `7px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 56, color: C.white }}>N</div>
              <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 32, lineHeight: 1.1, color: INK }}>Neffe</div>
            </div>
            <div style={{ position: "absolute", left: "50%", bottom: 22, transform: "translateX(-50%)", width: 64, height: 64, borderRadius: "50%", background: C.red, border: `6px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg viewBox="0 0 24 24" style={{ width: 32, height: 32, transform: "rotate(135deg)" }}><path d="M 6.6 10.8 c 1.5 3 3.6 5.1 6.6 6.6 l 2.2 -2.2 c 0.3 -0.3 0.7 -0.4 1 -0.2 c 1.1 0.4 2.3 0.6 3.6 0.6 c 0.6 0 1 0.4 1 1 v 3.4 c 0 0.6 -0.4 1 -1 1 c -9.4 0 -17 -7.6 -17 -17 c 0 -0.6 0.4 -1 1 -1 h 3.5 c 0.6 0 1 0.4 1 1 c 0 1.2 0.2 2.4 0.6 3.6 c 0.1 0.3 0 0.7 -0.2 1 z" fill={C.white} /></svg>
            </div>
          </div>
          {/* Antwort des Neffen — erst Nachdenken, dann Absage */}
          {lt < 0.85 ? (
            <SpeechBubble x={5} y={66} w={250} pop={clamp((lt - 0.5) / 0.3, 0, 1)} tailX={125} fontSize={30} align="center" text={"…"} />
          ) : (
            <SpeechBubble x={5} y={66} w={250} pop={clamp((lt - 0.85) / 0.3, 0, 1)} tailX={125} fontSize={30} align="center" text={"Keine Ahnung …"} />
          )}
        </div>
        {/* Tuut-Tuut Wellen am Telefon */}
        {talking && (
          <svg viewBox="0 0 120 90" style={{ position: "absolute", left: 836, top: 420, width: 120, height: 90, overflow: "visible" }}>
            {[0, 1].map((i) => (
              <path key={i} d="M 10 14 q 18 27 0 54" fill="none" stroke={INK} strokeWidth="6" strokeLinecap="round"
                transform={`translate(${i * 30} 0) scale(${0.7 + i * 0.25})`}
                opacity={0.15 + 0.85 * Math.max(0, Math.sin(lt * 7.5 - i * 1.1))} />
            ))}
          </svg>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 4 — EIPME verbindet alles. Hell, ruhig, grün.  9.8 … 12.2
   ============================================================ */
function TechBadge({ pop, t }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  if (s <= 0) return null;
  return (
    <div style={{ width: 240, height: 240, transform: `translateY(${Math.sin(t * 2.2) * 6}px) scale(${s})`, filter: "drop-shadow(0 0 26px rgba(31,94,255,0.45))" }}>
      <svg viewBox="0 0 240 240" style={{ width: "100%", height: "100%", overflow: "visible", display: "block" }}>
        <circle cx="120" cy="120" r="104" fill={C.white} stroke={INK} strokeWidth="8" />
        <circle cx="120" cy="120" r="88" fill="none" stroke={C.blue100} strokeWidth="6" />
        {/* freundlicher Techniker: Helm + Gesicht */}
        <g transform="translate(120 128)">
          <circle cx="0" cy="0" r="52" fill={C.skin} stroke={INK} strokeWidth="6" />
          <path d="M -50 -14 q 0 -50 50 -50 q 50 0 50 50 l 0 6 q -50 -12 -100 0 z" fill={C.blue} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
          <path d="M -56 -8 q 56 -14 112 0 q 5 2 3 8 q -2 6 -8 5 q -52 -13 -102 0 q -6 1 -8 -5 q -2 -6 3 -8 z" fill={C.orange} stroke={INK} strokeWidth="5" strokeLinejoin="round" />
          <circle cx="-18" cy="6" r="6.5" fill={INK} />
          <circle cx="18" cy="6" r="6.5" fill={INK} />
          <path d="M -16 26 q 16 14 32 0" fill="none" stroke={INK} strokeWidth="6" strokeLinecap="round" />
          <text x="0" y="-24" textAnchor="middle" fontFamily={GEIST} fontWeight="800" fontStyle="italic" fontSize="26" fill={C.white}>E</text>
        </g>
        {/* Schraubenschlüssel-Orbit */}
        <g transform={`rotate(${t * 40} 120 120)`}>
          <g transform="translate(120 6)">
            <rect x="-5" y="0" width="10" height="34" rx="5" fill={C.ink300} stroke={INK} strokeWidth="4" />
            <circle cx="0" cy="-4" r="11" fill="none" stroke={C.ink300} strokeWidth="7" />
            <circle cx="0" cy="-4" r="11" fill="none" stroke={INK} strokeWidth="3" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function NetzIcon({ x, y, pop, litP, t, children }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  const lit = clamp(litP, 0, 1);
  return (
    <div style={{ position: "absolute", left: x - 110, top: y - 110, width: 220, height: 236, transform: `scale(${s})`, transformOrigin: "50% 50%" }}>
      <div style={{ width: 220, height: 220, borderRadius: 44, background: lit > 0.5 ? "#E7F3EA" : C.white, border: `8px solid ${lit > 0.5 ? C.green : INK}`, boxShadow: lit > 0.5 ? "0 0 0 10px rgba(14,107,39,0.14), 0 14px 0 rgba(12,14,19,0.10)" : "0 14px 0 rgba(12,14,19,0.10)", display: "flex", alignItems: "center", justifyContent: "center", transition: "none", transform: `scale(${1 + 0.08 * Math.sin(Math.min(1, lit) * Math.PI)})` }}>
        {children}
      </div>
      {/* grüner Mini-Haken */}
      <div style={{ position: "absolute", right: -6, top: -6, width: 54, height: 54, borderRadius: "50%", background: C.green, border: `6px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Easing.easeOutBack(clamp((litP - 0.4) / 0.3, 0, 1))})` }}>
        <svg viewBox="0 0 24 24" style={{ width: 28, height: 28 }}><path d="M 5 12.5 l 5 5 l 9 -11" fill="none" stroke={C.white} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </div>
  );
}

function Leitung({ d, p, len }) {
  const lp = Easing.easeInOutCubic(clamp(p, 0, 1));
  return (
    <g>
      <path d={d} fill="none" stroke={C.blue100} strokeWidth="14" strokeLinecap="round" />
      <path d={d} fill="none" stroke={C.blue} strokeWidth="14" strokeLinecap="round" strokeDasharray={len} strokeDashoffset={len * (1 - lp)} />
    </g>
  );
}

function SceneVerbinden() {
  const { localTime: lt } = useSprite();
  const badgePop = clamp((lt - 0.2) / 0.5, 0, 1);
  const pops = [clamp((lt - 0.1) / 0.35, 0, 1), clamp((lt - 0.25) / 0.35, 0, 1), clamp((lt - 0.4) / 0.35, 0, 1)];
  const lines = [clamp((lt - 0.6) / 0.6, 0, 1), clamp((lt - 1.2) / 0.6, 0, 1), clamp((lt - 1.8) / 0.6, 0, 1)];
  const lits = [clamp((lt - 1.1) / 0.3, 0, 1), clamp((lt - 1.7) / 0.3, 0, 1), clamp((lt - 2.3) / 0.3, 0, 1)];
  const shiftP = Easing.easeInOutCubic(clamp((lt - 2.5) / 0.45, 0, 1));
  const pp = clamp((lt - 2.75) / 0.45, 0, 1);
  const signScale = Easing.easeOutBack(pp);
  const signRot = 6 - 8 * Easing.easeOutCubic(pp);

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: C.blue50, opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 50%, ${C.white} 0%, ${C.blue50} 62%)` }} />
      {/* Netz-Struktur — schiebt hoch, wenn das Schild kommt */}
      <div style={{ position: "absolute", inset: 0, transform: `translateY(${-84 * shiftP}px)` }}>
      {/* Leitungen */}
      <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <Leitung d="M 600 700 Q 430 660 300 550" p={lines[0]} len={370} />
        <Leitung d="M 600 700 Q 600 540 600 440" p={lines[1]} len={260} />
        <Leitung d="M 600 700 Q 770 660 900 550" p={lines[2]} len={370} />
        {/* Impuls-Punkte auf fertigen Leitungen */}
        {lits[0] > 0.9 && <circle cx={600 - 300 * ((lt * 0.7) % 1)} cy={700 - 150 * ((lt * 0.7) % 1)} r="9" fill={C.orange} stroke={INK} strokeWidth="3" />}
        {lits[2] > 0.9 && <circle cx={600 + 300 * ((lt * 0.7 + 0.4) % 1)} cy={700 - 150 * ((lt * 0.7 + 0.4) % 1)} r="9" fill={C.orange} stroke={INK} strokeWidth="3" />}
        <Sparkle x={168} y={310} p={(lt - 1.25) / 0.7} size={28} />
        <Sparkle x={1058} y={296} p={(lt - 2.45) / 0.7} size={26} color={C.blue300} />
        <Sparkle x={748} y={196} p={(lt - 1.85) / 0.7} size={22} />
      </svg>
      {/* Geräte-Icons */}
      <NetzIcon x={300} y={440} pop={pops[0]} litP={lits[0]} t={lt}>
        <svg viewBox="0 0 96 96" style={{ width: 128, height: 128 }}>
          <rect x="24" y="12" width="48" height="22" rx="4" fill={C.white} stroke={INK} strokeWidth="5" />
          <rect x="12" y="34" width="72" height="34" rx="8" fill={C.ink100} stroke={INK} strokeWidth="5" />
          <circle cx="72" cy="44" r="4.5" fill={C.green} />
          <rect x="24" y="58" width="48" height="26" rx="4" fill={C.white} stroke={INK} strokeWidth="5" />
          <line x1="32" y1="68" x2="64" y2="68" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
          <line x1="32" y1="76" x2="54" y2="76" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
        </svg>
      </NetzIcon>
      <NetzIcon x={600} y={330} pop={pops[1]} litP={lits[1]} t={lt}>
        <svg viewBox="0 0 96 96" style={{ width: 128, height: 128 }}>
          <circle cx="48" cy="72" r="7" fill={C.blue} stroke={INK} strokeWidth="4" />
          <path d="M 30 54 a 26 26 0 0 1 36 0" fill="none" stroke={INK} strokeWidth="7" strokeLinecap="round" />
          <path d="M 16 38 a 46 46 0 0 1 64 0" fill="none" stroke={INK} strokeWidth="7" strokeLinecap="round" />
        </svg>
      </NetzIcon>
      <NetzIcon x={900} y={440} pop={pops[2]} litP={lits[2]} t={lt}>
        <svg viewBox="0 0 96 96" style={{ width: 128, height: 128 }}>
          <rect x="14" y="18" width="68" height="44" rx="6" fill={C.white} stroke={INK} strokeWidth="5" />
          <rect x="20" y="24" width="56" height="32" rx="3" fill={C.blue100} />
          <rect x="40" y="62" width="16" height="8" fill={C.ink300} stroke={INK} strokeWidth="3" />
          <rect x="28" y="70" width="40" height="7" rx="3" fill={C.ink300} stroke={INK} strokeWidth="3" />
        </svg>
      </NetzIcon>
      {/* EIPME-Techniker mittig unten */}
      <div style={{ position: "absolute", left: 600 - 120, top: 700 - 120 }}>
        <TechBadge pop={badgePop} t={lt} />
      </div>
      </div>
      {/* Großes Orange-Schild nach dem grünen Häkchen-Trio */}
      <div style={{ position: "absolute", left: 0, right: 0, top: 830, display: "flex", justifyContent: "center", transform: `scale(${signScale}) rotate(${signRot}deg)`, transformOrigin: "50% 30%", opacity: clamp(pp * 2, 0, 1) }}>
        <div style={{ backgroundImage: `linear-gradient(115deg, ${C.orange} 0%, ${C.blue} 25%, ${C.orange} 50%, ${C.blue} 75%, ${C.orange} 100%)`, backgroundSize: "400% 100%", backgroundPosition: `${(lt * 55) % 66.667}% 50%`, border: `9px solid ${INK}`, borderRadius: 44, padding: "30px 52px", maxWidth: 880, textAlign: "center", boxShadow: `0 16px 0 rgba(12,14,19,0.16), 0 0 0 10px ${C.orange100}` }}>
          <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 52, lineHeight: 1.12, letterSpacing: "-0.02em", color: C.white, textWrap: "balance" }}>Jetzt <span style={{ display: "inline-block", background: C.white, borderRadius: 16, padding: "0 14px", margin: "0 2px" }}><span style={{ backgroundImage: `linear-gradient(100deg, ${C.blue}, ${C.orange})`, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>EIPME</span></span> PC-, Arbeitsplatz- & Mail-Support anfordern</div>
        </div>
      </div>
      {/* Funkeln ums Schild */}
      <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
        <Sparkle x={150} y={800} p={(lt - 3.2) / 0.7} size={34} />
        <Sparkle x={1054} y={846} p={(lt - 3.4) / 0.7} size={28} color={C.blue300} />
        <Sparkle x={128} y={1054} p={(lt - 3.6) / 0.7} size={26} color={C.blue300} />
        <Sparkle x={1066} y={1032} p={(lt - 3.8) / 0.7} size={32} />
      </svg>
    </div>
  );
}

/* ============================================================
   SZENE 5 — Angebot in der Hand, "Läuft einfach." + Logo. 12.2 … 14.4
   ============================================================ */
function LogoLockup({ size = 64 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: size * 0.32 }}>
      <img src="assets/eipme-c4-symbol.svg" alt="EIPME" style={{ height: size, display: "block" }} />
      <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: size * 0.82, letterSpacing: "0.005em", color: INK, lineHeight: 1 }}>EIPME</div>
    </div>
  );
}

function StandMitAngebot({ blink = 0, bob = 0, liftP = 0, t = 0 }) {
  const lift = Easing.easeOutBack(clamp(liftP, 0, 1));
  const armA = -20 * lift + 2.5 * Math.sin(t * 2.2);
  return (
    <svg viewBox="0 0 360 520" style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>
      <g>
        <rect x="126" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <rect x="192" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <path d="M 116 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
        <path d="M 184 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
      </g>
      <g>
        <path d="M 96 290 q 83 -26 166 0 l 6 160 q -89 18 -178 0 z" fill={C.orange300} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <path d="M 106 336 q 73 -20 146 0 l 4 114 q -77 16 -154 0 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <rect x="138" y="300" width="82" height="72" rx="12" fill={C.blue} stroke={INK} strokeWidth="7" />
        <path d="M 118 292 l 30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <path d="M 240 292 l -30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <circle cx="150" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <circle cx="208" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <rect x="158" y="328" width="42" height="30" rx="8" fill={C.blue600} stroke={INK} strokeWidth="5" />
        <rect x="170" y="318" width="8" height="22" rx="3" fill={C.orange} stroke={INK} strokeWidth="4" />
      </g>
      {/* linker Arm entspannt, rechter hält Angebot hoch */}
      <g>
        <path d="M 100 322 q -34 24 -40 66" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <circle cx="58" cy="392" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
        <g transform={`rotate(${armA} 258 330)`}>
          <path d="M 258 330 q 52 -18 76 -62" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
          <circle cx="338" cy="264" r="20" fill={C.skin} stroke={INK} strokeWidth="6" />
          {/* frisch gedrucktes Angebot */}
          <g transform="translate(430 168) rotate(9)">
            <rect x="-72" y="-98" width="150" height="196" rx="12" fill={C.white} stroke={INK} strokeWidth="7" />
            <text x="4" y="-62" textAnchor="middle" fontFamily={MONO} fontWeight="500" fontSize="23" letterSpacing="0.14em" fill={C.blue}>ANGEBOT</text>
            <rect x="-52" y="-46" width="112" height="5" rx="3" fill={C.orange} />
            <g stroke={C.ink300} strokeWidth="5" strokeLinecap="round">
              <line x1="-50" y1="-18" x2="58" y2="-18" /><line x1="-50" y1="8" x2="38" y2="8" /><line x1="-50" y1="34" x2="52" y2="34" />
            </g>
            <g transform="translate(46 72)">
              <circle cx="0" cy="0" r="24" fill={C.green} stroke={INK} strokeWidth="5" />
              <path d="M -10 0 l 7 8 l 14 -16" fill="none" stroke={C.white} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
            </g>
          </g>
        </g>
      </g>
      <g transform={`translate(179 ${282 + bob})`}>
        <Kopf expression="grin" blink={blink} />
      </g>
    </svg>
  );
}

function SceneOutro({ headline }) {
  const { localTime: lt } = useSprite();
  const wipe = Easing.easeOutCubic(clamp(lt / 0.5, 0, 1));
  const walkP = Easing.easeOutCubic(clamp(lt / 0.5, 0, 1));
  const x = -430 + 430 * walkP;
  const bob = Math.sin(lt * 13) * 7 * (1 - walkP);
  const liftP = clamp((lt - 0.35) / 0.35, 0, 1);
  const textIn = Easing.easeOutCubic(clamp((lt - 0.3) / 0.4, 0, 1));
  const logoIn = Easing.easeOutCubic(clamp((lt - 0.55) / 0.4, 0, 1));
  const blink = 0;
  const breathe = 1;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: C.paper, opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 118%, ${C.blue100} 0%, ${C.blue50} 46%, ${C.paper} 74%)`, transform: `scale(${breathe})` }} />
      <div style={{ position: "absolute", inset: 0, clipPath: `circle(${wipe * 92}% at 50% 58%)` }}>
        <div style={{ position: "absolute", left: 100, bottom: 150, width: 350, height: 505, transform: `translateX(${x}px)` }}>
          <StandMitAngebot blink={blink} bob={bob} liftP={liftP} t={0} />
        </div>
        <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible", pointerEvents: "none" }}>
          <Sparkle x={520} y={430} p={(lt - 0.8) / 0.7} size={28} />
          <Sparkle x={314} y={330} p={(lt - 0.95) / 0.7} size={22} color={C.blue300} />
        </svg>
        <div style={{ position: "absolute", left: 600, right: 64, top: 360, display: "flex", flexDirection: "column", gap: 44 }}>
          <div style={{ opacity: textIn, transform: `translateY(${26 * (1 - textIn)}px)`, fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 96, lineHeight: 1.04, letterSpacing: "-0.03em", color: INK, textWrap: "balance" }}>
            {headline}
          </div>
          <div style={{ opacity: logoIn, transform: `translateY(${18 * (1 - logoIn)}px)`, display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ height: 5, width: 130, background: `linear-gradient(90deg, ${C.blue}, ${C.orange})`, borderRadius: 999 }} />
            <LogoLockup size={82} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ */
function HandwerkerITSpot({ headline, showCaptions }) {
  const ref = R.useRef(null);
  const HL = headline || "Läuft einfach.";
  const caps = showCaptions !== false;
  return (
    <div ref={ref} style={{ width: "100%", height: "100%" }}>
      <Stage width={1200} height={1200} duration={17.7} background={C.blue50} autoplay loop>
        <TimestampLabel rootRef={ref} />
        <Sprite start={0} end={3.35}><SceneDrucker /></Sprite>
        <Sprite start={3.0} end={7.35}><SceneChaos showCaptions={caps} /></Sprite>
        <Sprite start={7.0} end={9.85}><SceneTelefon /></Sprite>
        <Sprite start={9.5} end={15.05}><SceneVerbinden /></Sprite>
        <Sprite start={14.7} end={17.7}><SceneOutro headline={HL} /></Sprite>
      </Stage>
    </div>
  );
}

function TimestampLabel({ rootRef }) {
  const t = useTime();
  const sec = Math.floor(t);
  R.useEffect(() => {
    const el = rootRef.current && rootRef.current.querySelector("[data-om-exportable-video-with-duration-secs]");
    (el || rootRef.current) && (el || rootRef.current).setAttribute("data-screen-label", "t=" + sec + "s");
  }, [sec]);
  return null;
}

window.HandwerkerITSpot = HandwerkerITSpot;
