/* ═══════════════════════════════════════════════════════════════════
   Luzie Mähler — ganzheitliches Coaching & Hypnose

   The page is paced like a nervous system regulating: activated and
   dark at the top, deepest at the trance section, releasing into light
   and warmth. Every ambient animation runs on --breath (11s = 5.5
   breaths/min, the coherent-breathing resonance frequency).

   Base palette is Luzie's own "Color Code" slide. The depths and the
   single warm accent are derived from it, same hues pushed further.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fonts: served from assets/fonts, nothing leaves the domain ───
   Luzie asked for Bodoni instead of the serif and Montserrat instead of
   the sans. Bodoni Moda starts at 400 — there is no 300 cut — so the
   headings that used to sit at 300 now sit at 400; the sans keeps 300. */
@font-face{
  font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/bodoni-moda-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;
  src:url("assets/fonts/bodoni-moda-latin-italic.woff2") format("woff2");
}
@font-face{
  font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/bodoni-moda-latin-500.woff2") format("woff2");
}
@font-face{
  font-family:'Bodoni Moda';font-style:italic;font-weight:500;font-display:swap;
  src:url("assets/fonts/bodoni-moda-latin-500italic.woff2") format("woff2");
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/montserrat-latin-300.woff2") format("woff2");
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/montserrat-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/montserrat-latin-500.woff2") format("woff2");
}

:root{
  /* Luzie's five, straight off the Color-Code slide */
  --cream:#FAF8F5;      /* Cremeweiss  — background */
  --sky:#D6E8F2;        /* Hellblau    — background */
  --beige:#EBE6DD;      /* Beige       — background */
  --navy:#1C4587;       /* Dunkelblau  — background */
  --blue:#2854C5;       /* Blau        — highlights */

  /* derived light — the same two hues, lifted */
  --sky-mid:#A7CBE2;
  --sky-pale:#EAF3F9;
  --beige-pale:#F5F1EA;
  /* the hero field: one knob for the veils over the footage, so the tone
     and its weight can be tuned without moving the rest of the page */
  --hero-veil:#0F2140;
  --hero-veil-rgb:15,33,64;
  --blue-soft:#AFC1EC;
  /* hover glow on cards and lines — warm gold Luzie picked */
  --glow:#DEBE6D;
  --blue-pale:#E8EDFA;

  /* derived depth — the descent, same hue pushed under Dunkelblau so the
     cut between hypnose (navy) and the path (deep) stays visible */
  --navy-soft:#204A8F;
  --deep:#0F2140;

  /* ink — all AA on cream, sky and beige */
  --ink:#1F2733;
  --ink-soft:#4B5563;
  --ink-faint:#535D6B;

  /* light ink, for dark fields */
  --lit:#F4F5F8;
  --lit-soft:rgba(244,245,248,.78);
  --lit-faint:rgba(244,245,248,.52);

  --serif:"Bodoni Moda",Didot,"Bodoni MT",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Four heading roles, not one. Before this every h2 rendered at the same
     67px, so a two-word section label and a twelve-word sentence shouted
     equally loud. Ratios follow the reference site (h3 42 / h1 55 / h2 66
     at 1322px) — only the hero display is pushed further, because it is a
     poster and has a photograph behind it. */
  --fs-display:clamp(2.4rem,6.1vw,5.4rem);   /* the hero, and nothing else   */
  --fs-statement:clamp(1.9rem,4vw,3.5rem);   /* her own words, given room    */
  --fs-section:clamp(1.75rem,2.9vw,2.8rem);  /* every section title          */
  --fs-card:clamp(1.25rem,1.7vw,1.6rem);     /* inside a card or a step      */

  --pad:clamp(1.25rem,5vw,6rem);
  --sec:clamp(5.5rem,13vw,12rem);
  --breath:11s;                       /* 5.5s in, 5.5s out */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-rise:cubic-bezier(.16,.84,.28,1); /* type settling, no overshoot */
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem;scroll-behavior:smooth}
body.menu-open{overflow:hidden}      /* the page waits while the menu is open */
body{
  margin:0;background:var(--beige);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[data-draft]{display:none}          /* unfinished section, kept in the file */
a{color:inherit}
h1,h2,h3{
  font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06;margin:0;
  text-wrap:balance;                 /* no more "Arbeit" orphaned on its own line */
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-section);line-height:1.12}
h3{font-size:var(--fs-card);line-height:1.22}
/* the statement role: the lines she wants people to sit with.
   .moment p and .beliefs-center p pick the token up in their own blocks. */
.why-title,.foot-cta h2{font-size:var(--fs-statement)}
p{margin:0 0 1.15em;text-wrap:pretty}
strong{font-weight:500}
em{font-style:italic}
::selection{background:var(--blue-soft);color:var(--ink)}

/* focus is part of the design, not an afterthought */
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:300;
  background:var(--ink);color:var(--cream);padding:.8rem 1.4rem;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.5rem;font-weight:400;
}

/* ── links: underline draws in on hover ─────────────────────────── */
.link,.foot-cols a,.meta a,.overlay-foot a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease),color .3s;
}
.link:hover,.foot-cols a:hover,.meta a:hover,.overlay-foot a:hover{background-size:100% 1px}

/* ── buttons: warmth wipes up from the bottom ───────────────────── */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.15em 2.3em;border-radius:0;text-decoration:none;text-align:center;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--glow);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn-solid{background:var(--lit);color:var(--ink);border-color:var(--lit)}
.btn-solid:hover,.btn-solid:focus-visible{color:var(--ink);border-color:var(--glow)}
.btn-ghost{border-color:var(--lit-faint);color:var(--lit)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink);border-color:var(--glow)}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-dark:hover,.btn-dark:focus-visible{color:var(--ink);border-color:var(--glow)}
.booking-form .btn{background:var(--ink);color:var(--cream);border-color:var(--ink);align-self:flex-start}
.booking-form .btn:hover{color:var(--ink);border-color:var(--glow)}

/* ── opening breath ─────────────────────────────────────────────── */
.veil{
  position:fixed;inset:0;z-index:200;background:#EBE6DD;
  display:grid;place-items:center;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.veil.gone{opacity:0;visibility:hidden}
html:not(.js) .veil{display:none}
.veil-word{
  font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.6rem);font-style:italic;
  color:var(--ink);opacity:0;letter-spacing:.02em;
  animation:one-breath 2.6s var(--ease-soft) forwards;
}
@keyframes one-breath{
  0%{opacity:0;transform:scale(.94);filter:blur(8px)}
  38%{opacity:.9;transform:scale(1);filter:blur(0)}
  72%{opacity:.9}
  100%{opacity:0;transform:scale(1.03);filter:blur(3px)}
}

