/* ==========================================================================
   SONARIA / Elisa Gibaja Maestre — zentrales Stylesheet (v5)
   Struktur:
   0. Fonts (self-hosted)            5. Service-Blöcke
   1. Design-Tokens (Farben, Typo)   6. Komponenten (Cards, Listen, Preise…)
   2. Basis & Utilities              7. Seiten-Spezifisches (Kurse, Kontakt)
   3. Navigation & Footer            8. Modal
   4. Hero & Sektionen               9. Responsive
   ========================================================================== */

/* 0. FONTS — selbst gehostet (DSGVO: kein Zugriff auf Google-Server)
   ------------------------------------------------------------------
   Dateien liegen in assets/fonts/. Fehlt eine Datei, greift automatisch
   der Fallback aus der font-family-Kette (Georgia bzw. system-ui).
   Bezugsquelle für die woff2-Dateien siehe assets/fonts/README.md */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/fraunces-v38-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/fraunces-v38-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/fraunces-v38-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/fraunces-v38-latin-500italic.woff2') format('woff2');
}

/* 1. DESIGN-TOKENS
   ------------------------------------------------------------------ */
:root {
  --bg: #F5F1E8;
  --bg-warm: #EDE6D6;
  --bg-card: #FFFFFF;
  --ink: #1F2419;
  --ink-soft: #4A5240;
  --ink-mute: #8A8F80;
  --accent: #4A5D3A;
  --accent-soft: #6B7F58;
  --accent-light: #D8DCC9;
  --gold: #B39355;
  --rule: rgba(31, 36, 25, 0.12);
  --rule-strong: rgba(31, 36, 25, 0.25);
  --light-70: rgba(245, 241, 232, 0.7);
  --light-50: rgba(245, 241, 232, 0.5);
  --light-20: rgba(245, 241, 232, 0.2);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --nav-h: 72px;
}

/* 2. BASIS & UTILITIES
   ------------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* Barrierefreiheit */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 14px; }
.section-title { font-size: clamp(32px, 4vw, 44px); margin-bottom: 20px; max-width: 700px; }
.section-title em, .accent-em { font-style: italic; color: var(--accent); }
.section-lead { font-size: 17px; color: var(--ink-soft); line-height: 1.7; max-width: 620px; margin-bottom: 60px; }

/* Buttons */
.btn { display: inline-block; padding: 11px 22px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.25s; cursor: pointer; border: none; font-family: inherit; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-warm); }
.btn-light { background: var(--bg); color: var(--ink); }
.btn-light:hover { background: var(--accent-light); }
.btn-accent { background: var(--accent); color: var(--bg); }
.btn-accent:hover { background: var(--ink); transform: translateY(-1px); }
.btn-block { width: 100%; text-align: center; display: block; padding: 15px 22px; font-size: 15px; }
.btn-block small { font-size: 12px; opacity: 0.7; display: block; margin-top: 3px; font-family: var(--sans); font-weight: 400; }
.btn-nav-cta { background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.22); border: 2px solid var(--ink); cursor: pointer; }
/* höhere Spezifität, damit die weiße Schrift nicht von ".nav-links a" (dunkel) überschrieben wird */
.nav-links a.btn-nav-cta, .nav-links a.btn-nav-cta:hover { color: #FFFFFF; }
.nav-links a.btn-nav-cta:hover { background: var(--accent); border-color: var(--accent); }

/* 3. NAVIGATION & FOOTER
   ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(254, 254, 254, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; gap: 14px; }
.sonaria-logo-nav { height: 50px; width: auto; display: block; flex-shrink: 0; }
.sonaria-wordmark { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex-shrink: 0; }
.logo .sonaria-name { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: 0.14em; color: var(--accent); line-height: 1; }
.logo .sonaria-claim { font-size: 9px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); line-height: 1; }
.logo-divider { width: 1px; height: 34px; background: var(--rule-strong); flex-shrink: 0; }
.logo-text { white-space: nowrap; font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.logo-text em { color: var(--accent); font-style: italic; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.mobile-toggle { display: none; background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--ink); }

.crumb { padding: 32px 0 0; font-size: 13px; color: var(--ink-mute); }
.crumb a { color: var(--ink-mute); }
.crumb a:hover { color: var(--ink); }

footer { background: var(--ink); color: var(--bg); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 50px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand .footer-logos { justify-content: center; }
.footer-brand .social-links { justify-content: center; }
.footer-logos { display: flex; align-items: center; gap: 26px; margin-bottom: 32px; flex-wrap: wrap; }
.sonaria-footer-logo { height: 74px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.85; }
.footer-mhfa-logo { height: 62px; width: auto; display: block; opacity: 0.9; }
.footer-col h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 18px; font-weight: 500; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; color: var(--light-70); font-size: 14px; }
.footer-col a { color: var(--light-70); font-size: 14px; transition: color 0.2s; }
.footer-col a:hover { color: var(--bg); }
.footer-bottom { border-top: 1px solid rgba(245, 241, 232, 0.12); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; color: var(--light-50); }
.footer-bottom a { color: var(--light-50); margin-left: 20px; }
.footer-bottom a:hover { color: var(--bg); }
.social-links { display: flex; gap: 12px; margin-bottom: 20px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(245,241,232,0.1); color: var(--light-70); border: 1px solid rgba(245,241,232,0.15); transition: all 0.2s; font-size: 15px; }
.social-link:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.social-link svg { width: 18px; height: 18px; }
.social-link-whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }
.footer-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; width: max-content; transition: transform 0.2s; }
.footer-qr:hover { transform: translateY(-2px); }
.footer-qr img { width: 104px; height: 104px; display: block; background: #fff; padding: 3px; border-radius: 5px; }
.footer-qr span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light-70); font-weight: 500; }
.branding-strip { background: #0F1209; padding: 28px 0; text-align: center; border-top: 1px solid rgba(110,139,106,0.15); }
.branding-strip-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,241,232,0.3); margin-bottom: 14px; font-weight: 500; }
.branding-strip img { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: 0.7; }

/* 4. HERO & SEKTIONEN
   ------------------------------------------------------------------ */
section { padding: 50px 0; }
.section-warm { background: var(--bg-warm); }

/* Quellenangabe unter einer Kennzahl */
.stat-source { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.stat-source a { color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }
.stat-source a:hover { color: var(--accent); }

/* "Was ist Sonaria?" — Begriffsklaerung direkt unter dem Hero.
   Zwei Spalten: links die Einordnung, rechts die Fragen als ruhige Karte. */
.claim-band { background: var(--bg-warm); padding: 92px 0; border-bottom: 1px solid var(--rule); }
.claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.claim-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin: 0 0 16px; }
.claim-title { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.14; margin: 0 0 20px; }
.claim-title em { font-style: italic; color: var(--accent); }
.claim-lead { font-size: 17px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.claim-close { font-family: var(--serif); font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5;
  color: var(--ink); margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--rule-strong); }
.claim-close em { font-style: italic; color: var(--accent); }

.claim-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 36px; }
.claim-questions { list-style: none; margin: 0; padding: 0; }
.claim-questions li { font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.45; color: var(--ink);
  padding: 22px 0; border-bottom: 1px solid var(--rule); }
