/* Videos auf der Startseite (seit 14.10.2026).
   Eigene Datei, weil die CSP (style-src 'self') keine Inline-Stile zulässt.
   Kopf: stummer Loop (media/hero-loop.*), darunter «See it in action» mit Steuerung. */

/* ── Loop im Kopfbereich ─────────────────────────────────────────── */
.hero-video{position:relative;margin:0 30px 28px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);aspect-ratio:16/9;
  background:#14171c url(../media/hero-loop.jpg?v=1) center/cover no-repeat}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover}
.hero-pause{position:absolute;right:12px;bottom:12px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(20,23,28,.72);color:#f2f4f7;
  font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;opacity:.75}
.hero-pause:hover,.hero-pause:focus-visible{opacity:1}
.hero-pause:focus-visible{outline:2px solid #6bb5ff;outline-offset:2px}

/* Bewegung reduzieren: statt des Loops steht das Poster (Hintergrund der Figur). */
@media (prefers-reduced-motion: reduce){
  .hero-video video:not([controls]){opacity:0}
  .hero-pause{display:none}
}

@media (max-width:680px){
  .hero-video{margin:0 22px 22px;border-radius:12px}
}

/* ── «See it in action» ──────────────────────────────────────────── */
.video-overview .video-frame{margin:18px 0 10px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:#14171c;aspect-ratio:16/9}
.video-overview video{display:block;width:100%;height:100%}
.video-overview .shot-caption a{color:inherit}

/* ── Seit 14.10.2026 abends: Übersicht als Startpunkt im Kopf (statt Loop + Zeiger) ── */
.hero-main{margin:30px 30px 8px;aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:none}
.hero-main video{aspect-ratio:16/9;height:auto;object-fit:contain;border-radius:14px;
  border:1px solid var(--border);background:#14171c}
.hero-cap{margin:8px 2px 0;font-size:12px;color:var(--faint);letter-spacing:.02em}
@media (max-width:680px){.hero-main{margin:22px 22px 6px}.hero-main video{border-radius:12px}}
/* Schlagzeile unter dem Video ruhiger: das Video ist der Einstieg (Albert, 14.10.2026). */
.panel .placard h1{font-size:clamp(26px,3vw,40px);line-height:1.08}
.panel .placard{padding-top:18px}