/*
Theme Name: Raum zum DaSein
Theme URI: https://raum-zum-dasein.de
Author: Bergrath Marketing
Description: Blocktheme für Daniela Bergrath, Raum zum DaSein in Nettersheim. Legt beim Aktivieren Startseite, drei Angebotsseiten sowie Impressum und Datenschutz an.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: Alle Rechte vorbehalten
Text Domain: raum-zum-dasein
*/

/* Schriften kommen über theme.json (assets/fonts). */

:root{
  /* Markenfarben */
  --blau:#205493;
  --blau-tief:#183F6F;
  --lavendel:#837BBA;
  --rosa:#F3AAB3;
  --zartrosa:#F8E4EA;
  --knopf:#8B7EB6;      /* Buttonfarbe laut Feedback */
  --knopf-tief:#76699F;

  /* Papier & Tinte */
  --papier:#FAF6F1;
  --papier-2:#F3ECE5;
  --blatt:rgba(255,253,251,.72);
  --tinte:#27314A;
  --tinte-2:#545D74;
  --tinte-3:#666D82;
  --rosa-tief:#C4697C;   /* nur für große Schrift/Akzente */
  --rosa-text:#AB5165;   /* kleine Schrift in Rosa (Kontrast AA) */
  --lav-tief:#6B62A8;
  --linie:rgba(39,49,74,.11);

  /* Typo */
  --sans:"Alegreya Sans",ui-sans-serif,system-ui,sans-serif;
  --ui:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  --script:"Allura",cursive;

  /* Bewegung */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-weich:cubic-bezier(.33,.06,.18,1);
  --ease-feder:cubic-bezier(.34,1.4,.64,1);

  /* Raster */
  --max:1240px;
  --rand:clamp(20px,5vw,64px);
  --r-gross:36px;
  --r-mittel:22px;

  /* Ebenen */
  --z-farbe:0;
  --z-inhalt:1;
  --z-nav:46;
  --z-menue:45;
  --z-korn:60;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{interpolate-size:allow-keywords;-webkit-text-size-adjust:100%;scroll-padding-top:110px;overflow-x:clip}
body{
  font-family:var(--sans);font-weight:400;font-size:clamp(1.12rem,.4vw + 1rem,1.25rem);line-height:1.62;
  color:var(--tinte);background:var(--papier);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--zartrosa);color:var(--tinte)}
:focus-visible{outline:2px solid var(--lavendel);outline-offset:4px;border-radius:6px}

/* Papierkörnung über allem */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-korn);pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .25  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


.wrap{width:min(var(--max),100% - var(--rand)*2);margin-inline:auto;position:relative;z-index:var(--z-inhalt)}
section{position:relative}

/* --------------------------------------------------------------------------
   Aquarell-Flecken
   -------------------------------------------------------------------------- */
.wash{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;
  translate:-50% -50%;pointer-events:none;z-index:var(--z-farbe);
}
.wash i{
  display:block;width:100%;height:100%;
  background:var(--img) center/contain no-repeat;
  mix-blend-mode:multiply;opacity:0;
  transform:rotate(var(--r,0deg)) scale(.8);filter:blur(22px);
  transition:opacity 3.2s var(--ease-weich),transform 5s var(--ease),filter 3.6s var(--ease-weich);
}
.wash.on i{opacity:var(--o,.6);transform:rotate(var(--r,0deg)) scale(1);filter:blur(0)}
@media (prefers-reduced-motion:no-preference){
  .wash.on i{animation:treiben var(--d,46s) ease-in-out infinite alternate}
  @supports (animation-timeline:view()){
    .wash{animation:schweben linear both;animation-timeline:view()}
  }
}
@keyframes treiben{
  0%{translate:0 0;rotate:0deg}
  50%{translate:1.6% -2.2%;rotate:3deg}
  100%{translate:-1.4% 1.8%;rotate:-2.5deg}
}
@keyframes schweben{
  from{translate:-50% calc(-50% + var(--p,7vh))}
  to{translate:-50% calc(-50% - var(--p,7vh))}
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
.display{
  font-weight:300;font-size:clamp(2.9rem,6.4vw,6rem);line-height:1;letter-spacing:-.025em;color:var(--tinte);
  text-wrap:balance;
}
.h2{
  font-weight:300;font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.02em;color:var(--tinte);
  text-wrap:balance;max-width:17ch;
}
.h3{font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;letter-spacing:-.015em}
.schrift{
  font-family:var(--script);font-weight:400;letter-spacing:0;font-size:1.32em;line-height:.6;
  color:var(--rosa-tief);padding-inline:.04em 0;display:inline-block;transform:translateY(.06em);
}
.schrift.lav{color:var(--lav-tief)}
.schrift.blau{color:var(--blau)}
.lead{font-size:clamp(1.22rem,1.1vw + .9rem,1.45rem);line-height:1.55;color:var(--tinte-2);max-width:46ch;text-wrap:pretty}
.text{color:var(--tinte-2);max-width:60ch;text-wrap:pretty}
.text p+p{margin-top:1em}
.text strong{color:var(--tinte);font-weight:500}


/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
/* Knopf: eigene Knöpfe (.knopf) und Knopf-Blöcke sehen gleich aus.
   Der Pfeil im Kreis ist ein ::after, damit der Text im Editor frei bleibt. */
.knopf,.wp-block-button .wp-block-button__link{
  --bg:var(--knopf);--fg:#fff;--kreis:rgba(255,255,255,.2);
  display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 26px;border-radius:999px;
  background:var(--bg);color:var(--fg);text-decoration:none;word-break:normal;width:auto;height:auto;text-align:left;
  font-family:var(--ui);font-size:.9rem;font-weight:500;letter-spacing:.01em;line-height:1.3;border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 14px 30px -14px rgba(118,105,159,.6);
  transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .5s var(--ease);
}
.knopf::after,.wp-block-button .wp-block-button__link::after{
  content:"";width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--pfeil) center/16px no-repeat,var(--kreis);
  transition:transform .6s var(--ease)
}
.knopf:hover,.wp-block-button .wp-block-button__link:hover{background-color:var(--knopf-tief);color:var(--fg);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 36px -14px rgba(118,105,159,.65)}
.knopf:hover::after,.wp-block-button .wp-block-button__link:hover::after{transform:translateX(3px) rotate(-45deg) scale(1.05)}
.knopf:active,.wp-block-button .wp-block-button__link:active{transform:scale(.975)}
.knopf:disabled{opacity:.7;cursor:progress}

