.featuresVVKElements {
	container-name: featuresElementsVVKContainer;
	container-type: inline-size;
	padding:30px;
	/* SUCHCONTAINER VARS */
	--bottomGap: .5vh;	
}
/*  featured Elements */

.featuredHeader {
	margin-bottom: var(--header-margin);
	padding-top:2vh;
}
.eventListe { 
	display: grid;
	grid-auto-columns: repeat(4,1fr);
	grid-gap: 1rem;
	padding-bottom:5vh;
}

.featuresVVKElements .eventElement{
	display: none;
	/*flex-direction: row;*/
	gap:10px;
	_margin-bottom:1.5rem;
	position: relative;
}

.featuresVVKElements .eventElement.one_of_2  {
    display: block;
	display:flex;
}

.featuresVVKElements .eventWarning {
	position: absolute;
	top:10px;
	left:10px;
	border-radius:100rem;
	background-color:none;
	width:20px;
	height:auto;
	aspect-ratio:1/1;
	z-index:10;
	__filter:invert(100%) ;
}
.featuresVVKElements .eventContent {
	margin-top:10px;
}
.eventElement .eventContent  .eventConentTitel,
.eventElement .eventContent  .eventConentText{
	transition:all .4s ease-in-out;
}
.eventElement:hover .eventContent  .eventConentTitel,
.eventElement:hover .eventContent  .eventConentText{
	color:var(--semmel-red);
}





.featuresVVKElements .eventImage {
	min-width:100px;
	height:auto;
	aspect-ratio:16/9;
	background-color:black;
	margin-bottom: var(--bottomGap);
	overflow: clip;
	display:flex;
	transition: all .3s ease-in-out;
}

.featuresVVKElements .eventImage img {
	transition: all .3s ease-in-out;
}
.featuresVVKElements .eventImage:hover img {
	scale: 1.1;
	transition: all .3s ease-in-out;
}

.featuresVVKElements .eventConentTitel{
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	align-self: center;
	font-size: var(--titel-size);
	line-height:1.1em;
}
.featuresVVKElements .eventConentText{
	margin-top:.5vh;
	_text-transform:uppercase;
	font-weight:400;
	font-family: 'Work Sans', sans-serif;
	_font-size: var(--fliesstext-size);
	line-height:1.1em;

}




@container featuresElementsVVKContainer ( min-width: 100px ) {
	.eventConentText {
		_display:none;
	}
	.eventListe {
		grid-template-rows: repeat(1, 1fr);
	}
	.featuresVVKElements .eventImage {
		_min-width: 60px;
		max-width: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		_min-width: 100px;
		height: auto;
		aspect-ratio: 1/1;
	}
	.eventImage img {
		width:auto;
		height:100%;
	}
	.eventImage img.landscape {
		display:none;
	}
	.eventImage img.square {
		display:flex;
	}
	.eventWarning .buttonCircle,
	.eventWarning .buttonCircle:after {
		width: calc(var(--button-size)*.5);
		height: calc(var(--button-size)*.5);
	}

}

@container featuresElementsVVKContainer ( min-width: 600px ) {
	.eventListe {
		__grid-template-columns: repeat(4, 1fr);
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		grid-gap:1rem;
	}
	.eventElement{
		display: flex;
		flex-direction: column;
	}
	.featuresVVKElements .eventImage {
		width:100%;
		height:auto;
		aspect-ratio:16/9;
		_background-color:grey;
		margin-bottom: 0;
		max-width:none;
	}
	.eventImage img {
		width:100%;
		height:auto;
	}
	.eventImage img.landscape {
		display:flex;
	}
	.eventImage img.square {
		display:none;
	}
	.eventConentText {
		display:inline-block;
	}
	.eventWarning .buttonCircle,
	.eventWarning .buttonCircle:after {
		width: calc(var(--button-size)*.8);
		height: calc(var(--button-size)*.8);
		transition: all .2s ease-in-out;
	}

	.eventElement  {
		display: none;
	}
	.eventElement.one_of_2 {
		display: flex;
		flex-direction: column;
	}
}

@container featuresElementsVVKContainer ( min-width: 996px ) {
	.eventElement.one_of_3 {
		display: block;
		display: flex;
		flex-direction: column;
	}
}

@container featuresElementsVVKContainer ( min-width: 1338px ) {
	.eventElement.one_of_4 {
		display: flex;
	}
}

@container featuresElementsVVKContainer ( min-width: 1671px ) {

    .featuresVVKElements .eventElement{
        display: flex;
}	
}


/* variation vvk  */

.neu_im_vvk{
	background-color: var(--backgroundGrey);
}
.neu_im_vvk .featuredHeader {
	display:none;
}