Wortänderung "KOSTENLOS" zu "KOSTENFREI"

Reviewed-on: https://gitty.informatik.th-mannheim.de/3015351/PM_Project/pulls/13

css/sections/kontakt.css

@@ -1,5 +1,5 @@
 /* 8. Trainer und Kontakt (US04-02)
-   Trainerprofil ist ein PLATZHALTER – Foto und Inhalte folgen vom Kunden.
+   Trainerprofil: Relindis Agethen (Lilli).
    Kontakt leitet auf https://tri-hub.de/kontakt weiter. */
 
 .contact { border-top: 1px solid var(--line); }
@@ -24,39 +24,25 @@
 }
 
 .trainer-photo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
+  margin: 0;
   min-height: 320px;
-  border: 1px dashed rgb(255 255 255 / 22%);
+  overflow: hidden;
   border-radius: 1.35rem;
-  background:
-    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 10%) 0 18%, transparent 19%),
-    radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 8%) 0 42%, transparent 43%),
-    rgb(255 255 255 / 3%);
-  color: var(--quiet);
-  font-size: .8125rem;
-  letter-spacing: .18em;
-  text-transform: uppercase;
+  background: rgb(255 255 255 / 3%);
 }
 
-.trainer-photo span { margin-top: 62%; }
+.trainer-photo img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 30% 20%;                     /* Gesicht im Ausschnitt halten */
+}
 
 .trainer-body { padding: 12px 12px 12px 0; }
 
-.placeholder-tag {
-  display: inline-block;
-  margin-bottom: 14px;
-  padding: 4px 12px;
-  border: 1px dashed rgb(255 255 255 / 28%);
-  border-radius: 999px;
-  color: var(--quiet);
-  font-size: .75rem;
-  font-weight: 600;
-  letter-spacing: .16em;
-  text-transform: uppercase;
-}
-
 .trainer-body h3 { font-size: 1.5rem; }
 
 .trainer-role { margin-top: 6px; color: var(--muted); font-size: 1rem; }
@@ -80,10 +66,9 @@
 
 .trainer-facts span { color: var(--quiet); font-size: .875rem; }
 
