US01-01: 3 Vorteile mit Überschrift unter dem Hero ergänzt

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) {

ernaehrungsberatung.html

@@ -37,7 +37,8 @@
          Branch: feature/US01-01-hero  ·  Styles: css/sections/hero.css
          Nur innerhalb dieser <section> arbeiten. -->
     <section id="hero" aria-labelledby="hero-title">
-      <div class="container hero-grid">
+      <div class="container">
+      <div class="hero-grid">
 
         <div class="hero-copy">
           <h1 id="hero-title">
@@ -55,7 +56,6 @@
             <a class="hero-link" href="#ablauf">So funktioniert’s <span aria-hidden="true">→</span></a>
           </div>
 
-          <p class="hero-note"><span aria-hidden="true">✓</span> Persönlich. Alltagstauglich. Auf Augenhöhe.</p>
         </div>
 
         <figure class="hero-visual">
@@ -70,6 +70,32 @@
         </figure>
 
       </div>
+
+      <!-- 3 Vorteile mit Überschrift (Checkliste US01-01) -->
+      <ul class="hero-benefits" aria-label="Deine Vorteile auf einen Blick">
+        <li>
+          <span class="hero-benefit-icon" aria-hidden="true">↗</span>
+          <div>
+            <h2>Energie gezielt einplanen</h2>
+            <p>Mahlzeiten passend zu Ruhetagen, harten Einheiten und langen Ausfahrten.</p>
+          </div>
+        </li>
+        <li>
+          <span class="hero-benefit-icon" aria-hidden="true">↻</span>
+          <div>
+            <h2>Regeneration mitdenken</h2>
+            <p>Ernährung, die deinen Körper nach dem Training gezielt unterstützt.</p>
+          </div>
+        </li>
+        <li>
+          <span class="hero-benefit-icon" aria-hidden="true">✓</span>
+          <div>
+            <h2>Im Alltag dranbleiben</h2>
+            <p>Routinen, die zu Arbeit, Familie und deinen Vorlieben passen.</p>
+          </div>
+        </li>
+      </ul>
+      </div>
     </section>
     <!-- ========== /US01-01 ========== -->