/* =====================================================================
   Quiznight 2 · BEITRITT IN DER PAUSE (pause-beitritt/beitritt.js) — Fernseher: das Ticket der Lobby, klein; online: eine Zeile.
   Maße in cq-Einheiten des Pause-Schirms (.pz-lage ist container-type: size). Keine Keyframes: html.qn-pause hält sie an.
   ===================================================================== */

/* ---- Fernseher · das Ticket der Lobby, klein, unter dem Stand ----
   Die Wurzel trägt .qla[data-look] nur, damit der Look des Tickets greift (Kinokarte, Zielflagge …) — ihr Rahmen
   (Container, Grund, Raster) wird hier zurückgenommen: die Maße rechnen gegen den Pause-Schirm. */
/* P = .pz-lage .pzj-look.qla[data-look] — mit Gewicht: plakat.css wird erst nach dieser Datei geladen (stile.js) und trägt Regeln wie
   .qla[data-look="weltreise"] .qlp-ticket:not([data-aktion]) (höherer Abriss mit Strichcode), die sonst hier gewönnen. */
.pz-lage .pzj-look.qla[data-look] { display: block; container-type: normal; overflow: visible; isolation: auto; background: none; margin-top: 3.4cqh; min-width: 0;
  --pzj-oben: 3.4cqh; --pzj-band: 0vmin; }
/* DAS BAND OBEN AM TICKET (Birnen, Zielflagge, Klötzchen, Päckchenband, Luftpoststreifen, Mischpult, Akkreditierungs-Schlitz): Es steht in
   --ticket-grund als Verlauf in cqmin — und cq-Einheiten in einem Verlauf rechnet Chromium gegen das Fenster (wie vmin; plakat.css, Befund c
   der Lobby). Darum misst der Abstand darunter in vmin: so liegt die Schrift unter dem Band, ob das Fenster der Schirm ist (Produkt) oder größer. */
