1383 lines
47 KiB
HTML
1383 lines
47 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||
<link rel="stylesheet" href="/src/styles/footer.css" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<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>
|
||
|
||
<!-- 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;
|
||
--brand: #53d5cd;
|
||
--brand-hover: #36b8b1;
|
||
--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(83, 213, 205, 0.09),
|
||
transparent 30%
|
||
),
|
||
radial-gradient(
|
||
circle at 88% 26%,
|
||
rgba(83, 213, 205, 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(--brand);
|
||
}
|
||
|
||
.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(83, 213, 205, 0.42);
|
||
border-radius: 999px;
|
||
color: var(--white) !important;
|
||
background: rgba(83, 213, 205, 0.07);
|
||
}
|
||
|
||
.nav-cta:hover {
|
||
background: rgba(83, 213, 205, 0.14);
|
||
}
|
||
|
||
.container {
|
||
width: min(var(--max), calc(100% - 40px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin-bottom: 18px;
|
||
color: var(--brand);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero {
|
||
position: relative;
|
||
isolation: isolate;
|
||
padding: 92px 0 82px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0 0 56px;
|
||
z-index: -1;
|
||
background:
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(8, 15, 21, 0.72),
|
||
rgba(8, 15, 21, 0.84)
|
||
),
|
||
url("/images/startseiter_hintergrund.jpeg") 38% center / cover no-repeat;
|
||
}
|
||
|
||
.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(--brand);
|
||
}
|
||
|
||
.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(--brand);
|
||
box-shadow: 0 14px 32px rgba(83, 213, 205, 0.18);
|
||
}
|
||
|
||
.button-primary:hover {
|
||
background: #75e2dc;
|
||
}
|
||
|
||
.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(83, 213, 205, 0.55);
|
||
}
|
||
|
||
.hero-card {
|
||
position: relative;
|
||
transform: translateX(80px);
|
||
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(83, 213, 205, 0.2),
|
||
transparent 32%
|
||
),
|
||
linear-gradient(
|
||
145deg,
|
||
rgba(13, 19, 31, 0.78),
|
||
rgba(13, 19, 31, 0.84)
|
||
);
|
||
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(83, 213, 205, 0.24);
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
0 0 0 34px rgba(83, 213, 205, 0.035),
|
||
0 0 0 68px rgba(83, 213, 205, 0.02);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-card-mark {
|
||
position: absolute;
|
||
top: 42px;
|
||
left: 38px;
|
||
color: rgba(83, 213, 205, 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);
|
||
}
|
||
|
||
.hero-card > div {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.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(83, 213, 205, 0.34);
|
||
background: var(--panel-strong);
|
||
}
|
||
|
||
.topic-number {
|
||
margin-bottom: 70px;
|
||
color: var(--brand);
|
||
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-image-frame {
|
||
width: 100%;
|
||
transform: translateX(-18px);
|
||
margin-top: 28px;
|
||
padding: 9px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(248, 250, 252, 0.18);
|
||
border-radius: 22px;
|
||
background: linear-gradient(145deg, #273135, #151d22);
|
||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.knowledge-image-frame img {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 2.58 / 1;
|
||
border-radius: 14px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.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(--brand);
|
||
box-shadow: 0 0 0 5px rgba(83, 213, 205, 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"],
|
||
input[type="email"],
|
||
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"],
|
||
input[type="email"],
|
||
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(83, 213, 205, 0.75);
|
||
box-shadow: 0 0 0 3px rgba(83, 213, 205, 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: #f7c230;
|
||
}
|
||
|
||
.consent {
|
||
margin-top: 18px;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
color: var(--muted);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.consent a {
|
||
font-weight: 700;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.consent input {
|
||
margin-top: 4px;
|
||
accent-color: var(--brand);
|
||
}
|
||
|
||
.review-form .button {
|
||
width: 100%;
|
||
margin-top: 22px;
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#contactMessageHint.is-valid {
|
||
color: var(--brand);
|
||
}
|
||
|
||
.field-error {
|
||
display: block;
|
||
min-height: 0;
|
||
color: #fca5a5;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.form-status.is-error {
|
||
color: #fca5a5;
|
||
}
|
||
|
||
.form-status {
|
||
min-height: 20px;
|
||
margin-top: 12px;
|
||
color: var(--brand);
|
||
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(--brand);
|
||
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: #f7c230;
|
||
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;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@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 class="knowledge-image-frame">
|
||
<img
|
||
src="/images/exttraBild.jpeg"
|
||
alt="Ergänzendes Bild zur Ernährungsberatung"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</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"
|
||
id="reviewSlider"
|
||
role="region"
|
||
aria-roledescription="Karussell"
|
||
aria-label="Kundenrezensionen"
|
||
>
|
||
<div
|
||
class="review-stage"
|
||
aria-live="off"
|
||
tabindex="0"
|
||
role="group"
|
||
aria-label="Rezensionen durchblättern"
|
||
aria-describedby="reviewInstructions"
|
||
>
|
||
<article class="review-card is-active">
|
||
<div class="review-top">
|
||
<div class="person">
|
||
<div class="avatar">T</div>
|
||
<div>
|
||
<strong>Deine Erfahrung</strong>
|
||
<small
|
||
>Noch keine Rezension
|
||
vorhanden</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>
|
||
</div>
|
||
<span
|
||
class="review-instructions"
|
||
id="reviewInstructions"
|
||
>Mit der Maus ziehen oder mit den Pfeiltasten links
|
||
und rechts durch die Rezensionen wechseln.</span
|
||
>
|
||
<span class="review-announcement" role="status"></span>
|
||
<p class="review-feedback" role="status"></p>
|
||
<p class="review-note">
|
||
Nur Kunden mit einer vorhandenen Buchung können eine
|
||
Bewertung abgeben. Deine E-Mail-Adresse wird nicht
|
||
öffentlich angezeigt.
|
||
</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="reviewEmail"
|
||
>E-Mail deiner Buchung*</label
|
||
>
|
||
<input
|
||
id="reviewEmail"
|
||
name="email"
|
||
type="email"
|
||
autocomplete="email"
|
||
maxlength="254"
|
||
placeholder="z. B. thomas@example.de"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="reviewTitle"
|
||
>Titel (10–50 Zeichen)*</label
|
||
>
|
||
<input
|
||
id="reviewTitle"
|
||
name="title"
|
||
type="text"
|
||
minlength="10"
|
||
maxlength="50"
|
||
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 (10–500 Zeichen)*</label
|
||
>
|
||
<textarea
|
||
id="review"
|
||
name="review"
|
||
minlength="10"
|
||
maxlength="500"
|
||
placeholder="Was hat dir an der Ernährungsberatung geholfen?"
|
||
required
|
||
></textarea>
|
||
</div>
|
||
|
||
<label class="consent">
|
||
<input type="checkbox" name="consent" required />
|
||
<span>
|
||
Ich akzeptiere die
|
||
<a
|
||
href="https://www.tri-hub.de/datenschutz"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Datenschutzbestimmungen</a
|
||
>*: Meine E-Mail-Adresse wird zum Abgleich mit
|
||
meiner Buchung und zusammen mit meiner Bewertung
|
||
gespeichert. Titel, Bewertungstext und Sterne
|
||
dürfen veröffentlicht werden; meine
|
||
E-Mail-Adresse bleibt nicht öffentlich.
|
||
</span>
|
||
</label>
|
||
|
||
<small>*Pflichtfelder</small>
|
||
|
||
<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>
|
||
|
||
<!-- Kontaktaufnahme -->
|
||
<section class="section" id="kontakt">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<div>
|
||
<div class="eyebrow">KONTAKT AUFNEHMEN</div>
|
||
<h2
|
||
style="
|
||
font-family: "Inter", sans-serif;
|
||
"
|
||
>
|
||
Schreib uns.
|
||
</h2>
|
||
</div>
|
||
|
||
<p class="section-intro">
|
||
Du hast Fragen oder möchtest einen Termin
|
||
vereinbaren? Schreib uns einfach. Wir melden uns
|
||
schnellstmöglich bei dir.
|
||
</p>
|
||
</div>
|
||
|
||
<form class="review-form" id="contactForm">
|
||
<div class="field" style="margin-top: 0">
|
||
<label for="contactName">Dein Name*</label>
|
||
<input
|
||
id="contactName"
|
||
name="name"
|
||
type="text"
|
||
autocomplete="name"
|
||
placeholder="z. B. Thomas Müller"
|
||
maxlength="120"
|
||
required
|
||
/>
|
||
<small
|
||
class="field-error"
|
||
data-error-for="name"
|
||
></small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="contactEmail"
|
||
>Deine E-Mail-Adresse*</label
|
||
>
|
||
<input
|
||
id="contactEmail"
|
||
name="email"
|
||
type="email"
|
||
autocomplete="email"
|
||
placeholder="z. B. thomas@example.de"
|
||
maxlength="254"
|
||
required
|
||
/>
|
||
<small
|
||
class="field-error"
|
||
data-error-for="email"
|
||
></small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="contactSubject">Betreff*</label>
|
||
<input
|
||
id="contactSubject"
|
||
name="subject"
|
||
type="text"
|
||
placeholder="Worum geht es?"
|
||
maxlength="160"
|
||
required
|
||
/>
|
||
<small
|
||
class="field-error"
|
||
data-error-for="subject"
|
||
></small>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="message">Deine Nachricht*</label>
|
||
<textarea
|
||
id="message"
|
||
name="message"
|
||
placeholder="Wie können wir dir helfen?"
|
||
minlength="10"
|
||
maxlength="5000"
|
||
required
|
||
></textarea>
|
||
|
||
<small id="contactMessageHint"
|
||
>Mindestens 10 Zeichen erforderlich.</small
|
||
>
|
||
<small
|
||
class="field-error"
|
||
data-error-for="message"
|
||
></small>
|
||
<br />
|
||
<small>*Pflichtfelder</small>
|
||
</div>
|
||
|
||
<label class="consent"
|
||
><input
|
||
type="checkbox"
|
||
name="consent"
|
||
required
|
||
/><span
|
||
>Ich akzeptiere die
|
||
<a
|
||
href="https://www.tri-hub.de/datenschutz"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Datenschutzbestimmungen</a
|
||
>
|
||
(Pflichtfeld).</span
|
||
></label
|
||
>
|
||
<p data-error-for="consent" role="alert"></p>
|
||
|
||
<button class="button button-primary" type="submit">
|
||
Nachricht senden
|
||
</button>
|
||
|
||
<div
|
||
class="form-status"
|
||
id="contactFormStatus"
|
||
role="status"
|
||
aria-live="polite"
|
||
></div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="footer-placeholder"></div>
|
||
|
||
<script
|
||
type="module"
|
||
src="/src/components/navigationsbar/navigation.js"
|
||
></script>
|
||
<script type="module" src="/src/components/footer/footer.js"></script>
|
||
<script
|
||
type="module"
|
||
src="/src/features/contact/contact-form.js"
|
||
></script>
|
||
<script
|
||
type="module"
|
||
src="/src/features/reviews/review-slider.js"
|
||
></script>
|
||
<script
|
||
type="module"
|
||
src="/src/features/reviews/review-form.js"
|
||
></script>
|
||
</body>
|
||
</html>
|