/* 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.
 */

.nf-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  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;
  pointer-events: none;
}
.nf-leiste > * { pointer-events: auto; }

/* Auf dem Handy sitzt unten die Navigationsleiste (62px). Die Knöpfe gehen
   darüber, sonst liegt der Notruf auf "Mehr". */
@media screen and (max-width: 860px) {
  .nf-leiste { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

.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; }
.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);
}