berater.html

@@ -3,10 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta
+        <meta name="description" content="Lerne die Ernährungsberaterinnen und Ernährungsberater von Tri-Hub kennen." />
-            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" />
@@ -20,35 +17,17 @@
                 <div class="advisor-container">
                     <header class="advisor-heading">
                         <p class="advisor-eyebrow">PERSÖNLICH FÜR DICH DA</p>
-                        <h1 id="advisor-heading">
+                        <h1 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h1>
-                            Lerne deine Ernährungsberater kennen.
+                        <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>
-                        </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
+                    <div class="advisor-grid" id="advisor-profiles" aria-live="polite">
-                        class="advisor-grid"
+                        <p class="advisor-loading">Beraterprofile werden geladen …</p>
-                        id="advisor-profiles"
-                        aria-live="polite"
-                    >
-                        <p class="advisor-loading">
-                            Beraterprofile werden geladen …
-                        </p>
                     </div>
                 </div>
             </section>
         </main>
-        <script
+        <script type="module" src="/src/components/navigationsbar/navigation.js"></script>
-            type="module"
+        <script type="module" src="/src/features/berater/berater-entry.js"></script>
-            src="/src/components/navigationsbar/navigation.js"
-        ></script>
-        <script
-            type="module"
-            src="/src/features/berater/berater-entry.js"
-        ></script>
         <div id="footer-placeholder"></div>
         <script type="module" src="/src/components/footer/footer.js"></script>
     </body>

index.html

@@ -164,26 +164,10 @@
             }
 
             .hero {
-                position: relative;
-                isolation: isolate;
                 padding: 92px 0 82px;
                 border-bottom: 1px solid var(--line);
             }
 
-            .hero::before {
-                content: "";
-                position: absolute;
-                inset: 0 0 56px;
-                z-index: -1;
-                background:
-                    linear-gradient(
-                        180deg,
-                        rgba(8, 15, 21, 0.72),
-                        rgba(8, 15, 21, 0.84)
-                    ),
-                    url("/images/startseiter_hintergrund.jpeg") 38% center / cover no-repeat;
-            }
-
             .hero-grid {
                 display: grid;
                 grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
@@ -257,7 +241,6 @@
 
             .hero-card {
                 position: relative;
-                transform: translateX(80px);
                 min-height: 410px;
                 padding: 38px;
                 display: flex;
@@ -274,8 +257,8 @@
                     ),
                     linear-gradient(
                         145deg,
-                        rgba(13, 19, 31, 0.78),
+                        rgba(255, 255, 255, 0.075),
-                        rgba(13, 19, 31, 0.84)
+                        rgba(255, 255, 255, 0.025)
                     );
                 box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
             }
@@ -292,7 +275,6 @@
                 box-shadow:
                     0 0 0 34px rgba(83, 213, 205, 0.035),
                     0 0 0 68px rgba(83, 213, 205, 0.02);
-                pointer-events: none;
             }
 
             .hero-card-mark {
@@ -315,11 +297,6 @@
                 color: var(--muted);
             }
 
-            .hero-card > div {
-                position: relative;
-                z-index: 1;
-            }
-
             .section {
                 padding: 96px 0;
             }
@@ -399,26 +376,6 @@
                 font-size: clamp(2.5rem, 5vw, 4.7rem);
             }
 
