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>
This commit is contained in:
Jeff Emmett 2026-02-24 16:48:05 -08:00
parent 2efa606ea7
commit be3ad0b04e
2 changed files with 33 additions and 11 deletions

View File

@ -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">

View File

@ -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 {