/*
 * YouTube facade — paired with ytfacade.js. Scoped to the classes the JS adds so
 * non-enhanced DOM is never touched. The loaded iframe absolute-fills the
 * position:relative facade card (inheriting its rounded corners) and sits above
 * the poster/overlay layers, which fade out once loaded.
 */
.ht-ytfacade {
  cursor: pointer;
}
.ht-ytfacade-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 2;
}
/* Once loaded, fade the static overlay layers (poster img, play button, badge,
   "Video laden" gradient/text) so only the iframe shows. */
.ht-ytfacade-loaded > :not(iframe) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ht-ytfacade-loaded > :not(iframe) {
    transition: none;
  }
}