/* =====================================================================
   Quiznight 2 · DAS MENÜ AM EIGENEN SCHIRM (online, Discord) — Variante A
   „Ein Menü mit Reitern“ (Tobi, 2026-10-27; Zielbild design/handy/menue-online/
   entwurf.html?v=A). Zahnrad (qn.js, .qh-einst-feld) und Krone (host/
   steuerung.js, .qn-menue-a) öffnen DASSELBE Feld: gleiche Stelle (unter dem
   Kopf, rechts bündig mit dem Zahnrad, über dem Pult — nie darüber), gleiche
   Breite in jedem Reiter, gleiche Reiter „Für mich · Abend · Spieler“ (der
   Host; alle anderen sehen keine Reiter). Dazu die Host-Zeile im Kopf und die
   Stellschrauben der Lobby in derselben Familie („das Host-Menü musst du
   natürlich mit neu gestalten“, Tobi, 2026-10-28).
   Am Handy (das Blatt von unten) und am Fernseher gilt nichts hiervon.
   Nur Rollenfarben (--acc die Bühne und das Gewählte, --acc2 was an ist,
   --warn was etwas beendet). Trefferflächen ab 48 px; auf S (628 × 390) ist
   1cqmin nur 3,9 px, deshalb jedes Maß mit Untergrenze in px.
   ===================================================================== */

/* ---- Die Fläche (beide) ----------------------------------------------------- */
.qh-einstblatt.qh-einst-feld .qh-einst-karte,
.sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a {
  --mz-flaeche: color-mix(in srgb, var(--g2) 94%, var(--acc) 6%);
  --mz-rand: color-mix(in srgb, var(--t0) 13%, transparent);
  /* Direkt unter dem Kopf: Die Oberkante liegt nie mitten in der Fragezeile (ein Streifen Buchstaben darüber sah abgeschnitten aus). */
  top: var(--mz-oben); right: var(--mz-rechts);
  width: min(max(300px, 62cqmin), calc(100% - 4cqmin));
  max-height: calc(100% - var(--mz-oben) - var(--mz-boden, 0px) - max(6px, 1cqmin));
  padding: max(10px, 2cqmin); gap: max(6px, 1.3cqmin); border-radius: max(16px, 3.3cqmin);
  background: linear-gradient(180deg, var(--mz-flaeche), color-mix(in srgb, var(--g1) 96%, #000));
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) var(--mz-rand), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent),
    0 max(12px, 3cqmin) max(30px, 7cqmin) rgba(0, 0, 0, .6);
}
.qh-einstblatt.qh-einst-feld { --mz-oben: var(--zr-unten, 9cqmin); --mz-rechts: var(--zr-rechts, 3cqmin); --mz-boden: var(--zr-boden, 0px); }
.sp-host-schicht[data-ort="wand"] .sp-host-box { --mz-oben: var(--sp-host-mtop, 10cqmin); --mz-rechts: var(--sp-host-mrechts, 2.4cqmin); --mz-boden: var(--sp-host-mboden, 0px); }
.sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a { left: auto; }
/* Der Rücken des Zahnrads dunkelt nicht ab, wenn es Reiter trägt — das Host-Menü hat keinen, beim Wechsel flackerte es sonst. */
.qh-einstblatt.qh-einst-mitreiter .qh-einst-ruecken { background: transparent; }
/* Aus dem anderen Menü herübergewechselt: nichts fährt auf. */
.qh-einstblatt.qh-einst-still, .qh-einstblatt.qh-einst-still .qh-einst-karte, .qh-einstblatt.qh-einst-still .qh-einst-ruecken,
.qh-einstblatt.qh-einst-still::after { transition: none; }   /* auch das Feld selbst blendet nicht (es blinkte beim Wechsel aus dem Host-Menü) */

/* Die Spitze zeigt auf den Knopf des Reiters, der offen ist (Zahnrad bzw. Krone). */
.qh-einstblatt.qh-einst-feld::after, .sp-host-schicht[data-ort="wand"] .sp-host-blattplatz:has(> .qn-menue-a)::after {
  content: ""; position: absolute; z-index: 2; width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg); pointer-events: none;
  top: calc(var(--mz-oben) - 7px);
  background: color-mix(in srgb, var(--g2) 94%, var(--acc) 6%);
  box-shadow: -1.5px -1.5px 0 color-mix(in srgb, var(--t0) 13%, transparent);
}
.qh-einstblatt.qh-einst-feld::after { right: calc(var(--mz-rechts) + var(--zr-mitte, 20px) - 7px); opacity: 0; transition: opacity var(--d-kurz) var(--k-ein); }
.qh-einstblatt.qh-einst-feld.auf::after { opacity: 1; }
.sp-host-schicht[data-ort="wand"] .sp-host-blattplatz:has(> .qn-menue-a)::after { right: calc(var(--mz-rechts) + var(--sp-host-mnub, 67px) - 7px); }

