aligned

css/leistungen.css

@@ -78,12 +78,13 @@
     background: var(--background-panel);
     border: 1px solid rgba(248, 250, 252, 0.08);
     border-radius: 14px;
-    padding: 2rem 1.75rem;
+    padding: 0; /* Entfernt, damit das Bild oben bündig anliegt */
+    overflow: hidden;
     position: relative;
 }
 
 .pakete .paket-karte--empfohlen {
-    border-color: var(--accent);
+    border-color: 1px solid rgba(248, 250, 252, 0.08);
     box-shadow: 0 0 0 1px var(--accent-soft);
 }
 
@@ -97,13 +98,42 @@
     background: var(--accent-soft);
     color: var(--accent);
     border: 1px solid var(--accent);
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    padding: 0.35rem 0.9rem;
+    padding: 0.25rem 0.65rem;
     border-radius: 999px;
-    margin: 0 0 1rem;
+    margin: 0; /* Kein Abstand nach unten, da er jetzt im Header neben der Überschrift steht */
+    line-height: 1;
+}
+.pakete .paket-karte__image-wrapper {
+    width: 100%;
+    height: 180px;
+    overflow: hidden;
+    position: relative;
+}
+
+.pakete .paket-karte__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.pakete .paket-karte__body {
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.pakete .paket-karte__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+    flex-wrap: wrap;
 }
 
 .pakete .paket-karte__name {
@@ -171,8 +201,8 @@
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-primary);
-    background: var(--accent);
+    background: var(--background);
-    border: none;
+    border: 1px solid rgba(248, 250, 252, 0.08);
     border-radius: 8px;
     padding: 0.85rem 1rem;
     cursor: pointer;

js/leistungen.js

@@ -27,11 +27,11 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     grid.innerHTML = "";
 
-    // Mappe Bild-Platzhalter zu den Paketen
+    // Platzhalter-Pfade für die drei generierten Bilder
     const bilderMap = {
-        "Starter": "images/paket-starter.jpg",
+        "STARTER": "images/paket-starter.jpg",
         "STANDART": "images/paket-standard.jpg",
-        "Rundum Sorglos Paket": "images/paket-premium.jpg"
+        "PREMIUM": "images/paket-premium.jpg"
     };
 
     daten.pakete.forEach(paket => {
@@ -42,23 +42,23 @@ document.addEventListener("DOMContentLoaded", async () => {
             karte.classList.add("paket-karte--empfohlen");
         }
 
-        // --- 1. Bildbereich (Platzhalter) ---
+        // 1. Bild oben (Platzhalter)
-        const imgContainer = document.createElement("div");
+        const imgWrapper = document.createElement("div");
-        imgContainer.classList.add("paket-karte__image-wrapper");
+        imgWrapper.classList.add("paket-karte__image-wrapper");
-        
+
         const img = document.createElement("img");
         img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg";
         img.alt = `Vorschau ${paket.name}`;
         img.classList.add("paket-karte__image");
-        imgContainer.appendChild(img);
+        imgWrapper.appendChild(img);
-        
-        karte.appendChild(imgContainer);
 
-        // --- Content-Container für sauberes Layout ---
+        karte.appendChild(imgWrapper);
-        const content = document.createElement("div");
-        content.classList.add("paket-karte__content");
 
-        // --- 2. Header: Paketname + Badge nebeneinander ---
+        // Content-Container für die Texte & Abstände
+        const body = document.createElement("div");
+        body.classList.add("paket-karte__body");
+
+        // 2. Header: Paketname + Badge nebeneinander
         const header = document.createElement("div");
         header.classList.add("paket-karte__header");
 
@@ -74,9 +74,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             header.appendChild(badge);
         }
 
-        content.appendChild(header);
+        body.appendChild(header);
 
-        // --- 3. Preis ---
+        // 3. Preis
         const preis = document.createElement("p");
         preis.classList.add("paket-karte__preis");
 
@@ -90,15 +90,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         preis.appendChild(betrag);
         preis.appendChild(zeitraum);
-        content.appendChild(preis);
+        body.appendChild(preis);
 
-        // --- 4. Beschreibung ---
+        // 4. Beschreibung
         const beschreibung = document.createElement("p");
         beschreibung.classList.add("paket-karte__beschreibung");
         beschreibung.textContent = paket.beschreibung;
-        content.appendChild(beschreibung);
+        body.appendChild(beschreibung);
 
-        // --- 5. Leistungsliste ---
+        // 5. Leistungen
         const liste = document.createElement("ul");
         liste.classList.add("paket-karte__leistungen");
 
@@ -108,9 +108,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             liste.appendChild(punkt);
         });
 
-        content.appendChild(liste);
+        body.appendChild(liste);
 
-        // --- 6. Button ---
+        // 6. Button
         const button = document.createElement("button");
         button.classList.add("paket-karte__cta");
         button.type = "button";
@@ -130,8 +130,8 @@ document.addEventListener("DOMContentLoaded", async () => {
             }));
         });
 
-        content.appendChild(button);
+        body.appendChild(button);
-        karte.appendChild(content);
+        karte.appendChild(body);
 
         grid.appendChild(karte);
     });

json/pakete.json

@@ -5,7 +5,7 @@
   },
   "pakete": [
     {
-      "name": "Starter",
+      "name": "STARTER",
       "preis": 79,
       "zeitraum": "Monat",
       "beschreibung": "Für den Einstieg in eine bewusste Ernährung neben dem Training.",
@@ -36,7 +36,7 @@
       "dataPaket": "Ausdauer"
     },
     {
-      "name": "Rundum Sorglos Paket",
+      "name": "PREMIUM",
       "preis": 249,
       "zeitraum": "Monat",
       "beschreibung": "Volle Betreuung für ambitionierte Athletinnen und Athleten.",