/* Bereich Videos (v2/videos/, _tools/videos/bauen_videos.php) – nur von diesen Seiten geladen */
.sp.vb{--c:var(--c-ep)}

/* Kopf: Wand aus Standbildern statt eines Einzelbilds */
.vh-wand{position:absolute;z-index:-2;inset:-40px -60px -40px 32%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:8px;transform:rotate(-4deg);opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.vh-wand img{width:100%;height:100%;object-fit:cover;border-radius:10px;filter:saturate(.85) contrast(1.05)}
.vh-wand img:nth-child(3n+2){transform:translateY(18px)}
.vh-zahlen{display:flex;gap:28px;margin:18px 0 0;padding:0;list-style:none;font-family:var(--f-ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.vh-zahlen b{display:block;font-family:var(--f-disp);font-size:2rem;letter-spacing:-.01em;text-transform:none;color:#fff}
.vh-zahlen li:empty{display:none}
.vh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;max-width:900px;max-height:86px;overflow-y:auto;scrollbar-width:thin}
.vh-chips a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:.82rem;text-decoration:none}
.vh-chips a:hover{background:var(--c);border-color:var(--c)}
.vh-chips small{font-family:var(--f-ui);font-size:.64rem;opacity:.7}
@media (max-width:760px){.vh-wand{inset:-20px -40px 30% -40px;grid-template-columns:repeat(4,1fr);opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 100%);mask-image:linear-gradient(180deg,#000 0,transparent 100%)}
  .vh-wand img:nth-child(n+13){display:none}}

/* Großer Player */
.vp{background:#0b0710;color:#fff;padding:32px 0 36px;scroll-margin-top:78px}
.vp-in{width:min(1240px,100% - 32px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.vp-bild{border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.vp-bild video{display:block;width:100%;aspect-ratio:4/3;max-height:72vh;background:#000;object-fit:contain}
.vp-info{padding-top:6px}
.vp-k{margin:0;font-family:var(--f-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 60%,#fff)}
.vp-k span+span::before{content:"· ";color:rgba(255,255,255,.5)}
.vp-info h2{margin:8px 0 14px;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.01em;overflow-wrap:anywhere}
.vp-m{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 20px}
.vp-m #vp-d{font-family:var(--f-ui);font-size:.8rem;color:rgba(255,255,255,.7)}
.vp-m #vp-d:empty{display:none}
.vp-m a{color:#fff;font-weight:700;text-decoration:none}
.vp-m a:hover{color:color-mix(in srgb,var(--c) 50%,#fff)}
.vp-m small{margin-left:4px;font-family:var(--f-ui);font-weight:400;font-size:.68rem;color:rgba(255,255,255,.6)}
.vp-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vp-nav button{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.vp-nav button:hover:not(:disabled){background:var(--c);border-color:var(--c)}
.vp-nav button:disabled{opacity:.35;cursor:default}
.vp-nav label{flex-basis:100%;margin-top:6px;font-size:.82rem;color:rgba(255,255,255,.75);cursor:pointer}
.vp-nav input{accent-color:var(--c);margin-right:6px}
@media (max-width:900px){.vp{padding:0 0 24px}.vp-in{width:100%;grid-template-columns:1fr;gap:16px}.vp-bild{border-radius:0}.vp-info{padding:0 16px}}

/* Liste */
.vl-liste{padding-block:36px 56px}
.vl-gr{display:flex;align-items:baseline;gap:10px;margin:36px 0 14px;font-family:var(--f-disp);font-weight:800;font-size:1.5rem;scroll-margin-top:90px}
.vl-gr:first-child{margin-top:0}
.vl-gr small{font-family:var(--f-ui);font-weight:400;font-size:.72rem;color:var(--muted)}
.vl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.vl{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--paper);color:var(--ink);text-align:left;font:inherit;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 var(--line),0 12px 26px -22px rgba(30,10,40,.5);transition:transform .15s,box-shadow .15s}
.vl:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--line),0 18px 30px -20px rgba(30,10,40,.6)}
.vl[aria-current]{box-shadow:0 0 0 3px var(--c),0 18px 30px -20px rgba(30,10,40,.6)}
.vl-b{position:relative;display:block;aspect-ratio:4/3;background:#0b0710}
.vl-b img{display:block;width:100%;height:100%;object-fit:cover}
.vl-b em{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:rgba(10,6,14,.78);color:#fff;font-style:normal;font-family:var(--f-ui);font-size:.66rem}
.vl[aria-current] .vl-b::after{content:"▶";position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:6px;background:var(--c);color:#fff;font-size:.7rem}
.vl-t{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.vl-t b{font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.vl-t small{font-family:var(--f-ui);font-size:.64rem;color:var(--muted)}
.vl.kaputt{cursor:pointer;opacity:.7}
.vl.kaputt .vl-b::after{content:"↓";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:2rem}
.vl-mehr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.vl-mehr b{margin-right:8px;font-family:var(--f-ui);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vl-mehr a{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.85rem;text-decoration:none}
.vl-mehr a:hover{border-color:var(--c);color:var(--c)}
.vl-mehr small{font-family:var(--f-ui);font-weight:400;font-size:.64rem;color:var(--muted)}

/* Startseite: Sektionen */
.vk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;padding-block:40px 60px}
.vk{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:var(--shade);transition:transform .15s}
.vk:hover{transform:translateY(-3px)}
.vk-b{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:16/9;background:#0b0710}
.vk-b img{width:100%;height:100%;object-fit:cover}
.vk-b img:first-child{grid-row:span 2}
.vk-t{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.vk-t b{font-family:var(--f-disp);font-weight:800;font-size:1.3rem}
.vk-t span{color:var(--muted);font-size:.92rem}
.vk-t small{margin-top:auto;padding-top:6px;font-family:var(--f-ui);font-size:.7rem;letter-spacing:.08em;color:var(--c)}
@media (max-width:420px){.vk-raster{grid-template-columns:1fr}.vl-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Reiterleiste: „Videos“ vorne als Link zur Übersicht, sieht aus wie die Beschriftung bei den Downloads */
.ep-tabs.vt .wrap{gap:0}
.ep-tabs.vt a,.ep-tabs.vt [aria-current]{padding-inline:12px}
.ep-tabs.vt .vt-start,.ep-tabs.vt b{margin-right:10px;padding-left:0;font-family:var(--f-ui);font-weight:600;font-size:.8rem;letter-spacing:.1em;color:var(--c)}
.ep-tabs.vt .vt-start:hover{text-decoration:underline}