/* HesaPlay - Oberflaeche. Ziel: Samsung Tizen ab 2018, LG webOS ab 4, Windows, Handy.
   Bewusst ohne CSS-Grid, flex-gap, inset, aspect-ratio (alte TV-Browser). */
:root{
  --bg:#0A1830; --bg2:#0E2142; --night:#13294B; --panel:#15305A; --line:#24436F;
  --text:#EEF3FA; --mute:#93A6C2; --dim:#5F7597;
  --amber:#FFB21E; --orange:#FF7007; --sky:#00A2FF; --violet:#8B5CF6;
  --ok:#3FD59A; --bad:#FF6B57;
  --head:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Overpass','Segoe UI',Roboto,Arial,sans-serif;
  --r:.5rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:calc(100vw / 120);background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
html.m{font-size:16px}
body{font-family:var(--body);font-size:1.05rem;line-height:1.35;overflow:hidden;height:100vh;width:100vw;background:var(--bg);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
body.playing{background:transparent}
body.playing #app{visibility:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:var(--text)}
img{display:block}
.hide{display:none!important}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h{font-family:var(--head);font-weight:700;letter-spacing:.01em}
svg.i{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Buehne (Video) ---------- */
#stage{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;z-index:0;display:none}
body.playing #stage{display:block}
#vid,#av{position:absolute;left:0;top:0;width:100%;height:100%;background:transparent}
#vid.fill{object-fit:cover}#vid.fit{object-fit:contain}#vid.stretch{object-fit:fill}
#subs{position:absolute;left:10%;right:10%;bottom:9%;text-align:center;font-size:2.1rem;line-height:1.3;text-shadow:0 0 .3rem #000,0 0 .6rem #000;pointer-events:none;z-index:3;white-space:pre-line}

/* ---------- Grundgeruest ---------- */
#app{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;z-index:1;background:radial-gradient(ellipse at 70% -20%,rgba(0,162,255,.10),transparent 55%),var(--bg)}
#rail{width:6rem;flex:none;background:var(--bg2);border-right:.08rem solid var(--line);display:flex;flex-direction:column;align-items:stretch;padding:1.4rem 0;z-index:5;transition:width .18s ease}
#rail.open{width:17rem;box-shadow:1rem 0 3rem rgba(0,0,0,.45)}
#rail .logo{display:flex;align-items:center;height:3.2rem;padding:0 1.55rem;margin-bottom:1.6rem;overflow:hidden;white-space:nowrap}
#rail .logo img{width:2.9rem;height:2.9rem;border-radius:.7rem;flex:none}
#rail .logo b{font-family:var(--head);font-size:2rem;margin-left:.9rem;letter-spacing:.02em}
#rail .logo b span{color:var(--orange)}
.ri{display:flex;align-items:center;height:4.1rem;margin:.15rem .7rem;padding:0 .9rem;border-radius:var(--r);color:var(--mute);white-space:nowrap;overflow:hidden;position:relative}
.ri svg.i{width:2rem;height:2rem}
.ri span{font-family:var(--head);font-weight:600;font-size:1.55rem;margin-left:1.1rem;opacity:0;transition:opacity .15s}
#rail.open .ri span{opacity:1}
.ri.on{color:var(--text)}
.ri.on:before{content:'';position:absolute;left:0;top:1rem;bottom:1rem;width:.25rem;border-radius:.2rem;background:var(--amber)}
.ri.sp{margin-top:auto}
#view{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
#top{height:5.2rem;flex:none;display:flex;align-items:center;padding:0 2.4rem;border-bottom:.08rem solid rgba(36,67,111,.55)}
#top .t{font-family:var(--head);font-size:2.3rem;font-weight:700}
#top .pl{margin-left:1.2rem;color:var(--mute);font-size:1.1rem;max-width:30rem}
#top .sp{flex:1}
#top .badge{margin-right:1.6rem}
#clock{font-family:var(--head);font-size:2.2rem;font-weight:600;letter-spacing:.03em}
.badge{display:inline-flex;align-items:center;border-radius:2rem;padding:.3rem .95rem .2rem;font-size:.95rem;font-weight:700;border:.1rem solid currentColor;white-space:nowrap}
.badge.trial{color:var(--amber)}.badge.exp{color:var(--orange)}.badge.ok{color:var(--ok)}
#main{flex:1;display:flex;min-height:0;position:relative}

/* ---------- Fokus: die Bernstein-Lichtkante ---------- */
.f{outline:none}
.tv .foc,.tv .f.foc{box-shadow:0 0 0 .22rem var(--amber),0 .8rem 2rem rgba(0,0,0,.45)!important;position:relative;z-index:2}
.tv .ri.foc{box-shadow:none!important;background:rgba(255,178,30,.14);color:#fff}
.tv .row.foc{box-shadow:none!important;background:linear-gradient(90deg,rgba(255,178,30,.20),rgba(255,178,30,.05))}
.tv .row.foc:before{content:'';position:absolute;left:0;top:.35rem;bottom:.35rem;width:.3rem;border-radius:.2rem;background:var(--amber)}
.tv .row.foc .num{color:var(--amber)}
.tv .zone-off .row.sel{background:rgba(255,255,255,.07)}
.row.sel .n{color:#fff}

/* ---------- Spalten (Live/Filme/Serien) ---------- */
.col{display:flex;flex-direction:column;min-height:0;border-right:.08rem solid rgba(36,67,111,.55)}
.col .hd{height:3.8rem;flex:none;display:flex;align-items:center;padding:0 1.5rem;font-family:var(--head);font-size:1.45rem;font-weight:600;color:var(--mute)}
.col .hd b{color:var(--text);margin-left:.6rem;font-weight:600}
.c-cat{width:24rem;flex:none}
.c-list{width:44rem;flex:none}
.c-info{flex:1;min-width:0;border-right:0}
.vl{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
.tv .vl{overflow-y:hidden}
.vl-in{position:relative;width:100%}
.row{position:absolute;left:.6rem;right:.6rem;display:flex;align-items:center;padding:0 1rem;border-radius:var(--r);cursor:pointer}
.row .n{flex:1;min-width:0;font-size:1.15rem}
.row .cnt{color:var(--dim);font-size:.95rem;margin-left:.8rem}
.row .num{width:3.6rem;flex:none;font-family:var(--head);font-weight:700;font-size:1.5rem;color:var(--dim)}
.row .lg{width:4.6rem;height:2.8rem;flex:none;margin-right:1rem;border-radius:.35rem;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;overflow:hidden}
.row .lg img{max-width:100%;max-height:100%;object-fit:contain}
.row .lg i{font-style:normal;font-family:var(--head);color:var(--dim);font-size:1.2rem}
.row .tx{flex:1;min-width:0}
.row .ep{color:var(--mute);font-size:.92rem;margin-top:.15rem}
.row .ic{margin-left:.6rem;color:var(--dim);display:flex}
.row .ic svg.i{width:1.2rem;height:1.2rem}
.row .ic .fav{color:var(--amber)}
.bar{height:.22rem;border-radius:.2rem;background:rgba(255,255,255,.12);overflow:hidden;margin-top:.35rem}
.bar i{display:block;height:100%;background:var(--sky)}

/* Info-Spalte (Vorschau + EPG) */
.info{padding:2rem 2.6rem;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:1}
.info .ch{display:flex;align-items:center}
.info .ch .lg{width:8rem;height:5rem;border-radius:.5rem;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-right:1.6rem;flex:none}
.info .ch .lg img{max-width:90%;max-height:90%;object-fit:contain}
.info .ch .nm{font-family:var(--head);font-size:2.4rem;font-weight:700;line-height:1.05}
.info .ch .sub{color:var(--mute);margin-top:.3rem}
.prog{margin-top:1.8rem}
.prog .when{font-family:var(--head);font-size:1.3rem;color:var(--amber);font-weight:600}
.prog .ti{font-size:1.5rem;font-weight:700;margin-top:.2rem}
.prog .de{color:var(--mute);margin-top:.6rem;font-size:1.02rem;max-height:9.5rem;overflow:hidden}
.prog.nx{opacity:.8}
.prog.nx .when{color:var(--mute)}
.hint{color:var(--dim);font-size:.95rem;margin-top:auto;padding-top:1rem}
.hint b{color:var(--mute)}
.key{display:inline-block;min-width:1.5rem;padding:0 .35rem;border-radius:.3rem;border:.1rem solid var(--dim);text-align:center;font-size:.85rem;margin:0 .15rem}
.key.r{background:#E23A3A;border-color:#E23A3A;color:#fff}.key.g{background:#2FA84F;border-color:#2FA84F;color:#fff}.key.y{background:#E5C21A;border-color:#E5C21A;color:#111}.key.b{background:#2F6FE0;border-color:#2F6FE0;color:#fff}

/* ---------- Poster-Raster (virtuell) ---------- */
.grid{flex:1;overflow-y:auto;position:relative;padding:0 0 2rem;-webkit-overflow-scrolling:touch}
.tv .grid{overflow-y:hidden}
.card{position:absolute;border-radius:var(--r);cursor:pointer}
.card .ps{position:absolute;left:0;top:0;right:0;bottom:3.4rem;border-radius:var(--r);background:linear-gradient(160deg,var(--panel),var(--bg2));overflow:hidden}
.card .ps img{width:100%;height:100%;object-fit:cover}
.card .ps .ph{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-family:var(--head);font-size:1.4rem;color:var(--mute)}
.card .nm{position:absolute;left:.1rem;right:.1rem;bottom:1.3rem;font-size:1rem;font-weight:600}
.card .mt{position:absolute;left:.1rem;right:.1rem;bottom:0;font-size:.85rem;color:var(--mute)}
.card .rt{position:absolute;right:.5rem;top:.5rem;background:rgba(10,24,48,.85);border-radius:.3rem;padding:.1rem .45rem;font-size:.85rem;font-weight:700;color:var(--amber)}
.card .rs{position:absolute;left:0;right:0;bottom:3.4rem;height:.3rem;background:rgba(0,0,0,.5)}
.card .rs i{display:block;height:100%;background:var(--amber)}
.tv .card.foc{box-shadow:none!important}
.tv .card.foc .ps{box-shadow:0 0 0 .25rem var(--amber),0 1rem 2.4rem rgba(0,0,0,.55);transform:scale(1.04)}
.card .ps{transition:transform .12s ease}

/* ---------- Detailseite ---------- */
.detail{flex:1;position:relative;overflow:hidden;display:flex}
.detail .bd{position:absolute;left:0;top:0;right:0;bottom:0;background-size:cover;background-position:center top;opacity:.28}
.detail .bd:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(90deg,var(--bg) 30%,rgba(10,24,48,.55) 70%,rgba(10,24,48,.2)),linear-gradient(0deg,var(--bg),transparent 40%)}
.detail .in{position:relative;display:flex;padding:3rem 3.4rem;flex:1;min-height:0}
.detail .pst{width:19rem;height:28.5rem;flex:none;border-radius:.7rem;overflow:hidden;background:var(--panel);margin-right:3rem;box-shadow:0 1.4rem 3rem rgba(0,0,0,.5)}
.detail .pst img{width:100%;height:100%;object-fit:cover}
.detail .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.detail h1{font-family:var(--head);font-size:3.6rem;line-height:1;font-weight:700}
.detail .meta{margin-top:.9rem;color:var(--mute);font-size:1.1rem}
.detail .meta b{color:var(--amber);font-weight:700;margin-right:1rem}
.detail .plot{margin-top:1.4rem;font-size:1.15rem;line-height:1.5;max-width:62rem;max-height:10.5rem;overflow:hidden;color:#D5DEEC}
.detail .cast{margin-top:1rem;color:var(--mute);font-size:1rem;max-width:62rem}
.acts{display:flex;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;height:3.6rem;padding:0 1.8rem;border-radius:var(--r);background:var(--panel);font-weight:700;font-size:1.1rem;margin:0 1rem 1rem 0;white-space:nowrap;border:.1rem solid transparent}
.btn svg.i{margin-right:.7rem}
.btn.pri{background:var(--amber);color:#1A1405}
.btn.gh{background:transparent;border-color:var(--line)}
.btn.sm{height:2.8rem;padding:0 1.2rem;font-size:1rem}
.btn.dis{opacity:.45}
.tv .btn.foc{box-shadow:0 0 0 .22rem #fff,0 .6rem 1.6rem rgba(0,0,0,.4)!important}
.tv .btn.pri.foc{box-shadow:0 0 0 .22rem #fff!important}
.tv .btn.foc:not(.pri){background:#23406C}
.seasons{display:flex;overflow:hidden;margin-top:1.4rem;flex:none}
.seasons .btn{margin-bottom:.4rem}
.seasons .btn.on{border-color:var(--amber);color:var(--amber)}
.eps{flex:1;min-height:0;margin-top:.8rem;display:flex}
.eps .vl{margin:0 -.6rem}
.eprow .epn{font-family:var(--head);font-size:1.4rem;font-weight:700;color:var(--amber);width:4.2rem;flex:none}

/* ---------- Seiten mit Formularen/Listen (Einstellungen, Playlists, Suche) ---------- */
.page{flex:1;overflow-y:auto;padding:2.2rem 3rem 4rem;-webkit-overflow-scrolling:touch}
.tv .page{overflow-y:hidden}
.page h2{font-family:var(--head);font-size:2.3rem;font-weight:700;margin-bottom:1.2rem}
.page h3{font-family:var(--head);font-size:1.6rem;font-weight:600;color:var(--mute);margin:2rem 0 .8rem}
.page p{color:var(--mute);max-width:70rem;margin-bottom:1rem}
.lst{max-width:78rem}
.it{display:flex;align-items:center;min-height:4.4rem;padding:.8rem 1.4rem;border-radius:var(--r);background:rgba(255,255,255,.035);margin-bottom:.5rem;cursor:pointer}
.it .l{flex:1;min-width:0}
.it .l b{display:block;font-weight:600;font-size:1.12rem}
.it .l small{display:block;color:var(--mute);font-size:.92rem;margin-top:.15rem}
.it .v{color:var(--amber);font-weight:700;margin-left:1rem;text-align:right;max-width:30rem}
.it .v.off{color:var(--dim)}
.it svg.i{margin-right:1.1rem;color:var(--mute)}
.tv .it.foc{box-shadow:none!important;background:rgba(255,178,30,.16)}
.tv .it.foc:before{content:'';position:absolute;left:0;top:.6rem;bottom:.6rem;width:.28rem;background:var(--amber);border-radius:.2rem}
.it{position:relative}
.sw{width:3.4rem;height:1.9rem;border-radius:1rem;background:var(--line);position:relative;flex:none;margin-left:1rem}
.sw:after{content:'';position:absolute;left:.2rem;top:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mute);transition:left .12s}
.sw.on{background:rgba(255,178,30,.35)}
.sw.on:after{left:1.7rem;background:var(--amber)}
.fld{display:block;max-width:60rem;margin-bottom:1rem}
.fld span{display:block;color:var(--mute);font-size:.95rem;margin-bottom:.35rem}
.fld input{width:100%;height:3.6rem;border-radius:var(--r);border:.12rem solid var(--line);background:var(--bg2);padding:0 1.1rem;font-size:1.15rem;outline:none}
.tv .fld.foc input,.fld input:focus{border-color:var(--amber)}
.tv .fld.foc{box-shadow:none!important}
.seg{display:inline-flex;border-radius:var(--r);background:var(--bg2);padding:.3rem;margin-bottom:1.4rem}
.seg .btn{margin:0;height:3rem;background:transparent}
.seg .btn.on{background:var(--panel);color:var(--amber)}

/* ---------- Playlist hinzufuegen: QR-Signatur ---------- */
.pair{display:flex;align-items:center;flex:1;padding:2.6rem 4rem}
.pair .qr{width:25rem;height:25rem;flex:none;background:#fff;border-radius:1rem;padding:1.3rem;margin-right:4rem;box-shadow:0 0 0 .5rem rgba(255,178,30,.18),0 1.5rem 3.5rem rgba(0,0,0,.5)}
.pair .qr svg{width:100%;height:100%;display:block}
.pair .tx{flex:1;min-width:0}
.pair h2{font-family:var(--head);font-size:3.3rem;line-height:1.02;font-weight:700;max-width:40rem}
.pair .lead{color:var(--mute);font-size:1.25rem;margin-top:1rem;max-width:44rem}
.pair .url{margin-top:1.6rem;font-size:1.3rem;font-weight:700;color:var(--sky);word-break:break-all}
.idbox{display:flex;margin-top:2rem;align-items:flex-end}
.idbox>div{margin-right:3.4rem}
.idbox label{display:block;color:var(--mute);font-size:1rem;margin-bottom:.3rem}
.idbox .mac{font-family:var(--head);font-size:2.9rem;font-weight:700;letter-spacing:.06em}
.digits{display:flex}
.digits i{font-style:normal;width:3.3rem;height:4.3rem;margin-right:.45rem;border-radius:.45rem;background:var(--panel);border:.12rem solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:2.7rem;font-weight:700;color:var(--amber)}
.wait{display:flex;align-items:center;margin-top:2rem;color:var(--mute)}
.pulse{width:.8rem;height:.8rem;border-radius:50%;background:var(--sky);margin-right:.8rem;animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- Leerzustand / Hinweise ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:3rem 5rem}
.empty h2{font-family:var(--head);font-size:2.8rem;font-weight:700;max-width:50rem;line-height:1.05}
.empty p{color:var(--mute);font-size:1.2rem;margin:1rem 0 1.6rem;max-width:52rem}
.loading{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--mute)}
.spin{width:3.4rem;height:3.4rem;border-radius:50%;border:.3rem solid rgba(255,255,255,.12);border-top-color:var(--amber);animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loading .st{margin-top:1.2rem;font-size:1.1rem}

/* ---------- Ebene: Dialoge, PIN, Toasts ---------- */
#layer{position:fixed;left:0;top:0;right:0;bottom:0;z-index:20;pointer-events:none}
.dlg-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(4,10,22,.72);pointer-events:auto;display:flex;align-items:center;justify-content:center}
.dlg{background:var(--night);border:.1rem solid var(--line);border-radius:1rem;padding:2.2rem 2.6rem;min-width:36rem;max-width:64rem;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2rem 5rem rgba(0,0,0,.6)}
.dlg h3{font-family:var(--head);font-size:2.1rem;font-weight:700;margin-bottom:.8rem}
.dlg p{color:var(--mute);margin-bottom:1rem;white-space:pre-line}
.dlg .acts{margin-top:1rem}
.dlg .opts{overflow:hidden;margin:.4rem -.4rem 0;flex:1;min-height:0}
.dlg .it{margin:0 .4rem .4rem}
.dlg .it .chk{width:1.4rem;height:1.4rem;border-radius:50%;border:.15rem solid var(--dim);margin-right:1rem;flex:none}
.dlg .it.on .chk{border-color:var(--amber);background:radial-gradient(circle,var(--amber) 45%,transparent 50%)}
.pinpad{display:flex;flex-wrap:wrap;width:21rem;margin:1rem auto 0}
.pinpad .btn{width:6rem;height:4.2rem;margin:0 .5rem .6rem 0;font-size:1.6rem;font-family:var(--head)}
.pindots{display:flex;justify-content:center;margin:.6rem 0 .4rem}
.pindots i{width:1.1rem;height:1.1rem;border-radius:50%;border:.15rem solid var(--mute);margin:0 .5rem}
.pindots i.on{background:var(--amber);border-color:var(--amber)}
.toast{position:absolute;left:50%;bottom:4rem;transform:translateX(-50%);background:var(--night);border:.1rem solid var(--line);border-left:.35rem solid var(--amber);padding:1.1rem 1.8rem;border-radius:.6rem;font-size:1.15rem;box-shadow:0 1rem 3rem rgba(0,0,0,.5);max-width:70rem}
.toast.bad{border-left-color:var(--bad)}

/* ---------- OSD beim Abspielen ---------- */
#osd{position:fixed;left:0;top:0;right:0;bottom:0;z-index:10;pointer-events:none;display:none}
body.playing #osd{display:block}
#osd .shade{position:absolute;left:0;right:0;bottom:0;height:22rem;background:linear-gradient(0deg,rgba(4,10,22,.94),rgba(4,10,22,.6) 60%,transparent)}
#osd .shade.t{top:0;bottom:auto;height:10rem;background:linear-gradient(180deg,rgba(4,10,22,.8),transparent)}
#osd .pane{position:absolute;left:3.2rem;right:3.2rem;bottom:2.6rem;pointer-events:auto}
#osd .topl{position:absolute;left:3.2rem;right:3.2rem;top:2.2rem;display:flex;align-items:center;pointer-events:auto}
#osd .topl .sp{flex:1}
#osd .ttl{display:flex;align-items:center}
#osd .ttl .num{font-family:var(--head);font-size:3.4rem;font-weight:700;color:var(--amber);margin-right:1.4rem}
#osd .ttl .lg{width:7rem;height:4.2rem;border-radius:.4rem;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;margin-right:1.4rem;overflow:hidden}
#osd .ttl .lg img{max-width:90%;max-height:90%;object-fit:contain}
#osd .ttl .nm{font-family:var(--head);font-size:2.6rem;font-weight:700;line-height:1.05}
#osd .ttl .sub{color:var(--mute);font-size:1.1rem}
.live{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:.85rem;padding:.15rem .55rem;border-radius:.3rem;margin-right:.8rem;vertical-align:middle}
#osd .now{display:flex;align-items:flex-end;margin-top:1.1rem}
#osd .now .col2{flex:1;min-width:0;margin-right:2rem}
#osd .now .t1{font-size:1.4rem;font-weight:700}
#osd .now .t2{color:var(--mute);margin-top:.3rem}
#osd .tl{display:flex;align-items:center;margin-top:1rem}
#osd .tl .tm{font-family:var(--head);font-size:1.4rem;font-weight:600;width:7rem}
#osd .tl .tm.r{text-align:right}
#osd .tl .trk{flex:1;height:.45rem;border-radius:.3rem;background:rgba(255,255,255,.18);position:relative;margin:0 1rem;cursor:pointer}
#osd .tl .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:.3rem;background:var(--amber)}
#osd .tl .trk b{position:absolute;top:50%;width:1.2rem;height:1.2rem;margin:-.6rem 0 0 -.6rem;border-radius:50%;background:#fff}
#osd .ctl{display:flex;align-items:center;margin-top:1.2rem}
#osd .ctl .btn{height:3.2rem;margin:0 .8rem 0 0;background:rgba(21,48,90,.8)}
#osd .ctl .sp{flex:1}
#osd .zap{position:absolute;right:3.2rem;top:2.2rem;font-family:var(--head);font-size:5rem;font-weight:700;color:var(--amber);background:rgba(4,10,22,.8);border-radius:.8rem;padding:.4rem 1.6rem;display:none}
#osd .buf{position:absolute;left:50%;top:50%;margin:-1.7rem 0 0 -1.7rem;display:none}
#osd.buffering .buf{display:block}
#osd .err{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,24,48,.92);border:.1rem solid var(--line);border-left:.35rem solid var(--bad);padding:1.8rem 2.2rem;border-radius:.8rem;max-width:56rem;pointer-events:auto;display:none}
#osd.error .err{display:block}
#osd .err b{display:block;font-size:1.4rem;margin-bottom:.4rem}
#osd .err span{color:var(--mute)}
#osd.hidectl .shade,#osd.hidectl .pane,#osd.hidectl .topl{display:none}
/* Senderliste waehrend der Wiedergabe */
#osd .chl{position:absolute;left:0;top:0;bottom:0;width:46rem;background:rgba(10,24,48,.95);border-right:.1rem solid var(--line);display:none;flex-direction:column;pointer-events:auto}
#osd.list .chl{display:flex}
#osd.list .shade,#osd.list .pane,#osd.list .topl{display:none}
#osd .chl .hd{height:5rem;display:flex;align-items:center;padding:0 1.6rem;font-family:var(--head);font-size:1.7rem;font-weight:700}

/* ---------- Startbildschirm/Hinweis "Nur ein Player" ---------- */
.welcome{flex:1;display:flex;align-items:center;padding:3rem 7rem;background:radial-gradient(ellipse at 20% 10%,rgba(139,92,246,.18),transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(255,112,7,.12),transparent 55%)}
.welcome .mark{display:flex;align-items:center;margin-bottom:2.2rem}
.welcome .mark img{width:5.6rem;height:5.6rem;border-radius:1.2rem;margin-right:1.6rem}
.welcome .mark b{font-family:var(--head);font-size:4.2rem;font-weight:700;letter-spacing:.02em}
.welcome .mark b span{color:var(--orange)}
.welcome h1{font-family:var(--head);font-size:4rem;font-weight:700;line-height:1.02;max-width:62rem}
.welcome .txt{margin-top:1.4rem;font-size:1.25rem;color:#D0DAEA;max-width:66rem;line-height:1.5}
.welcome .txt p{margin-bottom:.8rem}
.welcome .small{color:var(--mute);font-size:1rem;margin-top:.6rem;max-width:66rem}

/* ---------- Handy / Touch ---------- */
html.m body{font-size:15px}
.m #app{flex-direction:column}
.m #rail{order:2;width:auto!important;height:62px;flex-direction:row;padding:0;border-right:0;border-top:1px solid var(--line);box-shadow:none!important;justify-content:space-around}
.m #rail .logo,.m .ri.sp2{display:none}
.m .ri{flex:1;flex-direction:column;justify-content:center;height:62px;margin:0;padding:0;border-radius:0}
.m .ri svg.i{width:22px;height:22px}
.m .ri span{opacity:1;margin:3px 0 0;font-size:12px}
.m .ri.on:before{left:30%;right:30%;top:0;bottom:auto;width:auto;height:3px}
.m .ri.sp{margin-top:0}
.m #top{height:54px;padding:0 14px}
.m #top .t{font-size:24px}
.m #top .pl{display:none}
.m #clock{font-size:20px}
.m #top .badge{margin-right:10px;font-size:12px}
.m #main{flex-direction:column}
.m .c-cat{width:auto;height:52px;border-right:0;border-bottom:1px solid var(--line)}
.m .c-cat .hd{display:none}
.m .c-cat .vl{overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.m .c-cat .vl-in{height:52px!important;width:auto;display:inline-block}
.m .c-cat .row{position:relative;display:inline-flex;top:auto!important;left:auto;right:auto;height:36px!important;margin:8px 0 0 8px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.06);width:auto!important}
.m .c-cat .row .cnt{display:none}
.m .c-cat .row.sel{background:var(--amber);color:#1A1405}
.m .c-cat .row.sel .n{color:#1A1405}
.m .c-list{width:auto;flex:1;border-right:0}
.m .c-list .hd{height:40px;font-size:18px}
.m .c-info{display:none}
.m .row .num{width:40px;font-size:18px}
.m .row .lg{width:56px;height:34px}
.m .grid{padding-bottom:20px}
.m .detail .in{flex-direction:column;padding:16px;overflow-y:auto}
.m .detail .pst{width:120px;height:180px;margin:0 0 14px}
.m .detail h1{font-size:30px}
.m .detail .plot{max-height:none}
.m .pair{flex-direction:column;align-items:flex-start;padding:18px;overflow-y:auto}
.m .pair .qr{width:220px;height:220px;margin:0 0 18px}
.m .pair h2{font-size:30px}
.m .idbox{flex-wrap:wrap}
.m .idbox .mac{font-size:26px}
.m .digits i{width:34px;height:44px;font-size:28px}
.m .page{padding:16px 14px 30px}
.m .welcome{padding:24px;overflow-y:auto;align-items:flex-start}
.m .welcome h1{font-size:34px}
.m .welcome .mark b{font-size:36px}
.m .dlg{min-width:0;width:92vw;padding:20px}
.m #osd .chl{width:86vw}
.m #osd .pane{left:14px;right:14px;bottom:14px}
.m #osd .topl{left:14px;right:14px;top:12px}
.m #osd .ttl .nm{font-size:22px}
.m #osd .ttl .num{font-size:26px}
.m #osd .ctl{flex-wrap:wrap}
.m #osd .ctl .btn{margin-bottom:8px;height:40px}
.m .btn{height:44px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Ergaenzungen */
.lv{display:flex;flex:1;min-width:0;min-height:0}
.m .lv{flex-direction:column}
.c-grid{flex:1;min-width:0;border-right:0}
.m .c-grid .hd{display:none}
.dlg.wide{min-width:62rem}
.m .dlg.wide{min-width:0}
.m .dlg .opts{overflow-y:auto}
.empty p{white-space:pre-line}
.seasons{flex-wrap:wrap}
.detail .plot.short{max-height:4.8rem}
.detail .tx{min-height:0}
.eps{display:flex;flex-direction:column}
.eps .vl{flex:1}