*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.35}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px;
  background:#fff;
}
.logo{font-size:32px;font-weight:700;letter-spacing:-.03em;}
.logo:hover{text-decoration: none;}
.main-navigation{display:flex;align-items:center;gap:28px}
.main-navigation a{white-space:nowrap}
.menu-toggle{display:none;border:0;background:transparent;padding:8px;margin:-8px;cursor:pointer}
.menu-toggle span{display:block;width:28px;height:2px;background:#111;margin:5px 0;transition:transform .25s ease,opacity .25s ease}

.hero{
  min-height:100vh;padding:150px 7vw 10vh;
  display:flex;flex-direction:column;justify-content:center
}
.hero h1{
  font-size:clamp(48px,8vw,130px);line-height:.92;
  letter-spacing:-.055em;font-weight:400;max-width:1500px;margin:0
}
.hero p{font-size:clamp(20px,2vw,32px);max-width:900px;margin:80px 0 0}

.content{padding:150px 7vw 140px;max-width:1500px}
.content>h1{
  font-size:clamp(56px,10vw,150px);font-weight:400;
  line-height:.9;letter-spacing:-.05em;margin:0 0 100px
}
.content p{max-width:950px;font-size:clamp(18px,1.7vw,28px);line-height:1.20;margin:0 0 45px}
.content .lead{font-size:clamp(24px,2.0vw,40px);max-width:1500px}
.content section{margin-top:140px}
.content h2{font-size:clamp(32px,4vw,64px);font-weight:400;letter-spacing:-.03em;line-height:1;margin:0 0 42px}
.content h3{font-size:clamp(24px,2.5vw,40px);font-weight:400;line-height:1.1;margin:70px 0 25px}

.links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:90px 0}
.links a{font-size:24px}

