*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	
	}

	html {
		scroll-behavior: smooth;
		height: auto;
		max-width: 100%;
	}
	body {
		height: 100%;
		width: 100%;
		background: white;
		
		
	}
 
	:root{
		--color-haupt: #f2e9e0;
		--accent-color: #97adbf;
		--helleresblau: #97adbf;
		--color-hover-nav: #c4cb00;
		--black: black;
		--white: #fff;
		--navbar-height: 80px;
		
		--overlay: rgba(0, 0, 0, 0.75);
		/*#476286*/
	}

	

	/*Rechtliches*/

	#rechtliches{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-end;
		background: black;
		padding: 0.2%;
		font-size: 10px;
	}

	#rechtliches a{
		color: #bbbbbb;
		
	}

	#rechtliches a:hover{
		color: white;
	}

	#rechtliches #impressum-oben, #rechtliches #datenschutzerklärung-oben{
		margin-right: 1%;
	}
	
	#navbar a.active {
		color: var(--color-hover-nav);
	}

	#impressum-body{
		background: var(--color-haupt);
	}

	.topnav{
		background: white;
	}

	#impressum-box{
		padding: 1%;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		position: relative;
		
	}

	#impressum-box h1{
		color: var(--black);
		font-size: 40px;
		padding: 3%;
		text-transform: uppercase;
		

	}

	#impressum-box h2 {
		color: var(--black);
		font-size: 28px;
		padding: 4%;
		
	}

	#impressum-box p{
		font-size: 20px;
		color: var(--black);
		
		
	}

	#impressum-box a{
		font-size: 20px;
		color: var(--black);
	}
	/*******************************Dropdown Datenschutzerklärung********************************/
	#dropdown-nav1{
		display: none;
		flex-direction: column;
		background: white;
		color: black;
		width: 30%;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		z-index: 10;
		padding: 2%;
		border-top: 4px solid var(--helleresblau);
	}
	
	#dropdown-nav1 li {
		padding: 2%;
		
	}

	#dropdown-nav1 li a{
		color: black;
		font-size: 20px;
	}

	#dropdown-nav1 li:hover a{
		color: var(--accent-color);
	}
	/**********************Dropdown Impressum****************/
	#dropdown-nav2{
		display: none;
		flex-direction: column;
		background: white;
		color: black;
		width: 50%;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		z-index: 10;
		padding: 2%;
		border-top: 4px solid var(--helleresblau);
	}
	
	#dropdown-nav2 li {
		padding: 2%;
		
	}

	#dropdown-nav2 li a{
		color: black;
		font-size: 20px;
	}

	#dropdown-nav2 li:hover a{
		color: var(--accent-color);
	}

	/******************Über mich ********************************/
	#dropdown-nav3{
		display: none;
		flex-direction: column;
		background: white;
		color: black;
		width: 20%;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		z-index: 10;
		padding: 2%;
		border-top: 4px solid var(--helleresblau);
	}
	
	#dropdown-nav3 li {
		padding: 2%;
		
	}

	#dropdown-nav3 li a{
		color: black;
		font-size: 20px;
	}

	#dropdown-nav3 li:hover a{
		color: var(--accent-color);
	}

	/******************Produktseite ********************************/
	#dropdown-nav4{
		display: none;
		flex-direction: column;
		background: var(--color-haupt);
		color: black;
		width: 20%;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		z-index: 10;
		padding: 2%;
		border-top: 4px solid var(--helleresblau);
	}
	
	#dropdown-nav4 li {
		padding: 2%;
		
	}

	#dropdown-nav4 li a{
		color: black;
		font-size: 20px;
	}

	#dropdown-nav4 li:hover a{
		color: var(--accent-color);
	}

	/*************************Datenschutzerklärung*****************/

	#datenschutzerklaerung-body{
		background: var(--color-haupt);
	}

	#datenschutzerklaerung-box{
		padding: 1%;
		width: 80%;
		text-align: center;
		margin-left: 10%;
		
		
	}

	#datenschutzerklaerung-box h1{
		color: var(--black);
		font-size: 40px;
		padding: 3%;
		text-transform: uppercase;
	}

	#datenschutzerklaerung-box h2 {
		color: var(--black);
		font-size: 28px;
		padding: 4%;
	
	}

	#datenschutzerklaerung-box h3 {
		color: var(--black);
		font-size: 25px;
		padding: 2%;
	
	}

	#datenschutzerklaerung-box h4 {
		color: var(--black);
		font-size: 22px;
		padding: 3%;
	
	}

	#datenschutzerklaerung-box p{
		font-size: 20px;
		color: var(--black);
	}

	#datenschutzerklaerung-box a{
		font-size: 20px;
		color: var(--black);
	}
	#impressum a, #datenschutzerklärung a{
		padding: 10px;
		color: #bbbbbb;
		font-size: 14px;
		margin-right: 20px;
	}	

	#impressum a:hover, #datenschutzerklärung a:hover, #rechtliches a.active1, .footer-imp-dat #impressum a.active1, .footer-imp-dat #datenschutzerklärung a.active1{
		color: white;
	}

	/*Seite Über mich start*/

	#übermich-part1{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	#übermich-part1 img{
		width: 40%;
		height: 600px;
		object-fit: cover;
		object-position: 80%;

	}

	#übermich-part1 #persönliches-übermich{
		width: 60%;
		height: 600px;
		padding: 5%;
		background: var(--color-haupt);
	}

	#übermich-part1 #persönliches-übermich h2{
		font-size: 25px;
		text-align: right;
		margin-right: 2%;
		margin-top: 2%;
	}

	#übermich-part1 #persönliches-übermich h3{
		font-size: 45px;
		font-weight: 800;
		text-align: right;
		padding: 2%;
	}

	#übermich-part1 #persönliches-übermich p{
		font-size: 18px;
		padding: 4%;
		padding-right: 0;
	}

	#meineGeschichte{
		margin-top: 5%;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
	}

	#meineGeschichte #bild-übermich-geschichte{
		width: 60%;
		height: auto;
	}

	#meineGeschichte #bild-übermich-geschichte img{
		width: 50%;
		height: 70%;
		margin-top: 10%;
		margin-left: 20%;
		object-fit: cover;
		object-position: 25%;
		
	}
	#geschichte-übermich {
		width: 40%;
		height: auto;
		padding: 5%;
		margin-left: 5%;

	}

	#geschichte-übermich h3{
		padding: 3%;
		font-size: 30px;
		
	}

	#geschichte-übermich h3:after{
		content: "";
		width: 7%;
		height: 2px;
		background: var(--color-haupt);
		position: absolute;
		left: 10%;
		margin-top: 2%;
	}

	#geschichte-übermich p{
		padding: 3%;
		font-size: 20px;
		text-align: justify;
	}

	/*Seite Über mich Ende*/

	/*Logo + navbar desktop*/

	#logo-lottiundfreddi{
		width: 400px;
		margin-left: 10%;
		height: 125px;
	}
	
	#logo-lottiundfreddi img {
		width: 100%;
		height: 100%;
	}

	.mobile-container{
		position: relative;
		left: 0;
		top: 0;
		height: auto;
		width: 80%;
        padding: 1%;
		display: block;	
		justify-content: center;
		align-items: center;
		height: auto;
		margin-left: 10%;
        
	}
	
	#navbar {
		display: flex;
		justify-content: center;
		text-align: center;
        list-style: none;
	}

	#navbar a {
		margin-left: 30px;
		font-size: 20px;
		padding: 0 20px;
		position: relative;
	}

	#navbar a{
		color: var(--black);
		transition: 0.3s ease;
        text-decoration: none;
	}

	#navbar a:hover,
	#navbar a.active {
		color: var(--color-hover-nav);
	}

	#navbar a.active::after,
	#navbar a:hover::after {
		content: "";
		width: 28%;
		height: 2px;
		background: var(--color-hover-nav);
		position: absolute;
		left: 20px;
		bottom: -4px;

	}
    
    .icon{
        display: none;
    }

	#dropdown-nav{
		display: none;
		background: var(--color-haupt);
		width: 100%;
		

	}

	#navbar a:hover ul #dropdown-nav {
		display: flex;
		flex-direction: column;
		z-index: 99;
		background: var(--white);
		color: var(--black);
	}

	/*Sidebar*/
	nav {
		display: flex;
		justify-content: center;

	  }

	.sidenav {
		height: 100%; 						
		margin-bottom: 2%;
		width: 0; 							
		position: fixed; 					
		z-index: 1; 						
		top: 0; 							
		left: 0;
		background-color: var(--color-haupt); 			
		overflow-x: hidden;					
		padding-top: 60px; 							
		transition: 0.5s; 
		display: none;						
	}
	
	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 18px;
		color: var(--white);
		display: block;
		transition: 0.3s;
	}

	.sidenav a:nth-child(1):hover{
		color: rgb(204, 204, 204);
	}
	
	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}
	
	#main {
		transition: margin-left .7s;
		padding: 20px;
	}
	
	#logo-lottiundfreddi{
		margin-left: -5%;
	}
	
	.bar1, .bar2, .bar3{
		width: 35px;
		height: 5px;
		background-color: black;
		margin: 3px 0;
		transition: 0.4s;
		display: none;
	}
	
	.toogle_button{
		display: none;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		left: 5%;
		top: 15%;
	}

	.mobile-container{
		display: none;
	}

	.dropdown {
	position: relative;
	display: inline-block;
	width: 100%;

	}

	.dropdown-content {
	display: none;
	width: 100%;
	background-color: var(--accent-color);
	z-index: 1;
	}

	.dropdown-content li a {
		padding: 8px 8px 8px 40px;
		text-decoration: none;
		font-size: 14px;
		color: var(--white);
		display: block;
		transition: 0.3s;
		width: 900%;
	
	}

	.dropdown-content a:hover {
	color: var(--accent-color);
	background: white;
	
	}

	/*Slider*/
	#bereich-slider {
		color: var(--white);
		font-family: sans-serif;
		width: 100%;
		height: 100vh;
		position: relative;
	  }  
	  
	#bereich-slider img {
		display: block;
		width: 100%;
		height: 100vh;
		background-color: var(--img-color);
		object-fit: cover;
	  }
	  
	label {
		display: block;
		cursor: pointer;
	  }
	  
	input[type="radio"] {
		position: absolute;
		bottom: 0;
		left: -9999px;
	  }
	    
	#bereich-slider .slider {
		min-width: 100%;
		min-height: 100vh;
	  }
	  
	.slider-div {
		position: relative;
	  }
	  
	.slider-div .slider-elemente{
		display: grid;
	  }
	  
	.slider-div .slider-elemente li {
		grid-column: 1;
		grid-row: 1;
		opacity: 0;
		transition: opacity 0.25s;
	  }
	  
	.slider-div .buttons-weiter-zurueck label::before,
	.slider-div .buttons-weiter-zurueck label::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2.5%;
		height: 4.5%;
		border-radius: 50%;
		color: var(--black);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px 24px;
		background-color: var(--white);
		opacity: 0.5;
		transition: opacity 0.25s;
	  }
	  
	  
	  .slider-div .buttons-weiter-zurueck label::before {
		left: 1%;
	  }
	  
	  .slider-div .buttons-weiter-zurueck label::after {
		right: 1%;
	  }
	  
	  .slider-div .dots {
		position: absolute;
		bottom: 1%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
	  }
	  
	  .slider-div .dots li:not(:last-child) {
		margin-right: 8%;
	  }
	  
	  .slider-div .dots label {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 3px solid var(--white);
		transition: 0.25s;
	  }
	  
	  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
		background: #ededed;
	  }
	  
	  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
	  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
	  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
	  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
	  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
	  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
	  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
	  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
		opacity: 1;
	  }
	  
	  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
	  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
	  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
	  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
	  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
	  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
		content: '<';
		font-size: 60px;
		font-weight: 300;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		
		
	  }
	  
	  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
	  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
	  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
	  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
	  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
	  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
		content: '>';
		font-size: 60px;
		font-weight: 300;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		
	  }
	  
	  [id="img1"]:checked ~ .slider .dots [for="img1"],
	  [id="img2"]:checked ~ .slider .dots [for="img2"],
	  [id="img3"]:checked ~ .slider .dots [for="img3"],
	  [id="img4"]:checked ~ .slider .dots [for="img4"],
	  [id="img5"]:checked ~ .slider .dots [for="img5"],
	  [id="img6"]:checked ~ .slider .dots [for="img6"] {
		background: currentColor;
	  }
	
	

	/*Willkommen*/
	
	#willkommen {
		width: 100%;
		height: auto;
		margin-bottom: 2%;
		padding: 5%;
		background: var(--helleresblau);
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		
	}

	#willkommen h2 {
		font-size: 40px;
		margin-bottom: 3%;
	}

	#willkommen p{
		font-size: 20px;
	}

	/*Neuheiten*/
		
	.slide-container {
		max-width: 1120px;
		width: 100%;
		background: grey;
		
	}
	.card-image {
		position: relative;
		height: 150px;
		width: 150px;
		border-radius: 50%;
	}
	
	.card-image .card-img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-radius: 50%;
	}
	
	.card {
		border-radius: 25px;
		background: white;
		width: 320px;
	}
	.slide-content {
		margin: 0 40px;
	}
	.card-content, .image-content {
		display: flex;
		flex-direction: column;
		align-items: center;	
		padding: 10px 14px;
	}
	.image-content{
		position: relative;
		row-gap: 5px;
		padding: 25px 0;
	}
	.overlay {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: #4070f4;
		border-radius: 25px 25px 0 25px;
	}
	.overlay::before,
	.overlay::after{
		content: '';
		position: absolute;
		right: 0;
		bottom: -40px;
		height: 40px;
		width: 40px;
		background: #4070f4;
	}
	.overlay::after {
		border-radius: 0 25px 0 0;
		background: white;
	}
	

	.flip-card1 {
		background-color: white;
		width: 20%;
		height: 60vh;
		border: none;
		perspective: 1000px; 
		margin-bottom: 5%;
		margin-right: 1%;
	  }
	  
	  /* This container is needed to position the front and back side */
	  /*.flip-card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	  }*/
	  
	  

	   
	  
	  /* Position the front and back side */
	  .flip-card-front, .flip-card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 25px;
		background: white;
		backface-visibility: hidden;
		
		
	  }
	  
	  /* Style the front side (fallback if image is missing) */
	  .flip-card-front {
		width: 100%;
		min-width: 250px;
		height: 60vh;
		padding: 10px 12px;
		border: 1px solid var(--accent-color);
		border-radius: 25px;
		box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
		margin: 15px 0;
		transition: 0.2s ease;
		position: relative;
		margin-bottom: 30px;
		
	  }

	  .flip-card-front img {
		width: 100%;
		border-radius: 20px;
		height: 80%;
		object-fit: cover;

	}

	
	  
	  .flip-card-back {
		background-color: var(--accent-color);
		color: white;
		transform: rotateY(180deg);
		position: absolute;
		top: 1%;
		height: 60vh;
		border-radius: 25px;
	  }

	  

	  .flip-card-back h1{
		padding: 8%;
		
	  }
	  .flip-card-back ul li{
		list-style: inside;
		color: white;
		padding: 7%;
		margin-left: 1%;
		text-align: center;
	  }

	  .flip-card-back ul p {
		font-weight: 800;
		font-size: 20px;
		text-align: center;
		color: white;
	  }

	  
	
	#produkt1 .pro-container {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		flex-wrap: wrap;
		
	}

	.section-p1 {
		padding: 0px 0px;
		position: relative;
		
	}
	#produkt1 {
		text-align: center;
		background: white;
		
		
	}

	#produkt1 h2 {
		font-size: 46px;
		line-height: 64px;
		width: 100%;
		height: auto;
		padding: 4%;
		background: var(--helleresblau);
		color: var(--white);
	}

	
	#produkt1 .flip-card1:hover {
		box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
	}

	#produkt1 .flip-card1 .beschreibung {
		text-align: start;
		padding: 10px 0;
	}

	#produkt1 .flip-card1.beschreibung span {
		color: #606063;
		font-size: 12px;
	}
	
	#produkt1 .flip-card1 .beschreibung h5{
		color: #1a1a1a;
		padding-top: 7px;
		font-size: 14px;
	}

	#produkt1 .flip-card1 .beschreibung h4{
		padding-top: 7px;
		font-weight: 700;
		color: var(--accent-color);
		position: absolute;
		bottom: 30px;
		left: 20px;
		font-size: 20px;
	}
	#produkt1 .flip-card1 a{
		
		border: 1px solid #606063;
		border-radius: 50px;
		background-color: var(--accent-color);
		position:absolute;
		width: auto;
		height: auto;
		padding: 2%;
		right: 3%;
		bottom: 5%;
		color: black;
		background: var(--accent-color);
		border-radius: 20px;
		cursor: pointer;
		
	}

	
	
	.beschreibung a:hover {
		background: var(--pink-color);
	}
	

	#produkt1 .flip-card1a:hover {
		background: #18BB78;
	}


	#produkt1 .pro-container {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding-top: 20px;
		flex-wrap: wrap;
		margin-left: 1%;
		width: 98%;
		
		
	}

	.section-p1 {
		padding: 0px 0px;
		
	}
	#produkt1 {
		text-align: center;
		background: white;
		
		
	}

	

	#produkt1 .pro {
		width: 23%;
		min-width: 250px;
		height: 550px;
		padding: 10px 12px;
		border: 1px solid var(--accent-color);
		border-radius: 25px;
		cursor: pointer;
		box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
		margin: 15px 0;
		transition: 0.2s ease;
		position: relative;
		margin-bottom: 30px;

	} 
	#produkt1 .pro:hover {
		box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
	}

	#produkt1 .pro .beschreibung {
		text-align: start;
		padding: 10px 0;
	}

	#produkt1 .pro .beschreibung span {
		color: #606063;
		font-size: 12px;
	}
	
	#produkt1 .pro .beschreibung h5{
		color: #1a1a1a;
		padding-top: 7px;
		font-size: 14px;
	}

	#produkt1 .pro .beschreibung h4{
		padding-top: 7px;
		font-weight: 700;
		color: var(--accent-color);
		position: absolute;
		bottom: 30px;
		left: 20px;
		font-size: 20px;
	}
	#produkt1 .pro a{
		font-size: 25px;
		border: 1px solid #606063;
		border-radius: 50px;
		background-color: var(--accent-color);
		position: absolute;
		bottom: 15px;
		right: 30px;
	}

	#produkt1 .pro a:hover {
		background: #18BB78;
	}

	#produkt1 .pro img {
		width: 100%;
		border-radius: 20px;
		height: 80%;
		
	}
	

	#button-Neu{
		width: 20%;
		height: 5vh;
		border-radius: 25px 25px 25px 25px;
		color: black;
		border: 1px solid var(--accent-color);
		margin-bottom: 10%;
	}
	
	#button-Neu:hover{
		border: 5px solid var(--accent-color);
	}

	/*Bereich Produkte Info*/

	#produkte-hintergrund{
		width: 100%;
		height: auto;
		background: white;
	}
	#bereich-produkte-head{
		text-align: center;
		width: 60%;
		margin-left: 20%;
		height: auto;
		padding: 2%;
		background: var(--accent-color);
	}

	#bereich-produkte-head h1{
		width: 100%;
		font-size: 55px;
		color: white;
		background: var(--accent-color);
		padding: 1%;
		
	}

	#bereich-produkte-head h5{
		font-size: 16px;
		color: black;
		background: var(--color-haupt);
	}


	#bereich-produkte{
		width: 60%;
		height: auto;
		margin-left: 20%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.name-produkt{
		position: relative;
		background: var(--color-haupt);
		width: 100%;
		height: auto;
		overflow: hidden;
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(3){
		width: 49%;
		margin-bottom: 2%;
		height: 60vh;
		min-height: 500px;
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(4), .name-produkt:nth-child(5), .name-produkt:nth-child(7), .name-produkt:nth-child(9), .name-produkt:nth-child(10){
		margin-right: 1%;
	}

	.name-produkt:nth-child(3), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(8), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		margin-left: 1%;
	}

	.name-produkt:nth-child(4), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(9), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		width: 32%;
		margin-bottom: 2%;
		height: 40vh;
	}

	.name-produkt:nth-child(7), .name-produkt:nth-child(8){
		width: 49%;
		height: 60vh;
		margin-bottom: 2%;
	}

	.name-produkt:nth-child(1){
		width: 100%;
		padding: 2%;
		margin-bottom: 2%;
		display: none;
	}

	.name-produkt p{
		font-size: 20px;
		text-align: center;
		color: black;
	}


	.name-produkt img{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s ease;
		transform: scale(1);
		
		
	}

	.name-produkt:nth-child(4) img{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s ease;
		transform: scale(1);
		object-fit: cover;
		object-position: bottom;
		
		
	}

	

	.produkt-bezeichnung{
		position: absolute;
		bottom: 0%;
		left: 5%;
		width: 90%;
		background: white;
		padding: 6%;
		color: white;
		height: auto;
		z-index: 5;
		cursor: pointer;
	}

	.produkt-bezeichnung h2{
		margin-bottom: 3%;
		color: black;
	}
	.name-produkt:hover img{
		transform: scale(1.2);
		max-width: 100%;
	}

	.produkt-bezeichnung a{
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
		background: var(--accent-color);
		height: auto;
		color: black;
		padding: 2%;
	}

	.produkt-bezeichnung a:hover {
		background: var(--Grau);
		transition: 0.5s ease-in-out;
	}

	/*Kontaktformular*/
	#kontakt{
		margin-top: 5%;
		display: block;
		justify-content: center;
		text-align: center;
		height: auto;
		margin-bottom: 60px;
	}

	#text-kontakt{
		text-align: center;
		padding: 2%;
	}

	form {
		background: white;
		height: auto;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	form input{
		height: 20px;
		width: 40%;
		border: none;
		border-bottom: 1px solid #dadada;
		background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
		background-size: 0 100%;
		background-repeat: no-repeat;
		color: #dadada;
		font-size: 20px;
		padding: 2%;
		
	}

	#textarea-nachricht {
		margin-top: 2%;
		resize: none;
		height: 50vh;
		width: 40%;
		padding: 1%;
		font-size: 12px;
	}
	
	#checkbox-dsgvo1{
		margin-left: 1%;
		line-height: 225%;
	}

	#checkbox-dsgvo{
		margin-left: 1%;
		margin-top: 1%;
		width: 20px;
		height: 20px;	
		
	}

	#check{
		width: 40%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		padding: 1%;
	}

	input #senden {
		width: 10%;
		height: 30px;
		text-align: center;
		align-items: center;
		border: 1px solid var(--accent-color);
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-radius: 20px 20px 20px 20px;
	}

	#senden:hover {
		background-color: #606063;
	}

	input:focus {
		outline: none;
		background-size: 100% 100%;
	}

	input:focus::-webkit-input-placeholder {
		font-size: 15px;
		-webkit-transform: translateY(-25px);
		transform: translateY(-25px);
		visibility: visible !important;
	}
	
	input:focus:valid::-webkit-input-placeholder, input:valid {
		color: #18BB78; 
		border-color: #18BB78;
	}
	
	input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
		color: #c9272a;
		border-color: #c9272a;
	}
	
	/*Footer*/
	.container {
		max-width: 1400px;
		margin: auto;
	}

	.footer{
		background: #24262b;
		padding: 60px 0;
		margin-top: 40px;
	}
	
	.reihe {
		display: flex;
		flex-wrap: wrap;

	}

	.footer-produkte{
		width: 25%;
		padding: 0 15px;
	}

	.footer-produkte h2{
		font-size: 18px;
		color: white;
		text-transform: capitalize;
		margin-bottom: 30px;
		font-weight: 500;
		position: relative;
	}

	.footer-produkte h2::before{
		content: '';
		position: absolute;
		left: 0px;
		bottom: -10px;
		background-color: var(--accent-color);
		height: 2px;
		box-sizing: border-box;
		width: 35px;
	} 

	.footer-produkte ul li:not(:last-child){
		margin-bottom: 10px;
	}

	.footer-produkte ul li a{
		font-size: 16px;
		text-transform: capitalize;
		color: #ffffff;
		text-decoration: none;
		font-weight: 300;
		color: #bbbbbb;
		display: block;
		transition: all 0.3 ease;

	}

	.footer-produkte ul li a:hover{
		color: #ffffff;
		padding-left: 8px;
	}

	.footer-produkte .folgen a {
		display: inline-block;
		height: 40px;
		width: 40px;
		background: rgba(255, 255, 255, 0.2);
		margin: 0 10px 10px 0;
		text-align: center;
		line-height: 40px;
		border-radius: 50%;
		color: #ffffff;
		transition: all 0.5 ease;
	}

	.footer-produkte .folgen a:hover{
		color: #24262b;
		background: #ffffff;
		padding-left: 0;
	}

	.footer-imp-dat{
		display: flex;
		justify-content: flex-end;
	}

	

	#button-hoch1 {
		height: 1%;
		width: 1%;
		scroll-behavior: smooth;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: row;
		position: fixed;
		right: 1%;
		bottom: 1%;
		
		
	}

	#button-hoch1 a{
		background: white;
		border: 1px solid grey;
		
	}

	
	/*Seite Produkte-beschreibung*/

	#produktbeschreibung-h1{
		width: 100%;
		height: auto;
		background: var(--accent-color);
		text-align: center;
		padding: 4%;
		color: white;
		margin-top: 2%;
	}
	.produktbeschreibung{
		width: 80%;
		height: auto;
		margin-left: 20%;
		display: flex;
		margin-top: 5%;

	}

	.img-produkt{
		width: 40%;
		max-width: 40%;
		min-width: 40%;
	}

	.img-produkt img {
		width: 80%;
		height: 50vh;
		min-height: 150px;
		object-fit: cover;
	}

	.main_image img{
		min-height: 500px;
		height: 50vh;
		object-fit: cover;
	}

	.klein{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 80%;
		margin-top: 1%;
	}

	.klein img {
		width: 100%;
		height: 110px;
		
	}

	.margin-img{
		margin-left: 1%;
	}

	#text-produkt{
		width: 40%;
		max-width: 40%;
		min-width: 40%;
	}

	#text-produkt h3{
		color: var(--accent-color);
		margin: 20px 0 20px 0;
		font-size: 25px
	}

	#text-produkt h4{
		color: var(--black);
		font-size: 25px;
	}

	#text-produkt h5{
		font-size: 15px;
	}

	#text-produkt p{
		margin: 20px 0 50px 0;
		line-height: 25px;
		
	}

	.beschreibung-ul{
		list-style: disk;
		text-align: left;
	}

	.beschreibung-ul li{
		list-style-type: disc;
	}


	.color span{
		width: 25px;
		height: 25px;
		background: #000;
		border-radius: 50%;
		margin: 2% 1% 1% 0;
	}

	.color span:hover{
		width: 30px;
		height: 30px;
	}

	.color span:nth-child(2){
		background: green;
	}
	
	.color span:nth-child(3){
		background: var(--red);
	}

	.color span:nth-child(4){
		background: cadetblue;
	}

	.color span:nth-child(5){
		background: blue;
	}

	.color span:nth-child(6){
		background: purple;
	}


	.flex{
		display: flex;
	}



	#ähnliche-produkte-bereich{
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: auto;
		margin-top: 3%;
	}

	#ähnliche-produkte-bereich-h2{
		width: 100%;
		text-align: center;
		height: auto;
		padding: 2%;
		margin-bottom: 1%;
		font-size: 30px;
	}

	#ähnliche-produkte-bereich-h2:after{
		content: "";
		width: 3%;
		height: 2px;
		background: var(--accent-color);
		position: absolute;
		left: 48.5%;
		margin-top: 0.25%;
		
	}

	#ähnliche-produkte-bereich-img{
		width: 90%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 5%;
	}

	#ähnliche-produkte-bereich-img .ähnliche-produkte{
		width: 25%;
		height: auto;
		margin-bottom: 5%;
	}

	#ähnliche-produkte-bereich-img .ähnliche-produkte img {
		width: 90%;
		height: 40vh;
		
	}

	.artikel-name{
		width: 100%;
		text-align: center;
		height: auto;
		padding: 2%;
	}

	.preis-ähnliche-Artikel{
		width: 100%;
		text-align: center;
		height: auto;
		padding: 2%;
		font-weight: 900;
	}

	.ähnliche-produkte .button{
		width: 30%;
		margin-left: 35%;
		text-align: center;
		display: none;
		background: var(--accent-color);
	}

	.ähnliche-produkte .button a{
		text-decoration: none;
		color: white;
		text-align: center;
		
	}

	.ähnliche-produkte:hover .button{
		display: block;
	}
	/*Verkaufsstellen*/

	#verkaufsstellen{
		width: 100%;
		height: auto;
		margin-bottom: 3%;

	}

	#verkaufsstellen h2{
		text-align: center;
		font-size: 40px;
		padding: 1%;
		background: var(--color-haupt);
		color: var(--black);
		width: 100%;
		height: auto;
		padding: 4%
	}

	#markte{
		text-align: center;
		font-size: 40px;
		padding: 1%;
		background: var(--helleresblau);
		color: var(--white);
		width: 100%;
		height: auto;
		padding: 4%
	}

	#markte:after{
		content: "";
		width: 60%;
		height: 2px;
		background: var(--white);
		position: absolute;
		left: 20%;
		margin-top: 11%;
	}
	
	.bereich-event1{
		width: 50%;
		height: auto;
		background: var(--color-haupt);
		color: black;
		text-align: center;
		font-size: 24px;
		padding: 2%;
		line-height: 110%;
		
	}

	#events{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		height: auto;
		
		padding: 2%;
		padding-bottom: 5%;
	}

	#events .bereich-event{
		width: 100%;
		height: auto;
		margin-top: 1%;
		
	}

	#events .bereich-event a img{
		width: auto;
		height: auto;
	}

	.bereich-event:nth-child(1), .bereich-event:nth-child(2), .bereich-event:nth-child(3), .bereich-event:nth-child(4){
		margin-left: 1%;
	}

	.bereich-event:nth-child(4){
		margin-right: 1%;
	}

	.veranstaltung {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 70%;
            margin: 0 auto;
        }

	

        h1 {
            font-size: 24px;
            color: #333;
        }

        p {
            font-size: 16px;
            color: #666;
        }

        .datum {
            font-weight: bold;
            color: #666;
			font-style: italic;
        }

        .ort {
            margin-top: 10px;
            font-style: italic;
			font-weight: bold;
        }

		.veranstaltung p a{
			font-size: 16px;
			font-weight: bold;
			font-style: italic;
			padding: 2% 1%;
			color: black;
			text-align: center;
		}

		.veranstaltung p a:hover{
			margin-left: 1%;
			transition: 1s;
		}
		
		.veranstaltung p a i{
			padding-left: 1%;
		}

		.veranstaltung{
			width: 90%;
			height: auto;
		}

		.veranstaltung img{
			width: 100%;
			height: auto;
		}

	
	@media (max-width: 759px) {

		.veranstaltung{
			width: 90%;
			height: auto;
		}

		.veranstaltung img{
			width: 100%;
			height: auto;
		}
		/******************************Impressum************************/
		#impressum-body{
			background: var(--color-haupt);
		}
	
		nav{
			background: white;
		}
	
		#impressum-box{
			padding: 1%;
			width: 90%;
			text-align: center;
			margin-left: 5%;
			
		}
	
		#impressum-box h1{
			color: var(--black);
			font-size: 35px;
			padding: 3%;
			text-transform: uppercase;
			
	
		}
	
		#impressum-box h2 {
			color: var(--black);
			font-size: 23px;
			padding: 4%;
			
		}
	
		#impressum-box p{
			font-size: 18px;
			color: var(--black);
			
			
		}
	
		#impressum-box a{
			font-size: 20px;
			color: var(--black);
		}


		/*******************************Datenschutzerklärung********************************/
	#datenschutzerklaerung-body{
		background: var(--color-haupt);
	}

	#datenschutzerklaerung-box{
		padding: 1%;
		width: 90%;
		text-align: center;
		margin-left: 5%;
		position: relative;
		
	}

	#datenschutzerklaerung-box h1{
		color: var(--black);
		font-size: 30px;
		padding: 2%;
		text-transform: uppercase;
	}

	#datenschutzerklaerung-box h2 {
		color: var(--black);
		font-size: 23px;
		padding: 4%;
	
	}

	#datenschutzerklaerung-box h3 {
		color: var(--black);
		font-size: 16px;
		padding: 2%;
	
	}

	#datenschutzerklaerung-box h4 {
		color: var(--black);
		font-size: 22px;
		padding: 3%;
	
	}

	#datenschutzerklaerung-box p{
		font-size: 16px;
		color: var(--black);
	}

	#datenschutzerklaerung-box a{
		font-size: 12px;
		color: var(--black);
	}

		/*Button nach oben*/
		a.button-hoch1 {
			background: white;
			border: 2px solid black;
			text-align: center;
			height: 50px;
			width: 50px;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 1%;
			bottom: 1%;
			z-index: 1;
		}

		a.button-hoch1 i{
			font-size: 55px;
			font-weight: 600;
			color: black;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}

		

		a.button-hoch1:hover {
			border: 3px solid black;
		}
		.logo-lottiundfreddi img {
			width: 300px;
			height: 125px;
			margin-left: 6%;
			margin-right: auto;
		}

		.footer-produkte{
				width: 50%;
				margin-bottom: 30px;
			}	

		.icon{
				display: block;
			}

		/*Sidebar*/
		.topnav{
			display: none;
		}
		nav {
			display: flex;
			justify-content: center;

		}

		.sidenav {
			height: 100%; 						
			margin-bottom: 2%;
			width: 0; 							
			position: fixed; 					
			z-index: 1; 						
			top: 0; 							
			left: 0;
			background-color: var(--accent-color); 			
			overflow-x: hidden;					
			padding-top: 60px; 							
			transition: 0.5s; 
			display: block;						
		}
		
		.sidenav a {
			padding: 8px 8px 8px 32px;
			text-decoration: none;
			font-size: 18px;
			color: white;
			display: block;
			transition: 0.3s;
		}

		.sidenav a.active{
			background: white;
			color: var(--accent-color);
		}

		.sidenav a:hover{
			background: var(--white);
			color: var(--accent-color);
		}

		.sidenav a:nth-child(1):hover{
			color: rgb(204, 204, 204);
			background: var(--accent-color);
		}
		
		.sidenav .closebtn {
			position: absolute;
			top: 0;
			right: 25px;
			font-size: 36px;
			margin-left: 50px;
		}
		
		#main {
			transition: margin-left .7s;
			padding: 20px;
		}
		
		#logo-lottiundfreddi{
			margin-left: -5%;
		}
		
		.bar1, .bar2, .bar3{
			width: 35px;
			height: 5px;
			background-color: black;
			margin: 3px 0;
			transition: 0.4s;
			display: block;
		}
		
		.toogle_button{
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: absolute;
			left: 5%;
			top: 60px;
		}

		.mobile-container{
			display: none;
		}

		#myDropdown{
			display: none;
			flex-direction: column;
			
		}

		.dropdown {
			position: relative;
			display: inline-block;
			width: 100%;
		
			}
		
			.dropdown-content {
			display: none;
			width: 100%;
			background-color: var(--accent-color);
			z-index: 1;
			}
		
			.dropdown-content li a {
				padding: 8px 8px 8px 40px;
				text-decoration: none;
				font-size: 14px;
				color: var(--white);
				display: block;
				transition: 0.3s;
				width: 900%;
			
			}
		
			.dropdown-content a:hover {
			color: var(--accent-color);
			background: white;
			
			}
		
		
		

		/*Slider*/
		#bereich-slider {
			color: var(--white);
			font-family: sans-serif;
			width: 100%;
			height: 60vh;
			min-height: 550px;
		  }  
		  
		#bereich-slider img {
			display: block;
			width: 100%;
			height: 60vh;
			min-height: 550px;
			background-color: var(--img-color);
			z-index: 99;
			object-fit: cover;
		  }

		  .slider-elemente li:nth-child(3) img{
			object-position: bottom;
		  }

		  .slider-elemente li:nth-child(4) img{
			object-position: right;
		  }
		  
		  label {
			display: block;
			cursor: pointer;
		  }
		  
		  input[type="radio"] {
			position: absolute;
			bottom: 0;
			left: -9999px;
		  }
			
		  #bereich-slider .slider {
			min-width: 100%;
			min-height: 100vh;
		  }
		  
		  .slider-div {
			position: relative;
		  }
		  
		  .slider-div .slider-elemente{
			display: grid;
		  }
		  
		  .slider-div .slider-elemente li {
			grid-column: 1;
			grid-row: 1;
			opacity: 0;
			transition: opacity 0.25s;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::before,
		  .slider-div .buttons-weiter-zurueck label::after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 2.5%;
			height: 4.5%;
			border-radius: 50%;
			color: var(--black);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			background-color: var(--white);
			opacity: 0.5;
			transition: opacity 0.25s;
		  }
		  
		  
		  .slider-div .buttons-weiter-zurueck label::before {
			left: 1%;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::after {
			right: 1%;
		  }
		  
		  .slider-div .dots {
			position: absolute;
			bottom: 1%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
		  }
		  
		  .slider-div .dots li:not(:last-child) {
			margin-right: 8%;
		  }
		  
		  .slider-div .dots label {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 3px solid var(--white);
			transition: 0.25s;
		  }
		  
		  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
			background: #ededed;
		  }
		  
		  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
		  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
		  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
		  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
		  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
		  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
			opacity: 1;
		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
			content: '<';
			font-size: 30px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			left: 2%;
			width: 9%;
			height: 5%;

		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
			content: '>';
			font-size: 30px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			right: 2%;
			width: 9%;
			height: 5%;
		  }
		  
		  [id="img1"]:checked ~ .slider .dots [for="img1"],
		  [id="img2"]:checked ~ .slider .dots [for="img2"],
		  [id="img3"]:checked ~ .slider .dots [for="img3"],
		  [id="img4"]:checked ~ .slider .dots [for="img4"],
		  [id="img5"]:checked ~ .slider .dots [for="img5"],
		  [id="img6"]:checked ~ .slider .dots [for="img6"] {
			background: currentColor;
		  }
	
		/*Willkommensbereich*/
		
		#willkommen {
			width: 100%;
			height: auto;
			margin-top: 0%;
			margin-bottom: 0%;
			padding: 5%;
			background: var(--color-haupt);
			color: black;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
	
		#willkommen h2 {
			font-size: 40px;
			margin-bottom: 3%;
		}
	
		#willkommen p{
			font-size: 20px;
			width: 90%;
			margin-left: 5%;
			padding: 5%;
		}
		
		/*Neuheiten*/
		
		.slide-container {
			width: 100%;
			background: grey;
			
		}
		.card-image {
			position: relative;
			height: 200px;
			width: 200px;
			border-radius: 50%;
		}
		
		.card-image .card-img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			border-radius: 50%;
		}
		
		.card {
			border-radius: 25px;
			background: white;
			width: 100%;
			margin-left: 0%;
			
		}
		.slide-content {
			margin: 0 40px;
		}
		.card-content, .image-content {
			display: flex;
			flex-direction: column;
			align-items: center;	
			padding: 10px 14px;
		}
		.image-content{
			position: relative;
			row-gap: 5px;
			padding: 25px 0;
		}
		.overlay {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: #4070f4;
			border-radius: 25px 25px 0 25px;
		}
		.overlay::before,
		.overlay::after{
			content: '';
			position: absolute;
			right: 0;
			bottom: -40px;
			height: 40px;
			width: 40px;
			background: #4070f4;
		}
		.overlay::after {
			border-radius: 0 25px 0 0;
			background: white;
		}
		
	
		.flip-card1 {
			background-color: white;
			width: 100%;
			height: auto;
			min-height: 70vh;
			border: none;
			perspective: 1000px; 
			margin-bottom: 10%;
			margin-right: 0%;
			margin-left: 0%
		  }

		  .flip-card1:nth-child(1){
			margin-right: 0%;
		  }
		  
		  
		  .flip-card1:nth-child(2){
			margin-left: 0%;
		  }

		  .flip-card1:nth-child(3){
			margin-right: 0%;
		  }

		  .flip-card1:nth-child(4){
			margin-left: 0%;
		  }

		  .flip-card1:nth-child(5){
			margin-right: 0%;
		  }

		  .flip-card1:nth-child(6){
			margin-left: 0%;
		  }

		  .flip-card1:nth-child(7){
			margin-right: 0%;
		  }

		  .flip-card1:nth-child(8){
			margin-left: 0%;
		  }

		  /* This container is needed to position the front and back side */
		  /*.flip-card-inner {
			position: relative;
			width: 100%;
			height: auto;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
			margin-top: 1%;
			min-height: 70vh;
			
			
		  }*/
		  
		  
	
		   
		  
		  /* Position the front and back side */
		  .flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 25px;
			background: white;
			backface-visibility: hidden;
			
		  }
		  
		  /* Style the front side (fallback if image is missing) */
		  .flip-card-front {
			width: 100%;
			height: auto;
			padding: 10px px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin-left: 0%;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 5%;
			margin-top: 2%;
			min-height: 70vh;
			
			
		  }
	
		  .flip-card-front img {
			width: 100%;
			border-radius: 20px;
			height: 60vh;
			min-width: 100%;
			min-height: 450px;
			max-height: 450px;
		}
	
		
		  
		  .flip-card-back {
			background-color: var(--accent-color);
			color: white;
			transform: none;
			position: absolute;
			top: 1%;
			height: auto;
			border-radius: 25px 25px 25px 25px;
			display: none;
			
		  }
	
		  
	
		  .flip-card-back h1{
			padding: 8%;
		  }
		  .flip-card-back ul li{
			list-style: inside;
			color: white;
			padding: 7%;
			margin-left: 1%;
			text-align: center;
		  }
	
		  .flip-card-back ul p {
			font-weight: 800;
			font-size: 20px;
			text-align: center;
		  }
		
		#produkt1 .pro-container {
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding-top: 20px;
			padding-left: 10%;
			padding-right: 10%;
			justify-content: center;
			width: 100%;
			margin-left: 0%;
			
			
			
		}
	
		.section-p1 {
			padding: 0px 0px;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		#produkt1 h2 {
			font-size: 40px;
			line-height: 64px;
			width: 100%;
			height: auto;
			padding: 4%;
			background: var(--helleresblau);
			color: var(--white);
		}
	
		
		#produkt1 .flip-card1:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .flip-card1 .beschreibung {
			margin-top: 0%;
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .flip-card1.beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .flip-card1 .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
			margin-bottom: 15%;
		}
	
		#produkt1 .flip-card1 .beschreibung h4{
			padding-top: 20%;
			font-weight: 700;
			color: var(--accent-color);
			font-size: 30px;
		}
		#produkt1 .flip-card1 a{
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position:absolute;
			width: auto;
			height: auto;
			padding: 2%;
			right: 3%;
			bottom: 5%;
			color: white;
			background: var(--accent-color);
			border-radius: 20px;
			cursor: pointer;
			
		}
	
		
		
		.beschreibung a:hover {
			background: var(--pink-color);
		}
		
	
		#produkt1 .flip-card1a:hover {
			background: #18BB78;
		}
	
	
		s
	
		.section-p1 {
			padding: 0px 0px;
			width: 100%;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		
	
		#produkt1 .pro {
			width: 23%;
			min-width: 250px;
			height: 550px;
			padding: 10px 12px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			cursor: pointer;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 15px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 30px;
	
		} 
		#produkt1 .pro:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .pro .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .pro .beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .pro .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .pro .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: absolute;
			bottom: 30px;
			left: 20px;
			font-size: 20px;
		}
		#produkt1 .pro a{
			font-size: 25px;
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position: absolute;
			bottom: 15px;
			right: 30px;
		}
	
		#produkt1 .pro a:hover {
			background: #18BB78;
		}
	
		#produkt1 .pro img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
		
	
		#button-Neu{
			width: 40%;
			height: 5vh;
			border-radius: 2px;
			color: black;
			border: 1px solid var(--accent-color);
			margin-bottom: 10%;
			background: var(--accent-color);
		}

		#button-Neu a{
			color: white;
			
		}
		
		#button-Neu:hover{
			background: var(--accent-color);
		}
		
		.name {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
		
		.button {
			border: none;
			font-size: 16px;
			color: white;
			padding: 8px 16px;
			background: #4070f4;
			border-radius: 6px;
			margin: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.button:hover {
			background: #265df2;
		}
		/*Verkaufsstellen*/

	#verkaufsstellen{
		width: 100%;
		height: auto;
		margin-bottom: 0%;
		background: var(--color-haupt);
		padding: 3%;
		padding-bottom: 10%;

	}

	#verkaufsstellen h2{
		text-align: center;
		font-size: 40px;
		font-weight: 700;
		padding: 1%;
		background: var(--color-haupt);
		color: var(--black);
		width: 100%;
		height: auto;
		padding: 4%
	}

	#verkaufsstellen p{
		font-size: 18px;
	}

	#markte{
		text-align: center;
		font-size: 30px;
		padding: 5%;
		padding-top: 7%;
		padding-bottom: 7%;
		height: auto;
		
		
	}

	#markte:after{
		content: "";
		width: 0;
		height: 2px;
		background: var(--white);
		position: absolute;
		left: 20%;
		margin-top: 7%;
		
	}

	
	.bereich-event1{
		width: 100%;
		height: auto;
		background: var(--color-haupt);
		color: black;
		text-align: center;
		font-size: 20px;
		margin-left: 0%;
		padding-left: 10%;
		padding-right: 10%;
		border-bottom: 2px solid var(--white);
	}

	.bereich-event1 p{
		font-size: 16px;
		padding: 1%;
	}

	#events{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		padding: 2%;
		padding-bottom: 10%;
		background: var(--helleresblau);

	}

	#events .bereich-event{
		width: 95%;
		height: auto;
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left: 2.5%;
		
		
	}

	#events .bereich-event a img{
		width: 100%;
		height: 100%;
	}

	.bereich-event:nth-child(2), .bereich-event:nth-child(4){
		margin-left: 1%;
	}

	.bereich-event:nth-child(1), .bereich-event:nth-child(3){
		margin-right: 1%;
	}

	/*Bereich Produkte Info*/
	#bereich-produkte-head{
		text-align: center;
		padding: 0%;
		width: 100%;
		margin-bottom: 5%;
		margin-left: 0;
		
	}

	#bereich-produkte-head h1{
		font-size: 35px;
		width: 100%;
		padding: 6%;
		
	}

	#bereich-produkte-head h5{
		font-size: 16px;
		color: black;
	}


	#bereich-produkte{
		width: 90%;
		height: auto;
		padding: 1;
		margin-left: 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.name-produkt{
		position: relative;
		background: white;
		width: 100%;
		height: auto;
		overflow: hidden;
		font-size: 14px;
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(3){
		width: 100%;
		margin-bottom: 5%;
		height: 450px;
		min-height: 450px;
		max-height: 450px;
		margin-left: 0.5%;
		
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(5) , .name-produkt:nth-child(9) {
		margin-right: 0%;
	}

	.name-produkt:nth-child(3), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(8), .name-produkt:nth-child(9), .name-produkt:nth-child(10){
		margin-left: 0%;
	}

	.name-produkt:nth-child(4), .name-produkt:nth-child(7), .name-produkt:nth-child(10){
		margin-right: 1%;
	}

	.name-produkt:nth-child(5), .name-produkt:nth-child(8), .name-produkt:nth-child(11){
		margin-left: 1%;
	}



	.name-produkt:nth-child(4), .name-produkt:nth-child(5) , .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		width: 49%;
		margin-bottom: 5%;
		height: 350px;
		min-height: 350px;
		max-height: 350px;
	}

	.name-produkt:nth-child(6), .name-produkt:nth-child(9){
		width: 100%;
		margin-bottom: 5%;
		height: 450px;
		min-height: 450px;
		max-height: 450px;
		
	}

	.name-produkt:nth-child(7), .name-produkt:nth-child(8){
		width: 49%;
		height: 350px;
		min-height: 350px;
		max-height: 350px;
		margin-bottom: 5%;
		
	}

	.name-produkt p{
		font-size: 20px;
		text-align: center;
		color: black;
		background: white;
		hyphens: auto;
	} 

	.name-produkt img{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s ease;
		transform: scale(1);
		object-fit: cover;
		
		
	}

	.name-produkt:nth-child(7) img{
		object-position: 80%;
	}

	.produkt-bezeichnung{
		position: absolute;
		bottom: 0%;
		left: 5%;
		width: 90%;
		background: var(--color-haupt);
		padding: 6%;
		color: var(--black);
		height: auto;
		z-index: 5;
		cursor: pointer;
		
	}

	.produkt-bezeichnung h2{
		margin-bottom: 3%;
		font-size: 18px;
	}

	.name-produkt:hover img{
		transform: scale(1.2);
		max-width: 100%;
	}

	.produkt-bezeichnung a{
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
		background: var(--helleresblau);
		height: auto;
		color: var(--white);
		padding: 2%;
	}

	.produkt-bezeichnung a:hover {
		background: var(--white);
		color: var(--black);
		transition: 0.5s ease-in-out;
	}
/*Über-mich*/
	.name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.button {
		border: none;
		font-size: 16px;
		color: white;
		padding: 8px 16px;
		background: #4070f4;
		border-radius: 6px;
		margin: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.button:hover {
		background: #265df2;
	}



	#Hintergrund-Über-mich {
		margin-top: 5%;
		margin-bottom: 5%;
		padding: 10%;
		width: 100%;
		height:auto;
		background: var(--color-haupt);
		color: black;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		
	}

	#bild-übermich{
		width: 100%;
		height: auto;
		
	}

	#headline-über-mich{
		color: var(--accent-color);
		font-size: 30px;
		padding: 3%;

	}

	#text{
		color: var(--accent-color);
		width: 100%;
		padding: 10%;
		height: auto;
		background: white;
		margin-top: 5%;
	}

	#text-übermich{
		padding: 3%;
	}

	#button-über-mich {
		height: auto;
		width: 60%;
		padding: 4%;
		background: var(--color-haupt);
		color: black;
		border-radius: 0;
		text-align: center;
		cursor: pointer;
		margin-left: 20%;
		display: block;
		
		
	}

	#button-über-mich:hover {
	background: black;
	color: var(--color-haupt);
	}


	#kontakt{
		margin-top: 5%;
		display: block;
		justify-content: center;
		text-align: center;
		height: auto;
		margin-bottom: 60px;
	}

	#text-kontakt{
		text-align: center;
		padding: 2%;
	}

	form {
		background: white;
		height: auto;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	form input{
		height: 20px;
		width: 80%;
		border: none;
		border-bottom: 1px solid #dadada;
		background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
		background-size: 0 100%;
		background-repeat: no-repeat;
		color: #dadada;
		font-size: 13px;
		padding: 7%;
		margin-top: 1.5%;
		
	}

	#textarea-nachricht {
		margin-top: 2%;
		resize: none;
		height: 50vh;
		width: 80%;
		padding: 1%;
		font-size: 12px;
	}
	
	#checkbox-dsgvo1{
		margin-left: 3%;
		line-height: 225%;
		font-size: 14px;
		width: 90%;
		text-align: left;
	}
	
	#checkbox-dsgvo{
			margin-left: 1%;
			margin-top: 1%;
			width: 15px;
			height: 15px;	
			
		}
	
		#check{
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			padding: 1%;
			font-size: 16px;
		}
	
		input[type="submit"] {
			width: 50%;
			height: auto;
			text-align: center;
			align-items: center;
			border: 1px solid black;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-radius:0;
			font-size: 25px;
			padding: 0.5%;
			color: black;
			background: var(--color-haupt);
		}
	
		input[type="submit"]:hover {
			background-color: #606063;
			
		}
	
		input:focus {
			outline: none;
			background-size: 100% 100%;
		}
	
		input:focus::-webkit-input-placeholder {
			font-size: 9px;
			-webkit-transform: translateY(-25px);
			transform: translateY(-25px);
			visibility: visible !important;
		}
		
		input:focus:valid::-webkit-input-placeholder, input:valid {
			color: #18BB78; 
			border-color: #18BB78;
		}
		
		input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
			color: #c9272a;
			border-color: #c9272a;
		}
		input[type="submit"]:focus:valid::-webkit-input-placeholder, input[type="submit"]:valid {
			color: black;
			border-color: var(--color-haupt);
		}
		
		.container {
			max-width: 1400px;
			margin: auto;
		}
	
		.footer{
			background: #24262b;
			padding: 40px 0;
			margin-top: 40px;
		}
		
		.reihe {
			display: flex;
			flex-wrap: wrap;
	
		}
	
		.footer-produkte{
			width: 50%;
			padding: 0 15px;
		}
	
		.footer-produkte h2{
			font-size: 18px;
			color: white;
			text-transform: capitalize;
			margin-bottom: 30px;
			font-weight: 500;
			position: relative;
		}
	
		.footer-produkte h2::before{
			content: '';
			position: absolute;
			left: 0px;
			bottom: -10px;
			background-color: var(--accent-color);
			height: 2px;
			box-sizing: border-box;
			width: 35px;
		} 
	
		.footer-produkte ul li:not(:last-child){
			margin-bottom: 10px;
		}
	
		.footer-produkte ul li a{
			font-size: 16px;
			text-transform: capitalize;
			color: #ffffff;
			text-decoration: none;
			font-weight: 300;
			color: #bbbbbb;
			display: block;
			transition: all 0.3 ease;
	
		}
	
		.footer-produkte ul li a:hover{
			color: #ffffff;
			padding-left: 8px;
		}
	
		.footer-produkte .folgen a {
			display: inline-block;
			height: 40px;
			width: 40px;
			background: rgba(255, 255, 255, 0.2);
			margin: 0 10px 10px 0;
			text-align: center;
			line-height: 40px;
			border-radius: 50%;
			color: #ffffff;
			transition: all 0.5 ease;
		}
	
		.footer-produkte .folgen a:hover{
			color: #24262b;
			background: #ffffff;
			padding-left: 0;
		}
	
		.footer-imp-dat{
			display: flex;
			justify-content: flex-end;
		}
	
		
	
		

		.produktbeschreibung{
			width: 90%;
			height: auto;
			margin-left: 0%;
			margin-right: 0%;
			display: flex;
			flex-direction: column;
			margin-top: 5%;
	
		}
	
		.img-produkt{
			width: 95%;
			max-width: 100%;
			min-width: 90%;
			margin-left: 8%;
			
		}
	
		.img-produkt img {
			width: 100%;
			height: 50vh;
			min-height: 100px;
			display: flex;
			justify-content: center;
			margin-right: 0;
			object-fit: cover;
		}

		.main_image img{
			min-height: 300px;
			height: 30vh;
			object-fit: cover;
		}
	
		.klein{
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 100%;
			margin-top: 1%;
			margin-left: 0%;
		}
	
		.klein img {
			width: 24.25%;
			height: 110px;
			
		}
	
		.margin-img{
			margin-left: 1%;
		}
	
		#text-produkt{
			width: 90%;
			max-width: 90%;
			min-width: 40%;
			margin-left: 10%;
		}
	
		#text-produkt h3{
			color: var(--accent-color);
			margin: 20px 0 20px 0;
			font-size: 25px
		}
	
		#text-produkt h4{
			color: var(--black);
			font-size: 25px;
		}
	
		#text-produkt h5{
			font-size: 15px;
		}
	
		#text-produkt p{
			margin: 20px 0 50px 0;
			line-height: 25px;
		}
	
		.color span{
			width: 25px;
			height: 25px;
			background: #000;
			border-radius: 50%;
			margin: 2% 1% 1% 0;
		}
	
		.color span:hover{
			width: 30px;
			height: 30px;
		}
	
		.color span:nth-child(2){
			background: green;
		}
		
		.color span:nth-child(3){
			background: var(--red);
		}
	
		.color span:nth-child(4){
			background: cadetblue;
		}
	
		.color span:nth-child(5){
			background: blue;
		}
	
		.color span:nth-child(6){
			background: purple;
		}
	
	
		.flex{
			display: flex;
		}
	
		
	
		#ähnliche-produkte-bereich{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: auto;
			margin-top: 2%;
		}
	
		#ähnliche-produkte-bereich-h2{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			margin-bottom: 5%;
		}
	
		#ähnliche-produkte-bereich-h2:after{
			content: "";
			width: 3%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 48.5%;
			margin-top: 0.25%;
			
		}
	
		#ähnliche-produkte-bereich-img{
			width: 90%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: 5%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte{
			width: 90%;
			height: auto;
			margin-left: 5%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte img {
			width: 80%;
			height: 40vh;
			
		}
	
		.artikel-name{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
		}
	
		.preis-ähnliche-Artikel{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			font-weight: 900;
		}
	
		.ähnliche-produkte .button{
			width: 40%;
			margin-left: 30%;
			font-size: 12px;
			text-align: center;
			display: block;
			background: var(--accent-color);
		}
	
		.ähnliche-produkte .button a{
			text-decoration: none;
			color: white;
			text-align: center;
			
		}
	
		.ähnliche-produkte:hover .button{
			display: block;
		}

		/*Seite Über mich start*/
		#übermich-part1{
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			
		}
	
		#übermich-part1 img{
			width: 100%;
			height: 100vh;
			object-fit: cover;
			
			
		}
	
		#übermich-part1 #persönliches-übermich{
			width: 100%;
			height: auto;
			padding: 5%;
			background: var(--color-haupt);
		}
	
		#übermich-part1 #persönliches-übermich h2{
			font-size: 25px;
			text-align: right;
			margin-right: 2%;
			margin-top: 2%;
		}
	
		#übermich-part1 #persönliches-übermich h3{
			font-size: 45px;
			font-weight: 800;
			text-align: right;
			padding: 2%;
		}
	
		#übermich-part1 #persönliches-übermich p{
			font-size: 18px;
			padding: 4%;
			padding-right: 0;
		}
	
		#meineGeschichte{
			margin-top: 5%;
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			
		}
	
		#meineGeschichte #bild-übermich-geschichte{
			width: 100%;
			height: auto;
			
			
		}
	
		#meineGeschichte #bild-übermich-geschichte #img{
			width: 100%;
			height: 100%;
			margin-top: 5%;
			margin-left: 0%;
			object-fit: cover;
			
		}
		#geschichte-übermich {
			width: 85%;
			height: auto;
			padding: 5%;
			margin-left: 7.5%;
	
		}
	
		#geschichte-übermich h3{
			padding: 3%;
			font-size: 30px;
			
		}
	
		#geschichte-übermich h3:after{
			content: "";
			width: 12%;
			height: 2px;
			background: var(--color-haupt);
			position: absolute;
			left: 14%;
			margin-top: 7.9%;
		}
	
		#geschichte-übermich p{
			padding: 3%;
			font-size: 20px;
			text-align: justify;
			hyphens: auto;
		}
	
		/*Seite Über mich ende*/


	}
	@media(min-width: 760px){

		.veranstaltung{
			width: 90%;
		}
		/******************************Impressum************************/
		#impressum-body{
			background: var(--color-haupt);
		}
	
		nav{
			background: white;
		}
	
		#impressum-box{
			padding: 1%;
			width: 90%;
			text-align: center;
			margin-left: 5%;
			
		}
	
		#impressum-box h1{
			color: var(--black);
			font-size: 37px;
			padding: 3%;
			text-transform: uppercase;
			
	
		}
	
		#impressum-box h2 {
			color: var(--black);
			font-size: 25px;
			padding: 4%;
			
		}
	
		#impressum-box p{
			font-size: 20px;
			color: var(--black);
			
			
		}
	
		#impressum-box a{
			font-size: 20px;
			color: var(--black);
		}

		/*Seite Über mich start*/

	#übermich-part1{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		
	}

	#übermich-part1 img{
		width: 100%;
		height: 100vh;
		object-fit: cover;
		
		
	}

	#übermich-part1 #persönliches-übermich{
		width: 100%;
		height: auto;
		padding: 5%;
		background: var(--color-haupt);
	}

	#übermich-part1 #persönliches-übermich h2{
		font-size: 25px;
		text-align: right;
		margin-right: 2%;
		margin-top: 2%;
	}

	#übermich-part1 #persönliches-übermich h3{
		font-size: 45px;
		font-weight: 800;
		text-align: right;
		padding: 2%;
	}

	#übermich-part1 #persönliches-übermich p{
		font-size: 18px;
		padding: 4%;
		padding-right: 0;
	}

	#meineGeschichte{
		margin-top: 5%;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
	}

	#meineGeschichte #bild-übermich-geschichte{
		width: 30%;
		height: auto;
	}

	#meineGeschichte #bild-übermich-geschichte #img{
		width: 100%;
		height: 75%;
		margin-top: 10%;
		margin-left: 0%;
		object-fit: cover;
		
	}
	#geschichte-übermich {
		width: 65%;
		height: auto;
		padding: 5%;
		margin-left: 0%;

	}

	#geschichte-übermich h3{
		padding: 3%;
		font-size: 30px;
		
	}

	#geschichte-übermich h3:after{
		content: "";
		width: 12%;
		height: 2px;
		background: var(--color-haupt);
		position: absolute;
		left: 6%;
		margin-top: 4.7%;
	}

	#geschichte-übermich p{
		padding: 3%;
		font-size: 20px;
		text-align: justify;
	}

	/*Seite Über mich Ende*/

	  /*Button nach oben*/
		a.button-hoch1 {
			background: white;
			border: 2px solid black;
			text-align: center;
			height: 50px;
			width: 50px;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 1%;
			bottom: 1%;
			z-index: 99999;
		}

		a.button-hoch1 i{
			font-size: 55px;
			font-weight: 600;
			color: black;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}

		

		a.button-hoch1:hover {
			border: 3px solid black;
		}

		.logo-lottiundfreddi img {
			width: 500px;
			height: 125px;
			margin-left: auto;
			margin-right: auto;
		}	

	/*Sidebar*/
	.topnav{
		display: none;
	}
	nav {
		display: flex;
		justify-content: center;

	}

	.sidenav {
		height: 100%; 						
		margin-bottom: 2%;
		width: 0; 							
		position: fixed; 					
		z-index: 1; 						
		top: 0; 							
		left: 0;
		background-color: var(--accent-color);
		color: white; 			
		overflow-x: hidden;					
		padding-top: 60px; 							
		transition: 0.5s; 
		display: block;						
	}
	
	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 19px;
		color: white;
		display: block;
		transition: 0.3s;
	}

	.sidenav a.active, .sidenav a:hover, .sidenav a #dropdown a{
		background: white;
		color: var(--accent-color);
	}

	.sidenav a:nth-child(1):hover{
		color: rgba(255, 255, 255, 0.2);
		background: var(--accent-color);
	}

	
	
	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}
	
	#main {
		transition: margin-left .7s;
		padding: 20px;
	}
	
	#logo-lottiundfreddi{
		margin-left: -5%;
	}
	
	.bar1, .bar2, .bar3{
		width: 35px;
		height: 5px;
		background-color: black;
		margin: 3px 0;
		transition: 0.4s;
		display: block;
	}
	
	.toogle_button{
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		left: 5%;
		top: 60px;
	}

	.mobile-container{
		display: none;
	}


	ul #dropdown-nav{
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: white;
		z-index: 1;
		width: 100%;
		height: auto;
		margin-bottom: 1%;
		padding: 0;

	}
	
	#dropdown-nav li {
		text-align: center;
		padding-left: 2%;
		margin-top: 1%;
		margin-left: 0;
	}

	#dropdown-nav li a{
		font-size: 17px;
	}
	
	#dropdown-nav li .nav-elementdrop{
		margin-left: 0;
	}

	#dropdown-nav li:nth-child(8){
		margin-bottom: 1%;
	}
	
		/*Slider*/
		#bereich-slider {
			color: var(--white);
			font-family: sans-serif;
			width: 100%;
			height: 100vh;
			min-height: 800px;
		  }  
		  
		#bereich-slider img {
			display: block;
			width: 100%;
			height: 100vh;
			min-height: 800px;
			background-color: var(--img-color);
			object-fit: cover;
		  }
		  
		  label {
			display: block;
			cursor: pointer;
		  }
		  
		  input[type="radio"] {
			position: absolute;
			bottom: 0;
			left: -9999px;
		  }
			
		  #bereich-slider .slider {
			min-width: 100%;
			min-height: 100vh;
		  }
		  
		  .slider-div {
			position: relative;
		  }
		  
		  .slider-div .slider-elemente{
			display: grid;
		  }
		  
		  .slider-div .slider-elemente li {
			grid-column: 1;
			grid-row: 1;
			opacity: 0;
			transition: opacity 0.25s;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::before,
		  .slider-div .buttons-weiter-zurueck label::after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 2.5%;
			height: 4.5%;
			border-radius: 50%;
			color: var(--black);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			background-color: var(--white);
			opacity: 0.5;
			transition: opacity 0.25s;
		  }
		  
		  
		  .slider-div .buttons-weiter-zurueck label::before {
			left: 1%;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::after {
			right: 1%;
		  }
		  
		  .slider-div .dots {
			position: absolute;
			bottom: 1%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
		  }
		  
		  .slider-div .dots li:not(:last-child) {
			margin-right: 8%;
		  }
		  
		  .slider-div .dots label {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 3px solid var(--white);
			transition: 0.25s;
		  }
		  
		  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
			background: #ededed;
		  }
		  
		  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
		  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
		  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
		  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
		  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
		  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
			opacity: 1;
		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
			content: '<';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			left: 2%;
			width: 6%;
			height: 5%;
			

		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
			content: '>';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			right: 2%;
			width: 6%;
			height: 5%;
		  }
		  
		  [id="img1"]:checked ~ .slider .dots [for="img1"],
		  [id="img2"]:checked ~ .slider .dots [for="img2"],
		  [id="img3"]:checked ~ .slider .dots [for="img3"],
		  [id="img4"]:checked ~ .slider .dots [for="img4"],
		  [id="img5"]:checked ~ .slider .dots [for="img5"],
		  [id="img6"]:checked ~ .slider .dots [for="img6"] {
			background: currentColor;
		  }
	
		/*Willkommensbereich*/
		
		#willkommen {
			width: 100%;
			height: auto;
			margin-bottom: 0%;
			padding: 5%;
			background: var(--color-haupt);
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
	
		#willkommen h2 {
			font-size: 40px;
			margin-bottom: 3%;
		}
	
		#willkommen p{
			font-size: 20px;
			width: 90%;
			margin-left: 5%;
		}
		
		/*Neuheiten*/
		
		.slide-container {
			max-width: 1120px;
			width: 100%;
			background: grey;
			
		}
		.card-image {
			position: relative;
			height: 150px;
			width: 150px;
			border-radius: 50%;
		}
		
		.card-image .card-img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			border-radius: 50%;
		}
		
		.card {
			border-radius: 25px;
			background: white;
			width: 320px;
			
		}
		.slide-content {
			margin: 0 40px;
		}
		.card-content, .image-content {
			display: flex;
			flex-direction: column;
			align-items: center;	
			padding: 10px 14px;
		}
		.image-content{
			position: relative;
			row-gap: 5px;
			padding: 25px 0;
		}
		.overlay {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: #4070f4;
			border-radius: 25px 25px 0 25px;
		}
		.overlay::before,
		.overlay::after{
			content: '';
			position: absolute;
			right: 0;
			bottom: -40px;
			height: 40px;
			width: 40px;
			background: #4070f4;
		}
		.overlay::after {
			border-radius: 0 25px 0 0;
			background: white;
		}
		
	
		.flip-card1 {
			background-color: white;
			width: 45%;
			height: auto;
			min-height: 600px;
			max-height: 600px;
			border: none;
			perspective: 1000px; 
			margin-bottom: 5%;
			margin-right: 0%;
			margin-left: 0%;
			margin-top: 2%;
		  }

		  .flip-card1:nth-child(1){
			margin-right: 2%;
		  }
		  
		  
		  .flip-card1:nth-child(2){
			margin-left: 2%;
		  }

		  .flip-card1:nth-child(3){
			margin-right: 2%;
		  }

		  .flip-card1:nth-child(4){
			margin-left: 2%;
		  }

		  .flip-card1:nth-child(5){
			margin-right: 2%;
		  }

		  .flip-card1:nth-child(6){
			margin-left: 2%;
		  }

		  .flip-card1:nth-child(7){
			margin-right: 2%;
		  }

		  .flip-card1:nth-child(8){
			margin-left: 2%;
		  }

		  /* This container is needed to position the front and back side */
		  /*.flip-card-inner {
			position: relative;
			width: 100%;
			height: 70vh;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
		  }*/
		  
		  
	
		   
		  
		  /* Position the front and back side */
		  .flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 25px;
			background: white;
			backface-visibility: hidden;
			
		  }
		  
		  /* Style the front side (fallback if image is missing) */
		  .flip-card-front {
			width: 100%;
			min-width: 250px;
			height: 500px;
			min-height: 600px;
			max-height: 600px;
			padding: 10px px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 0px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 0;
		  }
	
		  .flip-card-front img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
	
		
		  
		  .flip-card-back {
			background-color: var(--accent-color);
			color: white;
			position: absolute;
			top: 1%;
			height: 70vh;
			border-radius: 25px;
		  }
	
		  
	
		  .flip-card-back h1{
			padding: 8%;
		  }
		  .flip-card-back ul li{
			list-style: inside;
			color: white;
			padding: 7%;
			margin-left: 1%;
			text-align: center;
		  }
	
		  .flip-card-back ul p {
			font-weight: 800;
			font-size: 20px;
			text-align: center;
		  }
		
		#produkt1 .pro-container {
			display: flex;
			justify-content: space-between;
			padding-top: 20px;
			flex-wrap: wrap;
			
		}
	
		.section-p1 {
			padding: 0px 0px;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		#produkt1 h2 {
			font-size: 46px;
			line-height: 64px;
			width: 100%;
			height: auto;
			padding: 4%;
			background: var(--helleresblau);
			color: var(--white);
		}
	
		
		#produkt1 .flip-card1:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .flip-card1 .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .flip-card1.beschreibung span {
			color: #606063;
			font-size: 12px;
			margin-top: 1%;
		}
		
		#produkt1 .flip-card1 .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
			margin-top: 1%;
		}
	
		#produkt1 .flip-card1 .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: relative;
			bottom: 40px;
			left: 20px;
			font-size: 25px;
			margin-top: 15%;
			
		}
		#produkt1 .flip-card1 a{
			
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position:absolute;
			width: auto;
			height: auto;
			padding: 2%;
			right: 3%;
			bottom: 5%;
			color: black;
			background: var(--accent-color);
			border-radius: 20px;
			cursor: pointer;
			
		}
	
		
		
		.beschreibung a:hover {
			background: var(--pink-color);
		}
		
	
		#produkt1 .flip-card1a:hover {
			background: #18BB78;
		}
	
	
		#produkt1 .pro-container {
			display: flex;
			justify-content: center;
			flex-direction: row;
			padding-top: 20px;
			flex-wrap: wrap;
			margin-left: 1%;
			width: 98%;
			
			
			
		}
	
		.section-p1 {
			padding: 0px 0px;
			width: 100%;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		#produkt1 .pro {
			width: 23%;
			min-width: 250px;
			height: 550px;
			padding: 10px 12px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			cursor: pointer;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 15px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 30px;
	
		} 
		#produkt1 .pro:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .pro .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .pro .beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .pro .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .pro .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: absolute;
			bottom: 30px;
			left: 20px;
			font-size: 20px;
		}
		#produkt1 .pro a{
			font-size: 25px;
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position: absolute;
			bottom: 15px;
			right: 30px;
		}
	
		#produkt1 .pro a:hover {
			background: #18BB78;
		}
	
		#produkt1 .pro img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
		
	
		#button-Neu{
			width: 20%;
			height: 5vh;
			border-radius: 25px 25px 25px 25px;
			color: black;
			border: 1px solid var(--accent-color);
			margin-bottom: 10%;
		}
		
		#button-Neu:hover{
			border: 5px solid var(--accent-color);
		}
		
		.name {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
		
		.button {
			border: none;
			font-size: 16px;
			color: white;
			padding: 8px 16px;
			background: #4070f4;
			border-radius: 6px;
			margin: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.button:hover {
			background: #265df2;
		}
		
		/*Verkaufsstellen*/

	#verkaufsstellen{
		width: 100%;
		height: auto;
		margin-bottom: 0;
		background: var(--color-haupt);
		padding: 3%;
		
	}

	#verkaufsstellen h2{
		text-align: center;
		font-size: 30px;
		font-weight: 700;
		padding: 1%;
		background: var(--color-haupt);
		color: var(--black);
		width: 100%;
		height: auto;
		
	}

	#markte{
		text-align: center;
		font-size: 40px;
		padding: 3%;
		
		
	}

	#markte:after{
		content: "";
		width: 40%;
		height: 2px;
		background: var(--white);
		position: absolute;
		left: 30%;
		margin-top: 8%;
	}

	
	.bereich-event1{
		width: 100%;
		height: auto;
		background: var(--color-haupt);
		color: black;
		text-align: center;
		font-size: 20px;
		margin-left: 0%;
		border-bottom: 2px solid white;
		padding: 6%;

	}

	.bereich-event1 p{
		font-size: 16px;
		padding: 0%;
	}

	#events{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 2%;
		padding-bottom: 2%;
		background: var(--helleresblau);
	}

	#events .bereich-event{
		width: 48%;
		height: auto;
		min-height: 500px;
		margin-top: 1%;
		margin-left: 0%;
		
	}

	#events .bereich-event .veranstaltung img{
		width: 100%;
		height: 100%;
	}

	.bereich-event:nth-child(2), .bereich-event:nth-child(4){
		margin-left: 1%;
		margin-right: 0;
	}

	.bereich-event:nth-child(1), .bereich-event:nth-child(3){
		margin-right: 1%;
	}

	/*Bereich Produkte Info*/
	#bereich-produkte-head{
		text-align: center;
		padding: 0%;
		width: 100%;
		height: auto;
		padding: 2%;
		margin-bottom: 2%;
		margin-left: 0;
		
	}

	#bereich-produkte-head h1{
		font-size: 40px;
		
		width: 100%;
		padding: 1%;
		
		
	}

	#bereich-produkte-head h5{
		font-size: 16px;
		color: black;
	}


	#bereich-produkte{
		width: 70%;
		height: auto;
		padding: 1;
		margin-left: 15%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.name-produkt{
		position: relative;
		background: white;
		width: 100%;
		height: auto;
		overflow: hidden;
		font-size: 14px;
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(3){
		width: 100%;
		margin-bottom: 5%;
		height: 550px;
		min-height: 550px;
		max-height: 550px;
		margin-left: 0.5%;
		
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(5), .name-produkt:nth-child(9) {
		margin-right: 0%;
	}

	.name-produkt:nth-child(3), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(8), .name-produkt:nth-child(9), .name-produkt:nth-child(10){
		margin-left: 0%;
	}

	.name-produkt:nth-child(4), .name-produkt:nth-child(7){
		margin-right: 1%;
	}

	.name-produkt:nth-child(5), .name-produkt:nth-child(8){
		margin-left: 1%;
	}



	.name-produkt:nth-child(4), .name-produkt:nth-child(5), .name-produkt:nth-child(11){
		width: 49%;
		margin-bottom: 5%;
		height: 400px;
		min-height: 400px;
		max-height: 400px;
	}

	.name-produkt:nth-child(6), .name-produkt:nth-child(9){
		width: 100%;
		margin-bottom: 5%;
		height: 550px;
		min-height: 550px;
		max-height: 550px;
		
	}

	.name-produkt:nth-child(7), .name-produkt:nth-child(8), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		width: 49%;
		height: 400px;
		min-height: 400px;
		max-height: 400px;
		margin-bottom: 5%;
		
	}

	.name-produkt p{
		font-size: 20px;
		text-align: center;
		color: black;
		background: white;
	} 

	.name-produkt img{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s ease;
		transform: scale(1);
		
		
	}
	.produkt-bezeichnung{
		position: absolute;
		bottom: 0%;
		left: 5%;
		width: 90%;
		background: var(--color-haupt);
		padding: 6%;
		color: var(--img-color);
		height: auto;
		z-index: 5;
		cursor: pointer;
	}

	.produkt-bezeichnung h2{
		margin-bottom: 3%;
		padding: 1%;
		padding-left: 0;
	}
	.name-produkt:hover img{
		transform: scale(1.2);
		max-width: 100%;
	}

	.produkt-bezeichnung a{
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
		background: var(--accent-color);
		height: auto;
		color: var(--white);
		padding: 2%;
		color: white;
		font-weight: 700;
	}

	.produkt-bezeichnung a:hover {
		background: var(--helleresblau);
		transition: 0.5s ease-in-out;
	}
	
		/*Über-mich*/
	.name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.button {
		border: none;
		font-size: 16px;
		color: white;
		padding: 8px 16px;
		background: #4070f4;
		border-radius: 6px;
		margin: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.button:hover {
		background: #265df2;
	}



	#Hintergrund-Über-mich {
		margin-top: 5%;
		margin-bottom: 5%;
		padding: 10%;
		width: 100%;
		height:auto;
		background: var(--color-haupt);
		color: black;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		
	}

	#bild-übermich{
		width: 100%;
		height: auto;
		position: relative;
		left: 3%;
		top: 15%;
		
	}

	#headline-über-mich{
		color: var(--accent-color);
		font-size: 30px;
		padding: 3%;

	}

	#text{
		color: var(--accent-color);
		width: 200%;
		padding: 10%;
		height: auto;
		background: white;
		margin-top: 5%;
	}

	#text-übermich{
		padding: 3%;
	}

	#button-über-mich {
		height: auto;
		width: 60%;
		padding: 4%;
		background: var(--color-haupt);
		color: black;
		border-radius: 0;
		text-align: center;
		cursor: pointer;
		margin-left: 20%;
		display: block;
		
		
	}

	#button-über-mich:hover {
		background: black;
		color: var(--color-haupt);
	}
		
	/*Kontaktformular*/
		#kontakt{
			margin-top: 5%;
			display: block;
			justify-content: center;
			text-align: center;
			height: auto;
			margin-bottom: 60px;
		}
	
		#text-kontakt{
			text-align: center;
			padding: 2%;
		}
	
		form {
			background: white;
			height: auto;
			align-items: center;
			display: flex;
			flex-direction: column;
		}
		
		form input{
			height: 20px;
			width: 60%;
			border: none;
			border-bottom: 1px solid #dadada;
			background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
			background-size: 0 100%;
			background-repeat: no-repeat;
			color: #dadada;
			font-size: 13px;
			padding: 5%;
			margin-top: 1.5%;
			
		}
	
		#textarea-nachricht {
			margin-top: 2%;
			resize: none;
			height: 60vh;
			width: 60%;
			padding: 1%;
			font-size: 12px;
		}
		
		#checkbox-dsgvo1{
			margin-left: 1%;
			line-height: 225%;
		}
	
		#checkbox-dsgvo{
			margin-left: 1%;
			margin-top: 1%;
			width: 20px;
			height: 20px;	
			
		}
	
		#check{
			width: 60%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			padding: 1%;
		}
	
		input[type="submit"] {
			width: 20%;
			height: auto;
			text-align: center;
			align-items: center;
			border: 1px solid black;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-radius:0;
			font-size: 25px;
			padding: 0.5%;
			color: black;
			background: var(--color-haupt);
		}
	
		#senden:hover {
			background: var(--Blau-Grau);
		}
	
		input:focus {
			outline: none;
			background-size: 100% 100%;
		}
	
		input:focus::-webkit-input-placeholder {
			font-size: 9px;
			-webkit-transform: translateY(-25px);
			transform: translateY(-25px);
			visibility: visible !important;
		}
		
		input:focus:valid::-webkit-input-placeholder, input:valid {
			color: #18BB78; 
			border-color: #18BB78;
		}
		
		input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
			color: #c9272a;
			border-color: #c9272a;
		}
		
		input[type="submit"]:focus:valid::-webkit-input-placeholder, input[type="submit"]:valid {
			color: black;
			border-color: var(--color-haupt);
		}
		.container {
			max-width: 1400px;
			margin: auto;
		}
	
		.footer{
			background: #24262b;
			padding: 60px 0;
			margin-top: 40px;
		}
		
		.reihe {
			display: flex;
			flex-wrap: wrap;
	
		}
	
		.footer-produkte{
			width: 25%;
			padding: 0 15px;
		}
	
		.footer-produkte h2{
			font-size: 18px;
			color: white;
			text-transform: capitalize;
			margin-bottom: 30px;
			font-weight: 500;
			position: relative;
		}
	
		.footer-produkte h2::before{
			content: '';
			position: absolute;
			left: 0px;
			bottom: -10px;
			background-color: var(--accent-color);
			height: 2px;
			box-sizing: border-box;
			width: 35px;
		} 
	
		.footer-produkte ul li:not(:last-child){
			margin-bottom: 10px;
		}
	
		.footer-produkte ul li a{
			font-size: 16px;
			text-transform: capitalize;
			color: #ffffff;
			text-decoration: none;
			font-weight: 300;
			color: #bbbbbb;
			display: block;
			transition: all 0.3 ease;
	
		}
	
		.footer-produkte ul li a:hover{
			color: #ffffff;
			padding-left: 8px;
		}
	
		.footer-produkte .folgen a {
			display: inline-block;
			height: 40px;
			width: 40px;
			background: rgba(255, 255, 255, 0.2);
			margin: 0 10px 10px 0;
			text-align: center;
			line-height: 40px;
			border-radius: 50%;
			color: #ffffff;
			transition: all 0.5 ease;
		}
	
		.footer-produkte .folgen a:hover{
			color: #24262b;
			background: #ffffff;
			padding-left: 0;
		}
	
		.footer-imp-dat{
			display: flex;
			justify-content: flex-end;
		}
	
		
	
		.button-hoch {
			height: 30px;
			width: 30px;
			background: #616161;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 10px;
			bottom: 10px;
			rotate: 270deg;
		}
	
		.button-hoch a{
			background: black;
		}
	
		
	
		.produktbeschreibung{
			width: 90%;
			height: auto;
			margin-left: 10%;
			display: flex;
			flex-direction: column;
			margin-top: 5%;
	
		}
	
		.img-produkt{
			width: 80%;
			max-width: 80%;
			min-width: 80%;
			margin-left: 5%;
		}
	
		.img-produkt img {
			width: 100%;
			height: 60vh;
			min-height: 125px;
		}

		.main_image img{
			min-height: 500px;
			height: 50vh;
		}
	
		.klein{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin-top: 1%;
		}
	
		.klein img {
			width: 24.25%;
			height: 100px;
			
		}
	
		.margin-img{
			margin-left: 1%;
		}
	
		#text-produkt{
			width: 80%;
			max-width: 90%;
			min-width: 40%;
			margin-left: 5%;
		}
	
		#text-produkt h3{
			color: var(--accent-color);
			margin: 20px 0 20px 0;
			font-size: 25px;
			text-align: center;
		}
	
		#text-produkt h4{
			color: var(--black);
			font-size: 25px;
		}
	
		#text-produkt h5{
			font-size: 15px;
		}
	
		#text-produkt p{
			margin: 20px 0 50px 0;
			line-height: 25px;
		}
	
		.color span{
			width: 25px;
			height: 25px;
			background: #000;
			border-radius: 50%;
			margin: 2% 1% 1% 0;
		}
	
		.color span:hover{
			width: 30px;
			height: 30px;
		}
	
		.color span:nth-child(2){
			background: green;
		}
		
		.color span:nth-child(3){
			background: var(--red);
		}
	
		.color span:nth-child(4){
			background: cadetblue;
		}
	
		.color span:nth-child(5){
			background: blue;
		}
	
		.color span:nth-child(6){
			background: purple;
		}
	
	
		.flex{
			display: flex;
		}
	
	
	
		#ähnliche-produkte-bereich{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: auto;
			margin-top: 2%;
		}
	
		#ähnliche-produkte-bereich-h2{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			margin-bottom: 1%;
		}
	
		#ähnliche-produkte-bereich-h2:after{
			content: "";
			width: 3%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 48.5%;
			margin-top: 0.25%;
			
		}
	
		#ähnliche-produkte-bereich-img{
			width: 90%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: 5%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte{
			width: 50%;
			height: auto;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte img {
			width: 80%;
			height: 40vh;
			
		}
	
		.artikel-name{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
		}
	
		.preis-ähnliche-Artikel{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			font-weight: 900;
		}
	
		.ähnliche-produkte .button{
			width: 40%;
			margin-left: 30%;
			font-size: 12px;
			text-align: center;
			display: block;
			background: var(--accent-color);
		}
	
		.ähnliche-produkte .button a{
			text-decoration: none;
			color: white;
			text-align: center;
			
		}
	
		.ähnliche-produkte:hover .button{
			display: block;
		}


		

		
		
	}
	@media (min-width: 980px){

		.veranstaltung{
			width: 90%;
		}
		/******************************Impressum************************/
		#impressum-body{
			background: var(--color-haupt);
		}
		.topnav{
			background: white;
		}
		
	
		#impressum-box{
			padding: 1%;
			width: 50%;
			text-align: center;
			margin-left: 25%;
			
		}
	
		#impressum-box h1{
			color: var(--black);
			font-size: 35px;
			padding: 3%;
			text-transform: uppercase;
			
	
		}
	
		#impressum-box h2 {
			color: var(--black);
			font-size: 23px;
			padding: 4%;
			
		}
	
		#impressum-box p{
			font-size: 18px;
			color: var(--black);
			
			
		}
	
		#impressum-box a{
			font-size: 20px;
			color: var(--black);
		}

		#datenschutzerklaerung-box{
			position: relative;
		}

		/*Seite Über mich start*/

	#übermich-part1{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		
	}

	#übermich-part1 img{
		width: 40%;
		height: 600px;

	}

	#übermich-part1 #persönliches-übermich{
		width: 60%;
		height: 600px;
		padding: 5%;
		background: var(--color-haupt);
	}

	#übermich-part1 #persönliches-übermich h2{
		font-size: 25px;
		text-align: right;
		margin-right: 2%;
		margin-top: 2%;
	}

	#übermich-part1 #persönliches-übermich h3{
		font-size: 45px;
		font-weight: 800;
		text-align: right;
		padding: 2%;
	}

	#übermich-part1 #persönliches-übermich p{
		font-size: 18px;
		padding: 4%;
		padding-right: 0;
	}

	#meineGeschichte{
		margin-top: 5%;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
	}

	#meineGeschichte #bild-übermich-geschichte{
		width: 40%;
		height: auto;
	}

	#meineGeschichte #bild-übermich-geschichte #img{
		width: 50%;
		height: 70%;
		margin-top: 10%;
		margin-left: 20%;
		
		
	}
	#geschichte-übermich {
		width: 60%;
		height: auto;
		padding: 5%;
		margin-left: 5%;

	}

	#geschichte-übermich h3{
		padding: 3%;
		font-size: 30px;
		
	}

	#geschichte-übermich h3:after{
		content: "";
		width: 7%;
		height: 2px;
		background: var(--color-haupt);
		position: absolute;
		left: 11%;
		margin-top: 3.5%;
	}

	#geschichte-übermich p{
		padding: 3%;
		font-size: 20px;
		text-align: justify;
		hyphens: auto;
	}

	/*Seite Über mich Ende*/


		/*Button nach oben*/
		a.button-hoch1 {
			background: white;
			border: 2px solid black;
			text-align: center;
			height: 45px;
			width: 45px;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 1%;
			bottom: 1%;
			z-index: 99999;
		}

		a.button-hoch1 i{
			font-size: 50px;
			font-weight: 600;
			color: black;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}

		

		a.button-hoch1:hover {
			border: 3px solid black;
		}	

		
		/*Logo*/
		.logo-lottiundfreddi img {
			width: 400px;
			height: auto;
			display: flex;
			justify-content: center;
			flex-direction: row;
		}
		#weg-img2{
			display: none;
		}
		/*Navigationsleiste*/

		.topnav {
			display: block;
			padding: 1%;
		}
		
		#navbar {
			display: flex;
			justify-content: center;
			text-align: center;
			list-style: none;
			padding: 2%;
			margin-left: 0;
		}
	
		#navbar a {
			text-align: center;
			font-size: 15px;
			padding: 0 20px;
			position: relative;
			color: #1e1e1e;
			transition: 0.3s ease;
			text-decoration: none;
			margin-left: 0;
		}
	
		#navbar a:hover,
		#navbar a.active {
			color: var(--accent-color);
		}
	
		#navbar a.active::after,
		#navbar a:hover::after {
			content: "";
			width: 28%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 20px;
			bottom: -4px;
	
		}
		
		.icon{
			display: none;
		}
	
		#dropdown-nav{
			display: none;
			flex-direction: column;
			background: var(--color-haupt);
			width: 30%;
			position: absolute;
			top: 0;
			left: 41%;
			z-index: 10;
			padding: 2%;
			border-top: 4px solid var(--helleresblau);
	
		}

		#dropdown-nav li {
			padding: 2%;
		}

		#dropdown-nav li a{
			color: black;
		}

		#dropdown-nav li:hover a{
			color: var(--accent-color);
		}
	
		#navbar a:hover #dropdown-nav{
			display: block;
			z-index: 99;
			background: white;
			color: #000;
		}
		
		.toogle_button{
			display: none;
		}
		/*Slider*/
		#bereich-slider {
			color: var(--white);
			font-family: sans-serif;
			width: 100%;
			height: 90vh;
			min-height: 750px;
			
		  }  
		  
		#bereich-slider img {
			display: block;
			width: 100%;
			height: 90vh;
			min-height: 750px;
			background-color: var(--img-color);
		  }
		  
		  label {
			display: block;
			cursor: pointer;
		  }
		  
		  input[type="radio"] {
			position: absolute;
			bottom: 0;
			left: -9999px;
		  }
			
		  #bereich-slider .slider {
			min-width: 100%;
			min-height: 100vh;
		  }
		  
		  .slider-div {
			position: relative;
		  }
		  
		  .slider-div .slider-elemente{
			display: grid;
		  }
		  
		  .slider-div .slider-elemente li {
			grid-column: 1;
			grid-row: 1;
			opacity: 0;
			transition: opacity 0.25s;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::before,
		  .slider-div .buttons-weiter-zurueck label::after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 2.5%;
			height: 4.5%;
			border-radius: 50%;
			color: var(--black);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			background-color: var(--white);
			opacity: 0.5;
			transition: opacity 0.25s;
		  }
		  
		  
		  .slider-div .buttons-weiter-zurueck label::before {
			left: 1%;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::after {
			right: 1%;
		  }
		  
		  .slider-div .dots {
			position: absolute;
			bottom: 1%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
		  }
		  
		  .slider-div .dots li:not(:last-child) {
			margin-right: 8%;
		  }
		  
		  .slider-div .dots label {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 3px solid var(--white);
			transition: 0.25s;
		  }
		  
		  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
			background: #ededed;
		  }
		  
		  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
		  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
		  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
		  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
		  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
		  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
			opacity: 1;
		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
			content: '<';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			left: 2%;
			width: 3%;
			height: 4%;
			

		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
			content: '>';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			right: 2%;
			width: 3%;
			height: 4%;
		  }
		  
		  [id="img1"]:checked ~ .slider .dots [for="img1"],
		  [id="img2"]:checked ~ .slider .dots [for="img2"],
		  [id="img3"]:checked ~ .slider .dots [for="img3"],
		  [id="img4"]:checked ~ .slider .dots [for="img4"],
		  [id="img5"]:checked ~ .slider .dots [for="img5"],
		  [id="img6"]:checked ~ .slider .dots [for="img6"] {
			background: currentColor;
		  }
	
		/*Willkommensbereich*/
		
		#willkommen {
			width: 100%;
			height: auto;
			margin-bottom: 0%;
			padding: 5%;
			background: var(--color-haupt);
			color: black;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
	
		#willkommen h2 {
			font-size: 40px;
			margin-bottom: 0%;
			padding: 1%;
		}

		#willkommen h2:after{
			content: "";
			width: 50%;
			height: 3px;
			background: var(--black);
			position: absolute;
			left: 25%;
			margin-top: 6%;
		}
	
		#willkommen p{
			font-size: 20px;
			width: 90%;
			margin-left: 5%;
			padding: 5%;
		}
		
		/*Neuheiten*/
		
		.slide-container {
			width: 100%;
			background: grey;
			
		}
		.card-image {
			position: relative;
			height: 200px;
			width: 200px;
			border-radius: 50%;
		}
		
		.card-image .card-img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			border-radius: 50%;
		}
		
		.card {
			border-radius: 25px;
			background: white;
			width: 100%;
			margin-left: 0%;
			
		}
		.slide-content {
			margin: 0 40px;
		}
		.card-content, .image-content {
			display: flex;
			flex-direction: column;
			align-items: center;	
			padding: 10px 14px;
		}
		.image-content{
			position: relative;
			row-gap: 5px;
			padding: 25px 0;
		}
		.overlay {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: #4070f4;
			border-radius: 25px 25px 0 25px;
		}
		.overlay::before,
		.overlay::after{
			content: '';
			position: absolute;
			right: 0;
			bottom: -40px;
			height: 40px;
			width: 40px;
			background: #4070f4;
		}
		.overlay::after {
			border-radius: 0 25px 0 0;
			background: white;
		}
		
	
		.flip-card1 {
			background-color: white;
			width: 30%;
			height: auto;
			min-height: 600px;
			border: none;
			perspective: 1000px; 
			margin-bottom: 5%;
			margin-right: 0%;
			margin-left: 0%;
			
		  }

		  .flip-card1:nth-child(1), .flip-card1:nth-child(4){
			margin-right: 2%;
			margin-left: 0%;
		  }
		  
		  
		  .flip-card1:nth-child(2), .flip-card1:nth-child(5){
			margin-left: 2%;
			margin-right: 2%;
		  }

		  .flip-card1:nth-child(3), .flip-card1:nth-child(6){
			margin-left: 2%;
		
		  }

		  .flip-card1:nth-child(6){
			margin-right: 2%;
		  }

		  .flip-card1:nth-child(7){
			margin-right: 2%;
			
		  }

		  .flip-card1:nth-child(8){
			margin-left: 2%;
			margin-right: 2%;
		  }

		  /* This container is needed to position the front and back side */
		  /*.flip-card-inner {
			position: relative;
			width: 100%;
			height: auto;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
			min-height: 600px;
			max-height: 600px;
			margin-top: 1%;
		  }*/
		  
		 
		   
		  
		  /* Position the front and back side */
		  .flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 25px;
			background: white;
			backface-visibility: hidden;
			
		  }
		  
		  /* Style the front side (fallback if image is missing) */
		  .flip-card-front {
			width: 100%;
			min-width: 250px;
			height: auto;
			min-height: 600px;
			padding: 10px px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 0px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 2%;
			margin-top: 2%;
		  }
	
		  .flip-card-front img {
			width: 100%;
			border-radius: 20px;
			height: 60vh;
			min-height: 450px;
			max-height: 450px;
			
		}

		
		

		
		  
		  .flip-card-back {
			background-color: var(--accent-color);
			color: white;
			transform: rotateY(0);
			position: absolute;
			top: 1%;
			height: 60vh;
			min-height: 550px;
			max-height: 550px;
			border-radius: 25px;
		  }
	
		  
	
		  .flip-card-back h1{
			padding: 8%;
		  }
		  .flip-card-back ul li{
			list-style: inside;
			color: white;
			padding: 7%;
			margin-left: 1%;
			text-align: center;
		  }
	
		  .flip-card-back ul p {
			font-weight: 800;
			font-size: 20px;
			text-align: center;
		  }
		
		#produkt1 .pro-container {
			display: flex;
			justify-content: flex-start;
			padding-top: 20px;
			flex-wrap: wrap;
			width: 100%;

			
		}
	
		.section-p1 {
			padding: 0px 0px;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		#produkt1 h2 {
			font-size: 46px;
			line-height: 64px;
			width: 100%;
			height: auto;
			padding: 4%;
			background: var(--helleresblau);
			color: var(--white);
		}
	
		
		#produkt1 .flip-card1:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .flip-card1 .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .flip-card1.beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .flip-card1 .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .flip-card1 .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: relative;
			bottom: 40px;
			left: 20px;
			font-size: 25px;
			margin-top: 15%;
		}

		#produkt1 .flip-card1 a{
			
			border: 1px solid white;
			border-radius: 50px;
			position:absolute;
			width: auto;
			height: auto;
			padding: 2%;
			right: 3%;
			bottom: 5%;
			color: white;
			background: var(--accent-color);
			border-radius: 20px;
			cursor: pointer;
			margin-top: 20%;
		}
	
		
		
		.beschreibung a:hover {
			background: var(--pink-color);
		}
		
	
		#produkt1 .flip-card1a:hover {
			background: #18BB78;
		}
	
	
		#produkt1 .pro-container {
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			padding-top: 20px;
			flex-wrap: wrap;
			margin-left: 0%;
			margin-right: 0;
			padding: 0;
			width: 100%;
			
			
			
		}
	
		.section-p1 {
			padding: 0px 0px;
			width: 100%;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		
	
		#produkt1 .pro {
			width: 23%;
			min-width: 250px;
			height: 550px;
			max-height: 600px;
			padding: 10px 12px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			cursor: pointer;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 15px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 30px;
	
		} 
		#produkt1 .pro:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .pro .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .pro .beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .pro .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .pro .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: absolute;
			bottom: 30px;
			left: 20px;
			font-size: 20px;
		}
		#produkt1 .pro a{
			font-size: 25px;
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position: absolute;
			bottom: 15px;
			right: 30px;
		}
	
		#produkt1 .pro a:hover {
			background: #18BB78;
		}
	
		#produkt1 .pro img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
		
	
		#button-Neu{
			width: 20%;
			height: 5vh;
			border-radius: 25px 25px 25px 25px;
			color: black;
			border: 1px solid var(--accent-color);
			margin-bottom: 10%;
		}
		
		#button-Neu:hover{
			border: 5px solid var(--accent-color);
		}
		
		.name {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
		
		.button {
			border: none;
			font-size: 16px;
			color: white;
			padding: 8px 16px;
			background: #4070f4;
			border-radius: 6px;
			margin: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.button:hover {
			background: #265df2;
		}

		/*Verkaufsstellen*/

	#verkaufsstellen{
		width: 100%;
		height: auto;
		margin-bottom: 0;
		background: var(--color-haupt);
		padding: 3%;
		

	}

	#verkaufsstellen h2{
		text-align: center;
		font-size: 45px;
		font-weight: 700;
		padding: 1%;
		background: var(--color-haupt);
		color: var(--black);
		width: 100%;
		height: auto;
		padding: 1%
	}

	#markte{
		text-align: center;
		font-size: 40px;
		padding: 3%;
		
		
	}

	#markte:after{
		content: "";
		width: 40%;
		height: 2px;
		background: var(--white);
		position: absolute;
		left: 30%;
		margin-top: 6%;
	}

	
	.bereich-event1{
		width: 80%;
		height: auto;
		background: var(--color-haupt);
		color: black;
		text-align: center;
		font-size: 20px;
		margin-left: 10%;
		border-bottom: 2px solid white;
	}

	.bereich-event1 p{
		font-size: 16px;
		padding: 0%;
	}

	#events{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 2%;
		padding-bottom: 2%;
		background: var(--helleresblau);
	}

	#events .bereich-event{
		width: 48%;
		height: auto;
		min-height: 500px;
		margin-top: 1%;
		margin-left: 0%;
		
	}

	#events .bereich-event .veranstaltung img{
		width: 100%;
		height: 100%;
	}

	.bereich-event:nth-child(2), .bereich-event:nth-child(4){
		margin-left: 1%;
		margin-right: 0;
	}

	.bereich-event:nth-child(1), .bereich-event:nth-child(3){
		margin-right: 1%;
	}


	/*Bereich Produkte Info*/
	#bereich-produkte-head{
		text-align: center;
		padding: 0%;
		width: 100%;
		height: auto;
		padding: 2%;
		margin-bottom: 2%;
		margin-left: 0;
	
	}

	#bereich-produkte-head h1{
		font-size: 45px;
		
		width: 100%;
		padding: 1%;
		
		text-transform: uppercase;
	}

	#bereich-produkte-head h5{
		font-size: 16px;
		color: black;
	}


	#bereich-produkte{
		width: 70%;
		height: auto;
		padding: 1;
		margin-left: 15%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.name-produkt{
		position: relative;
		background: var(--color-haupt);
		width: 100%;
		height: auto;
		overflow: hidden;
		font-size: 14px;
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(3){
		width: 49%;
		margin-bottom: 2%;
		height: 400px;
		min-height: 400px;
		max-height: 400px;
		margin-left: 0;
		
		
	}

	.name-produkt:nth-child(2), .name-produkt:nth-child(5) {
		margin-right: 1%;
		margin-left: 0;
	}

	.name-produkt:nth-child(3), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(8), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		margin-left: 1%;
	}

	.name-produkt:nth-child(4), .name-produkt:nth-child(7), .name-produkt:nth-child(9), .name-produkt:nth-child(10){
		margin-right: 1%;
	}

	.name-produkt:nth-child(5), .name-produkt:nth-child(8){
		margin-left: 1%;
	}



	.name-produkt:nth-child(4), .name-produkt:nth-child(5){
		width: 32%;
		margin-bottom: 2%;
		height: 350px;
		min-height: 350px;
		max-height: 350px;
	}

	.name-produkt:nth-child(6), .name-produkt:nth-child(9), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
		width: 32%;
		margin-bottom: 2%;
		height: 350px;
		min-height: 350px;
		max-height: 350px;
		
	}

	.name-produkt:nth-child(7), .name-produkt:nth-child(8){
		width: 49%;
		height: 400px;
		min-height: 400px;
		max-height: 400px;
		margin-bottom: 2%;
		
	}

	.name-produkt p{
		font-size: 20px;
		text-align: center;
		color: black;
		background: white;
	} 

	.name-produkt img{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s ease;
		transform: scale(1);
		
		
	}
	.produkt-bezeichnung{
		position: absolute;
		bottom: 0%;
		left: 5%;
		width: 90%;
		background: var(--color-haupt);
		padding: 6%;
		color: var(--white);
		height: auto;
		z-index: 5;
		cursor: pointer;
	}

	.produkt-bezeichnung h2{
		margin-bottom: 3%;
		padding: 1%;
		padding-left: 0;
	}
	.name-produkt:hover img{
		transform: scale(1.2);
		max-width: 100%;
	}

	.produkt-bezeichnung a{
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
		background: var(--accent-color);
		height: auto;
		color: var(--white);
		padding: 2%;
		color: white;
		font-weight: 700;
	}

	.produkt-bezeichnung a:hover {
		background: var(--helleresblau);
		transition: 0.5s ease-in-out;
	}

		/*Über-mich*/
	.name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.button {
		border: none;
		font-size: 16px;
		color: white;
		padding: 8px 16px;
		background: #4070f4;
		border-radius: 6px;
		margin: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.button:hover {
		background: #265df2;
	}



	#Hintergrund-Über-mich {
		margin-top: 5%;
		margin-bottom: 5%;
		padding: 10%;
		width: 100%;
		height:auto;
		background: var(--color-haupt);
		color: black;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		
	}

	#bild-übermich{
		width: 100%;
		height: auto;
		position: relative;
		left: 8%;
		top: 12%;
		
	}

	#headline-über-mich{
		color: var(--accent-color);
		font-size: 30px;
		padding: 3%;

	}

	#text{
		color: var(--accent-color);
		width: 200%;
		padding: 10%;
		height: auto;
		background: white;
		margin-top: 5%;
	}

	#text-übermich{
		padding: 3%;
	}

	#button-über-mich {
		height: auto;
		width: auto;
		padding: 4%;
		background: var(--color-haupt);
		color: black;
		border-radius: 0;
		text-align: center;
		cursor: pointer;
		margin-left: 20%;
		display: block;
		
		
	}

	#button-über-mich:hover {
		background: black;
		color: var(--color-haupt);
	}
	
	/*Kontakformular*/
		#kontakt{
			margin-top: 5%;
			display: block;
			justify-content: center;
			text-align: center;
			height: auto;
			margin-bottom: 60px;
		}
	
		#text-kontakt{
			text-align: center;
			padding: 2%;
		}
	
		form {
			background: white;
			height: auto;
			align-items: center;
			display: flex;
			flex-direction: column;
		}
		
		form input{
			height: 20px;
			width: 60%;
			border: none;
			border-bottom: 1px solid #dadada;
			background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
			background-size: 0 100%;
			background-repeat: no-repeat;
			color: #dadada;
			font-size: 14px;
			padding: 3%;
			margin-top: 1.5%;
			
		}
	
		#textarea-nachricht {
			margin-top: 2%;
			resize: none;
			height: 70vh;
			width: 60%;
			padding: 1%;
			font-size: 12px;
		}
		
		#checkbox-dsgvo1{
			margin-left: 1%;
			line-height: 225%;
		}
	
		#checkbox-dsgvo{
			margin-left: 1%;
			margin-top: 1%;
			width: 20px;
			height: 20px;	
			
		}
	
		#check{
			width: 60%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			padding: 1%;
		}
	
		input #senden {
			width: 10%;
			height: 30px;
			text-align: center;
			align-items: center;
			border: 1px solid var(--accent-color);
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-radius: 20px 20px 20px 20px;
		}
	
		#senden:hover {
			background-color: #606063;
		}
	
		input:focus {
			outline: none;
			background-size: 100% 100%;
		}
	
		input:focus::-webkit-input-placeholder {
			font-size: 11px;
			-webkit-transform: translateY(-25px);
			transform: translateY(-25px);
			visibility: visible !important;
		}
		
		input:focus:valid::-webkit-input-placeholder, input:valid {
			color: #18BB78; 
			border-color: #18BB78;
		}
		
		input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
			color: #c9272a;
			border-color: #c9272a;
		}
		
		.container {
			max-width: 1400px;
			margin: auto;
		}
	
		.footer{
			background: #24262b;
			padding: 60px 0;
			margin-top: 40px;
		}
		
		.reihe {
			display: flex;
			flex-wrap: wrap;
	
		}
	
		.footer-produkte{
			width: 25%;
			padding: 0 15px;
		}
	
		.footer-produkte h2{
			font-size: 18px;
			color: white;
			text-transform: capitalize;
			margin-bottom: 30px;
			font-weight: 500;
			position: relative;
		}
	
		.footer-produkte h2::before{
			content: '';
			position: absolute;
			left: 0px;
			bottom: -10px;
			background-color: var(--accent-color);
			height: 2px;
			box-sizing: border-box;
			width: 35px;
		} 
	
		.footer-produkte ul li:not(:last-child){
			margin-bottom: 10px;
		}
	
		.footer-produkte ul li a{
			font-size: 16px;
			text-transform: capitalize;
			color: #ffffff;
			text-decoration: none;
			font-weight: 300;
			color: #bbbbbb;
			display: block;
			transition: all 0.3 ease;
	
		}
	
		.footer-produkte ul li a:hover{
			color: #ffffff;
			padding-left: 8px;
		}
	
		.footer-produkte .folgen a {
			display: inline-block;
			height: 40px;
			width: 40px;
			background: rgba(255, 255, 255, 0.2);
			margin: 0 10px 10px 0;
			text-align: center;
			line-height: 40px;
			border-radius: 50%;
			color: #ffffff;
			transition: all 0.5 ease;
		}
	
		.footer-produkte .folgen a:hover{
			color: #24262b;
			background: #ffffff;
			padding-left: 0;
		}
	
		.footer-imp-dat{
			display: flex;
			justify-content: flex-end;
		}
	
		
	
		.button-hoch {
			height: 30px;
			width: 30px;
			background: #616161;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 10px;
			bottom: 10px;
			rotate: 270deg;
		}
	
		.button-hoch a{
			background: black;
		}
	
		
	
		.produktbeschreibung{
			width: 90%;
			height: auto;
			margin-left: 0%;
			display: flex;
			flex-direction: row;
			margin-top: 5%;
			margin-bottom: 10%;
	
		}
	
		.img-produkt{
			width: 40%;
			max-width: 40%;
			min-width: 40%;
		}
	
		.img-produkt img {
			width: 100%;
			height: 50vh;
			min-height: 125px;
		}

		.main_image img{
			min-height: 450px;
			height: 50vh;
		}
	
		.klein{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin-top: 1%;
		}
	
		.klein img {
			width: 24.25%;
			height: 100px;
			
		}
	
		.margin-img{
			margin-left: 1%;
		}
	
		#text-produkt{
			width: 40%;
			max-width: 40%;
			min-width: 40%;
			margin-left: 10%;
		}
	
		#text-produkt h3{
			color: var(--accent-color);
			margin: 20px 0 20px 0;
			font-size: 25px
		}
	
		#text-produkt h4{
			color: var(--black);
			font-size: 25px;
		}
	
		#text-produkt h5{
			font-size: 15px;
		}
	
		#text-produkt p{
			margin: 20px 0 50px 0;
			line-height: 25px;
		}
	
		.color span{
			width: 25px;
			height: 25px;
			background: #000;
			border-radius: 50%;
			margin: 2% 1% 1% 0;
		}
	
		.color span:hover{
			width: 30px;
			height: 30px;
		}
	
		.color span:nth-child(2){
			background: green;
		}
		
		.color span:nth-child(3){
			background: var(--red);
		}
	
		.color span:nth-child(4){
			background: cadetblue;
		}
	
		.color span:nth-child(5){
			background: blue;
		}
	
		.color span:nth-child(6){
			background: purple;
		}
	
	
		.flex{
			display: flex;
		}
	
	
	
		#ähnliche-produkte-bereich{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: auto;
			margin-top: 2%;
		}
	
		#ähnliche-produkte-bereich-h2{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			margin-bottom: 1%;
		}
	
		#ähnliche-produkte-bereich-h2:after{
			content: "";
			width: 3%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 48.5%;
			margin-top: 0.25%;
			
		}
	
		#ähnliche-produkte-bereich-img{
			width: 90%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			margin-left: 5%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte{
			width: 25%;
			height: auto;
			
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte img {
			width: 80%;
			height: 40vh;
			
		}
	
		.artikel-name{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
		}
	
		.preis-ähnliche-Artikel{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			font-weight: 900;
		}
	
		.ähnliche-produkte .button{
			width: 40%;
			margin-left: 30%;
			font-size: 12px;
			text-align: center;
			display: none;
			background: var(--accent-color);
		}
	
		.ähnliche-produkte .button a{
			text-decoration: none;
			color: white;
			text-align: center;
			
		}
	
		.ähnliche-produkte:hover .button{
			display: block;
		}
		
	}
	
	@media (min-width: 1280px){

		.veranstaltung{
			width: 90%;
		}
		/******************************Impressum************************/
		#impressum-body{
			background: var(--color-haupt);
		}
		.topnav{
			background: white;
		}
		
	
		#impressum-box{
			padding: 1%;
			width: 50%;
			text-align: center;
			margin-left: 25%;
			
		}
	
		#impressum-box h1{
			color: var(--black);
			font-size: 38px;
			padding: 3%;
			text-transform: uppercase;
			
	
		}
	
		#impressum-box h2 {
			color: var(--black);
			font-size: 26px;
			padding: 4%;
			
		}
	
		#impressum-box p{
			font-size: 22px;
			color: var(--black);
			
			
		}
	
		#impressum-box a{
			font-size: 20px;
			color: var(--black);
		}

		#datenschutzerklaerung-box{
			position: relative;
		}
	/*Logo + navbar desktop*/

	

	.mobile-container{
		position: relative;
		left: 0;
		top: 0;
		height: auto;
		width: 80%;
        padding: 1%;
		display: block;	
		justify-content: center;
		align-items: center;
		height: auto;
		margin-left: 10%;
        
	}
	
	#navbar {
		display: flex;
		justify-content: center;
		text-align: center;
        list-style: none;
	}

	#navbar a {
		margin-left: 30px;
		font-size: 20px;
		padding: 0 20px;
		position: relative;
	}

	#navbar a{
		color: #1e1e1e;
		transition: 0.3s ease;
        text-decoration: none;
	}

	#navbar a:hover,
	#navbar a.active {
		color: var(--black);
	}

	#navbar a.active::after,
	#navbar a:hover::after {
		content: "";
		width: 28%;
		height: 2px;
		background: var(--black);
		position: absolute;
		left: 20px;
		bottom: -4px;

	}
    
    .icon{
        display: none;
    }

	

	

	/*Slider*/
	#bereich-slider {
		color: var(--white);
		font-family: sans-serif;
		width: 100%;
		height: 100vh;
		min-height: 900px;
	  }  
	  
	#bereich-slider img {
		display: block;
		width: 100%;
		height: 100vh;
		min-height: 900px;
		background-color: var(--img-color);
	  }
	  
	label {
		display: block;
		cursor: pointer;
	  }
	  
	input[type="radio"] {
		position: absolute;
		bottom: 0;
		left: -9999px;
	  }
	    
	#bereich-slider .slider {
		min-width: 100%;
		min-height: 100vh;
	  }
	  
	.slider-div {
		position: relative;
	  }
	  
	.slider-div .slider-elemente{
		display: grid;
	  }
	  
	.slider-div .slider-elemente li {
		grid-column: 1;
		grid-row: 1;
		opacity: 0;
		transition: opacity 0.25s;
	  }
	  
	.slider-div .buttons-weiter-zurueck label::before,
	.slider-div .buttons-weiter-zurueck label::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2.5%;
		height: 4.5%;
		border-radius: 50%;
		color: var(--black);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px 24px;
		background-color: var(--white);
		opacity: 0.5;
		transition: opacity 0.25s;
	  }
	  
	  
	  .slider-div .buttons-weiter-zurueck label::before {
		left: 1%;
	  }
	  
	  .slider-div .buttons-weiter-zurueck label::after {
		right: 1%;
	  }
	  
	  .slider-div .dots {
		position: absolute;
		bottom: 1%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
	  }
	  
	  .slider-div .dots li:not(:last-child) {
		margin-right: 8%;
	  }
	  
	  .slider-div .dots label {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 3px solid var(--white);
		transition: 0.25s;
	  }
	  
	  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
		background: #ededed;
	  }
	  
	  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
	  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
	  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
	  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
	  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
	  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
	  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
	  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
		opacity: 1;
	  }
	  
	  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
	  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
	  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
	  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
	  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
	  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
		content: '<';
		font-size: 60px;
		font-weight: 300;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		
		
	  }
	  
	  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
	  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
	  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
	  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
	  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
	  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
		content: '>';
		font-size: 60px;
		font-weight: 300;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		
	  }
	  
	  [id="img1"]:checked ~ .slider .dots [for="img1"],
	  [id="img2"]:checked ~ .slider .dots [for="img2"],
	  [id="img3"]:checked ~ .slider .dots [for="img3"],
	  [id="img4"]:checked ~ .slider .dots [for="img4"],
	  [id="img5"]:checked ~ .slider .dots [for="img5"],
	  [id="img6"]:checked ~ .slider .dots [for="img6"] {
		background: currentColor;
	  }
	
	

	/*Willkommen*/
	
	#willkommen {
		width: 100%;
		height: auto;
		margin-bottom: 2%;
		padding: 5%;
		background: rgba(250, 132, 132, 0.272);
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		
	}

	#willkommen h2 {
		font-size: 40px;
		margin-bottom: 3%;
	}

	#willkommen p{
		font-size: 20px;
	}

	

	


