/* Header of the current layout (Page/Layouts/Standard.html): search field, "Interner Bereich" button and
   the main menu bar. Kept apart from the compiled app.css; replaced by the new design (workstream 1).
   Note: app.css sets html { font-size: 120% } (as on live), so 1rem = 19.2px here. */

/* ---------- search (Solr, sends tx_solr[q] per GET to the search page) ---------- */
#header-search { margin: 0 0 1rem 0; }
#header-search .input-group {
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    border-radius: 1.4rem;
}
#header-search .input-group-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.4rem;
    padding: 0 .8rem;
    border: 1px solid #297d31;
    border-right: 0;
    border-top-left-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    background: #fff;
    color: #333;
    font-size: .85rem;
}
#header-search .input-group-field::placeholder { color: #8a8a8a; }
#header-search .input-group-field:focus { border-color: #143e18; outline: 0; box-shadow: none; }
#header-search .input-group-button { flex: none; }
#header-search .button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.4rem;
    margin: 0;
    padding: 0 .75rem;
    background-color: #297d31;
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
}
#header-search .button:hover,
#header-search .button:focus { background-color: #143e18; }
#header-search .button svg { display: block; }

@media screen and (min-width: 64em) {
    /* search and button share the right header column */
    header a#button_intern { display: block; margin-top: 0; text-align: center; }
}

/* Phones and tablets: search and button end at the same distance from the screen edge as the content
   (_v13-additions.scss, "Side gutter"), and the button is as wide as the search field above it. The layout
   has no opening <header> (live neither), so the "header …" rules never apply; hence no "header" here. */
@media screen and (max-width: 63.99875em) {
    .cell:has(> #header-search) { padding-right: 10px; }
    #button_intern { display: block; text-align: center; }
}
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
    .cell:has(> #header-search) { padding-right: 15px; }
}

/* ---------- main menu bar ---------- */
/* "Menu" button on phones and tablets: Foundation draws the three lines in the top 16px of the icon box,
   which is taller here, so they sat above the middle of the word "Menu" */
.title-bar .menu-icon::after { top: calc(50% - 8px); }

@media screen and (min-width: 64em) {
    /* one row on desktop: the items share the bar instead of wrapping into a second row */
    div#main-menu > ul.menu { flex-wrap: nowrap; justify-content: space-between; width: 100%; }
    div#main-menu > ul.menu > li > a { padding: 1rem clamp(.6rem, 1.4vw, 2rem); white-space: nowrap; }
    /* no dropdown arrows in the menu bar (the mobile drilldown keeps its arrows) */
    div#main-menu > ul.menu > li > a::after { display: none; }
}