@import url('fonts.css');

/* ══════════════════════════════════════════════════════════════
   MARTI COACHING · Stil Signal · Farbweg Nachtsignal
   Tokens exakt aus 02-brand/BRAND-GUIDE.html
   ══════════════════════════════════════════════════════════════ */
:root{
  --grund:#0B0B0B; --karte:#141414; --tiefe:#000000;
  --knochen:#FBFBF9; --sek:#8E8E8E; --zinnober:#FF4A1C; --auf-zinnober:#0B0B0B;
  --linie:#242424; --linie-hell:#3A3A3A;
  --ok:#3DD68C; --warn:#FFB020; --err:#FF5C5C;
  --f-d:'Anybody',system-ui,sans-serif;
  --f-b:'Archivo',system-ui,sans-serif;
  --f-m:'Martian Mono',ui-monospace,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px;
  --wrap:1280px; --bw:2px; --hdr:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--grund);scroll-padding-top:calc(var(--hdr) + 16px);
  -webkit-text-size-adjust:100%}
body{background:var(--grund);color:var(--knochen);font-family:var(--f-b);font-size:17px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.d{font-family:var(--f-d);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 118,'wght' 800;letter-spacing:-.035em;line-height:.9}
a{color:inherit;text-decoration:none}
img,svg,canvas,video{display:block;max-width:100%}
::selection{background:var(--zinnober);color:var(--auf-zinnober)}
:focus-visible{outline:3px solid var(--zinnober);outline-offset:3px}
p{max-width:66ch}
strong{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.m{font-family:var(--f-m);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;color:var(--sek)}
.sub{color:var(--sek)}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--knochen);
  color:var(--grund);padding:14px 22px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ── Lesefortschritt ── */
#prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--linie);z-index:300}
#prog i{display:block;height:100%;width:0;background:var(--zinnober);transform-origin:left}

/* ── Kopfzeile ── */
header{position:sticky;top:3px;z-index:200;background:rgba(11,11,11,.9);
  backdrop-filter:blur(18px);border-bottom:var(--bw) solid var(--knochen)}
.nav{display:flex;align-items:center;gap:var(--s3);padding:14px 0;min-height:var(--hdr)}
.nav .logo{width:152px;flex:none}
.nav .links{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav .links a:not(.btn){font-family:var(--f-m);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sek);padding:8px 11px;border:1px solid transparent;
  transition:.16s var(--ease)}
.nav .links a:not(.btn):hover{color:var(--knochen);border-color:var(--linie-hell)}
.lang{display:flex;border:1px solid var(--linie-hell);margin-left:6px}
.lang button{font-family:var(--f-m);font-size:.73rem;letter-spacing:.1em;padding:7px 9px;
  background:transparent;border:0;color:var(--sek);cursor:pointer;transition:.16s}
.lang button+button{border-left:1px solid var(--linie-hell)}
.lang button[aria-pressed="true"]{background:var(--knochen);color:var(--grund)}
@media(max-width:1080px){.nav .links a:not(.btn){display:none}}

/* ── Knöpfe ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-b);
  font-weight:700;font-size:.9rem;padding:15px 26px;border:var(--bw) solid var(--knochen);
  cursor:pointer;text-transform:uppercase;letter-spacing:.02em;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .18s,color .18s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--knochen)}
.btn-a{background:var(--zinnober);color:var(--auf-zinnober);border-color:var(--zinnober)}
.btn-a:hover{box-shadow:5px 5px 0 var(--knochen)}
.btn-o{background:transparent;color:var(--knochen)}
.btn-o:hover{background:var(--knochen);color:var(--grund);box-shadow:5px 5px 0 var(--zinnober)}
.btn-k{background:var(--knochen);color:var(--grund);border-color:var(--knochen)}
.btn-k:hover{box-shadow:5px 5px 0 var(--zinnober)}
.btn-sm{padding:10px 16px;font-size:.78rem}
.btn-lg{padding:19px 34px;font-size:1rem}
.btn-full{width:100%}
.arw{transition:transform .22s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* ── Sektionen ── */
section{padding:clamp(56px,8vw,120px) 0;position:relative}
.sh{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start;
  border-top:var(--bw) solid var(--knochen);padding-top:var(--s2);margin-bottom:var(--s5)}
.sh .n{font-family:var(--f-m);font-size:.75rem;letter-spacing:.15em;color:var(--zinnober);padding-top:7px}
.sh h2{font-size:clamp(1.8rem,4.6vw,3.4rem);max-width:20ch}
.sh .lead{grid-column:2;color:var(--sek);margin-top:var(--s2);max-width:58ch}
@media(max-width:640px){.sh{grid-template-columns:1fr;gap:6px}.sh .lead{grid-column:1}}

/* ── Reveal ── */
.js [data-rev]{opacity:0;transform:translate3d(var(--rx,0),var(--ry,28px),0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.js [data-rev].in{opacity:1;transform:none}
.js [data-rev="left"]{--rx:-34px;--ry:0}
.js [data-rev="right"]{--rx:34px;--ry:0}
.js [data-rev="zoom"]{--ry:0;transform:scale(.965)}
.js [data-rev="zoom"].in{transform:none}
/* Hier lag ein clip-path-Wisch auf jeder Ueberschrift. Solange die Klasse .in
   fehlte, war die Ueberschrift auf Breite null geschnitten, also unsichtbar.
   Genau das ist dreimal passiert. Auf einer Verkaufsseite ist eine unsichtbare
   Ueberschrift der teuerste denkbare Fehler, deshalb werden Ueberschriften jetzt
   grundsaetzlich nicht mehr versteckt. Die Sektion als Ganzes blendet weiterhin
   ueber [data-rev] ein, das genuegt vollkommen. */
.wipe{clip-path:none!important}

/* ── HERO ── */
.hero{padding:clamp(30px,5vw,56px) 0 0;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .ph,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--grund) 30%,rgba(11,11,11,.82) 55%,rgba(11,11,11,.55) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);align-items:center;
  min-height:min(78vh,720px);padding-bottom:var(--s5)}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;min-height:0;padding-top:var(--s3)}}
