Die Seite laesst sich als App installieren

Das Manifest war lange vollstaendig -- die App LIESS sich
installieren. Nur bot das ausschliesslich der Browser an, versteckt
in seinem Dreipunktemenue. Wer es nicht sucht, findet es nie. Und
ohne installierte App gibt es auf dem Handy keine verlaesslichen
Benachrichtigungen; genau daran hing im September das Telefonieren.

Jetzt steht der Knopf in der Kopfleiste, auf allen Seiten, mit drei
Antworten statt einer:

  schon installiert -> gar kein Knopf
  Browser bietet an -> der Knopf fragt ihn
  Safari am iPhone  -> der Knopf erklaert den Weg

Der dritte Fall ist der gefaehrliche: Dort gibt es
beforeinstallprompt nicht und wird es nicht geben. Ein Knopf, der
am iPhone nichts tut, waere schlimmer als keiner -- man drueckt ihn
und sucht den Fehler bei sich.

pruef-installieren.mjs: 14 Pruefungen, alle drei Zustaende, mit
Gegenprobe in der installierten App.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/module.css

@@ -1022,3 +1022,43 @@
   .tperson[data-rolle="hand"] { border: 3px solid Highlight; }
   .tperson[data-rolle="hand"]::before { display: none; }
 }
+
+/* ---- Der Installieren-Knopf (20.09.2026) ---------------------------
+
+   Er sieht aus wie die anderen Knöpfe der Kopfleiste -- mit einem
+   Unterschied: ein leiser Akzentrand. Er ist ein Angebot, keine
+   Warnung, und er verschwindet, sobald er überflüssig ist. Deshalb
+   darf er auffallen, ohne zu drängen. */
+.install-knopf {
+  appearance: none;
+  display: inline-flex; align-items: center; gap: 7px;
+  min-height: 44px; padding: 0 13px;
+  border-radius: var(--radius-klein);
+  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
+  background: color-mix(in srgb, var(--akzent) 12%, transparent);
+  color: var(--text);
+  font: inherit; font-size: .86rem; font-weight: 600;
+  cursor: pointer; white-space: nowrap;
+  transition: background var(--tempo), border-color var(--tempo);
+}
+.install-knopf:hover {
+  background: color-mix(in srgb, var(--akzent) 22%, transparent);
+  border-color: color-mix(in srgb, var(--akzent) 70%, transparent);
+}
+.install-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.install-knopf__zeichen {
+  flex: none; width: 17px; height: 17px;
+  fill: none; stroke: currentColor; stroke-width: 1.8;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+/* AM HANDY NUR DAS ZEICHEN. Die Leiste ist dort eng, und ein Knopf mit
+   Pfeil-nach-unten-in-eine-Ablage wird als „herunterladen/installieren"
+   verstanden -- das Wort kostet 90 px, die woanders fehlen. Der
+   `aria-label` sagt es weiterhin vollständig. */
+@media (max-width: 760px) {
+  .install-knopf__text { display: none; }
+  .install-knopf { padding: 0; width: 44px; justify-content: center; }
+}
+@media (forced-colors: active) {
+  .install-knopf { border: 1px solid CanvasText; }
+}