/* Black Belt Academy: shared styles of all subpages (homepage system + subpage components) */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* System "Gürtel": flat colour fields, square photos, ruled rows instead of boxes.
   Every section opens with the belt line (ink rule + short blue stripe) that draws itself in, then a headline whose words rise into place.
   One type family in three weights on a fixed scale. The dark-blue block with the blue arrow box is used for one thing only: Probetraining.
   Motion: load sequence in the hero, reveals on scroll, scroll-linked progress / parallax / step line, hover feedback. All of it stops under reduced motion. */
:root{
  --bg:#ffffff;
  --ink:#12213d;            /* headings, rules */
  --text:#33435e;
  --mute:#5d6c86;
  --rule:rgba(18,33,61,.16);
  --surface:#ffffff;        /* blocks that sit on a tinted ground */
  --soft:#ecf4ff;
  --soft-2:#dcebff;
  --blue:#007bff;           /* brand blue: stripe, numerals, arrow box */
  --blue-text:#0060cc;
  --cta:#0b3f96;            /* Probetraining only */
  --shade:rgba(9,36,88,.5); /* flat photo darkening */
  /* one ground per section */
  --c-about:#eef5ff;--c-warum:#ffffff;--c-kurse:#f4f8ff;--c-plan:#10295a;--c-probe:#d2e5ff;--c-stimmen:#ffffff;--c-trainer:#e8f0fb;--c-fees:#f6f9ff;--c-ort:#ffffff;--c-final:#e6f0ff;--foot:#f1f6fe;--c-blick:#e3ecfa;
  --hdr:#0f2347;            /* top bar and the ground under the hero clip */
  --hdr-rule:rgba(255,255,255,.16);
  /* type scale */
  --fs-s:15px;--fs-b:17px;--fs-l:19px;--fs-h3:22px;--fs-h3l:clamp(24px,2.5vw,30px);--fs-h2:clamp(30px,4.2vw,56px);--fs-h1:clamp(38px,4.7vw,66px);--fs-num:clamp(44px,5.6vw,80px);
  --f:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rad:14px;            /* controls, calendar slots */
  --rad-l:26px;          /* media and inner cores */
  --hair:rgba(18,33,61,.09);       /* hairline ring of a frame */
  --shell-bg:rgba(18,33,61,.045);  /* tray a frame sits in */
  --hi:rgba(255,255,255,.7);       /* top highlight of an inner core */
  --slot:#eef5ff;
  --wrap:1240px;
  --gutter:clamp(18px,4vw,48px);
  --bleed:calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter));
  --hdr-h:88px;
  --z-fab:85;--z-menu:90;--z-bar:100;--z-progress:200;--z-skip:300;
  --ease:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
:root[data-mode="dark"]{
  --bg:#18243c;--ink:#f2f6fd;--text:#c9d5e8;--mute:#9aaac4;--rule:rgba(255,255,255,.18);--surface:#243350;--soft:#22355a;--soft-2:#2a406c;
  --blue:#3b97ff;--blue-text:#8cc3ff;--cta:#1a66e8;--shade:rgba(8,22,52,.58);
  --c-about:#1c2a46;--c-warum:#18243c;--c-kurse:#1b2944;--c-plan:#12264f;--c-probe:#263c6a;--c-stimmen:#18243c;--c-trainer:#203450;--c-fees:#1c2b47;--c-ort:#18243c;--c-final:#1f3052;--foot:#141f34;--c-blick:#22314f;--hdr:#0e182d;--hair:rgba(255,255,255,.1);--shell-bg:rgba(255,255,255,.05);--hi:rgba(255,255,255,.1);--slot:#2c4170;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-b)/1.6 var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h3{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.15}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:12px;top:-80px;z-index:var(--z-skip);padding:12px 16px;background:var(--ink);color:var(--bg);font-weight:600;border-radius:var(--rad);transition:top .2s var(--ease)}
.skip:focus{top:12px}
main{position:relative;overflow-x:clip}
@supports not (overflow-x:clip){main{overflow-x:hidden}}

/* ---------- Probetraining: the only filled block ---------- */
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:stretch;min-height:56px;border-radius:var(--rad);overflow:hidden;background:var(--cta);color:#fff;font-weight:600;font-size:var(--fs-b);line-height:1.1;transition:transform .2s var(--ease),translate .35s var(--ease)}
.cta>span{display:flex;align-items:center;padding:0 22px;white-space:nowrap}
.cta>i{flex:none;display:grid;place-items:center;width:56px;background:var(--blue);transition:background .45s var(--ease)}
.cta svg{width:20px;height:20px}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 70%),var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1);transform-origin:left}
.cta:hover>i,.cta:focus-visible>i{background:var(--cta)}
.cta:hover svg,.cta:focus-visible svg{animation:arrowfly .6s cubic-bezier(.6,0,.2,1)}
@keyframes arrowfly{0%{transform:translateX(0);opacity:1}45%{transform:translateX(18px);opacity:0}46%{transform:translateX(-18px);opacity:0}100%{transform:none;opacity:1}}
.cta.lg{min-height:64px;font-size:var(--fs-l)}
.cta.lg>span{padding:0 28px}
.cta.lg>i{width:64px}
.cta.sm{min-height:46px;font-size:var(--fs-s)}
.cta.sm>span{padding:0 16px}
.cta.sm>i{width:44px}
/* every other link: text with a blue underline */
.tl{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:7px;transition:color .3s var(--ease)}
.tl svg{width:18px;height:18px;color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* ---------- header ---------- */
.progress{display:none;position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;background:var(--blue);z-index:var(--z-progress)}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline:scroll()){.progress{display:block;animation:growx linear both;animation-timeline:scroll(root)}}
.hdr{position:fixed;top:0;left:0;right:0;z-index:var(--z-bar);padding-top:env(safe-area-inset-top,0px);background:var(--hdr);border-bottom:1px solid var(--hdr-rule);--ink:#fff;--mute:rgba(255,255,255,.74);--rule:rgba(255,255,255,.28);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr{background:color-mix(in srgb,var(--hdr) 94%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}}
@media (prefers-reduced-transparency:reduce){.hdr{background:var(--hdr);-webkit-backdrop-filter:none;backdrop-filter:none}}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:var(--hdr-h)}
.hdr .cta{flex:none}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:none;color:var(--ink)}
.logo svg{flex:none;width:29px;height:36px}
.logo span{font-weight:500;font-size:28px;line-height:1;letter-spacing:-.012em;padding-bottom:3px}
.nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav>a,.dd>a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;white-space:nowrap;font-weight:600;font-size:var(--fs-s);color:var(--ink);transition:color .2s var(--ease)}
.nav>a::after,.dd>a::after{content:"";position:absolute;left:9px;right:9px;bottom:8px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav>a:hover::after,.dd:hover>a::after,.dd:focus-within>a::after{transform:scaleX(1);transform-origin:left}
.nav>a:hover,.dd:hover>a,.dd:focus-within>a{color:var(--blue-text)}
.dd{position:relative}
.dd>a svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.dd:hover>a svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:100%;left:0;min-width:250px;padding:8px;background:var(--hdr);border:1px solid var(--hdr-rule);border-top:0;border-radius:0 0 var(--rad) var(--rad);box-shadow:0 24px 48px -28px rgba(11,63,150,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s var(--ease)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;align-items:center;min-height:44px;padding:0 16px;font-weight:600;font-size:var(--fs-s);color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease)}
.sq{flex:none;width:46px;height:46px;border-radius:var(--rad);border:1px solid var(--rule);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.sq svg{width:20px;height:20px}
.theme .moon{display:none}
.is-dark .theme .sun{display:none}
.is-dark .theme .moon{display:block}
.burger{display:none;position:relative}
.burger i{position:absolute;left:12px;right:12px;top:calc(50% - 1px);height:2px;border-radius:1px;background:var(--ink);transition:transform .5s var(--ease),opacity .3s var(--ease),background .3s var(--ease)}
.burger i:nth-child(1){transform:translateY(-6px)}
.burger i:nth-child(2){transform-origin:100% 50%}
.burger i:nth-child(3){transform:translateY(6px)}
.menu-open .burger i:nth-child(1){transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-open .burger i:nth-child(3){transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg);padding:calc(var(--hdr-h) + 12px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s var(--ease) .25s}
.menu-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mnav>a{display:flex;align-items:center;min-height:60px;font-weight:800;font-size:var(--fs-h3l);letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--rule)}
.mnav .sub{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:4px 0 8px;border-bottom:1px solid var(--rule)}
.mnav .sub a{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:var(--fs-s);color:var(--mute)}
.mnav-cta{display:grid;gap:14px;margin-top:auto;padding-top:24px;justify-items:start}

/* ---------- section frame: the belt line draws in, the headline rises ---------- */
.sec{padding-block:clamp(48px,5.6vw,84px) clamp(56px,6.4vw,96px)}
.pre .rule{transform:scaleX(0)}
.pre .rule::before{transform:scaleX(0)}
.sh{margin-bottom:clamp(20px,2.4vw,34px)}
.sh.rv.pre{opacity:1;transform:none}
.sh h2{font-size:var(--fs-h2);margin-top:clamp(16px,1.8vw,24px);max-width:18ch}
.sh-sub{margin-top:14px;font-size:var(--fs-l);line-height:1.5;color:var(--mute);max-width:52ch;transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
.pre .sh-sub{opacity:0;transform:translateY(16px)}
.lead{font-size:var(--fs-l);line-height:1.5}
/* headline words rise out of a mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.w>span{display:inline-block;transition:transform .95s var(--ease);transition-delay:calc(var(--i) * 55ms + .1s)}
.pre .w>span{transform:translateY(118%)}

/* ---------- hero: editorial split. Short copy on the left, one training clip in a frame on the right. On phones the clip fills the background. ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(100svh,920px);padding-block:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + clamp(20px,3vw,44px)) clamp(36px,5vw,72px);background:var(--hdr);color:var(--text);
  --ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.18);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4;--hair:rgba(255,255,255,.16);--shell-bg:rgba(255,255,255,.07)}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0f2347}
.hero-bg::before{content:"";position:absolute;inset:-4% 0;background:url(img/hero-dojo.webp) 50% 30%/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,28,62,.9) 0%,rgba(11,28,62,0) 34%),linear-gradient(100deg,rgba(11,28,62,.8) 0%,rgba(11,28,62,.6) 46%,rgba(11,28,62,.34) 100%)}
@keyframes dojoZoom{from{scale:1}to{scale:1.16}}
@keyframes heroBg{to{translate:0 5%}}
.hero-bg::before{animation:dojoZoom 24s cubic-bezier(.45,0,.55,1) infinite alternate}
@supports (animation-timeline:scroll()){.hero-bg::before{animation:dojoZoom 24s cubic-bezier(.45,0,.55,1) infinite alternate,heroBg linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;background:var(--shell-bg);box-shadow:inset 0 0 0 1px var(--hair);font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1.3;text-transform:uppercase;color:var(--ink);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.eyebrow svg{flex:none;width:10px;height:12px}
.pre .eyebrow{opacity:0;transform:translateY(14px)}
.hero .eyebrow{animation:fadeup .9s var(--ease) both}
.hero h1{font-size:var(--fs-h1);margin:clamp(20px,2.4vw,30px) 0 clamp(16px,1.8vw,24px);max-width:10.6em}
.hero h1 .w>span{animation:wordup 1.1s var(--ease) both;animation-delay:calc(var(--i) * 70ms + .15s)}
@keyframes wordup{from{transform:translateY(118%)}to{transform:none}}
@keyframes fadeup{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .lead{font-size:var(--fs-h3l);font-weight:600;letter-spacing:-.015em;line-height:1.2;color:#fff;animation:fadeup .9s var(--ease) .55s both}
.hero .actions{margin-top:clamp(26px,2.8vw,38px);animation:fadeup .9s var(--ease) .7s both}
.hfacts{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:clamp(32px,4vw,56px);padding-top:22px;border-top:1px solid var(--rule);font-size:var(--fs-s);font-weight:600;color:var(--text);animation:fadeup .9s var(--ease) .85s both}
.hfacts li{position:relative;padding-left:18px}
.hfacts li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:3px;border-radius:2px;background:var(--blue)}
.hero-film{justify-self:end;width:100%;max-width:470px;box-shadow:inset 0 0 0 1px var(--hair),0 70px 120px -70px rgba(0,8,32,.9);animation:filmin 1.3s var(--ease) .2s both}
@keyframes filmin{from{opacity:.001;transform:translateY(44px) scale(.96)}to{opacity:1;transform:none}}
.film{position:relative;overflow:hidden;width:100%;aspect-ratio:4/5;max-height:min(66svh,620px);background:#0f2347 url(img/hero-poster.webp) 50% 40%/cover no-repeat}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.film.on video{opacity:1}
.film::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}
.hero>.vt{display:none}
@keyframes heroZoom{to{scale:1.1}}
@supports (animation-timeline:scroll()){.film video{animation:heroZoom linear both;animation-timeline:scroll(root);animation-range:0 100vh}}
/* play / pause control that every clip carries */
.vt{position:absolute;right:14px;top:14px;z-index:3;width:44px;height:44px;background:rgba(11,28,62,.5);color:#fff}
.vt svg{width:18px;height:18px}
.vt .i-pause,.vt.playing .i-play{display:none}
.vt.playing .i-pause{display:block}

/* ---------- word banners ---------- */
.belt{position:relative;display:block;background:var(--soft-2);overflow:hidden}
.track{display:flex;width:max-content;animation:marq 40s linear infinite;will-change:transform}
.belt.rev .track{animation-direction:reverse}
.track span{display:flex;align-items:center;padding:16px 0;font-weight:800;font-size:var(--fs-h3l);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:var(--blue-text)}
.track span::after{content:"";width:22px;height:6px;margin-inline:clamp(18px,2.4vw,32px);background:var(--blue);opacity:.6}
.belt.soft{background:var(--soft)}
.belt.outline{background:var(--bg)}
.belt.outline .track span{color:transparent;-webkit-text-stroke:1.2px var(--blue)}
.belt.go .track span::after{content:"\2192";width:auto;height:auto;background:none;opacity:.8;font-weight:600;color:var(--blue)}
.belt.go:hover .track{animation-play-state:paused}
.belt.go:hover .track span{color:var(--blue)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
#ueber-uns{background:var(--c-about)}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.slides{position:relative;overflow:hidden;border-radius:var(--rad-l);aspect-ratio:4/5;background:#0f2a5c url(img/p_eroeffnung.webp) 50% 50%/cover no-repeat}
.slides video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slides::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(9,36,88,.86) 0%,rgba(9,36,88,.3) 44%,rgba(9,36,88,.2) 100%)}
.slides figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;font-weight:800;font-size:var(--fs-h3l);letter-spacing:-.02em;line-height:1.1}
.slides figcaption small{display:block;margin-top:8px;font-weight:600;font-size:var(--fs-s);letter-spacing:0;line-height:1.3;opacity:.92}
.quote{font-weight:600;font-size:var(--fs-h3l);line-height:1.25;letter-spacing:-.015em;color:var(--ink);margin-bottom:24px;max-width:24ch}
.about-text>p+p{margin-top:14px}
.about-text>p:not(.quote){max-width:60ch}
.about-text .actions{margin-top:30px}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-top:2px solid var(--ink)}
.num{padding:18px 20px 0 0}
.num+.num{padding-left:20px;border-left:1px solid var(--rule)}
.num b{display:block;font-weight:800;font-size:var(--fs-num);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.num b em{font-style:normal;color:var(--blue)}
.nums{position:relative;border-top:0}
.nums::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink)}
.num>span{display:block;margin-top:10px;font-size:var(--fs-s);color:var(--mute);max-width:22ch}

