/* =====================================================================
   Quiznight 2 · DER ONLINE-SCHIRM (online.js) — Online/Discord: EIN
   Schirm je Spieler, die Eingabe an der Wand, die Leiste unten im Fenster.

   Wie qn.css in KEINER Ebene. Alles heißt `qo-*` — blanke Klassen
   kollidierten mit dem CSS der Kategorien. Maße in cqmin der Bühne (sie
   ist quer, also rechnet cqmin gegen die Höhe: 100cqmin = Schirmhöhe).
   Farben nur als Rollen: --acc/--acc2 die Bühne, --jetzt was sich gerade
   ändert, --du genau einmal (an der eigenen Karte — nicht hier),
   --ok/--warn/--bad nur in der Auflösung und nie ohne Zeichen.
   ===================================================================== */

/* ---- Der Schirm: drei Reihen — Kopf, Wand, Leiste ------------------- */
/* --qo-leiste ist die Höhe der Leiste: Was eine Wand absolut über die ganze
   Bühne legt (der Rundblick der Geo-Wand), endet darüber. Mindestens 66 px —
   auf S wären 14,6 cqmin nur 57, zu flach für eine Kappe von 48 px mit Luft;
   größere Schrift (Zahnrad: 125 / 150 %) macht sie höher, nicht enger. Frage,
   Auflösung, Tafel und Abendende tragen dieselbe Höhe: Beim Wechsel springt
   nichts. */
.qn-buehne.qo-schirm {
  --qo-leiste: calc(max(14.6cqmin, 66px) + (var(--schrift, 1) - 1) * 9cqmin);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Das Zahnrad steht im Kopf, wo am Bigscreen die Uhr steht (die Uhr
   wohnt online in der Leiste). Sichtbar klein, tippbar groß. */
.qo-schirm .qn-kopf { padding-right: 12cqmin; }
.qo-schirm > .qh-zahnrad { top: 1.6cqmin; right: 3cqmin; width: 6.2cqmin; height: 6.2cqmin; }
/* Sichtbar skaliert es mit allem anderen (Tobi 04.11.: „warum sind Timer, Krone und Einstellungen auf kleiner Größe so riesig … kann man
   doch einfach runterskalieren“); vorher hielten max(40px, …) Zahnrad, Krone und Uhr auf S (628 × 390, 1 cqmin = 3,9 px) groß.
   Die Trefferfläche bleibt mindestens 48 px — unsichtbar, über ::before (qn.css, .qh-zahnrad::before). */
.qo-schirm > .qh-zahnrad svg { width: 3.6cqmin; height: 3.6cqmin; }
/* Das Blatt des Zahnrads: rechts verankert, so breit wie ein Telefon. Die
   Karte ist ein eigener Container — ihr Inhalt rechnet gegen ihre Breite,
   so trägt das Blatt dieselben Verhältnisse wie am Handy. */
.qo-schirm > .qh-einstblatt { z-index: 40; }
.qo-schirm .qh-einst-karte {
  container-type: inline-size; width: 62cqmin; max-width: 100%; max-height: 94%;
  margin: 0 3cqmin 0 auto; padding: 1.6cqmin 2.6cqmin 2.6cqmin; gap: 1.6cqmin;
  border-radius: 3cqmin 3cqmin 0 0;
}

/* =====================================================================
   DIE LEISTE — „Die Zeile" (online.js, Block DIE LEISTE). Schriftsatz wie
   eine Sendegrafik: oben die Zeitschiene (die Zahl ist ihr Kopf), darunter
   eine Zeile ohne Kasten, rechts über beide der eine Knopf. Keine Kästen —
   Linien trennen. Alles Lesbare mindestens 9 px (auf S ist 1cqmin = 3,9 px),
   die Kappe mindestens 48 px hoch; nur Rollen, --du steht an der Wand und
   nie hier; Bewegung nur transform und opacity.
   ===================================================================== */
.qo-leiste {
  --qo-z-zh: max(14px, calc(3.2cqmin * var(--schrift, 1)));      /* die Zeitschiene */
  --qo-etikett: max(9px, calc(1.7cqmin * var(--schrift, 1)));    /* Etiketten in Versalien */
  --qo-neben: max(9px, calc(2.2cqmin * var(--schrift, 1)));      /* Nebenzeilen */
  --qo-kh: max(48px, 8.6cqmin);                                   /* die Kappe des Knopfs */
  grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--qo-z-zh) minmax(0, 1fr);
  column-gap: 3.4cqmin; row-gap: .9cqmin; align-items: center;
  height: var(--qo-leiste, 14.6cqmin); padding: 1.5cqmin 3.4cqmin 1.6cqmin;
  /* Halb durchsichtig: Das Motiv des Sets läuft unter der Leiste weiter. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 86%, transparent), color-mix(in srgb, var(--g0) 95%, transparent));
  box-shadow: 0 -1.6cqmin 4cqmin color-mix(in srgb, var(--g0) 50%, transparent),
              inset 0 max(1px, .2cqmin) 0 color-mix(in srgb, var(--t0) 8%, transparent);
  font-family: var(--f-body);
}
.qo-leiste > * { min-width: 0; }

/* ---- Die Zeitschiene: Zahl und Zellen sind EIN Ding --------------------
   Die Zellen brennen zur Zahl hin ab; das letzte Viertel gehört „jetzt".
   In der Auflösung dieselbe Schiene als „weiter in"; rechts daneben der
   Tisch (Frage), die Daten (Auflösung), das Nächste (Tafel). */
.qo-z-zeit { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 1.6cqmin; min-width: 0; height: var(--qo-z-zh); }
.qo-uhr {
  flex: none; min-width: 0; display: flex; align-items: baseline; gap: .35cqmin;
  font-family: var(--f-mono); font-weight: 700; color: var(--t0); font-variant-numeric: tabular-nums;
}
.qo-uhr b { display: inline-block; font-size: calc(var(--qo-z-zh) * 1.05); line-height: 1; letter-spacing: -.03em; }
.qo-uhr > span { font-size: var(--qo-etikett); color: var(--t2); }
.qo-uhr em {
  margin-right: .5cqmin; font-family: var(--f-body); font-style: normal; font-size: var(--qo-etikett); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t2); white-space: nowrap;
}
.qo-knapp .qo-uhr { color: var(--jetzt); }
.qo-knapp .qo-uhr b { animation: qo-z-puls calc(var(--d-xl) * 1.1) var(--k-ein) infinite; }
@keyframes qo-z-puls { 0%, 100% { transform: none; } 30% { transform: scale(1.14); } }
.qo-energie {
  position: relative; flex: 1 1 auto; min-width: 8cqmin; height: max(4px, .9cqmin); border-radius: 10cqmin; overflow: hidden;
  background: color-mix(in srgb, var(--t0) 8%, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--zellen) - .45cqmin), transparent 0 calc(100% / var(--zellen)));
          mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--zellen) - .45cqmin), transparent 0 calc(100% / var(--zellen)));
}
.qo-e-fuell {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--rest, 1));
  background: linear-gradient(90deg, var(--acc2), var(--acc));
  transition: transform var(--d-kurz) linear;
}
.qo-knapp .qo-e-fuell { background: var(--jetzt); }
.qo-knapp .qo-energie { animation: qo-flacker var(--d-xl) ease-in-out infinite; }
/* In der Auflösung füllt sich die Schiene aus dem Stand der Frage zum „weiter". */
@keyframes qo-flacker { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- Die Runde: „6/10 eingeloggt" — eine Zahl, nie Köpfe oder ein Wert -- */
.qo-tischwort { font-size: var(--qo-neben); font-weight: 600; line-height: 1.2; color: var(--t1); white-space: nowrap; }
.qo-tischwort b { display: inline-block; font-family: var(--f-display); font-weight: 800; color: var(--t0); }
.qo-alle .qo-tischwort b { color: var(--acc); }

/* ---- Die Zeile der Frage: meine Wahl und ihr Zustand, ohne Kasten ------
   Eine Linie darunter sagt den Zustand: leer nichts, gewählt „jetzt",
   abgeschickt die Bühne — und dann atmet sie. Die Zeile unter der Wahl ist
   EINE Zeile: Ein Zustand bricht nie mitten im Satz („Noch nicht /
   abgeschickt"); passt sie nicht, gehen erst ihre Nebenteile, dann sie
   (online.js, passe). */
.qo-anzeige {
  grid-column: 1; grid-row: 2; position: relative; align-self: center;
  display: flex; align-items: center; gap: 1.6cqmin; min-width: 0; min-height: 0; padding: .5cqmin 0 .9cqmin;
}
.qo-anzeige::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: max(2px, .3cqmin); border-radius: 10cqmin; pointer-events: none;
  background: linear-gradient(90deg, var(--jetzt), transparent 85%);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  transition: transform var(--d-lang) var(--k-ein), opacity var(--d-kurz) var(--k-ein);
}
.qo-anzeige[data-zustand="gewaehlt"]::after { transform: none; opacity: 1; }
.qo-anzeige[data-zustand="gesendet"]::after { transform: none; opacity: 1; background: linear-gradient(90deg, var(--acc), transparent 85%); }
.qo-gesendet .qo-anzeige::after { animation: qo-atmen calc(var(--d-xl) * 3.1) ease-in-out var(--d-lang) infinite; }
@keyframes qo-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.qo-a-formen { flex: none; display: grid; grid-template-columns: repeat(2, 2.6cqmin); gap: .5cqmin; padding-left: .4cqmin; color: var(--t2); }
.qo-a-formen .qh-form { width: 2.6cqmin; height: 2.6cqmin; display: block; fill: currentColor; }
.qo-a-formen .qh-form:nth-child(odd) { opacity: .75; }
.qo-a-marke, .qo-los-marke {
  flex: none; display: flex; align-items: center; gap: .5cqmin;
  padding: .7cqmin 1.2cqmin .7cqmin .8cqmin; border-radius: 10cqmin;
}
.qo-a-marke { background: var(--acc); color: var(--auf-acc); }
.qo-a-marke .qh-form, .qo-los-marke .qh-form { width: 2.7cqmin; height: 2.7cqmin; display: block; fill: currentColor; }
.qo-a-marke b, .qo-los-marke b { font-family: var(--f-display); font-weight: 800; font-size: max(9px, calc(2.6cqmin * var(--schrift, 1))); line-height: 1; }
.qo-a-t { flex: 1 1 auto; min-width: 0; display: grid; gap: .3cqmin; }
.qo-a-t b {
  font-family: var(--f-display); font-weight: 800; font-size: calc(3.2cqmin * var(--schrift, 1));
  line-height: 1.1; color: var(--t0); overflow-wrap: break-word;
}
/* Die Zeile ist, was man liest: der Name der Wahl eine Stufe größer (Zahlen,
   Jahr, Koordinate der Arten behalten ihre eigene Größe). */
