US 04-01: Fehler in der Produktübersicht behoben

Platzhalter durch Beratungstexte ersetzt, neue Ernährungsbilder ergänzt und die Bilddarstellung sowie Textfarben angepasst. Den auskommentierten Platzhalter-Footer entfernt.

css/produktuebersicht.css

@@ -118,8 +118,15 @@
 }
 
 .produktuebersicht .hero__image {
-    object-fit: cover;
+    inset: 0 0 auto auto;
-    object-position: center 42%;
+    width: auto;
+    max-width: 94%;
+    height: 94%;
+    object-fit: contain;
+    object-position: right top;
+    mask-image: linear-gradient(to right, transparent, #000 18%),
+        linear-gradient(to bottom, #000 82%, transparent);
+    mask-composite: intersect;
 }
 
 .produktuebersicht .hero::after {
@@ -150,7 +157,7 @@
     align-items: center;
     gap: 12px;
     margin-bottom: 26px;
-    color: #4597A3;
+    color: var(--text-muted);
     font-size: 11px;
     font-weight: 650;
     letter-spacing: 0.16em;
@@ -166,6 +173,7 @@
 }
 
 .produktuebersicht h1 {
+    color: var(--text-primary);
     max-width: 100%;
     font-size: clamp(42px, 4.9vw, 88px);
     font-weight: 550;
@@ -178,7 +186,7 @@
 .produktuebersicht h1 span {
     display: block;
     margin-top: 8px;
-    color: var(--accent);
+    color: var(--text-primary);
 }
 
 .produktuebersicht .hero__description {
@@ -283,10 +291,6 @@
 }
 
 @media (max-width: 1100px) {
-    .produktuebersicht .hero__image {
-        object-position: 80% center;
-    }
-
     .produktuebersicht .hero::after {
         background:
             linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
@@ -334,7 +338,13 @@
     }
 
     .produktuebersicht .hero__image {
-        object-position: 85% center;
+        inset: 0;
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 60% bottom;
+        mask-image: none;
     }
 
     .produktuebersicht .hero::after {

index.html

@@ -38,57 +38,46 @@
 
             <div class="produktuebersicht__main">
                 <div class="hero">
-                    <img class="hero__image" src="images/hero-triathlon.webp"
+                    <img class="hero__image" src="images/hero-nutrition.png"
-                        alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
+                        alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
-                        height="1080" fetchpriority="high">
+                        height="1024" fetchpriority="high">
 
                     <div class="container hero__inner">
                         <div class="hero__content">
-                            <p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
+                            <p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
                             <h1 id="hero-title">
-                                Überschrift. Weitere Zeile.
+                                Dein Training hat einen Plan.
-                                <span>Akzentzeile.</span>
+                                <span>Deine Ernährung auch?</span>
                             </h1>
                             <p class="hero__description">
-                                Hier folgt eine kurze Beschreibung der Ernährungsberatung.
+                                Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
-                                Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
-                                sobald die Inhalte vorliegen.
                             </p>
                         </div>
 
                         <div class="hero__details">
-                            <ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
+                            <ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">01</span>
-                                    <p>Erster Vorteil <span>Text folgt</span></p>
+                                    <p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
                                 </li>
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">02</span>
-                                    <p>Zweiter Vorteil <span>Text folgt</span></p>
+                                    <p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
                                 </li>
                                 <li>
                                     <span class="benefits__number" aria-hidden="true">03</span>
-                                    <p>Dritter Vorteil <span>Text folgt</span></p>
+                                    <p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</span></p>
                                 </li>
                             </ul>
 
                             <div class="hero__caption">
-                                <p class="hero__caption-label">Bildunterschrift folgt</p>
+                                <p class="hero__caption-label">Ernährung für deinen Sport</p>
-                                <p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
+                                <p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            <!-- Vorläufig ausgeblendet, bis die endgültigen Texte vorliegen.
-            <footer>
-                <div class="container site-footer__inner">
-                    <p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
-                    <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
-                </div>
-            </footer>
-            -->
         </section>
 
         <!-- Vincent: Leistungsübersicht -->
@@ -207,7 +196,7 @@
                 <div class="container">
                     <div class="footer-grid">
                         <div class="footer-brand">
-                            <a class="logo" href="https://tri-hub.de/">tri<span>-hub</span></a>
+                            <a class="logo" href="https://tri-hub.de/">Tri<span>-hub</span></a>
                             <p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
                                 Ernährungsberatung.</p>
                         </div>