/* ================================================================= ImigraData · Shared mobile navigation (hamburger) Drop-in: works with BOTH nav structures used across the site: A) header.topbar > nav.nav (home, was-ist, registrierung, kernkompetenz) B) header.nav-bar > nav.nav-links (datenmobilitaet, architektur, …) On <=860px a hamburger button appears; the existing nav becomes a full-width dropdown panel that contains ALL links + the language switcher. Desktop is untouched (button hidden, nav as-is). ================================================================= */ /* The toggle button — injected by mobile-nav.js, hidden on desktop. */ .mnav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid rgba(214, 164, 98, 0.45); border-radius: 8px; cursor: pointer; color: #f2eee5; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .mnav-toggle:focus-visible { outline: 2px solid #d6a462; outline-offset: 2px; } .mnav-toggle__bars, .mnav-toggle__bars::before, .mnav-toggle__bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform 220ms ease, opacity 220ms ease; } .mnav-toggle__bars::before { content: ""; position: absolute; top: -6px; left: 0; } .mnav-toggle__bars::after { content: ""; position: absolute; top: 6px; left: 0; } /* Animate to an X when open */ .mnav-open .mnav-toggle__bars { background: transparent; } .mnav-open .mnav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .mnav-open .mnav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* Backdrop behind the open panel */ .mnav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms ease; z-index: 90; } .mnav-open .mnav-backdrop { opacity: 1; visibility: visible; } /* ===================== Mobile / tablet ===================== */ /* 900px covers the largest per-page nav-hide breakpoint (home uses 900px, others 860px) so there is never a dead zone where the page hides the nav but no hamburger appears. */ @media (max-width: 900px) { .mnav-toggle { display: inline-flex; } /* Keep the top bar a clean single row: brand left, hamburger right. */ header.topbar, header.nav-bar { flex-wrap: nowrap !important; align-items: center !important; } /* The nav becomes a slide-down panel anchored top-right. Covers both class names. Hidden until .mnav-open is set on . */ header.topbar > nav.nav, header.nav-bar > nav.nav-links { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: min(86vw, 340px) !important; height: 100dvh; max-height: 100dvh; overflow-y: auto; /* Override per-page `.nav { display: none }` (home) — the panel must render so it can slide in. Pages that only hide the links keep working. */ display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 4px !important; flex-wrap: nowrap !important; background: #0a0b0a; border-left: 1px solid rgba(214, 164, 98, 0.25); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.6); padding: 84px 22px 28px !important; /* !important so a per-page transform on nav.nav-links can never strand the panel off-screen (datenmobilitaet etc. set their own nav transforms). */ transform: translateX(100%) !important; transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 95; } .mnav-open header.topbar > nav.nav, .mnav-open header.nav-bar > nav.nav-links { transform: translateX(0) !important; } /* Links inside the panel: full-width, comfortable touch targets, and OVERRIDE the per-page "display:none" that hid them on mobile. */ header.topbar > nav.nav > a, header.nav-bar > nav.nav-links > a, header.nav-bar > nav.nav-links > a:not(.demo) { display: block !important; width: 100% !important; padding: 13px 6px !important; font-size: 15px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; border-bottom: 1px solid rgba(242, 238, 229, 0.08); opacity: 1 !important; color: #e8e6df !important; } header.topbar > nav.nav > a:last-of-type, header.nav-bar > nav.nav-links > a:last-of-type { border-bottom: 0; } /* The CTA pill keeps its accent but goes full width inside the panel. */ header.topbar > nav.nav > a.nav-cta, header.nav-bar > nav.nav-links > a.demo, header.nav-bar > nav.nav-links > a.pilot { margin-top: 12px; text-align: center; border: 1px solid rgba(214, 164, 98, 0.6) !important; border-radius: 999px; color: #d6a462 !important; padding: 13px 16px !important; } /* Language switcher: sits at the bottom of the panel, full width. Its dropdown opens in-flow (below the trigger) instead of absolute. */ header.topbar > nav.nav .lang-switcher, header.nav-bar > nav.nav-links .lang-switcher { margin: 16px 0 0 0 !important; width: 100%; } header.topbar > nav.nav .lang-switcher__trigger, header.nav-bar > nav.nav-links .lang-switcher__trigger { width: 100%; justify-content: flex-start; font-size: 13px !important; padding: 12px 14px !important; } header.topbar > nav.nav .lang-switcher__menu, header.nav-bar > nav.nav-links .lang-switcher__menu { position: static !important; width: 100%; min-width: 0 !important; margin-top: 6px !important; box-shadow: none !important; max-height: 40vh; overflow-y: auto; } /* Prevent body scroll under the open panel. */ .mnav-open, .mnav-open body { overflow: hidden; } } /* Desktop safety: never show the toggle or backdrop above the breakpoint. */ @media (min-width: 901px) { .mnav-toggle, .mnav-backdrop { display: none !important; } }