.qo-a-t > b:not([class]) { font-size: max(13px, calc(3.8cqmin * var(--schrift, 1))); }
.qo-a-t em {
  font-style: normal; font-size: var(--qo-neben); font-weight: 700; line-height: 1.25; color: var(--t2);
  white-space: nowrap; min-width: 0;
}
.qo-anzeige[data-zustand="gewaehlt"] .qo-a-t em { color: var(--jetzt); }
.qo-anzeige[data-zustand="gesendet"] .qo-a-t em { color: var(--t1); }
.qo-a-stempel {
  flex: none; width: 5cqmin; height: 5cqmin; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc); color: var(--auf-acc); opacity: 0; transform: scale(.4);
}
.qo-a-stempel svg { width: 3cqmin; height: 3cqmin; }
.qo-anzeige[data-zustand="gesendet"] .qo-a-stempel { opacity: 1; transform: none; }

/* Maus oder Finger: Die Leiste nennt die Tasten nur, wo es welche gibt. */
.qo-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .qo-maus { display: none; }
  .qo-touch { display: inline; }
}

/* ---- Der Knopf: eine Kappe auf einem Sockel — und er sagt, was er tut. */
.qo-los {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  position: relative; display: block; min-width: 0; margin: 0; padding: 0 0 .9cqmin; border: 0;
  border-radius: 2.8cqmin; background: none; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.qo-los::before {
  content: ""; position: absolute; left: 0; right: 0; top: .9cqmin; bottom: 0; border-radius: 2.8cqmin;
  background: color-mix(in srgb, var(--g0) 78%, var(--acc2));
  box-shadow: 0 .8cqmin 1.8cqmin color-mix(in srgb, var(--g0) 70%, transparent);
}
/* Getroffen wird er über seine Kante hinaus, innerhalb der Leiste. */
.qo-los::after { content: ""; position: absolute; inset: -1.8cqmin -1.2cqmin; }
.qo-los .qo-kappe {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1.4cqmin;
  min-width: 31cqmin; min-height: var(--qo-kh); padding: 1cqmin 2.8cqmin; border-radius: 2.8cqmin; overflow: hidden;
  /* Der Knopf wächst mit der Schrift nur bis 125 % — sonst nähme er der
     Zeile die Breite, und die ist, was man lesen muss. */
  font-family: var(--f-display); font-weight: 800; font-size: calc(3.2cqmin * min(var(--schrift, 1), 1.25));
  line-height: 1.1; letter-spacing: -.01em; text-align: center; white-space: nowrap;
  transition: transform var(--d-kurz) var(--k-ein);
}
.qo-los[data-zustand="leer"] { cursor: default; }
.qo-los[data-zustand="leer"] .qo-kappe {
  background: var(--g2); color: var(--t2); font-size: max(10px, calc(2.5cqmin * min(var(--schrift, 1), 1.25))); font-weight: 700;
  box-shadow: inset 0 0 0 .24cqmin color-mix(in srgb, var(--t0) 12%, transparent);
}
.qo-los[data-zustand="gewaehlt"] .qo-kappe {
  background: linear-gradient(180deg, var(--acc2), color-mix(in srgb, var(--acc2) 72%, var(--acc)));
  color: var(--auf-acc2);
  box-shadow: inset 0 .4cqmin 0 color-mix(in srgb, var(--t0) 22%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc2) 32%, transparent);
}
.qo-los[data-zustand="gesendet"] .qo-kappe {
  transform: translateY(.6cqmin);
  background: color-mix(in srgb, var(--acc) 22%, var(--g2)); color: var(--t0);
  box-shadow: inset 0 0 0 .3cqmin var(--acc);
}
.qo-los[data-zustand="gewaehlt"]:hover .qo-kappe { transform: translateY(-.3cqmin); }
.qo-los:not([data-zustand="leer"]):active .qo-kappe { transform: translateY(.8cqmin); }
.qo-los:focus-visible { outline: .3cqmin solid var(--t0); outline-offset: .4cqmin; }
.qo-los-marke { background: color-mix(in srgb, var(--auf-acc2) 16%, transparent); }
.qo-los-haken svg { width: 3.2cqmin; height: 3.2cqmin; display: block; }
.qo-kbd {
  font-family: var(--f-mono); font-size: max(9px, 1.7cqmin); font-weight: 700; letter-spacing: .02em;
  padding: .35cqmin .8cqmin; border-radius: .8cqmin; opacity: .72;
  box-shadow: inset 0 0 0 .2cqmin currentColor;
}
.qo-zu .qo-los { cursor: default; }
/* Große Schrift: Der Tastenhinweis geht, die Breite gehört der Zeile. */
.qh-gross .qo-kbd { display: none; }
.qo-los .qo-kappe > i.qo-blitz {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--t0) 58%, transparent) 50%, transparent 80%);
  animation: qo-welle var(--d-lang) var(--k-ein) both;
}
@keyframes qo-welle { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- Die Tasten an der Wand (die Kategorie malt ihre Zustände) ------- */
.qo-eingabe .qo-taste { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qo-zu .qo-taste, .qo-alle .qo-taste { cursor: default; }

/* ---- ABGESCHICKT IST FEST (online.js, sperre → `qo-gesperrt` am Schirm) --
   Tobi, 02.10.2026: „Man muss absenden und kann danach nichts mehr ändern."
   Nach dem Abschicken tut keine Fläche der Wand mehr etwas — und so sieht es
   auch aus: Die Flächen fangen keinen Zeiger mehr (kein Greifen, kein
   Hand-Zeiger, nichts hebt sich unter der Maus), das Schreibfeld hat keine
   Schreibmarke, der Knopf ist erledigt und drückt sich nicht mehr. Die Karte
   (Art „karte") bleibt zum Ansehen beweglich — nur ihr Pin ist fest (das
   Deck fragt steuer.zu). Für alle Kategorien an EINER Stelle, darum mit
   !important: Die Wände setzen ihre Zeiger selbst und oft genauer. */
.qo-gesperrt .qo-taste, .qo-gesperrt .qo-f-taste, .qo-gesperrt .qo-f-flaeche, .qo-gesperrt .qo-zeiger,
.qo-gesperrt .qo-zieh, .qo-gesperrt .qo-strahl, .qo-gesperrt .qo-schreibfeld, .qo-gesperrt .qo-feld {
  pointer-events: none !important; cursor: default !important;
}
.qo-gesperrt .qo-schreibfeld, .qo-gesperrt .qo-tipp { caret-color: transparent; -webkit-user-select: none; user-select: none; }
.qo-gesperrt.qo-schreib-art > *, .qo-gesperrt.qo-schreib-art .qo-anzeige, .qo-gesperrt .qo-a-schreib { cursor: default !important; }
.qo-gesperrt .qo-j-zeiger { opacity: 0 !important; }
.qo-los[data-zustand="gesendet"], .qo-los[aria-disabled="true"] { cursor: default; }
.qo-los[data-zustand="gesendet"]:active .qo-kappe { transform: translateY(.6cqmin); }
/* Der Regler steht fest: Sein Wert trägt den Haken — an der Tafel des Läufers
   (strahl.js) wie an der Fahne der Bahn (QN.bahn, auch am Zeitstrahl von
   Wann & wo). Eine Karte zeigt es an ihrem Schild („Deine Wahl"), die Nadel
   der Peilung an ihrer Farbe (Bauteil „kompass", data-zustand). */
.qo-schirm { --qo-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 12.9 9.5 17.9 19.6 6.6'/%3E%3C/svg%3E"); }
.qo-gesperrt .qo-rg-bahn .qs-dein .qs-tafel::before,
.qo-gesperrt .qo-rg-bahn .qn-bahn .fahne::before, .qo-gesperrt .qo-j-bahn .qn-bahn .fahne::before {
  content: ""; flex: none; display: inline-block; width: .8em; height: .8em; margin-right: .32em; vertical-align: -.06em;
  background: currentColor; -webkit-mask: var(--qo-haken) center / contain no-repeat; mask: var(--qo-haken) center / contain no-repeat;
}

/* ---- Die Taste wandert, ihre Trefferfläche bleibt (Tobi, 2026-09-25) ----
   Hob sich eine Taste unter dem Zeiger (oder rückte sie gewählt vor), nahm
   sie ihre Trefferfläche mit: Stand der Zeiger knapp an der Kante, von der
   sie wegrückte, fiel :hover ab, sie sank zurück, :hover griff wieder — sie
   flatterte (Playwright: „element is not stable“). Jetzt geht die Taste
   ihren Weg über --qo-weg-x/--qo-weg-y (translate), und ihr ::before geht
   ihn im selben Takt zurück: Die Fläche für :hover und Klick bleibt, wo die
   Taste ruht; sichtbar ist es derselbe Weg mit derselben Kurve.
   Wer wandert, trägt .qo-wandert (die Kategorie am Markup, online.js an
   seinen Knöpfen). Die Regeln setzen dann nur die zwei Werte, nie translate,
   und der Übergang läuft auf ihnen (transition: --qo-weg-y …) — so rechnen
   Taste und ::before in jedem Bild denselben Wert. Braucht die Trefferfläche
   eine eigene Form (48-px-Hof, Luft zwischen Kacheln), setzt die Kategorie
   sie am ::before selbst; der Rahmen hier wiegt nichts (:where). Wer das
   ::before schneidet (overflow an der Taste), nimmt ihr die Fläche wieder —
   darum schneidet eine wandernde Taste online nichts ab (overflow: visible;
   Chromium schneidet den Treffer auch bei nur einer geschnittenen Achse und
   auch mit overflow-clip-margin genau am Rand). */
@property --qo-weg-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --qo-weg-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
.qo-wandert { translate: var(--qo-weg-x) var(--qo-weg-y); }
.qo-wandert::before {
  --qo-weg-x: inherit; --qo-weg-y: inherit;
  translate: calc(-1 * var(--qo-weg-x)) calc(-1 * var(--qo-weg-y));
}
:where(.qo-wandert)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---- Die Karte an der Wand (Art „karte" — Geo-Tipp) ------------------ */
/* Der Rundblick (rundblick.js) legt Foto, Hinweise und Minikarte absolut
   über die ganze Bühne — online endet er über der Leiste, und das Fenster
   der Auflösung startet dort, wo die Minikarte dann steht. */
.qn-buehne.qo-schirm > .rb { bottom: var(--qo-leiste); }
.qn-buehne.qo-schirm > .rb-portal { bottom: calc(2.8cqmin + 6cqmin + var(--qo-leiste)); }

/* Die Minikarte ist die Taste: Sie hebt sich unter dem Zeiger. */
.qo-eingabe .qo-oeffner { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qo-oeffner .rb-mini-kreis { transition: transform var(--d-mittel) var(--k-schnapp); }
.qo-oeffner:hover .rb-mini-kreis, .qo-oeffner:focus-visible .rb-mini-kreis { transform: scale(1.05); }
.qo-oeffner:focus-visible .rb-mini-kreis { outline: .35cqmin solid var(--t0); outline-offset: .6cqmin; border-radius: 50%; }
.qo-zu .qo-oeffner { cursor: default; }
/* Steht ein Pin, trägt die Minikarte ihn: die Nadel in „du" statt „?" — das
   eine Türkis, solange die Karte zu ist (offen trägt es das Visier). */
.qo-hat .qo-oeffner .rb-mini-pin svg { fill: var(--du); stroke: var(--auf-du); }
.qo-hat .qo-oeffner .rb-mini-pin b { opacity: 0; }
.qo-hat .qo-oeffner .rb-puls { opacity: 0 !important; animation: none; }
/* Offen: Die Hinweise rücken in den Streifen links neben der Karte. */
.qo-karte-auf .rb-links { margin-right: calc(var(--qo-kb) + 6.8cqmin); }

/* Das Fenster der Karte: rechts, unter der Frage, über der Leiste. Es wächst
   aus der Minikarte. Innen rechnet es wie ein Telefon (container) — so
   stehen Pin und Rasten im selben Verhältnis wie am Handy. */
.qo-schirm { --qo-kb: min(96cqmin, calc(100% - 6.8cqmin)); }
.qo-karte {
  position: absolute; z-index: 8; right: 3.4cqmin; top: 24cqmin; bottom: calc(var(--qo-leiste) + 2.8cqmin);
  width: var(--qo-kb); container-type: size; display: flex; flex-direction: column;
  border-radius: 3.2cqmin; background: var(--g0);
  box-shadow: 0 2cqmin 6cqmin color-mix(in srgb, var(--g0) 72%, transparent),
              0 0 0 .3cqmin color-mix(in srgb, var(--acc) 55%, transparent);
  transform-origin: calc(100% - 14cqmin) calc(100% - 14cqmin);
  transform: scale(.3); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--d-lang) var(--k-ein), opacity var(--d-mittel) var(--k-ein), visibility 0s linear var(--d-lang);
}
.qo-karte.auf {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform var(--d-lang) var(--k-schnapp), opacity var(--d-kurz) var(--k-ein), visibility 0s;
}
.qo-k-flaeche { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: inherit; overflow: hidden; }
.qo-k-fehlt { margin: auto; color: var(--t2); font-size: 4cqmin; }
/* Das Karten-Deck des Pults — seine Rahmenregeln gelten in qn.css nur in der
   Hand (.qn-hand.qh-pk); hier dieselben, gegen das Fenster gerechnet. */
.qo-karte .qh-pk-platz { min-height: 0; gap: 0; }
.qo-karte .qh-pk-karte {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; isolation: isolate;
  border-radius: 0; background: var(--g0); box-shadow: none; cursor: crosshair;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.qo-karte .qh-pk-karte .qk-rasten { top: auto; bottom: 9cqmin; right: 2.4cqmin; transform: none; z-index: 5; gap: 1.2cqmin; }
.qo-karte .qk-rasten button { min-width: 17cqmin; height: 10.4cqmin; padding: 0 2.2cqmin; font-size: 3.2cqmin; }
.qo-karte .qk-rasten button.an { background: var(--acc); color: var(--auf-acc); }
/* Abgeschickt: Der Pin steckt, sein Ring atmet (Pin selbst: qn.css). */
.qo-gesendet .qo-karte .qh-pk-n-kopf { transform: translate(-50%, -88%); }
.qo-gesendet .qo-karte .qh-pk-n-ring::before {
  content: ""; position: absolute; inset: -1.8cqmin; border-radius: 50%;
  box-shadow: 0 0 0 .5cqmin color-mix(in srgb, var(--du) 70%, transparent);
  animation: qh-pk-atmet 2.4s ease-in-out infinite;
}
/* „Zum Foto": oben links in der Karte. */
.qo-k-zu {
  position: absolute; z-index: 9; left: 2.4cqmin; top: 2.4cqmin; height: 12.4cqmin; min-width: 24cqmin;
  display: flex; align-items: center; justify-content: center; gap: 1.2cqmin; padding: 0 2.4cqmin;
  border: 0; border-radius: 2.2cqmin; cursor: pointer; font: 700 3.3cqmin var(--f-body); color: var(--t0);
  background: color-mix(in srgb, var(--g0) 80%, transparent);
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 18%, transparent), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .45);
  transition: --qo-weg-y var(--d-kurz) var(--k-schnapp);
}
.qo-k-zu svg { width: 5cqmin; height: 5cqmin; flex: none; }
.qo-k-zu:hover { --qo-weg-y: -.4cqmin; }
.qo-k-zu:focus-visible { outline: .4cqmin solid var(--t0); outline-offset: .4cqmin; }

/* ---- Die Karte AN ORT UND STELLE (Art „karte" mit on.hier — Wann & wo ②) ----
   Die kleine Karte der Wand ist selbst die Eingabe: Das Karten-Deck füllt
   ihre Fläche. Pin und Geist sind hier kleiner als am Handy (die Fläche ist
   rund 44 % der Bühne hoch); gegriffen wird der Pin trotzdem auf mindestens
   48 Punkten (qn.js, PK_GREIF). − / + oben rechts: Unten stehen Apples
   Zeichen und das Rechtliche. */
.qo-k-hier { touch-action: none; }
.qo-k-hier .qh-pk-platz { position: absolute; inset: 0; min-height: 0; gap: 0; }
.qo-k-hier .qh-pk-karte {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; isolation: isolate;
  border-radius: inherit; background: var(--g0); cursor: crosshair;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.qo-k-hier .qh-pk-n-kopf { width: 7.2cqmin; height: 7.2cqmin; }
.qo-k-hier .qh-pk-n-schatten { width: 3.8cqmin; height: 1.3cqmin; }
.qo-k-hier .qh-pk-n-ring { width: 1.6cqmin; height: 1.6cqmin; }
.qo-k-hier .qh-pk-geistpin > span { width: 7.2cqmin; height: 7.2cqmin; }
.qo-k-hier .qh-pk-geistpin > i { left: -3.2cqmin; top: -3.2cqmin; width: 6.4cqmin; height: 6.4cqmin; }
.qo-k-hier.qo-nein { animation: qo-nein var(--d-mittel) ease-in-out; }
.qo-gesendet .qo-k-hier .qh-pk-n-kopf { transform: translate(-50%, -88%); }
.qo-gesendet .qo-k-hier .qh-pk-n-ring::before {
  content: ""; position: absolute; inset: -1.4cqmin; border-radius: 50%;
  box-shadow: 0 0 0 .4cqmin color-mix(in srgb, var(--du) 70%, transparent);
  animation: qh-pk-atmet 2.4s ease-in-out infinite;
}
/* Sichtbar so klein, wie die kleine Karte es verträgt, tippbar mindestens
   48 Punkte (der Hof ::before); am Finger auch sichtbar 48. */
.qo-k-hier .qk-zoom { position: absolute; z-index: 5; top: 1.6cqmin; right: 1.6cqmin; display: flex; gap: max(1.4cqmin, 12px); }
.qo-k-hier .qk-zoom button {
  position: relative; width: max(7.4cqmin, 36px); height: max(7.4cqmin, 36px); padding: 0; border: 0; border-radius: 2cqmin; cursor: pointer;
  display: grid; place-items: center; font: 800 4.6cqmin/1 var(--f-body); color: var(--t0);
  background: color-mix(in srgb, var(--g0) 76%, transparent);
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 22%, transparent), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .45);
  transition: --qo-weg-y var(--d-kurz) var(--k-schnapp), scale var(--d-kurz) var(--k-schnapp);
}
.qo-k-hier .qk-zoom button::before { content: ""; position: absolute; inset: min(-.8cqmin, -6px); border-radius: inherit; }
@media (pointer: coarse) { .qo-k-hier .qk-zoom button { width: max(7.4cqmin, 48px); height: max(7.4cqmin, 48px); } }
.qo-k-hier .qk-zoom button:hover { --qo-weg-y: -.3cqmin; }
.qo-k-hier .qk-zoom button:active { --qo-weg-y: 0px; scale: .92; }
.qo-k-hier .qk-zoom button:focus-visible { outline: .4cqmin solid var(--t0); outline-offset: .3cqmin; }
@media (prefers-reduced-motion: reduce) {
  .qo-gesendet .qo-k-hier .qh-pk-n-ring::before { animation: none; opacity: .6; }
}

/* Die Leiste der Karte: Raste, Koordinate, Maßstab — nie ein Ortsname. */
.qo-a-ort svg, .qo-los-ort svg { width: 2.8cqmin; height: 2.8cqmin; display: block; }
.qo-a-ort.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-a-t b.qo-koord { font-family: var(--f-mono); font-size: calc(2.9cqmin * var(--schrift, 1)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qo-mass { display: inline-flex; align-items: flex-end; gap: .6cqmin; margin-right: 1.4cqmin; font-family: var(--f-mono); color: var(--t1); white-space: nowrap; }
.qo-mass i { display: inline-block; height: .9cqmin; margin-bottom: .35cqmin; border: .22cqmin solid currentColor; border-top: 0; }

/* ---- Auftritt: Die Leiste steigt mit der Frage auf ------------------ */
@keyframes qo-auf { from { opacity: 0; transform: translateY(2.4cqmin); } to { opacity: 1; transform: none; } }
@keyframes qo-links { from { opacity: 0; transform: translateX(-4cqmin); } to { opacity: 1; transform: none; } }
.qo-lf { animation: qo-auf var(--d-lang) var(--k-ein) both; }
.qo-lf .qo-energie { animation: qo-links var(--d-lang) var(--k-ein) 60ms both; }
.qo-lf .qo-uhr     { animation: qo-auf var(--d-mittel) var(--k-ein) 120ms both; }
.qo-lf .qo-anzeige { animation: qo-auf var(--d-mittel) var(--k-ein) 200ms both; }
.qo-lf .qo-los     { animation: qo-auf var(--d-lang) var(--k-schnapp) 380ms both; }
/* schritteFrei (ctx.schrittWechsel): Wechselt nur der eigene Schritt, steht die
   Leiste — Uhr, Zellen und Tisch laufen einfach weiter; nur Anzeige und Knopf
   kommen neu, ohne Verzug. Das Flackern der knappen Zeit bleibt. */
.qo-lf.qo-wechsel, .qo-lf.qo-wechsel .qo-energie, .qo-lf.qo-wechsel .qo-uhr { animation: none; }
.qo-lf.qo-wechsel .qo-anzeige, .qo-lf.qo-wechsel .qo-los { animation-delay: 0ms; }
.qo-lf.qo-wechsel.qo-knapp .qo-energie { animation: qo-flacker var(--d-xl) ease-in-out infinite; }

/* ---- Gesten — NACH dem Auftritt, gleich stark: Sie gewinnen, sonst spielte
   in der Frage keine (Einrasten, Stempeln, Bereit, Drücken, Nein). -------- */
@keyframes qo-einrasten { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: none; } }
@keyframes qo-bereit { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes qo-drueck { 0% { transform: scale(1); } 30% { transform: scale(.975); } 100% { transform: scale(1); } }
@keyframes qo-nein {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1cqmin); }
  45% { transform: translateX(1cqmin); } 70% { transform: translateX(-.5cqmin); }
}
@keyframes qo-stempel {
  0% { opacity: 0; transform: scale(1.8) rotate(-18deg); }
  60% { opacity: 1; transform: scale(.9) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes qo-zahl { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.qo-lf .qo-anzeige.qo-einrasten { animation: qo-einrasten var(--d-mittel) var(--k-schnapp); }
.qo-lf .qo-anzeige.qo-stempeln { animation: qo-einrasten var(--d-lang) var(--k-schnapp); }
.qo-anzeige.qo-stempeln .qo-a-stempel { animation: qo-stempel var(--d-lang) var(--k-schnapp) 80ms both; }
.qo-lf .qo-anzeige.qo-nein, .qo-lf .qo-los.qo-nein { animation: qo-nein var(--d-mittel) ease-in-out; }
.qo-lf .qo-los.qo-bereit { animation: qo-bereit var(--d-mittel) var(--k-schnapp); }
.qo-lf .qo-los.qo-drueck { animation: qo-drueck var(--d-mittel) var(--k-ein); }
.qo-leiste .qo-zahl { display: inline-block; animation: qo-zahl var(--d-mittel) var(--k-schnapp); }

/* ---- Die Auflösung: dieselbe Schiene, darunter mein Ergebnis als Satz ----
   Schiene: „weiter in", die Zellen, dann Platz · Stand · Serie mit Linien
   getrennt. Zeile: Figur im Ring mit Siegel ✓ ≈ ✗ · Urteil · Punkte ·
   Rechnung · der Satz zur Lage. Die Leiste blendet nicht neu ein — sie
   bleibt stehen, nur ihr Inhalt wechselt. */
.qo-leiste.qo-la { grid-template-columns: minmax(0, 1fr); }
.qo-la .qo-z-zeit { grid-column: 1 / -1; }
.qo-gut { --u: var(--ok); --u-auf: var(--auf-ok); }
.qo-fast { --u: var(--warn); --u-auf: var(--auf-warn); }
.qo-schlecht { --u: var(--bad); --u-auf: var(--auf-bad); }
/* Eine Rolle statt eines Urteils (qn.js, DIE ROLLE: das Rampenlicht) — weißes Licht
   wie am Pult, kein Urteilston (--acc2 war im Rennsport so gelb wie ≈). */
.qo-neutral { --u: var(--t0); --u-auf: var(--g0); }
.qo-z-d { display: inline-flex; align-items: baseline; gap: .7cqmin; }
.qo-z-d + .qo-z-d::before {
  content: ""; align-self: center; width: max(1px, .2cqmin); height: calc(var(--qo-z-zh) * .8); margin-right: 1.1cqmin;
  background: color-mix(in srgb, var(--t0) 18%, transparent);
}
.qo-z-d em { font-style: normal; font-size: var(--qo-etikett); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.qo-z-d b {
  display: inline-block; text-align: right; font-family: var(--f-mono); font-weight: 700; font-size: calc(var(--qo-z-zh) * 1.05);
  line-height: 1; color: var(--t0); font-variant-numeric: tabular-nums;
}
/* Die Bewegung im Platz: nach oben ist, was sich gerade ändert; ein Platz
   weniger ist ein Rennverlauf, kein Fehler — grau, wie an der Tafel. */
.qo-sprung { font-size: var(--qo-etikett); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.qo-sprung.hoch { color: var(--jetzt); }
.qo-sprung.runter { color: var(--t1); }
.qo-sprung.gleich { color: var(--t2); }
.qo-z-satz { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 1.8cqmin; min-width: 0; min-height: 0; }
/* Mindestens 16 px: Auf S wären 44 % nur 13 px, und das ≈ läse sich bei
   einfacher Pixeldichte wie „=" (das auch in „= gleich" steht). */
.qo-z-uwort {
  font-family: var(--f-display); font-weight: 900; font-size: max(13px, calc(3.8cqmin * var(--schrift, 1)));
  letter-spacing: .05em; text-transform: uppercase; color: var(--u, var(--acc)); white-space: nowrap;
}
.qo-punkte { display: inline-flex; align-items: baseline; gap: .6cqmin; white-space: nowrap; }
.qo-punkte b {
  display: inline-block; text-align: right; font-family: var(--f-mono); font-weight: 700;
  font-size: max(16px, calc(4.8cqmin * var(--schrift, 1))); line-height: 1; letter-spacing: -.03em; color: var(--t0);
  font-variant-numeric: tabular-nums;
}
.qo-punkte small { font-size: var(--qo-etikett); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
/* Die Rechnung („100 Wahrheit + 50 Lüge") ist eine eigene, leise Zeile — das
   Punktewort selbst ist nur „Punkte". */
.qo-z-lage { min-width: 0; font-family: var(--f-display); font-weight: 600; font-size: max(12px, calc(3.6cqmin * var(--schrift, 1))); color: var(--t1); }
.qo-z-lage b { font-weight: 800; color: var(--t0); }

/* ---- Die Regie (online.js, regie): Schläge als Klassen an der Leiste ------
   qo-r-1 450 ms der Rest der Frage rollt aus · qo-r-2 600 das Urteil rollt
   ein, die Figur springt auf, das Siegel stempelt · qo-r-3 1000 Punkte,
   Rechnung, Daten · qo-r-4 1500 der Satz · qo-r-5 2000 die Serie. */
.qo-la .qo-z-uwort, .qo-la .qo-punkte, .qo-la .qo-z-lage, .qo-la .qo-z-d {
  opacity: 0; transform: translateY(70%);
  transition: transform var(--d-lang) var(--k-ein), opacity var(--d-mittel) var(--k-ein);
}
.qo-la .qo-z-d:nth-child(2) { transition-delay: 90ms; }
.qo-la .qo-z-d:nth-child(3) { transition-delay: 180ms; }
.qo-la.qo-r-2 .qo-z-uwort, .qo-la.qo-r-3 .qo-punkte, .qo-la.qo-r-3 .qo-z-d, .qo-la.qo-r-4 .qo-z-lage { opacity: 1; transform: none; }

/* ---- Ruhe: Unter reduzierter Bewegung steht alles im Endzustand ------ */
@media (prefers-reduced-motion: reduce) {
  .qo-leiste, .qo-leiste *, .qo-leiste *::before, .qo-leiste *::after { animation: none !important; transition: none !important; }
}
/* „Ruhiger Schirm" (Zahnrad): nimmt die dauernde Bewegung, die Uhr läuft weiter. */
.qh-ruhig-an .qo-anzeige::after, .qh-ruhig-an .qo-energie, .qh-ruhig-an .qo-uhr b { animation: none !important; }

/* =====================================================================
   ONLINE · GRUPPE FELD — Schreiben an der Wand (online.js, Art „feld")
   Das Feld sitzt in der Wand; den Rahmen malt die Kategorie (dort steht
   das eine „du"). Hier nur, was für alle gilt: das Feld selbst, seine
   Gesten und die Teile der Leiste.
   ===================================================================== */
.qo-feld { cursor: text; }
.qo-zu .qo-feld { cursor: default; }
.qo-tipp {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: none; background: none; box-shadow: none;
  font: inherit; line-height: 1.15; letter-spacing: inherit; text-align: inherit; color: var(--t0);
  caret-color: var(--du); resize: none; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
textarea.qo-tipp { white-space: pre-wrap; overflow-wrap: break-word; }
.qo-tipp::placeholder { color: color-mix(in srgb, var(--t0) 36%, transparent); opacity: 1; }
.qo-tipp[readonly] { cursor: default; }
/* Die Gesten stehen am Platz des Feldes, nie am Rahmen: Der trägt den
   Auftritt (.qn-wartet), und eine zweite Animation verdrängte ihn. */
@keyframes qo-f-ab { 0% { transform: none; } 30% { transform: scale(.97); } 65% { transform: scale(1.015); } 100% { transform: none; } }
.qo-f-ab { animation: qo-f-ab var(--d-mittel) var(--k-schnapp); }
.qo-f-nein { animation: qo-nein var(--d-mittel) ease-in-out; }

/* Die Leiste: der Stift als Marke, eine Figur als Vorsatz. */
.qo-a-feld svg, .qo-los-zeichen svg { width: 2.8cqmin; height: 2.8cqmin; display: block; }
.qo-a-feld.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-los-zeichen { padding: .7cqmin; }
.qo-a-figur { flex: none; display: grid; place-items: center; width: 6.6cqmin; height: 6.6cqmin; }
/* Rückfall: das Feld in der Anzeige (die Kategorie hat keinen Platz an der Wand). */
.qo-a-schreib { cursor: text; }
.qo-a-schreib .qo-a-tipp { font-family: var(--f-display); font-weight: 800; font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t0); }
/* Das eine „du" steht an der Wand — der Rahmen des Rückfall-Feldes trägt „jetzt". */
.qo-a-schreib.qo-fokus { box-shadow: inset 0 0 0 .3cqmin var(--jetzt); }
.qo-leiste .qo-tipp { caret-color: var(--jetzt); }
@media (prefers-reduced-motion: reduce) { .qo-f-ab, .qo-f-nein { animation: none !important; } }

/* =====================================================================
   ONLINE · GRUPPE KARTE (online.js, gleichnamiger Block) — die Art „jahr"
   (Wann & wo ①) und das Jahr aus ① vor dem Ort in ②. Wo der Strahl liegt
   und wie hoch sein Griff sitzt, sagt die Kategorie (whenwhere.js); hier
   steht, was jeder Zeitstrahl an der Wand teilt.
   ===================================================================== */
.qo-eingabe .qo-strahl { cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; }
.qo-zu .qo-strahl { cursor: default; }
.qo-eingabe .qo-strahl:focus-visible { outline: .35cqmin solid var(--t0); outline-offset: -.35cqmin; }
.qo-j-bahn { position: absolute; inset: 0; pointer-events: none; }
/* Ohne Jahr: der Griff als Geist in der Mitte — ohne Füllung, er sagt nur „zieh mich". */
.qo-j-geist .fuell { display: none; }
.qo-j-geist .griff { opacity: .62; }
/* Der Zeiger der Maus: ein Strich und das Jahr, das ein Klick setzen würde —
   leise, in keiner Rollenfarbe; „du" trägt erst der gesetzte Griff. */
.qo-j-zeiger { position: absolute; left: var(--zp, 50%); top: 50%; width: 0; height: 0; opacity: 0; transition: opacity var(--d-kurz) var(--k-ein); }
.qo-j-zeiger.an { opacity: 1; }
.qo-j-zeiger i { position: absolute; left: -.14cqmin; top: -2.6cqmin; width: .28cqmin; height: 5.2cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 72%, transparent); }
.qo-j-zeiger b {
  position: absolute; left: 0; bottom: 3.6cqmin; transform: translateX(-50%); padding: .5cqmin 1.3cqmin; border-radius: 10cqmin;
  font-family: var(--f-mono); font-size: 2cqmin; font-weight: 700; color: var(--t0); white-space: nowrap;
  background: color-mix(in srgb, var(--g0) 80%, transparent); box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 30%, transparent);
}
/* Die Leiste: ① als Marke, das Jahr groß — es ist, was man liest. */
.qo-a-marke.qo-a-nr { width: 5.4cqmin; height: 5.4cqmin; padding: 0; justify-content: center; border-radius: 50%; }
.qo-a-marke.qo-a-nr.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-a-t b.qo-jahr { font-family: var(--f-mono); font-weight: 700; font-size: calc(4.6cqmin * var(--schrift, 1)); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.qo-los-nr { gap: .8cqmin; }
/* Die Ziffer im Kreis ist Schrift: auch auf S mindestens 9 px, der Kreis wächst mit. */
.qo-los-nr i, .qo-a-vor i {
  flex: none; width: max(13px, 3cqmin); height: max(13px, 3cqmin); border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: max(9px, 1.9cqmin);
}
.qo-los-nr i { box-shadow: inset 0 0 0 .22cqmin currentColor; }
.qo-los-nr b { font-family: var(--f-mono); }
/* ② vor dem Ort: das Jahr aus ①, erledigt — matt, ohne Rolle. */
.qo-a-vor {
  flex: none; display: flex; align-items: center; gap: .8cqmin; padding: .6cqmin 1.4cqmin .6cqmin .6cqmin; border-radius: 10cqmin;
  background: color-mix(in srgb, var(--t0) 7%, transparent); box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 15%, transparent);
}
.qo-a-vor i { background: color-mix(in srgb, var(--t0) 16%, transparent); color: var(--t1); }
.qo-a-vor b { font-family: var(--f-mono); font-weight: 700; font-size: calc(2.6cqmin * var(--schrift, 1)); color: var(--t1); white-space: nowrap; }
.qo-a-vor.leer b { font-family: var(--f-body); font-size: max(9px, calc(2cqmin * var(--schrift, 1))); color: var(--t2); }
@media (prefers-reduced-motion: reduce) { .qo-j-zeiger { transition: none; } }

/* =====================================================================
   ONLINE · GRUPPE REGLER (online.js, Arten `regler` und `kompass`) —
   die Skala der Wand wird gezogen, das Instrument gedreht. Die Kategorie
   malt ihre Wand; hier steht nur, was für alle vier gleich ist: die
   greifbare Fläche, der Griff der Bahn, die Zahl in der Leiste.
   ===================================================================== */
/* Die Fläche, die man greift: ganz, nicht nur die Rille. */
.qo-rg-art .qo-zieh {
  cursor: grab; outline: none; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qo-rg-art .qo-zieh.qo-greift { cursor: grabbing; }
.qo-rg-art.qo-zu .qo-zieh { cursor: default; }
.qo-rg-art .qo-zieh:focus-visible { outline: .35cqmin solid var(--t0); outline-offset: .4cqmin; }

/* Der Griff der Bahn (QN.bahn): Er ruht neutral, bis jemand zieht, wächst
   unter dem Zeiger und rastet beim Klick federnd ein (scale — die Stelle
   hält er per transform, die bleibt unberührt). */
.qo-rg-bahn .qn-bahn .griff { transition: scale var(--d-kurz) var(--k-schnapp); }
.qo-greift .qo-rg-bahn .qn-bahn .griff, .qo-rg-bahn.qo-greift .qn-bahn .griff { scale: 1.14; }
.qo-rg-bahn .qn-bahn .griff.qo-rg-schnapp { animation: qo-rg-schnapp var(--d-mittel) var(--k-schnapp); }
@keyframes qo-rg-schnapp { 0% { scale: 1; } 40% { scale: 1.24; } 100% { scale: 1; } }
/* Die Fahne bleibt ganz auf der Bahn: Ihr Anker wandert mit der Stellung
   von der einen Kante zur anderen, statt am Rand halb hinauszuhängen. */
.qo-rg-bahn .qn-bahn.quer .fahne { transform: translateX(calc(-1 * var(--p))); }
.qo-rg-bahn .qn-bahn.hoch .fahne { transform: translateY(calc(-1 * var(--p))); }
.qo-rg-bahn .qn-bahn .fahne { font-family: var(--f-mono); font-variant-numeric: tabular-nums; transition: opacity var(--d-kurz) var(--k-ein); }
/* Groß genug zum Greifen (Tobi: „alles muss groß genug sein, und es muss
   sofort ersichtlich sein, wie was funktioniert"): der Griff mindestens
   44 px in beiden Richtungen — auch auf S, wo 5 cqmin nur 20 px wären —,
   der Wert an der Fahne groß, keine Schrift unter 9 px. Fahne und Hinweis
   halten dafür Abstand zum Griff, wie groß er auch wird. */
.qo-rg-bahn .qn-bahn { --qo-gq: max(22px, 2.55cqmin); --qo-gl: max(32px, 4.6cqmin); }
.qo-rg-bahn .qn-bahn.quer .griff { width: calc(2 * var(--qo-gl)); height: calc(2 * var(--qo-gq)); }
.qo-rg-bahn .qn-bahn.hoch .griff { width: calc(2 * var(--qo-gq)); height: calc(2 * var(--qo-gl)); }
.qo-rg-bahn .qn-bahn .fahne { font-size: max(12px, 3cqmin); padding: .5cqmin 1.4cqmin; }
.qo-rg-bahn .qn-bahn .zieh { font-size: max(9px, 1.85cqmin); }
.qo-rg-bahn .qn-bahn.quer .fahne { bottom: calc(50% + var(--qo-gq) + 1cqmin); }
.qo-rg-bahn .qn-bahn.quer .zieh { top: calc(50% + var(--qo-gq) + .6cqmin); }
.qo-rg-bahn .qn-bahn.hoch .fahne { left: calc(50% + var(--qo-gq) + 1.4cqmin); }
.qo-rg-bahn .qn-bahn.hoch .zieh { top: calc(var(--p) + var(--qo-gl) + .6cqmin); }
.qo-rg-art:not(.qo-hat) .qo-rg-bahn .qn-bahn .fahne { opacity: 0; }
/* Der ruhende Griff sieht greifbar aus, nicht abgeschaltet: fast voll da,
   nur die Strecke dahinter bleibt blass, bis ein Wert steht. */
.qo-rg-bahn .qn-bahn.geist .griff { opacity: .9; }
.qo-rg-bahn .qn-bahn.geist .fuell { opacity: .35; }
/* „du" trägt die Bahn erst, wenn sie die eigene Wahl zeigt — vorher ist sie
   neutral (QN.bahn setzt --gf inline, daher !important). */
.qo-rg-art:not(.qo-hat) .qo-rg-bahn .qn-bahn { --gf: var(--t1) !important; }
.qo-rg-bahn .qn-bahn .zieh { transition: opacity var(--d-mittel) var(--k-ein); }
.qo-rg-art.qo-hat .qo-rg-bahn .qn-bahn .zieh { opacity: 0; }
/* Leer abgeschickt: Die Bahn schüttelt den Kopf. */
.qo-rg-nein { animation: qo-rg-nein var(--d-mittel) ease-in-out; }
@keyframes qo-rg-nein {
  0%, 100% { translate: 0 0; } 20% { translate: -1cqmin 0; }
  45% { translate: 1cqmin 0; } 70% { translate: -.5cqmin 0; }
}

/* Die Leiste: der Wert groß, daneben der Zustand. */
.qo-a-rg svg { width: 2.8cqmin; height: 2.8cqmin; display: block; }
.qo-a-rg.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-a-t b.qo-rg-zahl {
  display: flex; align-items: baseline; gap: .7cqmin; white-space: nowrap; overflow-wrap: normal;
  font-family: var(--f-mono); font-weight: 700; font-size: calc(4.6cqmin * var(--schrift, 1)); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.qo-rg-zahl small { font-family: var(--f-body); font-size: .56em; font-weight: 800; letter-spacing: 0; color: var(--t1); }
.qo-rg-voll { margin-right: 1.2cqmin; font-family: var(--f-mono); color: var(--t1); white-space: nowrap; }
.qo-rg-losmarke b { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .qo-rg-bahn .qn-bahn .griff, .qo-rg-bahn .qn-bahn .fahne, .qo-rg-bahn .qn-bahn .zieh { transition: none; animation: none; }
  .qo-rg-nein { animation: none; }
}

/* =====================================================================
   ONLINE · GRUPPE FLÄCHE (online.js, Art „flaeche") — color · outline ·
   area · grid · push. Die Wand ist die Fläche; die Leiste trägt eine
   kleine Probe des eigenen Werts (Mini), die Werkzeuge (Zurück, Neu,
   Weite) und den Knopf. Die Wände malen ihre Zustände selbst (qo-hat,
   qo-gesendet, qo-zu, qo-alle am Schirm).
   ===================================================================== */
/* Die Probe in der Anzeige: ein Kasten, kein Etikett (die Farbe, der
   Pegel, das Ziel — was die Kategorie hineinlegt, trägt seine Farbe selbst). */
.qo-a-marke.qo-f-mini {
  position: relative; align-self: stretch; min-width: 7.4cqmin; min-height: 7.4cqmin; padding: 0; overflow: hidden;
  display: grid; place-items: center; border-radius: 1.8cqmin; color: var(--t0);
  background: color-mix(in srgb, var(--t0) 7%, transparent);
  box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--t0) 14%, transparent);
}
.qo-f-mini > svg { width: 3.6cqmin; height: 3.6cqmin; display: block; }
/* Die Werkzeuge: kleine Tasten in der Anzeige, vor dem Stempel. */
.qo-f-wzs { flex: none; display: flex; align-items: center; gap: .9cqmin; }
.qo-f-wz {
  position: relative; display: grid; justify-items: center; gap: .2cqmin; min-width: 9cqmin; min-height: 7.4cqmin;
  margin: 0; padding: .6cqmin 1cqmin .5cqmin; border: 0; border-radius: 1.6cqmin; cursor: pointer;
  font: 700 max(9px, calc(2.3cqmin * min(var(--schrift, 1), 1.25))) var(--f-body); color: var(--t0);
  background: color-mix(in srgb, var(--t0) 9%, transparent);
  box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--t0) 16%, transparent);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: --qo-weg-y var(--d-kurz) var(--k-schnapp), opacity var(--d-kurz) var(--k-ein);
}
.qo-f-wz svg { width: 3.2cqmin; height: 3.2cqmin; display: block; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.qo-f-wz em { font-style: normal; line-height: 1; white-space: nowrap; }
.qo-f-wz:hover:not(.aus) { --qo-weg-y: -.3cqmin; }
.qo-f-wz:focus-visible { outline: .3cqmin solid var(--t0); outline-offset: .3cqmin; }
.qo-f-wz.aus { opacity: .38; cursor: default; }
/* Die Trefferfläche ist mindestens 48 px, auch wenn die Taste auf S kleiner aussieht. */
.qo-f-wz::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px);
  transform: translate(-50%, -50%); border-radius: inherit; }
.qo-f-wz.qo-f-schnapp { animation: qo-einrasten var(--d-mittel) var(--k-schnapp); }
.qo-f-wz.qo-nein { animation: qo-nein var(--d-mittel) ease-in-out; }
/* Große Schrift: die Werkzeuge zeigen nur ihr Zeichen, und neben ihnen
   steht nur der Zustand (die Zeile darunter ginge sonst über die Leiste). */
.qh-gross .qo-f-wz em { display: none; }
.qh-gross .qo-anzeige:has(.qo-f-wzs) .qo-a-t em { display: none; }
.qo-los-marke.qo-f-marke { padding: .5cqmin; min-width: 4.4cqmin; justify-content: center; }
.qo-f-marke > svg { width: 3cqmin; height: 3cqmin; display: block; }
/* Ohne Schreibfeld ist die Anzeige schmaler als ihr Text: Er bricht um. */
.qo-flaeche-art .qo-a-t b { text-wrap: balance; }

/* Die Tasten der Wand (Karten, Fächer, Bänder): Fokus sichtbar, Zeiger. */
.qo-flaeche-art .qo-f-taste { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qo-flaeche-art .qo-f-taste:focus-visible { outline: .35cqmin solid var(--t0); outline-offset: .4cqmin; }
.qo-flaeche-art.qo-zu .qo-f-taste, .qo-flaeche-art.qo-zu .qo-f-flaeche { cursor: default; }
.qo-flaeche-art .qo-f-flaeche { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Eine Uhr je Schirm: QN.onlineRahmen nimmt die Ringe aus dem Kopf — eine
   Uhr als Bauteil (qn-uhr, z. B. der Drehzahlmesser des Rennsport-Pakets)
   blieb dort stehen, und neben der Leiste liefen zwei Uhren. */
.qn-buehne.qo-schirm .qn-kopf .qn-uhr { display: none; }

/* Gesten an der Wand: die Fläche ruckelt (leer abgeschickt: .qo-f-nein, Block
   Feld), eine Taste federt. */
@keyframes qo-f-schnapp { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.qo-f-schnapp { animation: qo-f-schnapp var(--d-mittel) var(--k-schnapp); }
@media (prefers-reduced-motion: reduce) {
  .qo-f-nein, .qo-f-schnapp { animation: none !important; }
}

/* =====================================================================
   ONLINE · GRUPPE SCHRITTE (online.js) — Lüge, Hinweisleiter,
   Paare: das Schreibfeld in der Wand, gesperrte und festgelegte Flächen,
   Paare stecken. Die Gestalt an der Wand malt die Kategorie; hier steht
   nur, was jede solche Fläche braucht.
   ===================================================================== */
/* Das Schreibfeld: eine Fläche der Wand, in die man tippt (die Lücke im
   Satz, die Zeile im Meme). Schreibmarke in „du", Platzhalter aus
   data-platz, zu, wenn die Zeit um ist. */
.qo-schreibfeld {
  cursor: text; outline: none; caret-color: var(--du);
  -webkit-user-select: text; user-select: text; -webkit-tap-highlight-color: transparent;
}
.qo-schreibfeld:empty::before { content: attr(data-platz); color: var(--t2); pointer-events: none; }
.qo-zu .qo-schreibfeld { cursor: default; caret-color: transparent; }
.qo-a-stift svg, .qo-los-stift svg { width: 2.8cqmin; height: 2.8cqmin; display: block; }
.qo-a-stift.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-schreib-art .qo-anzeige { cursor: text; }
.qo-f-zahl { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.qo-f-zahl.knapp { color: var(--jetzt); }

/* Gesperrt (die eigene Lüge): keine Taste, kein Zeiger. */
.qo-eingabe .qo-taste.qo-aus { cursor: not-allowed; }

/* Paare: die Leiste zählt mit Punkten, wie viele Leitungen stecken. */
.qo-a-paar { gap: .6cqmin; padding: 1.3cqmin 1.4cqmin; background: color-mix(in srgb, var(--t0) 8%, transparent); }
.qo-a-paar i { width: 1.7cqmin; height: 1.7cqmin; border-radius: 50%; background: color-mix(in srgb, var(--t0) 18%, transparent); }
.qo-a-paar i.an { background: var(--acc); box-shadow: 0 0 .9cqmin color-mix(in srgb, var(--acc) 70%, transparent); }
.qo-los-paar b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.qo-anzeige .qo-a-t em b { color: var(--t0); font-weight: 800; }

/* Beim Schreiben ist die ganze Wand die Trefferfläche (ein Klick führt ins
   Feld) — und sie sagt es mit dem Zeiger. */
.qo-schreib-art > :not(.qo-leiste):not(.qn-kopf):not(.qh-zahnrad):not(.qh-einstblatt) { cursor: text; }
.qo-zu.qo-schreib-art > * { cursor: default; }

/* Online wird an der Wand geklickt — und ein Klick fokussiert. Ein Kasten mit
   overflow: hidden lässt sich dabei verschieben (der Browser scrollt die
   fokussierte Taste „ins Bild"), und die Frage rutschte oben aus der Wand.
   overflow: clip schneidet genauso, scrollt aber nie. Die Kategorien setzen
   dasselbe an ihren eigenen Räumen. */
.qn-buehne.qo-schirm { overflow: clip; }

/* =====================================================================
   ONLINE · TAFEL UND ENDE (online.js, gleichnamiger Block) — der Schirm
   bleibt zwischen den Kategorien und am Abendende EIN Fenster: Kopf ·
   Wand · Leiste. Die Leiste ist so hoch wie in Frage und Auflösung
   (--qo-leiste), die Wand macht ihr Platz. Nur Rollen; --du steht an der
   Wand, nicht hier. `qo-t` Tafel, `qo-e` Abendende (an der Bühne), `qo-lt`
   und `qo-le` die Leisten.
   ===================================================================== */

/* ---- Die Wand macht Platz ------------------------------------------- */
/* „Als Nächstes" steht online in der Leiste — nicht zweimal. */
.qo-t .zw-naechst { display: none; }
/* Die Tafel ist um die Leiste niedriger: die tragenden Größen eine Stufe
   kleiner (so, wie der Fernseher sie eine Stufe größer macht, --zw-s 1,12).
   Die Spitze (ab neun Spielern) hat nur drei Bahnen und die größten Zahlen —
   die liefen sonst unten aus ihrer Bahn. */
.qo-t.zw { --zw-s: .88; }
.qo-t .zw-spitze .zw-pkt { font-size: calc(5.6cqmin * var(--zw-s)); }
/* Das Finale hat keinen gemeinsamen Kopf: Das Zahnrad steht oben rechts,
   die Zahlen des Abends rücken davor. */
.qo-e .sp-e-kopf { padding-right: 9cqmin; }
/* Kein Fuß mehr am eigenen Schirm (das Rechtliche liegt im Zahnrad): Die Treppchen stehen auf dem
   Pult — keine Lücke zwischen den Plätzen und dem Pult (Tobi, 2026-10-02). */
.qo-e .sp-e-leib.sp-f { padding-bottom: 0; }
/* Das Treppchen rückt zusammen, wenn es nicht passt (online.js, passeFinale):
   1 weniger Luft über dem Pokal, kleinere Figuren und Siegerzahl · 2 die
   Zahlenzeile und „Punkte" unter jedem Platz gehen (die Liste und die eigene
   Zeile tragen sie weiter) · 3 alles noch eine Stufe kleiner. */
.qo-e.qo-fe1 .sp-f-podium { padding-top: 4.6cqmin; }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-podium { padding-top: 6cqmin; }
.qo-e.qo-fe1 .sp-f-buehne .sp-f-platz { --fgr: 9.5cqmin; }
.qo-e.qo-fe1 .sp-f-buehne .sp-f-platz.s1 { --fgr: 13cqmin; }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-platz { --fgr: 14cqmin; }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-platz.s1 { --fgr: 18.5cqmin; }
.qo-e.qo-fe1 .sp-f-buehne .sp-f-platz.s1 .sp-f-punkte { font-size: 9cqmin; }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-platz.s1 .sp-f-punkte { font-size: 11.5cqmin; }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-platz:not(.s1) .sp-f-punkte { font-size: 6.8cqmin; }
.qo-e.qo-fe2 .sp-f-platz > .sp-f-stat, .qo-e.qo-fe2 .sp-f-platz > .sp-f-wort { display: none; }
.qo-e.qo-fe3 .sp-f-podium { padding-top: 3.6cqmin; }
.qo-e.qo-fe3 .sp-f-buehne .sp-f-platz { --fgr: 8cqmin; }
.qo-e.qo-fe3 .sp-f-buehne .sp-f-platz.s1 { --fgr: 11cqmin; }
.qo-e.qo-fe3 .sp-f-buehne.ohne-liste .sp-f-platz { --fgr: 12cqmin; }
.qo-e.qo-fe3 .sp-f-buehne.ohne-liste .sp-f-platz.s1 { --fgr: 15.5cqmin; }
.qo-e.qo-fe3 .sp-f-buehne .sp-f-platz.s1 .sp-f-punkte { font-size: 7.4cqmin; }
.qo-e.qo-fe3 .sp-f-buehne.ohne-liste .sp-f-platz.s1 .sp-f-punkte { font-size: 9.5cqmin; }
/* Gleichstand an Platz 1–3 (mehr als drei auf dem Podium, spiel.css .sp-f-podium.viele): dieselben Stufen, im Verhältnis 3 : --pl. */
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz { --fgr: calc(14cqmin * var(--pk)); }
.qo-e.qo-fe1 .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz.s1 { --fgr: calc(18.5cqmin * var(--pk)); }
.qo-e.qo-fe3 .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz { --fgr: calc(12cqmin * var(--pk)); }
.qo-e.qo-fe3 .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz.s1 { --fgr: calc(15.5cqmin * var(--pk)); }

/* ---- Die Rolle: die Platzziffer als Zählwerk (nur transform) --------- */
/* inline-flex, nicht inline-block: So trägt das Fenster die Grundlinie seiner
   Ziffer (ein inline-block mit overflow stünde auf seiner Unterkante, und die
   Ziffer säße höher als die Wörter daneben). */
.qo-rolle { display: inline-flex; height: 1.04em; line-height: 1.04; overflow: hidden; vertical-align: baseline; }
.qo-rolle-band { display: flex; flex-direction: column; transform: translateY(calc(var(--schritte, 0) * -1.04em)); }
.qo-rolle-band > b { display: block; height: 1.04em; font: inherit; line-height: 1.04; text-align: center; }
.qo-rolle-band > b:not(.ziel) { visibility: hidden; }
.qo-rolle.wartet .qo-rolle-band > b, .qo-rolle.rollt .qo-rolle-band > b { visibility: visible; }
.qo-rolle.wartet .qo-rolle-band { transform: none; }
.qo-rolle.rollt .qo-rolle-band { animation: qo-rollen var(--d-xl) var(--k-ein) both; }
@keyframes qo-rollen { from { transform: none; } }

/* ---- Die Leiste der Tafel -------------------------------------------- */
/* Gebaut wie Frage und Auflösung („Die Zeile"): oben die Schiene — „weiter
   in", die Zellen, rechts das Nächste —, darunter die Zeile: mein Platz,
   eine Linie, meine Runde. Rechts über beide Reihen Jubeln, wo sonst der
   Knopf steht. Keine Kästen; die Höhe ist dieselbe (--qo-leiste). */
.qo-leiste.qo-lt { grid-template-columns: auto minmax(0, 1fr) auto; }
.qo-lt .qo-z-zeit { grid-column: 1 / 3; }
/* Die Zellen, die online.js (passe) vermisst: Ihre Kinder messen von hier aus. */
.qo-leiste [data-qo-passt] { position: relative; }




/* ---- Jubeln: der Knopf der Engine, rechts über beide Reihen ----------- */
.qo-t-jubel { grid-column: 3; grid-row: 1 / 3; align-self: center; display: flex; align-items: center; }
.qo-e-knoepfe { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; align-items: center; gap: 1.4cqmin; }
.qo-leiste .sp-jubel {
  width: auto; min-height: var(--qo-kh); padding: .8cqmin 2.4cqmin .8cqmin 1.2cqmin; gap: 1.2cqmin; border-radius: 2.8cqmin;
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc) 55%, transparent);
}
.qo-leiste .sp-jubel-kopf { width: 6.4cqmin; height: 6.4cqmin; }
.qo-leiste .sp-jubel-kopf .qn-av { --gr: 6.2cqmin; }
.qo-leiste .sp-jubel-wort { font-size: calc(2.8cqmin * min(var(--schrift, 1), 1.25)); }
.qo-leiste .sp-jubel-t em { font-size: max(9px, calc(1.7cqmin * min(var(--schrift, 1), 1.25))); white-space: nowrap; }
.qo-leiste .sp-jubel:focus-visible, .qo-e-knopf:focus-visible { outline: .3cqmin solid var(--t0); outline-offset: .4cqmin; }
/* Trefferfläche mindestens 48 px (Tobi, 2026-09-23: „alles muss groß genug
   sein") — die Knöpfe sind so hoch wie die Kappe der Frage (--qo-kh); wo
   Schrift und Rand enger werden, greift der Hof darüber hinaus. */
.qo-leiste .sp-jubel, .qo-e-knopf { position: relative; }
.qo-leiste .sp-jubel::before, .qo-e-knopf::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: min(0px, calc((100% - 48px) / 2)); bottom: min(0px, calc((100% - 48px) / 2));
}

/* ---- Die Leiste des Abendendes ---------------------------------------- */
/* Dieselbe Schiene — ohne Uhr: Der Abend ist gespielt, die Zellen stehen
   voll und leise. Darunter die Zeile (erst „Das Finale läuft", dann Titel
   und Geschichte), rechts über beide die Knöpfe. */
.qo-leiste.qo-le { grid-template-columns: minmax(0, 1fr) auto; }
/* Warten und Aufdecken in derselben Zeile: erst „Das Finale läuft", dann
   Titel und Geschichte — nichts springt. */




/* Die Knöpfe: Jubeln · Karte teilen · Nochmal — so hoch wie die Kappe der Frage. */
.qo-e-knopf {
  display: flex; align-items: center; gap: 1cqmin; min-height: var(--qo-kh); margin: 0; padding: 0 2.4cqmin; border: 0; border-radius: 2.8cqmin;
  font-family: var(--f-display); font-weight: 800; font-size: calc(2.8cqmin * min(var(--schrift, 1), 1.25)); line-height: 1.1;
  color: var(--t0); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: color-mix(in srgb, var(--t0) 8%, transparent);
  box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--t0) 16%, transparent);
  transition: --qo-weg-y var(--d-kurz) var(--k-schnapp), scale var(--d-kurz) var(--k-schnapp);
}
.qo-e-knopf svg { flex: none; width: max(14px, 3.2cqmin); height: max(14px, 3.2cqmin); display: block; }
.qo-e-knopf.haupt {
  background: linear-gradient(180deg, var(--acc2), color-mix(in srgb, var(--acc2) 72%, var(--acc)));
  color: var(--auf-acc2); box-shadow: inset 0 .4cqmin 0 color-mix(in srgb, var(--t0) 22%, transparent);
}
.qo-e-knopf:hover { --qo-weg-y: -.3cqmin; }
.qo-e-knopf:active { --qo-weg-y: .3cqmin; scale: .98; }

/* ---- Auftritt ----------------------------------------------------------
   Kommt die Tafel (oder das Ende) nach einer Leiste, steht der Rahmen und
   nur sein Inhalt steigt auf (qo-steht, online.js) — beim Wechsel springt
   nichts. Ohne Vorgänger steigt die ganze Leiste auf. */
.qo-lt, .qo-le { animation: qo-auf var(--d-lang) var(--k-ein) both; }
.qo-lt .qo-z-zeit   { animation: qo-auf var(--d-mittel) var(--k-ein) 80ms both; }
.qo-lt .qo-t-jubel  { animation: qo-auf var(--d-lang) var(--k-schnapp) 320ms both; }
.qo-le .qo-z-zeit   { animation: qo-auf var(--d-mittel) var(--k-ein) 80ms both; }
.qo-le .qo-e-knoepfe { animation: qo-auf var(--d-lang) var(--k-schnapp) 320ms both; }
/* Die knappe Zeit flackert — auch nach dem Auftritt (der sonst die Animation der Zellen belegt). */
.qo-lf.qo-knapp .qo-energie { animation: qo-flacker var(--d-xl) ease-in-out infinite; }

/* ---- „jubelt!" an der Wand (die Figur dessen, der gerade jubelt) ------ */
.qo-schirm .zw-bav { position: relative; }
.qo-jubelt {
  position: absolute; left: 100%; top: 50%; z-index: 4; margin-left: .6cqmin; pointer-events: none;
  padding: .4cqmin 1.2cqmin; border-radius: 10cqmin; background: var(--acc); color: var(--auf-acc);
  font-family: var(--f-body); font-size: max(9px, 1.9cqmin); font-weight: 800; letter-spacing: .06em; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateY(-50%) scale(.6);
}
.qo-jubelt.an { animation: qo-jubelt 1.5s var(--k-ein) both; }
/* Auf der Bahn der Tafel steht das Schild ÜBER der Figur — rechts neben ihr
   stünden die Punkte. In der Spitze (sie schneidet oben ab) links auf der Spur. */
.zw-figur > .qo-jubelt { left: 50%; top: auto; bottom: 92%; margin-left: 0; transform: translateX(-50%); animation-name: qo-jubelt-oben; }
.zw-spitze .zw-figur > .qo-jubelt { left: auto; right: 100%; bottom: auto; top: 50%; margin-right: .4cqmin; transform: translateY(-50%); animation-name: qo-jubelt; }
@keyframes qo-jubelt-oben {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  30%, 80% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translate(-50%, -40%); }
}
@keyframes qo-jubelt {
  0% { opacity: 0; transform: translateY(-50%) scale(.6); }
  18% { opacity: 1; transform: translateY(-50%) scale(1.08); }
  30%, 80% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-110%); }
}

