.cta {
    --accents-z-index: -1;

    position: relative;
    overflow: hidden;

    z-index: 0;
}

.cta-content {
    padding-block: 6rem;
    padding-inline: 1rem;
}

@media screen and (min-width: 90rem) {
    .cta {
        width: var(--container-width);
        margin-inline: auto;
    }

    .cta-content {
        padding-block: 4.5rem;
        padding-inline: 4.5rem;
    }
}

.cta.cta--bg-primary {
    --color-text: var(--color-white);
    background-color: var(--color-primary);
}

.cta.cta--bg-secondary {
    --color-text: var(--color-white);
    background-color: var(--color-secondary);
}

.cta.cta--bg-danger {
    --color-text: var(--color-white);
    background-color: var(--color-danger);
}

.cta.cta--bg-dark {
    --color-text: var(--color-white);
    background-color: var(--color-dark);
}

.cta.cta--bg-blue-50 {
    background-color: var(--color-blue-50);
}

.cta.cta--radius-top-right {
    border-top-right-radius: 6.25rem;
}

.cta.cta--radius-top-left {
    border-top-left-radius: 6.25rem;
}

.cta.cta--radius-all {
    border-radius: 6.25rem;
}

/* Kreis top left und C+ bottom right */
.cta.cta--accents-type-1 .cta-accentholder-1::before {
    content: ' ';
    display: block;
    width: 10.625rem;
    aspect-ratio: 338 / 133;
    background-image: url('../../assets/images/accent-circle-primary-top.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    top: 0.1875rem;
    left: 0.5rem;
}

.cta.cta--accents-type-1 .cta-accentholder-2::before {
    content: ' ';
    display: block;
    height: 9rem;
    aspect-ratio: 195 / 150;
    background-image: url('../../assets/images/accent-c-plus-white.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    top: 13rem;
    right: 0;
}

@media screen and (min-width: 62rem) {
    .cta.cta--accents-type-1 .cta-accentholder-1::before{
        width: 21.0625rem;
        left: 3.75rem;
        top: 0;
    }

    .cta.cta--accents-type-1 .cta-accentholder-2::before {
        height: 12.5rem;
        bottom: 1rem;
        right: 1rem;
        top: unset;
    }
}

/* Kreis left bottom, Kreis right top, bottom right */
.cta.cta--accents-type-2 .cta-accentholder-1::before {
    content: ' ';
    display: block;
    height: 24.125rem;
    aspect-ratio: 152 / 386;
    background-image: url('../../assets/images/accent-circle-secondary-left.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    left: 0;
    bottom: 5.25rem;
}

.cta.cta--accents-type-2  .cta-accentholder-2::before {
    content: ' ';
    display: block;
    height: 14.6875rem;
    aspect-ratio: 92 / 235;
    background-image: url('../../assets/images/accent-circle-secondary-right.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    right: 0;
    top: 9.125rem;
}

@media screen and (min-width: 62rem) {
    .cta.cta--accents-type-2 .cta-accentholder-1::before {
        bottom: 0.5rem;
        height: 32.6875rem;
    }

    .cta.cta--accents-type-2 .cta-accentholder-2::before {
        top: 6.75rem;
    }

    .cta.cta--accents-type-2 .cta-accentholder-3::before {
        content: ' ';
        display: block;
        height: 10.125rem;
        aspect-ratio: 324 / 162;
        background-image: url('../../assets/images/accent-circle-secondary-bottom.svg');
        background-size: contain;
        background-repeat: no-repeat;

        position: absolute;
        z-index: var(--accents-z-index);
        bottom: 0;
        right: 10.5625rem;
    }
}

/* Kreis left top, A bottom center */
.cta.cta--accents-type-3 .cta-accentholder-1::before {
    content: ' ';
    display: block;
    width: 10.625rem;
    aspect-ratio: 338 / 133;
    background-image: url('../../assets/images/accent-circle-primary-top.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cta.cta--accents-type-3 .cta-accentholder-2::before {
    content: ' ';
    display: block;
    width: 6.8125rem;
    aspect-ratio: 300 / 113;
    background-image: url('../../assets/images/accent-a-primary-bottom.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 62rem) {
    .cta.cta--accents-type-3 .cta-accentholder-1::before{
        width: 23.375rem;
        left: 2rem;
        top: 0;
        transform: none;
    }

    .cta.cta--accents-type-3 .cta-accentholder-2::before {
        width: 15rem;
        left: 40%;
    }
}

/* Kreis left bottom, Kreis top right, C+ bottom right */
.cta.cta--accents-type-4 .cta-accentholder-1::before {
    content: ' ';
    display: block;
    height: 4.125rem;
    aspect-ratio: 338 / 133;
    background-image: url('../../assets/images/accent-circle-primary-top.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: var(--accents-z-index);
    top: 0;
    right: 0.5rem;
}

.cta.cta--accents-type-4  .cta-accentholder-2::before {
    content: ' ';
    display: block;
    height: 28.5625rem;
    aspect-ratio: 237 / 603;
    background-image: url('../../assets/images/accent-circle-primary-left.svg');
    background-size: contain;
    background-repeat: no-repeat;

    z-index: var(--accents-z-index);

    position: absolute;
    left:0;
    top: 50%;
    transform: translateY(-50%);
}

.cta.cta--accents-type-4 .cta-accentholder-3::before {
    content: ' ';
    display: block;
    height: 28.5625rem;
    aspect-ratio: 93 / 236;
    background-image: url('../../assets/images/accent-circle-primary-right.svg');
    background-size: contain;
    background-repeat: no-repeat;

    z-index: var(--accents-z-index);

    position: absolute;
    bottom: 1rem;
    right: 0;
}

@media screen and (min-width: 62rem) {
    .cta.cta--accents-type-4 .cta-accentholder-1::before {
        height: 8.25rem;
        right: 1.5rem;
    }

    .cta.cta--accents-type-4 .cta-accentholder-2::before {
        transform: none;
        top: unset;
        bottom: 2rem;
        height: 18.25rem;
    }

    .cta.cta--accents-type-4 .cta-accentholder-3::before {
        height: 8.375rem;
        aspect-ratio: 1 / 1;
        background-image: url('../../assets/images/accent-c-plus-white.svg');

        bottom: 0.8rem;
        right: 5rem;
    }
}