/* RT Web Player – rt-player.css
 * all:initial auf #rtwp-bar + #rtwp-panel = Theme-CSS kann nichts überschreiben
 */

/* Utility: .hidden für SVG-Placeholders wenn Cover geladen */
#rtwp-bar-cov svg.hidden,
#rtwp-pcov svg.hidden { display: none !important; }

/* Body-Abstand für die Bar */
body { padding-bottom: 94px !important; }
html.rtwp-panel-open body { overflow: hidden !important; }

/* ── Blur-Overlay über Seiteninhalt bei offenem Panel ── */
html.rtwp-panel-open:not(.rtwp-popup-mode) body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 0 64px 0 !important;   /* deckt alles ab bis Oberkante der Bar */
  backdrop-filter: blur(6px) brightness(0.55) !important;
  -webkit-backdrop-filter: blur(6px) brightness(0.55) !important;
  background: rgba(0,0,0,0.35) !important;
  z-index: 99970 !important;       /* unter Panel (99990) und Bar (99999) */
  pointer-events: none !important; /* kein Klick-Block – Panel schliessen bleibt möglich */
}

/* ── Player-Wrapper: muss position:relative haben für Tour-Overlay & Demo-Badge ── */
#rtwp-player {
  position: relative !important;
}

/* ── RESET: alles unter #rtwp-player startet bei Null ───────────────────── */
/* all:initial setzt ALLE CSS-Eigenschaften auf Initialwert zurück –
   stärker als !important weil es nicht konkurriert sondern neu beginnt    */
#rtwp-bar,
#rtwp-panel {
  all: initial;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-sizing: border-box !important;
}

/* Alle Kinder erben die Reset-Basis */
/* Non-SVG children reset */
#rtwp-bar *:not(svg):not(path):not(g):not(circle):not(rect):not(line):not(polygon):not(#rtwp-prog-bar):not(#rtwp-prog-bar-fill),
#rtwp-panel *:not(svg):not(path):not(g):not(circle):not(rect):not(line):not(polygon):not(#rtwp-prog-panel):not(#rtwp-prog-panel-fill) {
  all: unset;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
/* SVG elements: controlled reset – only what we need */
#rtwp-bar svg, #rtwp-panel svg {
  display: block !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}
#rtwp-bar svg path, #rtwp-panel svg path,
#rtwp-bar svg circle, #rtwp-panel svg circle,
#rtwp-bar svg rect, #rtwp-panel svg rect,
#rtwp-bar svg polygon, #rtwp-panel svg polygon,
#rtwp-bar svg g, #rtwp-panel svg g {
  /* Don't all:unset paths – just let fill cascade normally */
}
/* Nur was wir explizit setzen gilt */

/* ══════════════════════════════════════════════════════════════
   BOTTOM BAR
══════════════════════════════════════════════════════════════ */
#rtwp-bar {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 99990 !important;
  background: rgba(10,10,12,0.97) !important;
  border-top: 2px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.85) !important;
}

/* Controls row */
#rtwp-bar-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 64px !important;
  padding: 0 20px !important;
  gap: 14px !important;
  width: 100% !important;
}

/* Cover in bar */
#rtwp-bar-cov-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 46px !important; height: 46px !important;
  display: block !important;
}
#rtwp-bar-cov {
  width: 46px !important; height: 46px !important;
  border-radius: 8px !important;
  background: #1C1C21 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
#rtwp-bar-cov svg { width: 20px !important; height: 20px !important; display: block !important; }
#rtwp-bar-cov svg path { fill: #48454F !important; }
#rtwp-bar-cov img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: none !important; }
#rtwp-bar-cov img.on { display: block !important; }

/* ── Progress Bar – Bar Cover (klein, 2px) ─────────────────── */
#rtwp-player #rtwp-prog-bar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: rgba(255,255,255,0.25) !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#rtwp-player #rtwp-prog-bar.off { opacity: 0 !important; }
#rtwp-player #rtwp-prog-bar-fill {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 100% !important;
  width: 0% !important;
  background: #FF2233 !important;
  border-radius: inherit !important;
}

/* ── Progress Bar – Panel Cover (gross, 3px) ──────────────── */
#rtwp-player #rtwp-prog-panel {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: rgba(255,255,255,0.20) !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#rtwp-player #rtwp-prog-panel.off { opacity: 0 !important; }
#rtwp-player #rtwp-prog-panel-fill {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 100% !important;
  width: 0% !important;
  background: #C0272D !important;
  border-radius: inherit !important;
}

#rtwp-live-ring {
  display: block !important;
  position: absolute !important; inset: -3px !important;
  border-radius: 11px !important;
  border: 2px solid transparent !important;
  pointer-events: none !important;
  transition: border-color 0.3s !important;
}
#rtwp-live-ring.on {
  border-color: #C0272D !important;
  animation: rtwp-ring 2.2s ease-in-out infinite !important;
}

/* Meta */
#rtwp-bar-meta {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  overflow: hidden !important;
}
#rtwp-bar-top {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
#rtwp-live-badge {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  color: #C0272D !important; text-transform: uppercase !important; flex-shrink: 0 !important;
}
#rtwp-live-dot {
  display: inline-block !important;
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #C0272D !important;
  animation: rtwp-dot 1.6s ease-in-out infinite !important;
}
#rtwp-bar-ch {
  display: block !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  color: #D4A847 !important; text-transform: uppercase !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#rtwp-bar-title {
  display: block !important;
  font-size: 17px !important; font-weight: 700 !important; color: #F2EFE9 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  transition: opacity .2s !important;
}
#rtwp-bar-title.fade { opacity: 0 !important; }
#rtwp-bar-artist {
  display: block !important;
  font-size: 13px !important; color: #888490 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Controls */
#rtwp-bar-ctrl {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 12px !important; flex-shrink: 0 !important;
}

/* Play button */
#rtwp-play {
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important; flex-shrink: 0 !important;
  width: 54px !important; height: 54px !important; border-radius: 50% !important;
  background: #C0272D !important;
  border: none !important; cursor: pointer !important; outline: none !important; padding: 0 !important;
  box-shadow: 0 0 24px rgba(192,39,45,0.5) !important;
}
#rtwp-play:hover { box-shadow: 0 0 32px rgba(192,39,45,0.75) !important; }
/* Play-Button Icons: class-basiert (JS inline styles werden von !important blockiert) */
/* Play button SVGs – specificity [2,0,0] beats all:unset [1,0,1] */
#rtwp-play svg {
  display: block !important; width: 24px !important; height: 24px !important;
  fill: white !important; overflow: visible !important; flex-shrink: 0 !important;
}
#rtwp-play svg path { fill: white !important; }
#rtwp-play #rtwp-ico-play  { display: block !important; }
#rtwp-play #rtwp-ico-pause { display: none  !important; }
#rtwp-spinner   { display: none !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 2.5px solid rgba(255,255,255,0.2) !important; border-top-color: white !important; animation: rtwp-spin .7s linear infinite !important; }
/* playing state */
/* playing state – specificity [2,0,0] */
#rtwp-play.playing #rtwp-ico-play  { display: none  !important; }
#rtwp-play.playing #rtwp-ico-pause { display: block !important; }
/* loading state */
#rtwp-play.loading #rtwp-ico-play,
#rtwp-play.loading #rtwp-ico-pause { display: none  !important; }
#rtwp-play.loading #rtwp-spinner   { display: block !important; }

/* Volume */
#rtwp-vol {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
#rtwp-mute {
  display: flex !important; align-items: center !important;
  background: none !important; border: none !important; cursor: pointer !important;
  padding: 4px !important;
}
#rtwp-mute svg {
  display: block !important; width: 22px !important; height: 22px !important;
  overflow: visible !important; fill: #888490 !important; flex-shrink: 0 !important;
}
#rtwp-mute svg path { fill: #888490 !important; }
#rtwp-mute:hover svg { fill: #F2EFE9 !important; }
#rtwp-mute:hover svg path { fill: #F2EFE9 !important; }
#rtwp-mute #rtwp-ico-mute { display: none !important; }
#rtwp-mute.muted #rtwp-ico-vol  { display: none  !important; }
#rtwp-mute.muted #rtwp-ico-mute { display: block !important; }
#rtwp-vol-track {
  display: flex !important; align-items: center !important;
  position: relative !important; width: 88px !important; height: 20px !important;
}
#rtwp-vol-range {
  display: block !important;
  -webkit-appearance: none !important; appearance: none !important;
  width: 100% !important; height: 4px !important; background: #242429 !important;
  border-radius: 2px !important; outline: none !important; cursor: pointer !important;
  position: relative !important; z-index: 1 !important; margin: 0 !important;
}
#rtwp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 15px !important; height: 15px !important; border-radius: 50% !important;
  background: white !important; cursor: pointer !important;
}
/* Firefox range thumb */
#rtwp-vol-range::-moz-range-thumb {
  width: 15px !important; height: 15px !important; border-radius: 50% !important;
  background: white !important; cursor: pointer !important;
  border: none !important; box-shadow: none !important;
}
#rtwp-vol-range::-moz-range-track {
  height: 4px !important; background: #242429 !important;
  border-radius: 2px !important; border: none !important;
}
#rtwp-vol-range::-moz-range-progress {
  height: 4px !important; background: #C0272D !important; border-radius: 2px !important;
}
#rtwp-vol-fill {
  display: block !important;
  position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
  height: 4px !important; border-radius: 2px !important; background: #C0272D !important;
  pointer-events: none !important; width: 80% !important;
}

