/* ------------------------------DEFAULT-------------------------------------- */
*{
	outline: none;
	margin: 0;
	}
	
html{
	overflow-y: scroll;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	*behavior:url(/javascript/boxsizing.htc);
	}
	
img{
	border: none;
	width: 100%;
	height: auto;
	}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 80%;  /*62.5%*/
	line-height: 1.5;
	color: #505b67;
	font-weight: 300;
	transition: all 0.5s ease;
	background-image:url(/images/place.png);
	background-repeat:no-repeat;
	background-position: right bottom;
	background-size: 30%;
	background-attachment:fixed;
	}
	
	
#datenschutz p{
	font-size: 0.8em;
	}
	
	
p,
#content ul,
#content ol,
.section{
	padding-bottom: 3em;
	}
	
p,
#content ul,
#content ol,
.tab1,
.tab2 {
	-webkit-font-variant-ligatures: no-common-ligatures;
	font-variant-ligatures: no-common-ligatures;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	}
	
p img{
	padding-bottom: 1.5em;
	}

h1,h2,h3,h4,.headline1,.headline2,.headline3,.headline4{
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	display: block;
	font-weight: 300;
	}


h1,.headline1 {
	font-size: 1.953em;
	margin-bottom: 0.25em;
	}
	
h2,.headline2{ 
	font-size: 1.563em;
	margin-bottom: 0.75em;
	}
	
h3,.headline3 { 
	font-size: 1.25em;
	margin-bottom: 0.75em;
	}
	
h4,.headline4 { 
	font-size: 1em;
	margin-bottom: 0.75em;
	}

a{
	color: #505b67;
	text-decoration:underline;
	}
	
a:hover{
	color: #bbbbbb;
	text-decoration:none;
	}
	
a.white{
	color: #ffffff;
	}
	
a.white:hover{
	color: #ffffff;
	}
	

.back-link{
	display: block;
	font-weight: 400;
	padding-bottom: 3em;
	}
	
a.back-link,
a:hover.backlink{
	text-decoration: none;
	}
	



	
.textrow{
	margin: 0px 0px 1.5em 0px;
	}

.clear {
	clear: both;
	height: 0px;
	}

/*------------------------------MAIN------------------------------------------*/

#header{
	position: relative;
	background: linear-gradient(to bottom, #ffffff 30px, #505b67 30px);
	}
	
#logo{
	position: absolute;
	left: 0px;
	top: 1.05em;
	width: 16em;
	}
	
#headermid{
	display: none;
	}
	
#content{
	background: #505b67;
	position: relative;
	}
	
#contentinner{
	padding: 0px 10px;
	margin: 0px 10px;
	background: #ffffff;
	}

	
.zwei #contentinner{
	background: #505b67;
	color: #ffffff;
	}
	
.zwei p a{
	color: #ffffff;
	text-decoration: none;
	}

.zwei p a:hover{
	color: #bbbbbb;
	text-decoration: none;
	} 
	
#footer{
	background: #505b67;
	color: #ffffff;
	font-size: 1em;
	line-height: 1.8em;
	padding: 20px 10px 20px 15px;
	}



#footer a{
	color: #ffffff;
	text-decoration:none;
	white-space: nowrap;
	}
	
#footer a:hover{
	color: #bbbbbb;
	}
	
	
	
/*------------------------------------FRAMEMENU------------------------------------------*/

#frametop,
#framebottom,
.frame1,
.frame2,
.frame3{
	display: none;
	}

	
#startseite #frametop,
#startseite .frame3{
	display: block;
	}
	
#startseite #frametop{
	background: #505b67;
	}
	
/*------------------------------------ISOTOPE------------------------------------------*/
	
#grid{
	padding: 2% 0px 0px 2%;
	background: #ffffff;
	}
	
#grid .griditem {
	width: 47%;
	padding: 0px 2% 1.5% 0px;
	}
	
#grid .griditem .bottom{
	position: relative;
	height: 0px;
	}
	
a .titel{
	display: none;
	}
	
a:hover .titel{
	display: block;
	font-size: 0.8em;
	color: #ffffff;
	position: absolute;
    bottom: 1em;
	left: 1em;
	right: 1em;
	}
	
