Compare commits
21 Commits
US01-05-+-
...
main
| Author | SHA1 | Date |
|---|---|---|
 Daniel Fromm
|
8feaabc967 | |
|
Daniel Fromm
|
8e85f2764c | |
 Kevin Alexander Kopp
|
f01d5fbd41 | |
Kevin Kopp
|
68047780f1 | |
|
Kevin Alexander Kopp
|
fcf716e6f0 | |
|
Kevin Alexander Kopp
|
48941a501e | |
|
Kevin Kopp
|
20e9c7f757 | |
|
Kevin Kopp
|
103aff951c | |
|
Daniel Fromm
|
5baadd3a5c | |
|
Daniel Fromm
|
c9553e2f52 | |
Justin Muravjev
|
52bbfd2566 | |
|
Daniel Fromm
|
44a16ba57c | |
|
Kevin Alexander Kopp
|
5baf27068c | |
Kevin Kopp
|
aae658e579 | |
|
Justin Muravjev
|
ff0e5bbcf0 | |
|
Justin Muravjev
|
8c4f469707 | |
|
Justin Muravjev
|
e9ebfb231a | |
|
Justin Muravjev
|
f000e0909d | |
|
Daniel Fromm
|
14c593ae5a | |
|
Justin Muravjev
|
230bdff303 | |
|
Daniel Fromm
|
4c7d2d9c9c |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
|
|
@ -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,125 @@
|
|||
/* 8. Trainer und Kontakt (US04-02)
|
||||
Trainerprofil: Relindis Agethen (Lilli).
|
||||
Kontakt leitet auf https://tri-hub.de/kontakt weiter. */
|
||||
|
||||
.contact { border-top: 1px solid var(--line); }
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* ---------- Trainerprofil (Platzhalter) ---------- */
|
||||
.trainer-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
|
||||
gap: 28px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 2rem;
|
||||
background: linear-gradient(#ffffff0f, #ffffff05), linear-gradient(#08151ee6, #091822fa);
|
||||
box-shadow: 0 18px 48px rgb(0 0 0 / 16%);
|
||||
}
|
||||
|
||||
.trainer-photo {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
border-radius: 1.35rem;
|
||||
background: rgb(255 255 255 / 3%);
|
||||
}
|
||||
|
||||
.trainer-photo img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 30% 20%; /* Gesicht im Ausschnitt halten */
|
||||
}
|
||||
|
||||
.trainer-body { padding: 12px 12px 12px 0; }
|
||||
|
||||
.trainer-body h3 { font-size: 1.5rem; }
|
||||
|
||||
.trainer-role { margin-top: 6px; color: var(--muted); font-size: 1rem; }
|
||||
|
||||
.trainer-facts {
|
||||
margin: 22px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.trainer-facts li {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 12px;
|
||||
padding: 11px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 1rem;
|
||||
color: rgb(255 255 255 / 86%);
|
||||
}
|
||||
|
||||
.trainer-facts span { color: var(--quiet); font-size: .875rem; }
|
||||
|
||||
.trainer-bio {
|
||||
margin-top: 20px;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Kontaktbox ---------- */
|
||||
.contact-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 36px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent-muted) 35%, transparent);
|
||||
border-radius: 2rem;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0, rgb(46 182 194 / 14%), transparent 45%),
|
||||
var(--panel);
|
||||
}
|
||||
|
||||
.contact-card h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
|
||||
|
||||
.contact-card > p:not(.eyebrow) { margin-top: 14px; color: var(--muted); font-size: 1rem; }
|
||||
|
||||
.contact-points {
|
||||
flex: 1;
|
||||
margin: 22px 0 28px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.contact-points li {
|
||||
position: relative;
|
||||
padding: 6px 0 6px 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contact-points li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.contact-button { align-self: flex-start; }
|
||||
|
||||
/* ---------- Responsiv ---------- */
|
||||
@media (max-width: 1100px) {
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.trainer-card { grid-template-columns: 1fr; gap: 18px; }
|
||||
.trainer-photo { height: 340px; min-height: 0; }
|
||||
.trainer-body { padding: 4px 8px 12px; }
|
||||
.trainer-facts li { grid-template-columns: 1fr; gap: 2px; }
|
||||
.contact-card { padding: 26px 22px; }
|
||||
.contact-button { align-self: stretch; }
|
||||
}
|
||||
|
|
@ -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,53 @@
|
|||
/* Eigene helle Vergleichs- und Druckansicht nach der TriHub-Vorlage. */
|
||||
:root { color-scheme: light; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; padding: 32px 20px; background: #f3f0e9; color: #10151d; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.65; }
|
||||
.comparison-sheet { max-width: 1160px; margin: auto; padding: 32px 40px; background: #fff; border: 1px solid #e3e7eb; border-radius: 32px; box-shadow: 0 18px 50px #10202b0a; }
|
||||
.comparison-header { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #e1e5e9; padding-bottom: 22px; margin-bottom: 28px; }
|
||||
.brand img { display: block; object-fit: contain; border-radius: 14px; }
|
||||
nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 1; flex-wrap: wrap; }
|
||||
a { color: inherit; text-underline-offset: 4px; }
|
||||
nav a { text-decoration: none; color: #46515f; }
|
||||
button { font: inherit; font-weight: 600; border: 1px solid #dce1e7; background: #fff; color: #111820; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
|
||||
button:hover { background: #f1f5f9; }
|
||||
:focus-visible { outline: 3px solid #217c86; outline-offset: 4px; }
|
||||
.skip { position: absolute; top: -100px; } .skip:focus { top: 8px; background: white; padding: 10px; }
|
||||
h1,h2 { font-family: "Sora", sans-serif; letter-spacing: -.045em; line-height: 1.2; color: #080e17; }
|
||||
h1 { font-size: clamp(2rem, 4vw, 3.15rem); margin: 18px 0 24px; max-width: 940px; }
|
||||
h2 { font-size: 1.4rem; margin: 36px 0 20px; }
|
||||
p { margin: 0 0 16px; }
|
||||
.eyebrow { color: #647081; font-size: .72rem; font-weight: 700; letter-spacing: .22em; }
|
||||
.intro { max-width: 850px; color: #4b5563; font-size: 1.08rem; }
|
||||
.concept { border-left: 3px solid #b7c9ce; padding: 12px 18px; background: #f7f9fa; color: #4b5563; font-size: .9rem; margin: 24px 0 36px; }
|
||||
.table-scroll { overflow-x: auto; border: 1px solid #dfe5ec; border-radius: 22px; }
|
||||
table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: .9rem; }
|
||||
.feature-column { width: 25%; }
|
||||
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
th,td { padding: 16px; vertical-align: top; border-bottom: 1px solid #e2e7ed; overflow-wrap: break-word; }
|
||||
thead { background: #f1f5f9; } thead th { font-weight: 700; }
|
||||
thead span { display: block; font-size: .78rem; font-weight: 400; color: #596574; margin-top: 4px; }
|
||||
tbody th { font-weight: 600; } td { color: #46515f; }
|
||||
.group th { background: #f8fafb; color: #52606e; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; }
|
||||
tfoot th,tfoot td { border-bottom: 0; } tfoot a { font-weight: 600; color: #235b65; }
|
||||
.notes { margin-top: 20px; font-size: .83rem; color: #5c6673; }
|
||||
.framework { margin-top: 32px; border-top: 1px solid #e1e5e9; color: #4b5563; }
|
||||
.bottom-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0; font-weight: 600; }
|
||||
footer { padding-top: 20px; border-top: 1px solid #e1e5e9; font-size: .8rem; color: #667181; }
|
||||
.scroll-hint { display: none; font-size: .85rem; color: #5c6673; }
|
||||
@media (max-width: 800px) { body { padding: 12px; } .comparison-sheet { padding: 22px 18px; border-radius: 22px; } .comparison-header { align-items: flex-start; gap: 16px; } nav { gap: 12px; font-size: .85rem; } .brand img { width: 56px; height: 56px; } .scroll-hint { display: block; } }
|
||||
@page { size: A4 landscape; margin: 12mm; }
|
||||
@media print {
|
||||
body { padding: 0; background: #fff; font-size: 10pt; color: #000; }
|
||||
.comparison-sheet { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
|
||||
nav,.skip,.bottom-actions,.scroll-hint,tfoot { display: none !important; }
|
||||
.comparison-header { margin-bottom: 12px; padding-bottom: 10px; }
|
||||
.brand img { width: 50px; height: 50px; }
|
||||
h1 { font-size: 23pt; margin: 8px 0 14px; } h2 { font-size: 14pt; margin: 20px 0 12px; }
|
||||
.intro { font-size: 10pt; } .concept { font-size: 9pt; margin: 12px 0; padding: 8px 12px; }
|
||||
.table-scroll { overflow: visible; border-radius: 0; border: 0; }
|
||||
table { min-width: 0; font-size: 9pt; }
|
||||
th,td { padding: 8px 10px; border: 1px solid #cbd2da; color: #000; }
|
||||
thead { display: table-header-group; } tr { break-inside: avoid; } .group { break-after: avoid; }
|
||||
h2 { break-after: avoid; } .notes,.framework { font-size: 9pt; }
|
||||
footer { font-size: 8pt; } a { text-decoration: none; }
|
||||
}
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<!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="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
|
||||
entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
|
||||
href="ernaehrungsberatung.html#kontakt">Kontakt</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>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</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,291 @@
|
|||
<!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="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
|
||||
entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
|
||||
href="ernaehrungsberatung.html#kontakt">Kontakt</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>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</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,285 @@
|
|||
<!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="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
|
||||
entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
|
||||
href="ernaehrungsberatung.html#kontakt">Kontakt</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>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</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>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ernährungsberatung im Vergleich | TriHub</title>
|
||||
<meta name="description" content="Starter, Standard und Premium: Preise, Laufzeiten und Leistungen der Ernährungsberatung im direkten Vergleich.">
|
||||
<link rel="icon" href="assets/images/icons/trihub-logo.jpg" type="image/jpeg">
|
||||
<link rel="stylesheet" href="css/assets.css">
|
||||
<link rel="stylesheet" href="css/sections/vergleich.css">
|
||||
<script src="js/vergleich.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip" href="#inhalt">Zum Vergleich</a>
|
||||
<div class="comparison-sheet">
|
||||
<header class="comparison-header">
|
||||
<a href="ernaehrungsberatung.html" class="brand" aria-label="Zur Ernährungsberatung"><img src="assets/images/icons/trihub-logo.jpg" width="72" height="72" alt="Trihub – fit und vital ab 50!"></a>
|
||||
<nav aria-label="Vergleichsnavigation"><a href="ernaehrungsberatung.html#angebote">← Zur Angebotsübersicht</a><button type="button" id="print-comparison" hidden>Ansicht drucken / als PDF speichern</button></nav>
|
||||
</header>
|
||||
<main id="inhalt">
|
||||
<p class="eyebrow">TRI-HUB · ERNÄHRUNGSBERATUNG</p>
|
||||
<h1>Drei Pakete.<br>Deine Begleitung im Vergleich.</h1>
|
||||
<p class="intro">Wie viel Unterstützung passt zu dir? Vergleiche Starter, Standard und Premium – von der ersten Beratung bis zur persönlichen Wettkampfstrategie. Alle Preise gelten für das gesamte Paket.</p>
|
||||
<p class="concept"><strong>Paketvorschläge zur Teamabstimmung.</strong> Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht von TriHub bestätigt. Diese Übersicht ist kein Vertrag und löst keine Buchung aus.</p>
|
||||
<section aria-labelledby="comparison-title">
|
||||
<h2 id="comparison-title">Preise und Leistungen auf einen Blick</h2>
|
||||
<p class="scroll-hint" id="scroll-help">Auf kleinen Bildschirmen kannst du die Tabelle seitlich verschieben.</p>
|
||||
<div class="table-scroll" tabindex="0" role="region" aria-label="Paketvergleich, horizontal scrollbar" aria-describedby="scroll-help">
|
||||
<table>
|
||||
<caption>Ernährungsberatung: Starter, Standard und Premium</caption>
|
||||
<colgroup><col class="feature-column"><col><col><col></colgroup>
|
||||
<thead><tr><th scope="col">Leistung</th><th scope="col">Starter<span>Ein klarer Einstieg</span></th><th scope="col">Standard<span>Dein individueller Plan</span></th><th scope="col">Premium<span>Enge persönliche Begleitung</span></th></tr></thead>
|
||||
<tbody><tr class="group"><th colspan="4" scope="colgroup">Preis und Laufzeit</th></tr>
|
||||
<tr><th scope="row">Gesamtpreis (Beispiel)</th><td>149,00 €</td><td>349,00 €</td><td>649,00 €</td></tr>
|
||||
<tr><th scope="row">Laufzeit</th><td>4 Wochen</td><td>8 Wochen</td><td>12 Wochen</td></tr>
|
||||
<tr><th scope="row">Abrechnung</th><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Persönliche Begleitung</th></tr>
|
||||
<tr><th scope="row">Video-Beratungen</th><td>2 Termine · insgesamt 90 Min.</td><td>4 Termine · insgesamt 150 Min.</td><td>7 Termine · insgesamt 240 Min.</td></tr>
|
||||
<tr><th scope="row">Erstgespräch</th><td>60 Minuten</td><td>60 Minuten</td><td>60 Minuten</td></tr>
|
||||
<tr><th scope="row">Folge- und Abschlussgespräche</th><td>1 × 30 Minuten</td><td>3 × 30 Minuten</td><td>6 × 30 Minuten</td></tr>
|
||||
<tr><th scope="row">Ernährungsprotokoll</th><td>Analyse von 3 Tagen</td><td>Analyse von 5 Tagen</td><td>Analyse von 7 Tagen</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Dein Plan und dein Wissen</th></tr>
|
||||
<tr><th scope="row">Persönliche Empfehlungen</th><td>Maßnahmenplan als PDF</td><td>Im individuellen Ernährungsrahmen enthalten</td><td>Im individuellen Ernährungsrahmen enthalten</td></tr>
|
||||
<tr><th scope="row">Individueller Ernährungsrahmen</th><td>Nicht enthalten</td><td>7-Tage-Rahmen mit Mahlzeitenbausteinen, Portionsorientierung und Einkaufshilfe</td><td>7-Tage-Rahmen plus persönliche Wettkampfstrategie</td></tr>
|
||||
<tr><th scope="row">Wettkampfverpflegung</th><td>Nicht enthalten</td><td>Nicht enthalten</td><td>Strategie für einen Zielwettkampf: davor, währenddessen und danach</td></tr>
|
||||
<tr><th scope="row">Plananpassungen</th><td>Keine laufende Anpassung</td><td>2 gezielte Anpassungen</td><td>Bis zu 5 Anpassungen</td></tr>
|
||||
<tr><th scope="row">Selbstlernkurse</th><td>1 Kurs à 45 Minuten</td><td>2 Kurse à 45 Minuten</td><td>3 Kurse à 45 Minuten</td></tr>
|
||||
<tr><th scope="row">Kursinhalte</th><td>Essen und Trinken rund ums Training</td><td>Grundlagen plus Mahlzeitenplanung und Regeneration</td><td>Grundlagen, Mahlzeitenplanung und Regeneration plus Wettkampfverpflegung</td></tr>
|
||||
<tr><th scope="row">Kurszugriff</th><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Fragen zwischen den Terminen</th></tr>
|
||||
<tr><th scope="row">E-Mail-Rückfragen</th><td>1 gebündelte Rückfragerunde insgesamt</td><td>1 gebündelte Rückfragerunde pro Woche</td><td>Bis zu 2 gebündelte Rückfragerunden pro Woche</td></tr>
|
||||
<tr><th scope="row">Rückmeldung innerhalb von</th><td>3 Werktagen¹</td><td>2 Werktagen¹</td><td>1 Werktag¹</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Dein Coaching-Vorteil²</th></tr>
|
||||
<tr><th scope="row">Mit Starter-Coaching · 3 %</th><td>144,53 €</td><td>338,53 €</td><td>629,53 €</td></tr>
|
||||
<tr><th scope="row">Mit Standard-Coaching · 5 %</th><td>141,55 €</td><td>331,55 €</td><td>616,55 €</td></tr>
|
||||
<tr><th scope="row">Mit Premium-Coaching · 10 %</th><td>134,10 €</td><td>314,10 €</td><td>584,10 €</td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><th scope="row">Mehr zum Paket</th><td><a href="ernaehrung-starter.html">Starter entdecken →</a></td><td><a href="ernaehrung-standard.html">Standard entdecken →</a></td><td><a href="ernaehrung-premium.html">Premium entdecken →</a></td></tr></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="notes"><p>¹ Werktage: Montag bis Freitag, ausgenommen Feiertage.</p><p>² Der Rabatt richtet sich nach deinem <strong>bestehenden Coaching-1zu1-Paket</strong>, unabhängig vom gewählten Ernährungsangebot. Er gilt während der Coaching-Laufzeit. Die drei Rabattstufen sind Alternativen und werden nicht addiert.</p><p>Unverbindliche Beispielpreise. Endpreise und steuerliche Angaben müssen vor Veröffentlichung abgestimmt werden.</p></div>
|
||||
</section>
|
||||
<section class="framework" aria-labelledby="framework-title"><h2 id="framework-title">Für alle drei Pakete gilt</h2><p>Starttermin und Beratungstermine werden gemeinsam vereinbart. Die Laufzeit beginnt mit dem Erstgespräch. Nach dem aktuellen Konzept endet das Paket ohne automatische Verlängerung. Zusatztermine sind nicht im Beispielpreis enthalten und würden separat vereinbart.</p><p>Alle Konditionen sind Vorschläge zur Abstimmung. Ausführliche Leistungsbeschreibungen und Zeitpläne findest du auf den jeweiligen Paketdetailseiten.</p></section>
|
||||
<div class="bottom-actions"><a href="ernaehrungsberatung.html#angebote">← Zurück zu den Angeboten</a><a href="ernaehrungsberatung.html#kontakt">Fragen zur Beratung?</a></div>
|
||||
</main>
|
||||
<footer>TriHub · Ernährungsberatung · Projektprototyp · Stand: 30.09.2026</footer>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<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>
|
||||
<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" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
<link rel="stylesheet" href="css/sections/angebote.css" />
|
||||
<link rel="stylesheet" href="css/sections/ablauf.css" />
|
||||
<link rel="stylesheet" href="css/responsive.css" />
|
||||
<link rel="stylesheet" href="css/sections/kontakt.css" />
|
||||
<script src="js/angebote.js" defer></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
</head>
|
||||
|
|
@ -28,26 +29,23 @@
|
|||
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
|
||||
läuft’s ab</a><a href="#">Kontakt</a>
|
||||
<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">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>
|
||||
<a href="https://tri-hub.de/coaching-1zu1">Coaching-1zu1</a><a href="ernaehrungsberatung.html#angebote">Angebote
|
||||
entdecken</a><a href="ernaehrungsberatung.html#ablauf">So läuft’s ab</a><a
|
||||
href="ernaehrungsberatung.html#kontakt">Kontakt</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>
|
||||
|
|
@ -73,7 +71,6 @@
|
|||
<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">
|
||||
|
|
@ -133,8 +130,8 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="concept-note">
|
||||
<span aria-hidden="true">ⓘ</span> Angebotskonzept · Leistungen zur
|
||||
Abstimmung. Preise und Laufzeiten sind noch offen.
|
||||
<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">
|
||||
|
|
@ -154,9 +151,7 @@
|
|||
<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>
|
||||
<a class="button outline package-open" href="ernaehrung-starter.html">Starter entdecken</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="package featured">
|
||||
|
|
@ -177,9 +172,7 @@
|
|||
<li>Individueller Ernährungsrahmen</li>
|
||||
<li>Feedback und gemeinsame Anpassung</li>
|
||||
</ul>
|
||||
<button class="button package-open" data-package="standard">
|
||||
Standard entdecken
|
||||
</button>
|
||||
<a class="button package-open" href="ernaehrung-standard.html">Standard entdecken</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="package">
|
||||
|
|
@ -199,14 +192,13 @@
|
|||
<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>
|
||||
<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>
|
||||
<p style="margin: 32px 0"><a class="button" href="ernaehrung-vergleich.html">Alle Pakete im Vergleich →</a>
|
||||
</p>
|
||||
<div>
|
||||
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
|
||||
<p>
|
||||
|
|
@ -214,7 +206,7 @@
|
|||
Ernährungsberatung.
|
||||
</p>
|
||||
</div>
|
||||
<button id="bonus-open" class="text-link">Rabatte ansehen</button>
|
||||
<a class="text-link" href="ernaehrung-standard.html#coaching-vorteil">Rabatte ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -268,6 +260,61 @@
|
|||
<a class="text-link" href="#angebote">Dein Angebot entdecken</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- US04-02: Trainer + Kontakt (Weiterleitung zu tri-hub.de/kontakt) -->
|
||||
<section id="kontakt" class="shell section contact" aria-labelledby="kontakt-title">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">DEIN ANSPRECHPARTNER</p>
|
||||
<h2 id="kontakt-title">Vereinbare ein<br />persönliches Gespräch.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Lerne Lilli kennen und kläre in einem ersten Gespräch,
|
||||
welche Begleitung zu dir passt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-grid">
|
||||
<!-- Trainerprofil: Relindis Agethen (Lilli) -->
|
||||
<article class="trainer-card" aria-labelledby="trainer-name">
|
||||
<figure class="trainer-photo">
|
||||
<img src="assets/images/trainer/lilli.webp" width="800" height="1067"
|
||||
alt="Relindis Agethen (Lilli) auf dem Triathlonrad im Wettkampf" loading="lazy" />
|
||||
</figure>
|
||||
<div class="trainer-body">
|
||||
<h3 id="trainer-name">Relindis Agethen (Lilli)</h3>
|
||||
<p class="trainer-role">Triathletin und Ernährungsberaterin</p>
|
||||
<ul class="trainer-facts">
|
||||
<li><span>Qualifikation</span>Zertifizierte Ernährungsberaterin für Sportler (B-Lizenz)</li>
|
||||
<li><span>Erfahrung</span>Seit 16 Jahren aktiv im Triathlon</li>
|
||||
<li><span>Erfolge</span>Vize-Europameisterin, Deutsche Meisterin, mehrfache Baden-Württembergische
|
||||
Meisterin</li>
|
||||
<li><span>Schwerpunkt</span>Ernährung, Leistungssport-Perspektive und wettkampforientierte Entwicklung
|
||||
</li>
|
||||
</ul>
|
||||
<p class="trainer-bio">
|
||||
Lilli ergänzt das TriHub-Team um Leistungsentwicklung und
|
||||
Ernährungswissen – aus eigener Wettkampferfahrung.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="contact-card">
|
||||
<p class="eyebrow">KOSTENFREI & UNVERBINDLICH</p>
|
||||
<h3>Vereinbare ein persönliches Gespräch</h3>
|
||||
<p>
|
||||
Schreib Lilli über das Kontaktformular von TriHub.
|
||||
Erzähl kurz von deinen Zielen – du bekommst eine persönliche Antwort.
|
||||
</p>
|
||||
<ul class="contact-points">
|
||||
<li>Ziele und Alltag besprechen</li>
|
||||
<li>Passendes Angebot finden</li>
|
||||
<li>Offene Fragen klären</li>
|
||||
</ul>
|
||||
<a class="button contact-button" href="https://tri-hub.de/kontakt#kontaktinfos">Zum Kontaktformular</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="shell footer-main">
|
||||
|
|
@ -283,41 +330,6 @@
|
|||
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>
|
||||
132
js/angebote.js
132
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";
|
||||
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 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",
|
||||
});
|
||||
function updatePrice() {
|
||||
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.";
|
||||
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.`;
|
||||
}
|
||||
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();
|
||||
}
|
||||
});
|
||||
dialog.addEventListener("close", () => trigger?.focus());
|
||||
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)),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
/* Druckdialog bietet auch „Als PDF speichern“ an. */
|
||||
(() => {
|
||||
const printButton = document.getElementById("print-comparison");
|
||||
if (!printButton) return;
|
||||
printButton.hidden = false;
|
||||
printButton.addEventListener("click", () => window.print());
|
||||
})();
|
||||
Loading…
Reference in New Issue