diff --git a/blickfang-portfolio-handy.png b/blickfang-portfolio-handy.png
index e309a996..5b2760f1 100644
Binary files a/blickfang-portfolio-handy.png and b/blickfang-portfolio-handy.png differ
diff --git a/blickfang-ueber-handy.png b/blickfang-ueber-handy.png
index 2d92ff88..c301e1b4 100644
Binary files a/blickfang-ueber-handy.png and b/blickfang-ueber-handy.png differ
diff --git a/pruef-portfolio-computer.png b/pruef-portfolio-computer.png
index 59cc6e70..39049ffb 100644
Binary files a/pruef-portfolio-computer.png and b/pruef-portfolio-computer.png differ
diff --git a/pruef-portfolio-handy.png b/pruef-portfolio-handy.png
index 6d9d56ea..874cd278 100644
Binary files a/pruef-portfolio-handy.png and b/pruef-portfolio-handy.png differ
diff --git a/pruef-portfolio.mjs b/pruef-portfolio.mjs
index 9670a79a..2ddeace9 100644
--- a/pruef-portfolio.mjs
+++ b/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
diff --git a/pruef-vw-schmuck-computer.png b/pruef-vw-schmuck-computer.png
index c21f9d30..6bf2b853 100644
Binary files a/pruef-vw-schmuck-computer.png and b/pruef-vw-schmuck-computer.png differ
diff --git a/pruef-vw-schmuck-handy.png b/pruef-vw-schmuck-handy.png
index 442aea55..6f4fcf4a 100644
Binary files a/pruef-vw-schmuck-handy.png and b/pruef-vw-schmuck-handy.png differ
diff --git a/webdesign/portfolio.html b/webdesign/portfolio.html
index abcfc161..fa3a97f1 100644
--- a/webdesign/portfolio.html
+++ b/webdesign/portfolio.html
@@ -37,7 +37,45 @@
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.2rem, 2.4vw, 2rem);
- align-items: start;
+ /* align-items bleibt auf dem Standard "stretch": Alle Kacheln einer
+ Zeile bekommen dieselbe Hoehe, naemlich die der hoechsten.
+
+ Vorher stand hier "start". Dann behaelt jede Kachel ihre
+ natuerliche Hoehe -- und weil die Projekttexte unterschiedlich
+ lang sind, standen zwei Kacheln nebeneinander, die sichtbar
+ verschieden hoch waren. */
+ }
+
+ /* Damit "stretch" wirkt, muss der Inhalt die zusaetzliche Hoehe auch
+ aufnehmen koennen. Ohne diese drei Zeilen waere die Kachel zwar
+ hoeher, ihr Inhalt bliebe aber oben kleben und darunter entstuende
+ ein leeres Feld. */
+ .pfo-raster .pfo-projekt { display: flex; flex-direction: column; }
+ .pfo-raster .pfo-inhalt { flex: 1; display: flex; flex-direction: column; }
+
+ /* Das letzte Element sitzt am unteren Rand, nicht direkt unter dem
+ Text. Dadurch stehen die Knoepfe zweier nebeneinanderliegender
+ Kacheln auf einer Linie, auch wenn die Texte unterschiedlich lang
+ sind -- genau das macht den Unterschied zwischen "gleich hoch" und
+ "sieht aufgeraeumt aus".
+
+ Bewusst :last-child statt einer Regel nur fuer den Knopf: Die
+ Buchhaltungs-Kachel hat gar keinen Knopf, sondern einen
+ Hinweistext an dieser Stelle. Der soll genauso unten stehen.
+
+ Die Abstaende standen vorher als style-Angabe direkt im HTML. Eine
+ solche Angabe schlaegt jede Regel aus dem Stilblatt -- die Knoepfe
+ blieben deshalb an unterschiedlicher Hoehe kleben, obwohl die
+ Kacheln laengst gleich hoch waren. Sie sind jetzt entfernt. */
+ .pfo-raster .pfo-inhalt > :last-child {
+ margin-top: auto;
+ padding-top: 1rem;
+ /* Ohne das haengen die letzten Elemente unterschiedlich hoch ueber
+ dem Kachelboden: Ein Absatz bringt einen eigenen Abstand nach
+ unten mit, eine Knopfreihe nicht. Gemessen waren es 48 gegen 33
+ Punkte -- bei sonst exakt gleich hohen Kacheln faellt genau das
+ auf. */
+ margin-bottom: 0;
}
@media (max-width: 760px) {
/* Darunter waeren zwei Spalten so schmal, dass Ueberschrift und
@@ -165,7 +203,7 @@
-
@@ -215,7 +253,7 @@
-
@@ -265,7 +303,7 @@
-
@@ -318,7 +356,7 @@
- Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.
+ Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.
@@ -370,7 +408,7 @@
-
diff --git a/webdesign/sw.js b/webdesign/sw.js
index 29893746..96c8a4e7 100644
--- a/webdesign/sw.js
+++ b/webdesign/sw.js
@@ -34,7 +34,7 @@
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v47";
+const CACHE_NAME = "dogfather-webdesign-v48";
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
HTML-Datei in dieser Liste. */