/* Videos: beide Kanäle nebeneinander, sofort sichtbar. Abspielen im Overlay.
   Jede Spalte trägt die Farbe ihres Kanals (Gold = Sachsii, Mondblau = Ottilie). */
.vpage{padding-block:calc(68px + env(safe-area-inset-top,0px) + clamp(28px,4vw,52px)) clamp(64px,8vw,110px);min-height:70vh;overflow-x:clip}
.vhead{margin-bottom:clamp(24px,3.5vw,40px)}
.vhead .eyebrow{margin-bottom:10px}
.v-title{margin:0;font:900 clamp(44px,6vw,84px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.v-title em{font:italic 500 1.04em/.9 var(--f-serif);text-transform:none;color:var(--gold);letter-spacing:0}
.vhead .lede{margin-top:14px;max-width:60ch}

/* ---------- Zwei Spalten ---------- */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.cols.single{grid-template-columns:minmax(0,760px)}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
.col{--c:var(--gold);--c-haze:var(--gold-haze);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:clamp(18px,2.2vw,26px);border-radius:24px;border:1px solid var(--line);background:var(--night-2);overflow:hidden}
.col[data-ch="ottilie"]{--c:var(--moon);--c-haze:var(--moon-haze)}
.col::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;z-index:-1;background:radial-gradient(80% 100% at 20% 0%,var(--c-haze),transparent 70%);pointer-events:none}
.col:target{box-shadow:0 0 0 2px var(--c)}
.col-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.col-name{margin:0;line-height:.85;color:var(--ink)}
.col-name.rock{font:900 clamp(40px,4.2vw,60px)/.85 var(--f-display);text-transform:uppercase}
.col-name.ballad{font:italic 500 clamp(46px,4.8vw,68px)/.85 var(--f-serif)}
.col-meta{margin:8px 0 0;color:var(--mute);font-size:13px}
.sub-btn{gap:10px}
.sub-dot{width:9px;height:9px;border-radius:50%;background:#ff3d3d;box-shadow:0 0 0 4px rgba(255,61,61,.18)}

/* ---------- Liste ---------- */
.vlist{list-style:none;margin:0;padding:0;counter-reset:v}
.vlist li{border-bottom:1px solid var(--line)}
.vlist li:last-child{border-bottom:0}
.row{display:grid;grid-template-columns:clamp(120px,13vw,176px) minmax(0,1fr);gap:16px;align-items:center;width:100%;padding:12px 6px;margin:0;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.row:hover,.row:focus-visible{background:var(--hover)}
.thumb{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:10px;overflow:hidden;background:var(--night-3);box-shadow:0 14px 30px -18px var(--shadow),0 0 0 1px var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.row:hover .thumb img{transform:scale(1.07)}
.thumb-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,7,12,.25);opacity:0;transition:opacity .25s}
.thumb-play span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:var(--night);box-shadow:0 8px 24px -6px var(--shadow)}
.thumb-play svg{width:16px;height:16px;margin-left:2px}
.row:hover .thumb-play,.row:focus-visible .thumb-play{opacity:1}
.new-badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--c);color:var(--night);font:700 10px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.row-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.row-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font:600 15px/1.35 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.row-meta{margin:0;color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.col-empty{margin:14px 0 4px;padding:22px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--mute);font-size:14px}
.privacy{margin-top:18px;color:var(--mute);font-size:13px}

/* Einblenden */
.rise{animation:riseIn .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Player (Overlay) ---------- */
.player{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:calc(clamp(12px,3vw,40px) + env(safe-area-inset-top,0px)) clamp(12px,3vw,40px) calc(clamp(12px,3vw,40px) + env(safe-area-inset-bottom,0px))}
.player-scrim{position:absolute;inset:0;background:rgba(3,4,8,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.player.open .player-scrim{opacity:1}
.player-card{--c:var(--gold);position:relative;width:min(1100px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:clamp(12px,1.6vw,18px);border-radius:22px;background:var(--night-2);border:1px solid var(--line);box-shadow:0 60px 120px -30px var(--shadow);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .3s,transform .35s var(--ease-out)}
.player-card[data-ch="ottilie"]{--c:var(--moon)}
.player.open .player-card{opacity:1;transform:none}
.player-screen{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:#000}
.player-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-info{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding:2px 6px 6px}
.player-text{min-width:0;flex:1 1 320px}
.player-text .eyebrow{margin:0 0 6px;color:var(--c)}
.player-title{margin:0;font:800 clamp(22px,2.4vw,32px)/1.05 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
.player-meta{margin:6px 0 0;color:var(--mute);font-size:14px;font-variant-numeric:tabular-nums}
.player-actions{display:flex;flex-wrap:wrap;gap:8px}
.player-actions .btn svg{width:18px;height:18px}

/* Leer / Laden */
.v-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px 20px;text-align:center;border:1px dashed var(--line-strong);border-radius:22px}
.v-empty .btn{margin-top:10px}
.empty-reel{width:110px;height:110px;margin-bottom:10px;border-radius:50%;opacity:.75;
  background:radial-gradient(circle,var(--night) 0 12%,transparent 12.5%),
    radial-gradient(circle at 50% 22%,var(--night) 0 9%,transparent 9.5%),radial-gradient(circle at 50% 78%,var(--night) 0 9%,transparent 9.5%),
    radial-gradient(circle at 22% 50%,var(--night) 0 9%,transparent 9.5%),radial-gradient(circle at 78% 50%,var(--night) 0 9%,transparent 9.5%),
    var(--gold);animation:spin 8s linear infinite}
.sk-col{height:560px;border-radius:24px}