/* =====================================================================
   Quiznight 2 · DIE HOST-STEUERUNG (host/steuerung.js)
   Nur Rollenfarben (--acc Bühne, --acc2 Tiefe, --jetzt was sich ändert,
   --warn was etwas beendet — nie ohne Zeichen und Wort, nie als Fläche;
   --du nie). Bewegung nur transform und opacity, Dauern und Kurven aus
   den Tokens. Trefferflächen ab 48 px, Schrift ab 9 px auf S (628 × 390).
   Keine CSS-Keyframes: Die Pause (html.qn-pause) hält sie an — Übergänge
   und Web-Animationen laufen weiter.
   ===================================================================== */

/* ---- Die Schicht über dem Schirm ---------------------------------------- */
.sp-host-schicht { position: absolute; z-index: 6; pointer-events: none; }
.sp-host-schicht[hidden] { display: none; }
.sp-host-box {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: size;
  pointer-events: none; font-family: var(--f-body); color: var(--t0);
}
/* Die Probe hatte unten einen Hinweis „Angehalten — P …": Jetzt zeigt jeder Schirm die Pause selbst. */
html.sp-host-da.qn-pause body::after { display: none; }
/* Nur für Vorleser (Rückfragen, Blätter). */
.sp-host-ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Die Krone im Kopf (nur der Host) ------------------------------------ */
/* Der Anfangsschirm (Tobi, 06.11.2026: „nur an diesem Anfangsscreen soll die Krone auch weg"): Fällt beim Start der Schluss der Lobby
   (Vorhang, Wisch, Pixelblende — „Level 1 · Bereit?"), geht die Krone mit; das Zahnrad verdeckt die Lobby dort selbst
   (auftritt.css, data-geschlossen). Überall sonst bleiben beide, auch in der Rundenvorschau. */
body:has(.qla-schluss[data-zu]) :is(.sp-host-krone, .sp-host-tipp), body:has(.qla[data-geschlossen]) :is(.sp-host-krone, .sp-host-tipp) { visibility: hidden; }
.sp-host-krone {
  position: absolute; z-index: 5; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 30%, var(--g2)); color: var(--t0); pointer-events: auto;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 max(1px, .18cqmin) color-mix(in srgb, var(--acc) 60%, transparent);
  transition: transform var(--d-mittel) var(--k-schnapp);
}
/* Die Trefferfläche: mindestens 48 × 48, um die Mitte. */
.sp-host-krone::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%); border-radius: 50%; }
.sp-host-krone::after {   /* der offene Zustand als Fläche darunter — nur Deckkraft bewegt sich */
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--acc) 78%, #000);
  opacity: 0; transition: opacity var(--d-kurz) var(--k-ein);
}
.sp-host-krone svg { position: relative; z-index: 1; width: 56%; height: 56%; }
@media (hover: hover) { .sp-host-krone:hover { transform: scale(1.06); } }
.sp-host-krone:active { transform: scale(.94); }
.sp-host-krone.an { color: #fff; }
.sp-host-krone.an::after { opacity: 1; }
.sp-host-krone:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: max(2px, .4cqmin); }