#projektelink{
	display: none;
	}
	

	
.filters{
	font-weight: 800;
	background: #ffffff;
	margin: 0px 10px; 
	padding: 1em 10px 0px 10px;
	display: inline-block;
	}
	
.button {
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	background: transparent;
	border: none;
	color: #505b67;
	font-weight: 400;
	cursor: pointer;
	font-size: 1em;
	}

.button:hover {
	color: #bbbbbb;
	}

.button.is-checked {
	color: #bbbbbb
	}

.button:active {
	color: #bbbbbb;
	}

/*------------------------------------GRID------------------------------------------*/
	
.inner{
	padding: 0px 5px 0px 5px;
	}
	

	
#referenzen #content .first{
	width: 20%;
	font-weight: 400;
	float: left;
	}

#referenzen #content .second{
	width: 60%;
	float: left;
	}

#referenzen #content .third{
	float: right;
	text-align: right;
	width: 15%;
	}
	
#referenzen .irow{
	margin: 0px 0px 1em 0px;
	}
	

/*------------------------------------MENU------------------------------------------*/

#menuicons{
	margin: 30px 0px 0px 0px;
	float: right;
	}
	
#menuicons a{
	text-decoration: none;
	}

#menuicon,	
#callicon,
#mailicon{
	float: right;
	}
	
#menuicon i,	
#callicon i,
#mailicon i{
	font-size: 1.5em;
    line-height: 1.7em;
	padding: 0.5em;
    width: 1.7em;
    display: block;
    text-align: center;
	color: #ffffff;	}
	
#mailicon{
	
	}
	
ul.main-menu,
ul.main-menu li,
.submenu{
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #505b67;
	list-style: none;
	}

ul.main-menu input[type="checkbox"], 
ul.main-menu span.drop-icon,
ul.main-menu,
#tm {
	display: none;
	}

#tm:checked + ul.main-menu {
	display: block;
	z-index: 10;
	}

ul.main-menu li{
	margin: 0px;
	width: 100%;
    float: left;
	border-bottom: 1px solid rgba(110, 110, 110, 0.2);
	}
	
ul.main-menu li ul li{
	border-bottom: none;
	}

ul.main-menu li,  
ul.main-menu a {
	display: block;
	color: #ffffff;
	}

ul.main-menu a {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	font-size: 1.5em;
	font-weight: 600;
	text-decoration: none;
	padding: 0.5em 5%;
	}
	
ul.main-menu li ul a {
	font-weight: 400;
	}

ul.main-menu a:hover {
	transition: all 0.5s ease;
	color: #bbbbbb;
	text-decoration: none;
	}

ul.main-menu .submenu {
	display: none;
	transition: all .5s ease-in-out;
	}

#menuicon .drop-icon, 
ul.main-menu li label.drop-icon {
	font-size: 1em;
	line-height: 1em;
	padding: 1.3em 1em 1.3em 1em;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	text-align: center;
	color: #ffffff;
	}


	
ul.main-menu input[type="checkbox"] + label.drop-icon:after {
	content:"\25BC"
	}

ul.main-menu input[type="checkbox"]:checked + label.drop-icon:after  {
	content:"\25B2"
	}

ul.main-menu input[type="checkbox"]:checked ~ .submenu {
	display: block;
	}
	
.handyclear{
	clear: both;
	}
	
ul.main-menu li.current a{
	color: #bbbbbb;
	}
	
/*----------------------------MAPS------------------------*/

#map{
	position: relative;
	width: 100%;
	height: 55vh;
	z-index: 4;
	}
	


