:root{
  --oat:#EDE2C9; --paper:#F4ECD7; --card:#FBF6EA; --cream:#F7F0DD;
  --cocoa:#4A3327; --cocoa2:#573D2E;
  --ink:#2A211A; --muted:#6E5F4C; --faint:#736149;
  --line:#D9CBB2; --line2:#CBB99A;
  --honey:#B6822A; --honey2:#C68F2C; --peach:#9E4E30; --clay:#C97B5F;
  --velvet:#8A4436; --wood:#7A5A3C;
  --room: radial-gradient(125% 95% at 50% -8%, #F7F0DD 0%, #F0E7D0 46%, #E8DCC0 100%);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --xl: clamp(120px, 15vw, 210px);
  --lg: clamp(90px, 11vw, 156px);
  --md: clamp(52px, 6.5vw, 92px);
  --page: max(clamp(22px,5vw,64px), calc((100vw - 1340px) / 2));
  --gutter: clamp(38px, 5.5vw, 82px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--oat);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.004em;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--velvet);color:var(--cream)}
h1,h2,h3,h4{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:500;letter-spacing:-.014em;
  text-wrap:balance;line-height:1.04}
p{margin:0 0 1.15em}
.wrap{max-width:1340px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.narrow{max-width:820px}
:focus-visible{outline:2px solid var(--velvet);outline-offset:3px;border-radius:2px}
.foot :focus-visible,.on-media :focus-visible{outline-color:var(--honey2)}

/* ---- skip link ---- */
.skip{position:fixed;top:10px;left:10px;z-index:100;background:var(--cocoa);color:var(--cream);
  font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:2px;
  box-shadow:0 10px 30px rgba(74,51,39,.35);
  transform:translateY(-180%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* ---- scroll progress ---- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--velvet),var(--honey));z-index:80;transition:transform .12s linear}

/* ---- chapter label (brass diamond) ---- */
.klabel{display:inline-flex;align-items:center;gap:.85em;font-weight:600;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--wood)}
.klabel::before{content:"";width:7px;height:7px;background:var(--honey);border-radius:1px;
  transform:rotate(45deg);flex:none;transition:transform .5s var(--ease)}
.klabel.on-dark{color:#E7CF9E}
.klabel.on-dark::before{background:var(--honey2)}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font-weight:600;
  font-size:.92rem;letter-spacing:.01em;padding:15px 27px;border:0;cursor:pointer;
  border-radius:2px;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),color .45s,box-shadow .5s var(--ease)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-solid{background:var(--velvet);color:#FBF2E6}
.btn-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cocoa);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(74,51,39,.28)}
.btn-solid:hover::before{transform:translateY(0)}
.btn-ghost{border:1.5px solid var(--wood);color:var(--wood);background:transparent}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wood);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.btn-ghost:hover{color:var(--cream);transform:translateY(-2px)}
.btn-ghost:hover::before{transform:scaleY(1)}
.btn-ghost.on-dark{border-color:var(--honey2);color:#EBD9B6}
.btn-ghost.on-dark::before{background:var(--honey2)}
.btn-ghost.on-dark:hover{color:var(--cocoa)}
.btns{display:flex;flex-wrap:wrap;gap:15px;align-items:center}

/* ---- text link ---- */
.tlink{position:relative;font-weight:600;color:var(--velvet);padding-bottom:2px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;transition:transform .5s var(--ease)}
.nav.hidden{transform:translateY(-100%)}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:80px;
  transition:height .45s var(--ease)}
.nav.scrolled .bar{height:64px}
.nav::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 95%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:1;
  border-bottom:1px solid var(--line);box-shadow:0 8px 24px -18px rgba(74,51,39,.4)}
.brand{font-family:'Inter',sans-serif;font-size:1.34rem;font-weight:600;letter-spacing:-.01em;
  line-height:1;position:relative;z-index:1}
