/* Motion direction: warm editorial, original layout and palette. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
::selection{background:var(--gold-pale);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}
section[id]{scroll-margin-top:100px}
.skip-link{position:fixed;top:12px;left:16px;z-index:10001;padding:12px 20px;background:var(--ink);color:white;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.reading-progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--gold);z-index:10000;transform:scaleX(0);transform-origin:left;pointer-events:none}
.reveal{transition:opacity .95s var(--motion-ease),transform .95s var(--motion-ease)}
.motion-word{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.motion-word>span{display:inline-block}
.motion-ready .motion-word>span{opacity:0;transform:translateY(115%) rotate(3deg);transition:transform .95s var(--motion-ease),opacity .65s ease;transition-delay:var(--word-delay,0ms)}
.motion-ready.heading-visible .motion-word>span{opacity:1;transform:none}
.familie-media{overflow:hidden}
.familie-media>img{width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--motion-ease)}
.bread-img{transition:opacity .8s var(--motion-ease),transform 1.4s var(--motion-ease);transform:scale(1.085)}
.bread-img.active{transform:scale(1)}
.bread-step-inner{transition:opacity .65s ease,transform .85s var(--motion-ease)}
.meat-panel,.bread-final-panel{transition:flex .95s var(--motion-ease),box-shadow .5s ease}
.meat-panel img,.bread-final-panel img{transition:transform 1.3s var(--motion-ease),filter .8s ease}
.meat-panel-content{transition:translate .75s var(--motion-ease)}
.meat-panel.is-active .meat-panel-content{translate:0 -5px}
.btn-gold,.btn-outline,.nav-cta{position:relative;transition:translate .35s var(--motion-ease),box-shadow .35s ease,background-color .35s ease,color .35s ease}
.menu-item{transition:background-color .3s ease,padding .4s var(--motion-ease)}
.add-btn{transition:transform .35s var(--motion-ease),background-color .25s ease}
.add-btn.is-added{animation:added-pop .4s var(--motion-ease)}
@keyframes added-pop{50%{transform:scale(1.25) rotate(90deg)}}
.preloader-logo{animation:logo-arrive 1.8s var(--motion-ease) both}
@keyframes logo-arrive{0%{opacity:0;transform:scale(.94) translateY(8px)}35%,100%{opacity:1;transform:none}}
.preloader-shine{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 49%,rgba(255,255,255,.7) 52%,transparent 61%);background-size:300% 100%;animation:logo-glint 1.85s ease-in-out both}
@keyframes logo-glint{0%,18%{opacity:0;background-position:100% 0}28%{opacity:1}85%{opacity:1;background-position:0% 0}100%{opacity:0;background-position:0% 0}}
@media(hover:hover) and (pointer:fine){
 .familie-media:hover>img{scale:1.035}
 .btn-gold:hover,.btn-outline:hover,.nav-cta:hover{translate:0 -3px;box-shadow:0 9px 25px rgba(143,106,28,.12)}
 .menu-item:hover{background:rgba(201,147,46,.055);padding-left:10px;padding-right:10px}
 .add-btn:hover{transform:rotate(90deg)}
 .stimmen-wrap:hover .marquee-track{animation-play-state:paused}
}
@media(max-width:1080px){
 #siteNav .nav-link{transition:opacity .35s ease,translate .5s var(--motion-ease)}
 #siteNav:not(.is-open) .nav-link{opacity:0;translate:0 12px}
 #siteNav.is-open .nav-link{opacity:1;translate:0 0;transition-delay:calc(var(--nav-order,0)*35ms)}
}
/* Each mobile step carries its own photograph; no image stranded above the story. */
.mobile-step-image{display:none}
@media(max-width:900px){
 .bread-process{gap:0}
 .bread-process.has-mobile-images .bread-sticky{display:none}
 .has-mobile-images .bread-step{min-height:0;padding:0 0 48px;display:block}
 .has-mobile-images .bread-step-inner{opacity:1;transform:none}
 .mobile-step-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin:0 0 24px}
 .has-mobile-images .bread-step p{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready .motion-word>span{opacity:1;transform:none}
 .reading-progress{display:none}
 .reveal,.reveal-child,.familie-media{opacity:1!important;transform:none!important}
 .bread-step-inner{opacity:1;transform:none}
 #hero{height:auto!important}
 .hero-scroll-hint{display:none}
 .preloader{display:none}
 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media(prefers-reduced-motion:reduce){.familie-media{clip-path:none!important}#hero{--grow:0!important}}