.hwt-vib {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 5em;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  background: transparent linear-gradient(90deg, rgba(0, 0, 0, 1) 70%, rgb(24 0 63) 100%) 0% 0% no-repeat padding-box; border-radius: 3.125em;
  padding: 2em 3em;
}

.hwt-vib__media {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}

.hwt-vib__video,
.hwt-vib__poster {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0; 
}

.hwt-vib__poster[hidden] {
  display: none !important;
}

.hwt-vib__aside {

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  box-sizing: border-box;
}

.hwt-vib__box {
  position: relative;
  background: transparent linear-gradient(90deg, rgb(26 23 36) 0%, rgb(49 25 86) 100%) 0% 0% no-repeat padding-box;
  color: #fff;
  padding: 2em 3em;
  border-radius: 1.75em;
  backdrop-filter: blur(3.125em);
-webkit-backdrop-filter: blur(3.125em);
  box-shadow: 0.1875em 0.1875em 1.25em #1F102EB2;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hwt-vib__icon {
  flex: 0 0 auto;
  width: 2.1875em;
  height: 2.1875em;
  margin-bottom: 2.5em;
}

.hwt-vib__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hwt-watch {
 
}

.hwt-vib__box h3 {
  margin: 0 0 0.5em;
  font-size: 1.2em;
  margin-bottom: 1.5em;
  font-weight: bold;
}

.hwt-vib__box p {
  margin: 0;
 
  color: #C7BDD1;
}

.hwt-vib__controls {
  position: absolute;
  bottom: 1em;
  right: 3em;
  display: flex;
  gap: 0.75em;
}

.hwt-vib__btn {
  background: none;
  width: 2.5em;
  height: 2.5em;
  border: none;
  cursor: pointer;
  border-radius: 624.9375em;
  border: 1px solid #FFF;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30%;
   transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  opacity: 0.4;
}

.hwt-vib__btn {
  background-image: url('../img/HUSL-UI-Pause.svg');
}

.hwt-vib__btn[aria-pressed="true"]  {
  background-image: url('../img/HUSL-UI-Play.svg');
}

.hwt-vib__btn--skip {
  background-image: url('../img/HUSL-UI-Skip.svg'); 
}

.hwt-vib__btn--skip.is-repeat {
  background-image: url('../img/HUSL-UI-Repeat.svg');
}
.hwt-vib__btn--skip {
  background-size: 40%;
}
.hwt-vib__btn:hover {
  opacity: 0.8;
}
/* Wenn das Video zu Ende ist → Video aus, Poster an */
.is-ended .hwt-vib__video {
  display: none !important;
}
.is-ended .hwt-vib__poster {
  display: block !important;
}