body.variant-map-first .hero-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

body.variant-map-first .hero h1 {
  max-width: 8ch;
}

body.variant-map-first .summary {
  display: none;
}

body.variant-map-first .city {
  min-height: 72vh;
  border-radius: 42px;
}

body.variant-map-first .city-bottom {
  display: grid;
  gap: 18px;
}

body.variant-map-first .city-bottom p {
  max-width: 34ch;
}

body.variant-map-first #referenzen .reference-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
}

body.variant-map-first #referenzen .reference-summary {
  order: 2;
  position: sticky;
  top: 108px;
}

body.variant-map-first #referenzen .map-shell {
  order: 1;
}

body.variant-map-first #referenzen .reference-map {
  height: 700px;
}

body.variant-map-first #leistungen .services {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.variant-map-first #fokus .focus {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

body.variant-map-first #ablauf .workflow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.variant-map-first .kicker {
  color: #9fc2ff;
}

@media (max-width: 1100px) {
  body.variant-map-first .hero-grid,
  body.variant-map-first #referenzen .reference-grid,
  body.variant-map-first #fokus .focus {
    grid-template-columns: 1fr;
  }

  body.variant-map-first #referenzen .reference-summary {
    position: static;
  }

  body.variant-map-first #referenzen .reference-map {
    height: 540px;
  }
}

@media (max-width: 640px) {
  body.variant-map-first .city {
    min-height: 60vh;
  }

  body.variant-map-first #leistungen .services,
  body.variant-map-first #ablauf .workflow {
    grid-template-columns: 1fr;
  }
}