/* ==========================================================================
   Personal Coach Aaron — 1:1 Online Coaching
   Farben ausschliesslich aus dem Logo: Hellblau + Grau auf Weiss.
   Formensprache aus der Bildmarke abgeleitet: Diagonalen und Dreiecke.
   ========================================================================== */
:root{
  color-scheme:light;

  --paper:#ffffff;
  --paper-alt:#f1f8fb;
  --ink:#2e2e2e;
  --ink-mid:#585858;                  /* Logo-Grau */
  --ink-soft:#8b8b8b;

  --blue:#93ddf4;                     /* Logo-Blau, direkt aus der Logodatei */
  --blue-deep:#10708d;                /* gleicher Farbton, kontraststark auf Weiss */
  --blue-wash:rgba(147,221,244,.18);
  --blue-line:rgba(147,221,244,.55);

  --line:rgba(46,46,46,.14);
  --line-soft:rgba(46,46,46,.07);

  --maxw:1180px;
  --gut:clamp(1.15rem,4vw,3rem);
  --r:16px;
  --display:"Archivo","Instrument Sans",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.3,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Seitliches Scrollen bleibt auf jeder Breite aus — grosse Headlines und
   das Laufband duerfen nach rechts herausragen, ohne die Seite zu weiten. */
html{overflow-x:hidden}
body{
  background:var(--paper);color:var(--ink-mid);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--blue-deep);outline-offset:3px;border-radius:4px}
/* Auf dem Handy: kein Doppeltipp-Zoom-Verzug und kein grauer Systemkasten
   beim Antippen — stattdessen ein kurzer Schimmer in der Markenfarbe. */
a,button,summary,label,[role="tab"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(16,112,141,.14)
}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

h1,h2,h3,h4{color:var(--ink);font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;text-wrap:balance;font-variation-settings:'wdth' 108}
h1{font-size:clamp(3rem,10.4vw,8.2rem);line-height:.9;letter-spacing:-.048em}
/* fit-content: der Kasten ist genau so breit wie die laengste Zeile. Sonst
   wuerde der leere Rest beim Vergroessern ueber den Bildschirmrand ragen. */
/* Kasten um jede Headline: haelt den Platz frei, den sie beim Zoom braucht */
.head-box{position:relative}
h2{font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:.98;max-width:18ch;width:fit-content}
/* Die Headlines starten beim Hereinscrollen gross und ziehen sich zusammen.
   Der Ursprung liegt links oben, damit die linke Kante ruhig stehen bleibt. */
.hero-title-zoom,h2{transform-origin:left top;will-change:transform}
.cta h2{transform-origin:center top;margin-inline:auto}
h3{font-size:1.09rem;line-height:1.25;letter-spacing:-.018em}
h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  font-variation-settings:'wdth' 88;font-weight:700}
p{text-wrap:pretty}

.kicker{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-deep);margin-bottom:.9rem;
  font-variation-settings:'wdth' 88;display:flex;align-items:center;gap:.55rem}
.kicker::before{content:"";width:0;height:0;flex:none;
  border-left:7px solid var(--blue);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.accent{color:var(--blue-deep)}

/* ---------- Chrome ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--blue-deep);z-index:120;transition:width .1s linear}

.nav{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.95rem var(--gut);
  background:rgba(255,255,255,.85);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s
}
.nav.is-stuck{border-bottom-color:var(--line-soft);padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand-mark{height:26px;width:auto;flex:none;transition:transform .5s var(--spring)}
.brand:hover .brand-mark{transform:translateY(-3px)}
.brand-word-mark{font-family:var(--display);font-variation-settings:'wdth' 82;font-weight:700;
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1}
.nav-links{display:flex;gap:1.65rem;font-size:.93rem}
.nav-links a{text-decoration:none;color:var(--ink-mid);position:relative;transition:color .22s;padding-block:.2rem}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blue);transition:width .32s var(--ease)}
.nav-links a:hover,.nav-links a.is-current{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.is-current::after{width:100%}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.55rem;border-radius:999px;background:var(--blue);color:var(--ink);
  text-decoration:none;font-weight:600;font-size:.95rem;border:2px solid var(--blue);
  transition:transform .3s var(--spring),background .25s,border-color .25s,color .25s,box-shadow .3s;
  will-change:transform
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;box-shadow:0 16px 36px -18px rgba(16,112,141,.9)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:transparent;color:var(--blue-deep);border-color:var(--blue-deep);box-shadow:none}
.btn-lg{padding:1.02rem 1.9rem;font-size:1rem}
.btn-small{padding:.55rem 1.15rem;font-size:.88rem}

/* ---------- Hero ---------- */
.hero{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) var(--gut) clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1.38fr .62fr;gap:clamp(2rem,4vw,3.2rem);align-items:center
}
.hero-inner{position:relative;min-width:0;z-index:1}