/* ---- Die Ergebniskarte über dem Fenster ------------------------------- */
/* Am Handy ein Blatt von unten, hier eine Karte in der Mitte — die Knöpfe
   rechts daneben (der Schirm ist quer). Innen dieselbe Karte in 16:9. */
.qo-schirm > .sp-karteblatt { place-items: center; }
.qo-schirm > .sp-karteblatt .sp-karte-huelle {
  grid-template-columns: minmax(0, 100cqmin) 34cqmin; align-items: end; gap: 3cqmin;
  max-width: calc(100% - 6cqmin); padding: 3.4cqmin; border-radius: 3.4cqmin;
  box-shadow: 0 2cqmin 8cqmin color-mix(in srgb, var(--g0) 70%, transparent);
  opacity: 0; transform: translateY(6cqmin) scale(.96);
  transition: transform var(--d-mittel) var(--k-schnapp), opacity var(--d-kurz) var(--k-ein);
}
.qo-schirm > .sp-karteblatt.auf .sp-karte-huelle { opacity: 1; transform: none; }
.qo-schirm > .sp-karteblatt .sp-k-knoepfe { gap: 1.4cqmin; }
.qo-schirm > .sp-karteblatt .sp-he-knopf {
  min-height: max(48px, 9cqmin); padding: 1.4cqmin 2.4cqmin; border-radius: 2.4cqmin;
  font-size: calc(2.6cqmin * min(var(--schrift, 1), 1.25)); line-height: 1.15;
}
.qo-schirm > .sp-karteblatt .sp-he-knopf:focus-visible { outline: .3cqmin solid var(--t0); outline-offset: .4cqmin; }