/* ---------- why: ruled rows ---------- */
#warum{background:var(--c-warum)}
.after{margin-top:clamp(28px,4vw,48px)}
.after p{font-size:var(--fs-s);color:var(--mute);max-width:52ch}

/* ---------- courses: list of names, the photo and text on the right follow the pointer ---------- */
#kurse{background:var(--c-kurse)}
.kurse{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.kurs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;padding-block:clamp(12px,1.5vw,20px)}
.kurs::before{content:"";position:absolute;left:0;top:50%;width:28px;height:8px;margin-top:-4px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.kurs.on::before{transform:scaleX(1)}
.k-name{font-weight:800;font-size:clamp(28px,3.5vw,48px);letter-spacing:-.035em;line-height:1.05;color:var(--mute);transition:color .3s var(--ease),transform .5s var(--ease)}
.kurs.on .k-name{color:var(--ink);transform:translateX(44px)}
.k-meta{text-align:right;font-size:var(--fs-s);font-weight:600;line-height:1.4;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.k-meta span{display:block}
.kurs.on .k-meta{color:var(--blue-text)}
.k-img,.k-desc{display:none}
.k-stage{position:sticky;top:calc(var(--hdr-h) + 28px)}
.k-pics{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rad-l);background:var(--soft-2)}
.k-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.k-pics img.prev{opacity:1;z-index:1}
.k-pics img.on{opacity:1;z-index:2;animation:picin .75s cubic-bezier(.7,0,.2,1) both}
@keyframes picin{from{clip-path:inset(0 100% 0 0);transform:scale(1.12)}to{clip-path:inset(0 0 0 0);transform:none}}
.k-cap{margin-top:18px;min-height:8.5em}
.k-cap b{display:block;font-weight:600;font-size:var(--fs-s);color:var(--blue-text);margin-bottom:6px}
.k-cap span{display:block;max-width:46ch}

/* ---------- week plan: a time grid ---------- */
#wochenplan{background:var(--c-plan)}
.week-tabs{display:none}
.week-grid{display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));grid-auto-rows:minmax(88px,auto);grid-template-rows:auto;column-gap:12px;row-gap:10px}
.dh{grid-row:1;grid-column:calc(var(--c) + 1);margin:0;font-size:var(--fs-s);font-weight:600;letter-spacing:0;color:var(--ink);padding-bottom:10px;border-bottom:2px solid var(--ink)}
.dh.zeit{grid-column:1;color:var(--mute)}
.dh.today{color:var(--blue-text);border-color:var(--blue)}
.dh.today::after{content:" · heute"}
.tl-row{grid-column:1/-1;grid-row:calc(var(--r) + 1);border-top:1px solid var(--rule);padding-top:12px;font-weight:800;font-size:var(--fs-l);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.slot{position:relative;z-index:1;grid-column:calc(var(--c) + 1);grid-row:calc(var(--r) + 1);display:block;margin-top:10px;padding:12px 14px;border-radius:var(--rad);background:var(--surface);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.slot b{display:block;font-weight:800;color:var(--ink);line-height:1.2}
.slot span{display:block;margin-top:3px;font-size:var(--fs-s);font-weight:600;color:var(--blue-text);font-variant-numeric:tabular-nums}
.slot small{display:block;font-size:var(--fs-s);color:var(--mute)}
@keyframes slotin{from{opacity:0;transform:translateY(16px)}}
@media (min-width:901px){.week:not(.pre) .slot{animation:slotin .7s var(--ease) backwards;animation-delay:calc(var(--c) * 70ms + var(--r) * 50ms)}}
.week.rv.pre{opacity:1;transform:none}
.week.pre .slot,.week.pre .dh,.week.pre .tl-row,.week.pre .note,.week.pre .week-tabs{opacity:0}
.dh,.tl-row,.week-tabs{transition:opacity .8s var(--ease)}
.note{margin-top:22px;font-size:var(--fs-s);color:var(--mute);max-width:60ch}

/* ---------- trial training: four steps ---------- */
#probetraining{background:var(--c-probe)}
@supports (animation-timeline:view()){.steps{view-timeline:--steps block}.steps::after{animation:growx linear both;animation-timeline:--steps;animation-range:entry 25% cover 55%}}

/* ---------- reviews ---------- */
#stimmen{background:var(--c-stimmen)}
.reviews{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:center}
.reviews .sh,.fees .sh{margin-bottom:clamp(22px,2.6vw,36px)}
.fees .sh h2{font-size:clamp(30px,3.6vw,50px)}
.score b{display:block;font-weight:800;font-size:clamp(88px,12vw,168px);line-height:.85;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.score .st{display:block;margin:18px 0 6px;color:var(--blue);font-size:22px;letter-spacing:4px;line-height:1}
.score .st i{display:inline-block;font-style:normal;transition:transform .6s var(--ease),opacity .4s var(--ease);transition-delay:calc(var(--i) * 110ms + .5s)}
.pre .st i{opacity:0;transform:scale(.2) rotate(-40deg)}
.score>p{color:var(--mute);margin-bottom:16px}

/* ---------- trainers ---------- */
#trainer{background:var(--c-trainer)}
.sh-row{display:flex;justify-content:space-between;align-items:end;gap:20px}
.sh-row h2{margin-top:clamp(16px,1.8vw,24px)}
.arrows{display:flex;gap:8px}
.tr{scroll-snap-align:start;display:block;min-width:0}
.tr-img{position:relative;display:block;overflow:hidden;border-radius:var(--rad-l);aspect-ratio:3/4;background:var(--soft-2);clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 90ms)}
.tr strong,.tr>span:last-child{transition:opacity .8s var(--ease),color .2s var(--ease);transition-delay:calc(var(--i) * 90ms + .35s)}
.tr-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-drag:none}
.tr strong{display:block;margin-top:14px;font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.tr>span:last-child{display:block;margin-top:2px;font-size:var(--fs-s);color:var(--mute)}

/* ---------- einblicke: a film strip of clips and photos, each as wide as its own format ---------- */
#einblicke{background:var(--c-blick)}
.shot{flex:none;scroll-snap-align:start}
.shot .ph{position:relative;height:clamp(340px,38vw,520px);aspect-ratio:var(--ar);overflow:hidden;border-radius:var(--rad-l);background:var(--soft-2);clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 70ms)}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* ---------- fees ---------- */
#beitraege{background:var(--c-fees)}
.fees{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:center}
.fine{margin:22px 0 28px;border-top:1px solid var(--rule)}
.fine li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-s);color:var(--text)}
.tabs{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.tabs button{min-height:48px;padding:0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font-weight:600;color:var(--mute);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--blue)}
.fee-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;table-layout:fixed}
.fee-table th,.fee-table td{padding:16px 6px;text-align:right;border-bottom:1px solid var(--rule)}
.fee-table th{font-size:var(--fs-s);font-weight:600;color:var(--mute);line-height:1.25;vertical-align:bottom}
.fee-table th:first-child,.fee-table td:first-child{text-align:left;padding-left:0}
.fee-table td{font-weight:800;font-size:var(--fs-h3);color:var(--ink)}
.fee-table td:first-child{font-weight:600;font-size:var(--fs-b);color:var(--text)}
.fee-table .all{background:var(--soft);color:var(--blue-text);padding-right:12px}
.fee-table th.all{border-radius:var(--rad) var(--rad) 0 0}
.fee-table tr:last-child td.all{border-radius:0 0 var(--rad) var(--rad)}
@media (min-width:1px){.fee:not(.pre) tbody tr{animation:slotin .7s var(--ease) backwards;animation-delay:calc(var(--i) * 80ms + .15s)}}
.fee.rv.pre{opacity:1;transform:none}
.fee.pre{opacity:0}
.fee-cap{margin-top:14px;font-size:var(--fs-s);color:var(--mute)}

