From fdf1aba09e4b8dad0d1a9648300eb219a34e39bb Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeff@jeffemmett.com>
Date: Mon, 23 Feb 2026 10:51:14 +0000
Subject: [PATCH] Improve responsive design for all devices

Fix nav overflow with 8 links, add proper mobile hamburger menu with
scrollable dropdown, collapse all grids at correct breakpoints, tighten
spacing on mobile, prevent horizontal overflow, and improve touch targets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 styles.css | 165 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 154 insertions(+), 11 deletions(-)

diff --git a/styles.css b/styles.css
index 6d706ac..bb109a7 100644
--- a/styles.css
+++ b/styles.css
@@ -60,6 +60,7 @@
 
 html {
     scroll-behavior: smooth;
+    overflow-x: hidden;
 }
 
 body {
@@ -68,8 +69,10 @@ body {
     line-height: 1.7;
     color: var(--color-text);
     background-color: var(--color-bg);
+    overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
 }
 
 img {
@@ -232,15 +235,16 @@ p:last-child {
 .nav-menu {
     display: flex;
     list-style: none;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
 }
 
 .nav-menu a {
     color: var(--color-text);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 400;
     padding: 0.5rem 0;
     position: relative;
+    white-space: nowrap;
 }
 
 .nav-menu a::after {
@@ -592,11 +596,13 @@ p:last-child {
     justify-content: center;
     gap: 0.75rem;
     font-size: 1.05rem;
+    text-align: left;
 }
 
 .pricing-item svg {
     width: 24px;
     height: 24px;
+    min-width: 24px;
     color: var(--color-primary);
     flex-shrink: 0;
 }
@@ -1130,6 +1136,8 @@ p:last-child {
 /* --------------------------------------------------------------------------
    Responsive Design
    -------------------------------------------------------------------------- */
+
+/* Tablet landscape / small desktop — nav + grids collapse */
 @media (max-width: 1024px) {
     .hero {
         grid-template-columns: 1fr;
@@ -1143,7 +1151,7 @@ p:last-child {
     }
 
     .hero-image {
-        min-height: 400px;
+        min-height: 350px;
         order: -1;
     }
 
@@ -1169,10 +1177,20 @@ p:last-child {
     }
 
     .vorteile-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .testimonials-grid {
         grid-template-columns: 1fr;
     }
+
+    .testimonial-card-long,
+    .testimonial-card-romansh {
+        grid-column: auto;
+    }
 }
 
+/* Tablet portrait — hamburger nav, single columns */
 @media (max-width: 768px) {
     .nav-menu {
         position: fixed;
@@ -1182,12 +1200,14 @@ p:last-child {
         background: var(--color-bg);
         flex-direction: column;
         padding: var(--spacing-md);
-        gap: var(--spacing-sm);
+        gap: 0;
         box-shadow: var(--shadow-md);
         transform: translateY(-100%);
         opacity: 0;
         visibility: hidden;
         transition: all var(--transition-base);
+        max-height: calc(100vh - 60px);
+        overflow-y: auto;
     }
 
     .nav-menu.active {
@@ -1196,6 +1216,20 @@ p:last-child {
         visibility: visible;
     }
 
+    .nav-menu li {
+        border-bottom: 1px solid var(--color-bg-alt);
+    }
+
+    .nav-menu li:last-child {
+        border-bottom: none;
+    }
+
+    .nav-menu a {
+        display: block;
+        padding: 0.75rem 0;
+        font-size: 1rem;
+    }
+
     .nav-toggle {
         display: flex;
     }
@@ -1212,17 +1246,53 @@ p:last-child {
         transform: rotate(-45deg) translate(5px, -5px);
     }
 
+    .hero-image {
+        min-height: 250px;
+    }
+
+    .hero-tagline {
+        font-size: 1.25rem;
+    }
+
     .wissen-grid {
         grid-template-columns: 1fr;
     }
 
-    .testimonials-grid {
+    .wissen-card-wide {
+        grid-column: auto;
+    }
+
+    .vorteile-grid {
         grid-template-columns: 1fr;
     }
 
-    .testimonial-card-long,
-    .testimonial-card-romansh {
-        grid-column: auto;
+    .quanten-block > h3 {
+        font-size: 1.25rem;
+    }
+
+    .behandlung-step,
+    .quanten-step {
+        gap: var(--spacing-sm);
+    }
+
+    .step-number {
+        width: 40px;
+        height: 40px;
+        font-size: 1.1rem;
+    }
+
+    .pricing-item {
+        font-size: 0.95rem;
+        justify-content: flex-start;
+    }
+
+    .angebot-question {
+        font-size: 1.05rem;
+        padding-left: 1rem;
+    }
+
+    .tools-list {
+        grid-template-columns: 1fr 1fr;
     }
 
     .footer-content {
@@ -1234,20 +1304,93 @@ p:last-child {
     .footer-links {
         flex-wrap: wrap;
         justify-content: center;
+        gap: var(--spacing-sm);
     }
 }
 
+/* Mobile — tighter spacing, full-width everything */
 @media (max-width: 480px) {
     :root {
-        --spacing-md: 1.5rem;
-        --spacing-lg: 3rem;
-        --spacing-xl: 4rem;
+        --spacing-md: 1.25rem;
+        --spacing-lg: 2.5rem;
+        --spacing-xl: 3.5rem;
+    }
+
+    .container {
+        padding: 0 var(--spacing-sm);
     }
 
     .btn {
         padding: 0.75rem 1.5rem;
         font-size: 0.85rem;
     }
+
+    .hero-image {
+        min-height: 200px;
+    }
+
+    .about-text p:first-child::first-letter {
+        font-size: 2.5rem;
+    }
+
+    .behandlung-step,
+    .quanten-step {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .step-content {
+        width: 100%;
+    }
+
+    .alltagstools {
+        padding: var(--spacing-sm);
+    }
+
+    .tools-list {
+        grid-template-columns: 1fr;
+    }
+
+    .pricing-card {
+        padding: var(--spacing-sm);
+    }
+
+    .pricing-item {
+        font-size: 0.9rem;
+        gap: 0.5rem;
+    }
+
+    .testimonial-card {
+        padding: var(--spacing-sm);
+        padding-top: calc(var(--spacing-sm) + 1rem);
+    }
+
+    .testimonial-card::before {
+        font-size: 3rem;
+        top: 0;
+        left: 0.75rem;
+    }
+
+    .quanten-fazit {
+        padding: var(--spacing-sm);
+    }
+
+    .contact-form {
+        padding: var(--spacing-sm);
+    }
+
+    .workshop-content {
+        padding: var(--spacing-sm);
+    }
+
+    .footer-links {
+        gap: 0.5rem 1rem;
+    }
+
+    .footer-links a {
+        font-size: 0.8rem;
+    }
 }
 
 /* --------------------------------------------------------------------------