/* Coaching-Landingpage v6 hell (15.10.2026): Aufbau und Einfachheit der echten v3 (weiß, Markenblau, Archivo,
   rechte Winkel, 2-px-Linien, Bauchbinde), dazu die guten Teile aus v5 (CHECK, Ablauf-Linie, Kurz zu mir, FAQ).
   Keine dunklen Flächen. Teil 1 Basis (gilt immer, auch ohne JS). Teil 2 Bewegung, nur mit html.fx, ruhig. */

@font-face{font-family:Archivo;src:url(fonts/archivo-vf.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --blue:#1E63FF; --blue-d:#0F45C8; --blue-h:#1550D6; --navy:#0A0E27; --mist:#EEF1F7; --line:#D6DCEA;
  --ink2:#454B63; --pale:#DCE6FF;
  --disp:Archivo,'Arial Narrow',sans-serif; --body:Archivo,system-ui,sans-serif;
  --head:58px; --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1); --calm:cubic-bezier(.33,0,.15,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--head);scrollbar-color:var(--blue) var(--mist);background:#fff}
body{margin:0;background:#fff;color:var(--navy);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero :focus-visible,.check-head :focus-visible{outline-color:#fff}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--disp);font-weight:800;font-stretch:115%;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(2.1rem,6vw,4.4rem)}
p{text-wrap:pretty}


/* Knopf: blaues Rechteck, angesetztes Feld für den Pfeil (v3) */
.btn{display:inline-flex;align-items:stretch;min-height:58px;max-width:100%;background:var(--blue);color:#fff;text-decoration:none;font:700 1.0625rem/1.15 var(--disp);font-stretch:110%;letter-spacing:-.005em;transition:transform .15s var(--ease),background-color .2s}
.btn span{display:flex;align-items:center;padding:12px 18px 12px 22px}
.btn i{display:grid;place-items:center;width:58px;flex:none;background:var(--blue-d)}
.btn i svg{width:22px;height:22px;fill:currentColor;transition:transform .3s var(--ease)}
.btn:hover{background:var(--blue-h)}
.btn:hover i svg{transform:translate(3px,-3px)}
.btn:active{transform:translateY(2px)}
.btn-inv{background:#fff;color:var(--navy)}
.btn-inv:hover{background:var(--mist)}
.btn-inv i{background:var(--navy);color:#fff}
.btn-wide{display:flex;width:100%;justify-content:space-between}

/* Kopfzeile */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--head);display:flex;align-items:center;background:#fff;border-bottom:2px solid var(--navy)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{display:inline-flex;align-items:center;min-height:44px;font:800 1.08rem/1 var(--disp);font-stretch:120%;letter-spacing:-.01em;text-decoration:none;color:var(--navy);white-space:nowrap}
.top-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--blue);color:#fff;font:700 .9rem/1 var(--disp);font-stretch:110%;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.top-cta:hover{background:var(--blue-h)}

/* 1 Hero: Blaufläche (v3). Handy: Text und Knopf zuerst, darunter das ganze Foto. Desktop: zwei Spalten. */
.hero{background:var(--blue);color:#fff;padding-top:var(--head);display:grid}
.hero-copy{padding:24px var(--gut) 30px}
.kicker{font:700 .95rem/1.4 var(--disp);font-stretch:108%;color:#fff;margin-bottom:12px;max-width:34em}
h1{font-size:clamp(1.9rem,7.6vw,4.6rem);font-stretch:112%;line-height:1.04;letter-spacing:-.03em}
.hl{text-decoration:underline;text-decoration-color:var(--navy);text-decoration-thickness:.11em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.lede{margin:16px 0 20px;font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.55;max-width:32em}
.cta-note{margin-top:10px;font-size:.9rem;line-height:1.45;max-width:30em;color:#fff}
.hero-photo{position:relative;margin:0 var(--gut) 40px;background:var(--navy)}
.hero-photo img{width:100%;height:auto}
.claim{display:block;background:var(--navy);color:#fff;font:700 clamp(.98rem,3.7vw,1.3rem)/1.2 var(--disp);font-stretch:112%;padding:.62em .9em .66em}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;min-height:100svh}
  .hero-copy{padding:clamp(40px,5vw,80px) clamp(28px,4vw,64px) clamp(40px,5vw,80px) max(var(--gut),calc((100vw - 1320px) / 2 + var(--gut)))}
  .hero-photo{margin:clamp(24px,3vw,48px) max(var(--gut),calc((100vw - 1320px) / 2 + var(--gut))) clamp(24px,3vw,48px) 0;justify-self:end;width:min(100%,calc((100svh - var(--head) - 120px) * .7745))}
  h1{font-size:clamp(2.6rem,4.4vw,4.6rem)}
  .kicker{font-size:1.05rem}
}

/* 2 Du bist hier genau richtig (v3) */
.fit{background:#fff;padding-block:clamp(80px,11vw,150px)}
.fit-h{font-size:clamp(1.9rem,5vw,3.6rem);font-stretch:115%;line-height:1.12;color:var(--blue);margin-bottom:.8em}
.fit-list li{font:780 clamp(1.4rem,3.6vw,2.6rem)/1.34 var(--disp);font-stretch:106%;letter-spacing:-.025em;padding:.45em 0 .5em;border-top:2px solid var(--navy);text-wrap:balance;max-width:24ch}
.fit-list li:last-child{border-bottom:2px solid var(--navy)}
.dots{color:var(--blue)}
@media (min-width:900px){
  .fit .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
  .fit-h{margin:0;padding-top:.3em}
  .fit-list li{max-width:none}
}

/* 3 Armin (v3, hell) */
.armin{background:var(--mist);padding-block:clamp(84px,11vw,150px)}
.armin-k{font:900 clamp(2.5rem,10.4vw,4.2rem)/.9 var(--disp);font-stretch:125%;letter-spacing:-.035em;color:var(--blue)}
@media (min-width:760px){.armin-k{font-size:clamp(3.4rem,6.6vw,6.4rem)}}
.armin-h{font-size:clamp(1.5rem,3.4vw,2.7rem);font-stretch:110%;max-width:22ch;margin:.7em 0 1.4em;line-height:1.12}
.armin-grid{display:grid;gap:36px}
.armin-copy h3{font-size:1.2rem;font-stretch:118%;margin-bottom:.45em}
.armin-copy p{color:var(--ink2);max-width:40em}
.armin-copy .rv + .rv,.armin-copy .rv + p{margin-top:1.6em}
.armin-pics{display:grid;gap:6px;margin-inline:calc(var(--gut) * -1)}
.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--line)}
.ph{position:relative;overflow:hidden}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 32%}
.pair::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--blue);z-index:2}
.ptag{position:absolute;top:10px;left:10px;z-index:3;font:700 .8rem/1 var(--disp);font-stretch:110%;padding:7px 9px;background:#fff;color:var(--navy)}
.ptag.hi{left:auto;right:10px;background:var(--blue);color:#fff}
.armin-result{font:800 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--disp);font-stretch:112%;letter-spacing:-.02em;color:var(--navy)!important;padding-top:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M1 0v16M13 0v7M25 0v7M37 0v7M49 0v7' stroke='%231E63FF' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0/60px 16px}
.armin-small{font-size:.95rem;line-height:1.55}
@media (min-width:900px){
  .armin-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px) clamp(40px,5vw,80px);align-items:start}
  .armin-pics{margin-inline:0;grid-column:1;grid-row:1 / span 2}
  .armin-copy-a{grid-column:2;grid-row:1}
  .armin-copy-b{grid-column:2;grid-row:2}
}

/* 4 Kurz zu mir */
.me{background:#fff;padding-block:clamp(84px,11vw,150px)}
.me-grid{display:grid;gap:40px}
.ba{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--mist);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ba .after{clip-path:inset(0 0 0 var(--p,50%))}
.ba-knob{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:var(--blue);z-index:3;pointer-events:none}
.ba-knob::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/22px no-repeat}
.ba-tag{position:absolute;top:12px;z-index:3;font:700 .8rem/1 var(--disp);font-stretch:110%;padding:7px 9px;background:#fff;color:var(--navy)}
.ba-tag.l{left:12px}.ba-tag.r{right:12px;background:var(--blue);color:#fff}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.eyebrow{font:800 1rem/1.3 var(--disp);font-stretch:118%;color:var(--blue);margin-bottom:.6em}
.me-copy h2{margin-bottom:.45em}
.me-fact{font:760 clamp(1.2rem,2vw,1.55rem)/1.35 var(--disp);font-stretch:106%;letter-spacing:-.015em;margin-bottom:1.4em;max-width:26em}
.me-line{position:relative;padding-left:30px;display:grid;gap:1.1em}
.line{position:absolute;left:5px;top:.5em;bottom:.5em;width:2px;background:var(--line)}
.line b{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(var(--lf,1))}
.me-text{position:relative;font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.6;max-width:34em;color:var(--ink2)}
.me-text::before{content:"";position:absolute;left:-30px;top:.5em;width:12px;height:12px;background:#fff;border:2px solid var(--blue)}
@media (min-width:900px){.me-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(40px,6vw,110px)}}

/* 5 So läuft die Betreuung ab: Linie mit Haltepunkten */
.weg{background:var(--mist);padding-block:clamp(84px,11vw,150px)}
.weg-grid{display:grid;gap:36px}
.weg-side h2{max-width:12ch}
.weg-intro{margin-top:18px;color:var(--ink2);max-width:30em}
.path{position:relative;padding-left:34px;display:grid;gap:12px}
.path::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:3px;background:var(--blue);transform-origin:top;transform:scaleY(var(--pl,1))}
.stop{position:relative;background:#fff;border:2px solid var(--navy);padding:18px 18px 20px}
.stop::before{content:"";position:absolute;left:-34px;top:22px;width:18px;height:18px;background:var(--blue);border:3px solid var(--blue);box-shadow:0 0 0 4px var(--mist);transition:background-color .5s var(--calm)}
.when{display:inline-block;background:var(--navy);color:#fff;font:800 .86rem/1.3 var(--disp);font-stretch:112%;padding:.45em .65em .5em}
.stop h3{font-size:clamp(1.35rem,2vw,1.65rem);font-stretch:112%;margin:.55em 0 .4em}
.stop p:not(.when){color:var(--ink2)}
.stop p.key{font:780 clamp(1.15rem,1.7vw,1.4rem)/1.35 var(--disp);font-stretch:106%;letter-spacing:-.01em;color:var(--navy);margin-bottom:.7em}
.stop-key{background:var(--blue);border-color:var(--blue);color:#fff}
.stop-key .when{background:#fff;color:var(--navy)}
.stop-key p:not(.when):not(.key){color:#fff}
.stop-key p.key{color:#fff}
.stop-vid{margin-top:16px;overflow:hidden;aspect-ratio:10/7;background:var(--navy);max-width:420px}
.stop-vid video{width:100%;height:100%;object-fit:cover}
.wk{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:16px}
.wk i{height:10px;background:var(--line)}
.wk i.on{background:var(--blue)}
.stop-key .wk i{background:rgba(255,255,255,.3)}
.stop-key .wk i.on{background:#fff}
.cap{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:2px solid var(--navy);max-width:40em;font:700 clamp(1.1rem,1.7vw,1.35rem)/1.4 var(--disp);font-stretch:106%}
@media (min-width:1000px){
  .weg-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .weg-side{position:sticky;top:calc(var(--head) + 40px)}
  .path{padding-left:48px}.path::before{left:13px}.stop::before{left:-45px;width:22px;height:22px}
  .cap{margin-left:calc(5 / 12 * 100% + 26px)}
}

/* 6 CHECK: Blaufläche */
.check{background:var(--blue);color:#fff;padding-block:clamp(80px,10vw,140px)}
.check-in{display:grid;gap:32px}
.check-head h2{font-size:clamp(2.6rem,9vw,6rem);font-stretch:118%;line-height:.98}
.check-head p{margin-top:.8em;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;max-width:24em}
.check-card{background:#fff;color:var(--navy);padding:clamp(20px,3.4vw,40px);margin-inline:calc(var(--gut) * -1)}
.days{display:grid;margin-bottom:24px}
.days li{display:grid;grid-template-columns:6.6em 1fr;gap:14px;padding:16px 0;border-top:2px solid var(--navy)}
.days li:last-child{border-bottom:2px solid var(--navy)}
.days b{font:800 .95rem/1.4 var(--disp);font-stretch:112%;color:var(--blue);padding-top:.1em}
.days span{font-size:1.02rem;line-height:1.5}
.dbar{grid-column:2;display:grid!important;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.dbar i{height:8px;background:var(--blue)}
.check-note{margin-top:14px;font-size:.92rem;line-height:1.5;color:var(--ink2)}
.check-note a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.check-next{margin-top:18px;padding-top:16px;border-top:2px solid var(--line);font-size:.98rem;line-height:1.55}
@media (min-width:600px){.check-card{margin-inline:0}}
@media (min-width:1000px){.check-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.check-head{position:sticky;top:calc(var(--head) + 40px)}}

/* 7 Fragen (v3-Aufbau, hell) */
.faq{background:#fff;padding-block:clamp(84px,11vw,150px)}
.faq-grid{display:grid;gap:36px}
.faq h2{font-size:clamp(2rem,4vw,3.1rem);font-stretch:112%;max-width:14ch}
.qa{border-top:2px solid var(--navy)}
.qa:last-child{border-bottom:2px solid var(--navy)}
.qa h3{font:inherit;letter-spacing:0}
.qa button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:16px 0;background:none;border:0;color:var(--navy);text-align:left;cursor:pointer;font:650 clamp(1.06rem,1.5vw,1.25rem)/1.35 var(--body)}
.qa button i{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--blue);color:#fff;transition:background-color .2s}
.qa button i svg{width:20px;height:20px;fill:currentColor;transition:transform .35s var(--ease)}
.qa button:hover i{background:var(--blue-h)}
.qa button[aria-expanded="true"] i{background:var(--navy)}
.qa button[aria-expanded="true"] i svg{transform:rotate(45deg)}
.ans p{color:var(--ink2);padding:0 56px 24px 0;max-width:60ch}
@media (min-width:1000px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .faq h2{position:sticky;top:calc(var(--head) + 40px)}
}

/* 8 Schluss */
.end{background:var(--mist);padding-block:clamp(64px,8vw,110px)}
.end-in{display:grid;gap:26px;justify-items:start}
.end-h{max-width:20ch;font:850 clamp(1.8rem,4.6vw,3.6rem)/1.15 var(--disp);font-stretch:110%;letter-spacing:-.025em;text-wrap:balance}

/* Fuß (hell) */
.foot{background:#fff;border-top:2px solid var(--navy);overflow:hidden;padding:clamp(48px,7vw,90px) 0 calc(36px + 58px + env(safe-area-inset-bottom))}
.foot-mark{font:900 clamp(2.4rem,10vw,9rem)/.9 var(--disp);font-stretch:125%;letter-spacing:-.045em;color:var(--blue);white-space:nowrap}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:clamp(24px,4vw,44px);align-items:center}
.foot-links a,.fxbtn{min-height:44px;display:inline-flex;align-items:center;font:600 .98rem/1 var(--body);color:var(--navy);text-decoration:none;border-bottom:2px solid transparent}
.foot-links a:hover{border-color:var(--blue)}
.fxbtn{background:none;border:0;border-bottom:2px solid transparent;padding:0;cursor:pointer;color:var(--ink2);margin-left:auto}
.fxbtn:hover{color:var(--navy)}
.fxbtn[hidden]{display:none}

/* Feste Leiste */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--blue);color:#fff;text-decoration:none;font:700 1.0625rem/1 var(--disp);font-stretch:112%;border-top:2px solid var(--navy);transform:translateY(110%);transition:transform .35s var(--ease);visibility:hidden}
.dock.show{transform:none;visibility:visible}
.dock:hover{background:var(--blue-h)}
.dock:focus-visible{outline-color:#fff;outline-offset:-6px}

/* Rechtstexte als Überlagerung (ohne JS über :target) */
.legal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:rgba(10,14,39,.6)}
.legal.open,html:not(.js) .legal:has(.legal-doc:target){display:flex}
.legal-panel{width:100%;max-width:780px;max-height:86vh;display:flex;flex-direction:column;background:#fff}
.legal-bar{display:flex;align-items:center;gap:14px;padding:16px clamp(20px,4vw,40px);border-bottom:2px solid var(--navy)}
.legal-bar h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-stretch:112%}
.legal-x{margin-left:auto;flex:none;display:grid;place-items:center;width:48px;height:48px;background:var(--blue);color:#fff}
.legal-x svg{width:22px;height:22px;fill:currentColor}
.legal-x:hover{background:var(--blue-h)}
.legal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:clamp(20px,3vw,32px) clamp(20px,4vw,40px) 40px}
.legal-doc{display:none}
.legal-doc.cur,html:not(.js) .legal-doc:target{display:block}
.legal-doc > p:first-child{font-size:.9rem;color:var(--ink2);margin-bottom:22px}
.legal-doc h3{font-size:1.12rem;font-stretch:110%;color:var(--navy);margin:1.6em 0 .5em}
.legal-doc h3:first-of-type{margin-top:0}
.legal-doc h4{font:700 1rem/1.4 var(--body);margin:1.2em 0 .4em}
.legal-doc p,.legal-doc li{font-size:1rem;line-height:1.6;max-width:65ch}
.legal-doc p{margin-bottom:12px}
.legal-doc ul{list-style:disc;padding-left:22px;margin-bottom:12px;display:grid;gap:6px}
.legal-doc a{color:var(--blue)}
.legal-box{background:var(--mist);padding:clamp(18px,3vw,26px);margin:20px 0 14px}
.legal-box > p:last-child{font-size:.92rem;color:var(--ink2);margin:0}
/* Entwurfs-Markierung veralteter Rechtstexte (nur im Vorschau-Build) */
.legal-mark{margin:0 0 22px;padding:14px 16px;border:2px solid #B86E00;background:#FFF4E0}
.legal-mark p,.legal-mark li{font-size:.92rem!important;line-height:1.5;color:#5A3600}
.legal-mark p{margin:0 0 6px!important;font-weight:700}
@media (max-width:599px){.legal{padding:0;align-items:flex-end}.legal-panel{max-height:92vh}}

/* Körnung, leise: nur als Hintergrund der Flächen, nie über Fotos und nicht bei "Du bist hier genau richtig".
   Steht nach allen Abschnitten, weil deren background-Kurzschreibweise das Bild sonst zurücksetzt. grain-flaeche.png = grain.png mit 70 % Deckkraft. */
.top,.hero,.armin,.me,.weg,.check,.faq,.end,.foot,.dock{background-image:url(img/grain-flaeche.png);background-size:128px 128px}
/* Schritt-Kästen im Ablauf ausdrücklich ohne Körnung (Marko, 14.10.2026), der Abschnitt dahinter behält sie */
.stop{background-image:none}

/* Effekte aus: keine Übergänge */
html:not(.fx) *,html:not(.fx) *::before,html:not(.fx) *::after{transition-duration:0s!important;animation-duration:0s!important}

/* ---------------------------------------------------------------
   Teil 2: Bewegung (nur html.fx). Ruhig, kurze Wege. Kein Hero-Zoom.
   --------------------------------------------------------------- */
html.fx{scroll-behavior:smooth}
html.fx .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--calm),transform 1.2s var(--calm);transition-delay:calc(var(--d,0) * 110ms)}
html.fx .rv.in{opacity:1;transform:none}

/* Du bist hier genau richtig: Bühne, ein Punkt nach dem anderen (v3) */
html.fx .fit.pin{padding-block:0}
html.fx .fit.pin .fit-stick{height:200svh}
html.fx .fit.pin .fit-stick > .wrap{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--head)}
@media (min-width:900px){html.fx .fit.pin .fit-stick > .wrap{display:grid;align-content:center}}
html.fx .fit.pin .fit-list li{opacity:.3;transition:opacity .8s var(--calm)}
html.fx .fit.pin .fit-list li.on{opacity:1}

/* Armin: das Vorher-Bild steht, nur das Nachher-Bild wischt beim Scrollen über die Naht herein (v3) */
html.fx .pair .after{clip-path:inset(0 calc((1 - var(--w,0)) * 100%) 0 0)}
html.fx .pair::after{opacity:calc(.35 + var(--w,0) * .65)}
html.fx .pair .after .ptag{opacity:calc((var(--w,0) - .7) * 3.3)}

/* Ablauf: Linie zeichnet sich mit, Punkte füllen sich, Wochenfelder eines Halts nacheinander */
html.fx .path::before{transform:scaleY(var(--pl,0))}
html.fx .stop::before{background:#fff}
html.fx .stop.in::before{background:var(--blue)}
html.fx .wk i.on{background:var(--line);transition:background-color .6s var(--calm);transition-delay:calc(var(--k,0) * 70ms + 250ms)}
html.fx .stop-key .wk i.on{background:rgba(255,255,255,.3)}
html.fx .stop.in .wk i.on{background:var(--blue)}
html.fx .stop-key.in .wk i.on{background:#fff}

/* CHECK: die drei Tage füllen sich nacheinander */
html.fx .dbar i{background:var(--line);transition:background-color .7s var(--calm);transition-delay:calc(var(--k,0) * 380ms + 300ms)}
html.fx .days.in .dbar i{background:var(--blue)}

/* Kurz zu mir: Linie füllt sich, Wörter hellen auf */
html.fx [data-words] .w{opacity:.35;transition:opacity .45s}
html.fx [data-words] .w.on{opacity:1}