/* ==========================================================================
   Video-Fassade: Zwei-Klick-Einbettung fuer Wistia.

   Bis jemand klickt, liegt hier nur ein lokales Vorschaubild und es geht
   KEIN Request an Wistia. Erst der Klick laedt den Player nach. Das haelt
   die Seite ohne Consent-Banner sauber, denn vorher fliessen keine Daten,
   und es spart beim ersten Rendern mehrere fremde iframes.

   Eigene Datei, weil / (Inline-CSS) und die generierten Seiten (page.css)
   dieselbe Fassade brauchen. Zwei Kopien waeren die naechste Stelle, an der
   ein Fix nur in einer davon landet.

   Setzt die Tokens aus page.css bzw. dem Inline-CSS der Startseite voraus
   (--schwarz, --weiss, --radius, --ring, --sh-1, --t-int, --ease).
   ========================================================================== */

.vframe{
  position:relative;aspect-ratio:16/9;
  background:var(--schwarz);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ring),var(--sh-1);
}
.vframe img,.vframe iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.vframe img{object-fit:cover}

/* Der ganze Kasten ist der Knopf, nicht nur das Dreieck. */
.vplay{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;background:transparent;cursor:pointer;
}
.vplay::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,28,28,.1),rgba(26,28,28,.45));
  transition:background var(--t-int) var(--ease);
}
.vplay:hover::before{background:linear-gradient(180deg,rgba(26,28,28,.2),rgba(26,28,28,.6))}
/* Weisser Kreis mit schwarzem Dreieck. Wistias eigener Knopf ist blau, und
   diese Marke hat keine Signalfarbe (DT-DESIGN.md L113). */
.vplay i{
  position:relative;display:grid;place-items:center;
  width:66px;height:66px;border-radius:50%;
  background:var(--weiss);box-shadow:0 6px 22px -6px rgba(26,28,28,.6);
  transition:transform var(--t-int) var(--ease);
}
.vplay:hover i{transform:scale(1.07)}
.vplay svg{margin-left:3px}
.vplay span{
  position:absolute;left:16px;bottom:14px;
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--weiss);text-shadow:0 1px 3px rgba(26,28,28,.7);
}
@media(max-width:520px){
  .vplay i{width:56px;height:56px}
  .vplay span{font-size:.6875rem;left:12px;bottom:11px}
}

.vhinweis{font-size:.75rem;line-height:1.5;color:var(--text-mute);margin-top:10px}

@media (prefers-reduced-motion: reduce){
  .vplay i,.vplay::before{transition:none}
  .vplay:hover i{transform:none}
}