/* ================================================================
   AWA Mega Menu — Strafe.com-Style 3-Level
   ----------------------------------------------------------------
   Klassen-Konvention:
     .awa-mm-trigger      Top-Level <li> mit der CSS-Klasse "awa-mega"
     .awa-mm-toplink      Top-Level <a>
     .awa-mm-panel        Mega-Container — fixed an Viewport, full width
     .awa-mm-inner        Grid-Wrapper: Spalte-1 + Flyout-Bereich
     .awa-mm-col1         Linke Spalte mit den L1-Items
     .awa-mm-l1           L1-<li> (z.B. ein Bundesland)
     .awa-mm-l1link       L1-<a>
     .awa-mm-l1label      L1-Text
     .awa-mm-l1count      Counter-Pill (Anzahl L2-Children)
     .awa-mm-l1chev       Chevron-Indikator
     .awa-mm-flyout       Rechte Detail-Spalte fuer ein L1-Item
     .awa-mm-flyhead      Flyout-Header (Titel + "Alle in X →")
     .awa-mm-flytitle     <h4> im Flyout-Header
     .awa-mm-flyall       "Alle in X →"-Link
     .awa-mm-l2grid       Grid mit den L2-Items (Spalten 2-6 visuell)
   ================================================================ */

:root {
  --awa-mm-build:         "1.0.5-with-fallbacks";
  --awa-mm-top:           60px;
  --awa-mm-side:          12px;
  --awa-mm-col1-w:        280px;
  --awa-mm-z:             9999;

  --awa-mm-bg:            #ffffff;
  --awa-mm-bg-soft:       #f5f7fa;
  --awa-mm-border:        #e5e7eb;
  --awa-mm-text:          #1a1a1a;
  --awa-mm-text-muted:    #6b7280;
  --awa-mm-accent:        #2b5f8a;
  --awa-mm-accent-dark:   #1d4666;
  --awa-mm-accent-tint:   #e8f1f8;
  --awa-mm-shadow:        0 14px 40px rgba(15, 30, 50, .14);
  --awa-mm-radius:        8px;
  --awa-mm-radius-lg:     12px;
}

/* ============== Top-Level-Trigger =============================== */
.awa-mm-trigger {
  position: static !important;  /* Panel anchor walks up to a wider container */
}

.awa-mm-toplink {
  position: relative;
}

.awa-mm-caret {
  display: inline-block;
  margin-left: .25em;
  font-size: .85em;
  opacity: .65;
  transition: transform .15s ease, opacity .15s ease;
}
.awa-mm-trigger:hover > .awa-mm-toplink .awa-mm-caret,
.awa-mm-trigger:focus-within > .awa-mm-toplink .awa-mm-caret,
.awa-mm-trigger.awa-mm-open > .awa-mm-toplink .awa-mm-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Hover-Bridge zwischen Trigger und Panel —
   pointer-events nur aktiv im hover/open-State. */
.awa-mm-toplink::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -32px;
  height: 40px;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.awa-mm-trigger:hover > .awa-mm-toplink::after,
.awa-mm-trigger:focus-within > .awa-mm-toplink::after,
.awa-mm-trigger.awa-mm-open > .awa-mm-toplink::after {
  pointer-events: auto;
}

/* ============== Mega-Panel ====================================== */
/* Position-Properties mit !important + Fallback-Werten in var() —
   damit das Panel auch dann volle Viewport-Breite spannt, wenn die
   :root-Variablen aus irgendeinem Grund nicht angewendet werden
   (z.B. CSS-Parse-Error, falsches Stylesheet geladen). Wichtig:
   wenn left/right ungueltig werden, schrumpft das fixed-Element auf
   Content-Breite — was den Bug "Flyout nur 48px breit" verursacht hat. */