.navlinks{display:flex;gap:28px;font-size:.85rem;font-weight:500;position:relative;z-index:1}
.navlinks a{color:var(--muted);padding:5px 0;position:relative;transition:color .3s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;
  background:var(--velvet);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after,.navlinks a.active::after{transform:scaleX(1);transform-origin:left}
.navlinks a.active{color:var(--ink)}
.nav .cta{position:relative;z-index:1}
.burger{display:none;position:relative;z-index:1;width:30px;height:22px;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:0;height:1.7px;width:100%;background:var(--ink);transition:.4s var(--ease)}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
body.menu-open .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}
@media(max-width:900px){
  .navlinks{display:none}
  .nav .cta{display:none}
  .burger{display:block}
}
/* mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:65;background:var(--room);
  display:flex;flex-direction:column;justify-content:center;padding:0 8vw;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
body.menu-open .sheet{opacity:1;visibility:visible}
.sheet a{font-family:'Inter',sans-serif;font-size:clamp(2rem,9vw,3rem);color:var(--ink);
  padding:.28em 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .sheet a{opacity:1;transform:none}
.sheet a:nth-child(1){transition-delay:.08s}.sheet a:nth-child(2){transition-delay:.14s}
.sheet a:nth-child(3){transition-delay:.2s}.sheet a:nth-child(4){transition-delay:.26s}
.sheet a:nth-child(5){transition-delay:.32s}
.sheet-contact{margin-top:44px;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--muted);
  border:0;background:none;padding:0;transition:opacity .5s var(--ease) .4s,transform .5s var(--ease) .4s;
  opacity:0;transform:translateY(20px)}
body.menu-open .sheet-contact{opacity:1;transform:none}

/* reveal utilities — hidden state gated behind html.js */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none}
.rv-img{transition:opacity 1.2s var(--ease),clip-path 1.4s var(--ease2)}
.js .rv-img{opacity:0;clip-path:inset(8% 6% 8% 6%)}
.rv-img.in{opacity:1;clip-path:inset(0 0 0 0)}

/* section rhythm */
section{position:relative}
.band{padding:var(--lg) 0}
.band.roomy{padding:var(--xl) 0}
/* wo zwei bildtragende Abschnitte aufeinanderstoßen: schmaler Streifen Grundfarbe dazwischen */
:is(.hero,.split,.thresh,.roomband) + :is(.split,.thresh,.roomband,.invite){margin-top:clamp(35px,3.1vw,53px)}
/* letztes bildtragendes Element vor dem dunklen Footer: gleicher Grundfarbe-Streifen */
main > :is(.split,.thresh,.roomband):last-child{margin-bottom:clamp(35px,3.1vw,53px)}
.sec-head{max-width:760px}
.sec-head .klabel{margin-bottom:24px}
.lead-serif{font-family:'Inter',sans-serif;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5;
  color:var(--cocoa);font-weight:400}
.lead-lg{font-size:clamp(1.08rem,1.4vw,1.26rem);color:var(--muted);max-width:60ch}
.mark{font-family:'Inter',sans-serif;font-style:italic;color:var(--velvet)}

/* ============ THE SIGNATURE SPLIT — content left, full-bleed image right ============ */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
.split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split-copy{display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--lg);padding-bottom:var(--lg)}
.split:not(.rev) .split-copy{padding-left:var(--page);padding-right:var(--gutter)}
.split.rev .split-copy{order:2;padding-right:var(--page);padding-left:var(--gutter)}
.split.rev .split-media{order:1}
.split-media{position:relative;overflow:hidden;background:var(--cocoa);min-height:clamp(420px,60vh,720px)}
.split-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px -40px rgba(74,51,39,.28)}
/* sticky media where the copy column is long */
.split.stick{align-items:start}
.split.stick .split-media{position:sticky;top:0;height:100svh;min-height:520px}

