/* ================================================================================================================================ */
/* Weihnachten (Spec docs/superpowers/specs/2026-10-23-weihnachten-theme-design.md, B2/B3; frontend/js/quizStage/themeAnim/christmas/) */
/* Nur transform und opacity. Lichter wechseln höchstens alle 0,8 s die Helligkeit und laufen versetzt. Elemente in der SVG-Szene    */
/* drehen und skalieren um ihren Ursprung (0 0), den ein übergeordnetes translate() setzt.                                          */
/* ================================================================================================================================ */

.xma-scene {
  position: absolute;
  inset: 0;
}
.xma-scene :is(.xma-tw, .xma-glint, .xma-house, .xma-candle, .xma-flame, .xma-ember, .xma-starglow, .xma-starflare, .xma-starrays,
  .xma-bell, .xma-bellspark, .xma-shoot, .xma-wsnow, .xma-wsnow-sway, .xma-wsleigh, .xma-wsleigh__bob, .xma-deer, .xma-robin,
  .xma-robin__body, .xma-cat__tail, .xma-cat__breath, .xma-cat__eye, .xma-z, .xma-ginger, .xma-ginger__arm, .xma-gift__lid, .xma-gstar) {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Lichterkette und Baumlichter: funkeln sanft und versetzt. */
.xma-tw {
  opacity: 0.4;
  animation: xma-twinkle var(--d, 3s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes xma-twinkle {
  0%, 100% { opacity: 0.35; }
  30% { opacity: 1; }
  48% { opacity: 0.72; }
  68% { opacity: 0.95; }
}
.is-static .xma-tw { opacity: 0.8; }
/* Glanz wandert über die Kugeln. */
.xma-glint {
  fill: #fffdf2;
  opacity: 0;
  animation: xma-glint var(--d, 8s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes xma-glint {
  0%, 84%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  91% { opacity: 0.95; transform: scale(1) rotate(25deg); }
}

/* Dorffenster gehen langsam aus und wieder an (dunkle Scheibe über dem Licht der Kulisse). */
.xma-house {
  fill: #7d87a3;
  opacity: 0;
  animation: xma-house var(--d, 30s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes xma-house {
  0%, 52% { opacity: 0; }
  56%, 84% { opacity: 0.92; }
  88%, 100% { opacity: 0; }
}

/* Schnee im Fenster: zwei Bänder (fern, nah) wandern endlos nach unten, dazu leichtes Wiegen; in der Pause ein drittes, dichtes. */
.xma-wsnow--far { animation: xma-wsnow 22s linear infinite; }
.xma-wsnow--near { animation: xma-wsnow 13s linear infinite; }
.xma-wsnow--dense { animation: xma-wsnow 9s linear infinite; }
.pq-themeanim:not([data-phase="pause"]) .xma-wsnow--dense { display: none; }
@keyframes xma-wsnow {
  from { transform: translateY(0); }
  to { transform: translateY(var(--xm-glass-h, 340px)); }
}
.xma-wsnow-sway { animation: xma-sway 5s ease-in-out infinite alternate; }
@keyframes xma-sway {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}

/* Schlitten im Fensterhimmel (Scherenschnitt, am Mond vorbei). */
.xma-wsleigh.is-on { animation: xma-wsleigh 8000ms linear both; }
@keyframes xma-wsleigh {
  0% { transform: translateX(-200px); opacity: 0; }
  4% { opacity: 1; }
  96% { opacity: 1; }
  100% { transform: translateX(440px); opacity: 0; }
}
.xma-wsleigh__bob,
.xma-sleigh__bob { animation: xma-bob 0.9s ease-in-out infinite alternate; }
@keyframes xma-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}
.xma-deer {
  animation: xma-deer 0.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--k, 0) * -0.25s);
}
@keyframes xma-deer {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-5px) rotate(-3deg); }
}

/* Sternschnuppe im Fenster (Rundenstart). */
.xma-shoot { opacity: 0; }
.xma-shoot.is-on { animation: xma-shoot 1500ms cubic-bezier(0.4, 0, 0.7, 1) both; }
@keyframes xma-shoot {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(330px); opacity: 0; }
}

/* Glocken über der Mitte: hängen leicht schräg, schwingen zum Rundenstart; Funken drumherum. */
.xma-bell--l { transform: rotate(8deg); }
.xma-bell--r { transform: rotate(-8deg); }
.xma-bells.is-on .xma-bell--l { animation: xma-swing-l 3200ms ease-in-out both; }
.xma-bells.is-on .xma-bell--r { animation: xma-swing-r 3200ms ease-in-out both; }
@keyframes xma-swing-l {
  0%, 100% { transform: rotate(8deg); }
  10% { transform: rotate(-24deg); }
  23% { transform: rotate(22deg); }
  37% { transform: rotate(-17deg); }
  51% { transform: rotate(14deg); }
  65% { transform: rotate(-8deg); }
  80% { transform: rotate(11deg); }
}
@keyframes xma-swing-r {
  0%, 100% { transform: rotate(-8deg); }
  10% { transform: rotate(24deg); }
  23% { transform: rotate(-22deg); }
  37% { transform: rotate(17deg); }
  51% { transform: rotate(-25deg); }
  65% { transform: rotate(8deg); }
  80% { transform: rotate(-11deg); }
}
.xma-bellspark {
  fill: #ffe38a;
  opacity: 0;
}
.xma-bellsparks.is-on .xma-bellspark { animation: xma-pop 1400ms ease-out calc(var(--i) * 260ms) 2 both; }
@keyframes xma-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(30deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(60deg); }
}

