Team-Avatare: echte Gesichts-Ausschnitte statt gequetschter Karten

Die runden Avatare zeigten bisher die grossen 1200x1200-Team-Karten mit
Rahmen, Goldschrift, Husky und Hase - bei 96 Pixeln nur Matsch.

- Neue Dateien avatar-*.jpg: sauber zugeschnittene Gesichts-Portraits
  (400x400) aus den Karten, jedes Gesicht mittig und erkennbar
- data-modis.js bekommt ein eigenes Feld "avatar"; die grosse Karte
  bleibt unter "photo" fuer grosse Darstellungen erhalten
- Avatar groesser (108px), mit Akzent-Ring, Glanz und Hover-Anhebung
- Ohne Foto jetzt nur noch EIN Buchstabe statt zwei (kein "FU" mehr)
- Profilkarten mit Lichtschein hinter dem Avatar und Hover-Effekt

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

creator.html

@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const items = filter === "alle" ? list : list.filter((c) => c.category === filter);
     grid.innerHTML = items.map((c) => `
       <div class="profile-card">
-        <div class="avatar">${c.photo ? `<img src="${c.photo}" alt="${c.name}">` : c.name.slice(0,2).toUpperCase()}</div>
+        <div class="avatar">${(c.avatar || c.photo) ? `<img src="${c.avatar || c.photo}" alt="${c.name}" loading="lazy">` : `<span class="avatar-initial">${c.name.charAt(0).toUpperCase()}</span>`}</div>
         <h3>${c.name}</h3>
         <div class="role">${c.role}</div>
         ${c.quote ? `<p class="quote">„${c.quote}"</p>` : ""}