:root {
    --cut: 24px;
    --octa: inset(0 round var(--cut));
}
/* ==========================================================================
   REFERENZ-DETAILSEITEN – Redesign
   ========================================================================== */

/* Seitenabstand unter fixierter Navigation (Impressum, Datenschutz etc.) */
.ref-top{padding:clamp(120px,14vw,160px) 0 clamp(40px,5vw,60px)}

/* 1. STATEMENT BILD – Großes Bild mit Titel-Overlay */
.ref-statement{position:relative;height:75vh;min-height:500px;overflow:hidden}
.ref-statement__img{position:absolute;top:0;right:0;bottom:0;left:0}
.ref-statement__img img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.ref-statement:hover .ref-statement__img img{transform:scale(1.04)}
.ref-statement__ov{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,25,21,.85) 0%,rgba(0,25,21,.2) 50%,transparent 100%)}
.ref-statement__content{position:absolute;bottom:0;left:0;right:0;padding:0 clamp(24px,5vw,64px) clamp(40px,5vw,70px);max-width:var(--max);margin:0 auto}
.ref-statement__cat{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#fff;background:var(--accent);padding:6px 16px;border-radius:4px;margin-bottom:16px}
.ref-statement h1{font-size:clamp(40px,7vw,80px);font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:.95;color:#fff;margin-bottom:12px}
.ref-statement__sub{font-size:clamp(16px,1.8vw,20px);color:#fff;max-width:550px}

/* Statement animations */
.ref-statement__cat{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .3s forwards}
.ref-statement h1{opacity:0;transform:translateY(30px);animation:hUp .8s var(--ease) .5s forwards}
.ref-statement__sub{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .7s forwards}

/* 2. HORIZONTAL SCROLL GALERIE */
.ref-scroll{padding:clamp(40px,5vw,60px) 0;overflow:hidden;position:relative}
.ref-scroll__wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 clamp(50px,6vw,80px)}
.ref-scroll__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;scroll-behavior:smooth;touch-action:pan-x}
.ref-scroll__track::-webkit-scrollbar{display:none}
.ref-scroll__track:active{cursor:grabbing}
.ref-scroll__item{flex:0 0 auto;width:clamp(220px,30vw,360px);aspect-ratio:4/3;clip-path:var(--octa);overflow:hidden;position:relative;scroll-snap-align:start}
.ref-scroll__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ref-scroll__item:hover img{transform:scale(1.06)}
.ref-scroll__label{position:absolute;bottom:14px;left:14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:rgba(0,25,21,.6);padding:5px 12px;border-radius:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Pfeile */
.ref-scroll__arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;color:#fff;border:none;cursor:pointer;font-size:48px;display:flex;align-items:center;justify-content:center;z-index:5;transition:color .3s,transform .3s;padding:8px;min-width:48px;min-height:48px;line-height:1}
.ref-scroll__arrow:hover{color:var(--accent)}
.ref-scroll__arrow--left:hover{transform:translateY(-50%) translateX(-4px)}
.ref-scroll__arrow--right:hover{transform:translateY(-50%) translateX(4px)}
.ref-scroll__arrow--left{left:0}
.ref-scroll__arrow--right{right:0}

/* 3. ANIMIERTE FAKTEN-LEISTE */
.ref-facts{padding:clamp(40px,5vw,60px) 0;border-top:1px solid var(--w15);border-bottom:1px solid var(--w15)}
.ref-facts__row{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,64px);display:flex;justify-content:center;gap:clamp(12px,2vw,24px);flex-wrap:nowrap}
.ref-fact{position:relative;padding:24px 28px;text-align:center;flex:1 1 0}
.ref-fact::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,.04);clip-path:var(--octa);z-index:-1}
.ref-fact__label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:10px;white-space:nowrap}
.ref-fact__value{display:block;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#fff;white-space:nowrap}

/* Project text */
.ref-info{padding:clamp(40px,5vw,60px) 0}
.ref-info__inner{max-width:800px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.ref-info__text h2{font-size:clamp(28px,4vw,44px);margin-bottom:20px}
.ref-info__text p{color:var(--w80);line-height:1.85;margin-bottom:16px;font-size:17px}

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

/* Other refs */
.ref-other{padding:clamp(60px,7vw,90px) 0;background:var(--bg2)}
.ref-other__head{text-align:center;margin-bottom:40px}
.ref-other__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.ref-other__card{position:relative;clip-path:var(--octa);overflow:hidden;aspect-ratio:16/10;display:block;color:#fff}
.ref-other__card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ref-other__card:hover img{transform:scale(1.06)}
.ref-other__card span{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,25,21,.8),transparent);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;z-index:1}

/* Responsive */
@media(max-width:1024px){
    .ref-other__grid{grid-template-columns:1fr 1fr}
    .ref-scroll__item{width:clamp(220px,40vw,360px)}
    .ref-facts__row{gap:16px}
    .ref-fact{padding:24px 20px}
}
@media(max-width:768px){
    .ref-statement{height:60vh;min-height:400px}
    .ref-scroll__wrap{padding:0 clamp(20px,4vw,40px)}
    .ref-scroll__item{width:80vw}
    .ref-facts__row{flex-direction:column;align-items:center}
    .ref-fact{max-width:100%;width:100%}
    .ref-other__grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
    .ref-statement__cat,.ref-statement h1,.ref-statement__sub{opacity:1;transform:none}
}

/* aspect-ratio Fallback for older browsers */
@supports not (aspect-ratio:1){
    .ref-scroll__item{height:0;padding-bottom:75%}
    .ref-other__card{height:0;padding-bottom:62.5%}
}