/*
 * Single-Open-Akkordeon der Seitenmenüs (assets/js/nav_accordion.js, Makeover Schritt 1, 2026-10-08).
 * Gilt für .og-nav (Orga), .pl-nav (Partlog, Fuhrpark, Ladepark, Rundgang) und .admin-side (Verwaltung), jeweils nur mit
 * der Klasse .navacc-on am Menü - ohne sie (z. B. Partlog-Werkstattmodus) bleibt alles wie bisher.
 * Nur Tokens aus app.css; Bewegung 200-250 ms, bei prefers-reduced-motion ohne.
 */
.navacc__h { margin: 0; }
.navacc__head {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--touch-sm); padding: 4px 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-ink-2); cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.navacc__head:hover { background: var(--c-surface-2); color: var(--c-ink); }
.navacc__head:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.navacc__head[aria-expanded="true"] { color: var(--c-ink); }
.navacc__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.navacc__count { flex: 0 0 auto; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink-2); font-size: 11px; line-height: 20px; text-align: center; letter-spacing: 0; }
.navacc__caret { flex: 0 0 auto; color: var(--c-muted); transition: transform .22s ease-out; }
.navacc__head[aria-expanded="true"] .navacc__caret { transform: rotate(90deg); color: var(--c-ink-2); }
/* Aktive Ansicht liegt in einer geschlossenen Gruppe: roter Punkt + dunklere Schrift (nie nur Schatten). */
.navacc__dot { display: none; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); }
.navacc__head.has-active[aria-expanded="false"] { color: var(--c-ink); }
.navacc__head.has-active[aria-expanded="false"] .navacc__dot { display: inline-block; }
.navacc__panel { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.navacc__panel[hidden] { display: none !important; }
.navacc__panel--anim { animation: navacc-open .22s ease-out; }
@keyframes navacc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Abstände: im Akkordeon stehen die Köpfe dichter als die früheren Gruppentitel. */
.og-nav.navacc-on .og-nav__group + .og-nav__group,
.pl-nav.navacc-on .pl-nav__group + .pl-nav__group { margin-top: 2px; padding-top: 2px; }
.admin-side.navacc-on .admin-side__group.navacc__group { padding: 2px 0; }
.admin-side.navacc-on .navacc__head { font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; }

/* Schmal (< 900 px): die Menüs sind dort eine Leiste oben. Gruppenköpfe nebeneinander (umbrechend, kein verstecktes
   Scrollen), darunter über die ganze Breite die Einträge der offenen Gruppe. */
@media (max-width: 900px) {
  .og-nav.navacc-on, .pl-nav.navacc-on { flex-wrap: wrap; overflow-x: visible; align-items: center; }
  .og-nav.navacc-on .navacc__group, .pl-nav.navacc-on .navacc__group { display: contents; }
  .og-nav.navacc-on .navacc__h, .pl-nav.navacc-on .navacc__h { order: 1; }
  .og-nav.navacc-on .navacc__head, .pl-nav.navacc-on .navacc__head { width: auto; border-radius: var(--r-pill); background: var(--c-bg); box-shadow: var(--nm-1); }
  .og-nav.navacc-on .navacc__head[aria-expanded="true"], .pl-nav.navacc-on .navacc__head[aria-expanded="true"] { box-shadow: var(--nm-in); }
  .og-nav.navacc-on .navacc__panel, .pl-nav.navacc-on .navacc__panel { order: 2; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 6px 0 0; }
  .og-nav.navacc-on > .og-nav__group:not(.navacc__group), .pl-nav.navacc-on > .pl-nav__group:not(.navacc__group) { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .navacc__head, .navacc__caret { transition: none !important; }
  .navacc__panel--anim { animation: none !important; }
}