diff --git a/css/sections/hero.css b/css/sections/hero.css index fdd54bc..df2c1f1 100644 --- a/css/sections/hero.css +++ b/css/sections/hero.css @@ -9,7 +9,7 @@ #hero { --hero-mint: #56d9b1; /* helle Akzentvariante aus dem Prototyp */ --hero-line: rgb(255 255 255 / 0.11); - padding-block: clamp(2rem, 6svh, 4.5rem); /* überschreibt Sektionsabstand aus base.css */ + padding-block: clamp(1.5rem, 4svh, 3.5rem); /* überschreibt Sektionsabstand aus base.css */ min-height: calc(100svh - 4.5rem); /* ohne Scrollen sichtbar (minus Header) */ display: flex; align-items: center; @@ -112,22 +112,11 @@ color: var(--hero-mint); } -#hero .hero-note { - margin-top: 1.75rem; - font-size: 1rem; - color: var(--th-text-muted); -} - -#hero .hero-note span { - margin-right: 0.5rem; - color: var(--hero-mint); -} - /* ---------- Bild ---------- */ #hero .hero-visual { position: relative; margin: 0; - height: clamp(340px, 62svh, 560px); + height: clamp(320px, 52svh, 540px); border-radius: 15px; overflow: hidden; background: var(--th-bg-elevated); @@ -196,9 +185,56 @@ color: var(--hero-mint); } +/* ---------- 3 Vorteile unter dem Hero ---------- */ +#hero .hero-benefits { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin: 2.5rem 0 0; + padding: 1.5rem 0 0; + list-style: none; + border-top: 1px solid var(--hero-line); +} + +#hero .hero-benefits li { + display: flex; + gap: 1rem; + align-items: flex-start; +} + +#hero .hero-benefit-icon { + flex: 0 0 2.5rem; + display: flex; + align-items: center; + justify-content: center; + height: 2.5rem; + border-radius: 10px; + background: rgb(16 185 129 / 0.1); + color: var(--hero-mint); + font-size: 1.3rem; +} + +#hero .hero-benefits h2 { + margin: 0; + font-family: var(--th-font-body); + font-size: 1.125rem; + font-weight: 600; + line-height: 1.35; + letter-spacing: -0.01em; + color: var(--th-text); +} + +#hero .hero-benefits p { + margin: 0.3rem 0 0; + font-size: 1rem; + line-height: 1.55; + color: var(--th-text-muted); +} + /* ---------- Tablet ---------- */ @media (max-width: 1100px) { #hero .hero-grid { gap: 2rem; } + #hero .hero-benefits { gap: 1.25rem; } } /* ---------- Mobil: Text zuerst, Bild darunter ---------- */ @@ -220,6 +256,7 @@ #hero .hero-visual { height: 340px; } #hero figcaption { left: 1.25rem; bottom: 1.25rem; } #hero .hero-caption-text { font-size: 1.4rem; } + #hero .hero-benefits { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; } } @media (max-width: 390px) { diff --git a/ernaehrungsberatung.html b/ernaehrungsberatung.html index 9a3a3e3..f1fcf25 100644 --- a/ernaehrungsberatung.html +++ b/ernaehrungsberatung.html @@ -37,7 +37,8 @@ Branch: feature/US01-01-hero · Styles: css/sections/hero.css Nur innerhalb dieser
arbeiten. -->
-
+
+

@@ -55,7 +56,6 @@ So funktioniert’s

-

Persönlich. Alltagstauglich. Auf Augenhöhe.

@@ -70,6 +70,32 @@
+ + +
    +
  • + +
    +

    Energie gezielt einplanen

    +

    Mahlzeiten passend zu Ruhetagen, harten Einheiten und langen Ausfahrten.

    +
    +
  • +
  • + +
    +

    Regeneration mitdenken

    +

    Ernährung, die deinen Körper nach dem Training gezielt unterstützt.

    +
    +
  • +
  • + +
    +

    Im Alltag dranbleiben

    +

    Routinen, die zu Arbeit, Familie und deinen Vorlieben passen.

    +
    +
  • +
+