/* ── the journey rail ───────────────────────────────────────────── */
.journey{
  position:fixed;left:clamp(.9rem,2.2vw,2rem);top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;transition:opacity .8s var(--ease);pointer-events:none;
}
.journey.on{opacity:1}
.journey-track{position:relative;width:1px;height:26vh;background:currentColor;opacity:.22}
.journey-fill{
  position:absolute;left:0;top:0;width:1px;background:currentColor;
  height:var(--p,0%);transition:height .18s linear;
}
.journey-label{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  writing-mode:vertical-rl;color:currentColor;opacity:.55;
  transition:opacity .4s var(--ease);white-space:nowrap;
}
.journey{color:var(--ink)}
.journey.on-dark{color:var(--lit)}

/* ── floating nav ───────────────────────────────────────────────── */
.pill{
  position:fixed;top:1.4rem;left:50%;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:1rem;
  width:min(760px,calc(100vw - 1.6rem));
  padding:.55rem .6rem .55rem 1.1rem;
  background:rgba(235,230,221,.86);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(35,41,38,.07);border-radius:8px;
  box-shadow:0 14px 44px -26px rgba(19,25,23,.55);
}
.pill-btn{
  background:none;border:0;font-family:var(--serif);font-size:1.05rem;color:var(--ink);
  cursor:pointer;padding:.35rem .6rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;
}
/* ── sound: one quiet switch, in the bar because the track keeps
   playing long after the hero has scrolled away ─────────────────── */
.sound{gap:.4rem;opacity:.55;transition:opacity .45s var(--ease)}
.sound:hover,.sound:focus-visible,.sound[aria-pressed="true"]{opacity:1}
.sound svg{width:17px;height:17px;flex:none}
.sound .wave-1,.sound .wave-2{opacity:0;transition:opacity .4s var(--ease)}
.sound .wave-off{opacity:1;transition:opacity .4s var(--ease)}
.sound[aria-pressed="true"] .wave-1,
.sound[aria-pressed="true"] .wave-2{opacity:1}
.sound[aria-pressed="true"] .wave-off{opacity:0}
/* the pill is 600px at most and already carries four controls: below that
   the switch keeps its icon and gives up its word */
@media (max-width:720px){
  .sound{padding-left:.35rem;padding-right:.35rem}
  .sound .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.lang .lang-off,.lang .lang-sep{opacity:.4;transition:opacity .4s}
body.en .lang .lang-off{opacity:1}
body.en .lang .lang-on{opacity:.4}
/* two direct links in the bar; the menu still holds the full list */
.pill-link{
  margin-left:0;text-decoration:none;white-space:nowrap;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding:.62em 0;opacity:.72;transition:opacity .4s var(--ease);
}
.pill-link:first-of-type{margin-left:auto}
.pill-link:hover,.pill-link:focus-visible{opacity:1}
/* the one CTA that follows you the whole way down */
.pill-cta{
  margin-left:0;text-decoration:none;white-space:nowrap;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--glow);padding:.62em 1.1em;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.pill-cta:hover,.pill-cta:focus-visible{background:var(--glow);border-color:var(--glow);color:var(--ink)}
/* below this the bar is too narrow for them: the menu carries them.
   The two words fit down to about 660px once the sound switch has given
   up its label at 720px; the artifact preview is often narrower than a
   full window, so the threshold sits at the real limit, not above it. */
@media (max-width:660px){.pill-link{display:none}.pill-cta{margin-left:auto}}

.menu{margin-left:0}
.menu i{position:relative;display:block;width:15px;height:9px}
.menu i::before,.menu i::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .5s var(--ease),top .5s var(--ease);
}
.menu i::before{top:0}
.menu i::after{top:8px}
.menu[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}
.menu .menu-close,.menu[aria-expanded="true"] .menu-label{display:none}
.menu[aria-expanded="true"] .menu-close{display:inline}

/* ── menu panel ─────────────────────────────────────────────────────
   A card that unrolls under the pill, not a full-screen curtain: the
   page stays visible behind it, so the menu reads as a drawer of the
   bar it belongs to. --pillh is measured in main.js on open, because
   the pill's height moves with the root font size. */
.overlay{
  position:fixed;z-index:110;
  top:calc(1.4rem + var(--pillh,2.8rem) + .5rem);
  left:50%;transform:translateX(-50%);
  width:min(600px,calc(100vw - 1.6rem));
  max-height:calc(100dvh - 1.4rem - var(--pillh,2.8rem) - 2rem);overflow-y:auto;
  background:rgba(235,230,221,.94);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(35,41,38,.07);border-radius:8px;
  box-shadow:0 18px 50px -28px rgba(19,25,23,.6);
  color:var(--ink);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  visibility:hidden;
}
.overlay.open{clip-path:inset(0 0 0 0);visibility:visible}
.overlay ul{list-style:none;margin:0;padding:0;counter-reset:nav}
.overlay li+li{border-top:1px solid rgba(35,41,38,.10)}
.overlay ul a{
  display:flex;align-items:baseline;gap:1.5rem;
  padding:.9rem 1.5rem;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.3;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             background-color .35s var(--ease),color .35s;
}
.overlay ul a::before{
  counter-increment:nav;content:counter(nav) ".";
  flex:0 0 1.2rem;font-size:.8rem;font-style:italic;color:var(--ink-faint);
}
.overlay.open ul a{opacity:1;transform:none}
.overlay ul a:hover,.overlay ul a:focus-visible{background:rgba(35,41,38,.045);color:var(--blue)}
.overlay li:nth-child(1) a{transition-delay:.06s}
.overlay li:nth-child(2) a{transition-delay:.10s}
.overlay li:nth-child(3) a{transition-delay:.14s}
.overlay li:nth-child(4) a{transition-delay:.18s}
.overlay li:nth-child(5) a{transition-delay:.22s}
.overlay li:nth-child(6) a{transition-delay:.26s}
.overlay li:nth-child(7) a{transition-delay:.30s}
.overlay-foot{
  border-top:1px solid rgba(35,41,38,.10);
  padding:1.4rem 1.5rem 1.6rem;
  display:flex;align-items:center;gap:.9rem 1.4rem;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}