/* Ruhiger Lichtschein in Markenfarbe hinter der Headline. Er atmet langsam,
   damit die weisse Flaeche beim Oeffnen nicht tot wirkt. */
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-18%;top:-12%;width:78%;height:88%;
  background:radial-gradient(58% 58% at 38% 42%,rgba(147,221,244,.42),rgba(147,221,244,0) 70%);
  filter:blur(28px);
  animation:heroGlow 14s ease-in-out infinite alternate
}
@keyframes heroGlow{
  from{transform:translate3d(0,0,0) scale(1);opacity:.85}
  to{transform:translate3d(4%,3%,0) scale(1.12);opacity:1}
}

/* Die Akzentlinie faehrt nach der Headline von links ein */
.hero-title-zoom{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.title-rule{display:block;height:4px;width:clamp(72px,13vw,164px);background:var(--blue);
  border-radius:2px;transform-origin:left center}
.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.3rem}

.hero-title{display:flex;flex-direction:column}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block;transform:translateY(105%);opacity:0;
  animation:riseIn .95s var(--ease) forwards}
.js-gsap .hero-title .line>span{animation:none}
.hero-title .line:nth-child(1)>span{animation-delay:.12s}
.hero-title .line:nth-child(2)>span{animation-delay:.24s}
.hero-title .line:nth-child(3)>span{animation-delay:.36s}
@keyframes riseIn{to{transform:none;opacity:1}}

.lead{font-size:clamp(1.04rem,1.35vw,1.19rem);color:var(--ink-mid);max-width:44ch;margin:1.7rem 0 2.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}


.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft);margin-top:clamp(2rem,4vw,3.4rem)}
.stat{background:var(--paper);padding:1.25rem 0 1.25rem 1.2rem;position:relative}
.stat::before{content:"";position:absolute;left:0;top:1.45rem;width:0;height:0;
  border-left:6px solid var(--blue);border-top:4px solid transparent;border-bottom:4px solid transparent}
.stat dt{font-size:.77rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.stat dd{font-family:var(--display);font-size:1.32rem;font-weight:800;color:var(--ink);line-height:1;
  font-variation-settings:'wdth' 100}

/* ---------- Bildrahmen (diagonal beschnitten, wie die Bildmarke) ---------- */
.media-frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-alt);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0);
  border-radius:var(--r)
}
.media-frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.media-frame:has(img)::before,.media-frame:has(img)::after{display:none}
.media-frame::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,var(--blue-wash),transparent 62%),
    repeating-linear-gradient(118deg,transparent 0 26px,var(--line-soft) 26px 27px);
  animation:drift 16s ease-in-out infinite alternate
}
.media-frame::after{
  content:attr(data-shot);position:absolute;left:0;right:0;bottom:0;z-index:3;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  background:rgba(255,255,255,.94);padding:.6rem .8rem;line-height:1.4;
  border-top:1px solid var(--line-soft)
}
.media-wide{aspect-ratio:16/10}
@keyframes drift{to{transform:translate3d(-26px,12px,0) scale(1.07)}}

/* ---------- Google-Bewertung ---------- */
.rating{display:inline-flex;align-items:center;gap:.62rem;margin-top:2rem;text-decoration:none;
  padding:.55rem 1rem .55rem .75rem;border-radius:999px;border:1px solid var(--line-soft);
  background:var(--paper);transition:border-color .25s,transform .28s var(--spring)}