.kick{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3);flex-wrap:wrap}
.kick .bar{height:12px;width:54px;background:var(--zinnober);flex:none}
/* Auf 4 Zeilen bemessen. Die Ueberschrift ist ein vollstaendiger Satz und
   braucht mehr Laufweite als die alte Kurzfassung. */
.hero h1{font-size:clamp(2rem,4.2vw,3.6rem);max-width:21ch}
.hero h1 em{font-style:normal;color:var(--zinnober)}
.hero .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--sek);max-width:46ch;margin-top:var(--s3)}
.hero .cta{display:flex;gap:12px;margin-top:var(--s4);flex-wrap:wrap}
.hero .under{margin-top:var(--s3);font-size:.86rem;color:var(--sek)}
.hero .under b{color:var(--knochen)}

/* Bewertungsplakette */
.rev{display:inline-flex;align-items:center;gap:12px;background:var(--knochen);color:var(--grund);
  padding:9px 16px;margin-bottom:var(--s3)}
.rev .sc{background:var(--grund);color:var(--knochen);font-family:var(--f-d);font-weight:800;
  font-variation-settings:'wdth' 118,'wght' 800;padding:5px 9px;font-size:.95rem}
.rev .tx{font-size:.78rem;line-height:1.3}
.rev .tx b{display:block;font-size:.9rem}
.rev .st{color:#9C6100;letter-spacing:.06em;font-size:.85rem}
/* Die Plakette ist ein Link aufs Google-Profil. .sub faerbt sonst grau auf
   Knochen und landet bei 3,16:1, das reicht fuer Kleintext nicht. */
.rev .tx.sub{color:#5A5A5A}
a.rev{text-decoration:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
a.rev:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--zinnober)}

/* ── Formcheck-Widget im Hero ── */
.fc{background:var(--karte);border:var(--bw) solid var(--knochen);
  box-shadow:10px 10px 0 rgba(255,74,28,.22)}
.fc-bar{height:5px;background:var(--linie)}
.fc-bar i{display:block;height:100%;background:var(--zinnober);width:20%;
  transition:width .45s var(--ease)}
.fc-in{padding:clamp(22px,3vw,34px)}
.fc h3{font-size:1.18rem;margin-bottom:var(--s1)}
.fc .q{font-size:.86rem;color:var(--sek);margin-bottom:var(--s3)}
.fc-opts{display:grid;gap:9px}
.fc-opts button{text-align:left;font-family:var(--f-b);font-size:.94rem;font-weight:500;
  padding:14px 16px;background:transparent;color:var(--knochen);border:1px solid var(--linie-hell);
  cursor:pointer;transition:.16s var(--ease);display:flex;align-items:center;gap:12px}
.fc-opts button:hover{border-color:var(--knochen);transform:translateX(4px)}
.fc-opts button[aria-pressed="true"]{border-color:var(--zinnober);background:rgba(255,74,28,.1)}
.fc-opts button i{width:9px;height:9px;border:1px solid var(--sek);flex:none;display:block}
.fc-opts button[aria-pressed="true"] i{background:var(--zinnober);border-color:var(--zinnober)}
.fc-nav{display:flex;gap:10px;margin-top:var(--s3);align-items:center}
.fc-nav .back{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:0;color:var(--sek);cursor:pointer;padding:8px 4px}
.fc-nav .back:hover{color:var(--knochen)}
.fc-step{display:none}.fc-step.on{display:block}
.fc-field{display:grid;gap:7px;margin-bottom:var(--s2)}
.fc-field label{font-family:var(--f-m);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sek)}
.fc-field input{padding:13px 14px;border:1px solid var(--linie-hell);background:var(--grund);
  color:var(--knochen);font-family:var(--f-b);font-size:.95rem;width:100%}