-            .knowledge-image-frame {
-                width: 100%;
-                transform: translateX(-18px);
-                margin-top: 28px;
-                padding: 9px;
-                overflow: hidden;
-                border: 1px solid rgba(248, 250, 252, 0.18);
-                border-radius: 22px;
-                background: linear-gradient(145deg, #273135, #151d22);
-                box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
-            }
-
-            .knowledge-image-frame img {
-                display: block;
-                width: 100%;
-                aspect-ratio: 2.58 / 1;
-                border-radius: 14px;
-                object-fit: cover;
-            }
-
             .knowledge-copy {
                 color: var(--muted);
                 line-height: 1.85;
@@ -741,7 +698,6 @@
 
                 .hero-card {
                     min-height: 330px;
-                    transform: none;
                 }
             }
 
@@ -929,13 +885,6 @@
                         <h2 style="font-family: &quot;Inter&quot;, sans-serif">
                             Wissen,<br />das dich<br />weiterbringt.
                         </h2>
-                        <div class="knowledge-image-frame">
-                            <img
-                                src="/images/exttraBild.jpeg"
-                                alt="Ergänzendes Bild zur Ernährungsberatung"
-                                loading="lazy"
-                            />
-                        </div>
                     </div>
 
                     <div>

src/components/footer/footer.html

@@ -62,7 +62,7 @@
                 <a href="https://tri-hub.de/widerruf">Widerrufsbelehrung</a>
                 <a href="https://tri-hub.de/datenschutz">Datenschutz</a>
                 <a href="https://tri-hub.de/impressum">Impressum</a>
-                <a class="trihub-cookie-link" href="#cookie-einstellungen" aria-haspopup="dialog">Cookie-Einstellungen öffnen</a>
+                <a class="trihub-cookie-link" href="https://tri-hub.de/">Cookie-Einstellungen öffnen</a>
             </nav>
         </section>
     </div>

src/components/footer/footer.js

@@ -8,84 +8,8 @@ export function initFooter(placeholderSelector = "#footer-placeholder") {
         return;
     }
 
-    placeholder.outerHTML = `${footerHtml}
+    placeholder.outerHTML = footerHtml;
-        <dialog class="cookie-settings-dialog" aria-labelledby="cookie-settings-title">
-            <div class="cookie-settings-heading">
-                <div>
-                    <p class="cookie-settings-eyebrow">DATENSCHUTZ &amp; REICHWEITENMESSUNG</p>
-                    <h2 id="cookie-settings-title">Cookie-Einstellungen</h2>
-                </div>
-                <button class="cookie-settings-close" type="button" aria-label="Cookie-Einstellungen schließen">×</button>
-            </div>
-            <div class="cookie-settings-options">
-                <label class="cookie-option">
-                    <span class="cookie-option-copy"><strong>Notwendig</strong><span>Halten den Laden am Laufen und sind notwendig für den Betrieb.</span></span>
-                    <input type="checkbox" name="necessary" checked disabled aria-label="Notwendige Cookies immer aktiv">
-                    <span class="cookie-toggle" aria-hidden="true"></span>
-                </label>
-                <label class="cookie-option">
-                    <span class="cookie-option-copy"><strong>Komfort</strong><span>Machen dein Erlebnis angenehmer, zum Beispiel durch Terminbuchung, Kundenbewertungen oder externe Videoinhalte.</span></span>
-                    <input type="checkbox" name="comfort">
-                    <span class="cookie-toggle" aria-hidden="true"></span>
-                </label>
-                <label class="cookie-option">
-                    <span class="cookie-option-copy"><strong>Analyse</strong><span>Helfen uns, die Nutzung der Website auszuwerten und Inhalte zu verbessern.</span></span>
-                    <input type="checkbox" name="analysis">
-                    <span class="cookie-toggle" aria-hidden="true"></span>
-                </label>
-                <label class="cookie-option">
-                    <span class="cookie-option-copy"><strong>Marketing</strong><span>Helfen uns, Angebote zu verbessern und relevante Inhalte zu zeigen.</span></span>
-                    <input type="checkbox" name="marketing">
-                    <span class="cookie-toggle" aria-hidden="true"></span>
-                </label>
-            </div>
-            <div class="cookie-settings-actions">
-                <button class="cookie-settings-back" type="button">Zurück</button>
-                <button class="cookie-settings-save" type="button">Einstellungen speichern</button>
-            </div>
-        </dialog>`;
 
-    const dialog = document.querySelector(".cookie-settings-dialog");
-    const cookieLink = document.querySelector(".trihub-cookie-link");
-    const preferenceKey = "triHubCookiePreferences";
-
-    const loadPreferences = () => {
-        try {
-            return JSON.parse(localStorage.getItem(preferenceKey) || "{}");
-        } catch {
-            return {};
-        }
-    };
-
-    cookieLink?.addEventListener("click", (event) => {
-        event.preventDefault();
-        const preferences = loadPreferences();
-        for (const category of ["comfort", "analysis", "marketing"]) {
-            const input = dialog.querySelector(`input[name="${category}"]`);
-            input.checked = preferences[category] === true;
-        }
-        dialog.showModal();
-    });
-
-    const closeDialog = () => dialog.close();
-    dialog.querySelector(".cookie-settings-close").addEventListener("click", closeDialog);
-    dialog.querySelector(".cookie-settings-back").addEventListener("click", closeDialog);
-    dialog.querySelector(".cookie-settings-save").addEventListener("click", () => {
-        const preferences = { necessary: true };
-        for (const category of ["comfort", "analysis", "marketing"]) {
-            preferences[category] = dialog.querySelector(`input[name="${category}"]`).checked;
-        }
-        try {
-            localStorage.setItem(preferenceKey, JSON.stringify(preferences));
-        } catch {
-            // Der Dialog bleibt auch ohne verfügbaren Speicher bedienbar.
-        }
-        closeDialog();
-    });
-
-    dialog.addEventListener("click", (event) => {
-        if (event.target === dialog) closeDialog();
-    });
 }
 
 document.addEventListener("DOMContentLoaded", () => initFooter());