/* ---------- FAQ: two columns of questions ---------- */
@keyframes ansin{from{opacity:.01;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- location ---------- */
#standort{background:var(--c-ort)}
.ort{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.ort .sh{margin-bottom:clamp(18px,2vw,28px)}
.ort .txt p{max-width:46ch;margin-bottom:28px}

/* ---------- closing call ---------- */
#abschluss{background:var(--c-final)}

/* ---------- footer ---------- */
footer{background:var(--foot);padding-block:clamp(48px,6vw,80px) calc(104px + env(safe-area-inset-bottom,0px))}
.f-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr);gap:36px;border-top:1px solid var(--rule);padding-top:clamp(28px,3vw,44px);position:relative}
footer .logo{margin-bottom:18px}
footer .logo svg{width:36px;height:45px}
footer .logo span{font-size:34px}
.f-grid p{font-size:var(--fs-s);max-width:38ch;color:var(--mute)}
.f-contact{margin-top:16px;display:grid;font-weight:600;color:var(--ink)}
.f-contact a,.f-contact span{display:flex;align-items:center;min-height:44px}
footer h4{margin:0 0 8px;font-size:var(--fs-s);font-weight:600;letter-spacing:0;color:var(--mute)}
footer li a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(32px,4vw,56px);padding-top:18px;border-top:1px solid var(--rule);font-size:var(--fs-s);color:var(--mute)}