/* ============ HERO — cinematic, image-led ============ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:calc(100svh - 80px);margin-top:80px;background:var(--room);position:relative}
.hero-copy{align-self:center;padding:150px var(--gutter) 92px var(--page)}
.hero .klabel{margin-bottom:28px}
.hero h1{font-size:clamp(2.9rem,7vw,5.6rem);line-height:1;letter-spacing:-.024em;margin-bottom:.42em}
.hero .lead-serif{max-width:32ch;margin-bottom:38px}
.hero .btns{margin-bottom:22px}
.hero .subnote{font-size:.94rem;color:var(--faint)}
.hero-media{position:relative;overflow:hidden;background:var(--oat)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -140px 160px -90px rgba(74,51,39,.34), inset 90px 0 130px -90px rgba(74,51,39,.22)}
.js .hero-media img{transform:scale(1.1);transition:transform 1.9s var(--ease2)}
.hero-media.in img{transform:scale(1)}

/* ============ STATEMENTS MARQUEE — drifting band between hero and personas ============ */
.marquee{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(56px,6.5vw,104px);
  padding:22px 0;overflow:hidden;white-space:nowrap;
  /* eigener Composited-Layer: Maske + animierter Track flackern sonst auf iOS */
  transform:translateZ(0);isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:inline-flex;gap:0;animation:drift 48s linear infinite;
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translate3d(0,0,0)}
.marquee span{font-family:'Inter',sans-serif;font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);
  color:var(--line2);padding:0 .55em}
.marquee span::before{content:"—";margin-right:1.1em;color:var(--honey);opacity:.55;font-style:normal}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;transform:none}}

/* ============ PERSONAS — centered header, full-width compact grid ============ */
.marquee + .personas{padding-top:clamp(36px,4.2vw,62px)}
.personas .sec-head{max-width:820px;margin:0 auto;text-align:center}
.personas .sec-head .klabel{margin-bottom:20px}
.personas .sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin:0 auto;max-width:20ch}
.per-list{margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--line2)}
.pcard{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.7fr);gap:clamp(18px,4vw,72px);
  align-items:start;padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease)}
.pcard:hover{padding-left:12px}
.pcard .rn{font-family:'Inter',sans-serif;font-style:italic;font-weight:500;color:var(--velvet);
  font-size:clamp(1.4rem,2vw,1.85rem);line-height:1}
.pcard .name{font-family:'Inter',sans-serif;font-size:clamp(1.3rem,1.9vw,1.66rem);font-weight:500;margin-top:0}
.pcard .name small{display:block;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;
  color:var(--peach);margin-top:8px;letter-spacing:.02em}
.pcard p{margin:0;color:var(--muted)}
.after-rows{margin:clamp(54px,6vw,88px) auto 0;color:var(--velvet);font-family:'Spectral',Georgia,serif;
  font-style:italic;font-weight:400;font-size:clamp(1.9rem,3.7vw,2.9rem);line-height:1.4;
  letter-spacing:.004em;max-width:22ch;text-align:center;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.16em;
  text-decoration-color:color-mix(in srgb,var(--velvet) 42%,transparent)}

/* ============ SYMPTOMS — image left, list right ============ */
.symp .split-copy h2{font-size:clamp(2rem,4vw,3.1rem);margin-top:24px}
.confess-list{list-style:none;border-top:1px solid var(--line2);margin-top:clamp(30px,4vw,46px)}
.confess-list li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line);color:var(--ink)}
.confess-list li::before{content:"";position:absolute;left:0;top:26px;width:18px;height:1.5px;
  background:var(--velvet);transition:width .45s var(--ease)}
.confess-list li:hover::before{width:28px}
.symp .btns{margin-top:var(--md)}

/* ============ THRESHOLD — the doorway, a full-bleed opening ============ */
.thresh{position:relative;height:clamp(460px,86vh,860px);overflow:hidden;background:var(--cocoa)}
.thresh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.thresh::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(74,51,39,.14) 0%,rgba(74,51,39,0) 30%,rgba(74,51,39,.32) 60%,rgba(74,51,39,.68) 100%)}
.thresh-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 clamp(38px,6vw,84px);
  color:#F6EBD6}
.thresh-cap .klabel{margin-bottom:26px}
.thresh-cap h2{font-size:clamp(2.1rem,5vw,4rem);line-height:1.04;max-width:20ch;color:#F8EFDC;
  text-shadow:0 2px 30px rgba(0,0,0,.28)}

