@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root{
  --paper: #EDEDED;
  --paper-2: #E1E1E1;
  --ink: #232323;
  --ink-soft: #4d4d4d;
  --bronze: #8a8a8a;
  --line: #d3d3d3;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:90px; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Serif', serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:'Noto Serif', serif;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.01em;
}
em, i, .accent{ font-style:normal; font-weight:400; color:var(--bronze); }

.kicker{
  font-family:'Noto Serif', serif;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

/* ---------- header ---------- */
:root{
  --header-grey: #b3b3b3;
}
header{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding:32px 0;
}
header.solid{
  position:sticky; top:0;
  background:var(--header-grey);
  padding:26px 0;
  border-bottom:3px dotted var(--ink);
  transition:background 0.25s ease;
}
header.solid.is-scrolled{
  background:#fff;
}
header.logo-hidden .logo-img{
  opacity:0;
  transition:opacity 0.25s ease;
}
header.logo-hidden.is-scrolled .logo-img{
  opacity:1;
}
.nav-inner{
  max-width:1300px; margin:0 auto; padding:0 48px;
  display:flex; justify-content:space-between; align-items:center;
}
.logo{
  font-family:'Noto Serif', serif;
  font-style:normal;
  font-weight:500;
  font-size:1.3rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
}
header.solid .logo{ color:var(--ink); }
.logo-img{
  height:38px;
  width:38px;
  display:block;
  filter:brightness(0) invert(1);
}
header.solid .logo-img{ filter:none; }
nav ul{ list-style:none; display:flex; gap:52px; }
nav a{
  font-size:1rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  padding-bottom:6px;
  border-bottom:2.5px solid transparent;
}
header.solid nav a{ color:var(--ink); }
nav a:hover{ color:var(--bronze); border-bottom-color:#000; }
nav a.active{ border-bottom-color:#000; }

/* ---------- mobile nav toggle ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:32px;
  height:24px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.nav-toggle span{
  display:block;
  height:2.5px;
  width:100%;
  background:var(--ink);
  border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

@media (max-width:860px){
  .nav-inner{ position:relative; }
  .nav-toggle{
    display:flex;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  nav{ position:relative; }
  nav ul{
    display:none;
    position:fixed;
    top:86px; left:0; right:0;
    flex-direction:column;
    align-items:center;
    gap:28px;
    background:var(--header-grey);
    padding:32px 0;
    border-bottom:3px dotted var(--ink);
    z-index:30;
  }
  nav.nav-open ul{ display:flex; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:170px 0 60px;
  display:flex;
  align-items:flex-end;
  background:var(--paper);
}
.hero-inner{
  position:relative; z-index:2;
  padding:0 40px;
  color:var(--ink);
  max-width:820px;
}
.hero .kicker{ color:var(--ink-soft); margin-bottom:20px; }
.hero h1{
  font-size:clamp(2.4rem, 5.2vw, 4.2rem);
  color:#fff;
}

/* ---------- statement ---------- */
.statement{
  padding:130px 0;
  text-align:center;
}
.statement .kicker{ display:block; margin-bottom:22px; }
.statement h2{
  max-width:760px; margin:0 auto;
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight:340;
}
.statement p{
  max-width:560px; margin:30px auto 0;
  color:var(--ink-soft);
  font-size:1.02rem;
}
.statement .cta-link{
  display:inline-block;
  margin-top:36px;
  font-family:'Noto Serif', serif;
  font-style:normal;
  font-size:1.05rem;
  color:var(--bronze);
  border-bottom:1px solid var(--bronze);
  padding-bottom:2px;
}

/* ---------- brand center (home) ---------- */
.brand-center{
  min-height:calc(100vh - 105px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  background:var(--header-grey);
  text-align:center;
}
.brand-center-logo{
  width:150px;
  height:150px;
}
.brand-center h1{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---------- gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  padding:56px 48px;
  background:#fff;
}
.gallery .ph{
  background: var(--paper-2);
  border:none;
  width:100%;
}
.proj-card{
  break-inside:avoid;
  margin-bottom:36px;
  position:relative;
  display:block;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  overflow:hidden;
  transition:box-shadow 0.3s ease, transform 0.3s ease;
}
.proj-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,0.1);
  transform:translateY(-3px);
}
.proj-card img,
.proj-card .ph{
  filter:saturate(0.55);
  transition:transform 0.4s ease;
  display:block;
  object-position:top center;
}
.proj-card:hover img,
.proj-card:hover .ph{
  transform:scale(1.03);
}
.proj-card h3{
  position:absolute;
  left:0; right:0; bottom:0;
  margin:0;
  padding:32px 16px 16px;
  font-size:1rem;
  font-weight:500;
  text-align:center;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.proj-card:hover h3{
  opacity:1;
}

/* ---------- project detail photos (large, single column) ---------- */
.project-photos{
  display:flex;
  flex-direction:column;
  gap:48px;
  max-width:1100px;
  margin:0 auto;
  padding:56px 48px 100px;
  background:#fff;
}
.project-photos img{
  width:100%;
  display:block;
}
.info-grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:700px){
  .info-grid-2col{
    grid-template-columns:1fr;
    gap:28px;
  }
}
.photo-pair{
  display:flex;
  gap:48px;
}
.photo-pair img{
  width:50%;
}
@media (max-width:700px){
  .photo-pair{
    flex-direction:column;
  }
  .photo-pair img{
    width:100%;
  }
}

/* ---------- about / vision ---------- */
.about{
  padding:140px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about .portrait{
  aspect-ratio:3/4;
  background: var(--paper-2);
  border:1px solid var(--line);
}
.portrait-photo{
  aspect-ratio:3/4;
  overflow:hidden;
}
.portrait-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  filter:grayscale(100%) contrast(1.05);
}
.profile-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
  margin-bottom:48px;
}
.profile-photo{
  width:100%;
  max-width:1100px;
  height:auto;
  aspect-ratio:16/9;
  border-radius:6px;
  object-fit:cover;
  object-position:center;
  filter:grayscale(100%) contrast(0.95);
  flex-shrink:0;
  margin:0 auto;
}
.profile-header h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  display:inline-block;
}
/* ---------- profil: leistungen ---------- */
.profile-services{
  max-width:740px;
  margin:0 auto 72px;
  text-align:left;
}
.profile-services p{
  margin-bottom:24px;
}
.services-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
  padding:0;
  margin:0;
  font-size:0.9rem;
  letter-spacing:0.02em;
  color:#555;
  text-align:center;
}
.services-list li{
  position:relative;
  padding-left:14px;
}
.services-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--bronze);
}

