:root {--red:rgb(226, 31, 32); --gray: rgb(102,111,120); --lightgray:rgb(224,226,228); --page:1024px}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:absolute; top:0; left:0; height:180px; width:100%; background:#FFF; z-index:3; overflow:hidden}

header .logo{position:absolute; top:10px; left:0;}
header .logo > div{position:relative}
header .logo > div:after{content:""; position:absolute; top:77px; left:126px; width:100vw; height:5px; background:var(--red)}
header .logo img{width:auto; height:160px;}
header .logo p{margin:0}

header .btns{position:absolute; top:40px; right:30px;}
header .btns > div{display:flex;}
header .btns p{margin:0 15px}
header .btns span{display:none; position:absolute; top:50%; left:-15px; text-align:right; transform:translate(-100%, -50%)}
header .btns img{width:30px; height:auto; filter:brightness(0)}
header .btns a:hover img{filter:none}
header .btns a:hover span{display:block}

@media (max-width: 1024px) {
	header{height:150px;}
	header .logo img{height:128px;}
	header .logo > div:after{height:4px; top:62px;}
	header .btns{right:0; top:90px}
	header .btns a:hover span{display:none}
}
@media (max-width: 700px) {
	header{position:relative}
}
@media (max-width: 500px) {
	header{height:180px;}
	header .btns{right:50%; transform:translateX(50%); top:135px}
}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address {max-width:1024px; margin:0 auto 20px auto; padding:0 15px; box-sizing:border-box; position:relative}
.map{height:500px; position:relative; margin:0 0 20px 0;}
.map iframe{width:400vw; height:500px; border:0; position:absolute; top:0; left:50%; transform:translateX(-50%)}
address{font-style:normal;}
address a{display:flex; align-items:center;}
address img{width:30px; height:30px; margin:0 10px 0 0; filter:brightness(0)}