/* Textlink: schlichter Link mit Unterstrich (Knopfstil "Textlink") */
.link,.wp-block-button.is-style-link .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-size:.9rem;font-weight:500;color:var(--knopf);
  text-decoration:none;padding:12px 4px;position:relative;background:none;box-shadow:none;border-radius:0
}
.link::after,.wp-block-button.is-style-link .wp-block-button__link::after{
  content:"";position:absolute;left:4px;right:4px;bottom:6px;width:auto;height:1px;border-radius:0;background:currentColor;opacity:.35;
  transform-origin:right;transition:transform .6s var(--ease),opacity .3s
}
.wp-block-button.is-style-link .wp-block-button__link:hover{background:none;color:var(--knopf-tief);box-shadow:none}
.wp-block-button.is-style-link .wp-block-button__link:hover::after{transform:none}
.link:hover::after,.wp-block-button.is-style-link .wp-block-button__link:hover::after{opacity:.9;animation:unterstreichen .8s var(--ease)}
@keyframes unterstreichen{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.wp-block-buttons>.wp-block-button{margin:0}

/* --------------------------------------------------------------------------
   Navigation – schwebende Insel
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:18px;left:50%;translate:-50% 0;z-index:var(--z-nav);
  width:min(1180px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:6px 8px 6px 20px;border-radius:999px;
  background:rgba(250,246,241,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 0 0 1px rgba(39,49,74,.06),0 18px 40px -26px rgba(39,49,74,.4);
  transition:translate .6s var(--ease),background .4s;
}
.nav.versteckt{translate:-50% -140%}
/* Desktop und Tablet: Navigation bleibt immer sichtbar */
@media (min-width:641px){.nav.versteckt{translate:-50% 0}}
.nav-farbe{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.nav-farbe .wash{animation:none}
.nav>*:not(.nav-farbe){position:relative;z-index:1}
.nav-logo img{height:64px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{
  display:block;padding:10px 16px;border-radius:999px;font-family:var(--ui);font-size:.84rem;font-weight:500;color:var(--tinte);
  text-decoration:none;transition:background .3s,color .3s
}
.nav-links .hat-unter{position:relative}
.nav-links .unter{
  list-style:none;position:absolute;top:100%;left:50%;translate:-50% 8px;min-width:230px;padding:14px 10px 10px;
  background:rgba(250,246,241,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:20px;
  box-shadow:0 0 0 1px rgba(39,49,74,.06),0 22px 44px -24px rgba(39,49,74,.45);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),translate .4s var(--ease),visibility 0s .3s
}
.nav-links .unter::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-links .hat-unter:hover .unter,.nav-links .hat-unter:focus-within .unter{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .3s var(--ease),translate .4s var(--ease)}
.nav-links .unter a{padding:10px 14px;border-radius:12px;white-space:nowrap}
.nav-links .unter a[aria-current="page"]{color:#544885;background:rgba(139,126,182,.2)}
.menue .menue-unter a[aria-current="page"]{color:#544885}
.nav-links .hat-unter>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;rotate:45deg;translate:0 -3px;opacity:.6}
.nav-links a:hover{background:rgba(139,126,182,.16)}
.nav-links a[aria-current="true"]{color:#544885;background:rgba(139,126,182,.26)}
.nav .knopf{padding:6px 6px 6px 20px;font-size:.84rem}
.nav .knopf::after{width:34px;height:34px}
.nav-toggle{display:none;width:46px;height:46px;border-radius:50%;position:relative;background:rgba(139,126,182,.16)}
.nav-toggle span{position:absolute;left:14px;width:18px;height:1.5px;background:var(--tinte);border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav-toggle span:nth-child(1){top:19px}
.nav-toggle span:nth-child(2){top:26px}
.menue-offen .nav-toggle span:nth-child(1){top:22.5px;transform:rotate(45deg)}
.menue-offen .nav-toggle span:nth-child(2){top:22.5px;transform:rotate(-45deg)}

.menue{
  position:fixed;inset:0;z-index:var(--z-menue);background:rgba(250,246,241,.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;padding:120px var(--rand) 40px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;overflow:hidden
}
.menue-offen .menue{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.menue ul{list-style:none}
.menue li{overflow:hidden}
.menue a{
  display:block;padding:6px 0;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:300;letter-spacing:-.02em;text-decoration:none;color:var(--tinte);
  transform:translateY(110%);transition:transform .8s var(--ease)
}
.menue .menue-unter{list-style:none;margin:2px 0 10px 4px}
.menue .menue-unter a{font-size:clamp(1.25rem,5vw,1.5rem);padding:3px 0 3px 18px;color:var(--tinte-2);position:relative}
.menue .menue-unter a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--knopf)}
.menue-offen .menue a{transform:none;transition-delay:calc(.08s + var(--i) * .06s)}
.menue .menue-fuss a{display:inline;font-size:inherit;font-weight:500;letter-spacing:0;padding:0;transform:none;color:var(--knopf)}
.menue .menue-fuss{margin-top:40px;font-family:var(--ui);font-size:.9rem;color:var(--tinte-2);opacity:0;transition:opacity .6s .4s}
.menue-offen .menue .menue-fuss{opacity:1}
.menue .wash{--o:.5}

/* --------------------------------------------------------------------------
   Einblenden beim Scrollen
   -------------------------------------------------------------------------- */
/* Verzögerung innerhalb eines Abschnitts: v-1 … v-9 */
.v-1{--i:1}.v-2{--i:2}.v-3{--i:3}.v-4{--i:4}.v-5{--i:5}.v-6{--i:6}.v-7{--i:7}.v-8{--i:8}.v-9{--i:9}
.zeig-kinder>:nth-child(2){--i:1}.zeig-kinder>:nth-child(3){--i:2}.zeig-kinder>:nth-child(4){--i:3}.zeig-kinder>:nth-child(5){--i:4}.zeig-kinder>:nth-child(6){--i:5}
.gruende.zeig-kinder>:nth-child(3n+1){--i:0}.gruende.zeig-kinder>:nth-child(3n+2){--i:1}.gruende.zeig-kinder>:nth-child(3n+3){--i:2}
@media (prefers-reduced-motion:no-preference){
  .js .zeig{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
  .js .zeig.da{opacity:1;transform:none;filter:none}
  .js .woerter .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i) * 55ms + 150ms)}
  .js .woerter.da .w{opacity:1;transform:none;filter:none}
}

/* --------------------------------------------------------------------------
   Aquarell-Rahmen für Fotos
   -------------------------------------------------------------------------- */
/* figure.aq mit Klasse m1 … m7 (Form) und r-… (Seitenverhältnis) */
.aq{position:relative;width:100%;aspect-ratio:var(--ratio,4/5);overflow:hidden;margin:0}
.aq img{width:100%;height:100%;object-fit:cover;display:block}
.r-4-5{--ratio:4/5}.r-16-11{--ratio:16/11}.r-16-9{--ratio:16/9}.r-1-1{--ratio:1/1}.r-3-2{--ratio:3/2}
.js .aq{
  -webkit-mask:var(--maske) center/100% 100% no-repeat;mask:var(--maske) center/100% 100% no-repeat;
  opacity:0;transform:scale(.94);transition:opacity 1.8s var(--ease-weich),transform 2.4s var(--ease)
}
.js .aq.on{opacity:1;transform:none}
.js .aq.ohne-maske{-webkit-mask:none;mask:none;border-radius:var(--r-gross)}

/* --------------------------------------------------------------------------
   01 · Hero
   -------------------------------------------------------------------------- */
.hero{padding:clamp(150px,18vh,200px) 0 clamp(40px,6vw,80px);min-height:min(100dvh,1000px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,6vw,96px);align-items:center}
.hero-ort{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:.82rem;font-weight:500;color:var(--tinte-2);margin-bottom:28px}
.hero-ort::before{content:"";width:16px;height:16px;flex:none;background:var(--rosa-tief);-webkit-mask:var(--ic-ort) center/contain no-repeat;mask:var(--ic-ort) center/contain no-repeat}
.hero h1{margin-bottom:32px}
.hero h1 .schrift{font-size:1.4em;margin-right:.04em}
.hero .lead{margin-bottom:42px}
.hero-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
/* Herz im Hero: wird gemalt, dann atmet es */
.hero-herz{position:relative;width:min(100%,540px);margin-inline:auto;aspect-ratio:760/754}
.hero-herz::before{
  content:"";position:absolute;inset:6% 4% 2%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(243,170,179,.38),rgba(243,170,179,.12) 55%,transparent 75%);
  opacity:0;transform:scale(.9)
}
.herz-svg{display:block;width:100%;height:100%;overflow:visible}
.pinsel{stroke-dasharray:1;stroke-dashoffset:1}
.pinsel-rest{opacity:0}
.herz-atem{transform-box:view-box;transform-origin:380px 400px}
/* ohne JavaScript: Herz sofort vollständig zeigen */
html:not(.js) .pinsel{stroke-dashoffset:0}
html:not(.js) .pinsel-rest{opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* zwei Pinselzüge, wie das Herz gemalt wurde: erst links, dann rechts */
  .malt .pinsel-a{animation:malen 2.9s cubic-bezier(.5,.05,.3,1) .5s forwards}
  .malt .pinsel-b{animation:malen 2.9s cubic-bezier(.5,.05,.3,1) 1.6s forwards}
  .malt .pinsel-rest{animation:aufscheinen 1.4s ease-out 4.2s forwards}
  .hero-herz.malt::before{animation:schein-an 2.4s ease-out 3.4s forwards,schein-atmen 10s ease-in-out 5.6s infinite}
  /* Atemrhythmus: 4 s ein, 1 s halten, 5 s aus */
  .malt .herz-atem{animation:herz-atmen 10s ease-in-out 5.6s infinite}
}
@media (prefers-reduced-motion:reduce){
  .pinsel{stroke-dashoffset:0}
  .pinsel-rest,.hero-herz::before{opacity:1;transform:none}
}
@keyframes malen{to{stroke-dashoffset:0}}
@keyframes aufscheinen{to{opacity:1}}
@keyframes schein-an{to{opacity:.6;transform:scale(1)}}
@keyframes herz-atmen{0%,100%{transform:scale(1)}40%,50%{transform:scale(1.045)}}
@keyframes schein-atmen{0%,100%{opacity:.6;transform:scale(1)}40%,50%{opacity:1;transform:scale(1.1)}}


/* --------------------------------------------------------------------------
   02 · Kennst du das?
   -------------------------------------------------------------------------- */
.kennst{padding:clamp(70px,9vw,130px) 0 clamp(70px,8vw,120px)}
.intro{margin:clamp(10px,3vw,40px) 0 clamp(110px,13vw,180px)}
.intro-vor{font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--tinte-2);margin-bottom:clamp(14px,2vw,24px)}
.intro-alltag{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,5vw,80px);align-items:end}
/* Je weiter unten, desto blasser: man verliert sich im Funktionieren */
.alltag{display:flex;flex-direction:column;font-weight:300;font-size:clamp(2.8rem,6.6vw,6.2rem);line-height:1;letter-spacing:-.03em}
.alltag p{color:rgba(39,49,74,var(--o,1))}
.alltag p:nth-child(2){--o:.7}.alltag p:nth-child(3){--o:.5}.alltag p:nth-child(4){--o:.32}
.intro-text{color:var(--tinte-2);font-size:clamp(1.15rem,1.3vw,1.3rem);line-height:1.55;max-width:34ch;padding-bottom:.8em;text-wrap:pretty}
.intro-wende{margin-top:clamp(80px,10vw,150px);text-align:right;font-weight:300;font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.intro-wende .schrift{font-size:1.45em}
.intro-nach{text-align:right;font-style:italic;font-weight:300;font-size:clamp(1.25rem,1.9vw,1.7rem);color:var(--tinte-2);margin-top:clamp(10px,1.5vw,18px)}

.gruende-block{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr);gap:clamp(36px,6vw,90px);align-items:start}
.gruende-titel{font-weight:300;font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.15;letter-spacing:-.015em;text-wrap:balance;max-width:14ch}
.gruende{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,52px) clamp(22px,3vw,40px)}
/* Punkte mit Symbol im Kreis: Klasse ic-… am Listenpunkt wählt das Symbol */
.gruende li,.gefuehle li{--kreis:var(--zartrosa);--farbe:var(--rosa-tief);position:relative}
.gruende li::before,.gefuehle li::before{content:"";position:absolute;left:0;top:0;width:var(--kr,64px);height:var(--kr,64px);border-radius:50%;background:var(--kreis)}
.gruende li::after,.gefuehle li::after{
  content:"";position:absolute;left:calc((var(--kr,64px) - var(--ig,32px)) / 2);top:calc((var(--kr,64px) - var(--ig,32px)) / 2);
  width:var(--ig,32px);height:var(--ig,32px);background:var(--farbe);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;transform:scale(var(--is,1))
}
.gruende li:nth-child(3n+2){--kreis:#ECE9F6;--farbe:var(--lav-tief)}
.gruende li:nth-child(3n+3){--kreis:#E4ECF6;--farbe:var(--blau)}
.gruende li{padding-top:80px;font-size:1.14rem;line-height:1.4;color:var(--tinte);max-width:22ch}

/* --------------------------------------------------------------------------
   03 · Haltung
   -------------------------------------------------------------------------- */
.haltung{padding:clamp(110px,14vw,200px) 0;text-align:center}
.haltung .herz{position:absolute;left:50%;top:50%;width:min(620px,92vw);translate:-50% -50%;opacity:.16;z-index:var(--z-farbe);pointer-events:none}
.haltung .zitat{max-width:26ch;margin:0 auto;font-weight:300;font-size:clamp(2rem,4.3vw,3.7rem);line-height:1.14;letter-spacing:-.02em;color:var(--tinte);text-wrap:balance}
.haltung .zitat .wl{opacity:clamp(.16,calc(var(--p,1) * (var(--n) + 6) - var(--i)),1);transition:opacity .25s linear}
.haltung .zitat .schrift{font-size:1.25em}
.mantra{margin-top:clamp(40px,5vw,60px);font-family:var(--script);font-size:clamp(2rem,3.4vw,2.9rem);color:var(--lav-tief);line-height:1.2}
.mantra p{display:inline;white-space:nowrap}
.mantra p+p::before{content:"·";margin:0 .4em;color:var(--rosa)}

/* --------------------------------------------------------------------------
   04 · Angebote
   -------------------------------------------------------------------------- */
.angebote{padding:clamp(90px,11vw,170px) 0 clamp(90px,11vw,160px)}
.abschnitt-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(50px,7vw,90px)}
.angebote-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}