.claim-questions li:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .claim-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .claim-band { padding: 60px 0; }
  .claim-card { padding: 6px 26px; }
  .claim-questions li { padding: 18px 0; }
}
.section-dark { background: var(--ink); color: var(--bg); }
.section-dark .eyebrow { color: var(--accent-light); }
.section-dark h2 { color: var(--bg); }
.section-dark p { color: rgba(245, 241, 232, 0.75); }
.section-tight { padding: 60px 0; }

/* Start-Hero: textzentriert, Emblem als dezente Deko rechts (kein Foto) */
.hero { padding: 72px 0 88px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -150px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%); opacity: 0.4; pointer-events: none; }
.hero-emblem { position: absolute; right: -40px; bottom: -60px; height: 420px; width: auto; opacity: 0.22; pointer-events: none; user-select: none; }
.hero-content { position: relative; max-width: 760px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--accent-light); color: var(--accent); border-radius: 100px; font-size: 13px; font-weight: 500; margin-bottom: 28px; }
.badge-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.hero h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 24px; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.hero-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 36px; max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.pioneer-bar { background: var(--ink); color: var(--bg); padding: 16px 0; }
.pioneer-inner { display: flex; align-items: center; justify-content: center; gap: 64px; font-size: 14px; flex-wrap: wrap; text-align: center; }
.pioneer-divider { width: 1px; height: 32px; background: var(--light-20); flex-shrink: 0; }
.pioneer-logo { display: block; width: auto; opacity: 0.8; flex-shrink: 0; }

.page-hero { padding: 40px 0 60px; }
.page-hero h1 { font-size: clamp(40px, 5.5vw, 64px); max-width: 900px; margin-bottom: 24px; }
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-hero-lead { font-size: 19px; max-width: 660px; color: var(--ink-soft); line-height: 1.6; }

/* Über-mich-Raster (Startseite Abschnitt 2 + Über-mich-Seite) */
.about-grid { padding: 60px 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; }
.about-portrait { aspect-ratio: 4/5; background: var(--bg-warm); border-radius: 4px; position: relative; overflow: hidden; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.about-name { font-size: 38px; margin-bottom: 6px; }
.about-role { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 18px; margin-bottom: 28px; }
.about-body p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 18px; font-size: 16px; }
.about-body strong { color: var(--ink); font-weight: 500; }

/* Kompakte Profil-Leiste (Privat- & Unternehmensseite) */
.profile-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding: 20px 24px; background: var(--bg-warm); border-radius: 4px; border: 1px solid var(--rule); }
.profile-strip-person { display: flex; align-items: center; gap: 16px; }
.profile-strip-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 2px solid var(--accent-light); }
.profile-strip-name { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.profile-strip-role { font-size: 12px; color: var(--ink-soft); }

/* Zwei-Wege-Weiche */
.audience-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: var(--rule); }
.audience-card { background: var(--bg-card); padding: 60px 48px; display: flex; flex-direction: column; transition: background 0.3s; position: relative; overflow: hidden; color: inherit; }
.audience-card:hover { background: var(--accent-light); }
.audience-card::before { content: ''; position: absolute; top: 0; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; }
.audience-card:hover::before { opacity: 0.6; }
.audience-label { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 14px; margin-bottom: 12px; position: relative; z-index: 1; }
.audience-card h3 { font-size: 32px; margin-bottom: 18px; line-height: 1.2; position: relative; z-index: 1; }
.audience-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.65; flex-grow: 1; margin-bottom: 28px; position: relative; z-index: 1; }
.audience-list { list-style: none; margin-bottom: 32px; position: relative; z-index: 1; }
.audience-list li { padding: 8px 0; color: var(--ink-soft); font-size: 14px; display: flex; gap: 12px; align-items: flex-start; }
.audience-list li::before { content: '·'; color: var(--accent); font-weight: 700; font-size: 20px; line-height: 1; flex-shrink: 0; }
.audience-link { color: var(--accent); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; transition: gap 0.25s; }
.audience-card:hover .audience-link { gap: 14px; }

/* Prinzipien / Situationen / Testimonials */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--rule); }
.principle { background: var(--bg); padding: 44px 36px; }
.section-warm .principle { background: var(--bg-warm); }
.principle-num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 36px; margin-bottom: 24px; display: block; }
.principle h3 { font-size: 26px; margin-bottom: 12px; }
.principle p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

.situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--rule); }
.situation { background: var(--bg-card); padding: 36px 32px; }
.situation-num { font-family: var(--serif); font-style: italic; font-size: 42px; color: var(--accent-light); line-height: 1; margin-bottom: 16px; display: block; }
.situation h4 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin-bottom: 10px; line-height: 1.3; }
.situation p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.testimonial { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; padding: 32px; }
.testimonial-text { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.testimonial-author { font-size: 13px; font-weight: 500; color: var(--ink); }
.testimonial-role { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.stars { color: var(--accent); font-size: 14px; margin-bottom: 12px; }
.note-mute { font-size: 13px; color: var(--ink-mute); font-style: italic; font-family: var(--serif); }
.note-mute-center { text-align: center; margin-top: 24px; }

/* Zitat / CTA / Krisenbox */
.quote { text-align: center; max-width: 820px; margin: 0 auto; }
.quote-mark { font-family: var(--serif); font-size: 80px; color: var(--accent); line-height: 0.5; margin-bottom: 24px; font-style: italic; }
.quote-text { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.4; margin-bottom: 32px; font-weight: 400; letter-spacing: -0.01em; }
.quote-text em { font-style: italic; color: var(--accent-light); }
.quote-attribution { font-size: 14px; color: rgba(245, 241, 232, 0.6); letter-spacing: 0.05em; }

.cta-section { padding: 120px 0; text-align: center; }
.cta-title { font-size: clamp(36px, 4.5vw, 52px); margin-bottom: 20px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-title em { font-style: italic; color: var(--accent); }
.cta-lead { font-size: 17px; color: var(--ink-soft); max-width: 540px; margin: 0 auto 36px; line-height: 1.7; }
.cta-dark { text-align: center; }
.cta-dark h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
.cta-dark h2 em { color: var(--accent-light); font-style: italic; }
.cta-dark p { font-size: 17px; max-width: 540px; margin: 0 auto 36px; line-height: 1.7; }

.crisis-box { background: var(--bg-warm); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 32px 36px; max-width: 820px; margin: 0 auto; text-align: center; }
.crisis-box h3 { font-size: 20px; margin-bottom: 12px; }
.crisis-box p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.crisis-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.crisis-link { padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--rule-strong); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--ink); transition: all 0.2s; }
.crisis-link:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Foto-Streifen */
.photo-strip { width: 100%; height: 420px; overflow: hidden; position: relative; display: block; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.photo-strip-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(31,36,25,0.55) 0%, rgba(31,36,25,0.1) 60%, transparent 100%); display: flex; align-items: center; }
.photo-strip-caption { color: var(--bg); padding: 0 60px; max-width: 520px; }
.photo-strip-caption .eyebrow { color: var(--accent-light); margin-bottom: 12px; }
.photo-strip-caption h3 { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.25; }

