/* ===================================================================
   L-D-E Livemix – Gesamthörer-Anzeige
   Gehört nach /livemix/listeners.css
   =================================================================== */

.listeners-box {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;

  margin: .6rem auto 0;
  padding: .4rem .85rem;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);

  font-size: .85rem;
  color: rgba(255, 255, 255, .7);
}

.listeners-box strong {
  color: #fff;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.listeners-main {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

.listeners-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transition: background .3s, box-shadow .3s;
}

.listeners-box.is-live .listeners-dot {
  background: #00e5a0;
  box-shadow: 0 0 8px rgba(0, 229, 160, .8);
}

.listeners-detail {
  padding-left: .55rem;
  border-left: 1px solid rgba(255, 255, 255, .12);
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 420px) {
  .listeners-detail {
    padding-left: 0;
    border-left: 0;
    flex-basis: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listeners-dot { transition: none; }
  .listeners-box.is-live .listeners-dot { box-shadow: none; }
}