/* ============================================================
   Frauenärztin Petra Dohnt-Bertsch — Design-System "Ruhiger Puls"
   Editorial Care · Sand + Terrakotta · Fraunces × Inter
   ============================================================ */
:root{
  --color-bg:#F7F1E6; --color-surface:#EFE4D2; --color-surface-2:#E9DBC1;
  --color-fg:#2A2119; --color-muted:#6B5D4C;
  --color-primary:#BD5E39; --color-primary-deep:#8A4127;
  --color-sage:#7C8A66; --color-sage-deep:#5F6C4B;
  --color-border:#E2D4BE; --color-focus:#8A4127;

  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.75rem; --radius-xl:2.5rem;
  --shadow-sm:0 1px 2px rgb(42 33 25/.06); --shadow:0 12px 32px rgb(42 33 25/.10); --shadow-lg:0 24px 60px rgb(42 33 25/.16);

  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2rem,5vw,3.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.13em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);

  --bgHue:22; --bgShift:22%; --bgShift2:78%; --bgWarm:.35;
}
[data-theme="dark"]{
  --color-bg:#211A15; --color-surface:#3A2D1D; --color-surface-2:#2E2318;
  --color-fg:#EDE3D5; --color-muted:#B0A08C;
  --color-primary:#E08856; --color-primary-deep:#F0A377;
  --color-sage:#93A37C; --color-sage-deep:#B9C7A0;
  --color-border:#3A2E23; --color-focus:#E08856;
  --shadow-sm:0 1px 2px rgb(0 0 0/.3); --shadow:0 12px 32px rgb(0 0 0/.4); --shadow-lg:0 24px 60px rgb(0 0 0/.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background .5s ease,color .5s ease;
}
h1,h2,h3,h4{ font-family:"Fraunces",serif; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; font-weight:600; }
h1{ font-size:var(--text-h1); font-weight:600; }
h2{ font-size:var(--text-h2); }
h3{ font-size:var(--text-h3); font-weight:600; }
h4{ font-size:var(--text-h4); font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:1240px; margin:0 auto; padding-inline:1.5rem; }
@media(min-width:768px){ .wrap{ padding-inline:2.5rem; } }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-eyebrow); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-primary-deep); }
.eyebrow::before{ content:""; width:1.5rem; height:2px; background:var(--color-primary); border-radius:2px; }
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-muted); max-width:60ch; text-wrap:pretty; }
.prose{ max-width:65ch; }
.prose p + p{ margin-top:1rem; }
.balance{ text-wrap:balance; }

section{ position:relative; padding-block:clamp(3.5rem,8vw,7rem); }
.section-head{ max-width:46rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.6rem; border-radius:999px;
  font-weight:600; font-size:.98rem; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s; }
.btn:focus-visible{ outline:2px solid var(--color-focus); outline-offset:3px; }
.btn-primary{ background:var(--color-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--color-primary-deep); box-shadow:var(--shadow); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-primary); color:var(--color-primary-deep); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.88rem; }

/* ---------- Header ---------- */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:100; padding-block:1.1rem; color:var(--color-fg);
  background:color-mix(in oklch, var(--color-bg) 72%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .4s var(--ease-out), color .4s var(--ease-out), padding .3s, box-shadow .3s; }
.site-header .header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-bg) 90%, transparent); color:var(--color-fg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow-sm); padding-block:.75rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; }
.brand svg{ flex:none; width:34px; height:34px; }
.nav-links{ display:none; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; font-size:.95rem; font-weight:500; }
.nav-links a{ text-decoration:none; opacity:.9; position:relative; padding-block:.2rem; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:currentColor; border-radius:2px; transition:right .35s var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ opacity:1; font-weight:600; }
@media(min-width:900px){ .nav-links{ display:flex; } }
.nav-cta{ display:none; }
@media(min-width:900px){ .nav-cta{ display:inline-flex; } }
.burger{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
@media(min-width:900px){ .burger{ display:none; } }
.burger svg{ width:20px; height:20px; }

.mobile-menu{ position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg);
  display:flex; flex-direction:column; padding:6rem 1.75rem 2.5rem; gap:2rem; transform:translateY(-100%);
  transition:transform .5s var(--ease-out); }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; font-family:"Fraunces",serif; }
.mobile-menu a{ text-decoration:none; font-size:1.6rem; }
.mobile-menu .close-btn{ position:absolute; top:1.3rem; right:1.5rem; }

/* ---------- Ambient background (Aurora, permanent + scroll-coupled) ---------- */
.bg-scene{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-scene::before, .bg-scene::after{ content:""; position:absolute; inset:-10%; border-radius:50%; filter:blur(60px);
  animation:bgDrift 18s ease-in-out infinite; }
.bg-scene::before{
  background:radial-gradient(45% 45% at var(--bgShift) 28%, hsl(calc(18 + var(--bgHue)*0) 68% 68% / .38), transparent 70%);
}
.bg-scene::after{
  background:radial-gradient(40% 40% at var(--bgShift2) 74%, hsl(calc(8 + var(--bgHue)) 62% 56% / .30), transparent 68%);
  animation-delay:-9s;
}
@keyframes bgDrift{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(1.5%,-2%,0) scale(1.05); } }
[data-theme="dark"] .bg-scene::before{ background:radial-gradient(45% 45% at var(--bgShift) 28%, hsl(20 70% 40% / .28), transparent 70%); }
[data-theme="dark"] .bg-scene::after{ background:radial-gradient(40% 40% at var(--bgShift2) 74%, hsl(14 60% 30% / .28), transparent 68%); }

