@charset "UTF-8";
/* CSS Document */

html, body {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}

.container {
    height: auto;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
	overflow-x: hidden;
}

.content {
    width:80%;
    margin: 0px 10% 0px 10%;
}

body {
	overflow-y: scroll;
	overflow-x: hidden;
}

.header {
    position:fixed;
    height: auto;
    margin-left: 0%;
    top: 0px;
    clear: none;
    width: 100%;
    min-height: 50px;
    background-color: #fff;
    z-index:20;

}

.logo-header {
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    clear: right;
    z-index:10;
}

.logo {
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    clear: right;
    z-index:10;
}

.boxlogo {
    width: 40%;
    height:auto;
    margin:0px auto 0px 30%;
    padding:0px -20px -20px -20px;
    position:absolute;
}

.boxlogo-navi {
    width: 20%;
    height:auto;
    margin:30px auto 0px 40%;
    padding:0px;
    position:relative;
}

.boxnavi {
    float: left;
    width: 36%;
    height:auto;
    margin:0px;
    padding-top:20px;
}

.boxtext {
    float: right;
    clear: none;
    position:relative;
    height: auto;
    margin: 0px;
    width: 70%;
	z-index:100;
    
}

.boxcontact {
    -moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
    float: left;
    clear: none;
    background-color: #fff;
    position:relative;
    height: auto;
    margin: -50px 20% 0px 20%;
    border-color: #38750d;
    border-width: 4px;
    border-style: solid;
    border-radius: 10px;
    width: 60%;
	z-index:100;
    
}


.box100 {
    float: left;
    clear: both;
    height: auto;
    display: flex;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    width: 100%;
	z-index:100;
}

.box100padding {
    float: left;
    clear: both;
    height: auto;
    margin: 0px;
    padding: 0px 50px 0px 50px;
    width: 90%;
	z-index:100;
}

