/* =============================================================================
   CentaurNexus Website — Video-Detailseiten & Video-Hub (apps/website/videos/**).
   Bewusst SEPARAT von styles.css UND help.css gehalten (gleiche Begründung wie
   help.css selbst: mehrere Sessions bearbeiten den Working-Tree parallel — eine
   eigene Datei vermeidet Merge-Kollisionen). Nutzt NUR die :root-Variablen aus
   styles.css (Farben/Radien/Wrap), keine Klassen von dort außer .wrap/.btn/.acc/
   .eyebrow (generische, seit Langem stabile Bausteine).
   Einbinden NACH styles.css:  <link rel="stylesheet" href="assets/video/video.css">
   (Unterseiten:                <link rel="stylesheet" href="../assets/video/video.css">)
   ============================================================================= */

/* ---------- Sprach-Umschalter (DE/EN, echte Links auf die Schwester-URL) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px}
header .lang-switch{background:transparent;border-color:var(--line)}
.lang-switch a{font-weight:800;font-size:12.5px;letter-spacing:.04em;color:var(--muted);padding:6px 12px;border-radius:999px;transition:.2s}
.lang-switch a:hover{color:var(--petrol)}
.lang-switch a.active{background:var(--petrol);color:#fff}

/* ---------- Breadcrumb (analog hc-crumb aus help.css, eigenständig kopiert) ---------- */
.v-crumb{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.v-crumb .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px;font-size:13.5px;color:var(--muted)}
.v-crumb a{color:var(--petrol);font-weight:700}
.v-crumb a:hover{color:var(--petrol-soft)}
.v-crumb .sep{color:var(--line)}

/* ---------- Meta-Badges im subhero ---------- */
.v-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;position:relative}
.v-badge{font-size:12px;font-weight:800;letter-spacing:.03em;padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.12);color:#eafff0;border:1px solid rgba(255,255,255,.22)}
.v-badge.accent{background:rgba(212,255,0,.16);color:#eaffa8;border-color:rgba(212,255,0,.4)}

/* ---------- Layout der Detailseite ---------- */
.v-article{max-width:800px;margin:0 auto}
.v-article h2{font-size:24px;margin:38px 0 12px;font-weight:700}
.v-article h2:first-of-type{margin-top:0}
.v-article p{font-size:16.5px;color:var(--ink);margin-bottom:14px;line-height:1.7}
.v-lede{font-size:18px;color:#bcd4d5;max-width:680px;position:relative}

/* ---------- Video-Fassade (Poster + Klick-zum-Laden) ---------- */
.video-embed{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:var(--petrol-deep);border:1px solid var(--line);box-shadow:0 22px 50px -30px rgba(15,59,63,.5)}
.video-embed picture,.video-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(15,59,63,.06),rgba(8,30,32,.42));border:0;cursor:pointer;padding:0}
.video-play .disc{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);transition:transform .18s ease}
.video-play:hover .disc{transform:scale(1.07)}
.video-play .disc svg{margin-left:4px}
.video-play .dur{position:absolute;right:14px;bottom:14px;background:rgba(8,30,32,.78);color:#fff;font-weight:800;font-size:12.5px;padding:5px 10px;border-radius:7px;letter-spacing:.02em}
.video-embed.is-loaded .video-play{display:none}
.video-caption{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.6}

/* ---------- Problem / Aufgabe / Lösung ---------- */
.v-intro{display:grid;gap:14px;margin:22px 0 26px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.v-intro-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline}
.v-intro-row b{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-soft)}
.v-intro-row span{font-size:15.5px;color:var(--ink);line-height:1.6}
@media(max-width:620px){.v-intro-row{grid-template-columns:1fr}.v-intro-row b{margin-bottom:-6px}}

/* ---------- Namenshinweis (Video-Sprache vs. aktuelle Produktoberfläche) ---------- */
.v-namenote{font-size:13.5px;color:var(--muted);background:var(--bg-mint);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 26px;line-height:1.6}
.v-namenote b{color:var(--ink)}

/* ---------- CTA-Reihe ---------- */
.video-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}

/* ---------- Kapitel ---------- */
.v-chapters{list-style:none;display:grid;gap:9px;margin:0 0 26px}
.v-chapters li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ink)}
.v-chapters .t{flex:none;min-width:52px;font-weight:800;color:var(--petrol);font-variant-numeric:tabular-nums;font-size:13.5px;background:var(--bg-mint);border-radius:6px;padding:3px 7px;text-align:center}

/* ---------- Transkript (details/summary nutzt .acc aus styles.css) ---------- */
.v-transcript-list{list-style:none;display:grid;gap:14px}
.v-transcript-list li{display:grid;grid-template-columns:56px 1fr;gap:14px}
.v-transcript-list .t{font-weight:800;color:var(--petrol-soft);font-variant-numeric:tabular-nums;font-size:12.5px;padding-top:2px}
.v-transcript-list p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.7}
.v-transcript-paras{display:grid;gap:12px}
.v-transcript-paras p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.75}

/* ---------- Suchanfragen-Chips ---------- */
.query-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.query-chips li{font-size:13.5px;font-weight:600;color:var(--petrol-soft);background:var(--bg-mint);border:1px solid var(--line);border-radius:20px;padding:7px 14px}

/* ---------- Verwandte Seiten ---------- */
.v-related{margin-top:18px;border-top:1px solid var(--line);padding-top:22px}
.v-related h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--petrol-soft);margin-bottom:12px}
.v-related a{display:block;color:var(--petrol);font-weight:700;font-size:15px;margin-bottom:8px}
.v-related a:hover{color:var(--petrol-soft)}

/* ---------- Markenhinweis (Zscaler-Trademark, Fußzeile) ---------- */
.v-trademark{font-size:12px;color:#6f8384;line-height:1.6;margin-top:18px}

/* =============================================================================
   HUB (apps/website/videos/index.html + en/videos/index.html)
   ============================================================================= */
.video-filter{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.video-filter button{font-family:'Raleway';font-weight:700;font-size:14px;padding:9px 18px;border-radius:30px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.2s}
.video-filter button:hover{border-color:var(--petrol);color:var(--petrol)}
.video-filter button.active{background:var(--petrol);border-color:var(--petrol);color:#fff}

.video-group{margin-bottom:52px}
.video-group h2{font-size:clamp(24px,3vw,32px);margin-bottom:6px;font-weight:700}
.video-group .group-sub{color:var(--muted);font-size:15.5px;margin-bottom:24px}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.video-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.22s}
.video-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(15,59,63,.4);border-color:var(--petrol)}
.video-card .thumb{position:relative;aspect-ratio:16/9;background:var(--bg-mint);display:block}
.video-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-card .thumb .play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(15,59,63,.5)}
.video-card .thumb .dur{position:absolute;left:10px;bottom:10px;background:rgba(8,30,32,.78);color:#fff;font-weight:800;font-size:11.5px;padding:4px 8px;border-radius:6px}
.video-card .thumb .short-tag{position:absolute;left:10px;top:10px;background:var(--neon);color:var(--ink);font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.video-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.video-card h3{font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.35}
.video-card p{font-size:13.5px;color:var(--muted);margin:0;flex:1}
.video-card .go{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--petrol);display:inline-flex;align-items:center;gap:6px}
@media(max-width:980px){.video-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.video-grid{grid-template-columns:1fr}.v-intro{padding:18px}}