.rating:hover{border-color:var(--blue);transform:translateY(-2px)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:15px;height:15px;fill:var(--blue);opacity:0;transform:scale(.3) rotate(-30deg)}
.rating.is-visible .stars svg{animation:pop .5s var(--spring) forwards}
.rating.is-visible .stars svg:nth-child(2){animation-delay:.07s}
.rating.is-visible .stars svg:nth-child(3){animation-delay:.14s}
.rating.is-visible .stars svg:nth-child(4){animation-delay:.21s}
.rating.is-visible .stars svg:nth-child(5){animation-delay:.28s}
@keyframes pop{to{opacity:1;transform:none}}
.rating-text{font-size:.85rem;color:var(--ink-mid)}
.rating-text strong{color:var(--ink);font-weight:600}
.rating-wide{margin-top:2.6rem}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line-soft);padding:1.05rem 0;background:var(--paper)}
.marquee-track{display:flex;align-items:center;gap:1.9rem;width:max-content;animation:slide 38s linear infinite;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);font-variation-settings:'wdth' 90}
.marquee-track i{width:0;height:0;flex:none;
  border-left:7px solid var(--blue);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section[id],main[id]{scroll-margin-top:86px}
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gut)}
.section-alt{max-width:none;background:var(--paper-alt)}
.section-alt>*{max-width:var(--maxw);margin-inline:auto}
/* diagonale Schnittkante, aus der Logo-Geometrie */
.cut-top{--cut:3.2vw;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);margin-top:-1px;
  padding-top:clamp(5.5rem,10vw,9rem)}
.section-head{max-width:none;margin-bottom:3.4rem}
.section-head .sub{margin-top:1.1rem;max-width:54ch}

/* ---------- Ziele ---------- */
.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.col-sticky{position:sticky;top:6rem}
.col-sticky .sub{margin:0 0 2rem}
#ziele .section-head{margin-bottom:2.6rem}
.goals{list-style:none;counter-reset:g;border-top:1px solid var(--line-soft)}
.goals li{counter-increment:g;padding:1.55rem 0 1.55rem 3.2rem;border-bottom:1px solid var(--line-soft);
  position:relative;transition:padding-left .35s var(--ease)}
.goals li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:1.75rem;
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--blue-deep)}
.goals li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--blue);transition:width .5s var(--ease)}
.goals li:hover{padding-left:3.7rem}
.goals li:hover::after{width:100%}
.goals p{margin-top:.4rem;font-size:.96rem}

/* ---------- Tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft)}
.tile{background:var(--paper);padding:2.1rem 1.75rem;display:flex;flex-direction:column;gap:.7rem;
  position:relative;transition:background .4s var(--ease)}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tile:hover{background:var(--paper-alt)}
.tile:hover::after{transform:scaleX(1)}
.tile-n{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--blue-deep)}
.tile p{font-size:.95rem}

/* ---------- Perks ---------- */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2.2rem)}
.perk{padding-top:1.3rem;border-top:3px solid var(--blue)}
.perk h3{min-height:0}
.perk p{margin-top:.6rem;font-size:.96rem;min-height:6.5em}

/* ---------- Timeline ---------- */
.timeline{display:grid;gap:1.4rem}
.timeline-rail{display:flex;gap:.5rem;flex-wrap:wrap}
.phase{font:inherit;text-align:left;cursor:pointer;flex:1 1 160px;padding:.95rem 1.15rem;
  border:1px solid var(--line);background:var(--paper);border-radius:12px;
  display:flex;flex-direction:column;gap:.2rem;color:var(--ink-mid);
  transition:border-color .32s var(--ease),background-color .32s var(--ease),
             transform .32s var(--ease),box-shadow .32s var(--ease)}
