/* =====================================================================
   Quiznight 2 · DAS PULT IN DER ONLINE-LOBBY (Tobi, 2026-10-28: „das Online-Pult auch in die Lobby reinpacken … dann ist das Quiz konsistent“;
   Zielbild A — „nimm A, aber polish das Design noch richtig auf“; dann: „ich möchte den QR-Code-Banner von der lokalen Lobby drin haben“,
   „7, 16, 24 Spieler — alles muss sauber angezeigt werden“). Gebaut in lobby/auftritt/auftritt.js (onlineAlsWand); das Bauteil ist das Pult
   der Frage (online.js, QN.pult; online-pult.css). Nur online und in Discord — der Fernseher behält seine Lobby ohne Pult.
     · OBEN die Lobby des Fernsehers, Ticket mit Abriss inklusive, um die Höhe des Pults kürzer: .qla misst sich an sich selbst (container),
       also wird alles darin im selben Maß kleiner, und die Reihe ordnet sich wie lokal
     · DARUNTER das Pult, ein Kind der Bühne wie in der Frage — so hoch wie dort (online-pult.css: 14,6 cqmin, mindestens 66 px)
   ===================================================================== */

.qn-buehne.qla-mit-pult { --qla-pult-h: calc(max(14.6cqmin, 66px) + (var(--schrift, 1) - 1) * 7cqmin); }
/* Das Feld des Zahnrads hängt in der Lobby am ganzen Schirm (auftritt.js, onlineAlsWand → QN.zahnrad flaeche) — über Wand und Pult wie das Host-Menü. */
.qn-buehne.qla-mit-pult > .qh-einstblatt { z-index: 40; }
.qn-buehne.qla-mit-pult > .qla-pult {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  --qo-leiste: var(--qla-pult-h);
}

/* DAS PLAKAT JE REIHENZAHL (Tobi, 2026-10-28: „sonst mach die Runden-Elemente kleiner … sodass der Online-Schirm mit dem Pult richtig gut aussieht“,
   dann: „erst wenn es 2 Reihen werden, müssen wir die Rundenkarten kleiner machen; ich will ja, dass bei jeder Spieleranzahl der Platz perfekt
   genutzt wird“). Online mit Pult gilt darum NICHT mehr „fest je Schirm, nie je Spielerzahl“ (auftritt.css, für den Fernseher bleibt es):
     · EINE Reihe: Titel und Rundenkarten so groß wie am Fernseher (dieselben Maße wie .qla-wand .qlp-plakat in auftritt.css), mit Themensatz
     · ZWEI Reihen (data-plakat="schlank", auftritt.js plakatReihen): das Plakat schlank — Titel und Karten geben Höhe an die Reihen ab, die Karte
       trägt Nummer und Titel, der Themensatz ruht
   Dazwischen gleitet EIN Wert (--qla-schlank, 0 → 1): Schrift, Kartenhöhe und Abstand folgen ihm, der Themensatz blendet aus und schließt seine
   Zeile — es springt nichts. Seit 04.11. auch am Fernseher (auftritt.js, jeReihe → data-je-reihe). */
@property --qla-schlank { syntax: '<number>'; inherits: true; initial-value: 0; }
.qla-wand[data-je-reihe] .qlp-plakat {
  --qla-schlank: 0;
  --titel-gr: calc(12.8cqmin - 2.4cqmin * var(--qla-schlank)); --karte-h: calc(19.5cqmin - 6.9cqmin * var(--qla-schlank));
  --plakat-luft: calc(2.6cqmin - .8cqmin * var(--qla-schlank));
  transition: --qla-schlank 720ms var(--k-ein, cubic-bezier(.2, .8, .2, 1)) var(--qla-sw-verzug, 0ms);   /* dieselbe Kurve wie das Gleiten der Plätze (900 ms): Die Karten sind stets vorn */
}
@container (max-aspect-ratio: 17/10) {
  .qla-wand[data-je-reihe] .qlp-plakat {
    --titel-gr: calc(11cqmin - .6cqmin * var(--qla-schlank)); --karte-h: calc(18.4cqmin - 5.8cqmin * var(--qla-schlank));
    --plakat-luft: calc(2cqmin - .2cqmin * var(--qla-schlank));
  }
}
.qla-wand[data-je-reihe][data-plakat="schlank"] .qlp-plakat { --qla-schlank: 1; }
/* IM SCHLANKEN PLAKAT EINE ZEILE (Tobi 06.11.: „Weltall ist gleich geblieben??"): Welten, deren Rundentitel umbrechen dürfen (Weltall,
   Küche, Sagenwelt …), bekamen im schlanken Plakat zweizeilige, also höhere Karten — die Höhe fehlte den Reihen. Hier wird der Titel kleiner
   (auftritt.js passen → namenPassen); erst wenn er auch am kleinsten nicht passt, bricht er (qlp-bricht). */
