Am Handy lag Text auf Text -- im Satz ueber Vertraulichkeit

Auf der Befindens-Seite ueberlagerten sich bei 430 px zwei Absaetze
um 18 Pixel. Betroffen war ausgerechnet "Deine Antworten liest
niemand ausser dir" -- also der Satz, in dem das Vertrauen entsteht,
das die ganze Seite braucht.

Ursache war eine feste Zahl: -18px Abstand, gerechnet gegen die
26 px, die das Element darueber mitbringt. In einer Kopfzeile setzt
start.css dieses margin-bottom aber auf 0. Aus 26 minus 18 wurde
0 minus 18. Zwei fuer sich richtige Regeln, und dazwischen ein
Schaden, den keine von beiden verursacht.

Die Lehre ist nicht "-18 auf -8 aendern" -- das waere dieselbe Zahl
mit anderem Wert und beim naechsten Zusammentreffen wieder falsch.
Jetzt bestimmt der Absatz davor seinen Abstand selbst, und nur dann,
wenn der Zusatz wirklich folgt (:has). Acht Pixel, in jeder Umgebung.

Gefunden hat es ein Bildschirmfoto, nicht das Lesen: Beide Regeln
sehen einzeln vernuenftig aus. Die Messung steht jetzt fest in
pruef-befinden.mjs (113/0), mit Gegenprobe: Mit dem alten Wert wird
sie rot, ohne ihn gruen.

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

server/pruef-befinden.mjs

@@ -880,6 +880,56 @@ melde("=== 8. Die Analyse im Browser ===");
   ok(g.schluss.length > 20, `und einem Schlusssatz („${g.schluss.slice(0, 46)}…")`);
   ok(/\d+ Fragen aus \d+ Feldern/.test(g.zahlen),
     `die Belegzahlen stehen darunter („${g.zahlen}")`);
+
+  /* ---- KEIN TEXT AUF TEXT, AUCH AM HANDY (20.09.2026) --------------
+
+     Gefunden hat das ein Bildschirmfoto bei 430 px: Die Unterzeile
+     „Deine Antworten liest niemand ausser dir" lag 18 px UNTER dem
+     Absatz darunter -- Buchstaben in Buchstaben, ausgerechnet in dem
+     Satz, in dem Vertrauen entsteht.
+
+     Ursache war eine feste Zahl: `-18px` Abstand, gerechnet gegen die
+     26 px, die das Element darueber mitbrachte. In der Kopfzeile sind
+     es aber 0 px. Zwei fuer sich richtige Regeln, und dazwischen ein
+     Schaden, den keine von beiden verursacht.
+
+     Warum das hier stehen bleibt: Es ist kein Fehler, den man beim
+     Lesen sieht -- beide Regeln wirken einzeln vernuenftig. Nur eine
+     Messung findet ihn wieder, wenn jemand an einem der beiden
+     Abstaende dreht. */
+  const enge = await seite.setViewportSize({ width: 430, height: 900 })
+    .then(() => seite.waitForTimeout(500))
+    .then(() => seite.evaluate(() => {
+      const kandidaten = [...document.querySelectorAll("body *")].filter((e) => {
+        const r = e.getBoundingClientRect();
+        return r.width > 20 && r.height > 6
+          && /P|H1|H2|H3|LI/.test(e.tagName)
+          && e.textContent.trim().length > 12;
+      });
+      const treffer = [];
+      for (let i = 0; i < kandidaten.length; i++) {
+        for (let j = i + 1; j < kandidaten.length; j++) {
+          const x = kandidaten[i], y = kandidaten[j];
+          if (x.contains(y) || y.contains(x)) continue;
+          const a2 = x.getBoundingClientRect(), b2 = y.getBoundingClientRect();
+          const ux = Math.min(a2.right, b2.right) - Math.max(a2.left, b2.left);
+          const uy = Math.min(a2.bottom, b2.bottom) - Math.max(a2.top, b2.top);
+          if (ux > 8 && uy > 6) {
+            treffer.push(`${x.className.split(" ")[0]} über ${y.className.split(" ")[0]} (${Math.round(uy)} px)`);
+          }
+        }
+      }
+      return { treffer, geprueft: kandidaten.length };
+    }));
+  /* DIE ZAHL GEHOERT IN DIE BEDINGUNG. Faende der Wahlausdruck nichts,
+     waere `treffer` leer und die Pruefung gruen, ohne etwas angesehen
+     zu haben -- genau der Fehler vom 01.09. mit `every()` auf einer
+     leeren Liste. */
+  ok(enge.geprueft > 20 && enge.treffer.length === 0,
+    enge.treffer.length
+      ? `Text liegt auf Text: ${enge.treffer.slice(0, 2).join("; ")}`
+      : `bei 430 px liegt kein Text auf Text (${enge.geprueft} Absätze verglichen)`);
+  await seite.setViewportSize({ width: 1280, height: 1000 });
   if (process.env.SCHIRM) {
     await seite.locator("#analyse-block").screenshot(
       { path: "C:/Users/qciga/Documents/Obelix/DogiHompage/blick.png" });

workspace/assets/css/gate.css

@@ -439,8 +439,35 @@ body.gate {
    vervollständigt ihn. Deshalb tritt sie zurück, statt zu warnen —
    augenschonend heißt hier ausdrücklich auch: keine Signalfarbe für
    etwas, das keine Warnung ist. */
+/* ---- DER ABSTAND IST EINE REGEL, KEINE ZAHL (korrigiert 20.09.2026) --
+
+   Hier stand `margin: -18px 0 26px`. Die -18 waren gegen die 26 px
+   gerechnet, die `.unterzeile` darueber mitbringt -- Netto acht Pixel
+   Abstand, und auf der Torseite sah das richtig aus.
+
+   AUF DER BEFINDENS-SEITE UEBERLAGERTEN SICH DIE BEIDEN ABSAETZE UM
+   GENAU 18 PIXEL. Dort steht die Unterzeile in einer Kopfzeile, und
+   `start.css` setzt deren `margin-bottom` auf 0. Aus 26 minus 18 wurde
+   0 minus 18. Zwei fuer sich richtige Regeln, und dazwischen Text ueber
+   Text -- ausgerechnet im Satz „Deine Antworten liest niemand ausser
+   dir", also dort, wo Vertrauen entsteht.
+
+   Gefunden hat es ein Bildschirmfoto, nicht das Lesen: Beide Regeln
+   sehen einzeln vernuenftig aus.
+
+   DIE LEHRE IST NICHT „-18 auf -8 aendern" -- das waere dieselbe Zahl
+   mit einem anderen Wert und beim naechsten Zusammentreffen wieder
+   falsch. Stattdessen bestimmt der Absatz DAVOR seinen Abstand selbst,
+   und zwar nur dann, wenn der Zusatz wirklich folgt (`:has`). Damit
+   sind es IMMER acht Pixel, egal in welcher Umgebung.
+
+   Die Klasse steht doppelt (`.unterzeile.unterzeile`), um dieselbe
+   Staerke wie `.willkommen .unterzeile` zu uebertreffen -- sonst
+   entschiede die Ladereihenfolge, und gate.css laedt zuerst. */
+.unterzeile.unterzeile:has(+ .unterzeile--zusatz) { margin-bottom: 8px; }
+
 .unterzeile--zusatz {
-  margin: -18px 0 26px;
+  margin: 0 0 26px;
   padding-left: 11px;
   border-left: 2px solid var(--rand);
   max-width: 62ch;