/* ---------- floating Probetraining button ---------- */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:var(--z-fab);display:inline-flex;align-items:stretch;min-height:60px;border-radius:var(--rad);background:var(--cta);color:#fff;box-shadow:0 16px 36px -14px rgba(11,63,150,.75);transition:transform .4s cubic-bezier(.2,.9,.2,1.2);animation:fabin .8s 1s cubic-bezier(.2,.8,.2,1) backwards,heartbeat 2.2s 2.4s var(--ease) infinite}
@keyframes fabin{from{transform:translateY(90px) scale(.9)}to{transform:none}}
@keyframes heartbeat{0%,36%,100%{scale:1}9%{scale:1.1}18%{scale:.98}27%{scale:1.07}}
.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--blue);animation:fabpulse 2.2s 2.4s var(--ease) infinite backwards;pointer-events:none}
@keyframes fabpulse{0%,8%{transform:scale(1);opacity:0}10%{opacity:.6}70%,100%{transform:scale(1.14,1.4);opacity:0}}
.fab>i{flex:none;display:grid;place-items:center;width:60px;border-radius:var(--rad) 0 0 var(--rad);background:var(--blue);transition:background .3s var(--ease),color .3s var(--ease)}
.fab>i svg{width:22px;height:22px}
.fab>span{display:grid;align-content:center;padding:0 18px;font-weight:800;font-size:var(--fs-b);line-height:1.15}
.fab small{font-weight:600;font-size:13px;opacity:.88}
.fab>b{display:grid;place-items:center;width:0;opacity:0;overflow:hidden;transition:width .4s cubic-bezier(.2,.9,.2,1),opacity .3s var(--ease)}
.fab>b svg{width:20px;height:20px;flex:none}
.fab:hover,.fab:focus-visible{animation-name:fabin,none;transform:translateY(-5px) scale(1.05)}
.fab:hover::before,.fab:focus-visible::before{animation:fabpulse 1.3s var(--ease) infinite}
.fab:hover>i,.fab:focus-visible>i{background:#fff;color:#0b3f96}
.fab:hover>i svg,.fab:focus-visible>i svg{animation:zap .7s cubic-bezier(.3,.7,.2,1)}
@keyframes zap{0%{transform:scale(1) rotate(0)}22%{transform:scale(1.45) rotate(-16deg)}44%{transform:scale(.9) rotate(11deg)}66%{transform:scale(1.2) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
.fab:hover>b,.fab:focus-visible>b{width:40px;opacity:1}
.fab:active{transform:scale(.97)}
.menu-open .fab{opacity:0;pointer-events:none}

/* light/dark change spreads as a circle from the switch */
.theme-spread::view-transition-old(root),.theme-spread::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-spread::view-transition-old(root){z-index:1}
.theme-spread::view-transition-new(root){z-index:2}

/* reveal */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
.rv.pre{opacity:0;transform:translateY(44px);filter:blur(10px)}
.sh.rv.pre,.week.rv.pre,.quotes.rv.pre,.trs.rv.pre,.reel.rv.pre,.fee.rv.pre,.final.rv.pre{filter:none}

/* ---------- interaction: everything clickable answers the pointer, the press and the keyboard ---------- */
.cta,.fab,.sq,.slot,.tr,.tabs button,.week-tabs button,.mode button,.kurs,.cts a,.adr{-webkit-tap-highlight-color:transparent}
.cta:active,.sq:active,.slot:active,.tabs button:active,.week-tabs button:active{transform:scale(.97)}
.tr:active .tr-img,.kurs:active .k-name{transform:scale(.985)}
.tl{transition:color .3s var(--ease),text-underline-offset .3s var(--ease),text-decoration-thickness .3s var(--ease)}
.tl:active{color:var(--blue)}
.logo svg{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.logo span{transition:color .2s var(--ease)}
.sq{transition:border-color .2s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease),translate .35s var(--ease)}
.sq svg{transition:transform .5s var(--ease)}
.dd-menu a{position:relative;padding-left:32px;border-radius:6px;transition:background .3s var(--ease),color .3s var(--ease)}
.dd-menu a::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:4px;margin-top:-2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.slot{transition:transform .35s var(--ease),box-shadow .3s var(--ease)}
.slot::after{content:"";position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:6px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;opacity:0;transform:translate(-6px,6px) scale(.6);transition:opacity .25s var(--ease),transform .4s var(--ease)}
.tr-img::after{content:"";position:absolute;right:0;bottom:0;width:52px;height:52px;border-radius:var(--rad) 0 0 0;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;transform:translate(101%,101%);transition:transform .45s var(--ease)}
.tr strong{background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 2px no-repeat;padding-bottom:3px;display:inline-block;transition:background-size .45s var(--ease),opacity .8s var(--ease),color .2s var(--ease)}
.tabs button{position:relative}
footer li a,.f-contact a{background:linear-gradient(var(--blue),var(--blue)) 0 calc(100% - 9px)/0 2px no-repeat;transition:color .2s var(--ease),background-size .4s var(--ease)}
.kurs::after{content:"";position:absolute;right:0;top:50%;width:28px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.k-meta{transition:color .3s var(--ease),transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cta:hover{box-shadow:0 16px 30px -16px rgba(11,63,150,.7)}
  .tl:hover{color:var(--blue-text);text-underline-offset:4px;text-decoration-thickness:3px}
  .tl:hover svg{animation:arrowfly .6s cubic-bezier(.6,0,.2,1)}
  .logo:hover svg{transform:rotate(-12deg) scale(1.08)}
  .logo:hover span{color:var(--blue-text)}
  .sq:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .hdr .sq:hover,.hero .sq:hover,.vt:hover{background:#fff;border-color:#fff;color:#0f2347}
  .theme:hover svg{transform:rotate(60deg)}
  #trPrev:hover svg{transform:translateX(-4px)}
  #trNext:hover svg{transform:translateX(4px)}
  .burger:hover i{background:var(--hdr)}
  .dd-menu a:hover{background:rgba(255,255,255,.1);color:var(--blue-text)}
  .dd-menu a:hover::before{transform:scaleX(1)}
  .slot:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--blue),0 18px 30px -18px rgba(11,63,150,.6);background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),var(--soft-2),transparent 70%),var(--surface)}
  .slot:hover::after{opacity:1;transform:none}
  .shot:hover img,.shot:hover video{transform:scale(1.04)}
  .tr:hover .tr-img img{transform:scale(1.06)}
  .tr:hover .tr-img::after{transform:none}
  .tr:hover strong{color:var(--blue-text);background-size:100% 2px}
  .tabs button:hover{color:var(--ink);border-color:var(--rule)}
  .tabs button[aria-selected="true"]:hover{border-color:var(--blue)}
  footer li a:hover,.f-contact a:hover{color:var(--blue-text);background-size:100% 2px}
  .kurs:hover::after{transform:scaleX(1)}
  .kurs:hover .k-meta{transform:translateX(-40px)}
}
.slot:focus-visible::after,.cts a:focus-visible::after{opacity:1;transform:none}
.tr:focus-visible .tr-img::after{transform:none}

/* ---------- v20: the last flat blocks get the same frames (stats, FAQ, location, closing call) ---------- */
/* stats: one sheet, four cells */
.nums-shell{margin-top:clamp(48px,6vw,88px)}
.nums{margin-top:0;padding:clamp(18px,2.4vw,34px) clamp(6px,1vw,14px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.nums::before{display:none}
.num,.num+.num{padding:6px clamp(14px,2vw,28px)}

/* FAQ: every question is a card, the plus sits in its own circle */

/* location: address tile on brand blue, contacts as rows with their own circles */
.loc .core{display:grid;gap:8px;padding:8px;background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.adr{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;align-content:space-between;gap:18px;min-height:clamp(210px,21vw,270px);padding:clamp(20px,2.4vw,30px);border-radius:calc(var(--rad-l) - 8px);background:var(--hdr);color:#fff}
.adr .wm{position:absolute;z-index:-1;right:-6%;top:-18%;width:46%;height:auto;aspect-ratio:82/102;opacity:.22;transition:transform 1.2s var(--ease)}
.adr-t{font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;line-height:1.04}
.adr-t small{display:block;margin-top:12px;font-size:var(--fs-s);font-weight:600;letter-spacing:0;line-height:1.3;color:#9fcbff}
.ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--blue-text);box-shadow:inset 0 0 0 1px var(--hair)}
.ic svg{width:22px;height:22px}
.adr .ic{grid-column:1/-1;align-self:start;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.arw{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .6s var(--ease),background .5s var(--ease),color .4s var(--ease)}
.arw svg{width:18px;height:18px}
.cts{display:grid;gap:8px}
.cts a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:76px;padding:14px 16px;border-radius:calc(var(--rad-l) - 8px);background:var(--soft);transition:background .5s var(--ease)}
.cts small{display:block;font-size:13px;color:var(--mute)}
.cts b{display:block;font-weight:600;font-size:var(--fs-l);color:var(--ink);overflow-wrap:anywhere}
.cts .arw{background:var(--surface);color:var(--blue-text);box-shadow:inset 0 0 0 1px var(--hair)}

/* closing call: one dark sheet with the mark as a watermark */
.final{position:relative;isolation:isolate;overflow:hidden;padding:clamp(34px,6vw,88px);background:#0f2347 url(img/hero-bg.webp) 50% 50%/cover no-repeat;color:rgba(255,255,255,.9);
  --ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.2);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4;--hair:rgba(255,255,255,.16);--shell-bg:rgba(255,255,255,.08)}
.final::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,rgba(11,28,62,.96) 0%,rgba(11,28,62,.84) 55%,rgba(11,28,62,.66) 100%)}
.final .wm{position:absolute;z-index:-1;right:clamp(-30px,3vw,70px);top:50%;width:clamp(200px,28vw,400px);height:auto;aspect-ratio:82/102;margin-top:calc(clamp(200px,28vw,400px) * -.62);opacity:.2}
@keyframes wm{from{transform:translateY(14%) rotate(-4deg)}to{transform:translateY(-14%) rotate(4deg)}}
@supports (animation-timeline:view()){.final .wm{animation:wm linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}
.final h2{font-size:clamp(40px,6vw,88px);letter-spacing:-.04em;line-height:.98;max-width:11ch;margin-top:clamp(20px,2.4vw,32px)}
.final .lead{margin:clamp(18px,2.2vw,28px) 0 clamp(26px,3vw,40px);max-width:44ch}
@media (hover:hover) and (pointer:fine){
  .adr:hover .arw,.cts a:hover .arw{transform:translate(3px,-1px) scale(1.08)}
  .adr:hover .arw{background:#fff;color:#0f2347}
  .adr:hover .wm{transform:scale(1.08) rotate(-4deg)}
  .cts a:hover{background:var(--soft-2)}
  .cts a:hover .arw{background:var(--blue);color:#fff}
}

/* ---------- v19: pictures instead of text rows, endless strips, dark week plan, step cards, moving reviews ---------- */
/* why: four cards with one anatomy: small label, headline and line of copy on top, the graphic that carries the fact at the bottom */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.bt{grid-column:span 5;min-width:0;transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease),box-shadow .8s var(--ease);transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),0s}
.bt.wide{grid-column:span 7}
.bt .core{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px);padding:clamp(20px,2.4vw,32px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px 0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);font-size:12px;font-weight:600;line-height:1;color:var(--mute)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.bt-h{position:relative;display:grid;justify-items:start;gap:14px}
.bt-h h3{font-size:var(--fs-h3l)}
.bt-h p{margin-top:-6px;font-size:var(--fs-s);line-height:1.5;color:var(--mute);max-width:44ch}
.bt-b{position:relative;margin-top:auto}
/* level: photo card, the switch moves between the two ends */
.bt .photo{min-height:clamp(320px,28vw,400px);justify-content:space-between;color:#fff;background:#0f2347;--rule:rgba(255,255,255,.34);--mute:#fff}
.bt .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.4s var(--ease)}
.bt .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,28,62,.94) 0%,rgba(11,28,62,.55) 48%,rgba(11,28,62,.2) 100%)}
.bt .photo>*:not(img){position:relative;z-index:1}
.bt .photo .tag{background:rgba(11,28,62,.5)}
.bt .photo h3{color:#fff;font-size:var(--fs-h3l)}
.bt .photo p{margin-top:6px;font-size:var(--fs-s);line-height:1.5;color:rgba(255,255,255,.86);max-width:44ch}
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-bottom:18px;padding:4px;border-radius:999px;background:rgba(11,28,62,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.seg::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#1f6fe6;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);animation:seg 7s var(--ease) infinite}
@keyframes seg{0%,42%{transform:translateX(0)}50%,92%{transform:translateX(100%)}100%{transform:translateX(0)}}
.seg span{position:relative;padding:8px 18px;font-size:13px;font-weight:600;line-height:1;text-align:center;color:#fff}
/* age: which course from which age */
.agl{position:relative;display:grid}
.agl::before,.agl::after{content:"";position:absolute;left:4px;top:22px;bottom:22px;width:2px;border-radius:1px;background:var(--soft-2)}
.agl::after{background:var(--blue);transform-origin:top;transition:transform 1.6s var(--ease) .3s}
.pre .agl::after{transform:scaleY(0)}
.agl li{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:14px;min-height:46px;padding:7px 0 7px 26px;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 110ms + .25s)}
.agl li+li{border-top:1px solid var(--rule)}
.agl li::before{content:"";position:absolute;z-index:1;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--blue)}
.agl li:first-child::before{background:var(--blue)}
.pre .agl li{opacity:0;transform:translateX(-12px)}
.agl b{justify-self:start;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600;white-space:nowrap;color:var(--blue-text)}
.agl span{font-size:var(--fs-s);font-weight:600;line-height:1.3;color:var(--ink)}
/* belts: one track from white to black, the frame walks along it */
.gw{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.gw i{height:24px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px var(--rule),inset 0 2px 0 rgba(255,255,255,.26);transform-origin:left;transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 100ms + .2s)}
.gw i:first-child{border-radius:10px 6px 6px 10px}
.gw i:nth-child(6){border-radius:6px 10px 10px 6px}
.pre .gw i{transform:scaleX(0)}
.gw-m{position:absolute;left:0;top:-6px;width:calc((100% - 30px) / 6);height:36px;animation:gwm 10s var(--ease) infinite}
.gw-m::before{content:"";position:absolute;inset:0 -5px;border-radius:12px;box-shadow:0 0 0 2px var(--ink)}
@keyframes gwm{0%,9%{transform:translateX(0)}16.600%,25.600%{transform:translateX(calc(100% + 6px))}33.300%,42.300%{transform:translateX(calc(200% + 12px))}50%,59%{transform:translateX(calc(300% + 18px))}66.600%,75.600%{transform:translateX(calc(400% + 24px))}83.300%,95%{transform:translateX(calc(500% + 30px))}100%{transform:translateX(0)}}
.gw-l{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;font-weight:600;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,26px)}
.chips li{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600;color:var(--ink)}
/* club: dark brand tile, three milestones on one line */
.bt .dark{isolation:isolate;background:var(--hdr);color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);--ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.76);--rule:rgba(255,255,255,.22);--blue:#3b97ff;--blue-text:#9fcbff}
.bt .dark .wm{position:absolute;z-index:-1;right:-4%;top:-24%;width:38%;height:auto;aspect-ratio:82/102;opacity:.2;transition:transform 1.2s var(--ease)}
.ms{--g:clamp(14px,2vw,28px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding-top:28px}
.ms::before,.ms::after{content:"";position:absolute;left:0;top:5px;height:2px;border-radius:1px}
.ms::before{right:0;background:var(--rule);-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.ms::after{width:calc(66.667% + var(--g) * .667 + 6px);background:var(--blue);transform-origin:left;transition:transform 1.8s var(--ease) .3s}
.pre .ms::after{transform:scaleX(0)}
.ms li{position:relative;min-width:0;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 260ms + .4s)}
.pre .ms li{opacity:0;transform:translateY(14px)}
.ms li::before{content:"";position:absolute;z-index:1;left:0;top:-28px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--hdr)}
.ms li:last-child::after{content:"";position:absolute;left:0;top:-28px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--blue);animation:msp 2.600s var(--ease) infinite}
@keyframes msp{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.600);opacity:0}}
.ms b{display:block;font-weight:800;font-size:clamp(38px,4.400vw,62px);line-height:1;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.ms b em{font-style:normal;color:var(--blue)}
.ms li>span{display:block;margin-top:10px;font-size:var(--fs-s);font-weight:600;line-height:1.35;color:#fff}
.ms small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--mute)}

