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

assets/css/main.css

@@ -297,39 +297,83 @@ header.site-header {
 
 /* ---------- Profil-Karten (Team/Creator) ---------- */
 .profile-card {
+  position: relative;
   background: var(--card-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   text-align: center;
-  padding: 1.6rem 1.2rem;
+  padding: 2rem 1.2rem 1.7rem;
+  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
 }
+/* dezenter Lichtschein hinter dem Avatar */
+.profile-card::before {
+  content: "";
+  position: absolute;
+  top: -30%;
+  left: 50%;
+  width: 200px;
+  height: 200px;
+  transform: translateX(-50%);
+  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
+  pointer-events: none;
+}
+.profile-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  transform: translateY(-4px);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
+}
+.profile-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
+/* Avatar-Kreis mit Akzent-Ring.
+   WICHTIG: hier kommen fertig zugeschnittene Gesichts-Ausschnitte rein
+   (assets/img/avatar-*.jpg), NICHT die großen Team-Karten — die sind bei
+   dieser Größe nur Matsch. Siehe `avatar`-Feld in assets/js/data-modis.js. */
 .avatar {
-  width: 96px;
-  height: 96px;
+  width: 108px;
+  height: 108px;
   border-radius: 50%;
-  margin: 0 auto .9rem;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  margin: 0 auto 1rem;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(140deg, var(--accent), var(--accent-2));
+  box-shadow:
+    0 0 0 2px var(--card-bg),
+    0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent),
+    0 10px 26px rgba(0, 0, 0, .45);
+  transition: box-shadow .3s ease, transform .3s ease;
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+/* Leichter Glanz oben, damit der Kreis nicht flach wirkt */
+.avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: linear-gradient(165deg, rgba(255, 255, 255, .18), transparent 55%);
+  pointer-events: none;
+}
+.avatar-initial {
   font-family: var(--font-head);
   font-weight: 800;
-  font-size: 1.6rem;
+  font-size: 2.4rem;
+  line-height: 1;
   color: var(--accent-contrast);
-  overflow: hidden;
-  position: relative;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
 }
-/* Team-Karten sind quadratische Motive mit viel Rahmen — der Avatar zoomt
-   deshalb auf den Gesichtsbereich (ca. 50% / 33% des Motivs), damit das
-   Gesicht im 96px-Kreis wirklich erkennbar bleibt. */
-.avatar img {
-  position: absolute;
-  width: 190%;
-  height: 190%;
-  left: -45%;
-  top: -13%;
-  object-fit: cover;
+.profile-card:hover .avatar {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 2px var(--card-bg),
+    0 0 0 4px var(--accent),
+    0 14px 32px rgba(0, 0, 0, .5);
 }
 .profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; }
 .profile-card .quote { font-style: italic; font-size: .9rem; }

assets/js/data-modis.js

@@ -23,6 +23,7 @@ const MODIS = [
     role: "Rechte Hand von Dogfather · Musik-Produzentin (Van-Van, Spotify)",
     rank: 1,
     photo: "assets/img/card-vanvan.jpg",
+    avatar: "assets/img/avatar-vanvan.jpg",
     quote: "", // TODO: Zitat von VanVan einholen
     social: {},
     page: "vanvan.html",
@@ -33,6 +34,7 @@ const MODIS = [
     role: "Organisiert & plant gemeinsam mit VanVan",
     rank: 2,
     photo: "assets/img/card-diene.jpg",
+    avatar: "assets/img/avatar-diene.jpg",
     quote: "",
     social: {},
     page: "",
@@ -53,6 +55,7 @@ const MODIS = [
     role: "Modi & Cutterin",
     rank: 4,
     photo: "assets/img/card-miss.jpg",
+    avatar: "assets/img/avatar-miss.jpg",
     quote: "",
     social: {},
     page: "",
@@ -63,6 +66,7 @@ const MODIS = [
     role: "Kommentare auf den Clip-Accounts · alias FlauschiRex",
     rank: 5,
     photo: "assets/img/card-marina.jpg",
+    avatar: "assets/img/avatar-marina.jpg",
     quote: "",
     social: {},
     page: "",