/* ============================================================
   SCHRIFTEN — lokal eingebunden (SIL Open Font License), keine Verbindung zu Google
   ============================================================ */
@font-face{font-family:'Anton';src:url(fonts/anton.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/archivo-italic.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ============================================================
   MOMENTUM — Tokens  (Stand Figma v10)
   ============================================================ */
:root{
  --neon:#E2FF00;
  --neon-ink:#CAE20B;                /* Neon auf Weiß — dunkler, damit lesbar */
  --black:#0A0A0A;
  --ink:#000000;
  --white:#FFFFFF;
  --grey-50:#7A7A7A;
  --grey-60:#545454;
  --grey-20:#C9C9C9;

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cond:'Anton','Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  --maxw:1440px;
  --pad:clamp(1.25rem,4.4vw,4rem);   /* 64px @1440 */
  --cell:12px;                       /* Abstand Rasterlinie -> Schrift */
  --ease:cubic-bezier(.16,1,.3,1);
  --col:calc((min(100vw,var(--maxw)) - 2 * var(--pad)) / 4);   /* eine Rasterspalte */

  /* Rasterfarben — pro Sektion überschrieben */
  --line:rgba(255,255,255,.08);
  --rule:rgba(255,255,255,.14);
  --cross:rgba(255,255,255,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:1rem;          /* 16px — Fließtext nie größer */
  line-height:1.2;         /* 120 % */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html,body{overflow-x:clip}   /* kein seitliches Scrollen, auch auf dem iPhone; clip statt hidden, damit position:sticky weiter funktioniert */
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{max-width:44ch}
::selection{background:var(--neon);color:var(--ink)}

/* ---------- Typo ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.d-xxl{font-size:clamp(2.7rem,6.95vw,6.25rem)}     /* 100px */
.d-xl {font-size:clamp(2.3rem,5.3vw,4.75rem)}      /* 76px */
.d-l  {font-size:clamp(2rem,4.52vw,4.0625rem)}     /* 65px */
.d-m  {font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.1;letter-spacing:-.03em}   /* 36px */
.d-s  {font-size:clamp(1.375rem,2.08vw,1.875rem);line-height:1.03;letter-spacing:-.025em}  /* 30px */
.d-xs {font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em}
.cond{font-family:var(--cond);font-weight:400;letter-spacing:-.03em}
.neon{color:var(--neon)}
.label{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;
}
.micro{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.muted{color:var(--grey-50)}
.dim{color:var(--grey-20)}

/* ============================================================
   RASTER — 4 Spalten, Bandlinie, Kreuze
   ============================================================ */
.sec{position:relative}
.sec--light{
  --line:rgba(0,0,0,.07);
  --rule:rgba(0,0,0,.12);
  --cross:rgba(0,0,0,.3);
  background:var(--white);color:var(--ink);
}
.sec--neon{
  --line:rgba(0,0,0,.07);
  --rule:rgba(0,0,0,.12);
  --cross:rgba(0,0,0,.4);
  background:var(--neon);color:var(--ink);
}
.grid{
  position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;
  width:100%;max-width:var(--maxw);padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 0;   /* 5. Spalte = Nulllinie rechts */
  pointer-events:none;z-index:0;
}
.grid::before{                     /* Bandlinie oben, mittig auf 0 */
  content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-.5px;height:1px;background:var(--rule);   /* volle Fensterbreite */
}
.grid i{position:relative}
.grid i::after{                    /* Spaltenlinie, mittig auf der Kante */
  content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:var(--line);
}
.grid i::before{                   /* Kreuz, mittig auf dem Schnittpunkt */
  content:"";position:absolute;top:-6.5px;left:-6.5px;width:13px;height:13px;
  background:
    linear-gradient(var(--cross),var(--cross)) center/1px 13px no-repeat,
    linear-gradient(var(--cross),var(--cross)) center/13px 1px no-repeat;
}

/* Bandlinie mitten in einer Sektion — Linie + Kreuze, gleiche Achse */
.xline{
  position:absolute;left:0;right:0;top:0;height:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 0;
  pointer-events:none;z-index:3;
}
.xline.xline{padding-inline:0}
.xline--bottom{top:auto;bottom:0}
.wrap>.xline{left:var(--pad);right:var(--pad)}
.xline::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-.5px;height:1px;background:var(--rule)}   /* volle Fensterbreite */
.xline i{position:relative}
.xline i::before{
  content:"";position:absolute;top:-6.5px;left:-6.5px;width:13px;height:13px;
  background:
    linear-gradient(var(--cross),var(--cross)) center/1px 13px no-repeat,
    linear-gradient(var(--cross),var(--cross)) center/13px 1px no-repeat;
}
.band{position:relative}

.wrap{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cols>*{padding-inline:var(--cell)}   /* 12px Luft zur Rasterlinie */
.span2{grid-column:span 2}

/* Sektionskopf: Fließtext rechts steht immer auf gleicher Höhe (222 px ab Sektionsoberkante) */
.head-copy{align-self:start;padding-top:var(--copy-top,0)}

/* Button-Set: siehe buttons.css */

/* ============================================================
   NAV
   ============================================================ */
/* Header nach Referenz: schwarze Segmente bündig an der Oberkante, auf dem Raster.
   Spalte 1 Logo, Spalte 2–3 die Menüpunkte als eigene Zellen, Spalte 4 der Kontakt-Button */
.nav{
  position:fixed;top:0;left:50%;translate:-50% 0;z-index:100;
  width:100%;max-width:var(--maxw);padding-inline:var(--pad);
  transition:translate .5s var(--ease);
}
.nav__bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1px;height:80px}   /* 1 px Luft zwischen Logo, Menü und Button (1 : 2 : 1) */
.nav__brand{   /* eigener schwarzer Kasten in Spalte 1, Wortmarke mittig: Aufteilung 1 : 2 : 1 */
  grid-column:1;display:flex;align-items:center;justify-content:center;background:#161616;
  color:var(--neon);font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;   /* Wortmarke: Archivo Black Italic in Versalien */
  font-size:min(1.75rem,calc((var(--col) - var(--cell) - 8px) / 6.6));   /* „FIT“ in Weiß, siehe .nav__brand-fit */line-height:1;letter-spacing:-.05em;   /* passt immer in die erste Rasterspalte */white-space:nowrap;
}
.nav__brand-fit{color:var(--white)}
.nav__links{grid-column:2 / 4;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#161616;position:relative}
.nav__links a{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:0 8px;   /* mittig in der Zelle */
  font-size:.875rem;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.75);
  transition:color .3s var(--ease) .1s;   /* Schrift wird hell, sobald die weiße Schicht an ihr vorbei ist */
}
/* Hover in zwei Schichten: Neon vorn, Weiß dahinter. Beide kommen von unten und gehen nach oben weg.
   Rein: Weiß startet sofort, Neon zieht 0,1 s später darüber. Raus: Neon geht zuerst, Weiß zieht 0,1 s hinterher. */
.nav__links a::before,.nav__links a::after{
  content:"";position:absolute;inset:0;
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.nav__links a::before{z-index:-1;background:var(--neon)}
.nav__links a::after{z-index:-2;background:var(--white);transition-delay:.1s}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--black);transition-delay:0s}
.nav__links a:hover::before,.nav__links a:focus-visible::before,
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleY(1);transform-origin:bottom}
.nav__links a:hover::before,.nav__links a:focus-visible::before{transition-delay:.1s}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transition-delay:0s}
.nav__links a.is-active{color:var(--neon)}
.nav__links a.is-active:hover{color:var(--black)}
.nav__cta{grid-column:4;display:flex;gap:1px}   /* auf dem Handy auch zwischen Button und Burger */
.nav__book{
  position:relative;isolation:isolate;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;   /* mittig wie die Menüpunkte */
  background:linear-gradient(#000,#000) top/100% 0 no-repeat,var(--neon);color:var(--black);   /* hintere Schicht: Schwarz */
  font-family:var(--display);font-size:.875rem;font-weight:800;line-height:1;letter-spacing:0;text-transform:uppercase;white-space:nowrap;   /* Schrift wie die übrigen Buttons */
  transition:background-size .45s var(--ease) .1s;
}
/* Hover wie die Menüpunkte, nur Weiß vorn und Schwarz dahinter. Beide kommen von unten und gehen nach oben weg.
   Rein: Schwarz startet sofort, Weiß zieht 0,1 s später darüber. Raus: Weiß geht zuerst, Schwarz zieht 0,1 s hinterher. */
.nav__book::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.nav__book:hover,.nav__book:focus-visible{background-position:bottom;background-size:100% 100%,auto;transition-delay:0s}
.nav__book:hover::before,.nav__book:focus-visible::before{transform:scaleY(1);transform-origin:bottom;transition-delay:.1s}
.nav__book::after{content:"";width:20px;height:17px;flex:none;background:currentColor;   /* zwei Sprechblasen, vorne mit drei Punkten = Kontakt / Gespräch */
  -webkit-mask:url(chat.svg) center/contain no-repeat;mask:url(chat.svg) center/contain no-repeat;transition:transform .35s var(--ease)}
.nav__book:hover::after,.nav__book:focus-visible::after{transform:translateY(-2px)}
.nav__burger{display:none;width:80px;background:#161616;color:var(--white);place-items:center}
.nav__burger i{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor}
.nav__burger i::before{top:-6px}.nav__burger i::after{top:6px}
/* Burger → Kreuz: erst laufen die Striche in der Mitte zusammen, dann drehen sie; beim Schließen umgekehrt */
.nav__burger i{transition:background-color .15s linear .2s}
.nav__burger i::before,.nav__burger i::after{transition:top .2s var(--ease) .2s,transform .3s var(--ease)}
.menu-open .nav__burger i{background-color:transparent;transition-delay:0s}
.menu-open .nav__burger i::before,.menu-open .nav__burger i::after{top:0;transition:top .2s var(--ease),transform .35s var(--ease) .2s}
.menu-open .nav__burger i::before{transform:rotate(45deg)}
.menu-open .nav__burger i::after{transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--neon);color:var(--ink);
  padding:calc(2rem + 64px + env(safe-area-inset-top, 0px)) var(--pad) 100px;   /* oben bündig unter dem Header, unten 100 px */
  display:flex;flex-direction:column;
  transform:translate3d(0,-100%,0);visibility:hidden;will-change:transform;   /* nur transform animieren: läuft auf der Grafikkarte, ruckelt nicht */
  transition:transform .6s var(--ease) .15s,visibility 0s linear .75s;   /* Schließen: erst Text weg, dann Fläche hoch */
}
.drawer.is-open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
/* Öffnen: erst wischt die Neon-Fläche herein, danach fährt jeder Text aus einer Maske von unten hoch (Masked Text Reveal), nacheinander */
.drawer>nav a,.drawer__legal a,.drawer .plan__buy .rv-m{overflow:hidden}
.drawer .plan__buy .rv-m{display:block}
.drawer>nav a>span,.drawer__legal a>span,.drawer .plan__buy .rv-m>span{display:block;transform:translate3d(0,120%,0);transition:transform .25s var(--ease)}
.drawer.is-open>nav a>span,.drawer.is-open .drawer__legal a>span,.drawer.is-open .plan__buy .rv-m>span{transform:none;
  transition:transform .8s var(--ease);transition-delay:calc(.45s + var(--i,0) * .06s)}
.drawer>nav a:nth-child(2){--i:1}.drawer>nav a:nth-child(3){--i:2}.drawer>nav a:nth-child(4){--i:3}
.drawer>nav a:nth-child(5){--i:4}.drawer>nav a:nth-child(6){--i:5}
.drawer__foot>:nth-child(1){--i:6}.drawer__foot>:nth-child(2){--i:7}
.drawer__btnmask{display:flex;flex-direction:column;overflow:hidden;padding:13px;margin:-13px}   /* Maske samt Platz für Rahmen und Plusse */
.drawer .plan__buy{transform:translate3d(0,calc(100% + 26px),0);transition:transform .25s var(--ease),background-size .45s var(--ease) .1s,color .3s var(--ease) .1s}   /* Button fährt als Ganzes aus der Maske hoch: nur transform, läuft auf der Grafikkarte */
.drawer.is-open .plan__buy{transform:none;transition:transform .8s var(--ease) calc(.45s + 5 * .06s),background-size .45s var(--ease) .1s,color .3s var(--ease) .1s}
.drawer.is-open .plan__buy:hover,.drawer.is-open .plan__buy:focus-visible{transition-delay:calc(.45s + 5 * .06s),0s,.1s}
.drawer .plan__buy .rv-m>span,.drawer.is-open .plan__buy .rv-m>span{transform:none;transition:none}
.drawer .plan__buy .rv-m{overflow:visible}   /* Umlaut-Punkte („GESPRÄCH“) nicht abschneiden */   /* Schrift fährt mit dem Button, keine zweite Bewegung */
@media(prefers-reduced-motion:reduce){.drawer,.drawer.is-open,.drawer>nav a>span,.drawer__legal a>span,.drawer .plan__buy,.drawer .plan__buy .rv-m>span{transition:none!important}}
.drawer>nav{margin-block:auto}   /* Menüpunkte mittig zwischen Header und Button */
.drawer{--line:rgba(0,0,0,.07);--rule:rgba(0,0,0,.12);--cross:rgba(0,0,0,.4);--pc:#8A8A8A}   /* Rasterfarben wie auf Neon-Sektionen */
.drawer .grid i::before{display:none}   /* Rasterlinien ja, Plusse an der Oberkante nein */
.drawer>nav,.drawer__foot{position:relative;z-index:1}
.drawer>nav a{display:block;padding:.06em var(--cell);font-size:clamp(2.25rem,10vw,3.75rem);line-height:1}   /* Menüpunkte groß, ohne Trennstriche, bündig mit dem übrigen Text */
.drawer__foot{display:flex;flex-direction:column;gap:28px}
.drawer .plan__buy{display:flex;align-self:stretch;margin:6.5px;padding:0;border:0;height:56px;outline:1px solid var(--rule);outline-offset:6px}   /* Button im Stil der übrigen Buttons: 6 px Luft, Rahmen auf den Rasterlinien */
.drawer .plan__buy::after{display:block;content:"";position:absolute;inset:-13px;z-index:3;pointer-events:none;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}
.drawer__legal{display:flex;gap:20px;padding-inline:var(--cell);font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:rgba(0,0,0,.6)}   /* Impressum, Datenschutz, AGB klein wie im Footer */
.drawer__legal a:hover,.drawer__legal a:focus-visible{color:var(--ink)}
.menu-open .nav{--rule:rgba(0,0,0,.12);--line:rgba(0,0,0,.07)}   /* Header-Linien bleiben bei offenem Menü auf Neon sichtbar */

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media video{                /* Bassara-Video statt Bild: füllt die Bühne, Standbild als Platzhalter */
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:var(--black);
  transform:translate3d(0,var(--py,0px),0);will-change:transform;   /* Parallaxe */
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.255) 0%,rgba(10,10,10,.105) 38%,rgba(10,10,10,.282) 88%,rgba(10,10,10,.3) 100%);
}
.hero .grid{z-index:1}
.hero .grid i::before{display:none}   /* keine Plusse an der Oberkante der Seite */
.hero__inner{position:relative;z-index:2;padding-block:9rem 2.25rem;display:flex;flex-direction:column;gap:47px;flex:1;justify-content:flex-end}
.hero h1{
  font-family:var(--cond);font-weight:400;font-size:clamp(3rem,7.81vw,7.03rem);
  line-height:1;letter-spacing:0;text-transform:uppercase;margin-left:-4px;
  margin-block:auto;   /* vertikal mittig im Hero, Kennzahlen bleiben unten */
}
.hero h1 em{font-style:normal;color:var(--neon)}
.hero__bar{position:relative}
.hero__bar>*{padding:24px 16px 0}
.hero__bar b{display:block;font-family:var(--cond);font-weight:400;font-size:clamp(2.25rem,3.75vw,3.375rem);line-height:.89;letter-spacing:-.03em}
.hero__bar .tag{display:block;margin-top:12px;color:var(--neon);font-size:.71875rem;font-weight:500;text-transform:uppercase}
.hero__bar p.lead{color:var(--white);letter-spacing:-.01em;max-width:none}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--neon);color:var(--ink);height:46px;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--ink)}
.marquee__track{display:flex;width:max-content;animation:slide 100s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--cond);font-size:.9375rem;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;padding-inline:.75rem;display:flex;align-items:center;gap:1.5rem;
  white-space:nowrap;flex:none;
}
.marquee__track span::after{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee--dark{background:var(--black);color:var(--neon);border-color:rgba(255,255,255,.15)}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee--light{background:var(--white);color:var(--ink);border-color:var(--ink)}

/* ============================================================
   INTRO
   ============================================================ */
.intro__stage{height:200vh}
.intro__head{
  position:sticky;top:0;height:100svh;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;
}
.intro__head>*{padding-inline:var(--cell)}
.intro__head .label{align-self:start;margin-top:.4rem}
.intro__head .label{grid-column:1;grid-row:1;margin-top:0}
/* Plakat-Satz: Anton, Blocksatz über alle vier Spalten, Piktogramme im Fließtext */
.intro__big{grid-column:1 / 5;grid-row:2;margin-top:24px;
  font-family:var(--cond);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.5rem,6.1vw,5.5rem);line-height:.98;letter-spacing:0;
  text-align:left;text-wrap:pretty;hyphens:none}
