/** Import Google fonts **/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);


/** Global Styles Anfang **/

html
{
	height: 100%;
	overflow: auto;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9rem;
	font-weight:400; 
	line-height: 160%;
	color: #555;
	padding: 0 0 0 0;
	margin: 0px;
	background: #FFF;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}


::selection { background: #000; color: #FFF; }
::-moz-selection { background: #000; color: #FFF; }

p {
	margin-top: 0px;
	margin-bottom: 8px;
}

p.text_small {
	font-size: 0.9em;
	line-height: 165%; 
}

p.text_mini {
	border-left: 4px solid #45afe4;
	border-right: 4px solid #45afe4;
	padding: 10px;
	background: rgba(69,175,228,0.1);
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 0.8em;
	line-height: 150%; 
}


p.footer {
	font-size: 0.9em;
	color: #999;
	margin-top: 10px;
}

.li_small {
	font-size: 0.9em;
	line-height: 165%; 
	margin-bottom:5px;
}

.li_footer {
	font-size: 0.9em;
	color: #999;
	line-height: 165%; 
	margin-top: 3px;
	vertical-align: bottom;
}

a { color: #00B2E0; text-decoration: none;}
a:hover { color: #222; }

.schwarz
{
	background: #000;
}

.blau
{
	background: #45afe4;
}

.gruen
{
	background: #47ab48;
}

.orange
{
	background: #e57b1d;
}

.hellgrau
{
	background: #f2f2f2;
}

.grau
{
	background: #ccc;
}

.weiss
{
	background: #fff;
}

.link {
	border-bottom: 1px dotted;
}

.link_footer {
	border-bottom: 1px dotted;
	color: #999;
	margin-top: 0px;
	vertical-align: top;
}

h1 {
	font-size: 3.3rem;
	font-weight:400; 
	font-family: 'Oswald', sans-serif;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: #ddd;
	margin-top: 15px;
	margin-bottom: 15px;
}

h2 {
	font-size: 2.2rem;
	font-weight:400; 
	font-family: 'Oswald', sans-serif;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: black;
	margin-top: 20px;
}

h3 {
	font-size: 1.1rem;
	font-weight:400; 
	font-family: 'Oswald', sans-serif;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: black;
}

h3.footer {
	color: #999;
	margin-bottom: 0px;
}

h4 {
	font-size: 1.0rem;
	font-weight:400; 
	font-family: 'Oswald', sans-serif;
	text-rendering: optimizeLegibility;
	color: black;
	margin-top: -10px;
	margin-bottom: 30px;
}

.liste {
	font-size: 0.8em;
	line-height:150%;
	text-align: left;
}

::-moz-placeholder { font-size: 0.9em; }
::-webkit-input-placeholder { font-size: 0.9em; }
:-ms-input-placeholder { font-size: 0.9em; }


/** Global Styles Ende **/


/** Titelleiste Anfang **/

.container {
	width: 100%;
	padding-left: 5px;
	min-width: 280px;
	line-height: 22px;
}




/** Titelleiste Ende **/
/** Header Anfang **/

header
{
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 110px;
	background-color: white;
	z-index: 100;
	box-shadow: 0 0 1.5em #ddd;
}

.wrapper1 {
	padding: 0px 0px 0px 0px;
}

.header1
{
	width: 100%;
	max-width: 1000px;
	min-width: 300px;
	margin: 0 auto;
	clear: both;
	margin-top: -20px;
}

.logo
{
	float: left;
	width:28%;
	min-width: 180px;
	text-align: left;
}

.logobild {
	display: inline;
}

.logobild_small {
	display: none;
}
		
.navi
{
	float: left;
	padding: 0 0 0 0;
	width: 72%;
	text-align: right;
	margin-top: 20px;
}

.subnavi
{
	position: relative;
	padding: 0 0 0 0;
	text-align: right;
	margin-top: 5px;
	visibility: hidden;
}


.navi:hover .subnavi { 
	visibility: visible; 
}
		
@media only screen and (max-width: 950px) {
	.navi:hover .subnavi { 
		visibility: hidden; 
		}
	}

.mainnavi {
	font-family: 'Oswald', sans-serif;
	font-size: 1.1rem;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: black;
	line-height: 150%;
	padding:0px 10px;
	background: #ffffff;
}

.mainnavi:hover {
	color: #00B2E0;
}


.mininavi {
	font-family: 'Oswald', sans-serif;
	font-size: 0.9rem;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: #bbb;
	line-height: 100%;
	padding:0px 10px;
	background: #ffffff;
}

.mininavi:hover {
	color: #00B2E0;
}


@media only screen and (max-width: 700px) {
	.mainnavi {
		font-size: 1.0rem;
	}
	.navi {
		margin-top: 10px;
	}
	.logobild {
		display: none;
	}

	.logobild_small {
		display: inline;
	}
	.logo {
	min-width: 55px;
	}
	header {
		height: 70px;
	}

}


.bild1 + span {
display:none;
}

.bild1:hover + span {
display:block;
position:relative;
width:200px;
height:30px;
left:10px;
top:10px;
}
		

.umbruch {
	display:block;
	clear:both;
}		


.pfeilgross {
	font-size: 150%;
}



/** Header Ende **/
/**------------------------------------------------------------------------------------**/
		
.wrapper_white {
	background-color: white;
}

.wrapper_screendesign {
	background-image: url(../images/bg_screendesign.jpg);
	background-size:cover;
	background-repeat:no-repeat; 
	background-position:center; 
}

.wrapper_light {
	background-image: url(../images/bg_light.jpg);
}

.wrapper_dark {
	background-image: url(../images/bg_dark.jpg);
}

.wrapper_blau {
	background-image: url(../images/bg_blau.jpg);
	background-size:cover;
	background-repeat:no-repeat; 
	background-position:center; 
}

.fontwhite {
	color: white;
}

.fonthellgrau {
	color: #ddd;
}

.fontblack {
	color: 000000;
}


.wrapper_content
{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom:50px;
	text-align: center;
	clear: both;
}

.home_willkommen
{
	font-family: 'Oswald', sans-serif;
	font-size: 8.0rem;
	font-size: clamp(4em, 14vw, 7em);
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	color: white;
	text-align: center;
	-webkit-transform: rotate(-3deg); 
	-moz-transform: rotate(-3deg);
	margin-top: 65px;
	text-shadow: 0 0 0.2em #ddd;
}


.bluewhite
{
	font-weight: 600;
}

.sign
{
	color: #45afe4;
}

.text
{
	margin-top: 105px;
	text-align: center;
	font-size: 1.0rem;
	font-weight:300; 
	line-height: 160%;
}

.button
{
	padding: 6px 16px;
	text-align: center;
	font-size: 1.0rem;
	font-weight:400; 
	color: white;
	background-color: #45afe4;
	font-family: 'Oswald', sans-serif;
	line-height: 300%;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	box-shadow: 0 0 0.6em #bbb;
}

.button:hover
{
	background-color: #0092c1;
}

.home_projekte_hl
{
	margin-top: 70px;
	text-align: center;
}

.home_projekte
{
	text-align: center;
}

.home_projekt
{
	padding-left: 2%;
	padding-right: 2%;
	float: left;
	width: 29.3%;
	min-width: 100px; 
	margin-bottom: 40px;
}


.quadrat {
	border: 1px solid #fff;
	outline: 5px solid #fff;
	box-shadow: 0 0 1.1em #aaa;
    
}


	
/** Quadrate Ende **/
/** Teaserbilder Anfang **/

figure {

    text-align: center;
	position: relative;
	margin: 0px;
}

figcaption {
	font-family: 'Open Sans';
	float: left; 
	font-weight: 300;
    font-size: 0.9em;
	left: 10px;
	padding-top: 20px; 
	text-align: left;
	position: absolute;
}

.textfig {
	float: left; 
	text-align: left;
	font-family: 'Open Sans';
	font-weight: 300;
    font-size: 0.9em;
	line-height: 160%;
}

.top20px {
	padding-top: 20px; 
}



	
	.farbleiste {
		height: 9px;
		margin: 0px 0px 0px 0px;
	}
		

/** Teaserbilder Ende **/
/** Content Anfang **/

		#teaserbox
	{
		width: 100%;
		max-width: 1000px;
		margin: auto;
		clear: both;
		margin-top: 0px;
		}

		.container5 
	{
		padding: 50px 10px 50px 10px;
	}
	
		#headercont5
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		clear:both;
		font-size: 0.9rem;
	}
	
.einspaltig {
	font-size: 0.9em;
}
	

@media only screen and (min-width: 700px) and (min-height: 44em) {
	
	.dreispaltig {
		text-align: left;
		font-weight: 300;
		-webkit-column-count: 3;
		-moz-column-count: 3;
		-ms-column-count: 3;
		column-count: 3;
		-webkit-column-gap: 2.5em;
		-moz-column-gap: 2.5em;
		-ms-column-gap: 2.5em;
		column-gap: 2.5em;
		line-height: 170%;
		padding-left: 2%;
		padding-right: 2%;
		font-size: 0.9em;
	}
	}
	
.bild {
	width: 96%;
	max-width: 990px;
	padding-left: 2%;
	padding-right: 2%;
	margin-top:30px;
	margin-bottom: 30px;
}

.bildrahmen {
	width: 96%;
	max-width: 970px;
	margin-top:50px;
	margin-bottom: 50px;
	border: 1px solid #fff;
	outline: 5px solid #fff;
	box-shadow: 0 0 1.1em #aaa;
	background-repeat: no-repeat;
}


.eindrittel {
	width: 30%;
	float: left;
	text-align: left;
	margin-left: 2%;
}

.zweidrittel {
	width: 64%;
	float: left;
	text-align: left;
	margin-left: 4%;
}

.refbilder {
	margin-right:16px;
	margin-bottom: 16px;
	float: left;
}

.refheadline {
	padding-top: 15px; 
	text-align: center; 
	float: left; 
	width: 424px; 
	}

.refheadline2 {
		display: none;
}

.refheadline_hochkant {
		display: none;
	}
	
.kustibox {
	width: 310px; 
	height: 200px; 
	float: right; 
	padding-left: 8px;
}


@media only screen and (max-width: 1050px) {
	.refheadline {
		display: none;
	}
	.refheadline2 {
		display: block;
	}
	.kustibox {
	width: 85%; 
	height: auto; 
	padding-right: 15%;
	padding-bottom: 25px;
	}
}

.form {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9rem;
	padding: 3px;
	margin: 10px 0px 0px 0px;
	width: 100%;
	border: 1px solid #eee;
	font-size: 1.1em;
	background-image: url(../images/bg_light.jpg);
}

.nachrichtform {
	margin-top: 5px;
	height: 255px;
	width: 97%;
	margin-bottom: 10px;
}

.form:hover {
	border: 1px solid #aaa;
}

.stars {
	margin-right: 8px;
	vertical-align: text-top;
}


.kusti1 {
}

.kusti2 {
	color: #45afe4;
	font-size: 0.9em;
	padding-bottom: 5px;	
}

.kusti3 {
	font-size: 0.8em;
	font-style: italic;
	line-height: 160%;	
}


@media only screen and (max-width: 700px) {
	.responsive {
		float:left;
		width: 96%;
		margin-right: 4%;
	}
	.zweidrittel {
	margin-left: 2%;
	}
	.plus20px {
	margin-top: 20px;
	}
	.nachrichtform {
	margin-top: 11px;
	width: 100%;
}
}

.minus20px {
	margin-top: -20px;
	}


.loeschen {
	background-color: white; 
	border: 1px solid #ccc; 
	height: 25px;
	margin-top: 12px;
}
	
.loeschen:hover {
	background-color: #eee; 
}

.loeschen:active {
	background-color: #eee; 
	font-weight: bold;
}

.absenden {	
	background-color: #45afe4; 
	border: 1px solid #45afe4; 
	height: 25px; 
	color: white;
	}
	
.absenden:hover {	
	background-color: #0092c1; 
	border: 1px solid #0092c1; 
	}	
	
.absenden:active {	
	background-color: #0092c1; 
	border: 1px solid #0092c1; 
	font-weight: bold;
	}	
	
	

/** Content Ende **/	

				
.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}
 
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}