Titel und Text für Berater eingefügt

2026-09-28 20:43:13 +02:00 · 2026-09-28 20:43:13 +02:00 · 28028e76df
parent 4b3b09b70b
commit 28028e76df
4 changed files with 466 additions and 376 deletions
--- a/css/berater.css
+++ b/css/berater.css
@ -1,9 +1,12 @@
 /* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */
-/* Globale Design-Variablen */
+/* ==========================================================
+   Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub
+   ========================================================== */
 .berater-section {
    --bg-dark-1: #0d0d1a;
    --bg-dark-2: #1a1a2e;
-    --accent-teal: #00B3C2;
+    --accent-teal: #10B981;
+    /* Farbe angepasst, um mit dem Pakete-Bereich übereinzustimmen */

    --text-white: #ffffff;
    --text-lightgray: #F8FAFC;
@ -15,18 +18,43 @@

 .berater-section {
    margin: 0;
-    padding: 0;
+    /* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */
+    padding: 5rem 1.5rem;
    font-family: var(--font-body);
    background-color: var(--bg-dark-1);
    color: var(--text-white);
-}
-
-.berater-section {
-    padding: 80px 20px;
    display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* Gesamten Inhalt vertikal zentrieren */
 }

+/* =========================================
+   Styling für Header (Titel und Untertitel) passend zu den Paketen
+   ========================================= */
+.berater-section .section-header {
+    text-align: center;
+    max-width: 42rem;
+    margin: 0 auto 3rem;
+}
+
+.berater-section .section-title {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.8rem, 3vw, 2.4rem);
+    color: var(--text-white);
+    margin: 0 0 0.75rem;
+}
+
+.berater-section .section-subtitle {
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* =========================================
+   Styling für den Container und die Berater-Karten
+   ========================================= */
 .berater-section .berater-container {
    display: flex;
    gap: 30px;
@ -38,7 +66,10 @@

 .berater-section .berater-card {
    background-color: var(--bg-dark-2);
-    border-radius: 24px;
+    /* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */
+    border: 1px solid rgba(248, 250, 252, 0.08);
+    /* Border-Radius angepasst, passend zu den Paketen */
+    border-radius: 14px;
    padding: 24px;
    width: min(380px, 100%);
    box-sizing: border-box;
@ -48,7 +79,7 @@

 .berater-section .berater-image-wrapper {
    background-color: var(--bg-dark-1);
-    border-radius: 20px;
+    border-radius: 10px;
    padding: 10px;
    margin-bottom: 24px;
 }
@ -57,15 +88,16 @@
    width: 100%;
    height: 350px;
    object-fit: cover;
-    border-radius: 16px;
+    border-radius: 8px;
    display: block;
 }

 .berater-section .berater-name {
    margin: 0 0 8px 0;
    font-family: var(--font-display);
-    font-size: 32px;
-    font-weight: 700;
+    font-size: 1.4rem;
+    /* Schriftgröße des Namens harmonisiert */
+    font-weight: 600;
    color: var(--text-white);
 }

@ -80,9 +112,11 @@
 }

 .berater-section .berater-bio-box {
-    background-color: var(--bg-dark-1);
+    /* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */
+    background-color: transparent;
    border-radius: 16px;
-    padding: 24px;
+    /* Überschüssiges Padding entfernt */
+    padding: 0;
    flex-grow: 1;
 }

@ -100,20 +134,40 @@
    color: var(--text-muted);
 }

-/* Styling für dynamische Listen (Zertifikate) */
+/* =========================================
+   Styling für dynamische Listen (z. B. Zertifikate)
+   ========================================= */
 .berater-section .berater-liste {
    margin: 8px 0 0 0;
-    padding-left: 20px;
+    padding-left: 1.4rem;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
+    list-style: none;
+    /* Standard-Listenpunkte entfernt für benutzerdefiniertes Styling */
 }

 .berater-section .berater-liste li {
-    margin-bottom: 4px;
+    position: relative;
+    margin-bottom: 0.7rem;
+    color: var(--text-lightgray);
 }

-/* Styling für dynamische Links (Buttons) */
+/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */
+.berater-section .berater-liste li::before {
+    content: "";
+    position: absolute;
+    left: -1.4rem;
+    top: 0.4em;
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    background: var(--accent-teal);
+}
+
+/* =========================================
+   Styling für dynamische Links (Buttons)
+   ========================================= */
 .berater-section .berater-links {
    margin-top: 20px;
    display: flex;
@ -123,17 +177,20 @@

 .berater-section .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-family: var(--font-body);
    font-weight: 600;
-    transition: background-color 0.3s ease;
+    font-size: 0.95rem;
+    color: var(--bg-dark-1);
+    background: var(--accent-teal);
+    border: none;
+    border-radius: 8px;
+    padding: 0.85rem 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: filter 0.15s ease;
 }

