.mulde{
	display: grid;
	grid-template-areas: 
		"bild titel"
		"bild beschreibung"
		"gallery gallery";
	margin-bottom: 20px;
	
	img{
		grid-area: bild;
		width: 200px;
		height: 100%;
		object-fit: contain;
		object-position: center top;
	}
	.titel{
		grid-area: titel;
	}
	.beschreibung{
		grid-area: beschreibung;
	}
	.gallery{
		grid-area: gallery;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 10px;
		img{
			height: 200px;
		}
	}
}


.mulde {
		display: flex !important;
		flex-direction: row-reverse;
		gap: 2em;
		padding: 2em;
		border-radius: 5px;
		background: var(--color-white);
		transition: var(--maintrans);
		align-items: center;
	
	&:nth-of-type(2n){
		background: var(--color-grey);
		
	}
	
	&:hover{
		box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
	}
	
	h4{
		font-size: 1em;
	}
	
	.gallery{
		display: flex !important;
		gap: 1em !important;
		min-width: 350px;

		img{
			width: 350px;
			height: auto;
		}
	}
	
}

@media screen and (max-width: 768px){
	.mulde {
		display: flex !important;
		flex-direction: column;
		gap: 0;
		padding: 1em;
		
		&:nth-of-type(2n){
			flex-direction: column;
		}
		
		.gallery{
			gap: 1em !important;

		}

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

@media screen and (max-width: 600px){
	.mulde {
		
		.gallery{
			gap: 0em !important;
			width: 100%;
			min-width: unset;

		}

		img{
			width: 100% !important;
			height: auto;
		}
		
	}
}

.muldenfilter{
	cursor: pointer;
	position: relative;
	z-index: 1;
	margin-bottom: 2em;
	border-radius: 5px;

	width: 25ch;


	span:first-of-type{
		display:block;
		background: var(--color-ci);
		padding: 1em;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	span+span{
		display:flex;
		flex-direction: column;
		padding: 1em;
		position: absolute;
		gap:.5em;
		background: var(--color-dark);
		top: 100%;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
		border-radius: 5px;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		color: var(--color-white);

		a{
			color: var(--color-white);
			text-transform: none;
			text-decoration: none;
			border-top: 1px solid var(--color-ci);
			padding-top: .5em;

			&:hover{
				color: var(--color-ci);
			}

			
		}
	}
	&:hover span+span{
		opacity: 1;
		pointer-events: all;

	}

	&:hover span:first-of-type{
		background-color: var(--color-dark);
		color: var(--color-white);
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		

	}
}

@media screen and (max-width: 600px){
	.muldenfilter{
		width: 100%;
	}
}