/* ---- Ruhe -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qo-jubelt.an { animation: none; opacity: 1; transform: translateY(-50%); }
  .zw-figur > .qo-jubelt.an { transform: translateX(-50%); }
  .zw-spitze .zw-figur > .qo-jubelt.an { transform: translateY(-50%); }
  .qo-schirm > .sp-karteblatt .sp-karte-huelle { transition: none; }
}

/* =====================================================================
   ONLINE · GRUPPE WAHL — Wahr oder falsch, Bildfrage, Wer von uns,
   Weltspitze, Sieb (online.js, Block gleichen Namens). Die Flächen an der
   Wand malt jede Kategorie selbst; hier steht nur, was die Leiste für die
   Art `mehrfach` (Sieb) braucht: die Zahl statt Form und Buchstabe.
   ===================================================================== */
.qo-a-zahl b, .qo-los-zahl b {
  min-width: 2.6cqmin; text-align: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.qo-a-zahl b { font-size: calc(3cqmin * var(--schrift, 1)); }
.qo-a-marke.qo-a-zahl { padding: .7cqmin 1.3cqmin; }
.qo-a-marke.qo-a-zahl.leer { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); }
.qo-los-zahl { padding: .6cqmin 1.2cqmin; }
/* Sammeln: Ein Zug über mehrere Flächen darf weder Text markieren noch
   (mit dem Finger) die Seite schieben. */
