/* =====================================================================
   Global navigation — one slim sticky bar + offcanvas drawer.
   (Replaces the old blue #topnavbar + white #mainnavbar two-tier nav.)
   Data stays DB-driven; this only styles the new markup in menu.phtml.
   Overlay-over-hero rules (body.nav-overlay) are added in a later phase.
   ===================================================================== */
/* never let anything (full-bleed hero, nav) widen the page -> no horizontal scrollbar.
   overflow:clip (not hidden) does NOT break the sticky nav. */
html { overflow-x: clip; }
/* while the drawer (offcanvas) is open, lock the page scroll. The overflow-x:clip above breaks
   Bootstrap's default body->viewport scroll-lock, so lock the REAL scroller (html) here.
   js/menu.js toggles .nav-drawer-open on the show/hidden offcanvas events. */
html.nav-drawer-open { overflow: hidden; }

.site-nav {
    --nav-h: 64px;
    --nav-h-scrolled: 52px;
    --nav-fg: #1b2b48;          /* readable dark navy-ish, replaces the light grey */
    --nav-fg-hover: #000000;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 1030;              /* above hero + page; below offcanvas backdrop (1040) */
}
.site-nav.is-scrolled { box-shadow: 0 4px 16px rgba(10,20,40,.10); border-bottom-color: transparent; }

.site-nav__inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* kill the legacy wrapping bug */
    gap: clamp(8px, 1.2vw, 22px);
    height: var(--nav-h);
    padding: 0 clamp(16px, 2.2vw, 38px);   /* full-bleed: logo anchored left, utility right */
    transition: height .25s ease;
}
.site-nav.is-scrolled .site-nav__inner { height: var(--nav-h-scrolled); }

/* brand */
.site-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-nav__brand img { width: 71px; height: auto; display: block; transition: width .25s ease; }   /* 15% smaller -> more breathing room top/bottom */
.site-nav.is-scrolled .site-nav__brand img { width: 54px; }

