:root{
--gap:32px;
} .referenzen-h1,
.referenzen-block h1{
display:none !important;
} .referenzen-block{
max-width:1400px;
margin:0 auto;
padding:0 24px 80px;
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
opacity:0;
transform:translateY(12px);
transition:
opacity 1.1s cubic-bezier(.22,1,.36,1),
transform 1.1s cubic-bezier(.22,1,.36,1);
}
.referenzen-block.is-visible{
opacity:1;
transform:translateY(0);
} .referenzen-tabs{
grid-row:1;
display:flex;
justify-content:center;
gap:18px;
margin:32px 0 56px;
flex-wrap:wrap;
}
.ref-tab{
padding:14px 34px;
border:1px solid #5B6E74;
background:transparent;
cursor:pointer;
font-family:'Open Sans',sans-serif;
font-weight:400;
font-size:15px;
letter-spacing:.14em;
text-transform:uppercase;
color:#5B6E74;
transition:
background-color .35s ease,
color .35s ease,
border-color .35s ease;
}
.ref-tab.is-active{
background:#5B6E74;
color:#fff;
border-color:#5B6E74;
}
.ref-tab:not(.is-active):hover{
background:#E4E6E8;
color:#5B6E74;
} .referenzen-tab{
grid-row:2;
grid-column:1;
align-self:start;
height:0; overflow:hidden; opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .65s cubic-bezier(.22,1,.36,1),
visibility 0s linear .65s;
} .referenzen-tab.is-leaving{
overflow:visible;
}
.referenzen-tab.is-active{
height:auto;
overflow:visible;
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity .65s cubic-bezier(.22,1,.36,1);
} .referenzen-grid{
position:relative;
min-height:1px;
}
.referenz-item{
position:absolute;
margin:0;
--tile-height:300px; } .referenz-link{
display:block;
height:var(--tile-height);
position:relative;
overflow:hidden;
border-radius:10px;
background:#E4E6E8;
text-decoration:none;
}
.referenz-link:focus-visible{
outline:2px solid #5B6E74;
outline-offset:3px;
}
.referenz-image,
.referenz-image--placeholder{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.referenz-image{
object-fit:cover;
transform:scale(1);
transition:transform 1.1s ease;
} .referenz-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
height:50%;
pointer-events:none;
background:linear-gradient(
to top,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.88) 18%,
rgba(255,255,255,.74) 30%,
rgba(255,255,255,.52) 42%,
rgba(255,255,255,.32) 54%,
rgba(255,255,255,.17) 66%,
rgba(255,255,255,.07) 78%,
rgba(255,255,255,.02) 90%,
rgba(255,255,255,0) 100%
);
opacity:0;
transition:opacity .45s ease;
} .referenz-title{
position:absolute;
left:0;
right:0;
bottom:0;
padding:26px 22px 22px;
text-align:center;
font-family:'Open Sans',sans-serif;
font-weight:400;
font-size:18px;
letter-spacing:.14em;
text-transform:uppercase;
line-height:1.35;
color:#5B6E74; text-shadow:
0 0 2px rgba(255,255,255,.6),
0 0 14px rgba(255,255,255,.85);
opacity:0;
transform:translateY(10px);
transition:
opacity .5s ease,
transform .5s ease;
} @media (hover:hover){
.referenz-link:hover .referenz-image{
transform:scale(1.05);
}
.referenz-link:hover .referenz-overlay{
opacity:1;
}
.referenz-link:hover .referenz-title{
opacity:1;
transform:translateY(0);
}
} .referenz-link:focus-visible .referenz-overlay{
opacity:1;
}
.referenz-link:focus-visible .referenz-title{
opacity:1;
transform:translateY(0);
} @media (hover:none), (max-width:640px){
.referenz-overlay{
opacity:1;
}
.referenz-title{
opacity:1;
transform:translateY(0);
}
}  @media (prefers-reduced-motion: reduce){
.referenzen-block,
.referenzen-tab,
.referenzen-tab.is-active,
.referenz-image,
.referenz-overlay,
.referenz-title{
transition:none;
}
.referenzen-block{
opacity:1;
transform:none;
}
}