@font-face {
  font-family: 'Raleway';
	src: url('./fonts/raleway-regular.ttf') format('truetype'),
}

@font-face {
  font-family: 'Cormorant Garamond';
	src: url('./fonts/cormorantgaramond-regular.ttf') format('truetype'),
}

* {
	margin: 0px;
	padding: 0px;
}

.colorPickSelector {
  border-radius: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

body {
	font-family: Raleway;
	font-size: 12pt; 
	line-height: 150%;
  color: #FCFCFC;
 	max-width: 1600px;
 	margin-left: auto;
  margin-right: auto;
  background-image: url("wallpaper.png");
	}

table {
	border-spacing: 0px; 
	}

h2 {
  font-family: "Cormorant Garamond";	
  padding-bottom: 25px;
  line-height: 110%;
	font-size: 32pt;
  text-align: center;
  color: #F3E8D3;

  }
 
h3 {
  font-family: "Cormorant Garamond";	
  padding-bottom: 25px;
	font-size: 22pt;
  text-align: center;
  color: #F3E8D3;
  }
   
div {
	padding: 0px;
  }

a {
	color: #FCFCFC;
	text-decoration: none;
  }

a:visited {
	color: #FCFCFC;
	text-decoration: none;
	}

#impressum {
	padding-top: 80px;
  background-color: #191919;	
}
		
#header {
  height: 50px;
  width: 100%;
 	max-width: 1600px;
  background-color: #585858;
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  }		

#header div {
	width: 50%;
}

#header .left {
  font-family: "Cormorant Garamond";	
	font-size: 14pt;
	padding-left: 12px;
  }

#header .right {
  text-align: right;	
	font-size: 14pt;
	padding-right: 12px;
  }

#header a {
	background-color: #3F7652;
	border: 0px;
	border-radius: 10px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
	font-weight: bold;
}
  
#header a:hover {
	background-color: #67C287;
}  

#breaking {
  width: 100%;
  color: black;
 	max-width: 1600px;
  background-color: #FEF8D3;
  position: fixed;
  top: 50;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }		

  
#top {
  margin-top: 50px;
	background-color: #191919;
	padding-top: 50px;
  }

#top img {
  max-width: 100%;
  height: auto;
}
  
#top ._1 {
}  
  
#top ._2 {
	text-align: center;
}

#top ._2 > p {
	width: 60%;
	margin-left: auto;
  margin-right: auto;
 	line-height: 180%;
  }

#top .logo {
	padding-top: 50px;
	padding-bottom: 50px;
}

#gruss {
 	line-height: 180%;
  margin-top: 80px;
	padding-right: 25px;
}

#gruss .logo {
  padding-bottom: 50px;
  }



#oeffnungszeiten {
	padding-top: 25px;
	background-color: #191919;
	display: flex;
  justify-content: center;
  align-items: center;
  }

#oeffnungszeiten_container_outer {
  width: 710px;
  position: relative;
  left: 0%;
	padding-bottom: 80px;
  text-align: right;
  }
 
#oeffnungszeiten_container_inner  {
  position: absolute;
  top: 20%;  
  left: 00%;
	width: 450px;
	height: 450px;
	opacity: 100%;
	background: #323232;
	text-align: center;
	}

#oeffnungszeiten_container_inner h2 {
	margin-top: 25px;
	font-size: 22pt;
  }

#oeffnungszeiten_container_inner table {
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 30px;
  }

#oeffnungszeiten_container_inner td.r1 {
  text-align: right;
  padding-right: 10px;
	}

#oeffnungszeiten_container_inner td.r2 {
	text-align: center;
	}

#oeffnungszeiten_container_inner td.r3 {
  padding-left: 6px;
  padding-right: 10px;
	text-align: center;
	}

#oeffnungszeiten_container_inner td.r4 {
	text-align: center;
	}

#oeffnungszeiten_container_inner p {
	margin-bottom: 20px;
	}

#oeffnungszeiten_container_inner a {
	background-color: #3F7652;
	border: 0px;
	border-radius: 10px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
}
  
#oeffnungszeiten_container_inner a:hover {
	background-color: #67C287;
  } 

#oeffnungszeiten_mobile {
  display: none;
  }

#aktuelles {
	background-color: #F3E8D3;
	color: #FCFCFC;
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 10px;
}	
	
#aktuelles p {
  text-align: center;	
  font-size: 14pt;
  color: #191919;
  }

#aktuelles h2 {
	color: #191919;
  }
  
#haare {
  background-color: #191919;
	font-size: 14pt;
  margin-bottom: 0px;
  display: flex;
  justify-content: left;
  align-items: left;   
  }	

#haare div {
}

#haare h3 {
  text-align: left;
  }

#haare img {
  padding-right: 50px;
  height: auto;
  }

#haare .text {
  }



#service {
	background-color: #191919;
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 25px;
}	
	
#service p {
  text-align: center;	
  font-size: 14pt;
  }




#leistungen {
	background-color: #191919;
	display: flex;
  justify-content: center;
  align-items: baseline; 
  flex-direction: row;
  flex-wrap: wrap;
  }

#leistungen .leistungen_box  {
  width: 40%;
  padding: 20px;
  text-align: center;
  }  
  
#leistungen .leistungen_box > img {
  width: 100%;
  height: auto;
  }    

#pflichten {
	background-color: #F3E8D3;
	color: #191919;
	font-size: 14pt;
  margin-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: baseline;  
  }

#pflichten div {
	 width: 40%;
   margin: 50px;
}

#pflichten h3 {
	color: #191919;
  }

#expertin {
	background-color: #6E8C4D;
	background-image:url("background_wood.webp");
	color: #FCFCFC;
	font-size: 14pt;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  }
  
