/* ================================================================
   anwaltarbeitsrecht.net — Mega-Menu — v9 / 1.9.7
   ----------------------------------------------------------------
   v8 war konzeptionell richtig, aber zwei Cascade-Konflikte
   verhinderten den Effekt:

   (1) fixes-v5.css Z.437 setzt das Master-Detail-Panel auf
       position:fixed; left:50%; transform:translateX(-50%);
       min-width:1100px — bei content-basierter Breite (max-content)
       schwankt das Panel pro Top-Level-Item; die translateX(-50%)-
       Zentrierung pro <li> verschiebt es horizontal je nach Trigger.
       In Kombination mit Astras eigenen Hover-Styles am Trigger
       (font-weight/letter-spacing) verschiebt sich das ganze
       rechtsbuendige Flex-Layout.

   (2) v8's plainer Selektor `html body .awa-mega-panel` hat
       Spezifitaet (0,1,2); v5's `html body .main-navigation
       .awa-mega-panel.awa-mega-master-detail` hat (0,3,2) und
       gewinnt, obwohl v8 spaeter geladen wird.

   v9 loest beides:
   - Identische Selektoren wie v5 (Spezifitaet 0,3,2) und damit
     spaetere Cascade-Position → v9 gewinnt deterministisch.
   - Top-Level-Items bekommen feste min-widths (8rem fuer Mega-
     Items, 9rem fuer CTA), zentrierten Text. Damit kann der Inhalt
     beliebig schwanken (font-weight, italic, etc.) ohne dass die
     Box-Breite sich aendert — keine Layout-Verschiebung mehr.
   ================================================================ */

body { --awa-build: "v1.9.7-locked-positions" !important; }

/* === (0) CSS-Variable fuer y-Koordinate Menue-Unterkante =========
   Default 88px (Astra-Header-Hoehe mit unseren Paddings). User
   kann via Customizer Additional CSS ueberschreiben. */
:root {
  --awa-menu-bottom: 88px;
  --awa-mega-side-gutter: .5rem;
}
body.admin-bar {
  --awa-menu-bottom: 120px; /* + 32px Admin-Bar */
}

