/* scenes.css – Core Experience Recovery 02 (2026-10-02): jede Map ist jetzt EINE handgebaute Illustration (scenes/<map>.svg,
   erzeugt von tools/build_scenes.mjs) statt vieler CSS-Kaesten. Die Illustration liegt als .scenebg in der festen 16:9-Buehne
   (.world) ganz hinten; darauf liegen unveraendert Screen, Pult, Warteliste, Votes, Sitz-Klickflaechen und die Figuren.
   Die frueheren Deko-Ebenen (map.css / map-variants.css / .mapobj-Kunst aus hotspots.css) bleiben als Code bestehen,
   werden aber nicht mehr angezeigt. Map-ID -> Szene: rooftop = BarselVibe Club, lounge = Rooftop After Dark. */

.scenebg { position: absolute; left: 0; top: 0; width: 100em; height: 56.25em; background: no-repeat center / 100% 100%; pointer-events: none; z-index: 0; display: none; }
#scene[data-map="rooftop"] .scenebg { display: block; background-image: url(../scenes/club.svg); }
#scene[data-map="lounge"]  .scenebg { display: block; background-image: url(../scenes/rooftop.svg); }
#scene[data-map="comedy"]  .scenebg { display: block; background-image: url(../scenes/comedy.svg); }
#scene[data-map="cinema"]  .scenebg { display: block; background-image: url(../scenes/cinema.svg); }
#scene[data-map="arcade"]  .scenebg { display: block; background-image: url(../scenes/arcade.svg); }

/* alte Deko-Ebenen aus */
#scene .backdrop > #stars, #scene .backdrop > .moon, #scene .backdrop > .glow, #scene .backdrop > .skyline, #scene .backdrop > .rail, #scene .backdrop > .ground,
#scene .backdrop > .mapv, #scene .world > .deckline, #scene .world > .fx, #scene .world > .mapv { display: none !important; }
/* Moebel-Kunst (CSS-Kaesten) aus -- die Kulisse zeigt die Moebel; es bleiben nur die Klickflaechen (.seatzone) */
#mapObjects .mapobj { display: none !important; }
/* Garderoben-Objekt: bleibt im Datenmodell (js/map-objects.js), wird aber auf KEINER Map mehr gezeigt */
.wardrobezone { display: none !important; }

/* Hintergrund ausserhalb der 16:9-Buehne: Farbe der Kulisse fortsetzen (oben Decke/Himmel, unten Boden) */
#scene[data-map="rooftop"] .backdrop { background: linear-gradient(#05031a 0, #05031a 45%, #080418 100%); }
#scene[data-map="lounge"]  .backdrop { background: linear-gradient(#050826 0, #050826 45%, #0f0a1c 100%); }
#scene[data-map="comedy"]  .backdrop { background: linear-gradient(#150609 0, #150609 45%, #0d0508 100%); }
#scene[data-map="cinema"]  .backdrop { background: linear-gradient(#07050c 0, #07050c 45%, #0b0710 100%); }
#scene[data-map="arcade"]  .backdrop { background: linear-gradient(#0a0626 0, #0a0626 45%, #0a0520 100%); }

/* Screen-Geometrie je Map (nur Desktop/Querformat; die schmale Hochformat-Regel in scene.css bleibt unangetastet) */
@container (min-width: 701px) and (min-aspect-ratio: 1/1) {
  #scene[data-map="rooftop"] .screen { left: 31em; top: 3.6em; width: 38em; height: 21.4em; border: .3em solid #ff5fb8; box-shadow: 0 0 0 .25em #0a0526, 0 0 3.2em .6em #ff2fa055; }
}

