+ Entdecke unsere Pakete für deine Ernährung im Alltag und
+ Sport.
+
+=======
-
- ${pkg.type} · ${pkg.durationLabel}
- ${pkg.badge}
-
-
-
${pkg.title}
-
${pkg.subtitle}
-
-
- ${pkg.price.toFixed(2)} €
- inkl. ${pkg.taxRate}% MwSt. (${pkg.billingInterval})
-
-
- ${variantsHtml}
-
-
-
-
Für wen ist dieses Paket ideal?
-
- ${pkg.targetGroup.map((item) => `- ${item}
`).join("")}
-
-
-
-
-
Das ist im Paket enthalten
-
- ${pkg.includedFeatures.map((feat) => `- ${feat}
`).join("")}
-
-
-
-
-
So läuft deine Begleitung ab
- ${pkg.processSteps
- .map(
- (s) => `
-
-
${s.step}: ${s.text}
+
+
+
+ ${pkg.type} · ${pkg.durationLabel}
+
+ ${
+ pkg.badge
+ ? `${pkg.badge}`
+ : ""
+ }
- `,
- )
- .join("")}
-
-
-
-
- `;
+
${pkg.title}
+
${pkg.subtitle}
+
+
+
+ ${pkg.price.toFixed(2)} €
+
+
+ inkl. ${pkg.taxRate}% MwSt. (${pkg.billingInterval})
+
+
+
+ ${variantsHtml}
+
+
+
+
+ Für wen ist dieses Paket ideal?
+
+
+ ${pkg.targetGroup
+ .map((item) => `- ${item}
`)
+ .join("")}
+
+
+
+
+
+ Das ist im Paket enthalten
+
+
+ ${pkg.includedFeatures
+ .map((feature) => `- ${feature}
`)
+ .join("")}
+
+
+
+
+
+ So läuft deine Begleitung ab
+
+ ${pkg.processSteps
+ .map(
+ (step) => `
+
+ ${step.step}:
+
+ ${step.text}
+
+
+ `,
+ )
+ .join("")}
+
+
+
+
+
+
+ Dieser Buchungsablauf ist eine Simulation. Es erfolgt keine
+ Abbuchung und keine verbindliche Beratungsbuchung.
+
+
+
+
+
+ `;
const variantSelect = document.getElementById("variant-select");
const displayedPrice = document.getElementById("displayed-price");
- if (variantSelect && displayedPrice) {
- variantSelect.addEventListener("change", (e) => {
- const selectedOption = e.target.selectedOptions[0];
- const newPrice = parseFloat(
- selectedOption.getAttribute("data-price"),
- );
- displayedPrice.textContent = `${newPrice.toFixed(2)} €`;
+ const bookingBtn = document.getElementById("proceed-to-booking-btn");
+ const bookingRoot = document.getElementById("booking-root");
+ const bookingStatus = document.getElementById("booking-status");
+
+ let cleanupBooking;
+
+ function prepareBooking() {
+ cleanupBooking?.();
+ bookingStatus.textContent = "";
+
+ cleanupBooking = mountBookingPage(bookingRoot, {
+ packageId: pkg.id,
+ variantId: variantSelect?.value,
});
}
- const bookingBtn = document.getElementById("proceed-to-booking-btn");
+ function updatePrice() {
+ if (!variantSelect) return;
+
+ const selectedOption = variantSelect.selectedOptions[0];
+ const price = Number(selectedOption.dataset.price);
+
+ displayedPrice.textContent = `${price.toFixed(2)} €`;
+ }
+
+ updatePrice();
+ prepareBooking();
+
+ variantSelect?.addEventListener("change", () => {
+ updatePrice();
+ prepareBooking();
+ });
+
bookingBtn.addEventListener("click", () => {
- const params = new URLSearchParams({ id: pkg.id });
- if (variantSelect) params.set("variant", variantSelect.value);
- window.location.href = `booking.html?${params}`;
+ const dialog = bookingRoot.querySelector(".booking__dialog");
+
+ if (!dialog) {
+ bookingStatus.textContent =
+ "Das Buchungsformular ist noch nicht verfügbar. Bitte beachte den Ladehinweis im Buchungsbereich.";
+ return;
+ }
+
+ if (dialog.open) return;
+
+ bookingStatus.textContent = "";
+
+ dialog.addEventListener(
+ "close",
+ () => {
+ bookingBtn.focus();
+ },
+ { once: true },
+ );
+
+ dialog.showModal();
+ dialog.querySelector('[name="name"]').focus();
});
});
diff --git a/src/main.js b/src/main.js
index a8ccb3d..83e72f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,7 @@
import "./styles/styles.css";
+<<<<<<< HEAD
+=======
import "./components/navigationsbar/navigation.js";
+>>>>>>> dev
document.querySelector("#year").textContent = new Date().getFullYear();
diff --git a/src/styles/packages.css b/src/styles/packages.css
index da50358..c40e4f5 100644
--- a/src/styles/packages.css
+++ b/src/styles/packages.css
@@ -1,123 +1,10 @@
-:root {
- --bg-dark: #0d0d1a;
- --bg-card: #1a1a2e;
- --accent-teal: #10b981;
- --text-white: #ffffff;
- --text-lightgray: #f8fafc;
- --text-muted: #94a3b8;
-
- --font-display: "Playfair Display", serif;
- --font-body: "Inter", system-ui, sans-serif;
+#booking-root .booking__open {
+ display: none;
}
-
-.packages-section {
- background-color: var(--bg-dark);
- padding: 4rem 2rem;
- font-family: var(--font-body);
- color: var(--text-lightgray);
-}
-
-.packages-container {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
- gap: 2rem;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.package-card {
- background-color: var(--bg-card);
- border-radius: 12px;
- padding: 2rem;
- display: flex;
- flex-direction: column;
- position: relative;
- border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.package-type-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 1rem;
-}
-
-.package-type {
- color: var(--text-muted);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
-}
-
-.package-highlight {
- background-color: rgba(16, 185, 129, 0.1);
- color: var(--accent-teal);
- font-size: 0.7rem;
- padding: 0.25rem 0.75rem;
- border-radius: 9999px;
- font-weight: 600;
- text-transform: uppercase;
-}
-
-.package-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- color: var(--text-white);
- margin-bottom: 1rem;
- line-height: 1.2;
-}
-
-.package-desc {
- color: var(--text-lightgray);
- font-size: 0.95rem;
- line-height: 1.5;
- margin-bottom: 2rem;
-}
-
-.package-details-box {
- background-color: rgba(255, 255, 255, 0.03);
- border-radius: 8px;
- padding: 1.5rem;
- margin-bottom: 2rem;
- flex-grow: 1; /* Schiebt den Button immer ganz nach unten */
-}
-
-.detail-item {
- margin-bottom: 1.25rem;
-}
-
-.detail-item:last-child {
- margin-bottom: 0;
-}
-
-.detail-title {
- color: var(--text-white);
- font-weight: 600;
- font-size: 0.9rem;
- margin-bottom: 0.5rem;
-}
-
-.detail-text {
- color: var(--text-muted);
- font-size: 0.85rem;
- line-height: 1.5;
-}
-
-.package-btn {
- display: block;
- text-align: center;
- background-color: transparent;
- color: var(--text-white);
- border: 1px solid rgba(255, 255, 255, 0.2);
- padding: 1rem;
- border-radius: 8px;
- text-decoration: none;
- font-weight: 500;
- transition: all 0.2s ease;
-}
-
-.package-btn:hover {
- background-color: rgba(255, 255, 255, 0.05);
- border-color: var(--accent-teal);
- color: var(--accent-teal);
+/* Zusätzliche Booking-Übersicht ausblenden, Dialog erhalten. */
+#booking-root > .booking > h2,
+#booking-root .booking__package,
+#booking-root .booking__payment,
+#booking-root .booking__open {
+ display: none;
}