.simpleCardsNavigation{
	position: relative;
}
.simpleCardsNavigation .next, .simpleCardsNavigation .previous  {
	position: absolute;
	top: 50%;
	min-width: 3em;
	height: 3em;
	background-color: #fff;
	box-shadow: 0px 0px 4px 2px #00000040;
	transform: translate(0, -50%);
	border-radius: 50%;
	background-image: url('/bilder/icons/arrowRight.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.5em;
	z-index: 10;
}
	.simpleCardsNavigation .next {
		right: 0em; 
	}		
	.simpleCardsNavigation .previous {
		left: 0em; 
		transform: translate(0, -50%) rotate(180deg);
		display: none;
	}		


.simpleCardsSwitch{
    border: 1px solid black;
    display: flex;
    border-radius: 2em;
    padding: 3px;
    gap: 0.5em;
    width: fit-content;
    margin: 0 auto 2em auto;
}

	.simpleCardsSwitch > * {
		padding: 0.5em 1em;
		cursor: pointer;
		transition: 0.5s;
		border-radius: 2em;
	}
	.simpleCardsSwitch .active{
		background-color: #000;
		color: #fff;	
	}

.simpleCardsV02Wrapper{
	display: flex;
	justify-content: center;
	padding: 1em 0 ;
	padding-top: 0;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: auto;
	-ms-overflow-style: none;  /*Scrollbar verstecken IE and Edge */
	scrollbar-width: none;  /* Scrollbar verstecken Firefox */
	margin-bottom: 2em;
}
.simpleCardsV02Wrapper.simpleCardSameSize{
	align-items: stretch;
}

	.simpleCardsV02Wrapper .simpleCardWrapper{
		position: relative;
	}


	.simpleCardsV02Wrapper .simpleCard{
		background-color: #fff;
		width: 320px;
		margin: 0 1em;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #000;
		border: 2px solid #000;
		border-radius: 4px;
		margin-top: 5px;
		height: 100%;
		transition: 0.5s;
	}
	.simpleCardsV02Wrapper .simpleCard.inactive{
		position: absolute;
		top: 0;
		left: 5px;
		z-index: -1;
		margin-top: 0;
	}

		.simpleCardsV02Wrapper .simpleCardHead{
			position: relative;
		}
			.simpleCardsV02Wrapper .simpleCardWithHeaderImage .simpleCardHead{
				padding-bottom: 5em;
			}

			.simpleCardsV02Wrapper .simpleCardHeadline{
				padding: 1em 0.5em;
				padding-bottom: 1.2em;
				clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1em), 50% 95%, 0 calc(100% - 1em));
				position: relative;
				font-size: 1.2em;
				font-weight: 600;
				line-height: 1.2em;
				text-align: center;
				color: #fff;
			}	
			.simpleCardsV02Wrapper .simpleCardHeadline .simpleCardHeadlineSpecialHighlight{
				color: var(--primaryColor);
			}
			.simpleCardsV02Wrapper .simpleCardHeadline .simpleCardHeadlineThin{
				font-weight: 400;
			}

			.simpleCardsV02Wrapper .simpleCardHead::before{	/*Rand für den clip Path*/
				content: '';
				position: absolute;
				width: 100%;
				height: 97%;
				background: black;
				clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.9em), 50% 100%, 0 calc(100% - 0.9em));
			}


			.simpleCardsV02Wrapper .simpleCardHead .cardHeaderImage{
				position: absolute;
				clip-path: polygon(50% 0.9em, 100% 0, 100% 100%, 0 100%, 0 0);
				transform: translate(0, -1.05em);
				height: auto;
				width: 100%;
				border-bottom: 2px solid var(--black);
			}

			.simpleCardsV02Wrapper .simpleCardHead .iconHeaderImage{
				position: absolute;
				bottom: 0.5em;
				left: 0.5em;
				padding: 0.2em;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

				
				.simpleCardsV02Wrapper .simpleCardThemeDefault .simpleCardHeadline{
					background-color: #0D4AB3;
				}

				.simpleCardsV02Wrapper .simpleCardThemeMeasured .simpleCardHeadline{
					background-color: #16A160;
				}	

				.simpleCardsV02Wrapper .simpleCardThemeSpecial .simpleCardHeadline{
					background-color: #261E1E;
				}	

				.simpleCardsV02Wrapper .simpleCardThemeBlackAndWhite .simpleCardHeadline{
					background-color: #fff;
					color: #000;
					transition-duration: 0.5s;
				}


				.simpleCardsV02Wrapper .simpleCard.simpleCardThemeBlackAndWhite:hover .simpleCardHeadline, .simpleCardsV02Wrapper .simpleCardDefaultHighlight.simpleCardThemeBlackAndWhite .simpleCardHeadline:not(.simpleCardsV02Wrapper:hover .simpleCardDefaultHighlight.simpleCardThemeBlackAndWhite .simpleCardHeadline){
					background-color: #000;
					color: #fff;
				}

				.simpleCardsV02Wrapper .simpleCardHeadline .simpleCardSubheading{
					font-size: 1rem;
					font-weight: 400;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 0.5em;
					line-height: 2em;
				}
					.simpleCardsV02Wrapper .simpleCardHeadline .simpleCardSubheading img, .simpleCardsV02Wrapper .simpleCardHeadline .simpleCardSubheading svg{
						width: 2em;
						transition: 0.2s;
					}
					.simpleCardsV02Wrapper .simpleCard:hover .simpleCardHeadline .simpleCardSubheading svg, .simpleCardsV02Wrapper .simpleCardDefaultHighlight .simpleCardHeadline .simpleCardSubheading svg:not(.simpleCardsV02Wrapper:hover .simpleCardDefaultHighlight .simpleCardHeadline .simpleCardSubheading svg){
						--svgColor: #fff;
					}

			.simpleCardsV02Wrapper .simpleCardIcon{
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 50%);
				background-color: white;
				border-radius: 50%;
				width: 3.5em;
				height: 3.5em;
			}
				.simpleCardsV02Wrapper .simpleCardIcon img {
					width: 100%;
				}
				.simpleCardsV02Wrapper .simpleCardIcon:not(.noBorder) {
					border: 2px solid #F2F2F4;
					padding: 0.5em;
				}
		.simpleCardsV02Wrapper .simpleCardBody{
			margin: 1em 0;
		}
			.simpleCardsV02Wrapper .simpleCardBody .simpleCardFlag{
				padding: 0.5em 1em;
				padding-left: 10%;
				background-color: #F3FDF9;
				display: inline-flex;
				color: #21A568;
				font-weight: 500;
				margin: 1em 0;
			}
			.simpleCardsV02Wrapper .simpleCardThemeDefault .simpleCardBody .simpleCardFlag{
				background-color: #F0F8FE;
				color: var(--btn1Bg);
			}
			.simpleCardsV02Wrapper .simpleCardBody .simpleCardProductProperty{
				font-weight: 400;
				width: 85%;
				margin: 1em auto;
				display: flex;
				align-items: center;
				gap: 0.5em;

			}
				.simpleCardsV02Wrapper .simpleCardBody .simpleCardProductProperty .simpleCardProductPropertyAddition{
					display: block;
					font-size: 0.875em;
					line-height: 1em;
				}
			.simpleCardsV02Wrapper .simpleCardBody .simpleCardProductProperty::before{
				content: '';
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: center;
				width: 1.8em; 
				height: 1.8em; 
				flex-shrink: 0;
			}
			.simpleCardsV02Wrapper .simpleCardBody .simpleCardProductProperty.fullfilled::before{
				background-image: url(/bilder/icons/colorSeperate/check_green.svg);
			}
			.simpleCardsV02Wrapper .simpleCardBody .simpleCardProductProperty.notFullfilled::before{
				background-image: url(/bilder/icons/colorSeperate/notAvailable_red.svg);
			}


		.simpleCardsV02Wrapper .simpleCardBottom{
			text-align: center;
			margin-bottom: 1em;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
			.simpleCardsV02Wrapper .simpleCardBottom .simpleCardPriceWrapper{
				font-weight: 400;
			}
				.simpleCardsV02Wrapper .simpleCardBottom .simpleCardPrice{
					font-weight: 500;
					font-size: 1.7em;
				}
			.simpleCardsV02Wrapper .simpleCardBottom .simpleCardPriceDescription{
				font-size: 0.75rem;
				width: 100%;
				text-align: left;
				margin: 0em 2em 1em 2em;
				color: var(--gray);
			}



				.simpleCardsV02Wrapper .simpleCard .simpleCardBottom .simpleCardButtons .ghostToPrimaryhover{
					gap: 0.5em;
					font-size: 1em;
					padding: 0 0.5em;
				}

				.simpleCardsV02Wrapper .simpleCard:hover .simpleCardBottom .simpleCardButtons .ghostToPrimaryhover, .simpleCardsV02Wrapper .simpleCardDefaultHighlight .simpleCardBottom .simpleCardButtons .ghostToPrimaryhover:not(.simpleCardsV02Wrapper:hover .simpleCardDefaultHighlight .simpleCardButtons .ghostToPrimaryhover){
					background-color: #000;			
					color: #fff;			
				}

				.simpleCardsV02Wrapper .simpleCard:hover .simpleCardBottom .simpleCardButtons svg, .simpleCardsV02Wrapper .simpleCardDefaultHighlight .simpleCardBottom .simpleCardButtons svg:not(.simpleCardsV02Wrapper:hover .simpleCardDefaultHighlight .simpleCardButtons svg){
					--svgColor: #fff;
				}


	/*Scrollbar verstecken Chrome, Safari and Opera */
	.simpleCardsV02Wrapper::-webkit-scrollbar {
		display: none;
	}

	@media (max-width: 500px){
		.simpleCardsV02Wrapper {
			align-items: stretch;
			justify-content: flex-start;
			gap: 1em;
			width: 100%;
		}
		.simpleCardsV02Wrapper .simpleCard{
			border: 1px solid #000;
			box-shadow: none;
			margin: 0;
		}
		.simpleCardsV02Wrapper .simpleCardWrapper:not(.primaryCard) {
			order: 3;
		}
		.simpleCardsV02Wrapper .simpleCardWrapper.primaryCard {
			order: 1;
		}
		.simpleCardsV02Wrapper .simpleCardWrapper.secondaryCard {
			order: 2;
		}
	}