/* Spaß-Lader des Werks: Ladehinweis, Bühne mit einheitlicher Leiste, Pausenraum, Claude FM.
   Pausenraum, Bühne und Radio sind immer dunkel, unabhängig vom Hell-/Dunkel-Schalter des Netzes. */

:root {
  --sp-st-bg: #0d1012;
  --sp-st-ink: #EEF0F3;
  --sp-st-muted: #A3AAB3;
  --sp-st-glas: rgba(13, 16, 18, .58);
  --sp-st-glas-hover: rgba(13, 16, 18, .8);
  --sp-st-rand: rgba(255, 255, 255, .2);
  --sp-st-fokus: #8AB4FF;
}

/* ---------- Ladehinweis ---------- */
#spass-ebene .sp-lader { position: fixed; inset: 0; z-index: 85; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: var(--sp-st-bg); color: var(--sp-st-ink); text-align: center; pointer-events: auto }
#spass-ebene .sp-lader p { margin: 0; font: 600 18px/1.4 var(--sans, system-ui, sans-serif); max-width: 32ch }
#spass-ebene .sp-lader .sp-knopf { background: var(--sp-st-glas); color: var(--sp-st-ink); border-color: var(--sp-st-rand); border-radius: 22px }

/* ---------- Bühne: jedes Stück im Vollbild ---------- */
#spass-ebene dialog.sp-buehne {
  position: fixed; inset: 0; box-sizing: border-box; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
#spass-ebene dialog.sp-buehne::backdrop { background: var(--sp-st-bg) }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-bl-weg { display: none !important }

/* Leiste oben: Titel links, runde Knöpfe rechts, immer gleich */
:is(#spass-ebene, #sp-radio) .sp-bl {
  position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  font: 15px/1.3 var(--sans, system-ui, sans-serif); color: var(--sp-st-ink);
  transition: opacity .6s ease;
}
:is(#spass-ebene, #sp-radio) .sp-bl > * { pointer-events: auto }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-titel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box;
  padding: 0 16px; border-radius: 22px; border: 1px solid var(--sp-st-rand);
  background: var(--sp-st-glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe { display: flex; gap: 8px; margin-left: auto }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf {
  box-sizing: border-box; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--sp-st-rand); border-radius: 50%; background: var(--sp-st-glas); color: var(--sp-st-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; font: inherit;
}
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf:hover { background: var(--sp-st-glas-hover) }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf:disabled { opacity: .4; cursor: default }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf[hidden] { display: none }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf svg, .sp-r-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf svg .voll, .sp-r-pill svg .voll { fill: currentColor; stroke: none }
:is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe .sp-bl-knopf:focus-visible, .sp-r-pill:focus-visible, .sp-kachel:focus-visible, .sp-fm-fuss a:focus-visible { outline: 3px solid var(--sp-st-fokus); outline-offset: 2px }
#spass-ebene .sp-bl .sp-bl-zahlen.sp-bl-zahlen {
  display: inline-flex; flex: none; align-items: baseline; gap: 14px; margin: 0; min-height: 44px; box-sizing: border-box; padding: 0 16px;
  border-radius: 22px; border: 1px solid var(--sp-st-rand); background: var(--sp-st-glas); color: var(--sp-st-muted); font-size: 13px; line-height: 44px;
}
#spass-ebene .sp-bl .sp-bl-zahlen.sp-bl-zahlen strong { color: var(--sp-st-ink); font-size: 17px; margin-left: 5px; min-width: 0; padding: 0 }

/* Werkzeuge der Stücke: unten in der Mitte, gleicher Stil wie die Leiste */
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-werkzeuge, .sp-sa-bedienung, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste) {
  position: absolute; z-index: 5; top: auto; right: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 4px; max-width: calc(100% - 32px); box-sizing: border-box;
  border: 1px solid var(--sp-st-rand); border-radius: 26px; background: var(--sp-st-glas); color: var(--sp-st-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; color-scheme: dark;
  transition: opacity .6s ease;
}
#spass-ebene dialog.sp-buehne.sp-buehne .sp-rg-bar { justify-content: center; pointer-events: auto }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-rg-scenes { padding: 0; border: 0; background: none; box-shadow: none; gap: 4px }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-werkzeuge, .sp-sa-bedienung, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste, .sp-sn-steuerwahl, .sp-sy-werkzeuge, .sp-sy-unten) :is(button, select) {
  box-sizing: border-box; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 22px; background: transparent; color: var(--sp-st-ink);
  font: 600 14px/1 var(--sans, system-ui, sans-serif); box-shadow: none; cursor: pointer;
}
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-sa-werkzeug, .sp-sa-glaetten, .sp-wa-wechsel)::before { display: none }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-werkzeuge, .sp-sa-bedienung, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste, .sp-sn-steuerwahl, .sp-sy-werkzeuge, .sp-sy-unten) :is(button, select):hover { background: rgba(255, 255, 255, .1); box-shadow: none }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-werkzeuge, .sp-sa-bedienung, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste, .sp-sn-steuerwahl, .sp-sy-werkzeuge, .sp-sy-unten) button[aria-pressed="true"]:not(.sp-ll-farbe):not(.sp-sy-farbe) { background: var(--sp-st-ink); color: #111417 }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-werkzeuge, .sp-sa-bedienung, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste, .sp-sn-steuerwahl, .sp-sy-werkzeuge, .sp-sy-unten) :is(button, select):focus-visible { outline: 3px solid var(--sp-st-fokus); outline-offset: 1px }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-ll-farbe { padding: 0; width: 44px }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-ll-farbe[aria-pressed="true"] span { outline-color: var(--sp-st-ink) }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-la-zeiten { display: flex; gap: 2px }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-la-zeit { width: auto; padding: 0 14px }
/* Hilfetexte rücken über die Werkzeugleiste */
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-ll-tasten, .sp-rg-help) { bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); background: var(--sp-st-glas); color: var(--sp-st-ink); border: 1px solid var(--sp-st-rand) }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-sa-hilfe, .sp-wa-hilfe, .sp-aq-status) { bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); background: var(--sp-st-glas); color: var(--sp-st-ink) }

