diff --git a/.DS_Store b/.DS_Store index 5a1f190..58eec41 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 index bac39e5..4e496c7 100644 --- a/css/paketdetails.css +++ b/css/paketdetails.css @@ -1,11 +1,158 @@ -/* Nur die neue Paketdetailseite; gemeinsame Styles bleiben unverändert. */ +/* ========================================================================== + Paketdetails CSS (Standalone) + Inhalt: Layout, Hero, Facts, Leistungen, Ablauf, Preise & Footer + ========================================================================== */ + .paket-detail { - --foreground: var(--text-primary); - --border: rgb(255 255 255 / 12%); - background: rgb(var(--background-rgb)); + /* 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; @@ -39,42 +186,110 @@ text-decoration: underline; } -.paket-detail a:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 5px; -} +/* ========================================================================== + Hero-Sektion + ========================================================================== */ -/* Hero mit Text auf dem bestehenden Bild. */ .paket-detail .paket-detail__hero { - min-height: 580px; + 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 */ .paket-detail__hero .hero__image { - width: 78%; - max-width: none; + position: absolute; + inset: 0; + width: 100%; height: 100%; object-fit: cover; - object-position: center 35%; + object-position: right top; /* Bildschwerpunkt rechts ausrichten */ + z-index: -2; +} + +.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 { - padding-block: 56px; + 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%, 740px); - padding-block: 12px; + width: min(100%, 720px); /* Textbereich kompakt halten */ + margin-block: auto; + padding-block: 24px 64px; } .paket-detail__hero h1 { - font-size: clamp(2.5rem, 4.4vw, 4.25rem); - font-weight: 600; - letter-spacing: -0.045em; + color: var(--text-primary); + max-width: 100%; + font-size: clamp(42px, 4.9vw, 88px); + font-weight: 550; + 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: 54ch; - font-size: 1.05rem; + max-width: 65ch; + margin-top: 30px; + color: #d1d7df; + font-size: clamp(16px, 1.15vw, 19px); + line-height: 1.85; } .paket-detail__actions { @@ -85,7 +300,10 @@ margin-top: 30px; } -/* Paketangaben und Leistungen. */ +/* ========================================================================== + Paketangaben / Facts + ========================================================================== */ + .paket-detail__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -124,6 +342,10 @@ color: var(--text-muted); } +/* ========================================================================== + Leistungen / Services + ========================================================================== */ + .paket-detail__services .box { box-shadow: none; } @@ -147,7 +369,10 @@ color: var(--text-muted); } -/* Ablauf und Preisübersicht. */ +/* ========================================================================== + Ablauf & Listen + ========================================================================== */ + .paket-detail__process { border-block: 1px solid var(--border); } @@ -167,11 +392,81 @@ font-size: clamp(1.9rem, 3.4vw, 2.7rem); } -.paket-detail__split .beratung-ablauf { +.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); @@ -220,11 +515,109 @@ color: var(--text-muted); } -.paket-detail .site-footer { - margin-top: 0; +/* ========================================================================== + 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; + } } -/* Schmale Ansichten. */ @media (max-width: 900px) { .paket-detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -236,18 +629,54 @@ } } +@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 .paket-detail__hero { - min-height: auto; - } - .paket-detail__hero .hero__image { + inset: 0; width: 100%; - object-position: 65% center; + max-width: 100%; + height: 100%; + object-fit: cover; + object-position: 60% bottom; + mask-image: none; } - .paket-detail__hero .hero__inner { - padding-block: 40px; + .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 { @@ -256,11 +685,17 @@ 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..f662741 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..344baf9 --- /dev/null +++ b/html/paket-PREMIUM.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/paket-STANDARD.html b/html/paket-STANDARD.html new file mode 100644 index 0000000..13b1243 --- /dev/null +++ b/html/paket-STANDARD.html @@ -0,0 +1,198 @@ + + + + + + + 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 · Standard

+

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.

+
+ Standard-Paket ansehen + Was ist enthalten? +
+
+
+
+
+ + +
+
+
Dein Paket
StandardFü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/paket-starter.html b/html/paket-starter.html index e0ea7b1..344baf9 100644 --- a/html/paket-starter.html +++ b/html/paket-starter.html @@ -6,20 +6,19 @@ Starter-Paket | Ernährungsberatung | Tri-hub - + + - - - +
@@ -47,12 +46,8 @@
-
- Alle Ernährungspakete - STARTER -
- +
Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See. @@ -70,7 +65,7 @@
- +
Dein Paket
StarterFür deinen Einstieg
@@ -80,6 +75,7 @@
+
@@ -112,7 +108,7 @@
- +
@@ -130,7 +126,7 @@
- +
@@ -162,7 +158,7 @@
- +