Bilder waren hochkant gestreckt und ungleich hoch, Abstaende halbiert

Rueckmeldung 22.08.2026 per Bildschirmfoto: "die sollen alle gleich
aussehen und nicht einer groesser oder kleiner" und "ich will nicht soooo
viel abstand".

1) Verzerrte, ungleich hohe Projektbilder
   Nachgemessen: 576px breit, aber 750px bzw. 696px hoch -- also hochkant
   gestreckt und unterschiedlich, obwohl im CSS sauber "aspect-ratio:
   16/10" stand. Ursache: die width/height-Attribute im HTML (die dort
   bewusst stehen, damit der Browser vor dem Laden den Platz reserviert
   und die Seite nicht springt) wirken wie eine CSS-Hoehe und schlagen
   aspect-ratio. Fix zentral ueber ".wd img[width][height] { height:
   auto }" statt in jeder einzelnen Regel -- so kann es bei einem neuen
   Bild nicht vergessen werden.
   Jetzt beide 576x360, Karten beide 853px hoch.

2) Zu viel Leerraum
   .wd-abschnitt hatte 100,8px oben UND unten, also gut 200px zwischen
   zwei Abschnitten. Halbiert auf 57,6px, Hero von 78svh auf 68svh.
   Seitenlaenge dadurch 8798px -> 7089px bei gleichem Inhalt.

3) Zwei neue Dauerpruefungen in pruefe-webdesign-handy.mjs, damit genau
   diese beiden Fehlerarten nicht wieder per Bildschirmfoto auffallen
   muessen:
   - verzerrte Bilder (gewuenschtes vs. tatsaechlich gerendertes
     Seitenverhaeltnis, 2 % Toleranz)
   - ungleich hohe Karten innerhalb EINER Rasterzeile

40/40 Abnahme weiterhin sauber.

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

server/pruefe-webdesign-handy.mjs

@@ -101,7 +101,69 @@ for (const pfad of SEITEN) {
         if (txt === el.getAttribute("data-i18n")) roh.push(txt);
       }
 
-      return { ueberlauf, raus: raus.slice(0, 5), klein: klein.slice(0, 5), roh: roh.slice(0, 5) };
+      /* Verzerrte Bilder.
+         Am 22.08.2026 gemeldet: zwei Projektbilder standen 576px breit,
+         aber 750px bzw. 696px hoch da -- hochkant gestreckt und ungleich,
+         obwohl im CSS 16:10 stand. Ursache waren die height-Attribute im
+         HTML, die wie eine CSS-Hoehe wirken und aspect-ratio schlagen.
+         Diese Pruefung vergleicht das im CSS gewuenschte Verhaeltnis mit
+         dem tatsaechlich gerenderten -- damit faellt so etwas sofort auf
+         und nicht erst per Bildschirmfoto. */
+      const verzerrt = [];
+      for (const bild of document.querySelectorAll("img")) {
+        const s = getComputedStyle(bild);
+        if (s.display === "none") continue;
+        const r = bild.getBoundingClientRect();
+        if (r.width < 2 || r.height < 2) continue;
+
+        const gewuenscht = s.aspectRatio;
+        if (!gewuenscht || gewuenscht === "auto") continue;
+        const teile = String(gewuenscht).split("/").map((t) => parseFloat(t));
+        if (teile.length !== 2 || !teile[0] || !teile[1]) continue;
+
+        const soll = teile[0] / teile[1];
+        const ist = r.width / r.height;
+        // 2 % Toleranz für Rundung auf ganze Pixel
+        if (Math.abs(soll - ist) / soll > 0.02) {
+          verzerrt.push(
+            (bild.className || bild.src.split("/").pop()).toString().slice(0, 40) +
+            ` soll ${soll.toFixed(2)}, ist ${ist.toFixed(2)} (${Math.round(r.width)}x${Math.round(r.height)})`
+          );
+        }
+      }
+
+      /* Gleich große Karten in einer Reihe. "die sollen alle gleich
+         aussehen und nicht einer größer oder kleiner" -- ungleiche Höhen
+         in EINER Zeile sind der haeufigste Grund, warum ein Raster
+         unaufgeraeumt wirkt. */
+      const ungleich = [];
+      for (const raster of document.querySelectorAll(".wd-grid")) {
+        const kinder = [...raster.children].filter((k) => k.getBoundingClientRect().height > 0);
+        if (kinder.length < 2) continue;
+        // Nur Elemente vergleichen, die tatsächlich nebeneinander stehen
+        const reihen = new Map();
+        for (const k of kinder) {
+          const oben = Math.round(k.getBoundingClientRect().top);
+          const schluessel = Math.round(oben / 8) * 8;
+          if (!reihen.has(schluessel)) reihen.set(schluessel, []);
+          reihen.get(schluessel).push(Math.round(k.getBoundingClientRect().height));
+        }
+        for (const [, hoehen] of reihen) {
+          if (hoehen.length < 2) continue;
+          if (Math.max(...hoehen) - Math.min(...hoehen) > 2) {
+            ungleich.push(`${raster.className.slice(0, 30)}: ${hoehen.join(", ")}px`);
+          }
+        }
+      }
+
+      return {
+        ueberlauf,
+        raus: raus.slice(0, 5),
+        klein: klein.slice(0, 5),
+        roh: roh.slice(0, 5),
+        verzerrt: verzerrt.slice(0, 5),
+        ungleich: ungleich.slice(0, 5),
+      };
     }, breite);
 
     const zeile = `  ${String(breite).padStart(4)}px`;
@@ -110,6 +172,8 @@ for (const pfad of SEITEN) {
     if (befund.raus.length) fehler.push("ragt heraus: " + befund.raus.join(", "));
     if (befund.klein.length) fehler.push("Touch-Ziel < 44px: " + befund.klein.join(", "));
     if (befund.roh.length) fehler.push("unuebersetzt: " + befund.roh.join(", "));
+    if (befund.verzerrt.length) fehler.push("Bild verzerrt: " + befund.verzerrt.join(" | "));
+    if (befund.ungleich.length) fehler.push("ungleich hohe Karten: " + befund.ungleich.join(" | "));
 
     if (fehler.length) {
       probleme.push(`${pfad} @ ${breite}px -> ${fehler.join(" | ")}`);