/* === 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;
  }
}


/********************************************
 CLEAN ARTICLE LAYOUT – REVSTATE / HELIX
********************************************/

/* 1) Abstand nach oben reduzieren (unter dem Menü) */
.view-article .article-details {
    padding-top: 20px !important;   /* vorher ~120px */
    padding-bottom: 20px !important; /* vorher ~120px */
}

/* Optional: nur Desktop anpassen – Mobile lassen
@media (min-width: 992px) {
    .view-article .article-details {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
*/

/* 2) Abstand am Seitenende ebenfalls reduzieren */
.view-article #sp-main-body {
    padding-bottom: 20px !important;
}

/* 3) Abstand unter dem Intro-/Blog-Media-Bild */
.view-article .article-details .article-full-image,
.view-article .article-details .article-intro-image {
    margin-bottom: 40px !important;
}

/* 4) Social Share (“Share with your friends”) komplett ausblenden */
.view-article .article-ratings-social-share,
.view-article .social-share-block {
    display: none !important;
}

/* 5) Überschrift (H1) im Artikel: Schriftart + Responsive Größen */
.view-article .article-details .article-header h1 {
    font-family: "Oswald", sans-serif !important;
    font-weight: 700 !important;
    font-size: 48px !important;   /* Desktop */
    line-height: 1.2;
}

/* Tablet */
@media (max-width: 991px) {
    .view-article .article-details .article-header h1 {
        font-size: 36px !important;
    }
}

/* Smartphone */
@media (max-width: 575px) {
    .view-article .article-details .article-header h1 {
        font-size: 28px !important;
    }
}


/* Optional: H2–H6 im Artikel ebenfalls harmonisieren */
.view-article .article-details h2,
.view-article .article-details h3,
.view-article .article-details h4,
.view-article .article-details h5,
.view-article .article-details h6 {
    font-family: "Oswald", sans-serif !important;
}

/* Groß-/Kleinschreibung der Artikelüberschrift korrigieren */
.view-article .article-details .article-header h1 {
    text-transform: none !important;
}