/* Individualdesign für Demo 2. */
:root {
    --demo2-gutter: clamp(.55rem, 1.9vw, 1.5rem);
    --demo2-column: min(1120px, calc(100% - 2 * var(--demo2-gutter)));
    --demo2-ink: #073b68;
    --demo2-border: #c5e1f3;
    --sfp-page-bg: #e3f3fa;
    --sfp-header-symbol-display: block;
    --sfp-header-symbol-size: clamp(1.85rem, 10cqi, 7rem);
    --sfp-menu-bg: #054571;
    --sfp-menu-text: #fff;
    --sfp-list-even: #f7fbfe;
    --sfp-list-odd: #e9f5fc;
    --sfp-details-bg: #e9f5fc;
    --color-accent-50: #f3faff;
    --color-accent-100: #e3f3fd;
    --color-accent-200: #c5e1f3;
    --color-accent-300: #9dceee;
    --color-accent-500: #0877af;
    --color-accent-600: #056393;
    --color-accent-700: #054571;
}

.sfp-site-v2.programm {
    background:
        url("../images/untergrund.svg") center bottom / 100% clamp(15rem, 35vw, 30rem) no-repeat,
        url("../images/himmel.svg") center top / 100% clamp(18rem, 34vw, 37rem) no-repeat,
        var(--sfp-page-bg);
}

.sfp-site-v2 .sfp-site {
    width: 100%;
    padding-block: 0 var(--demo2-gutter);
    gap: clamp(.65rem, 1vw, 1.2rem);
}

.sfp-site-v2 .sfp-site > :is(nav, main, footer),
.sfp-site-v2 .sfp-site-header__bar {
    box-sizing: border-box;
    width: var(--demo2-column);
    margin-inline: auto;
    container: sfp-site / inline-size;
}

.sfp-site-v2 .sfp-site-header {
    position: relative;
    isolation: isolate;
    padding-block-start: clamp(.5rem, 1vw, 1.1rem);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sfp-site-v2 .sfp-site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("../images/sfp-himmel-mit-gruen.webp") center / 100% 100% no-repeat;
    mask-image: linear-gradient(black 61%, transparent);
}

.sfp-site-v2 .sfp-site-header__bar,
.sfp-site-v2 .menu_rahmen,
.sfp-site-v2 main,
.sfp-site-v2 footer {
    border: 1px solid var(--demo2-border);
    border-radius: clamp(.8rem, 1.55vw, 1.5rem);
    background: #f9fcff;
}

.sfp-site-v2 .sfp-site-header__bar {
    position: relative;
    z-index: 2;
    padding: clamp(.45rem, .65vw, .7rem) clamp(.5rem, 1.45vw, 1.5rem);
    background: rgb(249 252 255 / .91);
}

.sfp-site-v2 .sfp-site-brand__mark {
    max-inline-size: none;
    aspect-ratio: 598 / 405;
    background: url("../images/demo2-logo.png") center / contain no-repeat;
}

.sfp-site-v2 .sfp-site-brand__mark svg {
    display: none;
}

.sfp-site-v2 .sfp-site-brand__text {
    padding-inline-start: clamp(.3rem, 1.5cqi, 1.8rem);
    border-inline-start: 1px solid #659cc6;
}

.sfp-site-v2 .sfp-site-brand__label {
    font-size: clamp(.7rem, 1.35cqi, 1.35rem);
}

.sfp-site-v2 .sfp-site-brand strong {
    color: var(--demo2-ink);
    font-size: clamp(1rem, 3cqi, 3rem);
}

.sfp-site-v2 .sfp-site-logins .loginLink {
    min-block-size: clamp(2.75rem, 4cqi, 3.8rem);
    font-size: clamp(.875rem, 1.35cqi, 1.25rem);
}

.sfp-site-v2 .sfp-site-header__image {
    --demo2-kids-width: min(1080px, calc(100cqi - 2 * var(--demo2-gutter)));
    /* Align the wave with the forearms at row 410 of the 1200 × 440 PNG. */
    --demo2-kids-base: calc(var(--demo2-kids-width) * 410 / 1200);
    --demo2-wave-height: clamp(3.5rem, 11cqi, 10rem);
    --demo2-wave-drop: clamp(0px, 2cqi - 28px, 3px);
    position: relative;
    block-size: calc(var(--demo2-kids-base) + var(--demo2-wave-height) * .56 + var(--demo2-wave-drop));
    aspect-ratio: auto;
    border-radius: 0;
    background:
        url("../images/demo2-kinderbanner.webp?v=1") center top / var(--demo2-kids-width) auto no-repeat,
        url("../images/demo2-welle.svg?v=4") center bottom / 100% var(--demo2-wave-height) no-repeat;
}

.sfp-site-v2 .menu_rahmen {
    padding: clamp(.45rem, 1.15cqi, 1.05rem);
}

.sfp-site-v2 #menNav > #nav {
    flex: 1 1 auto;
    gap: clamp(.35rem, .65cqi, .75rem);
}

.sfp-site-v2 #menNav #nav > li > a {
    display: flex;
}

