Uebergang strecken, Produktbilder schaerfen, Streifen im Schluss entfernen #147

Merged

Phil merged 1 commit from fix/goldader-uebergang-strecken into main

2026-09-10 15:02:55 +00:00

Phil commented

2026-09-10 15:02:49 +00:00

Owner

Drei Befunde aus der Sichtprüfung.

1. Der Goldader-Übergang war ein Schnitt, kein Übergang

Die Überblendung hing an start: 'top top' / end: 'bottom bottom'. Bei einer 1.257 px hohen Sektion im 900-px-Fenster sind das 357 px Scrollweg — nach einem Drittel der Sektion war der Wechsel vorbei, danach passierte 900 px lang nichts.

Jetzt start: 'top 80%' bis end: 'bottom 30%', also der ganze sichtbare Durchgang. Gemessen läuft der Wechsel über rund 1.400 px und steigt gleichmäßig von 0 auf 1. power1.inOut lässt die Mitte, in der beide Bilder halb durchscheinen, schneller passieren als die Enden.

2. Produktbilder: Teilausschnitt und Unschärfe

Zwei Ursachen, beide an der Wurzel behoben.

Beschnitten: products.scss deklariert aspect-ratio: 4/3, aber das height-Attribut des <img> überstimmt es — eine Folge des Bildmaß-Fixes aus #139, der jetzt die echten Transform-Maße ausgibt. Das Feld war dadurch 363 × 166 statt 363 × 272, und object-fit: cover schnitt oben und unten weg. Bei der Konferenzaufnahme fehlten die halben Teilnehmerkacheln. height: auto lässt aspect-ratio wieder greifen.

Die Konferenzaufnahme liegt zusätzlich selbst im 4:3 vor (1200 × 900, mittig aus 2880 × 1800), damit cover nichts Wesentliches beschneidet — alle vier Gesichter, Namensschilder, Bedienleiste und Aufnahmekante bleiben drin.

Unscharf: Angefordert wurden 266 px für ein 363 px breites Feld, auf Netzhaut-Anzeigen also gut vierfach hochskaliert. Jetzt 400 × 300, das erzeugt Kandidaten bis 800 px.

Nebenbefund: Die Zuschnitte im Ordner produkte/ entstanden nicht, weil der Ordner mir gehörte und der Webserver dort nicht schreiben durfte. Rechte an den übrigen Bildordner-Bestand angeglichen — das ist ein lokaler Zustand, keine Repo-Änderung.

3. Dunklerer Streifen hinter dem Porträt im Schluss-Banner

