Kontaktformular und Pakete korrigiert

Kommentare ergänzt, Menüabstände angepasst und Paketbild aktualisiert.

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;
@@ -194,4 +196,4 @@
 .berater-section .berater-link-btn:hover,
 .berater-section .berater-link-btn:focus-visible {
     filter: brightness(1.1);
-}
+}

css/kontakt.css

@@ -295,6 +295,7 @@
     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 {

css/leistungen.css

@@ -84,6 +84,7 @@
     position: relative;
 }
 
+/* Empfehlung kommt aus der JSON-Datei; die Auswahlklasse setzt leistungen.js beim Klick. */
 .pakete .paket-karte--empfohlen {
     border-color: 1px solid rgba(248, 250, 252, 0.08);
     box-shadow: 0 0 0 1px var(--accent-soft);
@@ -125,6 +126,7 @@
     display: block;
 }
 
+/* ---------- Karteninhalt: Paketname, Preis, Beschreibung und Leistungen ---------- */
 .pakete .paket-karte__body {
     padding: 1.75rem;
     display: flex;
@@ -200,6 +202,7 @@
     background: var(--accent);
 }
 
+/* ---------- Paketauswahl und Tastaturfokus ---------- */
 .pakete .paket-karte__cta {
     font-family: var(--font-body);
     font-weight: 600;
@@ -223,6 +226,7 @@
     outline-offset: 2px;
 }
 
+/* ---------- Spaltenwechsel: drei, zwei, dann eine; Empfehlung bleibt mobil zuerst ---------- */
 @media (max-width: 860px) {
     .pakete .pakete__grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));

css/navigation.css

@@ -1,5 +1,6 @@
 /* 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);
 }
@@ -32,6 +33,7 @@
     box-sizing: border-box;
 }
 
+/* ---------- Kopfzeile: Logo, Begleittext und Menü ---------- */
 .site-navigation__bar {
     display: flex;
     align-items: center;
@@ -50,6 +52,7 @@
     padding-block: 8px;
 }
 
+/* ---------- Navigationslinks und ihre Klickflächen ---------- */
 .site-navigation__links ul {
     display: flex;
     align-items: center;
@@ -63,6 +66,7 @@
 .site-navigation .navigation-disabled {
     display: block;
     padding-block: 10px;
+    padding-inline: 14px;
     color: var(--text-muted);
     font-size: 19px;
     font-weight: 250;
@@ -94,6 +98,7 @@
     cursor: default;
 }
 
+/* ---------- Logo und Markenname ---------- */
 .site-navigation .brand__logo {
     display: grid;
     place-items: center;
@@ -140,6 +145,7 @@
     line-height: 1.4;
 }
 
+/* ---------- Menüknopf und Hintergrund für die kompakte Ansicht ---------- */
 .site-navigation .menu-toggle {
     display: none;
     flex-shrink: 0;
@@ -220,6 +226,7 @@
     }
 }
 
+/* Kleinere Kopfzeile und Schriftgrößen auf schmalen Bildschirmen. */
 @media (max-width: 700px) {
     :root {
         --navigation-height: 81px;

css/produktuebersicht.css

@@ -15,6 +15,7 @@
     background: var(--background);
 }
 
+/* ---------- Grundlayout: Der Hero nutzt die Fensterhöhe unter der Navigation ---------- */
 .produktuebersicht,
 .produktuebersicht *,
 .produktuebersicht::before,
@@ -48,6 +49,7 @@
     flex: 1;
 }
 
+/* ---------- Hero-Bild und dunkle Verläufe für lesbaren Text ---------- */
 .produktuebersicht .hero {
     position: relative;
     isolation: isolate;
@@ -89,6 +91,7 @@
 
 
 
+/* ---------- Überschrift, Einleitung und Ausrichtung im Hero ---------- */
 .produktuebersicht .hero__inner {
     display: flex;
     flex-direction: column;
@@ -146,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;
@@ -209,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;
@@ -239,6 +244,7 @@
     background: var(--accent);
 }
 
+/* ---------- Anpassungen für Tablet und Mobilgeräte ---------- */
 @media (max-width: 1100px) {
     .produktuebersicht .hero::after {
         background:

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

@@ -5,6 +5,7 @@
     <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
@@ -13,6 +14,7 @@
     <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>
@@ -95,6 +97,7 @@
                         <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>

index.html

@@ -5,6 +5,7 @@
     <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
@@ -16,6 +17,7 @@
     <link rel="stylesheet" href="css/leistungen.css">
     <link rel="stylesheet" href="css/berater.css">
     <link rel="stylesheet" href="css/beratung.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>
@@ -35,6 +37,7 @@
                     <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">
@@ -71,6 +74,7 @@
                             </p>
                         </div>
 
+                        <!-- Vorteile der Beratung und ergänzender Slogan. -->
                         <div class="hero__details">
                             <ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
                                 <li>
@@ -98,6 +102,7 @@
         </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>
@@ -128,6 +133,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>
@@ -196,6 +202,7 @@
 
     
                 <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
@@ -207,6 +214,7 @@
 
 
             </section>
+            <!-- Seitenabschluss mit internen Links, Trihub-Angeboten und rechtlichen Informationen. -->
             <footer class="site-footer">
                 <div class="container">
                     <div class="footer-grid">

js/kontakt.js

@@ -125,10 +125,13 @@
         }
     }
 
+    // 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();
-        updateSubmitState();
     });
 
     ["name", "email", "subject"].forEach(function (key) {

js/leistungen.js

@@ -30,7 +30,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     // Platzhalter-Pfade für die drei generierten Bilder
     const bilderMap = {
         "STARTER": "images/paket-starter.jpg",
-        "STANDART": "images/paket-standard.jpg",
+        "STANDARD": "images/paket-standard.jpg",
         "PREMIUM": "images/paket-premium.jpg"
     };
 
@@ -135,4 +135,4 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         grid.appendChild(karte);
     });
-});
+});

json/pakete.json

@@ -20,7 +20,7 @@
       "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,7 +33,7 @@
       ],
       "badge": "Beliebteste Wahl",
       "empfohlen": true,
-      "dataPaket": "Ausdauer"
+      "dataPaket": "STANDARD"
     },
     {
       "name": "PREMIUM",
@@ -41,7 +41,7 @@
       "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"
     }
   ]
 }