.overlay-ig{
  flex:0 0 auto;width:2.9rem;height:2.9rem;border-radius:50%;
  display:grid;place-items:center;background:var(--cream);color:var(--ink);
  background-image:none;                       /* not the underline-grow link */
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.overlay-ig:hover,.overlay-ig:focus-visible{background:var(--glow);color:var(--ink)}
.overlay-ig svg{width:1.1rem;height:1.1rem;display:block}

/* ── image placeholders: an art-directed empty frame, not a TODO ── */
.ph{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 25% 20%,var(--sky-pale),transparent 65%),
    radial-gradient(85% 75% at 80% 85%,var(--blue-pale),transparent 62%),
    linear-gradient(155deg,var(--sky) 0%,var(--beige) 60%,var(--beige-pale) 100%);
}
.ph::before{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:radial-gradient(rgba(35,41,38,.13) 1px,transparent 1px);
  background-size:3px 3px;
}
.ph::after{
  content:attr(data-ph);position:absolute;left:0;right:0;bottom:0;
  display:block;padding:1.1rem 1.3rem;text-align:left;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(35,41,38,.42);
}
.ph-dark{
  background:
    radial-gradient(80% 65% at 22% 25%,rgba(40,84,197,.55),transparent 68%),
    radial-gradient(75% 70% at 82% 78%,rgba(28,69,135,.8),transparent 65%),
    linear-gradient(160deg,var(--navy-soft),var(--navy) 55%,var(--deep));
}
.ph-dark::before{opacity:.22;background-image:radial-gradient(rgba(244,241,236,.18) 1px,transparent 1px)}
.ph-dark::after{color:var(--lit-faint)}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  grid-template-columns:minmax(0,1fr);
  background:var(--hero-veil);color:var(--lit);overflow:hidden;text-align:center;
}
.hero-media{
  position:absolute;inset:-12% 0;z-index:0;
  background:var(--hero-veil);
}
/* The footage is a bright sunrise and the hero type is light, so the video
   never plays at full strength — it sits under a scrim and slightly
   desaturated, which is also what keeps it reading as a field rather than a
   clip. The veils are lighter than they were: enough to carry the light type,
   not so much that the footage stops being footage. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s var(--ease);
  filter:saturate(.88) contrast(1.02) brightness(.86);
}
.hero-video.on{opacity:1}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--hero-veil-rgb),.48),rgba(var(--hero-veil-rgb),.24) 40%,rgba(var(--hero-veil-rgb),.56));
}
/* the aurora only has to tint the footage once it is there, not paint it */
.hero:has(.hero-video.on) .aurora{opacity:.42}

/* slow-drifting light, like breath on water */
.aurora{position:absolute;inset:-25%;z-index:1;pointer-events:none;filter:blur(64px);opacity:.9;mix-blend-mode:screen}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora i:nth-child(1){
  width:52vw;height:52vw;left:2%;top:4%;
  background:radial-gradient(circle,rgba(40,84,197,.85),transparent 68%);
  animation:drift-a 52s var(--ease-soft) infinite alternate;
}
.aurora i:nth-child(2){
  width:44vw;height:44vw;right:0%;top:28%;
  background:radial-gradient(circle,rgba(167,203,226,.62),transparent 66%);
  animation:drift-b 64s var(--ease-soft) infinite alternate;
}
.aurora i:nth-child(3){
  width:40vw;height:40vw;left:32%;bottom:-6%;
  background:radial-gradient(circle,rgba(28,69,135,.6),transparent 68%);
  animation:drift-c 58s var(--ease-soft) infinite alternate;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-11vw,-6vh,0) scale(.94)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(6vw,-9vh,0) scale(1.2)}}

/* the vignette itself breathes */
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 50%,rgba(var(--hero-veil-rgb),0) 12%,rgba(var(--hero-veil-rgb),.24) 52%,rgba(var(--hero-veil-rgb),.66) 88%);
  animation:breathe-veil var(--breath) var(--ease-soft) infinite;
}
@keyframes breathe-veil{0%,100%{opacity:1}45%,55%{opacity:.74}}
/* ── the threads: one pair of lines for the whole page ──────────────
   Fixed, so they stay put while the screens move behind them. currentColor
   is driven by body.on-dark (set in main.js), so the same lines read on the
   cream sections and on the night ones. */
.threads{
  position:fixed;inset:0;z-index:100;pointer-events:none;
  color:var(--ink);
  /* One box, three jobs: tint (--th-o), the leave-the-hero expansion (--th-s)
     and a slow pointer drift (--mx/--my, set in main.js). Kept as custom
     properties so on-dark, past-hero and the pointer never fight over
     `opacity`/`transform` by specificity — they each own one variable. */
  opacity:calc(var(--th-o,.5) * var(--th-p,1));
  transform:translate3d(calc(var(--mx,0) * 1px),calc(var(--my,0) * 1px),0) scale(var(--th-s,1));
  /* short enough that the scroll-driven expansion still tracks the gesture,
     long enough that the pointer drift trails instead of snapping */
  transition:color .9s var(--ease),opacity .45s var(--ease),transform .5s var(--ease);
  will-change:transform,opacity;
}
body.on-dark .threads{color:var(--lit);--th-o:.62}
/* The threads belong to the hero — they open and fade with the first screen.
   The sub-pages have no hero, so they would sit at full strength over the
   text the whole way down. */
body.subpage .threads{display:none}

.fineline{position:absolute;top:0;height:100%;width:22vw;
  animation:breathe-line var(--breath) var(--ease-soft) infinite,
            sway calc(var(--breath) * 2.6) var(--ease-soft) infinite}
@keyframes breathe-line{0%,100%{transform:scaleX(1)}45%,55%{transform:scaleX(1.035)}}
/* individual translate/rotate, so the sway never overwrites the scaleX above */
@keyframes sway{0%,100%{translate:0 -.7%;rotate:-.3deg}50%{translate:0 .7%;rotate:.3deg}}
.fineline path{
  stroke:currentColor;stroke-width:.9;vector-effect:non-scaling-stroke;opacity:.55;
  stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 3.6s var(--ease) .6s forwards;
}
.fineline path:nth-child(2){animation-delay:.85s;opacity:.34}
.fineline path:nth-child(3){animation-delay:1.1s;opacity:.2}
@keyframes draw{to{stroke-dashoffset:0}}
/* a length of light travelling the arc — the thing that makes it read alive */
.fineline .spark{
  stroke-width:1.5;opacity:0;stroke-dasharray:110 1900;stroke-dashoffset:2010;
  animation:spark calc(var(--breath) * 1.6) linear 3.4s infinite;
}
@keyframes spark{
  0%{stroke-dashoffset:2010;opacity:0}
  10%{opacity:.5}
  75%{opacity:.42}
  94%,100%{stroke-dashoffset:0;opacity:0}
}
.fineline-l{left:0;transform-origin:left center}
/* the right arc runs half a breath behind, so the pair never pulses in lockstep */
.fineline-r{right:0;transform-origin:right center;
  animation-delay:calc(var(--breath) / -2),calc(var(--breath) * -1.3)}
.fineline-r .spark{animation-delay:calc(var(--breath) * .9)}
@media (max-width:900px){ .threads{--th-o:.3} body.on-dark .threads{--th-o:.34} }

.hero-inner{position:relative;z-index:4;width:100%;max-width:1100px;padding:8rem var(--pad) 6rem}
.marquee{width:100%;overflow:hidden;margin-bottom:2.8rem;
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 44s linear infinite}
.marquee-track span{
  font-size:clamp(.82rem,1.05vw,1.05rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--lit-soft);white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}