.sfp-site-v2 #nav li > a,
.sfp-site-v2 #nav li > button[data-site-menu-disclosure],
.sfp-site-v2 #nav li > details > summary[data-site-menu-summary] {
    min-block-size: clamp(2.75rem, 3.9cqi, 3.75rem);
    padding-inline: clamp(.65rem, 1cqi, 1rem);
    border: 1px solid var(--demo2-border);
    border-radius: clamp(.65rem, 1.2cqi, 1.15rem);
    background: linear-gradient(#fafdff, #e7f3fb);
    color: var(--demo2-ink);
    font-size: clamp(.95rem, 1.17cqi, 1.125rem);
    font-weight: 700;
}

.sfp-site-v2 #nav li > a:hover,
.sfp-site-v2 #nav li > button[data-site-menu-disclosure]:hover,
.sfp-site-v2 #nav li > details > summary[data-site-menu-summary]:hover {
    background: #dbeffa;
}

.sfp-site-v2 #nav li > a.aktiv,
.sfp-site-v2 #nav li > button[data-site-menu-disclosure].aktiv,
.sfp-site-v2 #nav li > details > summary[data-site-menu-summary].aktiv {
    border-color: #066697;
    background: linear-gradient(#087cb4, #056697);
    color: #fff;
}

.sfp-site-v2 #menNav .site-menu-toggle {
    border: 1px solid var(--demo2-border);
    border-radius: .75rem;
    background: #e9f5fc;
    color: var(--demo2-ink);
    font-weight: 700;
}

.sfp-site-v2 #menNav > .sfp-site-cart {
    --sfp-cart-ink: var(--demo2-ink);
    --sfp-cart-border: #a7d4f1;
    --sfp-cart-surface: #d9effd;
    min-block-size: clamp(2.75rem, 3.9cqi, 3.75rem);
    margin-inline-start: auto;
}

.sfp-site-v2 main {
    background: #fff;
}

.sfp-site-v2 main .sfp-page-content {
    font-size: clamp(.95rem, 1.2cqi, 1.2rem);
}

.sfp-site-v2 main .sfp-page-content > :is(h1, h2, h3) {
    color: var(--demo2-ink);
}

/* Decorative icons work on the native disclosures and the enhanced V2 buttons. */
@supports (mask-image: url("")) {
    .sfp-site-v2 #nav {
        --demo2-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 11 10-8 10 8M5 10v11h5v-7h4v7h5V10'/%3E%3C/svg%3E");
        --demo2-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18M7 15h2m4 0h2m-8 3h2'/%3E%3C/svg%3E");
        --demo2-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6m0-10v.01'/%3E%3C/svg%3E");
        --demo2-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2m20 0v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M17 3a4 4 0 0 1 0 8'/%3E%3C/svg%3E");
        --demo2-icon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8' cy='9' r='1.5'/%3E%3Cpath d='m21 16-5-5-5 5-2-2-6 5'/%3E%3C/svg%3E");
        --demo2-icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 6C9 3 5 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-3-1-7-1-10 2v15'/%3E%3C/svg%3E");
        --demo2-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
        --demo2-nav-icon: var(--demo2-icon-book);
    }

    .sfp-site-v2 #nav > li > a[href="./"] { --demo2-nav-icon: var(--demo2-icon-home); }
    .sfp-site-v2 #nav > li > a[href="fotogalerie"] { --demo2-nav-icon: var(--demo2-icon-photo); }
    .sfp-site-v2 #nav > li > a[href="kontakt"] { --demo2-nav-icon: var(--demo2-icon-mail); }
    .sfp-site-v2 #nav > li > button[aria-controls="submenu-programmheft"],
    .sfp-site-v2 #nav > li > details:has(> #submenu-programmheft) { --demo2-nav-icon: var(--demo2-icon-calendar); }
    .sfp-site-v2 #nav > li > button[aria-controls="submenu-anmeldung"],
    .sfp-site-v2 #nav > li > details:has(> #submenu-anmeldung) { --demo2-nav-icon: var(--demo2-icon-info); }
    .sfp-site-v2 #nav > li > button:is([aria-controls="submenu-platzvergabe"], [aria-controls="submenu-benutzerkonto"]),
    .sfp-site-v2 #nav > li > details:has(> :is(#submenu-platzvergabe, #submenu-benutzerkonto)) { --demo2-nav-icon: var(--demo2-icon-users); }

    .sfp-site-v2 #nav > li > a::before,
    .sfp-site-v2 #nav > li > button[data-site-menu-disclosure]::before,
    .sfp-site-v2 #nav > li > details > summary[data-site-menu-summary]::before {
        content: "";
        flex: none;
        inline-size: 1.4em;
        block-size: 1.4em;
        background: currentColor;
        mask: var(--demo2-nav-icon) center / contain no-repeat;
    }

    .sfp-site-v2 #menNav.site-menu-compact #nav button[data-site-menu-disclosure],
    .sfp-site-v2 #menNav.sfp-site-menu-native #nav summary[data-site-menu-summary] {
        justify-content: flex-start;
    }

    .sfp-site-v2 #nav :is(button[data-site-menu-disclosure], summary[data-site-menu-summary])::after {
        margin-inline-start: auto;
    }
}