/* Expand */
#rtwp-expand {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important; border-radius: 8px !important;
  background: none !important; border: none !important; cursor: pointer !important;
}
#rtwp-expand svg {
  display: block !important; width: 24px !important; height: 24px !important;
  overflow: visible !important; fill: #888490 !important; flex-shrink: 0 !important;
  transition: transform .3s ease !important;
}
#rtwp-expand svg path { fill: #888490 !important; }
#rtwp-expand:hover svg { fill: #F2EFE9 !important; }
#rtwp-expand:hover svg path { fill: #F2EFE9 !important; }
#rtwp-expand.open svg { transform: rotate(180deg) !important; }

/* ── Keyboard Help Button ───────────────────────────────────────────────── */
#rtwp-kb-help {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important; border-radius: 8px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  outline: none !important; padding: 0 !important;
}
#rtwp-kb-help svg {
  display: block !important; width: 22px !important; height: 22px !important;
  overflow: visible !important; fill: #888490 !important; flex-shrink: 0 !important;
}
#rtwp-kb-help svg path { fill: #888490 !important; }
#rtwp-kb-help:hover svg,
#rtwp-kb-help:hover svg path { fill: #F2EFE9 !important; }
#rtwp-kb-help.on svg,
#rtwp-kb-help.on svg path { fill: #C0272D !important; }

/* ── Keyboard Help Modal ────────────────────────────────────────────────── */
#rtwp-kb-modal {
  display: none !important;
  position: fixed !important;
  bottom: 94px !important; right: 20px !important;
  z-index: 99995 !important;
}
#rtwp-kb-modal.on { display: block !important; }
#rtwp-kb-modal-inner {
  display: block !important;
  background: #18181e !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
  min-width: 280px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#rtwp-kb-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}
#rtwp-kb-modal-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #F2EFE9 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
#rtwp-kb-modal-close {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important;
  background: none !important; border: none !important;
  color: #888490 !important; font-size: 14px !important; cursor: pointer !important;
  border-radius: 4px !important; padding: 0 !important;
}
#rtwp-kb-modal-close:hover { color: #F2EFE9 !important; background: rgba(255,255,255,0.08) !important; }
#rtwp-kb-table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
#rtwp-kb-table tr { display: table-row !important; }
#rtwp-kb-table td {
  display: table-cell !important;
  padding: 5px 0 !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #C5C2BC !important;
  line-height: 1.4 !important;
}
#rtwp-kb-table td:first-child {
  white-space: nowrap !important;
  padding-right: 14px !important;
}
#rtwp-kb-table kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  padding: 2px 6px !important;
  background: #2a2a32 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-bottom: 2px solid rgba(255,255,255,0.1) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #F2EFE9 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  margin-right: 3px !important;
  letter-spacing: 0 !important;
}


#rtwp-bar-chs {
  display: flex !important; flex-direction: row !important;
  height: 30px !important; border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 20px !important; gap: 4px !important; align-items: stretch !important;
  width: 100% !important;
}
.rtwp-ch {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 1 !important; max-width: 160px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  color: #888490 !important;
  background: none !important; border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 6px 6px 0 0 !important; cursor: pointer !important;
}
.rtwp-ch:hover { color: #F2EFE9 !important; background: rgba(255,255,255,0.04) !important; }
.rtwp-ch.rtwp-on { color: white !important; background: rgba(255,255,255,0.07) !important; }

/* ══════════════════════════════════════════════════════════════
   PANEL
══════════════════════════════════════════════════════════════ */
#rtwp-panel {
  display: block !important;
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 94px !important;
  height: 0 !important; overflow: hidden !important; z-index: 99989 !important;
  transition: height .35s cubic-bezier(.4,0,.2,1) !important;
}
html.rtwp-panel-open #rtwp-panel { height: 45vh !important; }
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-panel { bottom: 64px !important; }

/* ══════════════════════════════════════════════════════════════
   PANEL-OPEN: Bar im Mini-Modus (Single Row)
   Layout: [Kanalbuttons scroll] | [PLAY zentriert] | [Vol + Icons]
   Versteckt: Mini-Cover, Titel/Artist, Donate-Herz
══════════════════════════════════════════════════════════════ */

/* Bar wird zu einer einzigen Zeile */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 64px !important;
  padding: 0 16px !important;
  gap: 0 !important;
}

/* bar-main: nur noch rechte Controls (Play + Vol + Icons) */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-main {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 !important;
  gap: 10px !important;
  position: relative !important;
  order: 2 !important;
}

/* Kanalbutton-Reihe: links, scrollbar, flex-grow */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  order: 1 !important;
  height: 100% !important;
  border-top: none !important;
  padding: 0 12px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  align-items: center !important;
  gap: 4px !important;
}
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs::-webkit-scrollbar { display: none !important; }
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs .rtwp-ch {
  flex: 0 0 auto !important;
  max-width: none !important;
  height: 36px !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  padding: 0 14px !important;
}

/* Trennlinie zwischen Kanälen und Controls */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs::after {
  content: '' !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: 1px !important; height: 36px !important;
  background: rgba(255,255,255,0.08) !important;
  margin-left: 8px !important;
}

/* Verstecken: Mini-Cover */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-cov-wrap {
  display: none !important;
}
/* Verstecken: Titel / Artist */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-meta {
  display: none !important;
}
/* Verstecken: Donate-Herz */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-donate {
  display: none !important;
}

/* Play-Button: absolut zentriert in der Bar */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar {
  position: fixed !important; /* bleibt fixed */
}
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-play {
  position: fixed !important;
  left: 50% !important;
  bottom: 12px !important;            /* zentriert in 64px Bar, mit etwas Abstand */
  transform: translateX(-50%) !important;
  height: 42px !important;
  width: 42px !important;
  border-radius: 50% !important;      /* immer rund */
  background: #C0272D !important;
  z-index: 2 !important;
  box-shadow: 0 0 24px rgba(192,39,45,0.6) !important;
}
/* Beide Hälften enden vor dem zentrierten Play-Button (42px/2 + 14px Puffer = 35px) */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs {
  max-width: calc(50% - 35px) !important;
  padding-right: 8px !important;
}
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-main {
  max-width: calc(50% - 35px) !important;
  overflow: hidden !important;
}
/* Vol-Slider: Abstand vom zentrierten Play-Button weg nach rechts */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-vol {
  margin-left: 20px !important;
}

/* Volume: normal sichtbar rechts */
html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-vol {
  display: flex !important;
}


#rtwp-popup-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important; border-radius: 8px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  outline: none !important; padding: 0 !important;
}
#rtwp-popup-btn svg { display: block !important; width: 20px !important; height: 20px !important; fill: #888490 !important; }
#rtwp-popup-btn svg path { fill: #888490 !important; }
#rtwp-popup-btn:hover svg, #rtwp-popup-btn:hover svg path { fill: #F2EFE9 !important; }

/* ══════════════════════════════════════════════════════════════════
   POPUP LAYOUT (body.rtwp-popup-body)
   Grid: left-col (flex, min 300px) | right-col (fixed 600px) / dock (72px)
══════════════════════════════════════════════════════════════════ */
/* ── Admin-Bar im Popup unterdrücken (spart 32px) ── */
.rtwp-popup-body #wpadminbar { display: none !important; }
.rtwp-popup-body html, html.rtwp-popup-body { margin-top: 0 !important; }

.rtwp-popup-body {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #0a0a10 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}
/* Hide native HTML5 audio player UI */
.rtwp-popup-body #rtwp-audio {
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  visibility: hidden !important;
}
.rtwp-popup-body #rtwp-player {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Hide bar + panel (not used in popup) */
.rtwp-popup-body #rtwp-bar,
.rtwp-popup-body #rtwp-panel { display: none !important; }

/* ── Main grid ── */
#rtwp-popup-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) 600px !important;
  grid-template-rows: 1fr 72px !important;
  grid-template-areas:
    "left right"
    "left dock" !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: #0e0e14 !important;
}

/* ── Left column ── */
#rtwp-popup-left {
  grid-area: left !important;
  background: #0a0a10 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* NICHT center – sonst clippen Elemente */
  padding: 14px 20px 16px !important;
  gap: 8px !important;
  overflow-y: auto !important;             /* scrollbar wenn nötig, nichts clippen */
  overflow-x: hidden !important;
  position: relative !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.06) transparent !important;
}
/* Atmospheric glow */
#rtwp-popup-left::before {
  content: '' !important;
  position: absolute !important; top: 60px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 240px !important; height: 240px !important; border-radius: 50% !important;
  background: radial-gradient(circle, rgba(192,39,45,0.15) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}

/* Live badge */
#rtwp-popup-live-badge {
  align-self: flex-start !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  background: rgba(192,39,45,0.12) !important;
  border: 1px solid rgba(192,39,45,0.3) !important;
  border-radius: 20px !important; padding: 4px 10px !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  color: #C0272D !important; text-transform: uppercase !important;
  position: relative !important; z-index: 1 !important;
}
#rtwp-popup-live-badge #rtwp-live-dot {
  animation: rtwp-blink 1.4s ease-in-out infinite !important;
}

