/* 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; }
}

/* ===========================================================================
   DER UNTERE RAND — eine Stelle, die ihn besitzt
   ===========================================================================

   Am unteren Bildschirmrand drängeln sich sechs Dinge: die Navigation, die
   Leiste mit Licht und Notruf, der Hilfe-Knopf, der Plus-Knopf, die klebenden
   Fussleisten von Livemap und Rundgang, und die Meldungen. Jedes davon hatte
   seine eigene Zahl in seiner eigenen Datei.

   Das ging genau so lange gut, bis eine Zahl sich änderte. Sven hat es
   fotografiert: vier schwebende Kreise im selben Eck, übereinander. Danach
   habe ich die Zahlen einmal richtig gestellt — und beim nächsten Durchgang
   lagen die Fussleisten von Rundgang und Livemap darunter, weil sie ihre
   eigenen Zahlen hatten.

   DARUM STEHT DIE HÖHE JETZT AN GENAU EINER STELLE, als Rechengrösse. Wer
   etwas am unteren Rand ablegt, rechnet mit --rand-unten und mit sonst nichts.

     --rand-nav       was die Navigation belegt (auf dem Handy 62, sonst 0)
     --rand-notfall   was die Leiste mit Licht und Notruf belegt
     --rand-unten     beides zusammen, inklusive sicherem Bereich

   --rand-notfall ist NUR gesetzt, wenn es die Leiste wirklich gibt:
   notfall.js hängt dafür die Klasse hat-notfallleiste an <html>. Platz zu
   reservieren für etwas, das nicht da ist, wäre auf einem Handybildschirm
   eine Handbreit verschenkter Inhalt. */

:root {
  --rand-nav: 0px;
  --rand-notfall: 0px;
  --rand-unten: calc(var(--rand-nav) + var(--rand-notfall) + env(safe-area-inset-bottom));
}

/* Auf dem Rechner ist die Leiste eine Pille mit eigenem Grund: 16px Abstand
   nach unten, 124px hoch (Kreis 68 + Beschriftung + Polsterung + Kante).
   Nachgemessen an der laufenden Anwendung, nicht ueberschlagen - beim ersten
   Versuch stand hier 106, und die Fussleiste der Livemap lag 14px zu tief. */
:root { --nf-abstand: 16px; }
:root.hat-notfallleiste { --rand-notfall: 140px; }

@media screen and (max-width: 860px) {
  /* Die Navigation steht unten fest (styles.css: .sidebar, 62px). */
  /* Und die Leiste sitzt direkt darauf, ohne Abstand: Sie ist dort keine
     Pille, sondern ein Teil des unteren Randes. */
  :root { --rand-nav: 62px; --nf-abstand: 0px; }
  /* Waagrechte Leiste: 56 Mindesthöhe + 12 Polsterung + Kante. */
  :root.hat-notfallleiste { --rand-notfall: 69px; }
}

/* Die Leiste selbst sitzt direkt auf der Navigation.

   Das :root davor ist nicht Zierde: navigation.css wird VOR notfall.css
   geladen (index.html:53 vor 55). Bei gleicher Spezifität gewänne dort die
   spätere Datei, und die alten festen Zahlen kämen zurück. */
:root .nf-leiste { bottom: calc(var(--rand-nav) + var(--nf-abstand) + env(safe-area-inset-bottom)); }

/* Die zwei schwebenden Knöpfe darüber.

   OHNE !important. Vorher stand hier eines, und es hat mehr kaputtgemacht als
   geholfen: styles.css hat zwei eigene Ausweichregeln für den Hilfe-Knopf
   (wenn ein Dialog offen ist und wenn die Tastatur aufgeht), und ein
   !important hier setzt beide ausser Kraft. Stattdessen dieselbe Spezifität
   plus die Klasse am Wurzelelement — das gewinnt gegen die Grundregel und
   verliert gegen die Sonderfälle, und genau so soll es sein. */
:root .hilfe-knopf,
:root .fab { bottom: calc(var(--rand-unten) + 12px); }

/* Klebende Fussleisten hören über der Leiste auf, nicht darunter. */
:root .lm-fuss,
:root .rg-fuss { bottom: calc(var(--rand-unten) + 8px); }

/* Und wo eine solche Fussleiste steht, rückt der Hilfe-Knopf über sie.
   Sie geht über die ganze Breite – der Knopf sitzt rechts unten und lag damit
   mitten auf "Einlesen". Gemessen sind es 89px; die 104 hier sind die 89 plus
   Luft, damit es auch dann noch aufgeht, wenn die Leiste zweizeilig wird. */
body:has(.lm-fuss) .hilfe-knopf,
body:has(.rg-fuss) .hilfe-knopf,
body:has(.lm-fuss) .fab,
body:has(.rg-fuss) .fab { bottom: calc(var(--rand-unten) + 104px); }

/* Meldungen ebenfalls. Ein Hinweis, der zur Hälfte in der Navigation steckt,
   ist keiner. */
:root .toast { bottom: calc(var(--rand-unten) + 16px); }

/* Und der Inhalt hört darüber auf, statt darunter zu verschwinden.

   NUR HIER, nicht zusaetzlich an jeder Ansicht. Ich hatte den Ansichten
   kurzzeitig ein eigenes Polster gegeben, weil die letzte Zeile der Livemap
   hinter der Leiste zu liegen schien. Sie lag dort aber nur, weil mein
   Messwerkzeug window.scrollTo benutzte - gerollt wird hier der body. Am
   echten Seitenende war nie etwas verdeckt, und die beiden Polster ergaben
   zusammen eine Handbreit leeren Bildschirm auf dem Handy. */
main { padding-bottom: calc(var(--rand-unten) + 48px); }

/* ÜBER EINEM OFFENEN FENSTER HAT NICHTS ZU SCHWEBEN.
   Ein Rapportformular oder die Notruf-Rückfrage nimmt den Bildschirm für
   sich. Licht, Notruf, Hilfe und Plus gehören dann nicht darüber — der
   Notruf schon gar nicht: Wer im Formular nach unten greift, soll dort nicht
   auf einen roten Knopf treffen. */
body:has(dialog[open]) .nf-leiste,
body:has(.modal:not(.hidden)) .nf-leiste,
body:has(.nf-grund) .nf-leiste,
body:has(dialog[open]) .fab,
body:has(.modal:not(.hidden)) .fab,
body:has(.nf-grund) .fab { display: none; }