/* Baumstern: glimmt; im Endstand strahlt er mit Strahlen auf. */
.xma-starglow { animation: xma-starglow 3.6s ease-in-out infinite alternate; }
@keyframes xma-starglow {
  from { opacity: 0.45; transform: scale(0.92); }
  to { opacity: 0.85; transform: scale(1.06); }
}
.xma-starflare { opacity: 0; }
.xma-starflare.is-on { animation: xma-flare 13000ms ease-out both; }
.xma-starflare.is-on .xma-starrays { animation: xma-rays 13000ms linear both; }
@keyframes xma-flare {
  0% { opacity: 0; transform: scale(0.4); }
  8% { opacity: 1; transform: scale(1.12); }
  16% { transform: scale(0.98); }
  50% { transform: scale(1.06); }
  86% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
@keyframes xma-rays {
  from { transform: rotate(0deg); }
  to { transform: rotate(80deg); }
}

/* Kaminfeuer: drei Zungen flackern um ihren Fuß, Schein auf Wand und Teppich, Funken steigen. Pause: Glut stärker. */
.xma-flame--a { animation: xma-flame-a 1.3s ease-in-out infinite alternate; }
.xma-flame--b { animation: xma-flame-b 0.95s ease-in-out infinite alternate; }
.xma-flame--c { animation: xma-flame-c 0.7s ease-in-out infinite alternate; }
@keyframes xma-flame-a {
  0% { transform: scale(1, 1) skewX(0deg); }
  35% { transform: scale(1.03, 0.93) skewX(3deg); }
  70% { transform: scale(0.97, 1.07) skewX(-2deg); }
  100% { transform: scale(1.01, 0.97) skewX(1deg); }
}
@keyframes xma-flame-b {
  0% { transform: scale(1, 1) skewX(0deg); }
  50% { transform: scale(0.95, 1.1) skewX(-4deg); }
  100% { transform: scale(1.04, 0.92) skewX(3deg); }
}
@keyframes xma-flame-c {
  0% { transform: scale(1, 0.94) skewX(3deg); }
  100% { transform: scale(0.94, 1.12) skewX(-4deg); }
}
.xma-fireglow { opacity: 0.6; animation: xma-glow 1.7s ease-in-out infinite alternate; }
.xma-firelight { opacity: 0.5; animation: xma-glow 2.3s ease-in-out -0.8s infinite alternate; }
.xma-coals { opacity: 0.55; animation: xma-glow 2.1s ease-in-out -0.4s infinite alternate; }
@keyframes xma-glow {
  0% { opacity: 0.5; }
  45% { opacity: 0.8; }
  70% { opacity: 0.62; }
  100% { opacity: 0.85; }
}
.pq-themeanim[data-phase="pause"] :is(.xma-fireglow, .xma-firelight, .xma-coals) { animation-name: xma-glow-strong; }
@keyframes xma-glow-strong {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 0.9; }
}
.pq-themeanim[data-phase="pause"] .xma-fireglow { transform: scale(1.25); transform-box: fill-box; transform-origin: center; }
.xma-ember {
  fill: #ffd27a;
  opacity: 0;
  animation: xma-ember var(--d, 2.4s) var(--dl, 0s) infinite ease-out;
}
@keyframes xma-ember {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 6px), -96px); }
}
.xma-candle { animation: xma-candle var(--d, 1s) var(--dl, 0s) ease-in-out infinite alternate; }
@keyframes xma-candle {
  0% { transform: scale(1, 1) rotate(-3deg); }
  50% { transform: scale(0.9, 1.12) rotate(2deg); }
  100% { transform: scale(1.05, 0.94) rotate(-1deg); }
}
.xma-candle__glow { opacity: 0.75; }

