/* its-rn.de – Dropdown „Produkte“ in der Hauptnavigation (08.11.2026)
   Gilt für Startseite (Inline-CSS) und Produktseiten (produkte.css). Desktop: Hover/Fokus, mobil: Gruppe im ☰-Menü. */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-top.is-current{color:var(--fg);font-weight:600}
.nav-dd-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:6px 4px;margin-left:4px;border-radius:6px}
.nav-dd-btn:hover,.nav-dd-btn:focus-visible{color:var(--accent2)}
.nav-dd-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.nav-dd-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-dd-menu{display:none}
.nav-dd.open .nav-dd-menu{display:grid}
.nav-dd.open .nav-dd-caret{transform:translateY(2px) rotate(-135deg)}
.dd-group{display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-head{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent2);padding:4px 12px 6px}
.nav-links .nav-dd-menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--fg);font-weight:400;line-height:1.35}
.nav-links .nav-dd-menu a b{display:block;font-size:14.5px;font-weight:600}
.nav-links .nav-dd-menu a span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.nav-links .nav-dd-menu a small{font-size:12px;color:var(--muted);font-weight:400}
.nav-links .nav-dd-menu a:hover,.nav-links .nav-dd-menu a:focus-visible{background:rgba(26,154,214,.12);color:var(--fg);outline:none}
.nav-links .nav-dd-menu a:hover b,.nav-links .nav-dd-menu a:focus-visible b{color:var(--accent2)}
.nav-links .nav-dd-menu a[aria-current="page"]{background:rgba(26,154,214,.08)}
.nav-links .nav-dd-menu a[aria-current="page"] b{color:var(--accent2)}
.nav-links .nav-dd-menu a.dd-all{grid-column:1/-1;border-top:1px solid var(--border);border-radius:0 0 10px 10px;margin-top:6px;padding-top:12px;color:var(--accent2);font-weight:600;font-size:14px}

@media(min-width:861px){
  .nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;width:600px;max-width:calc(100vw - 32px);grid-template-columns:1fr 1fr;gap:4px 16px;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:110}
  /* unsichtbare Brücke, damit das Menü beim Runterfahren mit der Maus offen bleibt */
  .nav-dd-menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .nav-dd:focus-within .nav-dd-menu{display:grid}
  .nav-dd:focus-within .nav-dd-caret{transform:translateY(2px) rotate(-135deg)}
  /* Hover nur bei echter Maus – auf Touch-Tablets öffnet der Pfeil per Tipp */
  @media(hover:hover) and (pointer:fine){
    .nav-dd:hover .nav-dd-menu{display:grid}
    .nav-dd:hover .nav-dd-caret{transform:translateY(2px) rotate(-135deg)}
  }
  /* nach Escape bzw. Klick auf den Pfeil geschlossen halten, auch wenn Maus/Fokus noch drin sind */
  .nav-dd.dd-closed .nav-dd-menu{display:none}
  .nav-dd.dd-closed .nav-dd-caret{transform:translateY(-2px) rotate(45deg)}
}
@media(max-width:860px){
  .nav-links{max-height:calc(100vh - 70px);overflow-y:auto}
  .nav-dd{flex-wrap:wrap;align-items:stretch}
  .nav-dd-top{flex:1}
  .nav-dd-btn{padding:0 24px;margin:0;min-width:56px}
  .nav-dd-menu{grid-template-columns:1fr;gap:10px;padding:4px 16px 12px 24px;border-left:2px solid var(--border);margin-left:24px;width:calc(100% - 24px)}
  .nav-links .nav-dd-menu a{padding:8px 12px}
  .nav-links .nav-dd-menu a.dd-all{margin-top:0;border-radius:10px}
  .dd-head{padding:6px 12px 2px}
}
@media(prefers-reduced-motion:reduce){.nav-dd-caret{transition:none}}