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

index.html

@@ -321,7 +321,7 @@ document.addEventListener("DOMContentLoaded", () => {
       .map(
         (p) => `
       <div class="profile-card">
-        <div class="avatar">${p.photo ? `<img src="${p.photo}" alt="${p.name}">` : p.name.slice(0, 2).toUpperCase()}</div>
+        <div class="avatar">${(p.avatar || p.photo) ? `<img src="${p.avatar || p.photo}" alt="${p.name}" loading="lazy">` : `<span class="avatar-initial">${p.name.charAt(0).toUpperCase()}</span>`}</div>
         <h3>${p.name}</h3>
         <div class="role">${p.role}</div>
       </div>`