/* _content/GroovyBaby/Components/Layout/MainLayout.razor.rz.scp.css */
.site-header-inner[b-lie38l06yf] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.site-nav[b-lie38l06yf] {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
    align-items: center;
}

/* Hamburger-Button: Standardm��ig versteckt (nur mobil sichtbar) */
.site-nav-toggle[b-lie38l06yf] {
    display: none; /* wird nur in @media sichtbar */
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
}

.site-nav-toggle-bar[b-lie38l06yf] {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: #333;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Wenn dein Overlay-Header hell/transparenter ist, kannst du hier ggf. andere Farben setzen */
.site-header--overlay .site-nav-toggle-bar[b-lie38l06yf] {
    background: #222;
}

/* --- Mobile: Hamburger sichtbar, Nav als Dropdown --- */

@media (max-width: 768px) {

    .site-header-inner[b-lie38l06yf] {
        justify-content: flex-end;
        padding-inline: 1rem;
    }

    /* Hamburger-Button anzeigen */
    .site-nav-toggle[b-lie38l06yf] {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Navigation als Dropdown */
    .site-nav[b-lie38l06yf] {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none; /* Standard: versteckt */
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        z-index: 50;
    }

    /* eigener Hintergrund, wenn Header overlay ist */
    .site-header--overlay .site-nav[b-lie38l06yf] {
        background: rgba(255, 255, 255, 0.96);
    }

    /* Wenn im Blazor-Code IsMenuOpen == true ist */
    .site-nav.site-nav--open[b-lie38l06yf] {
        display: flex;
    }

    /* Links im Dropdown etwas gr��er und blockig */
    .site-nav .nav-link[b-lie38l06yf] {
        display: block;
        padding: 0.5rem 0;
    }
}

#blazor-error-ui[b-lie38l06yf] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lie38l06yf] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }