/**
 * More Than Sports TV — Hauptstylesheet
 *
 * Struktur:
 *  1. CSS-Variablen (Brand-Tokens)
 *  2. Reset / Body
 *  3. Navigation
 *  4. Buttons
 *  5. Hero
 *  6. Section-Header
 *  7. Sportarten-Karussell (3D)
 *  8. TV-Programm
 *  9. Highlights
 *  10. Empfang
 *  11. Footer
 *  12. Loading-States
 *  13. Responsive
 */

/* === 1. CSS-VARIABLEN ===
   MV+ (Motorvision) Corporate Design
   ------------------------------------------------------------------
   Markenfarben (Brand Styleguide, Farbkarte S. 15):
     MV Racing Blue    #00263a  RGB 0/38/58     — Primär, dunkle Flächen
     MV Racing Yellow  #ffd700  RGB 255/215/0   — Primär, Akzent/CTA/Links
     MV Racing Petrol  #375f6e  RGB 55/95/110   — Sekundär, Ränder/Auszeichnung

   Hinweis zur Namensgebung: Die bestehenden Token-Namen (--mts-gold …)
   bleiben aus Kompatibilitätsgründen erhalten und tragen jetzt die
   MV-Werte. --mts-gold* = Racing Yellow (Akzent), die dunklen Flächen
   sind auf Racing Blue umgestellt. Zusätzlich stehen sprechende
   --mv-*-Aliase bereit.
   ------------------------------------------------------------------ */
:root {
  /* --- MV+ Brand-Aliase (sprechend) --- */
  --mv-blue: #00263a;      /* Racing Blue   */
  --mv-yellow: #ffd700;    /* Racing Yellow */
  --mv-petrol: #375f6e;    /* Racing Petrol */

  /* --- Akzent (ex "gold") = MV Racing Yellow --- */
  --mts-gold: #ffd700;
  --mts-gold-light: #ffe14d;
  --mts-gold-dark: #e6c200;
  --mts-gold-deep: #b39a00;
  --mts-gold-glow: rgba(255, 215, 0, 0.35);

  /* --- Neutrale/kühle Töne (petrol-getönt statt neutralgrau) --- */
  --mts-silver: #cdd8de;
  --mts-silver-dim: #93a7b2;

  /* --- Dunkle Flächen auf Basis Racing Blue --- */
  --mts-black: #001622;        /* tiefste Ebene (Blau-Schwarz)      */
  --mts-dark: #00263a;         /* Racing Blue — Haupt-Oberfläche     */
  --mts-card: #0c3247;         /* Karten                            */
  --mts-card-hover: #103f58;   /* Karten Hover                      */
  --mts-border: #1c4a63;       /* Ränder                            */
  --mts-border-light: #375f6e; /* Petrol — hellere Ränder/Akzente   */

  --mts-text: #ffffff;
  --mts-muted: #7f97a3;

  /* Schriften — Söhne (vom Kunden lizenziert, Klim Type Foundry)
     Hierarchie:
     - --font-display:    große Plakat-Headlines (Hero, Section-Titles, Karussell-Names)
                          "Söhne Breit" (breit & fett) — passend zur MV+ Wortmarke
     - --font-headline:   Subtitles, Tags, Kategorie-Labels, Buttons, Navigation
                          "Söhne" (Halbfett 600) — klar & gut lesbar in kleinen Größen
     - --font-body:       Fließtext — "Söhne" Buch (400)
     - --font-display-alt: Reserve-Display (identisch Söhne Breit)
     - --font-ui:         UI-Elemente (Backend-Design-Option referenziert diese Variable)
  */
  --font-display: 'Söhne Breit', 'Söhne', 'Arial', sans-serif;
  --font-headline: 'Söhne', 'Arial', sans-serif;
  --font-display-alt: 'Söhne Breit', 'Söhne', 'Arial', sans-serif;
  --font-body: 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Alternative Glyphenformen aktivieren — z.B. für besondere Akzent-Bereiche */
.use-alt-font, .use-alt-font * {
  font-family: var(--font-display-alt) !important;
}

/* === 2. RESET / BODY === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mts-theme {
  font-family: var(--font-body);
  background: var(--mts-black);
  color: var(--mts-text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.screen-reader-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.screen-reader-text:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 12px; background: var(--mts-gold); color: var(--mts-black); z-index: 9999; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* === 3. NAVIGATION === */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 22, 34, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mts-border);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 56px; width: auto; display: block; }
.custom-logo { height: 56px !important; width: auto !important; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; }
.nav-links a {
  color: var(--mts-text); text-decoration: none;
  font-family: var(--font-headline); font-weight: 600; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.nav-links a:hover, .nav-links .current-menu-item a, .nav-links a.active {
  border-bottom-color: var(--mts-gold); color: var(--mts-gold);
}
.nav-cta { display: flex; gap: 16px; align-items: center; }

.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mts-gold);
}
.live-dot {
  width: 8px; height: 8px; background: var(--mts-gold); border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--mts-gold-glow); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
}

/* === 4. BUTTONS === */
.btn {
  font-family: var(--font-headline); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 11px 22px; border: none; cursor: pointer;
  font-size: 13px; transition: all 0.2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--mts-gold-light) 0%, var(--mts-gold) 50%, var(--mts-gold-dark) 100%);
  color: var(--mts-black); padding: 12px 26px;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.25);
}
.btn-primary:hover { box-shadow: 0 4px 24px var(--mts-gold-glow); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--mts-text); border: 1px solid var(--mts-border-light); }
.btn-ghost:hover { border-color: var(--mts-gold); color: var(--mts-gold); }

/* === 5. HERO === */
.hero {
  /* v1.18 Punkt 1: Hero auf max-width 1400px begrenzen, damit Bilder
     auf Breitbildschirmen nicht ins Unendliche skalieren. */
  position: relative; min-height: 640px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex; align-items: center;
  overflow: hidden; background: var(--mts-dark);
}
/* v1.37 Punkt 1+2: Archive-Hero — Headline klebt am unteren Rand (kein
   "Abstand 2" zwischen Header und Headline). Werte via CSS-Variablen
   aus dem Backend steuerbar.
   v1.38: muss NACH .hero definiert werden, sonst gewinnt .hero per
   späterer Source-Order trotz gleicher Spezifität. */
.hero.hero--archive {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  /* v1.39.2: KEINE feste Mindesthöhe mehr — die Höhe ergibt sich allein
     aus den beiden Padding-Reglern. Default 0; ein optionaler Min-Höhe-
     Regler (--mts-archive-hero-min-height) bleibt für Etappe B möglich. */
  min-height: var(--mts-archive-hero-min-height, 0);
  display: flex;
  align-items: flex-end; /* Headline klebt unten */
  /* Vertikale Abstände kommen AUSSCHLIESSLICH von hier (Backend-Regler). */
  padding: var(--mts-archive-hero-padding-top, 0) 32px var(--mts-archive-hero-padding-bottom, 64px);
  box-sizing: border-box;
}
.hero.hero--archive .hero-content {
  position: relative;
  width: 100%;
  z-index: 2;
  /* v1.39.2 FIX: das generische .hero-content trägt sonst festes
     padding:80px 32px — das stapelte sich auf die Regler-Werte und ließ
     die Abstände "nicht reagieren". Im Archiv-Hero vertikal auf 0 setzen,
     horizontal übernimmt das äußere 32px-Padding. */
  padding: 0;
  display: block; /* kein Grid für die einzelne Archiv-Headline */
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.45) saturate(0.85);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 22, 34,0.75) 0%, rgba(0, 22, 34,0.35) 45%, rgba(0, 22, 34,0.85) 100%),
    radial-gradient(ellipse at 25% 35%, rgba(255, 215, 0, 0.15) 0%, transparent 55%);
}
.hero-content {
  position: relative; max-width: 1400px; margin: 0 auto;
  padding: 80px 32px; width: 100%;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: center; z-index: 2;
}
.hero-text .tag {
  display: inline-block;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--mts-gold);
  padding: 7px 16px; border: 1px solid var(--mts-gold);
  margin-bottom: 26px;
  background: rgba(0, 22, 34,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92; letter-spacing: -0.5px;
  text-transform: uppercase; margin-bottom: 24px;
  color: var(--mts-text);
  text-shadow: 0 4px 24px rgba(0,0,0,0.8);
  font-weight: 900;
}
.hero-text h1 .accent {
  display: block; color: var(--mts-gold);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 4px 24px rgba(0,0,0,0.8);
}
.hero-text p {
  font-size: 18px; color: var(--mts-silver);
  max-width: 520px; margin-bottom: 36px; line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-player {
  position: relative; aspect-ratio: 16/9;
  background: var(--mts-black);
  border: 1px solid var(--mts-gold); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(255, 215, 0, 0.15);
}
.hero-player-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75);
}
.hero-player-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.85) 100%);
}
.player-top { display: flex; justify-content: space-between; align-items: flex-start; }
.player-live-badge {
  background: var(--mts-gold); color: var(--mts-black);
  padding: 5px 11px;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.player-live-badge .live-dot { background: var(--mts-black); }
.player-time {
  font-family: var(--font-headline); font-weight: 600; font-size: 14px;
  color: var(--mts-text); background: rgba(0,0,0,0.7);
  padding: 5px 11px; letter-spacing: 1px;
}
.player-info .league {
  font-family: var(--font-headline); font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mts-gold); margin-bottom: 6px; font-weight: 600;
}
.player-info .match {
  font-family: var(--font-display); font-size: 30px; text-transform: uppercase;
  line-height: 1; letter-spacing: -0.2px; font-weight: 900;
}
.play-button {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  background: linear-gradient(135deg, var(--mts-gold-light) 0%, var(--mts-gold) 50%, var(--mts-gold-dark) 100%);
  border: none; border-radius: 50%; cursor: pointer; z-index: 3;
  display: grid; place-items: center;
  transition: all 0.3s; animation: playPulse 2.5s infinite;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); }
  50% { box-shadow: 0 0 0 20px rgba(255, 215, 0, 0); }
}
.play-button:hover { transform: translate(-50%, -50%) scale(1.08); }
.play-button svg { width: 32px; height: 32px; fill: var(--mts-black); margin-left: 5px; }

