.rexx-cta-01 {
    --rexx-section-max: var(--rexx-width-container-narrow);

    text-align: left;
}

.rexx-cta-01__inner {
    width: min(
        calc(100% - (var(--rexx-page-padding) * 2)),
        var(--rexx-width-container-narrow)
    );
    margin-inline: auto;
}

.rexx-cta-01__surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(var(--rexx-space-xl), 6vw, var(--rexx-space-3xl));
    border-radius: var(--rexx-radius-md);
    background: var(--rexx-surface-color);
    box-shadow: var(--rexx-shadow-md);
}

.rexx-cta-01--color-soft .rexx-cta-01__surface {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--rexx-color-1) 30%, white) 0%,
        color-mix(in srgb, var(--rexx-color-1) 46%, white) 100%
    );
}

.rexx-cta-01--color-white .rexx-cta-01__surface {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        color-mix(in srgb, var(--rexx-color-1) 8%, white) 100%
    );
    border: 1px solid rgba(43, 43, 43, 0.08);
}

/* Dekorative Hintergrundstruktur für CTA-Farbflächen:
   dezente Lichtfläche oben links und Wellenmuster unten – angelehnt an die
   Gestaltung des Testimonial-Sliders. */
.rexx-cta-01--background-color .rexx-cta-01__surface::before,
.rexx-cta-01--background-color .rexx-cta-01__surface::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.rexx-cta-01--background-color .rexx-cta-01__surface::before {
    top: -8%;
    left: -3%;
    width: 320px;
    height: 220px;
    opacity: 0.34;
    background: radial-gradient(
        circle at 25% 25%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.35) 24%,
        rgba(255, 255, 255, 0) 68%
    );
    z-index: 0;
}

/* Sichtbare, aber ruhige Wellenlinien – bewusst nur auf Farb-CTAs.
   Zwei feine Konturlinien pro Ring erzeugen auf hellen Theme-Farben
   genug Kontrast; die Ebene bleibt hinter CTA-Text und Buttons. */
.rexx-cta-01--background-color .rexx-cta-01__surface::after {
    right: -12%;
    bottom: -85px;
    left: -12%;
    height: 220px;
    opacity: 0.58;
    background: repeating-radial-gradient(
        ellipse at 50% 100%,
        transparent 0,
        transparent 14px,
        color-mix(in srgb, var(--rexx-color-3) 29%, transparent) 15px,
        rgba(255, 255, 255, 0.85) 17px,
        transparent 20px
    );
    transform: rotate(-2deg);
    z-index: 0;
}

.rexx-cta-01__image,
.rexx-cta-01__overlay {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rexx-cta-01__image {
    object-fit: cover;
}

.rexx-cta-01--position-center .rexx-cta-01__image {
    object-position: center;
}

.rexx-cta-01--position-top-left .rexx-cta-01__image {
    object-position: left top;
}

.rexx-cta-01--position-top-center .rexx-cta-01__image {
    object-position: center top;
}

.rexx-cta-01--position-top-right .rexx-cta-01__image {
    object-position: right top;
}

.rexx-cta-01--position-center-left .rexx-cta-01__image {
    object-position: left center;
}

.rexx-cta-01--position-center-right .rexx-cta-01__image {
    object-position: right center;
}

.rexx-cta-01--position-bottom-left .rexx-cta-01__image {
    object-position: left bottom;
}

.rexx-cta-01--position-bottom-center .rexx-cta-01__image {
    object-position: center bottom;
}

.rexx-cta-01--position-bottom-right .rexx-cta-01__image {
    object-position: right bottom;
}

.rexx-cta-01__overlay {
    background: linear-gradient(
        90deg,
        rgba(25, 31, 35, 0.72) 0%,
        rgba(25, 31, 35, 0.45) 48%,
        rgba(25, 31, 35, 0.12) 100%
    );
}

.rexx-cta-01--overlay-light .rexx-cta-01__overlay {
    background: linear-gradient(
        90deg,
        rgba(25, 31, 35, 0.52) 0%,
        rgba(25, 31, 35, 0.3) 48%,
        rgba(25, 31, 35, 0.08) 100%
    );
}

.rexx-cta-01--overlay-strong .rexx-cta-01__overlay {
    background: linear-gradient(
        90deg,
        rgba(25, 31, 35, 0.88) 0%,
        rgba(25, 31, 35, 0.62) 58%,
        rgba(25, 31, 35, 0.18) 100%
    );
}

.rexx-cta-01__content {
    position: relative;
    z-index: 1;
    width: min(100%, 58rem);
    display: grid;
    justify-items: start;
    gap: var(--rexx-space-md);
}

.rexx-cta-01__eyebrow {
    color: var(--rexx-color-accent-strong);
}

.rexx-cta-01__headline {
    max-width: 20ch;
    color: var(--rexx-heading-color);
}

/* Opt-out vom bisherigen 20ch-Limit für lange Headline-Zeilen. */
.rexx-cta-01--headline-unlimited .rexx-cta-01__headline {
    max-width: none;
}

.rexx-cta-01__text {
    max-width: 62ch;
    color: var(--rexx-text-color);
}

.rexx-cta-01__text p + p {
    margin-block-start: var(--rexx-space-sm);
}

.rexx-cta-01__checklist {
    display: grid;
    gap: var(--rexx-space-sm);
    margin: 0;
    color: var(--rexx-text-color);
}

.rexx-cta-01__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rexx-space-md);
    margin-block-start: var(--rexx-space-xs);
}


