/* Taschenlampe und Notruf – zwei runde Knöpfe.
 *
 * Sven: "Taschenlampe und Notruf müssen am besten zwei runde button sein",
 * "Deutlich markiert und wie gesagt höchst sensibel das thema. Man darf nicht
 * ausversehen drauf kommen und ein notruf auslösen."
 *
 * DIE GESTALTUNG IST HIER TEIL DER SICHERUNG, nicht Schmuck. Vier Dinge
 * trennen die beiden Knöpfe so weit, dass eine Verwechslung im Dunkeln, mit
 * Handschuhen, im Laufen nicht passiert:
 *
 *   ORT     Der Notruf steht rechts, das Licht links, und dazwischen liegt
 *           mehr als eine Daumenbreite (56px). Sie sind nicht benachbart.
 *   FARBE   Der Notruf ist der einzige rote Knopf der ganzen Anwendung. Das
 *           Licht ist neutral.
 *   FORM    Der Notruf trägt einen zweiten Ring nach aussen. Er ist auch im
 *           Umriss ein anderer Knopf – für alle, die Rot und Grau nicht
 *           unterscheiden.
 *   WORT    Beide tragen ihre Beschriftung darunter, nicht nur ein Zeichen.
 *
 * Und die wichtigste: Der Notruf reagiert NICHT auf ein Antippen. Er will
 * gehalten werden, und der Ring füllt sich sichtbar dabei. Ein Knopf in der
 * Jackentasche wird angetippt, nicht gehalten.
 */

/* AUF DEM RECHNER EIN EIGENES FELD, KEINE FREI SCHWEBENDEN KREISE.
 *
 * Vorher lag die Gruppe durchsichtig über der Seite: links 0, rechts 0, kein
 * Grund. Auf der Livemap stand damit die Zeile "OD1 · 2 von 22 eingelesen"
 * mitten zwischen "Licht" und "Notruf" – zwei Texte übereinander, beide
 * unlesbar. Ein Polster am Inhalt hilft dagegen nicht: Es wirkt nur, wenn man
 * ganz nach unten gerollt hat; dazwischen schiebt sich immer irgendetwas
 * darunter.
 *
 * Also bekommt die Gruppe einen eigenen Grund und nur so viel Breite, wie sie
 * braucht. Damit ist sie ein Bedienfeld, das über dem Inhalt liegt – und
 * nicht ein Stück Text, das mit einem anderen kollidiert. Die zwei runden
 * Knöpfe bleiben rund; Sven wollte zwei Knöpfe, nicht zwei Kästen. */
