/* Adult TV. Dunkle, ruhige TV-Oberfläche auf fester 1920×1080-Bühne:
   schmale Leiste links, Hero mit Bild der fokussierten Kachel, Raster darunter.
   Keine Akzentfarbe; Fokus = helle Fläche bzw. heller Innenrahmen, nie outline. */

:root{
  --ground:#0a0a0c;
  --ink:#f5f2ec;
  --mute:rgba(245,242,236,.68);
  --faint:rgba(245,242,236,.44);
  --line:rgba(245,242,236,.14);
  --plate:rgba(255,255,255,.07);
  --plate-hi:rgba(255,255,255,.13);
  --solid:#f5f2ec;
  --solid-ink:#0c0d0f;
  --warn:#e8b36a;
  --green:#4cc36b;
  --yellow:#e9c74f;
  --live:#ef4444;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:220ms;
  --x:168px; /* linke Inhaltskante rechts der eingeklappten Leiste */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:Manrope,Arial,sans-serif;color:var(--ink);font-size:24px;line-height:1.25;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;cursor:default}
button,input{font:inherit;color:inherit;background:none;border:0;outline:none}
.hidden{display:none!important}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.fill{fill:currentColor;stroke:none}

/* ---------- Bühne ---------- */
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;transform-origin:0 0;background:var(--ground)}
.scene,.browse,.search{position:absolute;left:0;top:0;width:1920px;height:1080px}

/* ---------- Hintergrund: Kachelbild rechts oben, weich ausgeblendet ---------- */
.backdrop{position:absolute;left:0;top:0;width:1920px;height:1080px;background:radial-gradient(1100px 640px at 80% 0,rgba(130,104,80,.14),rgba(10,10,12,0) 70%),var(--ground)}
.art{position:absolute;right:0;top:0;width:1280px;height:720px;background-size:cover;background-position:50% 35%;opacity:0;transition:opacity 600ms var(--ease)}
.art.is-on{opacity:.6}
.art-fade{position:absolute;right:0;top:0;width:1282px;height:722px;background:linear-gradient(90deg,var(--ground) 0,rgba(10,10,12,.84) 18%,rgba(10,10,12,.28) 55%,rgba(10,10,12,.18) 100%),linear-gradient(0deg,var(--ground) 0,rgba(10,10,12,.72) 24%,rgba(10,10,12,0) 58%)}