/* ---------- profil: karte + team ---------- */
.profile-map-block{
  max-width:1100px;
  margin:0 auto 72px;
}
.profile-map-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.profile-map-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:6px;
  border:1px solid #e5e2dd;
  filter:grayscale(100%) contrast(1.05);
  transition:opacity .25s ease;
}
.profile-map-link:hover .profile-map-img{
  opacity:0.85;
}
.profile-map-caption{
  display:block;
  margin-top:14px;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:#666;
  text-align:center;
}
.profile-map-link:hover .profile-map-caption{
  color:var(--bronze);
}
.team-list{
  max-width:1000px;
  margin:0 auto;
}
.team-list h3{
  text-align:center;
  font-size:clamp(1.1rem, 1.8vw, 1.3rem);
  margin-bottom:32px;
  font-weight:500;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
.team-card{
  text-align:center;
  padding:24px 12px;
  border-top:1px solid #eee;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.team-name{
  font-weight:500;
}
.team-list a{
  color:#666;
  text-decoration:none;
  font-size:0.9rem;
  word-break:break-word;
}
.team-list a:hover{
  color:var(--bronze);
}
@media (max-width:700px){
  .team-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
  .profile-competencies{
    white-space:normal !important;
    display:block !important;
    text-align:center !important;
  }
  .profile-name-block h2{
    font-size:clamp(1.8rem, 8vw, 2.6rem) !important;
  }
}
/* ---------- werkliste ---------- */
.werk-stats{
  display:flex;
  justify-content:center;
  gap:64px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.werk-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.werk-stat-num{
  font-family:'Noto Serif', serif;
  font-weight:700;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  color:var(--bronze);
  line-height:1.1;
}
.werk-stat-label{
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:6px;
}
.werk-grid{
  columns:3 260px;
  column-gap:48px;
}
.werk-year{
  break-inside:avoid;
  margin-bottom:36px;
}
.werk-year-label{
  display:block;
  font-family:'Noto Serif', serif;
  font-style:normal;
  font-weight:700;
  color:var(--ink);
  font-size:1rem;
  letter-spacing:0.02em;
  margin-bottom:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
.werk-year ul{
  list-style:none;
}
.werk-year li{
  font-size:0.92rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin-bottom:6px;
}
.werk-year li a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.werk-year li a:hover{
  color:var(--ink);
  border-bottom-color:var(--ink-soft);
}

.profile-text p{
  color:var(--ink-soft);
  margin-bottom:20px;
}
.about .role{
  font-family:'Noto Serif', serif; font-style:normal; color:var(--bronze);
  margin-bottom:10px;
}
.about h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:26px; }
.about p{ color:var(--ink-soft); margin-bottom:16px; max-width:460px; }

/* ---------- philosophy (full bleed quote) ---------- */
.philosophy{
  position:relative;
  padding:190px 0;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(20,20,20,0.35), rgba(20,20,20,0.55)),
    linear-gradient(140deg, #8a8a8a, #333333);
  color:#fff;
}
.philosophy .kicker{ color:rgba(255,255,255,0.75); margin-bottom:26px; }
.philosophy h2{
  max-width:760px; margin:0 auto;
  font-size:clamp(1.7rem, 4vw, 2.8rem);
  color:#fff;
  font-weight:340;
}

/* ---------- services ---------- */
.services{ padding:140px 0; }
.services-head{ text-align:center; max-width:760px; margin:0 auto 70px; }
.services-head .kicker{ display:block; margin-bottom:20px; }
.services-head h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); font-weight:340; }
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
}
.service-card .ph{
  aspect-ratio:4/5;
  background: var(--paper-2);
  border:1px solid var(--line);
  margin-bottom:24px;
}
.service-card h3{ font-size:1.25rem; font-weight:500; margin-bottom:10px; }
.service-card p{ color:var(--ink-soft); font-size:0.95rem; }

