From 7a2d0d8e26b0aacb2c61965a29c6cc81f5479872 Mon Sep 17 00:00:00 2001
From: 3015418 <3015418@stud.th-mannheim.de>
Date: Tue, 29 Sep 2026 17:42:03 +0200
Subject: [PATCH] =?UTF-8?q?Responsive=20Paketbilder=20korrigiert=20und=20M?=
 =?UTF-8?q?en=C3=BCfarbe=20angepasst?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Paketbilder proportional mit oberer Ausrichtung dargestellt und eine zweispaltige Zwischenansicht ergänzt. Gespeicherte Farbanpassung des Menüknopfs übernommen.
---
 css/leistungen.css | 17 ++++++++++++++---
 css/navigation.css |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/css/leistungen.css b/css/leistungen.css
index 6c13b0f..32322ff 100644
--- a/css/leistungen.css
+++ b/css/leistungen.css
@@ -67,7 +67,7 @@
 /* Kästchen nebeneinander, jede Karte für sich */
 .pakete .pakete__grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.5rem;
     align-items: stretch;
 }
@@ -75,6 +75,7 @@
 .pakete .paket-karte {
     display: flex;
     flex-direction: column;
+    min-width: 0;
     background: var(--background-panel);
     border: 1px solid rgba(248, 250, 252, 0.08);
     border-radius: 14px;
@@ -109,7 +110,9 @@
 }
 .pakete .paket-karte__image-wrapper {
     width: 100%;
-    height: 180px;
+    /* Proportional skalieren, damit beim Spaltenwechsel keine extremen Bildausschnitte entstehen. */
+    aspect-ratio: 3 / 2;
+    flex-shrink: 0;
     overflow: hidden;
     position: relative;
 }
@@ -118,6 +121,7 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
+    object-position: center top;
     display: block;
 }
 
@@ -221,10 +225,17 @@
 
 @media (max-width: 860px) {
     .pakete .pakete__grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
     .pakete .paket-karte--empfohlen {
         order: -1;
     }
 }
+
+@media (max-width: 620px) {
+    .pakete .pakete__grid {
+        grid-template-columns: minmax(0, 480px);
+        justify-content: center;
+    }
+}
diff --git a/css/navigation.css b/css/navigation.css
index b4cbe38..7d786c9 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -144,7 +144,7 @@
     border: 1px solid var(--border);
     border-radius: 10px;
     background: transparent;
-    color: var(--text-primary);
+    color: var(--text-muted);
     font: inherit;
     font-size: 26px;
     line-height: 1;