.phase-n{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.phase-name{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--ink);transition:color .3s}
.phase:hover{border-color:var(--blue);transform:translateY(-3px)}
.phase.is-active{background:var(--blue);border-color:var(--blue)}
.phase.is-active .phase-n{color:rgba(46,46,46,.62)}
.timeline-panel{display:grid;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem)}
.panel-body{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.panel-body.is-swapping{opacity:0;transform:translateY(10px)}
.panel-n{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-deep);margin-bottom:.5rem}
.panel-body h3{font-size:1.65rem}
.panel-body>p:last-child{margin-top:.9rem;min-height:4.8em;max-width:70ch}

/* ---------- Stimmen ----------
   Keine abgerundeten Kaertchen: harte Kanten, eine angeschnittene Ecke oben
   rechts wie an den Abschnittskanten, und eine kraeftige Kante links in
   Markenfarbe. Alle Karten sind exakt gleich hoch, damit Ober- und
   Unterkanten im laufenden Band eine durchgehende Linie bilden. */
.quote-rail{position:relative;overflow:hidden;
  margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
  padding-block:.2rem 1.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.no-gsap .quote-rail{overflow-x:auto;scrollbar-width:thin}
.quote-track{display:flex;align-items:stretch;gap:1px;width:max-content;will-change:transform}

.quote{
  --cut:22px;
  flex:0 0 auto;width:clamp(255px,24vw,320px);height:var(--quote-h,318px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.7rem 1.5rem 1.5rem;
  background:var(--paper-alt);border:0;border-radius:0;
  border-left:4px solid var(--blue-deep);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background .35s var(--ease)
}
.quote:hover{background:#e8f5fb}
.quote p{color:var(--ink);font-size:1rem;line-height:1.55;margin:0}
.quote footer{display:flex;align-items:center;gap:.7rem;
  padding-top:.9rem;border-top:1px solid var(--blue-line)}
.quote footer::after{content:"Google Rezension";font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.quote footer .q-stars{display:inline-flex;gap:1px}
.quote footer .q-stars svg{width:13px;height:13px;fill:var(--blue-deep)}

@media (max-width:640px){
  .quote{--quote-h:322px;width:clamp(255px,80vw,300px);padding:1.5rem 1.3rem 1.35rem}
  .quote p{font-size:.97rem;line-height:1.5}
}

/* ---------- Split / Coach ---------- */
.split{display:grid;grid-template-columns:.52fr 1.48fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split figure{margin:0}
.split p{margin-top:1.1rem}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:860px;margin-inline:auto}
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;transition:color .25s}
.faq summary:hover{color:var(--blue-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--blue-deep);border-bottom:2px solid var(--blue-deep);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .32s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details>div{overflow:hidden;animation:openIn .4s var(--ease)}
.faq details p{padding-bottom:1.5rem;font-size:.97rem;max-width:64ch}
@keyframes openIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- CTA ---------- */
.cta{background:var(--paper-alt);clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%);
  padding:clamp(5.5rem,10vw,9rem) var(--gut) clamp(4rem,8vw,6.5rem);text-align:center}
.cta-inner{max-width:680px;margin-inline:auto}
.day-one{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.7rem;
  font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.4vw,1.5rem);
  letter-spacing:-.02em;color:var(--ink-soft);margin-bottom:1.6rem}
.day-one .or{font-size:.8em;font-weight:400;color:var(--ink-soft)}
.day-one .accent{color:var(--blue-deep)}
.cta p{margin:1.2rem auto 0}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.3rem}

/* ---------- Footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line-soft)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:3rem var(--gut) 2rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem;font-size:.9rem}
.footer-brand{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.footer-logo{height:64px;width:auto;margin-bottom:.7rem}
.footer-brand span{color:var(--ink-soft);font-size:.85rem}
.footer h4{margin-bottom:.9rem}
.footer a{display:block;color:var(--ink-mid);text-decoration:none;padding:.22rem 0;transition:color .2s}
.footer a:hover{color:var(--blue-deep)}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:1.2rem var(--gut) 2rem;
  border-top:1px solid var(--line-soft);color:var(--ink-soft)}

/* ---------- Sticky CTA (mobil) ---------- */
.sticky-cta{
  position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:110;
  display:none;align-items:center;justify-content:center;text-align:center;
  padding:.95rem 1.2rem;border-radius:999px;background:var(--blue-deep);color:#fff;
  font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(16,112,141,.75);
  transform:translateY(140%);transition:transform .45s var(--ease)
}
.sticky-cta.is-shown{transform:none}

/* ---------- Touch: Ziele auf mindestens 44 px ---------- */
@media (pointer:coarse){
  .nav-links a{padding-block:.62rem;min-height:44px;display:flex;align-items:center}
  .footer a{padding-block:.6rem;min-height:44px;display:flex;align-items:center}
  .brand{min-height:44px}
  .faq summary{padding-block:1.45rem}
  /* Hover-Effekte, die auf Touch nur kleben bleiben, abschalten */
  .btn:hover,.quote:hover,.phase:hover,.goals li:hover,.rating:hover{transform:none}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .two-col,.split{grid-template-columns:1fr}
  .tiles,.perks{grid-template-columns:repeat(2,1fr)}
  .col-sticky{position:static}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
/* iPad hoch: Kacheln und Vorteile zweispaltig, Hero noch nebeneinander */
@media (max-width:900px) and (min-width:821px){
  .hero{grid-template-columns:1.2fr .8fr;gap:2rem}
  h1{font-size:clamp(2.6rem,7vw,3.6rem)}
}

@media (max-width:820px){
  /* Navigation bricht hier auf zwei Zeilen um -> Sprungziele tiefer ansetzen */
  section[id],main[id]{scroll-margin-top:128px}
  /* Antippziele auf mindestens 44 px bringen */
  .nav-links{gap:.35rem}
  .nav-links a{padding:.62rem .55rem;min-height:44px;display:flex;align-items:center}
  .nav-links a::after{bottom:.35rem;left:.55rem;right:.55rem}
  .footer a{padding:.6rem 0;min-height:44px;display:flex;align-items:center}
  .brand{min-height:44px}
  .faq summary{padding-block:1.45rem}
  /* Kleinschrift nicht unter 12 px */
  .stat dt{font-size:.78rem}
  .tile-n,.phase-n,.panel-n{font-size:.76rem}
  .rating-text{font-size:.88rem}
  .media-frame::after{font-size:.74rem}

  /* Hero bleibt auch auf dem Handy zweispaltig: Bild steht neben der Headline,
     Lead, Buttons und Bewertung laufen darunter ueber die volle Breite */
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(118px,45%);
    column-gap:clamp(.8rem,3vw,1.6rem);row-gap:0;
    padding-top:1.7rem;align-items:start
  }
  .hero-inner{display:contents}
  .eyebrow{grid-column:1/-1;grid-row:1;margin-bottom:1rem}
  .hero-title-zoom{grid-column:1;grid-row:2;align-self:center}
  .hero-media{grid-column:2;grid-row:2;align-self:center;margin:0;max-width:none}
  .lead{grid-column:1/-1;grid-row:3;margin:1.5rem 0 1.7rem;max-width:none}
  .hero-cta{grid-column:1/-1;grid-row:4}
  .rating{grid-column:1/-1;grid-row:5;justify-self:start;margin-top:1.3rem}
  h1{font-size:clamp(2.2rem,9.4vw,3.4rem)}
  /* Kuerzere Zeilen lassen der Zoom-Animation Luft nach rechts */
  h2{max-width:14ch}
  .nav{flex-wrap:wrap;row-gap:.65rem}
  .nav-links{order:3;width:100%;gap:1.35rem;overflow-x:auto;scrollbar-width:none;font-size:.88rem;padding-bottom:.15rem}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
  .cut-top{--cut:5vw}
  .cta{clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%)}
  .panel-body>p:last-child{min-height:0}
  .sticky-cta{display:flex}
  main{padding-bottom:4.5rem}
}
@media (max-width:640px){
  .brand-word-mark{display:none}
}
@media (max-width:520px){
  body{font-size:16px}
  .marquee-track{font-size:.86rem;gap:1.4rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tiles,.perks{grid-template-columns:1fr}
  .perk p{min-height:0}
  .footer-inner{grid-template-columns:1fr}
  .tile{padding:1.7rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .curtain{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero-title .line>span{transform:none;opacity:1;animation:none}
  .stars svg{opacity:1;transform:none}
  .sticky-cta{transform:none}
}

/* ==========================================================================
   Das Prinzip: ein Jahr, zwei Wege
   ========================================================================== */
.lab-head{max-width:none;margin-bottom:2.6rem}
.lab-head .sub{margin-top:1.1rem;max-width:54ch}
.lab-body{
  background:linear-gradient(150deg,var(--paper-alt) 0%,var(--paper) 62%);
  border:1px solid var(--blue-line);border-radius:var(--r);
  padding:clamp(1.4rem,3.4vw,2.4rem)
}

/* Schalter: zwei Knoepfe, einer ist an */
.lab-switch{display:inline-flex;flex-wrap:wrap;gap:.4rem;padding:.35rem;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:999px}
.lab-opt{
  font:inherit;font-family:var(--display);font-weight:700;font-size:.92rem;
  min-height:44px;padding:.6rem 1.25rem;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink-mid);transition:background .25s,color .25s
}
.lab-opt.is-on{background:var(--blue);color:var(--ink)}
.lab-opt:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}

/* Das Jahr: zwoelf Balken */
.lab-year{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,1vw,9px);
  align-items:end;margin:2rem 0 1.5rem}
