pakete Bilder eingefügt, Borderfarbe angepasst, texte aligned und CTA angepasst

js/leistungen.js

@@ -2,11 +2,11 @@
 // Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
 // damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.
 
+// US-01-02 Leistungsübersicht
 document.addEventListener("DOMContentLoaded", async () => {
     const section = document.getElementById("leistungen");
     if (!section) return;
 
-    // Integration: Der Datenpfad muss zum vorhandenen JSON-Ordner passen.
     let daten;
     try {
         const response = await fetch("json/pakete.json");
@@ -18,45 +18,65 @@ document.addEventListener("DOMContentLoaded", async () => {
         return;
     }
 
-    // Elemente aus dem HTML holen
     const titel = section.querySelector(".pakete__titel");
     const text = section.querySelector(".pakete__text");
     const grid = section.querySelector(".pakete__grid");
 
-    // Intro mit Daten aus JSON füllen
     titel.textContent = daten.intro.titel;
     text.textContent = daten.intro.text;
 
-    // Vorhandenen Inhalt entfernen
     grid.innerHTML = "";
 
-    // Für jedes Paket eine Karte erstellen
-    daten.pakete.forEach(paket => {
+    // Mappe Bild-Platzhalter zu den Paketen
+    const bilderMap = {
+        "Starter": "images/paket-starter.jpg",
+        "STANDART": "images/paket-standard.jpg",
+        "Rundum Sorglos Paket": "images/paket-premium.jpg"
+    };
 
-        // Artikel erstellen
+    daten.pakete.forEach(paket => {
         const karte = document.createElement("article");
         karte.classList.add("paket-karte");
 
-        // Empfohlenes Paket bekommt zusätzliche Klasse
         if (paket.empfohlen) {
             karte.classList.add("paket-karte--empfohlen");
         }
 
-        // Badge nur erstellen, wenn eines vorhanden ist
-        if (paket.badge) {
-            const badge = document.createElement("p");
-            badge.classList.add("paket-karte__badge");
-            badge.textContent = paket.badge;
-            karte.appendChild(badge);
-        }
+        // --- 1. Bildbereich (Platzhalter) ---
+        const imgContainer = document.createElement("div");
+        imgContainer.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);
+        
+        karte.appendChild(imgContainer);
+
+        // --- Content-Container für sauberes Layout ---
+        const content = document.createElement("div");
+        content.classList.add("paket-karte__content");
+
+        // --- 2. Header: Paketname + Badge nebeneinander ---
+        const header = document.createElement("div");
+        header.classList.add("paket-karte__header");
 
-        // Name
         const name = document.createElement("h3");
         name.classList.add("paket-karte__name");
         name.textContent = paket.name;
-        karte.appendChild(name);
+        header.appendChild(name);
 
-        // Preis
+        if (paket.badge) {
+            const badge = document.createElement("span");
+            badge.classList.add("paket-karte__badge");
+            badge.textContent = paket.badge;
+            header.appendChild(badge);
+        }
+
+        content.appendChild(header);
+
+        // --- 3. Preis ---
         const preis = document.createElement("p");
         preis.classList.add("paket-karte__preis");
 
@@ -70,15 +90,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         preis.appendChild(betrag);
         preis.appendChild(zeitraum);
-        karte.appendChild(preis);
+        content.appendChild(preis);
 
-        // Beschreibung
+        // --- 4. Beschreibung ---
         const beschreibung = document.createElement("p");
         beschreibung.classList.add("paket-karte__beschreibung");
         beschreibung.textContent = paket.beschreibung;
-        karte.appendChild(beschreibung);
+        content.appendChild(beschreibung);
 
-        // Leistungen
+        // --- 5. Leistungsliste ---
         const liste = document.createElement("ul");
         liste.classList.add("paket-karte__leistungen");
 
@@ -88,9 +108,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             liste.appendChild(punkt);
         });
 
-        karte.appendChild(liste);
+        content.appendChild(liste);
 
-        // Button
+        // --- 6. Button ---
         const button = document.createElement("button");
         button.classList.add("paket-karte__cta");
         button.type = "button";
@@ -98,7 +118,6 @@ document.addEventListener("DOMContentLoaded", async () => {
         button.dataset.paket = paket.dataPaket;
         button.setAttribute("aria-pressed", "false");
 
-        // Die Paketauswahl aus der ersten Version auch nach dem JSON-Rendering erhalten.
         button.addEventListener("click", () => {
             grid.querySelectorAll(".paket-karte").forEach(andereKarte => {
                 andereKarte.classList.remove("paket-karte--ausgewaehlt");
@@ -111,9 +130,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             }));
         });
 
-        karte.appendChild(button);
+        content.appendChild(button);
+        karte.appendChild(content);
 
-        // Karte ins Grid einfügen
         grid.appendChild(karte);
     });
-});
+});