/* ANKERWERK (Personal Training): Beton und Tinte, Schwarz-Weiß ohne Farbakzent. Gebaut additiv zu demo.css. */
.training{--bg:#eceff2;--ink:#0d1219;--accent:#0d1219;--on-accent:#fff;--surface:#dfe3e8;--line:#c2c8d0;--muted:#4b5360;--dark:#0d1219;--accent-lt:#4b5360;--pad:clamp(24px,5vw,100px)}
.training h1,.training h2,.training h3{font-weight:700;letter-spacing:-.04em;word-spacing:.1em}
.training h1{font-size:clamp(44px,4.44vw,64px);line-height:1.04}
.training h2{font-size:clamp(32px,3.4vw,48px);line-height:1.08}
.training .button{background:var(--accent);color:var(--on-accent);border-radius:0;font-weight:700;font-size:15px;justify-content:center;gap:0;min-height:58px;padding-inline:30px}
.training .button:hover{background:#2a323d}
.training .text-link{font-weight:700}
.training .header{height:96px}
.training .brand{font-weight:700;letter-spacing:.07em}
.training .brand small{font-weight:400;letter-spacing:.12em}
.training .brand-symbol{border:0;background:var(--accent);color:#fff;width:46px;height:46px;font-weight:700;font-size:19px;letter-spacing:-.06em}
.training .nav-cta{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:13px 24px;font-size:13px;font-weight:700;display:inline-flex;transition:background .2s,color .2s}
.training .nav-cta:hover{background:var(--ink);color:var(--bg)}
.training #mobile-nav{top:calc(36px + 96px)}
.training #mobile-nav a:last-child{color:var(--accent);font-weight:700}

/* Hero: ein randloses Foto, ein heller Block. */
.tr-hero{position:relative;height:min(800px,calc(100dvh - 132px));min-height:580px;overflow:hidden;background:var(--surface)}
.tr-hero-img{position:absolute;inset:0;overflow:hidden}
.tr-hero-img img{object-position:50% 0%;transform-origin:50% 0}
.tr-hero-block{position:absolute;left:var(--pad);bottom:0;z-index:2;width:min(540px,calc(100% - var(--pad) * 2));padding:48px 50px 46px;background:var(--bg);color:var(--ink)}
.tr-hero-block .hero-desc{margin:22px 0 32px;max-width:34ch;color:var(--muted);font-size:17px}
.tr-hero-block h1 span{display:block}
@media(prefers-reduced-motion:no-preference){html:not(.motion-paused) .tr-hero-block{animation:tr-in 1.2s .15s var(--ease) both}}
@keyframes tr-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.tr-desk .tr-hero-img img{transform:translate3d(0,var(--py,0px),0) scale(1.1);will-change:transform}

/* Aussage: Wort für Wort am Scrollstand. */
.tr-statement{padding-block:clamp(96px,13vw,190px)}
.tr-words{font-size:clamp(30px,4.2vw,64px);line-height:1.14;max-width:21em;text-wrap:pretty}

/* Signaturszene: Ihr Probetraining in vier Schritten. */
.tr-scene{background:var(--dark);color:#eef1f5;--accent:#eef1f5;--on-accent:#0d1219;--accent-lt:#c4cad4;--ink:#eef1f5;--line:#2c3441;--muted:#aab2bf}
.tr-scene .small-label{color:var(--accent-lt);margin-bottom:20px}
.tr-sticky{max-width:1700px;margin:auto;padding:clamp(72px,10vw,140px) var(--pad)}
.tr-head{margin-bottom:clamp(36px,5vw,64px)}
.tr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(24px,3vw,48px)}
.tr-steps>li{display:flex;flex-direction:column;min-width:0}
.tr-fig{order:-1;margin:0;aspect-ratio:3/2;overflow:hidden;position:relative;background:#1a212b}
.tr-text{padding-top:22px}
.tr-n{display:block;font-size:13px;font-weight:700;color:#c4cad4;margin-bottom:10px;letter-spacing:.06em}
.tr-text h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:12px}
.tr-go{font:inherit;color:inherit;letter-spacing:inherit;text-align:left;padding:0;cursor:default}
.tr-text p{color:#eef1f5;font-size:16px;max-width:40ch}
.tr-num{display:none}
.tr-fignote{font-size:12px;color:#aab2bf;margin-top:28px;max-width:none}

.tr-pin{--tail:clamp(110px,18vh,200px);height:calc(500vh + var(--tail));padding-bottom:var(--tail);box-sizing:border-box}
.tr-pin .tr-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-block:clamp(32px,5.5vh,64px) clamp(20px,3vh,32px);overflow:hidden}
.tr-pin .tr-head{margin-bottom:clamp(16px,3vh,36px);flex:none}
.tr-pin .tr-head h2{font-size:clamp(30px,3vw,44px)}
.tr-pin .tr-head .small-label{margin-bottom:12px}
.tr-pin .tr-steps{flex:1;min-height:0;position:relative;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(4,auto);gap:0 clamp(32px,5vw,90px);align-content:stretch}
.tr-pin .tr-steps>li{display:contents}
.tr-pin .tr-text{grid-column:1;align-self:center;padding:0 0 0 40px;opacity:.55}
.tr-pin .tr-text:before{content:none}
.tr-pin .tr-text h3{font-size:clamp(24px,2.3vw,34px);margin-bottom:8px}
.tr-pin .tr-text p{font-size:16px}
.tr-pin .tr-n{margin-bottom:6px}
.tr-pin .tr-go{cursor:pointer}
.tr-pin .tr-fig{grid-column:2;grid-row:1/span 4;order:0;aspect-ratio:auto;min-height:0}
.tr-pin .tr-fig img{position:absolute;inset:0;transform:scale(1.1)}
.tr-pin .tr-steps>li:not(:first-child) .tr-fig{clip-path:inset(100% 0 0 0)}
.tr-pin .tr-steps:before,.tr-pin .tr-steps:after{content:'';position:absolute;left:0;top:6%;bottom:6%;width:2px;background:var(--line)}
.tr-pin .tr-steps:after{background:var(--accent-lt);transform-origin:top;transform:scaleY(var(--p,0))}
.tr-pin .tr-num{--nb:clamp(92px,9.5vw,144px);display:block;grid-column:2;grid-row:1/span 4;align-self:end;justify-self:start;margin-left:-28px;z-index:3;width:var(--nb);height:var(--nb);overflow:hidden;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:calc(var(--nb) * .66);letter-spacing:-.05em;line-height:1}
.tr-pin .tr-num-col{display:block;height:calc(var(--nb) * 4);will-change:transform}
.tr-pin .tr-num-col span{display:flex;align-items:center;justify-content:center;height:var(--nb)}
.tr-pin .tr-fignote{flex:none;margin-top:14px}

/* Bildöffnung. */
.tr-band figure{margin:0;height:clamp(420px,84vh,860px);overflow:hidden;background:var(--surface)}
.tr-band img{object-position:50% 55%}
.tr-desk .tr-band figure{clip-path:inset(14% 18% 14% 18%)}
.tr-desk .tr-band img{transform:scale(1.12)}


.tr-bandnote{padding:16px var(--pad) 0;font-size:13px;color:var(--muted);max-width:none}
/* Schwerpunkte als Liste. */
.tr-focus{padding-block:clamp(90px,11vw,170px)}
.tr-focus-head{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:24px clamp(32px,5vw,90px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.tr-focus-head p{color:var(--muted);max-width:40ch}
.tr-focus-row{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:16px clamp(32px,5vw,90px);padding:clamp(26px,3.2vw,44px) 0;border-top:1px solid var(--line);align-items:center}
.tr-focus-row:last-child{border-bottom:1px solid var(--line)}
.tr-focus-row h3{font-size:clamp(44px,6.2vw,92px);line-height:.98;letter-spacing:-.05em}
.tr-focus-row p{color:var(--muted);max-width:40ch}

/* Studio. */
.tr-studio{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(32px,5vw,90px);align-items:center;max-width:1700px;margin:auto;padding:0 var(--pad) clamp(90px,11vw,170px)}
.tr-studio-img{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.tr-studio-img img{object-position:50% 50%}
.tr-studio-copy h2{margin-bottom:26px}
.tr-studio-copy p{color:var(--muted);max-width:38ch}
.tr-studio-copy .image-note{margin-top:22px}

.tr-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(40px,7vw,100px);padding-top:clamp(20px,4vw,60px)}
.tr-faq>div:first-child>p{color:var(--muted);margin-top:20px;font-size:15px}
.tr-faq details{border-top:1px solid var(--line)}
.tr-faq details:last-child{border-bottom:1px solid var(--line)}
.tr-faq details>p{padding:0 0 26px;max-width:56ch;color:var(--muted);font-size:15px}
.tr-faq summary{font-weight:700;letter-spacing:-.02em;word-spacing:.08em;font-size:clamp(17px,1.5vw,20px)}

/* Kontakt: zwei Antworten, ein Knopf. */
.tr-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);background:var(--surface);max-width:none;align-items:start;padding-inline:var(--pad)}
.tr-contact-copy h2{margin-bottom:24px;max-width:12ch}
.tr-contact-copy p{color:var(--muted);max-width:40ch}
.tr-contact-box{background:#fff;border:1px solid #9aa3b0;padding:clamp(28px,3.4vw,48px)}
.tr-form fieldset{border:0;margin:0 0 30px;padding:0;min-width:0}
.tr-form legend{padding:0;margin-bottom:14px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.tr-chips{display:flex;flex-wrap:wrap;gap:10px}
.tr-chips label{position:relative;display:block}
.tr-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tr-chips span{display:block;padding:15px 24px;min-height:52px;border:1px solid #9aa3b0;background:#fff;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.tr-chips input:hover+span{border-color:var(--ink)}
.tr-chips input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.tr-chips input:checked+span:before{content:'\2713\00a0'}
.tr-chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.tr-error{color:#b3261e;font-size:14px;margin:-8px 0 18px}
.tr-form .button{width:100%}
.tr-form-note{font-size:13px;color:var(--muted);margin-top:18px;max-width:none}
.tr-form-note a{text-decoration:underline;text-underline-offset:3px}
.tr-result{outline:0}
.tr-result h3{font-size:clamp(26px,2.4vw,34px);margin:6px 0 14px}
.tr-result p{color:var(--muted);margin-top:12px;max-width:46ch}
.tr-result .tr-choice{color:var(--ink);font-weight:700}
.tr-result .button{margin-top:26px;width:100%}
.tr-result .text-link{margin-top:18px;display:inline-flex}
.tr-result .result-check{border-radius:0}

/* Fuß in Spalten. */
.tr-footer{padding:clamp(56px,7vw,100px) var(--pad) 28px}
.tr-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px 48px;padding-bottom:clamp(40px,5vw,72px);font-size:14px}
.tr-foot-name{display:block;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:.04em;margin-bottom:14px}
.tr-foot-grid p{color:var(--muted);max-width:30ch}
.tr-footer nav{display:block}
.tr-footer nav h2{font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tr-footer nav a{display:flex;align-items:center;min-height:44px;padding:4px 0}
.tr-footer nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Einblenden: nur Deckkraft und 24 px. */
.tr-motion .tr-reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.tr-motion .tr-reveal.is-in{opacity:1;transform:none}

/* Startseite der Studien: Karte. */
.collection-training{grid-column:1/-1}
.collection-training .collection-image{height:clamp(300px,36vw,520px)}
.collection-training .collection-image>span{left:0;bottom:0;padding:16px 26px;background:#0d1219;color:#fff;font-weight:700}

@media(max-width:1100px){.tr-hero-block{padding:42px 40px 38px}.tr-focus-row{grid-template-columns:1fr;gap:14px}.tr-focus-head{grid-template-columns:1fr}.tr-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:880px){.tr-faq{display:block}.tr-faq>div:first-child{margin-bottom:30px}.tr-studio,.tr-contact{display:block}.tr-studio-copy{margin-top:36px}.tr-contact-box{margin-top:36px}.tr-studio-img{aspect-ratio:4/3}}
@media(max-width:720px){
 .tr-hero{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;background:none}
 .tr-hero-img{position:relative;inset:auto;height:clamp(320px,88vw,480px)}.tr-hero-img img{object-position:62% 60%}
 .tr-hero-block{position:relative;left:auto;bottom:auto;width:auto;margin:-44px 0 0;padding:30px 24px 32px}
 .tr-hero-block .hero-desc{font-size:16px;margin:16px 0 24px}
 .training h1{font-size:44px}
 .tr-statement{padding-block:80px}
 .tr-words{font-size:30px}
 .tr-steps{grid-template-columns:1fr}
 .tr-band figure{height:clamp(320px,90vw,520px)}
 .tr-foot-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.training .nav-cta{display:none}.training .header{height:84px}.training #mobile-nav{top:116px}.training .brand-symbol{width:38px;height:38px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.tr-hero-block,.tr-reveal{animation:none!important}}