.hero,
#coaching,
#arbeitsweise,
#referenzen,
#kontakt { scroll-margin-top: 92px; }

a { cursor: pointer; }
.footer-links { gap: 4px; }
.footer-links a { width: fit-content; }
.legal-links { display: flex; gap: 16px; margin-top: 8px; }

.hero-photo {
  background-image: linear-gradient(90deg, transparent 73%, var(--cream) 100%), url("assets/annegret-naumann-direkter-blick.png");
}

.responsibility {
  color: var(--gold);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.approach-copy p { max-width: 540px; }
.approach-lead {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.6;
  margin-top: 28px;
}

.references {
  max-width: none;
  margin: 0;
  padding: 120px max(50px, calc((100vw - 1240px)/2));
  background: var(--wine-dark);
  color: #f7eee9;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 90px;
}
.references-head { max-width: 480px; margin: 0; }
.references-head h2 { margin-bottom: 24px; color: #fff; }
.references-head > p:last-child { color: #d9c9c7; }
.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 0;
  border-top: 1px solid rgba(201,149,70,.65);
  padding-top: 10px;
}
.reference-grid > div { padding: 0 24px; }
.reference-grid > div:first-child { padding-left: 0; }
.reference-grid > div:last-child { padding-right: 0; }
.reference-grid > div + div { border-left: 1px solid rgba(255,255,255,.18); }
.reference-grid span {
  display: block;
  min-height: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--serif);
  font-size: .91rem;
  line-height: 1.45;
  color: #fff;
}

@media (max-width: 900px) {
  .hero-photo {
    background-image: linear-gradient(0deg, var(--cream) 0%, transparent 24%), url("assets/annegret-naumann-direkter-blick.png");
  }
  .references { grid-template-columns: 1fr; gap: 50px; }
  .reference-grid { grid-template-columns: repeat(2, 1fr); }
  .reference-grid > div { padding: 0 18px; }
  .reference-grid > div:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 36px;
    padding: 0;
  }
}

@media (max-width: 520px) {
  .reference-grid { grid-template-columns: 1fr; }
  .reference-grid > div,
  .reference-grid > div:first-child,
  .reference-grid > div:last-child { padding: 0; border-left: 0; }
  .reference-grid > div:nth-child(3) { grid-column: auto; display: block; }
  .reference-grid span { min-height: 0; padding: 15px 0; }
}
