/* === Fixierte Leiste === */
.ti90s-player{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex; align-items: center; gap: 1rem;
  padding: 12px 16px;
  border: 4px solid #FA26A0; border-radius: 20px 20px 0 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(0,0,0,.35), 0 0 14px rgba(250,38,160,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
body{ padding-bottom: 84px; } /* Platz für Leiste */

/* Play/Pause links – Button-Style */
.ti90s-btn{
  appearance:none; border:0; border-radius:999px;
  padding: 12px 22px; cursor:pointer; color:#111;
  background-image: linear-gradient(135deg,#FA26A0,#ffffff);
  font-weight:900; letter-spacing:.3px; font-size:1.1rem;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ti90s-btn:hover{ transform: scale(1.05); box-shadow:0 12px 22px rgba(0,0,0,.3); }

/* Sendername (rechts vom Button) – größer, #FA26A0 */
.ti90s-brand{
  font-weight:900; letter-spacing:.5px;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  color:#FA26A0; white-space:nowrap;
  text-shadow: 0 0 10px rgba(250,38,160,.4);
}

/* Scroller (gleich groß wie Brand, weiß) – nimmt Restbreite */
.ti90s-scroller{
  flex: 1 1 auto; min-width: 120px; overflow:hidden;
  color:#fff; font-size: clamp(1.3rem, 3.2vw, 1.8rem); font-weight:900;
}
.ti90s-scroll-track{ display:inline-block; white-space:nowrap; will-change: transform; }
.ti90s-now{ padding-right: 2rem; }
.ti90s-ghost{ padding-left: 2rem; }

/* Marquee wird per JS nur bei Bedarf aktiviert */
.ti90s-marquee{ animation: ti90s-marquee linear infinite; animation-duration: var(--dur, 16s); }
@keyframes ti90s-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Lautstärke rechts */
.ti90s-vol{
  display:flex; align-items:center; gap:10px; margin-left:.5rem;
  font-size:1rem; color:#ddd; white-space:nowrap;
}
.ti90s-vol input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width: 200px; height:8px; border-radius:999px; outline:none;
  background: rgba(255,255,255,.22);
}
.ti90s-vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#FA26A0; border:2px solid #111;
  box-shadow:0 0 12px rgba(250,38,160,.6); cursor:pointer;
}
.ti90s-vol input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#FA26A0; border:2px solid #111;
  box-shadow:0 0 12px rgba(250,38,160,.6); cursor:pointer;
}


/* Button sicher klickbar halten */
.ti90s-player{ z-index: 99999; pointer-events: auto; }
.ti90s-btn{ pointer-events: auto; position: relative; }

/* --- MOBILE AUSBLENDEN: Fußleisten-Player verstecken --- */
/* Schwelle nach Wunsch anpassen (z. B. 768px oder 640px) */
@media (max-width: 768px){
  /* Player unsichtbar + nimmt keinen Platz ein + ist nicht anklickbar */
  .ti90s-player{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Seiteninhalt wieder bis zum unteren Rand laufen lassen */
  body{
    padding-bottom: 0 !important;
  }
}