/*----------------------------------------------------------------------------------------------------------*/
/*------------------------------------------SEO STARTSEITEN CARDS-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/
@import url('/css/variables.css?cache=12122022');
.card a {
  	pointer-events: none;
  	touch-events: none;
	font-family: var(--primaryFont);
	line-height: 1.5em;
	color: var(--primary-brand);
	font-weight: 500;
}
.card a * {
  pointer-events: all;
}
.abPreis {
	padding: 0;
}
.cardsWrapper .reiterGroup {
	margin-bottom:2px;
}
.cardsWrapper .reiterGroup .reiter {
	min-width: 250px;
}
.cardsWrapper .reiterGroup .reiter span {
	font-weight: 600;
	margin-left: 4px;
}
.teaserbildmobile {
	display: none;
}
.teaserbildToggler {
	display:flex;
	justify-content:center;
	align-items:center;
	grid-area: bildtoggler;
	height:50px;
	background-image: url(/XArtikelsystem/bilder/pfeil-unten-grau.svg), url(/XArtikelsystem/bilder/pfeil-unten-grau.svg);
	background-position:1em center, calc(100% - 1em) center;
	background-repeat:no-repeat;
	text-align:center;
}
.cardsWrapper .teaserbildWrapper {
	  grid-area: bild;
	position: relative;
	overflow:hidden;
	height: auto;
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    align-content: center;
	pointer-events:all;
}
	.rollo .cardsWrapper .reiterGroup {
		top: 0;
		right: 0;
		height: 40px;
		position: absolute;
		top: 0;
	}
	.rollo .cardsWrapper .card {
		padding: 40px 0px 0px 0px;
	}
	.cardsWrapper .teaserbildWrapper {
	}
 	.cardsWrapper .card .cardInhalt, .cardsWrapper .card.defaultHighlight .cardInhalt {
		position:relative;
		background-color:#fff;
		z-index:2;
		border-radius: 6px;
	}
	.cardsWrapper .card .cardInhalt.inactive, .cardsWrapper .card.defaultHighlight .cardInhalt.inactive {
		position:absolute;
		top: 40px;
		right: 0;
		height: calc(100% - 60px);
		z-index: 1;
		width: calc(100% - 13px);
		opacity: 1;
		overflow: hidden;
	}
	.cardsWrapper .card .cardInhalt.inactive > *, .cardsWrapper .card.defaultHighlight .cardInhalt.inactive > * {	
		opacity: .2;
	}
	.rollo .cardsWrapper .card {
		
	}
.cardsWrapper .cardEnd {
    grid-area: preis;
    display: block;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 45px;
}

.cardsWrapper .uebersichtProdukt > div, .cardsWrapper .cardEnd {
  padding: 0.6em!important;
}
.teaserbildToggler {
		display:none;
	}
.cardEnd .button {
	display:none;
}
.hinweisBeispielpreis {
}
.beispielpreisGroesse {
	color: var(--black);
 	font-size: 0.8em;
}


	.cardsWrapper .cardEnd .abPreis span:first-child{
					font-size: 0.875rem;
				}
				.cardsWrapper .cardEnd .abPreis span:nth-child(2){
					font-size: 1.5em;
					font-weight: 500;
				}	
				.cardsWrapper .cardEnd .abPreis span:nth-child(3){
					font-size: 0.875rem;
					font-weight: 500;
				}
	.cardsWrapper .unserTipp {
		text-transform: none;
		font-size: 0.8em;
		font-weight: 300;
		position: absolute;
		left: unset;
		padding: 0 0.5em;
		background-color: var(--black);
		color: #fff;
		z-index: 1;
		line-height: 1.2em;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		right: 0;
		height: 60px;
		border-radius: 0px 4px 0px 0px;
	}
.cardsWrapper .unserTipp span {
	font-weight: 600;
	font-size: 1.2em;
	text-transform: uppercase;

}
.cardsWrapper .cardInhalt {
    display: grid;
    text-decoration: none;
    box-shadow: 0px 2px 4px #00000042;
	grid-template-columns:calc(100% - 50px) 50px;
	grid-template-areas:
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis";
	transition: all .5s ease-in-out;
}
.cardsWrapper button.ghostToPrimaryhover:hover, .cardsWrapper .button.ghostToPrimaryhover:hover, .cardsWrapper a.button.ghostToPrimaryhover:hover {
	background-color: var(--btn2BgHover);
	color: var(--btn2ColorHover);
	border-color: var(--btn2BorderColorHover);
	outline-color: var(--btn2BorderColorHover);
}
.cardsWrapper button:hover, .cardsWrapper .button:hover, .cardsWrapper a.button:hover {
	background-color: var(--btn1BgHover);
	color: var(--btn1ColorHover);
	border-color: var(--btn1BorderColorHover);
	outline-color: var(--btn1BorderColorHover);
}
.cardsWrapper button.ghostToPrimaryhover, .cardsWrapper .button.ghostToPrimaryhover, .cardsWrapper a.button.ghostToPrimaryhover {
	background-color: var(--btn2Bg);
	color: var(--btn2Color);
	border-color: var(--btn2BorderColor);
	line-height: 1.5em!important;
	font-size: 16px;
}
.cardsWrapper button, .cardsWrapper .button, .cardsWrapper a.button {
	background-color: var(--btn1Bg);
	color: var(--btn1Color);
	border-color: var(--btn1BorderColor);
	line-height: 1.5em!important;
	font-size: 16px;
}
.cardsWrapper .ghostToPrimaryhover::before{
	background-repeat: no-repeat;
	content: '';
	width: 2em;
	height: 2em;
	padding: 12px;
	transition: transform 0.55s;
	background-position: 50%;
	background-size: contain;
	margin-right: -1em;
				}
					.cardsWrapper .button:not(.cardsWrapper .card:hover .button, .cardsWrapper .card.defaultHighlight .button:not(.cardsWrapper:hover .defaultHighlight .button) ){
						background-color: var(--primary-color-light);
						color: var(--primary-color);			
					}	
					
					.cardsWrapper .ghostToPrimaryhover:not(.cardsWrapper .card:hover .ghostToPrimaryhover, .cardsWrapper .card.defaultHighlight .ghostToPrimaryhover:not(.cardsWrapper:hover .defaultHighlight .ghostToPrimaryhover) ){
						
					}
					.cardsWrapper .card:hover .ghostToPrimaryhover {
						background-color: var(--black);
						color: white;
					} 
					.cardsWrapper .card:hover .ghostToPrimaryhover::before {
						background-image: url(/bilder/icons/colorSeperate/gear_white.svg) !important;
					} 
						.cardsWrapper .ghostToPrimaryhover::before, .cardsWrapper:hover .defaultHighlight .ghostToPrimaryhover::before{
							background-image: url(/bilder/icons/gear.svg);	
						}					
						.cardsWrapper .card:hover  .ghostToPrimaryhover::before, .cardsWrapper .defaultHighlight .ghostToPrimaryhover::before, .cardsWrapper .defaultHighlight:hover .ghostToPrimaryhover::before{
							
						}
						.cardsWrapper .ghostToPrimaryhover:hover::before{
							transform: rotate(360deg);
							background-image: url(/bilder/icons/colorSeperate/gear_white.svg) !important;
						}						
						.reiterGroup:has(~ .cardInhalt):hover .cardInhalt {
						  left: -3px;
						}
						.cardInhalt.inactive > *:not(.teaserbildWrapper) {
							opacity:0;
							pointer-events:none;
						}

						
@media screen and (max-width:600px) { 
	.cardsWrapper {
		gap: 2em !important;
		margin: 0em !important;
	}
	.cardsWrapper .cardInhalt {
		grid-template-columns: calc(100% - 70%) auto !important;
		grid-template-areas:
		"titel titel"
		"bild beschreibung"
		"preis preis"!important;
	}
	.teaserbildmobile {
		display: block;
		height: 100%;
	}
	.cardsWrapper .card .reiterGroup .reiter.inactive {
		background-color: #E6E6E6 !important;
		border-radius: 6px 6px 0px 0px;
	}
	.cardsWrapper .reiterGroup.abgeschraegt .reiter::after {
		content: normal !important;
	}
	.abPreis {
	}
	.cardsWrapper .uebersichtProdukt > div:nth-child(odd) {
		background-color: #F3F4F6;
	}
	.cardsWrapper .ghostToPrimaryhover.mobileGo {
							background-image: url(/bilder/icons/gear.svg)!important;
							background-color: var(--primary-color)!important;
							height:50px;
						}
						.cardsWrapper .cardInhaltFertiggroessen .ghostToPrimaryhover.mobileGo {
							background-image: url(/bilder/icons/gear.svg)!important;
							background-color: var(--btn1Bg)!important;
						color: var(--secondary-color)!important;	
						}
						
						.cardsWrapper .card.defaultHighlight .ghostToPrimaryhover.mobileGo, .cardsWrapper .card:hover ~ .ghostToPrimaryhover.mobileGo {
							color: var(--primary-color)!important;
						}
						.cardsWrapper .cardInhaltFertiggroessen .ghostToPrimaryhover.mobileGo, .cardsWrapper .card:hover ~ .cardInhaltFertiggroessen .ghostToPrimaryhover.mobileGo {
						color: var(--secondary-color)!important;	
						}
	.cardsWrapper .cardInhalt.cardInhaltFertiggroessen .ghostToPrimaryhover.mobileGo,.cardsWrapper .card.defaultHighlight .ghostToPrimaryhover.mobileGo, .cardsWrapper .card:hover ~ .ghostToPrimaryhover.mobileGo {
		align-self: end;
		background-color:var(--btn1Bg)!important;
		background-image: url(/bilder/icons/gear.svg)!important;
	}
	.cardsWrapper .cardInhalt.cardInhaltMass .ghostToPrimaryhover.mobileGo {
		align-self: end;
		background-color:var(--btn2Bg)!important;
		background-image: url(/bilder/icons/gear.svg)!important;
	}
	.cardsWrapper .vergleichinfo:not(.cardsWrapper .vergleichinfo.modelle), .cardsWrapper .uebersichtModelle .modell, .cardsWrapper .uebersichtProdukt .hinweisCard {
		background-image: none !important;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		padding-right: 0em !important;
	  }
	  .cardsWrapper .uebersichtProdukt .hinweisCard {
		background-image: none;
		font-size: 16px !important;
		max-width: 193px;
	  }
	  .cardsWrapper .uebersichtProdukt .hinweisCard svg {
			height: 17px;
		}
	.cardsWrapper .cardEnd {
		position:static;
		display: flex;
	}
	.contentWidthMax .artikel_alle {
		padding: 0 1em;
	  }
	.cardsWrapper .unserTipp {
		display: none;
	}
	.cardsWrapper .iconsBefestigung {
		display: none !important;
	}
	.cardsWrapper .uebersichtModelle {
		display: none !important;
	}
	.hinweisBeispielpreis {
		display: none;
	}
	.hinweisBeispielpreis br {
	  display: none;
	}
	.cardsWrapper .lieblingsprodukt {
		display: none;
	}
	.cardsWrapper .beschriftungTeaserbild {
	 
	}
	.cardsWrapper .ghostToPrimaryhover {
		height: 2.111em !important;
		border-radius: 6px;
		width: 100%;
		max-width: 200px;
	}
	.cardsWrapper .ghostToPrimaryhover::before {
		width: 0em;
		padding: 14px;
	}
	.cardsWrapper .ghostButton.inactive {
		width: 100%;
		height: 2em;
		border-radius: 6px;
		max-width: 200px;
	}
	.cardsWrapper .teaserbildWrapper {
		height:100%;
		max-height:100%!important;
		transition: all .4s ease-in-out;
	}
	.cardsWrapper .teaserbildWrapper.active {
		max-height:100%!important;
		transition: all .4s ease-in-out;
	}
	.cardsWrapper .teaserbild {
		display: none;
	}
}

.cardEnd .button {
	display:none;
}
.mobileGo {
	grid-area: mobileGo;
	background-repeat:no-repeat;
	background-position:center;
	content:"";
}
.cardInhaltFertiggroessen .mobileGo {
	background-color:#F3FDF9;
}
.cardInhaltMass .mobileGo {
	background-color:#F0F8FE;
}

.cardsWrapper .teaserbild {
	height: auto;
    width: 100%;
}
.cardsWrapper , .cardsWrapper * {
    box-sizing: border-box;
}
.cardsWrapper {
    display: flex;
    justify-content: center;
	margin: 2em 0 3em 0;
	flex-flow: row wrap;
	gap: 3em;
	font-family: var(--primaryFont);
	line-height: 1.5em;
	color: var(--primary-brand); 
	font-weight: 400;
	font-size: 16px!important;
}

.beschriftungTeaserbildSmall {
	display:none;
}
.cardsWrapper .card {
	order: 2;
	min-width: 320px;
	position: relative;
	border-radius: 6px;
}
.cardsWrapper .cardInhalt {
    display: grid;
    text-decoration: none;
    box-shadow: 0px 2px 4px #00000042;
	grid-template-columns:calc(100% - 50px) 50px;
	grid-template-areas:
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis";
	transition: all .5s ease-in-out;
}
@media screen and (min-width: 501px) {
	.teaserbildToggler {
		display:none;
	}
}
@media screen and (min-width: 601px) {
	.cardsWrapper .cardEnd .abPreis {
		grid-area: abpreis;
		align-content: center;
		text-align: left;
		margin-left: 1em;
	}
	.cardsWrapper .hinweisBeispielpreis {
		grid-area: beispiel;
		display: block;
		font-size: .8em;
		line-height: 1.2em;
		position: static;
		text-align: left;
		margin-left: 1em;
	}
	.cardsWrapper .hinweisBeispielpreis br {
	  display: inline;
	  content: ' ';
	  padding: 0 3px;
	}
	.cardsWrapper .cardEnd .button {
		grid-area: button;
		display: flex;
		align-items: center;
		padding: 0.8em 1.2em;

	}
	.cardsWrapper .cardInhaltFertiggroessen .cardEnd .button {
        
        display: block;
        text-align: center;
    }
	.cardsWrapper .cardEnd {
		padding: 0.5em!important;
		position:static;
		grid-area: preis;
		display:grid;
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"abpreis button"
		"beispiel beispiel";
		justify-content:center;
		
	}
	.cardsWrapper .cardEnd .abPreis span:first-child{
					font-size: 0.875rem;
				}
				.cardsWrapper .cardEnd .abPreis span:nth-child(2){
					font-size: 1.7rem;
    				font-weight: 700;
				}	
				.cardsWrapper .cardEnd .abPreis span:nth-child(3){
					font-size: 1.225rem;
    				font-weight: 500;
				}	
	
	.cardsWrapper .cardInhalt {
		display: grid;
		text-decoration: none;
		box-shadow: 0px 2px 4px #00000042;
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"beschreibung titel"
		"beschreibung bild"
		"beschreibung bild"
		"beschreibung bild"
		"beschreibung bild"
		"beschreibung preis";
		
	}
	.mobileGo {
		display:none;
	}		
	.cardsWrapper .unserTipp {	
	}	
}
@media screen and (min-width: 1400px) {	
	.cardsWrapper .unserTipp {        
	}
	.cardsWrapper .card {
		width: 30%;
	   	max-width: 468px;
		order: 2;		
	}
	.cardsWrapper .cardInhalt {
    display: grid;
	grid-template-columns: 100%;
    text-decoration: none;
    box-shadow: 0px 2px 4px #00000042;
    height: 100%;
	grid-template-areas:
    "titel"
    "bild"
    "beschreibung"
	"preis";
	display:flex;
	flex-direction:column;
	border-radius: 4px;
	}
	
	.cardsWrapper .cardInhalt > * {
		flex-grow: 0;
	}
		.cardsWrapper .cardInhalt > .cardEnd {
		flex-grow: 1;
		align-content: end;
		}
}
    /* eines ist Vorausgew?hlt, bei hover ?ber andere bekommen diese den "Ausgew?hlt-Schatten" und bei dem vorausgew?hltem wird er entfernt */

	.inhalt .cardsWrapper .defaultHighlight .cardInhalt:not(.cardsWrapper:hover .defaultHighlight .cardInhalt), .inhalt .cardsWrapper .card:hover .cardInhalt{
		box-shadow: 0px 4px 20px #FF760880 !important;
  		border: 2px solid #FF7608 !important;
	}
	.cardsWrapper .card.defaultHighlight .reiterGroup, .cardsWrapper .card:hover .reiterGroup {
		margin-bottom: 2px;
		margin-right: 0;
		
	}
	