/* Cover – immer quadratisch, feste Maxgrösse so dass Meta immer sichtbar bleibt */
.rtwp-popup-body #rtwp-pcov-wrap {
  width: min(calc(100% - 40px), 240px) !important;   /* max 240px */
  aspect-ratio: 1 / 1 !important;                    /* quadratisch */
  flex-shrink: 0 !important;                          /* schrumpft NIE */
  position: relative !important; z-index: 1 !important;
}
.rtwp-popup-body #rtwp-pcov {
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  background: #1e1e28 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7) !important;
  overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.rtwp-popup-body #rtwp-pcov img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  display: none !important;
}
.rtwp-popup-body #rtwp-pcov img.on { display: block !important; }
.rtwp-popup-body #rtwp-pcov svg { width: 48px !important; height: 48px !important; fill: #48454F !important; }

/* Progress bar */
.rtwp-popup-body #rtwp-prog-panel {
  width: 100% !important; height: 3px !important;
  background: rgba(255,255,255,0.1) !important; border-radius: 2px !important;
  overflow: hidden !important; flex-shrink: 0 !important;
  position: relative !important; z-index: 1 !important;
}
.rtwp-popup-body #rtwp-prog-panel-fill {
  height: 100% !important; background: #C0272D !important;
  border-radius: 2px !important; width: 0 !important;
  transition: width 1s linear !important;
}

/* Song meta – immer sichtbar, kein Schrumpfen */
#rtwp-popup-meta {
  width: 100% !important; position: relative !important; z-index: 1 !important;
  flex-shrink: 0 !important; align-self: stretch !important;
}
#rtwp-popup-meta #rtwp-pch {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: #D4A847 !important; margin-bottom: 3px !important;
}
#rtwp-popup-meta #rtwp-ptitle {
  font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: #F2EFE9 !important; margin-bottom: 2px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#rtwp-popup-meta #rtwp-partist {
  font-size: 13px !important; color: #888490 !important; margin-bottom: 2px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#rtwp-popup-meta #rtwp-palbum, #rtwp-popup-meta #rtwp-pgenre {
  font-size: 11px !important; color: #48454F !important;
}
#rtwp-popup-meta #rtwp-pplayed {
  font-size: 10px !important; color: #48454F !important; margin-top: 2px !important;
}
#rtwp-popup-meta #rtwp-stars { margin-top: 6px !important; }

/* Formation badge – immer sichtbar */
#rtwp-fbadge {
  display: none !important;
  width: 100% !important; align-items: center !important; gap: 8px !important;
  padding: 8px 10px !important; border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  position: relative !important; z-index: 1 !important;
  flex-shrink: 0 !important;
}
#rtwp-fbadge.rtwp-on { display: flex !important; }
#rtwp-fimg-wrap { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; display: none !important; }
#rtwp-fimg-wrap.rtwp-on { display: block !important; }
#rtwp-fimg {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 1.5px solid rgba(255,255,255,0.12) !important;
}
#rtwp-popup-fbadge-info {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
}
#rtwp-popup-fname {
  font-size: 12px !important; font-weight: 600 !important; color: #F2EFE9 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}


/* Event chip – immer sichtbar */
#rtwp-evt {
  display: none !important;
  width: 100% !important; align-items: flex-start !important; gap: 8px !important;
  padding: 8px 10px !important; border-radius: 8px !important;
  background: rgba(34,197,94,0.06) !important;
  border: 1px solid rgba(34,197,94,0.18) !important;
  position: relative !important; z-index: 1 !important;
  flex-shrink: 0 !important;
}
#rtwp-evt.rtwp-on { display: flex !important; }
#rtwp-evt .rtwp-evt-icon { font-size: 13px !important; flex-shrink: 0 !important; }
#rtwp-evt-text { font-size: 11px !important; color: rgba(134,239,172,0.9) !important; flex: 1 !important; line-height: 1.4 !important; }
#rtwp-evt-link { font-size: 11px !important; font-weight: 700 !important; color: #22C55E !important; flex-shrink: 0 !important; text-decoration: none !important; white-space: nowrap !important; }

/* ── Right column ── */
#rtwp-popup-right {
  grid-area: right !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; min-height: 0 !important;
}

/* Tabs bar */
.rtwp-popup-body #rtwp-tabs-bar {
  display: flex !important; align-items: stretch !important;
  height: 44px !important; flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 16px !important; background: transparent !important;
}
.rtwp-popup-body .rtwp-tab {
  display: flex !important; align-items: center !important;
  padding: 0 14px !important; font-size: 13px !important; font-weight: 600 !important;
  color: #888490 !important; background: none !important; border: none !important; cursor: pointer !important;
  border-bottom: 2.5px solid transparent !important; margin-bottom: -1px !important;
}
.rtwp-popup-body .rtwp-tab:hover { color: #F2EFE9 !important; }
.rtwp-popup-body .rtwp-tab.rtwp-on { color: #C0272D !important; border-bottom-color: #C0272D !important; }
.rtwp-popup-body .rtwp-tab.rtwp-tab-hidden { display: none !important; }
.rtwp-popup-body #rtwp-close {
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-left: auto !important; width: 30px !important; height: 30px !important; align-self: center !important;
  border-radius: 50% !important; background: rgba(255,255,255,0.06) !important; border: none !important;
  cursor: pointer !important; color: #888490 !important; font-size: 13px !important; flex-shrink: 0 !important;
}
.rtwp-popup-body #rtwp-close:hover { background: rgba(255,255,255,0.12) !important; color: #F2EFE9 !important; }

/* Tab content panels */
.rtwp-popup-body #rtwp-tab-content {
  flex: 1 !important; overflow: hidden !important; position: relative !important;
}
.rtwp-popup-body .rtwp-pnl {
  display: none !important; height: 100% !important;
  overflow-y: auto !important; padding: 14px 16px !important;
  scrollbar-width: thin !important; scrollbar-color: #1e1e28 transparent !important;
}
.rtwp-popup-body .rtwp-pnl.rtwp-on { display: block !important; }

/* History list */
.rtwp-popup-body #rtwp-hist-list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 1px !important;
}
.rtwp-popup-body #rtwp-hist-list .rtwp-hi {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 7px 8px !important; border-radius: 7px !important;
}
.rtwp-popup-body #rtwp-hist-list .rtwp-hi:hover { background: rgba(255,255,255,0.04) !important; }
.rtwp-popup-body #rtwp-hist-list .rtwp-hi.rtwp-hi-cur { background: rgba(192,39,45,0.07) !important; }
.rtwp-popup-body #rtwp-hist-list .rtwp-hi.rtwp-hi-cur .rtwp-hi-title {
  color: #C0272D !important; font-weight: 700 !important;
}

/* Bio tab */
.rtwp-popup-body #rtwp-bio { font-size: 13px !important; line-height: 1.75 !important; color: rgba(242,239,233,0.85) !important; margin-bottom: 14px !important; }
.rtwp-popup-body #rtwp-bio-links { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 14px !important; }
.rtwp-popup-body #rtwp-members { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

/* Disco tab */
.rtwp-popup-body #rtwp-disco {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  gap: 14px !important;
}

/* ── Dock ── */
#rtwp-popup-dock {
  grid-area: dock !important;
  background: rgba(6,6,10,0.98) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important; align-items: center !important;
  padding: 0 10px !important; gap: 6px !important;
  height: 72px !important; min-height: 72px !important; max-height: 72px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Channel buttons in dock */
#rtwp-popup-channels {
  display: flex !important; gap: 3px !important;
  overflow-x: auto !important; scrollbar-width: none !important;
  flex: 1 1 0 !important; min-width: 0 !important;
  padding: 4px 2px !important;
}
#rtwp-popup-channels::-webkit-scrollbar { display: none !important; }
#rtwp-popup-channels .rtwp-ch {
  flex: 0 0 auto !important;           /* override base .rtwp-ch { flex: 1 } */
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important;
  padding: 6px 11px !important; border-radius: 6px !important; cursor: pointer !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,0.05) !important; color: #888490 !important;
  border: 1px solid transparent !important;
  max-width: none !important;          /* override base .rtwp-ch { max-width: 160px } */
}
#rtwp-popup-channels .rtwp-ch:hover { color: #F2EFE9 !important; background: rgba(255,255,255,0.08) !important; }
#rtwp-popup-channels .rtwp-ch.rtwp-on { background: rgba(192,39,45,0.18) !important; color: white !important; border-color: rgba(192,39,45,0.35) !important; }

/* Dock separator */
.rtwp-dock-sep {
  width: 1px !important; height: 32px !important;
  background: rgba(255,255,255,0.07) !important; flex-shrink: 0 !important;
}

/* Play button */
.rtwp-popup-body #rtwp-play {
  width: 42px !important; height: 42px !important; border-radius: 50% !important;
  background: #C0272D !important; border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; box-shadow: 0 0 20px rgba(192,39,45,0.35) !important;
  position: relative !important;
}
.rtwp-popup-body #rtwp-play:hover { box-shadow: 0 0 32px rgba(192,39,45,0.55) !important; transform: scale(1.04) !important; }
.rtwp-popup-body #rtwp-play svg { width: 18px !important; height: 18px !important; fill: white !important; }

