/*
blue: #0078E6   
gray: #7D7D7D


---Mögliche Fonts---
Verdana
*** Century Gothic
Candara
Trebuchet MS

Padding = innerer abstand zum Rahmen
Marign = abstand zum block Rahmen

*/



/* ------------------------------------------------------------->>Main Settings*/


/*source-sans-pro-regular - latin */
@font-face {
  font-family: 'Century Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/CenturyGothic.woff2') format('woff2');

}








html{
	/*overflow-y:scroll;*/
	font-size: 100%; /* base size for rem*/
	font-family: 'Century Gothic';
}

/* ------------------------------------------------------------->>Text format*/
h1{
	font-size: 2.6rem;
	font-weight: 400;
	/*text-decoration: none;*/
	color: #0078E6;
}

h2{
	font-size: 2.0rem;
	font-weight: 400;
	text-decoration: none;
	color: #0078E6;
	Padding-bottom: 0.75rem;
	margin: 0;
	opacity: 1;
}

h3{
	font-size: 1.6rem;
	font-weight: 400;
	text-decoration: none;
	color: #0078E6;
	Padding-bottom: 0.4rem;
	margin: 0;
	opacity: 1;
}


t1{
	/*display: inline-block;*/
	font-size: 1.7rem;
	font-weight: 300;
	text-decoration: none;
	color: #555555;
	Padding: 0;
	margin: 0;
}

t2{
	/*display: inline-block;*/
	font-size: 1.5rem;
	font-weight: 200;
	text-decoration: none;
	color: #555555;
	Padding: 0;
	margin: 0;
}

t3{
	/*display: inline-block;*/
	font-size: 1.3rem;
	font-weight: 300;
	text-decoration: none;
	color: #555555;
	Padding: 0;
	margin: 0;
}

t4{
	display: block;
	text-align: left;
	width: 100%;
	color: #7d7d7d;
	font-size: 2rem;
	font-weight: 300;
	margin-top: 1rem;
	Padding-bottom: 4rem;
}





	
/* ------------------------------------------------------------->>Main Structur*/

#background_standard{
	/*position: fixed;*/
	width: 100%;
	height: 100%;
	background-image: url("../images/background/background-standard.jpg");
	overflow: hidden;	
	z-index: -1;
	background-size: cover;
	background-attachment: fixed;    
		background-position: center
	
	/*

	
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	background-attachment: fixed;
	
	/*position: abolute;*/
	/*background-attachment: fixed;*/
}
#background_2{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../images/background/background_2.jpg");
	/*position: abolute;*/
	/*background-attachment: fixed;*/

}

#body{
	background-color: #ffffff;
}

#main_container{

}

/* ------------------------------------------------------------->>Main Menu*/

#Nav-Desk{  /* box des Menüs*/
	padding-top: 0;
	display: block;
	text-align: center;
	/*border-Bottom: #7d7d7d solid 0.15rem; /*sichtbar machen des Kasten*/
}

#Nav-Desk ul{ /*oberste List, sichtbares Hauptmenü*/
	padding: 0;
	z-index: 1;
	
}

#Nav-Desk ul ul{ /*mittlere Liste, erstes Aufklappmenü*/
	overflow: hidden;
	position: absolute;
	background-color: #ffffff;
	width: 0;
	Padding-top: 1rem;
	margin: 0;
}




#Nav-Desk ul li{
	display: inline-block;
	text-align: center;
	position: relative; /* Ausrichtung des Untermenü*/
	/*border: solid #f5f5f5 3px;*/
	max-width: 15rem;

}

#Nav-Desk a{   /*Test formatierung mit Rahmen, des Menüs*/
	display: inline-block;
	text-align: center;
	margin: 0 0.6rem;
	padding: 0.2rem 0.6rem 0.2rem 0.6rem;
	font-size: 1.4rem;
	text-decoration: none;
	color: #0078E6;
	border-Bottom: #7d7d7d solid 0.13rem;
	transition: 600ms;
}

/* ------------------------------------------------------------->>Submenu*/

#Nav-Desk ul ul li{
	width: 100%;
	border-bottom: #dddddd solid 0.1rem;
	margin: 0;

}


#Nav-Desk ul li ul li a{
	display: block;
	text-align: center;
	margin: 0;
	padding: 0.8rem 0.8rem 0.8rem 0.8rem;
	
	width: 90%;
	color: #0078E6;
	border-Bottom: transparent solid 0.15rem;
}