/*Bereich Produkte Info*/
#bereich-produkte-head{
	text-align: center;
	padding: 0%;
	width: 100%;
	height: auto;
	padding: 2%;
	margin-bottom: 2%;
	margin-left: 0;
}

#bereich-produkte-head h1{
	font-size: 45px;
	
	width: 100%;
	padding: 1%;
	
	text-transform: uppercase;
}

#bereich-produkte-head h5{
	font-size: 16px;
	color: black;
}


#bereich-produkte{
	width: 70%;
	height: auto;
	padding: 1;
	margin-left: 15%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.name-produkt{
	position: relative;
	background: var(--color-haupt);
	width: 100%;
	height: auto;
	overflow: hidden;
	font-size: 14px;
	
}

.name-produkt:nth-child(2), .name-produkt:nth-child(3){
	width: 49%;
	margin-bottom: 2%;
	height: 450px;
	min-height: 450px;
	max-height: 450px;
	margin-left: 0;
	
	
}

.name-produkt:nth-child(2), .name-produkt:nth-child(5) {
	margin-right: 1%;
	margin-left: 0;
}

.name-produkt:nth-child(3), .name-produkt:nth-child(5), .name-produkt:nth-child(6), .name-produkt:nth-child(8), .name-produkt:nth-child(10){
	margin-left: 1%;
}