/* ============ WORK — editorial breathing room ============ */
.work{background:var(--oat)}
.work-body{text-align:center}
.work-body p{color:var(--cocoa);font-size:clamp(1.14rem,1.6vw,1.42rem);line-height:1.62;max-width:24ch;
  font-family:'Inter',sans-serif}
.work-body p{max-width:64ch;margin-left:auto;margin-right:auto}
.work .lead-serif{max-width:52ch;margin-left:auto;margin-right:auto}
.work-lede{font-size:clamp(1.7rem,3.4vw,2.9rem);font-family:'Inter',sans-serif;line-height:1.12;
  color:var(--ink);margin-bottom:clamp(34px,4vw,56px);max-width:18ch}
.work .btns{margin-top:var(--md);justify-content:center}

/* ============ ROOM BAND — img1 full-bleed with the pullquote nestled ============ */
.roomband{position:relative;height:clamp(520px,92vh,900px);overflow:hidden;background:var(--oat)}
.roomband img{width:100%;height:132%;object-fit:cover;object-position:center 46%;display:block;will-change:transform}
.roomband::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 84% at 50% 50%,rgba(74,51,39,.48) 0%,rgba(74,51,39,.3) 46%,rgba(74,51,39,.14) 100%)}
.roomband-cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(30px,6vw,80px) 0}
.rb-quote{font-family:'Spectral',Georgia,serif;font-style:italic;font-weight:400;color:#F7EDD9;
  font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.3;max-width:24ch;margin:0 auto;position:relative;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.rb-quote::before{content:"„";display:block;font-size:3.6rem;line-height:.3;color:var(--honey2);
  opacity:.85;margin-bottom:.2em;font-style:normal}
.rb-quote span{color:#EBCE9C}
.rb-quote cite{display:block;margin-top:26px;font-style:normal;font-family:'Inter',sans-serif;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#D9C09A}

/* ============ ABOUT — dominant portrait split ============ */
.about .split-copy .klabel{margin-bottom:22px}
.about h2{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:.5em}
.about-body p{color:var(--muted)}
.about-body p:first-of-type{color:var(--cocoa)}
.sig{display:inline-block;font-family:'Inter',sans-serif;font-style:italic;font-size:1.6rem;
  color:var(--velvet);margin-top:28px;position:relative;padding-bottom:6px}
.sig::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--honey),transparent)}
.about-body .btns{margin-top:34px}
/* about portrait: keep the whole head in frame with headroom (no top crop) */
#ueber .split-media > img{object-position:center top}

/* ============ METHODS — accordion beside a sticky detail image ============ */
.methods .sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin-top:22px}
.methods .lead-lg{margin-top:20px}
.acc{border-top:1px solid var(--line2);margin-top:clamp(34px,4vw,52px)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:24px 2px;font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(1.18rem,2vw,1.5rem);
  transition:padding-left .4s var(--ease),color .3s}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::marker{content:""}
.acc-item summary:hover{padding-left:12px;color:var(--velvet)}
.acc-ico{position:relative;width:15px;height:15px;flex:none}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--velvet);
  transition:transform .35s var(--ease),opacity .35s}
.acc-ico::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.acc-ico::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.acc-item[open] .acc-ico::after{opacity:0;transform:translateX(-50%) rotate(90deg)}
.acc-item[open] summary{color:var(--velvet)}
.acc-body{padding:2px 2px 26px;max-width:66ch}
.acc-body p{margin:0;color:var(--muted)}

/* ============ INVITATION — atmo-sea soft wash (the client-loved moment) ============ */
.invite{position:relative;background:var(--room);border-top:1px solid var(--line);overflow:hidden}
.invite .sea{position:absolute;left:0;right:0;bottom:0;height:66%;z-index:0;
  background:url(assets/img/atmo-sea.jpg) center/cover no-repeat;opacity:.16}
