From be3ad0b04e27abfd9683ccd80d44e7ea7ae7b920 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Feb 2026 16:48:05 -0800
Subject: [PATCH] Polish pass: improve title sizing, spacing, and responsive
 consistency

- Bump h2 clamp for more presence on mid-viewports
- Shorten Angebot h2 to "Mein Angebot" (intro text provides full context)
- Widen nav link gap and bump font size for better readability
- Add responsive clamp to hero tagline
- Change about portrait from 1:1 to 3:4 aspect ratio
- Add underline decoration to process-title for visual consistency
- Increase pricing-value font size for emphasis
- Add min-height to testimonial cards for even heights in carousel
- Reduce hero image min-height for shorter viewports
- Add responsive overrides for coaching-card padding and about-img width

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html |  2 +-
 styles.css | 42 ++++++++++++++++++++++++++++++++----------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 8f38c5e..c10b2d3 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
     <!-- Angebot Section -->
     <section id="angebot" class="section angebot">
         <div class="container">
-            <h2 class="section-title section-title-center">Angebot für Bewusstseinsentwicklung und Selbstheilung</h2>
+            <h2 class="section-title section-title-center">Mein Angebot</h2>
 
             <div class="angebot-intro">
                 <div class="rhetorical-questions">
diff --git a/styles.css b/styles.css
index e09982b..68ed3a0 100644
--- a/styles.css
+++ b/styles.css
@@ -102,7 +102,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
+h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
 h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
 
 p {
@@ -235,12 +235,12 @@ p:last-child {
 .nav-menu {
     display: flex;
     list-style: none;
-    gap: var(--spacing-sm);
+    gap: 1.5rem;
 }
 
 .nav-menu a {
     color: var(--color-text);
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     font-weight: 400;
     padding: 0.5rem 0;
     position: relative;
@@ -316,7 +316,7 @@ p:last-child {
 
 .hero-tagline {
     font-family: var(--font-heading);
-    font-size: 1.5rem;
+    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
     font-style: italic;
     color: var(--color-text-light);
     margin-bottom: var(--spacing-md);
@@ -325,7 +325,7 @@ p:last-child {
 .hero-image {
     position: relative;
     height: 100%;
-    min-height: 500px;
+    min-height: 400px;
 }
 
 .hero-img {
@@ -367,7 +367,7 @@ p:last-child {
     width: 100%;
     max-width: 400px;
     height: auto;
-    aspect-ratio: 1/1;
+    aspect-ratio: 3/4;
     object-fit: cover;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
@@ -442,8 +442,18 @@ p:last-child {
 /* Process Timeline */
 .process-title {
     text-align: center;
-    font-size: 1.5rem;
+    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
     margin-bottom: var(--spacing-md);
+    position: relative;
+}
+
+.process-title::after {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 2px;
+    background: var(--color-secondary);
+    margin: var(--spacing-sm) auto 0;
 }
 
 .process-timeline {
@@ -515,7 +525,7 @@ p:last-child {
     max-width: 800px;
     margin: 0 auto var(--spacing-md);
     background: var(--color-white);
-    padding: var(--spacing-md);
+    padding: var(--spacing-md) 2.5rem;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
     border-left: 4px solid var(--color-secondary);
@@ -562,8 +572,9 @@ p:last-child {
 .pricing-value {
     display: block;
     font-family: var(--font-heading);
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     font-weight: 600;
+    letter-spacing: 0.5px;
 }
 
 .pricing-note {
@@ -636,6 +647,7 @@ p:last-child {
 
 .testimonial-card {
     flex: 0 0 calc((100% - 48px) / 3);
+    min-height: 300px;
     background: var(--color-bg);
     padding: var(--spacing-md);
     border-radius: var(--radius-md);
@@ -1064,10 +1076,14 @@ p:last-child {
     }
 
     .hero-image {
-        min-height: 350px;
+        min-height: 300px;
         order: -1;
     }
 
+    .coaching-card {
+        padding: var(--spacing-md);
+    }
+
     .about-grid {
         grid-template-columns: 1fr;
     }
@@ -1095,6 +1111,11 @@ p:last-child {
 
     .testimonial-card {
         flex: 0 0 calc((100% - 24px) / 2);
+        min-height: 260px;
+    }
+
+    .about-img {
+        max-width: 320px;
     }
 }
 
@@ -1175,6 +1196,7 @@ p:last-child {
 @media (max-width: 640px) {
     .testimonial-card {
         flex: 0 0 100%;
+        min-height: auto;
     }
 
     .process-timeline::before {