Merge pull request 'US01-05 Menüleiste + 2 Fehlerbereinigung' (#6) from US01-05-+-Fehlerbereinigung-NavLeiste-+-Fehlerbereinigung-50+ into dev2
Reviewed-on: https://gitty.informatik.th-mannheim.de/3015351/PM_Project/pulls/6feature_US02-03
commit
4c7d2d9c9c
224
css/base.css
224
css/base.css
|
|
@ -11,8 +11,15 @@
|
|||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 120px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--background);
|
||||
|
|
@ -22,29 +29,87 @@ body {
|
|||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
main { overflow: clip; }
|
||||
h1, h2, h3, p, figure { margin: 0; }
|
||||
h1, h2, h3 {
|
||||
|
||||
main {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-display), sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.04em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
h1, h2 { line-height: 1.12; }
|
||||
h3 { line-height: 1.35; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, select { font: inherit; }
|
||||
button { cursor: pointer; border: 0; }
|
||||
button, a, select { -webkit-tap-highlight-color: transparent; }
|
||||
a, button, select { touch-action: manipulation; }
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
h3 {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
a,
|
||||
select {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
select {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
:where(button, a, select):focus-visible {
|
||||
outline: 2px solid var(--accent-strong);
|
||||
outline-offset: 5px;
|
||||
}
|
||||
img { display: block; max-width: 100%; object-fit: cover; }
|
||||
button:disabled { cursor: default; }
|
||||
[hidden] { display: none !important; }
|
||||
.shell { width: min(1280px, calc(100% - 128px)); margin-inline: auto; }
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1280px, calc(100% - 128px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
|
||||
.site-header {
|
||||
|
|
@ -52,13 +117,12 @@ button:disabled { cursor: default; }
|
|||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: linear-gradient(
|
||||
color-mix(in oklab, var(--background) 95%, transparent),
|
||||
color-mix(in oklab, var(--background) 80%, transparent)
|
||||
);
|
||||
background: linear-gradient(color-mix(in oklab, var(--background) 95%, transparent),
|
||||
color-mix(in oklab, var(--background) 80%, transparent));
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
width: calc(100% - 64px);
|
||||
min-height: 98px;
|
||||
|
|
@ -68,12 +132,14 @@ button:disabled { cursor: default; }
|
|||
gap: 24px;
|
||||
padding-block: 16px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -87,16 +153,38 @@ button:disabled { cursor: default; }
|
|||
background: #fff;
|
||||
box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
|
||||
}
|
||||
.brand-logo img { width: 48px; height: 48px; object-fit: contain; }
|
||||
.brand-copy { display: grid; gap: 3px; }
|
||||
|
||||
.brand-logo img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
color: var(--quiet);
|
||||
font-size: .75rem;
|
||||
letter-spacing: .28em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.brand-sub { color: var(--muted); font-size: .875rem; line-height: 1.5; }
|
||||
.header-inner nav { display: flex; align-items: center; gap: 5px; }
|
||||
|
||||
.brand-sub {
|
||||
color: var(--muted);
|
||||
font-size: .875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header-inner nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-inner nav a {
|
||||
padding: 9px 14px;
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -106,13 +194,17 @@ button:disabled { cursor: default; }
|
|||
white-space: nowrap;
|
||||
transition: color .2s, background .2s, border-color .2s;
|
||||
}
|
||||
.header-inner nav a:hover,
|
||||
.header-inner nav a[aria-current] {
|
||||
border-color: var(--line);
|
||||
background: rgb(255 255 255 / 5%);
|
||||
color: #fff;
|
||||
|
||||
.header-inner nav a:hover {
|
||||
border-color: transparent;
|
||||
background: rgb(255 255 255 / 20%);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
.menu-toggle { display: none; }
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
|
|
@ -123,7 +215,10 @@ button:disabled { cursor: default; }
|
|||
background: #fff;
|
||||
color: var(--ink-strong);
|
||||
}
|
||||
.skip:focus { top: 12px; }
|
||||
|
||||
.skip:focus {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
/* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
|
||||
.button {
|
||||
|
|
@ -142,17 +237,29 @@ button:disabled { cursor: default; }
|
|||
text-align: center;
|
||||
transition: background .25s, border-color .25s, transform .25s var(--ease);
|
||||
}
|
||||
.button:hover { background: #e9edf0; transform: translateY(-2px); }
|
||||
.button.small { min-height: 42px; padding: 10px 20px; font-size: .875rem; }
|
||||
.button.outline, .header-cta {
|
||||
|
||||
.button:hover {
|
||||
background: #e9edf0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button.small {
|
||||
min-height: 42px;
|
||||
padding: 10px 20px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.button.outline {
|
||||
border-color: rgb(255 255 255 / 16%);
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.button.outline:hover, .header-cta:hover {
|
||||
|
||||
.button.outline:hover {
|
||||
border-color: rgb(255 255 255 / 28%);
|
||||
background: rgb(255 255 255 / 7%);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -166,14 +273,47 @@ button:disabled { cursor: default; }
|
|||
line-height: 1.4;
|
||||
transition: color .2s, border-color .2s;
|
||||
}
|
||||
.text-link:hover { color: #fff; border-color: #fff; }
|
||||
|
||||
.text-link:hover {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
footer { border-top: 1px solid var(--line); background: var(--sidebar); }
|
||||
.footer-main { display: flex; align-items: center; gap: 24px; padding-block: 32px; }
|
||||
.footer-main p { color: var(--muted); font-size: .9375rem; }
|
||||
.footer-main > a:last-child { margin-left: auto; color: var(--muted); font-size: .875rem; }
|
||||
.footer-main > a:last-child:hover { color: #fff; }
|
||||
.footer-note { display: flex; justify-content: space-between; gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
|
||||
footer {
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--sidebar);
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding-block: 32px;
|
||||
}
|
||||
|
||||
.footer-main p {
|
||||
color: var(--muted);
|
||||
font-size: .9375rem;
|
||||
}
|
||||
|
||||
.footer-main>a:last-child {
|
||||
margin-left: auto;
|
||||
color: var(--muted);
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.footer-main>a:last-child:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-note {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding-block: 20px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--quiet);
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
|
@ -1,389 +1,323 @@
|
|||
<!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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ernährungsberatung für best Ager | 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">Triathlon Ernährungsberatung für
|
||||
best Ager</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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<section id="vorteile" class="shell section benefits">
|
||||
<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.
|
||||
</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">WAS DU DAVON HAST</p>
|
||||
<h2>Dein Training verdient<br />die passende Ernährung.</h2>
|
||||
<p class="eyebrow">DEINE ERNÄHRUNG. DEINE BEGLEITUNG.</p>
|
||||
<h2>So viel Unterstützung,<br />wie du brauchst.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Du bringst die Motivation mit. Gemeinsam schaffen wir Orientierung
|
||||
für das Essen und Trinken rund um deinen Sport.
|
||||
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
|
||||
der sich für dich richtig anfühlt.
|
||||
</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.
|
||||
</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="concept-note">
|
||||
<span aria-hidden="true">ⓘ</span> Angebotskonzept · Leistungen zur
|
||||
Abstimmung. Preise und Laufzeiten sind noch offen.
|
||||
</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 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>
|
||||
<p>
|
||||
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
|
||||
der sich für dich richtig anfühlt.
|
||||
</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 outline 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 outline 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="package-body">
|
||||
<p class="eyebrow">STARTER</p>
|
||||
<h3>Dein erster<br />guter Schritt.</h3>
|
||||
<p>
|
||||
Spare mit deinem bestehenden Coaching-Paket bei der
|
||||
Ernährungsberatung.
|
||||
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>
|
||||
<button id="bonus-open" class="text-link">Rabatte ansehen</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>
|
||||
</section>
|
||||
<section id="ablauf" class="shell section process">
|
||||
<div class="section-heading">
|
||||
<div class="coaching-banner">
|
||||
<div class="bonus-symbol" aria-hidden="true">%</div>
|
||||
<div>
|
||||
<p class="eyebrow">SO LÄUFT’S AB</p>
|
||||
<h2>Vom ersten Gespräch<br />zu deiner eigenen Routine.</h2>
|
||||
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
|
||||
<p>
|
||||
Spare mit deinem bestehenden Coaching-Paket bei der
|
||||
Ernährungsberatung.
|
||||
</p>
|
||||
</div>
|
||||
<button id="bonus-open" class="text-link">Rabatte ansehen</button>
|
||||
</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>
|
||||
</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>
|
||||
Du musst nicht schon alles wissen. Wir beginnen bei dir und gehen
|
||||
Schritt für Schritt weiter.
|
||||
Wir besprechen deine Ziele, deinen Alltag und deine sportliche
|
||||
Ausgangslage.
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
Loading…
Reference in New Issue