banner ausrichtung für alle 3 seiten behoben

css/paketdetails.css

@@ -211,7 +211,8 @@
     
 }
 
-/* Das Hintergrundbild erstreckt sich vollflächig über den gesamten Hero-Bereich */
+/* Das Hintergrundbild erstreckt sich vollflächig über den gesamten Hero-Bereich
+Das ist die Standardausrichtung für für die Banner */
 .paket-detail__hero .hero__image {
     position: absolute;
     inset: 0;
@@ -221,6 +222,20 @@
     object-position: right top; /* Bildschwerpunkt rechts ausrichten */
     z-index: -2;
 }
+/* Starter-Paket Ausrichtung*/
+body.paket-starter .hero__image {
+    object-position: right top; 
+}
+
+/* 2. Standard-Paket */
+body.paket-standard .hero__image {
+    object-position: 60% 30%; 
+}
+
+/* 3. Premium-Paket */
+body.paket-premium .hero__image {
+    object-position: 30% center; 
+}
 
 .paket-detail__hero::after {
     position: absolute;

html/paket-PREMIUM.html

@@ -17,7 +17,7 @@
     <script src="../js/navigation.js" defer></script>
 </head>
 
-<body>
+<body class="paket-premium">
     <!-- Gemeinsame Navigation -->
     <header class="site-navigation">
         <div class="site-navigation__bar">
@@ -50,10 +50,10 @@
             <!-- Einstieg / Hero -->
             <section class="produktuebersicht paket-detail__hero" aria-labelledby="paket-title">
                 <div class="hero">
-                    <img class="hero__image" src="../images/paket-starter.jpg" alt="Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See." width="1200" height="800" fetchpriority="high">
+                    <img class="hero__image" src="../images/paket-premium.jpg" alt="Zwei ältere Sportler besprechen ihren Ernährungsplan neben einem Fahrrad am See." width="1200" height="800" fetchpriority="high">
                     <div class="container hero__inner">
                         <div class="hero__content">
-                            <p class="hero__eyebrow">Ernährungsberatung · Starter</p>
+                            <p class="hero__eyebrow">Ernährungsberatung · Premium</p>
                             <h1 id="paket-title">Dein erster Schritt.<span>Gut versorgt starten.</span></h1>
                             <p class="hero__description">Du möchtest deine Ernährung bewusster auf dein Training abstimmen? Wir begleiten deinen Einstieg – mit einem persönlichen Gespräch, einem Plan für dich und konkreten Ideen für deinen Alltag.</p>
                             <div class="paket-detail__actions">

html/paket-STANDARD.html

@@ -17,7 +17,7 @@
     <script src="../js/navigation.js" defer></script>
 </head>
 
-<body>
+<body class="paket-standard">
     <!-- Gemeinsame Navigation -->
     <header class="site-navigation">
         <div class="site-navigation__bar">

html/paket-starter.html

@@ -17,7 +17,7 @@
     <script src="../js/navigation.js" defer></script>
 </head>
 
-<body>
+<body class="paket-starter">
     <!-- Gemeinsame Navigation -->
     <header class="site-navigation">
         <div class="site-navigation__bar">