Portfolio: Kacheln einer Reihe sind gleich gross

Die Projekttexte sind unterschiedlich lang, also waren auch die Kacheln
unterschiedlich hoch. Jetzt bekommen alle Kacheln einer Reihe dieselbe
Hoehe, naemlich die der hoechsten.

Dafuer waren drei Dinge noetig, und nur das erste ist offensichtlich:

1. "align-items: start" musste weg. Es liess jede Kachel ihre
   natuerliche Hoehe behalten -- genau das war der Fehler.

2. Der Inhalt muss die zusaetzliche Hoehe auch aufnehmen koennen.
   Ohne Flex-Aufbau in Kachel und Inhalt waere die Kachel zwar hoeher,
   ihr Inhalt bliebe aber oben kleben und darunter entstuende ein
   leeres Feld.

3. Das letzte Element sitzt am unteren Rand.

DER PUNKT, DER FAST DURCHGERUTSCHT WAERE

Gleich hohe Kacheln heissen NICHT automatisch, dass der Inhalt buendig
steht. Nach Schritt 1 und 2 waren die Kacheln exakt gleich hoch -- und
die Knoepfe standen trotzdem auf verschiedener Hoehe.

Grund: Die Abstaende standen als style-Angabe direkt im HTML
(style="margin-top:1rem"). Eine solche Angabe schlaegt jede Regel aus
dem Stilblatt, das "margin-top: auto" lief also ins Leere. Fuenf
Vorkommen entfernt.

Danach blieben 33 gegen 48 Punkte Abstand zum Kachelboden: Ein Absatz
bringt einen eigenen Abstand nach unten mit, eine Knopfreihe nicht.
Auch das ist jetzt vereinheitlicht.

Die Regel greift ueber :last-child statt nur ueber die Knopfreihe --
die Buchhaltungs-Kachel hat naemlich gar keinen Knopf, sondern einen
Hinweistext an dieser Stelle. Der soll genauso unten stehen.

DIE PRUEFUNG MISST BEIDES GETRENNT

Einmal "jede Reihe ist in sich gleich hoch", einmal "die letzten
Elemente stehen auf einer Linie". Ein einzelner Test auf die Hoehe
haette den Knopf-Versatz nie bemerkt -- die Kacheln waren ja bereits
gleich hoch, als die Knoepfe noch verrutscht waren.

Gemessen: 1129/1129, 881/881, 831 -- und ueberall 33 Punkte Abstand zum
Kachelboden.

Geprueft: 313 Pruefungen gruen (Portfolio 34, Bewegung 34, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).

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

pruef-portfolio.mjs

@@ -126,6 +126,52 @@ srv.listen(4403, async () => {
   await seite.setViewportSize({ width: 1440, height: 950 });
   await seite.waitForTimeout(500);
 
+  console.log("\n1c. SIND DIE KACHELN EINER REIHE GLEICH GROSS?");
+  await seite.evaluate(async () => {
+    for (const el of document.querySelectorAll(".pfo-bild")) {
+      el.scrollIntoView();
+      await new Promise((r) => setTimeout(r, 180));
+    }
+    window.scrollTo(0, 0);
+  });
+  await seite.waitForTimeout(800);
+
+  const reihen = await seite.evaluate(() => {
+    const k = [...document.querySelectorAll(".pfo-projekt")];
+    const nach = {};
+    k.forEach((x) => {
+      const r = x.getBoundingClientRect();
+      const oben = Math.round(r.top);
+      const letzte = x.querySelector(".pfo-inhalt > :last-child");
+      (nach[oben] = nach[oben] || []).push({
+        hoehe: Math.round(r.height),
+        /* Abstand vom letzten Element bis zum Kachelboden. */
+        unten: letzte ? Math.round(r.bottom - letzte.getBoundingClientRect().bottom) : -1,
+      });
+    });
+    return Object.values(nach);
+  });
+
+  pruefe("es gibt Reihen mit zwei Kacheln",
+    reihen.some((r) => r.length === 2),
+    reihen.map((r) => r.length).join("+"));
+
+  /* Der eigentliche Punkt: Die Projekttexte sind unterschiedlich lang.
+     Ohne "stretch" behaelt jede Kachel ihre natuerliche Hoehe, und dann
+     stehen zwei sichtbar verschieden hohe Kacheln nebeneinander. */
+  pruefe("jede Reihe ist in sich gleich hoch",
+    reihen.every((r) => new Set(r.map((x) => x.hoehe)).size === 1),
+    reihen.map((r) => r.map((x) => x.hoehe).join("/")).join("  "));
+
+  /* Und die Knoepfe muessen auf einer Linie stehen. Das ist NICHT
+     dasselbe: Die Kacheln koennen gleich hoch sein und der Inhalt
+     trotzdem unterschiedlich weit oben kleben. Genau so war es, weil
+     die Abstaende als style-Angabe im HTML standen -- und eine solche
+     Angabe schlaegt jede Regel aus dem Stilblatt. */
+  pruefe("und die letzten Elemente stehen auf einer Linie",
+    reihen.every((r) => new Set(r.map((x) => x.unten)).size === 1),
+    reihen.map((r) => r.map((x) => x.unten + "px").join("/")).join("  "));
+
   console.log("\n2. UEBERSETZUNGEN — IN ALLEN FUENF SPRACHEN");
   /* Geprueft werden die SEITENEIGENEN Schluessel (pf_, p1_-p5_,
      seiten_titel). Navigations- und Markentexte liegen bewusst nicht