.cardsWrapper .card .uebersichtEigenschaften{
	margin-left: 20px;
	grid-area: beschreibung;
}

.cardsWrapper .card .uebersichtEigenschaften .eigenschaft {
	display: flex;
	align-items: center;
	margin: 0.3em 0;
	hyphens: auto;
	padding-right: 3em;
	background-image: url(/bilder/icons/check.svg);
	background-repeat: no-repeat;
	background-position: right;
}

.cardsWrapper .card .uebersichtEigenschaften .eigenschaft img{
	margin-right: 1.5em;
}




.cardsWrapper .reiterGroup {
	position: relative;
	overflow: hidden; 	/* f?r die abgeschr?gten Ecken bei 2 Reitern */
	text-align:right;
	background-color: #fff;
	transition: all .3s ease-in-out;
}
	.cardsWrapper .reiterGroup .reiter {
		position:relative;
		padding: 0.5em 1em;
		display: none;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		width: auto;
		font-weight: 400;
		transition: 0.5s;
		cursor: pointer;
		padding-left:60px;
		background-image:url(/bilder/icons/schalter-aus.svg);
		background-repeat:no-repeat;
		background-position:10px center;
	}
	.cardsWrapper .reiterGroup .reiter.massanfertigung {
		background-image: url(/bilder/icons/schalter-an.svg);
	}
	.cardsWrapper .reiterGroup .reiter:only-child {
		display:none;
	}
	.cardsWrapper .reiterGroup .reiter.fertiggroessen {		
		background-color: #eee;
		color:#333;
	}
	


	/*
		Ein Reiter soll default m??ig gehighlightet sein. Wenn mann ?ber die Cards dr?ber Hovert soll dieses defaultHighlight verschwinden und der reiter ?ber dessen card man grade hover soll gehighligtet sein. Dabei muss beachtet werden, ob grade das Ma? oder Standard Tab aktiv ist (diese Unterscheidung gibt es aber auch nicht bei allen Card Varianten)
	*/	
	.cardsWrapper .card:hover .reiterGroup .reiter.massanfertigung:not(.reiter.inactive) /*den Reiter Highlighten ?ber dessen Card man grade hovert wenn er nicht inaktiv ist (also wenn fertiggroessen nicht aktiv ist)*/
	, .cardsWrapper .card.defaultHighlight .reiterGroup .reiter.massanfertigung:not(.reiter.inactive,.cardsWrapper:hover .card.defaultHighlight .reiterGroup .reiter){ /*den mit defaultHighlight highligten solange man nicht ?ber irgendwas hovert*/
		color:#333;
	}
	.cardsWrapper .card:hover .reiterGroup .reiter.fertiggroessen.active /*den Reiter Highlighten ?ber dessen Card man grade hovert wenn er aktiv ist (also wenn mass inaktiv ist)*/
	, .cardsWrapper .card:hover .reiterGroup .reiter.fertiggroessen:first-child /*wenn keinen mass Tab gibt soll das auch als "active" angesehen werden*/
	, .cardsWrapper .card.defaultHighlight .reiterGroup .reiter.fertiggroessen:first-child:not(.cardsWrapper:hover .card.defaultHighlight .reiterGroup .reiter) /*wenn keinen mass Tab gibt soll das auch als "active" angesehen werden*/
	, .cardsWrapper .card.defaultHighlight .reiterGroup .reiter.fertiggroessen.active:not(.cardsWrapper:hover .card.defaultHighlight .reiterGroup .reiter){ /*den mit defaultHighlight highligten solange man nicht ?ber irgendwas hovert*/
		color:#333;		
	}	

	.cardsWrapper .reiterGroup.abgeschraegt .reiter:after{
			content: "";
			width: 0.5em;
			position: absolute;
			left: calc(0% - 0.25em);		/*50% - 0.25em wegen der Schr?ge*/
			height: 120%; 	/*durch die rotation braucht es mehr als 100% h?he um die abgeschr?gte Kante zu erzielen*/
			transform: rotate(10deg);
			background-color: #FFFFFF;
	}
	.cardsWrapper .card .reiterGroup .reiter.active {
		display: none;
	}
	.cardsWrapper .card .reiterGroup .reiter.inactive {
		background-color:#F3F4F6;
		display: inline-flex;
	}
	.cardsWrapper .card .reiterGroup:hover ~ .cardInhalt:not(.inactive)  {
		left: -3px;
		top:3px;
	}

  
		.cardsWrapper .iconTeaserbild {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 4.5em;
			height: 4.5em;
			background-color: rgba(255,255,255,0.8);
			border-radius: 100%;
			padding: 1em;
			z-index: 1;
		}
		.cardsWrapper .iconTeaserbild img {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
  			max-width: 42px;
		}
		
		.cardsWrapper .beschriftungTeaserbild {
			grid-area: titel;
			font-size: 1.25em;
			display: flex;
			flex-wrap:nowrap;
			align-items: center;
			position:static;
			padding: 6px;
			background: #fff;
			z-index: 2;
			font-weight:600;
			border-radius: 6px 6px 0px 0px;
		}
		.beschriftungTeaserbild > div {
		  
		}
		.cardInhalt .beschriftungTeaserbild  .produktTyp {
			display: block;
			text-transform: none;
			width: calc(100% - 60px);
			font-size: 16px;
			font-weight: 500;
		}
		.cardInhaltMass .beschriftungTeaserbild  .produktTyp {
			color: var(--black);
		}
		.cardInhaltFertiggroessen .beschriftungTeaserbild  .produktTyp {
			color:var(--black);
		}
			.cardsWrapper .beschriftungTeaserbild img{
				width: 2em;
				margin-right: 0.5em;
			}
			.cardsWrapper .beschriftungTeaserbild span{
				font-weight: 500;
			}


		.cardsWrapper .teaserBildBackgroundLayer{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			background-color: transparent;
			transition: 0.5s;
			background: linear-gradient(0deg, rgba(0,0,0,0.4948179955575981) 0%, rgba(255,255,255,0.08585441012342432) 40%);		
		}
			.cardsWrapper .cardInhalt:hover .teaserBildBackgroundLayer{
				background-color: #0000005e!important;
			}
			

