263 lines
13 KiB
HTML
263 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ernährungsberatung für Triathleten | tri-hub</title>
|
||
<!-- Schriften und Styles: gemeinsame Grundlage zuerst, danach die einzelnen Bereiche. -->
|
||
<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&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&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/leistungen.css">
|
||
<link rel="stylesheet" href="css/berater.css">
|
||
<link rel="stylesheet" href="css/beratung.css">
|
||
<!-- Navigation und dynamische Inhalte werden nach dem Einlesen des HTML initialisiert. -->
|
||
<script src="js/navigation.js" defer></script>
|
||
<script src="js/leistungen.js" defer></script>
|
||
<script src="js/berater.js" defer></script>
|
||
<script src="js/beratung.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
|
||
<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>
|
||
<!-- Ein gemeinsamer Linksatz für Desktop und Mobil; navigation.js steuert den Menüknopf. -->
|
||
<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="#produktuebersicht">Übersicht</a></li>
|
||
<li><a href="#leistungen">Pakete</a></li>
|
||
<li><a href="#berater">Berater</a></li>
|
||
<li><a href="#beratung">Infos</a></li>
|
||
<li><a href="html/kontakt.html">Kontakt</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<!-- Shahnam: Produktübersicht -->
|
||
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
||
<div class="produktuebersicht__main">
|
||
<div class="hero">
|
||
<img class="hero__image" src="images/hero-nutrition.png"
|
||
alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
|
||
height="1024" fetchpriority="high">
|
||
|
||
<div class="container hero__inner">
|
||
<div class="hero__content">
|
||
<p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
|
||
<h1 id="hero-title">
|
||
Dein Training hat einen Plan.
|
||
<span>Deine Ernährung auch?</span>
|
||
</h1>
|
||
<p class="hero__description">
|
||
Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Vorteile der Beratung und ergänzender Slogan. -->
|
||
<div class="hero__details">
|
||
<ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">01</span>
|
||
<p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
|
||
</li>
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">02</span>
|
||
<p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
|
||
</li>
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">03</span>
|
||
<p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</span></p>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="hero__caption">
|
||
<p class="hero__caption-label">Ernährung für deinen Sport</p>
|
||
<p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Vincent: Leistungsübersicht -->
|
||
<!-- Titel, Einleitung und Karten werden durch leistungen.js aus json/pakete.json erzeugt. -->
|
||
<section id="leistungen" class="pakete">
|
||
<div class="pakete__intro">
|
||
<h2 class="pakete__titel"></h2>
|
||
<p class="pakete__text"></p>
|
||
</div>
|
||
|
||
<div class="pakete__grid"></div>
|
||
</section>
|
||
|
||
<!-- Ahmad: Berater und Qualifikationen -->
|
||
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
|
||
<div class="section-header">
|
||
<h2 class="section-title"></h2>
|
||
<p class="section-subtitle"></p>
|
||
</div>
|
||
<!-- Container wird durch berater.js befüllt -->
|
||
<div class="berater-container" id="berater-container"></div>
|
||
</section>
|
||
|
||
<!-- Dennis: Beratungsablauf und Footer -->
|
||
<div class="beratung-bereich">
|
||
<section id="beratung" class="section">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">Info über die Beratung</span>
|
||
<h2>Gut zu wissen, bevor du startest</h2>
|
||
<p class="lead">Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und
|
||
was dich erwartet.</p>
|
||
</div>
|
||
|
||
<!-- Beratung im Überblick: Inhalte, Ablauf, Zielgruppe und weitere Informationen. -->
|
||
<div class="grid-2">
|
||
<div class="box reveal">
|
||
<h2>Was dich bei der Beratung erwartet</h2>
|
||
|
||
<p>Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und
|
||
entwickeln daraus passende Strategien für deinen Alltag.</p>
|
||
|
||
<ul class="check-list">
|
||
<li>Individuelle Ernährungsberatung</li>
|
||
<li>Erstellung von Ernährungsplänen</li>
|
||
<li>Unterstützung bei Gewichtsmanagement</li>
|
||
<li>Beratung bei speziellen Ernährungsbedürfnissen</li>
|
||
<li>Analyse deiner aktuellen Ernährungsgewohnheiten</li>
|
||
<li>Praktische Tipps für die Umsetzung im Alltag</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box reveal">
|
||
<h2>So läuft die Beratung ab</h2>
|
||
|
||
<ol class="beratung-ablauf">
|
||
<li>
|
||
<strong>Erstgespräch</strong>
|
||
<p>Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.</p>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Analyse</strong>
|
||
<p>Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet.
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Planung</strong>
|
||
<p>Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.</p>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Begleitung</strong>
|
||
<p>Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="box reveal">
|
||
<h2>Für wen ist die Beratung geeignet?</h2>
|
||
|
||
<ul class="check-list">
|
||
<li>Menschen, die ihre Ernährung verbessern möchten</li>
|
||
<li>Sportler mit individuellen Ernährungszielen</li>
|
||
<li>Menschen mit speziellen Ernährungsbedürfnissen</li>
|
||
<li>Personen, die Unterstützung beim Gewichtsmanagement suchen</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box reveal">
|
||
<h2>Weitere Informationen</h2>
|
||
|
||
<p class="muted">
|
||
Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen,
|
||
Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="container" id="kontakt">
|
||
<!-- Einstieg zur separaten Kontaktseite mit Formular. -->
|
||
<div class="cta-band reveal">
|
||
<h2>Bereit für deinen nächsten Schritt?</h2>
|
||
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
|
||
dir
|
||
passt.</p>
|
||
<a class="btn btn-accent" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
<!-- Seitenabschluss mit internen Links, Trihub-Angeboten und rechtlichen Informationen. -->
|
||
<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="#beratung">Ablauf der Beratung</a></li>
|
||
<li><a href="#kontakt">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 & 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>
|
||
</main>
|
||
</body>
|
||
|
||
</html>
|