/* === Header-Navigation: gruppierte Dropdowns (Produkt/Unternehmen) + Direkt-Links (Preise, FAQ). Eine einheitliche Nav, per nav-groups.js zur Laufzeit in .nav-links (Desktop) und #mobileMenu (Akkordeon) aufgebaut. Glas-Panel im Header-Stil. Hover + Klick öffnen, Escape/Außenklick schließen, Tastatur/ARIA. ~200ms, reduced-motion-sicher. Funktioniert sowohl im schwebenden Float-Header als auch im Shell-Header (Farben via Vererbung/Fallback). Der Header-Look (Glas, Form, Logo, Suche, CTA) bleibt unberührt — nur die Nav-Struktur. === */ /* ---------- Desktop: Trigger + Direkt-Links ---------- */ .nav-links .ng-item{position:relative;display:inline-flex} .nav-links .ng-trigger, .nav-links a.ng-direct{ display:inline-flex;align-items:center;gap:6px; font:inherit;font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1; color:inherit;background:none;border:0;cursor:pointer; padding:9px 13px;border-radius:10px;white-space:nowrap; transition:color .2s ease,background-color .2s ease} .nav-links .ng-trigger:hover, .nav-links .ng-trigger[aria-expanded="true"], .nav-links a.ng-direct:hover, .nav-links a.ng-direct[aria-current="page"]{color:var(--text,#fff)} .nav-links .ng-trigger:focus-visible, .nav-links a.ng-direct:focus-visible{outline:2px solid var(--green,#22e58f);outline-offset:2px;color:var(--text,#fff)} .nav-links .ng-chev{width:14px;height:14px;flex:none;opacity:.8;transition:transform .2s ease} .nav-links .ng-trigger[aria-expanded="true"] .ng-chev{transform:rotate(180deg)} /* ---------- Desktop: Glas-Dropdown-Panel ---------- Panel wird per JS an gehängt (escapet jede overflow:hidden-Klipp- UND Stacking-Falle des Headers) und position:FIXED unter dem Trigger platziert. z-index hoch, damit es über Hero/Inhalt liegt. top/left setzt nav-groups.js. */ .ng-panel{ position:fixed;top:0;left:0; min-width:228px;display:grid;gap:2px;padding:8px;z-index:2147483000; background:rgba(20,26,32,.94);border:1px solid rgba(255,255,255,.1);border-radius:16px; box-shadow:0 26px 64px -24px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ng-panel{background:rgba(20,26,32,.72);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1)} } /* unsichtbare Hover-Brücke zwischen Trigger und Panel (kein Flackern) */ .ng-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .ng-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .ng-panel a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--soft,#c8d0d6);white-space:nowrap;background:none;transition:background-color .18s ease,color .18s ease} .ng-panel a:hover, .ng-panel a:focus-visible{background:rgba(255,255,255,.06);color:var(--text,#fff);outline:none} .ng-panel a[aria-current="page"]{color:var(--green,#22e58f)} /* ---------- Mobil: Akkordeon im #mobileMenu ---------- */ .mobile-menu .ng-macc{border-bottom:1px solid rgba(255,255,255,.06)} .mobile-menu .ng-mtrigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; background:none;border:0;cursor:pointer;font:inherit;font-size:16px;font-weight:600; color:var(--soft,#c8d0d6);padding:13px 4px;text-align:left} .mobile-menu .ng-mtrigger:hover{color:var(--text,#fff)} .mobile-menu .ng-mtrigger .ng-chev{width:16px;height:16px;flex:none;opacity:.7;transition:transform .2s ease} .mobile-menu .ng-macc.open .ng-mtrigger .ng-chev{transform:rotate(180deg)} .mobile-menu .ng-msub{display:block;overflow:hidden;max-height:0;transition:max-height .25s ease} .mobile-menu .ng-macc.open .ng-msub{max-height:360px} .mobile-menu .ng-msub a{display:block;padding:11px 4px 11px 18px;color:var(--muted,#8f9aa5);font-size:15px;font-weight:500} .mobile-menu .ng-msub a:hover,.mobile-menu .ng-msub a[aria-current="page"]{color:var(--text,#fff)} .mobile-menu a.ng-mdirect{display:block;padding:13px 4px;font-size:16px;font-weight:600;color:var(--soft,#c8d0d6);border-bottom:1px solid rgba(255,255,255,.06)} .mobile-menu a.ng-mdirect:hover,.mobile-menu a.ng-mdirect[aria-current="page"]{color:var(--text,#fff)} /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion:reduce){ .nav-links .ng-panel,.nav-links .ng-chev, .mobile-menu .ng-msub,.mobile-menu .ng-chev{transition:none} }