/* ------------------------------------------------------------->>Mouse-over*/

#Nav-Desk ul li a:hover {
	background-color: #dddddd;
	border-Bottom: #0078E6 solid 0.15rem;
	color: #333333;
	border-radius: 0.3rem;
}

#Nav-Desk ul li:hover > ul {  /*erstes Untermenü*/
	width: 12rem;
	height: auto;
	border: #333333 solid 0.15rem;
	overflow: visible;
}

#Nav-Desk ul ul li:hover > ul {   /*zweites(letztes) Untermenü*/
	width: 15rem;
	height: auto;
	border: #333333 solid 0.15rem;
	overflow: visible;
	top:0;
	left:100%; /*verschiebung nach rechts des zweiten untermenüs*/
}

/* ------------------------------------------------------------->>Mobile-menu*/

#Nav-Mobile {
	display: none;
}


/* ------------------------------------------------------------->>header*/

#header{
	display: inline-block;
	text-align: center;
	background-color: #ffffff;
	width: 100%;
	z-index: 100;
}

#header_logo_cont{    /* Conatiner um Logo auf kleineren Dispalys zu zentrieren*/
	/*margin: 1.5rem 5rem 1.5rem 5rem;*/
	/*display: inline-block;*/
	/*float: left;
	margin-left: 5rem;*/
	/*float: none;*/
	text-align:center;
	/*border: solid #f5f5f5 1px; /*Rahmen zum einblenden*/
}

#header_logo{
	/*margin: 10px 5rem 10px 5rem;*/
	display: inline-block;
	/*margin-top:2%;
	margin-left:4%;
	margin-bottom:2%;
	float: left;*/
	/*width: 90%;*/
	width: 20%;
	max-width: 400px;
	min-width: 240px;
	Padding: 15px 0% 15px 4%;
	float: left;   /*ausrichtung Links für monitor, in media "zentriert"*/
	/*border: solid #f5f5f5 1px;*/
}

#header_menu{
	display: inline-block;
	text-align: center;
	float: right;
	/*padding: 25px;*/
	padding-top: 50px;
	padding-right: 10%;
	Padding-bottom: 5px;
	/*margin-top: 4rem;
	margin-bottom: 1rem;
	margin-right: 10%;*/
	/*min-width: 55rem;*/
	/*border: solid #ccc 1px; /*sichtbar machen des Kasten*/
}

/* ------------------------------------------------------------->>footer*/

footer{
	display: inline-block;
	text-align: center;
	width: 100%;
	padding-top: 1rem;
	background-color: #ffffff;
}

footer ul{
	Padding-left: 0;
}

footer ul li{
	display: inline-block;
	margin: 1rem;
	text-align: center;
	list-style: none;
	border-Bottom: #7d7d7d solid 0.15rem;
	max-width: 10rem;
}

footer ul li a{
	display: block;
	font-size: 1.2rem;
	font-weight: 300;
	text-decoration: none;
	background-color: #ffffff;
	color: #0078E6;
}

#footer_adress{
	display: inline-block;
	text-align: center;
	width: 100%;
	color: #7d7d7d;
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 1rem;
	Padding-bottom: 4rem;
}

/* ------------------------------------------------------------->>Link - Button - Checkbox - Antispam*/

/* -------------- Link */
.link {
	color:#0078E6;

}

.link:hover {
	color:#777777;
}

/* -------------- Button */
.button{
	font-size: 1.8rem;
	font-weight: 400;
	color: #0078E6;
	background-color: #ffffff;
	padding: 0.5rem 1rem;
	border: #7d7d7d 0.2rem solid;
	cursor: pointer;
	transition: 400ms;
	margin-top: 0.8rem;
}

.button:hover {
	background-color: #cccccc;
	border: #333333 0.2rem solid;
	border-radius: 0.5rem;
}

/* -------------- Checkbox */
input#check  {
  display: none;
}
input#check + label { /* Checkbox-Hintergrund*/
  width: 3.6rem;
  height: 1.8rem;
  border-radius: 1.8rem;
  border: 0.18rem solid #aaaaaa;
  background-color: #bbbbbb;
  display: inline-block;
  content: "";
  float: left;
  margin-right: 1rem;
  transition: background-color 0.5s linear;
  margin-top: 1rem;
  cursor: pointer;
}

