.knorpel-video-consent {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 260px;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #eef3f6;
  color: #263746;
  margin-block: clamp(24px, 3vw, 48px);
}

.fusion-video.knorpel-video-consent-host {
  --awb-max-width: 100%;
  --awb-max-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin-block: clamp(24px, 3vw, 48px) !important;
}

/*
 * Avada sections on knorpel.at use up to 150px of bottom padding. Together
 * with the video and column margins this produced more than 200px of empty
 * space below a video. Keep the deliberate video and column spacing, but
 * remove the section's own additional bottom padding.
 */
.fusion-fullwidth:has(.knorpel-video-consent) {
  padding-bottom: 0 !important;
}

.fusion-video.knorpel-video-consent-host .video-shortcode,
.fusion-video.knorpel-video-consent-host .fluid-width-video-wrapper {
  width: 100% !important;
  max-width: none !important;
}

.fluid-width-video-wrapper > .knorpel-video-consent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  margin-block: 0;
}

.knorpel-video-consent__placeholder {
  box-sizing: border-box;
  width: min(100%, 720px);
  padding: 28px;
  text-align: center;
}

.knorpel-video-consent__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
}

.knorpel-video-consent__placeholder p {
  margin: 0 0 16px;
}

.knorpel-video-consent__button {
  padding: 12px 20px;
  border: 0;
  border-radius: 3px;
  background: #415671;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.knorpel-video-consent__button:hover,
.knorpel-video-consent__button:focus-visible {
  background: #2f4158;
}

.knorpel-video-consent__button:focus-visible {
  outline: 3px solid #6bcdfd;
  outline-offset: 3px;
}

.knorpel-video-consent--loaded {
  display: block;
  background: transparent;
}

.knorpel-video-consent iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

iframe[src*="ypo.education"] {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 7 / 4;
  border: 0;
}

@media (max-width: 767px) {
  /* An unloaded notice needs its content height, not the video's ratio. */
  .knorpel-video-consent:not(.knorpel-video-consent--loaded) {
    aspect-ratio: auto;
  }

  .fluid-width-video-wrapper:has(> .knorpel-video-consent:not(.knorpel-video-consent--loaded)) {
    padding-top: 0 !important;
    height: auto !important;
  }

  .fluid-width-video-wrapper > .knorpel-video-consent:not(.knorpel-video-consent--loaded) {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 210px;
  }
}

@media (max-width: 480px) {
  .knorpel-video-consent {
    min-height: 210px;
  }

  .knorpel-video-consent__placeholder {
    padding: 12px;
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .knorpel-video-consent__title {
    margin-bottom: 6px;
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .knorpel-video-consent__placeholder p {
    margin-bottom: 10px;
  }

  .knorpel-video-consent__button {
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.2;
  }
}