.qo-sammeln .qo-taste { touch-action: none; -webkit-user-select: none; user-select: none; }

/* =====================================================================
   DIE LEISTE MIT BUDDY (?leiste=loge, online.js — Entwurf, Fassung 2)
   Wenig, und das Wenige aus dem Set: oben die Uhr des Sets (Bauteil „uhr", Ort „hand"), darunter
   der Buddy, deine Wahl (die Zeile, ohne Kästen), EIN Satz vom Buddy und „6/10 eingeloggt", rechts
   der Knopf. Nur Rollen des Sets, nur transform und opacity.
   ===================================================================== */
.qo-leiste.qo-loge {
  grid-template-columns: 17cqmin minmax(0, 1fr) minmax(0, 1.15fr) auto;
  grid-template-rows: auto minmax(0, 1fr); column-gap: 2.6cqmin; row-gap: .8cqmin;
  padding: 1.5cqmin 3cqmin 1.5cqmin 1cqmin; overflow: visible;
}
/* Die Uhr des Sets: dieselbe Beschreibung wie am Pult, auf das Maß der Leiste gebracht. Sie liegt
   über Wahl und Satz; der Buddy steht links daneben, der Knopf rechts über beide Reihen. */
.qo-loge > .qo-z-zeit { grid-column: 2 / 4; grid-row: 1; height: auto; min-width: 0; }
.qo-loge .qo-anzeige { grid-column: 2; grid-row: 2; align-self: center; }
.qo-loge .qo-los { grid-column: 4; grid-row: 1 / 3; }
/* Der Buddy: groß, steht auf der Unterkante; sein Kopf darf ein Stück über die Leiste ragen. */
.qo-buddy { grid-column: 1; grid-row: 1 / 3; position: relative; align-self: stretch; z-index: 3; }
.qo-buddy-fig { position: absolute; left: 50%; bottom: -.6cqmin; width: 20cqmin; height: 20cqmin; margin-left: -10cqmin; }
.qo-buddy-fig > * { width: 100% !important; height: 100% !important; }
.qo-buddy::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -.9cqmin; height: 1.8cqmin; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g0) 75%, transparent), transparent); }
/* Was der Buddy sagt: EIN Satz, er bleibt stehen; darunter klein die Runde. */
.qo-sagt { grid-column: 3; grid-row: 2; min-width: 0; align-self: center; display: grid; gap: .5cqmin; padding-left: 2.4cqmin; border-left: max(2px, .35cqmin) solid color-mix(in srgb, var(--acc2) 55%, transparent); }
.qo-sagt-text { margin: 0; min-height: 1.15em; font-family: var(--f-display); font-weight: 800; font-size: max(13px, calc(3.9cqmin * var(--schrift, 1))); line-height: 1.15; color: var(--t0); white-space: nowrap; overflow: hidden; }
.qo-sagt-text span { display: inline-block; }
.qo-sagt-text.neu span { animation: qo-wort var(--d-lang) var(--k-schnapp) calc(var(--i) * 70ms) both; }
@keyframes qo-wort { 0% { opacity: 0; transform: translateY(.5em) scale(.9); } 100% { opacity: 1; transform: none; } }
.qo-loge .qo-tischwort { font-size: max(9px, calc(2cqmin * var(--schrift, 1))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
.qo-loge .qo-tischwort b { font-size: 1.35em; letter-spacing: 0; color: var(--t0); }
/* Die Zeile der Wahl: eine Zeile Wahl, eine Zeile Zustand; die Tastenhinweise stehen an der Wand. */
.qo-loge .qo-a-formen { display: none; }
.qo-loge .qo-a-t > b, .qo-loge .qo-a-t > b:not([class]) { white-space: nowrap; overflow: hidden; overflow-wrap: normal; }
.qo-loge .qo-a-t em { white-space: nowrap; overflow: hidden; }
.qo-loge .qo-a-t > b.lang, .qo-loge .qo-a-t em { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2cqmin), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2cqmin), transparent); }
.qo-loge .qo-a-t em .qo-maus, .qo-loge .qo-a-t em .qo-touch, .qo-loge .qo-a-t em kbd { display: none; }
.qo-loge .qo-anzeige:not([data-zustand="gesendet"]) .qo-a-stempel { display: none; }
.qo-loge .qo-kappe { min-width: 0; max-width: 32cqmin; white-space: normal; text-align: center; line-height: 1.05; text-wrap: balance; }
/* Schmale Schirme: der Satz weicht zuerst, die Zahl der Eingeloggten bleibt. */
@container (max-width: 900px) {
  .qo-leiste.qo-loge { grid-template-columns: 13cqmin minmax(0, 1fr) minmax(0, .9fr) auto; column-gap: 1.8cqmin; padding-right: 2cqmin; }
  .qo-buddy-fig { width: 14cqmin; height: 14cqmin; margin-left: -7cqmin; }
  .qo-sagt { padding-left: 1.6cqmin; }
  .qo-sagt-text { font-size: max(12px, 2.9cqmin); }
  .qo-loge .qo-kappe { max-width: 28cqmin; padding-left: 1.6cqmin; padding-right: 1.6cqmin; font-size: max(11px, 2.4cqmin); }
}
@media (prefers-reduced-motion: reduce) { .qo-sagt-text.neu span { animation: none; } }