.cardsWrapper .uebersichtProdukt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	grid-area: beschreibung;
}

	.cardsWrapper .uebersichtProdukt > div, .cardsWrapper .cardEnd{
		padding: 0.6em 2em;
	}
		.cardsWrapper .uebersichtProdukt > div{
			border-bottom: 1px solid #E7EBEE;
		}

	.cardsWrapper .uebersichtProdukt .vergleichinfo{
		display: flex; 
		justify-content: space-between;
	}

	.cardsWrapper .uebersichtProdukt .vergleichinfo.Rightfloat{
		justify-content: end;
	}
	
		.cardsWrapper .uebersichtProdukt .vergleichinfo span{
			font-weight: 600;
		}

		.cardsWrapper .wrapperLogoLysel {
			position: absolute;
			top: 0;
			left: 0;
			background: transparent linear-gradient(270deg, #EBE5E400 0%, #FFFFFF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1em 2em;
			z-index: 1;
		}

	.cardsWrapper .iconsBefestigung{
		display: flex;
		flex-wrap: wrap;
		padding-top: 0.5em;
		font-size: 0.875em;
	}
		.cardsWrapper .iconsBefestigung > div{
			padding-left: 0;
			padding-right: 1em;
			background-repeat: no-repeat;
			background-position: 0 50%;
		}
			.cardsWrapper .iconsBefestigung .befestingung_schrauben span:before , 
			.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_schrauben span:before ,
			.cardsWrapper .iconsBefestigung .befestingung_klemmen span:before ,
			.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_klemmen span:before ,
			.cardsWrapper .iconsBefestigung .befestingung_kleben span:before ,
			.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_kleben span:before  {
				margin-right:7px;
				vertical-align: text-top
			}
			.cardsWrapper .iconsBefestigung .befestingung_schrauben span:before {
				content: url(/bilder/icons/schrauben.svg);				
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_schrauben span:before {
					content: url(/bilder/icons/schrauben.svg);				
				}
				
				
			.cardsWrapper .iconsBefestigung .befestingung_klemmen span:before {
				content: url(/bilder/icons/klemmen.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_klemmen span:before {
					content: url(/bilder/icons/klemmen.svg);
				}	
				
				
			.cardsWrapper .iconsBefestigung .befestingung_kleben span:before {
				content: url(/bilder/icons/kleben.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_kleben span:before {
					content: url(/bilder/icons/kleben.svg);
				}			
	.cardsWrapper .lieblingsprodukt{
		background: url(/bilder/icons/colorSeperate/herz_primaryColor.svg) no-repeat 0.5em 50%;
		background-size: 1.3em auto;
		padding-left: 2.5em;			
	}			

	.cardsWrapper .uebersichtModelle{
		display: flex;
		flex-direction: column;
	}
		.cardsWrapper .uebersichtProdukt .uebersichtModelle .modell{
			display: flex;
			align-items: center;
			margin: 0.3em 0;
			hyphens: auto;
		}
	
			.cardsWrapper .uebersichtModelle .modell img{
				margin-right: 1.5em;
			}
			.cardsWrapper .uebersichtModelle .modell .anmerkung{
				font-size: 0.9em;
				font-weight: 400;
				line-height: 0.6em;
			}

	.cardsWrapper .vergleichinfo:not(.cardsWrapper .vergleichinfo.modelle), .cardsWrapper .uebersichtModelle .modell, .cardsWrapper .uebersichtProdukt .hinweisCard{
		background-image: url(/bilder/icons/colorSeperate/check_primaryColor.svg);
		background-repeat: no-repeat;
		background-position: 100% 50%;
		background-size: 1.5em auto;
		padding-right: 3em;
	}
		.cardsWrapper .cardInhaltFertiggroessen .vergleichinfo:not(.cardsWrapper .cardInhaltFertiggroessen .vergleichinfo.modelle), .cardsWrapper .cardInhaltFertiggroessen .uebersichtModelle .modell{
			background-image: url(/bilder/icons/check.svg);
		}
	
		.cardsWrapper .uebersichtModelle .modell.highlight{
			background-image: url(/bilder/icons/check.svg);
			color: var(--accent-color);
		}
	
		.cardsWrapper .wrapperHinweisCard {
			background-color: #FFEBDC;
			font-style: italic;
			border: 1px solid #FFD8B8;
		}
		.cardsWrapper .uebersichtProdukt .hinweisCard{
			background-image: url(/bilder/icons/check.svg);
			font-size: 1.2em;
  			font-weight: inherit;
			background-size: 1.2em;
		}
		.cardsWrapper .uebersichtProdukt .auflistungDachfensterTypen {
			font-size: .75em;
			display: block;
		}
		.cardsWrapper .cardInhaltFertiggroessen .wrapperHinweisCard{
			background-color: #FFEBDC;
			font-style: italic;
			border: 1px solid #FFD8B8;
		}

		.cardsWrapper .stoffanzahl{
			display: flex;
			align-items: center;
		}
			.cardsWrapper .stoffanzahl::before{
				content: '';
				height: 100%;
				width: 1.7em;
				background-image: url(/bilder/seo/cards/farbpunkte.svg);
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 0 50%;
				margin-right: 0.5em;
			}
.cardsWrapper > p{
	width: 60%;
}
/* seo startseitencards ende */