Design verbessert und Bugs gehoben

2026-09-29 15:15:43 +00:00 · 2026-09-29 15:15:43 +00:00 · 659e4ff9ec
parent 94bea79863
commit 659e4ff9ec
7 changed files with 181 additions and 123 deletions
--- a/berater.html
+++ b/berater.html
@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Lerne die Ernährungsberaterinnen und Ernährungsberater von Tri-Hub kennen." />
+        <title>Beraterprofil · Tri-Hub</title>
+        <link rel="stylesheet" href="/src/styles/navigation.css" />
+        <link rel="stylesheet" href="/src/styles/packages.css" />
+        <link rel="stylesheet" href="/src/features/berater/berater.css" />
+    </head>
+    <body class="packages-page advisor-page">
+        <div id="navbar-placeholder"></div>
+        <main id="main-content" class="advisor-main">
+            <section class="advisor-section" aria-labelledby="advisor-heading">
+                <div class="advisor-container">
+                    <header class="advisor-heading">
+                        <p class="advisor-eyebrow">PERSÖNLICH FÜR DICH DA</p>
+                        <h1 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h1>
+                        <p class="advisor-intro">Hinter einer guten Ernährungsstrategie stehen Menschen, die zuhören und ihre Erfahrung in deinen Alltag und dein Training einbringen.</p>
+                    </header>
+                    <div class="advisor-grid" id="advisor-profiles" aria-live="polite">
+                        <p class="advisor-loading">Beraterprofile werden geladen …</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <script type="module" src="/src/components/navigationsbar/navigation.js"></script>
+        <script type="module" src="/src/features/berater/berater-entry.js"></script>
+    </body>
+</html>
--- a/index.html
+++ b/index.html
@ -920,21 +920,6 @@
            </section>

            <!-- User Story: Rezensionen -->
-            <section class="section advisor-section" id="beraterteam" aria-labelledby="advisor-heading">
-                <div class="container">
-                    <div class="section-heading">
-                        <div>
-                            <p class="eyebrow">PERSÖNLICH FÜR DICH DA</p>
-                            <h2 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h2>
-                        </div>
-                        <p class="section-intro">Hinter einer guten Ernährungsstrategie stehen Menschen, die zuhören und ihre Erfahrung in deinen Alltag und dein Training einbringen.</p>
-                    </div>
-                    <div class="advisor-grid" id="advisor-profiles" aria-live="polite">
-                        <p class="advisor-loading">Beraterprofile werden geladen …</p>
-                    </div>
-                </div>
-            </section>
-
            <section class="section review-section" id="erfahrungen">
                <div class="container review-layout">
                    <div class="review-copy">
@ -1133,7 +1118,6 @@
            type="module"
            src="/src/components/navigationsbar/navigation.js"
        ></script>
-        <script type="module" src="/src/features/berater/berater-entry.js"></script>
        <script>
            const form = document.getElementById("reviewForm");
            const status = document.getElementById("formStatus");
--- a/src/components/navigationsbar/navigation.html
+++ b/src/components/navigationsbar/navigation.html
@ -1,7 +1,7 @@
 <header class="navbar" id="site-navbar">
    <div class="navbar__inner">
        <a
-            href="#main-content"
+            href="/index.html#main-content"
            class="navbar__brand"
            aria-label="Zum Hauptinhalt springen"
        >
@ -35,7 +35,7 @@
                    <a href="/index.html" class="navbar__link">Ernährung</a>
                </li>
                <li>
-                    <a href="/index.html" class="navbar__link">Beraterprofil</a>
+                    <a href="/berater.html" class="navbar__link">Beraterprofil</a>
                </li>
                <li>
                    <a href="/index.html" class="navbar__link">FAQ</a>
