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]>

assets/css/webdesign.css

@@ -578,7 +578,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    angemerkt: „Dieses Paket anfragen“, „Live ansehen“ und „Was genau
    enthalten ist“ waren durchgehend 4px zu flach. 44px ist die Untergrenze,
    ab der ein Ziel mit dem Daumen zuverlässig getroffen wird. */
-.wd-btn--klein { min-height: 44px; padding: .6rem 1.05rem; font-size: .9rem; }
+/* 44.5 statt 44 (26.08.2026). Der Handy-Test misst die TATSAECHLICHE
+   Hoehe und vergleicht mit "< 44" -- ein Knopf, der mit Rahmen und
+   Zeilenhoehe auf 43,6 Punkte kommt, faellt durch, wird aber als "44"
+   ausgegeben, weil die Anzeige rundet. Man sucht dann einen Fehler in
+   einer Zahl, die richtig aussieht.
+
+   Der halbe Punkt kostet optisch nichts und nimmt den Rundungsfall aus
+   dem Spiel. */
+.wd-btn--klein { min-height: 44.5px; padding: .6rem 1.05rem; font-size: .9rem; }
 
 .wd-btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
 

assets/js/wd-core.js

@@ -863,7 +863,7 @@
          Stand haben. Die Nummer wird zusammen mit CACHE_NAME in sw.js
          hochgezaehlt -- beide gehoeren zusammen. */
       navigator.serviceWorker
-        .register("/webdesign/sw.js?v=61", { scope: "/webdesign/" })
+        .register("/webdesign/sw.js?v=62", { scope: "/webdesign/" })
         .catch(function () { /* still schlucken: ohne SW funktioniert alles weiter */ });
     });
   }

pruef-handy.mjs

@@ -531,11 +531,60 @@ console.log("\n=== Verwaltung auf dem Handy ===");
   pruefe("und der Streifen laesst sich wischen (sonst waeren sie abgeschnitten)",
     reiter.wischbar, "Hoehe " + reiter.hoehe + "px");
 
-  /* Der Kopfbereich darf nicht den halben Bildschirm fressen. */
-  const bisInhalt = await seite.evaluate(() =>
-    Math.round(document.querySelector(".vw-ub-gitter").getBoundingClientRect().top));
-  pruefe("die erste Zahl steht im oberen Drittel des Bildschirms",
-    bisInhalt < 300, bisInhalt + "px bis zur ersten Kachel");
+  /* Der Kopfbereich darf nicht den halben Bildschirm fressen.
+
+     ⚠️ Gemessen wird ab dem ENDE des Reiterstreifens, nicht ab dem
+     Seitenanfang (praezisiert 26.08.2026).
+
+     Vorher war es der Abstand vom oberen Rand bis zur ersten Kachel.
+     Damit schlug der Test auch dann an, wenn dort eine BERECHTIGTE
+     Warnung stand -- etwa "Benachrichtigung blockiert". Solche
+     Meldungen gehoeren genau dorthin: Sie verlangen eine Handlung, und
+     wer sie erledigt, ist sie wieder los.
+
+     Was der Test wirklich verhindern soll, ist ein aufgeblaehter
+     KOPFBEREICH aus Titel, Suchfeld und Reitern -- also feste Teile,
+     die immer da sind und die man nicht wegbekommt. Genau die werden
+     jetzt gemessen.
+
+     Ein Test, der berechtigte Meldungen als Mangel zaehlt, erzieht
+     dazu, Warnungen zu verstecken. Das waere das Gegenteil des Ziels. */
+  const kopfHoehe = await seite.evaluate(() => {
+    const streifen = document.querySelector(".vw-tabs");
+    const gitter = document.querySelector(".vw-ub-gitter");
+    if (!streifen || !gitter) return null;
+    return { kopfEndet: Math.round(streifen.getBoundingClientRect().bottom) };
+  });
+  pruefe("der feste Kopfbereich bleibt im oberen Drittel",
+    kopfHoehe && kopfHoehe.kopfEndet < 300,
+    (kopfHoehe ? kopfHoehe.kopfEndet : "?") + "px bis zum Ende der Reiter");
+
+  /* Und oberhalb der ersten Zahl darf hoechstens EINE Meldung stehen.
+
+     ⚠️ Zuerst wurde hier der Abstand in Punkten gemessen. Das war
+     fragil: Der Reiterstreifen klebt beim Scrollen oben fest, also
+     haengt der gemessene Abstand davon ab, wo die Seite gerade steht --
+     eine Messung lieferte sogar -204. Ein Test, dessen Ergebnis vom
+     Scrollzustand abhaengt, misst nicht die Sache, sondern den Zufall.
+
+     Gemeint war ohnehin etwas anderes: Nicht "wie viele Punkte", sondern
+     "wie viele Hinweisbloecke". Genau das wird jetzt gezaehlt --
+     unabhaengig von Scrollposition und Schriftgroesse. */
+  const meldungen = await seite.evaluate(() => {
+    const kandidaten = ["#vw-meldungen", "#vw-push-karte"];
+    let sichtbar = 0;
+    const namen = [];
+    for (const w of kandidaten) {
+      const el = document.querySelector(w);
+      if (!el || el.hidden) continue;
+      const r = el.getBoundingClientRect();
+      if (r.height > 0) { sichtbar++; namen.push(w + " (" + Math.round(r.height) + "px)"); }
+    }
+    return { sichtbar, namen };
+  });
+  pruefe("hoechstens eine Meldung ueber der ersten Zahl",
+    meldungen.sichtbar <= 1,
+    meldungen.namen.length ? meldungen.namen.join(", ") : "keine");
 
   /* Zwei Spalten statt zwoelf Zeilen untereinander. */
   const spalten = await seite.evaluate(() => {
@@ -547,7 +596,12 @@ console.log("\n=== Verwaltung auf dem Handy ===");
     spalten.spalten + " Spalten bei " + spalten.anzahl + " Kacheln");
 
   const laenge = await seite.evaluate(() => document.documentElement.scrollHeight);
-  pruefe("die Uebersicht ist deutlich kuerzer geworden", laenge < 2000,
+  /* 2100 statt 2000: Seit dem 26.08.2026 steht am Ende der Uebersicht
+     eine Zeile zum Zustand der Benachrichtigung. Sie kostet rund 70
+     Punkte und ist bewusst dort -- oben stand sie im Weg. Die
+     urspruengliche Absicht (nicht wieder auf 2635 wachsen) bleibt
+     gewahrt. */
+  pruefe("die Uebersicht bleibt kurz", laenge < 2100,
     laenge + "px (vorher 2635px)");
 
   /* Der aktive Reiter muss sichtbar werden, wenn man ueber eine Kachel

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>. ' +
+      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.innerHTML = pushKachel("Benachrichtigung blockiert", h, "warn");
+        '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">' +
+            ? ' · <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>';
-      kasten.innerHTML = pushKachel("Benachrichtigung ist an", h, "gut");
+        '</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">' +
+      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.innerHTML = pushKachel("Benachrichtigung einschalten", h, "warn");
+        '</div>');
     }
 
     kasten.hidden = false;