-.trainer-quote {
+.trainer-bio {
   margin-top: 20px;
   color: var(--muted);
-  font-style: italic;
   font-size: 1rem;
 }
 
@@ -132,7 +117,7 @@
 
 @media (max-width: 760px) {
   .trainer-card { grid-template-columns: 1fr; gap: 18px; }
-  .trainer-photo { min-height: 260px; }
+  .trainer-photo { height: 340px; min-height: 0; }
   .trainer-body { padding: 4px 8px 12px; }
   .trainer-facts li { grid-template-columns: 1fr; gap: 2px; }
   .contact-card { padding: 26px 22px; }

css/sections/vergleich.css

@@ -0,0 +1,53 @@
+/* Eigene helle Vergleichs- und Druckansicht nach der TriHub-Vorlage. */
+:root { color-scheme: light; }
+* { box-sizing: border-box; }
+body { margin: 0; padding: 32px 20px; background: #f3f0e9; color: #10151d; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.65; }
+.comparison-sheet { max-width: 1160px; margin: auto; padding: 32px 40px; background: #fff; border: 1px solid #e3e7eb; border-radius: 32px; box-shadow: 0 18px 50px #10202b0a; }
+.comparison-header { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #e1e5e9; padding-bottom: 22px; margin-bottom: 28px; }
+.brand img { display: block; object-fit: contain; border-radius: 14px; }
+nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 1; flex-wrap: wrap; }
+a { color: inherit; text-underline-offset: 4px; }
+nav a { text-decoration: none; color: #46515f; }
+button { font: inherit; font-weight: 600; border: 1px solid #dce1e7; background: #fff; color: #111820; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
+button:hover { background: #f1f5f9; }
+:focus-visible { outline: 3px solid #217c86; outline-offset: 4px; }
+.skip { position: absolute; top: -100px; } .skip:focus { top: 8px; background: white; padding: 10px; }
+h1,h2 { font-family: "Sora", sans-serif; letter-spacing: -.045em; line-height: 1.2; color: #080e17; }
+h1 { font-size: clamp(2rem, 4vw, 3.15rem); margin: 18px 0 24px; max-width: 940px; }
+h2 { font-size: 1.4rem; margin: 36px 0 20px; }
+p { margin: 0 0 16px; }
+.eyebrow { color: #647081; font-size: .72rem; font-weight: 700; letter-spacing: .22em; }
+.intro { max-width: 850px; color: #4b5563; font-size: 1.08rem; }
+.concept { border-left: 3px solid #b7c9ce; padding: 12px 18px; background: #f7f9fa; color: #4b5563; font-size: .9rem; margin: 24px 0 36px; }
+.table-scroll { overflow-x: auto; border: 1px solid #dfe5ec; border-radius: 22px; }
+table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: .9rem; }
+.feature-column { width: 25%; }
+caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+th,td { padding: 16px; vertical-align: top; border-bottom: 1px solid #e2e7ed; overflow-wrap: break-word; }
+thead { background: #f1f5f9; } thead th { font-weight: 700; }
+thead span { display: block; font-size: .78rem; font-weight: 400; color: #596574; margin-top: 4px; }
+tbody th { font-weight: 600; } td { color: #46515f; }
+.group th { background: #f8fafb; color: #52606e; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; }
+tfoot th,tfoot td { border-bottom: 0; } tfoot a { font-weight: 600; color: #235b65; }
+.notes { margin-top: 20px; font-size: .83rem; color: #5c6673; }
+.framework { margin-top: 32px; border-top: 1px solid #e1e5e9; color: #4b5563; }
+.bottom-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0; font-weight: 600; }
+footer { padding-top: 20px; border-top: 1px solid #e1e5e9; font-size: .8rem; color: #667181; }
+.scroll-hint { display: none; font-size: .85rem; color: #5c6673; }
+@media (max-width: 800px) { body { padding: 12px; } .comparison-sheet { padding: 22px 18px; border-radius: 22px; } .comparison-header { align-items: flex-start; gap: 16px; } nav { gap: 12px; font-size: .85rem; } .brand img { width: 56px; height: 56px; } .scroll-hint { display: block; } }
+@page { size: A4 landscape; margin: 12mm; }
+@media print {
+ body { padding: 0; background: #fff; font-size: 10pt; color: #000; }
+ .comparison-sheet { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
+ nav,.skip,.bottom-actions,.scroll-hint,tfoot { display: none !important; }
+ .comparison-header { margin-bottom: 12px; padding-bottom: 10px; }
+ .brand img { width: 50px; height: 50px; }
+ h1 { font-size: 23pt; margin: 8px 0 14px; } h2 { font-size: 14pt; margin: 20px 0 12px; }
+ .intro { font-size: 10pt; } .concept { font-size: 9pt; margin: 12px 0; padding: 8px 12px; }
+ .table-scroll { overflow: visible; border-radius: 0; border: 0; }
+ table { min-width: 0; font-size: 9pt; }
+ th,td { padding: 8px 10px; border: 1px solid #cbd2da; color: #000; }
+ thead { display: table-header-group; } tr { break-inside: avoid; } .group { break-after: avoid; }
+ h2 { break-after: avoid; } .notes,.framework { font-size: 9pt; }
+ footer { font-size: 8pt; } a { text-decoration: none; }
+}

ernaehrung-premium.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="de">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Premium · Ernährungsberatung | TriHub</title>
-    <meta
-      name="description"
-      content="Du bereitest dich auf ein sportliches Ziel vor und wünschst dir enge Begleitung? Zwölf Wochen lang verbinden wir deine Alltagsernährung mit einer im Training erprobten Verpflegungsstrategie."
-    />
-    <link
-      rel="icon"
-      type="image/jpeg"
-      href="assets/images/icons/trihub-logo.jpg"
-    />
+  <meta name="description"
+    content="Du bereitest dich auf ein sportliches Ziel vor und wünschst dir enge Begleitung? Zwölf Wochen lang verbinden wir deine Alltagsernährung mit einer im Training erprobten Verpflegungsstrategie." />
+  <link rel="icon" type="image/jpeg" href="assets/images/icons/trihub-logo.jpg" />
   <link rel="stylesheet" href="css/assets.css" />
   <link rel="stylesheet" href="css/base.css" />
   <link rel="stylesheet" href="css/sections/hero.css" />
@@ -23,59 +18,37 @@
   <script src="js/main.js" defer></script>
   <link rel="stylesheet" href="css/sections/paketdetails.css" />
 </head>
+
 <body>
   <a class="skip" href="#inhalt">Zum Inhalt</a>
   <header class="site-header">
     <div class="shell header-inner">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-          ><span class="brand-copy"
-            ><span class="brand-name">Tri-hub</span
-            ></span
-          ></a
-        >
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span><span class="brand-copy"><span
+            class="brand-name">Tri-hub</span></span></a>
       <nav aria-label="Hauptnavigation">
-          <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
-          ><a href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
-          ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
+        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a
+          href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a><a href="ernaehrungsberatung.html#ablauf">So
+          läuft’s ab</a>
       </nav>
-        <a
-          class="button small header-cta"
-          href="ernaehrungsberatung.html#angebote"
-          >Angebote entdecken</a
-        >
-        <button
-          class="menu-toggle"
-          aria-expanded="false"
-          aria-controls="mobile-nav"
-          aria-label="Menü öffnen"
-        >
+      <a class="button small header-cta" href="ernaehrungsberatung.html#angebote">Angebote entdecken</a>
+      <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen">
         ☰
       </button>
     </div>
     <nav id="mobile-nav" aria-label="Mobile Navigation" hidden>
-        <a href="ernaehrungsberatung.html#angebote">Angebote entdecken</a
-        ><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
-        ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
-        ><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
+      <a href="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
+        entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
+        href="ernaehrungsberatung.html#kontakt">Kontakt</a>
     </nav>
   </header>
   <main id="inhalt" class="detail-page">
     <section class="detail-top">
       <div class="shell">
         <nav class="breadcrumb" aria-label="Brotkrumennavigation">
-            <a href="ernaehrungsberatung.html#angebote"
-              >Alle Ernährungsangebote</a
-            ><span aria-hidden="true">/</span
-            ><span aria-current="page">Premium</span>
+          <a href="ernaehrungsberatung.html#angebote">Alle Ernährungsangebote</a><span aria-hidden="true">/</span><span
+            aria-current="page">Premium</span>
         </nav>
         <div class="detail-hero">
           <div class="hero-copy">
@@ -94,37 +67,27 @@
             </p>
             <div class="detail-facts" aria-label="Paket auf einen Blick">
               <div>
-                  <span>Gesamtpreis · Vorschlag</span><strong>649,00 €</strong
-                  ><small>einmalig für das gesamte Paket</small>
+                <span>Gesamtpreis · Vorschlag</span><strong>649,00 €</strong><small>einmalig für das gesamte
+                  Paket</small>
               </div>
               <div>
-                  <span>Laufzeit</span><strong>12 Wochen</strong
-                  ><small>ab vereinbartem Starttermin</small>
+                <span>Laufzeit</span><strong>12 Wochen</strong><small>ab vereinbartem Starttermin</small>
               </div>
               <div>
-                  <span>Persönliche Beratung</span><strong>7 Termine</strong
-                  ><small>insgesamt 240 Minuten</small>
+                <span>Persönliche Beratung</span><strong>7 Termine</strong><small>insgesamt 240 Minuten</small>
               </div>
               <div>
-                  <span>Selbstlernkurse</span><strong>3 Kurse</strong
-                  ><small>je 45 Minuten, online</small>
+                <span>Selbstlernkurse</span><strong>3 Kurse</strong><small>je 45 Minuten, online</small>
               </div>
             </div>
             <div class="hero-actions">
-                <a class="button" href="#leistungen">Leistungen entdecken</a
-                ><a class="text-link" href="#coaching-vorteil"
-                  >Dein Coaching-Rabatt</a
-                >
+              <a class="button" href="#leistungen">Leistungen entdecken</a><a class="text-link"
+                href="#coaching-vorteil">Dein Coaching-Rabatt</a>
             </div>
           </div>
           <figure class="hero-visual">
-              <img
-                src="assets/images/angebote/premium.webp"
-                width="1200"
-                height="800"
-                alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
-                fetchpriority="high"
-              />
+            <img src="assets/images/angebote/premium.webp" width="1200" height="800"
+              alt="Persönliche Begleitung für sportlich aktive Menschen ab 50" fetchpriority="high" />
             <figcaption>
               <span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
               <p>Dein Ziel. Ganz persönlich.</p>
@@ -247,10 +210,7 @@
         </p>
       </div>
     </section>
-      <section
-        id="coaching-vorteil"
-        class="detail-section detail-price-section"
-      >
+    <section id="coaching-vorteil" class="detail-section detail-price-section">
       <div class="shell detail-price-layout">
         <div>
           <p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
@@ -265,36 +225,28 @@
             Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
             10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
           </p>
-            <a class="text-link" href="https://tri-hub.de/coaching-1zu1"
-              >Coaching 1zu1 kennenlernen</a
-            >
+          <a class="text-link" href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1 kennenlernen</a>
         </div>
         <div class="price-panel" data-base-price="649">
           <p class="eyebrow">PREMIUM · 12 WOCHEN</p>
           <p class="price-caption">Beispiel-Gesamtpreis</p>
           <p class="detail-price" data-price-output>649,00 €</p>
           <p class="price-caption">Einmalig · kein monatliches Abo</p>
-            <label for="coaching-select">Dein bestehendes Coaching-Paket</label
-            ><select id="coaching-select">
+          <label for="coaching-select">Dein bestehendes Coaching-Paket</label><select id="coaching-select">
             <option value="0">Noch kein Coaching 1zu1</option>
             <option value="3">Starter-Coaching · 3 % Rabatt</option>
             <option value="5">Standard-Coaching · 5 % Rabatt</option>
             <option value="10">Premium-Coaching · 10 % Rabatt</option>
           </select>
-            <p
-              class="discount-summary"
-              data-discount-output
-              role="status"
-              aria-live="polite"
-            >
+          <p class="discount-summary" data-discount-output role="status" aria-live="polite">
             Ohne Coaching-Rabatt: 649,00 € für das gesamte Paket.
           </p>
-            <noscript
-              ><p>
+          <noscript>
+            <p>
               Mit Starter-Coaching: 629,53 € · Standard-Coaching: 616,55 € ·
               Premium-Coaching: 584,10 €.
-              </p></noscript
-            >
+            </p>
+          </noscript>
           <p class="proposal-note">
             Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
             müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
@@ -310,42 +262,29 @@
           <h2>Welche Begleitung passt zu dir?</h2>
           <p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
         </div>
-          <a class="button" href="ernaehrungsberatung.html#angebote"
-            >Zur Angebotsübersicht</a
-          >
+        <a class="button" href="ernaehrungsberatung.html#angebote">Zur Angebotsübersicht</a>
+        <a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
       </div>
       <div class="detail-alternatives">
-          <a class="button outline" href="ernaehrung-starter.html"
-            >Starter ansehen</a
-          ><a class="button outline" href="ernaehrung-standard.html"
-            >Standard ansehen</a
-          >
+        <a class="button outline" href="ernaehrung-starter.html">Starter ansehen</a><a class="button outline"
+          href="ernaehrung-standard.html">Standard ansehen</a>
       </div>
     </section>
   </main>
   <footer>
     <div class="shell footer-main">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-        ></a>
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span></a>
       <p>Dein sportliches Zuhause ab 50.</p>
       <a href="https://tri-hub.de/">Zur TriHub-Website</a>
     </div>
     <div class="shell footer-note">
-        <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span
-        ><span
-          >Ernährungsangebote sind Konzeptvorschläge, keine veröffentlichten
-          TriHub-Tarife.</span
-        >
+      <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span><span>Ernährungsangebote sind
+        Konzeptvorschläge, keine veröffentlichten
+        TriHub-Tarife.</span>
     </div>
   </footer>
 </body>
+
 </html>

ernaehrung-standard.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="de">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Standard · Ernährungsberatung | TriHub</title>
-    <meta
-      name="description"
-      content="Du möchtest Ernährung und Training aufeinander abstimmen? Über acht Wochen entwickelst du mit einem persönlichen Plan und regelmäßigem Feedback Routinen, die in deinem Alltag funktionieren."
-    />
-    <link
-      rel="icon"
-      type="image/jpeg"
-      href="assets/images/icons/trihub-logo.jpg"
-    />
+  <meta name="description"
+    content="Du möchtest Ernährung und Training aufeinander abstimmen? Über acht Wochen entwickelst du mit einem persönlichen Plan und regelmäßigem Feedback Routinen, die in deinem Alltag funktionieren." />
+  <link rel="icon" type="image/jpeg" href="assets/images/icons/trihub-logo.jpg" />
   <link rel="stylesheet" href="css/assets.css" />
   <link rel="stylesheet" href="css/base.css" />
   <link rel="stylesheet" href="css/sections/hero.css" />
@@ -23,61 +18,38 @@
   <script src="js/main.js" defer></script>
   <link rel="stylesheet" href="css/sections/paketdetails.css" />
 </head>
+
 <body>
   <a class="skip" href="#inhalt">Zum Inhalt</a>
   <header class="site-header">
     <div class="shell header-inner">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-          ><span class="brand-copy"
-            ><span class="brand-name">Tri-hub</span
-            ><span class="brand-sub"
-              >Ernährungsberatung für Triathlon ab 50</span
-            ></span
-          ></a
-        >
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span><span class="brand-copy"><span
+            class="brand-name">Tri-hub</span><span class="brand-sub">Ernährungsberatung für Triathlon ab
+            50</span></span></a>
       <nav aria-label="Hauptnavigation">
-          <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
-          ><a href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
-          ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
+        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a
+          href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a><a href="ernaehrungsberatung.html#ablauf">So
+          läuft’s ab</a>
       </nav>
-        <a
-          class="button small header-cta"
-          href="ernaehrungsberatung.html#angebote"
-          >Angebote entdecken</a
-        >
-        <button
-          class="menu-toggle"
-          aria-expanded="false"
-          aria-controls="mobile-nav"
-          aria-label="Menü öffnen"
-        >
+      <a class="button small header-cta" href="ernaehrungsberatung.html#angebote">Angebote entdecken</a>
+      <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen">
         ☰
       </button>
     </div>
     <nav id="mobile-nav" aria-label="Mobile Navigation" hidden>
-        <a href="ernaehrungsberatung.html#angebote">Angebote entdecken</a
-        ><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
-        ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
-        ><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
+      <a href="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
+        entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
+        href="ernaehrungsberatung.html#kontakt">Kontakt</a>
     </nav>
   </header>
   <main id="inhalt" class="detail-page">
     <section class="detail-top">
       <div class="shell">
         <nav class="breadcrumb" aria-label="Brotkrumennavigation">
-            <a href="ernaehrungsberatung.html#angebote"
-              >Alle Ernährungsangebote</a
-            ><span aria-hidden="true">/</span
-            ><span aria-current="page">Standard</span>
+          <a href="ernaehrungsberatung.html#angebote">Alle Ernährungsangebote</a><span aria-hidden="true">/</span><span
+            aria-current="page">Standard</span>
         </nav>
         <div class="detail-hero">
           <div class="hero-copy">
@@ -98,37 +70,27 @@
             </p>
             <div class="detail-facts" aria-label="Paket auf einen Blick">
               <div>
-                  <span>Gesamtpreis · Vorschlag</span><strong>349,00 €</strong
-                  ><small>einmalig für das gesamte Paket</small>
+                <span>Gesamtpreis · Vorschlag</span><strong>349,00 €</strong><small>einmalig für das gesamte
+                  Paket</small>
               </div>
               <div>
-                  <span>Laufzeit</span><strong>8 Wochen</strong
-                  ><small>ab vereinbartem Starttermin</small>
+                <span>Laufzeit</span><strong>8 Wochen</strong><small>ab vereinbartem Starttermin</small>
               </div>
               <div>
-                  <span>Persönliche Beratung</span><strong>4 Termine</strong
-                  ><small>insgesamt 150 Minuten</small>
+                <span>Persönliche Beratung</span><strong>4 Termine</strong><small>insgesamt 150 Minuten</small>
               </div>
               <div>
-                  <span>Selbstlernkurse</span><strong>2 Kurse</strong
-                  ><small>je 45 Minuten, online</small>
+                <span>Selbstlernkurse</span><strong>2 Kurse</strong><small>je 45 Minuten, online</small>
               </div>
             </div>
             <div class="hero-actions">
-                <a class="button" href="#leistungen">Leistungen entdecken</a
-                ><a class="text-link" href="#coaching-vorteil"
-                  >Dein Coaching-Rabatt</a
-                >
+              <a class="button" href="#leistungen">Leistungen entdecken</a><a class="text-link"
+                href="#coaching-vorteil">Dein Coaching-Rabatt</a>
             </div>
           </div>
           <figure class="hero-visual">
-              <img
-                src="assets/images/angebote/standard.webp"
-                width="1200"
-                height="800"
-                alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
-                fetchpriority="high"
-              />
+            <img src="assets/images/angebote/standard.webp" width="1200" height="800"
+              alt="Persönliche Begleitung für sportlich aktive Menschen ab 50" fetchpriority="high" />
             <figcaption>
               <span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
               <p>Aus guten Vorsätzen wird dein Plan.</p>
@@ -249,10 +211,7 @@
         </p>
       </div>
     </section>
-      <section
-        id="coaching-vorteil"
-        class="detail-section detail-price-section"
-      >
+    <section id="coaching-vorteil" class="detail-section detail-price-section">
       <div class="shell detail-price-layout">
         <div>
           <p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
@@ -267,36 +226,28 @@
             Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
             10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
           </p>
-            <a class="text-link" href="https://tri-hub.de/coaching-1zu1"
-              >Coaching 1zu1 kennenlernen</a
-            >
+          <a class="text-link" href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1 kennenlernen</a>
         </div>
         <div class="price-panel" data-base-price="349">
           <p class="eyebrow">STANDARD · 8 WOCHEN</p>
           <p class="price-caption">Beispiel-Gesamtpreis</p>
           <p class="detail-price" data-price-output>349,00 €</p>
           <p class="price-caption">Einmalig · kein monatliches Abo</p>
-            <label for="coaching-select">Dein bestehendes Coaching-Paket</label
-            ><select id="coaching-select">
+          <label for="coaching-select">Dein bestehendes Coaching-Paket</label><select id="coaching-select">
             <option value="0">Noch kein Coaching 1zu1</option>
             <option value="3">Starter-Coaching · 3 % Rabatt</option>
             <option value="5">Standard-Coaching · 5 % Rabatt</option>
             <option value="10">Premium-Coaching · 10 % Rabatt</option>
           </select>
-            <p
-              class="discount-summary"
-              data-discount-output
-              role="status"
-              aria-live="polite"
-            >
+          <p class="discount-summary" data-discount-output role="status" aria-live="polite">
             Ohne Coaching-Rabatt: 349,00 € für das gesamte Paket.
           </p>
-            <noscript
-              ><p>
+          <noscript>
+            <p>
               Mit Starter-Coaching: 338,53 € · Standard-Coaching: 331,55 € ·
               Premium-Coaching: 314,10 €.
-              </p></noscript
-            >
+            </p>
+          </noscript>
           <p class="proposal-note">
             Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
             müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
@@ -312,42 +263,29 @@
           <h2>Welche Begleitung passt zu dir?</h2>
           <p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
         </div>
-          <a class="button" href="ernaehrungsberatung.html#angebote"
-            >Zur Angebotsübersicht</a
-          >
+        <a class="button" href="ernaehrungsberatung.html#angebote">Zur Angebotsübersicht</a>
+        <a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
       </div>
       <div class="detail-alternatives">
-          <a class="button outline" href="ernaehrung-starter.html"
-            >Starter ansehen</a
-          ><a class="button outline" href="ernaehrung-premium.html"
-            >Premium ansehen</a
-          >
+        <a class="button outline" href="ernaehrung-starter.html">Starter ansehen</a><a class="button outline"
+          href="ernaehrung-premium.html">Premium ansehen</a>
       </div>
     </section>
   </main>
   <footer>
     <div class="shell footer-main">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-        ></a>
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span></a>
       <p>Dein sportliches Zuhause ab 50.</p>
       <a href="https://tri-hub.de/">Zur TriHub-Website</a>
     </div>
     <div class="shell footer-note">
-        <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span
-        ><span
-          >Ernährungsangebote sind Konzeptvorschläge, keine veröffentlichten
-          TriHub-Tarife.</span
-        >
+      <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span><span>Ernährungsangebote sind
+        Konzeptvorschläge, keine veröffentlichten
+        TriHub-Tarife.</span>
     </div>
   </footer>
 </body>
+
 </html>

ernaehrung-starter.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="de">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Starter · Ernährungsberatung | TriHub</title>
-    <meta
-      name="description"
-      content="Du möchtest deine Ernährung besser verstehen und mit klaren Empfehlungen starten? In vier Wochen schaffen wir eine Grundlage, die zu deinem Alltag und deinem Triathlon passt."
-    />
-    <link
-      rel="icon"
-      type="image/jpeg"
-      href="assets/images/icons/trihub-logo.jpg"
-    />
+  <meta name="description"
+    content="Du möchtest deine Ernährung besser verstehen und mit klaren Empfehlungen starten? In vier Wochen schaffen wir eine Grundlage, die zu deinem Alltag und deinem Triathlon passt." />
+  <link rel="icon" type="image/jpeg" href="assets/images/icons/trihub-logo.jpg" />
   <link rel="stylesheet" href="css/assets.css" />
   <link rel="stylesheet" href="css/base.css" />
   <link rel="stylesheet" href="css/sections/hero.css" />
@@ -23,61 +18,38 @@
   <script src="js/main.js" defer></script>
   <link rel="stylesheet" href="css/sections/paketdetails.css" />
 </head>
+
 <body>
   <a class="skip" href="#inhalt">Zum Inhalt</a>
   <header class="site-header">
     <div class="shell header-inner">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-          ><span class="brand-copy"
-            ><span class="brand-name">Tri-hub</span
-            ><span class="brand-sub"
-              >Ernährungsberatung für Triathlon ab 50</span
-            ></span
-          ></a
-        >
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span><span class="brand-copy"><span
+            class="brand-name">Tri-hub</span><span class="brand-sub">Ernährungsberatung für Triathlon ab
+            50</span></span></a>
       <nav aria-label="Hauptnavigation">
-          <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
-          ><a href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
-          ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
+        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a
+          href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a><a href="ernaehrungsberatung.html#ablauf">So
+          läuft’s ab</a>
       </nav>
-        <a
-          class="button small header-cta"
-          href="ernaehrungsberatung.html#angebote"
-          >Angebote entdecken</a
-        >
-        <button
-          class="menu-toggle"
-          aria-expanded="false"
-          aria-controls="mobile-nav"
-          aria-label="Menü öffnen"
-        >
+      <a class="button small header-cta" href="ernaehrungsberatung.html#angebote">Angebote entdecken</a>
+      <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen">
         ☰
       </button>
     </div>
     <nav id="mobile-nav" aria-label="Mobile Navigation" hidden>
-        <a href="ernaehrungsberatung.html#angebote">Angebote entdecken</a
-        ><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
-        ><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
-        ><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
+      <a href="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
+        entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
+        href="ernaehrungsberatung.html#kontakt">Kontakt</a>
     </nav>
   </header>
   <main id="inhalt" class="detail-page">
     <section class="detail-top">
       <div class="shell">
         <nav class="breadcrumb" aria-label="Brotkrumennavigation">
-            <a href="ernaehrungsberatung.html#angebote"
-              >Alle Ernährungsangebote</a
-            ><span aria-hidden="true">/</span
-            ><span aria-current="page">Starter</span>
+          <a href="ernaehrungsberatung.html#angebote">Alle Ernährungsangebote</a><span aria-hidden="true">/</span><span
+            aria-current="page">Starter</span>
         </nav>
         <div class="detail-hero">
           <div class="hero-copy">
@@ -95,37 +67,27 @@
             </p>
             <div class="detail-facts" aria-label="Paket auf einen Blick">
               <div>
-                  <span>Gesamtpreis · Vorschlag</span><strong>149,00 €</strong
-                  ><small>einmalig für das gesamte Paket</small>
+                <span>Gesamtpreis · Vorschlag</span><strong>149,00 €</strong><small>einmalig für das gesamte
+                  Paket</small>
               </div>
               <div>
-                  <span>Laufzeit</span><strong>4 Wochen</strong
-                  ><small>ab vereinbartem Starttermin</small>
+                <span>Laufzeit</span><strong>4 Wochen</strong><small>ab vereinbartem Starttermin</small>
               </div>
               <div>
-                  <span>Persönliche Beratung</span><strong>2 Termine</strong
-                  ><small>insgesamt 90 Minuten</small>
+                <span>Persönliche Beratung</span><strong>2 Termine</strong><small>insgesamt 90 Minuten</small>
               </div>
               <div>
-                  <span>Selbstlernkurse</span><strong>1 Kurs</strong
-                  ><small>je 45 Minuten, online</small>
+                <span>Selbstlernkurse</span><strong>1 Kurs</strong><small>je 45 Minuten, online</small>
               </div>
             </div>
             <div class="hero-actions">
-                <a class="button" href="#leistungen">Leistungen entdecken</a
-                ><a class="text-link" href="#coaching-vorteil"
-                  >Dein Coaching-Rabatt</a
-                >
+              <a class="button" href="#leistungen">Leistungen entdecken</a><a class="text-link"
+                href="#coaching-vorteil">Dein Coaching-Rabatt</a>
             </div>
           </div>
           <figure class="hero-visual">
-              <img
-                src="assets/images/angebote/starter.webp"
-                width="1200"
-                height="800"
-                alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
-                fetchpriority="high"
-              />
+            <img src="assets/images/angebote/starter.webp" width="1200" height="800"
+              alt="Persönliche Begleitung für sportlich aktive Menschen ab 50" fetchpriority="high" />
             <figcaption>
               <span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
               <p>Dein erster guter Schritt.</p>
@@ -243,10 +205,7 @@
         </p>
       </div>
     </section>
-      <section
-        id="coaching-vorteil"
-        class="detail-section detail-price-section"
-      >
+    <section id="coaching-vorteil" class="detail-section detail-price-section">
       <div class="shell detail-price-layout">
         <div>
           <p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
@@ -261,36 +220,28 @@
             Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
             10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
           </p>
-            <a class="text-link" href="https://tri-hub.de/coaching-1zu1"
-              >Coaching 1zu1 kennenlernen</a
-            >
+          <a class="text-link" href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1 kennenlernen</a>
         </div>
         <div class="price-panel" data-base-price="149">
           <p class="eyebrow">STARTER · 4 WOCHEN</p>
           <p class="price-caption">Beispiel-Gesamtpreis</p>
           <p class="detail-price" data-price-output>149,00 €</p>
           <p class="price-caption">Einmalig · kein monatliches Abo</p>
-            <label for="coaching-select">Dein bestehendes Coaching-Paket</label
-            ><select id="coaching-select">
+          <label for="coaching-select">Dein bestehendes Coaching-Paket</label><select id="coaching-select">
             <option value="0">Noch kein Coaching 1zu1</option>
             <option value="3">Starter-Coaching · 3 % Rabatt</option>
             <option value="5">Standard-Coaching · 5 % Rabatt</option>
             <option value="10">Premium-Coaching · 10 % Rabatt</option>
           </select>
-            <p
-              class="discount-summary"
-              data-discount-output
-              role="status"
-              aria-live="polite"
-            >
+          <p class="discount-summary" data-discount-output role="status" aria-live="polite">
             Ohne Coaching-Rabatt: 149,00 € für das gesamte Paket.
           </p>
-            <noscript
-              ><p>
+          <noscript>
+            <p>
               Mit Starter-Coaching: 144,53 € · Standard-Coaching: 141,55 € ·
               Premium-Coaching: 134,10 €.
-              </p></noscript
-            >
+            </p>
+          </noscript>
           <p class="proposal-note">
             Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
             müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
@@ -306,42 +257,29 @@
           <h2>Welche Begleitung passt zu dir?</h2>
           <p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
         </div>
-          <a class="button" href="ernaehrungsberatung.html#angebote"
-            >Zur Angebotsübersicht</a
-          >
+        <a class="button" href="ernaehrungsberatung.html#angebote">Zur Angebotsübersicht</a>
+        <a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
       </div>
       <div class="detail-alternatives">
-          <a class="button outline" href="ernaehrung-standard.html"
-            >Standard ansehen</a
-          ><a class="button outline" href="ernaehrung-premium.html"
-            >Premium ansehen</a
-          >
+        <a class="button outline" href="ernaehrung-standard.html">Standard ansehen</a><a class="button outline"
+          href="ernaehrung-premium.html">Premium ansehen</a>
       </div>
     </section>
   </main>
   <footer>
     <div class="shell footer-main">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-        ></a>
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span></a>
       <p>Dein sportliches Zuhause ab 50.</p>
       <a href="https://tri-hub.de/">Zur TriHub-Website</a>
     </div>
     <div class="shell footer-note">
-        <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span
-        ><span
-          >Ernährungsangebote sind Konzeptvorschläge, keine veröffentlichten
-          TriHub-Tarife.</span
-        >
+      <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span><span>Ernährungsangebote sind
+        Konzeptvorschläge, keine veröffentlichten
+        TriHub-Tarife.</span>
     </div>
   </footer>
 </body>
+
 </html>

ernaehrung-vergleich.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Ernährungsberatung im Vergleich | TriHub</title>
+<meta name="description" content="Starter, Standard und Premium: Preise, Laufzeiten und Leistungen der Ernährungsberatung im direkten Vergleich.">
+<link rel="icon" href="assets/images/icons/trihub-logo.jpg" type="image/jpeg">
+<link rel="stylesheet" href="css/assets.css">
+<link rel="stylesheet" href="css/sections/vergleich.css">
+<script src="js/vergleich.js" defer></script>
+</head>
+<body>
+<a class="skip" href="#inhalt">Zum Vergleich</a>
+<div class="comparison-sheet">
+<header class="comparison-header">
+<a href="ernaehrungsberatung.html" class="brand" aria-label="Zur Ernährungsberatung"><img src="assets/images/icons/trihub-logo.jpg" width="72" height="72" alt="Trihub – fit und vital ab 50!"></a>
+<nav aria-label="Vergleichsnavigation"><a href="ernaehrungsberatung.html#angebote">← Zur Angebotsübersicht</a><button type="button" id="print-comparison" hidden>Ansicht drucken / als PDF speichern</button></nav>
+</header>
+<main id="inhalt">
+<p class="eyebrow">TRI-HUB · ERNÄHRUNGSBERATUNG</p>
+<h1>Drei Pakete.<br>Deine Begleitung im Vergleich.</h1>
+<p class="intro">Wie viel Unterstützung passt zu dir? Vergleiche Starter, Standard und Premium – von der ersten Beratung bis zur persönlichen Wettkampfstrategie. Alle Preise gelten für das gesamte Paket.</p>
+<p class="concept"><strong>Paketvorschläge zur Teamabstimmung.</strong> Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht von TriHub bestätigt. Diese Übersicht ist kein Vertrag und löst keine Buchung aus.</p>
+<section aria-labelledby="comparison-title">
+<h2 id="comparison-title">Preise und Leistungen auf einen Blick</h2>
+<p class="scroll-hint" id="scroll-help">Auf kleinen Bildschirmen kannst du die Tabelle seitlich verschieben.</p>
+<div class="table-scroll" tabindex="0" role="region" aria-label="Paketvergleich, horizontal scrollbar" aria-describedby="scroll-help">
+<table>
+<caption>Ernährungsberatung: Starter, Standard und Premium</caption>
+<colgroup><col class="feature-column"><col><col><col></colgroup>
+<thead><tr><th scope="col">Leistung</th><th scope="col">Starter<span>Ein klarer Einstieg</span></th><th scope="col">Standard<span>Dein individueller Plan</span></th><th scope="col">Premium<span>Enge persönliche Begleitung</span></th></tr></thead>
+<tbody><tr class="group"><th colspan="4" scope="colgroup">Preis und Laufzeit</th></tr>
+<tr><th scope="row">Gesamtpreis (Beispiel)</th><td>149,00 €</td><td>349,00 €</td><td>649,00 €</td></tr>
+<tr><th scope="row">Laufzeit</th><td>4 Wochen</td><td>8 Wochen</td><td>12 Wochen</td></tr>
+<tr><th scope="row">Abrechnung</th><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td></tr>
+<tr class="group"><th colspan="4" scope="colgroup">Persönliche Begleitung</th></tr>
+<tr><th scope="row">Video-Beratungen</th><td>2 Termine · insgesamt 90 Min.</td><td>4 Termine · insgesamt 150 Min.</td><td>7 Termine · insgesamt 240 Min.</td></tr>
+<tr><th scope="row">Erstgespräch</th><td>60 Minuten</td><td>60 Minuten</td><td>60 Minuten</td></tr>
+<tr><th scope="row">Folge- und Abschlussgespräche</th><td>1 × 30 Minuten</td><td>3 × 30 Minuten</td><td>6 × 30 Minuten</td></tr>
+<tr><th scope="row">Ernährungsprotokoll</th><td>Analyse von 3 Tagen</td><td>Analyse von 5 Tagen</td><td>Analyse von 7 Tagen</td></tr>
+<tr class="group"><th colspan="4" scope="colgroup">Dein Plan und dein Wissen</th></tr>
+<tr><th scope="row">Persönliche Empfehlungen</th><td>Maßnahmenplan als PDF</td><td>Im individuellen Ernährungsrahmen enthalten</td><td>Im individuellen Ernährungsrahmen enthalten</td></tr>
+<tr><th scope="row">Individueller Ernährungsrahmen</th><td>Nicht enthalten</td><td>7-Tage-Rahmen mit Mahlzeitenbausteinen, Portionsorientierung und Einkaufshilfe</td><td>7-Tage-Rahmen plus persönliche Wettkampfstrategie</td></tr>
+<tr><th scope="row">Wettkampfverpflegung</th><td>Nicht enthalten</td><td>Nicht enthalten</td><td>Strategie für einen Zielwettkampf: davor, währenddessen und danach</td></tr>
+<tr><th scope="row">Plananpassungen</th><td>Keine laufende Anpassung</td><td>2 gezielte Anpassungen</td><td>Bis zu 5 Anpassungen</td></tr>
+<tr><th scope="row">Selbstlernkurse</th><td>1 Kurs à 45 Minuten</td><td>2 Kurse à 45 Minuten</td><td>3 Kurse à 45 Minuten</td></tr>
+<tr><th scope="row">Kursinhalte</th><td>Essen und Trinken rund ums Training</td><td>Grundlagen plus Mahlzeitenplanung und Regeneration</td><td>Grundlagen, Mahlzeitenplanung und Regeneration plus Wettkampfverpflegung</td></tr>
+<tr><th scope="row">Kurszugriff</th><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td></tr>
+<tr class="group"><th colspan="4" scope="colgroup">Fragen zwischen den Terminen</th></tr>
+<tr><th scope="row">E-Mail-Rückfragen</th><td>1 gebündelte Rückfragerunde insgesamt</td><td>1 gebündelte Rückfragerunde pro Woche</td><td>Bis zu 2 gebündelte Rückfragerunden pro Woche</td></tr>
+<tr><th scope="row">Rückmeldung innerhalb von</th><td>3 Werktagen¹</td><td>2 Werktagen¹</td><td>1 Werktag¹</td></tr>
+<tr class="group"><th colspan="4" scope="colgroup">Dein Coaching-Vorteil²</th></tr>
+<tr><th scope="row">Mit Starter-Coaching · 3 %</th><td>144,53 €</td><td>338,53 €</td><td>629,53 €</td></tr>
+<tr><th scope="row">Mit Standard-Coaching · 5 %</th><td>141,55 €</td><td>331,55 €</td><td>616,55 €</td></tr>
+<tr><th scope="row">Mit Premium-Coaching · 10 %</th><td>134,10 €</td><td>314,10 €</td><td>584,10 €</td></tr>
+</tbody>
+<tfoot><tr><th scope="row">Mehr zum Paket</th><td><a href="ernaehrung-starter.html">Starter entdecken →</a></td><td><a href="ernaehrung-standard.html">Standard entdecken →</a></td><td><a href="ernaehrung-premium.html">Premium entdecken →</a></td></tr></tfoot>
+</table>
+</div>
+<div class="notes"><p>¹ Werktage: Montag bis Freitag, ausgenommen Feiertage.</p><p>² Der Rabatt richtet sich nach deinem <strong>bestehenden Coaching-1zu1-Paket</strong>, unabhängig vom gewählten Ernährungsangebot. Er gilt während der Coaching-Laufzeit. Die drei Rabattstufen sind Alternativen und werden nicht addiert.</p><p>Unverbindliche Beispielpreise. Endpreise und steuerliche Angaben müssen vor Veröffentlichung abgestimmt werden.</p></div>
+</section>
+<section class="framework" aria-labelledby="framework-title"><h2 id="framework-title">Für alle drei Pakete gilt</h2><p>Starttermin und Beratungstermine werden gemeinsam vereinbart. Die Laufzeit beginnt mit dem Erstgespräch. Nach dem aktuellen Konzept endet das Paket ohne automatische Verlängerung. Zusatztermine sind nicht im Beispielpreis enthalten und würden separat vereinbart.</p><p>Alle Konditionen sind Vorschläge zur Abstimmung. Ausführliche Leistungsbeschreibungen und Zeitpläne findest du auf den jeweiligen Paketdetailseiten.</p></section>
+<div class="bottom-actions"><a href="ernaehrungsberatung.html#angebote">← Zurück zu den Angeboten</a><a href="ernaehrungsberatung.html#kontakt">Fragen zur Beratung?</a></div>
+</main>
+<footer>TriHub · Ernährungsberatung · Projektprototyp · Stand: 30.09.2026</footer>
+</div>
+</body></html>

ernaehrungsberatung.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="de">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Ernährungsberatung ab 50 | TriHub</title>
-    <meta
-      name="description"
-      content="Ernährung, die zu deinem Triathlon und deinem Leben passt. Entdecke drei Konzepte für persönliche Ernährungsberatung bei TriHub."
-    />
-    <link
-      rel="icon"
-      type="image/jpeg"
-      href="assets/images/icons/trihub-logo.jpg"
-    />
+  <meta name="description"
+    content="Ernährung, die zu deinem Triathlon und deinem Leben passt. Entdecke drei Konzepte für persönliche Ernährungsberatung bei TriHub." />
+  <link rel="icon" type="image/jpeg" href="assets/images/icons/trihub-logo.jpg" />
   <link rel="stylesheet" href="css/assets.css" />
   <link rel="stylesheet" href="css/base.css" />
   <link rel="stylesheet" href="css/sections/hero.css" />
@@ -23,45 +18,29 @@
   <script src="js/angebote.js" defer></script>
   <script src="js/main.js" defer></script>
 </head>
+
 <body>
   <a class="skip" href="#inhalt">Zum Inhalt</a>
   <header class="site-header">
     <div class="shell header-inner">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-          ><span class="brand-copy"
-            ><span class="brand-name">Tri-hub</span
-            ><span class="brand-sub"
-              >Ernährungsberatung für Triathlon ab 50</span
-            ></span
-          ></a
-        >
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span><span class="brand-copy"><span
+            class="brand-name">Tri-hub</span><span class="brand-sub">Ernährungsberatung für Triathlon ab
+            50</span></span></a>
       <nav aria-label="Hauptnavigation">
-        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a href="#angebote">Angebote entdecken</a><a href="#ablauf">So
+        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a href="#angebote">Angebote entdecken</a><a
+          href="#ablauf">So
           läuft’s ab</a><a href="#kontakt">Kontakt</a>
       </nav>
-        <button
-          class="menu-toggle"
-          aria-expanded="false"
-          aria-controls="mobile-nav"
-          aria-label="Menü öffnen"
-        >
+      <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen">
         ☰
       </button>
     </div>
     <nav id="mobile-nav" aria-label="Mobile Navigation" hidden>
-        <a href="#angebote">Angebote entdecken</a
-        ><a href="#vorteile">Deine Vorteile</a
-        ><a href="#ablauf">So läuft’s ab</a
-        ><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
+      <a href="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
+        entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
+        href="ernaehrungsberatung.html#kontakt">Kontakt</a>
     </nav>
   </header>
   <main id="inhalt">
@@ -76,8 +55,8 @@
           passt.
         </p>
         <div class="hero-actions">
-            <a class="button" href="#angebote">Deine Begleitung finden</a
-            ><a class="text-link" href="#ablauf">So funktioniert’s</a>
+          <a class="button" href="#angebote">Deine Begleitung finden</a><a class="text-link" href="#ablauf">So
+            funktioniert’s</a>
         </div>
         <div class="hero-note">
           <span class="check" aria-hidden="true">✓</span> Persönlich.
@@ -85,13 +64,9 @@
         </div>
       </div>
       <figure class="hero-visual">
-          <img
-            src="assets/images/hero/hero.webp"
-            width="1200"
-            height="800"
+        <img src="assets/images/hero/hero.webp" width="1200" height="800"
           alt="Zwei sportlich aktive Menschen ab 50 besprechen einen Plan neben einem Fahrrad am See"
-            fetchpriority="high"
-          />
+          fetchpriority="high" />
         <figcaption>
           <span>DEIN TEMPO. DEINE ZIELE.</span>
           <p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
@@ -100,9 +75,8 @@
     </section>
     <div class="values-strip">
       <div class="shell">
-          <span>Für deinen Einstieg</span><i aria-hidden="true">✦</i
-          ><span>Für deinen Wiedereinstieg</span><i aria-hidden="true">✦</i
-          ><span>Für dein nächstes Ziel</span>
+        <span>Für deinen Einstieg</span><i aria-hidden="true">✦</i><span>Für deinen Wiedereinstieg</span><i
+          aria-hidden="true">✦</i><span>Für dein nächstes Ziel</span>
       </div>
     </div>
     <section id="vorteile" class="shell section benefits">
@@ -156,18 +130,14 @@
           </p>
         </div>
         <div class="concept-note">
-            <span aria-hidden="true">ⓘ</span> Paketvorschläge zur Teamabstimmung · Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht bestätigt.
+          <span aria-hidden="true">ⓘ</span> Paketvorschläge zur Teamabstimmung · Preise, Laufzeiten und Leistungen sind
+          beispielhaft und noch nicht bestätigt.
         </div>
         <div class="package-grid">
           <article class="package">
             <div class="package-image">
-                <img
-                  src="assets/images/angebote/starter.webp"
-                  width="700"
-                  height="420"
-                  alt="Gemeinsame Planung am See für den sportlichen Einstieg"
-                  loading="lazy"
-                />
+              <img src="assets/images/angebote/starter.webp" width="700" height="420"
+                alt="Gemeinsame Planung am See für den sportlichen Einstieg" loading="lazy" />
             </div>
             <div class="package-body">
               <p class="eyebrow">STARTER</p>
@@ -181,22 +151,14 @@
                 <li>Analyse deiner Essgewohnheiten</li>
                 <li>Konkrete Empfehlungen für den Alltag</li>
               </ul>
-                <a
-                  class="button outline package-open"
-                  href="ernaehrung-starter.html"
-                  >Starter entdecken</a
-                >
+              <a class="button outline package-open" href="ernaehrung-starter.html">Starter entdecken</a>
             </div>
           </article>
           <article class="package featured">
             <div class="package-image">
-                <img
-                  src="assets/images/angebote/standard.webp"
-                  width="700"
-                  height="420"
-                  alt="Sportler und Coach besprechen gemeinsam einen Plan am Fahrrad"
-                  loading="lazy"
-                /><span class="package-badge">MIT INDIVIDUELLEM PLAN</span>
+              <img src="assets/images/angebote/standard.webp" width="700" height="420"
+                alt="Sportler und Coach besprechen gemeinsam einen Plan am Fahrrad" loading="lazy" /><span
+                class="package-badge">MIT INDIVIDUELLEM PLAN</span>
             </div>
             <div class="package-body">
               <p class="eyebrow">STANDARD</p>
@@ -210,20 +172,13 @@
                 <li>Individueller Ernährungsrahmen</li>
                 <li>Feedback und gemeinsame Anpassung</li>
               </ul>
-                <a class="button package-open" href="ernaehrung-standard.html"
-                  >Standard entdecken</a
-                >
+              <a class="button package-open" href="ernaehrung-standard.html">Standard entdecken</a>
             </div>
           </article>
           <article class="package">
             <div class="package-image">
-                <img
-                  src="assets/images/angebote/premium.webp"
-                  width="700"
-                  height="420"
-                  alt="Persönliches Coachinggespräch auf einer Bank neben einem Triathlonrad"
-                  loading="lazy"
-                />
+              <img src="assets/images/angebote/premium.webp" width="700" height="420"
+                alt="Persönliches Coachinggespräch auf einer Bank neben einem Triathlonrad" loading="lazy" />
             </div>
             <div class="package-body">
               <p class="eyebrow">PREMIUM</p>
@@ -237,16 +192,13 @@
                 <li>Verpflegungsstrategie für Wettkämpfe</li>
                 <li>Engmaschige Begleitung und Anpassung</li>
               </ul>
-                <a
-                  class="button outline package-open"
-                  href="ernaehrung-premium.html"
-                  >Premium entdecken</a
-                >
+              <a class="button outline package-open" href="ernaehrung-premium.html">Premium entdecken</a>
             </div>
           </article>
         </div>
         <div class="coaching-banner">
-            <div class="bonus-symbol" aria-hidden="true">%</div>
+          <p style="margin: 32px 0"><a class="button" href="ernaehrung-vergleich.html">Alle Pakete im Vergleich →</a>
+          </p>
           <div>
             <h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
             <p>
@@ -254,11 +206,7 @@
               Ernährungsberatung.
             </p>
           </div>
-            <a
-              class="text-link"
-              href="ernaehrung-standard.html#coaching-vorteil"
-              >Rabatte ansehen</a
-            >
+          <a class="text-link" href="ernaehrung-standard.html#coaching-vorteil">Rabatte ansehen</a>
         </div>
       </div>
     </section>
@@ -321,36 +269,41 @@
           <h2 id="kontakt-title">Vereinbare ein<br />persönliches Gespräch.</h2>
         </div>
         <p>
-            Lerne deinen Trainer kennen und kläre in einem ersten Gespräch,
+          Lerne Lilli kennen und kläre in einem ersten Gespräch,
           welche Begleitung zu dir passt.
         </p>
       </div>
 
       <div class="contact-grid">
-          <!-- PLATZHALTER: Trainerprofil – Inhalte folgen vom Kunden -->
-          <article class="trainer-card" aria-label="Trainerprofil (Platzhalter)">
-            <div class="trainer-photo" role="img" aria-label="Platzhalter für das Foto des Trainers">
-              <span aria-hidden="true">Foto folgt</span>
-            </div>
+        <!-- Trainerprofil: Relindis Agethen (Lilli) -->
+        <article class="trainer-card" aria-labelledby="trainer-name">
+          <figure class="trainer-photo">
+            <img src="assets/images/trainer/lilli.webp" width="800" height="1067"
+              alt="Relindis Agethen (Lilli) auf dem Triathlonrad im Wettkampf" loading="lazy" />
+          </figure>
           <div class="trainer-body">
-              <p class="placeholder-tag">Platzhalter</p>
-              <h3>[Name des Trainers]</h3>
-              <p class="trainer-role">[Rolle, z. B. Triathlon-Coach &amp; Ernährungsberater]</p>
+            <h3 id="trainer-name">Relindis Agethen (Lilli)</h3>
+            <p class="trainer-role">Triathletin und Ernährungsberaterin</p>
             <ul class="trainer-facts">
-                <li><span>Qualifikation</span>[Ausbildung / Studium]</li>
-                <li><span>Zertifikate</span>[z. B. Lizenz, Fortbildungen]</li>
-                <li><span>Erfahrung</span>[Jahre im Triathlon / in der Beratung]</li>
-                <li><span>Schwerpunkte</span>[z. B. Ernährung ab 50, Wettkampfvorbereitung]</li>
+              <li><span>Qualifikation</span>Zertifizierte Ernährungsberaterin für Sportler (B-Lizenz)</li>
+              <li><span>Erfahrung</span>Seit 16 Jahren aktiv im Triathlon</li>
+              <li><span>Erfolge</span>Vize-Europameisterin, Deutsche Meisterin, mehrfache Baden-Württembergische
+                Meisterin</li>
+              <li><span>Schwerpunkt</span>Ernährung, Leistungssport-Perspektive und wettkampforientierte Entwicklung
+              </li>
             </ul>
-              <p class="trainer-quote">„[Kurzes persönliches Statement des Trainers]“</p>
+            <p class="trainer-bio">
+              Lilli ergänzt das TriHub-Team um Leistungsentwicklung und
+              Ernährungswissen – aus eigener Wettkampferfahrung.
+            </p>
           </div>
         </article>
 
         <div class="contact-card">
-            <p class="eyebrow">KOSTENLOS &amp; UNVERBINDLICH</p>
+          <p class="eyebrow">KOSTENFREI &amp; UNVERBINDLICH</p>
           <h3>Vereinbare ein persönliches Gespräch</h3>
           <p>
-              Schreib deinem Trainer über das Kontaktformular von TriHub.
+            Schreib Lilli über das Kontaktformular von TriHub.
             Erzähl kurz von deinen Zielen – du bekommst eine persönliche Antwort.
           </p>
           <ul class="contact-points">
@@ -365,27 +318,18 @@
   </main>
   <footer>
     <div class="shell footer-main">
-        <a
-          class="brand brand-logo"
-          href="https://tri-hub.de/"
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-        ></a>
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
+            alt="Trihub – fit und vital ab 50!" /></span></a>
       <p>Dein sportliches Zuhause ab 50.</p>
       <a href="https://tri-hub.de/">Zur TriHub-Website</a>
     </div>
     <div class="shell footer-note">
-        <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span
-        ><span
-          >Ernährungsangebote sind Konzeptvorschläge, keine veröffentlichten
-          TriHub-Tarife.</span
-        >
+      <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span><span>Ernährungsangebote sind
+        Konzeptvorschläge, keine veröffentlichten
+        TriHub-Tarife.</span>
     </div>
   </footer>
 </body>
+
 </html>

js/vergleich.js

@@ -0,0 +1,7 @@
+/* Druckdialog bietet auch „Als PDF speichern“ an. */
+(() => {
+  const printButton = document.getElementById("print-comparison");
+  if (!printButton) return;
+  printButton.hidden = false;
+  printButton.addEventListener("click", () => window.print());
+})();