From 69b0186adab7eb34e5dc08c7aef13141f26ee851 Mon Sep 17 00:00:00 2001 From: Kevin Kopp Date: Thu, 24 Sep 2026 17:41:16 +0200 Subject: [PATCH 1/2] US01-03: Ablauf in 4 Schritten mit Abschluss-Link zu den Angeboten --- css/sections/ablauf.css | 137 ++++++++++++++++++++++++++++++++++++++- ernaehrungsberatung.html | 44 ++++++++++++- 2 files changed, 176 insertions(+), 5 deletions(-) diff --git a/css/sections/ablauf.css b/css/sections/ablauf.css index 1d0e360..e68a53d 100644 --- a/css/sections/ablauf.css +++ b/css/sections/ablauf.css @@ -1,9 +1,142 @@ /* ========================================================= - US01-03: Ablauf sehen (+ Kontaktangaben) - Branch: feature/US01-03-ablauf + US01-03: Ablauf sehen + Branch: feature_US01-03 Nur Selektoren unter #ablauf verwenden. Farben/Schriften über var(--th-...) aus base.css. + Vorlage: Prototyp (Programmablauf) ========================================================= */ #ablauf { + --abl-mint: #56d9b1; + --abl-line: rgb(255 255 255 / 0.11); +} + +/* ---------- Überschrift ---------- */ +#ablauf .ablauf-heading { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 3.5rem; + margin-bottom: 2.75rem; +} + +#ablauf .ablauf-eyebrow { + margin: 0; + font-size: 0.875rem; + font-weight: 650; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--abl-mint); +} + +#ablauf h2 { + margin: 0.9rem 0 0; + font-size: clamp(2.2rem, 3.4vw, 2.8rem); + font-weight: 400; + line-height: 1.12; + letter-spacing: -0.03em; +} + +#ablauf .ablauf-heading > p { + max-width: 24rem; + margin: 0; + color: var(--th-text-muted); +} + +/* ---------- Schritte ---------- */ +#ablauf .steps { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + margin: 0; + padding: 0; + list-style: none; +} + +#ablauf .step-number { + display: block; + margin-bottom: 1.4rem; + padding: 0.5rem 0 1.1rem; + border-bottom: 1px solid var(--abl-line); + font-family: var(--th-font-display); + font-size: 2rem; + line-height: 1; + color: var(--abl-mint); + position: relative; +} + +/* grüner Fortschrittsstrich unter der Nummer zeigt die Reihenfolge */ +#ablauf .step-number::after { + content: ""; + position: absolute; + left: 0; + bottom: -1px; + width: 2.5rem; + height: 2px; + background: var(--th-accent); +} + +#ablauf .step h3 { + margin: 0 0 0.75rem; + font-family: var(--th-font-body); + font-size: 1.25rem; + font-weight: 600; + line-height: 1.3; +} + +#ablauf .step p { + margin: 0; + color: var(--th-text-muted); +} + +/* ---------- Abschluss ---------- */ +#ablauf .process-end { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + margin-top: 2.75rem; + padding-top: 1.9rem; + border-top: 1px solid var(--abl-line); +} + +#ablauf .process-end p { + margin: 0; + font-family: var(--th-font-display); + font-size: 1.45rem; + font-style: italic; + color: #d3d7e1; +} + +#ablauf .process-link { + display: inline-flex; + align-items: center; + gap: 0.75rem; + min-height: 2.75rem; + font-size: 1.125rem; + font-weight: 600; + color: var(--th-text-soft); + white-space: nowrap; +} + +#ablauf .process-link:hover { + color: var(--abl-mint); +} + +/* ---------- Tablet: 2 × 2 ---------- */ +@media (max-width: 1100px) { + #ablauf .ablauf-heading { gap: 2rem; } + #ablauf .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; } +} + +/* ---------- Mobil: untereinander ---------- */ +@media (max-width: 760px) { + #ablauf .ablauf-heading { display: block; margin-bottom: 2rem; } + #ablauf .ablauf-heading > p { max-width: none; margin-top: 1.25rem; } + #ablauf .process-end { display: block; } + #ablauf .process-link { margin-top: 1rem; } +} + +@media (max-width: 560px) { + #ablauf .steps { grid-template-columns: 1fr; gap: 1.75rem; } } diff --git a/ernaehrungsberatung.html b/ernaehrungsberatung.html index 1eb3fdb..ddbdd38 100644 --- a/ernaehrungsberatung.html +++ b/ernaehrungsberatung.html @@ -216,11 +216,49 @@ -
- +
+ +
+
+

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

    Schritt 1: Dich kennenlernen

    +

    Wir besprechen deine Ziele, deinen Alltag und deine sportliche Ausgangslage.

    +
    2. +
  2. + +

    Schritt 2: Gewohnheiten verstehen

    +

    Ein Ernährungsprotokoll macht sichtbar, was bereits passt und wo du ansetzen kannst.

    +
    3. +
  3. + +

    Schritt 3: Deinen Weg planen

    +

    Du erhältst konkrete Empfehlungen – je nach Paket ergänzt um einen individuellen Ernährungsrahmen.

    +
    4. +
  4. + +

    Schritt 4: Umsetzen & anpassen

    +

    Du erprobst die Empfehlungen. In Standard und Premium begleiten Feedback und Anpassungen deinen Weg.

    +
    5. +
+ +
+

Der beste Plan ist der, der in dein Leben passt.

+ Dein Angebot entdecken +
+ +
From 7d732e0937a7a92ae8a8c4182e018d356d202ae8 Mon Sep 17 00:00:00 2001 From: Kevin Kopp Date: Thu, 24 Sep 2026 17:41:39 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Fix=20US01-02:=20Paketkarten=20laufen=20bei?= =?UTF-8?q?=20Tablet-Breite=20nicht=20mehr=20=C3=BCber?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/sections/angebote.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/css/sections/angebote.css b/css/sections/angebote.css index b8d8617..462b889 100644 --- a/css/sections/angebote.css +++ b/css/sections/angebote.css @@ -56,7 +56,7 @@ /* ---------- Paketkarten ---------- */ #angebote .package-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,…) verhindert Überlaufen */ gap: 1.5rem; } @@ -358,6 +358,11 @@ #angebote .bonus-button { margin-left: 0; } } +/* ---------- schmale Tablets: 2 Karten nebeneinander ---------- */ +@media (max-width: 1000px) { + #angebote .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + /* ---------- Mobil ---------- */ @media (max-width: 760px) { #angebote .angebote-heading { display: block; }