/* ---- Die Reiter (QN.menueReiter) -------------------------------------------- */
.qn-mreiter { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: max(3px, .6cqmin); padding: max(3px, .6cqmin);
  border-radius: max(12px, 2.5cqmin); background: color-mix(in srgb, var(--g0) 70%, transparent); }
.qn-mrt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: max(5px, 1cqmin); min-width: 0;
  min-height: max(44px, 6.8cqmin); padding: 0 max(6px, 1cqmin); border: 0; border-radius: max(9px, 1.9cqmin);
  background: transparent; color: var(--t1); font: 800 max(11.5px, 2.2cqmin)/1 var(--f-display); white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--d-kurz) var(--k-ein);
}
.qn-mrt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.qn-mrt:active { transform: scale(.97); }
.qn-mrt svg { width: max(13px, 2.5cqmin); height: max(13px, 2.5cqmin); flex: none; }
.qn-mrt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qn-mrt i { font-style: normal; display: grid; place-items: center; min-width: max(17px, 3.1cqmin); height: max(17px, 3.1cqmin); padding: 0 max(4px, .8cqmin);
  border-radius: 99px; font: 800 max(10px, 1.8cqmin)/1 var(--f-display); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--t0) 14%, transparent); }
.qn-mrt.an { background: var(--acc); color: var(--auf-acc);
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 28%, transparent), 0 3px 0 color-mix(in srgb, var(--acc) 55%, #000); }
.qn-mrt.an i { background: color-mix(in srgb, var(--auf-acc) 18%, transparent); }
@media (hover: hover) { .qn-mrt:not(.an):hover { color: var(--t0); background: color-mix(in srgb, var(--t0) 7%, transparent); } }
.qn-mrt:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: 2px; }

/* ---- Das Zahnrad: Kopf -------------------------------------------------------- */
.qh-einstblatt.qh-einst-feld .qh-einst-titel { display: flex; align-items: baseline; justify-content: space-between; gap: max(8px, 1.4cqmin);
  padding: max(2px, .4cqmin) max(4px, .7cqmin) 0; font: 800 max(14px, 2.8cqmin)/1.1 var(--f-display); }
.qh-einstblatt.qh-einst-feld .qh-einst-titel span { font: 600 max(10px, 1.85cqmin)/1.1 var(--f-body); color: var(--t2); white-space: nowrap; }
.qh-einst-unter { display: flex; justify-content: space-between; gap: max(8px, 1.4cqmin); padding: 0 max(4px, .7cqmin);
  font: 600 max(10px, 1.85cqmin)/1.25 var(--f-body); color: var(--t2); }
.qh-einst-unter span { white-space: nowrap; }
.qh-einst-rumpf { display: grid; gap: max(6px, 1.3cqmin); align-content: start; min-width: 0; }
/* Mit Reitern steht der Titel nur in einer Ebene (Rechtliches, Fehler in Frage 1 …) — dort weicht der Satz darunter. */
.qh-einst-mitreiter:not(.qh-einst-liest) .qh-einst-titel { display: none; }
.qh-einst-mitreiter.qh-einst-liest .qh-einst-unter { display: none; }

/* ---- Zeilen der Familie (Zahnrad, Ebenen aus dem Feedback, Griffe des Hosts) ------------------
   Eine Reihe: Zeichen im Kreis · Wort und Satz (.qh-einst-wt) · Schalter bzw. Pfeil — alles auf der Mitte, 52 px auf M. */