/* Einstiegs-Animation */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise 0.8s ease-out both; }
.rise-1 { animation-delay: 0.1s; }
.rise-2 { animation-delay: 0.25s; }
.rise-3 { animation-delay: 0.4s; }
.rise-4 { animation-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  html { scroll-behavior: auto; }
}

/* 5. SERVICE-BLÖCKE
   ------------------------------------------------------------------ */
.service-nav { background: var(--bg-warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: sticky; top: var(--nav-h); z-index: 50; }
.service-nav-inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.service-nav-inner::-webkit-scrollbar { display: none; }
.service-nav-link { padding: 20px 4px; margin-right: 36px; font-size: 14px; color: var(--ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; font-weight: 500; display: inline-block; }
.service-nav-link:hover { color: var(--ink); }
.service-nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.service-nav-link .num { font-family: var(--serif); font-style: italic; margin-right: 8px; color: var(--accent); }

.service-block { padding: 90px 0; border-bottom: 1px solid var(--rule); }
.service-block.alt { background: var(--bg-warm); }
.service-header { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; margin-bottom: 60px; }
.service-meta { position: sticky; top: calc(var(--nav-h) + 60px); }
.service-num-big { font-family: var(--serif); font-style: italic; font-size: clamp(80px, 10vw, 130px); line-height: 0.85; color: var(--accent); margin-bottom: 24px; }
.service-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 8px; }
.service-block h2 { font-size: clamp(30px, 3.8vw, 42px); margin-bottom: 20px; letter-spacing: -0.02em; }
.service-block h2 em { font-style: italic; color: var(--accent); }
.service-lead { font-size: 17px; color: var(--ink-soft); line-height: 1.7; }
.service-hint { margin-top: 18px; font-size: 14px; color: var(--ink-mute); font-family: var(--serif); font-style: italic; }
.service-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-style: normal; }

.service-details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
.service-details-3 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.service-card { background: var(--bg-card); padding: 32px; border-radius: 4px; border: 1px solid var(--rule); }
.service-card h4 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.service-card h4 + .card-note { margin-top: -6px; }
.card-note { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.service-list { list-style: none; }
.service-list li { padding: 12px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; border-bottom: 1px solid var(--rule); display: flex; gap: 14px; align-items: flex-start; }
.service-list li:last-child { border-bottom: none; }
.service-list li::before { content: '→'; color: var(--accent); font-family: var(--serif); flex-shrink: 0; }
.service-list .quali-year { color: var(--ink-mute); font-size: 13px; font-style: italic; }
.service-list .quali-org { font-size: 13px; color: var(--ink-mute); }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.partner-tag { background: var(--bg-warm); padding: 22px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); border: 1px solid var(--rule); text-align: center; line-height: 1.45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 104px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.partner-tag::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.partner-tag:hover { transform: translateY(-2px); border-color: var(--accent-soft); box-shadow: 0 8px 20px rgba(31, 36, 25, 0.07); }
.service-block.alt .partner-tag { background: var(--bg-warm); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 24px; }
.stat { border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.stat-num { font-family: var(--serif); font-size: clamp(48px, 6vw, 68px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; color: var(--ink); }
.stat-label { color: var(--ink-soft); line-height: 1.6; font-size: 15px; }
.stats-note { font-size: 12px; color: var(--ink-mute); font-style: italic; margin-top: 32px; }

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--rule); margin-top: 24px; }
.step { background: var(--bg); padding: 36px 28px; }
.service-block.alt .step { background: var(--bg-card); }
.step-num { font-family: var(--serif); font-size: 56px; font-style: italic; color: var(--accent); line-height: 0.9; margin-bottom: 24px; display: block; }
.step h4 { font-family: var(--sans); font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; gap: 16px; }
.price-row:last-of-type { border-bottom: none; }
.price-row .label { color: var(--ink-soft); }
.price-row .value { font-family: var(--serif); font-weight: 500; font-size: 18px; white-space: nowrap; }
.price-note { font-size: 13px; color: var(--ink-mute); line-height: 1.6; margin-top: 20px; }

/* Lange Aufzaehlung (Themenfelder der Vortraege) zweispaltig setzen,
   damit die Karte neben den Konditionen nicht ausufert */
/* Bildband auf der Kursseite: Inhaltsbreite, ruhiger Ausschnitt.
   Bewusst nicht randlos wie der Hero der Startseite — der bleibt dort exklusiv. */
.format-band { margin: 0 0 70px; border-radius: 4px; overflow: hidden; background: var(--bg-warm); }
.format-band img { display: block; width: 100%; height: clamp(240px, 30vw, 420px);
  object-fit: cover; object-position: center 58%; }

.service-list-2 { columns: 2; column-gap: 32px; }
.service-list-2 li { break-inside: avoid; }
@media (max-width: 700px) { .service-list-2 { columns: 1; } }

.info-box { padding: 32px; background: var(--bg); border-radius: 4px; margin-top: 50px; border: 1px solid var(--rule); }
.service-block.alt .info-box, .section-warm .info-box { background: var(--bg-card); }
.info-box h3 { font-size: 22px; margin-bottom: 16px; }
.info-box p { color: var(--ink-soft); line-height: 1.7; max-width: 760px; }
.info-box strong { color: var(--ink); font-weight: 500; }

.mhfa-partner-block { display: flex; gap: 24px; align-items: center; padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; margin-bottom: 40px; }
.mhfa-partner-block img { height: 56px; width: auto; flex-shrink: 0; }
.mhfa-partner-block h4 { font-family: var(--sans); font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--ink); }
.mhfa-partner-block p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* FAQ */
details { border-bottom: 1px solid var(--rule); padding: 4px 0; }
details summary { padding: 24px 0; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--ink); gap: 20px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--accent); transition: transform 0.3s; flex-shrink: 0; }
details[open] summary::after { content: '−'; }
details > p { padding: 0 0 24px; color: var(--ink-soft); line-height: 1.7; max-width: 760px; }

