Merge pull request 'Sprint 3: Fehler bei der Terminbuchung behoben' (#6) from sprint3-final-fix into main

Reviewed-on: #6
Reviewed-by: Dennis Walten <3034602@stud.th-mannheim.de>
Reviewed-by: Vincent Laux <3019006@stud.hs-mannheim.de>
Reviewed-by: Ahmad Luay Eleiwy <3024588@stud.hs-mannheim.de>

css/beratung.css

@@ -134,7 +134,7 @@
 
 .beratung-bereich .btn-accent {
     background: var(--accent);
-    color: #03242b;
+    color: var(--text-primary);
 }
 
 .beratung-bereich .btn-accent:hover {

css/leistungen.css

@@ -86,7 +86,6 @@
 
 /* Empfehlung kommt aus der JSON-Datei; die Auswahlklasse setzt leistungen.js beim Klick. */
 .pakete .paket-karte--empfohlen {
-    border-color: 1px solid rgba(248, 250, 252, 0.08);
     box-shadow: 0 0 0 1px var(--accent-soft);
 }
 
@@ -204,15 +203,17 @@
 
 /* ---------- Paketauswahl und Tastaturfokus ---------- */
 .pakete .paket-karte__cta {
+    display: inline-block;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-primary);
-    background: var(--background);
+    background: var(--accent);
-    border: 1px solid rgba(248, 250, 252, 0.08);
+    border: none;
     border-radius: 8px;
     padding: 0.85rem 1rem;
     cursor: pointer;
+    text-decoration: none;
     transition: filter 0.15s ease;
 }
 

css/terminbuchung.css

@@ -37,6 +37,10 @@
     position: relative;
     box-sizing: border-box;
     width: min(560px, 100%);
+    /* Bei kleinen Fenstern bleibt der gesamte Dialog erreichbar. */
+    max-height: calc(100dvh - 48px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
     background-color: #111a1e;
     border: 2px solid rgb(255 255 255 / 9%);
     border-radius: 16px;
@@ -1145,4 +1149,4 @@
     .tb-overlay * {
         transition-duration: 0.01ms !important;
     }
-}
+}

html/kontakt.html

@@ -146,7 +146,7 @@
                     </div>
 
                     <div class="reveal">
-                        <h3 style="font-size: 1.25rem; margin-bottom: 24px;">Kontaktinformationen</h3>
+                        <h3 style="font-size: 1.25rem; margin-bottom: 24px; margin-top: 38px;">Kontaktinformationen</h3>
                         <div class="info-stack">
                             <div class="info-card">
                                 <div class="info-card__icon" aria-hidden="true">✉</div>
@@ -238,7 +238,7 @@
                     </div>
 
                     <div class="footer-legal">
-                        <span>© 2026 Tri-hub GmbH</span>
+                        <span>© 2026 TRI-HUB GmbH</span>
                         <span>
                             <a href="https://tri-hub.de/impressum">Impressum</a> ·
                             <a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·

html/paket-premium.html

@@ -58,7 +58,6 @@
                             <p class="hero__description">Volle Betreuung für ambitionierte Athletinnen und Athleten ab 50. Wir stehen dir wöchentlich zur Seite, stimmen deine Nahrungsergänzung ab und begleiten dich direkt an deinem Wettkampftag.</p>
                             <div class="paket-detail__actions">
                                 <a class="btn btn-accent" href="#anfrage">Premium-Paket ansehen <span aria-hidden="true">↗</span></a>
-                                <a class="paket-detail__text-link" href="#leistungen">Was ist enthalten? <span aria-hidden="true">↓</span></a>
                             </div>
                         </div>
                     </div>

html/paket-standard.html

@@ -58,7 +58,6 @@
                             <p class="hero__description">Laufende Betreuung für Triathletinnen und Triathleten, die regelmäßig trainieren. Wir passen deine Ernährung flexibel an deine Trainingsphasen an und entwickeln deine Wettkampfstrategie.</p>
                             <div class="paket-detail__actions">
                                 <a class="btn btn-accent" href="#anfrage">Standard-Paket ansehen <span aria-hidden="true">↗</span></a>