.invite .sea::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--oat) 0%,rgba(237,226,201,.42) 38%,rgba(237,226,201,.74) 100%)}
.invite .wrap{position:relative;z-index:1}
.inv-top .sec-head{max-width:none}
.inv-top h2{font-size:clamp(2rem,4vw,2.85rem);margin-top:22px;text-wrap:pretty}
.inv-top .lead-serif{margin-top:22px;max-width:60ch}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,54px);margin-top:var(--md)}
.way{background:var(--card);border:1px solid var(--line2);position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.way:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(74,51,39,.4)}
.way-photo{overflow:hidden}
.way-photo img{aspect-ratio:3/2.1;object-fit:cover;object-position:center 26%;width:100%;
  height:auto; /* muss gesetzt sein, sonst schlägt das height-Attribut das aspect-ratio */
  transition:transform 1.3s var(--ease)}
.way-photo .wmap{width:100%;aspect-ratio:3/2.1;border:0;display:block}
.map-cap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;
  padding:14px clamp(28px,3.4vw,44px);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  color:var(--cocoa);background:var(--card);border-bottom:1px solid var(--line2);transition:color .3s,background .3s}
.map-cap:hover{color:var(--velvet);background:var(--cream)}
.map-cap .mc-go{color:var(--velvet);display:inline-flex;align-items:center;gap:.5em}
.map-cap .ar{transition:transform .45s var(--ease)}
.map-cap:hover .ar{transform:translateX(5px)}
.way:hover .way-photo img{transform:scale(1.05)}
.way-body{padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;flex:1}
.way .k{font-family:'Inter',sans-serif;font-style:italic;color:var(--velvet);font-size:1.12rem;margin-bottom:10px}
.way h3{font-size:clamp(1.34rem,2vw,1.66rem);margin-bottom:14px}
.way p{color:var(--muted);margin-bottom:26px}
.way .btn{margin-top:auto;align-self:flex-start}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);
  margin-top:var(--md);padding-top:var(--md);border-top:1px solid var(--line2)}
.cstat h4{font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wood);margin-bottom:10px}
.cstat p{margin:0;color:var(--cocoa);line-height:1.55}
.cstat a{color:var(--velvet);font-weight:500}
.cstat a:hover{text-decoration:underline;text-underline-offset:3px}
.cstat p small{color:var(--faint);font-size:.86rem}

