:root {
    --cut: 24px;
    --octa: inset(0 round var(--cut));
}
/* ==========================================================================
   REFERENZEN PAGE – Masonry + Animations
   ========================================================================== */

/* PAGE HERO */
.page-hero{padding:clamp(140px,16vw,200px) 0 clamp(40px,5vw,60px)}
.page-hero__h1{font-size:clamp(42px,8vw,90px);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:.03em;color:#fff;margin-bottom:20px}
.page-hero__sub{font-size:clamp(16px,2vw,20px);color:#fff;max-width:500px}

/* Hero animations */
.anim-hero-tag{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .3s forwards}
.anim-hero-title{opacity:0;transform:translateY(30px);animation:hUp .8s var(--ease) .5s forwards}
.anim-hero-sub{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .7s forwards}

/* MARQUEE OVERRIDE for referenzen */
.marquee--ref{margin-top:0}
.marquee--ref .marquee__inner a{font-size:clamp(15px,1.8vw,22px);font-weight:900;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;padding:0 clamp(14px,1.8vw,28px);color:var(--w80);transition:color .3s}
.marquee--ref .marquee__inner a:nth-child(4n+1){color:var(--accent)}
.marquee--ref .marquee__inner a:nth-child(4n+3){color:#fff}
.marquee--ref .marquee__inner a:hover{color:var(--accent)}

/* MASONRY GRID */
.masonry-section{padding:clamp(60px,7vw,90px) 0}
.masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:16px;grid-auto-flow:dense}

/* Card sizes */
.m-card--tall{grid-row:span 2}
.m-card--wide{grid-column:span 2}

/* Card base */
.m-card{position:relative;clip-path:var(--octa);overflow:hidden;cursor:pointer;display:block;color:#fff}
.m-card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.m-card:hover img{transform:scale(1.08);filter:brightness(.85)}

/* Overlay */
.m-card__ov{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.5vw,32px);background:linear-gradient(to top,rgba(0,25,21,.75) 0%,rgba(0,25,21,.15) 45%,transparent 65%);transition:all .5s var(--ease)}
.m-card:hover .m-card__ov{background:linear-gradient(to top,rgba(0,25,21,.85) 0%,rgba(0,25,21,.3) 50%,transparent 70%)}

/* Category tag */
.m-card__cat{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--bg);background:var(--accent);padding:5px 12px;border-radius:4px;margin-bottom:10px;align-self:flex-start;transform:translateY(10px);opacity:0;transition:all .5s var(--ease)}
.m-card:hover .m-card__cat{transform:translateY(0);opacity:1}

/* Title & text */
.m-card__ov h3{font-size:clamp(18px,2vw,24px);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.15;margin-bottom:4px;transform:translateY(10px);transition:transform .5s var(--ease)}
.m-card:hover .m-card__ov h3{transform:translateY(0)}

.m-card__ov p{font-size:14px;color:rgba(255,255,255,.8);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:all .5s var(--ease)}
.m-card:hover .m-card__ov p{max-height:60px;opacity:1;margin-top:6px}

/* CTA Section */
.ref-cta{padding:clamp(60px,7vw,90px) 0;background:var(--accent);text-align:center}
.ref-cta h2{font-size:clamp(30px,4vw,52px);color:var(--bg)}
.ref-cta p{font-size:18px;color:rgba(0,0,0,.7);margin-bottom:36px}
.ref-cta .btn{background:var(--bg);color:#fff;border-color:var(--bg)}
.ref-cta .btn:hover{background:#000;border-color:#000;transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.3)}

/* STAGGER ANIMATION for grid items */
.masonry .m-card:nth-child(1){--delay:0s}
.masonry .m-card:nth-child(2){--delay:.08s}
.masonry .m-card:nth-child(3){--delay:.16s}
.masonry .m-card:nth-child(4){--delay:.06s}
.masonry .m-card:nth-child(5){--delay:.14s}
.masonry .m-card:nth-child(6){--delay:.22s}
.masonry .m-card:nth-child(7){--delay:.04s}
.masonry .m-card:nth-child(8){--delay:.12s}
.masonry .m-card:nth-child(9){--delay:.2s}

.masonry .anim{transition-delay:var(--delay,0s)}

/* RESPONSIVE */
@media(max-width:1024px){
    .masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:260px}
    .m-card--wide{grid-column:span 1}
}
@media(max-width:768px){
    .masonry{grid-template-columns:1fr;grid-auto-rows:300px}
    .m-card--tall{grid-row:span 1}
    .m-card--wide{grid-column:span 1}
    .m-card__cat{transform:none;opacity:1}
    .m-card__ov p{max-height:60px;opacity:.8}
    .ref-cta .btn{width:100%}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .anim-hero-tag,.anim-hero-title,.anim-hero-sub{opacity:1;transform:none}
    .m-card__cat{opacity:1;transform:none}
    .m-card__ov p{max-height:60px;opacity:.8}
}