/* === 6. SECTION HEADER === */
.section { padding: var(--mts-section-padding-top, 80px) 32px var(--mts-section-padding-bottom, 80px); max-width: 1400px; margin: 0 auto; }
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px; gap: 20px; flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  text-transform: uppercase; letter-spacing: -0.3px; line-height: 1;
  position: relative; padding-left: 22px;
  color: var(--mts-text); font-weight: 900;
}
.section-title::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 5px;
  background: linear-gradient(180deg, var(--mts-gold-light), var(--mts-gold-dark));
}
.section-link {
  font-family: var(--font-headline); font-weight: 600;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mts-gold); text-decoration: none;
  display: flex; align-items: center; gap: 8px; transition: gap 0.2s;
}
.section-link:hover { gap: 14px; }

/* === 7. SPORTARTEN-KARUSSELL === */
.carousel-section {
  background: linear-gradient(180deg, var(--mts-black) 0%, var(--mts-dark) 50%, var(--mts-black) 100%);
  padding: 80px 0 100px; overflow: hidden; position: relative;
}
/* v1.39.4: Startseiten-Abstände, Backend-steuerbar.
   Additiv zur vorhandenen Section-Padding-Basis — Default 0 = wie bisher.
   - --mts-front-carousel-gap: zusätzlicher Abstand zwischen den beiden Karussellen
   - --mts-front-tvguide-gap:  zusätzlicher Abstand zwischen 2. Karussell und TV-Programm */
.carousel-section.carousel-section--formate {
  margin-top: var(--mts-front-carousel-gap, 0px);
}
.home .tv-guide {
  margin-top: var(--mts-front-tvguide-gap, 0px);
}
.carousel-section-inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.carousel-stage {
  /* v1.22: Stage auf gleiche max-width wie Hero (1400px) — Karten und Buttons
     bleiben in derselben Linie wie der Hero-Slider, nicht am Bildschirmrand. */
  position: relative;
  max-width: 1400px;
  margin: 40px auto 0;
  height: 620px;
  perspective: 1400px;
  perspective-origin: center 30%;
}
.carousel-track {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.carousel-card {
  position: absolute; left: 50%; top: 50%;
  width: 340px; height: 500px; margin-left: -170px; margin-top: -250px;
  cursor: pointer;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  /* Kein dauerhaftes will-change — Karten werden nur ~700ms beim Tab-Wechsel animiert.
     Der Browser nutzt für transform/opacity ohnehin GPU-Compositing. */
  transform-style: preserve-3d;
  border: 1px solid var(--mts-border);
  overflow: hidden;
  background: var(--mts-card);
}
.carousel-card a { text-decoration: none; display: block; height: 100%; }
.carousel-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.carousel-card-overlay {
  /* Punkte 3+4 (v1.4): Kein schwarzer Verlauf, keine Sportart-Texte mehr.
     Diese Klasse bleibt nur noch für eventuelle Legacy-Markup-Einträge erhalten. */
  display: none;
}
.carousel-card-number {
  /* Nummer oben rechts, absolut über dem Bild — kein Overlay-Container nötig */
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 72px;
  color: rgba(255, 215, 0, 0.85);
  line-height: 1;
  letter-spacing: -2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 24px rgba(0,0,0,0.5);
  font-weight: 900;
  pointer-events: none;
}
/* Legacy-Klassen (Texte im Karussell) — werden in v1.4+ nicht mehr ausgegeben,
   bleiben aber als Definition für Rückwärtskompatibilität bei alten Markup-Versionen */
.carousel-card-cat,
.carousel-card-name,
.carousel-card-meta {
  display: none;
}

.carousel-card.pos-0 {
  transform: translateZ(0) scale(1);
  z-index: 10; filter: brightness(1); opacity: 1;
  border-color: var(--mts-gold);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(255, 215, 0, 0.25),
    0 0 0 1px rgba(255, 215, 0, 0.3);
}
.carousel-card.pos--1 {
  transform: translateX(-380px) translateZ(-250px) rotateY(28deg) scale(0.85);
  z-index: 8; filter: brightness(0.65) saturate(0.85); opacity: 0.85;
}
.carousel-card.pos-1 {
  transform: translateX(380px) translateZ(-250px) rotateY(-28deg) scale(0.85);
  z-index: 8; filter: brightness(0.65) saturate(0.85); opacity: 0.85;
}
.carousel-card.pos--2 {
  transform: translateX(-640px) translateZ(-480px) rotateY(40deg) scale(0.7);
  z-index: 6; filter: brightness(0.4) saturate(0.7); opacity: 0.5;
}
.carousel-card.pos-2 {
  transform: translateX(640px) translateZ(-480px) rotateY(-40deg) scale(0.7);
  z-index: 6; filter: brightness(0.4) saturate(0.7); opacity: 0.5;
}
.carousel-card.pos--3 {
  transform: translateX(-820px) translateZ(-700px) rotateY(45deg) scale(0.55);
  z-index: 4; filter: brightness(0.25) saturate(0.5); opacity: 0.2;
  pointer-events: none;
}
.carousel-card.pos-3 {
  transform: translateX(820px) translateZ(-700px) rotateY(-45deg) scale(0.55);
  z-index: 4; filter: brightness(0.25) saturate(0.5); opacity: 0.2;
  pointer-events: none;
}
.carousel-card.hidden {
  opacity: 0; pointer-events: none;
  transform: translateX(0) translateZ(-900px) scale(0.3);
}

/* Karussell-Controls (v1.22):
   Controls spannen sich über die Stage (max 1400px, gleich wie Hero).
   Buttons sitzen an den Stage-Innenkanten mit kleinem Padding. */
.carousel-section { position: relative; }
.carousel-controls {
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  gap: 0;
}
.carousel-btn {
  width: 56px; height: 56px;
  background: rgba(0, 22, 34, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: var(--mts-gold);
  cursor: pointer; display: grid; place-items: center;
  transition: all 0.2s; border-radius: 50%;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.carousel-btn:hover {
  background: var(--mts-gold);
  color: var(--mts-black);
  border-color: var(--mts-gold);
}
.carousel-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Punkte und Hint komplett ausblenden — nicht nur auf Mobile */
.carousel-dots { display: none; }
.carousel-hint { display: none; }

/* === 8. TV-PROGRAMM === */
.tv-guide {
  background: var(--mts-dark);
  padding: 80px 32px;
  border-top: 1px solid var(--mts-border);
  border-bottom: 1px solid var(--mts-border);
}
.tv-guide-inner { max-width: 1400px; margin: 0 auto; }
.day-tabs {
  display: flex; gap: 4px; margin-bottom: 24px;
  overflow-x: auto; padding-bottom: 4px;
}
.day-tab {
  font-family: var(--font-headline); font-weight: 600;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 11px 22px;
  background: var(--mts-card); color: var(--mts-silver-dim);
  border: 1px solid var(--mts-border);
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.day-tab:hover { color: var(--mts-text); border-color: var(--mts-border-light); }
.day-tab.active {
  background: linear-gradient(135deg, var(--mts-gold-light) 0%, var(--mts-gold) 50%, var(--mts-gold-dark) 100%);
  color: var(--mts-black); border-color: var(--mts-gold);
}

/* TV-Guide-Tagesweiterschaltung (v1.4 — Punkt 6):
   Standardmäßig sind alle .schedule-list-Tagesboxen verborgen,
   nur die mit .is-active wird angezeigt. JS schaltet die Klasse um. */
.schedule-list { display: none; flex-direction: column; gap: 2px; }
.schedule-list.is-active { display: flex; }
.schedule-empty {
  color: var(--mts-silver-dim);
  padding: 24px 18px;
  background: var(--mts-card);
  font-style: italic;
}
.schedule-item {
  display: grid; grid-template-columns: 130px 90px 1fr auto;
  gap: 20px; align-items: center;
  padding: 14px 18px;
  background: var(--mts-card);
  border-left: 3px solid transparent;
  transition: all 0.2s; cursor: pointer; text-decoration: none;
}
/* v1.32 Punkt 1: Wenn TV-Guide-Bilder ausgeblendet sind (kein .schedule-thumb-Element
   im DOM), fällt die Bild-Spalte weg und der Schedule-Item rückt sauber zusammen. */
.schedule-item:not(:has(.schedule-thumb)) {
  grid-template-columns: 90px 1fr auto;
}  color: inherit;
}
.schedule-item:hover { border-left-color: var(--mts-gold); background: var(--mts-card-hover); }
.schedule-item.now {
  border-left-color: var(--mts-gold);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent 55%);
}
.schedule-thumb {
  width: 130px; height: 74px;
  object-fit: cover; background: var(--mts-black);
}
.schedule-time {
  font-family: var(--font-display); font-size: 26px;
  color: var(--mts-text); letter-spacing: -0.3px; font-weight: 900;
}
.schedule-item.now .schedule-time { color: var(--mts-gold); }
.schedule-info .schedule-genre {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mts-text);
  margin-bottom: 6px;
}
.schedule-info .schedule-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  color: var(--mts-gold);
  line-height: 1.2;
  text-transform: uppercase;
}
.schedule-info .schedule-episode {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 500;
  color: var(--mts-silver);
  margin-top: 5px;
  line-height: 1.3;
}

