/*
|--------------------------------------------------------------------------
| Content CTA
|--------------------------------------------------------------------------
*/

.content-cta {

    padding: var(--spacing-8);

    border-radius: var(--radius-xl);

}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.content-cta-left {

    text-align: left;

}

.content-cta-center {

    text-align: center;

}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.content-cta-title {

    margin:
        0
        0
        var(--spacing-3);

}

.content-cta-text {

    max-width: 700px;

    margin:
        0
        auto;

}

.content-cta-left .content-cta-text {

    margin-left: 0;

}

.content-cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-3);

    margin-top: var(--spacing-6);

}

.content-cta-center .content-cta-actions {

    justify-content: center;

}


/*
|--------------------------------------------------------------------------
| Varianten
|--------------------------------------------------------------------------
*/

.content-cta-primary {

    background: var(--color-primary);

    color: #ffffff;

}

.content-cta-secondary {

    background: var(--color-secondary);

}

.content-cta-success {

    background: var(--color-success);

}

.content-cta-warning {

    background: var(--color-warning);

}

.content-cta-danger {

    background: var(--color-danger);

}

.content-cta-info {

    background: var(--color-info);

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .content-cta {

        padding: var(--spacing-6);

    }

    .content-cta-actions {

        flex-direction: column;

        align-items: stretch;

    }

}