/* Motion inspired by the supplied reference, using die baustelle brand colors. */
:root{--hover-ease:cubic-bezier(.2,.8,.2,1)}
.button{transition:transform .35s var(--hover-ease),background-color .25s,box-shadow .3s}
.links a,.footer a,.top a,.text-link{transition:color .25s,border-color .25s,background-size .3s}
.links a,.text-link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 2px}
.project-highlight,.frame,a.card{position:relative;isolation:isolate;transition:transform .4s var(--hover-ease),box-shadow .4s,border-color .3s}
.project-highlight::after,.frame::after,a.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(300px circle at var(--light-x,50%) var(--light-y,50%),rgba(63,216,224,.16),transparent 72%);transition:opacity .35s}
.reference-list li,.faq summary{transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
/* Keyboard users receive the same clear emphasis without pointer tracking. */
.button:focus-visible{box-shadow:0 8px 24px #087c9238}
.links a:focus-visible,.text-link:focus-visible{background-size:100% 2px}
.frame:focus-within,a.card:focus-visible{border-color:#1598a5;box-shadow:0 18px 38px #087c9220}
.frame:focus-within::after,a.card:focus-visible::after{opacity:1}
.faq summary:focus-visible{color:#086e83}
@media(hover:hover) and (pointer:fine){
 .links a:hover,.text-link:hover{background-size:100% 2px;color:#087c92}
 .footer a:hover,.top a:hover{color:#6edbe2}
 .button:hover{transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0) scale(1.02);box-shadow:0 10px 28px #087c9240}
 .button.light:hover{background:#e4f6f8;color:#0b6176}
 .button.outline:hover{background:#ffffff0f;border-color:#85d8e0}
 .button:active{transform:scale(.98)}
 .project-highlight:hover,.frame:hover,a.card:hover{transform:perspective(1000px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#1598a5;box-shadow:0 22px 45px #087c9224}
 .project-highlight:hover{border-top-color:#81e5e8;box-shadow:0 22px 45px #087c9238}
 .project-highlight:hover::after,.frame:hover::after,a.card:hover::after{opacity:1}
 .reference-list li:hover{border-color:#1598a5;box-shadow:0 6px 18px #087c9212}
 .faq summary:hover{color:#086e83;background:#ffffff66}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .button,.project-highlight,.frame,a.card,.reference-list li,.faq summary,.links a,.footer a,.top a,.text-link,.project-highlight::after,.frame::after,a.card::after{transition:none!important}
 .button:hover,.button:active,.project-highlight:hover,.frame:hover,a.card:hover{transform:none!important}
}