/* Dance-Einstieg ist ausgeblendet (js/app.js FEATURE_DANCE) -- das display:inline-flex von #danceToggle wuerde sonst [hidden] schlagen */
#danceToggle[hidden], #dancePanel { display: none !important; }
@container (min-width: 701px) and (min-aspect-ratio: 1/1) {
  #scene[data-map="lounge"] .screen { left: 31em; top: 3.6em; width: 38em; height: 21.4em; border: .3em solid #2a1a22; box-shadow: 0 0 0 .2em #5a3a40, 0 0 3em .5em #ffb27a44; }
}
@container (min-width: 701px) and (min-aspect-ratio: 1/1) {
  #scene[data-map="comedy"] .screen { left: 33em; top: 3.2em; width: 34em; height: 19.2em; border: .3em solid #d9a441; box-shadow: 0 0 0 .2em #3a1d12, 0 0 3em .5em #ffb34755; }
}
@container (min-width: 701px) and (min-aspect-ratio: 1/1) {
  #scene[data-map="cinema"] .screen { left: 29em; top: 1.9em; width: 42em; height: 23.6em; border: .2em solid #000; box-shadow: 0 0 0 .2em #05030a, 0 0 4em 1em #8ab4ff33; }
}
@container (min-width: 701px) and (min-aspect-ratio: 1/1) {
  #scene[data-map="arcade"] .screen { left: 31em; top: 2.4em; width: 38em; height: 21.4em; border: .25em solid #05020f; box-shadow: 0 0 2.6em .5em #2be8ff55; }
}

/* ---------- DJ-Pult: pro Map ein gezeichnetes Pult (scenes/booth-*.svg, 24em x 5em) ---------- */
#scene .booth { background-color: transparent !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#scene .booth::before, #scene .booth::after { display: none !important; }
#scene[data-map="rooftop"] .booth { background-image: url(../scenes/booth-club.svg) !important; }
#scene[data-map="lounge"]  .booth { background-image: url(../scenes/booth-rooftop.svg) !important; }
#scene[data-map="comedy"]  .booth { background-image: url(../scenes/booth-comedy.svg) !important; }
#scene[data-map="cinema"]  .booth { background-image: url(../scenes/booth-cinema.svg) !important; }
#scene[data-map="arcade"]  .booth { background-image: url(../scenes/booth-arcade.svg) !important; }

/* ---------- Warteliste + Votes: dunkle Glas-Leisten in der Akzentfarbe der Map ---------- */
#scene[data-map="rooftop"] { --acc: #ff5fb8; }
#scene[data-map="lounge"]  { --acc: #ffb27a; }
#scene[data-map="comedy"]  { --acc: #f0c566; }
#scene[data-map="cinema"]  { --acc: #ffb347; }
#scene[data-map="arcade"]  { --acc: #2be8ff; }
#scene .queue, #scene .votes { border: .12em solid var(--acc, #ff5fb8); border-radius: .9em; overflow: hidden; box-shadow: 0 0 1.2em color-mix(in srgb, var(--acc, #ff5fb8) 38%, transparent), 0 .3em .8em #0009; }
#scene .queue { background: linear-gradient(#0f0b24f2, #07050ff2); }
#scene .queue span { background: #1b1638; }

/* ============================================================================
   DJ-Spektakel (js/djfx.js): EINE Ebene je Effekt ueber der ganzen Buehne, unter dem Video-Screen (z 40).
   ========================================================================== */
