﻿/* CSS Document - */

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face { 
    font-family: 'Lato';
    src: url('fonts/lato-light-webfont.woff2') format('woff2'),
         url('fonts/lato-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/lato-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Fontawesome';
    src: url('fonts/fa-regular-400.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


*{margin:0;padding:0; border:0; box-sizing: border-box;}
a{text-decoration:none; color:#444;}
img{border:none !important; border-radius:0 !important; max-width:100%; height:auto; max-height:600px; width:auto;}
ul{list-style-type:none;}
html, body{height:100%}
body{font-family:'Lato', sans-serif; font-size:16px; color:#444; background-color:#eee; font-weight:300; line-height:150%;}

.clear{clear:both; float:none;}

/*------------------------------------------ LAYOUT --------------------------------------------*/
#wrapper{width:100%; max-width:1200px; margin:auto; position:relative; padding:0 20px;}

header {padding-top:30px; position:relative;}
#logo img{ width:200px; height:auto;}

nav{ margin-top:40px;}
nav li{display: inline-block; margin:0 30px 0 0; position:relative;}
nav li ul{position:absolute; background-color:#eee; top:32px; z-index: 9999999; display:none; padding:10px 20px; }
/*nav li:nth-child(2) ul {column-count:2;}*/
/*nav li:hover ul{display:block;}*/
nav li li{ margin: 0 0 6px; white-space: nowrap; display: block;}

#nav-button{display:none;position:absolute; top:20px; right:0; cursor:pointer;}

main {margin-top:30px; min-height:400px; padding-bottom:40px; width:100%;}

@media screen and (max-width:700px){
	header {padding-top:20px; }
	header nav{display:none; float:none; position:absolute; top:25px; right:0;  z-index: 9999999; box-shadow: -1px 1px 1px #ccc; max-width:100%;}
	header nav ul{background:#fff;padding:10px 20px; }
	
	#bg-color{right:80px; display:none;}
		
	#nav-button{display:block;}	
	header nav li{display:block; margin:0px 0 10px 0; }
	nav li ul{position:static; padding:10px 0 0 10px; border:none;}
	header nav li li {padding:0;}
}

.flexslider{margin-bottom: 20px !important; border:0px !important;}
.flexslider-p{margin-bottom: 0 !important; border:0px !important;  }
.content-box {padding:30px 40px 20px; border-radius: 0 0 20px 0; background-color: #fff;}
.pr-flexcontainer{display:flex; justify-content:space-between; align-items: flex-start;}
.pr-descr { padding-right:80px;}
.pr-data{width:35%;}
.pr-data td:first-child{width:70px;}
.pr-data td:last-child{width:auto;}
.wb-data{width:auto;}
.wb-data td:first-child{width:180px;}
.wb-data td:last-child{width:auto;}
.pr-data td, .wb-data td{padding-bottom:10px;}

@media screen and (max-width:800px){
   .content-box{padding:30px 20px 20px;}
}

.m-box{border-radius: 0 0 20px 0; background-color: #fff;}


.wp-caption{max-width:100%;}
.wp-caption-text{font-size:14px; line-height: 14px; padding-bottom:10px;}
.m-box img {width:100%; height:auto; display:block;}
.m-box .excerpt {padding:10px 12px 0 18px; }

.arrow-box{text-align:right; padding: 0 5px 7px 3px; margin-top:-5px;}
/* schräg gedrehte Div-Box fungiert als Pfeil: */
.arrow-box div{display: inline-block; text-align:right; width:15px; height:15px; border-right:solid 1px #000; border-bottom :solid 1px #000;  }
.arrow-more{transform: rotate(-45deg); margin: 0 7px 0 0;}
.arrow-back{transform: rotate(135deg);}

.page .m-box, .error404 .m-box {padding: 30px 40px;}
.home.page .m-box {padding: 0;}

@media screen and (max-width:800px){
  .page .m-box {padding: 20px;}
}

.flexcontainer, .cat-flexcontainer{display:flex; justify-content:space-between; gap:15px; align-items: flex-start; width:100%; flex-wrap: wrap;}
.flexcontainer .m-box {margin-bottom: 20px;}
.col-1-2 {width:calc((100% - 20px) / 2);}
.col-1, .col-2, .col-3, .col-4 {width:calc((100% - 3*20px) / 4); margin-bottom: 20px;}

.kontakt .flexcontainer{flex-wrap: wrap;}
.kontakt .flexcontainer .m-box{width:calc((100% - 20px) / 2); overflow:hidden;}
.kontakt .m-box{padding:20px 20px 15px;}
/*.kontakt-text{ width:100%; column-count:2; height:160px; }*/
.kontakt .flexcontainer .m-box:nth-child(3) { width:100%; background-color: transparent; padding-top:0;}
.kontakt .flexcontainer .m-box:nth-child(3) .kontakt-text{column-count:1; height:auto;}
.kontakt-plan{width:30%; cursor:zoom-in;}
.kontakt-plan img{display:block; width:100%; height:auto;}
.kontakt .sub-plan{padding-top:15px}

.kontakt-google-maps{padding-top:10px;}

.about {padding:0 15px 15px;}
.team-content p{column-count:2;}
	
.masonry.grid{width:100%}
.cat-description.grid-item {padding:20px 15px 20px 20px; background-color:#fff; border-radius: 0 0 20px 0; width:calc((100% - 20px) / 2);}
.grid-sizer, .grid-item{ width:calc((100% - 3*20px) / 4); margin-bottom:20px; }
.gutter-sizer {width:20px;}

@media screen and (max-width:1000px){
    .cat-description.grid-item{width:calc((100% - 40px) / 3 * 2 + 20px); }
    .grid-sizer, .grid-item{width:calc((100% - 2*20px) / 3); }
}
@media screen and (max-width:850px){
    .col-1-2, .col-3, .col-4 {width:calc((100% - 2*20px) / 3);}
	.col-3, .col-4 {margin-bottom: 10px;}
	.grid-sizer, .grid-item{width:calc((100% - 20px) / 2);}
    .cat-description.grid-item{width:100%;}
	.pr-flexcontainer{display:block;}
    .pr-descr { padding-right:0px;}
	.pr-data{width:auto;}
    .kontakt .flexcontainer .m-box {width:100%}
}
@media screen and (max-width:700px){
    .flexcontainer{display:block;}
    .col-1-2, .col-3, .col-4 {width:100%;}
}
@media screen and (max-width:600px){
	.cat-flexcontainer{display:block;}	
	.grid-sizer, .grid-item{width:100%; }
    .kontakt-text td{ display:block; width:100% !important;}
}

/*------------------------------------------ HAUPTNAVIGATION --------------------------------------------*/
nav a {text-transform: uppercase;}
nav ul ul a {text-transform:none;}
li.current-menu-item > a, li.current_page_item > a, li.current-menu-parent > a {font-weight:700;}
nav a:hover{background-color:#eee;} 


/*------------------------------------------ CONTENT --------------------------------------------*/
main{font-size:16px;}
main p, main ul, main table{max-width:800px;}
main p{margin:0 0 15px;}
main table{margin-bottom:8px; border-spacing:0; width:100%;}
main td{padding-right:10px; vertical-align:top; width:50%;}

main ul {list-style-type:circle; margin: 0 0 16px 16px;}

h1{font-size:21px; line-height:120%; font-weight:700; margin-bottom:20px; clear:both;}
h2{font-size:16px; margin:10px 0 10px; font-weight:700; clear:both; text-transform:uppercase;}
h2 .standort{text-transform:none; font-size: 14px;}
p + h2 {margin-top:25px;}
h3{font-size:16px; font-weight:700;margin-bottom:10px;}
.post.m-box h2, .post.m-box p{font-size:15px;}
strong{font-weight:700;}
main a{font-weight:300;}
main a:hover{background-color:#eee;}
main .arrow-box a:hover{background-color:transparent;}
.alignleft {float:left; margin:0 20px 10px 0;}
.alignright {float:right; margin:0 0 10px 20px;}
.wb main td{height:30px; padding-right:20px;}
.wb main td p{margin:0;padding:0;}
.wb main td img{width:100px; height:auto; border:solid 1px #eee; margin-right:0;}
/*.wb main td:nth-child(2){padding-bottom:20px;}*/
.pub h2:first-child{margin-top:20px;}
.pub main img{margin-bottom:2px;}

/*.m-box.grid-item img{filter: saturate(30%);}
.m-box.grid-item img:hover{filter: saturate(100%); transition:filter 0.5s;}*/


 .metaslider .flexslider .flex-direction-nav li a.flex-next{ background-image: url("grafik/arrow-next.svg") !important; width:30px !important; height:60px !important; background-size: contain; }
.metaslider .flexslider .flex-direction-nav li a.flex-prev{ background-image: url("grafik/arrow-prev.svg") !important; width:30px !important; height:60px !important; background-size: contain; }
@media screen and (max-width:600px){
	.metaslider .flexslider .flex-direction-nav li a.flex-next{ width:15px !important; height:30px !important; background-size: contain !important;}
.metaslider .flexslider .flex-direction-nav li a.flex-prev{ width:15px !important; height:30px !important; background-size: contain !important;}
}
.testslider img{margin:0 !important;}
.testslider .slides{background-color: #eee;}

/*------------------------------------------ FOOTER --------------------------------------------*/

footer { padding-bottom:20px; text-align: right;}
footer li{display:inline-block; margin-left:30px; }
footer a {font-size:14px; line-height:14px; text-transform:uppercase;}


/*------------------------------------------ IMPRESSUM --------------------------------------------*/
.impressum main a{color:#334b99;}
.impressum main a:hover{text-decoration:underline;}

