/*
|--------------------------------------------------------------------------
| Grundlayout
|--------------------------------------------------------------------------
|
| Zentrale Layoutdefinitionen für das öffentliche Frontend.
|
| Seitenspezifische Layouts bleiben weiterhin in den jeweiligen
| CSS-Dateien der einzelnen Seiten.
|
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/*
|--------------------------------------------------------------------------
| Hauptinhalt
|--------------------------------------------------------------------------
*/

.main-content {
    flex: 1;
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding:
        var(--spacing-7)
        var(--spacing-7)
        var(--spacing-11);
}


/*
|--------------------------------------------------------------------------
| Allgemeine Container
|--------------------------------------------------------------------------
*/

.container {
    width: 100%;
    max-width: var(--layout-max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--spacing-7);
    padding-left: var(--spacing-7);
}

.container-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin-right: auto;
    margin-left: auto;
}

.container-text {
    width: 100%;
    max-width: var(--text-max-width);
}


/*
|--------------------------------------------------------------------------
| Allgemeine Seitenabschnitte
|--------------------------------------------------------------------------
*/

.page-section {
    width: 100%;
    margin-bottom: var(--spacing-10);
}

.page-section:last-child {
    margin-bottom: 0;
}

.section-header {
    margin-bottom: var(--spacing-7);
}

.section-header-center {
    max-width: var(--text-max-width);
    margin-right: auto;
    margin-bottom: var(--spacing-7);
    margin-left: auto;
    text-align: center;
}

.section-header-center .lead,
.section-header-center .section-description {
    margin-right: auto;
    margin-left: auto;
}


/*
|--------------------------------------------------------------------------
| Allgemeine Raster
|--------------------------------------------------------------------------
*/

.layout-grid {
    display: grid;
    gap: var(--spacing-6);
}

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

.layout-grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.layout-grid-4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Flex-Hilfsklassen
|--------------------------------------------------------------------------
*/

.layout-flex {
    display: flex;
}

.layout-flex-wrap {
    flex-wrap: wrap;
}

.layout-align-center {
    align-items: center;
}

.layout-justify-between {
    justify-content: space-between;
}

.layout-justify-center {
    justify-content: center;
}

.layout-gap-small {
    gap: var(--spacing-3);
}

.layout-gap-medium {
    gap: var(--spacing-5);
}

.layout-gap-large {
    gap: var(--spacing-7);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-index-header);

    background: var(--background-header);
    border-bottom:
        var(--border-width)
        solid
        var(--border-color);

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: var(--layout-max-width);

    margin: 0 auto;
    padding:
        var(--spacing-4)
        var(--spacing-7);

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

.site-logo {
    flex-shrink: 0;

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.site-logo a {
    color: inherit;
    text-decoration: none;
}

.site-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

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

.site-navigation a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--transition-base),
        opacity var(--transition-base);
}

.site-navigation a:hover {
    color: var(--text-link-hover);
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Benutzerbereich im Header
|--------------------------------------------------------------------------
*/

.header-user {
    display: flex;
    align-items: center;
    flex-shrink: 0;

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

.header-user a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--transition-base),
        opacity var(--transition-base);
}

.header-user a:hover {
    color: var(--text-link-hover);
    opacity: 1;
}

.header-username {
    font-weight: var(--font-weight-bold);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    margin-top: auto;

    background: var(--background-footer);
    border-top:
        var(--border-width)
        solid
        var(--border-color);
}

.footer-inner {
    width: 100%;
    max-width: var(--layout-max-width);

    margin: 0 auto;
    padding:
        var(--spacing-5)
        var(--spacing-7);

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Bestehende Seitenkarte
|--------------------------------------------------------------------------
|
| Die vorhandene Klasse bleibt erhalten und kann weiterhin auf allen
| bisherigen Seiten verwendet werden.
|
*/

.page-card {
    min-height: 120px;

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

    background: var(--background-surface);
    border:
        var(--border-width)
        solid
        var(--border-color);
    border-radius: var(--radius-xl);

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

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.page-card:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Seitenüberschrift
|--------------------------------------------------------------------------
*/

.page-header {
    margin-bottom: var(--spacing-7);
}


/*
|--------------------------------------------------------------------------
| Dropdown-Menüs
|--------------------------------------------------------------------------
*/

.nav-dropdown {
    position: relative;
}

.dropdown-trigger {
    cursor: pointer;
    user-select: none;
}

.dropdown-trigger::after {
    content: " ▼";

    margin-left: var(--spacing-1);

    font-size: 0.7em;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-index-dropdown);

    display: none;

    min-width: 240px;
    padding: var(--spacing-2);

    background: var(--background-surface-strong);
    border:
        var(--border-width)
        solid
        var(--border-color-primary);
    border-radius: var(--radius-xl);

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

    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

.dropdown-menu a {
    display: block;

    padding:
        var(--spacing-3)
        var(--spacing-4);

    color: inherit;
    white-space: nowrap;
    text-decoration: none;

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

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

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
    color: var(--text-link);
    background: rgba(96, 165, 250, 0.15);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    display: block;
}


/*
|--------------------------------------------------------------------------
| Bilder und Medien
|--------------------------------------------------------------------------
*/

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}


/*
|--------------------------------------------------------------------------
| Responsive Anpassungen
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    .header-inner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .site-navigation {
        order: 3;
        width: 100%;
        gap:
            var(--spacing-4)
            var(--spacing-7);
    }

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

@media (max-width: 900px) {
    .layout-grid-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 768px) {
    .main-content {
        padding:
            var(--spacing-6)
            var(--spacing-4)
            var(--spacing-9);
    }

    .container {
        padding-right: var(--spacing-4);
        padding-left: var(--spacing-4);
    }

    .header-inner {
        padding:
            var(--spacing-4)
            var(--spacing-4);
    }

    .footer-inner {
        padding:
            var(--spacing-5)
            var(--spacing-4);
    }

    .site-navigation {
        gap:
            var(--spacing-3)
            var(--spacing-5);
    }

    .layout-grid-2,
    .layout-grid-3,
    .layout-grid-4 {
        grid-template-columns: 1fr;
    }

    .page-section {
        margin-bottom: var(--spacing-8);
    }

    .page-card {
        padding: var(--spacing-5);
    }

    .dropdown-menu {
        min-width: 210px;
    }
}

@media (max-width: 520px) {
    .header-inner {
        display: block;
    }

    .site-logo {
        margin-bottom: var(--spacing-4);
    }

    .site-navigation {
        display: block;
    }

    .nav-dropdown {
        margin-bottom: var(--spacing-3);
    }

    .dropdown-menu {
        position: static;

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

        box-shadow: none;
    }

    .header-user {
        margin-top: var(--spacing-4);
    }
}