-                                <a class="paket-detail__text-link" href="#leistungen">Was ist enthalten? <span aria-hidden="true">↓</span></a>
                             </div>
                         </div>
                     </div>

html/paket-starter.html

@@ -58,7 +58,6 @@
                             <p class="hero__description">Du möchtest deine Ernährung bewusster auf dein Training abstimmen? Wir begleiten deinen Einstieg – mit einem persönlichen Gespräch, einem Plan für dich und konkreten Ideen für deinen Alltag.</p>
                             <div class="paket-detail__actions">
                                 <a class="btn btn-accent" href="#anfrage">Starter-Paket ansehen <span aria-hidden="true">↗</span></a>
-                                <a class="paket-detail__text-link" href="#leistungen">Was ist enthalten? <span aria-hidden="true">↓</span></a>
                             </div>
                         </div>
                     </div>

html/terminbuchung.html

@@ -38,8 +38,6 @@
                     aria-label="Menü öffnen">☰</button>
                 <nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
                     <ul>
-                        <li><a href="#termin">Termin</a></li>
-                        <li><a href="#formular">Deine Angaben</a></li>
                         <li><a href="../index.html">Zurück zur Übersicht</a></li>
                     </ul>
                 </nav>
@@ -176,8 +174,8 @@
                         <div class="tb-review-actions">
                             <button type="button" class="tb-review-button tb-review-button--secondary"
                                 id="anfrage-bearbeiten">Zurück und bearbeiten</button>
-                            <a class="tb-review-button tb-review-button--primary" id="anfrage-senden" href="#">Anfrage
+                            <button type="button" class="tb-review-button tb-review-button--primary" id="anfrage-senden" disabled>Anfrage
-                                senden</a>
+                                senden</button>
                         </div>
                     </div>
                 </div>
@@ -215,7 +213,7 @@
                     </div>
 
                     <div class="footer-legal">
-                        <span>© 2026 Tri-hub GmbH</span>
+                        <span>© 2026 TRI-HUB GmbH</span>
                         <span>
                             <a href="https://tri-hub.de/impressum">Impressum</a> ·
                             <a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
@@ -228,13 +226,12 @@
 
         <dialog class="tb-confirm-dialog" id="anfrage-bestaetigung" aria-labelledby="bestaetigung-titel"
             aria-describedby="bestaetigung-text">
-            <span class="kicker">Anfrage vorbereitet</span>
+            <span class="kicker">Termin gebucht</span>
-            <h2 id="bestaetigung-titel">Terminanfrage</h2>
+            <h2 id="bestaetigung-titel">Terminbestätigung</h2>
-            <p id="bestaetigung-text">Deine Terminanfrage wurde an dein E-Mail-Programm übergeben. Sende sie dort
+            <p id="bestaetigung-text">Dein Termin wurde erfolgreich gebucht. Eine Bestätigung wurde an die angegebene E-Mail-Adresse gesendet.</p>
-                bitte ab. Wir prüfen deinen Wunschtermin und schicken dir anschließend eine Bestätigung per E-Mail.</p>
             <a class="tb-review-button tb-review-button--primary" href="../index.html">OK, zur Übersicht</a>
         </dialog>
     </div>
 </body>
 
-</html>
+</html>

index.html

@@ -249,7 +249,7 @@
                     </div>
 
                     <div class="footer-legal">
-                        <span>© 2026 Tri-hub GmbH</span>
+                        <span>© 2026 TRI-HUB GmbH</span>
                         <span>
                             <a href="https://tri-hub.de/impressum">Impressum</a> ·
                             <a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·

js/terminbuchung-form.js

@@ -1,7 +1,7 @@
 // Online-Terminbuchung – Buchungsseite (html/terminbuchung.html).
 // Liest den gewählten Termin aus der URL (berater, datum, zeit), füllt die
 // Zusammenfassung, verwaltet die Anamnese-Tags und prüft das Formular.