.qh-einstblatt.qh-einst-feld .qh-einst-liste { gap: max(5px, 1cqmin); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile, .qn-menue-a .sp-host-tat, .qn-menue-a .sp-host-person {
  position: relative; min-height: max(48px, 8.5cqmin); border-radius: max(12px, 2.5cqmin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 12%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent),
    0 3px 0 color-mix(in srgb, var(--g0) 85%, #000);
}
.qh-einstblatt.qh-einst-feld .qh-einst-zeile {
  display: flex; align-items: center; gap: max(9px, 1.8cqmin); align-content: normal;
  padding: max(5px, 1cqmin) max(10px, 2cqmin) max(5px, 1cqmin) max(12px, 2.2cqmin);
}
.qh-einstblatt.qh-einst-feld .qh-einst-zeile:has(> .qh-einst-ic) { padding-left: max(8px, 1.5cqmin); }
@media (hover: hover) { .qh-einstblatt.qh-einst-feld .qh-einst-zeile:hover, .qn-menue-a .sp-host-tat:not([disabled]):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 80%, var(--t0) 12%), color-mix(in srgb, var(--g2) 88%, var(--t0) 4%)); } }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile:active { transform: translateY(1px); }
.qh-einstblatt.qh-einst-feld .qh-einst-kopf { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: max(8px, 1.4cqmin); }
.qh-einst-wt { flex: 1 1 auto; min-width: 0; display: grid; gap: max(1px, .25cqmin); }
.qh-einstblatt.qh-einst-feld .qh-einst-kopf b { font: 800 max(12px, 2.45cqmin)/1.15 var(--f-display); min-width: 0; }
.qh-einstblatt.qh-einst-feld .qh-einst-fuss { font: 600 max(10px, 1.9cqmin)/1.25 var(--f-body); color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qh-einstblatt.qh-einst-feld .qh-einst-fuss[hidden] { display: none; }
.qh-einst-ic { flex: none; display: grid; place-items: center; width: max(30px, 5.9cqmin); height: max(30px, 5.9cqmin); border-radius: 50%; font-style: normal;
  background: color-mix(in srgb, var(--acc) 17%, transparent); color: var(--acc); }
.qh-einst-ic svg { width: 53%; height: 53%; }
.qh-einstblatt.qh-einst-feld .qh-einst-pfeil { flex: none; display: grid; place-items: center; color: var(--t2); font-size: max(15px, 2.8cqmin); line-height: 1; }
.qh-einstblatt.qh-einst-feld .qh-einst-pfeil svg { width: max(14px, 2.6cqmin); height: max(14px, 2.6cqmin); }
/* Der Schalter: die Bahn, der Knopf fährt hinüber; an heißt --acc2. */
.qh-einstblatt.qh-einst-feld .qh-schalter { --sw: max(24px, 4.3cqmin); flex: none; width: calc(var(--sw) * 1.7); height: var(--sw);
  background: color-mix(in srgb, var(--t0) 16%, transparent); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 14%, transparent); }
