/*
 * Menue-Gruppen der oeffentlichen Seiten (Design v2): "Leistungen" und "Produkte" als Mega-Menue (Karten mit Kurztext), "Mehr" als Liste.
 * Struktur in views/site_nav_data.php, Markup in views/site_marketing_header_v2.php, Bedienung (nur eine offen, Esc, Klick daneben) in site.js.
 * Selektoren bewusst mit .site-header .nav beginnend, damit sie die Seiten-Stile (site.css, shop.css) ueberstimmen. Mobil klappen die Gruppen im Menuepanel auf.
 */
/* Menue-Gruppen: "Leistungen" und "Produkte" als Mega-Menue (Karten mit Kurztext), "Mehr" als einfache Liste. Mobil klappen sie im Menuepanel auf. */
.nav-group > summary { list-style: none; cursor: pointer; font-weight: 600; padding: 12px 14px; border-radius: 10px; color: var(--text); }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.nav-group[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-group > summary:hover { background: var(--bg-alt); }
.nav-group[open] > summary, .nav-group > summary.is-active { color: var(--accent); }
.nav-group__panel { padding: 0 0 6px 10px; }
.nav-group__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-header .nav .nav-group__panel a { display: block; padding: 10px 14px; white-space: normal; }
.site-header .nav-group__panel a strong { display: block; font-weight: 650; }
.site-header .nav-group__panel a span { display: block; margin-top: 2px; font-size: .85rem; font-weight: 400; color: var(--muted); line-height: 1.35; }
.site-header .nav .nav-group__panel a.nav-group__all { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.site-header .nav-group__all .icon { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .site-header__inner { position: relative; }
  .nav-group > summary { padding: 8px 12px; font-size: .95rem; white-space: nowrap; }
  .nav-group--list { position: relative; }
  .nav-group__panel { position: absolute; z-index: 60; top: calc(100% + 8px); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow, var(--shop-shadow)); }
  .nav-group--list .nav-group__panel { right: 0; min-width: 200px; padding: 8px; }
  .nav-group--mega .nav-group__panel { right: 0; width: min(46rem, calc(100vw - 2 * var(--gutter, 20px))); }
  .nav-group--mega .nav-group__panel ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; }
  .site-header .nav .nav-group--mega .nav-group__panel a { padding: 10px 12px; border-radius: 10px; }
  .site-header .nav .nav-group--mega .nav-group__panel li a:hover, .site-header .nav .nav-group--mega .nav-group__panel li a:focus-visible { background: var(--bg-alt); }
  .site-header .nav .nav-group__panel a[aria-current="page"] { box-shadow: none; color: var(--accent); }
  .site-header .nav .nav-group__all { padding: 4px 12px 10px; font-size: .9rem; }
  .nav-group[open] > summary::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}