/*
 * Gestaltung der MTS-Mediathek.
 *
 * Übernommen aus `mts-mediathek-mockup_9.html` und damit deckungsgleich mit
 * `lib/tenant/mts_theme.dart` in der App: Gold auf Schwarz, Silber als
 * Zweitfarbe, **kein Radius**, 1-px-Linien statt Flächen, Versalien mit weitem
 * Zeichenabstand. Die goldene Linie ist eine Auszeichnung (Rubrik-Symbole,
 * Aktives) — kein Rahmen um jedes Video.
 *
 * Schrift: Barlow Condensed (OFL, selbst gehostet) als freier Ersatz für
 * Proxima Nova Condensed — dieselbe Entscheidung wie in der App. Liefert MTS
 * die lizenzierte Web-Fassung, genügt ein Austausch der @font-face-Blöcke.
 *
 * Breite: Alles skaliert mit der **iframe-Breite**, nicht mit dem Fenster des
 * Elterndokuments. Feste Pixelbreiten gibt es nur bei den Kacheln, und die
 * schrumpfen per clamp().
 */

@font-face{font-family:'Barlow Condensed';font-weight:400;font-style:normal;font-display:swap;
  src:url('assets/fonts/BarlowCondensed-Regular.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;
  src:url('assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-style:normal;font-display:swap;
  src:url('assets/fonts/BarlowCondensed-Bold.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-weight:900;font-style:normal;font-display:swap;
  src:url('assets/fonts/BarlowCondensed-Black.ttf') format('truetype')}

:root{
  --mts-gold:#e9c079; --mts-gold-light:#f3d49a; --mts-gold-dark:#c9a05a; --mts-gold-deep:#8a6e3a;
  --mts-gold-glow:rgba(233,192,121,.35);
  --mts-silver:#dad9d8; --mts-silver-dim:#a8a7a6;
  --mts-black:#0a0a0a; --mts-dark:#141414; --mts-card:#1c1c1c; --mts-card-hover:#242424;
  --mts-border:#2a2a2a; --mts-border-light:#3a3a3a; --mts-text:#fff; --mts-muted:#8a8a8a;
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-headline:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow Condensed',-apple-system,sans-serif;
  --pad:32px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--mts-black);color:var(--mts-text)}
/* Platz der Scrollleiste immer freihalten (07.10.2026, Aufnahme 23:23): mit
   dauerhaft sichtbaren Scrollleisten (macOS mit Maus) erschien sie beim Wechsel
   Uebersicht ↔ Sendungsseite kurz und der ganze Inhalt sprang in der Breite. */
html{scrollbar-gutter:stable}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* flow-root: kein Margin-Kollaps durch body — sonst misst reportHeight die
     obere Aussenkante des ersten Kindes nicht mit (26 px fehlten im iframe). */
  display:flow-root}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.mhead{padding:34px 0 6px}
.mhead h1{font-family:var(--font-display);font-size:clamp(38px,6vw,74px);line-height:.92;
  letter-spacing:-.5px;text-transform:uppercase;font-weight:900}
.mhead h1 .accent{color:var(--mts-gold);text-shadow:0 0 30px rgba(233,192,121,.4)}
.mhead p{font-size:16px;color:var(--mts-silver);max-width:600px;margin-top:14px;line-height:1.5}
body.no-header .mhead{display:none}

/* ── Reiter ───────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:30px;margin:26px 0 16px;flex-wrap:wrap}
.tabs button{background:none;border:none;color:var(--mts-muted);font-family:var(--font-headline);
  font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  padding-bottom:8px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tabs button:hover{color:var(--mts-silver)}
.tabs button.active{color:var(--mts-gold);border-color:var(--mts-gold)}

/* ── Rubriken (Filter, keine Navigation) ──────────────────────────────────── */
.sports{display:flex;gap:14px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin}
.sports::-webkit-scrollbar{height:6px}
.sports::-webkit-scrollbar-thumb{background:var(--mts-border-light)}
/* Briefing MTS: „ein duenner goldener Rahmen um die Rubrik-Symbole“ — immer, nicht erst beim Aktivieren. */
.sport{flex:0 0 auto;width:120px;height:112px;border:1px solid var(--mts-gold-dark);background:var(--mts-card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  transition:border-color .2s,background .2s,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
.sport img{height:46px;width:auto;opacity:.92;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s,filter .25s}
/* Symbol laedt noch: schimmernder Kreis in Symbolgroesse (07.10.2026) */
.sport img:not(.da){width:46px;border-radius:50%;opacity:1;color:transparent;
  background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%) 0 0/300px 100%;
  animation:schimmer 1.6s linear infinite}
.sport span{transition:color .2s,letter-spacing .28s ease}
/* Hover (28.09.2026): Kachel hebt sich leicht, Symbol wippt vergroessert und
   leuchtet golden auf, die Schrift zieht etwas auseinander. Nur mit Maus. */
@media (hover:hover){
  .sport:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px var(--mts-gold-glow)}
  .sport:hover img{transform:scale(1.12) rotate(-4deg);opacity:1;filter:drop-shadow(0 0 6px rgba(233,192,121,.45))}
  .sport:hover .allicon i{transform:scale(1.2)}
  .sport:hover span{color:var(--mts-gold);letter-spacing:1.6px}
  .sport:active{transform:translateY(-1px) scale(.98)}
}
.sport .allicon i{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sport .allicon i:nth-child(2n){transition-delay:.03s}
.sport .allicon i:nth-child(3n){transition-delay:.06s}
@media (prefers-reduced-motion:reduce){.sport,.sport img,.sport span,.sport .allicon i{transition:none}}
.sport span{font-family:var(--font-headline);font-weight:600;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mts-silver);text-align:center;padding:0 6px}
.sport .allicon{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:44px;height:44px;
  align-content:center;justify-items:center}
.sport .allicon i{width:9px;height:9px;border-radius:50%;background:var(--mts-gold);opacity:.85}
.sport .letter{font-family:var(--font-display);font-weight:900;font-size:34px;color:var(--mts-gold-deep);line-height:1}
.sport:hover{border-color:var(--mts-gold);background:var(--mts-card-hover)}
.sport.active{border-color:var(--mts-gold);box-shadow:0 6px 26px -12px var(--mts-gold-glow),inset 0 0 0 1px rgba(233,192,121,.25)}
.sport.active span{color:var(--mts-gold)}

/* ── Bedienleiste ─────────────────────────────────────────────────────────── */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 4px}
.search{position:relative;flex:1 1 220px;max-width:320px}
.search input{background:var(--mts-card);border:1px solid var(--mts-border);color:var(--mts-text);
  font-family:var(--font-body);font-size:15px;padding:11px 14px 11px 38px;width:100%;outline:none}
