Beraterbilder hinzugefügt, Styling angepasst

src/features/berater/berater-entry.js

@@ -19,6 +19,14 @@ if (container) {
     } else {
         container.innerHTML = berater.map((person) => `
             <article class="package-card advisor-card">
+                <div class="advisor-gallery" role="group" aria-label="Bilder von ${escapeHtml(person.name)}">
+                    <div class="advisor-gallery__frame">
+                        <img class="advisor-gallery__image" src="${escapeHtml(person.bilder?.[0]?.quelle || '')}" alt="${escapeHtml(person.name)} – ${escapeHtml(person.bilder?.[0]?.typ || 'Porträt')}" loading="lazy" />
+                    </div>
+                    <div class="advisor-gallery__controls" aria-label="Bild auswählen">
+                        ${(person.bilder || []).map((bild, index) => `<button class="advisor-gallery__button" type="button" data-gallery-index="${index}" aria-pressed="${index === 0}" aria-label="${escapeHtml(bild.typ)} von ${escapeHtml(person.name)}">${escapeHtml(bild.typ)}</button>`).join('')}
+                    </div>
+                </div>
                 <h3 class="package-title">${escapeHtml(person.name)}</h3>
                 <p class="package-type advisor-role">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
                 <div class="package-details-box">
@@ -42,6 +50,23 @@ if (container) {
 }
 
 document.addEventListener("click", async (event) => {
+    const galleryButton = event.target.closest("button[data-gallery-index]");
+    if (galleryButton) {
+        const gallery = galleryButton.closest(".advisor-gallery");
+        const card = galleryButton.closest(".advisor-card");
+        const advisor = berater.find((person) => card?.querySelector("button[data-berater-id]")?.dataset.beraterId === person.id);
+        const image = gallery?.querySelector(".advisor-gallery__image");
+        const selected = advisor?.bilder?.[Number(galleryButton.dataset.galleryIndex)];
+        if (image && selected) {
+            image.src = selected.quelle;
+            image.alt = `${advisor.name} – ${selected.typ}`;
+            gallery.querySelectorAll("[data-gallery-index]").forEach((button) => {
+                button.setAttribute("aria-pressed", String(button === galleryButton));
+            });
+        }
+        return;
+    }
+
     const button = event.target.closest("button[data-berater-id]");
     if (!button) return;
 

src/features/berater/berater.css

@@ -127,3 +127,55 @@
     border-radius: 1.4rem;
     background: #ffffff0b;
 }
+
+.advisor-gallery {
+    margin-bottom: 1.5rem;
+}
+
+.advisor-gallery__frame {
+    padding: 0.7rem;
+    border: 1px dashed #f8fafc38;
+    border-radius: 1.5rem;
+    background: #ffffff05;
+}
+
+.advisor-gallery__image {
+    display: block;
+    width: 100%;
+    height: clamp(240px, 34vw, 390px);
+    border-radius: 1.1rem;
+    background: #071720;
+    object-fit: cover;
+    object-position: center;
+}
+
+.advisor-gallery__controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    margin-top: 0.85rem;
+}
+
+.advisor-gallery__button {
+    min-height: 2.5rem;
+    padding: 0.45rem 0.9rem;
+    border: 1px solid #f8fafc1f;
+    border-radius: 999px;
+    color: #cbd5e1;
+    background: #ffffff06;
+    font: inherit;
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+.advisor-gallery__button:hover,
+.advisor-gallery__button[aria-pressed="true"] {
+    border-color: #53d5cd;
+    color: #75e2dc;
+    background: #53d5cd14;
+}
+
+.advisor-gallery__button:focus-visible {
+    outline: 3px solid #53d5cd;
+    outline-offset: 3px;
+}

src/shared/berater-daten.json

@@ -19,7 +19,17 @@
         "bildquelle": "",
         "vorname": "Relindis",
         "nachname": "Agethen",
-        "spitzname": "Lilli"
+        "spitzname": "Lilli",
+        "bilder": [
+            {
+                "quelle": "/images/Lilli1.jpeg",
+                "typ": "Porträt"
+            },
+            {
+                "quelle": "/images/Lilli2.jpeg",
+                "typ": "Aktionsbild"
+            }
+        ]
     },
     {
         "id": "maren-hoffmann",
@@ -39,6 +49,16 @@
         "bildquelle": "",
         "vorname": "Maren",
         "nachname": "Hoffmann",
-        "spitzname": ""
+        "spitzname": "",
+        "bilder": [
+            {
+                "quelle": "/images/Maren1.jpeg",
+                "typ": "Porträt"
+            },
+            {
+                "quelle": "/images/Maren2.jpeg",
+                "typ": "Aktionsbild"
+            }
+        ]
     }
 ]