/* us·stream – Hausstil Custom IT (A, C) + Kino (B) */
:root{
  color-scheme:light dark;
  --brand:#c23a33;--brand-d:#9e2c26;--brand-l:#e4857e;
  --red:linear-gradient(180deg,#e25c53,#c93d36 55%,#a82c26);
  --red-edge:inset 0 1px 0 rgba(255,255,255,.38);
  --cream:#fbf6f1;--paper:#fff;--ink:#241d1b;--ink2:#4a403c;--muted:#6f625c;--bd:#efe5de;
  --ok:#2f855a;--warn:#b7791f;--bad:#c23a33;--off:#a89c95;
  --pane:rgba(255,255,255,.62);--pane-line:rgba(255,255,255,.8);
  --pane-shadow:0 1px 2px rgba(60,30,20,.06),0 8px 24px rgba(60,30,20,.08);
  --glass:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));--glass-line:rgba(255,255,255,.85);
  --field:rgba(36,29,27,.06);--brandtext:#9e2c26;--soft-red-shadow:0 4px 12px rgba(194,58,51,.3);
}
@media (prefers-color-scheme:dark){:root{
  --cream:#17120f;--paper:#211a17;--ink:#f2e9e4;--ink2:#cdbfb8;--muted:#a2918a;--bd:#332a25;
  --pane:rgba(33,26,23,.7);--pane-line:rgba(255,255,255,.08);--pane-shadow:0 8px 24px rgba(0,0,0,.35);
  --glass:linear-gradient(180deg,rgba(64,50,44,.85),rgba(40,32,28,.65));--glass-line:rgba(255,255,255,.1);
  --field:rgba(255,255,255,.07);--brandtext:#e4857e;--soft-red-shadow:0 2px 6px rgba(0,0,0,.4);
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:3px solid var(--brand-l);outline-offset:2px}
input[type=search]::-webkit-search-cancel-button{filter:grayscale(1)}
.ic{flex:none;display:block}
#app{height:100dvh}
.boot{padding:40px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* gemeinsame Teile */
.mono{display:grid;place-items:center;flex:none;font-weight:800;letter-spacing:-.02em;color:#fff;background:linear-gradient(135deg,hsl(var(--h,0) 62% 46%),hsl(var(--h,0) 62% 27%));text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;white-space:nowrap}
.livebadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#c23a33;color:#fff}
.livebadge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.livebadge.wait{background:#6f625c}
.dot{width:8px;height:8px;border-radius:50%;background:var(--off);flex:none}
.dot.ok{background:var(--ok)}.dot.fail{background:var(--bad)}
.err{display:flex;gap:8px;align-items:center;font-size:13px;color:#fff;background:#9e2c26;border-radius:9px;padding:8px 12px}
#pv{display:block;width:100%;height:100%;background:#000;object-fit:contain}
#pv.is-audio{display:none}
.slot-hidden{width:0;height:0;overflow:hidden}
.laysw{display:flex;gap:2px;padding:3px;border-radius:11px}
.laysw button{position:relative;height:30px;min-width:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;font-size:12px;font-weight:700;letter-spacing:.02em;transition:.12s}
.laysw button:active{transform:scale(.96)}
@media (pointer:coarse){.laysw button{height:40px;min-width:44px}}

/* ===================== A · Glas ===================== */
.a{height:100%;display:flex;flex-direction:column;position:relative;
  background:radial-gradient(900px 520px at 0% 0%,rgba(194,58,51,.16),transparent 60%),radial-gradient(800px 520px at 100% 100%,rgba(217,154,23,.2),transparent 60%),var(--cream)}
.a-head{height:56px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;background:linear-gradient(120deg,#c9463e,#b5352e,#922620);color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);position:relative;z-index:5}
.a-logo{font-weight:800;font-size:18px;letter-spacing:-.03em}
.a-logo i{font-style:normal;opacity:.7;font-weight:600}
.a-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.18)}
.a-seg button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:7px;font-weight:600;transition:.12s}
.a-seg button:hover{background:rgba(255,255,255,.18)}
.a-seg button.on{background:#fff;color:#9e2c26;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.a-seg button:active{transform:scale(.98)}
.a-search{margin-left:auto;flex:1;max-width:340px;height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:9px;background:rgba(0,0,0,.2)}
.a-search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.a-search input{flex:1;min-width:0;border:0;background:transparent;color:#fff;outline:none}
.a-search input::placeholder{color:rgba(255,255,255,.92)}
.a .laysw{background:rgba(0,0,0,.18)}
.a .laysw button{color:rgba(255,255,255,.92)}
.a .laysw button:hover{background:rgba(255,255,255,.18)}
.a .laysw button.on{background:#fff;color:#9e2c26}
.menu{position:relative}
.menu summary{list-style:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.a .menu summary{background:rgba(255,255,255,.22)}
.menu-pop{position:absolute;right:0;top:44px;min-width:230px;padding:12px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid var(--bd);z-index:20}
.menu-pop p{font-size:13px;color:var(--muted);margin-bottom:10px;word-break:break-all}
.menu-pop button{width:100%;height:38px;border-radius:9px;border:1px solid var(--bd);background:transparent;color:var(--brandtext);font-weight:600}
.menu-pop button:hover{background:rgba(194,58,51,.08)}
.a-main{flex:1;overflow:auto;padding:22px 22px 120px}
.a-main h1{font-size:28px;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.a-main h1 small,.c-bar h1 small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:8px}
.a-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.a-chip{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--glass-line);background:var(--glass);box-shadow:0 1px 3px rgba(60,30,20,.08);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:var(--ink);transition:.12s;display:inline-flex;align-items:center;gap:6px}
.a-chip:hover{background:var(--paper)}
.a-chip.on,.a-chip.on:hover{background:var(--red);color:#fff;border-color:transparent;box-shadow:var(--red-edge),var(--soft-red-shadow)}
.a-chip:active{transform:scale(.98)}
@media (pointer:coarse){.a-chip{min-height:44px}}
.a-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:16px}
.a-card{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--pane-line);background:var(--pane);box-shadow:var(--pane-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:.12s;min-width:0}
.a-card:hover{transform:translateY(-2px);background:var(--paper)}
.a-card.on,.a-card.on:hover{border-color:#c23a33;outline:2px solid #c23a33;outline-offset:-2px}
.a-card:active{transform:scale(.98)}
.a-card .mono{width:52px;height:52px;border-radius:12px;font-size:14px}
.a-card .t{flex:1;min-width:0;display:block}
.a-card b{display:block;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-card i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.a-card em{display:block;font-style:normal;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.a-card .favmark{color:#d99a17}
.pbtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow)}
.a-dock{position:absolute;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass);box-shadow:0 10px 30px rgba(60,30,20,.2);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);z-index:4}
.a-video{width:192px;height:108px;border-radius:10px;overflow:hidden;background:#000;flex:none;position:relative}
.a-dock .mono.sq{width:54px;height:54px;border-radius:12px;font-size:14px}
.a-dock .t{flex:1;min-width:0}
.a-dock b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-dock .n{display:block;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-dock .big{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow);transition:.12s;flex:none}
.a-dock .big:hover{filter:brightness(1.08)}.a-dock .big:active{transform:scale(.96);filter:brightness(.92)}
.a-dock .ghost{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);display:grid;place-items:center;flex:none;transition:.12s}
.a-dock .ghost:hover{background:var(--paper)}.a-dock .ghost:active{transform:scale(.95)}
.vol{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.vol input{width:110px;accent-color:#c23a33}
.a-empty{color:var(--muted);padding:6px}
@media (max-width:760px){
  .a-head{gap:8px;padding:0 10px}.a-search{display:none}.a-logo i{display:none}.a .menu{margin-left:auto}
  .a-seg button{padding:0 10px}.a-seg button span{display:none}
  .a-main{padding:16px 14px 150px}.a-grid{grid-template-columns:1fr}
  .a-dock{flex-wrap:wrap;gap:10px}.a-dock .vol{display:none}.a-video{width:100%;height:auto;aspect-ratio:16/9}
  .a-mob-search{display:flex!important}
}
.a-mob-search{display:none;height:40px;align-items:center;gap:8px;padding:0 12px;border-radius:10px;background:var(--field);margin-bottom:12px;color:var(--muted)}
.a-mob-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--ink)}

/* ===================== B · Kino ===================== */
.b{height:100%;display:grid;grid-template-columns:76px 1fr;background:#121214;color:#f5f5f7}
.b-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0;background:#0d0d0f;border-right:1px solid #232328}
.b-rail .lg{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f04040;font-weight:900;margin-bottom:14px}
.b-rail .sp{flex:1}
.b-rail button,.b-rail form button{width:48px;height:48px;border-radius:14px;border:0;background:transparent;color:#9a9aa3;display:grid;place-items:center;transition:.12s}
.b-rail button:hover{background:#1e1e22;color:#fff}
.b-rail button.on{background:#1e1e22;color:#f04040;box-shadow:inset 3px 0 0 #f04040}
.b-rail button:active{transform:scale(.95)}
.b-main{overflow:auto;padding-bottom:28px;min-width:0}
.b-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:16px 24px 14px}
.b-chips{display:contents}
.b-top .sep{width:1px;height:22px;background:#2a2a30;margin:0 4px}
.b-search{margin-left:auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:#1e1e22;color:#9a9aa3;width:200px}
.b-search input{flex:1;min-width:0;border:0;background:transparent;color:#fff;outline:none}
.b .laysw{background:#1e1e22}
.b .laysw button{color:#cfcfd6}
.b .laysw button:hover{background:#2a2a30;color:#fff}
.b .laysw button.on{background:#f5f5f7;color:#121214}
.b-chip{height:34px;padding:0 14px;border-radius:999px;border:0;background:#1e1e22;color:#cfcfd6;transition:.12s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.b-chip:hover{background:#2a2a30;color:#fff}
.b-chip.on,.b-chip.on:hover{background:#f5f5f7;color:#121214;font-weight:600}
.b-chip:active{transform:scale(.97)}
@media (pointer:coarse){.b-chip{min-height:44px}}
.b-hero{position:relative;margin:0 24px 8px;border-radius:20px;overflow:hidden;min-height:280px;aspect-ratio:21/9;max-height:56vh;display:flex;align-items:flex-end;background:linear-gradient(115deg,hsl(var(--h,0) 60% 34%),hsl(var(--h,0) 45% 14%) 70%,#121214)}
.b-hero .b-vid{position:absolute;inset:0}
.b-hero .b-vid #pv{object-fit:cover}
.b-hero.playing .big{display:none}
.b-hero.playing .in{background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);max-width:none;width:100%}
.b-hero .big{position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:clamp(70px,12vw,160px);font-weight:900;letter-spacing:-.05em;color:rgba(255,255,255,.12)}
.b-hero .in{position:relative;padding:26px;max-width:640px}
.b-hero h2{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.03em;line-height:1.05;margin:10px 0 6px}
.b-hero p,.b-radiohero p{color:#d6d6dc;margin-bottom:16px}
.b-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.b-play{height:44px;padding:0 22px;border-radius:999px;border:0;display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;background:#f04040;transition:.12s}
.b-play:hover{background:#ff5a5a}.b-play:active{transform:scale(.97);background:#d63030}
.b-ghost{height:44px;padding:0 18px;border-radius:999px;border:1px solid #ffffff44;background:#ffffff14;display:flex;align-items:center;gap:8px;transition:.12s}
.b-ghost:hover{background:#ffffff26}.b-ghost:active{transform:scale(.97)}
.b-ghost.on .ic{fill:currentColor;color:#f5c542}
.b .vol{color:#cfcfd6}
.b-row{margin-top:22px}
.b-row h3{padding:0 24px 10px;font-size:18px;letter-spacing:-.01em}
.b-row h3 small{color:#9a9aa3;font-weight:500;font-size:13px;margin-left:6px}
.b-scroll{display:flex;gap:14px;overflow-x:auto;padding:6px 24px 14px;scroll-snap-type:x proximity}
.b-tile{flex:none;scroll-snap-align:start;width:216px;border:0;border-radius:14px;background:#1e1e22;color:inherit;text-align:left;overflow:hidden;transition:transform .12s}
.b-tile:hover,.b-tile:focus-visible{transform:scale(1.05);outline:3px solid #fff;outline-offset:0;z-index:2;position:relative}
.b-tile.on{outline:2px solid #f04040;outline-offset:0}
.b-tile.on:focus-visible{outline:3px solid #fff}
.b-tile .th{display:grid;place-items:center;aspect-ratio:16/9;font-size:32px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,hsl(var(--h,0) 60% 42%),hsl(var(--h,0) 55% 20%));color:#fff;position:relative}
.b-tile .th .dot{position:absolute;right:8px;top:8px}
.b-tile .lb{display:block;padding:9px 12px 11px}
.b-tile b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-tile i{display:block;font-style:normal;font-size:12px;color:#9a9aa3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-tile.r{width:160px}
.b-tile.r .th{aspect-ratio:1;font-size:28px;font-variant-numeric:tabular-nums}
.b-radiohero{position:relative;margin:0 24px 8px;border-radius:20px;padding:24px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:linear-gradient(115deg,hsl(var(--h,0) 55% 24%),#17171a 75%)}
.b-radiohero .art{width:190px;height:190px;border-radius:18px;display:flex;align-items:flex-end;justify-content:center;padding:30px;background:linear-gradient(135deg,hsl(var(--h,0) 62% 44%),hsl(var(--h,0) 55% 18%));box-shadow:0 14px 40px rgba(0,0,0,.45)}
.eq{display:flex;align-items:flex-end;gap:7px;height:100%;width:100%;justify-content:center}
.eq i{width:12px;border-radius:4px;background:#fff;opacity:.92;height:30%;animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}.eq i:nth-child(3){animation-duration:1.2s;animation-delay:-.6s}.eq i:nth-child(4){animation-duration:.85s;animation-delay:-.1s}.eq i:nth-child(5){animation-duration:1.05s;animation-delay:-.5s}
.eq.paused i{animation-play-state:paused}
@keyframes eq{from{height:18%}to{height:95%}}
.b-radiohero .freq{font-size:clamp(46px,7vw,84px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.b-radiohero .freq small{font-size:.32em;color:#c9c9d0;margin-left:6px;letter-spacing:0}
.b-radiohero h2{font-size:22px;margin:8px 0 2px}
.b-empty{padding:24px;color:#9a9aa3}
@media (max-width:700px){
  .b{grid-template-columns:1fr;grid-template-rows:1fr calc(62px + env(safe-area-inset-bottom))}
  .b-rail{order:2;flex-direction:row;justify-content:center;gap:20px;padding:0 0 env(safe-area-inset-bottom);border-right:0;border-top:1px solid #232328}
  .b-rail .lg,.b-rail .sp{display:none}.b-rail button.on{box-shadow:inset 0 3px 0 #f04040}
  .b-top{padding:12px 14px}.b-search{width:100%;order:-1;margin-left:0}
  .b-hero,.b-radiohero{margin:0 14px 8px}.b-hero{aspect-ratio:16/9;min-height:0}
  .b-hero .in{padding:16px}.b-row h3,.b-scroll{padding-left:14px;padding-right:14px}.b-tile{width:170px}
  .b-radiohero .art{width:120px;height:120px;padding:18px}
}

/* ===================== C · Regie ===================== */
.c{height:100%;display:grid;grid-template-columns:232px 1fr 360px;background:var(--cream);color:var(--ink)}
.c-side{background:linear-gradient(180deg,#251c19,#1c1512);color:#f4ece7;padding:16px 12px;overflow:auto;display:flex;flex-direction:column}
.c-side .wm{font-weight:800;font-size:17px;letter-spacing:-.03em;padding:2px 8px 14px}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.08);margin-bottom:18px}
.seg2 button{height:34px;border:0;border-radius:9px;background:transparent;color:#cdbfb8;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;transition:.12s}
.seg2 button:hover{background:rgba(255,255,255,.1);color:#fff}
.seg2 button.on{background:var(--red);color:#fff;box-shadow:var(--red-edge)}
.seg2 button:active{transform:scale(.98)}
.c-side h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b3a39b;font-weight:600;padding:0 8px 6px}
.c-side ul{list-style:none;margin-bottom:18px}
.c-side li button{width:100%;height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#f4ece7;text-align:left;transition:.12s}
.c-side li button:hover{background:rgba(255,255,255,.09)}
.c-side li button.on,.c-side li button.on:hover{background:rgba(228,133,126,.2);color:#fff;box-shadow:inset 3px 0 0 #e4857e}
.c-side li button:active{transform:scale(.98)}
.c-side li span{font-size:12px;color:#b3a39b;font-variant-numeric:tabular-nums}
.c-side .foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.c-side .laysw{background:rgba(255,255,255,.08);margin:0 0 12px}
.c-side .laysw button{flex:1;color:#cdbfb8}
.c-side .laysw button:hover{background:rgba(255,255,255,.1);color:#fff}
.c-side .laysw button.on{background:#f4ece7;color:#251c19}
.c-side .who{font-size:12px;color:#b3a39b;padding:0 8px 8px;word-break:break-all}
.c-side .out{width:100%;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f4ece7}
.c-side .out:hover{background:rgba(255,255,255,.08)}
.c-mid{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--bd)}
.c-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;flex:none;flex-wrap:wrap}
.c-bar h1{font-size:28px;letter-spacing:-.02em;line-height:1.1}
.c-bar label{margin-left:auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:9px;background:var(--field);min-width:0;width:260px;color:var(--muted)}
.c-bar label:focus-within{box-shadow:0 0 0 3px var(--brand-l)}
.c-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);outline:none}
.c-mob{display:none;gap:8px;padding:0 14px 10px;overflow-x:auto;flex:none}
.c-mob .seg2{margin:0;background:var(--field);flex:none}
.c-mob .seg2 button{color:var(--ink2);padding:0 12px}
.c-mob .chip{flex:none;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--bd);background:var(--paper)}
.c-mob .chip.on{background:var(--red);color:#fff;border-color:transparent}
.c-mob .laysw{background:var(--field);flex:none}
.c-mob .laysw button.on{background:var(--paper)}
.c-head,.c-row{display:grid;grid-template-columns:44px minmax(150px,2.2fr) 1fr 1fr 150px 38px;gap:12px;align-items:center;padding:0 18px}
.c-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);height:30px;border-bottom:1px solid var(--bd);flex:none;font-weight:600}
.c-list{flex:1;overflow:auto}
.c-row{height:58px;border-bottom:1px solid var(--bd);transition:background .12s;cursor:pointer}
.c-row:hover{background:rgba(194,58,51,.07)}
.c-row.on,.c-row.on:hover{background:rgba(194,58,51,.13);box-shadow:inset 3px 0 0 #c23a33}
.c-row:active{background:rgba(194,58,51,.2)}
.c-row .mono{width:40px;height:40px;border-radius:10px;font-size:11px}
.c-row .nm{min-width:0}
.c-row .nm b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row .nm span{display:block;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row .tx{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row .tech{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;display:flex;align-items:center;gap:7px;color:var(--ink2);white-space:nowrap;overflow:hidden}
.c-row .mono{letter-spacing:-.04em}
.c-empty{padding:18px;color:var(--muted)}
.star{width:34px;height:34px;border-radius:9px;border:0;background:transparent;display:grid;place-items:center;color:var(--muted);transition:.12s}
.star:hover{background:rgba(217,154,23,.18);color:#b7791f}.star.on{color:#d99a17}.star.on .ic{fill:currentColor}.star:active{transform:scale(.92)}
@media (pointer:coarse){.star{width:44px;height:44px}}
.c-det{padding:16px;overflow:auto}
.c-det .x{display:none}
.c-player{aspect-ratio:16/9;border-radius:12px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,0) 60% 40%),hsl(var(--h,0) 55% 16%));box-shadow:0 8px 24px rgba(60,30,20,.2)}
.c-player .slot{position:absolute;inset:0}
.c-player .big{font-size:44px;font-weight:900;letter-spacing:-.04em;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.c-player.video .big{display:none}
.c-player .livebadge{position:absolute;left:10px;top:10px;z-index:2}
.c-det h2{font-size:20px;letter-spacing:-.02em;margin:14px 0 2px}
.c-det .sub{color:var(--ink2);margin-bottom:14px}
.c-btns{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.c-red{height:38px;padding:0 18px;border-radius:9px;border:0;display:flex;align-items:center;gap:7px;font-weight:700;color:#fff;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow);transition:.12s}
.c-red:hover{filter:brightness(1.08)}.c-red:active{transform:scale(.98);filter:brightness(.92)}
.c-glass{height:38px;padding:0 14px;border-radius:9px;display:flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--paper);transition:.12s}
.c-glass:hover{background:rgba(194,58,51,.08)}.c-glass:active{transform:scale(.98)}
.c-glass.on .ic{fill:currentColor;color:#d99a17}
.c-det dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;margin-top:6px}
.c-det dt{color:var(--muted)}.c-det dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;display:flex;align-items:center;gap:7px}
.c-det .none{color:var(--muted);padding:30px 6px}
.c-det .err{margin-bottom:12px}
@media (max-width:1100px){
  .c{grid-template-columns:220px 1fr}
  .c-det{position:fixed;left:0;right:0;bottom:0;max-height:78dvh;background:var(--paper);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3);padding:12px 16px calc(16px + env(safe-area-inset-bottom));z-index:30;transform:translateY(105%);transition:transform .22s ease-out;max-width:560px;margin:0 auto}
  .c-det.open{transform:none}
  .c-det .grip{width:40px;height:5px;border-radius:3px;background:var(--bd);margin:0 auto 36px}
  .c-det .x{z-index:3;display:grid;position:absolute;right:10px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--field);place-items:center}
  .c-list{padding-bottom:40px}
}
@media (min-width:1101px){.c-det .grip{display:none}}
@media (max-width:760px){
  .c{grid-template-columns:1fr}.c-side{display:none}.c-mob{display:flex}
  .c-bar{padding:12px 14px 10px}.c-bar h1{font-size:24px}.c-bar label{width:100%;margin-left:0}
  .c-head{display:none}
  .c-row{grid-template-columns:44px 1fr 44px;padding:0 14px;height:62px}
  .c-row .tx,.c-row .tech{display:none}
}

/* ===================== Aufnahmen ===================== */
[hidden]{display:none!important}
.recbadge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px;border-radius:5px;background:#c23a33;color:#fff;font:800 10px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.08em;vertical-align:middle}
.b-tile .th .recbadge{position:absolute;left:8px;top:8px;margin:0}
.c-row .tech .recbadge{margin:0 2px 0 0}
.recbtn .ic{color:#e25c53}
.recbtn.on{color:#fff;background:#c23a33;border-color:#c23a33}
.recbtn.on .ic{color:#fff}
.a-icon{width:34px;height:34px;border-radius:9px;border:0;display:grid;place-items:center;background:rgba(0,0,0,.18);color:#fff;transition:.12s}
.a-icon:hover{background:rgba(255,255,255,.18)}.a-icon:active{transform:scale(.96)}
.c-mob .chip{display:inline-flex;align-items:center}
.recdlg{margin:auto;width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--bd);border-radius:18px;padding:0;background:var(--cream);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:auto}
.recdlg::backdrop{background:rgba(20,12,10,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.rd-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(120deg,#c9463e,#b5352e,#922620);color:#fff}
.rd-head h2{font-size:20px;letter-spacing:-.02em}
.rd-x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center}
.rd-x:hover{background:rgba(255,255,255,.28)}
.rd-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.rd-lists{grid-column:1/-1}
.rd-card{background:var(--paper);border:1px solid var(--bd);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.rd-card h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rd-lists h3:not(:first-child){margin-top:8px}
.rd-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.rd-card input,.rd-card select{height:38px;border:0;border-radius:9px;background:var(--field);padding:0 10px;color:var(--ink);font-size:15px;min-width:0;width:100%}
.rd-card input:focus-visible,.rd-card select:focus-visible{outline:3px solid var(--brand-l);outline-offset:0}
.rd-row{display:flex;gap:10px;flex-wrap:wrap}
.rd-row label{flex:1 1 110px}.rd-row label.grow{flex:3 1 200px}
.rd-seg,.rd-days{display:flex;gap:4px;padding:3px;border-radius:11px;background:var(--field);flex-wrap:wrap}
.rd-seg label,.rd-days label{flex:1;flex-direction:row;cursor:pointer;color:var(--ink2);font-size:14px;min-width:44px}
.rd-seg input,.rd-days input{position:absolute;opacity:0;width:1px;height:1px}
.rd-seg span,.rd-days span{flex:1;display:grid;place-items:center;height:34px;border-radius:8px;transition:.12s}
.rd-seg input:checked+span{background:var(--red);color:#fff;font-weight:600;box-shadow:var(--red-edge)}
.rd-days input:checked+span{background:var(--paper);color:var(--brandtext);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rd-seg input:focus-visible+span,.rd-days input:focus-visible+span{outline:3px solid var(--brand-l)}
.rd-preview{font-size:13px;color:var(--ink2);min-height:18px;font-variant-numeric:tabular-nums}
.rd-red{align-self:flex-start;height:40px;padding:0 18px;border-radius:10px;border:0;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow);transition:.12s}
.rd-red .ic{color:#fff}
.rd-red:hover{filter:brightness(1.08)}.rd-red:active{transform:scale(.98)}.rd-red:disabled{opacity:.45;cursor:not-allowed;filter:none}
.rd-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--bd)}
.rd-item .t{flex:1;min-width:0}
.rd-item b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-item span{font-size:12.5px;color:var(--ink2)}
.rd-item .t>span{display:block;overflow:hidden;text-overflow:ellipsis}
.rd-item .recbadge{margin:0}
.rd-err{color:var(--brandtext)!important}
.rd-st{flex:none;font-size:11px!important;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--field);color:var(--ink2)}
.rd-st.done{background:rgba(47,133,90,.14);color:#2f855a}
.rd-st.failed{background:rgba(194,58,51,.14);color:var(--brandtext)}
.rd-st.waiting,.rd-st.processing{background:rgba(217,154,23,.18);color:#9a6b0f}
@media (prefers-color-scheme:dark){.rd-st.done{color:#68d391}.rd-st.waiting,.rd-st.processing{color:#f6c35b}}
.rd-btn{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--bd);background:var(--paper);font-weight:600;color:var(--brandtext)}
.rd-btn:hover{background:rgba(194,58,51,.08)}
.rd-icon{width:36px;height:36px;border-radius:9px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;flex:none}
.rd-icon:hover{background:rgba(194,58,51,.1);color:var(--brandtext)}
@media (pointer:coarse){.rd-icon,.rd-btn{min-width:44px;min-height:44px}}
.rd-empty{font-size:13px;color:var(--muted);padding:4px 0 6px}
.rd-warn{display:flex;gap:8px;align-items:center;margin:14px 16px 0;padding:10px 12px;border-radius:10px;background:rgba(217,154,23,.16);color:var(--ink);font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;padding:10px 16px;border-radius:10px;background:#241d1b;color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.bad{background:#9e2c26}
@media (max-width:760px){.rd-body{grid-template-columns:1fr;padding:12px}.recdlg{width:100vw;max-height:100dvh;border-radius:0;height:100dvh;max-width:100vw}}

/* ===================== Login ===================== */
body.login{min-height:100dvh;display:grid;place-items:center;padding:16px;
  background:radial-gradient(900px 520px at 0% 0%,rgba(194,58,51,.18),transparent 60%),radial-gradient(800px 520px at 100% 100%,rgba(217,154,23,.22),transparent 60%),var(--cream)}
.login-card{width:100%;max-width:380px;padding:32px 28px;border-radius:18px;text-align:center;border:1px solid var(--pane-line);background:var(--pane);box-shadow:var(--pane-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login-mark{width:60px;height:60px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:24px;letter-spacing:-.04em;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow)}
.login-card h1{font-size:28px;letter-spacing:-.03em}
.login-sub{color:var(--ink2);margin:4px 0 22px}
.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:11px;color:#fff;text-decoration:none;font-weight:700;background:var(--red);box-shadow:var(--red-edge),var(--soft-red-shadow);transition:.12s}
.login-btn:hover{filter:brightness(1.08)}.login-btn:active{transform:scale(.98);filter:brightness(.92)}
.login-dev{display:block;margin-top:12px;color:var(--brandtext);font-weight:600}
.login-err{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:rgba(194,58,51,.12);color:var(--brandtext);font-size:14px}
.login-note{margin-top:18px;font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}