/* Die Web-App - Leiste und Meldung zu den Nachrichten
   ====================================================
   Michael, 28.09.2026: "PWA für beide". static/webapp.js zeigt bei jedem
   Start das Fenster "Nachrichten einschalten", bis sie an sind, und oben
   kurz eine Meldung, wenn es geklappt hat. Beides liegt über dem Inhalt,
   bis es beantwortet oder abgelaufen ist.

   env(safe-area-inset-…): Auf dem iPhone ohne Home-Taste liegt unten der
   Wischbalken - die Leiste bleibt darüber. Im Browser ist der Wert 0. */

/* Das Fenster "Nachrichten einschalten" - über der ganzen Seite, bis es
   beantwortet ist (Michael, 28.09.2026: "sehr prominent"). */
.webapp-fenster {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: var(--abstand-9);
  background: rgba(10, 40, 70, .55);
}
.webapp-fenster-offen, .webapp-fenster-offen body { overflow: hidden; }
.webapp-fenster-karte {
  width: 100%; max-width: 24rem; text-align: center;
  padding: var(--abstand-14) var(--abstand-9) var(--abstand-7);
  background: var(--weiss); border-radius: var(--radius-3);
  box-shadow: var(--schatten-stark);
}
.webapp-fenster-karte .glocke {
  width: 4rem; height: 4rem; margin: 0 auto var(--abstand-7);
  border-radius: var(--radius-kreis); background: var(--blau-hell); color: var(--blau);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.webapp-fenster-karte h5 { font-weight: 700; margin-bottom: var(--abstand-5); }
.webapp-fenster-karte p { font-size: var(--schrift-4); margin-bottom: var(--abstand-9); }
.webapp-fenster-karte p.klein { font-size: var(--schrift-3); text-align: left; }
.webapp-fenster-karte .fehler { color: var(--rot); font-size: var(--schrift-3); margin: var(--abstand-4) 0 0; }
.webapp-fenster-karte .spaeter { color: var(--grau-6); }

.webapp-meldung {
  position: fixed; z-index: 1060;
  left: var(--abstand-5); right: var(--abstand-5);
  top: calc(var(--abstand-5) + env(safe-area-inset-top, 0px));
  padding: var(--abstand-5) var(--abstand-6);
  background: var(--blau); color: var(--weiss);
  border-radius: var(--radius-3); box-shadow: var(--schatten-stark);
  font-size: var(--schrift-3);
}
.webapp-meldung b { display: block; }

/* ── Die Ersteinrichtung auf dem Handy (29.09.2026) ─────────────────────────────
   Drei Schritte als Leiste (templates/_einrichtung.html), dazu die
   bebilderten Anleitungen auf /willkommen. */
.schritte {
  display: flex; justify-content: space-between; gap: var(--abstand-2);
  list-style: none; margin: 0 0 var(--abstand-7); padding: 0;
  counter-reset: schritt;
}
.schritte li {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  gap: var(--abstand-2); font-size: var(--schrift-1); color: var(--grau-6);
  position: relative;
}
/* die Linie zwischen zwei Punkten */
.schritte li + li::before {
  content: ""; position: absolute; top: 1rem; right: 50%; width: 100%;
  border-top: 2px solid var(--grau-3); z-index: 0;
}
.schritte .punkt {
  position: relative; z-index: 1;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--weiss); border: 2px solid var(--grau-3); font-size: 1rem;
}
.schritte li.jetzt  { color: var(--blau); font-weight: 600; }
.schritte li.jetzt .punkt  { border-color: var(--blau); color: var(--blau); }
.schritte li.fertig .punkt { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.schritte li.fertig + li::before, .schritte li.fertig + li.fertig::before { border-color: var(--gruen); }

/* Anleitung: nummerierte Schritte mit dem Symbol, das man antippen muss */
.anleitung { counter-reset: an; list-style: none; padding: 0; margin: 0; }
.anleitung li {
  counter-increment: an; position: relative;
  padding: var(--abstand-3) 0 var(--abstand-3) 2.4rem; font-size: var(--schrift-3);
  border-bottom: 1px solid var(--grau-1);
}
.anleitung li:last-child { border-bottom: 0; }
.anleitung li::before {
  content: counter(an); position: absolute; left: 0; top: var(--abstand-3);
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--blau); color: var(--weiss); font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: var(--schrift-2);
}
/* Ein Symbol so, wie es auf dem Telefon aussieht - als kleines Kästchen */
.taste {
  display: inline-flex; align-items: center; gap: .25em;
  padding: .05em .45em; border: 1px solid var(--grau-3); border-radius: var(--radius-1);
  background: var(--weiss); font-weight: 600; white-space: nowrap;
}
.taste .bi { color: var(--blau); }

/* Umschalter iPhone / Android über der Anleitung */
.geraetewahl { display: flex; gap: var(--abstand-3); margin-bottom: var(--abstand-5); }
.geraetewahl button { flex: 1 1 0; }
[data-geraet-teil] { display: none; }
[data-geraet="ios"] [data-geraet-teil="ios"],
[data-geraet="android"] [data-geraet-teil="android"] { display: block; }

/* Ein Kasten, der erst nach dem vorigen Schritt dran ist */
.kasten.gesperrt { opacity: .55; }
/* Die Ersteinrichtung geschieht auf dem Handy (Michael, 29.09.2026: "in
   allen Schritten gut lesbar und bedienbar, große Schrift, klare Schritte").
   Eine Stufe größer als sonst, Knöpfe mit Daumenhöhe. */
.einrichtung-gross { font-size: var(--schrift-5); }
.einrichtung-gross .anleitung li { font-size: var(--schrift-5); }
.einrichtung-gross .leise, .einrichtung-gross .small { font-size: var(--schrift-4); }
.einrichtung-gross .btn { font-size: var(--schrift-5); padding-top: var(--abstand-6);
                          padding-bottom: var(--abstand-6); }
.einrichtung-gross .btn-sm { font-size: var(--schrift-4); padding-top: var(--abstand-3);
                             padding-bottom: var(--abstand-3); }
/* Das Fenster "Einladung" in der Personenliste: der QR-Code mittig */
.einladung-qr { display: inline-block; padding: var(--abstand-3); background: var(--weiss);
                border: 1px solid var(--grau-3); border-radius: var(--radius-2); }