.strategy-header {
  margin:100px 0 20px;
  width:100%;aspect-ratio:16/9;
  min-height:320px;
  background: #4554cf url("../img/strategie_header.png") center center / cover no-repeat;
  display:flex;align-items:center;
  justify-content:center;
  overflow:hidden
}
.strategy-header span{font-size:14px;color:#fff;opacity:.75;letter-spacing:.08em;text-transform:uppercase}
.strategy-header img{width:100%;height:100%;object-fit:cover;display:block}

.planning-header {
  margin:100px 0 20px;
  width:100%;aspect-ratio:16/9;
  min-height:960px;
  background: #fff url("../img/planung_header.png") center center / cover no-repeat;
  display:flex;align-items:center;
  justify-content:center;
  overflow:hidden
}
.planning-header span{font-size:14px;color:#fff;opacity:.75;letter-spacing:.08em;text-transform:uppercase}
.planning-header img{width:100%;height:100%;object-fit:cover;display:block}

.vision-header {
  margin:100px 0 20px;
  width:100%;aspect-ratio:16/9;
  min-height:320px;
  background: url("../img/vision_header.png") center left / contain no-repeat;
  display:flex;align-items:center;
  justify-content:center;
  overflow:hidden
}
.vision-header span{font-size:14px;color:#fff;opacity:.75;letter-spacing:.08em;text-transform:uppercase}
.vision-header img{width:100%;height:100%;object-fit:cover;display:block}

.cta{
  padding:15vh 7vw;background:#111;color:#fff;min-height:60vh;
  display:flex;flex-direction:column;justify-content:center
}
.cta h2{
  font-size:clamp(50px,8vw,120px);line-height:.95;font-weight:400;
  letter-spacing:-.05em;margin:0 0 48px
}
.cta p{font-size:clamp(18px,1.8vw,28px);max-width:1500px;margin:0 0 38px}
.cta-links{display:flex;gap:30px;flex-wrap:wrap}
.cta a{font-size:24px}

.site-footer,.home-footer-links{
  background: #f0f276;
  position:fixed;  bottom:0;  left:0;  right:0;  z-index:100;
  display:flex;justify-content:space-between;gap:12px;
  padding:12px 32px;font-size:14px
}
.home-footer-links{margin-top:-80px;position:relative;z-index:2}

.contact-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:7vw;row-gap:80px;margin-top:0!important
}
.contact-grid>div h2{font-size:clamp(26px,3vw,48px)}
.contact-grid>div p{font-size:clamp(18px,1.5vw,24px)}
.legal-page h2{margin-top:90px}

@media(max-width:700px){
  .strategy-detail-grid,
  .strategy-detail-grid--image-left{
    grid-template-columns:1fr;
    gap:40px;
  }
  .strategy-detail-grid .section-image,
  .strategy-detail-grid--image-left .section-image{
    order:1;
  }
  .strategy-detail-grid .strategy-detail-text,
  .strategy-detail-grid--image-left .strategy-detail-text{
    order:2;
  }
  .section-image{
    min-height:220px;
    aspect-ratio:4/3;
  }

  .site-header{padding:18px}
  .logo{font-size:19px}
  .menu-toggle{display:block;position:relative;z-index:60}
  .main-navigation{
    position:fixed;inset:0;z-index:55;background:#fff;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:18px;padding:80px 18px 40px;
    transform:translateX(100%);transition:transform .28s ease
  }
  .main-navigation a{font-size:clamp(42px,14vw,70px);line-height:1;letter-spacing:-.05em}
  .site-header.menu-active .main-navigation{transform:translateX(0)}
  .site-header.menu-active .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.menu-active .menu-toggle span:nth-child(2){opacity:0}
  .site-header.menu-active .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero,.content{padding-left:18px;padding-right:18px}
  .hero{padding-top:110px}
  .hero p{margin-top:50px}
  .content>h1{margin-bottom:60px}
  .content section{margin-top:90px}
  .links{margin:60px 0}
  .image-placeholder{margin-top:70px;min-height:220px;aspect-ratio:4/3}
  .cta{padding-left:18px;padding-right:18px}
  .site-footer,.home-footer-links{padding:12px 12px;gap:12px;flex-wrap:nowrap´}
  .home-footer-links{margin-top:-70px;color:#111}
  .contact-grid{grid-template-columns:1fr;row-gap:55px}
}


.strategy-detail h2{
  font-size:clamp(22px,2.1vw,38px);
  line-height:1.08;
  margin-bottom:50px;
}
.strategy-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  gap:6vw;
  align-items:center;
}
.strategy-detail-grid--image-left{
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr);
}
.strategy-detail-text p{
  font-size:clamp(17px,1.35vw,23px);
}
.section-image{
  margin:0;
  width:100%;
  aspect-ratio:4/3;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.section-image span{
  font-size:13px;
  color:#fff;
  opacity:.78;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}


/* Mobile strategy sections: force a true vertical flow.
   This block intentionally comes after the desktop grid rules. */
@media (max-width: 700px){
  .strategy-detail-grid,
  .strategy-detail-grid--image-left{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:32px;
    width:100%;
  }

  .strategy-detail-grid .section-image,
  .strategy-detail-grid--image-left .section-image {
    order:1;
    width:100%;
    min-width:0;
    margin:0;
  }

  .strategy-detail-grid .strategy-detail-text,
  .strategy-detail-grid--image-left .strategy-detail-text{
    order:2;
    width:100%;
    min-width:0;
  }

  .strategy-detail-grid .strategy-detail-text p,
  .strategy-detail-grid--image-left .strategy-detail-text p{
    width:100%;
    max-width:none;
  }
}


/* Zentriertes Seitenraster für größere Displays */
@media (min-width: 1200px){
  .site-header{
    padding-left:max(32px, calc((100vw - 1500px) / 2 + 32px));
    padding-right:max(32px, calc((100vw - 1500px) / 2 + 32px));
  }

  .hero,
  .content{
    width:100%;
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
  }

  .site-footer,
  .home-footer-links{
    padding-left:max(32px, calc((100vw - 1500px) / 2 + 32px));
    padding-right:max(32px, calc((100vw - 1500px) / 2 + 32px));
  }

  .cta{
    padding-left:max(7vw, calc((100vw - 1500px) / 2 + 7vw));
    padding-right:max(7vw, calc((100vw - 1500px) / 2 + 7vw));
  }
}


@media (min-width: 1000px){
  .content p{
    max-width:100%;
  }
}


@media (min-width: 1000px){
  .hero{
    width:min(1500px, 100%);
    margin-left:auto;
    margin-right:auto;
  }

  .hero p{
    max-width:100%;
  }
}