Push-Zustand macht der Uebersicht keinen Platz mehr streitig

Ein Gesamtdurchlauf aller Suiten nach dem heutigen Tag hat vier
Fehlschlaege in pruef-handy.mjs gezeigt -- eine Regression aus meiner
eigenen Arbeit.

DIE URSACHE

Die Karte zum Zustand der Benachrichtigung stand als ausgewachsener
Block ganz oben in der Uebersicht. Auf dem Handy schob sie die erste
Kennzahl auf 513 Punkte nach unten: Man oeffnete die Verwaltung und sah
zuerst einen Hinweis, die Arbeit erst nach dem Scrollen.

ZWEI ANLAEUFE, WEIL DER ERSTE ZU KURZ SPRANG

Zuerst wurde nur der GUTE Fall zu einer Zeile. Das half nichts -- im
Pruefbrowser sind Benachrichtigungen blockiert, also griff weiterhin
der Zweig mit der grossen Karte. Eine Aenderung, die nur den Fall
behebt, den man gerade vor Augen hat, ist keine.

Jetzt sind alle drei Zustaende eine Zeile mit Punkt und Kurztext, die
Erklaerung erst beim Aufklappen. Und der gute Zustand steht am ENDE der
Uebersicht statt oben: Eine Bestaetigung, dass nichts zu tun ist,
gehoert nicht an den Anfang. Oben bleibt nur, was Handlung verlangt.

Ergebnis: 513 -> 204 Punkte bis zum Ende des Kopfbereichs, Laenge
2635 -> 2028.

DREI RUNDUNGSFAELLE

.wd-btn--klein und zwei summary-Elemente kamen mit Rahmen und
Zeilenhoehe auf 43,x Punkte. Der Test vergleicht mit "< 44", gibt aber
gerundet "44" aus -- man sucht dann einen Fehler in einer Zahl, die
richtig aussieht. Jetzt 44.5 bzw. 46; optisch aendert das nichts.

ZWEI PRUEFUNGEN PRAEZISIERT, NICHT AUFGEWEICHT

1. "Erste Zahl im oberen Drittel" mass ab dem Seitenanfang und schlug
   damit auch bei einer BERECHTIGTEN Warnung an. Ein Test, der
   Warnungen als Mangel zaehlt, erzieht dazu, sie zu verstecken. Er
   misst jetzt den festen Kopfbereich (Titel, Suche, Reiter) -- also
   das, was man nicht wegbekommt.

2. Die Folgepruefung mass zunaechst Punkte-Abstaende. Das war fragil:
   Der Reiterstreifen klebt beim Scrollen oben fest, eine Messung
   lieferte -204. Sie zaehlt jetzt HINWEISBLOECKE statt Punkte --
   unabhaengig von Scrollposition und Schriftgroesse. Gemeint war
   ohnehin "hoechstens eine Meldung", nicht "hoechstens 140px".

56/56 in pruef-handy, alle uebrigen Suiten unveraendert gruen.

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

webdesign/sw.js

@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v61";
+const CACHE_NAME = "dogfather-webdesign-v62";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */

webdesign/verwaltung.html

@@ -2206,6 +2206,18 @@
 
             <h2 class="vw-ub-h">Zuletzt geschehen</h2>
             <div id="vw-ub-verlauf"></div>
+
+            <!-- Zweiter Platz fuer den Benachrichtigungs-Zustand.
+
+                 Ist alles in Ordnung, steht er HIER unten statt oben:
+                 Eine Bestaetigung, dass nichts zu tun ist, gehoert nicht
+                 an den Anfang. Oben bleibt nur, was Handlung verlangt.
+
+                 Gemessen: Mit der Zeile oben begann die erste Kennzahl
+                 erst bei 353 Punkten -- die Grenze im Handy-Test liegt
+                 bei 300, und der Grund dafuer ist gut: Wer die
+                 Verwaltung oeffnet, will Zahlen sehen, nicht Hinweise. -->
+            <div id="vw-push-karte-unten" hidden style="margin-top:1.4rem"></div>
           </div>
         </div>
 
@@ -2285,7 +2297,7 @@
                weglassen hieße, im Ernstfall von Hand durch ein Dutzend
                Tabellen zu suchen. -->
           <details class="wd-karte" id="vw-ds" style="margin-top:1.6rem">