/*input[type="checkbox"] + label::before { /* Checkbox-Schalter*/

input#check + label::before { /* Checkbox-Schalter*/
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 1.8rem;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 1rem;
  transition: margin 0.1s linear;
}

input#check:checked+label{
  background-color: #0078E6;
}

input#check:checked+label::before {
  margin: 0 0 0 1.8rem;
}

/* -------------- Antispam */

span.antisp{
	display:none;
}
/* ------------------------------------------------------------->>Content Structur*/

#content_left{
	display: block;
	text-align: left;
	background: rgba(250, 250, 250, 0.85);
	border-radius: 0.5rem;
	min-width: 50%;
	/*max-width:65%;*/
	margin: 5%;
	padding: 4%;
	overflow: hidden;	
	font-size: 1.7rem;
	font-weight: 400;
	text-decoration: none;
	color: #555555;
    /*border: 0.2rem red solid;*/
	
}

#ella{
	font-family: 'Century Gothic';
	display: block;
	text-align: left;
	width: 100%;
	color: #7d7d7d;
	font-size: 2rem;
	margin-top: 1rem;
	Padding-bottom: 4rem;
}
/*
#content_center{
	display: inline-block;
	text-align: center;
	margin: 1rem 15rem;
	
}

#content_ind{
	display: inline-block;
	text-align: left;
	float: left;
	margin: 6rem 10rem;
	background: rgba(250, 250, 250, 0.7);
	padding: 3rem;
	width: 45%;
	border-radius: 0.5rem;
}
*/
/* ------------------------------------------------------------->>Aufteilung Kontaktformular*/

#leftside{
	padding-top: 0.5rem; /* Wenn Anrede Herr/Frau fehlt*/
	float: left;
	width: 31rem;
	/*border: 0.2rem red solid;*/
}

#rightside{
	float: right;
	width: 55%;
	/*border: 0.1rem red solid;*/
}

#query{

    width: 90%;
	resize: none;
	font-size: 1.3rem;
	font-family: var(--main-font);
	font-weight: 300;
	padding: 1rem;


}



#forename, #surename,#street, #title, #nr, #zip, #city, #phone, #email{
	font-size: 1.4rem;
	color: #DBDBDB;
}

#forename, #surename,#street, #title, #nr, #zip, #city, #phone, #email{
		margin-right: 2%
}

#forename, #surename{width: 43%}
#street , #city{width: 66%}
#nr, #zip {width: 20%}
#phone,#email{width: 91%}

#error0em, #error5em, #error10em, #error15em, #error20em {
  color: #ff0000;
  font-size: 1.4rem;
  font-family: var(--main-font);
  border: 0.2rem red solid;
  background-color:#ffffff;
  margin-right: 0.3rem
}

#error5em {width: 19%}
#error10em {width: 44%}
#error15em {width: 69%}
#error20em {width: 92%}

/* ------------------------------------------------------------->>Mitarbeiter*/

#block{
	display: inline-block;
	width: 100%;
	/*height: auto;*/
	Padding-bottom: 5rem;
	/*border: 0.2rem red solid;*/
}

#left{
	
float:left;

width: 70%;
/*border: 0.2rem blue solid;*/

}

#right{
display: inline-block;
float:right;
width: 20%;
padding-right: 5%;
/*border: 0.2rem red solid;*/
text-align: center;
}

#Profile_pic{
width: 13rem;
}


/* ------------------------------------------------------------->>Gästebuch*/

#gbname{
	font-size: 1.4rem;
	font-weight: 300;
	font-family: var(--main-font);
	width: 28rem;
	padding: 0.5rem;
}

#gbent{
	resize:none;
	font-size: 1.4rem;
	font-weight: 300;
	font-family: var(--main-font);
	width: 80%;
	padding: 1rem;
}


/* ------------------------------------------------------------->>Fußböden-menü*/

#Fußbodenmenu-mobil {
	display: none;
}


#Fußbodenmenu-pc{
/*border: 0.2rem red solid;*/
display: inline-block;
max-width: 60rem;
}

#cont1 {
	float:left;
	margin-right: 1rem;
	width: 25rem;
	/*border: 0.02rem red solid;*/
}

.menu-boden{
	padding-left: 2rem;
	padding-bottom: 1rem;
}

