Husky-Bild auf streamer.html an Texthöhe angepasst statt fixem Mini-Deckel

Vorheriger max-height-Deckel (460px) fürs sehr hochkantige
streamer-mascot.jpg (900x2812) war zu knapp und ließ eine sichtbare
Lücke neben dem längeren Text ("die größe vom bild vom husky soll dem
text rechts nebendran angepasst werden"). Deckel auf 720px erhöht
(orientiert an der typischen Texthöhe in diesem Abschnitt), Grid-Stretch-
Ansatz ausprobiert und wegen Rückkopplung mit dem extremen
Seitenverhältnis verworfen (siehe Kommentare in main.css/streamer.html).

Cache-Busting-Version auf 20260821b erhöht (Cloudflare cached CSS/JS
sonst bis zu 4h am Edge).

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

assets/css/main.css

@@ -2363,9 +2363,25 @@ footer.site-footer {
 /* Sehr hohe Hochkant-Bilder (z.B. streamer-mascot.jpg mit 900x2812 px) würden
    mit aspect-ratio:auto + height:auto in voller natürlicher Höhe rendern und die
    danebenstehende Textspalte komplett erschlagen (Nutzer-Report 20.08.2026:
-   "der soll bissl kleiner sein und nicht so riesig"). Diese Klasse deckelt die
-   Höhe auf ein normales Maß; width:fit-content lässt den Rahmen dabei eng am
-   Bild sitzen, statt breite gestreifte Hintergrund-Balken danebenzulassen.
+   "der soll bissl kleiner sein und nicht so riesig"). Ein zu knapper max-height-
+   Deckel (erster Versuch: 460px) machte es dann aber zu klein und ließ eine
+   sichtbare Lücke unter dem Bild, weil die Textspalte daneben normalerweise
+   deutlich mehr Platz braucht (Nutzer-Report 21.08.2026: "die größe vom bild
+   vom husky soll dem text rechts nebendran angepasst werden").
+   Ausprobiert und wieder verworfen: die Höhe per CSS Grid align-items:stretch +
+   height:100% exakt an die Textspalte zu koppeln. Funktioniert bei Grid NICHT
+   robust, weil ein 'auto' sizing Track seine Höhe am MAX-CONTENT-Beitrag beider
+   Felder ausrichtet -- bei einem derart extremen Hochkantbild (Seitenverhältnis
+   ~1:3.1) zieht das Bild die ganze Zeile (und damit auch die Textspalte) auf
+   seine eigene, riesige natürliche Höhe hoch, egal was man an min-height
+   probiert (min-height wirkt nur auf den Mindest-, nicht den Wachstums-Beitrag).
+   Robuster Kompromiss stattdessen: ein großzügiger fester max-height-Wert
+   (720px statt 460px), der sich an der TYPISCHEN Höhe der Textspalte in diesem
+   Abschnitt orientiert (auf normalen Desktop-Breiten ~715-850px hoch) -- das
+   Bild wirkt dadurch angemessen groß und auf Augenhöhe mit dem Text, ohne die
+   fragile/rückkoppelnde Grid-Stretch-Mechanik. width:fit-content lässt den
+   Rahmen dabei eng am Bild sitzen, statt breite gestreifte Hintergrund-Balken
+   danebenzulassen.
    WICHTIG: muss NACH ".collage-photo img" stehen — beide Regeln haben dieselbe
    Spezifität (eine Klasse + ein Element), die spätere gewinnt. Stünde dieser
    Block davor, würde width:100%/height:100% oben die Deckelung wieder aufheben. */
@@ -2378,11 +2394,17 @@ footer.site-footer {
 .collage-photo-kompakt img {
   width: auto;
   height: auto;
-  max-height: 460px;
+  max-height: 720px;
   max-width: 100%;
   display: block;
   object-fit: contain;
 }
+@media (max-width: 780px) {
+  /* Auf Mobilgeräten stehen die Grid-Spalten untereinander -- dort ist die
+     Textspalte durch die volle Breite viel kürzer, ein 720px hohes Bild wäre
+     unangemessen groß für einen schmalen Handy-Screen. Deckel daher kleiner. */
+  .collage-photo-kompakt img { max-height: 420px; }
+}
 /* Cineastischer "Poster-Grade" für JEDES Präsentationsfoto auf der Seite:
    zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (oben-links /
    unten-rechts, wie ein Studio-Rimlight — nutzt dieselbe --frame-Variable