.qla.qla-wand[data-je-reihe][data-plakat="schlank"] .qlp-k-titel:not(.qlp-bricht) { white-space: nowrap; text-wrap: nowrap; }
/* DAS SIGNAL NEBEN DEM TITEL schrumpft mit (Tobi 06.11.: „bei Gaming in der Lobby sind die Herzen bei dem Zeitscreen abgeschnitten"):
   Es misst sich an --signal-b, einer festen Breite — im schlanken Plakat ist sein Kasten (die Titelzone) aber niedriger, und die Konsole
   des Gamings ragte 40 px unter die Rundenkarten. Mit dem Plakat gleitet es auf drei Viertel, um die Mitte seines Kastens. */
.qla-wand[data-je-reihe] .qla-signalplatz > * { scale: calc(1 - .25 * var(--qla-schlank)); }
.qla-wand[data-je-reihe] .qlp-k-kurz {
  opacity: clamp(0, calc(1 - 1.7 * var(--qla-schlank)), 1); max-height: calc((1 - var(--qla-schlank)) * 4.2em); overflow: hidden;
  margin-top: calc(-.6cqmin * var(--qla-schlank));
}
/* Steht ein Rundentitel in zwei Zeilen („Über den Tellerrand“, „Einmal um die Erde“ — Welten, die umbrechen dürfen, oder ein Titel, der kleiner als
   die Mindestschrift würde), bekommen die schlanken Karten dieses Sets Platz dafür (auftritt.js, zweiZeilen); abgeschnitten wird nie. Die volle
   Karte hat den Platz ohnehin (passt der Themensatz dann nicht mehr, ruht er: plakat.js, kartenPruefen). */
.qla-wand[data-je-reihe] .qlp-plakat[data-zwei-zeilen] { --karte-h: calc(19.5cqmin - 3.1cqmin * var(--qla-schlank)); }
@container (max-aspect-ratio: 17/10) {
  .qla-wand[data-je-reihe] .qlp-plakat[data-zwei-zeilen] { --karte-h: calc(18.4cqmin - 2cqmin * var(--qla-schlank)); }
}

/* DIE MINDESTSCHRIFT in der niedrigeren Wand: Online mit Pult misst sich die Wand an ihrer eigenen, um das Pult kleineren Höhe — bei 628 × 390
   fielen „Runde“, der Themensatz, „Code“, „Es spielen“ und der Satz im Abriss unter 9 px (7,4–8,9 px). Sie bleiben bei 9 px; passt ein Themensatz
   dann nicht mehr in seine Karte, ruht er in allen (plakat.js, kartenPruefen) — abgeschnitten wird nichts. */
.qn-buehne.qla-mit-pult > .qla-wand .qlp-plakat { --knr-wort: max(9px, 2.4cqmin); --kkurz-gr: max(9px, 2.3cqmin); }
.qn-buehne.qla-mit-pult > .qla-wand .qla-besetzung-wort { font-size: max(9px, 2.6cqmin); }
.qn-buehne.qla-mit-pult > .qla-wand .qlp-t-klein { font-size: max(9px, 2.4cqmin); }
.qn-buehne.qla-mit-pult > .qla-wand .qlp-hinweis { font-size: max(9px, 2.8cqmin); }

