/* Herzenswesen — nav.css
   Aufklappmenü „Human Design“ (Desktop: Panel, Mobil: aufklappbarer Bereich).
   Ergänzt die Header-Styles der Seiten, ersetzt sie nicht. */

/* ---------- Desktop ---------- */
.nav-links{align-items:center}
.has-mega{position:relative}
.nav-mega-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:14.5px;color:var(--muted,#6B6D64)}
.nav-mega-toggle:hover,.has-mega.open .nav-mega-toggle{color:var(--sage-dark,#586152)}
.nav-mega-toggle svg{width:12px;height:12px;transition:transform .2s ease}
.has-mega.open .nav-mega-toggle svg{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(6px);
  width:min(900px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;gap:6px 28px;
  padding:26px 28px 22px;background:var(--paper,#FFFDF8);border:1px solid var(--line,#DDD8CD);border-radius:22px;
  box-shadow:0 24px 60px rgba(52,54,47,.16);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
/* unsichtbare Brücke, damit das Panel beim Hinüberfahren offen bleibt */
.mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease,transform .18s ease}
@media (hover:hover){
  .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);transition:opacity .18s ease,transform .18s ease}
}
.mega-col h4{font-family:'Karla',Arial,sans-serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:#9B7950;margin:0 0 10px}
.mega-col a{display:block;padding:5px 0;font-size:14.5px;font-weight:600;color:var(--ink,#34362F);line-height:1.35}
.mega-col a:hover{color:var(--sage-dark,#586152)}
.mega-col a small{display:block;font-weight:400;font-size:12.5px;color:var(--muted,#6B6D64)}
.mega-col a.mega-all{margin-top:6px;font-size:13px;font-weight:800;color:var(--sage-dark,#586152)}
.mega-profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mega-profiles a{text-align:center;padding:6px 0;border:1px solid var(--line,#DDD8CD);border-radius:999px;font-size:13.5px;font-weight:700;color:var(--sage-dark,#586152);background:var(--cream,#F8F4EC)}
.mega-profiles a:hover{background:var(--sage,#6E7862);border-color:var(--sage,#6E7862);color:#fff}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line,#DDD8CD);font-size:14px;color:var(--muted,#6B6D64)}
.mega-foot a{font-weight:800;color:var(--sage-dark,#586152)}
@media (max-width:1040px){.mega{grid-template-columns:1fr 1fr;width:min(620px,calc(100vw - 48px))}}

/* ---------- Mobil (im Hamburger-Menü) ---------- */
.mobile-sub-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;
  border-bottom:1px solid rgba(52,54,47,.08);padding:13px 0;cursor:pointer;font:inherit;font-weight:600;font-size:16px;
  color:var(--muted,#6B6D64);text-align:left}
.mobile-sub-toggle svg{width:14px;height:14px;transition:transform .2s ease}
.mobile-sub-toggle[aria-expanded="true"]{color:var(--sage-dark,#586152)}
.mobile-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobile-sub{display:none;padding:6px 0 14px;border-bottom:1px solid rgba(52,54,47,.08)}
.mobile-sub.open{display:block}
.mobile-sub h4{font-family:'Karla',Arial,sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:#9B7950;margin:12px 0 4px}
.mobile-menu .mobile-sub a{display:block;padding:7px 0 7px 12px;border:0;font-size:15px;font-weight:600;color:var(--ink,#34362F)}
.mobile-menu .mobile-sub .mega-profiles{padding-left:12px;margin-top:4px}
.mobile-menu .mobile-sub .mega-profiles a{padding:7px 0;border:1px solid var(--line,#DDD8CD);font-size:14px;color:var(--sage-dark,#586152)}

@media (prefers-reduced-motion:reduce){.mega,.nav-mega-toggle svg,.mobile-sub-toggle svg{transition:none}}

/* Langes Mobilmenü: in sich scrollbar, damit alles erreichbar bleibt (Header ist sticky) */
.mobile-menu.open{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}