.name-produkt:nth-child(4), .name-produkt:nth-child(7), .name-produkt:nth-child(9){
	margin-right: 1%;
}

.name-produkt:nth-child(5), .name-produkt:nth-child(8){
	margin-left: 1%;
}



.name-produkt:nth-child(4), .name-produkt:nth-child(5), .name-produkt:nth-child(9), .name-produkt:nth-child(10), .name-produkt:nth-child(11){
	width: 32%;
	margin-bottom: 2%;
	height: 400px;
	min-height: 400px;
	max-height: 400px;
}

.name-produkt:nth-child(6){
	width: 32%;
	margin-bottom: 2%;
	height: 400px;
	min-height: 400px;
	max-height: 400px;
	
}

.name-produkt:nth-child(7), .name-produkt:nth-child(8){
	width: 49%;
	height: 450px;
	min-height: 450px;
	max-height: 450px;
	margin-bottom: 2%;
	
}

.name-produkt p{
	font-size: 20px;
	text-align: center;
	color: black;
	background: var(--color-haupt);
} 

.name-produkt img{
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 1s ease;
	transform: scale(1);
	
	
}
.produkt-bezeichnung{
	position: absolute;
	bottom: 0%;
	left: 5%;
	width: 90%;
	background: var(--color-haupt);
	padding: 6%;
	color: var(--white);
	height: auto;
	z-index: 5;
	cursor: pointer;
}

