/**
 * Navigation shape background
 *
 * Apply .nav-shape to any container to render the organic SVG background.
 * Adjust --nav-shape-color to change the fill color.
 * The ::before spans the full element and scales the shape to fit via mask-size.
 */
.nav-shape {
    --nav-shape-color: #ffffff;
    position: relative;
    z-index: 2;
    padding: 1rem;
    padding-left: 2rem;
    margin-block: 2rem 1rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

.nav-shape::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--nav-shape-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 104' preserveAspectRatio='none'%3E%3Cpath d='M41.6346 0.651938C41.6346 0.651938 687.206 0.520104 773.201 0.123612C859.195 -0.27288 1110.51 0.38827 1119.44 0.651938C1128.37 0.915606 1155.18 0.651938 1155.18 12.5467C1155.18 24.4415 1150.71 56.1607 1152.94 57.7468C1155.17 59.3329 1158.53 83.7833 1152.94 91.1841C1149.35 95.942 1149.46 98.4607 1149.99 99.6521C1150.45 100.684 1146.63 101.682 1139.72 102.314C1130.93 103.117 1115.39 103.868 1088.16 103.739C1032.32 103.474 770.963 103.342 759.797 103.607C748.633 103.872 447.07 104.268 377.818 103.739C308.568 103.21 173.426 102.946 123.165 103.342C72.9052 103.739 34.9332 104.004 28.232 103.607C21.5306 103.21 -3.0384 104.004 0.312298 95.016C3.66299 86.0284 15.9433 41.887 11.4785 30.7853C7.01369 19.6835 14.8292 15.454 12.5926 13.2078C10.356 10.9617 5.89122 0.387279 41.6346 0.651938Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 104' preserveAspectRatio='none'%3E%3Cpath d='M41.6346 0.651938C41.6346 0.651938 687.206 0.520104 773.201 0.123612C859.195 -0.27288 1110.51 0.38827 1119.44 0.651938C1128.37 0.915606 1155.18 0.651938 1155.18 12.5467C1155.18 24.4415 1150.71 56.1607 1152.94 57.7468C1155.17 59.3329 1158.53 83.7833 1152.94 91.1841C1149.35 95.942 1149.46 98.4607 1149.99 99.6521C1150.45 100.684 1146.63 101.682 1139.72 102.314C1130.93 103.117 1115.39 103.868 1088.16 103.739C1032.32 103.474 770.963 103.342 759.797 103.607C748.633 103.872 447.07 104.268 377.818 103.739C308.568 103.21 173.426 102.946 123.165 103.342C72.9052 103.739 34.9332 104.004 28.232 103.607C21.5306 103.21 -3.0384 104.004 0.312298 95.016C3.66299 86.0284 15.9433 41.887 11.4785 30.7853C7.01369 19.6835 14.8292 15.454 12.5926 13.2078C10.356 10.9617 5.89122 0.387279 41.6346 0.651938Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 0;
    pointer-events: none;
}

/* Ensure nav content sits above the ::before shape */
.nav-shape > * {
    position: relative;
    z-index: 1;
}

/* Mobile overlay — schwarzes Vollbild-Overlay */
.nav-mobile-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background-color: var(--color-brand-background, #1D1D1B);
    flex-direction: column;
    padding: 1.5rem 2rem 3rem;
    overflow-y: auto;

    --circle-origin: calc(100% - 2.5rem) 3.5rem;
    clip-path: circle(0% at var(--circle-origin));
    visibility: hidden;
    pointer-events: none;
    transition:
        clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.55s;
}

