/* Zusätzliche Bewegung. Bei "reduzierte Bewegung" im Betriebssystem wird alles abgeschaltet (siehe style.css). */
:root{--ease-out:cubic-bezier(.22,.8,.3,1)}

/* Header: Hintergrund über die volle Breite, Inhalt bleibt ausgerichtet */
.header{transition:height .35s var(--ease-out),margin-bottom .35s var(--ease-out),box-shadow .35s,background-color .35s}
/* Seitenhöhe bleibt konstant, wenn der Header schrumpft (verhindert Zappeln durch Scroll-Anpassung) */
@media(min-width:1101px){.compact-header .header{margin-bottom:20px}}
.header.scrolled{box-shadow:0 8px 30px #292b2d12}
.header .brand-logo{transition:transform .35s var(--ease-out)}
.header.scrolled .brand-logo{transform:scale(.92)}
.header .brand:hover .brand-logo{transform:rotate(-6deg) scale(1.04)}

/* Einblenden: gestaffelt per Animation, damit Hover-Effekte danach frei bleiben */
.motion .reveal.visible{animation:revealIn .9s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*90ms);transition:box-shadow .3s,border-color .3s,background-color .3s,transform .4s var(--ease-out)}
@keyframes revealIn{from{opacity:0;transform:translateY(34px) scale(.985)}}

/* Bilder "entschleiern" beim Einblenden (Property scale kollidiert nicht mit dem Hover-transform) */
.motion .reveal .training-photo>img{scale:1.12;transition:scale 1.5s var(--ease-out),transform .5s}
.motion .reveal.visible .training-photo>img{scale:1}

/* Hero: Elemente laufen nacheinander ein */
.hero-copy{animation:none}
.hero-copy>*{animation:enter .95s var(--ease-out) both}
.hero-copy>:nth-child(1){animation-delay:.05s}.hero-copy>:nth-child(2){animation-delay:.18s}.hero-copy>:nth-child(3){animation-delay:.34s}.hero-copy>:nth-child(4){animation-delay:.46s}.hero-copy>:nth-child(5){animation-delay:.58s}
.special-hero>div>*{animation:enter .9s var(--ease-out) both}
.special-hero>div>:nth-child(1){animation-delay:.04s}.special-hero>div>:nth-child(2){animation-delay:.14s}.special-hero>div>:nth-child(3){animation-delay:.26s}.special-hero>div>:nth-child(4){animation-delay:.38s}.special-hero>div>:nth-child(n+5){animation-delay:.5s}

/* Karten und Schaltflächen */
.focus-card,.planning-card,.special-card,.special-step,.weight-pillar,.weight-training{will-change:auto}
.motion .focus-card.visible:hover,.motion .planning-card.visible:hover,.motion .weight-pillar.visible:hover,.motion .weight-training.visible:hover{transform:translateY(-5px)}
.special-card .text-link{display:inline-block;transition:transform .3s var(--ease-out)}
.special-card:hover .text-link{transform:translateX(6px)}
.button:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.menu,.tab,[role=tab],.anatomy-toggle,.strip-dropdown-trigger{transition:color .25s,background-color .25s,transform .25s var(--ease-out)}
[role=tab]:active,.anatomy-toggle:active{transform:scale(.97)}
.service-panel.changing{animation-duration:.5s}

/* Aufklappbereiche */
details[open]>:not(summary){animation:detailsIn .4s var(--ease-out)}
@media(max-width:760px){.focus-details:not([hidden]),.planning-details:not([hidden]){animation:detailsIn .4s var(--ease-out)}}
@keyframes detailsIn{from{opacity:0;transform:translateY(-8px)}}

/* Dialoge und Cookie-Banner */
dialog[open]{animation:dialogIn .4s var(--ease-out)}
dialog[open]::backdrop{animation:fadeIn .4s ease}
.consent-banner:not([hidden]){animation:bannerIn .7s .5s var(--ease-out) both}
@keyframes dialogIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes bannerIn{from{opacity:0;transform:translateY(30px)}}

/* Ladebalken oben weicher */
.progress{transition:transform .15s linear}

/* Infoleiste: oben als Band unter dem Header, beim Scrollen eine schmalere, schwebende Leiste */
.info-pinned .info-strip{left:0;right:0;margin:0 auto;top:calc(var(--sticky-header-height) + 8px);width:min(1200px,calc(100% - 32px));border:1px solid #deddd2;border-radius:14px;box-shadow:0 10px 30px #292b2d1a;animation:stripPin .4s var(--ease-out);transition:top .35s var(--ease-out)}
.info-pinned .info-strip .strip-inner{padding-top:2px;padding-bottom:2px;padding-left:26px;padding-right:26px;font-size:.78rem}
.info-pinned .strip-location-link,.info-pinned .strip-dropdown-trigger{min-height:38px;white-space:nowrap}.info-pinned .info-strip .strip-inner{gap:12px}.info-pinned .info-strip .strip-inner>*+*{padding-left:14px}
@keyframes stripPin{from{width:100%;top:var(--sticky-header-height);border-radius:0;box-shadow:none}}
@media(max-width:760px){.info-pinned .info-strip{width:calc(100% - 16px);border-radius:12px}.info-pinned .info-strip .strip-inner{padding-left:14px;padding-right:14px}}

/* Nach-oben-Button */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:18;width:50px;height:50px;display:grid;place-items:center;padding:0;border:1px solid #d6c47780;border-radius:50%;background:var(--ink);color:var(--accent);box-shadow:0 10px 28px #292b2d33;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s .35s,background-color .25s,color .25s,box-shadow .25s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{background:var(--accent);color:var(--ink);box-shadow:0 14px 34px #292b2d40;transform:translateY(-3px)}
.to-top:active{transform:scale(.94)}
.to-top:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.to-top svg{transition:transform .3s var(--ease-out)}
.to-top:hover svg{transform:translateY(-2px)}
body:has(.consent-banner:not([hidden])) .to-top{display:none}
@media(max-width:760px){.to-top{width:46px;height:46px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}}