.lab-month{display:grid;gap:.5rem;justify-items:center}
.lab-bar{width:100%;height:clamp(52px,9vw,96px);border-radius:7px;background:var(--blue);
  transition:height .5s var(--ease),background .5s var(--ease),opacity .5s var(--ease),
             border-color .5s var(--ease)}
.lab-m{font-size:.8rem;font-family:var(--display);font-weight:700;color:var(--ink-soft)}

/* Ohne Mindeststandard: die schwierigen Monate fallen ganz aus */
.lab-year[data-mode="ohne"] .is-hard .lab-bar{
  background:transparent;border:1.5px dashed var(--line)}
.lab-year[data-mode="ohne"] .is-hard .lab-m{color:var(--ink-soft);opacity:.55}
/* Mit Mindeststandard: sie werden kleiner, fallen aber nicht aus */
.lab-year[data-mode="mit"] .is-hard .lab-bar{
  height:clamp(22px,3.6vw,38px);background:var(--blue);opacity:.62}

.lab-line{font-size:clamp(1.02rem,2vw,1.3rem);color:var(--ink-mid)}
.lab-line b{font-family:var(--display);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.lab-line b.good{color:var(--blue-deep)}

.lab-note{margin-top:1.6rem;padding-left:1.1rem;border-left:3px solid var(--blue);
  font-size:.94rem;line-height:1.6;color:var(--ink-mid);max-width:72ch}

@media (max-width:420px){
  .lab-year{gap:3px}
  .lab-bar{border-radius:5px}
  .lab-m{font-size:.75rem}
  .lab-switch{width:100%}
  .lab-opt{flex:1 1 auto;padding-inline:.7rem;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .lab-bar{transition:none}
}

.quotes-cta{margin-top:1.8rem}

/* ---------- Fotos ---------- */


/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* Laufband wird von GSAP bewegt, sobald es geladen ist */
.js-gsap .marquee-track{animation:none}

/* ==========================================================================
   Fotos — jedes bekommt eine eigene Behandlung statt dreimal derselbe Kasten
   ========================================================================== */

/* 1 — Hero: laeuft randlos aus dem Raster bis an den Bildschirmrand,
   die linke Kante folgt der Neigung der Bildmarke */
.hero-media{
  position:relative;z-index:1;
  display:grid;align-items:start;
  margin:0;
  margin-right:calc(-1 * (max(0px,(100vw - var(--maxw)) / 2) + var(--gut)));
  align-self:stretch
}
.hero-media img{grid-area:1/1}
/* Beim Laden schiebt sich diese Flaeche vom Foto herunter und gibt es frei.
   Sie liegt in derselben Rasterzelle wie das Bild, deckt also genau seine
   Flaeche ab und nicht mehr. */
.hero-wipe{
  grid-area:1/1;align-self:stretch;z-index:2;
  background:var(--blue);pointer-events:none;
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  transform:scaleY(0);transform-origin:bottom
}
.hero-media img{
  width:100%;height:auto;max-height:58vh;object-fit:cover;object-position:58% 22%;
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  will-change:transform
}

/* 2 — Coach: versetzt, mit einer Flaeche in Markenfarbe dahinter */
.coach-media{position:relative;margin:0;max-width:340px;justify-self:center}
.coach-media img{
  position:relative;z-index:1;width:100%;height:auto;border-radius:2px;
  clip-path:polygon(0 0,100% 0,100% 92%,0 100%)
}
.coach-shape{
  position:absolute;z-index:0;left:-1.6rem;top:1.6rem;right:1.6rem;bottom:-1.6rem;
  background:var(--blue);opacity:.35;
  clip-path:polygon(0 0,100% 0,100% 92%,0 100%)
}

/* 3 — Abschluss-CTA: Foto als Hintergrund, nach rechts gerueckt und aufgehellt */
.cta{position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-bg img{
  position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:none;
  object-fit:cover;opacity:.9;
  -webkit-mask-image:linear-gradient(100deg,transparent 12%,#000 62%);
  mask-image:linear-gradient(100deg,transparent 12%,#000 62%);
  will-change:transform
}
.cta-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,var(--paper-alt) 44%,rgba(241,248,251,.85) 60%,rgba(241,248,251,.35) 100%)
}
.cta-inner{position:relative;z-index:1}

/* 3D-Neigung unter der Maus */
.tilt-3d{transform-style:preserve-3d;will-change:transform}

@media (max-width:980px){
  .coach-media{max-width:300px}
}
@media (max-width:820px){
  /* Auch auf dem Handy laeuft das Foto randlos bis an den rechten
     Bildschirmrand, die linke Kante bleibt schraeg wie am Desktop.
     Der negative Aussenabstand der Grundregel ergibt hier genau die
     Randbreite, deshalb wird er nicht zurueckgesetzt. */
  .hero-media img{max-height:none;aspect-ratio:3/4.1;object-position:56% 16%;
    clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);border-radius:0}
  .hero-wipe{clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}
  .coach-media{max-width:260px;justify-self:start}
  .coach-shape{left:-1rem;top:1rem;right:1rem;bottom:-1rem}
  .cta-bg img{height:100%;opacity:.55}
}

/* ==========================================================================
   Wort-Animation der Überschriften
   ========================================================================== */
.word{display:inline-block;will-change:transform}
.word-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}

/* ==========================================================================
   Worauf wartest du
   ========================================================================== */
.wait-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.wait-media{margin:0;position:relative}
.wait-media img{
  width:100%;height:auto;border-radius:2px;
  clip-path:polygon(0 0,100% 6%,100% 100%,0 94%);
  will-change:transform
}
.wait-media::before{
  content:"";position:absolute;inset:auto -1.4rem -1.4rem 1.4rem;height:70%;z-index:-1;
  background:var(--blue);opacity:.3;
  clip-path:polygon(0 0,100% 6%,100% 100%,0 94%)
}
.wait-media.is-empty{
  aspect-ratio:6/7;background:var(--paper);border:1px dashed var(--line);
  display:grid;place-items:center;border-radius:2px
}
.wait-media.is-empty::before{display:none}
.wait-media.is-empty::after{
  content:"img/aaron-call.jpg";font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)
}
.wait-lead{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink);font-weight:500;
  max-width:36ch;position:relative;padding-left:1.1rem}
