1374 lines
44 KiB
HTML
1374 lines
44 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta
|
||
name="description"
|
||
content="Ernährungsberatung bei Tri-hub: Essen, Trinken und Energiemanagement für deinen Triathlon ab 50."
|
||
/>
|
||
<title>Ernährung · Tri-hub</title>
|
||
|
||
<!-- Bestehende Tri-hub CSS als Basis -->
|
||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||
|
||
<!-- Neue Typografie für diese Unterseite -->
|
||
<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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<style>
|
||
:root {
|
||
--page-bg: #0d0d1a;
|
||
--page-bg-2: #1a1a2e;
|
||
--green: #10b981;
|
||
--green-dark: #059669;
|
||
--white: #ffffff;
|
||
--light: #f8fafc;
|
||
--muted: #94a3b8;
|
||
--line: rgba(248, 250, 252, 0.12);
|
||
--panel: rgba(255, 255, 255, 0.045);
|
||
--panel-strong: rgba(255, 255, 255, 0.065);
|
||
--max: 1180px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-width: 320px;
|
||
color: var(--light);
|
||
background:
|
||
radial-gradient(
|
||
circle at 12% 0%,
|
||
rgba(16, 185, 129, 0.09),
|
||
transparent 30%
|
||
),
|
||
radial-gradient(
|
||
circle at 88% 26%,
|
||
rgba(16, 185, 129, 0.055),
|
||
transparent 27%
|
||
),
|
||
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||
font-family:
|
||
Inter,
|
||
system-ui,
|
||
-apple-system,
|
||
BlinkMacSystemFont,
|
||
"Segoe UI",
|
||
sans-serif;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
margin: 0;
|
||
font-family: "Playfair Display", Georgia, sans-serif;
|
||
font-weight: 600;
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.05;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
border-bottom: 1px solid rgba(248, 250, 252, 0.08);
|
||
background: rgba(13, 13, 26, 0.84);
|
||
backdrop-filter: blur(18px);
|
||
-webkit-backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.nav {
|
||
width: min(var(--max), calc(100% - 40px));
|
||
min-height: 76px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 28px;
|
||
}
|
||
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.brand span {
|
||
color: var(--green);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 26px;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-links a {
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.nav-links a:hover,
|
||
.nav-links a[aria-current="page"] {
|
||
color: var(--white);
|
||
}
|
||
|
||
.nav-cta {
|
||
padding: 11px 16px;
|
||
border: 1px solid rgba(16, 185, 129, 0.42);
|
||
border-radius: 999px;
|
||
color: var(--white) !important;
|
||
background: rgba(16, 185, 129, 0.07);
|
||
}
|
||
|
||
.nav-cta:hover {
|
||
background: rgba(16, 185, 129, 0.14);
|
||
}
|
||
|
||
/* ===== Navigationsleiste ===== */
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -100px;
|
||
left: 16px;
|
||
z-index: 100;
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
background: var(--green);
|
||
color: #04150e;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
top: 12px;
|
||
}
|
||
|
||
.navbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
border-bottom: 1px solid rgba(248, 250, 252, 0.08);
|
||
background: rgba(13, 13, 26, 0.84);
|
||
backdrop-filter: blur(18px);
|
||
-webkit-backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.navbar__inner {
|
||
position: relative;
|
||
width: min(var(--max), calc(100% - 40px));
|
||
min-height: 76px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
}
|
||
|
||
.navbar__brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.navbar__logo-img {
|
||
width: 40px;
|
||
height: 40px;
|
||
flex: none;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.navbar__brand-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.navbar__brand-title {
|
||
color: var(--white);
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.navbar__brand-tagline {
|
||
color: var(--muted);
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.navbar__toggle {
|
||
display: none;
|
||
width: 44px;
|
||
height: 44px;
|
||
padding: 0;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: var(--white);
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.navbar__toggle-icon,
|
||
.navbar__toggle-icon::before,
|
||
.navbar__toggle-icon::after {
|
||
display: block;
|
||
width: 20px;
|
||
height: 2px;
|
||
border-radius: 2px;
|
||
background: currentColor;
|
||
transition:
|
||
transform 0.2s ease,
|
||
opacity 0.2s ease;
|
||
}
|
||
|
||
.navbar__toggle-icon {
|
||
position: relative;
|
||
}
|
||
|
||
.navbar__toggle-icon::before,
|
||
.navbar__toggle-icon::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.navbar__toggle-icon::before {
|
||
top: -6px;
|
||
}
|
||
|
||
.navbar__toggle-icon::after {
|
||
top: 6px;
|
||
}
|
||
|
||
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon {
|
||
background: transparent;
|
||
}
|
||
|
||
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before {
|
||
transform: translateY(6px) rotate(45deg);
|
||
}
|
||
|
||
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after {
|
||
transform: translateY(-6px) rotate(-45deg);
|
||
}
|
||
|
||
.navbar__menu {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.navbar__link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.navbar__link:hover,
|
||
.navbar__link[aria-current="page"] {
|
||
color: var(--white);
|
||
}
|
||
|
||
.navbar__link--home {
|
||
padding: 9px 14px;
|
||
border: 1px solid rgba(16, 185, 129, 0.42);
|
||
border-radius: 999px;
|
||
color: var(--white);
|
||
background: rgba(16, 185, 129, 0.07);
|
||
}
|
||
|
||
.navbar__link--home:hover {
|
||
background: rgba(16, 185, 129, 0.14);
|
||
}
|
||
|
||
.navbar__home-icon {
|
||
display: inline-flex;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.navbar__home-icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.navbar a:focus-visible,
|
||
.navbar__toggle:focus-visible {
|
||
outline: 2px solid var(--green);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.navbar__toggle {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.navbar__nav {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
left: 0;
|
||
display: none;
|
||
padding: 12px 0 20px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: rgba(13, 13, 26, 0.97);
|
||
}
|
||
|
||
.navbar__nav.is-open {
|
||
display: block;
|
||
}
|
||
|
||
.navbar__menu {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 4px;
|
||
}
|
||
|
||
.navbar__link {
|
||
display: flex;
|
||
padding: 12px 4px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.navbar__link--home {
|
||
justify-content: center;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.navbar__inner {
|
||
width: min(var(--max), calc(100% - 28px));
|
||
min-height: 68px;
|
||
}
|
||
|
||
.navbar__brand-tagline {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
width: min(var(--max), calc(100% - 40px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin-bottom: 18px;
|
||
color: var(--green);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero {
|
||
padding: 92px 0 82px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
|
||
gap: 64px;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero h1 {
|
||
max-width: 820px;
|
||
font-size: clamp(3.2rem, 7vw, 6.4rem);
|
||
}
|
||
|
||
.hero h1 .accent {
|
||
color: var(--green);
|
||
}
|
||
|
||
.hero-lead {
|
||
max-width: 700px;
|
||
margin-top: 30px;
|
||
color: var(--muted);
|
||
font-size: clamp(1rem, 1.7vw, 1.18rem);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 34px;
|
||
}
|
||
|
||
.button {
|
||
display: inline-flex;
|
||
min-height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 20px;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
transition:
|
||
transform 0.2s ease,
|
||
background 0.2s ease,
|
||
border-color 0.2s ease;
|
||
}
|
||
|
||
.button:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.button-primary {
|
||
color: #06130f;
|
||
background: var(--green);
|
||
box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
|
||
}
|
||
|
||
.button-primary:hover {
|
||
background: #34d399;
|
||
}
|
||
|
||
.button-secondary {
|
||
color: var(--light);
|
||
border-color: rgba(148, 163, 184, 0.25);
|
||
background: rgba(255, 255, 255, 0.025);
|
||
}
|
||
|
||
.button-secondary:hover {
|
||
border-color: rgba(16, 185, 129, 0.55);
|
||
}
|
||
|
||
.hero-card {
|
||
position: relative;
|
||
min-height: 410px;
|
||
padding: 38px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 28px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 72% 18%,
|
||
rgba(16, 185, 129, 0.2),
|
||
transparent 32%
|
||
),
|
||
linear-gradient(
|
||
145deg,
|
||
rgba(255, 255, 255, 0.075),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
.hero-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 230px;
|
||
height: 230px;
|
||
right: -75px;
|
||
top: -75px;
|
||
border: 1px solid rgba(16, 185, 129, 0.24);
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
0 0 0 34px rgba(16, 185, 129, 0.035),
|
||
0 0 0 68px rgba(16, 185, 129, 0.02);
|
||
}
|
||
|
||
.hero-card-mark {
|
||
position: absolute;
|
||
top: 42px;
|
||
left: 38px;
|
||
color: rgba(16, 185, 129, 0.88);
|
||
font-size: 4.5rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.hero-card h2 {
|
||
max-width: 420px;
|
||
font-size: clamp(2.2rem, 4vw, 3.5rem);
|
||
}
|
||
|
||
.hero-card p {
|
||
max-width: 440px;
|
||
margin-top: 18px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.section {
|
||
padding: 96px 0;
|
||
}
|
||
|
||
.section + .section {
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.section-heading {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||
gap: 70px;
|
||
align-items: end;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.section-heading h2 {
|
||
font-size: clamp(2.4rem, 4.8vw, 4.5rem);
|
||
}
|
||
|
||
.section-intro {
|
||
max-width: 650px;
|
||
color: var(--muted);
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.topic-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.topic {
|
||
min-height: 280px;
|
||
padding: 30px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 22px;
|
||
background: var(--panel);
|
||
transition:
|
||
transform 0.2s ease,
|
||
border-color 0.2s ease,
|
||
background 0.2s ease;
|
||
}
|
||
|
||
.topic:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(16, 185, 129, 0.34);
|
||
background: var(--panel-strong);
|
||
}
|
||
|
||
.topic-number {
|
||
margin-bottom: 70px;
|
||
color: var(--green);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
|
||
.topic h3 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.topic p {
|
||
margin-top: 14px;
|
||
color: var(--muted);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.knowledge {
|
||
display: grid;
|
||
grid-template-columns: 0.85fr 1.15fr;
|
||
gap: 64px;
|
||
align-items: start;
|
||
}
|
||
|
||
.knowledge h2 {
|
||
font-size: clamp(2.5rem, 5vw, 4.7rem);
|
||
}
|
||
|
||
.knowledge-copy {
|
||
color: var(--muted);
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.knowledge-list {
|
||
margin-top: 28px;
|
||
padding: 0;
|
||
list-style: none;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.knowledge-list li {
|
||
padding: 18px 0;
|
||
display: grid;
|
||
grid-template-columns: 32px 1fr;
|
||
gap: 14px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.knowledge-list strong {
|
||
color: var(--white);
|
||
}
|
||
.knowledge-list span {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: 7px;
|
||
border-radius: 50%;
|
||
background: var(--green);
|
||
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08);
|
||
}
|
||
|
||
.review-section {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.018),
|
||
rgba(255, 255, 255, 0.035)
|
||
);
|
||
}
|
||
|
||
.review-layout {
|
||
display: grid;
|
||
grid-template-columns: 0.82fr 1.18fr;
|
||
gap: 64px;
|
||
align-items: start;
|
||
}
|
||
|
||
.review-copy h2 {
|
||
font-size: clamp(2.6rem, 5vw, 4.8rem);
|
||
}
|
||
|
||
.review-copy p {
|
||
margin-top: 22px;
|
||
color: var(--muted);
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.review-form,
|
||
.review-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 22px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.review-form {
|
||
padding: 30px;
|
||
}
|
||
|
||
.review-form h3 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.form-intro {
|
||
margin-top: 10px;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.field {
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.field label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: var(--light);
|
||
font-size: 0.84rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
input[type="text"],
|
||
textarea,
|
||
select {
|
||
width: 100%;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
border-radius: 12px;
|
||
outline: 0;
|
||
color: var(--white);
|
||
background: rgba(13, 13, 26, 0.78);
|
||
font: inherit;
|
||
transition:
|
||
border-color 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
input[type="text"],
|
||
select {
|
||
height: 48px;
|
||
padding: 0 14px;
|
||
}
|
||
|
||
textarea {
|
||
min-height: 125px;
|
||
padding: 13px 14px;
|
||
resize: vertical;
|
||
}
|
||
|
||
input::placeholder,
|
||
textarea::placeholder {
|
||
color: #64748b;
|
||
}
|
||
|
||
input:focus,
|
||
textarea:focus,
|
||
select:focus {
|
||
border-color: rgba(16, 185, 129, 0.75);
|
||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||
}
|
||
|
||
.rating-input {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
justify-content: flex-end;
|
||
gap: 3px;
|
||
}
|
||
|
||
.rating-input input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.rating-input label {
|
||
margin: 0;
|
||
cursor: pointer;
|
||
color: #475569;
|
||
font-size: 1.7rem;
|
||
line-height: 1;
|
||
transition: color 0.15s ease;
|
||
}
|
||
|
||
.rating-input label:hover,
|
||
.rating-input label:hover ~ label,
|
||
.rating-input input:checked ~ label {
|
||
color: var(--green);
|
||
}
|
||
|
||
.consent {
|
||
margin-top: 18px;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
color: var(--muted);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.consent input {
|
||
margin-top: 4px;
|
||
accent-color: var(--green);
|
||
}
|
||
|
||
.review-form .button {
|
||
width: 100%;
|
||
margin-top: 22px;
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-status {
|
||
min-height: 20px;
|
||
margin-top: 12px;
|
||
color: var(--green);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.review-list {
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
|
||
.review-card {
|
||
padding: 26px;
|
||
}
|
||
|
||
.review-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
}
|
||
|
||
.person {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 42px;
|
||
height: 42px;
|
||
display: grid;
|
||
place-items: center;
|
||
flex: 0 0 auto;
|
||
border-radius: 50%;
|
||
color: #06130f;
|
||
background: var(--green);
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.person strong {
|
||
display: block;
|
||
color: var(--white);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.person small {
|
||
display: block;
|
||
margin-top: 2px;
|
||
color: var(--muted);
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.stars {
|
||
color: var(--green);
|
||
letter-spacing: 0.08em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.review-card blockquote {
|
||
margin: 22px 0 0;
|
||
color: var(--light);
|
||
font-family: "Playfair Display", Georgia, sans-serif;
|
||
font-size: 1.2rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.review-note {
|
||
padding: 20px 0 0;
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
footer {
|
||
padding: 30px 0 44px;
|
||
border-top: 1px solid var(--line);
|
||
color: var(--muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
}
|
||
|
||
footer strong {
|
||
color: var(--white);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.nav-links a:not(.nav-cta) {
|
||
display: none;
|
||
}
|
||
|
||
.hero-grid,
|
||
.section-heading,
|
||
.knowledge,
|
||
.review-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-grid {
|
||
gap: 42px;
|
||
}
|
||
|
||
.topic-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.section-heading {
|
||
gap: 22px;
|
||
}
|
||
|
||
.hero-card {
|
||
min-height: 330px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.container,
|
||
.nav {
|
||
width: min(var(--max), calc(100% - 28px));
|
||
}
|
||
|
||
.nav {
|
||
min-height: 68px;
|
||
}
|
||
|
||
.nav-cta {
|
||
padding: 9px 12px;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.hero {
|
||
padding: 64px 0;
|
||
}
|
||
|
||
.section {
|
||
padding: 68px 0;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.9rem, 15vw, 4.3rem);
|
||
}
|
||
|
||
.hero-card,
|
||
.review-form,
|
||
.review-card,
|
||
.topic {
|
||
padding: 24px;
|
||
}
|
||
|
||
footer .container {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="navbar-placeholder"></div>
|
||
|
||
<main id="main-content">
|
||
<!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
|
||
<section class="hero" id="ernaehrung">
|
||
<div class="container hero-grid">
|
||
<div>
|
||
<div class="eyebrow">TRI-HUB · ERNÄHRUNG</div>
|
||
|
||
<h1 style="font-family: "Inter", sans-serif">
|
||
Essen, Trinken<br />
|
||
und <span class="accent">Energie.</span>
|
||
</h1>
|
||
|
||
<p class="hero-lead">
|
||
Ernährung gehört zu deinem Training genauso wie
|
||
Schwimmen, Radfahren und Laufen. Hier findest du
|
||
Wissen und Orientierung rund um Sporternährung,
|
||
Hydration, Energieaufnahme und Magenmanagement –
|
||
passend zu deinem Triathlon ab 50.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<a
|
||
class="button button-primary"
|
||
href="/angebotsuebersicht.html"
|
||
>Ernährungswissen entdecken</a
|
||
>
|
||
<a
|
||
class="button button-secondary"
|
||
href="#erfahrungen"
|
||
>Erfahrungen lesen</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<aside
|
||
class="hero-card"
|
||
sans-serif="Themen der Ernährungsberatung"
|
||
>
|
||
<div>
|
||
<div class="eyebrow">ERNÄHRUNGSBERATUNG</div>
|
||
<h2
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Was funktioniert für dich?
|
||
</h2>
|
||
<p>
|
||
Keine komplizierten Regeln. Sondern Wissen, das
|
||
dir hilft, deine Ernährung rund um Training und
|
||
Wettkampf bewusster zu gestalten.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Themen -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<div>
|
||
<div class="eyebrow">TRI-HUB SPEKTRUM</div>
|
||
<h2
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Ernährung,<br />die mitdenkt.
|
||
</h2>
|
||
</div>
|
||
|
||
<p class="section-intro">
|
||
Die Ernährungsberatung ergänzt das Tri-hub-Angebot
|
||
um die Themen, die für Training und Wettkampf
|
||
besonders wichtig sind. Von den Grundlagen der
|
||
Sporternährung bis zur Frage, was dein Magen während
|
||
einer langen Einheit verträgt.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="topic-grid">
|
||
<article class="topic">
|
||
<div class="topic-number">01 · SPORTERNÄHRUNG</div>
|
||
<h3
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Die Grundlagen
|
||
</h3>
|
||
<p>
|
||
Verstehe, welche Rolle deine Ernährung vor,
|
||
während und nach dem Training spielen kann.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="topic">
|
||
<div class="topic-number">02 · HYDRATION</div>
|
||
<h3
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Trinken & Energie
|
||
</h3>
|
||
<p>
|
||
Orientierung rund um Flüssigkeit und
|
||
Energieaufnahme – besonders dann, wenn die
|
||
Belastung länger wird.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="topic">
|
||
<div class="topic-number">03 · MAGENMANAGEMENT</div>
|
||
<h3
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Was verträgst du?
|
||
</h3>
|
||
<p>
|
||
Ernährung soll nicht nur auf dem Papier
|
||
funktionieren. Sie muss auch unter Belastung zu
|
||
dir passen.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Wissen -->
|
||
<section class="section" id="wissen">
|
||
<div class="container knowledge">
|
||
<div>
|
||
<div class="eyebrow">FACHBEITRÄGE</div>
|
||
<h2 style="font-family: "Inter", sans-serif">
|
||
Wissen,<br />das dich<br />weiterbringt.
|
||
</h2>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="knowledge-copy">
|
||
Rund um Ernährung gibt es viele Empfehlungen. Bei
|
||
Tri-hub geht es darum, daraus verständliche
|
||
Orientierung für deinen Sport und deinen Alltag zu
|
||
machen. Die Inhalte dieser Seite bauen auf dem
|
||
Ernährungsspektrum von Tri-hub auf.
|
||
</p>
|
||
|
||
<ul class="knowledge-list">
|
||
<li>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<div>
|
||
<strong>Sporternährung</strong><br />
|
||
<span
|
||
>Grundlagen für Training und
|
||
Wettkampf.</span
|
||
>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<div>
|
||
<strong>Hydration</strong><br />
|
||
<span
|
||
>Trinken und Flüssigkeitsversorgung im
|
||
Ausdauertraining.</span
|
||
>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<div>
|
||
<strong>Energieaufnahme</strong><br />
|
||
<span
|
||
>Wie du Energie rund um Belastung
|
||
bewusst planen kannst.</span
|
||
>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<div>
|
||
<strong>Magenmanagement</strong><br />
|
||
<span
|
||
>Verträglichkeit als Teil deiner
|
||
persönlichen Strategie.</span
|
||
>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- User Story: Rezensionen -->
|
||
<section class="section review-section" id="erfahrungen">
|
||
<div class="container review-layout">
|
||
<div class="review-copy">
|
||
<div class="eyebrow">DEINE ERFAHRUNG</div>
|
||
<h2 style="font-family: "Inter", sans-serif">
|
||
Was hat dir<br />geholfen?
|
||
</h2>
|
||
<p>
|
||
Deine Erfahrung kann anderen helfen, das Angebot
|
||
besser kennenzulernen. Teile, was du aus der
|
||
Ernährungsberatung mitgenommen hast und was sich für
|
||
dich im Training bewährt hat.
|
||
</p>
|
||
|
||
<a
|
||
class="button button-secondary"
|
||
href="#bewertung"
|
||
style="margin-top: 28px"
|
||
>
|
||
Bewertung schreiben
|
||
</a>
|
||
</div>
|
||
|
||
<div class="review-list">
|
||
<!-- Diese Beispielkarten sind bewusst als Platzhalter gekennzeichnet. -->
|
||
<article class="review-card">
|
||
<div class="review-top">
|
||
<div class="person">
|
||
<div class="avatar">T</div>
|
||
<div>
|
||
<strong>Deine Erfahrung</strong>
|
||
<small
|
||
>Hier kann eine Kundenstimme
|
||
erscheinen</small
|
||
>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="stars"
|
||
aria-label="Beispiel für eine Sternebewertung"
|
||
>
|
||
★★★★★
|
||
</div>
|
||
</div>
|
||
|
||
<blockquote
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
„Teile hier deine Erfahrung mit der
|
||
Ernährungsberatung – ehrlich, persönlich und so,
|
||
wie du sie erlebt hast.“
|
||
</blockquote>
|
||
</article>
|
||
|
||
<p class="review-note">
|
||
Hinweis: Die Bewertungen in dieser HTML-Demo werden
|
||
nicht dauerhaft gespeichert. Für den Live-Betrieb
|
||
sollte das Formular an das bestehende Backend oder
|
||
CMS von Tri-hub angebunden werden.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bewertungsformular -->
|
||
<section class="section" id="bewertung">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<div>
|
||
<div class="eyebrow">REZENSION VERFASSEN</div>
|
||
<h2
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Deine Stimme<br />zählt.
|
||
</h2>
|
||
</div>
|
||
|
||
<p class="section-intro">
|
||
Erzähle anderen von deiner persönlichen Erfahrung
|
||
mit dem Ernährungsangebot. Kurz und ehrlich reicht
|
||
völlig.
|
||
</p>
|
||
</div>
|
||
|
||
<form class="review-form" id="reviewForm">
|
||
<div class="field" style="margin-top: 0">
|
||
<label for="name">Dein Name</label>
|
||
<input
|
||
id="name"
|
||
name="name"
|
||
type="text"
|
||
autocomplete="name"
|
||
placeholder="z. B. Thomas M."
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Deine Bewertung</label>
|
||
<div
|
||
class="rating-input"
|
||
aria-label="Sternebewertung"
|
||
>
|
||
<input
|
||
id="star5"
|
||
name="rating"
|
||
type="radio"
|
||
value="5"
|
||
required
|
||
/>
|
||
<label for="star5" title="5 Sterne">★</label>
|
||
|
||
<input
|
||
id="star4"
|
||
name="rating"
|
||
type="radio"
|
||
value="4"
|
||
/>
|
||
<label for="star4" title="4 Sterne">★</label>
|
||
|
||
<input
|
||
id="star3"
|
||
name="rating"
|
||
type="radio"
|
||
value="3"
|
||
/>
|
||
<label for="star3" title="3 Sterne">★</label>
|
||
|
||
<input
|
||
id="star2"
|
||
name="rating"
|
||
type="radio"
|
||
value="2"
|
||
/>
|
||
<label for="star2" title="2 Sterne">★</label>
|
||
|
||
<input
|
||
id="star1"
|
||
name="rating"
|
||
type="radio"
|
||
value="1"
|
||
/>
|
||
<label for="star1" title="1 Stern">★</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="review">Deine Erfahrung</label>
|
||
<textarea
|
||
id="review"
|
||
name="review"
|
||
placeholder="Was hat dir an der Ernährungsberatung geholfen?"
|
||
required
|
||
></textarea>
|
||
</div>
|
||
|
||
<label class="consent">
|
||
<input type="checkbox" name="consent" required />
|
||
<span>
|
||
Ich stimme zu, dass meine Bewertung mit meinem
|
||
angegebenen Namen auf dieser Seite
|
||
veröffentlicht werden darf.
|
||
</span>
|
||
</label>
|
||
|
||
<button class="button button-primary" type="submit">
|
||
Bewertung veröffentlichen
|
||
</button>
|
||
|
||
<div
|
||
class="form-status"
|
||
id="formStatus"
|
||
role="status"
|
||
aria-live="polite"
|
||
></div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div>
|
||
<strong>tri-hub</strong> · Triathlon als sportliches Zuhause
|
||
ab 50.
|
||
</div>
|
||
<div>Ernährung · Wissen · Erfahrungen</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script
|
||
type="module"
|
||
src="/src/components/navigationsbar/navigation.js"
|
||
></script>
|
||
<script>
|
||
const form = document.getElementById("reviewForm");
|
||
const status = document.getElementById("formStatus");
|
||
|
||
form.addEventListener("submit", function (event) {
|
||
event.preventDefault();
|
||
|
||
const name = form.elements.name.value.trim();
|
||
const rating = form.elements.rating.value;
|
||
const review = form.elements.review.value.trim();
|
||
|
||
if (!name || !rating || !review) return;
|
||
|
||
status.textContent =
|
||
"Danke für deine Bewertung. In dieser Demo wurde sie noch nicht dauerhaft gespeichert.";
|
||
|
||
form.reset();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|