-.berater-section .berater-link-btn:hover {
-    background-color: #0d9668;
-    color: #ffffff;
+.berater-section .berater-link-btn:hover,
+.berater-section .berater-link-btn:focus-visible {
+    filter: brightness(1.1);
 }
--- a/index.html
+++ b/index.html
@ -7,7 +7,9 @@
    <title>Ernährungsberatung für Triathleten | tri-hub</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap"
+        rel="stylesheet">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/produktuebersicht.css">
    <link rel="stylesheet" href="css/leistungen.css">
@ -31,10 +33,9 @@

            <div class="produktuebersicht__main">
                <div class="hero">
-                        <img class="hero__image"
-                            src="images/hero-triathlon.webp"
-                            alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
-                            width="1920" height="1080" fetchpriority="high">
+                    <img class="hero__image" src="images/hero-triathlon.webp"
+                        alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
+                        height="1080" fetchpriority="high">

                    <div class="container hero__inner">
                        <div class="hero__content">
@ -95,6 +96,10 @@

        <!-- Ahmad: Berater und Qualifikationen -->
        <section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
+            <div class="section-header">
+                <h2 class="section-title"></h2>
+                <p class="section-subtitle"></p>
+            </div>
            <!-- Container wird durch berater.js befüllt -->
            <div class="berater-container" id="berater-container"></div>
        </section>
@ -179,7 +184,8 @@
                <div class="container" id="kontakt">
                    <div class="cta-band reveal">
                        <h2>Bereit für deinen nächsten Schritt?</h2>
-                            <p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir
+                        <p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
+                            dir
                            passt.</p>
                        <a class="btn btn-primary"
                            href="mailto:info@trihub.de?subject=Ernaehrungsberatung%20-%20Kennenlerngespraech">Jetzt
--- a/js/berater.js
+++ b/js/berater.js
@ -1,17 +1,42 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
+    // Container für die Berater-Karten auswählen
    const container = document.getElementById('berater-container');

-    fetch('json/berater.json')
-        .then(response => {
-            if (!response.ok) throw new Error('Fehler beim Laden der JSON');
-            return response.json();
-        })
-        .then(beraterDaten => {
-            beraterDaten.forEach(berater => {
+    // Titel- und Untertitel-Elemente aus dem HTML abrufen
+    const titleEl = document.querySelector('.section-title');
+    const subtitleEl = document.querySelector('.section-subtitle');
+
+    let daten;
+    try {
+        // Daten aus der JSON-Datei asynchron laden
+        const response = await fetch('json/berater.json');
+        if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`);
+        daten = await response.json();
+    } catch (error) {
+        console.error('Fehler beim Laden der JSON-Datei:', error);
+        // Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt
+        if (container) {
+            container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
+        }
+        return;
+    }
+
+    // 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen
+    if (titleEl && daten.intro) {
+        titleEl.textContent = daten.intro.titel;
+    }
+    if (subtitleEl && daten.intro) {
+        subtitleEl.textContent = daten.intro.text;
+    }
+
+    // 2. Berater-Karten verarbeiten und erstellen
+    // Wir iterieren über das Array "berater" innerhalb der JSON-Daten
+    daten.berater.forEach(berater => {
+        // Ein neues div-Element für die Karte erstellen
        const card = document.createElement('div');
        card.className = 'berater-card';

-                // 1. Bekannte Listen und Zusätze verarbeiten
+        // Zertifikate verarbeiten (falls vorhanden)
        let zertifikateHtml = '';
        if (berater.zertifikate && berater.zertifikate.length > 0) {
            zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
@ -21,6 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
            zertifikateHtml += `</ul>`;
        }

+        // Links verarbeiten (falls vorhanden)
        let linksHtml = '';
        if (berater.links && berater.links.length > 0) {
            linksHtml = `<div class="berater-links">`;
@ -30,19 +56,20 @@ document.addEventListener('DOMContentLoaded', () => {
            linksHtml += `</div>`;
        }

+        // Zusatzinformationen verarbeiten (falls vorhanden)
        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
+        // Eigene/unbekannte dynamische Felder verarbeiten
+        // Zuerst definieren wir, 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
+        // Wir durchlaufen jeden Eintrag in der JSON für diesen spezifischen Berater
        for (const [schluessel, wert] of Object.entries(berater)) {
-                    // Wenn das Feld kein Standardfeld ist, bauen wir daraus Überschrift + Text
+            // Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text
            if (!standardFelder.includes(schluessel)) {
                eigeneFelderHtml += `
                    <h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
@ -51,7 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
            }
        }

-                // 3. Die Karte zusammenbauen
+        // Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen
        card.innerHTML = `
            <div class="berater-image-wrapper">
                <img src="${berater.image}" alt="${berater.name} Profilbild">
@ -63,20 +90,14 @@ document.addEventListener('DOMContentLoaded', () => {
                <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>
        `;

+        // Die fertige Karte zum Container auf der Seite hinzufügen
        container.appendChild(card);
    });
-        })
-        .catch(error => {
-            console.error('Fehler:', error);
-            container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
-        });
 });
--- a/json/berater.json
+++ b/json/berater.json
@ -1,4 +1,9 @@
-[
+{
+    "intro": {
+        "titel": "Deine Ernährungsberater und Coaches",
+        "text": "Erfahrene Triathleten und zertifizierte Coaches, die dich auf dem Weg zu deinen Zielen begleiten und dir helfen, deine Leistung zu optimieren."
+    },
+    "berater": [
        {
            "id": 1,
            "name": "Relindis Agethen ",
@ -44,3 +49,4 @@
            ]
        }
    ]
+}