@charset "UTF-8";

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/OpenSans-Regular.woff') format('woff'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype'),
        url('../fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/OpenSans-Bold.woff') format('woff'),
        url('../fonts/OpenSans-Bold.ttf') format('truetype'),
        url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@media screen
{
	
	/*general stuff*/
		*{
			margin:0;padding:0
		}
		body{
			text-align: center;
			background: url('../images/background.png') no-repeat center center fixed; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
		.red {
			color: #902E37;
		}
		.highlight{
			font-weight: bold;
			color: #902E37;
		}	
		.center {
			text-align: center;
			border-top: 1px solid #999;
			padding-top: 10px;
		}
		.clear {
			clear: both;
		}
	/*header stuff*/
		.head-wrap{
			font-size: 12px;
		}
		.head-wrap img {
			margin-top: 40px;
		}
		.tel {
			margin-top: 15px;
		}
	/*navi stuff*/
		.navi-wrap {
			margin-top: 40px;
			width: 100%;
			border-top: 1px solid #999;
			border-bottom: 1px solid #999;
		}
		.navi-wrap li {
			display: inline-block; 
			height: 30px;
			margin: 0 15px;
		}
		.navi-wrap li a {
			display: block;
			text-decoration: none;
			color: #999;
			text-transform: uppercase;
			line-height: 30px;
		}
		.navi-wrap .border-up,  .navi-wrap .border-down{
			height: 2px;
			background: #902E37;	
			position: relative;			
		}
		.navi-wrap .border-up {
			margin-top:-1px;
		}
		.navi-wrap .border-down {
			margin-bottom:-1px;
		}
		.navi-wrap .current_page a, .navi-wrap li a:hover{
			color: #902E37;
		}
		.navi-wrap .highlight a{
			font-weight: bold;
			color: #902E37;
		}	
	/*content stuff (general)*/
		.content-wrap {
			background: rgba(255,255,255,0.5);
			box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
			padding: 40px 50px;
			margin: 5% auto;
			text-align: left;
			width: 860px;
		}
		.content-wrap p {
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.content-wrap h2 {
			color: #902E37;	
			border-bottom: 1px solid #999;
			padding-bottom: 15px;			
		}
		.content-wrap h3 {
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.content-wrap h4 {
			margin-top: 5px; 
		}
		.content-wrap ul {
			padding-left: 20px;
			margin-top: 10px;
			margin-bottom: 10px;			
		}
		.content-wrap a {
			color: #902E37;
			font-weight: 600; 
		}
		.content-wrap .floating {
			float: left;
			width: 45%;
			display: block;
			margin-bottom: 20px;
			min-height: 280px;

		}
		.content-wrap .wider {
			width: 65%;
		}
		.content-wrap .narrower {
			width: 30%;
			float: right;
			text-align: right;
		}

		.content-wrap .floating:nth-child(3), .content-wrap .floating:nth-child(5) {
			float: right;
		}
		/*content stuff (referenzen)*/
		.content-wrap .Rfloating {
			background: #fff;
			box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
			padding: 20px; 
			margin-bottom: 20px; 
		}
		.content-wrap .Rfloating:nth-child(2){
			margin-top: 20px; 
		}
		/*content stuff (impressum)*/
		.content-wrap .Ifloating {
			float: left;
			width: 33%;
			display: block;
			margin-bottom: 40px;
		}

		/*content stuff (kontakt form)*/
		.content-wrap form {
			margin-top: 20px; 
		}
		.content-wrap form label {
			float: left;
		}
		.content-wrap form input, .content-wrap form textarea {
			float: right;
		}
		.content-wrap form .input_box, .content-wrap form textarea{
			width: 75%;
			padding: 5px;
			border: none;
			background: #fff;
			box-shadow: inset 0px 5px 10px rgba(0,0,0,0.2);			
		}
		.content-wrap form .submit {
			padding: 5px 10px;
			font-size: 16px;
			font-weight: 600;
			background: #902E37;
			color: #fff;
			border: none; 
			cursor: pointer;
		}
		.content-wrap form .submit:hover {
			background: #fff;
			color: #902E37;
		}
		.content-wrap form .submit:active {
			background: #fff;
			color: #902E37;
			box-shadow: inset 0px 5px 10px rgba(0,0,0,0.2);	
			border: none;			
		}
}

@media screen and (min-width: 1024px){
	body {

		font-family: 'Open Sans', sans-serif;
		font-size: 16px;
	}
	.content-wrap p {
			line-height: 25px;
	}
	.navi-wrap li a {
		line-height: 30px;
	}
}

@media screen and (max-width: 1024px){

		/*general*/
		body {

			font-family: 'Open Sans', sans-serif;
			font-size: 16px;
		}
	
		/*navi stuff*/
		.navi-wrap {
			margin-top: 40px;
			padding-top: 30px;
			width: 100%;
			background: rgba(255,255,255,0.7);
		}
		.navi-wrap li {
			display: block; 
			height: 4em;
		}
		.navi-wrap li:first-child {
			display: block; 
		}		
		.navi-wrap li a {
			display: block;
			text-decoration: none;
			color: #999;
			font-size: 2.5em;
			text-transform: uppercase;

		}
		.navi-wrap .border-up,  .navi-wrap .border-down{
			display: none;		
		}
		.navi-wrap .current_page a, .navi-wrap li a:hover{
			color: #902E37;
		}
		.navi-wrap .highlight a{
			font-weight: bold;
			color: #902E37;
		}

	/*content stuff (general)*/
		.content-wrap {
			background: transparent;
			box-shadow:none;
			font-size: 1em;

		}
		.content-wrap .floating {
			float: none;
			width: 100%;
			display: block;
			margin-bottom: 40px;
			min-height: auto;
		}
		.content-wrap h2 {
			margin-bottom: 60px;
		}
		.content-wrap .floating:nth-child(3), .content-wrap .floating:nth-child(5) {
			float: none;
		}
		
		.content-wrap .MobileFloat {
			background: #fff;
			box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
			margin-bottom: 20px; 
		}
		.content-wrap .MobileFloat h3, .content-wrap .MobileFloat a {
			padding: 20px;
		}
		
		/*content stuff (impressum)*/
		.content-wrap .Ifloating {
			float: none;
			width: 100%;
			display: block;
			margin: 40px;
		}
		.content-wrap .Iimpress {
			margin-top: 80px;
			margin-bottom: 80px;			

		}
		/*content stuff (kontakt form)*/
		.content-wrap form {
			margin-top: 60px;
		}
		.content-wrap .floaty-wrap {
			width: 100%;
		}
		.content-wrap form label {
			float: none;
			font-size: 1.3em;
			padding-bottom: 1em;
		}
		.content-wrap form input, .content-wrap form textarea {
			float: none;
		}
		.content-wrap form .input_box, .content-wrap form textarea{
			width: 100%;
			padding: 5px;
			border: none;
			background: #fff;
			box-shadow: inset 0px 5px 10px rgba(0,0,0,0.2);	
			font-size: 1em;
			margin-top: 20px;		
		}
		.content-wrap form .submit {
			padding: 5px 10px;
			font-size: 1.5em;
			font-weight: 600;
			background: #902E37;
			color: #fff;
			border: none; 
			cursor: pointer;
		}
		.content-wrap form .submit:hover {
			background: #fff;
			color: #902E37;
		}
		.content-wrap form .submit:active {
			background: #fff;
			color: #902E37;
			box-shadow: inset 0px 5px 10px rgba(0,0,0,0.2);	
			border: none;			
		}

		.content-wrap .wider {
			width: 100%;
			float: none;
		}
		.content-wrap .narrower {
			width: 100%;
			float: none;
			text-align: right;
		}	

		.content-wrap .narrower img {
			width: 100%;
			
		}

		.content-wrap .mobil {
			display: none;
		}
		
		.content-wrap .MobileNonFloat {
			font-size: 2em;
		}

		/*content stuff (referenzen)*/
		.content-wrap .Rfloating ul {
			padding-left: 60px; 

		}
	
}