/* Volume */
.rtwp-popup-body #rtwp-vol {
  display: flex !important; align-items: center !important; gap: 7px !important; flex-shrink: 0 !important;
}
.rtwp-popup-body #rtwp-mute {
  background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important;
  display: flex !important; align-items: center !important;
}
.rtwp-popup-body #rtwp-mute svg { width: 16px !important; height: 16px !important; fill: #888490 !important; display: block !important; }
.rtwp-popup-body #rtwp-vol-track {
  width: 80px !important; height: 3px !important;
  background: rgba(255,255,255,0.12) !important; border-radius: 2px !important;
  position: relative !important;
}
.rtwp-popup-body #rtwp-vol-range {
  position: absolute !important; inset: -8px 0 !important; width: 100% !important;
  opacity: 0 !important; cursor: pointer !important; z-index: 2 !important;
}
.rtwp-popup-body #rtwp-vol-fill {
  height: 100% !important; background: white !important; border-radius: 2px !important;
  pointer-events: none !important;
}

/* Keyboard hints – kompakt, nur Keys ohne Text-Labels */
#rtwp-popup-kb-hints {
  display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important;
}
.rtwp-kh {
  display: flex !important; align-items: center !important; gap: 3px !important;
}
.rtwp-kh span { display: none !important; }   /* Labels versteckt, nur Keys */
.rtwp-kh kbd, #rtwp-popup-kb-hints kbd {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 2px solid rgba(0,0,0,0.3) !important;
  border-radius: 4px !important; padding: 2px 5px !important;
  font-size: 10px !important; font-family: 'DM Mono', monospace !important;
  color: #F2EFE9 !important; white-space: nowrap !important;
}
.rtwp-kh span, #rtwp-popup-kb-hints #rtwp-kb-help span {
  display: none !important;   /* in Dock: Labels aus */
  font-size: 10px !important; color: #48454F !important;
}
#rtwp-kb-help {
  display: flex !important; align-items: center !important; gap: 4px !important;
  background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important;
}

/* Spacer + Donate */
#rtwp-popup-dock-spacer { display: none !important; }  /* entfernt, kein overflow */
#rtwp-popup-donate {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 8px 13px !important; border-radius: 20px !important;
  background: rgba(192,39,45,0.12) !important; border: 1px solid rgba(192,39,45,0.3) !important;
  color: #F9A8AB !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#rtwp-popup-donate:hover { background: rgba(192,39,45,0.22) !important; }
#rtwp-popup-donate svg { width: 13px !important; height: 13px !important; fill: #F9A8AB !important; display: block !important; }

/* Keyboard modal in popup */
.rtwp-popup-body #rtwp-kb-modal {
  bottom: 72px !important; /* above dock */
}

#rtwp-panel-grid {
  display: grid !important;
  grid-template-columns: auto 1fr 1fr !important;
  height: 100% !important;
  background: #141417 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 -8px 60px rgba(0,0,0,0.7) !important;
}

/* col cover
 * Rechnung: panel = 45vh, padding = 12px rundum, badge ≈ 44px, gap = 10px
 * Cover-Seite = 45vh - 24px (padding) - 44px (badge) - 10px (gap) = 45vh - 78px
 * Spaltenbreite = Cover-Seite + 24px (padding) = 45vh - 54px
 */
#rtwp-col-cover {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  padding: 12px !important; gap: 10px !important;
  background: #0C0C0E !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important; width: calc(45vh - 54px) !important; box-sizing: border-box !important;
}
#rtwp-pcov {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; aspect-ratio: 1 !important; border-radius: 10px !important;
  overflow: hidden !important; background: #1C1C21 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important; flex-shrink: 0 !important;
  position: relative !important;
}
#rtwp-pcov svg { display: block !important; width: 35% !important; height: 35% !important; }
#rtwp-pcov svg path { fill: #48454F !important; }
#rtwp-pcov img { display: none !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#rtwp-pcov img.on { display: block !important; }
/* Kill old small bar ring (injected by older JS versions) */
#rtwp-player #rtwp-prog-ring {
  display: none !important;
}

/* Formation profile image – row layout inside meta column */
#rtwp-meta-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}
#rtwp-meta-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Formation profile image wrapper – clips to circle */
#rtwp-fimg-wrap {
  display: none;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  margin-top: 4px !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
}
#rtwp-fimg-wrap.on {
  display: block !important;
  opacity: 1 !important;
}
#rtwp-fimg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* col meta */
#rtwp-col-meta {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: 24px 26px !important; overflow-y: auto !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
#rtwp-pch     { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #D4A847 !important; }
#rtwp-ptitle  { display: block !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #F2EFE9 !important; }
#rtwp-partist { display: block !important; font-size: 17px !important; color: #888490 !important; font-weight: 500 !important; margin-top: 2px !important; }
#rtwp-palbum  { display: block !important; font-size: 14px !important; color: #48454F !important; margin-top: 1px !important; }
#rtwp-pgenre  { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 12px !important; }
#rtwp-pplayed { display: block !important; font-size: 12px !important; color: #48454F !important; margin-top: 10px !important; }

/* Formation-Link-Icon direkt nach Künstlername */
#rtwp-flink {
  display: none !important;
  font-size: 14px !important;
  opacity: 0.55 !important;
  margin-left: 6px !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  transition: opacity 0.15s !important;
  cursor: pointer !important;
}
#rtwp-flink[style*="inline"], #rtwp-flink.on { display: inline !important; }
#rtwp-flink:hover { opacity: 1 !important; }