@media only screen and (min-width: 700px) {
	
	body{
		font-size: 80%;
		}	

	#header{
		height: 80px;
		background: linear-gradient(to bottom, #ffffff 34px, #505b67 34px);
		}
		
	#logo{
		width: 20em;
		}
	
	#menuicons{
		display: none;
		}
	
	#headermid,	
	.desktop{
		display: block;
		}
		
	#headermid{
		color: #ffffff;
		float: right;
		margin: 3em 3em 0px 300px;
		font-size: 1em;
		}
		
	#headermid a{
		color: #ffffff;
		text-decoration: none;
		}
		
	#headermid a:hover{
		color: #bbbbbb;
		text-decoration: none;
		}
		
		
		
	/*------------------------------------FRAMEMENU------------------------------------------*/

	#frametop{
		display: block;
		position: relative;
		height: 80px;
		}
		
	#frametop .filters{
		display: inline-block;
		}
		
	.frame1,
	.frame2,
	.frame3,
	.frame4,
	.frame5,
	.frame6,
	.frame7,
	.frame8{
		display: block;
		position: absolute;
		font-weight: 400;
		padding: 0px 0px 0px 10px;
		margin: 0px;
		}
		
	.frame1 a,
	.frame2 a,
	.frame3 a,
	.frame4 a{
		text-decoration: none;
		}
	
	.frame1 a,
	.frame3 a,
	.frame5 a
	.frame7 a{
		color: #505b67;
		}	
	
	.frame2 a,
	.frame4 a,
	.frame6 a,
	.frame8 a{
		color: #ffffff;
		}
		
	#frametop a:hover{
		color: #bbbbbb;
		}
		
	.frame1{
		background: #ffffff;
		height: 80px;
		left: 10px;
		right: 25px;
		top: 0px;
		}
		
	.frame2{
		background: #505b67;
		height: 60px;
		left: 15px;
		right: 20px;
		top: 19px;
		border-top: solid 1px #ffffff;
		border-right: solid 1px #ffffff;
		}
		
	
	.frame3{
		background: #ffffff;
		height: 40px;
		left: 20px;
		right: 15px;
		top: 40px;
		}
		
	.frame4{
		background: #505b67;
		color: #ffffff;
		height: 20px;
		left: 25px;
		right: 20px;
		top: 59px;
		border-top: solid 1px #ffffff;
		border-right: solid 1px #ffffff;
		text-transform: uppercase;
		}
		
	
		
	#contentinner{
		margin: 0px 15px 0px 10px;
		padding: 0px 10px 0px 20px;
		background: linear-gradient(to right, #ffffff 5px, #505b67 5px, #505b67 10px, #ffffff 10px);
		}
		
	.zwei #contentinner{
		margin: 0px 15px 0px 10px;
		padding: 0px 20px 0px 25px;
		background: linear-gradient(to right, #ffffff 5px, #505b67 5px, #505b67 10px, #ffffff 10px, #ffffff 15px, #505b67 15px);
		border-right: solid 6px #ffffff;
		}
		
	#framebottom{
		display: block;
		background: #505b67;
		position: relative;
		height: 60px;
		}
		
	.frame5{
		background: #ffffff;
		height: 20px;
		left: 10px;
		right: 30px;
		top: 0px;
		}
		
	.frame6{
		background: #505b67;
		height: 40px;
		left: 14px;
		right: 25px;
		top: 0px;
		border-left: solid 1px #ffffff;
		border-bottom: solid 1px #ffffff;
		}
		
	.frame7{
		background: #ffffff;
		height: 60px;
		left: 20px;
		right: 15px;
		top: 0px;
		}
		
	.frame8{
		background: #505b67;
		height: 80px;
		left: 24px;
		right: 20px;
		top: 0px;
		border-left: solid 1px #ffffff;
		border-right: solid 1px #ffffff;
		border-bottom: solid 1px #ffffff;
		}
		
	/*------------------------------------GRID------------------------------------------*/
	
	
	.inner{
		padding: 0px 0px 0px 20px;
		}
		
	.first,
	.second,
	.third{
		float: left;
		}
		
	.zwei #footer{
		padding: 40px 10px 20px 15px;
		}	
		
	#footer {
		padding: 20px 30px 20px 40px;
		}
	
	#footerleft{
		width: 50%;
		float: left;
		}
	
	#footerright{
		float: right;
		}
		
	#footer .first,
	#footer .second,
	#footer .third,
	#footer .fourth,
	#footer .fifth,
	#footer .sixth{
		float: left;
		margin: 0px 1em 0px 0px;
		}
		
	
	#footer .fourth,
	#footer .fifth,
	#footer .sixth{
		float: left;
		margin: 0px 0em 0px 1em;
		}
		
	
		
	.left{
		float: left;
		}
		
	.right{
		float: right;
		}
		
	#referenzen #content .left{
		width: 70%;
		margin: 0px 5% 0px 0px;
		}
		
	#referenzen #content .right{
		width: 20%;
		float: left;
		}
	
		
	#impressum #content .left{
		width: 60%;
		}
		
	#impressum #content .right{
		width: 35%;
		}
		
	#datenschutz #content .left{
		width: 60%;
		}
		
	#datenschutz #content .right{
		width: 35%;
		}
		
	#details .first{
		width: 33%;
		}
		
	#details #content .second{
		width: 65%;
		float: right;
		}
	
		
	/*------------------------------------ISOTOPE------------------------------------------*/
	
	#projektelink{
		display: block; 
		float: left;
		font-size: 1em;
		margin: 0px;;
		}
	
	.filters{
		float: left;
		margin: 0px;
		padding: 0px;
		}
		
	#grid{
		padding: 0px;
		}
		
	#grid .griditem {
		width: 15.86%;
		padding: 0px 0.8% 0.4% 0px;
		}
		
	
}


