/*
|--------------------------------------------------------------------------
| Content Section
|--------------------------------------------------------------------------
|
| Standard-Inhaltsbereich.
|
*/

.content-section {

    width: 100%;

}


/*
|--------------------------------------------------------------------------
| Abstände
|--------------------------------------------------------------------------
*/

.content-section-small {

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

}

.content-section-medium {

    margin-bottom: var(--spacing-8);

}

.content-section-large {

    margin-bottom: var(--spacing-10);

}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.content-section-header {

    margin-bottom: var(--spacing-5);

}

.content-section-title {

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

    color: var(--text-primary);

    font-size: clamp(
        1.75rem,
        3vw,
        2.5rem
    );

    font-weight: var(--font-weight-bold);

    line-height: 1.2;

}

.content-section-intro {

    margin: 0;

    max-width: 800px;

    color: var(--text-secondary);

    font-size: var(--font-size-lg);

    line-height: 1.7;

}


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

.content-section-content {

    width: 100%;

}


/*
|--------------------------------------------------------------------------
| Hintergrundvarianten
|--------------------------------------------------------------------------
*/

.content-section-background-none {

}

.content-section-background-light {

    padding: var(--spacing-6);

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

    background: var(--background-surface);

}

.content-section-background-dark {

    padding: var(--spacing-6);

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

    background: var(--background-surface-hover);

}