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 --> <!-- Angebot Section -->
<section id="angebot" class="section angebot"> <section id="angebot" class="section angebot">
<div class="container"> <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="angebot-intro">
<div class="rhetorical-questions"> <div class="rhetorical-questions">

View File

@ -102,7 +102,7 @@ h1, h2, h3, h4, h5, h6 {
} }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); } 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); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { p {
@ -235,12 +235,12 @@ p:last-child {
.nav-menu { .nav-menu {
display: flex; display: flex;
list-style: none; list-style: none;
gap: var(--spacing-sm); gap: 1.5rem;
} }
.nav-menu a { .nav-menu a {
color: var(--color-text); color: var(--color-text);
font-size: 0.85rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
padding: 0.5rem 0; padding: 0.5rem 0;
position: relative; position: relative;
@ -316,7 +316,7 @@ p:last-child {
.hero-tagline { .hero-tagline {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.5rem; font-size: clamp(1.25rem, 2.5vw, 1.6rem);
font-style: italic; font-style: italic;
color: var(--color-text-light); color: var(--color-text-light);
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
@ -325,7 +325,7 @@ p:last-child {
.hero-image { .hero-image {
position: relative; position: relative;
height: 100%; height: 100%;
min-height: 500px; min-height: 400px;
} }
.hero-img { .hero-img {
@ -367,7 +367,7 @@ p:last-child {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
height: auto; height: auto;
aspect-ratio: 1/1; aspect-ratio: 3/4;
object-fit: cover; object-fit: cover;
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@ -442,8 +442,18 @@ p:last-child {
/* Process Timeline */ /* Process Timeline */
.process-title { .process-title {
text-align: center; text-align: center;
font-size: 1.5rem; font-size: clamp(1.3rem, 2.5vw, 1.75rem);
margin-bottom: var(--spacing-md); 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 { .process-timeline {
@ -515,7 +525,7 @@ p:last-child {
max-width: 800px; max-width: 800px;
margin: 0 auto var(--spacing-md); margin: 0 auto var(--spacing-md);
background: var(--color-white); background: var(--color-white);
padding: var(--spacing-md); padding: var(--spacing-md) 2.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-secondary); border-left: 4px solid var(--color-secondary);
@ -562,8 +572,9 @@ p:last-child {
.pricing-value { .pricing-value {
display: block; display: block;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.5rem; font-size: 1.75rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px;
} }
.pricing-note { .pricing-note {
@ -636,6 +647,7 @@ p:last-child {
.testimonial-card { .testimonial-card {
flex: 0 0 calc((100% - 48px) / 3); flex: 0 0 calc((100% - 48px) / 3);
min-height: 300px;
background: var(--color-bg); background: var(--color-bg);
padding: var(--spacing-md); padding: var(--spacing-md);
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -1064,10 +1076,14 @@ p:last-child {
} }
.hero-image { .hero-image {
min-height: 350px; min-height: 300px;
order: -1; order: -1;
} }
.coaching-card {
padding: var(--spacing-md);
}
.about-grid { .about-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -1095,6 +1111,11 @@ p:last-child {
.testimonial-card { .testimonial-card {
flex: 0 0 calc((100% - 24px) / 2); 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) { @media (max-width: 640px) {
.testimonial-card { .testimonial-card {
flex: 0 0 100%; flex: 0 0 100%;
min-height: auto;
} }
.process-timeline::before { .process-timeline::before {