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 {

public/assets/icons/telephone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/></svg>