.search input:focus{border-color:var(--mts-gold-dark)}
.search svg{position:absolute;left:13px;top:13px;width:15px;height:15px;stroke:var(--mts-muted);fill:none;stroke-width:1.8}
.ctrl{display:flex;align-items:center;gap:8px;background:var(--mts-card);border:1px solid var(--mts-border);
  color:var(--mts-silver-dim);font-family:var(--font-headline);font-weight:600;letter-spacing:1px;
  text-transform:uppercase;font-size:13px;padding:11px 15px;cursor:pointer;white-space:nowrap}
.ctrl:hover{border-color:var(--mts-gold-dark);color:var(--mts-gold)}
/* `display:flex` oben schlägt sonst das [hidden]-Attribut — der Knopf bliebe
   sichtbar, obwohl gar kein Filter gesetzt ist. */
.ctrl[hidden]{display:none}
.spacer{flex:1}
.result{font-family:var(--font-headline);font-size:14px;letter-spacing:.5px;color:var(--mts-muted);margin:20px 0 0}
.result b{color:var(--mts-gold);font-weight:700}

/* ── Sendungsreihe ────────────────────────────────────────────────────────── */
.srow{padding:26px 0;border-bottom:1px solid var(--mts-border)}
.srow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.srow-head .l{display:flex;align-items:center;gap:14px;cursor:pointer;min-width:0}
.srow-head .badge{height:34px;width:34px;object-fit:contain;opacity:.9;flex:none}
.srow-head h3{font-family:var(--font-display);font-weight:900;font-size:clamp(21px,2.4vw,30px);
  text-transform:uppercase;line-height:1;letter-spacing:-.2px}
.srow-head .l:hover h3{color:var(--mts-gold)}
.srow-head .sub{font-family:var(--font-headline);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mts-muted);margin-top:6px}
.srow-head .sub b{color:var(--mts-gold);font-weight:700}
.allfolgen{font-family:var(--font-headline);font-weight:600;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mts-gold);cursor:pointer;white-space:nowrap;background:none;border:none;padding:0}

.strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--mts-border-light)}
.strip::-webkit-scrollbar-track{background:var(--mts-dark)}

.ecard{flex:0 0 auto;width:clamp(168px,22vw,238px);cursor:pointer;scroll-snap-align:start;
  background:none;border:none;text-align:left;padding:0}
.ethumb{position:relative;aspect-ratio:16/9;border:1px solid var(--mts-border);overflow:hidden;
  background:var(--mts-card) center/cover no-repeat;transition:border-color .2s}
/* Briefing MTS: kein goldener Rahmen um die Videos. */
.ecard:hover .ethumb{border-color:var(--mts-border-light)}
.ethumb::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
.enum{position:absolute;top:9px;left:9px;z-index:3;font-family:var(--font-headline);font-weight:700;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mts-black);
  background:var(--mts-gold);padding:3px 8px}
.edur{position:absolute;bottom:8px;right:9px;z-index:3;font-family:var(--font-headline);font-size:12px;
  color:#fff;background:rgba(0,0,0,.72);padding:2px 7px;letter-spacing:.5px}
.eplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:46px;height:46px;
  border-radius:50%;background:rgba(10,10,10,.5);border:1.5px solid var(--mts-gold);display:grid;
  place-items:center;opacity:0;transition:opacity .2s}
.ecard:hover .eplay,.ecard:focus-visible .eplay{opacity:1}
.eplay::after{content:'';border-left:13px solid var(--mts-gold);border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:3px}
.ecap{padding:10px 2px 0}
.ecap b{font-family:var(--font-headline);font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--mts-text);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecap span{display:block;font-family:var(--font-headline);font-size:12px;color:var(--mts-muted);
  margin-top:2px;letter-spacing:.5px}

.empty{padding:70px 0;text-align:center;color:var(--mts-muted);font-family:var(--font-headline);letter-spacing:1px}
.empty img{height:80px;margin:0 auto 18px;opacity:.35}

/* ── Karussell der Formate (07.10.2026) ─────────────────────────────────── */
.buehne{position:relative;margin:22px 0 30px;border:1px solid var(--mts-border);background:var(--mts-dark);
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 40px rgba(233,192,121,.10)}
body.no-header .buehne{margin-top:26px}
.b-spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.b-spur::-webkit-scrollbar{display:none}
.b-folie{position:relative;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:21/9;overflow:hidden;cursor:pointer;
  display:flex;align-items:flex-end}
.b-folie.skel{cursor:default}
/* .b-folie davor: .bgl (Bild-Laden, weiter unten) setzt position:relative */
.b-folie .b-bild{position:absolute;inset:0;background:var(--mts-card) center/cover no-repeat;transform:scale(1.02);
  transition:transform 7s ease-out}
.b-folie.aktiv .b-bild{transform:scale(1.08)}
.b-folie::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 42%,rgba(10,10,10,0) 70%),
             linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,0) 45%)}
