.cta-area__wrapper {
  --cta-area-image-overflow-top: 0px;
  --cta-area-top-gap: 0rem;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.cta-area__wrapper--has-image {
  margin-top: calc(2rem + var(--cta-area-top-gap) + var(--cta-area-image-overflow-top));
}

/* Desktop: Bild gesetzt, aber kein Hintergrund -> zusätzlicher oberer Abstand */
@media (min-width: 1025px) {
  .cta-area__wrapper--has-image-no-background {
    margin-top: calc(4rem + var(--cta-area-top-gap) + var(--cta-area-image-overflow-top));
  }
}

.cta-area {
  position: relative;
  width: 100%;
  overflow: visible;
  margin-bottom: 3rem;
}

.cta-area__footnote {
  max-width: 48rem;
  margin: 1rem auto 0;
  color: #5b554f;
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.75rem;
}

.cta-area__footnote :is(p, li, a, span, strong, em) {
  font-size: inherit;
  line-height: inherit;
}

.cta-area__inner {
  width: min(70rem, calc(100% - 4rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  padding: 2rem 0;
}

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

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

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

.cta-area__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-area__title-underline {
  text-decoration: underline;
  text-decoration-color: var(--cta-area-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-area__header {
  margin: 0;
}


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

.cta-area__text > *:first-child,
.cta-area__footnote > *:first-child {
  margin-top: 0;
}

.cta-area__text > *:last-child,
.cta-area__footnote > *:last-child {
  margin-bottom: 0;
}

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

.cta-area--no-image-left .cta-area__content {
  align-items: flex-start;
  text-align: left;
}

.cta-area--no-image-left .cta-area__buttons {
  justify-content: flex-start;
}

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

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

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

/* ===================================
   CTA area – Mit Bild (side-by-side)
   =================================== */


.cta-area--has-image {
  --cta-area-image-overflow: 11rem;
  --cta-area-image-gap: 3rem;
  padding: 6rem 0;
  margin-bottom: calc(var(--cta-area-image-overflow) + var(--cta-area-image-gap));
}

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

.cta-area--has-image .cta-area__inner {
  align-items: center;
  padding: 0;
  gap: clamp(2rem, 5vw, 5rem);
}

.cta-area--has-image .cta-area__content {
  justify-content: center;
  align-self: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.cta-area--content_left .cta-area__content {
  align-items: flex-start;
  text-align: left;
}

.cta-area--content_left .cta-area__buttons {
  justify-content: flex-start;
}

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

.cta-area--content_right .cta-area__content {
  align-items: flex-start;
  text-align: left;
}

.cta-area--content_right .cta-area__buttons {
  justify-content: flex-start;
}

.cta-area__image-wrapper {
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

.cta-area__image-frame {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--cta-area-image-radius, 1rem);
  position: relative; /* Anker fuer den Video-Stop-Button (cover-Modus ueberschreibt auf absolute, bleibt Containing Block) */
}

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

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

.cta-area__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-area__playback-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

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

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

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

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

.cta-area--has-image .cta-area__image-wrapper {
  flex: 0 1 clamp(18rem, 38vw, 32rem);
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.cta-area__image {
  display: block;
  max-width: 100%;
  max-height: 35rem;
  border-radius: inherit;
  object-fit: var(--cta-area-image-fit, cover);
}

.cta-area--image-fit-cover .cta-area__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.cta-area--has-image .cta-area__image {
  width: 100%;
  max-width: none;
}

.cta-area--has-image.cta-area--image-fit-cover .cta-area__image {
  width: 100%;
}

.cta-area--image-fit-cover .cta-area__image-frame {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: min(100%, clamp(18rem, 38vw, 32rem));
  aspect-ratio: 32 / 35;
}

.cta-area--image-fit-contain .cta-area__image-wrapper {
  align-items: center;
}

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

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

.cta-area--has-image.cta-area--image-fit-contain .cta-area__image {
  width: 100%;
}

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

@media (max-width: 1024px) {
  .cta-area {
    padding: 2.5rem 0;
    --cta-area-image-fit: cover;
  }

  .cta-area:not(.cta-area--has-image):not(.cta-area--background-none) {
    margin-bottom: 1rem;
  }

  .cta-area__wrapper--no-image-no-background {
    padding-bottom: 0;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  .cta-area--background-none:not(.cta-area--has-image) {
    padding: 0;
    margin-bottom: 0;
  }

  
  .cta-area__inner {
    width: min(calc(100% - (var(--layout-gutter-mobile) * 2)), var(--layout-max-width));
    padding: 0 2rem;
  }

  .cta-area--has-image {
    --cta-area-image-gap: 1.75rem;
    padding: 2.5rem 0 0;
    margin-bottom: calc(var(--cta-area-image-overflow) + var(--cta-area-image-gap));
  }

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

  .cta-area--has-image .cta-area__inner,
  .cta-area--content_right .cta-area__inner {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .cta-area--has-image:not(.cta-area--background-none) .cta-area__inner,
  .cta-area--content_right.cta-area--has-image:not(.cta-area--background-none) .cta-area__inner {
    gap: 1.5rem;
  }

  .cta-area__image {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin-top: 0;
    margin-bottom: 0;
    object-fit: cover;
  }

  .cta-area--image-fit-cover .cta-area__image-wrapper,
  .cta-area--image-fit-contain .cta-area__image-wrapper {
    align-items: center;
  }

  .cta-area--image-fit-cover .cta-area__image-frame,
  .cta-area--image-fit-contain .cta-area__image-frame {
    position: relative;
    top: auto; /* Desktop top: 50% entschärfen – Safari löst Prozent-Offsets anders auf */
    left: auto;
    transform: none; /* Desktop translateY(-50%) kappen */
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    overflow: visible;
    padding: 0;
  }

  .cta-area--image-fit-cover .cta-area__image,
  .cta-area--image-fit-contain .cta-area__image {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
  

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

  .cta-area--has-image .cta-area__content {
    align-items: center;
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
    order: 1;
  }

  .cta-area--has-image .cta-area__buttons {
    gap: 1.5rem;
    justify-content: center;
  }

  .cta-area--has-image .cta-area__image-wrapper {
    order: 2;
    transform: none;
    top: 0;
    width: 100%;
    max-width: 46rem;
    display: flex;
    margin-bottom: 0;
    flex: 0 0 auto; /* Desktop clamp()-Basis würde im Column-Layout zur Höhe – Safari-Bug bei min-height: auto */
    align-self: auto;
  }

  /* Safari-kompatibler Overflow: translateY statt negativem Margin */
  .cta-area--has-image:not(.cta-area--background-none) .cta-area__image-wrapper {
    display: block; /* Kein flex: aspect-ratio am Frame wirkt zuverlässig */
    width: min(100%, 38rem);
    max-width: 38rem;
    margin-bottom: 0;
    transform: translateY(2rem);
  }

  /* image-overflow auf Mobile = translateY-Wert des Wrappers */
  .cta-area--has-image:not(.cta-area--background-none) {
    --cta-area-image-overflow: 2rem;
  }

  .cta-area--has-image:not(.cta-area--background-none) .cta-area__image-frame {
    position: relative; /* Im Flow, damit der Wrapper Höhe bekommt */
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
    padding: 0;
  }

  .cta-area--has-image:not(.cta-area--background-none) .cta-area__image,
  .cta-area--has-image:not(.cta-area--background-none).cta-area--image-fit-cover .cta-area__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    transform: none;
  }

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

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

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

  .cta-area__wrapper {
    padding-bottom: 25px;
    margin-bottom: 4rem;
  }
}

@media (max-width: 768px) {

 .cta-area__wrapper {
    padding-bottom: 25px;
    margin-bottom: 0;
    margin-top: 2rem;
  }

  .cta-area--has-image {
    --cta-area-image-gap: 1rem;
  }

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

  .cta-area__inner {
    padding: 0;
  }

  .cta-area--has-image .cta-area__image-wrapper {
    max-width: 100%;
    padding-top: 0;
  }

  .cta-area--background-none.cta-area--has-image .cta-area__image {
    margin-bottom: 0;
  }

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