@charset "UTF-8";
/* CSS Document */
*{
			margin:0;												/*macht die Abstände an den Seiten weg*/
			padding:0;
		}
		
		.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;
		}
			

	

		.FACTS {
			display: flex;
			flex-direction:row;
			justify-content:center;
			height: 70px;
			width: auto;
			font-family: 'Pompiere';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			background-color: #BDD2D4;
			position: relative;
			
		}
		.TEXT {
			height: 20px;
			width: auto;
			font-family: 'Pompiere';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			align-self: center;
			margin-top: 6px;
			margin-right: 10px;	
		}

		.HERZ{
			height: 30px;
			width: auto;
			align-self: center;
		}

		.STANDORT{
			height: 40px;
			width: auto;
			align-self: center;
		}
		.KALENDER{
			height: 30px;
			width: auto;
			align-self: center;
			
		}

	

		.GRUSSKARTE{
			height: 30px;
			width: auto;
			align-self: center;
			margin-right: 10px;
		}

		.LAUTSPRECHER{
			height: 30px;
			width: auto;
			align-self: center;
			margin-right: 0px;
			margin-left: 1360px;
		}
		
		#SOUND {
			border-width: 2px;
			border-style: solid; 
			border-color: transparent;
			border-radius: 0px;
			background-color: transparent;
			margin-top: 5px;
			cursor:pointer;
		}

		.STARTBILD {
			height: 400px;
			width: auto;
			background-color: transparent;
			background-image: url('Blumenwiese.png');
		}

		.CLAIM {
			font-family: 'Pompiere';
			font-size: 60px;
			color: #403E2C;
			text-align: center;
			letter-spacing: 0.15rem;	
		}

	.GIFGRUEN {
		position: absolute;
		top: 50px;
		right: -100px;		
		animation-name: GIFGRUEN;						/* Name (keyframe) */
		animation-duration: 11s;						/* Dauer (n) */
		animation-timing-function: linear;				/* Geschwindigkeit  */
		animation-delay: 0s;							/* Verzögerung (n) */
		animation-iteration-count: infinite;			/* Wiederholungen */
		animation-direction: normal;					/* Abspielrichtung */
		animation-fill-mode: none;						/* Endzustand  */
		animation-play-state: running;					/* für JavaScript */
		}
			
		@keyframes GIFGRUEN {

			100% {
				right: 750px; 
			}
		}

	.GIFGELB {
	position: absolute;
	top: 0px;
	left: -100px;		
	animation-name: GIFGELB;						/* Name (keyframe) */
	animation-duration: 13s;						/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit  */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen  */
	animation-direction: normal;					/* Abspielrichtung  */
	animation-fill-mode: none;						/* Endzustand  */
	animation-play-state: running;					/* für JavaScript */

		}
			
		@keyframes GIFGELB {

			100% {
				left: 750px; 
			}
		}	

	.GIFBLAU {
	position: absolute;
	top: 100px;
	left: -100px;		
	animation-name: GIFBLAU;						/* Name (keyframe) */
	animation-duration: 12s;						/* Dauer (n) */
	animation-timing-function: linear;				/* Geschwindigkeit  */
	animation-delay: 0s;							/* Verzögerung (n) */
	animation-iteration-count: infinite;			/* Wiederholungen  */
	animation-direction: normal;					/* Abspielrichtung */
	animation-fill-mode: none;						/* Endzustand  */
	animation-play-state: running;					/* für JavaScript */

		}
			
		@keyframes GIFBLAU {

			100% {
				left: 750px; 
			}
		}	

	.INFO {
			height: 200px;
			width: auto;
			font-family: verdana;
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			background-color: #F9F5EA;
		}

	.INFO h3 {
			font-family: 'Pompiere';
			font-size: 30px;
			margin-bottom: 10px;
			font-weight: 700;
			position: relative;
		}

	 .BILD1 {
			display: flex;
			flex-direction:column;
			justify-content:center;
			height: 500px;
			width: auto;
		    font-family: 'verdana';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			background-color: #F9F5EA;
		 	align-items: center;	
		} 


		.BLUMENGENERATOR {
			position: absolute;
			top: 410px;												/* alte Y-Position */
			height: 500px;
			width: 500px;
			background-color:#E8EDC5 ;
			transition-property: top;								/* Änderung der Y-Position */
			transition-duration: 1.5s;
			transition-timing-function: ease-in-out;
			font-family: 'verdana';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			padding-left: 20px;
			padding-right: 20px;
			
		}

		.TITEL{
			font-size: 25px;
			margin-bottom: 35px;
			font-weight: 700;
			font-family: 'Pompiere';
			position: relative;
			top: 30px;
			
		}

		.KATINFO {
			position: relative;
			height: 500px;
			width: 540px;
			overflow: hidden;
		}

		.KATINFO:hover > .BLUMENGENERATOR {							
			top: 290px;												/* neue Y-Position */
		}

		.TEXTFERTIG {
			height: 200px;
			width: auto;
			font-family: 'verdana';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			background-color: #F9F5EA;
	
		}

	.TEXTFERTIG h3 {
			font-family: 'Pompiere';
			font-size: 30px;
			margin-bottom: 10px;
			font-weight: 700;
			position: relative;
		}

		.MAIN {
			display: flex;
			flex-direction:row;
			justify-content:space-around;
			font-family: 'verdana';
			font-size: 16px;
			color: #403E2C;
			text-align: center;
			height: 400px;
			width: auto;	
			background-color: #F9F5EA;
		
		}
        
		.POSITION {
		width: 1000px;
		display: flex;
		flex-direction:row;
		position: center; 
		justify-content:space-around;
		}

        .BILD2 {
			height: 300px;
			width: 300px;
			background-color: #E8EDC5;	
			transform: scale(0.85);
			transition-duration: 0.5s;
			flex: 0 0 calc(30% - 1px);
		} 

		.BILD2:hover{
			transform: scale(1);
		}

		.KATEGORIE1 {
			position: absolute;
			top: 260px;												/* alte Y-Position */
			height: 300px;
			width: 300px;
			background-color:#E8EDC5 ;
			transition-property: top;								/* Änderung der Y-Position */
			transition-duration: 2s;
			transition-timing-function: ease-in-out;
			font-family: 'verdana';
			font-size: 18px;
			color: #403E2C;
			text-align: center;
		}

		.KATEGORIETITEL{
			font-size: 20px;
			margin-bottom: 35px;
			font-weight: 700;
			font-family: 'Pompiere';
			position: relative;
			top: 8px;
			
		}

		.KATINFOFERTIG {
			position: relative;
			height: 300px;
			width: 300px;
			margin-top: 10px;
			overflow: hidden;
		}
	
		.BILD3 {
			height: 300px;
			width: 300px;
			background-color: #E8EDC5;
			transform: scale(0.85);
			transition-duration: 0.5s;
			flex: 0 0 calc(30% - 1px);
		} 

		.BILD3:hover{
			transform: scale(1);
		}

		.KATEGORIE2 {
			position: absolute;
			top: 260px;												/* alte Y-Position */
			height: 300px;
			width: 300px;
			background-color:#E8EDC5 ;
			transition-property: top;								/* Änderung der Y-Position */
			transition-duration: 2s;
			transition-timing-function: ease-in-out;
			font-family: 'verdana';
			font-size: 18px;
			color: #403E2C;
			text-align: center;
			
		}

		
		.KATINFOFERTIG1 {
			position: relative;
			height: 300px;
			width: 300px;
			margin-top: 10px;
			overflow: hidden;	
			
		}

		
		.BILD4 {
			height: 300px;
			width: 300px;
			background-color: #E8EDC5;
			transform: scale(0.85);
			transition-duration: 0.5s;
			flex: 0 0 calc(30% - 1px);
				
		} 

		.BILD4:hover{
			transform: scale(1);
		}
		.KATEGORIE3 {
			position: absolute;
			top: 260px;												/* alte Y-Position */
			height: 300px;
			width: 300px;
			background-color:#E8EDC5 ;
			transition-property: top;								/* Änderung der Y-Position */
			transition-duration: 2s;
			transition-timing-function: ease-in-out;
			font-family: 'verdana';
			font-size: 18px;
			color: #403E2C;
			text-align: center;
			
		}
		
		.KATINFOFERTIG2 {
			position: relative;
			height: 300px;
			width: 300px;
			margin-top: 10px;
			overflow: hidden;
		
		}
		


		.GESTALTENBILD {
			height: 500px;
			width: 500px;
			border-width: 20px;
			border-style: solid; 
			border-color: #E8EDC5;
			
			
		}
		
	.FOOTER {
			
			background-color: #c6ca96;
			font-family: 'Verdana';
			font-size: 12px; 
			line-height: 100%;
			padding: 60px 0;
			color: #403E2C;		
			height: 120px; 
		}
				
		.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;
		}