*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#111;background:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}header{height:66px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;position:sticky;top:0;background:#fffffff2;z-index:5}header b{font-size:24px}nav{display:flex;gap:24px}a{color:inherit}nav a{text-decoration:none;font-size:14px}section{padding:64px 7vw;position:relative}.section-mark{position:absolute;left:1.5vw;top:34px;font-weight:800;font-size:16px}h1,h2{font-weight:400;letter-spacing:-.045em;line-height:.94}.hero h1{font-size:clamp(54px,7.5vw,116px);margin:22px 0 14px}.hero h2,section>h2{font-size:clamp(40px,5vw,76px);margin:0 0 42px}.hero img{width:100%;height:min(40vw,520px);object-fit:cover}.caps{font-weight:800;letter-spacing:.08em;font-size:13px;max-width:950px}.green{background:#176b0c;color:#fff}.green>p{max-width:930px;line-height:1.45}.planning{padding-top:42px;padding-bottom:28px}.planning-inner{max-width:980px;margin:0 auto}.planning .section-mark{color:#fff}.planning h2{font-size:clamp(46px,5vw,74px);margin:0 0 54px}.planning p{font-size:19px;line-height:1.35;max-width:none}.cards,.numbers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}.cards article,.numbers article{border:2px solid #ffffffd9;padding:22px;display:flex;flex-direction:column;gap:14px}.icon-cards article{min-height:134px;display:grid;grid-template-columns:1fr 110px;align-items:center}.icon-cards article>div{display:flex;flex-direction:column;gap:24px}.icon-cards b{font-size:15px;line-height:1.05}.icon-cards span{font-size:16px;line-height:1.35}.icon{font-style:normal;text-align:center;font-size:74px;line-height:1;color:#fff}.pill{display:block;width:92px;height:18px;border-radius:20px;background:linear-gradient(90deg,#fff 0 67%,#aaa 67%)}.people{font-size:31px;letter-spacing:-8px}.planning-end{border-bottom:2px solid #fff;padding:0 0 18px;margin:24px 0 0}.four,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.tile{height:160px;background:#ddd;padding:14px;display:flex;align-items:flex-end;font-size:12px;font-weight:700}.tile.kommune{background:url("assets/kommunale-strategie.jpeg") center/cover}.tile.wind{background:url("assets/wind-photovoltaik.jpg") center/cover}.tile.buerger{background:url("assets/buergerenergie.jpg") center/cover}.tile.strom{background:url("assets/lokale-stromnutzung.jpeg") center/cover}.tile.kommune,.tile.wind,.tile.buerger,.tile.strom{color:#fff;text-shadow:0 1px 5px #0008}.four p,.steps p,.two p{font-size:14px;line-height:1.45}.sand{background:#f3f0e9}.steps strong{display:block;font-family:Georgia,serif;font-size:82px;font-weight:400;margin-bottom:12px}.steps b{font-size:12px}.two,.about,.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px}.featured-projects article>img,.project-logo-placeholder{width:100%;height:220px;object-fit:cover;margin-bottom:22px}.project-logo-placeholder{background:#f3f0e9;display:flex;align-items:center;justify-content:center;text-align:center;font-size:28px;letter-spacing:.04em}.numbers{grid-template-columns:repeat(4,1fr)}.numbers article{min-height:150px;justify-content:space-between}.numbers strong{font-size:32px;font-weight:400}.numbers span{font-size:13px}.about{grid-template-columns:1.7fr .65fr}.about p{line-height:1.5}.about img{width:100%;aspect-ratio:3/4;object-fit:cover}.contact{border-top:1px solid #777;padding-top:45px}.logo{display:flex;flex-direction:column}.logo b{font-size:58px;line-height:.8}.logo span{margin-top:10px}.buttons{display:flex;gap:12px;flex-wrap:wrap}.buttons a{background:#111;color:#fff;text-decoration:none;padding:13px 17px}.project-intro{margin-top:58px;max-width:980px;border-top:1px solid #777;padding-top:30px}.project-intro h3{font-size:13px}.project-intro p{font-size:17px;line-height:1.5}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}.project-card{background:#f3f0e9}.project-card img{width:100%;height:220px;object-fit:cover;display:block}.project-card div{padding:22px}.project-card h3{margin:0 0 12px}.project-card p{font-size:14px;line-height:1.45;margin:0}
@media(max-width:760px){nav{display:none}.section-mark{left:7vw;top:18px}.four,.steps,.numbers{grid-template-columns:1fr 1fr}.two,.about,.contact{grid-template-columns:1fr}.about img{max-width:280px}.hero img{height:50vw}.project-grid{grid-template-columns:1fr}.project-card img{height:52vw}.planning-inner{margin-top:20px}.icon-cards article{grid-template-columns:1fr 72px}.icon{font-size:52px}}
@media(max-width:500px){section{padding:50px 7vw}.cards,.four,.steps,.numbers{grid-template-columns:1fr}.hero h1{font-size:54px}.hero h2,section>h2{font-size:42px}.tile{height:190px}.planning h2{font-size:43px}.planning p{font-size:16px}.icon-cards span{font-size:14px}}

