/* Bayrischzell TV am Handy (ENTWURF 24.10.2026). Farben wie Fernseh-App und Icon:
   Nachtblau #091f31, Gold #ddbd79, dunkles Gold #b08a3e. Volle Breite, keine schmalen Spalten. */
:root{--tv-blau:#091f31;--tv-blau2:#13324d;--tv-gold:#ddbd79;--tv-gold-d:#b08a3e}

/* ---------- Teaser auf der App-Startseite ---------- */
.tvt{padding-top:10px;padding-bottom:10px}
.tvt-band{display:block;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--tv-blau) 0%,var(--tv-blau2) 100%);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(9,31,49,.18)}
.tvt-kopf{display:flex;gap:14px;align-items:center}
.tvt-icon{width:64px;height:64px;border-radius:15px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tvt-kopf h2{color:#fff;margin:0 0 4px;font-size:1.35rem}
.tvt-kopf p{margin:0;color:#d6dde4;font-size:.95rem;line-height:1.4}
.tvt-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 14px}
.tvt-kachel{position:relative;aspect-ratio:16/9;border-radius:10px;background:#0f2a40 center/cover no-repeat;overflow:hidden}
.tvt-kachel span{position:absolute;left:6px;top:6px;background:var(--tv-gold);color:var(--tv-blau);font-weight:800;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:2px 6px}
.tvt-kachel small{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:.7rem;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvt-knopf{display:block;text-align:center;background:var(--tv-gold);color:var(--tv-blau);font-weight:800;border-radius:12px;padding:11px}

/* ---------- Seite /bayrischzell-tv ---------- */
.tvm{background:#f4f5f7}
.tvm-held{background:linear-gradient(135deg,var(--tv-blau) 0%,var(--tv-blau2) 100%);color:#fff;padding:clamp(22px,4vw,48px) clamp(14px,2.4vw,40px)}
.tvm-held-inner{display:flex;gap:clamp(14px,2.5vw,28px);align-items:center}
.tvm-held-inner>div{min-width:0;flex:1}
@media (max-width:640px){.tvm-held-inner{flex-direction:column;align-items:stretch}.tvm-held-inner>div{flex:none}.tvm-held img{width:84px}}
.tvm-held img{width:clamp(76px,10vw,120px);height:auto;border-radius:22%;box-shadow:0 4px 16px rgba(0,0,0,.35);flex:none}
.tvm-held h1{color:#fff;margin:0 0 6px;font-size:clamp(1.7rem,4vw,2.6rem)}
.tvm-held p{margin:0;color:#d6dde4;font-size:1.02rem;line-height:1.45}
.tvm-geraete{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tvm-geraete a,.tvm-geraete span{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:8px 15px;font-weight:700;font-size:.92rem;text-decoration:none}
.tvm-geraete a{background:var(--tv-gold);color:var(--tv-blau)}
.tvm-geraete span{border:1px solid rgba(255,255,255,.35);color:#d6dde4}

.tvm-reihe{padding:22px 0 6px}
.tvm-reihe-kopf{display:flex;flex-direction:column;gap:2px;padding:0 clamp(14px,2.4vw,40px);margin-bottom:10px}
.tvm-reihe-kopf h2{margin:0;font-size:1.25rem;color:var(--tv-blau)}
.tvm-reihe-kopf small{color:#6b7480;font-size:.85rem}
.tvm-band{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(14px,2.4vw,40px);padding:4px clamp(14px,2.4vw,40px) 12px;scrollbar-width:none}
.tvm-band::-webkit-scrollbar{display:none}
.tvm-karte{flex:0 0 clamp(250px,72vw,340px);scroll-snap-align:start;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(9,31,49,.08);border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
@media (min-width:1000px){.tvm-karte{flex-basis:calc((100% - 3*12px)/4)}}
.tvm-bild{position:relative;aspect-ratio:16/9;background:#0f2a40 center/cover no-repeat}
.tvm-bild .art{position:absolute;left:8px;top:8px;background:var(--tv-gold);color:var(--tv-blau);font-weight:800;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:3px 7px}
.tvm-bild .dauer{position:absolute;right:8px;bottom:8px;background:rgba(9,31,49,.85);color:#fff;font-size:.78rem;font-weight:700;border-radius:6px;padding:2px 7px}
.tvm-bild .play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(9,31,49,.78);display:flex;align-items:center;justify-content:center}
.tvm-bild .play:after{content:"";border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.tvm-text{padding:10px 12px 12px}
.tvm-text h3{margin:0;font-size:.98rem;line-height:1.3;color:var(--tv-blau);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tvm-text p{margin:4px 0 0;font-size:.82rem;color:#6b7480}
.tvm-text p a{color:#6b7480}

.tvm-hoeren{padding:0 clamp(14px,2.4vw,40px);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.tvm-folge{display:flex;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:10px;box-shadow:0 2px 10px rgba(9,31,49,.06);border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.tvm-folge img{width:58px;height:58px;border-radius:8px;object-fit:cover;flex:none}
.tvm-folge h3{margin:0;font-size:.93rem;line-height:1.3;color:var(--tv-blau)}
.tvm-folge p{margin:3px 0 0;font-size:.8rem;color:#6b7480}
.tvm-folge.an{outline:2px solid var(--tv-gold)}
.tvm-folge.tvm-mehr{display:none}
.tvm-alle{padding:12px clamp(14px,2.4vw,40px) 0;margin:0}
.tvm-alle button{font:inherit;font-weight:700;color:var(--tv-blau);background:#fff;border:1px solid #d5dbe1;border-radius:99px;padding:9px 18px;cursor:pointer}

.tvm-spieler{position:sticky;bottom:0;z-index:50;background:var(--tv-blau);color:#fff;padding:10px clamp(14px,2.4vw,40px);display:none;gap:10px;align-items:center}
.tvm-spieler.an{display:flex}
.tvm-spieler strong{font-size:.88rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvm-spieler audio{width:min(420px,55%)}

.tvm-fuss{padding:24px clamp(14px,2.4vw,40px) 34px;color:#6b7480;font-size:.88rem}

.tvm-licht{position:fixed;inset:0;background:rgba(5,14,22,.96);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.tvm-licht.an{display:flex}
.tvm-licht .buehne{width:100%;max-width:1400px;aspect-ratio:16/9;max-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center}
.tvm-licht img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.tvm-licht iframe{width:100%;height:100%;border:0;border-radius:6px}
.tvm-licht p{color:#e3e8ee;margin:12px 0 0;text-align:center;font-size:.92rem}
.tvm-licht p a{color:var(--tv-gold)}
.tvm-licht button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}
.tvm-licht .zu{top:14px;right:14px}.tvm-licht .vor{left:12px;top:50%}.tvm-licht .nach{right:12px;top:50%}

/* ---------- Diashow als Film (Karte und Abspieler) ---------- */
.tvm-film{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;width:calc(100% - 2*clamp(14px,2.4vw,40px));margin:0 clamp(14px,2.4vw,40px);background:#fff;border:0;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(9,31,49,.1);padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
@media (max-width:760px){.tvm-film{grid-template-columns:1fr}}
.tvm-film-bild{position:relative;aspect-ratio:16/9;background:#0f2a40;overflow:hidden}
.tvm-film-bild span{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.tvm-film-bild span.an{opacity:1}
.tvm-film-bild .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(9,31,49,.8);display:flex;align-items:center;justify-content:center;z-index:2}
.tvm-film-bild .play:after{content:"";border-left:21px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.tvm-film-text{padding:16px 18px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.tvm-film-text .art{align-self:flex-start;background:var(--tv-gold);color:var(--tv-blau);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:3px 8px}
.tvm-film-text h3{margin:0;font-size:1.25rem;color:var(--tv-blau)}
.tvm-film-text p{margin:0;color:#6b7480;font-size:.92rem;line-height:1.4}

.tvm-licht .buehne.film{position:relative;overflow:hidden;border-radius:6px;background:#000;cursor:pointer}
.buehne.film .fe{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease}
.buehne.film .fe.sicht{opacity:1}
.buehne.film .fe.zoom.z1{animation:tvmZoom1 7.2s linear forwards}
.buehne.film .fe.zoom.z2{animation:tvmZoom2 7.2s linear forwards}
@keyframes tvmZoom1{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
@keyframes tvmZoom2{from{transform:scale(1.08) translate(1.5%,1%)}to{transform:scale(1)}}
.buehne.film .fbalken{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:4px;z-index:3}
.buehne.film .fbalken i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.buehne.film .fbalken i b{display:block;height:100%;width:0;background:#fff}
.buehne.film .fbalken i.voll b{width:100%}
.buehne.film .fbalken i.jetzt b{animation:tvmBalken 6s linear forwards}
.buehne.film.pausiert .fbalken i.jetzt b,.buehne.film.pausiert .fe.zoom{animation-play-state:paused}
@keyframes tvmBalken{from{width:0}to{width:100%}}
.buehne.film .ftext{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;color:#fff;font-size:.95rem;background:linear-gradient(transparent,rgba(0,0,0,.55));z-index:3}
.buehne.film .fpause{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(9,31,49,.75);z-index:4;display:none}
.buehne.film .fpause:before,.buehne.film .fpause:after{content:"";position:absolute;top:20px;width:7px;height:24px;background:#fff;border-radius:2px}
.buehne.film .fpause:before{left:22px}.buehne.film .fpause:after{right:22px}
.buehne.film.pausiert .fpause{display:block}
@media (prefers-reduced-motion:reduce){.tvm-film-bild span,.buehne.film .fe{transition:none}}

/* ---------- Info-Schleife im Vollbild und Musik-Knopf ---------- */
.tvm-quelle{margin:8px clamp(14px,2.4vw,40px) 0;font-size:.82rem;color:#6b7480}
.tvm-quelle a{color:#6b7480}
.tvm-licht.schleife{padding:0;background:#000}
.tvm-licht.schleife #tvmUnter{display:none}
.tvm-licht .buehne.schleife{position:absolute;left:50%;top:50%;max-width:none;max-height:none;aspect-ratio:auto;transform:translate(-50%,-50%);border-radius:0;background:#000}
.tvm-licht .buehne.schleife.gedreht{transform:translate(-50%,-50%) rotate(90deg)}
.tvm-licht .buehne.schleife iframe{width:100%;height:100%;border:0;border-radius:0;display:block}
.tvm-licht .zu{z-index:5}
.tvm-licht .musik{display:none;top:14px;right:70px;left:auto;width:auto;height:46px;border-radius:99px;padding:0 16px;font:inherit;font-size:.9rem;font-weight:700;z-index:5}
.tvm-licht.mitmusik .musik{display:block}
.tvm-licht .musik.aus{opacity:.65;text-decoration:line-through}
.buehne.film .fki{position:absolute;right:12px;bottom:12px;color:rgba(255,255,255,.8);font-size:.72rem;z-index:4}
.buehne.film .ftext{padding-right:150px}
.tvm-text p.tvm-kurz{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}

/* Diashow am Handy (Michael 24.10.2026): ohne Text und Zaehler, KI-Hinweis nur kurz, quer bildschirmfuellend */
.tvm-licht.filmmodus{padding:0;background:#000}
.tvm-licht.filmmodus #tvmUnter{display:none}
.tvm-licht.filmmodus .buehne.film{width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));height:auto;max-width:none;max-height:none;aspect-ratio:16/9;border-radius:0}
.buehne.film .fki{transition:opacity 1s ease}
.buehne.film .fki.weg{opacity:0}

/* Videos am Handy (Michael 24.10.2026): ohne Titelzeile darunter, so gross wie moeglich, quer bildschirmfuellend */
.tvm-licht.videomodus{padding:0;background:#000}
.tvm-licht.videomodus #tvmUnter{display:none}
.tvm-licht.videomodus .buehne{width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));height:auto;max-width:none;max-height:none;aspect-ratio:16/9}
.tvm-licht.videomodus iframe{border-radius:0}

/* Talgeschichten: Steuerung klappt in der Kachel auf (Michael 24.10.2026) */
.tvm-folge-box{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(9,31,49,.06);overflow:hidden}
.tvm-folge-box.tvm-mehr{display:none}
.tvm-folge-box .tvm-folge{width:100%;box-shadow:none;background:transparent;border-radius:0}
.tvm-folge-box.an{outline:2px solid var(--tv-gold)}
.tvm-folge>div{flex:1;min-width:0}
.tvm-folge-play{flex:none;width:34px;height:34px;border-radius:50%;background:var(--tv-blau);position:relative}
.tvm-folge-play:after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.tvm-folge-box.spielt .tvm-folge-play:after{left:11px;top:10px;width:4px;height:14px;border:0;background:#fff;box-shadow:8px 0 0 #fff}
.tvm-steuer{padding:2px 12px 14px}
.ts-knoepfe{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ts-knoepfe button{font:inherit;font-size:.85rem;font-weight:700;border:1px solid #d5dbe1;background:#fff;color:var(--tv-blau);border-radius:99px;padding:8px 12px;cursor:pointer}
.ts-knoepfe .ts-play{width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--tv-gold);position:relative}
.ts-knoepfe .ts-play:after{content:"";position:absolute;left:18px;top:14px;border-left:14px solid var(--tv-blau);border-top:9px solid transparent;border-bottom:9px solid transparent}
.ts-knoepfe .ts-play.pause:after{left:16px;top:15px;width:5px;height:16px;border:0;background:var(--tv-blau);box-shadow:9px 0 0 var(--tv-blau)}
.ts-zeit{margin-left:auto;font-size:.82rem;color:#6b7480;font-variant-numeric:tabular-nums}
.ts-pos{width:100%;accent-color:var(--tv-gold);height:28px;margin:0}

/* Info-Schleife auf iPhone/iPad hochkant: nicht drehen, in voller Breite mittig, Hinweis darunter (24.10.2026) */
.tvm-licht.schleife.schleife-hochkant #tvmUnter{display:block;position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);color:#c9d3dc;font-size:.95rem}
.tvm-licht.schleife.schleife-hochkant .buehne.schleife{top:50%}

/* Schliessen- und Musik-Knopf unter Statusleiste und Dynamic Island (App reicht bis an den oberen Rand, 24.10.2026) */
.tvm-licht .zu{top:calc(env(safe-area-inset-top, 0px) + 14px);right:calc(env(safe-area-inset-right, 0px) + 14px)}
.tvm-licht .musik{top:calc(env(safe-area-inset-top, 0px) + 14px);right:calc(env(safe-area-inset-right, 0px) + 70px)}
.tvm-hinweis{max-width:420px;margin:0 auto;padding:22px;border-radius:14px;background:#0f2a40;color:#e3e8ee;font-size:1rem;line-height:1.5;text-align:center}

/* Zum Laufenlassen am Handy (24.10.2026): zwei Videos, weich ueberblendet */
.buehne.film.laufen .lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;background:#000}
.buehne.film.laufen .lv.sicht{opacity:1}

/* Kurz und hochkant (24.10.2026): schmale 9:16-Karten, Abspieler hochkant */
.tvm-karte.tvm-kurz{flex-basis:clamp(130px,38vw,180px)}
@media (min-width:1000px){.tvm-karte.tvm-kurz{flex-basis:calc((100% - 5*12px)/6)}}
.tvm-kurz .tvm-bild{aspect-ratio:9/16;background-size:cover;background-position:center}
.tvm-kurz .tvm-text h3{font-size:.86rem}
.tvm-licht.kurzmodus{padding:0;background:#000}
.tvm-licht.kurzmodus #tvmUnter{display:none}
.tvm-licht.kurzmodus .buehne.kurz{height:min(100vh,calc(100vw * 16 / 9));height:min(100dvh,calc(100vw * 16 / 9));width:auto;aspect-ratio:9/16;max-width:none;max-height:none}
.tvm-licht.kurzmodus iframe{width:100%;height:100%;border:0}
/* Kompakt zum Nachhoeren */
.tvm-kompakt-bild{flex:none;width:58px;height:58px;border-radius:8px;background:var(--gruen,#3e5a4c);color:#fff;display:flex;align-items:center;justify-content:center}
.tvm-kompakt-bild svg{width:28px;height:28px}