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]>

team-modis.html

@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a,b) => a.rank - b.rank);
   grid.innerHTML = rest.map((m) => `
     <div class="profile-card">
-      <div class="avatar">${m.photo ? `<img src="${m.photo}" alt="${m.name}">` : m.name.slice(0,2).toUpperCase()}</div>
+      <div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
       <span class="badge${m.rank === 1 ? " rank-1" : ""}" style="margin-bottom:.5rem;">Stufe ${m.rank}</span>
       <h3>${m.name}</h3>
       <div class="role">${m.role}</div>