/* site-nav.css — gemeinsame Nav-Dropdowns fuer alle Unterseiten.
   Regeln 1:1 aus index.html uebernommen, damit Startseite und Unterseiten
   identisch aussehen. Wird von index.html NICHT geladen (dort liegen die
   Regeln inline); crm.html/pa.html laden sie nur wegen der .mega-Variante.
   Bei Aenderungen am Menue: hier UND in index.html anpassen. */

/* --- Mobiles Akkordeon (Panel-Navigation) --- */
@media(max-width:860px){
  .nav-dropdown-trigger{width:100%;justify-content:space-between;padding:16px 4px;font-size:18px;border-bottom:1px solid var(--line)}
  .nav-dropdown-menu{
    position:static;transform:none;opacity:1;visibility:visible;width:100%;
    display:none;box-shadow:none;border:none;border-radius:0;background:rgba(255,255,255,.03);
    padding:4px 0 10px 10px;margin-bottom:2px;
  }
  .nav-dropdown-menu.open{display:block}
  .nav-dropdown-menu.mega{display:none;grid-template-columns:1fr;width:100%}
  .nav-dropdown-menu.mega.open{display:grid}
  .nav-dropdown-menu a strong{font-size:15px}
}

/* --- Basis --- */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:6px 2px;transition:color .15s ease}
.nav-dropdown-trigger:hover,.nav-dropdown-trigger[aria-expanded="true"]{color:var(--orange)}
.nav-dropdown-trigger svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.nav-dropdown-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-dropdown-menu a{display:block;padding:11px 14px;border-radius:9px;color:var(--ink);transition:background .15s ease}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:rgba(247,147,26,.1)}
.nav-dropdown-menu a strong{display:block;font-size:14.5px;font-weight:700;color:var(--white)}
.nav-dropdown-menu a span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;font-weight:500}

/* --- Desktop-Flyout, ab 861px gescoped, damit es nicht mit dem
       mobilen Akkordeon um dieselben Eigenschaften konkurriert --- */
@media(min-width:861px){
  .nav-dropdown-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);width:320px;background:#1c2226;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 45px -18px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:110;white-space:normal}
  .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav-dropdown-menu.mega{left:0;transform:translateY(-6px);width:760px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px 10px;align-items:start}
  .nav-dropdown-menu.mega .mega-col{display:flex;flex-direction:column;gap:2px}
  .nav-dropdown:hover .nav-dropdown-menu.mega,.nav-dropdown-menu.mega.open{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.nav-dropdown-menu{transition:none}}