/* Desktop: feste Zeilen, Schriftgröße an die Breite gekoppelt. Jede Zeile ist fast voll,
   Blocksatz gleicht nur noch wenige Pixel aus. So entsteht eine klare rechte Kante ohne Lücken. */
@media(min-width:961px){
  .intro__big{font-size:calc((min(100vw,var(--maxw)) - 2 * var(--pad) - 2 * var(--cell)) / 15.2)}
  .intro__big .ln{display:block;text-align:justify;text-align-last:justify}
  .intro__big .ln:last-child{text-align-last:left}
}
.br-m{display:none}   /* Zeilenumbruch nur auf dem Handy */
.t-m{display:none}   /* Text nur mobil (t-m) bzw. nur Desktop (t-d) */
.intro__big .mb,.intro__big .mgap{display:none}   /* Umbrüche nur fürs Handy */
@media(max-width:960px){
  .intro__big{font-size:clamp(2rem,8.4vw,4.5rem);line-height:.94}   /* jede Situation eine eigene Zeilengruppe; Größe so, dass der Satz auf dem Handy etwa einen Bildschirm füllt */
  .intro__big .mb{display:inline}
  .intro__big .mgap{display:block;height:.45em}
}
.ico{display:inline-block;height:.76em;width:auto;vertical-align:.02em;fill:currentColor;margin-inline:.04em}
.ico--rings{height:.7em;vertical-align:.03em}
.ico--arrow{height:.42em;vertical-align:.16em}
.ico--block{width:1.7em;height:.74em;border-radius:.14em;background:currentColor;vertical-align:0;
  display:inline-grid;place-items:center end;padding-right:.18em}
