/* Referenzen – ruhiges, durchgängiges Portfolio-Raster */
.references-redesign{--page-gutter:5.75vw;--tile-gap:6px;background:#090a09}
.references-redesign .nav{position:fixed;top:0;left:0;right:0;background:rgba(9,10,9,.97)}
.references-redesign .nav nav{gap:20px}
.visually-hidden{width:1px;height:1px;padding:0;margin:-1px;position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.work-hero{min-height:0;margin-top:105px;padding:0;display:block;overflow:hidden;background:#071f04}
.work-hero>img{width:100%;height:auto;display:block}

.project{padding:var(--tile-gap) 0;background:#efefec}
.project+.project{padding-top:0}
.reference-mosaic{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(190px,15.3vw,294px);grid-auto-flow:dense;gap:var(--tile-gap)}
.project-tile,.mosaic-item{min-width:0;min-height:0;overflow:hidden}
.project-tile{grid-column:span 3;grid-row:span 2;padding:42px 34px;display:flex;flex-direction:column;background:#ee1013;color:#fff;position:relative}
.project-tile::after{content:"";position:absolute;inset:0;background:url('../references-new/oerag_Muster_02.webp') right center/auto 100% no-repeat;opacity:.14}
.project-bueckmann .project-tile{background:#149bd3}
.project-bueckmann .project-tile::after{background-image:url('../references-new/bueckmann_Muster_02.webp')}
.project-dominique .project-tile{background:#bf2940}
.project-dominique .project-tile::after{background-image:url('../references-new/GD_Muster_02.webp')}
.project-tile>*{position:relative;z-index:1}
.project-tile img{width:auto;max-width:165px;height:58px;margin:0 0 42px;object-fit:contain;object-position:left center}
.project-tile ul{padding:0;margin:0}
.project-tile li{margin-bottom:12px;font-size:12px;letter-spacing:.14em;line-height:1.35}
.project-tile li::before{content:"•";margin-right:10px}
.mosaic-item{grid-column:span 3;margin:0;background:#e5e5e2}
.mosaic-item.span-3{grid-column:span 3}.mosaic-item.span-4{grid-column:span 4}.mosaic-item.span-5{grid-column:span 5}.mosaic-item.span-6{grid-column:span 6}.mosaic-item.span-9{grid-column:span 9}.mosaic-item.row-2{grid-row:span 2}
.mosaic-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.mosaic-item.full-poster img{object-fit:contain}
.pattern-tile img{object-position:center}
@media (hover:hover){.mosaic-item:hover img{transform:scale(1.015)}}

.references-cta{padding:105px var(--page-gutter) 120px}
.references-cta h2{margin:55px 0 70px;font-size:clamp(62px,8vw,120px);font-weight:700;letter-spacing:-.06em;line-height:.8}
.references-cta h2 em{color:var(--green);font-family:hoefler-text,Georgia,serif;font-weight:400}
.references-cta>a{width:min(100%,380px);padding:12px 18px;border:1px solid #3a3b39;border-radius:10px;display:flex;justify-content:space-between;font-family:hoefler-text,Georgia,serif;font-size:25px;transition:color .2s,border-color .2s}
.references-cta>a:hover{color:var(--green);border-color:var(--green)}
.references-closing-image{height:clamp(105px,10.2vw,196px);background:url('referenzen/abschluss.webp') center/cover no-repeat}

@media (max-width:1100px){.references-redesign .nav nav{gap:10px;font-size:11px}.references-redesign .quick-links{display:none}}
@media (max-width:900px){.reference-mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:220px}.project-tile,.mosaic-item.span-3,.mosaic-item.span-4,.mosaic-item.span-5,.mosaic-item.span-6,.mosaic-item.span-9{grid-column:span 3}}
@media (max-width:760px){
  .references-redesign{--page-gutter:6vw;--tile-gap:5px}
  .references-redesign .nav nav{gap:18px;font-size:24px}
  .work-hero{margin-top:76px}
  .project{padding-inline:0}.reference-mosaic{grid-template-columns:1fr;grid-auto-rows:auto}
  .project-tile,.mosaic-item,.mosaic-item.span-3,.mosaic-item.span-4,.mosaic-item.span-5,.mosaic-item.span-6,.mosaic-item.span-9,.mosaic-item.row-2{grid-column:auto;grid-row:auto}
  .project-tile{min-height:300px;padding:38px 7vw}.mosaic-item{aspect-ratio:4/3}.references-cta{padding-block:80px}.references-closing-image{height:110px}
}
@media (prefers-reduced-motion:reduce){.mosaic-item img{transition:none}}