.references-page { background: #f6f6f1; }
.references-page .site-header { position: absolute; }
.references-page .site-header.is-scrolled { position: fixed; }
.refs-hero { min-height: 830px; overflow: hidden; color: #fff; background: #090c0e; }
.refs-hero-grid { min-height: 830px; padding-top: 155px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.refs-hero h1 { margin: 0; max-width: 750px; font-size: clamp(62px,6vw,88px); line-height: .91; letter-spacing: -.07em; }
.refs-hero h1 em { color: #eab936; font-style: normal; }
.refs-hero-copy > p:not(.eyebrow) { max-width: 540px; margin: 32px 0; color: #9ca4a4; font-size: 17px; line-height: 1.65; }
.refs-stats { margin-top: 55px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.refs-stats strong { display: block; color: #eab936; font-size: 28px; }
.refs-stats span { display: block; margin-top: 6px; color: #929b9b; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.refs-collage { min-height: 580px; position: relative; }
.refs-collage figure { margin: 0; position: absolute; overflow: hidden; box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.refs-collage figure:first-child { width: 78%; height: 430px; right: -7%; top: 0; z-index: 1; }
.refs-collage figure:last-child { width: 58%; height: 315px; left: 0; bottom: 0; z-index: 2; border: 15px solid #090c0e; }
.refs-collage img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.03); }
.refs-collage figcaption { position: absolute; left: 22px; bottom: 18px; padding: 8px 10px; color: #fff; background: rgba(9,12,14,.75); font-size: 8px; font-weight: 750; letter-spacing: .12em; }

.refs-content { padding: 135px 0 155px; }
.refs-heading { margin-bottom: 72px; display: flex; justify-content: space-between; align-items: end; gap: 80px; }
.refs-heading h2 { margin: 0; font-size: clamp(45px,4.4vw,64px); line-height: .95; letter-spacing: -.06em; }
.refs-heading-side { max-width: 520px; }
.refs-heading-side > p { margin: 0 0 30px; color: #6e7474; font-size: 14px; line-height: 1.65; }
.refs-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.ref-card, .ref-card.ref-wide, .ref-card.ref-short, .ref-card.ref-half { min-height: 0; height: 440px; position: relative; overflow: hidden; grid-column: auto; grid-row: auto; color: #fff; background: #252a2d; }
.ref-card:first-child { height: 560px; grid-column: 1 / -1; }
.ref-card img { height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.02); transition: transform .75s cubic-bezier(.2,.7,.1,1), filter .3s; }
.ref-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,12,14,.03) 28%, rgba(9,12,14,.84) 100%); }
.ref-card:hover img { transform: scale(1.04); filter: saturate(.9); }
.ref-card-content { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 28px; }
.ref-card-content p { margin: 0 0 9px; color: #eab936; font-size: 8px; font-weight: 750; letter-spacing: .13em; }
.ref-card-content h3 { max-width: 570px; margin: 0; font-size: clamp(22px,2.2vw,34px); line-height: .98; letter-spacing: -.045em; }
.ref-card-content span { display: block; max-width: 540px; margin-top: 11px; color: #c5cccc; font-size: 11px; line-height: 1.5; }
.ref-card.is-hidden { display: none; }

.refs-cta { position: relative; padding: 140px 0; overflow: hidden; color: #fff; background: #090c0e url("../assets/images/Anfrage-background-image.webp") center / cover no-repeat; }
.refs-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,12,14,.94) 0%, rgba(9,12,14,.84) 52%, rgba(9,12,14,.72) 100%); }
.refs-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 120px; align-items: center; }
.refs-cta h2 { margin: 0; font-size: clamp(48px,5vw,72px); line-height: .95; letter-spacing: -.06em; }
.refs-cta-copy p { margin: 0 0 38px; color: #acb9b9; font-size: 16px; line-height: 1.7; }
.refs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.refs-actions .pill-outline { border: 1px solid rgba(255,255,255,.28); color: #fff; }

@media (max-width: 1050px) { .refs-hero-grid { gap: 45px; } .refs-collage figure:first-child { right: 0; } }
@media (max-width: 760px) {
  .refs-hero, .refs-hero-grid { min-height: 950px; }
  .refs-hero-grid { padding-top: 120px; grid-template-columns: 1fr; gap: 35px; align-content: center; }
  .refs-hero h1 { font-size: 51px; }
  .refs-collage { min-height: 370px; }
  .refs-collage figure:first-child { width: 85%; height: 290px; }
  .refs-collage figure:last-child { width: 58%; height: 210px; border-width: 8px; }
  .refs-content { padding: 95px 0 105px; }
  .refs-heading { align-items: flex-start; flex-direction: column; gap: 38px; }
  .refs-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .ref-card, .ref-card.ref-wide, .ref-card.ref-short, .ref-card.ref-half, .ref-card:first-child { height: 430px; grid-column: 1; grid-row: auto; }
  .refs-cta { padding: 76px 0; background-position: 62% center; }
  .refs-cta::before { background: linear-gradient(90deg, rgba(9,12,14,.94), rgba(9,12,14,.76)), linear-gradient(180deg, rgba(9,12,14,.18), rgba(9,12,14,.9)); }
  .refs-cta-grid { grid-template-columns: 1fr; gap: 45px; }
}