.menu-boden li{
	list-style: none;


}
.menu-boden a{
	display: inline-block;

	/*font-family: var(--main-font);*/

	font-size: 1.6rem;
	text-decoration: none;
	color: #7d7d7d;
	/*border-Bottom: #7d7d7d solid 0.13rem;*/
	transition: 10ms;
	margin-bottom: 1rem;
	Padding:0.3rem;
	
}

.menu-boden a:hover {
	background-color: #cccccc;
	color: #0078E6;
	border-radius: 0.3rem;
	/*border-Bottom: #0078E6 solid 0.15rem;
	/*Padding:0.3rem;*/
}

/* ------------------------------------------------------------->>Fußböden-Einzelseiten*/

img.sample_pic{
/*display: flex;*/
max-width: 35rem;
float: right;
Padding: 3rem;

/*border: 0.2rem red solid;*/
}


#content_fub{
	float:right;
	/*max-width:20%;
border: 0.2rem red solid;
display: inline-block;

padding-right: 3rem;
/*border: 0.2rem red solid;*/
/*text-align: left;*/
}


/* ------------------------------------------------------------->>Screen_specials*/





/* ------------------------------------------------------------->>Screen_specials*/





/* ------------------------------------------------------------->>Screen_specials*/



@media (max-width: 2000px){ /*bis 2000px - PC Bildschirm*/
	html {
	  font-size: 80%;
	}
}


@media (max-width: 1279px){ /*bis 1279px-- ausrichtung mittig*/
	html {
		font-size: 65%;
	}
	#header_logo{  
		float: none;
		padding: 1%;
	}

	#header_menu{
		padding: 10px;
		width: 100%;
	}

	#rightside{
		width: 100%;
	}

	#content_left{	
		background: rgba(250, 250, 250, 0.9);
		/*min-width: 75%;*/
	}
	
	/*#left{
		width: 65%;
	}*/
	
	#query{

    width: 75%;
	}
	
	img.sample_pic{
	max-width: 30rem;

	}
}








@media (max-width: 768px){ /*---------------------------------------------------------------bis 768px*/

html {
		font-size: 65%;
	}
	
	
	
#background_standard{
		background-image: url("../images/background/background-standard-m.jpg");
}	

#content_left{
	/*
	display: inline-block;
	text-align: left;	
	background: rgba(250, 250, 250, 0.85);
	
	border-radius: 0.5rem;
	
	
	margin: 5%;
	padding: 1.5rem;*/
	
	min-width: 82%;
	max-width: 82%;
	background: rgba(250, 250, 250, 0.85);
	float:left;

}



img.sample_pic{
max-width: 90%;
Padding-left: 5%;

}


#forename, #surename,#street, #title, #nr, #zip, #city, #phone, #email{
	font-size: 1.8rem;

}

#query{
	width: 93%;
	font-size: 1.6rem;
}



#Nav-Desk{
	display: none;
}

#Profile_pic{
width: 8rem;
}


#Nav-Mobile {
	display: inline-block;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
	/*border: #7D7D7D 2px solid;
	border-radius: 3px;*/

}



/* mobile menu icon & animation */

label.menu-button-container { 
   display: inline-block;
   background: #7D7D7D; width: 50px; height: 50px; 
   position: relative; 
   border-radius: 4px; 
}

input#menu-toggle {display:none} /*ausblenden der checkbox*/

.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 32px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }


/*Was bedeutet #hamburg:checked + .hamburg .line:nth-child(1)? Wenn das Element mit ID hamburg angeklickt wurde, und direkt danach ein Element mit class="hamburg" liegt, dann rotiere die Linie.*/
/*linen drehen zu einen Kreuz*/
#menu-toggle:checked + .menu-button-container .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#menu-toggle:checked + .menu-button-container .line:nth-child(2){
   opacity:0;
}

#menu-toggle:checked + .menu-button-container .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

/* Mobil menu toggle------------------------------*/


.menu-button-container {
    display: flex;
  }
  
.menu {
    position: absolute;
    top: 100;
	right:0;
    flex-direction: column;
    width: 100;
    justify-content: right;
    align-items: right;

  }
  
  