src/components/navigationsbar/navigation.html

@@ -35,22 +35,16 @@
                     <a href="/index.html" class="navbar__link">Ernährung</a>
                 </li>
                 <li>
-                    <a href="/berater.html" class="navbar__link"
+                    <a href="/berater.html" class="navbar__link">Beraterprofil</a>
-                        >Beraterprofil</a
-                    >
                 </li>
                 <li>
-                    <a href="/FAQ.html" class="navbar__link">FAQ</a>
+                    <a href="/index.html" class="navbar__link">FAQ</a>
                 </li>
                 <li>
-                    <a href="/index.html#erfahrungen" class="navbar__link"
+                    <a href="/index.html#erfahrungen" class="navbar__link">Rezensionen</a>
-                        >Rezensionen</a
-                    >
                 </li>
                 <li>
-                    <a href="/index.html#kontakt" class="navbar__link"
+                    <a href="/index.html#kontakt" class="navbar__link">Kontakt</a>
-                        >Kontakt</a
-                    >
                 </li>
                 <li>
                     <a

src/features/angebote/angebotsuebersicht.js

@@ -15,24 +15,9 @@ export function renderAngebotsuebersicht() {
             ? `<span class="package-highlight">${pkg.highlight}</span>`
             : "";
 
-        const packageImage = {
-            "ernaehrung-starter": {
-                src: "/images/Starter_bild.webp",
-                alt: "Triathlon-Einsteiger im Gespräch mit ihrem Coach am See",
-            },
-            "ernaehrung-standard": {
-                src: "/images/standard_bild.webp",
-                alt: "Triathlet im Radtrikot bespricht sein Training mit dem Coach",
-            },
-            "ernaehrung-premium": {
-                src: "/images/premium_bild.webp",
-                alt: "Triathlon-Athleten planen gemeinsam am Seeufer",
-            },
-        }[pkg.id];
-
         const cardHtml = `
-      <article class="package-card">
+      <div class="package-card">
-        <img class="package-image" src="${packageImage.src}" alt="${packageImage.alt}" loading="lazy" />
+
         <div class="package-type-container">
           <span class="package-type">${pkg.type}</span>
           ${highlightHtml}
@@ -58,7 +43,7 @@ export function renderAngebotsuebersicht() {
 
         <a href="/paket-details.html?id=${pkg.id}" class="package-btn">${pkg.buttonText} <span aria-hidden="true">→</span></a>
 
-      </article>
+      </div>
     `;
 
         container.innerHTML += cardHtml;

src/features/faq/faq.js

@@ -1,137 +0,0 @@
-/**
- * Tri-hub FAQ
- * Suche, Kategorien, Accordion und Footer-Jahr
- */
-
-document.addEventListener("DOMContentLoaded", () => {
-    const searchInput = document.getElementById("search");
-    const chipsContainer = document.getElementById("chips");
-    const sections = Array.from(document.querySelectorAll(".faq-section"));
-    const faqItems = Array.from(document.querySelectorAll(".faq-item"));
-    const emptyMessage = document.getElementById("empty");
-    const status = document.getElementById("status");
-    const yearElement = document.getElementById("year");
-
-    // Aktuelles Jahr im Footer
-    if (yearElement) {
-        yearElement.textContent = new Date().getFullYear();
-    }
-
-    // Aktiver Kategorie-Filter
-    let activeFilter = "all";
-
-    // Text für die Suche vereinheitlichen
-    function normalizeText(text) {
-        return text
-            .toLocaleLowerCase("de")
-            .normalize("NFD")
-            .replace(/[\u0300-\u036f]/g, "")
-            .trim();
-    }
-
-    // FAQ-Suche und Kategorie-Filter anwenden
-    function filterFAQs() {
-        const searchTerm = normalizeText(searchInput?.value || "");
-
-        let visibleCount = 0;
-
-        sections.forEach((section) => {
-            const category = section.dataset.cat;
-            const categoryMatches =
-                activeFilter === "all" || category === activeFilter;
-
-            const items = Array.from(section.querySelectorAll(".faq-item"));
-
-            let visibleInSection = 0;
-
-            items.forEach((item) => {
-                const searchableText = normalizeText(item.textContent);
-
-                const searchMatches =
-                    searchTerm === "" || searchableText.includes(searchTerm);
-
-                const isVisible = categoryMatches && searchMatches;
-
-                item.hidden = !isVisible;
-
-                if (isVisible) {
-                    visibleInSection++;
-                    visibleCount++;
-                }
-            });
-
-            // Kategorie nur anzeigen, wenn Fragen passen
-            section.hidden = visibleInSection === 0;
-        });
-
-        // Hinweis anzeigen, wenn nichts gefunden wurde
-        if (emptyMessage) {
-            emptyMessage.classList.toggle("hidden", visibleCount > 0);
-        }
-
-        // Screenreader über das Suchergebnis informieren
-        if (status) {
-            status.textContent =
-                visibleCount === 1
-                    ? "Eine Frage gefunden."
-                    : `${visibleCount} Fragen gefunden.`;
-        }
-    }
-
-    // Kategorie-Buttons initialisieren
-    if (chipsContainer) {
-        const chips = Array.from(
-            chipsContainer.querySelectorAll("[data-filter]"),
-        );
-
-        function updateActiveChip() {
-            chips.forEach((chip) => {
-                const isActive = chip.dataset.filter === activeFilter;
-
-                chip.classList.toggle("is-active", isActive);
-
-                chip.setAttribute("aria-pressed", String(isActive));
-            });
-        }
-
-        chips.forEach((chip) => {
-            chip.addEventListener("click", () => {
-                activeFilter = chip.dataset.filter;
-
-                updateActiveChip();
-                filterFAQs();
-            });
-        });
-
-        updateActiveChip();
-    }
-
-    // Suche bei jeder Eingabe aktualisieren
-    if (searchInput) {
-        searchInput.addEventListener("input", filterFAQs);
-    }
-
-    // Accordion: Immer nur eine Frage gleichzeitig öffnen
-    faqItems.forEach((item) => {
-        item.addEventListener("toggle", () => {
-            const isOpen = item.open;
-
-            item.dataset.state = isOpen ? "open" : "closed";
-
-            if (!isOpen) return;
-
-            faqItems.forEach((otherItem) => {
-                if (otherItem !== item && otherItem.open) {
-                    otherItem.open = false;
-                }
-            });
-        });
-    });
-
-    // Initialzustand setzen
-    faqItems.forEach((item) => {
-        item.dataset.state = item.open ? "open" : "closed";
-    });
-
-    filterFAQs();
-});

src/styles/footer.css

@@ -227,206 +227,3 @@
         align-items: flex-start;
     }
 }