.nf-leiste {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Wie hoch: siehe navigation.css, Abschnitt "Der untere Rand". */
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 56px zwischen den beiden. Ein Daumen ist rund 45px breit – der Abstand
     ist bewusst grösser als das, was ihn versehentlich überbrücken könnte. */
  gap: 56px;
  padding: 10px 30px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.nf-leiste > * { pointer-events: auto; }

/* SOFORTZUGRIFF AM RECHNER: rechts am Rand statt unten im Weg.
 *
 * Unten in der Mitte lag die Gruppe genau dort, wo der Blick beim Lesen endet
 * - und verdeckte die letzte Zeile jeder Liste. Am rechten Rand steht sie
 * neben dem Inhalt statt darauf: immer erreichbar, nie im Weg. Senkrecht
 * gestapelt, weil der Bildschirm dort Platz hat und der Weg der Hand kurz
 * bleibt. Auf dem Handy gilt das NICHT - dort loest der Block ab Zeile 79 das
 * Problem anders, weil 400 Pixel Breite keinen Seitenrand uebrig haben. */
@media screen and (min-width: 861px) {
  .nf-leiste {
    left: auto;
    right: 18px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    /* Enger als die 56px unten: Senkrecht kann der Daumen nicht abrutschen,
       und die vier Knoepfe sollen als EIN Element lesbar bleiben. */
    gap: 14px;
    padding: 14px 12px;
    border-radius: 18px;
  }
  /* Das Element SCHWEBT - also muss der Inhalt darunter Platz bekommen,
     sonst liegt es auf der rechten Spalte jeder breiten Ansicht (Karte,
     Tabelle, Objektplan). Ein Polster am Inhalt statt am Element: So bleibt
     das Bedienfeld am Rand kleben und verdeckt trotzdem nichts.
     68px Breite + 18px Abstand + Luft. Nur wenn die Leiste wirklich da ist -
     die Klasse setzt notfall.js erst nach dem Aufbauen. */
  .hat-notfallleiste main { padding-right: 104px; }
}

/* VIER KARTEN, EIN MASS.
 *
 * Die Knoepfe stammen aus drei Quellen und brachten drei Groessen mit:
 * gemessen 68x93, 84x102, 35x47 und 62x51, Kreise von 68px bis gar keinem,
 * zwei verschiedene Schriftgroessen. Nebeneinander sah das nach vier
 * Fundstuecken aus, nicht nach einem Bedienfeld.
 *
 * Darum wird hier NICHT nachgebessert, sondern EIN Mass gesetzt, dem sich
 * jeder Knopf beugt - egal, was er von zu Hause mitbringt: gleiche Kartengroesse,
 * gleiches Symbolfeld, gleiche Beschriftung. Alles per Kind-Selektor, damit die
 * Herkunftsdateien unberuehrt bleiben.
 *
 * Die Masse: Karte 68px breit (Daumen braucht 45px), Symbolfeld 40px mit
 * Radius 12 (die Radien des Hauses), Symbol 22px, Beschriftung fs-xs. */
.nf-leiste > .nf-knopf,
.nf-leiste > .fab,
.nf-leiste > .hilfe-knopf {
  box-sizing: border-box;
  position: static;
  inset: auto;
  margin: 0;
  width: 68px;
  height: auto;
  /* Feste Hoehe, nicht nur feste Breite: Der Notruf traegt sein Wort in einem
     eigenen Behaelter und kam dadurch auf 73 statt 74 Pixel. Ein Pixel sieht
     niemand - aber vier Karten, die sich auf denselben Wert einigen muessen,
     lassen erst gar keinen Spielraum fuer den naechsten Sonderfall. */
  min-height: 74px;
  padding: 7px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  /* Beim Halten des Notrufs markierte der Browser die Beschriftung und blendete
     die Lupe ein - man haelt eine Sekunde gedrueckt und bekommt statt des
     Fortschrittsrings eine blaue Textauswahl. Wer im Ernstfall den Notruf
     haelt, darf nicht gegen die Textauswahl kaempfen. touch-action verhindert
     zusaetzlich, dass die Seite unter dem Finger mitscrollt. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background var(--dur-normal) var(--easing), border-color var(--dur-normal) var(--easing);
}
.nf-leiste > .nf-knopf:hover,
.nf-leiste > .fab:hover,
.nf-leiste > .hilfe-knopf:hover { background: var(--surface-2); border-color: var(--border); }

/* Das Symbolfeld: EIN Mass, EINE Form - und bewusst RUND.
 *
 * Rund ist hier keine Geschmacksfrage: Der Haltering des Notrufs ist ein
 * konischer Farbverlauf mit runder Maske (.nf-halten). Ein eckiges Feld haette
 * ihn zerschnitten und den Fortschritt beim Halten unlesbar gemacht. Also
 * folgen die anderen drei der Form, die die Funktion vorgibt - nicht umgekehrt. */
.nf-leiste > * > .nf-rund,
.nf-leiste > .hilfe-knopf > .hilfe-zeichen {
  width: 40px; height: 40px;
  min-width: 40px; min-height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-lg); font-weight: 600;
  box-shadow: none;
}
.nf-leiste > * > .nf-rund > svg,
.nf-leiste > .fab > svg { width: 22px; height: 22px; }
/* Neu + brachte kein Feld mit - es bekommt dasselbe runde, in der Markenfarbe
   gefuellt: Es ist die einzige der vier Karten, die etwas ERZEUGT. */
.nf-leiste > .fab > svg {
  box-sizing: content-box;
  width: 22px; height: 22px; padding: 9px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink, #fff);
}
.nf-leiste > .fab { color: var(--accent-fg); }
.nf-leiste > .hilfe-knopf > .hilfe-zeichen {
  border: 1px solid var(--border); background: none;
}
/* Alle Beschriftungen auf ein Mass - auch die, die als <span> ohne Klasse
   ankommen (Licht) oder als zweizeiliges Wortpaar (Notruf). */
.nf-leiste > * > span:not(.nf-rund):not(.hilfe-zeichen),
.nf-leiste .nf-wort { font-size: var(--fs-xs); font-weight: 500; }
/* Der Zusatz "gedrueckt halten" macht die Notruf-Karte hoeher als die
   anderen. Er steht weiterhin in aria-label und title - sichtbar wuerde er
   die Reihe brechen, und der Haltering zeigt es ohnehin beim Druecken. */
.nf-leiste > .nf-notruf .nf-notruf-wort small { display: none; }

/* AUF DEM HANDY IST DAS KEINE SCHWEBENDE GRUPPE, SONDERN EINE LEISTE.
 *
 * Sven hat eine Aufnahme geschickt: Vier schwebende Dinge lagen im selben
 * Eck übereinander – Hilfe links, Licht und Notruf in der Mitte, der runde
 * Plus-Knopf rechts. Sie verdeckten sich gegenseitig und den Inhalt darunter.
 * "das ist doch nicht professionel". Stimmt.
 *
 * Vier freie Kreise auf 400 Pixeln Breite können nicht zusammen aufgehen.
 * Also stapeln sie sich jetzt, statt sich zu überlagern:
 *
 *     ┌──────────────────────────────┐
 *     │  ?          Hilfe        (+) │  ← schwebend, über allem
 *     ├──────────────────────────────┤
 *     │   Licht    │    Notruf       │  ← eine Leiste, ein Grund
 *     ├──────────────────────────────┤
 *     │ Start Zeiten Rapporte …      │  ← die Navigation
 *     └──────────────────────────────┘
 *
 * Die Leiste hat einen eigenen Grund und eine Kante nach oben. Damit ist sie
 * kein Fremdkörper mehr, der über dem Inhalt schwebt, sondern ein Teil des
 * unteren Randes – und der Inhalt bekommt darunter seinen Platz zurück. */
@media screen and (max-width: 860px) {
  .nf-leiste {
    /* Auf dem Handy wieder über die ganze Breite: Dort ist Platz das
       Knappste, und eine Pille in der Mitte liesse links und rechts Streifen
       stehen, unter denen der Inhalt trotzdem durchrutscht. */
    left: 0;
    right: 0;
    transform: none;
    gap: 0;
    padding: 6px 8px;
    background: var(--surface-1);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--border);
    /* Die Knöpfe teilen sich die Breite. Zwei gleich grosse Felder sind auch
       im Dunkeln ohne Hinsehen zu treffen – die Bildschirmmitte ist die
       Grenze. */
    justify-content: stretch;
  }
  .nf-leiste .nf-knopf {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 12px;
  }
  /* Waagrecht braucht der Kreis weniger Höhe – und die Beschriftung steht
     daneben statt darunter, wo sie in einer Leiste verloren wirkt. */
  .nf-leiste .nf-rund { width: 44px; height: 44px; }
  .nf-leiste .nf-rund svg { width: 22px; height: 22px; }
  .nf-notruf-wort { align-items: flex-start; }

  /* Der Notruf behält seinen zweiten Ring, aber auf dem Grund der Leiste. */
  .nf-notruf .nf-rund {
    box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--critical);
  }
}

