/* Video-Embed — 16:9-Container für native <video>, YouTube-<iframe> oder
   Consent-Overlay (<p> + <button>, wird per JS durch <iframe> ersetzt).

   Einsatzorte:
   - Property.render_videos()       — <div class="video-embed"><video|iframe></div>
   - Section/Video (Homepage)       — <figure><div class="video-embed" data-src>
                                        <p>…</p><button>…</button></div></figure>

   Wichtig: <video>/<iframe> werden absolut positioniert, damit ihre intrinsische
   Größe (z.B. 1920×1080) niemals den Container aufbläht. Für das Consent-Overlay
   bleibt der Container flex, damit <p> + <button> zentriert gestapelt werden. */

.video > header p {
  color: var(--color-text-muted);
  max-width: 40rem;
  margin-inline: auto;
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-inline: auto;
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.video-embed > video,
.video-embed > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-embed > p {
  margin: 0;
  padding-inline: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}