.ico--block svg{height:.52em;width:.52em;display:block}
.ico.w.lit{color:var(--neon)}   /* Piktogramme leuchten in der Akzentfarbe auf */
/* Ersetzt die frühere Kachel-Sektion: ein Satz in einer Spalte, darunter der Button */
.intro__copy{grid-column:2;grid-row:2;margin-top:48px;color:var(--grey-50);max-width:none}
.intro__cta{grid-column:1;grid-row:3;margin-top:48px;padding-inline:0}
.intro__cta .plan__buy{margin-inline:0;--pc:#8A8A8A}   /* Stil wie die anderen Buttons, mit Kreuzen */
/* Wort-fuer-Wort von Grau nach Weiss beim Scrollen */
.w{color:#5A5A5A;transition:color .45s var(--ease)}
.w.lit{color:var(--white)}

/* ============================================================
   BILDBAND — Läufer zwischen Ticker und Situation
   ============================================================ */
.imgband{height:clamp(220px,29.44vw,424px);overflow:hidden}
.imgband__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.imgband__media img{           /* volle Breite, 40 % Überhöhe als Spielraum für die Parallaxe */
  position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;object-position:center var(--fy,50%);   /* --fy: Bildausschnitt pro Band */
  transform:translate3d(0,var(--py,0px),0);will-change:transform;
}
.imgband .grid{z-index:1}
@media(min-width:961px){.imgband--tall{height:clamp(330px,44.16vw,636px)}}   /* Desktop: Seilspringen-Band 1,5× so hoch */

/* ============================================================
   SITUATION — drei Kacheln + CTA-Kachel
   ============================================================ */
#situation{padding-bottom:170px}
.situation{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.tile{display:flex;flex-direction:column;min-height:450px;padding-block:37px 3rem}
.tile__icon{width:44px;height:44px;flex:none}
.tile h3{
  margin-top:119px;font-family:var(--body);font-weight:500;
  font-size:clamp(1.625rem,2.22vw,2rem);line-height:1;letter-spacing:-.02em;
  color:var(--neon);max-width:13ch;
}
.tile p{margin-top:42px;color:#757575;max-width:none}
.tile--cta{background:rgba(226,255,0,.05);padding:160px 0 0;justify-content:flex-start}
.tile--cta>*{padding-inline:var(--cell)}
.tile--cta .micro{letter-spacing:.12em}
.tile--cta h3{margin-top:16px;font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--white);max-width:none}
.tile--cta__btnwrap{margin-top:auto;padding:2.5rem 0 0;position:relative;z-index:4}
.tile--cta.tile--cta__btnwrap,.tile--cta .tile--cta__btnwrap{padding-inline:0}
.tile--cta .btn{width:100%;display:flex}

/* ============================================================
   ANSATZ — vier Schritte
   ============================================================ */
/* Vier Schritte: Titel links (sticky), rechts 2 × 2 dunkle Karten wie in der Referenz */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:120px}
.steps__head{grid-column:1 / 3;align-self:start;position:sticky;top:140px;padding-inline:var(--cell)}
.steps__head p{margin-top:32px;color:var(--grey-50);max-width:none}   /* Text über beide Spalten */
.steps__cta{display:grid;grid-template-columns:1fr 1fr;margin:48px calc(var(--cell) * -1) 0}   /* je ein Button pro Rasterspalte */
.steps__cta .plan__buy{margin-inline:0;--pc:#8A8A8A}   /* Stil wie die Kauf-Buttons, bündig in Spalte 1, mittelgraue Kreuze */
.sq{height:48px;display:inline-flex;align-items:center;padding:0 20px;font-size:.875rem;font-weight:600;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.sq--neon{background:var(--neon);color:var(--black)}
.sq--neon:hover{background:var(--white)}
.sq--line{border:1px solid rgba(255,255,255,.3);color:var(--white)}
.sq--line:hover{border-color:var(--white)}
.steps__grid{grid-column:3 / 5;display:grid;grid-template-columns:1fr;gap:1px;padding-block:1px;background:var(--line);position:relative;isolation:isolate}   /* Trennlinien plus Linie oben und unten, Farbe wie das Raster */
.step{background:#0F0F0F;min-height:clamp(200px,16vw,240px);display:flex;flex-direction:column;justify-content:space-between;
  padding:28px 24px 26px;transition:background .4s var(--ease)}
.step{position:relative;isolation:isolate}
.step::after{                     /* Plus an jeder Ecke jeder Schritt-Kachel, mittig auf den Trennlinien */
  content:"";position:absolute;inset:-7px -6.5px;z-index:3;pointer-events:none;
  background:
    linear-gradient(#8A8A8A,#8A8A8A) left 0 top 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) left 6px top 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) right 0 top 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) right 6px top 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) right 6px bottom 0/1px 13px no-repeat;
}
.step__top{display:flex;justify-content:space-between;align-items:flex-start}
.step__num{background:var(--neon);color:var(--ink);font-size:.9375rem;line-height:1;padding:.35em .85em .3em}   /* Nummer im Neon-Kästchen wie bei den Leistungen */
.step__icon{width:28px;height:28px;fill:none;stroke:var(--neon);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}   /* Linien-Piktogramme ohne Fläche */
.step h3{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.3vw,2.125rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;color:var(--white)}   /* Titel wie die Leistungs-Kacheln */
.step p{margin-top:16px;color:var(--grey-50);font-size:.875rem;line-height:1.35;max-width:32ch}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.services__head{padding-block:104px 80px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.services__head>*{padding-inline:var(--cell)}
.services__head>div{grid-column:1 / 3}
.services__head .label{color:var(--grey-50);margin-bottom:23px}
.services__head h2{white-space:nowrap}
.services__head h2 span{color:var(--neon-ink)}
.services__head p{grid-column:4;color:var(--grey-60);--copy-top:118px}
.services__list{padding-bottom:140px}
/* ============================================================
   LEISTUNGEN — drei Leistungs-Kacheln plus Komplettpaket auf den vier Rasterspalten
   Piktogramme und Hover 1:1 aus der Vorlage, Typo und Kacheln im Seitenstil
   ============================================================ */
/* Marker: Neonfläche hinter dem Wort statt grüner Schrift (gilt für alle Sektions-Headlines) */
.hl{display:inline-block;background:var(--neon);color:var(--ink);padding:.08em .1em 0;line-height:.86}
.lv{padding-block:152px 120px}
.lv-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;padding-bottom:120px}
.lv-head>*{padding-inline:var(--cell)}
.lv-head>div{grid-column:1 / 4}
.lv-head .label{margin-bottom:32px}
.lv-head h2{white-space:nowrap}
.lv-head p{grid-column:4;color:var(--grey-60);--copy-top:0px;align-self:end}   /* Text unten bündig mit der Headline */
.lv-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lv-cell{position:relative;isolation:isolate;padding:28px 24px 32px;display:flex;flex-direction:column;min-width:0;color:var(--ink);transition:background-color .4s var(--ease)}
.lv-pack:hover{background-color:#141414}
/* Hover wie die Header-Buttons: zwei hellgraue Flächen kommen über die volle Breite versetzt von unten und färben die Kachel hellgrau ein.
   Beim Verlassen ziehen sie in umgekehrter Reihenfolge nach oben weg. 600 ms je Fläche, weich ein- und auslaufend. */
.lv-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lv-fx i{position:absolute;inset:0;transform:scaleY(0);transform-origin:50% 0;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.lv-fx i:nth-child(1){background:#E4E4DF;transition-delay:.12s}
.lv-fx i:nth-child(2){background:#F4F4F0;transition-delay:0s}
.lv-cell:hover .lv-fx i{transform:scaleY(1);transform-origin:50% 100%}
.lv-cell:hover .lv-fx i:nth-child(1){transition-delay:0s}
.lv-cell:hover .lv-fx i:nth-child(2){transition-delay:.12s}
.lv-cell:hover .lv-go{background:var(--black)}
.lv-cell:hover .lv-go::before{background:var(--neon)}
.lv-go{transition:background-color .6s cubic-bezier(.65,0,.35,1)}
.lv-go::before{transition:background-color .6s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1)}   /* Pfeil dreht sich weich von 45° (schräg) auf 0° (waagerecht), im Takt der grauen Flächen */
.lv-top{display:flex;justify-content:space-between;align-items:stretch;margin:-28px -24px 0}   /* Tags hängen bündig in den oberen Ecken */
.lv-num{background:var(--neon);color:var(--ink);font-size:.9375rem;line-height:1;padding:.35em .85em .3em}
.lv-label{display:flex;align-items:center;padding:0 .85em;background:#1C1C1C;color:var(--grey-50);
  font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase}
.lv-art{display:grid;place-items:center;padding:36px 0 40px;min-height:250px}
.lv-art-in{position:relative;width:136px;height:136px;display:block}
.lv-art svg{position:relative;display:block;width:100%;height:100%;fill:var(--ink)}
.lv-cell h3{font-family:var(--display);font-weight:900;font-size:clamp(1.375rem,2vw,1.75rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;hyphens:manual}
.lv-cell p{color:var(--grey-60);font-size:.875rem;line-height:1.35;margin-top:14px;max-width:none}
.lv-tags{display:flex;align-items:stretch;margin:24px -24px -32px}   /* Fußzeile bündig unten: Tags links in der Ecke, Pfeil rechts in der Ecke */
.lv-tag{display:flex;align-items:center;height:40px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.6875rem;line-height:1;text-transform:uppercase;
  padding:0 .9em;border:1px solid rgba(0,0,0,.16);background:var(--white);color:var(--ink)}
.lv-tag+.lv-tag{margin-left:-1px}
.lv-go{margin-left:auto;width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--neon)}
.lv-go::before{content:"";width:14px;height:14px;background:var(--black);
  -webkit-mask:url(arrow.svg) center/contain no-repeat;mask:url(arrow.svg) center/contain no-repeat;transition:transform .35s var(--ease)}
.lv-cell:hover .lv-go::before,.lv-go:focus-visible::before{transform:rotate(45deg)}
/* Paket-Kachel */
.lv-pack{background:var(--black);color:var(--white)}
.lv-pack h3{color:var(--white);margin-top:auto;padding-top:40px;font-size:clamp(1.625rem,2.4vw,2.125rem)}
.lv-pack h3 span{color:var(--neon)}
.lv-pack ul{list-style:none;margin-top:44px}   /* mehr Luft zwischen Titel, Punkten und Beschreibung */
.lv-pack li{display:flex;gap:12px;align-items:center;font-size:.875rem;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.lv-pack li:first-child{padding-top:0}
.lv-pack li:last-child{border-bottom:0;padding-bottom:0}   /* nur Trennlinien zwischen den Punkten, keine Linie oben und unten */
.lv-pack li i{width:16px;height:16px;background:var(--neon);display:grid;place-items:center;flex-shrink:0}
.lv-pack li i svg{width:10px;height:10px;color:var(--ink)}
.lv-pack p{color:var(--grey-50);margin-top:44px}
.lv-pack .lv-tags{margin-top:32px}   /* Pfeil unten rechts wie bei den Leistungs-Kacheln */
/* Desktop: Titel, Texte und Tags über alle Spalten auf einer Linie */
@media(min-width:961px){
  .lv-row{grid-template-rows:auto 1fr auto auto auto}
  .lv-cell{min-height:520px}
  .lv-cell:not(.lv-pack){display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .lv-cell:not(.lv-pack) .lv-tags{align-self:end}
  .lv-pack{grid-row:span 5}
}
.svc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  min-height:130px;padding-block:42px 0;position:relative;
  transition:color .5s var(--ease);
}
/* Zeilenlinien über die volle Fensterbreite */
.svc::after,.svc:last-child>.svc__title::after{content:"";position:absolute;top:0;height:1px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(10,10,10,.15);pointer-events:none}
.svc:last-child>.svc__title{position:static}
.svc:last-child>.svc__title::after{top:auto;bottom:0}
.svc>*{padding-inline:var(--cell);position:relative;z-index:1}
.svc__title{grid-column:1 / 3;font-size:clamp(1.4rem,2.5vw,2.25rem);line-height:.95;letter-spacing:-.03em}
.svc::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
.svc:hover::before{transform:scaleY(1)}
.svc:hover{color:var(--white)}
.svc__desc{grid-column:3;color:var(--grey-50);transition:color .5s var(--ease)}
.svc:hover .svc__desc{color:var(--grey-20)}
.svc__meta{grid-column:4;padding-top:4px;color:inherit}

/* ============================================================
   ERGEBNIS — vier Kacheln mit animierten Tracker-Grafiken (Woche 1 bis 12)
   Grafiken, Texte und Animation 1:1 aus der Vorlage, Typo und Kacheln im Seitenstil
   ============================================================ */
.gains{padding-block:152px 120px}
.gains__head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding-bottom:120px}
.gains__head>*{padding-inline:var(--cell)}
.gains__head>div{grid-column:1 / 4}
.gains__head .label{margin-bottom:32px}
.gains__head h2{white-space:nowrap}
.gains__head p{grid-column:4;color:var(--grey-50);--copy-top:119px}
/* Vier Kacheln auf den vier Rasterspalten, Trennlinien in Rasterfarbe */
.r-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding-block:1px;background:var(--line);position:relative}
.r-grid::after{   /* Plusse nur in den vier äußersten Ecken des Kachelblocks, wie beim FAQ */
  --c:var(--cross);content:"";position:absolute;inset:-6.5px;pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat}
.r-tile{position:relative;isolation:isolate;background:#0F0F0F;padding:28px 24px 32px;display:flex;flex-direction:column;min-width:0}
.r-head{display:flex;justify-content:space-between;align-items:stretch;margin:-28px -24px 0}   /* Tags hängen bündig in der linken und rechten oberen Ecke */
.r-tag{display:flex;align-items:center;background:#1C1C1C;padding:0 .85em}   /* Rubrik als dunkles Kästchen, gleich hoch wie die Nummer */
.r-idx{background:var(--neon);color:var(--ink);font-size:.9375rem;line-height:1;padding:.35em .85em .3em}   /* Nummer im Neon-Kästchen wie überall */
.r-lbl{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1.1;letter-spacing:0;text-transform:uppercase;color:var(--grey-50)}
.r-tile h3{margin-top:28px;font-family:var(--display);font-weight:900;font-size:clamp(1.25rem,1.75vw,1.625rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;color:var(--white);min-height:calc(3 * .95em)}
.r-viz{height:232px;margin:26px 0 22px;display:flex;align-items:center;justify-content:center}
.r-viz svg{width:100%;max-height:232px;height:auto;display:block;overflow:visible}
/* Kreisdiagramm: Legende über die volle Breite, START links und ZIEL rechts bündig am Innenabstand */
.r-viz--stack{flex-direction:column;align-items:stretch;justify-content:flex-start}
.r-viz--stack svg{flex:1;min-height:0;height:100%}
.r-legend{display:flex;align-items:center;gap:16px;margin-top:8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:8.5px;line-height:1;letter-spacing:.06em;color:#5C5C61}
.r-legend span{display:flex;align-items:center;gap:5px}
.r-legend i{width:6px;height:6px;border-radius:50%}
.r-legend .r-legend__end{margin-left:auto}
.r-metric{padding-top:4px}
.r-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:10px}
.r-val{font-family:var(--cond);font-weight:400;font-size:3.25rem;line-height:.85;letter-spacing:-.02em;color:var(--neon);font-variant-numeric:tabular-nums;white-space:nowrap}
.r-val small{font-family:var(--body);font-size:.8125rem;font-weight:600;color:var(--grey-50);letter-spacing:0;margin-left:.3em}
.r-chip{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.6875rem;line-height:1;text-transform:uppercase;letter-spacing:0;
  padding:.45em .7em .4em;background:rgba(226,255,0,.10);color:var(--neon);border:1px solid rgba(226,255,0,.18);white-space:nowrap;margin-bottom:2px}
.r-cmp{margin-top:14px;display:grid;gap:9px}
.cmp-row{display:grid;grid-template-columns:62px 1fr 40px;gap:10px;align-items:center}
.cmp-row .r-lbl{font-size:.6875rem}
.cmp-row .r{text-align:right;color:var(--white)}
.cmp-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.cmp-bar span{display:block;height:100%;width:var(--w);background:#5A5A5F;border-radius:2px}
.cmp-row.now .cmp-bar span{background:var(--neon)}
.r-tile p{color:var(--grey-50);font-size:.875rem;line-height:1.35;margin-top:36px;max-width:none}
/* Grafik-Beschriftung 1:1 aus der Vorlage */
.st-ax{font-family:"Geist Mono",ui-monospace,monospace;font-size:9px;fill:#5C5C61;letter-spacing:.06em}
.st-num{font-family:var(--display);font-weight:600;font-size:30px;fill:#F3F3F0;letter-spacing:-.03em}
.st-mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:9px;fill:#8B8B90;letter-spacing:.08em;text-transform:uppercase}

/* ============================================================
   COACH
   ============================================================ */
/* Editorial-Split: Bild links in Schwarzweiß mit Meta-Labels, rechts weiß mit Riesenzitat */
.coach{min-height:max(100svh,760px)}
.coach__img{position:absolute;left:0;top:.5px;bottom:0;width:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--pad) + 2 * var(--col) - .5px);   /* Bild endet vor der Rasterlinie und unter der Bandlinie, beide Linien bleiben ganz sichtbar */
  overflow:hidden;z-index:1;color:var(--white)}
.coach__img img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-position:47% 30%;   /* Gesicht mittig im Ausschnitt, in Farbe */
  transform:translate3d(0,var(--py,0px),0);will-change:transform}   /* 30 % Überhöhe als Spielraum für die Parallaxe */
.coach__img::before{               /* Rasterlinien auch über dem Bild, hell, damit sie auf dem Foto sichtbar sind */
  --x0:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--pad));
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) calc(var(--x0) - .5px) 0/1px 100% no-repeat;   /* nur die äußere Rasterlinie */
}
.coach__img::before{display:none}   /* linke Rasterlinie über dem Bild entfernt */
.coach__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 74%,rgba(0,0,0,.45) 100%)}
/* Kapitel-Labels: gleicher Stil wie „[ 03 ] Der Coach“ */
.label.chapter{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;letter-spacing:0;text-transform:uppercase;color:inherit!important}
.tiny{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;
  text-transform:uppercase;letter-spacing:0;max-width:none}
.coach__meta{position:absolute;z-index:2;left:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--pad) + var(--cell));right:var(--cell);
  display:grid;grid-template-columns:auto 1fr;column-gap:24px}
.coach__meta--top{top:32px}
.coach__corner{position:absolute;z-index:2;top:80px;left:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--pad) + var(--cell))}   /* Sektionslabel oben links im Bild, auf der Rasterkante */
.coach__meta dd{text-align:right}
.coach__tag{position:absolute;z-index:2;bottom:80px;left:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--pad) + var(--cell))}
.coach__text{position:relative;z-index:2;min-height:max(100svh,760px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr;padding-block:80px}   /* oben und unten gleich viel Luft */
.coach__text>*{padding-inline:var(--cell)}
.coach__label{grid-column:3;grid-row:1}
.coach__lic{grid-column:4;grid-row:1;text-align:right}
.coach__by{grid-column:3;grid-row:3;align-self:end}   /* Name unten, Zitat oben */
.coach__quote{
  grid-column:3 / 5;grid-row:1;
  font-family:var(--display);font-weight:800;font-stretch:76%;
  font-size:clamp(2rem,3.6vw,3.25rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
  text-wrap:wrap;   /* Zeilen voll ausnutzen */
}
.coach__info{grid-column:4;grid-row:3;align-self:end;color:var(--grey-60);max-width:none}   /* kleiner Infotext unten rechts */
.coach__q{display:inline-block;width:1.3em;font-size:.55em;vertical-align:.55em;line-height:1}
.coach__quote mark{display:inline-block;background:var(--neon);color:var(--ink);padding:.06em .08em 0;line-height:.86}

/* ============================================================
   KENNZAHLEN
   ============================================================ */
.proof{padding-block:80px 83px}
.proof b{display:block;font-family:var(--cond);font-weight:400;font-size:clamp(2.6rem,5.97vw,5.375rem);line-height:.85;letter-spacing:-.04em}
.proof .micro{margin-top:17px;display:block;max-width:280px}

/* ============================================================
   STIMMEN
   ============================================================ */
.voices{padding-block:152px 120px}   /* unter der Linie 120 px Schwarz */
.voices__head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding-bottom:152px}   /* unten so viel Luft wie oben */
.voices__head>*{padding-inline:var(--cell)}
.voices__head>div{grid-column:1 / 4}
.voices__head h2{white-space:nowrap}   /* Headline in genau zwei Zeilen, dafür über drei Spalten */
.voices__head .label{margin-bottom:32px}
.voices__head p{grid-column:4;color:var(--grey-50);--copy-top:119px}
.voices__rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;gap:1px;background:var(--line)}   /* Trennlinien wie bei den Schritten */
.voice{background:#0F0F0F;position:relative;isolation:isolate}   /* gleiches Dunkelgrau wie die Schritt-Karten */
.voice::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;   /* Punktraster aus der Mitte, nach außen auf 50 % ausgeblendet */
  --dot:radial-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.8px);   /* um 45° gedrehtes Raster: zwei versetzte Ebenen, Punktabstand 12 px */
  background:var(--dot) center/17px 17px,var(--dot) calc(50% + 8.5px) calc(50% + 8.5px)/17px 17px;
  -webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5));mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5))}
