Merge remote-tracking branch 'origin/V-S-US-01-03-Pakete-Online-buchen' into US-03-01-Online-Terminbuchung

- Added new HTML page for appointment booking (terminbuchung.html) with form for user input and summary display.
- Created JavaScript file (terminbuchung-form.js) to handle form validation, tag management for allergies, and email submission.
- Developed JavaScript file (terminbuchung.js) for calendar pop-up functionality on the homepage, allowing users to select available dates and times.
- Introduced JSON file (terminbuchung.json) to store availability data for trainers, linking dates to available time slots.

css/berater.css

@@ -78,6 +78,7 @@
     flex-direction: column;
 }
 
+/* ---------- Profilbild, Name und Rolle innerhalb einer Karte ---------- */
 .berater-section .berater-image-wrapper {
     background-color: var(--background);
     border-radius: 10px;
@@ -112,6 +113,7 @@
     font-weight: 600;
 }
 
+/* ---------- Biografie und ergänzende Angaben aus berater.json ---------- */
 .berater-section .berater-bio-box {
     /* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */
     background-color: transparent;

css/beratung.css

@@ -278,11 +278,10 @@
 /* ---------- Footer ---------- */
 
 .beratung-bereich .logo {
-    font-family: var(--font-display);
+    font-family: var(--font-display);;
-    font-weight: 700;
     font-size: 1.35rem;
     letter-spacing: -0.02em;
-    color: var(--foreground);
+    color: var(--text-muted);
     text-decoration: none;
     white-space: nowrap;
 }

css/kontakt.css

@@ -0,0 +1,644 @@
+/* Dennis: Kontaktseite – Regeln sind auf .kontakt-seite begrenzt.
+   Tokens entsprechen css/beratung.css (tri-hub.de-Farbwelt). */
+
+.kontakt-seite {
+    /* Farben – Tokens von tri-hub.de */
+    --background: #0714198a;
+    --background-rgb: 7 20 25;
+    --background-panel: #152027;
+    --text-primary: #ffffff;
+    --text-muted: #9ba7aa;
+    --accent: #4597A3;
+    --accent-warm: #f7c230;
+    --border: rgba(234, 8, 8, 0.1);
+
+    /* Typografie */
+    --font-display: "Sora", sans-serif;
+    --font-body: "DM Sans", Arial, Helvetica, sans-serif;
+
+    /* Layout */
+    --container: 1120px;
+    --radius: 1.1rem;
+}
+
+/* ---------- Basic ---------- */
+
+.kontakt-seite,
+.kontakt-seite *,
+.kontakt-seite::before,
+.kontakt-seite *::before,
+.kontakt-seite::after,
+.kontakt-seite *::after {
+    box-sizing: border-box;
+}
+
+.kontakt-seite {
+    min-height: 100vh;
+    margin: 0;
+    background-color: var(--background);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    line-height: 1.625;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+    isolation: isolate;
+    scroll-behavior: smooth;
+}
+
+/* Licht */
+.kontakt-seite::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background:
+        radial-gradient(900px 520px at 78% -10%, rgba(0, 179, 194, 0.13), transparent 65%),
+        radial-gradient(700px 480px at -10% 30%, rgba(35, 137, 148, 0.1), transparent 60%),
+        radial-gradient(600px 420px at 90% 95%, rgba(247, 194, 48, 0.05), transparent 60%);
+    pointer-events: none;
+}
+
+.kontakt-seite h1,
+.kontakt-seite h2,
+.kontakt-seite h3 {
+    margin-top: 0;
+    font-family: var(--font-display);
+    color: var(--text-primary);
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+}
+
+.kontakt-seite p {
+    margin: 0 0 1em;
+}
+
+.kontakt-seite .container {
+    width: min(100% - 48px, var(--container));
+    margin-inline: auto;
+}
+
+/* ---------- Typo-Helfer ---------- */
+
+.kontakt-seite .kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 18px;
+}
+
+.kontakt-seite .kicker::before {
+    content: "";
+    width: 28px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--accent);
+}
+
+.kontakt-seite .lead {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    max-width: 660px;
+}
+
+/* Die Navigationsleiste oben wird von css/navigation.css gestylt (.site-navigation). */
+
+/* ---------- Hero ---------- */
+
+.kontakt-seite .hero {
+    padding: 72px 0 88px;
+}
+
+.kontakt-seite .hero__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 48px;
+    align-items: center;
+}
+
+.kontakt-seite .hero h1 {
+    font-size: clamp(2.6rem, 6vw, 4rem);
+    font-weight: 500;
+    letter-spacing: -0.04em;
+    margin-bottom: 20px;
+}
+
+.kontakt-seite .hero__text {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    max-width: 560px;
+}
+
+.kontakt-seite .hero__image {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: calc(var(--radius) + 1rem);
+    border: 1px solid var(--border);
+    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
+}
+
+.hero--ribbon {
+    position: relative;
+    background-image: url("../images/trihub-ribbon-abstract.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--background); /* Fallback / Grundton */
+    isolation: isolate;        /* hält z-index sauber */
+}
+
+.hero--ribbon::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+                linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
+        linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%);
+    content: ""; /* dunkler Schleier */
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hero--ribbon .hero__grid {
+    position: relative;
+    z-index: 1;
+}
+
+/* ---------- Sektionen ---------- */
+
+.kontakt-seite .section {
+    padding: 88px 0;
+}
+
+.kontakt-seite .section + .section {
+    border-top: 1px solid var(--border);
+}
+
+.kontakt-seite .section-head {
+    max-width: 720px;
+    margin-bottom: 48px;
+}
+
+.kontakt-seite .section-head h2 {
+    font-size: clamp(1.9rem, 4vw, 2.7rem);
+    margin-bottom: 16px;
+}
+
+/* ---------- Karten (Nachricht) ---------- */
+
+.kontakt-seite .cards-3 {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 24px;
+}
+
+.kontakt-seite .card {
+    background-color: var(--background-panel);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 0.4rem);
+    padding: 28px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.kontakt-seite .card__icon {
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    font-size: 1.5rem;
+    background: rgba(69, 151, 163, 0.2);
+}
+
+.kontakt-seite .card--warm .card__icon {
+    background: rgba(247, 194, 48, 0.16);
+}
+
+.kontakt-seite .card--neutral .card__icon {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.kontakt-seite .card h3 {
+    font-size: 1.08rem;
+    margin-bottom: 8px;
+}
+
+.kontakt-seite .card p {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+/* ---------- Formular + Kontaktinfos ---------- */
+
+.kontakt-seite .kontakt-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 48px;
+    align-items: start;
+}
+
+.kontakt-seite form {
+    margin-top: 32px;
+    display: grid;
+    gap: 20px;
+}
+
+.kontakt-seite .field label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.kontakt-seite .field input,
+.kontakt-seite .field select,
+.kontakt-seite .field textarea {
+    width: 100%;
+    padding: 12px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 0.95rem;
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.kontakt-seite .field input::placeholder,
+.kontakt-seite .field textarea::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.kontakt-seite .field input:focus,
+.kontakt-seite .field select:focus,
+.kontakt-seite .field textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.kontakt-seite .field select option {
+    background: #0b1a20;
+    color: var(--text-primary);
+}
+
+.kontakt-seite .field textarea {
+    min-height: 140px;
+    resize: vertical;
+}
+
+/* kontakt.js setzt die Zustandsklassen für ungültige Felder und Rückmeldungen. */
+.kontakt-seite .field input.invalid,
+.kontakt-seite .field select.invalid,
+.kontakt-seite .field textarea.invalid {
+    border-color: #ef4444;
+}
+
+.kontakt-seite .field input.valid,
+.kontakt-seite .field textarea.valid {
+    border-color: #22c55e;
+}
+
+.kontakt-seite .field__error {
+    display: none;
+    margin-top: 6px;
+    font-size: 0.8rem;
+    color: #f87171;
+}
+
+.kontakt-seite .field__hint {
+    display: none;
+    margin-top: 6px;
+    font-size: 0.8rem;
+    color: #4ade80;
+}
+
+.kontakt-seite .field.has-error .field__error {
+    display: block;
+}
+
+.kontakt-seite .field.is-ok .field__hint {
+    display: block;
+}
+
+/* ---------- Button ---------- */
+
+.kontakt-seite .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.8rem 1.5rem;
+    border-radius: 999px;
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.2;
+    text-decoration: none;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.18s ease, box-shadow 0.18s ease,
+        background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
+}
+
+.kontakt-seite .btn-accent {
+    background: var(--accent);
+    color: #03242b;
+}
+
+.kontakt-seite .btn-accent:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28);
+}
+
+.kontakt-seite .btn-block {
+    width: 100%;
+}
+
+.kontakt-seite .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.kontakt-seite .form-status {
+    display: none;
+    font-size: 0.9rem;
+}
+
+.kontakt-seite .form-status.is-visible {
+    display: block;
+}
+
+.kontakt-seite .form-status--ok {
+    color: #4ade80;
+}
+
+.kontakt-seite .form-status--error {
+    color: #f87171;
+}
+
+/* ---------- Kontaktinformations-Karten ---------- */
+
+.kontakt-seite .info-stack {
+    display: grid;
+    gap: 20px;
+}
+
+.kontakt-seite .info-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    background-color: var(--background-panel);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 0.4rem);
+    padding: 22px;
+    transition: border-color 0.15s ease;
+}
+
+.kontakt-seite .info-card:hover {
+    border-color: rgba(69, 151, 163, 0.5);
+}
+
+.kontakt-seite .info-card__icon {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    margin-top: 2px;
+    border-radius: 10px;
+    background: rgba(69, 151, 163, 0.2);
+    color: var(--accent);
+}
+
+.kontakt-seite .info-card__label {
+    font-size: 0.7rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+}
+
+.kontakt-seite .info-card a,
+.kontakt-seite .info-card p {
+    color: var(--text-primary);
+    font-weight: 500;
+    text-decoration: none;
+    margin: 0;
+}
+
+.kontakt-seite .info-card a:hover {
+    color: var(--accent);
+}
+
+.kontakt-seite .info-card p small,
+.kontakt-seite .info-card p.info-sub {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: var(--text-muted);
+}
+
+/* ---------- Socials ---------- */
+
+.kontakt-seite .socials {
+    display: flex;
+    gap: 12px;
+}
+
+.kontakt-seite .socials a {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-primary);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.8rem;
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.kontakt-seite .socials a:hover {
+    border-color: var(--accent);
+    background: rgba(69, 151, 163, 0.12);
+}
+
+/* ---------- Standort / Karte ---------- */
+
+.kontakt-seite .map-frame {
+    border-radius: calc(var(--radius) + 0.9rem);
+    border: 1px solid var(--border);
+    overflow: hidden;
+    height: 500px;
+    background: var(--background-panel);
+}
+
+.kontakt-seite .map-frame iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+/* ---------- Footer ---------- */
+
+.kontakt-seite .logo {
+    font-family: var(--font-display);
+    font-size: 1.35rem;
+    letter-spacing: -0.02em;
+    color: var(--text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.kontakt-seite .logo span {
+    color: var(--accent);
+}
+
+.kontakt-seite .site-footer {
+    margin-top: 96px;
+    padding: 64px 0 40px;
+    border-top: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.015);
+}
+
+.kontakt-seite .footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 48px;
+}
+
+.kontakt-seite .footer-brand p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    max-width: 340px;
+    margin-top: 14px;
+}
+
+.kontakt-seite .footer-col h3 {
+    font-size: 0.85rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 16px;
+}
+
+.kontakt-seite .footer-col ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.kontakt-seite .footer-col a {
+    display: block;
+    padding: 5px 0;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.92rem;
+    transition: color 0.15s ease;
+}
+
+.kontakt-seite .footer-col a:hover {
+    color: var(--text-primary);
+}
+
+.kontakt-seite .footer-legal {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 48px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.kontakt-seite .footer-legal a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.kontakt-seite .footer-legal a:hover {
+    color: var(--text-primary);
+}
+
+/* ---------- Scroll-Reveal ---------- */
+
+.kontakt-seite .reveal {
+    opacity: 0;
+    transform: translateY(18px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+    
+}
+
+.kontakt-seite .reveal.visible {
+    opacity: 1;
+    transform: none;
+}
+
+/* ---------- Responsiv ---------- */
+
+@media (max-width: 980px) {
+    .kontakt-seite .hero__grid,
+    .kontakt-seite .kontakt-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .kontakt-seite .cards-3 {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .kontakt-seite .footer-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 760px) {
+    .kontakt-seite .section {
+        padding: 64px 0;
+    }
+
+    .kontakt-seite .hero {
+        padding: 56px 0 64px;
+    }
+
+    .kontakt-seite .footer-grid {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+
+    .kontakt-seite .map-frame {
+        height: 380px;
+    }
+}
+
+/* ---------- Reduzierte Bewegung ---------- */
+
+@media (prefers-reduced-motion: reduce) {
+    .kontakt-seite {
+        scroll-behavior: auto;
+    }
+
+    .kontakt-seite .reveal {
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+
+    .kontakt-seite,
+    .kontakt-seite * {
+        transition-duration: 0.01ms !important;
+    }
+}

css/leistungen.css

@@ -9,7 +9,7 @@
    ========================================================== */
 
 .pakete {
-    /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */
+   /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */
     --background: #0714198a; /* früher "bg-dark */
     --background-rgb: 7 20 25;  /* gleiche Basisfarbe wie --background, 
     aber ohne fixes Alpha – für Gradient-Stops 
@@ -67,7 +67,7 @@
 /* Kästchen nebeneinander, jede Karte für sich */
 .pakete .pakete__grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.5rem;
     align-items: stretch;
 }
@@ -75,15 +75,18 @@
 .pakete .paket-karte {
     display: flex;
     flex-direction: column;
+    min-width: 0;
     background: var(--background-panel);
     border: 1px solid rgba(248, 250, 252, 0.08);
     border-radius: 14px;
-    padding: 2rem 1.75rem;
+    padding: 0; /* Entfernt, damit das Bild oben bündig anliegt */
+    overflow: hidden;
     position: relative;
 }
 
+/* Empfehlung kommt aus der JSON-Datei; die Auswahlklasse setzt leistungen.js beim Klick. */
 .pakete .paket-karte--empfohlen {
-    border-color: var(--accent);
+    border-color: 1px solid rgba(248, 250, 252, 0.08);
     box-shadow: 0 0 0 1px var(--accent-soft);
 }
 
@@ -97,13 +100,46 @@
     background: var(--accent-soft);
     color: var(--accent);
     border: 1px solid var(--accent);
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    padding: 0.35rem 0.9rem;
+    padding: 0.25rem 0.65rem;
     border-radius: 999px;
-    margin: 0 0 1rem;
+    margin: 0; /* Kein Abstand nach unten, da er jetzt im Header neben der Überschrift steht */
+    line-height: 1;
+}
+.pakete .paket-karte__image-wrapper {
+    width: 100%;
+    /* Proportional skalieren, damit beim Spaltenwechsel keine extremen Bildausschnitte entstehen. */
+    aspect-ratio: 3 / 2;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.pakete .paket-karte__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+    display: block;
+}
+
+/* ---------- Karteninhalt: Paketname, Preis, Beschreibung und Leistungen ---------- */
+.pakete .paket-karte__body {
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.pakete .paket-karte__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+    flex-wrap: nowrap;
 }
 
 .pakete .paket-karte__name {
@@ -166,13 +202,14 @@
     background: var(--accent);
 }
 
+/* ---------- Paketauswahl und Tastaturfokus ---------- */
 .pakete .paket-karte__cta {
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-primary);
-    background: var(--accent);
+    background: var(--background);
-    border: none;
+    border: 1px solid rgba(248, 250, 252, 0.08);
     border-radius: 8px;
     padding: 0.85rem 1rem;
     cursor: pointer;
@@ -189,12 +226,20 @@
     outline-offset: 2px;
 }
 
+/* ---------- Spaltenwechsel: drei, zwei, dann eine; Empfehlung bleibt mobil zuerst ---------- */
 @media (max-width: 860px) {
     .pakete .pakete__grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
     .pakete .paket-karte--empfohlen {
         order: -1;
     }
 }
+
+@media (max-width: 620px) {
+    .pakete .pakete__grid {
+        grid-template-columns: minmax(0, 480px);
+        justify-content: center;
+    }
+}

css/navigation.css

@@ -0,0 +1,261 @@
+/* Shahnam und Vincent: Gemeinsame Navigation für US 04-05. */
+:root {
+    /* navigation.js ergänzt den tatsächlich gemessenen Abstand für Anker-Sprünge. */
+    --navigation-height: 99px;
+    scroll-padding-top: calc(var(--navigation-offset, var(--navigation-height)) + 16px);
+}
+
+.site-navigation {
+    color-scheme: dark;
+    --background: #071419;
+    --background-panel: #152027;
+    --accent: #4597a3;
+    --accent-soft: rgb(69 151 163 / 14%);
+    --text-primary: #fff;
+    --text-muted: #7e858a;
+    --text-muted2: #b7bec2;
+    --border: rgb(255 255 255 / 16%);
+
+    /* Bleibt beim Scrollen sichtbar und behält ihren Platz im Layout. */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-top: 3px solid var(--background);
+    background: var(--background);
+    color: var(--text-primary);
+    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
+    line-height: 1.6;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
+}
+
+.site-navigation,
+.site-navigation * {
+    box-sizing: border-box;
+}
+
+/* ---------- Kopfzeile: Logo, Begleittext und Menü ---------- */
+.site-navigation__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
+    margin-inline: auto;
+}
+
+.site-navigation .brand {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+    min-height: calc(var(--navigation-height) - 3px);
+    padding-block: 8px;
+}
+
+/* ---------- Navigationslinks und ihre Klickflächen ---------- */
+.site-navigation__links ul {
+    display: flex;
+    align-items: center;
+    gap: clamp(60px, 2.5vw, 32px);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.site-navigation__links a,
+.site-navigation .navigation-disabled {
+    display: block;
+    padding-block: 10px;
+    padding-inline: 14px;
+    color: var(--text-muted);
+    font-size: 19px;
+    font-weight: 250;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+/* Hover-Highlight, übernommen aus der ursprünglichen Navigationsleiste in kontakt.css. */
+.site-navigation__links a {
+    border-radius: 8px;
+    transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.site-navigation__links a:hover,
+.site-navigation__links a:focus-visible {
+    background: rgb(255 255 255 / 6%);
+    color: var(--text-primary);
+}
+
+.site-navigation__links a:focus-visible,
+.site-navigation .menu-toggle:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+}
+
+.site-navigation .navigation-disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* ---------- Logo und Markenname ---------- */
+.site-navigation .brand__logo {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    border-radius: 22px;
+    overflow: hidden;
+    background: var(--text-primary);
+}
+
+.site-navigation .brand__logo img {
+    display: block;
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+    border-radius: inherit;
+}
+
+.site-navigation .brand__logo:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.site-navigation .brand__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.site-navigation .brand__name {
+    color: var(--text-muted);
+    font-size: 14px;
+    font-weight: 200;
+    line-height: 1.4;
+    letter-spacing: 0.25em;
+}
+
+.site-navigation .brand__label {
+    color: var(--text-muted2);
+    font-size: 17px;
+    font-weight: 300;
+    line-height: 1.4;
+}
+
+/* ---------- Menüknopf und Hintergrund für die kompakte Ansicht ---------- */
+.site-navigation .menu-toggle {
+    display: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: 26px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.site-navigation .menu-toggle:hover {
+    background: var(--accent-soft);
+}
+
+.site-navigation__backdrop {
+    display: none;
+}
+
+/* Der gleiche Grenzwert wird in navigation.js verwendet. */
+@media (max-width: 1100px) {
+    .site-navigation .menu-toggle {
+        display: inline-flex;
+    }
+
+    .site-navigation__links {
+        display: none;
+        position: absolute;
+        z-index: 2;
+        top: 100%;
+        right: 0;
+        width: min(360px, 100%);
+        max-height: calc(100vh - var(--navigation-offset, var(--navigation-height)));
+        max-height: calc(100dvh - var(--navigation-offset, var(--navigation-height)));
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding: 16px 24px 24px;
+        border: 1px solid var(--border);
+        border-top: 0;
+        border-radius: 0 0 0 16px;
+        background: var(--background);
+        box-shadow: -8px 12px 24px rgb(0 0 0 / 20%);
+    }
+
+    .site-navigation__links ul {
+        align-items: stretch;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .site-navigation__links a,
+    .site-navigation .navigation-disabled {
+        padding: 12px 16px;
+        border-radius: 8px;
+    }
+
+    .site-navigation__links a:hover {
+        background: var(--accent-soft);
+    }
+
+    .site-navigation.is-open .site-navigation__links,
+    .site-navigation.is-open .site-navigation__backdrop {
+        display: block;
+    }
+
+    .site-navigation__backdrop {
+        position: fixed;
+        z-index: 1;
+        inset: var(--navigation-offset, var(--navigation-height)) 0 0;
+        background: rgb(0 0 0 / 45%);
+    }
+}
+
+/* Kleinere Kopfzeile und Schriftgrößen auf schmalen Bildschirmen. */
+@media (max-width: 700px) {
+    :root {
+        --navigation-height: 81px;
+    }
+
+    .site-navigation__bar {
+        gap: 12px;
+    }
+
+    .site-navigation .brand {
+        gap: 12px;
+    }
+
+    .site-navigation .brand__logo {
+        width: 66px;
+        height: 62px;
+        border-radius: 17px;
+    }
+
+    .site-navigation .brand__logo img {
+        width: 46px;
+        height: 46px;
+    }
+
+    .site-navigation .brand__name {
+        font-size: 12px;
+    }
+
+    .site-navigation .brand__label {
+        font-size: 13px;
+    }
+}

css/paketdetails.css

@@ -0,0 +1,716 @@
+/* ==========================================================================
+   Paketdetails CSS (Standalone)
+   Inhalt: Layout, Hero, Facts, Leistungen, Ablauf, Preise & Footer
+   ========================================================================== */
+
+.paket-detail {
+    /* CSS Variablen */
+    --background: #0714198a;
+    --background-rgb: 7 20 25;
+    --background-panel: #152027;
+    --accent: #4597A3;
+    --accent-soft: rgba(69, 151, 163, 0.14);
+    --text-primary: #ffffff;
+    --text-muted: #7e858a;
+    --border: rgba(255, 255, 255, 0.12);
+
+    /* Typografie & Layout */
+    --font-display: "Sora", "Inter", system-ui, sans-serif;
+    --font-body: "Inter", "DM Sans", system-ui, sans-serif;
+    --radius: 1.1rem;
+
+    color-scheme: dark;
+    margin: 0;
+    background-color: var(--background);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    line-height: 1.625;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+    isolation: isolate;
+}
+
+.paket-detail *,
+.paket-detail *::before,
+.paket-detail *::after {
+    box-sizing: border-box;
+}
+
+.paket-detail p,
+.paket-detail h1,
+.paket-detail h2,
+.paket-detail h3 {
+    margin: 0;
+}
+
+.paket-detail h1,
+.paket-detail h2,
+.paket-detail h3 {
+    font-family: var(--font-display);
+    line-height: 1.2;
+}
+
+.paket-detail .container {
+    width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
+    margin-inline: auto;
+}
+
+/* ==========================================================================
+   Typo-Helfer & Globale Bausteine
+   ========================================================================== */
+
+.paket-detail .kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 18px;
+}
+
+.paket-detail .kicker::before {
+    content: "";
+    width: 28px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--accent);
+}
+
+.paket-detail .lead {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    max-width: 660px;
+}
+
+.paket-detail .muted {
+    color: var(--text-muted);
+}
+
+/* Buttons */
+.paket-detail .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.8rem 1.5rem;
+    border-radius: 999px;
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.2;
+    text-decoration: none;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
+}
+
+.paket-detail .btn-accent {
+    background: var(--accent);
+    color: #03242b;
+}
+
+.paket-detail .btn-accent:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28);
+}
+
+/* Sektionen, Boxen & Grids */
+.paket-detail .section {
+    padding: 96px 0;
+}
+
+.paket-detail .section-head {
+    max-width: 720px;
+    margin-bottom: 56px;
+}
+
+.paket-detail .section-head h2 {
+    font-size: clamp(1.9rem, 4vw, 2.7rem);
+    margin-bottom: 18px;
+}
+
+.paket-detail .grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
+}
+
+.paket-detail .box {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    hyphens: auto;
+    background-color: var(--background-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 32px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* ==========================================================================
+   Breadcrumb
+   ========================================================================== */
+
+.paket-detail .paket-detail__breadcrumb {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding-block: 24px;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.paket-detail__breadcrumb a,
+.paket-detail .paket-detail__text-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.paket-detail__breadcrumb > span {
+    font-size: 0.7rem;
+    letter-spacing: 0.18em;
+}
+
+.paket-detail .paket-detail__text-link {
+    display: inline-block;
+    color: var(--text-primary);
+    text-underline-offset: 5px;
+}
+
+.paket-detail__breadcrumb a:hover,
+.paket-detail .paket-detail__text-link:hover {
+    color: var(--accent);
+    text-decoration: underline;
+}
+
+/* ==========================================================================
+   Hero-Sektion
+   ========================================================================== */
+
+.paket-detail .paket-detail__hero {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    min-height: 600px;
+    border-block: 1px solid var(--border);
+    overflow: hidden;
+}
+
+.paket-detail .paket-detail__hero .hero__image,
+.paket-detail .paket-detail__hero::after {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    
+}
+
+/* Das Hintergrundbild erstreckt sich vollflächig über den gesamten Hero-Bereich
+Das ist die Standardausrichtung für für die Banner */
+.paket-detail__hero .hero__image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: right top; /* Bildschwerpunkt rechts ausrichten */
+    z-index: -2;
+}
+/* Starter-Paket Ausrichtung*/
+body.paket-starter .hero__image {
+    object-position: right top; 
+}
+
+/* 2. Standard-Paket */
+body.paket-standard .hero__image {
+    object-position: 60% 30%; 
+}
+
+/* 3. Premium-Paket */
+body.paket-premium .hero__image {
+    object-position: 30% center; 
+}
+
+.paket-detail__hero::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: "";
+    background:
+        linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
+        linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%);
+    content: "";
+}
+
+.paket-detail__hero .hero__inner {
+    display: flex;
+    flex-direction: column;
+    padding-block: clamp(32px, 5vh, 64px) 28px;
+    position: relative;
+    z-index: 1;
+}
+
+.paket-detail__hero .hero__content {
+    width: min(100%, 720px); /* Textbereich kompakt halten */
+    margin-block: auto;
+    padding-block: 24px 64px;
+}
+
+.paket-detail__hero h1 {
+    color: var(--text-primary);
+    max-width: 100%;
+    font-size: clamp(42px, 4.9vw, 88px);
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.055em;
+    text-wrap: balance;
+    overflow-wrap: break-word;
+}
+
+.paket-detail__hero h1 span {
+    display: block;
+    margin-top: 8px;
+    color: var(--text-primary);
+}
+
+.paket-detail__hero .hero__eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 26px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 650;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+}
+
+.paket-detail__hero .hero__eyebrow::before {
+    width: 28px;
+    height: 1px;
+    flex-shrink: 0;
+    background: currentColor;
+    content: "";
+}
+
+.paket-detail__hero .hero__description {
+    max-width: 65ch;
+    margin-top: 30px;
+    color: #d1d7df;
+    font-size: clamp(16px, 1.15vw, 19px);
+    line-height: 1.85;
+}
+
+.paket-detail__actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 24px;
+    margin-top: 30px;
+}
+
+/* ==========================================================================
+   Paketangaben / Facts
+   ========================================================================== */
+
+.paket-detail__facts {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 24px;
+    margin: 0;
+    padding: 36px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.paket-detail__facts > div {
+    padding-left: 20px;
+    border-left: 2px solid var(--accent);
+}
+
+.paket-detail__facts dt {
+    margin-bottom: 8px;
+    font-size: 0.7rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.paket-detail__facts dd {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.paket-detail__facts small {
+    display: block;
+    margin-top: 6px;
+    font-family: var(--font-body);
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Leistungen / Services
+   ========================================================================== */
+
+.paket-detail__services .box {
+    box-shadow: none;
+}
+
+.paket-detail__number {
+    display: block;
+    margin-bottom: 24px;
+    color: var(--accent);
+    font-size: 0.85rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.paket-detail__services h3 {
+    font-size: 1.25rem;
+    line-height: 1.4;
+    margin-bottom: 12px;
+}
+
+.paket-detail__services p {
+    margin-bottom: 0;
+    color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Ablauf & Listen
+   ========================================================================== */
+
+.paket-detail__process {
+    border-block: 1px solid var(--border);
+}
+
+.paket-detail__split {
+    display: grid;
+    grid-template-columns: 1.1fr 1fr;
+    gap: clamp(32px, 6vw, 88px);
+    align-items: start;
+}
+
+.paket-detail__split > * {
+    min-width: 0;
+}
+
+.paket-detail__split h2 {
+    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
+}
+
+.paket-detail .beratung-ablauf {
+    list-style: none;
+    counter-reset: schritt;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    gap: 32px;
+}
+
+.paket-detail .beratung-ablauf li {
+    counter-increment: schritt;
+    position: relative;
+    padding-left: 60px;
+}
+
+.paket-detail .beratung-ablauf li::before {
+    content: counter(schritt, decimal-leading-zero);
+    position: absolute;
+    left: 0;
+    top: 2px;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    font-family: var(--font-display);
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--accent);
+    background: rgba(0, 179, 194, 0.1);
+    border: 1px solid rgba(0, 179, 194, 0.3);
+}
+
+.paket-detail .beratung-ablauf strong {
+    display: block;
+    font-family: var(--font-display);
+    font-size: 1.02rem;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.paket-detail .beratung-ablauf p {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+/* ==========================================================================
+   Preisübersicht & Checkliste
+   ========================================================================== */
+
+.paket-detail .check-list {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0 0;
+    display: grid;
+    gap: 12px;
+}
+
+.paket-detail .check-list li {
+    position: relative;
+    padding-left: 34px;
+    color: var(--text-primary);
+}
+
+.paket-detail .check-list li::before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: var(--accent);
+    font-weight: bold;
+    font-size: 1.1rem;
+}
+
+.paket-detail .paket-detail__alternative {
+    margin-top: 32px;
+    color: var(--text-muted);
+}
+
+.paket-detail .paket-detail__summary {
+    border-color: var(--accent);
+    padding: clamp(24px, 3vw, 40px);
+}
+
+.paket-detail__summary h3 {
+    font-size: 1.5rem;
+    margin-bottom: 16px;
+}
+
+.paket-detail__price {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 10px;
+    color: var(--text-muted);
+}
+
+.paket-detail__price strong {
+    color: var(--text-primary);
+    font-family: var(--font-display);
+    font-size: 3rem;
+    line-height: 1.2;
+}
+
+.paket-detail__summary .check-list {
+    padding-block: 24px;
+    border-block: 1px solid var(--border);
+    margin-bottom: 28px;
+}
+
+.paket-detail__summary .btn {
+    width: 100%;
+    min-height: 48px;
+    text-align: center;
+}
+
+.paket-detail .paket-detail__note {
+    margin: 16px 0 0;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+.paket-detail .logo {
+    font-family: var(--font-display);
+    font-size: 1.35rem;
+    letter-spacing: -0.02em;
+    color: var(--text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.paket-detail .site-footer {
+    margin-top: 96px;
+    padding: 64px 0 40px;
+    border-top: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.015);
+}
+
+.paket-detail .footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 48px;
+}
+
+.paket-detail .footer-brand p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    max-width: 340px;
+    margin-top: 14px;
+}
+
+.paket-detail .footer-col h3 {
+    font-size: 0.85rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 16px;
+}
+
+.paket-detail .footer-col ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.paket-detail .footer-col a {
+    display: block;
+    padding: 5px 0;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.92rem;
+    transition: color 0.15s ease;
+}
+
+.paket-detail .footer-col a:hover {
+    color: var(--text-primary);
+}
+
+.paket-detail .footer-legal {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 48px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.paket-detail .footer-legal a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.paket-detail .footer-legal a:hover {
+    color: var(--text-primary);
+}
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+
+@media (max-width: 1100px) {
+    .paket-detail__hero::after {
+        background:
+            linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
+            linear-gradient(90deg, rgb(var(--background-rgb) / 92%), rgb(var(--background-rgb) / 70%) 65%, rgb(var(--background-rgb) / 48%));
+    }
+
+    .paket-detail__hero .hero__content {
+        max-width: 85%;
+    }
+}
+
+@media (max-width: 980px) {
+    .paket-detail .footer-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 900px) {
+    .paket-detail__facts {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 28px;
+    }
+
+    .paket-detail__split {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (max-width: 760px) {
+    .paket-detail .grid-2 {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .paket-detail .section {
+        padding: 72px 0;
+    }
+
+    .paket-detail .footer-grid {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+}
+
+@media (max-width: 700px) {
+    .paket-detail__hero .hero__image {
+        inset: 0;
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 60% bottom;
+        mask-image: none;
+    }
+
+    .paket-detail__hero::after {
+        background: linear-gradient(90deg, rgb(var(--background-rgb) / 87%), rgb(var(--background-rgb) / 65%)),
+            linear-gradient(0deg, var(--background), transparent 55%);
+    }
+
+    .paket-detail__hero .hero__content {
+        max-width: 100%;
+        padding-block: 12px 40px;
+    }
+
+    .paket-detail__hero .hero__eyebrow {
+        gap: 8px;
+        font-size: 10px;
+        letter-spacing: 0.11em;
+    }
+
+    .paket-detail__hero .hero__eyebrow::before {
+        width: 20px;
+    }
+
+    .paket-detail__hero .hero__description {
+        margin-top: 24px;
+    }
+
+    .paket-detail__actions {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .paket-detail__facts {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .paket-detail__facts > div {
+        padding-left: 12px;
+        border-left-width: 1px;
+    }
+
+    .paket-detail__facts dd {
+        font-size: 1.1rem;
+    }
+}

css/produktuebersicht.css

@@ -15,6 +15,7 @@
     background: var(--background);
 }
 
+/* ---------- Grundlayout: Der Hero nutzt die Fensterhöhe unter der Navigation ---------- */
 .produktuebersicht,
 .produktuebersicht *,
 .produktuebersicht::before,
@@ -27,8 +28,8 @@
 .produktuebersicht {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    min-height: calc(100vh - var(--navigation-height));
-    min-height: 100svh;
+    min-height: calc(100svh - var(--navigation-height));
     margin: 0;
     line-height: 1.6;
 }
@@ -43,62 +44,12 @@
     margin-inline: auto;
 }
 
-.produktuebersicht .site-header {
-    border-top: 3px solid var(--accent);
-}
-
-.produktuebersicht .brand {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    min-height: 96px;
-    padding-block: 8px;
-}
-
-.produktuebersicht .brand__logo {
-    display: grid;
-    place-items: center;
-    flex-shrink: 0;
-    width: 90px;
-    height: 80px;
-    border-radius: 22px;
-    background: #fff;
-}
-
-.produktuebersicht .brand__logo img {
-    display: block;
-    width: 60px;
-    height: 60px;
-    object-fit: contain;
-}
-
-.produktuebersicht .brand__text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-}
-
-.produktuebersicht .brand__name {
-    color: #8a9093;
-    font-size: 14px;
-    font-weight: 650;
-    line-height: 1.4;
-    letter-spacing: 0.25em;
-}
-
-.produktuebersicht .brand__label {
-    color: var(--text-muted);
-    font-size: 17px;
-    font-weight: 600;
-    line-height: 1.4;
-}
-
 .produktuebersicht .produktuebersicht__main {
     display: flex;
     flex: 1;
 }
 
+/* ---------- Hero-Bild und dunkle Verläufe für lesbaren Text ---------- */
 .produktuebersicht .hero {
     position: relative;
     isolation: isolate;
@@ -118,21 +69,29 @@
 }
 
 .produktuebersicht .hero__image {
-    object-fit: cover;
+    inset: 0 0 auto auto;
-    object-position: center 42%;
+    width: auto;
+    max-width: 94%;
+    height: 94%;
+    object-fit: contain;
+    object-position: right top;
+    mask-image: linear-gradient(to right, transparent, #000 18%),
+        linear-gradient(to bottom, #000 82%, transparent);
+    mask-composite: intersect;
 }
 
 .produktuebersicht .hero::after {
     /*background: var(--background);
     /* ich bekomme das nicht richtig hin muss Shahmad machen */
     background:
-                linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
+        linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
         linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%);
     content: "";
 }
 
 
 
+/* ---------- Überschrift, Einleitung und Ausrichtung im Hero ---------- */
 .produktuebersicht .hero__inner {
     display: flex;
     flex-direction: column;
@@ -150,7 +109,7 @@
     align-items: center;
     gap: 12px;
     margin-bottom: 26px;
-    color: #4597A3;
+    color: var(--text-muted);
     font-size: 11px;
     font-weight: 650;
     letter-spacing: 0.16em;
@@ -166,6 +125,7 @@
 }
 
 .produktuebersicht h1 {
+    color: var(--text-primary);
     max-width: 100%;
     font-size: clamp(42px, 4.9vw, 88px);
     font-weight: 550;
@@ -178,7 +138,7 @@
 .produktuebersicht h1 span {
     display: block;
     margin-top: 8px;
-    color: var(--accent);
+    color: var(--text-primary);
 }
 
 .produktuebersicht .hero__description {
@@ -189,6 +149,7 @@
     line-height: 1.85;
 }
 
+/* ---------- Vorteile und ergänzender Slogan unter dem Haupttext ---------- */
 .produktuebersicht .hero__details {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 250px;
@@ -252,6 +213,7 @@
     letter-spacing: -0.025em;
 }
 
+/* Reservierte Styles für den derzeit nicht eingebundenen Produkt-Footer. */
 .produktuebersicht .site-footer__inner {
     display: flex;
     align-items: center;
@@ -282,11 +244,8 @@
     background: var(--accent);
 }
 
+/* ---------- Anpassungen für Tablet und Mobilgeräte ---------- */
 @media (max-width: 1100px) {
-    .produktuebersicht .hero__image {
-        object-position: 80% center;
-    }
-
     .produktuebersicht .hero::after {
         background:
             linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
@@ -309,32 +268,14 @@
 }
 
 @media (max-width: 700px) {
-    .produktuebersicht .brand {
-        min-height: 78px;
-        gap: 12px;
-    }
-
-    .produktuebersicht .brand__logo {
-        width: 66px;
-        height: 62px;
-        border-radius: 17px;
-    }
-
-    .produktuebersicht .brand__logo img {
-        width: 46px;
-        height: 46px;
-    }
-
-    .produktuebersicht .brand__name {
-        font-size: 12px;
-    }
-
-    .produktuebersicht .brand__label {
-        font-size: 13px;
-    }
-
     .produktuebersicht .hero__image {
-        object-position: 85% center;
+        inset: 0;
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 60% bottom;
+        mask-image: none;
     }
 
     .produktuebersicht .hero::after {

css/site.css

@@ -1,3 +1,4 @@
+/* Gemeinsame Grundwerte für Übersichts- und Kontaktseite; Bereichsstile liegen in eigenen Dateien. */
 :root {
     color-scheme: dark;
     font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

html/kontakt.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kontakt | Ernährungsberatung für Triathleten | tri-hub</title>
+    <!-- Gemeinsame Schriften und Navigation; kontakt.css ergänzt die Styles dieser Seite. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="../css/site.css">
+    <link rel="stylesheet" href="../css/navigation.css">
+    <link rel="stylesheet" href="../css/kontakt.css">
+    <!-- Gemeinsames Menü sowie Formularprüfung und Scroll-Reveal für die Kontaktseite. -->
+    <script src="../js/navigation.js" defer></script>
+    <script src="../js/kontakt.js" defer></script>
+</head>
+
+<body>
+    <div class="kontakt-seite">
+        <!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
+        <header class="site-navigation">
+            <div class="site-navigation__bar">
+                <div class="brand">
+                    <a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
+                        <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
+                    </a>
+                    <div class="brand__text">
+                        <span class="brand__name">TRI-HUB</span>
+                        <span class="brand__label">Kontakt &amp; Unterstützung</span>
+                    </div>
+                </div>
+                <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
+                    aria-label="Menü öffnen">☰</button>
+                <nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
+                    <ul>
+                        <li><a href="#nachricht">Nachricht</a></li>
+                        <li><a href="#kontaktinfos">Kontaktinfos</a></li>
+                        <li><a href="#standort">Standort</a></li>
+                        <li><a href="../index.html">Zurück zur Übersicht</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="site-navigation__backdrop" aria-hidden="true"></div>
+        </header>
+
+        <main id="main-content">
+            <!-- Hero -->
+            <section class="hero hero--ribbon">
+                <div class="container hero__grid">
+                    <div class="reveal">
+                        <span class="kicker">Kontakt</span>
+                        <h1>Von der Frage zur richtigen Strategie</h1>
+                        <p class="hero__text">
+                            Du möchtest mehr über unsere Ernährungsberatung erfahren oder hast konkrete Fragen?
+                            Nimm Kontakt mit uns auf - gemeinsam finden wir heraus, was für dich und deine Ziele am besten passt. Wir freuen uns auf deine Nachricht!
+                        </p>
+                    </div>
+                    <div class="reveal">
+                        <img class="hero__image" src="../images/contact-support-trihub.png"
+                            alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
+                            height="1080">
+                    </div>
+                </div>
+            </section>
+
+            <!-- Nachricht: drei Karten -->
+            <section id="nachricht" class="section">
+                <div class="container">
+                    <div class="cards-3">
+                        <div class="card reveal">
+                            <div class="card__icon" aria-hidden="true">💬</div>
+                            <h3>Persönlicher Austausch</h3>
+                            <p>Wir nehmen uns Zeit für deine Fragen und Anliegen – schnell und unkompliziert.</p>
+                        </div>
+                        <div class="card card--warm reveal">
+                            <div class="card__icon" aria-hidden="true">⚡</div>
+                            <h3>Schnelle Antworten</h3>
+                            <p>Deine Fragen beantworten wir zeitnah – per Mail, Telefon oder persönlich.</p>
+                        </div>
+                        <div class="card card--neutral reveal">
+                            <div class="card__icon" aria-hidden="true">🤝</div>
+                            <h3>Echte Beziehung</h3>
+                            <p>Für uns zählt nicht nur die Antwort – sondern der Mensch hinter der Frage.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Kontaktinfos: Formular + Kontaktdaten -->
+            <section id="kontaktinfos" class="section">
+                <div class="container kontakt-grid">
+                    <div class="reveal">
+                        <span class="kicker">Nachricht</span>
+                        <h2>Schreib uns eine Nachricht</h2>
+
+                        <!-- kontakt.js prüft die Eingaben und öffnet zum Absenden das E-Mail-Programm. -->
+                        <form id="kontakt-formular" novalidate>
+                            <div class="field">
+                                <label for="kf-name">Name *</label>
+                                <input type="text" id="kf-name" name="name" placeholder="Dein Name" required>
+                                <p class="field__error">Bitte gib deinen Namen an.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="kf-email">Email *</label>
+                                <input type="email" id="kf-email" name="email" placeholder="deine@email.de" required>
+                                <p class="field__error">Bitte gib eine gültige E-Mail-Adresse an.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="kf-phone">Telefon</label>
+                                <input type="tel" id="kf-phone" name="phone" placeholder="06203/1764877">
+                            </div>
+
+                            <div class="field">
+                                <label for="kf-type">Anfrage-Typ *</label>
+                                <select id="kf-type" name="anfragetyp" required>
+                                    <option value="" selected disabled>Bitte wählen …</option>
+                                    <option value="ernaehrungsberatung">Ernährungsberatung anfragen</option>
+                                    <option value="kennenlerngespraech">Kennenlerngespräch vereinbaren</option>
+                                    <option value="allgemein">Allgemeine Fragen</option>
+                                </select>
+                                <p class="field__error">Bitte wähle einen Anfrage-Typ.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="kf-subject">Betreff *</label>
+                                <input type="text" id="kf-subject" name="betreff" placeholder="Worum geht es?" required>
+                                <p class="field__error">Bitte gib einen kurzen Betreff an.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="kf-message">Nachricht * (mind. 10 Zeichen)</label>
+                                <textarea id="kf-message" name="nachricht" rows="5" placeholder="Deine Nachricht…" required></textarea>
+                                <p class="field__error">Bitte beschreibe dein Anliegen in wenigen Sätzen.</p>
+                                <p class="field__hint">✓ Nachricht ist lang genug</p>
+                            </div>
+
+                            <button type="submit" class="btn btn-accent btn-block" disabled>Nachricht senden</button>
+                            <p id="form-status" class="form-status" role="status" aria-live="polite"></p>
+                        </form>
+                    </div>
+
+                    <div class="reveal">
+                        <h3 style="font-size: 1.25rem; margin-bottom: 24px;">Kontaktinformationen</h3>
+                        <div class="info-stack">
+                            <div class="info-card">
+                                <div class="info-card__icon" aria-hidden="true">✉</div>
+                                <div>
+                                    <p class="info-card__label">Allgemeine Fragen &amp; Beratung</p>
+                                    <a href="mailto:info@trihub.de">info@trihub.de</a>
+                                </div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card__icon" aria-hidden="true">✆</div>
+                                <div>
+                                    <p class="info-card__label">Telefon</p>
+                                    <a href="tel:+4962031764877">06203 / 1764877</a>
+                                </div>
+                            </div>
+
+                            <div class="info-card">
+                                <div class="info-card__icon" aria-hidden="true">⚲</div>
+                                <div>
+                                    <p class="info-card__label">Adresse</p>
+                                    <p>Schloßstr. 11
+                                        <span class="info-sub">68535 Edingen-Neckarhausen</span>
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="info-card">
+                                <div>
+                                    <p class="info-card__label" style="margin-bottom: 12px;">Folge uns auf</p>
+                                    <div class="socials">
+                                        <a href="https://www.facebook.com/profile.php?id=61569002603339" target="_blank"
+                                            rel="noopener noreferrer" aria-label="Tri-hub auf Facebook">FB</a>
+                                        <a href="https://www.linkedin.com/company/tri-hub-gmbh" target="_blank"
+                                            rel="noopener noreferrer" aria-label="Tri-hub auf LinkedIn">IN</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Standort -->
+            <section id="standort" class="section">
+                <div class="container">
+                    <div class="reveal">
+                        <span class="kicker">Standort</span>
+                        <h2 style="margin-bottom: 32px;">Unser Standort</h2>
+                        <div class="map-frame">
+                            <iframe
+                                title="Karte: Tri-hub, Schloßstr. 11, 68535 Edingen-Neckarhausen"
+                                src="https://www.openstreetmap.org/export/embed.html?bbox=8.5958662%2C49.4613437%2C8.6038662%2C49.4673437&amp;layer=mapnik&amp;marker=49.4643437%2C8.5998662"
+                                loading="lazy"></iframe>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Footer -->
+            <footer class="site-footer">
+                <div class="container">
+                    <div class="footer-grid">
+                        <div class="footer-brand">
+                            <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
+                            <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
+                                Ernährungsberatung.</p>
+                        </div>
+
+                        <div class="footer-col">
+                            <h3>Dieser Bereich</h3>
+                            <ul>
+                                <li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
+                                <li><a href="#kontaktinfos">Kontakt</a></li>
+                            </ul>
+                        </div>
+
+                        <div class="footer-col">
+                            <h3>Tri-hub</h3>
+                            <ul>
+                                <li><a href="https://tri-hub.de/">Start</a></li>
+                                <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
+                                <li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
+                                <li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
+                                <li><a href="https://tri-hub.de/wissen">Wissen</a></li>
+                                <li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="footer-legal">
+                        <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> ·
+                            <a href="https://tri-hub.de/agb">AGB</a>
+                        </span>
+                    </div>
+                </div>
+            </footer>
+        </main>
+    </div>
+</body>
+
+</html>

html/paket-PREMIUM.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Premium-Paket | Ernährungsberatung | Tri-hub</title>
+    <meta name="description" content="Volle Betreuung für ambitionierte Triathleten ab 50: Wöchentliche Beratungen, Supplement-Empfehlungen, Wettkampftag-Support & Priorität für 249 € pro Monat.">
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Sora:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="../css/site.css">
+    <link rel="stylesheet" href="../css/navigation.css">
+    <link rel="stylesheet" href="../css/paketdetails.css">
+    <script src="../js/navigation.js" defer></script>
+</head>
+
+<body class="paket-premium">
+    <!-- Gemeinsame Navigation -->
+    <header class="site-navigation">
+        <div class="site-navigation__bar">
+            <div class="brand">
+                <a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
+                    <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
+                </a>
+                <div class="brand__text">
+                    <span class="brand__name">TRI-HUB</span>
+                    <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
+                </div>
+            </div>
+            <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false" aria-label="Menü öffnen">☰</button>
+            <nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
+                <ul>
+                    <li><a href="../index.html#produktuebersicht">Übersicht</a></li>
+                    <li><a href="../index.html#leistungen">Pakete</a></li>
+                    <li><a href="../index.html#berater">Berater</a></li>
+                    <li><a href="../index.html#beratung">Infos</a></li>
+                    <li><a href="kontakt.html">Kontakt</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="site-navigation__backdrop" aria-hidden="true"></div>
+    </header>
+
+    <div class="beratung-bereich paket-detail">
+        <main id="main-content">
+
+            <!-- Einstieg / Hero -->
+            <section class="produktuebersicht paket-detail__hero" aria-labelledby="paket-title">
+                <div class="hero">
+                    <img class="hero__image" src="../images/paket-premium.jpg" alt="Ein engagierter Triathlet bereitet sich professionell auf seinen Wettkampf vor." width="1200" height="800" fetchpriority="high">
+                    <div class="container hero__inner">
+                        <div class="hero__content">
+                            <p class="hero__eyebrow">Ernährungsberatung · Premium</p>
+                            <h1 id="paket-title">Maximale Betreuung.<span>Keine Kompromisse.</span></h1>
+                            <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>
+                </div>
+            </section>
+
+            <!-- Fakten-Grid -->
+            <div class="container">
+                <dl class="paket-detail__facts" aria-label="Premium auf einen Blick">
+                    <div><dt>Dein Paket</dt><dd>Premium<small>Volle Betreuung</small></dd></div>
+                    <div><dt>Monatspreis</dt><dd>249 €<small>pro Monat</small></dd></div>
+                    <div><dt>Dein Plan</dt><dd>Profi-Standard<small>Inkl. Supplement-Strategie</small></dd></div>
+                    <div><dt>Persönlicher Kontakt</dt><dd>Wöchentlich<small>Priorisierter Support &amp; Race-Day</small></dd></div>
+                </dl>
+            </div>
+
+            <!-- Leistungen -->
+            <section class="section" id="leistungen" aria-labelledby="leistungen-title">
+                <div class="container">
+                    <div class="section-head">
+                        <span class="kicker">Das steckt in Premium</span>
+                        <h2 id="leistungen-title">Höchste Präzision.<br>Für deine Höchstleistung.</h2>
+                        <p class="lead">Das Komplettpaket für maximale Ergebnisse: Wöchentlicher Austausch, punktgenaue Mikronährstoff-Beratung und direkte Unterstützung bei deinen Rennen.</p>
+                    </div>
+                    <div class="grid-2 paket-detail__services">
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">01</span>
+                            <h3>Alles aus dem Standard-Paket</h3>
+                            <p>Enthält alle Bausteine aus Starter &amp; Standard – inklusive flexibler Trainingsphasen-Anpassung und Wettkampfstrategie.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">02</span>
+                            <h3>Wöchentliche Beratungsgespräche</h3>
+                            <p>Engmaschiges Coaching im 7-Tage-Rhythmus, um deine Ernährung, Regeneration und Verdauung unter hoher Belastung kontinuierlich zu optimieren.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">03</span>
+                            <h3>Individuelle Supplement-Empfehlung</h3>
+                            <p>Wissenschaftlich fundierte Feinabstimmung von Nahrungsergänzungsmitteln (z. B. Magnesium, Omega-3, Aminosäuren), genau abgestimmt auf deine Blutwerte und Trainingsziele.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">04</span>
+                            <h3>Wettkampftag-Support &amp; Prio-Support</h3>
+                            <p>Direkter Check-in vor dem Start &amp; nach dem Ziel. Zudem genießt du priorisierte Antworten auf all deine Fragen im Chat.</p>
+                        </article>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Ablauf -->
+            <section class="section paket-detail__process" id="ablauf" aria-labelledby="ablauf-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">So läuft deine Betreuung</span>
+                        <h2 id="ablauf-title">Maximale Begleitung durch die Saison.</h2>
+                        <p class="lead">Keine Unsicherheiten mehr vor Schlüsseleinheiten oder Wettkämpfen. Wir begleiten dich intensiv durch jede Trainingswoche.</p>
+                        <a class="paket-detail__text-link" href="../index.html#berater">Unsere Berater kennenlernen <span aria-hidden="true">↗</span></a>
+                    </div>
+                    <ol class="beratung-ablauf">
+                        <li><strong>Deep-Dive Analyse</strong><p>Wir analysieren deinen Ist-Zustand, Ernährungs-Gewohnheiten, Unverträglichkeiten und bei Bedarf Blutwerte.</p></li>
+                        <li><strong>Wöchentlicher Call</strong><p>Jede Woche besprechen wir Magenverträglichkeit, Energielevel und die optimale Verpflegung für die kommenden Einheiten.</p></li>
+                        <li><strong>Supplement-Grooming</strong><p>Gezielter Einsatz von Nahrungsergänzungsmitteln zur Beschleunigung der Regeneration ab 50.</p></li>
+                        <li><strong>Betreuung am Wettkampftag</strong><p>Finaler Verpflegungs-Check vor dem Start, Anpassungen bei Wetterumschwung und gezielte Refueling-Strategie nach dem Zielleinlauf.</p></li>
+                    </ol>
+                </div>
+            </section>
+
+            <!-- Preisübersicht & Anfrage -->
+            <section class="section" id="anfrage" aria-labelledby="anfrage-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">Dein nächster Schritt</span>
+                        <h2 id="anfrage-title">Passt Premium zu dir?</h2>
+                        <p class="lead">Das Paket ist perfekt für dich, wenn du ambitionierte Ziele verfolgst, deine Regeneration maximieren möchtest und dir eine engmaschige 1:1-Betreuung wünschst.</p>
+                        <ul class="check-list">
+                            <li>Du trainierst auf Mitteldistanz, Langdistanz oder anspruchsvolle Saison-Highlights.</li>
+                            <li>Du möchtest eine fundierte Strategie für Nahrungsergänzungsmittel.</li>
+                            <li>Du willst am Wettkampftag nichts dem Zufall überlassen.</li>
+                        </ul>
+                        <p class="paket-detail__alternative">Du suchst nach einer ruhigeren, monatlichen Begleitung?<br><a class="paket-detail__text-link" href="paket-standard.html">Das Standard-Paket ansehen <span aria-hidden="true">→</span></a></p>
+                    </div>
+                    <aside class="box paket-detail__summary" aria-labelledby="summary-title">
+                        <span class="kicker">Höchste Betreuung</span>
+                        <h3 id="summary-title">PREMIUM</h3>
+                        <p class="paket-detail__price"><strong>249 €</strong><span>/ Monat</span></p>
+                        <p class="muted">Volle Betreuung für ambitionierte Athletinnen und Athleten.</p>
+                        <ul class="check-list">
+                            <li>Alles aus STANDARD</li>
+                            <li>Wöchentliche Beratungsgespräche</li>
+                            <li>Individuelle Supplement-Empfehlung</li>
+                            <li>Betreuung am Wettkampftag</li>
+                            <li>Priorisierter Support</li>
+                        </ul>
+                        <a class="btn btn-accent" href="kontakt.html#kontaktinfos">Premium-Paket anfragen <span aria-hidden="true">↗</span></a>
+                        <p class="paket-detail__note">Du gelangst zum Kontaktformular. Mit deiner Anfrage wird noch keine Buchung abgeschlossen.</p>
+                    </aside>
+                </div>
+            </section>
+        </main>
+
+        <!-- Footer -->
+        <footer class="site-footer">
+            <div class="container">
+                <div class="footer-grid">
+                    <div class="footer-brand">
+                        <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
+                        <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich Ernährungsberatung.</p>
+                    </div>
+                    <div class="footer-col">
+                        <h3>Dieser Bereich</h3>
+                        <ul>
+                            <li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
+                            <li><a href="kontakt.html">Kontakt</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h3>TRI-HUB</h3>
+                        <ul>
+                            <li><a href="https://tri-hub.de/">Start</a></li>
+                            <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
+                            <li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
+                            <li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
+                            <li><a href="https://tri-hub.de/wissen">Wissen</a></li>
+                            <li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="footer-legal">
+                    <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> · <a href="https://tri-hub.de/agb">AGB</a></span>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>

html/paket-STANDARD.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Standard-Paket | Ernährungsberatung | Tri-hub</title>
+    <meta name="description" content="Laufende Begleitung für Triathleten ab 50: Plan-Anpassung je Trainingsphase, zwei Beratungsgespräche pro Monat, Wettkampfstrategie & Chat für 149 € pro Monat.">
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Sora:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="../css/site.css">
+    <link rel="stylesheet" href="../css/navigation.css">
+    <link rel="stylesheet" href="../css/paketdetails.css">
+    <script src="../js/navigation.js" defer></script>
+</head>
+
+<body class="paket-standard">
+    <!-- Gemeinsame Navigation -->
+    <header class="site-navigation">
+        <div class="site-navigation__bar">
+            <div class="brand">
+                <a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
+                    <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
+                </a>
+                <div class="brand__text">
+                    <span class="brand__name">TRI-HUB</span>
+                    <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
+                </div>
+            </div>
+            <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false" aria-label="Menü öffnen">☰</button>
+            <nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
+                <ul>
+                    <li><a href="../index.html#produktuebersicht">Übersicht</a></li>
+                    <li><a href="../index.html#leistungen">Pakete</a></li>
+                    <li><a href="../index.html#berater">Berater</a></li>
+                    <li><a href="../index.html#beratung">Infos</a></li>
+                    <li><a href="kontakt.html">Kontakt</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="site-navigation__backdrop" aria-hidden="true"></div>
+    </header>
+
+    <div class="beratung-bereich paket-detail">
+        <main id="main-content">
+
+            <!-- Einstieg / Hero -->
+            <section class="produktuebersicht paket-detail__hero" aria-labelledby="paket-title">
+                <div class="hero">
+                    <img class="hero__image" src="../images/paket-standard.jpg" alt="Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See." width="1200" height="800" fetchpriority="high">
+                    <div class="container hero__inner">
+                        <div class="hero__content">
+                            <p class="hero__eyebrow">Ernährungsberatung · Standard</p>
+                            <h1 id="paket-title">Regelmäßig begleitet.<span>Optimal vorbereitet.</span></h1>
+                            <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>
+                </div>
+            </section>
+
+            <!-- Fakten-Grid -->
+            <div class="container">
+                <dl class="paket-detail__facts" aria-label="Standard auf einen Blick">
+                    <div><dt>Dein Paket</dt><dd>Standard<small>Laufende Begleitung</small></dd></div>
+                    <div><dt>Monatspreis</dt><dd>149 €<small>pro Monat</small></dd></div>
+                    <div><dt>Dein Plan</dt><dd>Dynamisch<small>Je Trainingsphase angepasst</small></dd></div>
+                    <div><dt>Persönlicher Kontakt</dt><dd>2x Monatlich<small>Plus direkter Chat-Support</small></dd></div>
+                </dl>
+            </div>
+
+            <!-- Leistungen -->
+            <section class="section" id="leistungen" aria-labelledby="leistungen-title">
+                <div class="container">
+                    <div class="section-head">
+                        <span class="kicker">Das steckt in Standard</span>
+                        <h2 id="leistungen-title">Gezielte Steuerung.<br>Für Training &amp; Wettkampf.</h2>
+                        <p class="lead">Alle Leistungen aus dem Starter-Paket kombiniert mit engerer Betreuung, flexibler Plananpassung und konkreter Wettkampfvorbereitung.</p>
+                    </div>
+                    <div class="grid-2 paket-detail__services">
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">01</span>
+                            <h3>Alles aus dem Starter-Paket</h3>
+                            <p>Du erhältst dein fundiertes Erstgespräch, die individuelle Bedarfsanalyse und vollen Zugriff auf aufbereitungsgerechte Beispielpläne.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">02</span>
+                            <h3>Plan-Anpassung je Trainingsphase</h3>
+                            <p>Ob Grundlagenausdauer, intensive Intervalle oder Tapering: Dein Ernährungsplan wird dynamisch an deinen aktuellen Trainingsload angepasst.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">03</span>
+                            <h3>Zwei Beratungsgespräche pro Monat</h3>
+                            <p>Alle zwei Wochen besprechen wir deinen Fortschritt, klären offene Fragen und nehmen Feinjustierungen an deiner Ernährung vor.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">04</span>
+                            <h3>Wettkampf-Ernährungsstrategie &amp; Chat</h3>
+                            <p>Wir erarbeiten ein genaues Timing für Kohlenhydrate, Flüssigkeit und Elektrolyte am Renntag. Bei Fragen erreichst du uns direkt per Chat.</p>
+                        </article>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Ablauf -->
+            <section class="section paket-detail__process" id="ablauf" aria-labelledby="ablauf-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">So läuft deine Betreuung</span>
+                        <h2 id="ablauf-title">Kontinuierlich am Ball bleiben.</h2>
+                        <p class="lead">Eine erfolgreiche Ernährung wächst mit deinem Training. Wir begleiten dich durch jede Saisonphase mit persönlicher Rücksprache.</p>
+                        <a class="paket-detail__text-link" href="../index.html#berater">Unsere Berater kennenlernen <span aria-hidden="true">↗</span></a>
+                    </div>
+                    <ol class="beratung-ablauf">
+                        <li><strong>Analyse &amp; Startplan</strong><p>Wir erfassen deine Ziele, Trainingspläne und bisherigen Gewohnheiten zur Erstellung deines Grundplans.</p></li>
+                        <li><strong>14-tägige Abstimmung</strong><p>In zwei Monatsgesprächen prüfen wir Bekömmlichkeit, Energielevel und regenerative Fortschritte.</p></li>
+                        <li><strong>Wettkampffokus</strong><p>Vor deinen Hauptwettkämpfen simulieren wir das Race-Day-Nutri-Timing bereits im Training.</p></li>
+                        <li><strong>Direkter Chat-Draht</strong><p>Kurze Fragen vor oder nach dem Training klären wir unkompliziert zwischendurch im Chat.</p></li>
+                    </ol>
+                </div>
+            </section>
+
+            <!-- Preisübersicht & Anfrage -->
+            <section class="section" id="anfrage" aria-labelledby="anfrage-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">Dein nächster Schritt</span>
+                        <h2 id="anfrage-title">Passt Standard zu dir?</h2>
+                        <p class="lead">Das Paket ist ideal für dich, wenn du aktiv auf ein Ziel hin trainierst und deine Ernährung gezielt als Leistungs- und Regeneationsfaktor nutzen möchtest.</p>
+                        <ul class="check-list">
+                            <li>Du trainierst regelmäßig und suchst dynamische Anpassung.</li>
+                            <li>Du willst deinen Wettkampftag ernährungstechnisch perfekt planen.</li>
+                            <li>Du schätzt kurze Abstimmungswege per Chat und Video-Call.</li>
+                        </ul>
+                        <p class="paket-detail__alternative">Möchtest du eine Rundum-Betreuung inklusive Support am Wettkampftag?<br><a class="paket-detail__text-link" href="paket-premium.html">Zum Premium-Paket wechseln <span aria-hidden="true">→</span></a></p>
+                    </div>
+                    <aside class="box paket-detail__summary" aria-labelledby="summary-title">
+                        <span class="kicker">Beliebteste Wahl</span>
+                        <h3 id="summary-title">STANDARD</h3>
+                        <p class="paket-detail__price"><strong>149 €</strong><span>/ Monat</span></p>
+                        <p class="muted">Laufende Begleitung für alle, die regelmäßig für Wettkämpfe trainieren.</p>
+                        <ul class="check-list">
+                            <li>Alles aus Starter</li>
+                            <li>Plan-Anpassung je Trainingsphase</li>
+                            <li>Zwei Beratungsgespräche pro Monat</li>
+                            <li>Wettkampf-Ernährungsstrategie</li>
+                            <li>Direkter Chat mit deiner Beraterin</li>
+                        </ul>
+                        <a class="btn btn-accent" href="kontakt.html#kontaktinfos">Standard-Paket anfragen <span aria-hidden="true">↗</span></a>
+                        <p class="paket-detail__note">Du gelangst zum Kontaktformular. Mit deiner Anfrage wird noch keine Buchung abgeschlossen.</p>
+                    </aside>
+                </div>
+            </section>
+        </main>
+
+        <!-- Footer -->
+        <footer class="site-footer">
+            <div class="container">
+                <div class="footer-grid">
+                    <div class="footer-brand">
+                        <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
+                        <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich Ernährungsberatung.</p>
+                    </div>
+                    <div class="footer-col">
+                        <h3>Dieser Bereich</h3>
+                        <ul>
+                            <li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
+                            <li><a href="kontakt.html">Kontakt</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h3>TRI-HUB</h3>
+                        <ul>
+                            <li><a href="https://tri-hub.de/">Start</a></li>
+                            <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
+                            <li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
+                            <li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
+                            <li><a href="https://tri-hub.de/wissen">Wissen</a></li>
+                            <li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="footer-legal">
+                    <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> · <a href="https://tri-hub.de/agb">AGB</a></span>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>

html/paket-starter.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Starter-Paket | Ernährungsberatung | Tri-hub</title>
+    <meta name="description" content="Dein Einstieg in die Ernährungsberatung für Triathleten ab 50: Erstgespräch, individueller Ernährungsplan und monatliches Check-in für 79 € pro Monat.">
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Sora:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="../css/site.css">
+    <link rel="stylesheet" href="../css/navigation.css">
+    <link rel="stylesheet" href="../css/paketdetails.css">
+    <script src="../js/navigation.js" defer></script>
+</head>
+
+<body class="paket-starter">
+    <!-- Gemeinsame Navigation -->
+    <header class="site-navigation">
+        <div class="site-navigation__bar">
+            <div class="brand">
+                <a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
+                    <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
+                </a>
+                <div class="brand__text">
+                    <span class="brand__name">TRI-HUB</span>
+                    <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
+                </div>
+            </div>
+            <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false" aria-label="Menü öffnen">☰</button>
+            <nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
+                <ul>
+                    <li><a href="../index.html#produktuebersicht">Übersicht</a></li>
+                    <li><a href="../index.html#leistungen">Pakete</a></li>
+                    <li><a href="../index.html#berater">Berater</a></li>
+                    <li><a href="../index.html#beratung">Infos</a></li>
+                    <li><a href="kontakt.html">Kontakt</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="site-navigation__backdrop" aria-hidden="true"></div>
+    </header>
+
+    <div class="beratung-bereich paket-detail">
+        <main id="main-content">
+
+            <!-- Einstieg / Hero -->
+            <section class="produktuebersicht paket-detail__hero" aria-labelledby="paket-title">
+                <div class="hero">
+                    <img class="hero__image" src="../images/paket-starter.jpg" alt="Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See." width="1200" height="800" fetchpriority="high">
+                    <div class="container hero__inner">
+                        <div class="hero__content">
+                            <p class="hero__eyebrow">Ernährungsberatung · Starter</p>
+                            <h1 id="paket-title">Dein erster Schritt.<span>Gut versorgt starten.</span></h1>
+                            <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>
+                </div>
+            </section>
+
+            <!-- Fakten-Grid -->
+            <div class="container">
+                <dl class="paket-detail__facts" aria-label="Starter auf einen Blick">
+                    <div><dt>Dein Paket</dt><dd>Starter<small>Für deinen Einstieg</small></dd></div>
+                    <div><dt>Monatspreis</dt><dd>79 €<small>pro Monat</small></dd></div>
+                    <div><dt>Dein Plan</dt><dd>Individuell<small>Passend zu deinem Alltag</small></dd></div>
+                    <div><dt>Persönlicher Kontakt</dt><dd>Monatlich<small>Check-in per E-Mail</small></dd></div>
+                </dl>
+            </div>
+
+            <!-- Leistungen -->
+            <section class="section" id="leistungen" aria-labelledby="leistungen-title">
+                <div class="container">
+                    <div class="section-head">
+                        <span class="kicker">Das steckt in Starter</span>
+                        <h2 id="leistungen-title">Eine gute Grundlage.<br>Für Training und Alltag.</h2>
+                        <p class="lead">Vier Bausteine helfen dir dabei, deine Ernährungsgewohnheiten besser zu verstehen und erste Schritte umzusetzen.</p>
+                    </div>
+                    <div class="grid-2 paket-detail__services">
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">01</span>
+                            <h3>Erstgespräch &amp; Bedarfsanalyse</h3>
+                            <p>Wir sprechen über deine Ziele, deinen Trainingsalltag und deine bisherigen Gewohnheiten. So finden wir heraus, wo du ansetzen kannst.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">02</span>
+                            <h3>Individueller Ernährungsplan</h3>
+                            <p>Dein Plan orientiert sich an dir: an deinem Training, deinen Vorlieben und dem, was sich in deinem Alltag umsetzen lässt.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">03</span>
+                            <h3>Monatliches Check-in per E-Mail</h3>
+                            <p>Du kannst deine Erfahrungen und Fragen mit uns teilen. Gemeinsam schauen wir darauf, wie es dir mit deinem Plan geht.</p>
+                        </article>
+                        <article class="box">
+                            <span class="paket-detail__number" aria-hidden="true">04</span>
+                            <h3>Zugang zu Beispielplänen</h3>
+                            <p>Beispiele geben dir Orientierung und Ideen für Mahlzeiten. Du bekommst Anregungen, die du auf deinen eigenen Alltag übertragen kannst.</p>
+                        </article>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Ablauf -->
+            <section class="section paket-detail__process" id="ablauf" aria-labelledby="ablauf-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">So beginnt deine Beratung</span>
+                        <h2 id="ablauf-title">Ein Schritt nach dem anderen.</h2>
+                        <p class="lead">Du musst noch nicht auf alles eine Antwort haben. Bring deine Fragen mit – wir finden gemeinsam einen passenden Einstieg.</p>
+                        <a class="paket-detail__text-link" href="../index.html#berater">Unsere Berater kennenlernen <span aria-hidden="true">↗</span></a>
+                    </div>
+                    <ol class="beratung-ablauf">
+                        <li><strong>Kontakt aufnehmen</strong><p>Schreib uns, dass du dich für das Starter-Paket interessierst, und erzähle kurz von deinem Ziel.</p></li>
+                        <li><strong>Gemeinsam hinschauen</strong><p>Im Erstgespräch besprechen wir deinen Bedarf und deine aktuellen Ernährungsgewohnheiten.</p></li>
+                        <li><strong>Im Alltag starten</strong><p>Mit deinem individuellen Plan und den Beispielplänen setzt du die ersten Schritte um.</p></li>
+                        <li><strong>In Verbindung bleiben</strong><p>Beim monatlichen Check-in per E-Mail ist Raum für deine Erfahrungen und Fragen.</p></li>
+                    </ol>
+                </div>
+            </section>
+
+            <!-- Preisübersicht & Anfrage -->
+            <section class="section" id="anfrage" aria-labelledby="anfrage-title">
+                <div class="container paket-detail__split">
+                    <div>
+                        <span class="kicker">Dein nächster Schritt</span>
+                        <h2 id="anfrage-title">Passt Starter zu dir?</h2>
+                        <p class="lead">Das Paket ist für dich gedacht, wenn du eine persönliche Grundlage für deine Ernährung suchst und mit überschaubaren Schritten beginnen möchtest.</p>
+                        <ul class="check-list">
+                            <li>Du möchtest Ernährung und Training besser verbinden.</li>
+                            <li>Du suchst Orientierung statt allgemeiner Ernährungstipps.</li>
+                            <li>Du wünschst dir einen Plan und einen festen Kontaktpunkt.</li>
+                        </ul>
+                        <p class="paket-detail__alternative">Du möchtest eine engere Begleitung?<br><a class="paket-detail__text-link" href="../index.html#leistungen">Standard und Premium vergleichen <span aria-hidden="true">→</span></a></p>
+                    </div>
+                    <aside class="box paket-detail__summary" aria-labelledby="summary-title">
+                        <span class="kicker">Ernährungsberatung</span>
+                        <h3 id="summary-title">STARTER</h3>
+                        <p class="paket-detail__price"><strong>79 €</strong><span>/ Monat</span></p>
+                        <p class="muted">Für den Einstieg in eine bewusste Ernährung neben dem Training.</p>
+                        <ul class="check-list">
+                            <li>Erstgespräch &amp; Bedarfsanalyse</li>
+                            <li>Individueller Ernährungsplan</li>
+                            <li>Monatliches Check-in per E-Mail</li>
+                            <li>Zugang zu Beispielplänen</li>
+                        </ul>
+                        <a class="btn btn-accent" href="kontakt.html#kontaktinfos">Starter-Paket anfragen <span aria-hidden="true">↗</span></a>
+                        <p class="paket-detail__note">Du gelangst zum Kontaktformular. Mit deiner Anfrage wird noch keine Buchung abgeschlossen.</p>
+                    </aside>
+                </div>
+            </section>
+        </main>
+
+        <!-- Footer -->
+        <footer class="site-footer">
+            <div class="container">
+                <div class="footer-grid">
+                    <div class="footer-brand">
+                        <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
+                        <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich Ernährungsberatung.</p>
+                    </div>
+                    <div class="footer-col">
+                        <h3>Dieser Bereich</h3>
+                        <ul>
+                            <li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
+                            <li><a href="kontakt.html">Kontakt</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-col">
+                        <h3>TRI-HUB</h3>
+                        <ul>
+                            <li><a href="https://tri-hub.de/">Start</a></li>
+                            <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
+                            <li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
+                            <li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
+                            <li><a href="https://tri-hub.de/wissen">Wissen</a></li>
+                            <li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="footer-legal">
+                    <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> · <a href="https://tri-hub.de/agb">AGB</a></span>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>

html/terminbuchung.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terminbuchung | Ernährungsberatung für Triathleten | tri-hub</title>
+    <!-- Gemeinsame Schriften und Navigation; terminbuchung.css ergänzt die Styles dieser Seite (Stil wie css/kontakt.css). -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="../css/site.css">
+    <link rel="stylesheet" href="../css/navigation.css">
+    <link rel="stylesheet" href="../css/terminbuchung.css">
+    <!-- Gemeinsames Menü sowie Zusammenfassung, Tag-Eingabe und Formularprüfung für die Buchungsseite. -->
+    <script src="../js/navigation.js" defer></script>
+    <script src="../js/terminbuchung-form.js" defer></script>
+</head>
+
+<body>
+    <div class="terminbuchung-seite">
+        <!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
+        <header class="site-navigation">
+            <div class="site-navigation__bar">
+                <div class="brand">
+                    <a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
+                        <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024"
+                            height="1024">
+                    </a>
+                    <div class="brand__text">
+                        <span class="brand__name">TRI-HUB</span>
+                        <span class="brand__label">Terminbuchung</span>
+                    </div>
+                </div>
+                <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
+                    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>
+            </div>
+            <div class="site-navigation__backdrop" aria-hidden="true"></div>
+        </header>
+
+        <main id="main-content">
+            <!-- Kopfzeile mit dem gewählten Termin -->
+            <section id="termin" class="hero">
+                <div class="container">
+                    <div class="reveal">
+                        <span class="kicker">Online-Terminbuchung</span>
+                        <h1>Dein Termin ist fast gebucht</h1>
+                        <p class="hero__text">
+                            Du hast dir einen Termin im Kalender ausgesucht. Bestätige ihn hier – und gib noch ein paar
+                            Details zur Beratung sowie deine Kontaktdaten an.
+                        </p>
+
+                        <!-- terminbuchung-form.js füllt die Werte aus der URL (berater, datum, zeit). -->
+                        <div class="tb-summary" id="termin-zusammenfassung">
+                            <div class="tb-summary__item">
+                                <span class="tb-summary__label">Berater/in</span>
+                                <p class="tb-summary__value" id="tb-berater">–</p>
+                            </div>
+                            <div class="tb-summary__item">
+                                <span class="tb-summary__label">Datum</span>
+                                <p class="tb-summary__value" id="tb-datum">–</p>
+                            </div>
+                            <div class="tb-summary__item">
+                                <span class="tb-summary__label">Uhrzeit</span>
+                                <p class="tb-summary__value" id="tb-zeit">–</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Formular: Art der Beratung, Anamnese-Tags und Kontaktdaten -->
+            <section id="formular" class="section">
+                <div class="container">
+                    <div class="reveal">
+                        <span class="kicker">Deine Angaben</span>
+                        <h2>Noch ein paar Details zur Beratung</h2>
+                        <p class="lead">Damit dein Gegenüber den Termin gut vorbereiten kann: Wähle die Art der
+                            Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
+                            Unverträglichkeiten als Tags auf.</p>
+
+                        <!-- Vor dem E-Mail-Versand werden alle Angaben in einem zweiten Schritt geprüft. -->
+                        <form id="terminbuchung-formular" novalidate>
+                            <div class="field">
+                                <label for="tb-art">Art der Ernährungsberatung *</label>
+                                <select id="tb-art" name="art" required>
+                                    <option value="" selected disabled>Bitte wählen …</option>
+                                    <option value="leistungsoptimierung">Leistungsoptimierung – Training &amp; Wettkampf
+                                    </option>
+                                    <option value="gewichtsmanagement">Gewichtsmanagement</option>
+                                    <option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
+                                    <option value="allgemein">Allgemeine Ernährungsberatung</option>
+                                </select>
+                                <p class="field__error">Bitte wähle eine Art der Ernährungsberatung.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-format">Beratungsformat *</label>
+                                <select id="tb-format" name="format" required>
+                                    <option value="" selected disabled>Bitte wählen …</option>
+                                    <option value="persoenlich">Persönlich (Vor-Ort)</option>
+                                    <option value="videocall">Videocall-Beratung</option>
+                                </select>
+                                <p class="field__error">Bitte wähle ein Beratungsformat.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-gespraech">Gesprächsart *</label>
+                                <select id="tb-gespraech" name="gespraech" required>
+                                    <option value="" selected disabled>Bitte wählen …</option>
+                                    <option value="erstgespraech">Erstgespräch</option>
+                                    <option value="folgegespraech">Folgegespräch</option>
+                                </select>
+                                <p class="field__error">Bitte wähle aus, ob es ein Erst- oder Folgegespräch ist.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-beschreibung">Kurzbeschreibung</label>
+                                <textarea id="tb-beschreibung" name="beschreibung" rows="3"
+                                    placeholder="Worum geht es? Deine Ziele, deine aktuelle Situation … (optional)"></textarea>
+                            </div>
+
+                            <div class="field">
+                                <label for="tag-input">Anamnese – Allergien &amp; Unverträglichkeiten</label>
+                                <div class="tb-tag-row">
+                                    <input type="text" id="tag-input" name="anamnese-eintrag"
+                                        placeholder="z. B. Laktoseintoleranz, Nussallergie …">
+                                    <button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
+                                </div>
+                                <ul class="tb-tags" id="tag-list"></ul>
+                                <p class="field__hint">Enter oder der Button fügt den Eintrag als Tag hinzu – so behält
+                                    dein Gegenüber die Anamnese im Blick.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-name">Name *</label>
+                                <input type="text" id="tb-name" name="name" placeholder="Dein Name" required>
+                                <p class="field__error">Bitte gib deinen Namen an.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-email">Email *</label>
+                                <input type="email" id="tb-email" name="email" placeholder="deine@email.de" required>
+                                <p class="field__error">Bitte gib eine gültige E-Mail-Adresse an.</p>
+                            </div>
+
+                            <div class="field">
+                                <label for="tb-phone">Telefon</label>
+                                <input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
+                            </div>
+
+                            <button type="submit" class="btn btn-accent btn-block" disabled>Angaben prüfen</button>
+                            <p id="form-status" class="form-status" role="status" aria-live="polite"></p>
+                        </form>
+                    </div>
+                </div>
+            </section>
+
+            <section id="anfrage-pruefen" class="section" hidden aria-labelledby="pruefen-titel">
+                <div class="container">
+                    <div>
+                        <span class="kicker">Letzter Schritt</span>
+                        <h2 id="pruefen-titel">Prüfe deine Angaben</h2>
+                        <p class="lead">Kontrolliere die Zusammenfassung. Du kannst zurückgehen und Angaben ändern oder
+                            die Anfrage senden.</p>
+                        <dl class="tb-review-list" id="anfrage-pruefen-details"></dl>
+                        <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
+                                senden</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Footer -->
+            <footer class="site-footer">
+                <div class="container">
+                    <div class="footer-grid">
+                        <div class="footer-brand">
+                            <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
+                            <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
+                                Ernährungsberatung.</p>
+                        </div>
+
+                        <div class="footer-col">
+                            <h3>Dieser Bereich</h3>
+                            <ul>
+                                <li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
+                                <li><a href="../html/kontakt.html">Kontakt</a></li>
+                            </ul>
+                        </div>
+
+                        <div class="footer-col">
+                            <h3>Tri-hub</h3>
+                            <ul>
+                                <li><a href="https://tri-hub.de/">Start</a></li>
+                                <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
+                                <li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
+                                <li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
+                                <li><a href="https://tri-hub.de/wissen">Wissen</a></li>
+                                <li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="footer-legal">
+                        <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> ·
+                            <a href="https://tri-hub.de/agb">AGB</a>
+                        </span>
+                    </div>
+                </div>
+            </footer>
+        </main>
+
+        <dialog class="tb-confirm-dialog" id="anfrage-bestaetigung" aria-labelledby="bestaetigung-titel"
+            aria-describedby="bestaetigung-text">
+            <span class="kicker">Anfrage vorbereitet</span>
+            <h2 id="bestaetigung-titel">Terminanfrage</h2>
+            <p id="bestaetigung-text">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.</p>
+            <a class="tb-review-button tb-review-button--primary" href="../index.html">OK, zur Übersicht</a>
+        </dialog>
+    </div>
+</body>
+
+</html>

index.html

@@ -5,93 +5,107 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ernährungsberatung für Triathleten | tri-hub</title>
+    <!-- Schriften und Styles: gemeinsame Grundlage zuerst, danach die einzelnen Bereiche. -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
         href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap"
         rel="stylesheet">
     <link rel="stylesheet" href="css/site.css">
+    <link rel="stylesheet" href="css/navigation.css">
     <link rel="stylesheet" href="css/produktuebersicht.css">
     <link rel="stylesheet" href="css/leistungen.css">
     <link rel="stylesheet" href="css/berater.css">
     <link rel="stylesheet" href="css/beratung.css">
+    <link rel="stylesheet" href="css/terminbuchung.css">
+    <!-- Navigation und dynamische Inhalte werden nach dem Einlesen des HTML initialisiert. -->
+    <script src="js/navigation.js" defer></script>
     <script src="js/leistungen.js" defer></script>
     <script src="js/berater.js" defer></script>
     <script src="js/beratung.js" defer></script>
+    <!-- Online-Terminbuchung: Kalender-Pop-up, das die "Trainingsplan buchen"-Buttons öffnen. -->
+    <script src="js/terminbuchung.js" defer></script>
 </head>
 
 <body>
+    <!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
+    <header class="site-navigation">
+        <div class="site-navigation__bar">
+            <div class="brand">
+                <a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
+                    <img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
+                </a>
+                <div class="brand__text">
+                    <span class="brand__name">TRI-HUB</span>
+                    <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
+                </div>
+            </div>
+            <!-- Ein gemeinsamer Linksatz für Desktop und Mobil; navigation.js steuert den Menüknopf. -->
+            <button class="menu-toggle" type="button" aria-controls="navigation-links"
+                aria-expanded="false" aria-label="Menü öffnen">☰</button>
+            <nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
+                <ul>
+                    <li><a href="#produktuebersicht">Übersicht</a></li>
+                    <li><a href="#leistungen">Pakete</a></li>
+                    <li><a href="#berater">Berater</a></li>
+                    <li><a href="#beratung">Infos</a></li>
+                    <li><a href="html/kontakt.html">Kontakt</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="site-navigation__backdrop" aria-hidden="true"></div>
+    </header>
+
     <main id="main-content">
         <!-- Shahnam: Produktübersicht -->
         <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
-            <header class="site-header">
-                <div class="container brand">
-                    <div class="brand__logo">
-                        <img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
-                    </div>
-                    <div class="brand__text">
-                        <span class="brand__name">TRI-HUB</span>
-                        <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
-                    </div>
-                </div>
-            </header>
-
             <div class="produktuebersicht__main">
                 <div class="hero">
-                    <img class="hero__image" src="images/hero-triathlon.webp"
+                    <img class="hero__image" src="images/hero-nutrition.png"
-                        alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
+                        alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
-                        height="1080" fetchpriority="high">
+                        height="1024" fetchpriority="high">
 
                     <div class="container hero__inner">
                         <div class="hero__content">
-                            <p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
+                            <p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
                             <h1 id="hero-title">
-                                Überschrift. Weitere Zeile.
+                                Dein Training hat einen Plan.
-                                <span>Akzentzeile.</span>
+                                <span>Deine Ernährung auch?</span>
                             </h1>
                             <p class="hero__description">
-                                Hier folgt eine kurze Beschreibung der Ernährungsberatung.
+                                Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
-                                Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
-                                sobald die Inhalte vorliegen.
                             </p>
                         </div>
 
+                        <!-- Vorteile der Beratung und ergänzender Slogan. -->
                         <div class="hero__details">
-                            <ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
+                            <ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">01</span>
-                                    <p>Erster Vorteil <span>Text folgt</span></p>
+                                    <p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
                                 </li>
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">02</span>
-                                    <p>Zweiter Vorteil <span>Text folgt</span></p>
+                                    <p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
                                 </li>
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">03</span>
-                                    <p>Dritter Vorteil <span>Text folgt</span></p>
+                                    <p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</span></p>
                                 </li>
                             </ul>
 
                             <div class="hero__caption">
-                                <p class="hero__caption-label">Bildunterschrift folgt</p>
+                                <p class="hero__caption-label">Ernährung für deinen Sport</p>
-                                <p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
+                                <p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            <!-- Vorläufig ausgeblendet, bis die endgültigen Texte vorliegen.
-            <footer>
-                <div class="container site-footer__inner">
-                    <p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
-                    <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
-                </div>
-            </footer>
-            -->
         </section>
 
         <!-- Vincent: Leistungsübersicht -->
+        <!-- Titel, Einleitung und Karten werden durch leistungen.js aus json/pakete.json erzeugt. -->
         <section id="leistungen" class="pakete">
             <div class="pakete__intro">
                 <h2 class="pakete__titel"></h2>
@@ -122,6 +136,7 @@
                             was dich erwartet.</p>
                     </div>
 
+                    <!-- Beratung im Überblick: Inhalte, Ablauf, Zielgruppe und weitere Informationen. -->
                     <div class="grid-2">
                         <div class="box reveal">
                             <h2>Was dich bei der Beratung erwartet</h2>
@@ -188,26 +203,26 @@
                     </div>
                 </div>
 
+    
                 <div class="container" id="kontakt">
+                    <!-- Einstieg zur separaten Kontaktseite mit Formular. -->
                     <div class="cta-band reveal">
                         <h2>Bereit für deinen nächsten Schritt?</h2>
                         <p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
                             dir
                             passt.</p>
-                        <a class="btn btn-primary"
+                        <a class="btn btn-accent" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
-                            href="mailto:info@trihub.de?subject=Ernaehrungsberatung%20-%20Kennenlerngespraech">Jetzt
-                            unverbindlich anfragen</a>
                     </div>
                 </div>
 
 
-
             </section>
+            <!-- Seitenabschluss mit internen Links, Trihub-Angeboten und rechtlichen Informationen. -->
             <footer class="site-footer">
                 <div class="container">
                     <div class="footer-grid">
                         <div class="footer-brand">
-                            <a class="logo" href="https://tri-hub.de/">tri<span>-hub</span></a>
+                            <a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
                             <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
                                 Ernährungsberatung.</p>
                         </div>
@@ -221,7 +236,7 @@
                         </div>
 
                         <div class="footer-col">
-                            <h3>Tri-hub</h3>
+                            <h3>TRI-HUB</h3>
                             <ul>
                                 <li><a href="https://tri-hub.de/">Start</a></li>
                                 <li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>

js/berater.js

@@ -51,7 +51,13 @@ document.addEventListener('DOMContentLoaded', async () => {
         if (berater.links && berater.links.length > 0) {
             linksHtml = `<div class="berater-links">`;
             berater.links.forEach(link => {
-                linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
+                if (link.aktion === 'terminbuchung') {
+                    // Öffnet das Kalender-Pop-up (js/terminbuchung.js) mit dieser Berater-ID,
+                    // statt eine externe Seite zu laden.
+                    linksHtml += `<button type="button" class="berater-link-btn" data-terminbuchung="${berater.id}" data-url="${link.url}">${link.text}</button>`;
+                } else {
+                    linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
+                }
             });
             linksHtml += `</div>`;
         }
@@ -100,4 +106,19 @@ document.addEventListener('DOMContentLoaded', async () => {
         // Die fertige Karte zum Container auf der Seite hinzufügen
         container.appendChild(card);
     });
+
+    // "Trainingsplan buchen"-Buttons öffnen das Kalender-Pop-up (js/terminbuchung.js)
+    // mit der jeweiligen Berater-ID, statt eine externe Seite zu laden.
+    if (container) {
+        container.addEventListener('click', (event) => {
+            const button = event.target.closest('[data-terminbuchung]');
+            if (!button) return;
+            if (window.Terminbuchung && typeof window.Terminbuchung.oeffnen === 'function') {
+                window.Terminbuchung.oeffnen(Number(button.dataset.terminbuchung));
+            } else {
+                // Fallback, falls terminbuchung.js nicht geladen wurde: ursprüngliches Linkziel.
+                window.location.href = button.dataset.url || '#';
+            }
+        });
+    }
 });

js/kontakt.js

@@ -0,0 +1,198 @@
+// Dennis: Kontaktseite – Scroll-Reveal und Formular-Logik.
+
+// ----- Scroll-Reveal -----
+(function () {
+    const elements = document.querySelectorAll(".kontakt-seite .reveal");
+    if (!elements.length) return;
+
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+        elements.forEach(function (el) {
+            el.classList.add("visible");
+        });
+        return;
+    }
+
+    const observer = new IntersectionObserver(
+        function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("visible");
+                    observer.unobserve(entry.target);
+                }
+            });
+        },
+        { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
+    );
+
+    elements.forEach(function (el) {
+        observer.observe(el);
+    });
+})();
+
+// ----- Kontaktformular -----
+(function () {
+    const form = document.getElementById("kontakt-formular");
+    if (!form) return;
+
+    const MIN_MESSAGE = 10;
+    const EMAIL_TARGET = "info@trihub.de";
+
+    const fields = {
+        name: form.querySelector("[name='name']"),
+        email: form.querySelector("[name='email']"),
+        phone: form.querySelector("[name='phone']"),
+        type: form.querySelector("[name='anfragetyp']"),
+        subject: form.querySelector("[name='betreff']"),
+        message: form.querySelector("[name='nachricht']")
+    };
+
+    const statusEl = document.getElementById("form-status");
+
+    function wrap(el) {
+        return el.closest(".field");
+    }
+
+    function setFieldState(el, state) {
+        const box = wrap(el);
+        if (!box) return;
+        box.classList.remove("has-error", "is-ok");
+        el.classList.remove("invalid", "valid");
+        if (state === "error") {
+            box.classList.add("has-error");
+            el.classList.add("invalid");
+        } else if (state === "ok") {
+            box.classList.add("is-ok");
+            el.classList.add("valid");
+        }
+    }
+
+    function validateName() {
+        const ok = fields.name.value.trim().length > 0;
+        setFieldState(fields.name, ok ? null : "error");
+        return ok;
+    }
+
+    function validateEmail() {
+        const value = fields.email.value.trim();
+        const ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value);
+        setFieldState(fields.email, ok ? null : "error");
+        return ok;
+    }
+
+    function validateType() {
+        const ok = fields.type.value !== "";
+        setFieldState(fields.type, ok ? null : "error");
+        return ok;
+    }
+
+    function validateSubject() {
+        const ok = fields.subject.value.trim().length > 0;
+        setFieldState(fields.subject, ok ? null : "error");
+        return ok;
+    }
+
+    function validateMessage() {
+        const len = fields.message.value.trim().length;
+        if (len === 0) {
+            setFieldState(fields.message, "error");
+            return false;
+        }
+        if (len >= MIN_MESSAGE) {
+            setFieldState(fields.message, "ok");
+            return true;
+        }
+        // Zu kurz: erst bei Submit als Fehler markieren, live nur grün bei erfüllt.
+        setFieldState(fields.message, null);
+        return false;
+    }
+
+    function allValid() {
+        return (
+            fields.name.value.trim().length > 0 &&
+            /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(fields.email.value.trim()) &&
+            fields.type.value !== "" &&
+            fields.subject.value.trim().length > 0 &&
+            fields.message.value.trim().length >= MIN_MESSAGE
+        );
+    }
+
+    function updateSubmitState() {
+        const submit = form.querySelector("[type='submit']");
+        if (submit) {
+            submit.disabled = !allValid();
+        }
+    }
+
+    // Der Button bleibt unabhängig von der Eingabereihenfolge mit allen Feldern synchron.
+    form.addEventListener("input", updateSubmitState);
+    form.addEventListener("change", updateSubmitState);
+
+    // Live-Feedback: Nachricht wird bei 10+ Zeichen grün markiert.
+    fields.message.addEventListener("input", function () {
+        validateMessage();
+    });
+
+    ["name", "email", "subject"].forEach(function (key) {
+        fields[key].addEventListener("blur", function () {
+            if (fields[key].value.trim() !== "" || form.dataset.touched === "true") {
+                ({ name: validateName, email: validateEmail, subject: validateSubject })[key]();
+            }
+        });
+    });
+
+    fields.type.addEventListener("change", validateType);
+
+    form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        form.dataset.touched = "true";
+
+        const okName = validateName();
+        const okEmail = validateEmail();
+        const okType = validateType();
+        const okSubject = validateSubject();
+        const okMessage = validateMessage();
+
+        if (!(okName && okEmail && okType && okSubject && okMessage)) {
+            showStatus("error", "Bitte überprüfe die markierten Felder und versuche es erneut.");
+            return;
+        }
+
+        const subject = fields.subject.value.trim();
+        const typeLabel = fields.type.options[fields.type.selectedIndex].text;
+        const body = [
+            "Name: " + fields.name.value.trim(),
+            "E-Mail: " + fields.email.value.trim(),
+            "Telefon: " + (fields.phone.value.trim() || "–"),
+            "Anfrage-Typ: " + typeLabel,
+            "",
+            fields.message.value.trim()
+        ].join("\n");
+
+        // Statische Seite ohne Backend: E-Mail-Programm wird mit allen Angaben geöffnet.
+        window.location.href =
+            "mailto:" + EMAIL_TARGET +
+            "?subject=" + encodeURIComponent("Ernährungsberatung – " + subject) +
+            "&body=" + encodeURIComponent(body);
+
+        showStatus(
+            "ok",
+            "Danke! Dein E-Mail-Programm wurde geöffnet. Sende die Nachricht ab – wir melden uns zeitnah bei dir."
+        );
+        form.reset();
+        Object.values(fields).forEach(function (el) {
+            setFieldState(el, null);
+        });
+        updateSubmitState();
+    });
+
+    function showStatus(kind, text) {
+        if (!statusEl) return;
+        statusEl.textContent = kind === "ok" ? "✓ " + text : "✗ " + text;
+        statusEl.className =
+            "form-status is-visible " + (kind === "ok" ? "form-status--ok" : "form-status--error");
+    }
+
+    updateSubmitState();
+})();

js/leistungen.js

@@ -2,11 +2,11 @@
 // Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
 // damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.
 
+// US-01-02 Leistungsübersicht
 document.addEventListener("DOMContentLoaded", async () => {
     const section = document.getElementById("leistungen");
     if (!section) return;
 
-    // Integration: Der Datenpfad muss zum vorhandenen JSON-Ordner passen.
     let daten;
     try {
         const response = await fetch("json/pakete.json");
@@ -18,45 +18,65 @@ document.addEventListener("DOMContentLoaded", async () => {
         return;
     }
 
-    // Elemente aus dem HTML holen
     const titel = section.querySelector(".pakete__titel");
     const text = section.querySelector(".pakete__text");
     const grid = section.querySelector(".pakete__grid");
 
-    // Intro mit Daten aus JSON füllen
     titel.textContent = daten.intro.titel;
     text.textContent = daten.intro.text;
 
-    // Vorhandenen Inhalt entfernen
     grid.innerHTML = "";
 
-    // Für jedes Paket eine Karte erstellen
+    // Platzhalter-Pfade für die drei generierten Bilder
-    daten.pakete.forEach(paket => {
+    const bilderMap = {
+        "STARTER": "images/paket-starter.jpg",
+        "STANDARD": "images/paket-standard.jpg",
+        "PREMIUM": "images/paket-premium.jpg"
+    };
 
-        // Artikel erstellen
+    daten.pakete.forEach(paket => {
         const karte = document.createElement("article");
         karte.classList.add("paket-karte");
 
-        // Empfohlenes Paket bekommt zusätzliche Klasse
         if (paket.empfohlen) {
             karte.classList.add("paket-karte--empfohlen");
         }
 
-        // Badge nur erstellen, wenn eines vorhanden ist
+        // 1. Bild oben (Platzhalter)
-        if (paket.badge) {
+        const imgWrapper = document.createElement("div");
-            const badge = document.createElement("p");
+        imgWrapper.classList.add("paket-karte__image-wrapper");
-            badge.classList.add("paket-karte__badge");
+
-            badge.textContent = paket.badge;
+        const img = document.createElement("img");
-            karte.appendChild(badge);
+        img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg";
-        }
+        img.alt = `Vorschau ${paket.name}`;
+        img.classList.add("paket-karte__image");
+        imgWrapper.appendChild(img);
+
+        karte.appendChild(imgWrapper);
+
+        // Content-Container für die Texte & Abstände
+        const body = document.createElement("div");
+        body.classList.add("paket-karte__body");
+
+        // 2. Header: Paketname + Badge nebeneinander
+        const header = document.createElement("div");
+        header.classList.add("paket-karte__header");
 
-        // Name
         const name = document.createElement("h3");
         name.classList.add("paket-karte__name");
         name.textContent = paket.name;
-        karte.appendChild(name);
+        header.appendChild(name);
 
-        // Preis
+        if (paket.badge) {
+            const badge = document.createElement("span");
+            badge.classList.add("paket-karte__badge");
+            badge.textContent = paket.badge;
+            header.appendChild(badge);
+        }
+
+        body.appendChild(header);
+
+        // 3. Preis
         const preis = document.createElement("p");
         preis.classList.add("paket-karte__preis");
 
@@ -70,15 +90,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         preis.appendChild(betrag);
         preis.appendChild(zeitraum);
-        karte.appendChild(preis);
+        body.appendChild(preis);
 
-        // Beschreibung
+        // 4. Beschreibung
         const beschreibung = document.createElement("p");
         beschreibung.classList.add("paket-karte__beschreibung");
         beschreibung.textContent = paket.beschreibung;
-        karte.appendChild(beschreibung);
+        body.appendChild(beschreibung);
 
-        // Leistungen
+        // 5. Leistungen
         const liste = document.createElement("ul");
         liste.classList.add("paket-karte__leistungen");
 
@@ -88,32 +108,25 @@ document.addEventListener("DOMContentLoaded", async () => {
             liste.appendChild(punkt);
         });
 
-        karte.appendChild(liste);
+        body.appendChild(liste);
 
-        // Button
+        // 6. Button – Link zur Paketseite
-        const button = document.createElement("button");
+        const paketLinkMap = {
+            "starter": "html/paket-starter.html",
+            "standard": "html/paket-standard.html",
+            "premium": "html/paket-premium.html"
+        };
+
+        const paketLink = paketLinkMap[paket.dataPaket] || "#";
+        const button = document.createElement("a");
         button.classList.add("paket-karte__cta");
-        button.type = "button";
+        button.href = paketLink;
-        button.textContent = "Paket wählen";
+        button.textContent = "Paket ansehen";
-        button.dataset.paket = paket.dataPaket;
+        button.setAttribute("role", "button");
-        button.setAttribute("aria-pressed", "false");
 
-        // Die Paketauswahl aus der ersten Version auch nach dem JSON-Rendering erhalten.
+        body.appendChild(button);
-        button.addEventListener("click", () => {
+        karte.appendChild(body);
-            grid.querySelectorAll(".paket-karte").forEach(andereKarte => {
-                andereKarte.classList.remove("paket-karte--ausgewaehlt");
-                andereKarte.querySelector("button").setAttribute("aria-pressed", "false");
-            });
-            karte.classList.add("paket-karte--ausgewaehlt");
-            button.setAttribute("aria-pressed", "true");
-            document.dispatchEvent(new CustomEvent("paket:ausgewaehlt", {
-                detail: { paket: button.dataset.paket }
-            }));
-        });
 
-        karte.appendChild(button);
-
-        // Karte ins Grid einfügen
         grid.appendChild(karte);
     });
 });

js/navigation.js

@@ -0,0 +1,76 @@
+(() => {
+    const navigation = document.querySelector('.site-navigation');
+    if (!navigation) return;
+
+    const button = navigation.querySelector('.menu-toggle');
+    const links = navigation.querySelector('#navigation-links');
+    const backdrop = navigation.querySelector('.site-navigation__backdrop');
+    if (!button || !links || !backdrop) return;
+
+    // Muss zum Grenzwert in navigation.css passen.
+    const mobileView = window.matchMedia('(max-width: 1100px)');
+
+    function setMenuOpen(isOpen) {
+        isOpen = isOpen && mobileView.matches;
+        navigation.classList.toggle('is-open', isOpen);
+        button.setAttribute('aria-expanded', String(isOpen));
+        button.setAttribute('aria-label', isOpen ? 'Menü schließen' : 'Menü öffnen');
+        button.textContent = isOpen ? '✕' : '☰';
+    }
+
+    button.addEventListener('click', () => {
+        setMenuOpen(button.getAttribute('aria-expanded') !== 'true');
+    });
+
+    // Nach einem Sprung bleibt der Tastaturfokus im gewählten Bereich.
+    links.addEventListener('click', (event) => {
+        const link = event.target.closest('a');
+        if (!link || !mobileView.matches) return;
+        setMenuOpen(false);
+        // Nur Anker-Sprünge innerhalb der Seite; Links zu anderen Seiten übernimmt der Browser.
+        const href = link.getAttribute('href');
+        if (!href || !href.startsWith('#')) return;
+        const target = document.querySelector(href);
+        if (target) {
+            const hadTabindex = target.hasAttribute('tabindex');
+            if (!hadTabindex) target.setAttribute('tabindex', '-1');
+            requestAnimationFrame(() => target.focus({ preventScroll: true }));
+            if (!hadTabindex) {
+                target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+            }
+        }
+    });
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') {
+            setMenuOpen(false);
+            button.focus();
+        }
+    });
+
+    backdrop.addEventListener('click', () => {
+        setMenuOpen(false);
+        button.focus();
+    });
+
+    // Das Menü bleibt beim Weitergehen mit Tab nicht über dem Seiteninhalt liegen.
+    navigation.addEventListener('focusout', (event) => {
+        if (!navigation.contains(event.relatedTarget)) setMenuOpen(false);
+    });
+
+    mobileView.addEventListener('change', () => {
+        const focusedElement = document.activeElement;
+        setMenuOpen(false);
+        if (mobileView.matches && links.contains(focusedElement)) button.focus();
+        if (!mobileView.matches && focusedElement === button) links.querySelector('a')?.focus();
+    });
+
+    // Berücksichtigt auch umgebrochene Texte und vergrößerte Schrift.
+    const headerObserver = new ResizeObserver(() => {
+        document.documentElement.style.setProperty(
+            '--navigation-offset', `${navigation.getBoundingClientRect().height}px`
+        );
+    });
+    headerObserver.observe(navigation);
+    setMenuOpen(false);
+})();

js/terminbuchung-form.js

@@ -0,0 +1,382 @@
+// 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.
+
+// ----- Scroll-Reveal -----
+(function () {
+    const elements = document.querySelectorAll(".terminbuchung-seite .reveal");
+    if (!elements.length) return;
+
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+        elements.forEach(function (el) {
+            el.classList.add("visible");
+        });
+        return;
+    }
+
+    const observer = new IntersectionObserver(
+        function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("visible");
+                    observer.unobserve(entry.target);
+                }
+            });
+        },
+        { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
+    );
+
+    elements.forEach(function (el) {
+        observer.observe(el);
+    });
+})();
+
+// ----- 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");
+    const addButton = document.getElementById("tag-add");
+    const liste = document.getElementById("tag-list");
+    if (!input || !addButton || !liste) return;
+
+    const tags = [];
+    const MAX_TAGS = 20;
+
+    function tagHinzufuegen() {
+        let wert = input.value.trim().replace(/^#+/, "").trim();
+        if (!wert) return;
+        if (tags.length >= MAX_TAGS) {
+            input.value = "";
+            return;
+        }
+        // Doppelte Einträge (groß/kleinschreibungsgleich) werden nicht aufgenommen.
+        const existiert = tags.some(function (t) {
+            return t.toLowerCase() === wert.toLowerCase();
+        });
+        if (!existiert) {
+            tags.push(wert);
+        }
+        input.value = "";
+        zeichnen();
+    }
+
+    function tagEntfernen(index) {
+        tags.splice(index, 1);
+        zeichnen();
+    }
+
+    function zeichnen() {
+        liste.innerHTML = "";
+        tags.forEach(function (wert, index) {
+            const li = document.createElement("li");
+            li.className = "tb-tag";
+
+            const text = document.createElement("span");
+            text.textContent = wert;
+
+            const entfernen = document.createElement("button");
+            entfernen.type = "button";
+            entfernen.setAttribute("aria-label", "Tag entfernen: " + wert);
+            entfernen.innerHTML = "&times;";
+            entfernen.addEventListener("click", function () {
+                tagEntfernen(index);
+            });
+
+            li.appendChild(text);
+            li.appendChild(entfernen);
+            liste.appendChild(li);
+        });
+    }
+
+    addButton.addEventListener("click", tagHinzufuegen);
+    input.addEventListener("keydown", function (event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            tagHinzufuegen();
+        }
+    });
+
+    // Für das E-Mail-Body: aktuelle Tag-Liste als Text.
+    window.TerminbuchungTags = {
+        holen: function () {
+            return tags.slice();
+        },
+        leeren: function () {
+            tags.length = 0;
+            zeichnen();
+        }
+    };
+})();
+
+// ----- Formularprüfung und Absenden -----
+(function () {
+    const form = document.getElementById("terminbuchung-formular");
+    if (!form) return;
+
+    const EMAIL_TARGET = "info@trihub.de";
+    const bestaetigungDialog = document.getElementById("anfrage-bestaetigung");
+
+    const fields = {
+        art: form.querySelector("[name='art']"),
+        format: form.querySelector("[name='format']"),
+        gespraech: form.querySelector("[name='gespraech']"),
+        beschreibung: form.querySelector("[name='beschreibung']"),
+        name: form.querySelector("[name='name']"),
+        email: form.querySelector("[name='email']"),
+        phone: form.querySelector("[name='phone']")
+    };
+
+    const statusEl = document.getElementById("form-status");
+    const formularBereich = document.getElementById("formular");
+    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");
+
+    function wrap(el) {
+        return el.closest(".field");
+    }
+
+    function setFieldState(el, state) {
+        const box = wrap(el);
+        if (!box) return;
+        box.classList.remove("has-error", "is-ok");
+        el.classList.remove("invalid", "valid");
+        if (state === "error") {
+            box.classList.add("has-error");
+            el.classList.add("invalid");
+        } else if (state === "ok") {
+            box.classList.add("is-ok");
+            el.classList.add("valid");
+        }
+    }
+
+    function validateName() {
+        const ok = fields.name.value.trim().length > 0;
+        setFieldState(fields.name, ok ? null : "error");
+        return ok;
+    }
+
+    function validateEmail() {
+        const value = fields.email.value.trim();
+        const ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value);
+        setFieldState(fields.email, ok ? null : "error");
+        return ok;
+    }
+
+    function validateSelect(key) {
+        const ok = fields[key].value !== "";
+        setFieldState(fields[key], ok ? null : "error");
+        return ok;
+    }
+
+    function allValid() {
+        return (
+            fields.art.value !== "" &&
+            fields.format.value !== "" &&
+            fields.gespraech.value !== "" &&
+            fields.name.value.trim().length > 0 &&
+            /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(fields.email.value.trim())
+        );
+    }
+
+    function updateSubmitState() {
+        const submit = form.querySelector("[type='submit']");
+        if (submit) {
+            submit.disabled = !allValid();
+        }
+    }
+
+    form.addEventListener("input", updateSubmitState);
+    form.addEventListener("change", updateSubmitState);
+
+    ["name", "email"].forEach(function (key) {
+        fields[key].addEventListener("blur", function () {
+            if (fields[key].value.trim() !== "" || form.dataset.touched === "true") {
+                ({ name: validateName, email: validateEmail })[key]();
+            }
+        });
+    });
+
+    ["art", "format", "gespraech"].forEach(function (key) {
+        fields[key].addEventListener("change", function () {
+            validateSelect(key);
+        });
+    });
+
+    // Termin-Angaben aus der URL für das E-Mail übernehmen.
+    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 elBerater = document.getElementById("tb-berater");
+
+    function labelVon(key) {
+        const select = fields[key];
+        return select.options[select.selectedIndex].text;
+    }
+
+    function werteAnzeigen(werte) {
+        pruefDetails.replaceChildren();
+        werte.forEach(function (eintrag) {
+            const label = document.createElement("dt");
+            label.textContent = eintrag[0];
+            const wert = document.createElement("dd");
+            wert.textContent = eintrag[1] || "–";
+            pruefDetails.append(label, wert);
+        });
+    }
+
+    bearbeitenButton.addEventListener("click", function () {
+        pruefBereich.hidden = true;
+        formularBereich.hidden = false;
+        formularBereich.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
+    sendenLink.addEventListener("click", function (event) {
+        event.preventDefault();
+        bestaetigungDialog.showModal();
+        window.location.href = sendenLink.href;
+    });
+
+    form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        form.dataset.touched = "true";
+
+        const okArt = validateSelect("art");
+        const okFormat = validateSelect("format");
+        const okGespraech = validateSelect("gespraech");
+        const okName = validateName();
+        const okEmail = validateEmail();
+
+        if (!(okArt && okFormat && okGespraech && okName && okEmail)) {
+            showStatus("error", "Bitte überprüfe die markierten Felder und versuche es erneut.");
+            return;
+        }
+
+        const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
+        const beraterText = elBerater ? elBerater.textContent.trim() : "–";
+        const anfrageDaten = [
+            ["Berater/in", beraterText],
+            ["Termin", terminText],
+            ["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() || "–"]
+        ];
+
+        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);
+        formularBereich.hidden = true;
+        pruefBereich.hidden = false;
+        pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+
+    function showStatus(kind, text) {
+        if (!statusEl) return;
+        statusEl.textContent = kind === "ok" ? "✓ " + text : "✗ " + text;
+        statusEl.className =
+            "form-status is-visible " + (kind === "ok" ? "form-status--ok" : "form-status--error");
+    }
+
+    updateSubmitState();
+})();

js/terminbuchung.js

@@ -0,0 +1,400 @@
+// Online-Terminbuchung – Kalender-Pop-up auf der Startseite (index.html).
+// Daten: json/berater.json (Trainer mit ID) und json/terminbuchung.json
+// (Verfügbarkeit pro Trainer-ID: Datum JJJJ-MM-TT → Array von Uhrzeiten HH:MM).
+
+(function () {
+    "use strict";
+
+    const BERATER_URL = "json/berater.json";
+    const TERMINE_URL = "json/terminbuchung.json";
+    const ZIELSEITE = "html/terminbuchung.html";
+
+    const MONATE = [
+        "Januar", "Februar", "März", "April", "Mai", "Juni",
+        "Juli", "August", "September", "Oktober", "November", "Dezember"
+    ];
+    const WOCHE = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+
+    let beraterDaten = [];   // [{id, name, ...}]
+    let terminDaten = {};    // { "1": { "2026-10-05": ["09:00", ...] }, ... }
+    let geladen = null;      // Promise, die auf das Laden beider JSON-Dateien wartet
+
+    let overlay = null;      // DOM: Pop-up (wird einmalig erzeugt)
+    let istGeoeffnet = false;
+    let fokusVorher = null;  // Element, das vor dem Öffnen Fokus hatte
+
+    const zustand = {
+        beraterId: null,
+        jahr: 0,
+        monat: 0,            // 0-basiert
+        datum: null,         // "JJJJ-MM-TT"
+        zeit: null           // "HH:MM"
+    };
+
+    // ----- Daten laden -----
+
+    function ladeDaten() {
+        if (geladen) return geladen;
+        geladen = Promise.all([
+            fetch(BERATER_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("berater.json: HTTP " + r.status)))),
+            fetch(TERMINE_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("terminbuchung.json: HTTP " + r.status))))
+        ])
+            .then(([berater, termine]) => {
+                beraterDaten = Array.isArray(berater.berater) ? berater.berater : [];
+                terminDaten = termine && typeof termine === "object" ? termine : {};
+            })
+            .catch((error) => {
+                console.error("Terminbuchung: Daten konnten nicht geladen werden.", error);
+            });
+        return geladen;
+    }
+
+    // ----- Hilfsfunktionen -----
+
+    function pad(n) {
+        return String(n).padStart(2, "0");
+    }
+
+    function datumSchluessel(jahr, monat, tag) {
+        return `${jahr}-${pad(monat + 1)}-${pad(tag)}`;
+    }
+
+    function heutigerTag() {
+        const jetzt = new Date();
+        return { jahr: jetzt.getFullYear(), monat: jetzt.getMonth(), tag: jetzt.getDate() };
+    }
+
+    function istVergangen(jahr, monat, tag) {
+        const heute = heutigerTag();
+        return (
+            jahr < heute.jahr ||
+            (jahr === heute.jahr && monat < heute.monat) ||
+            (jahr === heute.jahr && monat === heute.monat && tag < heute.tag)
+        );
+    }
+
+    function zeitenFuer(beraterId, schluessel) {
+        const tabelle = terminDaten[String(beraterId)];
+        if (!tabelle || typeof tabelle !== "object") return [];
+        const zeiten = tabelle[schluessel];
+        return Array.isArray(zeiten) ? zeiten : [];
+    }
+
+    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]));
+        });
+    }
+
+    function istVerfuegbar(jahr, monat, tag) {
+        if (istVergangen(jahr, monat, tag)) return false;
+        return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
+    }
+
+    function deutscherTagText(schluessel) {
+        const [jahr, monat, tag] = schluessel.split("-").map(Number);
+        const datum = new Date(jahr, monat - 1, tag);
+        return (
+            WOCHE[(datum.getDay() + 6) % 7] + ", " +
+            pad(tag) + "." + pad(monat) + "." + jahr
+        );
+    }
+
+    function beraterName(beraterId) {
+        const treffer = beraterDaten.find((b) => Number(b.id) === Number(beraterId));
+        return treffer ? String(treffer.name).trim() : "Berater/in";
+    }
+
+    // ----- Pop-up aufbauen (einmalig) -----
+
+    function bauPopUp() {
+        if (overlay) return overlay;
+
+        const div = document.createElement("div");
+        div.innerHTML = `
+            <div class="tb-overlay" hidden>
+                <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>
+                    <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>
+                    <div class="tb-trainer"></div>
+
+                    <div class="tb-cal-head">
+                        <button type="button" class="tb-cal-nav" data-richtung="-1" aria-label="Vorheriger Monat">&#8249;</button>
+                        <span class="tb-cal-month" aria-live="polite"></span>
+                        <button type="button" class="tb-cal-nav" data-richtung="1" aria-label="Nächster Monat">&#8250;</button>
+                    </div>
+
+                    <div class="tb-cal-weekdays" aria-hidden="true">
+                        ${WOCHE.map((w) => `<span>${w}</span>`).join("")}
+                    </div>
+                    <div class="tb-cal-grid"></div>
+
+                    <ul class="tb-legend" aria-live="polite">
+                        <li><span class="tb-dot" aria-hidden="true"></span><span class="tb-legend-label"></span></li>
+                    </ul>
+
+                    <div class="tb-times" hidden>
+                        <p class="tb-times-label"></p>
+                        <div class="tb-time-chips"></div>
+                    </div>
+
+                    <button type="button" class="tb-book" disabled>Weiter zur Buchung</button>
+                    <p class="tb-hinweis">Nach der Auswahl wirst du zur Buchungsseite weitergeleitet, wo du die Details zu Beratung und Kontakt angibst.</p>
+                </div>
+            </div>
+        `;
+
+        overlay = div.firstElementChild;
+        document.body.appendChild(overlay);
+
+        // Trainer-Buttons füllen
+        const trainerBox = overlay.querySelector(".tb-trainer");
+        beraterDaten.forEach((berater) => {
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = "tb-trainer-btn";
+            btn.textContent = String(berater.name).trim();
+            btn.dataset.beraterId = berater.id;
+            btn.addEventListener("click", () => trainerWaehlen(Number(berater.id)));
+            trainerBox.appendChild(btn);
+        });
+
+        // Monatsnavigation
+        overlay.querySelectorAll(".tb-cal-nav").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                verschiebeMonat(Number(btn.dataset.richtung));
+            });
+        });
+
+        // Schließen: Knopf, Klick auf den Schleier, Escape
+        overlay.querySelector(".tb-close").addEventListener("click", schliessen);
+        overlay.addEventListener("click", (event) => {
+            if (event.target === overlay) schliessen();
+        });
+        document.addEventListener("keydown", (event) => {
+            if (istGeoeffnet && event.key === "Escape") schliessen();
+        });
+
+        // Buchen
+        overlay.querySelector(".tb-book").addEventListener("click", buchen);
+
+        return overlay;
+    }
+
+    // ----- Öffnen / Schließen -----
+
+    async function oeffnen(beraterId) {
+        await ladeDaten();
+
+        // Ohne Berater-Daten gibt es nichts auszuwählen – Pop-up bleibt geschlossen.
+        if (!beraterDaten.length) {
+            console.error("Terminbuchung: Keine Berater geladen – Pop-up wird nicht geöffnet.");
+            return;
+        }
+
+        bauPopUp();
+
+        const heute = heutigerTag();
+        zustand.jahr = heute.jahr;
+        zustand.monat = heute.monat;
+        trainerWaehlen(beraterId != null ? Number(beraterId) : beraterDaten[0].id);
+
+        overlay.hidden = false;
+        istGeoeffnet = true;
+        fokusVorher = document.activeElement;
+        document.body.style.overflow = "hidden";
+        overlay.querySelector(".tb-close").focus();
+    }
+
+    function schliessen() {
+        if (!istGeoeffnet) return;
+        overlay.hidden = true;
+        istGeoeffnet = false;
+        document.body.style.overflow = "";
+        if (fokusVorher && typeof fokusVorher.focus === "function") {
+            fokusVorher.focus();
+        }
+    }
+
+    // ----- Auswahl-Logik -----
+
+    function trainerWaehlen(beraterId) {
+        zustand.beraterId = beraterId;
+        zustand.datum = null;
+        zustand.zeit = null;
+
+        overlay.querySelectorAll(".tb-trainer-btn").forEach((btn) => {
+            const aktiv = Number(btn.dataset.beraterId) === Number(beraterId);
+            btn.classList.toggle("is-active", aktiv);
+            btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
+        });
+
+        legendeAktualisieren();
+        zeitenBereichZuruecksetzen();
+        kalenderZeichnen();
+        buchButtonAktualisieren();
+    }
+
+    function legendeAktualisieren() {
+        const dot = overlay.querySelector(".tb-legend .tb-dot");
+        const label = overlay.querySelector(".tb-legend-label");
+        const verfuegbar = hatFreieTermine(zustand.beraterId);
+        dot.className = "tb-dot " + (verfuegbar ? "tb-dot--verfuegbar" : "tb-dot--nicht");
+        label.textContent = verfuegbar ? "Verfügbar" : "Nicht verfügbar";
+    }
+
+    function verschiebeMonat(richtung) {
+        const heute = heutigerTag();
+        let ziel = zustand.jahr * 12 + zustand.monat + richtung;
+        if (ziel < heute.jahr * 12 + heute.monat) return; // nicht vor dem aktuellen Monat
+
+        zustand.jahr = Math.floor(ziel / 12);
+        zustand.monat = ziel % 12;
+        zustand.datum = null;
+        zustand.zeit = null;
+        zeitenBereichZuruecksetzen();
+        kalenderZeichnen();
+        buchButtonAktualisieren();
+    }
+
+    function tagKlicken(jahr, monat, tag) {
+        if (!istVerfuegbar(jahr, monat, tag)) return;
+        zustand.datum = datumSchluessel(jahr, monat, tag);
+        zustand.zeit = null;
+        kalenderZeichnen();
+        zeitenZeichnen();
+        buchButtonAktualisieren();
+    }
+
+    function zeitKlicken(zeit) {
+        zustand.zeit = zeit;
+        overlay.querySelectorAll(".tb-time-chip").forEach((chip) => {
+            chip.classList.toggle("is-active", chip.dataset.zeit === zeit);
+        });
+        buchButtonAktualisieren();
+    }
+
+    function buchen() {
+        if (!zustand.datum || !zustand.zeit || zustand.beraterId == null) return;
+        const ziel =
+            ZIELSEITE +
+            "?berater=" + encodeURIComponent(zustand.beraterId) +
+            "&datum=" + encodeURIComponent(zustand.datum) +
+            "&zeit=" + encodeURIComponent(zustand.zeit);
+        window.location.href = ziel;
+    }
+
+    // ----- Zeichnen -----
+
+    function kalenderZeichnen() {
+        const grid = overlay.querySelector(".tb-cal-grid");
+        const monatsLabel = overlay.querySelector(".tb-cal-month");
+        const navVorher = overlay.querySelector('.tb-cal-nav[data-richtung="-1"]');
+
+        monatsLabel.textContent = `${MONATE[zustand.monat]} ${zustand.jahr}`;
+
+        // Vor dem aktuellen Monat kann nicht zurückgeblättert werden.
+        const heute = heutigerTag();
+        navVorher.disabled = zustand.jahr * 12 + zustand.monat <= heute.jahr * 12 + heute.monat;
+
+        const ersterTag = new Date(zustand.jahr, zustand.monat, 1);
+        const versatz = (ersterTag.getDay() + 6) % 7; // Montag als erste Spalte
+        const tageImMonat = new Date(zustand.jahr, zustand.monat + 1, 0).getDate();
+        const heuteInfo = heutigerTag();
+
+        grid.innerHTML = "";
+        for (let i = 0; i < versatz; i++) {
+            const leer = document.createElement("span");
+            leer.className = "tb-day tb-day--leer";
+            grid.appendChild(leer);
+        }
+
+        for (let tag = 1; tag <= tageImMonat; tag++) {
+            const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
+            const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
+            const vergangen = istVergangen(zustand.jahr, zustand.monat, tag);
+
+            const btn = document.createElement("button");
+            btn.type = "button";
+            let klassen = "tb-day ";
+            if (verfuegbar) {
+                klassen += "tb-day--verfuegbar";
+            } else {
+                klassen += "tb-day--neutral";
+            }
+            if (
+                zustand.jahr === heuteInfo.jahr &&
+                zustand.monat === heuteInfo.monat &&
+                tag === heuteInfo.tag
+            ) {
+                klassen += " tb-day--heute";
+            }
+            if (zustand.datum === schluessel) {
+                klassen += " tb-day--ausgewaehlt";
+            }
+            btn.className = klassen;
+            btn.textContent = tag;
+            btn.disabled = !verfuegbar;
+            const status = verfuegbar ? "verfügbar" : vergangen ? "vergangen" : "keine Termine eingetragen";
+            btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${status}`);
+            if (verfuegbar) {
+                btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
+            }
+            grid.appendChild(btn);
+        }
+    }
+
+    function zeitenBereichZuruecksetzen() {
+        const bereich = overlay.querySelector(".tb-times");
+        bereich.hidden = true;
+        overlay.querySelector(".tb-time-chips").innerHTML = "";
+        overlay.querySelector(".tb-times-label").textContent = "";
+    }
+
+    function zeitenZeichnen() {
+        const bereich = overlay.querySelector(".tb-times");
+        const label = overlay.querySelector(".tb-times-label");
+        const chips = overlay.querySelector(".tb-time-chips");
+        const zeiten = zeitenFuer(zustand.beraterId, zustand.datum);
+
+        if (!zeiten.length) {
+            bereich.hidden = true;
+            return;
+        }
+
+        label.innerHTML = `Wähle eine Uhrzeit für <strong>${deutscherTagText(zustand.datum)}</strong> bei ${beraterName(zustand.beraterId)}:`;
+        chips.innerHTML = "";
+        zeiten.forEach((zeit) => {
+            const chip = document.createElement("button");
+            chip.type = "button";
+            chip.className = "tb-time-chip" + (zustand.zeit === zeit ? " is-active" : "");
+            chip.dataset.zeit = zeit;
+            chip.textContent = zeit.replace(":", ".") + " Uhr";
+            chip.addEventListener("click", () => zeitKlicken(zeit));
+            chips.appendChild(chip);
+        });
+        bereich.hidden = false;
+    }
+
+    function buchButtonAktualisieren() {
+        const btn = overlay.querySelector(".tb-book");
+        btn.disabled = !(zustand.datum && zustand.zeit && zustand.beraterId != null);
+    }
+
+    // ----- Öffentliche Schnittstelle (wird von berater.js genutzt) -----
+
+    window.Terminbuchung = {
+        oeffnen,
+        schliessen,
+        istGeoeffnet: () => istGeoeffnet
+    };
+})();

json/berater.json

@@ -22,7 +22,8 @@
                 },
                 {
                     "text": "Trainingsplan buchen",
-                    "url": "https://tri-hub.de/booking"
+                    "url": "https://tri-hub.de/booking",
+                    "aktion": "terminbuchung"
                 }
             ]
         },
@@ -44,7 +45,8 @@
                 },
                 {
                     "text": "Trainingsplan buchen",
-                    "url": "https://tri-hub.de/booking"
+                    "url": "https://tri-hub.de/booking",
+                    "aktion": "terminbuchung"
                 }
             ]
         }

json/pakete.json

@@ -5,7 +5,7 @@
   },
   "pakete": [
     {
-      "name": "Starter",
+      "name": "STARTER",
       "preis": 79,
       "zeitraum": "Monat",
       "beschreibung": "Für den Einstieg in eine bewusste Ernährung neben dem Training.",
@@ -17,10 +17,10 @@
       ],
       "badge": null,
       "empfohlen": false,
-      "dataPaket": "Starter"
+      "dataPaket": "starter"
     },
     {
-      "name": "STANDART",
+      "name": "STANDARD",
       "preis": 149,
       "zeitraum": "Monat",
       "beschreibung": "Laufende Begleitung für alle, die regelmäßig für Wettkämpfe trainieren.",
@@ -33,15 +33,15 @@
       ],
       "badge": "Beliebteste Wahl",
       "empfohlen": true,
-      "dataPaket": "Ausdauer"
+      "dataPaket": "standard"
     },
     {
-      "name": "Rundum Sorglos Paket",
+      "name": "PREMIUM",
       "preis": 249,
       "zeitraum": "Monat",
       "beschreibung": "Volle Betreuung für ambitionierte Athletinnen und Athleten.",
       "leistungen": [
-        "Alles aus Ausdauer",
+        "Alles aus STANDARD",
         "Wöchentliche Beratungsgespräche",
         "Individuelle Supplement-Empfehlung",
         "Betreuung am Wettkampftag",
@@ -49,7 +49,7 @@
       ],
       "badge": null,
       "empfohlen": false,
-      "dataPaket": "Wettkampf"
+      "dataPaket": "premium"
     }
   ]
 }

json/terminbuchung.json

@@ -0,0 +1,93 @@
+{
+    "_hinweis": "Verfügbare Termine pro Trainer. Schlüssel = Berater-ID aus json/berater.json (z. B. \"1\"). Wert = Objekt: Datum im Format JJJJ-MM-TT als Schlüssel, Array mit Uhrzeiten (HH:MM) als Wert. Tage ohne Eintrag werden im Kalender als 'Nicht verfügbar' angezeigt. Schüssel, die mit '_' beginnen, werden von terminbuchung.js ignoriert.",
+    "1": {
+        "2026-10-05": [
+            "09:00",
+            "11:00",
+            "14:30"
+        ],
+        "2026-10-07": [
+            "10:00",
+            "15:00"
+        ],
+        "2026-10-08": [
+            "09:30",
+            "11:30",
+            "16:00"
+        ],
+        "2026-10-12": [
+            "10:00",
+            "14:00"
+        ],
+        "2026-10-14": [
+            "09:00",
+            "10:30",
+            "15:30"
+        ],
+        "2026-10-15": [
+            "11:00",
+            "16:00"
+        ],
+        "2026-10-19": [
+            "09:30",
+            "14:30"
+        ],
+        "2026-10-21": [
+            "10:00",
+            "11:30"
+        ],
+        "2026-10-22": [
+            "15:00",
+            "16:30"
+        ],
+        "2026-10-26": [
+            "09:00",
+            "10:30",
+            "14:00"
+        ],
+        "2026-10-28": [
+            "11:00",
+            "15:00"
+        ],
+        "2026-10-29": [
+            "09:30",
+            "16:00"
+        ]
+    },
+    "2": {
+        "2026-10-06": [
+            "10:00",
+            "14:00",
+            "16:00"
+        ],
+        "2026-10-09": [
+            "09:00",
+            "11:00"
+        ],
+        "2026-10-13": [
+            "10:30",
+            "15:00"
+        ],
+        "2026-10-16": [
+            "09:30",
+            "14:30"
+        ],
+        "2026-10-20": [
+            "10:00",
+            "11:30",
+            "16:00"
+        ],
+        "2026-10-23": [
+            "09:00",
+            "15:30"
+        ],
+        "2026-10-27": [
+            "10:30",
+            "14:00"
+        ],
+        "2026-10-30": [
+            "11:00",
+            "16:00"
+        ]
+    }
+}