/* Rotkehlchen auf dem Fensterbrett: pickt, hüpft nach links, dreht um und hüpft zurück. */
.xma-robin { animation: xma-robin 11s ease-in-out infinite; }
.xma-robin__body { animation: xma-peck 11s ease-in-out infinite; }
@keyframes xma-robin {
  0%, 36% { transform: translate(0, 0) scaleX(1); }
  39% { transform: translate(-12px, -15px) scaleX(1); }
  42% { transform: translate(-23px, 0) scaleX(1); }
  45% { transform: translate(-35px, -13px) scaleX(1); }
  48%, 74% { transform: translate(-46px, 0) scaleX(1); }
  75% { transform: translate(-46px, 0) scaleX(-1); }
  78% { transform: translate(-33px, -15px) scaleX(-1); }
  81% { transform: translate(-22px, 0) scaleX(-1); }
  84% { transform: translate(-10px, -13px) scaleX(-1); }
  87%, 95% { transform: translate(0, 0) scaleX(-1); }
  96%, 100% { transform: translate(0, 0) scaleX(1); }
}
@keyframes xma-peck {
  0%, 8%, 12%, 16%, 60%, 64%, 68%, 100% { transform: rotate(0deg); }
  10%, 14%, 62%, 66% { transform: rotate(-22deg); }
}

/* Katze vor dem Kamin: Schwanz wippt, atmet, blinzelt; in der Pause schläft sie (Augen zu, Zzz, langsamer Schwanz). */
.xma-cat__tail { animation: xma-tail 2.6s ease-in-out infinite alternate; }
@keyframes xma-tail {
  from { transform: rotate(-8deg); }
  to { transform: rotate(14deg); }
}
.xma-cat__breath { animation: xma-breath 3.4s ease-in-out infinite alternate; }
@keyframes xma-breath {
  from { transform: scale(1, 1); }
  to { transform: scale(1.01, 1.035); }
}
.xma-cat__eye { animation: xma-blink 6s ease-in-out infinite; }
@keyframes xma-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}
.xma-cat__shut { opacity: 0; }
.xma-cat__zzz { display: none; }
.pq-themeanim[data-phase="pause"] .xma-cat__eyes { opacity: 0; }
.pq-themeanim[data-phase="pause"] .xma-cat__shut { opacity: 1; }
.pq-themeanim[data-phase="pause"] .xma-cat__tail { animation-duration: 6s; }
.pq-themeanim[data-phase="pause"] .xma-cat__breath { animation-duration: 4.6s; }
.pq-themeanim[data-phase="pause"] .xma-cat__zzz { display: inline; }
.xma-z {
  opacity: 0;
  animation: xma-z 3.6s ease-out calc(var(--i) * 1.2s) infinite;
}
@keyframes xma-z {
  0% { opacity: 0; transform: translate(0, 6px); }
  25% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(8px, -12px); }
}
.is-static .xma-z { opacity: 0.8; }

/* Lebkuchenmann winkt ab und zu. */
.xma-ginger__arm { transform: rotate(14deg); }
.xma-ginger.is-on { animation: xma-rock 2400ms ease-in-out both; }
.xma-ginger.is-on .xma-ginger__arm { animation: xma-wave 2400ms ease-in-out both; }
@keyframes xma-wave {
  0%, 100% { transform: rotate(14deg); }
  14% { transform: rotate(-58deg); }
  27% { transform: rotate(-30deg); }
  40% { transform: rotate(-64deg); }
  53% { transform: rotate(-30deg); }
  66% { transform: rotate(-60deg); }
  82% { transform: rotate(-36deg); }
}
@keyframes xma-rock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  55% { transform: rotate(3deg); }
  80% { transform: rotate(-2deg); }
}

