/* Scroll- und Bewegungseffekte. Greifen nur, wenn fx.js die Klasse .fx auf <html> setzt. */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:30;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--acc),var(--gold));pointer-events:none}
.top{transition:box-shadow .3s,background .3s}
.top.stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
nav a{transition:color .2s,background .2s}
nav a.on{color:var(--ink);background:var(--bg2)}

/* Einblenden beim Scrollen */
.fx .rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}
.fx h2.rv{transform:translateX(-24px)}
.fx h2.rv.in{transform:none}
.fx h2 .num{display:inline-block;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s,opacity .7s .15s}
.fx h2.rv:not(.in) .num{opacity:0;transform:translateY(14px)}

/* Hero: Auftakt und bewegtes Licht */
.fx .hero:before{transform:translate3d(0,calc(var(--sy,0) * .35px),0);animation:glow 14s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.65}to{opacity:1}}
.fx .hero .eyebrow,.fx .hero h1,.fx .hero .lead{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.fx .hero h1{animation-delay:.08s}.fx .hero .lead{animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.fx .hero h1{transform-origin:0 50%;will-change:transform}
.fx .hl{background:linear-gradient(100deg,var(--gold) 20%,#fff3d6 45%,var(--gold) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s ease-in-out 1s infinite}
@keyframes shine{0%,55%{background-position:100% 0}100%{background-position:-120% 0}}
@media (prefers-color-scheme:light){.fx .hl{background-image:linear-gradient(100deg,var(--gold) 20%,#7a5206 45%,var(--gold) 70%)}}

/* Balken und Punkte wachsen, sobald ihr Feld sichtbar wird */
.fx .fill{transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.fx .rv:not(.in) .fill{transform:scaleX(0)}
.fx .rail i{transition:left 1.1s cubic-bezier(.2,.7,.2,1),opacity .5s}
.fx .rv:not(.in) .rail i{left:0!important;opacity:0}
.fx .timeline li:before{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .15s}
.fx .timeline li.rv:not(.in):before{transform:scale(0)}

/* Karten: anheben und Lichtkegel, der dem Zeiger folgt */
.kpi,.brief,.card{position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
.fx .rv.done{transition:transform .25s,border-color .25s,box-shadow .25s;transition-delay:0s}
@media (hover:hover){
  .kpi:hover,.brief:hover,.card:hover,.fx .rv.in.kpi:hover,.fx .rv.in.brief:hover,.fx .rv.in.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 55%,var(--line));box-shadow:0 18px 40px -24px color-mix(in srgb,var(--acc) 70%,transparent)}
  .fx .kpi:after,.fx .brief:after,.fx .card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)}
  .fx .kpi:hover:after,.fx .brief:hover:after,.fx .card:hover:after{opacity:1}
}
.kpi,.brief{overflow:hidden}

@media print{.fx .rv{opacity:1!important;transform:none!important}.progress{display:none}}