@font-face{font-family:Archivo;src:url("fonts/archivo.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Gotu;src:url("fonts/gotu.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dancing Script";src:url("fonts/dancing-script.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* Referenzwerte, am 26.09.2026 aus den sichtbaren Seitenstilen gelesen. */
  --surface:#faf9f7;
  --paper:#fff;
  --sand:#f2e9e3;
  --button:#e2d2d1;
  --accent:#9a7b89;
  --text:#645d62;
  /* Ergänzende Töne für Kontrast und Linien. */
  --button-text:#59434d;
  --line:#ded6d7;
  --heading:#514a4f;
  --body:Archivo,Arial,sans-serif;
  --display:Gotu,Arial,sans-serif;
  --script:"Dancing Script","Segoe Script",cursive;
  --header-height:90px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--surface);color:var(--text);font:400 16px/1.65 var(--body);overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--button-text);outline-offset:5px}
h1,h2,h3,h4,p,figure{margin-top:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:400}
h2{color:var(--heading);font-size:clamp(32px,4vw,50px);line-height:1.3;margin-bottom:26px}
h3{font-size:25px;line-height:1.4;margin-bottom:14px}
p{margin-bottom:22px}
strong{font-weight:600}
button svg{pointer-events:none}
[hidden]{display:none!important}
.wrap{width:min(1180px,calc(100% - 60px));margin-inline:auto}
.narrow{max-width:880px}
.section{padding-block:110px}
.band{padding-block:92px}
.white{background:var(--paper)}
.sand{background:var(--sand)}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--button-text);margin-bottom:18px}
.fine-print{font-size:13px;line-height:1.65;margin-top:20px}
.text-link{display:inline-flex;gap:16px;align-items:center;border-bottom:1px solid var(--accent);padding-bottom:4px;color:var(--button-text)}
.text-link:hover{border-bottom-color:var(--button-text)}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:10px 20px;background:var(--paper);color:var(--heading)}
.skip-link:focus{top:12px}