.blatt{
  position:relative;border-radius:var(--r-gross);background:var(--blatt);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(39,49,74,.045),0 40px 80px -50px rgba(90,70,90,.35),0 12px 30px -24px rgba(90,70,90,.25);
}
.angebot{display:flex;flex-direction:column;padding:clamp(14px,1.4vw,18px)}
.angebot .aq{width:calc(100% + 4px);max-width:none;margin:-2px -2px 0}
.angebot-inhalt{padding:clamp(18px,2.6vw,34px) clamp(14px,2.2vw,30px) clamp(12px,1.6vw,20px);display:flex;flex-direction:column;flex:1}
.angebot .zeile{font-family:var(--ui);font-size:.78rem;font-weight:500;color:var(--lav-tief);margin-bottom:12px}
.angebot h3{margin-bottom:16px}
.angebot .text{font-size:1.1rem}
.guttun-titel{margin-top:24px;font-family:var(--ui);font-weight:500;font-size:.76rem;color:var(--tinte-3);margin-bottom:6px}
.guttun{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin:0 0 28px;font-size:1.02rem;color:var(--tinte-2);line-height:1.5}
.guttun li{display:inline-flex;align-items:center;gap:9px}
.guttun li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rosa);flex:none}
.angebot-fuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--linie)}

/* Die Kunst des Seins */
.kunst{grid-column:1/-1;overflow:hidden;padding:clamp(34px,5.5vw,80px) clamp(24px,5vw,76px) clamp(30px,4vw,56px);isolation:isolate}
.kunst .wash{z-index:-1}
.kunst-kopf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end}
.kunst .zeile{font-family:var(--ui);font-size:.8rem;font-weight:500;color:var(--rosa-text);margin-bottom:16px}
.kunst h3{font-size:clamp(2.7rem,6vw,5.4rem);font-weight:300;letter-spacing:-.03em;line-height:.98}
.kunst h3 .schrift{font-size:1.3em;color:var(--rosa-tief)}
.kunst .unter{margin-top:14px;font-size:1.3rem;font-weight:300;font-style:italic;color:var(--tinte-2)}
.kunst-fakten{list-style:none;display:flex;gap:28px;margin-top:22px;font-family:var(--ui);font-size:.8rem;font-weight:500;color:var(--tinte-2)}
.kunst-fakten li{display:flex;align-items:center;gap:8px}
.kunst-fakten li::before{content:"";width:16px;height:16px;flex:none;background:var(--lav-tief);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.stationen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);margin:clamp(44px,6vw,80px) 0 clamp(40px,5vw,64px);position:relative}
.station{position:relative;padding-top:30px}
.station::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--c),transparent)}
.station .nr{font-family:var(--script);font-size:clamp(3.4rem,5vw,4.4rem);line-height:1;color:var(--c2);margin:-4px 0 10px}
.station h4{font-weight:400;font-size:1.55rem;line-height:1.15;color:var(--tinte);margin-bottom:4px}
.station .methode{font-family:var(--ui);font-size:.78rem;font-weight:500;color:var(--c2);margin-bottom:12px}
.station p{color:var(--tinte-2);font-size:1.06rem;line-height:1.5}
.station:nth-child(1){--c:var(--rosa);--c2:var(--rosa-text)}
.station:nth-child(2){--c:#9FB8DA;--c2:var(--blau)}
.station:nth-child(3){--c:var(--lavendel);--c2:var(--lav-tief)}
.kunst-knoepfe{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.kunst-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--linie)}
.gedicht{font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.45;color:var(--tinte-2)}
.gedicht em{font-style:normal;font-family:var(--script);font-size:1.7em;color:var(--rosa-tief);line-height:1;display:inline-block;margin-top:10px}