-// Zum Absenden wird wie auf der Kontaktseite das E-Mail-Programm geöffnet.
+// Die Bestätigung wird nur auf der Seite angezeigt; es wird keine E-Mail versendet.
 
 // ----- Scroll-Reveal -----
 (function () {
@@ -34,66 +34,6 @@
     });
 })();
 
-// ----- Termin-Zusammenfassung aus der URL -----
-(function () {
-    const params = new URLSearchParams(window.location.search);
-    const beraterId = params.get("berater");
-    const datum = params.get("datum");
-    const zeit = params.get("zeit");
-
-    const elBerater = document.getElementById("tb-berater");
-    const elDatum = document.getElementById("tb-datum");
-    const elZeit = document.getElementById("tb-zeit");
-    const zusammenfassung = document.getElementById("termin-zusammenfassung");
-    if (!zusammenfassung) return;
-
-    // Ohne Termin-Parameter (z. B. direkter Seitenaufruf): Hinweis statt Zusammenfassung.
-    if (!beraterId || !datum || !zeit) {
-        zusammenfassung.classList.add("tb-summary--fehlend");
-        zusammenfassung.innerHTML = `
-            <div class="tb-summary__item">
-                <span class="tb-summary__label">Kein Termin ausgewählt</span>
-                <p class="tb-summary__value" style="font-size: 0.95rem; font-weight: 400;">
-                    Du hast noch keinen Termin im Kalender gewählt.
-                    Gehe bitte zurück zur <a href="../index.html#berater">Startseite</a> und öffne dort über einen
-                    Berater die Terminbuchung.
-                </p>
-            </div>
-        `;
-        return;
-    }
-
-    // Datum lesbar formatieren, z. B. "Montag, 05.10.2026"
-    const [jahr, monat, tag] = datum.split("-").map(Number);
-    if (!jahr || !monat || !tag) return;
-    const datumObjekt = new Date(jahr, monat - 1, tag);
-    const formatiert = new Intl.DateTimeFormat("de-DE", {
-        weekday: "long",
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric"
-    }).format(datumObjekt);
-
-    elDatum.textContent = formatiert;
-    elZeit.textContent = zeit.replace(":", ".") + " Uhr";
-
-    // Berater-Namen aus json/berater.json auflösen (ID stammt aus dem Kalender).
-    fetch("../json/berater.json")
-        .then(function (response) {
-            if (!response.ok) throw new Error("HTTP " + response.status);
-            return response.json();
-        })
-        .then(function (daten) {
-            const treffer = (daten.berater || []).find(function (b) {
-                return String(b.id) === String(beraterId);
-            });
-            elBerater.textContent = treffer ? String(treffer.name).trim() : "Unbekannter Berater";
-        })
-        .catch(function () {
-            elBerater.textContent = "Unbekannter Berater";
-        });
-})();
-
 // ----- Anamnese-Tags (Allergien & Unverträglichkeiten) -----
 (function () {
     const input = document.getElementById("tag-input");
@@ -175,7 +115,6 @@
     const form = document.getElementById("terminbuchung-formular");
     if (!form) return;
 
-    const EMAIL_TARGET = "info@trihub.de";
     const bestaetigungDialog = document.getElementById("anfrage-bestaetigung");
 
     const fields = {
@@ -193,7 +132,7 @@
     const pruefBereich = document.getElementById("anfrage-pruefen");
     const pruefDetails = document.getElementById("anfrage-pruefen-details");
     const bearbeitenButton = document.getElementById("anfrage-bearbeiten");
-    const sendenLink = document.getElementById("anfrage-senden");
+    const sendenButton = document.getElementById("anfrage-senden");
 
     function wrap(el) {
         return el.closest(".field");
@@ -234,6 +173,7 @@
 
     function allValid() {
         return (
+            terminIstGueltig() &&
             fields.art.value !== "" &&
             fields.format.value !== "" &&
             fields.gespraech.value !== "" &&
@@ -266,25 +206,75 @@
         });
     });
 
-    // Termin-Angaben aus der URL für das E-Mail übernehmen.
+    // Nur ein eingetragener, noch zukünftiger Termin darf angefragt werden.
     const params = new URLSearchParams(window.location.search);
-    const datumRoh = params.get("datum") || "";
+    const beraterId = params.get("berater");
-    const zeitRoh = params.get("zeit") || "";
+    const datum = params.get("datum");
-    let terminText = "–";
+    const zeit = params.get("zeit");
-    if (datumRoh && zeitRoh) {
+    let termin = null;
-        const [jahr, monat, tag] = datumRoh.split("-").map(Number);
+
-        if (jahr && monat && tag) {
+    function terminIstGueltig() {
-            const formatiert = new Intl.DateTimeFormat("de-DE", {
+        return termin !== null && termin.zeitpunkt > Date.now();
-                weekday: "long",
-                day: "2-digit",
-                month: "2-digit",
-                year: "numeric"
-            }).format(new Date(jahr, monat - 1, tag));
-            terminText = formatiert + " um " + zeitRoh.replace(":", ".") + " Uhr";
-        }
     }
 
-    const elBerater = document.getElementById("tb-berater");
+    function terminFehlerAnzeigen(text) {
+        termin = null;
+        const zusammenfassung = document.getElementById("termin-zusammenfassung");
+        zusammenfassung.classList.add("tb-summary--fehlend");
+        zusammenfassung.innerHTML = `
+            <div class="tb-summary__item">
+                <span class="tb-summary__label">Bitte einen gültigen Termin wählen</span>
+                <p class="tb-summary__value" style="font-size: 0.95rem; font-weight: 400;">
+                    Wähle auf der <a href="../index.html#berater">Startseite</a> einen Berater,
+                    einen verfügbaren Tag und eine Uhrzeit.
+                </p>
+            </div>
+        `;
+        pruefBereich.hidden = true;
+        formularBereich.hidden = false;
+        sendenButton.disabled = true;
+        showStatus("error", text);
+        updateSubmitState();
+    }
+
+    async function terminLaden() {
+        if (!beraterId || !datum || !zeit) {
+            terminFehlerAnzeigen("Bitte wähle zuerst einen Termin im Kalender.");
+            return;
+        }
+        try {
+            const [beraterDaten, terminDaten] = await Promise.all(
+                ["../json/berater.json", "../json/terminbuchung.json"].map(async function (url) {
+                    const response = await fetch(url);
+                    if (!response.ok) throw new Error("HTTP " + response.status);
+                    return response.json();
+                })
+            );
+            const berater = beraterDaten.berater.find(function (eintrag) {
+                return String(eintrag.id) === beraterId;
+            });
+            const zeiten = terminDaten[beraterId]?.[datum];
+            const zeitpunkt = new Date(`${datum}T${zeit}:00`).getTime();
+            if (!berater || !Array.isArray(zeiten) || !zeiten.includes(zeit) || !(zeitpunkt > Date.now())) {
+                terminFehlerAnzeigen("Dieser Termin ist nicht verfügbar oder bereits vergangen. Bitte wähle einen neuen Termin.");
+                return;
+            }
+            const datumText = new Intl.DateTimeFormat("de-DE", {
+                weekday: "long", day: "2-digit", month: "2-digit", year: "numeric"
+            }).format(new Date(zeitpunkt));
+            termin = {
+                zeitpunkt,
+                berater: String(berater.name).trim(),
+                text: datumText + " um " + zeit.replace(":", ".") + " Uhr"
+            };
+            document.getElementById("tb-berater").textContent = termin.berater;
+            document.getElementById("tb-datum").textContent = datumText;
+            document.getElementById("tb-zeit").textContent = zeit.replace(":", ".") + " Uhr";
+            updateSubmitState();
+        } catch (error) {
+            terminFehlerAnzeigen("Der Termin konnte nicht geprüft werden. Bitte lade die Seite erneut.");
+        }
+    }
 
     function labelVon(key) {
         const select = fields[key];
@@ -308,15 +298,22 @@
         formularBereich.scrollIntoView({ behavior: "smooth", block: "start" });
     });
 
-    sendenLink.addEventListener("click", function (event) {
+    sendenButton.addEventListener("click", function () {
-        event.preventDefault();
+        if (!terminIstGueltig()) {
+            terminFehlerAnzeigen("Der Termin ist nicht mehr gültig. Bitte wähle einen neuen Termin.");
+            formularBereich.scrollIntoView({ block: "start" });
+            return;
+        }
         bestaetigungDialog.showModal();
-        window.location.href = sendenLink.href;
     });
 
     form.addEventListener("submit", function (event) {
         event.preventDefault();
         form.dataset.touched = "true";
+        if (!terminIstGueltig()) {
+            terminFehlerAnzeigen("Bitte wähle zuerst einen verfügbaren, zukünftigen Termin.");
+            return;
+        }
 
         const okArt = validateSelect("art");
         const okFormat = validateSelect("format");
@@ -330,7 +327,8 @@
         }
 
         const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
-        const beraterText = elBerater ? elBerater.textContent.trim() : "–";
+        const beraterText = termin.berater;
+        const terminText = termin.text;
         const anfrageDaten = [
             ["Berater/in", beraterText],
             ["Termin", terminText],
@@ -344,28 +342,8 @@
             ["Telefon", fields.phone.value.trim() || "–"]
         ];
 
-        const body = [
-            "Terminanfrage – Trainingsplan & Beratung",
-            "",
-            "Termin: " + terminText,
-            "Berater/in: " + beraterText,
-            "Art der Ernährungsberatung: " + labelVon("art"),
-            "Beratungsformat: " + labelVon("format"),
-            "Gesprächsart: " + labelVon("gespraech"),
-            "",
-            "Kurzbeschreibung: " + (fields.beschreibung.value.trim() || "–"),
-            "Anamnese (Allergien & Unverträglichkeiten): " + (tagListe.length ? tagListe.join(", ") : "–"),
-            "",
-            "Name: " + fields.name.value.trim(),
-            "E-Mail: " + fields.email.value.trim(),
-            "Telefon: " + (fields.phone.value.trim() || "–")
-        ].join("\n");
-
         werteAnzeigen(anfrageDaten);
-        sendenLink.href =
+        sendenButton.disabled = false;
-            "mailto:" + EMAIL_TARGET +
-            "?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
-            "&body=" + encodeURIComponent(body);
         formularBereich.hidden = true;
         pruefBereich.hidden = false;
         pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -379,4 +357,5 @@
     }
 
     updateSubmitState();
+    terminLaden();
 })();

js/terminbuchung.js

@@ -77,18 +77,17 @@
         const tabelle = terminDaten[String(beraterId)];
         if (!tabelle || typeof tabelle !== "object") return [];
         const zeiten = tabelle[schluessel];
-        return Array.isArray(zeiten) ? zeiten : [];
+        // Auch bereits vergangene Uhrzeiten am heutigen Tag ausblenden.
+        return Array.isArray(zeiten)
+            ? zeiten.filter((zeit) => new Date(`${schluessel}T${zeit}:00`).getTime() > Date.now())
+            : [];
     }
 
     function hatFreieTermine(beraterId) {
         const tabelle = terminDaten[String(beraterId)];
         if (!tabelle || typeof tabelle !== "object") return false;
 
-        return Object.entries(tabelle).some(([schluessel, zeiten]) => {
+        return Object.keys(tabelle).some((schluessel) => zeitenFuer(beraterId, schluessel).length > 0);
-            const datum = /^(\d{4})-(\d{2})-(\d{2})$/.exec(schluessel);
-            if (!datum || !Array.isArray(zeiten) || zeiten.length === 0) return false;
-            return !istVergangen(Number(datum[1]), Number(datum[2]) - 1, Number(datum[3]));
-        });
     }
 
     function istVerfuegbar(jahr, monat, tag) {
@@ -121,7 +120,7 @@
                 <div class="tb-dialog" role="dialog" aria-modal="true" aria-labelledby="tb-title">
                     <button type="button" class="tb-close" aria-label="Terminbuchung schließen">&times;</button>
                     <span class="tb-kicker">Online-Terminbuchung</span>
-                    <h2 class="tb-title" id="tb-title">Trainingsplan &amp; Beratung – Termin wählen</h2>
+                    <h2 class="tb-title" id="tb-title"> Termin wählen</h2>
                     <p class="tb-subtitle">Wähle deinen Berater, einen verfügbaren Tag und eine Uhrzeit.</p>
 
                     <span class="tb-trainer-label">Berater/in wählen:</span>
@@ -181,7 +180,32 @@
             if (event.target === overlay) schliessen();
         });
         document.addEventListener("keydown", (event) => {
-            if (istGeoeffnet && event.key === "Escape") schliessen();
+            if (!istGeoeffnet) return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                schliessen();
+                return;
+            }
+            if (event.key !== "Tab") return;
+
+            // Tab und Shift+Tab bleiben zwischen den sichtbaren Dialog-Buttons.
+            const buttons = [...overlay.querySelectorAll("button:not(:disabled)")]
+                .filter((button) => button.getClientRects().length > 0);
+            const erster = buttons[0];
+            const letzter = buttons[buttons.length - 1];
+            const fokus = document.activeElement;
+            if (!overlay.contains(fokus) || (event.shiftKey && fokus === erster)) {
+                event.preventDefault();
+                (event.shiftKey ? letzter : erster).focus();
+            } else if (!event.shiftKey && fokus === letzter) {
+                event.preventDefault();
+                erster.focus();
+            }
+        });
+        document.addEventListener("focusin", (event) => {
+            if (istGeoeffnet && !overlay.contains(event.target)) {
+                overlay.querySelector(".tb-close").focus();
+            }
         });
 
         // Buchen
