:root {
	--herz: #e885aa;
	--gelb: #fed27a;
	--wagreen: #56d063;
	--hellrosa: rgb(250, 216, 219);
	--hellgrau: #a5a5a5;
  }
#alle_produkte{
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: center;
	padding: 0 2em 0 2em;
	align-items: flex-start;
}

#alle_produkte > *{
	flex: 1 1 30%;
}

.produkt_headline{
	font-size:3vw;
	font-weight: bold;
	margin-top:4vh;
	margin-bottom:0.2vh;
	font-family: 'BelindaCarolyne','BelindaCarolyneOTF';
	line-height: 140%;
}

.produkt_headline_small{
	font-size:3vw;
	font-weight: bold;
	margin-top:4vh;
	margin-bottom:0.2vh;
	font-family: 'BelindaCarolyne','BelindaCarolyneOTF';
	line-height: 140%;
}

.produkt_container {
	position: relative;
	max-width: 35%;
	height: 55vh;
	z-index:0;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
}

.suessswerke{
	display: flex;
	justify-content: center;
}


@media (max-aspect-ratio: 12/9) {
	#alle_produkte > *{
		flex: 1 1 40%;
	}

	.produkt_container{
		max-width: 50%;
	}
}

@media (max-aspect-ratio: 1/1) {
	#alle_produkte{
		padding: 0;
	}
#alle_produkte > *{
	flex: 1 1 100%;
}
	
.produkt_headline{
	font-size:10vw;
	margin-top:2vh;
	font-weight: normal;
}

.produkt_headline_small{
	font-size:9vw;
	margin-top:2vh;
	font-weight: normal;
}

.produkt_container {
	width:100%;
	max-width: 100%;
	height: calc((120vw / 4)*3);
	max-height: 75vh;
}

}

.produkt{
	height: 100%;
	width:100%;
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	/* background-attachment: fixed; */
	transition: 0.5s;
	z-index:0;
	position: absolute;
	z-index:0;
}

@media (max-aspect-ratio: 1/1) {
	.produkt{
	background-position: center;
	background-attachment: inherit;
	}
}

.produkt_background{
	background: var(--hellrosa);
	width: 82%;
	max-height: 74%;
	aspect-ratio: 1;
	opacity: 0.8;
	position: absolute;
	z-index: 1;
	display: none;
}

.produkt_inhalt{
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	z-index:1;
	transition: 0.5s;
	top: 0;
	color: black;
	display:flex;
	justify-content: center;
	align-items: center;
}

.produkt_container:hover .produkt_inhalt{
	opacity: 1;
}

.produkt_container:hover .produkt_text{
	transform: scale(1);
	transition-delay: 0s;
}

.produkt_text{
	overflow-y: auto;
	overflow-x: hidden;
	width: 82%;
	max-height: 74%;
	aspect-ratio: 1;
	transform: scale(0);
	transition-delay: 0.5s;
	z-index: 2;
	background-color: rgba(250, 216, 219,0.8);
	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.produkt_text::-webkit-scrollbar {
    width: 0px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: relative;
  top: 50%;
  width: auto;
  padding: 1vw;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  /* border-radius: 3px 0 0 3px; */
  user-select: none;
  z-index:2;
  right: 46vw;
}

.detail{
	min-height: auto;
    max-height: none;
    height: auto;
	display: flex;
	flex-direction: column;
	cursor: auto;
	justify-content: center;
}
.detail p{
	line-height: 130%;
}

.detail_background{
	/* flex: 0 1 70%; */
	height: 80vh;
}

.detail_background_small{
	height: 54vh;
}

.detail_text{
	flex: 1 1 30%;
}

.event_detail{
	min-height: auto;
    max-height: none;
	height: auto;
	cursor: auto;
}

.head_pic_text{
	padding-inline: 2em;
}

.partner_part{
	height: 60vh;
}

.vita_part{
	height: 58vh;
}

.nicht_im_sortiment{
	font-size: 1.3vh;
}

@media (max-aspect-ratio: 1/1) {
.produkt_container .produkt_inhalt{
		opacity: 1;
}

.produkt_container .produkt_text{
	transform: scale(1);
	transition-delay: 0s;
	aspect-ratio: 1;
}

.prev, .next {
	padding: 2vw;
}
.head_pic_text{
	padding-inline: 1em;
}

.produkt_background{
	width: 90%;
	max-height: 78%;
	opacity: 0.8;
}
.produkt_text{
	max-width: 90%;
	max-height: 78%;
	aspect-ratio: 1;
}

.partner_part{
	height: auto;
}
.vita_part{
	height: auto;
}

}

.sticker{
	position: absolute;
	width: 10vh;
	margin-bottom: 1em;
	bottom: 0;
	right: 3%;
}

.nis{
	display: none;
	transition: .5s;
}

.nis * .sticker{
	display: none;
}
	
.nis > div + div::after{
	content: 'Aktuell nicht im Sortiment';
	font-size: 1.3vh;
}


/* Position the "next button" to the right */
.next {
  right: -46vw;
  /* border-radius: 0 3px 3px 0; */
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}