Fix: VanVan-Fotos wurden wieder beschnitten (Oktopus/Schildkroete abgeschnitten)

Zwei Fotos betroffen:
1. "Ueber die Kreative"-Seite: eine alte, spezifischere CSS-Regel
   (.intro .portrait-frame.portrait img) hat lautlos die bereits einmal
   gefixte 2:3-Bildkorrektur wieder auf 1:1 zurueckgesetzt (per Computed-
   Style-Debug bestaetigt: ratio war 1/1 statt 2/3). Diese Regel stammte aus
   einem laengst ersetzten Layout (Foto+Text nebeneinander), das nirgends
   mehr benutzt wird, ausser eben ungewollt hier durch geteilte Klassennamen.
   aspect-ratio aus dieser Regel entfernt, die 2/3-Regel greift jetzt wieder.
2. Startseite "Die Kreative"-Bereich (vanvan-portrait.png, 1122x1402 ≈ 4/5):
   nutzte noch die allgemeine 1:1-Regel und schnitt das Foto ebenfalls
   quadratisch zu. Eigenes Seitenverhaeltnis (4/5) ergaenzt, width/height
   Attribute korrigiert (640x800 statt 640x640) fuer korrekte Bildproportion
   schon vor dem CSS-Laden.

Per Screenshot auf Desktop und Mobil verifiziert: beide Fotos jetzt komplett
sichtbar, inkl. Oktopus- und Schildkroeten-Plushie.

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

src/pages/ch/index.astro

@@ -87,7 +87,7 @@ const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).sli
   <section class="section">
     <div class="container grid grid-2 creator-section">
       <div class="portrait-frame creator-photo">
-        <img src="/img/vanvan-portrait.png" alt="Porträtfoto von VanVan" width="640" height="640" loading="lazy" />
+        <img src="/img/vanvan-portrait.png" alt="Porträtfoto von VanVan" width="640" height="800" loading="lazy" />
         <span class="portrait-badge">🩵 Handgemacht</span>
       </div>
       <div>

src/pages/en/index.astro

@@ -87,7 +87,7 @@ const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).sli
   <section class="section">
     <div class="container grid grid-2 creator-section">
       <div class="portrait-frame creator-photo">
-        <img src="/img/vanvan-portrait.png" alt="Portrait photo of VanVan" width="640" height="640" loading="lazy" />
+        <img src="/img/vanvan-portrait.png" alt="Portrait photo of VanVan" width="640" height="800" loading="lazy" />
         <span class="portrait-badge">🩵 Handmade</span>
       </div>
       <div>

src/pages/fr/index.astro

@@ -87,7 +87,7 @@ const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).sli
   <section class="section">
     <div class="container grid grid-2 creator-section">
       <div class="portrait-frame creator-photo">
-        <img src="/img/vanvan-portrait.png" alt="Photo de VanVan" width="640" height="640" loading="lazy" />
+        <img src="/img/vanvan-portrait.png" alt="Photo de VanVan" width="640" height="800" loading="lazy" />
         <span class="portrait-badge">🩵 Fait main</span>
       </div>
       <div>

src/pages/index.astro

@@ -87,7 +87,7 @@ const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).sli
   <section class="section">
     <div class="container grid grid-2 creator-section">
       <div class="portrait-frame creator-photo">
-        <img src="/img/vanvan-portrait.png" alt="Porträtfoto von VanVan" width="640" height="640" loading="lazy" />
+        <img src="/img/vanvan-portrait.png" alt="Porträtfoto von VanVan" width="640" height="800" loading="lazy" />
         <span class="portrait-badge">🩵 Handgemacht</span>
       </div>
       <div>

src/styles/global.css

@@ -629,6 +629,13 @@ a:focus-visible, button:focus-visible {
 
 .creator-section { align-items: center; }
 .creator-photo { max-width: 420px; margin-inline: auto; }
+/* Das echte Foto (vanvan-portrait.png, 1122×1402 ≈ 4/5) ist hochkant, nicht quadratisch — die
+   allgemeine .portrait-frame-Regel erzwingt aber ein 1:1-Seitenverhältnis, wodurch der untere
+   Teil des Fotos (der zweite Plushie im Arm) abgeschnitten wurde. Eigenes Seitenverhältnis nah am
+   Original, damit das komplette Foto sichtbar bleibt — gleiches Muster wie schon bei .portrait auf
+   der "Über die Kreative"-Seite gelöst. */
+.creator-photo .portrait-img,
+.creator-photo img { aspect-ratio: 4 / 5; }
 
 /* "Über die Kreative" / Charakter-Vorstellung (Unterkategorie-Familienseiten) */
 .intro { align-items: stretch; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@@ -659,13 +666,17 @@ a:focus-visible, button:focus-visible {
 }
 .intro .portrait-frame.portrait::before { display: none; }
 /* Das Foto selbst braucht innerhalb der neuen Karte keinen zweiten Ring mehr — die Karte rahmt
-   schon, ein zusätzlicher Rand würde nur "doppelt gerahmt" aussehen. */
+   schon, ein zusätzlicher Rand würde nur "doppelt gerahmt" aussehen.
+   WICHTIG: hier bewusst KEIN eigenes aspect-ratio mehr setzen — diese Regel ist (durch die
+   Kombination .intro + .portrait-frame + .portrait) spezifischer als die weiter unten stehende
+   ".portrait img { aspect-ratio: 2/3 }"-Korrektur und hat sie dadurch lautlos wieder auf 1:1
+   zurückgesetzt. Genau das hat den bereits einmal gefixten Bug (Oktopus-Plushie unten
+   abgeschnitten) auf der "Über die Kreative"-Seite erneut verursacht. */
 .intro .portrait-frame.portrait img,
 .intro .portrait-frame.portrait .img-placeholder {
   border: none;
   box-shadow: none;
   border-radius: var(--radius-s);
-  aspect-ratio: 1 / 1;
 }
 
 /* Wechselt innerhalb einer Tier-Familie ab: Foto links/rechts, Text jeweils gegenüber — sorgt