V-US-01-02: Leistungsübersicht Packete in Json gekappselt

css/style.css

@@ -0,0 +1,194 @@
+/* ==========================================================
+   tri-hub.de – Design-DNA (Block 4, Projekt-Kickoff)
+   Hintergrund:  #0d0d1a / #1a1a2e
+   Akzent:       #10B981 (Teal / Emerald Green)
+   Primärtext:   #ffffff / #F8FAFC / #94A3B8
+   Typografie:   Playfair Display (Display) + Inter (Body)
+   Ton:          Du-Ansprache, Premium, direkt
+   ========================================================== */
+
+:root {
+    --bg-dark: #0d0d1a;
+    --bg-panel: #1a1a2e;
+    --accent: #10B981;
+    --accent-soft: rgba(16, 185, 129, 0.12);
+    --text-primary: #ffffff;
+    --text-secondary: #F8FAFC;
+    --text-muted: #94A3B8;
+
+    --font-display: "Inter", system-ui, sans-serif;
+    --font-body: "Inter", system-ui, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background: var(--bg-dark);
+    color: var(--text-secondary);
+    font-family: var(--font-body);
+}
+
+/* ---------- Leistungsübersicht ---------- */
+
+.pakete {
+    padding: 5rem 1.5rem;
+    max-width: 1120px;
+    margin: 0 auto;
+}
+
+.pakete__intro {
+    text-align: center;
+    max-width: 42rem;
+    margin: 0 auto 3rem;
+}
+
+.pakete__titel {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.8rem, 3vw, 2.4rem);
+    color: var(--text-primary);
+    margin: 0 0 0.75rem;
+}
+
+.pakete__text {
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Kästchen nebeneinander, jede Karte für sich */
+.pakete__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    align-items: stretch;
+}
+
+.paket-karte {
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-panel);
+    border: 1px solid rgba(248, 250, 252, 0.08);
+    border-radius: 14px;
+    padding: 2rem 1.75rem;
+    position: relative;
+}
+
+.paket-karte--empfohlen {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent-soft);
+}
+
+.paket-karte--ausgewaehlt {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent);
+}
+
+.paket-karte__badge {
+    position: absolute;
+    top: -0.7rem;
+    left: 1.75rem;
+    background: var(--accent);
+    color: var(--bg-dark);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    margin: 0;
+}
+
+.paket-karte__name {
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 1.4rem;
+    color: var(--text-primary);
+    margin: 0 0 0.5rem;
+}
+
+.paket-karte__preis {
+    margin: 0 0 0.75rem;
+    display: flex;
+    align-items: baseline;
+    gap: 0.35rem;
+}
+
+.paket-karte__betrag {
+    font-family: var(--font-display);
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.paket-karte__zeitraum {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.paket-karte__beschreibung {
+    color: var(--text-muted);
+    line-height: 1.55;
+    margin: 0 0 1.5rem;
+    min-height: 3.3em;
+}
+
+.paket-karte__leistungen {
+    list-style: none;
+    margin: 0 0 2rem;
+    padding: 0;
+    flex-grow: 1;
+}
+
+.paket-karte__leistungen li {
+    position: relative;
+    padding-left: 1.4rem;
+    margin-bottom: 0.7rem;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.paket-karte__leistungen li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.5em;
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    background: var(--accent);
+}
+
+.paket-karte__cta {
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--bg-dark);
+    background: var(--accent);
+    border: none;
+    border-radius: 8px;
+    padding: 0.85rem 1rem;
+    cursor: pointer;
+    transition: filter 0.15s ease;
+}
+
+.paket-karte__cta:hover,
+.paket-karte__cta:focus-visible {
+    filter: brightness(1.1);
+}
+
+.paket-karte__cta:focus-visible {
+    outline: 2px solid var(--text-primary);
+    outline-offset: 2px;
+}
+
+@media (max-width: 860px) {
+    .pakete__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .paket-karte--empfohlen {
+        order: -1;
+    }
+}

index.html

@@ -5,25 +5,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ernährungsberater</title>
+    <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=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
-    <!-- Leistungsübersicht Vincent-->
-    <section>
 
-    </section>
+    <!-- US-01-02 Leistungsübersicht -->
-    <!-- Berater & Qualifikationen Ahmad -->
-    <section>
     
-    </section>
+    <section id="leistungen" class="pakete">
-    <!-- Info über Beratung Dennis-->
+        <div class="pakete__intro">
-    <section>
+          <h2 class="pakete__titel"></h2>
+           <p class="pakete__text"></p>
+        </div>
 
+        <div class="pakete__grid"></div>
     </section>
-    <!-- Produktsübersicht Shahnam -->
+    <script src="js/script.js"></script>
-    <section>
    
-    </section>
 </body>
 
 </html>

js/script.js

@@ -0,0 +1,95 @@
+// US-01-02 Leistungsübersicht
+// Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
+// damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.
+
+document.addEventListener("DOMContentLoaded", async () => {
+
+    // JSON-Datei laden
+    const response = await fetch("data/pakete.json");
+    const daten = await response.json();
+
+    // Elemente aus dem HTML holen
+    const titel = document.querySelector(".pakete__titel");
+    const text = document.querySelector(".pakete__text");
+    const grid = document.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
+    daten.pakete.forEach(paket => {
+
+        // Artikel erstellen
+        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
+        if (paket.badge) {
+            const badge = document.createElement("p");
+            badge.classList.add("paket-karte__badge");
+            badge.textContent = paket.badge;
+            karte.appendChild(badge);
+        }
+
+        // Name
+        const name = document.createElement("h3");
+        name.classList.add("paket-karte__name");
+        name.textContent = paket.name;
+        karte.appendChild(name);
+
+        // Preis
+        const preis = document.createElement("p");
+        preis.classList.add("paket-karte__preis");
+
+        const betrag = document.createElement("span");
+        betrag.classList.add("paket-karte__betrag");
+        betrag.textContent = `${paket.preis} €`;
+
+        const zeitraum = document.createElement("span");
+        zeitraum.classList.add("paket-karte__zeitraum");
+        zeitraum.textContent = `/ ${paket.zeitraum}`;
+
+        preis.appendChild(betrag);
+        preis.appendChild(zeitraum);
+        karte.appendChild(preis);
+
+        // Beschreibung
+        const beschreibung = document.createElement("p");
+        beschreibung.classList.add("paket-karte__beschreibung");
+        beschreibung.textContent = paket.beschreibung;
+        karte.appendChild(beschreibung);
+
+        // Leistungen
+        const liste = document.createElement("ul");
+        liste.classList.add("paket-karte__leistungen");
+
+        paket.leistungen.forEach(leistung => {
+            const punkt = document.createElement("li");
+            punkt.textContent = leistung;
+            liste.appendChild(punkt);
+        });
+
+        karte.appendChild(liste);
+
+        // Button
+        const button = document.createElement("button");
+        button.classList.add("paket-karte__cta");
+        button.type = "button";
+        button.textContent = "Paket wählen";
+        button.dataset.paket = paket.dataPaket;
+
+        karte.appendChild(button);
+
+        // Karte ins Grid einfügen
+        grid.appendChild(karte);
+    });
+});

json/pakete.json

@@ -0,0 +1,55 @@
+{
+  "intro": {
+    "titel": "Deine Pakete",
+    "text": "Drei Wege zu einer Ernährung, die zu deinem Training, deinem Alltag und deinem Alter passt – entwickelt für Triathletinnen und Triathleten ab 50."
+  },
+  "pakete": [
+    {
+      "name": "Starter",
+      "preis": 79,
+      "zeitraum": "Monat",
+      "beschreibung": "Für den Einstieg in eine bewusste Ernährung neben dem Training.",
+      "leistungen": [
+        "Erstgespräch & Bedarfsanalyse",
+        "Individueller Ernährungsplan",
+        "Monatliches Check-in per E-Mail",
+        "Zugang zu Beispielplänen"
+      ],
+      "badge": null,
+      "empfohlen": false,
+      "dataPaket": "Starter"
+    },
+    {
+      "name": "STANDART",
+      "preis": 149,
+      "zeitraum": "Monat",
+      "beschreibung": "Laufende Begleitung für alle, die regelmäßig für Wettkämpfe trainieren.",
+      "leistungen": [
+        "Alles aus Starter",
+        "Plan-Anpassung je Trainingsphase",
+        "Zwei Beratungsgespräche pro Monat",
+        "Wettkampf-Ernährungsstrategie",
+        "Direkter Chat mit deiner Beraterin"
+      ],
+      "badge": "Beliebteste Wahl",
+      "empfohlen": true,
+      "dataPaket": "Ausdauer"
+    },
+    {
+      "name": "Rundum Sorglos Paket",
+      "preis": 249,
+      "zeitraum": "Monat",
+      "beschreibung": "Volle Betreuung für ambitionierte Athletinnen und Athleten.",
+      "leistungen": [
+        "Alles aus Ausdauer",
+        "Wöchentliche Beratungsgespräche",
+        "Individuelle Supplement-Empfehlung",
+        "Betreuung am Wettkampftag",
+        "Priorisierter Support"
+      ],
+      "badge": null,
+      "empfohlen": false,
+      "dataPaket": "Wettkampf"
+    }
+  ]
+}