--- a/src/features/berater/berater-entry.js
+++ b/src/features/berater/berater-entry.js
@ -18,19 +18,24 @@ if (container) {
        container.innerHTML = '<p class="advisor-loading">Aktuell sind keine Beraterprofile verfügbar.</p>';
    } else {
        container.innerHTML = berater.map((person) => `
-            <article class="advisor-card">
-                <div class="advisor-card__topline"></div>
-                <h3>${escapeHtml(person.name)}</h3>
-                <p class="advisor-card__role">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
-                <div class="advisor-card__details">
-                    <h4>Kurzbiografie</h4>
-                    <p>${escapeHtml(person.biographie)}</p>
-                    <h4>Qualifikationen</h4>
-                    <ul>${(person.qualifikationen || []).map((qualification) => `<li>${escapeHtml(qualification)}</li>`).join("")}</ul>
-                    <h4>Schwerpunkte</h4>
-                    <ul>${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
+            <article class="package-card advisor-card">
+                <h3 class="package-title">${escapeHtml(person.name)}</h3>
+                <p class="package-type">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
+                <div class="package-details-box">
+                    <div class="detail-item">
+                        <h4 class="detail-title">Kurzbiografie</h4>
+                        <p class="detail-text">${escapeHtml(person.biographie)}</p>
                    </div>
-                <button class="advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
+                    <div class="detail-item">
+                        <h4 class="detail-title">Qualifikationen</h4>
+                        <ul class="detail-list">${(person.qualifikationen || []).map((qualification) => `<li>${escapeHtml(qualification)}</li>`).join("")}</ul>
+                    </div>
+                    <div class="detail-item">
+                        <h4 class="detail-title">Schwerpunkte</h4>
+                        <ul class="detail-list">${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
+                    </div>
+                </div>
+                <button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
            </article>
        `).join("");
    }
--- a/src/features/berater/berater.css
+++ b/src/features/berater/berater.css
@ -1,109 +1,118 @@
+.advisor-page {
+    color-scheme: dark;
+}
+
+.advisor-main {
+    min-height: 100vh;
+    padding-top: 96px;
+}
+
 .advisor-section {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.035));
+    width: min(1180px, calc(100% - 3rem));
+    margin: auto;
+    padding-block: 5rem;
+    overflow-wrap: anywhere;
 }

