@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=DM+Sans:wght@400;500;700&display=swap');
:root{--bg:#0b0d10;--bg2:#14181d;--card:#1c2127;--text:#f2f5f4;--muted:#8d99a0;--accent:#f5b83d;--accent-ink:#201600;--danger:#ff7a6b;
--head:'Bricolage Grotesque',Georgia,sans-serif;--body:'DM Sans',system-ui,sans-serif;--pad:clamp(1rem,4vw,3.2rem)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.5 var(--body);min-height:100vh}
button,input,select{font:inherit;color:inherit}
.logo{font:800 1.7rem var(--head);letter-spacing:-.03em}.logo b{color:var(--accent)}
.muted{color:var(--muted)}
.btn{border:0;border-radius:10px;padding:.75rem 1.3rem;background:#ffffff1f;cursor:pointer;font-weight:700;backdrop-filter:blur(6px);transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.25);transform:scale(1.03)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Login */
.login{display:grid;place-items:center;padding:1.5rem}
.screen-glow{position:fixed;inset:0;background:radial-gradient(60% 50% at 70% 10%,#f5b83d33,transparent),radial-gradient(50% 60% at 10% 90%,#2a7f8a44,transparent);pointer-events:none}
.login-card{position:relative;width:min(100%,400px);background:var(--bg2);padding:2.4rem;border-radius:20px;box-shadow:0 30px 80px #0006}
.login-card h1{font:800 2rem var(--head);margin:1.6rem 0 .3rem;letter-spacing:-.02em}
.login-card form{display:grid;gap:1rem;margin-top:1.4rem}
label{display:grid;gap:.35rem;font-weight:500;font-size:.9rem}
input{background:var(--bg);border:2px solid transparent;border-radius:10px;padding:.75rem .9rem}
input:focus{border-color:var(--accent);outline:0}
.error{background:#ff7a6b22;color:var(--danger);padding:.6rem .8rem;border-radius:8px;margin-top:1rem;font-size:.9rem}
code{background:var(--bg);padding:.1rem .3rem;border-radius:4px}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;gap:1.6rem;align-items:center;padding:.9rem var(--pad);background:linear-gradient(#0b0d10e6,#0000);transition:background .3s}
header.solid{background:#0b0d10f2;backdrop-filter:blur(14px);box-shadow:0 1px 0 #ffffff12}
nav{display:flex;gap:.2rem}nav button{background:0;border:0;padding:.4rem .9rem;border-radius:99px;cursor:pointer;color:#c3ccd0;font-weight:500;transition:.2s}
nav button:hover{color:#fff}nav button.on{background:#ffffff22;color:#fff}
.search{margin-left:auto;display:flex;align-items:center;gap:.5rem;background:#ffffff14;border-radius:99px;padding:0 .9rem;width:min(260px,42vw);transition:.25s}
.search:focus-within{background:#ffffff26;width:min(340px,60vw)}.search input{background:0;border:0;padding:.55rem 0;width:100%;outline:0}
.av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800}
.demo{background:var(--accent);color:var(--accent-ink);text-align:center;padding:.4rem;margin-top:62px;font-size:.85rem;font-weight:500}
#hero{position:relative;height:min(82vh,760px);display:flex;align-items:flex-end;padding:0 var(--pad) 6rem;background:#1c2127 center 20%/cover;transition:background-image .6s}
#hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 2%,#0b0d1000 45%,#0b0d1099),linear-gradient(90deg,#0b0d10e6,transparent 65%)}
#hero .in{position:relative;max-width:640px;animation:rise .8s ease both}
#hero h2{font:800 clamp(2.4rem,7vw,5.2rem)/.95 var(--head);letter-spacing:-.035em;margin-bottom:.9rem;text-shadow:0 4px 30px #0008}
#hero p{color:#e1e9e8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1.4rem}
.meta{display:flex;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-bottom:.8rem}#hero .meta{color:#cbd6d5}
.row{display:flex;gap:.7rem;flex-wrap:wrap}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
#chips{display:flex;gap:.5rem;overflow-x:auto;padding:5.5rem var(--pad) .4rem;scrollbar-width:none}
#hero~#chips{padding-top:0;margin-top:-3.5rem;position:relative;z-index:2}
#chips button{flex:none;border:1px solid #ffffff22;background:#0b0d1099;backdrop-filter:blur(6px);border-radius:99px;padding:.3rem .95rem;cursor:pointer;color:#c3ccd0}
#chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.row-s{margin:1.6rem 0}.row-s h3{font:800 1.35rem var(--head);letter-spacing:-.02em;padding:0 var(--pad);margin-bottom:.7rem}
.rail-wrap{position:relative}
.rail{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.6rem var(--pad) 1rem;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.arr{position:absolute;top:.6rem;bottom:1rem;width:var(--pad);min-width:44px;z-index:3;border:0;background:linear-gradient(90deg,#0b0d10ee,transparent);font-size:2.4rem;cursor:pointer;opacity:0;transition:.2s;color:#fff}
.arr.r{right:0;background:linear-gradient(270deg,#0b0d10ee,transparent)}.arr.l{left:0}
.rail-wrap:hover .arr{opacity:1}
.card{flex:none;width:clamp(130px,15vw,200px);scroll-snap-align:start;background:none;border:0;text-align:left;cursor:pointer;position:relative;transition:transform .25s}
.card .art{aspect-ratio:2/3;border-radius:12px;background:var(--card) center/cover;display:grid;place-items:center;padding:.8rem;text-align:center;font:800 1.1rem var(--head);overflow:hidden;box-shadow:0 6px 18px #0006;transition:.25s}
.card:hover,.card:focus-visible{transform:scale(1.08);z-index:4}.card:hover .art{box-shadow:0 18px 40px #000a,0 0 0 2px var(--accent)}
.card b{display:block;margin-top:.5rem;font-weight:500;font-size:.9rem;line-height:1.25}.card small{color:var(--muted)}
.card .prog{position:absolute;left:8px;right:8px;top:calc(100% - 3.6rem);height:4px;border-radius:4px;background:#0009;overflow:hidden;display:none}
.card .prog i{display:block;height:100%;background:var(--accent)}.card.has .prog{display:block}
.badge{position:absolute;top:8px;left:8px;background:var(--accent);color:var(--accent-ink);font-size:.7rem;font-weight:800;padding:.1rem .45rem;border-radius:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.4rem 1rem;padding:6rem var(--pad) 4rem}
.grid .card{width:auto}.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:3rem}
.skel{height:60vh;margin:2rem var(--pad);border-radius:16px;background:linear-gradient(100deg,var(--bg2) 30%,var(--card) 50%,var(--bg2) 70%) 0/300% 100%;animation:sh 1.3s infinite linear}
@keyframes sh{to{background-position:-300% 0}}
#modal{position:fixed;inset:0;z-index:30;background:#000c;backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;overflow:auto}
#modal[hidden],#player[hidden]{display:none}
.sheet{background:var(--bg2);border-radius:20px;width:min(100%,820px);max-height:92vh;overflow:auto;animation:rise .25s ease both;box-shadow:0 40px 100px #000}
.cover{height:300px;background:var(--card) center/cover;position:relative}.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg2),transparent 75%)}
.body{padding:0 1.8rem 1.8rem;margin-top:-4rem;position:relative;z-index:1}
.body h3{font:800 2.4rem/1 var(--head);letter-spacing:-.03em;margin-bottom:.7rem}.body p{margin:.5rem 0 1.2rem;max-width:62ch;color:#cfd8dc}
select{background:var(--bg);border:0;padding:.55rem .9rem;border-radius:8px;margin-bottom:.8rem}
input{background:var(--bg);border:2px solid transparent;border-radius:10px;padding:.7rem .9rem}input:focus{border-color:var(--accent);outline:0}
label{display:grid;gap:.35rem;font-weight:500;font-size:.9rem}
.ep{display:flex;gap:.8rem;width:100%;text-align:left;background:0;border:0;padding:.7rem;border-radius:10px;cursor:pointer;align-items:center;position:relative}
.ep:hover{background:var(--card)}.ep i{font:800 1.3rem var(--head);color:var(--accent);width:2rem;font-style:normal}.ep span{flex:1}.ep small{color:var(--muted)}
#player{position:fixed;inset:0;z-index:40;background:#000;display:flex;flex-direction:column}
.pbar{display:flex;gap:1rem;align-items:center;padding:.7rem 1rem;color:#fff;position:absolute;inset:0 0 auto;z-index:2;background:linear-gradient(#000c,transparent);transition:opacity .4s}
.pbar span{flex:1;font-weight:700}#player.idle .pbar{opacity:0}#player.idle{cursor:none}
#video{flex:1;min-height:0;width:100%;background:#000}
#toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:#000b;padding:.5rem 1.1rem;border-radius:99px;opacity:0;transition:.3s;pointer-events:none;font-weight:700}#toast.on{opacity:1}
@media (max-width:640px){nav{display:none}header{gap:.8rem}.cover{height:190px}#hero{height:70vh;padding-bottom:5rem}.arr{display:none}.card{width:36vw}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Freigabe */
.share{background:var(--bg);border-radius:14px;padding:1.2rem;margin-top:1rem;display:grid;gap:.8rem}
.share h4{font:800 1.1rem var(--head)}
.share .copy{display:flex;gap:.5rem}.share .copy input{flex:1;min-width:0}
.link{display:flex;gap:.6rem;align-items:center;font-size:.85rem;color:var(--muted)}
.link span{flex:1}.link button{background:0;border:0;color:var(--danger);cursor:pointer}
.guest{background:var(--bg)}
#cover{position:fixed;inset:0 0 auto;height:55vh;background:var(--card) center/cover;opacity:.5}
#cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent)}
#share{position:relative;max-width:760px;margin:0 auto;padding:22vh 1.2rem 4rem}
#share h1{font:800 clamp(2.4rem,8vw,4.5rem)/.95 var(--head);letter-spacing:-.035em;margin:.5rem 0 .8rem}
#share .logo{margin-bottom:2rem}#share p{margin:.5rem 0 1.2rem;max-width:62ch}