.hero h1 em{font-style:normal;color:var(--cream)}
.hero h1{color:var(--cream);text-shadow:0 2px 40px rgba(15,33,64,.55)}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.scroll-cue{
  position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:4;
  display:block;width:1px;height:60px;overflow:hidden;
}
.scroll-cue i{display:block;width:1px;height:60px;background:var(--lit-faint);
  animation:cue 3.4s var(--ease-soft) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── word-by-word reveal ──────────────────────────────────────────
   The word rises out of its own mask and tips upright as it lands —
   the small rotation is what separates it from a plain slide. Blur
   carries the softness of the rest of the page into the type. */
/* The mask has to clear the deepest descender the face can draw, or it
   slices the tail off every g, y, p and ß. Bodoni Moda puts 0.264em of ink
   below the baseline (Cormorant, which this was tuned for, put far less) —
   .34em leaves room for that plus the italic's overshoot. The negative
   margin cancels the padding so the extra box costs no layout height. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.34em;margin-bottom:-.34em}
.w > i{
  display:inline-block;font-style:inherit;transform-origin:0 100%;
  /* Travel has to clear the mask's full depth, not just the line box: the
     mask now reaches .34em lower, so a 112% start left the word's ascenders
     showing in that strip before the reveal ran. */
  transform:translateY(142%) rotate(4deg);opacity:0;filter:blur(7px);
  transition:transform 1.25s var(--ease-rise),opacity .85s var(--ease),filter .95s var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger,62ms));
}
.words.in .w > i{transform:none;opacity:1;filter:blur(0)}
/* the display heading is a poster: fewer words, so each one gets more room */
.hero h1{--stagger:110ms}
.hero h1 .w > i{transition-duration:1.5s,1.1s,1.2s}
/* her line breaks are deliberate — the second line waits for the first */
.hero h1 em .w > i{transition-delay:calc(var(--i,0) * var(--stagger) + 140ms)}

/* ── ankommen: three moments in one place ────────────────────────
   Luzie asked that the first scroll not move the page: the words blur
   away and the next ones take the same spot. The section is three
   screens tall and the stage inside it is sticky, so the gesture
   scrolls the track while the stage holds still. main.js hands the
   current step the .on class; everything else is this transition. */
.arrive{background:var(--cream);height:300svh;position:relative}
.arrive-stage{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;
  /* the fixed bar sits over the top of the stage — the extra top padding
     keeps the first line of the points clear of it on a phone */
  padding:clamp(4.5rem,9vh,6rem) var(--pad) var(--pad);overflow:hidden;
}
.arrive-step{
  grid-area:1/1;width:100%;max-width:1180px;
  text-align:center;
  opacity:0;filter:blur(18px);transform:translateY(14px);
  pointer-events:none;
  transition:opacity .9s var(--ease),filter 1s var(--ease),transform 1s var(--ease-rise);
}
.arrive-step.on{opacity:1;filter:blur(0);transform:none;pointer-events:auto}
.arrive-greet{font-style:italic;margin:0;font-size:var(--fs-statement)}
.why-title{margin:0;font-style:italic;color:var(--ink)}

/* ── the points: dotted, in the same place as the words before ──── */
.why-grid{
  margin:0 auto;
  /* Fixed, EVEN column counts. With auto-fit the count changed with width, so
     the stagger read as random. */
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(1.6rem,3vw,3.2rem);row-gap:clamp(2.2rem,4vw,3.6rem);
  align-items:start;                  /* each question only as tall as it is */
}
.why-card{
  /* no more circles — a dot in the margin and the sentence beside it */
  position:relative;margin:0;padding-left:1.7rem;min-width:0;
  text-align:left;
  font-size:clamp(.8rem,.92vw,.98rem);line-height:1.6;color:var(--ink-soft);
  overflow-wrap:break-word;
}
.why-card::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.6rem;height:.6rem;border-radius:50%;
  background:var(--sky-mid);
}
.why-card > span{display:block}
.why-card strong{font-weight:500;color:var(--ink)}
/* they surface one after the other once their step arrives */
.arrive-step .why-card{opacity:0;transform:translateY(12px);filter:blur(8px);
  transition:opacity .8s var(--ease),transform .9s var(--ease-rise),filter .8s var(--ease)}
.arrive-step.on .why-card{opacity:1;transform:none;filter:blur(0)}
.arrive-step.on .why-card:nth-child(2){transition-delay:.08s}
.arrive-step.on .why-card:nth-child(3){transition-delay:.16s}
.arrive-step.on .why-card:nth-child(4){transition-delay:.24s}
.arrive-step.on .why-card:nth-child(5){transition-delay:.32s}
.arrive-step.on .why-card:nth-child(6){transition-delay:.4s}
.arrive-step.on .why-card:nth-child(7){transition-delay:.48s}
.arrive-step.on .why-card:nth-child(8){transition-delay:.56s}
@media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
/* On a phone all eight points stack in one column inside a stage that is
   exactly one screen tall and clips, so a short screen (an in-app browser,
   a small Android) cut the last points off. Type and gaps shrink with the
   screen's height — and its width, since a narrow screen wraps more lines. */
@media (max-width:560px){
  .why-grid{grid-template-columns:1fr;row-gap:min(1.3rem,1.8svh)}
  .why-card{font-size:min(.88rem,2.2svh,3.6vw);line-height:1.5}
}
/* held-still scrolling is the whole point of the section, so it only
   reads as one screen when motion is welcome — otherwise the three
   moments are simply three blocks you scroll past. */
@media (prefers-reduced-motion:reduce){
  .arrive{height:auto}
  .arrive-stage{position:static;height:auto;display:block;padding:var(--sec) var(--pad)}
  .arrive-step{opacity:1;filter:none;transform:none;pointer-events:auto;
    max-width:1180px;margin:0 auto clamp(3rem,8vw,6rem)}
  .arrive-step .why-card{opacity:1;transform:none;filter:none}
}

/* ── split ──────────────────────────────────────────────────────── */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5.5rem);
  align-items:center;padding:var(--sec) var(--pad);max-width:1400px;margin:0 auto;
}
.split-title{grid-column:1/-1;text-align:center;font-style:italic;font-size:var(--fs-statement)}
.split-media{overflow:hidden}
.portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.split-text h2{margin-bottom:1.8rem;font-size:clamp(1.5rem,2.3vw,2.2rem)}
.split-text p{color:var(--ink-soft);max-width:52ch}

/* ── process ────────────────────────────────────────────────────── */
.process{background:var(--cream);
  padding:var(--sec) var(--pad)}
