:root { --color-bg: #d9e8f5; --color-bg-alt: #c4dcf1; --color-surface: #ffffff; --color-text: #1f2e33; --color-text-soft: #5c7278; --color-heading: #0b3350; --color-accent: #1c7ed6; --color-accent-dark: #145a9c; --color-gold: #bb8b34; --color-gold-dark: #8a6320; --color-border: rgba(255, 255, 255, 0.6); --shadow: 0 20px 40px -20px rgba(20, 80, 120, 0.28); --radius: 20px; --max-width: 1120px; color-scheme: light; --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --section-padding-y: 4.5rem; /* Soft blue (picked up from the navy/daylight tones in the photos) fading into a warm beige */ --bg-texture: linear-gradient(160deg, #72b1de 0%, #d2d9cf 55%, #eace99 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); background-image: var(--bg-texture); background-attachment: fixed; background-size: cover; color: var(--color-text); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Automatic hyphenation. The browser picks its German dictionary from , so that attribute has to stay for this to do anything. Body copy only — headings just get a safety net against overflow, since hyphenated headlines read worse than a slightly ragged edge. */ p, li, blockquote, summary, dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; } h1, h2, h3, h4 { color: var(--color-heading); font-family: var(--font-heading); line-height: 1.25; font-weight: 700; overflow-wrap: break-word; } h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 1rem; } h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 1.5rem; } h3 { font-size: 1.3rem; margin: 1.75rem 0 0.75rem; } h4 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; } p { margin: 0 0 1rem; } a { color: var(--color-accent-dark); } a:hover, a:focus-visible { text-decoration-thickness: 2px; } ul { padding-left: 1.25rem; margin: 0 0 1rem; } li { margin-bottom: 0.4rem; } img { max-width: 100%; display: block; } .media-frame { overflow: hidden; border: 6px solid var(--color-surface); } .framed-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .media-frame:hover .framed-img { transform: scale(1.05); } /* Aspect-ratio modifiers — override a frame's default ratio to match the photo. Chained with .media-frame so they outrank the per-section frame rules below. */ .media-frame.media-portrait { aspect-ratio: 3 / 4; } .media-frame.media-landscape { aspect-ratio: 4 / 3; } /* Scroll-reveal (see js/main.js) */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-text, .hero-image { animation: none; } .framed-img, .icon-badge { transition: none; } } blockquote { margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--color-accent); font-style: italic; color: var(--color-text-soft); } blockquote cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.9rem; } /* Icons (Feather Icons, MIT License, see /icons/LICENSE-feather.txt) */ .icon { width: 1em; height: 1em; flex-shrink: 0; } .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-accent-dark); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.2s ease; } .heading-with-icon { display: flex; align-items: center; gap: 0.75rem; } .heading-with-icon h3, .heading-with-icon h4 { margin: 0; } .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-accent-dark); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius); z-index: 200; } .skip-link:focus { left: 1rem; top: 1rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; } .nav-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--color-heading); transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle span { top: 19px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .site-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; } .site-nav a { position: relative; text-decoration: none; color: var(--color-text); font-size: 0.95rem; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--color-accent-dark); transition: right 0.25s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--color-accent-dark); } .site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; } /* Hero */ .hero { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hero-text { animation: fade-in-up 0.7s ease both; } .hero-image { animation: fade-in-up 0.7s ease 0.15s both; } .eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--color-accent-dark); font-weight: 600; } .hero-image { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--shadow); } /* Welcome */ .welcome { background: rgba(255, 255, 255, 0.35); } .welcome-inner { max-width: 760px; margin: 0 auto; padding: var(--section-padding-y) 1.5rem; } .welcome-image { margin-top: 2.5rem; aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: var(--shadow); } /* Section wrapper defaults */ .about, .offers, .conditions, .contact { max-width: var(--max-width); margin: 0 auto; padding: var(--section-padding-y) 1.5rem; } /* About */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; } .about-image { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 6rem; transform: rotate(-2deg); } .timeline { list-style: none; padding: 0; border-left: 2px solid var(--color-border); } .timeline li { padding: 0 0 0.9rem 1.25rem; position: relative; } .timeline li::before { content: ""; position: absolute; left: -6px; top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); } .timeline-date { display: block; font-weight: 600; color: var(--color-heading); font-size: 0.9rem; } .tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-list li { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.9rem; margin: 0; } /* Offers */ .offers-intro { font-size: 1.1rem; color: var(--color-text-soft); max-width: 640px; } .offer { padding: 2.5rem 0; border-top: 1px solid var(--color-border); } .offer:first-of-type { border-top: none; padding-top: 1rem; } .offer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; } .offer-reverse .offer-grid { grid-template-columns: 1fr 1.3fr; } .offer-reverse .offer-image { order: -1; } .offer-image { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: var(--shadow); } .callout { margin-top: 2rem; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); border: 1px solid var(--color-border); border-left: 4px solid var(--color-gold); border-radius: var(--radius); padding: 1.5rem 1.75rem; } .callout h4 { margin-top: 0; color: var(--color-gold-dark); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; } .callout-with-media { display: flex; gap: 1.5rem; align-items: flex-start; } .callout-with-media .callout-media { width: 9rem; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: var(--shadow); flex-shrink: 0; } .callout-with-media .callout-body { flex: 1; min-width: 0; } .callout-with-media .callout-body > :last-child { margin-bottom: 0; } .callout-method { border-left-color: var(--color-accent-dark); } .callout-method h4 { margin-top: 0; color: var(--color-heading); text-transform: none; letter-spacing: normal; font-size: 1.05rem; } /* Secondary offers (Selbsterfahrung, Erziehungsberatung, Coaching, Supervision) — intentionally less prominent than the main Psychotherapie offer above */ .offers-secondary { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .offers-secondary-title { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; color: var(--color-text-soft); margin: 0 0 0.5rem; } .offers-secondary-list { display: contents; } .offer-secondary { padding: 1.75rem 0; } .offer-secondary .heading-with-icon h4 { font-size: 0.95rem; } .offer-secondary .icon-badge { width: 1.75rem; height: 1.75rem; font-size: 0.85rem; } /* Narrower image column keeps the secondary offers subordinate to Psychotherapie */ .offer-secondary .offer-grid { grid-template-columns: 1.7fr 1fr; gap: 2rem; } .offer-secondary.offer-reverse .offer-grid { grid-template-columns: 1fr 1.7fr; } /* Conditions (FAQ) */ .conditions-intro { max-width: 640px; margin-bottom: 2.5rem; } .conditions-intro h2 { margin-bottom: 0.75rem; } .conditions-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: start; } .conditions-image { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 6rem; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(14px); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0 1.25rem; } .faq-item summary { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer; font-weight: 600; color: var(--color-heading); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-question { flex: 1; } .faq-item summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--color-accent-dark); border-bottom: 2px solid var(--color-accent-dark); transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 0.25rem; } .faq-item[open] summary::after { transform: rotate(-135deg); } .faq-item p { margin: 0 0 1.5rem calc(2.25rem + 1rem); color: var(--color-text-soft); } /* Contact */ .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem; align-items: start; } .contact-image { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--shadow); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .contact-block { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; } .contact-block h3 { margin-top: 0; } .contact-block .heading-with-icon { margin-bottom: 1rem; } .contact-block .heading-with-icon h3 { margin-bottom: 0; } .contact-line { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } /* Responsive */ @media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-image { order: -1; aspect-ratio: 4 / 5; max-width: 380px; margin: 0 auto; } .about-grid, .offer-grid, .offer-reverse .offer-grid, .offer-secondary .offer-grid, .offer-secondary.offer-reverse .offer-grid, .conditions-layout, .contact-layout { grid-template-columns: 1fr; } .offer-reverse .offer-image { order: 0; } /* Opt an image out of leading its offer once the grid is a single column. Scoped to .offer-reverse so it outranks the reset above. */ .offer-reverse .offer-image-below { order: 1; } .about-image, .conditions-image, .contact-image, .offer-image { position: static; max-width: 420px; margin: 0 auto 1rem; } .conditions-image { max-width: 520px; } .callout-with-media { flex-direction: column; align-items: center; } .callout-with-media .callout-media { width: 7rem; } .callout-with-media .callout-body { align-self: stretch; } } @media (max-width: 600px) { .faq-item p { margin-left: 0; } /* Portrait frames run very tall on phones. Capping the width (never the height) shrinks them while aspect-ratio keeps the crop untouched. */ .hero-image, .about-image, .contact-image, .media-frame.media-portrait { max-width: 260px; } } @media (max-width: 700px) { .nav-toggle { display: block; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .site-nav.is-open { max-height: 300px; } .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 1.5rem 1rem; } .site-nav li { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); } .site-nav li:last-child { border-bottom: none; } }