From 45f5b8e9b64c309340ce4af4eb354ee1c421f0bf Mon Sep 17 00:00:00 2001 From: Vincent Laux <3019006@stud.hs-mannheim.de> Date: Tue, 29 Sep 2026 15:40:29 +0200 Subject: [PATCH] aligned --- css/leistungen.css | 44 +++++++++++++++++++++++++++++++++++------- js/leistungen.js | 48 +++++++++++++++++++++++----------------------- json/pakete.json | 4 ++-- 3 files changed, 63 insertions(+), 33 deletions(-) diff --git a/css/leistungen.css b/css/leistungen.css index 2fe3444..6c13b0f 100644 --- a/css/leistungen.css +++ b/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); - border: none; + background: var(--background); + border: 1px solid rgba(248, 250, 252, 0.08); border-radius: 8px; padding: 0.85rem 1rem; cursor: pointer; diff --git a/js/leistungen.js b/js/leistungen.js index f7f6143..a063631 100644 --- a/js/leistungen.js +++ b/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) --- - const imgContainer = document.createElement("div"); - imgContainer.classList.add("paket-karte__image-wrapper"); - + // 1. Bild oben (Platzhalter) + const imgWrapper = document.createElement("div"); + 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); - - karte.appendChild(imgContainer); + imgWrapper.appendChild(img); - // --- Content-Container für sauberes Layout --- - const content = document.createElement("div"); - content.classList.add("paket-karte__content"); + karte.appendChild(imgWrapper); - // --- 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); - karte.appendChild(content); + body.appendChild(button); + karte.appendChild(body); grid.appendChild(karte); }); diff --git a/json/pakete.json b/json/pakete.json index 482b2d5..7f1cd5d 100644 --- a/json/pakete.json +++ b/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.",