.b-text{position:relative;z-index:2;max-width:min(560px,55%);padding:0 0 64px 48px;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease .15s,transform .5s ease .15s}
.b-folie.aktiv .b-text{opacity:1;transform:none}
.b-text .tag{display:inline-block;margin-bottom:14px;font-family:var(--font-headline);font-weight:700;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;background:var(--mts-gold);padding:4px 10px}
.b-text h2{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4.6vw,64px);line-height:.95;
  text-transform:uppercase;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.b-text p{margin-top:14px;color:var(--mts-silver);font-size:16px;line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.b-meta{margin-top:14px;font-family:var(--font-headline);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mts-muted);display:flex;align-items:center;gap:10px}
.b-meta b{color:var(--mts-gold);font-weight:700}
.b-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--mts-muted)}
.b-knoepfe{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.b-knoepfe button{font-family:var(--font-headline);font-weight:700;font-size:14px;letter-spacing:1.5px;
  text-transform:uppercase;padding:12px 22px;cursor:pointer;border:1px solid var(--mts-gold);transition:background .2s,color .2s}
.b-play{background:var(--mts-gold);color:#0a0a0a}
.b-play:hover{background:var(--mts-gold-light)}
.b-alle{background:rgba(0,0,0,.35);color:var(--mts-gold)}
.b-alle:hover{background:var(--mts-gold);color:#0a0a0a}
.b-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;cursor:pointer;
  background:rgba(10,10,10,.55);border:1px solid var(--mts-border-light);color:#fff;font-size:28px;line-height:1;
  opacity:0;transition:opacity .25s,border-color .2s,color .2s}
.buehne:hover .b-pfeil,.b-pfeil:focus-visible{opacity:1}
.b-pfeil:hover{border-color:var(--mts-gold);color:var(--mts-gold)}
.b-zurueck{left:14px}
.b-vor{right:14px}
/* Umschalter Formate / Neueste Folgen (07.10.2026) */
.b-modus{position:absolute;z-index:4;top:16px;right:16px;display:flex;padding:3px;gap:2px;
  background:rgba(10,10,10,.6);border:1px solid var(--mts-border-light);border-radius:var(--rund,4px);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.b-modus button{background:none;border:0;cursor:pointer;color:var(--mts-silver);padding:7px 14px;border-radius:2px;
  font-family:var(--font-headline);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  transition:background .2s,color .2s}
.b-modus button:hover{color:var(--mts-gold)}
.b-modus button.an{background:var(--mts-gold);color:#0a0a0a}
.b-serie{font-family:var(--font-headline);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mts-gold);margin-bottom:6px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.buehne.einzeln .b-pfeil{display:none}
/* Folgentitel sind laenger als Sendungsnamen: kleiner, hoechstens zwei Zeilen. */
.b-serie + h2{font-size:clamp(26px,3.4vw,46px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.b-punkte{position:absolute;z-index:3;left:48px;bottom:24px;display:flex;gap:8px}
.b-punkte button{width:22px;height:4px;padding:0;border:0;cursor:pointer;background:rgba(255,255,255,.3);
  transition:width .3s,background .3s}
.b-punkte button.an{width:44px;background:var(--mts-gold)}
@media (max-width:760px){
  .b-folie{aspect-ratio:4/5}
  .b-folie::before{background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.7) 40%,rgba(10,10,10,0) 70%)}
  .b-text{max-width:none;padding:0 18px 46px}
  .b-text p{-webkit-line-clamp:2;font-size:14px}
  .b-knoepfe button{padding:10px 16px;font-size:13px}
  .b-pfeil{display:none}
  .b-punkte{left:18px;bottom:18px}
  .b-modus{top:10px;right:10px}
  .b-modus button{padding:6px 10px;font-size:11px;letter-spacing:1px}
}
@media (prefers-reduced-motion:reduce){
  .b-bild,.b-text{transition:none}
}

/* ── A–Z-Ansicht ──────────────────────────────────────────────────────────── */
/* grid-auto-rows:1fr — alle Zeilen so hoch wie die hoechste Karte, nicht je Zeile.
   Die Karte ist ein <button>: der zentriert seinen Inhalt senkrecht, gestreckt
   rutschte das Bild nach unten (Streifen oben). Darum Flex-Spalte von oben. */
.azgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:1fr;
  gap:16px;margin-top:22px}
.azcard{border:1px solid var(--mts-border);background:var(--mts-card);cursor:pointer;text-align:left;padding:0;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;height:100%;
  transition:border-color .2s,background .2s}
.azcard:hover{border-color:var(--mts-border-light);background:var(--mts-card-hover)}
.azcard .t{width:100%;flex:none;aspect-ratio:16/9;background:var(--mts-dark) center/cover no-repeat}
.azcard .c{padding:12px 12px 14px}
.azcard h4{font-family:var(--font-display);font-weight:900;font-size:18px;text-transform:uppercase;line-height:1.05;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.azcard .m{font-family:var(--font-headline);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mts-muted);margin-top:6px}
.azcard .m b{color:var(--mts-gold);font-weight:700}

/* ── Detailansicht ────────────────────────────────────────────────────────── */
#detail{display:none}
body.detail #overview{display:none}
body.detail #detail{display:block}
.back{margin:26px 0 22px;background:transparent;color:var(--mts-text);border:1px solid var(--mts-border-light);
  font-family:var(--font-headline);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:11px 22px;cursor:pointer;font-size:13px}
.back:hover{border-color:var(--mts-gold);color:var(--mts-gold)}
.dhero{position:relative;aspect-ratio:24/9;border:1px solid var(--mts-border);overflow:hidden;display:flex;
  align-items:flex-end;background:var(--mts-card) center/cover no-repeat;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 40px rgba(233,192,121,.12)}
.dhero::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(10,10,10,.9))}
.dhero .bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;
  border-radius:50%;z-index:2;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--mts-gold-light),var(--mts-gold) 50%,var(--mts-gold-dark));
  display:grid;place-items:center}
.dhero .bigplay::after{content:'';border-left:22px solid var(--mts-black);border-top:13px solid transparent;
  border-bottom:13px solid transparent;margin-left:5px}
.dhero .dt{position:relative;z-index:2;padding:26px 30px}
.dhero .tag{display:inline-block;margin-bottom:14px;font-family:var(--font-headline);font-weight:700;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mts-black);
  background:var(--mts-gold);padding:4px 10px}
