/*
Theme Name: Wrocklage Theme
Theme URI: https://www.kp-z.de
Author: Jan Pferdmenges, KP&Z Werbeagentur
Author URI: https:/www.kp-z.de/team/
Description: Custom Theme for Wrocklage Architekten
Version: 1.0
License: Commercial
Text Domain: wrocklage

*/

/* 
Rot:  #993300
Grau: #404040
Grau: #B0B0B0
Grau: #404040
*/

/* work-sans-300 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/fonts/work-sans-v11-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/work-sans-v11-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-500 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/work-sans-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/work-sans-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-700 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/work-sans-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/work-sans-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/*
/* Basis HTML TAGs
*/

body,html {margin: 0; padding: 0; min-height: 100%; font-family: 'Work Sans', sans-serif; font-weight:300; font-size:16px; line-height: 1.6em; color: #666;}
section {padding: 75px 0; background: white;}
h2, h1 {color: #993300; font-size: 1.6rem; font-weight: 500; text-transform: lowercase; line-height: 1.1em; margin-top: 4rem; margin-bottom: 2rem; position: relative;}
section h1:first-child, section h2:first-child {margin-top: 0;}
h3 {color: #993300; font-size: 1.2rem; font-weight: 600;}
h4 {color: #404040; font-size: 1rem; font-weight: 700;}
section ul {list-style: none;}
section li {position: relative;}
section li::before {content: ' '; position: absolute; display: block; width: 12px; height: 12px; background-color: #993300; top:6px; left:-25px; }
/*
/* Allgemeine Klasse
*/

.desktop {display: none;}
.fett {font-weight: 700;}
.burgerMenu {display: block;}
.notBurgerMenu {display:none;}
.noOpacity {opacity: 0; min-height: 100vh;}
button.btn:focus {box-shadow: none; }
.fullWidth, .fullWidth img {width: 100%; height: auto;}
.vita:not(:last-child) {margin-bottom: 1.25rem;}
.copyright {margin-top: 80px; font-size: 14px; color: #a0a0a0; position: relative; padding-top: 10px;}
.copyright::before {content: ""; position: absolute; top:0; left:0; display: block; width: 100px; border-top: 1px solid #a0a0a0;}


/*
/* Links
*/

a {font-weight: 700; color: #404040;}
a.link:hover, a.email:hover, a.telefon:hover {-webkit-text-decoration-style: dotted;text-decoration-style: dotted;}



/*
/* Kopfzeile & Kopfnavigation
*/

header {padding-top: 25px; height: 125px;}


#MetaMenu {font-size: 14px; color: #b0b0b0;}



.logoName {font-weight: 700; font-size: 16px; text-align: right;}
#Quadrat  { width: 100%;position: relative; }
#Quadrat img {width:100%; height: auto; position: absolute; z-index: 99; display: block; border: 1px solid white;}

#Burger {display: block; position: relative;}
#Burger img {width:32px; height: auto; transition-duration: 300ms;}

ul.metaMenu {padding:0; margin:0; list-style: none;}
ul.metaMenu > li {display: inline-block;}
ul.metaMenu > li:not(:first-child)::before {content: "| "; display: inline-block; padding: 0 10px;}
ul.metaMenu > li > a {color:#d0d0d0; font-weight: 500; text-decoration: none;}
ul.metaMenu > li > a:hover {color:#993300; }
ul.metaMenu > li.current-menu-item > a {color:#993300; }

ul.primaryMenu {padding:0; margin:0; list-style: none;padding-top: 30px;}
ul.primaryMenu > li {display: inline-block; }
ul.primaryMenu > li:not(:first-child) {margin-left: 20px;}
ul.primaryMenu > li > a {color:#404040; font-weight: 300; text-decoration: none; text-transform: lowercase;display: inline-block; padding-bottom: 5px; border-bottom: 7px solid transparent;}
ul.primaryMenu > li > a:hover {border-bottom-color: #993300; }
ul.primaryMenu > li.current-menu-item:not(.menu_item_projekte) > a {color:#993300; }
.projektAnsicht ul.primaryMenu > li.menu_item_projekte > a {color:#993300; }
.schluesselfertigAnsicht ul.primaryMenu > li.menu_item_schluesselfertig > a {color:#993300; }
.stellenangebot ul.primaryMenu > li.menu_item_stellenangebot > a {color:#993300; }

#MobileMenu {position:fixed; z-index: 1; background-color: white; display: flex; flex-direction: column; top: 100px; bottom: 0; justify-content: space-between; width: 100%; left:0; transform: translateX(-100%); transition-duration: 300ms}
#MobileMenu .metaMenu {padding: 15px 0; align-self: center; font-size: 0.85rem;}
#MobileMenu .primaryMenu {padding: 15px 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center}
#MobileMenu .primaryMenu > li:not(:first-child) {margin-left: 0;}

#MenuCheckbox {display: none;}
#MenuCheckbox:checked ~ #Burger > img {transform: rotate(90deg);}
#MenuCheckbox:checked ~ #MobileMenu {transform: translateX(0);}
/*
** SLIDER, Headerbild
*/

#Slider {width:100%; max-height: 70vw; min-height: 30vw; height: 40vh;overflow: hidden;}
#Slider	.carousel-inner {width:100%; height: 100%; }
#Slider	.carousel-item {width:100%; height: 100%; background-color: #e0e0e0; background-size: cover; background-position: center center;}

#Slider .carousel-control-next {justify-content: flex-end; opacity: 0;} 
#Slider .carousel-control-prev {justify-content: flex-start; opacity: 0;}
#Slider .carousel-control-next:hover, #Slider .carousel-control-prev:hover {opacity: 1;}

#Headerbild {width: 100%; max-height: 70vw; min-height: 30vw; height: 40vh; }
#Headerbild img {width: 100%; height: 100%; object-fit: cover;}

#Headerblock {height: 50px;}

div.sideflags {position: relative;}
div.sideflags > ul {padding: 0; margin:0;  list-style: none; position: absolute; right:0px; bottom: 0; width: 1000px;}
div.sideflags > ul > li {padding: 1px 10px; text-align: right; display: block; background-color: #b0b0b0; color: white; margin-top: 8px; font-size: 0.8rem;}

.btn.sideIcon {padding: 0.25rem 0; display: block; }
/*
** Projektübersicht
*/

#Projekte .projektMenu  {}
#Projekte .projektMenu > div {background-color:#993300; color: white; padding: 15px;}
#Projekte .projektMenu a {padding-left: 30px; color: white; display: block; font-weight: 300;text-decoration: none; text-transform: lowercase; position: relative;}
#Projekte .projektMenu a:not(:first-child) {margin-top: 15px;}
#Projekte .projektMenu a.selected::before {content: " "; width: 20px; height: 20px; background-color: white; position: absolute; left: 0px;}

#Projektanzeige {margin-top: 30px; transition-duration: 300ms;}
#Projektanzeige img {object-fit: cover;}
#Projektanzeige a {font-size: 0.85rem; text-decoration:none; display: block;}
#Projektanzeige .topProjekt img {width: 100%; height: auto;}
#Projektanzeige .topProjekt > div:first-child > a > p {font-weight: 300; line-height: 1.5em;}
#Projektanzeige .topProjekt > div:first-child > a > *:last-child {margin-bottom: 0;}
#Projektanzeige .weitereProjekte {margin-top: 15px; }
#Projektanzeige .weitereProjekte > div {margin-top: 15px; }
#Projektanzeige .weitereProjekte img {width: 100%; height: auto;}
#Projektanzeige .weitereProjekte a {font-weight: 500;}



/*
** Projektseite
*/

.projektAnsicht section img {width:100%; height: auto;}
.projektDaten {display: flex; margin-bottom: 50px; flex-wrap: wrap;}
.projektDaten > div {padding-right: 50px; margin-bottom: 30px;}
.projektDaten > div h6 {margin-bottom: 0; font-size: 0.85rem;}



/*
** FOOTER
*/

footer {position: relative; margin-top: 100px;}
footer .footerBlock {background-color: transparent; color: white; font-size: 0.85rem;}
footer .footerBlock > div {background-color: #993300; padding: 30px; height: 100%; }
footer .greyBlock {position: absolute; left:0; bottom:0; height: 60%; width: 100%; background-color: #b0b0b0; z-index: -1;}
footer a {color: white; text-decoration: none; font-weight: 300; transition-duration: 300ms;}
footer a:hover {color: white; text-decoration: underline; }
footer nav > ul  {padding-left: 30px; text-transform: lowercase; }
footer nav > ul > li {display: block; position: relative;}
footer nav > ul > li::before {content: ' '; position: absolute; width: 16px; height: 16px; top:4px; left: -30px; background-color: white; display: none; }
footer nav > ul > li:not(:last-child) {margin-bottom: 10px;}
footer nav > ul > li.current-menu-item::before {display: block; }
footer nav > ul > li.current-menu-item.menu_item_projekte::before {display: none; }
.projektAnsicht footer nav > ul > li.menu_item_projekte::before {display: block;} 
.stellenangebot footer nav > ul > li.menu_item_stellenangebot::before {display: block;} 


footer div.icon {position: relative; padding-left: 30px; margin-bottom: 10px;}
footer div.icon img.icon {position: absolute; left:0; top:3px;}
footer div.adresse {margin-bottom: 30px;}



/*
** Mitarbeiter/Team
*/

.mitarbeiterAnsicht {background-color: #b0b0b0; margin-bottom: 30px; transition-duration: 300ms;}
.mitarbeiterAnsicht:hover {background-color: #993300; color: white; transform: scale(1.05);}
.mitarbeiterAnsicht:hover h3 {color: white; }
.mitarbeiterAnsicht img {width: 100%; height: auto; display: block;}
.mitarbeiterAnsicht figure {margin-bottom: 0;}

.mitarbeiterListe {justify-content: center;}


/*
**		Kontaktformular
*/

.inputFeld {margin-bottom: 20px; position: relative; border-bottom: 1px solid #404040; padding: 8px 0px 0 0px;}
.inputFeld.activeInput {border-bottom-color:  #993300;}
.inputFeld label {position:absolute; top: 10px; color: #b0b0b0; left: 1px; transition-duration: 300ms; font-weight: 500;}
.inputFeld.filled label {position:absolute; top: -8px; font-size: 13px;}
.inputFeld input, .inputFeld textarea {width: 100%; outline: none; font-family: 'Work Sans', sans-serif; border: none; color: #404040; padding-bottom: 0;}
.inputFeld.activeInput input, .inputFeld.activeInput textarea {color: #993300;}
.inputFeld textarea {height: 150px;}
.inputFeld.pflichtangabe label::after {content:'*';}
.checkbox {margin-bottom: 20px;}

.checkbox label {padding-left: 30px; position: relative;}
.checkbox label::before {content: url("img/checkboxOff.png"); position: absolute; left: 0; top: 2px;}
.checkbox input {display: none;}
.checkbox input:checked ~ label::before {content: url("img/checkboxOn.png");}

input[type=submit] {border-radius: 5px; background-color: transparent; border: 1px solid #404040; font-family: 'Hind', sans-serif; display: inline-block; color: #993300; padding: 2px 15px 0 15px; transition-duration: 300ms;}
input[type=submit]:hover {background-color: #993300; border-color: #993300; color: white; transform: translateY(-2px);}

.errorBox {background-color: #993300; color: white; padding: 15px; margin-bottom: 20px; border-radius: 15px;}
.infoBox {color: #993300; padding: 15px; margin-bottom: 20px; border: 1px solid #993300;border-radius: 15px;}
.error {padding-left: 40px; color: #993300; position: relative; padding-top: 3px; margin-top:30px;}
.error::before {content: url("img/fehler.png"); position: absolute; left:0;top:0;}

/*
** Cookie Banner
*/

#JhpCookieBanner {padding: 15px; display: flex; position: fixed; bottom:0; width: 100%; transition-duration: 500ms; transform: translateY(100%); background-color: #993300; border-top: 3px solid white; color: white; align-items: center; flex-direction: column;}
#JhpCookieBanner.active {transform: translateY(0); }
#JhpCookieBanner a {color: white; font-weight: 500;}
#JhpCookieBanner > div {padding: 15px;}
#JhpCookieBanner .cookieButton {display: inline-block; padding: 5px 20px; background-color: orange; border-radius: 15px; font-weight: 500; cursor: pointer; transition-duration: 300ms;}
#JhpCookieBanner .cookieButton:hover {background-color: darkorange;transform: scale(110%);}



/*
** Stellenangebot / Karriere
*/


.offeneStellen > li {margin-bottom: 15px;}

.stellenangebot h1, .stellenangebot h2 {font-weight: 700; margin-top: 2rem;}


/*
** FOOTER
*/





/* Kleine Geräte (Tablets, 576px und breiter) */
@media (min-width: 576px) { 
    #Projektanzeige .weitereProjekte img {height: 164px;}
    #JhpCookieBanner {flex-direction: row;}
}

/* Kleine Geräte (Tablets, 768px und breiter) */
@media (min-width: 768px) { 
    html, body {font-size: 18px;}
    h1::before, h2::before {content: " "; width: 33px; height: 33px; background-color: #993300; position: absolute; left: -60px; } 
    #Projektanzeige .weitereProjekte img {height: 150px;}
    section li::before { width: 13px; height: 13px; top:7px;; }
    #Headerblock {height: 150px;}
    footer nav > ul > li.current-menu-item::before { width: 18px; height: 18px; top:5px;  }

}

/* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
@media (min-width: 992px) { 

    .desktop {display: block;}
    .mobile {display: none;}
    h1::before, h2::before { width: 53px; height: 53px; left: -80px; } 
    #Slider, #Headerbild {height: calc(100vh - 200px); max-height: 500px; }
    #Projekte .projektMenu{ position: relative;}
    #Projekte .projektMenu > div {width: 100%; min-height: 240px; position: absolute;}
    #Projektanzeige {margin-top: 100px;}
    #Projektanzeige .weitereProjekte img {height: 142px;}
    div.sideflags > ul {right:-20px; }

}
@media (min-width: 1080px) { 
    div.sideflags > ul {right: 0px; }
}

/* Große Geräte (Desktop-PCs, 1200px und breiter) */
@media (min-width: 1200px) { 
	.logoName {font-size: 24px;}
	.burgerMenu {display: none!important;}
	.notBurgerMenu {display:block;}
    h1::before, h2::before { width: 68px; height: 68px; left: -95px; } 
    #Projekte .projektMenu > div {min-height: 285px; padding: 30px 15px;}
    #Projekte .projektMenu a:not(:first-child) {margin-top: 20px;}
    #Projektanzeige .weitereProjekte img {height: 170px;}
    #Slider, #Headerbild {max-height: 750px; }
    #Headerblock {height: 200px;}

}

/* Große Geräte (Desktop-PCs, 1400px und breiter) */
@media (min-width: 1400px) { 
    h1::before, h2::before { width: 83px; height: 83px; left: -110px; } 
    #Projekte .projektMenu > div {min-height: 330px;}
    #Projekte .projektMenu a:not(:first-child) {margin-top: 30px;}
    #Projektanzeige .weitereProjekte img {height: 201px;}
    footer > div > div.row {min-height: 410px;}
    #Slider, #Headerbild {max-height: unset; }
    #Headerblock {height: 250px;}
}