:root{
  --black:#202020;
  --navy:#26303e;
  --gold:#b9aa91;
  --sand:#d9cdba;
  --paper:#f7f5f1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--black)}
body{color:var(--navy);font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif}
a{text-decoration:none}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif}

.topbar{height:64px;background:var(--black);color:#525965}
.nav-inner{height:64px;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 3px}
.main-nav{height:100%;display:flex;align-items:center;gap:39px}
.main-nav a{height:100%;display:flex;align-items:center;position:relative;color:#c4c1bb;font-size:16px;font-weight:300;white-space:nowrap}
.main-nav a:hover{color:#f4f1eb}
.main-nav a.active{color:#d2bea0}
.main-nav a.active::after{content:"";position:absolute;left:0;bottom:13px;width:53px;height:2px;background:#d2bea0}
.top-contact{display:flex;align-items:center;gap:18px;font-size:15px;font-weight:300;color:#989b9f}
.top-contact b{width:1px;height:19px;background:#424242}

.site-shell{width:calc(100% - 30px);max-width:1643px;margin:0 auto;background:#fff}
.eyebrow{display:block;margin-bottom:18px;color:#a99473;font-size:13px;font-weight:600;letter-spacing:3.1px}
.eyebrow.light{color:#cbb99a}
.gold-line{width:136px;height:3px;background:#b9aa91;margin:28px 0 23px}

.project-hero{
  background:#f7f5f1;
  padding:88px 8.5% 88px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:64px;
  align-items:center;
}
.backlink{
  display:inline-block;
  margin-bottom:36px;
  color:#7d8388;
  font-size:14px;
}
.project-hero h1{
  margin:0;
  color:#26303e;
  font-size:54px;
  line-height:1.12;
  letter-spacing:-1.8px;
}
.lead{
  margin:0 0 30px;
  color:#5f666c;
  font-size:20px;
  font-weight:300;
}
.project-meta{
  border-top:1px solid #d4cec4;
}
.project-meta>div{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid #d4cec4;
}
.project-meta span{
  color:#9b8768;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.7px;
}
.project-meta strong{
  color:#4e565d;
  font-size:15px;
  line-height:1.4;
  font-weight:400;
}
.hero-image{
  margin:0;
  overflow:hidden;
  border-radius:20px;
  background:#ddd9d2;
}
.hero-image img{
  display:block;
  width:100%;
  height:520px;
  object-fit:cover;
  object-position:center;
}

.project-intro{
  padding:96px 8.5%;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
}
.project-intro h2,
.gallery-head h2,
.map-copy h2,
.project-close h2{
  margin:0;
  color:#26303e;
  font-size:43px;
  line-height:1.2;
  letter-spacing:-1.4px;
}
.intro-copy p,
.map-copy p,
.project-close p{
  margin:0 0 16px;
  color:#666d72;
  font-size:17px;
  line-height:1.65;
  font-weight:300;
}

.gallery-section{
  background:#292929;
  padding:90px 8.5% 104px;
}
.gallery-head{margin-bottom:34px}
.gallery-head h2{color:#f1ede7}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:250px;
  gap:14px;
}
.gallery-grid figure{
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#3a3a3a;
  grid-column:span 4;
}
.gallery-grid .g-wide{
  grid-column:span 8;
  grid-row:span 2;
}
.gallery-grid figure:nth-child(4),
.gallery-grid figure:nth-child(5){
  grid-column:span 6;
}
.gallery-grid img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.project-map{
  padding:94px 8.5%;
  background:#d9cdba;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:72px;
  align-items:center;
}
.project-map figure{
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#eeeae3;
}
.project-map img{
  width:100%;
  height:auto;
  display:block;
}

.project-close{
  background:#202020;
  padding:78px 8.5%;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:90px;
  align-items:center;
}
.project-close h2{color:#f1ede7}
.project-close p{color:#aeb2b6}
.project-close a{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:0 18px;
  background:#d9cdba;
  color:#26303e;
  font-size:15px;
}
.project-close a span{font-size:21px}

.footer{
  background:#202020;
  color:#777d84;
  padding:34px 8.5%;
  display:grid;
  grid-template-columns:150px 1fr 1fr auto;
  gap:32px;
  align-items:center;
  font-size:14px;
}
.footer>img{width:108px;height:auto}
.footer nav{display:flex;gap:24px}
.footer nav a{color:#777d84}

@media(max-width:1100px){
  .project-hero,.project-intro,.project-map,.project-close{gap:50px}
  .project-hero h1{font-size:46px}
}
@media(max-width:900px){
  .project-hero,.project-intro,.project-map,.project-close{
    grid-template-columns:1fr;
  }
  .hero-image img{height:auto;aspect-ratio:16/10}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:240px}
  .gallery-grid figure,
  .gallery-grid .g-wide,
  .gallery-grid figure:nth-child(4),
  .gallery-grid figure:nth-child(5){
    grid-column:span 1;
    grid-row:span 1;
  }
  .gallery-grid .g-wide{grid-column:span 2}
  .footer{grid-template-columns:1fr}
}
@media(max-width:640px){
  .site-shell{width:calc(100% - 12px)}
  .project-hero,.project-intro,.gallery-section,.project-map,.project-close,.footer{
    padding-left:24px;padding-right:24px
  }
  .project-hero h1{font-size:38px}
  .project-intro h2,.gallery-head h2,.map-copy h2,.project-close h2{font-size:31px}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .gallery-grid figure,
  .gallery-grid .g-wide{grid-column:1}
  .gallery-grid img{height:auto;aspect-ratio:4/3}
  .project-meta>div{grid-template-columns:1fr}
  .hero-image,.gallery-grid figure,.project-map figure{border-radius:14px}
}


/* V1.8 – Wimbern: eigener Übergangsblock Bestand -> neue Nutzung */
.project-transition{
  padding:94px 8.5%;
  background:#d9cdba;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:72px;
  align-items:center;
}
.project-transition h2{
  margin:0;
  color:#26303e;
  font-family:Georgia,"Times New Roman",serif;
  font-size:43px;
  line-height:1.2;
  letter-spacing:-1.4px;
}
.project-transition>div:first-child>p{
  margin:20px 0 0;
  color:#666d72;
  font-size:17px;
  line-height:1.65;
  font-weight:300;
}
.transition-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.transition-grid figure{
  margin:0;
  min-width:0;
}
.transition-grid figure>span{
  display:block;
  margin-bottom:9px;
  color:#8d7657;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.7px;
}
.transition-grid img{
  width:100%;
  height:280px;
  display:block;
  object-fit:cover;
  border-radius:18px;
}

@media(max-width:900px){
  .project-transition{
    grid-template-columns:1fr;
    gap:45px;
  }
}
@media(max-width:640px){
  .project-transition{
    padding:70px 24px;
  }
  .project-transition h2{
    font-size:31px;
  }
  .transition-grid{
    grid-template-columns:1fr;
  }
  .transition-grid img{
    height:auto;
    aspect-ratio:4/3;
    border-radius:14px;
  }
}


/* V2.2 – Kreuztal: Bild 04 bewusst vollständig und hochformatig zeigen */
.kreuztal-gallery .g-tall-contain{
  grid-column:span 4;
  grid-row:span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202020;
}
.kreuztal-gallery .g-tall-contain img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media(max-width:900px){
  .kreuztal-gallery .g-tall-contain{
    grid-column:span 1;
    grid-row:span 2;
  }
}
@media(max-width:640px){
  .kreuztal-gallery .g-tall-contain{
    grid-column:1;
    grid-row:auto;
  }
  .kreuztal-gallery .g-tall-contain img{
    height:auto;
    aspect-ratio:auto;
  }
}


/* V2.3 – Kreuztal final: alle Bilder vollständig, eindeutige Abfolge */
.kreuztal-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e7e3dc;
}
.kreuztal-hero img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
}

.kt-stage{
  padding:92px 8.5% 102px;
}
.kt-stage-light{
  background:#f7f5f1;
}
.kt-stage-dark{
  background:#292929;
}
.kt-stage-sand{
  background:#d9cdba;
}
.kt-stage-head{
  max-width:920px;
  margin:0 0 36px;
}
.kt-stage-head h2{
  margin:0;
  color:#26303e;
  font-family:Georgia,"Times New Roman",serif;
  font-size:43px;
  line-height:1.2;
  letter-spacing:-1.4px;
}
.kt-stage-head p{
  margin:18px 0 0;
  max-width:760px;
  color:#686e73;
  font-size:17px;
  line-height:1.6;
  font-weight:300;
}
.kt-stage-dark .kt-stage-head h2{
  color:#f1ede7;
}
.kt-stage-dark .kt-stage-head p{
  color:#aeb2b6;
}

.kt-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}
.kt-pair figure,
.kt-tech-grid figure{
  margin:0;
  min-width:0;
}
.kt-pair figure>span,
.kt-tech-grid figure>span{
  display:block;
  margin:0 0 9px;
  color:#9a8464;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.7px;
}
.kt-stage-dark .kt-tech-grid figure>span{
  color:#c4ae8d;
}

/* Vorher-Bilder: Hochformat bleibt Hochformat, nichts wird abgeschnitten */
.kt-pair-portrait{
  max-width:980px;
}
.kt-pair-portrait figure{
  display:flex;
  flex-direction:column;
}
.kt-pair-portrait img{
  display:block;
  width:100%;
  height:auto;
  max-height:720px;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
  background:#ece8e1;
}

/* Technik: natürliche Proportionen; Bild 04 bewusst groß und unverändert */
.kt-tech-grid{
  display:grid;
  grid-template-columns:1.28fr .86fr .86fr;
  gap:18px;
  align-items:start;
}
.kt-tech-grid img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
  background:#202020;
}
.kt-tech-wide img{
  max-height:620px;
}
.kt-tech-portrait img{
  max-height:760px;
}
.kt-tech-portrait:nth-child(2) img{
  max-height:none;
}

/* Nachher: beide Bilder vollständig, keine erzwungene identische Höhe */
.kt-pair-finished img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
  background:#e8e2d8;
}

@media(max-width:1000px){
  .kt-tech-grid{
    grid-template-columns:1fr 1fr;
  }
  .kt-tech-wide{
    grid-column:1 / -1;
  }
}
@media(max-width:760px){
  .kt-stage{
    padding:72px 6% 78px;
  }
  .kt-pair,
  .kt-tech-grid{
    grid-template-columns:1fr;
  }
  .kt-tech-wide{
    grid-column:1;
  }
}
@media(max-width:640px){
  .kt-stage{
    padding-left:24px;
    padding-right:24px;
  }
  .kt-stage-head h2{
    font-size:31px;
  }
  .kt-pair img,
  .kt-tech-grid img{
    border-radius:14px;
  }
}


/* V2.3a – Kreuztal Technikblock mit zwei Bildern nach Hero-Nutzung von Bild 05 */
.kt-tech-grid{
  grid-template-columns:1.35fr .85fr;
  max-width:1120px;
}
@media(max-width:760px){
  .kt-tech-grid{
    grid-template-columns:1fr;
  }
}


/* V2.3.1 – Kreuztal: Technik 05 groß, Aufmacher = Nachher-Türen */
.kt-tech-grid{
  grid-template-columns:1.35fr .85fr;
  max-width:1120px;
}
.kt-tech-full{
  grid-column:1 / -1;
}
.kt-tech-full img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
  background:#202020;
}
@media(max-width:760px){
  .kt-tech-grid{
    grid-template-columns:1fr;
  }
  .kt-tech-full{
    grid-column:1;
  }
}
@media(max-width:640px){
  .kt-tech-full img{
    border-radius:14px;
  }
}


/* V2.4 – Kreuztal: Technikfoto 05 kleiner, weiterhin vollständig sichtbar */
.kt-tech-full{
  grid-column:1 / -1;
  width:min(100%,720px);
  justify-self:start;
}
.kt-tech-full img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
}
@media(max-width:760px){
  .kt-tech-full{
    width:100%;
  }
}