/* ==========================================================================
   v111 - Perfektioniertes Navigations-Layout & Ärzte-Hub
   Mobile UI Hotfix: Vollständige Entkopplung vom Grid, Flex-Flow ohne Überlagerung
   HNO-Klinik am International Neuroscience Institute (INI) Hannover
   ========================================================================== */

/* --- DESKTOP & TABLET (>= 761px): 3-Spalten-Megamenü mit Querbanner --- */
@media (min-width: 761px) {
  .menu-panel {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .menu-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(20px, 2.6vw, 40px) !important;
    padding: clamp(20px, 2.6vh, 30px) 0 clamp(16px, 2vh, 24px) !important;
  }

  .menu-nav > * {
    min-width: 0;
  }

  /* Vertikale Trennlinie nur zwischen Spalte 1|2 und 2|3 */
  .menu-section[aria-labelledby="menu-patienten"]::after,
  .menu-nav > .menu-section:nth-of-type(3)::after,
  .menu-section--doctors::after {
    display: none !important;
    content: none !important;
  }

  /* Ärzte-Hub als voller Querbanner über alle 3 Spalten */
  .menu-nav .menu-section--doctors {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: clamp(8px, 1.2vw, 14px) !important;
    padding: clamp(14px, 1.4vw, 18px) clamp(18px, 2vw, 26px) !important;
    background: linear-gradient(135deg, rgba(244, 248, 250, 0.95), rgba(236, 243, 247, 0.85)) !important;
    border: 1px solid rgba(47, 125, 150, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(1, 38, 94, 0.035) !important;
    transition: background-color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .menu-nav .menu-section--doctors:hover {
    background: linear-gradient(135deg, rgba(239, 246, 249, 1), rgba(230, 240, 245, 0.95)) !important;
    border-color: rgba(47, 125, 150, 0.34) !important;
    box-shadow: 0 6px 20px rgba(1, 38, 94, 0.07) !important;
    transform: translateY(-1px);
  }

  .menu-nav .menu-section--doctors h2 {
    margin: 0 !important;
    color: var(--accent) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .menu-nav .menu-section--doctors h2::before,
  .menu-doctor-bullet {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 150, 0.14) !important;
    flex-shrink: 0 !important;
  }

  .menu-nav .menu-section--doctors > a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--text) !important;
    font-size: clamp(14px, 1.1vw, 15.5px) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 180ms var(--ease) !important;
  }

  .menu-nav .menu-section--doctors > a::before {
    display: none !important;
    content: none !important;
  }

  .menu-nav .menu-section--doctors > a::after,
  .menu-doctor-arrow {
    content: "→" !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--accent) !important;
    transition: transform 220ms var(--ease), color 220ms var(--ease) !important;
    flex-shrink: 0 !important;
  }

  .menu-nav .menu-section--doctors:hover > a {
    color: var(--accent-hover) !important;
  }

  .menu-nav .menu-section--doctors:hover > a::after,
  .menu-nav .menu-section--doctors:hover .menu-doctor-arrow {
    transform: translateX(5px) !important;
    color: var(--accent-hover) !important;
  }

  /* Footer auf Desktop: Klinik-Subtitel links, Impressum & Datenschutz rechts */
  .menu-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(221, 228, 231, 0.85) !important;
    padding-top: clamp(14px, 1.5vw, 18px) !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .menu-meta-brand {
    font-size: clamp(11.5px, 0.85vw, 12.5px) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
  }

  .menu-meta-links {
    display: flex !important;
    align-items: center !important;
    gap: clamp(16px, 2vw, 24px) !important;
  }
}

