Person-Card: geschlechtsneutraler Initialen-Avatar als Fallback (statt männlichem Foto-Platzhalter), platzhalter.jpg entfernt

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/person-card.php

@@ -5,11 +5,16 @@ declare(strict_types=1);
 /**
  * Visitenkarte für eine Person. Props:
  *   $person array{department, name, phone?, email?, image?}
- * Ohne image greift der Vereins-Platzhalter (Silhouette im TSV-Trikot).
+ * Ohne image rendert die Karte einen geschlechtsneutralen Initialen-Avatar
+ * (Coolvetica-Initialen + Logo-Wasserzeichen) — keinen Foto-Platzhalter.
  * Kontakt-Link: phone → tel:, sonst email → mailto:.
  */
 $image = $person['image'] ?? null;
-$src = $image ?: 'img/persons/platzhalter.jpg';
+
+$initials = implode('', array_map(
+    static fn (string $word): string => mb_substr($word, 0, 1),
+    array_slice(preg_split('/\s+/', trim($person['name'])) ?: [], 0, 2)
+));
 
 if (!empty($person['phone'])) {
     $contactHref = 'tel:' . preg_replace('/[^+\d]/', '', $person['phone']);
@@ -25,9 +30,15 @@ if (!empty($person['phone'])) {
 ?>
                     <article class="person-card">
                         <div class="person-card__media">
-                            <img src="<?= e(asset($src)) ?>"
+<?php if ($image): ?>
-                                alt="<?= $image ? e($person['name']) : '' ?>"
+                            <img src="<?= e(asset($image)) ?>"
+                                alt="<?= e($person['name']) ?>"
                                 width="480" height="600" loading="lazy" decoding="async">
+<?php else: ?>
+                            <div class="person-card__initials" aria-hidden="true">
+                                <span><?= e($initials) ?></span>
+                            </div>
+<?php endif; ?>
                         </div>
                         <div class="person-card__body">
                             <h3 class="person-card__department"><?= e($person['department']) ?></h3>

public/assets/css/components.css

@@ -319,6 +319,34 @@
     object-fit: cover;
 }
 
+/* Initialen-Avatar: geschlechtsneutraler Fallback ohne Foto */
+.person-card__initials {
+    position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 4 / 5;
+    background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 0.07), transparent 65%), var(--clr-bg-deep);
+    overflow: hidden;
+}
+
+.person-card__initials span {
+    font-family: var(--ff-heading);
+    font-size: var(--fs-800);
+    letter-spacing: 0.06em;
+    color: var(--clr-text-muted);
+}
+
+.person-card__initials::after {
+    /* dezente rote Akzentlinie unten, statt Logo-Wasserzeichen */
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, rgb(var(--clr-accent-rgb) / 0.6), transparent);
+}
+
 .person-card__body {
     display: grid;
     gap: 0.2rem;