/* FubaSport Matchseiten: breite, saubere Datenboxen */

.fs-match-wide-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.fs-match-wide-grid > .fs-match-wide-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
}

/* Vor-dem-Spiel-Box kompakter */
.fs-match-before-card {
  min-height: 0 !important;
}

.fs-match-before-card > p {
  max-width: 980px;
}

.fs-match-before-card ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 24px;
  margin-top: 16px;
}

/* Livebereich als breite Matchcenter-Fläche */
.fs-match-live-card {
  min-height: 0 !important;
}

.fs-match-live-card > p {
  max-width: 980px;
}

/* vorhandenes Live-Modul breiter und weniger gequetscht */
.fs-match-live-card .fs-live-enhanced,
.fs-match-live-card #matchLiveTimeline,
.fs-match-live-card [class*="live"],
.fs-match-live-card [class*="ticker"],
.fs-match-live-card [class*="timeline"] {
  max-width: none !important;
}

/* obere Score-/Zeit-Zeile breiter darstellen */
.fs-match-live-card .fs-live-enhanced__top {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto minmax(190px, 240px) !important;
  gap: 18px !important;
  align-items: center !important;
}

/* Endstand/Spielzeit-Box bleibt rechts kompakt */
.fs-match-live-card .fs-match-time-highlight {
  justify-self: end;
}

/* Match-Feed nicht mehr wie eine schmale Handyspalte wirken lassen */
.fs-match-live-card .fs-match-feed-panel,
.fs-match-live-card .fs-match-lineup-panel,
.fs-match-live-card .fs-match-stats-panel {
  width: 100%;
  max-width: none;
}

/* Feed-Zeilen luftiger und klarer */
.fs-match-live-card .fs-match-feed-panel li,
.fs-match-live-card .fs-match-feed-panel [class*="event"],
.fs-match-live-card .fs-match-feed-panel [class*="row"] {
  line-height: 1.35;
}

/* Falls der Feed aus einzelnen Karten besteht: auf breiten Screens zweispaltig */
@media (min-width: 1050px) {
  .fs-match-live-card .fs-match-feed-panel ul,
  .fs-match-live-card .fs-match-feed-panel ol {
    columns: 2;
    column-gap: 20px;
  }

  .fs-match-live-card .fs-match-feed-panel li {
    break-inside: avoid;
    margin-bottom: 8px;
  }
}

/* Aufstellungen später als eigene breite Fläche vorbereiten */
.fs-match-live-card .fs-match-lineup-panel {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Statistiken später als eigene breite Fläche vorbereiten */
.fs-match-live-card .fs-match-stats-panel {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Mobile: alles natürlich untereinander */
@media (max-width: 900px) {
  .fs-match-live-card .fs-live-enhanced__top {
    grid-template-columns: 1fr !important;
  }

  .fs-match-live-card .fs-match-time-highlight {
    justify-self: stretch;
  }

  .fs-match-before-card ul {
    grid-template-columns: 1fr;
  }

  .fs-match-live-card .fs-match-feed-panel ul,
  .fs-match-live-card .fs-match-feed-panel ol {
    columns: 1;
  }
}

/* Mini-Fix: Livebox-Inhalt sauber innerhalb der gestrichelten Box halten */
.fs-match-live-card #matchLiveTimeline,
.fs-match-live-card .fs-live-enhanced {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.fs-match-live-card #matchLiveTimeline > .fs-live-enhanced {
  width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fs-match-live-card .fs-live-enhanced__top,
.fs-match-live-card .fs-live-enhanced__feed,
.fs-match-live-card .fs-live-enhanced__feed > *,
.fs-match-live-card .fs-match-feed-panel,
.fs-match-live-card .fs-match-feed-panel > * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.fs-match-live-card .fs-live-enhanced__event,
.fs-match-live-card .fs-live-enhanced__row,
.fs-match-live-card .fs-match-feed-panel li,
.fs-match-live-card .fs-match-feed-panel [class*="event"],
.fs-match-live-card .fs-match-feed-panel [class*="row"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}