/* Legacy-Klassen behalten für Rückwärtskompatibilität */
.schedule-info .category {
  font-family: var(--font-headline); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mts-gold); margin-bottom: 4px; font-weight: 600;
}
.schedule-info .title {
  font-family: var(--font-headline); font-weight: 600;
  font-size: 17px; letter-spacing: 0.5px; color: var(--mts-text);
}
.schedule-info .subtitle { font-size: 13px; color: var(--mts-silver-dim); margin-top: 3px; }
.schedule-badge {
  font-family: var(--font-headline); font-weight: 700;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid;
}
.badge-live {
  background: var(--mts-gold); color: var(--mts-black);
  border-color: var(--mts-gold);
  display: inline-flex; align-items: center; gap: 5px;
}
.badge-live .live-dot { background: var(--mts-black); }
.badge-relive { color: var(--mts-silver-dim); border-color: var(--mts-border-light); }
.badge-new { color: var(--mts-silver); border-color: var(--mts-silver); }

/* === 9. HIGHLIGHTS === */
.highlights {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 16px; grid-auto-rows: 240px;
}
.highlight-card {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--mts-border); transition: all 0.3s;
  text-decoration: none; color: inherit;
}
.highlight-card:first-child { grid-row: span 2; }
.highlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--mts-gold);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
}
.highlight-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.8) saturate(0.95);
  transition: all 0.6s;
}
.highlight-card:hover .highlight-img {
  transform: scale(1.08); filter: brightness(0.95) saturate(1);
}
.highlight-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.95) 100%);
  z-index: 1;
}
.highlight-content {
  position: absolute; inset: 0; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  z-index: 2;
}
.highlight-card:first-child .highlight-content { padding: 34px; }
.highlight-cat {
  font-family: var(--font-headline); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mts-gold); margin-bottom: 10px; font-weight: 600;
}
.highlight-title {
  font-family: var(--font-display); font-size: 24px;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.2px;
  color: var(--mts-text); font-weight: 900;
}
.highlight-card:first-child .highlight-title { font-size: 38px; }
.highlight-meta {
  font-family: var(--font-headline); font-size: 13px;
  color: var(--mts-silver); margin-top: 10px; letter-spacing: 1px;
  font-weight: 500;
}
.play-icon-small {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: rgba(0, 22, 34,0.75);
  border: 1px solid var(--mts-gold); border-radius: 50%;
  display: grid; place-items: center; z-index: 3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.play-icon-small svg { width: 16px; height: 16px; fill: var(--mts-gold); margin-left: 2px; }

/* === 10. EMPFANG === */
.empfang { padding: 80px 32px; background: var(--mts-dark); }
.empfang-inner { max-width: 1400px; margin: 0 auto; }
.empfang-intro {
  color: var(--mts-silver); max-width: 640px;
  margin-bottom: 28px; font-size: 15px; line-height: 1.6;
}
.empfang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.empfang-card {
  background: var(--mts-card); border: 1px solid var(--mts-border);
  padding: 26px; text-align: center;
  transition: all 0.2s; cursor: pointer;
  text-decoration: none; color: inherit; display: block;
}
.empfang-card:hover { border-color: var(--mts-gold); background: var(--mts-card-hover); }
.empfang-icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  background: var(--mts-black);
  display: grid; place-items: center;
  border: 1px solid var(--mts-border-light); font-size: 26px;
}
.empfang-card:hover .empfang-icon { border-color: var(--mts-gold); }
.empfang-card .name {
  font-family: var(--font-headline); font-weight: 600;
  font-size: 16px; letter-spacing: 0.5px; margin-bottom: 4px;
  color: var(--mts-text);
}
.empfang-card .type {
  font-size: 11px; color: var(--mts-silver-dim);
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* === 11. FOOTER === */
.footer {
  background: var(--mts-black);
  border-top: 1px solid var(--mts-border);
  padding: 60px 32px 24px;
}
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand .logo img { height: 60px; }
.footer-brand p {
  color: var(--mts-silver-dim); font-size: 14px;
  max-width: 340px; line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--font-headline); font-weight: 600;
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mts-gold); margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; list-style: none; }
.footer-col a {
  color: var(--mts-silver-dim);
  text-decoration: none; font-size: 14px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--mts-gold); }
.footer-bottom {
  border-top: 1px solid var(--mts-border);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--mts-silver-dim);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--mts-gold); }
.socials { display: flex; gap: 12px; align-items: center; }
/* v1.30 Punkt 1: SVG-Brand-Icons statt Glyph-Buchstaben.
   Kein Rahmen, Hover-Effekt ist ein leichter Lift + Helligkeits-Boost. */
.socials .social-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  padding: 0;
  transition: transform 0.2s, filter 0.2s;
  text-decoration: none;
}
.socials .social-icon:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.socials .social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.socials .social-icon:focus-visible {
  outline: 2px solid var(--mts-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* === 12. LOADING-STATES === */
.schedule-thumb, .highlight-img, .carousel-card-img, .hero-player-img {
  background-color: var(--mts-card);
}

/* === 13. RESPONSIVE === */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: 1fr 1fr; }
  .highlight-card:first-child { grid-row: span 1; grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .carousel-card { width: 280px; height: 420px; margin-left: -140px; margin-top: -210px; }
  .carousel-card.pos--1 { transform: translateX(-300px) translateZ(-200px) rotateY(25deg) scale(0.8); }
  .carousel-card.pos-1 { transform: translateX(300px) translateZ(-200px) rotateY(-25deg) scale(0.8); }
  .carousel-card.pos--2 { transform: translateX(-520px) translateZ(-400px) rotateY(38deg) scale(0.65); }
  .carousel-card.pos-2 { transform: translateX(520px) translateZ(-400px) rotateY(-38deg) scale(0.65); }
  .carousel-card.pos--3, .carousel-card.pos-3 { opacity: 0; pointer-events: none; }
  .carousel-stage { height: 520px; }
}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .logo img { height: 44px; }
  .section { padding: 48px 20px; }
  .highlights { grid-template-columns: 1fr; }
  .highlight-card:first-child { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .schedule-item { grid-template-columns: 70px 1fr; gap: 12px; }
  .schedule-thumb { display: none; }
  .schedule-badge { grid-column: 2; justify-self: start; margin-top: 4px; }
  .carousel-card { width: 240px; height: 360px; margin-left: -120px; margin-top: -180px; }
  .carousel-card.pos--1 { transform: translateX(-220px) translateZ(-160px) rotateY(22deg) scale(0.78); }
  .carousel-card.pos-1 { transform: translateX(220px) translateZ(-160px) rotateY(-22deg) scale(0.78); }
  .carousel-card.pos--2, .carousel-card.pos-2 { opacity: 0.3; }
  .carousel-stage { height: 460px; }
}

/* ===========================================================
   ZUSÄTZLICHE STYLES (Empfang Modi, Live-Player, GeoBlock)
   ergänzt nach Initial-Design
   =========================================================== */

/* Empfangs-Karten — gemeinsame Basis */
.empfang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.empfang-logo-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mts-text);
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--mts-border-light);
  transition: border-color 0.2s, transform 0.2s;
}
.empfang-card:hover .empfang-logo-wrap {
  border-color: var(--mts-gold);
  transform: scale(1.05);
}
.empfang-logo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.empfang-card-text { width: 100%; }

/* Empfangs-Karussell */
.empfang-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.empfang-carousel-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.empfang-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  /* will-change ist hier OK — der Track ist schmal (~220px hoch × Container-Breite),
     liegt weit unter dem Browser-Budget und wird tatsächlich permanent animierbar gehalten. */
  will-change: transform;
}
.empfang-carousel-track .empfang-card {
  flex: 0 0 220px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  padding: 26px 18px;
  text-decoration: none;
  color: inherit;
}
.empfang-carousel-btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
}
.empfang-carousel-btn:hover { border-color: var(--mts-gold); color: var(--mts-gold); }
.empfang-carousel-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Live-Player: Video-Element */
.hero-player-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--mts-black);
}

/* GeoBlock-Overlay */
.geoblock-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(0, 22, 34,0.97), rgba(0, 22, 34,0.97));
  z-index: 4;
  padding: 32px;
  text-align: center;
}
.geoblock-icon {
  font-size: 56px;
  color: var(--mts-gold);
  text-shadow: 0 0 20px var(--mts-gold-glow);
}
.geoblock-message {
  color: var(--mts-silver);
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: pre-line;
  max-width: 480px;
  line-height: 1.5;
}

/* Stream-Loading-State */
.hero-player-video[data-loading="1"]::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--mts-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='25' stroke='%23e9c079' stroke-width='4' fill='none' stroke-dasharray='40 100'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 30 30' to='360 30 30' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 60px no-repeat;
}

/* ===========================================================
   HERO SLIDESHOW (v1.2)
   Hintergrund-Slideshow mit auto-rotierenden Sportarten-Bildern
   =========================================================== */
