.cta-card__footnote {
  width: min(100%, 90rem);
  margin: 1.75rem auto 0;
  font-size: 0.75rem;
  line-height: 0.8rem;
}

.cta-card__wrapper{
  --cta-card-image-overflow-top: 0px;
  --cta-card-top-gap: 4rem;
  --cta-card-image-gap: 4rem;
  padding-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  margin-top: calc(var(--cta-card-top-gap) + var(--cta-card-image-overflow-top));
  margin-bottom: 4rem;
}

/* Wrapper mit Bild: Dynamische margin-bottom für Overflow */
.cta-card__wrapper--has-image {
  margin-bottom: calc(2rem + var(--cta-card-image-gap) + var(--cta-card-image-overflow, 0px));
  margin-top: 2rem;
}

.cta-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  /* Seitliches Padding skaliert stufenlos zwischen 6rem (ab 1280px, siehe Media
     Query unten) und 15rem (ab 1920px) statt hart zu springen. Ohne das war die
     volle 15rem schon direkt oberhalb von 1280px aktiv (z. B. 1440px-16:9-Laptops)
     und quetschte Bild+Text in zu schmale Spalten -> Card wirkte gestaucht/kurz. */
  padding: 4rem clamp(6rem, calc(22.5vw - 12rem), 15rem);
  overflow: visible;
  position: relative;
}

.cta-card__side-text {
  position: absolute;
  top: 50%;
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #1c1c1e;
  opacity: 0.45;
  white-space: nowrap;
  pointer-events: none;
}

.cta-card__side-text--left {
  left: 1rem;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.cta-card__side-text--right {
  right: 1rem;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

.cta-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-align: center;
  max-width: 640px;
  width: 100%;
}


.cta-card__text {
  width: 100%;
  padding-bottom: 0;
}

.cta-card__text div[style*="height"] {
  height: auto !important;
  overflow: visible !important;
}

.cta-card__text > *:first-child,
.cta-card__footnote > *:first-child {
  margin-top: 0;
}

.cta-card__text > *:last-child,
.cta-card__footnote > *:last-child {
  margin-bottom: 0;
}

.cta-card__title-underline {
  text-decoration: underline;
  text-decoration-color: var(--cta-card-title-underline-color, var(--global-title-underline-color, currentColor));
  text-decoration-thickness: var(--title-underline-thickness, 0.313rem);
  text-underline-offset: var(--title-underline-offset, 0.5rem);
}

.cta-card__header {
  margin: 0;
}

.cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.cta-card--no-image-left .cta-card__content {
  align-items: flex-start;
  text-align: left;
}

.cta-card--no-image-left .cta-card__buttons {
  justify-content: flex-start;
}

.cta-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.cta-card__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.cta-card__btn-icon svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
}

/* ===================================
   CTA Card – Mit Bild (side-by-side)
   Frame-Based Image Handling
   =================================== */

.cta-card--has-image {
  justify-content: center;
  align-items: stretch;
  gap: 5rem;
}

.cta-card--has-image .cta-card__content {
  justify-content: flex-start;
  flex: 1 1 calc((100% - 5rem) * 0.5);
  min-width: 0;
  max-width: none;
}

.cta-card--content_left .cta-card__content {
  align-items: flex-start;
  text-align: left;
}

.cta-card--content_left .cta-card__buttons {
  justify-content: flex-start;
}

.cta-card--content_right {
  flex-direction: row-reverse;
}

.cta-card--content_right .cta-card__content {
  align-items: flex-start;
  text-align: left;
}

.cta-card--content_right .cta-card__buttons {
  justify-content: flex-start;
}

/* 
   Image Wrapper: 
   - Positionierungskontext für absolutes Bild
   - Höhe wird durch Content bestimmt (align-items: stretch im Parent)
   - Overflow visible, damit Bild nach unten rausragen kann
*/
.cta-card__image-wrapper {
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

/* 
   Image Frame: 
   - Absolut positioniert → nimmt keinen Platz im Flow
   - Höhe = 100% vom Wrapper + Overflow
   - So bestimmt Content die Höhe, Bild ragt unten raus
*/
.cta-card__image-frame {
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--cta-card-image-radius, 1rem);
  /* KEIN position: relative hier! Im Cover-Modus ist das Medium position:absolute
     und der Frame hat keine eigene Breite -> als Bezugselement wuerde er das Bild
     auf 0 Breite kollabieren (Bilder verschwinden). Der Stop-Button ankert stattdessen
     am bereits positionierten .cta-card__image-wrapper (position: relative). */
}

/* Video verhaelt sich im Frame wie das Bild (teilt sich .cta-card__image-Regeln). */
.cta-card__video {
  border-radius: inherit;
}

/* ===================================
   Video-Stop-Button (WCAG 2.2.2)
   Stil wie der Hero-Playback-Button in der Mobilansicht: runder Icon-Button.
   =================================== */

.cta-card__playback.btn {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  gap: 0;
  border-radius: 999px;
}

.cta-card__playback-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.cta-card__playback-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.cta-card__playback-icon--play {
  display: none;
}

.cta-card__playback.is-paused .cta-card__playback-icon--pause {
  display: none;
}

.cta-card__playback.is-paused .cta-card__playback-icon--play {
  display: inline-flex;
}