/* In Discord steht im Ticket der Satz zur Activity — der QR-Code macht ihm Platz (bei 628 × 390 ragte sonst „Mitspielen“ aus dem Ticket). */
.qn-buehne.qla-mit-pult > .qla[data-online="discord"] .qlp-ticket { --qr-gr: 22cqmin; }
/* … und in der niedrigsten Wand (628 × 390, Wand 324 px) noch mehr: „Mitspielen“ stand 3 px unter der Kante (die Luftpost-Streifen der Weltreise
   liefen durch die Schrift), und beim Anhänger des Anime lag der Satz 8 px auf der Abrisslinie. Wie beim Ticket mit Knöpfen (auftritt.css,
   max-height 460px) weicht das Wort „Code“ — der Code selbst bleibt —, und der QR-Code wird etwas kleiner. */
@container (max-height: 360px) {
  .qn-buehne.qla-mit-pult > .qla[data-online="discord"] .qlp-ticket { --qr-gr: 19cqmin; }
  .qn-buehne.qla-mit-pult > .qla[data-online="discord"] .qlp-t-klein { display: none; }
}
/* Der Satz zu Discord in der Tinte des Tickets: Auf den hellen Tickets (Anime, Geschichte, Tierwelt, Fußball — Tunnel und Album) stand er hell auf hell —
   dieselbe Tinte wie die Adresse darüber (plakat.css), „Activity“ im dunklen Blau von Discord. */