/* ============ FOOTER ============ */
.foot{background:var(--cocoa);color:#E7D6BC;position:relative;overflow:hidden}
.foot .inner{padding-top:var(--lg);padding-bottom:40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(30px,5vw,60px)}
.flogo{font-family:'Inter',sans-serif;font-size:1.7rem;color:#F5E9D2;margin-bottom:18px}
.foot p{color:#C9B698;margin:0 0 4px}
.foot .claim{font-family:'Inter',sans-serif;font-style:italic;font-size:1.2rem;color:var(--honey2);margin-top:18px}
.foot .cert{margin-top:26px;width:84px;height:84px;background:var(--cream);border-radius:50%;padding:8px;
  object-fit:contain}
.foot strong{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:#D8BE94;margin-bottom:16px}
.foot .col a{display:block;padding:4px 0;color:#E7D6BC;transition:color .3s}
.foot .col a:hover{color:var(--honey2)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:var(--lg);
  padding-top:26px;border-top:1px solid rgba(198,143,44,.24);font-size:.82rem;color:#B5A182}
.legal a:hover{color:var(--honey2)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px}}

/* ============ RESPONSIVE — stack every split cleanly ============ */
@media(max-width:900px){
  /* Above the fold muss sitzen: Bild + Titel + Untertitel gemeinsam sichtbar */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy,.hero.sub .hero-copy{order:2;padding:30px var(--page) 40px}
  .hero-media{order:1;position:relative;height:clamp(240px,34svh,360px)}
  .hero-media img{position:absolute}
  .hero .klabel{margin-bottom:14px}
  .hero h1{font-size:clamp(2rem,7.6vw,2.7rem);margin-bottom:.34em}
  .hero.sub h1{font-size:clamp(1.9rem,7.2vw,2.5rem)}
  .hero .lead-serif{font-size:1.02rem;line-height:1.5;max-width:none;margin-bottom:24px}
  .hero .btns{margin-bottom:0}

  .split,.split.rev{grid-template-columns:1fr}
  .split-copy,.split.rev .split-copy{order:2;padding:var(--md) var(--page)}
  .split-media,.split.rev .split-media{order:1;position:static;height:auto;min-height:0}
  .split.stick .split-media{position:static;height:auto;min-height:0}
  .split-media > img{position:static;height:clamp(340px,56vh,480px)}

  .thresh{height:clamp(400px,64vh,560px)}
  .roomband{height:clamp(440px,70vh,620px)}
}
/* kurze Displays (iPhone SE u. ä.): Bild und Typo weiter zurücknehmen,
   damit Titel und Untertitel oben sichtbar bleiben */
@media(max-width:900px) and (max-height:620px){
  .hero-media{height:clamp(170px,28svh,225px)}
  .hero-copy,.hero.sub .hero-copy{padding-top:20px;padding-bottom:30px}
  .hero h1{font-size:clamp(1.62rem,5.9vw,1.95rem);margin-bottom:.28em}
  .hero.sub h1{font-size:clamp(1.5rem,5.5vw,1.8rem)}
  .hero .lead-serif{font-size:.94rem;line-height:1.45;margin-bottom:16px}
  .hero .klabel{margin-bottom:9px;font-size:.66rem}
}
@media(max-width:820px){
  .ways{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:26px}
  .invite .sea{height:52%}
}
@media(max-width:620px){
  .pcard{grid-template-columns:1fr;gap:8px}
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .js .rv-img{opacity:1;clip-path:none}
  .js .hero-media img{transform:none}
}

/* ============================================================
   UNTERSEITEN — Komponenten in der Bildsprache der Startseite
   ============================================================ */

/* ---- Subpage-Hero: füllt den Viewport wie die Startseite (immersiv) ---- */
.hero.sub{min-height:calc(100svh - 80px)}
.hero.sub .hero-copy{padding-top:clamp(104px,10vw,150px);padding-bottom:clamp(64px,7vw,100px)}
.hero.sub h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
.hero.sub .lead-serif{max-width:38ch}
/* Mobile-Overrides stehen bewusst hier unten: sie müssen die .hero.sub-Regeln
   oben schlagen, die dieselbe Spezifität haben. */
@media(max-width:900px){
  .hero.sub{min-height:auto}
  .hero.sub .hero-copy{padding:30px var(--page) 40px}
  .hero.sub h1{font-size:clamp(1.9rem,7.2vw,2.5rem)}
  .hero.sub .lead-serif{max-width:none}
}
@media(max-width:900px) and (max-height:620px){
  .hero.sub .hero-copy{padding-top:20px;padding-bottom:30px}
  .hero.sub h1{font-size:clamp(1.5rem,5.5vw,1.8rem)}
}

/* ---- Kapitel-Kopf über einer Bandsektion ---- */
.chap .klabel{margin-bottom:22px}
.chap h2{font-size:clamp(2rem,4vw,3.1rem)}
.chap .lead-lg{margin-top:22px}

/* ---- Werdegang / Aufzählung mit Linienrhythmus ---- */
.cv-list{list-style:none;border-top:1px solid var(--line2);margin-top:clamp(30px,4vw,46px)}
.cv-list li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line);color:var(--ink)}
.cv-list li::before{content:"";position:absolute;left:0;top:26px;width:18px;height:1.5px;
  background:var(--velvet);transition:width .45s var(--ease)}
.cv-list li:hover::before{width:28px}
.cv-list li span{display:block;font-size:.86rem;color:var(--faint);margin-top:4px}

/* ---- Hinweiskarte (z. B. „Wann ich nicht die Richtige bin") ---- */
.note-card{background:var(--card);border:1px solid var(--line2);padding:clamp(26px,3vw,42px);max-width:80ch;margin:var(--md) auto 0;text-align:center}
/* eigener Abschnitt nur für die Hinweiskarte: ruhiger, ohne doppelten Abstand */
.band.tight{padding:clamp(60px,7vw,108px) 0}
.band.tight .note-card{margin-top:0}
.note-card h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-bottom:14px}
.note-card p{margin:0;color:var(--muted)}
.note-card a{color:var(--velvet);font-weight:500}

/* ---- Infokarten-Raster (Anfahrt, Sprechzeiten …) ---- */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:var(--md)}
.icard{background:var(--card);border:1px solid var(--line);padding:clamp(24px,2.6vw,36px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.icard:hover{transform:translateY(-3px);box-shadow:0 24px 48px -34px rgba(74,51,39,.4);border-color:var(--line2)}
.icard h3{font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wood);margin-bottom:12px}
.icard p{margin:0;color:var(--cocoa);line-height:1.6}
.icard a{color:var(--velvet)}
.icard a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.igrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.igrid{grid-template-columns:1fr}}

/* ---- Bildstrecke: jedes Bild behält sein eigenes Seitenverhältnis,
       Grundfarbe läuft als Fuge dazwischen durch ---- */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,3.1vw,53px);margin-top:var(--md);align-items:start}
