@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-display: swap;
}

strong{
	font-weight: 599;
}


body{
	display: flex;
	flex-direction: column;
	font-family: "Montserrat", serif;
	padding: 0px;
	margin: 0px;
	scroll-behavior: smooth;
}
	
button{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
}


	.main{
		display: flex; 
		flex-direction: column;
		font-family: "Montserrat", serif;
		flex: 1;
	}
	
	
	#header-wrapper{
		display: flex;
      flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;	
	}

	#header-wrapper p{
		margin: 0px;
	      text-align: center;
	}
	/*Hero-section*/
	#hero-section{
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		flex-direction: row;
		align-self: center;
		justify-self: center;

	}
	
	#image-section{
		display: flex;
		flex: 1;
		min-width: min(92vw, 500px);
		padding: 50px 4vw;
		object-fit: contain;
		align-items: center;
		justify-content: center;
	}
	
	
	
	#start-image{
		object-fit: contain;
		width: 100%;
		max-width: 700px;
		margin: 0px; 
    	box-shadow:
    		8px 8px 20px #752922, /* rot */
    		-8px -8px 20px rgba(8, 154, 55, 0.7);   /* grün */
	}
	
	#text-section{
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		min-width: min(92vw, 600px);
		padding: 0px 4vw;
		
	}
	
	#home-text{
	text-align: justify;
	font-family: "Montserrat", serif;
	margin: 0px 50px;
	font-size: 18px;
	}
	
	#home-text strong{
		width: 100%;
		text-align: center;
	}
	
	#hero-header{
		display: flex;
		justify-content: center;
		font-family: "Montserrat", serif;
		text-align: center;
		
	}
	
	#hero-wrapper{
		display: flex;
		flex-direction: column;
	}
	
	#button-section{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 20px;
	}
	
	.hero-button p{
		margin: 0px;
		white-space: nowrap;
	}
	
	
	.hero-button{
		text-decoration: none;
		color: black;
		margin: 10px 20px;
		padding: 18px;
		font-family: "Montserrat", serif;
		font-weight: 599;
		font-size: 1em;
		background-color: white;
		box-shadow: 0px 0px 10px #777777;
		border-radius: 6px;
		transition:
			background-color 0.3s ease;
	}
	
	.hero-button:hover{
		background-color: #cccccc
	}
	
	#footer{
	display: flex;
	border-top: #aaaaaa 2px solid; 

	}
	#footer-menu{
		display: flex;
		flex: 1;
		flex-direction: row;
		margin: 15px 80px;
	}
	
	.footer-menu-item{
		display: flex; 
		flex: 1;
		justify-content: center;
	}
	.footer-menu-item:hover{
	font-weight: bold;
	}
	
	.footer-menu-item-link{
		font-size: 12px;
		text-decoration: none;
		color:  #767676;
	}
	

	
	
	
	



@media (max-width: 800px) {
	#footer-menu{
		margin: 15px 0px;
	}
}	

@media (hover: none) {
	
	#footer-menu{
		display: grid;
		grid-template-columns: repeat(2, 3fr);
	}
  
  	#footer-menu a{
    	font-size: 25px;  
  	}
	
	#footer-menu li{
		margin: 5px 0px;
	}
	
	  
  	.hero-button p{
   		font-size: 23px;   
  }
	
}