.fc-field input:focus{outline:0;border-color:var(--zinnober)}
.fc-note{font-size:.76rem;color:var(--sek);margin-top:var(--s2)}
.fc-done{text-align:center;padding:var(--s3) 0}
.fc-done .tick{font-size:2.4rem;color:var(--zinnober);line-height:1}

/* ── Laufband ── */
.tick{background:var(--zinnober);color:var(--auf-zinnober);overflow:hidden;padding:13px 0;
  border-top:var(--bw) solid var(--knochen);border-bottom:var(--bw) solid var(--knochen)}
.tick-in{display:flex;width:max-content;animation:run 38s linear infinite}
.tick:hover .tick-in{animation-play-state:paused}
.tick span{font-family:var(--f-m);font-size:.78rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:0 24px;white-space:nowrap}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Bild-Platzhalter ──
   Leicht durchscheinendes Orange, damit sofort sichtbar ist, wo ein Bild oder
   Video hingehoert und welche Masse es braucht. Verschwindet automatisch,
   sobald die Datei unter dem angegebenen Pfad liegt. */
.ph{background:rgba(255,74,28,.14);border:2px dashed rgba(255,74,28,.55);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s3);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,74,28,.10) 12px 24px)}
.ph span{font-family:var(--f-m);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:#FFD9CC;position:relative;max-width:30ch;line-height:1.9}
.ph b{display:block;color:var(--knochen);margin-bottom:6px;font-weight:500;font-size:.75rem;
  letter-spacing:.15em}
/* Auf den Vollbild-Baendern und im Hero liegt Text ueber dem Platzhalter.
   Dort muss die Beschriftung nach unten rechts ausweichen, sonst steht sie
   mitten in der Ueberschrift. */
.hero-bg .ph,.pillar .bg .ph{background:rgba(255,74,28,.10);border-color:rgba(255,74,28,.34);
  align-items:flex-end;justify-content:flex-end;padding:var(--s3) var(--s2)}
.hero-bg .ph span,.pillar .bg .ph span{text-align:right;max-width:24ch;opacity:.85}

/* ── VSL ──
   Nur oben eine weisse Kante. Unten stand vorher dieselbe 2px-Linie, und weil
   danach erst 110px Luft und dann die Linie der naechsten Sektionsueberschrift
   kam, las sich die untere Kante wie eine Ueberschrift, die fehlt. */
.vsl{background:var(--tiefe);border-top:var(--bw) solid var(--knochen);
  border-bottom:1px solid var(--linie)}
.vsl-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:900px){.vsl-grid{grid-template-columns:1fr}}
.vsl h2{font-size:clamp(1.7rem,4vw,3rem);max-width:14ch}
.player{position:relative;aspect-ratio:16/9;border:var(--bw) solid var(--knochen);overflow:hidden;
  cursor:pointer;background:var(--karte)}
.player .ph{position:absolute;inset:0;border:0}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.7),rgba(11,11,11,.2));
  transition:opacity .3s}
.player .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:var(--zinnober);display:flex;
  align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.player:hover .play{transform:translate(-50%,-50%) scale(1.09)}