.gal .cell{overflow:hidden;background:var(--cocoa)}
.gal .cell img{width:100%;height:auto;display:block;transition:transform 1.3s var(--ease)}
.gal .cell:hover img{transform:scale(1.045)}
@media(max-width:640px){.gal{grid-template-columns:1fr}}

/* ---- Formular ---- */
.form{margin-top:26px}
.form .field{margin-bottom:18px}
.form label{display:block;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wood);margin-bottom:9px}
.form input,.form textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.6;color:var(--ink);
  background:var(--cream);border:1px solid var(--line2);border-radius:2px;padding:13px 15px;
  transition:border-color .35s,background .35s,box-shadow .35s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--velvet);background:#FFFDF7;
  box-shadow:0 0 0 3px rgba(138,68,54,.09)}
.form textarea{min-height:132px;resize:vertical}
.form .note{font-size:.84rem;color:var(--faint);margin:16px 0 0}

/* ---- Platzhalter (Buchungswidget) ---- */
.ph{border:1px dashed var(--line2);background:var(--cream);color:var(--faint);
  font-size:.92rem;line-height:1.65;padding:clamp(26px,3.2vw,44px);text-align:center}
.way-body > .ph{flex:1;display:flex;flex-direction:column;justify-content:center}

/* ---- Karte über die volle Spaltenbreite ---- */
.mapwide{width:100%;height:clamp(340px,46vh,480px);border:1px solid var(--line2);display:block;margin-top:var(--md)}

/* ---- Honeypot (Spam-Schutz Kontaktformular) ---- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Rechtsseiten (Impressum / Datenschutz) ---- */
.legal-page{max-width:760px}
.legal-page h1{margin-bottom:var(--md)}
.legal-page h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:var(--md) 0 14px}
.legal-page h3{font-size:1.05rem;margin:26px 0 10px}
.legal-page p,.legal-page li{line-height:1.75;color:var(--ink);margin-bottom:14px}
.legal-page ul{padding-left:22px;margin-bottom:14px}
.legal-page a{color:var(--velvet)}

/* ============ MOBILE-AUSRICHTUNG — Überschriften & Zitate mittig (Kundenwunsch) ============
   Auf schmalen Viewports laufen Labels, Überschriften und zugehörige Buttons mittig,
   damit sich die Achse von Bild zu Text durchzieht. Listen (Personas, Confess, CV,
   Akkordeon) bleiben bewusst linksbündig, sie lesen sich zentriert schlecht. */