/* Auflösung: Geschenk in der Antwortfarbe springt auf, goldene Sterne fliegen heraus. */
.xma-gift { opacity: 0; }
.xma-gift.is-on { animation: xma-gift 5200ms ease-out both; }
@keyframes xma-gift {
  0% { opacity: 0; }
  5%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.xma-gift__glow,
.xma-gift__beam { opacity: 0; }
.xma-gift.is-on .xma-gift__glow { animation: xma-gift-glow 5200ms ease-out both; }
.xma-gift.is-on .xma-gift__beam { animation: xma-gift-beam 5200ms ease-out both; }
@keyframes xma-gift-glow {
  0%, 12% { opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 0.8; }
  92%, 100% { opacity: 0; }
}
@keyframes xma-gift-beam {
  0%, 13% { opacity: 0; }
  22% { opacity: 0.9; }
  60% { opacity: 0.5; }
  80%, 100% { opacity: 0; }
}
.xma-gift.is-on .xma-gift__lid { animation: xma-lid 5200ms ease-out both; }
@keyframes xma-lid {
  0%, 9% { transform: translate(0, 0) rotate(0deg); }
  11% { transform: translate(0, 3px) rotate(0deg); }
  16% { transform: translate(-12px, -84px) rotate(-24deg); }
  21% { transform: translate(-9px, -64px) rotate(-16deg); }
  45% { transform: translate(-9px, -72px) rotate(-20deg); }
  70% { transform: translate(-9px, -64px) rotate(-16deg); }
  80%, 100% { transform: translate(0, 0) rotate(0deg); }
}
.xma-gstar { opacity: 0; }
.xma-gift.is-on .xma-gstar { animation: xma-gstar 2200ms cubic-bezier(0.2, 0.8, 0.3, 1) calc(800ms + var(--i) * 70ms) both; }
@keyframes xma-gstar {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(160deg); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 30px)) scale(0.8) rotate(200deg); }
}

/* Schnee über der Stube: an den Rändern immer, über die ganze Breite nur in Warteraum, Pause und Endstand, dichter in der Pause. */
.xma-snow {
  position: absolute;
  inset: 0;
}
.xma-snow i {
  position: absolute;
  top: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.12vh rgb(132 150 186 / 0.45);
  opacity: 0.9;
  transform: translateY(-4vh);
  animation: xma-fall var(--d, 14s) var(--dl, 0s) linear infinite;
}
@keyframes xma-fall {
  0% { transform: translate(0, -4vh); }
  50% { transform: translate(var(--sx, 1vw), 50vh); }
  100% { transform: translate(0, 104vh); }
}
.xma-snow--full,
.xma-snow--dense { display: none; }
.pq-themeanim:is([data-phase="lobby"], [data-phase="pause"], [data-phase="finale"]) .xma-snow--full { display: block; }
.pq-themeanim[data-phase="pause"] .xma-snow--dense { display: block; }
.xma-snow--full i { opacity: 0.75; }
.pq-themeanim.is-static .xma-snow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .xma-snow { display: none; }
}

