/* /Layout/MainLayout.razor.rz.scp.css */
.app-header[b-3bqb75ybfa] {
    color: var(--c-on-header);
    background: var(--c-header);
    box-shadow: var(--shadow-lg);
}

.app-header__inner[b-3bqb75ybfa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    max-width: 64rem;
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
}

.app-header .brand__logo[b-3bqb75ybfa] { color: var(--c-primary); background: var(--c-surface); }

.app-nav[b-3bqb75ybfa] {
    flex: 1;
    display: flex;
    gap: var(--space-1);
}

.app-nav[b-3bqb75ybfa]  a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.app-nav[b-3bqb75ybfa]  a:hover { background: var(--c-on-header-hover); }
.app-nav[b-3bqb75ybfa]  a.active { color: var(--c-primary); background: var(--c-surface); box-shadow: var(--shadow); }
.app-nav[b-3bqb75ybfa]  a:focus-visible,
.user__logout:focus-visible[b-3bqb75ybfa] { outline-color: var(--c-on-header); }

.user[b-3bqb75ybfa] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.user .avatar[b-3bqb75ybfa] { color: var(--c-on-header); background: var(--c-on-header-hover); }

.user__logout[b-3bqb75ybfa] {
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    color: inherit;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease);
}

.user__logout:hover[b-3bqb75ybfa] { background: var(--c-on-header-hover); }

.app-footer[b-3bqb75ybfa] {
    padding: 0 var(--space-4) var(--space-6);
    font-size: var(--text-sm);
    color: var(--c-muted);
    text-align: center;
}

/* Smartphone: Navigation als eigene Zeile, Icon über Beschriftung */
@media (max-width: 48rem) {
    .brand[b-3bqb75ybfa] { flex: 1; }
    .user__name[b-3bqb75ybfa] { display: none; }

    .app-nav[b-3bqb75ybfa] {
        order: 3;
        flex-basis: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding-bottom: var(--space-1);
    }

    .app-nav[b-3bqb75ybfa]  a {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 3.5rem;
        padding: var(--space-1) 0;
        font-size: .75rem;
        border-radius: var(--radius);
    }

    .app-nav[b-3bqb75ybfa]  .icon { width: 1.5rem; height: 1.5rem; }
}