.qh-einstblatt.qh-einst-feld .qh-schalter > i { left: 3px; top: 3px; width: calc(var(--sw) - 6px); height: calc(var(--sw) - 6px); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.qh-einstblatt.qh-einst-feld .qh-schalter.an { background: var(--acc2); box-shadow: none; --qh-sch-x: calc(var(--sw) * .7); --qh-sch-knopf: #fff; }
/* Der Regler (Lautstärke) — „Kapsel“: Die Zeile ist der Regler. Eine dunkle Mulde, gefüllt bis zum Wert (--v), darin Zeichen, Wort und Wert;
   darüber unsichtbar der Schieber des Browsers (ziehen überall, Pfeiltasten). 48 px hoch: die ganze Zeile ist Trefferfläche. */
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-z="ton"] { padding: max(5px, .9cqmin); cursor: default; }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-z="ton"]:active { transform: none; }
.qh-einst-kapsel { position: relative; flex: 1 1 auto; min-width: 0; height: max(48px, 7.6cqmin); border-radius: max(11px, 2.2cqmin); overflow: hidden;
  background: color-mix(in srgb, var(--g0) 88%, #000);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 10%, transparent); }
.qh-einst-kf { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 100%); border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 82%, #fff), color-mix(in srgb, var(--acc2) 86%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset -2px 0 0 rgba(255, 255, 255, .55); transition: width 60ms linear; }
.qh-einst-kapsel.aus .qh-einst-kf { display: none; }
.qh-einst-ki { position: absolute; inset: 0; display: flex; align-items: center; gap: max(9px, 1.7cqmin); padding: 0 max(12px, 2.3cqmin); pointer-events: none;
  color: #fff; font: 800 max(12.5px, 2.45cqmin)/1 var(--f-display); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.qh-einst-ki i { display: grid; width: max(18px, 3.2cqmin); height: max(18px, 3.2cqmin); flex: none; }
.qh-einst-ki i svg { width: 100%; height: 100%; }
.qh-einst-kapsel.aus .qh-einst-ki { color: var(--t1); text-shadow: none; }
.qh-einst-wert { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qh-einst-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.qh-einst-kapsel:has(.qh-einst-regler:focus-visible) { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 max(2px, .35cqmin) var(--t0); }
@media (prefers-reduced-motion: reduce) { .qh-einst-kf { transition: none; } }
/* Paare (Neu verbinden · Rechtliches, Fehler · Problem melden): kleineres Zeichen, ohne Satz und Pfeil; ein langes Wort
   bricht in zwei gleich lange Zeilen („Fehler in / dieser Frage“) — abgeschnitten wird nie. */
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-g="2"]:not(.allein) { gap: max(8px, 1.5cqmin); padding-right: max(8px, 1.6cqmin); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-g="2"]:not(.allein) .qh-einst-kopf b { text-wrap: balance; line-height: 1.12; }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-g="2"]:not(.allein) .qh-einst-ic { width: max(28px, 4.9cqmin); height: max(28px, 4.9cqmin); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile[data-g="2"]:not(.allein) .qh-einst-pfeil { display: none; }
/* Was etwas beendet: ohne Fläche, mit Rand und Wort in --warn. */
.qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr, .qn-menue-a .sp-host-tat.gefahr { background: none; box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--warn) 45%, transparent); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr .qh-einst-ic, .qn-menue-a .sp-host-tat.gefahr > i { background: none; color: var(--warn);
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--warn) 60%, transparent); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr .qh-einst-kopf b, .qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr .qh-einst-pfeil { color: var(--warn); }
/* Die Rückfrage steht IN der Zeile, rechts neben dem Wort. */
.qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr.fragt { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile.gefahr.fragt .qh-sicher { flex: none; }
/* „Dieser Abend“ (nur ohne Reiter): zum Lesen, deshalb ohne Fläche einer Zeile. */
.qh-einstblatt.qh-einst-feld .qh-einst-abend { border-radius: max(12px, 2.5cqmin); background: color-mix(in srgb, var(--g0) 55%, transparent);
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 10%, transparent); }
/* Passt das Feld nicht zwischen Kopf und Pult (qn.js, passeFeld: z. B. mit „Musik“ in M), gehen die Sätze unter den Wörtern und die
   Zeile „Gilt nur für dieses Gerät“; die Zeilen werden so hoch wie die Trefferfläche (48 px). */
.qh-einstblatt.qh-einst-feld.qh-einst-eng .qh-einst-zeile:not(.fbm-dank) .qh-einst-fuss { display: none; }
.qh-einstblatt.qh-einst-feld.qh-einst-eng .qh-einst-zeile { min-height: 48px; }
.qh-einstblatt.qh-einst-feld.qh-einst-eng .qh-einst-unter { display: none; }
/* „Zurück“ aus einer Ebene (Rechtliches, Fehler in Frage 1 …): ein Griff der Familie, nicht die Farbe des Gewählten. */
.qh-einstblatt.qh-einst-feld.qh-einst-liest .qh-einst-fertig, .qn-menue-a .sp-host-fertig .sp-host-mini {
  display: flex; align-items: center; justify-content: center; gap: max(6px, 1.2cqmin); min-height: 48px; padding: 0 max(12px, 2.2cqmin);
  border-radius: max(12px, 2.5cqmin); font: 800 max(12px, 2.45cqmin)/1 var(--f-display); color: var(--t0);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 12%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent),
    0 3px 0 color-mix(in srgb, var(--g0) 85%, #000);
}
.qh-einstblatt.qh-einst-feld.qh-einst-liest .qh-einst-fertig::before { content: ""; width: max(13px, 2.4cqmin); height: max(13px, 2.4cqmin); background: var(--t1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Die Ebenen aus dem Feedback (melden.js): gemeldet heißt der Rand in --acc. */
.qh-einstblatt.qh-einst-feld .fbm-zr .qh-einst-zeile.fbm-dank { box-shadow: inset 0 0 0 2px var(--acc), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.qh-einstblatt.qh-einst-feld .qh-einst-zeile:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: 2px; }

/* ---- Die Host-Zeile im Kopf — Variante A „Nur die Griffe“ (Tobi, 2026-10-28: „mit dem Zug da oben bin ich noch nicht zufrieden“,
   Zielbild design/handy/menue-online/zeile-entwurf.html): kein Balken, kein Text — der Kopf des Schirms bleibt, wie er ist, und rechts
   davor stehen die Griffe des Augenblicks (vor der Uhr bzw. der Krone). Wo wir sind und wer fertig ist, steht in der Karte darunter. ---- */
.sp-host-schicht[data-ort="wand"] .sp-host-zeile { background: none; border: 0; box-shadow: none; border-radius: 0; pointer-events: none; }
.sp-host-schicht[data-ort="wand"] .sp-host-wo { display: none; }
.sp-host-schicht[data-ort="wand"] .sp-host-griffe { gap: max(6px, 1cqmin); pointer-events: auto; }
/* Ohne Balken liegt die Trefferfläche mittig um den Griff (nach oben endete sie an der Schirmkante: auf S nur 42 px). */
.sp-host-schicht[data-ort="wand"] .sp-host-zeile .sp-host-griff::before { top: 50%; bottom: auto; transform: translateY(-50%); }
/* Was im Kopf unter den Griffen läge (steuerung.js, kopfFrei), tritt zurück, solange sie dort stehen. */
.qn-kopf > .sp-host-unter { visibility: hidden; }
/* In der Pause liegt ein offenes Menü über dem Pause-Schirm (Tobi: „wenn Pause ist, sollte ich auch meine Einstellungen öffnen können“):
   Der Griff „Fortsetzen“ tritt zurück, solange Zahnrad oder Krone offen sind. Der Schirm selbst bleibt — er verdeckt die Frage (pause/pause.js). */
html.qh-einst-offen .sp-host-schicht[data-ort="wand"] .pz-griffort,
.sp-host-schicht[data-ort="wand"] .sp-host-box.blatt-auf .pz-griffort { opacity: 0; pointer-events: none; }
.sp-host-schicht[data-ort="wand"] .sp-host-griff {
  gap: max(6px, 1.1cqmin); padding: 0 max(11px, 2.3cqmin); border-radius: max(10px, 2cqmin); color: var(--t0);
  font: 800 max(11px, 2.2cqmin)/1 var(--f-display);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 90%, var(--t0) 6%), var(--g2));
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 14%, transparent), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000);
}
.sp-host-schicht[data-ort="wand"] .sp-host-griff.haupt { background: var(--acc); color: var(--auf-acc);
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 26%, transparent), 0 3px 0 color-mix(in srgb, var(--acc) 55%, #000); }
.sp-host-schicht[data-ort="wand"] .sp-host-griff.fragt { background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 90%, var(--warn) 8%), var(--g2));
  box-shadow: inset 0 0 0 max(2px, .3cqmin) var(--warn), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.sp-host-schicht[data-ort="wand"] .sp-host-griff.gefahr { box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--warn) 60%, transparent), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
