/* Erklärvideo „So läuft Ihr Umzug ab“ (06.10.2026)
   Sektion VIDEO auf Startseite, /umzug-muenster und allen Umzugs-Stadtseiten.
   Ohne JavaScript bleibt das native Video mit Bedienleiste stehen, der
   Play-Knopf erscheint erst mit .vid--js (assets/js/video.js). */

.vid{position:relative;max-width:1000px;margin:clamp(1.75rem,1.2rem + 2.2vw,3rem) auto 0;
  border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9;background:#F6F2EC;
  box-shadow:0 34px 70px -28px rgba(17,24,32,.32),0 2px 6px rgba(17,24,32,.06);outline:1px solid rgba(17,24,32,.06)}
.vid video{display:block;width:100%;height:100%;object-fit:cover}

.vid__start{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border:0;padding:0;background:transparent;cursor:pointer;color:var(--ink);font:inherit}
.vid--js .vid__start{display:flex}
.vid--js.laeuft .vid__start{display:none}
.vid__knopf{position:relative;width:clamp(64px,5vw + 40px,96px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(120deg,#FF8A3D,var(--accent) 55%,var(--accent-dk));display:grid;place-items:center;
  box-shadow:0 14px 30px -8px rgba(242,101,34,.55);transition:transform .35s var(--e-out)}
.vid__knopf::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(242,101,34,.45);
  animation:vidPuls 2.2s var(--e-out) infinite}
.vid__knopf svg{width:38%;height:38%;margin-left:7%;fill:#fff}
.vid__start:hover .vid__knopf{transform:scale(1.07)}
.vid__start:focus-visible{outline:none}
.vid__start:focus-visible .vid__knopf{outline:3px dashed var(--accent);outline-offset:14px}
.vid__info{background:rgba(255,255,255,.92);border-radius:var(--r-pill);padding:.45rem 1rem;
  font-weight:700;font-size:.95rem;box-shadow:0 4px 14px rgba(17,24,32,.08)}
.vid__info span{color:var(--muted);font-weight:600}
@keyframes vidPuls{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}

.vid__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}

@media (max-width:600px){
  .vid{border-radius:14px}
  .vid__info{display:none}
  .vid__knopf{width:58px}
  .vid__knopf::before{inset:-7px}
  .vid__cta .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.vid__knopf::before{animation:none}}