/* Erster Moment: ein Satz über der Werkzeugleiste, der beim ersten Strich verschwindet */
#spass-ebene dialog.sp-buehne .sp-bl-tipp {
  position: absolute; z-index: 4; left: 50%; bottom: max(88px, calc(env(safe-area-inset-bottom) + 74px)); transform: translateX(-50%);
  margin: 0; padding: 11px 20px; max-width: calc(100% - 48px); box-sizing: border-box; border-radius: 22px;
  border: 1px solid var(--sp-st-rand); background: var(--sp-st-glas); color: var(--sp-st-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 15px/1.35 var(--sans, system-ui, sans-serif); text-align: center; pointer-events: none;
  animation: sp-tipp-auf .9s ease .6s both;
}
#spass-ebene dialog.sp-buehne .sp-bl-tipp.sp-bl-tipp-weg { animation: sp-tipp-ab .5s ease forwards }
@keyframes sp-tipp-auf { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translateX(-50%) } }
@keyframes sp-tipp-ab { from { opacity: 1; transform: translateX(-50%) } to { opacity: 0; transform: translate(-50%, 8px) } }

/* Durchatmen: Bedienung tritt nach kurzer Ruhe zurück, jede Bewegung holt sie wieder */
#spass-ebene dialog.sp-buehne.sp-buehne.sp-bl-ruhig :is(.sp-bl, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste) { opacity: 0; pointer-events: none }
#spass-ebene dialog.sp-buehne.sp-buehne.sp-bl-ruhig :is(.sp-bl, .sp-wa-bedienung, .sp-rg-bar, .sp-la-leiste) * { pointer-events: none }