.fxs { position: absolute; inset: 0; pointer-events: none; z-index: 36; overflow: hidden; }
.fxs i, .fxs-dim, .fxs-wash { position: absolute; display: block; pointer-events: none; }
.fxs-dim { inset: 0; background: radial-gradient(95% 95% at 50% 55%, #06031655, #02010aee); }
.fxs-wash { inset: 0; mix-blend-mode: screen; }
.fxs-piece { left: 0; top: 0; will-change: transform; }
.fxs-piece-in { perspective: 40em; transform-style: preserve-3d; box-shadow: 0 0 .25em #ffffff44; }
.fxs-pop { width: 8em; height: 8em; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd23f 38%, #ff2fa000 70%); }
.fxs-haze { left: 0; right: 0; bottom: 0; height: 34em; background: linear-gradient(to top, #ffffff55, #ffffff00); mix-blend-mode: screen; }
.fxs-blob { border-radius: 50%; filter: blur(.7em); mix-blend-mode: screen; }
.fxs-beam { width: 1.15em; mix-blend-mode: screen; }
.fxs-cone { top: -2%; width: 27em; height: 68em; transform-origin: 50% 0; clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
.fxs-spot { left: 50%; bottom: 4.5em; width: 28em; height: 10em; border-radius: 50%; background: radial-gradient(closest-side, #fff6d0cc, #ffe9b055 60%, transparent); mix-blend-mode: screen; }
.fxs-pool { bottom: 3em; width: 24em; height: 9em; border-radius: 50%; transform: translateX(-50%); mix-blend-mode: screen; }
.fxs-star { mix-blend-mode: screen;
  background: radial-gradient(circle, currentColor 0 9%, color-mix(in srgb, currentColor 30%, transparent) 26%, transparent 52%),
              linear-gradient(90deg, transparent 47%, currentColor 50%, transparent 53%), linear-gradient(0deg, transparent 47%, currentColor 50%, transparent 53%); }

/* ---------- Lobby: Raum-Karten zeigen die Kulisse der Map als Titelbild ---------- */
.card .cover { height: 112px; background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 22%, transparent) 0, #0b0b12d0 100%), var(--scene, none) center 64% / cover no-repeat, linear-gradient(135deg, var(--g1), var(--g2)); }
.card.lively .cover { height: 164px; }
.card.quiet .cover { height: 104px; }
.card.quiet { opacity: .9; }
.card .cover[data-map="rooftop"] { --scene: url(../scenes/club.svg); }
.card .cover[data-map="lounge"]  { --scene: url(../scenes/rooftop.svg); }
.card .cover[data-map="comedy"]  { --scene: url(../scenes/comedy.svg); }
.card .cover[data-map="cinema"]  { --scene: url(../scenes/cinema.svg); }
.card .cover[data-map="arcade"]  { --scene: url(../scenes/arcade.svg); }
.card .cover .chip.map { background: #0b0b12cc; border: 1px solid #ffffff44; font-weight: 700; }
.card .meta .join { background: var(--accent); color: #fff; padding: 5px 13px; border-radius: 20px; font-weight: 700; margin-left: auto; box-shadow: 0 2px 10px #7c5cff55; }
.card:hover .meta .join { filter: brightness(1.15); }
.card.full .meta .join { background: #3a3a55; box-shadow: none; }
.card h3 { font-size: 16px; }

/* Toast mit Knoepfen (z. B. Bewegungs-Hinweis): Container ist pointer-events:none, dieser Toast nimmt Klicks an */
.toast.act { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: min(560px, 92vw); line-height: 1.4; }
.toast.act .btn { padding: 5px 12px; font-size: 12px; }

/* ============================================================================
   DJ-Rolle (R08): der aktive DJ hat einen Scheinwerfer-Schein, groovt eigenstaendig (nickt, scratcht, wippt) solange ein Track
   laeuft, und das Pult lebt (Plattenteller-Glanz, pulsierendes Leuchten). Respektiert "Bewegung reduzieren" wie alle Figuren-Animationen.
   ========================================================================== */
#dj.av::before { content: ""; position: absolute; left: 50%; bottom: -1em; width: 24em; height: 26em; mix-blend-mode: screen; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc, #ff5fb8) 50%, #fff) 0, color-mix(in srgb, var(--acc, #ff5fb8) 75%, transparent) 38%, transparent 78%); }
body.playing #dj.av::before { opacity: .8; animation: djglow 1.15s ease-in-out infinite alternate; }
@keyframes djglow { from { opacity: .5; transform: translateX(-50%) scale(.95); } to { opacity: .95; transform: translateX(-50%) scale(1.07); } }
body.playing #dj .cv .p-body { animation: dj-body 1.05s ease-in-out infinite; }
body.playing #dj .cv .p-head { animation: dj-head 1.05s ease-in-out infinite; }
body.playing #dj .cv .p-arml { animation: dj-arml 2.1s ease-in-out infinite; }
body.playing #dj .cv .p-armr { animation: dj-armr .525s ease-in-out infinite alternate; }
@keyframes dj-body { 0%, 100% { transform: translateY(0) rotate(-1.6deg) scale(1.02, .98); } 50% { transform: translateY(-4px) rotate(1.6deg) scale(.99, 1.02); } }
@keyframes dj-head { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(5deg) translateY(2px); } }
@keyframes dj-arml { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(52deg); } }
@keyframes dj-armr { from { transform: rotate(-30deg); } to { transform: rotate(-66deg); } }

/* Pult: Plattenteller-Glanz (rotierender Kegelverlauf, flachgedrueckt wie die gezeichneten Teller) + Leuchten */
#scene .booth::before, #scene .booth::after { display: none !important; }
#scene .booth { position: absolute; }
body.playing #scene .booth { animation: boothpulse 1.05s ease-in-out infinite alternate; }
@keyframes boothpulse { from { filter: drop-shadow(0 0 .3em color-mix(in srgb, var(--acc, #ff5fb8) 40%, transparent)); } to { filter: drop-shadow(0 0 1.1em color-mix(in srgb, var(--acc, #ff5fb8) 80%, transparent)); } }
body.playing #scene .booth::before, body.playing #scene .booth::after { display: block !important; content: ""; position: absolute; top: 17%; width: 21.5%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 38%, #ffffff66 46%, transparent 54% 88%, #ffffff3a 94%, transparent); animation: platter 1.8s linear infinite; }
body.playing #scene .booth::before { left: 9.3%; transform: translateY(-50%) scaleY(.245) rotate(0deg); }
body.playing #scene .booth::after  { right: 9.3%; transform: translateY(-50%) scaleY(.245) rotate(0deg); animation-direction: reverse; }
@keyframes platter { to { transform: translateY(-50%) scaleY(.245) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion=full]) #dj.av::before, html:not([data-motion=full]) #scene .booth, html:not([data-motion=full]) #scene .booth::before, html:not([data-motion=full]) #scene .booth::after { animation: none !important; } }

/* ---------- Raum-Deko (Plant/Poster/Licht): groesser + auf die neuen Kulissen abgestimmte Steckplaetze ---------- */
.decor { width: 5.4em; height: 5.4em; z-index: 5; }
#scene[data-map="rooftop"] #decorPlant { left: 13.5em; bottom: 8em; }
#scene[data-map="rooftop"] #decorPoster { left: 7.6em; top: 13.4em; }
#scene[data-map="rooftop"] #decorLight { right: 6.8em; left: auto; top: 3.4em; }
#scene[data-map="lounge"] #decorPlant { left: 20.5em; bottom: 13em; }
#scene[data-map="lounge"] #decorPoster { left: 26.4em; top: 3.2em; }
#scene[data-map="lounge"] #decorLight { right: 26.4em; left: auto; top: 3.2em; }
#scene[data-map="comedy"] #decorPlant { left: 23.5em; bottom: 11em; }
#scene[data-map="comedy"] #decorPoster { left: 12.6em; top: 23.2em; }
#scene[data-map="comedy"] #decorLight { right: 11.2em; left: auto; top: -.6em; }
#scene[data-map="cinema"] #decorPlant { left: 23.5em; bottom: 24.5em; }
#scene[data-map="cinema"] #decorPoster { left: 2.4em; top: 22em; }
#scene[data-map="cinema"] #decorLight { right: 3.6em; left: auto; top: -.2em; }
#scene[data-map="arcade"] #decorPlant { left: 25.8em; bottom: 9em; }
#scene[data-map="arcade"] #decorPoster { left: 24em; top: 3em; }
#scene[data-map="arcade"] #decorLight { right: 24em; left: auto; top: 3em; }

/* ---------- Ambient-Leben der Kulissen (ruhig, nur Deckkraft/Verschiebung; "Bewegung reduzieren" schaltet es aus) ---------- */
.scenebg::before, .scenebg::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
#scene[data-map="rooftop"] .scenebg::before { background: linear-gradient(105deg, transparent 36%, #ff5fb82e 47%, #2be8ff29 53%, transparent 64%) 0 0 / 230% 100% no-repeat; animation: ambsweep 11s linear infinite; }
#scene[data-map="rooftop"] .scenebg::after  { background: radial-gradient(60% 40% at 50% 64%, #ff2fa022, transparent 70%); animation: ambpulse 1.9s ease-in-out infinite alternate; }
#scene[data-map="lounge"]  .scenebg::before { background: radial-gradient(circle at 8% 10%, #fff 0 .12em, transparent .2em), radial-gradient(circle at 22% 22%, #fff 0 .1em, transparent .18em), radial-gradient(circle at 37% 8%, #fff 0 .12em, transparent .2em), radial-gradient(circle at 63% 12%, #fff 0 .1em, transparent .18em), radial-gradient(circle at 78% 6%, #fff 0 .12em, transparent .2em), radial-gradient(circle at 91% 24%, #fff 0 .1em, transparent .18em), radial-gradient(circle at 14% 36%, #ffe9b0 0 .12em, transparent .2em), radial-gradient(circle at 86% 40%, #ffe9b0 0 .12em, transparent .2em); animation: ambtwinkle 3.2s ease-in-out infinite alternate; }
#scene[data-map="lounge"]  .scenebg::after  { background: radial-gradient(30% 22% at 50% 14%, #ffd98a33, transparent 70%), radial-gradient(18% 14% at 11% 72%, #ffb27a33, transparent 70%), radial-gradient(18% 14% at 89% 72%, #ffb27a33, transparent 70%); animation: ambpulse 4.6s ease-in-out infinite alternate; }
#scene[data-map="comedy"]  .scenebg::before { background: radial-gradient(34% 40% at 50% 60%, #ffcf7040, transparent 72%); animation: ambpulse 5.2s ease-in-out infinite alternate; }
#scene[data-map="comedy"]  .scenebg::after  { background: radial-gradient(7% 9% at 13% 24%, #ff3d7a55, transparent 70%), radial-gradient(7% 9% at 83% 18%, #ffb34755, transparent 70%); animation: ambflicker 2.7s steps(1) infinite; }
#scene[data-map="cinema"]  .scenebg::before { background: radial-gradient(46% 38% at 50% 30%, #9ec4ff33, transparent 72%); animation: ambflicker 3.9s ease-in-out infinite alternate; }
#scene[data-map="cinema"]  .scenebg::after  { background: radial-gradient(30% 18% at 50% 62%, #ffb34724, transparent 72%); animation: ambpulse 6s ease-in-out infinite alternate; }
#scene[data-map="arcade"]  .scenebg::before { background: linear-gradient(90deg, #ff2fb02e, #2be8ff2e, #ffd23f26, #7bff6a26, #ff2fb02e) 0 0 / 300% 100% no-repeat; animation: ambshift 8s linear infinite; }
#scene[data-map="arcade"]  .scenebg::after  { background: radial-gradient(10% 12% at 18% 22%, #2be8ff66, transparent 70%), radial-gradient(10% 12% at 82% 22%, #ff2fb066, transparent 70%); animation: ambflicker 1.7s steps(1) infinite; }
@keyframes ambsweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes ambshift { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes ambpulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes ambtwinkle { from { opacity: .25; } to { opacity: .95; } }
@keyframes ambflicker { 0% { opacity: .95; } 12% { opacity: .55; } 30% { opacity: 1; } 55% { opacity: .7; } 78% { opacity: 1; } 100% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion=full]) .scenebg::before, html:not([data-motion=full]) .scenebg::after { animation: none !important; } }

/* Sitz-Klickflaeche: die Moebel sind gezeichnet, die unsichtbare Flaeche deckt die Sitzflaeche ab (Hover zeigt sie dezent) */
.seatzone { width: 7em; height: 4.6em; border-radius: 1.6em; }

/* DJ-Faehigkeiten: Stufen-Punkte (1-3) am Knopf = Wucht des Raum-Moments (js/dj-effects.js tier) */
.djfxbar button { position: relative; }
.djfxbar button::after { position: absolute; right: 3px; bottom: 1px; font-size: 7px; letter-spacing: -1px; line-height: 1; color: #ffd23f; text-shadow: 0 0 3px #000; pointer-events: none; }
.djfxbar button[data-tier="1"]::after { content: "●"; }
.djfxbar button[data-tier="2"]::after { content: "●●"; }
.djfxbar button[data-tier="3"]::after { content: "●●●"; }

/* ============================================================================
   Core Experience Recovery 03, FIN-04: Tablet im Hochformat (>700px breit, hoeher als breit).
   Ursache der leeren Flaeche zwischen Video und Szene: der Chat blieb als Seitenspalte (4fr/1fr), dadurch wurde der Szenen-
   Container schmal UND sehr hoch (Hochformat) -> die Handy-Regel "Screen oben, Welt unten" (scene.css, Container-Query
   max-aspect-ratio 1/1) griff und liess dazwischen den ganzen Rest der Hoehe frei. Breit genug fuer eine echte 16:9-Buehne ist
   dieses Format aber schon (768px -> 432px Hoehe), also: Chat UNTER die Szene (wie auf dem Handy) und die Szene bekommt genau
   ihre 16:9-Hoehe -> die Kulisse inkl. Screen sitzt wie am Desktop, der Rest der Hoehe gehoert dem Chat. Kein fester Pixelwert.
   ========================================================================== */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  #room { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #room .main .scene { flex: none; aspect-ratio: 16 / 9; }
}
.fxs-beam.fat { width: 1.9em; }

/* DJ-Faehigkeiten (FIN-03): bereit / gesperrt (Pflicht-Level) / Cooldown (Sekunden) */
.djfxbar button::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 9px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; z-index: 2; }
.djfxbar button[data-note]:not([data-note=""])::before { content: attr(data-note); }
.djfxbar button.fx-ready { box-shadow: 0 0 9px #a56cffaa, inset 0 0 6px #a56cff55; }
.djfxbar button.fx-locked { opacity: .55; filter: grayscale(.9) brightness(.8); cursor: not-allowed; }
.djfxbar button.fx-locked::before { top: auto; bottom: 1px; transform: translateX(-50%); background: #000b; padding: 1px 3px; border-radius: 4px; font-size: 8px; }
.djfxbar button.fx-cool { filter: brightness(.55); cursor: wait; }
.djfxbar button.fx-cool::before { font-size: 17px; }

/* Shop-Vorschau (FIN-01): auf das Item zoomen, damit man sieht, was man kauft */
.shprev[data-zoom="head"], .shprev[data-zoom="face"], .shprev[data-zoom="torso"], .shprev[data-zoom="back"] { place-items: start center; padding: 0; }
.shprev[data-zoom] .av { transform-origin: 50% 0; }
.shprev[data-zoom="head"] .av  { transform: scale(1.7) translateY(-3%); }
.shprev[data-zoom="face"] .av  { transform: scale(2.1) translateY(-12%); }
.shprev[data-zoom="torso"] .av { transform: scale(2) translateY(-37%); }
.shprev[data-zoom="back"] .av  { transform: scale(1.6) translateY(-26%); }

/* Core Recovery 03 / FIN-04: schmale Phones – Topbar passt in 375px (Raumname sichtbar, Moderation nur als Icon). */
@media (max-width: 480px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .tl { flex: 1 1 auto; gap: 6px; }
  .topbar .tr { flex: none; gap: 6px; }
  #rGenre { display: none; }
  #rMenu { font-size: 0; padding-inline: 9px; }
  #rMenu::before { content: "🛡"; font-size: 13px; }
}

/* FIN-04: auf 375px quetschte die Ability-Bar den Songtitel auf einen Buchstaben -> Bar rutscht in eine eigene Zeile. */
@media (max-width: 480px) {
  .bar { height: auto; min-height: 56px; flex-wrap: wrap; }
  .bar .list { height: 56px; }
  .bar .song { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .bar .djfxbar { order: 9; flex: 1 1 100%; max-width: none; margin: 0; padding: 4px 0; justify-content: center; border-left: 0; border-top: 1px solid #ffffff1f; }
  .bar .djfxbar button { width: 44px; height: 34px; }
}
@media (max-width: 480px) { .qpanel { overflow-y: auto; width: min(86%, 320px); } }

/* CLOSE-01/04: "🧍 Aufstehen" steckte in einem 40x40-Icon-Knopf, das Label lief aus der Leiste -> normaler Pill-Knopf. */
.bar #bStand { width: auto; min-width: 40px; padding: 0 12px; font-size: 13px; font-weight: 700; white-space: nowrap; background: #ffffff14; border-radius: 20px; }
.bar #bStand:hover { background: #ffffff26; }