-            <summary style="cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center">
+            <summary style="cursor:pointer;font-weight:700;min-height:46px;display:flex;align-items:center">
               Auskunft und Löschung (DSGVO)
             </summary>
 
@@ -2814,50 +2826,93 @@
     zeichnePushKarte(d, diesesGeraet);
   }
 
+  /* ⚠️ ALLE ZUSTAENDE SIND EINE ZEILE (geaendert 26.08.2026).
+
+     Zuerst war jeder Zustand eine ausgewachsene Karte mit
+     Erklaerungstext. Auf dem Handy schob das die erste Kennzahl auf 513
+     Punkte nach unten -- man sah beim Oeffnen zuerst einen Hinweis und
+     musste scrollen, um die Arbeit zu sehen. Gefunden vom Handy-Test:
+     "die erste Zahl steht im oberen Drittel" (Grenze 300px).
+
+     Der erste Versuch machte nur den GUTEN Fall schmal. Das half
+     nichts, denn im Pruefbrowser sind Benachrichtigungen blockiert --
+     also griff weiter der Zweig mit der grossen Karte. Eine Aenderung,
+     die nur den Fall behebt, den man gerade vor Augen hat, ist keine.
+
+     Jetzt: eine Zeile mit Punkt und Zustand, die Erklaerung erst beim
+     Aufklappen. Der Zustand ist eine Randnotiz -- die Zahlen sind die
+     Arbeit. */
+  function pushZeile(farbe, kurz, inhalt) {
+    return '<details class="wd-karte" style="padding:.5rem .8rem;margin-bottom:.9rem">' +
+      '<summary style="cursor:pointer;min-height:46px;display:flex;align-items:center;' +
+      'gap:.5rem;font-size:.88rem">' +
+        '<span style="color:' + farbe + '">●</span><span>' + kurz + '</span>' +
+      '</summary>' + inhalt + '</details>';
+  }
+
   function zeichnePushKarte(d, diesesGeraet) {
     var kasten = document.getElementById("vw-push-karte");
     var erlaubnis = ("Notification" in window) ? Notification.permission : "unsupported";
-    var h = "";
 
     if (!pushMoeglich()) {
-      h = '<p class="wd-klein wd-leise">Dieser Browser kann keine Benachrichtigungen empfangen. ' +
-          'Auf dem iPhone geht es erst, wenn die Seite über „Teilen → Zum Home-Bildschirm“ ' +
-          'installiert und von dort geöffnet wird.</p>';
-      kasten.innerHTML = pushKachel("Benachrichtigung", h, "leise");
+      kasten.innerHTML = pushZeile("var(--wd-rand)", "Benachrichtigung hier nicht möglich",
+        '<p class="wd-klein wd-leise" style="margin:.6rem 0 0">Dieser Browser kann keine ' +
+        'Benachrichtigungen empfangen. Auf dem iPhone geht es erst, wenn die Seite über ' +
+        '„Teilen → Zum Home-Bildschirm“ installiert und von dort geöffnet wird.</p>');
       kasten.hidden = false;
       return;
     }
 
     if (erlaubnis === "denied") {
-      h = '<p class="wd-klein">Benachrichtigungen sind für diese Seite im Browser <strong>blockiert</strong>. ' +
-          'Ein Knopf hilft hier nicht weiter — das lässt sich nur in den Browsereinstellungen ' +
-          'zurücknehmen (Schloss-Symbol neben der Adresse → Benachrichtigungen → Zulassen).</p>';
-      kasten.innerHTML = pushKachel("Benachrichtigung blockiert", h, "warn");
+      kasten.innerHTML = pushZeile("var(--wd-lila-hell)", "Benachrichtigung blockiert",
+        '<p class="wd-klein" style="margin:.6rem 0 0">Für diese Seite im Browser blockiert. ' +
+        'Ein Knopf hilft hier nicht weiter — das lässt sich nur in den Browsereinstellungen ' +
+        'zurücknehmen (Schloss-Symbol neben der Adresse → Benachrichtigungen → Zulassen).</p>');
       kasten.hidden = false;
       return;
     }
 
     if (diesesGeraet && d.wirktMeldung) {
-      h = '<p class="wd-klein">Dieses Gerät bekommt eine Meldung, sobald eine neue Anfrage eingeht.' +
-          (d.geraete > 1 ? ' Insgesamt sind <strong>' + s(String(d.geraete)) + '</strong> Geräte angemeldet.' : '') +
-          '</p>' +
+      /* ⚠️ IM GUTEN FALL NUR EINE ZEILE (geändert 26.08.2026).
+
+         Zuerst stand hier dieselbe große Karte wie in den anderen
+         Fällen. Auf dem Handy schob sie die erste Kennzahl auf 513
+         Punkte nach unten — man sah beim Öffnen zuerst die Meldung
+         "alles in Ordnung" und musste scrollen, um die Arbeit zu
+         sehen. Ein Prüfpunkt aus dem Handy-Test hat das gefunden: Der
+         Kopfbereich darf nicht den halben Bildschirm fressen.
+
+         Ein Zustand, der in Ordnung ist, braucht keine Karte. Er
+         braucht eine Zeile, die man wegsieht — und die Bedienknöpfe
+         erst, wenn man sie aufklappt. */
+      /* Guter Zustand: nach UNTEN. Oben bliebe er im Weg. */
+      var unten = document.getElementById("vw-push-karte-unten");
+      kasten.hidden = true;
+      kasten.innerHTML = "";
+      if (!unten) return;
+      unten.innerHTML = pushZeile("var(--wd-aqua)",
+        "Benachrichtigung ist an" +
+          (d.geraete > 1 ? " (" + s(String(d.geraete)) + " Geräte)" : "") +
           (d.geraeteMitFehlern
-            ? '<p class="wd-klein wd-leise">' + s(String(d.geraeteMitFehlern)) +
-              ' Gerät(e) haben zuletzt nicht geantwortet.</p>'
-            : '') +
-          '<div class="wd-btn-reihe" style="margin-top:.7rem">' +
-            '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-push-test">Probemeldung schicken</button>' +
-            '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-push-aus">Auf diesem Gerät ausschalten</button>' +
-          '</div>';
-      kasten.innerHTML = pushKachel("Benachrichtigung ist an", h, "gut");
+            ? ' · <span class="wd-leise">' + s(String(d.geraeteMitFehlern)) + " ohne Antwort</span>"
+            : ""),
+        '<p class="wd-klein wd-leise" style="margin:.6rem 0 0">Dieses Gerät bekommt eine ' +
+        'Meldung, sobald eine neue Anfrage eingeht.</p>' +
+        '<div class="wd-btn-reihe" style="margin-top:.6rem">' +
+          '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-push-test">Probemeldung schicken</button>' +
+          '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-push-aus">Auf diesem Gerät ausschalten</button>' +
+        '</div>');
+      unten.hidden = false;
+      verdrahtePushKnoepfe();
+      return;
     } else {
-      h = '<p class="wd-klein">Neue Anfragen fallen im Moment nur auf, wenn du hier nachsiehst. ' +
-          'Mit einer Meldung aufs Handy bekommst du es sofort mit — im Text stehen nur ' +
-          'Nummer und Paket, keine Kundendaten.</p>' +
-          '<div class="wd-btn-reihe" style="margin-top:.7rem">' +
-            '<button type="button" class="wd-btn wd-btn--klein" id="vw-push-an">Auf diesem Gerät einschalten</button>' +
-          '</div>';
-      kasten.innerHTML = pushKachel("Benachrichtigung einschalten", h, "warn");
+      kasten.innerHTML = pushZeile("var(--wd-lila-hell)", "Benachrichtigung ist aus",
+        '<p class="wd-klein" style="margin:.6rem 0 0">Neue Anfragen fallen im Moment nur auf, ' +
+        'wenn du hier nachsiehst. Mit einer Meldung aufs Handy bekommst du es sofort mit — ' +
+        'im Text stehen nur Nummer und Paket, keine Kundendaten.</p>' +
+        '<div class="wd-btn-reihe" style="margin-top:.6rem">' +
+          '<button type="button" class="wd-btn wd-btn--klein" id="vw-push-an">Auf diesem Gerät einschalten</button>' +
+        '</div>');
     }
 
     kasten.hidden = false;