/* Beat-Player, heller Tonstudio-Look. Rot #dc2727, Text #282834, neutrale Grautoene, kein Rosa. */

/* Knopf und Welle: bewusst mit :where(), damit die Templates alles ueberschreiben koennen */
:where(.bp-play) {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 48px; height: 48px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: #dc2727; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:where(.bp-play) svg { width: 44%; height: 44%; fill: currentColor; display: block; }
.bp-play .bp-ic-pause { display: none; }
.bp-play.is-playing .bp-ic-play { display: none; }
.bp-play.is-playing .bp-ic-pause { display: block; }
.bp-play:focus-visible { outline: 2px solid #dc2727; outline-offset: 3px; }

:where(.bp-wave) { display: block; width: 100%; height: 56px; cursor: pointer; touch-action: pan-y; }

/* Untere Leiste */
#bp-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: #fff; color: #282834; border-top: 1px solid #e8e8ec;
  box-shadow: 0 -6px 24px rgba(40, 40, 52, .08);
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
  font-family: var(--font-main, "Hind", system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
#bp-player.show { transform: none; visibility: visible; transition: transform .25s ease; }
body.tls-menu-open #bp-player { display: none !important; }

#bp-player .bp-in {
  box-sizing: border-box; max-width: 1760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
#bp-player *, #bp-player *::before, #bp-player *::after { box-sizing: border-box; }

#bp-player .bp-cover {
  flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden;
  background: #f2f2f5; display: block;
}
#bp-player .bp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
#bp-player .bp-cover img[hidden] { display: none; }

#bp-player .bp-meta { flex: 0 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#bp-player .bp-title {
  font: 600 15px/1.25 var(--font-head, "Poppins", system-ui, sans-serif);
  color: #282834; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bp-player .bp-title:not([href]) { pointer-events: none; }
#bp-player .bp-sub { font-size: 13px; line-height: 1.25; color: #5c5c68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#bp-player .bp-ctrl { flex: none; display: flex; align-items: center; gap: 4px; }
#bp-player button {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: transparent;
  color: #282834; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
}
#bp-player button svg { width: 22px; height: 22px; fill: currentColor; display: block; }
#bp-player .bp-toggle { background: #dc2727; color: #fff; }
#bp-player .bp-toggle .bp-ic-play, #bp-player .bp-toggle .bp-ic-pause { display: flex; }
#bp-player .bp-toggle .bp-ic-pause { display: none; }
#bp-player .bp-toggle.is-playing .bp-ic-play { display: none; }
#bp-player .bp-toggle.is-playing .bp-ic-pause { display: flex; }
#bp-player button:focus-visible, #bp-player a:focus-visible, #bp-player input:focus-visible {
  outline: 2px solid #dc2727; outline-offset: 3px;
}
@media (hover: hover) {
  #bp-player .bp-prev:hover, #bp-player .bp-next:hover, #bp-player .bp-close:hover { background: #f2f2f5; }
  #bp-player .bp-toggle:hover { background: #b91c1c; }
  #bp-player .bp-title[href]:hover { color: #dc2727; }
}

#bp-player .bp-seekrow { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 12px; }
#bp-player .bp-bar-wave { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; cursor: pointer; touch-action: pan-y; }
#bp-player .bp-time {
  flex: none; min-width: 84px; text-align: right; font-size: 13px; line-height: 1;
  color: #5c5c68; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#bp-player .bp-time .bp-cur { color: #282834; }

#bp-player .bp-volwrap { flex: none; display: flex; align-items: center; gap: 6px; color: #5c5c68; }
#bp-player .bp-volwrap svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
#bp-player .bp-vol { width: 90px; height: 24px; margin: 0; accent-color: #dc2727; cursor: pointer; }

#bp-player .bp-msg {
  display: none; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -8px);
  padding: 8px 14px; border-radius: 999px; background: #282834; color: #fff; font-size: 14px; line-height: 1.3;
  white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
#bp-player.has-msg .bp-msg { display: block; }
#bp-player.is-loading .bp-bar-wave { opacity: .6; }

/* Platz fuer die Leiste: der dunkle Fuss laeuft darunter weiter, nichts wird verdeckt */
body.has-player .fg-site-footer { padding-bottom: var(--bp-hoehe, 0px); }
body.has-player #tls-top-btn { bottom: calc(var(--bp-hoehe, 0px) + 24px + env(safe-area-inset-bottom, 0px)); }

/* Kleine Schirme: zweizeilig, Lautstaerke aus (die steuert das Geraet) */
@media (max-width: 640px) {
  #bp-player .bp-in { gap: 6px 10px; padding-top: 8px; }
  #bp-player .bp-cover { width: 44px; height: 44px; }
  #bp-player .bp-meta { flex: 1 1 0; }
  #bp-player .bp-volwrap { display: none; }
  #bp-player .bp-seekrow { order: 5; flex: 1 1 100%; }
  #bp-player .bp-bar-wave { height: 36px; }
  #bp-player .bp-time { min-width: 76px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #bp-player .bp-volwrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #bp-player, #bp-player.show { transition: none; }
}