.hero--no-player {
  min-height: 720px;
  position: relative;
  overflow: hidden;
}
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Punkt 7 (v1.9): Bildausschnitt nach UNTEN verschoben (top 25% statt center 50%),
     damit der OBERE Bildteil mehr zu sehen ist (für Action-Sport meist wichtiger,
     weil dort die Spieler/das Spielfeld besser im Bild sind als am unteren Rand). */
  background-position: center 25%;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  filter: brightness(0.42) saturate(0.9);
  /* Kein will-change hier — die Slides sind zu groß (Vollbild-Hintergründe).
     Das Budget wäre überschritten, der Browser würde es ohnehin ignorieren.
     Opacity-Transitions sind Browser-seitig schon GPU-optimiert. */
}

/* Auf Mobile bleibt center 50% sinnvoller, weil Hochformat-Ausschnitt
   bei top 25% den Spieler abschneiden würde. */
@media (max-width: 768px) {
  .hero-slide {
    background-position: center;
  }
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 22, 34,0.78) 0%, rgba(0, 22, 34,0.40) 50%, rgba(0, 22, 34,0.85) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(255, 215, 0, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content--centered {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: 1fr !important;
  z-index: 2;
}
.hero-content--centered .hero-text {
  max-width: 880px;
}

/* Live-Dot im Hero-Tag (für dynamischen Tag mit Live-Indikator) */
.tag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--mts-gold);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.5s infinite;
}

@media (max-width: 700px) {
  .hero--no-player {
    min-height: 600px;
  }
}

/* ===========================================================
   SPORT-HERO (Sportart-Detailseite)
   Bild-Card im Vordergrund (gleiche Größe wie Karussell-Karte 4:5)
   =========================================================== */
.sport-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--mts-dark);
  /* v1.37 Etappe A: Padding aus Design-Optionen (global + pro Beitrag) */
  padding: var(--mts-sport-hero-padding-top, 80px) 32px var(--mts-sport-hero-padding-bottom, 80px);
}
.sport-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(0.6) blur(8px);
  transform: scale(1.1); /* gegen weiße Ränder durch Blur */
}
.sport-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 22, 34,0.85), rgba(0, 22, 34,0.5) 50%, rgba(0, 22, 34,0.85)),
    radial-gradient(ellipse at 30% 40%, rgba(255, 215, 0,0.18) 0%, transparent 60%);
}
.sport-hero-content {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 340px;
  /* v1.37 Etappe A: Gap aus Design-Optionen (global + pro Beitrag) */
  gap: var(--mts-sport-hero-gap, 80px);
  /* v1.25 Punkt 1: NICHT mehr vertikal zentrieren — Text und Bild
     beginnen beide oben. Das Bild "klebt" nicht mehr in der Mitte. */
  align-items: start;
  z-index: 2;
}
/* v1.25 Punkt 3: Text-Container breiter (war 720px) */
.sport-hero-text { max-width: 980px; }
.sport-hero-meta {
  color: var(--mts-gold);
  font-family: var(--font-headline);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 24px;
}
.sport-hero-description {
  color: var(--mts-silver);
  /* v1.25 Punkt 4/7: Schriftgröße aus CSS-Variable (global + pro-Beitrag steuerbar) */
  font-size: var(--mts-content-font-size, 18px);
  line-height: var(--mts-content-line-height, 1.65);
  margin-top: 8px;
  /* v1.25 Punkt 3: breiter (war 600px) */
  max-width: 880px;
}
/* v1.25 Punkt 2: Zwischenüberschriften im Editor-Content sollen IMMER
   linksbündig in voller Breite starten — nie rechts neben einem
   gefloateten Bild "einrasten".
   v1.26 Punkt 2: Außerdem großer margin-top — wirkt wie ein automatischer
   Absatz vor jeder Zwischenüberschrift. */
.sport-hero-description .wp-block-heading,
.sport-hero-description h2,
.sport-hero-description h3,
.sport-hero-description h4 {
  display: inline-block;
  width: 100%;
  clear: both;
  margin-top: var(--mts-detail-heading-gap, 2em);
  margin-bottom: 0.6em;
}
/* Erste Überschrift kein extra-margin-top */
.sport-hero-description > h2:first-child,
.sport-hero-description > h3:first-child,
.sport-hero-description > h4:first-child,
.sport-hero-description > .wp-block-heading:first-child {
  margin-top: 0;
}

/* v1.25 Punkt 1: Wenn das Bild ausgeblendet ist, nutzt der Text die volle Breite */
.sport-hero-content--no-image {
  grid-template-columns: 1fr;
}
.sport-hero-content--no-image .sport-hero-text {
  max-width: 1100px;
}
/* v1.25 Punkt 1: Bild links — Spaltenreihenfolge umkehren (Bild 340px, dann Text) */
.sport-hero-content--image-left {
  grid-template-columns: 340px 1.1fr;
}
.sport-hero-content--image-left .sport-hero-card {
  justify-self: start;
}

/* Picture-Frame: gleiche Maße wie aktive Karussell-Karte (340x500) — 4:5-Verhältnis,
   echte Karussell-Karten haben eine 800x1000-Bildquelle (mts-card-Bildgröße) */
.sport-hero-card {
  position: relative;
  width: 340px;
  height: 500px;
  border: 1px solid var(--mts-gold);
  overflow: hidden;
  background: var(--mts-card);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(255, 215, 0, 0.25),
    0 0 0 1px rgba(255, 215, 0, 0.3);
  justify-self: end;
}
.sport-hero-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sport-hero-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 35%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .sport-hero-content {
    grid-template-columns: 1fr;
    /* v1.25 Punkt 6: KEINE Zentrierung mehr auf Mobile/Tablet —
       Text und Bild beginnen linksbündig. */
    justify-items: start;
    text-align: left;
    gap: 40px;
  }
  /* v1.25 Punkt 5: Text-Container darf die Spaltenbreite nicht sprengen.
     max-width 980px greift auf schmalen Screens nicht — daher 100% + box-sizing. */
  .sport-hero-text {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .sport-hero-description {
    max-width: 100%;
  }
  .sport-hero-card { justify-self: start; }
}
@media (max-width: 700px) {
  .sport-hero-card { width: 280px; height: 400px; }
  .sport-hero { padding: 48px 20px; }
}

/* ===========================================================
   LIVE-PAGE — eigene Seite mit großem Stream-Player
   =========================================================== */
.live-page { padding: 60px 32px; max-width: 1400px; margin: 0 auto; }
.live-page-inner { display: flex; flex-direction: column; gap: 32px; }
.live-page-header { margin-bottom: 0; }

.live-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--mts-gold);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(255, 215, 0,0.15);
}
.live-player-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.live-player-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  z-index: 5;
}
.live-player-play.is-hidden { display: none; }

.live-player-fallback {
  position: relative;
  width: 100%; height: 100%;
}
.live-player-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}
.live-player-message {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 32px;
  color: var(--mts-text);
  background: rgba(0, 22, 34,0.7);
}
.live-player-message h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 16px 0 12px;
  color: var(--mts-gold);
}
.live-player-message p {
  font-family: var(--font-headline);
  font-size: 16px;
  color: var(--mts-silver);
  max-width: 540px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.live-player-geoblock {
  position: relative;
  inset: auto;
  height: 100%;
  z-index: 2;
}

.live-player-badge-overlay {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 4;
  pointer-events: none;
}

/* Info-Block unter Player */
.live-now-info {
  background: var(--mts-card);
  border-left: 4px solid var(--mts-gold);
  padding: 24px 28px;
}
.live-now-label {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mts-gold);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-now-genre {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mts-text);
  margin-bottom: 8px;
}
.live-now-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--mts-gold);
  line-height: 1.05;
  margin-bottom: 8px;
}
.live-now-episode {
  font-family: var(--font-headline);
  font-size: 16px;
  color: var(--mts-silver);
  font-weight: 500;
}

.live-page-content {
  font-family: var(--font-headline);
  font-size: 16px;
  color: var(--mts-silver);
  line-height: 1.6;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .live-page { padding: 32px 16px; }
  .live-player-message { padding: 16px; }
}

/* Empfangbarkeits-Grafik (oben in der Empfangs-Sektion) */
.empfang-grafik-wrap {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.empfang-grafik {
  max-width: 100%;
  width: 800px;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
@media (max-width: 700px) {
  .empfang-grafik { width: 100%; }
  .empfang-grafik-wrap { margin-bottom: 28px; }
}

/* ===========================================================
   WERBEKUNDEN-BEREICH
   =========================================================== */
.werbekunden-page {
  padding: 60px 32px 100px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 70vh;
}
.werbekunden-inner { display: flex; flex-direction: column; gap: 32px; }

/* LOGIN-WAND */
.werbekunden-login {
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  padding: 60px 40px;
  text-align: center;
  max-width: 800px;
  margin: 60px auto;
}
.werbekunden-login .section-title {
  padding-left: 0;
  margin-bottom: 16px;
}
.werbekunden-login .section-title::before {
  display: none;
}
.werbekunden-login-intro {
  color: var(--mts-silver);
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.5;
}
.werbekunden-login-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.werbekunden-login-box {
  background: var(--mts-dark);
  border: 1px solid var(--mts-border-light);
  padding: 32px 24px;
  text-align: center;
}
.werbekunden-login-box h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-gold);
  margin-bottom: 8px;
}
.werbekunden-login-box p {
  color: var(--mts-silver-dim);
  font-size: 14px;
  margin-bottom: 20px;
}
.werbekunden-login-box input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--mts-black);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  font-family: var(--font-headline);
  font-size: 15px;
  margin-bottom: 12px;
}
.werbekunden-login-box input[type="password"]:focus {
  outline: none;
  border-color: var(--mts-gold);
}
.werbekunden-login-box .btn {
  width: 100%;
}
.werbekunden-error {
  background: rgba(220, 50, 50, 0.15);
  border: 1px solid rgba(220, 50, 50, 0.5);
  color: #ff8888;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--font-headline);
  font-weight: 600;
}

