/* COLORS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blue{color:#365DA2}
.red{color:#E32523}
.bg-blue{background:#365DA2}
.bg-red{background:#E32523}
.bg-black{background:#000}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 62.5%; }
body {
  background: #FFF;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  font-family: 'Ubuntu', sans-serif;
  color: #FFF; }
a,a:visited {color: #FFF; text-decoration: none;}
a:hover{color:#000}
strong {font-weight: 700}
p {padding:0 0 10px 0; margin:0;}
img{width:100%}
h1{font-weight: 300;font-size: 72px;line-height:72px}
h2{font-weight: 300;font-size: 48px;line-height: 48px}
h3{font-weight: 300;font-size: 24px;line-height: 24px}
h1,h2,h3{padding:0 10px;margin:0;text-transform: uppercase; hyphens: auto;-webkit-hyphens:auto}


/* HEADER + NAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position: fixed; z-index:2; width:100%; height:130px; background-color:rgba(255,255,255,0.8); background-image:url("../images/global/linie-9090x16.svg");background-repeat: no-repeat;background-size: 9090px 16px;display: flex;justify-content: space-between}
header > .logo {padding:10px 0 10px 30px;width:280px}
header > .logo img{width:60px;height: 110px;float:left;}
header > .logo p{font-size:24px; line-height:36px; padding:25px 0 0 0; text-align: right;}
header > .logo a, .logo a:visited{color:#365DA2}
header > .logo a:hover{color:#000}
header > .contact {width:195px; position:absolute; left:50%; top:10px; transform:translateX(-50%); }
header > .contact img{float:left;padding:42.5px 10px;width:45px}
header > .contact img:hover{filter: brightness(0)}
header > .navigation {width:0px;}

@media only screen and (max-width:1000px){
    header > .contact {position:relative; left:auto; top:auto; transform:none;}
}

/* ARCHITECTUR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.box{width:100%; position:relative} 
.maxview{width:100%;max-width:1024px;margin:0 auto;}
.mobile-on{display:none}
.mobile-off{}


/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content{padding-top:180px;display:flex;align-items: center;justify-content: space-around;text-align: center;width:100%;max-width: 1112px;margin:0 auto;}
.column{flex-direction: column;}
.bottom{align-items:flex-end}
.non-menu{padding-top:50px;}
.content-alternativ{width:calc(100% - 40px);padding:140px 20px 40px 20px;text-align: left;max-width:calc(1112px - 40px);margin:0 auto;}
.content-alternativ h3{padding:40px 0 20px 0;}


/* BACKGROUND-IMAGES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-impressionen{background: url("../images/header/impressionen-1920x1280.jpg");}
.bg-ladestation{background: url("../images/header/ladestation-1920x1280.jpg");}
.bg-montage{background: url("../images/header/montage-1920x1280.jpg");}
.bg-contact{background: url("../images/global/wall-1920x1280.jpg");}
.bg-bohren{background: url("../images/header/bohren-1920x1080.jpg");}
.bg-kompetenzen{background: url("../images/header/kompetenzen-1920x1280.jpg");}
.bg-beratung{background: url("../images/header/beratung-1920x1280.jpg");}
.bg-installation{background: url("../images/header/installation-1920x1280.jpg");}
.bg-service{background: url("../images/header/service-1920x1280.jpg");}
.bg-haushaltsgeraete{background: url("../images/header/haushaltsgeraete-1920x1280.jpg");}
.bg-firma{background: url("../images/header/firma-1920x1280.jpg");}
.bg-team{background: url("../images/header/team-2021-1920x1280.jpg");}
.bg-team-2{background: url("../images/header/team-2021-2-1920x1280.jpg");}
.bg-werde-elektriker{background: url("../images/header/werde-elektriker-1920x1280.jpg");}
.bg-impressum{background: url("../images/header/impressum-1920x1280.jpg");}
.bg-datenschutz{background: url("../images/header/datenschutz-1920x1280.jpg");}
.bg-kommunikation{background: url("../images/header/kommunikation-1920x1280.jpg");}
.bg-attribut{background-repeat: no-repeat;background-position:center center;background-attachment:fixed;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

/* SLIDESHOW
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slidebox{width:100%; height:100vh; position:absolute;}
.fullscreen{width:100%; height:100vh;}

.klasse_1 {animation: UD_KLASSE_1 infinite 20000ms; -moz-animation: UD_KLASSE_1 infinite 20000ms; -ms-animation: UD_KLASSE_1 infinite 20000ms; -o-animation: UD_KLASSE_1 infinite 20000ms; -webkit-animation: UD_KLASSE_1 infinite 20000ms;   }
.klasse_2 {animation: UD_KLASSE_2 infinite 20000ms; -moz-animation: UD_KLASSE_2 infinite 20000ms; -ms-animation: UD_KLASSE_2 infinite 20000ms; -o-animation: UD_KLASSE_2 infinite 20000ms; -webkit-animation: UD_KLASSE_2 infinite 20000ms;   }
.klasse_3 {animation: UD_KLASSE_3 infinite 20000ms; -moz-animation: UD_KLASSE_3 infinite 20000ms; -ms-animation: UD_KLASSE_3 infinite 20000ms; -o-animation: UD_KLASSE_3 infinite 20000ms; -webkit-animation: UD_KLASSE_3 infinite 20000ms;   }
.klasse_4 {animation: UD_KLASSE_4 infinite 20000ms; -moz-animation: UD_KLASSE_4 infinite 20000ms; -ms-animation: UD_KLASSE_4 infinite 20000ms; -o-animation: UD_KLASSE_4 infinite 20000ms; -webkit-animation: UD_KLASSE_4 infinite 20000ms;   }

@-webkit-keyframes UD_KLASSE_1 {
	0% { opacity:1; }
	20% { opacity:1; }
	25% { opacity:0; }
	95% { opacity:0; }
	100% { opacity:1; }
	}
	
@-webkit-keyframes UD_KLASSE_2 {
	0% { opacity:0; }
	20% { opacity:0; }
	25% { opacity:1; }
	45% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:0; }
	}
	
@-webkit-keyframes UD_KLASSE_3 {
	0% { opacity:0; }
	45% { opacity:0; }
	50% { opacity:1; }
	70% { opacity:1; }
	75% { opacity:0; }
	100% { opacity:0; }
	}
	
@-webkit-keyframes UD_KLASSE_4 {
	0% { opacity:0; }
	70% { opacity:0; }
	75% { opacity:1; }
	95% { opacity:1; }
	100% { opacity:0; }
	}

.k_1 {animation: UD_K_1 infinite 30000ms; -moz-animation: UD_K_1 infinite 30000ms; -ms-animation: UD_K_1 infinite 30000ms; -o-animation: UD_K_1 infinite 30000ms; -webkit-animation: UD_K_1 infinite 30000ms;   }
.k_2 {animation: UD_K_2 infinite 30000ms; -moz-animation: UD_K_2 infinite 30000ms; -ms-animation: UD_K_2 infinite 30000ms; -o-animation: UD_K_2 infinite 30000ms; -webkit-animation: UD_K_2 infinite 30000ms;   }
.k_3 {animation: UD_K_3 infinite 30000ms; -moz-animation: UD_K_3 infinite 30000ms; -ms-animation: UD_K_3 infinite 30000ms; -o-animation: UD_K_3 infinite 30000ms; -webkit-animation: UD_K_3 infinite 30000ms;   }
.k_4 {animation: UD_K_4 infinite 30000ms; -moz-animation: UD_K_4 infinite 30000ms; -ms-animation: UD_K_4 infinite 30000ms; -o-animation: UD_K_4 infinite 30000ms; -webkit-animation: UD_K_4 infinite 30000ms;   }
.k_5 {animation: UD_K_5 infinite 30000ms; -moz-animation: UD_K_5 infinite 30000ms; -ms-animation: UD_K_5 infinite 30000ms; -o-animation: UD_K_5 infinite 30000ms; -webkit-animation: UD_K_5 infinite 30000ms;   }
.k_6 {animation: UD_K_6 infinite 30000ms; -moz-animation: UD_K_6 infinite 30000ms; -ms-animation: UD_K_6 infinite 30000ms; -o-animation: UD_K_6 infinite 30000ms; -webkit-animation: UD_K_6 infinite 30000ms;   }

@-webkit-keyframes UD_K_1 {
	0% { opacity:1; }
	11% { opacity:1; }
	16% { opacity:0; }
	94% { opacity:0; }
	100% { opacity:1; }
	}
	
@-webkit-keyframes UD_K_2 {
	0% { opacity:0; }
	11% { opacity:0; }
	16% { opacity:1; }
	27% { opacity:1; }
	33% { opacity:0; }
	100% { opacity:0; }
	}
	
@-webkit-keyframes UD_K_3 {
	0% { opacity:0; }
	27% { opacity:0; }
	33% { opacity:1; }
	44% { opacity:1; }
	49% { opacity:0; }
	100% { opacity:0; }
	}
	
@-webkit-keyframes UD_K_4 {
	0% { opacity:0; }
	44% { opacity:0; }
	49% { opacity:1; }
	61% { opacity:1; }
    66% { opacity:0; }
	100% { opacity:0; }
	}

@-webkit-keyframes UD_K_5 {
	0% { opacity:0; }
	61% { opacity:0; }
	66% { opacity:1; }
	77% { opacity:1; }
    82% { opacity:0; }
	100% { opacity:0; }
	}

@-webkit-keyframes UD_K_6 {
	0% { opacity:0; }
	77% { opacity:0; }
	82% { opacity:1; }
	94% { opacity:1; }
	100% { opacity:0; }
	}


/* STARTPAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.startbox{width:100%; height: 100vh; position:relative}
.title{text-align:center;top:0;margin-top:60vh;position: absolute;width:calc(100% - 20px);padding:0 10px;text-shadow:1px 1px 5px #000, 1px 1px 5px #000;}
.title img{width:120px;padding-top:50px;
	filter:brightness(10) drop-shadow(1px 1px 5px #000);
	-webkit-filter:brightness(10) drop-shadow(1px 1px 5px #000);
	-moz-filter:brightness(10) drop-shadow(1px 1px 5px #000);
	-o-filter:brightness(10) drop-shadow(1px 1px 5px #000);}
.title img:hover{
	filter:brightness(1) drop-shadow(1px 1px 5px #000);
	-webkit-filter:brightness(1) drop-shadow(1px 1px 5px #000);
	-moz-filter:brightness(1) drop-shadow(1px 1px 5px #000);
	-o-filter:brightness(1) drop-shadow(1px 1px 5px #000)}
.title a{color:#FFF;}
.title a:hover{color:#365DA2;}	
.box-kompetenzen{padding:50px 0;width:100%;display: flex;justify-content: space-around}
.box-kompetenz{width:200px;}
.box-kompetenz > .image{width:200px;height:200px;border-radius: 50%;background: #FFF; transition: all 500ms;}
.box-kompetenz > .image:hover{background:#000; transition: all 500ms;}
.box-kompetenz h3{;margin:40px 0 20px 0;padding:20px 0 0 0;border-top:10px solid #FFF;width:100%;}

/* KOMPETENZEN ÜBERBLICK
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.introtext{margin-top:40px;padding:0 10px}
.intro-out-text{margin-bottom:50px;padding:0 10px}
.field-kompetenzen{padding:50px 0 100px 0;width:100%}
.field-kompetenz{float:left;width:calc(50% - 20px);height:25vh;position: relative;margin:10px;}
.field-kompetenz-image{overflow:hidden;height:25vh;}
.field-kompetenz-text{position:absolute;bottom:0;width:calc(100% - 20px);height:calc(25vh - 20px); padding:10px;background:rgba(0,0,0,0.8);display:flex; align-content:flex-end; justify-content:center;flex-wrap: wrap; transition: all 500ms;}
.field-kompetenz-text h3{padding-bottom:10px;}
.field-kompetenz-text:hover{background:rgba(0,0,0,0);color:rgba(0,0,0,0);transition: all 500ms;}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team-text{padding:50px 0 0 0}
.team-field{width:100%;display:flex;justify-content: center;flex-wrap: wrap;margin:40px 0 40px 0}
.portrait{width:320px;position: relative;margin:20px;}
.portrait-image{overflow:hidden;height:320px;}
.portrait-text{position:absolute;top:0;width:300px;height:300px; padding:10px; background:rgba(0,0,0,0.5);display:flex; align-content:flex-end; justify-content:center;flex-wrap: wrap; transition: all 500ms;}
.portrait-text h3{padding-bottom:10px;}
.portrait-text:hover{background:rgba(0,0,0,0);color:rgba(0,0,0,0);transition: all 500ms;}

/* FIRMA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner-field{display:flex;width:100%;justify-content:center;flex-wrap: wrap;margin:40px 0 60px 0;}
.partner-logo{width:180px;height:180px;margin:10px;border:#FFF solid 1px;border-radius:50%;overflow:hidden;}
.partner-logo img{width:60%;margin:20%;transition: all 500ms;}
.partner-logo img:hover{width:100%;margin:0;transition: all 500ms;}

/* KOMPETENZ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenz-text{float:left;width:calc(50% - 40px);padding:0 20px;text-align:left;}
.kompetenz-bild{float:left;width:50%;}
.info{padding-top:20px}
.info a{font-size:32px;padding-left:10px}
.issuu{float:left;width:50%;height:420px;border:none;}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#contact{position:absolute;top:-130px}
.box-contact{width:33.3%;position: relative}
.img-contact{width:80%;margin:0 10%;max-height: calc(100vh - 150px);overflow:hidden;}
.img-contact img{margin-bottom:-10px}
.textbox-contact{;width:calc(80% - 20px);padding:10px;margin:0 10%;position:absolute;bottom:30px}
.textbox-contact p{padding:0}
.title-contact{height:60vh;max-height:400px;}
.title-contact h3{line-height: 36px}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news_btn_header{position:fixed; z-index:1000; top: 50px; right:100px; display:block; padding:5px 10px; background:#FF0000; color:#FFF; border-radius:9px}
#news_content{position:absolute;top:-130px}
.news{text-align:left; padding:60px 15px; width: calc(100% - 30px); max-width: 1112px; margin:0 auto; display:flex; align-items: flex-start; flex-wrap:wrap;}
.news h3{font-weight:700; margin:20px 0 30px 0; padding:0; line-height:30px; hyphens: none; -webkit-hyphens: none}
.news img{margin-left:10px; border:5px solid white; border-radius:9px; width:calc(50% - 20px); height:auto;}
.news div{width:50%;}
.news ul{margin:0 0 20px 0}
.news button{background:none; border:none; color:#FFF; padding:0; margin:0}
#news {display: none;}

@media only screen and (max-width:1000px){
    .news_btn_header{top: 140px; right:30px;}
}
@media only screen and (max-width:700px){
    .news_btn_header{position:absolute; top: 160px; right:50%; transform:translateX(50%); text-align:center}
}


/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec-header{height:130px;display:flex;align-items: center;justify-content: center;width:100%;}
.e-tec iframe{width:100%; height:720px;border:none;overflow: hidden}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.googlemaps{width:100%;height:calc(100vh - 150px);border:none;}
footer {display:flex;justify-content: space-between; align-items:center;height:150px;padding:0 15px;}
footer strong{font-size:24px;}
footer a:hover, .address a:hover, .webdesign a:hover{color:#E32523}
footer a:visited{color:#FFF;}
.webdesign{padding-top:73px;}

/* COOKIE-BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cookie-banner{position:fixed; width: calc(100% - 40px);bottom:10px;right:10px;padding:15px 10px 10px 10px; background:rgba(0,0,0,0.8);border:1px solid #333;border-radius:9px;color:#fff;text-align: center;z-index:100002;}
.cookie-banner button{background:#fff;color:#000;margin:10px 0 0 0;border-radius:5px;padding:0 10px}
.cookie-banner a{color:#FFF; text-decoration: underline}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}

/* IMPRESSIONEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.impressionen{display:flex; justify-content: flex-start; flex-wrap:wrap; margin:60px 0}
.impressionen a{display:block; width:20%; height:auto; border:solid 7.5px #365DA2; box-sizing: border-box; line-height:0}
.impressionen img:hover{filter:brightness(50%)}


/* RESPONSIVE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width:1112px){
	.bg-attribut{background-attachment:scroll;}
}
@media only screen and (max-width:1024px){
	.portrait{margin-bottom:15px;}
	.partner-logo{width:160px;height:160px;}
}
@media only screen and (max-width:980px){
	.corona-news{right:20px; top:160px}
    .impressionen a{width:33.333%}
}
@media only screen and (max-width:768px){
	.googlemaps{height:calc(100vh - 200px)}
	footer {display:block;height:200px}
	.webdesign{float:right;padding-top:20px}
	footer strong{display: block; padding-top:20px}
	.e-tec iframe{height:540px;}
	.title-contact{height:40vh;}
	.portrait{margin-bottom:40px;}
	.news img{width:100%;margin:0;}
	.news div{width:100%;}
}
@media only screen and (max-width:740px){
	h1{font-size: 52px;line-height:52px;}
	h2{font-size: 42px;line-height:42px;}
	h3{font-size: 20px;line-height:20px;}
	.box-kompetenzen{flex-direction: column;}
	.box-kompetenz{margin:20px auto 0 auto;}
	.field-kompetenz{width:calc(100% - 20px);}
	.content{flex-direction: column}
	.box-contact{width:100%;margin-bottom:50px}
	.img-contact{width:80%;margin:0 10%;max-height: 50vh;overflow:hidden;}
	.textbox-contact{bottom:0px;}
	.title-contact{height:180px;}
}
@media only screen and (max-width:580px){
	header{display:block;height:170px;}
	header > .logo p{margin-bottom:10px;}
	header > .contact{margin:-10px auto 0  auto}
	header > .contact img{float:left;padding:0 10px;width:30px}
	footer strong{padding-top:10px}
	footer p{font-size:14px;line-height: 18px;text-align:center}
	.webdesign{float:none;padding-top:20px;width:100%;}
	.corona-news{top:120px; right:20px; font-size:14px}
    .impressionen{margin:20px 0 60px 0}
    .impressionen a{width:50%}
}
@media only screen and (max-width:420px){
	.title img{padding-top:30px}
	h1{font-size: 42px;line-height:42px;}
	h2{font-size: 36px;line-height:36px;}
	h3{font-size: 18px;line-height:18px;}
	.kompetenz-text{float:right;width:calc(100% - 40px);padding:0 20px;text-align:left;}
	.kompetenz-bild{display:none}
	.issuu{width:100%}
	.mobile-on{display:block;}
	.mobile-off{display:none;}
	.e-tec iframe{height:540px;}
	.address{padding-top:20px;}
	.portrait-text{position:relative;background:none;height: auto;}
	.portrait-text:hover{background:none;color:#FFF;}
}
@media only screen and (max-width:375px){
	header {background-image:url("../images/global/linie-9080x15.svg");height:140px;}
	header > .logo {padding:10px 0 0 30px;width:230px;}
	header > .logo img{width:50px;height: 92px;float:left;}
	header > .logo p{font-size:20px; line-height:28px; padding:20px 10px 0 0; text-align: right;}
	h1{font-size: 36px;line-height:36px;}
	.webdesign{float:right;padding-top:10px}
	.partner-logo{width:120px;height:120px;}
	.corona-news{display:none;}
}
@media only screen and (max-width:320px){
	.title{;margin-top:45vh;}
	footer p{padding-bottom:5px;}
	.portrait{width:260px;}
	.portrait-image{height:260px;}
	.portrait-text{width:240px;height:240px;}
	}