/* ================================================================ anwaltarbeitsrecht.net — Mega-Menu Hover Fix — v6 / 1.9.4 ---------------------------------------------------------------- Ziel: Submenu klebt DIREKT unter dem Hauptmenue ohne Abstand. Damit loesen sich gleichzeitig beide v5-Probleme: (A) Top-Level "Ratgeber" rutscht beim Hover ueber "Staedte". Ursache: fixes-v5.css Z.437 hat das Master-Detail-Panel auf position:fixed; left:50% gesetzt — mit min-width:1100px laeuft das Panel ueber alle Top-Level-Items hinweg, z-index 1000 ueberdeckt sie visuell. (B) Submenu schliesst sich beim Klicken. Ursache: position:fixed; top:90px schafft eine Pixel-Luecke zwischen Trigger- und Panel. Maus wandert ueber leere Body-Flaeche -> :hover am
  • reisst ab -> close. Loesung: 1. Submenu wieder relativ zum Header-Container positionieren (.main-header-menu / .main-navigation hat schon position:relative). 2. top: 100% -> klebt direkt unter Menue-Bar, KEIN Gap. 3. Master-Detail-Panel-Breite begrenzen damit Top-Level-Items nicht ueberdeckt werden. ================================================================ */ body { --awa-build: "v1.9.4-no-gap" !important; } /* === (1) Master-Detail-Panel: position:fixed entfernen =========== fixes-v5.css L437 setzt position:fixed; top:90px. Wir holen das Panel zurueck in den Header-Container-Flow. Maximale Spezifitaet noetig damit unser Override gewinnt. */ html body .main-header-menu .awa-has-mega .awa-mega-panel.awa-mega-master-detail, html body .main-navigation .awa-has-mega .awa-mega-panel.awa-mega-master-detail { position: absolute !important; top: 100% !important; /* KLEBT direkt unter Menue-Bar */ left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) translateY(-4px) !important; margin: 0 !important; margin-top: 0 !important; /* KEIN GAP */ width: max-content !important; max-width: min(1240px, calc(100vw - 2rem)) !important; min-width: 900px !important; padding: 0 !important; overflow: hidden !important; border-radius: 0 0 var(--awa-radius-lg) var(--awa-radius-lg) !important; /* Open/Close OHNE delay — Maus muss keine Luecke ueberqueren */ transition: opacity .12s ease 0s, transform .12s cubic-bezier(.4, 0, .2, 1) 0s, visibility .12s 0s !important; } /* Admin-Bar: kein Sonderfall mehr noetig (war fuer position:fixed) */ html body.admin-bar .main-header-menu .awa-has-mega .awa-mega-panel.awa-mega-master-detail, html body.admin-bar .main-navigation .awa-has-mega .awa-mega-panel.awa-mega-master-detail { top: 100% !important; /* identisch — Admin-Bar verschiebt den Header schon */ } /* Open-State */ html body .main-header-menu .awa-has-mega:hover > .awa-mega-master-detail, html body .main-header-menu .awa-has-mega:focus-within > .awa-mega-master-detail, html body .main-navigation .awa-has-mega:hover > .awa-mega-master-detail, html body .main-navigation .awa-has-mega:focus-within > .awa-mega-master-detail, html body .awa-mega-master-detail:hover, html body .awa-mega-master-detail:focus-within { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; transition: opacity .12s ease 0s, transform .12s cubic-bezier(.4, 0, .2, 1) 0s, visibility 0s 0s !important; } /* === (2) Simple-Panel (Zielgruppen) — gleiche Behandlung ========= fixes-v5.css behandelt nur master-detail mit position:fixed; das simple-Panel folgt main.css mit position:absolute am
  • . Wir vereinheitlichen: am Header-Container ankern, kein Gap. */ html body .main-header-menu .awa-has-mega .awa-mega-panel.awa-mega-simple-panel, html body .main-navigation .awa-has-mega .awa-mega-panel.awa-mega-simple-panel { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) translateY(-4px) !important; margin: 0 !important; margin-top: 0 !important; width: max-content !important; max-width: min(900px, calc(100vw - 2rem)) !important; min-width: 500px !important; transition: opacity .12s ease 0s, transform .12s cubic-bezier(.4, 0, .2, 1) 0s, visibility .12s 0s !important; } html body .main-header-menu .awa-has-mega:hover > .awa-mega-simple-panel, html body .main-header-menu .awa-has-mega:focus-within > .awa-mega-simple-panel, html body .main-navigation .awa-has-mega:hover > .awa-mega-simple-panel, html body .main-navigation .awa-has-mega:focus-within > .awa-mega-simple-panel, html body .awa-mega-simple-panel:hover, html body .awa-mega-simple-panel:focus-within { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; transition: opacity .12s ease 0s, transform .12s cubic-bezier(.4, 0, .2, 1) 0s, visibility 0s 0s !important; } /* === (3)
  • .awa-has-mega: position:static ===================== Damit das Panel am Header-Container (.main-header-menu) verankert wird statt am einzelnen
  • . Sonst zentriert translateX(-50%) das Panel ueber der Item-Mitte und ueberdeckt Nachbar-Items. */ html body .main-header-menu > li.awa-has-mega, html body .main-navigation > ul > li.awa-has-mega, html body ul.main-header-menu > li.awa-has-mega { position: static !important; } /* === (4) Hover-Bridge unter Trigger ============================== Mit top:100% am Panel ist KEIN Gap mehr da. Aber: die Underline- Bar am Trigger ist bei bottom:.85rem — die Maus koennte beim Verlassen des Triggers nach unten noch unter die Underline rutschen bevor sie das Panel erreicht. Bridge schliesst diesen Mikro-Gap. */ html body .awa-has-mega > a { position: relative !important; } html body .awa-has-mega > a::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -4px !important; height: 6px !important; background: transparent !important; pointer-events: auto !important; } /* === (5) Panel-Background solid, eigener Stacking-Context ======== Verhindert dass linke Nachbar-Items durch das Panel "durchblitzen". isolation:isolate gibt dem Panel einen eigenen Stacking-Context, sodass z-index-Konflikte mit Astra-Elements ausgeschlossen sind. */ html body .awa-mega-panel { background: #fff !important; isolation: isolate; } /* === (6) Wenn EIN Panel offen ist, ALLE anderen sofort schliessen Verhindert Ueberlappung zweier Panels beim diagonalen Wechsel zwischen Top-Level-Items. */ html body .main-header-menu:has(.awa-has-mega:hover) .awa-has-mega:not(:hover):not(:focus-within) > .awa-mega-panel, html body .main-navigation:has(.awa-has-mega:hover) .awa-has-mega:not(:hover):not(:focus-within) > .awa-mega-panel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; } /* === (7) Caret-Breite fixieren =================================== .awa-menu-caret bekommt beim Hover rotate(180deg) — kann je nach Font-Rendering minimal die Box veraendern. Fix-Breite + flex-shrink:0 verhindert Layout-Shift. */ html body .awa-menu-caret { width: .7em !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* === (8) Top-Level beim Hover nicht verschieben ============== Sicherheitshalber: keine transform/margin-Aenderung beim Hover der Top-Level-Items (ausser CTA "Anfrage stellen"). */ html body .main-header-menu > li:not(:last-child) > a:hover, html body .main-navigation > ul > li:not(:last-child) > a:hover { transform: none !important; }