.voice::before{display:none}
.voice__dots{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}   /* Punktraster per Canvas: Mitte groß und deckend, nach außen kleiner und auf 50 % */
.voices__rail>*{padding-inline:var(--cell)}
.voice{display:flex;flex-direction:column;gap:48px;padding-block:calc(var(--cell) * 4) calc(var(--cell) * 6);min-height:480px}   /* mehr Luft: oben 48, unten 72 px */
.voice blockquote{margin-block:auto;min-height:calc(4 * 1.375em)}   /* mittig in der Karte, gleich hohe Zitatblöcke: gemeinsame Oberkante */
.voice__who{order:-1}
.voice .stars{order:1}
.stars{display:flex;align-items:center;gap:4px}
.stars__num{margin-left:10px;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--white);font-variant-numeric:tabular-nums}
.stars img{width:14px;height:14px}
.voice blockquote{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.375;letter-spacing:-.02em;color:var(--grey-20)}
.voice__who{display:flex;align-items:center;gap:14px}
.voice__who figure{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none}
/* Platzhalter-Avatar im Neon-Stil: Initialen in Anton auf Neon */
.avatar{display:grid;place-items:center;background:var(--neon);color:var(--ink);font-family:var(--cond);font-size:1.0625rem;line-height:1;letter-spacing:.02em}
.voice__who b{display:block;font-size:.875rem;font-weight:600;margin-bottom:4px}
.voice__who small{color:var(--grey-50);font-size:.78125rem}

/* ============================================================
   PREISE
   ============================================================ */
.pricing__head{padding-block:112px 80px;text-align:center;display:flex;flex-direction:column;align-items:center}
.pricing__head .label{color:var(--grey-50);margin-bottom:23px}
.pricing__lead{max-width:none;color:var(--grey-60);margin-top:22px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.plan--hot{grid-column:span 2}
.plan{
  border:0;border-inline:1px solid var(--line);padding:28px 24px 24px;
  display:flex;flex-direction:column;background:var(--white);min-height:660px;position:relative;isolation:isolate;
}
/* Linien wie das Raster: senkrecht in Spaltenfarbe, waagerecht als Bandlinie über die volle Seitenbreite */
.plans{position:relative}
.xline--page::before{left:calc(50% - 50vw);right:calc(50% - 50vw)}
.xline--page i::before{display:none}   /* Linien über den Paketkarten ohne Kreuze */
.plans .xline--page i:first-child::before,.plans .xline--page i:last-child::before,.plans .xline--page i:nth-child(2)::before,.plans .xline--page i:nth-child(4)::before{display:block}   /* Kreuze nur in den vier Ecken des Paket-Blocks */
.plans .xline--page i:nth-child(3)::before{display:none}   /* Plus in den Ecken des Paket-Blocks und des Momentum-Pakets */
.plans .xline--page i:nth-child(2),.plans .xline--page i:nth-child(4){--cross:#8A8A8A}   /* Mittelgrau: auf Weiß und auf dem schwarzen Paket sichtbar */
.plan--hot{background:var(--ink);color:var(--white);border-color:var(--ink);position:relative;isolation:isolate}
.plan h3{line-height:1;font-size:clamp(2.25rem,3.4vw,3rem)}   /* Paketnamen größer: Handy 36, Desktop 48 px */
.plan__sub{color:var(--grey-50);margin-top:4px}
.plan .micro{letter-spacing:0}   /* Laufweite 0 % in den Paketkarten */
.plan__price{font-family:var(--cond);font-weight:400;font-size:clamp(2.6rem,4.72vw,4.25rem);line-height:.85;letter-spacing:0;margin-top:0;white-space:nowrap}   /* normale Laufweite: Ziffern berühren sich nicht */
.plan--hot .plan__price{color:var(--neon)}
.plan__price+.micro{color:var(--grey-50);margin-top:14px;display:block}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:14px}
/* Titel, Preis, Leistungen, Button: Subgrid, damit jede Zeile in allen Karten auf derselben Höhe beginnt, gleiche Abstände */
.plans{grid-template-rows:repeat(4,auto)}
.plan{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:88px;align-content:start;min-height:0}
.plan>.pill{align-self:end}
/* Kauf-Button: volle Kartenbreite, bündig an der Unterkante, Kreuze an den oberen Ecken */
.plan{padding-bottom:0}
.plan__buy{position:relative;align-self:end;display:flex;align-items:center;justify-content:center;height:80px;margin-inline:-25px;   /* Höhe wie die Header-Buttons; -25: deckt auch den 1-px-Kartenrand */
  
  --base:#8A8A8A;--back:var(--black);isolation:isolate;
  background:linear-gradient(var(--back),var(--back)) top/100% 0 no-repeat,var(--base);color:var(--neon);
  font-family:var(--display);font-weight:800;font-size:.875rem;line-height:1;text-transform:uppercase;letter-spacing:0;
  transition:background-size .45s var(--ease) .1s,color .3s var(--ease) .1s}
/* Hover wie im Header: hintere Schicht (--back) kommt zuerst von unten, Weiß zieht 0,1 s später darüber.
   Beim Verlassen geht Weiß zuerst nach oben weg, die hintere Schicht zieht hinterher. */
.plan__buy::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.plan__buy:hover::before,.plan__buy:focus-visible::before{transform:scaleY(1);transform-origin:bottom;transition-delay:.1s}
.plan__buy--hot{--base:var(--neon);color:var(--black)}
.plan__buy:hover,.plan__buy:focus-visible{background-position:bottom;background-size:100% 100%,auto;color:var(--black);transition-delay:0s,.1s}
.plan__buy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.plan__buy::after{display:none}   /* ohne Kreuze */
.plan--hot ul{border-color:rgba(255,255,255,.2)}
.plan li{display:flex;align-items:flex-start;gap:10px}
.plan li svg{width:18px;height:18px;flex:none;margin-top:0;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan--hot li svg{stroke:var(--neon)}
/* Paket-Buttons: Pille wie „Erstgespräch buchen“ in der Navigation */
.pill{
  --pill-bg:var(--neon);--pill-fg:var(--black);--dot-bg:var(--black);--dot-fg:var(--neon);
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 24px;
  background:var(--pill-bg);color:var(--pill-fg);border-radius:999px;
  font-size:.875rem;font-weight:600;white-space:nowrap;
  transition:filter .3s var(--ease);
}
.pill--ink{--pill-bg:var(--black);--pill-fg:var(--neon);--dot-bg:var(--neon);--dot-fg:var(--black)}
.pill i{width:36px;height:36px;border-radius:50%;background:var(--dot-bg);display:grid;place-items:center;flex:none;transition:transform .45s var(--ease)}
.pill i::before{content:"";width:14px;height:14px;background:var(--dot-fg);
  -webkit-mask:url(arrow.svg) center/contain no-repeat;mask:url(arrow.svg) center/contain no-repeat}
.pill:hover i,.pill:focus-visible i{transform:rotate(45deg)}
.pill:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.pricing__note{margin-top:10px;color:var(--grey-50);font-size:.84375rem;max-width:none}
.plans-wrap{padding-bottom:112px}   /* unten so viel Luft wie oben */

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-block:112px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.faq>*:last-child{background:linear-gradient(var(--black),var(--black)) 1px 0/calc(100% - 2px) 100% no-repeat;position:relative}
.faq>*:last-child::before{   /* Kreuze in den vier Ecken des Fragenblocks, wie im Raster */
  --c:var(--cross);content:"";position:absolute;inset:-6.5px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat;
}   /* Fragenblock deckt die mittlere Spaltenlinie ab, oben und unten bleibt sie sichtbar */
.faq>*{padding-inline:var(--cell)}
.faq>*:first-child{grid-column:1 / 3}
.faq>*:first-child .label{margin-bottom:23px}
.faq>*:last-child{grid-column:3 / 5;padding-inline:0}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:20.5px 22px 20.5px var(--cell);transition:color .4s var(--ease)}
/* FAQ im Editorial-Stil der Seite: schmale Archivo in Versalien wie das Coach-Zitat, kleine Nummer davor */
.acc__q .d-xs{flex:1;font-family:var(--display);font-weight:800;font-stretch:76%;font-size:clamp(1.25rem,1.8vw,1.625rem);
  line-height:1;letter-spacing:-.01em;text-transform:uppercase;max-width:none}
.acc__no{flex:none;width:48px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;color:var(--grey-50);align-self:center}
.acc.is-open .acc__no{color:var(--neon)}
.acc__q:hover{color:var(--neon)}
.acc__q i{
  width:34px;height:34px;border:0;   /* nur das Plus/Kreuz, kein Kreis */
  display:grid;place-items:center;flex:none;transition:transform .45s var(--ease),border-color .4s var(--ease);
}
.acc__q i::before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url(faq-plus.svg) center/contain no-repeat;mask:url(faq-plus.svg) center/contain no-repeat;
}
.acc__q:hover i{border-color:var(--neon)}
.acc:not(.is-open) .acc__q:hover i{transform:rotate(180deg)}   /* Hover: Plus dreht sich einmal halb herum */
.acc.is-open .acc__q{color:var(--neon)}
.acc.is-open .acc__q i{transform:rotate(45deg);border-color:var(--neon)}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.is-open .acc__a{grid-template-rows:1fr}
.acc__a>div{overflow:hidden}
.acc__a p{color:var(--grey-20);max-width:600px;padding:0 var(--cell) 22px calc(var(--cell) + 64px)}   /* Antwort bündig unter der Frage, nicht unter der Nummer */

/* ============================================================
   CTA
   ============================================================ */
.cta{overflow:hidden;padding-block:160px;text-align:center}
.cta .grid{z-index:1}
.cta__inner{display:flex;flex-direction:column;align-items:center}
.cta h2{max-width:none}
.cta__inner>p{max-width:none;margin-top:48px;color:var(--ink)}
.cta__hl{display:inline-block;background:var(--black);color:var(--neon);padding:.1em .14em .02em;margin-top:.1em;line-height:.86}   /* eigener Block, überdeckt die Zeile darüber nicht */
.cta__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:0;margin-top:64px}
.cta__row{position:relative;isolation:isolate}
.cta__row .btn{width:100%;display:flex;isolation:auto;--mark:var(--ink);font-weight:600}
.cta__row .btn::after{z-index:3}   /* Kreuze über beiden Buttons, nicht vom Nachbarn verdeckt */
.btn.btn--outline{--bg:transparent;--fg:var(--ink);--edge:var(--ink);color:var(--ink)}   /* .btn.: gewinnt auch gegen die Grundregel, egal in welcher Reihenfolge die CSS geladen wird */
.btn.btn--outline::before{background:var(--ink)}
/* Schwarzer CTA-Button: Hover ohne weiße Füllung, nur Hintergrund auf 80 % Deckkraft */
.cta__row .btn.btn--black::before{display:none}
.cta__row .btn.btn--black{transition:background-color .35s var(--ease)}
.cta__row .btn.btn--black:hover,.cta__row .btn.btn--black:focus-visible{--bg:rgba(0,0,0,.8);color:var(--neon)}
.btn.btn--outline:hover,.btn.btn--outline:focus-visible{color:var(--neon)}
.cta__row .plan__buy{margin-inline:0}
.cta__row .plan__buy::after,.steps__cta .plan__buy::after,.intro__cta .plan__buy::after{display:block;content:"";position:absolute;inset:-6.5px;height:auto;z-index:3;pointer-events:none;   /* Plus an jeder Ecke der beiden Buttons */
  background:
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 6px bottom 0/1px 13px no-repeat}   /* gleicher Stil wie die Kauf-Buttons der Preise */
.plan__buy--deep{--base:#B4CC00;color:var(--black)}   /* dunkles Neon auf der Neon-Fläche */
.plan__buy--dark{--base:var(--black);--back:var(--neon);color:var(--neon)}   /* auf Schwarz: Neon als hintere Schicht */
.cta__row>:first-child{grid-column:2}
.cta__row>:last-child{grid-column:3}
/* CTA mit Foto statt Neon-Fläche: Bild füllt die Sektion, dunkle Lasur für lesbare weiße Schrift */
.cta--photo{color:var(--white)}
.cta__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta__media img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;object-position:0% 25%;max-width:none;   /* Desktop: Größe und Lage setzt das Skript (placeCta), Kopf rechts neben der Headline */
  transform:translate3d(0,var(--py,0px),0);will-change:transform}   /* 40 % Überhöhe für die Parallaxe, wie die Bildbänder */