.nav-mobile-overlay.is-open {
    clip-path: circle(150% at var(--circle-origin));
    visibility: visible;
    pointer-events: auto;
    transition:
        clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

@media (max-width: 1440px) {
    .nav-shape {
        padding-block: 0.5rem;
    }
}

/* Auf Mobile: Header über dem Overlay, Overlay-Inhalt darunter beginnen */
@media (max-width: 1119px) {
    header {
        z-index: 51 !important;
    }

    /* Alles im Header außer dem Overlay über dem Overlay halten */
    header > *:not(.nav-mobile-overlay) {
        position: relative;
        z-index: 2;
    }

    .nav-mobile-overlay {
        padding-top: 8rem;
    }
    .nav-shape {
        padding-left: 1rem;
    }
    /* Hamburger-Icon: X bleibt dunkel (nav-shape hat weißen Hintergrund) */
    .nav-mobile-trigger[aria-expanded="true"] span {
        color: var(--color-brand-background, #1D1D1B);
    }

    /* Close-Button im Overlay auf Mobile verstecken — Hamburger dient als Toggle */
    .nav-mobile-close {
        display: none;
    }
}

.nav-mobile-close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: white;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.nav-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Primary-Menu-Liste im Overlay vertikal statt horizontal */
.nav-mobile-overlay .nav-primary-list {
    flex-direction: column;
    align-items: flex-start;
}

/* Links im Mobile-Overlay — gleich wie im Mehr-Overlay */
.nav-mobile-overlay .nav-item a,
.nav-mobile-overlay .menu-item a {
    display: block;
    padding: 0.4rem 0;
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 2rem;    /* text-3xl+ — gut lesbar auf kleinen Phones */
    color: white;
    text-decoration: none;
    transition: color 0.15s;
}

@media (min-width: 480px) {
    .nav-mobile-overlay .nav-item a,
    .nav-mobile-overlay .menu-item a {
        font-size: 2.5rem; /* text-4xl+ — mehr Luft ab mittleren Phones */
    }
}

@media (min-width: 600px) {
    .nav-mobile-overlay .nav-item a,
    .nav-mobile-overlay .menu-item a {
        font-size: 3rem; /* text-5xl — Tablet */
    }
}

.nav-mobile-overlay .nav-item a:hover,
.nav-mobile-overlay .menu-item a:hover {
    color: var(--color-brand-primary, #E30613);
}

.nav-mobile-overlay .nav-cta {
    display: inline-flex;
    margin-top: 1.5rem;
    align-self: flex-start;
}

/* Hamburger immer sichtbar auf Mobile — verhindert Tailwind CDN timing flash */
@media (max-width: 1119px) {
    .nav-mobile-trigger {
        display: flex !important;
        font-size: 2rem;
    }

    .nav-mobile-trigger span {
        display: inline-block;
        width: 1em;
        text-align: center;
    }
    .nav-cta,
    .nav-more-trigger,
    .nav-primary {
        display: none !important;
    }
}

/* Nav buttons: versteckt auf Mobile, sichtbar ab md */
.nav-link {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 800;
}

.nav-cta,
.nav-more-trigger,
.nav-primary,
.nav-mobile-trigger {
    display: none;
}

@media (min-width: 1120px) {
    .nav-cta,
    .nav-more-trigger {
        display: inline-flex;
    }

    .nav-primary {
        display: flex;
    }
}

.nav-cta,
.nav-more-trigger {
    padding: 0.5rem 2rem;
}

.nav-cta {
    margin-left: 2rem;
}

.nav-more-trigger {
    margin-left: 1rem;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.333;
}

.nav-more-trigger span[aria-hidden] {
    font-family: sans-serif;
    display: inline-block;
    width: 1em;
    text-align: center;
    transform: translateY(-0.12em);
}

.nav-more-trigger[aria-expanded="true"] span[aria-hidden] {
    transform: scale(0.8);
}

/* MEHR overlay — slides down from the nav */
.nav-more-overlay {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 300px;
    padding: 2.5rem 3rem 3rem;
    z-index: 40;
    isolation: isolate;
    margin-top: 1.75rem;

    /* drop-shadow follows the organic shape of ::before */
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));

    /* slide down animation */
    transform: translateY(-14px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
    pointer-events: none;
}

.nav-more-overlay.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Background fill — same structure as .happy-button::before */
.nav-more-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(-1);
    background-color: var(--color-brand-background, #1D1D1B);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Simulated 2px border — same structure as .happy-button::after */
.nav-more-overlay::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -2;
    transform: scaleX(-1);
    background-color: white;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Menu items inside overlay */
.nav-more-overlay .menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-more-overlay .menu-item a {
    display: block;
    padding: 0.4rem 0;
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.7rem;
    color: white;
    text-decoration: none;
    transition: color 0.15s;
}

.nav-more-overlay .menu-item a:hover {
    color: var(--color-brand-primary, #E30613);
}

/* Active state — current page link is red (desktop) */
.nav-item.current-menu-item .nav-link,
.nav-item.current-menu-ancestor .nav-link,
.nav-item.current-menu-parent .nav-link {
    color: var(--color-brand-primary, #E30613);
}

/* Active state — current page link is red (mobile overlay) */
.nav-mobile-overlay .nav-item.current-menu-item a,
.nav-mobile-overlay .nav-item.current-menu-ancestor a,
.nav-mobile-overlay .nav-item.current-menu-parent a {
    color: var(--color-brand-primary, #E30613);
}