/* --------------------------------------------------------------------------
   05 · Über mich
   -------------------------------------------------------------------------- */
.ueber{padding:clamp(80px,9vw,140px) 0 clamp(60px,7vw,110px)}
.ueber .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.ueber .aq{position:sticky;top:120px}
.ueber-text .h2{margin-bottom:32px}
.ausbildung{margin-top:40px;list-style:none}
.ausbildung li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:14px 0;border-top:1px solid var(--linie);font-size:1.08rem}
.ausbildung li:last-child{border-bottom:1px solid var(--linie)}
.ausbildung li em{font-style:normal;font-family:var(--ui);font-size:.78rem;color:var(--tinte-3);align-self:center;font-variant-numeric:tabular-nums}
.ausbildung-titel{font-family:var(--ui);font-size:.8rem;font-weight:500;color:var(--tinte-3);margin-top:44px;margin-bottom:-26px}
.signatur{font-family:var(--script);font-size:clamp(3rem,5vw,4.2rem);color:var(--lav-tief);line-height:1;margin-top:36px}

/* --------------------------------------------------------------------------
   06 · Stimmen
   -------------------------------------------------------------------------- */
.stimmen{padding:clamp(70px,8vw,120px) 0}
.stimmen-titel{margin-bottom:clamp(36px,5vw,60px)}
.bewertungen-widget{position:relative;z-index:1}
/* Platzhalter, solange Trustindex nicht eingerichtet ist (gleiche Form wie das Widget) */
.ti-platzhalter{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#222}
.ti-gesamt{text-align:center;display:grid;gap:4px;justify-items:center}
.ti-wort{font-weight:700;font-size:1.3rem;letter-spacing:.01em;color:#000}
.ti-sterne{color:#F6BB06;letter-spacing:2px;font-size:.95rem;line-height:1;display:flex;align-items:center}
.ti-sterne.gross{font-size:1.7rem;letter-spacing:3px}
.ti-anzahl{font-size:.85rem;color:#333}
.ti-google{display:flex;align-items:center;gap:6px;font-size:1.05rem;font-weight:500;color:#555;margin-top:4px}
.ti-google svg{width:24px;height:24px}
.ti-slider{display:flex;align-items:center;gap:10px;min-width:0}
.ti-karten{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ti-karte{background:#fff;border-radius:10px;padding:18px 18px 22px;display:grid;gap:12px;align-content:start;box-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.06)}
.ti-kopf{display:flex;align-items:center;gap:10px}
.ti-avatar{width:40px;height:40px;border-radius:50%;background:#E8E3EF;flex:none}
.ti-name{flex:1;display:grid;gap:6px}
.ti-name i{display:block;height:9px;border-radius:5px;background:#E6E1EC;width:75%}
.ti-name i+i{width:45%;height:7px;background:#EFEBF2}
.ti-g svg{width:18px;height:18px}
.ti-check{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#1A73E8;color:#fff;font-size:9px;letter-spacing:0;margin-left:6px}
.ti-zeile{display:block;height:8px;border-radius:5px;background:#EFEBF2}
.ti-zeile.kurz{width:60%}
.ti-pfeil{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:#666;font-size:22px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.12)}
@media (max-width:1080px){.ti-karten{grid-template-columns:repeat(2,minmax(0,1fr))}.ti-karte:nth-child(n+3){display:none}}
@media (max-width:900px){.ti-platzhalter{grid-template-columns:1fr}}
@media (max-width:640px){.ti-karten{grid-template-columns:1fr}.ti-karte:nth-child(n+2){display:none}}

/* --------------------------------------------------------------------------
   07 · FAQ
   -------------------------------------------------------------------------- */
.faq{padding:clamp(70px,8vw,120px) 0}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,120px);align-items:start}
.faq-seite{position:sticky;top:130px}
.faq-seite .text{margin-top:24px}
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:20px;align-items:center;
  padding:26px 0;font-weight:400;font-size:clamp(1.15rem,1.4vw,1.32rem);line-height:1.35;color:var(--tinte);transition:color .3s
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--linie) inset;
  background:linear-gradient(currentColor,currentColor) center/12px 1.4px no-repeat,linear-gradient(currentColor,currentColor) center/1.4px 12px no-repeat;
  transition:background-color .3s,transform .6s var(--ease)
}
.frage[open] summary::after{background:linear-gradient(currentColor,currentColor) center/12px 1.4px no-repeat,var(--zartrosa)}
.frage summary:hover{color:var(--knopf-tief)}
.frage summary:focus-visible{outline-offset:2px}
.frage>p,.frage>:not(summary){padding:0 56px 28px 0;color:var(--tinte-2);font-size:1.06rem;max-width:62ch}
@supports selector(::details-content){
  .frage::details-content{block-size:0;overflow:hidden;transition:block-size .8s var(--ease),content-visibility .8s allow-discrete}
  .frage[open]::details-content{block-size:auto}
}

/* --------------------------------------------------------------------------
   08 · Erster Termin
   -------------------------------------------------------------------------- */
.termin{padding:clamp(80px,9vw,140px) 0}
.termin .abschnitt-kopf{grid-template-columns:1fr;justify-items:center;text-align:center}
.termin .h2{max-width:20ch}
.weg-buehne{position:relative}
.weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,60px);position:relative}
.weg-linie{position:absolute;left:8%;right:8%;top:48px;height:120px;z-index:0;color:var(--rosa);overflow:visible}
.weg-linie path{opacity:.4}
.weg-linie .fluss{opacity:1;stroke-dasharray:.16 .84;stroke-dashoffset:1}
@media (prefers-reduced-motion:no-preference){.weg-linie .fluss{animation:fliessen 6s linear infinite}}
@keyframes fliessen{to{stroke-dashoffset:0}}
.schritt{position:relative;z-index:1;text-align:center}
.schritt-icon{width:96px;height:96px;margin:0 auto 30px;border-radius:50%;display:grid;place-items:center;background:var(--papier);box-shadow:0 0 0 1px rgba(196,105,124,.35) inset,0 0 0 10px var(--papier);color:var(--tinte)}
.schritt-icon svg{width:40px;height:40px}
.schritt .klein{font-family:var(--ui);font-size:.76rem;font-weight:500;color:var(--rosa-text);margin-bottom:10px}
.schritt h3{font-weight:400;font-size:1.6rem;line-height:1.15;margin-bottom:12px}
.schritt p{color:var(--tinte-2);max-width:30ch;margin:0 auto;font-size:1.08rem}
.dampf path{stroke-dasharray:6 6}
@media (prefers-reduced-motion:no-preference){.dampf path{animation:dampf 3.2s linear infinite}.dampf path+path{animation-delay:-1.4s}}
@keyframes dampf{to{stroke-dashoffset:-24}}

/* Video-Einblick: lädt YouTube erst nach Klick */
.einblick{max-width:1040px;margin:clamp(80px,10vw,140px) auto 0;position:relative;z-index:1}
.einblick-vor{text-align:center;font-style:italic;font-weight:300;font-size:clamp(1.25rem,1.8vw,1.6rem);color:var(--tinte-2);margin-bottom:clamp(18px,2.4vw,28px)}
.einblick-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;color:#fff;background:radial-gradient(60% 60% at 50% 50%,rgba(39,49,74,.18),rgba(39,49,74,.05));transition:background .6s var(--ease)}
.einblick-play:hover{background:radial-gradient(60% 60% at 50% 50%,rgba(39,49,74,.26),rgba(39,49,74,.08))}
.play-kreis{width:clamp(68px,8vw,88px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(139,126,182,.92);box-shadow:0 0 0 10px rgba(255,255,255,.28),0 18px 40px -14px rgba(60,50,90,.6);transition:transform .6s var(--ease)}
.play-kreis svg{width:34%;height:34%;margin-left:6%}
.einblick-play:hover .play-kreis{transform:scale(1.07)}
.play-text{font-family:var(--ui);font-size:.92rem;font-weight:500;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:no-preference){.play-kreis{animation:play-atem 4.5s ease-in-out infinite}}
@keyframes play-atem{0%,100%{box-shadow:0 0 0 8px rgba(255,255,255,.3),0 18px 40px -14px rgba(60,50,90,.6)}50%{box-shadow:0 0 0 18px rgba(255,255,255,.12),0 18px 40px -14px rgba(60,50,90,.6)}}
.einblick iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.einblick-hinweis{text-align:center;margin-top:16px;font-size:.9rem;color:var(--tinte-3)}

/* --------------------------------------------------------------------------
   09 · Abschluss & Kontakt
   -------------------------------------------------------------------------- */
.abschluss{padding:clamp(110px,14vw,210px) 0 clamp(80px,9vw,130px)}
.abschluss-kopf{text-align:center;max-width:900px;margin:0 auto clamp(70px,9vw,120px)}
.abschluss-kopf .display{font-size:clamp(3rem,7.6vw,7rem)}
.abschluss-kopf .display .schrift{font-size:1.32em}
.abschluss-kopf .lead{margin:30px auto 0;text-align:center}
.abschluss-kopf .unterschrift{font-family:var(--script);font-size:2.6rem;color:var(--lav-tief);margin-top:8px}
.abschluss-kopf .hero-aktion{justify-content:center;margin-top:40px}

.kontakt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,2.4vw,32px);align-items:stretch}
.kontakt-wege{padding:clamp(28px,3.4vw,48px)}
.kontakt-wege h3,.formular h3{font-weight:300;font-size:clamp(1.7rem,2.4vw,2.1rem);margin-bottom:26px}
.weg-zeile{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--linie);text-decoration:none}
.weg-zeile:last-of-type{border-bottom:1px solid var(--linie)}
.weg-zeile .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--zartrosa);color:var(--rosa-tief);transition:transform .5s var(--ease)}
.weg-zeile:nth-of-type(2) .ic{background:#E9E7F4;color:var(--lav-tief)}
.weg-zeile:nth-of-type(3) .ic{background:#E3EAF4;color:var(--blau)}
.weg-zeile .ic svg{width:20px;height:20px}
a.weg-zeile:hover .ic{transform:scale(1.08) rotate(-6deg)}
.weg-zeile small{display:block;font-family:var(--ui);font-size:.74rem;font-weight:500;color:var(--tinte-3)}
.weg-zeile span{font-size:1.18rem;color:var(--tinte)}
.karte-platz{margin-top:24px;border-radius:var(--r-mittel);aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,rgba(39,49,74,.025) 0 10px,transparent 10px 20px);box-shadow:0 0 0 1px var(--linie) inset;color:var(--tinte-2);font-size:1rem}
.karte-platz .link{margin-top:6px}

.formular{padding:clamp(28px,3.4vw,48px)}
.formular form{display:grid;gap:18px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feld{display:grid;gap:8px}
.feld label,.feld legend{font-family:var(--ui);font-size:.78rem;font-weight:500;color:var(--tinte-2)}
.feld input,.feld textarea{
  font:inherit;font-size:1.1rem;color:var(--tinte);width:100%;
  background:rgba(255,255,255,.75);border:0;border-radius:16px;padding:15px 18px;
  box-shadow:0 0 0 1px var(--linie) inset;transition:box-shadow .3s,background .3s
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--tinte-3)}
.feld input:focus,.feld textarea:focus{outline:none;background:#fff;box-shadow:0 0 0 1.5px var(--lavendel) inset,0 0 0 5px rgba(131,123,186,.14)}
.feld textarea{min-height:130px;resize:vertical}
.feld .fehler{font-family:var(--ui);font-size:.76rem;color:#A3384E;display:none}
.feld.falsch input{box-shadow:0 0 0 1.5px #D27F90 inset}
.feld.falsch .fehler{display:block}
.auswahl{border:0;display:flex;flex-wrap:wrap;gap:8px}
.auswahl legend{margin-bottom:8px;width:100%}
.auswahl{position:relative}
.auswahl input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.auswahl label{cursor:pointer;font-family:var(--sans);font-size:1.02rem;font-weight:400;color:var(--tinte);padding:9px 18px;border-radius:999px;box-shadow:0 0 0 1px var(--linie) inset;background:rgba(255,255,255,.6);transition:background .3s,box-shadow .3s,color .3s}
.auswahl input:checked+label{background:var(--tinte);color:#fff;box-shadow:none}
.auswahl input:focus-visible+label{outline:2px solid var(--lavendel);outline-offset:3px}
.formular .fein{font-size:.92rem;color:var(--tinte-3)}
.formular .fein a{color:var(--tinte-2)}
.danke{display:none;padding:20px 22px;border-radius:16px;background:rgba(243,170,179,.18);color:var(--tinte);font-size:1.05rem}
.danke.zeigen{display:block}
.danke.problem{background:#FBE3E8;color:#7D2E40}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.feld .optional{color:var(--tinte-3)}
.knopf.sendet::after{animation:pulsieren 1.2s ease-in-out infinite}
@keyframes pulsieren{50%{opacity:.4}}

/* Fuß */
.fuss{padding:40px 0 48px;border-top:1px solid var(--linie);position:relative;z-index:var(--z-inhalt)}
.fuss .wrap>a{display:block}
.fuss .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.fuss img{height:44px;width:auto}
.fuss p,.fuss a{font-family:var(--ui);font-size:.8rem;color:var(--tinte-2);text-decoration:none}
.fuss nav{display:flex;gap:26px}
.fuss a:hover{color:var(--knopf-tief)}

/* Mobile Anrufen */
.anruf{display:none}

/* --------------------------------------------------------------------------
   Landingpages (z. B. /rebalancing/)
   -------------------------------------------------------------------------- */
.lp-hero{min-height:0;padding-bottom:clamp(60px,7vw,100px)}
.lp-bild{width:min(100%,500px);margin-inline:auto}
.mikro{margin-top:16px;font-size:.98rem;font-style:italic;color:var(--tinte-3)}
.mikro.zentriert{text-align:center}

.lp-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,7vw,110px);align-items:end}
.lp-zwei.oben{align-items:start;margin-top:clamp(40px,5vw,64px)}

.lp-spiegel{padding:clamp(90px,11vw,160px) 0 clamp(70px,8vw,120px)}
.gefuehle{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,80px);margin-top:clamp(50px,6vw,80px)}
.gefuehle li{--kr:56px;--ig:28px;display:flex;align-items:center;min-height:100px;padding:22px 0 22px 76px;border-top:1px solid var(--linie);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.35;color:var(--tinte)}
.gefuehle li::before,.gefuehle li::after{top:50%;translate:0 -50%}
.gefuehle li::after{top:50%}
.gefuehle li:nth-child(4n+2){--kreis:#ECE9F6;--farbe:var(--lav-tief)}
.gefuehle li:nth-child(4n+3){--kreis:#E4ECF6;--farbe:var(--blau)}
.gefuehle li:nth-child(4n+4){--kreis:#F6ECE4;--farbe:#A2674A}

.lp-was{padding:clamp(70px,8vw,120px) 0}
.lp-bild-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.lp-bild-text .h2{margin-bottom:26px}
.lp-bild-text.umgekehrt{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.lp-hochkant{max-width:460px;width:100%;margin-inline:auto}

.lp-wirkung{padding:clamp(70px,8vw,120px) 0}


.lp-ablauf{padding:clamp(80px,10vw,150px) 0}
.lp-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(50px,6vw,80px)}
.lp-schritte>*{padding-top:22px;border-top:1px solid var(--linie)}
.lp-schritte .wort{font-family:var(--script);font-size:clamp(2.6rem,3.6vw,3.3rem);line-height:1.1;margin-bottom:10px;color:var(--c,var(--rosa-tief))}
.lp-schritte>:nth-child(2){--c:var(--lav-tief)}
.lp-schritte>:nth-child(3){--c:var(--blau)}
.lp-schritte>:nth-child(4){--c:var(--knopf)}
.lp-schritte h3{font-weight:400;font-size:1.35rem;line-height:1.2;margin-bottom:8px}
.lp-schritte p:not(.wort){color:var(--tinte-2);font-size:1.06rem;line-height:1.5}
.lp-fakten{margin-top:clamp(40px,5vw,60px);font-size:1.12rem;color:var(--tinte-2)}

.lp-cranio{padding:clamp(80px,10vw,150px) 0}
.lp-vorzeile{font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.5vw,1.35rem);color:var(--tinte-2);margin-bottom:12px}
.lp-cranio .fein{margin-top:1.2em}

.lp-fuerwen{padding:clamp(70px,8vw,120px) 0}
.lp-fuerwen .h2{max-width:20ch}
.lp-liste h3{font-weight:400;font-size:1.45rem;margin-bottom:18px}
.lp-liste ul{list-style:none}
.lp-liste li{position:relative;padding:14px 0 14px 36px;border-top:1px solid var(--linie);font-size:1.12rem;line-height:1.45}
.lp-liste li::before{position:absolute;left:2px;top:13px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-family:var(--ui)}
.lp-liste.ja li::before{content:"✓";background:#ECE9F6;color:var(--lav-tief)}
.lp-liste.nein li::before{content:"–";background:var(--zartrosa);color:var(--rosa-text)}
.lp-liste .fein{margin-top:18px}

.lp-daniela{padding:clamp(80px,10vw,150px) 0}

.landing .abschluss-kopf .hero-aktion{gap:12px 28px}
/* Preise: freundlich, klar, ohne Druck */
.preise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);max-width:980px;margin:0 auto}
.preis{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.preis-wort{font-family:var(--script);font-size:clamp(2.3rem,3.2vw,2.9rem);line-height:1;color:var(--rosa-tief);margin-bottom:10px}
.preis:nth-child(2) .preis-wort{color:var(--lav-tief)}
.preis h3{font-weight:300;font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.1}
.preis-zahl{margin-top:10px;font-family:var(--ui);font-size:.92rem;font-weight:500;color:var(--tinte-2)}
.preis-zahl strong{font-family:var(--sans);font-weight:300;font-size:2.6rem;letter-spacing:-.02em;color:var(--tinte);margin-right:4px;vertical-align:-4px}
.preis-text{margin:16px 0 28px;color:var(--tinte-2);font-size:1.08rem;line-height:1.55;flex:1}
.preise.einzeln{grid-template-columns:minmax(0,560px);justify-content:center}
.mantra-klein{margin-top:1.2em;font-family:var(--script);font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.3;color:var(--lav-tief)}
.preise-hinweis{max-width:980px;margin:22px auto clamp(70px,9vw,120px);text-align:center;font-size:.98rem;font-style:italic;color:var(--tinte-3)}
.landing .kontakt{margin-bottom:clamp(70px,9vw,120px)}
.lp-weitere .wp-block-buttons{justify-content:center;gap:6px 26px}
.lp-weitere{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 26px;padding-top:28px;border-top:1px solid var(--linie);text-align:center}
.lp-weitere>p{width:100%;font-style:italic;font-weight:300;color:var(--tinte-2);margin-bottom:4px}

@media (max-width:1080px){
  .lp-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .lp-zwei,.lp-bild-text,.lp-bild-text.umgekehrt,.preise{grid-template-columns:1fr}
  .lp-bild{width:min(100%,460px)}
  .lp-bild-text.umgekehrt .aq{order:-1}
}
@media (max-width:640px){
  .gefuehle,.lp-schritte{grid-template-columns:1fr}
  .preis .wp-block-buttons,.preis .wp-block-button,.preis .wp-block-button__link{width:100%}
  .preis .wp-block-button__link{justify-content:space-between}
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .nav-links,.nav>.knopf{display:none}
  .nav-toggle{display:block}
}
@media (max-width:900px){
  .gruende-block,.intro-alltag{grid-template-columns:1fr}
  .gruende-titel{max-width:none}
  .hero .wrap,.abschnitt-kopf,.ueber .wrap,.faq .wrap,.kontakt,.kunst-kopf{grid-template-columns:1fr}
  .hero{padding-top:130px;min-height:0}
  .hero-herz{width:min(78%,420px)}
  .faq-seite{position:static}
  .angebote-raster{grid-template-columns:1fr}
  .stationen{grid-template-columns:1fr;gap:36px}
  .kunst-fuss{grid-template-columns:1fr}
  .ueber .aq{max-width:480px;position:static}
  .weg{grid-template-columns:1fr;gap:56px}
  .weg-linie{display:none}
}
@media (max-width:640px){
  body{font-size:1.1rem}
  .wash{width:calc(var(--w) * 1.75)}
  .mantra p{display:block}
  .mantra p+p::before{display:none}
  .kunst .wash{width:calc(var(--w) * 1.3)}
  .nav{top:10px;padding:6px 6px 6px 16px}
  .gruende{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .intro-wende,.intro-nach{text-align:left}
  .nav-logo img{height:52px}
  .reihe{grid-template-columns:1fr}
  .frage>p,.frage>:not(summary){padding:0 0 26px}
  .hero-aktion .wp-block-button:not(.is-style-link),.hero-aktion .wp-block-button:not(.is-style-link) .wp-block-button__link{width:100%}
  .hero-aktion .wp-block-button:not(.is-style-link) .wp-block-button__link{justify-content:space-between}
  .kunst-fakten{flex-wrap:wrap;gap:10px 20px}
  .anruf{display:grid;place-items:center;position:fixed;right:14px;bottom:14px;z-index:var(--z-nav);width:58px;height:58px;border-radius:50%;background:var(--knopf);color:#fff;box-shadow:0 14px 30px -10px rgba(118,105,159,.6)}
  .anruf svg{width:22px;height:22px}
}
/* --------------------------------------------------------------------------
   Symbole (als Maske, Farbe kommt aus dem CSS)
   -------------------------------------------------------------------------- */
:root{--pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");--ic-ort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E")}
.ic-wellen{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 13c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E")}
.ic-spirale{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c0-1 1-1.5 1.6-1 1 .7.6 2.6-1 3-2.2.6-3.8-1.6-3.2-3.6.9-3 4.6-3.6 6.7-1.7 2.8 2.5 1.6 7.2-2 8.3-4 1.2-8-1.8-8.1-5.9'/%3E%3C/svg%3E");--is:1.45}
.ic-akku{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='16' height='9' rx='2.2'/%3E%3Cpath d='M21.5 11v3'/%3E%3Cpath d='M6 11v3'/%3E%3C/svg%3E")}
.ic-schultern{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='2.7'/%3E%3Cpath d='M4 20.5c.4-4 3.6-6.5 8-6.5s7.6 2.5 8 6.5'/%3E%3Cpath d='M8.5 17l1.2-1.4 1.2 1.4 1.1-1.4 1.2 1.4 1.2-1.4'/%3E%3C/svg%3E")}
.ic-mond{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.5A7.5 7.5 0 1 1 9.5 4.5a6 6 0 0 0 10 10Z'/%3E%3Cpath d='M16.5 3.5v2.4M15.3 4.7h2.4'/%3E%3C/svg%3E")}
.ic-pflanze{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 14c-4 0-6.5-3-6.5-7.5 4 0 6.5 3 6.5 7.5Z'/%3E%3Cpath d='M12 12c0-4.5 2.5-7.5 6.5-7.5 0 4.5-2.5 7.5-6.5 7.5Z'/%3E%3C/svg%3E")}
.ic-sanduhr{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10'/%3E%3Cpath d='M8 3v3.5c0 1.8 4 3.5 4 5.5s-4 3.7-4 5.5V21M16 3v3.5c0 1.8-4 3.5-4 5.5s4 3.7 4 5.5V21'/%3E%3C/svg%3E")}
.ic-welle{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-3 6-3 9 0s6 3 9 0'/%3E%3Cpath d='M6 17c2-1.5 4-1.5 6 0s4 1.5 6 0' stroke-opacity='.55'/%3E%3C/svg%3E")}
.ic-feder{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C12 4 7 9 7 16v4'/%3E%3Cpath d='M7 16c5 0 10-2.5 12-7'/%3E%3Cpath d='M7 12c3.5 0 7-1.5 9-4'/%3E%3C/svg%3E")}
.ic-hand{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20v-5.5L5.6 11a1.5 1.5 0 0 1 2.5-1.7L9.5 11V4.5a1.5 1.5 0 0 1 3 0V10'/%3E%3Cpath d='M12.5 9a1.5 1.5 0 0 1 3 0v1.5M15.5 10a1.5 1.5 0 0 1 3 0V15a5.5 5.5 0 0 1-5.5 5.5H8'/%3E%3C/svg%3E")}
.ic-kreise{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='9.8' stroke-opacity='.5'/%3E%3C/svg%3E")}
.ic-zuhause{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4Z'/%3E%3Cpath d='M12 17.5s-3-1.8-3-4a1.6 1.6 0 0 1 3-.8 1.6 1.6 0 0 1 3 .8c0 2.2-3 4-3 4Z'/%3E%3C/svg%3E")}
.ic-herz{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z'/%3E%3C/svg%3E")}
.ic-uhr{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.5V8l2.4 1.6'/%3E%3C/svg%3E")}
.ic-herzchen{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.5S2.5 10.2 2.5 6.2A2.8 2.8 0 0 1 8 4.8a2.8 2.8 0 0 1 5.5 1.4c0 4-5.5 7.3-5.5 7.3Z'/%3E%3C/svg%3E")}

/* --------------------------------------------------------------------------
   WordPress: Blöcke an den Entwurf angleichen
   -------------------------------------------------------------------------- */
.wp-site-blocks{overflow-x:clip}
.wp-block-image{margin:0}
.wp-block-image img{height:100%}
.wp-block-group{box-sizing:border-box}
.wp-block-list{padding:0}
.wp-block-heading{font-weight:300}
.wp-block-details summary{display:grid}
/* Kopfbereich: Template-Teil ohne eigene Ausdehnung */
.kopf{position:relative;z-index:var(--z-nav)}
/* Angemeldet: Navigation unter der Admin-Leiste */
.admin-bar .nav{top:calc(32px + 18px)}
@media (max-width:782px){.admin-bar .nav{top:calc(46px + 10px)}}
/* Sprunglink von WordPress im Stil der Seite */
.skip-link.screen-reader-text:focus{background:var(--blau);color:#fff;border-radius:999px;font-family:var(--ui);font-size:.85rem;padding:10px 18px;text-decoration:none}

/* Leere Spalte ohne Klasse (Gruppen innerhalb von Rastern) */
.kunst-kopf>.wp-block-group,.lp-bild-text>.wp-block-group{min-width:0}
.kunst h3{margin:0}
.kunst-kopf .text{max-width:none}
.ueber-text .text,.lp-bild-text .text,.lp-zwei .text{max-width:60ch}

/* Impressum, Datenschutz, Fehlerseite */
.textseite{padding:clamp(150px,18vh,200px) 0 clamp(80px,9vw,130px);min-height:70vh}
.textseite .wrap{max-width:780px}
.textseite .wp-block-post-title{margin-bottom:clamp(30px,4vw,50px)}
.rechtstext{color:var(--tinte-2)}
.rechtstext h2{font-weight:400;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;color:var(--tinte);margin:2.2em 0 .6em}
.rechtstext h3{font-weight:500;font-size:1.15rem;color:var(--tinte);margin:1.8em 0 .5em}
.rechtstext p+p,.rechtstext ul,.rechtstext ol{margin-top:1em}
.rechtstext ul,.rechtstext ol{padding-left:1.3em}
.rechtstext a{color:var(--knopf)}
.rechtstext-hinweis{padding:18px 22px;border-radius:16px;background:rgba(243,170,179,.2);color:var(--tinte);font-size:1rem}
.fehler .lead{margin:24px 0 36px}
.fehler .h2{max-width:none}

/* Editor: alles sichtbar, Zierde aus */
.editor-styles-wrapper .zeig,.editor-styles-wrapper .aq{opacity:1;transform:none;filter:none}
.editor-styles-wrapper .hero{min-height:0;padding-top:60px}
.editor-styles-wrapper .textseite{padding-top:60px;min-height:0}
.editor-styles-wrapper .ueber .aq,.editor-styles-wrapper .faq-seite{position:static}
.editor-styles-wrapper .frage summary::after{pointer-events:none}
.editor-styles-wrapper::after{display:none}

.shot *,.shot *::before,.shot *::after{transition:none!important;animation:none!important}
.shot .nav{position:absolute}
.shot .pinsel{stroke-dashoffset:0}
.shot .pinsel-rest,.shot .hero-herz::before{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .wash i{filter:none}
}