.player .play::after{content:"";border-left:22px solid var(--auf-zinnober);
  border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.player .dur{position:absolute;right:14px;bottom:12px;font-family:var(--f-m);font-size:.75rem;
  letter-spacing:.14em;background:var(--grund);color:var(--knochen);padding:6px 10px}
.player.playing .veil,.player.playing .play,.player.playing .dur{opacity:0;pointer-events:none}

/* ── Für wen ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--bw) solid var(--knochen)}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.two>div{padding:clamp(26px,3.4vw,44px)}
.two>div:first-child{border-right:var(--bw) solid var(--knochen)}
@media(max-width:860px){.two>div:first-child{border-right:0;border-bottom:var(--bw) solid var(--knochen)}}
.two .yes{background:linear-gradient(180deg,rgba(255,74,28,.09),transparent 340px)}

/* Kopf der Spalte: Symbol im Kasten, Titel daneben. */
.two-hd{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4);
  padding-bottom:var(--s2);border-bottom:1px solid var(--linie)}
.two-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;font-size:1.05rem;
  font-weight:700;line-height:1}
.two .yes .two-ic{background:var(--zinnober);color:var(--auf-zinnober)}
.two .no .two-ic{background:var(--linie);color:var(--sek)}
.two h3{font-size:1.35rem;margin:0}
.two .yes h3{color:var(--zinnober)}
.two .no h3{color:var(--sek)}

/* Frueher stand hier display:grid mit 22px 1fr. Jedes <li> hat aber drei
   Kinder (Pseudo-Element, <b>, <span>), also landete der Nachsatz in der
   22px-Spalte und brach auf ein Wort pro Zeile um. Jetzt Bloecke statt Raster. */
.two ul{list-style:none;display:grid;gap:var(--s3)}
.two li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.6}
.two li::before{position:absolute;left:0;top:.05em;font-weight:700;font-size:.95rem}
.two .yes li::before{content:"→";color:var(--zinnober)}
.two .no li::before{content:"×";color:var(--linie-hell)}
.two li b{display:block;color:var(--knochen);font-weight:700;margin-bottom:3px;
  font-size:1rem;letter-spacing:-.005em}
.two li span{display:block;color:var(--sek);font-size:.9rem}
.two .no li b{color:#C9C9C9}

/* ── Säulen (Vollbild-Bänder) ── */
.pillar{position:relative;min-height:min(74vh,640px);display:flex;align-items:center;
  border-bottom:var(--bw) solid var(--knochen);overflow:hidden}
.pillar .bg{position:absolute;inset:0}
.pillar .bg .ph,.pillar .bg img{width:100%;height:100%;object-fit:cover;border:0}
.pillar .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,11,.94) 0%,rgba(11,11,11,.8) 45%,rgba(11,11,11,.35) 100%)}
/* .pillar ist ein Flex-Container. Ohne width:100% wird .wrap zum Flex-Item mit
   Shrink-to-fit-Breite, und margin:0 auto zentriert dann diese schmale Kiste
   statt der 1280px. Der Text stand dadurch mitten auf der Flaeche. */
.pillar .wrap{position:relative;z-index:2;width:100%;padding-top:var(--s5);padding-bottom:var(--s5)}
.pillar .kicker{font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zinnober);margin-bottom:10px}
.pillar h3{font-size:clamp(2.2rem,6vw,4.4rem);margin-bottom:var(--s3)}
.pillar p{max-width:42ch;color:var(--sek);font-size:1.02rem}
.pillar ul{list-style:none;display:grid;gap:9px;margin-top:var(--s3);max-width:42ch}
.pillar li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:.93rem;color:var(--sek)}
.pillar li::before{content:"";width:12px;height:2px;background:var(--zinnober);margin-top:.62em}

/* ── Ablauf ── */
.steps{display:grid;gap:var(--s3);counter-reset:st}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  border:var(--bw) solid var(--knochen);padding:clamp(22px,3vw,34px);background:var(--karte);
  position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--zinnober)}
/* 1fr ist minmax(auto,1fr). Ohne min-width:0 zieht der laengste Textblock die
   Spalte ueber den Viewport, unter 380px waren das 26px Ueberlauf. */
.step>*{min-width:0}
.step:nth-child(2){margin-left:clamp(0px,6vw,86px)}
.step:nth-child(3){margin-left:clamp(0px,12vw,172px)}
.step:nth-child(4){margin-left:clamp(0px,18vw,258px)}
@media(max-width:860px){.step:nth-child(n){margin-left:0}}
.step .no{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  font-size:2.1rem;color:var(--zinnober);line-height:.9;min-width:60px}
.step h3{font-size:1.16rem;margin-bottom:7px}
.step p{font-size:.94rem;color:var(--sek)}
.step .when{font-family:var(--f-m);font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sek);margin-top:10px}