@media (hover: hover) { .sp-host-schicht[data-ort="wand"] .sp-host-griff:not(.haupt):not([disabled]):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 82%, var(--t0) 12%), var(--g2)); } }

/* ---- Das Host-Menü (Krone) in derselben Gestalt ----------------------------------- */
.qn-menue-a .sp-host-mkoerper { gap: max(5px, 1cqmin); }
/* Wo wir sind: Frage bzw. Runde, die Bahn des Abends, wer schon geantwortet hat. */
.sp-host-standk { display: grid; gap: max(6px, 1.2cqmin); padding: max(9px, 1.8cqmin) max(11px, 2.1cqmin) max(10px, 2cqmin); border-radius: max(12px, 2.5cqmin);
  background: color-mix(in srgb, var(--g0) 55%, transparent); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 10%, transparent); }
.sp-host-sk-o { display: flex; justify-content: space-between; align-items: baseline; gap: max(8px, 1.4cqmin); min-width: 0; }
.sp-host-sk-o b { font: 800 max(13px, 2.45cqmin)/1 var(--f-display); white-space: nowrap; }
.sp-host-sk-o small { font: 700 max(10px, 1.95cqmin)/1 var(--f-body); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-host-bahn { height: max(6px, 1.3cqmin); border-radius: 99px; background: color-mix(in srgb, var(--t0) 10%, transparent); overflow: hidden; }
.sp-host-bahn i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #fff)); transition: transform var(--d-mittel) var(--k-ein); }
/* Bricht der Satz um, dann in zwei gleich lange Zeilen — „fehlen noch“ steht nie allein unten. */
.sp-host-sk-u { font: 600 max(10px, 1.9cqmin)/1.25 var(--f-body); color: var(--t1); text-wrap: balance; }
.sp-host-gilt { margin: 0; padding: 0 max(4px, .7cqmin); font: 600 max(10px, 1.85cqmin)/1.35 var(--f-body); color: var(--t2); }
.sp-host-gilt b { color: var(--t1); font-weight: 800; margin-right: .25em; }
.sp-host-gilt span { white-space: nowrap; }
.sp-host-gilt i { font-style: normal; }
.qn-menue-a .sp-host-fuss { text-wrap: balance; }
/* Die seltenen Griffe als Zeilen der Familie: Zeichen im Kreis, Wort und Satz, Pfeil. */
.qn-menue-a .sp-host-taten { gap: max(5px, 1cqmin); }
.qn-menue-a .sp-host-tat { gap: max(9px, 1.8cqmin); padding: max(5px, 1cqmin) max(10px, 2cqmin) max(5px, 1cqmin) max(8px, 1.5cqmin); }
.qn-menue-a .sp-host-tat > i { display: grid; place-items: center; width: max(30px, 5.9cqmin); height: max(30px, 5.9cqmin); border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 17%, transparent); color: var(--acc); }
.qn-menue-a .sp-host-tat > i svg { width: 50%; height: 50%; }
.qn-menue-a .sp-host-tatn { font: 800 max(12px, 2.45cqmin)/1.15 var(--f-display); }
.qn-menue-a .sp-host-tatw em { font: 600 max(10px, 1.9cqmin)/1.25 var(--f-body); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qn-menue-a .sp-host-tat:not(.fragt)::after { content: ""; flex: none; width: max(14px, 2.6cqmin); height: max(14px, 2.6cqmin); background: var(--t2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.qn-menue-a .sp-host-tat.gefahr .sp-host-tatn { color: var(--warn); }
.qn-menue-a .sp-host-tat.gefahr:not(.fragt)::after { background: var(--warn); }
.qn-menue-a .sp-host-tat.fragt { background: color-mix(in srgb, var(--warn) 12%, transparent); box-shadow: inset 0 0 0 max(2px, .3cqmin) var(--warn); }
/* Spieler: dieselben Zeilen — Figur, Name und was er gerade tut, rechts was der Host mit ihm tun kann (beim Host: sein Schild). */
.qn-menue-a .sp-host-leute { gap: max(5px, 1cqmin); }
.qn-menue-a .sp-host-person { gap: max(9px, 1.8cqmin); padding: max(5px, 1cqmin) max(8px, 1.6cqmin) max(5px, 1cqmin) max(8px, 1.5cqmin); }
.qn-menue-a .sp-host-av { width: max(30px, 5.9cqmin); height: max(30px, 5.9cqmin); }
.qn-menue-a .sp-host-name b { font: 800 max(12px, 2.45cqmin)/1.15 var(--f-display); }
.qn-menue-a .sp-host-name em { font: 600 max(10px, 1.9cqmin)/1.25 var(--f-body); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qn-menue-a .sp-host-name .sp-host-kl { color: var(--acc); }
.qn-menue-a .sp-host-aktionen .sp-host-mini { min-height: max(30px, 5cqmin); border-radius: 99px; background: transparent; color: var(--t1);
  font: 800 max(10px, 1.9cqmin)/1 var(--f-display); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 18%, transparent); }
.qn-menue-a .sp-host-aktionen .sp-host-mini.haupt { color: var(--auf-acc); background: var(--acc); box-shadow: none; }
.qn-menue-a .sp-host-aktionen .sp-host-mini[data-tu="uebergabe"] { color: var(--acc); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--acc) 55%, transparent); }
.sp-host-chip { display: inline-flex; align-items: center; min-height: max(26px, 4.6cqmin); padding: 0 max(10px, 1.8cqmin); border-radius: 99px;
  font: 800 max(10px, 1.9cqmin)/1 var(--f-display); color: var(--acc); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--acc) 55%, transparent); }
