Teddy-Liste zeigt jetzt Mini-Foto + immer den echten Namen, auch bei alten Einlösungen

Auf ausdrücklichen Wunsch: statt der vagen Ersatzformulierung "Teddy aus einer früheren
Einlösung" zeigt die Liste "Diese Teddys hast du schon bekommen" jetzt fuer JEDEN Eintrag
den echten Produktnamen + eine kleine Vorschau — auch fuer Einloesungen von vor diesem
Feature, bei denen kein Name gespeichert war. Das geht zuverlaessig, weil es je Groesse
aktuell nur EIN konfiguriertes Teddy-Produkt gibt (aboEinstellungen.kleinTeddySlug/
grossTeddySlug) — es gibt also keine Mehrdeutigkeit, welcher Teddy es war.

Mini-Foto: echtes Produktfoto, sobald VanVan eins im Adminbereich hochlaedt (automatisch,
ohne Code-Aenderung) — bis dahin ein gestalteter Platzhalter statt eines kaputten Bildes,
da beide Teddy-Produkte aktuell noch kein Foto hinterlegt haben.

Dabei einen echten Datenfehler gefunden und behoben: der KLEINE Teddy trug auf Englisch
"Large Teddy" und auf Schweizerdeutsch "Grosse Teddy" (Kopierfehler vom grossen Teddy) —
war nicht nur in dieser Liste sichtbar, sondern auch auf der Produktseite selbst in allen
nicht-deutschen Sprachen. Jetzt korrekt "Small Teddy" / "Chliine Teddy" / "Petit ours en peluche".

Getestet (Browser): genau der Fall aus der Rückmeldung nachgestellt (2 alte Einlösungen ohne
Namensverlauf) — zeigt jetzt Name + Link statt "unbekannt". Gemischter Fall (echter + alter
Eintrag) korrekt sortiert. Vorhandenes Foto ersetzt den Platzhalter automatisch. Korrigierte
Produktnamen in allen 4 Sprachen bestätigt.

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

src/styles/global.css

@@ -2914,21 +2914,33 @@ a:focus-visible, button:focus-visible {
 }
 .abo-erhalten-box.is-leer { background: rgba(244, 241, 247, 0.05); border-color: rgba(244, 241, 247, 0.14); }
 .abo-erhalten-titel { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
-.abo-erhalten-liste { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
+.abo-erhalten-liste { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
 .abo-erhalten-liste:empty { display: none; }
-.abo-erhalten-eintrag {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.15rem 0.5rem;
-  padding-left: 1.4rem;
-  position: relative;
+/* Mini-Foto + Text nebeneinander statt nur einem Emoji-Aufzähler davor — man soll auf einen
+   Blick sehen, WELCHER Teddy das war, nicht nur, dass es "irgendein" Teddy war. */
+.abo-erhalten-eintrag { display: flex; align-items: center; gap: 0.7rem; }
+.abo-erhalten-foto {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  flex-shrink: 0;
+  object-fit: cover;
+  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
-.abo-erhalten-eintrag::before { content: "🧸"; position: absolute; left: 0; font-size: 0.9em; }
+/* Solange VanVan noch kein echtes Foto für den Teddy hochgeladen hat (siehe product.bilder im
+   Adminbereich): ein gestalteter Platzhalter statt eines kaputten Bild-Symbols — sobald ein
+   Foto hochgeladen wird, erscheint es hier automatisch, ohne Code-Änderung. */
+.abo-erhalten-foto-platzhalter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  background: linear-gradient(160deg, rgba(126, 200, 160, 0.35), rgba(126, 200, 160, 0.12));
+}
+.abo-erhalten-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; min-width: 0; }
 .abo-erhalten-name { font-weight: 600; }
 .abo-erhalten-datum { color: var(--c-text-muted); font-size: 0.85em; }
 .abo-erhalten-link { font-size: 0.85em; text-decoration: underline; }
-.abo-erhalten-eintrag-unbekannt { color: var(--c-text-muted); font-style: italic; }
 
 .abo-praemien-block { border-top: 1px dashed rgba(244, 241, 247, 0.14); padding-top: 0.9rem; margin-top: 0.3rem; }
 .abo-praemien-block h4 { margin: 0 0 0.4rem; }