/* Rolle-zu-Rolle: breite Medienmodule in beiden Sprachen. Produktkarten bleiben
   in ihren bestehenden Spalten und behalten ihren eigenen Bildausschnitt. */
.secondary-page.secondary-layout #inhalt > .r2r-wide-media.section.outer {
  padding-inline: clamp(20px, 4vw, 96px) !important;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.section.outer > .row {
  width: 100% !important;
  max-width: 1760px !important;
}

@media (min-width: 701px) {
  .secondary-page.secondary-layout #inhalt > .r2r-wide-media:not(.detail-film) .detail-image img {
    max-height: 760px;
  }

  .secondary-page.secondary-layout #inhalt > .r2r-wide-media .detail-diagram img {
    max-height: 600px;
  }
}

/* Das CTA-Motiv ist eine transparente Grafik über dem laufenden Farbfilm. */
.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film {
  position: relative;
  padding-top: clamp(32px, 4vw, 96px) !important;
  background: #fff;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film > .section-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film > .row {
  position: static;
  width: calc(100% - 48px) !important;
  max-width: 1712px !important;
  padding-block: clamp(56px, 6vw, 110px);
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film .widget-heading h2 {
  max-width: 13ch;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film > .row > .column:has(.widget-image img) {
  position: absolute !important;
  z-index: 2;
  top: clamp(64px, 6vw, 140px) !important;
  right: clamp(32px, 8vw, 180px) !important;
  left: auto !important;
  width: min(31vw, 580px) !important;
  margin: 0;
  padding: 0;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film .widget-image .image-link {
  overflow: visible !important;
  background: transparent !important;
}

.secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film .widget-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

@media (max-width: 700px) {
  .secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film > .section-video {
    height: clamp(260px, 75vw, 380px);
  }

  .secondary-page.secondary-layout #inhalt > .r2r-wide-media.detail-film > .row > .column:has(.widget-image img) {
    top: clamp(56px, 14vw, 96px) !important;
    right: clamp(20px, 6vw, 36px) !important;
    width: min(55vw, 264px) !important;
  }
}