/* DubStage — im Aussehen des ZOCKÄÄÄN Party Club.
   ============================================================
   Übernommen sind Palette, Glasflächen, Knöpfe und der wandernde Hintergrund;
   eigen bleibt die Wellenform: grau das Original, blau die eigene Stimme --
   dort soll die Farbe sagen, WER spricht, nicht ob es gut war.

   WICHTIG: wellenform.js liest --accent, --hot, --good und --line direkt aus
   dem Wurzelelement. Diese vier Namen dürfen nicht verschwinden, sonst zeichnet
   die Kurve in Schwarz auf Schwarz. */

:root {
  /* Terminal-Palette: fast schwarz, phosphor-pink statt Neon-Regenbogen.
     Flach statt Glas -- ein Terminal hat keine Milchglas-Flaechen. */
  --bg: #050406;
  --bg-2: #0a080c;
  --panel: #0c0a10;
  --panel-2: #131019;
  --stroke: rgba(255, 90, 150, 0.22);
  --stroke-2: rgba(255, 90, 150, 0.4);
  --text: #f2e8ee;
  --muted: #8a8090;
  --pink: #ff2d78;
  --violet: #a855f7;
  --cyan: #22e6ff;
  --gold: #ffc83d;
  --green: #2be08a;
  --red: #ff4d5e;
  /* Fast eckig -- 3px statt 18px. Ein Terminal-Fenster rundet nicht ab. */
  --r: 3px;
  --shadow: 0 0 0 1px rgba(255, 45, 120, 0.08), 0 24px 60px rgba(0, 0, 0, 0.65);
  /* Monospace ist hier nicht der Akzent, sondern die Grundschrift -- genau
     das macht den Unterschied zwischen "hat ein Terminal-Detail" und
     "sieht aus wie ein Terminal". */
  --font: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Die Namen, unter denen DubStage seine Farben kennt -- auf die Palette
     oben gelegt. Gold bleibt der Akzent: es ist die Farbe der Originalkurve,
     und an der liest man beim Sprechen ab, ob man trifft. */
  --accent: var(--gold);
  --accent-ink: #2a1500;
  --hot: var(--pink);
  --good: var(--green);
  --line: var(--stroke);
  /* Eigene Palette fuer die Wellenform: grau das Original, blau die eigene
     Stimme. Bewusst ausserhalb der Signalfarben -- hier sagt die Farbe, wer
     spricht, nicht ob es gut war. */
  --welle-original: #7c7c8a;
  --welle-eigene: #3d8ef7;
  --welle-eigene-live: #7cc4ff;
  --ink: var(--text);
  --ink-dim: var(--muted);
  --bg-lift: rgba(255, 255, 255, 0.05);
  --bg-card: var(--panel);
  --radius: var(--r);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* .view setzt display:flex und schlägt damit die Regel des Browsers für
   [hidden]. Ohne das hier stünden alle Ansichten übereinander. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 15px/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
  overscroll-behavior: none;
}

/* Statt des wandernden Regenbogen-Nebels: eine einzelne, ruhige Gluehquelle
   oben -- wie ein Monitor, der irgendwo im Dunkeln steht -- plus feine
   Scanlines. Ein Terminal glueht an EINER Stelle, es badet nicht in Farbe. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(255, 45, 120, 0.16), transparent 60%),
    var(--bg);
}

/* Scanlines: ein sehr feines, sich wiederholendes Streifenmuster. Bewusst
   dezent -- bei voller Staerke ist Flimmern anstrengend, nicht stimmungsvoll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px,
    transparent 1px, transparent 3px
  );
}

/* Wer Bewegung nicht will, bekommt keine -- betrifft hier nur noch das
   Logo, der Hintergrund selbst steht schon still. */
@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.view {
  --vpad-x: 20px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 24px var(--vpad-x) 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: rein .45s cubic-bezier(.2, .8, .2, 1);
  /* Jede Ansicht ist ein eigenes Fenster: derselbe Rahmen wie jede Karte,
     nicht nur Inhalt auf dem nackten Hintergrund. Start und Anmeldung tragen
     ihr eigenes Fenster (.term-fenster) und schlagen das hier ab -- sonst
     staekt ein Rahmen im anderen. */
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
#view-join, #view-anmelden {
  border: 0; background: none; box-shadow: none;
}
@keyframes rein { from { opacity: 0; transform: scale(.955) translateY(14px); } }

/* Morph-Uebergang beim Ansichtswechsel (show() in app.js): die alte Ansicht
   wird an ihrer Bildschirmposition festgehalten (position: fixed, Masse aus
   getBoundingClientRect) und schrumpft/verblasst ueber der neuen, die
   darunter mit "rein" auftaucht. Fixed statt im Fluss, damit die neue
   Ansicht sofort ihren Platz bekommt und nichts springt -- und damit
   Renderfunktionen, die direkt nach show() Groessen messen, echte Werte
   sehen. pointer-events: none, sonst faengt die sterbende Kopie Klicks ab.
   Kein filter: blur -- das wuerde, wie transform, fixed positionierte
   Kinder (z.B. die Aktionsleiste der Vorfuehrung) fuer die Dauer der
   Animation an die Ansicht binden. */
.view.view-raus {
  position: fixed;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 60;
  animation: raus .32s cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes raus { to { opacity: 0; transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .view.view-raus { animation: none; display: none !important; }
}

/* Morph wie in PowerPoint (View Transitions API, show() in app.js): Elemente
   mit gleichem view-transition-name in alter und neuer Ansicht -- eigenes
   Profilbild, Logo, Spielerkarten -- gleiten von ihrer alten an ihre neue
   Stelle (Gruppe: Position/Groesse), ihr altes und neues Bild ueberblenden
   dabei. Der Rest der Seite (root) macht denselben Schrumpf-/Zoom-Wechsel
   wie der Rueckfall oben. Waehrend der Uebergang laeuft, ist die eigene
   Einblend-Animation der neuen Ansicht abgeschaltet (html.vt-aktiv), sonst
   wuerde das "neue" Foto in deren ersten, noch unsichtbaren Moment fallen. */
html.vt-aktiv .view { animation: none; }
::view-transition-old(root) { animation: vt-alt .32s cubic-bezier(.4, 0, .6, 1) forwards; }
::view-transition-new(root) { animation: vt-neu .45s cubic-bezier(.2, .8, .2, 1); }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes vt-alt { to { opacity: 0; transform: scale(1.03); } }
@keyframes vt-neu { from { opacity: 0; transform: scale(.955) translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* Der erste Balken jeder Ansicht wird zur Titelleiste: drei Punkte links,
   dieselbe Ueberschrift wie vorher, nur auf einem eigenen Streifen statt
   frei auf der Flaeche. Das ist derselbe Rahmen wie beim Start -- nur ohne
   eine zweite HTML-Vorlage je Ansicht, weil jede Seite sowieso schon mit
   genau diesem Balken anfaengt. */
.view > header.bar:first-child {
  position: relative;
  margin: -24px calc(var(--vpad-x) * -1) 18px;
  /* Rechts etwas mehr Luft als links: dort schwebt immer der runde
     Profil-Knopf (position: fixed, 40px breit) in der Ecke -- ohne die
     Reserve stiess der letzte Knopf oder ein Abzeichen mit ihm zusammen. */
  padding: 14px calc(var(--vpad-x) + 50px) 14px calc(var(--vpad-x) + 46px);
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke);
  border-radius: var(--r) var(--r) 0 0;
}
.view > header.bar:first-child::before {
  content: "";
  position: absolute;
  left: var(--vpad-x);
  /* Fester Abstand statt 50% der Gesamthoehe -- sobald der Balken auf
     schmalen Schirmen in mehrere Zeilen umbricht (flex-wrap), wuerde die
     Mitte sonst irgendwo zwischen den Zeilen landen statt an der ersten
     Zeile zu kleben, wo ein Fensterrahmen seine Punkte erwartet. */
  top: 23px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  box-shadow: 14px 0 0 var(--gold), 28px 0 0 var(--green);
}

/* ---------------------------------------------------------------- Bausteine */

/* Flach statt Glas -- jede Karte und jedes Feld tragen dieselbe feste Flaeche,
   ohne die Weichzeichnung dahinter. Ein Terminal hat keine Milchglas-Flaechen. */
.stage-card, .panel, .clip-frame, .klapp, .film-link, .roster-row,
.results li, .raum, .pack, .modus, .abschnitt, .probe, .zeile, .cbox {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}
.stage-card, .panel {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Knoepfe wie Terminal-Befehle: eckig, ein Rahmen statt Schatten, und ein
   Prompt-Zeichen davor statt eines Farbverlaufs -- ">" ist die Handschrift
   einer Kommandozeile, kein Gradient. Kein Hover-Lichtstreifen mehr: der
   gehoert zu Knoepfen, die wie Glas aussehen wollen. Diese hier nicht. */
.btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r);
  padding: 11px 18px 11px 14px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: inline-block;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn::before { content: "›"; color: var(--pink); margin-right: 8px; font-weight: 700; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--pink); }
.btn:active:not(:disabled) { background: var(--bg-2); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn-primary {
  background: var(--pink);
  color: #1a0510;
  border-color: var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 45, 120, .3), 0 0 24px rgba(255, 45, 120, .35);
}
.btn-primary::before { color: #1a0510; }
.btn-primary:hover:not(:disabled) { background: #ff487f; border-color: #ff487f; }
/* Gesperrt heisst hier wirklich farblos: der grosse Knopf soll erst dann
   leuchten, wenn er etwas kann. Blosse Transparenz liess die pinke Fuellung
   und den Schein weiterhin durchscheinen -- er sah aus wie bereit. */
.btn-primary:disabled {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--stroke);
  box-shadow: none;
  opacity: .55;
}
.btn-ghost { background: transparent; }
.btn-ghost::before { color: var(--muted); }
.btn-small { padding: 7px 12px 7px 10px; font-size: 13px; }
.btn-small::before { margin-right: 6px; }
.btn-block { width: 100%; }

/* Der Aufnahmeknopf ist der wichtigste der Seite und darf das zeigen. */
.btn-record {
  background: linear-gradient(135deg, var(--gold), #ff8a3d);
  border-color: transparent; color: #2a1500;
  box-shadow: 0 8px 26px rgba(255, 200, 61, .32);
  min-width: 150px;
}
.btn-record.recording {
  background: linear-gradient(135deg, var(--red), #d61f4a);
  color: var(--text);
  box-shadow: 0 8px 26px rgba(255, 77, 94, .4);
  animation: pochen 1.4s ease-in-out infinite;
}
@keyframes pochen { 50% { box-shadow: 0 8px 40px rgba(255, 77, 94, .75); } }

input[type=text], input[type=password], input:not([type]), .field input,
.pack-filter input, select {
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 13px 15px;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder { color: #6b6480; }
input:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 45, 120, .16); }
input[type=file] { font-size: 13px; color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--pink); }

code {
  font-family: var(--mono);
  background: rgba(0, 0, 0, .35);
  padding: 1px 6px; border-radius: var(--r); font-size: .9em;
}

.toast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 50; max-width: min(520px, 92vw);
  padding: 12px 18px; border-radius: var(--r); font-size: 14px; font-weight: 600;
  color: #1a0510;
  background: var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 45, 120, .3), 0 12px 40px rgba(0, 0, 0, .6);
}

.empty { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- Start */

/* Die Anmeldung bleibt eine schmale, mittige Karte -- anders als Start und
   Lobby hat sie nur ein Formular zu zeigen, kein Nebeneinander von Wegen. */
#view-anmelden .term-fenster {
  margin: max(5vh, 28px) auto 0;
  width: min(440px, 100%);
}
#view-anmelden .term-inhalt { padding: 30px 26px 26px; }

/* Ein Terminal schimmert nicht in Regenbogenfarben -- es gluecht in EINER.
   Phosphor-pink statt Farbverlauf, mit einem echten blinkenden Cursor-Block
   dahinter statt einer Animation ueber den Text selbst. */
.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.14;
  text-align: center;
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 45, 120, .55), 0 0 3px rgba(255, 45, 120, .8);
}
.wordmark span { color: inherit; }
.wordmark::after {
  content: "";
  display: inline-block;
  width: .5em; height: .95em;
  margin-left: .12em;
  background: var(--pink);
  box-shadow: 0 0 12px rgba(255, 45, 120, .7);
  animation: cursor-blink 1.1s steps(1) infinite;
  vertical-align: -.12em;
}
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.tagline {
  margin: 8px 0 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.field { display: block; margin-bottom: 14px; }
.field span {
  display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); margin-bottom: 7px;
}
.field em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .13em; font-weight: 800;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--stroke);
}

/* ---------------------------------------------------------------- Raumliste */

.lobby-liste-kopf {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px;
}
.lobby-liste-kopf h2 {
  margin: 0; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}

.raum-liste { display: flex; flex-direction: column; gap: 8px; }
.raum {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r);
  transition: transform .16s, border-color .16s;
}
.raum:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-2px); }
.raum:disabled { opacity: .45; cursor: default; }
.raum-code {
  font-family: var(--mono); font-weight: 800; letter-spacing: .08em;
  color: #04121a; background: var(--cyan);
  padding: 4px 9px; border-radius: var(--r); font-size: 14px;
}
.raum-mitte { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.raum-mitte span { font-size: 12px; color: var(--muted); }
.raum-mitte strong, .raum-mitte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raum-zahl { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- Lobby */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.bar h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
/* Klebt unten, fest statt durchscheinend: dieselbe Flaeche wie jede andere
   Karte, nur breiter als der Inhalt es braeuchte. */
.bar-bottom {
  position: sticky; bottom: 14px; z-index: 5;
  margin-top: 8px; padding: 12px 16px;
  justify-content: flex-end;
  border-radius: var(--r);
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.bar-bottom-spalte { flex-direction: column; align-items: stretch; }
.bar-bottom-reihe { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.bereit-status {
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 6px 10px; border-radius: var(--r);
}
.bereit-status.warten { color: var(--pink); background: rgba(255, 60, 172, .1); }
.bereit-status.gut { color: var(--green); background: rgba(70, 220, 140, .1); }

.room-code { font-size: 14px; color: var(--muted); }
.room-code strong {
  font-family: var(--mono); letter-spacing: .1em; font-size: 19px;
  color: var(--gold); margin-left: 4px;
}
.lobby-oeffentlich { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--stroke); }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .columns { grid-template-columns: 1fr; } }

.panel { padding: 18px; }
.panel h2 {
  margin: 0 0 11px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
/* Knöpfe, die direkt in einer Spalte stehen, brauchen ihren eigenen Abstand --
   die Elemente darüber (eine Liste, ein zugeklappter Bereich) bringen unten
   keinen mit, und dann klebten "Pack hinzufügen" und "Ordner neu einlesen"
   aufeinander. */
.panel > .btn { display: block; margin-top: 12px; }
/* Muss spezifisch genug sein, um `.panel h2` zu schlagen — sonst greift der
   Abstand bei Überschriften in einer Spalte nicht, und „Blind spielen" klebt
   an „Zusatzmodus". Dieselbe Falle wie schon einmal beim Ordner-Knopf. */
.abstand, .panel h2.abstand, .panel .toggle.abstand { margin-top: 20px; }

.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.players li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--r);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke);
  font-size: 14px;
}
.players li.gone { opacity: .4; }
.dot {
  width: 9px; height: 9px; border-radius: 99px; flex: none;
  background: rgba(255, 255, 255, .2);
}
.dot.on { background: var(--green); box-shadow: 0 0 10px rgba(43, 224, 138, .8); }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke); color: var(--muted);
}
.tag-you { background: var(--pink); color: #1a0510; border-color: transparent; }
.tag-gucker { background: rgba(34, 230, 255, .12); border-color: rgba(34, 230, 255, .35); color: var(--cyan); }

/* ---------------------------------------------------------------- Packs */

.pack-filter { display: flex; gap: 8px; margin-bottom: 10px; }
.pack-filter input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r); }
.pack-filter select { width: auto; padding: 10px 12px; border-radius: var(--r); }