/* Logo-Reihe (Über-mich-Seite) */
.logo-row { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logo-row-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; font-weight: 500; }
.logo-row-divider { width: 1px; height: 40px; background: var(--rule); }

/* 7. KURSSEITE
   ------------------------------------------------------------------ */
.courses-intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; margin-bottom: 70px; padding-bottom: 70px; border-bottom: 1px solid var(--rule); }
.courses-summary { background: var(--bg-warm); padding: 36px; border-radius: 4px; }
.courses-summary h3 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.courses-summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.courses-summary-row:last-child { border-bottom: none; }
.courses-summary-row .label { color: var(--ink-soft); }
.courses-summary-row .val { font-family: var(--serif); font-weight: 500; }

.media-info-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 0; border-radius: 4px; overflow: hidden; margin-bottom: 32px; border: 1px solid var(--rule); }
.media-info-grid figure { overflow: hidden; max-height: 200px; margin: 0; }
.media-info-grid figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.external-info { background: var(--accent-light); padding: 24px 28px; display: flex; gap: 20px; align-items: center; }
.external-info-icon { width: 40px; height: 40px; background: var(--accent); color: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--serif); font-style: italic; font-size: 22px; }
.external-info p { font-size: 14px; color: var(--ink); line-height: 1.6; margin: 0; }

.format-toggle { display: flex; gap: 8px; padding: 6px; background: var(--bg-warm); border-radius: 100px; margin-bottom: 40px; width: fit-content; }
.format-toggle button { padding: 8px 20px; border: none; background: transparent; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.2s; }
.format-toggle button.active { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.course-list { display: flex; flex-direction: column; gap: 20px; }
.course-item { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; padding: 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; transition: all 0.25s; }
.course-item:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.course-date { text-align: center; min-width: 80px; }
.course-date .month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); font-weight: 500; margin-bottom: 4px; }
.course-date .day { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; color: var(--ink); margin-bottom: 4px; }
.course-date .year { font-size: 12px; color: var(--ink-mute); }
.course-info h4 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.course-info-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.course-info-meta span { display: inline-flex; align-items: center; gap: 6px; }
.course-info-meta svg { width: 14px; height: 14px; color: var(--accent); }
.course-info-status { font-size: 12px; color: var(--accent); font-style: italic; font-family: var(--serif); }
.course-info-status.few { color: #B85C3F; }
.course-info-status.full { color: var(--ink-mute); }
.course-action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.course-price { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.course-price-note { font-size: 11px; color: var(--ink-mute); text-align: right; }

/* 7b. KONTAKTSEITEN
   ------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-booking { background: var(--bg-warm); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 44px 40px; }
.contact-booking h3 { font-size: 26px; margin-bottom: 10px; }
.contact-booking .lead { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin-bottom: 28px; }
.contact-booking-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.contact-meta-row { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.contact-meta-row svg { color: var(--accent); flex-shrink: 0; }
.contact-form-wrap { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; padding: 44px 40px; }
.contact-form-wrap h3 { font-size: 22px; margin-bottom: 8px; }
.contact-form-wrap .lead { color: var(--ink-soft); font-size: 14px; margin-bottom: 28px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.03em; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--rule-strong); border-radius: 4px; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--bg); transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-check { display: flex; align-items: flex-start; gap: 10px; }
.form-check input { width: auto; margin-top: 3px; flex-shrink: 0; }
.form-check label { font-size: 13px; color: var(--ink-soft); font-weight: 400; cursor: pointer; line-height: 1.5; }
.form-check a { color: var(--accent); text-decoration: underline; }
.form-success { display: none; margin-top: 16px; color: var(--accent); font-size: 14px; text-align: center; font-family: var(--serif); font-style: italic; }
.contact-direct { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.contact-direct-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 4px; }
.contact-direct-item { display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--ink-soft); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.contact-direct-item:last-child { border-bottom: none; }
.contact-direct-item svg { color: var(--accent); flex-shrink: 0; }
.contact-direct-item a { color: var(--ink); font-weight: 500; }
.contact-direct-item a:hover { color: var(--accent); }
.contact-direct-item .hint { font-size: 12px; color: var(--ink-mute); }
.wa-contact { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.wa-qr { display: block; background: #fff; padding: 8px; border-radius: 8px; flex-shrink: 0; transition: transform 0.2s; }
.wa-qr:hover { transform: translateY(-2px); }
.wa-qr img { width: 96px; height: 96px; display: block; }
.wa-contact-text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.wa-contact-text strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.wa-contact-text a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .wa-contact { flex-direction: column; align-items: flex-start; } }

/* Rechtsseiten */
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 26px; margin: 44px 0 14px; }
.legal-content p, .legal-content li { color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; }
.legal-content ul { padding-left: 20px; }
.todo-box { background: #FBF3DC; border: 1px dashed var(--gold); border-radius: 4px; padding: 18px 22px; font-size: 14px; color: #6B5B2E; margin: 24px 0; }

/* 8. MODAL (Kontakt-Weiche)
   ------------------------------------------------------------------ */
.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(31,36,25,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop.open { display: flex; }
.modal-card { background: var(--bg-card); border-radius: 8px; padding: 44px 40px; max-width: 460px; width: 100%; box-shadow: 0 32px 80px rgba(0,0,0,0.28); position: relative; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--ink-mute); line-height: 1; padding: 4px; }
.modal-card h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 10px; }
.modal-card > p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin-bottom: 28px; }
.modal-choices { display: flex; flex-direction: column; gap: 10px; }
.modal-choice { display: block; padding: 20px 24px; border-radius: 4px; transition: background 0.2s; }
.modal-choice-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.modal-choice-sub { font-size: 13px; opacity: 0.75; }
.modal-choice-dark { background: var(--ink); color: var(--bg); }
.modal-choice-dark:hover { background: var(--accent); }
.modal-choice-light { background: var(--bg-warm); color: var(--ink); border: 1px solid var(--rule-strong); }
.modal-choice-light:hover { background: var(--accent-light); }