@@ -273,9 +297,14 @@
         kalenderZeichnen();
         zeitenZeichnen();
         buchButtonAktualisieren();
+        overlay.querySelector(".tb-day--ausgewaehlt")?.focus();
     }
 
     function zeitKlicken(zeit) {
+        if (!zeitenFuer(zustand.beraterId, zustand.datum).includes(zeit)) {
+            auswahlAktualisieren();
+            return;
+        }
         zustand.zeit = zeit;
         overlay.querySelectorAll(".tb-time-chip").forEach((chip) => {
             chip.classList.toggle("is-active", chip.dataset.zeit === zeit);
@@ -285,6 +314,11 @@
 
     function buchen() {
         if (!zustand.datum || !zustand.zeit || zustand.beraterId == null) return;
+        // Die Seite kann seit der Auswahl offen geblieben sein.
+        if (!zeitenFuer(zustand.beraterId, zustand.datum).includes(zustand.zeit)) {
+            auswahlAktualisieren();
+            return;
+        }
         const ziel =
             ZIELSEITE +
             "?berater=" + encodeURIComponent(zustand.beraterId) +
@@ -293,6 +327,15 @@
         window.location.href = ziel;
     }
 
+    function auswahlAktualisieren() {
+        zustand.zeit = null;
+        kalenderZeichnen();
+        zeitenZeichnen();
+        legendeAktualisieren();
+        buchButtonAktualisieren();
+        overlay.querySelector(".tb-close").focus();
+    }
+
     // ----- Zeichnen -----
 
     function kalenderZeichnen() {

json/berater.json

@@ -21,7 +21,7 @@
                     "url": "https://instagram.com"
                 },
                 {
-                    "text": "Trainingsplan buchen",
+                    "text": "Termin buchen",
                     "url": "https://tri-hub.de/booking",
                     "aktion": "terminbuchung"
                 }
@@ -44,7 +44,7 @@
                     "url": "https://instagram.com"
                 },
                 {
-                    "text": "Trainingsplan buchen",
+                    "text": "Termin buchen",
                     "url": "https://tri-hub.de/booking",
                     "aktion": "terminbuchung"
                 }