/* Schlitten (HTML): klein am oberen Rand der Stube (Grundstimmung) oder groß als Show im Endstand. */
.xma-sleigh {
  position: absolute;
  left: 0;
}
.xma-sleigh svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.xma-sleigh--top {
  top: 17vh;
  width: 10vw;
  opacity: 0.85;
  transform: translateX(-12vw);
}
.xma-sleigh--top.is-on { animation: xma-top 11000ms linear both; }
.xma-sleigh--rtl.is-on { animation-direction: reverse; }
.xma-sleigh--rtl svg { transform: scaleX(-1); }
@keyframes xma-top {
  0% { transform: translate(-12vw, 1vh); }
  50% { transform: translate(45vw, -1vh); }
  100% { transform: translate(102vw, 0.5vh); }
}
.xma-show {
  position: absolute;
  inset: 0;
}
/* Falsche Mehrheit: Schneebälle fliegen im Bogen vom Rand herein und zerstieben (nur an den Rändern). */
.xma-balls,
.xma-ball {
  position: absolute;
  inset: 0;
}
.xma-ball__ball {
  position: absolute;
  left: 0;
  top: 0;
  width: 6vh;
  height: 6vh;
  margin: -3vh 0 0 -3vh;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.35vh solid #6c6875;
  background: radial-gradient(circle at 34% 30%, #fff 0 28%, #eaf0f7 55%, #b9c6d9);
  opacity: 0;
}
.xma-balls.is-on .xma-ball__ball { animation: xma-ball 650ms linear var(--delay) both; }
@keyframes xma-ball {
  0% { opacity: 1; transform: translate(var(--x0), var(--y0)) rotate(0deg) scale(0.85); }
  25% { transform: translate(var(--x1q), var(--y1q)) rotate(100deg) scale(0.92); }
  50% { transform: translate(var(--x2q), var(--y2q)) rotate(200deg) scale(1); }
  75% { transform: translate(var(--x3q), var(--y3q)) rotate(300deg) scale(1.05); }
  97% { opacity: 1; transform: translate(var(--x1), var(--y1)) rotate(390deg) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) rotate(400deg) scale(1.1); }
}
.xma-ball__burst {
  position: absolute;
  width: 0;
  height: 0;
}
.xma-ball__splat,
.xma-ball__burst b {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  border: 0.25vh solid #8a8794;
  box-sizing: border-box;
  opacity: 0;
}
.xma-ball__splat {
  left: -4vh;
  top: -4vh;
  width: 8vh;
  height: 8vh;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
}
.xma-ball__burst b {
  left: -0.8vh;
  top: -0.8vh;
  width: 1.6vh;
  height: 1.6vh;
}
.xma-balls.is-on .xma-ball__splat { animation: xma-splat 950ms ease-out calc(var(--delay) + 630ms) both; }
.xma-balls.is-on .xma-ball__burst b { animation: xma-bit 950ms cubic-bezier(0.2, 0.7, 0.4, 1) calc(var(--delay) + 630ms) both; }
@keyframes xma-splat {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 1; transform: scale(1.05); }
  55% { opacity: 0.9; transform: scale(1.18, 1.08); }
  100% { opacity: 0; transform: scale(1.3, 1.15); }
}
@keyframes xma-bit {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bx), calc(var(--by) + 2vh)) scale(0.5); }
}

/* ================================================================================================================================ */
/* Weihnachten auf den Handys (Spec C1–C2; frontend/js/quizStage/themeAnim/phone.js, christmas/ `variant: "mobile"`)               */
/* ================================================================================================================================ */

/* Akzentstreifen: Lichterkette hinter dem Stern (bis vor das Menü rechts), gelegentlich ein paar Schneeflocken. */
.pq-frame-accent--xm {
  position: relative;
  overflow: hidden;
}
.pq-frame-lights {
  position: absolute;
  left: 40px;
  right: 62px;
  top: 0;
  height: 26px;
  color: rgb(255 255 255 / 0.55);
  pointer-events: none;
}
.pq-frame-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Birne mit Fassung; funkelt sanft und versetzt (je Birne höchstens zwei Wechsel in 2,6–4,8 s). */
.pq-frame-bulb {
  position: absolute;
  top: 11px;
  width: 6px;
  height: 8px;
  margin-left: -3px;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background: var(--c, #ffd25e);
  box-shadow: 0 0 0 1px rgb(43 36 48 / 0.35);
  opacity: 0.55;
  animation: pq-bulb var(--d, 3.4s) var(--dl, 0s) ease-in-out infinite;
}
.pq-frame-bulb::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: -2px;
  width: 3px;
  height: 2.5px;
  border-radius: 1px;
  background: #3b3340;
}
@keyframes pq-bulb {
  0%, 100% { opacity: 0.5; }
  45%, 60% { opacity: 1; }
}
/* Antwortzeit, „Avatare und Animationen“ aus, Hintergrund: Lichter ruhig an. */
.pq-frame-accent--still .pq-frame-bulb {
  animation: none;
  opacity: 0.9;
}
.pq-frame-flakes {
  position: absolute;
  left: 40px;
  right: 62px;
  top: 0;
  height: 26px;
  pointer-events: none;
}
.pq-frame-flakes[hidden],
.pq-frame-accent--still .pq-frame-flakes { display: none; }
.pq-frame-flakes i {
  position: absolute;
  top: 0;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}