.awa-mm-panel {
  position: fixed !important;
  top: var(--awa-mm-top, 60px) !important;
  left: var(--awa-mm-side, 12px) !important;
  right: var(--awa-mm-side, 12px) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: var(--awa-mm-z, 9999) !important;
  background: var(--awa-mm-bg, #fff) !important;
  border-radius: 0 0 var(--awa-mm-radius-lg, 12px) var(--awa-mm-radius-lg, 12px);
  box-shadow: var(--awa-mm-shadow, 0 14px 40px rgba(15, 30, 50, .14));
  overflow: hidden;
  /* Closed: opacity, KEINE pointer-events-Manipulation —
     visibility:hidden uebernimmt die Interaktivitaet. */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .15s ease .25s,
    visibility 0s linear .4s;
}

/* Open via :hover, :focus-within ODER .awa-mm-open (JS-Klasse) */
.awa-mm-trigger:hover > .awa-mm-panel,
.awa-mm-trigger:focus-within > .awa-mm-panel,
.awa-mm-trigger.awa-mm-open > .awa-mm-panel,
.awa-mm-panel:hover,
.awa-mm-panel:focus-within {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .15s ease 0s,
    visibility 0s linear 0s;
}

/* ============== Inner Grid (Spalte-1 + Flyout-Bereich) ========== */
.awa-mm-inner {
  display: grid !important;
  grid-template-columns: var(--awa-mm-col1-w, 280px) minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 480px;
  max-height: calc(100vh - var(--awa-mm-top, 60px) - 24px);
  position: relative;  /* Anker fuer absolute .awa-mm-flyout */
}

/* Hintergrund-Streifen fuer die Flyout-Spalte (auch wenn nichts aktiv) */
.awa-mm-inner::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: var(--awa-mm-bg);
}

/* ============== Spalte 1: L1-Items ============================== */
.awa-mm-col1 {
  list-style: none;
  margin: 0;
  padding: .5rem;
  background: var(--awa-mm-bg-soft);
  border-right: 1px solid var(--awa-mm-border);
  overflow-y: auto;
  grid-column: 1;
  grid-row: 1;
}

.awa-mm-l1 {
  list-style: none;
  margin: 0;
  padding: 0;
  position: static;  /* Flyout anchort am .awa-mm-inner, nicht hier */
}
.awa-mm-l1::marker,
.awa-mm-l1::before {
  content: "";
  display: none;
}

.awa-mm-l1link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  margin: .0625rem 0;
  color: var(--awa-mm-text);
  text-decoration: none;
  border-radius: var(--awa-mm-radius);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  position: relative;
  transition: background .12s ease, color .12s ease;
}

.awa-mm-l1label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awa-mm-l1count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: .125rem .45rem;
  background: var(--awa-mm-border);
  color: var(--awa-mm-text-muted);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}

.awa-mm-l1chev {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--awa-mm-text-muted);
  transition: transform .12s ease, color .12s ease;
}

/* Default-Aktiv: erster L1, wenn KEIN L1 gehovered/fokussiert ist.
   Anker auf .awa-mm-col1 — der Hover-State haelt die Markierung. */
.awa-mm-col1:not(:hover):not(:focus-within) > .awa-mm-l1:first-child > .awa-mm-l1link {
  background: var(--awa-mm-accent-tint);
  color: var(--awa-mm-accent-dark);
  font-weight: 600;
}
.awa-mm-col1:not(:hover):not(:focus-within) > .awa-mm-l1:first-child > .awa-mm-l1link .awa-mm-l1count {
  background: var(--awa-mm-accent);
  color: #fff;
}
.awa-mm-col1:not(:hover):not(:focus-within) > .awa-mm-l1:first-child > .awa-mm-l1link .awa-mm-l1chev {
  color: var(--awa-mm-accent);
  transform: translateX(3px);
}

/* Hover/Focus: das gehoverte L1 wird highlighted */
.awa-mm-l1:hover > .awa-mm-l1link,
.awa-mm-l1:focus-within > .awa-mm-l1link {
  background: var(--awa-mm-accent-tint);
  color: var(--awa-mm-accent-dark);
}
.awa-mm-l1:hover > .awa-mm-l1link .awa-mm-l1count,
.awa-mm-l1:focus-within > .awa-mm-l1link .awa-mm-l1count {
  background: var(--awa-mm-accent);
  color: #fff;
}
.awa-mm-l1:hover > .awa-mm-l1link .awa-mm-l1chev,
.awa-mm-l1:focus-within > .awa-mm-l1link .awa-mm-l1chev {
  color: var(--awa-mm-accent);
  transform: translateX(3px);
}

/* L1-Trigger-Bridge: rechts ueber die Spalten-Grenze hinaus.
   Verhindert Hover-Loss beim diagonalen Maus-Move ins Flyout. */
.awa-mm-l1:hover > .awa-mm-l1link::after,
.awa-mm-l1:focus-within > .awa-mm-l1link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 20px;
  background: transparent;
  pointer-events: auto;
  z-index: 5;
}

/* Fokus-Ring */
.awa-mm-l1link:focus-visible {
  outline: 2px solid var(--awa-mm-accent);
  outline-offset: -2px;
}

