/* Header contact place «In der Kopfzeile» — an overlay loaded AFTER site.css,
 * the theme overlay and the header's form and colour, strictly scoped under the
 * body class .header-kopf. The contact block in the header row: the phone
 * number and UNDER it the e-mail address, as text, beside the buttons; on a
 * narrow screen a contact row of its own below the bar, and the postal address
 * at the foot of the open menu. Under every form (ADR-0108; it was «Header 3»,
 * «Header 1» plus this block).
 *
 * ⚠️ The e-mail in the header and the address in the open menu are MARKUP the
 * setting brings (`headerContact` → ADR-0108). Everything in this file styles
 * elements that exist only here or a container that is otherwise neutral
 * (`.header-contact`, site.css).
 *
 * Colours come from the tokens: the block has to survive every palette. On the
 * accent band header-band.css makes number and e-mail white. */

@media (min-width: 1200px) {
    /* Kontaktblock und Buttons als eine Gruppe, die bei knappem Platz in sich
     * umbricht, statt den Button allein in die nächste Zeile zu schicken. */
    .header-kopf .header-right { flex-wrap: wrap; justify-content: flex-end; gap: var(--size-2) var(--size-4); }

    /* Der Kontaktblock: Nummer über Adresse, rechtsbündig, direkt links vom
     * Button. Die Nummer trägt das Gewicht, die Adresse steht als Zeile
     * darunter — beides bleibt EIN Behälter, damit die Zeilen zusammen umbrechen
     * und nicht einzeln um den Button wandern. */
    .header-kopf .header-contact {
        flex-direction: column;
        align-items: flex-end;
        gap: .1rem;
        line-height: 1.25;
    }
    .header-kopf .header-mail {
        color: var(--muted);
        text-decoration: none;
        font-size: .9rem;
    }
    .header-kopf .header-mail:hover { color: var(--accent); }
}

/* Schmale Leiste: Marke und Burger teilen die erste Zeile, Telefon und E-Mail
 * stehen als eigene Zeile darunter — zweigeteilt, mit einer Trennlinie in der
 * Mitte.
 *
 * ⚠️ `display: contents` auf `.header-right` ist der Grund, warum das ohne
 * zweites Markup geht: der Behälter verschwindet aus dem Layout, seine Kinder
 * werden Flex-Kinder der Leiste, und `.header-contact` kann dort eine volle
 * Zeile beanspruchen. Die Alternative wäre eine zweite Kontaktzeile im Markup —
 * also dieselbe Nummer zweimal, mit einer CSS-Regel als einzigem Unterschied. */
@media (max-width: 1199px) {
    .header-kopf .header-right { display: contents; }
    /* ⚠️ `body.`, unlike the rest of this file: the contact row needs a bar
     * that WRAPS, and a theme that keeps its narrow bar to one line
     * (`body.theme-neumar … { flex-wrap: nowrap }`) outranked the plain class —
     * number and e-mail then ran off the right edge, over the burger. Tied, the
     * overlay wins by order; only this property, the theme's shape stays.
     * The contact row closes the bar at its bottom edge, so the bar keeps no
     * padding below it — a negative margin of a guessed size hung the row's
     * divider out of the header wherever a theme or the shrunk sticky bar padded
     * it less. */
    body.header-kopf .site-header .bar,
    body.header-kopf.is-scrolled .site-header .bar { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }

    /* ⚠️ Die aufgelösten Kinder erben `order` NICHT vom Behälter: `.header-right`
     * stand als Ganzes auf `order: 2`, seine Kinder starten bei 0 und rutschen
     * damit VOR die Marke (`order: 1`) — Burger links, Marke rechts. Sie
     * bekommen die Position deshalb hier einzeln. */
    .header-kopf .lang-dropdown,
    .header-kopf .header-buttons,
    .header-kopf .burger { order: 2; }
    /* The resolved group no longer sits right as one piece: `space-between`
     * would stand the icon buttons halfway between the brand and the burger. */
    .header-kopf .header-buttons { margin-inline-start: auto; }

    /* Edge to edge: the basis counts the two gutters the margins pull it out
     * into — at `100%` the row stopped one gutter short of the right edge. */
    .header-kopf .header-contact {
        order: 3;
        flex-basis: calc(100% + 2 * var(--gutter));
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: stretch;
        margin: var(--size-3) calc(-1 * var(--gutter)) 0;
        border-top: 1px solid var(--border);
    }
    /* Die Trennlinie gehört dem zweiten Feld — bei nur einer gepflegten Angabe
     * gibt es sie damit gar nicht erst. */
    .header-kopf .header-contact > * + * { border-left: 1px solid var(--border); }

    .header-kopf .header-tel,
    .header-kopf .header-mail {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--size-3) var(--size-2);
        text-decoration: none;
    }
    .header-kopf .header-mail { color: var(--muted); font-size: .95rem; }

    .header-kopf .brand-tagline { display: none; }
    .header-kopf .brand-icon { width: 32px; height: 32px; }
    .header-kopf .brand-title { font-size: 1.15rem; }

    /* Offenes Menü: die Einträge als Liste mit Trennlinien, der Kontaktblock
     * zuunterst mit Kicker, Nummer, Adresse und Buttons. */
    .header-kopf .site-menu .menu-item { border-bottom: 1px solid var(--border); }
    .header-kopf .site-menu .menu-item > a { padding-block: var(--size-4); }
    .header-kopf .menu-kicker {
        font-size: .72rem;
        font-weight: var(--font-weight-6);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .header-kopf .menu-tel {
        border: 0;
        padding: 0;
        text-align: left;
        font-size: 1.35rem;
    }
    .header-kopf .menu-mail,
    .header-kopf .menu-address { text-align: left; }
    .header-kopf .menu-mail { color: var(--ink); text-decoration: none; }
    .header-kopf .menu-mail:hover { color: var(--accent); }
    .header-kopf .menu-address { color: var(--muted); font-size: .95rem; }
    .header-kopf .site-menu-foot { gap: var(--size-1); }
    .header-kopf .menu-btn { padding-block: var(--size-4); }
    /* Room between the contact lines and the first button after them. */
    .header-kopf .site-menu-foot > :not(.menu-btn) + .menu-btn { margin-top: var(--size-3); }
}