-.advisor-grid {
+.advisor-heading {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
-    gap: 20px;
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: end;
+    margin-bottom: 3rem;
 }

-.advisor-loading {
+.advisor-eyebrow {
    grid-column: 1 / -1;
-    color: var(--muted);
-}
-
-.advisor-card {
-    display: flex;
-    flex-direction: column;
-    padding: 30px;
-    border: 1px solid rgba(248, 250, 252, 0.12);
-    border-radius: 28px;
-    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
-}
-
-.advisor-card__topline {
-    height: 3px;
-    margin: -30px -30px 26px;
-    border-radius: 28px 28px 0 0;
-    background: #10b981;
-    opacity: 0.75;
-}
-
-.advisor-card h3 {
-    color: #fff;
-    font-family: Inter, system-ui, sans-serif;
-    font-size: 1.8rem;
-}
-
-.advisor-card__role {
-    margin-top: 8px;
-    color: #10b981;
-    font-size: 0.78rem;
-    font-weight: 700;
+    margin: 0;
+    color: #53d5cd;
+    font-size: 0.75rem;
+    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
 }

-.advisor-card__details {
-    flex: 1;
-    margin-top: 24px;
-    padding: 22px;
-    border: 1px solid rgba(248, 250, 252, 0.1);
-    border-radius: 22px;
-    background: rgba(255, 255, 255, 0.045);
+.advisor-heading h1 {
+    margin: 0.75rem 0 1rem;
+    font-size: clamp(2rem, 4.5vw, 3.75rem);
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.035em;
 }

-.advisor-card__details h4 {
-    margin: 0 0 8px;
-    color: #fff;
-    font-size: 0.94rem;
-}
-
-.advisor-card__details p,
-.advisor-card__details li {
-    color: var(--muted);
-    font-size: 0.92rem;
-    line-height: 1.8;
-}
-
-.advisor-card__details h4:not(:first-child) {
-    margin-top: 18px;
-}
-
-.advisor-card__details ul {
+.advisor-intro {
+    max-width: 40rem;
    margin: 0;
-    padding-left: 18px;
+    color: #94a3b8;
+}
+
+.advisor-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
+    gap: 1.5rem;
+}
+
+.advisor-loading {
+    grid-column: 1 / -1;
+    color: #94a3b8;
+}
+
+.advisor-card {
+    min-width: 0;
+}
+
+.advisor-card .package-title {
+    margin-bottom: 0.5rem;
+}
+
+.advisor-card .package-type {
+    margin: 0 0 1rem;
+}
+
+.advisor-card .package-details-box {
+    flex: 1;
+    padding-block: 1.25rem;
+}
+
+.advisor-card .detail-title {
+    margin-bottom: 0.5rem;
+}
+
+.advisor-card .detail-item + .detail-item {
+    margin-top: 1.25rem;
+}
+
+.advisor-card .detail-list {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.advisor-card .detail-list li::marker {
+    color: #53d5cd;
 }

 .advisor-contact {
-    min-height: 58px;
-    margin-top: 24px;
-    padding: 10px 22px;
-    border: 1px solid rgba(148, 163, 184, 0.25);
-    border-radius: 999px;
-    color: #fff;
-    background: rgba(255, 255, 255, 0.025);
-    font: inherit;
-    font-weight: 700;
-    cursor: pointer;
-    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
-}
-
-.advisor-contact:hover,
-.advisor-contact:focus-visible {
-    transform: translateY(-1px);
-    border-color: rgba(16, 185, 129, 0.55);
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.advisor-contact:focus-visible {
-    outline: 3px solid rgba(16, 185, 129, 0.45);
-    outline-offset: 3px;
+    margin-top: 1.5rem;
 }

 .advisor-contact-error {
-    margin-top: 10px;
+    margin: 10px 0 0;
    color: #fca5a5;
    font-size: 0.82rem;
 }
+
+@media (max-width: 760px) {
+    .advisor-section {
+        width: calc(100% - 2rem);
+        padding-block: 3.5rem;
+    }
+
+    .advisor-heading {
+        grid-template-columns: 1fr;
+        gap: 1.25rem;
+    }
+
+    .advisor-eyebrow {
+        grid-column: auto;
+    }
+}
--- a/src/shared/berater-daten.json
+++ b/src/shared/berater-daten.json
@ -1,12 +1,38 @@
 [
    {
-        "id": "anna-mueller",
-        "name": "Anna Müller",
-        "email": "anna.mueller@tri-hub.de",
-        "titel": "Ernährungsberaterin",
-        "biographie": "Anna begleitet Ausdauerathletinnen und -athleten dabei, eine alltagstaugliche Ernährungsweise zu entwickeln. Im Mittelpunkt stehen individuelle Bedürfnisse, praktikable Routinen und eine gute Versorgung rund um Training und Wettkampf.",
-        "qualifikationen": ["Ernährungsberatung", "Sporternährung"],
-        "schwerpunkte": ["Sporternährung", "Wettkampfverpflegung", "Hydration"],
+        "id": "relindis-agethen",
+        "name": "Relindis Agethen (Lilli)",
+        "email": "relindis.agethen@tri-hub.de",
+        "titel": "Triathletin und Ernährungsberaterin",
+        "biographie": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
+        "qualifikationen": [
+            "Zertifizierte Ernährungsberaterin für Sportler (B-Lizenz)",
+            "Vize-Europameisterin",
+            "Deutsche Meisterin",
+            "Mehrfache Baden-Württembergische Meisterin"
+        ],
+        "schwerpunkte": [
+            "Ernährung",
+            "Leistungssport-Perspektive",
+            "Wettkampforientierte Entwicklung"
+        ],
+        "bildquelle": ""
+    },
+    {
+        "id": "maren-hoffmann",
+        "name": "Maren Hoffmann",
+        "email": "maren.hoffmann@tri-hub.de",
+        "titel": "Triathletin und Ernährungsberaterin",
+        "biographie": "Maren Hoffmann verbindet ihre langjährige Erfahrung im Ausdauersport mit ihrem Wissen aus der Ernährungsberatung. Sie unterstützt Athletinnen und Athleten dabei, Training und Ernährung alltagstauglich aufeinander abzustimmen und sich gezielt auf Wettkämpfe vorzubereiten.",
+        "qualifikationen": [
+            "Ernährungsberaterin für Sporternährung",
+            "Langjährige Erfahrung im Ausdauersport"
+        ],
+        "schwerpunkte": [
+            "Ernährung im Ausdauertraining",
+            "Wettkampfverpflegung",
+            "Alltagstaugliche Ernährungsroutinen"
+        ],
        "bildquelle": ""
    }
 ]
--- a/vite.config.js
+++ b/vite.config.js
@ -35,6 +35,9 @@ export default defineConfig({
                booking: fileURLToPath(
                    new URL("./booking.html", import.meta.url),
                ),
+                berater: fileURLToPath(
+                    new URL("./berater.html", import.meta.url),
+                ),
            },
        },
    },