Bilder hinzugefügt und darstellung sowie Styling angepasst.

index.html

@@ -163,10 +163,26 @@
             }
 
             .hero {
+                position: relative;
+                isolation: isolate;
                 padding: 92px 0 82px;
                 border-bottom: 1px solid var(--line);
             }
 
+            .hero::before {
+                content: "";
+                position: absolute;
+                inset: 0 0 56px;
+                z-index: -1;
+                background:
+                    linear-gradient(
+                        180deg,
+                        rgba(8, 15, 21, 0.72),
+                        rgba(8, 15, 21, 0.84)
+                    ),
+                    url("/images/startseiter_hintergrund.jpeg") 38% center / cover no-repeat;
+            }
+
             .hero-grid {
                 display: grid;
                 grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
@@ -240,6 +256,7 @@
 
             .hero-card {
                 position: relative;
+                transform: translateX(80px);
                 min-height: 410px;
                 padding: 38px;
                 display: flex;
@@ -256,8 +273,8 @@
                     ),
                     linear-gradient(
                         145deg,
-                        rgba(255, 255, 255, 0.075),
+                        rgba(13, 19, 31, 0.78),
-                        rgba(255, 255, 255, 0.025)
+                        rgba(13, 19, 31, 0.84)
                     );
                 box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
             }
@@ -274,6 +291,7 @@
                 box-shadow:
                     0 0 0 34px rgba(83, 213, 205, 0.035),
                     0 0 0 68px rgba(83, 213, 205, 0.02);
+                pointer-events: none;
             }
 
             .hero-card-mark {
@@ -296,6 +314,11 @@
                 color: var(--muted);
             }
 
+            .hero-card > div {
+                position: relative;
+                z-index: 1;
+            }
+
             .section {
                 padding: 96px 0;
             }
@@ -375,6 +398,26 @@
                 font-size: clamp(2.5rem, 5vw, 4.7rem);
             }
 
+            .knowledge-image-frame {
+                width: 100%;
+                transform: translateX(-18px);
+                margin-top: 28px;
+                padding: 9px;
+                overflow: hidden;
+                border: 1px solid rgba(248, 250, 252, 0.18);
+                border-radius: 22px;
+                background: linear-gradient(145deg, #273135, #151d22);
+                box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+            }
+
+            .knowledge-image-frame img {
+                display: block;
+                width: 100%;
+                aspect-ratio: 2.58 / 1;
+                border-radius: 14px;
+                object-fit: cover;
+            }
+
             .knowledge-copy {
                 color: var(--muted);
                 line-height: 1.85;
@@ -692,6 +735,7 @@
 
                 .hero-card {
                     min-height: 330px;
+                    transform: none;
                 }
             }
 
@@ -879,6 +923,13 @@
                         <h2 style="font-family: &quot;Inter&quot;, sans-serif">
                             Wissen,<br />das dich<br />weiterbringt.
                         </h2>
+                        <div class="knowledge-image-frame">
+                            <img
+                                src="/images/exttraBild.jpeg"
+                                alt="Ergänzendes Bild zur Ernährungsberatung"
+                                loading="lazy"
+                            />
+                        </div>
                     </div>
 
                     <div>

src/features/angebote/angebotsuebersicht.js

@@ -15,9 +15,24 @@ export function renderAngebotsuebersicht() {
             ? `<span class="package-highlight">${pkg.highlight}</span>`
             : "";
 
-        const cardHtml = `
+        const packageImage = {
-      <div class="package-card">
+            "ernaehrung-starter": {
+                src: "/images/Starter_bild.webp",
+                alt: "Triathlon-Einsteiger im Gespräch mit ihrem Coach am See",
+            },
+            "ernaehrung-standard": {
+                src: "/images/standard_bild.webp",
+                alt: "Triathlet im Radtrikot bespricht sein Training mit dem Coach",
+            },
+            "ernaehrung-premium": {
+                src: "/images/premium_bild.webp",
+                alt: "Triathlon-Athleten planen gemeinsam am Seeufer",
+            },
+        }[pkg.id];
 
+        const cardHtml = `
+      <article class="package-card">
+        <img class="package-image" src="${packageImage.src}" alt="${packageImage.alt}" loading="lazy" />
         <div class="package-type-container">
           <span class="package-type">${pkg.type}</span>
           ${highlightHtml}
@@ -43,7 +58,7 @@ export function renderAngebotsuebersicht() {
 
         <a href="/paket-details.html?id=${pkg.id}" class="package-btn">${pkg.buttonText} <span aria-hidden="true">→</span></a>
 
-      </div>
+      </article>
     `;
 
         container.innerHTML += cardHtml;

src/styles/packages.css

@@ -72,6 +72,15 @@
     display: flex;
     flex-direction: column;
 }
+.package-image {
+    display: block;
+    width: 100%;
+    aspect-ratio: 1.42 / 1;
+    margin: 0 0 1.5rem;
+    border: 1px solid #f8fafc1f;
+    border-radius: 1.1rem;
+    object-fit: cover;
+}
 .package-type-container {
     display: flex;
     flex-wrap: wrap;