/* ══════════════════════════════════════════════════════════════════════
   Kachel-Szenen: jede zeigt in Bewegung, was ihr Programm kann.
   (ZauberPinsel und Spiele stehen in szenen.css, erzeugt per Skript.)
   Jede Szene hat ein eigenes Klassen-Präfix (eo-, rb-, fk-, …), damit
   sich kurze Namen nicht gegenseitig treffen.
   ══════════════════════════════════════════════════════════════════════ */

/* Außer Sicht: alles anhalten (spart Akku). reise.js setzt .ruht. */
.bild.ruht *, .bild.ruht *::before, .bild.ruht *::after { animation-play-state: paused !important; }


/* ── Elli OS: ein Tag vergeht ─────────────────────────────────────────────
   14-s-Takt: 0–34 Tag · 34–50 Abend · 50–76 Nacht · 76–92 Morgen.
   Unten das Dock: alle 1,6 s wird ein anderer Bild-Knopf angetippt.     */
.szene-eo { position: absolute; inset: 0; overflow: hidden; }
.eo-himmel { position: absolute; inset: 0; background: linear-gradient(176deg, #7fd0ff 0%, #bde9ff 48%, #fff3cf 100%); }
.eo-himmel::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, #ff9468 0%, #ffb58a 42%, #ffd9a0 72%);
  animation: eo-abend 14s ease-in-out infinite;
}
@keyframes eo-abend { 0%, 30% { opacity: 0; } 41% { opacity: .85; } 52%, 76% { opacity: 0; } 84% { opacity: .55; } 93%, 100% { opacity: 0; } }

.eo-sonne {
  position: absolute; left: 74%; top: 20%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, #fff7c8 0 30%, #ffd65a 62%);
  box-shadow: 0 0 0 10px rgba(255, 214, 90, .22), 0 0 44px 14px rgba(255, 196, 80, .5);
  animation: eo-sonne 14s ease-in-out infinite;
}
@keyframes eo-sonne { 0%, 32% { transform: translateY(0); } 48%, 80% { transform: translateY(190px); } 93%, 100% { transform: translateY(0); } }

.eo-land, .eo-lichter { position: absolute; inset: 0; width: 100%; height: 100%; }
.eo-wolke { animation: eo-ziehen 42s linear infinite; }
.eo-wolke.b { animation-duration: 60s; animation-delay: -24s; }
@keyframes eo-ziehen { from { transform: translateX(-30%); } to { transform: translateX(130%); } }

.eo-nacht {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, #0a1034 0%, #18225a 58%, #232a5c 100%);
  animation: eo-nacht 14s ease-in-out infinite;
}
@keyframes eo-nacht { 0%, 36% { opacity: 0; } 52%, 76% { opacity: .82; } 90%, 100% { opacity: 0; } }

.eo-sterne i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px #fff; opacity: 0; animation: eo-sterne 14s ease-in-out infinite;
}
.eo-sterne i:nth-child(odd) { animation-name: eo-sterne-b; }
@keyframes eo-sterne   { 0%, 44% { opacity: 0; } 52% { opacity: 1; } 60% { opacity: .45; } 68% { opacity: 1; } 76% { opacity: .8; } 84%, 100% { opacity: 0; } }
@keyframes eo-sterne-b { 0%, 46% { opacity: 0; } 55% { opacity: .55; } 63% { opacity: 1; } 71% { opacity: .5; } 78% { opacity: .9; } 86%, 100% { opacity: 0; } }

/* Mondsichel ohne Abdeckscheibe: ein Innenschatten formt die Sichel. */
.eo-mond {
  position: absolute; left: 22%; top: 24%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  box-shadow: inset 9px -4px 0 0 #fff6d8; filter: drop-shadow(0 0 8px rgba(255, 248, 215, .75));
  opacity: 0; animation: eo-mond 14s ease-in-out infinite;
}
@keyframes eo-mond { 0%, 42% { opacity: 0; transform: translateY(36px); } 54%, 74% { opacity: 1; transform: translateY(0); } 84%, 100% { opacity: 0; transform: translateY(-10px); } }

