Responsive Paketbilder korrigiert und Menüfarbe angepasst

Paketbilder proportional mit oberer Ausrichtung dargestellt und eine zweispaltige Zwischenansicht ergänzt. Gespeicherte Farbanpassung des Menüknopfs übernommen.

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;
+    }
+}

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;