/* === (1) Feste Item-Positionen — keine Verschiebung beim Hover ===
   min-width pro Item + zentrierter Text + alle width-relevanten
   Properties in allen States identisch. Damit kann Astra hovern
   was es will — die Box bleibt gleich gross. */
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 {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .main-header-menu > li.awa-has-mega > a,
html body .main-header-menu > li.awa-has-mega > a:link,
html body .main-header-menu > li.awa-has-mega > a:visited,
html body .main-header-menu > li.awa-has-mega > a:hover,
html body .main-header-menu > li.awa-has-mega > a:focus,
html body .main-header-menu > li.awa-has-mega > a:focus-visible,
html body .main-header-menu > li.awa-has-mega > a:active,
html body .main-header-menu > li.awa-has-mega.current-menu-item > a,
html body .main-header-menu > li.awa-has-mega.current-menu-ancestor > a,
html body .main-navigation > ul > li.awa-has-mega > a,
html body .main-navigation > ul > li.awa-has-mega > a:link,
html body .main-navigation > ul > li.awa-has-mega > a:visited,
html body .main-navigation > ul > li.awa-has-mega > a:hover,
html body .main-navigation > ul > li.awa-has-mega > a:focus,
html body .main-navigation > ul > li.awa-has-mega > a:focus-visible,
html body .main-navigation > ul > li.awa-has-mega > a:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .375rem !important;
  /* Feste Box-Breite — Inhalt darf wachsen, Box nicht */
  min-width: 8rem !important;
  width: 8rem !important;
  flex-shrink: 0 !important;
  padding: 1.25rem .5rem !important;
  margin: 0 !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* CTA "Anfrage stellen" — Button bleibt Button, aber feste Breite */
html body .main-header-menu > li.awa-cta > a,
html body .main-header-menu > li.awa-cta > a:link,
html body .main-header-menu > li.awa-cta > a:visited,
html body .main-header-menu > li.awa-cta > a:hover,
html body .main-header-menu > li.awa-cta > a:focus,
html body .main-navigation > ul > li.awa-cta > a,
html body .main-navigation > ul > li.awa-cta > a:hover,
html body .main-navigation > ul > li.awa-cta > a:focus,
/* Fallback: letztes Item (falls .awa-cta-Klasse fehlt) */
html body .main-header-menu > li:last-child > a,
html body .main-header-menu > li:last-child > a:hover,
html body .main-navigation > ul > li:last-child > a,
html body .main-navigation > ul > li:last-child > a:hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 10rem !important;
  width: 10rem !important;
  flex-shrink: 0 !important;
  padding: .65rem 1rem !important;
  margin-left: .75rem !important;
  background: var(--awa-cta, #f0a830) !important;
  color: var(--awa-cta-text, #1a1a1a) !important;
  border-radius: var(--awa-radius, 8px) !important;
  font-weight: 700 !important;
  font-size: .9375rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Hover-Color: nur Farbe, keine Box-Aenderung */
html body .main-header-menu > li.awa-has-mega > a:hover,
html body .main-navigation > ul > li.awa-has-mega > a:hover {
  color: var(--awa-primary, #2b5f8a) !important;
}

/* Top-Level-Underline bleibt erhalten — sie ist absolute, kein Layout-Impact.
   Aber: korrigiere die Position auf die neue zentrierte Item-Box (8rem). */
html body .main-header-menu > li.awa-has-mega > a::before,
html body .main-navigation > ul > li.awa-has-mega > a::before {
  left: 1.25rem !important;
  right: 1.25rem !important;
}

/* === (2) Panel: position:fixed, BILDSCHIRMFUELLEND ===============
   Selektoren mit Spezifitaet (0,3,2) — identisch mit v5's
   Selektoren, aber v9 wird spaeter geladen → gewinnt Cascade.
   left/right je .5rem → Panel spannt vom linken bis zum rechten
   Bildschirmrand mit minimalem Inset. */
html body .main-header-menu .awa-has-mega .awa-mega-panel,
html body .main-header-menu .awa-mega-panel.awa-mega-master-detail,
html body .main-header-menu .awa-mega-panel.awa-mega-simple-panel,
html body .main-navigation .awa-has-mega .awa-mega-panel,
html body .main-navigation .awa-mega-panel.awa-mega-master-detail,
html body .main-navigation .awa-mega-panel.awa-mega-simple-panel {
  position: fixed !important;
  top: var(--awa-menu-bottom) !important;
  left: var(--awa-mega-side-gutter) !important;
  right: var(--awa-mega-side-gutter) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 0 0 var(--awa-radius-lg, 12px) var(--awa-radius-lg, 12px) !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 14px 40px rgba(15, 30, 50, .14) !important;
  overflow: hidden !important;
  /* Closed: opacity + Grace-Period */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .15s ease .35s,
    visibility 0s linear .5s !important;
}

/* Open-State — gleiche Spezifitaet, gewinnt durch Cascade-Position */
html body .main-header-menu .awa-has-mega:hover > .awa-mega-panel,
html body .main-header-menu .awa-has-mega:focus-within > .awa-mega-panel,
html body .main-navigation .awa-has-mega:hover > .awa-mega-panel,
html body .main-navigation .awa-has-mega:focus-within > .awa-mega-panel,
html body .main-header-menu .awa-mega-panel:hover,
html body .main-header-menu .awa-mega-panel:focus-within,
html body .main-navigation .awa-mega-panel:hover,
html body .main-navigation .awa-mega-panel:focus-within {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition:
    opacity .15s ease 0s,
    visibility 0s linear 0s !important;
}

/* Cross-Item Snap-Close: anderes Top-Level :hover → anderes Panel sofort zu */
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,
html body .main-header-menu:has(.awa-has-mega:focus-within) .awa-has-mega:not(:hover):not(:focus-within) > .awa-mega-panel,
html body .main-navigation:has(.awa-has-mega:focus-within) .awa-has-mega:not(:hover):not(:focus-within) > .awa-mega-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0s, visibility 0s !important;
}

/* === (3) Hover-Bridge: Trigger-Unterkante → Panel-Oberkante ======
   Mit Panel auf position:fixed an viewport top:88px und Trigger im
   normalen Flow ist die Bridge der einzige Hover-Continuum-Pfad. */
html body .awa-has-mega > a {
  position: relative !important;
}
html body .awa-has-mega > a::after {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  right: -16px !important;
  bottom: -20px !important;
  height: 28px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* === (4) Master-Detail-Innenlayout an volle Breite anpassen ======
   v5 hat min-height:520px am Wrapper — bei mehr Breite passt jetzt
   alles in weniger Hoehe. Cities-Grid bekommt mehr Spalten. */
html body .awa-mega-panel.awa-mega-master-detail .awa-md-wrapper {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  min-height: 0 !important;
  max-height: calc(100vh - var(--awa-menu-bottom) - 1rem) !important;
}

html body .awa-mega-master-detail .awa-md-flyout {
  max-height: calc(100vh - var(--awa-menu-bottom) - 2rem) !important;
  overflow-y: auto !important;
}

html body .awa-mega-master-detail .awa-md-flyout > .awa-md-cities {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
@media (max-width: 1680px) {
  html body .awa-mega-master-detail .awa-md-flyout > .awa-md-cities {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1440px) {
  html body .awa-mega-master-detail .awa-md-flyout > .awa-md-cities {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1200px) {
  html body .awa-mega-master-detail .awa-md-flyout > .awa-md-cities {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1024px) {
  html body .awa-mega-master-detail .awa-md-flyout > .awa-md-cities {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Simple-Panel (Zielgruppen): mehrspaltig statt 2 */
html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-simple-list,
html body .awa-mega-panel.awa-mega-simple-panel > ul,
html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-zielgruppe-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .5rem 1rem !important;
  padding: 1.75rem 2rem !important;
  max-width: none !important;
}
@media (max-width: 1200px) {
  html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-simple-list,
  html body .awa-mega-panel.awa-mega-simple-panel > ul,
  html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-zielgruppe-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-simple-list,
  html body .awa-mega-panel.awa-mega-simple-panel > ul,
  html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-zielgruppe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* === (5) Master-Detail-Flyout Grace-Period (aus v7 bekraeftigt) == */
html body .awa-mega-master-detail .awa-md-item > .awa-md-flyout {
  transition:
    opacity .15s ease .25s,
    visibility 0s linear .4s !important;
}
html body .awa-mega-master-detail .awa-md-item:hover > .awa-md-flyout,
html body .awa-mega-master-detail .awa-md-item:focus-within > .awa-md-flyout {
  transition:
    opacity .15s ease 0s,
    visibility 0s linear 0s !important;
}

/* === (6) Mobile: Panel aus, Item-Widths zurueck auf auto ========= */
@media (max-width: 921px) {
  html body .main-header-menu > li.awa-has-mega > a,
  html body .main-navigation > ul > li.awa-has-mega > a {
    min-width: 0 !important;
    width: auto !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  html body .main-header-menu > li.awa-cta > a,
  html body .main-header-menu > li:last-child > a,
  html body .main-navigation > ul > li.awa-cta > a,
  html body .main-navigation > ul > li:last-child > a {
    min-width: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    background: transparent !important;
    color: var(--awa-text, #1a1a1a) !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  html body .awa-mega-panel,
  html body .main-header-menu .awa-mega-panel,
  html body .main-navigation .awa-mega-panel {
    display: none !important;
  }
}

/* === (7) Reduced Motion ========================================== */
@media (prefers-reduced-motion: reduce) {
  html body .main-header-menu .awa-has-mega .awa-mega-panel,
  html body .main-navigation .awa-has-mega .awa-mega-panel,
  html body .awa-mega-master-detail .awa-md-item > .awa-md-flyout {
    transition: opacity 0s, visibility 0s !important;
  }
}