:root{
  --bg:#0f1115; --bg2:#151922; --bg3:#1c2130; --line:#262c3a;
  --fg:#e7ebf3; --dim:#8b95a9; --acc:#4b8bff; --acc2:#2a5fce;
  --ok:#48c78e; --warn:#f0a24a; --bad:#e4574c;
}
*{box-sizing:border-box}
/* Muss vor allen display-Regeln stehen: sonst überschreibt CSS das hidden-Attribut. */
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--fg);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
  /* Drei Zeilen: Kopf, Chips, Inhalt. Mit nur "auto 1fr" landeten die Chips in
     der 1fr-Zeile und wuchsen auf kurzen Listen (Favoriten) auf mehrere hundert
     Pixel, waehrend #content zusammengedrueckt wurde. */
  display:grid;grid-template-rows:auto auto 1fr;overflow:hidden;
}
/* Feste Zeilen, damit ein ausgeblendetes Element (#chips im EPG-Tab) die
   Zuordnung nicht verschiebt und #content nicht in die auto-Zeile rutscht. */
body > header{grid-row:1}
body > #chips{grid-row:2}
body > main{grid-row:3;grid-column:1}
a{color:var(--acc)}
button,input,select{font:inherit;color:inherit}
button{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
button:hover{background:#242b3c}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--acc2);border-color:#3d78e0}
button.primary:hover{background:var(--acc)}
input,select{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-width:0}
input:focus,select:focus{outline:2px solid var(--acc2);outline-offset:-1px}

header{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--bg2);flex-wrap:wrap;min-width:0}
header h1{font-size:15px;margin:0;font-weight:650;white-space:nowrap}
.grow{flex:1;min-width:160px}
.tabs{display:flex;gap:6px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:13px}
.tab.on{background:var(--acc2);border-color:#3d78e0;color:#fff}
.stat{color:var(--dim);font-size:12px;white-space:nowrap}
.user{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim)}

main{display:grid;grid-template-columns:240px minmax(0,1fr);overflow:hidden}
/* Ohne Kategorien (Weiter, EPG) muss die Spalte weg. Sonst rutscht #content in
   die 240-px-Spalte, weil display:none das Element aus dem Grid nimmt. */
main.nocats{grid-template-columns:minmax(0,1fr)}
@media(max-width:860px){main{grid-template-columns:minmax(0,1fr)}#cats{display:none}}

/* Auf dem Handy hat die Kopfzeile zu wenig Platz: Unwichtiges weg.
   Die Tab-Leiste bekommt eine eigene Zeile und scrollt waagerecht, statt die
   ganze Seite 32 px breiter zu machen (das war der Grund fuer den waagerechten
   Bildlauf am Handy). */
@media(max-width:640px){
  /* Zwei Zeilen: Titel, Suche, Ansicht, Stream-Zaehler und Konto; darunter die
     Tabs ueber die volle Breite. Die Sortierung wandert per JS in die
     Filterzeile — in der Kopfzeile waere sie 40 px zu viel. */
  header{gap:6px 8px;padding:8px 10px}
  header h1{font-size:14px;order:1}
  /* Kleine Basis: mit 90 px passt die Zeile bei 320 px nicht mehr und die
     Konto-Knoepfe rutschen in eine eigene Zeile. Der Rest geht an die Suche. */
  .grow{order:2;flex:1 1 40px;min-width:0}
  /* Das Suchfeld bringt sonst seine Zeichenbreite (20 Zeichen) als
     Mindestbreite mit und draengt die Konto-Knoepfe in eine zweite Zeile. */
  .grow input{min-width:0;width:100%}
  /* Stream-Zaehler in die erste Zeile: dort ist Platz, wenn der VLC-Knopf
     wegfaellt (er sitzt im Player-Menue und im Starttor). */
  #active{order:3;flex:0 0 auto}
  #viewBtn{order:4;padding:6px 10px}
  .user{order:5;gap:6px;margin-left:auto}
  .user #who{display:none}
  #vlcBtn{display:none}
  .user button,.user a{padding:6px 9px;font-size:12px}
  .tabs{order:6;flex:0 0 100%;padding-bottom:2px}
  #chips #sort{max-width:110px;padding:4px 6px;font-size:12px}
  #quality,#stat{display:none}
  .tab{padding:5px 10px;font-size:12px;flex:0 0 auto}
  /* Stern als Tippziel: 26x22 ist zu klein fuer den Daumen. */
  #grid .card .star{width:34px;height:34px;font-size:16px;border-radius:10px}
  #grid.list .card .star{right:6px}
  #more{padding:11px 14px;font-size:13px}
}

#cats{overflow-y:auto;border-right:1px solid var(--line);background:var(--bg2);padding:0 0 8px}
#catsearch{position:sticky;top:0;z-index:2;background:var(--bg2);padding:8px 10px;
  border-bottom:1px solid var(--line)}
#catsearch input{width:100%;font-size:12px;padding:6px 9px}
.cat{padding:7px 14px;cursor:pointer;font-size:13px;color:var(--dim);
  display:flex;justify-content:space-between;gap:8px;border-left:3px solid transparent}
.cat:hover{background:#1a1f2b;color:var(--fg)}
.cat.on{background:#1d2434;color:#fff;border-left-color:var(--acc)}
.cat span{opacity:.55;font-size:11px}
.cat .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#content{overflow-y:auto;padding:14px 16px 90px}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
  margin:4px 0 10px;font-weight:600}
#cont{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
#cont .cwrap{flex:0 0 220px}

/* Filter-Chips unter der Kopfzeile */
#chips{display:flex;flex-wrap:wrap;gap:6px;padding:7px 14px;background:var(--bg2);
  border-bottom:1px solid var(--line)}
.chipset{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-size:12px;cursor:pointer;line-height:1.6}
.chip:hover{background:#242b3c;color:var(--fg)}
.chip.on{background:var(--acc2);border-color:#3d78e0;color:#fff}
.chip i{font-style:normal;opacity:.6;font-size:11px}

/* Zeilen fuer Weiterschauen und EPG. Sie tragen bewusst NICHT .card: sonst
   greifen die Regeln fuer Liste (60-px-Logospalte) und kompakt (29-px-Block),
   der Titel bricht wieder auf "DE - ..." und der Schliessen-Knopf rutscht in
   die zweite Zeile. */
#grid.rows .crow{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:12px;min-height:64px;padding:10px 12px 14px;
  position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
#grid.rows .epgrow.nologo{grid-template-columns:minmax(0,1fr)}
#grid.rows .epgrow{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:12px;min-height:56px;padding:10px 12px 14px;
  position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
#grid.rows .crow,#grid.rows .epgrow{cursor:pointer}
#grid.rows .crow:hover,#grid.rows .epgrow:hover{background:#1a1f2b;border-color:#39435a}
#grid.rows .crow .logo,#grid.rows .epgrow .logo{display:grid;place-items:center;width:56px;min-height:0}
#grid.rows .crow .logo img,#grid.rows .epgrow .logo img{max-height:40px;max-width:52px;
  border-radius:6px;object-fit:contain}
#grid.rows .crow .meta,#grid.rows .epgrow .meta{min-width:0}
#grid.rows .crow .nm,#grid.rows .epgrow .nm{font-size:14px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;word-break:break-word}
#grid.rows .crow .sub,#grid.rows .epgrow .sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12px;color:var(--dim);margin-top:3px;white-space:normal}
#grid.rows .crow .sub span,#grid.rows .epgrow .sub span{overflow:hidden;text-overflow:ellipsis;
  min-width:0;max-width:100%}
#grid.rows .crow .bar,#grid.rows .epgrow .bar{height:3px}
.rm{position:static;align-self:center;flex:0 0 auto;width:34px;height:34px;padding:0;
  font-size:14px;line-height:1;background:transparent;border-color:transparent;color:var(--dim)}
.rm:hover{background:#31242a;border-color:#5a2b28;color:var(--bad)}
.tags{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  cursor:pointer;transition:transform .12s,border-color .12s;position:relative}
.card:hover{transform:translateY(-2px);border-color:#39435a}
.card .logo{height:76px;display:grid;place-items:center;background:#11151e;padding:9px}
.card .logo img{max-height:100%;max-width:100%;object-fit:contain}
.card .ph{color:#404a63;font-size:20px;font-weight:700;letter-spacing:1px}
.card .meta{padding:9px 10px}
.card .nm{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.card .sub{color:var(--dim);font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center}
.badge{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.badge.live{color:#ff7b72;border-color:#5a2b28}
.badge.movie{color:#b58cff;border-color:#3d3159}
.badge.series{color:#5fd0a8;border-color:#28513f}
.bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff18}
.bar i{display:block;height:100%;background:var(--acc)}

#more{display:block;margin:18px auto 0}
.empty{color:var(--dim);text-align:center;padding:50px 20px}

#ov{position:fixed;inset:0;background:#05070b;display:none;z-index:50;
  grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
#ov.on{display:grid}
/* minmax(0,1fr) oben ist der eigentliche Fix: ohne das bestimmt das breiteste
   Kind die Spalte, die Kopfzeile wird breiter als der Bildschirm und rechts
   verschwinden Schliessen und VLC. */
#ovhead{display:flex;gap:12px;align-items:center;padding:10px 14px;background:#0a0d13;min-width:0}
#ovhead > button{flex:0 0 auto}
#ovhead .t{flex:1 1 auto;min-width:0;overflow:hidden}
#ovhead b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ovhead small{color:var(--dim)}
/* Drei-Punkte-Menue: auf schmalen Bildschirmen wandern VLC, Download, Teilen
   und Diagnose hierher, damit Stern und Schliessen immer sichtbar bleiben. */
#ovMore{display:none;font-size:18px;line-height:1;padding:2px 8px}
#ovmenu{position:absolute;right:10px;top:56px;z-index:60;background:#121826;
  border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;
  flex-direction:column;gap:2px;min-width:190px;box-shadow:0 12px 30px #000a}
#ovmenu[hidden]{display:none}
#ovmenu button{text-align:left;background:transparent;border:0;padding:10px 12px;
  border-radius:7px;font-size:14px;color:var(--fg)}
#ovmenu button:hover,#ovmenu button:focus-visible{background:#1b2231}

#ovstage{display:grid;place-items:center;background:#000;position:relative;overflow:hidden}
video{width:100%;height:100%;object-fit:contain;background:#000}
#msg{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;
  background:#000a;color:#ffd8d4;white-space:pre-wrap;font-size:13px}
#msg.on{display:grid}
#ovfoot{padding:8px 14px;background:#0a0d13;border-top:1px solid #161b26;color:var(--dim);font-size:12px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Beim Umpacken stimmen die eingebauten Browser-Kontrollen nicht (sie zeigen die
   Laenge des gerade gelieferten Stuecks). Dann uebernimmt diese Leiste. */
#ovfoot .ctrl{flex:0 0 auto;background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;font-size:14px;line-height:1;color:var(--fg);cursor:pointer}
#ovfoot .ctrl:hover{background:#1b2231}
#ov.ownctrl #ovfoot{padding:10px 14px;gap:10px;font-size:13px}
#ov.ownctrl #timeInfo{font-variant-numeric:tabular-nums;min-width:96px}

/* Vollbild: die Buehne nimmt alles, Kopf- und Fussleiste liegen als Overlay
   darueber. Sonst verschwinden Schliessen, Pause und Spulen im Vollbild, weil
   nur #ovstage im Vollbild war. */
#ov.fs{grid-template-rows:1fr}
#ov.fs #ovstage{grid-row:1/-1}
#ov.fs #ovhead,#ov.fs #ovfoot{position:absolute;left:0;right:0;z-index:20;
  transition:opacity .22s ease;padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right))}
#ov.fs #ovhead{top:0;padding-top:max(10px,env(safe-area-inset-top));
  background:linear-gradient(#000000dd,#0000);flex-wrap:nowrap}
#ov.fs #ovfoot{bottom:0;padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(#0000,#000000dd);flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none}
#ov.fs #ovfoot::-webkit-scrollbar{display:none}
#ov.fs #ovfoot > *{flex:0 0 auto}
#ov.fs #prog{flex:1 1 auto;min-width:140px}
#ov.fs.hidebars #ovhead,#ov.fs.hidebars #ovfoot{opacity:0;pointer-events:none}
/* Im Vollbild darf die Zeit nicht schrumpfen, sonst bleibt vom Slider nichts. */
#ov.fs #timeInfo{white-space:nowrap}
/* Schmal (Handy hochkant): der Slider bekommt eine eigene Zeile, statt dass
   die Leiste seitlich scrollt und der Slider aus dem Bild rutscht. */
@media(max-width:430px){
  #ov.fs #ovfoot{flex-wrap:wrap;overflow-x:visible;row-gap:4px}
  #ov.fs #prog{order:9;flex:1 1 100%;min-width:0}
  #ov.fs #epgNow{order:10;flex:1 1 100%;white-space:normal}
}
#prog{flex:1;min-width:120px}
#prog input{width:100%}

.split{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{font-size:11px;padding:2px 7px;border-radius:999px;background:#1b2231;color:var(--dim)}

/* Ultrakompakte Liste: 29 px pro Zeile, ohne Logo */
#grid.dense{grid-template-columns:1fr;gap:1px}
#grid.dense .card{display:block;height:29px;border:0;border-radius:6px;
  background:transparent;padding:0 26px 0 6px;overflow:hidden}
#grid.dense .card:hover{background:#1a1f2b;transform:none}
#grid.dense .card .logo{display:none}
#grid.dense .card .meta{display:flex;align-items:center;gap:7px;padding:0;height:29px;min-width:0}
#grid.dense .card .nm{flex:1 1 auto;min-width:0;font-size:12px;font-weight:500;line-height:29px;
  min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:1}
#grid.dense .card .sub{margin:0;font-size:10px;flex:0 0 auto;gap:5px}
#grid.dense .badge{font-size:9px;padding:0 4px;line-height:14px}
#grid.dense .card .star{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;padding:2px 4px;font-size:12px;opacity:.35;line-height:1}
#grid.dense .card:hover .star{opacity:.9}
#grid.dense .card .bar{display:none}

/* Folgen einer Serie: Spalten statt eines 900-px-Deckels. Die Zeile bleibt
   lesbar (Nummer, Titel, Laenge), fuellt aber die Breite. */
.epsgrid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  align-items:start}
.epsgrid > button{min-width:0}
.epsgrid > button > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.epsgrid{grid-template-columns:1fr}}

/* Listenansicht: eine Zeile pro Eintrag */
#grid.list{grid-template-columns:1fr;gap:5px}
#grid.list .card{display:grid;grid-template-columns:60px minmax(0,1fr) auto;
  align-items:center;border-radius:8px;padding-right:8px}
#grid.list .card:hover{transform:none;background:#1a1f2b}
#grid.list .card .logo{height:52px;min-height:52px;padding:5px;background:transparent}
#grid.list .card .logo img{max-height:44px}
#grid.list .card .meta{padding:6px 10px;min-width:0}
#grid.list .card .nm{-webkit-line-clamp:1;min-height:0;font-size:13px}
#grid.list .card .sub{margin-top:2px}
#grid.list .card .logowrap{position:static;width:50px;height:44px;display:grid;place-items:center}
#grid.list .card{padding-right:42px}
#grid.list .card .star{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  margin:0;padding:4px 8px;font-size:14px}
#grid.list .card .bar{position:relative;grid-column:1/-1;height:2px;border-radius:0}

.card .logowrap{position:relative}
.star{position:absolute;top:4px;right:4px;background:#0008;border:1px solid #2b3344;border-radius:8px;
  display:grid;place-items:center;
  padding:2px 6px;font-size:13px;line-height:1.2;color:#c9d3e6;cursor:pointer;opacity:.75}
.star:hover{opacity:1}
.star.on{color:#ffd166;border-color:#5a4a22;background:#2a2313;opacity:1}

#bigplay{position:absolute;inset:0;display:grid;place-items:center;background:#000a;z-index:5}
#bigplay button{font-size:20px;padding:16px 26px;border-radius:999px;background:var(--acc2);border-color:#3d78e0}
/* Starttor fuer Handy und Tablet: nichts laeuft, bis der Knopf gedrueckt wird. */
#gate{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0%,#131a26 0%,#05070b 70%)}
#gate[hidden]{display:none}
#gate .gate-logo{max-height:120px;max-width:70%;object-fit:contain;border-radius:8px}
#gate .gate-title{font-size:18px;font-weight:600;max-width:36ch;line-height:1.35}
#gate .gate-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(320px,86vw)}
#gate .gate-play,#gate .gate-vlc{font-size:17px;padding:14px 24px;border-radius:999px;font-weight:600}
#gate .gate-play{background:var(--acc2);border-color:#3d78e0}
#gate .gate-vlc{background:#151b26;border-color:#2b3546}
#gate button:disabled{opacity:.55}
#gate .gate-hint{color:var(--dim);font-size:12px;margin:0;max-width:38ch;line-height:1.45}
#diagbox{position:absolute;inset:0;margin:0;padding:14px;overflow:auto;background:#05070bf2;
  color:#9fb0c8;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;z-index:6}

/* Login / Setup */
.center{display:grid;place-items:center;height:100%}
.box{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:24px;width:min(420px,92vw)}
.box h1{margin:0 0 4px;font-size:18px}
.box p{color:var(--dim);font-size:13px;margin:0 0 16px}
.box label{display:block;font-size:12px;color:var(--dim);margin:12px 0 4px}
.box input{width:100%}
.box .btn{margin-top:18px;width:100%;padding:10px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:500;font-size:12px}
#vlcbox,#sharebox{position:fixed;inset:auto 0 0 0;margin:auto;max-width:560px;z-index:60;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  max-height:80vh;overflow:auto;box-shadow:0 18px 60px rgba(0,0,0,.55)}
#vlcbox h2,#sharebox h2{font-size:15px;margin:0 0 6px}
#vlcbox p,#sharebox p{font-size:12px;color:var(--dim);margin:0 0 12px;line-height:1.5}
#vlcbox label,#sharebox label{display:block;font-size:11px;color:var(--dim);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.04em}
#vlcbox .copyrow,#sharebox .copyrow{display:flex;gap:8px}
#vlcbox .copyrow input,#sharebox .copyrow input{flex:1;font-size:12px;font-family:ui-monospace,monospace}
#vlcbox .copyrow button,#sharebox .copyrow button{white-space:nowrap}
#sharebox select{flex:1}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.acts button{padding:3px 8px;font-size:12px}
code{background:#1b2231;padding:1px 5px;border-radius:4px}

/* Handy: Filter-Chips als eine waagerecht wischbare Zeile.
   Muss nach den Basisregeln stehen, sonst gewinnen die und es werden vier Reihen. */
@media(max-width:640px){
  /* Block mit inline-flex drinnen: als reiner Flex-Scroller kollabiert die
     Hoehe der Chips auf ein paar Pixel. */
  /* display:block + inline-flex-Kinder kollabiert die Hoehe auf 13 px (die
     Zeilenbox zaehlt die inline-flex-Kinder nicht mit). Flex mit fester
     Mindesthoehe ist hier das, was tatsaechlich traegt. */
  #chips{display:flex;flex-wrap:nowrap;align-items:center;min-height:40px;
    overflow-x:auto;overflow-y:hidden;padding:6px 10px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  #chips::-webkit-scrollbar{display:none}
  #chips .chipset{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center}
  #chips .chipset + .chipset{margin-left:8px}
  #chips .chip{white-space:nowrap}
  /* Muss nach der Basisregel stehen: gleiche Spezifitaet (#grid), sonst
     gewinnt minmax(180px) und es bleibt bei einer Spalte auf dem Handy. */
  #grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* Muss hinter #grid.list und #grid.dense stehen: gleiche Spezifitaet, sonst
   gewinnt dort die Spaltenzahl bzw. gap der Ansicht. */
#grid.rows{grid-template-columns:minmax(0,1fr);gap:6px}

/* Handy: Kopfzeile des Players. Nur Stern, Menue und Schliessen bleiben. */
@media(max-width:640px){
  #ovhead{gap:8px;padding:8px 10px}
  #ovhead b{font-size:15px}
  #ovhead small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #ovhead #dlBtn,#ovhead #shareBtn,#ovhead #vlcPlayBtn,#ovhead #diagBtn{display:none}
  #ovMore{display:inline-block}
}

/* ---------------------------------------------------------- Gesehen */
.seenmark{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;background:#1b6b3a;color:#fff;font-size:13px;line-height:1;
  box-shadow:0 1px 4px #0006;pointer-events:none}
.btnmark{width:34px;height:34px;font-size:14px;border-radius:8px;background:transparent;border-color:#2b3344}
.btnmark.on{background:#1b6b3a;border-color:#2a8f52;color:#fff}
.card.watched .nm{color:#b9c4d6}

/* Folgen: Zeile plus Haken. Haken als eigene Schaltflaeche, weil ein Knopf im
   Knopf kein gueltiges HTML ist. */
.epline{display:flex;gap:6px;align-items:stretch}
.epsgrid .eprow{flex:1 1 auto;min-width:0;text-align:left;display:flex;gap:10px;
  align-items:center;padding:10px 12px;position:relative}
.eprow .epnum{width:40px;color:var(--dim);flex:0 0 auto}
.eprow .eptitle{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eprow .epmin{color:var(--dim);flex:0 0 auto}
.epmark{flex:0 0 auto;width:38px;padding:0;font-size:15px;line-height:1;
  background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--dim)}
.epmark.on{background:#1b6b3a;border-color:#2a8f52;color:#fff}
.sechead{display:flex;gap:10px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:16px 0 6px}
.sechead .sec{margin:0}
.sechead .sec .dim{color:var(--dim);font-size:12px;font-weight:400;margin-left:8px}
.secmark{font-size:12px;padding:6px 10px}
.secmark.on{border-color:#2a8f52;color:#7fd39b;background:#14251b}

/* ------------------------------------------------- Wer schaut gerade */
#active{display:none}
#active:not([hidden]){display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:999px;font-size:12px}
#active .dot{width:8px;height:8px;border-radius:50%;background:#3fbf6a;
  animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 #3fbf6a66}
  70%{box-shadow:0 0 0 7px #3fbf6a00}
  100%{box-shadow:0 0 0 0 #3fbf6a00}
}
#activeBox{position:fixed;top:58px;right:12px;z-index:70;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:240px;
  max-width:min(340px,90vw);box-shadow:0 10px 30px #0008}
#activeBox .arow + .arow{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
#activeBox b{display:block;font-size:13px;margin-bottom:2px}
#activeBox .dim{color:var(--dim);font-size:11px}
#activeBox ul{margin:6px 0 0;padding:0;list-style:none}
#activeBox li{font-size:12px;display:flex;justify-content:space-between;gap:10px}

/* ------------------------------------------------------- Sortierung */
#sort{background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font-size:12px;color:var(--fg);flex:0 0 auto}
#chips #sort{margin-right:8px}
mark{background:#3d78e0;color:#fff;border-radius:3px;padding:0 2px}
#pipBtn.on{background:#23406e;border-color:#3d78e0}

@media(max-width:640px){
  #activeBox{top:auto;bottom:12px;left:12px;right:12px;max-width:none}
}

/* Sehr schmale Geraete (320-380 px): Knoepfe enger, sonst wandern Konto und
   Tabs in eine dritte Zeile. */
@media(max-width:380px){
  header{gap:5px 6px;padding:7px 8px}
  .user{gap:4px}
  .user button,.user a{padding:5px 7px;font-size:11px}
  #active{padding:5px 8px}
  #viewBtn{padding:5px 8px}
  .grow{flex:1 1 20px}
}