/* Optionale Zentrierung – nur auf CTAs mit entsprechender Einstellung. */
.rexx-cta-01--align-center .rexx-cta-01__content {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
}

.rexx-cta-01--align-center .rexx-cta-01__headline,
.rexx-cta-01--align-center .rexx-cta-01__text {
    margin-inline: auto;
}

/* Die Checkliste wird als Ganzes zentriert; die einzelnen Haken und Texte
   bleiben für eine saubere Ausrichtung innerhalb der Liste linksbündig. */
.rexx-cta-01--align-center .rexx-cta-01__checklist {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
}

.rexx-cta-01--align-center .rexx-cta-01__buttons {
    justify-content: center;
}

/* CTA-Buttons: Schriftfarbe und Schriftart */
.rexx-cta-01 a.rexx-button.rexx-button--primary {
    color: #ffffff;
    font-family: var(--rexx-font-display);
}

.rexx-cta-01 a.rexx-button.rexx-button--secondary {
    color: var(--rexx-color-accent-strong);
    font-family: var(--rexx-font-display);
}

.rexx-cta-01 a.rexx-button.rexx-button--secondary:hover {
    color: var(--rexx-heading-color);
}

.rexx-cta-01 .rexx-button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--rexx-heading-color);
}

.rexx-cta-01--background-image .rexx-cta-01__content,
.rexx-cta-01--background-image .rexx-cta-01__eyebrow,
.rexx-cta-01--background-image .rexx-cta-01__headline,
.rexx-cta-01--background-image .rexx-cta-01__text,
.rexx-cta-01--background-image .rexx-cta-01__checklist {
    color: #ffffff;
}

.rexx-cta-01--background-image .rexx-cta-01__eyebrow {
    background: none;
    -webkit-text-fill-color: currentColor;
}

.rexx-cta-01--background-image .rexx-button--secondary {
    color: var(--rexx-color-accent-strong);
}

@media (max-width: 768px) {
    .rexx-cta-01__surface {
        padding: var(--rexx-space-xl) var(--rexx-space-lg);
        border-radius: var(--rexx-radius-sm);
    }

    .rexx-cta-01__content {
        gap: var(--rexx-space-sm);
    }

    .rexx-cta-01__buttons {
        gap: var(--rexx-space-sm);
    }
}

@media (max-width: 480px) {
    .rexx-cta-01__buttons {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .rexx-cta-01__buttons .rexx-button {
        width: 100%;
    }

    .rexx-cta-01--overlay-light .rexx-cta-01__overlay {
        background: linear-gradient(
            90deg,
            rgba(25, 31, 35, 0.7) 0%,
            rgba(25, 31, 35, 0.5) 100%
        );
    }
}