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

header .logo{position:absolute; top:25px; left:50%; transform:translateX(-50%)}
header .logo img{width:290px; height:auto}
header .logo img:hover{filter:brightness(0)}

header .jobs{position:absolute; top:35px; left:90px; width:30px}
header .jobs:before{content:"Jobs"; position:absolute; left:35px; top:8px; font-size:13px; line-height:13px}
header .jobs img{filter:brightness(0); padding-right:40px}
header .jobs img:hover{filter:brightness(1)}

header .quicknav > div{position:absolute; right:30px; top: 35px; width:150px; display:flex; justify-content:space-between;}
header .quicknav img{width:30px; height:30px; filter:brightness(0)}
header .quicknav img:hover{filter:brightness(1)}
header .quicknav a{display:block; width:30px; position:relative}
header .quicknav > div p a:hover:after{width:180px; position:absolute; bottom:-23px; left:50%; transform:translateX(-50%); text-align:center; font-size:15px; color:#000}
header .quicknav > div p:nth-child(1) a:hover:after{content:"+41 44 441 52 92"}
header .quicknav > div p:nth-child(2) a:hover:after{content:"info@wolfplan.ch"}
header .quicknav > div p:nth-child(3) a:hover:after{content:"8330 Pfäffikon"; text-align:right; left:auto; right:-20px; transform:none; }

@media (max-width: 700px) {
  header{height:160px}
  header .jobs,header .quicknav > div{top:25px;}
  header .logo{top:80px}
}
@media (max-width: 400px) {
  header .logo{width: 100%; padding: 0 30px; box-sizing: border-box;}
  header .logo img{width:100%}
}

@media (max-width: 380px) {
  header .jobs:before{content:""}
  header .quicknav > div{width:120px}
}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{margin:50px 0 0 0}
.referenzen > div{display:flex; flex-wrap:wrap; margin:30px 0; border-top:solid 1px #000; padding-top:35px}
.referenzen figure{margin:0}
.referenzen figure,.referenzen .item-content{width:50%}
.referenzen .item-content{padding-left:20px; box-sizing:border-box; position:relative}
.referenzen img{width:100%; height:auto}
.referenzen p{margin-bottom:5px; line-height:30px; font-size:20px}
.referenzen p:last-child{position:absolute; bottom:30px; left:-50%; transform:translateX(-50%)}
.referenzen p:last-child a{padding:10px 15px; background:#000; color:#FFF}
.referenzen p:last-child a:hover{background:#ffe500; color:#000}
.referenzen h2{font-size:24px; line-height:30px; padding-bottom:10px}
@media (max-width: 1000px) {
  .referenzen p:last-child{position:relative; bottom:auto; left:auto; transform:none; margin-top:30px}
}

@media (max-width: 700px) {
.referenzen figure,.referenzen .item-content{width:100%; padding:0}
}

/* REFERENZEN Overview
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen_overview{margin:40px 0}
.referenzen_overview > div{width:100%; display:flex; flex-wrap:wrap}
.referenzen_overview p{display:block; width:calc(50% - 15px); height:calc(240px - 15px); margin:0 15px 15px 0}
.referenzen_overview p:nth-child(1){background: url("../../../images/header/oeffentliche-bauten-1920x1280.jpg") center center; background-size: cover}
.referenzen_overview p:nth-child(2){background: url("../../../images/header/schulen-1920x1280.jpg") center center; background-size: cover}
.referenzen_overview p:nth-child(3){background: url("../../../images/header/gewerbe-1920x1280.jpg") center center; background-size: cover}
.referenzen_overview p:nth-child(4){background: url("../../../images/header/wohnbauten-1920x1280.jpg") center center; background-size: cover}

.referenzen_overview a{position:relative; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.referenzen_overview a:hover{background:rgba(0,0,0,0)}
.referenzen_overview span{display:block; text-align:center; position:absolute; left:0%; bottom:30px; width:100%; font-family: 'ubuntobold', sans-serif; color:#FFF}

/* KOMPETENZEN Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen_content{margin:20px 0 40px 0}
.kompetenzen_content > div{display:flex; flex-wrap:wrap; position:relative}
.kompetenzen_content #elektroplanung,.kompetenzen_content #lichtplanung,.kompetenzen_content #kommunikation,.kompetenzen_content #sicherheitsplanung{position:absolute; top:-40px; left:0}
.kompetenzen_content .image,.kompetenzen_content .text{width:calc(50% - 15px); margin-right:15px}

@media (max-width: 700px) {
  .kompetenzen_content .image,.kompetenzen_content .text{width:100%; margin-right:0}
  .kompetenzen_content .image{height:200px; margin-bottom:20px}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{margin:40px 0}
.kompetenzen div{display:flex; flex-wrap:wrap;}
.kompetenzen p{display:block; width:calc(25% - 15px); height:180px; margin:0 15px 15px 0; line-height:24px}
.kompetenzen p:nth-child(1),.img_elektroplanung{background: url("../../../images/content/elektroplanung-540x360.jpg") center center; background-size: cover}
.kompetenzen p:nth-child(2),.img_lichtplanung{background: url("../../../images/content/lichtplanung-540x360.jpg") center center; background-size: cover}
.kompetenzen p:nth-child(3),.img_kommunikation{background: url("../../../images/content/kommunikation-540x360.jpg") center center; background-size: cover}
.kompetenzen p:nth-child(4),.img_sicherheitsplanung{background: url("../../../images/content/sicherheitsplanung-540x360.jpg") center center; background-size: cover}
.kompetenzen a{display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:relative}
.kompetenzen a,.kompetenzen a:visited{color:#FFF}
.kompetenzen a:hover{color:#ffe500; background:rgba(0,0,0,0)}
.kompetenzen span{position:absolute; display:block; width:100%; left:0; bottom:20px; text-align:center}

@media (max-width: 1000px) {
  .kompetenzen p{width:calc(50% - 15px)}
}
@media (max-width: 500px) {
  .kompetenzen p{height:100px; width:100%; margin:0 0 15px 0}
}

/* MEMBER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.member{margin-top:40px}
.member > div{display:flex; flex-wrap:wrap;}
.member p{border:solid #000 1px; margin:0 15px 15px 0; width:calc(25% - 15px); display:flex; align-items:center; justify-content:center; box-sizing:border-box}
.member a{display:block; width:100%; height:100%; padding:15px; box-sizing:border-box; line-height:0}
.member img{width:100%; height:auto}

@media (max-width: 500px) {
  .member p{width:calc(33% - 15px);}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{display:flex; flex-wrap:wrap; width:100%; margin-top:40px}
.team > div{width:calc(33.3% - 30px); padding:15px; box-sizing:border-box; margin:0 30px 30px 0; background:#ddd}
.team img{width:100%; height:auto}
.team figure{margin:0}
.team p{font-size:18px; line-height:26px; margin:0}
.team p:first-child{font-size:20px; font-family: 'ubuntobold', sans-serif; font-weight: 700; margin:10px 0}
.team p:last-child a{display:block; margin-top:10px}

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


/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{position:relative; height:200px; border-top:100px solid #FFF; border-bottom:160px solid #FFF}
.contact .content{padding:15px; background:#000; color:#FFF; position:absolute; top:-100px; left:50%; transform:translateX(-50%); height:400px; box-sizing:border-box; display:flex; flex-wrap:wrap}
.contact .content .text{width:66.6%; display:flex; flex-wrap:wrap; justify-content:space-around; align-content: baseline; text-align:center; }
.contact .content .text p:nth-child(1){width:100%; font-size:50px; line-height:60px; font-family: 'ubuntobold', sans-serif; font-weight:700; margin:60px 0}
.contact .content .text img{filter:brightness(0) invert(1); margin-bottom:10px}
.contact .content .text img:hover{filter:brightness(1) invert(0)}
.contact a, .contact a:visited{color:#FFF}
.contact .content .image{width:33.3%; position:relative; background: url("../../../images/content/team-720x480.jpg") center center; background-size: cover;}
.contact .content .image p{display:block; width:100%; height:100%;}
.contact .content .image a{width:100%; height:100%; background:rgba(0,0,0,0.5); display:block}
.contact .content .image a span{padding:10px 20px; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); background:#000;}
.contact .content .image a:hover{background:rgba(0,0,0,0);}
.contact .content .image a:hover span{background:#ffe500; color:#000}

@media (max-width: 1000px) {
  .contact .content .text{width:75%}
  .contact .content .image{width:25%}
}
@media (max-width: 700px) {
  .contact{height:auto; border-top:none; border-bottom:20px solid #FFF}
  .contact .content{position:relative; top:auto; left:auto; transform:none; height:auto;}
  .contact .content .text{width:100%}
  .contact .content .text p:nth-child(1){font-size:30px; line-height:40px; margin:20px 0}
  .contact .content .image{width:100%; height:200px}
}

/* BEST OF
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bestof div{width:100%; display:flex; justify-content:space-around; margin-top:40px}
.bestof a{display:flex; flex-direction: column; align-items:center}
.bestof img{width:60%; height:60%; margin:20%}
.bestof span{display:block; width:160px; height:160px; background:#ffe500; border-radius:50%; margin-bottom:10px}

@media (max-width: 700px) {
  .bestof span{width:80px; height:80px;}
  .bestof p{text-align:center; font-size:16px; line-height:20px; width:80px}
}

/* HEADER-IMAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.headerimage_home{width:100%; height:calc(100vh - 100px); margin-top:100px}
.headerimage_home div{width:100%; height:100%}
.headerimage_home div p{box-sizing:border-box; width:50%; display:block; float:left; margin:0; border-bottom:solid 15px  #FFF}
.headerimage_home div p:nth-child(1){background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; background-size: cover; height:100%; border-right:solid 15px white}
.headerimage_home div p:nth-child(2){background: url("../../../images/header/referenzen-1920x1280.jpg") center center; background-size: cover; height:50%; }
.headerimage_home div p:nth-child(3){background: url("../../../images/header/firma-1920x1280.jpg") center center; background-size: cover; height:50%;}
.headerimage_home div p a{width:100%; height:100%; display:block; position:relative; display:flex; align-items: flex-end; justify-content:center; text-align:center; padding-bottom:60px; box-sizing:border-box; color:#FFF; background:rgba(0,0,0,0.5)}
.headerimage_home div p a:hover{background:rgba(0,0,0,0)}
.headerimage_home div p a span{font-size:30px; line-height:40px;filter:drop-shadow(0 0 5px #000)}

@media (max-width: 700px) {
  .headerimage_home{height:calc(100vh - 160px);margin-top:160px}
  .headerimage_home div p:nth-child(n){width:100%; border-right:none; border-left:none; height:33.3%}
  .headerimage_home div p a{padding-bottom:30px}
}
@media (max-width: 380px) {
  .headerimage_home div p{font-size:16px; line-height:20px;}
  .headerimage_home div p a span{font-size:20px; line-height:30px;}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news span{display:none}
.news > div{padding:40px 15px; text-align:center}
.news a{text-decoration:underline}
.news a:hover{text-decoration:none; color:#000}
.news img{max-width:100%; height:auto}

.news .link{position:absolute; left:30px; top:140px}
.news .link a{padding:10px 20px; background:#ffe500; text-decoration:none}
.news .link a:hover{background:#FFF; color:#000}

#news{height:1px; position:absolute; top:100vh}

@media (max-width: 700px) {
  .news .link{display:none}
}

/* JOBS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jobs h2{padding-bottom:30px}
.jobs h3{padding-bottom:10px}
.jobs ul{margin:0 0 20px 0}

/* STANDORT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header_standort iframe{margin-top:100px; width:100%; height:50vh; border:none}
.header_standort p{margin:0}

/* HEADERIMAGE Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.headerimage_content{width:100%; height:100vh; position:relative; background:rgba(0,0,0,0.5)}
.headerimage_content h1{position:absolute; left:50%; top:calc(50% + 100px); transform:translate(-50%,-50%)}
.headerimage_content h1{animation-duration: 6s; animation-name: title; animation-iteration-count:infinite; animation-direction:alternate;animation-timing-function: linear; box-sizing:border-box}
@keyframes title {
	0%{padding:0 60px 0 0}
	100%{padding:0 0 0 60px}
}
.bg_kompetenzen:after{background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; position:fixed;}
.bg_referenzen:after{background: url("../../../images/header/referenzen-1920x1280.jpg") center center; position:fixed;}
.bg_oeffentliche-bauten:after{background: url("../../../images/header/oeffentliche-bauten-1920x1280.jpg") center center; position:fixed;}
.bg_schulen:after{background: url("../../../images/header/schulen-1920x1280.jpg") center center; position:fixed;}
.bg_gewerbe:after{background: url("../../../images/header/gewerbe-1920x1280.jpg") center center; position:fixed;}
.bg_wohnbauten:after{background: url("../../../images/header/wohnbauten-1920x1280.jpg") center center; position:fixed;}
.bg_firma:after{background: url("../../../images/header/firma-1920x1280.jpg") center center; position:fixed;}
.bg_team:after{background: url("../../../images/header/team-1920x1280.jpg") center center; position:fixed;}
.bg_jobs:after{background: url("../../../images/header/jobs-1920x1280.jpg") center center; position:fixed;}
.bg_impressum:after{background: url("../../../images/header/impressum-1920x1280.jpg") center center; position:fixed;}
.bg_datenschutz:after{background: url("../../../images/header/impressum-1920x1280.jpg") center center; position:fixed;}
.bg_image:after{
content: "";
top: 0;
height: 100vh;
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;
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:29px; left:29px; 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-family: 'ubuntobold', sans-serif; font-weight: 700}
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:#ccc}
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;}

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

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 19px 7px; position: relative; border-radius:9px; z-index:2; background:#FFF}
nav .menu-icon:hover{background:#ffe500}
nav .menu-icon .navicon {  background: #000;  display: block;  height: 5px;  position: relative;  transition: background .2s ease-out;  width: 30px;}
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.8)}
nav .menu-btn:checked ~ .menu-icon {background:#666}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #000; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #000; 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:19px}
  nav > ul {width:100%;}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer p{margin:0}
footer a, footer a:visited{color:#FFF}
footer a:hover{color:#ffe500}
footer p:nth-child(1) a:nth-child(1){margin-right:30px}
footer p:last-child{font-size:15px}

footer div{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; width:100%; height:100px; padding:15px; box-sizing:border-box;}



/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {font-family: 'ubuntobold'; 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: 'ubuntolight'; src: url('../fonts/Ubuntu-Light.woff2') format('woff2'), url('../fonts/Ubuntu-Light.woff') format('woff'); font-weight: normal; font-style: normal;}

html {font-size: 62.5%;}
body {font-size: 20px; line-height: 30px; font-weight: 300; font-family: 'ubuntolight', sans-serif;  color: #000; background:#FFF}
a, a:visited{color: #000;text-decoration: none}
a:hover{color:#ffe500}
strong {font-family: 'ubuntobold', sans-serif; font-weight: 700}

.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
.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;}

p{margin:0 0 20px 0}
h1, h2, h3{font-family: 'ubuntobold', sans-serif;}
h1{font-size:80px; line-height:100px; font-family: 'ubuntobold', sans-serif; margin:0; color:#FFF; text-align:center; width:100%}
h1 a,h1 a:visited{color:#FFF}
.h1_home,h2,.standort h1{font-size:50px; line-height:60px; margin:0; padding:0 0 20px 0; color:#000; text-align:left}
h3{font-size:30px; line-height:40px; margin:0; padding:0 0 20px 0; color:#000}

@media (max-width: 700px) {
  h1{font-size:40px; line-height:50px}
  .h1_home,h2,.standort h1{font-size:30px; line-height:40px;}
  h3{font-size:20px; line-height:30px;}
}


.bg_white{background:#FFF}
.bg_black{background:#000}
.bg_yellow{background:#ffe500}


/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{width:100%; max-width:1024px; margin:0 auto; padding:50px 15px; box-sizing:border-box;}
.content{width:100%; max-width:1024px; margin:0 auto; box-sizing:border-box}


/* 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; font-weight:700}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}