diff --git a/app/components/person-card.php b/app/components/person-card.php
new file mode 100644
index 0000000..b7e4014
--- /dev/null
+++ b/app/components/person-card.php
@@ -0,0 +1,41 @@
+
+
+
+
+
= e($person['department']) ?>
+
= e($person['name']) ?>
+
+
+ = icon($contactIcon) ?>= e($contactLabel) ?>
+
+
+
+
diff --git a/app/components/person-grid.php b/app/components/person-grid.php
new file mode 100644
index 0000000..b053fe7
--- /dev/null
+++ b/app/components/person-grid.php
@@ -0,0 +1,26 @@
+
+
+
+
= e($data['title']) ?>
+
+
= e($data['intro']) ?>
+
+
+
+ -
+ $person]); ?>
+
+
+
+
+
diff --git a/data/ansprechpartner.json b/data/ansprechpartner.json
new file mode 100644
index 0000000..c8745a9
--- /dev/null
+++ b/data/ansprechpartner.json
@@ -0,0 +1,36 @@
+{
+ "title": "Ansprechpartner",
+ "intro": "Du hast Fragen zu einer Abteilung? Unsere Ansprechpartner helfen dir direkt weiter.",
+ "persons": [
+ {
+ "department": "Herrenfußball",
+ "name": "Benedikt Höfner",
+ "phone": "+49 160 97516404",
+ "image": "img/persons/benedikt-hoefner.jpg"
+ },
+ {
+ "department": "Damenfußball",
+ "name": "Sam Kern",
+ "phone": "+49 176 91371064",
+ "image": "img/persons/sam-kern.jpg"
+ },
+ {
+ "department": "Jugendfußball",
+ "name": "Fabian Früh",
+ "phone": "+49 160 97516797",
+ "image": "img/persons/fabian-frueh.jpg"
+ },
+ {
+ "department": "Jugendfußball",
+ "name": "Kerstin Tauber",
+ "phone": "+49 176 38957526",
+ "image": null
+ },
+ {
+ "department": "Turnen",
+ "name": "Maxi Roßberg",
+ "email": "turnabteilung.tsv08kulmbach@gmail.com",
+ "image": null
+ }
+ ]
+}
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index 12ee397..63fd001 100644
--- a/public/assets/css/components.css
+++ b/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 {
diff --git a/public/assets/icons/telephone.svg b/public/assets/icons/telephone.svg
new file mode 100644
index 0000000..c1853fe
--- /dev/null
+++ b/public/assets/icons/telephone.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/img/persons/benedikt-hoefner.jpg b/public/assets/img/persons/benedikt-hoefner.jpg
new file mode 100644
index 0000000..d2f6cbc
Binary files /dev/null and b/public/assets/img/persons/benedikt-hoefner.jpg differ
diff --git a/public/assets/img/persons/fabian-frueh.jpg b/public/assets/img/persons/fabian-frueh.jpg
new file mode 100644
index 0000000..e2e55f5
Binary files /dev/null and b/public/assets/img/persons/fabian-frueh.jpg differ
diff --git a/public/assets/img/persons/platzhalter.jpg b/public/assets/img/persons/platzhalter.jpg
new file mode 100644
index 0000000..bdf171f
Binary files /dev/null and b/public/assets/img/persons/platzhalter.jpg differ
diff --git a/public/assets/img/persons/sam-kern.jpg b/public/assets/img/persons/sam-kern.jpg
new file mode 100644
index 0000000..0179d3e
Binary files /dev/null and b/public/assets/img/persons/sam-kern.jpg differ