/* Container füllt Parent. Parent (Section/Column) braucht position:relative + (min-)height. */
.hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Nur das Video wird overscannt, nicht der Container/Poster */
.hover-video__overscan {
  position: absolute;
  width: 100%;  /* per inline überschrieben */
  height: 100%; /* per inline überschrieben */
  inset: 0;     /* per inline ggf. überschrieben */
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Das Video selbst */
.hover-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  pointer-events: none; /* Overlays bleiben klickbar */
}

/* Poster */
.hover-video__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .35s ease;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}
.hover-video.is-playing .hover-video__poster {
  opacity: 0;
}

/* Spinner */
.hover-video__spinner {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 26px;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 3;
  pointer-events: none;
}
.hover-video.is-loading .hover-video__spinner {
  opacity: 1;
}