/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kontaktformular{max-width:1024px; width:100%; margin:0 auto; padding:0 15px; box-sizing:border-box; }

@media (max-width: 700px) {
  .kontaktformular label,.kontaktformular .visCSSinput{width:100%}
  .kontaktformular p{margin-left:0}
  .kontaktformular .visCSSright20 {margin-right: 10px}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:#000}
.footer > div{display:flex; flex-wrap:wrap; width:100%; max-width:1024px; margin:0 auto; padding:30px 15px; box-sizing:border-box}
.footer .content{width:35%; margin:0 0 30px 0}
.footer .content:nth-child(2){display:flex; gap:15px; width:65%; justify-content:flex-end; flex-wrap:wrap}
.footer p, .footer a, .footer a:visited{color:#DDD; margin:0}
.footer img{width:60px; height:auto; filter:brightness(0) invert(0.9); margin:0 0 10px 0}
.footer .content:nth-child(2) p{text-align:center; margin:0 7.5px}
.footer a:hover{color:var(--red)}
.footer a:hover img{filter:brightness(1) invert(0);}
.footer .content:nth-child(3){margin:0}
.footer .content:nth-child(3) p{font-size:16px}

@media (max-width: 700px) {
  .footer .content,.footer .content:nth-child(2){width:100%; justify-content:center}
}

/* HEADER LOGO + CONTACT_BTNS + TERMIN BUCHEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width:100%; height:90px; background:#FFF;}
header p{line-height:0; margin:0}
header .logo{position:absolute; top:47px; left:30px; transform:translateY(-50%); width:480px; height:auto;}
header .logo a img{width:100%; height:auto}
header .logo a:hover img{filter:brightness(0); }
header .logozusatz{position:absolute; top:110px; left:30px}
header .logozusatz img{width:100px; height:auto;}
header .contact_btns{position:fixed; top:45px; right:80px; transform:translateY(-50%); width:190px; z-index:3}
header .contact_btns > div{width:100%; display:flex; justify-content:space-between}
header .contact_btns > div a{position:relative; display:flex; width:40px; height:40px; background:var(--red); justify-content:center; align-items:center; border-radius:50%; text-align:center}
header .contact_btns > div a:hover{background:#000}
header .contact_btns > div a img{width:24px; height:auto; filter:brightness(0) invert(1)}
header .contact_btns > div p:first-child a{background:#000}
header .contact_btns > div p:first-child a:hover{background:var(--red)}

header .contact_btns > div p a:hover:after{position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:14px; line-height:14px}
header .contact_btns > div p:nth-child(1) a:hover:after{content:"Webshop"; width:80px}
header .contact_btns > div p:nth-child(3) a:hover:after{content:"+41 (0)62 858 20 00"; width:180px}
header .contact_btns > div p:nth-child(2) a:hover:after{content:"info@nussbaumer-ag.ch"; width:200px}
header .contact_btns > div p:nth-child(4) a:hover:after{content:"Standorte"; width:80px}

header .termin_buchen{position:absolute; z-index:4; top:45px; left:calc(50% + 120px); transform:translate(-50%); }
header .termin_buchen p{font-size:16px}
header .termin_buchen a{text-align:center; padding:10px; box-sizing:border-box; height:40px; border-radius:9px; background:var(--red); color:#FFF}
header .termin_buchen a:hover{background:#000}

@media (max-width: 1000px) {
  header{height:130px}
  header .logo{top:100px; left:0; width:100%; padding:0 15px; box-sizing:border-box}
  header .logozusatz{top:150px}
  header .contact_btns{right:auto; left:15px; top:35px;}
  header .termin_buchen{top:37px; left:auto; right:70px; transform:none}
}

@media (max-width: 500px) {
  header .termin_buchen{top:170px; right:50%; transform:translateX(50%)}
  header .logozusatz{left:10px}
}

@media (max-width: 400px) {
	header .logozusatz{display:none}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{width:100%; height:160px; border-top:80px solid #fff; border-bottom:120px solid #fff; background:var(--grey)}
.contact > div{max-width:1024px; width:100%; height:100%; margin:0 auto; display:flex; flex-wrap:wrap}
.contact > div .content{width:calc(100% - 320px); height:100%; padding:15px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center}
.contact > div .content h3{width:100%; text-align:center; line-height:30px}
.contact > div .content p{margin:0 0 40px 0}
.contact > div .content p a{height:30px; display:flex; align-items:center; flex-direction:column; margin:0 30px 0 0; }
.contact > div .content p a img{margin:0 0 5px 0; filter:brightness(0)}
.contact > div .content p a:hover img{filter:brightness(1)}
.contact > div .image{width:320px; height:100%; position:relative}
.contact > div .image p{position:absolute; z-index:2; right:0; top:50%; transform:translateY(-50%); width:320px; height:320px; border-radius:50%; background:var(--grey); display:flex; justify-content:center; align-items:center}
.contact > div .image p span{width:80%; height:80%; border-radius:50%; overflow:hidden}
.contact > div .image p img{width:100%; height:auto}
.contact > div .image:after{content:"";position:absolute; left:50%; top:0; width:100vh; height:100%; background:#FFF}

@media (max-width: 1000px) {
  .contact{height:220px}
  .contact > div .image p{right:15px}
  .contact > div .content{flex-direction:column; align-items:flex-start}  
  .contact > div .content h3{font-size:20px; margin:0 0 20px 0; text-align:left}
  .contact > div .content p{margin:0 0 10px 0}
  .contact > div .content p a{flex-direction:row; }
}
@media (max-width: 700px) {
  .contact{height:auto; border:none}
  .contact > div,
  .contact > div .content,
  .contact > div .image{width:100%; height:auto}
  .contact > div .content{display:block;}
  .contact > div .content p a{justify-content:center}
  .contact > div .image p{position:relative; top:auto;transform:none; width:100%; height:auto; right:auto; border-radius:0;}
  .contact > div .image p span{}
  .contact > div .image:after{display:none}
  .contact > div .content h3,.contact > div .content p{text-align:center; margin:0 0 20px 0}
}



/* WERDE ELEKTRIKER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.werde_elektriker{margin-top:50px}
.werde_elektriker > div{display:flex; flex-wrap:wrap}
.werde_elektriker > div > div{width:50%; padding:7.5px 15px 7.5px 0; box-sizing:border-box}
.werde_elektriker > div div:last-child{width:199%; float:none; clear:both}
.werde_elektriker iframe{width:100%; height:270px; margin:20px 0 0 0}

@media (max-width: 700px) {
  .werde_elektriker > div > div{width:100%}
}

/* KOMPETENZEN Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kom_content > div{display:flex; margin:40px 0}

.kom_content > div > .image{width:320px; position:relative}
.kom_content > div > .image p{z-index:2; position:absolute; top:0; left:0; color:rgba(0,0,0,0); width:320px; height:320px; border-radius:50%; border:15px solid var(--grey); box-sizing:border-box}
#kom_beratung p{background: url("../../../images/kompetenzen/beratung-480x320.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
#kom_installationen p{background: url("../../../images/kompetenzen/elektroinstallationen-480x320.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
#kom_beleuchtung p{background: url("../../../images/kompetenzen/beleuchtung-480x320.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
#kom_kommunikation p{background: url("../../../images/kompetenzen/kommunikation-480x320.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
#kom_photovoltaik p{background: url("../../../images/kompetenzen/photovoltaik-480x320.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}

.kom_content > div > .text{width:calc(100% - 320px); padding:40px 15px 0 15px; box-sizing:border-box;}
.kom_content > div > .text h2{position:relative; height:100px; margin-bottom:15px}
.kom_content > div > .text h2:after{position:absolute; content:""; width:calc(100% + 50px); height:100px; background:var(--grey); top:0; left:-50px; z-index:1}
.kom_content > div > .text h2 span{z-index:2; display:block; position:absolute; top:25px; left:0}

.kom_content > div > .text > .subnav{display:flex; justify-content:flex-end}
.kom_content > div > .text > .subnav p a{position:relative; display:block; width:50px; height:50px; margin:0 7.5px; border-radius:50%; color:rgba(0,0,0,0);}
.kom_content > div > .text > .subnav p:nth-child(1) a{background: url("../../../images/kompetenzen/beratung-480x320.jpg") center center}
.kom_content > div > .text > .subnav p:nth-child(2) a{background: url("../../../images/kompetenzen/elektroinstallationen-480x320.jpg") center center}
.kom_content > div > .text > .subnav p:nth-child(3) a{background: url("../../../images/kompetenzen/beleuchtung-480x320.jpg") center center}
.kom_content > div > .text > .subnav p:nth-child(4) a{background: url("../../../images/kompetenzen/kommunikation-480x320.jpg") center center}
.kom_content > div > .text > .subnav p:nth-child(5) a{background: url("../../../images/kompetenzen/photovoltaik-480x320.jpg") center center}
.kom_content > div > .text > .subnav p:nth-child(1) a,
.kom_content > div > .text > .subnav p:nth-child(2) a,
.kom_content > div > .text > .subnav p:nth-child(3) a,
.kom_content > div > .text > .subnav p:nth-child(4) a,
.kom_content > div > .text > .subnav p:nth-child(5) a{-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
.kom_content > div > .text > .subnav p a:hover:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:rgba(0,0,0,0.5)}
.kom_content > div > .text > .subnav p a:hover:before{position:absolute; top:-30px; left:50%;  transform:translateX(-50%); color:#000; font-size:16px; text-align:center; width:160px}
.kom_content > div > .text > .subnav p:nth-child(1) a:hover:before{content:"Planung & Beratung"; }
.kom_content > div > .text > .subnav p:nth-child(2) a:hover:before{content:"Elektroinstallationen"}
.kom_content > div > .text > .subnav p:nth-child(3) a:hover:before{content:"Beleuchtung"}
.kom_content > div > .text > .subnav p:nth-child(4) a:hover:before{content:"Kommunikation"}
.kom_content > div > .text > .subnav p:nth-child(5) a:hover:before{content:"Photovoltaik"}

@media (max-width: 1000px) {
  .kom_content > div > .text h2{height:80px}
  .kom_content > div > .text h2:after{height:80px}
  .kom_content > div > .text h2{font-size:26px; line-height:32px} 
}
@media (max-width: 700px) {
  .kom_content > div{flex-wrap:wrap}
  .kom_content > div > .image{width:100%}
  .kom_content > div > .image p{position:relative; top:auto; left:auto; margin:0 auto 20px auto}
  .kom_content > div > .text{width:100%; display:flex; flex-direction: column; padding:0 15px}
  .kom_content > div > .text > h2{order:0}
  .kom_content > div > .text h2:after{width:calc(100% + 60px); left:-30px;}
  .kom_content > div > .text > p{order:1}
  .kom_content > div > .text > .subnav{order:2}
  
}

/* KOMPETENZEN Overview
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kom_overview{position:relative}
.kom_overview:after{content:""; position:absolute; top:50px; left:50%; transform:translateX(-50%); width:100vw; height:60px; background:var(--grey)}
.kom_overview > div{width:100%; display:flex; margin:80px 0; flex-wrap:wrap; justify-content:center}
.kom_overview > div p{width:20%; text-align:center; line-height:24px; z-index:2}
.kom_overview > div p span{position:relative; color:rgba(0,0,0,0); display:block; margin:0 auto 10px auto; width:160px; height:160px; border-radius:50%;}
.kom_overview > div p:nth-child(1) span{background: url("../../../images/kompetenzen/beratung-480x320.jpg") center center; }
.kom_overview > div p:nth-child(2) span{background: url("../../../images/kompetenzen/elektroinstallationen-480x320.jpg") center center; }
.kom_overview > div p:nth-child(3) span{background: url("../../../images/kompetenzen/beleuchtung-480x320.jpg") center center; }
.kom_overview > div p:nth-child(4) span{background: url("../../../images/kompetenzen/kommunikation-480x320.jpg") center center; }
.kom_overview > div p:nth-child(5) span{background: url("../../../images/kompetenzen/photovoltaik-480x320.jpg") center center; }
.kom_overview > div p:nth-child(1) span,
.kom_overview > div p:nth-child(2) span,
.kom_overview > div p:nth-child(3) span,
.kom_overview > div p:nth-child(4) span,
.kom_overview > div p:nth-child(5) span{-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat}
.kom_overview > div p span:hover:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:rgba(0,0,0,0.5)}

@media (max-width: 1000px) {
  .kom_overview:after{top:40px}
  .kom_overview > div p span{width:130px; height:130px}
}
@media (max-width: 700px) {
  .kom_overview:after{display:none}
  .kom_overview > div p{width:50%;}
}
  
/* HAUSHALTSGERÄTE SERVICE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.geraete_service{margin:40px 0 80px 0}
.geraete_service > div{display:flex; flex-wrap:wrap; gap:15px}
.geraete_service > div > div{width:calc(33% - 15px)}
.geraete_service p{text-align:center}
.geraete_service h3{height:100px; position:relative;}
.geraete_service h3:after{position:absolute; content:""; width:100vw; height:80px; left:50%; top:0; transform:translate(-50%); background:var(--grey)}
.geraete_service h3 span{position:absolute; z-index:2; top:20px; left:0; width:100%; text-align:center}
.geraete_service img{width:140px; height:auto;}

@media (max-width: 1000px) {
  .geraete_service > div{justify-content:center}
  .geraete_service > div > div{width:calc(50% - 10px)}
  .geraete_service h3{height:auto;text-align:center}
  .geraete_service h3 span{position:relative; z-index:2; top:auto; left:auto; width:100%; text-align:center}
  .geraete_service h3:after{display:none}
  .geraete_service p:first-child(margin:0)
}
@media (max-width: 500px) {
  .geraete_service > div > div{width:100%}
 }

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{margin:80px 0}
.partner > div{width:100%; max-width:1024px; margin:auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:center}
.partner > div h2{width:100%}
.partner > div p{margin:7.5px}
.partner > div p a{width:180px; height:180px; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--grey); overflow:hidden;}
.partner > div p a img{width:80%; height:aut%; filter:brightness(0)}
.partner > div p a .small{width:50%}
.partner > div p a:hover img{filter:brightness(1)}

@media (max-width: 1000px) {
  .partner > div p a{width:120px; height:120px}
}
@media (max-width: 500px) {
  .partner > div p a{width:100px; height:100px}
}

/* HISTORY
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.history{margin:40px 0}
.history > div{width:100%; max-width:1024px; margin:auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:15px}
.history > div h2{width:100%}
.history > div p{width:calc(33.33% - 15px); padding:25px 15px; box-sizing:border-box; background:var(--grey); margin:0; hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
.history > div strong{display:block; width:100%; text-align:center; font-size:40px; line-height:50px; margin:0 0 15px 0}

@media (max-width: 1000px) {
  .history > div p{width:calc(50% - 15px)}
}
@media (max-width: 500px) {
.history > div p{width:100%}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{margin:40px 0}
.team > div, .team h3{width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:30px auto}
.team > div{display:flex; flex-wrap:wrap; gap:30px;}
.team > div > div{padding:15px 15px 30px 15px; box-sizing:border-box; background:var(--grey); width:calc(33.33% - 20px)}
.team figure{margin:0 0 15px 0; background:#d0d0d0}
.team img{width:100%; height:auto}
.team p{margin:0; font-size:16px; line-height:22px}
.team p:nth-child(2){font-size:20px; line-height:30px; margin-bottom:10px}
.team p:nth-child(3){margin-bottom:10px}

@media (max-width: 1000px) {
  .team > div > div{width:calc(50% - 15px)}
}
@media (max-width: 500px) {
  .team > div > div{width:100%}
}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address{width:100%; position:relative; padding:0 0 60px 0}
.address > div{width:100%; max-width:1024px; margin:0 auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:15px}
/*.address > div .content{width:calc(50% - 7.5px);}*/
.address > div .content{width:100%;}
.address > div h2{margin:0 0 450px 0}
/*.address > div iframe{position:absolute; top:70px; left:0; width:calc(50% - 7.5px); height:400px}*/
.address > div iframe{position:absolute; top:70px; left:0; width:100%; height:400px}
/*.address > div .content:nth-child(2) iframe{left:calc(50% + 7.5px)}*/
.address > div address{font-style:normal;}
.address > div p{margin:0}
.address > div p a{display:flex; height:30px; margin:15px 0 0 0}
.address > div p a img{width:30px; height:auto; margin:0 15px 0 0; filter:brightness(0)}
.address > div p a:hover img{filter:brightness(1)}
.address > div .timetable{display:flex; flex-wrap:wrap; background:var(--grey); width:100%; margin:40px 0 0 0}
.address > div .timetable > div{width:50%;}
.address > div .timetable h2{margin:0 0 20px 0}
.address > div .timetable .image{background: url("../../../images/global/verkaufsladen-720x480.jpg") center center; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.address > div .timetable .text{padding:15px; box-sizing:border-box}
.address > div .timetable .text p:nth-child(3),.address > div .timetable .text p:nth-child(5){margin:0 0 20px 0}

@media (max-width: 1000px) {
  .address > div .content{width:100%; margin:0 0 40px 0}
  .address > div h2{margin:0 0 20px 0}
  .address > div iframe{position:relative; top:auto; left:auto; width:100%; margin:0 0 20px 0}
  .address > div .content:nth-child(2) iframe{left:auto}
  .address > div .timetable > div{width:100%}
  .address > div .timetable .image{height:320px}
}

/* WEBSHOP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.webshop{background: url("../../../images/global/webshop-1920x1280.jpg") center center; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; 
  height: 320px; width:100%; border-top:40px solid #fff; border-bottom:80px solid #fff; position:relative}
.webshop:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4)}
.webshop > div{position:absolute; top:0; left:50%; transform:translateX(-50%); max-width:1024px; width:100%; height:100%; padding:15px; box-sizing:border-box; z-index:2}
.webshop > div p{font-size:30px; line-height:40px; color:#FFF; font-family:ubuntubold}
.webshop > div a{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:80px; color:#FFF}
.webshop > div a span{height:80px; width:80px; border-radius:50%; background:#FFF; margin:0 15px 0 0; padding:15px 18px 15px 12px; box-sizing:border-box}
.webshop > div a span img{width:50px; height:50px; filter:brightness(0)}
.webshop > div a:hover{color:var(--red)}
.webshop > div a:hover span{background:var(--red);}
.webshop > div a:hover span img{filter:brightness(0) invert(1)}

@media (max-width: 700px) {
  .webshop > div a{font-size:40px}
}
@media (max-width: 380px) {
  .webshop > div p{font-size:20px; line-height:30px}
}

/* HOME-TEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_teaser > div{display:flex; justify-content:space-around; width:100%; flex-wrap:wrap; margin:60px 0 0 0}
.home_teaser p{text-align:center}
.home_teaser p a span{width:200px; height:200px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--grey); margin:0 0 10px 0}
.home_teaser p a span img{width:50%; height:auto; filter:brightness(0)}
.home_teaser p a:hover span img{filter:brightness(1)}

@media (max-width: 700px) {
  .home_teaser p a span{width:130px; height:130px;}
}

/* BG-IMAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-home:after{background: url("../../../images/background/home-1920x1280.jpg") center center}
.bg-kompetenzen:after{background: url("../../../images/background/kompetenzen-1920x1280.jpg") center center}
.bg-referenzen:after{background: url("../../../images/background/referenzen-1920x1280.jpg") center center}
.bg-haushaltsgeraete:after{background: url("../../../images/background/haushaltsgeraete-1920x1280.jpg") center center}
.bg-unternehmen:after{background: url("../../../images/background/unternehmen-1920x1280.jpg") center center}
.bg-team:after{background: url("../../../images/background/team-1920x1280.jpg") center center}
.bg-stellen:after{background: url("../../../images/background/stellen-1920x1280.jpg") center center}
.bg-lehrstelle:after{background: url("../../../images/background/lehrstelle-1920x1280.jpg") center center}
.bg-agbs:after{background: url("../../../images/background/agbs-1920x1280.jpg") center center}
.bg-impressum:after{background: url("../../../images/background/impressum-1920x1280.jpg") center center}
.bg-datenschutz:after{background: url("../../../images/background/datenschutz-1920x1280.jpg") center center}
.bg-termin_buchen:after{background: url("../../../images/background/termin-buchen-1920x1280.jpg") center center}

.bg-image{width:100%; height:calc(100vh - 90px); position:relative}
.bg-image:before{position:absolute; content:""; top: 0; left: 0; width:100%; height: 100vh; z-index:-1; background: rgba(0,0,0,0.25);}
.bg-image:after{height:100%; position:fixed; content:""; top: 0; left: 0; right: 0; z-index: -2; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}

.bg-half{height:calc(50vh - 90px)}

@media (max-width: 800px) {
  .bg-home:after{background: url("../../../images/background/home-1920x1280.jpg") center right}
}
@media (max-width: 700px) {
  .bg-image{height:calc(100vh - 130px)}
  .bg-home:after{background: url("../../../images/background/home-1920x1280.jpg"); background-position: 92% 20%}
}

/* NEWS + JOBS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news{background:var(--grey); padding:20px 0}
.jobs{background:#FFF}
.news > div{width:100%; max-width:1024px; margin:0 auto; padding:0 15px; box-sizing:border-box}
.jobs > div{padding:0}
.news > div > div{position:relative; margin:40px 0; background:var(--red); padding:20px 0}
.news p,.news h2{text-align:center;margin:0; color:#FFF}
.news .readmore{position:absolute; top:0; left:0; width:100%; height:100%}
.news .readmore a{color:rgba(0,0,0,0); display:block; width:100%; height:100%}
.news > div > div:hover{background:#FFF}
.jobs > div > div:hover{background:var(--grey)}
.news > div > div:hover p,.news > div > div:hover h2{color:var(--red)}

.news_site article{padding: 0 15px 40px 15px}
.item-pagenews_site{display:flex; flex-wrap:wrap;}
.item-pagenews_site > div{width:100%}
.item-pagenews_site figure{margin:0 0 20px 0; width:100%; height:400px; overflow:hidden; position:relative; border-radius:0 0 15px 15px}
.item-pagenews_site figure img{width:100%; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.item-pagenews_site .page-header{order:2}
.item-pagenews_site .item-image{order:1}
.item-pagenews_site .com-content-article__body{order:3}

@media (max-width: 700px) {
  .news > div > div{padding:15px}
  .news h2{margin:0 0 10px 0}
}

/* BG-HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-home{}
.bg-home > div{position:absolute; bottom:10%; left:50%; transform:translateX(-50%); max-width:1024px; width:100%; padding:0 30px; box-sizing:border-box}
.bg-home > div p{font-size:40px; line-height:50px; font-family:ubuntubold}
.bg-home > div p span{font-size:80px; line-height:100px; margin:0 0 40px 0; display:block; position:relative;}
.bg-home > div p span:after{content:""; width:200px; height:5px; background:#FFF; position:absolute; left:-100px; bottom:-50px}
.bg-home > div p a, .bg-home > div p a:visited{color:#FFF}
.bg-home > div p a:hover{color:var(--red)}

@media (max-width: 700px) {
  .bg-home > div p{font-size:20px; line-height:30px; font-family:ubuntubold}
  .bg-home > div p span{font-size:40px; line-height:50px; margin:0 0 20px 0}
  .bg-home > div p span:after{bottom:-30px}
}

@media (max-width: 380px) {
  .bg-home > div p span{font-size:30px; line-height:40px; margin:0 0 20px 0}
  .bg-home > div{padding:0 15px;}
}

/* BG-CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-content{  }
.bg-content p{position:absolute; text-align:center; top:50%; left:50%; transform:translateX(-50%); font-size:80px; line-height:100px; font-family:ubuntubold}
.bg-content p img{width:100px; height:auto; filter:brightness(0) invert(1); margin:40px 0 0 0}
.bg-content p a{color:#FFF}
.bg-content p a:hover{color:var(--red)}
.bg-content p a:hover img{filter:brightness(1) invert(0); margin:60px 0 0 0}

@media (max-width: 700px) {
  .bg-content p{font-size:40px; line-height:50px;}
}

/* HAUSHALTSGERÄTE ISSUU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.issuu{margin:80px 0}
.issuu > div > div{position:relative;padding-top:max(60%,326px);height:0;width:100%; margin:0 0 30px 0}
.issuu iframe{position:absolute;border:none;width:100%;height:100%;left:0;right:0;top:0;bottom:0;}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{margin:80px 0}
.referenzen > div{display:flex; flex-wrap:wrap; gap:30px}
.referenzen > div > div{width:calc(50% - 15px); background:var(--grey); padding:0 0 15px 0}
.referenzen figure{margin:0 0 15px 0}
.referenzen figure img{width:100%; height:auto}
.referenzen h2,.referenzen p{padding:0 15px}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e_tec > div{width:100%; max-width:1024px; margin:0 auto; padding:0 0 60px 0}
.e_tec > div h2{padding:0 15px; box-sizing:border-box}
.e_tec > div iframe{width:100%; height:760px; border:none}
@media (max-width: 380px) {
  .e_tec > div iframe{height:740px;}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--red: #e1001a;--grey: #ededed}
.bg-color{background:#FFF}

@font-face {font-family: 'ubuntubold'; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'), url('../fonts/Ubuntu-Bold.woff') format('woff'); font-weight: bold; font-style: bold;}
@font-face {font-family: 'ubunturegular'; src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'), url('../fonts/Ubuntu-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}


html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-weight: 300; font-family: ubunturegular, sans-serif; color: #000; overflow-x:hidden}
a, a:visited{color: #000;text-decoration: none}
a:hover{color:var(--red)}
strong {font-family: ubuntubold;}
p {margin:0 0 20px 0}
article{padding:80px 15px 40px 15px; margin:0 auto; width:100%; max-width:1024px; box-sizing:border-box}

.transition{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}

.highlighted{font-style: normal; padding:25px 35px; background:var(--grey); border-radius:9px; display:block; text-align:center}


h1,h2,h3{font-family: ubuntubold; text-align:left;color:#000;margin:0}

h1{font-size:50px; line-height:60px; margin:0 0 20px 0}
h2{font-size:40px; line-height:50px; margin: 0 0 20px 0}
h3{font-size:30px; line-height:40px; margin: 0 0 10px 0}

@media (max-width: 700px) {
  h1{font-size:40px; line-height:50px}
  h2{font-size:26px; line-height:32px}
  h3{font-size:20px; line-height:30px}
}
@media (max-width: 460px) {
  h1,h2,h3{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:20px; right:20px; z-index:10}
nav > ul {position:fixed; top:0; right:0; width:320px;}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; }
nav > ul > li:first-child{padding-top:80px}
nav > ul > li{width:100%; padding:0; margin:20px 0}
nav > ul > li > a{font-weight: 700; text-transform:uppercase}
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:var(--red)}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}

/* Joomla 6 */
nav .mod-menu__toggle-sub{display:none}
nav .mod-menu__sub{display:block}

/* menu */
nav .mod-menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 22.5px 9px; position: relative; border-radius:9px; z-index:2; background:#FFF}
nav .menu-icon:hover{background:var(--red)}
nav .menu-icon .navicon {  background: #000;  display: block;  height: 5px; width: 30px;  position: relative;  transition: background .2s ease-out;  }
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {background: #000;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
nav .menu-icon .navicon:before {top: 12px;}
nav .menu-icon .navicon:after {top: -12px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .mod-menu {height: 100%; background: rgba(0,0,0,0.85)}
nav .menu-btn:checked ~ .menu-icon {background:var(--vogt)}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #FFF; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #FFF; transform: rotate(45deg);}
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {  top: 0;}

@media (max-width: 1000px) {
  nav{position:fixed; top:12px; right:6px}
  nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 700px) {
  nav > ul {width:100%;}
  nav > ul > li:first-child{padding-top:20px}
}
@media (max-width: 390px) {
  nav > ul > li{margin:10px 0; font-size:16px; line-height:22px}
}