/* main nav */
.site-nav__main { margin-left: auto; }      /* push nav + utils to the right of the logo */
.site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
}
.site-nav__list > .nav-item { position: relative; }
.site-nav .nav-link {
    position: relative;
    display: block;
    color: var(--nav-fg);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 10px clamp(7px, 0.7vw, 12px);
    white-space: nowrap;
    hyphens: none;              /* override global a{hyphens:auto} -> no "Über-sicht" */
    text-decoration: none;
}
.site-nav .nav-link:hover { color: var(--nav-fg-hover); }
/* polished FIT-yellow underline indicator — an animated bar, NOT a plain link underline */
.site-nav .nav-link::after {
    content: ""; position: absolute; left: clamp(7px,0.7vw,12px); right: clamp(7px,0.7vw,12px); bottom: 4px;
    height: 2px; background: var(--fityellow);
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus-visible::after,   /* keyboard focus shows the same brand bar as hover (a11y, 2026-07-10) */
.site-nav .nav-link.active::after,
.site-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* dropdowns (3rd level) */
.site-nav .dropdown-menu {
    border: 0; border-radius: 0;
    box-shadow: 0 10px 28px rgba(10,20,40,.16);
    min-width: 230px; line-height: 2; margin-top: 0 !important; padding-top: 8px;
}
.site-nav .dropdown-menu ul { list-style: none; column-count: 1; padding: 0 0 10px 0; margin: 0; }
.site-nav .dropdown-menu ul li { padding-top: 8px; }
.site-nav .dropdown-menu-main-link { font-size: 16px; color: #000; font-weight: 700; }
.site-nav .dropdown-menu-main-link:hover { color: var(--fityellow); }
.site-nav .dropdown-item { font-weight: 700; font-size: 14px; color: var(--fitblue); }
/* dropdown hover/active = COLOR only (yellow), never the cheap link underline */
.site-nav .dropdown-item:focus,
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item.active,
.site-nav .dropdown-item:active { color: var(--fityellow) !important; text-decoration: none; background: transparent; }

/* persistent actions cluster — ALWAYS visible: wide-only secondary links + search + CTA + language */
.site-nav__utils { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 14px); flex: 0 0 auto; padding-left: clamp(8px, 1vw, 16px); }
/* secondary links (Karriere/Neues/Download/Kontakt): wide screens only; otherwise in the drawer */
.site-nav__util-wide-group { display: none; align-items: center; gap: 2px; }
@media (min-width: 1700px) { .site-nav__util-wide-group { display: flex; } }
.site-nav .site-nav__util { font-size: 12.5px; font-weight: 600; color: #5b6b82; padding: 8px 8px; }   /* = module secondary grey (was #5a6b86, unified 2026-07-10) */
.site-nav .site-nav__util::after { display: none; }
.site-nav .site-nav__util:hover { color: var(--fitblue); text-decoration: none; }

/* search FIELD (typeable, persistent pill) */
.site-nav__search { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 38px; background: #eef1f5; border: 1px solid rgba(0,0,0,.14); border-radius: 0; transition: background .15s, border-color .15s; }
.site-nav__search:focus-within { background: #fff; border-color: var(--fitblue); }
.site-nav__search input { flex: 1 1 auto; min-width: 0; width: 165px; border: 0; background: transparent; padding: 0 2px 0 16px; font-size: 14px; color: var(--nav-fg); outline: none; }
.site-nav__search button { flex: 0 0 auto; width: 40px; height: 38px; border: 0; background: transparent; color: var(--fitblue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.site-nav__search button:hover { color: var(--fityellow); }
.site-nav__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* CTA button "Angebotsanfrage" — stands out (FIT-yellow pill, like the hero CTA), on-brand */
.site-nav__cta { flex: 0 0 auto; display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 0; background: var(--fityellow); color: #16284a !important; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .15s, box-shadow .15s; }
.site-nav__cta:hover, .site-nav__cta:focus { background: #ffc62b; box-shadow: 0 4px 14px rgba(252,186,0,.40); color: #16284a !important; text-decoration: none; }
.site-nav__cta::after { display: none; }

/* language toggle — persistent country flag */
.site-nav__lang { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 6px; text-decoration: none; }
.site-nav__lang::after { display: none; }
.site-nav__flag { display: block; height: 20px; width: auto; border: 1px solid rgba(0,0,0,.22); transition: box-shadow .15s; }   /* height matches the burger glyph (~20px) */
.site-nav__lang:hover .site-nav__flag, .site-nav__lang:focus .site-nav__flag { box-shadow: 0 0 0 2px var(--fityellow); }

/* hamburger */
.site-nav__toggler {
    display: none; flex: 0 0 auto;
    width: 44px; height: 44px; border: 0; background: transparent; padding: 8px; cursor: pointer;
}
.site-nav__toggler .navbar-toggler-icon {
    display: block; width: 100%; height: 100%;
    background: url('../assets/img/toggler.svg') 50% 50% no-repeat; background-size: contain;
}
/* kill only the legacy always-on :focus ring; KEYBOARD focus stays visible
   (outline:none without replacement hid the main mobile control from keyboard
   users — a11y fix 2026-07-10) */
.site-nav__toggler:focus, .site-nav__toggler:active { outline: none; box-shadow: none; }
.site-nav__toggler:focus-visible { outline: 2px solid var(--fityellow); outline-offset: 2px; }

/* ---------- responsive ----------
   The persistent actions (search + CTA + language) stay in the bar at EVERY width.
   Only the main nav and the secondary links collapse into the drawer:
     >=1700px    logo + main nav + Karriere/Neues/Download/Kontakt + [search · CTA · lang]; no hamburger
     1366-1699   logo + main nav + [search · CTA · lang] + hamburger (the 4 secondary links live in the drawer)
     <1366px     logo + [search · CTA · lang] + hamburger (main nav moves into the drawer) */
@media (max-width: 1699.98px) {
    .site-nav__toggler { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 1365.98px) {
    .site-nav__main { display: none; }
    .site-nav__brand { margin-right: auto; }
}
/* phone: keep the actions visible, just compact them so they fit next to logo + hamburger */
@media (max-width: 720px) {
    .site-nav__search input { width: 120px; }
}
@media (max-width: 480px) {
    .site-nav__inner { gap: 5px; padding: 0 10px; }
    .site-nav__brand img,
    .site-nav.is-scrolled .site-nav__brand img { width: 46px; }
    /* 76px clipped the placeholder ("Search…" cut mid-word in review screenshots);
       13px type + 90px width keeps it readable without crowding the bar (2026-07-10) */
    .site-nav__search input { width: 90px; padding-left: 10px; font-size: 13px; }
    .site-nav__search button { width: 30px; }
    .site-nav__cta { padding: 0 11px; }
    .site-nav__lang { padding: 8px 3px; }
}

/* ---------- offcanvas drawer (mobile/tablet) ---------- */
.site-nav__drawer { width: min(94vw, 420px); }     /* wide enough for the utility row + close-X on one line */
.site-nav__drawer .offcanvas-header { justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
.site-nav__drawer .offcanvas-header .btn-close { flex: 0 0 auto; margin: 0; }
/* reserve the scrollbar space permanently so expanding/collapsing an accordion item
   (which toggles the vertical scrollbar) does NOT change the content width -> the utility
   row never re-wraps ("breaks") when a menu point is opened. */
/* body is a flex column so the CTA footer can pin to the bottom; scrollbar-gutter keeps the
   utility row from re-wrapping when an accordion item toggles the vertical scrollbar. */
.site-nav__drawer .offcanvas-body { scrollbar-gutter: stable; display: flex; flex-direction: column; padding-top: 0; }   /* no top gap -> first accordion row equals the rest */
.site-nav__drawer-list { list-style: none; margin: 0; padding: 0; }
.site-nav__drawer-list > li { border-bottom: 1px solid rgba(0,0,0,.07); }
/* accordion: only the main items show; sub-items expand on tap */
.site-nav__drawer-row { display: flex; align-items: center; justify-content: space-between; }
.site-nav__drawer-link { flex: 1 1 auto; display: block; padding: 16px 4px; font-size: 18px; font-weight: 700; color: var(--fitblue); text-decoration: none; }
/* color change + FIT-yellow bar — NOT the global a:hover link underline (which reads "cheap") */
.site-nav__drawer-link:hover,
.site-nav__drawer-link.active { color: var(--fityellow); text-decoration: none; }
.site-nav__drawer-link.active::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--fityellow); margin-right: 8px; vertical-align: -3px; }
.site-nav__drawer-toggle { flex: 0 0 auto; width: 46px; height: 46px; border: 0; background: transparent; color: var(--fitblue); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.site-nav__drawer-toggle svg { width: 22px; height: 22px; transition: transform .2s ease; }
.site-nav__drawer-list > li.has-sub.is-open > .site-nav__drawer-row .site-nav__drawer-toggle svg { transform: rotate(180deg); }
/* smooth expand/collapse to the EXACT content height (grid-rows 0fr -> 1fr). Also makes the
   COLLAPSED sub truly 0px -> every main row has the same height (max-height leaked the sub's
   padding-bottom, so dropdown rows were ~12px taller than non-dropdown rows). */
.site-nav__drawer-subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.site-nav__drawer-list > li.has-sub.is-open > .site-nav__drawer-subwrap { grid-template-rows: 1fr; }
.site-nav__drawer-sub { list-style: none; margin: 0; padding: 0 0 0 12px; min-height: 0; overflow: hidden; }
.site-nav__drawer-sub > li:last-child { padding-bottom: 8px; }   /* gap before the next item, only when open (collapses with the grid) */
.site-nav__drawer-sublink { display: block; padding: 10px 4px; font-size: 15px; color: #5a6b86; text-decoration: none; }
.site-nav__drawer-sublink:hover { color: var(--fityellow); text-decoration: none; }

/* footer: full-width "Anfrage" CTA + active-language flag, pinned to the bottom of the drawer */
.site-nav__drawer-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }
.site-nav__drawer-cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; height: 50px; background: var(--fityellow); color: #16284a; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s; }
.site-nav__drawer-cta:hover, .site-nav__drawer-cta:focus { background: #ffc62b; color: #16284a; text-decoration: none; }
.site-nav__drawer-lang { padding: 0; }
.site-nav__drawer-foot .site-nav__flag { height: 26px; }
/* utility row lives in the drawer HEADER, on one line with the close-X (drawer widened to fit) */
.site-nav__drawer-utils { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(3px, 1vw, 12px); flex: 1 1 auto; min-width: 0; }
.site-nav__drawer-util { font-size: 12.5px; font-weight: 600; color: #5a6b86; text-decoration: none; white-space: nowrap; }
.site-nav__drawer-util:hover { color: var(--fityellow); text-decoration: none; }
/* 1366-1699px: the main nav is already in the bar, so the hamburger surfaces ONLY the
   overflow secondary links (Karriere/Neues/Download/Kontakt) -> drop the accordion here. */
@media (min-width: 1366px) {
    .site-nav__drawer-list, .site-nav__drawer-foot { display: none; }
}

/* breadcrumb (now non-sticky) */
#breadcrumbs > a { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .site-nav__inner, .site-nav__brand img, .site-nav__drawer-toggle svg, .site-nav .nav-link::after, .site-nav__drawer-subwrap { transition: none; }
}