/* CSS Document 
Theme Name: Hauschild Kreativ
Author: EDB
Version: 1.0
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {    font-family: 'Lato';
    src: url('fonts/Lato-Regular.woff2') format('woff2'),
        url('fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('fonts/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Bold.woff2') format('woff2'),
        url('fonts/RobotoCondensed-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'Lato';
    src: url('fonts/Lato-Bold.woff2') format('woff2'),
        url('fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;}

html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Lato'; font-size:15px; font-weight: 400; color: #363636;  width: 100%; background: #fff; font-variant-ligatures: none; }
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: left;}
.text-left{text-align: left;}
.clear{clear: both;}
figure{width: 100%; height: auto; position: relative; display: inline-block; text-align: center;}
strong{font-weight: 700;}
p{margin-bottom: 15px; line-height: 1.4em;}
a{cursor: pointer; text-decoration: none;}
h1{font-family: 'Lato'; color: #6a6b6a; font-weight: 700; font-size: 1.3em; position: relative; margin-bottom: 30px; display: inline-block; clear: both;}
h1::after{content: ""; background:url(images/h1_after.png) no-repeat right center; background-size: contain;  position: absolute; right: -30px; width: 21px; height: 21px;}
h2{font-family: 'Lato'; color: #6a6b6a; font-weight: 700; font-size: 1.2em; position: relative; margin: 30px 0;}
h3{font-family: 'Lato'; color: #6a6b6a; font-weight: 700; margin-bottom: 30px; font-size: 1.2em;}
.grau h3{font-family: 'Lato'; color: #fff; font-weight: 700; margin-bottom: 30px; font-size: 1.2em;}
h4{font-family: 'Lato'; color: #6a6b6a; font-weight: 700; font-size: 1.2em; margin-bottom: 40px; display: inline-block; clear: both; position: relative;}
.grau h4{font-family: 'Lato'; color: #fff; font-weight: 700; font-size: 1.2em; margin-bottom: 40px; display: inline-block; clear: both; position: relative;}
h4::after{content: ""; background:url(images/h4_after.png) no-repeat right center; background-size: contain;  position: absolute; right: -30px; width: 23px; height: 23px;}
h5{font-family: 'Lato';}
h6{font-family: 'Lato'; color: #989898; font-weight: 400; font-size: 0.8em;}
.row, main, .footer-widget{width: 100%; margin: 0 auto; padding: 0 10px; position: relative;}

/* HEADER */
header{padding-top: 20px;}
header .header-container{width: 100%; height: auto; position: relative; display: inline-block;}
header .logo{width: 30%; height: auto; display: inline-block; float: left;}
header .logo img{width: 100%; height: auto;}
.headimage {width: 100%; height: 170px; background-size: cover; background-position: center; position: relative; margin-bottom: 70px;}