.rtwp-gtag { display: inline-block !important; padding: 3px 10px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 600 !important; background: #1C1C21 !important; color: #888490 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.rtwp-gtag.pri { background: rgba(192,39,45,0.15) !important; color: #F9A8AB !important; border-color: rgba(192,39,45,0.3) !important; }

#rtwp-stars { display: flex !important; align-items: center !important; gap: 3px !important; margin-top: 14px !important; }
.rtwp-star { display: inline-block !important; font-size: 26px !important; color: #48454F !important; background: none !important; border: none !important; cursor: pointer !important; line-height: 1 !important; padding: 0 !important; }
.rtwp-star.on, .rtwp-star.hi { color: #D4A847 !important; }
#rtwp-star-hint { display: inline-block !important; font-size: 12px !important; color: #48454F !important; margin-left: 6px !important; }
#rtwp-star-avg { display: none !important; font-size: 11px !important; color: #D4A847 !important; margin-left: 6px !important; background: rgba(212,168,71,0.1) !important; padding: 2px 6px !important; border-radius: 10px !important; }
#rtwp-star-avg.on { display: inline-block !important; }

/* CD-Kauf-Button */
#rtwp-cd-buy { display: none !important; color: #86EFAC !important; border-color: rgba(34,197,94,0.3) !important; background: rgba(34,197,94,0.08) !important; }
#rtwp-cd-buy.on { display: inline-flex !important; }

#rtwp-evt { display: none !important; align-items: flex-start !important; gap: 8px !important; margin-top: 14px !important; padding: 10px 14px !important; background: rgba(34,197,94,0.08) !important; border: 1px solid rgba(34,197,94,0.2) !important; border-radius: 6px !important; font-size: 13px !important; color: #86EFAC !important; }
#rtwp-evt.on { display: flex !important; }
#rtwp-evt-text { flex: 1 !important; line-height: 1.4 !important; }
#rtwp-evt-link { display: inline !important; font-size: 12px !important; font-weight: 700 !important; color: #22C55E !important; flex-shrink: 0 !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important; }
#rtwp-evt-link.hidden { display: none !important; }

#rtwp-acts { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 16px !important; align-items: center !important; }
.rtwp-act { display: none !important; align-items: center !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #888490 !important; text-decoration: none !important; cursor: pointer !important; }
.rtwp-act.on { display: inline-flex !important; }
.rtwp-donate { display: inline-flex !important; color: #F9A8AB !important; border-color: rgba(192,39,45,0.3) !important; background: rgba(192,39,45,0.12) !important; cursor: pointer !important; }
/* Donate text above Spenden button in panel */
#rtwp-donate-text {
  display: block !important; width: 100% !important;
  font-size: 12px !important; line-height: 1.5 !important;
  color: #888490 !important; margin: 8px 0 6px !important;
}
/* Mini heart button in bar */
#rtwp-bar-donate {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; flex-shrink: 0 !important;
  text-decoration: none !important; cursor: pointer !important;
  border-radius: 50% !important; transition: background .15s !important;
}
#rtwp-bar-donate:hover { background: rgba(192,39,45,0.15) !important; }
#rtwp-bar-donate svg {
  display: block !important; width: 20px !important; height: 20px !important;
  fill: rgba(192,39,45,0.7) !important; flex-shrink: 0 !important;
  transition: fill .15s !important;
}
#rtwp-bar-donate:hover svg { fill: #C0272D !important; }

/* col tabs */
#rtwp-col-tabs { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
#rtwp-tabs-bar { display: flex !important; align-items: stretch !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; padding: 0 16px !important; height: 46px !important; flex-shrink: 0 !important; }
.rtwp-tab { display: flex !important; align-items: center !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #888490 !important; background: none !important; border: none !important; border-bottom: 2.5px solid transparent !important; margin-bottom: -1px !important; cursor: pointer !important; }
.rtwp-tab:hover { color: #F2EFE9 !important; }
.rtwp-tab.rtwp-on { color: #C0272D !important; border-bottom-color: #C0272D !important; }
/* Bio-Tab ausblenden wenn keine Biografie vorhanden (class-basiert wegen !important) */
.rtwp-tab.rtwp-tab-hidden { display: none !important; }
#rtwp-close { display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; width: 34px !important; height: 34px !important; align-self: center !important; border-radius: 50% !important; background: #1C1C21 !important; border: none !important; cursor: pointer !important; color: #888490 !important; font-size: 16px !important; flex-shrink: 0 !important; }
#rtwp-close:hover { color: #F2EFE9 !important; background: #242429 !important; }
#rtwp-tab-content { display: block !important; flex: 1 !important; overflow: hidden !important; position: relative !important; }
.rtwp-pnl { display: none !important; height: 100% !important; overflow-y: auto !important; padding: 14px 16px !important; }
.rtwp-pnl.rtwp-on { display: block !important; }

/* history */
#rtwp-hist-list { display: flex !important; flex-direction: column !important; gap: 2px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.rtwp-hi { display: flex !important; align-items: center !important; gap: 12px !important; padding: 9px 8px !important; border-radius: 6px !important; cursor: default !important; }
.rtwp-hi:hover { background: #1C1C21 !important; }
.rtwp-hi.cur .rtwp-ht { color: #C0272D !important; font-weight: 700 !important; }
.rtwp-hm { display: block !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
.rtwp-ht { display: block !important; font-size: 14px !important; color: #F2EFE9 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.rtwp-ha { display: block !important; font-size: 12px !important; color: #888490 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.rtwp-halbum { display: block !important; font-size: 10px !important; color: #5A5860 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 1px !important; font-style: italic !important; }
.rtwp-hr { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; flex-shrink: 0 !important; min-width: 44px !important; }
.rtwp-htime { display: block !important; font-size: 12px !important; color: #48454F !important; white-space: nowrap !important; }
/* Shop-Link in History */
.rtwp-hshop { display: none !important; flex-shrink: 0 !important; font-size: 15px !important; opacity: 0.35 !important; text-decoration: none !important; line-height: 1 !important; transition: opacity 0.15s !important; cursor: pointer !important; }
.rtwp-hshop.on { display: block !important; }
.rtwp-hshop:hover { opacity: 1 !important; }
.rtwp-hshop.rtwp-hshop-ask { opacity: 0.55 !important; font-size: 13px !important; }
.rtwp-hshop.rtwp-hshop-ask:hover { opacity: 1 !important; }
/* CD kaufen Button im Panel – unsicherer Zustand */
#rtwp-cd-buy.rtwp-cdask { color: #D4A847 !important; border-color: rgba(212,168,71,0.3) !important; background: rgba(212,168,71,0.08) !important; }
/* Shop-Picker Dropdown */
#rtwp-shop-picker a:hover { background: rgba(255,255,255,0.06); }
.rtwp-hch   { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: #D4A847 !important; text-transform: uppercase !important; }

/* bio */
#rtwp-bio { display: block !important; font-size: 14px !important; line-height: 1.75 !important; color: #F2EFE9 !important; margin-bottom: 14px !important; }
#rtwp-bio-links { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 14px !important; }
#rtwp-bio-links a { display: inline-flex !important; align-items: center !important; padding: 9px 18px !important; border-radius: 20px !important; font-size: 14px !important; font-weight: 600 !important; background: #1C1C21 !important; color: #F2EFE9 !important; border: 1px solid rgba(255,255,255,0.15) !important; text-decoration: none !important; }
#rtwp-bio-links a:hover { background: #242429 !important; border-color: #C0272D !important; }
.rtwp-mtitle { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #888490 !important; margin: 12px 0 8px !important; }
.rtwp-member { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; width: 70px !important; }
.rtwp-member img { display: block !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; object-fit: cover !important; }
.rtwp-member-ph { display: flex !important; align-items: center !important; justify-content: center !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: #1C1C21 !important; font-size: 20px !important; color: #48454F !important; }
.rtwp-mname { display: block !important; font-size: 11px !important; color: #F2EFE9 !important; text-align: center !important; line-height: 1.3 !important; }
.rtwp-mrole { display: block !important; font-size: 10px !important; color: #48454F !important; text-align: center !important; }

/* discography */
#rtwp-disco { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)) !important; gap: 12px !important; }
.rtwp-alb { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.rtwp-alb img { display: block !important; width: 100% !important; aspect-ratio: 1 !important; border-radius: 6px !important; object-fit: cover !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.rtwp-alb-ph { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; aspect-ratio: 1 !important; border-radius: 6px !important; background: #1C1C21 !important; font-size: 24px !important; color: #48454F !important; }
.rtwp-alb-name { display: block !important; font-size: 11px !important; color: #888490 !important; line-height: 1.3 !important; overflow: hidden !important; }

/* Utility */
.rtwp-loading { display: block !important; font-size: 14px !important; color: #48454F !important; }
.rtwp-members-list { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes rtwp-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,39,45,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(192,39,45,0); }
}
@keyframes rtwp-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.35; transform:scale(1.5); }
}
@keyframes rtwp-spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   MOBILE CHANNEL PICKER  (#rtwp-ch-picker)
════════════════════════════════════════════════════════════════ */
#rtwp-ch-picker { display: none !important; }

#rtwp-ch-picker-btn {
  display: flex !important; align-items: center !important; gap: 6px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important; padding: 0 12px 0 14px !important;
  height: 38px !important; cursor: pointer !important;
  color: #F2EFE9 !important; font-size: 13px !important; font-weight: 600 !important;
  white-space: nowrap !important; max-width: 160px !important;
}
#rtwp-ch-picker-btn svg { fill: #888490 !important; flex-shrink: 0 !important; transition: transform .2s !important; }
#rtwp-ch-picker-btn[aria-expanded="true"] svg { transform: rotate(180deg) !important; }
#rtwp-ch-picker-label { overflow: hidden !important; text-overflow: ellipsis !important; }

#rtwp-ch-dropdown {
  display: none !important;
  position: absolute !important;
  bottom: 68px !important;
  left: 0 !important;
  min-width: 200px !important; max-width: 90vw !important;
  background: #1a1a22 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.7) !important;
  padding: 6px !important;
  z-index: 99999 !important;
  flex-direction: column !important; gap: 2px !important;
  overflow-y: auto !important; max-height: 60vh !important;
}
#rtwp-ch-dropdown.open { display: flex !important; }
#rtwp-ch-dropdown .rtwp-ch {
  flex: 0 0 auto !important; width: 100% !important; max-width: none !important;
  justify-content: flex-start !important; text-align: left !important;
  padding: 9px 14px !important; border-radius: 8px !important;
  border: none !important; border-bottom: none !important;
  font-size: 14px !important; font-weight: 600 !important;
  background: transparent !important; color: #aaa8b4 !important;
}
#rtwp-ch-dropdown .rtwp-ch:hover { background: rgba(255,255,255,0.07) !important; color: #F2EFE9 !important; }
#rtwp-ch-dropdown .rtwp-ch.rtwp-on { background: rgba(192,39,45,0.15) !important; color: #F2EFE9 !important; }
.rtwp-ch-sep-label {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: #48454F !important;
  padding: 8px 14px 4px !important; display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 640px  –  Spotify-Style
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Body & bar sizing ───────────────────────────────────── */
  body { padding-bottom: 100px !important; }
  #rtwp-bar-main { height: 60px !important; padding: 0 14px !important; gap: 10px !important; }
  #rtwp-vol { display: none !important; }

  /* ── Icons ausblenden auf Mobile ────────────────────────── */
  #rtwp-bar-ctrl #rtwp-popup-btn,
  #rtwp-bar-ctrl #rtwp-kb-help,
  #rtwp-popup-btn,
  #rtwp-kb-help {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Bar cover (slightly smaller) ───────────────────────── */
  #rtwp-bar-cov-wrap { width: 42px !important; height: 42px !important; }
  #rtwp-bar-cov      { width: 42px !important; height: 42px !important; }

  /* ── Bar title ───────────────────────────────────────────── */
  #rtwp-bar-title  { font-size: 15px !important; }
  #rtwp-bar-artist { font-size: 12px !important; }

  /* ── Channel bar: scrollable + right-edge fade hint ─────── */
  #rtwp-bar-chs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 0 8px !important;
    gap: 2px !important;
    height: 40px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Fade-out rechts: visueller Scroll-Hinweis */
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%) !important;
    mask-image:         linear-gradient(to right, black 70%, transparent 100%) !important;
  }
  #rtwp-bar-chs::-webkit-scrollbar { display: none !important; }
  .rtwp-ch {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    border-radius: 4px 4px 0 0 !important;
  }
  .rtwp-ch-sep { flex-shrink: 0 !important; }

  /* ── Panel: Spotify-Style ────────────────────────────────── */
  html.rtwp-panel-open #rtwp-panel {
    height: calc(100dvh - 64px) !important;
    bottom: 64px !important;
  }
  /* ── Mobile panel-open: Lautstärke ausblenden ───────────── */
  html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-vol {
    display: none !important;
  }

  /* ── Mobile panel-open: Kanäle als Picker, nicht als Scrollreihe ── */
  html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-bar-chs {
    display: none !important;
  }
  html.rtwp-panel-open:not(.rtwp-popup-mode) #rtwp-ch-picker {
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    position: relative !important;
  }

  #rtwp-panel-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    overflow-y: auto !important;
    height: 100% !important;
    scrollbar-width: none !important;
  }
  #rtwp-panel-grid::-webkit-scrollbar { display: none !important; }

  /* ── col-cover: zentriert, grosses Cover ─────────────────── */
  #rtwp-col-cover {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 24px 18px !important;
    gap: 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  #rtwp-pcov {
    width: min(62vw, 230px) !important;
    height: min(62vw, 230px) !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 56px rgba(0,0,0,0.8) !important;
  }
  #rtwp-fbadge {
    width: auto !important;
    justify-content: center !important;
  }

  /* Podcast seek-controls: zentriert unter Cover */
  #rtwp-pod-meta {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── col-meta: kompakt ───────────────────────────────────── */
  #rtwp-col-meta {
    padding: 18px 20px 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    overflow-y: visible !important;
    gap: 5px !important;
  }
  #rtwp-ptitle  { font-size: clamp(17px, 5.5vw, 24px) !important; line-height: 1.2 !important; }
  #rtwp-partist { font-size: 15px !important; }
  #rtwp-palbum  { font-size: 13px !important; }
  .rtwp-star    { font-size: 22px !important; }
  #rtwp-stars   { margin-top: 2px !important; }
  #rtwp-acts    { gap: 8px !important; }
  #rtwp-donate-text { font-size: 11px !important; }

  /* Speaker portrait: angepasst */
  #rtwp-speaker-portrait {
    width: 72px !important; height: 72px !important;
    margin: 0 0 12px 12px !important;
  }
  #rtwp-speaker-portrait img { width: 72px !important; height: 72px !important; }

  /* ── col-tabs: füllt den Rest ────────────────────────────── */
  #rtwp-col-tabs {
    min-height: 280px !important;
    overflow: hidden !important;
  }
}

/* ── Sehr kleine Screens  ≤ 380px (iPhone SE etc.) ─────────── */
@media (max-width: 380px) {
  #rtwp-bar-main  { padding: 0 10px !important; gap: 8px !important; }
  #rtwp-play      { width: 46px !important; height: 46px !important; }
  #rtwp-play svg  { width: 20px !important; height: 20px !important; }
  #rtwp-bar-title { font-size: 14px !important; }
  #rtwp-bar-ch    { font-size: 10px !important; }
  #rtwp-expand, #rtwp-bar-donate { width: 30px !important; }
  #rtwp-kb-modal { right: 10px !important; left: 10px !important; }
  #rtwp-kb-modal-inner { min-width: 0 !important; }
  #rtwp-pcov {
    width: min(68vw, 200px) !important;
    height: min(68vw, 200px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE  –  #rtwp-player[data-theme="light"]
   Überschreibt alle Dark-Mode-Farben
══════════════════════════════════════════════════════════════ */
#rtwp-player[data-theme="light"] #rtwp-bar {
  background: rgba(248,248,250,0.98) !important;
  border-top: 2px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.15) !important;
}
#rtwp-player[data-theme="light"] #rtwp-bar-cov {
  background: #E8E8EC !important;
  border-color: rgba(0,0,0,0.1) !important;
}
#rtwp-player[data-theme="light"] #rtwp-prog-bar { background: rgba(0,0,0,0.1) !important; }
#rtwp-player[data-theme="light"] #rtwp-prog-panel { background: rgba(0,0,0,0.08) !important; }
#rtwp-player[data-theme="light"] #rtwp-bar-cov svg path { fill: #BBBBCC !important; }
#rtwp-player[data-theme="light"] #rtwp-bar-title { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-bar-artist { color: #666672 !important; }
#rtwp-player[data-theme="light"] #rtwp-bar-ch { color: #B08A20 !important; }
#rtwp-player[data-theme="light"] #rtwp-bar-chs {
  border-top-color: rgba(0,0,0,0.08) !important;
}
#rtwp-player[data-theme="light"] .rtwp-ch { color: #888490 !important; }
#rtwp-player[data-theme="light"] .rtwp-ch:hover { color: #0F0F14 !important; background: rgba(0,0,0,0.04) !important; }
#rtwp-player[data-theme="light"] .rtwp-ch.rtwp-on { color: #0F0F14 !important; background: rgba(0,0,0,0.06) !important; }
#rtwp-player[data-theme="light"] #rtwp-vol-range { background: #D8D8DC !important; }
#rtwp-player[data-theme="light"] #rtwp-vol-range::-webkit-slider-thumb { background: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-mute svg path { fill: #888490 !important; }
#rtwp-player[data-theme="light"] #rtwp-mute:hover svg path { fill: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-expand svg path { fill: #888490 !important; }
#rtwp-player[data-theme="light"] #rtwp-expand:hover svg path { fill: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-kb-help svg path { fill: #888490 !important; }
#rtwp-player[data-theme="light"] #rtwp-kb-help:hover svg path { fill: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-popup-btn svg path { fill: #888490 !important; }
#rtwp-player[data-theme="light"] #rtwp-popup-btn:hover svg path { fill: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-kb-modal-inner {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
}
#rtwp-player[data-theme="light"] #rtwp-kb-modal-title { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-kb-table td   { color: #444 !important; }
#rtwp-player[data-theme="light"] #rtwp-kb-table kbd  { background: #F0F0F4 !important; border-color: rgba(0,0,0,0.2) !important; border-bottom-color: rgba(0,0,0,0.15) !important; color: #0F0F14 !important; }


/* Panel light */
#rtwp-player[data-theme="light"] #rtwp-panel-grid {
  background: #FFFFFF !important;
  border-top-color: rgba(0,0,0,0.1) !important;
}
#rtwp-player[data-theme="light"] #rtwp-col-cover {
  background: #F2F2F6 !important;
  border-right-color: rgba(0,0,0,0.08) !important;
}
#rtwp-player[data-theme="light"] #rtwp-pcov {
  background: #E4E4E8 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