/* ── Leistungen ── */
/* Neun Kacheln. Drei Spalten ergeben 3x3 ohne Waise in der letzten Reihe. */
.deliver{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:0;
  border:var(--bw) solid var(--knochen)}
.dl{padding:var(--s3);border-right:var(--bw) solid var(--knochen);border-bottom:var(--bw) solid var(--knochen)}
@media(min-width:1000px){.deliver{grid-template-columns:repeat(3,1fr)}}
.dl .no{font-family:var(--f-m);font-size:.75rem;color:var(--zinnober);letter-spacing:.16em;margin-bottom:11px}
.dl h3{font-size:1.02rem;margin-bottom:7px}
.dl p{font-size:.9rem;color:var(--sek)}

/* ── Coach ── */
.coach{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:900px){.coach{grid-template-columns:1fr}}
.coach .portrait{aspect-ratio:3/4;border:var(--bw) solid var(--knochen)}
.coach .portrait .ph,.coach .portrait img{width:100%;height:100%;object-fit:cover;border:0}
.creds{display:grid;gap:0;border-top:1px solid var(--linie);margin-top:var(--s4)}
.creds div{display:flex;justify-content:space-between;gap:var(--s2);padding:13px 0;
  border-bottom:1px solid var(--linie);font-size:.93rem}
.creds dt{color:var(--sek)}
.creds dd{text-align:right;font-weight:600}
.sig-line{margin-top:var(--s4);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.sig-line img{width:170px}

/* ── Zahlen ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:var(--bw) solid var(--knochen)}
.stat{padding:var(--s3);border-right:var(--bw) solid var(--knochen)}
.stat:last-child{border-right:0}
@media(max-width:760px){.stat{border-right:0;border-bottom:var(--bw) solid var(--knochen)}
  .stat:last-child{border-bottom:0}}
.stat .k{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.035em;line-height:1}
.stat .k.a{color:var(--zinnober)}
.stat .l{font-family:var(--f-m);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sek);margin-top:10px}

/* ── Ergebnisse ── */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s3)}
.case{border:var(--bw) solid var(--knochen);background:var(--karte);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.case:hover{transform:translateY(-5px);box-shadow:0 14px 0 -4px var(--zinnober)}
.case .pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--knochen);aspect-ratio:2/1.4}
.case .pair figure{position:relative;margin:0;overflow:hidden;background:var(--karte)}
.case .pair .ph,.case .pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.case .pair figcaption{position:absolute;left:8px;top:8px;z-index:2;font-family:var(--f-m);
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;background:var(--grund);
  color:var(--knochen);padding:4px 8px}
.case .tag{display:inline-block;background:var(--zinnober);color:var(--auf-zinnober);
  font-family:var(--f-m);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;margin:var(--s3) var(--s3) 0}
.case .meta{padding:var(--s2) var(--s3) var(--s3)}
.case .who{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  font-size:1.08rem;text-transform:uppercase;letter-spacing:-.02em}
.case .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:var(--s2) 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:12px 0}
.case .nums div{text-align:center}
.case .nums .k{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  font-size:1.02rem;letter-spacing:-.02em}
.case .nums .l{font-family:var(--f-m);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sek);margin-top:4px}
.case blockquote{font-size:.9rem;color:var(--sek);font-style:italic}

/* ── Preise ──
   Vier Karten nebeneinander, alle Preise gleichzeitig sichtbar. Kein Umschalter:
   wer erst klicken muss, um einen Preis zu sehen, vergleicht nicht, sondern geht. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:var(--bw) solid var(--knochen)}
@media(max-width:1240px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.plans{grid-template-columns:1fr}}
.plan{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;position:relative;
  box-shadow:inset -1px 0 0 var(--knochen),inset 0 -1px 0 var(--knochen)}
@media(max-width:680px){.plan{box-shadow:inset 0 -1px 0 var(--knochen)}}
.plans>.plan:last-child{box-shadow:none}
.plan.best{background:var(--karte);box-shadow:inset 0 0 0 2px var(--zinnober)}
.plan .badge{position:absolute;top:-1px;left:clamp(24px,3vw,36px);background:var(--zinnober);
  color:var(--auf-zinnober);font-family:var(--f-m);font-size:.73rem;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px}
.plan .badge.q{background:var(--knochen);color:var(--grund)}
/* Feste Hoehe, sonst laufen einzeilige und zweizeilige Zeilen auseinander
   und alle vier Karten stehen unterschiedlich. */