/* Viele am Tisch: dieselbe Breite wie jeder andere Reiter (nichts springt), die Griffe heißen kurz („Raus“, „Host“). Spalten gibt
   es nur so viele, wie neben den Griffen ein ganzer Name Platz hat (Tobi, 29.10.: „Das Spielermenü wird nicht richtig angezeigt“ —
   im schmalen Feld standen zwei Spalten, die Namen waren 2 px breit, zu sehen nur „A“, „B“). Reicht die Breite nicht, rollt die eine Spalte. */
.qn-menue-a[data-spalten="2"] .sp-host-leute, .qn-menue-a[data-spalten="3"] .sp-host-leute { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: max(5px, 1cqmin); }
/* „Host geben" heißt auch bei vielen am Tisch so — das kurze „♛ Host" las sich wie das Schild des Hosts, jede Zeile sah aus wie ein Host
   (Prüfung 29.10., M1). Die Zelle ist dafür breit genug (≥ 300 px). */
.qn-menue-a.sp-host-blatt .sp-host-mini[data-tu="uebergabe"]:not(.fragt) .lang { display: inline; }
.qn-menue-a.sp-host-blatt .sp-host-mini[data-tu="uebergabe"]:not(.fragt) .kurz { display: none; }
.qn-menue-a:not([data-spalten="1"]) .sp-host-person { gap: max(7px, 1.3cqmin); padding-left: max(6px, 1.1cqmin); padding-right: max(6px, 1.1cqmin); }
.qn-menue-a:not([data-spalten="1"]) .sp-host-av { width: max(26px, 5cqmin); height: max(26px, 5cqmin); }
.qn-menue-a:not([data-spalten="1"]) .sp-host-person { min-height: 48px; }
.qn-menue-a:not([data-spalten="1"]) .sp-host-fuss { display: none; }   /* „In der Probe spielst nur du …“ — mit vielen am Tisch ließe sie das Feld rollen */
/* Die Krone hinter dem Namen des Hosts steht immer (Tobi, 29.10.: „dass immer klar ist, wer aktuell der Host ist"). */

/* ---- Die Lobby, Reiter Abend — Variante C „Wie die Einstellungen“ (steuerung.js, abendLobbyWandHtml) ----------
   Dieselben Zeilen wie im Zahnrad: Zeichen · Wort und Satz · rechts der Wert und der Pfeil; Party ist ein Schalter.
   Ein Tipp öffnet die Wahl als Ebene (eine Zeile je Stufe mit ihrem Satz), die Wahl führt zurück. */
