@import url('https://fonts.cdnfonts.com/css/verdana-pro-cond');

* {
	margin:0;												/*macht die Abstände an den Seiten weg*/
	padding:0;
	box-sizing: border-box;
} 

	
.BOXEN {
	width: auto; 
	height: 800px;
	background-color: #F9F5EA; 
	font-family: verdana; 
	color: #403E2C;
	display:flex; 
	flex-direction: column; 
	justify-content: center; 
	justify-content: flex-start; 

}

.UEBERSCHRIFT{
	width: auto; 
	height: 100px; 
	font-family: 'Pompiere';
	font-size: 40px; 
	margin: 30px; 
	display:flex; 
	flex-direction: row; 
	justify-content: center; 
	align-self: center; 
	position: relative; 
	top: 50px; 
	z-index:1;
}

hr{
	border-color:#403E2C;
	border-width:1px; 
	z-index: 10;
}

.LINIE {
	padding: 10px; 
	z-index: 2;
	position: relative; 
	width: 820px; 
	left: 300px; 
}

.LINIE2 hr{
	border-color:#403E2C;
	border-width:1px; 
	width: 300px;
	z-index: 10;
	position: relative; 
	left: 810px; 
}

.BESCHREIBUNG {
	width: 800px; 
	display:flex; 
	flex-direction: row; 
	justify-content: center; 
	align-self: center; 
	z-index:2;	
	font-family:'Verdana Pro Cond', sans-serif;
	}

.ARTIKEL {
	position: relative; 
	left: -300px; 
}

.PREIS {
	position: relative; 
	left: 290px; 
}

.INFORMATIONEN {
	width: 800px; 
	display:flex; 
	flex-direction: row; 
	justify-content: center; 
	align-self: center; 
	font-family:'Verdana Pro Cond', sans-serif;
	margin: 10px; 
}

.BLUMEN {
	position: relative; 
	left: -220px; 
}

.BLUMENNAME {
	position: relative; 
	top: 75px; 
	left: -205px; 
	
}

.ANZAHLBLUMEN {
	position: relative;
	top: 75px; 
	left: -130px; 
}

input {
	padding: 5px; 
}

.PREISZAHL {
	position: relative; 
	left: 190px; 
	top: 75px; 		
}

.SUMME {
	width: 800px; 
	display:flex; 
	flex-direction: row;  
	align-self: center; 
	font-family:'Verdana Pro Cond', sans-serif;
	margin: 10px; 
	
}

.TEXT {
	position: relative; 
	left: 500px;
	font-size: 18px; 
}

.ENDPREIS {
	position: relative; 
	left: 590px; 
	font-size: 18px; 
	align-content: flex-end;
	text-align: right; 
}



.GESAMTSUMME {
	width: 800px; 
	display:flex; 
	flex-direction: row;  
	align-self: center; 
	font-family:'Verdana Pro SemiBold', sans-serif;
	margin: 10px; 
}

.GESAMTPREIS {
	position: relative; 
	left: 570px; 
}

.BUTTON {
	width: 800px; 
	display:flex; 
	flex-direction: row;  
	align-self: center; 
	font-family:'Verdana Pro SemiBold', sans-serif;
	margin: 10px; 
}

.BUTTON button:hover {
	 background-color: #e8edc5;
 }

button {
		background-color: #c6ca96;
  		border: none;
  		border-radius: 10px;
 		color: #403E2C; 
 		padding: 15px 32px;
 		text-align: center;
  		text-decoration: none;
  		display: inline-block;
 		font-size: 16px;
 		cursor: pointer;
 		position: relative; 
 		left: 654px; 
 	}
 	
button:hover {
	 background-color: #e8edc5;
 }
 
 	.NAV {
			display: flex;											/* Ausrichtung der Navpunkte in Ebene 1 */
			height: 80px;											/* Höhe der Navbar */
			width: auto;											/* Breite der Navbar */
			background-color: #c6ca96;
			font-family: 'Pompiere';
			font-weight: 750;
		}
		.EBENE1, .EBENE2 a {										/* Formatierung aller Texte in der Navbar */
			display: block;
			line-height: 70px;
			text-decoration: none;
			color: #e8edc5;
		}
		.EBENE1 {													/* Navpunkte in Ebene 1 */
			height: auto;
			width: auto;
			padding: 15px;  
			text-align: center;
			position: relative; 
			padding-top: 7px;
		}
		
		.EBENE1:hover {
			background-color: #e8edc5;
		}
		
		.EBENE2 {													/* Navpunkt in Ebene 2 */
			display: none;											/* Navpunkte anfangs nicht sichtbar */
			position: absolute;										/* Navpunkte gehen nach unten */
			height: auto;
			min-width: 142.5px;
			background-color: #e8edc5;
			font-weight: 500;
			z-index: 9;
			left: 0px; 
			border-radius: 0px 0px 12px 12px; 
		}
		.EBENE2 a:hover {
			background-color:#c6ca96;
		}
		.EBENE1:hover > .EBENE2 {									/* macht Ebene 2 sichtbar */
			display: block;											/* durch Pseudoklasse Hover */
		}
		
		.EBENE1 a {
			font-family: 'Pompiere';  
			font-size: 13pt; 
			letter-spacing: 0.025rem;
			color: #403E2C; 
			text-decoration: none; 
			}
		
		.EBENE2 a {
			font-family: 'Pompiere';  
			font-size: 13pt; 
			letter-spacing: 0.05rem;
			color: #403E2C; 
			text-decoration: none; 
			border-radius: 12px 12px 12px 12px; 
			}
		
		.LOGO {
			position: relative;
			left: 10px;
			top: 10px; 	
		}
		
		#PLATZLINKS {
			margin-left: 250px;
		}
		#WARENKORB {
			position: absolute;
			right:30px;
			top:12px;
		}
			
		.MAIN {
			height: 600px;
			width: 100%;
			background-color: #F9F5EA;	
		}

		.FOOTER {
			
			background-color: #c6ca96;
			font-family: 'Verdana';
			font-size: 12px; 
			line-height: 100%;
			padding: 60px 0;
			color: #403E2C;		
			height: 250px; 
		}
				
		.CONTAINER{
			max-width:1200px;
			margin:auto;
		}
		
		.ROW{
			display: flex;
			flex-wrap: wrap;
		}
		
		ul{
			list-style: none;
		}
		

		.FOOTER-COL{
		   width: 25%;
		   padding: 0 15px;
		}
		
		.FOOTER-COL h4{
			font-family: 'Pompiere';
			font-size: 20px; 
			letter-spacing: 0.05rem;
			margin-bottom: 35px;
			position: relative;
		}
		
		.FOOTER-col h4::before{
			content: '';
			position: absolute;
			left:0;
			bottom: -10px;
			background-color: #c6ca96;
			height: 2px;
			box-sizing: border-box;
			width: 50px;
		}
		
		.FOOTER-COL ul li:not(:last-child){
			margin-bottom: 10px;
		}

		.FOOTER-COL ul li a{
			color: #403E2C;
			text-decoration: none;	
			display: block;
			transition: all 0.3s ease;
		}
		
		.FOOTER-COL ul li a:hover{
			padding-left: 8px;
		}
		
		.FOOTER-COL ul li {
			color: #403E2C;
			text-decoration: none;	
			display: block;
			transition: all 0.3s ease;
		}
		
		.SOCIALMEDIA {
			position: relative; 
			left:-10px;
			bottom:22px;
		}