.dhero h2{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,5vw,52px);line-height:.95;
  text-transform:uppercase}
.dsub{display:flex;align-items:center;gap:12px;margin:20px 0 6px;font-family:var(--font-headline);
  font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mts-muted);flex-wrap:wrap}
.dsub b{color:var(--mts-gold);font-weight:700}
.sep{width:3px;height:3px;border-radius:50%;background:var(--mts-muted)}
.ddesc{color:var(--mts-silver-dim);font-size:15px;line-height:1.6;max-width:780px;margin-bottom:22px}

.eptool{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;
  border-top:1px solid var(--mts-border);padding-top:24px}
.eptool h4{font-family:var(--font-display);font-weight:900;font-size:26px;text-transform:uppercase}
.season{background:var(--mts-card);border:1px solid var(--mts-border);color:var(--mts-text);
  font-family:var(--font-body);font-size:14px;padding:9px 14px}

.ep{display:flex;align-items:center;gap:18px;padding:12px;border:1px solid var(--mts-border);
  background:var(--mts-card);margin-bottom:12px;cursor:pointer;border-left:3px solid transparent;
  width:100%;text-align:left}
.ep:hover{border-left-color:var(--mts-gold);background:var(--mts-card-hover)}
.epthumb{position:relative;width:172px;aspect-ratio:16/9;flex:none;overflow:hidden;
  border:1px solid var(--mts-border);background:var(--mts-dark) center/cover no-repeat}
.epthumb .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:40px;height:40px;
  border-radius:50%;background:rgba(10,10,10,.5);border:1.5px solid var(--mts-gold);display:grid;place-items:center}