/* INHALT NACH LOGIN */
.werbekunden-intro {
  background: var(--mts-card);
  border-left: 4px solid var(--mts-gold);
  padding: 24px 28px;
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.6;
}

/* TABS */
.werbekunden-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mts-border);
}
.werbekunden-tab {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 24px;
  background: transparent;
  color: var(--mts-silver-dim);
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.werbekunden-tab:hover {
  color: var(--mts-text);
}
.werbekunden-tab.active {
  color: var(--mts-gold);
  border-bottom-color: var(--mts-gold);
}
.werbe-tab-icon { font-size: 18px; }

/* TAB-PANELS */
.werbekunden-panel { display: none; padding: 32px 0; }
.werbekunden-panel.active { display: block; }

.werbekunden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.werbekunden-item {
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  overflow: hidden;
  transition: all 0.2s;
}
.werbekunden-item:hover {
  border-color: var(--mts-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.werbekunden-item-thumb {
  aspect-ratio: 16 / 9;
  background: var(--mts-black);
  overflow: hidden;
}
.werbekunden-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.werbekunden-item-body { padding: 18px 20px; }
.werbekunden-item-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--mts-text);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.werbekunden-item-excerpt {
  color: var(--mts-silver);
  font-size: 14px;
  line-height: 1.5;
}
.werbekunden-item-content {
  color: var(--mts-silver);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}
.werbekunden-empty {
  color: var(--mts-silver-dim);
  font-style: italic;
  padding: 24px 0;
}

/* ===========================================================
   IMPRESSUM
   =========================================================== */
.impressum-page {
  padding: 60px 32px 100px;
  max-width: 900px;
  margin: 0 auto;
}
.impressum-inner { display: flex; flex-direction: column; gap: 0; }
.impressum-intro {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.impressum-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--mts-border);
  color: var(--mts-silver);
}
.impressum-block:last-child { border-bottom: none; }
.impressum-block h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-gold);
  margin-bottom: 14px;
}
.impressum-block p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.impressum-block a { color: var(--mts-gold); text-decoration: none; }
.impressum-block a:hover { text-decoration: underline; }
.impressum-block strong { color: var(--mts-text); }

/* ===========================================================
   HIGHLIGHT-BEITRÄGE (Punkt 4)
   =========================================================== */
.beitrag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.beitrag-card {
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.beitrag-card:hover {
  border-color: var(--mts-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.beitrag-card-img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mts-black);
}
.beitrag-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.beitrag-card:hover .beitrag-card-img {
  transform: scale(1.05);
}
.beitrag-card-body { padding: 22px; }
.beitrag-card-cat {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mts-gold);
  margin-bottom: 10px;
}
.beitrag-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.1;
  color: var(--mts-text);
  margin-bottom: 10px;
}
.beitrag-card-excerpt {
  color: var(--mts-silver-dim);
  font-size: 14px;
  line-height: 1.5;
}

/* ===========================================================
   NEWS (Punkt 5)
   =========================================================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.news-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  background: var(--mts-card);
  padding: 16px 18px;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.news-item:hover {
  border-left-color: var(--mts-gold);
  background: var(--mts-card-hover);
}
.news-item-img-wrap {
  width: 140px; height: 90px;
  overflow: hidden;
  background: var(--mts-black);
}
.news-item-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.news-item-body { display: flex; flex-direction: column; gap: 6px; }
.news-item-source {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mts-gold);
}
.news-item-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.3px;
  line-height: 1.2;
  color: var(--mts-text);
  text-transform: uppercase;
}
.news-item-excerpt {
  font-size: 13px;
  color: var(--mts-silver-dim);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .news-item { grid-template-columns: 1fr; }
  .news-item-img-wrap { width: 100%; aspect-ratio: 16/9; height: auto; }
}

/* ===========================================================
   SPORTARTEN-ARCHIV (v1.5 — Punkt 2)
   Karten im 4:5-Karussell-Format, ohne Schrift, mit Gold-Hover.
   =========================================================== */
.sportart-archive {
  padding: 60px 32px 100px;
  max-width: 1400px;
  margin: 0 auto;
}
.sportart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.sportart-grid-card {
  position: relative;
  aspect-ratio: 4 / 5;       /* exakt das Karussell-Format (800x1000) */
  overflow: hidden;
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s,
    box-shadow 0.3s,
    filter 0.3s;
  filter: brightness(0.85) saturate(0.9);
}
.sportart-grid-card:hover,
.sportart-grid-card:focus-visible {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--mts-gold);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 215, 0, 0.25),
    0 0 0 1px rgba(255, 215, 0, 0.4);
  filter: brightness(1) saturate(1);
  outline: none;
}
.sportart-grid-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sportart-grid-number {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: rgba(255, 215, 0, 0.85);
  line-height: 1;
  letter-spacing: -2px;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: color 0.3s, text-shadow 0.3s;
}
.sportart-grid-card:hover .sportart-grid-number {
  color: var(--mts-gold);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(255, 215, 0, 0.6);
}

@media (max-width: 700px) {
  .sportart-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sportart-grid-number { font-size: 40px; }
}

/* ===========================================================
   DATENSCHUTZ-SEITE (v1.5 — Punkt 4)
   =========================================================== */
.datenschutz-page {
  padding: 60px 32px 100px;
  max-width: 900px;
  margin: 0 auto;
}
.datenschutz-inner { display: flex; flex-direction: column; gap: 0; }
.datenschutz-intro {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.datenschutz-content {
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.7;
}
.datenschutz-content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-gold);
  margin: 40px 0 14px;
}
.datenschutz-content h3 {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mts-text);
  margin: 24px 0 10px;
}
.datenschutz-content p { margin-bottom: 14px; }
.datenschutz-content ul,
.datenschutz-content ol {
  margin-left: 20px;
  margin-bottom: 18px;
  padding-left: 12px;
}
.datenschutz-content li { margin-bottom: 6px; }
.datenschutz-content a { color: var(--mts-gold); text-decoration: none; }
.datenschutz-content a:hover { text-decoration: underline; }
.datenschutz-content strong { color: var(--mts-text); }
.datenschutz-stand {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--mts-border);
  color: var(--mts-silver-dim);
  font-size: 13px;
  font-style: italic;
}

/* ===========================================================
   HERO-VIDEO-LOOP (v1.5 — Punkt 5)
   30-60-Sek.-Zusammenschnitt aus Sportarten als Hintergrund.
   =========================================================== */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--mts-black);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Helligkeit/Sättigung wie bei den Slideshow-Slides, damit der Hero-Text
     gut lesbar bleibt — aber etwas weniger gedimmt, weil Video schon Bewegung hat. */
  filter: brightness(0.5) saturate(0.95);
}
@media (prefers-reduced-motion: reduce) {
  /* Bei aktivem "weniger Bewegung"-Setting im Browser: nur das Poster-Bild zeigen */
  .hero-video {
    display: none;
  }
  .hero-video-wrap {
    background-image: var(--hero-video-poster, none);
    background-size: cover;
    background-position: center;
  }
}

/* ===========================================================
   PRESSE-BEREICH (v1.6)
   =========================================================== */
.presse-page,
.presse-single {
  padding: 60px 32px 100px;
  max-width: 900px;
  margin: 0 auto;
}
.presse-page-inner,
.presse-single-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.presse-page-intro {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Liste */
.presse-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.presse-item {
  background: var(--mts-card);
  border-left: 3px solid var(--mts-border);
  padding: 24px 28px;
  transition: border-color 0.3s, background 0.3s;
}
.presse-item:hover {
  border-left-color: var(--mts-gold);
  background: var(--mts-card-hover);
}
.presse-item-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.presse-item-date {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  color: var(--mts-silver-dim);
  letter-spacing: 1px;
}
.presse-item-cat {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mts-gold);
  padding: 4px 10px;
  border: 1px solid var(--mts-gold);
}
.presse-item-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.presse-item-title a {
  color: var(--mts-text);
  text-decoration: none;
  transition: color 0.2s;
}
.presse-item-title a:hover { color: var(--mts-gold); }
.presse-item-excerpt {
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.presse-item-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.presse-item-link,
.presse-item-pdf {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-gold);
  text-decoration: none;
}
.presse-item-link:hover,
.presse-item-pdf:hover {
  color: var(--mts-gold-light);
  text-decoration: underline;
}

/* Single */
.presse-single-back {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--mts-silver-dim);
  text-decoration: none;
  margin-bottom: 16px;
  display: inline-block;
}
.presse-single-back:hover { color: var(--mts-gold); }
.presse-single-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.05;
  color: var(--mts-text);
  margin: 12px 0 24px;
}
.presse-single-image {
  margin: 0 -32px 32px;
}
.presse-single-image img {
  width: 100%;
  height: auto;
  display: block;
}
.presse-single-content {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.7;
}
.presse-single-content p { margin-bottom: 16px; }
.presse-single-content a { color: var(--mts-gold); }
.presse-single-content h2,
.presse-single-content h3 {
  font-family: var(--font-display);
  color: var(--mts-gold);
  text-transform: uppercase;
  margin: 32px 0 12px;
}
.presse-single-download {
  margin: 32px 0;
}
.presse-single-contact {
  background: var(--mts-card);
  border-left: 3px solid var(--mts-gold);
  padding: 24px 28px;
  margin-top: 48px;
}
.presse-single-contact h3 {
  font-family: var(--font-display);
  color: var(--mts-gold);
  text-transform: uppercase;
  font-size: 22px;
  margin: 0 0 12px;
}
.presse-single-contact p { margin-bottom: 8px; line-height: 1.6; }