.process>h2{text-align:center}
.process>h2{max-width:22ch;margin:0 auto clamp(3.5rem,6vw,5rem)}
.steps{
  max-width:1300px;margin:0 auto;display:grid;
  /* Even counts only — auto-fit put "04 Integration" alone on a second row
     around 1000px. */
  grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
}
@media (max-width:1100px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{border-top:1px solid rgba(35,41,38,.2);padding-top:1.5rem;transition:border-color .5s}
.step:hover{border-color:var(--glow)}
.step .num{font-family:var(--serif);font-size:.95rem;color:var(--ink-faint);letter-spacing:.12em}
.step h3{margin:.7rem 0 .75rem}
.step p{font-size:.93rem;color:var(--ink-soft);margin:0}
.tags-title{
  max-width:1300px;margin:clamp(3.5rem,6vw,5rem) auto 1.6rem;padding-top:1.6rem;
  border-top:1px solid rgba(35,41,38,.2);text-align:center;
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;
  max-width:900px;margin:0 auto;padding:0;
}
.tags li{
  border:1px solid rgba(35,41,38,.22);padding:.55em 1.15em;
  font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}

/* ── schwerpunkte: five cards that turn over ──────────────────────
   Luzie asked for five areas instead of three, and for the picture to
   turn over and show the text "like gaming cards", with a shadow behind
   them. The turn is CSS; the button on top of each card is what makes it
   work on a touchscreen and with a keyboard, where :hover never fires. */
.focus{padding:var(--sec) 0}
.focus-head{padding:0 var(--pad);text-align:center;max-width:800px;margin:0 auto clamp(3.5rem,6vw,5rem)}
.focus-head p{color:var(--ink-soft);margin-top:1.3rem}
.focus-rail{
  display:flex;gap:clamp(1rem,2vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;
  /* overflow-x also clips vertically, and mid-turn the near edge of a card
     grows past its box. The extra padding is that room; the negative margin
     takes it back out of the layout. */
  padding:3rem var(--pad);margin:-3rem 0 -1.5rem;scrollbar-width:thin;scrollbar-color:rgba(35,41,38,.14) transparent;
}
.focus-rail::-webkit-scrollbar{height:2px}
.focus-rail::-webkit-scrollbar-thumb{background:rgba(35,41,38,.14)}
/* From 1100px the five cards lay out three over two, centred. Six columns
   with every card spanning two is what puts the last two under the gaps of
   the first row instead of hard against the left edge. */
@media (min-width:1100px){
  .focus-rail{
    display:grid;grid-template-columns:repeat(6,1fr);max-width:1400px;margin:0 auto;
    overflow:visible;padding-top:0;padding-bottom:0;row-gap:clamp(1.6rem,3vw,2.6rem);
  }
  .fcard{flex:none;grid-column:span 2}
  .fcard:nth-child(4){grid-column:2 / span 2}
  .fcard:nth-child(5){grid-column:4 / span 2}
}
.fcard{
  flex:0 0 min(380px,78vw);scroll-snap-align:center;
  position:relative;perspective:1600px;margin:0;
}
.fcard-inner{
  /* Luzie's card artwork is 2:3 — the card takes that ratio so nothing is
     letterboxed and the printed frame reaches the card's own edge. */
  position:relative;aspect-ratio:2/3;
  transform-style:preserve-3d;
  transition:transform 1s var(--ease);
}
/* Hover turns it only on a real mouse: on a phone a tap leaves :hover (and
   focus) stuck, so the second tap could not turn the card back. */
@media (hover:hover){
  .fcard:hover .fcard-inner{transform:rotateY(180deg)}
}
.fcard[data-flipped] .fcard-inner{transform:rotateY(180deg)}
.fcard-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--cream);
  /* the shadow she asked for — it is what makes them read as cards */
  box-shadow:0 26px 50px -30px rgba(15,33,64,.45);
  /* Rounded to sit concentric with the printed blue frame: its outer line
     has a 45px radius 26px in from the edge of a 1024x1536 card, so the card
     corner is 71px. The two percentages keep that circular on a 2:3 box. */
  border-radius:6.9% / 4.6%;
  display:flex;flex-direction:column;overflow:hidden;
}
/* The front IS the card: her artwork carries the frame, the illustration and
   the title, so nothing is drawn on top of it. The title reaches a screen
   reader through the image's alt text. */
.fcard-front{padding:0}
.fcard-img{display:block;width:100%;height:100%;object-fit:cover}
/* The back wears the same frame — she supplied it empty for exactly this. */
.fcard-back{
  transform:rotateY(180deg);
  background:var(--cream) url("assets/img/card-back.jpg") center/100% 100% no-repeat;
  /* clear of the printed corner ornaments, top and bottom */
  padding:14% 10% 12%;overflow-y:auto;
}
.fcard-back .eyebrow{margin-bottom:1rem}
.fcard-lead{
  font-family:var(--serif);font-size:1.08rem;font-style:italic;line-height:1.35;
  color:var(--navy);margin:0 0 1.3rem;
}
.fcard-back ul{margin:0;padding:0;list-style:none}
.fcard-back li{
  padding:.5rem 0;border-bottom:1px solid rgba(31,39,51,.10);
  font-size:.85rem;line-height:1.45;color:var(--ink-soft);
}
.fcard-back li:last-child{border-bottom:0}
.fcard-back li small{display:block;font-size:.78em;color:var(--ink-faint)}
/* the whole card is the control; the label is for screen readers only */
.fcard-flip{
  position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer;padding:0;
  /* no grey tap flash on phones: it paints the flat box, not the turning card */
  -webkit-tap-highlight-color:transparent;
}
.fcard-flip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fcard-flip:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* Below the row layout the cards are narrower, so the back is shorter — and
   the flip button covers the card, which means an overflowing back cannot be
   scrolled. Tighten the list until the longest back (seven items plus a
   sub-line) fits without scrolling. */
@media (min-width:1100px) and (max-width:1259px){
  /* first narrow stretch of the row layout (cards about 320px): the text
     keeps its desktop size, only the padding and line gaps tighten */
  .fcard-back{padding:13% 8% 10%}
  .fcard-back li{padding:.4rem 0}
}
@media (max-width:1099px){
  .fcard-back{padding:13% 8% 10%}
  .fcard-lead{font-size:.95rem;margin-bottom:.8rem}
  .fcard-back .eyebrow{margin-bottom:.7rem}
  .fcard-back li{padding:.36rem 0;font-size:.76rem;line-height:1.35}
}
/* the smallest phones (320px) need one more step */
@media (max-width:359px){
  .fcard-lead{font-size:.85rem;margin-bottom:.5rem}
  .fcard-back .eyebrow{margin-bottom:.4rem}
  .fcard-back li{padding:.22rem 0;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .fcard-inner{transition:none}
}

/* ── hypnose: the descent ───────────────────────────────────────── */
.hypno{background:var(--navy);color:var(--lit);padding:var(--sec) var(--pad)}
.hypno-inner{max-width:1200px;margin:0 auto}
.hypno .eyebrow{color:var(--lit-faint)}
.hypno h2{max-width:20ch;margin-bottom:clamp(2.8rem,5vw,4.5rem)}
.hypno-body{columns:2;column-gap:clamp(2rem,5vw,5rem)}
.hypno-body p{color:var(--lit-soft);break-inside:avoid}
.hypno-body strong{color:var(--lit);font-weight:400}

/* ── the path: deepest point ──────────────────────────────────────
   This used to be five boxes threaded onto a bezier that main.js recomputed
   from their laid-out positions. The curve swung out through empty space,
   crossed the heading, and each dot ended up at its box's TOP edge and a
   couple of hundred pixels away from it. Luzie: "the line is weird, the
   points are not matching with the content and it's too empty."

   Now: a straight spine down the middle, each dot at the vertical MIDDLE of
   its own box with a connector reaching out to it, wider boxes, a tighter
   vertical rhythm, and the step's number filling the half of the row that
   was dead space. Nothing is computed, so nothing can drift. */
.path{
  position:relative;padding:var(--sec) var(--pad);overflow:hidden;color:var(--lit);
  background:var(--deep);
}
.ph-path{position:absolute;inset:0;z-index:0;opacity:.5}
.path::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 40%,rgba(15,33,64,.2),rgba(15,33,64,.88) 72%);
}
.path-head{position:relative;z-index:2;max-width:900px;margin:0 auto clamp(3rem,5vw,5rem);text-align:center}
.path-stage{position:relative;z-index:2;max-width:1180px;margin:0 auto}

