Überarbeitung der ernaehrungsberatung.html

feature_US02-03
Justin Muravjev 2026-09-29 16:11:29 +02:00
parent f000e0909d
commit e9ebfb231a
1 changed files with 332 additions and 306 deletions

View File

@ -1,323 +1,349 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ernährungsberatung für Triathlon 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" />
<link rel="stylesheet" href="css/assets.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/sections/hero.css" />
<link rel="stylesheet" href="css/sections/angebote.css" />
<link rel="stylesheet" href="css/sections/ablauf.css" />
<link rel="stylesheet" href="css/responsive.css" />
<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>
<nav aria-label="Hauptnavigation">
<a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a href="#inhalt"
aria-current="page">Ernährungsberatung</a><a href="#angebote">Angebote entdecken</a><a href="#ablauf">So
läuft’s ab</a><a href="#">Kontakt</a>
<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"
/>
<link rel="stylesheet" href="css/assets.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/sections/hero.css" />
<link rel="stylesheet" href="css/sections/angebote.css" />
<link rel="stylesheet" href="css/sections/ablauf.css" />
<link rel="stylesheet" href="css/responsive.css" />
<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
>
<nav aria-label="Hauptnavigation">
<a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
><a href="#inhalt" aria-current="page">Ernährungsberatung</a
><a href="#ablauf">So läuft’s ab</a>
</nav>
<a class="button small header-cta" href="#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="#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>
</nav>
<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>
</nav>
</header>
<main id="inhalt">
<section class="hero shell" aria-labelledby="hero-title">
<div class="hero-copy">
<div class="eyebrow">
<span class="tiny-line"></span> ERNÄHRUNGSBERATUNG FÜR TRIATHLON AB
50
</div>
<h1 id="hero-title">
Gut versorgt.<br />Für alles, was<br /><em>noch vor dir liegt.</em>
</h1>
<p class="hero-intro">
Dein nächstes Ziel beginnt auch auf dem Teller. Finde eine
Ernährung, die zu deinem Training, deinem Körper und deinem Leben
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>
</div>
<div class="hero-note">
<span class="check" aria-hidden="true">✓</span> Persönlich.
Alltagstauglich. Auf Augenhöhe.
</div>
</div>
<figure class="hero-visual">
<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" />
<figcaption>
<span>DEIN TEMPO. DEINE ZIELE.</span>
<p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
</figcaption>
</figure>
</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>
</div>
</div>
<section id="vorteile" class="shell section benefits">
<div class="section-heading">
<div>
<p class="eyebrow">WAS DU DAVON HAST</p>
<h2>Dein Training verdient<br />die passende Ernährung.</h2>
</div>
<p>
Du bringst die Motivation mit. Gemeinsam schaffen wir Orientierung
für das Essen und Trinken rund um deinen Sport.
</p>
</div>
<div class="benefit-grid">
<article>
<span class="benefit-icon" aria-hidden="true">↗</span>
<h3>Energie gezielt einplanen</h3>
<p>
Verstehe, wie du deine Mahlzeiten auf ruhige Tage, intensive
Einheiten und lange Ausfahrten abstimmst.
</header>
<main id="inhalt">
<section class="hero shell" aria-labelledby="hero-title">
<div class="hero-copy">
<div class="eyebrow">
<span class="tiny-line"></span> ERNÄHRUNGSBERATUNG FÜR TRIATHLON AB
50
</div>
<h1 id="hero-title">
Gut versorgt.<br />Für alles, was<br /><em>noch vor dir liegt.</em>
</h1>
<p class="hero-intro">
Dein nächstes Ziel beginnt auch auf dem Teller. Finde eine
Ernährung, die zu deinem Training, deinem Körper und deinem Leben
passt.
</p>
</article>
<article>
<span class="benefit-icon" aria-hidden="true">↻</span>
<h3>Regeneration mitdenken</h3>
<p>
Gib Erholung einen festen Platz – mit einer Ernährung, die deinen
Körper nach dem Training unterstützt.
</p>
</article>
<article>
<span class="benefit-icon" aria-hidden="true">✓</span>
<h3>Im Alltag dranbleiben</h3>
<p>
Entwickle Routinen, die zu Arbeit, Familie und deinen Vorlieben
passen. Ohne komplizierte Regeln.
</p>
</article>
<div class="hero-actions">
<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.
Alltagstauglich. Auf Augenhöhe.
</div>
</div>
<figure class="hero-visual">
<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"
/>
<figcaption>
<span>DEIN TEMPO. DEINE ZIELE.</span>
<p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
</figcaption>
<div class="image-tag">TRIATHLON <b>50+</b></div>
</figure>
</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>
</div>
</div>
</section>
<section id="angebote" class="offers-section">
<div class="shell section">
<section id="vorteile" class="shell section benefits">
<div class="section-heading">
<div>
<p class="eyebrow">DEINE ERNÄHRUNG. DEINE BEGLEITUNG.</p>
<h2>So viel Unterstützung,<br />wie du brauchst.</h2>
<p class="eyebrow">WAS DU DAVON HAST</p>
<h2>Dein Training verdient<br />die passende Ernährung.</h2>
</div>
<p>
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
der sich für dich richtig anfühlt.
Du bringst die Motivation mit. Gemeinsam schaffen wir Orientierung
für das Essen und Trinken rund um deinen Sport.
</p>
</div>
<div class="concept-note">
<span aria-hidden="true">ⓘ</span> Angebotskonzept · Leistungen zur
Abstimmung. Preise und Laufzeiten sind noch offen.
</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" />
</div>
<div class="package-body">
<p class="eyebrow">STARTER</p>
<h3>Dein erster<br />guter Schritt.</h3>
<p>
Für Einsteiger und Wiedereinsteiger, die ihre Ernährung
verstehen und gezielt verändern möchten.
</p>
<ul>
<li>Persönliche Bestandsaufnahme</li>
<li>Analyse deiner Essgewohnheiten</li>
<li>Konkrete Empfehlungen für den Alltag</li>
</ul>
<button class="button package-open" data-package="starter">
Starter entdecken
</button>
</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>
</div>
<div class="package-body">
<p class="eyebrow">STANDARD</p>
<h3>Aus guten Vorsätzen<br />wird dein Plan.</h3>
<p>
Für alle, die Ernährung und Training aufeinander abstimmen und
neue Routinen festigen möchten.
</p>
<ul>
<li>Alles aus Starter</li>
<li>Individueller Ernährungsrahmen</li>
<li>Feedback und gemeinsame Anpassung</li>
</ul>
<button class="button package-open" data-package="standard">
Standard entdecken
</button>
</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" />
</div>
<div class="package-body">
<p class="eyebrow">PREMIUM</p>
<h3>Dein Ziel.<br />Ganz persönlich.</h3>
<p>
Für ambitionierte Ziele und alle, die sich eine besonders
enge, individuelle Begleitung wünschen.
</p>
<ul>
<li>Alles aus Standard</li>
<li>Verpflegungsstrategie für Wettkämpfe</li>
<li>Engmaschige Begleitung und Anpassung</li>
</ul>
<button class="button package-open" data-package="premium">
Premium entdecken
</button>
</div>
</article>
</div>
<div class="coaching-banner">
<div class="bonus-symbol" aria-hidden="true">%</div>
<div>
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
<div class="benefit-grid">
<article>
<span class="benefit-icon" aria-hidden="true">↗</span>
<h3>Energie gezielt einplanen</h3>
<p>
Spare mit deinem bestehenden Coaching-Paket bei der
Ernährungsberatung.
Verstehe, wie du deine Mahlzeiten auf ruhige Tage, intensive
Einheiten und lange Ausfahrten abstimmst.
</p>
</article>
<article>
<span class="benefit-icon" aria-hidden="true">↻</span>
<h3>Regeneration mitdenken</h3>
<p>
Gib Erholung einen festen Platz – mit einer Ernährung, die deinen
Körper nach dem Training unterstützt.
</p>
</article>
<article>
<span class="benefit-icon" aria-hidden="true">✓</span>
<h3>Im Alltag dranbleiben</h3>
<p>
Entwickle Routinen, die zu Arbeit, Familie und deinen Vorlieben
passen. Ohne komplizierte Regeln.
</p>
</article>
</div>
</section>
<section id="angebote" class="offers-section">
<div class="shell section">
<div class="section-heading">
<div>
<p class="eyebrow">DEINE ERNÄHRUNG. DEINE BEGLEITUNG.</p>
<h2>So viel Unterstützung,<br />wie du brauchst.</h2>
</div>
<p>
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
der sich für dich richtig anfühlt.
</p>
</div>
<button id="bonus-open" class="text-link">Rabatte ansehen</button>
<div class="concept-note">
<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"
/>
</div>
<div class="package-body">
<p class="eyebrow">STARTER</p>
<h3>Dein erster<br />guter Schritt.</h3>
<p>
Für Einsteiger und Wiedereinsteiger, die ihre Ernährung
verstehen und gezielt verändern möchten.
</p>
<ul>
<li>Persönliche Bestandsaufnahme</li>
<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
>
</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>
</div>
<div class="package-body">
<p class="eyebrow">STANDARD</p>
<h3>Aus guten Vorsätzen<br />wird dein Plan.</h3>
<p>
Für alle, die Ernährung und Training aufeinander abstimmen und
neue Routinen festigen möchten.
</p>
<ul>
<li>Alles aus Starter</li>
<li>Individueller Ernährungsrahmen</li>
<li>Feedback und gemeinsame Anpassung</li>
</ul>
<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"
/>
</div>
<div class="package-body">
<p class="eyebrow">PREMIUM</p>
<h3>Dein Ziel.<br />Ganz persönlich.</h3>
<p>
Für ambitionierte Ziele und alle, die sich eine besonders
enge, individuelle Begleitung wünschen.
</p>
<ul>
<li>Alles aus Standard</li>
<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
>
</div>
</article>
</div>
<div class="coaching-banner">
<div class="bonus-symbol" aria-hidden="true">%</div>
<div>
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
<p>
Spare mit deinem bestehenden Coaching-Paket bei der
Ernährungsberatung.
</p>
</div>
<a
class="text-link"
href="ernaehrung-standard.html#coaching-vorteil"
>Rabatte ansehen</a
>
</div>
</div>
</div>
</section>
<section id="ablauf" class="shell section process">
<div class="section-heading">
<div>
<p class="eyebrow">SO LÄUFT’S AB</p>
<h2>Vom ersten Gespräch<br />zu deiner eigenen Routine.</h2>
</section>
<section id="ablauf" class="shell section process">
<div class="section-heading">
<div>
<p class="eyebrow">SO LÄUFT’S AB</p>
<h2>Vom ersten Gespräch<br />zu deiner eigenen Routine.</h2>
</div>
<p>
Du musst nicht schon alles wissen. Wir beginnen bei dir und gehen
Schritt für Schritt weiter.
</p>
</div>
<ol class="steps">
<li>
<span class="step-number">01</span>
<h3>Dich kennenlernen</h3>
<p>
Wir besprechen deine Ziele, deinen Alltag und deine sportliche
Ausgangslage.
</p>
</li>
<li>
<span class="step-number">02</span>
<h3>Gewohnheiten verstehen</h3>
<p>
Ein Ernährungsprotokoll macht sichtbar, was bereits passt und wo
du ansetzen kannst.
</p>
</li>
<li>
<span class="step-number">03</span>
<h3>Deinen Weg planen</h3>
<p>
Du erhältst konkrete Empfehlungen – je nach Paket ergänzt um einen
individuellen Ernährungsrahmen.
</p>
</li>
<li>
<span class="step-number">04</span>
<h3>Umsetzen & anpassen</h3>
<p>
Du erprobst die Empfehlungen. In Standard und Premium begleiten
Feedback und Anpassungen deinen Weg.
</p>
</li>
</ol>
<div class="process-end">
<p>Der beste Plan ist der, der in dein Leben passt.</p>
<a class="text-link" href="#angebote">Dein Angebot entdecken</a>
</div>
<p>
Du musst nicht schon alles wissen. Wir beginnen bei dir und gehen
Schritt für Schritt weiter.
</p>
</div>
<ol class="steps">
<li>
<span class="step-number">01</span>
<h3>Dich kennenlernen</h3>
<p>
Wir besprechen deine Ziele, deinen Alltag und deine sportliche
Ausgangslage.
</p>
</li>
<li>
<span class="step-number">02</span>
<h3>Gewohnheiten verstehen</h3>
<p>
Ein Ernährungsprotokoll macht sichtbar, was bereits passt und wo
du ansetzen kannst.
</p>
</li>
<li>
<span class="step-number">03</span>
<h3>Deinen Weg planen</h3>
<p>
Du erhältst konkrete Empfehlungen – je nach Paket ergänzt um einen
individuellen Ernährungsrahmen.
</p>
</li>
<li>
<span class="step-number">04</span>
<h3>Umsetzen & anpassen</h3>
<p>
Du erprobst die Empfehlungen. In Standard und Premium begleiten
Feedback und Anpassungen deinen Weg.
</p>
</li>
</ol>
<div class="process-end">
<p>Der beste Plan ist der, der in dein Leben passt.</p>
<a class="text-link" href="#angebote">Dein Angebot entdecken</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>
<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>
</div>
</footer>
<dialog id="package-dialog" aria-labelledby="dialog-title">
<div class="dialog-inner">
<button class="close-dialog" aria-label="Details schließen">×</button>
<p id="dialog-eyebrow" class="eyebrow"></p>
<h2 id="dialog-title"></h2>
<p id="dialog-description"></p>
<section id="detail-section">
<h3>Deine Begleitung im Überblick</h3>
<ul id="dialog-features"></ul>
<p class="detail-note">
Konzeptvorschlag: Leistungsumfang, Kontaktfrequenz, Laufzeit und
Preis werden noch abgestimmt.
</p>
</section>
<section class="discount-box">
<p class="eyebrow">DEIN COACHING-VORTEIL</p>
<h3>Du bist schon im Coaching 1zu1?</h3>
<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</option>
<option value="5">Standard-Coaching</option>
<option value="10">Premium-Coaching (24 oder 52 Wochen)</option>
</select>
<div id="discount-result" aria-live="polite"></div>
<p class="discount-help">
Der Rabatt richtet sich nach deinem bestehenden Coaching 1zu1,
unabhängig vom gewählten Ernährungsangebot. Er gilt während der
Coaching-Laufzeit auf den aktuellen Verkaufspreis der
Ernährungsberatung.
</p>
<a href="https://tri-hub.de/coaching-1zu1" target="_blank" rel="noopener">Coaching 1zu1 bei TriHub ansehen</a>
</section>
<button class="button dialog-done">Zurück zu den Angeboten</button>
</div>
</dialog>
</body>
</html>
</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>
<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
>
</div>
</footer>
</body>
</html>