/* ================================================================================================================================ */
/* Oktoberfest (Spec docs/superpowers/specs/2026-10-24-oktoberfest-theme-design.md, B/C/D; frontend/js/quizStage/themeAnim/oktoberfest/)   */
/* Nur transform und opacity. Elemente in der SVG-Szene drehen und skalieren um ihren Ursprung (0 0), den ein übergeordnetes translate()   */
/* setzt (Kapelle, Figuren, Krüge); Teile der Kulisse (Arme, Herzen) um den Drehpunkt im style.                                       */
/* ================================================================================================================================ */

.oka-scene {
  position: absolute;
  inset: 0;
}
.oka-scene :is(.oka-tw, .oka-mu, .oka-slide, .oka-glint, .oka-note, .oka-pen, .oka-heart, .oka-heart-lit, .oka-gear, .oka-hglint, .oka-hshade,
  .oka-drip, .oka-ember, .oka-smoke, .oka-spark, .oka-warm, .oka-wipe, .oka-swoosh, .oka-garm, .oka-arm, .oka-leg, .oka-body, .oka-wobble,
  .oka-fall, .oka-run, .oka-conga, .oka-hop, .oka-hflight, .oka-hspin, .oka-flyx, .oka-flyy, .oka-flyr, .oka-shard, .oka-rowmug,
  .oka-tapgrp, .oka-foam, .oka-spill, .oka-hammer, .oka-hit, .oka-hitring, .oka-hitdrop, .oka-facepalm, .oka-spray, .oka-drop,
  .oka-clinkstar, .oka-bubble, .oka-pretzel, .oka-exmug, .oka-stars, .oka-starring, .oka-tubabell) {
  transform-box: view-box;
  transform-origin: 0 0;
}
.oka-scene :is(.oka-stream, .oka-beer, .oka-exbeer, .oka-puddle) {
  transform-box: fill-box;
}

