/* ==========================================================================
   Little Soul — „Sanft & einladend" (Konzept C)
   Warm · ruhig · modern. Weiche Formen, dezente Farbflächen, Gold-Akzente.
   Styleguide-Farben & -Schriften exakt nach Briefing.
   ========================================================================== */

:root{
  --mauve:#6F5C8F;      /* Primär: Buttons, Links, Akzente */
  --mauve-d:#5a4a76;
  --gold:#C8A36A;       /* Akzent: Icons, feine Linien */
  --sage:#AAB8A2;       /* Naturakzent, dezent */
  --offwhite:#FAF8F5;   /* Seitenhintergrund */
  --beige:#F4F0EB;      /* Karten-/Sektionshintergrund */
  --ink:#3C3A3A;        /* Fließtext */
  --aubergine:#2B2434;  /* Überschriften, dunkle Flächen */
  --grey:#777777;       /* Sekundärtext */

  --maxw:1080px;
  --radius:20px;
  --shadow:0 18px 44px -24px rgba(43,36,52,.35);
  --nav-h:74px;
}

/* ------------------------------ Base ------------------------------ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h);}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink); background:var(--offwhite);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; line-height:1.12; color:var(--aubergine);}
h1{font-size:clamp(2.6rem,5vw,3.9rem);}
h2{font-size:clamp(2rem,3.6vw,2.8rem);}
h3{font-size:1.5rem;}
p{margin:0;}
a{color:var(--mauve); text-decoration:none; transition:color .2s;}
a:hover{color:var(--mauve-d);}
img{max-width:100%; display:block;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.container.narrow{max-width:760px;}
.center{text-align:center;}

.eyebrow{font-family:'Manrope'; font-weight:600; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);}
.script,.script-lead{font-family:'Allura',cursive; font-weight:400;}
.script-lead{display:block; font-size:2rem; color:var(--sage); line-height:1; margin-bottom:6px;}
.script-lead.center{text-align:center;}
.script-lead.light{color:var(--gold);}

section{padding:clamp(56px,8vw,92px) 0;}
section.alt{background:var(--beige);}

/* ------------------------------ Buttons ------------------------------ */
.btn{display:inline-block; font-family:'Manrope'; font-weight:600; font-size:.9rem;
  padding:.85em 1.7em; border-radius:999px; cursor:pointer; border:none; transition:.2s; text-align:center;}
.btn-mauve{background:var(--mauve); color:#fff;}
.btn-mauve:hover{background:var(--mauve-d); color:#fff;}
.btn-ghost{border:1.5px solid rgba(60,58,58,.3); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--mauve); color:var(--mauve);}
.btn-gold{background:var(--gold); color:#3a2c14;}
.btn-gold:hover{filter:brightness(1.05); color:#3a2c14;}
.btn-wide{width:100%; padding:1em;}

/* ------------------------------ Foto-Platzhalter ------------------------------ */
.ph{position:relative; background:
    radial-gradient(120% 90% at 18% 12%, rgba(200,163,106,.5), transparent 55%),
    radial-gradient(120% 100% at 85% 85%, rgba(111,92,143,.5), transparent 55%),
    linear-gradient(135deg,#efe7dd,#dccfc1);}
.ph::after{content:attr(data-label); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:1em;
  color:rgba(43,36,52,.5); font-size:.78rem; letter-spacing:.05em; font-weight:600;}

/* ------------------------------ Navigation ------------------------------ */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(250,248,245,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:.25s;}
.site-nav.scrolled{border-bottom-color:rgba(43,36,52,.08); box-shadow:0 6px 24px -18px rgba(43,36,52,.5);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:0 32px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; line-height:1;}
.brand-logo{height:52px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{color:var(--ink); font-weight:500; font-size:.92rem;}
.nav-links a:hover{color:var(--mauve);}
.nav-links a.nav-cta{color:#fff;}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav-burger span{width:24px; height:2px; background:var(--aubergine); border-radius:2px; transition:.25s;}

/* ------------------------------ Hero ------------------------------ */
.hero{position:relative; overflow:hidden; background:var(--beige);
  padding:clamp(40px,6vw,68px) 0 clamp(56px,8vw,88px);}
.blob{position:absolute; border-radius:50%; filter:blur(14px); opacity:.42; pointer-events:none;}
.blob-1{width:380px; height:380px; background:var(--sage); top:-120px; right:-90px;}
.blob-2{width:300px; height:300px; background:var(--gold); bottom:-130px; left:-80px; opacity:.3;}
.hero-inner{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,60px); align-items:center;}
.hero-text .eyebrow{display:block; margin-bottom:16px;}
.hero-text h1 .script{display:block; font-size:clamp(2.4rem,4.6vw,3.4rem); color:var(--mauve); line-height:1; margin-top:2px;}
.hero-text p{margin:22px 0 30px; max-width:30em; color:var(--ink);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-photo{aspect-ratio:3/4; border-radius:210px 210px var(--radius) var(--radius);
  box-shadow:0 30px 60px -28px rgba(111,92,143,.5); overflow:hidden;}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ph.has-video::after{content:none;}

/* ------------------------------ Manifest ------------------------------ */
.manifest{text-align:center; background:var(--offwhite);}
.manifest-text{font-family:'Cormorant Garamond'; font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--ink); line-height:1.5;}
.manifest-text + .manifest-text{margin-top:1.1em;}

/* ------------------------------ Prinzipien ------------------------------ */
.principles{background:var(--offwhite); padding-top:0;}
.principles-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.principle{background:#fff; border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow); text-align:center;}
.p-ic{display:inline-flex; width:52px; height:52px; border-radius:16px; background:rgba(111,92,143,.1);
  align-items:center; justify-content:center; margin-bottom:16px;}
.p-ic svg{width:26px; height:26px; fill:var(--gold);}
.principle h3 em{font-style:italic; color:var(--gold); display:block; font-size:1.15rem; margin-top:2px;}
.principle p{color:var(--grey); font-size:.92rem; margin-top:12px;}

/* ------------------------------ Für wen ------------------------------ */
/* Flexbox statt festem Grid: so zentriert sich eine "übrige" Karte in der
   letzten Reihe automatisch, egal ob es 4, 5 oder später mal mehr Karten sind.
   Kartenbreite ist bewusst auf 3 pro Reihe ausgelegt (3+2), damit bei fünf
   Karten die letzte Reihe zu zweit steht statt einzeln unter einer vollen Reihe. */
.aud-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:40px;}
.aud-card{flex:1 1 260px; max-width:300px; background:#fff; border-radius:var(--radius);
  padding:30px 24px; box-shadow:var(--shadow); text-align:center; overflow:hidden;}
.aud-photo{margin:-30px -24px 18px; aspect-ratio:16/11; overflow:hidden;}
.aud-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.aud-card p{color:var(--grey); font-size:.88rem; margin-top:10px;}

/* ------------------------------ Angebot ------------------------------ */
.offers{background:var(--offwhite);}
.offers-intro{max-width:44em; margin:18px auto 0; color:var(--grey);}

/* Der Weg in drei Schritten */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; align-items:stretch;}
.step{position:relative; background:#fff; border-radius:var(--radius); padding:38px 28px 30px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:center;}
.step-num{position:absolute; top:14px; left:22px; font-size:2.4rem; color:var(--gold); line-height:1; opacity:.85;}
.step h3{font-size:1.7rem;}
.step-sub{font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-top:4px;}
.step > p:not(.step-sub){color:var(--grey); font-size:.92rem; margin-top:14px; flex:1;}
.step-meta{margin-top:18px; display:flex; flex-direction:column; gap:2px;}
.step-price{font-family:'Cormorant Garamond'; font-size:1.7rem; color:var(--mauve); line-height:1.1;}
.step-dur{font-size:.78rem; letter-spacing:.05em; color:var(--grey);}
.step .btn{margin-top:16px; align-self:center;}
.step-doc-link{margin-top:14px; font-size:.8rem; color:var(--grey); text-decoration:underline;
  text-underline-offset:2px; align-self:center;}
.step-doc-link:hover{color:var(--mauve);}
.step-featured .step-doc-link{color:rgba(255,255,255,.75);}
.step-featured .step-doc-link:hover{color:#fff;}
.step-featured{background:var(--mauve);}
.step-featured h3{color:#fff;}
.step-featured .step-sub{color:#e7d3ae;}
.step-featured > p:not(.step-sub){color:rgba(255,255,255,.85);}
.step-featured .step-num{color:#e7d3ae;}
.step-featured .step-price{color:#f0e6d4;}
.step-featured .step-dur{color:rgba(255,255,255,.65);}

.offers-focus{max-width:40em; margin:30px auto 0; font-family:'Cormorant Garamond'; font-size:1.25rem; color:var(--ink);}
.offers-focus strong{color:var(--mauve); font-weight:600;}

/* Angebot: Gespräch + Reflexions-Unterlagen in echt */
.offer-photos{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;}
.offer-photos figure{margin:0;}
.offer-photos img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow);}
.offer-photos figcaption{margin-top:10px; text-align:center; color:var(--grey); font-size:.85rem;}

/* Soul Circle: eigenständiges Online-Format, bewusst abgesetzt */
.circle-box{display:flex; align-items:center; gap:34px; margin-top:36px;
  background:rgba(170,184,162,.28); border:1px solid rgba(170,184,162,.55);
  border-radius:var(--radius); padding:32px 36px;}
.circle-body h3{font-size:1.8rem; margin-top:2px;}
.circle-body > p:not(.step-sub){color:var(--ink); font-size:.95rem; margin-top:10px; max-width:44em;}
.circle-meta{margin-left:auto; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right;}
.circle-meta .btn{margin-top:12px;}
.offers-note{margin-top:26px; color:var(--grey); font-size:.95rem;}

.offers-banner{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:32px; overflow:hidden; aspect-ratio:21/9;}
.offers-banner img,.offers-banner video{width:100%; height:100%; object-fit:cover; display:block;}

/* ------------------------------ Über mich ------------------------------ */
.about{position:relative; overflow:hidden;}
.about-blob-1{width:340px; height:340px; background:var(--sage); top:-100px; left:-110px; opacity:.35;}
.about-blob-2{width:260px; height:260px; background:var(--gold); bottom:-90px; right:-70px; opacity:.28;}
.about-grid{position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,56px); align-items:center;}
.about-photo{aspect-ratio:3/4; border-radius:180px 180px var(--radius) var(--radius);
  box-shadow:0 26px 55px -26px rgba(111,92,143,.5); overflow:hidden; position:relative;}
.about-photo::after{content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 10px rgba(250,248,245,.55);}
.about-photo img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
.about-body .script-lead{color:var(--mauve);}
.about-body h2{margin-top:6px;}
.about-body p{margin-top:16px; color:var(--ink);}
.about-body p:last-of-type{color:var(--aubergine); font-family:'Cormorant Garamond'; font-style:italic;
  font-size:1.12rem; line-height:1.5;}

/* ------------------------------ Zitat ------------------------------ */
.quote-band{position:relative; background-size:cover; background-position:center;
  background-repeat:no-repeat; overflow:hidden;}
.quote-overlay{position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(43,36,52,.55), rgba(43,36,52,.68));}
.quote-band .container{position:relative; z-index:1;}
.quote-band blockquote p{font-family:'Cormorant Garamond'; font-style:italic;
  font-size:clamp(1.5rem,3vw,2rem); color:#fff; line-height:1.35;}
.quote-band cite{display:block; font-size:2rem; color:var(--gold); margin-top:16px; font-style:normal;}

/* ------------------------------ Stimmen ------------------------------ */
.testimonials{background:var(--mauve);}
.testimonials .script-lead{color:#f0e6d4;}
.test-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
.test{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius); padding:28px 26px;}
.test p{font-family:'Cormorant Garamond'; font-style:italic; font-size:1.25rem; color:#fff; line-height:1.4;}
.test cite{display:block; color:rgba(255,255,255,.6); font-size:.76rem; font-style:normal; margin-top:16px;}

/* ------------------------------ Kontakt ------------------------------ */
.contact{background:var(--beige);}
.contact-lead{max-width:44em; margin:14px auto 0; color:var(--ink);}
.contact-lead + .contact-lead{margin-top:.85em;}
.booking-embed{max-width:760px; margin:40px auto 0; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:#fff;}
/* Offizielles meetergo-Widget (Hauptvariante) — passt seine Höhe per data-resize selbst an
   den tatsächlichen Inhalt an. Die Mindesthöhe ist bewusst niedrig gehalten (nur als Schutz
   gegen einen kurzen leeren Sprung beim Laden) — ein zu hoher fester Wert hätte sonst einen
   viel zu großen weißen Rand um den eigentlichen Kalender erzeugt. */
.booking-embed .meetergo-iframe{min-height:420px; width:100%; display:block;}

/* Rückfalllösung, falls das offizielle Skript blockiert wird: per Vorgabe unsichtbar,
   wird nur per JS eingeblendet (Klasse .is-visible), wenn das Widget leer geblieben ist.
   Auf schmalen Bildschirmen wird das iframe bewusst in "voller Breite" gerendert und dann
   per CSS-Skalierung auf die verfügbare Breite heruntergerechnet — das lässt den Kalender
   von meetergo intakt und vollständig statt abgeschnitten erscheinen. */
.meetergo-fallback-wrap{display:none;}
.meetergo-fallback-wrap.is-visible{display:block;}
.meetergo-fallback{width:100%; height:550px; display:block; border:0;}
@media (max-width:680px){
  .meetergo-fallback-wrap{overflow:hidden;
    height:calc(680px * ((100vw - 64px) / 640px));}
  .meetergo-fallback{width:640px; height:680px; transform-origin:top left;
    transform:scale(calc((100vw - 64px) / 640px));}
}
.booking-alt-link{margin-top:14px; text-align:center; font-size:.82rem;}
.booking-alt-link a{color:var(--grey); text-decoration:underline; text-underline-offset:2px;}
.booking-alt-link a:hover{color:var(--mauve);}
.contact-or{margin:20px auto 0; color:var(--grey); font-size:.95rem;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,56px); align-items:stretch;
  margin-top:32px;}
.contact-intro{background:#fff; border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);}
.contact-intro h3{font-size:1.3rem;}
.contact-intro p{color:var(--ink); margin-top:14px;}
.contact-direct{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:18px;}
.contact-direct li{display:flex; align-items:center; gap:12px; font-size:.95rem;}
.cd-icon{flex-shrink:0; display:inline-flex; width:28px; height:28px; border-radius:9px;
  background:rgba(111,92,143,.1); align-items:center; justify-content:center;}
.cd-icon svg{width:13px; height:13px; color:var(--mauve);}
.cd-text{display:flex; flex-direction:column; gap:2px;}
.cd-label{color:var(--grey); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;}
.cd-text a{color:var(--ink); font-weight:500;}
.cd-text a:hover{color:var(--mauve);}
.contact-form{background:#fff; border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);}
.form-row{margin-bottom:16px; display:flex; flex-direction:column;}
.form-row label{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey); margin-bottom:6px;}
.form-row input,.form-row select,.form-row textarea{
  font-family:'Manrope'; font-size:1rem; color:var(--ink); background:var(--offwhite);
  border:1.5px solid rgba(43,36,52,.12); border-radius:12px; padding:.7em .9em; transition:.2s; resize:vertical;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none; border-color:var(--mauve); background:#fff;}
.form-note{margin-top:12px; font-size:.9rem; color:var(--mauve); min-height:1.2em;}

/* ------------------------------ Footer ------------------------------ */
.site-footer{background:var(--aubergine); color:#fff; padding:56px 0 34px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; align-items:start;}
.footer-logo{height:74px; width:auto; display:block;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(255,255,255,.35));}
.footer-brand p{color:rgba(255,255,255,.6); font-size:.9rem; margin-top:18px;}
.footer-social{display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  color:rgba(255,255,255,.75); font-size:.9rem;}
.footer-social:hover{color:var(--gold);}
.footer-phone{margin-top:10px;}
.footer-phone a{color:rgba(255,255,255,.75); font-size:.9rem;}
.footer-phone a:hover{color:var(--gold);}
.footer-nav{display:flex; flex-direction:column; gap:10px;}
.footer-nav a,.footer-legal a{color:rgba(255,255,255,.75); font-size:.9rem;}
.footer-nav a:hover,.footer-legal a:hover{color:var(--gold);}
.footer-legal{display:flex; flex-direction:column; gap:10px;}
.footer-legal p{color:rgba(255,255,255,.45); font-size:.8rem; margin-top:8px;}

/* ------------------------------ Reveal-Animation ------------------------------ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ------------------------------ Rechtstexte (Impressum/Datenschutz) ------------------------------ */
.legal-page{background:var(--offwhite); min-height:60vh;}
.legal-page h1{margin-top:6px; font-size:clamp(1.9rem,3.4vw,2.6rem);}
.legal-page h2{font-family:'Manrope'; font-weight:700; font-size:1.05rem; letter-spacing:.02em;
  color:var(--aubergine); margin-top:36px; margin-bottom:8px;}
.legal-page p{color:var(--ink); margin-top:10px; line-height:1.75;}
.legal-page ul{margin-top:10px; padding-left:22px;}
.legal-page li{margin-top:6px; line-height:1.65; color:var(--ink);}
.legal-page a{text-decoration:underline; text-underline-offset:2px;}
.legal-page .back-link{display:inline-block; margin-top:44px; font-weight:600; text-decoration:none;}
.legal-page .back-link:hover{text-decoration:underline;}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:900px){
  .aud-card{flex-basis:220px; max-width:260px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-burger{display:flex;}
  .nav-links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--offwhite); border-bottom:1px solid rgba(43,36,52,.1);
    padding:10px 32px 20px; transform:translateY(-130%); transition:transform .3s ease; box-shadow:var(--shadow);}
  .nav-links.open{transform:none;}
  .nav-links a{width:100%; padding:14px 0; border-bottom:1px solid rgba(43,36,52,.07);}
  .nav-links a.nav-cta{margin-top:12px; border-bottom:none; text-align:center;}
  .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger.open span:nth-child(2){opacity:0;}
  .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .hero-inner,.about-grid,.contact-grid{grid-template-columns:1fr;}
  .hero-photo{aspect-ratio:4/3; border-radius:140px 140px var(--radius) var(--radius); max-height:420px;}
  .about-photo{max-width:360px;}
  .principles-row,.test-row,.steps,.offer-photos{grid-template-columns:1fr;}
  .aud-card{flex-basis:100%; max-width:420px;}
  .step .btn{width:100%;}
  .circle-box{flex-direction:column; align-items:flex-start;}
  .circle-meta{margin-left:0; align-items:flex-start; text-align:left; width:100%;}
  .circle-meta .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
}