/* ─────────── Basis: Box-Titel ─────────── */
.customboxvideo-box h2 {
  font-size: clamp(1rem, 2.0vw, 2.5rem);
  margin: 0;
  font-weight: bold;
}

/* ─────────── Gesamt-Container ─────────── */
.customboxvideo-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.customboxvideo-content {
  width: 80vw;
  text-align: center;
}

/* ─────────── Titelbox ─────────── */
.customboxvideo-box {
  height: 65px;                  /* Desktop-Höhe  */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  color: #fff;
  font-weight: bold;

  /* Hintergrundgrafiken */
  background-image: url('../images/MPV_stars_background.svg'), url('../images/MPV_blue.svg');
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
  background-position: center;
}

/* ─────────── VIDEO-WRAPPER ─────────── */
/* 1) Normaler Wrapping-Div für <iframe> mit 16:9-Ratio            */
.customboxvideo-video {
  position: relative;
  width: 80vw;
  padding-top: 56.25%;           /* 16:9-Ratio */
  margin: 2rem auto 0;
  height: 0;                     /* Höhe kommt aus Padding-Hack */
}

/* 2) Eingebettetes <iframe> füllt den Wrapper komplett           */
.customboxvideo-video iframe {
  position: absolute;
  inset: 0;                      /* top/left/right/bottom: 0 */
  width: 100%;
  height: 100%;
  border: 0;
}

/* 3) Platzhalter-Variante OHNE Padding-Hack (damit keine Lücke)  */
.customboxvideo-video-placeholder {
  width: 80vw;
  margin: 2rem auto 0;
  background: #eee;
  border: 1px solid #ccc;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;        /* Breite inkl. Padding */
}

/* ─────────── Responsive Anpassungen ─────────── */
@media (max-width: 767px) {
  .customboxvideo-box h2 {
    font-size: 1.6rem;
    padding: .4rem;
    height: auto;               /* feste Höhe aufheben */
  }
  .customboxvideo-video {       /* 80 % Höhe eines 16:9-Wrappers */
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 2000px) {
  .customboxvideo-content,
  .customboxvideo-video,
  .customboxvideo-video-placeholder {
    width: 50vw;
  }
  .customboxvideo-video {       /* neues Ratio-Padding für 50 vw */
    aspect-ratio: 16 / 9;      /* 50 vw × 9 / 16 */
  }
}