/* Lichterkette: funkelt sanft und versetzt (je Birne höchstens zwei Wechsel in 2,4–4,8 s). */
.oka-tw {
  opacity: 0.25;
  animation: oka-twinkle var(--d, 3.4s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes oka-twinkle {
  0%, 100% { opacity: 0.18; }
  30% { opacity: 0.9; }
  48% { opacity: 0.5; }
  68% { opacity: 0.78; }
}
.is-static .oka-tw { opacity: 0.5; }

/* Blaskapelle: schunkelt leise, Posaune und Trommelstöcke spielen, Messing blitzt selten auf. */
.oka-mu { animation: oka-sway var(--d, 2.8s) var(--dl, 0s) infinite ease-in-out; }
@keyframes oka-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
.oka-slide { animation: oka-slide 2.6s infinite ease-in-out; }
@keyframes oka-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(9px); }
}
.oka-stick--l { animation: oka-stick 0.62s infinite ease-in-out; }
.oka-stick--r { animation: oka-stick 0.62s -0.31s infinite ease-in-out; }
@keyframes oka-stick {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}
.oka-tubabell { animation: oka-tuba 2.6s infinite ease-in-out; }
@keyframes oka-tuba {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.oka-glint {
  opacity: 0;
  animation: oka-glint var(--d, 5.4s) var(--dl, 0s) infinite ease-out;
}
@keyframes oka-glint {
  0%, 88%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  93% { opacity: 1; transform: scale(1) rotate(25deg); }
}
.oka-note { opacity: 0; }
@keyframes oka-note {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -72px) scale(1) rotate(14deg); }
}
/* C5 Pause: Kapelle schunkelt kräftiger, Noten steigen langsam auf. */
.is-pause .oka-mu,
.is-dance .oka-mu { animation: oka-schunkel 1.7s var(--dl, 0s) infinite ease-in-out; }
@keyframes oka-schunkel {
  0%, 100% { transform: translateX(-4px) rotate(-5deg); }
  50% { transform: translateX(4px) rotate(5deg); }
}
.is-pause .oka-note,
.is-dance .oka-note { animation: oka-note 3.6s calc(var(--i) * 420ms) infinite ease-out; }
/* C1 Tusch (und Applaus in C4): die Kapelle hüpft, Noten und Messingblitze (höchstens 3 je Sekunde). */
.is-play .oka-mu { animation: oka-play 0.5s infinite ease-in-out; }
@keyframes oka-play {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.is-play .oka-note { animation: oka-note 1.8s calc(var(--i) * 190ms) infinite ease-out; }
.is-play .oka-glint { animation-duration: 1.5s; }

/* Hendl-Grill: Zahnräder drehen, Glanz wandert über die Hendl (Pause: doppelt so schnell), Glut flackert, Rauch und Funken steigen. */
.oka-gear { animation: oka-spin 9s var(--dl, 0s) linear infinite; }
@keyframes oka-spin {
  to { transform: rotate(360deg); }
}
.is-pause .oka-gear { animation-duration: 4.5s; }
.oka-hglint,
.oka-hshade {
  opacity: 0;
  animation: oka-hglint var(--d, 7s) var(--dl, 0s) infinite linear;
}
.oka-hshade { animation-name: oka-hshade; }
@keyframes oka-hglint {
  0% { opacity: 0; transform: translateX(-14px); }
  15% { opacity: 0.8; }
  70% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(26px); }
}
@keyframes oka-hshade {
  0% { opacity: 0; transform: translateX(26px); }
  20% { opacity: 0.55; }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(-14px); }
}
.is-pause :is(.oka-hglint, .oka-hshade) { animation-duration: calc(var(--d, 7s) * 0.5); }
.oka-hearth {
  opacity: 0.5;
  animation: oka-flick 2.4s infinite ease-in-out alternate;
}
.oka-hearth--low { animation-duration: 1.7s; }
@keyframes oka-flick {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.5; }
}
.oka-ember {
  opacity: 0.2;
  animation: oka-ember var(--d, 1.6s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes oka-ember {
  0%, 100% { opacity: 0.1; }
  40% { opacity: 0.75; }
  60% { opacity: 0.35; }
}
.is-pause .oka-ember { animation-name: oka-ember-strong; }
@keyframes oka-ember-strong {
  0%, 100% { opacity: 0.35; }
  40% { opacity: 0.95; }
  60% { opacity: 0.6; }
}
.oka-smoke {
  opacity: 0;
  animation: oka-smoke var(--d, 13s) var(--dl, 0s) infinite ease-out;
}
@keyframes oka-smoke {
  0%, 52% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  58% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--dx), -150px) scale(2.1); }
}
.oka-spark {
  opacity: 0;
  animation: oka-spark var(--d, 3s) var(--dl, 0s) infinite ease-out;
}
@keyframes oka-spark {
  0%, 60% { opacity: 0; transform: translate(0, 0); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -90px); }
}
.oka-drip {
  opacity: 0;
  animation: oka-drip var(--d, 4s) var(--dl, 0s) infinite ease-in;
}
@keyframes oka-drip {
  0%, 50% { opacity: 0; transform: translateY(0); }
  56% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(46px); }
}