@media(max-width:720px){
  .hero-copy{text-align:center}
  .hero-copy .klabel{justify-content:center}
  .hero-copy .btns{justify-content:center}
  .hero .lead-serif{margin-left:auto;margin-right:auto}
  .sec-head{text-align:center;margin-left:auto;margin-right:auto}
  .sec-head .klabel{justify-content:center}
  .sec-head .lead-lg,.sec-head .lead-serif{margin-left:auto;margin-right:auto}
  .chap{text-align:center}
  .chap .klabel{justify-content:center}
  .split-copy>.klabel{justify-content:center;width:100%}
  .split-copy h2{text-align:center}
  .about .split-copy{text-align:center}
  .about .sig{margin-left:auto;margin-right:auto}
  .split-copy .btns,.work .btns,.inv-top .btns{justify-content:center}
  .way-body{text-align:center}
  .way .btn{align-self:center}
  .icard{text-align:center}
  .cstat{text-align:center}
  .gal .cell img{margin:0 auto}
}

/* Methoden-Sektion: Bild auf Mobil UNTER dem Akkordeon (unter Geomantie),
   Desktop bleibt das seitliche Split-Bild */
@media(max-width:900px){
  .split.media-after .split-copy{order:1}
  .split.media-after .split-media{order:2}
}

/* ============ KURSE — Kartenlayout für kurse.html ============ */
.course-card{background:var(--card);border:1px solid var(--line2);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;margin-top:var(--md)}
.course-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column}
.course-body .k{font-family:'Inter',sans-serif;font-style:italic;color:var(--velvet);font-size:1.06rem;margin-bottom:10px}
.course-body h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}
.course-body p{color:var(--muted)}
.course-list{list-style:none;border-top:1px solid var(--line2);margin:18px 0 6px}
.course-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line);color:var(--ink)}
.course-list li::before{content:"";position:absolute;left:0;top:21px;width:16px;height:1.5px;background:var(--velvet)}
.course-price{display:flex;align-items:baseline;gap:12px;margin:20px 0 24px}
.course-price .amount{font-family:'Spectral',Georgia,serif;font-size:clamp(1.9rem,3vw,2.5rem);color:var(--cocoa)}
.course-price small{color:var(--faint);font-size:.85rem}
.course-media{position:relative;background:var(--cocoa);min-height:320px}
.course-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .course-card{grid-template-columns:1fr}
  .course-media{order:1;position:relative;min-height:0;height:clamp(220px,36vh,320px)}
  .course-media img{position:absolute}
  .course-body{order:2;text-align:center}
  .course-list li{text-align:left}
  .course-price{justify-content:center}
  .course-body .btns{justify-content:center}
}

/* ============ CONSENT-BANNER (inaktiv, solange keine Tracking-IDs gesetzt sind) ============ */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--card);
  border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(74,51,39,.45);
  padding:20px 22px;max-width:560px;margin:0 auto;border-radius:2px}
.consent p{margin:0 0 14px;font-size:.9rem;color:var(--cocoa);line-height:1.55}
.consent p a{color:var(--velvet);text-decoration:underline;text-underline-offset:3px}
.consent .row{display:flex;gap:10px;flex-wrap:wrap}
.consent button{flex:1;min-width:130px;cursor:pointer;border-radius:2px;padding:12px 18px;
  font-family:inherit;font-weight:600;font-size:.9rem;transition:transform .3s var(--ease)}
.consent button:hover{transform:translateY(-1px)}
.consent .c-accept{background:var(--velvet);color:#FBF2E6;border:1.5px solid var(--velvet)}
.consent .c-decline{background:transparent;color:var(--wood);border:1.5px solid var(--wood)}

/* ============ TERMIN (cal.com Inline-Embed) ============ */
.termin .sec-head{max-width:820px}
.termin .sec-head .lead-serif{margin-top:18px}
.cal-wrap{margin-top:clamp(28px,4vw,48px);background:var(--card);border:1px solid var(--line2);
  padding:clamp(8px,1.6vw,22px);overflow:hidden}
.cal-inline{width:100%;min-height:560px}
.cal-inline iframe{max-width:100%}
.cal-fallback{margin:14px 6px 2px;font-size:.9rem;color:var(--muted)}
@media (max-width:720px){.cal-inline{min-height:640px}.cal-wrap{padding:6px}}