Leistungsdauer und Preise der Angebote ergänzt #8
|
|
@ -0,0 +1,133 @@
|
|||
/* Zuletzt laden: responsive Regeln und Dialoganimationen der vollständigen Vorlage. */
|
||||
/* 9. Tablet und Smartphone */
|
||||
@media (min-width: 1500px) {
|
||||
.hero { gap: 72px; padding-block: 80px; }
|
||||
.hero-visual { height: 600px; }
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.header-cta { display: none; }
|
||||
.hero { gap: 36px; }
|
||||
.hero-visual { height: 530px; }
|
||||
.hero-copy > .eyebrow { font-size: .625rem; letter-spacing: .12em; }
|
||||
.shell { width: calc(100% - 80px); }
|
||||
.header-inner { width: calc(100% - 64px); }
|
||||
.section-heading { gap: 32px; }
|
||||
.section-heading > p { max-width: 300px; }
|
||||
.package { padding: 12px; border-radius: 1.6rem; }
|
||||
.package-body { padding-inline: 8px; }
|
||||
.coaching-banner { flex-wrap: wrap; }
|
||||
.steps { gap: 24px; }
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.shell { width: calc(100% - 48px); }
|
||||
.header-inner nav { display: none; }
|
||||
.header-inner { min-height: 88px; padding-block: 12px; }
|
||||
.menu-toggle { display: block; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 4%); color: #fff; font-size: 1.4rem; }
|
||||
#mobile-nav { display: grid; gap: 4px; padding: 6px 24px 20px; border-top: 1px solid var(--line); }
|
||||
#mobile-nav a { padding: 10px 14px; border-radius: .75rem; color: var(--muted); }
|
||||
#mobile-nav a:hover { background: rgb(255 255 255 / 5%); color: #fff; }
|
||||
.hero { gap: 28px; padding-block: 48px; }
|
||||
h1 { font-size: clamp(2.5rem, 4.9vw, 3rem); }
|
||||
.hero-copy > .eyebrow { padding: 6px 10px; font-size: .625rem; letter-spacing: .08em; }
|
||||
.hero-intro { font-size: 1rem; }
|
||||
.hero-visual { height: 520px; }
|
||||
.hero-visual figcaption { inset-inline: 22px; bottom: 22px; padding: 18px; }
|
||||
.hero-visual figcaption p { font-size: 1.0625rem; }
|
||||
.hero-visual figcaption span { font-size: .625rem; }
|
||||
.values-strip .shell { gap: 24px; }
|
||||
.section-heading { display: block; }
|
||||
.section-heading > p { max-width: 560px; margin-top: 24px; }
|
||||
.benefit-grid { gap: 24px; }
|
||||
.benefit-grid h3 { font-size: 1.125rem; }
|
||||
.package-grid { gap: 16px; }
|
||||
.package-body { padding-inline: 4px; }
|
||||
.package-body h3 { font-size: 1.375rem; }
|
||||
.package-body > p:not(.eyebrow), .package-body ul { font-size: .9375rem; }
|
||||
.package .button { padding-inline: 12px; font-size: .875rem; }
|
||||
.package-badge { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 8px; font-size: .5625rem; }
|
||||
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
html { scroll-padding-top: 100px; }
|
||||
.shell { width: calc(100% - 40px); }
|
||||
.header-inner { width: calc(100% - 32px); gap: 14px; min-height: 82px; }
|
||||
.brand { gap: 12px; min-width: 0; }
|
||||
.brand-mark { width: 64px; height: 58px; padding: 7px 10px; border-radius: 1rem; }
|
||||
.brand-logo img { width: 42px; height: 42px; }
|
||||
.brand-copy { min-width: 0; }
|
||||
.brand-name { font-size: .75rem; }
|
||||
.brand-sub { max-width: 230px; font-size: .75rem; }
|
||||
.menu-toggle { flex-shrink: 0; }
|
||||
.hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; }
|
||||
.hero-copy > .eyebrow { font-size: .625rem; letter-spacing: .1em; }
|
||||
h1 { margin-block: 24px; font-size: clamp(2.4rem, 8.7vw, 3.8rem); }
|
||||
.hero-intro { max-width: 560px; font-size: 1.0625rem; }
|
||||
.hero-actions { gap: 20px; margin-top: 28px; }
|
||||
.hero-note { margin-top: 22px; font-size: .8125rem; }
|
||||
.hero-visual { height: 410px; border-radius: 1.75rem; }
|
||||
.hero-visual > img { object-position: center 40%; }
|
||||
.hero-visual figcaption { padding: 18px 20px; }
|
||||
.hero-visual figcaption p { font-size: 1.125rem; }
|
||||
.hero-visual figcaption span { font-size: .6875rem; }
|
||||
.image-tag { top: 24px; right: 24px; }
|
||||
.values-strip .shell { justify-content: space-between; gap: 12px; padding-block: 18px; font-size: .75rem; }
|
||||
.values-strip i { display: none; }
|
||||
.values-strip span { max-width: 105px; text-align: center; }
|
||||
.section { padding-block: 64px; }
|
||||
.section-heading { margin-bottom: 32px; }
|
||||
.section-heading h2 { font-size: clamp(1.75rem, 6.4vw, 2.5rem); }
|
||||
.section-heading > p { margin-top: 22px; }
|
||||
.benefit-grid { grid-template-columns: 1fr; gap: 30px; }
|
||||
.benefit-grid article { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding-top: 24px; }
|
||||
.benefit-icon { grid-row: span 2; margin: 0; }
|
||||
.benefit-grid h3 { margin-bottom: 12px; font-size: 1.125rem; }
|
||||
.benefit-grid p { max-width: none; }
|
||||
.package-grid { grid-template-columns: 1fr; gap: 26px; }
|
||||
.package { padding: 16px; border-radius: 1.75rem; }
|
||||
.package-image img { aspect-ratio: 1.75; }
|
||||
.package-body { padding: 24px 8px 8px; }
|
||||
.package-body h3 { font-size: 1.875rem; }
|
||||
.package-body > p:not(.eyebrow) { font-size: 1rem; }
|
||||
.package-body ul { font-size: .9375rem; }
|
||||
.package .button { font-size: 1rem; }
|
||||
.package-badge { left: 12px; bottom: 12px; padding: 6px 12px; font-size: .6875rem; }
|
||||
.coaching-banner { align-items: flex-start; gap: 18px; padding: 24px; }
|
||||
.coaching-banner > div:nth-child(2) { flex: 1; min-width: 170px; }
|
||||
.coaching-banner .text-link { margin-left: 0; }
|
||||
.bonus-symbol { width: 42px; height: 42px; font-size: 1.25rem; }
|
||||
.steps { gap: 28px 24px; }
|
||||
.step-number { font-size: 1.75rem; }
|
||||
.process-end { display: block; margin-top: 36px; }
|
||||
.process-end .text-link { margin-top: 16px; }
|
||||
.footer-main { flex-wrap: wrap; gap: 18px; }
|
||||
.footer-main > a:last-child { margin-left: 0; }
|
||||
.footer-note { display: grid; gap: 8px; }
|
||||
dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); border-radius: 1.5rem; }
|
||||
.dialog-inner { padding: 32px 24px; }
|
||||
.dialog-inner h2 { font-size: 1.75rem; }
|
||||
.discount-box { padding: 20px; }
|
||||
}
|
||||
@media (max-width: 390px) {
|
||||
.brand-sub { max-width: 150px; font-size: .6875rem; }
|
||||
.hero-copy > .eyebrow { letter-spacing: .03em; }
|
||||
.hero-actions .button { width: 100%; }
|
||||
.hero-visual { height: 370px; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
.dialog-inner { padding: 32px 20px; }
|
||||
.discount-box { padding: 16px; }
|
||||
}
|
||||
|
||||
/* 10. Bestehende Animationen und reduzierte Bewegung */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
#package-dialog[open] { animation: detail-enter 300ms var(--ease); }
|
||||
#package-dialog[open]::backdrop { animation: backdrop-enter 250ms ease-out; }
|
||||
@keyframes detail-enter {
|
||||
from { opacity: 0; transform: translateY(12px) scale(.985); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||||
}
|
||||
|
|
@ -46,45 +46,9 @@
|
|||
.coaching-banner p { color: var(--muted); font-size: .9375rem; }
|
||||
.coaching-banner .text-link { margin-left: auto; flex-shrink: 0; font-size: .875rem; }
|
||||
|
||||
/* 8. Produktdetails – weiterhin zentriert und innerhalb des Fensters scrollbar */
|
||||
dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
width: min(720px, calc(100% - 32px));
|
||||
max-height: 90dvh;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
border: 1px solid rgb(255 255 255 / 16%);
|
||||
border-radius: 1.75rem;
|
||||
background: linear-gradient(#ffffff07, #ffffff00), var(--surface-elevated);
|
||||
color: var(--text);
|
||||
box-shadow: 0 30px 100px rgb(0 0 0 / 55%);
|
||||
scrollbar-color: #46545c transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
dialog::backdrop { background: rgb(2 8 12 / 78%); backdrop-filter: blur(7px); }
|
||||
.dialog-inner { position: relative; padding: 42px; }
|
||||
.close-dialog { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgb(255 255 255 / 4%); color: var(--muted); font-size: 1.75rem; line-height: 1; }
|
||||
.close-dialog:hover { background: rgb(255 255 255 / 10%); color: #fff; }
|
||||
.dialog-inner > .eyebrow { padding-right: 24px; }
|
||||
.dialog-inner h2 { margin: 16px 18px 22px 0; font-size: 2rem; line-height: 1.2; }
|
||||
.dialog-inner > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; }
|
||||
.dialog-inner h3 { margin: 28px 0 14px; font-size: 1.125rem; }
|
||||
#dialog-features { padding-left: 20px; color: rgb(255 255 255 / 82%); font-size: 1rem; }
|
||||
#dialog-features li { padding-block: 5px; }
|
||||
#dialog-features li::marker { color: var(--quiet); }
|
||||
.detail-note, .discount-help { color: var(--quiet); font-size: .8125rem; line-height: 1.7; }
|
||||
.detail-note { margin-top: 12px; }
|
||||
.discount-box { margin-block: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); }
|
||||
.discount-box h3 { margin: 10px 0 22px; }
|
||||
.discount-box label { display: block; margin-bottom: 10px; color: rgb(255 255 255 / 82%); font-size: .9375rem; }
|
||||
.discount-box select { width: 100%; min-height: 50px; padding: 12px; border: 1px solid rgb(255 255 255 / 20%); border-radius: .75rem; background: var(--background); color: #fff; font-size: .9375rem; }
|
||||
#discount-result { padding-block: 20px; color: rgb(255 255 255 / 88%); font-size: 1.0625rem; }
|
||||
#discount-result strong { color: color-mix(in srgb, var(--accent-strong) 70%, white); font-size: 1.5rem; font-weight: 600; }
|
||||
.discount-box a { display: inline-block; margin-top: 16px; color: rgb(255 255 255 / 84%); font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
|
||||
.discount-box a:hover { color: #fff; }
|
||||
.dialog-done { width: 100%; }
|
||||
body:has(dialog[open]) { overflow: hidden; }
|
||||
|
||||
/* Laufzeit und Beispielpreis direkt an der Paketkarte. */
|
||||
.package-summary { display: grid; gap: 6px; margin-bottom: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
|
||||
.package-summary strong { color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
|
||||
.package-summary span { color: var(--muted); font-size: .9375rem; }
|
||||
.package-summary small { color: var(--quiet); font-size: .75rem; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: 1.08fr 1fr;
|
||||
gap: 56px;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
padding-block: 64px 72px;
|
||||
}
|
||||
.hero::before {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,299 @@
|
|||
/* US02-03: Detailseiten, auf Basis der bestehenden TriHub-Markenstile. */
|
||||
.detail-top {
|
||||
padding: 32px 0 72px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background:
|
||||
linear-gradient(rgb(4 14 20 / 85%), rgb(4 14 20 / 96%)),
|
||||
url("../../assets/images/hero/trihub-ribbon.webp") center / cover;
|
||||
}
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-bottom: 44px;
|
||||
color: var(--quiet);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.breadcrumb a {
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.breadcrumb a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.detail-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1.12fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
.detail-hero h1 {
|
||||
margin: 18px 0;
|
||||
font-size: clamp(3rem, 5.5vw, 5rem);
|
||||
}
|
||||
.detail-subtitle {
|
||||
margin-bottom: 22px;
|
||||
font-size: clamp(1.5rem, 2.3vw, 2rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
.detail-intro {
|
||||
color: var(--muted);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.proposal-note {
|
||||
margin-top: 20px;
|
||||
color: var(--quiet);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.detail-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.detail-facts > div {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.detail-facts span {
|
||||
color: var(--quiet);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.detail-facts strong {
|
||||
color: #fff;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: clamp(1.25rem, 2vw, 1.65rem);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.detail-facts small {
|
||||
color: var(--muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.detail-hero .hero-visual {
|
||||
height: 630px;
|
||||
}
|
||||
.detail-section {
|
||||
padding-block: 88px;
|
||||
}
|
||||
#leistungen,
|
||||
.detail-price-section {
|
||||
background: var(--surface-elevated);
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
.detail-benefits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.detail-benefits article {
|
||||
padding: 28px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
.detail-number {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
color: var(--quiet);
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.detail-benefits h3 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.detail-benefits p,
|
||||
.detail-benefits li {
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.detail-benefits ul {
|
||||
margin: 18px 0 0;
|
||||
padding-left: 20px;
|
||||
list-style: disc;
|
||||
}
|
||||
.detail-benefits li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.detail-timeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.detail-timeline li {
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.detail-timeline h3 {
|
||||
margin-block: 16px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.detail-timeline p {
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.detail-footnote {
|
||||
margin-top: 40px;
|
||||
padding: 28px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.5rem;
|
||||
background: #ffffff05;
|
||||
}
|
||||
.detail-footnote h3 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.detail-footnote p {
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.detail-price-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
gap: 72px;
|
||||
}
|
||||
.detail-price-layout h2 {
|
||||
margin-block: 18px 28px;
|
||||
font-size: clamp(2rem, 3.1vw, 3rem);
|
||||
}
|
||||
.detail-price-layout > div > p:not(.eyebrow) {
|
||||
color: var(--muted);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.price-panel {
|
||||
padding: 36px;
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
border-radius: 2rem;
|
||||
background: var(--panel);
|
||||
}
|
||||
.price-panel .price-caption {
|
||||
margin-block: 18px 8px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.price-panel .detail-price {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
color: #fff !important;
|
||||
font-size: clamp(2.5rem, 4vw, 3.5rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.price-panel label {
|
||||
display: block;
|
||||
margin: 28px 0 10px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.price-panel select {
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ffffff33;
|
||||
border-radius: 0.75rem;
|
||||
color: #fff;
|
||||
background: var(--background);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.price-panel .discount-summary {
|
||||
margin: 20px 0;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.price-panel .proposal-note {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.detail-alternatives {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.detail-page .process-end {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.detail-page .process-end h2 {
|
||||
margin-block: 16px;
|
||||
font-size: clamp(1.7rem, 2.7vw, 2.5rem);
|
||||
}
|
||||
.detail-page .process-end p:not(.eyebrow) {
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.detail-hero {
|
||||
gap: 30px;
|
||||
}
|
||||
.detail-price-layout {
|
||||
gap: 32px;
|
||||
}
|
||||
.detail-benefits {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.detail-hero .hero-visual {
|
||||
height: 580px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.detail-top {
|
||||
padding-block: 24px 48px;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.detail-hero,
|
||||
.detail-price-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
.detail-hero h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.detail-hero .hero-visual {
|
||||
height: 410px;
|
||||
}
|
||||
.detail-section {
|
||||
padding-block: 56px;
|
||||
}
|
||||
.detail-benefits,
|
||||
.detail-timeline {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.detail-benefits article,
|
||||
.detail-footnote {
|
||||
padding: 24px;
|
||||
}
|
||||
.price-panel {
|
||||
padding: 26px;
|
||||
}
|
||||
.detail-page .process-end .button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.detail-facts > div {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 360px) {
|
||||
.detail-facts {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.detail-alternatives .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Premium · Ernährungsberatung | TriHub</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Du bereitest dich auf ein sportliches Ziel vor und wünschst dir enge Begleitung? Zwölf Wochen lang verbinden wir deine Alltagsernährung mit einer im Training erprobten Verpflegungsstrategie."
|
||||
/>
|
||||
<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>
|
||||
<link rel="stylesheet" href="css/sections/paketdetails.css" />
|
||||
</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
|
||||
></a
|
||||
>
|
||||
<nav aria-label="Hauptnavigation">
|
||||
<a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
|
||||
><a href="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
|
||||
</nav>
|
||||
<a
|
||||
class="button small header-cta"
|
||||
href="ernaehrungsberatung.html#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="ernaehrungsberatung.html#angebote">Angebote entdecken</a
|
||||
><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
|
||||
><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="inhalt" class="detail-page">
|
||||
<section class="detail-top">
|
||||
<div class="shell">
|
||||
<nav class="breadcrumb" aria-label="Brotkrumennavigation">
|
||||
<a href="ernaehrungsberatung.html#angebote"
|
||||
>Alle Ernährungsangebote</a
|
||||
><span aria-hidden="true">/</span
|
||||
><span aria-current="page">Premium</span>
|
||||
</nav>
|
||||
<div class="detail-hero">
|
||||
<div class="hero-copy">
|
||||
<h1>Premium</h1>
|
||||
<h2 class="detail-subtitle">Dein Ziel. Ganz persönlich.</h2>
|
||||
<p class="detail-intro">
|
||||
Du bereitest dich auf ein sportliches Ziel vor und wünschst dir
|
||||
enge Begleitung? Zwölf Wochen lang verbinden wir deine
|
||||
Alltagsernährung mit einer im Training erprobten
|
||||
Verpflegungsstrategie.
|
||||
</p>
|
||||
<p class="proposal-note">
|
||||
Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und
|
||||
Leistungen sind beispielhaft und noch nicht von TriHub
|
||||
bestätigt.
|
||||
</p>
|
||||
<div class="detail-facts" aria-label="Paket auf einen Blick">
|
||||
<div>
|
||||
<span>Gesamtpreis · Vorschlag</span><strong>649,00 €</strong
|
||||
><small>einmalig für das gesamte Paket</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Laufzeit</span><strong>12 Wochen</strong
|
||||
><small>ab vereinbartem Starttermin</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Persönliche Beratung</span><strong>7 Termine</strong
|
||||
><small>insgesamt 240 Minuten</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Selbstlernkurse</span><strong>3 Kurse</strong
|
||||
><small>je 45 Minuten, online</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button" href="#leistungen">Leistungen entdecken</a
|
||||
><a class="text-link" href="#coaching-vorteil"
|
||||
>Dein Coaching-Rabatt</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="hero-visual">
|
||||
<img
|
||||
src="assets/images/angebote/premium.webp"
|
||||
width="1200"
|
||||
height="800"
|
||||
alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>
|
||||
<span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
|
||||
<p>Dein Ziel. Ganz persönlich.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="leistungen" class="detail-section">
|
||||
<div class="shell">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DAS STECKT IN PREMIUM</p>
|
||||
<h2>Deine Begleitung.<br />Ganz konkret.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-benefits">
|
||||
<article>
|
||||
<span class="detail-number">01</span>
|
||||
<h3>7 persönliche Beratungen</h3>
|
||||
<p>
|
||||
Ein Erstgespräch à 60 Minuten und sechs Folgegespräche à 30
|
||||
Minuten in Woche 3, 5, 7, 9, 11 und 12, jeweils als
|
||||
Video-Beratung.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">02</span>
|
||||
<h3>Ernährungsrahmen plus Wettkampfstrategie</h3>
|
||||
<p>
|
||||
Analyse eines 7-Tage-Ernährungsprotokolls, individueller
|
||||
7-Tage-Rahmen und eine persönliche Verpflegungsstrategie für
|
||||
einen Zielwettkampf: davor, währenddessen und danach.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">03</span>
|
||||
<h3>3 Selbstlernkurse</h3>
|
||||
<p>
|
||||
Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der
|
||||
Paketlaufzeit.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Grundlagen: Essen und Trinken rund ums Training</li>
|
||||
<li>Mahlzeiten planen und Regeneration unterstützen</li>
|
||||
<li>Wettkampfverpflegung vorbereiten und im Training testen</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">04</span>
|
||||
<h3>Feedback und Anpassungen</h3>
|
||||
<p>
|
||||
Bis zu fünf Anpassungen von Ernährungsrahmen und
|
||||
Verpflegungsstrategie, abgestimmt auf die Erfahrungen aus deinem
|
||||
Training.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">05</span>
|
||||
<h3>Antworten zwischen Terminen</h3>
|
||||
<p>
|
||||
Bis zu zwei gebündelte E-Mail-Rückfragerunden pro Woche während
|
||||
der zwölf Wochen; Rückmeldung innerhalb eines Werktags.
|
||||
Werktage: Montag bis Freitag, ausgenommen Feiertage.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">06</span>
|
||||
<h3>Was du für dich mitnimmst</h3>
|
||||
<p>
|
||||
Du hast deine Ernährung über mehrere Trainingsphasen erprobt und
|
||||
gehst mit einer getesteten Verpflegungsstrategie in deinen
|
||||
Zielwettkampf.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="zeitplan" class="shell detail-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ZEIT GUT GEPLANT</p>
|
||||
<h2>12 Wochen.<br />Ein klarer Ablauf.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="detail-timeline">
|
||||
<li>
|
||||
<span class="eyebrow">Woche 1–2</span>
|
||||
<h3>Die Grundlage schaffen</h3>
|
||||
<p>
|
||||
60 Minuten Erstgespräch, sieben Tage Protokoll und Planung deiner
|
||||
Ernährung und Verpflegung.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 3–11</span>
|
||||
<h3>Im Training erproben</h3>
|
||||
<p>
|
||||
Fünf Beratungen à 30 Minuten, drei Selbstlernkurse und bis zu fünf
|
||||
Plananpassungen.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 12</span>
|
||||
<h3>Deinen Weg absichern</h3>
|
||||
<p>
|
||||
30 Minuten Abschlussgespräch: Erfahrungen auswerten und deine
|
||||
Strategie für das Ziel festhalten.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="detail-footnote">
|
||||
<h3>So ist der Rahmen gedacht</h3>
|
||||
<p>
|
||||
Der Starttermin und die einzelnen Gespräche werden gemeinsam
|
||||
vereinbart. Die 12 Wochen beginnen mit dem Erstgespräch. Das Paket
|
||||
endet anschließend ohne automatische Verlängerung. Zusatztermine
|
||||
sind im Beispielpreis nicht enthalten und würden separat vereinbart.
|
||||
Alle Konditionen sind Vorschläge zur Abstimmung.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
id="coaching-vorteil"
|
||||
class="detail-section detail-price-section"
|
||||
>
|
||||
<div class="shell detail-price-layout">
|
||||
<div>
|
||||
<p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
|
||||
<h2>Deine Begleitung.<br />Dein Preis im Blick.</h2>
|
||||
<p>
|
||||
Der Beispielpreis gilt für alle oben genannten Leistungen über 12
|
||||
Wochen. Die Rabattstufe richtet sich nach deinem bestehenden
|
||||
Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot
|
||||
du wählst.
|
||||
</p>
|
||||
<p>
|
||||
Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
|
||||
10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
|
||||
</p>
|
||||
<a class="text-link" href="https://tri-hub.de/coaching-1zu1"
|
||||
>Coaching 1zu1 kennenlernen</a
|
||||
>
|
||||
</div>
|
||||
<div class="price-panel" data-base-price="649">
|
||||
<p class="eyebrow">PREMIUM · 12 WOCHEN</p>
|
||||
<p class="price-caption">Beispiel-Gesamtpreis</p>
|
||||
<p class="detail-price" data-price-output>649,00 €</p>
|
||||
<p class="price-caption">Einmalig · kein monatliches Abo</p>
|
||||
<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 · 3 % Rabatt</option>
|
||||
<option value="5">Standard-Coaching · 5 % Rabatt</option>
|
||||
<option value="10">Premium-Coaching · 10 % Rabatt</option>
|
||||
</select>
|
||||
<p
|
||||
class="discount-summary"
|
||||
data-discount-output
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Ohne Coaching-Rabatt: 649,00 € für das gesamte Paket.
|
||||
</p>
|
||||
<noscript
|
||||
><p>
|
||||
Mit Starter-Coaching: 629,53 € · Standard-Coaching: 616,55 € ·
|
||||
Premium-Coaching: 584,10 €.
|
||||
</p></noscript
|
||||
>
|
||||
<p class="proposal-note">
|
||||
Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
|
||||
müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
|
||||
Buchung ausgelöst.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="shell detail-section">
|
||||
<div class="process-end">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ENTSCHEIDUNG</p>
|
||||
<h2>Welche Begleitung passt zu dir?</h2>
|
||||
<p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
|
||||
</div>
|
||||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-starter.html"
|
||||
>Starter ansehen</a
|
||||
><a class="button outline" href="ernaehrung-standard.html"
|
||||
>Standard ansehen</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Standard · Ernährungsberatung | TriHub</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Du möchtest Ernährung und Training aufeinander abstimmen? Über acht Wochen entwickelst du mit einem persönlichen Plan und regelmäßigem Feedback Routinen, die in deinem Alltag funktionieren."
|
||||
/>
|
||||
<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>
|
||||
<link rel="stylesheet" href="css/sections/paketdetails.css" />
|
||||
</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="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
|
||||
</nav>
|
||||
<a
|
||||
class="button small header-cta"
|
||||
href="ernaehrungsberatung.html#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="ernaehrungsberatung.html#angebote">Angebote entdecken</a
|
||||
><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
|
||||
><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="inhalt" class="detail-page">
|
||||
<section class="detail-top">
|
||||
<div class="shell">
|
||||
<nav class="breadcrumb" aria-label="Brotkrumennavigation">
|
||||
<a href="ernaehrungsberatung.html#angebote"
|
||||
>Alle Ernährungsangebote</a
|
||||
><span aria-hidden="true">/</span
|
||||
><span aria-current="page">Standard</span>
|
||||
</nav>
|
||||
<div class="detail-hero">
|
||||
<div class="hero-copy">
|
||||
<h1>Standard</h1>
|
||||
<h2 class="detail-subtitle">
|
||||
Aus guten Vorsätzen wird dein Plan.
|
||||
</h2>
|
||||
<p class="detail-intro">
|
||||
Du möchtest Ernährung und Training aufeinander abstimmen? Über
|
||||
acht Wochen entwickelst du mit einem persönlichen Plan und
|
||||
regelmäßigem Feedback Routinen, die in deinem Alltag
|
||||
funktionieren.
|
||||
</p>
|
||||
<p class="proposal-note">
|
||||
Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und
|
||||
Leistungen sind beispielhaft und noch nicht von TriHub
|
||||
bestätigt.
|
||||
</p>
|
||||
<div class="detail-facts" aria-label="Paket auf einen Blick">
|
||||
<div>
|
||||
<span>Gesamtpreis · Vorschlag</span><strong>349,00 €</strong
|
||||
><small>einmalig für das gesamte Paket</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Laufzeit</span><strong>8 Wochen</strong
|
||||
><small>ab vereinbartem Starttermin</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Persönliche Beratung</span><strong>4 Termine</strong
|
||||
><small>insgesamt 150 Minuten</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Selbstlernkurse</span><strong>2 Kurse</strong
|
||||
><small>je 45 Minuten, online</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button" href="#leistungen">Leistungen entdecken</a
|
||||
><a class="text-link" href="#coaching-vorteil"
|
||||
>Dein Coaching-Rabatt</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="hero-visual">
|
||||
<img
|
||||
src="assets/images/angebote/standard.webp"
|
||||
width="1200"
|
||||
height="800"
|
||||
alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>
|
||||
<span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
|
||||
<p>Aus guten Vorsätzen wird dein Plan.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="leistungen" class="detail-section">
|
||||
<div class="shell">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DAS STECKT IN STANDARD</p>
|
||||
<h2>Deine Begleitung.<br />Ganz konkret.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-benefits">
|
||||
<article>
|
||||
<span class="detail-number">01</span>
|
||||
<h3>4 persönliche Beratungen</h3>
|
||||
<p>
|
||||
Ein Erstgespräch à 60 Minuten und drei Folgegespräche à 30
|
||||
Minuten in Woche 3, 5 und 8, jeweils als Video-Beratung.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">02</span>
|
||||
<h3>Individueller 7-Tage-Ernährungsrahmen</h3>
|
||||
<p>
|
||||
Analyse eines 5-Tage-Ernährungsprotokolls. Dazu ein
|
||||
wiederverwendbarer 7-Tage-Rahmen mit Mahlzeitenbausteinen,
|
||||
Portionsorientierung und Einkaufshilfe für Trainings- und
|
||||
Ruhetage.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">03</span>
|
||||
<h3>2 Selbstlernkurse</h3>
|
||||
<p>
|
||||
Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der
|
||||
Paketlaufzeit.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Grundlagen: Essen und Trinken rund ums Training</li>
|
||||
<li>Mahlzeiten planen und Regeneration unterstützen</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">04</span>
|
||||
<h3>Feedback und Anpassungen</h3>
|
||||
<p>
|
||||
Zwei gezielte Anpassungen des Ernährungsrahmens nach deinem
|
||||
Feedback, plus eine gemeinsame Abschlussauswertung.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">05</span>
|
||||
<h3>Antworten zwischen Terminen</h3>
|
||||
<p>
|
||||
Eine gebündelte E-Mail-Rückfragerunde pro Woche während der acht
|
||||
Wochen; Rückmeldung innerhalb von zwei Werktagen. Werktage:
|
||||
Montag bis Freitag, ausgenommen Feiertage.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">06</span>
|
||||
<h3>Was du für dich mitnimmst</h3>
|
||||
<p>
|
||||
Du hast einen erprobten Ernährungsrahmen für Trainings- und
|
||||
Ruhetage und kannst Mahlzeiten selbstständig an deinen Alltag
|
||||
anpassen.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="zeitplan" class="shell detail-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ZEIT GUT GEPLANT</p>
|
||||
<h2>8 Wochen.<br />Ein klarer Ablauf.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="detail-timeline">
|
||||
<li>
|
||||
<span class="eyebrow">Woche 1–2</span>
|
||||
<h3>Analysieren und planen</h3>
|
||||
<p>
|
||||
60 Minuten Erstgespräch, fünf Tage Protokoll und dein
|
||||
individueller Ernährungsrahmen.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 3–5</span>
|
||||
<h3>Routinen festigen</h3>
|
||||
<p>
|
||||
Zwei Beratungen à 30 Minuten, zwei Selbstlernkurse und zwei
|
||||
gezielte Plananpassungen.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 6–8</span>
|
||||
<h3>Selbstständig weitergehen</h3>
|
||||
<p>
|
||||
Routinen im Alltag erproben und in Woche 8 gemeinsam 30 Minuten
|
||||
Bilanz ziehen.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="detail-footnote">
|
||||
<h3>So ist der Rahmen gedacht</h3>
|
||||
<p>
|
||||
Der Starttermin und die einzelnen Gespräche werden gemeinsam
|
||||
vereinbart. Die 8 Wochen beginnen mit dem Erstgespräch. Das Paket
|
||||
endet anschließend ohne automatische Verlängerung. Zusatztermine
|
||||
sind im Beispielpreis nicht enthalten und würden separat vereinbart.
|
||||
Alle Konditionen sind Vorschläge zur Abstimmung.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
id="coaching-vorteil"
|
||||
class="detail-section detail-price-section"
|
||||
>
|
||||
<div class="shell detail-price-layout">
|
||||
<div>
|
||||
<p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
|
||||
<h2>Deine Begleitung.<br />Dein Preis im Blick.</h2>
|
||||
<p>
|
||||
Der Beispielpreis gilt für alle oben genannten Leistungen über 8
|
||||
Wochen. Die Rabattstufe richtet sich nach deinem bestehenden
|
||||
Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot
|
||||
du wählst.
|
||||
</p>
|
||||
<p>
|
||||
Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
|
||||
10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
|
||||
</p>
|
||||
<a class="text-link" href="https://tri-hub.de/coaching-1zu1"
|
||||
>Coaching 1zu1 kennenlernen</a
|
||||
>
|
||||
</div>
|
||||
<div class="price-panel" data-base-price="349">
|
||||
<p class="eyebrow">STANDARD · 8 WOCHEN</p>
|
||||
<p class="price-caption">Beispiel-Gesamtpreis</p>
|
||||
<p class="detail-price" data-price-output>349,00 €</p>
|
||||
<p class="price-caption">Einmalig · kein monatliches Abo</p>
|
||||
<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 · 3 % Rabatt</option>
|
||||
<option value="5">Standard-Coaching · 5 % Rabatt</option>
|
||||
<option value="10">Premium-Coaching · 10 % Rabatt</option>
|
||||
</select>
|
||||
<p
|
||||
class="discount-summary"
|
||||
data-discount-output
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Ohne Coaching-Rabatt: 349,00 € für das gesamte Paket.
|
||||
</p>
|
||||
<noscript
|
||||
><p>
|
||||
Mit Starter-Coaching: 338,53 € · Standard-Coaching: 331,55 € ·
|
||||
Premium-Coaching: 314,10 €.
|
||||
</p></noscript
|
||||
>
|
||||
<p class="proposal-note">
|
||||
Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
|
||||
müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
|
||||
Buchung ausgelöst.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="shell detail-section">
|
||||
<div class="process-end">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ENTSCHEIDUNG</p>
|
||||
<h2>Welche Begleitung passt zu dir?</h2>
|
||||
<p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
|
||||
</div>
|
||||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-starter.html"
|
||||
>Starter ansehen</a
|
||||
><a class="button outline" href="ernaehrung-premium.html"
|
||||
>Premium ansehen</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Starter · Ernährungsberatung | TriHub</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Du möchtest deine Ernährung besser verstehen und mit klaren Empfehlungen starten? In vier Wochen schaffen wir eine Grundlage, die zu deinem Alltag und deinem Triathlon passt."
|
||||
/>
|
||||
<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>
|
||||
<link rel="stylesheet" href="css/sections/paketdetails.css" />
|
||||
</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="ernaehrungsberatung.html#inhalt">Ernährungsberatung</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a>
|
||||
</nav>
|
||||
<a
|
||||
class="button small header-cta"
|
||||
href="ernaehrungsberatung.html#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="ernaehrungsberatung.html#angebote">Angebote entdecken</a
|
||||
><a href="ernaehrungsberatung.html#vorteile">Deine Vorteile</a
|
||||
><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a
|
||||
><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="inhalt" class="detail-page">
|
||||
<section class="detail-top">
|
||||
<div class="shell">
|
||||
<nav class="breadcrumb" aria-label="Brotkrumennavigation">
|
||||
<a href="ernaehrungsberatung.html#angebote"
|
||||
>Alle Ernährungsangebote</a
|
||||
><span aria-hidden="true">/</span
|
||||
><span aria-current="page">Starter</span>
|
||||
</nav>
|
||||
<div class="detail-hero">
|
||||
<div class="hero-copy">
|
||||
<h1>Starter</h1>
|
||||
<h2 class="detail-subtitle">Dein erster guter Schritt.</h2>
|
||||
<p class="detail-intro">
|
||||
Du möchtest deine Ernährung besser verstehen und mit klaren
|
||||
Empfehlungen starten? In vier Wochen schaffen wir eine
|
||||
Grundlage, die zu deinem Alltag und deinem Triathlon passt.
|
||||
</p>
|
||||
<p class="proposal-note">
|
||||
Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und
|
||||
Leistungen sind beispielhaft und noch nicht von TriHub
|
||||
bestätigt.
|
||||
</p>
|
||||
<div class="detail-facts" aria-label="Paket auf einen Blick">
|
||||
<div>
|
||||
<span>Gesamtpreis · Vorschlag</span><strong>149,00 €</strong
|
||||
><small>einmalig für das gesamte Paket</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Laufzeit</span><strong>4 Wochen</strong
|
||||
><small>ab vereinbartem Starttermin</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Persönliche Beratung</span><strong>2 Termine</strong
|
||||
><small>insgesamt 90 Minuten</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Selbstlernkurse</span><strong>1 Kurs</strong
|
||||
><small>je 45 Minuten, online</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button" href="#leistungen">Leistungen entdecken</a
|
||||
><a class="text-link" href="#coaching-vorteil"
|
||||
>Dein Coaching-Rabatt</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="hero-visual">
|
||||
<img
|
||||
src="assets/images/angebote/starter.webp"
|
||||
width="1200"
|
||||
height="800"
|
||||
alt="Persönliche Begleitung für sportlich aktive Menschen ab 50"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>
|
||||
<span>DEIN PAKET. DEIN NÄCHSTER SCHRITT.</span>
|
||||
<p>Dein erster guter Schritt.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="leistungen" class="detail-section">
|
||||
<div class="shell">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DAS STECKT IN STARTER</p>
|
||||
<h2>Deine Begleitung.<br />Ganz konkret.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-benefits">
|
||||
<article>
|
||||
<span class="detail-number">01</span>
|
||||
<h3>2 persönliche Beratungen</h3>
|
||||
<p>
|
||||
Ein Erstgespräch à 60 Minuten und ein Abschlussgespräch à 30
|
||||
Minuten, jeweils als Video-Beratung.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">02</span>
|
||||
<h3>Persönliche Empfehlungen als PDF</h3>
|
||||
<p>
|
||||
Analyse eines 3-Tage-Ernährungsprotokolls und ein schriftlicher
|
||||
Maßnahmenplan für Mahlzeiten, Trinken und Trainingstage. Kein
|
||||
individueller Wochenplan enthalten.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">03</span>
|
||||
<h3>1 Selbstlernkurs</h3>
|
||||
<p>
|
||||
Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der
|
||||
Paketlaufzeit.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Grundlagen: Essen und Trinken rund ums Training</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">04</span>
|
||||
<h3>Feedback und Anpassungen</h3>
|
||||
<p>
|
||||
Einmalige Empfehlungen nach der Analyse; Einordnung der
|
||||
Erfahrungen im Abschlussgespräch. Keine laufende Plananpassung.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">05</span>
|
||||
<h3>Antworten zwischen Terminen</h3>
|
||||
<p>
|
||||
Eine gebündelte Rückfragerunde per E-Mail innerhalb der vier
|
||||
Wochen; Rückmeldung innerhalb von drei Werktagen. Werktage:
|
||||
Montag bis Freitag, ausgenommen Feiertage.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<span class="detail-number">06</span>
|
||||
<h3>Was du für dich mitnimmst</h3>
|
||||
<p>
|
||||
Du kennst deine wichtigsten Ansatzpunkte und gehst mit drei
|
||||
konkreten Ernährungsroutinen aus der Beratung.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="zeitplan" class="shell detail-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ZEIT GUT GEPLANT</p>
|
||||
<h2>4 Wochen.<br />Ein klarer Ablauf.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="detail-timeline">
|
||||
<li>
|
||||
<span class="eyebrow">Woche 1</span>
|
||||
<h3>Deine Ausgangslage</h3>
|
||||
<p>
|
||||
60 Minuten Erstgespräch, Ziele klären und drei Tage Ernährung
|
||||
protokollieren.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 2–3</span>
|
||||
<h3>Verstehen und ausprobieren</h3>
|
||||
<p>
|
||||
Analyse besprechen, Empfehlungen umsetzen und den Grundlagenkurs
|
||||
bearbeiten.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="eyebrow">Woche 4</span>
|
||||
<h3>Deine nächsten Schritte</h3>
|
||||
<p>
|
||||
30 Minuten Abschlussgespräch und konkrete Routinen für die Zeit
|
||||
danach.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="detail-footnote">
|
||||
<h3>So ist der Rahmen gedacht</h3>
|
||||
<p>
|
||||
Der Starttermin und die einzelnen Gespräche werden gemeinsam
|
||||
vereinbart. Die 4 Wochen beginnen mit dem Erstgespräch. Das Paket
|
||||
endet anschließend ohne automatische Verlängerung. Zusatztermine
|
||||
sind im Beispielpreis nicht enthalten und würden separat vereinbart.
|
||||
Alle Konditionen sind Vorschläge zur Abstimmung.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
id="coaching-vorteil"
|
||||
class="detail-section detail-price-section"
|
||||
>
|
||||
<div class="shell detail-price-layout">
|
||||
<div>
|
||||
<p class="eyebrow">PREIS UND COACHING-VORTEIL</p>
|
||||
<h2>Deine Begleitung.<br />Dein Preis im Blick.</h2>
|
||||
<p>
|
||||
Der Beispielpreis gilt für alle oben genannten Leistungen über 4
|
||||
Wochen. Die Rabattstufe richtet sich nach deinem bestehenden
|
||||
Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot
|
||||
du wählst.
|
||||
</p>
|
||||
<p>
|
||||
Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching:
|
||||
10 %. Der Vorteil gilt während deiner Coaching-Laufzeit.
|
||||
</p>
|
||||
<a class="text-link" href="https://tri-hub.de/coaching-1zu1"
|
||||
>Coaching 1zu1 kennenlernen</a
|
||||
>
|
||||
</div>
|
||||
<div class="price-panel" data-base-price="149">
|
||||
<p class="eyebrow">STARTER · 4 WOCHEN</p>
|
||||
<p class="price-caption">Beispiel-Gesamtpreis</p>
|
||||
<p class="detail-price" data-price-output>149,00 €</p>
|
||||
<p class="price-caption">Einmalig · kein monatliches Abo</p>
|
||||
<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 · 3 % Rabatt</option>
|
||||
<option value="5">Standard-Coaching · 5 % Rabatt</option>
|
||||
<option value="10">Premium-Coaching · 10 % Rabatt</option>
|
||||
</select>
|
||||
<p
|
||||
class="discount-summary"
|
||||
data-discount-output
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Ohne Coaching-Rabatt: 149,00 € für das gesamte Paket.
|
||||
</p>
|
||||
<noscript
|
||||
><p>
|
||||
Mit Starter-Coaching: 144,53 € · Standard-Coaching: 141,55 € ·
|
||||
Premium-Coaching: 134,10 €.
|
||||
</p></noscript
|
||||
>
|
||||
<p class="proposal-note">
|
||||
Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben
|
||||
müssen vor Veröffentlichung abgestimmt werden. Hier wird keine
|
||||
Buchung ausgelöst.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="shell detail-section">
|
||||
<div class="process-end">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ENTSCHEIDUNG</p>
|
||||
<h2>Welche Begleitung passt zu dir?</h2>
|
||||
<p>Entdecke die anderen Pakete oder gehe zurück zur Übersicht.</p>
|
||||
</div>
|
||||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-standard.html"
|
||||
>Standard ansehen</a
|
||||
><a class="button outline" href="ernaehrung-premium.html"
|
||||
>Premium ansehen</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,323 +1,340 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ernährungsberatung für Triathlon 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="#angebote">Angebote entdecken</a><a href="#ablauf">So
|
||||
<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="#angebote">Angebote entdecken</a><a href="#ablauf">So
|
||||
läuft’s ab</a><a href="#">Kontakt</a>
|
||||
</nav>
|
||||
<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>
|
||||
<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>
|
||||
<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.
|
||||
<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">
|
||||
<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>
|
||||
</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="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>
|
||||
<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>
|
||||
<section id="angebote" class="offers-section">
|
||||
<div class="shell section">
|
||||
<section id="vorteile" class="shell section benefits">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DEINE ERNÄHRUNG. DEINE BEGLEITUNG.</p>
|
||||
<h2>So viel Unterstützung,<br />wie du brauchst.</h2>
|
||||
<p class="eyebrow">WAS DU DAVON HAST</p>
|
||||
<h2>Dein Training verdient<br />die passende Ernährung.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
|
||||
der sich für dich richtig anfühlt.
|
||||
Du bringst die Motivation mit. Gemeinsam schaffen wir Orientierung
|
||||
für das Essen und Trinken rund um deinen Sport.
|
||||
</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 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 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="benefit-grid">
|
||||
<article>
|
||||
<span class="benefit-icon" aria-hidden="true">↗</span>
|
||||
<h3>Energie gezielt einplanen</h3>
|
||||
<p>
|
||||
Spare mit deinem bestehenden Coaching-Paket bei der
|
||||
Ernährungsberatung.
|
||||
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">DEINE ERNÄHRUNG. DEINE BEGLEITUNG.</p>
|
||||
<h2>So viel Unterstützung,<br />wie du brauchst.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen,
|
||||
der sich für dich richtig anfühlt.
|
||||
</p>
|
||||
</div>
|
||||
<button id="bonus-open" class="text-link">Rabatte ansehen</button>
|
||||
<div class="concept-note">
|
||||
<span aria-hidden="true">ⓘ</span> Paketvorschläge zur Teamabstimmung · Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht bestätigt.
|
||||
</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>
|
||||
<a
|
||||
class="button outline package-open"
|
||||
href="ernaehrung-starter.html"
|
||||
>Starter entdecken</a
|
||||
>
|
||||
</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>
|
||||
<a class="button package-open" href="ernaehrung-standard.html"
|
||||
>Standard entdecken</a
|
||||
>
|
||||
</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>
|
||||
<a
|
||||
class="button outline package-open"
|
||||
href="ernaehrung-premium.html"
|
||||
>Premium entdecken</a
|
||||
>
|
||||
</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>
|
||||
<p>
|
||||
Spare mit deinem bestehenden Coaching-Paket bei der
|
||||
Ernährungsberatung.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="text-link"
|
||||
href="ernaehrung-standard.html#coaching-vorteil"
|
||||
>Rabatte ansehen</a
|
||||
>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
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>
|
||||
<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>
|
||||
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>
|
||||
</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>
|
||||
|
||||
</html>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
134
js/angebote.js
134
js/angebote.js
|
|
@ -1,115 +1,25 @@
|
|||
// Vollständige Paketdetails und Rabattdialog aus TriHub Design Original.
|
||||
// US02-03: Coaching-Rabatt direkt auf der Paketdetailseite, ohne Dialog.
|
||||
"use strict";
|
||||
(() => {
|
||||
"use strict";
|
||||
const packages = {
|
||||
starter: {
|
||||
name: "Starter",
|
||||
title: "Dein erster guter Schritt.",
|
||||
description:
|
||||
"Du möchtest wissen, wo du stehst und was du konkret verändern kannst? Starter schafft eine persönliche Grundlage für deinen Einstieg.",
|
||||
features: [
|
||||
"Gemeinsames Erstgespräch zu Zielen, Training, Alltag und Vorlieben.",
|
||||
"Auswertung eines Ernährungsprotokolls mit Blick auf deine bisherigen Gewohnheiten.",
|
||||
"Persönliche Handlungsempfehlungen für Essen und Trinken im Alltag und rund um dein Training.",
|
||||
"Abschlussgespräch zur Einordnung deiner nächsten Schritte.",
|
||||
],
|
||||
},
|
||||
standard: {
|
||||
name: "Standard",
|
||||
title: "Aus guten Vorsätzen wird dein Plan.",
|
||||
description:
|
||||
"Du möchtest aus einzelnen Empfehlungen eine verlässliche Routine machen? Standard verbindet die Bestandsaufnahme mit einem individuellen Plan und persönlichem Feedback.",
|
||||
features: [
|
||||
"Alle vorgeschlagenen Leistungen aus Starter.",
|
||||
"Ein individueller Ernährungsrahmen für Trainings- und Ruhetage.",
|
||||
"Praktische Mahlzeitenideen, abgestimmt auf deine Vorlieben und deinen Alltag.",
|
||||
"Feedbackgespräche, um Erfahrungen zu besprechen und den Plan gemeinsam anzupassen.",
|
||||
],
|
||||
},
|
||||
premium: {
|
||||
name: "Premium",
|
||||
title: "Dein Ziel. Ganz persönlich.",
|
||||
description:
|
||||
"Du möchtest deine Ernährung gezielt auf sportliche Herausforderungen abstimmen? Premium sieht eine besonders enge Begleitung bis in die Wettkampfvorbereitung vor.",
|
||||
features: [
|
||||
"Alle vorgeschlagenen Leistungen aus Standard.",
|
||||
"Eine individuelle Strategie für Essen und Trinken vor, während und nach Wettkämpfen.",
|
||||
"Erprobung der Verpflegung im Training und Anpassung an deine Erfahrungen.",
|
||||
"Engmaschiger persönlicher Austausch und laufende Anpassungen an deine Trainingsphasen.",
|
||||
],
|
||||
},
|
||||
};
|
||||
const dialog = document.querySelector("#package-dialog");
|
||||
const select = document.querySelector("#coaching-select");
|
||||
let trigger;
|
||||
function updateDiscount() {
|
||||
const rate = Number(select.value);
|
||||
const result = document.querySelector("#discount-result");
|
||||
result.replaceChildren();
|
||||
if (rate) {
|
||||
const strong = document.createElement("strong");
|
||||
strong.textContent = rate + " % Rabatt";
|
||||
result.append(
|
||||
strong,
|
||||
document.createTextNode(" auf deine Ernährungsberatung."),
|
||||
);
|
||||
} else
|
||||
result.textContent =
|
||||
"Mit Coaching 1zu1: Starter 3 %, Standard 5 %, Premium 10 % Rabatt.";
|
||||
}
|
||||
function openDetails(key, button) {
|
||||
trigger = button;
|
||||
const data = packages[key];
|
||||
document.querySelector("#dialog-eyebrow").textContent = data
|
||||
? "ERNÄHRUNGSBERATUNG · " + data.name.toUpperCase()
|
||||
: "COACHING 1ZU1 · BONUSREGELUNG";
|
||||
document.querySelector("#dialog-title").textContent = data
|
||||
? data.title
|
||||
: "Dein Coaching zahlt sich aus.";
|
||||
document.querySelector("#dialog-description").textContent = data
|
||||
? data.description
|
||||
: "Dein bestehendes Coaching-Paket bringt dir einen Preisvorteil bei der Ernährungsberatung. Wähle es aus und entdecke deinen Rabatt.";
|
||||
document.querySelector("#detail-section").hidden = !data;
|
||||
const list = document.querySelector("#dialog-features");
|
||||
list.replaceChildren();
|
||||
if (data)
|
||||
data.features.forEach((text) => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = text;
|
||||
list.append(li);
|
||||
});
|
||||
updateDiscount();
|
||||
dialog.showModal();
|
||||
}
|
||||
document
|
||||
.querySelectorAll(".package-open")
|
||||
.forEach((button) =>
|
||||
button.addEventListener("click", () =>
|
||||
openDetails(button.dataset.package, button),
|
||||
),
|
||||
);
|
||||
document
|
||||
.querySelector("#bonus-open")
|
||||
.addEventListener("click", (event) =>
|
||||
openDetails(null, event.currentTarget),
|
||||
);
|
||||
select.addEventListener("change", updateDiscount);
|
||||
document
|
||||
.querySelectorAll(".close-dialog,.dialog-done")
|
||||
.forEach((button) =>
|
||||
button.addEventListener("click", () => dialog.close()),
|
||||
);
|
||||
dialog.addEventListener("click", (event) => {
|
||||
if (event.target === dialog) {
|
||||
const r = dialog.getBoundingClientRect();
|
||||
if (
|
||||
event.clientX < r.left ||
|
||||
event.clientX > r.right ||
|
||||
event.clientY < r.top ||
|
||||
event.clientY > r.bottom
|
||||
)
|
||||
dialog.close();
|
||||
}
|
||||
const panel = document.querySelector("[data-base-price]");
|
||||
if (!panel) return;
|
||||
const select = panel.querySelector("select");
|
||||
const price = panel.querySelector("[data-price-output]");
|
||||
const summary = panel.querySelector("[data-discount-output]");
|
||||
const baseCents = Math.round(Number(panel.dataset.basePrice) * 100);
|
||||
const currency = new Intl.NumberFormat("de-DE", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
});
|
||||
dialog.addEventListener("close", () => trigger?.focus());
|
||||
function updatePrice() {
|
||||
const rate = Number(select.value);
|
||||
const saving = Math.round((baseCents * rate) / 100);
|
||||
const total = baseCents - saving;
|
||||
price.textContent = currency.format(total / 100);
|
||||
summary.textContent = rate
|
||||
? `${rate} % Coaching-Rabatt: Du sparst ${currency.format(saving / 100)}. Beispiel-Gesamtpreis: ${currency.format(total / 100)}.`
|
||||
: `Ohne Coaching-Rabatt: ${currency.format(baseCents / 100)} für das gesamte Paket.`;
|
||||
}
|
||||
select.addEventListener("change", updatePrice);
|
||||
updatePrice();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -28,11 +28,13 @@
|
|||
const targets = [
|
||||
...document.querySelectorAll(
|
||||
".hero-copy > *, .hero-visual, .section-heading, .benefit-grid > article, " +
|
||||
".concept-note, .package-grid > article, .coaching-banner, .steps > li, .process-end",
|
||||
".concept-note, .package-grid > article, .coaching-banner, .steps > li, .process-end, .detail-benefits > article, .detail-timeline > li, .price-panel",
|
||||
),
|
||||
];
|
||||
document
|
||||
.querySelectorAll(".hero-copy, .benefit-grid, .package-grid, .steps")
|
||||
.querySelectorAll(
|
||||
".hero-copy, .benefit-grid, .package-grid, .steps, .detail-benefits, .detail-timeline",
|
||||
)
|
||||
.forEach((group) => {
|
||||
[...group.children].forEach((child, index) =>
|
||||
delays.set(child, Math.min(index * 80, 240)),
|
||||
|
|
|
|||
Loading…
Reference in New Issue