/* =========================================================================== Mobile-Navigation für die UI-Kits --------------------------------------------------------------------------- Bis hierher waren .nav__links unter 900px schlicht ausgeblendet — auf dem Handy war die Seite damit nicht navigierbar. Diese Schicht ergänzt einen Auslöser und ein Panel, ohne die bestehende Desktop-Navigation anzufassen. Auslöser und Panel hängen direkt am , nicht im React-Baum: die Nav rendert bei jedem Scroll-Zustandswechsel neu und würde eingefügte Elemente sonst wieder entfernen. Farben: --brand ist in jedem Sub-Kit gesetzt, --sued-orange/--sued-blue kommen aus colors_and_type.css. Die Fallback-Kette deckt alle sechs Kits ab. =========================================================================== */ .mnav-burger, .mnav-panel, .mnav-scrim { display: none; } @media (max-width: 900px) { /* --- Auslöser ---------------------------------------------------------- */ .mnav-burger { display: flex; position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 1002; align-items: center; justify-content: center; gap: 5px; flex-direction: column; width: 48px; /* Fingerziel, nicht kleiner */ height: 48px; padding: 0; border: 1px solid rgba(250, 247, 241, 0.22); border-radius: 999px; background: var(--brand, var(--sued-orange, #222165)); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } .mnav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--fg-on-orange, #FFFFFF); transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .18s linear; } .mnav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mnav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); } .mnav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav-burger:focus-visible { outline: 3px solid var(--fg-on-orange, #FFFFFF); outline-offset: 3px; } /* --- Abdunklung -------------------------------------------------------- */ .mnav-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(10, 10, 16, 0.55); opacity: 0; pointer-events: none; transition: opacity .28s ease; } .mnav-scrim.is-open { opacity: 1; pointer-events: auto; } /* --- Panel ------------------------------------------------------------- */ .mnav-panel { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 1001; width: min(86vw, 380px); height: 100dvh; padding: calc(72px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); background: var(--ink, #1A1A22); border-left: 3px solid var(--brand, var(--sued-orange, #FF5F1E)); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .34s cubic-bezier(.32,.72,0,1); } .mnav-panel.is-open { transform: translateX(0); } .mnav-panel__label { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-soft, var(--sued-orange-light, #FF8351)); margin: 0 0 18px; } .mnav-panel ul { list-style: none; margin: 0 0 auto; padding: 0; } .mnav-panel li { border-bottom: 1px solid rgba(250, 247, 241, 0.12); } .mnav-panel li a { display: block; padding: 15px 2px; /* ergibt >48px Zeilenhöhe */ font-family: var(--font-sans, sans-serif); font-size: 19px; font-weight: 600; line-height: 1.3; color: #FAF7F1; /* 16.17:1 auf --ink ✓ */ text-decoration: none; } .mnav-panel li a:hover { color: var(--brand-soft, #FF8351); } /* Eigener Fokusring statt des blauen Browser-Defaults, der auf der dunklen Fläche wie ein Fremdkörper wirkt. */ .mnav-panel li a:focus-visible, .mnav-panel .mnav-cta:focus-visible { outline: 2px solid var(--brand-soft, #FF8351); outline-offset: 2px; border-radius: 4px; } /* Der Dialog selbst bekommt den Fokus beim Öffnen — ohne sichtbaren Ring. */ .mnav-panel:focus { outline: none; } /* Markenfamilien-Leiste als zweite Ebene im Panel */ .mnav-panel__brands { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(250, 247, 241, 0.18); } .mnav-panel__brands a { font-size: 15px; font-weight: 500; color: #DCDBED; /* 12.68:1 auf --ink ✓ */ } .mnav-panel .mnav-cta { display: block; margin-top: 24px; padding: 15px 22px; border-radius: 999px; background: var(--brand, var(--sued-orange, #FF5F1E)); color: var(--fg-on-orange, #FFFFFF); font-family: var(--font-sans, sans-serif); font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; } /* Sperrt den Hintergrund, solange das Panel offen ist */ body.mnav-locked { overflow: hidden; } /* Die Desktop-Leiste bleibt ausgeblendet — der Auslöser ersetzt sie. */ } @media (prefers-reduced-motion: reduce) { .mnav-panel, .mnav-scrim, .mnav-burger span { transition-duration: .01ms; } }