/* ---- Fassung 3: ein fester Platz für die Sprechblase (Tobi 01.10.) --------------------------
   Raster: Buddy · Sprechblase · Uhr über Wahl und „5/10 eingeloggt" · Knopf. Die Blase steht
   immer an derselben Stelle neben dem Buddy, der Zipfel zeigt auf ihn; ohne Satz ist ihr Platz
   leer, aber er bleibt (nichts springt). */
.qo-leiste.qo-loge { grid-template-columns: 17cqmin 31cqmin minmax(0, 1fr) auto auto; column-gap: 2.2cqmin; }
.qo-loge > .qo-z-zeit { grid-column: 3 / 5; }
.qo-loge .qo-anzeige { grid-column: 3; }
.qo-loge .qo-los { grid-column: 5; }
.qo-loge .qo-sagt {
  grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: start; position: relative; max-width: 100%;
  display: block; padding: 1.2cqmin 1.8cqmin 1.3cqmin; border: 0; border-radius: 2.2cqmin;
  background: var(--t0); box-shadow: 0 .8cqmin 2cqmin color-mix(in srgb, var(--g0) 55%, transparent);
  opacity: 0; transform-origin: 0 60%; transform: scale(.6);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-schnapp);
}
.qo-loge .qo-sagt.an { opacity: 1; transform: none; }
.qo-loge .qo-sagt.pop { animation: qo-blase-pop var(--d-lang) var(--k-schnapp); }
@keyframes qo-blase-pop { 0% { transform: scale(.82) rotate(-2deg); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.qo-loge .qo-sagt::before {
  content: ""; position: absolute; left: -1.5cqmin; top: 58%; width: 2.2cqmin; height: 2.4cqmin; margin-top: -1.2cqmin;
  background: var(--t0); clip-path: polygon(100% 0, 0 62%, 100% 100%);
}
.qo-loge .qo-sagt-text {
  min-height: 0; white-space: normal; overflow: visible; text-wrap: balance; color: var(--g0);
  font-size: max(12px, calc(2.9cqmin * var(--schrift, 1))); line-height: 1.12;
}
/* „5/10 eingeloggt": die Zahl groß, das Wort klein darunter — hinter der Wahl */
.qo-loge .qo-drin { grid-column: 4; grid-row: 2; align-self: center; justify-self: end; min-width: 0; padding-left: 1.6cqmin; }
.qo-loge .qo-drin .qo-tischwort { display: grid; justify-items: center; gap: .2cqmin; letter-spacing: 0; text-transform: none; }
.qo-loge .qo-drin .qo-tischwort b { font-family: var(--f-display); font-weight: 900; font-size: max(15px, calc(4cqmin * var(--schrift, 1))); line-height: 1; color: var(--t0); }
.qo-loge .qo-drin .qo-tischwort b i { font-style: normal; font-size: .6em; color: var(--t2); }
.qo-loge .qo-drin .qo-tischwort span { font-size: max(9px, calc(1.6cqmin * var(--schrift, 1))); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.qo-alle .qo-loge .qo-drin .qo-tischwort b { color: var(--acc2); }
@container (max-width: 900px) {
  .qo-leiste.qo-loge { grid-template-columns: 13cqmin 27cqmin minmax(0, 1fr) auto auto; column-gap: 1.6cqmin; }
  .qo-loge .qo-sagt { padding: .9cqmin 1.4cqmin 1cqmin; }
  .qo-loge .qo-sagt-text { font-size: max(11px, 2.7cqmin); }
  .qo-loge .qo-drin { padding-left: .8cqmin; }
}
/* Schmal: der Knopf sagt nur, was er tut — Tastenhinweis und Marke weichen, nichts wird abgeschnitten. */
@container (max-width: 900px) {
  .qo-loge .qo-los .qo-kbd, .qo-loge .qo-los .qo-los-marke { display: none; }
  .qo-loge .qo-kappe { max-width: 26cqmin; }
}
/* Die Uhr läuft wie zuvor über die ganze Breite neben dem Buddy (Tobi 01.10.: „Der Timer soll
   trotzdem da langgehen wie davor"); die Sprechblase hat ihren festen Platz darunter, direkt
   neben dem Buddy, vor der Wahl. */
.qo-loge > .qo-z-zeit { grid-column: 2 / 5; }
.qo-loge .qo-sagt { grid-row: 2; }

/* „Leeren" in der Anzeige (Art „mehrfach" mit on.leeren — Was fehlt, Tobi 05.11.): nimmt die ganze Auswahl zurück. */
.qo-leeren { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 18px; cursor: pointer;
  font: 800 13px/1 var(--f-ui, 'Plus Jakarta Sans', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--t0);
  background: color-mix(in srgb, var(--t0) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t0) 22%, transparent); }
.qo-leeren:hover { background: color-mix(in srgb, var(--du, #22d3ee) 28%, transparent); }
.qo-leeren svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qo-a-zahl.zu-viel b { color: var(--warn, #fbbf24); }