#rtwp-player[data-theme="light"] #rtwp-pcov svg path { fill: #BBBBCC !important; }
#rtwp-player[data-theme="light"] #rtwp-fbadge {
  background: #E8E8EC !important;
  border-color: rgba(0,0,0,0.1) !important;
}
#rtwp-player[data-theme="light"] #rtwp-col-meta {
  border-right-color: rgba(0,0,0,0.08) !important;
}
#rtwp-player[data-theme="light"] #rtwp-pch { color: #B08A20 !important; }
#rtwp-player[data-theme="light"] #rtwp-ptitle { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-partist { color: #444450 !important; }
#rtwp-player[data-theme="light"] #rtwp-palbum { color: #888490 !important; }
#rtwp-player[data-theme="light"] #rtwp-pplayed { color: #AAAABC !important; }
#rtwp-player[data-theme="light"] #rtwp-fname { color: #444450 !important; }
#rtwp-player[data-theme="light"] .rtwp-gtag { background: #E8E8EC !important; color: #444450 !important; border-color: rgba(0,0,0,0.1) !important; }
#rtwp-player[data-theme="light"] .rtwp-gtag.pri { background: rgba(192,39,45,0.1) !important; color: #B02020 !important; }
#rtwp-player[data-theme="light"] .rtwp-star { color: #CCCCDD !important; }
#rtwp-player[data-theme="light"] .rtwp-star.on, #rtwp-player[data-theme="light"] .rtwp-star.hi { color: #D4A847 !important; }
#rtwp-player[data-theme="light"] #rtwp-star-hint { color: #AAAABC !important; }
#rtwp-player[data-theme="light"] .rtwp-act { border-color: rgba(0,0,0,0.15) !important; color: #444450 !important; }
#rtwp-player[data-theme="light"] #rtwp-tabs-bar { border-bottom-color: rgba(0,0,0,0.08) !important; }
#rtwp-player[data-theme="light"] .rtwp-tab { color: #888490 !important; }
#rtwp-player[data-theme="light"] .rtwp-tab:hover { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] .rtwp-tab.rtwp-on { color: #C0272D !important; }
#rtwp-player[data-theme="light"] #rtwp-close { background: #E8E8EC !important; color: #666672 !important; }
#rtwp-player[data-theme="light"] #rtwp-close:hover { background: #DADADF !important; color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] .rtwp-hi:hover { background: #F2F2F6 !important; }
#rtwp-player[data-theme="light"] .rtwp-ht { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] .rtwp-ha { color: #666672 !important; }
#rtwp-player[data-theme="light"] .rtwp-htime { color: #AAAABC !important; }
#rtwp-player[data-theme="light"] .rtwp-hch { color: #B08A20 !important; }
#rtwp-player[data-theme="light"] #rtwp-bio { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] #rtwp-bio-links a { background: #F2F2F6 !important; color: #0F0F14 !important; border-color: rgba(0,0,0,0.12) !important; }
#rtwp-player[data-theme="light"] #rtwp-bio-links a:hover { background: #E8E8EC !important; }
#rtwp-player[data-theme="light"] .rtwp-mname { color: #0F0F14 !important; }
#rtwp-player[data-theme="light"] .rtwp-mrole { color: #888490 !important; }
#rtwp-player[data-theme="light"] .rtwp-member-ph { background: #E4E4E8 !important; color: #AAAABC !important; }
#rtwp-player[data-theme="light"] .rtwp-alb img { border-color: rgba(0,0,0,0.1) !important; }
#rtwp-player[data-theme="light"] .rtwp-alb-ph { background: #E4E4E8 !important; color: #AAAABC !important; }
#rtwp-player[data-theme="light"] .rtwp-alb-name { color: #666672 !important; }
#rtwp-player[data-theme="light"] .rtwp-loading { color: #AAAABC !important; }