.hero-logo-element{position:absolute;top:26px;right:7vw;width:clamp(170px,23vw,350px)!important;height:auto!important;object-fit:contain!important;z-index:2;background:transparent}
@media(max-width:760px){.hero-logo-element{width:160px!important;top:22px;right:7vw}}
@media(max-width:500px){.hero-logo-element{width:125px!important;top:20px}}

/* V4.2 refinements */
.hero-logo-element{width:clamp(105px,13vw,205px)!important;top:22px;right:5vw}
.contact-details .logo{margin:0 0 28px 0;align-items:flex-start}
.contact-details .logo b{font-size:58px}
.contact-details h3{margin-top:0}
.social-buttons a{display:inline-flex;align-items:center;gap:10px}
.social-icon{display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:#fff;color:#111;border-radius:3px;line-height:1}
.linkedin .social-icon{font-family:Arial,sans-serif;font-size:16px}
.snapaddy .social-icon{font-size:13px}
@media(max-width:760px){.hero-logo-element{width:120px!important;top:18px;right:5vw}.contact>div:first-child{display:none}}
@media(max-width:500px){.hero-logo-element{width:90px!important;top:16px;right:4vw}}

/* V4.3 image and network refinements */
.network{position:relative;width:96px;height:78px;display:block;margin:auto}.network span{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;z-index:2}.network span:nth-child(1){left:40px;top:2px}.network span:nth-child(2){left:5px;top:31px}.network span:nth-child(3){left:70px;top:29px}.network span:nth-child(4){left:24px;top:58px}.network span:nth-child(5){left:58px;top:57px}.network:before,.network:after{content:"";position:absolute;inset:10px 12px 12px;border:2px solid #fff;border-radius:48% 52% 45% 55%;transform:rotate(18deg);opacity:.95}.network:after{transform:rotate(-28deg);border-radius:55% 45% 55% 45%}.tile{background-position:center;background-size:cover;background-repeat:no-repeat}.tile.kommune{background-position:center 48%}.tile.buerger{background-position:center}.tile.strom{background-position:center 52%}
@media(max-width:760px){.network{width:66px;height:58px;transform:scale(.82);transform-origin:center}.icon-cards article{overflow:hidden}.tile{height:180px}}

/* V5 responsive SVG and interim project imagery */
.icon-svg{width:96px;height:78px;display:block;object-fit:contain;margin:auto;color:#fff}
@media(max-width:760px){.icon-svg{width:66px;height:58px}}
@media(max-width:500px){.icon-svg{width:60px;height:54px}}

.project-intro h3{font-size:clamp(28px,3.2vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0 0 20px}

/* V6.4 people icon: larger white outline silhouettes */
.icon-cards article:last-child .icon-svg{width:128px;height:92px}
@media(max-width:760px){.icon-cards article:last-child .icon-svg{width:92px;height:72px}}
@media(max-width:500px){.icon-cards article:last-child .icon-svg{width:88px;height:68px}}
/* V6.5: Titelbild bündig mit der linken Textkante, breiter bis zum rechten Rand */
.hero > img:not(.hero-logo-element){width:calc(100% + 7vw);max-width:none;display:block;object-fit:cover;object-position:center;margin-right:-7vw}
@media(max-width:760px){.hero > img:not(.hero-logo-element){width:calc(100% + 7vw);margin-right:-7vw}}

/* V6.6 approved hero proportions */
header b{font-size:30px;font-weight:800;color:#000}
.hero-logo-element{width:clamp(170px,18vw,290px)!important;top:24px;right:7vw}
.hero > img:not(.hero-logo-element){width:100%;max-width:none;height:min(36vw,500px);margin:0;display:block;object-fit:cover;object-position:center}
@media(max-width:760px){
  header b{font-size:28px}
  .hero-logo-element{width:150px!important;top:20px;right:7vw}
  .hero > img:not(.hero-logo-element){width:100%;height:58vw;margin:0;object-position:center}
}
@media(max-width:500px){
  header b{font-size:27px}
  .hero-logo-element{width:130px!important;top:18px;right:7vw}
  .hero > img:not(.hero-logo-element){width:100%;height:62vw;margin:0}
}

/* V6.7: header wordmark unified with the rest of the site */
header b{font-size:24px;font-weight:800;color:#111}
@media(max-width:760px){header b{font-size:24px}}
@media(max-width:500px){header b{font-size:24px}}

/* V6.8: remove labels rendered over service images */
.tile{font-size:0;text-shadow:none}

/* V6.9: unified project copy size, approved title logo */
.featured-projects p, .project-intro p, .project-card p {font-size:17px; line-height:1.5;}
@media(max-width:760px){.featured-projects p, .project-intro p, .project-card p {font-size:17px; line-height:1.5;}}

/* V6.10: remove duplicate section hec labels and shift desktop hero logo slightly right */
.section-mark{display:none!important}
@media(min-width:761px){.hero-logo-element{right:5.8vw!important}}


/* V6.11 Impressum */
.legal{border-top:1px solid #d6d1c8}
.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1100px}
.legal h3{font-size:15px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.04em}
.legal p{font-size:15px;line-height:1.55;margin:0 0 26px}
.legal a{text-underline-offset:3px}
.legal-note{font-size:13px!important;color:#555}
footer{padding:22px 7vw 30px;display:flex;justify-content:space-between;gap:24px;border-top:1px solid #ddd;font-size:13px}
footer a{color:inherit}
@media(max-width:760px){.legal-grid{grid-template-columns:1fr;gap:18px}.legal p{font-size:16px}footer{flex-direction:column}}

/* V6.12: improve hero crop, anchor offsets, and vertical spacing */
.hero > img:not(.hero-logo-element){object-position:center 18%}
#beratung,#projekte,#ueber,#kontakt,#impressum{scroll-margin-top:88px}
.about img{align-self:start;margin-top:16px}
.contact-details{margin-top:24px}
.legal-grid{margin-top:28px}
@media(max-width:760px){
  .hero > img:not(.hero-logo-element){object-position:center 16%}
  .about img{margin-top:16px}
}

/* V6.12: align the visible title photo edge with the hero text */
.hero > img:not(.hero-logo-element){width:calc(100% + 5.1vw);margin-left:-5.1vw}

/* V6.14: give project photos more room and keep the rotor in frame */
.featured-projects article>img{height:300px}
.featured-projects article:first-child>img{object-position:center 20%}

/* V6.15: move the mobile hero logo beside the subtitle */
@media(max-width:500px){
  .hero-logo-element{top:175px!important;right:7vw!important;width:100px!important}
}

/* V6.17: browser-stable hero logo. Keep approved mobile layout. */
@media (min-width:761px){
  .hero-logo-element{
    top:4px!important;
    right:5.8vw!important;
    width:clamp(170px,18vw,290px)!important;
    height:auto!important;
    object-fit:contain!important;
    background:transparent!important;
  }
}
@media (max-width:500px){
  .hero-logo-element{
    top:175px!important;
    right:7vw!important;
    width:100px!important;
    height:auto!important;
  }
}