/* Lebkuchenherzen und Wimpel schaukeln (B5); C2: ein Herz leuchtet in der Farbe der richtigen Antwort. */
.oka-heart { animation: oka-swing var(--d, 3.6s) var(--dl, 0s) infinite ease-in-out; }
@keyframes oka-swing {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.4deg); }
}
.oka-pen { animation: oka-pen var(--d, 3.2s) var(--dl, 0s) infinite ease-in-out; }
@keyframes oka-pen {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.oka-heart-lit { opacity: 0; }
.oka-heart.is-lit .oka-heart-lit { animation: oka-lit 4200ms ease-out both; }
@keyframes oka-lit {
  0% { opacity: 0; }
  10%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Ausschank: Der Wirt zapft (Arm wippt, Strahl, Schaum), der Krug wandert auf den Tresen. */
.is-tapping .oka-warm { animation: oka-pump 1.1s infinite ease-in-out; }
@keyframes oka-pump {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-3.4deg); }
}
.oka-tapgrp { opacity: 0; }
.oka-tapgrp.is-tap { animation: oka-tap-show 2700ms linear both; }
@keyframes oka-tap-show {
  0% { opacity: 0; }
  4%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
.oka-stream { opacity: 0; transform-origin: 50% 0; }
.is-tap .oka-stream { animation: oka-stream 2700ms linear both; }
@keyframes oka-stream {
  0% { opacity: 1; transform: scaleY(0); }
  8%, 72% { opacity: 1; transform: scaleY(1); }
  78%, 100% { opacity: 0; transform: scaleY(0.2); }
}
.oka-beer { transform-origin: 50% 100%; transform: scaleY(0.03); }
/* Zapfen: leeres Glas, das Bier steigt von unten (0–72 %), erst danach wächst die Schaumkrone (72–96 %) und läuft leicht über. */
.is-tap .oka-beer { animation: oka-beer 2700ms ease-out both; }
@keyframes oka-beer {
  0%, 6% { transform: scaleY(0.03); }
  72%, 100% { transform: scaleY(1); }
}
.oka-foam { opacity: 0; transform-origin: 0 -62px; transform: scaleY(0.04); }
.is-tap .oka-foam { animation: oka-foam 2700ms ease-out both; }
@keyframes oka-foam {
  0%, 71% { opacity: 0; transform: scaleY(0.04); }
  73% { opacity: 1; transform: scaleY(0.06); }
  88% { opacity: 1; transform: scaleY(0.85); }
  95% { opacity: 1; transform: scale(1.05, 1.12); }
  100% { opacity: 1; transform: scale(1, 1); }
}
.oka-spill { opacity: 0; }
.is-tap .oka-spill { animation: oka-spill 2700ms linear both; }
@keyframes oka-spill {
  0%, 90% { opacity: 0; transform: translateY(0); }
  95% { opacity: 1; }
  100% { opacity: 1; transform: translateY(12px); }
}
.oka-rowmug { opacity: 0; }
.oka-rowmug.is-on { opacity: 1; animation: oka-rowin 900ms ease-in-out both; }
@keyframes oka-rowin {
  0% { opacity: 1; transform: translateX(var(--dx)); }
  100% { opacity: 1; transform: translateX(0); }
}
.oka-rowmug.is-grab { animation: oka-grab 650ms ease-in both; }
@keyframes oka-grab {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 1; transform: translate(calc(var(--gx, 0px) * 0.6), calc(var(--gy, 0px) * 0.4 - 60px)) scale(0.88); }
  100% { opacity: 0; transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(0.8); }
}
/* C5 Pause: Der Wirt wischt den Tresen. */
.oka-swoosh { opacity: 0; }
.is-pause .oka-wipe { animation: oka-wipe 2.4s infinite ease-in-out; }
@keyframes oka-wipe {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(16deg); }
}
.is-pause .oka-swoosh { animation: oka-swoosh 2.4s infinite ease-in-out; }
@keyframes oka-swoosh {
  0%, 100% { opacity: 0; transform: translateX(-50px); }
  50% { opacity: 0.8; transform: translateX(50px); }
}

/* C1: Holzhammer aufs Fass. */
.oka-hammer.is-on { animation: oka-hammer 1500ms ease-in-out both; }
@keyframes oka-hammer {
  0% { opacity: 0; transform: rotate(-45deg); }
  10% { opacity: 1; }
  45% { transform: rotate(-50deg); }
  58% { transform: rotate(30deg); }
  64% { transform: rotate(14deg); }
  72% { transform: rotate(30deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: rotate(22deg); }
}
.oka-hit.is-on { animation: oka-hitpop 800ms ease-out both; }
@keyframes oka-hitpop {
  0% { opacity: 0; transform: scale(0.3); }
  15% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
.oka-hit.is-on .oka-hitring { animation: oka-ring 700ms ease-out both; }
@keyframes oka-ring {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
.oka-hit.is-on .oka-hitdrop { animation: oka-hitdrop 800ms ease-out both; }
@keyframes oka-hitdrop {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)); }
}