.produkt-bezeichnung h2{
	margin-bottom: 3%;
	padding: 1%;
	padding-left: 0;
}
.name-produkt:hover img{
	transform: scale(1.2);
	max-width: 100%;
}

.produkt-bezeichnung a{
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	background: var(--accent-color);
	height: auto;
	color: var(--white);
	padding: 2%;
	color: white;
	font-weight: 700;
}

.produkt-bezeichnung a:hover {
	background: var(--helleresblau);
	transition: 0.5s ease-in-out;
}

	/*Über-mich*/
.name {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.button {
	border: none;
	font-size: 16px;
	color: white;
	padding: 8px 16px;
	background: #4070f4;
	border-radius: 6px;
	margin: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.button:hover {
	background: #265df2;
}



#Hintergrund-Über-mich {
	margin-top: 5%;
	margin-bottom: 5%;
	padding: 10%;
	width: 100%;
	height:auto;
	background: var(--color-haupt);
	color: black;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	
}

#bild-übermich{
	width: 130%;
	height: 80%;
	position: relative;
	left: -20%;
	
}

#headline-über-mich{
	color: var(--accent-color);
	font-size: 30px;
	padding: 3%;

}

#text{
	color: var(--accent-color);
	width: 100%;
	padding: 10%;
	height: auto;
	background: white;
	margin-top: 5%;
}

