From aad7588301ed0a8b151ba954a3f0793a97c030fe Mon Sep 17 00:00:00 2001 From: 3015418 <3015418@stud.th-mannheim.de> Date: Wed, 30 Sep 2026 14:38:44 +0200 Subject: [PATCH] Paket-Starter + css --- css/paketdetails.css | 266 ++++++++++++++++++++++++++++++++++++++++ html/paket-starter.html | 201 ++++++++++++++++++++++++++++++ 2 files changed, 467 insertions(+) create mode 100644 css/paketdetails.css create mode 100644 html/paket-starter.html diff --git a/css/paketdetails.css b/css/paketdetails.css new file mode 100644 index 0000000..bac39e5 --- /dev/null +++ b/css/paketdetails.css @@ -0,0 +1,266 @@ +/* Nur die neue Paketdetailseite; gemeinsame Styles bleiben unverändert. */ +.paket-detail { + --foreground: var(--text-primary); + --border: rgb(255 255 255 / 12%); + background: rgb(var(--background-rgb)); + color: var(--text-primary); +} + +.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; +} + +.paket-detail a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 5px; +} + +/* Hero mit Text auf dem bestehenden Bild. */ +.paket-detail .paket-detail__hero { + min-height: 580px; +} + +.paket-detail__hero .hero__image { + width: 78%; + max-width: none; + height: 100%; + object-fit: cover; + object-position: center 35%; +} + +.paket-detail__hero .hero__inner { + padding-block: 56px; +} + +.paket-detail__hero .hero__content { + width: min(100%, 740px); + padding-block: 12px; +} + +.paket-detail__hero h1 { + font-size: clamp(2.5rem, 4.4vw, 4.25rem); + font-weight: 600; + letter-spacing: -0.045em; +} + +.paket-detail__hero .hero__description { + max-width: 54ch; + font-size: 1.05rem; +} + +.paket-detail__actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 24px; + margin-top: 30px; +} + +/* Paketangaben und Leistungen. */ +.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); +} + +.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 und Preisübersicht. */ +.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__split .beratung-ablauf { + margin: 0; + gap: 32px; +} + +.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); +} + +.paket-detail .site-footer { + margin-top: 0; +} + +/* Schmale Ansichten. */ +@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: 700px) { + .paket-detail .paket-detail__hero { + min-height: auto; + } + + .paket-detail__hero .hero__image { + width: 100%; + object-position: 65% center; + } + + .paket-detail__hero .hero__inner { + padding-block: 40px; + } + + .paket-detail__actions { + align-items: flex-start; + flex-direction: column; + gap: 20px; + } + + .paket-detail__facts > div { + padding-left: 12px; + } + + .paket-detail__facts dd { + font-size: 1.1rem; + } +} diff --git a/html/paket-starter.html b/html/paket-starter.html new file mode 100644 index 0000000..e0ea7b1 --- /dev/null +++ b/html/paket-starter.html @@ -0,0 +1,201 @@ + + + + + + + Starter-Paket | Ernährungsberatung | Tri-hub + + + + + + + + + + + + + + + +
+
+
+ +
+ TRI-HUB + Triathlon als sportliches Zuhause ab 50 +
+
+ + +
+ +
+ +
+
+
+ Alle Ernährungspakete + STARTER +
+ + +
+
+ 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

+
+ +
+
+
+ + + +
+ + +