.menu a{
	color: #555555;
	text-decoration: none;
  }
  
  
  #menu-toggle ~ .menu li {  /* Erstes menü (hauptregiester), standartwerte + ausblenden*/
	display: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
	/*background: #ffffff;*/

	font-size: 2rem;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
 
  #menu-toggle:checked ~ .menu li { /* Erstes menü, einblenden wenn mobile nav angeklickt*/
	display: inline-block;
    border: 1px solid #333;
    height: 2.5rem;
    padding: 1.5rem;
	color: #555555;
	float:right;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  
   .menu li { /* Erstes menü, einblenden wenn mobile nav angeklickt*/
	display: inline-block;
    border: 1px solid #333;
    height: 2.5rem;
    padding: 1.5rem;
	color: #555555;
	float:right;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  
  .menu > li {
    display: flex;
    justify-content: right;
    margin: 0;
    padding: 0;
    width: 50%;
    color: white;
    background-color: #ffffff;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }





/*-----------------Fußboden-menü*/
/*-----------------Fußboden-menü*/
/*-----------------Fußboden-menü*/

#Fußbodenmenu-mobil{
	display: inline-block;
}

#Fußbodenmenu-pc{
display: none;
}

.menu-item {
            border-bottom: 1px solid #e0e6ec;
        }

.menu-item:last-child {
	border-bottom: none;
}

/* Verstecken der Checkboxen */
.toggle-menu-fbm {
	display: none;
}

/* Styling für die Hauptmenü-Buttons */
        .main-menu-label {
            display: inline-block;
            padding: 5px;
            cursor: pointer;
            transition: background-color 0.5s ease;
            position: auto;

        }

        .main-menu-label:hover {
            background-color: #DBDBDB;
			border-radius: 0.3rem;
        }
		
		
		
  /* Untermenü-Styling */
        .submenu {
            display: block;
            padding-left: 3rem;
            margin: 0.5rem 0rem 0.5rem 0rem ;
            max-height: 0; /* Versteckt das Menü standardmäßig */
            overflow: hidden;
			list-style: none;
            transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
        }

        .submenu-item a {
            display: inline-block;
            Padding: 0.3rem;
			Margin-Top: 0.4rem;
			font-size: 2rem;
            text-decoration: none;
			
            color: #7d7d7d;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .submenu-item a:hover {
            background-color: #DBDBDB;
            color: #0078E6;
        }
  /* Die Magie: Wenn die Checkbox angeklickt ist... */

        
        /* ... wird die maximale Höhe des Untermenüs geändert, um es anzuzeigen */
        .toggle-menu-fbm:checked ~ .submenu {
            max-height: 1000px; /* Ein großer Wert, der ausreicht */
        }
  
  
  
  
  
  /*
  .menu-boden a{
	display: inline-block;
	font-size: 1.6rem;
	text-decoration: none;
	color: #7d7d7d;
	transition: 10ms;
	margin-bottom: 1rem;
	Padding:0.3rem;
	
}
  */
  
  
  
  
  
  
  
  /*
   .menu-boden-fbm li { 
	display: inline-block;
    border: 1px solid #333;
    height: 2.5rem;
    padding: 1.5rem;
	color: #555555;
	float:right;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  
  .menu-boden-fbm > li {
    display: flex;
    justify-content: right;
    margin: 0;
    padding: 0;
    width: 50%;
    color: white;
    background-color: #ffffff;;
  }
*/






  }  /*<<<<< Ende Mobile pref*/





/*
	html {
		font-size: 65%;
	}
	#header_logo{  
		float: none;
		padding: 1%;
	}

	#header_menu{
		padding: 10px;
		width: 100%;
	}

	#rightside{
		width: 100%;
	}

	#content_left{	
		background: rgba(250, 250, 250, 0.9);
		min-width: 75%;
	}
	
	#left{
		width: 65%;
	}
*/

}



/*

@media (max-width: 1660px){
	
html {
  font-size: 100%;
}


#header_left{
	float: none;
	text-align: center;
	width: 100%;

	margin: 2rem 0;
}

#header_right{
	display: inline-block;
	text-align: center;
	float: none;
	width: 100%;
	margin:0;
	margin-bottom: 1rem;

}

#Nav-Desk ul li a{
	font-weight: 400;
}

#content_left{
	margin: 5%;
}
}


@media (max-width: 1024px){
	
html {
  font-size: 45%;
}
*/

	
/*------old background
.crossfade > figure {
	position: absolute;
  animation: imageAnimation 32s linear infinite 0s;
  backface-visibility: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	background-repeat: no-repeat;
  color: transparent;
  height: 100%;
  width: 100%;
  opacity: 0;
  
  margin: 0;

  z-index: -1;
}
*/