design für starter.html verbessert, banner Zentriert und stylesheet allein auf navigation und und produktdeatils.ss ausgelegt für bessere übersicht

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 
@@ -18,7 +18,7 @@
     --accent: #4597A3;
     --accent-soft: rgba(69, 151, 163, 0.14);
     --text-primary: #ffffff;
-    --text-muted: #7e858a;
+    --text-muted: #7e858a; 
 
     --font-display: "Sora", "Inter", system-ui, sans-serif;
     --font-body: "Inter", system-ui, sans-serif;

css/paketdetails.css

@@ -1,11 +1,158 @@
-/* Nur die neue Paketdetailseite; gemeinsame Styles bleiben unverändert. */
+/* ==========================================================================
+   Paketdetails CSS (Standalone)
+   Inhalt: Layout, Hero, Facts, Leistungen, Ablauf, Preise & Footer
+   ========================================================================== */
+
 .paket-detail {
-    --foreground: var(--text-primary);
-    --border: rgb(255 255 255 / 12%);
-    background: rgb(var(--background-rgb));
+    /* 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;
@@ -39,42 +186,110 @@
     text-decoration: underline;
 }
 
-.paket-detail a:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 5px;
-}
+/* ==========================================================================
+   Hero-Sektion
+   ========================================================================== */
 
-/* Hero mit Text auf dem bestehenden Bild. */
 .paket-detail .paket-detail__hero {
-    min-height: 580px;
+    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 */
 .paket-detail__hero .hero__image {
-    width: 78%;
-    max-width: none;
+    position: absolute;
+    inset: 0;
+    width: 100%;
     height: 100%;
     object-fit: cover;
-    object-position: center 35%;
+    object-position: right top; /* Bildschwerpunkt rechts ausrichten */
+    z-index: -2;
+}
+
+.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 {
-    padding-block: 56px;
+    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%, 740px);
-    padding-block: 12px;
+    width: min(100%, 720px); /* Textbereich kompakt halten */
+    margin-block: auto;
+    padding-block: 24px 64px;
 }
 
 .paket-detail__hero h1 {
-    font-size: clamp(2.5rem, 4.4vw, 4.25rem);
-    font-weight: 600;
-    letter-spacing: -0.045em;
+    color: var(--text-primary);
+    max-width: 100%;
+    font-size: clamp(42px, 4.9vw, 88px);
+    font-weight: 550;
+    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: 54ch;
-    font-size: 1.05rem;
+    max-width: 65ch;
+    margin-top: 30px;
+    color: #d1d7df;
+    font-size: clamp(16px, 1.15vw, 19px);
+    line-height: 1.85;
 }
 
 .paket-detail__actions {
@@ -85,7 +300,10 @@
     margin-top: 30px;
 }
 
-/* Paketangaben und Leistungen. */
+/* ==========================================================================
+   Paketangaben / Facts
+   ========================================================================== */
+
 .paket-detail__facts {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -124,6 +342,10 @@
     color: var(--text-muted);
 }
 
+/* ==========================================================================
+   Leistungen / Services
+   ========================================================================== */
+
 .paket-detail__services .box {
     box-shadow: none;
 }
@@ -147,7 +369,10 @@
     color: var(--text-muted);
 }
 
-/* Ablauf und Preisübersicht. */
+/* ==========================================================================
+   Ablauf & Listen
+   ========================================================================== */
+
 .paket-detail__process {
     border-block: 1px solid var(--border);
 }
@@ -167,11 +392,81 @@
     font-size: clamp(1.9rem, 3.4vw, 2.7rem);
 }
 
-.paket-detail__split .beratung-ablauf {
+.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);
@@ -220,11 +515,109 @@
     color: var(--text-muted);
 }
 
-.paket-detail .site-footer {
-    margin-top: 0;
+/* ==========================================================================
+   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;
+    }
 }
 
-/* Schmale Ansichten. */
 @media (max-width: 900px) {
     .paket-detail__facts {
         grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -236,18 +629,54 @@
     }
 }
 
+@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 .paket-detail__hero {
-        min-height: auto;
-    }
-
     .paket-detail__hero .hero__image {
+        inset: 0;
         width: 100%;
-        object-position: 65% center;
+        max-width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 60% bottom;
+        mask-image: none;
     }
 
-    .paket-detail__hero .hero__inner {
-        padding-block: 40px;
+    .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 {
@@ -256,11 +685,17 @@
         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

@@ -84,7 +84,7 @@
     /*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: "";
 }

html/paket-PREMIUM.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>
+    <!-- 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/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>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>
+    <!-- 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">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">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>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/paket-starter.html

@@ -6,20 +6,19 @@
     <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.">
-    <!-- Vorhandene Styles, ergänzt um das Layout der Detailseite. -->
+    
     <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/produktuebersicht.css">
-    <link rel="stylesheet" href="../css/beratung.css">
     <link rel="stylesheet" href="../css/paketdetails.css">
     <script src="../js/navigation.js" defer></script>
 </head>
 
 <body>
-    <!-- Gemeinsame Navigation. -->
+    <!-- Gemeinsame Navigation -->
     <header class="site-navigation">
         <div class="site-navigation__bar">
             <div class="brand">
@@ -47,12 +46,8 @@
 
     <div class="beratung-bereich paket-detail">
         <main id="main-content">
-            <div class="container paket-detail__breadcrumb">
-                <a href="../index.html#leistungen"><span aria-hidden="true">←</span> Alle Ernährungspakete</a>
-                <span>STARTER</span>
-            </div>
 
-            <!-- Einstieg mit dem vorhandenen Starter-Bild. -->
+            <!-- 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">
@@ -70,7 +65,7 @@
                 </div>
             </section>
 
-            <!-- Die Paketangaben entsprechen json/pakete.json. -->
+            <!-- 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>
@@ -80,6 +75,7 @@
                 </dl>
             </div>
 
+            <!-- Leistungen -->
             <section class="section" id="leistungen" aria-labelledby="leistungen-title">
                 <div class="container">
                     <div class="section-head">
@@ -112,7 +108,7 @@
                 </div>
             </section>
 
-            <!-- Ablauf mit den bestehenden Listen-Styles. -->
+            <!-- Ablauf -->
             <section class="section paket-detail__process" id="ablauf" aria-labelledby="ablauf-title">
                 <div class="container paket-detail__split">
                     <div>
@@ -130,7 +126,7 @@
                 </div>
             </section>
 
-            <!-- Preisübersicht und Einstieg zur vorhandenen Kontaktseite. -->
+            <!-- Preisübersicht & Anfrage -->
             <section class="section" id="anfrage" aria-labelledby="anfrage-title">
                 <div class="container paket-detail__split">
                     <div>
@@ -162,7 +158,7 @@
             </section>
         </main>
 
-        <!-- Footer der Ernährungsseite. -->
+        <!-- Footer -->
         <footer class="site-footer">
             <div class="container">
                 <div class="footer-grid">
@@ -198,4 +194,4 @@
     </div>
 </body>
 
-</html>
+</html>

html/paketfirst.html

@@ -1,4 +1,4 @@
-<!--
+git<!--
 Design reminder for index.html
 Philosophie: Skulpturaler Active-Longevity-Luxus.
 Dateispezifische Regeln: deutschsprachige Metadaten, elegante Typografie-Vorbereitung,