/* Spiele: Spielfeld mittig auf dunklem Grund */
#spass-ebene dialog.sp-buehne:is(.sp-snake, .sp-breakout, .sp-huepfer) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 76px 16px max(16px, env(safe-area-inset-bottom)); background: var(--sp-st-bg); overflow: auto;
}
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sn-brett { width: min(640px, calc(100vw - 32px), calc(100dvh - 228px)); flex: none }
#spass-ebene dialog.sp-buehne.sp-buehne.sp-sn-mit-touch .sp-sn-brett { width: min(640px, calc(100vw - 32px), calc(100dvh - 384px)) }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-bo-feld, .sp-hp-feld) { width: min(480px, calc(100vw - 32px), calc((100dvh - 128px) * .625)); flex: none }
#spass-ebene dialog.sp-buehne.sp-buehne.sp-breakout[data-quer] .sp-bo-feld { width: min(900px, calc(100vw - 32px), calc((100dvh - 128px) * 1.125)) }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sn-steuerwahl { margin-top: 12px; gap: 4px; padding: 4px; border: 1px solid var(--sp-st-rand); border-radius: 26px; background: var(--sp-st-glas) }
#spass-ebene dialog.sp-buehne.sp-buehne :is(#sp-sn-hilfe, #sp-bo-hilfe, #sp-hp-hilfe) { color: var(--sp-st-muted); font-size: 12px; margin-top: 10px }
#spass-ebene dialog.sp-buehne.sp-buehne :is(.sp-sn-start, .sp-bo-start, .sp-hp-start) { border-radius: 22px }

/* Symmetrie: dunkle Fläche, Kopf entfällt, Werkzeuge im Bühnenstil */
#spass-ebene dialog.sp-buehne.sp-sy-dialog {
  --sp-bg: var(--sp-st-bg); --sp-ink: var(--sp-st-ink); --sp-panel: rgba(255, 255, 255, .1); --sp-line: var(--sp-st-rand); --sp-muted: var(--sp-st-muted); --sp-focus: var(--sp-st-fokus);
  padding-top: 72px; background: var(--sp-st-bg);
}
#spass-ebene dialog.sp-buehne.sp-sy-dialog[open] { grid-template-rows: 58px minmax(0, 1fr) 76px 32px }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-gruppe { padding: 4px; border: 1px solid var(--sp-st-rand); border-radius: 26px; background: var(--sp-st-glas) }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-unten > * { padding: 4px 8px; border: 1px solid var(--sp-st-rand); border-radius: 26px; background: var(--sp-st-glas) }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-breiten { border-left: 1px solid var(--sp-st-rand); padding-left: 8px }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-unten :is(.sp-sy-farbe, .sp-sy-breite) { width: 44px; padding: 0 }
#spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-farbe[aria-pressed="true"] span { box-shadow: 0 0 0 2px var(--sp-st-bg), 0 0 0 4px var(--sp-st-ink) }
@media (max-width: 650px) {
  #spass-ebene dialog.sp-buehne.sp-sy-dialog[open] { grid-template-rows: 108px minmax(0, 1fr) 118px 40px }
  #spass-ebene dialog.sp-buehne.sp-buehne .sp-sy-gruppe { width: auto }
}

/* Aquarium: ohne eigenen Rahmen, randlos */
#spass-ebene dialog.sp-buehne.sp-aq-dialog { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0 }