/* ============== Flyout (rechts) ================================= */
.awa-mm-flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--awa-mm-col1-w, 280px);
  right: 0;
  padding: 1.25rem 1.5rem;
  background: var(--awa-mm-bg);
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .15s ease,
    visibility 0s linear .15s;
}

/* Default-Aktiv-Flyout: erstes L1 sichtbar, solange Spalte-1 nicht
   gehovered/fokussiert ist. */
.awa-mm-col1:not(:hover):not(:focus-within) > .awa-mm-l1:first-child > .awa-mm-flyout {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transition: opacity .15s ease 0s, visibility 0s linear 0s;
}

/* Hover/Focus: jedes L1 zeigt sein eigenes Flyout. */
.awa-mm-l1:hover > .awa-mm-flyout,
.awa-mm-l1:focus-within > .awa-mm-flyout {
  opacity: 1;
  visibility: visible;
  z-index: 4;
  transition: opacity .15s ease 0s, visibility 0s linear 0s;
}

/* Flyout-Header */
.awa-mm-flyhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0 0 .625rem;
  border-bottom: 1px solid var(--awa-mm-border);
  flex-shrink: 0;
}

.awa-mm-flytitle {
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--awa-mm-accent-dark);
}
.awa-mm-flytitle a {
  color: inherit;
  text-decoration: none;
}
.awa-mm-flytitle a:hover {
  color: var(--awa-mm-accent);
}

.awa-mm-flyall {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--awa-mm-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap .12s ease, color .12s ease;
}
.awa-mm-flyall:hover {
  color: var(--awa-mm-accent-dark);
  gap: .5rem;
}

/* ============== L2-Grid (Spalten 2-6) =========================== */
.awa-mm-l2grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .25rem 1rem;
  flex: 1 1 auto;
  align-content: start;
}
@media (max-width: 1680px) {
  .awa-mm-l2grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .awa-mm-l2grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .awa-mm-l2grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.awa-mm-l2grid li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.awa-mm-l2grid li::marker,
.awa-mm-l2grid li::before {
  content: "";
  display: none;
}

.awa-mm-l2grid a {
  display: block;
  padding: .35rem .5rem;
  margin-left: -.5rem;
  color: var(--awa-mm-text);
  text-decoration: none;
  font-size: .85rem;
  line-height: 1.35;
  border-radius: var(--awa-mm-radius);
  transition: background .1s ease, color .1s ease, padding-left .12s ease;
  white-space: normal;
}
.awa-mm-l2grid a:hover,
.awa-mm-l2grid a:focus-visible {
  background: var(--awa-mm-accent-tint);
  color: var(--awa-mm-accent);
  padding-left: .625rem;
}
.awa-mm-l2grid a:focus-visible {
  outline: 2px solid var(--awa-mm-accent);
  outline-offset: 1px;
}

/* ============== Mobile: Panel aus =============================== */
@media (max-width: 921px) {
  .awa-mm-panel {
    display: none !important;
  }
  .awa-mm-caret {
    display: none;
  }
}

/* ============== Reduced Motion ================================== */
@media (prefers-reduced-motion: reduce) {
  .awa-mm-panel,
  .awa-mm-flyout,
  .awa-mm-l1link,
  .awa-mm-l1chev,
  .awa-mm-l1count,
  .awa-mm-caret {
    transition: none !important;
  }
}

/* ============== Theme-Override-Schutz ==========================
   Themes wie Astra haben oft eine Default-Regel
     .main-header-menu ul { display: none; }
   um verschachtelte Submenus standardmaessig zu verstecken. Unsere
   <ul class="awa-mm-l2grid"> ist eine verschachtelte <ul> und wuerde
   davon getroffen. Wir erzwingen unsere Display-Werte mit !important
   im Mobile-/Desktop-Mode. */
@media (min-width: 922px) {
  .awa-mm-panel        { display: block !important; }
  .awa-mm-inner        { display: grid !important; }
  .awa-mm-col1         { display: block !important; }
  .awa-mm-l1           { display: block !important; }
  .awa-mm-l1link       { display: flex !important; }
  .awa-mm-flyout       { display: flex !important; }
  .awa-mm-flyhead      { display: flex !important; }
  .awa-mm-l2grid       { display: grid !important; }
  .awa-mm-l2grid > li  { display: block !important; }
  .awa-mm-l2grid > li > a { display: block !important; }
}