diff --git a/.DS_Store b/.DS_Store index 5a1f190..4938c82 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/css/leistungen.css b/css/leistungen.css index ba8a39e..9b33f62 100644 --- a/css/leistungen.css +++ b/css/leistungen.css @@ -9,7 +9,7 @@ ========================================================== */ .pakete { - /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */ + /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */ --background: #0714198a; /* früher "bg-dark */ --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background, aber ohne fixes Alpha – für Gradient-Stops @@ -18,7 +18,7 @@ --accent: #4597A3; --accent-soft: rgba(69, 151, 163, 0.14); --text-primary: #ffffff; - --text-muted: #7e858a; + --text-muted: #7e858a; --font-display: "Sora", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; diff --git a/css/paketdetails.css b/css/paketdetails.css new file mode 100644 index 0000000..c88a829 --- /dev/null +++ b/css/paketdetails.css @@ -0,0 +1,716 @@ +/* ========================================================================== + Paketdetails CSS (Standalone) + Inhalt: Layout, Hero, Facts, Leistungen, Ablauf, Preise & Footer + ========================================================================== */ + +.paket-detail { + /* CSS Variablen */ + --background: #0714198a; + --background-rgb: 7 20 25; + --background-panel: #152027; + --accent: #4597A3; + --accent-soft: rgba(69, 151, 163, 0.14); + --text-primary: #ffffff; + --text-muted: #7e858a; + --border: rgba(255, 255, 255, 0.12); + + /* Typografie & Layout */ + --font-display: "Sora", "Inter", system-ui, sans-serif; + --font-body: "Inter", "DM Sans", system-ui, sans-serif; + --radius: 1.1rem; + + color-scheme: dark; + margin: 0; + background-color: var(--background); + color: var(--text-primary); + font-family: var(--font-body); + line-height: 1.625; + -webkit-font-smoothing: antialiased; + position: relative; + isolation: isolate; +} + +.paket-detail *, +.paket-detail *::before, +.paket-detail *::after { + box-sizing: border-box; +} + +.paket-detail p, +.paket-detail h1, +.paket-detail h2, +.paket-detail h3 { + margin: 0; +} + +.paket-detail h1, +.paket-detail h2, +.paket-detail h3 { + font-family: var(--font-display); + line-height: 1.2; +} + +.paket-detail .container { + width: min(1680px, calc(100% - clamp(40px, 10vw, 192px))); + margin-inline: auto; +} + +/* ========================================================================== + Typo-Helfer & Globale Bausteine + ========================================================================== */ + +.paket-detail .kicker { + display: inline-flex; + align-items: center; + gap: 10px; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--accent); + margin-bottom: 18px; +} + +.paket-detail .kicker::before { + content: ""; + width: 28px; + height: 2px; + border-radius: 2px; + background: var(--accent); +} + +.paket-detail .lead { + font-size: 1.15rem; + color: var(--text-muted); + max-width: 660px; +} + +.paket-detail .muted { + color: var(--text-muted); +} + +/* Buttons */ +.paket-detail .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.8rem 1.5rem; + border-radius: 999px; + font-family: var(--font-body); + font-weight: 600; + font-size: 0.95rem; + line-height: 1.2; + text-decoration: none; + border: 1px solid transparent; + cursor: pointer; + transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; +} + +.paket-detail .btn-accent { + background: var(--accent); + color: #03242b; +} + +.paket-detail .btn-accent:hover { + transform: translateY(-1px); + box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28); +} + +/* Sektionen, Boxen & Grids */ +.paket-detail .section { + padding: 96px 0; +} + +.paket-detail .section-head { + max-width: 720px; + margin-bottom: 56px; +} + +.paket-detail .section-head h2 { + font-size: clamp(1.9rem, 4vw, 2.7rem); + margin-bottom: 18px; +} + +.paket-detail .grid-2 { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; +} + +.paket-detail .box { + min-width: 0; + overflow-wrap: anywhere; + hyphens: auto; + background-color: var(--background-panel); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 32px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +/* ========================================================================== + Breadcrumb + ========================================================================== */ + +.paket-detail .paket-detail__breadcrumb { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding-block: 24px; + color: var(--text-muted); + font-size: 0.85rem; +} + +.paket-detail__breadcrumb a, +.paket-detail .paket-detail__text-link { + color: inherit; + text-decoration: none; +} + +.paket-detail__breadcrumb > span { + font-size: 0.7rem; + letter-spacing: 0.18em; +} + +.paket-detail .paket-detail__text-link { + display: inline-block; + color: var(--text-primary); + text-underline-offset: 5px; +} + +.paket-detail__breadcrumb a:hover, +.paket-detail .paket-detail__text-link:hover { + color: var(--accent); + text-decoration: underline; +} + +/* ========================================================================== + Hero-Sektion + ========================================================================== */ + +.paket-detail .paket-detail__hero { + position: relative; + isolation: isolate; + display: flex; + flex: 1; + min-width: 0; + min-height: 600px; + border-block: 1px solid var(--border); + overflow: hidden; +} + +.paket-detail .paket-detail__hero .hero__image, +.paket-detail .paket-detail__hero::after { + position: absolute; + z-index: -1; + inset: 0; + width: 100%; + height: 100%; + +} + +/* Das Hintergrundbild erstreckt sich vollflächig über den gesamten Hero-Bereich +Das ist die Standardausrichtung für für die Banner */ +.paket-detail__hero .hero__image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: right top; /* Bildschwerpunkt rechts ausrichten */ + z-index: -2; +} +/* Starter-Paket Ausrichtung*/ +body.paket-starter .hero__image { + object-position: right top; +} + +/* 2. Standard-Paket */ +body.paket-standard .hero__image { + object-position: 60% 30%; +} + +/* 3. Premium-Paket */ +body.paket-premium .hero__image { + object-position: 30% center; +} + +.paket-detail__hero::after { + position: absolute; + inset: 0; + z-index: -1; + content: ""; + background: + linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), + linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%); + content: ""; +} + +.paket-detail__hero .hero__inner { + display: flex; + flex-direction: column; + padding-block: clamp(32px, 5vh, 64px) 28px; + position: relative; + z-index: 1; +} + +.paket-detail__hero .hero__content { + width: min(100%, 720px); /* Textbereich kompakt halten */ + margin-block: auto; + padding-block: 24px 64px; +} + +.paket-detail__hero h1 { + color: var(--text-primary); + max-width: 100%; + font-size: clamp(42px, 4.9vw, 88px); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.055em; + text-wrap: balance; + overflow-wrap: break-word; +} + +.paket-detail__hero h1 span { + display: block; + margin-top: 8px; + color: var(--text-primary); +} + +.paket-detail__hero .hero__eyebrow { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 26px; + color: var(--text-muted); + font-size: 11px; + font-weight: 650; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.paket-detail__hero .hero__eyebrow::before { + width: 28px; + height: 1px; + flex-shrink: 0; + background: currentColor; + content: ""; +} + +.paket-detail__hero .hero__description { + max-width: 65ch; + margin-top: 30px; + color: #d1d7df; + font-size: clamp(16px, 1.15vw, 19px); + line-height: 1.85; +} + +.paket-detail__actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 24px; + margin-top: 30px; +} + +/* ========================================================================== + Paketangaben / Facts + ========================================================================== */ + +.paket-detail__facts { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; + margin: 0; + padding: 36px 0; + border-bottom: 1px solid var(--border); +} + +.paket-detail__facts > div { + padding-left: 20px; + border-left: 2px solid var(--accent); +} + +.paket-detail__facts dt { + margin-bottom: 8px; + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); +} + +.paket-detail__facts dd { + margin: 0; + font-family: var(--font-display); + font-size: 1.4rem; + font-weight: 600; +} + +.paket-detail__facts small { + display: block; + margin-top: 6px; + font-family: var(--font-body); + font-size: 0.85rem; + font-weight: 400; + color: var(--text-muted); +} + +/* ========================================================================== + Leistungen / Services + ========================================================================== */ + +.paket-detail__services .box { + box-shadow: none; +} + +.paket-detail__number { + display: block; + margin-bottom: 24px; + color: var(--accent); + font-size: 0.85rem; + font-variant-numeric: tabular-nums; +} + +.paket-detail__services h3 { + font-size: 1.25rem; + line-height: 1.4; + margin-bottom: 12px; +} + +.paket-detail__services p { + margin-bottom: 0; + color: var(--text-muted); +} + +/* ========================================================================== + Ablauf & Listen + ========================================================================== */ + +.paket-detail__process { + border-block: 1px solid var(--border); +} + +.paket-detail__split { + display: grid; + grid-template-columns: 1.1fr 1fr; + gap: clamp(32px, 6vw, 88px); + align-items: start; +} + +.paket-detail__split > * { + min-width: 0; +} + +.paket-detail__split h2 { + font-size: clamp(1.9rem, 3.4vw, 2.7rem); +} + +.paket-detail .beratung-ablauf { + list-style: none; + counter-reset: schritt; + padding: 0; + margin: 0; + display: grid; + gap: 32px; +} + +.paket-detail .beratung-ablauf li { + counter-increment: schritt; + position: relative; + padding-left: 60px; +} + +.paket-detail .beratung-ablauf li::before { + content: counter(schritt, decimal-leading-zero); + position: absolute; + left: 0; + top: 2px; + display: grid; + place-items: center; + width: 44px; + height: 44px; + border-radius: 50%; + font-family: var(--font-display); + font-size: 0.9rem; + font-weight: 600; + color: var(--accent); + background: rgba(0, 179, 194, 0.1); + border: 1px solid rgba(0, 179, 194, 0.3); +} + +.paket-detail .beratung-ablauf strong { + display: block; + font-family: var(--font-display); + font-size: 1.02rem; + color: var(--text-primary); + margin-bottom: 4px; +} + +.paket-detail .beratung-ablauf p { + margin: 0; + color: var(--text-muted); + font-size: 0.95rem; +} + +/* ========================================================================== + Preisübersicht & Checkliste + ========================================================================== */ + +.paket-detail .check-list { + list-style: none; + padding: 0; + margin: 20px 0 0; + display: grid; + gap: 12px; +} + +.paket-detail .check-list li { + position: relative; + padding-left: 34px; + color: var(--text-primary); +} + +.paket-detail .check-list li::before { + content: "✓"; + position: absolute; + left: 0; + top: 0; + color: var(--accent); + font-weight: bold; + font-size: 1.1rem; +} + +.paket-detail .paket-detail__alternative { + margin-top: 32px; + color: var(--text-muted); +} + +.paket-detail .paket-detail__summary { + border-color: var(--accent); + padding: clamp(24px, 3vw, 40px); +} + +.paket-detail__summary h3 { + font-size: 1.5rem; + margin-bottom: 16px; +} + +.paket-detail__price { + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: 10px; + color: var(--text-muted); +} + +.paket-detail__price strong { + color: var(--text-primary); + font-family: var(--font-display); + font-size: 3rem; + line-height: 1.2; +} + +.paket-detail__summary .check-list { + padding-block: 24px; + border-block: 1px solid var(--border); + margin-bottom: 28px; +} + +.paket-detail__summary .btn { + width: 100%; + min-height: 48px; + text-align: center; +} + +.paket-detail .paket-detail__note { + margin: 16px 0 0; + font-size: 0.8rem; + color: var(--text-muted); +} + +/* ========================================================================== + Footer + ========================================================================== */ + +.paket-detail .logo { + font-family: var(--font-display); + font-size: 1.35rem; + letter-spacing: -0.02em; + color: var(--text-muted); + text-decoration: none; + white-space: nowrap; +} + +.paket-detail .site-footer { + margin-top: 96px; + padding: 64px 0 40px; + border-top: 1px solid var(--border); + background: rgba(255, 255, 255, 0.015); +} + +.paket-detail .footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 48px; +} + +.paket-detail .footer-brand p { + color: var(--text-muted); + font-size: 0.95rem; + max-width: 340px; + margin-top: 14px; +} + +.paket-detail .footer-col h3 { + font-size: 0.85rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 16px; +} + +.paket-detail .footer-col ul { + list-style: none; + margin: 0; + padding: 0; +} + +.paket-detail .footer-col a { + display: block; + padding: 5px 0; + color: var(--text-muted); + text-decoration: none; + font-size: 0.92rem; + transition: color 0.15s ease; +} + +.paket-detail .footer-col a:hover { + color: var(--text-primary); +} + +.paket-detail .footer-legal { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 12px; + margin-top: 48px; + padding-top: 24px; + border-top: 1px solid var(--border); + color: var(--text-muted); + font-size: 0.85rem; +} + +.paket-detail .footer-legal a { + color: inherit; + text-decoration: none; +} + +.paket-detail .footer-legal a:hover { + color: var(--text-primary); +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 1100px) { + .paket-detail__hero::after { + background: + linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), + linear-gradient(90deg, rgb(var(--background-rgb) / 92%), rgb(var(--background-rgb) / 70%) 65%, rgb(var(--background-rgb) / 48%)); + } + + .paket-detail__hero .hero__content { + max-width: 85%; + } +} + +@media (max-width: 980px) { + .paket-detail .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 900px) { + .paket-detail__facts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 28px; + } + + .paket-detail__split { + grid-template-columns: minmax(0, 1fr); + } +} + +@media (max-width: 760px) { + .paket-detail .grid-2 { + grid-template-columns: minmax(0, 1fr); + } + + .paket-detail .section { + padding: 72px 0; + } + + .paket-detail .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media (max-width: 700px) { + .paket-detail__hero .hero__image { + inset: 0; + width: 100%; + max-width: 100%; + height: 100%; + object-fit: cover; + object-position: 60% bottom; + mask-image: none; + } + + .paket-detail__hero::after { + background: linear-gradient(90deg, rgb(var(--background-rgb) / 87%), rgb(var(--background-rgb) / 65%)), + linear-gradient(0deg, var(--background), transparent 55%); + } + + .paket-detail__hero .hero__content { + max-width: 100%; + padding-block: 12px 40px; + } + + .paket-detail__hero .hero__eyebrow { + gap: 8px; + font-size: 10px; + letter-spacing: 0.11em; + } + + .paket-detail__hero .hero__eyebrow::before { + width: 20px; + } + + .paket-detail__hero .hero__description { + margin-top: 24px; + } + + .paket-detail__actions { + align-items: flex-start; + flex-direction: column; + gap: 20px; + } + + .paket-detail__facts { + grid-template-columns: 1fr; + gap: 16px; + } + + .paket-detail__facts > div { + padding-left: 12px; + border-left-width: 1px; + } + + .paket-detail__facts dd { + font-size: 1.1rem; + } +} \ No newline at end of file diff --git a/css/produktuebersicht.css b/css/produktuebersicht.css index 885e934..cc3ecc2 100644 --- a/css/produktuebersicht.css +++ b/css/produktuebersicht.css @@ -84,7 +84,7 @@ /*background: var(--background); /* ich bekomme das nicht richtig hin muss Shahmad machen */ background: - linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), + linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%); content: ""; } diff --git a/html/.DS_Store b/html/.DS_Store new file mode 100644 index 0000000..5e32d5b Binary files /dev/null and b/html/.DS_Store differ diff --git a/html/paket-PREMIUM.html b/html/paket-PREMIUM.html new file mode 100644 index 0000000..c3baf74 --- /dev/null +++ b/html/paket-PREMIUM.html @@ -0,0 +1,198 @@ + + + + + + + Premium-Paket | Ernährungsberatung | Tri-hub + + + + + + + + + + + + + + +
+
+
+ +
+ TRI-HUB + Triathlon als sportliches Zuhause ab 50 +
+
+ + +
+ +
+ +
+
+ + +
+
+ Ein engagierter Triathlet bereitet sich professionell auf seinen Wettkampf vor. +
+
+

Ernährungsberatung · Premium

+

Maximale Betreuung.Keine Kompromisse.

+

Volle Betreuung für ambitionierte Athletinnen und Athleten ab 50. Wir stehen dir wöchentlich zur Seite, stimmen deine Nahrungsergänzung ab und begleiten dich direkt an deinem Wettkampftag.

+
+ Premium-Paket ansehen + Was ist enthalten? +
+
+
+
+
+ + +
+
+
Dein Paket
PremiumVolle Betreuung
+
Monatspreis
249 €pro Monat
+
Dein Plan
Profi-StandardInkl. Supplement-Strategie
+
Persönlicher Kontakt
WöchentlichPriorisierter Support & Race-Day
+
+
+ + +
+
+
+ Das steckt in Premium +

Höchste Präzision.
Für deine Höchstleistung.

+

Das Komplettpaket für maximale Ergebnisse: Wöchentlicher Austausch, punktgenaue Mikronährstoff-Beratung und direkte Unterstützung bei deinen Rennen.

+
+
+
+ +

Alles aus dem Standard-Paket

+

Enthält alle Bausteine aus Starter & Standard – inklusive flexibler Trainingsphasen-Anpassung und Wettkampfstrategie.

+
+
+ +

Wöchentliche Beratungsgespräche

+

Engmaschiges Coaching im 7-Tage-Rhythmus, um deine Ernährung, Regeneration und Verdauung unter hoher Belastung kontinuierlich zu optimieren.

+
+
+ +

Individuelle Supplement-Empfehlung

+

Wissenschaftlich fundierte Feinabstimmung von Nahrungsergänzungsmitteln (z. B. Magnesium, Omega-3, Aminosäuren), genau abgestimmt auf deine Blutwerte und Trainingsziele.

+
+
+ +

Wettkampftag-Support & Prio-Support

+

Direkter Check-in vor dem Start & nach dem Ziel. Zudem genießt du priorisierte Antworten auf all deine Fragen im Chat.

+
+
+
+
+ + +
+
+
+ So läuft deine Betreuung +

Maximale Begleitung durch die Saison.

+

Keine Unsicherheiten mehr vor Schlüsseleinheiten oder Wettkämpfen. Wir begleiten dich intensiv durch jede Trainingswoche.

+ Unsere Berater kennenlernen +
+
    +
  1. Deep-Dive Analyse

    Wir analysieren deinen Ist-Zustand, Ernährungs-Gewohnheiten, Unverträglichkeiten und bei Bedarf Blutwerte.

    2. +
  2. Wöchentlicher Call

    Jede Woche besprechen wir Magenverträglichkeit, Energielevel und die optimale Verpflegung für die kommenden Einheiten.

    3. +
  3. Supplement-Grooming

    Gezielter Einsatz von Nahrungsergänzungsmitteln zur Beschleunigung der Regeneration ab 50.

    4. +
  4. Betreuung am Wettkampftag

    Finaler Verpflegungs-Check vor dem Start, Anpassungen bei Wetterumschwung und gezielte Refueling-Strategie nach dem Zielleinlauf.

    5. +
+
+
+ + +
+
+
+ Dein nächster Schritt +

Passt Premium zu dir?

+

Das Paket ist perfekt für dich, wenn du ambitionierte Ziele verfolgst, deine Regeneration maximieren möchtest und dir eine engmaschige 1:1-Betreuung wünschst.

+
    +
  • Du trainierst auf Mitteldistanz, Langdistanz oder anspruchsvolle Saison-Highlights.
    • +
  • Du möchtest eine fundierte Strategie für Nahrungsergänzungsmittel.
    • +
  • Du willst am Wettkampftag nichts dem Zufall überlassen.
    • +
+

Du suchst nach einer ruhigeren, monatlichen Begleitung?
Das Standard-Paket ansehen

+
+ +
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/html/paket-STANDARD.html b/html/paket-STANDARD.html new file mode 100644 index 0000000..fa6838a --- /dev/null +++ b/html/paket-STANDARD.html @@ -0,0 +1,198 @@ + + + + + + + Standard-Paket | Ernährungsberatung | Tri-hub + + + + + + + + + + + + + + +
+
+
+ +
+ TRI-HUB + Triathlon als sportliches Zuhause ab 50 +
+
+ + +
+ +
+ +
+
+ + +
+
+ Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See. +
+
+

Ernährungsberatung · Standard

+

Regelmäßig begleitet.Optimal vorbereitet.

+

Laufende Betreuung für Triathletinnen und Triathleten, die regelmäßig trainieren. Wir passen deine Ernährung flexibel an deine Trainingsphasen an und entwickeln deine Wettkampfstrategie.

+
+ Standard-Paket ansehen + Was ist enthalten? +
+
+
+
+
+ + +
+
+
Dein Paket
StandardLaufende Begleitung
+
Monatspreis
149 €pro Monat
+
Dein Plan
DynamischJe Trainingsphase angepasst
+
Persönlicher Kontakt
2x MonatlichPlus direkter Chat-Support
+
+
+ + +
+
+
+ Das steckt in Standard +

Gezielte Steuerung.
Für Training & Wettkampf.

+

Alle Leistungen aus dem Starter-Paket kombiniert mit engerer Betreuung, flexibler Plananpassung und konkreter Wettkampfvorbereitung.

+
+
+
+ +

Alles aus dem Starter-Paket

+

Du erhältst dein fundiertes Erstgespräch, die individuelle Bedarfsanalyse und vollen Zugriff auf aufbereitungsgerechte Beispielpläne.

+
+
+ +

Plan-Anpassung je Trainingsphase

+

Ob Grundlagenausdauer, intensive Intervalle oder Tapering: Dein Ernährungsplan wird dynamisch an deinen aktuellen Trainingsload angepasst.

+
+
+ +

Zwei Beratungsgespräche pro Monat

+

Alle zwei Wochen besprechen wir deinen Fortschritt, klären offene Fragen und nehmen Feinjustierungen an deiner Ernährung vor.

+
+
+ +

Wettkampf-Ernährungsstrategie & Chat

+

Wir erarbeiten ein genaues Timing für Kohlenhydrate, Flüssigkeit und Elektrolyte am Renntag. Bei Fragen erreichst du uns direkt per Chat.

+
+
+
+
+ + +
+
+
+ So läuft deine Betreuung +

Kontinuierlich am Ball bleiben.

+

Eine erfolgreiche Ernährung wächst mit deinem Training. Wir begleiten dich durch jede Saisonphase mit persönlicher Rücksprache.

+ Unsere Berater kennenlernen +
+
    +
  1. Analyse & Startplan

    Wir erfassen deine Ziele, Trainingspläne und bisherigen Gewohnheiten zur Erstellung deines Grundplans.

    2. +
  2. 14-tägige Abstimmung

    In zwei Monatsgesprächen prüfen wir Bekömmlichkeit, Energielevel und regenerative Fortschritte.

    3. +
  3. Wettkampffokus

    Vor deinen Hauptwettkämpfen simulieren wir das Race-Day-Nutri-Timing bereits im Training.

    4. +
  4. Direkter Chat-Draht

    Kurze Fragen vor oder nach dem Training klären wir unkompliziert zwischendurch im Chat.

    5. +
+
+
+ + +
+
+
+ Dein nächster Schritt +

Passt Standard zu dir?

+

Das Paket ist ideal für dich, wenn du aktiv auf ein Ziel hin trainierst und deine Ernährung gezielt als Leistungs- und Regeneationsfaktor nutzen möchtest.

+
    +
  • Du trainierst regelmäßig und suchst dynamische Anpassung.
    • +
  • Du willst deinen Wettkampftag ernährungstechnisch perfekt planen.
    • +
  • Du schätzt kurze Abstimmungswege per Chat und Video-Call.
    • +
+

Möchtest du eine Rundum-Betreuung inklusive Support am Wettkampftag?
Zum Premium-Paket wechseln

+
+ +
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/html/paket-starter.html b/html/paket-starter.html new file mode 100644 index 0000000..c387558 --- /dev/null +++ b/html/paket-starter.html @@ -0,0 +1,197 @@ + + + + + + + Starter-Paket | Ernährungsberatung | Tri-hub + + + + + + + + + + + + + + +
+
+
+ +
+ TRI-HUB + Triathlon als sportliches Zuhause ab 50 +
+
+ + +
+ +
+ +
+
+ + +
+
+ Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See. +
+
+

Ernährungsberatung · Starter

+

Dein erster Schritt.Gut versorgt starten.

+

Du möchtest deine Ernährung bewusster auf dein Training abstimmen? Wir begleiten deinen Einstieg – mit einem persönlichen Gespräch, einem Plan für dich und konkreten Ideen für deinen Alltag.

+
+ Starter-Paket ansehen + Was ist enthalten? +
+
+
+
+
+ + +
+
+
Dein Paket
StarterFür deinen Einstieg
+
Monatspreis
79 €pro Monat
+
Dein Plan
IndividuellPassend zu deinem Alltag
+
Persönlicher Kontakt
MonatlichCheck-in per E-Mail
+
+
+ + +
+
+
+ Das steckt in Starter +

Eine gute Grundlage.
Für Training und Alltag.

+

Vier Bausteine helfen dir dabei, deine Ernährungsgewohnheiten besser zu verstehen und erste Schritte umzusetzen.

+
+
+
+ +

Erstgespräch & Bedarfsanalyse

+

Wir sprechen über deine Ziele, deinen Trainingsalltag und deine bisherigen Gewohnheiten. So finden wir heraus, wo du ansetzen kannst.

+
+
+ +

Individueller Ernährungsplan

+

Dein Plan orientiert sich an dir: an deinem Training, deinen Vorlieben und dem, was sich in deinem Alltag umsetzen lässt.

+
+
+ +

Monatliches Check-in per E-Mail

+

Du kannst deine Erfahrungen und Fragen mit uns teilen. Gemeinsam schauen wir darauf, wie es dir mit deinem Plan geht.

+
+
+ +

Zugang zu Beispielplänen

+

Beispiele geben dir Orientierung und Ideen für Mahlzeiten. Du bekommst Anregungen, die du auf deinen eigenen Alltag übertragen kannst.

+
+
+
+
+ + +
+
+
+ So beginnt deine Beratung +

Ein Schritt nach dem anderen.

+

Du musst noch nicht auf alles eine Antwort haben. Bring deine Fragen mit – wir finden gemeinsam einen passenden Einstieg.

+ Unsere Berater kennenlernen +
+
    +
  1. Kontakt aufnehmen

    Schreib uns, dass du dich für das Starter-Paket interessierst, und erzähle kurz von deinem Ziel.

    2. +
  2. Gemeinsam hinschauen

    Im Erstgespräch besprechen wir deinen Bedarf und deine aktuellen Ernährungsgewohnheiten.

    3. +
  3. Im Alltag starten

    Mit deinem individuellen Plan und den Beispielplänen setzt du die ersten Schritte um.

    4. +
  4. In Verbindung bleiben

    Beim monatlichen Check-in per E-Mail ist Raum für deine Erfahrungen und Fragen.

    5. +
+
+
+ + +
+
+
+ Dein nächster Schritt +

Passt Starter zu dir?

+

Das Paket ist für dich gedacht, wenn du eine persönliche Grundlage für deine Ernährung suchst und mit überschaubaren Schritten beginnen möchtest.

+
    +
  • Du möchtest Ernährung und Training besser verbinden.
    • +
  • Du suchst Orientierung statt allgemeiner Ernährungstipps.
    • +
  • Du wünschst dir einen Plan und einen festen Kontaktpunkt.
    • +
+

Du möchtest eine engere Begleitung?
Standard und Premium vergleichen

+
+ +
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/html/paketfirst.html b/html/paketfirst.html new file mode 100644 index 0000000..21fec39 --- /dev/null +++ b/html/paketfirst.html @@ -0,0 +1,98 @@ +git + + + + + + Triathlon ab 50 – Tri-hub Coaching für Best Ager + + + + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/js/leistungen.js b/js/leistungen.js index eeb8360..091f651 100644 --- a/js/leistungen.js +++ b/js/leistungen.js @@ -110,25 +110,19 @@ document.addEventListener("DOMContentLoaded", async () => { body.appendChild(liste); - // 6. Button - const button = document.createElement("button"); - button.classList.add("paket-karte__cta"); - button.type = "button"; - button.textContent = "Paket wählen"; - button.dataset.paket = paket.dataPaket; - button.setAttribute("aria-pressed", "false"); + // 6. Button – Link zur Paketseite + const paketLinkMap = { + "starter": "html/paket-starter.html", + "standard": "html/paket-standard.html", + "premium": "html/paket-premium.html" + }; - button.addEventListener("click", () => { - grid.querySelectorAll(".paket-karte").forEach(andereKarte => { - andereKarte.classList.remove("paket-karte--ausgewaehlt"); - andereKarte.querySelector("button").setAttribute("aria-pressed", "false"); - }); - karte.classList.add("paket-karte--ausgewaehlt"); - button.setAttribute("aria-pressed", "true"); - document.dispatchEvent(new CustomEvent("paket:ausgewaehlt", { - detail: { paket: button.dataset.paket } - })); - }); + const paketLink = paketLinkMap[paket.dataPaket] || "#"; + const button = document.createElement("a"); + button.classList.add("paket-karte__cta"); + button.href = paketLink; + button.textContent = "Paket ansehen"; + button.setAttribute("role", "button"); body.appendChild(button); karte.appendChild(body); diff --git a/json/pakete.json b/json/pakete.json index 0be9231..5bdfd51 100644 --- a/json/pakete.json +++ b/json/pakete.json @@ -17,7 +17,7 @@ ], "badge": null, "empfohlen": false, - "dataPaket": "Starter" + "dataPaket": "starter" }, { "name": "STANDARD", @@ -33,7 +33,7 @@ ], "badge": "Beliebteste Wahl", "empfohlen": true, - "dataPaket": "STANDARD" + "dataPaket": "standard" }, { "name": "PREMIUM", @@ -49,7 +49,7 @@ ], "badge": null, "empfohlen": false, - "dataPaket": "PREMIUM" + "dataPaket": "premium" } ] } \ No newline at end of file