/* endless strips */
.mq{overflow:hidden;padding-block:14px 44px;margin-block:-14px -28px;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.mq.drag{cursor:grabbing}
.mq-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
.mq .shot,.mq .tr{flex:none}
.mq .tr{width:clamp(210px,21vw,290px)}
.mq img{-webkit-user-drag:none;user-select:none}
.mq-prev svg,.mq-next svg{width:20px;height:20px}
.mq{overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* week plan on the dark brand blue; the calendar itself stays a light sheet */
#wochenplan{--ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.2);--blue:#3b97ff;--blue-text:#9fcbff;--hair:rgba(255,255,255,.16);--shell-bg:rgba(255,255,255,.07);color:var(--text)}
#wochenplan .week-grid{--ink:#12213d;--text:#33435e;--mute:#5d6c86;--rule:rgba(18,33,61,.16);--blue:#007bff;--blue-text:#0060cc;--hair:rgba(18,33,61,.09);color:var(--text)}
:root[data-mode="dark"] #wochenplan .week-grid{--ink:#f2f6fd;--text:#c9d5e8;--mute:#9aaac4;--rule:rgba(255,255,255,.18);--blue:#3b97ff;--blue-text:#8cc3ff;--hair:rgba(255,255,255,.1)}
#wochenplan .bz{box-shadow:inset 0 0 0 1px var(--hair),0 50px 90px -50px rgba(0,8,32,.8)}

/* trial training: four step cards, the active one moves along */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);counter-reset:f}
.fl{position:relative;counter-increment:f;min-width:0}
.fl .core{position:relative;height:100%;padding:clamp(20px,2.2vw,30px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.fl .core::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--blue);opacity:0;animation:flon 8s var(--ease) infinite;animation-delay:calc(var(--i) * 2s);pointer-events:none}
@keyframes flon{0%,30%,100%{opacity:0}5%,22%{opacity:1}}
.fl .core::before{content:"0" counter(f);position:absolute;right:clamp(18px,2vw,28px);top:clamp(16px,1.8vw,24px);font-weight:800;font-size:clamp(34px,3.4vw,48px);line-height:1;letter-spacing:-.04em;color:var(--soft-2)}
.fl-ico{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:clamp(28px,3.2vw,44px);background:var(--soft);color:var(--blue-text);box-shadow:inset 0 0 0 1px var(--hair)}
.fl-ico::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:0;animation:flon 8s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
.fl-ico svg{position:relative;z-index:1;width:28px;height:28px;animation:flico 8s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes flico{0%,30%,100%{color:var(--blue-text);transform:none}5%,22%{color:#fff;transform:scale(1.12)}}
.fl h3{margin-bottom:8px}
.fl p{font-size:var(--fs-s);line-height:1.55;color:var(--mute)}
.fl:not(:last-child)>i{position:absolute;z-index:2;right:calc(-1 * clamp(14px,1.6vw,22px) / 2 - 15px);top:calc(clamp(20px,2.2vw,30px) + 8px + 17px);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 0 0 5px var(--c-probe)}
.fl>i svg{width:14px;height:14px}
.fl:last-child>i{display:none}

/* reviews: cards drift past in two columns */
.rvw{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);height:clamp(460px,44vw,580px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.rvw-col{min-width:0}
.rvw-track{display:flex;flex-direction:column}
.rvw.run .rvw-track{animation:rvwy 40s linear infinite}
.rvw.run .rev .rvw-track{animation-direction:reverse}
.rvw:hover .rvw-track,.rvw:focus-within .rvw-track{animation-play-state:paused}
@keyframes rvwy{to{transform:translateY(-50%)}}
@keyframes rvwx{to{transform:translateX(-50%)}}
.rc{flex:none;margin:0 0 clamp(12px,1.4vw,18px);padding:clamp(18px,2vw,26px);border-radius:22px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--hi)}
.rc-st{display:block;margin-bottom:12px;color:var(--blue);font-size:15px;letter-spacing:3px;line-height:1}
.rc blockquote{font-size:var(--fs-b);line-height:1.55;color:var(--text)}
.rc figcaption{display:flex;align-items:center;gap:12px;margin-top:16px}
.rc figcaption i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cta);color:#fff;font-style:normal;font-weight:800;font-size:var(--fs-s)}
.rc figcaption b{display:block;font-weight:600;color:var(--ink);line-height:1.2}
.rc figcaption small{font-size:13px;color:var(--mute)}
.rvw:not(.run){height:auto;-webkit-mask-image:none;mask-image:none}
@media (hover:hover) and (pointer:fine){
  .bt:hover{box-shadow:inset 0 0 0 1px var(--hair),0 44px 70px -44px rgba(11,63,150,.6)}
  .bt:hover .photo>img{transform:scale(1.05)}
  .bt:hover .wm{transform:scale(1.08) rotate(-4deg)}
}

/* ---------- v18: floating island bar, pill buttons with a nested arrow circle, media and tables in machined frames (tray + core), softer depth ---------- */
.bz{padding:8px;border-radius:calc(var(--rad-l) + 8px);background:var(--shell-bg);box-shadow:inset 0 0 0 1px var(--hair),0 30px 60px -34px rgba(11,63,150,.3)}
.bz>*{border-radius:var(--rad-l)}

/* island bar: detached from the top edge, glass over the page */
.hdr{top:calc(12px + env(safe-area-inset-top,0px));padding-top:0;margin-inline:auto;width:min(1180px,calc(100% - 24px));border:0;border-radius:999px;background:var(--hdr);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16),0 28px 56px -30px rgba(6,18,44,.75)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr{background:color-mix(in srgb,var(--hdr) 94%,transparent);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}}
@media (prefers-reduced-transparency:reduce){.hdr{background:var(--hdr);-webkit-backdrop-filter:none;backdrop-filter:none}}
.hdr .wrap{max-width:none;height:62px;padding-inline:24px 8px;gap:14px}
.hdr .sq{width:44px;height:44px}
.dd-menu{top:calc(100% + 19px);left:-14px;padding:10px;border:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 34px 60px -30px rgba(6,18,44,.85);transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s var(--ease) .45s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.dd-menu a{border-radius:14px}

/* round icon buttons with a hairline ring */
.sq{border:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule)}
.vt{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}

/* Probetraining: pill with the arrow in its own circle */
.cta{align-items:center;min-height:56px;padding:6px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:transform .5s var(--ease),translate .5s var(--ease),box-shadow .5s var(--ease)}
.cta>span{padding:0 18px 0 22px}
.cta>i{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.32);transition:background .5s var(--ease),color .4s var(--ease),transform .6s var(--ease)}
.cta::after{transition:transform .7s var(--ease)}
.cta:hover>i,.cta:focus-visible>i{background:#fff;color:var(--cta);transform:translate(3px,-1px) scale(1.06)}
.cta.lg{min-height:66px;padding:7px}
.cta.lg>span{padding:0 22px 0 28px}
.cta.lg>i{width:52px;height:52px}
.cta.sm{min-height:46px;padding:4px}
.cta.sm>span{padding:0 12px 0 16px}
.cta.sm>i{width:38px;height:38px}
.cta:active{transform:scale(.98)}

/* floating Probetraining: same language, the heartbeat stays */
.fab{align-items:center;padding:6px 8px 6px 6px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -22px rgba(11,63,150,.75)}
.fab>i{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
.fab>span{padding:0 14px}
.fab>b{width:40px;height:40px;opacity:1;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .6s var(--ease),background .4s var(--ease)}
.fab:hover>b,.fab:focus-visible>b{width:40px;background:rgba(255,255,255,.26);transform:translate(3px,-1px) scale(1.08)}

/* frames: about clip, course photo, calendar, fee table */
.slides,.k-pics{border-radius:var(--rad-l)}
.week-grid{padding:clamp(14px,2vw,30px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.slot{background:var(--slot);box-shadow:inset 0 0 0 1px var(--hair)}
.slot::after{border-radius:50%}
.fee .core{padding:clamp(14px,2.2vw,30px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}

/* film strip and trainer photos sit in the same tray */
.shot .ph{padding:6px;overflow:visible;clip-path:inset(-60px);border-radius:calc(var(--rad-l) + 6px);background:var(--shell-bg);box-shadow:inset 0 0 0 1px var(--hair);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--i) * 70ms),transform .8s var(--ease),box-shadow .8s var(--ease)}
.shot img,.shot video{display:block;border-radius:var(--rad-l)}
.shot .vt{right:18px;top:18px}
.tr-img{padding:6px;overflow:visible;border-radius:calc(var(--rad-l) + 6px);background:var(--shell-bg);box-shadow:inset 0 0 0 1px var(--hair)}
.tr-img img{border-radius:var(--rad-l)}
.tr-img::after{right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;opacity:0;transform:translateY(14px) scale(.6);transition:transform .6s var(--ease),opacity .4s var(--ease)}
.tr:focus-visible .tr-img::after{opacity:1}

/* phone menu: glass sheet, links rise in one after the other */
.mnav{background:var(--hdr);--ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.16);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4;transform:none;transition:opacity .5s var(--ease),visibility 0s var(--ease) .5s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mnav{background:color-mix(in srgb,var(--hdr) 90%,transparent);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}}
.menu-open .mnav{transition:opacity .5s var(--ease)}
.mnav>*{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu-open .mnav>*{opacity:1;transform:none}
.menu-open .mnav>:nth-child(1){transition-delay:.08s}.menu-open .mnav>:nth-child(2){transition-delay:.13s}.menu-open .mnav>:nth-child(3){transition-delay:.18s}.menu-open .mnav>:nth-child(4){transition-delay:.23s}
.menu-open .mnav>:nth-child(5){transition-delay:.28s}.menu-open .mnav>:nth-child(6){transition-delay:.33s}.menu-open .mnav>:nth-child(7){transition-delay:.38s}.menu-open .mnav>:nth-child(8){transition-delay:.43s}.menu-open .mnav>:nth-child(9){transition-delay:.48s}
@media (hover:hover) and (pointer:fine){
  .cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 22px 40px -22px rgba(11,63,150,.8)}
  .slot:hover{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),var(--soft-2),transparent 70%),var(--slot)}
  .shot:hover img,.shot:hover video{transform:none}
  .shot:hover .ph{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--hair),0 44px 60px -44px rgba(11,63,150,.7)}
  .tr:hover .tr-img img{transform:none}
  .tr:hover .tr-img::after{opacity:1;transform:none}
}

