/* Header form «Einzeilig» (it was «Header 1») — an overlay loaded AFTER site.css
 * AND the theme overlay, strictly scoped under the body class .header-eins. Its
 * colour and the place of the contact data are overlays of their own
 * (header-band.css, header-leiste.css, header-kopf.css — ADR-0108). One row instead of
 * two: brand left, menu centred, the header buttons right; on a narrow screen
 * brand, the icon buttons and burger, with every button at the foot of the open
 * menu.
 *
 * Only the ARRANGEMENT lives here. The buttons are part of the default header
 * markup and therefore work in every layout — they simply sit beside the brand
 * there. Colours come from the accent tokens, not from fixed values: the layout
 * has to survive every palette in the design kit. */

/* Die Navigation steht im Markup zwischen Marke und Aktionen; hier bekommt sie den
 * freien Raum dazwischen, statt wie im Standard in eine eigene Zeile umzubrechen.
 * `wrap` bleibt bewusst erhalten: reicht die Breite nicht, rutscht das Menü unter
 * die Marke, statt die Buttons zu zerdrücken. */
@media (min-width: 1200px) {
    .header-eins .main-desktop {
        /* `order` gehört zur Anordnung, nicht zum Markup: im Standard schickt sie
         * die Navigation ans Ende (eigene Zeile), hier zwischen Marke und
         * Aktionen. Die DOM-Reihenfolge — und damit die Tab-Reihenfolge — ist in
         * beiden Fällen dieselbe. */
        order: 2;
        flex: 1 1 auto;
        border-top: 0;
        margin: 0;
    }
    /* Wird es knapp, stellen sich die Buttons übereinander, statt
     * gemeinsam unter die Marke zu rutschen: Die Gruppe zählt für den Umbruch
     * der Leiste nur mit ihrer schmalsten Form (`min-width: min-content`) und
     * holt sich den freien Platz vor dem Menü (`flex-grow: 100`) — bis sie
     * nebeneinander Platz hat (`max-width: max-content`). Der Rest geht an
     * die Navigation. */
    .header-eins .header-right {
        order: 3;
        gap: var(--size-1) var(--size-4);
        flex: 100 1 0;
        min-width: min-content;
        max-width: max-content;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .header-eins .main-desktop .menu {
        justify-content: center;
        gap: var(--size-2);
        padding: 0;
    }
    .header-eins .menu-item > a { padding: var(--size-2) .2rem; }

    /* Etwas mehr Luft zwischen den drei Gruppen als in der Standardleiste — sie
     * teilen sich hier eine Zeile. */
    .header-eins .site-header .bar { gap: var(--size-5); padding-block: var(--size-4); }
}

/* Schmale Leiste: Marke, Symbol-Buttons, Burger — mehr passt nicht
 * nebeneinander. Der Untertitel fällt weg, die Buttons mit Text stehen im offenen
 * Menü, wo Platz ist. */
@media (max-width: 1199px) {
    .header-eins .brand-tagline { display: none; }
    .header-eins .brand-icon { width: 32px; height: 32px; }
    .header-eins .brand-title { font-size: 1.15rem; }
}