.qn-menue-a .sp-host-azw { flex: none; margin-left: auto; font: 800 max(12px, 2.2cqmin)/1 var(--f-display); color: var(--t1); white-space: nowrap; }
.qn-menue-a .sp-host-az .sp-host-tatw em { white-space: nowrap; }
.qn-menue-a .sp-host-az.sp-host-azs::after { display: none; }
.sp-host-azsch { flex: none; position: relative; width: max(41px, 7.2cqmin); height: max(24px, 4.3cqmin); border-radius: 99px;
  background: color-mix(in srgb, var(--t0) 16%, transparent); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 14%, transparent);
  transition: background var(--d-mittel) var(--k-ein); }
.sp-host-azsch i { position: absolute; left: 3px; top: 3px; width: calc(max(24px, 4.3cqmin) - 6px); height: calc(max(24px, 4.3cqmin) - 6px); border-radius: 50%;
  background: var(--t1); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform var(--d-mittel) var(--k-schnapp), background var(--d-mittel) var(--k-ein); }
.sp-host-azsch.an { background: var(--acc2); box-shadow: none; }
.sp-host-azsch.an i { transform: translateX(calc(max(41px, 7.2cqmin) - max(24px, 4.3cqmin))); background: #fff; }
.qn-menue-a .sp-host-az[disabled] { opacity: .45; cursor: default; }
.sp-host-azfuss { display: flex; align-items: center; justify-content: space-between; gap: max(8px, 1.4cqmin); min-height: 48px; margin: -6px 0; padding: 0 max(4px, .7cqmin);
  font: 600 max(10px, 1.85cqmin)/1.25 var(--f-body); color: var(--t2); }
/* „Zurücksetzen“: leise, aber mit voller Trefferfläche (48 px hoch, seitlich 12 px dazu) — die Fläche liegt im Fuß, nichts ragt hinaus. */
.sp-host-azlink { display: inline-flex; align-items: center; min-height: 48px; margin: 0 -12px; padding: 0 12px; border: 0; background: none; color: var(--t1);
  font: 700 max(10.5px, 1.95cqmin)/1.2 var(--f-body); cursor: pointer; }
@media (hover: hover) { .sp-host-azlink:not([disabled]):hover { color: var(--t0); } }
.sp-host-azlink[disabled] { opacity: .45; cursor: default; }
.sp-host-azlink:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: 3px; border-radius: 4px; }
/* Die Ebene: oben der Rückweg mit dem Namen, darunter je Stufe eine Zeile mit Punkt. */
.sp-host-ebkopf { position: relative; display: flex; align-items: center; gap: max(6px, 1.2cqmin); min-height: max(40px, 6.6cqmin); padding: 0 max(4px, .7cqmin);
  border: 0; background: none; color: var(--t0); font: 800 max(14px, 2.7cqmin)/1 var(--f-display); cursor: pointer; text-align: left; }
.sp-host-ebkopf::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.sp-host-ebkopf i { display: inline-grid; width: max(15px, 2.7cqmin); height: max(15px, 2.7cqmin); color: var(--t1); }
.sp-host-ebkopf i svg { width: 100%; height: 100%; }
.sp-host-ebkopf:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: 2px; border-radius: 8px; }
.sp-host-ebwahl { display: grid; gap: max(5px, 1cqmin); }
.qn-menue-a .sp-host-opt.sp-host-ebopt { display: flex; align-items: center; gap: max(10px, 1.9cqmin); min-height: max(48px, 9cqmin); padding: max(6px, 1.2cqmin) max(12px, 2.3cqmin);
  border-radius: max(12px, 2.5cqmin); text-align: left; white-space: normal; color: var(--t0);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 12%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent),
    0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.qn-menue-a .sp-host-opt.sp-host-ebopt.an { background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  color: var(--t0); box-shadow: inset 0 0 0 max(2px, .3cqmin) var(--acc), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.sp-host-punkt { flex: none; width: max(20px, 3.6cqmin); height: max(20px, 3.6cqmin); border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t0) 30%, transparent); }
.sp-host-ebopt.an .sp-host-punkt { background: var(--acc); box-shadow: inset 0 0 0 max(4px, .8cqmin) var(--g2), 0 0 0 2px var(--acc); }
.qn-menue-a .sp-host-ebopt .sp-host-tatn { font: 800 max(12.5px, 2.5cqmin)/1.15 var(--f-display); }
.qn-menue-a .sp-host-ebopt .sp-host-tatw em { font: 600 max(10px, 1.9cqmin)/1.25 var(--f-body); color: var(--t2); font-style: normal; }

