/* ══ Erklärvideo (16:9) ═══════════════════════════════════════════════════
   Ein großes Video je Leistungsseite (Google Ads, SEO, Website). Eigene Datei,
   damit style.css nicht angefasst werden muss. Poster zuerst, das Video lädt
   erst beim Klick (preload="none"). Bewusst nur Kopf + Video.
   ═══════════════════════════════════════════════════════════════════════ */

.ev{max-width:1040px;margin-inline:auto;padding:14px}
.ev::before,.ev::after{width:30px;height:30px;opacity:.45}

.ev__media{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);
  overflow:hidden;background:var(--ink);isolation:isolate;
  box-shadow:0 30px 60px -28px rgba(14,17,19,.42),0 0 0 1px var(--li)}
.ev__poster,.ev__vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.ev__vid{opacity:0;transition:opacity .3s var(--fed-weich)}
.ev__media.laeuft-ab .ev__vid{opacity:1}
.ev__media.laeuft-ab .ev__poster{opacity:0}
.ev__poster{transition:opacity .3s var(--fed-weich),transform .6s var(--fed-weich)}
.ev__media:hover .ev__poster{transform:scale(1.015)}

/* Der Startknopf deckt die ganze Fläche ab — Klick irgendwo aufs Bild startet */
.ev__start{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  border:0;padding:0;background:transparent;cursor:pointer;
  transition:opacity .25s var(--fed-weich)}
.ev__knopf{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:var(--ink);color:#fff;
  box-shadow:0 0 0 10px rgba(14,17,19,.12),0 14px 34px rgba(14,17,19,.38);
  transition:transform .25s var(--fed-weich),box-shadow .25s var(--fed-weich)}
.ev__knopf svg{width:30px;height:30px;margin-left:4px}
.ev__start:hover .ev__knopf,.ev__start:focus-visible .ev__knopf{transform:scale(1.07);
  box-shadow:0 0 0 14px rgba(14,17,19,.14),0 18px 40px rgba(14,17,19,.42)}
.ev__dauer{position:absolute;right:.9rem;bottom:.9rem;z-index:2;pointer-events:none;
  padding:.3rem .6rem;border-radius:var(--r-btn);background:rgba(14,17,19,.78);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;color:#fff;
  transition:opacity .25s var(--fed-weich)}
.ev__media.laeuft-ab .ev__start,.ev__media.laeuft-ab .ev__dauer{opacity:0;pointer-events:none}

/* Kleiner Hinweis im Hero: springt zum Video */
.ev-link{flex-basis:100%;display:inline-flex;align-items:center;gap:.6rem;width:max-content;
  margin-top:.35rem;font-size:.9375rem;font-weight:600;color:var(--tx);text-decoration:none}
.ev-link i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--li);background:var(--papier);
  transition:background .2s var(--fed-weich),color .2s var(--fed-weich),border-color .2s var(--fed-weich)}
.ev-link i svg{width:11px;height:11px;margin-left:2px}
.ev-link em{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;
  font-weight:400;color:var(--tx-mut)}
.ev-link:hover i{background:var(--ink);border-color:var(--ink);color:#fff}

@media (max-width:620px){
  .ev{padding:8px}
  .ev::before,.ev::after{width:20px;height:20px}
  .ev__knopf{width:54px;height:54px;
    box-shadow:0 0 0 6px rgba(14,17,19,.12),0 10px 24px rgba(14,17,19,.36)}
  .ev__knopf svg{width:20px;height:20px;margin-left:3px}
  .ev__dauer{right:.55rem;bottom:.55rem;padding:.15rem .45rem;font-size:.6875rem}
  .ev-link{justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .ev__poster,.ev__knopf{transition:none}
  .ev__media:hover .ev__poster{transform:none}
}