/* the spine: one line, dead centre, top to bottom */
.path-steps{
  list-style:none;margin:0;padding:0;position:relative;z-index:1;
}
.path-steps::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(244,245,248,.32) 8%,
                             rgba(244,245,248,.32) 92%,transparent);
}
/* Each step is a full-width row: the box on its side of the spine, the
   number on the other. Grid keeps the two halves exactly equal, so the dot
   at 50% is always on the line. */
.pstep{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;column-gap:clamp(2.5rem,5vw,4.5rem);
  padding:0;margin-bottom:clamp(2rem,3.5vw,3.2rem);
}
.pstep:last-child{margin-bottom:0}
/* Both halves are pinned to row 1. The number comes first in the DOM, so
   without the explicit row, sparse auto-placement pushes the box onto a
   second row and the dot at 50% lands above it instead of beside it. */
.pstep:nth-child(odd) .pbox{grid-column:1;grid-row:1}
.pstep:nth-child(odd) .pnum{grid-column:2;grid-row:1}
.pstep:nth-child(even) .pbox{grid-column:2;grid-row:1}
.pstep:nth-child(even) .pnum{grid-column:1;grid-row:1}

/* the bead sits at the middle of the row — which is the middle of the box */
.pstep .dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--lit);z-index:2;
}
/* and a short arm reaches from the spine to the box it belongs to */
.pstep::after{
  content:"";position:absolute;top:50%;width:clamp(1.2rem,2.2vw,2.2rem);height:1px;
  background:rgba(244,245,248,.32);
}
.pstep:nth-child(odd)::after{right:50%}
.pstep:nth-child(even)::after{left:50%}

/* the number lives in the half that used to be empty — centred in it, so
   the weight sits in the middle of the void instead of hugging the spine */
.pnum{
  font-family:var(--serif);font-size:clamp(3.5rem,9vw,7.5rem);line-height:1;
  color:rgba(244,245,248,.13);letter-spacing:-.02em;text-align:center;
}

.pbox{
  background:var(--navy);color:var(--lit);
  padding:clamp(1.5rem,2.4vw,2.2rem);
  box-shadow:0 30px 62px -34px rgba(0,0,0,.65);
}
.pstep h3{margin-bottom:.85rem}
.pbox p{color:rgba(244,245,248,.88);font-size:.95rem;margin:0}
.pbox p + p{margin-top:.9em}

/* ── beliefs: they dissolve as you pass through ─────────────────── */
.beliefs{
  position:relative;background:var(--navy);
  color:var(--lit);padding:clamp(7rem,15vw,13rem) var(--pad);overflow:hidden;min-height:90vh;
  display:grid;place-items:center;grid-template-columns:minmax(0,1fr);
}
.beliefs-center{position:relative;z-index:3;text-align:center;max-width:min(880px,92vw)}
.beliefs-center p{
  font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.9rem);font-style:italic;
  font-weight:500;   /* the site's bold — Bodoni ships no heavier cut */
  line-height:1.3;margin:0;text-wrap:balance;
}
.beliefs-cloud{position:absolute;inset:0;z-index:1;pointer-events:none}
.beliefs-cloud span{
  position:absolute;font-family:var(--serif);font-style:italic;
  color:rgba(244,241,236,.32);white-space:nowrap;
  /* height caps it too, so the seven rows still fit on a short laptop screen */
  font-size:clamp(1.65rem,min(3.3vw,5vh),2.78rem);line-height:1.2;
  animation:drift var(--breath) var(--ease-soft) infinite alternate;
  /* transform belongs to the drift animation — only opacity and blur let go,
     so a sentence keeps breathing while it fades. */
  transition:opacity 4.5s var(--ease-soft),filter 4.5s var(--ease-soft);
}
.beliefs-cloud span.gone{opacity:0;filter:blur(6px)}
@keyframes drift{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
/* Seven rows, mostly in pairs, above and below the main line so the
   middle stays clear. Each pair fits side by side down to 900px.
   main.js still hides any sentence that ends up touching it on a given screen. */
.beliefs-cloud span:nth-child(1){top:3%;left:5%}
.beliefs-cloud span:nth-child(2){top:12.5%;left:14%;animation-delay:-1s}
.beliefs-cloud span:nth-child(3){top:12.5%;right:4%;animation-delay:-6s}
.beliefs-cloud span:nth-child(4){top:22%;left:3%;animation-delay:-3s}
.beliefs-cloud span:nth-child(5){top:31.5%;right:14%;animation-delay:-7s}
.beliefs-cloud span:nth-child(6){top:66.5%;left:4%;animation-delay:-5s}
.beliefs-cloud span:nth-child(7){top:85.5%;right:4%;animation-delay:-2.5s}
.beliefs-cloud span:nth-child(8){top:76%;right:4%;animation-delay:-8s}
.beliefs-cloud span:nth-child(9){top:76%;left:12%;animation-delay:-1.5s}
.beliefs-cloud span:nth-child(10){top:85.5%;left:4%;animation-delay:-9s}
.beliefs-cloud span:nth-child(11){top:66.5%;right:5%;animation-delay:-4.5s}
.beliefs-cloud span:nth-child(12){top:22%;right:9%;animation-delay:-3.5s}
.beliefs-cloud span:nth-child(13){top:3%;right:6%;animation-delay:-7.5s}

/* ── voices: beige, five stars, cards that breathe ─────────────── */
.voices{
  background:var(--beige-pale);
  padding:var(--sec) 0;text-align:center;
}
.voices > h2,.voices > .eyebrow,.voices-soon{padding:0 var(--pad)}
.voices h2{font-style:italic;color:var(--navy)}
.voices .note,.voices-soon{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:1.1rem}
.voices-rail:empty{display:none}
/* A rail like the schwerpunkte cards: the quotes scroll sideways, so a
   fifth voice costs no layout. Snap per card, thin scrollbar, same gutters. */
.voices-rail{
  display:flex;gap:clamp(1rem,2vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) 1.6rem;margin:clamp(3rem,5vw,4rem) 0 0;text-align:left;
  scrollbar-width:thin;scrollbar-color:rgba(35,41,38,.14) transparent;
}
.voices-rail::-webkit-scrollbar{height:2px}
.voices-rail::-webkit-scrollbar-thumb{background:rgba(35,41,38,.14)}
.voices blockquote{
  flex:0 0 min(380px,78vw);scroll-snap-align:center;display:flex;flex-direction:column;margin:0;
  background:var(--cream);border:1px solid rgba(35,41,38,.06);border-radius:14px;
  box-shadow:0 10px 30px rgba(28,69,135,.05);
  padding:clamp(1.9rem,3vw,2.7rem);
  transition:border-color .5s,box-shadow .7s var(--ease),transform .7s var(--ease);
}
.voices blockquote:hover{
  border-color:var(--glow);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(222,190,109,.28);
}
.voices .stars{
  color:var(--blue);font-size:1.05rem;letter-spacing:.22em;line-height:1;margin-bottom:1.1rem;
}
.voices blockquote p{
  font-family:var(--serif);font-size:1.05rem;font-style:italic;line-height:1.62;color:var(--ink-soft);
}
.voices blockquote p::before{content:"„"}
.voices blockquote p::after{content:"“"}
html[lang="en"] .voices blockquote p::before{content:"\201C"}
html[lang="en"] .voices blockquote p::after{content:"\201D"}
.voices cite{
  display:block;margin-top:auto;padding-top:1.2rem;font-style:normal;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}

/* ── workshops ──────────────────────────────────────────────────── */
.workshops{padding:var(--sec) var(--pad)}
.ws-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  max-width:1400px;margin:0 auto clamp(2.5rem,5vw,4rem);
}
.ws-grid{
  max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:1fr;gap:clamp(1.2rem,2.5vw,2.2rem);
}
/* four cards: 2×2, then one row — auto-fit left the fourth alone at 3 columns */
@media (min-width:640px){.ws-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.ws-grid{grid-template-columns:repeat(4,1fr)}}
.ws{
  border:1px solid var(--beige);padding:1rem 1rem 2rem;background:var(--cream);
  transition:border-color .55s var(--ease),transform .7s var(--ease);
}
.ws:hover{border-color:var(--glow);transform:translateY(-5px)}
.ws-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.ws-img{width:100%;height:100%;object-fit:cover;display:block}
.chip{
  position:absolute;top:1rem;left:1rem;z-index:2;background:var(--cream);
  padding:.45em .95em;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.ws h3{margin:1.6rem 1rem .85rem}
.ws p{margin:0 1rem;font-size:.93rem;color:var(--ink-soft)}
.ws p+p,.ws-list+p{margin-top:.9rem}
.ws-list{margin:.6rem 1rem 0;padding:0;list-style:none;font-size:.93rem;color:var(--ink-soft)}
.ws-list li{padding:.3rem 0 .3rem 1.1rem;position:relative}
.ws-list li::before{content:"";position:absolute;left:0;top:1.05em;width:.5rem;height:1px;background:var(--blue-soft)}

/* ── about ──────────────────────────────────────────────────────── */
.about{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5.5rem);
  padding:var(--sec) var(--pad);align-items:start;
}
.about-media{position:sticky;top:6.5rem}
.about-img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.about-text p{color:var(--ink-soft);max-width:60ch}
.about-text h2{margin-bottom:2rem}
.pull{
  font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,2.1rem);font-style:italic;
  color:var(--ink);line-height:1.36;margin-top:2.8rem;
  border-left:1px solid var(--blue);padding-left:1.8rem;
}
.quali{
  margin-top:2.8rem;font-size:.92rem;line-height:1.75;
  border-top:1px solid color-mix(in oklab,var(--blue) 30%,transparent);padding-top:1.4rem;
}

