/*
|--------------------------------------------------------------------------
| Startseite
|--------------------------------------------------------------------------
*/

.home-hero {
    margin-bottom: var(--spacing-12);

    border:
        var(--border-width)
        solid
        var(--border-color);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.16),
            rgba(15, 23, 42, 0.88)
        );

    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(8px);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.home-hero .content-hero-content {
    max-width: 900px;
}

.home-hero .content-hero-text {
    max-width: 820px;
}


/*
|--------------------------------------------------------------------------
| Versetzte Inhaltsbereiche
|--------------------------------------------------------------------------
*/

.home-content-block {
    width: 78%;
}

.home-content-block-left {
    margin-right: auto;
    margin-left: 0;
}

.home-content-block-right {
    margin-right: 0;
    margin-left: auto;

    text-align: right;
}

.home-content-block-right
.content-section-header {
    align-items: flex-end;
}

.home-content-block-right
.content-section-intro {
    margin-right: 0;
    margin-left: auto;
}

.home-content-block-right
.content-intro-inner {
    margin-right: 0;
    margin-left: auto;
}

.home-content-block-right
.content-cta-content {
    align-items: flex-end;
}

.home-content-block-right
.content-cta-actions {
    justify-content: flex-end;
}


/*
|--------------------------------------------------------------------------
| Event-Bereich
|--------------------------------------------------------------------------
*/

.home-events {
    margin-bottom: var(--spacing-12);
}

.home-event-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: var(--spacing-8);
}

.home-event-grid .card-event {
    height: 100%;
}


/*
|--------------------------------------------------------------------------
| Vereinsvorstellung
|--------------------------------------------------------------------------
*/

.home-about {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-12);

    padding:
        var(--spacing-10)
        var(--spacing-8);

    border:
        var(--border-width)
        solid
        var(--border-color);

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

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

.home-about .content-intro-content {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

    gap: var(--spacing-4);

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


/*
|--------------------------------------------------------------------------
| Neuigkeiten
|--------------------------------------------------------------------------
*/

.home-news-heading {
    margin-bottom: var(--spacing-8);
}

.home-news-grid {
    margin-bottom: var(--spacing-12);
}

.home-news-grid .content-news-preview-grid {
    gap: var(--spacing-8);
}

.home-news-grid .content-news-preview-item {
    height: 100%;

    padding: var(--spacing-8);

    border:
        var(--border-width)
        solid
        var(--border-color);

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

    background: var(--background-surface);

    text-align: right;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.home-news-grid .content-news-preview-item:hover {
    transform: translateY(-3px);

    border-color: var(--color-primary);

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

.home-news-grid .content-news-preview-body {
    padding-top: 0;
}


/*
|--------------------------------------------------------------------------
| Abschlussbereich
|--------------------------------------------------------------------------
*/

.home-cta {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);

    border:
        var(--border-width)
        solid
        var(--border-color);

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

    background:
        linear-gradient(
            135deg,
            var(--background-surface-hover),
            var(--background-surface)
        ) !important;

    box-shadow: var(--shadow-lg);
}

.home-cta .content-cta-content {
    padding:
        var(--spacing-10)
        var(--spacing-8);
}

.home-cta .content-cta-title {
    color: var(--text-primary);
}

.home-cta .content-cta-text {
    color: var(--text-secondary);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .home-content-block {
        width: 88%;
    }

    .home-event-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/*
|--------------------------------------------------------------------------
| Mobil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .home-hero {
        margin-bottom: var(--spacing-10);
    }

    .home-content-block {
        width: 100%;

        margin-right: 0;
        margin-left: 0;

        text-align: left;
    }

    .home-content-block-right
    .content-section-header {
        align-items: flex-start;
    }

    .home-content-block-right
    .content-section-intro {
        margin-right: 0;
        margin-left: 0;
    }

    .home-content-block-right
    .content-intro-inner {
        margin-right: 0;
        margin-left: 0;
    }

    .home-content-block-right
    .content-cta-content {
        align-items: stretch;
    }

    .home-content-block-right
    .content-cta-actions {
        justify-content: flex-start;
    }

    .home-events {
        margin-bottom: var(--spacing-10);
    }

    .home-event-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--spacing-6);
    }

    .home-about {
        margin-top: 0;
        margin-bottom: var(--spacing-10);

        padding:
            var(--spacing-8)
            var(--spacing-5);
    }

    .home-about .content-intro-content {
        align-items: stretch;

        flex-direction: column;

        gap: var(--spacing-3);

        margin-top: var(--spacing-5);
    }

    .home-about .content-intro-content .button {
        width: 100%;
    }

    .home-news-heading {
        margin-bottom: var(--spacing-6);
    }

    .home-news-grid {
        margin-bottom: var(--spacing-10);
    }

    .home-news-grid .content-news-preview-grid {
        gap: var(--spacing-6);
    }

    .home-news-grid .content-news-preview-item {
        padding: var(--spacing-6);

        text-align: left;
    }

    .home-cta {
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }

    .home-cta .content-cta-content {
        padding:
            var(--spacing-8)
            var(--spacing-5);
    }

}