.eo-lichter { opacity: 0; filter: drop-shadow(0 0 7px #ffcf5a); animation: eo-lichter 14s ease-in-out infinite; }
@keyframes eo-lichter { 0%, 41% { opacity: 0; } 49%, 78% { opacity: 1; } 87%, 100% { opacity: 0; } }

/* Die blaue Kugel: der Robin in Elli OS. Ab und zu breiten sich Ringe aus — er hört zu. */
.eo-robin { position: absolute; left: 50%; top: 28%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.eo-robin i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6eaff, #3d7be0 58%, #1b3f8a);
  box-shadow: 0 0 14px 3px rgba(80, 150, 255, .55);
  animation: eo-schweben 4s ease-in-out infinite;
}
.eo-robin b { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(150, 196, 255, .85); opacity: 0; animation: eo-hoeren 3.4s ease-out infinite; }
.eo-robin b + b { animation-delay: .45s; }
@keyframes eo-schweben { 50% { transform: translateY(-5px); } }
@keyframes eo-hoeren { 0%, 52% { opacity: 0; transform: scale(1); } 58% { opacity: .9; } 100% { opacity: 0; transform: scale(2.8); } }

.eo-dock {
  position: absolute; left: 50%; bottom: 9px; translate: -50% 0; display: flex; gap: 7px;
  padding: 5px 9px; border-radius: 16px; background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
}
.eo-dock i {
  font-style: normal; font-size: 18px; line-height: 1; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .6);
  animation: eo-tipp 8s ease-in-out infinite;
}
.eo-dock i:nth-child(2) { animation-delay: 1.6s; }
.eo-dock i:nth-child(3) { animation-delay: 3.2s; }
.eo-dock i:nth-child(4) { animation-delay: 4.8s; }
.eo-dock i:nth-child(5) { animation-delay: 6.4s; }
@keyframes eo-tipp {
  0%, 3% { transform: translateY(0) scale(1); box-shadow: none; }
  6% { transform: translateY(-8px) scale(1.2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 255, 255, .85); }
  11% { transform: translateY(0) scale(1); }
  15%, 100% { box-shadow: none; }
}


/* ── Robin: ein kurzes Gespräch, das hängen bleibt ────────────────────────
   12-s-Takt: Frage → Robin tippt → Antwort → Ja → Termin steht →
   die Erinnerung fliegt in den Kern (er merkt es sich) → von vorn.       */
.szene-rb { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(130% 100% at 18% 40%, #2a4a7a 0%, #16233f 55%, #0d1526 100%); }
.rb-kern { position: absolute; left: 19%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.rb-orb {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff6de, #ffce7d 36%, #f08a46 66%, #a8471f);
  box-shadow: 0 0 0 12px rgba(255, 206, 125, .08), 0 0 56px 10px rgba(255, 170, 90, .38);
  animation: rb-atmen 12s ease-in-out infinite;
}
@keyframes rb-atmen {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  12% { transform: scale(1.04); } 22% { transform: scale(1); }
  27% { transform: scale(1.08); filter: brightness(1.2); } 30% { transform: scale(1.02); } 33% { transform: scale(1.07); }
  40%, 72% { transform: scale(1); filter: brightness(1); }
  79% { transform: scale(1.14); filter: brightness(1.4); }
  86% { transform: scale(1); filter: brightness(1); }
}
.rb-welle { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 206, 125, .6); opacity: 0; animation: rb-welle 12s ease-out infinite; }
.rb-welle.b { animation-delay: .35s; }
@keyframes rb-welle { 0%, 26% { opacity: 0; transform: scale(1); } 27% { opacity: .9; } 37%, 100% { opacity: 0; transform: scale(1.9); } }

.rb-chat { position: absolute; left: 38%; right: 5%; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; }
.rb-chat p {
  position: relative; margin: 0; max-width: 94%; padding: 6px 10px; border-radius: 12px;
  font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(8px) scale(.96);
  animation: 12s cubic-bezier(.2,.8,.2,1) infinite;
}
.rb-du { align-self: flex-end; background: #3d6fd6; color: #fff; border-bottom-right-radius: 4px; }
.rb-er { align-self: flex-start; background: rgba(255, 255, 255, .13); color: #eef3ff; border-bottom-left-radius: 4px; }
/* Spezifisch genug, um die Kurzschreibweise von .rb-chat p zu schlagen */
.rb-chat .rb-1 { animation-name: rb-1; }
.rb-chat .rb-2 { animation-name: rb-2; }
.rb-chat .rb-3 { animation-name: rb-3; }
.rb-chat .rb-tippt { position: absolute; top: 34px; left: 0; display: flex; gap: 3px; padding: 9px 10px; animation-name: rb-tippt; }
.rb-tippt i { width: 5px; height: 5px; border-radius: 50%; background: #cdd8f0; animation: rb-punkt 1s ease-in-out infinite; }
.rb-tippt i:nth-child(2) { animation-delay: .15s; } .rb-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes rb-punkt { 50% { transform: translateY(-3px); opacity: .5; } }
.rb-chat .rb-termin {
  align-self: center; margin-top: 3px; font-size: 11px; color: #ffe6b0;
  background: rgba(255, 206, 125, .12); border: 1px solid rgba(255, 206, 125, .45); border-radius: 9px;
  animation-name: rb-termin;
}
@keyframes rb-1 { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.96); } 9%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes rb-tippt { 0%, 15% { opacity: 0; transform: translateY(6px); } 17%, 25% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes rb-2 { 0%, 26% { opacity: 0; transform: translateY(8px) scale(.96); } 29%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes rb-3 { 0%, 40% { opacity: 0; transform: translateY(8px) scale(.96); } 43%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes rb-termin { 0%, 50% { opacity: 0; transform: scale(.6); } 54% { opacity: 1; transform: scale(1.08); } 58%, 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }

/* Erinnerungs-Funken fliegen vom Gespräch in den Kern */
.rb-merk {
  position: absolute; left: 62%; top: calc(50% + var(--y)); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #ffe1a0; box-shadow: 0 0 10px 3px rgba(255, 210, 130, .8); opacity: 0;
  animation: rb-merk 12s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes rb-merk {
  0%, 67% { left: 62%; top: calc(50% + var(--y)); opacity: 0; transform: scale(.4); }
  69% { opacity: 1; transform: scale(1); }
  78% { left: 19%; top: 50%; opacity: 1; transform: scale(.7); }
  80%, 100% { left: 19%; top: 50%; opacity: 0; transform: scale(.2); }
}


/* ── Flimmerkiste: durch die Kanäle zappen ────────────────────────────────
   12-s-Takt mit harten Schnitten: Testbild · 60er-Studio · 70er-Disco ·
   80er-Neon · Testbild, dazwischen Rauschen und die grüne Kanalnummer.
   Das Licht an der Wand färbt sich mit dem Programm.                      */
@property --lf { syntax: '<color>'; inherits: false; initial-value: rgba(150, 205, 255, .5); }
.fk-szene .fk-licht { background: radial-gradient(ellipse, var(--lf) 0%, transparent 68%); animation: fk-licht 12s linear infinite, tv-puls 5.5s ease-in-out infinite; }
@keyframes fk-licht {
  0%, 13% { --lf: rgba(200, 220, 255, .5); }
  17%, 36% { --lf: rgba(225, 225, 225, .42); }
  40%, 59% { --lf: rgba(255, 150, 60, .55); }
  63%, 82% { --lf: rgba(255, 60, 175, .55); }
  86%, 100% { --lf: rgba(200, 220, 255, .5); }
}
.fk-schirm { background: #000 !important; }
.fk-kanal { position: absolute; inset: 0; overflow: hidden; opacity: 0; animation: 12s steps(1, end) infinite; }
.fk-test { background: linear-gradient(90deg, #efefef 0 14.28%, #f1e23a 0 28.56%, #3ddfe5 0 42.84%, #37d549 0 57.12%, #e33ae5 0 71.4%, #e7353a 0 85.68%, #2e3ae5 0); animation-name: fk-test; }
.fk-60 { background: radial-gradient(ellipse 70% 90% at 50% -5%, #d4d4d4 0%, #7a7a7a 45%, #2a2a2a 100%); animation-name: fk-60; }
.fk-70 { background: repeating-radial-gradient(circle at 50% 125%, #e8702a 0 9px, #f2a541 9px 18px, #8a3b12 18px 27px, #d9562b 27px 36px); background-size: 100% 100%; animation: fk-70 12s steps(1, end) infinite, fk-wellen 2.4s linear infinite; }
.fk-80 { background: linear-gradient(180deg, #1a0533 0%, #4a0f5c 56%, #12031f 56%); animation-name: fk-80; }
@keyframes fk-test { 0% { opacity: 1; } 14% { opacity: 0; } 86% { opacity: 1; } }
@keyframes fk-60 { 0% { opacity: 0; } 17% { opacity: 1; } 37% { opacity: 0; } }
@keyframes fk-70 { 0% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0; } }
@keyframes fk-80 { 0% { opacity: 0; } 63% { opacity: 1; } 83% { opacity: 0; } }
@keyframes fk-wellen { to { background-position: 0 -36px; } }

/* 60er: Nachrichtensprecher im Studio, schwarzweiß, leicht flackernd */
.fk-60 .fk-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 60% at 50% 38%, rgba(255, 255, 255, .35), transparent 70%); animation: fk-flackern .18s steps(2) infinite; }
.fk-60 .fk-pult { position: absolute; left: 16%; right: 16%; bottom: 0; height: 30%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #a6a6a6, #4e4e4e); }
.fk-60 .fk-kopf { position: absolute; left: 50%; bottom: 25%; width: 21%; aspect-ratio: 1; translate: -50% 0; border-radius: 50% 50% 46% 46%; background: #3b3b3b; box-shadow: 0 19px 0 7px #2c2c2c; animation: fk-nicken 1.6s ease-in-out infinite; }
@keyframes fk-flackern { 50% { opacity: .75; } }
@keyframes fk-nicken { 50% { transform: translateY(1.5px) rotate(-2deg); } }

/* 70er: Discokugel über warmen Wellen */
.fk-70 .fk-kugel {
  position: absolute; left: 50%; top: 10%; width: 30%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #f0f0f0 0 12deg, #8c8c8c 12deg 24deg);
  box-shadow: 0 0 16px 5px rgba(255, 255, 255, .55), inset -6px -6px 10px rgba(0, 0, 0, .35);
  animation: fk-drehen 1.8s linear infinite;
}
@keyframes fk-drehen { to { rotate: 360deg; } }

/* 80er: Neon-Sonne mit Streifen und ein Gitter, das auf einen zufährt */
.fk-80 .fk-sonne {
  position: absolute; left: 50%; top: 12%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(180deg, #ffe66d 0%, #ff8a5c 50%, #ff2e88 100%);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px) bottom / 100% 48% no-repeat;
  mask: linear-gradient(#000, #000) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px) bottom / 100% 48% no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 60, 160, .8));
}
.fk-80 .fk-gitter {
  position: absolute; left: -40%; right: -40%; bottom: 0; height: 44%;
  background:
    linear-gradient(90deg, rgba(255, 46, 136, .85) 1px, transparent 1px) 0 0 / 13px 100%,
    linear-gradient(0deg, rgba(255, 46, 136, .85) 1px, transparent 1px) 0 0 / 100% 10px;
  transform: perspective(56px) rotateX(46deg); transform-origin: bottom;
  animation: fk-gitter .9s linear infinite;
}
@keyframes fk-gitter { to { background-position: 0 0, 0 10px; } }

/* Rauschen zwischen den Sendern */
.fk-rauschen {
  position: absolute; inset: -25%; opacity: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size: 90px;
  animation: fk-rauschen 12s steps(1, end) infinite, fk-schnee .24s steps(4) infinite;
}
@keyframes fk-rauschen { 0% { opacity: 0; } 14% { opacity: 1; } 17% { opacity: 0; } 37% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 1; } 63% { opacity: 0; } 83% { opacity: 1; } 86% { opacity: 0; } }
@keyframes fk-schnee { 0% { transform: translate(0, 0); } 25% { transform: translate(-9%, 5%); } 50% { transform: translate(6%, -7%); } 75% { transform: translate(-4%, 8%); } }

/* Kanalnummer wie auf dem echten Gerät */
.fk-osd { position: absolute; right: 6px; top: 5px; z-index: 4; font: 700 10px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: #5dff7a; text-shadow: 0 0 4px #2bff58; opacity: 0; animation: 12s steps(1, end) infinite; }
.fk-o1 { animation-name: fk-o1; } .fk-o2 { animation-name: fk-o2; } .fk-o3 { animation-name: fk-o3; } .fk-o4 { animation-name: fk-o4; }
@keyframes fk-o1 { 0% { opacity: 0; } 83% { opacity: 1; } 99% { opacity: 0; } }
@keyframes fk-o2 { 0% { opacity: 0; } 14% { opacity: 1; } 30% { opacity: 0; } }
@keyframes fk-o3 { 0% { opacity: 0; } 37% { opacity: 1; } 53% { opacity: 0; } }
@keyframes fk-o4 { 0% { opacity: 0; } 60% { opacity: 1; } 76% { opacity: 0; } }


/* ── Welt der Wünsche: Wunsch, Abstimmung, Verwandlung ────────────────────
   Ergänzt die vorhandene Lichtung (Gott, Kristalle, Bäume) um den Ablauf.
   12-s-Takt: ein Wanderer wünscht sich etwas · die anderen stimmen zu ·
   Funken regnen · ein Baumhaus wächst · es verblasst wieder.             */
.szene-vrwelt .ww-wanderer { position: absolute; bottom: 14px; width: 12px; height: 26px; z-index: 3; }
.szene-vrwelt .ww-w1 { left: 22%; }
.szene-vrwelt .ww-w2 { left: 34%; }
.szene-vrwelt .ww-wanderer i { position: absolute; left: 1px; bottom: 0; width: 10px; height: 15px; border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, #7aa2ff, #3d5cc4); }
.szene-vrwelt .ww-w2 i { background: linear-gradient(180deg, #ff9ac2, #c94f86); }
.szene-vrwelt .ww-wanderer i::before { content: ""; position: absolute; left: 1.5px; top: -8px; width: 7px; height: 7px; border-radius: 50%; background: #ffe0c2; }
.szene-vrwelt .ww-wanderer b { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; font-size: 11px; font-weight: 400; opacity: 0; animation: 12s cubic-bezier(.3,1.6,.5,1) infinite; }
.szene-vrwelt .ww-w1 b { animation-name: ww-daumen-1; }
.szene-vrwelt .ww-w2 b { animation-name: ww-daumen-2; }
@keyframes ww-daumen-1 { 0%, 33% { opacity: 0; transform: scale(0); } 36%, 50% { opacity: 1; transform: scale(1); } 54%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ww-daumen-2 { 0%, 38% { opacity: 0; transform: scale(0); } 41%, 50% { opacity: 1; transform: scale(1); } 54%, 100% { opacity: 0; transform: scale(.6); } }

.szene-vrwelt .ww-wunsch {
  position: absolute; left: 8%; top: 22%; z-index: 4;
  padding: 4px 8px; border-radius: 10px 10px 10px 2px; white-space: nowrap;
  background: #fffaf0; color: #3a2a1a; font-size: 10.5px; font-weight: 600;
  box-shadow: 0 0 14px rgba(255, 233, 168, .55); opacity: 0;
  animation: ww-wunsch 12s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes ww-wunsch { 0%, 6% { opacity: 0; transform: translateY(14px) scale(.8); } 10%, 28% { opacity: 1; transform: translateY(0) scale(1); } 33%, 100% { opacity: 0; transform: translate(26px, -10px) scale(.6); } }

.szene-vrwelt .ww-regen { position: absolute; left: 66%; top: 18%; width: 40px; height: 70px; z-index: 4; }
.szene-vrwelt .ww-regen i { position: absolute; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 6px 2px rgba(255, 220, 120, .8); opacity: 0; animation: ww-regen 12s ease-in infinite; }
.szene-vrwelt .ww-regen i:nth-child(1) { left: 4px; }  .szene-vrwelt .ww-regen i:nth-child(2) { left: 14px; animation-delay: .12s; }
.szene-vrwelt .ww-regen i:nth-child(3) { left: 24px; animation-delay: .24s; } .szene-vrwelt .ww-regen i:nth-child(4) { left: 34px; animation-delay: .08s; }
.szene-vrwelt .ww-regen i:nth-child(5) { left: 9px; animation-delay: .3s; }  .szene-vrwelt .ww-regen i:nth-child(6) { left: 29px; animation-delay: .18s; }
@keyframes ww-regen { 0%, 49% { opacity: 0; transform: translateY(0); } 51% { opacity: 1; } 60% { opacity: 1; transform: translateY(58px); } 62%, 100% { opacity: 0; transform: translateY(62px); } }

.szene-vrwelt .ww-baumhaus { position: absolute; left: 66%; bottom: 12px; width: 44px; height: 74px; z-index: 3; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; animation: ww-wachsen 12s cubic-bezier(.3,1.3,.5,1) infinite; }
.szene-vrwelt .ww-stamm { position: absolute; left: 19px; bottom: 0; width: 7px; height: 56px; border-radius: 2px; background: linear-gradient(90deg, #6b4a2f, #8a6140); }
.szene-vrwelt .ww-krone { position: absolute; left: 2px; top: 0; width: 40px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4fc47e, #24703f); box-shadow: 0 0 12px rgba(79, 196, 126, .45); }
.szene-vrwelt .ww-huette { position: absolute; left: 8px; top: 26px; width: 28px; height: 16px; border-radius: 2px; background: #b07a4a; box-shadow: inset 0 -3px 0 #8a5a33; }
.szene-vrwelt .ww-huette::before { content: ""; position: absolute; left: -3px; top: -9px; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 10px solid #c4553f; }
.szene-vrwelt .ww-huette::after { content: ""; position: absolute; left: 10px; top: 4px; width: 7px; height: 7px; background: #ffd36b; box-shadow: 0 0 6px #ffd36b; }
.szene-vrwelt .ww-leiter { position: absolute; left: 27px; top: 42px; width: 6px; height: 32px; background: repeating-linear-gradient(180deg, transparent 0 4px, #c9a36b 4px 5.5px), linear-gradient(90deg, #c9a36b 0 1.5px, transparent 1.5px 4.5px, #c9a36b 4.5px); }
@keyframes ww-wachsen { 0%, 55% { transform: scaleY(0); opacity: 0; } 58% { opacity: 1; } 70%, 90% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(1); opacity: 0; } }


/* ── Maia: ein Moment aus dem Dienst ──────────────────────────────────────
   10-s-Takt: Fingerabdruck entsperrt · die Gruppe erscheint · Notiz per
   Diktat · Übergabe abgehakt · Zusammenfassung wird vorgelesen · Sperre.  */
.szene-ma { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #10403a 0%, #0a1f24 76%); }
.ma-karte { position: relative; width: 214px; height: 138px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #134039, #0d282a); border: 1px solid rgba(80, 220, 180, .28); box-shadow: 0 14px 30px -12px #000; }
.ma-sperre { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 7px; background: linear-gradient(160deg, #134039, #0d282a); animation: ma-sperre 10s ease-in-out infinite; }
.ma-sperre small { font-size: 10px; color: #8fe3c8; letter-spacing: .02em; }
.ma-finger { position: relative; width: 32px; height: 40px; border-radius: 16px 16px 14px 14px; overflow: hidden; border: 1.5px solid rgba(120, 240, 200, .45); background: repeating-radial-gradient(ellipse at 50% 72%, transparent 0 3px, rgba(120, 240, 200, .55) 3px 4.4px); }
.ma-finger i { position: absolute; left: 0; right: 0; height: 3px; background: #5ff2c0; box-shadow: 0 0 9px #5ff2c0; opacity: 0; animation: ma-scan 10s ease-in-out infinite; }
@keyframes ma-scan { 0%, 2% { top: 0; opacity: 0; } 3% { opacity: 1; } 10% { top: 100%; opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes ma-sperre { 0%, 11% { opacity: 1; transform: none; visibility: visible; } 14%, 92% { opacity: 0; transform: scale(1.06); visibility: hidden; } 95%, 100% { opacity: 1; transform: none; visibility: visible; } }

.ma-app { position: absolute; inset: 0; padding: 8px 10px 7px; display: flex; flex-direction: column; gap: 4px; }
.ma-kopf { display: flex; align-items: baseline; gap: 6px; }
.ma-kopf b { font-family: var(--display); font-size: 12px; color: #e3fff5; }
.ma-kopf span { font-size: 9.5px; color: #7fd8bd; }
.ma-zeile { display: flex; align-items: center; gap: 6px; opacity: 0; animation: 10s cubic-bezier(.2,.8,.2,1) infinite; }
.ma-zeile i { width: 13px; height: 13px; flex: none; border-radius: 50%; font: 700 7.5px/13px var(--display); text-align: center; color: #1d2b2a; font-style: normal; }
.ma-zeile span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); flex: 1; }
.ma-zeile span.kurz { flex: .55; }
.ma-zeile em { font-style: normal; font-size: 10px; color: #5ff2c0; opacity: 0; animation: ma-haken 10s ease-out infinite; }
.ma-z1 { animation-name: ma-z1; } .ma-z2 { animation-name: ma-z2; } .ma-z3 { animation-name: ma-z3; }
@keyframes ma-z1 { 0%, 14% { opacity: 0; transform: translateX(-10px); } 17%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes ma-z2 { 0%, 17% { opacity: 0; transform: translateX(-10px); } 20%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes ma-z3 { 0%, 20% { opacity: 0; transform: translateX(-10px); } 23%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes ma-haken { 0%, 65% { opacity: 0; transform: scale(0); } 68%, 92% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }

.ma-notiz { height: 18px; flex: none; border-radius: 6px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; background: rgba(255, 255, 255, .07); }
.ma-text { display: block; max-width: 0; overflow: hidden; white-space: nowrap; font-size: 9.5px; color: #e8fff7; border-right: 1.5px solid #5ff2c0; animation: ma-tippen 10s linear infinite; }
@keyframes ma-tippen { 0%, 36% { max-width: 0; } 60%, 92% { max-width: 190px; } 95%, 100% { max-width: 0; } }

.ma-fuss { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.ma-mikro, .ma-vorlesen { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 10px; background: rgba(95, 242, 192, .14); }
.ma-mikro { animation: ma-mikro 10s ease-in-out infinite; }
@keyframes ma-mikro { 0%, 31% { background: rgba(95, 242, 192, .14); box-shadow: none; } 34%, 60% { background: #ff5d6c; box-shadow: 0 0 0 4px rgba(255, 93, 108, .25); } 63%, 100% { background: rgba(95, 242, 192, .14); box-shadow: none; } }
.ma-wellen { display: flex; align-items: center; gap: 2px; height: 14px; opacity: 0; animation: ma-wellen-an 10s steps(1, end) infinite; }
.ma-wellen i { width: 2px; height: 4px; border-radius: 1px; background: #ff9aa4; animation: ma-welle .55s ease-in-out infinite; }
.ma-wellen i:nth-child(2) { animation-delay: .1s; } .ma-wellen i:nth-child(3) { animation-delay: .2s; } .ma-wellen i:nth-child(4) { animation-delay: .05s; } .ma-wellen i:nth-child(5) { animation-delay: .15s; }
@keyframes ma-wellen-an { 0% { opacity: 0; } 34% { opacity: 1; } 61% { opacity: 0; } }
@keyframes ma-welle { 50% { height: 13px; } }
.ma-uebergabe { margin-left: auto; padding: 2px 7px; border-radius: 6px; font-size: 9.5px; color: #5ff2c0; background: rgba(95, 242, 192, .12); opacity: 0; animation: ma-uebergabe 10s cubic-bezier(.3,1.5,.5,1) infinite; }
@keyframes ma-uebergabe { 0%, 64% { opacity: 0; transform: scale(.6); } 68%, 92% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }
.ma-vorlesen { animation: ma-vorlesen 10s ease-in-out infinite; }
@keyframes ma-vorlesen {
  0%, 74% { box-shadow: none; }
  77% { box-shadow: 0 0 0 3px rgba(95, 242, 192, .45), 0 0 0 7px rgba(95, 242, 192, .16); }
  80% { box-shadow: 0 0 0 5px rgba(95, 242, 192, .32), 0 0 0 10px rgba(95, 242, 192, .1); }
  83% { box-shadow: 0 0 0 3px rgba(95, 242, 192, .45), 0 0 0 7px rgba(95, 242, 192, .16); }
  86% { box-shadow: 0 0 0 5px rgba(95, 242, 192, .32), 0 0 0 10px rgba(95, 242, 192, .1); }
  89%, 100% { box-shadow: none; }
}


/* ── Pixel Animator: eine Figur lernt laufen ──────────────────────────────
   Dauerschleife, 2 s: vier Laufbilder. Im Raster scheint das vorige Bild
   blass durch (wie im Programm), die Bildleiste zeigt das aktuelle, rechts
   läuft die Vorschau. Die Figuren sind box-shadow-Sprites (erzeugt).     */
.szene-pa { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #3b2a1e 0%, #1c140e 75%); }
.pa-editor { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #2c2018; border: 1px solid #5a4330; box-shadow: 0 12px 26px -12px #000; }
.pa-palette { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; }
.pa-palette i { width: 9px; height: 9px; border-radius: 2px; }
.pa-palette i:first-child { box-shadow: 0 0 0 1.5px #ffd23f; }
.pa-raster {
  position: relative; width: 74px; height: 74px; border-radius: 4px;
  background: repeating-conic-gradient(#3a2d23 0 25%, #33271e 0 50%) 0 0 / 18px 18px;
  box-shadow: inset 0 0 0 1px #5a4330;
}
.pa-groß, .pa-klein, .pa-mini { position: absolute; left: 1px; top: 1px; }
.pa-groß i, .pa-klein i, .pa-mini i { position: absolute; left: 0; top: 0; }
.pa-groß i { width: 9px; height: 9px; animation: pa-zwiebel 2s steps(1, end) infinite; }
.pa-klein i, .pa-mini i { animation: pa-bild 2s steps(1, end) infinite; }
.pa-klein i { width: 3px; height: 3px; }
.pa-mini i { width: 2px; height: 2px; }
.pa-f1 { animation-delay: 0s !important; } .pa-f2 { animation-delay: -1.5s !important; } .pa-f3 { animation-delay: -1s !important; } .pa-f4 { animation-delay: -.5s !important; }
.pa-leiste .pa-f1, .pa-leiste .pa-f2, .pa-leiste .pa-f3, .pa-leiste .pa-f4 { animation: none !important; opacity: 1; }
/* Aktuelles Bild voll, das vorige blass, der Rest unsichtbar */
@keyframes pa-zwiebel { 0% { opacity: 1; } 25% { opacity: .28; } 50% { opacity: 0; } }
@keyframes pa-bild { 0% { opacity: 1; } 25% { opacity: 0; } }
.pa-groß .pa-f1 { box-shadow: 18px 0px 0 #3a2418, 27px 0px 0 #3a2418, 36px 0px 0 #3a2418, 9px 9px 0 #3a2418, 18px 9px 0 #f2c39b, 27px 9px 0 #f2c39b, 36px 9px 0 #f2c39b, 45px 9px 0 #3a2418, 9px 18px 0 #3a2418, 18px 18px 0 #f2c39b, 27px 18px 0 #1b1b2a, 36px 18px 0 #f2c39b, 45px 18px 0 #1b1b2a, 18px 27px 0 #f2c39b, 27px 27px 0 #f2c39b, 36px 27px 0 #f2c39b, 45px 27px 0 #f2c39b, 9px 36px 0 #ff5e7a, 18px 36px 0 #3d8bff, 27px 36px 0 #3d8bff, 36px 36px 0 #3d8bff, 45px 36px 0 #ff5e7a, 18px 45px 0 #3d8bff, 27px 45px 0 #3d8bff, 36px 45px 0 #3d8bff, 45px 45px 0 #f2c39b, 18px 54px 0 #245fc0, 45px 54px 0 #245fc0, 9px 63px 0 #5a3b2a, 54px 63px 0 #5a3b2a; }
.pa-klein .pa-f1 { box-shadow: 6px 0px 0 #3a2418, 9px 0px 0 #3a2418, 12px 0px 0 #3a2418, 3px 3px 0 #3a2418, 6px 3px 0 #f2c39b, 9px 3px 0 #f2c39b, 12px 3px 0 #f2c39b, 15px 3px 0 #3a2418, 3px 6px 0 #3a2418, 6px 6px 0 #f2c39b, 9px 6px 0 #1b1b2a, 12px 6px 0 #f2c39b, 15px 6px 0 #1b1b2a, 6px 9px 0 #f2c39b, 9px 9px 0 #f2c39b, 12px 9px 0 #f2c39b, 15px 9px 0 #f2c39b, 3px 12px 0 #ff5e7a, 6px 12px 0 #3d8bff, 9px 12px 0 #3d8bff, 12px 12px 0 #3d8bff, 15px 12px 0 #ff5e7a, 6px 15px 0 #3d8bff, 9px 15px 0 #3d8bff, 12px 15px 0 #3d8bff, 15px 15px 0 #f2c39b, 6px 18px 0 #245fc0, 15px 18px 0 #245fc0, 3px 21px 0 #5a3b2a, 18px 21px 0 #5a3b2a; }
.pa-mini .pa-f1 { box-shadow: 4px 0px 0 #3a2418, 6px 0px 0 #3a2418, 8px 0px 0 #3a2418, 2px 2px 0 #3a2418, 4px 2px 0 #f2c39b, 6px 2px 0 #f2c39b, 8px 2px 0 #f2c39b, 10px 2px 0 #3a2418, 2px 4px 0 #3a2418, 4px 4px 0 #f2c39b, 6px 4px 0 #1b1b2a, 8px 4px 0 #f2c39b, 10px 4px 0 #1b1b2a, 4px 6px 0 #f2c39b, 6px 6px 0 #f2c39b, 8px 6px 0 #f2c39b, 10px 6px 0 #f2c39b, 2px 8px 0 #ff5e7a, 4px 8px 0 #3d8bff, 6px 8px 0 #3d8bff, 8px 8px 0 #3d8bff, 10px 8px 0 #ff5e7a, 4px 10px 0 #3d8bff, 6px 10px 0 #3d8bff, 8px 10px 0 #3d8bff, 10px 10px 0 #f2c39b, 4px 12px 0 #245fc0, 10px 12px 0 #245fc0, 2px 14px 0 #5a3b2a, 12px 14px 0 #5a3b2a; }
.pa-groß .pa-f2 { box-shadow: 18px 0px 0 #3a2418, 27px 0px 0 #3a2418, 36px 0px 0 #3a2418, 9px 9px 0 #3a2418, 18px 9px 0 #f2c39b, 27px 9px 0 #f2c39b, 36px 9px 0 #f2c39b, 45px 9px 0 #3a2418, 9px 18px 0 #3a2418, 18px 18px 0 #f2c39b, 27px 18px 0 #1b1b2a, 36px 18px 0 #f2c39b, 45px 18px 0 #1b1b2a, 18px 27px 0 #f2c39b, 27px 27px 0 #f2c39b, 36px 27px 0 #f2c39b, 45px 27px 0 #f2c39b, 18px 36px 0 #ff5e7a, 27px 36px 0 #3d8bff, 36px 36px 0 #3d8bff, 45px 36px 0 #ff5e7a, 18px 45px 0 #3d8bff, 27px 45px 0 #3d8bff, 36px 45px 0 #3d8bff, 45px 45px 0 #3d8bff, 27px 54px 0 #245fc0, 36px 54px 0 #245fc0, 27px 63px 0 #5a3b2a, 36px 63px 0 #5a3b2a; }
.pa-klein .pa-f2 { box-shadow: 6px 0px 0 #3a2418, 9px 0px 0 #3a2418, 12px 0px 0 #3a2418, 3px 3px 0 #3a2418, 6px 3px 0 #f2c39b, 9px 3px 0 #f2c39b, 12px 3px 0 #f2c39b, 15px 3px 0 #3a2418, 3px 6px 0 #3a2418, 6px 6px 0 #f2c39b, 9px 6px 0 #1b1b2a, 12px 6px 0 #f2c39b, 15px 6px 0 #1b1b2a, 6px 9px 0 #f2c39b, 9px 9px 0 #f2c39b, 12px 9px 0 #f2c39b, 15px 9px 0 #f2c39b, 6px 12px 0 #ff5e7a, 9px 12px 0 #3d8bff, 12px 12px 0 #3d8bff, 15px 12px 0 #ff5e7a, 6px 15px 0 #3d8bff, 9px 15px 0 #3d8bff, 12px 15px 0 #3d8bff, 15px 15px 0 #3d8bff, 9px 18px 0 #245fc0, 12px 18px 0 #245fc0, 9px 21px 0 #5a3b2a, 12px 21px 0 #5a3b2a; }
.pa-mini .pa-f2 { box-shadow: 4px 0px 0 #3a2418, 6px 0px 0 #3a2418, 8px 0px 0 #3a2418, 2px 2px 0 #3a2418, 4px 2px 0 #f2c39b, 6px 2px 0 #f2c39b, 8px 2px 0 #f2c39b, 10px 2px 0 #3a2418, 2px 4px 0 #3a2418, 4px 4px 0 #f2c39b, 6px 4px 0 #1b1b2a, 8px 4px 0 #f2c39b, 10px 4px 0 #1b1b2a, 4px 6px 0 #f2c39b, 6px 6px 0 #f2c39b, 8px 6px 0 #f2c39b, 10px 6px 0 #f2c39b, 4px 8px 0 #ff5e7a, 6px 8px 0 #3d8bff, 8px 8px 0 #3d8bff, 10px 8px 0 #ff5e7a, 4px 10px 0 #3d8bff, 6px 10px 0 #3d8bff, 8px 10px 0 #3d8bff, 10px 10px 0 #3d8bff, 6px 12px 0 #245fc0, 8px 12px 0 #245fc0, 6px 14px 0 #5a3b2a, 8px 14px 0 #5a3b2a; }
.pa-groß .pa-f3 { box-shadow: 18px 0px 0 #3a2418, 27px 0px 0 #3a2418, 36px 0px 0 #3a2418, 9px 9px 0 #3a2418, 18px 9px 0 #f2c39b, 27px 9px 0 #f2c39b, 36px 9px 0 #f2c39b, 45px 9px 0 #3a2418, 9px 18px 0 #3a2418, 18px 18px 0 #f2c39b, 27px 18px 0 #1b1b2a, 36px 18px 0 #f2c39b, 45px 18px 0 #1b1b2a, 18px 27px 0 #f2c39b, 27px 27px 0 #f2c39b, 36px 27px 0 #f2c39b, 45px 27px 0 #f2c39b, 9px 36px 0 #ff5e7a, 18px 36px 0 #3d8bff, 27px 36px 0 #3d8bff, 36px 36px 0 #3d8bff, 45px 36px 0 #ff5e7a, 9px 45px 0 #f2c39b, 18px 45px 0 #3d8bff, 27px 45px 0 #3d8bff, 36px 45px 0 #3d8bff, 18px 54px 0 #245fc0, 45px 54px 0 #245fc0, 18px 63px 0 #5a3b2a, 45px 63px 0 #5a3b2a; }
.pa-klein .pa-f3 { box-shadow: 6px 0px 0 #3a2418, 9px 0px 0 #3a2418, 12px 0px 0 #3a2418, 3px 3px 0 #3a2418, 6px 3px 0 #f2c39b, 9px 3px 0 #f2c39b, 12px 3px 0 #f2c39b, 15px 3px 0 #3a2418, 3px 6px 0 #3a2418, 6px 6px 0 #f2c39b, 9px 6px 0 #1b1b2a, 12px 6px 0 #f2c39b, 15px 6px 0 #1b1b2a, 6px 9px 0 #f2c39b, 9px 9px 0 #f2c39b, 12px 9px 0 #f2c39b, 15px 9px 0 #f2c39b, 3px 12px 0 #ff5e7a, 6px 12px 0 #3d8bff, 9px 12px 0 #3d8bff, 12px 12px 0 #3d8bff, 15px 12px 0 #ff5e7a, 3px 15px 0 #f2c39b, 6px 15px 0 #3d8bff, 9px 15px 0 #3d8bff, 12px 15px 0 #3d8bff, 6px 18px 0 #245fc0, 15px 18px 0 #245fc0, 6px 21px 0 #5a3b2a, 15px 21px 0 #5a3b2a; }
.pa-mini .pa-f3 { box-shadow: 4px 0px 0 #3a2418, 6px 0px 0 #3a2418, 8px 0px 0 #3a2418, 2px 2px 0 #3a2418, 4px 2px 0 #f2c39b, 6px 2px 0 #f2c39b, 8px 2px 0 #f2c39b, 10px 2px 0 #3a2418, 2px 4px 0 #3a2418, 4px 4px 0 #f2c39b, 6px 4px 0 #1b1b2a, 8px 4px 0 #f2c39b, 10px 4px 0 #1b1b2a, 4px 6px 0 #f2c39b, 6px 6px 0 #f2c39b, 8px 6px 0 #f2c39b, 10px 6px 0 #f2c39b, 2px 8px 0 #ff5e7a, 4px 8px 0 #3d8bff, 6px 8px 0 #3d8bff, 8px 8px 0 #3d8bff, 10px 8px 0 #ff5e7a, 2px 10px 0 #f2c39b, 4px 10px 0 #3d8bff, 6px 10px 0 #3d8bff, 8px 10px 0 #3d8bff, 4px 12px 0 #245fc0, 10px 12px 0 #245fc0, 4px 14px 0 #5a3b2a, 10px 14px 0 #5a3b2a; }
.pa-groß .pa-f4 { box-shadow: 18px 0px 0 #3a2418, 27px 0px 0 #3a2418, 36px 0px 0 #3a2418, 9px 9px 0 #3a2418, 18px 9px 0 #f2c39b, 27px 9px 0 #f2c39b, 36px 9px 0 #f2c39b, 45px 9px 0 #3a2418, 9px 18px 0 #3a2418, 18px 18px 0 #f2c39b, 27px 18px 0 #1b1b2a, 36px 18px 0 #f2c39b, 45px 18px 0 #1b1b2a, 18px 27px 0 #f2c39b, 27px 27px 0 #f2c39b, 36px 27px 0 #f2c39b, 45px 27px 0 #f2c39b, 18px 36px 0 #ff5e7a, 27px 36px 0 #3d8bff, 36px 36px 0 #3d8bff, 45px 36px 0 #ff5e7a, 18px 45px 0 #3d8bff, 27px 45px 0 #3d8bff, 36px 45px 0 #3d8bff, 45px 45px 0 #3d8bff, 27px 54px 0 #245fc0, 36px 54px 0 #245fc0, 27px 63px 0 #5a3b2a, 36px 63px 0 #5a3b2a; }
.pa-klein .pa-f4 { box-shadow: 6px 0px 0 #3a2418, 9px 0px 0 #3a2418, 12px 0px 0 #3a2418, 3px 3px 0 #3a2418, 6px 3px 0 #f2c39b, 9px 3px 0 #f2c39b, 12px 3px 0 #f2c39b, 15px 3px 0 #3a2418, 3px 6px 0 #3a2418, 6px 6px 0 #f2c39b, 9px 6px 0 #1b1b2a, 12px 6px 0 #f2c39b, 15px 6px 0 #1b1b2a, 6px 9px 0 #f2c39b, 9px 9px 0 #f2c39b, 12px 9px 0 #f2c39b, 15px 9px 0 #f2c39b, 6px 12px 0 #ff5e7a, 9px 12px 0 #3d8bff, 12px 12px 0 #3d8bff, 15px 12px 0 #ff5e7a, 6px 15px 0 #3d8bff, 9px 15px 0 #3d8bff, 12px 15px 0 #3d8bff, 15px 15px 0 #3d8bff, 9px 18px 0 #245fc0, 12px 18px 0 #245fc0, 9px 21px 0 #5a3b2a, 12px 21px 0 #5a3b2a; }
.pa-mini .pa-f4 { box-shadow: 4px 0px 0 #3a2418, 6px 0px 0 #3a2418, 8px 0px 0 #3a2418, 2px 2px 0 #3a2418, 4px 2px 0 #f2c39b, 6px 2px 0 #f2c39b, 8px 2px 0 #f2c39b, 10px 2px 0 #3a2418, 2px 4px 0 #3a2418, 4px 4px 0 #f2c39b, 6px 4px 0 #1b1b2a, 8px 4px 0 #f2c39b, 10px 4px 0 #1b1b2a, 4px 6px 0 #f2c39b, 6px 6px 0 #f2c39b, 8px 6px 0 #f2c39b, 10px 6px 0 #f2c39b, 4px 8px 0 #ff5e7a, 6px 8px 0 #3d8bff, 8px 8px 0 #3d8bff, 10px 8px 0 #ff5e7a, 4px 10px 0 #3d8bff, 6px 10px 0 #3d8bff, 8px 10px 0 #3d8bff, 10px 10px 0 #3d8bff, 6px 12px 0 #245fc0, 8px 12px 0 #245fc0, 6px 14px 0 #5a3b2a, 8px 14px 0 #5a3b2a; }

.pa-rechts { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pa-titel { font: 700 8.5px/1 var(--display); letter-spacing: .08em; color: #ffd23f; text-transform: uppercase; }
.pa-vorschau { position: relative; width: 44px; height: 32px; overflow: hidden; border-radius: 4px; background: #f6f1e5; box-shadow: inset 0 0 0 1px #5a4330; }
.pa-vorschau .pa-klein { top: 4px; animation: pa-wandern 4s linear infinite; }
@keyframes pa-wandern { from { transform: translateX(-26px); } to { transform: translateX(46px); } }
.pa-leiste { display: flex; gap: 3px; }
.pa-leiste b { position: relative; width: 16px; height: 16px; border-radius: 3px; background: #f6f1e5; animation: pa-rahmen 2s steps(1, end) infinite; }
.pa-leiste b:nth-child(2) { animation-delay: -1.5s; } .pa-leiste b:nth-child(3) { animation-delay: -1s; } .pa-leiste b:nth-child(4) { animation-delay: -.5s; }
@keyframes pa-rahmen { 0% { box-shadow: 0 0 0 2px #ffd23f; } 25% { box-shadow: 0 0 0 1px #5a4330; } }


/* ── AnimFrame Studio: aus Video werden Bilder ────────────────────────────
   9-s-Takt: ein Ball springt im Video; sechsmal blitzt es, und das Bild
   fliegt als Miniatur in die Leiste. Dann spielt die Leiste ab — der Ball
   springt dort weiter — und alles leert sich.                            */
.szene-af { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #2d2a3d 0%, #121119 76%); }
.af-studio { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.af-video { position: relative; width: 126px; height: 58px; border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, #8fd0ff 0%, #c7ecff 70%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25), 0 10px 22px -10px #000; }
.af-boden { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #5fb948; }
.af-ball { position: absolute; left: 50%; bottom: 12px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ff6b6b 45%, #c9302c); animation: af-springen .72s cubic-bezier(.3,0,.7,1) infinite alternate; }
@keyframes af-springen { from { transform: translateY(0) scale(1.15, .85); } 12% { transform: translateY(-4px) scale(1); } to { transform: translateY(-30px) scale(.95, 1.05); } }
.af-fortschritt { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #ff9a4d; animation: af-fortschritt 9s linear infinite; }
@keyframes af-fortschritt { from { width: 0; } 50% { width: 100%; } to { width: 100%; } }
.af-blitz { position: absolute; inset: 0; background: #fff; opacity: 0; animation: af-blitz 9s linear infinite; }
@keyframes af-blitz { 0% { opacity: 0; } 7% { opacity: 0; } 8.6% { opacity: .85; } 9.6% { opacity: 0; } 15% { opacity: 0; } 16.6% { opacity: .85; } 17.6% { opacity: 0; } 23% { opacity: 0; } 24.6% { opacity: .85; } 25.6% { opacity: 0; } 31% { opacity: 0; } 32.6% { opacity: .85; } 33.6% { opacity: 0; } 39% { opacity: 0; } 40.6% { opacity: .85; } 41.6% { opacity: 0; } 47% { opacity: 0; } 48.6% { opacity: .85; } 49.6% { opacity: 0; } 100% { opacity: 0; } }

.af-leiste { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: rgba(255, 255, 255, .06); }
.af-zelle { position: relative; width: 22px; height: 18px; border-radius: 3px; overflow: visible; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.af-zelle i { position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ff6b6b 45%, #c9302c); opacity: 0; animation: 9s cubic-bezier(.3,.8,.3,1) infinite; }
.af-z1 i { animation-name: af-z1; --dx: 65px; }
@keyframes af-z1 {
  0%, 8% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  8.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  12%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}
.af-z2 i { animation-name: af-z2; --dx: 39px; }
@keyframes af-z2 {
  0%, 16% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  16.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  20%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}
.af-z3 i { animation-name: af-z3; --dx: 13px; }
@keyframes af-z3 {
  0%, 24% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  24.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  28%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}
.af-z4 i { animation-name: af-z4; --dx: -13px; }
@keyframes af-z4 {
  0%, 32% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  32.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  36%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}
.af-z5 i { animation-name: af-z5; --dx: -39px; }
@keyframes af-z5 {
  0%, 40% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  40.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  44%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}
.af-z6 i { animation-name: af-z6; --dx: -65px; }
@keyframes af-z6 {
  0%, 48% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.7); }
  48.5% { opacity: 1; transform: translate(var(--dx), -46px) scale(1.7); }
  52%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
}

/* Beim Abspielen wandert eine Markierung zweimal über die Leiste */
.af-kopf { position: absolute; left: 4px; top: 2px; width: 24px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1.5px #ff9a4d, 0 0 10px #ff9a4d; opacity: 0; animation: af-kopf 9s steps(1, end) infinite; }
@keyframes af-kopf {
  0% { opacity: 0; } 56% { opacity: 1; transform: translateX(0); } 58.3% { transform: translateX(26px); } 60.6% { transform: translateX(52px); } 62.9% { transform: translateX(78px); } 65.2% { transform: translateX(104px); } 67.5% { transform: translateX(130px); }
  69.8% { transform: translateX(0); } 72.1% { transform: translateX(26px); } 74.4% { transform: translateX(52px); } 76.7% { transform: translateX(78px); } 79% { transform: translateX(104px); } 81.3% { transform: translateX(130px); } 83.6% { opacity: 0; }
}


/* ── Audio-Studio: zwei Takte in Schleife ─────────────────────────────────
   4-s-Takt: der Abspielkopf läuft über drei Spuren (Schlagzeug, Bass,
   Synthesizer); jede Note leuchtet, wenn er sie trifft, die Pegel
   im Mischpult hüpfen im Takt.                                            */
.szene-as { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #2a1d48 0%, #110c1d 76%); }
.as-studio { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 5px 7px; padding: 7px 8px; border-radius: 10px; background: #15131c; border: 1px solid #2c2838; box-shadow: 0 12px 26px -12px #000; }
.as-kopfleiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; height: 12px; }
.as-kopfleiste b { font: 700 8.5px/1 ui-monospace, Menlo, monospace; color: #3fa9ff; margin-right: 5px; }
.as-kopfleiste i { width: 4px; height: 4px; border-radius: 50%; background: #3a3550; animation: as-schlag 2s steps(1, end) infinite; }
.as-kopfleiste i:nth-child(3) { animation-delay: -1.5s; } .as-kopfleiste i:nth-child(4) { animation-delay: -1s; } .as-kopfleiste i:nth-child(5) { animation-delay: -.5s; }
@keyframes as-schlag { 0% { background: #3fa9ff; box-shadow: 0 0 5px #3fa9ff; } 25% { background: #3a3550; box-shadow: none; } }

.as-spuren { position: relative; width: 168px; display: grid; gap: 3px; }
.as-spur { display: flex; align-items: stretch; gap: 4px; height: 20px; }
.as-name { width: 4px; flex: none; border-radius: 2px; }
.as-drums .as-name { background: #ff9a3c; } .as-bass .as-name { background: #3ee07a; } .as-synth .as-name { background: #b46bff; }
.as-roll { position: relative; flex: 1; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 12.5%), #1c1a26; }
.as-n { position: absolute; top: 4px; height: 4px; border-radius: 2px; animation: as-leuchten 4s ease-out infinite; }
.as-drums .as-n { height: 12px; top: 4px; }
.as-drums .as-k { background: #ff9a3c; } .as-drums .as-s { background: #ffd23f; height: 8px; top: 6px; } .as-drums .as-h { background: #a8a2c0; height: 4px; top: 8px; }
.as-bass .as-n { background: #3ee07a; }
.as-synth .as-n { background: #b46bff; height: 6px; }
@keyframes as-leuchten { 0% { filter: brightness(2.2); box-shadow: 0 0 8px currentColor, 0 0 10px rgba(255, 255, 255, .7); transform: scaleY(1.35); } 7% { filter: brightness(1); box-shadow: none; transform: scaleY(1); } 100% { filter: brightness(1); } }
.as-kopf { position: absolute; left: 8px; top: -2px; bottom: -2px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; animation: as-kopf 4s linear infinite; }
@keyframes as-kopf { from { transform: translateX(0); } to { transform: translateX(160px); } }

.as-mischpult { grid-row: 2; display: flex; align-items: flex-end; gap: 4px; height: 66px; padding: 4px; border-radius: 6px; background: #1c1a26; }
.as-mischpult i { width: 6px; border-radius: 3px; height: 30%; }
.as-p1 { background: linear-gradient(0deg, #ff9a3c, #ffd23f); animation: as-p1 .5s ease-out infinite; }
.as-p2 { background: linear-gradient(0deg, #2fbf64, #9ff2be); animation: as-p2 1s ease-out infinite; }
.as-p3 { background: linear-gradient(0deg, #8a4fe0, #e0b8ff); animation: as-p3 2s ease-in-out infinite; }
@keyframes as-p1 { 0% { height: 95%; } 100% { height: 30%; } }
@keyframes as-p2 { 0% { height: 80%; } 60% { height: 40%; } 100% { height: 70%; } }
@keyframes as-p3 { 0%, 100% { height: 55%; } 50% { height: 78%; } }

/* ── Video-Editor: Bereich markieren, schneiden, sammeln (12 s) ─────────── */
.szene-ve { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #3a1b24 0%, #140b10 76%); }
.ve-buehne { position: relative; width: 240px; height: 118px; }
.ve-vorschau { position: absolute; left: 0; top: 0; width: 120px; height: 62px; border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, #ff9a7a 0%, #ffcf8a 60%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .2), 0 10px 22px -10px #000; animation: ve-licht 12s linear infinite; }
@keyframes ve-licht { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-28deg) brightness(1.05); } }
.ve-sonne { position: absolute; left: 70px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #fff4c2; box-shadow: 0 0 14px #fff1a8; animation: ve-sonne 12s linear infinite; }
@keyframes ve-sonne { from { transform: translateY(0); } to { transform: translateY(18px); } }
.ve-huegel { position: absolute; left: -20px; bottom: -26px; width: 110px; height: 52px; border-radius: 50%; background: #6b3a5a; animation: ve-schwenk 12s linear infinite; }
.ve-huegel.ve-h2 { left: 50px; bottom: -32px; width: 120px; background: #4a2846; animation-duration: 12s; animation-direction: reverse; }
@keyframes ve-schwenk { from { transform: translateX(0); } to { transform: translateX(-14px); } }
.ve-zeit { position: absolute; right: 5px; bottom: 4px; font: 600 8px/1 ui-monospace, monospace; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 4px; border-radius: 3px; }

.ve-liste { position: absolute; left: 132px; top: 0; width: 108px; height: 62px; border-radius: 7px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ve-titel { position: absolute; left: 7px; top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #ffb3bd; text-transform: uppercase; }
.ve-slot { position: absolute; left: 4px; width: 100px; height: 18px; border-radius: 4px; background: rgba(255, 95, 109, .22); box-shadow: inset 0 0 0 1px rgba(255, 95, 109, .55); opacity: 0; }
.ve-slot i { position: absolute; left: 3px; top: 3px; width: 18px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #ff9a7a, #6b3a5a); }
.ve-slot span { position: absolute; left: 25px; right: 6px; top: 7px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 4px); }
.ve-s1 { top: 16px; animation: ve-s1 12s ease-out infinite; }
.ve-s2 { top: 39px; animation: ve-s2 12s ease-out infinite; }
@keyframes ve-s1 { 0%, 43.9% { opacity: 0; transform: scale(1); } 44% { opacity: 1; transform: scale(1.08); } 47%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; } }
@keyframes ve-s2 { 0%, 83.9% { opacity: 0; transform: scale(1); } 84% { opacity: 1; transform: scale(1.08); } 87%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; } }

.ve-spur { position: absolute; left: 0; top: 76px; width: 240px; height: 36px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ve-wellen i { position: absolute; top: 50%; width: 2px; border-radius: 1px; background: #ff8f9b; transform: translateY(-50%); opacity: .75; }
.ve-kopf { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; animation: ve-kopf 12s linear infinite; }
@keyframes ve-kopf { from { transform: translateX(0); } to { transform: translateX(238px); } }

.ve-auswahl { position: absolute; top: 76px; height: 36px; width: 0; border-radius: 4px; background: rgba(255, 210, 63, .2); box-shadow: inset 0 0 0 1.5px #ffd23f; opacity: 0; }
.ve-auswahl i { position: absolute; top: -2px; bottom: -2px; width: 5px; border-radius: 2px; background: #ffd23f; }
.ve-auswahl i:first-child { left: -2px; }
.ve-auswahl i:last-child { right: -2px; }
.ve-a1 { left: 30px; animation: ve-a1 12s ease-in-out infinite; }
.ve-a2 { left: 128px; animation: ve-a2 12s ease-in-out infinite; }
@keyframes ve-a1 { 0%, 6% { opacity: 0; width: 0; } 8% { opacity: 1; width: 0; } 22% { opacity: 1; width: 64px; } 32% { opacity: 1; width: 64px; } 34%, 100% { opacity: 0; width: 64px; } }
@keyframes ve-a2 { 0%, 50% { opacity: 0; width: 0; } 52% { opacity: 1; width: 0; } 64% { opacity: 1; width: 70px; } 72% { opacity: 1; width: 70px; } 74%, 100% { opacity: 0; width: 70px; } }

.ve-schere { position: absolute; top: 62px; font-size: 13px; color: #fff; opacity: 0; text-shadow: 0 2px 6px #000; }
.ve-sch1 { left: 56px; animation: ve-sch1 12s ease-out infinite; }
.ve-sch2 { left: 157px; animation: ve-sch2 12s ease-out infinite; }
@keyframes ve-sch1 { 0%, 23% { opacity: 0; transform: translateY(-6px) rotate(0); } 25% { opacity: 1; transform: translateY(0) rotate(0); } 27% { transform: translateY(0) rotate(-25deg); } 29% { transform: translateY(0) rotate(0); } 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes ve-sch2 { 0%, 63% { opacity: 0; transform: translateY(-6px) rotate(0); } 65% { opacity: 1; transform: translateY(0) rotate(0); } 67% { transform: translateY(0) rotate(-25deg); } 69% { transform: translateY(0) rotate(0); } 71% { opacity: 1; } 73%, 100% { opacity: 0; } }

.ve-flug { position: absolute; top: 76px; height: 36px; border-radius: 4px; transform-origin: 0 0; opacity: 0; background: rgba(255, 95, 109, .35) repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 4px) center / 100% 40% no-repeat; box-shadow: inset 0 0 0 1.5px #ff5f6d, 0 8px 16px -6px #000; }
.ve-f1 { left: 30px; width: 64px; animation: ve-f1 12s cubic-bezier(.5, 0, .3, 1) infinite; }
.ve-f2 { left: 128px; width: 70px; animation: ve-f2 12s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes ve-f1 { 0%, 31.9% { opacity: 0; transform: none; } 32% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translate(0, -8px); } 44% { opacity: 1; transform: translate(106px, -60px) scale(1.5625, .5); } 44.1%, 100% { opacity: 0; transform: translate(106px, -60px) scale(1.5625, .5); } }
@keyframes ve-f2 { 0%, 71.9% { opacity: 0; transform: none; } 72% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translate(0, -8px); } 84% { opacity: 1; transform: translate(8px, -37px) scale(1.4286, .5); } 84.1%, 100% { opacity: 0; transform: translate(8px, -37px) scale(1.4286, .5); } }

/* ── PAP Engine: Karte malen, Figuren setzen, Gespräch, Spielen (12 s) ──── */
.szene-pe { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #3b1e33 0%, #150b14 76%); }
.pe-buehne { position: relative; width: 240px; height: 96px; }
.pe-werkzeuge { position: absolute; left: 0; top: 8px; width: 22px; height: 80px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 6px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pe-werkzeuge i { font-style: normal; font-size: 10px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 4px; }
.pe-w1 { animation: pe-w1 12s steps(1, end) infinite; }
.pe-w2 { animation: pe-w2 12s steps(1, end) infinite; }
.pe-w3 { animation: pe-w3 12s steps(1, end) infinite; }
.pe-w4 { color: #ffd23f; animation: pe-w4 12s steps(1, end) infinite; }
@keyframes pe-w1 { 0% { background: rgba(255, 126, 157, .45); } 32%, 100% { background: transparent; } }
@keyframes pe-w2 { 0% { background: transparent; } 32% { background: rgba(255, 126, 157, .45); } 42%, 100% { background: transparent; } }
@keyframes pe-w3 { 0% { background: transparent; } 42% { background: rgba(255, 126, 157, .45); } 58%, 100% { background: transparent; } }
@keyframes pe-w4 { 0% { background: transparent; } 58% { background: rgba(255, 210, 63, .35); } 96%, 100% { background: transparent; } }

.pe-karte { position: absolute; left: 30px; top: 8px; width: 128px; height: 80px; border-radius: 4px; overflow: hidden; background-color: #1d1420; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 16px 16px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .15); animation: pe-rahmen 12s linear infinite; }
@keyframes pe-rahmen { 0%, 58% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .15); } 60%, 94% { box-shadow: 0 0 0 1.5px #ffd23f, 0 0 14px rgba(255, 210, 63, .35); } 96%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .15); } }
.pe-k { position: absolute; width: 16px; height: 16px; opacity: 0; animation: pe-malen 12s ease-out infinite; display: grid; place-items: center; }
.pe-k b { font-size: 11px; line-height: 1; font-weight: 400; }
.pe-gras { background: #4f9a3c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pe-weg { background: #d9b26f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.pe-wasser { background: #3f8fd6; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .18); }
@keyframes pe-malen { 0% { opacity: 0; transform: scale(.4); } 1.5% { opacity: 1; transform: scale(1.15); } 3% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(1); } }

.pe-npc, .pe-held { position: absolute; top: 32px; width: 16px; height: 16px; display: grid; place-items: center; font-size: 12px; line-height: 1; opacity: 0; }
.pe-npc { left: 96px; animation: pe-npc 12s ease-out infinite; }
.pe-held { left: 0; animation: pe-held 12s linear infinite; }
@keyframes pe-npc { 0%, 33% { opacity: 0; transform: translateY(-10px); } 36% { opacity: 1; transform: translateY(0); } 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes pe-held {
  0%, 37% { opacity: 0; transform: translate(0, -10px); }
  40% { opacity: 1; transform: translate(0, 0); }
  62% { transform: translate(0, 0); }
  66% { transform: translate(16px, -2px); } 70% { transform: translate(32px, 0); } 74% { transform: translate(48px, -2px); }
  78% { transform: translate(64px, 0); } 82% { transform: translate(80px, 0); }
  94% { opacity: 1; transform: translate(80px, 0); } 97%, 100% { opacity: 0; transform: translate(80px, 0); } }
.pe-blase { position: absolute; left: 86px; top: 12px; padding: 2px 5px; border-radius: 6px; background: #fff; color: #2a1a26; font-size: 8px; font-weight: 700; white-space: nowrap; opacity: 0; transform-origin: 30% 100%; animation: pe-blase 12s ease-out infinite; }
@keyframes pe-blase { 0%, 83% { opacity: 0; transform: scale(.3); } 85% { opacity: 1; transform: scale(1.1); } 87%, 93% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }

.pe-panel { position: absolute; left: 166px; top: 8px; width: 74px; height: 80px; border-radius: 6px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pe-titel { position: absolute; left: 6px; top: 5px; font-size: 7.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ffb3c6; }
.pe-zeile { position: absolute; left: 5px; right: 5px; top: 18px; height: 22px; border-radius: 4px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.pe-text { position: absolute; left: 4px; top: 3px; width: 0; overflow: hidden; white-space: normal; font-size: 7.5px; line-height: 1.2; color: #fff; animation: pe-tippen 12s steps(18, end) infinite; height: 18px; }
.pe-text { width: 58px; clip-path: inset(0 100% 0 0); }
@keyframes pe-tippen { 0%, 43% { clip-path: inset(0 100% 0 0); } 52% { clip-path: inset(0 0 0 0); } 94% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 100% 0 0); } }
.pe-antwort { top: 43px; height: 12px; background: transparent; font-size: 7px; color: #ffb3c6; padding-left: 4px; line-height: 12px; opacity: 0; animation: pe-antwort 12s ease-out infinite; }
@keyframes pe-antwort { 0%, 53% { opacity: 0; } 55%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pe-spielen { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 7.5px; font-weight: 800; color: #2a1a26; background: #ffd23f; animation: pe-spielen 12s ease-out infinite; }
@keyframes pe-spielen { 0%, 57% { transform: scale(1); filter: none; } 58.5% { transform: scale(.88); filter: brightness(1.2); } 60.5% { transform: scale(1.05); } 62%, 100% { transform: scale(1); filter: none; } }

/* ── JamSync: zwei Geräte, ein Raum, Spuren wandern hin und her (10 s) ──── */
.szene-js { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 110% at 50% 0%, #34174a 0%, #130a1c 76%); }
.js-buehne { position: relative; width: 240px; height: 110px; }
.js-geraet { position: absolute; top: 4px; width: 64px; height: 102px; border-radius: 11px; background: linear-gradient(170deg, #2b1f3d, #18111f); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 12px 24px -10px #000; overflow: hidden; }
.js-a { left: 6px; }
.js-b { right: 6px; }
.js-name { position: absolute; left: 0; right: 0; top: 7px; text-align: center; font-size: 7.5px; font-weight: 700; color: #f1c9ff; letter-spacing: .03em; }
.js-rec { position: absolute; left: 50%; top: 20px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #5a2a3a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); animation: js-rec 10s linear infinite; }
.js-rec-b { animation-name: js-rec-b; }
@keyframes js-rec { 0%, 2% { background: #5a2a3a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); } 3%, 27% { background: #ff3b5c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 12px #ff3b5c; } 28%, 100% { background: #5a2a3a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); } }
@keyframes js-rec-b { 0%, 46% { background: #5a2a3a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); } 47%, 65% { background: #ff3b5c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 12px #ff3b5c; } 66%, 100% { background: #5a2a3a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); } }
.js-spur { position: absolute; left: 6px; right: 6px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.js-melodie { top: 44px; }
.js-trommel { top: 66px; }
.js-ton { position: absolute; top: 4px; width: 7px; height: 8px; border-radius: 2px; opacity: 0; animation: 10s ease-out infinite; }
.js-trommel .js-ton { border-radius: 50%; width: 7px; height: 7px; }
/* A nimmt die Melodie auf (3–27 %), B das Schlagzeug (47–65 %) */
.js-auf { animation-name: js-auf; }
.js-auf2 { animation-name: js-auf2; }
@keyframes js-auf { 0%, 3% { opacity: 0; transform: scale(.3); } 6% { opacity: 1; transform: scale(1.2); } 8%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes js-auf2 { 0%, 44% { opacity: 0; transform: scale(.3); } 47% { opacity: 1; transform: scale(1.2); } 49%, 95% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
/* Ankommende Spuren: Melodie bei B ab 42 %, Schlagzeug bei A ab 78 % */
.js-an1 { animation-name: js-an1; animation-delay: 0s !important; }
.js-an2 { animation-name: js-an2; animation-delay: 0s !important; }
@keyframes js-an1 { 0%, 41% { opacity: 0; } 43%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes js-an2 { 0%, 77% { opacity: 0; } 79%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
.js-ankunft { animation: js-blitz 10s ease-out infinite; }
.js-b .js-ankunft { animation-name: js-blitz-b; }
@keyframes js-blitz { 0%, 77% { box-shadow: none; } 79% { box-shadow: 0 0 0 1.5px #3fe0c5, 0 0 10px #3fe0c5; } 84%, 100% { box-shadow: none; } }
@keyframes js-blitz-b { 0%, 41% { box-shadow: none; } 43% { box-shadow: 0 0 0 1.5px #e86bff, 0 0 10px #e86bff; } 48%, 100% { box-shadow: none; } }
/* Zum Schluss spielen beide zusammen */
.js-kopf { position: absolute; left: 8px; top: 42px; width: 2px; height: 42px; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0; animation: js-kopf 10s linear infinite; }
@keyframes js-kopf { 0%, 82% { opacity: 0; transform: translateX(0); } 83% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; transform: translateX(46px); } 96%, 100% { opacity: 0; transform: translateX(46px); } }

.js-mitte { position: absolute; left: 76px; right: 76px; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 0; }
.js-raum { font-size: 8px; font-weight: 700; color: #f1c9ff; padding: 3px 6px; border-radius: 10px; background: rgba(232, 107, 255, .16); box-shadow: inset 0 0 0 1px rgba(232, 107, 255, .4); white-space: nowrap; }
.js-leute { display: flex; align-items: center; gap: 3px; font-size: 7.5px; color: #cfc2dc; white-space: nowrap; }
.js-leute i { width: 6px; height: 6px; border-radius: 50%; background: #3fe0a8; box-shadow: 0 0 6px #3fe0a8; animation: js-da 2s ease-in-out infinite; }
.js-leute i + i { animation-delay: -1s; }
@keyframes js-da { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Fliegende Noten: Bogen über die Mitte, A → B (28–42 %), B → A (66–78 %) */
.js-note { position: absolute; top: 46px; left: 52px; font-size: 13px; color: #e86bff; text-shadow: 0 0 8px #e86bff; opacity: 0; }
.js-n1 { animation: js-hin 10s ease-in-out infinite; }
.js-n2 { animation: js-hin 10s ease-in-out infinite; animation-delay: .3s; }
.js-n3 { animation: js-hin 10s ease-in-out infinite; animation-delay: .6s; }
@keyframes js-hin { 0%, 27% { opacity: 0; transform: translate(0, 0); } 29% { opacity: 1; } 34% { transform: translate(64px, -30px); } 39% { opacity: 1; } 40% { opacity: 0; transform: translate(128px, 0); } 100% { opacity: 0; transform: translate(128px, 0); } }
.js-r { left: 176px; top: 68px; font-size: 8px; color: #3fe0c5; text-shadow: 0 0 8px #3fe0c5; }
.js-r1 { animation: js-her 10s ease-in-out infinite; }
.js-r2 { animation: js-her 10s ease-in-out infinite; animation-delay: .3s; }
.js-r3 { animation: js-her 10s ease-in-out infinite; animation-delay: .6s; }
@keyframes js-her { 0%, 65% { opacity: 0; transform: translate(0, 0); } 67% { opacity: 1; } 71% { transform: translate(-64px, -34px); } 76% { opacity: 1; } 77% { opacity: 0; transform: translate(-128px, 0); } 100% { opacity: 0; transform: translate(-128px, 0); } }