dynamisch Infos in json-Datei bearbeiten

css/style.css

@@ -1,3 +1,4 @@
+/* Globale Design-Variablen */
 :root {
     --bg-dark-1: #0d0d1a;
     --bg-dark-2: #1a1a2e;
@@ -7,7 +8,6 @@
     --text-lightgray: #F8FAFC;
     --text-muted: #94A3B8;
 
-    /* Beide Schrift-Variablen nutzen jetzt Sans-Serif (Inter) */
     --font-display: 'Inter', system-ui, sans-serif;
     --font-body: 'Inter', system-ui, sans-serif;
 }
@@ -59,7 +59,6 @@ body {
     display: block;
 }
 
-/* Name nutzt jetzt Sans-Serif */
 .berater-name {
     margin: 0 0 8px 0;
     font-family: var(--font-display);
@@ -98,3 +97,41 @@ body {
     line-height: 1.6;
     color: var(--text-muted);
 }
+
+/* Styling für dynamische Listen (Zertifikate) */
+.berater-liste {
+    margin: 8px 0 0 0;
+    padding-left: 20px;
+    color: var(--text-muted);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.berater-liste li {
+    margin-bottom: 4px;
+}
+
+/* Styling für dynamische Links (Buttons) */
+.berater-links {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.berater-link-btn {
+    display: inline-block;
+    background-color: var(--accent-teal);
+    color: var(--bg-dark-1);
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+
+.berater-link-btn:hover {
+    background-color: #0d9668;
+    color: #ffffff;
+}

js/berater.js

@@ -1,20 +1,57 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // Die neue ID 'berater-container' auswählen
     const container = document.getElementById('berater-container');
 
     fetch('json/berater.json')
         .then(response => {
-            if (!response.ok) {
+            if (!response.ok) throw new Error('Fehler beim Laden der JSON');
-                throw new Error('Fehler beim Laden der Datei: json/berater.json');
-            }
             return response.json();
         })
         .then(beraterDaten => {
-            // Variablen von 'advisor' zu 'berater' geändert
             beraterDaten.forEach(berater => {
                 const card = document.createElement('div');
-                card.className = 'berater-card'; // Neue Klasse
+                card.className = 'berater-card';
 
+                // 1. Bekannte Listen und Zusätze verarbeiten
+                let zertifikateHtml = '';
+                if (berater.zertifikate && berater.zertifikate.length > 0) {
+                    zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
+                    berater.zertifikate.forEach(zert => {
+                        zertifikateHtml += `<li>${zert}</li>`;
+                    });
+                    zertifikateHtml += `</ul>`;
+                }
+
+                let linksHtml = '';
+                if (berater.links && berater.links.length > 0) {
+                    linksHtml = `<div class="berater-links">`;
+                    berater.links.forEach(link => {
+                        linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
+                    });
+                    linksHtml += `</div>`;
+                }
+
+                let zusatzHtml = '';
+                if (berater.zusatzInfo) {
+                    zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
+                }
+
+                // 2. NEU: Alle eigenen/unbekannten Felder automatisch generieren
+                // Wir definieren zuerst, welche Felder Standard sind und ignoriert werden sollen
+                const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
+                let eigeneFelderHtml = '';
+
+                // Wir durchlaufen jeden Eintrag in der JSON für diesen Berater
+                for (const [schluessel, wert] of Object.entries(berater)) {
+                    // Wenn das Feld kein Standardfeld ist, bauen wir daraus Überschrift + Text
+                    if (!standardFelder.includes(schluessel)) {
+                        eigeneFelderHtml += `
+                            <h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
+                            <p class="bio-text">${wert}</p>
+                        `;
+                    }
+                }
+
+                // 3. Die Karte zusammenbauen
                 card.innerHTML = `
                     <div class="berater-image-wrapper">
                         <img src="${berater.image}" alt="${berater.name} Profilbild">
@@ -25,6 +62,13 @@ document.addEventListener('DOMContentLoaded', () => {
                     <div class="berater-bio-box">
                         <h4 class="bio-title">${berater.bioTitle}</h4>
                         <p class="bio-text">${berater.bioText}</p>
+                        
+                        <!-- Hier werden deine eigenen JSON-Einträge wie "bla bla bla" platziert -->
+                        ${eigeneFelderHtml}
+                        
+                        ${zusatzHtml}
+                        ${zertifikateHtml}
+                        ${linksHtml}
                     </div>
                 `;
 
@@ -33,6 +77,6 @@ document.addEventListener('DOMContentLoaded', () => {
         })
         .catch(error => {
             console.error('Fehler:', error);
-            container.innerHTML = '<p style="color: #94A3B8;">Die Beraterprofile konnten nicht geladen werden.</p>';
+            container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
         });
 });

json/berater.json

@@ -1,18 +1,42 @@
 [
     {
         "id": 1,
-        "name": "Relindis Agethen",
+        "name": "Rolf Braun",
-        "role": "TRIATHLETIN UND BERATERIN",
+        "role": "TRIATHLET UND HEAD COACH",
-        "image": "img/relindis_agethen.png",
+        "image": "img/rolf_braun.jpg",
         "bioTitle": "Kurzbiografie",
-        "bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen."
+        "bioText": "Rolf Braun verbindet 16 Jahre Triathlon-Erfahrung mit 25 Jahren Coaching-Praxis...",
+        "zertifikate": [
+            "Zertifizierter Triathlon-Trainer",
+            "Ernährungscoach B-Lizenz"
+        ],
+        "links": [
+            {
+                "text": "Instagram Profil",
+                "url": "https://instagram.com/rolf"
+            },
+            {
+                "text": "Trainingsplan buchen",
+                "url": "https://tri-hub.de/booking"
+            }
+        ]
     },
     {
         "id": 2,
-        "name": "Relindis Agethen",
+        "name": "Werner Ahl",
-        "role": "TRIATHLETIN UND BERATERIN",
+        "role": "TRIATHLET UND COACH",
-        "image": "img/relindis_agethen.png",
+        "image": "img/werner_ahl.jpg",
         "bioTitle": "Kurzbiografie",
-        "bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen."
+        "bioText": "Werner Ahl ist seit 42 Jahren im Triathlon zuhause und hat seitdem jedes Jahr...",
+        "bla bla bla": "ba ba ba"
+    },
+    {
+        "id": 2,
+        "name": "Werner Ahl",
+        "role": "TRIATHLET UND COACH",
+        "image": "img/werner_ahl.jpg",
+        "bioTitle": "Kurzbiografie",
+        "bioText": "Werner Ahl ist seit 42 Jahren im Triathlon zuhause und hat seitdem jedes Jahr...",
+        "Zertifikate": "sddfdsaf "
     }
 ]