.wait-lead::before{content:"";position:absolute;left:0;top:.42em;bottom:.42em;width:3px;
  background:var(--blue);border-radius:2px}
.wait-body>*+*{margin-top:1.1rem}
.wait-body h2{margin-top:1.4rem;margin-bottom:.4rem}
.wait-body .btn{margin-top:1rem}

/* Kalender an der Bildstelle. Er laedt erst auf Klick — bis dahin steht hier
   eine eigene Karte, die die Hoehe des Kastens vorgibt. Sobald Calendly seine
   Hoehe meldet, setzt das Skript sie als feste Hoehe. */
.wait-grid.has-cal{grid-template-columns:1.02fr .98fr;align-items:start}
.wait-cal{
  position:relative;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:0 30px 70px -44px rgba(46,46,46,.45)
}
.wait-cal.is-loading,.wait-cal.is-ready{min-height:620px}

.wait-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .5s var(--ease)}
.wait-cal.is-ready .wait-frame{opacity:1}

.cal-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.9rem;text-align:center;padding:3.4rem 1.7rem;
  background:linear-gradient(170deg,var(--paper) 42%,var(--paper-alt) 100%)
}
.wait-cal.is-loading .cal-card{position:absolute;inset:0}
.wait-cal.is-ready .cal-card{display:none}
/* Waehrend der Kalender laedt, wartet der Knopf */
.wait-cal.is-loading #cal-load{opacity:.55;pointer-events:none}