/* ---------- v24: the belt under the wordmark, more life in the buttons ---------- */
/* logo: a black belt ties itself under the name */
.logo span{position:relative;transition:color .3s var(--ease),transform .6s var(--ease)}
.lb{position:absolute;left:1px;right:1px;top:100%;height:7px;margin-top:1px;pointer-events:none}
.lb i{position:absolute;background:#0b0d10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.lb-s{inset:0;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.lb-s::after{content:"";position:absolute;left:4px;right:4px;top:3px;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 4px,transparent 4px 7px)}
.lb-t{left:50%;top:5px;width:6px;height:12px;border-radius:1px 1px 2px 2px;transform-origin:50% 0;transform:scaleY(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.lb-t.a{margin-left:-7px}
.lb-t.b{margin-left:1px}
.lb-k{left:50%;top:-2px;width:11px;height:11px;margin-left:-5.500px;border-radius:3px;transform:rotate(45deg) scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.logo:is(:hover,:focus-visible) span{transform:translateY(-5px)}
.logo:is(:hover,:focus-visible) .lb-s{transform:scaleX(1)}
.logo:is(:hover,:focus-visible) .lb-k{transform:rotate(45deg) scale(1);transition-delay:.3s}
.logo:is(:hover,:focus-visible) .lb-t.a{transform:rotate(24deg) scaleY(1);transition-delay:.42s;animation:lbA 1.800s cubic-bezier(.45,0,.55,1) 1s infinite alternate}
.logo:is(:hover,:focus-visible) .lb-t.b{transform:rotate(-24deg) scaleY(1);transition-delay:.48s;animation:lbB 1.800s cubic-bezier(.45,0,.55,1) 1.100s infinite alternate}
@keyframes lbA{from{transform:rotate(24deg) scaleY(1)}to{transform:rotate(13deg) scaleY(1)}}
@keyframes lbB{from{transform:rotate(-24deg) scaleY(1)}to{transform:rotate(-13deg) scaleY(1)}}

/* buttons: the arrow nudges now and then, icons answer the pointer, tabs draw their line */
@keyframes nudge{0%,76%,100%{transform:none}85%{transform:translateX(5px)}93%{transform:translateX(-2px)}}
.cta>i svg{animation:nudge 4.200s var(--ease) infinite;animation-delay:calc(var(--n,0) * .45s)}
.fab>b svg{animation:nudge 4.200s var(--ease) 1.200s infinite}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .vt:hover svg{transform:scale(1.25)}
  .mq-prev:hover svg{transform:translateX(-4px)}
  .mq-next:hover svg{transform:translateX(4px)}
  .tabs button:hover{border-color:transparent}
  .tabs button:hover::after{transform:scaleX(1)}
  body:not(.menu-open) .burger:hover i:nth-child(2){transform:scaleX(.55)}
}
@media (prefers-reduced-motion:reduce){.cta>i svg,.fab>b svg{animation:none}}

/* ---------- v25: audit pass ---------- */
/* footer closes the page in the colour of the top bar */
footer{position:relative;isolation:isolate;overflow:hidden;background:var(--hdr);color:rgba(255,255,255,.86);--ink:#fff;--text:rgba(255,255,255,.86);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.16);--blue:#3b97ff;--blue-text:#9fcbff}
footer>.wm{position:absolute;z-index:-1;right:-4%;bottom:-46%;width:min(40vw,520px);height:auto;aspect-ratio:82/102;opacity:.08}
.f-grid{border-top:0;padding-top:0}
.rc figcaption i{border-radius:13px}
.fee-cap{max-width:64ch}

/* ---------- v26: course rows keep still on narrow screens ---------- */
footer{--hair:rgba(255,255,255,.16);--hi:rgba(255,255,255,.07);--soft:rgba(255,255,255,.1);--surface:rgba(255,255,255,.05)}
.f-bottom{margin-top:clamp(28px,3vw,44px)}
@media (max-width:900px){.kurs:hover .k-meta{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .nav,.hdr .wrap>.cta{display:none}
  .theme{margin-left:auto}
  .burger{display:grid}
  .hdr .wrap{gap:10px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--hdr-h:76px}
  .about,.reviews,.fees,.ort,.kurse{grid-template-columns:1fr}
  .slides{aspect-ratio:4/4.4}
  .shot .ph{height:min(112vw,440px);max-width:82vw}
  .k-stage{display:none}
  .kurs{grid-template-columns:92px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding-block:18px;border-top:1px solid var(--rule)}
  .kurs:first-child{border-top:2px solid var(--ink)}
  .kurs::before{display:none}
  .k-img{display:block;grid-row:1 / span 2;aspect-ratio:1;overflow:hidden;border-radius:var(--rad);background:var(--soft)}
  .k-img img{width:100%;height:100%;object-fit:cover}
  .k-name,.kurs.on .k-name{grid-column:2;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--ink);transform:none}
  .k-meta,.kurs.on .k-meta{grid-column:2;text-align:left;color:var(--blue-text)}
  .k-desc{display:block;grid-column:1 / -1;margin-top:6px;font-size:var(--fs-s);line-height:1.5;color:var(--mute)}
  .score{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:end}
  .score b{grid-row:span 3;font-size:88px}
  .score .st{margin:0 0 4px}
  .score>p{margin-bottom:4px}
  .score .sh{grid-column:1/-1}
  .week-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:2px solid var(--ink);margin-bottom:12px}
  .week-tabs button{min-height:52px;border:0;border-bottom:4px solid transparent;margin-bottom:-2px;background:none;font-weight:600;color:var(--mute);cursor:pointer}
  .week-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--blue);font-weight:800}
  .week-grid{display:block}
  .dh,.tl-row{display:none}
  .slot{display:none;margin:0 0 8px;padding:14px 16px}
  .slot.active{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;animation:ansin .5s var(--ease) both}
  .slot.active b{font-size:var(--fs-l)}
  .slot.active span{grid-column:2;grid-row:1 / span 2;margin:0;font-size:var(--fs-b);text-align:right}
  .slot::after{display:none}
  .kurs::after{display:none}
  .slot.active small{grid-column:1}
  .arrows{display:none}
}
@media (max-width:640px){
  body{font-size:16.5px}
  :root{--fs-b:16.5px;--fs-l:18px}
  .logo{gap:9px}
  .logo svg{width:27px;height:34px}
  .logo span{font-size:27px}
  .hero .cta.lg{width:100%}
  .hero .cta.lg>span{flex:1}
  .nums{grid-template-columns:1fr 1fr}
  .num,.num+.num{padding:16px 12px 18px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .num:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .tabs button{text-align:left;line-height:1.25;padding:10px 0}
  .fee-table th,.fee-table td{padding:14px 4px}
  .fee-table td{font-size:var(--fs-l)}
  .fee-table .all{padding-right:6px}
  .fee-table th:first-child{width:24%}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .f-grid>div:first-child{grid-column:1/-1}
  .fab{min-height:54px}
  .fab>i{width:50px}
  .fab small{display:none}
  .fab>span{padding:0 16px}
}
@media (max-width:1240px){
  .hdr .wrap{padding-inline:20px 8px;gap:8px}
}
@media (max-width:900px){
  .hdr{top:calc(10px + env(safe-area-inset-top,0px));width:calc(100% - 20px)}
  .hdr .wrap{height:56px}
  /* the clip becomes the background, the copy sits at the bottom of the screen */
  .hero{align-items:flex-end;min-height:min(100svh,880px);padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .hero-grid{grid-template-columns:1fr}
  .hero-bg{display:none}
  .hero-film{position:absolute;inset:0;z-index:-1;max-width:none;padding:0;border-radius:0;background:none;box-shadow:none;animation:none}
  .film{position:absolute;inset:0;aspect-ratio:auto;max-height:none;border-radius:0;background-position:50% 30%}
  .film::after{box-shadow:none;background:linear-gradient(180deg,rgba(11,28,62,.55) 0%,rgba(11,28,62,.12) 24%,rgba(11,28,62,.62) 52%,rgba(11,28,62,.95) 100%)}
  .film .vt{display:none}
  .hero>.vt{display:grid;right:var(--gutter);top:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + 6px)}
  .bz{padding:6px;border-radius:calc(var(--rad-l) + 6px)}
}
@media (max-width:640px){
  .cta.lg>span{padding:0 14px 0 24px}
  .fab{padding:5px 16px 5px 5px}
  .fab>i{width:44px;height:44px}
  .fab>span{padding:0 0 0 12px}
  .fab>b{display:none}
  .hfacts{gap:8px 22px}
}
@media (max-width:1100px){
  .flow{grid-template-columns:1fr 1fr}
  .fl:nth-child(2)>i{display:none}
}
@media (max-width:900px){
  .bt,.bt.wide{grid-column:1/-1}
  .bt .photo{min-height:340px}
  .rvw{display:block;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);margin-inline:calc(-1 * var(--gutter))}
  .rvw-col+.rvw-col{margin-top:14px}
  .rvw-track{flex-direction:row;width:max-content}
  .rvw.run .rvw-track{animation-name:rvwx}
  .rc{width:min(78vw,330px);margin:0 14px 0 0}
  .rvw:not(.run){margin-inline:0}
  .rvw:not(.run) .rvw-track{flex-direction:column;width:auto}
  .rvw:not(.run) .rc{width:auto;margin:0 0 14px}
}
@media (max-width:640px){
  .flow{grid-template-columns:1fr}
  .fl>i{display:none!important}
  .fl .core{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start}
  .fl-ico{grid-row:span 2;margin-bottom:0}
  .fl h3{align-self:end;padding-right:44px}
  .agl li{grid-template-columns:70px minmax(0,1fr);gap:12px}
  .ms{grid-template-columns:1fr;gap:0;padding-top:0}
  .ms::before,.ms::after,.ms li::before,.ms li:last-child::after{display:none}
  .ms li{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;align-content:center;padding:12px 0}
  .ms li+li{border-top:1px solid var(--rule)}
  .ms b{grid-row:span 2;align-self:center;font-size:38px}
  .ms li>span{margin-top:0}
  .mq .tr{width:58vw}
}
@media (max-width:640px){
  .nums{padding:8px 18px}
  .num,.num+.num{padding:16px 12px 16px 0}
  .num:nth-child(even){padding-left:16px}
  .num:nth-last-child(-n+2){border-bottom:0}
  .cts a{gap:12px;padding:12px}
  .cts b{font-size:var(--fs-b)}
  .final .wm{opacity:.12;right:-60px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv.pre,.pre .w>span,.pre .rule,.pre .rule::before{opacity:1;transform:none;filter:none}
  .mnav>*{opacity:1;transform:none}
  .progress{display:none}
  .film video,.hero-bg::before,.steps::after{animation:none}
}

/* =====================================================================
   SUBPAGES: same system as the homepage (frames, pills, eyebrows, dark brand blue)
   ===================================================================== */
/* active page in the bar and in the phone menu */
.nav>a[aria-current="page"],.dd>a.cur{color:var(--blue-text)}
.nav>a[aria-current="page"]::after,.dd>a.cur::after{transform:scaleX(1)}
.dd-menu a[aria-current="page"]{color:var(--blue-text);background:rgba(255,255,255,.08)}
.dd-menu a[aria-current="page"]::before{transform:scaleX(1)}
.mnav a[aria-current="page"]{color:var(--blue-text)}
button.cta{border:0;cursor:pointer;font-family:inherit;text-align:left}

/* ---------- page head: the dojo photo in brand blue, breadcrumb, title ---------- */
.pg{position:relative;isolation:isolate;overflow:hidden;padding-block:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + clamp(34px,4.4vw,68px)) clamp(44px,5.4vw,84px);background:var(--hdr);color:var(--text);
  --ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.74);--rule:rgba(255,255,255,.18);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4;--hair:rgba(255,255,255,.16);--shell-bg:rgba(255,255,255,.07);--soft:rgba(255,255,255,.1)}
