/* ================================================================
   anwaltarbeitsrecht.net — Mega-Menu — v8 / 1.9.6
   ----------------------------------------------------------------
   Loest vier verbleibende User-Reports:

   (A) Top-Level-Items rutschen beim Hover nach links
       Ursache: Astra / Browser-Default veraendert beim :hover die
       Schrift (font-weight/letter-spacing) oder das Padding, was im
       flex-row-Layout die Items neu anordnet. Fuer den am weitesten
       rechts liegenden hover-Trigger wandert dieser unter dem Cursor
       weg -> :hover reisst ab -> Panel schliesst.
       Loesung: Trigger-Breiten ueber width:max-content festfrieren
       und ALLE width-relevanten Properties (font-weight, padding,
       letter-spacing, margin) ueber alle States hinweg konstant
       halten.

   (B) Submenu "Ratgeber" schliesst sich gleich wieder
       Folgefehler aus (A) — Trigger verschiebt sich aus dem Cursor.
       Mit (A) geloest. Zusaetzlich: kein Gap mehr zwischen Menue-
       leiste und Panel-Oberkante.

   (C) Gap reduzieren, Submenu direkt unter Hauptmenue
       Loesung: Panel position:fixed am Viewport, top wird per
       CSS-Var --awa-menu-bottom gesteuert (Default 88px, mit
       Admin-Bar +32px). Vermeidet die "rutscht auf ancestor-
       hoehe"-Falle aus v5/v6.

   (D) Submenu breiter, bildschirmfuellend
       Loesung: left: .75rem; right: .75rem; width: auto;
       Panel spannt fast die volle Viewport-Breite, kein horiz.
       Scroll mehr noetig.

   v8 wird NACH v7 geladen und ueberschreibt alle vorigen Mega-
   Positionierungen mit hoechster Spezifitaet.
   ================================================================ */

body { --awa-build: "v1.9.6-fixed-pos-fullscreen" !important; }

/* CSS-Variable: y-Koordinate der Menueleisten-Unterkante.
   Astra-Header ist typisch ~88px hoch; mit Admin-Bar +32px. */
:root {
  --awa-menu-bottom: 88px;
}
body.admin-bar {
  --awa-menu-bottom: 120px;
}

/* === (A1) Top-Level-Item-Breiten einfrieren =====================
   width:max-content + alle layout-relevanten Properties identisch
   in allen Pseudo-States. Items koennen sich nicht mehr verschieben. */
html body .main-header-menu > li,
html body .main-navigation > ul > li,
html body ul.main-header-menu > li {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .main-header-menu > li > a,
html body .main-header-menu > li > a:link,
html body .main-header-menu > li > a:visited,
html body .main-header-menu > li > a:hover,
html body .main-header-menu > li > a:focus,
html body .main-header-menu > li > a:focus-visible,
html body .main-header-menu > li > a:active,
html body .main-header-menu > li.current-menu-item > a,
html body .main-header-menu > li.current-menu-ancestor > a,
html body .main-navigation > ul > li > a,
html body .main-navigation > ul > li > a:link,
html body .main-navigation > ul > li > a:visited,
html body .main-navigation > ul > li > a:hover,
html body .main-navigation > ul > li > a:focus,
html body .main-navigation > ul > li > a:focus-visible,
html body .main-navigation > ul > li > a:active {
  /* Breite und Layout-Properties: ALLE States identisch */
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important;
  width: max-content !important;
  min-width: max-content !important;
  flex-shrink: 0 !important;
  padding: 1.25rem 1rem !important;
  margin: 0 !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* CTA "Anfrage stellen" (letztes Item) — Button-Styling beibehalten,
   aber Breite ebenfalls einfrieren */
html body .main-header-menu > li:last-child > a,
html body .main-header-menu > li:last-child > a:hover,
html body .main-header-menu > li:last-child > a:focus,
html body .main-navigation > ul > li:last-child > a,
html body .main-navigation > ul > li:last-child > a:hover,
html body .main-navigation > ul > li:last-child > a:focus {
  padding: .65rem 1.15rem !important;
  margin-left: .75rem !important;
  background: var(--awa-cta) !important;
  color: var(--awa-cta-text) !important;
  border-radius: var(--awa-radius) !important;
  font-weight: 700 !important;
  width: max-content !important;
  min-width: max-content !important;
}

/* Hover-Color nur Farbwechsel, keine Box-Aenderung */
html body .main-header-menu > li > a:hover,
html body .main-navigation > ul > li > a:hover {
  color: var(--awa-primary) !important;
}
html body .main-header-menu > li:last-child > a:hover,
html body .main-navigation > ul > li:last-child > a:hover {
  background: var(--awa-cta-hover) !important;
  color: var(--awa-cta-text) !important;
}

/* === (C) + (D) Panel: fixed am Viewport, bildschirmfuellend ======
   position:fixed garantiert, dass das Panel unabhaengig von
   Astras Header-Container-Strukturen IMMER direkt am Viewport
   verankert ist — kein "rutscht hoch zu naechstem positionierten
   Ancestor"-Bug mehr. */
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-panel,
html body .awa-mega-panel.awa-mega-master-detail,
html body .awa-mega-panel.awa-mega-simple-panel {
  position: fixed !important;
  top: var(--awa-menu-bottom) !important;
  left: .75rem !important;
  right: .75rem !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;
  /* Open sofort, Close mit 350ms Grace-Period */
  transition:
    opacity .15s ease .35s,
    visibility 0s linear .5s !important;
}

/* Open-State */
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 .awa-mega-panel:hover,
html body .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;
}

/* === Hover-Bridge zwischen Menueleiste und Panel =================
   Mit position:fixed am Panel ist der "Gap" in absoluter Viewport-
   Koordinate gleich null (panel-top == menu-bottom). Aber zwischen
   Trigger-<a>-Visual-Box (innerhalb der Menueleiste) und Panel-Top
   kann es je nach Padding einen 2-4px Streifen geben, in dem weder
   <a> noch Panel rendert. Bridge schliesst diesen Streifen. */
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: -16px !important;
  height: 24px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* === Cross-Item Snap-Close ======================================
   Wenn ein anderes Top-Level :hover/:focus bekommt, Snap-Close
   ohne Grace-Period — verhindert Panel-Ueberlappung. */
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;
}

/* === Master-Detail-Innenlayout an volle Breite anpassen ===========
   Wrapper streckt sich, Detail-Spalte bekommt mehr Platz, Cities
   nutzen mehr Spalten. */
html body .awa-mega-panel.awa-mega-master-detail .awa-md-wrapper {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  min-height: 480px !important;
  max-height: calc(100vh - var(--awa-menu-bottom) - 1rem) !important;
}

/* Bei sehr breiten Viewports mehr Spalten fuer Staedte */
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-Innenlayout — mehr Spalten bei mehr Breite */
html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-simple-list,
html body .awa-mega-panel.awa-mega-simple-panel .awa-mega-zielgruppe-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 1.75rem 2rem !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 .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 .awa-mega-zielgruppe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* === Master-Detail-Flyout: Grace-Period beibehalten ==============
   Aus v7 — sicherstellen, dass v8 das nicht ueberschreibt. */
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;
}

/* === Mobile: Mega-Panel komplett aus (Astra Mobile-Menue) ========
   v5/v6 setzen das bereits, wir bestaetigen es defensiv fuer den
   gleichen Breakpoint. */
@media (max-width: 921px) {
  html body .awa-mega-panel,
  html body .main-header-menu .awa-mega-panel,
  html body .main-navigation .awa-mega-panel {
    display: none !important;
  }
}

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