.plan .pk{font-family:var(--f-m);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sek);margin-bottom:10px;margin-top:var(--s2);min-height:1.5em}
/* "Die Transformation" und "Das Privatcoaching" brauchen zwei Zeilen, die
   kurzen Namen eine. Ohne feste Hoehe stehen die vier Preise auf vier
   verschiedenen Hoehen und die Reihe wirkt schief. */
.plan .pn{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:1.38rem;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;
  min-height:2.1em;display:flex;align-items:flex-start}
/* Vier Karten, vier verschieden lange Beschreibungen. Feste Mindesthoehe,
   damit Preis, Gesamtsumme und Knopf in allen vier auf einer Linie liegen. */
.plan .pd{font-size:.85rem;color:var(--sek);margin-top:10px;min-height:7.2em}
/* Vier statt drei Spalten: der Preis muss kleiner werden, sonst bricht
   "111,75 €" um und die Karten stehen unterschiedlich hoch. */
/* "Auf Anfrage" steht kleiner als die Zahlen. Ohne feste Kastenhoehe erbt die
   vierte Karte eine kuerzere Zeilenbox und alles darunter verrutscht. */
.plan .pp{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(1.9rem,2.6vw,2.5rem);letter-spacing:-.045em;line-height:1;margin:var(--s3) 0 4px;
  white-space:nowrap;display:flex;align-items:baseline;min-height:40px}
.plan .pp small{font-family:var(--f-b);font-weight:500;font-size:.82rem;letter-spacing:0;color:var(--sek);
  white-space:nowrap}
.plan .pp.ask{font-size:clamp(1.5rem,2vw,1.9rem);color:var(--knochen)}
.plan.best .pp{color:var(--zinnober)}
.plan .ptot{font-size:.78rem;color:var(--sek);min-height:3em}
/* Eine der vier Notizen bricht auf zwei Zeilen. Feste Hoehe, sonst starten die
   Leistungslisten 30px versetzt. */
.plan .pnote{color:var(--ok);font-size:.8rem;font-weight:600;margin-top:var(--s2);
  min-height:2.7em;line-height:1.35}
.plan .pnote.warnnote{color:var(--warn)}
.plan .pnote.neutral{color:var(--sek);font-weight:500}
.plan ul{list-style:none;display:grid;gap:10px;margin:var(--s3) 0;flex:1}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:.86rem;color:var(--sek)}
.plan li.y::before{content:"✓";color:var(--zinnober);font-weight:700}
.plan li.n::before{content:"×";color:var(--linie-hell);font-weight:700}
.plan li.n{color:var(--linie-hell);text-decoration:line-through}
/* p erbt max-width:66ch. Ohne auto-Rand steht der zentrierte Text im linken Drittel. */
.payline{margin:var(--s3) auto 0;font-size:.86rem;color:var(--sek);text-align:center}
.payline b{color:var(--knochen)}

/* ── Garantie ── */
.guar{border:var(--bw) solid var(--zinnober);padding:clamp(26px,4vw,48px);background:var(--karte);
  position:relative;max-width:860px}
.guar .seal{position:absolute;top:-13px;left:28px;background:var(--zinnober);color:var(--auf-zinnober);
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 13px}
.guar .big{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em;
  line-height:1.1;margin-bottom:var(--s3)}
/* Wie bei .two: kein Raster, weil die Punkte aus <b> plus Nachsatz bestehen
   und der Nachsatz sonst in der 18px-Spalte landet. */
.guar ul{list-style:none;display:grid;gap:var(--s2);margin:var(--s3) 0}
.guar li{position:relative;padding-left:26px;font-size:.92rem;color:var(--sek);line-height:1.6}
.guar li::before{content:"✓";position:absolute;left:0;top:.05em;color:var(--ok);font-weight:700}
.guar li b{color:var(--knochen);font-weight:700}

/* ── FAQ ── */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--linie)}
.faq details[open]{background:var(--karte)}
.faq summary{padding:22px clamp(44px,5vw,56px) 22px var(--s3);cursor:pointer;list-style:none;
  position:relative;font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:.98rem;letter-spacing:-.02em;transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--zinnober)}
.faq summary::after{content:"";position:absolute;right:var(--s3);top:50%;width:11px;height:11px;
  border-right:2px solid var(--zinnober);border-bottom:2px solid var(--zinnober);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 var(--s3) 24px;color:var(--sek);font-size:.96rem}