.pikett{position:absolute; bottom:0; left:50%; background:var(--red); border-radius:15px; padding:15px 15px 0 15px; color:#FFF}
.pikett p,.pikett h3{margin:0 0 30px 0}
.pikett p:first-child{height:90px; font-family:market; font-size:40px; line-height:50px}
.pikett span{transform:rotate(-12deg); position:absolute; left:15px; top:25px}
.pikett span:last-child{left:70px; top:50px}
.pikett a,.pikett p:nth-child(3){display:flex; align-items:center; color:#FFF}
.pikett a:hover{color:#000}
.pikett a:hover img{filter:brightness(0)}
.pikett img{width:30px; height:30px; margin:0 10px 0 0; filter:brightness(0) invert(1)}
.pikett p:last-child{position:absolute; bottom:0; right:0; transform:translateX(100%)}
.pikett p:last-child img{width:auto; height:540px; filter:none}

@media (max-width: 1024px) {
	.map{overflow:hidden}
}
@media (max-width: 800px) {
	.pikett{right:0; left:auto;padding:30px 15px; border-radius:15px 0 0 15px}
	.pikett p:last-child img{display:none}
}
@media (max-width: 700px) {
	.pikett{border-radius:15px}
	.pikett span{transform:rotate(-12deg) translateX(-50%)}
	.pikett span:first-child{left:35%; top:20px}
	.pikett span:last-child{left:60%; top:40px}
	.pikett{position:relative; right:auto}
	.pikett h3{text-align:center}
	.pikett p,.pikett p:nth-child(3){display:flex; justify-content:center}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root{--news:480px}
.news{position:absolute; top:180px; left:0; z-index:1; background:var(--gray); color:#FFF; max-height:calc(100vh - 180px)}
.news > div{margin:0; padding:30px 15px 15px 15px; box-sizing:border-box; width:var(--news); list-style-type: none;}
.news > div > div{margin:0 0 30px 0}
.news .btn{display:inline-block; padding:10px 20px; border-radius:9px; border:solid 1px #FFF; color:#FFF}
.news .btn:hover{color:var(--red); background:#FFF}

@media (max-width: 800px) {
	:root{--news:320px}
	.news{top:150px}
}
@media (max-width: 700px) {
	:root{--news:100%}
	.news{position:relative; top:auto; left:auto;}
}


/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{width:100%; max-width:1024px; margin:100px auto 0 auto; }
.contact div{width:100%; height:330px; position:relative}
.contact div::after{content:""; width:100vw; height:150px; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); background:var(--gray)}
.contact p{position:absolute; z-index:2}
.contact p:nth-child(1){font-family:market; font-size:50px; line-height:60px; text-align:center; left:25%; top:0; transform:translateX(-50%) rotate(-12deg)}
.contact p:nth-child(1) span{display:inline-block;}
.contact p:nth-child(1) span:first-child{padding-right:100px}
.contact p:nth-child(1) span:last-child{padding-left:100px}
.contact p:nth-child(2){left:0; bottom:40px; display:flex; flex-wrap:wrap; gap:30px; justify-content:center; width:50%}
.contact p:nth-child(2) a{text-align:center; color:#FFF}
.contact p:nth-child(2) img{width:50px; height:auto; display:block; margin:0 auto 15px auto; filter: brightness(0) invert(1)}
.contact p:nth-child(3){left:50%; top:0; width:50%;}
.contact p:nth-child(3) img{width:100%; height:100%; object-fit:cover; border-radius:15px}
.contact p a:hover{color:var(--red)}
.contact p a:hover img{filter:none}

@media (max-width: 1024px) {
	.contact p:nth-child(3) img{border-radius:15px 0 0 15px}
}
@media (max-width: 800px) {
	.contact p:nth-child(1){font-size:40px; line-height:50px; top:20px}
	.contact p:nth-child(2){display:block;}
	.contact p:nth-child(2) p{margin:0}
	.contact p:nth-child(2) a{width:100%; text-align:left; display:flex; align-items:center; margin:15px 0}
	.contact p:nth-child(2) img{width:30px; display:inline-block; margin:0 15px}
}
@media (max-width: 700px) {
	.contact div{height:auto}
	.contact p{position:relative}
	.contact p:nth-child(1){top:-40px; left:50%}
	.contact p:nth-child(2),.contact p:nth-child(3){width:100%; left:auto}
	.contact p:nth-child(2){background:var(--gray); padding:15px 0; margin:0}
	.contact div::after{display:none}
	.contact p:nth-child(3){display:none}
}

/* HOME TEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home .teaser{width:100%; max-width:1024px; margin:60px auto 0 auto; }
.home .teaser > div{display:flex; gap:30px; flex-wrap:wrap; width:100%;}
.home .teaser .content{width:calc(33.333% - 20px); border-radius:15px; background:var(--gray); overflow:hidden;}
.home .teaser img{width:100%; height:auto}
.home .teaser p{padding:0 15px; color:#FFF}
.home .teaser p:first-child{padding:0}
.home .teaser p:last-child{text-align:center; margin:30px 0 40px 0}
.home .teaser a{display:inline-block; padding:10px 20px; border-radius:9px; border:solid 1px #FFF; color:#FFF}
.home .teaser a:hover{color:var(--red); background:#FFF}

@media (max-width: 1024px) {
	.home .teaser{padding:0 15px; box-sizing:border-box}
	.home .teaser > div{gap:15px}
	.home .teaser .content{width:calc(33.333% - 10px);}
}
@media (max-width: 700px) {
	.home .teaser > div{display:block}
	.home .teaser .content{width:100%; margin:0 0 15px 0}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{position:relative; width:100%}
.com-content-article{padding:calc(70vh + 70px) 0 0 0; margin:0 auto; width:100%; max-width:var(--page); box-sizing:border-box}
.home .com-content-article{padding:calc(100vh + 70px) 0 0 0}
.com-content-article__body{background:var(--lightgray); padding:30px; box-sizing:border-box; border-radius:15px; position:relative}
.main .com-content-article h1,.main .com-content-article h2, .main .com-content-article p{width:66%; padding:0 0 0 34%}

article .btn{display:inline-block; padding:10px 20px; border-radius:9px; border:solid 1px #FFF; color:#000; margin:20px 0 0 0; background:var(--gray); color:#FFF; text-align:center}
article .btn:visited{color:#FFF}
article .btn:hover{color:var(--red); background:#FFF}

/* Article Hero */
.com-content-article figure{position:absolute; top:0; left:0; margin:180px 0 0 0; width:100%; height:calc(70vh - 180px);}
.home .com-content-article figure{height:calc(100vh - 180px); padding:0 0 0 var(--news); background:var(--gray); box-sizing:border-box;}
.com-content-article figure img{width:100%; height:100%; object-fit:cover}
.com-content-article .img_pos_0 img{object-position: 50% 0%;}
.com-content-article .img_pos_10 img{object-position: 50% 10%;}
.com-content-article .img_pos_20 img{object-position: 50% 20%;}
.com-content-article .img_pos_30 img{object-position: 50% 30%;}
.com-content-article .img_pos_40 img{object-position: 50% 40%;}
.com-content-article .img_pos_100 img{object-position: 50% 100%;}

/* Article IMG small */
.article_img{position:absolute; bottom:30px; left:30px; width:calc(33% - 40px)}
.home .article_img{bottom:auto; top:0; left:0; transform:translateY(-50%); z-index:2;}
.article_img img{width:100%; height:auto; position: absolute; bottom: 0;}
.home .article_img img{position: relative; bottom: auto}
.article_img_arrow{position:absolute; top:-170px; left:-130px; z-index:2;}
.article_img_arrow a{color:#FFF!important}
.article_img_arrow a:hover{color:var(--red)!important}
.article_img_arrow span{position:absolute; top:-90px; left:-30px; transform:rotate(-12deg); font-family: market; font-size:40px; line-height:40px; display:block; width:160px}
.article_img_arrow img{filter:invert(1)}

@media (max-width: 1400px) {
	.article_img_arrow{top:-180px; left:260px;}
	.article_img_arrow img{filter:invert(1); transform:scaleX(-100%)}
}

@media (max-width: 1024px) {
	.com-content-article__body{border-radius:0; padding-top:}
	.com-content-article figure{position:relative}
	.com-content-article figure{height:70vh; margin:0}
	.com-content-article,.home .com-content-article{padding:0;}
	.home .com-content-article figure{height:100vh}
}
@media (max-height: 900px) {
	.article_img{max-height: 400px}
}
@media (max-width: 800px) {
	.com-content-article figure{margin:150px 0 0 0; height:calc(50vh - 150px)}
	.home .com-content-article figure{margin:0}
	.article_img_arrow{top:-160px; left:230px;}
	.article_img_arrow img{filter:invert(1); transform:scaleX(-100%)}
}
@media (max-width: 700px) {
	.home .com-content-article {padding-top:40px}
	.article_img,.article_img_arrow{display:none}
	.main .com-content-article h1,.main .com-content-article h2, .main .com-content-article p{width:100%; padding:0}
	.com-content-article figure{position:relative; margin:0}
	.home .com-content-article figure{height:auto; padding:0; margin:0}
	.com-content-article figure img{width:100%; height:auto}
}

/* ELEKTROSERVICE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.es_nav{width:100%; max-width:var(--page); margin:-15px auto 0 auto; position:relative}
.es_nav ul{background:var(--lightgray); display:flex; flex-wrap:wrap; justify-content:center; gap:30px; width:100%; margin:0; padding:30px 30px 45px 30px; list-style-type: none; box-sizing:border-box; border-radius:0 0 15px 15px}
.es_nav li{}
.es_nav li a{display:block; background:var(--gray); border:solid 1px #FFF; border-radius:9px; padding:10px 20px; color:#FFF}
.es_nav li a:hover{background:var(--red)}

.es_content{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box; }
.es_content > div > div{position:relative; width:50%; margin:50px 0 50px 50%; padding:15px 0}
.es_content > div > div:nth-child(even){margin:50px 50% 50px 0}
.es_content figure{margin:0; position:absolute; top:0; left:-30px; transform:translateX(-100%); height:100%; width:calc(50vw - 15px); max-width:calc(var(--page) - 30px)}
.es_content > div > div:nth-child(even) figure{left:auto; right:-30; transform:translateX(100%)}
.es_content figure img{height:100%; width:100%; object-fit:cover; border-radius:15px}
.anker{position:absolute; top:-50px; width:0; height:0;}

.es_contact{background:var(--lightgray); padding:15px; box-sizing:border-box; border-radius:15px; display:flex; flex-wrap:wrap}
.es_contact p{margin:0; display:flex; align-items:center; line-height:24px; width:50%}
.es_contact a{margin:0 10px 0 0}
.es_contact a:last-child{margin:0 20px 0 0}
.es_contact a:hover{color:var(--red)}
.es_contact p strong{margin:0 10px 0 0}
.es_contact img{width:25px; height:25px; filter:brightness(0)}
.es_contact a:hover img{filter:none}

@media (max-width: 1024px) {
	.es_nav > .nav{position:relative; height:auto}
	.es_nav ul{border-radius:0}
}
@media (max-width: 700px) {
	.es_content > div > div{width:100%; margin:50px 0 50px 0}
	.es_content figure{position:relative; top:auto; left:auto; transform:none; width:100%; max-width:auto; height:auto; margin:0 0 30px 0}
	.es_content > div > div:nth-child(even) figure{right:auto; transform:none}
	.es_content figure img{height:auto; border-radius:15px}
	.es_content > div > div:nth-child(even){margin:50px 0 50px 0}
}
@media (max-width: 500px) {
	.es_nav{font-size:16px}
	.es_nav ul{gap:15px; padding:15px 30px 45px 30px;justify-content:flex-start;}
	.es_contact p{width:100%; line-height:30px}
}

/* HAUSHALTSGERÄTE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.haushaltsgeraete{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin:60px auto 40px auto; position:relative}
.haushaltsgeraete > div{width:100%}
.haushaltsgeraete .lead{margin:20px 0 60px 0}
.haushaltsgeraete .content{display:flex; flex-wrap:wrap; gap:15px;}
.haushaltsgeraete .content img{height:160px; width:auto; filter:brightness(0) invert(1); margin:40px 0}
.haushaltsgeraete .content p{width:calc(33.333% - 10px); text-align:center; position:relative}
.haushaltsgeraete .content p:after{position:absolute; content:""; height:240px; width:100vw; background:var(--gray); z-index:-1; top:0; left:50%; transform:translateX(-50%)}
.haushaltsgeraete .content strong{display:inline-block; font-size:30px; line-height:40px; margin:30px 0 20px 0}

.issuu{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin:40px auto}
.issuu > div{display:flex; flex-wrap:wrap; gap:30px}

.issuu .content{width:calc(50% - 15px); position:relative}
.issuu .content:after{content:""; position:absolute; top:100px; left:50%; transform:translateX(-50%); width:100vw; height:100px; background:var(--gray); z-index:-1}
.issuu .content h3{margin:30px 0 20px 0}
.issuu .content iframe{min-height:300px}

@media (max-width: 1024px) {
	.haushaltsgeraete .content p:after{height:200px}
	.haushaltsgeraete .content img{height:120px;}
	.haushaltsgeraete .content strong{font-size:26px; line-height:34px;}
}
@media (max-width: 700px) {
	.haushaltsgeraete .content,
	.issuu > div{display:block}
	.haushaltsgeraete .content p,
	.issuu .content{width:100%}
}

/* UNTERNEHMEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ut_content{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin:40px auto; position:relative}
.ut_history{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin:40px auto; position:relative}

.ut_history .tabs {display: flex; width:100%; flex-direction:column; background:var(--gray); border-radius:15px}
.ut_history .tab-titles {display: flex; cursor: pointer}
.ut_history .tab-titles label {padding: 10px 20px; background: var(--gray); transition: background 0.3s; color:#FFF; font-weight:bold}
.ut_history .tab-titles label:hover {background: var(--lightgray); color:var(--red); cursor:pointer}
.ut_history input[type="radio"] {display: none}
.ut_history .tab-content {padding: 20px; background: var(--lightgray); display: none; border-radius:0 0 15px 15px}
.ut_history label .point{display:none}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {display: block}
#tab1:checked ~ .tab-titles label[for="tab1"],
#tab2:checked ~ .tab-titles label[for="tab2"],
#tab3:checked ~ .tab-titles label[for="tab3"] {background: var(--lightgray); color:#000;}

@media (max-width: 700px) {
	.ut_history label .point{display:inline-block}
	.ut_history label .fullword{display:none}
}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.visforms{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box}
.visforms fieldset{padding:0; border:none}
.visforms fieldset .row > label{width:150px; float:left;}
.visforms fieldset .row > div{margin:0 0 15px 0}
.visforms .row{clear:both}
.visforms .form-group > div{display:flex;}
.visforms .form-group > div > div{margin:0 15px 0 0}
.visforms .form-group > div > input,
.visforms .form-group > div > textarea{width:calc(100% - 30px)}
.visforms .form-group > div > div > input{margin:0 5px 0 0}
.visforms fieldset .row a{text-decoration: underline}

@media (max-width: 700px) {
	.visforms fieldset .row > label{width:calc(100% - 30px);float:none}
	
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e_tec{background:#FFF; margin:80px 0; position:relative}
.e_tec h2{padding:0 15px; box-sizing:border-box}
.e_tec > div{width:100%; max-width:var(--page); margin:0 auto; }
.e_tec iframe{width:100%; height:740px; border:0; position:relative; z-index:2}
.e_tec p:after{position:absolute; content:""; bottom:0; left:50%; width:100vw; height:50%; background:var(--lightgray); transform:translateX(-50%)}
	
@media (max-width: 1000px) {
	.e_tec iframe{height:620px}
}
@media (max-width: 700px) {
	.e_tec{margin:40px 0}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer{width:100%; background:var(--gray); margin:60px 0 0 0}
.footer div{width:100%; max-width:var(--page); padding:30px 15px; box-sizing:border-box; margin: auto; display:flex; position:relative; flex-wrap:wrap}
.footer p{margin:0}
.footer p:nth-child(1){margin:0 30px 0 0}
.footer p:last-child{position:absolute; top:30px; right:15px}
.footer p a{display:flex; color:#FFF}
.footer p a img{width:30px; height:30px; margin:0 10px 0 0; filter:brightness(0) invert(1)}
.footer p a:hover{color:var(--red)}
.footer p a:hover img{filter:none}

@media (max-width: 1000px) {
	.footer div{padding:30px 15px 90px 15px;}
}

@media (max-width: 700px) {
.footer p:last-child{position:relative; top:auto; right:auto; margin:30px 0 0 0; font-size:16px}
}


/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {font-family: 'ubuntu-regular'; src: url('../fonts/Ubuntu-Regular.woff') format('woff'), url('../fonts/Ubuntu-Regular.woff2') format('woff2')}
@font-face {font-family: 'ubuntu-bold'; src: url('../fonts/Ubuntu-Bold.woff') format('woff'), url('../fonts/Ubuntu-Bold.woff2') format('woff2')}
@font-face {font-family: 'market'; src: url('../fonts/MarketOT.woff') format('woff'), url('../fonts/MarketOT.woff2') format('woff2')}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-family: ubuntu-regular, sans-serif; color: var(--darkgrey); overflow-x:hidden}
a, a:visited{color:#000; text-decoration: none; }
a:hover{color:var(--red)}
strong {font-family: ubuntu-bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}

h1,h2,h3{font-family: ubuntu-bold; font-weight:normal; color:var(--darkgrey); margin: 0 0 20px 0}
h1{font-size:40px; line-height:50px}
h2{font-size:30px; line-height:40px}
h3{font-size:26px; line-height:26px}

@media (max-width: 1000px) {
	.hyphens h1{hyphens:auto}
}
@media (max-width: 700px) {
	h1{font-size:30px; line-height:40px}
	h2{font-size:26px; line-height:32px}
	h3{font-size:24px; line-height:28px}
	.hyphens article{hyphens: auto;}
}


/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {position:absolute; z-index:33; top:120px; right:30px}
nav > ul{margin:0; padding:0; line-height:24px}
nav > ul > li{float:left; text-align:center; list-style-type:none; margin:0 15px; font-family:ubuntu-bold}
nav > ul > li a{display:block; text-decoration:none; }
nav > ul > li a img{display:none}
nav ul li ul{display:none; position:relative; float:none; left:0; padding:0; list-style-type: none}


nav ul li a, nav ul li a:visited{text-transform:uppercase}
nav a:hover{color:var(--red);}

nav > [type="checkbox"], nav > label{display:none;}

@media (max-width: 1024px) {
	nav {right:0}
}

 @media screen and (max-width:1024px){

    nav {position:fixed; left:auto; top:0; transform:none; width:auto}
	.nav{display:none;}
    
	nav > label{display:block; background:#000; width:40px; height:40px; cursor:pointer; position:absolute; top:15px; right:15px; z-index:2; border-radius:5px}
	nav > label:hover{background:var(--red)}
	nav > label:after{content:'';display:block;width:25px;height:3px;background:#FFF;margin:18px 7px;box-shadow:0px -10px 0px #FFF, 0px 10px 0px #FFF}
  
  	[type="checkbox"]:checked ~ label{background:var(--red)}
	[type="checkbox"]:checked ~ .nav{display:block;}
    [type="checkbox"]:checked ~ label:after{box-shadow:0px 10px 0px rgba(0,0,0,0), 0px 20px 0px rgba(0,0,0,0)}
  
    .nav{z-index:1; background:var(--gray); position:fixed; top:0; right:0px; padding-inline-start: 0px; padding:0; height:100vh; width:100%; box-sizing:border-box}
  
    nav{left:0; width:100%; transform:translateX(0)}
	nav a:hover{color:#FFF}
    nav ul{float:left;margin:0; width:100%;}
	nav ul li{display:block; text-align:center;}
	nav ul li:hover{background:none}
	nav ul > li{float:none; padding:15px 0 0 0}
	nav ul li ul li{display:block; float:none; padding:0; background:none; text-align:center; width:auto}
	nav ul li ul{display:block}
	nav > ul > li > a{padding:10px 0; margin:10px 0; border:none}
	nav > ul > li a img{display:block; margin: 0 auto 20px auto; height: 100px; width: auto;}
    nav > ul li ul li ul{left:auto; top:auto}
    nav > ul > li > a{text-transform:uppercase; font-size:30px; color:#FFF}
  	nav > ul > li > a:visited{color:#FFF}
	nav > ul > li > a:hover{color:var(--red)}
    nav > ul > li > ul > li a{width:100%; padding:10px 0; font-weight:strong; color:#FFF!important}
  
	nav > ul > li > a:after{content:none}
}