/* ---------- Hero: Feed, Titel und Daten der fokussierten Kachel ---------- */
.hero{position:absolute;left:var(--x);top:92px;width:1080px}
.eyebrow{font-size:19px;line-height:24px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-title{margin-top:18px;height:128px;font-size:54px;line-height:64px;font-weight:600;letter-spacing:-1.4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-meta{margin-top:20px;height:38px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;margin-right:12px;border-radius:10px;background:var(--plate-hi);font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pill svg{width:18px;height:18px;margin-right:8px}
.hint{display:inline-flex;align-items:center;margin-left:22px;font-size:19px;font-weight:500;color:var(--faint)}
.hint b{margin-right:8px;font-weight:700;color:var(--mute)}
.dot-green,.dot-yellow{display:inline-block;width:14px;height:14px;margin-right:8px;border-radius:7px;background:var(--green)}
.dot-yellow{background:var(--yellow)}
/* Urheber (Kanal/Profil): klickbar, gelbe Taste springt hin */
.pill-author{max-width:360px;background:none;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.pill-author span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Laden: Platzhalter-Balken statt leerer Fläche */
.hero.is-loading .hero-title{width:640px;height:54px;margin-top:22px;border-radius:12px}
.hero.is-loading .hero-title,.card.skel{background:linear-gradient(100deg,#141518 30%,#1e1f23 50%,#141518 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- Raster: 4 Spalten, läuft zeilenweise per transform mit ----------
   Der Viewport ist 28px größer als das Raster: Fokus-Zoom und Schatten
   haben Luft, die Vorreihe verschwindet genau an der Oberkante. */
.grid-port{position:absolute;left:140px;top:396px;width:1712px;height:684px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 100%)}
.grid{position:absolute;left:28px;top:28px;width:1656px;display:grid;grid-template-columns:repeat(4,393px);grid-auto-rows:221px;grid-gap:28px;transition:transform 380ms var(--ease);will-change:transform}

.card{position:relative;border-radius:14px;overflow:hidden;background:#16171a;cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.card::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none;transition:box-shadow var(--t) linear}
.card.is-focus{z-index:2;transform:scale(1.07);box-shadow:0 22px 48px rgba(0,0,0,.6)}
.card.is-focus::after{box-shadow:inset 0 0 0 3px rgba(255,255,255,.95)}
.card img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.72) saturate(.9);transition:opacity 260ms linear,filter var(--t) linear}
.card.opaque img{opacity:1}
.card.is-focus img{filter:none}
.card-dur{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:8px;background:rgba(8,9,11,.74);font-size:17px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
/* Livestream: roter Punkt, Augen-Symbol + Zuschauerzahl */
.card-dur.is-live{display:flex;align-items:center}
.card-dur.is-live svg{width:17px;height:17px;margin-right:5px;opacity:.8}
.dot-live{display:inline-block;flex:0 0 auto;width:10px;height:10px;margin-right:8px;border-radius:5px;background:var(--live);box-shadow:0 0 0 3px rgba(239,68,68,.25)}
.pill-live{background:rgba(239,68,68,.16)}
.card-fav{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:18px;background:rgba(8,9,11,.66);display:flex;align-items:center;justify-content:center}
.card-fav svg{width:19px;height:19px}
.card:not(.is-fav) .card-fav{display:none}
/* Kanal-Logos: contain mit Luft + Name darunter (cover würde sie beschneiden) */
.card.is-logo{background:#1c1d21}
.card.is-logo img{left:40px;right:40px;top:18px;bottom:58px;width:auto;height:auto;object-fit:contain;filter:none}
.card-cap{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;justify-content:center;padding:0 24px;font-size:20px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.is-focus .card-cap{color:var(--ink)}
/* Ohne Bild (Tags, defekte Thumbnails): Namenskarte */
.card.is-text{background:linear-gradient(150deg,#25262b,#131417)}
.card-text{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 32px;font-size:27px;font-weight:600;letter-spacing:-.4px;line-height:1.2;color:var(--mute)}
.card-text span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card-text i{font-style:normal;color:var(--faint);margin-right:4px}
.card.is-focus .card-text{color:var(--ink)}

.empty{position:absolute;left:var(--x);top:470px;width:1000px}
.empty-title{font-size:40px;line-height:50px;font-weight:600;letter-spacing:-.8px}
.empty-text{margin-top:12px;font-size:24px;line-height:34px;color:var(--mute)}

.status{position:absolute;left:1010px;bottom:40px;transform:translateX(-50%);display:flex;align-items:center;height:52px;padding:0 24px;border-radius:26px;background:rgba(22,23,26,.92);box-shadow:0 12px 32px rgba(0,0,0,.5);font-size:20px;font-weight:600;color:var(--mute)}
.spinner{display:inline-block;width:22px;height:22px;margin-right:12px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--ink);animation:spin .8s linear infinite}
.spinner.big{width:56px;height:56px;margin:0 0 32px;border-width:4px}
@keyframes spin{to{transform:rotate(360deg)}}

.clock{position:absolute;right:96px;top:88px;font-size:26px;line-height:32px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- Leiste links: eingeklappt nur Icons, mit Fokus aufgeklappt ---------- */
.rail{position:absolute;left:0;top:0;width:120px;height:1080px;overflow:hidden;background:linear-gradient(90deg,rgba(10,10,12,.9),rgba(10,10,12,.55) 70%,rgba(10,10,12,0));transition:width 300ms var(--ease),box-shadow 300ms var(--ease)}
.rail.is-open{width:440px;background:linear-gradient(90deg,#0e0f11 0,#0e0f11 80%,rgba(14,15,17,.95));box-shadow:30px 0 80px rgba(0,0,0,.55)}
.rail-dim{position:absolute;left:0;top:0;width:1920px;height:1080px;background:rgba(5,5,6,.6);opacity:0;pointer-events:none;transition:opacity 300ms var(--ease)}
.scene.rail-open .rail-dim{opacity:1}
.rail-brand{position:absolute;left:36px;top:80px;height:48px;display:flex;align-items:center;white-space:nowrap}
.mono{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--solid);color:var(--solid-ink);font-size:24px;font-weight:700}
.mono.big{width:72px;height:72px;border-radius:20px;font-size:36px}
.rail-src{margin-left:18px;font-size:24px;font-weight:700;letter-spacing:-.3px;opacity:0;transition:opacity 200ms linear}
.rail-list{position:absolute;left:24px;top:212px;width:392px}
.ri{position:relative;width:72px;height:64px;margin-bottom:8px;padding-left:22px;border-radius:18px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;color:var(--faint);cursor:pointer;transition:width 300ms var(--ease),background-color 160ms linear,color 160ms linear}
.ri svg{flex:0 0 auto;width:28px;height:28px}
.ri-label{margin-left:22px;font-size:24px;font-weight:600;letter-spacing:-.3px;opacity:0;transition:opacity 200ms linear}
.ri-val{margin-left:auto;margin-right:18px;padding:4px 12px;border-radius:9px;background:var(--plate-hi);font-size:19px;font-weight:700;color:var(--mute);opacity:0;transition:opacity 200ms linear}
.ri.is-active{color:var(--ink)}
.ri.is-active::before{content:"";position:absolute;left:0;top:18px;width:4px;height:28px;border-radius:2px;background:var(--ink)}
.rail.is-open .ri{width:392px}
.rail.is-open .ri-label,.rail.is-open .ri-val,.rail.is-open .rail-src,.rail.is-open .rail-hint{opacity:1}
.ri.is-focus{background:var(--solid);color:var(--solid-ink)}
.ri.is-focus::before{background:var(--solid-ink)}
.ri.is-focus .ri-val{background:rgba(0,0,0,.1);color:var(--solid-ink)}
.rail-hint{position:absolute;left:48px;bottom:48px;font-size:19px;color:var(--faint);white-space:nowrap;opacity:0;transition:opacity 200ms linear}

/* ---------- Suche: großes Feld, Bildschirmtastatur, letzte Suchen ---------- */
.search>.eyebrow{position:absolute;left:var(--x);top:92px}
.q-field{position:absolute;left:var(--x);top:128px;width:1584px;height:100px;display:flex;align-items:center;border-bottom:2px solid var(--line);transition:border-color 160ms linear}
.q-field.is-focus{border-color:var(--ink)}
#q{flex:1 1 auto;min-width:0;height:96px;font-size:56px;font-weight:600;letter-spacing:-1.2px;caret-color:var(--ink)}
#q::placeholder{color:rgba(245,242,236,.26)}
.q-hint{flex:0 0 auto;margin-left:24px;font-size:19px;color:var(--faint);opacity:0;transition:opacity 160ms linear}
.q-field.is-focus .q-hint{opacity:1}
.kb{position:absolute;left:var(--x);top:296px;width:868px}
.kb-row{display:flex;height:76px;margin-bottom:12px}
.key{flex:0 0 auto;height:76px;margin-right:12px;border-radius:14px;background:var(--plate);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;cursor:pointer;transition:background-color 120ms linear,color 120ms linear,transform 140ms var(--ease)}
.key svg{width:30px;height:30px}
.key.act{font-size:22px;font-weight:700;color:var(--mute)}
.key.act-go{background:var(--plate-hi);color:var(--ink)}
.key.is-focus{background:var(--solid);color:var(--solid-ink);transform:scale(1.06)}
.recent{position:absolute;left:1132px;top:296px;width:620px}
.recent-list{margin-top:14px}
.recent-item{height:64px;margin-bottom:8px;padding:0 22px;border-radius:16px;display:flex;align-items:center;font-size:26px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color 120ms linear,color 120ms linear}
.recent-item svg{flex:0 0 auto;width:24px;height:24px;margin-right:16px;opacity:.7}
.recent-item span{overflow:hidden;text-overflow:ellipsis}
.recent-item.is-focus{background:var(--solid);color:var(--solid-ink)}
.recent-empty{margin-top:18px;font-size:22px;line-height:32px;color:var(--faint)}

/* ---------- Player ---------- */
.player{position:absolute;left:0;top:0;width:1920px;height:1080px;background:#000}
#pl-video{position:absolute;left:0;top:0;width:100%;height:100%;background:#000}
.pl-loading{position:absolute;left:0;top:0;width:1920px;height:1080px;background:#000}
.pl-poster{position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-position:50% 50%;opacity:.3}
.pl-loading-inner{position:absolute;left:0;right:0;top:400px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pl-loading-title{max-width:1300px;font-size:40px;line-height:50px;font-weight:600;letter-spacing:-.8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pl-loading-text{margin-top:12px;font-size:22px;color:var(--mute)}
.osd{position:absolute;left:0;top:0;width:1920px;height:1080px;opacity:0;pointer-events:none;transition:opacity 260ms var(--ease)}
.osd.is-shown{opacity:1}
.osd-top{position:absolute;left:0;top:0;width:1920px;height:220px;padding:56px 96px;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))}
.chip{height:52px;padding:0 24px;border-radius:26px;background:rgba(255,255,255,.14);font-size:22px;font-weight:700;cursor:pointer;pointer-events:auto}
.osd-bottom{position:absolute;left:0;bottom:0;width:1920px;padding:180px 96px 64px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.5) 55%,rgba(0,0,0,0))}
.osd-title-row{display:flex;align-items:center}
.osd-title{max-width:1500px;font-size:38px;line-height:48px;font-weight:600;letter-spacing:-.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osd-title-row .pill{margin:0 0 0 20px}
.osd-bar{position:relative;margin-top:28px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.osd-buf,.osd-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px}
.osd-buf{background:rgba(255,255,255,.28)}
.osd-fill{background:var(--ink)}
.osd-knob{position:absolute;left:0;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:10px;background:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.osd-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:22px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.osd-hints{display:inline-flex;align-items:center;font-size:19px;font-weight:500;color:var(--faint)}
.osd-hints b{margin:0 8px 0 22px;font-weight:700;color:var(--mute)}
.osd-hints .dot-green,.osd-hints .dot-yellow{margin-left:22px}
.osd-flash{position:absolute;left:50%;top:50%;display:flex;align-items:center;padding:20px 36px;border-radius:24px;background:rgba(10,10,12,.72);font-size:34px;font-weight:700;transform:translate(-50%,-50%) scale(.92);opacity:0;transition:opacity 180ms linear,transform 180ms var(--ease)}
.osd-flash.is-shown{opacity:1;transform:translate(-50%,-50%) scale(1)}
.osd-flash svg{width:40px;height:40px}

/* ---------- Token ---------- */
.sheet{position:absolute;left:0;top:0;width:1920px;height:1080px;background:radial-gradient(900px 600px at 50% 30%,rgba(130,104,80,.16),rgba(10,10,12,0) 70%),var(--ground)}
.token-card{position:absolute;left:560px;top:250px;width:800px;padding:56px 72px;border-radius:32px;background:#141518;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;text-align:center}
.token-card h2{margin-top:28px;font-size:44px;line-height:54px;font-weight:600;letter-spacing:-1.2px}
.token-card p{margin-top:12px;font-size:23px;line-height:32px;color:var(--mute)}
.token-card label{align-self:flex-start;margin-top:24px;font-size:20px;color:var(--mute)}
#tokeninput{width:100%;height:64px;margin-top:8px;padding:0 28px;border-radius:18px;background:var(--plate);font-size:24px;font-weight:600;text-align:center;caret-color:var(--ink);transition:background-color 140ms linear,color 140ms linear}
#tokeninput:focus{background:var(--solid);color:var(--solid-ink);caret-color:var(--solid-ink)}
.btn-solid{height:60px;margin-top:20px;padding:0 40px;border-radius:30px;background:var(--solid);color:var(--solid-ink);font-size:23px;font-weight:700;cursor:pointer}
.token-card .tb-note{margin-top:20px;font-size:19px;color:var(--faint)}
.token-card .login-error{font-size:20px;color:var(--warn)}
.token-card .login-error:empty{display:none}
.token-switch{margin-top:12px;min-height:44px;padding:8px 16px;font-size:19px;color:var(--mute);background:transparent;text-decoration:underline;cursor:pointer}
.token-switch:focus-visible{outline:2px solid var(--ink);border-radius:8px}
.btn-solid:disabled,.token-switch:disabled{opacity:.6;cursor:wait}

/* ---------- Meldungen ---------- */
.toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);max-width:1400px;padding:16px 30px;border-radius:30px;background:rgba(24,25,28,.95);box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:22px;line-height:30px;font-weight:600;color:var(--ink)}
.toast.is-error{color:var(--warn)}

@media (prefers-reduced-motion:reduce){
  .stage,.stage *{transition:none!important;animation:none!important}
  .card.is-focus,.key.is-focus{transform:none}
}