/*
 * Öffentliche Pubquiz-Seite: animierte Story „Ein Abend in 30 Sekunden“ (frontend/js/pubquizStory.js, Ablauf pubquizStoryModel.js).
 * Feste Seitenlage (16:10, schmal 3:4), alle Maße in Container-Einheiten: die Grafik skaliert, nichts verschiebt die Seite.
 * Animiert wird nur `transform` und `opacity`. `.is-paused` hält alle CSS-Animationen an (außer Sicht, Hintergrund-Tab), `.is-reset`
 * setzt ohne Übergang zurück (neue Schleife hinter dem Vorhang), `.is-still` ist das Standbild bei reduzierter Bewegung.
 */

.pq-hero__stage--story {
  container: pqstage / inline-size;
  position: relative;
}
/* Platzhalter bis zum Start (und ohne JavaScript): das Bühnenbild in derselben Seitenlage wie die Story, damit beim Einhängen nichts springt. */
.pq-hero__stage--story > img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@container pqstage (max-width: 560px) {
  .pq-hero__stage--story > img {
    aspect-ratio: 3 / 4;
  }
}

.pqs {
  /* Szene: 1 cqw = 1 % der Breite; --su = 1 % der Leinwand (Schrift und Abstände auf der Leinwand) */
  --ink: #16161d;
  --cream: #fffaf2;
  --ok: #1f9d62;
  --scr-l: 16.5cqw;
  --scr-t: 5.2cqw;
  --scr-w: 67cqw;
  --scr-h: 32cqw;
  --su: 0.67cqw;
  --k: 0.84cqw;
  --kb: 0.6cqw;
  --back-b: 11.4cqw;
  --tag-f: 1.35cqw;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  font-family: inherit;
  line-height: 1.2;
  color: var(--ink);
  background: #1b2440;
  user-select: none;
}
.pqs-art,
.pqs-art * {
  box-sizing: border-box;
}
.pqs-art {
  position: absolute;
  inset: 0;
}
.pqs p {
  margin: 0;
}

