Merge pull request 'dev_experimental -> main' (#10) from dev_experimental into main
Reviewed-on: https://gitty.informatik.th-mannheim.de/3015351/PM_Project/pulls/10feature_US0202
commit
44a16ba57c
231
css/base.css
231
css/base.css
|
|
@ -6,13 +6,21 @@
|
||||||
--muted: rgb(255 255 255 / 70%);
|
--muted: rgb(255 255 255 / 70%);
|
||||||
--quiet: rgb(255 255 255 / 56%);
|
--quiet: rgb(255 255 255 / 56%);
|
||||||
--line: rgb(255 255 255 / 10%);
|
--line: rgb(255 255 255 / 10%);
|
||||||
--panel: linear-gradient(#ffffff14, #ffffff08);
|
--mint: oklch(70% .12 205);
|
||||||
|
--panel: linear-gradient(#ffffff14, #08060608);
|
||||||
--ease: cubic-bezier(.22, 1, .36, 1);
|
--ease: cubic-bezier(.22, 1, .36, 1);
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* {
|
||||||
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
scroll-padding-top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
|
@ -22,29 +30,87 @@ body {
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
main { overflow: clip; }
|
|
||||||
h1, h2, h3, p, figure { margin: 0; }
|
main {
|
||||||
h1, h2, h3 {
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p,
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
font-family: var(--font-display), sans-serif;
|
font-family: var(--font-display), sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: -.04em;
|
letter-spacing: -.04em;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
h1, h2 { line-height: 1.12; }
|
|
||||||
h3 { line-height: 1.35; }
|
h1,
|
||||||
a { color: inherit; text-decoration: none; }
|
h2 {
|
||||||
button, select { font: inherit; }
|
line-height: 1.12;
|
||||||
button { cursor: pointer; border: 0; }
|
}
|
||||||
button, a, select { -webkit-tap-highlight-color: transparent; }
|
|
||||||
a, button, select { touch-action: manipulation; }
|
h3 {
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
a,
|
||||||
|
select {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
:where(button, a, select):focus-visible {
|
:where(button, a, select):focus-visible {
|
||||||
outline: 2px solid var(--accent-strong);
|
outline: 2px solid var(--accent-strong);
|
||||||
outline-offset: 5px;
|
outline-offset: 5px;
|
||||||
}
|
}
|
||||||
img { display: block; max-width: 100%; object-fit: cover; }
|
|
||||||
button:disabled { cursor: default; }
|
img {
|
||||||
[hidden] { display: none !important; }
|
display: block;
|
||||||
.shell { width: min(1280px, calc(100% - 128px)); margin-inline: auto; }
|
max-width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
width: min(1280px, calc(100% - 128px));
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
|
/* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
|
||||||
.site-header {
|
.site-header {
|
||||||
|
|
@ -52,13 +118,12 @@ button:disabled { cursor: default; }
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
background: linear-gradient(
|
background: linear-gradient(color-mix(in oklab, var(--background) 95%, transparent),
|
||||||
color-mix(in oklab, var(--background) 95%, transparent),
|
color-mix(in oklab, var(--background) 80%, transparent));
|
||||||
color-mix(in oklab, var(--background) 80%, transparent)
|
|
||||||
);
|
|
||||||
backdrop-filter: blur(18px);
|
backdrop-filter: blur(18px);
|
||||||
-webkit-backdrop-filter: blur(18px);
|
-webkit-backdrop-filter: blur(18px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-inner {
|
.header-inner {
|
||||||
width: calc(100% - 64px);
|
width: calc(100% - 64px);
|
||||||
min-height: 98px;
|
min-height: 98px;
|
||||||
|
|
@ -68,12 +133,14 @@ button:disabled { cursor: default; }
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding-block: 16px;
|
padding-block: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.brand-mark {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -87,16 +154,38 @@ button:disabled { cursor: default; }
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
|
box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
|
||||||
}
|
}
|
||||||
.brand-logo img { width: 48px; height: 48px; object-fit: contain; }
|
|
||||||
.brand-copy { display: grid; gap: 3px; }
|
.brand-logo img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.brand-name {
|
.brand-name {
|
||||||
color: var(--quiet);
|
color: var(--quiet);
|
||||||
font-size: .75rem;
|
font-size: .75rem;
|
||||||
letter-spacing: .28em;
|
letter-spacing: .28em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.brand-sub { color: var(--muted); font-size: .875rem; line-height: 1.5; }
|
|
||||||
.header-inner nav { display: flex; align-items: center; gap: 5px; }
|
.brand-sub {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.header-inner nav a {
|
.header-inner nav a {
|
||||||
padding: 9px 14px;
|
padding: 9px 14px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|
@ -104,15 +193,21 @@ button:disabled { cursor: default; }
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: color .2s, background .2s, border-color .2s;
|
transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
|
||||||
}
|
}
|
||||||
.header-inner nav a:hover,
|
|
||||||
.header-inner nav a[aria-current] {
|
.header-inner nav a:hover {
|
||||||
border-color: var(--line);
|
border-color: var(--mint);
|
||||||
background: rgb(255 255 255 / 5%);
|
background: var(--mint);
|
||||||
color: #fff;
|
color: #000;
|
||||||
|
box-shadow: 0 0 18px color-mix(in srgb, var(--mint) 65%, transparent),
|
||||||
|
inset 0 0 10px rgb(255 255 255 / 28%);
|
||||||
}
|
}
|
||||||
.menu-toggle { display: none; }
|
|
||||||
|
.menu-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.skip {
|
.skip {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
|
|
@ -123,7 +218,10 @@ button:disabled { cursor: default; }
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: var(--ink-strong);
|
color: var(--ink-strong);
|
||||||
}
|
}
|
||||||
.skip:focus { top: 12px; }
|
|
||||||
|
.skip:focus {
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
|
/* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
|
||||||
.button {
|
.button {
|
||||||
|
|
@ -142,17 +240,29 @@ button:disabled { cursor: default; }
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: background .25s, border-color .25s, transform .25s var(--ease);
|
transition: background .25s, border-color .25s, transform .25s var(--ease);
|
||||||
}
|
}
|
||||||
.button:hover { background: #e9edf0; transform: translateY(-2px); }
|
|
||||||
.button.small { min-height: 42px; padding: 10px 20px; font-size: .875rem; }
|
.button:hover {
|
||||||
.button.outline, .header-cta {
|
background: #e9edf0;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.small {
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.outline {
|
||||||
border-color: rgb(255 255 255 / 16%);
|
border-color: rgb(255 255 255 / 16%);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.button.outline:hover, .header-cta:hover {
|
|
||||||
|
.button.outline:hover {
|
||||||
border-color: rgb(255 255 255 / 28%);
|
border-color: rgb(255 255 255 / 28%);
|
||||||
background: rgb(255 255 255 / 7%);
|
background: rgb(255 255 255 / 7%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-link {
|
.text-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -166,14 +276,47 @@ button:disabled { cursor: default; }
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
transition: color .2s, border-color .2s;
|
transition: color .2s, border-color .2s;
|
||||||
}
|
}
|
||||||
.text-link:hover { color: #fff; border-color: #fff; }
|
|
||||||
|
.text-link:hover {
|
||||||
|
color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
footer { border-top: 1px solid var(--line); background: var(--sidebar); }
|
footer {
|
||||||
.footer-main { display: flex; align-items: center; gap: 24px; padding-block: 32px; }
|
border-top: 1px solid var(--line);
|
||||||
.footer-main p { color: var(--muted); font-size: .9375rem; }
|
background: var(--sidebar);
|
||||||
.footer-main > a:last-child { margin-left: auto; color: var(--muted); font-size: .875rem; }
|
}
|
||||||
.footer-main > a:last-child:hover { color: #fff; }
|
|
||||||
.footer-note { display: flex; justify-content: space-between; gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
|
|
||||||
|
|
||||||
|
.footer-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
padding-block: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-main p {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: .9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-main>a:last-child {
|
||||||
|
margin-left: auto;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-main>a:last-child:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-note {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
padding-block: 20px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
color: var(--quiet);
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
@ -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 p { color: var(--muted); font-size: .9375rem; }
|
||||||
.coaching-banner .text-link { margin-left: auto; flex-shrink: 0; font-size: .875rem; }
|
.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;
|
display: grid;
|
||||||
grid-template-columns: 1.08fr 1fr;
|
grid-template-columns: 1.08fr 1fr;
|
||||||
gap: 56px;
|
gap: 56px;
|
||||||
align-items: center;
|
align-items: start;
|
||||||
padding-block: 64px 72px;
|
padding-block: 64px 72px;
|
||||||
}
|
}
|
||||||
.hero::before {
|
.hero::before {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
/* 8. Trainer und Kontakt (US04-02)
|
||||||
|
Trainerprofil ist ein PLATZHALTER – Foto und Inhalte folgen vom Kunden.
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 320px;
|
||||||
|
border: 1px dashed rgb(255 255 255 / 22%);
|
||||||
|
border-radius: 1.35rem;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 50% 38%, rgb(255 255 255 / 10%) 0 18%, transparent 19%),
|
||||||
|
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 8%) 0 42%, transparent 43%),
|
||||||
|
rgb(255 255 255 / 3%);
|
||||||
|
color: var(--quiet);
|
||||||
|
font-size: .8125rem;
|
||||||
|
letter-spacing: .18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer-photo span { margin-top: 62%; }
|
||||||
|
|
||||||
|
.trainer-body { padding: 12px 12px 12px 0; }
|
||||||
|
|
||||||
|
.placeholder-tag {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px dashed rgb(255 255 255 / 28%);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: var(--quiet);
|
||||||
|
font-size: .75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: .16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-quote {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-style: italic;
|
||||||
|
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 { min-height: 260px; }
|
||||||
|
.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,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>
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
<link rel="stylesheet" href="css/sections/angebote.css" />
|
<link rel="stylesheet" href="css/sections/angebote.css" />
|
||||||
<link rel="stylesheet" href="css/sections/ablauf.css" />
|
<link rel="stylesheet" href="css/sections/ablauf.css" />
|
||||||
<link rel="stylesheet" href="css/responsive.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/angebote.js" defer></script>
|
||||||
<script src="js/main.js" defer></script>
|
<script src="js/main.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -44,13 +45,9 @@
|
||||||
></a
|
></a
|
||||||
>
|
>
|
||||||
<nav aria-label="Hauptnavigation">
|
<nav aria-label="Hauptnavigation">
|
||||||
<a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
|
<a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a href="#angebote">Angebote entdecken</a><a href="#ablauf">So
|
||||||
><a href="#inhalt" aria-current="page">Ernährungsberatung</a
|
läuft’s ab</a><a href="#kontakt">Kontakt</a>
|
||||||
><a href="#ablauf">So läuft’s ab</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<a class="button small header-cta" href="#angebote"
|
|
||||||
>Angebote entdecken</a
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
class="menu-toggle"
|
class="menu-toggle"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
|
|
@ -70,10 +67,6 @@
|
||||||
<main id="inhalt">
|
<main id="inhalt">
|
||||||
<section class="hero shell" aria-labelledby="hero-title">
|
<section class="hero shell" aria-labelledby="hero-title">
|
||||||
<div class="hero-copy">
|
<div class="hero-copy">
|
||||||
<div class="eyebrow">
|
|
||||||
<span class="tiny-line"></span> ERNÄHRUNGSBERATUNG FÜR TRIATHLON AB
|
|
||||||
50
|
|
||||||
</div>
|
|
||||||
<h1 id="hero-title">
|
<h1 id="hero-title">
|
||||||
Gut versorgt.<br />Für alles, was<br /><em>noch vor dir liegt.</em>
|
Gut versorgt.<br />Für alles, was<br /><em>noch vor dir liegt.</em>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -103,7 +96,6 @@
|
||||||
<span>DEIN TEMPO. DEINE ZIELE.</span>
|
<span>DEIN TEMPO. DEINE ZIELE.</span>
|
||||||
<p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
|
<p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
<div class="image-tag">TRIATHLON <b>50+</b></div>
|
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<div class="values-strip">
|
<div class="values-strip">
|
||||||
|
|
@ -164,8 +156,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="concept-note">
|
<div class="concept-note">
|
||||||
<span aria-hidden="true">ⓘ</span> Angebotskonzept · Leistungen zur
|
<span aria-hidden="true">ⓘ</span> Paketvorschläge zur Teamabstimmung · Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht bestätigt.
|
||||||
Abstimmung. Preise und Laufzeiten sind noch offen.
|
|
||||||
</div>
|
</div>
|
||||||
<div class="package-grid">
|
<div class="package-grid">
|
||||||
<article class="package">
|
<article class="package">
|
||||||
|
|
@ -190,12 +181,11 @@
|
||||||
<li>Analyse deiner Essgewohnheiten</li>
|
<li>Analyse deiner Essgewohnheiten</li>
|
||||||
<li>Konkrete Empfehlungen für den Alltag</li>
|
<li>Konkrete Empfehlungen für den Alltag</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button
|
<a
|
||||||
class="button outline package-open"
|
class="button outline package-open"
|
||||||
data-package="starter"
|
href="ernaehrung-starter.html"
|
||||||
|
>Starter entdecken</a
|
||||||
>
|
>
|
||||||
Starter entdecken
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="package featured">
|
<article class="package featured">
|
||||||
|
|
@ -220,9 +210,9 @@
|
||||||
<li>Individueller Ernährungsrahmen</li>
|
<li>Individueller Ernährungsrahmen</li>
|
||||||
<li>Feedback und gemeinsame Anpassung</li>
|
<li>Feedback und gemeinsame Anpassung</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="button package-open" data-package="standard">
|
<a class="button package-open" href="ernaehrung-standard.html"
|
||||||
Standard entdecken
|
>Standard entdecken</a
|
||||||
</button>
|
>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="package">
|
<article class="package">
|
||||||
|
|
@ -247,12 +237,11 @@
|
||||||
<li>Verpflegungsstrategie für Wettkämpfe</li>
|
<li>Verpflegungsstrategie für Wettkämpfe</li>
|
||||||
<li>Engmaschige Begleitung und Anpassung</li>
|
<li>Engmaschige Begleitung und Anpassung</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button
|
<a
|
||||||
class="button outline package-open"
|
class="button outline package-open"
|
||||||
data-package="premium"
|
href="ernaehrung-premium.html"
|
||||||
|
>Premium entdecken</a
|
||||||
>
|
>
|
||||||
Premium entdecken
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -265,7 +254,11 @@
|
||||||
Ernährungsberatung.
|
Ernährungsberatung.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -319,6 +312,56 @@
|
||||||
<a class="text-link" href="#angebote">Dein Angebot entdecken</a>
|
<a class="text-link" href="#angebote">Dein Angebot entdecken</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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 deinen Trainer kennen und kläre in einem ersten Gespräch,
|
||||||
|
welche Begleitung zu dir passt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-grid">
|
||||||
|
<!-- PLATZHALTER: Trainerprofil – Inhalte folgen vom Kunden -->
|
||||||
|
<article class="trainer-card" aria-label="Trainerprofil (Platzhalter)">
|
||||||
|
<div class="trainer-photo" role="img" aria-label="Platzhalter für das Foto des Trainers">
|
||||||
|
<span aria-hidden="true">Foto folgt</span>
|
||||||
|
</div>
|
||||||
|
<div class="trainer-body">
|
||||||
|
<p class="placeholder-tag">Platzhalter</p>
|
||||||
|
<h3>[Name des Trainers]</h3>
|
||||||
|
<p class="trainer-role">[Rolle, z. B. Triathlon-Coach & Ernährungsberater]</p>
|
||||||
|
<ul class="trainer-facts">
|
||||||
|
<li><span>Qualifikation</span>[Ausbildung / Studium]</li>
|
||||||
|
<li><span>Zertifikate</span>[z. B. Lizenz, Fortbildungen]</li>
|
||||||
|
<li><span>Erfahrung</span>[Jahre im Triathlon / in der Beratung]</li>
|
||||||
|
<li><span>Schwerpunkte</span>[z. B. Ernährung ab 50, Wettkampfvorbereitung]</li>
|
||||||
|
</ul>
|
||||||
|
<p class="trainer-quote">„[Kurzes persönliches Statement des Trainers]“</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="contact-card">
|
||||||
|
<p class="eyebrow">KOSTENLOS & UNVERBINDLICH</p>
|
||||||
|
<h3>Vereinbare ein persönliches Gespräch</h3>
|
||||||
|
<p>
|
||||||
|
Schreib deinem Trainer ü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>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="shell footer-main">
|
<div class="shell footer-main">
|
||||||
|
|
@ -344,46 +387,5 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</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";
|
||||||
(() => {
|
(() => {
|
||||||
"use strict";
|
const panel = document.querySelector("[data-base-price]");
|
||||||
const packages = {
|
if (!panel) return;
|
||||||
starter: {
|
const select = panel.querySelector("select");
|
||||||
name: "Starter",
|
const price = panel.querySelector("[data-price-output]");
|
||||||
title: "Dein erster guter Schritt.",
|
const summary = panel.querySelector("[data-discount-output]");
|
||||||
description:
|
const baseCents = Math.round(Number(panel.dataset.basePrice) * 100);
|
||||||
"Du möchtest wissen, wo du stehst und was du konkret verändern kannst? Starter schafft eine persönliche Grundlage für deinen Einstieg.",
|
const currency = new Intl.NumberFormat("de-DE", {
|
||||||
features: [
|
style: "currency",
|
||||||
"Gemeinsames Erstgespräch zu Zielen, Training, Alltag und Vorlieben.",
|
currency: "EUR",
|
||||||
"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.",
|
function updatePrice() {
|
||||||
"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 rate = Number(select.value);
|
||||||
const result = document.querySelector("#discount-result");
|
const saving = Math.round((baseCents * rate) / 100);
|
||||||
result.replaceChildren();
|
const total = baseCents - saving;
|
||||||
if (rate) {
|
price.textContent = currency.format(total / 100);
|
||||||
const strong = document.createElement("strong");
|
summary.textContent = rate
|
||||||
strong.textContent = rate + " % Rabatt";
|
? `${rate} % Coaching-Rabatt: Du sparst ${currency.format(saving / 100)}. Beispiel-Gesamtpreis: ${currency.format(total / 100)}.`
|
||||||
result.append(
|
: `Ohne Coaching-Rabatt: ${currency.format(baseCents / 100)} für das gesamte Paket.`;
|
||||||
strong,
|
|
||||||
document.createTextNode(" auf deine Ernährungsberatung."),
|
|
||||||
);
|
|
||||||
} else
|
|
||||||
result.textContent =
|
|
||||||
"Mit Coaching 1zu1: Starter 3 %, Standard 5 %, Premium 10 % Rabatt.";
|
|
||||||
}
|
}
|
||||||
function openDetails(key, button) {
|
select.addEventListener("change", updatePrice);
|
||||||
trigger = button;
|
updatePrice();
|
||||||
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());
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,13 @@
|
||||||
const targets = [
|
const targets = [
|
||||||
...document.querySelectorAll(
|
...document.querySelectorAll(
|
||||||
".hero-copy > *, .hero-visual, .section-heading, .benefit-grid > article, " +
|
".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
|
document
|
||||||
.querySelectorAll(".hero-copy, .benefit-grid, .package-grid, .steps")
|
.querySelectorAll(
|
||||||
|
".hero-copy, .benefit-grid, .package-grid, .steps, .detail-benefits, .detail-timeline",
|
||||||
|
)
|
||||||
.forEach((group) => {
|
.forEach((group) => {
|
||||||
[...group.children].forEach((child, index) =>
|
[...group.children].forEach((child, index) =>
|
||||||
delays.set(child, Math.min(index * 80, 240)),
|
delays.set(child, Math.min(index * 80, 240)),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue