/* ============================================================
   Cranio Martin – Cranio Sacral Balancing
   Refined brand landing page
   ============================================================ */

:root{
  /* Brand palette – derived from the watercolour heart & existing site */
  --cream:      #F1ECE5;
  --cream-deep: #E9E2D8;
  --paper:      #FBF9F5;
  --ink:        #3B2E34;   /* dark plum-brown text */
  --ink-soft:   #5c4f54;
  --body:       #4f4a48;
  --mauve:      #7A6470;
  --mauve-deep: #4A3843;   /* footer / quote */
  --gold:       #C39A3E;
  --gold-deep:  #A87F2C;
  --gold-soft:  #EEDFB8;
  --sage:       #9DAE92;
  --sage-soft:  #C7D2BE;
  --line:       #E0D8CC;
  --shadow:     22px 40px 80px -40px rgba(74,56,67,.45);
  --shadow-sm:  0 14px 34px -20px rgba(74,56,67,.4);

  --serif: "Cormorant Garamond", Georgia, serif;
  --caps:  "Cinzel", Georgia, serif;
  --sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --r: 18px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--body);
  background:var(--cream);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

a{ color:var(--gold-deep); text-decoration:none; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--mauve-deep); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ---------- Headings ---------- */
h1,h2,h3{ color:var(--ink); font-weight:500; line-height:1.12; margin:0; }

.eyebrow{
  font-family:var(--caps);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--gold-deep);
  margin:0 0 .8rem;
  font-weight:500;
}

.section-head h2, .about-content h2, .hero-title{
  font-family:var(--serif);
}

/* ============ BUTTONS ============ */
.btn{
  --btn-bg:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  letter-spacing:.01em;
  padding:.85em 1.7em; border-radius:100px;
  cursor:pointer; border:1.5px solid transparent;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:#fff;
  box-shadow:0 12px 26px -12px rgba(168,127,44,.75);
}
.btn-gold:hover{ background:linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-deep) 100%); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--mauve);
}
.btn-ghost:hover{ background:var(--mauve); color:#fff; }
.btn-sm{ padding:.55em 1.2em; font-size:.9rem; }
.btn-lg{ padding:1em 2.2em; font-size:1.08rem; }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(241,236,229,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(74,56,67,.5);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; }

.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand-mark{ width:46px; height:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-title{ font-family:var(--caps); font-size:1.02rem; letter-spacing:.06em; color:var(--ink); }
.brand-sub{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mauve); }

.nav{ display:flex; align-items:center; }
.nav-list{
  list-style:none; display:flex; align-items:center; gap:.35rem; margin:0; padding:0;
}
.nav-list a{
  color:var(--ink-soft); font-weight:600; font-size:.94rem;
  padding:.5rem .85rem; border-radius:100px; letter-spacing:.02em;
  transition:color .2s ease, background .2s ease;
}
.nav-list a:not(.btn):hover{ color:var(--ink); background:rgba(122,100,112,.1); }
.nav-cta a{ color:#fff !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  background:var(--cream);
  text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('assets/hero-texture.jpg') center/cover no-repeat;
  opacity:.5;
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(72% 66% at 50% 42%, rgba(241,236,229,.92) 0%, rgba(241,236,229,.55) 46%, rgba(241,236,229,0) 78%),
    linear-gradient(to bottom, rgba(241,236,229,.45) 0%, rgba(241,236,229,0) 22%, rgba(241,236,229,.55) 100%);
}
.hero-inner{ position:relative; z-index:1; padding:64px 24px 88px; display:flex; flex-direction:column; align-items:center; }
.hero-logo{
  width:min(220px, 46vw); height:auto; margin-bottom:1.4rem;
  filter:drop-shadow(0 18px 30px rgba(74,56,67,.22));
}

.hero-eyebrow{
  font-family:var(--caps); text-transform:uppercase; letter-spacing:.24em;
  font-size:.74rem; color:var(--gold-deep); margin:0 0 .5rem;
}
.hero-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 6.5vw, 4.4rem);
  letter-spacing:.01em; margin:0;
  line-height:1.22; padding-bottom:.12em;
  background:linear-gradient(180deg, var(--ink) 20%, var(--mauve) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-name{
  font-family:var(--caps); font-size:clamp(1rem,2.2vw,1.25rem);
  letter-spacing:.12em; color:var(--mauve); margin:.4rem 0 0; text-transform:uppercase;
}
.hero-lead{
  max-width:600px; margin:1.5rem auto 0; font-size:1.12rem; color:var(--ink-soft);
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem; }

/* ============ QUOTE BAND ============ */
.quote-band{
  background:linear-gradient(135deg, var(--mauve) 0%, var(--mauve-deep) 100%);
  color:#F3ECEF; text-align:center; padding:56px 0;
}
.quote{ margin:0; max-width:820px; margin-inline:auto; }
.quote p{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.35rem, 3vw, 1.9rem); line-height:1.4; margin:0;
}
.quote cite{
  display:block; margin-top:1rem; font-family:var(--caps); font-style:normal;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft);
}

/* ============ SECTIONS ============ */
.section{ padding:96px 0; }
.section-head{ max-width:720px; margin:0 auto 3.2rem; text-align:center; }
.section-head h2{ font-size:clamp(2rem, 4.4vw, 2.9rem); }
.section-desc{ margin:1.1rem auto 0; color:var(--ink-soft); font-size:1.08rem; max-width:620px; }

/* ---- Intro ---- */
.intro{ background:var(--paper); }
.intro-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:3.5rem; align-items:center; }
.intro-text .lead{ font-size:1.25rem; color:var(--ink); line-height:1.6; }
.intro-text .lead strong{ color:var(--gold-deep); font-weight:700; }
.intro-media{ margin:0; }
.intro-media img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow); }
.intro-facts{ list-style:none; margin:2.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.intro-facts li{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem;
}
.fact-ico{ font-size:1.5rem; line-height:1; }
.intro-facts strong{ color:var(--ink); }

/* ---- Services / cards ---- */
.cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--cream-deep); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:1.8rem 1.9rem 2rem; }
.card-body--full{ padding:2.2rem 2rem; }
.card:last-child{ grid-column:1 / -1; }
.card-body h3{ font-family:var(--serif); font-size:1.7rem; font-weight:600; margin-bottom:1.1rem; }
.card-badge{
  display:inline-block; font-family:var(--caps); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); background:var(--gold-soft);
  padding:.3em .9em; border-radius:100px; margin-bottom:.9rem;
}

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ticks--two{ grid-template-columns:repeat(2, 1fr); gap:.55rem 1.6rem; }
.ticks li{ position:relative; padding-left:1.7rem; color:var(--body); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold), var(--gold-deep));
}
.card-note{ margin-top:1.3rem; font-size:.98rem; color:var(--ink-soft); font-style:italic; }

.disclaimer{
  max-width:820px; margin:3rem auto 0; text-align:center; font-size:.9rem;
  color:var(--ink-soft); background:var(--cream); border:1px dashed var(--line);
  border-radius:14px; padding:1.3rem 1.6rem;
}

/* ---- Atmosphäre-Band ---- */
.banner{ position:relative; isolation:isolate; }
.banner-img{ width:100%; height:min(62vh, 540px); object-fit:cover; display:block; }
.banner::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(59,46,52,.42) 0%, rgba(59,46,52,.55) 100%);
}
.banner-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; text-align:center; padding:24px;
}
.banner-text{
  color:#fff; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem, 3.6vw, 2.5rem); line-height:1.3; max-width:780px; margin:0;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}

/* ---- Ablauf ---- */
.ablauf{ background:var(--paper); }
.ablauf-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; margin-bottom:3.4rem; }
.meta-pill{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.8rem; min-width:230px;
}
.meta-label{ font-family:var(--caps); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.meta-val{ font-weight:700; color:var(--ink); }

.timeline{ list-style:none; margin:0 auto; padding:0; max-width:720px; counter-reset:step; }
.timeline li{ position:relative; display:flex; gap:1.5rem; padding-bottom:2.6rem; }
.timeline li:not(:last-child)::after{
  content:""; position:absolute; left:23px; top:52px; bottom:0; width:2px;
  background:linear-gradient(var(--gold) 0%, var(--line) 100%);
}
.tl-num{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1.3rem;
  color:#fff; background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow:0 8px 18px -8px rgba(168,127,44,.8); z-index:1;
}
.tl-body h3{ font-family:var(--serif); font-size:1.5rem; font-weight:600; margin-bottom:.3rem; }

/* ---- About ---- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:center; }
.about-portrait{ position:relative; }
.about-portrait img{
  width:100%; border-radius:var(--r); box-shadow:var(--shadow);
  position:relative; z-index:1;
}
.about-portrait::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; border-radius:var(--r);
  background:linear-gradient(135deg, var(--gold-soft), var(--sage-soft));
  z-index:0;
}
.about-content h2{ font-family:var(--serif); font-size:clamp(2rem,4vw,2.7rem); margin-bottom:1.2rem; }
.about-sub{ font-family:var(--caps); font-size:1rem; letter-spacing:.08em; margin:2rem 0 1rem; color:var(--ink); }
.edu{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.edu li{ display:flex; gap:1rem; align-items:baseline; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.edu-year{
  flex:none; width:90px; font-family:var(--caps); font-size:.78rem; letter-spacing:.04em;
  color:var(--gold-deep); font-weight:600;
}

/* ---- Contact ---- */
.contact{ background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); }
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2.6rem; }
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.4rem; color:var(--ink);
}
.contact-card:hover{ border-color:var(--gold-soft); }
.cc-ico{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin-bottom:.6rem;
  background:var(--gold-soft); color:var(--gold-deep);
}
.cc-label{ font-family:var(--caps); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mauve); }
.cc-val{ font-weight:700; color:var(--ink); }
.contact-cta{ text-align:center; }
.map-wrap{
  margin-top:3rem; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); line-height:0;
}
.map-wrap iframe{ width:100%; height:360px; border:0; display:block; }
.map-link{ text-align:center; margin:1rem 0 0; font-size:.95rem; }
.map-link a{ font-weight:700; }

/* ---- Region & FAQ ---- */
.local{ background:var(--paper); }
.faq{ max-width:780px; margin:0 auto; display:grid; gap:.8rem; }
.faq details{
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.4rem;
}
.faq summary{
  cursor:pointer; font-weight:700; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq summary::after{ content:"+"; font-family:var(--serif); font-size:1.6rem; color:var(--gold-deep); line-height:1; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:.85rem 0 0; color:var(--ink-soft); }

/* ---- Legal pages (Impressum / Datenschutz) ---- */
.legal-header{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:50; }
.legal-header .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1rem; }
.legal-back{ font-weight:700; font-size:.95rem; white-space:nowrap; }
.legal{ padding:52px 0 80px; }
.legal .wrap{ max-width:760px; }
.legal h1{ font-family:var(--serif); font-size:clamp(2rem,5vw,2.9rem); margin-bottom:1.4rem; }
.legal h2{ font-family:var(--serif); font-size:1.5rem; font-weight:600; margin:2.3rem 0 .5rem; }
.legal h3{ font-size:1.02rem; margin:1.4rem 0 .3rem; color:var(--ink); }
.legal p{ margin:.7rem 0; }
.legal ul{ margin:.5rem 0 .8rem 1.2rem; display:grid; gap:.35rem; }
.legal a{ font-weight:600; }
.legal address{ font-style:normal; line-height:1.9; }
.legal .muted{ color:var(--ink-soft); font-size:.9rem; }
.legal .note{ background:var(--cream); border:1px dashed var(--line); border-radius:12px; padding:1rem 1.3rem; font-size:.9rem; color:var(--ink-soft); margin:1.6rem 0; }

/* ---- Hero location ---- */
.hero-loc{
  display:inline-flex; align-items:center; gap:.45rem; margin:.7rem 0 0;
  font-size:.9rem; letter-spacing:.03em; color:var(--mauve);
}
.hero-loc svg{ color:var(--gold-deep); flex:none; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--mauve-deep); color:#E8DEE3; padding:56px 0 28px; }
.footer-inner{ display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; }
.footer-role{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 .2rem; }
.footer-name{ font-family:var(--serif); font-size:1.5rem; color:#fff; margin:0 0 .8rem; }
.site-footer address{ font-style:normal; line-height:1.9; font-size:.95rem; }
.site-footer a{ color:#E8DEE3; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-mark img{ opacity:.95; filter:drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.footer-legal{ display:flex; flex-direction:column; gap:.5rem; text-align:right; }
.footer-copy{ text-align:center; margin:2.4rem 0 0; font-size:.82rem; color:rgba(232,222,227,.6); border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .intro-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .about-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .about-portrait{ max-width:380px; margin-inline:auto; }
  .about-portrait::before{ inset:14px -14px -14px 14px; }
  .footer-inner{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:1.6rem; }
  .footer-legal{ text-align:center; flex-direction:row; gap:1.6rem; }
  .site-footer address{ margin-inline:auto; }
}

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-list{
    position:absolute; top:72px; right:0; left:0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:1rem 24px 1.6rem; box-shadow:var(--shadow-sm);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .35s ease, opacity .3s ease;
  }
  .nav-list.open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav-list a{ display:block; padding:.8rem 1rem; }
  .nav-cta{ margin-top:.5rem; }
  .nav-cta a{ text-align:center; }

  .section{ padding:70px 0; }
  .intro-facts{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .ticks--two{ grid-template-columns:1fr; }
  .hero-inner{ padding:44px 24px 64px; }
  body{ font-size:16px; }
}