/* ---- Niedrig (S, 628 × 390 — und alles, was so flach ist) --------------------------------
   Untereinander passt das Feld nicht zwischen Kopf und Pult. Es nimmt die Breite: die Reiter stehen
   links als Spalte (über die ganze Höhe), die Zeilen rechts in zwei Spalten — für Zahnrad UND
   Host-Menü, in jedem Reiter dieselbe Breite (nach der Höhe des Schirms, nicht nach dem Inhalt:
   Beim Wechsel des Reiters springt nichts). */
@container (max-height: 560px) {
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-karte, .sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a.qn-menue-a {
    width: min(calc(100% - var(--mz-rechts) * 2), max(640px, 110cqmin));
    grid-template-columns: max(112px, 20cqmin) minmax(0, 1fr); column-gap: max(8px, 1.6cqmin); }
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-karte > *, .sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a > * { grid-column: 2; grid-row: 1; }
  .sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a > .sp-host-mnote { grid-row: 2; }
  .qh-einstblatt.qh-einst-mitreiter .qn-mreiter, .sp-host-schicht[data-ort="wand"] .sp-host-blatt.qn-menue-a > .qn-mreiter {
    grid-column: 1; grid-row: 1 / -1; align-self: stretch; align-content: start; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qh-einstblatt.qh-einst-mitreiter .qn-mrt, .sp-host-schicht[data-ort="wand"] .qn-menue-a .qn-mrt { min-height: 48px; justify-content: flex-start; padding: 0 max(8px, 1.6cqmin); }
  .qh-einstblatt.qh-einst-mitreiter .qn-mrt i, .sp-host-schicht[data-ort="wand"] .qn-menue-a .qn-mrt i { margin-left: auto; }
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-unter { display: none; }
  /* Zwei Spalten: jede Zeile eine Zelle; bleibt eine allein, nimmt sie die ganze Breite (keine leere Zelle). */
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-liste { grid-template-columns: 1fr 1fr; }
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-liste > * { grid-column: auto; }
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-liste > .qh-einst-zeile.qh-einst-breit,
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-liste.fbm-zr > .qh-einst-zeile:last-child:nth-child(odd),   /* die Zeilen des Zahnrads zählt qn.js (zeilenNeu, breit); die Ebenen aus dem Feedback hier */
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-liste > .qh-einst-zeile.gefahr.fragt { grid-column: 1 / -1; }
  .qh-einstblatt.qh-einst-mitreiter .qh-einst-zeile:not(.fbm-dank) .qh-einst-fuss { display: none; }
  /* Die Liste des Abends in der Lobby: zwei Spalten wie im Zahnrad, der Fuß über die ganze Breite. */
  .qn-menue-a[data-phase="lobby"] .sp-host-mkoerper:has(> .sp-host-az) { grid-template-columns: 1fr 1fr; }
  .qn-menue-a[data-phase="lobby"] .sp-host-mkoerper > .sp-host-azfuss,
  .qn-menue-a[data-phase="lobby"] .sp-host-mkoerper > .sp-host-az:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
  .qn-menue-a[data-phase="lobby"] .sp-host-az:not([data-tu="abend:anders"]):not([data-tu="abend:party"]) .sp-host-tatw em { display: none; }
}
.qh-einstblatt.qh-einst-feld.qh-einst-quer .qh-einst-karte { width: min(calc(100% - var(--mz-rechts) * 2), max(640px, 110cqmin)); }
.qh-einstblatt.qh-einst-feld.qh-einst-quer .qh-einst-liste.fbm-zr > .qh-einst-zeile:last-child:nth-child(odd),
.qh-einstblatt.qh-einst-feld.qh-einst-quer .qh-einst-liste > .qh-einst-zeile.qh-einst-breit { grid-column: 1 / -1; }
.qh-einstblatt.qh-einst-quer .qh-einst-zeile[data-g="2"] .qh-einst-pfeil { display: none; }
@container (max-height: 460px) {
  .qh-einstblatt.qh-einst-feld .qh-einst-zeile:has(> .qh-einst-ic) .qh-einst-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qh-einstblatt.qh-einst-feld::after, .sp-host-bahn i { transition: none; }
}

/* ---- Der Wechsel zwischen den Reitern (menue-wechsel.js; Tobi, 2026-10-28: „eine schöne Animation“) ------------------------
   Der Schieber trägt beim Wechsel die Farbe des gewählten Reiters vom alten zum neuen; solange er gleitet, hat der Reiter selbst keine Fläche. */
.qn-mreiter { position: relative; }
.qn-mreiter .qn-mrt { z-index: 1; }
.qn-mschieber { position: absolute; z-index: 0; transform-origin: 0 0; pointer-events: none; border-radius: max(9px, 1.9cqmin); background: var(--acc);
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 28%, transparent), 0 3px 0 color-mix(in srgb, var(--acc) 55%, #000); }
.qn-mreiter.qn-mgleit .qn-mrt.an { background: transparent; box-shadow: none; }