@media(max-width:960px){.cta__media img{width:100%;object-position:64% 30%}}   /* Handy: Marcel mittig */
.cta__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.35) 45%,rgba(10,10,10,.6) 100%)}
.cta--photo .cta__inner>p{color:var(--white)}
.cta--photo .cta__row .plan__buy{--pc:rgba(255,255,255,.7)}   /* Kreuze hell auf dem Foto */
.cta--photo .plan__buy--deep{--base:var(--neon)}
.cta--photo .cta__hl{background:none;display:inline;padding:0;margin:0;line-height:inherit}   /* ohne Markierung: normale Zeile, gleicher Zeilenabstand wie die Zeilen darüber */
.cta--photo .cta__row{gap:1px}   /* 1 px Luft zwischen den beiden Buttons, auch untereinander auf dem Handy */
.cta--photo .cta__row .plan__buy::after{display:none}   /* keine Plusse an den CTA-Buttons */   /* „gestern.“ ohne schwarze Markierung, nur Neon-Schrift */

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);padding-block:140px 28px;overflow:hidden}
/* Footer nach Referenz, auf dem 4-Spalten-Raster: oben Links + Newsletter, Mitte Kontaktzeile, unten Wortmarke und Rechtliches */
.footer__top,.footer__info,.footer__legal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.footer__top>*,.footer__info>*,.footer__legal>*{padding-inline:var(--cell)}
.footer__links{display:grid;grid-template-columns:1fr 1fr;gap:var(--cell);padding-inline:0!important;grid-column:1 / 3}
.footer__links>*{padding-inline:var(--cell)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.875rem;line-height:1.3}
.footer a{transition:color .3s var(--ease)}
.footer a:hover{color:var(--neon)}
.footer__news{grid-column:3 / 5}
.footer__news h3{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}   /* gleicher Schnitt wie die übrigen Headlines (Archivo Black 900) */
.footer__form{display:grid;grid-template-columns:1fr 1fr;position:relative;margin:40px calc(var(--cell) * -1) 0}   /* Feld in Spalte 3, Button füllt Spalte 4 */
.footer__form::before{   /* Plus an jeder Ecke von Feld und Button */
  --c:#8A8A8A;   /* Mittelgrau: auf Schwarz und auf dem Neon-Button sichtbar */
  content:"";position:absolute;inset:-6.5px;z-index:2;pointer-events:none;
  background:linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) center top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) center top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) center bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) center bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat;
}
.footer__form input{min-width:0;height:56px;background:transparent;border:0;border-block:1px solid rgba(255,255,255,.14);color:var(--white);font:inherit;font-size:1rem;padding:0 var(--cell);outline:none;transition:border-color .3s var(--ease)}
.footer__form input::placeholder{color:var(--grey-50)}
.footer__form input:focus{border-color:var(--neon)}
.footer__form button{height:56px;padding:0 20px;background:var(--neon);color:var(--black);font-family:var(--display);font-size:.875rem;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:0;   /* Stil wie die Kauf-Buttons */
  
  position:relative;isolation:isolate;background:linear-gradient(var(--black),var(--black)) top/100% 0 no-repeat,var(--neon);transition:background-size .45s var(--ease) .1s}
.footer__form button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);   /* Hover wie im Header */
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.footer__form button:hover,.footer__form button:focus-visible{background-position:bottom;background-size:100% 100%,auto;transition-delay:0s}
.footer__form button:hover::before,.footer__form button:focus-visible::before{transform:scaleY(1);transform-origin:bottom;transition-delay:.1s}
.footer__info{margin-top:180px;font-size:.875rem}
.footer__info dt,.footer__links h4,.footer__legal{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;letter-spacing:0}
.footer__info dt,.footer__links h4{color:var(--grey-50);margin-bottom:12px}
.footer__info .span2{grid-column:span 2}
.footer__credit{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .3s var(--ease)}
.footer__credit:hover,.footer__credit:focus-visible{color:var(--neon)}
.footer__word{
  font-family:var(--display);font-weight:900;font-style:italic;line-height:.78;letter-spacing:-.05em;text-transform:uppercase;color:var(--neon);   /* Wortmarke wie im Header: Archivo Black Italic, „FIT“ weiß */
  font-size:calc((min(100vw,var(--maxw)) - 2 * var(--pad) - 2 * var(--cell)) / 6.6);   /* „BASSARAFIT“ füllt die vier Spalten */
  white-space:nowrap;margin:56px 0 40px;padding-inline:var(--cell);display:flex;align-items:flex-start;
}
.footer__word-fit{color:var(--white)}
.footer__word sup{font-size:.16em;line-height:1;letter-spacing:0;margin-left:.15em;margin-top:.06em}
.footer__legal{padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:var(--grey-50)}
.footer__legal p{max-width:none}
.footer__legal nav{grid-column:3 / 5;display:flex;justify-content:flex-end;gap:24px}
.footer__legal a:hover{color:var(--white)}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .nav__links a{padding:0 8px;font-size:.6875rem;letter-spacing:.03em}
  .svc{grid-template-columns:1fr 1fr;row-gap:.75rem}
  .svc__title{grid-column:1 / -1}
  .svc__desc{grid-column:1}
  .svc__meta{grid-column:2}
}
@media(max-width:960px){
  .footer__top,.footer__info,.footer__legal{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .footer__links,.footer__news{grid-column:1 / -1}
  .footer__info{margin-top:72px}
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__cta{grid-column:2 / 5}
  .nav__bar{height:64px}
  .plan__buy{height:64px}   /* Buttons folgen der Header-Höhe */
  .nav__burger{width:64px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)) 0}
  .grid i:nth-child(n+4),.xline i:nth-child(n+4){display:none}   /* nur 3 Linien: keine Kreuze mitten in der Sektion */
  .xline{grid-template-columns:repeat(2,minmax(0,1fr)) 0}
  .cols,.situation{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro__head,.pillars__head,.services__head,.voices__head,.faq{grid-template-columns:1fr;gap:1.5rem}
  .intro__copy,.intro__cta,.intro__head .label,.intro__head h2{grid-column:auto;grid-row:auto;margin-top:0}
  .intro__big{text-align:left;text-align-last:left}
  .intro__head .label{margin-bottom:1rem}
  .intro__head h2,.pillars__head h2,.pillars__head p,.services__head>div,.services__head p,
  .voices__head>div,.voices__head p,.faq>*{grid-column:auto}
  .head-copy{padding-top:0}
  .services__head h2{white-space:normal}
  .gains{padding-block:5rem}
  .gains__head{grid-template-columns:1fr;gap:1.5rem;padding-bottom:3rem}
  .gains__head>div,.gains__head p{grid-column:auto}
  .gains__head h2{white-space:normal}
  #ergebnis .gains__head h2.display{font-size:min(12vw,calc((100vw - 2 * var(--pad) - 2 * var(--cell)) / 7.5))}   /* „HINARBEITEN.“ passt samt Markierung in die Breite */
  .voices__head h2{white-space:normal}
  .services__head{padding-block:5rem 3rem}
  .voices__head{min-height:0;padding-bottom:3rem}
  .intro__stage{height:auto}
  .intro__head{position:static;height:auto;min-height:100svh;padding-block:6rem}
  .tile{min-height:0;padding-bottom:2.5rem}
  .tile h3{margin-top:3rem}
  .tile p{margin-top:1.25rem}
  .tile--cta{padding-top:2.5rem}
  #situation{padding-bottom:4rem}
  .steps{grid-template-columns:1fr;row-gap:3rem;padding-block:5rem}
  .steps__head{position:static;grid-column:auto}
  .steps__grid{grid-column:auto}
  .steps__grid{grid-template-columns:1fr}
  .voices__rail{grid-template-columns:1fr 1fr}
  .voice{min-height:0;padding-block:2.5rem}
  .plans{grid-template-columns:1fr}
  .plan--hot{grid-column:auto}
  .plan+.plan{border-top:1px solid var(--rule)}
  .plan{min-height:0}
  .plans-wrap{padding-bottom:4rem}
  .coach__img{position:relative;width:100%;height:80svh}
  .coach__text{min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;padding-block:5.5rem;row-gap:4.5rem}   /* Handy: mehr Luft oben, unten und zwischen Zitat und Infotext */
  .coach__label{grid-column:1}.coach__lic{grid-column:2}
  .coach__by{grid-column:1 / -1;padding-top:0}
  .coach__quote{grid-column:1 / -1}
  .coach__info{grid-column:1 / -1;grid-row:auto}
  .cta{padding-block:7rem 5rem}
  .cta__row{grid-template-columns:1fr 1fr}
  .cta__row>:first-child{grid-column:1}
  .cta__row>:last-child{grid-column:2}
}
@media(max-width:600px){
  .nav__book{padding:0 14px}
  /* Handy: Wortmarke bekommt den Platz, der Button zeigt nur das Icon (quadratisch wie der Burger) */
  .nav__bar{grid-template-columns:minmax(0,1fr) auto}
  .nav__cta{grid-column:2}
  .nav__brand{font-size:min(1.375rem,calc((100vw - 2 * var(--pad) - 140px) / 6.6))}
  .nav__book{flex:none;width:64px;padding:0;gap:0;font-size:0}
  .grid,.xline{grid-template-columns:1fr 0}
  .grid i:nth-child(n+3),.xline i:nth-child(n+3){display:none}
  .cols,.situation{grid-template-columns:1fr}
  .tile:nth-child(n+2){border-top:1px solid var(--rule)}
  .hero__bar>*{padding-top:1.25rem}
  .hero__inner{padding-block:7rem 2rem;gap:1.5rem}
  .svc{grid-template-columns:1fr}
  .svc__desc,.svc__meta{grid-column:1}
  .voices__rail{grid-template-columns:1fr}
  .cta__row{grid-template-columns:1fr;row-gap:1px}
  .cta__row>:first-child,.cta__row>:last-child{grid-column:1}
  .footer__top,.footer__info,.footer__legal,.footer__links{grid-template-columns:1fr}
  .footer__info .span2,.footer__legal nav{grid-column:auto;justify-content:flex-start}
}
@media(max-width:960px){   /* Handy/Tablet: Buttons über die volle Breite, untereinander */
  .hero__bar{grid-template-columns:1fr 1fr}   /* Hero: erst der Text, darunter zwei Kennzahlen nebeneinander */
  .hero__bar>:last-child{order:-1;grid-column:1 / -1}
  .hero__bar>:nth-child(3){display:none}
  .hero__bar>*{padding-inline:var(--cell)}
  .hero__bar>:not(:last-child){padding-top:32px}
  .faq>*:first-child,.faq>*:last-child{grid-column:1 / -1}   /* Fix: Spaltenzuweisung vom Desktop überschrieb die Handy-Regel, Text war in 24 px gequetscht */
  .faq{row-gap:3rem}
  .faq{grid-template-columns:minmax(0,1fr)}   /* lange Wörter in den Fragen dürfen die Spalte nicht über die Bildschirmbreite drücken */
  .acc__q .d-xs{min-width:0;hyphens:auto;overflow-wrap:break-word}
  .steps__cta,.cta__row{grid-template-columns:1fr}
  .cta__row>:first-child,.cta__row>:last-child{grid-column:1}
  .cta__row{row-gap:0}
}
@media(max-width:960px){   /* Hero mobil: Text direkt unter der Headline, beides mittig; Kennzahlen bleiben unten */
  .hero__inner{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr auto;gap:0}
  .hero__bar{display:contents}
  .hero h1{grid-column:1 / -1;grid-row:2;margin-block:0}
  .hero__bar>:last-child{grid-row:3;padding-top:1.5rem}
  .hero__bar>:not(:last-child){grid-row:5}
  .step{min-height:0;justify-content:flex-start;gap:27px}
  .coach__img{height:500px}   /* Coach-Foto mobil flacher */
  .t-m{display:inline}.t-d{display:none}   /* Kontakt: „Direkt anrufen“ statt der Nummer */   /* Ansatz-Kacheln mobil: 30 px zwischen Nummer und Titel, in allen vier gleich */
}
@media(max-width:960px){   /* Handy: Kauf-Buttons mit Plus an jeder Ecke */
  .plans .plan__buy::after{display:block;content:"";position:absolute;inset:-6.5px;height:auto;z-index:3;pointer-events:none;   /* Plus an jeder Ecke der beiden Buttons */
  background:
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc,var(--ink)),var(--pc,var(--ink))) right 6px bottom 0/1px 13px no-repeat}
  .plan::after{display:block;content:"";position:absolute;left:-6.5px;right:-6.5px;top:-6.5px;height:13px;z-index:3;pointer-events:none;--pc:#8A8A8A;   /* Plus nur an den oberen Kartenecken; unten setzt der Button die Kreuze, sonst doppelt */
    background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat}
  .plans .plan__buy{--pc:#8A8A8A}
  .plans .xline--page i::before{display:none!important}   /* Block-Kreuze aus, die Karten haben eigene: sonst doppelt */
  .plans{row-gap:32px}   /* Abstand zwischen den Paketen, damit die unteren Kreuze sichtbar bleiben */
}
@media(max-width:960px){   /* Handy: Newsletter zuerst, größere Headline */
  .footer__news{order:-1;margin-bottom:3.5rem}
  .footer__news h3{font-size:clamp(2rem,9vw,3rem);line-height:1}
  .footer__news .hl{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:inherit;padding:0 .08em}
}
@media(max-width:600px){.footer__form{grid-template-columns:1fr}.footer__form input{border-bottom:0}
  .footer__form::before{background:linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 center/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px center/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 center/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px center/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat}   /* Kreuze an den Ecken von Feld und Button, wenn sie untereinander stehen */
}
@media(max-width:600px){   /* Handy: Sektions-Headlines größer, längstes Wort passt jeweils noch in die Zeile */
  h2.display.d-l,h2.display.d-xl,.svc-intro h2{font-size:12vw}
  .cta h2.display{font-size:13vw}
  .hero h1{font-size:14vw;line-height:.95;margin-left:0;padding-left:var(--cell)}   /* Handy: drei Zeilen, bündig mit dem übrigen Text, größer */
  .plan h3{font-size:11vw}.plan__price{font-size:15vw}   /* Paket-Kacheln: Name und Preis groß */
  .imgband{height:min(380px,48svh)}   /* Bildband auf dem Handy höher */
  .br-m{display:inline}.br-d{display:none}   /* FAQ: „Fragen, / die alle / stellen.“ */
  .coach__quote{font-size:12vw;line-height:.92;text-wrap:balance}   /* Zitat groß, ruhiger Umbruch */
  .coach__quote mark{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:inherit;padding:0 .06em}
  .steps__head h2.display.d-l{font-size:10vw;white-space:nowrap}   /* genau zwei Zeilen, so groß wie möglich */
  .svc-intro h2.display.d-xl{font-size:11.4vw}.svc-intro h2 span{white-space:nowrap}   /* „mir buchen“ bleibt eine Zeile */
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}
/* ============================================================
   BUTTON-SET
   Volle Rasterspalte breit, Kreuze auf den vier Eckpunkten
   (identisch mit den Kreuzen im Raster: 13 x 13, 1 px, mittig)
   Farbvarianten: --solid · --dark · --ink · --line · Groesse: --sm
   ============================================================ */