/* ── ablauf & rahmen: the practical answer ──────────────────────── */
.offer{
  /* German runs ~15% longer than the English; this screen is sized to hold it */
  padding:clamp(4rem,8vw,7rem) var(--pad);text-align:center;
  background:var(--cream);
}
.offer-head{max-width:660px;margin:0 auto clamp(2rem,3.2vw,3rem)}
.offer-steps{
  list-style:none;margin:0 auto;padding:0;max-width:1100px;text-align:left;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);
}
.offer-steps li{border-top:1px solid rgba(35,41,38,.2);padding-top:1.4rem;transition:border-color .5s}
.offer-steps li:hover{border-color:var(--glow)}
.onum{font-family:var(--serif);font-size:.95rem;color:var(--ink-faint);letter-spacing:.12em}
.offer-steps h3{margin:.6rem 0 .7rem}
.offer-steps p{font-size:.93rem;color:var(--ink-soft);margin:0}
.offer-facts{
  max-width:1100px;margin:clamp(2.5rem,4vw,3.5rem) auto 0;padding:0;text-align:left;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem clamp(1.5rem,3vw,3rem);
  border-top:1px solid rgba(35,41,38,.14);padding-top:clamp(1.4rem,2.4vw,2rem);
}
.offer-facts dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.offer-facts dd{margin:.6rem 0 0;font-size:.93rem;color:var(--ink-soft)}
.offer > .btn{margin-top:clamp(2rem,3.2vw,2.8rem)}
@media (max-width:820px){
  .offer-steps{grid-template-columns:1fr}
  .offer-facts{grid-template-columns:1fr}
}

/* ── booking ────────────────────────────────────────────────────── */
.booking{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);
  padding:var(--sec) var(--pad);max-width:1400px;margin:0 auto;
}
.booking h2{max-width:18ch;margin-bottom:1.6rem}
.booking-left>p{color:var(--ink-soft)}
.meta{margin:3.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 2rem;font-size:.92rem}
.booking-cal{margin-top:2.6rem}
.cal-note{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem}
.meta dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);padding-top:.25em}
.meta dd{margin:0;color:var(--ink-soft)}
.booking-form{display:flex;flex-direction:column;gap:1.5rem}
.booking-form label{display:flex;flex-direction:column;gap:.5rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.booking-form input[type=text],.booking-form input[type=email],.booking-form textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(35,41,38,.22);
  padding:.75rem 0;transition:border-color .45s var(--ease);resize:vertical;
}
.booking-form input:focus,.booking-form textarea:focus{outline:0;border-color:var(--blue)}
.booking-form .check{
  flex-direction:row;align-items:flex-start;gap:.85rem;
  text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--ink-soft);line-height:1.55;
}
.booking-form .check input{margin-top:.35em;accent-color:var(--blue)}
.form-note{font-size:.85rem;color:var(--ink-soft);margin:0;min-height:1.4em}
.form-note.err{color:#8a4a3c}
.form-note.ok{color:var(--navy-soft)}
.invalid{border-color:#8a4a3c !important}

/* ── footer ─────────────────────────────────────────────────────── */
.foot{background:var(--navy);color:var(--lit);padding:clamp(3.5rem,6vw,5.5rem) var(--pad) 2.5rem}
/* the last ask, before the links */
.foot-cta{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(244,241,236,.13);padding-bottom:2.2rem;margin-bottom:2.2rem;
}
.foot-cta h2{font-style:italic}
.foot-brand{border-bottom:1px solid rgba(244,241,236,.13);padding-bottom:2.2rem;margin-bottom:2.2rem}
/* the wordmark steps down so the CTA above it leads */
.foot-mark{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);margin:0;line-height:1}
.foot-claim{font-family:var(--serif);font-style:italic;color:var(--lit-faint);margin:.7rem 0 0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem}
.foot-cols h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.4;color:var(--lit-faint);margin:0 0 1.1rem;font-weight:400}
.foot-cols a,.foot-cols span{display:block;color:var(--lit-soft);font-size:.92rem;margin-bottom:.55rem}
.foot-cols a:hover{color:var(--blue-soft)}
.foot-copy{margin:2.5rem 0 0;font-size:.74rem;letter-spacing:.12em;color:var(--lit-faint)}