.faq .a p+p{margin-top:12px}

/* ── Schluss ── */
.final{background:var(--zinnober);color:var(--auf-zinnober);border-top:var(--bw) solid var(--knochen);
  text-align:center;padding:clamp(56px,8vw,120px) 0}
.final h2{font-size:clamp(2rem,5.6vw,4.4rem);max-width:17ch;margin:0 auto var(--s3);color:var(--auf-zinnober)}
/* p erbt max-width:66ch. Ohne auto-Rand sitzt der zentrierte Text links. */
.final p{margin-left:auto;margin-right:auto}
.final .fkick{font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--s3);opacity:.72}
.final .fbig{font-family:var(--f-b);font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.45;
  max-width:34ch;margin:0 auto var(--s3);font-weight:500}
.final .fbig b{font-weight:800}
.final .frisk{margin-top:var(--s3);font-size:.88rem;max-width:52ch;margin-left:auto;margin-right:auto;
  opacity:.86}
.final .frisk b{font-weight:800;opacity:1}
.final .pitch{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.1rem);letter-spacing:-.03em;
  margin:var(--s4) 0 var(--s1)}
.final .pitch b{font-size:1.5em;display:inline-block;vertical-align:-.04em}
.final .fine{font-size:.88rem;opacity:.78;max-width:52ch;margin:0 auto}
.final .cta{display:flex;gap:14px;justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.final .btn-k{background:var(--grund);color:var(--knochen);border-color:var(--grund)}
.final .btn-k:hover{box-shadow:5px 5px 0 var(--auf-zinnober)}
.final .btn-o{border-color:var(--auf-zinnober);color:var(--auf-zinnober)}
.final .btn-o:hover{background:var(--auf-zinnober);color:var(--zinnober);box-shadow:5px 5px 0 var(--grund)}
.final .slots{margin-top:var(--s3);font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.75}

/* ── Fuß ── */
footer{background:var(--tiefe);padding:var(--s5) 0 var(--s6);border-top:var(--bw) solid var(--knochen)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s4)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--knochen);margin-bottom:14px;font-weight:500}
footer ul{list-style:none;display:grid;gap:9px}
footer a{color:var(--sek);transition:color .18s}
footer a:hover{color:var(--zinnober)}
.disclaim{margin-top:var(--s3);font-size:.78rem;color:var(--sek);line-height:1.7;max-width:62ch}
.fbot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:.78rem;color:var(--sek)}

/* ── Sticky-Leiste unten ── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:190;background:var(--grund);
  border-top:var(--bw) solid var(--knochen);transform:translateY(110%);
  transition:transform .4s var(--ease)}
.sticky.on{transform:none}
.sticky-in{display:flex;align-items:center;gap:var(--s3);padding:12px 0;flex-wrap:wrap}
.sticky .txt{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:.95rem;letter-spacing:-.02em}
.sticky .txt s{color:var(--sek);font-weight:500}
.sticky .acts{display:flex;gap:10px;margin-left:auto;align-items:center}
@media(max-width:720px){.sticky .txt{display:none}.sticky .acts{margin-left:0;width:100%}
  .sticky .acts .btn{flex:1}}
#totop{position:fixed;right:16px;bottom:84px;z-index:185;width:46px;height:46px;
  background:var(--zinnober);color:var(--auf-zinnober);border:var(--bw) solid var(--knochen);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;
  pointer-events:none;transition:opacity .3s,transform .2s var(--ease)}
#totop.on{opacity:1;pointer-events:auto}
#totop:hover{transform:translateY(-3px)}

/* ── Cookie ── */
.cookie{position:fixed;left:16px;bottom:16px;z-index:210;max-width:430px;background:var(--karte);
  border:var(--bw) solid var(--knochen);padding:var(--s3);transform:translateY(160%);
  transition:transform .45s var(--ease)}
.cookie.show{transform:none}
.cookie h4{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:1rem;margin-bottom:9px;letter-spacing:-.02em}
.cookie p{font-size:.85rem;color:var(--sek);margin-bottom:var(--s2)}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){.cookie{right:16px;max-width:none}}

/* ── CTA-Baender ──
   Zwischen Hero und Preisen lagen rund 10.000 Pixel ohne einen einzigen
   Handlungsaufruf. Wer auf halber Strecke ueberzeugt ist, hatte nichts zum
   Klicken. Diese Baender schliessen jede grosse Sektion ab. */