.cal-mark{width:104px;height:auto;margin-bottom:.3rem}
.cal-kicker{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.cal-meta{font-size:.94rem;color:var(--ink-mid)}
.cal-note{font-size:.82rem;line-height:1.5;color:var(--ink-soft);max-width:38ch}
.cal-note a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.cal-alt{font-size:.84rem}
.cal-alt a{color:var(--ink-mid);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .wait-grid{grid-template-columns:1fr;gap:2rem}
  .wait-media{max-width:340px}
  .wait-grid.has-cal{grid-template-columns:1fr}
  .wait-grid.has-cal .wait-body{order:-1}
  /* Auf schmalen Schirmen stapelt Calendly Kalender und Uhrzeiten -> mehr Hoehe */
  .wait-cal.is-loading,.wait-cal.is-ready{min-height:940px}
}

/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz, AGB)
   ========================================================================== */
.legal{max-width:78ch;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(3rem,7vw,5rem)}
.legal .back{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-deep)}
.legal h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1;margin:.6rem 0 .4rem;max-width:20ch}
.legal .stand{font-size:.88rem;color:var(--ink-soft);margin-bottom:2.6rem}
.legal h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;max-width:none;width:auto;
  margin:2.8rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line-soft)}
.legal h3{font-size:1.02rem;margin:1.7rem 0 .5rem}
.legal p,.legal li{color:var(--ink-mid)}
.legal p+p{margin-top:.85rem}
.legal ul,.legal ol{margin:.7rem 0 .7rem 1.1rem;display:grid;gap:.45rem}
.legal li{padding-left:.2rem}
.legal a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.legal address{font-style:normal;line-height:1.75}
.legal .box{background:var(--paper-alt);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:1.4rem 1.5rem;margin:1.4rem 0}
.legal .box p:first-child{margin-top:0}
.todo{background:#fff3c4;color:#6b4e00;font-weight:600;padding:.12em .42em;
  border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.legal-foot{border-top:1px solid var(--line-soft);padding:2rem var(--gut) 3rem;text-align:center}
.legal-foot a{margin:0 .7rem;font-size:.9rem;color:var(--ink-mid);
  display:inline-flex;align-items:center;min-height:44px}


/* ==========================================================================
   Auftakt: zwei Flaechen teilen sich entlang der Neigung der Bildmarke
   ========================================================================== */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none}
.curtain-plate{position:absolute;inset:0;background:var(--ink);will-change:transform}
.curtain-top{clip-path:polygon(0 0,100% 0,100% 46%,0 62%)}
.curtain-bot{clip-path:polygon(0 62%,100% 46%,100% 100%,0 100%)}
.curtain-mark{
  position:absolute;left:50%;top:40%;translate:-50% -50%;
  width:min(46vw,250px);height:auto;opacity:0
}
.curtain-skip{
  position:absolute;left:50%;bottom:clamp(1.6rem,5vh,3rem);translate:-50% 0;opacity:0;
  font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5)
}