/* =====================================================================
   Reformer Home · Website v18
   Farben aus dem Brandboard (RAL), Schriften: RH Serif (Crimson Pro,
   Ersatz für IvyOra/Crimson Text) und RH Sans (Montserrat, Echo der
   Wortmarke). Signatur: Die Seite färbt sich beim Scrollen in den
   Markenfarben um, das Titelbild bleibt stehen und der Inhalt schiebt
   sich darüber.
   ===================================================================== */

:root{
  --vanille:#F2EAE2; --sand:#B3AC87; --kastanie:#6B3741;
  --wald:#675E3E; --schwarzrot:#412227; --metall:#313123;

  --serif:"RH Sans","Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"RH Sans","Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(18px,4.2vw,56px);
  --max:1280px;
  --sheet-r:clamp(22px,3vw,40px);
  --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --tone-ease:cubic-bezier(.45,0,.25,1);

  /* Ton: Standard Vanille. Wird per data-tone am <body> umgeschaltet. */
  --bg:var(--vanille); --fg:var(--schwarzrot); --muted:rgba(65,34,39,.74);
  --line:rgba(65,34,39,.18); --card:#E9DED2; --accent:var(--kastanie); --accent-fg:var(--vanille);
}
[data-tone="vanille"]{--bg:var(--vanille);--fg:var(--schwarzrot);--muted:rgba(65,34,39,.74);--line:rgba(65,34,39,.18);--card:#E9DED2;--accent:var(--kastanie);--accent-fg:var(--vanille)}
[data-tone="sand"]{--bg:var(--sand);--fg:var(--metall);--muted:rgba(49,49,35,.78);--line:rgba(49,49,35,.22);--card:#BFB994;--accent:var(--schwarzrot);--accent-fg:var(--vanille)}
[data-tone="kastanie"]{--bg:var(--kastanie);--fg:var(--vanille);--muted:rgba(242,234,226,.78);--line:rgba(242,234,226,.24);--card:#77414C;--accent:var(--vanille);--accent-fg:var(--kastanie)}
[data-tone="schwarzrot"]{--bg:var(--schwarzrot);--fg:var(--vanille);--muted:rgba(242,234,226,.74);--line:rgba(242,234,226,.2);--card:#4D2C32;--accent:var(--sand);--accent-fg:var(--schwarzrot)}
[data-tone="wald"]{--bg:var(--wald);--fg:var(--vanille);--muted:rgba(242,234,226,.8);--line:rgba(242,234,226,.26);--card:#716848;--accent:var(--vanille);--accent-fg:var(--wald)}
[data-tone="metall"]{--bg:var(--metall);--fg:var(--vanille);--muted:rgba(242,234,226,.72);--line:rgba(242,234,226,.18);--card:#3B3B2D;--accent:var(--sand);--accent-fg:var(--metall)}

/* Jeder Abschnitt hat seine eigene, feste Farbe */
main [data-tone],footer[data-tone]{background:var(--bg);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
html.noscroll{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.68 var(--sans);
  font-kerning:normal;font-variant-ligatures:common-ligatures;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.5rem,8.2vw,6.4rem);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;letter-spacing:-.015em}
.lede{font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.6;max-width:34em;color:var(--fg)}
.muted{color:var(--muted)}
.small{font-size:.95rem;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--kastanie);color:var(--vanille);padding:.6rem 1rem;font:600 .8rem var(--sans)}
.skip:focus{left:12px}

.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.narrow{max-width:46rem}
.sec{padding-block:clamp(5rem,12vw,10rem)}
.sec-s{padding-block:clamp(3.5rem,8vw,6rem)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 1.8em;
  border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-fg);
  font:600 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s,transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:currentColor;border-color:currentColor}
.btn.ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.light{background:var(--vanille);border-color:var(--vanille);color:var(--kastanie)}
.btn.line{background:transparent;color:var(--vanille);border-color:rgba(242,234,226,.7)}
.btn.line:hover{background:var(--vanille);color:var(--schwarzrot)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.tlink{font:600 .76rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:.6em;padding-bottom:.35em;border-bottom:1.5px solid currentColor}
.tlink:hover{opacity:.7}

/* ---------- Header ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding-inline:var(--gut);color:var(--vanille);
  transition:background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s}
.nav.solid{background:var(--bg);color:var(--fg);box-shadow:0 1px 0 var(--line)}
.page-plain .nav{background:var(--bg);color:var(--fg);box-shadow:0 1px 0 var(--line)}
.logo{display:block;width:clamp(124px,13vw,158px);aspect-ratio:757/174;background:currentColor;
  -webkit-mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain;mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain}
.nav-links{display:none;gap:clamp(1.2rem,2vw,2.2rem);margin-left:auto;margin-right:1.4rem}
.nav-links a{font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.6em 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:.6rem}
.nav .btn{min-height:40px;padding:0 1.2em;font-size:.66rem}
.nav:not(.solid) .btn{background:var(--vanille);border-color:var(--vanille);color:var(--kastanie)}
.page-plain .nav .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.nav-cta{display:none}
@media (min-width:560px){.nav-cta{display:inline-flex}}
@media (min-width:1080px){.nav-links{display:flex}.menu-btn{display:none!important}}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:.35rem;background:none;border:0;padding:.6rem .3rem;cursor:pointer;font:600 .7rem/1 var(--sans);letter-spacing:.12em}
.lang-btn svg{width:8px;fill:currentColor}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--vanille);color:var(--schwarzrot);
  border-radius:16px;padding:.5rem;box-shadow:0 18px 50px rgba(49,49,35,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s var(--ease)}
.lang-menu.open{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:.55rem .8rem;cursor:pointer;font:500 .85rem var(--sans)}
.lang-menu button:hover,.lang-menu button[aria-current="true"]{background:rgba(107,55,65,.1)}
.lang-note{margin:.4rem .8rem .3rem;font:500 .7rem/1.4 var(--sans);color:rgba(65,34,39,.65)}

.menu-btn{display:flex;align-items:center;gap:.6rem;background:none;border:0;cursor:pointer;padding:.6rem 0 .6rem .4rem;font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.menu-btn i{position:relative;width:22px;height:10px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{top:8.5px}
.menu-btn[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}

#menu{position:fixed;inset:0;z-index:45;background:var(--kastanie);color:var(--vanille);
  padding:calc(var(--nav-h) + 4vh) var(--gut) 2rem;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 40px) 36px);transition:clip-path .7s var(--ease);visibility:hidden}
#menu.open{clip-path:circle(150% at calc(100% - 40px) 36px);visibility:visible}
#menu .wrap{display:flex;flex-direction:column;gap:clamp(.7rem,2.4vh,1.3rem);min-height:100%}
#menu .wrap>a{font:600 clamp(2rem,7.4vw,3.4rem)/1.15 var(--sans);text-decoration:none;letter-spacing:-.03em;
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
#menu.open .wrap>a{opacity:1;transform:none}
#menu .meta{margin-top:auto;padding-top:2.5rem;display:grid;gap:.4rem;font:500 .8rem/1.5 var(--sans);color:rgba(242,234,226,.8)}
.menu-open .nav{color:var(--vanille)!important;background:transparent!important;box-shadow:none!important}

/* ---------- Titelbild, das stehen bleibt ---------- */
.pin{position:sticky;top:0;height:100svh;min-height:560px;z-index:0;overflow:hidden;color:var(--vanille);background:var(--schwarzrot)}
.pin.half{height:78svh;min-height:480px}
.pin.block{height:62svh;min-height:420px;background:var(--kastanie)}
.pin picture,.pin>img{position:absolute;inset:0}
.pin img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:settle 2.2s var(--ease) .1s forwards}
.pin::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,16,18,.35) 0%,rgba(31,16,18,0) 30%,rgba(31,16,18,.15) 55%,rgba(31,16,18,.72) 100%)}
.pin.block::after{display:none}
.pin .pin-in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:calc(var(--sheet-r) + clamp(2.2rem,6vh,4.5rem))}
.pin h1{max-width:11ch}
.pin .sub{font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.6;max-width:30em;margin:1.4rem 0 0;color:rgba(242,234,226,.92)}
.pin .actions{margin-top:1.8rem}
.pin .tag{font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.2rem;display:inline-block;color:rgba(242,234,226,.85)}
@keyframes settle{to{transform:scale(1)}}
.rise{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.rise>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.rise:nth-child(2)>span{animation-delay:.12s}.rise:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.fade-late{opacity:0;animation:fadein .9s var(--ease) .55s forwards}
@keyframes fadein{to{opacity:1}}

/* Inhalt schiebt sich über das Titelbild */
.sheet{position:relative;z-index:1;background:var(--bg);color:var(--fg);border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  margin-top:calc(-1 * var(--sheet-r));box-shadow:0 -24px 60px rgba(31,16,18,.18)}
.page-plain .sheet{margin-top:0;border-radius:0;box-shadow:none;padding-top:var(--nav-h)}

/* ---------- Laufband ---------- */
.band{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:1.05rem 0;user-select:none}
.band-track{display:inline-flex;animation:marquee 38s linear infinite}
.band span{font:600 clamp(.82rem,1.3vw,1rem)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center}
.band span::after{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor;margin:0 1.6em;opacity:.55}
.band.big{border:0;padding:clamp(1.6rem,4vw,3rem) 0}
.band.big span{font:600 clamp(2.2rem,6.4vw,5.2rem)/1.1 var(--sans);letter-spacing:-.035em;text-transform:none}
.band.big span::after{width:.22em;height:.22em;margin:0 .45em}
.band.slow .band-track{animation-duration:70s}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Bausteine ---------- */
.split{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev>:first-child{order:2}}
.stack>*+*{margin-top:1.2rem}
.head{display:grid;gap:1.4rem;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
@media (min-width:900px){.head.cols{grid-template-columns:1.1fr .9fr;align-items:end}}

/* Collage: großes Bild + kleines, schneller laufendes Bild */
.collage{position:relative;padding:0 0 18% 0}
.collage .c-big{width:78%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.collage .c-small{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px rgba(31,16,18,.28)}
.collage .c-render{position:absolute;right:-4%;bottom:6%;width:74%;filter:drop-shadow(0 26px 30px rgba(31,16,18,.28))}

/* Schritte (echte Reihenfolge) */
.steps{display:grid;gap:0;counter-reset:s}
.steps li{list-style:none;display:grid;align-content:start;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;padding:2rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s);font:500 clamp(2.2rem,4vw,3.2rem)/.9 var(--sans);letter-spacing:-.04em;min-width:1.1em}
.steps h3{margin-bottom:.4rem}
.steps p{margin:0;color:var(--muted);max-width:36em}
@media (min-width:900px){.steps.row{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .steps.row li{grid-template-columns:1fr;border-bottom:0!important;padding-top:1.6rem}
  .steps.four{grid-template-columns:repeat(4,1fr)}}

/* Fenster: Hintergrundbild bleibt stehen, Abschnitt scrollt vorbei */
.window{position:relative;min-height:100svh;clip-path:inset(0);display:grid;align-items:end;color:var(--vanille)}
.window>img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.window::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,32,24,.15),rgba(32,32,24,.7));z-index:0}
.window .wrap{position:relative;z-index:1;padding-block:clamp(5rem,14vh,9rem)}
.window h2{max-width:14ch}
.window .lede{color:rgba(242,234,226,.92);margin-top:1.4rem}

