/* Cards turn into place as they enter the reading area. */
.cf-story-anchor { display:flex; min-width:0; perspective:1100px; perspective-origin:50% 30%; }
main .cf-story-anchor > .cf-story-card {
 width:100%; min-width:0; transform-origin:20% 35%; backface-visibility:hidden;
 transition:border-color .3s,box-shadow .3s;
}
main .cf-story-anchor > .cf-story-card.is-story-settled { transition:transform .3s,border-color .3s,box-shadow .3s; }
main .cf-story-card > .cf-story-sheen {
 position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
 opacity:0;
 background:linear-gradient(112deg,transparent 36%,#8ce8ed18 44%,#fff4 49%,#deb3ff20 53%,transparent 61%);
 background-size:300% 100%; background-repeat:no-repeat;
}
/* Keep each original icon tied to its position after adding the motion wrapper. */
[data-section="values"] .cf-story-anchor:nth-child(2) > .values-card::before { -webkit-mask-image:url(assets/img/icons/fokus.svg); mask-image:url(assets/img/icons/fokus.svg); }
[data-section="values"] .cf-story-anchor:nth-child(3) > .values-card::before { -webkit-mask-image:url(assets/img/icons/kompetenz.svg); mask-image:url(assets/img/icons/kompetenz.svg); }
@media(max-width:767px) {
 .cf-story-anchor { perspective:1000px; }
 main .cf-story-anchor > .cf-story-card { transform-origin:50% 35%; }
}
@media(prefers-reduced-motion:reduce) {
 main .cf-story-anchor > .cf-story-card { transform:none!important; opacity:1!important; }
 .cf-story-sheen { display:none; }
}