/* =====================================================================
   Quiznight 2 · DER GRUND DES PAUSE-SCHIRMS FÜR SETS OHNE WELT (pause/grund-marke.js) — C „Sendepause“, Rückfall B „Studio-Licht“
   Greift nur, wo pause.js keinen Titelbild-Grund hat (.pz-lage[data-pz-grund]). Alles aus den Farbrollen (--acc, --acc2, --jetzt,
   --g0…--g4, --t0) — stimmt so bei jeder Set-Farbe. Der Grund ist .pzb-grund selbst: Er fährt mit der Fahrt aus pause.js.
   LESBARKEIT: pause.css dunkelt mit .pzb::before — das liegt UNTER dem Grund (gleiche Ebene, früher im Baum) und wirkte nur, weil das
   Titelbild gedämpft steht. Hier deckt der Grund voll; darum liegt eine eigene Ruhe (.pgm-ruhe) über ihm:
   oben steht der Kopf auf --g0 wie heute (gemessen: sonst sinkt „Frage 8 von 23“ unter 4,5 : 1), darunter ein weicher Übergang,
   links dunkler hinter „Pause“ und der Runde, rechts eine Spur hinter dem Stand.
   ===================================================================== */
.pz-lage[data-pz-grund] .pzb-grund { opacity: 1; filter: none; overflow: hidden; background: var(--g0); }
.pz-lage[data-pz-grund] .pzb-grund > i { display: block; pointer-events: none; }
.pz-lage[data-pz-grund] :where(.pzb-grund > [class^="pgm-"]) { position: absolute; inset: 0; }
/* Die Ruhe: deckt Schrift-Zonen ab, ohne eine Kante zu ziehen. */
/* Neben dem Grund (grund-marke.js), über ihm und unter dem Inhalt — gegen `.pzb > :not(.pzb-grund) { position: relative; z-index: 1 }` (pause.css). */
.pz-lage[data-pz-grund] > .pgm-ruhe {
  position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, var(--g0) 0, var(--g0) var(--pz-kopf, 0px), color-mix(in srgb, var(--g0) 82%, transparent) calc(var(--pz-kopf, 0px) + 3cqh), color-mix(in srgb, var(--g0) 36%, transparent) calc(var(--pz-kopf, 0px) + 10cqh), transparent calc(var(--pz-kopf, 0px) + 19cqh)),
    linear-gradient(90deg, color-mix(in srgb, var(--g0) 62%, transparent) 0%, color-mix(in srgb, var(--g0) 46%, transparent) 40%, color-mix(in srgb, var(--g0) 14%, transparent) 60%, color-mix(in srgb, var(--g0) 34%, transparent) 100%);
}

/* ---- C · SENDEPAUSE — eine gebaute Pausenanimation (grund-marke.js, sendepause): Bühnenspots in den Farben des Sets, die langsam
   wandern und sich kreuzen, ein großes Licht, das sanft atmet, feiner Staub, der im Licht schwebt. Bewegt wird nur transform und opacity
   (Web-Animationen — html.qn-pause hält CSS-Animationen an), jede Schleife läuft hin und zurück oder um genau eine Kachel: kein Sprung.
   Die Lage unten ist die Mitte jedes Wegs (die Animationen beginnen dort); bei reduzierter Bewegung gilt B. */
.pz-lage[data-pz-grund="c"] .pgm-c-grund {
  background:
    radial-gradient(70% 40% at 50% 104%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, var(--g2)) 0%, var(--g1) 46%, var(--g0) 100%);
}
/* Das große Licht oben in der Mitte, dort, wo sich die Spots kreuzen. */
.pz-lage[data-pz-grund="c"] .pgm-c-licht {
  inset: auto; left: 18%; top: -26%; width: 64%; height: 92%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 52%, transparent), color-mix(in srgb, var(--acc) 18%, transparent) 55%, transparent);
  opacity: .8; transform: scale(1.03); will-change: transform, opacity;
}
/* Ein Spot: ein Kegel aus einem Kegelverlauf (weiche Flanken) mit einer Maske, die nach unten ausläuft. Er hängt oben über dem Rand
   (--x), dreht um seinen Scheitel. Farben aus den Rollen; --ton: welche. */