.presse-empty {
  background: var(--mts-card);
  padding: 40px 32px;
  color: var(--mts-silver-dim);
  text-align: center;
}

/* ===========================================================
   PRESSE — TABS, LOGIN, LOGO-DOWNLOADS (v1.7)
   =========================================================== */

/* Tabs */
.presse-tabs {
  display: flex;
  gap: 4px;
  margin: 24px 0;
  border-bottom: 1px solid var(--mts-border);
}
.presse-tab {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--mts-silver-dim);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.presse-tab:hover { color: var(--mts-text); }
.presse-tab.is-active {
  color: var(--mts-gold);
  border-bottom-color: var(--mts-gold);
}
.presse-tab-panel { display: none; }
.presse-tab-panel.is-active { display: block; }

/* Login-Wand */
.presse-login {
  max-width: 720px;
  margin: 60px auto;
  padding: 48px 32px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  border-left: 4px solid var(--mts-gold);
}
.presse-login .section-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-left: 18px;
  position: relative;
}
.presse-login .section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--mts-gold);
}
.presse-login-intro {
  color: var(--mts-silver);
  margin-bottom: 32px;
  line-height: 1.6;
}
.presse-error {
  background: rgba(204, 68, 68, 0.15);
  border-left: 3px solid #cc4444;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: #ff8888;
  font-size: 14px;
}
.presse-login-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .presse-login-options { grid-template-columns: 1fr; }
}
.presse-login-box {
  background: var(--mts-black);
  border: 1px solid var(--mts-border);
  padding: 24px;
}
.presse-login-box h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--mts-gold);
  margin-bottom: 12px;
}
.presse-login-box p {
  color: var(--mts-silver);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.presse-pw-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-silver-dim);
  margin-bottom: 8px;
}
.presse-pw-form input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  font-size: 15px;
  font-family: var(--font-headline);
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.presse-pw-form input[type="password"]:focus {
  outline: none;
  border-color: var(--mts-gold);
}
.presse-login-contact {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--mts-border);
  font-size: 13px;
  color: var(--mts-silver-dim);
}
.presse-login-contact a { color: var(--mts-gold); }

/* Logo-Grid */
.presse-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.presse-logo-card {
  background: var(--mts-card);
  border: 1px solid var(--mts-border);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s;
}
.presse-logo-card:hover {
  border-color: var(--mts-gold);
  transform: translateY(-3px);
}
.presse-logo-thumb {
  aspect-ratio: 16 / 10;
  background: var(--mts-black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
}
.presse-logo-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.presse-logo-info {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.presse-logo-cat {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mts-gold);
}
.presse-logo-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--mts-text);
  margin: 0;
}
.presse-logo-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mts-silver);
}
.presse-logo-desc p { margin: 0 0 6px; }
.presse-logo-downloads {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.presse-logo-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--mts-black);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s;
}
.presse-logo-download-btn:hover {
  border-color: var(--mts-gold);
  color: var(--mts-gold);
}

/* ===========================================================
   AGB SALES — VOLLTEXT-TAB (v1.8)
   Übernimmt die Text-Formatierung der Datenschutz-Seite.
   =========================================================== */
.werbekunden-agb-text {
  max-width: 900px;
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.7;
}
.werbekunden-agb-text h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-gold);
  margin: 36px 0 12px;
}
.werbekunden-agb-text p { margin-bottom: 14px; }
.werbekunden-agb-text strong { color: var(--mts-text); }
.werbekunden-agb-text a { color: var(--mts-gold); }
.werbekunden-agb-text a:hover { text-decoration: underline; }
.werbekunden-agb-download {
  margin: 32px 0 16px;
}
.werbekunden-agb-stand {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--mts-border);
  color: var(--mts-silver-dim);
  font-size: 13px;
  font-style: italic;
}

/* ===========================================================
   DEFAULT-PAGE-TEMPLATE (v1.9 — Punkt 1)
   Für WP-Seiten ohne spezifisches Template (Über uns, FAQ, etc.)
   =========================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) saturate(0.9);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 22, 34,0.65) 0%, rgba(0, 22, 34,0.35) 50%, rgba(0, 22, 34,0.75) 100%);
}
.page-hero-content {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 32px;
  width: 100%;
  z-index: 2;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 0.95;
  color: var(--mts-text);
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}

.page-default {
  padding: 60px 32px 100px;
  max-width: 900px;
  margin: 0 auto;
}
.page-default-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-default-content {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.7;
}
.page-default-content p { margin-bottom: 16px; }
.page-default-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-gold);
  margin: 36px 0 14px;
}
.page-default-content h3 {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mts-text);
  margin: 28px 0 10px;
}
.page-default-content a { color: var(--mts-gold); }
.page-default-content a:hover { text-decoration: underline; }
.page-default-content img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
}
.page-default-content ul,
.page-default-content ol {
  margin-left: 20px;
  margin-bottom: 18px;
  padding-left: 12px;
}
.page-default-content li { margin-bottom: 6px; }

/* ===========================================================
   LIVE-PLAYER VOLLBILD-BUTTON (v1.9 — Punkt 11)
   =========================================================== */
.live-player-frame {
  position: relative; /* sicherstellen, damit Overlay-Button korrekt positioniert wird */
}
.live-player-fullscreen {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(0, 22, 34, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--mts-gold);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.live-player-fullscreen:hover {
  background: var(--mts-gold);
  color: var(--mts-black);
  border-color: var(--mts-gold);
}
.live-player-fullscreen:focus-visible {
  outline: 2px solid var(--mts-gold);
  outline-offset: 2px;
}
/* Im Vollbild den Button automatisch ausblenden,
   weil die Browser-Controls dann ohnehin sichtbar sind */
.live-player-frame:fullscreen .live-player-fullscreen {
  display: none;
}
.live-player-frame:-webkit-full-screen .live-player-fullscreen {
  display: none;
}

/* ===========================================================
   KONTAKTFORMULAR (v1.9 — Punkt 4)
   =========================================================== */
.contact-form-wrap {
  max-width: 720px;
  margin: 32px 0;
}
.contact-intro {
  color: var(--mts-silver);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  padding: 20px 24px;
  background: var(--mts-card);
  border-left: 3px solid var(--mts-gold);
}
.contact-message {
  padding: 16px 20px;
  margin-bottom: 24px;
  border-left: 3px solid;
  font-size: 15px;
}
.contact-success {
  background: rgba(116, 204, 116, 0.08);
  border-left-color: #74cc74;
  color: #b8e8b8;
}
.contact-success h3 {
  color: #74cc74;
  margin: 0 0 8px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.2px;
}
.contact-error {
  background: rgba(204, 68, 68, 0.1);
  border-left-color: #cc4444;
  color: #ff8888;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .contact-row { grid-template-columns: 1fr; }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-field label {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-silver-dim);
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  font-size: 15px;
  font-family: var(--font-headline);
  transition: border-color 0.2s;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--mts-gold);
}
.contact-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.5;
}
.contact-field .required {
  color: var(--mts-gold);
}
.contact-consent {
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}
.contact-consent label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--mts-silver);
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.contact-consent-text {
  /* Punkt 1 (v1.10): Text als ein zusammenhängender Span,
     damit er als Fließtext rendert und der Link mittendrin nicht zu Umbrüchen führt. */
  display: inline;
  flex: 1;
}
.contact-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--mts-gold);
}
.contact-consent a { color: var(--mts-gold); }
.contact-required-note {
  margin-top: 8px;
  color: var(--mts-silver-dim);
}

/* ===========================================================
   KARUSSELL — MOBILE-OPTIMIERUNG (v1.10/v1.11 — Punkt 4)
   Strategie: Auf Mobile keine Punkte mehr, nur Pfeil-Buttons,
   die schwebend am linken/rechten Rand des Karussells sitzen.
   =========================================================== */
