/* ==========================================================================
Gabriele Perrer – Lebens- und Sozialberatung
Design-System: Farben, Typografie, Layout, Komponenten, Animationen
========================================================================== */
/* ---- Google Font: Dosis ---- */
/* Wird über + im jeder Seite geladen
(statt @import), damit der Font parallel zu dieser Datei geladen wird und nicht das
Rendering blockiert. */
:root {
/* Marken-Grundfarbe (vom Kunden vorgegeben) */
--bg: #3c3832;
--bg-alt: #322e29;
--bg-light: #f7f3ec;
--bg-light-alt: #efe8db;
/* Textfarben: 3-stufige Hierarchie (max. Kontrast → gedämpft → dezent für Meta/Labels) */
--text-on-dark: #ffffff;
--text-on-dark-muted: rgba(255, 255, 255, 0.72);
--text-on-dark-faint: rgba(255, 255, 255, 0.48);
--text-on-light: #322e29;
--text-on-light-muted: #6b6255;
--text-on-light-faint: rgba(50, 46, 41, 0.5);
/* Akzentfarbe: genau EINE klare Primärfarbe (Petrol) für Buttons, Fokus, Interaktion – 60-30-10 */
--accent: #2f6b6b;
--accent-light: #5a9494;
--accent-dark: #1e4c4c;
--accent-ring: rgba(47, 107, 107, 0.32);
--line: rgba(255,255,255, 0.14);
--line-light: rgba(50, 46, 41, 0.12);
--shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
--shadow-soft: 0 10px 30px rgba(60, 56, 50, 0.12);
/* HIG "Deference": subtle elevation shadow used instead of bold/colored borders on hover/focus states */
--shadow-elevated: 0 20px 46px rgba(0, 0, 0, 0.32);
--shadow-elevated-light: 0 18px 40px rgba(60, 56, 50, 0.16);
/* HIG "Depth": soft, organic corner radii (rounded-2xl / rounded-3xl equivalent) */
--radius: 28px;
--radius-sm: 16px;
--font: 'Dosis', system-ui, -apple-system, 'Segoe UI', sans-serif;
--maxw: 1180px;
--maxw-header: 1300px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---- Reset ---- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text-on-dark);
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
/* Safety net for long German compound words (e.g. "Tiefenentspannungstechniken") inside
narrow flex/grid tracks on small screens: break them rather than overflowing the viewport. */
overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 48px);
}
section { position: relative; }
.section-pad { padding: clamp(64px, 10vw, 128px) 0; }
.section-pad-sm { padding: clamp(48px, 7vw, 88px) 0; }
.bg-dark { background: var(--bg); color: var(--text-on-dark); }
.bg-dark-alt { background: var(--bg-alt); color: var(--text-on-dark); }
/* Petrol-Variante: kombiniert mit .bg-dark für die richtigen Text-/Kicker-Farben, ersetzt nur den Hintergrund */
.bg-accent { background: linear-gradient(140deg, var(--accent), var(--accent-dark)); }
.bg-light { background: var(--bg-light); color: var(--text-on-light); }
.bg-light-alt { background: var(--bg-light-alt); color: var(--text-on-light); }
/* ---- Kicker / Eyebrow: Pill-Badge (statt Linie) ---- */
.kicker {
display: inline-flex;
align-items: center;
gap: .6em;
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
padding: .6em 1.15em;
border-radius: 999px;
background: var(--bg);
color: #fff;
margin-bottom: 1.3em;
transition: background .3s, color .3s;
}
.bg-dark .kicker, .bg-dark-alt .kicker {
background: rgba(255, 255, 255, 0.1);
color: #fff;
backdrop-filter: blur(6px);
}
.bg-light .kicker, .bg-light-alt .kicker { background: var(--bg); color: #fff; }
.kicker.kicker-accent { background: var(--accent); color: #fff; }
h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); letter-spacing: -.01em; line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head h2 { letter-spacing: -.01em; line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-on-dark-muted); max-width: 60ch; }
.bg-light .lede, .bg-light-alt .lede { color: var(--text-on-light-muted); }
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
min-height: 44px;
padding: .95em 1.9em;
border-radius: 999px;
font-weight: 600;
font-size: 1.02rem;
border: 1px solid transparent;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
white-space: nowrap;
}
.btn-primary {
position: relative;
overflow: hidden;
padding-left: .5em;
background: var(--bg);
color: #fff;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
/* Runder Pfeil-Icon-Kreis vor dem Text, ganz im settarious-Stil */
.btn-primary::before {
content: "";
width: 32px; height: 32px;
flex-shrink: 0;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / 46% no-repeat,
rgba(255,255,255,.18);
transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.btn-primary:hover::before { transform: rotate(45deg); background-color: rgba(255,255,255,.3); }
.btn-primary::after {
content: "";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
transform: skewX(-20deg);
transition: left .75s var(--ease);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3); }
.btn-primary:hover::after { left: 130%; }
/* Auf dunklem Untergrund kippt der Pill-Button zu Weiß, damit er sich vom (ebenfalls dunklen) Hintergrund abhebt */
.bg-dark .btn-primary, .bg-dark-alt .btn-primary { background: #fff; color: var(--bg); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.bg-dark .btn-primary::before, .bg-dark-alt .btn-primary::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c3832' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / 46% no-repeat,
rgba(60,56,50,.12);
}
.bg-dark .btn-primary:hover::before, .bg-dark-alt .btn-primary:hover::before { background-color: rgba(60,56,50,.2); }
.btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--text-on-dark);
}
.btn-ghost:hover { border-color: #fff; color: #fff; transform: translateY(-3px) scale(1.01); }
.bg-light .btn-ghost, .bg-light-alt .btn-ghost { border-color: var(--line-light); color: var(--text-on-light); }
.bg-light .btn-ghost:hover, .bg-light-alt .btn-ghost:hover { border-color: var(--bg); color: var(--bg); }
.btn-sm { padding: .7em 1.4em; font-size: .92rem; }
/* On narrow phones a long button label (e.g. "Kostenloses Erstgespräch per Telefon") can no longer
fit on one line within the viewport; let it wrap instead of silently overflowing off-screen. */
@media (max-width: 480px) {
.btn { white-space: normal; text-align: left; }
}
.btn-sm.btn-primary::before { width: 26px; height: 26px; }
/* Nav-Kontakt-Button: dunkel (Petrol) statt Weiß, damit er sich von der hellen Header-Fläche/Buttons abhebt */
.site-header .btn-primary { background: var(--accent-dark); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.site-header .btn-primary::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / 46% no-repeat,
rgba(255,255,255,.14);
}
.site-header .btn-primary:hover::before { background-color: rgba(255,255,255,.24); }
/* ---- Header / Navigation ---- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px 0;
/* HIG "vibrancy": a faint translucent glass layer even before scrolling, so the bar never sits as a flat opaque block */
background: rgba(60, 56, 50, 0.16);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled {
padding: 12px 0;
background: rgba(60, 56, 50, 0.78);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.site-header { animation: headerDrop .9s var(--ease); }
@keyframes headerDrop {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--maxw-header); }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand .logo-full {
height: clamp(42px, 4.2vw, 54px); width: auto; display: block;
transition: transform .5s var(--ease);
}
.brand:hover .logo-full { transform: scale(1.04); }
.nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(10px, 1.3vw, 20px); flex-shrink: 1; min-width: 0; }
.nav-links a {
font-size: .9rem;
font-weight: 600;
letter-spacing: .01em;
padding: 6px 0;
position: relative;
white-space: nowrap;
color: var(--text-on-dark-muted);
transition: color .3s;
}
.nav-links a::after {
content: "";
position: absolute; left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--accent-light);
transition: width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-on-dark); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-mobile-cta { display: none; }
.nav-toggle {
display: none;
background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
width: 44px; height: 44px; align-items: center; justify-content: center;
color: var(--text-on-dark);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .3s; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
@media (max-width: 880px) {
.nav-toggle { display: flex; }
.nav-links {
position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height: 100vh;
/* Solid enough to read cleanly over any page content behind it, with just a hint of glass */
background: rgba(42, 39, 34, 0.97);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
flex-direction: column; align-items: flex-start; justify-content: center;
padding: 40px 36px; gap: 24px;
transform: translateX(100%);
transition: transform .45s var(--ease);
box-shadow: -20px 0 50px rgba(0,0,0,.35);
}
.nav-links.is-open { transform: translateX(0); }
.nav-links a { font-size: 1.15rem; }
.nav-cta .btn-ghost { display: none; }
/* Kontakt-Button verlässt die Top-Bar auf Mobile (sonst verdeckt er das Burger-Icon)
und erscheint stattdessen unten in der aufgeklappten Navigation */
.nav-cta .btn-primary { display: none; }
.nav-mobile-cta {
display: inline-flex;
width: 100%;
margin-top: 8px;
}
}
/* ---- Hero ---- */
.hero {
position: relative;
padding: clamp(140px, 20vw, 220px) 0 clamp(70px, 10vw, 110px);
overflow: hidden;
background:
radial-gradient(ellipse 60% 50% at 85% 8%, rgba(47,107,107,0.20), transparent 60%),
radial-gradient(ellipse 55% 45% at 5% 95%, rgba(47,107,107,0.10), transparent 60%),
var(--bg);
}
.hero::before, .hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .5;
pointer-events: none;
z-index: 0;
animation: float 12s ease-in-out infinite;
}
.hero::before { width: 220px; height: 220px; background: radial-gradient(circle, rgba(47,107,107,.22), transparent 70%); top: 12%; left: -60px; }
.hero::after { width: 180px; height: 180px; background: radial-gradient(circle, rgba(47,107,107,.28), transparent 70%); bottom: 6%; left: 20%; animation-delay: 2.2s; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .4em; }
.hero h1 .accent-word { color: var(--accent-light); font-style: normal; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.hero h1 .accent-word {
background: linear-gradient(90deg, var(--accent-dark), var(--accent-light), var(--accent-dark));
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shine 7s linear infinite;
}
}
@keyframes shine { to { background-position: -220% center; } }
.hero .lede { margin-bottom: 1.8em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 2.4em; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.trust-row .item { display: flex; align-items: center; gap: .6em; font-size: .9rem; color: var(--text-on-dark-muted); }
.trust-row .item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-light); }
.hero-visual {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(155deg, #4a453d, #2c2822);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
}
/* Große, blasse Ghost-Typografie als grafischer Anker – ersetzt das noch fehlende Portraitfoto */
.hero-visual::before {
content: "GP";
position: absolute;
inset: auto auto -6% -4%;
font-family: var(--font);
font-weight: 600;
font-size: clamp(9rem, 22vw, 15rem);
line-height: .8;
color: rgba(255,255,255,.06);
letter-spacing: -.03em;
pointer-events: none;
z-index: 0;
user-select: none;
}
.hero-visual .blob {
position: absolute; border-radius: 50%; filter: blur(2px);
animation: float 9s ease-in-out infinite;
}
.hero-visual .blob.b1 { width: 210px; height: 210px; background: radial-gradient(circle, rgba(47,107,107,.55), transparent 70%); top: -40px; right: -30px; animation-delay: 0s;}
.hero-visual .blob.b2 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(47,107,107,.32), transparent 70%); bottom: -60px; left: -50px; animation-delay: 1.4s;}
.hero-visual .portrait-img {
position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block;
}
.hero-visual .logo-showcase {
position: relative; z-index: 1; width: 62%; max-width: 300px; height: auto; display: block;
filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}
@keyframes float {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(-16px, 18px) scale(1.06); }
}
/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(32px) scale(.97); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger > * { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .22s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .32s; }
/* Steps: alternating left/right entrance instead of uniform rise */
.steps.reveal-stagger > .step { transform: translateY(0) translateX(0) scale(1); }
.steps.reveal-stagger > .step:nth-child(odd) { transform: translateX(-38px); opacity: 0; }
.steps.reveal-stagger > .step:nth-child(even) { transform: translateX(38px); opacity: 0; }
.steps.reveal-stagger.is-visible > .step { opacity: 1; transform: translateX(0); }
/* Grid cards (3-up): alternating left/right entrance, same choreography as .steps */
.grid-3.reveal-stagger > * { transform: translateY(0) translateX(0) scale(1); }
.grid-3.reveal-stagger > *:nth-child(3n+1) { transform: translateX(-34px); opacity: 0; }
.grid-3.reveal-stagger > *:nth-child(3n+2) { transform: translateY(26px) scale(.96); opacity: 0; }
.grid-3.reveal-stagger > *:nth-child(3n+3) { transform: translateX(34px); opacity: 0; }
.grid-3.reveal-stagger.is-visible > * { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
/* Headings: slide in from the left as their section reveals */
.reveal h1, .reveal h2,
.reveal-stagger h3 {
opacity: 0;
transform: translateX(-34px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible h1, .reveal.is-visible h2,
.reveal-stagger.is-visible h3 {
opacity: 1;
transform: translateX(0);
}
.reveal.is-visible h2 { transition-delay: .06s; }
.reveal-stagger.is-visible h3 { transition-delay: .05s; }
/* Icon draws in after the heading has started sliding, instead of simultaneously */
.card .icon svg path, .card .icon svg circle { transition-delay: .28s; }
/* Step numbers: pop in with a slight overshoot for extra motion */
.step-num {
transition: opacity .5s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.steps.reveal-stagger > .step .step-num { opacity: 0; transform: scale(.4); }
.steps.reveal-stagger.is-visible > .step .step-num { opacity: 1; transform: scale(1); transition-delay: .1s; }
/* Icon line-draw: card icons "draw themselves" in as their section reveals */
.card .icon svg path,
.card .icon svg circle {
stroke-dasharray: 260;
stroke-dashoffset: 260;
transition: stroke-dashoffset 1.3s var(--ease) .18s;
}
.reveal.is-visible .card .icon svg path, .reveal.is-visible .card .icon svg circle,
.reveal-stagger.is-visible .card .icon svg path, .reveal-stagger.is-visible .card .icon svg circle {
stroke-dashoffset: 0;
}
/* Kicker-Pill: sanftes Einschweben beim Reveal */
.section-head .kicker, .reveal .kicker {
transform: scale(.92);
opacity: 0;
transition: transform .6s var(--ease) .1s, opacity .6s var(--ease) .1s;
}
.section-head.reveal.is-visible .kicker, .reveal.is-visible .kicker,
.kicker.is-visible { transform: scale(1); opacity: 1; }
/* ---- Section header ---- */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* ---- Cards / Grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.card {
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(24px, 3vw, 32px);
transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
/* Deference: hover lifts the card and deepens the shadow rather than drawing a bold accent-colored ring around it */
.card:hover { transform: translateY(-6px) scale(1.015); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,0.06); box-shadow: var(--shadow-elevated); }
.bg-light .card, .bg-light-alt .card { background: #fff; border-color: var(--line-light); box-shadow: var(--shadow-soft); }
.bg-light .card:hover, .bg-light-alt .card:hover { border-color: var(--line-light); box-shadow: var(--shadow-elevated-light); }
.card .icon, .price-card .icon {
width: 52px; height: 52px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
background: linear-gradient(140deg, rgba(47,107,107,.28), rgba(47,107,107,.12));
color: var(--accent-light);
margin-bottom: 1.2em;
}
.bg-light .card .icon, .bg-light-alt .card .icon,
.bg-light .price-card .icon, .bg-light-alt .price-card .icon { color: var(--accent-dark); }
.card .icon svg, .price-card .icon svg { width: 26px; height: 26px; }
.card ul { margin-top: 1em; }
.card ul li { display: flex; gap: .6em; align-items: flex-start; font-size: .95rem; margin-bottom: .5em; color: var(--text-on-dark-muted); overflow-wrap: break-word; min-width: 0; }
.bg-light .card ul li, .bg-light-alt .card ul li { color: var(--text-on-light-muted); }
.card ul li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-light); flex-shrink: 0; }
.card-link { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.4em; font-weight: 600; font-size: .92rem; color: var(--accent-light); }
.bg-light .card-link, .bg-light-alt .card-link { color: var(--accent-dark); }
.card-link svg { width: 16px; height: 16px; transition: transform .3s; }
.card:hover .card-link svg { transform: translateX(4px); }
/* ---- Method / Pillars (Beziehungskompass) ---- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: pillar; }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar { position: relative; padding: 30px 24px 24px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.bg-light .pillar, .bg-light-alt .pillar { background: #fff; border-color: var(--line-light); box-shadow: var(--shadow-soft); }
.pillar .num {
counter-increment: pillar;
font-size: .82rem; font-weight: 700; letter-spacing: .1em;
color: var(--accent-light); margin-bottom: .8em; display: block;
}
.bg-light .pillar .num, .bg-light-alt .pillar .num { color: var(--accent-dark); }
.pillar .num::before { content: "0" counter(pillar); }
.pillar h3 { margin-bottom: .4em; }
.pillar p { font-size: .92rem; color: var(--text-on-dark-muted); margin: 0; }
.bg-light .pillar p, .bg-light-alt .pillar p { color: var(--text-on-light-muted); }
/* ---- Quote / Statement band ---- */
.statement-band {
padding: clamp(50px, 8vw, 90px) 0;
text-align: center;
background: linear-gradient(140deg, var(--accent), var(--accent-dark));
}
.statement-band blockquote {
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 500;
max-width: 900px;
margin: 0 auto;
line-height: 1.4;
color: #fff;
}
.statement-band cite { display:block; margin-top: 1.2em; font-style: normal; font-size: .95rem; color: rgba(255,255,255,.75); font-weight: 500; }
/* ---- Testimonial / Placeholder box ---- */
.testimonial-note {
border: 1.5px dashed var(--line);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px);
text-align: center;
color: var(--text-on-dark-muted);
}
.bg-light .testimonial-note, .bg-light-alt .testimonial-note { border-color: var(--line-light); color: var(--text-on-light-muted); }
.testimonial-note strong { color: var(--text-on-dark); display:block; margin-bottom:.4em; font-size: 1.05rem; }
.bg-light .testimonial-note strong, .bg-light-alt .testimonial-note strong { color: var(--text-on-light); }
/* ---- FAQ Accordion: einzelne Pill-Karten statt Trennlinien ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
border: none;
border-radius: var(--radius);
background: rgba(255,255,255,.045);
padding: 0 clamp(20px, 3vw, 30px);
transition: background .35s var(--ease);
}
.faq-item:hover { background: rgba(255,255,255,.07); }
.bg-light .faq-item, .bg-light-alt .faq-item { background: rgba(50,46,41,.045); }
.bg-light .faq-item:hover, .bg-light-alt .faq-item:hover { background: rgba(50,46,41,.07); }
.faq-q {
width: 100%; text-align: left; background: none; border: none; color: inherit;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 22px 0; font-size: 1.05rem; font-weight: 600; font-family: var(--font);
}
.faq-q .plus {
width: 30px; height: 30px; flex-shrink: 0; position: relative;
border-radius: 50%; background: rgba(255,255,255,.08);
}
.bg-light .faq-q .plus, .bg-light-alt .faq-q .plus { background: rgba(50,46,41,.06); }
.faq-q .plus::before, .faq-q .plus::after { content:""; position:absolute; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease); }
.faq-q .plus::before { left: 8px; right: 8px; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-q .plus::after { top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); }
.faq-item.is-open .faq-q .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-a-inner { padding-bottom: 24px; color: var(--text-on-dark-muted); font-size: .98rem; max-width: 68ch; }
.bg-light .faq-a-inner, .bg-light-alt .faq-a-inner { color: var(--text-on-light-muted); }
/* ---- Steps (Ablauf): eigenständige Bento-Karten statt Trennlinien-Liste ---- */
.steps { display: grid; gap: 16px; }
.step {
display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
padding: clamp(24px, 3vw, 32px); border-radius: var(--radius);
background: rgba(255,255,255,.04);
transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.bg-light .step, .bg-light-alt .step { background: #fff; box-shadow: var(--shadow-soft); }
.bg-light .step:hover, .bg-light-alt .step:hover { box-shadow: var(--shadow-elevated-light); }
.step .step-num {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(140deg, var(--accent-light), var(--accent-dark));
color: #fff; font-weight: 700; font-size: 1.2rem;
display: flex; align-items: center; justify-content: center;
}
/* ---- Pricing table ---- */
.price-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .price-table { grid-template-columns: 1fr; } }
.price-card { border-radius: var(--radius); padding: 32px 32px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; }
.bg-light .price-card, .bg-light-alt .price-card { background: #fff; border-color: var(--line-light); box-shadow: var(--shadow-soft); }
/* Featured plan: soft elevation plus a slim gradient accent bar along the top edge, instead of a bold ring or glow */
.price-card.featured {
position: relative;
overflow: hidden;
padding-top: 40px;
border-color: var(--line-light);
box-shadow: var(--shadow-elevated-light);
}
.price-card.featured::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-dark));
}
.price-card .icon { margin-left: auto; margin-right: auto; }
.price-card .amount { font-size: 2.6rem; font-weight: 500; margin: .3em 0 .05em; color: var(--accent-light); }
.bg-light .price-card .amount, .bg-light-alt .price-card .amount { color: var(--accent-dark); }
.price-card .amount small { font-size: .95rem; font-weight: 500; color: var(--text-on-dark-muted); }
.bg-light .price-card .amount small, .bg-light-alt .price-card .amount small { color: var(--text-on-light-muted); }
.price-card ul { margin: 1.2em 0; flex: 1; }
.price-card ul li { padding: .4em 0; font-size: .93rem; display: flex; gap: .6em; color: var(--text-on-dark-muted); }
.bg-light .price-card ul li, .bg-light-alt .price-card ul li { color: var(--text-on-light-muted); }
.price-card ul li svg { width: 17px; height: 17px; margin-top: 3px; color: var(--accent-light); flex-shrink: 0; }
.bg-light .price-card ul li svg, .bg-light-alt .price-card ul li svg { color: var(--accent-dark); }
/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .5em; color: var(--text-on-dark-faint); }
.bg-light .field label, .bg-light-alt .field label { color: var(--text-on-light-faint); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
width: 100%; padding: .9em 1em; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text-on-dark);
font-family: var(--font); font-size: 1rem; resize: vertical;
transition: border-color .25s, box-shadow .25s;
}
.bg-light .field input:not([type="checkbox"]):not([type="radio"]), .bg-light .field textarea, .bg-light .field select,
.bg-light-alt .field input:not([type="checkbox"]):not([type="radio"]), .bg-light-alt .field textarea, .bg-light-alt .field select { background: #fff; border-color: var(--line-light); color: var(--text-on-light); }
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.field-check { display: flex; align-items: flex-start; gap: .7em; font-size: .85rem; color: var(--text-on-dark-muted); }
.bg-light .field-check, .bg-light-alt .field-check { color: var(--text-on-light-muted); }
.field-check input[type="checkbox"] {
width: 17px; height: 17px; flex-shrink: 0; margin: 2px 0 0; padding: 0;
border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.04);
accent-color: var(--accent);
}
.bg-light .field-check input[type="checkbox"], .bg-light-alt .field-check input[type="checkbox"] { border-color: var(--line-light); background: #fff; }
.contact-info-item {
display: flex; gap: 16px; align-items: center;
min-height: 44px;
padding: 16px 20px; margin-bottom: 12px; border-radius: var(--radius-sm);
background: rgba(255,255,255,.035);
transition: background .3s;
}
.contact-info-item:hover { background: rgba(255,255,255,.065); }
.bg-light .contact-info-item, .bg-light-alt .contact-info-item { background: rgba(50,46,41,.035); }
.bg-light .contact-info-item:hover, .bg-light-alt .contact-info-item:hover { background: rgba(50,46,41,.065); }
.contact-info-item .icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(47,107,107,.16); color: var(--accent-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bg-light .contact-info-item .icon, .bg-light-alt .contact-info-item .icon { color: var(--accent-dark); }
.contact-info-item .icon svg { width: 22px; height: 22px; }
/* ---- Footer ---- */
.site-footer { background: #262319; padding: clamp(50px, 7vw, 80px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 50px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-dark-faint); margin-bottom: 1.2em; }
.footer-grid ul li { margin-bottom: .7em; }
.footer-grid a { color: var(--text-on-dark-muted); font-size: .95rem; transition: color .3s; }
.footer-grid a:hover { color: var(--accent-light); }
.footer-grid .footer-addr { color: var(--text-on-dark-muted); font-size: .95rem; display: block; line-height: 1.6; }
.footer-logo { height: clamp(84px, 9.5vw, 116px); width: auto; display: block; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--text-on-dark-faint); }
.footer-eco {
display: flex; align-items: center; gap: 10px;
font-size: .82rem; color: var(--text-on-dark-faint);
transition: color .3s;
}
.footer-eco:hover { color: var(--text-on-dark-muted); }
.footer-eco img { width: 22px; height: auto; flex-shrink: 0; opacity: .8; }
/* ---- Page hero (Unterseiten) ---- */
.page-hero { position: relative; overflow: hidden; padding: clamp(130px, 16vw, 180px) 0 clamp(50px, 7vw, 80px); }
.page-hero::before, .page-hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(50px);
opacity: .55;
pointer-events: none;
z-index: 0;
animation: float 11s ease-in-out infinite;
}
.page-hero::before { width: 260px; height: 260px; background: radial-gradient(circle, rgba(47,107,107,.32), transparent 70%); top: -70px; right: 6%; }
.page-hero::after { width: 300px; height: 300px; background: radial-gradient(circle, rgba(47,107,107,.18), transparent 70%); bottom: -140px; left: -4%; animation-delay: 1.8s; }
.page-hero .container { position: relative; z-index: 1; }
/* Ghost-Wordmark im Hintergrund jeder Unterseiten-Hero – dezentes, großformatiges Markenelement im settarious-Stil */
.page-hero .container::before {
content: "GABRIELE PERRER";
position: absolute;
right: clamp(-40px, -2vw, 0px);
bottom: -.12em;
font-family: var(--font);
font-weight: 300;
font-size: clamp(2.6rem, 9vw, 6.5rem);
line-height: .8;
letter-spacing: -.01em;
color: rgba(255,255,255,.05);
white-space: nowrap;
pointer-events: none;
z-index: 0;
user-select: none;
}
.page-hero.bg-light .container::before, .page-hero.bg-light-alt .container::before { color: rgba(50,46,41,.05); }
@media (max-width: 780px) { .page-hero .container::before { display: none; } }
/* Foto-Hero (aktuell: "Für Männer") – volles-Breite-Bild mit dunklem Verlauf für Lesbarkeit des Textes */
.page-hero.hero-photo {
background-image:
linear-gradient(100deg, rgba(60,56,50,.97) 0%, rgba(60,56,50,.90) 30%, rgba(60,56,50,.58) 58%, rgba(60,56,50,.32) 100%),
url('../img/beziehungsberatung-hero.webp');
background-size: cover;
background-position: 68% 24%;
background-repeat: no-repeat;
min-height: clamp(460px, 56vw, 620px);
display: flex;
align-items: center;
}
.page-hero.hero-photo::before, .page-hero.hero-photo::after { opacity: .3; }
@media (max-width: 780px) {
.page-hero.hero-photo {
background-image:
linear-gradient(190deg, rgba(60,56,50,.55) 0%, rgba(60,56,50,.94) 60%, rgba(60,56,50,.99) 100%),
url('../img/beziehungsberatung-hero.webp');
background-position: 70% center;
min-height: unset;
}
}
/* Foto-Hero über echtes ![]()
statt CSS-Hintergrund – Dateiname und alt-Text sind so für die
Google-Bildersuche auswertbar (bei einem reinen CSS-background-image ist das nicht der Fall).
Aktuell: "Psychosoziale Beratung". Wiederverwendbar für weitere Seiten, einfach dasselbe
Markup (img.hero-photo-bg + div.hero-photo-overlay) mit neuem Bild einsetzen. */
.page-hero.hero-photo-img { min-height: clamp(460px, 56vw, 620px); display: flex; align-items: center; }
.hero-photo-bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
object-position: var(--hero-pos-desktop, center 20%);
}
.hero-photo-overlay {
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(100deg, rgba(60,56,50,.96) 0%, rgba(60,56,50,.86) 30%, rgba(60,56,50,.5) 60%, rgba(60,56,50,.24) 100%);
}
.page-hero.hero-photo-img::before, .page-hero.hero-photo-img::after { opacity: .3; }
@media (max-width: 780px) {
.page-hero.hero-photo-img { min-height: unset; }
.hero-photo-bg { object-position: var(--hero-pos-mobile, center); }
/* Deutlich dunklerer Verlauf als am Desktop: auf schmalen Bildschirmen liegt der komplette
Text über dem Foto (nicht nur ein Teil davon), das Foto muss also stärker abgedunkelt
werden, um in beiden Foto-Heros (heller/dunkler Bildton) gleich lesbar und gleich subtil zu wirken. */
.hero-photo-overlay {
background: linear-gradient(190deg, rgba(60,56,50,.75) 0%, rgba(60,56,50,.96) 55%, rgba(60,56,50,.995) 100%);
}
}
.breadcrumb { font-size: .85rem; color: var(--text-on-dark-faint); margin-bottom: 1.4em; display:flex; gap:.5em; align-items:center; }
.breadcrumb a:hover { color: var(--accent-light); }
/* ---- Utility ---- */
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(40px,6vw,70px); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
/* Grid items default to min-width:auto, which can force a grid track (and the whole row) to overflow
its container when a child's content (e.g. a large heading or long word) has more intrinsic width
than the track — most noticeable on narrow/mobile viewports before columns collapse to 1fr.
Resetting min-width to 0 lets items shrink and wrap properly instead of pushing past the viewport. */
.hero-grid > *, .two-col > *, .contact-grid > *, .grid-2 > *, .grid-3 > *,
.pillars > *, .footer-grid > *, .price-table > *, .steps > *, .step > * {
min-width: 0;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.badge {
display: inline-flex; align-items: center; gap: .5em;
padding: .5em 1em; border-radius: 999px; font-size: .82rem; font-weight: 600;
background: rgba(47,107,107,.16); color: var(--accent-light);
margin-bottom: 1em;
}
.bg-light .badge, .bg-light-alt .badge { color: var(--accent-dark); background: rgba(47,107,107,.18); }
.disclaimer-box {
/* Deference: a faint tinted edge instead of a bold solid accent bar */
border-left: 3px solid rgba(47,107,107,.45);
padding: 16px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: rgba(47,107,107,.08); font-size: .9rem; color: var(--text-on-dark-muted);
}
.bg-light .disclaimer-box, .bg-light-alt .disclaimer-box { color: var(--text-on-light-muted); background: rgba(47,107,107,.1); }
::selection { background: var(--accent); color: #fff; }
/* Skip link for accessibility */
.skip-link {
position: absolute; left: -999px; top: auto;
background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 8px; z-index: 1000;
}
.skip-link:focus { left: 20px; top: 20px; }