Das Band, das die Fläche nach oben verlängert, damit der Überhang des Porträts Grund unter sich hat, trug mit $blueDarkColor (#141933) einen anderen Ton als die Sektion (#020336). Die Naht lag genau auf Kinnhöhe.

Das Band erbt jetzt die Sektionsfarbe (background-color: inherit), statt eine zweite Konstante zu führen. Der Streifen ist damit weg und kann nicht wieder auseinanderdriften.

Verifikation (ausgeführt)

Übergangsstrecke 1.400 px, Deckkraft steigt gleichmäßig (21 Messpunkte). Alle drei Karten: Feld 363 × 272, geladene Auflösung 400 × 300, srcset vorhanden. Band und Sektion beide rgb(2, 3, 54).

Gate	Ergebnis
`balance`	PASS 10,1 %
`overflow`	PASS 0 px / 0 px
`reduced_motion`	PASS 0,09 % / 0,03 %

Refs #144

🤖 Generated with Claude Code

Drei Befunde aus der Sichtprüfung. ## 1. Der Goldader-Übergang war ein Schnitt, kein Übergang Die Überblendung hing an `start: 'top top'` / `end: 'bottom bottom'`. Bei einer 1.257 px hohen Sektion im 900-px-Fenster sind das **357 px Scrollweg** — nach einem Drittel der Sektion war der Wechsel vorbei, danach passierte 900 px lang nichts. Jetzt `start: 'top 80%'` bis `end: 'bottom 30%'`, also der ganze sichtbare Durchgang. Gemessen läuft der Wechsel über **rund 1.400 px** und steigt gleichmäßig von 0 auf 1. `power1.inOut` lässt die Mitte, in der beide Bilder halb durchscheinen, schneller passieren als die Enden. ## 2. Produktbilder: Teilausschnitt und Unschärfe Zwei Ursachen, beide an der Wurzel behoben. **Beschnitten:** `products.scss` deklariert `aspect-ratio: 4/3`, aber das `height`-Attribut des `<img>` überstimmt es — eine Folge des Bildmaß-Fixes aus #139, der jetzt die echten Transform-Maße ausgibt. Das Feld war dadurch 363 × 166 statt 363 × 272, und `object-fit: cover` schnitt oben und unten weg. Bei der Konferenzaufnahme fehlten die halben Teilnehmerkacheln. `height: auto` lässt `aspect-ratio` wieder greifen. Die Konferenzaufnahme liegt zusätzlich selbst im 4:3 vor (1200 × 900, mittig aus 2880 × 1800), damit `cover` nichts Wesentliches beschneidet — alle vier Gesichter, Namensschilder, Bedienleiste und Aufnahmekante bleiben drin. **Unscharf:** Angefordert wurden 266 px für ein 363 px breites Feld, auf Netzhaut-Anzeigen also gut vierfach hochskaliert. Jetzt 400 × 300, das erzeugt Kandidaten bis 800 px. Nebenbefund: Die Zuschnitte im Ordner `produkte/` entstanden nicht, weil der Ordner mir gehörte und der Webserver dort nicht schreiben durfte. Rechte an den übrigen Bildordner-Bestand angeglichen — das ist ein lokaler Zustand, keine Repo-Änderung. ## 3. Dunklerer Streifen hinter dem Porträt im Schluss-Banner Das Band, das die Fläche nach oben verlängert, damit der Überhang des Porträts Grund unter sich hat, trug mit `$blueDarkColor` (#141933) einen **anderen Ton** als die Sektion (#020336). Die Naht lag genau auf Kinnhöhe. Das Band erbt jetzt die Sektionsfarbe (`background-color: inherit`), statt eine zweite Konstante zu führen. Der Streifen ist damit weg und kann nicht wieder auseinanderdriften. ## Verifikation (ausgeführt) Übergangsstrecke 1.400 px, Deckkraft steigt gleichmäßig (21 Messpunkte). Alle drei Karten: Feld 363 × 272, geladene Auflösung 400 × 300, srcset vorhanden. Band und Sektion beide `rgb(2, 3, 54)`. | Gate | Ergebnis | |---|---| | `balance` | PASS 10,1 % | | `overflow` | PASS 0 px / 0 px | | `reduced_motion` | PASS 0,09 % / 0,03 % | Refs #144 🤖 Generated with [Claude Code](https://claude.com/claude-code)

Phil added 1 commit

2026-09-10 15:02:49 +00:00

fix(startseite): Uebergang strecken, Produktbilder schaerfen, Streifen entfernen 1a6a0d7ae6

Goldader: die Ueberblendung lief ueber 357 px zwischen 'top top' und
'bottom bottom' und war nach einem Drittel der Sektion vorbei, danach
passierte 900 px lang nichts -- das las sich als Schnitt. Jetzt laeuft sie
ueber den ganzen sichtbaren Durchgang, gemessen rund 1.400 px.

Produktkarten: die SCSS deklariert aspect-ratio 4/3, aber das
height-Attribut des <img> ueberstimmt es. Das Feld war dadurch 363x166
statt 363x272 und object-fit:cover schnitt oben und unten weg -- bei der
Konferenzaufnahme fehlten die halben Teilnehmerkacheln. height:auto laesst
aspect-ratio wieder greifen. Die Aufnahme liegt jetzt selbst im 4:3 vor,
damit cover nichts Wesentliches beschneidet.

Angefordert wurden 266 px fuer ein 363 px breites Feld, auf Netzhaut-
Anzeigen also vierfach hochskaliert. 400 px erzeugt Kandidaten bis 800 px.

Schluss-Banner: das Band hinter dem Portraet trug mit $blueDarkColor
(#141933) einen anderen Ton als die Sektion (#020336). Die Naht lag auf
Kinnhoehe und las sich als dunklerer Streifen. Das Band erbt jetzt die
Sektionsfarbe statt eine zweite Konstante zu fuehren.

Refs #144

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Phil merged commit 9fe2e63aae into main

2026-09-10 15:02:55 +00:00

Phil deleted branch fix/goldader-uebergang-strecken

2026-09-10 15:02:55 +00:00

Phil referenced this pull request from a commit

2026-09-10 15:02:56 +00:00

Merge pull request 'Uebergang strecken, Produktbilder schaerfen, Streifen im Schluss entfernen' (#147) from fix/goldader-uebergang-strecken into main