/* Sprechblasen. */
.oka-bubble.is-on { animation: oka-pop 300ms ease-out both; }
@keyframes oka-pop {
  0% { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bierbänke: Die Krugarme wippen im Takt; beim Anstoßen heben sich alle Krüge, die Paare klirren zweimal. */
.oka-garm { animation: oka-gbob var(--d, 1.7s) var(--dl, 0s) infinite ease-in-out; }
@keyframes oka-gbob {
  0%, 100% { transform: rotate(calc(var(--dir) * -2deg)); }
  50% { transform: rotate(calc(var(--dir) * 2.4deg)); }
}
.is-toast .oka-garm { animation: oka-toast 2400ms ease-in-out both; }
@keyframes oka-toast {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-40px) rotate(var(--raise)); }
  38% { transform: translateY(-40px) rotate(calc(var(--raise) * 1.7)); }
  46% { transform: translateY(-42px) rotate(calc(var(--raise) * 0.9)); }
  54% { transform: translateY(-40px) rotate(calc(var(--raise) * 1.7)); }
  64% { transform: translateY(-40px) rotate(var(--raise)); }
  100% { transform: translateY(0) rotate(0deg); }
}
.is-clap .oka-garm { animation: oka-clap 0.42s infinite ease-in-out; }
/* B4 Schluck: Ein Gast führt den Krug aufrecht zum Mund, kippt ihn langsam um den Rand zum Mund hin, trinkt und stellt ihn ab. */
.oka-garm.is-sip { animation: oka-sip 3000ms ease-in-out both; transform-origin: var(--sox) var(--soy) !important; }
/* Trinken wie aus einer Maß: aufrecht zum Mund (0–24 %), langsam bis höchstens ~28° zum Mund hin kippen (24–46 %), halten (bis 72 %), zurückkippen, absetzen. */
@keyframes oka-sip {
  0% { transform: translate(0, 0) rotate(0deg); }
  24% { transform: translate(var(--six), var(--siy)) rotate(0deg); }
  46% { transform: translate(var(--six), var(--siy)) rotate(var(--sia)); }
  72% { transform: translate(var(--six), var(--siy)) rotate(calc(var(--sia) * 1.07)); }
  84% { transform: translate(var(--six), var(--siy)) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes oka-clap {
  0%, 100% { transform: translateY(-34px) rotate(calc(var(--raise) * 0.5)); }
  50% { transform: translateY(-40px) rotate(calc(var(--raise) * 0.9)); }
}
.oka-spray.is-on .oka-drop { animation: oka-drop 1000ms ease-out both; }
@keyframes oka-drop {
  0% { opacity: 1; transform: translate(0, 0); }
  60% { opacity: 1; transform: translate(var(--x), var(--y)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)); }
}
.oka-spray.is-on .oka-clinkstar { animation: oka-hitpop 600ms ease-out both; }

/* Figuren auf der Fußlinie (Bedienung, Betrunkener, Hendl-Raub): Fahrt, Gang, Wanken. */
.oka-run.is-move { animation: oka-move var(--ms, 1000ms) linear both; }
@keyframes oka-move {
  from { transform: translateX(var(--x0, 0px)); }
  to { transform: translateX(var(--x1, 0px)); }
}
.oka-run:not(.is-move) { transform: translateX(2300px); }
.is-walk .oka-leg--l { animation: oka-step 0.6s ease-in-out infinite alternate; }
.is-walk .oka-leg--r { animation: oka-step 0.6s ease-in-out infinite alternate-reverse; }
@keyframes oka-step {
  from { transform: rotate(18deg); }
  to { transform: rotate(-18deg); }
}
.is-walk .oka-body { animation: oka-bob 0.6s ease-in-out infinite alternate; }
@keyframes oka-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
.oka-run:not(.oka-run--waitress).is-walk .oka-arm--l { animation: oka-armswing 0.6s ease-in-out infinite alternate; }
@keyframes oka-armswing {
  from { transform: rotate(14deg); }
  to { transform: rotate(-14deg); }
}
.oka-run--waitress .oka-wmugs { opacity: 0; }
.oka-run--waitress.is-loaded .oka-wmugs { opacity: 1; }
/* D1: stolpert, fällt, steht auf, verbeugt sich. */
.oka-run--waitress.is-trip .oka-fall { animation: oka-trip 600ms cubic-bezier(0.5, 0, 0.8, 0.6) both; }
@keyframes oka-trip {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(7deg); }
  100% { transform: rotate(-88deg); }
}
.oka-run--waitress.is-up .oka-fall { animation: oka-up 900ms ease-in-out both; }
@keyframes oka-up {
  0% { transform: rotate(-88deg); }
  40% { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}
.oka-run--waitress.is-bow .oka-fall { animation: oka-bow 1800ms ease-in-out both; }
@keyframes oka-bow {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(-24deg); }
}
.oka-fly.is-on .oka-flyx { animation: oka-flyx 1000ms linear var(--dl, 0ms) both; }
.oka-fly.is-on .oka-flyy { animation: oka-flyy 1000ms var(--dl, 0ms) both; }
.oka-fly.is-on .oka-flyr { animation: oka-flyr 1000ms linear var(--dl, 0ms) both; }
@keyframes oka-flyx {
  from { transform: translateX(0); }
  to { transform: translateX(var(--lx)); }
}
@keyframes oka-flyy {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  40% { transform: translateY(var(--up)); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--ly)); }
}
@keyframes oka-flyr {
  0% { opacity: 1; transform: rotate(0deg); }
  94% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--r)); }
}
.oka-shards { transform: translate(var(--lx), var(--ly)); }
.oka-shard { opacity: 0; }
.oka-fly.is-on .oka-shard { animation: oka-shard 2600ms calc(var(--dl, 0ms) + 950ms) ease-out both; }
@keyframes oka-shard {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
  6% { opacity: 1; }
  30% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  85% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
.oka-puddle { opacity: 0; transform-origin: 50% 50%; }
.oka-puddle.is-on { animation: oka-puddle 9500ms ease-out both; }
@keyframes oka-puddle {
  0%, 10% { opacity: 0; transform: scaleX(0.05); }
  30% { opacity: 0.85; transform: scaleX(1); }
  85% { opacity: 0.85; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
.oka-facepalm.is-on { animation: oka-pop 400ms ease-out both; }
/* Betrunkener (C3 sucht den Ausschank, D2 stößt gegen den Pfosten): torkelt, Sternchen kreisen über dem Kopf. */
.oka-run--drunk .oka-wobble { animation: oka-drunk 1.5s ease-in-out infinite alternate; }
@keyframes oka-drunk {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
.oka-run--drunk.is-search.is-move { animation: oka-search 14000ms linear both; }
@keyframes oka-search {
  0% { transform: translateX(-220px); }
  53% { transform: translateX(1380px); }
  62% { transform: translateX(1405px); }
  100% { transform: translateX(-280px); }
}
.oka-run--drunk.is-search .oka-fall { animation: oka-flip 14000ms linear both; }
@keyframes oka-flip {
  0%, 52% { scale: 1 1; transform: rotate(0deg); }
  56%, 61% { scale: 1 1; transform: rotate(8deg); }
  62% { scale: 1 1; transform: rotate(0deg); }
  62.4%, 100% { scale: -1 1; transform: rotate(0deg); }
}
.oka-run--drunk.is-post.is-move { animation: oka-post 13000ms linear both; }
@keyframes oka-post {
  0% { transform: translateX(-220px); }
  55% { transform: translateX(1400px); }
  62% { transform: translateX(1368px); }
  100% { transform: translateX(2200px); }
}
.oka-run--drunk.is-post .oka-fall { animation: oka-bump 13000ms linear both; }
@keyframes oka-bump {
  0%, 54% { transform: rotate(0deg); }
  56% { transform: rotate(-17deg); }
  62% { transform: rotate(-9deg); }
  70%, 100% { transform: rotate(0deg); }
}
.oka-stars.is-on .oka-starring { animation: oka-spin 1.1s linear infinite; }
/* D4 Hendl-Raub. */
.oka-run--thief.is-move { animation: oka-thief 10000ms linear both; }
@keyframes oka-thief {
  0% { transform: translateX(-140px); }
  10% { transform: translateX(150px); }
  17% { transform: translateX(150px); }
  100% { transform: translateX(2200px); }
}
.oka-run--thief.is-thief:not(.is-walk) .oka-leg { animation: none; }
.oka-run--thief .oka-hendl-held { opacity: 0; }
.oka-run--thief.is-held .oka-hendl-held { opacity: 1; }
.oka-run--griller.is-move { animation: oka-griller 8300ms linear both; }
@keyframes oka-griller {
  from { transform: translateX(-140px); }
  to { transform: translateX(2150px); }
}
.oka-run--thief.is-walk :is(.oka-leg--l, .oka-leg--r, .oka-body),
.oka-run--griller.is-walk :is(.oka-leg--l, .oka-leg--r, .oka-body) { animation-duration: 0.36s; }
.oka-hflight.is-on { animation: oka-hflight 760ms ease-in both; }
@keyframes oka-hflight {
  0% { opacity: 1; transform: translate(0, 0); }
  45% { opacity: 1; transform: translate(-2px, -90px); }
  100% { opacity: 1; transform: translate(-6px, 156px); }
}
.oka-hflight.is-on .oka-hspin { animation: oka-spin 760ms linear; }
/* C4 Polonaise. */
.oka-conga.is-on { animation: oka-conga 6200ms linear both; }
@keyframes oka-conga {
  from { transform: translateX(-60px); }
  to { transform: translateX(2300px); }
}
.oka-hop { animation: oka-hop 0.5s var(--dl, 0s) infinite ease-in-out alternate; }
@keyframes oka-hop {
  from { transform: translateY(0); }
  to { transform: translateY(-24px); }
}
.oka-conga:not(.is-on) { transform: translateX(-3000px); }
/* Brezen-Konfetti. */
.oka-pretzel { opacity: 0; }
.oka-pretzel.is-on { animation: oka-pretzel 2600ms var(--dl, 0ms) ease-in both; }
@keyframes oka-pretzel {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--sw), var(--fall)) rotate(var(--r)); }
}

/* C4/D3 Ex-Figur: echte Teilnehmer-Figur (Kopie, ohne Schild) steht auf der Bierbank und ext einen Maßkrug (HTML in Kulissen-Einheiten). */
.oka-world {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1920px;
  height: 1080px;
  margin-left: -960px;
  transform-origin: 50% 100%;
  transform: scale(var(--s, 1));
}
.oka-ex {
  position: absolute;
  opacity: 0;
}
.oka-ex.is-on { animation: oka-exin 700ms ease-out both; }
@keyframes oka-exin {
  0% { opacity: 0; transform: translateY(60px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}
.oka-ex.is-on.is-off { animation: oka-exout 600ms ease-in both; }
@keyframes oka-exout {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(40px) scale(0.92); }
}
.pq-themeanim .oka-ex .pq-figure__body {
  width: calc(14.4 * var(--pq-k));
  height: auto;
}
.pq-themeanim .oka-ex .oka-standin {
  width: 140px;
  height: 310px;
}
.oka-ex.is-drink :is(.pq-figure__head, .pq-figure__helmet) { animation: oka-exhead 4300ms ease-in-out both; }
.oka-ex .oka-head { transform-box: view-box; transform-origin: 0 -165px; }
.oka-ex.is-drink .oka-head { animation: oka-exhead 4300ms ease-in-out both; }
@keyframes oka-exhead {
  0%, 100% { transform: rotate(0deg); }
  18%, 80% { transform: rotate(-16deg); }
}
.oka-exmug { opacity: 0; }
.oka-exmug.is-drink { animation: oka-exdrink 4300ms ease-in-out both; }
@keyframes oka-exdrink {
  0% { opacity: 1; transform: translate(var(--hx), var(--hy)) rotate(0deg); }
  16% { opacity: 1; transform: translate(var(--mx), var(--my)) rotate(-8deg); }
  30%, 82% { opacity: 1; transform: translate(var(--mx), var(--my)) rotate(-110deg); }
  100% { opacity: 1; transform: translate(var(--hx), var(--hy)) rotate(0deg); }
}
.oka-exmug.is-drink .oka-exbeer { transform-origin: 50% 100%; animation: oka-exbeer 4300ms linear both; }
@keyframes oka-exbeer {
  0%, 16% { transform: scaleY(1); }
  78%, 100% { transform: scaleY(0.02); }
}
/* Ex-Figur nie in der Bildmitte während einer Frage: gibt es dann gar nicht (das Modul zeigt sie nur in ruhigen Phasen). */
.pq-themeanim[data-phase="question"] .oka-ex { display: none; }

/* ================================================================================================================================ */
/* Oktoberfest auf den Handys (Spec E2; frontend/js/quizStage/themeAnim/phone.js, oktoberfest/ `variant: "mobile"`)                  */
/* ================================================================================================================================ */

/* Akzentstreifen: Wimpelkette neben dem Brezen-Symbol, kleiner Krug vor dem Menü, gelegentlich steigt Schaum auf. */
.pq-frame-accent--ok {
  position: relative;
  overflow: hidden;
}
.pq-frame-bunting {
  position: absolute;
  left: 40px;
  right: 92px;
  top: 0;
  height: 26px;
  color: rgb(255 255 255 / 0.55);
  pointer-events: none;
}
.pq-frame-pennant {
  position: absolute;
  width: 9px;
  height: 11px;
  margin-left: -4.5px;
  background: var(--c, #f1ede4);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: pq-pennant var(--d, 3.2s) var(--dl, 0s) ease-in-out infinite;
}
@keyframes pq-pennant {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
.pq-frame-accent--still .pq-frame-pennant {
  animation: none;
  transform: none;
}
.pq-frame-mug {
  position: absolute;
  right: 62px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.pq-frame-mug svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pq-frame-foam {
  position: absolute;
  right: 62px;
  bottom: 16px;
  width: 20px;
  height: 14px;
  pointer-events: none;
}
.pq-frame-foam[hidden],
.pq-frame-accent--still .pq-frame-foam { display: none; }
.pq-frame-foam i {
  position: absolute;
  bottom: 0;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}
.pq-frame-foam.is-on i { animation: pq-foam 1700ms ease-out var(--delay, 0ms) both; }
@keyframes pq-foam {
  0% { opacity: 0; transform: translate(0, 2px) scale(0.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(2px, -11px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .pq-frame-pennant { animation: none; transform: none; }
  .pq-frame-foam { display: none !important; }
}
@media (prefers-contrast: more) {
  .pq-frame-pennant { animation: none; transform: none; }
  .pq-frame-foam { display: none !important; }
}

/* Mobiles Pubquiz: zwei Maßkrüge unten links (stoßen an), Lebkuchenherz unten rechts, Trompete oben links (Tusch). */
.okm-pair {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 84px;
  height: 56px;
  --ok-glow: #ffd86b;
}
.okm-heart {
  position: absolute;
  right: 12px;
  bottom: 6px;
  width: 44px;
  height: 52px;
  --ok-glow: #ffd86b;
}
.okm-pair__glow,
.okm-heart__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ok-glow) 70%, transparent) 0, color-mix(in srgb, var(--ok-glow) 22%, transparent) 42%, transparent 68%);
  opacity: 0;
}
.okm-mug {
  position: absolute;
  bottom: 0;
  width: 36px;
  height: 46px;
  transform-origin: 50% 100%;
}
.okm-mug svg,
.okm-heart__in svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.okm-mug--a { left: 0; transform: rotate(-6deg); animation: okm-bob-a 4.4s ease-in-out infinite; }
.okm-mug--b { left: 40px; transform: rotate(6deg); animation: okm-bob-b 4.4s -2.2s ease-in-out infinite; }
@keyframes okm-bob-a {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes okm-bob-b {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(4deg); }
}
.okm-heart__in {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  animation: okm-swing 5.2s ease-in-out infinite;
}
@keyframes okm-swing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.okm-drops {
  position: absolute;
  left: 38px;
  top: 6px;
  width: 0;
  height: 0;
}
.okm-drops i {
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(43 36 48 / 0.55);
  opacity: 0;
}
/* Anstoßen: die Krüge kippen zueinander, klirren zweimal, Schaum spritzt, Schein in der Antwortfarbe. */
.okm-pair.is-on .okm-mug--a { animation: okm-clink-a 2800ms ease-in-out both; }
.okm-pair.is-on .okm-mug--b { animation: okm-clink-b 2800ms ease-in-out both; }
@keyframes okm-clink-a {
  0%, 8% { transform: rotate(-6deg); }
  26%, 40% { transform: rotate(13deg); }
  33% { transform: rotate(8deg); }
  58% { transform: rotate(13deg); }
  100% { transform: rotate(-6deg); }
}
@keyframes okm-clink-b {
  0%, 8% { transform: rotate(6deg); }
  26%, 40% { transform: rotate(-13deg); }
  33% { transform: rotate(-8deg); }
  58% { transform: rotate(-13deg); }
  100% { transform: rotate(6deg); }
}
.okm-pair.is-on .okm-drops i { animation: okm-drop 1300ms cubic-bezier(0.2, 0.7, 0.4, 1) calc(620ms + var(--i) * 40ms) both; }
@keyframes okm-drop {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 14px)) scale(0.5); }
}
.okm-pair.is-on .okm-pair__glow,
.okm-heart.is-on .okm-heart__glow { animation: okm-glow 2800ms ease-out both; }
@keyframes okm-glow {
  0% { opacity: 0; }
  20%, 55% { opacity: 1; }
  100% { opacity: 0; }
}
.okm-heart.is-on .okm-heart__in { animation: okm-pulse 2800ms ease-in-out both; }
@keyframes okm-pulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%, 50% { transform: rotate(0deg) scale(1.14); }
}
/* Tusch zum Rundenstart: Trompete oben links, Noten steigen auf (nur solange die Rundenkarte steht). */
.okm-tusch {
  position: absolute;
  left: 14px;
  top: 38px;
  width: 78px;
  height: 38px;
  opacity: 0;
  transform-origin: 20% 60%;
}
.okm-tusch[hidden] { display: none; }
.okm-tusch > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.okm-tusch.is-on { animation: okm-tusch 1700ms ease-out both; }
@keyframes okm-tusch {
  0% { opacity: 0; transform: translate(-14px, 4px) scale(0.6) rotate(-12deg); }
  12% { opacity: 1; transform: translate(0, 0) scale(1.08) rotate(0deg); }
  28%, 52% { transform: scale(1.1) rotate(-3deg); }
  40%, 64% { transform: scale(1) rotate(0deg); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}
.okm-notes {
  position: absolute;
  left: 70px;
  top: 6px;
  width: 0;
  height: 0;
}
.okm-note {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 17px;
  opacity: 0;
}
.okm-tusch.is-on .okm-note { animation: okm-note 1100ms ease-out calc(250ms + var(--i) * 230ms) both; }
@keyframes okm-note {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(14px + var(--i) * 12px), calc(-6px - var(--i) * 9px)) rotate(16deg); }
}

