/* Gemeinsames Referenzmodul wie Website Design: */
.website-projects__intro{max-width:56ch;margin-bottom:var(--s4)}
.website-projects__intro p{font-size:15px;line-height:1.6;margin:0}
.website-projects__list{columns:3;column-gap:32px;list-style:none;padding:0;margin:0}
#projekt-referenzen .website-projects__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
#projekt-referenzen .website-project__media img{object-fit:contain}
.website-project{display:inline-block;vertical-align:top;width:100%;break-inside:avoid;border-top:1px solid var(--rule);padding-top:20px;margin-bottom:40px}
.website-project__link{display:block;text-decoration:none}
.website-project__link[data-plx]{transform:translateY(clamp(-16px,calc(var(--py,0) * 1px),16px))}
.website-project__link[data-plx] .website-project__media{--py:0}
@media(max-width:900px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.website-project__link[data-plx]{transform:none}}
.website-project__media{position:relative;display:block;margin:0;overflow:hidden;aspect-ratio:var(--project-ratio,16/9);background:var(--paper-deep);clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1) var(--project-delay,0s)}
.website-project__media :is(video,img){width:100%;height:100%;display:block;object-fit:cover;transform:scale(1);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.website-project__link:is(:hover,:focus-visible) .website-project__media :is(video,img){transform:scale(1.05)}}
.website-project__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-top:12px}
.website-project__head h3{font-family:"Arame";font-size:clamp(18px,1.6vw,22px);line-height:1;font-weight:700;margin:0}
.website-project__logo{display:block;width:88px;height:32px;object-fit:contain;object-position:left center;margin-top:16px}
.website-project__head span{display:inline-block;flex-shrink:0;width:.55em;height:.7em;font-size:18px;background:var(--coral);-webkit-mask:url("assets/arrow.svg") no-repeat center/contain;mask:url("assets/arrow.svg") no-repeat center/contain;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.website-project__link:is(:hover,:focus-visible) .website-project__head span{transform:translateX(2px)}
.website-project__copy{display:block;font-size:14px;line-height:1.5;color:var(--ink-60);margin-top:6px;max-width:40ch}
.website-project__industry{display:block;font-family:"Grotesk",Arial,sans-serif;font-size:11px;font-weight:700;line-height:1.45;letter-spacing:.035em;text-transform:uppercase;color:var(--coral);margin-top:8px}
.website-project__link:hover h3{color:var(--coral)}
.website-project.rv{transition-delay:var(--project-delay,0s)}
.website-project:not(.in) .website-project__media{clip-path:inset(0 0 100% 0)}
.website-project:focus-within{opacity:1;transform:none}
.website-project:focus-within .website-project__media{clip-path:inset(0)}
@media(max-width:900px),(hover:none),(pointer:coarse){.website-project__media :is(video,img){transform:none}}
@media(max-width:1000px){.website-projects__list{columns:2}}
@media(max-width:1000px){#projekt-referenzen .website-projects__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.website-projects__list{columns:1}.website-project{margin-bottom:32px}}
@media(max-width:540px){#projekt-referenzen .website-projects__list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.website-project.rv{opacity:1;transform:none;transition:none}.website-project__media{clip-path:inset(0)!important;transition:none}.website-project__media :is(video,img){transform:none}}