/* Page-specific styling for the References page. Shared components remain in style.css. */
.references-page { background: var(--paper); }
.references-page .section-label { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .095em; }
.references-hero { padding: 76px 0 67px; background: #fff; }
.references-hero-layout { position: relative; display: grid; grid-template-columns: 1.08fr .72fr; gap: 58px; align-items: end; min-height: 250px; padding-bottom: 29px; border-bottom: 1px solid var(--line); }
.references-hero h1 { margin: 0; font-size: clamp(49px, 5.1vw, 75px); }
.references-hero h1 span, .references-heading h2 span, .references-approach h2 span { color: var(--blue); }
.references-hero-layout > p { max-width: 445px; margin: 0; padding-bottom: 5px; color: var(--muted); font-size: 16px; line-height: 1.68; }
.references-count { position: absolute; top: -20px; right: 0; color: #e6eeeb; font-size: clamp(105px, 15vw, 205px); font-weight: 800; letter-spacing: -.1em; line-height: .75; pointer-events: none; }
.references-hero-layout > div, .references-hero-layout > p { position: relative; z-index: 1; }
.references-work { padding: 0 0 96px; background: #fff; }
.references-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 33px; }
.references-heading h2 { font-size: clamp(37px, 4vw, 58px); }
.reference-grid { display: grid; grid-template-columns: 1.12fr .88fr; grid-template-rows: repeat(2, minmax(285px, 1fr)); gap: 7px; }
.reference-card { position: relative; min-height: 280px; overflow: hidden; border-radius: 0; color: #fff; }
.reference-artho { grid-row: span 2; min-height: 590px; background: #d89d74; }
.reference-artho::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(86,45,25,.62), transparent 48%); content: ''; }
.reference-artho-wordmark { position: absolute; z-index: 1; top: 26%; left: 9%; color: #fff6e3; font-size: clamp(68px, 7vw, 105px); font-weight: 800; letter-spacing: -.09em; line-height: .72; }
.reference-artho-wordmark small { display: block; margin: 17px 0 0 6px; color: #855b42; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reference-vest { background: #305d70; }
.reference-vest-image { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,38,48,.72), transparent 72%), url('../media/project-office.jpg') center/cover; filter: saturate(.8); }
.reference-hansen { background: #343a43; }
.reference-hansen-lines { position: absolute; top: -82px; right: 10%; display: flex; gap: 18px; height: 470px; transform: rotate(-31deg); }
.reference-hansen-lines b { display: block; width: 73px; background: var(--blue); }
.reference-hansen-lines b:nth-child(2) { background: var(--blue-soft); }.reference-hansen-lines b:nth-child(3) { background: #f28566; }
.reference-merch { grid-column: 1 / -1; display: flex; align-items: center; min-height: 420px; padding: 46px clamp(36px, 6vw, 76px); background: var(--blue-soft); color: var(--ink); }
.reference-merch-copy { position: relative; z-index: 1; max-width: 470px; }
.reference-merch-copy > span { display: block; margin-bottom: 11px; color: #315764; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reference-merch h3 { margin: 0 0 14px; font-size: clamp(37px, 4vw, 57px); font-weight: 800; letter-spacing: -.065em; line-height: .96; }
.reference-merch p { max-width: 425px; margin-bottom: 21px; color: #315764; font-size: 15px; line-height: 1.65; }
.reference-merch-copy a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid #315764; color: var(--ink); font-size: 14px; font-weight: 800; }
.reference-merch img { position: absolute; right: 4%; bottom: 12px; width: min(43%, 500px); height: calc(100% - 24px); object-fit: contain; object-position: center right; filter: drop-shadow(0 18px 16px rgba(35,72,84,.2)); }
.reference-card-meta { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 25px 27px; background: linear-gradient(transparent, rgba(0,0,0,.42)); }
.reference-card-meta span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.8); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.reference-card-meta h3 { margin: 0 0 7px; font-size: clamp(21px, 2vw, 28px); font-weight: 800; letter-spacing: -.05em; }
.reference-card-meta p { max-width: 430px; margin: 0; color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.5; }
.reference-card-meta a { display: grid; place-items: center; flex: 0 0 auto; width: 39px; height: 39px; margin-bottom: 3px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; transition: background .2s ease, color .2s ease, transform .2s ease; }
.reference-card-meta a:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }
.references-cta { padding: 76px 0; background: var(--ink); color: #fff; }
.references-cta-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: end; }
.references-cta .section-label { color: var(--blue-soft); }.references-cta h2 { margin: 0; font-size: clamp(37px, 3.8vw, 55px); }.references-cta h2 span { color: var(--blue-soft); }
.references-cta-panel > div:last-child p { max-width: 410px; margin-bottom: 20px; color: #cbd5d1; font-size: 15px; line-height: 1.68; }.references-cta .button-primary { background: var(--blue); }.references-cta .button-primary:hover { background: #3d7cad; }
@media (max-width: 991.98px) { .references-hero { padding-top: 62px; }.reference-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.reference-artho { grid-column: 1 / -1; grid-row: auto; min-height: 470px; }.reference-card { min-height: 340px; }.reference-merch { grid-column: 1 / -1; }.references-cta-panel { grid-template-columns: 1fr; gap: 26px; }.references-count { top: -10px; }.references-hero-layout { grid-template-columns: 1fr .75fr; gap: 32px; } }
@media (max-width: 575.98px) { .references-hero { padding: 52px 0 50px; }.references-hero-layout { grid-template-columns: 1fr; gap: 19px; min-height: 0; padding-bottom: 25px; }.references-hero h1 { font-size: clamp(44px, 12vw, 59px); }.references-count { top: 2px; right: 5px; font-size: 108px; opacity: .75; }.references-hero-layout > p { font-size: 15px; }.references-work { padding-bottom: 62px; }.references-heading { align-items: start; flex-direction: column; margin-bottom: 25px; }.reference-grid { grid-template-columns: 1fr; }.reference-artho, .reference-card { grid-column: auto; min-height: 390px; }.reference-artho-wordmark { top: 27%; font-size: 78px; }.reference-card-meta { padding: 22px; }.reference-card-meta p { max-width: 270px; }.reference-merch { min-height: 540px; padding: 38px 26px; align-items: flex-start; }.reference-merch h3 { font-size: 45px; }.reference-merch p { max-width: 245px; }.reference-merch img { right: 4%; bottom: 10px; width: min(67%, 320px); height: auto; }.references-cta { padding: 62px 0; }.references-cta-panel { padding: 0; } }

/* Lesbare Typografie: Projektbeschreibungen bleiben auch mobil gut erfassbar. */
.references-page .section-label { font-size: 13px; }
.references-hero-layout > p,
.reference-merch p,
.references-cta-panel > div:last-child p { font-size: 16px; }
.reference-card-meta p { font-size: 15px; line-height: 1.6; }
.reference-merch-copy a { font-size: 15px; }

@media (max-width: 575.98px) {
  .references-hero-layout > p { font-size: 16px; }
}