.cta-card--has-image .cta-card__image-wrapper {
  flex: 0 0 calc((100% - 5rem) * 0.5);
  max-width: none;
}

/* Das Bild selbst: Füllt immer den Frame */
.cta-card__image {
  display: block;
  max-width: 100%;
  max-height: 35rem;
  border-radius: inherit;
  object-fit: var(--cta-card-image-fit, cover);
  object-position: center;
}

.cta-card--image-fit-cover .cta-card__image {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 32rem;
  max-height: 32rem;
}

/* Video im Cover-Modus fuellt den (per Flex gestreckten) Frame vollstaendig –
   unabhaengig von den Intrinsic-Dimensionen des Videos (Bilder liefern diese,
   ein noch nicht geladenes Video nicht -> sonst kollabiert/springt die Box). */
.cta-card--image-fit-cover .cta-card__video {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.cta-card--has-image .cta-card__image {
  width: 100%;
  max-width: none;
}

.cta-card--has-image.cta-card--image-fit-cover .cta-card__image {
  width: 100%;
}

/* Contain-Modus: Padding für Logos, zentriert */
.cta-card--image-fit-contain .cta-card__image-wrapper {
  align-items: center;
}

.cta-card--image-fit-contain .cta-card__image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.cta-card--image-fit-contain .cta-card__image {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 35rem;
  object-fit: contain;
}

@media (min-width: 1025px) {
  .cta-card--background-none:not(.cta-card--has-image) {
    padding: 0;
  }
}

/* ===================================
   Responsive
   =================================== */

@media (max-width: 1280px) {
  .cta-card--has-image {
    gap: 3rem;
  }

  .cta-card--has-image .cta-card__content {
    flex: 1 1 calc((100% - 3rem) * 0.5);
  }

  .cta-card--has-image .cta-card__image-wrapper {
    flex: 0 0 calc((100% - 3rem) * 0.5);
  }
}

@media (max-width: 1024px) {
  .cta-card__wrapper {
    --cta-card-image-gap: 2rem;
  }

  .cta-card--image-fit-cover .cta-card__image {
    max-height: 25rem;
    position: relative;
    top: 0;
    transform: none;
  }

  .cta-card {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .cta-card--background-color:not(.cta-card--has-image),
  .cta-card--background-gradient:not(.cta-card--has-image) {
    padding-top: 1rem;
  }

  .cta-card--background-none {
    padding: 0;
  }

  .cta-card__side-text {
    display: none;
  }

  .cta-card--has-image {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 1.5rem;
  }

  .cta-card--has-image:not(.cta-card--background-none) {
    gap: 1.5rem;
    padding-bottom: 0;
  }

  .cta-card--has-image .cta-card__content {
    align-items: center;
    text-align: center;
    max-width: 46rem;
    padding-top: 2rem;
  }

  .cta-card--has-image.cta-card--background-none .cta-card__content {
    padding-top: 0;
  }

  .cta-card--has-image .cta-card__buttons {
    gap: 1.5rem;
    justify-content: center;
  }

  .cta-card--content_right {
    flex-direction: column-reverse;
  }

  /* Mobile: Bild am unteren Rand – HubSpot vertical_offset wird ignoriert */
  .cta-card__image-wrapper {
    order: -1;
    width: min(100%, 38rem);
    max-width: 38rem;
    min-width: auto;
    transform: none !important;
    top: 0;
    display: block;
  }

  .cta-card__wrapper {
  --cta-card-image-overflow-top: 0px;
  --cta-card-top-gap: 2rem;
  --cta-card-image-gap: 2rem;
  padding-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  margin-top: calc(var(--cta-card-top-gap) + var(--cta-card-image-overflow-top));
  margin-bottom: 2rem;
}




  /* Fester 20px Overflow – überstimmt scoped HubSpot-CSS */
  .cta-card--has-image:not(.cta-card--background-none) .cta-card__image-wrapper {
    transform: translateY(20px) !important;
  }

  
  .cta-card__image-frame {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 4.5;
    max-height: 25rem;
    margin: 0 auto;
  }

  .cta-card--has-image:not(.cta-card--background-none) .cta-card__image-frame {
    width: 100%;
    max-height: none;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
  }

  .cta-card--has-image:not(.cta-card--background-none) .cta-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    transform: none;
  }

  .cta-card--has-image:not(.cta-card--background-none).cta-card--image-fit-contain .cta-card__image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .cta-card--has-image:not(.cta-card--background-none).cta-card--image-fit-contain .cta-card__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Fallback für Safari < 15: aspect-ratio nicht unterstützt */
  @supports not (aspect-ratio: 4 / 3) {
    .cta-card__image-frame,
    .cta-card--has-image:not(.cta-card--background-none) .cta-card__image-frame {
      height: 0;
      padding-top: 112.5%; /* 4/4.5 = 112.5% */
      aspect-ratio: unset;
      max-height: none;
    }
  }

}

@media (max-width: 768px) {
  .cta-card__wrapper {
    --cta-card-image-gap: 1.5rem;
  }

  .cta-card__buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .cta-card--has-image:not(.cta-card--background-none) {
    gap: 1.25rem;
  }

  .cta-card__wrapper {
    --cta-card-top-gap: 2rem;
  }

  .cta-card--background-none {
    padding: 0;
    margin-top: 2rem;
  }

}