@media (max-width: 768px) {
  .carousel-section { position: relative; padding-bottom: 30px; }

  /* Karussell-Stage: weniger Höhe + kontrollierte Breite */
  .carousel-stage {
    height: 480px;
    perspective: 900px;
    overflow: hidden; /* schneidet überstehende Seitenkarten sauber ab */
  }
  .carousel-card {
    width: 240px;
    height: 360px;
    margin-left: -120px;
    margin-top: -180px;
  }
  .carousel-card.pos--1 { transform: translateX(-220px) translateZ(-200px) rotateY(28deg) scale(0.8); }
  .carousel-card.pos-1  { transform: translateX(220px)  translateZ(-200px) rotateY(-28deg) scale(0.8); }
  .carousel-card.pos--2,
  .carousel-card.pos-2  { opacity: 0; pointer-events: none; }

  /* Punkte komplett ausblenden */
  .carousel-dots { display: none; }

  /* Pfeil-Buttons schweben über dem Karussell — links und rechts */
  .carousel-controls {
    margin-top: 0;
    position: absolute;
    /* Mittig zur Stage-Höhe (480px / 2 = 240px), plus Header-Section ca. 100px = ~340px */
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-30%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    padding: 0 12px;
    z-index: 10;
    gap: 0;
  }
  .carousel-btn {
    width: 48px;
    height: 48px;
    background: rgba(0, 22, 34, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: var(--mts-gold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
  .carousel-btn:hover,
  .carousel-btn:active {
    background: var(--mts-gold);
    color: var(--mts-black);
    border-color: var(--mts-gold);
  }
}

/* ===========================================================
   FOOTER — RECHTLICHES-SPALTE (v1.10 — Punkt 5)
   =========================================================== */
.footer-col-legal h4 {
  /* Optisch leicht hervorheben, weil rechtliche Links wichtig sind */
  color: var(--mts-gold);
}

/* TV-Guide-Tagesweiterschaltung: in v1.12 hatten wir hier eine :has()-Sicherung,
   die wurde in v1.13 entfernt, weil die TV-Programm-Seite normal funktioniert.
   Falls Edge-Cases auftauchen, kann das CSS aus dem Git-Verlauf zurückgeholt werden. */

/* ===========================================================
   BREADCRUMBS (v1.13 — Punkt 5/SEO)
   =========================================================== */
.mts-breadcrumbs {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 32px 0;
  font-size: 13px;
  color: var(--mts-silver-dim);
}
.mts-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mts-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mts-breadcrumbs li:not(:last-child)::after {
  content: '›';
  color: var(--mts-silver-dim);
  margin-left: 4px;
}
.mts-breadcrumbs a {
  color: var(--mts-silver);
  text-decoration: none;
  transition: color 0.2s;
}
.mts-breadcrumbs a:hover { color: var(--mts-gold); }
.mts-breadcrumbs span[aria-current="page"] {
  color: var(--mts-gold);
  font-weight: 600;
}
@media (max-width: 768px) {
  .mts-breadcrumbs {
    padding: 12px 16px 0;
    font-size: 12px;
  }
}

/* ===========================================================
   KARUSSELL-SYNOPSE (v1.15 — Punkt 2)
   Wird unter dem Karussell-Stage angezeigt und per JS dynamisch aktualisiert,
   wenn der User eine andere Karte auswählt.
   =========================================================== */
.carousel-synopsis {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0 24px;
  text-align: center;
  min-height: 130px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.carousel-synopsis.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.carousel-synopsis-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--mts-gold);
  margin: 0 0 12px;
  line-height: 1;
}
.carousel-synopsis-text {
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.carousel-synopsis-link {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-gold);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.carousel-synopsis-link:hover {
  border-bottom-color: var(--mts-gold);
}
@media (max-width: 768px) {
  .carousel-synopsis {
    padding: 0 20px;
    margin-top: 24px;
  }
}

/* ===========================================================
   AGB-DOWNLOAD-CARD (v1.15 — Punkt 7)
   Eigene Card statt goldener btn-primary, damit der Button auf dem
   Werbekunden-Tab-Bereich gut lesbar ist.
   =========================================================== */
.werbekunden-agb-download-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--mts-card);
  border: 1px solid var(--mts-border-light);
  border-left: 4px solid var(--mts-gold);
  padding: 20px 24px;
  margin: 32px 0 16px;
  max-width: 600px;
}
.werbekunden-agb-download-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.werbekunden-agb-download-info {
  flex: 1;
}
.werbekunden-agb-download-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-text);
  margin-bottom: 4px;
}
.werbekunden-agb-download-meta {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mts-silver-dim);
}
.werbekunden-agb-download-btn,
.werbekunden-agb-text a.werbekunden-agb-download-btn {
  /* v1.18 Punkt 3: Höhere Spezifität, damit die globale a-Regel in
     .werbekunden-agb-text nicht den goldenen Text auf goldenem Hintergrund verursacht. */
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  background: var(--mts-gold);
  color: var(--mts-black) !important;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
  border: 1px solid var(--mts-gold);
}
.werbekunden-agb-download-btn:hover,
.werbekunden-agb-text a.werbekunden-agb-download-btn:hover {
  background: transparent;
  color: var(--mts-gold) !important;
  text-decoration: none;
}
@media (max-width: 600px) {
  .werbekunden-agb-download-card {
    flex-wrap: wrap;
    gap: 12px;
  }
  .werbekunden-agb-download-btn {
    width: 100%;
    text-align: center;
  }
}

/* ===========================================================
   LIVE-PLAYER PiP-BUTTON (v1.16 — Punkt 12)
   Sitzt direkt links neben dem Vollbild-Button.
   =========================================================== */
.live-player-pip {
  position: absolute;
  top: 16px;
  right: 70px; /* 44px Vollbild-Button + 16px Abstand + 10px Puffer */
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(0, 22, 34, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--mts-gold);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.live-player-pip:hover {
  background: var(--mts-gold);
  color: var(--mts-black);
  border-color: var(--mts-gold);
}
.live-player-pip:focus-visible {
  outline: 2px solid var(--mts-gold);
  outline-offset: 2px;
}
.live-player-frame:fullscreen .live-player-pip,
.live-player-frame:-webkit-full-screen .live-player-pip {
  display: none;
}

/* Wenn der Vollbild-Button ausgeblendet ist, rückt PiP nach rechts */
.live-player-frame:not(:has(.live-player-fullscreen)) .live-player-pip {
  right: 16px;
}

/* ===========================================================
   ANTI-INTERLACE-FILTER (v1.16 — Punkt 11)
   ACHTUNG: Notlösung! Der echte Fix liegt beim Stream-Encoder.
   Drei Stärken-Stufen für unterschiedliche Stream-Qualitäten.
   =========================================================== */
.live-player-frame.is-anti-interlace .live-player-video {
  /* Eine Mischung aus minimalem Blur (kaschiert Kamm-Linien)
     plus leichter Sättigungs-Korrektur (kompensiert Blur-Folgen) */
  filter: blur(0.3px) saturate(1.05);
}
.live-player-frame.ai-strength-medium .live-player-video {
  filter: blur(0.5px) saturate(1.1);
}
.live-player-frame.ai-strength-strong .live-player-video {
  filter: blur(0.8px) saturate(1.15);
}

/* ===========================================================
   SCHEDULE-ITEM: NICHT KLICKBARE VARIANTE (v1.17 — Punkt 4)
   Sendungen ohne Sportart-Zuordnung sind ein <div>, kein <a>.
   Optisch leicht anders: kein Hover-Highlight, Standard-Cursor.
   =========================================================== */
.schedule-item.is-not-clickable {
  cursor: default;
}
.schedule-item.is-not-clickable:hover {
  /* Bestehender Hover-Effekt überschreiben — wir wollen kein Klick-Anzeichen */
  background: var(--mts-card);
  border-color: var(--mts-border);
}

/* ===========================================================
   APP-STORE-BUTTONS (v1.17 — Punkte 13/14)
   Zwei Varianten:
    - .mts-app-buttons--block:  großer Block mit Titel/Text (Empfang-Seite)
    - .mts-app-buttons--inline: kompakte Buttons-Reihe (Footer)
   =========================================================== */

/* Block-Variante (Empfang-Seite) — v1.28 Punkt 1: volle Seitenbreite + einzeiliges Layout */
.mts-app-buttons--block {
  max-width: 1400px;
  margin: 60px auto 0;
  padding: 32px 40px;
  background: var(--mts-card);
  border-left: 4px solid var(--mts-gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
}
.mts-app-buttons--block .mts-app-buttons-info {
  flex: 1;
  min-width: 0; /* sonst sprengt langer Text die Flex-Box */
}
.mts-app-buttons-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--mts-gold);
  margin: 0 0 8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mts-app-buttons-text {
  color: var(--mts-silver);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mts-app-buttons-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

/* Inline-Variante (Footer) */
.mts-app-buttons--inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Einzelner Button */
.mts-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--mts-black);
  border: 1px solid var(--mts-border-light);
  color: var(--mts-text);
  text-decoration: none;
  transition: all 0.2s;
  min-width: 170px;
}
.mts-app-btn:hover {
  border-color: var(--mts-gold);
  background: rgba(255, 215, 0, 0.05);
}
.mts-app-btn-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.mts-app-btn-icon svg {
  width: 100%;
  height: 100%;
}
.mts-app-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.mts-app-btn-top {
  font-size: 10px;
  font-family: var(--font-headline);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mts-silver-dim);
}
.mts-app-btn-bottom {
  font-size: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--mts-text);
}

/* Inline-Variante: kleinere Buttons */
.mts-app-buttons--inline .mts-app-btn {
  min-width: auto;
  padding: 6px 12px;
}
.mts-app-buttons--inline .mts-app-btn-icon {
  width: 22px;
  height: 22px;
}
.mts-app-buttons--inline .mts-app-btn-top { font-size: 8px; }
.mts-app-buttons--inline .mts-app-btn-bottom { font-size: 13px; }

@media (max-width: 900px) {
  /* v1.28 Punkt 1: Auf schmaleren Screens vertikales Layout, damit lange Texte
     nicht abgeschnitten werden und Buttons unterhalb stehen. */
  .mts-app-buttons--block {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }
  .mts-app-buttons-title,
  .mts-app-buttons-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .mts-app-buttons-row {
    width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .mts-app-buttons--block { padding: 24px 18px; }
  .mts-app-btn { width: 100%; min-width: auto; }
}

/* Footer-Bottom: App-Buttons + Socials nebeneinander (v1.17 Punkt 14) */
.socials-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .socials-wrap { width: 100%; justify-content: flex-start; gap: 16px; }
}

/* ============================================================
   WORDPRESS-EDITOR-CONTENT (v1.24 Punkt 1)
   ============================================================
   Diese Sektion definiert die Typografie für alle Bereiche, in denen
   Beiträge mit Editor-Inhalten erstellt werden:
     - Sportarten / Sendungen / Formate / Presse
     - Standard-Pages (z.B. "Über uns")
     - Beliebige weitere CPTs mit "editor"-Support

   Der gemeinsame Wrapper ist `.entry-content` (in den Templates gesetzt).
   So bleibt der globale CSS-Reset unangetastet und Editor-Inhalte
   bekommen konsistente Schrift, Abstände, Bild-Alignment usw.
   ============================================================ */

