/* Navigation – Rubriken, die sich auf- und zuklappen lassen.
 *
 * Eigene Datei statt eines Blocks in styles.css: An styles.css arbeitet die
 * andere Spur, und diese Regeln gehören zu einem abgeschlossenen Stück
 * Bedienung. Alle Werte kommen aus styles.css; hier steht kein neuer Farbwert.
 *
 * DER GRUND, warum es die Rubriken überhaupt gibt: Zwölf Einträge
 * untereinander sind keine Gliederung, sie sind eine Wand. Sven hat es so
 * gesagt – "sonst ist es viel zu viel auf einmal".
 *
 * DIE REGEL, die alles andere nach sich zieht: Die Rubrik der Ansicht, auf
 * der man gerade steht, ist IMMER offen. Ein Menü, das den Eintrag der
 * eigenen Seite versteckt, lässt einen glauben, man habe sich verlaufen.
 * navigation.js erzwingt das; hier steht nur, wie es aussieht.
 */

/* ---------------------------------------------------------------- Rubrik */

.nav-gruppe {
  display: flex;
  flex-direction: column;
}

/* Ein echter Knopf, kein <div> mit Klick. Sonst erreicht ihn die Tastatur
   nicht und ein Vorleseprogramm sagt nicht, ob offen oder zu. */
.nav-rubrik {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* 32px hoch: klein genug, um nicht wie ein Menüpunkt auszusehen, gross
     genug, um mit dem Daumen getroffen zu werden. Ein Rubriktitel, der so
     aussieht wie ein Ziel, wird angeklickt und enttäuscht. */
  min-height: 32px;
  margin: 14px 0 2px;
  padding: 0 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  border-radius: 8px;
  transition: color var(--dur-schnell) var(--easing), background var(--dur-schnell) var(--easing);
}
.nav-rubrik:hover { color: var(--text-secondary); background: var(--surface-sunken); }
.nav-rubrik:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }

/* Der Pfeil zeigt nach rechts, wenn zu, und nach unten, wenn offen – die
   Richtung, in die es geht, nicht der Zustand. Das ist die Konvention, die
   jeder Dateimanager benutzt, und sie muss nicht gelernt werden. */
.nav-rubrik-pfeil {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform var(--dur-schnell) var(--easing);
}
.nav-rubrik[aria-expanded="true"] .nav-rubrik-pfeil { transform: rotate(90deg); }

/* Zugeklappt wird mit hidden, nicht mit height 0: Ein Element, das nur
   zusammengeschoben ist, bleibt für die Tastatur erreichbar – man tabbt dann
   durch Knöpfe, die niemand sieht. */
.nav-rubrik-inhalt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-rubrik-inhalt[hidden] { display: none; }

/* Ein feiner Strich links: Er sagt, wie weit die Rubrik reicht, ohne einen
   Kasten zu zeichnen. Bei zwölf Einträgen ist das der Unterschied zwischen
   "gegliedert" und "eingerahmt". */
.nav-gruppe .nav-rubrik-inhalt {
  padding-left: 9px;
  margin-left: 11px;
  border-left: 1px solid var(--border);
}

/* --------------------------------------------------------------- Handy */

/* Unten ist die Leiste eine Fusszeile. Dort gibt es keine Rubriken – sie
   werden ausgeblendet, und der Inhalt fliesst mit display:contents in die
   Leiste, als hätte es die Gruppen nie gegeben. Ohne diese Zeile stünde je
   Rubrik ein eigener Kasten in der Fusszeile. */
@media screen and (max-width: 860px) {
  .nav-rubrik { display: none; }
  .nav-gruppe,
  .nav-rubrik-inhalt,
  .nav-rubrik-inhalt[hidden] { display: contents; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-rubrik,
  .nav-rubrik-pfeil { transition: none; }
}

/* ---------------------------------------------------------------------------
   Fusszeile auf dem Handy
   --------------------------------------------------------------------------- */

/* Acht Knoepfe passten nicht: "Rundgang" stand auf 430 px als "Rundga", und
   ein abgeschnittenes Wort in einer Leiste, die man im Dunkeln blind trifft,
   ist schlimmer als ein fehlender Knopf.
   Objekte und Dienste gehen darum unter "Mehr" - sie sind Nachschlagewege,
   keine Feldwege. Was bleibt, ist die Schicht selbst: Start, Zeiterfassung,
   Rapport, Rundgang, Livemap, Mehr. Sechs Ziele, alle mit vollem Wort.
   Der Weg zu Objekten und Diensten steht in index.html unter "Weitere
   Bereiche" - sie sind verschoben, nicht verschwunden. */
@media screen and (max-width: 860px) {
  .navbtn[data-view="objekte"],
  .navbtn[data-view="shifts"] { display: none; }
}