271 lines
12 KiB
HTML
271 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 50+ | tri-hub</title>
|
||
<meta name="description" content="Ernährungsberatung für Triathletinnen und Triathleten ab 50.">
|
||
|
||
<!-- Kunden-CSS (Tailwind-Build von tri-hub.de) – NICHT verändern -->
|
||
<link rel="stylesheet" href="css/assets.css">
|
||
|
||
<!-- Schriften laut Design-DNA: Playfair Display (Überschriften) + Inter (Text) -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap">
|
||
|
||
<!-- Projektweite Basis (Design-Tokens, Lesbarkeit) -->
|
||
<link rel="stylesheet" href="css/base.css">
|
||
|
||
<!-- Ein Stylesheet pro User Story – jede Datei gehört genau einem Feature-Branch -->
|
||
<link rel="stylesheet" href="css/sections/hero.css"> <!-- US01-01 -->
|
||
<link rel="stylesheet" href="css/sections/angebote.css"> <!-- US01-02 -->
|
||
<link rel="stylesheet" href="css/sections/ablauf.css"> <!-- US01-03 -->
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<a href="/" class="site-logo">tri-hub</a>
|
||
<!-- US01-05 Navigation: späterer Sprint -->
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ========== US01-01: Angebot und Zielgruppe (Hero) ==========
|
||
Branch: feature/US01-01-hero · Styles: css/sections/hero.css
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="hero" aria-labelledby="hero-title">
|
||
<div class="container">
|
||
<div class="hero-grid">
|
||
|
||
<div class="hero-copy">
|
||
<h1 id="hero-title">
|
||
<span class="hero-kicker"><span class="hero-line" aria-hidden="true"></span>Ernährungsberatung für Triathlon ab 50</span>
|
||
<span class="hero-headline">Gut versorgt.<br>Für alles, was<br><em>noch vor dir liegt.</em></span>
|
||
</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="hero-button" href="#angebote">Mehr erfahren <span aria-hidden="true">↓</span></a>
|
||
<a class="hero-link" href="#ablauf">So funktioniert’s <span aria-hidden="true">→</span></a>
|
||
</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 class="hero-caption-label">Dein Tempo. Deine Ziele.</span>
|
||
<span class="hero-caption-text">Mehr Freude am Sport.<br>Mehr Energie fürs Leben.</span>
|
||
</figcaption>
|
||
<div class="hero-tag" aria-hidden="true">Triathlon <b>50+</b></div>
|
||
</figure>
|
||
|
||
</div>
|
||
|
||
<!-- 3 Vorteile mit Überschrift (Checkliste US01-01) -->
|
||
<ul class="hero-benefits" aria-label="Deine Vorteile auf einen Blick">
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">↗</span>
|
||
<div>
|
||
<h2>Energie gezielt einplanen</h2>
|
||
<p>Mahlzeiten passend zu Ruhetagen, harten Einheiten und langen Ausfahrten.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">↻</span>
|
||
<div>
|
||
<h2>Regeneration mitdenken</h2>
|
||
<p>Ernährung, die deinen Körper nach dem Training gezielt unterstützt.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">✓</span>
|
||
<div>
|
||
<h2>Im Alltag dranbleiben</h2>
|
||
<p>Routinen, die zu Arbeit, Familie und deinen Vorlieben passen.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
<!-- ========== /US01-01 ========== -->
|
||
|
||
|
||
<!-- ========== US01-02: Angebote und Pakete ==========
|
||
Branch: feature_US01-02 · Styles: css/sections/angebote.css · Script: js/angebote.js
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="angebote" aria-labelledby="angebote-title">
|
||
<div class="container">
|
||
|
||
<div class="angebote-heading">
|
||
<div>
|
||
<p class="angebote-eyebrow">Deine Ernährung. Deine Begleitung.</p>
|
||
<h2 id="angebote-title">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>
|
||
|
||
<p class="concept-note"><span aria-hidden="true">ⓘ</span> Angebotskonzept · Leistungen zur Abstimmung. Preise und Laufzeiten sind noch offen.</p>
|
||
|
||
<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="package-label">Starter</p>
|
||
<h3>Dein erster<br>guter Schritt.</h3>
|
||
<p class="package-text">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 type="button" class="package-button" data-package="starter">Starter entdecken <span aria-hidden="true">↗</span></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="package-label">Standard</p>
|
||
<h3>Aus guten Vorsätzen<br>wird dein Plan.</h3>
|
||
<p class="package-text">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 type="button" class="package-button is-primary" data-package="standard">Standard entdecken <span aria-hidden="true">↗</span></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="package-label">Premium</p>
|
||
<h3>Dein Ziel.<br>Ganz persönlich.</h3>
|
||
<p class="package-text">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 type="button" class="package-button" data-package="premium">Premium entdecken <span aria-hidden="true">↗</span></button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<!-- Verweis auf Rabatte aus dem Coaching 1zu1 -->
|
||
<div class="coaching-banner">
|
||
<div class="bonus-symbol" aria-hidden="true">%</div>
|
||
<div>
|
||
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
|
||
<p>Mit deinem Coaching-Paket sparst du bei der Ernährungsberatung: Starter 3 %, Standard 5 %, Premium 10 %.</p>
|
||
</div>
|
||
<button type="button" class="bonus-button" data-package="bonus">Rabatte ansehen <span aria-hidden="true">↗</span></button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Detaildialog (öffnet nur per Klick, kein Pop-up beim Laden) -->
|
||
<dialog id="package-dialog" aria-labelledby="dialog-title">
|
||
<div class="dialog-inner">
|
||
<button type="button" class="close-dialog" aria-label="Details schließen">×</button>
|
||
<p id="dialog-eyebrow" class="angebote-eyebrow"></p>
|
||
<h2 id="dialog-title"></h2>
|
||
<p id="dialog-description"></p>
|
||
|
||
<div id="detail-section">
|
||
<h3>Deine Begleitung im Überblick</h3>
|
||
<ul id="dialog-features"></ul>
|
||
<p class="dialog-hint">Konzeptvorschlag: Leistungsumfang, Kontaktfrequenz, Laufzeit und Preis werden noch abgestimmt.</p>
|
||
</div>
|
||
|
||
<div class="discount-box">
|
||
<p class="angebote-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>
|
||
<p id="discount-result" aria-live="polite"></p>
|
||
<p class="dialog-hint">Der Rabatt richtet sich nach deinem bestehenden Coaching 1zu1, unabhängig vom gewählten Ernährungsangebot.</p>
|
||
<a href="https://tri-hub.de/coaching-1zu1" target="_blank" rel="noopener">Coaching 1zu1 bei TriHub ansehen ↗</a>
|
||
</div>
|
||
|
||
<button type="button" class="dialog-done">Zurück zu den Angeboten</button>
|
||
</div>
|
||
</dialog>
|
||
</section>
|
||
<!-- ========== /US01-02 ========== -->
|
||
|
||
|
||
<!-- ========== US01-03: Ablauf sehen ==========
|
||
Branch: feature_US01-03 · Styles: css/sections/ablauf.css
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="ablauf" aria-labelledby="ablauf-title">
|
||
<div class="container">
|
||
|
||
<div class="ablauf-heading">
|
||
<div>
|
||
<p class="ablauf-eyebrow">So läuft’s ab</p>
|
||
<h2 id="ablauf-title">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 class="step">
|
||
<span class="step-number" aria-hidden="true">01</span>
|
||
<h3><span class="sr-only">Schritt 1: </span>Dich kennenlernen</h3>
|
||
<p>Wir besprechen deine Ziele, deinen Alltag und deine sportliche Ausgangslage.</p>
|
||
</li>
|
||
<li class="step">
|
||
<span class="step-number" aria-hidden="true">02</span>
|
||
<h3><span class="sr-only">Schritt 2: </span>Gewohnheiten verstehen</h3>
|
||
<p>Ein Ernährungsprotokoll macht sichtbar, was bereits passt und wo du ansetzen kannst.</p>
|
||
</li>
|
||
<li class="step">
|
||
<span class="step-number" aria-hidden="true">03</span>
|
||
<h3><span class="sr-only">Schritt 3: </span>Deinen Weg planen</h3>
|
||
<p>Du erhältst konkrete Empfehlungen – je nach Paket ergänzt um einen individuellen Ernährungsrahmen.</p>
|
||
</li>
|
||
<li class="step">
|
||
<span class="step-number" aria-hidden="true">04</span>
|
||
<h3><span class="sr-only">Schritt 4: </span>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="process-link" href="#angebote">Dein Angebot entdecken <span aria-hidden="true">↑</span></a>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<!-- ========== /US01-03 ========== -->
|
||
|
||
</main>
|
||
|
||
<script src="js/main.js" defer></script>
|
||
<script src="js/angebote.js" defer></script> <!-- US01-02 -->
|
||
</body>
|
||
</html>
|