/* ---------- CTA ---------- */
.cta-band{
  padding:140px 0;
  text-align:center;
}
.cta-band h2{ font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:340; max-width:640px; margin:0 auto; }
.cta-band p{ color:var(--ink-soft); max-width:520px; margin:24px auto 0; }
.btn{
  display:inline-block;
  margin-top:40px;
  padding:16px 34px;
  border:1px solid var(--ink);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.btn:hover{ background:var(--ink); color:var(--paper); }

/* ---------- newsletter ---------- */
.newsletter{
  padding:90px 0;
  border-top:1px solid var(--line);
  text-align:center;
}
.newsletter h3{ font-size:1.1rem; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:14px; }
.newsletter p{ color:var(--ink-soft); max-width:460px; margin:0 auto 28px; font-size:0.92rem; }
.newsletter form{ display:flex; justify-content:center; gap:0; max-width:420px; margin:0 auto; }
.newsletter input{
  flex:1; background:transparent; border:none; border-bottom:1px solid var(--ink);
  padding:10px 4px; font-family:'Noto Serif'; font-size:0.95rem; color:var(--ink);
}
.newsletter button{
  background:none; border:none; border-bottom:1px solid var(--ink);
  font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; padding:10px 14px; cursor:pointer;
}

/* ---------- footer ---------- */
footer{
  background:var(--header-grey);
  color:var(--ink);
  padding:20px 0;
}
.footer-grid{
  display:flex;
  justify-content:center;
  padding-bottom:20px;
}
footer h4{
  font-family:'Noto Serif'; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(239,234,225,0.55); margin-bottom:18px; font-weight:400;
}
footer .logo-f{
  font-family:'Noto Serif', serif; font-style:normal; font-size:1.4rem; color:#fff;
  display:flex; align-items:center; gap:12px;
}
footer .logo-f img{ height:48px; width:48px; filter:brightness(0) invert(1); }
footer p, footer a{ font-size:0.92rem; margin-bottom:10px; display:block; color:rgba(239,234,225,0.85); }
footer a:hover{ color:var(--bronze); }
.footer-bottom{
  display:flex; justify-content:center;
  font-size:0.78rem; color:var(--ink); font-weight:500;
  flex-wrap:wrap; gap:12px;
}

@media (max-width: 860px){
  .about{ grid-template-columns:1fr; gap:40px; }
  .service-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2, 1fr); gap:16px; padding:32px 22px; }
  .gallery .ph{ margin-bottom:16px; }
  nav ul{ gap:22px; }
  .wrap{ padding:0 22px; }
  .nav-inner{ padding:0 22px; }
  .statement, .about, .philosophy, .services, .cta-band{ padding:80px 0; }
  .werk-grid{ columns:1; }
}
@media (max-width:700px){
  .gallery{ grid-template-columns:1fr; }
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- back to top button ---------- */
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--ink);
  transition:background 0.25s ease, transform 0.25s ease;
}
.social-icon:hover{
  background:var(--bronze);
  transform:translateY(-2px);
}

.to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--ink);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  z-index:40;
}
.to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.to-top img{
  width:22px;
  height:22px;
  filter:brightness(0) invert(1);
}