/* D5 Schuhplattler: Bursche und Madl (größer als die Gäste) tanzen in der Mitte der Laufbahn. Nur transform und opacity. */
.oka-spin { transform-origin: 0 0; transform-box: view-box; }
.oka-skirt { transform-box: view-box; transform-origin: 0 -110px; }
.oka-run--bursche.is-dance .oka-body { animation: oka-platt-hop 1.6s infinite ease-out; }
@keyframes oka-platt-hop {
  0%, 50%, 100% { transform: translateY(0); }
  12%, 62% { transform: translateY(-30px); }
  24%, 74% { transform: translateY(-6px); }
}
.oka-run--bursche.is-dance .oka-leg--l { animation: oka-platt-l 1.6s infinite ease-in-out; }
.oka-run--bursche.is-dance .oka-leg--r { animation: oka-platt-r 1.6s infinite ease-in-out; }
.oka-run--bursche.is-dance .oka-arm--l { animation: oka-platt-al 1.6s infinite ease-in-out; }
.oka-run--bursche.is-dance .oka-arm--r { animation: oka-platt-ar 1.6s infinite ease-in-out; }
@keyframes oka-platt-l {
  0%, 18%, 50%, 100% { transform: rotate(0deg); }
  30%, 40% { transform: rotate(62deg); }
}
@keyframes oka-platt-r {
  0%, 68%, 100% { transform: rotate(0deg); }
  80%, 90% { transform: rotate(-62deg); }
}
@keyframes oka-platt-al {
  0%, 18%, 50%, 100% { transform: rotate(0deg); }
  30%, 40% { transform: rotate(66deg); }
  60%, 66% { transform: rotate(-36deg); }
}
@keyframes oka-platt-ar {
  0%, 68%, 100% { transform: rotate(0deg); }
  80%, 90% { transform: rotate(-66deg); }
  14%, 20% { transform: rotate(36deg); }
}
.oka-run--madl.is-dance .oka-body { animation: oka-platt-bob 0.8s infinite ease-in-out alternate; }
@keyframes oka-platt-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
.oka-run--madl.is-dance .oka-spin,
.oka-run.is-turn .oka-spin { animation: oka-twirl 1.6s infinite ease-in-out; }
@keyframes oka-twirl {
  0%, 100% { transform: scaleX(1); }
  25%, 75% { transform: scaleX(0.08); }
  50% { transform: scaleX(-1); }
}
.oka-run.is-turn .oka-spin { animation-duration: 1.1s; }
.oka-run--madl.is-dance .oka-skirt,
.oka-run.is-turn .oka-skirt { animation: oka-flare 0.8s infinite ease-in-out alternate; }
@keyframes oka-flare {
  from { transform: scaleX(1); }
  to { transform: scaleX(1.4); }
}
.oka-run--madl.is-dance .oka-arm--l { animation: oka-platt-al 1.6s infinite ease-in-out; }
.oka-run--madl.is-dance .oka-arm--r { animation: oka-platt-ar 1.6s -0.8s infinite ease-in-out; }
.oka-run--bursche.is-bow .oka-fall,
.oka-run--madl.is-bow .oka-fall { animation: oka-bow 1800ms ease-in-out both; }