/* === Wrapper-Container === */
.entry-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 32px;
  color: var(--mts-text);
  font-family: var(--font-body, "Inter", "Segoe UI", system-ui, sans-serif);
  /* v1.25 Punkt 4/7: Schriftgröße aus CSS-Variable (global + pro-Beitrag steuerbar).
     Fallback 18px, falls die Variable nicht gesetzt ist. */
  font-size: var(--mts-content-font-size, 18px);
  line-height: var(--mts-content-line-height, 1.65);
}

/* === Absatz-Typografie === */
.entry-content p {
  margin: 0 0 1.2em;
  font-size: var(--mts-content-font-size, 18px);
  line-height: var(--mts-content-line-height, 1.65);
}
.entry-content p:last-child { margin-bottom: 0; }
.entry-content strong { color: var(--mts-text); font-weight: 700; }
.entry-content em { color: var(--mts-silver); font-style: italic; }
.entry-content a {
  color: var(--mts-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.entry-content a:hover { color: var(--mts-gold-light); }

/* === Überschriften innerhalb Editor-Content === */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--font-display, "Anton", "Impact", sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: var(--mts-text);
  line-height: 1.1;
  /* v1.26 Punkt 2: Großer Abstand OBEN — wirkt wie ein automatischer
     Absatz vor jeder Zwischenüberschrift. Erste Überschrift im Block
     bekommt kein zusätzliches Padding (siehe :first-child unten). */
  margin: 2em 0 0.6em;
}
/* Erste Überschrift im Editor-Content soll nicht extra weit unten anfangen */
.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child,
.entry-content > h5:first-child,
.entry-content > h6:first-child {
  margin-top: 0;
}
.entry-content h2 { font-size: calc(32px * var(--mts-heading-scale, 1)); color: var(--mts-gold); }
.entry-content h3 { font-size: calc(24px * var(--mts-heading-scale, 1)); }
.entry-content h4 { font-size: calc(20px * var(--mts-heading-scale, 1)); }
.entry-content h5 { font-size: calc(17px * var(--mts-heading-scale, 1)); letter-spacing: 1px; }
.entry-content h6 {
  font-family: var(--font-headline, "Barlow Condensed", sans-serif);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--mts-silver-dim);
}

/* === Listen === */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}
.entry-content li { margin-bottom: 0.4em; font-size: var(--mts-content-font-size, 18px); }
.entry-content ul li::marker { color: var(--mts-gold); }
.entry-content ol li::marker { color: var(--mts-gold); font-weight: 700; }

/* === Zitate === */
.entry-content blockquote {
  margin: 1.5em 0;
  padding: 16px 24px;
  border-left: 4px solid var(--mts-gold);
  background: var(--mts-card);
  color: var(--mts-silver);
  font-style: italic;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--mts-silver-dim);
}

/* === Code === */
.entry-content code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  background: var(--mts-card);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--mts-gold-light);
}
.entry-content pre {
  background: var(--mts-card);
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.2em 0;
  border-left: 3px solid var(--mts-gold);
}
.entry-content pre code {
  background: none;
  padding: 0;
  color: var(--mts-text);
}

/* === Trennlinien === */
.entry-content hr {
  border: none;
  height: 1px;
  background: var(--mts-border-light);
  margin: 2em 0;
}

/* === Tabellen === */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.entry-content th,
.entry-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mts-border-light);
  text-align: left;
}
.entry-content th {
  font-family: var(--font-headline, "Barlow Condensed", sans-serif);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--mts-gold);
}

/* === BILDER & MEDIEN === */
.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2em auto;
}

/* === WordPress alignleft / alignright / aligncenter / alignnone ===
   Standard-WP-Klassen, die der Editor automatisch beim Ausrichten von
   Bildern und Galerien setzt. */
.entry-content .alignleft,
.alignleft {
  float: left;
  margin: 0.4em 1.4em 1em 0;
  max-width: 50%;
  height: auto;
}
.entry-content .alignright,
.alignright {
  float: right;
  margin: 0.4em 0 1em 1.4em;
  max-width: 50%;
  height: auto;
}
.entry-content .aligncenter,
.aligncenter {
  display: block;
  margin: var(--mts-detail-image-gap, 1.2em) auto;
  clear: both;
}
.entry-content .alignnone,
.alignnone {
  display: block;
  margin: 1.2em 0;
}

/* WP-Block-Editor (Gutenberg): wide & full */
.entry-content .alignwide {
  margin-left: -64px;
  margin-right: -64px;
  max-width: calc(100% + 128px);
}
.entry-content .alignfull {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
}

/* === Caption-Block (WP-Standard) === */
.entry-content .wp-caption,
.wp-caption {
  max-width: 100%;
  margin: 1.2em 0;
}
.entry-content .wp-caption img,
.wp-caption img {
  margin: 0 0 8px;
}
.entry-content .wp-caption-text,
.wp-caption-text,
.entry-content figcaption,
figcaption {
  font-family: var(--font-headline, "Barlow Condensed", sans-serif);
  font-size: 13px;
  color: var(--mts-silver-dim);
  text-align: center;
  letter-spacing: 0.3px;
  margin-top: 6px;
  font-style: italic;
}

/* === Block-Editor Figure-Alignment === */
.entry-content figure.alignleft,
figure.alignleft {
  float: left;
  margin: 0.4em 1.4em 1em 0;
  max-width: 50%;
}
.entry-content figure.alignright,
figure.alignright {
  float: right;
  margin: 0.4em 0 1em 1.4em;
  max-width: 50%;
}
.entry-content figure.aligncenter,
figure.aligncenter {
  margin: var(--mts-detail-image-gap, 1.2em) auto;
  text-align: center;
}

/* Float clearfix nach Editor-Inhalten */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* === Mobile Anpassungen === */
@media (max-width: 768px) {
  .entry-content {
    padding: 16px 20px;
    /* v1.25: auf Mobile 1px kleiner als der eingestellte Wert, aber nicht fix —
       so bleibt die globale/Beitrags-Einstellung wirksam. */
    font-size: calc(var(--mts-content-font-size, 18px) - 1px);
  }
  .entry-content p,
  .entry-content li { font-size: calc(var(--mts-content-font-size, 18px) - 1px); }
  .entry-content h2 { font-size: calc(24px * var(--mts-heading-scale, 1)); }
  .entry-content h3 { font-size: calc(20px * var(--mts-heading-scale, 1)); }
  .entry-content h4 { font-size: calc(18px * var(--mts-heading-scale, 1)); }

  /* Auf Mobile: Float-Bilder zentrieren, nicht floaten */
  .entry-content .alignleft,
  .entry-content .alignright,
  .entry-content figure.alignleft,
  .entry-content figure.alignright,
  .alignleft,
  .alignright,
  figure.alignleft,
  figure.alignright {
    float: none;
    display: block;
    margin: 1em auto;
    max-width: 100%;
  }

  /* alignwide & alignfull auf Mobile zurücksetzen */
  .entry-content .alignwide,
  .entry-content .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* === LIVE-STREAM-WERBUNG (v1.32 Punkt 2) ===
   Ad-Container überlagert den Player während Pre/Mid-Roll. */
.live-player-frame { position: relative; }
.live-ad-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* leitet Klicks durch, wenn keine Werbung läuft */
}
.live-ad-container > * {
  pointer-events: auto; /* aktive Ad-Elemente sind klickbar */
}

/* ============================================================
   MV+ (Motorvision) — Typografie-Feinschliff für Söhne
   ------------------------------------------------------------
   Das ursprüngliche Layout war auf eine SCHMALE Display-Schrift
   (Proxima Extra Condensed) ausgelegt. "Söhne Breit" ist deutlich
   BREITER. Dieser Block normalisiert die größten Headlines, damit
   sie nicht überlaufen und sauber umbrechen. Bewusst am Dateiende,
   um bestehende Regeln gezielt zu überschreiben (Source-Order).
   ============================================================ */

/* Display-Headlines: sicherer Umbruch + für die breite Schrift
   leicht reduzierte Spitzengrößen und neutralere Laufweite. */
.hero-title,
.section-title,
.sport-hero-title,
.archive-hero-title,
h1.entry-title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}

/* Hero: Spitzenwert der breiten Schrift etwas zurücknehmen. */
.hero-title {
  font-size: clamp(40px, 5.6vw, 76px);
  letter-spacing: -0.5px;
  line-height: 0.98;
}

/* Section-Titles: Laufweite für breite Versalien leicht öffnen,
   Größe minimal reduzieren. */
.section-title {
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: 0;
  line-height: 1.02;
}

/* Söhne hat keine "Black"-Schnitte: font-weight 900 → Söhne Breit Fett (700).
   Explizit auf 700 setzen, damit der Browser nicht synthetisch fettet. */
.hero-title,
.section-title,
.sport-hero-title,
.archive-hero-title,
.carousel-card-number,
[style*="font-weight: 900"],
[style*="font-weight:900"] {
  font-weight: 700;
}

/* Fließtext explizit auf Söhne Buch (400) — ruhiger als 600. */
body.mts-theme,
.entry-content,
p, li {
  font-weight: 400;
}

/* Navigation/Buttons/Tags: Söhne Halbfett (600) statt 700,
   in Kombination mit den vorhandenen Versalien + Laufweiten. */
.nav-links a,
.btn,
.tag,
.live-indicator {
  font-weight: 600;
}