@media only screen and (min-width: 900px) {
	
	
	#leistungen #contentinner{
		padding: 0px 0px 0px 3em;
		}
		
	#framebottom{
		height: 70px;
		}
		
	
	
	/*------------------------------------GRID------------------------------------------*/
	
	.col33,.col66{
		float:left;
		margin: 0px 1% 0px 0px;
		}
	
	.col33{
		width: 32%;
		}
		
	.col66{
		width: 65%;
		}
		
	.bildlinks{
		padding: 0px 5% 0px 0px;
		float: left;
		width: 45%;
		}
		
	.bildrechts{
		padding: 0px 0px 0px 5%;
		float: right;
		width: 50%;
		}
	

}

@media only screen and (min-width: 1000px) {
	
	#header{
		height: 100px;
		background: linear-gradient(to bottom, #ffffff 34px, #505b67 34px);
		}
		
	
	

}

@media only screen and (min-width: 1200px) {
	
	body{
		font-size: 100%;
		}
		
	#header{
		height: 100px;
		background: linear-gradient(to bottom, #ffffff 40px, #505b67 40px);
		}
	
	#logo{
		top: 0.9em;
		}	
	
	#footer {
		padding: 20px 30px 20px 15px;
		}
		
	.zwei #footer {
		padding: 60px 10px 20px 15px;
		}
	
	/*------------------------------------FRAMEMENU------------------------------------------*/

	#frametop{
		height: 110px;
		}
		
	.frame1{
		height: 110px;
		left: 10px;
		right: 41px;
		top: 0px;
		}
		
	.frame2{
		height: 85px;
		left: 20px;
		right: 30px;
		top: 26px;
		}
		
	.frame3{
		height: 57px;
		left: 30px;
		right: 20px;
		top: 55px;
		}
		
	.frame4{
		height: 32px;
		left: 40px;
		right: 20px;
		top: 80px;
		border-right: solid 11px #ffffff;
		}
		
	#contentinner{
		margin: 0px 20px 0px 10px;
		padding: 0px 0px 0px 30px;
		background: linear-gradient(to right, #ffffff 10px, #505b67 10px, #505b67 20px, #ffffff 20px);
		}
		
	.zwei #contentinner{
		margin: 0px 20px 0px 10px;
		padding: 0px 20px 0px 40px;
		background: linear-gradient(to right, #ffffff 10px, #505b67 10px, #505b67 20px, #ffffff 20px, #ffffff 30px, #505b67 30px);
		border-right: solid 11px #ffffff;
		}
		
	.frame5{
		height: 20px;
		left: 20px;
		right: 20px;
		top: 0px;
		}
		
	.frame6{
		height: 35px;
		left: 19px;
		right: 25px;
		top: 0px;
		}
		
	.frame7{
		height: 70px;
		left: 30px;
		right: 20px;
		top: 0px;
		}
		
	.frame8{
		height: 105px;
		left: 39px;
		right: 30px;
		top: 0px;
		}
		
	

}