.pq-frame-flakes.is-on i { animation: pq-flake 2600ms linear var(--delay, 0ms) both; }
@keyframes pq-flake {
  0% { opacity: 0; transform: translate(0, -6px); }
  15% { opacity: 0.95; }
  50% { transform: translate(4px, 12px); }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-2px, 28px); }
}
/* Weihnachten 2: kleiner Schlitten zum Endstand, einmal durch den Streifen (von links nach rechts); nur transform/opacity. */
.pq-frame-sleigh {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  overflow: hidden;
  pointer-events: none;
}
.pq-frame-sleigh[hidden],
.pq-frame-accent--still .pq-frame-sleigh { display: none; }
.pq-frame-sleigh__fly {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}
.pq-frame-sleigh__fly svg {
  position: absolute;
  right: 0;
  top: 1px;
  width: 56px;
  height: 21px;
}
.pq-frame-sleigh.is-on .pq-frame-sleigh__fly { animation: pq-sleigh 4600ms cubic-bezier(0.3, 0.1, 0.7, 0.9) both; }
.pq-frame-sleigh.is-on svg { animation: pq-sleigh-bob 900ms ease-in-out infinite alternate; }
@keyframes pq-sleigh {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(56px); }
}
@keyframes pq-sleigh-bob {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(2px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pq-frame-bulb { animation: none; opacity: 0.9; }
  .pq-frame-flakes,
  .pq-frame-sleigh { display: none !important; }
}
@media (prefers-contrast: more) {
  .pq-frame-bulb { animation: none; opacity: 1; }
  .pq-frame-flakes,
  .pq-frame-sleigh { display: none !important; }
}

/* Mobiles Pubquiz: Schnee an den Rändern, Tannenbaum unten links, Geschenk unten rechts, Sternschnuppe oben. */
.xmm-snow {
  position: absolute;
  inset: 0;
}
.xmm-snow i {
  position: absolute;
  top: 0;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  /* Ohne Kulisse auf hellem Grund: leicht bläulich, damit die Flocken sichtbar bleiben. */
  background: #dbe7f6;
  box-shadow: 0 0 0 1px rgb(110 138 186 / 0.6);
  opacity: 0.9;
  transform: translateY(-10px);
  animation: xmm-fall var(--d, 12s) var(--dl, 0s) linear infinite;
}
@keyframes xmm-fall {
  0% { transform: translate(0, -10px); }
  50% { transform: translate(var(--sx, 6px), 50vh); }
  100% { transform: translate(0, 104vh); }
}
.xmm-tree {
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 48px;
  height: 64px;
}
.xmm-tree svg,
.xmm-gift svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.xmm-tw {
  opacity: 0.55;
  animation: pq-bulb var(--d, 3.4s) var(--dl, 0s) ease-in-out infinite;
}
.is-static .xmm-tw { opacity: 0.9; }
.xmm-gift {
  position: absolute;
  right: 10px;
  bottom: 6px;
  width: 40px;
  height: 60px;
  --xm-gift-glow: #ffd86b;
}
.xmm-gift__glow {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--xm-gift-glow) 70%, transparent) 0, color-mix(in srgb, var(--xm-gift-glow) 22%, transparent) 42%, transparent 68%);
  opacity: 0;
}
.xmm-gift svg :is(.xmm-gift__lid, .xmm-gstar) {
  transform-box: view-box;
  transform-origin: 0 0;
}
.xmm-gstar { opacity: 0; }
.xmm-gift.is-on .xmm-gift__glow { animation: xma-gift-glow 5200ms ease-out both; }
.xmm-gift.is-on .xmm-gift__lid { animation: xmm-lid 5200ms ease-out both; }
.xmm-gift.is-on .xmm-gstar { animation: xmm-gstar 2200ms cubic-bezier(0.2, 0.8, 0.3, 1) calc(500ms + var(--i) * 90ms) both; }
@keyframes xmm-lid {
  0% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(0, 3px) rotate(0deg); }
  18% { transform: translate(-6px, -22px) rotate(-18deg); }
  30%, 82% { transform: translate(-10px, -16px) rotate(-25deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes xmm-gstar {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(140deg); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 14px)) scale(0.8) rotate(200deg); }
}
.xmm-shoot {
  position: absolute;
  right: 6%;
  top: 46px;
  width: 0;
  height: 0;
  opacity: 0;
}
.xmm-shoot__trail {
  position: absolute;
  left: 0;
  top: -1.5px;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.95), rgb(255 236 170 / 0));
}
.xmm-shoot__head {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px !important;
  height: 18px !important;
}
.xmm-shoot.is-on { animation: xmm-shoot 1600ms cubic-bezier(0.4, 0, 0.7, 1) both; }
@keyframes xmm-shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(-25deg); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-70vw, 15vh) rotate(-25deg); }
}