/* 9. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .hero { padding: 56px 0 64px; }
  .hero-emblem { height: 260px; right: -60px; opacity: 0.14; }
  section { padding: 70px 0; }
  .audience-split { grid-template-columns: 1fr; }
  .audience-card { padding: 44px 32px; }
  .principles { grid-template-columns: 1fr; }
  .situations { grid-template-columns: 1fr 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-portrait { max-width: 340px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .process { grid-template-columns: 1fr 1fr; }
  .service-header { grid-template-columns: 1fr; gap: 24px; }
  .service-meta { position: relative; top: auto; }
  .service-num-big { font-size: 64px; margin-bottom: 12px; }
  .service-details, .service-details-3 { grid-template-columns: 1fr; gap: 24px; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .courses-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .course-item { grid-template-columns: auto 1fr; gap: 20px; }
  .course-action { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--rule); }
  .course-price-note { text-align: left; }
  .media-info-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .profile-strip { flex-direction: column; align-items: flex-start; }
  .photo-strip { height: 280px; }
  .photo-strip-caption { padding: 0 32px; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); flex-direction: column; gap: 0; padding: 16px 24px 24px; border-bottom: 1px solid var(--rule); align-items: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav-links .btn { margin-top: 12px; align-self: flex-start; border-bottom: none; }
  .mobile-toggle { display: block; }
  .service-nav { top: 0; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .hero { padding: 40px 0 50px; }
  .process { grid-template-columns: 1fr; }
  .situations { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-bottom a { margin-left: 0; margin-right: 16px; }
  .partner-grid { grid-template-columns: 1fr; }
  .course-item { grid-template-columns: 1fr; }
  .course-date { text-align: left; display: flex; gap: 14px; align-items: baseline; }
  .course-date .day { font-size: 32px; }
  .external-info { flex-direction: column; text-align: center; }
  .sonaria-logo-nav { height: 42px; }
  .logo .sonaria-name { font-size: 16px; }
  .logo .sonaria-claim { font-size: 8px; letter-spacing: 0.18em; }
  .logo-text { display: none; }
  .logo-divider { display: none; }
  .photo-strip { height: 220px; }
  .pioneer-inner { gap: 28px; }
  .mhfa-partner-block { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
}

/* ==========================================================================
   10. BEWEGUNG (v6) — dezente Animationen, komplett unter prefers-reduced-motion
   Reveal-Klassen werden per JS gesetzt; ohne JS bleibt alles sichtbar.
   ========================================================================== */
.nav { transition: box-shadow 0.3s ease, background 0.3s ease; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(31, 36, 25, 0.07); }
/* Intro-Logo & Scroll-Hinweis standardmäßig versteckt (ohne JS / reduzierte Bewegung) */
.intro-logo { display: none; }
.intro-bg { display: none; }
.intro-vorspann { display: none; }
.scroll-hint { display: none; }
.intro-run .scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 61; cursor: pointer; background: none; border: none;
  color: var(--accent); font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
}
.intro-run .scroll-hint-arrow { display: inline-flex; }
/* Intro-Bühne: erst wenn JS das Intro aktiviert (.intro-run), wird Hero +
   Partnerbanner per sticky festgehalten, damit die Seite optisch still steht. */
.intro-run .intro-sticky { position: sticky; top: var(--nav-h, 72px); }
/* Zielgröße des Emblems unten rechts (klein & voll sichtbar) auf der Startseite */
.has-intro .hero-emblem { height: 240px; right: 24px; bottom: 24px; }