.nf-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
.nf-knopf:focus-visible { outline: none; }
.nf-knopf:focus-visible .nf-rund { outline: 3px solid var(--accent-fg); outline-offset: 4px; }

.nf-rund {
  position: relative;
  display: grid;
  place-items: center;
  /* 68px: Deutlich grösser als die 44px-Mindestfläche. Diese beiden Knöpfe
     werden im Dunkeln gesucht, nicht gelesen. */
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transition: transform var(--dur-schnell) var(--easing);
}
.nf-knopf:active .nf-rund { transform: scale(.96); }
.nf-rund svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ Licht */

.nf-licht .nf-rund {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}
/* Ist die Lampe an, ist es der Knopf auch. Gelb ist hier keine Warnung,
   sondern der Zustand der Lampe – und er unterscheidet sich deutlich vom
   Rot daneben. */
.nf-licht.ist-an .nf-rund {
  background: #ffd233;
  border-color: #e0ac00;
  color: #3a2c00;
  box-shadow: 0 0 0 6px rgba(255, 210, 51, .22), var(--shadow);
}
.nf-licht.ist-an { color: var(--text-primary); }

/* ----------------------------------------------------------------- Notruf */

.nf-notruf .nf-rund {
  background: var(--critical);
  color: #fff;
  /* Der zweite Ring nach aussen. Er macht den Knopf auch im Umriss zu einem
     anderen – Rot und Grau sind für rund jeden zwölften Mann dasselbe. */
  box-shadow: 0 0 0 4px var(--surface-0), 0 0 0 6px var(--critical), 0 8px 22px rgba(0, 0, 0, .28);
}
.nf-notruf { color: var(--critical-ink); }

