249 lines
12 KiB
HTML
249 lines
12 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>
|
||
<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/produktuebersicht.css">
|
||
<link rel="stylesheet" href="css/leistungen.css">
|
||
<link rel="stylesheet" href="css/berater.css">
|
||
<link rel="stylesheet" href="css/beratung.css">
|
||
<script src="js/leistungen.js" defer></script>
|
||
<script src="js/berater.js" defer></script>
|
||
<script src="js/beratung.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<main id="main-content">
|
||
<!-- Shahnam: Produktübersicht -->
|
||
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
||
<header class="site-header">
|
||
<div class="container brand">
|
||
<div class="brand__logo">
|
||
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
|
||
</div>
|
||
<div class="brand__text">
|
||
<span class="brand__name">TRI-HUB</span>
|
||
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="produktuebersicht__main">
|
||
<div class="hero">
|
||
<img class="hero__image" src="images/hero-triathlon.webp"
|
||
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
|
||
height="1080" fetchpriority="high">
|
||
|
||
<div class="container hero__inner">
|
||
<div class="hero__content">
|
||
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
|
||
<h1 id="hero-title">
|
||
Überschrift. Weitere Zeile.
|
||
<span>Akzentzeile.</span>
|
||
</h1>
|
||
<p class="hero__description">
|
||
Hier folgt eine kurze Beschreibung der Ernährungsberatung.
|
||
Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
|
||
sobald die Inhalte vorliegen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="hero__details">
|
||
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">01</span>
|
||
<p>Erster Vorteil <span>Text folgt</span></p>
|
||
</li>
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">02</span>
|
||
<p>Zweiter Vorteil <span>Text folgt</span></p>
|
||
</li>
|
||
<li>
|
||
<span class="benefits__number" aria-hidden="true">03</span>
|
||
<p>Dritter Vorteil <span>Text folgt</span></p>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="hero__caption">
|
||
<p class="hero__caption-label">Bildunterschrift folgt</p>
|
||
<p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vorläufig ausgeblendet, bis die endgültigen Texte vorliegen.
|
||
<footer>
|
||
<div class="container site-footer__inner">
|
||
<p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
|
||
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
|
||
</div>
|
||
</footer>
|
||
-->
|
||
</section>
|
||
|
||
<!-- Vincent: Leistungsübersicht -->
|
||
<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>
|
||
|
||
<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">
|
||
<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-primary" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
<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>
|