/* Kleine, ruhige Navigation wie in der Referenz. */
.site-header{
  position:sticky;top:0;z-index:40;height:var(--header-height);
  display:grid;grid-template-columns:160px 1fr 130px;align-items:center;gap:20px;
  padding:0 32px;background:var(--surface);transition:box-shadow .3s ease;
}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(100,93,98,.12)}
.brand{justify-self:start}
.brand img{width:74px;height:70px;object-fit:contain}
#main-nav{display:flex;align-items:center;justify-content:center;gap:27px;font-size:14px;line-height:1.3}
#main-nav>a,#main-nav summary{padding:15px 0;white-space:nowrap}
#main-nav a:hover,#main-nav [aria-current="page"],#main-nav summary.active{color:#252225}
#main-nav [aria-current="page"]{font-weight:600}
.nav-dropdown{position:relative}
.nav-dropdown summary{cursor:pointer;list-style:none}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown summary span{display:inline-block;margin-left:4px}
.nav-dropdown[open] summary span{transform:rotate(180deg)}
.nav-submenu{
  position:absolute;top:45px;left:-22px;width:236px;padding:12px 0;
  background:var(--surface);box-shadow:0 10px 35px #514a4f17;border:1px solid var(--line);
}
.nav-submenu a{display:block;padding:12px 22px}
.nav-submenu a:hover{background:var(--sand)}
.menu-toggle{display:none}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:50px;border:0;border-radius:30px;padding:13px 25px;
  background:var(--button);color:var(--button-text);font-size:14px;font-weight:600;
  transition:background .22s ease,transform .22s ease;
}
.button-icon{font-size:17px;font-weight:400;line-height:1}
.button:hover{background:#d6c2c6;transform:translateY(-2px)}
.button:disabled{opacity:.65;cursor:default;transform:none}
.header-cta{justify-self:end}
.header-cta .button-icon{display:none}

/* Vollformatfoto mit mittiger, gut lesbarer Schrift. */
.hero{position:relative;display:grid;place-items:center;min-height:580px;height:calc(100svh - var(--header-height));max-height:850px;overflow:hidden}
.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-image{object-fit:cover;object-position:center 46%;filter:saturate(.9) contrast(.96) brightness(.86)}
.hero-shade{background:linear-gradient(180deg,#28202814,#28202820)}
.hero-content{position:relative;z-index:1;text-align:center;width:calc(100% - 36px);padding-top:12px}
.hero h1{font-size:clamp(62px,7.8vw,105px);line-height:1.2;letter-spacing:.02em;color:white;margin-bottom:0;text-shadow:0 2px 16px #0005}
.hero h1 span{display:block;font-size:.91em;margin-top:15px;letter-spacing:0}
.hero h1{animation:title-in 1.2s both}
.page-title{text-align:center;padding:88px 24px 96px;min-height:270px;background:var(--surface)}
.page-title h1{font-size:clamp(45px,6.3vw,82px);line-height:1.25;margin:0;color:var(--text);animation:title-in .95s both}
.page-title p{max-width:750px;margin:26px auto 0;font-size:17px;animation:title-in 1s .15s both}
@keyframes title-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.statement{text-align:center;padding-block:105px 85px}
.statement p{font:400 clamp(27px,2.9vw,37px)/1.45 var(--display);max-width:1080px;margin:0 auto}
.signature{text-align:center;padding-bottom:110px}
.signature>img{width:136px;height:136px;object-fit:contain;margin:0 auto 27px}
.signature h2{font-size:28px;letter-spacing:.04em;margin-bottom:10px}
.signature>p:not(.script-heading){font-size:18px;margin-bottom:38px}
.script-heading{font:700 clamp(46px,5.8vw,79px)/1.15 var(--script);color:var(--accent);margin-bottom:24px}
.signature .script-heading{font-size:clamp(45px,5.3vw,72px)}
.benefits{border-top:1px solid var(--line);padding-block:75px 100px;text-align:center}
.benefits>.script-heading{margin-bottom:56px}
.benefit-grid,.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.benefit-grid article:nth-child(2){--delay:120ms}
.benefit-grid article:nth-child(3){--delay:240ms}
.line-mark{width:82px;height:82px;margin:0 auto 27px;fill:none;stroke:var(--heading);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.benefit-grid h3{color:var(--accent);font-size:24px}
.benefit-grid p{max-width:310px;margin:0 auto;line-height:1.55}
.split{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}
.copy{max-width:520px}
.copy>p{line-height:1.7}
.copy .button{margin-top:12px}
.photo{margin:0;width:100%;overflow:hidden;background:var(--button)}
.photo-button{display:block;position:relative;border:0;background:none;padding:0;width:100%;color:var(--button-text);overflow:hidden}
.photo-button img{width:100%;height:auto;transition:transform 1.25s var(--ease)}
.photo.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:center 42%}
.photo.about-portrait img{object-position:center 40%}
.photo-expand{position:absolute;bottom:14px;right:14px;background:var(--surface);width:35px;height:35px;border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.photo-button:hover .photo-expand,.photo-button:focus-visible .photo-expand{opacity:1}
.ai-image-marker{position:absolute;right:12px;bottom:8px;z-index:2;color:#fff;font:700 20px/1 Arial,sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.photo.ai-image .photo-expand{top:14px;bottom:auto}
.ai-disclosure{margin-top:18px;margin-bottom:18px;text-align:right;font-size:11px;line-height:1.4;color:var(--text);opacity:.75}
.photo-button:hover img{transform:scale(1.025)}
.section-heading{text-align:center;max-width:860px;margin:0 auto 65px}
.section-heading>p:not(.script-heading){max-width:710px;margin-inline:auto}
.section-heading h2{margin-bottom:22px}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:66px 55px}
.course-card-image{display:block;position:relative;overflow:hidden;margin-bottom:25px}
.course-card-image img{width:100%;aspect-ratio:1.7;object-fit:cover;object-position:center 39%;transition:transform 1s var(--ease)}
.course-card-image:hover img{transform:scale(1.04)}
.photo img[src$="bodyfit-workouts-strand.jpg"]{object-position:center 56%;transform:scale(1.25) translateX(-13%)}
.photo-button:hover img[src$="bodyfit-workouts-strand.jpg"]{transform:scale(1.29) translateX(-13%)}
.course-card-image img[src$="bodyfit-workouts-strand.jpg"]{object-position:center 37%;transform:scale(1.2) translateX(-11%)}
.course-card-image:hover img[src$="bodyfit-workouts-strand.jpg"]{transform:scale(1.24) translateX(-11%)}
.course-index{position:absolute;bottom:0;left:0;background:var(--surface);padding:10px 20px;font-size:12px}
.course-card .eyebrow{margin-bottom:9px}
.course-card h3{font-size:32px;margin-bottom:14px}
.course-card p{max-width:520px;margin-bottom:20px}
.course-overview{padding-top:30px}
.schedule{border-top:1px solid var(--line)}
.schedule-head,.schedule-row{display:grid;grid-template-columns:1.1fr .9fr 1.1fr 1.05fr 26px;gap:22px;align-items:center}
.schedule-head{padding:16px 22px;background:var(--sand);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--heading)}
.schedule-row{padding:27px 22px;border-bottom:1px solid var(--line);transition:background .2s}
.schedule-row:hover{background:#e2d2d145}
.schedule-row strong{font-size:18px;font-weight:500}
.schedule-row small{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--button-text)}
.schedule-price{font-size:14px;line-height:1.5}
.schedule-row>span:last-child{font-size:23px;color:var(--accent)}
.invitation{text-align:center;padding:110px 0 120px}
.invitation h2{margin-bottom:25px}
.invitation .script-heading{margin-bottom:15px}
.invitation>.button{margin-top:12px}
.details-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:start}
.details-layout .script-heading{font-size:52px}
.facts{margin:0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:.85fr 1.2fr;gap:25px;padding:20px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:600}
.facts dd{margin:0}
.focus-grid{text-align:center}
.focus-grid>div>span{display:grid;place-items:center;margin:0 auto 24px;width:60px;height:60px;background:var(--button);border-radius:50%;font-size:13px}
.focus-grid h3{color:var(--accent)}
.focus-grid p{margin-bottom:0}
.faq{border-top:1px solid var(--line);margin-top:40px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;padding:22px 0;list-style:none;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-size:25px;font-weight:400;transition:transform .2s}
.faq details[open] summary span{transform:rotate(45deg)}
.faq details>p{max-width:750px;margin:0 0 28px}
.qualification-list>div{display:grid;grid-template-columns:65px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid #d0bec5}
.qualification-list>div:first-child{padding-top:0}
.qualification-list span{padding-top:8px;color:var(--button-text)}
.qualification-list h3{font-size:24px;margin:0}
.contact-overview{display:grid;grid-template-columns:.85fr 1.3fr;gap:80px;align-items:start}
.contact-link{display:block;margin-bottom:14px;overflow-wrap:anywhere}
.contact-link:hover{text-decoration:underline}
.contact-overview .button{margin-top:18px}
.location-panel{padding:44px 45px;background:var(--sand)}
.location-panel .script-heading{font-size:52px}
.location-panel>div{border-top:1px solid var(--line);padding-top:24px}
.location-panel>div>p{margin-top:8px}
.contact-form label{display:grid;gap:9px;font-size:14px}
.contact-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:34px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #b9a9b0;padding:12px 0;color:var(--text);background:transparent;border-radius:0;min-height:46px}
.contact-form textarea{resize:vertical}
.contact-form .fine-print{max-width:640px}
.form-status{margin-top:25px;padding:18px 22px;background:var(--sand);border-left:3px solid var(--accent)}
.legal-copy{max-width:900px;padding-top:50px}
.legal-copy>div{margin-bottom:65px}
.legal-copy h2{font-size:32px}
.legal-copy a{text-decoration:underline}
.booking-notice{margin-top:25px;margin-bottom:90px;padding:42px 46px;background:var(--sand);display:grid;grid-template-columns:1.25fr 1fr;gap:24px 55px;align-items:start}
.booking-notice h2{font-size:34px;margin-bottom:14px}
.booking-notice ul{margin:30px 0 0;padding-left:20px}
.booking-notice li{margin-bottom:12px}
.booking-links{grid-column:1/-1;display:flex;gap:28px;flex-wrap:wrap;margin:0;padding-top:8px;border-top:1px solid var(--line)}
.booking-steps{padding-bottom:30px}
.request-note{margin:24px 0 6px;padding:18px 20px;background:var(--sand);border-left:3px solid var(--accent);font-size:15px;line-height:1.65}
.contact-form .fine-print a{text-decoration:underline}
.terms-copy .terms-status{padding:18px 20px;background:var(--sand);border-left:3px solid var(--accent)}
.terms-copy h2{margin-bottom:16px}
.terms-copy p+p{margin-top:12px}
.site-footer{background:var(--paper);padding-top:70px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:50px;padding-bottom:55px}
.footer-grid>div>a:not(.footer-brand){display:block;margin-bottom:9px;font-size:14px}
.footer-grid strong{display:block;font:400 20px var(--display);margin-bottom:20px}
.footer-brand{display:block;font:400 28px var(--display);color:var(--accent);margin-bottom:17px}
.footer-grid p{font-size:14px}
.footer-grid a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding-block:24px;font-size:12px}
.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.swatch{border:1px solid var(--line);padding-bottom:20px}
.swatch>div{height:120px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.swatch h2,.swatch p,.swatch code{margin:0 18px 8px}
.swatch h2{font-size:20px}
.swatch code{font-size:13px}
.swatch p{font-size:13px}
.type-specimen{text-align:center}
.lightbox{position:fixed;padding:24px;border:0;background:var(--surface);max-width:94vw;width:max-content;max-height:94svh;overflow:auto}
.lightbox::backdrop{background:#272125df}
.lightbox img{max-height:76svh;max-width:85vw;object-fit:contain}
.lightbox p{margin:15px 0 0;font-size:13px;max-width:80vw}
.lightbox-close{position:absolute;right:6px;top:6px;width:38px;height:38px;border:0;border-radius:50%;font-size:28px;background:var(--surface);color:var(--text)}
.lightbox-open{overflow:hidden}

/* Bildaufdeckung plus sanftes Auszoomen, gemessen an imageGrowWithScaleLeft. */
.motion-ready .reveal{transition:opacity .85s var(--ease) var(--delay,0ms),transform .85s var(--ease) var(--delay,0ms)}
.motion-ready .reveal:not(.is-visible){opacity:0;transform:translateY(18px)}
.motion-ready .image-reveal{transition:clip-path 1.25s var(--ease),opacity .5s ease;transform:none}
.motion-ready .image-reveal:not(.is-visible){clip-path:inset(0 100% 0 0);transform:none}
.motion-ready .image-reveal:not(.is-visible) img{transform:scale(1.08)}
.motion-ready .image-reveal.is-visible{clip-path:inset(0 0 0 0)}
.motion-ready .image-reveal.is-visible img{transform:scale(1)}
.motion-ready .image-reveal.is-visible .photo-button:hover img{transform:scale(1.025)}
.demo-running{animation:photo-demo 1.25s var(--ease) both}
.demo-running img{animation:photo-zoom 1.25s var(--ease) both}
@keyframes photo-demo{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0);opacity:1}}
@keyframes photo-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}

@media(max-width:1050px){
  .site-header{grid-template-columns:100px 1fr 110px;gap:15px;padding-inline:22px}
  #main-nav{gap:18px;font-size:13px}
  .wrap{width:calc(100% - 48px)}
  .contact-overview{gap:45px}
  .copy h2{font-size:36px}
  .benefit-grid,.focus-grid{gap:32px}
  .palette-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--header-height:74px}
  html{scroll-padding-top:92px}
  .site-header{grid-template-columns:1fr auto;height:auto;min-height:74px;padding:8px 22px}
  .brand img{width:60px;height:56px}
  .header-cta{display:none}
  .menu-toggle{display:flex;align-items:center;gap:13px;border:0;padding:10px 0;background:none;color:var(--text);font-size:14px}
  #main-nav{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap;font-size:14px;padding-bottom:12px}
  .has-js #main-nav{display:none}
  .has-js #main-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:15px 0 12px}
  #main-nav>a,#main-nav summary{display:block;padding:13px 0}
  .nav-submenu{position:static;box-shadow:none;width:100%;border:0;border-left:1px solid var(--line);padding:0 0 5px;margin-left:8px}
  .nav-submenu a{padding:10px 18px}
  .hero{min-height:550px}
  .hero h1{font-size:70px}
  .section,.band{padding-block:78px}
  .split{gap:5%}
  .copy h2{font-size:32px}
  .details-layout{gap:35px}
  .booking-notice{gap:25px;padding:35px}
  .location-panel{padding:30px}
  .footer-grid{gap:30px}
  .motion-ready .reveal:not(.is-visible){opacity:1;transform:none}
  .motion-ready .image-reveal:not(.is-visible){clip-path:none}
  .motion-ready .image-reveal:not(.is-visible) img{transform:none}
}
@media(max-width:680px){
  .wrap{width:calc(100% - 36px)}
  .hero{min-height:560px;max-height:730px}
  .hero-image{object-position:40% center}
  .hero h1{font-size:clamp(46px,11.4vw,70px);margin-bottom:0}
  .hero h1 span{font-size:.75em;margin-top:20px}
  .page-title{padding:65px 20px 70px;min-height:0}
  .page-title h1{font-size:clamp(38px,10vw,58px)}
  .page-title p{font-size:15px}
  .statement{padding-block:75px 55px}
  .statement p{font-size:25px}
  .signature{padding-bottom:75px}
  .signature>img{width:112px;height:112px}
  .signature h2{font-size:24px}
  .signature>p:not(.script-heading){font-size:15px}
  .signature .script-heading{font-size:44px}
  .benefits{padding-block:65px 80px}
  .benefit-grid,.focus-grid,.split,.details-layout,.contact-overview,.footer-grid{grid-template-columns:1fr}
  .booking-notice{grid-template-columns:1fr;margin-bottom:60px;padding:28px 24px}
  .booking-notice ul{margin-top:0}
  .benefit-grid,.focus-grid{gap:48px}
  .split{gap:42px}
  .split.reverse .photo{order:2}
  .copy{max-width:none}
  h2,.copy h2{font-size:32px}
  .copy .button{margin-top:5px}
  .photo.portrait img{max-height:590px}
  .section-heading{margin-bottom:45px}
  .course-grid{grid-template-columns:1fr;gap:48px}
  .course-card h3{font-size:28px}
  .course-overview{padding-top:10px}
  .schedule-head{display:none}
  .schedule-row{grid-template-columns:1fr 24px;gap:9px 12px;padding:25px 8px}
  .schedule-row strong{grid-column:1}
  .schedule-row>span{grid-column:1}
  .schedule-row>span:last-child{grid-column:2;grid-row:1/5}
  .facts>div{grid-template-columns:.8fr 1.2fr;gap:16px}
  .details-layout{gap:28px}
  .details-layout .script-heading{font-size:46px}
  .invitation{padding-block:80px}
  .contact-overview{gap:42px}
  .contact-form .form-grid{grid-template-columns:1fr;gap:26px}
  .location-panel{padding:32px 24px}
  .location-panel .script-heading{font-size:44px}
  .footer-grid{gap:25px}
  .footer-bottom{flex-direction:column;gap:12px}
  .palette-grid{gap:14px}
  .swatch h2{font-size:17px}
  .lightbox{padding:15px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .motion-ready .reveal:not(.is-visible){opacity:1;transform:none}
  .motion-ready .image-reveal:not(.is-visible){clip-path:none}
  .motion-ready .image-reveal:not(.is-visible) img{transform:none}
}