diff --git a/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..9e22e44 --- /dev/null +++ b/css/responsive.css @@ -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; } +} diff --git a/css/sections/angebote.css b/css/sections/angebote.css index bdef8d8..e7c6190 100644 --- a/css/sections/angebote.css +++ b/css/sections/angebote.css @@ -46,45 +46,9 @@ .coaching-banner p { color: var(--muted); font-size: .9375rem; } .coaching-banner .text-link { margin-left: auto; flex-shrink: 0; font-size: .875rem; } -/* 8. Produktdetails – weiterhin zentriert und innerhalb des Fensters scrollbar */ -dialog { - position: fixed; - inset: 0; - margin: auto; - width: min(720px, calc(100% - 32px)); - max-height: 90dvh; - padding: 0; - overflow-y: auto; - overscroll-behavior: contain; - border: 1px solid rgb(255 255 255 / 16%); - border-radius: 1.75rem; - background: linear-gradient(#ffffff07, #ffffff00), var(--surface-elevated); - color: var(--text); - box-shadow: 0 30px 100px rgb(0 0 0 / 55%); - scrollbar-color: #46545c transparent; - scrollbar-width: thin; -} -dialog::backdrop { background: rgb(2 8 12 / 78%); backdrop-filter: blur(7px); } -.dialog-inner { position: relative; padding: 42px; } -.close-dialog { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgb(255 255 255 / 4%); color: var(--muted); font-size: 1.75rem; line-height: 1; } -.close-dialog:hover { background: rgb(255 255 255 / 10%); color: #fff; } -.dialog-inner > .eyebrow { padding-right: 24px; } -.dialog-inner h2 { margin: 16px 18px 22px 0; font-size: 2rem; line-height: 1.2; } -.dialog-inner > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; } -.dialog-inner h3 { margin: 28px 0 14px; font-size: 1.125rem; } -#dialog-features { padding-left: 20px; color: rgb(255 255 255 / 82%); font-size: 1rem; } -#dialog-features li { padding-block: 5px; } -#dialog-features li::marker { color: var(--quiet); } -.detail-note, .discount-help { color: var(--quiet); font-size: .8125rem; line-height: 1.7; } -.detail-note { margin-top: 12px; } -.discount-box { margin-block: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); } -.discount-box h3 { margin: 10px 0 22px; } -.discount-box label { display: block; margin-bottom: 10px; color: rgb(255 255 255 / 82%); font-size: .9375rem; } -.discount-box select { width: 100%; min-height: 50px; padding: 12px; border: 1px solid rgb(255 255 255 / 20%); border-radius: .75rem; background: var(--background); color: #fff; font-size: .9375rem; } -#discount-result { padding-block: 20px; color: rgb(255 255 255 / 88%); font-size: 1.0625rem; } -#discount-result strong { color: color-mix(in srgb, var(--accent-strong) 70%, white); font-size: 1.5rem; font-weight: 600; } -.discount-box a { display: inline-block; margin-top: 16px; color: rgb(255 255 255 / 84%); font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; } -.discount-box a:hover { color: #fff; } -.dialog-done { width: 100%; } -body:has(dialog[open]) { overflow: hidden; } +/* Laufzeit und Beispielpreis direkt an der Paketkarte. */ +.package-summary { display: grid; gap: 6px; margin-bottom: 22px; padding-top: 18px; border-top: 1px solid var(--line); } +.package-summary strong { color: #fff; font-family: var(--font-display); font-size: 1.35rem; } +.package-summary span { color: var(--muted); font-size: .9375rem; } +.package-summary small { color: var(--quiet); font-size: .75rem; } diff --git a/css/sections/hero.css b/css/sections/hero.css index 79df3d6..0c35e6f 100644 --- a/css/sections/hero.css +++ b/css/sections/hero.css @@ -5,7 +5,7 @@ display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; - align-items: center; + align-items: start; padding-block: 64px 72px; } .hero::before { diff --git a/css/sections/paketdetails.css b/css/sections/paketdetails.css new file mode 100644 index 0000000..bed6d32 --- /dev/null +++ b/css/sections/paketdetails.css @@ -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%; + } +} diff --git a/ernaehrung-premium.html b/ernaehrung-premium.html new file mode 100644 index 0000000..bcd15c1 --- /dev/null +++ b/ernaehrung-premium.html @@ -0,0 +1,351 @@ + + + + + + Premium · Ernährungsberatung | TriHub + + + + + + + + + + + + + + + +
+
+
+ +
+
+

Premium

+

Dein Ziel. Ganz persönlich.

+

+ 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. +

+

+ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +

+
+
+ Gesamtpreis · Vorschlag649,00 €einmalig für das gesamte Paket +
+
+ Laufzeit12 Wochenab vereinbartem Starttermin +
+
+ Persönliche Beratung7 Termineinsgesamt 240 Minuten +
+
+ Selbstlernkurse3 Kurseje 45 Minuten, online +
+
+ +
+
+ Persönliche Begleitung für sportlich aktive Menschen ab 50 +
+ DEIN PAKET. DEIN NÄCHSTER SCHRITT. +

Dein Ziel. Ganz persönlich.

+
+
+
+
+
+
+
+
+
+

DAS STECKT IN PREMIUM

+

Deine Begleitung.
Ganz konkret.

+
+
+
+
+ 01 +

7 persönliche Beratungen

+

+ Ein Erstgespräch à 60 Minuten und sechs Folgegespräche à 30 + Minuten in Woche 3, 5, 7, 9, 11 und 12, jeweils als + Video-Beratung. +

+
+
+ 02 +

Ernährungsrahmen plus Wettkampfstrategie

+

+ Analyse eines 7-Tage-Ernährungsprotokolls, individueller + 7-Tage-Rahmen und eine persönliche Verpflegungsstrategie für + einen Zielwettkampf: davor, währenddessen und danach. +

+
+
+ 03 +

3 Selbstlernkurse

+

+ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +

+
    +
  • Grundlagen: Essen und Trinken rund ums Training
  • +
  • Mahlzeiten planen und Regeneration unterstützen
  • +
  • Wettkampfverpflegung vorbereiten und im Training testen
  • +
+
+
+ 04 +

Feedback und Anpassungen

+

+ Bis zu fünf Anpassungen von Ernährungsrahmen und + Verpflegungsstrategie, abgestimmt auf die Erfahrungen aus deinem + Training. +

+
+
+ 05 +

Antworten zwischen Terminen

+

+ 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. +

+
+
+ 06 +

Was du für dich mitnimmst

+

+ Du hast deine Ernährung über mehrere Trainingsphasen erprobt und + gehst mit einer getesteten Verpflegungsstrategie in deinen + Zielwettkampf. +

+
+
+
+
+
+
+
+

DEINE ZEIT GUT GEPLANT

+

12 Wochen.
Ein klarer Ablauf.

+
+
+
    +
  1. + Woche 1–2 +

    Die Grundlage schaffen

    +

    + 60 Minuten Erstgespräch, sieben Tage Protokoll und Planung deiner + Ernährung und Verpflegung. +

    +
  2. +
  3. + Woche 3–11 +

    Im Training erproben

    +

    + Fünf Beratungen à 30 Minuten, drei Selbstlernkurse und bis zu fünf + Plananpassungen. +

    +
  4. +
  5. + Woche 12 +

    Deinen Weg absichern

    +

    + 30 Minuten Abschlussgespräch: Erfahrungen auswerten und deine + Strategie für das Ziel festhalten. +

    +
  6. +
+
+

So ist der Rahmen gedacht

+

+ 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. +

+
+
+
+
+
+

PREIS UND COACHING-VORTEIL

+

Deine Begleitung.
Dein Preis im Blick.

+

+ 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. +

+

+ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +

+ Coaching 1zu1 kennenlernen +
+
+

PREMIUM · 12 WOCHEN

+

Beispiel-Gesamtpreis

+

649,00 €

+

Einmalig · kein monatliches Abo

+ +

+ Ohne Coaching-Rabatt: 649,00 € für das gesamte Paket. +

+ +

+ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +

+
+
+
+
+
+
+

DEINE ENTSCHEIDUNG

+

Welche Begleitung passt zu dir?

+

Entdecke die anderen Pakete oder gehe zurück zur Übersicht.

+
+ Zur Angebotsübersicht +
+ +
+
+ + + diff --git a/ernaehrung-standard.html b/ernaehrung-standard.html new file mode 100644 index 0000000..624a9a8 --- /dev/null +++ b/ernaehrung-standard.html @@ -0,0 +1,353 @@ + + + + + + Standard · Ernährungsberatung | TriHub + + + + + + + + + + + + + + + +
+
+
+ +
+
+

Standard

+

+ Aus guten Vorsätzen wird dein Plan. +

+

+ 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. +

+

+ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +

+
+
+ Gesamtpreis · Vorschlag349,00 €einmalig für das gesamte Paket +
+
+ Laufzeit8 Wochenab vereinbartem Starttermin +
+
+ Persönliche Beratung4 Termineinsgesamt 150 Minuten +
+
+ Selbstlernkurse2 Kurseje 45 Minuten, online +
+
+ +
+
+ Persönliche Begleitung für sportlich aktive Menschen ab 50 +
+ DEIN PAKET. DEIN NÄCHSTER SCHRITT. +

Aus guten Vorsätzen wird dein Plan.

+
+
+
+
+
+
+
+
+
+

DAS STECKT IN STANDARD

+

Deine Begleitung.
Ganz konkret.

+
+
+
+
+ 01 +

4 persönliche Beratungen

+

+ Ein Erstgespräch à 60 Minuten und drei Folgegespräche à 30 + Minuten in Woche 3, 5 und 8, jeweils als Video-Beratung. +

+
+
+ 02 +

Individueller 7-Tage-Ernährungsrahmen

+

+ Analyse eines 5-Tage-Ernährungsprotokolls. Dazu ein + wiederverwendbarer 7-Tage-Rahmen mit Mahlzeitenbausteinen, + Portionsorientierung und Einkaufshilfe für Trainings- und + Ruhetage. +

+
+
+ 03 +

2 Selbstlernkurse

+

+ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +

+
    +
  • Grundlagen: Essen und Trinken rund ums Training
  • +
  • Mahlzeiten planen und Regeneration unterstützen
  • +
+
+
+ 04 +

Feedback und Anpassungen

+

+ Zwei gezielte Anpassungen des Ernährungsrahmens nach deinem + Feedback, plus eine gemeinsame Abschlussauswertung. +

+
+
+ 05 +

Antworten zwischen Terminen

+

+ 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. +

+
+
+ 06 +

Was du für dich mitnimmst

+

+ Du hast einen erprobten Ernährungsrahmen für Trainings- und + Ruhetage und kannst Mahlzeiten selbstständig an deinen Alltag + anpassen. +

+
+
+
+
+
+
+
+

DEINE ZEIT GUT GEPLANT

+

8 Wochen.
Ein klarer Ablauf.

+
+
+
    +
  1. + Woche 1–2 +

    Analysieren und planen

    +

    + 60 Minuten Erstgespräch, fünf Tage Protokoll und dein + individueller Ernährungsrahmen. +

    +
  2. +
  3. + Woche 3–5 +

    Routinen festigen

    +

    + Zwei Beratungen à 30 Minuten, zwei Selbstlernkurse und zwei + gezielte Plananpassungen. +

    +
  4. +
  5. + Woche 6–8 +

    Selbstständig weitergehen

    +

    + Routinen im Alltag erproben und in Woche 8 gemeinsam 30 Minuten + Bilanz ziehen. +

    +
  6. +
+
+

So ist der Rahmen gedacht

+

+ 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. +

+
+
+
+
+
+

PREIS UND COACHING-VORTEIL

+

Deine Begleitung.
Dein Preis im Blick.

+

+ 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. +

+

+ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +

+ Coaching 1zu1 kennenlernen +
+
+

STANDARD · 8 WOCHEN

+

Beispiel-Gesamtpreis

+

349,00 €

+

Einmalig · kein monatliches Abo

+ +

+ Ohne Coaching-Rabatt: 349,00 € für das gesamte Paket. +

+ +

+ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +

+
+
+
+
+
+
+

DEINE ENTSCHEIDUNG

+

Welche Begleitung passt zu dir?

+

Entdecke die anderen Pakete oder gehe zurück zur Übersicht.

+
+ Zur Angebotsübersicht +
+ +
+
+ + + diff --git a/ernaehrung-starter.html b/ernaehrung-starter.html new file mode 100644 index 0000000..be8c36c --- /dev/null +++ b/ernaehrung-starter.html @@ -0,0 +1,347 @@ + + + + + + Starter · Ernährungsberatung | TriHub + + + + + + + + + + + + + + + +
+
+
+ +
+
+

Starter

+

Dein erster guter Schritt.

+

+ 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. +

+

+ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +

+
+
+ Gesamtpreis · Vorschlag149,00 €einmalig für das gesamte Paket +
+
+ Laufzeit4 Wochenab vereinbartem Starttermin +
+
+ Persönliche Beratung2 Termineinsgesamt 90 Minuten +
+
+ Selbstlernkurse1 Kursje 45 Minuten, online +
+
+ +
+
+ Persönliche Begleitung für sportlich aktive Menschen ab 50 +
+ DEIN PAKET. DEIN NÄCHSTER SCHRITT. +

Dein erster guter Schritt.

+
+
+
+
+
+
+
+
+
+

DAS STECKT IN STARTER

+

Deine Begleitung.
Ganz konkret.

+
+
+
+
+ 01 +

2 persönliche Beratungen

+

+ Ein Erstgespräch à 60 Minuten und ein Abschlussgespräch à 30 + Minuten, jeweils als Video-Beratung. +

+
+
+ 02 +

Persönliche Empfehlungen als PDF

+

+ Analyse eines 3-Tage-Ernährungsprotokolls und ein schriftlicher + Maßnahmenplan für Mahlzeiten, Trinken und Trainingstage. Kein + individueller Wochenplan enthalten. +

+
+
+ 03 +

1 Selbstlernkurs

+

+ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +

+
    +
  • Grundlagen: Essen und Trinken rund ums Training
  • +
+
+
+ 04 +

Feedback und Anpassungen

+

+ Einmalige Empfehlungen nach der Analyse; Einordnung der + Erfahrungen im Abschlussgespräch. Keine laufende Plananpassung. +

+
+
+ 05 +

Antworten zwischen Terminen

+

+ Eine gebündelte Rückfragerunde per E-Mail innerhalb der vier + Wochen; Rückmeldung innerhalb von drei Werktagen. Werktage: + Montag bis Freitag, ausgenommen Feiertage. +

+
+
+ 06 +

Was du für dich mitnimmst

+

+ Du kennst deine wichtigsten Ansatzpunkte und gehst mit drei + konkreten Ernährungsroutinen aus der Beratung. +

+
+
+
+
+
+
+
+

DEINE ZEIT GUT GEPLANT

+

4 Wochen.
Ein klarer Ablauf.

+
+
+
    +
  1. + Woche 1 +

    Deine Ausgangslage

    +

    + 60 Minuten Erstgespräch, Ziele klären und drei Tage Ernährung + protokollieren. +

    +
  2. +
  3. + Woche 2–3 +

    Verstehen und ausprobieren

    +

    + Analyse besprechen, Empfehlungen umsetzen und den Grundlagenkurs + bearbeiten. +

    +
  4. +
  5. + Woche 4 +

    Deine nächsten Schritte

    +

    + 30 Minuten Abschlussgespräch und konkrete Routinen für die Zeit + danach. +

    +
  6. +
+
+

So ist der Rahmen gedacht

+

+ 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. +

+
+
+
+
+
+

PREIS UND COACHING-VORTEIL

+

Deine Begleitung.
Dein Preis im Blick.

+

+ 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. +

+

+ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +

+ Coaching 1zu1 kennenlernen +
+
+

STARTER · 4 WOCHEN

+

Beispiel-Gesamtpreis

+

149,00 €

+

Einmalig · kein monatliches Abo

+ +

+ Ohne Coaching-Rabatt: 149,00 € für das gesamte Paket. +

+ +

+ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +

+
+
+
+
+
+
+

DEINE ENTSCHEIDUNG

+

Welche Begleitung passt zu dir?

+

Entdecke die anderen Pakete oder gehe zurück zur Übersicht.

+
+ Zur Angebotsübersicht +
+ +
+
+ + + diff --git a/ernaehrungsberatung.html b/ernaehrungsberatung.html index 3345199..fc0f890 100644 --- a/ernaehrungsberatung.html +++ b/ernaehrungsberatung.html @@ -70,10 +70,6 @@
-
- ERNÄHRUNGSBERATUNG FÜR TRIATHLON AB - 50 -

Gut versorgt.
Für alles, was
noch vor dir liegt.

@@ -103,7 +99,6 @@ DEIN TEMPO. DEINE ZIELE.

Mehr Freude am Sport.
Mehr Energie fürs Leben.

-
TRIATHLON 50+
@@ -119,10 +114,6 @@

WAS DU DAVON HAST

Dein Training verdient
die passende Ernährung.

-

- Du bringst die Motivation mit. Gemeinsam schaffen wir Orientierung - für das Essen und Trinken rund um deinen Sport. -

@@ -158,14 +149,9 @@

DEINE ERNÄHRUNG. DEINE BEGLEITUNG.

So viel Unterstützung,
wie du brauchst.

-

- Ein klarer Einstieg oder eine enge Begleitung: Wähle den Rahmen, - der sich für dich richtig anfühlt. -

- Angebotskonzept · Leistungen zur - Abstimmung. Preise und Laufzeiten sind noch offen. + Paketvorschläge zur Teamabstimmung · Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht bestätigt.
@@ -190,12 +176,11 @@
  • Analyse deiner Essgewohnheiten
  • Konkrete Empfehlungen für den Alltag
  • -
    @@ -247,12 +232,11 @@
  • Verpflegungsstrategie für Wettkämpfe
  • Engmaschige Begleitung und Anpassung
  • -
    @@ -265,7 +249,11 @@ Ernährungsberatung.

    - + Rabatte ansehen @@ -275,10 +263,6 @@

    SO LÄUFT’S AB

    Vom ersten Gespräch
    zu deiner eigenen Routine.

    -

    - Du musst nicht schon alles wissen. Wir beginnen bei dir und gehen - Schritt für Schritt weiter. -

    1. @@ -344,46 +328,5 @@ > - -
      - -

      -

      -

      -
      -

      Deine Begleitung im Überblick

      -
        -

        - Konzeptvorschlag: Leistungsumfang, Kontaktfrequenz, Laufzeit und - Preis werden noch abgestimmt. -

        -
        -
        -

        DEIN COACHING-VORTEIL

        -

        Du bist schon im Coaching 1zu1?

        - -
        -

        - 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. -

        - Coaching 1zu1 bei TriHub ansehen -
        - -
        -
        diff --git a/js/angebote.js b/js/angebote.js index b6b0704..86a2ece 100644 --- a/js/angebote.js +++ b/js/angebote.js @@ -1,115 +1,25 @@ -// Vollständige Paketdetails und Rabattdialog aus TriHub Design Original. +// US02-03: Coaching-Rabatt direkt auf der Paketdetailseite, ohne Dialog. +"use strict"; (() => { - "use strict"; - const packages = { - starter: { - name: "Starter", - title: "Dein erster guter Schritt.", - description: - "Du möchtest wissen, wo du stehst und was du konkret verändern kannst? Starter schafft eine persönliche Grundlage für deinen Einstieg.", - features: [ - "Gemeinsames Erstgespräch zu Zielen, Training, Alltag und Vorlieben.", - "Auswertung eines Ernährungsprotokolls mit Blick auf deine bisherigen Gewohnheiten.", - "Persönliche Handlungsempfehlungen für Essen und Trinken im Alltag und rund um dein Training.", - "Abschlussgespräch zur Einordnung deiner nächsten Schritte.", - ], - }, - standard: { - name: "Standard", - title: "Aus guten Vorsätzen wird dein Plan.", - description: - "Du möchtest aus einzelnen Empfehlungen eine verlässliche Routine machen? Standard verbindet die Bestandsaufnahme mit einem individuellen Plan und persönlichem Feedback.", - features: [ - "Alle vorgeschlagenen Leistungen aus Starter.", - "Ein individueller Ernährungsrahmen für Trainings- und Ruhetage.", - "Praktische Mahlzeitenideen, abgestimmt auf deine Vorlieben und deinen Alltag.", - "Feedbackgespräche, um Erfahrungen zu besprechen und den Plan gemeinsam anzupassen.", - ], - }, - premium: { - name: "Premium", - title: "Dein Ziel. Ganz persönlich.", - description: - "Du möchtest deine Ernährung gezielt auf sportliche Herausforderungen abstimmen? Premium sieht eine besonders enge Begleitung bis in die Wettkampfvorbereitung vor.", - features: [ - "Alle vorgeschlagenen Leistungen aus Standard.", - "Eine individuelle Strategie für Essen und Trinken vor, während und nach Wettkämpfen.", - "Erprobung der Verpflegung im Training und Anpassung an deine Erfahrungen.", - "Engmaschiger persönlicher Austausch und laufende Anpassungen an deine Trainingsphasen.", - ], - }, - }; - const dialog = document.querySelector("#package-dialog"); - const select = document.querySelector("#coaching-select"); - let trigger; - function updateDiscount() { - const rate = Number(select.value); - const result = document.querySelector("#discount-result"); - result.replaceChildren(); - if (rate) { - const strong = document.createElement("strong"); - strong.textContent = rate + " % Rabatt"; - result.append( - strong, - document.createTextNode(" auf deine Ernährungsberatung."), - ); - } else - result.textContent = - "Mit Coaching 1zu1: Starter 3 %, Standard 5 %, Premium 10 % Rabatt."; - } - function openDetails(key, button) { - trigger = button; - const data = packages[key]; - document.querySelector("#dialog-eyebrow").textContent = data - ? "ERNÄHRUNGSBERATUNG · " + data.name.toUpperCase() - : "COACHING 1ZU1 · BONUSREGELUNG"; - document.querySelector("#dialog-title").textContent = data - ? data.title - : "Dein Coaching zahlt sich aus."; - document.querySelector("#dialog-description").textContent = data - ? data.description - : "Dein bestehendes Coaching-Paket bringt dir einen Preisvorteil bei der Ernährungsberatung. Wähle es aus und entdecke deinen Rabatt."; - document.querySelector("#detail-section").hidden = !data; - const list = document.querySelector("#dialog-features"); - list.replaceChildren(); - if (data) - data.features.forEach((text) => { - const li = document.createElement("li"); - li.textContent = text; - list.append(li); - }); - updateDiscount(); - dialog.showModal(); - } - document - .querySelectorAll(".package-open") - .forEach((button) => - button.addEventListener("click", () => - openDetails(button.dataset.package, button), - ), - ); - document - .querySelector("#bonus-open") - .addEventListener("click", (event) => - openDetails(null, event.currentTarget), - ); - select.addEventListener("change", updateDiscount); - document - .querySelectorAll(".close-dialog,.dialog-done") - .forEach((button) => - button.addEventListener("click", () => dialog.close()), - ); - dialog.addEventListener("click", (event) => { - if (event.target === dialog) { - const r = dialog.getBoundingClientRect(); - if ( - event.clientX < r.left || - event.clientX > r.right || - event.clientY < r.top || - event.clientY > r.bottom - ) - dialog.close(); - } + const panel = document.querySelector("[data-base-price]"); + if (!panel) return; + const select = panel.querySelector("select"); + const price = panel.querySelector("[data-price-output]"); + const summary = panel.querySelector("[data-discount-output]"); + const baseCents = Math.round(Number(panel.dataset.basePrice) * 100); + const currency = new Intl.NumberFormat("de-DE", { + style: "currency", + currency: "EUR", }); - dialog.addEventListener("close", () => trigger?.focus()); + function updatePrice() { + const rate = Number(select.value); + const saving = Math.round((baseCents * rate) / 100); + const total = baseCents - saving; + price.textContent = currency.format(total / 100); + summary.textContent = rate + ? `${rate} % Coaching-Rabatt: Du sparst ${currency.format(saving / 100)}. Beispiel-Gesamtpreis: ${currency.format(total / 100)}.` + : `Ohne Coaching-Rabatt: ${currency.format(baseCents / 100)} für das gesamte Paket.`; + } + select.addEventListener("change", updatePrice); + updatePrice(); })(); diff --git a/js/main.js b/js/main.js index f1b0e7d..43730d1 100644 --- a/js/main.js +++ b/js/main.js @@ -28,11 +28,13 @@ const targets = [ ...document.querySelectorAll( ".hero-copy > *, .hero-visual, .section-heading, .benefit-grid > article, " + - ".concept-note, .package-grid > article, .coaching-banner, .steps > li, .process-end", + ".concept-note, .package-grid > article, .coaching-banner, .steps > li, .process-end, .detail-benefits > article, .detail-timeline > li, .price-panel", ), ]; document - .querySelectorAll(".hero-copy, .benefit-grid, .package-grid, .steps") + .querySelectorAll( + ".hero-copy, .benefit-grid, .package-grid, .steps, .detail-benefits, .detail-timeline", + ) .forEach((group) => { [...group.children].forEach((child, index) => delays.set(child, Math.min(index * 80, 240)),