.pg::before{content:"";position:absolute;inset:-4% 0;z-index:-2;background:url(img/hero-dojo.webp) 50% 30%/cover no-repeat;animation:dojoZoom 24s cubic-bezier(.45,0,.55,1) infinite alternate}
.pg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,28,62,.94) 0%,rgba(11,28,62,0) 62%),linear-gradient(100deg,rgba(11,28,62,.88) 0%,rgba(11,28,62,.68) 50%,rgba(11,28,62,.42) 100%)}
.pg-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.pg-grid.solo{grid-template-columns:minmax(0,1fr)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-bottom:clamp(18px,2vw,26px);font-size:var(--fs-s);font-weight:600;color:var(--mute);animation:fadeup .8s var(--ease) both}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 12px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;background:linear-gradient(var(--blue),var(--blue)) 0 calc(100% - 4px)/0 2px no-repeat;transition:color .2s var(--ease),background-size .4s var(--ease)}
.crumbs [aria-current]{color:#fff}
.pg .eyebrow{animation:fadeup .9s var(--ease) both}
.pg h1{font-size:var(--fs-h1);margin-top:clamp(18px,2.2vw,28px);max-width:15ch}
.pg h1.long{font-size:clamp(34px,4.2vw,58px);max-width:18ch}
.pg h1 .w>span{animation:wordup 1.1s var(--ease) both;animation-delay:calc(var(--i) * 70ms + .15s)}
.pg .lead{margin-top:clamp(14px,1.6vw,22px);max-width:40ch;font-size:var(--fs-h3l);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:#fff;animation:fadeup .9s var(--ease) .45s both}
.pg .sub-l{margin-top:12px;max-width:56ch;color:var(--text);animation:fadeup .9s var(--ease) .55s both}
.pg .actions{margin-top:clamp(24px,2.6vw,34px);animation:fadeup .9s var(--ease) .65s both}
.pg .hfacts{margin-top:clamp(26px,3vw,40px)}
.pg .hfacts a{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
.pg-media{justify-self:end;width:100%;max-width:520px;box-shadow:inset 0 0 0 1px var(--hair),0 70px 120px -70px rgba(0,8,32,.9);animation:filmin 1.3s var(--ease) .2s both}
.pg-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;background:#0f2347}
.pg-media.portrait{max-width:390px}
.pg-media.portrait img{aspect-ratio:4/5;object-position:50% 18%}
.pg-media img{max-height:min(68svh,560px)}

button.tl{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:600}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pg.slim{padding-bottom:clamp(36px,4vw,60px)}

/* ---------- section grounds ---------- */
.bg-w{background:var(--bg)}
.bg-a{background:var(--c-about)}
.bg-b{background:var(--c-kurse)}
.bg-t{background:var(--c-trainer)}
.bg-p{background:var(--c-probe)}
.bg-f{background:var(--c-fees)}
.sec.tight{padding-block:clamp(40px,4.4vw,64px)}

/* ---------- running text ---------- */
.prose{max-width:68ch}
.prose>*+*{margin-top:16px}
.prose h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.08;margin-top:clamp(34px,4vw,52px)}
.prose h3{font-size:var(--fs-h3);margin-top:clamp(26px,3vw,36px)}
.prose>:first-child{margin-top:0}
.prose h2+*,.prose h3+*{margin-top:12px}
.prose ul>li{position:relative;padding-left:24px}
.prose ul>li+li{margin-top:8px}
.prose ul>li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:3px;border-radius:2px;background:var(--blue)}
.prose a{color:var(--blue-text);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.prose strong{color:var(--ink);font-weight:600}
.prose .big{font-size:var(--fs-h3l);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink);max-width:30ch}

/* two columns: text and a picture or a card */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.duo.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.stick{position:sticky;top:calc(var(--hdr-h) + 28px)}
.probe-side{display:grid;gap:clamp(14px,1.6vw,22px)}
.probe-side .mapbox{min-height:320px}

/* ---------- "auf einen Blick": dark brand tile beside the text ---------- */
.glance .core{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,2.6vw,34px);background:var(--hdr);color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  --ink:#fff;--text:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72);--rule:rgba(255,255,255,.18);--blue:#3b97ff;--blue-text:#9fcbff;--cta:#1560d4;--hair:rgba(255,255,255,.16);--soft:rgba(255,255,255,.1)}
.glance .wm{position:absolute;z-index:-1;right:-10%;bottom:-16%;width:52%;height:auto;aspect-ratio:82/102;opacity:.14}
.glance h2,.glance h3{font-size:var(--fs-h3l);letter-spacing:-.025em}
.glance dl{margin:18px 0 24px}
.glance dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--rule)}
.glance dt{font-size:13px;font-weight:600;color:var(--mute);padding-top:2px}
.glance dd{font-weight:600;color:#fff;line-height:1.4}
.glance dd a{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
.glance dd span{display:block}
.glance .actions{gap:10px 22px}
.glance .cta{width:100%}
.glance .cta>span{flex:1}
.glance ul.miles{margin:18px 0 0}

/* ---------- benefit list: each line with its own icon circle ---------- */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:clamp(22px,2.6vw,32px)}
.pros li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--hi)}
.pros .ic{width:40px;height:40px}
.pros .ic svg{width:18px;height:18px}
.pros b{display:block;font-weight:800;color:var(--ink);line-height:1.25}
.pros p{margin-top:4px;font-size:var(--fs-s);line-height:1.5;color:var(--mute)}
.pros li>p:only-of-type{margin-top:8px;font-size:var(--fs-b);font-weight:600;color:var(--ink);line-height:1.4}
.pros.one{grid-template-columns:1fr}
.callout{margin-top:clamp(22px,2.6vw,32px);padding:clamp(18px,2vw,26px);border-radius:22px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair)}
.callout b{display:block;font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.callout p{max-width:60ch}
.callout .actions{margin-top:18px}

/* ---------- course cards ---------- */
.kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.kc{display:block;min-width:0;transition:opacity 1s var(--ease),transform .6s var(--ease),filter 1s var(--ease),box-shadow .6s var(--ease);transition-delay:var(--d,0s),0s,var(--d,0s),0s}
.kc .core{height:100%;display:flex;flex-direction:column;padding:8px 8px 20px;background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.kc-img{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:calc(var(--rad-l) - 6px);background:var(--soft-2)}
.kc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.kc-img .tag{position:absolute;left:12px;top:12px;background:rgba(11,28,62,.62);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kc-img .tag::before{background:#3b97ff}
.kc-b{display:flex;flex-direction:column;flex:1;padding:18px 14px 0}
.kc strong{font-weight:800;font-size:var(--fs-h3l);letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.kc-t{display:block;margin-top:8px;font-size:var(--fs-s);font-weight:600;color:var(--blue-text);font-variant-numeric:tabular-nums}
.kc-d{display:block;margin-top:10px;font-size:var(--fs-s);line-height:1.55;color:var(--mute)}
.kc-go{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;font-weight:600;color:var(--ink)}
.kc-go .arw{width:40px;height:40px}
.kc.w1,.kc.w3{grid-column:span 2}
.kc.w1 .kc-img,.kc.w3 .kc-img{aspect-ratio:auto;height:clamp(200px,17vw,250px)}
.kgrid.sm{display:flex;flex-wrap:wrap;justify-content:center}
.kgrid.sm .kc{width:calc((100% - 3 * clamp(14px,1.6vw,22px)) / 4)}
.kgrid.sm .kc-d{display:none}
.kgrid.sm .kc strong{font-size:var(--fs-h3)}
@media (hover:hover) and (pointer:fine){
  .kc:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--hair),0 44px 70px -44px rgba(11,63,150,.6)}
  .kc:hover .kc-img img{transform:scale(1.05)}
  .kc:hover .arw{transform:translate(3px,-1px) scale(1.08);background:var(--cta)}
  .crumbs a:hover{color:#fff;background-size:100% 2px}
}
.kc:focus-visible .arw{background:var(--cta)}

/* other courses: compact rows */
.others{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.others>a{width:calc((100% - 20px) / 3)}
.others.two{justify-content:flex-start}
.others.two>a{width:calc((100% - 10px) / 2)}
.others a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:84px;padding:10px 14px 10px 10px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--hi);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.others img{width:64px;height:64px;object-fit:cover;border-radius:14px}
.others b{display:block;font-weight:800;color:var(--ink);line-height:1.2}
.others small{display:block;margin-top:2px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.others .arw{width:36px;height:36px;background:var(--soft);color:var(--blue-text);box-shadow:inset 0 0 0 1px var(--hair)}
@media (hover:hover) and (pointer:fine){
  .others a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--hair),0 26px 44px -30px rgba(11,63,150,.6)}
  .others a:hover .arw{background:var(--blue);color:#fff;transform:translate(3px,-1px)}
}

/* ---------- trainers ---------- */
.tgrid{--tg:clamp(14px,1.6vw,22px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2vw,28px) var(--tg)}
.tgrid .tr{min-width:0;width:calc((100% - 3 * var(--tg)) / 4)}
.tgrid div.tr .tr-img::after{display:none}
.tgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.coach .core{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;padding:8px;background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.coach-img{display:block;overflow:hidden;aspect-ratio:4/5;border-radius:calc(var(--rad-l) - 6px);background:var(--soft-2)}
.coach-img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 1.2s var(--ease)}
.coach-b{display:grid;justify-items:start;gap:12px;padding:clamp(12px,2vw,28px) clamp(12px,2vw,28px) clamp(12px,2vw,28px) 0}
.coach-b h3{font-size:var(--fs-h3l);letter-spacing:-.025em}
.coach-b p{max-width:62ch}
.coach-b ul.miles{width:100%}
@media (hover:hover) and (pointer:fine){.coach-img:hover img{transform:scale(1.04)}}

/* milestones / achievements */
.miles{display:grid;gap:0}
.miles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rule);font-weight:600;color:var(--ink);line-height:1.35}
.miles li::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233b97ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 3.5l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.6-4.8 2.6.9-5.4-3.9-3.8 5.4-.8z'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1px var(--hair)}
.miles .grp{display:block;padding:18px 0 4px;border:0;font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.miles .grp::before{display:none}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chipset a,.chipset span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair);font-size:var(--fs-s);font-weight:600;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.chipset a:hover{background:var(--blue);color:#fff}}

/* ---------- prices ---------- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.pcard .core{height:100%;padding:clamp(18px,2.4vw,32px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.pcard h2{font-size:var(--fs-h3l);letter-spacing:-.025em}
.pcard .pc-sub{margin:8px 0 14px;font-size:var(--fs-s);color:var(--mute)}
.pcard .fee-table td{font-size:clamp(17px,1.6vw,21px)}
.pcard .fee-table th:first-child{width:25%}
.pcard .fee-table td:first-child{white-space:nowrap;font-size:var(--fs-s)}
.pcard.fam .fee-table .all{background:var(--soft-2)}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(18px,2vw,26px)}
.info li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--hi);font-weight:600;color:var(--ink);line-height:1.35}
.info .ic{width:42px;height:42px}
.info .ic svg{width:19px;height:19px}

/* ---------- forms ---------- */
.fwrap{position:relative}
.fcard .core{padding:clamp(20px,2.8vw,40px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.fcard h2{font-size:var(--fs-h3l);letter-spacing:-.025em}
.fcard .f-intro{margin:8px 0 clamp(20px,2.4vw,30px);font-size:var(--fs-s);color:var(--mute);max-width:56ch}
.form{display:grid;gap:20px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{min-width:0}
.fld>label,.fld>.lbl{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:var(--fs-s);font-weight:600;color:var(--ink)}
.fld .q{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair);color:var(--blue-text);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.fld label i,.fld .lbl i{font-style:normal;color:var(--blue-text)}
.fld label small{margin-left:auto;font-weight:600;font-size:12px;color:var(--mute)}
.inp{display:block;width:100%;min-height:56px;padding:14px 18px;border:0;border-radius:var(--rad);background:var(--slot);box-shadow:inset 0 0 0 1px var(--hair);font:inherit;font-size:var(--fs-b);color:var(--ink);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.inp::placeholder{color:var(--mute);opacity:.85}
select.inp{-webkit-appearance:none;appearance:none;padding-right:52px;cursor:pointer;background:var(--slot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23007bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 18px center/20px no-repeat}
select.inp:invalid{color:var(--mute)}
select.inp option{color:#12213d}
textarea.inp{min-height:140px;resize:vertical;line-height:1.5}
.inp:hover{box-shadow:inset 0 0 0 1px var(--rule)}
.inp:focus{outline:0;background-color:var(--surface);box-shadow:inset 0 0 0 2px var(--blue),0 0 0 5px rgba(0,123,255,.16)}
.bad .inp,.bad .phone-cc-btn{box-shadow:inset 0 0 0 2px #d63b3b}
.bad .inp:focus,.bad .phone-cc-btn:focus{box-shadow:inset 0 0 0 2px #d63b3b,0 0 0 5px rgba(214,59,59,.16)}
.phone-row{display:flex;align-items:stretch;gap:8px}
.phone-row>.inp{flex:1;min-width:0}
.phone-cc{position:relative;flex:none}
.phone-cc.open{z-index:30}
.phone-cc-btn{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 14px;border:0;border-radius:var(--rad);background:var(--slot);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.phone-cc-btn:hover{box-shadow:inset 0 0 0 1px var(--rule)}
.phone-cc-btn:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--blue),0 0 0 5px rgba(0,123,255,.16)}
.phone-cc-flag{display:block;width:22px;height:16px;flex:none;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(15,35,71,.22)}
.phone-cc-flag img{display:block;width:22px;height:16px;max-width:none;object-fit:cover}
.phone-cc-btn::after{content:"";width:7px;height:7px;margin-left:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65}
.phone-cc-dial{font-variant-numeric:tabular-nums}
.phone-cc-panel{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:min(320px,78vw);padding:8px;border-radius:16px;background:var(--surface);box-shadow:0 16px 40px rgba(15,35,71,.18),inset 0 0 0 1px var(--hair)}
.phone-cc-search{width:100%;min-height:40px;margin-bottom:6px;padding:8px 12px;border:0;border-radius:10px;background:var(--slot);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);font:inherit}
.phone-cc-list{max-height:240px;overflow:auto;display:grid;gap:2px}
.phone-cc-opt{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.phone-cc-opt:hover,.phone-cc-opt[aria-selected="true"]{background:var(--soft)}
.phone-cc-name{flex:1;min-width:0}
.phone-cc-opt .phone-cc-dial{color:var(--mute);font-weight:700}
.ferr{margin-top:7px;font-size:13px;font-weight:600;line-height:1.35;color:#c42d2d}
.ferr:empty{display:none}
.ferr::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:50%;background:#d63b3b;color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
:root[data-mode="dark"] .ferr{color:#ff9a9a}
.chk{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;cursor:pointer;font-size:var(--fs-s);line-height:1.45;color:var(--text)}
.chk input{position:absolute;z-index:1;left:0;top:0;width:26px;height:26px;margin:0;opacity:0;cursor:pointer}
.chk .box{position:relative;width:26px;height:26px;border-radius:8px;background:var(--slot);box-shadow:inset 0 0 0 1.5px var(--rule);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.chk .box::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/18px no-repeat;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.chk input:checked+.box{background:var(--blue);box-shadow:none}
.chk input:checked+.box::after{transform:none}
.chk input:focus-visible+.box{outline:3px solid var(--blue);outline-offset:3px}
.chk>span:not(.box){padding-top:3px}
.chk a{color:var(--blue-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.chk .ferr{grid-column:2}
.chk.bad .box{box-shadow:inset 0 0 0 2px #d63b3b}
.turnstile-slot{width:100%;min-height:68px;margin:6px 0 2px}
.turnstile-slot>div,.turnstile-slot iframe{width:100%!important;max-width:100%}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:6px}
.f-foot p{font-size:13px;color:var(--mute)}
.fwrap.sent .form{display:none}
.fwrap.sent .f-intro{display:none}
.done{text-align:left;outline:0}
.done .ok{position:relative;display:grid;place-items:center;width:76px;height:76px;margin-bottom:22px;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 18px 40px -16px rgba(0,123,255,.7)}
.done .ok svg{width:34px;height:34px}
.done .ok path{stroke-dasharray:30;stroke-dashoffset:30;animation:okdraw .6s var(--ease) .25s forwards}
.done .ok::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--blue);animation:msp 1.8s var(--ease) .3s 2}
@keyframes okdraw{to{stroke-dashoffset:0}}
.done:not([hidden]){animation:fadeup .7s var(--ease) both}
.done h2{font-size:var(--fs-h3l)}
.done>p{margin-top:10px;max-width:52ch}
.fsum{margin:22px 0 26px;border-top:1px solid var(--rule)}
.fsum li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-s);overflow-wrap:anywhere}
.fsum b{font-weight:600;color:var(--mute)}
.side-list{display:grid;gap:8px;margin-top:22px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.qa{border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 var(--hi);transition:box-shadow .5s var(--ease),background .5s var(--ease)}
.qa summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-height:74px;padding:14px 14px 14px clamp(18px,2vw,26px);cursor:pointer;font-weight:800;font-size:var(--fs-l);letter-spacing:-.015em;line-height:1.3;color:var(--ink);border-radius:22px;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:44px;height:44px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair);transition:background .4s var(--ease),transform .6s var(--ease)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:var(--blue-text);transition:transform .5s var(--ease),background .4s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open]{box-shadow:inset 0 0 0 2px var(--blue),0 30px 50px -36px rgba(11,63,150,.55)}
.qa[open] summary i{background:var(--blue);transform:rotate(180deg)}
.qa[open] summary i::before,.qa[open] summary i::after{background:#fff}
.qa[open] summary i::after{transform:rotate(0)}
.qa-a{padding:0 clamp(18px,2vw,26px) 24px;max-width:72ch}
.qa[open] .qa-a{animation:ansin .5s var(--ease) both}
.qa-a a{color:var(--blue-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .qa:not([open]):hover{box-shadow:inset 0 0 0 1px var(--rule),0 24px 40px -32px rgba(11,63,150,.5)}
  .qa:not([open]):hover summary i{background:var(--soft-2)}
}

/* ---------- contact: map loads after a click ---------- */
.mapbox{position:relative;overflow:hidden;display:grid;place-items:center;min-height:300px;border-radius:calc(var(--rad-l) - 8px);background:var(--soft) url(img/hero-bg.webp) 50% 50%/cover no-repeat}
.mapbox::before{content:"";position:absolute;inset:0;background:rgba(11,28,62,.72)}
.mapbox>div{position:relative;z-index:1;max-width:36ch;padding:24px;text-align:center;color:#fff}
.mapbox p{font-size:13px;color:rgba(255,255,255,.8);margin-top:12px}
.mapbox button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:#0f2347;font-weight:600;cursor:pointer;transition:transform .4s var(--ease),background .3s var(--ease)}
.mapbox button svg{width:20px;height:20px}
.mapbox iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0}
.mapbox.on>div{display:none}
@media (hover:hover) and (pointer:fine){.mapbox button:hover{transform:translateY(-2px);background:#e8f2ff}}

.duo .adr-t{font-size:clamp(24px,2.4vw,34px);overflow-wrap:anywhere}
.duo .adr{min-height:clamp(190px,18vw,240px)}

/* ---------- legal pages ---------- */
.legal{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.legal.solo{grid-template-columns:minmax(0,1fr);max-width:920px}
.toc{position:sticky;top:calc(var(--hdr-h) + 28px)}
.toc p{margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.toc ol{display:grid;border-left:2px solid var(--rule)}
.toc a{position:relative;display:block;padding:7px 0 7px 16px;font-size:var(--fs-s);font-weight:600;line-height:1.35;color:var(--mute);transition:color .3s var(--ease)}
.toc a::before{content:"";position:absolute;left:-2px;top:6px;bottom:6px;width:2px;background:var(--blue);transform:scaleY(0);transition:transform .4s var(--ease)}
.toc a.on,.toc a:hover{color:var(--ink)}
.toc a.on::before{transform:none}
.sheet .core{padding:clamp(22px,4vw,56px);background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.sheet .prose{max-width:72ch}
.par{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.par+.par{margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
.par h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;line-height:1.15;margin:0 0 14px}
.par h2 span{color:var(--blue-text)}
.par p+p,.par p+.plist,.par .plist+p,.par p+.alist{margin-top:12px}
.plist{display:grid;gap:12px}
.plist>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px}
.plist>li>b{font-weight:800;color:var(--blue-text);font-variant-numeric:tabular-nums}
.alist{display:grid;gap:6px;margin-top:10px;padding:14px 18px;border-radius:16px;background:var(--soft)}
.alist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px}
.alist li b{font-weight:600;color:var(--blue-text)}
.ltiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.ltiles>div{padding:18px 20px;border-radius:20px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--hair)}
.ltiles small{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--mute)}
.ltiles p{font-weight:600;color:var(--ink);line-height:1.5}
.ltiles a{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}
.updated{margin-top:clamp(26px,3vw,40px);font-size:var(--fs-s);color:var(--mute)}

/* ---------- blog: empty state ---------- */
.empty .core{display:grid;justify-items:center;gap:14px;padding:clamp(36px,6vw,80px) clamp(20px,4vw,48px);text-align:center;background:var(--surface);box-shadow:inset 0 1px 0 var(--hi)}
.empty .ic{width:72px;height:72px}
.empty .ic svg{width:30px;height:30px}
.empty h2{font-size:var(--fs-h3l)}
.empty p{max-width:46ch;color:var(--mute)}
.empty .actions{justify-content:center;margin-top:10px}

/* week plan page: same dark ground as on the homepage */
.plan-intro{max-width:62ch;margin-bottom:clamp(22px,2.6vw,34px);color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .kgrid{grid-template-columns:1fr 1fr}
  .kc.w3{grid-column:auto}
  .kc.w3 .kc-img{aspect-ratio:16/10;height:auto}
  .others>a{width:calc((100% - 10px) / 2)}
  .kgrid.sm .kc{width:calc((100% - clamp(14px,1.6vw,22px)) / 2)}
  .tgrid .tr{width:calc((100% - 2 * var(--tg)) / 3)}
  .info{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pg-grid,.duo,.duo.rev,.legal,.prices{grid-template-columns:1fr}
  .pg-media{justify-self:start;max-width:560px}
  .pg-media.portrait{max-width:340px}
  .stick,.toc{position:static}
  .toc{display:none}
  .coach .core{grid-template-columns:1fr}
  .coach-img{aspect-ratio:4/3.4}
  .coach-b{padding:6px 14px 18px}
  .pros{grid-template-columns:1fr}
}
@media (max-width:640px){
  .kgrid,.f-two,.ltiles{grid-template-columns:1fr}
  .kc.w1{grid-column:auto}
  .kc.w1 .kc-img{aspect-ratio:16/10;height:auto}
  .others>a,.kgrid.sm .kc{width:100%}
  .tgrid{--tg:12px;row-gap:20px}
  .tgrid .tr{width:calc((100% - var(--tg)) / 2)}
  .tgrid .tr strong{font-size:var(--fs-b)}
  .pg h1{font-size:clamp(36px,10vw,46px)}
  .pg h1.long{font-size:clamp(30px,8.4vw,40px)}
  .pg .cta.lg{width:100%}
  .pg .cta.lg>span{flex:1}
  .fsum li{grid-template-columns:1fr;gap:2px}
  .glance dl>div{grid-template-columns:84px minmax(0,1fr)}
  .f-foot .cta{width:100%}
  .f-foot .cta>span{flex:1}
  .qa summary{font-size:var(--fs-b)}
  .plist>li{grid-template-columns:28px minmax(0,1fr)}
  .sheet .core{padding:22px 16px}
  .sheet.bz{padding:5px}
  .alist{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){.pg::before{animation:none}}
.fwrap.sent .core>h2:first-child{display:none}