.pz-lage .pzj-look.qla[data-look="rennen"] { --pzj-band: 3vmin; }
.pz-lage .pzj-look.qla[data-look="pixel"] { --pzj-band: 2.4vmin; }
.pz-lage .pzj-look.qla[data-look="fest"] { --pzj-band: 4.8vmin; }
.pz-lage .pzj-look.qla[data-look="kino"] { --pzj-band: 3.7vmin; }
.pz-lage .pzj-look.qla[data-look="weltreise"] { --pzj-band: 1.6vmin; }
.pz-lage .pzj-look.qla[data-look="studio"] { --pzj-band: 4.2vmin; }
.pz-lage .pzj-look.qla[data-look="fussball"] { --pzj-band: 2.2vmin; }
.pz-lage .pzj-look.qla[data-look="anime"] { --pzj-band: 6.4vmin; --pzj-oben: 8.4cqh; }   /* das Dach des Ema (Verlauf) und sein Giebel (clip-path, bis 7,4) */
.pz-lage .pzj-look.qla[data-look] .qlp-ticket { --abriss-h: 6.4cqh; --kerbe: 1.2cqh; --qr-gr: 17cqh; --code-gr: 4.6cqh; border-radius: 1.6cqh; animation: none; min-width: 0; }
.pz-lage .pzj-look.qla[data-look="anime"] .qlp-ticket { border-radius: 0 0 1.2cqh 1.2cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-einlass { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(4, auto); align-content: center;
  justify-items: start; column-gap: 2.4cqh; row-gap: .9cqh; padding: max(var(--pzj-oben), calc(var(--pzj-band) + 1.6cqh)) 2.6cqh 2cqh; text-align: left; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr-platte { padding: 1cqh; border-radius: 1.1cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke, .pz-lage .pzj-look.qla[data-look] .qlp-qr-platte::after { animation: none; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke { width: 2.8cqh; height: 2.8cqh; border-width: .4cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke.o-l { left: -1cqh; top: -1cqh; } .pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke.o-r { right: -1cqh; top: -1cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke.u-l { left: -1cqh; bottom: -1cqh; } .pz-lage .pzj-look.qla[data-look] .qlp-qr-ecke.u-r { right: -1cqh; bottom: -1cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-t-wort { grid-column: 2; font-size: max(12px, 2.6cqh); }
.pz-lage .pzj-look.qla[data-look] .qlp-t-klein { grid-column: 2; font-size: max(10px, 1.7cqh); margin-top: .6cqh; }
.pz-lage .pzj-look.qla[data-look] .qlp-code { grid-column: 2; }
.pz-lage .pzj-look.qla[data-look] .qlp-adresse { grid-column: 2; font-size: max(11px, 2.1cqh); }
.pz-lage .pzj-look.qla[data-look] .qlp-ticket .qlp-abriss { height: var(--abriss-h); padding: 0 2.6cqh; gap: 0; }   /* mit .qlp-ticket: schwerer als die Bordkarte (weltreise) */
.pz-lage .pzj-look.qla[data-look] .qlp-ticket .qlp-abriss::after { content: none; }   /* der Strichcode der Bordkarte: in der Pause kein Platz */
.pz-lage .pzj-look.qla[data-look]::before, .pz-lage .pzj-look.qla[data-look]::after { content: none; }   /* Licht und Korn der Lobby-Wand (kino, weltreise, anime) gehören nicht ans Ticket */
.pz-lage .pzj-look.qla[data-look] .qlp-hinweis { font-size: max(10px, 1.9cqh); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- online · eine Zeile unter der Frist ---- */
.pzj-zeile { display: flex; align-items: baseline; gap: 1.1cqw; max-width: 100%; margin-top: .4cqh; white-space: nowrap;
  font-size: max(11px, 2.4cqh); font-weight: 600; color: var(--t1); --code-gr: 3.6cqh; }
.pzj-zeile small { font-size: max(10px, 1.9cqh); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pz-akzent); }
.pzj-zeile .pzb-punkt { align-self: center; }
.pzj-zeile .pzj-adresse { color: var(--t0); font-weight: 700; }
.pzj-zeile .pzj-cwort { font-size: max(10px, 1.9cqh); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pzj-zeile .qlp-code { display: inline-block; color: var(--t0); font-size: max(13px, var(--code-gr)); }   /* der Code nie kleiner als die Adresse (online S) */

/* Die Tafel behält ihre Spalte: Ohne min-width: 0 dehnte die längste Zeile des Tickets sie über den Rand (die Punkte des Stands
   standen bei S abgeschnitten). Schmale Schirme: Die Regel im Abriss bricht in zwei Zeilen, der Abriss wächst mit (die Kerben auch, --perf). */
.pz-lage[data-pzj] .pzb-tafel { min-width: 0; }
@container (max-width: 900px) {
  .pz-lage .pzj-look.qla[data-look] .qlp-ticket { --abriss-h: 8.6cqh; }
  .pz-lage .pzj-look.qla[data-look] .qlp-hinweis { white-space: normal; text-align: center; text-wrap: balance; line-height: 1.2; }
}

/* Kleine Schirme (Activity S, 628 × 390): Der Stand braucht seine fünf Zeilen — das Ticket rückt näher und wird flacher, der QR bleibt
   scanbar groß (nie unter 13 % der Höhe). */
@container (max-height: 480px) {
  .pz-lage .pzj-look.qla[data-look] { margin-top: 1.6cqh; --pzj-oben: 2.6cqh; }
  .pz-lage .pzj-look.qla[data-look="anime"] { --pzj-oben: 8cqh; }
  .pz-lage .pzj-look.qla[data-look] .qlp-ticket { --qr-gr: 13cqh; --code-gr: 4.4cqh; }
  .pz-lage .pzj-look.qla[data-look] .qlp-einlass { padding: max(var(--pzj-oben), calc(var(--pzj-band) + 1.2cqh)) 2.2cqh 1.4cqh; row-gap: .4cqh; }
  .pz-lage .pzj-look.qla[data-look] .qlp-t-klein { margin-top: 0; }
}