/* Referenzgebundener Startseiten-Teaser fuer fuenf kuratierte Projekte. */
.reference-projects{
    --projects-gold:#f4b000;
    --projects-ink:#0b0e0f;
    --projects-paper:#faf9f6;
    position:relative;
    isolation:isolate;
    width:100%;
    overflow:hidden;
    padding:var(--section-space-y) 0;
    background:
        radial-gradient(circle at 78% 17%,rgba(242,171,0,.035),transparent 30%),
        linear-gradient(180deg,#fdfcf9 0%,var(--projects-paper) 100%);
    color:#111413;
}

.reference-projects__inner{
    position:relative;
    z-index:1;
    width:min(calc(100% - 72px),1400px);
    margin-inline:auto;
}

.reference-projects__header{
    position:relative;
    z-index:2;
    max-width:1200px;
}

.reference-projects__eyebrow{
    margin:0 0 17px;
    color:#de9600;
    font-family:Poppins,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.reference-projects__header h1,
.reference-projects__header h2{
    margin:0;
    color:#0c0f0f;
    font-family:Sora,Poppins,Arial,sans-serif;
    font-size:var(--type-section-title);
    font-weight:760;
    line-height:1.16;
    letter-spacing:-1.45px;
    text-wrap:balance;
}

.reference-projects__header h1 strong,
.reference-projects__header h2 strong{
    color:var(--projects-gold);
    font-weight:790;
}

.reference-projects__lead{
    max-width:880px;
    margin:21px 0 0;
    color:#202321;
    font-size:var(--type-section-copy);
    font-weight:500;
    line-height:1.5;
}

.reference-projects__cta-band{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:240px minmax(0,1fr) 310px;
    align-items:center;
    width:100%;
    min-height:var(--section-cta-height);
    margin-top:28px;
    overflow:hidden;
    border:0;
    border-radius:var(--radius-ui);
    background:linear-gradient(105deg,#121617 0%,#080b0c 100%);
    color:#f7f7f3;
}

.reference-projects__cta-mark{
    position:relative;
    align-self:stretch;
    display:grid;
    place-items:center;
    overflow:hidden;
    color:var(--projects-gold);
}

.reference-projects__cta-mark::before{
    position:absolute;
    inset:0 auto 0 0;
    width:128px;
    content:"";
    background:linear-gradient(135deg,#ffc21f,var(--projects-gold));
    clip-path:polygon(0 0,100% 0,48% 100%,0 100%);
}

.reference-projects__cta-mark::after{
    position:absolute;
    top:-43px;
    right:26px;
    width:2px;
    height:190px;
    content:"";
    background:var(--projects-gold);
    transform:rotate(31deg);
    transform-origin:center;
}

.reference-projects__cta-zap{
    position:absolute;
    z-index:1;
    top:50%;
    left:64px;
    width:36px;
    height:36px;
    margin:0;
    color:#111516;
    transform:translate(-50%,-50%);
}

.reference-projects__cta-band p{
    margin:0;
    padding:20px 38px;
    color:#f2f2ed;
    font-size:16px;
    font-weight:500;
    line-height:1.45;
}

.reference-projects__button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-width:255px;
    min-height:54px;
    margin:16px 20px 16px 0;
    padding:10px 21px 10px 29px;
    overflow:hidden;
    border:0;
    border-radius:var(--radius-ui);
    background:linear-gradient(135deg,#ffc21f 0%,var(--projects-gold) 82%);
    color:#101313;
    font-family:Poppins,Arial,sans-serif;
    font-size:16px;
    font-weight:750;
    line-height:1.2;
    transition:transform .22s ease,box-shadow .22s ease;
}

.reference-projects__button::before{
    content:"";
    position:absolute;
    z-index:0;
    top:-60%;
    bottom:-60%;
    left:-60%;
    width:32%;
    opacity:0;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);
    filter:blur(4px);
    transform:translateX(-210%) skewX(-18deg);
    pointer-events:none;
}

.reference-projects__button span,
.reference-projects__button-icon{position:relative;z-index:1}
.reference-projects__button-icon{display:block;width:20px;height:20px;transition:transform .22s ease}
.reference-projects__button:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(106,75,0,.18)}
.reference-projects__button:hover::before{animation:reference-projects-light-sweep 1.15s cubic-bezier(.35,0,.2,1) 1}
.reference-projects__button:hover .reference-projects__button-icon{transform:translateX(4px)}

.reference-projects__ornament{
    position:absolute;
    z-index:0;
    top:-82px;
    right:-8px;
    width:410px;
    height:430px;
    overflow:visible;
    fill:none;
    stroke:var(--projects-gold);
    stroke-width:1.2;
    stroke-linecap:square;
    stroke-linejoin:miter;
    pointer-events:none;
}

.reference-projects__ornament-soft{opacity:.4}
.reference-projects__ornament-bolt{fill:none;stroke-width:3}

.reference-projects__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
    margin-top:29px;
}

.reference-projects--gallery .reference-projects__grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.reference-projects__card{
    position:relative;
    display:flex;
    min-width:0;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(16,19,18,.18);
    border-radius:var(--radius-ui);
    background:linear-gradient(145deg,#121617 0%,#070a0b 100%);
    color:#f9f8f4;
    box-shadow:0 8px 18px rgba(20,20,16,.13);
}

.reference-projects__media{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    flex:0 0 auto;
    margin:0;
    overflow:hidden;
    border-bottom:2px solid var(--projects-gold);
    background:#1b1e1e;
}

.reference-projects__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.reference-projects__card-body{
    position:relative;
    display:flex;
    min-height:129px;
    flex:1 1 auto;
    flex-direction:column;
    justify-content:flex-start;
    padding:20px 17px 19px;
    background:linear-gradient(145deg,#121617 0%,#070a0b 100%);
    transition:background .24s ease,color .24s ease;
}

.reference-projects__meta{
    display:block;
    margin-bottom:8px;
    color:var(--projects-gold);
    font-family:Poppins,Arial,sans-serif;
    font-size:13px;
    font-weight:650;
    line-height:1.25;
    letter-spacing:.15px;
    text-transform:uppercase;
    transition:color .24s ease;
}

.reference-projects__title{
    display:block;
    color:#f7f7f3;
    font-family:Sora,Poppins,Arial,sans-serif;
    font-size:18px;
    font-weight:690;
    line-height:1.28;
    letter-spacing:-.35px;
    text-wrap:balance;
    transition:color .24s ease;
}

.reference-projects__card:hover .reference-projects__card-body,
.reference-projects__card:focus-visible .reference-projects__card-body{
    background:#f4b000;
    color:#101313;
}
.reference-projects__card:hover .reference-projects__meta,
.reference-projects__card:focus-visible .reference-projects__meta,
.reference-projects__card:hover .reference-projects__title,
.reference-projects__card:focus-visible .reference-projects__title{
    color:#101313;
}

@keyframes reference-projects-light-sweep{
    0%{left:-60%;opacity:0;transform:translateX(-210%) skewX(-18deg)}
    20%{opacity:.75}
    100%{left:140%;opacity:0;transform:translateX(210%) skewX(-18deg)}
}

@media (max-width:1400px){
    .reference-projects{padding-block:var(--section-space-y)}
    .reference-projects__header{max-width:1080px}
    .reference-projects__header h1,
    .reference-projects__header h2{font-size:var(--type-section-title);letter-spacing:-1.1px}
    .reference-projects__lead{max-width:820px}
    .reference-projects__ornament{right:-80px;width:360px}
    .reference-projects__cta-band{grid-template-columns:205px minmax(0,1fr) 280px}
    .reference-projects__cta-band p{padding-inline:30px;font-size:16px}
    .reference-projects__title{font-size:18px}
}

@media (max-width:1180px){
    .reference-projects__ornament{right:-125px;opacity:.52}
    .reference-projects__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
    .reference-projects__card{grid-column:span 2}
    .reference-projects__card:nth-child(4){grid-column:2 / span 2}
    .reference-projects--gallery .reference-projects__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .reference-projects--gallery .reference-projects__card{grid-column:auto}
    .reference-projects--gallery .reference-projects__card:nth-child(4){grid-column:auto}
}

@media (max-width:900px){
    .reference-projects{padding:var(--section-space-y) 0}
    .reference-projects__inner{width:min(calc(100% - 48px),1400px)}
    .reference-projects__header{max-width:760px}
    .reference-projects__header h1,
    .reference-projects__header h2{font-size:var(--type-section-title);line-height:1.18;letter-spacing:-.8px}
    .reference-projects__header h1 br,
    .reference-projects__header h2 br{display:none}
    .reference-projects__ornament{top:-100px;right:-145px;width:330px;opacity:.26}
    .reference-projects__cta-band{grid-template-columns:165px minmax(0,1fr) 245px}
    .reference-projects__cta-mark::before{width:82px}
    .reference-projects__cta-mark::after{right:24px}
    .reference-projects__cta-zap{left:calc(50% + 18px)}
    .reference-projects__cta-band p{padding-inline:24px}
    .reference-projects__button{min-width:0;margin-right:14px;padding-inline:20px}
    .reference-projects__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    .reference-projects__card{grid-column:auto}
    .reference-projects__card:nth-child(4){grid-column:auto}
    .reference-projects__card:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 9px);justify-self:center}
    .reference-projects--gallery .reference-projects__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .reference-projects--gallery .reference-projects__card:last-child:nth-child(odd){grid-column:auto;width:auto;justify-self:stretch}
}

@media (max-width:680px){
    .reference-projects__inner{width:min(calc(100% - 32px),1400px)}
    .reference-projects__header{text-align:center}
    .reference-projects__eyebrow{margin-bottom:15px;font-size:14px}
    .reference-projects__header h1,
    .reference-projects__header h2{font-size:var(--type-section-title);line-height:1.2;letter-spacing:-.55px}
    .reference-projects__lead{margin-top:19px;font-size:var(--type-section-copy);line-height:1.55}
    .reference-projects__cta-band{grid-template-columns:82px 1fr;margin-top:24px;text-align:left}
    .reference-projects__cta-mark{grid-column:1;grid-row:1}
    .reference-projects__cta-mark::before{width:47px}
    .reference-projects__cta-mark::after{top:-28px;right:2px;height:150px}
    .reference-projects__cta-zap{left:calc(50% + 16px);width:30px;height:30px}
    .reference-projects__cta-band p{grid-column:2;grid-row:1;padding:18px;font-size:16px;line-height:1.45}
    .reference-projects__button{grid-column:1/-1;grid-row:2;width:calc(100% - 28px);min-height:52px;margin:0 14px 14px;font-size:16px}
    .reference-projects__ornament{display:none}
    .reference-projects__grid,
    .reference-projects--gallery .reference-projects__grid{
        display:grid;
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:min(82vw,340px);
        gap:14px;
        margin-top:27px;
        padding:0 0 15px;
        overflow-x:auto;
        overflow-y:hidden;
        overscroll-behavior-inline:contain;
        scroll-padding-inline:0 16px;
        scroll-snap-type:x mandatory;
        scrollbar-width:thin;
        scrollbar-color:var(--projects-gold) rgba(11,14,15,.14);
        -webkit-overflow-scrolling:touch;
    }
    .reference-projects__grid::-webkit-scrollbar,
    .reference-projects--gallery .reference-projects__grid::-webkit-scrollbar{
        height:9px;
    }
    .reference-projects__grid::-webkit-scrollbar-button,
    .reference-projects--gallery .reference-projects__grid::-webkit-scrollbar-button{
        display:none;
        width:0;
        height:0;
    }
    .reference-projects__grid::-webkit-scrollbar-track,
    .reference-projects--gallery .reference-projects__grid::-webkit-scrollbar-track{
        border-radius:999px;
        background:rgba(11,14,15,.14);
    }
    .reference-projects__grid::-webkit-scrollbar-thumb,
    .reference-projects--gallery .reference-projects__grid::-webkit-scrollbar-thumb{
        min-width:72px;
        border:2px solid var(--projects-paper);
        border-radius:999px;
        background:linear-gradient(90deg,#d99500 0%,var(--projects-gold) 56%,#ffc52e 100%);
    }
    .reference-projects__card,
    .reference-projects__card:last-child:nth-child(odd),
    .reference-projects--gallery .reference-projects__card,
    .reference-projects--gallery .reference-projects__card:last-child:nth-child(odd){
        grid-column:auto;
        width:100%;
        max-width:none;
        justify-self:stretch;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }
    .reference-projects__card-body{min-height:128px;padding:20px;text-align:left}
    .reference-projects__meta{font-size:13px}
    .reference-projects__title{font-size:18px}
}

@media (max-width:420px){
    .reference-projects__header h1,
    .reference-projects__header h2{font-size:var(--type-section-title)}
    .reference-projects__lead{font-size:var(--type-section-copy)}
}

@media print{
    .reference-projects__ornament{display:none}
    .reference-projects__card{break-inside:avoid;box-shadow:none}
}