From 659e4ff9ecee47c0fbfd9d99ba888547e2ff48ba Mon Sep 17 00:00:00 2001
From: Majd Ibrahim <“3021285@stud.hs-mannheim.de”>
Date: Tue, 29 Sep 2026 15:15:43 +0000
Subject: [PATCH] Design verbessert und Bugs gehoben

---
 berater.html                                  |  31 +++
 index.html                                    |  16 --
 src/components/navigationsbar/navigation.html |   4 +-
 src/features/berater/berater-entry.js         |  29 +--
 src/features/berater/berater.css              | 181 +++++++++---------
 src/shared/berater-daten.json                 |  40 +++-
 vite.config.js                                |   3 +
 7 files changed, 181 insertions(+), 123 deletions(-)
 create mode 100644 berater.html
diff --git a/berater.html b/berater.html
new file mode 100644
index 0000000..722f850
--- /dev/null
+++ 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>
diff --git a/index.html b/index.html
index cb5146c..d6bda2a 100644
--- 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");
diff --git a/src/components/navigationsbar/navigation.html b/src/components/navigationsbar/navigation.html
index 71a3ea8..b4638bf 100644
--- 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>
diff --git a/src/features/berater/berater-entry.js b/src/features/berater/berater-entry.js
index 0c096bc..6515854 100644
--- 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>
+                    <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="advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
+                <button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
             </article>
         `).join("");
     }
diff --git a/src/features/berater/berater.css b/src/features/berater/berater.css
index 4716cfb..c74360c 100644
--- 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;
+    }
+}
diff --git a/src/shared/berater-daten.json b/src/shared/berater-daten.json
index 5c5f236..c539096 100644
--- 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": ""
     }
 ]
diff --git a/vite.config.js b/vite.config.js
index a0e5234..53000c5 100644
--- 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),
+                ),
             },
         },
     },