.ctaband{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s5);padding:var(--s4) clamp(22px,3vw,40px);
  border:var(--bw) solid var(--knochen);background:var(--karte)}
.ctaband.plain{background:transparent}
.ctaband .t{flex:1 1 380px;min-width:0}
.ctaband .t b{display:block;font-family:var(--f-d);font-weight:800;
  font-variation-settings:'wdth' 118,'wght' 800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2vw,1.7rem);line-height:1;margin-bottom:9px}
.ctaband .t span{color:var(--sek);font-size:.9rem;display:block;max-width:58ch}
.ctaband .btn{flex:none}
@media(max-width:700px){.ctaband{flex-direction:column;align-items:stretch}
  .ctaband .btn{width:100%}}

/* ── Google-Rezensionen ── */
.gsum{display:inline-flex;align-items:stretch;gap:0;margin-bottom:var(--s5);
  border:var(--bw) solid var(--knochen);text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.gsum:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--zinnober)}
.gsum-l{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--knochen);color:var(--grund);padding:14px 22px;gap:2px}
.gsum-sc{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  font-size:2.1rem;line-height:.9;letter-spacing:-.03em}
.gsum-st{color:#9C6100;font-size:.8rem;letter-spacing:.08em}
.gsum-r{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 22px}
.gsum-r b{font-family:var(--f-b);font-size:1rem;color:var(--knochen)}
.gsum-r span{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zinnober)}

/* Spalten statt Raster: die Rezensionen sind sehr unterschiedlich lang, ein
   Raster wuerde sie auf die hoechste Karte aufziehen und Luft erzeugen. */
.voices{columns:1;column-gap:var(--s3)}
@media(min-width:760px){.voices{columns:2}}
@media(min-width:1120px){.voices{columns:3}}
.voice{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:var(--karte);border:1px solid var(--linie);padding:var(--s3);
  margin:0 0 var(--s3);display:inline-block;width:100%}
.voice .st{color:#FFB020;letter-spacing:.1em;font-size:.85rem;margin-bottom:12px}
.voice blockquote{font-size:.94rem;line-height:1.65;color:var(--knochen);margin:0}
.voice figcaption{margin-top:var(--s2);padding-top:12px;border-top:1px solid var(--linie);
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--knochen);display:flex;justify-content:space-between;gap:12px}
.voice figcaption span{color:var(--sek)}
.proof{margin-top:var(--s4);border-left:2px solid var(--linie-hell);padding-left:var(--s3);
  font-size:.82rem;line-height:1.7;color:var(--sek);max-width:82ch}
.proof b{color:var(--knochen)}

/* ── Rechtsseiten ── */
.legal{padding:clamp(48px,7vw,96px) 0}
.legal h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:10px}
.legal h2{font-size:1.3rem;margin:var(--s5) 0 var(--s2)}
.legal h3{font-size:1.02rem;margin:var(--s3) 0 var(--s1)}
.legal p,.legal li{font-size:.96rem;color:var(--sek);max-width:72ch}
.legal p+p{margin-top:12px}
.legal ul,.legal ol{margin:12px 0 12px 22px;display:grid;gap:7px}
.legal .updated{font-family:var(--f-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sek);margin-bottom:var(--s4)}
.legal table{width:100%;border-collapse:collapse;font-size:.9rem;margin:14px 0}
.legal th,.legal td{text-align:left;padding:10px 12px;border:1px solid var(--linie);color:var(--sek)}
.legal th{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--karte);color:var(--knochen)}
.ph-warn{border-left:5px solid var(--warn);background:var(--karte);padding:var(--s3);margin:var(--s3) 0}
.ph-warn p{color:var(--knochen);font-size:.92rem}
.legal code{font-family:var(--f-m);font-size:.82em;background:var(--karte);padding:2px 6px;
  border:1px solid var(--linie)}
.legal a{color:var(--knochen);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie-hell)}
.legal a:hover{color:var(--zinnober);text-decoration-color:var(--zinnober)}
/* Fliesstext braucht eine engere Spalte als das Seitenraster. 76ch statt 1280px. */
.wrap.narrow{max-width:860px}
.legal .small{font-size:.85rem;color:var(--sek);border-left:2px solid var(--linie);
  padding-left:var(--s2);margin-top:var(--s2)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js [data-rev]{opacity:1!important;transform:none!important}
  .js .wipe{clip-path:none!important}
  .tick-in{animation:none}
}