/* Der Fortschrittsring beim Halten. Er ist die sichtbare Antwort auf
   "warum passiert nichts" – ohne ihn wirkt der Knopf kaputt. */
.nf-halten {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#fff calc(var(--nf-fortschritt, 0) * 1turn), transparent 0);
  opacity: .0;
  transition: opacity 90ms linear;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.nf-notruf.ist-gedrueckt .nf-halten { opacity: .95; }

/* Die Beschriftung "halten" steht dauerhaft da, nicht erst beim Drücken.
   Wer den Knopf zum ersten Mal sieht, soll wissen, dass Antippen nichts
   tut – sonst tippt er im Ernstfall dreimal und wundert sich. */
.nf-notruf-wort { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.nf-notruf-wort small { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- Dialog */

.nf-grund {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 11, 11, .62);
}

.nf-dialog {
  width: min(440px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.nf-titel { margin: 0 0 10px; font-size: var(--fs-2xl); }
.nf-text { margin: 0 0 20px; font-size: var(--fs-lg); line-height: 1.6; color: var(--text-secondary); }
.nf-nummer {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  color: var(--text-primary);
}
.nf-zusatz { display: block; margin-top: 10px; }

/* Abbrechen LINKS und breit, Wählen RECHTS und schmaler. Die Gewichtung ist
   Absicht: Der häufigere und harmlosere Weg ist der grössere. */
.nf-knoepfe { display: flex; gap: 10px; }

/* "Nummer ändern" steht unter den beiden Hauptknöpfen und sieht bewusst
   nebensächlich aus: schmal, ohne Farbe, mit Abstand darüber. Es ist der Weg
   für die Leitung, sich zu korrigieren – und es darf im Ernstfall auf keinen
   Fall mit dem roten Knopf verwechselt werden. */
.nf-aendern {
  margin-top: 12px;
  width: 100%;
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.nf-ab { flex: 1.4; min-height: 52px; font-size: var(--fs-lg); font-weight: 600; }
.nf-los {
  flex: 1;
  min-height: 52px;
  font-size: var(--fs-lg);
  font-weight: 700;
  background: var(--critical);
  border-color: var(--critical);
  color: #fff;
}
.nf-los[disabled] { opacity: .5; cursor: not-allowed; }
.nf-los:not([disabled]):hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .nf-rund, .nf-halten { transition: none; }
  .nf-knopf:active .nf-rund { transform: none; }
}

/* Auf Papier haben beide nichts verloren. */
@media print { .nf-leiste { display: none; } }

/* ---------------------------------------------------------------------------
   Notruf einrichten
   --------------------------------------------------------------------------- */

/* Steht dort, wo spaeter der Notrufknopf steht - aber deutlich anders: grau
   statt rot, gestrichelter Rand, und die Zeile darunter sagt "einrichten"
   statt "gedrueckt halten". Er soll gefunden werden, nicht mit dem Ernstfall
   verwechselt.

   Es ist derselbe Fehler wie bei der Livemap gewesen: Eine Funktion, die
   ohne Einrichtung nicht erscheint, und kein Weg zur Einrichtung. Sven stand
   zweimal davor. */
.nf-einrichten .nf-rund {
  background: var(--surface-2);
  border: 2px dashed var(--border-strong);
  color: var(--text-muted);
  box-shadow: var(--shadow);
}
.nf-einrichten { color: var(--text-muted); }
.nf-einrichten:hover .nf-rund { border-color: var(--accent); color: var(--accent-fg); }

.nf-felder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.nf-feld {
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: max(16px, var(--fs-lg));
}
.nf-feld:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 1px; }

.nf-fehler {
  margin: 0 0 12px;
  min-height: 1.2em;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--critical-ink);
}