/* v0.13e_1 · Kopfbereich. style.css bleibt eingefroren. Hier noch keine Layoutregeln. */

/* v0.13e_7 · Fehlerkorrektur Header bei reduzierter Bildbreite.
   Der Account-Block bleibt rechts neben dem Logo; die Hauptnavigation bricht darunter um.
   style.css bleibt eingefroren. */
@media (max-width: 700px) {
    .header-inner {
        align-items: flex-start;
    }

    .header-inner .brand {
        order: 1;
        flex: 0 0 auto;
    }

    .header-inner .account-nav {
        order: 2;
        width: auto;
        max-width: calc(100% - 72px);
        margin-left: auto;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 0 1 auto;
    }

    .header-inner .account-user-block {
        max-width: 100%;
    }

    .header-inner .account-name {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .header-inner .account-action-line {
        justify-content: flex-end;
        max-width: 100%;
    }

    .header-inner .main-nav {
        order: 3;
        width: 100%;
        flex: 1 1 100%;
    }
}

/* v0.13e_7 · Fehlerkorrektur Header bei reduzierter Bildbreite.
   Feste 3-Zonen-Struktur: Logo links, Hauptnavigation in der Mitte, Account-Block rechts.
   Die Hauptnavigation darf in der Mitte mehrzeilig umbrechen, aber nicht unter Logo oder Account-Block springen.
   style.css bleibt eingefroren. */
@media (max-width: 900px) {
    .header-inner {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas: "logo navigation account";
        align-items: start;
        column-gap: 14px;
        row-gap: 8px;
        flex-wrap: nowrap;
    }

    .header-inner .brand {
        grid-area: logo;
        order: 0;
        align-self: start;
        margin-right: 0;
    }

    .header-inner .main-nav {
        grid-area: navigation;
        order: 0;
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: initial;
        justify-content: flex-start;
        align-self: start;
        overflow: visible;
    }

    .header-inner .main-nav .nav-item {
        flex: 0 0 auto;
    }

    .header-inner .main-nav a {
        white-space: nowrap;
    }

    .header-inner .account-nav {
        grid-area: account;
        order: 0;
        width: auto;
        max-width: 220px;
        margin-left: 0;
        justify-content: flex-end;
        align-items: flex-start;
        align-self: start;
        flex: initial;
    }

    .header-inner .account-user-block {
        max-width: 220px;
        align-items: flex-start;
    }

    .header-inner .account-name {
        max-width: 220px;
        overflow-wrap: anywhere;
    }

    .header-inner .account-action-line {
        justify-content: flex-start;
        max-width: 220px;
    }
}

@media (max-width: 700px) {
    .header-inner {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas: "logo navigation account";
    }

    .header-inner .account-nav {
        width: auto;
        max-width: 200px;
        margin-left: 0;
        justify-content: flex-end;
    }

    .header-inner .account-user-block,
    .header-inner .account-name,
    .header-inner .account-action-line {
        max-width: 200px;
    }
}