/* —— Bühne —— */
.pqs-bg,
.pqs-glow,
.pqs-floor {
  position: absolute;
  inset: 0;
}
.pqs-glow {
  background: radial-gradient(ellipse 70% 62% at 50% 34%, #3c4f80 0%, #24305a 46%, #1b2440 100%);
}
.pqs-floor {
  top: auto;
  height: 23%;
  background: linear-gradient(#2a2238, #1a1524);
  border-top: 0.35cqw solid #3a2f4d;
}
.pqs-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 80% at 50% 0%, rgba(255, 236, 170, 0.22), transparent 70%);
}
.pqs-wire {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.3cqw;
  height: 2.2cqw;
  border-bottom: 0.18cqw solid #0f1424;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.pqs-lights {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 2.6cqw;
  display: flex;
  justify-content: space-between;
}
.pqs-bulb {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: #f2c14e;
  box-shadow: 0 0 1.4cqw 0.3cqw rgba(242, 193, 78, 0.5);
  animation: pqs-twinkle 2.4s ease-in-out infinite;
}
.pqs-bulb:nth-child(odd) {
  transform: translateY(0.7cqw);
}
.pqs-bulb[data-c="1"] { background: #e8765c; box-shadow: 0 0 1.4cqw 0.3cqw rgba(232, 118, 92, 0.5); animation-delay: -0.6s; }
.pqs-bulb[data-c="2"] { background: #4db6c0; box-shadow: 0 0 1.4cqw 0.3cqw rgba(77, 182, 192, 0.5); animation-delay: -1.2s; }
.pqs-bulb[data-c="3"] { background: #7bb274; box-shadow: 0 0 1.4cqw 0.3cqw rgba(123, 178, 116, 0.5); animation-delay: -1.8s; }
@keyframes pqs-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.pqs-beam {
  position: absolute;
  top: -6cqw;
  width: 30cqw;
  height: 62cqw;
  background: linear-gradient(rgba(255, 243, 196, 0.32), rgba(255, 243, 196, 0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0.55;
  transform-origin: 50% 0;
  animation: pqs-sway 7s ease-in-out infinite alternate;
}
.pqs-beam--l { left: 4cqw; --a: -24deg; --b: -12deg; }
.pqs-beam--r { right: 4cqw; --a: 24deg; --b: 12deg; animation-delay: -3.5s; }
@keyframes pqs-sway {
  from { transform: rotate(var(--a)); }
  to { transform: rotate(var(--b)); }
}
.pqs[data-phase="round"] .pqs-beam,
.pqs[data-phase="cheer"] .pqs-beam {
  opacity: 1;
  animation-duration: 1.4s;
}

/* —— Leinwand —— */
.pqs-screen {
  position: absolute;
  left: var(--scr-l);
  top: var(--scr-t);
  width: var(--scr-w);
  height: var(--scr-h);
  z-index: 1;
  overflow: hidden;
  background: var(--cream);
  border: 0.42cqw solid var(--ink);
  border-radius: calc(1.8 * var(--su));
  box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.06), 0 1.6cqw 4cqw rgba(0, 0, 0, 0.45), 0 0 6cqw rgba(140, 170, 255, 0.25);
}
.pqs-scene {
  position: absolute;
  inset: 0;
  padding: calc(3.2 * var(--su)) calc(3.6 * var(--su));
  opacity: 0;
  transform: translateY(calc(3 * var(--su))) scale(0.98);
  transition: opacity 0.42s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pqs[data-phase="join"] .pqs-scene--join,
.pqs[data-phase="round"] .pqs-scene--round,
.pqs:is([data-phase="question"], [data-phase="vote"], [data-phase="reveal"]) .pqs-scene--q,
.pqs:is([data-phase="cheer"], [data-phase="next"]) .pqs-scene--rank {
  opacity: 1;
  transform: none;
}
.pqs-kicker {
  display: inline-block;
  padding: calc(0.5 * var(--su)) calc(1.6 * var(--su));
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: calc(2.1 * var(--su));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Einlass: QR-Code und Zähler */
.pqs-scene--join {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--su));
}
.pqs-qr {
  position: relative;
  flex: none;
  width: calc(32 * var(--su));
  aspect-ratio: 1;
  padding: calc(1 * var(--su));
  overflow: hidden;
  border: 0.3cqw solid var(--ink);
  border-radius: calc(1.6 * var(--su));
  background: #fff;
}
.pqs-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pqs-qr__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(rgba(77, 182, 192, 0), rgba(77, 182, 192, 0.55) 80%, #4db6c0);
  animation: pqs-scan 1.6s ease-in-out infinite alternate;
}
@keyframes pqs-scan {
  from { transform: translateY(-20%); }
  to { transform: translateY(470%); }
}
.pqs-join {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.2 * var(--su));
  min-width: 0;
}
.pqs-join__url {
  font-size: calc(7.4 * var(--su));
  font-weight: 900;
  letter-spacing: -0.02em;
}
.pqs-join__hint {
  font-size: calc(2.7 * var(--su));
  font-weight: 600;
  color: #4a5263;
}
.pqs-join__count {
  display: flex;
  align-items: baseline;
  gap: calc(1.2 * var(--su));
  margin-top: calc(1.4 * var(--su));
  padding: calc(0.8 * var(--su)) calc(2 * var(--su));
  border-radius: calc(1.4 * var(--su));
  background: #e9f6f7;
  font-size: calc(2.8 * var(--su));
  font-weight: 700;
}
.pqs-count {
  display: inline-block;
  min-width: 1.4em;
  font-size: calc(6 * var(--su));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #1b7f89;
}

/* Rundenkarte */
.pqs-scene--round {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #fff3c4, var(--cream) 70%);
}
.pqs-rcard {
  position: relative;
  overflow: hidden;
  width: min(100%, calc(62 * var(--su)));
  padding: calc(3.4 * var(--su)) calc(4 * var(--su)) calc(3.8 * var(--su));
  border: 0.42cqw solid var(--ink);
  border-radius: calc(2.4 * var(--su));
  background: #1f2a44;
  color: #fff;
  text-align: center;
  box-shadow: 0 calc(1.4 * var(--su)) 0 var(--ink);
  transform: scale(0.6) rotate(-4deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s ease;
}
.pqs[data-phase="round"] .pqs-rcard {
  transform: none;
  opacity: 1;
}
.pqs-rcard__kind {
  color: #f2c14e;
  font-size: calc(3.2 * var(--su));
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pqs-rcard__title {
  margin: calc(0.6 * var(--su)) 0 calc(1.8 * var(--su)) !important;
  font-size: calc(9.6 * var(--su));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pqs-rcard__chip {
  display: inline-block;
  padding: calc(0.8 * var(--su)) calc(2.4 * var(--su));
  border: 0.25cqw solid var(--ink);
  border-radius: 999px;
  background: #f2c14e;
  color: var(--ink);
  font-size: calc(2.9 * var(--su));
  font-weight: 800;
}
.pqs-gloss {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
}
.pqs[data-phase="round"] .pqs-gloss {
  animation: pqs-gloss 1.2s ease-in-out 0.45s 1 both;
}
@keyframes pqs-gloss {
  to { transform: translateX(420%) skewX(-18deg); }
}

/* Frage */
.pqs-scene--q {
  display: flex;
  flex-direction: column;
  gap: calc(1.8 * var(--su));
  padding-bottom: calc(4.6 * var(--su));
}
.pqs-q__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--su));
  min-height: calc(4.2 * var(--su));
}
.pqs-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.9 * var(--su));
  padding: calc(0.5 * var(--su)) calc(1.6 * var(--su));
  border-radius: 999px;
  background: #d7263d;
  color: #fff;
  font-size: calc(2.2 * var(--su));
  font-weight: 800;
  white-space: nowrap;
}
.pqs-chip::before {
  content: "";
  width: calc(1.2 * var(--su));
  height: calc(1.2 * var(--su));
  border-radius: 50%;
  background: #fff;
  animation: pqs-twinkle 1.1s ease-in-out infinite;
}
.pqs-chip.is-sample {
  background: #4a5263;
}
.pqs-answered {
  position: relative;
  display: grid;
  justify-items: end;
  font-size: calc(2.3 * var(--su));
  font-weight: 700;
  color: #4a5263;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pqs[data-phase="vote"] .pqs-answered {
  opacity: 1;
}
.pqs-answered__n,
.pqs-answered__all {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.pqs-answered__n {
  font-variant-numeric: tabular-nums;
}
.pqs-answered__all {
  color: var(--ok);
  opacity: 0;
  transform: scale(0.7);
}
.pqs-answered__all i {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-style: normal;
}
.pqs.is-all .pqs-answered__n {
  opacity: 0;
}
.pqs.is-all .pqs-answered__all {
  opacity: 1;
  transform: none;
}
.pqs-q__text {
  font-size: calc(4.5 * var(--su));
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pqs-q__text[data-len="m"] { font-size: calc(4.1 * var(--su)); }
.pqs-q__text[data-len="l"] { font-size: calc(3.6 * var(--su)); }
.pqs-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(1.4 * var(--su)) calc(1.8 * var(--su));
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.pqs-opt {
  --oc: #e8765c;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--su));
  min-height: calc(7.6 * var(--su));
  padding: calc(0.8 * var(--su)) calc(1.4 * var(--su));
  overflow: hidden;
  border: 0.28cqw solid var(--ink);
  border-radius: calc(1.4 * var(--su));
  background: #fff;
  font-size: calc(2.75 * var(--su));
  font-weight: 700;
  opacity: 0;
  transform: translateY(calc(2 * var(--su))) scale(0.96);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.pqs-opt[data-k="B"] { --oc: #4db6c0; }
.pqs-opt[data-k="C"] { --oc: #f2c14e; }
.pqs-opt[data-k="D"] { --oc: #8e7cc3; }
.pqs-opt.is-in {
  opacity: 1;
  transform: none;
}
.pqs-opt__bar,
.pqs-opt__ok {
  position: absolute;
  inset: 0;
}
.pqs-opt__bar {
  background: var(--oc);
  opacity: 0.32;
  transform-origin: 0 50%;
  transform: scaleX(min(1, calc(var(--share, 0) * 1.55)));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pqs-opt__ok {
  background: #e3e4ea;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.pqs-opt.is-correct .pqs-opt__ok {
  background: var(--ok);
}
.pqs-opt__key,
.pqs-opt__text,
.pqs-opt__pct,
.pqs-opt__check {
  position: relative;
}
.pqs-opt__key {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(4.8 * var(--su));
  height: calc(4.8 * var(--su));
  border: 0.22cqw solid var(--ink);
  border-radius: 50%;
  background: var(--oc);
  font-size: calc(2.6 * var(--su));
  font-weight: 900;
}
.pqs-opt.is-hit .pqs-opt__key {
  animation: pqs-pop 0.4s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes pqs-pop {
  40% { transform: scale(1.32); }
}
.pqs-opt__text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
}
.pqs-opt[data-long="1"] .pqs-opt__text {
  font-size: calc(2.4 * var(--su));
}
.pqs-opt__pct {
  flex: none;
  font-size: calc(2.8 * var(--su));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateX(calc(2 * var(--su)));
  transition: opacity 0.35s ease 0.25s, transform 0.45s ease 0.25s;
}
.pqs-opt__check {
  position: absolute;
  right: calc(-0.6 * var(--su));
  top: calc(-0.6 * var(--su));
  display: grid;
  place-items: center;
  width: calc(4.4 * var(--su));
  height: calc(4.4 * var(--su));
  border: 0.22cqw solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ok);
  font-size: calc(2.8 * var(--su));
  font-weight: 900;
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
  transition: opacity 0.25s ease 0.35s, transform 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) 0.35s;
}
/* Auflösung: falsche grau, richtige grün mit Prozent und Häkchen */
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt:not(.is-correct) {
  opacity: 0.5;
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt__ok {
  opacity: 0.75;
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt.is-correct .pqs-opt__ok {
  opacity: 1;
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt.is-correct {
  color: #fff;
  transform: scale(1.03);
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt__pct {
  opacity: 1;
  transform: none;
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt.is-correct .pqs-opt__pct {
  margin-right: calc(3.4 * var(--su));
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt.is-correct .pqs-opt__check {
  opacity: 1;
  transform: none;
}
.pqs:is([data-phase="reveal"], [data-phase="cheer"]) .pqs-opt.is-correct .pqs-opt__bar {
  opacity: 0;
}
.pqs-timer {
  position: absolute;
  left: calc(3.6 * var(--su));
  right: calc(3.6 * var(--su));
  bottom: calc(1.8 * var(--su));
  height: calc(1.4 * var(--su));
  overflow: hidden;
  border-radius: 999px;
  background: #e3e4ea;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pqs[data-phase="vote"] .pqs-timer {
  opacity: 1;
}
.pqs-timer__bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #4db6c0;
  transform-origin: 0 50%;
  transform: scaleX(var(--left, 1));
}
.pqs.is-low .pqs-timer__bar {
  background: #e8765c;
}
.pqs-stamp {
  position: absolute;
  right: calc(3.4 * var(--su));
  top: calc(2.6 * var(--su));
  padding: calc(0.3 * var(--su)) calc(1.6 * var(--su));
  border: 0.3cqw solid var(--ok);
  border-radius: calc(1 * var(--su));
  background: #fff;
  color: var(--ok);
  font-size: calc(3 * var(--su));
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-5deg) scale(2.4);
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.pqs.is-stamp .pqs-stamp {
  opacity: 1;
  transform: rotate(-5deg);
}

/* Zwischenstand */
.pqs-scene--rank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(2 * var(--su));
  background: radial-gradient(ellipse at 50% 0%, #fff3c4, var(--cream) 65%);
}
.pqs-rank {
  display: grid;
  gap: calc(1.4 * var(--su));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pqs-rank__row {
  display: flex;
  align-items: center;
  gap: calc(1.8 * var(--su));
  min-height: calc(7.4 * var(--su));
  padding: calc(0.6 * var(--su)) calc(2 * var(--su));
  border: 0.28cqw solid var(--ink);
  border-radius: calc(1.4 * var(--su));
  background: #fff;
  font-size: calc(3.2 * var(--su));
  font-weight: 800;
  opacity: 0;
  transform: translateX(calc(30 * var(--su)));
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.pqs-rank__row:first-child {
  background: #fff3c4;
}
.pqs-rank__row.is-in {
  opacity: 1;
  transform: none;
}
.pqs-rank__pos {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(4.6 * var(--su));
  height: calc(4.6 * var(--su));
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: calc(2.6 * var(--su));
}
.pqs-rank__dot {
  flex: none;
  width: calc(2.4 * var(--su));
  height: calc(2.4 * var(--su));
  border: 0.2cqw solid var(--ink);
  border-radius: 50%;
  background: var(--tc);
}
.pqs-rank__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pqs-rank__gain {
  padding: calc(0.2 * var(--su)) calc(1.2 * var(--su));
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  font-size: calc(2.3 * var(--su));
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.pqs.is-gain .pqs-rank__row.is-up .pqs-rank__gain {
  opacity: 1;
  transform: none;
}
.pqs-rank__pts {
  font-variant-numeric: tabular-nums;
}

/* —— Figuren (Figuren der App, frontend/js/quizStage/figures.js) —— */
.pqs-crowd {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pqs-fig {
  --x: 50%;
  --pq-k: var(--k);
  position: absolute;
  left: var(--x);
  bottom: -0.6cqw;
  width: calc(23 * var(--pq-k));
  margin-left: calc(-11.5 * var(--pq-k));
  z-index: 3;
}
.pqs-fig--back {
  --pq-k: var(--kb);
  bottom: var(--back-b);
  z-index: 1;
}
.pqs-fig[data-i="0"] { --x: 10.5%; --from: -60cqw; }
.pqs-fig[data-i="1"] { --x: 25%; --from: -60cqw; }
.pqs-fig[data-i="2"] { --x: 41%; --from: -70cqw; }
.pqs-fig[data-i="3"] { --x: 59%; --from: 70cqw; }
.pqs-fig[data-i="4"] { --x: 75%; --from: 60cqw; }
.pqs-fig[data-i="5"] { --x: 89.5%; --from: 60cqw; }
.pqs-fig[data-i="6"] { --x: 4%; }
.pqs-fig[data-i="7"] { --x: 18%; }
.pqs-fig[data-i="8"] { --x: 32%; }
.pqs-fig[data-i="9"] { --x: 68%; }
.pqs-fig[data-i="10"] { --x: 82%; }
.pqs-fig[data-i="11"] { --x: 96%; }
.pqs-fig__walk {
  transform: translateX(var(--from, 0));
  transition: transform 1.15s cubic-bezier(0.25, 0.7, 0.3, 1);
}
.pqs-fig--back .pqs-fig__walk {
  opacity: 0;
  transform: translateY(3cqw);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pqs-fig.is-in .pqs-fig__walk {
  opacity: 1;
  transform: none;
}
.pqs-fig--back .pqs-fig__bob {
  filter: brightness(0.78) saturate(0.85);
}
.pqs-fig__hi5 {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.pqs-fig.is-hi5[data-i="2"] .pqs-fig__hi5 { transform: translateX(calc(3.4 * var(--pq-k))); }
.pqs-fig.is-hi5[data-i="3"] .pqs-fig__hi5 { transform: translateX(calc(-3.4 * var(--pq-k))); }
.pqs-fig.is-walking .pqs-fig__bob {
  animation: pqs-walk 0.32s ease-in-out infinite alternate;
}
@keyframes pqs-walk {
  from { transform: translateY(0) rotate(-2.5deg); }
  to { transform: translateY(calc(-0.9 * var(--pq-k))) rotate(2.5deg); }
}
.pqs-fig.is-tap .pqs-fig__bob {
  animation: pqs-nod 0.5s ease-out;
}
@keyframes pqs-nod {
  35% { transform: translateY(calc(0.5 * var(--pq-k))) rotate(-1.5deg); }
}
.pqs-fig .pq-figure {
  width: 100%;
}
/* Handy in der rechten Hand, Bildschirm leuchtet in der Teamfarbe */
.pqs-phone {
  position: absolute;
  left: calc(50% + 3.1 * var(--pq-k));
  bottom: calc(7.2 * var(--pq-k));
  z-index: 4;
  width: calc(3.1 * var(--pq-k));
  height: calc(5.2 * var(--pq-k));
  padding: calc(0.35 * var(--pq-k));
  border: calc(0.4 * var(--pq-k)) solid var(--ink);
  border-radius: calc(0.8 * var(--pq-k));
  background: #e9ecf3;
  transform: rotate(-14deg);
}
.pqs-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(0.2 * var(--pq-k));
  width: calc(0.9 * var(--pq-k));
  height: calc(0.22 * var(--pq-k));
  margin-left: calc(-0.45 * var(--pq-k));
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.5;
}
.pqs-phone__glow {
  position: absolute;
  inset: calc(0.35 * var(--pq-k)) calc(0.35 * var(--pq-k)) calc(0.7 * var(--pq-k));
  border-radius: calc(0.3 * var(--pq-k));
  background: linear-gradient(var(--tc) 0 30%, #fff 30% 100%);
  box-shadow: 0 0 calc(1.6 * var(--pq-k)) calc(0.2 * var(--pq-k)) var(--tc);
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.pqs-fig.is-voting .pqs-phone__glow,
.pqs[data-phase="join"] .pqs-fig.is-in .pqs-phone__glow {
  opacity: 0.95;
}
.pqs-fig.is-tap .pqs-phone {
  animation: pqs-phone-tap 0.5s ease-out;
}
@keyframes pqs-phone-tap {
  30% { transform: rotate(-14deg) translateY(calc(0.5 * var(--pq-k))) scale(1.12); }
}
.pqs-fig.is-tap .pqs-phone__glow {
  animation: pqs-tap 0.55s ease-out;
}
@keyframes pqs-tap {
  0% { opacity: 1; filter: none; }
  20% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0.95; transform: none; }
}
/* Namensschild über dem Handy */
.pqs-tag {
  position: absolute;
  left: 50%;
  top: calc(-3.4 * var(--pq-k));
  z-index: 6;
  padding: 0.35em 0.75em;
  border: 0.18cqw solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: var(--tag-f);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 1.6cqw rgba(255, 236, 170, 0.75);
  opacity: 0;
  transform: translate(var(--tx, -50%), 0.8cqw) scale(0.6);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.pqs-tag::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--tc);
  vertical-align: 0.02em;
}
.pqs-fig:nth-child(even) .pqs-tag {
  top: calc(-6.6 * var(--pq-k));
}
.pqs-fig.is-tagged .pqs-tag {
  opacity: 1;
  transform: translate(var(--tx, -50%), 0);
}

/* —— Effekte —— */
.pqs-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.pqs-ball {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--x0), var(--y0));
  animation: pqs-ball-x var(--ms) linear forwards;
}
.pqs-ball__y {
  display: block;
  animation: pqs-ball-y var(--ms) cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
}
.pqs-ball__dot {
  display: block;
  width: 1.7cqw;
  height: 1.7cqw;
  margin: -0.85cqw 0 0 -0.85cqw;
  border: 0.25cqw solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 1.4cqw var(--c);
  animation: pqs-ball-dot var(--ms) ease-in forwards;
}
@keyframes pqs-ball-x {
  to { transform: translate(calc(var(--x0) + var(--dx)), var(--y0)); }
}
@keyframes pqs-ball-y {
  to { transform: translateY(var(--dy)); }
}
@keyframes pqs-ball-dot {
  0% { transform: scale(0.4); opacity: 0; }
  12% { transform: scale(1.15); opacity: 1; }
  85% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(0.4); opacity: 0; }
}
.pqs-conf {
  position: absolute;
  left: var(--x);
  top: 6%;
  width: 0.9cqw;
  height: 1.5cqw;
  border-radius: 0.15cqw;
  background: var(--c);
  opacity: 0;
  animation: pqs-fall var(--ms) cubic-bezier(0.25, 0.6, 0.45, 1) var(--d) 1 both;
}
.pqs-conf--round {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
}
@keyframes pqs-fall {
  0% { opacity: 1; transform: translate(0, -8cqw) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 54cqw) rotate(var(--r)); }
}
.pqs-plus {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  color: #f2c14e;
  font-size: 4.6cqw;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 0.3cqw 0 var(--ink), 0.25cqw 0 0 var(--ink), -0.25cqw 0 0 var(--ink), 0 -0.25cqw 0 var(--ink), 0 0 2cqw rgba(242, 193, 78, 0.8);
  opacity: 0;
  animation: pqs-plus 2.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.45s 1 both;
}
@keyframes pqs-plus {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  15% { opacity: 1; transform: translate(-50%, -2cqw) scale(1.15); }
  75% { opacity: 1; transform: translate(-50%, -5cqw) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -7cqw) scale(1); }
}
.pqs-clap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7cqw;
  height: 7cqw;
  margin: -3.5cqw 0 0 -3.5cqw;
  background: radial-gradient(circle, #fff 0 18%, #f2c14e 19% 34%, rgba(242, 193, 78, 0) 35%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  animation: pqs-clap 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.75s 2 both;
}
@keyframes pqs-clap {
  0% { opacity: 0; transform: scale(0.2) rotate(0); }
  35% { opacity: 1; transform: scale(1.2) rotate(25deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(50deg); }
}

/* —— Vorhang —— */
.pqs-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 51%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.05) 30%, rgba(0, 0, 0, 0.25) 60%, rgba(255, 255, 255, 0.04) 85%, rgba(0, 0, 0, 0.3)) 0 0 / 7cqw 100%,
    linear-gradient(#a8213a, #7c1529);
  box-shadow: 0 0 3cqw rgba(0, 0, 0, 0.6);
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1);
}
.pqs-curtain--l {
  left: 0;
  transform: translateX(calc(-100% + 3.2cqw));
}
.pqs-curtain--r {
  right: 0;
  transform: translateX(calc(100% - 3.2cqw));
}
.pqs.is-closed .pqs-curtain {
  transform: none;
}
.pqs-valance {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  height: 1.6cqw;
  background: radial-gradient(circle at 50% 0, #8e1b2e 0 1.6cqw, transparent 1.65cqw) 0 0 / 3.4cqw 1.6cqw repeat-x;
  border-top: 0.5cqw solid #8e1b2e;
}
.pqs-next {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  z-index: 10;
  color: #fff;
  font-size: 5cqw;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0.35cqw 0 rgba(0, 0, 0, 0.45), 0 0 3cqw rgba(242, 193, 78, 0.6);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.pqs.is-next .pqs-next {
  opacity: 1;
  transform: none;
}

/* —— Steuerzustände —— */
.pqs.is-reset,
.pqs.is-reset * {
  transition: none !important;
}
.pqs.is-paused,
.pqs.is-paused * {
  animation-play-state: paused !important;
}
.pqs.is-still *,
.pqs.is-still *::before {
  transition: none !important;
  animation: none !important;
}

/* —— Schrittleiste unter der Grafik —— */
.pqs-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: -0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.pqs-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  border: 2px solid rgba(31, 42, 68, 0.14);
  border-radius: 999px;
  color: #4a5263;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transition: transform 0.3s ease;
}
.pqs-step::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: #1f2a44;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.pqs-step {
  isolation: isolate;
}
.pqs-step__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(31, 42, 68, 0.1);
  font-size: 0.8rem;
}
.pqs-step.is-done .pqs-step__n {
  background: #4db6c0;
  color: #fff;
}
.pqs-step.is-on {
  color: #fff;
  transform: scale(1.04);
}
.pqs-step.is-on::after {
  opacity: 1;
}
.pqs-step.is-on .pqs-step__n {
  background: #f2c14e;
  color: #16161d;
}
[data-theme="dark"] .pqs-step {
  border-color: rgba(253, 252, 249, 0.18);
  color: #c9cdd8;
}
[data-theme="dark"] .pqs-step__n {
  background: rgba(253, 252, 249, 0.12);
}
[data-theme="dark"] .pqs-step.is-on {
  color: #16161d;
}
[data-theme="dark"] .pqs-step.is-on::after {
  background: #fdfcf9;
}
@media (prefers-reduced-motion: reduce) {
  .pqs-step {
    transition: none;
  }
}

/* —— Schmal (Handy): höher als breit, Leinwand über die ganze Breite, größere Schrift —— */
@container pqstage (max-width: 560px) {
  .pqs {
    aspect-ratio: 3 / 4;
    --scr-l: 3.5cqw;
    --scr-t: 6cqw;
    --scr-w: 93cqw;
    --scr-h: 70cqw;
    --su: 1.24cqw;
    --k: 1.16cqw;
    --kb: 0.82cqw;
    --back-b: 31cqw;
    --tag-f: 2.9cqw;
  }
  .pqs-scene {
    padding: calc(3 * var(--su)) calc(3 * var(--su));
  }
  .pqs-scene--q {
    padding-bottom: calc(4.6 * var(--su));
  }
  .pqs-timer {
    left: calc(3 * var(--su));
    right: calc(3 * var(--su));
  }
  .pqs-qr {
    width: calc(30 * var(--su));
  }
  .pqs-scene--join {
    gap: calc(3.4 * var(--su));
  }
  .pqs-join__url {
    font-size: calc(6.4 * var(--su));
  }
  .pqs-fig[data-i="0"] { --x: 9%; }
  .pqs-fig[data-i="1"] { --x: 25%; }
  .pqs-fig[data-i="2"] { --x: 41.5%; }
  .pqs-fig[data-i="3"] { --x: 58.5%; }
  .pqs-fig[data-i="4"] { --x: 75%; }
  .pqs-fig[data-i="5"] { --x: 91%; }
  .pqs-fig[data-i="6"] { --x: 8%; }
  .pqs-fig[data-i="7"] { --x: 25%; }
  .pqs-fig[data-i="8"] { --x: 41%; }
  .pqs-fig[data-i="9"] { --x: 59%; }
  .pqs-fig[data-i="10"] { --x: 75%; }
  .pqs-fig[data-i="11"] { --x: 92%; }
  .pqs-beam {
    height: 120cqw;
  }
  .pqs-plus {
    font-size: 8cqw;
  }
  .pqs-next {
    font-size: 8cqw;
  }
  .pqs-ball__dot {
    width: 3cqw;
    height: 3cqw;
    margin: -1.5cqw 0 0 -1.5cqw;
  }
  .pqs-conf {
    width: 1.6cqw;
    height: 2.6cqw;
  }
  .pqs-wire {
    top: 1.6cqw;
  }
  .pqs-lights {
    top: 2.8cqw;
  }
  .pqs-bulb {
    width: 1.8cqw;
    height: 1.8cqw;
  }
  .pqs-floor {
    height: 34%;
  }
  .pqs-opt {
    gap: calc(1.1 * var(--su));
    min-height: calc(9.4 * var(--su));
    padding: calc(0.7 * var(--su)) calc(1.1 * var(--su));
    font-size: calc(2.6 * var(--su));
  }
  .pqs-opt[data-long="1"] .pqs-opt__text {
    font-size: calc(2.4 * var(--su));
  }
  .pqs-opt__text {
    -webkit-line-clamp: 3;
  }
  .pqs-opt__key {
    width: calc(4 * var(--su));
    height: calc(4 * var(--su));
    font-size: calc(2.2 * var(--su));
  }
  .pqs-fig:nth-child(even) .pqs-tag {
    top: calc(-8.6 * var(--pq-k));
  }  .pqs-fig.is-hi5[data-i="2"] .pqs-fig__hi5 { transform: translateX(calc(1.8 * var(--pq-k))); }
  .pqs-fig.is-hi5[data-i="3"] .pqs-fig__hi5 { transform: translateX(calc(-1.8 * var(--pq-k))); }
}
/* Namensschilder am Rand bleiben in der Fläche */
.pqs-fig[data-i="0"] .pqs-tag {
  --tx: -18%;
}
.pqs-fig[data-i="5"] .pqs-tag {
  --tx: -82%;
}
@media (max-width: 560px) {
  .pqs-step {
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.6rem;
    padding: 0.35rem 0.25rem;
    border-radius: 14px;
    font-size: 0.74rem;
  }
}