.btn{
  --bg:rgba(226,255,0,.16);
  --fg:var(--neon);
  --edge:rgba(226,255,0,.45);
  --mark:var(--neon);
  --k:13px;          /* Kreuzgroesse wie im Raster */
  --kh:6.5px;        /* halbe Kreuzgroesse */
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--col);max-width:100%;height:3.5rem;flex:none;
  --back:var(--black);
  background:linear-gradient(var(--back),var(--back)) top/100% 0 no-repeat,var(--bg);color:var(--fg);
  border:1px solid var(--edge);border-radius:0;
  font-size:1.0625rem;font-weight:500;letter-spacing:0;text-transform:none;
  text-align:center;line-height:1.2;padding-inline:1.25rem;
  text-decoration:none;cursor:pointer;
  isolation:isolate;transition:color .3s var(--ease) .1s,background-size .45s var(--ease) .1s;
}
.btn span{position:relative;z-index:2}
.btn::before{                       /* Hover-Fuellung */
  content:"";position:absolute;inset:0;z-index:1;background:var(--white);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);   /* Hover wie im Header: rein von unten, raus nach oben */
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1);transform-origin:bottom;transition-delay:.1s}
.btn:hover,.btn:focus-visible{color:var(--ink);background-position:bottom;background-size:100% 100%,auto;transition-delay:.1s,0s}
.btn:focus-visible{outline:none}
.btn::after{                        /* Kreuze auf den Eckpunkten */
  content:"";position:absolute;inset:calc(var(--kh) * -1 - 1px);z-index:2;pointer-events:none;   /* -1px: Kreuz sitzt auf der Außenkante, nicht innen am Rahmen */
  background-image:
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark)),
    linear-gradient(var(--mark),var(--mark)),linear-gradient(var(--mark),var(--mark));
  background-size:
    var(--k) 1px,1px var(--k),
    var(--k) 1px,1px var(--k),
    var(--k) 1px,1px var(--k),
    var(--k) 1px,1px var(--k);
  background-position:
    /* -.5px: die 1-px-Arme liegen mittig auf der Kante, genau wie die Rasterlinien */
    left 0 top calc(var(--kh) - .5px),      left calc(var(--kh) - .5px) top 0,        /* oben links */
    right 0 top calc(var(--kh) - .5px),     right calc(var(--kh) - .5px) top 0,       /* oben rechts */
    left 0 bottom calc(var(--kh) - .5px),   left calc(var(--kh) - .5px) bottom 0,     /* unten links */
    right 0 bottom calc(var(--kh) - .5px),  right calc(var(--kh) - .5px) bottom 0;    /* unten rechts */
  background-repeat:no-repeat;
}
/* --- Farbvarianten --- */
.btn--solid{--bg:var(--neon);--fg:var(--ink);--edge:transparent;--mark:var(--neon)}
.btn--dark {--back:var(--neon);--bg:var(--ink);--fg:var(--neon);--edge:rgba(226,255,0,.35);--mark:var(--neon)}
.btn--ink  {--bg:rgba(0,0,0,.05);--fg:var(--ink);--edge:rgba(0,0,0,.35);--mark:var(--ink)}
.btn--line {--bg:transparent;--fg:var(--white);--edge:rgba(255,255,255,.25);--mark:rgba(255,255,255,.85)}
.btn--markInk{--mark:var(--ink)}
.btn--sm   {height:3rem;font-size:.9375rem}