/* --- MOBILE (<= 760px): Vollständig entkoppeltes, fließendes Flex-Menü --- */
@media (max-width: 760px) {
  .menu-overlay {
    position: fixed !important;
    inset: var(--header-current-h, var(--header-h, 72px)) 0 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    background: #ffffff !important;
    z-index: 980 !important;
  }

  /* WICHTIGSTER FIX: Grid komplett auflösen und echtes Flex-Dokumenten-Layout nutzen */
  .menu-panel {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: #ffffff !important;
    padding: 20px 20px 48px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }

  .menu-overlay.is-open .menu-panel {
    transform: none !important;
  }

  .menu-panel-intro {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(221, 228, 231, 0.85) !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  .menu-panel-intro span {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    color: var(--text-secondary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  .menu-nav {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: 1 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 22px !important;
    padding: 18px 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .menu-section {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .menu-section::after {
    display: none !important;
    content: none !important;
  }

  .menu-section h2 {
    font-size: 11px !important;
    letter-spacing: 0.13em !important;
    margin: 0 0 8px !important;
    color: var(--text-secondary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }

  .menu-nav a {
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid rgba(221, 228, 231, 0.7) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    color: var(--text) !important;
    text-decoration: none !important;
    transition: background-color 150ms var(--ease), color 150ms var(--ease) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .menu-nav a::before {
    display: none !important;
    content: none !important;
  }

  .menu-nav a:hover,
  .menu-nav a:focus-visible {
    color: var(--accent) !important;
    background: rgba(47, 125, 150, 0.04) !important;
  }

  .menu-nav a.is-active,
  .menu-nav a[aria-current="page"] {
    color: var(--accent) !important;
    background: rgba(47, 125, 150, 0.07) !important;
    border-left: 3px solid var(--accent) !important;
    padding-left: 12px !important;
  }

  /* Ärzte-Hub als eigenständige, hochattraktive Karte auf Mobile */
  .menu-nav .menu-section--doctors {
    margin-top: 10px !important;
    padding: 16px 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(244, 248, 250, 0.98), rgba(236, 243, 247, 0.92)) !important;
    border: 1px solid rgba(47, 125, 150, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .menu-nav .menu-section--doctors h2 {
    color: var(--accent) !important;
    font-size: 11px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .menu-nav .menu-section--doctors h2::before,
  .menu-doctor-bullet {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 150, 0.14) !important;
  }

  .menu-nav .menu-section--doctors > a {
    font-size: 14.5px !important;
    font-weight: 650 !important;
    color: var(--text) !important;
    border-bottom: none !important;
    border-left: none !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .menu-nav .menu-section--doctors > a::after,
  .menu-doctor-arrow {
    content: "→" !important;
    display: inline-block !important;
    font-size: 15px !important;
    color: var(--accent) !important;
  }

  /* Rechtliche Links (Footer) auf Mobile - sitzt sauber ganz unten UNTER allen Links */
  .menu-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(221, 228, 231, 0.85) !important;
    margin-top: 24px !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .menu-meta-brand {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
    display: block !important;
  }

  .menu-meta-links {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
}

/* --- GEMEINSAME BUTTON-STILE FÜR IMPRESSUM / DATENSCHUTZ --- */
.menu-meta button {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: clamp(12px, 0.9vw, 13px) !important;
  font-weight: 550 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 180ms var(--ease) !important;
}

.menu-meta button:hover,
.menu-meta button:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* --- AKTIVER ZUSTAND WENN AUF DER ÄRZTE-SEITE --- */
.menu-nav .menu-section--doctors.is-current,
.menu-nav .menu-section--doctors:has(> a.is-active),
.menu-nav .menu-section--doctors:has(> a[aria-current="page"]) {
  background: linear-gradient(135deg, rgba(235, 244, 248, 1), rgba(225, 238, 244, 0.95)) !important;
  border-color: rgba(47, 125, 150, 0.42) !important;
  box-shadow: 0 4px 16px rgba(47, 125, 150, 0.08) !important;
}

.menu-nav .menu-section--doctors > a.is-active,
.menu-nav .menu-section--doctors > a[aria-current="page"] {
  color: var(--accent-hover) !important;
}