.slogan{background:rgba(105,105,105,0.8); color: #fff; display: inline-block; position: absolute; bottom: 10px;right: 15px; font-size: 1.0em; padding: 15px; width: 50%;font-family: 'Roboto Condensed'; font-weight: 700; text-align: center;}


/* BILDWECHSEL */
header #slider.flexslider {  position: relative;  overflow: hidden; background: none; border: none;}
header #slider.flexslider::before,header .flexslider::after {  content: "";  position: absolute;  width: 100%;  height: 20%;  background: white;  z-index: 1;}
header #slider.flexslider::before {  top: 0;  transform: skewY(-2deg); transform-origin: top left;}
header #slider.flexslider::after {  bottom: 0;  transform: skewY(-2deg); transform-origin: bottom right;}
header #slider.flexslider .slides {  list-style: none;  margin: 0;  padding: 0;  position: relative;  overflow: hidden;}
header #slider.flexslider .slides li {  position: relative;  width: 100%; height: 250px; background-size: cover;  background-repeat: no-repeat;  background-position: center center;  z-index: 2; }

header #carousel.flexslider {  text-align: right;  margin: -120px 0 40px 0; background: none; border: none; z-index: 10; width: 100%;}
header #carousel.flexslider ul.slides {  list-style: none;  margin: 0;  padding: 0; display: inline-block; text-align: right; width: auto !important; height: 70px;}
header #carousel.flexslider ul li {  display: block;  margin-right: 10px;  width: 70px !important;   height: 50px !important;  border: 2px solid transparent; cursor: pointer;}
header #carousel.flexslider ul li:hover, header #carousel.flexslider ul li.flex-active-slide  {  border-color: #fff; }

/* NAVIGATION */
nav.main-navigation{display: none; font-family: 'Roboto Condensed'; color: #6c6667; font-weight: 400;}
header .mobil-nav ul{list-style: none;}
header .mobil-nav ul li a {font-family: 'Roboto Condensed'; color: #1e1e1e; font-weight: 400;}
header .mobil-nav {  display: none; position: fixed;  top: 10px;  right: -100%;  width: 80%;  height: 100%;  background-color: #ebeaea;	padding: 30px 0px 10px 0px;	z-index: 9991;  transition: left 0.3s ease, opacity 0.3s ease;  opacity: 0;}
header .mobil-nav.active {  right: 0;display: inherit;	opacity: 1;}
header .mobil-nav ul li a{	padding: 7px 20px;	width: 100%;	height: auto;	display: inline-block;}	
header .mobil-nav ul li:hover a{	background: #fff;	color: #6a6b6a;}
header .mobil-nav ul li.menu-item-has-children li a, header .mobil-nav ul.submenu li:hover a{color: #6a6b6a;}
header .mobil-nav ul > li.current_page_item a, header .mobil-nav ul li.current-page-parent{color: #6a6b6a;}
header .mobil-nav ul li ul.sub-menu li.current-menu-item a {color: #6a6b6a;}	
header .hamburger {  display: block;  position: fixed;  top: 20px;  right: 20px;  cursor: pointer;  z-index: 9999;	color: #696969;	font-weight: bold;}
header .close-icon {  display: none;  position: fixed;  top: 20px;  right: 20px;  cursor: pointer;  z-index: 9999; color: #696969;}
header .mobil-nav.active .hamburger {  display: none;}
header .mobil-nav.active .close-icon {  display: block;	color: #696969;}
.mobil-menu .menu-item-has-children > a::after {  content: '+';  float: right;color: #696969;	font-weight: bold;}
.mobil-menu .menu-item-has-children.active > a::after {  content: '-';	color: #696969;	font-weight: bold;}
.mobil-menu .sub-menu {  display: none;  opacity: 0;  transition: opacity 0.3s ease; }
.mobil-menu .menu-item-has-children.active > .sub-menu {  display: block;  opacity: 1; }

/* CONTENT */

.wrap{width: 100%; height: auto; position: relative; clear: both;}

main{padding: 0 20px 60px 20px;}
main a{color: #777;}
main a:hover{font-weight: 700;}
main ul{margin-left: 15px; margin-bottom: 10px;}

main .grau{width: 100%; height: auto; display: inline-block; background: #b4b4b4; padding: 20px 5px; margin-bottom: 50px;}
main ul{list-style: square; margin-left: 15px;}
main ul li{ padding-left: 0px; min-height: 20px; margin-bottom: 10px; font-size: 1.0em;}
.grau main ul{list-style: none; margin-left: 0;}
.grau main ul li{background:url(images/list-icon.png) no-repeat left center; padding-left: 30px; min-height: 20px; margin-bottom: 10px; font-size: 1.1em;}



figure.wp-block-image{position: relative; display: block; height: auto; width: auto; overflow: visible;}
.image-wrap{position: relative; display: block; height: auto; width: auto;}
.image-wrap::before {    top: 10px;    right: 10px;    bottom: -10px;    left: -10px;    border-top: 3px solid #b4b4b4;    border-bottom: 3px solid #b4b4b4; position: absolute;    content: '';    opacity: 1; z-index: 1;}
.image-wrap::after {    top: 10px;    right: 10px;    bottom: -10px;    left: -10px;    border-right: 3px solid #b4b4b4;    border-left: 3px solid #b4b4b4; position: absolute;    content: '';    opacity: 1;}
/*figure.wp-block-image img{position: relative; display: block; height: auto; width: auto;} */
figure.wp-block-image::after{content:""; position: absolute; background: url(images/image_overlay.png) no-repeat; width: 41px; height: 41px; display: block; bottom: -34px; left: -34px; z-index: 2;}
main .grau figure.wp-block-image img::before, main .grau figure.wp-block-image img::after, main .grau figure.wp-block-image::after{display: none;}

article.col-25{width: 48%; margin: 0 1% 10px 1%; float: left;}
article figure{width: 100%; height: 200px; overflow: hidden; display: block; position: relative;}
article figure span{width: 100%; height: auto; display: inline-block; background: #b4b4b4; padding: 5px 10px; font-weight: 700; text-align: center;color: #1e1e1e; position: relative;}
article figure a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
article figure img{min-width: 100%; min-height: 100%; height: auto; width: auto;}

main.single figure.wp-block-image::after{display: none;}
main.single .return{margin-top: 30px;}
main.single .return a{color: #fff; background: #1e1e1e; display: inline-block; padding: 10px 20px; font-weight: 700;}

/* FOOTER */
footer{color: #fff; display: inline-block; width: 100%; height: auto; background: url(images/footer_bg.png) #414141 no-repeat bottom right; padding: 40px 0;}
footer h4{color: #f2f2f2;}
footer table{text-align: left;}
.wp-block-table td{border: 0 !important; padding: 7px 0 !important;}
footer table a{color: #b4b4b4;}
footer nav{padding: 20px 5px;}
footer nav ul{list-style: none;}
footer nav li{padding: 7px 0;}
footer nav li a{color: #fff;}
footer nav ul li a{float: none; padding: 3px 5px; display: block; background:url(images/foot-nav_normal.png) no-repeat left center; padding-left: 15px}
footer nav ul li.current_page_item a, footer nav ul li:hover a{color: #b4b4b4; background:url(images/foot-nav_active.png) no-repeat left center;}

/* FORMULAR */
form{margin-top: 30px;}
form fieldset.daten {width: 49%; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; float: left; margin-right: 1%;}
form fieldset legend {width: 100%; clear: both; margin-bottom: 20px; font-size: 1.15em; color: #333; font-weight: 600;}
form fieldset.full {float: left; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; margin-right: 1%; width: 100%;}
form fieldset.full label{float: left; margin-right: 30px;}
form fieldset.daten span.data{width: auto; display: block; float: left; margin-right: 10px; min-width: 110px;}
form fieldset.daten span.wpcf7-form-control-wrap input, form fieldset.full span.wpcf7-form-control-wrap input{width: 250px;}

form fieldset.full textarea{width: 90%;}
form input.send{display: inline-block; padding: 10px 20px; background: #333; color: #fff; border: none; font-size: 1.1em; font-weight: 600;}
form p.hinweis{margin: 20px 0 50px 0;}
form .wpcf7-form-control.wpcf7-radio{padding: 20px 0; display: inline-block;}
form .wpcf7-form-control.wpcf7-radio span.first{margin-left: 0;}

form fieldset.daten span.wpcf7-form-control-wrap input[type="radio"], form fieldset.daten span.wpcf7-form-control-wrap input[type="checkbox"], form fieldset.full span.wpcf7-form-control-wrap input[type="checkbox"], form fieldset.full span.wpcf7-form-control-wrap input[type="radio"]{width: 40px;}
.wpcf7-form-control-wrap {    position: relative;    margin-left: 20px;}

@media screen and (min-width: 550px){
.slogan{font-size: 1.1em; padding: 15px; width: 50%;}
}

@media screen and (min-width: 700px){
header .mobil-nav, header .hamburger, header .close-icon {  display: none;}
header #slider.flexslider .slides li {height: 350px;}
header #carousel.flexslider { margin: -150px 0 40px 0;}
header #carousel.flexslider ul li {  width: 80px !important;   height: 60px !important;}
.slogan{font-size: 1.3em; padding: 25px; width: auto; height: auto; display: inline-block; right: 30px;}
.slogan::before{content: ""; position: absolute; background:url(images/highlight-before.png) no-repeat; width: 41px; height: 41px; top: -16px; left: -16px;}
.slogan::after{content: ""; position: absolute; background:url(images/highlight-after.png) no-repeat; width: 77px; height: 25px; bottom: 0; right: -21px;}
	
nav.main-navigation{width: 70%; display: block; float: left; padding: 40px 0 0 25px;}
nav.main-navigation ul{width: 100%; display: inline-block; position:relative; height:auto;}
nav.main-navigation ul li{ float: left; display: inline-block;  position: relative;}
nav.main-navigation ul li a{font-family: 'Roboto Condensed'; color: #1e1e1e; font-weight: 400; font-size: 1.25em; padding: 50px 10px 0 10px; display: inline-block;}
nav.main-navigation ul li.current_page_item a, nav.main-navigation ul li.current_page_parent a, nav.main-navigation ul li:hover a{color: #6a6b6a; background:url(images/nav-active.png) no-repeat top center;}
.text-right{text-align: right;}
header .logo img{width: 100%; height: auto; max-width: 204px;}
main{width: 100%; float: left; padding: 0 10px 0 0;}
main .grau .wp-block-columns{flex-wrap:nowrap !important; padding: 20px;}
main .grau .wp-block-column:first-child{width: 48% !important; float: left !important; margin-right: 2% !important;}
main .grau .wp-block-column:last-child{width: 48% !important; float: left !important; margin-left: 2% !important;}
article.col-25{width: 31%; margin: 0 1% 10px 1%; float: left;}
footer .col-50:first-child{width: 48%; float: left; margin-right: 2%;}
footer .col-50:last-child{width: 48%; float: left; margin-left: 2%;}
footer nav ul li a{float: none; padding: 3px 5px; display: block; background:url(images/foot-nav_normal.png) no-repeat left center; padding-left: 15px}
footer nav ul li.current_page_item a, footer nav ul li:hover a{color: #b4b4b4; background:url(images/foot-nav_active.png) no-repeat left center;}
}
@media screen and (min-width: 1000px){
header .logo{width: 45%;}
header #slider.flexslider .slides li {height: 450px;}
header #carousel.flexslider { margin: -170px 0 40px 0;}
header #carousel.flexslider ul li {  width: 90px !important;   height: 70px !important;}
.slogan{font-size: 2.5em; padding: 25px; width: 442px; height: 140px; display: inline-block; right: 30px;}
nav.main-navigation{width: 55%; padding: 50px 30px 0 30px;}
article.col-25{width: 23%; margin: 0 1% 10px 1%; float: left;}
}

@media screen and (min-width: 1220px){
.row, .wp-block-group, main .grau .wp-block-columns{width: 1200px; margin: 0 auto; }
header #carousel.flexslider .flex-viewport{width: 1200px; margin: 0 auto;}
header #slider.flexslider .slides li {height: 500px;}
header #carousel.flexslider { margin: -200px 0 40px 0;}
header #carousel.flexslider ul li {  width: 100px !important;   height: 80px !important;}
.slogan{bottom: 40px;}
main{margin-top: 50px;}
main .grau{width: 100%;}
footer  .wp-block-group{width: auto;}
}

@media screen and (min-width: 1350px){
	header #slider.flexslider .slides li {height: 700px;}
	header #carousel.flexslider { margin: -220px 0 40px 0;}
	header #carousel.flexslider ul li {  width: 110px !important;   height: 80px !important;}
}