/* ---- Die Host-Zeile: der Kopf, umgeklappt --------------------------------- */
.sp-host-steuer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sp-host-zeile {
  position: absolute; left: 0; top: 0; right: var(--sp-host-rechts, 14cqmin); height: var(--sp-host-kopf, 10cqmin);
  display: flex; align-items: center; gap: 1.6cqmin; padding: 0 1.6cqmin 0 2.6cqmin;
  background: var(--g1);
  border-bottom: max(1px, .15cqmin) solid color-mix(in srgb, var(--t0) 14%, transparent);
  border-bottom-right-radius: 2cqmin;
  box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .35);
  pointer-events: auto; opacity: 0; transform: translateY(-104%);
  transition: transform var(--d-mittel) var(--k-ein), opacity var(--d-kurz) var(--k-ein);
}
.sp-host-steuer.auf .sp-host-zeile { opacity: 1; transform: none; }
.sp-host-steuer:not(.auf) .sp-host-zeile, .sp-host-steuer:not(.auf) .sp-host-blatt { pointer-events: none; }
.sp-host-wo { display: flex; align-items: baseline; gap: 1.4cqmin; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.sp-host-titel { display: inline-flex; align-items: center; gap: .8cqmin; flex: none;
  font-family: var(--f-display); font-weight: 800; font-size: max(12px, 2.6cqmin); letter-spacing: .02em; }
.sp-host-titel i { display: inline-grid; width: max(13px, 2.6cqmin); height: max(13px, 2.6cqmin); color: var(--acc); }
.sp-host-titel i svg { width: 100%; height: 100%; }
.sp-host-lage { flex: 1 1 auto; min-width: 0; font-size: max(10px, 2cqmin); font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; }
.sp-host-lage b { color: var(--t0); font-weight: 700; }
.sp-host-lage[hidden] { display: none; }
.sp-host-griffe { display: flex; align-items: center; gap: .9cqmin; flex: none; margin-left: auto; }

/* Ein Griff: Zeichen und Wort, die Trefferfläche mindestens 48 px hoch. */
.sp-host-griff {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8cqmin;
  min-width: 48px; height: min(max(32px, calc(var(--sp-host-kopf, 10cqmin) - max(3px, .9cqmin))), max(34px, 7cqmin));
  padding: 0 max(8px, 1.6cqmin); border: 0; border-radius: max(9px, 1.8cqmin);
  background: color-mix(in srgb, var(--t0) 10%, var(--g1)); color: var(--t0);
  font: 700 max(10px, 2.1cqmin)/1.1 var(--f-body); white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-kurz) var(--k-ein), opacity var(--d-kurz) var(--k-ein);
}
.sp-host-griff::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
/* In der Zeile wächst die Trefferfläche nach oben (zum Rand des Schirms), nie in die Frage darunter. */
.sp-host-zeile .sp-host-griff::before { top: auto; bottom: 0; transform: none; }
.sp-host-griff:active { transform: scale(.96); }
.sp-host-griff:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: max(2px, .3cqmin); }
.sp-host-griff[disabled] { opacity: .42; cursor: default; }
.sp-host-z { display: inline-grid; width: max(14px, 2.6cqmin); height: max(14px, 2.6cqmin); flex: none; }
.sp-host-z svg { width: 100%; height: 100%; }
/* Die Hauptaktion: die Bühnenfarbe, abgedunkelt — weiße Schrift bleibt lesbar (auch klein). */
.sp-host-griff.haupt, .sp-host-mini.haupt { background: color-mix(in srgb, var(--acc) 72%, #000); color: #fff; }
/* Gewählt (ein offenes Blatt): hell umrandet — nicht gelb, damit es nie wie eine Warnung aussieht. */
.sp-host-griff.gewaehlt { background: color-mix(in srgb, var(--t0) 18%, var(--g1)); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 70%, transparent); }
/* Was etwas beendet: neutral, mit Warnrand und Zeichen — nie als Fläche. */
.sp-host-griff.gefahr { box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--warn) 70%, transparent); }
.sp-host-griff.gefahr .sp-host-z { color: var(--warn); }
/* Die Rückfrage im Knopf: Er fragt („Ja"), ein zweiter Druck wirkt; der Strich zeigt die vier Sekunden. */
.sp-host-griff.fragt, .sp-host-mini.fragt { box-shadow: inset 0 0 0 max(2px, .3cqmin) var(--warn); background: var(--g2); }
.sp-host-ja { display: inline-grid; place-items: center; padding: .2cqmin 1.1cqmin; min-height: 1.5em; border-radius: 10cqmin;
  background: var(--t0); color: var(--g0); font-size: max(9px, 1.8cqmin); font-weight: 800; letter-spacing: .02em; flex: none; }
.sp-host-frist { position: absolute; left: 12%; right: 12%; bottom: max(3px, .5cqmin); height: max(2px, .3cqmin); border-radius: 2px;
  background: var(--warn); transform-origin: left center; }

/* Schmal (S, 628 breit): „Host" steht dann nur als Krone; „wo wir sind" misst selbst (steuerung.js). */
@container (max-width: 660px) {
  .sp-host-titel b { display: none; }
  .sp-host-zeile { gap: 1cqmin; padding-left: 2cqmin; }
  .sp-host-griffe { gap: .7cqmin; }
  .sp-host-griff { padding: 0 max(7px, 1.2cqmin); }
}

/* ---- Am Handy (Bigscreen): Die Zeile deckt den Kopf des Pults — Schriftzug
   und Uhr —, nie das Deck in der Daumenzone. In der Frage EINE Reihe. ---- */
