From f507fb516659597ff050c8a08c640aedc605221c Mon Sep 17 00:00:00 2001
From: Niels Yannick Tietze <3020513@stud.hs-mannheim.de>
Date: Fri, 25 Sep 2026 11:08:39 +0200
Subject: [PATCH] Eigentliche Version

---
 src/design/tri-hub-ernaehrungsberatung.html | 1195 ++++++++++++++-----
 1 file changed, 890 insertions(+), 305 deletions(-)
diff --git a/src/design/tri-hub-ernaehrungsberatung.html b/src/design/tri-hub-ernaehrungsberatung.html
index aeecc7d..8a6bbcb 100644
--- a/src/design/tri-hub-ernaehrungsberatung.html
+++ b/src/design/tri-hub-ernaehrungsberatung.html
@@ -1,321 +1,906 @@
 <!doctype html>
 <html lang="de">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>TRI-HUB – Ernährungsberatung</title>
-        <!-- Einbindung der zentralen styles.css zur Komprimierung und Nutzung der Styles -->
-        <link rel="stylesheet" href="styles.css" />
-    </head>
-    <body
-        class="bg-slate-950 text-slate-100 antialiased selection:bg-cyan-500/30 selection:text-white"
-    >
-        <!-- Header / Navigationsleiste -->
-        <header class="sticky top-0 z-50 panel-glass border-b border-white/10">
-            <div
-                class="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8"
-            >
-                <a
-                    href="/"
-                    class="flex items-center gap-2 font-display text-xl font-bold tracking-tight text-white"
-                >
-                    <span class="text-cyan-400">TRI-HUB</span>
-                    <span
-                        class="text-xs uppercase tracking-widest text-slate-400"
-                        >| Ernährungsberatung</span
-                    >
-                </a>
-                <nav
-                    class="hidden md:flex items-center gap-6 text-sm font-medium"
-                >
-                    <a
-                        href="#ansatz"
-                        class="text-slate-300 hover:text-white transition-colors"
-                        >Unser Ansatz</a
-                    >
-                    <a
-                        href="#leistungen"
-                        class="text-slate-300 hover:text-white transition-colors"
-                        >Leistungen</a
-                    >
-                    <a
-                        href="#pakete"
-                        class="text-slate-300 hover:text-white transition-colors"
-                        >Pakete</a
-                    >
-                    <a
-                        href="#kontakt"
-                        class="rounded-full bg-cyan-500 px-4 py-2 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
-                        >Beratung buchen</a
-                    >
-                </nav>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Ernährungsberatung bei Tri-hub: Essen, Trinken und Energiemanagement für deinen Triathlon ab 50.">
+  <title>Ernährung · Tri-hub</title>
+
+  <!-- Bestehende Tri-hub CSS als Basis -->
+  <link rel="stylesheet" href="index-liXdJwgt.css">
+
+  <!-- Neue Typografie für diese Unterseite -->
+  <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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
+
+  <style>
+    :root {
+      --page-bg: #0d0d1a;
+      --page-bg-2: #1a1a2e;
+      --green: #10B981;
+      --green-dark: #059669;
+      --white: #ffffff;
+      --light: #F8FAFC;
+      --muted: #94A3B8;
+      --line: rgba(248,250,252,.12);
+      --panel: rgba(255,255,255,.045);
+      --panel-strong: rgba(255,255,255,.065);
+      --max: 1180px;
+    }
+
+    * { box-sizing: border-box; }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      margin: 0;
+      min-width: 320px;
+      color: var(--light);
+      background:
+        radial-gradient(circle at 12% 0%, rgba(16,185,129,.09), transparent 30%),
+        radial-gradient(circle at 88% 26%, rgba(16,185,129,.055), transparent 27%),
+        linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
+      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.6;
+    }
+
+    a { color: inherit; text-decoration: none; }
+
+    h1, h2, h3 {
+      margin: 0;
+      font-family: "Playfair Display", Georgia, serif;
+      font-weight: 600;
+      letter-spacing: -.025em;
+      line-height: 1.05;
+    }
+
+    p { margin: 0; }
+
+    .site-header {
+      position: sticky;
+      top: 0;
+      z-index: 50;
+      border-bottom: 1px solid rgba(248,250,252,.08);
+      background: rgba(13,13,26,.84);
+      backdrop-filter: blur(18px);
+      -webkit-backdrop-filter: blur(18px);
+    }
+
+    .nav {
+      width: min(var(--max), calc(100% - 40px));
+      min-height: 76px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 28px;
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      font-size: 1.3rem;
+      font-weight: 700;
+      letter-spacing: -.04em;
+    }
+
+    .brand span { color: var(--green); }
+
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 26px;
+      color: var(--muted);
+      font-size: .9rem;
+      font-weight: 500;
+    }
+
+    .nav-links a {
+      transition: color .2s ease;
+    }
+
+    .nav-links a:hover,
+    .nav-links a[aria-current="page"] { color: var(--white); }
+
+    .nav-cta {
+      padding: 11px 16px;
+      border: 1px solid rgba(16,185,129,.42);
+      border-radius: 999px;
+      color: var(--white) !important;
+      background: rgba(16,185,129,.07);
+    }
+
+    .nav-cta:hover { background: rgba(16,185,129,.14); }
+
+    .container {
+      width: min(var(--max), calc(100% - 40px));
+      margin: 0 auto;
+    }
+
+    .eyebrow {
+      margin-bottom: 18px;
+      color: var(--green);
+      font-size: .72rem;
+      font-weight: 700;
+      letter-spacing: .18em;
+      text-transform: uppercase;
+    }
+
+    .hero {
+      padding: 92px 0 82px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .hero-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
+      gap: 64px;
+      align-items: center;
+    }
+
+    .hero h1 {
+      max-width: 820px;
+      font-size: clamp(3.2rem, 7vw, 6.4rem);
+    }
+
+    .hero h1 .accent { color: var(--green); }
+
+    .hero-lead {
+      max-width: 700px;
+      margin-top: 30px;
+      color: var(--muted);
+      font-size: clamp(1rem, 1.7vw, 1.18rem);
+      line-height: 1.8;
+    }
+
+    .hero-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 34px;
+    }
+
+    .button {
+      display: inline-flex;
+      min-height: 48px;
+      align-items: center;
+      justify-content: center;
+      padding: 0 20px;
+      border-radius: 999px;
+      border: 1px solid transparent;
+      font-size: .9rem;
+      font-weight: 700;
+      transition: transform .2s ease, background .2s ease, border-color .2s ease;
+    }
+
+    .button:hover { transform: translateY(-2px); }
+
+    .button-primary {
+      color: #06130f;
+      background: var(--green);
+      box-shadow: 0 14px 32px rgba(16,185,129,.18);
+    }
+
+    .button-primary:hover { background: #34d399; }
+
+    .button-secondary {
+      color: var(--light);
+      border-color: rgba(148,163,184,.25);
+      background: rgba(255,255,255,.025);
+    }
+
+    .button-secondary:hover { border-color: rgba(16,185,129,.55); }
+
+    .hero-card {
+      position: relative;
+      min-height: 410px;
+      padding: 38px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      border-radius: 28px;
+      background:
+        radial-gradient(circle at 72% 18%, rgba(16,185,129,.20), transparent 32%),
+        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
+      box-shadow: 0 28px 80px rgba(0,0,0,.28);
+    }
+
+    .hero-card::before {
+      content: "";
+      position: absolute;
+      width: 230px;
+      height: 230px;
+      right: -75px;
+      top: -75px;
+      border: 1px solid rgba(16,185,129,.24);
+      border-radius: 50%;
+      box-shadow:
+        0 0 0 34px rgba(16,185,129,.035),
+        0 0 0 68px rgba(16,185,129,.02);
+    }
+
+    .hero-card-mark {
+      position: absolute;
+      top: 42px;
+      left: 38px;
+      color: rgba(16,185,129,.88);
+      font-size: 4.5rem;
+      line-height: 1;
+    }
+
+    .hero-card h2 {
+      max-width: 420px;
+      font-size: clamp(2.2rem, 4vw, 3.5rem);
+    }
+
+    .hero-card p {
+      max-width: 440px;
+      margin-top: 18px;
+      color: var(--muted);
+    }
+
+    .section {
+      padding: 96px 0;
+    }
+
+    .section + .section { border-top: 1px solid var(--line); }
+
+    .section-heading {
+      display: grid;
+      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
+      gap: 70px;
+      align-items: end;
+      margin-bottom: 48px;
+    }
+
+    .section-heading h2 {
+      font-size: clamp(2.4rem, 4.8vw, 4.5rem);
+    }
+
+    .section-intro {
+      max-width: 650px;
+      color: var(--muted);
+      line-height: 1.85;
+    }
+
+    .topic-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+
+    .topic {
+      min-height: 280px;
+      padding: 30px;
+      border: 1px solid var(--line);
+      border-radius: 22px;
+      background: var(--panel);
+      transition: transform .2s ease, border-color .2s ease, background .2s ease;
+    }
+
+    .topic:hover {
+      transform: translateY(-4px);
+      border-color: rgba(16,185,129,.34);
+      background: var(--panel-strong);
+    }
+
+    .topic-number {
+      margin-bottom: 70px;
+      color: var(--green);
+      font-size: .75rem;
+      font-weight: 700;
+      letter-spacing: .14em;
+    }
+
+    .topic h3 { font-size: 1.8rem; }
+
+    .topic p {
+      margin-top: 14px;
+      color: var(--muted);
+      font-size: .95rem;
+    }
+
+    .knowledge {
+      display: grid;
+      grid-template-columns: .85fr 1.15fr;
+      gap: 64px;
+      align-items: start;
+    }
+
+    .knowledge h2 {
+      font-size: clamp(2.5rem, 5vw, 4.7rem);
+    }
+
+    .knowledge-copy {
+      color: var(--muted);
+      line-height: 1.85;
+    }
+
+    .knowledge-list {
+      margin-top: 28px;
+      padding: 0;
+      list-style: none;
+      border-top: 1px solid var(--line);
+    }
+
+    .knowledge-list li {
+      padding: 18px 0;
+      display: grid;
+      grid-template-columns: 32px 1fr;
+      gap: 14px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .knowledge-list strong { color: var(--white); }
+    .knowledge-list span { color: var(--muted); }
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      margin-top: 7px;
+      border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 0 5px rgba(16,185,129,.08);
+    }
+
+    .review-section {
+      background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.035));
+    }
+
+    .review-layout {
+      display: grid;
+      grid-template-columns: .82fr 1.18fr;
+      gap: 64px;
+      align-items: start;
+    }
+
+    .review-copy h2 { font-size: clamp(2.6rem, 5vw, 4.8rem); }
+
+    .review-copy p {
+      margin-top: 22px;
+      color: var(--muted);
+      line-height: 1.85;
+    }
+
+    .review-form,
+    .review-card {
+      border: 1px solid var(--line);
+      border-radius: 22px;
+      background: var(--panel);
+    }
+
+    .review-form {
+      padding: 30px;
+    }
+
+    .review-form h3 { font-size: 2rem; }
+
+    .form-intro {
+      margin-top: 10px;
+      color: var(--muted);
+      font-size: .9rem;
+    }
+
+    .field { margin-top: 22px; }
+
+    .field label {
+      display: block;
+      margin-bottom: 8px;
+      color: var(--light);
+      font-size: .84rem;
+      font-weight: 600;
+    }
+
+    input[type="text"],
+    textarea,
+    select {
+      width: 100%;
+      border: 1px solid rgba(148,163,184,.22);
+      border-radius: 12px;
+      outline: 0;
+      color: var(--white);
+      background: rgba(13,13,26,.78);
+      font: inherit;
+      transition: border-color .2s ease, box-shadow .2s ease;
+    }
+
+    input[type="text"],
+    select {
+      height: 48px;
+      padding: 0 14px;
+    }
+
+    textarea {
+      min-height: 125px;
+      padding: 13px 14px;
+      resize: vertical;
+    }
+
+    input::placeholder,
+    textarea::placeholder { color: #64748b; }
+
+    input:focus,
+    textarea:focus,
+    select:focus {
+      border-color: rgba(16,185,129,.75);
+      box-shadow: 0 0 0 3px rgba(16,185,129,.10);
+    }
+
+    .rating-input {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+      gap: 3px;
+    }
+
+    .rating-input input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .rating-input label {
+      margin: 0;
+      cursor: pointer;
+      color: #475569;
+      font-size: 1.7rem;
+      line-height: 1;
+      transition: color .15s ease;
+    }
+
+    .rating-input label:hover,
+    .rating-input label:hover ~ label,
+    .rating-input input:checked ~ label { color: var(--green); }
+
+    .consent {
+      margin-top: 18px;
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      color: var(--muted);
+      font-size: .78rem;
+    }
+
+    .consent input {
+      margin-top: 4px;
+      accent-color: var(--green);
+    }
+
+    .review-form .button {
+      width: 100%;
+      margin-top: 22px;
+      border: 0;
+      cursor: pointer;
+    }
+
+    .form-status {
+      min-height: 20px;
+      margin-top: 12px;
+      color: var(--green);
+      font-size: .8rem;
+    }
+
+    .review-list {
+      display: grid;
+      gap: 14px;
+    }
+
+    .review-card {
+      padding: 26px;
+    }
+
+    .review-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+    }
+
+    .person {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .avatar {
+      width: 42px;
+      height: 42px;
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      color: #06130f;
+      background: var(--green);
+      font-size: .72rem;
+      font-weight: 800;
+    }
+
+    .person strong {
+      display: block;
+      color: var(--white);
+      font-size: .9rem;
+    }
+
+    .person small {
+      display: block;
+      margin-top: 2px;
+      color: var(--muted);
+      font-size: .72rem;
+    }
+
+    .stars {
+      color: var(--green);
+      letter-spacing: .08em;
+      white-space: nowrap;
+    }
+
+    .review-card blockquote {
+      margin: 22px 0 0;
+      color: var(--light);
+      font-family: "Playfair Display", Georgia, serif;
+      font-size: 1.2rem;
+      line-height: 1.55;
+    }
+
+    .review-note {
+      padding: 20px 0 0;
+      color: var(--muted);
+      font-size: .82rem;
+    }
+
+    footer {
+      padding: 30px 0 44px;
+      border-top: 1px solid var(--line);
+      color: var(--muted);
+      font-size: .8rem;
+    }
+
+    footer .container {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+    }
+
+    footer strong { color: var(--white); }
+
+    @media (max-width: 900px) {
+      .nav-links a:not(.nav-cta) { display: none; }
+
+      .hero-grid,
+      .section-heading,
+      .knowledge,
+      .review-layout {
+        grid-template-columns: 1fr;
+      }
+
+      .hero-grid { gap: 42px; }
+
+      .topic-grid { grid-template-columns: 1fr; }
+
+      .section-heading { gap: 22px; }
+
+      .hero-card { min-height: 330px; }
+    }
+
+    @media (max-width: 600px) {
+      .container,
+      .nav { width: min(var(--max), calc(100% - 28px)); }
+
+      .nav { min-height: 68px; }
+
+      .nav-cta { padding: 9px 12px; font-size: .78rem; }
+
+      .hero { padding: 64px 0; }
+
+      .section { padding: 68px 0; }
+
+      .hero h1 { font-size: clamp(2.9rem, 15vw, 4.3rem); }
+
+      .hero-card,
+      .review-form,
+      .review-card,
+      .topic { padding: 24px; }
+
+      footer .container {
+        flex-direction: column;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <header class="site-header">
+    <nav class="nav" aria-label="Hauptnavigation">
+      <a class="brand" href="https://tri-hub.de/">tri<span>-hub</span></a>
+
+      <div class="nav-links">
+        <a href="https://tri-hub.de/">Startseite</a>
+        <a href="#ernaehrung" aria-current="page">Ernährung</a>
+        <a href="#wissen">Wissen</a>
+        <a href="#erfahrungen">Erfahrungen</a>
+        <a class="nav-cta" href="#bewertung">Bewertung schreiben</a>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
+    <section class="hero" id="ernaehrung">
+      <div class="container hero-grid">
+        <div>
+          <div class="eyebrow">TRI-HUB · ERNÄHRUNG</div>
+
+          <h1>
+            Essen, Trinken<br>
+            und <span class="accent">Energie.</span>
+          </h1>
+
+          <p class="hero-lead">
+            Ernährung gehört zu deinem Training genauso wie Schwimmen, Radfahren
+            und Laufen. Hier findest du Wissen und Orientierung rund um
+            Sporternährung, Hydration, Energieaufnahme und Magenmanagement –
+            passend zu deinem Triathlon ab 50.
+          </p>
+
+          <div class="hero-actions">
+            <a class="button button-primary" href="#wissen">Ernährungswissen entdecken</a>
+            <a class="button button-secondary" href="#erfahrungen">Erfahrungen lesen</a>
+          </div>
+        </div>
+
+        <aside class="hero-card" aria-label="Themen der Ernährungsberatung">
+          <div class="hero-card-mark" aria-hidden="true">+</div>
+          <div>
+            <div class="eyebrow">ERNÄHRUNGSBERATUNG</div>
+            <h2>Was funktioniert für dich?</h2>
+            <p>
+              Keine komplizierten Regeln. Sondern Wissen, das dir hilft,
+              deine Ernährung rund um Training und Wettkampf bewusster zu gestalten.
+            </p>
+          </div>
+        </aside>
+      </div>
+    </section>
+
+    <!-- Themen -->
+    <section class="section">
+      <div class="container">
+        <div class="section-heading">
+          <div>
+            <div class="eyebrow">TRI-HUB SPEKTRUM</div>
+            <h2>Ernährung,<br>die mitdenkt.</h2>
+          </div>
+
+          <p class="section-intro">
+            Die Ernährungsberatung ergänzt das Tri-hub-Angebot um die Themen,
+            die für Training und Wettkampf besonders wichtig sind. Von den
+            Grundlagen der Sporternährung bis zur Frage, was dein Magen
+            während einer langen Einheit verträgt.
+          </p>
+        </div>
+
+        <div class="topic-grid">
+          <article class="topic">
+            <div class="topic-number">01 · SPORTERNÄHRUNG</div>
+            <h3>Die Grundlagen</h3>
+            <p>
+              Verstehe, welche Rolle deine Ernährung vor, während und nach
+              dem Training spielen kann.
+            </p>
+          </article>
+
+          <article class="topic">
+            <div class="topic-number">02 · HYDRATION</div>
+            <h3>Trinken &amp; Energie</h3>
+            <p>
+              Orientierung rund um Flüssigkeit und Energieaufnahme –
+              besonders dann, wenn die Belastung länger wird.
+            </p>
+          </article>
+
+          <article class="topic">
+            <div class="topic-number">03 · MAGENMANAGEMENT</div>
+            <h3>Was verträgst du?</h3>
+            <p>
+              Ernährung soll nicht nur auf dem Papier funktionieren.
+              Sie muss auch unter Belastung zu dir passen.
+            </p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <!-- Wissen -->
+    <section class="section" id="wissen">
+      <div class="container knowledge">
+        <div>
+          <div class="eyebrow">FACHBEITRÄGE</div>
+          <h2>Wissen,<br>das dich<br>weiterbringt.</h2>
+        </div>
+
+        <div>
+          <p class="knowledge-copy">
+            Rund um Ernährung gibt es viele Empfehlungen. Bei Tri-hub geht es
+            darum, daraus verständliche Orientierung für deinen Sport und
+            deinen Alltag zu machen. Die Inhalte dieser Seite bauen auf dem
+            Ernährungsspektrum von Tri-hub auf.
+          </p>
+
+          <ul class="knowledge-list">
+            <li>
+              <span class="dot" aria-hidden="true"></span>
+              <div>
+                <strong>Sporternährung</strong><br>
+                <span>Grundlagen für Training und Wettkampf.</span>
+              </div>
+            </li>
+            <li>
+              <span class="dot" aria-hidden="true"></span>
+              <div>
+                <strong>Hydration</strong><br>
+                <span>Trinken und Flüssigkeitsversorgung im Ausdauertraining.</span>
+              </div>
+            </li>
+            <li>
+              <span class="dot" aria-hidden="true"></span>
+              <div>
+                <strong>Energieaufnahme</strong><br>
+                <span>Wie du Energie rund um Belastung bewusst planen kannst.</span>
+              </div>
+            </li>
+            <li>
+              <span class="dot" aria-hidden="true"></span>
+              <div>
+                <strong>Magenmanagement</strong><br>
+                <span>Verträglichkeit als Teil deiner persönlichen Strategie.</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- User Story: Rezensionen -->
+    <section class="section review-section" id="erfahrungen">
+      <div class="container review-layout">
+        <div class="review-copy">
+          <div class="eyebrow">DEINE ERFAHRUNG</div>
+          <h2>Was hat dir<br>geholfen?</h2>
+          <p>
+            Deine Erfahrung kann anderen helfen, das Angebot besser
+            kennenzulernen. Teile, was du aus der Ernährungsberatung
+            mitgenommen hast und was sich für dich im Training bewährt hat.
+          </p>
+
+          <a class="button button-secondary" href="#bewertung" style="margin-top:28px;">
+            Bewertung schreiben
+          </a>
+        </div>
+
+        <div class="review-list">
+          <!-- Diese Beispielkarten sind bewusst als Platzhalter gekennzeichnet. -->
+          <article class="review-card">
+            <div class="review-top">
+              <div class="person">
+                <div class="avatar">T</div>
+                <div>
+                  <strong>Deine Erfahrung</strong>
+                  <small>Hier kann eine Kundenstimme erscheinen</small>
+                </div>
+              </div>
+              <div class="stars" aria-label="Beispiel für eine Sternebewertung">★★★★★</div>
             </div>
-        </header>
 
-        <!-- Hero-Bereich -->
-        <section
-            class="relative isolate overflow-hidden pt-12 pb-20 lg:pt-20 lg:pb-28 hero-shell"
-        >
-            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="max-w-3xl mx-auto text-center">
-                    <span class="eyebrow mb-4 block"
-                        >Performance & Gesundheit</span
-                    >
-                    <h1
-                        class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-6"
-                    >
-                        Maßgeschneiderte Ernährungsberatung für Ausdauerathleten
-                    </h1>
-                    <p
-                        class="text-lg sm:text-xl text-slate-300 mb-8 leading-relaxed"
-                    >
-                        Optimiere deine Energieversorgung im Training und
-                        Wettkampf. Wir entwickeln deine individuelle
-                        Ernährungsstrategie auf wissenschaftlicher Basis.
-                    </p>
-                    <div class="flex flex-wrap justify-center gap-4">
-                        <a
-                            href="#kontakt"
-                            class="rounded-full bg-cyan-500 px-6 py-3 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
-                        >
-                            Erstgespräch vereinbaren
-                        </a>
-                        <a
-                            href="#leistungen"
-                            class="rounded-full panel-glass px-6 py-3 text-white font-medium hover:bg-white/10 transition-colors"
-                        >
-                            Mehr erfahren
-                        </a>
-                    </div>
-                </div>
+            <blockquote>
+              „Teile hier deine Erfahrung mit der Ernährungsberatung –
+              ehrlich, persönlich und so, wie du sie erlebt hast.“
+            </blockquote>
+          </article>
+
+          <p class="review-note">
+            Hinweis: Die Bewertungen in dieser HTML-Demo werden nicht dauerhaft
+            gespeichert. Für den Live-Betrieb sollte das Formular an das
+            bestehende Backend oder CMS von Tri-hub angebunden werden.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Bewertungsformular -->
+    <section class="section" id="bewertung">
+      <div class="container">
+        <div class="section-heading">
+          <div>
+            <div class="eyebrow">REZENSION VERFASSEN</div>
+            <h2>Deine Stimme<br>zählt.</h2>
+          </div>
+
+          <p class="section-intro">
+            Erzähle anderen von deiner persönlichen Erfahrung mit dem
+            Ernährungsangebot. Kurz und ehrlich reicht völlig.
+          </p>
+        </div>
+
+        <form class="review-form" id="reviewForm">
+          <div class="field" style="margin-top:0;">
+            <label for="name">Dein Name</label>
+            <input id="name" name="name" type="text" autocomplete="name"
+                   placeholder="z. B. Thomas M." required>
+          </div>
+
+          <div class="field">
+            <label>Deine Bewertung</label>
+            <div class="rating-input" aria-label="Sternebewertung">
+              <input id="star5" name="rating" type="radio" value="5" required>
+              <label for="star5" title="5 Sterne">★</label>
+
+              <input id="star4" name="rating" type="radio" value="4">
+              <label for="star4" title="4 Sterne">★</label>
+
+              <input id="star3" name="rating" type="radio" value="3">
+              <label for="star3" title="3 Sterne">★</label>
+
+              <input id="star2" name="rating" type="radio" value="2">
+              <label for="star2" title="2 Sterne">★</label>
+
+              <input id="star1" name="rating" type="radio" value="1">
+              <label for="star1" title="1 Stern">★</label>
             </div>
-        </section>
+          </div>
 
-        <!-- Hauptinhalte / Leistungen -->
-        <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
-            <!-- Bereich: Unser Ansatz -->
-            <section id="ansatz" class="space-y-6">
-                <div class="text-center max-w-2xl mx-auto">
-                    <span class="eyebrow">Wissenschaftlich & Individuell</span>
-                    <h2 class="text-3xl font-bold text-white mt-2">
-                        Warum Ernährungsberatung bei TRI-HUB?
-                    </h2>
-                </div>
+          <div class="field">
+            <label for="review">Deine Erfahrung</label>
+            <textarea id="review" name="review"
+                      placeholder="Was hat dir an der Ernährungsberatung geholfen?"
+                      required></textarea>
+          </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-                    <div class="card-premium rounded-2xl p-6 space-y-3">
-                        <div
-                            class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
-                        >
-                            1
-                        </div>
-                        <h3 class="text-xl font-semibold text-white">
-                            Analyse & BIA-Messung
-                        </h3>
-                        <p class="text-sm text-slate-300">
-                            Fundierte Bestandsaufnahme von
-                            Körperzusammensetzung, Stoffwechsel und aktuellen
-                            Ernährungsgewohnheiten.
-                        </p>
-                    </div>
+          <label class="consent">
+            <input type="checkbox" name="consent" required>
+            <span>
+              Ich stimme zu, dass meine Bewertung mit meinem angegebenen Namen
+              auf dieser Seite veröffentlicht werden darf.
+            </span>
+          </label>
 
-                    <div class="card-premium rounded-2xl p-6 space-y-3">
-                        <div
-                            class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
-                        >
-                            2
-                        </div>
-                        <h3 class="text-xl font-semibold text-white">
-                            Wettkampfstrategie
-                        </h3>
-                        <p class="text-sm text-slate-300">
-                            Präzise Verpflegungspläne für Renntage
-                            (Carboloading, Magenverträglichkeit, Kohlenhydrat- &
-                            Flüssigkeitszufuhr).
-                        </p>
-                    </div>
+          <button class="button button-primary" type="submit">
+            Bewertung veröffentlichen
+          </button>
 
-                    <div class="card-premium rounded-2xl p-6 space-y-3">
-                        <div
-                            class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
-                        >
-                            3
-                        </div>
-                        <h3 class="text-xl font-semibold text-white">
-                            Nachhaltige Integration
-                        </h3>
-                        <p class="text-sm text-slate-300">
-                            Praxisnahe Empfehlungen, die sich nahtlos in deinen
-                            Berufs- und Trainingsalltag integrieren lassen.
-                        </p>
-                    </div>
-                </div>
-            </section>
+          <div class="form-status" id="formStatus" role="status" aria-live="polite"></div>
+        </form>
+      </div>
+    </section>
+  </main>
 
-            <!-- Bereich: Pakete -->
-            <section id="pakete" class="space-y-8">
-                <div class="text-center max-w-2xl mx-auto">
-                    <span class="eyebrow">Angebote</span>
-                    <h2 class="text-3xl font-bold text-white mt-2">
-                        Unsere Beratungspakete
-                    </h2>
-                </div>
+  <footer>
+    <div class="container">
+      <div><strong>tri-hub</strong> · Triathlon als sportliches Zuhause ab 50.</div>
+      <div>Ernährung · Wissen · Erfahrungen</div>
+    </div>
+  </footer>
 
-                <div
-                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-                >
-                    <!-- Paket Basic -->
-                    <div
-                        class="card-premium rounded-2xl p-8 flex flex-col justify-between"
-                    >
-                        <div class="space-y-4">
-                            <h3 class="text-2xl font-bold text-white">
-                                Starter
-                            </h3>
-                            <p class="text-sm text-slate-300">
-                                Ideal für den Einstieg und die Optimierung der
-                                Grundernährung.
-                            </p>
-                            <div class="text-3xl font-bold text-cyan-400">
-                                149 €
-                            </div>
-                            <ul
-                                class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
-                            >
-                                <li>✓ Anamnese & Ist-Analyse</li>
-                                <li>✓ 60 Min. Einzelsession</li>
-                                <li>✓ Konkrete Handlungsempfehlungen</li>
-                            </ul>
-                        </div>
-                        <a
-                            href="#kontakt"
-                            class="mt-8 block text-center rounded-full panel-glass py-3 font-medium hover:bg-white/10 transition-colors"
-                            >Buchen</a
-                        >
-                    </div>
+  <script>
+    const form = document.getElementById("reviewForm");
+    const status = document.getElementById("formStatus");
 
-                    <!-- Paket Performance -->
-                    <div
-                        class="card-premium rounded-2xl p-8 flex flex-col justify-between border-cyan-500/50"
-                    >
-                        <div class="space-y-4">
-                            <span class="eyebrow text-cyan-400">Beliebt</span>
-                            <h3 class="text-2xl font-bold text-white">
-                                Performance
-                            </h3>
-                            <p class="text-sm text-slate-300">
-                                Umfassende Betreuung inkl. Wettkampfstrategie.
-                            </p>
-                            <div class="text-3xl font-bold text-cyan-400">
-                                349 €
-                            </div>
-                            <ul
-                                class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
-                            >
-                                <li>✓ Alle Leistungen aus Starter</li>
-                                <li>
-                                    ✓ Detaillierter Wettkampf-Verpflegungsplan
-                                </li>
-                                <li>✓ 2x Folge-Consulting (je 30 Min.)</li>
-                                <li>✓ Chat-Support während der Vorbereitung</li>
-                            </ul>
-                        </div>
-                        <a
-                            href="#kontakt"
-                            class="mt-8 block text-center rounded-full bg-cyan-500 text-slate-950 py-3 font-semibold hover:bg-cyan-400 transition-colors"
-                            >Buchen</a
-                        >
-                    </div>
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
 
-                    <!-- Paket Pro -->
-                    <div
-                        class="card-premium rounded-2xl p-8 flex flex-col justify-between"
-                    >
-                        <div class="space-y-4">
-                            <h3 class="text-2xl font-bold text-white">
-                                Season Pass
-                            </h3>
-                            <p class="text-sm text-slate-300">
-                                Kontinuierliche Ernährungsbegleitung über die
-                                gesamte Saison.
-                            </p>
-                            <div class="text-3xl font-bold text-cyan-400">
-                                Individuell
-                            </div>
-                            <ul
-                                class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
-                            >
-                                <li>
-                                    ✓ Regelmäßige Anpassungen je Trainingsphase
-                                </li>
-                                <li>✓ BIA-Körperanalysen inklusive</li>
-                                <li>
-                                    ✓ Maximale Flexibilität & Prioritäts-Support
-                                </li>
-                            </ul>
-                        </div>
-                        <a
-                            href="#kontakt"
-                            class="mt-8 block text-center rounded-full panel-glass py-3 font-medium hover:bg-white/10 transition-colors"
-                            >Anfragen</a
-                        >
-                    </div>
-                </div>
-            </section>
+      const name = form.elements.name.value.trim();
+      const rating = form.elements.rating.value;
+      const review = form.elements.review.value.trim();
 
-            <!-- Kontakt / Call to Action -->
-            <section
-                id="kontakt"
-                class="card-premium rounded-2xl p-8 md:p-12 text-center space-y-6"
-            >
-                <h2 class="text-3xl font-bold text-white">
-                    Bereit für den nächsten Schritt?
-                </h2>
-                <p class="text-slate-300 max-w-xl mx-auto">
-                    Vereinbare jetzt ein unverbindliches Erstgespräch mit
-                    unseren Ernährungsexperten und erreiche deine Ziele
-                    effizienter.
-                </p>
-                <form class="max-w-md mx-auto space-y-4 text-left">
-                    <div>
-                        <label
-                            class="block text-xs uppercase text-slate-400 mb-1"
-                            >Name</label
-                        >
-                        <input
-                            type="text"
-                            placeholder="Dein Name"
-                            class="w-full rounded-lg panel-glass px-4 py-2.5 text-white placeholder:text-slate-500 focus:outline-none focus:border-cyan-400 border border-white/10"
-                        />
-                    </div>
-                    <div>
-                        <label
-                            class="block text-xs uppercase text-slate-400 mb-1"
-                            >E-Mail</label
-                        >
-                        <input
-                            type="email"
-                            placeholder="deine@email.de"
-                            class="w-full rounded-lg panel-glass px-4 py-2.5 text-white placeholder:text-slate-500 focus:outline-none focus:border-cyan-400 border border-white/10"
-                        />
-                    </div>
-                    <button
-                        type="submit"
-                        class="w-full rounded-full bg-cyan-500 py-3 font-semibold text-slate-950 hover:bg-cyan-400 transition-colors"
-                    >
-                        Anfrage senden
-                    </button>
-                </form>
-            </section>
-        </main>
+      if (!name || !rating || !review) return;
 
-        <!-- Footer -->
-        <footer
-            class="border-t border-white/10 py-8 mt-16 text-center text-xs text-slate-500"
-        >
-            <div class="container mx-auto px-4">
-                <p>&copy; 2026 TRI-HUB. Alle Rechte vorbehalten.</p>
-            </div>
-        </footer>
-    </body>
+      status.textContent =
+        "Danke für deine Bewertung. In dieser Demo wurde sie noch nicht dauerhaft gespeichert.";
+
+      form.reset();
+    });
+  </script>
+</body>
 </html>