#expertin p {
	text-align: center;
 	margin-left: auto;
  margin-right: auto;
 	width: 80%;
	line-height: 150%;
  }
	
#kako {
  background-color: #191919;
	font-size: 14pt;
  margin-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;   
  }	

#kako div {
	 width: 50%;
   margin: 50px;
}

#kako img {
	margin: 15px;
  width: 100%;
  height: auto;
  }
	
#kontakt {
	background-color: #F3E8D3;
	color: #FCFCFC;
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	text-align: center;
	justify-content: center;
  flex-direction: column;
  }
  
#kontakt p {
	color: #191919;
  }
  
#kontakt img {
	padding: 15px;
  }
  
#kontakt h2 {
	color: #191919;
  }
    
#footer {
	height: 50px;
  background-color: #585858;
	display: flex;
  justify-content: center;
  align-items: center;
  }  
  
#footer a:hover {
	background-color: #C0C0C0;
  }

/* --------------------------------------------------------------------------------------------------------- */
/* - ANPASSUNGEN FÜR RESPONSIVE DESIGN --------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */

@media all and (max-width: 710px) {

body {
 	width: 100%;
	}

		
#header {
  width: 100%;
  background-color: #191919;
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }		

#header div {
	width: 100%;
}

#header .left {
	padding-left: 0px;
  font-family: "Cormorant Garamond";	
	font-size: 14pt;
	text-align: center;
	padding-bottom: 0px;
	padding-top: 35px;
  }
 

#header .right {
	width: 50%;
	text-align: center;
	font-size: 14pt;
	padding-bottom: 15px;
	padding-top: 5px;
  }  


#header a {
	background-color: #3F7652;
	border: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-radius: 10px;
	color: #FFFFFF;
	font-weight: bold;
}
  
#header a:hover {
	background-color: #67C287;
}  

#breaking {
	padding-top: 15px;
}
  
#top {
  margin-top: 50px;
	background-color: #191919;
	padding-bottom: 25px;
  }

#top img {
  max-width: 100%;
  height: auto;
}
  
#top ._1 {
}  
  
#top ._2 {
	text-align: center;
}

#top ._2 > p {
	width: 80%;
	margin-left: auto;
  margin-right: auto;
 	line-height: 180%;
  }

#top .logo {
	padding-top: 50px;
	padding-bottom: 50px;
	width: 100%;
	height: auto;
}

#gruss {
 	line-height: 180%;
  margin-top: 80px;
}

#oeffnungszeiten {
	display: none;
  }
 
#oeffnungszeiten_mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
	background-color: #F3E8D3;
	color: #191919;
	font-size: 14pt;
  padding-top: 10px;
  padding-bottom: 10px;
  }  

#oeffnungszeiten_mobile h2 {
  color: #191919;
	}

#oeffnungszeiten_mobile table {
  padding-bottom: 30px;
	}

#oeffnungszeiten_mobile td.r1 {
  text-align: right;
  padding-right: 10px;
	}

#oeffnungszeiten_mobile td.r2 {
	text-align: center;
	}

#oeffnungszeiten_mobile td.r3 {
  padding-left: 6px;
  padding-right: 10px;
	text-align: center;
	}

#oeffnungszeiten_mobile td.r4 {
	text-align: center;
	}
	
#oeffnungszeiten_mobile td.r5 {
	text-align: center;
	}	

#oeffnungszeiten_mobile p {
	text-align: center;
	}	
	
#service {
	background-color: #191919;
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 15px;

}	

#service p {
  text-align: center;	
  font-size: 14pt;
  padding-bottom: 15px;
  }


#haare {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }		
  
#haare .text {
	margin-bottom: 15px;
	  text-align: justify;
}

#haare img {
  padding-right: 0px;
  height: auto;
  }

#haare h3 {
  text-align: center;
  }

#leistungen {
	background-color: #191919;
  }

#leistungen .row {
	display: flex;
  justify-content: center;
  align-items: baseline;  
  flex-direction: column;
  }

#leistungen .leistungen_box  {
  padding: 0px;
	width: 100%
  }  

#leistungen .leistungen_box_single  {
	width: 100%;
  }  

#leistungen .leistungen_box > img {
	width: 100%;
  height: auto;
  padding-bottom: 15px;
  }

#leistungen p {
  padding-bottom: 15px;
  text-align: justify;
  }
	
#pflichten {
	background-color: #F3E8D3;
	color: #191919;
	font-size: 14pt;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: baseline;  
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
  }

#pflichten div {
	width: 100%;
  margin: 0px;
  padding-bottom: 30px;
  }

#pflichten h3 {
	color: #191919;
	padding-top: 3px;
	padding-bottom: 15px;
  }

#expertin {
	background-color: #6E8C4D;
	background-image:url("background_wood.webp");
	color: #FCFCFC;
	font-size: 14pt;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  }

#expertin p {
	text-align: center;
  width: 100%;
	line-height: 150%;
  }
	
#kako {
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #191919;
}	

#kako img {
	width: 100%;
	height: auto;
	padding-bottom: 10px;
	margin: 0px;
}

#kako p {
  text-align: center;	
  padding-bottom: 20px;
  }

#kako div {
	 width: 100%;
	 margin: 0;
}
	
#kontakt {

	font-size: 14pt;
	padding-top: 15px;
	padding-bottom: 15px;
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }
  
#kontakt p {
 	text-align: center;
	color: #191919;
  }
  
#kontakt h2 {
	color: #191919;
  }

#footer {
	height: 50px;
  background-color: #191919;
	display: flex;
  justify-content: center;
  align-items: center;
  }  
  
#footer a:hover {
	background-color: #C0C0C0;
  }

}