
:root{--y:#ffc400;--ink:#111;--dark:#121212;--grey:#f3f3f1;--line:#deded9;--muted:#646464}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.55;background:#fff}
a{text-decoration:none;color:inherit}.wrap{width:min(1180px,calc(100% - 42px));margin:auto}
header{background:#0b0b0b;border-bottom:1px solid #222;position:sticky;top:0;z-index:30}.nav{height:96px;display:flex;align-items:center}.brand{display:flex;align-items:center}.logo{width:285px;height:76px;object-fit:contain;object-position:left center}
nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600;color:#fff}nav a:hover{opacity:.6}.nav-cta,.btn{background:var(--y);padding:14px 20px;font-weight:800;color:#111}
.hero{background:var(--dark);color:#fff}.hero-grid{display:grid;grid-template-columns:45% 55%;min-height:405px}.hero-copy{padding:55px max(26px,calc((100vw - 1180px)/2));padding-right:45px;display:flex;flex-direction:column;justify-content:center}.hero-photo{background:url('assets/hero-elektro.jpg') center/cover no-repeat}
.kicker{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:800}.kicker:before{content:"";display:inline-block;width:32px;height:3px;background:var(--y);margin:0 13px 3px 0}
h1{font-size:55px;line-height:1.02;letter-spacing:-1.7px;margin:16px 0 16px}.hero p{font-size:18px;color:#d6d6d6;max-width:520px;margin:0 0 28px}.dot{color:var(--y)}
section{padding:56px 0}.title{font-size:38px;line-height:1.1;margin:13px 0 12px}.intro{font-size:17px;color:var(--muted);max-width:850px;margin:0}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}.service{background:var(--grey);border-bottom:4px solid #171717}.service img{width:100%;height:205px;display:block;object-fit:cover}.service div{padding:18px 19px 20px}.service h3{font-size:21px;margin:0 0 7px}.service p{margin:0;color:#5e5e5e}
.strip{background:var(--y);padding:24px 0}.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.strip strong{display:block;font-size:17px}.strip span{font-size:13px}
.about{background:#161616;color:#fff;padding:58px 0}.about-grid{display:grid;grid-template-columns:360px 1fr;gap:58px;align-items:center}.portrait{width:360px;height:330px;object-fit:cover;object-position:47% 44%;display:block}.about .title{font-size:39px}.about p{color:#d2d2d2;max-width:650px}.outline{display:inline-block;border:1px solid #ddd;padding:13px 18px;font-weight:700;margin-top:8px}
.area{background:var(--y)}.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px}.towns{display:grid;grid-template-columns:1fr 1fr;gap:10px 25px;margin-top:22px}.towns span{border-bottom:1px solid var(--line);padding:8px 0}
.contact{background:var(--grey)}.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px}.contact-box{background:#fff;padding:28px;border-top:5px solid var(--y)}.contact-row{margin-bottom:19px}.contact-row b{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#777}.contact-row a{font-size:18px;font-weight:700}.note{font-size:13px;color:#666;border-left:3px solid var(--y);padding-left:13px;margin-top:22px}
footer{background:#090909;color:#bbb;padding:32px 0}.footer{display:flex;align-items:center;gap:25px;font-size:13px}.footer .logo{width:190px;height:62px}.footer-links{margin-left:auto;display:flex;gap:20px}
@media(max-width:800px){.wrap{width:min(100% - 30px,1180px)}header nav a:not(.nav-cta){display:none}.logo{width:210px;height:58px}.nav{height:74px}.hero-grid{grid-template-columns:1fr}.hero-photo{height:280px;order:-1}.hero-copy{padding:50px 22px}h1{font-size:43px}.services,.strip-grid,.area-grid,.contact-grid{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr;gap:30px}.portrait{width:100%;height:310px;object-position:50% 42%}.about{padding:45px 0}.title,.about .title{font-size:32px}.footer{align-items:flex-start;flex-direction:column}.footer-links{margin:0;flex-wrap:wrap}}

@media(max-width:1050px) and (min-width:801px){.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.services{grid-template-columns:1fr}}

.area .kicker:before{background:#111}
.area .intro{color:#282828}
.area .towns span{border-bottom:1px solid rgba(0,0,0,.28)}
.service img{object-position:center center}

/* V10 – Leistungsbereich kompakter und breiter */
#leistungen .wrap{
    width:min(1320px,calc(100% - 42px));
}
#leistungen .services{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
#leistungen .service img{
    width:100%;
    height:220px;
    object-fit:cover;
    object-position:center center;
    display:block;
}
@media(max-width:1050px) and (min-width:801px){
    #leistungen .services{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:800px){
    #leistungen .wrap{width:min(100% - 30px,1320px);}
    #leistungen .services{grid-template-columns:1fr;}
}

/* V11: saubere, einheitliche Bildausschnitte */
#leistungen .service img{
  width:100%;
  height:205px;
  object-fit:cover;
  display:block;
}
#leistungen .service:nth-child(1) img{object-position:center 42%;}
#leistungen .service:nth-child(2) img{object-position:center 48%;}
#leistungen .service:nth-child(3) img{object-position:center 38%;}
#leistungen .service:nth-child(4) img{object-position:center 48%;}

/* Kontaktformular */
.contact-form{
  background:#fff;
  border-top:5px solid var(--y);
  padding:28px;
}
.contact-form label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  margin:15px 0 6px;
  color:#666;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #cfcfc9;
  background:#fafafa;
  padding:13px 14px;
  font:inherit;
  color:#111;
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:#111;}
.contact-form textarea{min-height:135px;resize:vertical;}
.form-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:16px 0;
  font-size:13px;
  color:#555;
}
.form-check input{width:auto;margin-top:3px;}
.form-check a{text-decoration:underline;}
.form-submit{
  border:0;
  cursor:pointer;
  background:var(--y);
  padding:14px 21px;
  font-weight:800;
  font-size:15px;
}
.form-hint{font-size:12px;color:#777;margin-top:12px;}
@media(max-width:800px){.contact-form{padding:22px;}}
