/* ============================================================
   Header: Top Bar + Sticky Wrapper
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   0. GLOBAL: Fokus nur bei Tastaturnavigation, nicht Maus
   ═══════════════════════════════════════════════════════════ */

*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════
   1. STICKY WRAPPER
   ═══════════════════════════════════════════════════════════ */

.header-sticky-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
}

body.admin-bar .header-sticky-wrap { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .header-sticky-wrap { top: 46px; }
}

.header-sticky-wrap .header-area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: auto !important;
}

.header-sticky-wrap .header-area,
.header-sticky-wrap .header-area.scroll {
    box-shadow: none !important;
    transition: box-shadow 0s !important;
}

.header-sticky-wrap:has(.header-area.scroll) {
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.31);
}


/* ═══════════════════════════════════════════════════════════
   2. BODY OFFSET
   ═══════════════════════════════════════════════════════════ */

body #wrapper { margin-top: 130px !important; }

@media (min-width: 770px) {
    body #wrapper { margin-top: 160px !important; }
}

body.admin-bar #wrapper { margin-top: 162px !important; }

@media (min-width: 770px) {
    body.admin-bar #wrapper { margin-top: 192px !important; }
}

@media screen and (max-width: 782px) {
    body.admin-bar #wrapper { margin-top: 176px !important; }
}


/* ═══════════════════════════════════════════════════════════
   3. DROPDOWN OFFSETS
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 320px) {
    .box_menutop      { top: 130px !important; }
    .box_barrierefrei { top: 130px !important; }
}

@media (min-width: 770px) {
    .box_menutop      { top: 160px !important; }
    .box_barrierefrei { top: 160px !important; }
}

body.admin-bar .box_menutop,
body.admin-bar .box_barrierefrei { margin-top: 32px; }


/* ═══════════════════════════════════════════════════════════
   4. TOP BAR
   ═══════════════════════════════════════════════════════════ */

.header-top {
    background-color: #e8eaed;
    border-bottom: 1px solid #d0d4da;
}

.header-top__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 40px;
}

.header-top__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 100%;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3a;
    text-decoration: none;
    border-right: 1px solid #d0d4da;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.header-top__link:first-child { border-left: 1px solid #d0d4da; }

.header-top__link:hover,
.header-top__link:focus-visible {
    background-color: #d8dce2;
    color: #000;
    outline: none;
}

.header-top__link:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: -2px;
}

.header-top__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.header-top__icon svg,
.header-top__icon img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
}

.box__barrierefrei--top {
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid #d0d4da;
}

.box__barrierefrei--top .btn-barrierefrei {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3a;
    transition: background-color 0.15s ease;
}

.box__barrierefrei--top .btn-barrierefrei:hover,
.box__barrierefrei--top .btn-barrierefrei:focus-visible {
    background-color: #d8dce2;
    outline: none;
}

.box__barrierefrei--top .btn-barrierefrei:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: -2px;
}

.box__barrierefrei--top .btn-barrierefrei [data-name="Gruppe 96"]                     { display: none; }
.box__barrierefrei--top .btn-barrierefrei.active [data-name="Gruppe 96"]              { display: block; }
.box__barrierefrei--top .btn-barrierefrei.active [data-name="Icon ionic-ios-options"] { display: none; }


/* ═══════════════════════════════════════════════════════════
   5. HEADER LAYOUT — Suche · Essen · Sprache
   ═══════════════════════════════════════════════════════════ */

.header-area .col-center .row-flex {
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Suche: fluid gap vom Logo nach links */
.header-area .col-center .box__search {
    margin-right: auto !important;
    margin-left: clamp(3rem, 8vw, 10rem) !important;
}

@media (max-width: 768px) {
    .header-area .col-center .box__search {
        margin-left: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   6. ESSEN BUTTON (kreisförmig)
   ═══════════════════════════════════════════════════════════ */

.header-area .col-center .box__essen {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

.header-area .col-center .box__essen .__text {
    order: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
    text-align: left;
    white-space: nowrap;
}

.header-area .col-center .box__essen a {
    order: 2;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    width: 58px !important;
    height: 44px !important;
    background-color: #cdd1d8 !important;
    border-radius: 10px !important;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.header-area .col-center .box__essen a:hover {
    background-color: #3c3c3b !important;
}

.header-area .col-center .box__essen a svg {
    display: block !important;
    width: 58px !important;
    height: 44px !important;
    flex-shrink: 0;
}

.header-area .col-center .box__essen a svg rect {
    fill: transparent !important;
}

.header-area .col-center .box__essen a svg path {
    fill: #fff !important;
}

.header-area .col-center .box__essen a img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
}


/* ═══════════════════════════════════════════════════════════
   7. SPRACHSCHALTER — aktive Sprache: Standard (schwarz via main.css)
   ═══════════════════════════════════════════════════════════ */

/* Kein Override — main.css var(--black) Unterstrich bleibt aktiv */



/* Barrierefreiheit-Button: Barrierefrei fett oben, zweite Zeile normal */
.box__barrierefrei--top .btn-barrierefrei > span:first-child {
    white-space: normal;
    line-height: 1.25;
    text-align: right;
}

/* <span>Barrierefrei</span> → Blockzeile + fett */
.box__barrierefrei--top .btn-barrierefrei > span:first-child span {
    display: block;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   8. MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .header-top__link > span:not(.header-top__icon),
    .box__barrierefrei--top .btn-barrierefrei > span:not(.header-top__icon) {
        display: none;
    }

    .header-top__link,
    .box__barrierefrei--top .btn-barrierefrei {
        padding: 0 10px;
        gap: 0;
    }
}