@media (prefers-reduced-motion: no-preference) {

  /* Scroll-Reveal: sanftes Auf-/Einblenden beim Eintritt in den Viewport */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.22,0.61,0.36,1), transform 0.75s cubic-bezier(0.22,0.61,0.36,1); }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Hero-Emblem: dezentes Scroll-Parallax (per JS gesteuert). */
  .hero-emblem { will-change: transform; }

  /* Foto-Streifen (MHFA): Schärfe scroll-gekoppelt (per JS). Blur/Zoom starten
     unscharf und werden erst scharf, wenn der Streifen den oberen Rand erreicht. */
  .photo-strip img { transform: scale(1.12); filter: blur(12px); opacity: 0.5; will-change: transform, filter; }

  /* Badge-Punkt im Hero/Seiten-Hero: sanfter Puls */
  .badge-dot { animation: dot-pulse 2.8s ease-in-out infinite; }
  @keyframes dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }

  /* Partner-Leiste (Pioneer-Bar): Logos heben sich beim Hover leicht */
  .pioneer-logo { transition: transform 0.3s ease, opacity 0.3s ease; }
  .pioneer-logo:hover { transform: translateY(-2px); opacity: 1; }

  /* ---- Kein Vorab-Blitzer ----
     Ohne diese Regel zeigt der Browser die fertige Startseite einen
     Sekundenbruchteil lang, bevor main.js geladen ist und das Intro
     uebernimmt. Deshalb sind Startseite und Navigationsleiste von der
     allerersten Darstellung an unsichtbar; main.js schaltet die Notfall-
     Animation sofort ab und steuert die Sichtbarkeit selbst.
     Laeuft kein JavaScript (oder scheitert es), blendet die Notfall-
     Animation nach drei Sekunden trotzdem alles ein. */
  body.has-intro .intro-sticky,
  body.has-intro .nav {
    opacity: 0; animation: intro-notfall 0.6s ease-out 3s both;
  }
  @keyframes intro-notfall { from { opacity: 0; } to { opacity: 1; } }

  /* ---- INTRO (nur Startseite, .has-intro): Dolly-Zoom.
     Das Logo wächst dem Betrachter entgegen und blendet aus, während die
     Startseite (Hero + Partnerbanner) aus dem Hintergrund heranskaliert und
     einblendet. Die Seite steht dabei per sticky still; erst wenn alles zu
     100 % sichtbar ist, gibt das Intro das Weiterscrollen frei.
     JS steuert die Werte; ".intro-run" setzt den Startzustand. ---- */
  .intro-run .intro-logo {
    display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center;
    position: fixed; left: 50%; top: 50%; z-index: 60;
    width: min(80vw, 540px); opacity: 0.9; pointer-events: none;
    transform: translate(-50%, -50%); will-change: transform, opacity;
  }
  .intro-run .intro-logo img { width: 100%; height: auto; display: block; }
  .intro-run .intro-welcome {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(26px, 4.2vw, 40px); color: var(--accent); letter-spacing: 0.01em;
  }
  /* Startseite startet leicht verkleinert (aus dem Hintergrund) und unsichtbar */
  .intro-run .intro-sticky { opacity: 0; transform: scale(0.9); transform-origin: 50% 42%; will-change: opacity, transform; }
  /* obere Leiste (Nav) startet unsichtbar und blendet mit ein */
  .intro-run .nav { opacity: 0; }

  /* ---- Intro-Hintergrund (Landschaftsbild hinter "Herzlich willkommen").
     Liegt fest ueber der Startseite und unter Logo/Scroll-Hinweis. Beim
     Scrollen zieht das Bild leicht nach oben, waechst etwas heran und loest
     sich in das Creme der Seite auf, waehrend die Startseite darunter
     einblendet (Werte setzt main.js). Ohne JS / bei reduzierter Bewegung
     bleibt die Ebene unsichtbar. ---- */
  .intro-run .intro-bg {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 55; overflow: hidden; pointer-events: none;
    background: var(--bg); will-change: opacity;
  }
  .intro-run .intro-bg img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transform-origin: 50% 45%; will-change: transform;
    animation: intro-bg-ein 1.4s ease-out both, intro-bg-atmen 26s ease-in-out 1.4s infinite alternate;
  }
  /* Schleier: heller Kern hinter Logo und Begruessung (Lesbarkeit) und ein
     cremefarbener Auslauf am unteren Rand, der schon in die Seite ueberleitet */
  .intro-run .intro-bg::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background:
      radial-gradient(ellipse 60% 56% at 50% 52%, rgba(245,241,232,0.8) 0%, rgba(245,241,232,0.55) 45%, rgba(245,241,232,0) 80%),
      linear-gradient(180deg, rgba(245,241,232,0) 58%, rgba(245,241,232,0.55) 82%, rgba(245,241,232,0.92) 100%);
  }
  .intro-bg--see img { object-position: 60% 50%; }
  .intro-bg--gezeichnet img { object-position: 74% 50%; }
  /* Die Zeichnung ist selbst schon hell — dort genuegt ein leichterer Schleier */
  .intro-run .intro-bg--gezeichnet::after {
    background:
      radial-gradient(ellipse 60% 56% at 50% 52%, rgba(245,241,232,0.62) 0%, rgba(245,241,232,0.36) 48%, rgba(245,241,232,0) 80%),
      linear-gradient(180deg, rgba(245,241,232,0) 62%, rgba(245,241,232,0.5) 85%, rgba(245,241,232,0.9) 100%);
  }
  /* Hochformat: Schleier breiter ziehen, damit er Logo und Zeile ganz traegt */
  @media (max-aspect-ratio: 1/1) {
    .intro-run .intro-bg::after { background-size: 170% 100%, 100% 100%; background-position: center, center; background-repeat: no-repeat; }
  }
  /* Variante See: Das Foto ist kontrastreicher — Logo und Begruessung
     stehen deshalb voll deckend und bekommen einen weichen hellen Lichthof */
  .intro-run .intro-bg--see ~ .intro-logo { opacity: 1; }
  .intro-run .intro-bg--see ~ .intro-logo img {
    filter: drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85));
  }
  .intro-run .intro-bg--see ~ .intro-logo .intro-welcome {
    text-shadow: 0 0 4px rgba(245,241,232,0.95), 0 0 18px rgba(245,241,232,0.9);
  }
  /* ---- Varianten der Logo-Position ---- */
  /* Logo ohne Unterzeile ist hoeher als breit gebaut: etwas schmaler setzen */
  .intro-run .intro-logo--kompakt { width: min(60vw, 380px); gap: 36px; }
  /* Zeichnung: Logo + Begruessung oben links in der hellen, freien Flaeche */
  .intro-run .intro-logo--links { left: 29%; top: 37%; width: min(40vw, 470px); gap: 30px; }
  .intro-run .intro-bg--links::after {
    background:
      radial-gradient(ellipse 42% 48% at 29% 37%, rgba(245,241,232,0.62) 0%, rgba(245,241,232,0.3) 55%, rgba(245,241,232,0) 82%),
      linear-gradient(180deg, rgba(245,241,232,0) 62%, rgba(245,241,232,0.5) 85%, rgba(245,241,232,0.9) 100%);
  }
  /* Hochformat (Handy): dort gibt es die freie Flaeche links nicht —
     Logo wandert in den hellen Himmel oben mittig */
  @media (max-aspect-ratio: 1/1) {
    .intro-run .intro-logo--links { left: 50%; top: 34%; width: min(80vw, 420px); }
    .intro-run .intro-bg--links::after {
      background:
        radial-gradient(ellipse 85% 42% at 50% 34%, rgba(245,241,232,0.62) 0%, rgba(245,241,232,0.3) 55%, rgba(245,241,232,0) 82%),
        linear-gradient(180deg, rgba(245,241,232,0) 62%, rgba(245,241,232,0.5) 85%, rgba(245,241,232,0.9) 100%);
      background-size: auto;
    }
  }

  /* ---- Etwas Spiel ----
     1. Begruessung: Buchstabe fuer Buchstabe, langsam und weich aus einer
        leichten Unschaerfe (die Buchstaben setzt main.js einzeln)
     2. Logo: blendet danach ruhig und fein abgestuft ein — ueber gut drei
        Sekunden, von unscharf zu scharf — und schwebt dann kaum merklich
     3. Lichtfunken ueber dem Bild (Canvas, main.js); Bild folgt leicht der Maus */
  .intro-run .intro-welcome { white-space: nowrap; }
  .intro-run .intro-welcome .iw { display: inline-block; }
  .intro-run .intro-welcome .ib {
    display: inline-block; opacity: 0;
    animation: intro-buchstabe 1.05s cubic-bezier(0.33, 0, 0.2, 1) both;
    animation-delay: calc(0.35s + var(--i, 0) * 0.048s);
  }
  @keyframes intro-buchstabe {
    0%   { opacity: 0;    filter: blur(7px);   translate: 0 0.22em; }
    35%  { opacity: 0.35; filter: blur(3.5px); translate: 0 0.12em; }
    70%  { opacity: 0.8;  filter: blur(1px);   translate: 0 0.03em; }
    100% { opacity: 1;    filter: blur(0);     translate: 0 0; }
  }
  .intro-run .intro-logo img {
    animation: intro-logo-sanft 2.2s cubic-bezier(0.33, 0, 0.2, 1) 1.45s both,
               intro-schweben 7s ease-in-out 3.8s infinite alternate;
  }
  @keyframes intro-logo-sanft {
    0%   { opacity: 0;    scale: 0.975; filter: blur(12px); }
    20%  { opacity: 0.12; scale: 0.979; filter: blur(8px); }
    40%  { opacity: 0.38; scale: 0.985; filter: blur(4.5px); }
    60%  { opacity: 0.66; scale: 0.991; filter: blur(2px); }
    80%  { opacity: 0.88; scale: 0.997; filter: blur(0.6px); }
    100% { opacity: 1;    scale: 1;     filter: blur(0); }
  }
  /* Variante See: gleicher Verlauf, der helle Lichthof bleibt dabei erhalten */
  .intro-run .intro-bg--see ~ .intro-logo img {
    animation: intro-logo-sanft-see 2.2s cubic-bezier(0.33, 0, 0.2, 1) 1.45s both,
               intro-schweben 7s ease-in-out 3.8s infinite alternate;
  }
  @keyframes intro-logo-sanft-see {
    0%   { opacity: 0;    scale: 0.975; filter: blur(12px) drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
    20%  { opacity: 0.12; scale: 0.979; filter: blur(8px)   drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
    40%  { opacity: 0.38; scale: 0.985; filter: blur(4.5px) drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
    60%  { opacity: 0.66; scale: 0.991; filter: blur(2px)   drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
    80%  { opacity: 0.88; scale: 0.997; filter: blur(0.6px) drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
    100% { opacity: 1;    scale: 1;     filter: blur(0)     drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85)); }
  }
  /* bisheriger, kuerzerer Verlauf — nur noch fuer die Variante Sonar */
  @keyframes intro-logo-ein { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
  @keyframes intro-schweben { from { translate: 0 0; } to { translate: 0 -9px; } }
  .intro-run .intro-funken {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; opacity: 0; animation: intro-bg-ein 2s ease-out 1.2s both;
  }
  /* ---- Variante "Sonar": kein Foto, sondern eine lebendige Zeichnung.
     Erst ein Gewirr aus Linien (das Rauschen vieler Fragen), dann ordnen
     sich die Linien zu ruhigen Sonar-Ringen um das Logo. ---- */
  .intro-run .intro-bg--sonar {
    background:
      radial-gradient(ellipse 70% 65% at 50% 46%, #FBF8F2 0%, var(--bg) 55%, var(--bg-warm) 100%);
  }
  .intro-run .intro-bg--sonar::after { background: none; }
  .intro-run .intro-sonar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
  /* "Herzlich willkommen" taucht langsam aus dem Rauschen auf und loest
     sich wieder auf, sobald sich die Linien ordnen und das Logo erscheint */
  .intro-run .intro-vorspann {
    display: block; position: fixed; left: 50%; top: 47%; z-index: 60;
    transform: translate(-50%, -50%); width: min(92vw, 820px); text-align: center;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(34px, 5.2vw, 60px); line-height: 1.2; color: var(--accent);
    pointer-events: none; animation: intro-vorspann 3.9s ease-in-out 0.3s both;
  }
  @keyframes intro-vorspann {
    0%   { opacity: 0; filter: blur(12px); letter-spacing: 0.06em; }
    45%  { opacity: 1; filter: blur(0);    letter-spacing: 0.01em; }
    70%  { opacity: 1; filter: blur(0);    letter-spacing: 0.01em; }
    100% { opacity: 0; filter: blur(10px); letter-spacing: 0.03em; }
  }
  /* Logo (mit Unterzeile) kommt, waehrend die Begruessung sich aufloest */
  .intro-run .intro-logo--sonar { width: min(84vw, 560px); }
  .intro-run .intro-logo--sonar img {
    animation: intro-logo-ein 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 3.3s both,
               intro-schweben 6.5s ease-in-out 4.8s infinite alternate;
  }

  /* ---- Wasserspiegel-Begruessung (Startseite) ----
     "Herzlich willkommen" taucht wie auf einer Wasseroberflaeche auf: Die
     Schrift ist zunaechst vollstaendig verwellt, beruhigt sich, steht einen
     Moment ruhig da (mit leichtem Spiegelbild darunter) und zerfliesst dann
     wieder in Wellen. Die Verzerrung macht der SVG-Filter in index.html,
     das Auf- und Abblenden diese Animation. Danach erscheint das Logo. */
  .intro-run .intro-wasser {
    display: block; position: fixed; left: 50%; top: 45%; z-index: 60;
    transform: translate(-50%, -50%); width: min(92vw, 820px); text-align: center;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(34px, 5.6vw, 62px); line-height: 1.12; color: var(--accent);
    pointer-events: none; opacity: 0; will-change: opacity;
    filter: url(#wasserspiegel);
    animation: intro-wasser-auf 3s ease-in-out 0.2s both;
  }
  /* Spiegelbild auf der "Wasserflaeche" */
  .intro-run .intro-wasser::after {
    content: attr(data-text); display: block; margin-top: 0.02em;
    transform: scaleY(-0.92); opacity: 0.26; color: var(--accent-soft);
    filter: blur(0.9px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 85%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 85%);
  }
  @keyframes intro-wasser-auf {
    0%   { opacity: 0; }
    14%  { opacity: 0.45; }
    34%  { opacity: 1; }
    62%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* Logo: gross und mittig, kommt waehrend die Begruessung zerfliesst */
  .intro-run .intro-logo--gross { width: min(78vw, 540px); }
  .intro-run .intro-logo--gross img {
    animation: intro-logo-sanft 1.9s cubic-bezier(0.33, 0, 0.2, 1) 2.75s both,
               intro-schweben 7s ease-in-out 5s infinite alternate;
  }
  /* ---- Wasseroberflaeche von oben (WebGL) ----
     Sobald main.js das Wasser zeichnen kann, setzt es "wasser-gl" an den
     body. Dann uebernimmt die Leinwand Begruessung und Logo; Foto, CSS-Schrift
     und das DOM-Logo treten zurueck. Ohne WebGL bleibt alles wie zuvor. */
  .intro-run .intro-wasser-gl {
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  .intro-run.wasser-gl .intro-wasser-gl { display: block; animation: intro-bg-ein 0.9s ease-out both; }
  .intro-run.wasser-gl .intro-bg img,
  .intro-run.wasser-gl .intro-wasser { display: none; }
  .intro-run.wasser-gl .intro-logo { visibility: hidden; }
  .intro-run.wasser-gl .intro-bg::after {
    background: linear-gradient(180deg, rgba(245,241,232,0) 74%, rgba(245,241,232,0.78) 100%);
  }

  /* Wer sofort scrollt, soll nicht auf das Logo warten muessen */
  .intro-run .intro-logo.intro-sofort img {
    animation: intro-logo-sanft 0.7s ease-out 0s both,
               intro-schweben 7s ease-in-out 1.2s infinite alternate;
  }

  /* Grundzoom als Reserve, damit das Bild beim Mitgehen mit der Maus nie
     einen Rand zeigt */
  .intro-run .intro-bg img { scale: 1.04; }
  @keyframes intro-bg-ein { from { opacity: 0; } to { opacity: 1; } }
  /* kaum merkliches "Atmen", solange niemand scrollt ("scale" wirkt
     zusaetzlich zur Scroll-Transformation, beides stoert sich nicht) */
  @keyframes intro-bg-atmen { from { scale: 1.04; } to { scale: 1.085; } }
  /* ---- Nach dem ersten Durchlauf ----
     Scrollt jemand wieder ganz nach oben, kommt das Intro erneut ins Bild.
     Das Einblenden soll dann NICHT von vorn beginnen (sonst steht man kurz
     vor einer leeren Flaeche): Schrift und Logo sind sofort da, nur das
     ruhige Schweben und das Atmen des Bildes laufen weiter. */
  .intro-run .intro-logo.intro-gesehen .intro-welcome .ib {
    animation: none; opacity: 1; filter: none; translate: none;
  }
  .intro-run .intro-logo.intro-gesehen img,
  .intro-run .intro-bg--see ~ .intro-logo.intro-gesehen img,
  .intro-run .intro-logo--sonar.intro-gesehen img {
    animation: intro-schweben 7s ease-in-out infinite alternate;
    opacity: 1; scale: 1;
  }
  .intro-run .intro-logo.intro-gesehen img { filter: none; }
  .intro-run .intro-bg--see ~ .intro-logo.intro-gesehen img {
    filter: drop-shadow(0 0 3px rgba(245,241,232,0.95)) drop-shadow(0 0 14px rgba(245,241,232,0.85));
  }
  .intro-run .intro-bg.intro-gesehen img {
    animation: intro-bg-atmen 26s ease-in-out infinite alternate;
  }
  .intro-run .intro-bg.intro-gesehen .intro-funken { animation: none; opacity: 1; }

  /* Scroll-Hinweis: sanftes Auf-und-ab, damit klar ist, dass man scrollen muss */
  .intro-run .scroll-hint-arrow { animation: scroll-bounce 1.6s ease-in-out infinite; }
  @keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(7px); opacity: 1; }
  }
}


/* Kurze Bestaetigung, wenn eine E-Mail-Adresse kopiert wurde */
.copy-toast { position: fixed; left: 50%; bottom: 28px; z-index: 200;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: var(--bg); font-size: 14px; line-height: 1.4;
  padding: 13px 22px; border-radius: 4px; text-align: center;
  max-width: calc(100vw - 40px); opacity: 0; pointer-events: none;
  box-shadow: 0 10px 34px -12px rgba(31, 36, 25, 0.55);
  transition: opacity 0.25s ease, transform 0.25s ease; }
.copy-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .copy-toast { transition: none; } }


/* ==========================================================================
   HERO MIT FOTO (Startseite)
   Das Bild liegt formatfuellend hinter dem gesamten Hero — von der linken
   Kante bis zur Oberkante der Partnerleiste. Im Textbereich wird es nicht
   zugedeckt, sondern unscharf gerechnet und leicht aufgehellt: Der Text
   liegt auf ruhiger Flaeche, das Motiv bleibt als Tiefe erhalten.
   ========================================================================== */
.hero-photo { position: relative; overflow: hidden; }

/* Ebene 1 — das Foto, formatfuellend */
.hero-photo::before {
  content: ""; position: absolute; z-index: 0;
  /* .hero::before setzt fuer den Lichtfleck width/height auf 500px — beides
     muss hier ausdruecklich zurueckgesetzt werden, sonst bliebe das Foto in
     einem 500x500-Kaestchen oben links stecken. */
  top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  background: url('../img/hero-schreibtisch.jpg') 58% 72% / cover no-repeat;
  opacity: 1;
}

/* Ebene 2 — Weichzeichner ueber der linken Haelfte.
   backdrop-filter macht das Motiv dahinter unscharf, der Verlauf hellt auf,
   und die Maske laesst den Effekt nach rechts auslaufen, damit keine
   sichtbare Kante entsteht. */
.hero-photo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 66%; z-index: 1;
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  backdrop-filter: blur(16px) saturate(0.85);
  background: linear-gradient(90deg,
      rgba(245, 241, 232, 0.88) 0%,
      rgba(245, 241, 232, 0.84) 46%,
      rgba(245, 241, 232, 0.55) 78%,
      rgba(245, 241, 232, 0.00) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,0) 100%);
}

.hero-photo .hero-content { position: relative; z-index: 2; max-width: 620px; }
.hero-photo .hero-lead { max-width: 540px; }

@media (max-width: 900px) {
  /* Hochkant laeuft der Weichzeichner von oben nach unten aus */
  .hero-photo::before { background-position: 62% 66%; }
  .hero-photo::after {
    left: 0; width: 100%; bottom: 0;
    background: linear-gradient(180deg,
        rgba(245, 241, 232, 0.92) 0%,
        rgba(245, 241, 232, 0.86) 52%,
        rgba(245, 241, 232, 0.45) 84%,
        rgba(245, 241, 232, 0.00) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
  }
}

/* Ohne backdrop-filter (aeltere Browser) traegt allein der Verlauf */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hero-photo::after {
    background: linear-gradient(90deg,
        rgba(245, 241, 232, 0.95) 0%,
        rgba(245, 241, 232, 0.92) 46%,
        rgba(245, 241, 232, 0.62) 78%,
        rgba(245, 241, 232, 0.00) 100%);
  }
}

/* Der dritte Hero-Button steht auf dem Foto — durchsichtig waere dort unruhig.
   Er bekommt deshalb dieselbe Cremefarbe, die sonst erst beim Ueberfahren kam. */
.hero .btn-ghost { background: var(--bg-warm); border-color: var(--rule-strong); }
.hero .btn-ghost:hover { background: var(--accent-light); border-color: var(--ink); }