.pack-list { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow-y: auto; }
.pack {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 8px 13px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.pack:hover:not(:disabled) { border-color: var(--pink); transform: translateY(-1px); }
.pack:disabled { cursor: default; }
.pack.chosen { border-color: var(--pink); background: rgba(255, 45, 120, .12); }
/* Dasselbe Standbild, das man ohnehin als erstes sieht, sobald man das Pack
   spielt -- kein eigens gepflegtes Cover, nur eins der Bilder markiert als
   "das hier zeigt, worum es geht". */
.pack-cover {
  width: 46px; height: 46px; flex: none;
  object-fit: cover; border-radius: var(--r); border: 1px solid var(--stroke);
  background: #000;
}
.pack-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pack-name { font-weight: 700; }
.pack-meta { font-size: 12px; color: var(--muted); }
.pack-meta b { color: var(--green); }

.pack-detail { border-top: 1px solid var(--stroke); padding-top: 12px; margin: 12px 0; }
.pack-sub { margin: 0 0 8px; font-size: 14px; }
.pack-chars { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.pack-chars b { color: #fff; }
.pack-hash { margin: 0; font-size: 11px; color: var(--muted); }
.pack-de { margin: 0 0 8px; font-size: 12px; color: var(--green); }
.pack-de.teils { color: var(--gold); }
.pack-de.fehlt { color: var(--muted); }

/* ---------------------------------------------------------------- Abschnitte */

.abschnitt-wahl { margin-top: 18px; }
.abschnitt-wahl h2 {
  margin: 0 0 9px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
.abschnitt-liste { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.abschnitt {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 9px 12px; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.abschnitt:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); }
.abschnitt:disabled { cursor: default; }
.abschnitt.chosen { border-color: var(--cyan); background: rgba(34, 230, 255, .1); }
/* Die Zeilenzahl ist die Angabe, nach der man wählt: sie sagt, wie lang der
   Abend wird. */
.abschnitt-zahl {
  flex: none; min-width: 36px; text-align: center; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .35);
  color: var(--gold); border-radius: var(--r); padding: 3px 0;
}
.abschnitt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.abschnitt-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abschnitt-text > span { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- Modi */

.modus-wahl { display: flex; flex-direction: column; gap: 8px; }
/* Der allererste Fork: DubStage oder Mimic Party, bevor irgendwas anderes zu
   sehen ist. Nebeneinander statt untereinander -- es sind nur zwei, und das
   ist die wichtigste Entscheidung des Abends, kein Listeneintrag. */
.modus-wahl-start {
  display: flex; gap: 14px; max-width: 720px; margin: 32px auto;
  padding: 0 16px; flex-wrap: wrap;
}
.modus-wahl-start .modus-start {
  flex: 1 1 260px; padding: 22px 20px; gap: 6px;
}
.modus-wahl-start .modus-start strong { font-size: 17px; }
.modus-wahl-start .modus-start span { font-size: 13px; line-height: 1.5; }
.modus {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.modus:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-1px); }
.modus:disabled { cursor: default; }
.modus.chosen { border-color: var(--violet); background: rgba(168, 85, 247, .14); }
.modus strong { font-weight: 700; }
.modus span { font-size: 12px; color: var(--muted); }

.toggle {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted);
  cursor: pointer;
}
.toggle input { accent-color: var(--pink); width: 16px; height: 16px; flex: none; }
.toggle em { color: var(--gold); font-style: normal; }

/* ---------------------------------------------------------------- Rollen */

.blurb { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }

.casting-boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.cbox {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 15px; cursor: pointer; border-radius: 99px;
  transition: transform .16s, border-color .16s;
}
.cbox:hover { transform: translateY(-1px); }
.cbox:has(input:checked) { border-color: var(--pink); background: rgba(255, 45, 120, .14); }
.cbox input { accent-color: var(--pink); }
.cbox-name { font-weight: 700; }
.cbox-zahl {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .24);
  padding: 1px 9px; border-radius: 99px;
}
.cbox-wer { font-size: 12px; color: var(--cyan); }

.roster { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.roster-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 15px; border-radius: var(--r); font-size: 14px;
}
.roster-row span { color: var(--muted); }
.roster-zahl { color: #fff !important; white-space: nowrap; font-weight: 700; }

/* ---------------------------------------------------------------- Clip */

.clip-frame {
  position: relative;
  margin: 0; padding: 18px;
  background: rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.screen-sprecher-bild { position: absolute; top: 14px; right: 14px; }
.clip-frame img, .clip-frame video {
  max-width: 100%; max-height: 44vh; border-radius: var(--r); display: block;
}
/* Ohne die Begrenzung schiebt ein hochformatiges Video die Zeile und den
   Sprechernamen unter den Bildrand -- 4:3-Quellen sind hier die Regel. */
.clip-frame.big img, .clip-frame.big video { max-height: 56vh; }
.clip-frame video { object-fit: contain; background: #000; }

/* Deutsch groß, Original klein darunter. Wer Englisch kann, will die Vorlage
   trotzdem sehen — man spricht ja auf die Lippen. */
.clip-line {
  display: flex; flex-direction: column; gap: 6px;
  text-align: center; max-width: 44ch; color: var(--text);
}
.zeile-de { font-size: calc(21px * var(--dub-textfaktor,1)); line-height: 1.4; font-weight: 600; }
.zeile-en { font-size: 13px; line-height: 1.4; color: var(--muted); font-style: italic; }

.progress-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge {
  padding: 5px 13px; border-radius: 99px; font-size: 13px; font-weight: 800;
  background: var(--gold); color: #2a1500;
}

.speaker-tag { text-align: center; color: var(--gold); font-weight: 800; }
.waiting { text-align: center; color: var(--muted); padding: 30px 0; font-size: 15px; }
.sync-anzeige {
  text-align: center; font-size: 11px; color: var(--muted);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Wellenform */

.wave-wrap {
  padding: 12px 14px 8px; border-radius: var(--r);
  background: rgba(0, 0, 0, .4); border: 1px solid var(--stroke);
}
.wave-legende {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
}
.wave-marke { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.wave-marke-original { background: var(--welle-original); }
.wave-marke-du { background: var(--welle-eigene); margin-left: 10px; }
/* Die Höhe muss hier stehen, nicht nur als Attribut am Element: wellenform.js
   setzt canvas.height auf Pixel mal Bildschirmdichte, und ohne CSS-Höhe wird
   genau das zur Layouthöhe — auf einem Retina-Schirm also das Doppelte. */
.wave { width: 100%; height: 150px; display: block; }
#probe-wave { height: 110px; }

/* Länge und Versatz sitzen rechts außen: die Länge schiebt sich mit
   margin-left:auto dorthin, der Versatz hängt sich direkt daneben. */
.wave-laenge { margin-left: auto; font-size: 12px; color: var(--muted); }
.wave-versatz {
  margin-left: auto; font-weight: 800; padding: 3px 11px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.wave-versatz.gut     { color: #052018; background: var(--good); }
.wave-versatz.daneben { color: #2a1500; background: var(--gold); }
.wave-versatz.unklar  { color: var(--muted); background: rgba(255, 255, 255, .06); font-weight: 600; }

/* ---------------------------------------------------------------- Aufnahme */

.rec-controls { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rec-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.klapp { width: min(440px, 100%); border-radius: var(--r); }
.klapp > summary {
  cursor: pointer; padding: 11px 15px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
  list-style: none;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::before { content: "▸ "; color: var(--pink); }
.klapp[open] > summary::before { content: "▾ "; }
.klapp-inhalt {
  display: flex; flex-direction: column; gap: 13px;
  padding: 4px 15px 15px; border-top: 1px solid var(--stroke);
}
.klapp-inhalt .field { margin-bottom: 0; }

.regler { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.regler b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }

.pegel {
  height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--stroke);
}
.pegel-balken {
  height: 100%; width: 0%;
  background: var(--green);
  transition: width .05s linear;
}
/* Rot heißt: es schlägt oben an und wird beim Aufnehmen verzerrt. */
.pegel-balken.zuviel { background: var(--red); }

.hinweis { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.hinweis.fehler { color: var(--red); }
.hinweis.gut { color: var(--green); }

/* ---------------------------------------------------------------- Hörproben */

.proben { width: min(560px, 100%); }
.proben h3, .meine-liste-wrap h3, .film-links h3 {
  margin: 0 0 9px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
.proben-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.probe {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  padding: 8px 14px; border-radius: 99px; color: var(--text);
  transition: transform .16s, border-color .16s;
}
.probe:hover { border-color: var(--cyan); transform: translateY(-1px); }
.probe.jetzt { border-color: var(--cyan); background: rgba(34, 230, 255, .12); }
.probe-figur { font-weight: 700; font-size: 14px; }
.probe-hinweis { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------- eigene Zeilenliste */

.meine-liste-wrap { width: min(640px, 100%); }
.meine-liste { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; }
.zeile {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 8px 12px; font: inherit; font-size: 13px; color: var(--muted);
  border-radius: var(--r);
}
.zeile:hover { border-color: var(--pink); }
.zeile.jetzt { border-color: var(--pink); background: rgba(255, 45, 120, .12); color: var(--text); }
.zeile.fertig .zeile-nr {
  background: rgba(43, 224, 138, .18); border-color: rgba(43, 224, 138, .4); color: var(--green);
}
.zeile-nr {
  flex: none; min-width: 28px; text-align: center; border-radius: var(--r);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stroke);
  font-size: 12px; font-weight: 700; padding: 2px 0; font-variant-numeric: tabular-nums;
}
.zeile-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-figur-kopf {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); margin: 10px 0 2px; padding-left: 2px;
}
.zeile-figur-kopf:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Film */

.film-bereich {
  display: flex; flex-direction: column; gap: 11px; align-items: center;
  width: min(600px, 100%); margin: 0 auto;
}
.fortschritt {
  width: 100%; height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--stroke);
}
.fortschritt-balken {
  height: 100%; width: 0%;
  background: var(--pink);
  transition: width .3s linear;
}

.film-links { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.film-zeile { display: flex; gap: 8px; align-items: stretch; }
.film-zeile .film-link { flex: 1; min-width: 0; }
.film-zeile .btn { white-space: nowrap; }
.film-link {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 9px 13px; border-radius: var(--r); color: var(--text);
  transition: border-color .16s;
}
.film-link:hover { border-color: var(--gold); }
.film-link span { font-size: 13px; font-weight: 600; }
.film-link code { font-size: 11px; color: var(--muted); background: none; padding: 0; }

/* ---------------------------------------------------------------- Abstimmung */

.vote-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vote { min-width: 140px; }
.vote.chosen {
  background: var(--pink); color: #1a0510;
  border-color: transparent; box-shadow: 0 8px 26px rgba(255, 45, 120, .4);
}
.vote.chosen::before { color: #1a0510; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.results li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 19px; border-radius: var(--r); font-size: 17px; font-weight: 600;
}
.results li:first-child {
  border-color: var(--gold);
  background: rgba(255, 200, 61, .1);
  box-shadow: 0 8px 30px rgba(255, 200, 61, .18);
}
.results strong { color: var(--gold); font-size: 24px; font-variant-numeric: tabular-nums; }

/* Wird auf Feldern benutzt, die außerhalb von .field stehen (Packsuche). */
.input {
  font: inherit; color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 10px 12px; outline: none; width: 100%;
}

/* ---------------------------------------------------------------- Drehbuch */

.drehbuch-leiste { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.drehbuch-leiste .input { width: auto; min-width: 220px; }

.drehbuch-liste { display: flex; flex-direction: column; gap: 8px; }

.db-zeile {
  display: flex; gap: 12px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r);
}
/* Die eigenen Zeilen heben sich ab -- in einer Liste von dreißig sucht man
   sonst jedes Mal, was einen selbst angeht. */
.db-zeile.meine { border-color: rgba(255, 45, 120, .45); background: rgba(255, 45, 120, .06); }

.db-bild {
  width: 108px; height: 68px; object-fit: cover; border-radius: var(--r); flex: none;
  background: #000;
}
.db-bild.leer { background: rgba(0, 0, 0, .4); border: 1px solid var(--stroke); }

.db-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.db-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-figur {
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .35);
  color: var(--gold);
}
.db-wer { font-size: 11.5px; color: var(--muted); }

/* Die Längenanzeige ist der Grund, warum das Schreiben funktioniert: sie sagt
   auf den Zeichen genau, was in die Cliplänge passt. */
.db-laenge {
  margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--muted); padding: 2px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
}
.db-laenge.gut    { color: var(--green); border-color: rgba(43, 224, 138, .4); background: rgba(43, 224, 138, .12); }
.db-laenge.knapp  { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.db-laenge.zuviel { color: var(--red);   border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

.db-feld {
  font: inherit; font-size: 14px; line-height: 1.4;
  color: var(--text); background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 8px 11px; width: 100%; resize: vertical; outline: none;
}
.db-feld:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 45, 120, .16); }
.db-feld::placeholder { color: #5c566e; font-style: italic; }

/* Die Vorlage bleibt sichtbar, aber klein: man spricht auf dieselben Lippen. */
.db-original {
  font-size: 11.5px; color: var(--muted); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 640px) {
  .db-bild { width: 76px; height: 48px; }

  /* Die Kopfzeile eines Raums traegt inzwischen viele Knoepfe (Verlassen,
     zwei Schalter, Raum schliessen/Pause, OBS-Link, Link kopieren). Mit
     space-between + flex-wrap zerfaellt das auf schmalen Schirmen in eine
     Reihe zufaellig hoher Zeilen -- eine klare Spalte liest sich besser
     und laesst sich mit dem Daumen treffen. */
  .view > header.bar:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* Der Abstandshalter (flex:1) sorgt nur in einer Reihe fuer Luft --
     in einer Spalte waere er eine leere Zeile. */
  .view > header.bar:first-child > span[style*="flex:1"],
  .view > header.bar:first-child > span[style*="flex: 1"] {
    display: none;
  }
  .lobby-oeffentlich { margin-left: 0; padding-left: 0; border-left: none; }
  .view > header.bar:first-child .room-code { text-align: center; }
}

/* Der Fußbalken der Schreibphase trägt vier Knöpfe. Damit er die letzte Zeile
   der Tabelle nicht verdeckt, bekommt diese Ansicht mehr Luft nach unten. */
#view-drehbuch { padding-bottom: 130px; }
/* Auf einem breiten Bildschirm stand die Aufnahme in einer schmalen Spalte
   mit viel Rand daneben. Hier arbeitet man -- Bild, Kurve und Zeilenliste
   duerfen den Platz haben. Die lesenden Ansichten (Beitreten, Lobby, Ergebnis)
   bleiben schmal: eine Textzeile ueber die ganze Breite liest sich schlecht. */
#view-recording, #view-screening, :is(#view-lobby,.studio-lobby), #view-join, :is(#view-casting,#casting) {
  /* Grosszuegig, aber nicht grenzenlos: auf einem sehr breiten Schirm wird
     sonst alles zu einem flachen Band gezogen. --vpad-x steuert hier zugleich
     die Innenpolsterung UND den Ausschlag der Titelleiste (siehe .view). */
  --vpad-x: max(20px, 2vw);
  max-width: 2400px;
}

/* ------------------------------------------------ Alles auf eine Seite
   Beim Sprechen sollen Knoepfe, Kurve und Bild gleichzeitig sichtbar sein.
   Reicht der Platz nicht, bleibt die Aufnahmeansicht scrollbar. Statt fester
   vh-Werte bekommt die Aufnahme deshalb die Bildschirmhoehe als Rahmen und teilt sie auf: Zeile,
   Kurve, Wertung und Knoepfe nehmen sich, was sie brauchen, und das Video
   bekommt den Rest. Es schrumpft mit, wenn der Text lang ist oder die Wertung
   dazukommt.

   Nur auf dem Rechner: ab 900 px Breite (darunter stapeln sich die Spalten,
   und dann ist Scrollen richtig) und ab 620 px Hoehe -- in einem flacheren
   Fenster waere das Bild sonst briefmarkengross. */
@media (min-width: 900px) and (min-height: 620px) {
  /* Die Spielerleiste zaehlt zur Fensterhoehe. Ihre Hoehe kann sich durch
     mehrere Spielerzeilen aendern und wird deshalb nicht fest abgezogen. */
  body:has(> #view-recording:not([hidden])) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }
  body:has(> #view-recording:not([hidden])) > .spieler-streifen { flex: none; }
  #view-recording {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding-bottom: 16px;
    justify-content: flex-start;
  }
  #view-recording > .bar, #view-recording > .waiting { flex: none; }
  #view-recording .rec-layout {
    /* height:0 zusammen mit flex-grow ist der Kniff: ohne das nimmt der
       Container seine Inhaltshoehe als Untergrenze und waechst ueber den
       Bildschirm hinaus, egal was man ihm deckelt. So bekommt er genau den
       Platz, der uebrig ist -- nicht mehr. */
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    /* Ohne feste Zeilenhoehe richtet sich das Raster nach seinem Inhalt, und
       der Inhalt richtet sich nach der Zeile -- ein Kreis, aus dem nichts
       schrumpft. minmax(0,1fr) bricht ihn auf. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  #view-recording .rec-haupt {
    height: 100%;
    min-height: 0;
    padding-bottom: 8px;
    /* Lange Zeilen, Wertung und Fehlerhinweise duerfen die letzten
       Schaltflaechen nicht abschneiden. Bei Platzmangel normal scrollen. */
    overflow-y: auto;
  }
  /* Die rechte Spalte darf die linke nicht in die Hoehe treiben: wird die
     Zeilenliste lang, scrollt sie in sich selbst. */
  #view-recording .rec-seite {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    position: static;
  }
  #view-recording .meine-liste { max-height: none; }
  /* Enger stapeln: 18 px Abstand viermal sind 72 px, und die fehlen genau
     dort, wo das Bild sie braucht. */
  #view-recording .rec-haupt { gap: 10px; }

  /* Der Bildrahmen gibt nach -- aber nur bis hierher. Ohne Untergrenze
     schrumpfte er bei einer langen Zeile auf 137x77 Pixel: die Seite passte,
     das Bild war aber nicht mehr zu gebrauchen. Wenn es eng wird, scrollt
     lieber der Text (der steht auch daneben in der Zeilenliste) als dass das
     Bild verschwindet -- man spricht schliesslich auf das Bild. */
  #view-recording .clip-frame {
    flex: 1 1 auto;
    min-height: clamp(170px, 27vh, 260px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #view-recording .clip-frame video,
  #view-recording .clip-frame img {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  /* Die Zeile darf nicht die halbe Seite fressen. Lange Zeilen werden
     kleiner gesetzt, statt das Bild wegzudruecken. */
  #view-recording .clip-line { flex: 0 0 auto; max-width: 70ch; }
  #view-recording .zeile-de {
    font-size: calc(clamp(15px, 1.9vh, 21px) * var(--dub-textfaktor,1));
    max-height: 14vh;
    overflow-y: auto;
  }
  #view-recording .zeile-en { font-size: clamp(11px, 1.2vh, 13px); }
  /* Kurve und Knoepfe geben ihre Hoehe nicht her, aber die Kurve darf
     flacher werden, wenn es eng wird. */
  #view-recording .wave-wrap, #view-recording #rec-score,
  #view-recording .rec-controls { flex: 0 0 auto; }
  #view-recording .wave { height: clamp(70px, 14vh, 150px); }
}

/* Auf niedrigen Bildschirmen teilen sich Vorschau und Wellenform weniger
   Hoehe; kompaktere Abstaende lassen Platz fuer Wertung und Download. */
@media (min-width: 900px) and (max-height: 900px) {
  #view-recording > header.bar:first-child { margin-bottom: 0; }
  #view-recording .clip-frame { min-height: clamp(170px, 24vh, 230px); }
  #view-recording .wave { height: clamp(70px, 9vh, 100px); }
  #view-recording .rec-controls { gap: 8px; }
  #view-recording .btn-gross { margin: 0; }
  #view-recording .score { padding: 9px 12px; margin: 0; }
  #view-recording .score-kopf { margin-bottom: 5px; }
  #view-recording .score-zeile { margin-top: 3px; }
  #view-recording .score-gesamt { font-size: 1.45em; }
  #view-recording .score-bahn { height: 6px; }
}

/* Der Rahmen legt sich jetzt ums Bild statt umgekehrt. Ihn auf die volle
   Breite zu ziehen half nichts: die schwarzen Balken links und rechts stecken
   im aufbereiteten Video selbst, die waeren einfach mitgewachsen. Also darf
   das Bild etwas groesser werden als vorher, der Kasten hoert dort auf, wo das
   Bild aufhoert -- und die gewonnene Breite geht an Kurve und Zeilenliste,
   wo mehr Platz auch mehr zeigt. */
#view-recording .clip-frame {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#view-recording .clip-frame video,
#view-recording .clip-frame img {
  max-height: 48vh;
  width: auto;
  /* "100%" allein reicht hier nicht: der Rahmen ist bewusst "fit-content"
     (siehe oben), und damit ist SEINE Breite selbst content-abhaengig --
     ein Prozentwert gegen eine content-abhaengige Bezugsbreite gilt laut
     Spezifikation als "none", also unbegrenzt. Ohne diesen zusaetzlichen
     Riegel in vw haengt sich das Video auf seine tatsaechliche Aufloesung
     (z. B. 640px) auf und sprengt auf dem Handy die Seite in die Breite --
     gemessen: 639px Inhalt in einem 390px-Fenster. */
  max-width: min(100%, calc(100vw - 48px));
}
/* Dieselbe Falle wie beim Video darueber, nur ueber die Bildunterschrift
   statt das Bild: "44ch" (Basisregel .clip-line) kann auf einem schmalen
   Schirm leicht breiter sein als der ganze verfuegbare Platz, und weil der
   Rahmen hier "fit-content" ist, wuerde die Bildunterschrift dann die
   Breite des ganzen Kastens diktieren, nicht das Video. */
#view-recording .clip-line { max-width: min(44ch, calc(100vw - 48px)); }

/* Eine Zahl von 0 bis 100 braucht keinen anderthalb Meter langen Balken. */
.score { max-width: 720px; }
/* Die rechte Spalte darf mitwachsen, aber nicht davonlaufen. */
@media (min-width: 1500px) {
  .rec-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* In der Lobby steht links die Aufnahmeart und rechts die Packliste. Rechts
   ist mehr los, also bekommt die Seite dort auch mehr Platz -- und die Liste
   selbst darf hoeher werden, statt fuenf Packs durch einen Sehschlitz zu
   zeigen, waehrend daneben die halbe Seite leer ist. */
@media (min-width: 1100px) {
  :is(#view-lobby,.studio-lobby) .columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; }
  :is(#view-lobby,.studio-lobby) .pack-list { max-height: 60vh; }
}
@media (min-width: 1600px) {
  :is(#view-lobby,.studio-lobby) .pack-list { max-height: 66vh; }
}
#view-drehbuch .bar-bottom { gap: 8px; }

/* ---------------------------------------------------------------- Rückkehr */

.rueckkehr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 4px; padding: 12px 14px; border-radius: var(--r);
  background: rgba(43, 224, 138, .1);
  border: 1px solid rgba(43, 224, 138, .4);
}
.rueckkehr > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.rueckkehr b { font-size: 14px; }
.rueckkehr span { font-size: 11.5px; color: var(--muted); }
.rueckkehr #rueckkehr-code { font-family: var(--mono); color: var(--gold); }

.unterstuetzen-banner {
  position: relative;
  margin: 20px 0 4px; padding: 14px 16px; border-radius: var(--r);
  background: rgba(255, 200, 61, .08);
  border: 1px solid rgba(255, 200, 61, .35);
}
.unterstuetzen-banner p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.unterstuetzen-banner strong { color: var(--gold); }
.unterstuetzen-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Pause */

.pause-schirm {
  position: fixed; inset: 0; z-index: 58;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(7, 5, 13, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pause-karte {
  width: min(420px, 100%); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.pause-karte h2 {
  margin: 0; font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -.01em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 200, 61, .5), 0 0 3px rgba(255, 200, 61, .75);
}
.pause-karte p { margin: 0; }
.pause-dauer { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- Stimmprobe */

.probe-leute { width: min(480px, 100%); margin: 0 auto; }
/* Wer gerade zu hören ist, hebt sich hervor -- sonst weiß man bei vier
   ähnlichen Stimmen nicht, wem man gerade zuhört. */
.probe-leute li.spricht {
  border-color: var(--gold);
  background: rgba(255, 200, 61, .12);
  box-shadow: 0 0 26px rgba(255, 200, 61, .2);
}

/* Das Urteil steht klein und beiläufig neben dem Namen. Es ist ein Nebenprodukt
   der Stimmprobe, keine Warnung — deshalb kein Ausrufezeichen und kein Rot,
   außer es ist wirklich nichts angekommen. */
.urteil {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  color: var(--muted); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke); white-space: nowrap;
}
.urteil.gut   { color: var(--green); border-color: rgba(43, 224, 138, .4); background: rgba(43, 224, 138, .12); }
.urteil.leise { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.laut  { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.still { color: var(--red);   border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

#view-stimmprobe .clip-frame img { max-height: 30vh; }

/* Auch hier trägt der Fußbalken zwei Knöpfe und würde sonst die Namensliste
   verdecken. */
#view-stimmprobe { padding-bottom: 120px; }

/* Die Bestätigungstaste der Aufnahme steht allein und trägt entsprechend auf.
   Der Abstand nach oben und unten ist Absicht: daneben soll nichts liegen,
   was man aus Versehen mittrifft. */
.btn-gross {
  padding: 16px 34px; font-size: 17px; border-radius: var(--r);
  margin: 6px 0 4px; min-width: 220px;
}

/* Blind-Modus: statt der Zeile ein Hinweis, damit die Fläche nicht leer wirkt
   und niemand denkt, das Pack habe keinen Text. */
.verdeckt {
  font-size: 15px; color: var(--muted); font-style: italic;
  padding: 8px 16px; border-radius: var(--r);
  background: rgba(255, 255, 255, .04); border: 1px dashed var(--stroke);
}

/* ------------------------------------------------- Aufnahme in zwei Spalten */

/* Links das, worauf man beim Sprechen schaut, rechts das Beiwerk. Untereinander
   wurde die Spalte so lang, dass man zwischen dem Aufnahmeknopf und „Deine
   Stimmen bisher" ständig gescrollt hat. */
.rec-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
/* width:100% ausdruecklich dazu, nicht nur min-width:0 -- als Elternteil
   eines Video/einer Bildunterschrift mit eigenwilliger Breitenberechnung
   (siehe die Kommentare bei #view-recording .clip-frame) reicht "auto"
   allein nicht: gemessen auf 390px breitem Schirm blieb .rec-haupt trotz
   min-width:0 bei ueber 600px haengen, weil es sich sonst an seinem
   Inhalt orientiert statt an der zugewiesenen Grid-Spalte. */
.rec-haupt { display: flex; flex-direction: column; gap: 18px; min-width: 0; width: 100%; }
.rec-seite {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%;
  /* Mitlaufen lassen: bei einer langen Zeilenliste soll das Mikrofon oben
     erreichbar bleiben. */
  position: sticky; top: 18px;
}
.rec-seite .klapp,
.rec-seite .proben,
.rec-seite .meine-liste-wrap { width: 100%; }

/* Schmale Schirme: wieder untereinander, Beiwerk nach unten. */
@media (max-width: 860px) {
  .rec-layout { grid-template-columns: 1fr; }
  .rec-seite { position: static; }
}

/* ---------------------------------------------------------------- Regie */

/* Die eigene Anweisung steht über der Zeile und darf auffallen: beim Sprechen
   ist sie wichtiger als der Text. Gold, damit sie sich von allem abhebt, was
   zum Clip gehört. */
.regie-band {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--r);
  background: rgba(255, 200, 61, .1);
  border: 1px solid rgba(255, 200, 61, .45);
  font-size: 17px; font-weight: 600;
}
.regie-marke {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #2a1500; background: var(--gold);
  padding: 3px 9px; border-radius: 99px; flex: none;
}

.regie-raten { display: flex; flex-direction: column; gap: 10px; }
.regie-zeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--stroke);
}
.regie-zeile strong { min-width: 120px; font-size: 15px; }
.regie-zeile select { flex: 1; min-width: 220px; }

/* Die Auflösung im Ergebnis, klein unter dem Namen. */
.regie-war {
  display: block; font-size: 11.5px; color: var(--gold);
  font-weight: 600; margin-top: 2px;
}
.results li span { display: flex; flex-direction: column; }

/* Geheimauftrag: getippt wird eine Person, nicht eine Anweisung. */
.regie-taeter { display: flex; flex-wrap: wrap; gap: 10px; }
.taeter { min-width: 140px; }
.taeter.chosen {
  background: var(--pink); color: #1a0510;
  border-color: transparent; box-shadow: 0 8px 26px rgba(255, 45, 120, .4);
}
.taeter.chosen::before { color: #1a0510; }

/* ---------------------------------------------------------------- Duell */

.duell-fassungen {
  display: flex; flex-direction: column; gap: 10px;
  width: min(560px, 100%); margin: 0 auto;
}
.duell-fassung {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--stroke);
}
.duell-fassung.gewaehlt { border-color: var(--pink); background: rgba(255, 45, 120, .1); }
.duell-fassung strong { flex: 1; min-width: 80px; }
/* Die Stimmenzahl erscheint erst, wenn man selbst gewählt hat — vorher wäre
   sie eine Empfehlung. */
.duell-zahl {
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold);
  min-width: 20px; text-align: right;
}

/* Die Schranke vor den Sammlungen. Sichtbar genug, dass man weiß, dass da noch
   etwas liegt — unaufdringlich genug, dass sie niemanden aufhält, der sie
   nicht braucht. */
.schranke {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r);
  background: rgba(255, 200, 61, .08);
  border: 1px solid rgba(255, 200, 61, .32);
}
.schranke > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 130px; }
.schranke b { font-size: 13px; color: var(--gold); }
.schranke span { font-size: 11.5px; color: var(--muted); }
.schranke input { width: auto; flex: 1; min-width: 110px; padding: 8px 11px; border-radius: var(--r); }

/* Rauswerfen: klein und unauffällig neben dem Namen, rot erst beim Berühren.
   Ein Kreuz, das ständig rot leuchtet, sieht aus wie eine Warnung. */
.raus {
  flex: none; width: 24px; height: 24px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1;
  background: rgba(255, 255, 255, .05); color: var(--muted);
  border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s;
}
.raus:hover { background: rgba(255, 77, 94, .18); color: var(--red); border-color: rgba(255, 77, 94, .45); }

.hilfe-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.hilfe-liste li { line-height: 1.5; }

/* ---------------------------------------------------- Reinhören vor der Wahl */

.pack-reihe { display: flex; gap: 6px; align-items: stretch; }
.pack-reihe .pack { flex: 1; min-width: 0; }
.reinhoeren {
  flex: none; width: 40px; cursor: pointer; font: inherit; font-size: 13px;
  border-radius: var(--r); color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s;
}
.reinhoeren:hover { border-color: var(--cyan); color: var(--cyan); }
.reinhoeren.laeuft {
  border-color: var(--cyan); color: #04121a;
  background: var(--cyan);
}

.pack-bewerten {
  flex: none; padding: 0 10px; height: 40px; cursor: pointer; font: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r); color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s;
}
.pack-bewerten:hover { border-color: var(--gold); color: var(--gold); }
.pack-bewerten.aktiv { border-color: var(--gold); color: var(--gold); background: rgba(255, 200, 61, .12); }
.pack-trending { font-size: 12px; }

/* Hinweis, wen der Lautstärke-Ausgleich beim Rendern bewegt hat. Steht unter
   dem Fortschrittsbalken und auf der Ergebnisseite. */
.film-ausgleich {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #b9b2c8);
}

/* Wer in der Tonprobe hörbar leiser ist als die Runde. Rot, wenn er im Video
   untergehen würde, sonst gelb wie die anderen Warnungen. */
.urteil.abstand-leicht { color: var(--gold); border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.abstand-schwer { color: var(--red);  border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

/* Der Warnkasten unter der Tonprobe. Hiess frueher .probe-hinweis -- und das
   war schon vergeben, fuer das kleine "anhoeren" an der Stimmen-Kachel. Die
   spaetere Regel gewann, und aus einem 12px-Wort wurde ein Kasten mit Rahmen. */
.tonprobe-warnung {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 200, 61, .08);
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text, #ece7f5);
}

/* ------------------------------------------------------------------ Maulwurf
   Das Band über der Aufnahme: für alle die Anweisung, für den Maulwurf die
   drei Köder. Rot, damit er beim Hinsehen sofort weiß, dass er dran ist. */
.lobby-spiele { display: flex; gap: 8px; flex-wrap: wrap; }

.maulwurf-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  line-height: 1.5;
}
.maulwurf-band em { color: var(--accent); font-style: normal; font-weight: 600; }
.maulwurf-marke {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.maulwurf-band.ich-bins {
  border-color: rgba(255, 77, 94, .45);
  background: rgba(255, 77, 94, .1);
}
.maulwurf-band.ich-bins .maulwurf-marke { color: var(--red); }
.maulwurf-band.ich-bins em { color: var(--gold); }

.maulwurf-raten { margin: 0 0 16px; }

.maulwurf-aufloesung { margin: 0 0 16px; }
.aufl-zeile { margin: 0 0 8px; line-height: 1.5; }
.aufl-zeile em { color: var(--accent); font-style: normal; font-weight: 600; }
.aufl-treffer {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--green);
  border: 1px solid rgba(43, 224, 138, .4);
  background: rgba(43, 224, 138, .12);
}
.aufl-stimmen { list-style: none; margin: 14px 0 0; padding: 0; }
.aufl-stimmen li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.aufl-stimmen li.ist-maulwurf {
  border-color: rgba(255, 77, 94, .45);
  background: rgba(255, 77, 94, .1);
}
.aufl-stimmen .aufl-zahl { margin-left: auto; color: var(--muted); font-size: .9rem; }
/* Punktestand ganz rechts, in fester Breite -- sonst wandert er je nach
   Laenge der Stimmenzahl hin und her. */
.aufl-stimmen .aufl-punkte { min-width: 2ch; text-align: right; color: var(--accent); }
.aufl-stimmen .aufl-marke {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--red);
  border: 1px solid rgba(255, 77, 94, .45);
}

/* Casting-Show: der Gecastete wird anders markiert als der, der die Rolle
   wirklich hatte -- sonst liest man in der Auflösung nicht, was schiefging. */
.aufl-stimmen .aufl-marke.gecastet {
  color: var(--violet);
  border-color: rgba(168, 85, 247, .5);
  background: rgba(168, 85, 247, .12);
}

/* ------------------------------------------------------------- Der Prozess
   Die Besetzung steht immer oben — ein Gerichtssaal lebt davon, dass alle
   wissen, wer wer ist. */
.pz-rollen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pz-rolle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.pz-rolle.ich { border-color: rgba(255, 200, 61, .45); background: rgba(255, 200, 61, .1); }
.pz-rolle-was {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pz-inhalt { margin: 0 0 16px; }
.pz-block { margin: 0 0 18px; }
.pz-block h3 {
  margin: 0 0 8px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pz-zahl { color: var(--accent); letter-spacing: 0; text-transform: none; }

.pz-beweise { list-style: none; margin: 0; padding: 0; }
.pz-beweise li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.pz-beweise li.drin,
.pz-beweise li.gewaehlt { border-color: rgba(255, 200, 61, .45); background: rgba(255, 200, 61, .09); }
.pz-beweise li.spielt { border-color: var(--hot); background: rgba(255, 45, 120, .14); }
.pz-beweise li.gegenbeweis { border-style: dashed; }
.pz-beweise .pz-zeile { flex: 1 1 auto; line-height: 1.4; }
.pz-beweise .pz-zeile em { color: var(--accent); font-style: normal; font-weight: 600; }
.pz-beweise .pz-nr {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pz-aufnahme { margin: 0 0 16px; }

/* Packs nach Spielerzahl gruppiert. Bei dreißig Packs sagt eine Überschrift
   mehr als eine Reihenfolge. */
.pack-gruppe { margin: 0 0 18px; }
.pack-gruppe:last-child { margin-bottom: 0; }
.pack-gruppe-titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
}
.pack-gruppe-was {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: .8rem;
  opacity: .75;
}
.pack-gruppe-passt {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--green);
  border: 1px solid rgba(43, 224, 138, .4);
  background: rgba(43, 224, 138, .12);
}

/* Steht über der Figurenliste, sobald nur ein Abschnitt gespielt wird — sonst
   liest man die Zahlen als die des ganzen Packs. */
.pack-chars-marke {
  margin: 0 0 2px;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Der Löschknopf. Gedämpft, solange er nur fragt — rot erst, wenn der nächste
   Druck wirklich löscht. */
.btn.btn-warn {
  border-color: rgba(255, 77, 94, .35);
  color: var(--red);
}
.btn.btn-warn:hover:not(:disabled) { border-color: rgba(255, 77, 94, .6); }
.btn.btn-warn.scharf {
  background: rgba(255, 77, 94, .16);
  border-color: var(--red);
  color: var(--text);
  font-weight: 700;
}
.klapp-trenner {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0 12px;
}
.hinweis.gut { color: var(--green); }
.hinweis.fehler { color: var(--red); }

/* Der zweite Download-Knopf steht neben dem ersten, aber leiser: die Fassung
   mit Korrektur ist der Normalfall, die rohe dient dem Vergleich. */
.btn-neben {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .92em;
}
.btn-neben:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------- Match-Score
   Drei Balken nach jedem Take. Farben aus der bestehenden Palette: Grün für
   gut, Gold für mittel, Pink für schwach -- dieselben, die auch sonst für
   „passt / geht so / daneben" stehen. */
.score {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}
.score-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.score-titel {
  font-size: .8em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.score-gesamt {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-gesamt.gut     { color: var(--green); }
.score-gesamt.mittel  { color: var(--gold); }
.score-gesamt.schwach { color: var(--pink); }

.score-zeile {
  display: grid;
  grid-template-columns: 5.5em 1fr 2.4em;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.score-name { font-size: .85em; color: var(--muted); }
.score-bahn {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.score-bahn i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .35s ease;
}
.score-bahn i.gut     { background: var(--green); }
.score-bahn i.mittel  { background: var(--gold); }
.score-bahn i.schwach { background: var(--pink); }
.score-wert {
  font-size: .85em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Countdown neben den Aufnahmeknöpfen. Ruhig, bis es knapp wird. */
.countdown {
  align-self: center;
  font-variant-numeric: tabular-nums;
  font-size: .95em;
  color: var(--muted);
  min-width: 6em;
}
.countdown.knapp   { color: var(--gold); font-weight: 600; }
.countdown.auslauf { color: var(--pink); }

/* Die Punktzahl in der Zeilenliste. */
.zeile-note {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: .78em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zeile-note.gut     { background: rgba(43, 224, 138, .16); color: var(--green); }
.zeile-note.mittel  { background: rgba(255, 200, 61, .16); color: var(--gold); }
.zeile-note.schwach { background: rgba(255, 45, 120, .16); color: var(--pink); }
.zeile-note.leer    { color: var(--muted); background: none; }

/* Der Reihe nach lässt sich nicht springen -- dann soll die Zeile auch nicht
   wie ein Knopf aussehen. */
.meine-liste .zeile:disabled { cursor: default; opacity: 1; }

/* Tastenkürzel auf den Knöpfen: da, aber leise. */
kbd {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--stroke);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .78em;
  opacity: .6;
}

/* Die mitlaufende Wort-Hervorhebung stand hier und ist entfernt -- siehe die
   Begründung in app.js. Kurz: die Zeiten je Wort waren geschätzt und lagen
   sichtbar daneben. */

/* ------------------------------------------------------- Startbildschirm
   Zwei Karten gleicher Höhe, die Handlung jeweils unten. Der frühere Aufbau
   waren zwei Spalten an einer Haarlinie: die linke endete früh und liess ein
   Loch darunter, und weil alle Kästen dasselbe Gewicht hatten, sagte einem
   nichts, wo man anfangen soll. */

#view-join { max-width: 1180px; }

/* Das Fenster drumherum: eine Titelleiste macht aus einer Karte einen
   Bildschirm, den man ausfüllt, statt ein Formular, das in der Mitte
   schwebt und den Rest der Seite leer lässt. */
.term-fenster {
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.term-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  background: var(--panel-2);
}
.term-punkte { display: flex; gap: 6px; flex: none; }
.term-punkte i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--stroke-2);
}
.term-punkte i:nth-child(1) { background: var(--red); opacity: .75; }
.term-punkte i:nth-child(2) { background: var(--gold); opacity: .75; }
.term-punkte i:nth-child(3) { background: var(--green); opacity: .75; }
.term-titel {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}
.term-blink {
  display: inline-block;
  width: .55em; height: 1em;
  margin-left: 2px;
  background: var(--pink);
  vertical-align: -.15em;
  animation: cursor-blink 1s step-end infinite;
}
.term-inhalt {
  padding: 28px clamp(20px, 4vw, 48px) 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .term-blink { animation: none; }
}

/* Der Link zur Kontenverwaltung -- klein und beiläufig, wie es einem Admin-
   Werkzeug zusteht, das die allermeisten Besucher nie zu sehen bekommen. */
.admin-link {
  display: inline-block; margin-top: 6px;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.admin-link:hover { color: var(--pink); }

/* --------------------------------------------------------------- Anmeldung
   Eine Zeile unter dem Titelblock. Bei Anmeldepflicht bekommt sie den Akzent,
   sonst bleibt sie ruhig — sie ist dann ein Angebot, keine Schranke. */
.konto-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 9px 13px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  font-size: 13px;
}
.konto-leiste.pflicht { border-color: var(--accent); }
.konto-hinweis { color: var(--muted); flex: 1; min-width: 12ch; }
.konto-bild {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: block;
  flex: none;
  object-fit: cover;
}
.konto-name { font-weight: 700; flex: 1; }
.konto-marke {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 2px 8px; border-radius: 99px; flex: none;
}
.konto-ab { text-decoration: none; flex: none; }

/* Das Zeichen neben dem Schriftzug. Größe hängt am Schriftgrad, damit beides
   zusammen wächst und schrumpft statt auseinanderzulaufen. */
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28em;
}
.wortmarke-zeichen {
  width: .95em; height: .95em; flex: none;
  /* Optischer Ausgleich: der Blasenschwanz zieht das Zeichen sonst nach unten. */
  margin-top: -.06em;
}
/* Der Name ist EIN Wort. Ohne diese Hülle behandelt das Flex-Layout „Dub" und
   „Stage" als zwei Kästchen und setzt den Abstand des Zeichens auch dazwischen
   – aus DubStage wird „Dub Stage". */
.wortmarke-text { display: inline; }

/* ------------------------------------------------------------ Anmeldeseite
   Was ein Fremder sieht, der die Adresse zum ersten Mal öffnet. Deshalb steht
   hier auch, worum es geht — der Knopf allein wäre eine Zumutung. */
.anmelde-karte { text-align: center; }
.anmelde-karte .wordmark { text-align: center; }
.anmelde-text {
  margin: 18px auto 24px; max-width: 42ch;
  color: var(--text); line-height: 1.65;
}
.anmelde-karte .btn-gross { margin: 0 auto; display: block; text-decoration: none; }
.anmelde-klein {
  margin: 22px auto 0; max-width: 44ch;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

/* Konto ohne Discord — gleichwertig neben dem Discord-Knopf, nicht darunter
   versteckt. Wer Discord nicht will, hat dafür Gründe. */
.lokal-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lokal-knoepfe { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 480px) {
  .lokal-knoepfe { flex-direction: row; }
  .lokal-knoepfe .btn { flex: 1; }
}
#view-anmelden .divider { margin: 24px 0 18px; }

/* ------------------------------------------------------- Tastenkürzel
   Vier Zeilen, je eine Handlung und die Taste dazu. Der Knopf ist gleichzeitig
   die Anzeige und das Eingabefeld — antippen, Taste drücken, fertig. */
.tasten-liste { display: flex; flex-direction: column; gap: 7px; }
.tasten-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.taste-knopf { min-width: 92px; font-family: var(--mono); font-size: 12px; }
.taste-knopf.wartet { border-color: var(--accent); color: var(--accent); font-family: var(--font); }

/* Kontenverwaltung. Eine Zeile je Konto, Name links, Stand und Knöpfe rechts. */
.konten-liste { display: flex; flex-direction: column; gap: 8px; }
.konto-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--stroke); border-radius: var(--r);
  font-size: 13px;
}
.konto-zeile-name { font-weight: 700; }
.konto-zeile-art { font-size: 11px; color: var(--muted); }
.konto-zeile-stand { margin-left: auto; color: var(--gold); font-weight: 700; white-space: nowrap; }
.konto-zeile-knoepfe { display: flex; gap: 6px; flex: none; }

/* ---------------------------------------------------------------------------
   Stelle melden. Ein Fenster über allem, weil es mitten im Spielen aufgerufen
   wird und danach sofort wieder weg sein muss.

   Die Karte nimmt --bg-2 und NICHT --panel: --panel ist ein Glaseffekt
   (rgba mit 4,5 % Weiß), gedacht als Auflage auf dem dunklen Grund. Als
   Hintergrund eines Fensters ist es durchsichtig -- beim ersten Versuch
   las man die Anmeldeseite durch den Dialog hindurch.
   --------------------------------------------------------------------------- */
.melde-huelle {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 5, 13, .8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.melde-huelle[hidden] { display: none; }
.melde-karte {
  width: min(30rem, 100%);
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--stroke-2); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem;
}
#melde-fenster .melde-karte { max-height: calc(100dvh - 2rem); overflow-y: auto; flex-shrink: 0; }
#melde-fenster .melde-karte > * { flex-shrink: 0; }
#melde-kontext { overflow-wrap: anywhere; max-height: 9rem; overflow-y: auto; }
.melde-karte h3 { margin: 0; font-size: 1.15rem; }
.melde-hinweis { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.melde-zeile { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--muted); }
.melde-zeile em { font-style: normal; opacity: .7; }
.melde-feld {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: .6rem .75rem; font: inherit; width: 100%; resize: vertical;
}
.melde-feld::placeholder { color: var(--muted); opacity: .7; }
.melde-feld:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.melde-zeit { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .06em; max-width: 12rem; }
.melde-stand { font-size: .82rem; color: var(--muted); min-height: 1.2em; }
.melde-knoepfe { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .2rem; }

/* ---------------------------------------------------------------------------
   Plätze an einem Gerät. Zwei Leute auf einem Sofa teilen sich ein Mikrofon
   und zählen trotzdem als zwei Mitspieler.
   --------------------------------------------------------------------------- */
.platz-kasten {
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .8rem .9rem; margin: 0 0 .9rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.platz-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: .88rem; color: var(--muted); }
.platz-wahl {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .35rem .6rem; font: inherit; font-size: .88rem;
}
.platz-namen { display: flex; flex-wrap: wrap; gap: .45rem; }
.platz-namen[hidden] { display: none; }
.platz-feld {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .4rem .6rem; font: inherit; font-size: .9rem; width: 9rem;
}
.platz-feld:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.platz-hinweis { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* Die Reiter, mit denen man am geteilten Gerät zwischen den Leuten umschaltet. */
.platz-reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.platz-reiter[hidden] { display: none; }
.platz-tab {
  background: var(--panel); color: var(--muted); border: 1px solid var(--stroke);
  border-radius: 999px; padding: .35rem .85rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.platz-tab:hover { background: var(--panel-2); }
.platz-tab.ist-dran {
  background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600;
}

/* Wer von den Leuten am Gerät jetzt sprechen muss. Steht über den Knöpfen,
   weil man dorthin greift. */
.platz-dran {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r); padding: .5rem .9rem; margin: 0 0 .7rem;
  font-size: .95rem; text-align: center;
}
.platz-dran[hidden] { display: none; }
.platz-dran strong { font-weight: 700; }

/* Lautstärke-Regler bei der Vorführung: Sprecher und Hintergrund. Kompaktere
   Fassung des normalen .regler -- zwei nebeneinander in einer schmalen Leiste
   statt untereinander in einer Formularspalte. */
.screen-mixer {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--stroke);
}
.regler-klein { flex: 1; min-width: 160px; max-width: 260px; }
.regler-klein span { display: flex; justify-content: space-between; gap: 8px; }

/* ---------------------------------------------------------------------------
   Profil & Freunde. Der Knopf liegt fest in der Ecke, unabhaengig von der
   jeweiligen .view -- deshalb position: fixed statt im normalen Fluss.
   --------------------------------------------------------------------------- */
.profil-knopf {
  position: fixed; top: 14px; right: 14px; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--stroke-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; overflow: hidden;
}
.profil-knopf:hover { border-color: var(--pink); }

/* Spiegelbildlich zum Profilknopf, oben links statt oben rechts -- nur
   sichtbar, wo die Hintergrundmusik ueberhaupt laufen kann (siehe show()
   in app.js). */
.musik-knopf {
  position: fixed; top: 14px; left: 14px; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--stroke-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-size: 16px;
}
.musik-knopf:hover { border-color: var(--pink); }
.profil-knopf-bild { width: 100%; height: 100%; object-fit: cover; }
.profil-knopf-buchstabe { font-weight: 800; color: var(--pink); font-size: 15px; }

.profil-karte { width: min(620px, 100%); max-height: 90dvh; overflow-y: auto; }
.profil-kopf { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 22px; position: relative; padding-right: 42px; }
.profil-identitaet { min-width: 0; }
.profil-kopf h3 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.profil-bild { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.profil-statistik { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.profil-statistik span { color: var(--gold); font-weight: 700; }
.profil-schliessen { position: absolute; right: 0; top: 0; }
.profil-schliessen::before { content: none; }

.profil-abschnitt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.profil-abschnitt h4 { margin: 0 0 6px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.profil-hinweis { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }

/* --------------------------------------------- Profilbild und Rahmen */

.profil-bild-rahmen {
  position: relative; width: 112px; height: 112px; flex: none;
  border-radius: 50%; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
}
.profil-bild-rahmen .profil-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.profil-bild-buchstabe { font-weight: 800; color: var(--pink); font-size: 38px; }
.profil-bild-stift {
  position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; border: 2px solid var(--panel);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.profil-bild-stift:hover { background: var(--gold); color: #2a1500; }
.profil-bild-entfernen {
  margin-top: 4px; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted); text-decoration: underline;
}
.profil-bild-entfernen:hover { color: var(--pink); }

.profil-rahmen-liste { display: flex; flex-direction: column; gap: 8px; }
.profil-rahmen-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.profil-rahmen-kategorie {
  margin: 2px 0 0; font-size: 10.5px; color: var(--gold);
  text-transform: uppercase; letter-spacing: .05em;
}
.profil-rahmen-wahl {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: center;
}
.profil-rahmen-wahl .profil-rahmen-muster { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-2); }
.profil-rahmen-wahl.gewaehlt { border-color: var(--text); }
.profil-rahmen-wahl.gesperrt { opacity: .4; cursor: not-allowed; }

/* Die Rahmen selbst -- ein farbiger Ring per box-shadow, damit er auf jedem
   runden Element funktioniert (Kontoleiste, Profilknopf, Profilbild,
   Auswahl-Muster), ohne dass jede Stelle ihr eigenes Markup braeuchte. */
.rahmen-pink { box-shadow: 0 0 0 3px var(--pink); }
.rahmen-cyan { box-shadow: 0 0 0 3px var(--cyan); }
.rahmen-violett { box-shadow: 0 0 0 3px var(--violet); }
.rahmen-gold {
  box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(255, 200, 61, .6);
  animation: rahmen-gold-puls 2.4s ease-in-out infinite;
}
@keyframes rahmen-gold-puls {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 8px rgba(255, 200, 61, .45); }
  50% { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(255, 200, 61, .85); }
}
@media (prefers-reduced-motion: reduce) { .rahmen-gold { animation: none; } }

.rahmen-blitz {
  box-shadow: 0 0 0 3px var(--cyan), 0 0 14px rgba(34, 230, 255, .8);
  animation: rahmen-blitz-flacker 1.1s steps(2, end) infinite;
}
@keyframes rahmen-blitz-flacker {
  0%, 100% { box-shadow: 0 0 0 3px var(--cyan), 0 0 14px rgba(34, 230, 255, .8); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-motion: reduce) { .rahmen-blitz { animation: none; } }

.rahmen-regenbogen { animation: rahmen-regenbogen-dreh 3s linear infinite; }
@keyframes rahmen-regenbogen-dreh {
  0%   { box-shadow: 0 0 0 3px #ff2d78, 0 0 12px rgba(255, 45, 120, .6); }
  20%  { box-shadow: 0 0 0 3px #ffc83d, 0 0 12px rgba(255, 200, 61, .6); }
  40%  { box-shadow: 0 0 0 3px #2be08a, 0 0 12px rgba(43, 224, 138, .6); }
  60%  { box-shadow: 0 0 0 3px #22e6ff, 0 0 12px rgba(34, 230, 255, .6); }
  80%  { box-shadow: 0 0 0 3px #a855f7, 0 0 12px rgba(168, 85, 247, .6); }
  100% { box-shadow: 0 0 0 3px #ff2d78, 0 0 12px rgba(255, 45, 120, .6); }
}
@media (prefers-reduced-motion: reduce) { .rahmen-regenbogen { animation: none; } }

/* --------------------------------------------------------------- Chat */
/* Schwebt wie der Profilknopf ueber allem, unten statt oben, damit sich
   beide nicht in die Quere kommen. Kein Modal-Hintergrund -- waehrend man
   redet, soll das Spiel dahinter weiterhin bedienbar bleiben. */
.chat-huelle {
  position: fixed; bottom: 14px; right: 14px; z-index: 54;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.chat-knopf {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--stroke-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; cursor: pointer; padding: 0;
}
.chat-knopf:hover { border-color: var(--pink); }
#chat-huelle:has(> #chat-fenster:not([hidden])) > #btn-chat-oeffnen { display: none; }
.chat-kopf .profil-schliessen { position: static; margin: 0; flex: none; }
.chat-ungelesen {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--pink); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.chat-fenster {
  width: min(300px, calc(100vw - 28px)); height: min(400px, calc(100vh - 100px));
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.chat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--stroke); background: var(--panel-2);
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.chat-verlauf { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-nachricht { font-size: 12.5px; line-height: 1.4; word-break: break-word; }
.chat-nachricht .chat-name { color: var(--gold); font-weight: 700; margin-right: 4px; }
.chat-nachricht.eigene .chat-name { color: var(--cyan); }
.chat-nachricht.konfetti {
  text-align: center; color: var(--gold); font-weight: 700;
  background: rgba(255, 200, 61, .1); border-radius: var(--r); padding: 4px 6px;
}
.chat-nachricht.konfetti .chat-name { color: var(--gold); }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--stroke); }
.chat-form input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: var(--r);
  border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px;
}

/* ------------------------------------------------ Vier gewinnt */
/* Links unten, spiegelbildlich zum Chat -- beide sind eigenstaendige
   schwebende Elemente und sollen sich nie ueberlagern. */
.vg-huelle {
  position: fixed; bottom: 14px; left: 14px; z-index: 54;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.vg-fenster { width: min(280px, calc(100vw - 28px)); height: auto; max-height: min(420px, calc(100vh - 100px)); }
.vg-inhalt { flex: 1; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vg-leer { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vg-leer p { margin: 0; font-size: 12.5px; color: var(--muted); }
.vg-status { margin: 0; font-size: 13px; font-weight: 700; text-align: center; }
.vg-brett {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  background: var(--bg-2); padding: 6px; border-radius: var(--r); border: 1px solid var(--stroke);
}
.vg-spalte { display: flex; flex-direction: column; gap: 3px; background: none; border: none; padding: 2px; cursor: pointer; border-radius: var(--r); }
.vg-spalte:disabled { cursor: default; }
.vg-spalte:not(:disabled):hover { background: rgba(255, 255, 255, .06); }
.vg-zelle { width: 24px; height: 24px; border-radius: 50%; background: var(--panel); display: block; }
.vg-zelle.vg-rot { background: var(--pink); }
.vg-zelle.vg-gelb { background: var(--cyan); }

/* Legt sich einmalig ueber ALLES (auch Chat- und Profilfenster), zeichnet
   sich selbst weg und entfernt sich danach wieder aus dem DOM. */
.konfetti-overlay { position: fixed; inset: 0; z-index: 200; pointer-events: none; }

/* ------------------------------------------------- Streamer-Modus */
/* Rein lokal (siehe app.js) -- blendet aus, was auf einer geteilten
   Bildschirmseite niemanden etwas angeht: Codes, zum Beitreten oder als
   Freund hinzufuegen gedacht, und der freie Text im Chat. Ein Klick deckt
   die jeweilige Stelle kurz auf, statt sie dauerhaft freizugeben. */
.streamer-modus .room-code strong {
  filter: blur(6px); cursor: pointer; user-select: none;
}
.streamer-modus #profil-code { filter: blur(6px); cursor: pointer; user-select: none; }
.streamer-modus #profil-code:hover { filter: none; }
.streamer-modus .chat-nachricht:not(.enttarnt) .chat-name,
.streamer-modus .chat-nachricht:not(.enttarnt) .chat-text {
  filter: blur(4px); cursor: pointer;
}

/* --------------------------------------------------- Spieler-Streifen */
/* Im normalen Fluss oben, nicht "position: fixed" -- schiebt die jeweilige
   Ansicht damit einfach nach unten, statt ihre Kopfzeile zu ueberlagern. */
/* Transparent statt einer eigenen Flaeche -- sonst wirkt es bei ein, zwei
   Chips wie eine leere Balkenzeile quer über den Schirm. Die Chips selbst
   tragen ihre eigene kleine Flaeche, der Rest bleibt einfach Seitenhintergrund. */
.spieler-streifen {
  display: flex; gap: 8px; flex-wrap: wrap; overflow-x: auto; padding: 10px 12px 4px;
}
.spieler-chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px 4px 4px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--stroke);
}
.spieler-chip.dran { border-color: var(--gold); background: rgba(255, 200, 61, .12); }
.spieler-chip.eigener { cursor: pointer; }
.spieler-chip.eigener:hover { border-color: var(--pink); }
.spieler-chip-name { font-size: 12px; font-weight: 600; white-space: nowrap; }
.spieler-chip-status { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.spieler-chip.dran .spieler-chip-status { color: var(--gold); font-weight: 700; }

.spieler-bild {
  border-radius: 50%; object-fit: cover; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--muted); font-weight: 800; font-size: 12px;
}

.profil-code-zeile { display: flex; gap: 8px; align-items: center; }
.profil-code {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: .12em;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 6px 12px; color: var(--gold); flex: 1;
}

.profil-liste { display: flex; flex-direction: column; gap: 6px; }
.profil-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel); border-radius: var(--r); padding: 6px 10px; font-size: .88rem;
}
.profil-zeile-knoepfe { display: flex; gap: 6px; flex: none; }
.profil-warten { color: var(--muted); font-size: .78rem; font-style: italic; }

/* Die Einladungsleiste -- kein Vollbild-Fenster wie das Profil, sondern ein
   schmaler Streifen: sie ploppt ungefragt auf und soll niemanden aus der
   laufenden Runde reissen. */
.einladung-leiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 56;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--pink); color: #1a0510;
  font-size: .92rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.einladung-leiste[hidden] { display: none; }
.einladung-leiste .btn { flex: none; }

/* Fusszeile mit Impressum/Datenschutz auf der Startseite, und die beiden
   Seiten selbst -- Muster aus dem ZOCKÄÄÄN Party Club uebernommen. */
.legal-footer {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); margin-top: 18px;
}
.legal-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--stroke); }
.legal-footer a:hover { color: var(--text); border-color: var(--text); }

body.legal-page { overflow: auto; }
.legal-wrap {
  max-width: 720px; margin: 0 auto; padding: 40px 22px 60px; line-height: 1.65; font-size: 14.5px;
}
.legal-wrap h1 { font-size: 30px; letter-spacing: -.03em; margin: 12px 0 6px; }
.legal-wrap h2 {
  font-size: 15px; margin: 26px 0 6px; color: var(--cyan);
  letter-spacing: .02em;
}
.legal-wrap p, .legal-wrap ul { margin: 0 0 10px; }
.legal-wrap ul { padding-left: 20px; }
.legal-wrap li { margin-bottom: 4px; }
.legal-wrap a { color: var(--cyan); }
.legal-wrap code {
  background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 5px;
  font-family: var(--mono); font-size: 12.5px;
}
.legal-back {
  display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none;
  padding: 6px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .05);
}
.legal-back:hover { color: var(--text); }

/* Lokale Aufnahmeabsicherung und Mikrofoncheck */
.aufnahme-dialog { color: var(--text, #eee); background: var(--panel, #18151b); border: 1px solid #514653; border-radius: 16px; padding: 24px; width: min(620px, calc(100vw - 32px)); max-height: 85dvh; overflow: auto; }
.aufnahme-dialog::backdrop { background: #000b; }
.aufnahme-dialog h2 { margin: 0 0 12px; }
.aufnahme-dialog .btn { margin-top: 12px; }
.entwurf-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #514653; }
.entwurf-zeile > span { flex: 1 1 180px; }
#aufnahme-status.fehler { color: #ffbd88; }
.aufnahme-sicherung {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; max-width: 100%; text-align: center;
}
.aufnahme-sicherung:not(:has(> :not([hidden]))) { display: none; }
#aufnahme-status { overflow-wrap: anywhere; }

#mikrocheck-dialog .field { margin-top: 16px; }
#mikrocheck-dialog audio { width: 100%; margin-top: 16px; }
#mikrocheck-status { line-height: 1.6; }
.mikrocheck-testsatz { margin: 18px 0; padding: 12px 16px; border-left: 3px solid var(--gold, #e3b77d); line-height: 1.6; }
.aufnahme-dialog :focus-visible { outline: 2px solid var(--gold, #e3b77d); outline-offset: 3px; }

/* Anmeldung im eigenen Profil */
.profil-verbindung { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.profil-verbindung > div { flex: 1 1 180px; min-width: 0; }
.profil-verbindung .profil-hinweis { overflow-wrap: anywhere; }
.profil-passwort { margin-top: 16px; }
.profil-passwort > summary { cursor: pointer; color: var(--text); padding: 8px 0; font-weight: 600; }
.profil-passwort-form { display: flex; flex-direction: column; gap: 12px; padding: 10px 0; }
.profil-passwort-form .field { margin: 0; }
.profil-passwort-form .btn { align-self: flex-start; }
.profil-anmeldung .fehler { color: var(--red); }
.profil-anmeldung .gut { color: var(--green); }
@media (max-width: 480px) {
  .profil-kopf { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding-right: 0; padding-top: 40px; }
  .profil-bild-rahmen { width: 88px; height: 88px; }
  .profil-kopf h3 { font-size: 1.15rem; }
  .profil-statistik { overflow-wrap: anywhere; }
}

/* Freunde, Packauswahl und Studio: dieselben dunklen Bedienelemente überall. */
:root { color-scheme: dark; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
  width: 20px; height: 20px; min-width: 20px; padding: 0; margin: 0 5px 0 0;
  border: 1px solid var(--muted); border-radius: 5px; background: var(--panel-2);
  vertical-align: middle; cursor: pointer;
}
input[type="checkbox"]::before { content: ''; width: 10px; height: 6px; border: solid #140a13; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); }
input[type="checkbox"]:checked { background: var(--pink); border-color: var(--pink); }
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
#view-recording, #view-screening, :is(#view-lobby,.studio-lobby), #view-join, :is(#view-casting,#casting) { width: 100%; max-width: none; }
.start-freunde { border-top: 1px solid var(--stroke); padding-top: 22px; margin-top: 24px; }
.freunde-kopf, .pack-ergebnis { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.freunde-kopf h2 { font-size: 16px; margin: 0; }
.start-freunde-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.freund-karte { display: flex; align-items: center; gap: 14px; padding: 12px; min-width: 0; }
.freund-avatar { position: relative; flex: none; display: flex; }
.freund-avatar::after { content: ''; position: absolute; bottom: 0; right: -2px; width: 11px; height: 11px; border: 2px solid var(--panel); border-radius: 50%; background: var(--muted); }
.freund-avatar.ist-online::after { background: var(--green); box-shadow: 0 0 8px #42e39466; }
.freund-info { display: grid; gap: 5px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.freund-info > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.profil-sichtbarkeit form { display: grid; gap: 16px; }
.profil-sichtbarkeit .toggle { align-items: start; line-height: 1.6; }
:is(#lobby-players,#players) { flex-direction: row; flex-wrap: wrap; gap: 16px; padding: 12px 0; }
:is(#lobby-players,#players) .studio-person { position: relative; flex-direction: column; text-align: center; width: 152px; padding: 18px 8px 12px; gap: 9px; }
.studio-avatar { display: flex; border-radius: 50%; border: 2px solid var(--cyan); padding: 4px; box-shadow: 0 0 14px #36d8ff26; }
.ist-bereit .studio-avatar { border-color: var(--green); box-shadow: 0 0 16px #51e880aa, 0 0 38px #51e88055; }
:is(#lobby-players,#players) .pname { flex: none; max-width: 100%; font-weight: 700; }
.studio-status { font-size: 11px; color: var(--muted); }
.ist-bereit .studio-status { color: var(--green); }
.studio-marken { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.studio-marken .konto-marke, .studio-marken .tag { font-size: 9px; padding: 3px 5px; }
:is(#lobby-players,#players) .raus { position: absolute; top: 2px; right: 2px; min-width: 28px; min-height: 28px; margin: 0; }
.pack-filter { align-items: end; flex-wrap: wrap; }
.pack-suchfeld, .pack-sortierfeld { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.pack-suchfeld { flex: 1 1 220px; }
.pack-sortierfeld { flex: 1 1 170px; }
.pack-filter input, .pack-filter select { width: 100%; min-width: 0; }
.pack-schnellfilter { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 16px 0; }
.pack-ergebnis { color: var(--muted); font-size: 12px; min-height: 32px; }
.pack-list { max-height: 56dvh; overscroll-behavior-y: contain; padding-right: 5px; }
#lobby-inhalt > .panel { min-width: 0; }
.pack-reihe { min-width: 0; }
.screen-media { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.screen-media video, .screen-media > img { display: block; max-width: 100%; }
.screen-sprecher-bild { top: 3%; right: 3%; display: flex; align-items: center; flex-direction: column; width: 15%; min-width: 36px; max-width: 180px; line-height: 1.2; pointer-events: none; }
.screen-sprecher-bild .spieler-bild { border-radius: 50%; width: 80% !important; height: auto !important; aspect-ratio: 1; border: 2px solid var(--cyan); box-shadow: 0 0 16px #36d8ff88; }
.sprecher-name { max-width: 100%; margin-top: -3px; z-index: 1; padding: 4px 9px; color: #fff; background: #080b12ee; border: 1px solid var(--cyan); border-radius: 20px; font-size: clamp(9px, 1.1vw, 14px); overflow-wrap: anywhere; text-align: center; }
@media (min-width: 1500px) {
  #lobby-inhalt { grid-template-columns: minmax(360px, .8fr) minmax(0, 1.6fr); }
  #pack-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  #pack-picker .pack-gruppe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .pack-gruppe-titel { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #profil-freunde-liste .freund-karte { flex-wrap: wrap; }
  #profil-freunde-liste .profil-zeile-knoepfe { margin-left: auto; }
  :is(#lobby-players,#players) { gap: 10px; }
  :is(#lobby-players,#players) .studio-person { width: calc(50% - 5px); }
  .bar-bottom { bottom: 0; padding: 10px; }
}

.lobby-navigation, .lobby-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lobby-mehr { position: relative; }
.lobby-mehr > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: var(--r); font-size: 13px; }
.lobby-optionen { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 48px)); padding: 18px; display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--stroke); box-shadow: var(--shadow); z-index: 20; }
.lobby-optionen .toggle { align-items: start; line-height: 1.5; }
@media (max-width: 600px) {
  .lobby-navigation, .lobby-werkzeuge { width: 100%; }
  .lobby-navigation .room-code { flex: 1; }
  .lobby-navigation #btn-copy-link { width: 100%; }
  .lobby-mehr { margin-left: auto; }
}

.studio-einstellungen { border-top: 1px solid var(--stroke); margin-top: 14px; padding-top: 18px; }
.studio-einstellungen > summary { cursor: pointer; color: var(--text); font-size: 13px; line-height: 1.6; }
#studio-modus-kurz { display: block; color: var(--muted); font-size: 11px; margin: 6px 0 0 16px; }
.studio-avatar .spieler-buchstabe { font-size: 36px; }
:is(#lobby-players,#players) .pname { border: 1px solid var(--stroke-2); background: var(--panel-2); border-radius: 20px; padding: 4px 10px; }
#lobby-footer-dubstage .bar-bottom-reihe { padding-right: 44px; }
.screen-sprecher-bild .spieler-buchstabe { font-size: clamp(16px, 3vw, 48px); }

/* Abschnittsweise Aufnahme */
.aufnahme-transport, .schnitt-felder { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.aufnahme-transport .toggle { font-size: 12px; }
.aufnahme-schnitt { max-width: 100%; text-align: left; border: 1px solid var(--stroke); padding: 10px 14px; }
.aufnahme-schnitt summary { cursor: pointer; font-size: 13px; }
.aufnahme-schnitt .hinweis { margin: 8px 0; }
.schnitt-felder { justify-content: start; }
.schnitt-felder label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.schnitt-felder input { width: 90px; padding: 8px; background: var(--panel); color: var(--text); border: 1px solid var(--stroke); }
#rec-einzaehlen { font-size: 24px; color: var(--gold); font-weight: 800; min-width: 48px; }
.studio-avatar { position: relative; isolation: isolate; transition: border-color .4s, box-shadow .4s; }
.studio-avatar::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: -1; pointer-events: none; background: #2be08a33; box-shadow: 0 0 16px #51e880aa, 0 0 34px #51e88066; opacity: 0; transition: opacity .45s ease; animation: studio-bereit-puls 2.8s ease-in-out infinite; }
.ist-bereit .studio-avatar { box-shadow: 0 0 10px #51e88055; }
.ist-bereit .studio-avatar::before { opacity: 1; }
@keyframes studio-bereit-puls { 0%, 100% { transform: scale(.96); filter: brightness(.85); } 50% { transform: scale(1.08); filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .studio-avatar, .studio-avatar::before { transition: none; animation: none; }
}

.aufnahme-transport { width: 100%; }
.aufnahme-schnitt[open] { flex-basis: 100%; }
#view-recording .rec-controls { gap: 8px; }
#view-recording .rec-controls .btn-gross { margin: 0; }

.pack-sprachen { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }

.aufnahme-abschluss { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
@media (min-width: 1200px) {
  .aufnahme-abschluss { flex-direction: row; justify-content: center; gap: 12px 24px; }
  .aufnahme-abschluss .aufnahme-sicherung { flex-direction: column; gap: 4px; }
  .aufnahme-abschluss .aufnahme-sicherung .hinweis { margin: 0; font-size: 12px; }
}

@media (min-width: 900px) and (max-height: 900px) {
  #view-recording .rec-haupt { gap: 8px; }
  #view-recording .wave { height: clamp(56px, 8vh, 88px); }
}

/* Countdown liegt auf der Szene; er belegt keinen Platz in der Knopfreihe. */
#view-recording .clip-frame { position: relative; }
#rec-einzaehlen { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; background: #06050bb8; font-size: clamp(48px, 9vh, 110px); text-shadow: 0 0 25px #ffcd4180; }
.wave.schnitt-aktiv { cursor: ew-resize; touch-action: none; }
.wave.schnitt-aktiv:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Stabile Vorführungsfläche: Untertitel ändern ausschließlich ihren eigenen Bereich. */
body:has(> #view-screening:not([hidden])) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body:has(> #view-screening:not([hidden])) > .spieler-streifen { flex: none; }
#view-screening { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 24px 32px; }
#view-screening > .bar { flex: none; margin: 0; }
#screen-mixer { flex: none; align-items: center; padding: 6px 12px; gap: 10px 20px; }
.screen-versatz { flex: 1 1 320px; font-size: 12px; align-items: start; }
.screen-versatz em { display: block; font-size: 10px; margin-top: 3px; }
#screen-frame { flex: 1; min-height: 0; width: 100%; padding: 8px; display: grid; grid-template-rows: minmax(0, 1fr) 94px; gap: 8px; }
.screen-viewport { min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
#screen-media { margin: 0; max-width: 100%; max-height: 100%; }
#screen-media > video, #screen-media > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
#screen-frame > .clip-line { width: 100%; max-width: 110ch; height: 100%; min-height: 0; overflow: hidden; justify-self: center; padding: 4px 14px; font-size: clamp(13px, 1.25vw, 20px); }
#screen-line-de { --untertitel-zeilen: 2; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.35; white-space: pre-line; }
#screen-line-en { --untertitel-zeilen: 1; font-size: 13px; line-height: 1.35; white-space: pre-line; }
#screen-speaker { min-height: 20px; flex: none; font-size: 12px; }
#screen-sync { min-height: 14px; flex: none; font-size: 10px; }
#film-bereich { gap: 4px; max-height: none; margin: 0; width: 100%; max-width: none; }
#film-bereich:not(:has(.fortschritt:not([hidden]), .film-ausgleich:not([hidden]), .film-links:not(:empty))) { display: none; }
#view-screening:fullscreen { height: 100dvh; background: var(--bg); }
.screen-dock { position: relative; flex: none; z-index: 40; padding-top: 24px; overflow: hidden; }
.vorfuehrung-laeuft .screen-dock { position: fixed; bottom: 0; left: 24px; right: 24px; pointer-events: none; }
.screen-bedienfeld, .screen-dock-griff { pointer-events: auto; }
.screen-bedienfeld { max-height: 40dvh; overflow-y: auto; padding: 12px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 12px 12px 0 0; transition: transform .3s ease; }
.screen-bedienfeld .screen-versatz { margin: 0 0 12px; }
.screen-volltext { font-size: 12px; margin: 12px 0; }
.screen-volltext summary { cursor: pointer; color: var(--muted); }
.screen-volltext p { white-space: pre-wrap; overflow-wrap: anywhere; }
#screen-aktionen { position: relative; bottom: auto; margin: 8px 0 0; padding: 8px; }
.screen-dock-griff { display: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; border: 1px solid var(--stroke); border-radius: 10px 10px 0 0; background: var(--panel); color: var(--muted); padding: 4px 16px; cursor: pointer; font: inherit; font-size: 11px; }
.vorfuehrung-laeuft .screen-dock-griff { display: block; }
.vorfuehrung-laeuft #screen-bedienfeld { transform: translateY(calc(100% + 2px)); transition-delay: 1.2s; }
.vorfuehrung-laeuft .screen-dock:hover #screen-bedienfeld,
.vorfuehrung-laeuft .screen-dock:focus-within #screen-bedienfeld,
.vorfuehrung-laeuft .screen-dock.bedienung-offen #screen-bedienfeld { transform: none; transition-delay: 0s; }
.screen-dock:hover .screen-dock-griff, .screen-dock:focus-within .screen-dock-griff, .screen-dock.bedienung-offen .screen-dock-griff { top: 0; bottom: auto; }
.pegel-warnung { color: var(--gold); border-left: 3px solid var(--gold); padding: 6px 10px; margin: 0; font-size: 12px; line-height: 1.5; }
:is(#lobby-players,#players) .studio-marken { width: 100%; min-height: 48px; margin-top: auto; align-items: center; align-content: center; justify-content: center; }
:is(#lobby-players,#players) .studio-marken > span { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; line-height: 1; margin: 0; text-align: center; }
@media (max-width: 600px) {
  #view-screening { padding-left: 8px; padding-right: 8px; }
  #screen-mixer .regler-klein { min-width: 110px; font-size: 11px; }
  #screen-mixer .regler-klein b { white-space: nowrap; }
  .screen-versatz { flex-basis: 100%; }
  #screen-frame { grid-template-rows: minmax(0, 1fr) 124px; }
  #screen-line-de { --untertitel-zeilen: 3; }
  #screen-line-en { --untertitel-zeilen: 2; }
  .vorfuehrung-laeuft .screen-dock { left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { #screen-bedienfeld { transition: none; } }

/* Namen dürfen nur an Leerzeichen umbrechen. Das Schild wächst mit dem Namen. */
#screen-sprecher-bild { width: max-content; max-width: 60%; min-width: 0; }
#screen-sprecher-bild .spieler-bild { width: var(--sprecher-avatar-size, 64px) !important; height: var(--sprecher-avatar-size, 64px) !important; flex: none; }
#screen-sprecher-bild .spieler-buchstabe { font-size: calc(var(--sprecher-avatar-size, 64px) * .45); }
#screen-sprecher-bild .sprecher-name { width: max-content; max-width: 100%; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; line-height: 1.25; }

#screen-sprecher-bild .sprecher-wort { white-space: nowrap; }

/* Ein freier Studioplatz lädt Freunde ein; ⋯ bietet dieselben Aktionen auf Touchgeräten. */
:is(#lobby-players,#players) .studio-einladen { border: 1px dashed var(--stroke); display: flex; background: transparent; padding: 0; }
.studio-plus { width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.studio-plus > span { display: grid; place-items: center; border: 2px dashed var(--stroke); border-radius: 50%; width: 90px; height: 90px; font-size: 52px; color: var(--pink); }
.studio-plus:hover, .studio-plus:focus-visible { background: #f7158010; color: var(--text); }
.spieler-optionen { border: 1px solid var(--stroke); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; border-radius: 12px; padding: 0 12px; }
.studio-dialog { color: var(--text); background: var(--panel); border: 1px solid var(--stroke); border-radius: 8px; width: min(540px, calc(100vw - 24px)); max-height: 85dvh; overflow: auto; padding: 22px; }
.studio-dialog::backdrop { background: #000a; }
.studio-dialog > form { display: flex; justify-content: flex-end; }
.studio-dialog .freund-karte { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.studio-dialog .freund-info { flex: 1; min-width: 0; }

#cookie-hinweis { position: fixed; bottom: 14px; left: 14px; z-index: 150; width: min(470px, calc(100vw - 28px)); padding: 18px; background: var(--panel); border: 1px solid var(--pink); border-radius: 8px; box-shadow: 0 8px 40px #000b; font-size: 12px; }
#cookie-hinweis p { line-height: 1.6; margin: 10px 0; }
#cookie-hinweis > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.speicher-link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: inherit; cursor: pointer; }
#speicher-dialog p, #speicher-details p { overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }

.studio-person .spieler-optionen { position: absolute; top: 8px; left: 8px; z-index: 2; }

/* Stabile Videohöhe; der vollständige Sprechtext bekommt seine eigene natürliche Höhe. */
#view-recording #rec-frame { flex: none; width: 100%; height: auto; min-height: 0; max-height: none; display: grid; grid-template-rows: clamp(120px, 20vh, 240px) auto; gap: 8px; padding: 8px; }
#rec-frame .rec-media { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
#view-recording #rec-frame video, #view-recording #rec-frame img { width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
#view-recording #rec-frame .clip-line { width: 100%; max-width: 90ch; height: auto; min-height: 0; max-height: none; overflow: visible; overflow-wrap: anywhere; margin: 0 auto; }
#view-recording #rec-frame .zeile-de, #view-recording #rec-frame .zeile-en { max-height: none; overflow: visible; }
#screen-mixer #screen-sync { align-self: center; flex: 0 0 auto; min-height: 0; margin: 0 auto; order: 3; }
.pack-fertig, #pack-detail b.rolle-fertig { color: var(--green, #55df8a); }
.pack-fertig { display: inline-block; margin-left: 6px; font-size: 1.2em; }
.pack-fortschritt { color: var(--muted); font-size: 12px; }
.admin-panel-block { margin: 18px 0; padding: 18px; border: 1px solid var(--stroke); border-radius: 6px; }
.admin-meldung { padding: 16px; margin: 12px 0; background: var(--panel); border: 1px solid var(--stroke); }
.admin-meldung .meldung-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-meldung small { font-size: 12px; color: var(--muted); }
#admin-protokoll { max-height: 360px; overflow: auto; font-size: 12px; }
#studio-freunde-inhalt > .btn { margin: 6px 8px 12px 0; }

@media (min-width: 1100px) and (max-height: 900px) {
  #view-recording #rec-frame { height: auto; grid-template-rows: clamp(112px, 18vh, 160px) auto; }
  #view-recording .wave { height: 44px; }
  #view-recording #rec-score { padding: 5px 10px; }
  #view-recording .score-kopf { margin-bottom: 2px; }
  #view-recording .score-zeile { margin-top: 2px; font-size: 12px; line-height: 16px; }
  #view-recording .score-gesamt { font-size: 24px; }
}

.admin-view .klapp { max-width: none; width: 100%; }
.admin-meldung textarea, #spieler-melden-form textarea { width: 100%; min-height: 80px; resize: vertical; }

.cbox-fortschritt { font-size: 12px; color: #fff; }
.cbox.rolle-fertig .cbox-name, .cbox.rolle-fertig .cbox-zahl, .cbox.rolle-fertig .cbox-fortschritt { color: var(--green, #55df8a); }
.cbox.rolle-fertig .cbox-zahl { background: #55df8a12; border-color: #55df8a60; }

/* Studio 0.1: Bereitschaft steht direkt bei den Aufnahmeoptionen. */
.studio-startzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-top: 20px; }
.studio-startzeile .studio-einstellungen { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; }
.studio-bereitschaft { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: 8px; max-width: 250px; }
.studio-bereitschaft .bereit-status { font-size: 12px; text-align: center; }
.rollen-countdown { font-size: 40px; color: var(--pink); line-height: 1; }
.profil-karte { width: min(880px, calc(100vw - 32px)); max-width: 880px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profil-karte .profil-kopf { grid-template-columns: 132px minmax(0, 1fr); grid-column: 1 / -1; padding: 12px 44px 20px 8px; align-items: center; }
.profil-karte .profil-bild-rahmen { width: 132px; height: 132px; }
.profil-karte .profil-abschnitt { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--stroke); border-radius: 12px; background: #ffffff02; }
.profil-karte .profil-abschnitt:has(#profil-rahmen-liste), .profil-karte .profil-abschnitt:has(#profil-freunde-liste) { grid-column: 1 / -1; }
.profil-karte .profil-statistik { margin-top: 9px; }
.profil-karte .profil-erfolge span { color: var(--green, #59dd93); }
.profil-karte .profil-rahmen-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 12px; }
.profil-karte .profil-rahmen-wahl { width: auto; height: auto; min-height: 100px; border-radius: 10px; padding: 14px 8px; flex-direction: column; gap: 12px; font: inherit; font-size: 12px; color: var(--text); }
.profil-karte .profil-rahmen-wahl.gewaehlt { background: #f5007810; border-color: var(--pink); }
.profil-karte .profil-rahmen-muster { width: 34px; height: 34px; flex: none; }
.profil-karte .profil-rahmen-wahl small { font-size: 10px; color: var(--muted); }
.profil-karte .profil-rahmen-kategorie { margin-top: 12px; }
/* Mehrschichtige exklusive Ringe; die Bildmitte bleibt unverändert. */
.rahmen-gold { outline: 1px solid #fff1b7; outline-offset: 5px; }
.rahmen-blitz { outline: 1px dashed #a7f4ff; outline-offset: 5px; animation: rahmen-blitz-sanft 4s ease-in-out infinite; }
.rahmen-regenbogen { outline: 1px solid #d7b2ff; outline-offset: 5px; }
@keyframes rahmen-blitz-sanft { 0%,100% { box-shadow: 0 0 0 3px #22e6ff, 0 0 14px #22e6ff77; } 50% { box-shadow: 0 0 0 3px #a7f4ff, 0 0 22px #22e6ff99; } }
.rec-warte-karten { position: absolute; inset: 0; padding: clamp(16px, 3vw, 36px); display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow: auto; background: var(--bg-2); text-align: center; z-index: 3; }
.rec-warte-karten h3 { margin: 0; } .rec-warte-karten p { color: var(--muted); }
.warte-sprecher { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; padding: 12px; }
.warte-sprecher-karte { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 180px; }
.warte-sprecher-karte strong { overflow-wrap: break-word; max-width: 100%; }
.warte-sprecher-karte > span:last-child { color: var(--muted); font-size: 13px; }
.rec-fertig .clip-line { display: none; }
.rec-fertig .rec-media { min-height: min(440px, 55vh); }
@media (max-width: 650px) {
  .studio-startzeile { grid-template-columns: minmax(0, 1fr); }
  .studio-bereitschaft { grid-column: 1; grid-row: 2; max-width: none; }
  .studio-bereitschaft .btn { width: 100%; }
  .profil-karte { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .profil-karte .profil-kopf { grid-template-columns: 112px minmax(0, 1fr); padding-right: 32px; gap: 20px; }
  .profil-karte .profil-bild-rahmen { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) { .rahmen-blitz { animation: none; } }
/* Ohne sichtbares Video hat eine automatisch breite Gridspalte keinen Inhalt.
   Die Warteansicht reserviert deshalb selbst Breite und Höhe für ihre Karten. */
#view-recording #rec-frame.rec-fertig {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: clamp(320px, 50vh, 560px);
}
.warte-sprecher-karte .spieler-bild {
  flex: none; font-size: 40px; color: var(--text); background: #151321;
  border: 2px solid var(--cyan); box-shadow: 0 0 22px #42ceff30;
}
.warte-sprecher-karte strong {
  padding: 5px 14px; border: 1px solid #42ceff70; border-radius: 999px; background: #0b101a;
}

/* Monatsangebot bleibt auch in schmalen Dialogen gut lesbar. */
.preis-bisher { color: var(--muted); font-weight: 400; white-space: nowrap; }
.preis-angebot { color: var(--gold); white-space: nowrap; }

/* Packauswahl: feste Informationsfolge und kompakte, klar getrennte Aktionen. */
.pack-filter-haupt { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(180px, 1fr) minmax(170px, 1fr); gap: 12px; }
.pack-filter-haupt > label { min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.pack-filter-haupt input, .pack-filter-haupt select { height: 44px; }
.pack-schnellfilter { gap: 8px; }
.pack-schnellfilter .toggle { padding: 8px 12px; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--panel); }
.pack-schnellfilter .toggle:has(:checked) { border-color: var(--pink); background: #ff2d7810; }
#pack-picker, #pack-picker .pack-gruppe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-content: start; }
#pack-picker .pack-gruppe { grid-column: 1 / -1; margin: 0; }
.pack-gruppe-titel { grid-column: 1 / -1; margin: 12px 0 0; }
#pack-picker .empty { grid-column: 1 / -1; }
.pack-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.pack-reihe:has(.chosen) { border-color: var(--pink); background: #ff2d780c; }
.pack-reihe .pack { grid-column: 1 / -1; align-items: flex-start; padding: 14px; border: 0; border-radius: 0; background: transparent; gap: 12px; }
.pack-reihe .pack:hover:not(:disabled) { transform: none; background: #ff2d7808; }
.pack-cover { width: 60px; height: 60px; }
.pack-cover-leer { display: grid; place-items: center; color: var(--muted); background: var(--panel-2); }
.pack-name { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.pack-text { gap: 6px; flex: 1; }
.pack-meta, .pack-autor { font-size: 12px; line-height: 1.5; color: var(--muted); }
.pack-sprachen { display: grid; gap: 3px; font-size: 12px; line-height: 1.5; padding-top: 6px; border-top: 1px solid var(--stroke); overflow-wrap: anywhere; }
.pack-reihe .reinhoeren { width: auto; min-height: 40px; padding: 6px 12px; margin: 0 0 12px 14px; justify-self: start; }
.pack-reihe .pack-bewerten { grid-column: 2; height: 40px; min-width: 54px; margin: 0 14px 12px; justify-self: end; }
.pack-reihe button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.pack-upload-feld { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px dashed var(--stroke-2); border-radius: var(--r); background: var(--panel); min-width: 0; }
.pack-upload-feld > label { font-weight: 700; }
.pack-upload-feld input[type="file"] { display: block; width: 100%; min-width: 0; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 0; padding: 0; }
.pack-upload-feld input[type="file"]::file-selector-button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--pink); border-radius: var(--r); padding: 11px 14px; margin-right: 12px; cursor: pointer; }
.pack-upload-feld input[type="file"]::file-selector-button:hover { background: #ff2d7822; }
.pack-upload-feld input[type="file"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
#pack-hochladen .klapp-inhalt { gap: 16px; }
.pack-verwaltung-titel { font-size: 14px; margin: 0; }
@media (max-width: 1100px) {
  .pack-filter-haupt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-filter-haupt .pack-suchfeld { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .pack-filter-haupt { grid-template-columns: minmax(0, 1fr); }
  .pack-cover { width: 44px; height: 44px; }
  .pack-reihe .pack { padding: 12px; gap: 10px; }
}

/* Spielerkarte: gemeinsame Hintergründe für Vorschau und Raum, ohne Bilddownloads. */
[data-kartenstil="nebel"] {
  --karten-hintergrund: radial-gradient(circle at 15% 18%, #dfc9ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 35%, #b7deff 0 1px, transparent 1.6px),
    radial-gradient(circle at 87% 9%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 0 15%, #8645b977, transparent 58%),
    radial-gradient(ellipse at 100% 38%, #a42a7566, transparent 60%), #100d20;
}
[data-kartenstil="polarlicht"] {
  --karten-hintergrund: linear-gradient(123deg, transparent 12%, #38d6bf44 25%, transparent 33%, #5b72df44 42%, transparent 56%),
    radial-gradient(ellipse at 80% 0, #168c8977, transparent 70%), #081b23;
}
[data-kartenstil="sonnenwind"] {
  --karten-hintergrund: repeating-radial-gradient(ellipse at 115% -10%, transparent 0 23px, #ffc45b28 24px 25px, transparent 26px 47px),
    radial-gradient(ellipse at 95% 0, #aa651b88, transparent 66%), #20130d;
}
[data-kartenstil="neon"] {
  --karten-hintergrund: linear-gradient(0deg, #100b22 4%, transparent 75%),
    repeating-linear-gradient(0deg, transparent 0 23px, #ef46992c 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 23px, #8562ec35 24px 25px),
    radial-gradient(ellipse at 50% 0, #75255677, transparent 70%), #120d24;
}
:is(#lobby-players,#players) .studio-person[data-kartenstil]:not([data-kartenstil=""]), .kartenstil-vorschau {
  background: var(--karten-hintergrund, var(--panel-2));
}
:is(#lobby-players,#players) .studio-person[data-kartenstil]:not([data-kartenstil=""]) .studio-status {
  background: #080b12d9; border-radius: 12px; padding: 3px 7px; color: #c9c6d5;
}
:is(#lobby-players,#players) .studio-person.ist-bereit[data-kartenstil] .studio-status { color: var(--green); }
.profil-karte .profil-kartenstile { grid-column: 1 / -1; }
.profil-kartenstil-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 12px; margin-top: 18px; }
.profil-kartenstil-wahl { display: flex; flex-direction: column; gap: 9px; align-items: stretch; min-width: 0; padding: 8px; border: 1px solid var(--stroke); border-radius: 12px; color: var(--text); background: var(--bg-2); font: inherit; text-align: left; cursor: pointer; }
.profil-kartenstil-wahl::before { content: none; }
.profil-kartenstil-wahl > strong { font-size: 12px; }
.profil-kartenstil-wahl > span:not(.kartenstil-vorschau) { font-size: 11px; line-height: 1.5; color: var(--muted); }
.profil-kartenstil-wahl > small { margin-top: auto; font-size: 10px; color: var(--muted); }
.profil-kartenstil-wahl[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.profil-kartenstil-wahl[aria-pressed="true"] > small { color: var(--pink); }
.profil-kartenstil-wahl:disabled { cursor: not-allowed; }
.profil-kartenstil-wahl:not(:disabled):hover { border-color: var(--cyan); }
.profil-kartenstil-wahl:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.kartenstil-vorschau { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 115px; border: 1px solid #ffffff15; border-radius: 8px; overflow: hidden; padding: 12px 5px; }
.kartenstil-vorschau-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; padding: 3px 6px; border-radius: 14px; background: #090b12ed; color: #fff; }
@media (max-width: 380px) { .profil-kartenstil-liste { grid-template-columns: minmax(0, 1fr); } }

/* Sternebewertungen getrennt von Packwahl und persönlichen Favoriten. */
.pack-sterne { grid-column: 1 / -1; border-top: 1px solid var(--stroke); min-width: 0; }
.pack-sterne summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; cursor: pointer; font-size: 12px; }
.pack-sterne summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.sterne-bild { font-size: 22px; letter-spacing: 2px; color: transparent; background: linear-gradient(90deg, var(--gold) var(--fuellung), var(--muted) var(--fuellung)); background-clip: text; }
.sterne-inhalt { padding: 0 14px 14px; display: grid; gap: 10px; }
.sterne-inhalt p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.sterne-verteilung { display: grid; gap: 5px; font-size: 12px; }
.sterne-verteilung > div { display: grid; grid-template-columns: 65px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.sterne-verteilung meter { width: 100%; height: 12px; accent-color: var(--gold); }
.sterne-verteilung meter::-webkit-meter-bar { background: var(--panel-2); border: 1px solid var(--stroke); }
.sterne-verteilung meter::-webkit-meter-optimum-value { background: var(--gold); }
.sterne-status { font-size: 12px; }
.sterne-wahl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; max-width: 228px; }
.sterne-wahl button { border: 1px solid var(--stroke); border-radius: var(--r); color: var(--muted); background: var(--panel-2); font: inherit; font-size: 27px; width: 100%; min-width: 0; height: 44px; cursor: pointer; padding: 0; }
.sterne-wahl button.gewaehlt, .sterne-wahl button:not(:disabled):hover, .sterne-wahl button:has(~ button:not(:disabled):hover) { color: var(--gold); }
.sterne-wahl button:disabled { opacity: .45; cursor: not-allowed; }

/* Verwaltung steht unter dem Studio, unabhängig von der Länge der Packliste. */
.lobby-links { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lobby-links > .panel { min-width: 0; }
#lobby-verwaltung #pack-hochladen { margin-top: 0; width: 100%; }
#lobby-verwaltung #btn-rescan { margin-top: 12px; }
.pack-warteschlange { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
.pack-warteschlange li { padding: 12px; border: 1px solid var(--stroke); border-radius: var(--r); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pack-warteschlange li > div { display: grid; gap: 5px; min-width: 0; flex: 1 1 160px; }
.pack-warteschlange strong { font-size: 13px; overflow-wrap: anywhere; }
.pack-warteschlange span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pack-warteschlange .pack-upload-fertig span { color: var(--green); }
.pack-warteschlange .pack-upload-fehler span { color: var(--pink); }
.pack-warteschlange .pack-upload-laeuft { border-color: var(--gold); }

/* Verwaltung mit getrennten Uploadwegen; gleiche Abstände in jeder Packkarte. */
@media (min-width: 1500px) {
  :is(#view-lobby,.studio-lobby) #lobby-inhalt { grid-template-columns: minmax(500px, 1fr) minmax(0, 1.3fr); }
}
#lobby-verwaltung { container-type: inline-size; }
.pack-verwaltung-aktionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 680px) { .pack-verwaltung-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-upload-feld h3 { margin: 0; font-size: 17px; }
.pack-upload-feld p { margin: 0; }
.pack-upload-feld .btn { align-self: end; white-space: normal; }
.pack-ersetzen-ziel { padding: 10px; border-left: 2px solid var(--cyan); background: var(--panel-2); font-size: 13px; overflow-wrap: anywhere; }
.pack-entfernen { border-top: 1px solid var(--stroke); padding-top: 16px; }
.pack-entfernen summary { color: var(--muted); cursor: pointer; }
.pack-entfernen .btn { white-space: normal; }
.pack-warteschlange:empty, #pack-einbau:empty { display: none; }
#pack-picker .pack-reihe { grid-template-rows: auto 52px auto; align-content: start; }
#pack-picker .pack-text { display: grid; grid-template-rows: 46.4px 36px 18px 79px; gap: 6px; min-width: 0; }
#pack-picker .pack-name { display: flex; align-items: flex-start; gap: 6px; }
#pack-picker .pack-name > :not(.pack-titel) { flex: none; }
#pack-picker .pack-titel { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#pack-picker .pack-autor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pack-picker .pack-sprachen { margin: 0; align-content: start; }
#pack-picker .reinhoeren { grid-row: 2; grid-column: 1; height: 40px; min-height: 40px; align-self: start; }
#pack-picker .pack-bewerten { grid-row: 2; align-self: start; }
#pack-picker .pack-sterne { grid-row: 3; align-self: start; }
#pack-picker .pack-sterne summary { min-height: 68px; box-sizing: border-box; }

.pack-warteschlange .pack-upload-pruefen, .pack-warteschlange .pack-upload-bestaetigung { border-color: var(--gold); }
.pack-warteschlange .pack-upload-bestaetigung > div > span { color: var(--text); }
.pack-sicherheitsfrage { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pack-sicherheitsfrage .btn { white-space: normal; }

/* Eigener Fortschritt zwischen Hörprobe und Favorit, ohne neue Kartenhöhe. */
#pack-picker .pack-reihe { grid-template-columns: auto minmax(0, 1fr) auto; container-type: inline-size; }
#pack-picker .pack-bewerten { grid-column: 3; margin-left: 4px; }
.pack-kurzfortschritt { grid-row: 2; grid-column: 2; align-self: start; min-width: 0; height: 40px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 3px; padding: 0 3px; font-size: 9px; line-height: 1.35; color: var(--muted); }
.pack-kurzfortschritt > span { white-space: nowrap; }
.pack-kurzfortschritt .hat-fertige-rollen { color: var(--green); }
@media (max-width: 380px) {
  #pack-picker .reinhoeren { margin-left: 8px; padding: 6px; font-size: 10px; }
  #pack-picker .pack-bewerten { margin-right: 8px; margin-left: 0; min-width: 34px; }
  .pack-kurzfortschritt { font-size: 9px; padding: 0 3px; }
}

#pack-detail b.rolle-angefangen,
.cbox.rolle-angefangen .cbox-name, .cbox.rolle-angefangen .cbox-zahl, .cbox.rolle-angefangen .cbox-fortschritt { color: #ffa347; }
.cbox.rolle-angefangen .cbox-zahl { background: #ffa34716; border-color: #ffa34780; }

@container (min-width: 380px) { .pack-kurzfortschritt { font-size: 11px; } }
@container (min-width: 520px) { .pack-kurzfortschritt { font-size: 12px; } }

/* Ein echter Download-Link bleibt auch bei blockiertem automatischem Download. */
.video-download-bereit { position: fixed; z-index: 1100; bottom: 16px; left: 16px; width: min(440px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 30px #0008; }
.video-download-bereit > button { float: right; margin-left: 8px; }
.video-download-bereit p { margin: 0 0 12px; font-size: 13px; }
.video-download-bereit small { display: block; margin-top: 10px; color: var(--muted); }
.screen-viewport { position: relative; }
.screen-wiedergabe-hilfe { position: absolute; inset: 0; z-index: 5; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px; background: #090711e8; text-align: center; overflow-y: auto; }
.screen-wiedergabe-hilfe p { margin: 0; font-size: 13px; }

/* Nur Mobilgeräte: ruhige Dekoration, weniger GPU-Flächen; Status bleibt sichtbar. */
html.mobil-sparsam :is(.home-stern, .wordmark, .rahmen-gold, .rahmen-blitz, .rahmen-regenbogen, .term-blink),
html.mobil-sparsam .studio-avatar::before { animation: none !important; }
html.mobil-sparsam .home-stern { opacity: .3; transform: none; }
html.mobil-sparsam .studio-avatar::before { transform: none; filter: none; }
html.mobil-sparsam[data-design="weltraum"] body { background-attachment: scroll; }
html.mobil-sparsam .home-dialog::backdrop,
html.mobil-sparsam :is(.pause-schirm, .melde-huelle) { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.mobil-sparsam body:has(> #view-screening:not([hidden])) { overflow-y: auto; }
html.mobil-sparsam #screen-frame { flex: 1 0 220px; min-height: 220px; }
html.mobil-sparsam .screen-versatz em { display: none; }

/* Hochkant sprechen: Text wächst vollständig mit, Video bleibt eine kleine Vorschau. */
@media (orientation: portrait) {
  html.mobil-sparsam #view-recording .rec-haupt { gap: 12px; }
  html.mobil-sparsam #view-recording #rec-frame:not(.rec-fertig) { height: auto; min-height: 0; max-height: none; grid-template-rows: clamp(72px, 16dvh, 120px) auto; overflow: visible; }
  html.mobil-sparsam #view-recording #rec-frame:not(.rec-fertig) .clip-line { height: auto; max-height: none; overflow: visible; padding: 6px; text-align: left; overflow-wrap: anywhere; }
  html.mobil-sparsam #view-recording #rec-frame .zeile-de { font-size: calc(17px * var(--dub-textfaktor,1)); line-height: 1.5; }
  html.mobil-sparsam #view-recording #rec-frame .zeile-en { font-size: 14px; line-height: 1.5; }
  html.mobil-sparsam #view-recording .wave { height: 80px; }
}

/* Vorführung: das Bild behält den freien Platz, Hinweise schweben kurz darüber. */
#view-screening > header.bar { padding: 8px 14px 8px 64px; gap: 10px; flex-direction: row; align-items: center; }
#view-screening > header.bar h2 { font-size: 20px; }
#view-screening > header.bar::before { left: 14px; top: calc(50% - 4.5px); }
#film-ausgleich, #film-ausgleich-2 { position: fixed; z-index: 60; bottom: 55px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 16px; background: var(--panel-2); border-left: 3px solid var(--gold); font-size: 13px; pointer-events: none; }
#tomaten-buehne { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.tomaten-wurf { position: absolute; width: clamp(30px, 7vw, 80px); aspect-ratio: 1; }
.tomaten-frucht { display: block; font-size: clamp(30px, 7vw, 80px); line-height: 1; animation: tomate-fliegt .55s ease-out both; }
.tomaten-spritzer { position: absolute; inset: 0; background: #d82b24e8; border-radius: 33% 60% 29% 65%; box-shadow: -20px 8px 0 -14px #de342bd9, 19px -12px 0 -13px #de342bd9, 8px 25px 0 -15px #de342bd9; animation: tomate-platzt 1.25s .55s both; }
@keyframes tomate-fliegt { from { transform: translate(40vw, 45vh) rotate(-240deg) scale(.3); } 95% { opacity: 1; } to { transform: none; opacity: 0; } }
@keyframes tomate-platzt { from { transform: scale(.1); opacity: 0; } 12%, 65% { transform: scale(1); opacity: .85; } to { transform: scale(1.1); opacity: 0; } }
html.mobil-sparsam .tomaten-frucht { display: none; }
html.mobil-sparsam .tomaten-spritzer { animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .tomaten-frucht { display: none; } .tomaten-spritzer { animation: none; opacity: .7; } }
.chat-form { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.chat-form input { grid-column: 1 / -1; grid-row: 1; width: 100%; }
.chat-form button[type="submit"] { justify-self: end; }

/* Persönliche Einstellungen bleiben innerhalb der laufenden Sitzung. */
.einstellungen-dialog { width: min(1000px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--stroke); border-radius: 18px; background: var(--panel); color: var(--text); }
.einstellungen-dialog[open] { display: flex; flex-direction: column; }
.einstellungen-dialog::backdrop { background: #05040ad9; }
.einstellungen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--stroke); }
.einstellungen-kopf h2 { margin: 0; font-size: 24px; }
.einstellungen-kopf p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.einstellungen-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1; min-height: 0; }
.einstellungen-layout nav { display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; border-right: 1px solid var(--stroke); overflow: auto; }
.einstellungen-layout nav button { padding: 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.einstellungen-layout nav button[aria-current], .einstellungen-layout nav button:hover { color: var(--text); background: #f6098020; border-color: var(--pink); }
.einstellungen-inhalt { padding: 24px 30px; overflow-y: auto; min-width: 0; }
.einstellungen-inhalt h3 { font-size: 22px; margin: 0 0 12px; }
.einstellungen-inhalt h4 { margin: 24px 0 12px; }
.einstellungen-inhalt .regler { display: block; margin: 24px 0; }
.einstellungen-inhalt .regler span { display: flex; justify-content: space-between; gap: 12px; }
.einstellungen-inhalt .regler b { white-space: nowrap; color: var(--gold); }
.einstellungen-inhalt input[type="range"] { width: 100%; }
.einstellungen-inhalt .toggle { margin: 20px 0; }
.einstellungen-inhalt .field { margin: 20px 0; }
.einstellungen-links { display: grid; gap: 12px; justify-items: start; }
.einstellungen-links .hinweis { margin: 0 0 14px; }
.einstellungen-fuss { padding: 14px 28px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--stroke); }
@media (max-width: 650px) {
  .einstellungen-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .einstellungen-kopf { padding: 16px; }.einstellungen-kopf h2 { font-size: 20px; }
  .einstellungen-layout { display: flex; flex-direction: column; }
  .einstellungen-layout nav { flex: none; flex-direction: row; padding: 10px; border-right: 0; border-bottom: 1px solid var(--stroke); }
  .einstellungen-layout nav button { white-space: nowrap; font-size: 12px; padding: 10px; }
  .einstellungen-inhalt { padding: 20px 16px; }.einstellungen-fuss { padding: 12px 16px; }
}

/* ---------------------------------------------------------------------------
   Spielerprofile (09.09.2026): Rang, Bio, Abzeichen mit Vitrine, Chronik,
   fremdes Profil, Rangliste und Suche. Haengt am Profil-Fenster-Muster.
   --------------------------------------------------------------------------- */
.profil-karte .profil-abschnitt.profil-breit { grid-column: 1 / -1; }
.profil-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }

.profil-rang { display: grid; grid-template-columns: auto minmax(60px, 1fr); gap: 4px 10px; align-items: center; margin-top: 8px; max-width: 360px; }
.rang-titel { font-weight: 700; color: var(--gold); font-size: .95rem; letter-spacing: .02em; }
.rang-balken { display: block; height: 7px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--stroke); overflow: hidden; }
.rang-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .4s; }
.rang-naechster { grid-column: 1 / -1; font-size: .74rem; color: var(--muted); }

.profil-bio-form { display: flex; flex-direction: column; gap: 6px; }
.profil-bio { width: 100%; resize: vertical; min-height: 64px; font: inherit; line-height: 1.45; }
.profil-bio-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spieler-bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: .95rem; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 8px; background: #ffffff05; }
.spieler-bio[hidden] { display: none; }

/* Abzeichen-Kacheln: erhalten leuchtet, fehlend bleibt als Umriss sichtbar. */
.abzeichen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.abzeichen {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 10px 8px; border: 1px solid var(--stroke); border-radius: 10px; background: #ffffff04;
  color: var(--text); font: inherit; cursor: default; position: relative; min-width: 0;
}
button.abzeichen { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
button.abzeichen:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
button.abzeichen:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.abzeichen-symbol { font-size: 1.7rem; line-height: 1.1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.abzeichen-name { font-weight: 700; font-size: .78rem; overflow-wrap: anywhere; }
.abzeichen-text { font-size: .68rem; color: var(--muted); line-height: 1.3; }
.abzeichen.fehlt { opacity: .38; filter: grayscale(1); }
.abzeichen.fehlt .abzeichen-symbol { filter: none; }
.abzeichen.erhalten.stufe-bronze { border-color: #b8743a88; box-shadow: inset 0 0 0 1px #b8743a33; }
.abzeichen.erhalten.stufe-silber { border-color: #c8d0d8aa; box-shadow: inset 0 0 0 1px #c8d0d833; }
.abzeichen.erhalten.stufe-gold { border-color: var(--gold); box-shadow: inset 0 0 0 1px #ffc83d33, 0 0 14px #ffc83d22; }
.abzeichen.erhalten.stufe-legendaer { border-color: var(--violet); box-shadow: inset 0 0 0 1px #a855f744, 0 0 16px #a855f733; background: linear-gradient(160deg, #a855f712, #ff2d7810); }
.abzeichen.ausgestellt::after { content: '★'; position: absolute; top: 5px; right: 7px; font-size: .7rem; color: var(--gold); }
.abzeichen.gross { padding: 14px 10px; }
.abzeichen.gross .abzeichen-symbol { font-size: 2.3rem; }

.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.vitrine .vitrine-leer { grid-column: 1 / -1; }
.vitrine .abzeichen.ausgestellt::after { content: none; }

.chronik { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 320px; overflow-y: auto; }
.chronik-eintrag { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-left: 3px solid var(--stroke); background: #ffffff04; border-radius: 0 8px 8px 0; font-size: .85rem; }
.chronik-eintrag.chronik-pack { border-left-color: var(--gold); }
.chronik-eintrag.chronik-rolle { border-left-color: var(--cyan); }
.chronik-eintrag.chronik-rang { border-left-color: var(--pink); }
.chronik-eintrag.chronik-abzeichen { border-left-color: var(--violet); }
.chronik-symbol { font-size: 1.15rem; text-align: center; }
.chronik-text { overflow-wrap: anywhere; }
.chronik-zeit { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* Fremdes Profil: eine Spalte, aber breit genug fuer die Vitrine. */
.spieler-karte { width: min(640px, 100%); max-height: 90dvh; overflow-y: auto; }
.spieler-kopf { grid-template-columns: 112px minmax(0, 1fr); }
.spieler-kopf .profil-bild-rahmen { width: 112px; height: 112px; }
.spieler-kopf .profil-bild-rahmen .spieler-bild { width: 100% !important; height: 100% !important; }
.spieler-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badge.freund { background: #2be08a22; color: var(--green); border-color: #2be08a55; }
.badge.privat { background: #8a809022; color: var(--muted); border-color: #8a809055; }
.badge.haken { background: #22e6ff22; color: var(--cyan); border-color: #22e6ff55; }
.statistik-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.statistik-feld { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: #ffffff04; }
.statistik-feld b { font-size: 1.3rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.statistik-feld span { font-size: .72rem; color: var(--muted); }

/* Rangliste und Suche */
.suche-karte { width: min(560px, 100%); max-height: 90dvh; }
.suche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.suche-karte #spieler-suche { width: 100%; }
.rangliste-reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.rangliste-reiter[hidden] { display: none; }
.rangliste-reiter .btn[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }
.spieler-liste { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 120px; }
.spieler-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--stroke); border-radius: 8px; background: #ffffff04;
  color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.spieler-zeile:hover { border-color: var(--stroke-2); background: #ffffff08; }
.spieler-zeile.ist-ich { border-color: var(--gold); }
.spieler-zeile .freund-avatar::after { content: none; }
.spieler-zeile .freund-info span { font-size: .74rem; color: var(--muted); }
.spieler-zeile small { font-weight: 400; color: var(--muted); }
.spieler-platz { flex: none; width: 30px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.spieler-platz.platz-1 { color: var(--gold); } .spieler-platz.platz-2 { color: #c8d0d8; } .spieler-platz.platz-3 { color: #b8743a; }
.spieler-wert { flex: none; font-variant-numeric: tabular-nums; color: var(--gold); }

@media (max-width: 640px) {
  .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .abzeichen.gross .abzeichen-symbol { font-size: 1.8rem; }
  .abzeichen-text { display: none; }
  .spieler-kopf { grid-template-columns: 84px minmax(0, 1fr); }
  .spieler-kopf .profil-bild-rahmen { width: 84px; height: 84px; }
  .profil-rang { max-width: none; }
  .chronik-eintrag { grid-template-columns: 24px minmax(0, 1fr); }
  .chronik-zeit { grid-column: 2; }
}
/* Ein Spielerprofil oeffnet sich AUS der Rangliste/Suche oder dem eigenen
   Profil heraus -- es muss also ueber beiden liegen, sonst faengt das
   darunterliegende Fenster die Klicks ab. */
#spieler-suche-fenster { z-index: 61; }
#spieler-fenster { z-index: 62; }
.abzeichen-name { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 640px) { .abzeichen-name { font-size: .72rem; } }
/* Abzeichennamen wie "Synchronlegende" brauchen Platz -- lieber eine Kachel
   weniger je Reihe als ein Wort mittendrin gebrochen. */
.abzeichen-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.abzeichen-name { font-size: .74rem; }

/* Aufnahme gegen das Original verschieben (unter der Aufnahme-Wellenform).
   Der Streifen ist zugeklappt, bis man "Verschieben" drueckt (oder von Hand
   verschoben hat) -- sonst waere die Aufnahmeansicht auf kleinen Bildschirmen
   um eine Zeile zu hoch, und der Download-Knopf rutschte aus dem Bild. */
.wave-anpassen { margin-left: 8px; height: 20px; min-height: 0; padding: 0 8px; line-height: 18px; font-size: 11px; }
.wave-anpassen[aria-expanded="true"] { border-color: var(--welle-eigene, #3d8ef7); color: var(--welle-eigene, #3d8ef7); }
.wave-verschieben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.wave-verschieben[hidden] { display: none; }
.wave-verschieben input[type=range] { flex: 1 1 140px; min-width: 120px; accent-color: var(--welle-eigene, #3d8ef7); }
.wave-verschiebung-text { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wave.verschiebbar { cursor: ew-resize; }

/* Rein optische Ergänzungen für das alternative Design. */
.ui-nur-weltraum, .ui-seitenmarke { display:none; }
.ui-spenden-karte { display:contents; }

/* FSK18-Kennzeichnung auf Pack-Kacheln -- rot/auffaellig, damit man es vor
   dem Waehlen sieht, nicht erst danach. */
.pack-fsk18 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 4px; border-radius: 4px;
  background: #b3261e; color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .02em; line-height: 1;
}

/* Persönliche Bewegungsstufe gilt auf allen Seiten. */
html[data-animationen="aus"] *,html[data-animationen="aus"] *::before,html[data-animationen="aus"] *::after { animation:none!important; transition:none!important; view-transition-name:none!important; }
html[data-animationen="aus"]::view-transition-group(*),html[data-animationen="aus"]::view-transition-old(*),html[data-animationen="aus"]::view-transition-new(*) { animation:none!important; }
html[data-animationen="dezent"] :is([data-rahmen],[data-kartenstil]),html[data-animationen="dezent"] :is([data-rahmen],[data-kartenstil])::before,html[data-animationen="dezent"] :is([data-rahmen],[data-kartenstil])::after { animation:none!important; }
html[data-animationen="dezent"] .view { animation-duration:.15s!important; }

#screen-video-details { width: min(100%, 640px); min-width: 0; font-size: 12px; }
#screen-video-details summary { cursor: pointer; }
#screen-video-details pre { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.screen-wiedergabe-hilfe { align-content: safe center; }
.screen-wiedergabe-hilfe:has(#screen-video-details[open]) { align-content: start; }

/* Paketnachladen: derselbe echte Arbeitsstand für alle im Raum. */
#pack-laden.pack-ladestatus { padding:16px 20px; margin:0 0 16px; border:1px solid var(--accent,#ff0099); border-radius:12px; background:#130d20; color:var(--text,#eee); overflow-wrap:anywhere; }
#pack-laden .pack-ladekopf { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
#pack-laden .pack-ladekopf b { color:var(--accent,#ff0099); }
#pack-laden p { margin:8px 0; }
#pack-laden progress { display:block; width:100%; height:12px; margin:10px 0; accent-color:var(--accent,#ff0099); }
#pack-laden small,#pack-laden > span { color:var(--muted,#aaa); }
#pack-laden.fehler { border-color:#ffba69; }
#pack-laden[hidden] { display:none; }

/* Gemeinsame Sprechzeitübersicht für beide Paketquellen. */
.studio-sprechzeiten { display:flex; flex-wrap:wrap; gap:8px 20px; padding:16px 0; }
.studio-sprechzeiten h3,.studio-sprechzeiten small { flex-basis:100%; }
.studio-sprechzeiten p { margin:0; }