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

assets/css/webdesign.css

@@ -125,8 +125,14 @@ body.wd::after {
 .wd-container { width: min(1180px, 92vw); margin: 0 auto; }
 .wd-container--schmal { width: min(860px, 92vw); }
 
-.wd-abschnitt { padding: clamp(3.4rem, 7vw, 6.5rem) 0; position: relative; }
-.wd-abschnitt--eng { padding: clamp(2rem, 4vw, 3.2rem) 0; }
+/* Abstand zwischen den Abschnitten.
+   Vorher clamp(3.4rem, 7vw, 6.5rem) = 100,8px oben UND unten, also gut
+   200px Leerraum zwischen zwei Abschnitten. Rueckmeldung 22.08.2026:
+   "ich will nicht soooo viel abstand". Jetzt rund die Haelfte -- immer
+   noch klar getrennt, aber ohne dass man an leeren Flaechen
+   vorbeiscrollt. */
+.wd-abschnitt { padding: clamp(2.2rem, 4vw, 3.6rem) 0; position: relative; }
+.wd-abschnitt--eng { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; }
 /* Abwechselnde Grundfläche statt Trennlinien — ruhiger und trotzdem klar. */
 .wd-abschnitt--gehoben { background: linear-gradient(180deg, transparent, var(--wd-dunkelblau) 14%, var(--wd-dunkelblau) 86%, transparent); }
 
@@ -196,6 +202,28 @@ body.wd::after {
   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
 }
 
+
+/* ---------------------------------------------------------------------
+   BILDVERHAELTNIS — diese Regel verhindert einen Fehler, der schon
+   passiert ist und sonst wieder passiert.
+
+   Bilder tragen im HTML bewusst width/height als Attribute: der Browser
+   reserviert damit vor dem Laden den richtigen Platz und die Seite
+   springt beim Nachladen nicht. Diese Attribute wirken aber wie eine
+   CSS-Hoehe -- und schlagen damit jedes spaetere "aspect-ratio".
+
+   Live gemeldet am 22.08.2026 ("die sollen alle gleich aussehen"): die
+   beiden Projektbilder standen mit 750px bzw. 696px Hoehe bei nur 576px
+   Breite da, also hochkant gestreckt und ungleich hoch, obwohl im CSY
+   sauber 16:10 stand.
+
+   "height: auto" gibt die Hoehe an aspect-ratio zurueck. Es steht hier
+   einmal zentral fuer alle Bilder mit Seitenverhaeltnis, statt in jeder
+   einzelnen Regel -- so kann es bei einem neuen Bild nicht vergessen
+   werden.
+   --------------------------------------------------------------------- */
+.wd img[width][height] { height: auto; }
+
 /* ---------------------------------------------------------------------
    3. KARTEN — "glasartig mit feinen Neonrändern" (Masterplan S.6)
    Der Rand ist bewusst ein Verlauf über border-box statt einer flachen
@@ -786,7 +814,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
    Adressleiste — der Knopf rutscht damit beim ersten Laden unter die
    sichtbare Kante, genau das, was die Hero-Regel verbietet.
    --------------------------------------------------------------------- */
-.wd-hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); min-height: 78svh; display: flex; align-items: center; }
+.wd-hero { position: relative; padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 4vw, 3.4rem); min-height: 68svh; display: flex; align-items: center; }
 .wd-hero-inhalt { max-width: 780px; }
 .wd-hero h1 { margin-bottom: .45em; }
 .wd-hero .wd-lead { margin-bottom: 1.8rem; max-width: 62ch; }