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-scouts.html

@@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", () => {
   if (!grid || !window.SCOUTS) return;
   grid.innerHTML = window.SCOUTS.map((s) => `
     <div class="profile-card">
-      <div class="avatar">${s.photo ? `<img src="${s.photo}" alt="${s.name}">` : s.name.slice(0,2).toUpperCase()}</div>
+      <div class="avatar">${(s.avatar || s.photo) ? `<img src="${s.avatar || s.photo}" alt="${s.name}" loading="lazy">` : `<span class="avatar-initial">${s.name.charAt(0).toUpperCase()}</span>`}</div>
       <h3>${s.name}</h3>
       <div class="role">${s.role}</div>
       ${s.quote ? `<p class="quote">„${s.quote}"</p>` : `<p class="small muted">Zitat folgt</p>`}