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

body { 
	background-color: #F9F5EA;
}
			
.TEXT {
	font-family: 'Verdana';
	font-size: 15px; 
	color: #403E2C;
	height:350px;											
	width:auto;
	display: flex;
	flex-direction:column; 
	justify-content: center; 
	margin: 30px; 
	position: relative;  
}

.VERSANDARTEN {
	font-family: 'Pompiere';
	font-size: 40px; 
	align-self: center;
	text-align: center; 
	line-height: 150%;
	margin: 20px; 
}

.INHALT{
	height: auto; 
	width: 700px;
	align-self: center;
	text-align: center; 
	line-height: 150%;
	}

			
.TEXTUNTEN {
	font-family: 'Verdana';
	font-size: 15px; 
	color: #403E2C;
	height:470px;											
	width:auto;
	display: flex;
	flex-direction:column; 
	justify-content: center; 
	margin: 20px; 
	position: relative; 
	top: -75px; 

}

.INHALTUNTEN{
	height: auto; 
	width: 700px;
	align-self: center;
	text-align: center; 
	line-height: 150%;
	}

.UEBERSCHRIFT {
	font-family:'Pompiere';
	font-weight: 750;
	font-size: 20px; 
	line-height: 150%;
	margin: 5px; 
}

.BOXPOSITION {
	display: flex; 
	flex-direction: row; 
	width: auto; 
	height: 800px; 
	justify-content: center; 
}

.BOXEN{
	display: inline-grid;
	grid-template-columns: repeat(2, 2fr);
	grid-gap: 50px;
	align-self: center; 
	position: relative; 
	top: -40px; 
	bottom:50px;	 											
	height:800px;											
	width:800px;											
	background-color:transparent;
	font-family: 'Pompiere';
	font-weight: 750;
	font-size: 20px; 
	padding: 50px; 
		}
		
.BOXEN p {
	text-align: center; 
	margin: 10px; 
	color: #403E2C;

}


.BOX1 {
	position: relative;
	height: 300px;
	width: 300px;
	background-color: #c2dad6;
	overflow: hidden;
	box-shadow:0px 1px 2px grey;
	cursor: pointer; 
		}

.BOX2 {
	position: relative;
	height:300px;											
	width:300px;											
	background-color: #c2dad6;
	overflow: hidden;
	box-shadow:0px 1px 2px grey;
	cursor: pointer; 
}

.BOX3 {
	position: relative;
	height:300px;											
	width:300px;											
	background-color: #c2dad6;
	overflow: hidden;
	box-shadow:0px 1px 2px grey;
	cursor: pointer; 
}

.BOX4 {
	position: relative;
	height:300px;											
	width:300px;											
	background-color: #c2dad6;
	overflow: hidden;
	box-shadow:0px 1px 2px grey;
	cursor: pointer; 
}

.FAHRRADBEWEGUNG {
	position: absolute;
	top: 100px;
	left: -190px; /*Startposition*/		
	animation-name: FLIEGEN;						/* Name (keyframe) */
	animation-duration: 4s;						/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: 1;			/* Wiederholungen (n, infinite) */
	animation-direction: normal;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-play-state: paused;					/* für JavaScript (running, paused) */

		}
		@keyframes FLIEGEN {

			100% {
				top: 100px;
				left: 80px; 
			
			}
		}

.EINRADBEWEGUNG {
	position: absolute;
	top: 150px; 
	left: -290px;		
	animation-name: BEWEGEN;						/* Name (keyframe) */
	animation-duration: 4s;						/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: 1;			/* Wiederholungen (n, infinite) */
	animation-direction: forwards;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: paused;					/* für JavaScript (running, paused) */

		}
			@keyframes BEWEGEN {
			100% {
				top: 150px;
				left: 60px; 
			}
		}

.INLINERBEWEGUNG {
	position: absolute;
	top: 100px; 
	left: -330px;		
	animation-name: BEWEGUNG;						/* Name (keyframe) */
	animation-duration: 4s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: 1;			/* Wiederholungen (n, infinite) */
	animation-direction: forwards;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: paused;					/* für JavaScript (running, paused) */

		}
			
		@keyframes BEWEGUNG {

			100% {
				top: 100px;
				left: 50px; 
			}
		}

.SKATEBOARDBEWEGUNG {
	position: absolute;
	top: 100px; 
	left: -330px;		
	animation-name: BEWEGEND;						/* Name (keyframe) */
	animation-duration: 3s;							/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: 1;			/* Wiederholungen (n, infinite) */
	animation-direction: forwards;					/* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
	animation-fill-mode: forwards;					/* Endzustand (none, forwards, backwards, both) */
	animation-play-state: paused;					/* für JavaScript (running, paused) */

		}
			
		@keyframes BEWEGEND {

			100% {
				top: 100px;
				left: 35px; 
			}
		}
		

	.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;
		}