.video-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: var(--border-radius-m, 4px);
  margin-inline: auto;
}

.video-card.orientation-widescreen {
  aspect-ratio: 16 / 9;
}

.video-card.orientation-vertical {
  aspect-ratio: 9 / 16;
}

/* Trigger button fills the entire box */
.video-card__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder wrapper is taken out of flex flow so the play pill centres cleanly */
.video-card__placeholder-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* bosch:image output fills the wrapper */
.video-card__placeholder-wrap .image {
  height: 100%;
  margin: 0;
}

.video-card__placeholder-wrap .image__media {
  height: 100%;
}

.video-card__placeholder-wrap img,
.video-card__placeholder-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay on placeholder image */
.video-card__placeholder-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.2s ease;
}

.video-card__placeholder-wrap--overlay-light::after {
  background: rgba(0, 0, 0, 0.2);
}

.video-card__placeholder-wrap--overlay-medium::after {
  background: rgba(0, 0, 0, 0.45);
}

.video-card__placeholder-wrap--overlay-dark::after {
  background: rgba(0, 0, 0, 0.65);
}

/* Frosted-glass pill play button — centered */
.video-card__play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-150, 12px);
  height: 44px;
  padding: 2px var(--spacing-300, 24px) 3px var(--spacing-250, 20px);
  border-radius: var(--border-radius-round, 1000px);
  background: rgba(235, 230, 225, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
  color: var(--trust, #550a2d);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.video-card__trigger:hover .video-card__play,
.video-card__trigger:focus-visible .video-card__play {
  background: rgba(235, 230, 225, 0.85);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.18);
}

/* Icon inherits trust colour */
.video-card__play .icon {
  color: var(--trust, #550a2d);
  flex-shrink: 0;
}

/* "Video Abspielen" label */
.video-card__play-label {
  font-family: 'Bosch Sans', sans-serif;
  font-weight: 700;
  font-size: var(--text-size-button-s, 18px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--trust, #550a2d);
}

/* Optional label chip — top-left */
.video-card__label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

/* Iframe: hidden behind the trigger */
.video-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

/* Active state: hide trigger, show iframe */
.video-card--playing .video-card__trigger {
  display: none;
}

.video-card--playing .video-card__iframe {
  display: block;
}