@media only screen and (min-width: 1800px) {
	
	body{
		font-size: 120%;
		}
		
	#header{
		margin: 20px 0px 0px 0px;
		height: 120px;
		background: linear-gradient(to bottom, #ffffff 44px, #505b67 44px);
		}
		
	#logo{
		top: 0.7em;
		width: 20em;
		}
		
	
		
	
		
	/*------------------------------------FRAMEMENU------------------------------------------*/

	#frametop{
		height: 120px;
		}
		
	.frame1{
		height: 122px;
		left: 10px;
		right: 31px;
		top: 0px;
		}
		
	.frame2{
		height: 91px;
		left: 20px;
		right: 20px;
		top: 30px;
		}
	
	.frame3{
		height: 60px;
		top: 62px;
		left: 30px;
		right: 10px;
		}
		
	.frame4{
		height: 31px;
		left: 40px;
		right: 10px;
		top: 90px;
		}
		
	#contentinner{
		margin: 0px 10px 0px 10px;
		padding: 0px 0px 0px 30px;
		background: linear-gradient(to right, #ffffff 10px, #505b67 10px, #505b67 20px, #ffffff 20px);
		}
		
	
		
	.zwei #contentinner {
		margin: 0px 10px 0px 10px;
		padding: 0px 20px 0px 40px;
		background: linear-gradient(to right, #ffffff 10px, #505b67 10px, #505b67 20px, #ffffff 20px, #ffffff 30px, #505b67 30px);
		border-right: solid 11px #ffffff;
		}
		
	.frame5{
		height: 20px;
		left: 10px;
		right: 40px;
		top: 0px;
		}
		
	.frame6{
		height: 50px;
		left: 19px;
		right: 30px;
		top: 0px;
		}
		
	.frame7{
		height: 80px;
		left: 30px;
		right: 10px;
		top: 0px;
		}
		
	.frame8{
		height: 110px;
		left: 39px;
		right: 20px;
		top: 0px;
		}
		
	#framebottom{
		height: 80px;
		}
		
	/*------------------------------------ISOTOPE------------------------------------------*/
	
	#grid .griditem {
		width: 13.75%;
		padding: 0px 0.5% 0.15% 0px;
		}
		
		
}

/*------------------------------FONTS------------------------------------------*/

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('/fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('/fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/open-sans-v15-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */	
 
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(/fonts/fa-regular-400.eot);src:url(/fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-regular-400.woff2) format("woff2"),url(/fonts/fa-regular-400.woff) format("woff"),url(/fonts/fa-regular-400.ttf) format("truetype"),url(/fonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}

@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(/fonts/fa-solid-900.eot);src:url(/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-solid-900.woff2) format("woff2"),url(/fonts/fa-solid-900.woff) format("woff"),url(/fonts/fa-solid-900.ttf) format("truetype"),url(/fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}


i{
	font-style: normal;
	}

.fa-arrow-alt-circle-up:before{content:"\f35b"}
.fa-arrow-up:before{content:"\f062"}
.fa-at:before{content:"\f1fa"}
.fa-envelope:before{content:"\f0e0"}
.fa-mobile-alt:before{content:"\f3cd"}
.fa-bars:before{content:"\f0c9"}
.fa-check:before{content:"\f00c"}
.fa-paper-plane:before{content:"\f1d8"}

#content ol,
#content ul{
	list-style: none;
	}

#content li {
	position: relative;
	padding-left: 1em;
	}
	
#content li span{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	}

/*#content li:before {
	font-family: 'Font Awesome 5 Free';
	content:"\f00c";
	position: absolute;
	left: -1em;
	top: 0em;
	color: #e94c13;
	}
	
#startseite #content li:before {
	content:"\f00c";
	}
	
#datenschutz #content li:before {
	margin: 2em 2em 1em 1em;
	font-size: 0.2em;
	padding: 0.4em 0em 0em 0em;
	line-height: 1.5em;
	content:"\f111";
	}
	
#datenschutz #content li ul {
	padding: 1.5em 0em 0em 0em;
	}
	
#datenschutz #content li {
	padding: 0em 0em 1.5em 0em;
	}
	
	*/
/* Stylesheet: Gdefault Modified On 2020-12-11 19:45:31 */