:root{
  --black:#141414;
  --dark-gray:#3A3A3A;
  --mid-gray:#8A8A8A;
  --off-white:#F5F5F5;
  --white:#FFFFFF;
  --font:'Montserrat',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:var(--font);
  font-weight:400;
  color:var(--off-white);
  background:var(--black);
  line-height:1.6;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:var(--font);
  font-weight:700;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.section{padding:80px 32px;max-width:1100px;margin:0 auto;}
.section-title{font-size:24px;margin-bottom:32px;text-align:center;}

/* header */
.site-header{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px;z-index:10;
}
.logo img{width:56px;height:auto;}
.main-nav{display:flex;gap:28px;}
.main-nav a{
  color:var(--off-white);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:32px;height:24px;flex-direction:column;justify-content:space-between;
}
.nav-toggle span{display:block;height:2px;background:var(--off-white);}

/* hero */
.hero{
  position:relative;background:var(--black);
  padding:150px 48px 80px;
}
.hero-collage{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:56px;
  gap:48px;
  max-width:100%;
  margin:0 auto;
}
.hero-img{
  width:100%;height:100%;object-fit:contain;
  background:transparent;
}
.hero-img-1{grid-column:1/4;grid-row:1/5;}
.hero-img-2{grid-column:10/13;grid-row:1/6;}
.hero-img-3{grid-column:1/4;grid-row:5/14;}
.hero-img-4{grid-column:10/13;grid-row:6/14;}
.hero-img-5{grid-column:4/7;grid-row:12/14;}
.hero-img-6{grid-column:7/10;grid-row:12/14;}
.hero-img-7{grid-column:4/10;grid-row:1/3;}
.hero-center{
  grid-column:4/10;grid-row:5/10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;z-index:2;padding:0 16px;
}
.hero-logo{
  display:block;width:clamp(180px,25vw,320px);height:auto;margin:0 auto 24px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-claim{
  font-size:clamp(26px,2.68vw,34px);color:var(--off-white);
  text-transform:none;letter-spacing:0;line-height:1.5;max-width:420px;
}

/* tätigkeitsfelder */
.field-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.field-card img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--dark-gray);margin-bottom:16px;
}
.field-card h3{font-size:16px;margin-bottom:8px;}
.field-card p{font-size:14px;color:var(--off-white);}

/* portfolio */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  max-width:1100px;margin:0 auto;
}
.portfolio-grid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--dark-gray);
}

/* instagram */
.instagram-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1100px;margin:0 auto 32px;
}
.instagram-grid blockquote.instagram-media{margin:0 !important;width:100% !important;}
.instagram-grid iframe.instagram-media{border:none !important;}
.social-links{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.social-links a{color:var(--off-white);border-bottom:1px solid var(--mid-gray);padding-bottom:2px;}
.social-links a:hover{border-bottom-color:var(--off-white);}

/* über mich */
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.about-grid img{aspect-ratio:4/5;object-fit:cover;background:var(--dark-gray);}
.about-text p{margin-bottom:16px;color:var(--off-white);}

/* newsletter */
.newsletter{
  background:var(--black);color:var(--off-white);
  text-align:center;padding:44px 32px;
}
.tree-icon{
  display:inline-block;width:22px;height:22px;
  margin-bottom:16px;
}
.newsletter h2{
  color:var(--white);font-size:18px;margin-bottom:8px;
}
.newsletter p{
  color:var(--mid-gray);font-size:14px;margin-bottom:24px;
}
.newsletter-form{
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
}
.newsletter-form input{
  background:transparent;border:1px solid var(--dark-gray);
  color:var(--off-white);padding:0 16px;height:44px;
  font-family:var(--font);font-size:14px;width:240px;
}
.newsletter-form button{
  background:var(--off-white);color:var(--black);border:none;
  height:44px;padding:0 24px;font-family:var(--font);font-weight:700;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
}
.newsletter-feedback{font-size:13px;margin-top:12px;min-height:18px;}

/* kontakt */
#kontakt{padding-top:44px;padding-bottom:44px;}
#kontakt .section-title{margin-bottom:20px;}
.contact-line{font-size:15px;margin-bottom:8px;text-align:center;}
.contact-line a{border-bottom:1px solid transparent;}
.contact-line a:hover{border-bottom-color:var(--off-white);}

/* footer */
.site-footer{
  background:var(--black);
  text-align:center;padding:28px 32px;
}
.footer-logo{width:56px;height:auto;margin:0 auto 12px;}
.site-footer p{font-size:12px;color:var(--mid-gray);margin-bottom:10px;}
.footer-nav{display:flex;justify-content:center;gap:20px;}
.footer-nav a{font-size:12px;color:var(--off-white);}

/* responsive */
@media (max-width:800px){
  .field-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .instagram-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  #mainNav{
    position:absolute;top:100%;right:0;left:0;
    background:var(--black);flex-direction:column;gap:0;
    display:none;
  }
  #mainNav.open{display:flex;}
  #mainNav a{padding:16px 24px;border-top:1px solid var(--dark-gray);}
  .nav-toggle{display:flex;}

  .site-header{padding:20px;}
  .section{padding:56px 20px;}
  .section-title{margin-bottom:24px;}
  .legal{padding:120px 20px 56px !important;}

  .hero{padding:130px 16px 48px;}
  .hero-collage{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    grid-auto-rows:120px;
    gap:12px;
  }
  .hero-img-1,.hero-img-2,.hero-img-3,.hero-img-4,.hero-img-5,.hero-img-6,.hero-img-7{
    grid-column:auto;grid-row:auto;
  }
  .hero-center{
    grid-column:1/-1;grid-row:auto;order:-1;padding:0 0 32px;
  }
  .hero-logo{
    width:clamp(160px,55vw,240px);
  }
  .hero-claim{font-size:clamp(20px,5.2vw,26px);}

  .newsletter{padding:32px 20px;}
  #kontakt{padding-top:32px;padding-bottom:32px;}
  .site-footer{padding:24px 20px;}
  .newsletter-form{flex-direction:column;align-items:center;gap:12px;}
  .newsletter-form input,.newsletter-form button{width:100%;max-width:320px;}
  .field-card p{font-size:15px;}
  .social-links{gap:16px;}
  .footer-nav{gap:16px;}
}

@media (max-width:560px){
  .field-grid{grid-template-columns:1fr;}
  .field-card img{aspect-ratio:3/2;}
  .about-grid{gap:24px;}
}