:root {
  --dark: #232323;
  --light: #f6f6f6;
  --text: #3d3c38;
  --gray: #6f6e6a;
  --head: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --body: "Avenir", "Avenir Next", "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body { font-family: var(--body); font-weight: 300; background: var(--light); color: var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, .bold { font-family: var(--head); font-weight: 700; }

/* Header */
.header { background: var(--light); height: 148px; position: relative; }
.logo-circle { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 66px; height: 66px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; text-decoration: none; font-family: var(--body); font-weight: 300; font-size: 34px; letter-spacing: -.02em; line-height: 1; padding-bottom: 2px; }
.nav { position: absolute; top: 106px; left: 50%; transform: translateX(-50%); width: 980px; max-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.nav a { font-family: var(--head); font-weight: 700; font-size: 23px; color: #000; text-decoration: none; line-height: 1.4; }
.nav a:hover { opacity: .65; }

/* Parallax-Bänder */
.hero, .band { background: #8b98a1 url("img/622ed9208122418491403d94825ba2b5.jpg") center / cover fixed no-repeat; }
.hero { height: 956px; max-height: 100vh; min-height: 560px; }
.band { height: 120px; }
.band.tall { height: 300px; }
.band.last { height: 210px; position: relative; }
.band.last::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.28); }

/* Sektionen */
h2 { font-size: 63px; font-weight: 600; line-height: 1.15; text-align: center; }
.dark { background: var(--dark); color: #fff; }
.light { background: var(--light); color: var(--text); }
section { padding: 47px 20px 80px; }

/* Geschäftsfelder */
.fields { display: grid; grid-template-columns: repeat(3, 250px); gap: 115px; justify-content: center; margin: 50px auto 0; max-width: 1100px; }
.field { text-align: center; }
.field img { height: 65px; width: auto; margin: 0 auto 30px; }
.field h3 { font-size: 20px; line-height: 28px; margin-bottom: 42px; }
.field p { font-size: 15px; line-height: 21px; }
.field p + p { margin-top: 21px; }

/* Über uns */
#ueber-uns { padding-bottom: 75px; }
.about { max-width: 670px; margin: 30px auto 0; text-align: center; font-size: 16px; line-height: 22.5px; }
.about p + p { margin-top: 22px; }
.team { display: grid; grid-template-columns: repeat(3, 225px); gap: 23px; justify-content: center; margin-top: 8px; }
.person { text-align: center; }
.person img { width: 225px; height: 225px; object-fit: cover; filter: grayscale(1); }
.person h3 { font-size: 19px; margin-top: 24px; }
.person .role { font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--gray); margin-top: 10px; white-space: nowrap; }
.person a { display: inline-block; margin-top: 28px; font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--gray); }

/* Projekte */
.gallery { display: grid; grid-template-columns: repeat(3, 352px); gap: 37px; justify-content: center; margin: 55px auto 0; }
.gallery figure { position: relative; width: 352px; height: 469px; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery figcaption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; color: #fff; font-family: var(--head); font-weight: 700; font-size: 20px; line-height: 1.3; padding: 14px 26px; text-align: center; max-width: 88%; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.gallery figcaption .sub { display: block; font-size: 14px; font-weight: 400; line-height: 1.3; margin-top: 6px; color: #e0e0e0; }
.gallery figure:hover figcaption { opacity: 1; }

/* Kontakt */
#kontakt { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
#kontakt .k7logo { width: 165px; margin: 0; }
#kontakt h2 { margin: 0; line-height: .8; margin-bottom: -4px; font-size: 85px; color: var(--dark); }
.btn { display: inline-block; margin: 0; background: var(--dark); color: #fff; font-family: var(--head); font-weight: 700; font-size: 18px; padding: 17px 35px; border-radius: 30px; text-decoration: none; transition: opacity .2s; }
.btn:hover { opacity: .85; }

/* Footer */
footer { background: var(--dark); height: 93px; display: flex; justify-content: center; align-items: center; gap: 21px; }
footer a { color: #fff; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 15px; }
footer a:hover { text-decoration: underline; }

/* Rechtstexte */
.legal { max-width: 800px; margin: 0 auto; padding: 60px 20px 100px; }
.legal h1 { font-size: 48px; margin-bottom: 30px; text-align: center; }
.legal h2 { font-size: 22px; text-align: left; margin: 36px 0 10px; }
.legal h3 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal a { text-decoration: underline; }
.legal .card { background: #fff; border: 1px solid #e3e3e3; padding: 16px 20px; margin: 14px 0; }
.legal .card p { margin-bottom: 6px; }
.legal .meta-label { font-weight: 700; margin-right: 6px; }

@media (max-width: 1160px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 352px)); }
  .fields { gap: 40px; grid-template-columns: repeat(3, 230px); }
}
@media (max-width: 760px) {
  .header { height: 190px; }
  .nav { top: 106px; grid-template-columns: repeat(2, 1fr); row-gap: 8px; width: 100%; }
  .nav a { font-size: 20px; }
  .hero, .band { background-attachment: scroll; }
  h2 { font-size: 38px; }
  #kontakt h2 { font-size: 56px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .team { grid-template-columns: minmax(0, 225px); gap: 40px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery figure { width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .gallery figcaption { top: auto; left: 0; right: 0; bottom: 0; transform: none; max-width: none; opacity: 1; padding: 12px 16px; font-size: 17px; text-align: left; }
  .gallery figcaption .sub { font-size: 13px; margin-top: 3px; }
  .band.tall { height: 160px; }
}