diff --git a/css/beratung.css b/css/beratung.css index 74020db..351c59b 100644 --- a/css/beratung.css +++ b/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 { diff --git a/css/leistungen.css b/css/leistungen.css index 9b33f62..638f941 100644 --- a/css/leistungen.css +++ b/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); - border: 1px solid rgba(248, 250, 252, 0.08); + background: var(--accent); + border: none; border-radius: 8px; padding: 0.85rem 1rem; cursor: pointer; + text-decoration: none; transition: filter 0.15s ease; } diff --git a/css/terminbuchung.css b/css/terminbuchung.css index 739f884..c575129 100644 --- a/css/terminbuchung.css +++ b/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; } -} \ No newline at end of file +} diff --git a/html/kontakt.html b/html/kontakt.html index 624412d..6798c4a 100644 --- a/html/kontakt.html +++ b/html/kontakt.html @@ -146,7 +146,7 @@
-

Kontaktinformationen

+

Kontaktinformationen

@@ -238,7 +238,7 @@
- © 2026 Tri-hub GmbH + © 2026 TRI-HUB GmbH Impressum · Datenschutz · diff --git a/html/paket-PREMIUM.html b/html/paket-premium.html similarity index 98% rename from html/paket-PREMIUM.html rename to html/paket-premium.html index c3baf74..182d5fa 100644 --- a/html/paket-PREMIUM.html +++ b/html/paket-premium.html @@ -58,7 +58,6 @@

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.

Premium-Paket ansehen - Was ist enthalten?
diff --git a/html/paket-STANDARD.html b/html/paket-standard.html similarity index 98% rename from html/paket-STANDARD.html rename to html/paket-standard.html index fa6838a..d7fe93b 100644 --- a/html/paket-STANDARD.html +++ b/html/paket-standard.html @@ -58,7 +58,6 @@

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.

Standard-Paket ansehen - Was ist enthalten?
diff --git a/html/paket-starter.html b/html/paket-starter.html index c387558..30a6866 100644 --- a/html/paket-starter.html +++ b/html/paket-starter.html @@ -58,7 +58,6 @@

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.

Starter-Paket ansehen - Was ist enthalten?
diff --git a/html/terminbuchung.html b/html/terminbuchung.html index ed134bc..78b4076 100644 --- a/html/terminbuchung.html +++ b/html/terminbuchung.html @@ -38,8 +38,6 @@ aria-label="Menü öffnen">☰ @@ -176,8 +174,8 @@
- Anfrage - senden +
@@ -215,7 +213,7 @@
- © 2026 Tri-hub GmbH + © 2026 TRI-HUB GmbH Impressum · Datenschutz · @@ -228,13 +226,12 @@ - Anfrage vorbereitet -

Terminanfrage

-

Deine Terminanfrage wurde an dein E-Mail-Programm übergeben. Sende sie dort - bitte ab. Wir prüfen deinen Wunschtermin und schicken dir anschließend eine Bestätigung per E-Mail.

+ Termin gebucht +

Terminbestätigung

+

Dein Termin wurde erfolgreich gebucht. Eine Bestätigung wurde an die angegebene E-Mail-Adresse gesendet.

OK, zur Übersicht
- \ No newline at end of file + diff --git a/index.html b/index.html index afa8159..2987adc 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,7 @@
- © 2026 Tri-hub GmbH + © 2026 TRI-HUB GmbH Impressum · Datenschutz · diff --git a/js/terminbuchung-form.js b/js/terminbuchung-form.js index 71499c3..c108b65 100644 --- a/js/terminbuchung-form.js +++ b/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 = ` -
- Kein Termin ausgewählt -

- Du hast noch keinen Termin im Kalender gewählt. - Gehe bitte zurück zur Startseite und öffne dort über einen - Berater die Terminbuchung. -

-
- `; - 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 zeitRoh = params.get("zeit") || ""; - let terminText = "–"; - if (datumRoh && zeitRoh) { - const [jahr, monat, tag] = datumRoh.split("-").map(Number); - if (jahr && monat && tag) { - const formatiert = new Intl.DateTimeFormat("de-DE", { - weekday: "long", - day: "2-digit", - month: "2-digit", - year: "numeric" - }).format(new Date(jahr, monat - 1, tag)); - terminText = formatiert + " um " + zeitRoh.replace(":", ".") + " Uhr"; - } + const beraterId = params.get("berater"); + const datum = params.get("datum"); + const zeit = params.get("zeit"); + let termin = null; + + function terminIstGueltig() { + return termin !== null && termin.zeitpunkt > Date.now(); } - 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 = ` +
+ Bitte einen gültigen Termin wählen +

+ Wähle auf der Startseite einen Berater, + einen verfügbaren Tag und eine Uhrzeit. +

+
+ `; + 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) { - event.preventDefault(); + sendenButton.addEventListener("click", function () { + 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 = - "mailto:" + EMAIL_TARGET + - "?subject=" + encodeURIComponent("Terminanfrage: " + terminText) + - "&body=" + encodeURIComponent(body); + sendenButton.disabled = false; formularBereich.hidden = true; pruefBereich.hidden = false; pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" }); @@ -379,4 +357,5 @@ } updateSubmitState(); + terminLaden(); })(); diff --git a/js/terminbuchung.js b/js/terminbuchung.js index 5f35e54..d479385 100644 --- a/js/terminbuchung.js +++ b/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]) => { - 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])); - }); + return Object.keys(tabelle).some((schluessel) => zeitenFuer(beraterId, schluessel).length > 0); } function istVerfuegbar(jahr, monat, tag) { @@ -121,7 +120,7 @@