.epthumb .pl::after{content:'';border-left:12px solid var(--mts-gold);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.epthumb .dur{position:absolute;bottom:6px;right:7px;z-index:3;font-family:var(--font-headline);font-size:12px;
  background:rgba(0,0,0,.75);padding:2px 7px;color:#fff}
.epinfo{flex:1;min-width:0}
.epinfo .num{font-family:var(--font-headline);font-weight:700;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mts-gold)}
.epinfo h5{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;
  margin:4px 0 6px;line-height:1.05}
.epinfo p{font-size:13px;color:var(--mts-muted);line-height:1.45;max-width:620px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epdate{font-family:var(--font-headline);font-size:12px;letter-spacing:1px;color:var(--mts-muted);
  white-space:nowrap;text-align:right;flex:none}

/* ── Wiedergabe ───────────────────────────────────────────────────────────── */
.pl-wrap{position:relative;background:#000;border:1px solid var(--mts-border);margin-bottom:22px}
.pl-wrap video{width:100%;aspect-ratio:16/9;display:block;background:#000}
/* Leiste ueber dem Video mit dem Schliessen-X (30.09.2026): im Bild lag das X
   auf dem Ton-Knopf der iPhone-Steuerung. Waehrend der Werbung ausgeblendet. */
.pl-bar{height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;background:#000}
/* Zurueck auf dem Player (07.10.2026): solange er laeuft, ersetzt er den
   Knopf darueber — der faellt weg, das Video rueckt hoch. */
#detail.spielt > .back{display:none}
#detail.spielt > .pl-wrap{margin-top:16px}
.pl-back{background:transparent;border:0;color:var(--mts-text);cursor:pointer;padding:6px 8px;
  font-family:var(--font-headline);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.pl-back:hover{color:var(--mts-gold)}
.pl-wrap.werbung .pl-close{visibility:hidden}
/* IMA-Werbeebene deckt genau das Video (unter der Leiste). */
.pl-ad{position:absolute;top:40px;left:0;right:0;aspect-ratio:16/9;z-index:3}
.pl-close{background:rgba(10,10,10,.75);
  border:1px solid var(--mts-border-light);color:#fff;width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1}
.pl-close:hover{border-color:var(--mts-gold);color:var(--mts-gold)}
/* Ladezustand so hoch wie das Video (16:9), sonst springt die Seite, wenn das
   Video den Hinweis ersetzt (30.09.2026). */
.pl-msg{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;text-align:center;font-family:var(--font-headline);letter-spacing:1px;color:var(--mts-muted)}
.pl-msg b{color:var(--mts-gold);display:block;margin-bottom:8px;font-size:16px;letter-spacing:2px;text-transform:uppercase}
/* Handy: kleinere Schrift im Player (Vorgabe 30.09.2026, „etwas zu gross"). */
@media (max-width:600px){
  .pl-msg{font-size:13px;letter-spacing:.5px;padding:0 16px}
  .pl-msg b{font-size:13px;letter-spacing:1px;margin-bottom:4px}
  .pl-wrap .pl-demo{font-size:11px}
}

.loading{padding:80px 0;text-align:center;color:var(--mts-muted);font-family:var(--font-headline);letter-spacing:2px;
  text-transform:uppercase}

/* ── Seitenaufbau (28.09.2026): Platzhalter, weiches Einblenden ───────────── */
@keyframes schimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skel{background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%) 0 0/1200px 100%;
  animation:schimmer 1.4s linear infinite}
.skel-row{padding:26px 0;border-bottom:1px solid var(--mts-border)}
.skel-kopf{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.skel-kopf i,.skel-kopf b,.skel-strip i,.skel-sport{display:block}
.skel-kopf i{width:34px;height:34px;border-radius:50%}
.skel-kopf b{width:min(360px,60%);height:24px}
.skel-strip{display:flex;gap:16px;overflow:hidden}
.skel-strip i{flex:0 0 auto;width:clamp(168px,22vw,238px);aspect-ratio:16/9}
.skel-sport{flex:0 0 auto;width:120px;height:112px}

/* Bild-Kacheln: schimmern, bis das Bild da ist, dann weich aufblenden. */
.bgl{position:relative;isolation:isolate}
/* Skelett beim Laden (07.10.2026, Vorgabe „Skeleton-Grafiken"): vorher ein
   Schimmer #1c1c1c→#262626, auf Schwarz kaum zu sehen. Jetzt heller, mit einem
   dezenten Bildsymbol in der Mitte, bis das Bild da ist. */
:root{--skel-a:#1e1e1e;--skel-b:#323232;
  --skel-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='44' height='32' rx='4'/%3E%3Cpath d='M2 28l12-11 9 8 7-6 16 13'/%3E%3Ccircle cx='34' cy='11' r='3.5'/%3E%3C/svg%3E")}
@keyframes skelGlanz{0%{background-position:center,-600px 0}100%{background-position:center,600px 0}}
.bgl::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--skel-bild) center/clamp(26px,14%,64px) auto no-repeat,
    linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%) 0 0/1200px 100%;
  animation:skelGlanz 1.6s linear infinite;transition:opacity .6s ease}
.bgl.geladen::after{opacity:0;animation:none}
.bgl{background-size:cover;background-position:center}
.bgl.geladen:not(.ohnebild){animation:bildRein .7s cubic-bezier(.22,1,.36,1)}
@keyframes bildRein{from{background-size:112% auto}}
/* Kopfbild der Detailseite: kein Zoom ueber background-size (teuer auf grosser
   Flaeche, ruckelte zusammen mit dem Ansichtswechsel). Liegt es schon im Cache
   (.sofort), erscheint es ohne Platzhalter; sonst blendet es nur weich ein. */
.dhero.bgl.geladen:not(.ohnebild){animation:dheroRein .35s ease}
.dhero.sofort.bgl::after{display:none}
.dhero.sofort.bgl.geladen{animation:none}
@keyframes dheroRein{from{opacity:.4}}

/* Reihen und Karten fahren gestaffelt herein. */
.rein{opacity:0;transform:translateY(18px)}
.rein.drin{opacity:1;transform:none;transition:opacity .55s ease var(--v,0ms),transform .6s cubic-bezier(.22,1,.36,1) var(--v,0ms)}
.sports .sport.erstmals{animation:kachelRein .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes kachelRein{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* Wechsel Uebersicht <-> Serie. */
.auftritt{animation:ansichtRein .45s cubic-bezier(.22,1,.36,1)}
/* Nur einblenden, nicht hochgleiten (07.10.2026): sonst startete der Rahmen 10 px
   unter der Karussell-Hoehe und rutschte hoch. */
@keyframes ansichtRein{from{opacity:0}}
.strip{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  .skel,.bgl::after{animation:none}
  .rein{opacity:1;transform:none}
  .sports .sport.erstmals,.auftritt,.bgl.geladen{animation:none}
}

/* Ausgeblendet (07.10.2026): „9 Sendungen · 58 Beitraege — …“ soll unten nicht stehen. */
footer.note{display:none}
footer.note{border-top:1px solid var(--mts-border);margin-top:36px;padding:22px var(--pad) 30px;text-align:center;
  color:var(--mts-muted);font-family:var(--font-headline);font-size:12px;letter-spacing:1px;line-height:1.6}

/* ── Schmale Einbettung ───────────────────────────────────────────────────── */
@media(max-width:860px){
  :root{--pad:18px}
  .mhead{padding:24px 0 4px}
  .sport{width:98px;height:96px}
  .sport img{height:38px}
  .sport img:not(.da){width:38px}
  .epthumb{width:120px}
  .epinfo p{display:none}
  .dhero{aspect-ratio:16/9}
  .dhero .dt{padding:18px}
  .dhero .bigplay{width:64px;height:64px}
  .dhero .bigplay::after{border-left-width:17px;border-top-width:10px;border-bottom-width:10px}
  .eptool h4{font-size:21px}
}
@media(max-width:520px){
  .tabs{gap:18px}
  .tabs button{font-size:13px;letter-spacing:1.2px}
  .srow-head{flex-direction:column;align-items:flex-start;gap:8px}
  .epdate{display:none}
  .azgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* Hinweis unter dem Ersatz-Stream (Seed-Betrieb). Bewusst sichtbar: sonst hält
   man den Beispielclip für den Beitrag, den man angeklickt hat. */
.pl-demo{padding:9px 12px;background:var(--mts-dark);border-top:1px solid var(--mts-border);
  font-family:var(--font-headline);font-size:12px;letter-spacing:.8px;color:var(--mts-gold-deep)}

/* ── Hover-Vorschau (28.09.2026) ─────────────────────────────────────────── */
.pvbox{position:absolute;z-index:50;background:#141414;border:1px solid var(--mts-border-light);
  transform-origin:0 0;pointer-events:auto;
  /* Weicher Start (28.09.2026): laengere Ease-out-Kurve, die sanft anlaeuft und
     lange ausrollt. Kein will-change — sonst rastert Chrome die Box in
     Kartengroesse und zeigt sie beim Wachsen unscharf, am Ende „ploppt“ sie scharf. */
  transition:transform .38s cubic-bezier(.22,1,.36,1)}
/* Schatten nur als Deckkraft einer Ebene — box-shadow selbst zu animieren ruckelt. */
.pvbox::after{content:'';position:absolute;inset:0;z-index:-1;box-shadow:0 18px 48px rgba(0,0,0,.75);
  opacity:0;transition:opacity .38s ease;pointer-events:none}
.pvbox.an::after{opacity:1}
.pvbox.zu{transition-duration:.22s;transition-timing-function:cubic-bezier(.4,0,.6,1);pointer-events:none}
/* Text erst, wenn die Karte fast steht — gleitet dann sanft von unten ein. */
.pvbox .pv-text{opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.pvbox.an .pv-text{opacity:1;transform:none;transition-delay:.16s}
.pvbox.zu .pv-text{transition-delay:0s;transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.pvbox,.pvbox .pv-text,.pvbox::after{transition:none}}
.pv-bild{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;cursor:pointer;overflow:hidden}
.pv-bild .enum{position:absolute;top:10px;left:10px;z-index:3}
.pv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;z-index:1}
.pv-video.an{opacity:1}
.pv-verlauf{position:absolute;inset:auto 0 0 0;height:75%;background:linear-gradient(to top,rgba(0,0,0,.92) 0,rgba(0,0,0,.6) 45%,transparent);z-index:2;pointer-events:none}
/* Metadaten liegen auf dem Bild (28.09.2026) — das Popup ist nur noch so hoch wie der Player. */
.pv-text{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 14px 12px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pv-serie{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mts-gold);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-text b{display:block;font-size:16px;line-height:1.25;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-meta{font-size:12px;color:#ccc;margin-bottom:9px}
.pv-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.pv-knoepfe button{font:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:6px 12px;border:1px solid var(--mts-gold);cursor:pointer}
.pv-play{background:var(--mts-gold);color:#0a0a0a}
.pv-alle{background:rgba(0,0,0,.35);color:var(--mts-gold)}
.pv-knoepfe button:hover{filter:brightness(1.12)}

/* Kopfbild weg, solange der Player laeuft (28.09.2026). */
.dhero.versteckt{display:none}

/* ── Ecken minimal abgerundet (07.10.2026) ───────────────────────────────────
   Vorgabe: Vorschauen, Karussell und Rubrik-Kaesten mit minimaler Rundung.
   Ein Wert fuer alles (--rund); Kaesten mit Bild brauchen overflow:hidden,
   sonst ragt das Bild ueber die gerundete Ecke. */
:root{--rund:6px}
.sport,.skel-sport,
.buehne,.b-pfeil,.b-knoepfe button,
.ethumb,.skel-strip i,.pvbox,.azcard,.ep,.epthumb,.dhero,.pl-wrap{border-radius:var(--rund)}
.b-text .tag{border-radius:3px}
.search input,.ctrl{border-radius:var(--rund)}
/* Bei nur einer Sendung (z. B. Filter „Rugby") nicht zu einer sehr kurzen
   Seite zusammenfallen (07.10.2026): die Liste behaelt eine Mindesthoehe. */
#listing{min-height:640px}
@media (max-width:600px){ #listing{min-height:480px} }
.buehne,.pvbox,.azcard,.pl-wrap{overflow:hidden}

/* ── Player-Steuerung wie beim dailyme-TV-Player (07.10.2026) ─────────────────
   Nachbau von dailyme_react `vodplayer-*` (DailymePlayer.css, DetailHeld.css,
   NewsSeiten.css). Gleicher Aufbau, gleiche Formen und Verlaeufe; Akzent MTS-Gold
   statt dailyme-Orange (#ff5722). */
.pl-buehne{position:relative;background:#000;outline:none}
.pl-buehne video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:contain}
.pl-buehne video[hidden]{display:none} /* eigene display-Regel schlaegt sonst [hidden] (s. CLAUDE.md) */
.pl-buehne:fullscreen,.pl-buehne:-webkit-full-screen{width:100%;height:100%;display:flex;align-items:center}
.pl-buehne:fullscreen video,.pl-buehne:-webkit-full-screen video{height:100%;aspect-ratio:auto}
.vp{position:absolute;inset:0;z-index:2;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  transition:opacity .2s ease}
.pl-wrap.vp-aus .vp{opacity:0;cursor:none}
.pl-wrap.vp-aus .vp *{pointer-events:none}
.pl-wrap.werbung .vp{display:none}
.vp-kopf,.vp-unten{isolation:isolate}
.vp-kopf::before,.vp-unten::before{content:"";position:absolute;left:-6%;right:-6%;pointer-events:none;z-index:-1}
.vp-kopf{position:absolute;left:3%;top:5%;max-width:60%;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.75)}
/* Verlauf oben ueber die ganze Breite (am Kopf selbst zeichnete er sich als Kasten ab) */
.vp-kopf::before{display:none}
.vp::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.vp-unter{color:var(--mts-gold);font-family:var(--font-headline);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
.vp-titel{margin-top:4px;color:#fff;font-weight:700;font-size:clamp(15px,1.9vw,22px);line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vp-unten{position:absolute;left:3%;right:3%;bottom:4%;display:flex;flex-direction:column;cursor:default}
.vp-unten::before{bottom:-14%;top:-80%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8))}
.vp-spur{position:relative;padding:7px 0;cursor:pointer;outline:none;touch-action:none}
.vp-spur-innen{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.vp-spur:hover .vp-spur-innen,.vp-spur:focus-visible .vp-spur-innen{height:6px}
.vp-puffer{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:rgba(255,255,255,.28);width:0}
.vp-fuell{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--mts-gold);width:0}
.vp-griff{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vp-zeiten{display:flex;justify-content:space-between;margin-top:4px;color:rgba(255,255,255,.85);font-size:13px;
  font-variant-numeric:tabular-nums}
.vp-reihe{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;column-gap:16px;margin-top:10px}
.vp-mitte{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;column-gap:34px}
.vp-rechts{justify-self:end;display:flex;align-items:center;gap:14px;padding-bottom:20px}
.vp-rechts .vp-knopf{flex-direction:row}
.vp-rechts .vp-wort{display:none}
.vp-knopf{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#fff;
  font:inherit;font-size:12px;cursor:pointer;opacity:.92;padding:0}
.vp-knopf:hover{opacity:1}
.vp-knopf:hover .vp-symbol{border-color:var(--mts-gold)}
.vp-symbol{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  position:relative;transition:border-color .2s}
.vp-knopf--gross .vp-symbol{width:52px;height:52px;background:var(--mts-gold);border-color:var(--mts-gold)}
.vp-knopf--gross:hover .vp-symbol{background:var(--mts-gold-light)}
.vp-symbol::before,.vp-symbol::after{content:"";position:absolute;top:50%;left:50%}
.vp-symbol--play::before{border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #111;transform:translate(-40%,-50%)}
.vp-symbol--pause::before,.vp-symbol--pause::after{width:4px;height:18px;background:#111;transform:translate(-50%,-50%)}
.vp-symbol--pause::before{margin-left:-5px}
.vp-symbol--pause::after{margin-left:5px}
.vp-symbol--zurueck::before,.vp-symbol--vor::before{border-style:solid;border-width:6px 10px;transform:translate(-50%,-50%)}
.vp-symbol--zurueck::before{border-color:transparent #fff transparent transparent;margin-left:-4px}
.vp-symbol--vor::before{border-color:transparent transparent transparent #fff;margin-left:4px}
.vp-symbol--zurueck::after,.vp-symbol--vor::after{width:2px;height:12px;background:#fff;transform:translate(-50%,-50%)}
.vp-symbol--zurueck::after{margin-left:-9px}
.vp-symbol--vor::after{margin-left:9px}
.vp-symbol--ton,.vp-symbol--stumm,.vp-symbol--vollbild{background-repeat:no-repeat;background-position:center;background-size:20px 20px}
.vp-symbol--ton{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h3.6L13 19V5L7.6 9H4z'/%3E%3Cpath d='M16.2 8.6a4.6 4.6 0 010 6.8M18.6 6.2a8 8 0 010 11.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.vp-symbol--stumm{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h3.6L13 19V5L7.6 9H4z'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.vp-symbol--vollbild{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Ladering: wie dailyme 1 Umdrehung/s, Bogen in Gold */
.vp-laden{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
  border:4px solid rgba(255,255,255,.18);border-top-color:var(--mts-gold);animation:vpDreh 1s linear infinite}
.vp-laden[hidden]{display:none}
@keyframes vpDreh{to{transform:rotate(360deg)}}
@media (max-width:767px){
  .vp-kopf{max-width:80%}
  .vp-unter{font-size:11px;letter-spacing:1px}
  .vp-unten{bottom:3%}
  .vp-unten .vp-spur{order:3}
  .vp-unten .vp-zeiten{order:2;font-size:11px}
  .vp-unten .vp-reihe{order:1;margin-top:0;column-gap:8px}
  .vp-mitte{column-gap:18px}
  .vp-rechts{padding-bottom:0;gap:8px}
  .vp-wort{display:none}
  .vp-symbol{width:32px;height:32px}
  .vp-knopf--gross .vp-symbol{width:42px;height:42px}
}

/* Handy: Player im Rahmen wie das Kopfbild (07.10.2026, Vorgabe „mobil im
   Rahmen statt voller Breite" — die volle Breite von vorher ist zurueckgenommen). */

/* Karussell vor dem ersten Laden: Balken statt leerer Flaeche (07.10.2026) */
.b-folie.skel{background:none;animation:none}
.b-folie.skel::before{display:none}
.b-skel{position:absolute;inset:0;background:linear-gradient(100deg,var(--skel-a) 30%,#2a2a2a 50%,var(--skel-a) 70%) 0 0/1600px 100%;
  animation:schimmer 1.8s linear infinite}
.b-skel-text{position:absolute;left:48px;bottom:64px;width:min(520px,60%);display:flex;flex-direction:column;gap:14px}
.b-skel-text i{display:block;height:14px;border-radius:3px;background:rgba(255,255,255,.08)}
.b-skel-text i.tag{width:90px;height:22px}
.b-skel-text i.t1{width:85%;height:44px}
.b-skel-text i.t2{width:60%;height:44px}
.b-skel-text i.p{width:95%}
.b-skel-text i.p2{width:70%}
.b-skel-text span{display:flex;gap:12px;margin-top:8px}
.b-skel-text span i{width:150px;height:44px}
@media (max-width:760px){
  .b-skel-text{left:18px;right:18px;bottom:46px;width:auto}
  .b-skel-text i.t1,.b-skel-text i.t2{height:30px}
  .b-skel-text span i{width:120px;height:38px}
}

/* Wechsel Formate ↔ Neueste Folgen: Spur und Punkte blenden weich aus und ein (07.10.2026) */
.b-spur,.b-punkte{transition:opacity .26s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.buehne.b-wechsel .b-spur{opacity:0;transform:scale(.985)}
.buehne.b-wechsel .b-punkte{opacity:0}
.b-modus button{transition:background .3s ease,color .3s ease}
@media (prefers-reduced-motion:reduce){ .b-spur,.b-punkte{transition:none} }

/* Ladebild des Players (07.10.2026): Vorschaubild der Folge abgedunkelt, Ladering,
   „Weiter mit …“ — beim Weiterspringen bleibt der Player stehen, nur das Bild wechselt. */
/* Start-Abfolge: Bild → Schwarz → Titel → ins Video (07.10.2026) */
.pl-vorschau{position:absolute;inset:0;z-index:1;background:#000;transition:opacity .6s ease;pointer-events:none}
.pl-vorschau i{position:absolute;inset:0;background:center/cover no-repeat;animation:vsSchwarz .5s ease forwards}
@keyframes vsSchwarz{to{opacity:0}}
.pl-vorschau.weg{opacity:0}
.pl-msg.pl-laedt::before{display:none}
.pl-msg.pl-laedt.weg{transition:opacity .6s ease}
.pl-msg.pl-laedt{position:relative;z-index:2;gap:10px;color:#fff;background:transparent;isolation:isolate;padding:0}
.pl-msg.pl-laedt.pl-ueber{aspect-ratio:auto;width:100%;height:100%;top:0;left:0;right:auto;bottom:auto}
.pl-msg.pl-laedt::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.55)}
.pl-msg.pl-ueber{position:absolute;inset:0;z-index:2;transition:opacity .35s ease}
.pl-msg.weg{opacity:0;pointer-events:none}
.pl-ring{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--mts-gold);
  animation:vpDreh 1s linear infinite;margin-bottom:6px}
.pl-naechste{font-family:var(--font-headline);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mts-gold)}
.pl-ntitel{font-family:var(--font-display);font-weight:900;font-size:clamp(18px,2.6vw,30px);text-transform:uppercase;line-height:1;
  max-width:80%;text-shadow:0 2px 14px rgba(0,0,0,.6)}
@media (max-width:600px){ .pl-ring{width:38px;height:38px;border-width:3px} .pl-ntitel{font-size:16px} }

/* Player im Rahmen des Kopfbilds (07.10.2026): gleicher Rand, Rundung und
   Schatten wie .dhero, keine eigene Leiste darueber; Werbeebene ab Oberkante. */
#detail > .pl-wrap{border:1px solid var(--mts-border);margin-bottom:0;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 40px rgba(233,192,121,.12)}
.pl-ad{top:0}
.vp-vollbild{position:absolute;top:4%;right:3%;z-index:1}
.vp-vollbild .vp-symbol{width:38px;height:38px}
@media (max-width:767px){
  .vp-vollbild .vp-symbol{width:32px;height:32px}
}

/* ── Kopfzeile: MTS Mediathek / Zurueck + LIVE (07.10.2026) ──────────────────
   Titel und Zurueck-Knopf liegen in derselben Rasterzelle: die Zeile ist in
   Uebersicht und Sendungsseite gleich hoch, Karussell und Rahmen beginnen auf
   derselben Hoehe. */
.mkopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:30px}
.mk-links{display:grid;align-items:center;min-height:46px}
.mk-links > *{grid-area:1/1}
.mk-titel{font-family:var(--font-display);font-size:clamp(34px,5.4vw,66px);line-height:.92;letter-spacing:-.5px;
  text-transform:uppercase;font-weight:900}
.mk-titel .accent{color:var(--mts-gold);text-shadow:0 0 30px rgba(233,192,121,.4)}
.mk-zurueck{justify-self:start;background:transparent;color:var(--mts-text);border:1px solid var(--mts-border-light);
  border-radius:var(--rund);font-family:var(--font-headline);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:11px 20px;cursor:pointer;font-size:13px;visibility:hidden}
.mk-zurueck:hover{border-color:var(--mts-gold);color:var(--mts-gold)}
body.detail .mk-titel{visibility:hidden}
body.detail .mk-zurueck{visibility:visible}
body.no-header .mk-titel{display:none}
body.no-header .mkopf{padding-top:18px}
.mk-live{flex:none;display:inline-flex;align-items:center;gap:9px;background:#e10600;color:#fff;border:0;cursor:pointer;
  border-radius:var(--rund);padding:11px 20px;font-family:var(--font-headline);font-weight:700;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;box-shadow:0 6px 24px rgba(225,6,0,.35);transition:background .2s,transform .2s}
.mk-live:hover{background:#ff1a12;transform:translateY(-1px)}
.mk-live i{width:9px;height:9px;border-radius:50%;background:#fff;animation:livePuls 1.6s ease-in-out infinite}
@keyframes livePuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.mhead{display:none}
/* Gleiche Oberkante: Karussell (Uebersicht) und Rahmen (Sendungsseite) */
.buehne,body.no-header .buehne{margin-top:16px}
#detail > .dhero,#detail > .pl-wrap{margin-top:16px}
#detail > .dhero.versteckt + .dsub,#detail > .pl-wrap + .dhero.versteckt + .dsub{margin-top:20px}
/* Live */
.dhero-live{background:radial-gradient(120% 140% at 80% 20%,#5a0a08 0%,#1a0605 45%,#0a0a0a 100%)}
.tag.tag-live{background:#e10600;color:#fff}
.live-punkt{color:#ff3b30 !important}
.vp-live{display:inline-flex;align-items:center;gap:6px;background:#e10600;color:#fff;padding:3px 9px;border-radius:3px;letter-spacing:1.5px}
.vp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:livePuls 1.6s ease-in-out infinite}
.vp-unten--live .vp-spur,.vp-unten--live .vp-zeiten{display:none}
.vp-unten--live [data-tun="vonvorn"],.vp-unten--live [data-tun="weiter"]{visibility:hidden}
@media (max-width:600px){
  .mkopf{padding-top:20px}
  .mk-live{padding:9px 14px;font-size:12px;letter-spacing:1.5px}
  .mk-zurueck{padding:9px 12px;font-size:11px;letter-spacing:1px}
  .mk-links{min-height:38px}
}
@media (prefers-reduced-motion:reduce){ .mk-live i,.vp-live::before{animation:none} }

/* Kopfbild der Sendungsseite im Format des Players (07.10.2026, „wacklige
   Videostarts"): vorher 24:9 → beim Start wuchs der Rahmen auf 16:9 und alles
   darunter rutschte (1336 px breit: +251 px). Jetzt gleich gross, kein Sprung. */
.dhero{aspect-ratio:16/9}
/* Ladebild weich abdunkeln statt schlagartig (07.10.2026) — es zeigt beim Start
   dasselbe Bild wie das Kopfbild, nur Ring und Titel kommen dazu. */
.pl-msg.pl-laedt > *{animation:plDunkel .45s ease .45s both} /* erst nach dem Abblenden */
@keyframes plDunkel{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ .pl-msg.pl-laedt > *,.pl-vorschau i{animation:none} }

/* Warteanimation: drei Punkte statt Ring (07.10.2026, Vorgabe) — beim Start
   (Ladebild) und beim Nachladen (Steuerung). */
.punkte{display:inline-flex;gap:9px;align-items:center;justify-content:center}
.punkte i{width:10px;height:10px;border-radius:50%;background:var(--mts-gold);animation:punktPuls 1.1s ease-in-out infinite}
.punkte i:nth-child(2){animation-delay:.18s}
.punkte i:nth-child(3){animation-delay:.36s}
@keyframes punktPuls{0%,80%,100%{opacity:.25;transform:scale(.75)}40%{opacity:1;transform:scale(1)}}
.pl-msg .punkte{margin-bottom:10px}
.pl-ring{display:none}
.vp-laden{border:0;animation:none;width:auto;height:auto;margin:0;transform:translate(-50%,-50%);display:flex}
.vp-laden[hidden]{display:none}
@media (max-width:600px){ .punkte i{width:8px;height:8px} .punkte{gap:7px} }
@media (prefers-reduced-motion:reduce){ .punkte i{animation:none;opacity:.8} }