/* ---------- Pausenraum ---------- */
.sp-raum {
  position: fixed; inset: 0; z-index: 75; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 90% at 50% 0%, #1a1f24 0%, #111417 55%, #0d1012 100%); color: var(--sp-st-ink);
  font: 16px/1.45 var(--sans, system-ui, sans-serif); color-scheme: dark;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.sp-r-innen { width: min(1100px, 100%); margin: 0 auto; display: grid; gap: 20px }
body.sp-fm-klein .sp-raum { padding-bottom: 80px }
.sp-r-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px }
.sp-r-titel { flex: 1 1 260px; min-width: 0 }
.sp-r-titel h2 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.02em }
.sp-r-titel p { margin: 4px 0 0; color: var(--sp-st-muted); font-size: 15px }
.sp-r-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.sp-r-pill {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin: 0;
  border: 1px solid var(--sp-st-rand); border-radius: 22px; background: rgba(255, 255, 255, .06); color: var(--sp-st-ink);
  font: 600 15px/1 var(--sans, system-ui, sans-serif); cursor: pointer; white-space: nowrap;
}
.sp-r-pill:hover { background: rgba(255, 255, 255, .12) }
.sp-r-pill-hell { background: var(--sp-st-ink); color: #111417; border-color: var(--sp-st-ink) }
.sp-r-pill-hell:hover { background: #fff }
.sp-r-pegel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sp-st-muted); font-size: 14px }
.sp-r-pegel[hidden] { display: none }
.sp-r-pegel input { width: 120px; accent-color: var(--sp-st-ink) }
.sp-r-pegel output { min-width: 4ch }
.sp-r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* Claude-FM-Band */
.sp-fm-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: linear-gradient(100deg, #1d2328, #15191d);
}
.sp-fm-zeichen { flex: none; display: flex; align-items: flex-end; gap: 4px; width: 56px; height: 40px; padding: 8px 10px; box-sizing: content-box; border-radius: 10px; background: #0a0c0e }
.sp-fm-zeichen i { flex: 1; height: 30%; border-radius: 2px; background: #D97757 }
.sp-fm-zeichen i:nth-child(2) { height: 70% } .sp-fm-zeichen i:nth-child(3) { height: 45% } .sp-fm-zeichen i:nth-child(4) { height: 90% } .sp-fm-zeichen i:nth-child(5) { height: 55% }
.sp-fm-an .sp-fm-zeichen i { animation: sp-fm-wippen 1.1s ease-in-out infinite alternate }
.sp-fm-an .sp-fm-zeichen i:nth-child(2) { animation-delay: -.3s } .sp-fm-an .sp-fm-zeichen i:nth-child(3) { animation-delay: -.7s } .sp-fm-an .sp-fm-zeichen i:nth-child(4) { animation-delay: -.5s } .sp-fm-an .sp-fm-zeichen i:nth-child(5) { animation-delay: -.9s }
@keyframes sp-fm-wippen { from { transform: scaleY(.35) } to { transform: scaleY(1) } }
.sp-fm-zeichen i { transform-origin: bottom }
.sp-fm-text { flex: 1 1 280px; min-width: 0 }
.sp-fm-text h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.2 }
.sp-fm-zeile { margin: 4px 0 0; color: var(--sp-st-muted); font-size: 15px }
.sp-fm-knoepfe { display: flex; flex-wrap: wrap; gap: 8px }
.sp-fm-live { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: #FF8A73 }
.sp-fm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor }

/* Gruppen und Kacheln */
.sp-gruppe { display: grid; gap: 10px }
.sp-gruppe h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-size: inherit; font-weight: inherit }
.sp-gruppe-titel { font: 700 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--sp-st-ink) }
.sp-gruppe-zeile { color: var(--sp-st-muted); font-size: 14px }
.sp-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.sp-kachel {
  position: relative; display: block; padding: 0; margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #1b1f23; color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.sp-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease }
.sp-kachel:hover img { transform: scale(1.04) }
.sp-kachel:hover { border-color: rgba(255, 255, 255, .45) }
.sp-kachel-text { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 34px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .82) 60%) }
.sp-kachel-text b { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto }
.sp-kachel-text span { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
@media (max-width: 760px) {
  .sp-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 560px) {
  .sp-kacheln { grid-template-columns: 1fr 1fr; gap: 10px }
  .sp-r-titel h2 { font-size: 26px }
  .sp-kachel-text span { display: none }
  .sp-r-pegel input { width: 90px }
}

/* ---------- Claude FM: groß auf der Bühne, klein unten rechts ---------- */
.sp-radio { position: fixed; z-index: 86; color: var(--sp-st-ink); font: 15px/1.4 var(--sans, system-ui, sans-serif); color-scheme: dark }
.sp-radio[data-zustand="gross"] { inset: 0; background: #000 }
.sp-fm-buehne { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 76px 16px max(16px, env(safe-area-inset-bottom)) }
.sp-fm-video { position: relative; width: min(100%, calc((100dvh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0a0c0e }
.sp-fm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block }
.sp-fm-fuss { margin: 0; color: var(--sp-st-muted); font-size: 13px; text-align: center }
.sp-fm-fuss a { color: var(--sp-st-ink) }
.sp-fm-hinweis { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; padding: 24px; text-align: center }
.sp-fm-hinweis h2 { margin: 0; font-size: 24px }
.sp-fm-hinweis p { margin: 0 auto; max-width: 46ch; color: var(--sp-st-muted) }
.sp-fm-hinweis-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }

/* Minimiert (Eike 03.11.2026): kein Videofenster. Die Leiste zeigt nur den Streifen mit dem aktuellen Lied,
   ausgeschnitten aus dem weiterlaufenden Player (Maße setzt der Lader aus FM.ausschnitt). Der Player wird nie
   umgehängt oder ausgeblendet, sonst lädt er neu oder hält an. */
.sp-radio[data-zustand="klein"] {
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px; padding: 4px; max-width: calc(100vw - 32px); box-sizing: border-box;
  border: 1px solid var(--sp-st-rand); border-radius: 26px; background: #16191c; box-shadow: 0 8px 28px rgba(0, 0, 0, .35)
}
#sp-radio[data-zustand="klein"] .sp-bl { position: static; order: 2; gap: 2px; padding: 0 }
#sp-radio[data-zustand="klein"] .sp-bl .sp-bl-titel { display: none }
#sp-radio[data-zustand="klein"] .sp-bl .sp-bl-knoepfe { gap: 2px }
#sp-radio[data-zustand="klein"] .sp-bl .sp-bl-knoepfe .sp-bl-knopf { width: 40px; height: 40px; min-width: 40px; border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none }
#sp-radio[data-zustand="klein"] .sp-bl .sp-bl-knoepfe .sp-bl-knopf:hover { background: rgba(255, 255, 255, .1) }
.sp-radio[data-zustand="klein"] .sp-fm-buehne {
  position: relative; inset: auto; order: 1; flex: none; display: block; padding: 0;
  width: var(--fm-sb, 270px); max-width: calc(100vw - 132px); height: var(--fm-sh, 36px); overflow: hidden; border-radius: 20px; background: #000; pointer-events: none
}
.sp-radio[data-zustand="klein"] .sp-fm-video { position: absolute; left: var(--fm-x); top: var(--fm-y); width: var(--fm-vb); height: var(--fm-vh); max-width: none; aspect-ratio: auto; border-radius: 0 }
.sp-radio[data-zustand="klein"] .sp-fm-fuss { display: none }
/* Platz schaffen, damit der Streifen unten rechts nichts im Netz verdeckt */
body.sp-fm-klein main#view { padding-bottom: 64px; box-sizing: border-box }

/* Schmale Bildschirme: Bei Spielen weicht der Titel den Zahlen, damit ✕ immer sichtbar bleibt */
@media (max-width: 560px) {
  :is(#spass-ebene, #sp-radio) .sp-bl:has(.sp-bl-zahlen) .sp-bl-titel { display: none }
  #spass-ebene .sp-bl .sp-bl-zahlen.sp-bl-zahlen { padding: 0 12px; gap: 10px }
  :is(#spass-ebene, #sp-radio) .sp-bl .sp-bl-knoepfe { gap: 6px }
}

/* Ersatz, wenn der YouTube-Player sich nicht meldet */
.sp-fm-hinweis.sp-fm-ersatz { z-index: 1; background: #0a0c0e }
a.sp-r-pill { text-decoration: none }