/* FubaSport globale Seitenbanner - optimierte Randposition */

:root {
  --fs-side-banner-page-width: 1240px;
  --fs-side-banner-width: clamp(220px, 12.2vw, 248px);
  --fs-side-banner-gap: 52px;
  --fs-side-banner-top: 190px;
}

.fs-side-banner-rail {
  position: fixed;
  top: var(--fs-side-banner-top);
  width: var(--fs-side-banner-width);
  z-index: 32;
  pointer-events: none;
}

.fs-side-banner-rail--left {
  left: max(
    18px,
    calc((100vw - var(--fs-side-banner-page-width)) / 2 - var(--fs-side-banner-width) - var(--fs-side-banner-gap))
  );
}

.fs-side-banner-rail--right {
  right: max(
    18px,
    calc((100vw - var(--fs-side-banner-page-width)) / 2 - var(--fs-side-banner-width) - var(--fs-side-banner-gap))
  );
}

.fs-side-banner {
  display: block;
  pointer-events: auto;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(5, 14, 18, .82);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.fs-side-banner:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: rgba(255,184,28,.48);
  box-shadow: 0 30px 95px rgba(0,0,0,.52);
}

.fs-side-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.fs-side-banner__label {
  display: block;
  padding: 8px 10px 9px;
  font-size: .76rem;
  line-height: 1.2;
  color: rgba(246,248,239,.70);
  text-align: center;
  background: rgba(0,0,0,.32);
}

.fs-side-banner__warning {
  display: block;
  padding: 4px 8px;
  font-size: .65rem;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  background: rgba(180, 0, 0, .88);
}

/* Bei Seiten mit zusätzlicher Subnavigation etwas tiefer starten */
body:has(.fs-wm-subnav) .fs-side-banner-rail,
body:has(.wm-subnav) .fs-side-banner-rail,
body:has(.fs-subnav) .fs-side-banner-rail {
  top: 214px;
}

/* Erst anzeigen, wenn links und rechts wirklich Platz ist */
@media (max-width: 1760px) {
  .fs-side-banner-rail {
    display: none !important;
  }
}

@media (min-width: 2100px) {
  :root {
    --fs-side-banner-width: 265px;
    --fs-side-banner-gap: 60px;
  }
}