/* ══════════════════════════════════════════════════════════════
   ONBOARDING HINT – Erster Besuch / Stop-Status
══════════════════════════════════════════════════════════════ */

#rtwp-hint {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 60px !important;
  background: #1C1C21 !important;
  border: 1px solid rgba(192,39,45,0.5) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  max-width: 260px !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.7) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}

#rtwp-hint::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -7px !important;
  right: 22px !important;
  width: 12px !important; height: 12px !important;
  background: #1C1C21 !important;
  border-right: 1px solid rgba(192,39,45,0.5) !important;
  border-bottom: 1px solid rgba(192,39,45,0.5) !important;
  transform: rotate(45deg) !important;
}

#rtwp-hint.rtwp-hint-visible {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#rtwp-hint.rtwp-hint-dismissed {
  display: none !important;
  opacity: 0 !important;
}

#rtwp-hint-icon {
  display: block !important;
  font-size: 22px !important;
  margin-bottom: 6px !important;
  animation: rtwp-hint-bounce 1.4s ease-in-out infinite !important;
  text-align: right !important;
}

#rtwp-hint-text {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #F2EFE9 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

#rtwp-hint-text strong {
  display: inline !important;
  color: #C0272D !important;
  font-weight: 700 !important;
}

/* Pulsing ring on play button during hint */
#rtwp-bar.rtwp-hint-active #rtwp-play {
  animation: rtwp-hint-pulse 1.6s ease-in-out infinite !important;
}

/* Subtle glow on channel buttons during hint */
#rtwp-bar.rtwp-hint-active .rtwp-ch {
  animation: rtwp-ch-glow 2s ease-in-out infinite !important;
}

/* Position parent for hint tooltip */
#rtwp-bar-ctrl {
  position: relative !important;
}

@keyframes rtwp-hint-bounce {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}

@keyframes rtwp-hint-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(192,39,45,0.5); }
  50%       { box-shadow: 0 0 40px rgba(192,39,45,0.9), 0 0 0 8px rgba(192,39,45,0.15); }
}

@keyframes rtwp-ch-glow {
  0%, 100% { background: rgba(255,255,255,0.0) !important; }
  50%       { background: rgba(192,39,45,0.08) !important; }
}

/* Mobile: reposition hint */
@media (max-width: 640px) {
  #rtwp-hint {
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }
  #rtwp-hint::after {
    right: 38px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PODCAST MODULE
   ═══════════════════════════════════════════════════════════════ */

/* ── Channel separator between radio and podcasts ──────────────── */
.rtwp-ch-sep {
  display: inline-block !important;
  width: 1px !important; align-self: stretch !important;
  background: rgba(255,255,255,0.15) !important;
  margin: 4px 4px !important; flex-shrink: 0 !important;
}
.rtwp-ch-podcast { font-size: 11px !important; }

/* ── Seekbar ─────────────────────────────────────────────────────── */

/* ── Episode list ─────────────────────────────────────────────────── */
.rtwp-ep { cursor: pointer !important; align-items: flex-start !important; gap: 10px !important; }
.rtwp-ep:hover { background: rgba(255,255,255,0.05) !important; }
.rtwp-ep.cur { background: rgba(192,39,45,0.1) !important; }
.rtwp-ep-thumb {
  width: 52px !important; height: 52px !important; flex-shrink: 0 !important;
  object-fit: cover !important; border-radius: 6px !important;
}
.rtwp-ep-ph {
  background: #242429 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 22px !important;
}
.rtwp-ep-author{ font-size: 11px !important; color: #C9C5D0 !important; margin-right: 8px !important; font-style: italic !important; }
.rtwp-ep-date { font-size: 11px !important; color: #888490 !important; margin-right: 8px !important; }
.rtwp-ep-dur  { font-size: 11px !important; color: #888490 !important; margin-right: 6px !important; }
.rtwp-ep-no   { font-size: 10px !important; color: #555 !important; }
.rtwp-ep-pager {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; padding: 10px 12px !important;
  font-size: 12px !important; color: #888490 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  list-style: none !important;
}
.rtwp-ep-pager button {
  background: none !important; border: 1px solid rgba(255,255,255,0.15) !important;
  color: #888490 !important; font-size: 12px !important; padding: 4px 10px !important;
  border-radius: 12px !important; cursor: pointer !important;
}
.rtwp-ep-pager button:hover { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }

/* ── Shownotes ────────────────────────────────────────────────────── */
.rtwp-shownotes {
  font-size: 13px !important; line-height: 1.6 !important;
  color: #C9C5D0 !important; padding: 4px 0 !important;
}
.rtwp-shownotes p  { margin: 0 0 10px !important; }
.rtwp-shownotes a  { color: #C0272D !important; text-decoration: underline !important; }
.rtwp-shownotes ul { padding-left: 18px !important; margin: 0 0 10px !important; }

/* Light mode mobile border corrections */
@media (max-width: 640px) {
  #rtwp-player[data-theme="light"] #rtwp-col-cover {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
  #rtwp-player[data-theme="light"] #rtwp-col-meta {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
}
#rtwp-player[data-theme="light"] 
#rtwp-player[data-theme="light"] .rtwp-shownotes { color: #333 !important; }
#rtwp-player[data-theme="light"] .rtwp-ep-pager button { border-color: rgba(0,0,0,0.2) !important; color: #444 !important; }

/* ── Sprecher-Block im Shownotes-Panel ─────────────────────────────────── */
.rtwp-speaker-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.rtwp-speaker-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
  flex-shrink: 0 !important;
}
.rtwp-speaker-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f0f0f0 !important;
}

/* ── Podcast: pod-meta area in col-cover ─────────────────────────────── */
#rtwp-pod-meta {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* ── Speaker Portrait – right-aligned in col-meta ────────────────────── */
#rtwp-speaker-portrait {
  display: none;
  float: right !important;
  margin: 0 0 16px 16px !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  border: 3px solid rgba(255,255,255,0.18) !important;
  shape-outside: circle() !important;
}
#rtwp-speaker-portrait img {
  width: 110px !important;
  height: 110px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── Progress Ring (title row) ──────────────────────────────────────── */
#rtwp-player #rtwp-ptitle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
#rtwp-player #rtwp-prog-ring-panel {
  opacity: 0 !important;
  transition: opacity .3s !important;
  flex-shrink: 0 !important;
  /* inline-block statt block damit der Ring in der Flex-Titelzeile inline bleibt.
     Muss #rtwp-panel svg { display:block } überschreiben → gleiche Spezifizität
     aber weiter unten im File → gewinnt. */
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  overflow: visible !important;
}
#rtwp-player #rtwp-prog-ring-panel.on {
  opacity: 1 !important;
}
/* Sicherstellen dass der Ring-SVG nicht durch den generellen panel-svg-Reset
   auf display:block gesetzt wird — gezielter Override mit ID-Selektor */
#rtwp-panel #rtwp-prog-ring-panel {
  display: inline-block !important;
}
/* Kein duration → Bogen pulsiert subtil als Live-Indikator */
@keyframes rtwp-ring-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
#rtwp-player #rtwp-prog-ring-panel.on #rtwp-prog-ring-arc-panel {
  animation: rtwp-ring-pulse 2s ease-in-out infinite !important;
}
/* Wenn JS eine Countdown-Transition setzt, Pulse-Animation unterbrechen */
#rtwp-player #rtwp-prog-ring-panel.on #rtwp-prog-ring-arc-panel[style*="stroke-dashoffset"] {
  animation: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * START LAUNCHER OVERLAY  –  rt_player_start Shortcode
 * Erscheint nur wenn RTWP_Launch_Config gesetzt ist (URL-Parameter).
 * z-index 99997: über dem Blur-Overlay (99970), unter Bar+Panel (99989/99990)
 * Position: über der Panel+Bar-Fläche, kein Überlapp mit dem Player.
 * ═══════════════════════════════════════════════════════════════════════════ */

#rtwp-start-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Unterkante = Oberkante Panel (45 vh) + Bar-Höhe (64 px) im panel-open Modus */
  inset: 0 !important;
  z-index: 99997 !important;
  display: none; /* eingeblendet via JS nach init() */
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  /* Sanfter Fade-out wenn Stream gestartet wird */
  transition: opacity 0.35s ease !important;
  pointer-events: auto !important;
}

#rtwp-start-overlay.rtwp-start-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Innerer Container – zentriert den Inhalt */
#rtwp-start-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important; padding: 0 !important;
}

/* Kanal-Name über dem Button */
#rtwp-start-ch-name {
  margin: 0 !important; padding: 0 !important;
  color: rgba(255, 255, 255, 0.80) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Grosser Play-Button */
#rtwp-start-play-btn {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 112px !important;
  height: 112px !important;
  background: rgba(192, 39, 45, 0.90) !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255, 255, 255, 0.22) !important;
  cursor: pointer !important;
  box-shadow:
    0 0  0 0   rgba(192, 39, 45, 0),
    0 6px 36px rgba(192, 39, 45, 0.45),
    0 2px 14px rgba(0, 0, 0, 0.55) !important;
  transition:
    transform        0.18s ease,
    background       0.18s ease,
    box-shadow       0.18s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#rtwp-start-play-btn:hover,
