/** * EDDAIR — Mobile Drawer + Hamburger (Sprint 15) * Desktop-Navigation bleibt in den jeweiligen Seiten-Styles. * .eddair-nav-transparent auf für transparente Header (helles Toggle-Banner). */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; margin-right: 12px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; color: inherit; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .eddair-nav-transparent #main-nav:not(.scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.35); } #main-nav.scrolled .nav-toggle { border-color: rgba(10, 10, 10, 0.22); } .nav-toggle:focus-visible { outline: 2px solid #b08968; outline-offset: 3px; } .nav-toggle-bar { display: block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } @media (max-width: 1024px) { .nav-toggle { display: flex; } .nav-links { display: flex; flex-direction: column; align-items: flex-start; position: fixed; left: 0; right: 0; top: 89px; bottom: 0; max-height: calc(100dvh - 89px); overflow-y: auto; padding: 28px 32px 48px; gap: 18px; background: #fff; color: #0a0a0a; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } #main-nav.nav-mobile-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } #main-nav.nav-mobile-open .nav-links a { font-size: 16px; padding: 8px 0; width: 100%; } }