#text-übermich{
	padding: 3%;
}

#button-über-mich {
	height: auto;
	width: auto;
	padding: 4%;
	background: var(--color-haupt);
	color: black;
	border-radius: 0;
	text-align: center;
	cursor: pointer;
	margin-left: 20%;
	display: block;
	
	
}

#button-über-mich:hover {
	background: black;
	color: var(--color-haupt);
}

	/*Kontaktformular*/
	#kontakt{
		margin-top: 5%;
		display: block;
		justify-content: center;
		text-align: center;
		height: auto;
		margin-bottom: 60px;
	}

	#text-kontakt{
		text-align: center;
		padding: 2%;
	}

	form {
		background: white;
		height: auto;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	form input{
		height: 20px;
		width: 40%;
		border: none;
		border-bottom: 1px solid #dadada;
		background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
		background-size: 0 100%;
		background-repeat: no-repeat;
		color: #dadada;
		font-size: 20px;
		padding: 2%;
		
	}

	#textarea-nachricht {
		margin-top: 2%;
		resize: none;
		height: 50vh;
		width: 40%;
		padding: 1%;
		font-size: 12px;
	}
	
	#checkbox-dsgvo1{
		margin-left: 1%;
		line-height: 225%;
	}

	#checkbox-dsgvo{
		margin-left: 1%;
		margin-top: 1%;
		width: 20px;
		height: 20px;	
		
	}

	#check{
		width: 40%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		padding: 1%;
	}

	input #senden {
		width: 10%;
		height: 30px;
		text-align: center;
		align-items: center;
		border: 1px solid var(--accent-color);
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-radius: 20px 20px 20px 20px;
	}

	#senden:hover {
		background-color: #606063;
	}

	input:focus {
		outline: none;
		background-size: 100% 100%;
	}

	input:focus::-webkit-input-placeholder {
		font-size: 15px;
		-webkit-transform: translateY(-25px);
		transform: translateY(-25px);
		visibility: visible !important;
	}
	
	input:focus:valid::-webkit-input-placeholder, input:valid {
		color: #18BB78; 
		border-color: #18BB78;
	}
	
	input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
		color: #c9272a;
		border-color: #c9272a;
	}
	
	/*Footer*/
	.container {
		max-width: 1400px;
		margin: auto;
	}

	.footer{
		background: #24262b;
		padding: 60px 0;
		margin-top: 40px;
	}
	
	.reihe {
		display: flex;
		flex-wrap: wrap;

	}

	.footer-produkte{
		width: 25%;
		padding: 0 15px;
	}

	.footer-produkte h2{
		font-size: 18px;
		color: white;
		text-transform: capitalize;
		margin-bottom: 30px;
		font-weight: 500;
		position: relative;
	}

	.footer-produkte h2::before{
		content: '';
		position: absolute;
		left: 0px;
		bottom: -10px;
		background-color: var(--accent-color);
		height: 2px;
		box-sizing: border-box;
		width: 35px;
	} 

	.footer-produkte ul li:not(:last-child){
		margin-bottom: 10px;
	}

	.footer-produkte ul li a{
		font-size: 16px;
		text-transform: capitalize;
		color: #ffffff;
		text-decoration: none;
		font-weight: 300;
		color: #bbbbbb;
		display: block;
		transition: all 0.3 ease;

	}

	.footer-produkte ul li a:hover{
		color: #ffffff;
		padding-left: 8px;
	}

	.footer-produkte .folgen a {
		display: inline-block;
		height: 40px;
		width: 40px;
		background: rgba(255, 255, 255, 0.2);
		margin: 0 10px 10px 0;
		text-align: center;
		line-height: 40px;
		border-radius: 50%;
		color: #ffffff;
		transition: all 0.5 ease;
	}

	.footer-produkte .folgen a:hover{
		color: #24262b;
		background: #ffffff;
		padding-left: 0;
	}

	.footer-imp-dat{
		display: flex;
		justify-content: flex-end;
	}

	

	#button-hoch1 {
		height: 1%;
		width: 1%;
		
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: row;
		position: fixed;
		right: 1%;
		bottom: 1%;
		
		
	}

	#button-hoch1 a{
		background: white;
		border: 1px solid grey;
		
	}

	
	
	/*Verkaufsstellen*/

	#verkaufsstellen{
		width: 100%;
		height: auto;
		margin-bottom: 0;
		background: var(--color-haupt);
		padding: 3%;
		

	}

	#verkaufsstellen h2{
		text-align: center;
		font-size: 45px;
		font-weight: 700;
		padding: 1%;
		background: var(--color-haupt);
		color: var(--black);
		width: 100%;
		height: auto;
		padding: 1%
	}

	#markte{
		text-align: center;
		font-size: 40px;
		padding: 3%;
		
		
	}

	#markte:after{
		content: "";
		width: 20%;
		height: 2px;
		background: var(--white);
		position: absolute;
		left: 40%;
		margin-top: 3.7%;
	}
	
	.bereich-event1{
		width: 70%;
		height: auto;
		background: var(--color-haupt);
		color: black;
		text-align: center;
		font-size: 24px;
		margin-left: 15%;
		border-bottom: 2px solid white;
		
	}

	#events{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		padding: 2%;
		padding-bottom: 2%;
		background: var(--helleresblau);

	}

	#events .bereich-event{
		width: 48%;
		height: auto;
		min-height: 500px;
		margin-top: 1%;
		margin-left: 0%;
		
	}

	#events .bereich-event .veranstaltung img{
		width: 100%;
		height: 100%;
	}

	.bereich-event:nth-child(1), .bereich-event:nth-child(2), .bereich-event:nth-child(3), .bereich-event:nth-child(4), .bereich-event:nth-child(4){
		margin-left: 1%;
		margin-right: 1%;
	}

	
	
		
		/*Button nach oben*/
		a.button-hoch1 {
			background: white;
			border: 2px solid black;
			text-align: center;
			height: 45px;
			width: 45px;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 1%;
			bottom: 1%;
			z-index: 99999;
			
		}

		a.button-hoch1 i{
			font-size: 50px;
			font-weight: 600;
			color: black;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}

		

		a.button-hoch1:hover {
			border: 3px solid black;
		}	

		
		
		
		.logo-lottiundfreddi img {
			width: 400px;
			height: auto;
			display: flex;
			justify-content: center;
			flex-direction: row;
		}
		#weg-img2{
			display: none;
		}
		/*Navigationsleiste*/

		.topnav {
			display: block;
		}
		
		#navbar {
			display: flex;
			justify-content: center;
			text-align: center;
			list-style: none;
			padding: 2%;
			margin-left: 0;
		}
	
		#navbar a {
			text-align: center;
			font-size: 18px;
			padding: 0 20px;
			position: relative;
			color: #1e1e1e;
			transition: 0.3s ease;
			text-decoration: none;
			margin-left: 0;
		}
	
		#navbar a:hover,
		#navbar a.active {
			color: var(--accent-color);
		}
	
		#navbar a.active::after,
		#navbar a:hover::after {
			content: "";
			width: 28%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 20px;
			bottom: -4px;
	
		}
		
		.icon{
			display: none;
		}
	
		#dropdown-nav{
			display: none;
			flex-direction: column;
			background: var(--color-haupt);
			color: white;
			width: 18%;
			position: absolute;
			top: 0;
			left: 41;
			z-index: 10;
			padding: 2%;
			border-top: 4px solid var(--helleresblau);
		}
		
		#dropdown-nav li {
			padding: 2%;
			
		}

		#dropdown-nav li a{
			color: black;
			font-size: 20px;
		}

		#dropdown-nav li:hover a{
			color: var(--accent-color);
		}

		#navbar a:hover #dropdown-nav{
			display: block;
			z-index: 99;
			background: white;
			color: #000;
		}
		
		.toogle_button{
			display: none;
		}
		/*Slider*/
		#bereich-slider {
			color: var(--white);
			font-family: sans-serif;
			width: 100%;
			height: 110vh;
			min-height: 1000px;
			
		  }  
		  
		#bereich-slider img {
			display: block;
			width: 100%;
			height: 110vh;
			min-height: 1000px;
			background-color: var(--img-color);
		  }
		  
		  label {
			display: block;
			cursor: pointer;
		  }
		  
		  input[type="radio"] {
			position: absolute;
			bottom: 0;
			left: -9999px;
		  }
			
		  #bereich-slider .slider {
			min-width: 100%;
			min-height: 100vh;
		  }
		  
		  .slider-div {
			position: relative;
		  }
		  
		  .slider-div .slider-elemente{
			display: grid;
		  }
		  
		  .slider-div .slider-elemente li {
			grid-column: 1;
			grid-row: 1;
			opacity: 0;
			transition: opacity 0.25s;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::before,
		  .slider-div .buttons-weiter-zurueck label::after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 2.5%;
			height: 4.5%;
			border-radius: 50%;
			color: var(--black);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			background-color: var(--white);
			opacity: 0.5;
			transition: opacity 0.25s;
		  }
		  
		  
		  .slider-div .buttons-weiter-zurueck label::before {
			left: 1%;
		  }
		  
		  .slider-div .buttons-weiter-zurueck label::after {
			right: 1%;
		  }
		  
		  .slider-div .dots {
			position: absolute;
			bottom: 1%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
		  }
		  
		  .slider-div .dots li:not(:last-child) {
			margin-right: 8%;
		  }
		  
		  .slider-div .dots label {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 3px solid var(--white);
			transition: 0.25s;
		  }
		  
		  .slider-div .dots label:hover, .slider-div .buttons-weiter-zurueck ul li:hover label  {
			background: #ededed;
		  }
		  
		  [id="img1"]:checked ~ .slider .slider-elemente li:nth-child(1),
		  [id="img2"]:checked ~ .slider .slider-elemente li:nth-child(2),
		  [id="img3"]:checked ~ .slider .slider-elemente li:nth-child(3),
		  [id="img4"]:checked ~ .slider .slider-elemente li:nth-child(4),
		  [id="img5"]:checked ~ .slider .slider-elemente li:nth-child(5),
		  [id="img6"]:checked ~ .slider .slider-elemente li:nth-child(6),
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::before,
		  [id^="image"]:checked ~ .slider .buttons-weiter-zurueck [for^="image"]:hover::after {
			opacity: 1;
		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::before,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::before,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::before,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::before,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::before,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::before  {
			content: '<';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			left: 2%;
			width: 3%;
			height: 4%;
			

		  }
		  
		  [id="img1"]:checked ~ .slider .buttons-weiter-zurueck [for="img2"]::after,
		  [id="img2"]:checked ~ .slider .buttons-weiter-zurueck [for="img3"]::after,
		  [id="img3"]:checked ~ .slider .buttons-weiter-zurueck [for="img4"]::after,
		  [id="img4"]:checked ~ .slider .buttons-weiter-zurueck [for="img5"]::after,
		  [id="img5"]:checked ~ .slider .buttons-weiter-zurueck [for="img6"]::after,
		  [id="img6"]:checked ~ .slider .buttons-weiter-zurueck [for="img1"]::after {
			content: '>';
			font-size: 40px;
			font-weight: 300;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			right: 2%;
			width: 3%;
			height: 4%;
		  }
		  
		  [id="img1"]:checked ~ .slider .dots [for="img1"],
		  [id="img2"]:checked ~ .slider .dots [for="img2"],
		  [id="img3"]:checked ~ .slider .dots [for="img3"],
		  [id="img4"]:checked ~ .slider .dots [for="img4"],
		  [id="img5"]:checked ~ .slider .dots [for="img5"],
		  [id="img6"]:checked ~ .slider .dots [for="img6"] {
			background: currentColor;
		  }
	
		/*Willkommensbereich*/
		
		#willkommen {
			width: 100%;
			height: auto;
			margin-bottom: 0%;
			padding: 5%;
			background: var(--color-haupt);
			color: black;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			
		}
	
		#willkommen h2 {
			font-size: 40px;
			margin-bottom: 0%;
			padding: 1%;
		}
	
		#willkommen p{
			font-size: 20px;
			width: 90%;
			margin-left: 5%;
			padding: 5%;
		}
		
		/*Neuheiten*/
		
		.slide-container {
			max-width: 1120px;
			width: 100%;
			background: grey;
			
		}
		.card-image {
			position: relative;
			height: 150px;
			width: 150px;
			border-radius: 50%;
		}
		
		.card-image .card-img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			border-radius: 50%;
		}
		
		.card {
			border-radius: 25px;
			background: white;
			width: 320px;
			
		}
		.slide-content {
			margin: 0 40px;
		}
		.card-content, .image-content {
			display: flex;
			flex-direction: column;
			align-items: center;	
			padding: 10px 14px;
		}
		.image-content{
			position: relative;
			row-gap: 5px;
			padding: 25px 0;
		}
		.overlay {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: #4070f4;
			border-radius: 25px 25px 0 25px;
		}
		.overlay::before,
		.overlay::after{
			content: '';
			position: absolute;
			right: 0;
			bottom: -40px;
			height: 40px;
			width: 40px;
			background: #4070f4;
		}
		.overlay::after {
			border-radius: 0 25px 0 0;
			background: white;
		}
		
	
		.flip-card1 {
			background-color: white;
			width: 21%;
			height: auto;
			border: none;
			perspective: 1000px; 
			margin-bottom: 5%;
			margin-right: 0%;
			margin-left: 0%
		  }

		  .flip-card1:nth-child(1), .flip-card1:nth-child(2), .flip-card1:nth-child(3), .flip-card1:nth-child(4), .flip-card1:nth-child(5), .flip-card1:nth-child(6),.flip-card1:nth-child(7), .flip-card1:nth-child(8){
			margin-right: 2%;
			margin-left: 2%;
		  }

		  
		

		  /* This container is needed to position the front and back side */
		  /*.flip-card-inner {
			position: relative;
			width: 100%;
			height: 70vh;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
		  }*/
		  
		  
	
		   
		  
		  /* Position the front and back side */
		  .flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 25px;
			background: white;
			backface-visibility: hidden;
			
		  }
		  
		  /* Style the front side (fallback if image is missing) */
		  .flip-card-front {
			width: 100%;
			min-width: 250px;
			height: 70vh;
			padding: 10px px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 0px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 0;
		  }
	
		  .flip-card-front img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
		
	
		
		  
		  .flip-card-back {
			background-color: var(--accent-color);
			color: white;
			transform: rotateY(0);
			position: absolute;
			top: 1%;
			height: 70vh;
			border-radius: 25px;
		  }
	
		  
	
		  .flip-card-back h1{
			padding: 8%;
		  }
		  .flip-card-back ul li{
			list-style: inside;
			color: white;
			padding: 7%;
			margin-left: 1%;
			text-align: center;
		  }
	
		  .flip-card-back ul p {
			font-weight: 800;
			font-size: 20px;
			text-align: center;
		  }
		
		#produkt1 .pro-container {
			display: flex;
			justify-content: flex-start;
			padding-top: 20px;
			flex-wrap: wrap;
			width: 100%;

			
		}
	
		.section-p1 {
			padding: 0px 0px;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		#produkt1 h2 {
			font-size: 46px;
			line-height: 64px;
			width: 100%;
			height: auto;
			padding: 4%;
			background: var(--helleresblau);
			color: var(--white);
		}
	
		
		#produkt1 .flip-card1:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .flip-card1 .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .flip-card1.beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .flip-card1 .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .flip-card1 .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: absolute;
			bottom: 30px;
			left: 20px;
			font-size: 20px;
		}
		#produkt1 .flip-card1 a{
			
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position:absolute;
			width: auto;
			height: auto;
			padding: 2%;
			right: 3%;
			bottom: 5%;
			color: black;
			background: var(--accent-color);
			border-radius: 20px;
			cursor: pointer;
			
		}
	
		
		
		.beschreibung a:hover {
			background: var(--pink-color);
		}
		
	
		#produkt1 .flip-card1a:hover {
			background: #18BB78;
		}
	
	
		#produkt1 .pro-container {
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			padding-top: 20px;
			flex-wrap: wrap;
			margin-left: 0%;
			margin-right: 0;
			padding: 0;
			width: 100%;
			
			
			
		}
	
		.section-p1 {
			padding: 0px 0px;
			width: 100%;
			
		}
		#produkt1 {
			text-align: center;
			background: white;
			
			
		}
	
		
	
		#produkt1 .pro {
			width: 23%;
			min-width: 250px;
			height: 550px;
			padding: 10px 12px;
			border: 1px solid var(--accent-color);
			border-radius: 25px;
			cursor: pointer;
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.02);
			margin: 15px 0;
			transition: 0.2s ease;
			position: relative;
			margin-bottom: 30px;
	
		} 
		#produkt1 .pro:hover {
			box-shadow: 20px 20px 30px rgba(0 , 0, 0, 0.06);
		}
	
		#produkt1 .pro .beschreibung {
			text-align: start;
			padding: 10px 0;
		}
	
		#produkt1 .pro .beschreibung span {
			color: #606063;
			font-size: 12px;
		}
		
		#produkt1 .pro .beschreibung h5{
			color: #1a1a1a;
			padding-top: 7px;
			font-size: 14px;
		}
	
		#produkt1 .pro .beschreibung h4{
			padding-top: 7px;
			font-weight: 700;
			color: var(--accent-color);
			position: absolute;
			bottom: 30px;
			left: 20px;
			font-size: 20px;
		}
		#produkt1 .pro a{
			font-size: 25px;
			border: 1px solid #606063;
			border-radius: 50px;
			background-color: var(--accent-color);
			position: absolute;
			bottom: 15px;
			right: 30px;
		}
	
		#produkt1 .pro a:hover {
			background: #18BB78;
		}
	
		#produkt1 .pro img {
			width: 100%;
			border-radius: 20px;
			height: 80%;
			
		}
		
	
		#button-Neu{
			width: 20%;
			height: 5vh;
			border-radius: 25px 25px 25px 25px;
			color: black;
			border: 1px solid var(--accent-color);
			margin-bottom: 10%;
		}
		
		#button-Neu:hover{
			border: 5px solid var(--accent-color);
		}
		
		.name {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
		
		.button {
			border: none;
			font-size: 16px;
			color: white;
			padding: 8px 16px;
			background: #4070f4;
			border-radius: 6px;
			margin: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.button:hover {
			background: #265df2;
		}
	
		/*Über-mich*/
	.name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.button {
		border: none;
		font-size: 16px;
		color: white;
		padding: 8px 16px;
		background: #4070f4;
		border-radius: 6px;
		margin: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.button:hover {
		background: #265df2;
	}



	#Hintergrund-Über-mich {
		margin-top: 5%;
		margin-bottom: 5%;
		padding: 10%;
		width: 100%;
		height:auto;
		background: var(--color-haupt);
		color: black;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		
	}

	#bild-übermich{
		width: 90%;
		height: auto;
		position: relative;
		left: 20%;
		top: 4%;
		
	}

	#headline-über-mich{
		color: var(--accent-color);
		font-size: 30px;
		padding: 3%;

	}

	#text{
		color: var(--accent-color);
		width: 100%;
		padding: 10%;
		height: auto;
		background: white;
		margin-top: 5%;
	}

	#text-übermich{
		padding: 3%;
	}

	#button-über-mich {
		height: auto;
		width: 60%;
		padding: 4%;
		background: var(--color-haupt);
		color: black;
		border-radius: 0;
		text-align: center;
		cursor: pointer;
		margin-left: 20%;
		display: block;
		
		
	}

	#button-über-mich:hover {
		background: black;
		color: var(--color-haupt);
	}
	
	/*Kontakformular*/
		#kontakt{
			margin-top: 5%;
			display: block;
			justify-content: center;
			text-align: center;
			height: auto;
			margin-bottom: 60px;
		}
	
		#text-kontakt{
			text-align: center;
			padding: 2%;
		}
	
		form {
			background: white;
			height: auto;
			align-items: center;
			display: flex;
			flex-direction: column;
		}
		
		form input{
			height: 20px;
			width: 40%;
			border: none;
			border-bottom: 1px solid #dadada;
			background: linear-gradient(bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%);
			background-size: 0 100%;
			background-repeat: no-repeat;
			color: #dadada;
			font-size: 14px;
			padding: 3%;
			margin-top: 1.5%;
			
		}
	
		#textarea-nachricht {
			margin-top: 2%;
			resize: none;
			height: 70vh;
			width: 40%;
			padding: 1%;
			font-size: 12px;
		}
		
		#checkbox-dsgvo1{
			margin-left: 1%;
			line-height: 225%;
		}
	
		#checkbox-dsgvo{
			margin-left: 1%;
			margin-top: 1%;
			width: 20px;
			height: 20px;	
			
		}
	
		#check{
			width: 40%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			padding: 1%;
		}
	
		input #senden {
			width: 10%;
			height: 30px;
			text-align: center;
			align-items: center;
			border: 1px solid var(--accent-color);
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-radius: 20px 20px 20px 20px;
		}
	
		#senden:hover {
			background-color: #606063;
		}
	
		input:focus {
			outline: none;
			background-size: 100% 100%;
		}
	
		input:focus::-webkit-input-placeholder {
			font-size: 11px;
			-webkit-transform: translateY(-25px);
			transform: translateY(-25px);
			visibility: visible !important;
		}
		
		input:focus:valid::-webkit-input-placeholder, input:valid {
			color: #18BB78; 
			border-color: #18BB78;
		}
		
		input:focus:invalid::-webkit-input-placeholder, input:focus:invalid{
			color: #c9272a;
			border-color: #c9272a;
		}
		
		.container {
			max-width: 1400px;
			margin: auto;
		}
	
		.footer{
			background: #24262b;
			padding: 60px 0;
			margin-top: 40px;
		}
		
		.reihe {
			display: flex;
			flex-wrap: wrap;
	
		}
	
		.footer-produkte{
			width: 25%;
			padding: 0 15px;
		}
	
		.footer-produkte h2{
			font-size: 18px;
			color: white;
			text-transform: capitalize;
			margin-bottom: 30px;
			font-weight: 500;
			position: relative;
		}
	
		.footer-produkte h2::before{
			content: '';
			position: absolute;
			left: 0px;
			bottom: -10px;
			background-color: var(--accent-color);
			height: 2px;
			box-sizing: border-box;
			width: 35px;
		} 
	
		.footer-produkte ul li:not(:last-child){
			margin-bottom: 10px;
		}
	
		.footer-produkte ul li a{
			font-size: 16px;
			text-transform: capitalize;
			color: #ffffff;
			text-decoration: none;
			font-weight: 300;
			color: #bbbbbb;
			display: block;
			transition: all 0.3 ease;
	
		}
	
		.footer-produkte ul li a:hover{
			color: #ffffff;
			padding-left: 8px;
		}
	
		.footer-produkte .folgen a {
			display: inline-block;
			height: 40px;
			width: 40px;
			background: rgba(255, 255, 255, 0.2);
			margin: 0 10px 10px 0;
			text-align: center;
			line-height: 40px;
			border-radius: 50%;
			color: #ffffff;
			transition: all 0.5 ease;
		}
	
		.footer-produkte .folgen a:hover{
			color: #24262b;
			background: #ffffff;
			padding-left: 0;
		}
	
		.footer-imp-dat{
			display: flex;
			justify-content: flex-end;
		}
	
			
	
		.button-hoch {
			height: 30px;
			width: 30px;
			background: #616161;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: row;
			position: fixed;
			right: 10px;
			bottom: 10px;
			rotate: 270deg;
		}
	
		.button-hoch a{
			background: black;
		}
	
		
		/*********************Seite Produkte***********************/
		.produktbeschreibung{
			width: 90%;
			height: auto;
			margin-left: 0%;
			display: flex;
			flex-direction: row;
			margin-top: 5%;
	
		}
	
		.img-produkt{
			width: 40%;
			max-width: 40%;
			min-width: 40%;
		}
	
		.img-produkt img {
			width: 100%;
			height: 50vh;
			min-height: 150px;
		}

		.main_image img{
			min-height: 500px;
			height: 50vh;
		}
	
		.klein{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin-top: 1%;
		}
	
		.klein img {
			width: 24.25%;
			height: 120px;
			
		}
	
		.margin-img{
			margin-left: 1%;
		}
	
		#text-produkt{
			width: 40%;
			max-width: 40%;
			min-width: 40%;
			margin-left: 10%;
		}
	
		#text-produkt h3{
			color: var(--accent-color);
			margin: 20px 0 20px 0;
			font-size: 25px
		}
	
		#text-produkt h4{
			color: var(--black);
			font-size: 25px;
		}
	
		#text-produkt h5{
			font-size: 18px;
		}
	
		#text-produkt p{
			margin: 20px 0 50px 0;
			line-height: 20px;
			
		}
	
		.color span{
			width: 25px;
			height: 25px;
			background: #000;
			border-radius: 50%;
			margin: 2% 1% 1% 0;
		}
	
		.color span:hover{
			width: 30px;
			height: 30px;
		}
	
		.color span:nth-child(2){
			background: green;
		}
		
		.color span:nth-child(3){
			background: var(--red);
		}
	
		.color span:nth-child(4){
			background: cadetblue;
		}
	
		.color span:nth-child(5){
			background: blue;
		}
	
		.color span:nth-child(6){
			background: purple;
		}
	
	
		.flex{
			display: flex;
		}
	
	
	
		#ähnliche-produkte-bereich{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: auto;
			margin-top: 2%;
		}
	
		#ähnliche-produkte-bereich-h2{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			margin-bottom: 1%;
		}
	
		#ähnliche-produkte-bereich-h2:after{
			content: "";
			width: 3%;
			height: 2px;
			background: var(--accent-color);
			position: absolute;
			left: 48.5%;
			margin-top: 0.25%;
			
		}
	
		#ähnliche-produkte-bereich-img{
			width: 90%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			margin-left: 5%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte{
			width: 25%;
			height: auto;
			margin-bottom: 2%;
		}
	
		#ähnliche-produkte-bereich-img .ähnliche-produkte img {
			width: 80%;
			height: 40vh;
			
		}
	
		.artikel-name{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
		}
	
		.preis-ähnliche-Artikel{
			width: 100%;
			text-align: center;
			height: auto;
			padding: 2%;
			font-weight: 900;
		}
	
		.ähnliche-produkte .button{
			width: 40%;
			margin-left: 30%;
			font-size: 12px;
			text-align: center;
			display: none;
			background: var(--accent-color);
		}
	
		.ähnliche-produkte .button a{
			text-decoration: none;
			color: white;
			text-align: center;
			
		}
	
		.ähnliche-produkte:hover .button{
			display: block;
		}

		/*Seite Über mich start*/

		#geschichte-übermich h3:after{
			content: "";
			width: 7%;
			height: 2px;
			background: var(--color-haupt);
			position: absolute;
			left: 10%;
			margin-top: 3%;
		}

		

		
		
	}