Ansprechpartner-Sektion: person-card/person-grid-Komponenten, Daten in ansprechpartner.json, Vereins-Platzhalter statt AdobeStock, tel:/mailto korrekt

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

public/assets/css/components.css

@@ -277,6 +277,90 @@
     object-fit: contain;
 }
 
+/* === persons (Ansprechpartner-Visitenkarten) === */
+.persons > .container {
+    text-align: center;
+}
+
+.persons__intro {
+    margin-inline: auto;
+    margin-top: 1rem;
+    max-width: 60ch;
+    color: var(--clr-text-muted);
+}
+
+.persons__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2.5rem;
+    text-align: left;
+}
+
+.person-card {
+    display: grid;
+    height: 100%;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+    transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.person-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-card);
+}
+
+.person-card__media img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 4 / 5;
+    object-fit: cover;
+}
+
+.person-card__body {
+    display: grid;
+    gap: 0.2rem;
+    padding: 1.1rem 1.2rem 1.2rem;
+    /* Verlauf knüpft an die dunklen Studiofotos an */
+    background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0.35) 100%);
+}
+
+.person-card__department {
+    font-size: var(--fs-650);
+    letter-spacing: 0.04em;
+}
+
+.person-card__name {
+    color: var(--clr-text-muted);
+}
+
+.person-card__contact {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    padding-block: 0.3rem;
+    color: var(--clr-text);
+    text-decoration: none;
+    font-size: var(--fs-500);
+}
+
+.person-card__contact .icon {
+    color: var(--clr-accent);
+    flex: none;
+}
+
+.person-card__contact span {
+    overflow-wrap: anywhere;
+}
+
+.person-card__contact:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.25em;
+}
+
 /* === contact form === */
 .contact__inner {
     display: grid;
@@ -462,7 +546,9 @@
 
 .ad-banner__subline {
     margin-top: 0.75rem;
-    max-width: 70ch;
+    /* Volle Breite, damit der Dank in einer Zeile steht; auf Mobil bricht er natürlich um. */
+    max-width: none;
+    text-wrap: balance;
 }
 
 .ad-banner__track {