/* Gerätedaten */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.specs>div{padding:1.4rem 1rem 1.4rem 0;border-bottom:1px solid var(--line)}
.specs dt{font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.specs dd{margin:0;font-size:1.08rem;line-height:1.4;font-weight:500}
@media (min-width:900px){.specs{grid-template-columns:repeat(5,1fr)}}
.render{width:100%;filter:drop-shadow(0 30px 34px rgba(31,16,18,.25))}

/* Preise */
.plans{display:grid;gap:1.2rem}
@media (max-width:899px){.plans.swipe{grid-auto-flow:column;grid-auto-columns:80vw;gap:3vw;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;margin-inline:calc(50% - 50vw);padding-inline:10vw;scroll-padding-inline:10vw;scrollbar-width:none;overscroll-behavior-x:contain}
  .plans.swipe::-webkit-scrollbar{display:none}.plans.swipe>*{scroll-snap-align:center}}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--card);border-radius:22px;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.2rem}
.plan .freq{font:600 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan h3{font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;margin:.5rem 0 .3rem}
.plan .price{font:600 clamp(1.8rem,2.8vw,2.2rem)/1 var(--sans);letter-spacing:-.03em;margin:1.2rem 0 .2rem}
.plan .price small{font:500 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:.4em}
.plan ul{margin:1.2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plan li{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.plan .blurb{color:var(--muted);margin:0}
.plan .term{font:500 .78rem/1.4 var(--sans);color:var(--muted);margin-top:1rem}
.plan .actions{margin-top:auto;padding-top:1.6rem}
.founder{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.2rem;align-items:center;padding:clamp(1.6rem,3vw,2.6rem);border-radius:22px;border:1.5px solid var(--fg)}
@media (min-width:900px){.founder{grid-template-columns:1fr auto}}
.founder h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.founder p{margin:.5rem 0 0;color:var(--muted);max-width:40em}

/* Karten-Liste */
.rows{border-top:1.5px solid var(--fg)}
.rowi{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.rowi h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.rowi .n{font:600 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.35rem}
.rowi .p{font:600 clamp(1.4rem,2.2vw,1.8rem)/1 var(--sans);letter-spacing:-.03em;text-align:right}
.rowi .d{grid-column:1/-1;margin:0;color:var(--muted);font-size:.95rem}
.pill{display:inline-block;font:600 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.55em .9em;border-radius:999px;border:1px solid currentColor;margin-top:.6rem}
@media (min-width:900px){.rowi{grid-template-columns:1.2fr 1.4fr auto}.rowi .d{grid-column:auto}}
.fine{font:500 .82rem/1.6 var(--sans);color:var(--muted);margin-top:2rem;max-width:62em}

/* Standort-Zeilen */
.locs{border-top:1.5px solid var(--fg)}
.loc{display:grid;gap:1.4rem;padding:clamp(1.8rem,4vw,3rem) 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}
.loc h3{font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.035em}
.loc .meta{display:grid;gap:.3rem;font:500 .84rem/1.5 var(--sans);color:var(--muted)}
.loc .go{justify-self:start}
.loc img{width:min(360px,100%)}
@media (min-width:900px){.loc{grid-template-columns:1.3fr 1fr auto}.loc img{display:block}}
.loc.dim h3{color:var(--muted)}
a.loc:hover h3{opacity:.75}

/* Formular */
.signup{max-width:46rem}
.offer{border-radius:22px;background:var(--card);padding:clamp(1.6rem,3vw,2.4rem);margin:2rem 0}
.offer .pill{margin:0 0 1rem}
.offer h3{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.offer ul{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.offer li{display:flex;gap:.7rem;align-items:baseline}
.offer li::before{content:"";flex:none;width:.45em;height:.45em;border-radius:50%;background:currentColor;transform:translateY(-.15em)}
.offer .fine{margin-top:1.2rem}
.form{display:grid;gap:.8rem}
@media (min-width:640px){.form.inline{grid-template-columns:1fr auto}}
.field{display:grid;gap:.35rem}
.field label{font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.input,.form input[type=email],.form input[type=text],.form select,.form textarea{width:100%;min-height:56px;padding:0 1.3rem;border-radius:16px;border:1.5px solid var(--line);
  background:rgba(255,255,255,.35);font:400 1rem var(--sans);color:var(--fg);transition:border-color .3s}
[data-tone="kastanie"] .form input,[data-tone="schwarzrot"] .form input,[data-tone="wald"] .form input,[data-tone="metall"] .form input,
[data-tone="kastanie"] .form select,[data-tone="kastanie"] .form textarea{background:rgba(242,234,226,.08)}
.form textarea{min-height:160px;padding:1rem 1.3rem;resize:vertical}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--fg)}
.form ::placeholder{color:var(--muted)}
.hp{position:absolute!important;left:-9999px}
.hint{font:500 .8rem/1.6 var(--sans);color:var(--muted);margin-top:1rem;max-width:44em}
.err,.ok{display:none;font:500 .9rem/1.5 var(--sans);margin-top:1rem;padding:.9rem 1.1rem;border-radius:14px;border:1px solid currentColor}
.failed .err{display:block}
.done .ok{display:block}
.done form{display:none}

/* Instagram-Streifen */
.ig .band-track{gap:clamp(.8rem,1.4vw,1.2rem);animation-duration:60s}
.ig{padding:0;border:0}
.tile{flex:none;width:clamp(210px,24vw,300px);aspect-ratio:4/5;border-radius:6px;overflow:hidden;display:grid;place-items:center;text-decoration:none;position:relative}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.t{padding:1.6rem;text-align:left;align-items:end;justify-items:start;white-space:normal}
.tile.t b{font:600 clamp(1.35rem,1.9vw,1.65rem)/1.15 var(--sans);letter-spacing:-.03em}
.tile.k{background:var(--kastanie);color:var(--vanille)}
.tile.s{background:var(--sand);color:var(--metall)}
.tile.v{background:var(--vanille);color:var(--schwarzrot)}
.tile.m{background:var(--metall);color:var(--vanille)}
.tile .mono{width:46%;aspect-ratio:542/339;background:currentColor;-webkit-mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain;mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain;place-self:center}
.band:hover .band-track{animation-play-state:paused}

/* App */
.app-stores{display:flex;flex-wrap:nowrap;gap:.6rem;margin-top:1.8rem}
.app-stores .store{flex:1 1 0;min-width:0;justify-content:center;padding:0 .9rem}
.store{display:inline-flex;align-items:center;gap:.7rem;min-height:56px;padding:0 1.3rem;border-radius:14px;border:1.5px solid currentColor;font:600 .78rem/1.1 var(--sans);letter-spacing:.06em}
.store svg{width:22px;height:22px;fill:currentColor}
.store small{display:block;font:500 .6rem var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.phone{width:min(330px,80%);margin-inline:auto;aspect-ratio:9/19;border-radius:42px;border:10px solid var(--fg);background:var(--kastanie);color:var(--vanille);
  position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:0 40px 80px rgba(31,16,18,.3)}
.phone .mono{width:42%;aspect-ratio:542/339;background:var(--vanille);-webkit-mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain;mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain}
.phone .slot{position:absolute;left:12%;right:12%;height:46px;border-radius:12px;background:rgba(242,234,226,.12);display:flex;align-items:center;padding:0 .9rem;font:600 .62rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
.phone .slot:nth-of-type(2){top:62%}.phone .slot:nth-of-type(3){top:72%;background:var(--vanille);color:var(--kastanie)}

/* FAQ */
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1.5px solid var(--fg)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.4rem 0;font:500 clamp(1.02rem,1.4vw,1.18rem)/1.4 var(--sans)}
.acc summary::-webkit-details-marker{display:none}
.acc .ico{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;position:relative;transition:transform .4s var(--ease)}
.acc .ico::before,.acc .ico::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.acc .ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc details[open] .ico{transform:rotate(45deg)}
.acc .body{padding:0 0 1.5rem;max-width:44em;color:var(--muted)}
.acc .body p{margin:0}
.faq-group{display:grid;gap:1.4rem;margin-bottom:clamp(3rem,6vw,4.5rem)}
.faq-group>h2{font-size:clamp(1.5rem,2.4vw,2rem)}
@media (min-width:900px){.faq-group{grid-template-columns:.8fr 2fr;gap:3rem}.faq-group>h2{position:sticky;top:calc(var(--nav-h) + 2rem);align-self:start}}

/* Gerät: Bauteile */
.parts{display:grid;gap:0;margin-top:2.5rem}
.parts>div{display:grid;grid-template-columns:minmax(7rem,.6fr) 1.4fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.parts h3{font-size:1.05rem}
.parts p{margin:0;color:var(--muted)}

.cards3{display:grid;gap:1.2rem}
@media (min-width:900px){.cards3{grid-template-columns:repeat(3,1fr)}}
.cards3>div{border-top:1.5px solid var(--fg);padding-top:1.4rem}
.cards3 h3{margin-bottom:.5rem}
.cards3 p{color:var(--muted);margin:0}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.ticks li{font:600 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.7em 1em;border-radius:999px;border:1px solid var(--line)}
.quote{font:500 clamp(1.5rem,2.8vw,2.3rem)/1.3 var(--sans);letter-spacing:-.025em;max-width:28ch;margin:0}

/* Besuch-Infos */
.facts{display:grid;gap:0;border-top:1.5px solid var(--fg);margin:0}
.facts>div{display:grid;grid-template-columns:minmax(8rem,.5fr) 1fr;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.facts dt{font:600 .68rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0}
.map-box{border-radius:22px;background:var(--card);min-height:320px;display:grid;place-items:center;text-align:center;padding:2rem;overflow:hidden;position:relative}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.notes{list-style:none;padding:0;margin:0;display:grid;gap:0}
.notes li{padding:1rem 0;border-top:1px solid var(--line);color:var(--muted)}

/* Rechtstexte */
.prose{max-width:46rem}
.prose h2{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.15;margin:2.6rem 0 .8rem}
.prose h3{font-size:1.08rem;margin:1.8rem 0 .6rem}
.prose p,.prose li{font-size:.98rem}
.prose ul{padding-left:1.2rem}
.prose a{word-break:break-word}
.prose code{font-size:.9em}

/* Danke */
.thanks-mark{width:64px;height:64px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;margin-bottom:1.6rem}
.thanks-mark svg{width:28px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Footer */
.foot{position:relative;z-index:1;background:var(--metall);color:var(--vanille);padding:clamp(4rem,9vw,7rem) 0 2rem}
.foot-grid{display:grid;gap:2.5rem}
@media (min-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.2rem;color:rgba(242,234,226,.6)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.foot ul a{text-decoration:none}
.foot ul a:hover{text-decoration:underline}
.foot .muted{color:rgba(242,234,226,.72)}
.foot-mail a{font:600 1.2rem var(--sans);letter-spacing:-.02em;text-decoration:none}
.foot-social{display:flex;gap:.6rem;margin-top:1.4rem}
.foot-social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(242,234,226,.35);display:grid;place-items:center}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-social a:hover{background:var(--vanille);color:var(--metall)}
.foot-word{display:block;width:min(220px,60%);aspect-ratio:757/174;background:var(--vanille);opacity:.95;margin:0 0 1.8rem;
  -webkit-mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain;mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain}
.legal{font:500 .72rem/1.6 var(--sans);color:rgba(242,234,226,.6);display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.4rem;border-top:1px solid var(--line)}

/* Einblenden: nur Überschriften und Bilder */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
.reveal-img{clip-path:inset(12% 0 0 0);transition:clip-path 1.3s var(--ease)}
.reveal-img.in{clip-path:inset(0)}

/* Cookie-Banner */
#cc{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--metall);color:var(--vanille);border-radius:22px;
  padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:92svh;overflow-y:auto}
#cc[hidden]{display:none}
#cc .in{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:flex-end;max-width:1240px;margin-inline:auto}
#cc .tx{flex:1 1 26rem;min-width:0}
#cc h2{font-size:1.4rem;line-height:1.1;margin-bottom:.6rem}
#cc p{margin:0;font-size:.92rem;line-height:1.5;color:rgba(242,234,226,.8);max-width:64ch}
#cc a{color:var(--sand)}
#cc .bt{display:flex;flex-wrap:wrap;gap:.6rem}
#cc button{min-height:46px;padding:0 1.2rem;border-radius:999px;border:1.5px solid rgba(242,234,226,.55);background:none;color:var(--vanille);
  font:600 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#cc button:hover{border-color:var(--vanille)}
#cc #ccOk{background:var(--vanille);color:var(--metall);border-color:var(--vanille)}
#cc .cc-opts{display:grid;gap:.8rem;margin-top:1.1rem;max-width:64ch}
#cc .cc-opts[hidden]{display:none}
#cc .cc-opt{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.45;color:rgba(242,234,226,.8)}
#cc .cc-opt input{flex:none;width:18px;height:18px;margin-top:.2rem;accent-color:var(--kastanie)}
#cc .cc-opt b{display:block;font:600 .68rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vanille);margin-bottom:.15rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .band-track{animation:none!important}
  .rise>span{transform:none}.fade-late{opacity:1}.pin img{transform:none}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- Farbige Kopfbereiche (ohne Foto) ---------- */
.pin.block{display:grid;height:auto;min-height:62svh}
.pin.block .pin-in{position:relative;inset:auto;align-self:end;padding-top:calc(var(--nav-h) + clamp(3rem,9vh,6rem))}
.pin.block.tone-kastanie{background:var(--kastanie);color:var(--vanille)}
.pin.block.tone-metall{background:var(--metall);color:var(--vanille)}
.pin.block.tone-wald{background:var(--wald);color:var(--vanille)}
.pin.block.tone-sand{background:var(--sand);color:var(--metall)}
.pin.block .sub{color:inherit;opacity:.88}
.pin.block h1{max-width:16ch;font-size:clamp(2.3rem,6.6vw,5.2rem)}
.pin.block.has-render{min-height:max(88svh,600px)}
.pin .pin-render{position:absolute!important;left:auto!important;bottom:auto!important;right:3%!important;top:calc(var(--nav-h) + 5vh)!important;width:min(780px,54%);height:auto!important;
  object-fit:contain!important;transform:none!important;animation:slidein 1.6s var(--ease) .15s both!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
@keyframes slidein{from{opacity:0;transform:translateX(8%)}to{opacity:1;transform:none}}
@media (max-width:900px){.pin .pin-render{width:104%;right:-24%!important;top:calc(var(--nav-h) + 4vh)!important}}
.pin .thanks-mark{margin-bottom:1.4rem}
.hero-light .nav:not(.solid){color:var(--metall)}
.hero-light .nav:not(.solid) .btn{background:var(--kastanie);border-color:var(--kastanie);color:var(--vanille)}
.pin.block .tag{color:inherit;opacity:.8}

@media (min-width:900px){.cards3.four{grid-template-columns:repeat(2,1fr);gap:2.4rem 3rem}}

/* Geschenkkarte als Objekt */
.giftcard{width:min(440px,90%);margin-inline:auto;aspect-ratio:1.586;border-radius:22px;background:var(--vanille);color:var(--kastanie);
  position:relative;box-shadow:0 40px 80px rgba(31,16,18,.35);transform:rotate(-6deg)}
.giftcard .gc-mono{position:absolute;left:9%;top:12%;width:22%;aspect-ratio:542/339;background:currentColor;
  -webkit-mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain;mask:url(bilder/logo/monogramm-maske.png) no-repeat center/contain}
.giftcard .gc-word{position:absolute;left:9%;bottom:12%;width:52%;aspect-ratio:757/174;background:currentColor;
  -webkit-mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain;mask:url(bilder/logo/wortmarke-maske.png) no-repeat center/contain}
.giftcard::after{content:"";position:absolute;right:9%;top:12%;width:16%;aspect-ratio:1;border-radius:50%;border:1.5px solid currentColor;opacity:.5}
.su-split{max-width:none;display:grid;gap:2rem clamp(2rem,6vw,6rem)}
@media (min-width:960px){.su-split{grid-template-columns:1fr 1fr;align-items:start}.su-split .su-l{position:sticky;top:calc(var(--nav-h) + 2rem)}}
.done .offer{display:none}

/* ---------- Runde 13 (24.10.2026) ---------- */
/* Laufband: als eigene Ebene rendern, damit Texte rechts sofort sichtbar sind (iOS/Safari) */
.band{transform:translateZ(0)}
.band-track{width:max-content;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Gründerblock in Gegenfarbe zum Abschnitt */
.founder[data-tone]{border:0}
/* Preise inkl. MwSt. */
.plan .price .vat{display:block;margin-top:.55rem;font:500 .64rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* Standorte: beide Namen in gleicher Farbe */
.loc.dim h3{color:inherit}
/* Kontakt: Platzhalter im Auswahlfeld */
.form select:invalid{color:var(--muted)}
.form select option{color:var(--schwarzrot)}
/* Wie oft trainieren */
.rhythm{display:grid;gap:1.2rem;margin-top:2.5rem}
@media (min-width:900px){.rhythm{grid-template-columns:repeat(3,1fr)}}
.rh{background:var(--card);border-radius:22px;padding:clamp(1.5rem,3vw,2.2rem);display:grid;gap:1.2rem;align-content:start}
.rh-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem 1rem;flex-wrap:wrap}
.rh h3{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.03em}
.rh .freq{font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rh p{margin:0;color:var(--muted)}
.rh-more{margin:.6rem 0 0}
@media (min-width:900px){.rh-more{grid-column:1/-1}}
/* Vier Gewohnheiten */
.habits{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:2.4rem 2rem}
@media (min-width:700px){.habits{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.habits{grid-template-columns:repeat(4,1fr)}}
.habits li{border-top:1.5px solid var(--fg);padding-top:1.3rem;display:grid;gap:.7rem;align-content:start}
.habits .num{font:600 clamp(2.8rem,5vw,4.2rem)/1 var(--sans);letter-spacing:-.04em;color:var(--accent)}
.habits h3{font-size:1.25rem}
.habits p{margin:0;color:var(--muted)}
/* So funktioniert dein Studio: Stichworte */
.keys{display:grid;gap:1.2rem;margin-top:2.5rem}
@media (min-width:700px){.keys{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.keys{grid-template-columns:repeat(4,1fr)}}
.key{background:var(--card);border-radius:22px;padding:clamp(1.5rem,2.6vw,2rem);display:grid;gap:1rem;align-content:start}
.key .num{font:600 .72rem/1 var(--sans);letter-spacing:.16em;color:var(--accent)}
.key h3{font-size:clamp(1.3rem,2vw,1.55rem)}
.key ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.key li{display:flex;gap:.7em;align-items:baseline;font-size:.98rem;line-height:1.4}
.key li::before{content:"";flex:none;width:.42em;height:.42em;border-radius:50%;background:var(--accent);transform:translateY(-.12em)}
/* Abschluss: Satz füllt sich Wort für Wort beim Scrollen */
.cta .fill{font:600 clamp(2.5rem,7.4vw,6rem)/1.04 var(--sans);letter-spacing:-.045em;max-width:13ch;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.fill .w{opacity:.16;transition:opacity .25s linear}
.cta .lede{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.fill .w{opacity:1!important}}
@media (min-width:900px){
  .cta .wrap{display:grid;grid-template-columns:1.5fr 1fr;column-gap:clamp(2rem,5vw,5rem);align-items:end}
  .cta .fill{grid-row:1/3;margin:0;max-width:none}
  .cta .lede,.cta .actions{grid-column:2}
}
/* Titelbereich mit Foto wächst mit dem Inhalt, Titel bleibt unter dem Header */
.pin:not(.block){display:grid;height:auto;min-height:max(100svh,560px)}
.pin.half{min-height:max(78svh,480px)}
.pin:not(.block) .pin-in{position:relative;inset:auto;align-self:end;padding-top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.5rem))}
.pin.half h1{max-width:14ch;font-size:clamp(2.4rem,6.6vw,5.4rem)}
/* Standorte als Kacheln: 1 / 2 / 3 nebeneinander, weitere Reihen darunter */
.locs{display:grid;gap:1.2rem;border-top:0}
@media (min-width:700px){.locs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.locs{grid-template-columns:repeat(3,1fr)}}
.loc,.loc.dim{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;min-height:clamp(320px,34vw,420px);padding:clamp(1.6rem,3vw,2.4rem);border:0;border-radius:28px;background:var(--card);transition:transform .5s var(--ease)}
.loc.dim{background:transparent;border:1.5px dashed var(--line)}
a.loc:hover{transform:translateY(-4px)}
a.loc:hover h3{opacity:1}
.loc h3{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.05}
.loc .meta{gap:.35rem}
.loc .go{margin-top:auto;justify-self:auto}
@media (min-width:900px){.loc{grid-template-columns:none}}
/* Footer: E-Mail unter den Social-Icons */
.foot-grid .foot-social{margin-top:0}
.foot-grid .foot-mail{margin:1.2rem 0 0}
/* Reformer-Training ohne Hürden: kompakter, Zitat über die volle Breite */
#idee .collage{max-width:440px;margin-inline:auto;padding-bottom:10%}
#idee .collage .c-big{aspect-ratio:1/1}
.idee-quote{margin-top:clamp(2.5rem,5vw,4rem)}
.idee-quote .quote{max-width:none;font-size:clamp(1.5rem,3.2vw,2.7rem);text-wrap:balance}
/* Footer: Logo, Icons, E-Mail mittig übereinander */
.foot-grid>div:first-child{display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,3vw,2.2rem);text-align:center}
.foot-grid>div:first-child>*{margin:0!important}
.foot-grid .foot-word{width:min(220px,60%)}
/* Sprachwahl als Links */
.lang-menu a{display:block;border-radius:10px;padding:.55rem .8rem;font:500 .85rem var(--sans);text-decoration:none;color:inherit}
.lang-menu a:hover,.lang-menu a[aria-current="true"]{background:rgba(107,55,65,.1)}