.box90 {
    float: left;
    clear: both;
    height: auto;
    margin: 50px 5% 200px 5%;
    padding: 50px;
    width: 90%;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box75 {
    float: left;
    position:relative;
    height: auto;
    min-height: 300px;
    margin: 0px 0px 0px 0px;
    padding: 50px;
    width: 75%;
	z-index:20;
}
.box50L {
    float: left;
    clear: both;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    padding:20px 20px 0px 50px;
    clear: both;
    flex: 1;
    width: 48.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box50R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    padding:20px 20px 0px 50px;
    clear: none;
    flex: 1;
    width: 48.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box60L {
    float: left;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    padding:20px 20px 0px 50px;
    clear: both;
    width: 65.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box40R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    padding:20px 20px 0px 50px;
    clear: none;
    width: 31.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box40Rcomplete {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    clear: none;
    width: 31.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}


.box33 {
    float: left;
	height: auto;
    margin: 30px 1.666% 30px 1.666%;
    padding: 0px;
    clear: none;
    width: 30%;

}

.box25 {
    float: left;
    position:relative;
    height: auto;
    margin: 0px;
    width: 25%;
    text-align: center;
}

.webdesign {
    position:fixed;
    bottom: 100px;
    margin-left: 0px;
}

.spacer {
    width:100%;
    height: 200px;
    z-index: 5;
}

.spacer50 {
    width:100%;
    height: 50px;
    z-index: 5;
}

.PRICELEFT {
    float: left;
    height: auto;
    margin: -7px 0px 0px 0px;
    clear: none;
    width: 55%;
    min-height: 10px;
}

.PRICECENTER {
    float: left;
    height: auto;
    margin: -7px 0px 10px 0px;
    clear: none;
    width: 20%;
    min-height: 10px;
}

.PRICERIGHT {
    float: left;
    height: auto;
    margin: -7px 0px 10px 0px;
    clear: none;
    width: 25%;
    min-height: 10px;
}

.footer {
    position:relative;
    float:left;
    bottom:0px;
    margin: 50px 0px 0px 0px;
    padding:0px;
    width:100%;
	min-height: 50px;
	z-index:100;
}

.mofooter {
    position:fixed;
    margin:auto 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    bottom:0px;
	background-color:#ffffff;
    border: 2px solid #cccccc;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    width:100%;
    height:auto;
	z-index:99999;
}


.image_100{
	width:100%;
	height:auto;
    border: 0px solid #fff;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	margin:0;
	z-index:10;
}

.image_100:hover {
    border: 1px solid #fc9111;
}

.image_90{
	width:100%;
	margin:30px 0px 0px -50px;
    border: 1px solid #fff;
	z-index:10;
}


.image_75{
	width:75%;
	height:auto;
	margin:0;
	z-index:10;
}

.image_context {
	width: 60%;
	margin: 0px 30px 0px -35%;
	float: left;
	clear: none;
    border-left: 5px solid #ccc;
    border-bottom:40px solid #ccc;
}

.image_content{
	width:80%;
	height:auto;
	margin-top:100px;
	z-index:10;
}

.image_hoch{
    width:60%;
	height:auto;
	margin:30px 0px 0px 0px;
    border: 1px solid #fff;
	z-index:10;
}

.image_50_hoch{
    width:60%;
	height:auto;
	margin:50px 0px 0px 0px;
    border: 1px solid #fff;
	z-index:10;
}

.image_quer{
    width:90%;
	height:auto;
	margin:30px 0px 0px 0px;
    border: 1px solid #fff;
	z-index:10;
}

.image_50_quer{
    width:75%;
	height:auto;
	margin:50px 0px 0px 0px;
    border: 1px solid #fff;
    display: block;
	z-index:10;
}

.image_fixed{
    width:36%;
	height:auto;
	margin:200px 0px 0px 0px;
    border: 1px solid #fff;
    position:fixed;
	z-index:10;
}

.image60L {
    float: left;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    clear: both;
    width: 65.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.image40R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    clear: none;
    width: 31.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.image100L {
    float: left;
    clear: both;
    height: auto;
    margin: 0px 1% 0px 1%;
    clear: both;
    width: 98%;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.image50L {
    float: left;
    clear: both;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    clear: both;
    flex: 1;
    width: 48.5%;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.image50R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    clear: none;
    flex: 1;
    width: 48.5%;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}


.icon {
	width: 14.3%;
	height:auto;
	margin: 1%;
}

.accordion {
    color: rgba(251,248,241,0.0);
    cursor: pointer;
    margin:0px;
    padding: 0px 10px 0px 10px;
    width: 100%;
    border: none;
    outline: none;
    transition: 0.7s;   
}

.active, .accordion:hover {
    background: rgba(251,251,251,0.7);
}

.panel {
    padding: 0px 10px 0px 10px;
    background: rgba(251,248,241,0.7);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-out;
}

.sendbutton {
	width: 500px;
	margin: 0px auto 60px auto;
	padding: 0px;
	border:2px solid #fc9111;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	-ms-border-radius:20px;
	text-align: center;
	background-color: #f4f4ed;
}

.transparent5 {
    background: rgba(255,255,255,0.5);
}

.transparent6 {
    background: rgba(255,255,255,0.6);
}

.transparent7 {
    background: rgba(255,255,255,0.7);
}

.transparent8 {
    background: rgba(255,255,255,0.8);
}

.transparent9 {
    background: #F6EEEC;
}

.yellow1 {
    background: #fce486;   
}

.active, .yellow1:active {
    background: #f89e01;
}

.active, .yellow2:active {
    background: #f89e01;
}

.white {
    background: #ffffff;
}

.yellow2 {
    background: #ffcb00;  
}

.orange {
    background: #ff8f49;  
}

.blue {
    background: #0000cc;  
}

.red {
    background: #ff0000;
}

.monly {
	display:none;
}

.dtonly {
	display:block;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3000;
    top: 0px;
    left: 0px;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 0%;
    width: 100%;
    font-size: 30px;
    margin-top: 0px;
    border-style: solid 2px;
}

.overlay a {
    margin: 0px;
    padding: 0px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #0e194d;
}

.openbtn a:hover, .overlay a:focus {
    color: #94ed39;
    transition: 0.1s;
}

.openbtn {
    position: fixed;
    top: 40px;
    right: 5%;
    color: #fff;
    font-size: 60px !important;
    z-index:110;
}

.closebtn {
    position: absolute;
    top: 40px;
    right: 5%;
    color: #0e194d;
    font-size: 60px !important;
    z-index:99900;
}

.center {
    text-align: center;
}
.left {
    text-align: left;
}

.right {
    text-align: right;
}

.sprung {
    visibility: hidden; 
    height: 0px !important; 
    position: relative; 
    margin: -200px 0px 0px 0px;
}

/* =================
   ANPASSUNG SCREEN SIZE ANPASSUNG SCREEN SIZE ANPASSUNG SCREEN SIZE ANPASSUNG SCREEN SIZE 
================= */

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

.icon {
	width: 22.5%;
	height:auto;
	margin: 1%;
}
    
    
.spacer {
    height:160px;
}
    
.spacer50 {
    height:70px;
}

}

@media screen and (max-width: 1500px) {
    
.content {
    width:100%;
    margin: 0px;
}

.boxnavi {
    width: 38%;
    padding-top:35px;
}

.boxnavisocials {
	width: 4%;
    padding-top:10px;
}
    
.spacer {
    height:80px;
}
    
.spacer50 {
    height:70px;
}
    
.image_fixed{
    width:38%;
	margin:200px 0px 0px 0px;
    position:fixed;
}

.boxtext {
    margin: 0px;
    width: 70%;   
}
    
.box100 {
    margin: 0px 1%;
    padding: 15px 0px 0px 0px;
    width: 98%;
}

.box90 {
    margin: 50px 5% 180px 28%;
    padding: 30px;
    width: 70%;
    border-top: 5px solid #ccc;
    border-right:10px solid #ccc;
	z-index:100;
}
    
.box50L {
    float: left;
    clear: both;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    padding:20px 20px 0px 50px;
    clear: both;
    flex: 1;
    width: 48.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box50R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    padding:20px 20px 0px 40px;
    clear: none;
    flex: 1;
    width: 48.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box60L {
    float: left;
    height: auto;
    margin: 0px 0.5% 0px 1%;
    padding:20px 20px 0px 40px;
    clear: both;
    width: 65.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box40R {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    padding:20px 20px 0px 40px;
    clear: none;
    width: 31.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.box40Rcomplete {
    float: left;
    height: auto;
    margin: 0px 1% 0px 0.5%;
    clear: none;
    width: 31.5%;
    min-height: 100px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
	z-index:100;
}

.sprung {
    margin: -190px 0px 0px 0px;
}
    
.image_context {
	width: 68%;
	margin: 0px 10px 0px -43%;
	float: left;
	clear: none;
    border-left: 5px solid #ccc;
    border-bottom:10px solid #ccc;
}

.openbtn {
    top: 40px;
    right: 5%;
    font-size: 40px !important;
}

.closebtn {
    top: 40px;
    right: 5%;
    font-size: 40px !important;
}

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

.boxnavi {
    width: 40%;
    padding-top:25px;
}

.boxnavisocials {
	width: 4%;
    padding-top:0px;
}   
    
.logo {

}   
}

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

.boxtext {
    margin: 0px;
    width: 70%;   
}

.box100 {
    margin: 0px 5%;
    padding: 50px;
    width: 90%;
}


.box90 {
    margin: 50px 5% 180px 28%;
    padding: 30px;
    width: 70%;
    border-top: 5px solid #ccc;
    border-right:10px solid #ccc;
	z-index:100;
}

.sprung {
    margin: -190px 0px 0px 0px;
}
    
.image_context {
	width: 68%;
	margin: 0px 10px 0px -43%;
	float: left;
	clear: none;
    border-left: 5px solid #ccc;
    border-bottom:10px solid #ccc;
}

    
.spacer {
    height:100px;
}
    
.spacer50 {
    height: 50px;
}
    
.content{
    min-height: auto;
}
    
.boxnavisocials {
	width: 4%;
    padding-top:0px;
    margin-top: -100px
}  
    
.box75 {
    margin: 150px 0px 0px 0px;

}
    
.box60L {
    margin: 0px;
    min-height: auto;
    width: 50%;

}

.box40R {
    margin: -30px 0px 0px 0px;
    width: 50%;
    min-height: auto;
}
    
.icon {
	width: 30.5%;
	height:auto;
	margin: 1%;
}
    
.image_fixed{
    width:40%;
	margin:100px 0px 0px 0px;
    position:fixed;
}
}

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

.logo {
    float: left;
    width: 100%;
    margin: 20px 0px 0px 0px;
    clear: right;
}
    
.spacer50 {
    height: 100px;
}

.boxlogo {
    width: 50%;
    height:auto;
    float:left;
    margin:0px auto 0px 25%;
    position:relative;
}
    
.content{
    min-height: auto;
    }
    
.box90 {
    min-height: 100px;
    height: auto;
    width: 94%;
    margin: 50px 3% 0px 3%;
    padding:0px;
}
    
.box75 {
    min-height: 100px;
    height: auto;
    width: 96%;
    margin: 150px 2% 0px 2%;
    padding:0px;
}
    
.boxtext {
    float: right;
    clear: none;
    position:relative;
    height: auto;
    margin: 0px;
    width: 90%;
	z-index:100;
    
}
    
.image_context {
	width: 100%;
	margin: 0px 0px 0px 0px;
	float: left;
	clear: none;
    border-left: 0px solid #ccc;
    border-bottom:0px solid #ccc;
}
    
.openbtn {
    top: 30px;
    right: 5%;
    color: #0e194d;
    font-size: 50px !important;
}

.closebtn {
    top: 30px;
    right: 5%;
    font-size: 50px !important;
}
    
.overlay-content {
    top: 0%;
    width: 100%;
    margin-top: 100px;
}
    
.sendbutton {
	width: 90%;
    margin:20px 5% 50px 5%;
}

.icon-left {
	display:none;
}
   
.icon {
	width: 98%;
	height:auto;
	margin: 1%;
    pointer-events: none; 
}

.monly {
	display:block;
}

.dtonly {
	display:none;
}
	
.box50L {
    float: left;
    clear: both;
    height: auto;
    min-height: 30px;
    margin:  30px 0px 30px 0px;
    width: 100%;
}

.box50R {
    float: left;
    clear: none;
    height: auto;
    min-height: 30px;
    margin: 30px 0px 30px 0px;
    width: 100%;
}
    
.box100 {
    margin: 0px;
    padding: 20px;
    width: 100%;
	z-index:100;
}
    
.box60L {
    margin: 0px;
    padding: 20px;
    min-height: auto;
    width: 100%;
	z-index:100;

}

.box40R {
    margin: 0% 0px 0px 0px;
    padding: 20px;
    width: 100%;
}
    
.box33 {
margin: 0% 0px 0px 0px;
    padding: 20px;
    width: 100%; 
}
    
.boxcontact {
    margin: 20px 20% 0px 20%;
}
    
.image_fixed{
    width:90%;
	margin:150px 5% -50px 5%;
    position:relative;
}  

.image_90{
	width:110%;
	margin:30px 0px 0px -5%;
    border: 1px solid #fff;
	z-index:10;
}

.image_50_quer{
    width:90%;
	height:auto;
	margin:50px 5% 0px 5%;
    border: 1px solid #fff;
	z-index:10;
}
    
.image_50_hoch{
    width:80%;
	margin:90px 10% 0px 10%;
}
    
.transparent7 {
    background: rgba(255,255,255,1.0);
}
}



*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}

.clearfix:after {
	clear: both;
}