/* --- v10: Kachel-Button, Paket-Buttons, CTA-Buttons --- */
.btn--tint {--bg:rgba(226,255,0,.25);--fg:var(--neon);--edge:rgba(226,255,0,.25);--mark:var(--neon)}
.btn--black{--bg:#000;--fg:var(--neon);--edge:transparent;--mark:var(--neon)}
.btn--glass{--bg:rgba(226,255,0,.3);--fg:var(--neon);--edge:transparent;--mark:var(--white)}
.btn--plain::after{display:none}
.btn--md   {height:3.375rem;font-size:.875rem;letter-spacing:-.03em}   /* 54 px */
.btn--lg   {height:4.5rem;font-size:.875rem;letter-spacing:-.03em}     /* 72 px */
/* Innenrahmen: Hilfslinien über die volle Breite/Höhe, Kreuze auf den Schnittpunkten */
.btn--frame{
  --fx:14px;--fy:11.5px;
  border:0;
  background:
    linear-gradient(var(--line-c),var(--line-c)) 0 var(--fy)/100% 1px no-repeat,
    linear-gradient(var(--line-c),var(--line-c)) 0 calc(100% - var(--fy))/100% 1px no-repeat,
    linear-gradient(var(--line-c),var(--line-c)) var(--fx) 0/1px 100% no-repeat,
    linear-gradient(var(--line-c),var(--line-c)) calc(100% - var(--fx)) 0/1px 100% no-repeat,
    var(--bg);
}
.btn--frame::after{inset:calc(var(--fy) - var(--kh)) calc(var(--fx) - var(--kh))}
.btn--black.btn--frame{--line-c:rgba(226,255,0,.25)}
.btn--solid.btn--frame{--line-c:rgba(0,0,0,.25);--mark:#000}

/* Artifact: Seite ist ohne Scroll-Trigger vollständig sichtbar, festes dunkles Erscheinungsbild */
:root{color-scheme:dark}
.rv{opacity:1;transform:none}
.nav{top:calc(2rem + env(safe-area-inset-top, 0px))}
@media(max-width:960px){   /* Ergebnis: 2 × 2 */
  .r-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){   /* Ergebnis: untereinander */
  .r-grid{grid-template-columns:1fr}
  .r-tile h3{min-height:0}
}
@media(max-width:960px){   /* Leistungen: Kopf untereinander, Kacheln 2 × 2 */
  .lv{padding-block:5rem}
  .lv-head{grid-template-columns:1fr;gap:1.5rem;padding-bottom:3rem}
  .lv-head>div,.lv-head p{grid-column:auto}
  .lv-head h2{white-space:normal}
  .lv-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-cell:nth-of-type(-n+2){border-bottom:1px solid var(--rule)}
  .lv-art{min-height:350px}   /* Kacheln mobil 100 px höher */
  .lv-pack h3{padding-top:140px}
  .lv-pack li{border-bottom:0}   /* Komplettpaket mobil: keine Trennlinien zwischen den Punkten */
  .lv-num{width:40px;height:40px;padding:0;display:grid;place-items:center;align-self:flex-start;flex:none}   /* Nummer in der Ecke quadratisch, 40 × 40 wie der Pfeilkasten unten */
  .lv-pack .lv-num{width:auto;min-width:40px;padding:0 12px;white-space:nowrap}   /* „1+2+3“: gleiche Höhe, Breite passt sich dem Inhalt an */
}
@media(max-width:600px){   /* Leistungen: untereinander */
  .lv-row{grid-template-columns:1fr}
  .lv-cell{border-bottom:1px solid var(--rule)}
  .lv-cell:last-of-type{border-bottom:0}
  .lv-art{min-height:300px;padding:24px 0}   /* 100 px höher als vorher */
  .lv-art-in{width:112px;height:112px}
  .lv-pack h3{padding-top:132px}
}
/* Header: nur der Button „Erstgespräch buchen“ im Button-Stil, 6 px Luft zum Rahmen, Rahmen und Plusse auf den Rasterlinien.
   Logo, Menü und Burger füllen die volle Höhe; der Header ist so hoch, dass der Button die übliche Button-Höhe hat */
.nav__bar{height:77px;--pc:#8A8A8A}   /* Button 64 px + 2 × 6,5 px */
.nav__cta{position:relative}
.nav__bar{column-gap:0}.nav__cta{gap:0}   /* statt 1 px Spalt eine Linie in der Rasterfarbe */
.nav__brand,.nav__links{border-right:1px solid var(--line)}
.nav__burger{border-left:1px solid var(--line)}
.nav__bar{position:relative}
.nav__bar::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-.5px;bottom:-.5px;border-block:1px solid var(--rule);z-index:-1;pointer-events:none}   /* Linien oben und unten über die volle Fensterbreite, auf Höhe des Button-Rahmens */
.nav__bar::after{content:"";position:absolute;left:-6.5px;top:-6.5px;bottom:-6.5px;width:13px;z-index:3;pointer-events:none;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat}   /* Plusse links an den Ecken, auf der Rasterlinie */
.nav__book{margin:6.5px;outline:1px solid var(--rule);outline-offset:6px}
.nav__cta::after{content:"";position:absolute;inset:-6.5px;z-index:3;pointer-events:none;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}   /* Plusse an den Ecken des Button-Rahmens */
@media(max-width:960px){
  /* Mobil: Logo, Button und Burger stehen ohne Rahmen nebeneinander über die volle Höhe, Plusse nur an den vier äußeren Ecken */
  .nav__bar{height:64px}
  .nav__book{margin:0;outline:none}
  .nav__burger{width:64px}   /* quadratisch */
  .nav__cta::after{display:none}
  .nav__bar::after{right:-6.5px;width:auto;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}
}
@media(max-width:600px){
  .nav__book{width:64px}   /* quadratisch wie der Burger */
}
/* Unschärfe-Verlauf vom Header nach oben: unten 0 px, an der Oberkante 10 px. Gestaffelte Ebenen = weicher Verlauf */
.topblur{position:fixed;left:0;right:0;top:0;z-index:98;pointer-events:none;height:calc(2rem + 77px + 40px + env(safe-area-inset-top, 0px))}
.topblur i{position:absolute;inset:0}
.topblur i:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 20%,#000 40%,transparent 60%);mask-image:linear-gradient(to top,transparent 0%,#000 20%,#000 40%,transparent 60%)}
.topblur i:nth-child(2){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to top,transparent 20%,#000 40%,#000 60%,transparent 80%);mask-image:linear-gradient(to top,transparent 20%,#000 40%,#000 60%,transparent 80%)}
.topblur i:nth-child(3){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to top,transparent 40%,#000 60%,#000 80%,transparent 100%);mask-image:linear-gradient(to top,transparent 40%,#000 60%,#000 80%,transparent 100%)}
.topblur i:nth-child(4){-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(to top,transparent 60%,#000 80%,#000 100%,transparent 100%);mask-image:linear-gradient(to top,transparent 60%,#000 80%,#000 100%,transparent 100%)}
.topblur i:nth-child(5){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to top,transparent 80%,#000 100%);mask-image:linear-gradient(to top,transparent 80%,#000 100%)}
@media(max-width:960px){.topblur{height:calc(2rem + 64px + 32px + env(safe-area-inset-top, 0px))}}
/* Situation mobil: eigene, kürzere Fassung mit größerer Schrift; Desktop behält den langen Satz mit Scroll-Effekt */
.intro__big--m{display:none}
@media(max-width:960px){
  .intro__big--d{display:none}
  .intro__big--m{display:block;grid-column:1 / -1;color:var(--white);font-size:min(5.75rem,calc((100vw - 2 * var(--pad) - 2 * var(--cell)) / 6.5));line-height:1.18;text-wrap:balance}   /* so groß, dass „SCHREIBTISCH.“ samt Piktogramm gerade in die Zeile passt */
  .intro__big--m .ml{display:block}
  .intro__big--m .ml--gap{margin-top:.45em;color:var(--grey-20)}
  .intro__big--m .ico{color:var(--neon)}
  .intro__big--m .nw{white-space:nowrap}   /* Piktogramm bleibt beim letzten Wort */
}
/* Button-Stil auf der ganzen Seite (Desktop und mobil): Rahmen mit 6 px Luft in der Farbe der Bandlinien,
   Button rückt 6,5 px ein, damit Rahmen und Plusse genau auf den senkrechten Rasterlinien liegen */
.intro__cta .plan__buy,.steps__cta .plan__buy,.plans .plan__buy{outline:1px solid var(--rule);outline-offset:6px;margin-inline:6.5px}
.intro__cta .plan__buy,.steps__cta .plan__buy,.plans .plan__buy,.cta--photo .cta__row .plan__buy{height:64px}   /* Buttons etwas flacher: Desktop 64 statt 80 px */
.intro__cta .plan__buy::after,.steps__cta .plan__buy::after,.plans .plan__buy::after{display:block;content:"";position:absolute;inset:-13px;height:auto;z-index:3;pointer-events:none;   /* Plusse auf den Ecken des Rahmens */
  background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}
.plans .plan__buy{margin-inline:-18.5px;margin-bottom:6.5px;--pc:#8A8A8A}   /* Preis-Karten: Button über die Kartenbreite (-25 px Kartenpolster + 6,5 px), Rahmen unten auf der Kartenkante */
.plan--hot .plan__buy{outline-color:rgba(255,255,255,.14)}   /* auf der schwarzen Karte hell */
.plans .plan{grid-template-columns:minmax(0,1fr)}   /* Karteninhalt darf die Spalte nicht verbreitern, sonst ragt der Button beim Team-Paket über die Rasterlinie */
.plans .plan__buy:not(.plan__buy--hot){--base:var(--black);--back:var(--neon)}   /* Start und Team schwarz mit Neon-Schrift statt grau */
.cta--photo .cta__row{--pc:rgba(255,255,255,.7)}
.cta--photo .cta__row::after{content:"";position:absolute;z-index:3;pointer-events:none;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}
@media(min-width:961px){   /* Kontakt Desktop: die beiden Buttons in Spalte 2 und 3 bekommen einen gemeinsamen Rahmen */
  .cta--photo .cta__row{column-gap:0}   /* Spalten genau auf dem Raster */
  .cta--photo .cta__row>*{margin-inline:6.5px}   /* jeder Button 6 px Luft zum Rahmen bzw. zur Mittellinie */
  .cta--photo .cta__row .plan__buy{outline:1px solid var(--rule);outline-offset:6px}   /* jeder Button mit eigenem Rahmen, in der Mitte teilen sie sich die Linie */
  .cta--photo .cta__row::after{left:calc(25% - 6.5px);right:calc(25% - 6.5px);top:-13px;bottom:-13px;
    background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) center top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) center top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) center bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) center bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}   /* Plusse an den Ecken und oben/unten auf der Mittellinie */
}
.footer__form button{height:56px;margin:7px 6.5px;outline:1px solid var(--rule);outline-offset:6px}   /* Newsletter: Button-Stil wie die übrigen Buttons; der Rahmen liegt seitlich auf den Rasterlinien, oben und unten auf den Linien des Feldes */
.footer__form input{height:auto;align-self:stretch}   /* Feld so hoch wie der Button samt Rahmen */
@media(max-width:600px){   /* Newsletter mobil untereinander: Feld oben, Button mit Rahmen darunter; mittlere Plusse auf der Trennlinie */
  .footer__form input{height:56px}
  .footer__form::before{background:linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 top 62px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px top 56px/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 62px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px top 56px/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat}
}
@media(max-width:960px){
  .voice::after{content:"";position:absolute;inset:-6.5px;z-index:3;pointer-events:none;background:   /* Stimmen mobil: Plus an jeder Ecke jeder Karte */
    linear-gradient(#8A8A8A,#8A8A8A) left 0 top 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) left 6px top 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) right 0 top 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) right 6px top 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(#8A8A8A,#8A8A8A) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(#8A8A8A,#8A8A8A) right 6px bottom 0/1px 13px no-repeat}
  .step h3,.lv-cell h3,.r-tile h3{font-size:clamp(1.875rem,8vw,2.25rem)}   /* Kachel-Titel mobil größer (vorher 20–24 px) */
  .lv-pack h3{font-size:clamp(2.125rem,9vw,2.5rem)}
  .step h3{font-size:clamp(1.625rem,7vw,2rem)}   /* Ansatz-Titel eine Spur kleiner als die übrigen Kachel-Titel */
  .plans{row-gap:0}   /* Preis-Karten mobil direkt aneinander */
  .cta{padding-block:7rem}   /* Kontakt mobil: oben und unten gleich viel Luft (vorher unten nur 80 px) */
  .cta__inner>h2,.cta__inner>p{padding-inline:var(--cell)}   /* Headline und Text 12 px von den Rasterlinien wie überall */
  .cta--photo .cta__row{row-gap:0}   /* Kontakt mobil: jeder Button mit eigenem Rahmen, dazwischen eine gemeinsame Linie */
  .cta--photo .cta__row .plan__buy{margin:6.5px;outline:1px solid var(--rule);outline-offset:6px}
  .cta--photo .cta__row::after{inset:-6.5px;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 top 75px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 69px/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 75px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 69px/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}   /* Plusse an den Ecken und auf der Linie zwischen den Buttons */
  .intro__cta .plan__buy,.steps__cta .plan__buy,.plans .plan__buy,.cta--photo .cta__row .plan__buy{height:56px}   /* mobil 56 statt 64 px */
}

/* ============================================================
   UNTERSEITEN — gemeinsame Bausteine
   Alles baut auf dem Raster der Startseite auf: 4 Spalten, Kreuze auf den Schnittpunkten,
   Neon-Marker in den Headlines, Rahmen-Buttons mit 6 px Luft
   ============================================================ */
/* Kreuze an den vier Ecken eines Blocks (wie bei FAQ und Ergebnis-Kacheln) */
.x4{position:relative}
.x4::after{--c:var(--cross);content:"";position:absolute;inset:-6.5px;pointer-events:none;z-index:3;background:
    linear-gradient(var(--c),var(--c)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right 6px bottom 0/1px 13px no-repeat}

/* Button mit Rahmen und Plussen, wie „Erstgespräch buchen“ in Situation und Ansatz */
.btn-frame{display:grid;grid-template-columns:1fr 1fr;--pc:#8A8A8A}
.btn-frame .plan__buy{margin:6.5px;outline:1px solid var(--rule);outline-offset:6px;height:64px;padding-inline:16px;text-align:center}
.btn-frame .plan__buy::after{display:block;content:"";position:absolute;inset:-13px;height:auto;z-index:3;pointer-events:none;background:
    linear-gradient(var(--pc),var(--pc)) left 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 top 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) left 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--pc),var(--pc)) right 0 bottom 6px/13px 1px no-repeat,linear-gradient(var(--pc),var(--pc)) right 6px bottom 0/1px 13px no-repeat}
.btn-frame--one{grid-template-columns:1fr}
button.plan__buy{width:auto;border:0;cursor:pointer}

/* ---------- Seitenkopf: Hero der Startseite, mit Foto statt Video und etwas niedriger ---------- */
.hero--page{min-height:100vh;min-height:100svh}   /* Seitenkopf auf allen Seiten bildschirmhoch, wie auf der Startseite */
.hero__media img{position:absolute;left:0;top:-12%;width:100%;height:124%;max-width:none;object-fit:cover;object-position:center var(--fy,50%);
  transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero--page .hero__media::after{background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.28) 38%,rgba(10,10,10,.5) 80%,rgba(10,10,10,.78) 100%)}
.hero--page h1{font-size:clamp(3rem,6.6vw,6rem)}
.pg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-inline:var(--cell);
  font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pg-crumb a{transition:color .3s var(--ease)}
.pg-crumb a:hover,.pg-crumb a:focus-visible{color:var(--neon)}
.pg-crumb i{width:14px;height:1px;background:currentColor;opacity:.6}
.pg-crumb [aria-current]{color:var(--neon)}
@media(max-width:960px){
  .hero--page .pg-crumb{grid-column:1 / -1;grid-row:1;align-self:start;padding-top:0}
  .hero--page .hero__inner{padding-top:calc(2rem + 64px + 3rem)}
}
@media(max-width:600px){.hero--page h1{font-size:12.5vw}}

/* ---------- Sektionskopf auf hellem und dunklem Grund ---------- */
.pg-sec{padding-block:152px 120px}
.pg-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;padding-bottom:120px}
.pg-head>*{padding-inline:var(--cell)}
.pg-head>div{grid-column:1 / 4}
.pg-head .label{margin-bottom:32px}
.pg-head p{grid-column:4;color:var(--grey-50);max-width:none}
.sec--light .pg-head p{color:var(--grey-60)}

/* ---------- Kacheln mit Piktogramm (Ergebnis-Kacheln der Startseite, mit Linien-Piktogramm statt Grafik) ---------- */
.r-ico{display:grid;place-items:center;height:250px;margin:12px 0 0}
.r-ico svg{width:156px;height:156px;fill:none;stroke:var(--neon);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.r-ico svg .soft{stroke:rgba(255,255,255,.28)}
.r-tile--txt h3{min-height:calc(2 * .95em)}
.r-tile--txt p{margin-top:16px}
.r-tile--txt .r-look{margin-top:auto;padding-top:28px;display:flex;flex-wrap:wrap;gap:6px}
.r-look span{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.6875rem;line-height:1;text-transform:uppercase;
  padding:.5em .7em .45em;background:rgba(226,255,0,.08);color:var(--neon);border:1px solid rgba(226,255,0,.18)}

/* ---------- Großer Aussagesatz (Situation-Stil, ohne Scroll-Effekt) ---------- */
.pg-state{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:152px}
.pg-state>*{padding-inline:var(--cell)}
.pg-state .label{grid-column:1 / -1;margin-bottom:28px}
.pg-state__big{grid-column:1 / -1;font-family:var(--cond);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.9vw,4.4rem);line-height:1;letter-spacing:0;text-wrap:pretty;max-width:none}
.pg-state__big .dim{color:#5A5A5A}
.pg-state__big .neon{color:var(--neon)}
.pg-state__copy{grid-column:3 / 5;margin-top:48px;color:var(--grey-50);max-width:none}   /* Fließtext immer in Spalte 3 und 4 */

/* ---------- Liste „Was du bekommst“: Zeilen der Startseite (.svc), Titel in Archivo Black ---------- */
.pg-list{padding-bottom:140px}
.pg-sec .pg-list{padding-bottom:0}
.pg-list .svc{min-height:150px;padding-bottom:36px}
.pg-list .svc__title{font-family:var(--display);font-weight:900;text-transform:uppercase}
.pg-list .svc__desc{color:var(--grey-60)}
.pg-list .svc__meta{justify-self:end;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;
  padding:.55em .8em .5em;background:var(--neon);color:var(--ink);transition:background .5s var(--ease)}
.pg-list .svc:hover .svc__meta{background:var(--neon)}
.pg-list .svc__no{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;color:var(--grey-50);display:block;margin-bottom:14px;letter-spacing:0}

/* ---------- Preis-Streifen auf Neon ---------- */
.pg-price{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;padding-block:120px}
.pg-price>*{padding-inline:var(--cell)}
.pg-price__text{grid-column:1 / 3}
.pg-price__text .label{margin-bottom:28px}
.pg-price__text p{margin-top:28px;color:var(--grey-60)}
.sec--neon .pg-price__text p{color:rgba(0,0,0,.7)}
.sec--neon .pg-price .hl{background:var(--ink);color:var(--neon)}
.pg-price .btn-frame{grid-column:3 / 5;padding-inline:0}
.sec--neon .pg-price .btn-frame{--pc:rgba(0,0,0,.45)}

/* ---------- Weitere Leistungen: Kopf über zwei Spalten, zwei Leistungs-Kacheln daneben ---------- */
.pg-more{padding-block:152px 120px}
.pg-more__head{grid-column:1 / 3;padding:28px var(--cell) 32px;display:flex;flex-direction:column}
.pg-more__head .label{margin-bottom:32px}
.pg-more__head p{margin-top:auto;padding-top:48px;color:var(--grey-60);max-width:36ch}
@media(min-width:961px){.pg-more__head{grid-row:span 5}}
a.lv-cell{color:var(--ink)}
.lv-cell .lv-more{margin-left:auto;display:flex;align-items:center;padding-inline:.9em;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.6875rem;text-transform:uppercase}

/* ---------- Erstgespräch: Anfrage-Formular ---------- */
.bk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding-block:152px 140px}
.bk__side{grid-column:1 / 3;position:sticky;top:150px;padding-inline:var(--cell) calc(var(--cell) + 3vw)}
.bk__side .label{margin-bottom:32px}
.bk__side>p{margin-top:32px;color:var(--grey-60);max-width:44ch}
.bk-direct{margin-top:64px;border-top:1px solid rgba(0,0,0,.12)}
.bk-direct div{display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:12px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.bk-direct dt{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:var(--grey-50)}
.bk-direct dd{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.bk-direct a{background:linear-gradient(var(--neon),var(--neon)) left bottom/0 100% no-repeat;transition:background-size .45s var(--ease)}
.bk-direct a:hover,.bk-direct a:focus-visible{background-size:100% 100%}
.bk-coach{display:flex;align-items:center;gap:20px;margin-top:40px}
.bk-coach img{width:88px;height:88px;flex:none;object-position:47% 28%}
.bk-coach b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:4px}
.bk-coach small{display:block;color:var(--grey-60);font-size:.84375rem;line-height:1.35;max-width:36ch}

.bk-form{grid-column:3 / 5;background:#F4F4F0;padding:40px 24px 30px;--cross:#8A8A8A;--rule:rgba(0,0,0,.14)}
.bk-form fieldset{border:0;margin:0 0 36px;padding:0;min-width:0}
.bk-form legend,.bk-lbl{display:block;padding:0;margin-bottom:14px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:var(--grey-60)}
.bk-form legend em,.bk-lbl em{font-style:normal;color:var(--grey-50);font-weight:600;font-stretch:100%;text-transform:none;font-family:var(--body);margin-left:6px}
.bk-step{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 5px;margin-right:8px;background:var(--ink);color:var(--neon);font-size:.6875rem;vertical-align:1px}
.chips{display:flex;flex-wrap:wrap;padding:0 1px 1px 0}
.chip{position:relative;margin:0 -1px -1px 0}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;background:var(--white);border:1px solid rgba(0,0,0,.16);cursor:pointer;
  font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.8125rem;line-height:1;text-transform:uppercase;color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.chip span small{font:600 .75rem/1 var(--body);text-transform:none;color:var(--grey-50);transition:color .3s var(--ease)}
.chip:hover span{background:#E4E4DF}
.chip input:checked+span{background:var(--neon);border-color:var(--ink);position:relative;z-index:1}
.chip input:checked+span small{color:rgba(0,0,0,.6)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px;z-index:2}
.chips--days .chip span{width:52px;justify-content:center;padding:0}
.chips+.chips{margin-top:10px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.bk-field{display:block;margin-bottom:28px}
.bk-field .bk-lbl{margin-bottom:4px}
.bk-field input,.bk-field textarea{display:block;width:100%;height:50px;padding:0;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:0;
  font:inherit;font-size:1rem;color:var(--ink);outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.bk-field textarea{height:auto;min-height:96px;padding-top:14px;resize:vertical;line-height:1.35}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:#9A9A9A}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.bk-field.is-bad input{border-color:#C62828;box-shadow:0 1px 0 #C62828}
.bk-err{display:none;margin-top:8px;font-size:.78125rem;color:#C62828}
.is-bad>.bk-err{display:block}
.bk-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 32px;font-size:.84375rem;line-height:1.4;color:var(--grey-60);cursor:pointer}
.bk-consent input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:1px solid rgba(0,0,0,.4);background:var(--white) center/12px no-repeat;cursor:pointer;transition:background-color .2s}
.bk-consent input:checked{background-color:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%23E2FF00' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E")}
.bk-consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bk-consent.is-bad{color:#C62828}
.bk-consent a{text-decoration:underline;text-underline-offset:2px}
.bk-form .btn-frame{margin-inline:-6.5px}
.bk-form .plan__buy{height:64px}
.bk-note{margin-top:22px;font-size:.8125rem;color:var(--grey-50);max-width:none}
.bk-done{display:none}
.bk-form.is-sent form{display:none}
.bk-form.is-sent .bk-done{display:block;padding:20px 0 24px}
.bk-done h3{font-family:var(--display);font-weight:900;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.bk-done h3 .hl{margin-top:.08em}
.bk-done p{margin-top:24px;color:var(--grey-60)}
.bk-done p+p{margin-top:12px}
.bk-done a{text-decoration:underline;text-underline-offset:2px}
.bk-done .btn-frame{margin:36px -6.5px 0}

@media(max-width:960px){
  .pg-sec,.pg-more{padding-block:5rem}
  .pg-head{grid-template-columns:1fr;gap:1.5rem;padding-bottom:3rem}
  .pg-head>div,.pg-head p{grid-column:auto}
  .pg-state{grid-template-columns:1fr;padding-block:5rem}
  .pg-state__copy{grid-column:auto;margin-top:32px}
  .pg-price{grid-template-columns:1fr;row-gap:48px;padding-block:5rem}
  .pg-price__text,.pg-price .btn-frame{grid-column:auto}
  .pg-more__head{grid-column:1 / -1;padding-bottom:40px}
  .pg-more__head p{padding-top:24px}
  .bk{grid-template-columns:1fr;row-gap:56px;padding-block:5rem}
  .bk__side{grid-column:auto;position:static;padding-inline:var(--cell)}
  .bk-direct{margin-top:40px}
  .bk-form{grid-column:auto}
  .btn-frame .plan__buy{height:56px}
  .pg-list{padding-bottom:4rem}
  .pg-list .svc{min-height:0;padding-block:28px}
  .pg-list .svc__meta{justify-self:start}
}
@media(max-width:600px){
  .btn-frame{grid-template-columns:1fr}
  .bk-row{grid-template-columns:1fr}
  .bk-form{padding-inline:16px}
  .bk-direct div{grid-template-columns:1fr;gap:8px}
  .chips--days,.chips--time{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .chips--time{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chips--days .chip span{width:auto}
  .chips--time .chip span{flex-direction:column;justify-content:center;gap:5px;padding:0 6px;height:58px}
  .chip span{padding:0 12px}
  .pg-state__big{font-size:10.4vw}
}
/* Ansatz-Kacheln auf Unterseiten: Kapitel-Label über der Headline, Zeitangabe statt Piktogramm */
.steps__head .label{margin-bottom:32px}
.step__time{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:var(--grey-50);padding-top:.3em}
.step__icon use{stroke:inherit}
[hidden]{display:none!important}
.pg-spacer{height:120px}
@media(max-width:960px){.pg-spacer{height:5rem}}
@media(max-width:600px){   /* Unterseiten: Marker in Headlines läuft zeilenweise statt als Block */
  main h2.display .hl{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:inherit;padding:0 .08em}
}
/* Ansatz-Kacheln auf weißem Grund (Unterseiten): helle Karten, dunkle Schrift */
.sec--light .step{background:#F4F4F0}
.sec--light .step h3{color:var(--ink)}
.sec--light .step p{color:var(--grey-60)}
.sec--light .steps__head p{color:var(--grey-60)}
@media(max-width:600px){main .steps__head h2.display.d-l{white-space:normal}}   /* Unterseiten: längere Headlines dürfen umbrechen */
/* „Passt gut dazu“ im Dark Look: Leistungs-Kacheln wie die dunklen Kacheln der Seite */
.pg-more--dark .pg-more__head p{color:var(--grey-50)}
.pg-more--dark .lv-cell{background:#0F0F0F;color:var(--white)}
.pg-more--dark .lv-cell p{color:var(--grey-50)}
.pg-more--dark .lv-art svg{fill:var(--white)}
.pg-more--dark .lv-tag{background:#1C1C1C;border-color:rgba(255,255,255,.1);color:var(--grey-20)}
.pg-more--dark .lv-fx i:nth-child(1){background:#1C1C1C}
.pg-more--dark .lv-fx i:nth-child(2){background:#161616}
.pg-more--dark .lv-cell:hover .lv-go{background:var(--white)}
.pg-more--dark .lv-cell:hover .lv-go::before{background:var(--black)}
.pg-more--dark .lv-cell+.lv-cell{border-left:1px solid var(--line)}
@media(max-width:960px){.pg-more--dark .lv-cell:nth-of-type(-n+2){border-bottom:0}}
@media(max-width:600px){.pg-more--dark .lv-cell{border-bottom:0}}
/* Kacheln mit kleinem Linien-Piktogramm („Was du bekommst“) */
.r-ico--sm{height:190px}
.r-ico--sm svg{width:64px;height:64px;stroke-width:.9}
.pg-sec--tiles{padding-bottom:152px}
@media(max-width:960px){.pg-sec--tiles{padding-bottom:5rem}.r-ico--sm{height:150px}}
/* Startseite, Leistungen: die ganze Kachel ist klickbar, nicht nur der Pfeil (der Link des Pfeils spannt sich über die Kachel) */
#leistungen .lv-cell{cursor:pointer}
#leistungen .lv-go::after{content:"";position:absolute;inset:0;z-index:1}
#leistungen .lv-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Bewegungs-Piktogramme (Konturfiguren, gefüllt): gleiche Größe und Strichstärke für alle */
.r-ico--fill svg{width:150px;height:150px;fill:var(--neon);stroke:none}
@media(max-width:600px){.r-ico--fill svg{width:140px;height:140px}}
/* Gezeichnete Piktogramme im Stil der Bewegungs-Icons: breite Neon-Linie, darüber schmalere Linie in Kachelfarbe = doppelte Kontur */
.r-ico--fig svg{width:150px;height:150px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-ico--fig .o{stroke:var(--neon);stroke-width:12.6}
.r-ico--fig .i{stroke:#0F0F0F;stroke-width:6.6}
.r-ico--fig .l{stroke:var(--neon);stroke-width:3}
.r-ico--fig .h{stroke:var(--neon);stroke-width:3;fill:#0F0F0F}
@media(max-width:600px){.r-ico--fig svg{width:140px;height:140px}}
@media(max-width:600px){   /* Unterseiten: Ablauf-Spalte nie breiter als der Bildschirm, längstes Wort der Headline passt in die Zeile */
  main .steps{grid-template-columns:minmax(0,1fr)}
  main .steps__head h2.display.d-l{font-size:min(10vw,calc((100vw - 2 * var(--pad) - 2 * var(--cell)) / 7.4))}
}
@media(max-width:600px){main .steps__grid{grid-template-columns:minmax(0,1fr)}main .step h3{overflow-wrap:break-word;hyphens:manual}}
.r-ico--fig .n{stroke:var(--neon)}
.r-ico--fig .b{stroke:#0F0F0F}
.r-ico--fig .bf{fill:#0F0F0F}

/* ============================================================
   RECHTSSEITEN — Abschnitte: Titel in Spalte 1–2, Text in Spalte 3–4, Bandlinien dazwischen
   ============================================================ */
.hero--legal .hero__media::after{background:linear-gradient(180deg,rgba(10,10,10,.68) 0%,rgba(10,10,10,.45) 40%,rgba(10,10,10,.62) 80%,rgba(10,10,10,.82) 100%)}
.lg{padding-block:152px 140px}
.lg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:44px 52px;position:relative}
.lg-row::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:1px;background:var(--rule)}
.lg-row:last-child::after{content:"";position:absolute;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:1px;background:var(--rule)}
.lg-row>*{padding-inline:var(--cell)}
.lg-row h2{grid-column:1 / 3;font-family:var(--display);font-weight:900;font-size:clamp(1.375rem,2.1vw,1.875rem);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;padding-right:2rem}
.lg-no{display:block;margin-bottom:14px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;letter-spacing:0;color:var(--grey-50)}
.lg-body{grid-column:3 / 5;color:var(--grey-60);line-height:1.5}
.lg-body p,.lg-body ul{max-width:none}
.lg-body>*+*{margin-top:1em}
.lg-body h3{margin-top:1.6em;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;line-height:1;text-transform:uppercase;color:var(--ink)}
.lg-body h3+p{margin-top:.5em}
.lg-body ul{padding-left:1.15em}
.lg-body li+li{margin-top:.35em}
.lg-body li::marker{color:var(--ink)}
.lg-body address{font-style:normal;color:var(--ink);line-height:1.5}
.lg-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lg-body a:hover{background:var(--neon)}
.lg-dl div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lg-dl div:first-child{padding-top:0}
.lg-dl dt{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:.75rem;text-transform:uppercase;color:var(--grey-50);padding-top:.25em}
.lg-dl dd{color:var(--ink)}
.ph{background:rgba(226,255,0,.6);color:var(--ink);padding:0 .25em;border-bottom:1px dashed var(--ink)}   /* Platzhalter: vor dem Livegang ersetzen */
@media(max-width:960px){
  .lg{padding-block:5rem}
  .lg-row{grid-template-columns:1fr;row-gap:20px;padding-block:32px 40px}
  .lg-row h2,.lg-body{grid-column:auto}
}
@media(max-width:960px){main .pg-head{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){main h2.display.h-long{font-size:min(12vw,calc((100vw - 2 * var(--pad) - 2 * var(--cell)) / 7.6))}}   /* lange Einzelwörter wie „Datenschutz-“ passen in die Zeile */

/* ============================================================
   KONTAKTSEITE — Buchungskalender (Cal.com, lädt erst nach Klick) und Kontaktblock auf dunklem Grund
   ============================================================ */
.cal{grid-column:3 / 5;background:#0F0F0F;min-height:620px;display:flex;flex-direction:column;--cross:#8A8A8A;--rule:rgba(255,255,255,.14)}
.cal__gate,.cal__missing{margin:auto;padding:56px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:460px}
.cal__ico{width:56px;height:56px;fill:none;stroke:var(--neon);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cal__gate h3{margin-top:28px;font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.2vw,2rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
.cal__gate p,.cal__missing{margin-top:16px;color:var(--grey-50);font-size:.9375rem;line-height:1.45;max-width:none}
.cal a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.cal a:hover{color:var(--neon)}
.cal__gate .btn-frame{margin-top:32px;align-self:stretch}
.cal__gate .cal__alt{font-size:.8125rem}
.cal__frame iframe{display:block;width:100%;height:720px;border:0;background:#0F0F0F}
.cal.is-open{min-height:0}
.sec:not(.sec--light) .bk__side>p{color:var(--grey-50)}
.sec:not(.sec--light) .bk-direct,.sec:not(.sec--light) .bk-direct div{border-color:rgba(255,255,255,.14)}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* Spam-Falle, für Menschen unsichtbar */
button.plan__buy:disabled{opacity:.6;cursor:wait}
@media(max-width:960px){
  .cal{grid-column:auto;min-height:520px}
  .cal__frame iframe{height:660px}
}
/* Kontaktseite, Termin: Eckdaten ohne Trennstriche */
.bk-direct--facts,.bk-direct--facts div{border:0!important}
.bk-direct--facts div{padding:10px 0}
/* Formular-Buttons über die volle Kartenbreite: Rahmen und Plusse liegen auf der linken und rechten Kante der Karte */
.bk-form .btn-frame,.bk-done .btn-frame{margin-inline:-24px}
@media(max-width:600px){.bk-form .btn-frame,.bk-done .btn-frame{margin-inline:-16px}}
/* Formular: Senden-Button sitzt unten bündig am Ende der Karte, sein Rahmen liegt auf der Unterkante */
.bk-form{padding-bottom:0}
.bk-form.is-sent{padding-bottom:24px}
/* Kalenderkarte: Button unten bündig über die volle Kartenbreite, Rahmen auf den Kartenkanten */
.cal__gate{flex:1;justify-content:center;margin:0 auto}
.cal__btn{margin:0;width:100%}
.cal__btn .plan__buy{height:64px}
@media(max-width:960px){.cal__btn .plan__buy{height:56px}}
/* Kontaktseite: Seitenspalten scrollen normal mit, Linien über beide Spalten */
.bk__side{position:static}
.bk__side .bk-direct{margin-inline:calc(-1 * var(--cell)) calc(-1 * (var(--cell) + 3vw))}
.bk__side .bk-direct div{padding-inline:var(--cell) calc(var(--cell) + 3vw)}
@media(max-width:960px){
  .bk__side .bk-direct{margin-inline:calc(-1 * var(--cell))}
  .bk__side .bk-direct div{padding-inline:var(--cell)}
}