.qn-buehne.qla-mit-pult > .qla[data-look="anime"] .qlp-discord { color: color-mix(in srgb, var(--an-tusche) 82%, var(--an-holz-tief)); }
.qn-buehne.qla-mit-pult > .qla[data-look="geschichte"] .qlp-discord { color: #5b3e22; }
.qn-buehne.qla-mit-pult > .qla[data-look="tierwelt"] .qlp-discord { color: #5a3b1c; }
.qn-buehne.qla-mit-pult > .qla[data-look="fussball"] .qlp-discord { color: #34435a; }
.qn-buehne.qla-mit-pult > .qla[data-look="album"] .qlp-discord { color: var(--qlp-al-druck); }
.qn-buehne.qla-mit-pult > .qla:is([data-look="anime"], [data-look="geschichte"], [data-look="tierwelt"], [data-look="fussball"], [data-look="album"]) .qlp-discord b { color: color-mix(in srgb, #5865f2 72%, #000); }

/* Der Knopf des Pults zählt beim Start mit (onlineAlsWand: data-zaehlt) — die Zahl groß, ohne Wackeln. */
.qla-pult .qla-pult-los[data-zaehlt] .qo-los-t { font-variant-numeric: tabular-nums; }
/* „Bereit“ (Gast, gesendet): der Haken in der Größe der Schrift, neben dem Wort — er verdrängte es sonst (das Zeichen hat keine eigene Größe) */
.qla-pult .qla-pult-los [data-knopf-text] { display: inline-flex; align-items: center; justify-content: center; gap: .32em; white-space: nowrap; }
.qla-pult .qla-pult-los [data-knopf-text] svg { width: .95em; height: .95em; flex: none; }
/* Die Kappe fasst ihr Wort: In der Frage ist sie fest 30 cqmin breit (online-pult.css) — „ICH BIN BEREIT“ in der Pixelschrift (Gaming) ist
   bei 628 × 390 breiter und war abgeschnitten (Prüfer, 28.10.). Hier ist sie mindestens so breit, sonst so breit wie ihr Wort. */
.qo-pult.qla-pult .qla-pult-los .qo-kappe { width: auto; min-width: 30cqmin; max-width: none; }

/* ---- QUIZ ÄNDERN (nur der Host; auftritt.js pultTeile — derselbe Weg wie „Anderes Set“ an der Krone; Tobi 28.10.: „nimm A“). Links neben
   „Quiz starten“ eine zweite Taste im Rahmen der Welt (--taste-rahmen), die Kappe dunkel, Zeichen über dem Wort — wie „Neues Set“ im Tastenfeld
   des Abendendes. Trefferfläche mindestens 48 × 48 px, Schrift mindestens 9 px; gesperrt (aria-disabled), sobald gezählt wird.
   Beide Tasten so hoch wie die Reihe des Pults (wie „Quiz starten“ allein bzw. „Ich bin bereit“) — nichts wird größer als in der Frage. */
.qo-leiste.qo-pult .qla-pult-rechts { grid-column: 4; grid-row: 1; align-self: stretch; display: flex; align-items: stretch; gap: 1.2cqmin; min-width: 0; }
.qla-pult .qla-pult-anders {
  flex: none; display: flex; align-items: stretch; box-sizing: border-box; min-width: 48px; min-height: 48px; margin: 0; border: 0; padding: 1.1cqmin;
  border-radius: var(--taste-rund, 2.6cqmin); background: var(--taste-rahmen);
  box-shadow: var(--taste-schatten, 0 1cqmin 2.4cqmin rgba(0, 0, 0, .6), inset 0 .3cqmin 0 rgba(255, 255, 255, .16));
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.qla-pult .qla-pult-anders:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: max(2px, .4cqmin); }
.qla-pult .qla-pult-anders[aria-disabled="true"] { cursor: default; opacity: .38; filter: saturate(.3); }
.qla-pult .qla-anders-kappe {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqmin;
  flex: 1 1 auto; align-self: stretch; min-width: max(42px, 10.5cqmin); padding: .4cqmin 1.3cqmin; box-sizing: border-box;
  border-radius: calc(var(--taste-rund, 2.6cqmin) - .9cqmin);
  font-family: var(--f-display); font-weight: 800; font-size: max(9px, calc(1.9cqmin * min(var(--schrift, 1), 1.25))); line-height: 1.05; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g2) 90%, #000), var(--g0)); color: var(--t0);
  box-shadow: inset 0 0 0 .25cqmin color-mix(in srgb, var(--t0) 16%, transparent), inset 0 .3cqmin 0 rgba(255, 255, 255, .08);
  transition: transform var(--d-kurz) var(--k-ein);
}
.qla-pult .qla-anders-kappe svg { flex: none; display: block; width: max(15px, 3.4cqmin); height: max(15px, 3.4cqmin); }
.qla-pult .qla-pult-anders:not([aria-disabled]):hover .qla-anders-kappe { transform: translateY(-.3cqmin); }
.qla-pult .qla-pult-anders:not([aria-disabled]):active .qla-anders-kappe { transform: translateY(.6cqmin); }
/* Kino: Der Rahmen der Taste trägt den unteren Arm der Klappe (online-pult.css) — die zweite Taste ist keine Klappe, sie nimmt nur das Schwarz. */
.qla-pult[data-welt="kino"] .qla-pult-anders { background: linear-gradient(180deg, #2b2b31, #121215); }
.qla-pult[data-welt="pixel"] .qla-pult-anders, .qla-pult[data-welt="pixel"] .qla-anders-kappe { border-radius: 0; }
.qla-pult[data-welt="pixel"] .qla-anders-kappe { font-family: var(--f-mono); text-transform: uppercase; }
/* Die zweite Taste tritt mit dem Pult auf wie „Quiz starten“ (online.css: .qo-lf .qo-los). Wechselt der Host (auftritt.js api.rolle), steigen
   die neuen Tasten weich auf — nur sie, das Pult bleibt stehen.
   NUR RÜCKWÄRTS GEFÜLLT (backwards, nicht both): Mit „both“ hielt die Animation nach dem Auftritt ihr Ende fest (opacity 1) — und das schlug die
   Sperre (aria-disabled: opacity .38): Beim Countdown sahen „Quiz ändern“ und „Einladen“ aktiv aus (BAU-LOBBY.md, Befund b). Das Ende der
   Animation ist der Ruhezustand der Taste, ohne Füllung danach gilt wieder ihre eigene Deckkraft. */
.qo-lf.qla-pult .qla-pult-anders { animation: qo-auf var(--d-lang) var(--k-schnapp) 380ms backwards; }
.qla-pult .qla-rolle-neu { animation: qo-auf var(--d-lang) var(--k-schnapp) backwards; }
.qla-pult .qla-rolle-neu .qo-los, .qla-pult .qla-rolle-neu .qla-pult-anders { animation: none; }
@media (prefers-reduced-motion: reduce) { .qla-pult .qla-rolle-neu, .qo-lf.qla-pult .qla-pult-anders { animation: none; } }