.pz-lage[data-pz-grund="c"] .pgm-c-spot {
  inset: auto; left: calc(var(--x) - 22cqw); top: -14cqh; width: 44cqw; height: 150cqh; transform-origin: 50% 0;   /* so breit wie der Kegel (±12° auf 150 cqh), nicht mehr: kleinere Ebene */
  background: conic-gradient(from 180deg at 50% 0%, var(--ton) 0deg, color-mix(in srgb, var(--ton) 72%, transparent) 3deg, color-mix(in srgb, var(--ton) 30%, transparent) 7deg, transparent 12deg, transparent 348deg, color-mix(in srgb, var(--ton) 30%, transparent) 353deg, color-mix(in srgb, var(--ton) 72%, transparent) 357deg, var(--ton) 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 8%, rgba(0, 0, 0, .55) 46%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 8%, rgba(0, 0, 0, .55) 46%, transparent 92%);
  transform: rotate(var(--w)); will-change: transform;
}
.pz-lage[data-pz-grund="c"] .pgm-c-s1 { --x: 14%; --w: -16deg; --ton: color-mix(in srgb, color-mix(in srgb, var(--acc) 70%, var(--t0)) 50%, transparent); }
.pz-lage[data-pz-grund="c"] .pgm-c-s2 { --x: 86%; --w: 17deg; --ton: color-mix(in srgb, color-mix(in srgb, var(--acc2) 70%, var(--t0)) 44%, transparent); }
.pz-lage[data-pz-grund="c"] .pgm-c-s3 { --x: 50%; --w: 3deg; --ton: color-mix(in srgb, color-mix(in srgb, var(--jetzt) 50%, var(--t0)) 22%, transparent); }
/* Der Staub: Kacheln mit weichen Punkten (grund-marke.js zeichnet sie einmal in --t0/--acc), sichtbar nur im Licht oben — hinter dem Stand und
   der Runde läuft er aus. */
.pz-lage[data-pz-grund="c"] .pgm-c-staub {
  -webkit-mask-image: radial-gradient(64% 62% at 50% 0%, #000 30%, rgba(0, 0, 0, .2) 75%, transparent 100%);
          mask-image: radial-gradient(64% 62% at 50% 0%, #000 30%, rgba(0, 0, 0, .2) 75%, transparent 100%);
}
.pz-lage[data-pz-grund="c"] .pgm-c-staub > i { position: absolute; left: 0; right: 0; top: 0; display: block; will-change: transform; background-repeat: repeat; }
/* ---- B · STUDIO-LICHT (der Rückfall: reduzierte Bewegung, ?pausegrund=b) — weiche Lichter in den Farben des Sets, darüber das feine Punktfeld der Marke an den Rändern ---- */
.pz-lage[data-pz-grund="b"] .pgm-licht {
  background:
    radial-gradient(62% 80% at 88% -8%, color-mix(in srgb, var(--acc) 50%, transparent), transparent 66%),
    radial-gradient(60% 80% at -4% 108%, color-mix(in srgb, var(--acc2) 44%, transparent), transparent 66%),
    radial-gradient(40% 50% at 46% 46%, color-mix(in srgb, var(--jetzt) 12%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--g2)), var(--g1) 55%, color-mix(in srgb, var(--acc2) 12%, var(--g1)));
}
/* Das Punktfeld: dieselbe Grammatik wie das Motiv „raster“ (qn.css) — es läuft aus den Ecken herein und lässt die Mitte frei. */
.pz-lage[data-pz-grund="b"] .pgm-raster {
  background: radial-gradient(circle, color-mix(in srgb, var(--t0) 11%, transparent) 0 .3cqmin, transparent .34cqmin) 0 0 / 2.2cqmin 2.2cqmin;
  -webkit-mask: radial-gradient(52% 62% at 102% -4%, #000 22%, transparent 70%), radial-gradient(46% 58% at -2% 104%, #000 18%, transparent 68%);
          mask: radial-gradient(52% 62% at 102% -4%, #000 22%, transparent 70%), radial-gradient(46% 58% at -2% 104%, #000 18%, transparent 68%);
}