diff --git a/webdesign/diagnose.html b/webdesign/diagnose.html
index 3bb8cde5..90274594 100644
--- a/webdesign/diagnose.html
+++ b/webdesign/diagnose.html
@@ -34,10 +34,22 @@ h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; color: #7fd0e8; }
   border: 1px solid rgba(127,208,232,.16); border-radius: 10px;
   background: rgba(16,26,41,.5);
 }
+/* min-width:0 ist Pflicht, kein Feinschliff: Ohne das weigert sich ein
+   Flex-Kind, unter seine Inhaltsbreite zu schrumpfen, und langer Text
+   sprengt die Karte seitlich. */
+.zeile .inhalt { min-width: 0; flex: 1 1 auto; }
 .zeile b { display: block; margin-bottom: .1rem; }
-.zeile span { color: #8f9fb4; font-size: .9rem; word-break: break-word; }
-.mark { flex: none; width: 26px; height: 26px; border-radius: 50%;
-  display: grid; place-items: center; font-size: .95rem; line-height: 1; }
+/* Nur der Beschreibungstext, NICHT jeder span in der Zeile -- sonst
+   traefe die Regel auch den Statuskreis. */
+.zeile .text { color: #8f9fb4; font-size: .9rem; overflow-wrap: anywhere; }
+.mark {
+  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: .95rem; line-height: 1;
+  /* Der Kreis enthaelt genau ein Zeichen. Sollte je mehr hineingeraten,
+     bricht es nicht die Seite auf, sondern wird abgeschnitten. */
+  overflow: hidden;
+}
 .gut  { background: rgba(111,214,163,.15); color: #6fd6a3; }
 .warn { background: rgba(232,200,119,.18); color: #e8c877; }
 .bad  { background: rgba(255,157,157,.15); color: #ff9d9d; }
@@ -69,7 +81,7 @@ code { background: rgba(127,208,232,.1); padding: .1rem .35rem; border-radius: 5
 
   <h2>Prüfungen</h2>
   <div id="ergebnis">
-    <div class="zeile"><span class="mark wart">…</span><div><b>Läuft</b><span>Einen Moment.</span></div></div>
+    <div class="zeile"><span class="mark wart" aria-hidden="true">…</span><div class="inhalt"><b>Prüfung läuft</b><span class="text">Einen Moment.</span></div></div>
   </div>
 
   <div class="knoepfe">
@@ -96,13 +108,43 @@ code { background: rgba(127,208,232,.1); padding: .1rem .35rem; border-radius: 5
   var API = "https://postfach.dogfather-universe.com";
   var ziel = document.getElementById("ergebnis");
 
+  /* Die Zeile wird Element fuer Element gebaut, NICHT ueber innerHTML mit
+     anschliessendem querySelector.
+
+     Genau daran ist die erste Fassung gescheitert: Sie schrieb
+     d.querySelector("span").textContent = text -- und querySelector
+     liefert den ERSTEN passenden span. Das war der Statuskreis, nicht das
+     Textfeld darunter. Der ganze Beschreibungstext landete dadurch in
+     einem 26 Pixel breiten Kreis und lief als schmale Buchstabensaeule
+     ueber die halbe Seite.
+
+     Mit direkten Verweisen auf die erzeugten Elemente kann das nicht
+     passieren -- es gibt nichts zu verwechseln. */
   function zeile(art, titel, text) {
-    var z = { gut: "✓", warn: "!", bad: "✕", wart: "…" };
+    var zeichen = { gut: "✓", warn: "!", bad: "✕", wart: "…" };
+
     var d = document.createElement("div");
     d.className = "zeile";
-    d.innerHTML = '<span class="mark ' + art + '">' + z[art] + "</span><div><b></b><span></span></div>";
-    d.querySelector("b").textContent = titel;
-    d.querySelector("span").textContent = text;
+
+    var kreis = document.createElement("span");
+    kreis.className = "mark " + art;
+    kreis.textContent = zeichen[art] || "?";
+    kreis.setAttribute("aria-hidden", "true");
+
+    var inhalt = document.createElement("div");
+    inhalt.className = "inhalt";
+
+    var ueberschrift = document.createElement("b");
+    ueberschrift.textContent = titel;
+
+    var beschreibung = document.createElement("span");
+    beschreibung.className = "text";
+    beschreibung.textContent = text;
+
+    inhalt.appendChild(ueberschrift);
+    inhalt.appendChild(beschreibung);
+    d.appendChild(kreis);
+    d.appendChild(inhalt);
     ziel.appendChild(d);
   }