-
-.cookie-settings-dialog,
-.cookie-settings-dialog * {
-    box-sizing: border-box;
-}
-
-.cookie-settings-dialog {
-    width: min(58rem, calc(100% - 2rem));
-    max-width: none;
-    max-height: calc(100% - 2rem);
-    margin: auto;
-    padding: clamp(1.25rem, 3vw, 2.1rem);
-    overflow-y: auto;
-    border: 1px solid rgba(255, 255, 255, 0.14);
-    border-radius: 1.4rem;
-    background: #071217;
-    color: #f8fafc;
-    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
-    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-.cookie-settings-dialog::backdrop {
-    background: rgba(0, 0, 0, 0.72);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-}
-
-.cookie-settings-heading {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1.5rem;
-    margin-bottom: 1.75rem;
-}
-
-.cookie-settings-eyebrow {
-    margin: 0 0 0.45rem;
-    color: rgba(255, 255, 255, 0.52);
-    font-size: 0.72rem;
-    letter-spacing: 0.22em;
-}
-
-.cookie-settings-heading h2 {
-    margin: 0;
-    font-family: inherit;
-    color: #fff;
-    font-size: clamp(1.6rem, 4vw, 2.15rem);
-    line-height: 1.15;
-}
-
-.cookie-settings-close {
-    flex: 0 0 auto;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: #fff;
-    font: inherit;
-    font-size: 2.1rem;
-    line-height: 1;
-    cursor: pointer;
-}
-
-.cookie-settings-options {
-    display: grid;
-    gap: 0.9rem;
-}
-
-.cookie-option {
-    position: relative;
-    display: flex;
-    min-height: 5.25rem;
-    align-items: center;
-    justify-content: space-between;
-    gap: 3.5rem;
-    padding: 1.1rem 1.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.11);
-    border-radius: 1.2rem;
-    background: rgba(255, 255, 255, 0.065);
-    cursor: pointer;
-}
-
-.cookie-option-copy {
-    display: grid;
-    gap: 0.35rem;
-}
-
-.cookie-option-copy strong {
-    color: #fff;
-    font-size: 1.05rem;
-    font-weight: 600;
-}
-
-.cookie-option-copy > span {
-    color: rgba(255, 255, 255, 0.66);
-    font-size: 0.94rem;
-    line-height: 1.55;
-}
-
-.cookie-option input {
-    position: absolute;
-    top: 1.15rem;
-    right: 1.25rem;
-    z-index: 1;
-    width: 3.25rem;
-    height: 1.75rem;
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-
-.cookie-toggle {
-    position: absolute;
-    top: 1.1rem;
-    right: 1.15rem;
-    width: 3.25rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    background: #465057;
-    transition: background-color 0.18s ease;
-}
-
-.cookie-toggle::before {
-    content: "";
-    position: absolute;
-    top: 0.2rem;
-    left: 0.2rem;
-    width: 1.35rem;
-    height: 1.35rem;
-    border-radius: 50%;
-    background: #fff;
-    transition: transform 0.18s ease;
-}
-
-.cookie-option input:checked + .cookie-toggle {
-    background: #00bfd2;
-}
-
-.cookie-option input:checked + .cookie-toggle::before {
-    transform: translateX(1.5rem);
-}
-
-.cookie-option input:focus-visible + .cookie-toggle,
-.cookie-settings-dialog button:focus-visible {
-    outline: 3px solid #4edbdc;
-    outline-offset: 3px;
-}
-
-.cookie-option input:disabled {
-    cursor: not-allowed;
-}
-
-.cookie-settings-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-}
-
-.cookie-settings-actions button {
-    min-height: 3rem;
-    padding: 0.7rem 1.2rem;
-    border: 1px solid rgba(255, 255, 255, 0.16);
-    border-radius: 999px;
-    background: transparent;
-    color: #f8fafc;
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-}
-
-.cookie-settings-actions .cookie-settings-save {
-    border-color: #fff;
-    background: #fff;
-    color: #102027;
-}
-
-@media (max-width: 600px) {
-    .cookie-settings-dialog {
-        width: calc(100% - 1.25rem);
-        padding: 1.2rem;
-        border-radius: 1.1rem;
-    }
-
-    .cookie-option {
-        align-items: flex-start;
-        padding: 1rem 4rem 1rem 1rem;
-    }
-
-    .cookie-option input,
-    .cookie-toggle {
-        top: 1rem;
-        right: 0.85rem;
-    }
-
-    .cookie-settings-actions {
-        flex-direction: column-reverse;
-    }
-
-    .cookie-settings-actions button {
-        width: 100%;
-    }
-}

src/styles/packages.css

@@ -72,15 +72,6 @@
     display: flex;
     flex-direction: column;
 }
-.package-image {
-    display: block;
-    width: 100%;
-    aspect-ratio: 1.42 / 1;
-    margin: 0 0 1.5rem;
-    border: 1px solid #f8fafc1f;
-    border-radius: 1.1rem;
-    object-fit: cover;
-}
 .package-type-container {
     display: flex;
     flex-wrap: wrap;