/* ── scroll reveal ──────────────────────────────────────────────── */
.js .reveal{
  opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 1.1s var(--ease),transform 1.25s var(--ease-rise),filter 1.1s var(--ease);
}
.reveal.in{opacity:1;transform:none;filter:none}
/* the two buttons arrive one after the other, so the parent only fades */
.hero-cta.reveal{transform:none;filter:none;opacity:1;transition:none}
.js .hero-cta .btn{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform 1s var(--ease-rise),
             background-size .5s var(--ease),color .3s,border-color .45s var(--ease);
}
.hero-cta.in .btn{opacity:1;transform:none;transition-delay:.86s}
.hero-cta.in .btn:nth-child(2){transition-delay:1s}
/* the marquee arrives with the rest instead of being there from frame 1 */
.marquee.reveal{filter:none}
/* the cue is the last thing to appear — it invites you on once you've read */
.js .hero .scroll-cue{opacity:0;transition:opacity 1.4s var(--ease) 1.5s}
.hero-inner:has(.hero-cta.in) ~ .scroll-cue{opacity:1}
/* word-split headings animate per word, not as a block */
.reveal.words{opacity:1;transform:none;filter:none;transition:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}
.reveal[data-delay="4"]{transition-delay:.48s}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:1100px){ .journey{display:none} }
@media (max-width:900px){
  .split,.booking,.about{grid-template-columns:1fr}
  .about-media{position:static}
  /* stacked: keep the portrait from filling a tablet-wide column */
  .split-media,.about-media{max-width:28rem}
  .hypno-body{columns:1}
  /* one column: the spine moves to the left edge, the number sits above
     the box instead of beside it */
  .path-steps::before{left:5px}
  .pstep{grid-template-columns:1fr;row-gap:.6rem;padding-left:clamp(1.8rem,6vw,2.6rem)}
  .pstep:nth-child(odd) .pbox,.pstep:nth-child(even) .pbox{grid-column:1;grid-row:2}
  .pstep:nth-child(odd) .pnum,.pstep:nth-child(even) .pnum{
    grid-column:1;grid-row:1;text-align:left;padding-inline:0;
    font-size:clamp(2.2rem,9vw,3rem);color:rgba(244,245,248,.16);
  }
  /* nth-child has to be repeated here: the desktop arm rules are more
     specific than a bare .pstep::after and would keep even steps' arm at 50% */
  .pstep .dot{top:1.1rem;left:5px;transform:translate(-50%,-50%)}
  .pstep:nth-child(odd)::after,.pstep:nth-child(even)::after{
    top:1.1rem;left:5px;right:auto;width:clamp(1rem,4vw,1.6rem);
  }
  .beliefs-cloud{opacity:.45}
  .beliefs-cloud span:nth-child(n+9){display:none}
  /* at this size the longer sentences are wider than the phone — let them
     wrap instead of running off the edge. */
  .beliefs-cloud span{white-space:normal;max-width:86vw;line-height:1.25}
  /* only eight sentences survive here — respread them over the whole panel,
     otherwise they all sit in the top half where the desktop grid put them. */
  .beliefs-cloud span:nth-child(1){top:6%;left:4%;right:auto}
  .beliefs-cloud span:nth-child(2){top:17%;right:4%;left:auto}
  .beliefs-cloud span:nth-child(3){top:26%;left:4%;right:auto}
  .beliefs-cloud span:nth-child(4){top:33%;left:6%;right:auto}
  .beliefs-cloud span:nth-child(5){top:65%;right:4%;left:auto}
  .beliefs-cloud span:nth-child(6){top:72%;left:4%;right:auto}
  .beliefs-cloud span:nth-child(7){top:83%;right:4%;left:auto}
  .beliefs-cloud span:nth-child(8){top:88%;left:6%;right:auto}
  .aurora{filter:blur(50px)}
}
@media (max-width:600px){
  .pill{gap:.4rem;padding:.5rem .5rem .5rem .75rem}
  .pill-btn{padding:.35rem .4rem}
  .pill-cta{letter-spacing:.08em;padding:.6em .85em}
  .hero-cta{flex-direction:column;align-items:stretch}
}
/* the word goes, the cross stays; the button keeps its name for screen readers */
@media (max-width:380px){
  .menu .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .js .reveal,.w > i,.js .hero-cta .btn,.js .hero .scroll-cue{opacity:1;transform:none;filter:none}
  .fineline path{stroke-dashoffset:0}
  .fineline .spark{display:none}
  .threads{transform:none}
  .beliefs-cloud span,.beliefs-cloud span.gone{opacity:1;filter:none}
  .hero-video{display:none}          /* poster + aurora carry the hero instead */
}

/* ── standalone pages ─────────────────────────────────────────────
   Workshops and Über mich moved off the one-pager onto their own URLs,
   reachable from the menu. They reuse the section styles unchanged and
   only need the room the fixed bar takes and a way back. */
.subpage-head{
  max-width:1400px;margin:0 auto;padding:clamp(7rem,12vw,10rem) var(--pad) 0;
}
.subpage-head .back{
  display:inline-block;text-decoration:none;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .3s;
}
.subpage-head .back:hover,.subpage-head .back:focus-visible{color:var(--blue)}
.subpage .workshops,.subpage .about{padding-top:clamp(2.5rem,5vw,4rem)}

/* ── legal pages ────────────────────────────────────────────────── */
.legal{max-width:760px;margin:0 auto;padding:clamp(5rem,10vw,8rem) var(--pad) clamp(2rem,4vw,3rem)}
.legal h1{font-size:clamp(2.2rem,6vw,4rem);margin:1.6rem 0 2rem}
.legal h2{font-size:1.4rem;margin:2.5rem 0 .8rem}
.legal p{color:var(--ink-soft)}
.legal .back,.legal-foot a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-faint);
  transition:color .3s;
}
.legal .back:hover,.legal-foot a:hover{color:var(--blue)}
/* the unfinished parts look unfinished on purpose */
.legal .todo{border-left:1px solid var(--blue);background:var(--blue-pale);color:var(--ink);padding:.8rem 1.2rem}
.legal-foot{max-width:760px;margin:0 auto;padding:0 var(--pad) clamp(3rem,6vw,5rem);display:flex;gap:1rem 1.8rem;flex-wrap:wrap}

/* ── the effects the sections drive ─────────────────────────────── */
.beliefs-center p{transition:opacity 2.2s var(--ease)}