Sektinen in index.html aufgeteilt

2026-09-24 16:01:42 +02:00
7 changed files with 15 additions and 360 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/css/style.css
+++ b/css/style.css
@ -1,194 +0,0 @@
-/* ==========================================================
-   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;
-    }
-}
--- a/index.html
+++ b/index.html
@ -5,26 +5,25 @@
    <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>

-    <!-- US-01-02 Leistungsübersicht -->
-    
-    <section id="leistungen" class="pakete">
-        <div class="pakete__intro">
-          <h2 class="pakete__titel"></h2>
-           <p class="pakete__text"></p>
-        </div>
-
-        <div class="pakete__grid"></div>
    </section>
-    <script src="js/script.js"></script>
+    <!-- Berater & Qualifikationen Ahmad -->
+    <section>

+    </section>
+    <!-- Info über Beratung Dennis-->
+    <section>
+
+    </section>
+    <!-- Produktsübersicht Shahnam -->
+    <section>
+
+    </section>
 </body>

 </html>
--- a/js/script.js
+++ b/js/script.js
@ -1,95 +0,0 @@
-// 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);
-    });
-});
--- a/json/pakete.json
+++ b/json/pakete.json
@ -1,55 +0,0 @@
-{
-  "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"
-    }
-  ]
-}
--- a/script.js
+++ b/script.js
--- a/style.css
+++ b/style.css