/* ---------- Cards ---------- */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:1.6rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.9rem; height:100%; }
.card-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--color-surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Philosophie-Split & FAQ ---------- */
.philo-grid{ grid-template-columns:1fr; }
@media(min-width:900px){ .philo-grid{ grid-template-columns:1fr 1fr; } }
.faq-item summary{ position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg{ transition:transform .3s var(--ease-out); flex:none; }
.faq-item[open] summary svg{ transform:rotate(180deg); }

/* ---------- Page-Hero (Unterseiten) ---------- */
.page-hero{ padding-top:9.5rem; padding-bottom:3.5rem; }
.page-hero-grid{ display:grid; gap:2.5rem; align-items:center; grid-template-columns:1fr; }
@media(min-width:960px){ .page-hero-grid{ grid-template-columns:1.1fr .9fr; gap:3.5rem; } }
.page-hero-media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/11; box-shadow:var(--shadow-lg); }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:767px){ .page-hero{ padding-top:7rem; } }

/* ---------- Vita-Zeitleiste (animierte Infografik) ---------- */
.vita-line{ position:relative; padding-left:0; }
.vita-line svg{ position:absolute; left:0; top:0; height:100%; width:2px; overflow:visible; }
@media(min-width:768px){ .vita-line svg{ left:50%; margin-left:-1px; } }
.vita-stop{ position:relative; padding:0 0 2.75rem 2.75rem; }
@media(min-width:768px){ .vita-stop{ width:50%; padding:0 0 3.5rem 3rem; }
  .vita-stop:nth-child(even){ margin-left:50%; }
  .vita-stop:nth-child(odd){ text-align:right; padding:0 3rem 3.5rem 0; margin-right:0; } }
.vita-dot{ position:absolute; left:-.4rem; top:.3rem; width:.9rem; height:.9rem; border-radius:999px; background:var(--color-primary);
  box-shadow:0 0 0 5px var(--color-bg), 0 0 0 6px var(--color-border); }
@media(min-width:768px){ .vita-stop:nth-child(odd) .vita-dot{ left:auto; right:-.5rem; } }
.vita-year{ font-family:"Fraunces",serif; font-size:1.5rem; color:var(--color-primary-deep); font-weight:600; }

/* ---------- Praxis-Galerie ---------- */
.gallery-item{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.gallery-item:hover img{ transform:scale(1.05); }

/* ---------- Split hero ---------- */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:6rem; padding-bottom:3rem; position:relative; }
.hero-grid{ display:grid; gap:2.5rem; align-items:center; grid-template-columns:1fr; }
@media(min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:3.5rem; } }
.hero-media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-pulse-wrap{ position:absolute; left:0; right:0; bottom:1.4rem; height:70px; z-index:2; opacity:.92; pointer-events:none; }
.hero-pulse-wrap svg{ width:100%; height:100%; display:block; }
@media(min-width:960px){ .hero{ padding-top:0; } }

/* ---------- Footer ---------- */
.site-footer{ position:relative; padding-block:var(--space-2xl) var(--space-lg); border-top:1px solid var(--color-border); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-bottom:2.75rem; }
@media(min-width:800px){ .footer-grid{ grid-template-columns:1.2fr .9fr .9fr; } }
.footer-nav-list, .footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.footer-nav-list a, .footer-contact a{ text-decoration:none; opacity:.85; }
.footer-nav-list a:hover, .footer-contact a:hover{ opacity:1; color:var(--color-primary-deep); }
.footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
  padding-top:1.75rem; border-top:1px solid var(--color-border); padding-bottom:15px; }
.footer-legal-links{ display:flex; flex-wrap:wrap; gap:1.25rem; list-style:none; margin:0; padding:0; font-size:.88rem; }
.footer-legal-links a{ text-decoration:none; opacity:.8; }
.footer-legal-links a:hover{ opacity:1; }
.footer-demo-note{ font-size:.8rem; opacity:.6; max-width:60ch; margin-top:1rem; }

/* ---------- Theme toggle ---------- */
.theme-toggle{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; flex:none; }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .i-sun{ display:none; } [data-theme="dark"] .theme-toggle .i-sun{ display:block; } [data-theme="dark"] .theme-toggle .i-moon{ display:none; }

/* ---------- Utilities ---------- */
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
[data-reveal] > *{ display:block; }
[data-split]{ overflow:hidden; }
[data-tilt]{ transform-style:preserve-3d; }
.tag-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:999px; background:var(--color-surface);
  border:1px solid var(--color-border); font-size:.82rem; font-weight:600; color:var(--color-primary-deep); }
.divider-line{ height:1px; background:var(--color-border); border:0; margin:0; }

/* Preloader */
#preloader{ position:fixed; inset:0; z-index:999; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
#preloader svg{ width:120px; height:60px; }
#preloader path{ fill:none; stroke:var(--color-primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* CDN-/JS-Fail-Safe: fehlt GSAP, sofort alles sichtbar lassen */
.no-anim [data-reveal] > *, .no-anim [data-reveal-up], .no-anim [data-split],
.no-anim [data-img-resolve], .no-anim [data-depth]{ opacity:1!important; transform:none!important; clip-path:none!important; filter:none!important; }
.no-anim #preloader{ display:none!important; }

/* Reduced-motion — dämpfen, nicht killen */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important; }
  .marquee,[data-parallax],[data-depth]{ animation:none!important; }
  .bg-scene::before,.bg-scene::after{ animation-duration:110s!important; }
}

/* Mobile fine-tuning */
@media(max-width:767px){
  section{ padding-block:3rem; }
  .hero-pulse-wrap{ height:46px; bottom:1rem; }
}