.sp-host-schicht[data-ort="hand"] .sp-host-zeile {
  height: auto; min-height: var(--sp-host-kopf, 24cqmin); flex-direction: column; align-items: stretch; justify-content: center;
  gap: 1.6cqmin; padding: 2.4cqmin 2.6cqmin 2.6cqmin 4cqmin; border-bottom-right-radius: 5cqmin;
}
.sp-host-schicht[data-ort="hand"] .sp-host-titel { font-size: 4.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-titel i { width: 4.4cqmin; height: 4.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-lage { font-size: 3.4cqmin; white-space: normal; }
.sp-host-schicht[data-ort="hand"] .sp-host-wo { flex: none; flex-wrap: wrap; row-gap: .4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-griffe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqmin; margin: 0; }
.sp-host-schicht[data-ort="hand"] .sp-host-zeile[data-phase="frage"] .sp-host-griffe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-host-schicht[data-ort="hand"] .sp-host-zeile[data-phase="frage"] .sp-host-wo { display: none; }
.sp-host-schicht[data-ort="hand"] .sp-host-griff {
  height: 14.6cqmin; min-height: 0; flex-direction: column; gap: .8cqmin; padding: 1cqmin .8cqmin;
  border-radius: 3.2cqmin; font-size: 3.3cqmin; white-space: normal; text-align: center; line-height: 1.1;
}
.sp-host-schicht[data-ort="hand"] .sp-host-griff::before { height: 100%; }
.sp-host-schicht[data-ort="hand"] .sp-host-z { width: 5.4cqmin; height: 5.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-ja { font-size: 3cqmin; padding: .2cqmin 2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-griff.fragt .sp-host-wort { font-size: 2.9cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-blatt {
  left: 2.6cqmin; right: 2.6cqmin; width: auto; top: calc(var(--sp-host-unten, 60cqmin) + 2cqmin);
  max-height: calc(100% - var(--sp-host-unten, 60cqmin) - 6cqmin); padding: 4cqmin; gap: 3cqmin; border-radius: 5cqmin;
}
.sp-host-schicht[data-ort="hand"] .sp-host-bkopf b { font-size: 5.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-bkopf em, .sp-host-schicht[data-ort="hand"] .sp-host-fuss { font-size: 3.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-leute { grid-template-columns: 1fr !important; }
.sp-host-schicht[data-ort="hand"] .sp-host-person { min-height: 13cqmin; padding: 1.4cqmin 2cqmin; border-radius: 3.4cqmin; gap: 2.6cqmin; grid-template-columns: auto minmax(0, 1fr); }
.sp-host-schicht[data-ort="hand"] .sp-host-aktionen { grid-column: 1 / -1; justify-content: stretch; }
.sp-host-schicht[data-ort="hand"] .sp-host-aktionen .sp-host-mini { flex: 1 1 0; justify-content: center; }
.sp-host-schicht[data-ort="hand"] .sp-host-mini .lang { display: inline; }
.sp-host-schicht[data-ort="hand"] .sp-host-mini .kurz { display: none; }
.sp-host-schicht[data-ort="hand"] .sp-host-av { width: 9cqmin; height: 9cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-name b { font-size: 4.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-name em { font-size: 3.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-mini { min-height: 12.4cqmin; font-size: 3.4cqmin; border-radius: 3cqmin; padding: 0 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-mini i { width: 3.8cqmin; height: 3.8cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-sets { grid-template-columns: 1fr 1fr; gap: 2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-setk { min-height: 14cqmin; padding: 2.4cqmin 3cqmin; border-radius: 3.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-setk b { font-size: 4.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-setk em { font-size: 3.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-kz { grid-template-columns: 1fr; gap: 1.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-kz > span { font-size: 3.8cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-kz > span em { font-size: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-opt { min-height: 12.4cqmin; font-size: 3.8cqmin; border-radius: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-konfig { gap: 3cqmin; }

/* ---- Das Blatt unter der Zeile (außerhalb der Frage) ------------------------ */
.sp-host-blattplatz { position: absolute; inset: 0; pointer-events: none; }
.sp-host-blatt {
  position: absolute; right: 2.4cqmin; top: calc(var(--sp-host-kopf, 10cqmin) + 1.2cqmin);
  width: min(max(300px, 62cqmin), calc(100% - 4.8cqmin));
  max-height: calc(100% - var(--sp-host-kopf, 10cqmin) - var(--sp-host-leiste, 0px) - 2.6cqmin);
  overflow: auto; overscroll-behavior: contain; pointer-events: auto;
  display: grid; gap: 1.4cqmin; align-content: start; padding: 2cqmin 2.4cqmin 2.4cqmin;
  background: var(--g2); border-radius: 2.6cqmin; box-shadow: 0 1.6cqmin 6cqmin rgba(0, 0, 0, .55);
  transform-origin: 88% 0;
}
/* Viele am Tisch: das Blatt wird breiter, die Leute stehen in Spalten (kein Rollen). */
.sp-host-blatt[data-spalten="2"] { width: min(calc(100% - 4.8cqmin), 128cqmin); }
.sp-host-blatt[data-spalten="3"] { width: calc(100% - 4.8cqmin); }
.sp-host-bkopf { display: flex; align-items: baseline; gap: 1.4cqmin; flex-wrap: wrap; }
.sp-host-bkopf b { font-family: var(--f-display); font-size: max(13px, 3cqmin); font-weight: 800; }
.sp-host-bkopf em { font-style: normal; font-size: max(10px, 1.9cqmin); color: var(--t1); font-weight: 600; }
.sp-host-fuss { margin: 0; font-size: max(10px, 1.9cqmin); color: var(--t1); line-height: 1.35; }

/* Spieler: Figur, Name, Stand, und was der Host mit ihm tun kann. */
.sp-host-leute { display: grid; gap: .8cqmin; }
.sp-host-blatt[data-spalten="2"] .sp-host-leute { grid-template-columns: 1fr 1fr; column-gap: 1.2cqmin; }
.sp-host-blatt[data-spalten="3"] .sp-host-leute { grid-template-columns: 1fr 1fr 1fr; column-gap: 1cqmin; }
.sp-host-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.4cqmin;
  min-height: 48px; padding: .6cqmin 1cqmin .6cqmin .8cqmin; border-radius: 1.8cqmin;
  background: color-mix(in srgb, var(--t0) 6%, var(--g2)); transition: opacity var(--d-mittel) var(--k-ein); }
.sp-host-person.raus .sp-host-av { opacity: .55; }
.sp-host-av { width: max(30px, 5.4cqmin); height: max(30px, 5.4cqmin); display: grid; }
.sp-host-name { display: grid; min-width: 0; }
/* Der Name bleibt eine Zeile mit Ellipse (.qn-name) — nie ein Bruch mitten im Wort (Viele Spieler, §5d). */
.sp-host-name b { font-size: max(11px, 2.3cqmin); font-weight: 700; display: inline-flex; align-items: center; gap: .5cqmin; min-width: 0; max-width: 100%; }
.sp-host-name b i { flex: none; }
.sp-host-name b i { font-style: normal; font-weight: 600; color: var(--t1); }
.sp-host-name .sp-host-kl { display: inline-grid; width: 1em; height: 1em; color: var(--t0); flex: none; }
.sp-host-name .sp-host-kl svg { width: 100%; height: 100%; }
.sp-host-name em { font-style: normal; font-size: max(10px, 1.8cqmin); color: var(--t1); font-weight: 600; }
.sp-host-aktionen { display: flex; gap: .7cqmin; flex-wrap: wrap; justify-content: flex-end; }
.sp-host-mini {
  position: relative; display: inline-flex; align-items: center; gap: .6cqmin; min-height: max(36px, 6cqmin); min-width: 48px;
  padding: 0 max(9px, 1.5cqmin); border: 0; border-radius: max(9px, 1.6cqmin);
  background: color-mix(in srgb, var(--t0) 10%, var(--g2)); color: var(--t0);
  font: 700 max(10px, 1.9cqmin)/1.1 var(--f-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-kurz) var(--k-ein);
}
.sp-host-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.sp-host-mini:active { transform: scale(.96); }
.sp-host-mini i { display: inline-grid; width: max(12px, 2cqmin); height: max(12px, 2cqmin); flex: none; }
.sp-host-mini i svg { width: 100%; height: 100%; }
.sp-host-mini .kurz { display: none; }
.sp-host-blatt:not([data-spalten="1"]) .sp-host-mini .lang { display: none; }
.sp-host-blatt:not([data-spalten="1"]) .sp-host-mini .kurz { display: inline; }
.sp-host-mini.fragt b { margin-left: .4cqmin; padding: .2cqmin 1cqmin; border-radius: 10cqmin; background: var(--t0); color: var(--g0); }
.sp-host-mini:focus-visible, .sp-host-opt:focus-visible, .sp-host-setk:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: 2px; }

/* Set */
.sp-host-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqmin; }
.sp-host-setk { display: grid; gap: .3cqmin; align-content: center; min-height: 48px; padding: 1.2cqmin 1.4cqmin; border: 0; border-radius: 1.8cqmin;
  background: color-mix(in srgb, var(--t0) 8%, var(--g2)); color: var(--t0); text-align: left; cursor: pointer;
  transition: transform var(--d-kurz) var(--k-ein); }
.sp-host-setk:active { transform: scale(.97); }
.sp-host-setk b { font-size: max(11px, 2.3cqmin); font-weight: 800; }
.sp-host-setk em { font-style: normal; font-size: max(10px, 1.8cqmin); color: var(--t1); font-weight: 600; }
.sp-host-setk.gewaehlt { background: color-mix(in srgb, var(--acc) 34%, var(--g2)); box-shadow: inset 0 0 0 max(1.5px, .25cqmin) var(--acc); }
.sp-host-setk.aus { opacity: .5; cursor: default; }

/* Der Abend (Konfigurator) */
.sp-host-konfig { display: grid; gap: 1.2cqmin; }
.sp-host-kz { display: grid; grid-template-columns: max(64px, 13cqmin) minmax(0, 1fr); align-items: center; gap: 1.2cqmin; }
.sp-host-kz > span { font-size: max(11px, 2.1cqmin); font-weight: 700; color: var(--t0); display: grid; }
.sp-host-kz > span em { font-style: normal; font-size: max(9px, 1.6cqmin); color: var(--t1); font-weight: 600; }
.sp-host-wahl { display: flex; gap: .7cqmin; }
.sp-host-opt { position: relative; flex: 1 1 0; min-width: 0; min-height: max(38px, 6.4cqmin); border: 0; border-radius: 1.6cqmin;
  background: color-mix(in srgb, var(--t0) 9%, var(--g2)); color: var(--t0);
  font: 700 max(10px, 2cqmin)/1.1 var(--f-body); cursor: pointer; transition: transform var(--d-kurz) var(--k-ein); }
.sp-host-opt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.sp-host-opt:active { transform: scale(.96); }
.sp-host-opt.an { background: color-mix(in srgb, var(--acc) 72%, #000); color: #fff; }
.sp-host-opt[disabled] { opacity: .4; cursor: default; }
.sp-host-fertig { display: flex; justify-content: flex-end; gap: 1cqmin; }

/* ---- Meldungen im Kopf: EINE Stelle, eine löst die andere ab ------------- */
.sp-host-meldungen {
  position: absolute; z-index: 4; left: 50%; top: 1.4cqmin; transform: translateX(-50%);
  display: grid; justify-items: center; width: max-content; max-width: 72%; pointer-events: none;
}
.sp-host-meldungen > * { grid-area: 1 / 1; }
.sp-host-box.zeile-auf .sp-host-meldungen { left: 2.6cqmin; transform: none; justify-items: start; max-width: 44%; top: calc(var(--sp-host-kopf, 10cqmin) + 1.2cqmin); }
.sp-host-meldung {
  display: inline-flex; align-items: center; gap: 1cqmin; padding: max(6px, 1cqmin) max(12px, 2.4cqmin);
  border-radius: 10cqmin; background: var(--g3); color: var(--t0);
  box-shadow: 0 1cqmin 3.4cqmin rgba(0, 0, 0, .45), inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 14%, transparent);
  font-size: max(11px, 2.3cqmin); font-weight: 700; line-height: 1.2; text-align: left;
  opacity: 0; transform: translateY(-1.4cqmin) scale(.98);
  transition: transform var(--d-mittel) var(--k-ein), opacity var(--d-mittel) var(--k-ein);
}
.sp-host-meldung.da { opacity: 1; transform: none; }
.sp-host-meldung i { display: inline-grid; width: max(13px, 2.4cqmin); height: max(13px, 2.4cqmin); flex: none; }
.sp-host-meldung i svg { width: 100%; height: 100%; }
.sp-host-meldung.krone i { color: var(--acc); }
.sp-host-meldung.jetzt { box-shadow: 0 1cqmin 3.4cqmin rgba(0, 0, 0, .45), inset 0 0 0 max(1.5px, .22cqmin) var(--jetzt); }
.sp-host-meldung.jetzt i { color: var(--jetzt); }
.sp-host-meldung.warn { box-shadow: 0 1cqmin 3.4cqmin rgba(0, 0, 0, .45), inset 0 0 0 max(1.5px, .22cqmin) var(--warn); }
.sp-host-meldung.warn i { color: var(--warn); }
.sp-host-meldung.zuschauer i { color: var(--t1); }
.sp-host-schicht[data-ort="hand"] .sp-host-meldungen { top: 3cqmin; max-width: 90%; }
.sp-host-schicht[data-ort="hand"] .sp-host-box.zeile-auf .sp-host-meldungen { top: calc(var(--sp-host-unten, 40cqmin) + 2cqmin); max-width: 90%; }
/* Steht am Handy das Blatt unter der Zeile, gehen die Meldungen nach unten (nicht über das Blatt). */
.sp-host-schicht[data-ort="hand"] .sp-host-box.blatt-auf .sp-host-meldungen { top: auto; bottom: 6cqmin; left: 50%; transform: translateX(-50%); justify-items: center; }
.sp-host-schicht[data-ort="hand"] .sp-host-meldung { font-size: 3.6cqmin; padding: 1.8cqmin 3.6cqmin; }

/* ---- Der Hinweis an der Krone (einmal, in der Lobby) ------------------------ */
.sp-host-tipp {
  position: absolute; z-index: 4; display: grid; gap: .3cqmin; padding: 1.2cqmin 2cqmin; border-radius: 1.8cqmin;
  background: var(--g3); color: var(--t0); pointer-events: none; max-width: 40cqmin;
  box-shadow: 0 1cqmin 3.4cqmin rgba(0, 0, 0, .45), inset 0 0 0 max(1.5px, .22cqmin) var(--acc);
  opacity: 0; transform: translateY(-1cqmin); transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-ein);
}
.sp-host-tipp::before { content: ""; position: absolute; top: -.9cqmin; right: 2.4cqmin; width: 1.8cqmin; height: 1.8cqmin; background: var(--acc); transform: rotate(45deg); border-radius: .3cqmin; }
.sp-host-tipp.da { opacity: 1; transform: none; }
/* links neben der Krone (steuerung.js tippZeigen: flacher Schirm oder ein Ticket darunter), in einer Zeile auf ihrer Mitte: der Pfeil zeigt nach
   rechts zu ihr */
.sp-host-tipp[data-flach] { grid-auto-flow: column; align-items: baseline; column-gap: 1.2cqmin; max-width: none; white-space: nowrap; }
.sp-host-tipp[data-flach]::before { top: 50%; right: -.9cqmin; margin-top: -.9cqmin; }
.sp-host-tipp b { font-size: max(11px, 2.2cqmin); font-weight: 800; }
.sp-host-tipp span { font-size: max(10px, 1.9cqmin); font-weight: 600; color: var(--t1); }
.sp-host-schicht[data-ort="hand"] .sp-host-tipp { max-width: 70cqmin; padding: 2.4cqmin 3.6cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tipp b { font-size: 4.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tipp span { font-size: 3.4cqmin; }

/* =====================================================================
   DAS HOST-MENÜ, NEU (steuerung.js „DAS HOST-MENÜ, NEU"; ?menue=alt: bisher)
   Die Zeile trägt höchstens zwei Griffe und „Menü"; das Menü ist EIN Blatt
   mit festen Reitern (Abend · Spieler · Fernseher). Dieselben Regeln wie
   oben: nur Rollenfarben, Trefferflächen ab 48 px, Schrift ab 9 px auf S.
   ===================================================================== */
.sp-host-menue { gap: max(8px, 1.4cqmin); padding: max(8px, 1.4cqmin) max(10px, 1.8cqmin) max(10px, 1.8cqmin); }
.sp-host-reiter { display: flex; gap: max(3px, .5cqmin); padding: max(3px, .5cqmin); border-radius: max(11px, 2.2cqmin);
  background: color-mix(in srgb, var(--g0) 60%, var(--g2)); }
.sp-host-rt {
  position: relative; flex: 1 1 0; min-width: 0; min-height: max(36px, 6cqmin);
  display: inline-flex; align-items: center; justify-content: center; gap: max(5px, .9cqmin);
  padding: 0 max(6px, 1cqmin); border: 0; border-radius: max(8px, 1.7cqmin); background: transparent; color: var(--t1);
  font: 700 max(11px, 2.1cqmin)/1.1 var(--f-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-kurz) var(--k-ein);
}
.sp-host-rt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.sp-host-rt:active { transform: scale(.97); }
.sp-host-rt i { display: inline-grid; width: max(13px, 2.4cqmin); height: max(13px, 2.4cqmin); flex: none; }
.sp-host-rt i svg { width: 100%; height: 100%; }
.sp-host-rt em { font-style: normal; display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 99px;
  background: color-mix(in srgb, var(--t0) 14%, transparent); font-size: max(9px, 1.7cqmin); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-host-rt.an { background: color-mix(in srgb, var(--t0) 15%, var(--g2)); color: var(--t0);
  box-shadow: inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 26%, transparent); }
.sp-host-rt:focus-visible, .sp-host-schalter:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: 2px; }
.sp-host-mkoerper { display: grid; gap: max(8px, 1.3cqmin); align-content: start; min-width: 0; }

/* Steht das Menü offen, ruht die schwebende Meldung: Am eigenen Schirm steht sie in der Host-Zeile
   (.sp-host-lage.note), am Handy IM Menü (unten, .sp-host-mnote) — nie über einer Zeile. */
.sp-host-lage.note { text-overflow: ellipsis; color: var(--t0); }
.sp-host-lage.note .sp-host-lz { display: inline-grid; width: 1.1em; height: 1.1em; margin-right: .45em; vertical-align: -.16em; color: var(--jetzt); }
.sp-host-lage.note .sp-host-lz svg { width: 100%; height: 100%; }
html.sp-host-neu .sp-host-box.blatt-auf .sp-host-steuer.auf ~ .sp-host-meldungen .sp-host-meldung:not(.bleibt) { visibility: hidden; }
.sp-host-mnote { position: sticky; bottom: 0; display: flex; align-items: center; gap: max(6px, 1cqmin); padding: max(7px, 1.1cqmin) max(10px, 1.8cqmin);
  border-radius: max(9px, 1.6cqmin); background: var(--g3); color: var(--t0); font-size: max(11px, 2.1cqmin); font-weight: 700; line-height: 1.2;
  box-shadow: inset 0 0 0 max(1.5px, .22cqmin) var(--jetzt); }
.sp-host-mnote i { display: inline-grid; width: max(13px, 2.4cqmin); height: max(13px, 2.4cqmin); flex: none; color: var(--jetzt); }
.sp-host-mnote i svg { width: 100%; height: 100%; }
.sp-host-mnote.warn { box-shadow: inset 0 0 0 max(1.5px, .22cqmin) var(--warn); }
.sp-host-mnote.warn i { color: var(--warn); }
.sp-host-mnote.krone i { color: var(--acc); }
.sp-host-mnote.zuschauer i { color: var(--t1); }
.sp-host-mnote.zuschauer, .sp-host-mnote.krone { box-shadow: inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 22%, transparent); }
.sp-host-schicht[data-ort="hand"] .sp-host-mnote { padding: 2.4cqmin 3.4cqmin; border-radius: 3.4cqmin; font-size: 3.6cqmin; gap: 2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-mnote i { width: 4.4cqmin; height: 4.4cqmin; }
/* In der Zeile: „Menü" steht leiser als die Griffe des Augenblicks — und rechts außen, immer an derselben Stelle. */
html.sp-host-neu .sp-host-griff[data-tu="menue"] { background: transparent; box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 30%, transparent); }
html.sp-host-neu .sp-host-griff[data-tu="menue"].gewaehlt { background: color-mix(in srgb, var(--t0) 18%, var(--g1)); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 70%, transparent); }

/* Reiter „Abend" in der Lobby: jede Stellschraube mit ihrem Satz. */
.sp-host-menue .sp-host-kz { grid-template-columns: max(84px, 17cqmin) minmax(0, 1fr); }
.sp-host-menue .sp-host-kz > span em { line-height: 1.2; margin-top: max(1px, .2cqmin); }
.sp-host-menue .sp-host-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(4px, .7cqmin); }
.sp-host-menue .sp-host-setk { min-height: max(38px, 6.4cqmin); padding: 0 max(8px, 1.4cqmin); border-radius: 1.6cqmin; text-align: center; }
.sp-host-menue .sp-host-setk b { font-size: max(10px, 2cqmin); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-host-menue .sp-host-setk.gewaehlt { background: color-mix(in srgb, var(--acc) 72%, #000); box-shadow: none; color: #fff; }
.sp-host-menue .sp-host-setk { position: relative; }
.sp-host-menue .sp-host-setk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
/* Die Zeile „Fragen" (die Stufe des Abends, stufe.js): ihr Satz wechselt mit der Wahl — bricht er um,
   dann in zwei gleich lange Zeilen („einer von vier / weiß es"), nie mit einem einzelnen Wort unten. */
.sp-host-menue .sp-host-kz[data-zeile="stufe"] > span em { text-wrap: balance; }

/* NIEDRIG UND BREIT (S, 628 × 390): Untereinander passen die Zeilen des Abends nicht in den Schirm — mit
   der Zeile „Fragen" fehlten 62 px, ohne sie schon 19 („Fertig" lag unter dem Rand, das Menü rollte).
   Der flache Schirm hat dafür die Breite: Das Menü nimmt sie und stellt DIESELBEN Zeilen in zwei Spalten,
   Reihe für Reihe auf gleicher Höhe — links das Set (seine drei Reihen), rechts drei Stellschrauben;
   in der vierten Reihe links „Runden" (wenn es „Fragen" gibt, sonst steht „Runden" rechts oben) und
   rechts „Zurücksetzen · Fertig". Schrift und Trefferflächen bleiben, wie sie sind; nichts rollt.
   (Die Reihenfolge im Dokument bleibt: Set · Runden · Fragen · Tempo · Party · Fertig.) */
@container (max-height: 480px) and (min-width: 600px) {
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-karte="abend"][data-phase="lobby"] { width: calc(100% - 4.8cqmin); }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-mkoerper:has(> .sp-host-konfig) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: max(14px, 2.6cqmin); row-gap: max(4px, .7cqmin); align-items: center;
  }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-konfig { display: contents; }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-kz { grid-column: 2; }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-kz:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-konfig.mit-stufe > .sp-host-kz:nth-child(2) { grid-column: 1; grid-row: 4; }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue[data-phase="lobby"] .sp-host-fertig { grid-column: 2; grid-row: 4; }
}

/* Reiter „Abend" im Spiel: was gilt — und die seltenen Griffe, jeder mit seinem Satz. */
.sp-host-stand { display: grid; gap: max(2px, .4cqmin); padding: max(7px, 1.2cqmin) max(10px, 1.8cqmin); border-radius: max(10px, 1.8cqmin);
  box-shadow: inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 16%, transparent); }
.sp-host-stand > b { font-size: max(9px, 1.5cqmin); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t1); }
.sp-host-stand > b i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; }
.sp-host-stand > span { font-size: max(11px, 2.1cqmin); font-weight: 700; color: var(--t0); line-height: 1.35; }
.sp-host-stand > span span { white-space: nowrap; }
.sp-host-stand > span i { font-style: normal; color: var(--t1); }
.sp-host-taten { display: grid; grid-template-columns: 1fr 1fr; gap: max(4px, .7cqmin); }
.sp-host-taten > * { grid-column: 1 / -1; }
/* Niedrig (S, 628 × 390): Die zwei harmlosen Griffe stehen nebeneinander, ohne ihren Satz — nichts rollt. */
@container (max-height: 460px) {
  .sp-host-schicht[data-ort="wand"] .sp-host-taten > .sp-host-tat:not(.gefahr):not(:only-child) { grid-column: auto; }
  .sp-host-schicht[data-ort="wand"] .sp-host-taten > .sp-host-tat:not(.gefahr):not(.fragt) em { display: none; }
  .sp-host-schicht[data-ort="wand"] .sp-host-taten > .sp-host-tat:not(.gefahr):nth-last-child(2):first-child { grid-column: 1 / -1; }
  .sp-host-schicht[data-ort="wand"] .sp-host-menue { gap: max(6px, 1cqmin); padding-top: max(6px, 1cqmin); padding-bottom: max(6px, 1cqmin); }
  /* Die Fußzeile der Probe („In der Probe spielst nur du …") ließe das Blatt rollen. */
  .sp-host-schicht[data-ort="wand"] .sp-host-menue .sp-host-fuss { display: none; }
}
.sp-host-tat { width: 100%; min-height: 48px; justify-content: flex-start; gap: max(8px, 1.4cqmin); padding: max(5px, .8cqmin) max(10px, 1.8cqmin); text-align: left; }
.sp-host-tat > i { width: max(16px, 2.8cqmin); height: max(16px, 2.8cqmin); }
.sp-host-tatw { display: grid; gap: max(1px, .2cqmin); min-width: 0; flex: 1 1 auto; }
.sp-host-tatn { font-size: max(11px, 2.2cqmin); font-weight: 700; color: var(--t0); min-width: 0; }
.sp-host-tat .sp-host-frist { left: 6%; right: 6%; }
.sp-host-tatw em { font-style: normal; font-size: max(10px, 1.75cqmin); font-weight: 600; color: var(--t1); line-height: 1.25; }
.sp-host-tat.gefahr { box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--warn) 70%, transparent); }
.sp-host-tat.gefahr > i { color: var(--warn); }
.sp-host-tat.fragt { box-shadow: inset 0 0 0 max(2px, .3cqmin) var(--warn); }
/* Drei Klassen: schlägt `.sp-host-mini.fragt b` (das „Ja" der Spielerliste, Maße ohne Untergrenze). */
.sp-host-mini.sp-host-tat .sp-host-tatja { flex: none; margin-left: 0; padding: max(2px, .3cqmin) max(9px, 1.5cqmin); border-radius: 99px;
  background: var(--t0); color: var(--g0); font-size: max(10px, 1.9cqmin); font-weight: 800; }
.sp-host-menue .sp-host-setk[disabled], .sp-host-menue .sp-host-mini[disabled] { opacity: .42; cursor: default; }

/* Reiter „Fernseher": ein Schalter. */
.sp-host-tvz { display: flex; align-items: center; gap: max(10px, 1.8cqmin); min-height: 48px; padding: max(6px, 1cqmin) max(10px, 1.8cqmin);
  border-radius: max(10px, 1.8cqmin); background: color-mix(in srgb, var(--t0) 6%, var(--g2)); }
.sp-host-schalter { --sw: max(24px, 3.8cqmin); position: relative; flex: none; width: calc(var(--sw) * 1.8); height: var(--sw); padding: 0; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--t0) 18%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-host-schalter::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%); }
.sp-host-schalter > i { position: absolute; left: 3px; top: 3px; width: calc(var(--sw) - 6px); height: calc(var(--sw) - 6px); border-radius: 50%;
  background: var(--sp-sch-knopf, var(--t1)); transform: translateX(var(--sp-sch-x, 0px)); transition: transform var(--d-mittel) var(--k-schnapp); }
/* LEISTUNG (2026-10-07): Weg und Farbe des Knopfs als Eigenschaften des Schalters statt „.an > i“ (siehe qn.css, .qh-schalter). */
.sp-host-schalter.an { background: color-mix(in srgb, var(--ok) 55%, transparent); --sp-sch-x: calc(var(--sw) * .8); --sp-sch-knopf: #fff; }

/* Am Handy: dieselben Teile in den Maßen der Hand (390 breit: 1cqmin = 3,9 px). */
html.sp-host-neu .sp-host-schicht[data-ort="hand"] .sp-host-griffe,
html.sp-host-neu .sp-host-schicht[data-ort="hand"] .sp-host-zeile[data-phase="frage"] .sp-host-griffe {
  grid-template-columns: repeat(var(--sp-host-n, 3), minmax(0, 1fr)); }
.sp-host-schicht[data-ort="hand"] .sp-host-menue { padding: 3cqmin; gap: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-reiter { padding: 1cqmin; gap: 1cqmin; border-radius: 4.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-rt { min-height: 12.4cqmin; font-size: 3.5cqmin; border-radius: 3.4cqmin; gap: 1.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-rt i { width: 4.2cqmin; height: 4.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-rt em { font-size: 2.9cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-mkoerper { gap: 2.6cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue .sp-host-kz { grid-template-columns: 1fr; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue .sp-host-kz > span { display: flex; align-items: baseline; gap: 1.6cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue .sp-host-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue .sp-host-setk { min-height: 12.4cqmin; padding: 0 2cqmin; border-radius: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue .sp-host-setk b { font-size: 3.8cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-stand { padding: 2.6cqmin 3.4cqmin; border-radius: 3.4cqmin; gap: 1cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-stand > b { font-size: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-stand > span { font-size: 3.7cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-taten { gap: 1.8cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tat { min-height: 14.6cqmin; padding: 1.6cqmin 3.4cqmin; gap: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tat > i { width: 5.4cqmin; height: 5.4cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tatn { font-size: 4.1cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tatw em { font-size: 3.1cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-mini.sp-host-tat .sp-host-tatja { font-size: 3.4cqmin; padding: .8cqmin 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-tvz { min-height: 14.6cqmin; padding: 1.6cqmin 3.4cqmin; border-radius: 3.4cqmin; gap: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-schalter { --sw: 7.4cqmin; }
/* Viele am Tisch (ab fünf): eine Person je Zeile, ihre Knöpfe daneben und kurz — zehn passen, ohne zu rollen. */
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-leute { gap: .9cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-person {
  grid-template-columns: auto minmax(0, 1fr) auto; min-height: 12.4cqmin; padding: 0 1.2cqmin 0 2cqmin; gap: 2cqmin; border-radius: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-av { width: 8cqmin; height: 8cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-name b { font-size: 3.9cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-name em { font-size: 3cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-aktionen { grid-column: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 1.2cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-aktionen .sp-host-mini { flex: none; min-height: 10.4cqmin; padding: 0 2.6cqmin; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-mini:not(.fragt) .lang { display: none; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-mini:not(.fragt) .kurz { display: inline; }
.sp-host-schicht[data-ort="hand"] .sp-host-menue:not([data-spalten="1"]) .sp-host-fuss { display: none; }

/* ---- Die Fernseher-Leiste: kommt mit der Maus, geht nach dreieinhalb Sekunden Ruhe. ---- */
.sp-host-tvleiste {
  position: absolute; right: 2.4cqmin; bottom: 2.4cqmin; z-index: 4; display: flex; gap: max(4px, .8cqmin); padding: max(4px, .8cqmin);
  border-radius: max(12px, 2.4cqmin); background: color-mix(in srgb, var(--g0) 86%, transparent);
  box-shadow: 0 1cqmin 4cqmin rgba(0, 0, 0, .5), inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 14%, transparent);
  opacity: 0; transform: translateY(1.6cqmin); pointer-events: none;
  transition: transform var(--d-mittel) var(--k-ein), opacity var(--d-mittel) var(--k-ein);
}
.sp-host-tvleiste.wach { opacity: 1; transform: none; pointer-events: auto; }
.sp-host-tvk { position: relative; display: inline-flex; align-items: center; gap: max(6px, 1cqmin); min-height: max(40px, 5.6cqmin); padding: 0 max(12px, 2cqmin);
  border: 0; border-radius: max(9px, 1.8cqmin); background: color-mix(in srgb, var(--t0) 10%, var(--g1)); color: var(--t0);
  font: 700 max(12px, 2cqmin)/1.1 var(--f-body); white-space: nowrap; cursor: pointer; transition: transform var(--d-kurz) var(--k-ein); }
.sp-host-tvk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); }
.sp-host-tvk:active { transform: scale(.96); }
.sp-host-tvk i { display: inline-grid; width: max(15px, 2.6cqmin); height: max(15px, 2.6cqmin); flex: none; }
.sp-host-tvk i svg { width: 100%; height: 100%; }
.sp-host-tvk em { font-style: normal; font-weight: 700; color: var(--t1); min-width: 1.9em; text-align: left; }
.sp-host-tvk[aria-pressed="true"] em { color: var(--ok); }
.sp-host-tvk:focus-visible { outline: max(2px, .3cqmin) solid var(--t0); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sp-host-tvleiste, .sp-host-rt, .sp-host-schalter > i, .sp-host-tvk { transition: none; }
  .sp-host-tvleiste { transform: none; }
}

/* ---- Ruhige Bewegung: die Endzustände ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sp-host-zeile, .sp-host-krone, .sp-host-krone::after, .sp-host-griff,
  .sp-host-meldung, .sp-host-tipp, .sp-host-mini, .sp-host-opt, .sp-host-setk, .sp-host-person { transition: none; }
  .sp-host-zeile, .sp-host-meldung, .sp-host-tipp { transform: none; }
}