/* TV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tv{margin:80px 0}
.tv > div{position:relative}
.tv p{text-align:center}
.tv img{width:700px; height:auto}
.tv iframe,.tv video{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:686px; height:380px; border:none}

@media (max-width: 700px) {
  .tv img{width:100%}
  .tv iframe{width:360px; height:196px;}
}
@media (max-width: 380px) {
  .tv iframe{top:5px; width:324px; height:180px;}
}
@media (max-width: 340px) {
  .tv iframe{width:268px; height:150px;}
}

/* NEWS-STAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-star{position:absolute; top:120px; right:20px; z-index:99}
.news-star a{position:relative; width:100px; height:100px; display:block; font-size:16px; line-height:20px; font-family:ralewaybold; text-align:center; color:#000}
.news-star span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.news-star a:hover{color:var(--johner)}
.news-star a:hover img{animation-duration: 6s}
.news-star img{width:100%; height:100%; animation-name: turn;  animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: linear}
@keyframes turn {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news{margin:80px 0 0 0; background:#DDD; padding:80px 0 40px 0}
.news > div{display:flex; position:relative; flex-wrap:wrap;}
.news > div:after{content:"Johner News"; position:absolute; top:-50px; left:15px; font-size:30px; line-height:40px; color:var(--johner);}
.news > div > div{width:calc(50% - 15px); margin:15px 7.5px; position:relative}
.news img{width:100%; height:auto; margin:0 0 60px 0}
.news figure{margin:0; background:#FFF}
.news h4{font-size:20px; line-height:30px}
.news h4 a{position:absolute; top:0; left:0; display:flex; align-items:flex-end; justify-content:center; width:100%; height:200px; background:rgba(0,0,0,0); padding:0 0 20px 0; box-sizing:border-box; color:#000}
.news h4 a:hover{color:var(--johner)}

@media (max-width: 1000px) {
  .news h4 a{height:160px;}
}
@media (max-width: 700px) {
  .news > div > div{width:100%; margin:15px 0;}
  .news h4 a{height:170px;}
}
@media (max-width: 380px) {
  .news h4 a{height:155px;}
}

@media (max-width: 320px) {
  .news h4 a{height:140px;}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site_partner .com-content-article__body{display:flex; flex-wrap:wrap}
.site_partner .com-content-article__body h1{width:100%}
.site_partner .com-content-article__body .content{width:calc(33.33% - 15px); margin:7.5px; padding:15px; background:#DDD; border-radius:15px; box-sizing:border-box}
.site_partner .com-content-article__body .content p{margin:0 0 5px 0; text-align:center}
.site_partner .com-content-article__body .content a{color:#000;}
.site_partner .com-content-article__body .content a:hover{color:var(--johner);}

@media (max-width: 1000px) {
  .site_partner .com-content-article__body .content{width:calc(50% - 15px)}
}
@media (max-width: 700px) {
  .site_partner .com-content-article__body .content{width:100%; margin:0 0 15px 0}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site_team .com-content-article__body{margin:40px auto;}
.team{margin:40px 0 80px 0}
.team > div{display:flex; flex-wrap:wrap; position:relative}
.team > div > div{width:calc(25% - 15px); position:relative; margin:7.5px; padding:10px 10px 20px 10px; box-sizing:border-box; border-radius:15px; background:#DDD}
.team img{margin:0 0 10px 0; width:100%; height:auto}
.team figure{margin:0}
.team p{margin:0}

@media (max-width: 1000px) {
  .team > div > div{width:calc(33.33% - 15px)}
}
@media (max-width: 700px) {
  .team > div > div{width:100%; margin:0 0 15px 0}
}

/* MILESTONES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.milestones{margin:80px 0}
.milestones > div{display:flex; flex-wrap:wrap;}
.milestones > div h2{width:100%}
.milestones > div p{width:calc(25% - 15px); margin:7.5px; padding:10px; box-sizing:border-box; background:#DDD; text-align:center; border-radius:15px}
.milestones > div strong{display:block; font-size:30px; line-height:40px}

@media (max-width: 1000px) {
  .milestones > div p{width:calc(33.33% - 15px)}
}
@media (max-width: 700px) {
  .milestones > div p{width:100%; margin:0 0 15px 0}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{margin:120px 0 80px 0}
.kompetenzen > div:before{content:"Weitere Kompetenzen"; font-size:30px; line-height:40px; color:var(--johner); position:absolute; top:-50px; left:15px}
.kompetenzen > div{display:flex; flex-wrap:wrap; position:relative}
.kompetenzen > div > div{width:calc(25% - 15px); position:relative; margin:7.5px; box-sizing:border-box; display:flex; border:solid 1px #000;}
.kompetenzen > div > div h4{width:100%; height:auto; position:absolute; bottom:0; font-size:16px; line-height:16px; text-align:center}
.kompetenzen > div > div a{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100px; padding:0 0 12px 0; box-sizing:border-box}
.kompetenzen img{margin:0 0 40px 0; width:100%; height:auto}
.kompetenzen figure{margin:0}

@media (max-width: 700px) {
  .kompetenzen > div > div{width:calc(50% - 15px);}
}
@media (max-width: 380px) {
  .kompetenzen > div > div{width:100%; margin:7.5px 0; }
}
@media (max-width: 340px) {
  .kompetenzen > div:before{font-size:20px}
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:#000}
footer > div > div{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; height:140px;}
footer a{color:#FFF!important}
footer a:hover{color:var(--johner)!important}
footer p:last-child{font-size:14px; line-height:30px; text-align:right}

@media (max-width: 700px) {
  footer > div > div{display:block; height:auto; padding:15px!important}
  footer p:last-child{margin:15px 0 0 0; text-align:left}
}
  
/* SITEMAP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sitemap{margin:60px 0}
.sitemap > div{ display:flex; justify-content:space-between; flex-wrap:wrap}
.sitemap h3{width:100%}
.sitemap p{margin:0 0 10px 0; font-size:14px; line-height:16px}
.sitemap .content{width:25%;}
.sitemap .content a{width:calc(100% - 15px); height:40px; border:solid 1px #000; display:flex; justify-content:center; align-items:center; text-align:center; color:#000}
.sitemap .content strong{display:flex; width:100%; height:100%; justify-content:center; align-items:center; background:#000; color:#FFF}
.sitemap .image{width:50%; position:relative; background: url("../../../images/home/referenzen-1280x720.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.sitemap .image a{position:absolute; bottom:20px; right:15px; display:flex; justify-content:center; align-items:center; background:#FFF; color:#000; padding:10px; box-sizing:border-box; border-radius:9px}
.sitemap .content a:hover,.sitemap .content a:hover strong,.sitemap .image a:hover{background:var(--johner); color:#FFF}

@media (max-width: 700px) {
  .sitemap .content{width:50%}
  .sitemap .image{width:100%; height:200px}
}
@media (max-width: 380px) {
  .sitemap p{margin:0 0 10px 0; font-size:11px; line-height:16px}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{}
.contact div{display:flex; flex-wrap:wrap; justify-content:space-between}
.contact h3,.contact h2{text-align:center; width:100%}
.contact h2{font-family:ralewaybold; color:#000}
.contact h3{font-size:20px; line-height:30px; font-family:ralewayregular; font-weight:normal; margin:0 0 50px 0}
.contact p{width:calc(33.33% - 30px); position:relative; }
.contact span{position:absolute; z-index:2; bottom:15px; left:50%; transform:translateX(-50%); padding:10px; box-sizing:border-box; background:var(--johner); width:100%; color:#FFF; text-align:center;}
.contact img{filter:grayscale(1); width:100%; height:auto; border-radius:50%; overflow:hidden}

@media (max-width: 1000px) {
	.contact span{bottom:auto; top:160px}
}

@media (max-width: 700px) {
  .contact p{width:100%;} 
  .contact span{bottom:15px; top:auto}
}

/* HEADER: LOGO + ICONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo{position:absolute; top:5px; left:50%; transform:translate(-50%); width:auto; height:85px;}
.header_icons{position:absolute; top:30px; right:30px; z-index:11}
.header_icons div{width:150px; display:flex; justify-content:space-between}
.header_icons div p{width:40px; height:40px}
.header_icons div a{display:block; width:100%; height:100%; border-radius:50%; background:#000; padding:10px; box-sizing:border-box;}
.header_icons div img{width:100%; height:100%}
.header_icons div a:hover{background:var(--johner)}

.header_icons div p a{position:relative;}
.header_icons div p a:after{position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); text-align:center; font-size:14px; line-height:16px; width:160px}
.header_icons div p:nth-child(1) a:hover:after{content:"+41 (0)33 222 40 28";}
.header_icons div p:nth-child(2) a:hover:after{content:"info@johner-elektro.ch";}
.header_icons div p:nth-child(3) a:hover:after{content:"3612 Steffisburg";}

@media (max-width: 700px) {
  .logo{left:calc(50% - 10px)}
  .header_icons{right:5px; top:15px}
  .header_icons div{width:90px; flex-wrap:wrap; justify-content:center}
  .header_icons div p{width:30px; height:30px; margin:2.5px 5px}
  .header_icons div a{padding:7.5px}
  .header_icons div p a:after{display:none}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; left:30px; top:26px; z-index:10}
nav > ul {position:fixed; top:0; left: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(--johner)}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}

/* 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(--johner)}
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(--johner)}
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 .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 700px) {
  nav{position:fixed; top:18px; left:10px}
  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}
}

/* HOME BG-IMAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_bg_image{margin:100px 0 160px 0}
.home_bg_image > div{width:100%; display:flex; flex-wrap:wrap}
.home_bg_image p{width:33.33%; margin:0}
.home_bg_image a{position:relative; display:block; height:calc(100vh - 200px); width:100%}
.home_bg_image p:nth-child(1) a{}
.home_bg_image p:nth-child(2) a{}
.home_bg_image p:nth-child(3) a{}
.home_bg_image a span{position:absolute; bottom:10vh; left:50%; transform:translateX(-50%); font-size:40px; color:#FFF; font-family: ralewaybold; text-shadow:1px 1px 5px #333, -1px -1px 5px #333}

.home_bg_image p:nth-child(1) a:after{background: url("../../../images/home/elektro-2023-1920x1080.jpg") center center}
.home_bg_image p:nth-child(2) a:after{background: url("../../../images/home/solar-2023-1920x1080.jpg") center center;}
.home_bg_image p:nth-child(3) a:after{background: url("../../../images/home/kontroll-1920x1080.jpg") center center;}

.home_bg_image p:nth-child(1) a:after,.home_bg_image p:nth-child(2) a:after,.home_bg_image p:nth-child(3) a:after{
  position:absolute; content:""; top: 0; left: 0; right: 0; z-index: -1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; height:100%}

.home_bg_image p a{filter:grayscale(1)}
.home_bg_image p a:hover{filter:none}
.home_bg_image p a:hover span{color:var(--johner); text-shadow:1px 1px 5px #FFF, -1px -1px 5px #FFF}

.home_start{position:absolute; bottom:50px; left:50%; transform:translate(-50%,30px); font-size:30px; font-family: ralewaybold;}
.home_start a,.home_start a:visited{color:#000}
.home_start a:hover{color:var(--johner)}

@media (max-width: 700px) {
	.home_bg_image p{width:100%;}
	.home_bg_image a{height:calc(33.33vh - 80px)}
	.home_start{position:absolute; bottom:75px;}
}

@media (max-width: 340px) {
  .home_bg_image a{height:calc(33.33vh - 60px)}
	.home_start{position:absolute; bottom:50px;}
  .home_start{font-size:20px}
}

/* EXTRANET
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.extranet{display:flex; flex-wrap:wrap;}
.extranet > div{padding:15px; box-sizing:border-box; border:solid 1px #DDD; border-radius:15px; margin:7.5px; width:calc(33.33% - 15px)}

.extranet_login{width:100%; display:flex; justify-content:center; margin:80px 0}
.extranet_login form > div > div{margin:0 0 15px 0}
.extranet_login .mod-login__options,
.extranet_login label,
.extranet_login .mod-login__password button,
.extranet_login .plg_system_webauthn_login_button,
.extranet_login .mod-login__remember{display:none}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen h6 > p{display:none}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{margin:100px 0 0 0}
.com-content-article__body{padding:0 15px; margin:40px auto 80px auto; width:100%; max-width:1024px; box-sizing:border-box}
article figure{margin:0}
article figure img{width:100%; height:auto}
.layout > div{width:100%; max-width:1024px; margin:auto; padding:0 15px; box-sizing:border-box;}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address div{margin:80px 0}
.address iframe{width:100%; height:420px; border:none}
.address .content{width:100%; max-width:1024px; margin:auto; padding:0 15px; box-sizing:border-box; display:flex; justify-content:space-between; flex-wrap:wrap}
.address address{font-style:normal}
.address address p:first-child{margin:0}
.address .content > p a{display:flex; align-items:center; height:40px;}
.address .content > p a img{filter:invert(1); margin:0 0 0 10px}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--johner: #e20613}
.bg-color{background:#FFF}

@font-face {font-family: 'ralewaybold'; src: url('../fonts/raleway-bold.woff2') format('woff2'), url('../fonts/raleway-bold.woff') format('woff'); font-weight: bold; font-style: bold;}
@font-face {font-family: 'ralewayregular'; src: url('../fonts/raleway-regular.woff2') format('woff2'), url('../fonts/raleway-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: ralewayregular, sans-serif; color: #000; overflow-x:hidden}
a, a:visited{color:var(--johner); text-decoration: none}
a:hover{color:#000}
strong {font-family: ralewaybold;}
p {margin:0 0 15px 0}

.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}

h1,h2,h3,h4{text-align:left; color:#000;margin:0; font-weight:normal}

h1{color:var(--johner); font-size:40px; line-height:50px;}
h2{font-size:30px; line-height:40px; font-family: ralewayregular; color:var(--johner);}
h1,h2{ margin:0 0 20px 0}
h3{font-size:24px; line-height:34px; margin: 0 0 10px 0; font-family: ralewaybold}
h4{font-size:24px; line-height:34px;}

@media (max-width: 700px) {
  h1,h2,.item-pagedatenschutz p{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
  .item-pagedatenschutz{max-width:100%; overflow:hidden;}
}