#rtwp-start-play-btn:focus-visible {
  transform: scale(1.09) !important;
  background: rgba(192, 39, 45, 1) !important;
  box-shadow:
    0 0  0 8px rgba(192, 39, 45, 0.18),
    0 8px 48px rgba(192, 39, 45, 0.60),
    0 2px 18px rgba(0, 0, 0, 0.55) !important;
}

#rtwp-start-play-btn:active {
  transform: scale(0.95) !important;
  box-shadow:
    0 0  0 4px rgba(192, 39, 45, 0.15),
    0 4px 24px rgba(192, 39, 45, 0.40),
    0 2px 10px rgba(0, 0, 0, 0.50) !important;
}

/* Play-Dreieck SVG */
#rtwp-start-play-btn svg {
  width: 46px !important;
  height: 46px !important;
  fill: #ffffff !important;
  /* optische Zentrierung: Dreieck wirkt ohne Offset nach links verschoben */
  transform: translateX(4px) !important;
  flex-shrink: 0 !important;
}

/* Label unter dem Button */
#rtwp-start-label {
  margin: 0 !important; padding: 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
}

/* Mobil Portrait: Overlay anzeigen, aber Button und Layout anpassen */
@media (max-width: 640px) {
  #rtwp-start-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
    -webkit-backdrop-filter: blur(12px) brightness(0.5) !important;
    backdrop-filter: blur(12px) brightness(0.5) !important;
  }
  #rtwp-start-play-btn {
    width: 88px !important;
    height: 88px !important;
  }
  #rtwp-start-play-btn img,
  #rtwp-start-play-btn svg {
    width: 54px !important;
    height: 54px !important;
  }
  #rtwp-start-ch-name {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * START LAUNCHER OVERLAY  –  rt_player_start Shortcode (v2.10.47)
 * ═══════════════════════════════════════════════════════════════════════════ */

#rtwp-start-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset: 0 !important;
  z-index: 99997 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  transition: opacity 0.35s ease !important;
  pointer-events: auto !important;
}

#rtwp-start-overlay.rtwp-start-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

#rtwp-start-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#rtwp-start-ch-name {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* ── Edelweiss Play-Button ─────────────────────────────────────────── */
#rtwp-start-play-btn {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: #232323 !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  cursor: pointer !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55) !important;
  position: relative !important;
}

#rtwp-start-play-btn:hover,
#rtwp-start-play-btn:focus-visible {
  transform: scale(1.08) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.65) !important;
}

#rtwp-start-play-btn:active {
  transform: scale(0.96) !important;
}

/* SVG fills */
#rtwp-start-play-btn svg {
  width: 104px !important;
  height: 104px !important;
  overflow: visible !important;
}

/* Petals bloom on hover */
#rtwp-start-play-btn .rtwp-edel-petals {
  transform-origin: 48px 48px !important;
  transition: transform 0.35s ease !important;
}

#rtwp-start-play-btn:hover .rtwp-edel-petals {
  transform: scale(1.10) rotate(22.5deg) !important;
}

/* Play triangle */
#rtwp-start-play-btn .rtwp-edel-play {
  transition: opacity 0.25s ease !important;
}

#rtwp-start-label {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.40) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

@media (max-width: 640px) {
  #rtwp-start-play-btn {
    width: 88px !important;
    height: 88px !important;
  }
}

/* ── CD-Kauf Button (phono-schop.ch) ─────────────────────────────────── */
#rtwp-cd-buy { display: none !important; }
#rtwp-cd-buy.on { display: inline-flex !important; align-items: center !important; gap: 5px !important; cursor: pointer !important; }

/* ── Podcast Seekbar (Position C: in col-meta, unter Titel/Datum) ────────── */
#rtwp-seekbar-wrap {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 6px 0 4px !important;
  box-sizing: border-box !important;
  touch-action: none !important;   /* prevent iOS scroll hijack */
  -webkit-user-select: none !important;
  user-select: none !important;
}
#rtwp-player.rtwp-podcast-mode #rtwp-seekbar-wrap { display: flex !important; }
#rtwp-seek-cur, #rtwp-seek-dur {
  font-size: 10px !important;
  color: rgba(255,255,255,0.45) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 30px !important;
  font-family: inherit !important;
}
#rtwp-seek-dur { text-align: right !important; }
#rtwp-seekbar {
  flex: 1 !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  cursor: pointer !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
@media (max-width: 640px) {
  #rtwp-seekbar { height: 40px !important; }
  #rtwp-seekbar-thumb { width: 18px !important; height: 18px !important; }
  #rtwp-seek-cur, #rtwp-seek-dur { font-size: 11px !important; min-width: 34px !important; }
}
/* Track background (gray) */
#rtwp-seekbar::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.15) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
}
/* Played portion (red) */
#rtwp-seekbar-fill {
  position: absolute !important;
  left: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  height: 4px !important;
  background: #C0272D !important;
  border-radius: 2px 0 0 2px !important;
  width: 0%;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Thumb — always visible, scales on scrub */
#rtwp-seekbar-thumb {
  position: absolute !important;
  top: 50% !important; left: 0%;
  transform: translate(-50%, -50%);
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 2 !important;
}
/* ══════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════
   SHOW SKINS  –  Ambience-Konzept  (v2.20.3)

   Farbe kommt aus rt-history (skin_color-Feld, Hex → RGB via JS).
   JS setzt --rtwp-skin-rgb als inline Custom Property auf #rtwp-player,
   sobald eine Show aktiv ist. Alle Effekte nutzen ausschliesslich
   rgba(var(--rtwp-skin-rgb), alpha) — kein hardcodierter Farbwert mehr.

   Fallback wenn --rtwp-skin-rgb nicht gesetzt: 192,39,45 (Radio-Tell-Rot).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Property Fallback ────────────────────────────────────────── */
#rtwp-player {
  --rtwp-skin-rgb: 192,39,45;
}

/* ── Panel: Flex-Wrapper für Kanal-Label + Greeting nebeneinander ────────── */
#rtwp-pch-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

/* ── Show-Titel + Greeting Pills — Bar + Panel ───────────────────────────── */
/* Show-Titel: etwas prominenter (font-weight 700, leicht opaker Hintergrund)  */
#rtwp-bar-title-show,
#rtwp-show-title {
  display: none;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: background .4s ease, color .4s ease, border-color .4s ease !important;
}
/* Greeting: etwas dezenter (font-weight 600, normale Opacity) */
#rtwp-bar-greeting,
#rtwp-show-greeting {
  display: none;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: background .4s ease, color .4s ease, border-color .4s ease !important;
}

/* ── Ambience-Effekte: greifen sobald data-show-skin gesetzt ist ─────────── */
/* Bedingung: data-show-skin nicht leer — unabhängig vom konkreten Wert.     */
/* Farbe kommt ausschliesslich aus --rtwp-skin-rgb.                          */

#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-bar {
  border-top-color: rgba(var(--rtwp-skin-rgb), .55) !important;
  background-color: rgba(10,10,12,.97) !important;
  background-image: radial-gradient(ellipse at 50% 110%, rgba(var(--rtwp-skin-rgb), .10) 0%, transparent 55%) !important;
}

#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-bar-cov-wrap {
  filter: drop-shadow(0 0 8px rgba(var(--rtwp-skin-rgb), .50))
          drop-shadow(0 0 3px rgba(var(--rtwp-skin-rgb), .30)) !important;
}

#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-col-cover {
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--rtwp-skin-rgb), .11) 0%, #0C0C0E 60%) !important;
}

#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-pcov-wrap {
  filter: drop-shadow(0 0 14px rgba(var(--rtwp-skin-rgb), .45))
          drop-shadow(0 0 5px rgba(var(--rtwp-skin-rgb), .25)) !important;
}

#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-bar-greeting,
#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-show-greeting,
#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-bar-title-show,
#rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-show-title {
  background: rgba(var(--rtwp-skin-rgb), .18) !important;
  color: rgb(var(--rtwp-skin-rgb)) !important;
  border: 1px solid rgba(var(--rtwp-skin-rgb), .32) !important;
}
/* Show-Titel ohne aktiven Skin: neutrale Pill */
#rtwp-bar-title-show,
#rtwp-show-title {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* ── Transitionen ────────────────────────────────────────────────────────── */
#rtwp-bar {
  transition: background-image .6s ease, background-color .6s ease,
              border-top-color .6s ease !important;
}
#rtwp-bar-cov-wrap,
#rtwp-pcov-wrap {
  transition: filter .6s ease !important;
}
#rtwp-col-cover {
  transition: background .6s ease !important;
}

/* ── Mobile ≤ 640px: stärkerer Glow auf dem grösseren Cover ─────────────── */
@media (max-width: 640px) {
  #rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-pcov-wrap {
    filter: drop-shadow(0 0 22px rgba(var(--rtwp-skin-rgb), .52))
            drop-shadow(0 0 8px rgba(var(--rtwp-skin-rgb), .30)) !important;
  }
  #rtwp-player[data-show-skin]:not([data-show-skin=""]) #rtwp-col-cover {
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--rtwp-skin-rgb), .14) 0%, #0C0C0E 55%) !important;
  }
}