/*----------------------------------------------------------------------------------------------------------*/
/*------------------------------------------SEO STARTSEITEN CARDS-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/

/*@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");*/
.card a {
  pointer-events: none;
  touch-events: none;
}
.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:500;
	margin-left: 4px;
}

.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;
	/*z-index: 666;*/
	pointer-events:all;
}
/*@media screen and (max-width:768px) {*/
	.rollo .cardsWrapper .reiterGroup {
		top: 0;
		right: 0;
		height: 40px;
		position: absolute;
		top: 0;
		/*right: 11px;*/
	}
	.rollo .cardsWrapper .card {
		padding:50px 10px 10px 3px;
		/*outline:1px solid #f00;*/
	}
	.cardsWrapper .teaserbildWrapper {
		/*box-shadow: #E6E6E6 10px -10px 2px 1px;bis 768*/
	}
	/*
	.rollo .cardsWrapper .card .reiterGroup:hover .rollo .cardsWrapper .card .cardInhalt, .rollo .cardsWrapper .card.defaultHighlight .cardInhalt {
		box-shadow: #E6E6E6 0px 0px 0px 1px, rgb(255, 255, 255) 10px -10px 0px -3px, #E6E6E6 10px -10px 10px 1px!important;
	}*/
	.rollo .cardsWrapper .card .cardInhalt, .rollo .cardsWrapper .card.defaultHighlight .cardInhalt {
		/*box-shadow: #E6E6E6 0px 0px 0px 1px, rgb(255, 255, 255) 10px -10px 0px -3px, #E6E6E6 10px -10px 10px 1px!important;*/
		position:relative;
		background-color:#fff;
		z-index:2;
	}
	.rollo .cardsWrapper .card .cardInhalt.inactive, .rollo .cardsWrapper .card.defaultHighlight .cardInhalt.inactive {
		/*box-shadow: #E6E6E6 0px 0px 0px 1px, rgb(255, 255, 255) 10px -10px 0px -3px, #E6E6E6 10px -10px 10px 1px!important;*/
		position:absolute;
		top: 40px;
		right: 0;
		height: calc(100% - 60px);
		z-index: 1;
		width: calc(100% - 13px);
		opacity: 1;
		overflow: hidden;
	}
	.rollo .cardsWrapper .card .cardInhalt.inactive > *, .rollo .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 {
    font-size: 1em;
    position: absolute;
    top: 40px;
    right: 5px;
    line-height: 1.3;
    text-align: right;
    text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff;
}


	.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: 1em;
		font-weight: 300;
		position: absolute;
		top: 80px;
		left: 0;
		padding: 0 1.5em;
		background-color: var(--accent-color);
		color: #fff;
		z-index: 1;
		line-height: 1.6em;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
	}
.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 mobileGo"
	"bild bild"
    "beschreibung beschreibung";
	/*
	grid-template-areas:
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis mobileGo";
	*/
	outline: 1px solid #E6E6E6;
	transition: all .5s ease-in-out;
}
.cardsWrapper .btn2::before{
					background-repeat: no-repeat;
					content: '';
					width: 1em;
					height: 1.3em;
					padding: 0;
					margin-right: 0.5em;
					transition: transform 0.55s;
					background-position: 50%;
					background-size: contain;
				}
					.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 .btn2:not(.cardsWrapper .card:hover .btn2, .cardsWrapper .card.defaultHighlight .btn2:not(.cardsWrapper:hover .defaultHighlight .btn2) ){
						background-color: var(--secondary-color-light);
						color: var(--secondary-color);						
					}
				
						.cardsWrapper .btn2::before, .cardsWrapper:hover .defaultHighlight .btn2::before{
							background-image: url(/bilder/seo/cards/zahnrad_gruen.svg);
						}
						
						.cardsWrapper .card:hover  .btn2::before, .cardsWrapper .defaultHighlight .btn2::before, .cardsWrapper .defaultHighlight:hover .btn2::before{
							background-image: url(/bilder/seo/cards/zahnrad_weiss.svg);
						}
						.cardsWrapper .btn2:hover::before{
							transform: rotate(360deg);
						}
						
						.reiterGroup:has(~ .cardInhalt):hover .cardInhalt {
						  left: -3px;
						}
						.cardInhalt.inactive > *:not(.teaserbildWrapper) {
							opacity:0;
							pointer-events:none;
						}
@media screen and (max-width:500px) {
	.cardsWrapper .cardInhalt {
		grid-template-columns:calc(100% - 60px) 60px!important;
		grid-template-areas:
		"titel titel"
		"beschreibung bild"
		"beschreibung bild"
		"beschreibung bild"
		"beschreibung mobileGo"!important;
	}
	
	.abPreis {
	  position: absolute;
	  right: .5em;
	  top: 40px;
	}
	.cardsWrapper .btn2.mobileGo {
							background-image: url(/bilder/seo/cards/zahnrad_weiss.svg)!important;
							background-color: var(--primary-color)!important;
							height:50px;
						}
						.cardsWrapper .cardInhaltFertiggroessen .btn2.mobileGo {
							background-image: url(/bilder/seo/cards/zahnrad_weiss.svg)!important;
							background-color: var(--btn1Bg)!important;
						color: var(--secondary-color)!important;	
						}
						
						.cardsWrapper .card.defaultHighlight .btn2.mobileGo, .cardsWrapper .card:hover ~ .btn2.mobileGo {
							/*background-image: url(/bilder/seo/cards/konfigurieren_weiss.svg)!important;
							background-color: var(--secondary-color)!important;*/
							color: var(--primary-color)!important;
						}
						.cardsWrapper .cardInhaltFertiggroessen .btn2.mobileGo, .cardsWrapper .card:hover ~ .cardInhaltFertiggroessen .btn2.mobileGo {
							/*background-image: url(/bilder/seo/cards/konfigurieren_weiss.svg)!important;
							background-color: var(--primary-color)!important;*/
						color: var(--secondary-color)!important;	
						}
	.cardsWrapper .cardInhalt.cardInhaltFertiggroessen .btn2.mobileGo,.cardsWrapper .card.defaultHighlight .btn2.mobileGo, .cardsWrapper .card:hover ~ .btn2.mobileGo {
		align-self: end;
		background-color:var(--btn1Bg)!important;
		background-image: url(/bilder/seo/cards/zahnrad_weiss.svg)!important;
	}
	.cardsWrapper .cardInhalt.cardInhaltMass .btn2.mobileGo {
		align-self: end;
		background-color:var(--btn2Bg)!important;
		background-image: url(/bilder/seo/cards/zahnrad_weiss.svg)!important;
	}
	.cardsWrapper .cardEnd {
		position:static;
	}
	.contentWidthMax .artikel_alle {
		padding: 0 1em;
	  }
	.cardsWrapper .unserTipp {
		top: -63px;
		left: 0px;
		padding: 4px 1.5em;
		transform: scale(.7);
		transform-origin: center left;
	}
	.hinweisBeispielpreis {
		width: 60vw;
		top: 65px;
		font-size: .8em;
		background: #fff;
		padding-right: 10px;
		right: 0;
	}
	.hinweisBeispielpreis br {
	  display: none;
	}
	.cardsWrapper .beschriftungTeaserbild {
	  font-size: 1em!important;
	  margin-bottom:1em;
	}
	.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 {
		position: relative;
		left: -230px;
		height:100%!important;
		width:auto!important;
	}
}

.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%;
	/*
  height: 228px;
  width: 640px;
  vertical-align: middle;*/
  /*position: absolute;
  
  right: 0;
  left: 0;
  margin: auto;*/
}
.cardsWrapper , .cardsWrapper * {
    box-sizing: border-box;
}
.cardsWrapper {
    display: flex;
    justify-content: center;
	margin: 3em 0;
	flex-flow: row wrap;
	gap: 3em;
	/*align-items: flex-start;*//*dies verhindert gleiche höhe der cards!*/
}

.beschriftungTeaserbildSmall {
	display:none;
}
.cardsWrapper .card {
    width: 100%;
   /* max-width: 450px;*/
	order: 2;
	margin: 1em 0;
/*	min-width: 320px;*/
	position:relative;
}
.cardsWrapper .cardInhalt {
    display: grid;
    text-decoration: none;
    box-shadow: 0px 2px 4px #00000042;
	grid-template-columns:calc(100% - 50px) 50px;
	grid-template-areas:
    "titel mobileGo"
	"bild bild"
    "beschreibung beschreibung";
	/*
	grid-template-areas:
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis mobileGo";
	*/
	outline: 1px solid #E6E6E6;
	transition: all .5s ease-in-out;
}

	

@media screen and (min-width: 501px) {
	.teaserbildToggler {
		display:none;
	}

	
	
}
@media screen and (min-width: 768px) {
	
	.cardsWrapper .cardEnd .abPreis {
		grid-area: abpreis;
		align-content: center;
		text-align: center;
        line-height: 50px;
	}
	.cardsWrapper .hinweisBeispielpreis {
		grid-area: beispiel;
	  display: block;
	  font-size:.8em;
	  line-height: 1.3em;
	  position:static;
	  text-align:left;
	}
	.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.5rem;
					font-weight: 700;
				}	
				.cardsWrapper .cardEnd .abPreis span:nth-child(3){
					font-size: 1.125rem;
					font-weight: 700;
				}	
	
	.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 {
		top: 50px;
		right: 0;
		left:unset;
		padding: 0 .5em;
	}
	
	
}
@media screen and (min-width: 1400px) {
	
	.cardsWrapper .unserTipp {
        top: 80px;
	}
	.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;
	}
	/*
	.cardsWrapper .teaserbildWrapper {
	  min-height: 228px;
	}
	*/
	
	.cardsWrapper .cardInhalt > * {
		flex-grow: 0;
	}
		.cardsWrapper .cardInhalt > .cardEnd {
		flex-grow: 1;
		align-content: end;
	}

	/*
	.cardsWrapper .teaserbild {
	  height: auto;
	  vertical-align: middle;
	  position: unset;
	  height: 100%;
	  right: unset;
	  left: unset;
	  margin: 0;
	}
	*/
}
	/*.cardsWrapper .cardInhalt.inactive {
		display: none;
	}*/

    /* eines ist Vorausgew?hlt, bei hover ?ber andere bekommen diese den "Ausgew?hlt-Schatten" und bei dem vorausgew?hltem wird er entfernt */

	.inhalt:not(.rollo) .cardsWrapper .defaultHighlight .cardInhalt:not(.cardsWrapper:hover .defaultHighlight .cardInhalt), .inhalt:not(.rollo) .cardsWrapper .card:hover .cardInhalt{
		box-shadow: 0px 4px 40px #00000042!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/seo/cards/haken_fertig.svg);
	background-repeat: no-repeat;
	background-position: right;
}

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




.cardsWrapper .reiterGroup {
	/*display: flex;*/
	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;
		/*background: var(--secondary-color-light);
		color: var(--secondary-color);*/
		text-decoration: none;
		width: auto;
		font-weight: 400;
		transition: 0.5s;
		cursor: pointer;
		padding-left:60px;
		background-image:url(/bilder/seo/cards/_schalter_aus.svg);
		background-repeat:no-repeat;
		background-position:10px center;
	}
	.cardsWrapper .reiterGroup .reiter.massanfertigung {
		background-image: url(/bilder/seo/cards/_schalter_an.svg);
	}
	.cardsWrapper .reiterGroup .reiter:only-child {
		display:none;
	}
	.cardsWrapper .reiterGroup .reiter.fertiggroessen {
		/*background: var(--primary-color-light);
		color: var(--primary-color);*/
		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*/
		/*background: var(--secondary-color);
		color: var(--secondary-color-text);*/
		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*/
		/*background: var(--primary-color);
		color: var(--primary-color-text);*/
		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:#eee;
		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: 5em;
			height: 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;
		}
		
		.cardsWrapper .beschriftungTeaserbild {
			grid-area: titel;
			font-size: 1.25em;
			display: flex;
			flex-wrap:nowrap;
			align-items: center;
			text-transform: uppercase;
			position:static;
			padding: 6px;
			height: 80px;
			background: #fff;
			z-index: 2;
			font-weight:600;
		}
		.beschriftungTeaserbild > div {
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.cardInhalt .beschriftungTeaserbild  .produktTyp {
			display: block;
			text-transform: none;
			width: calc(100% - 60px);
			font-size: 16px;
			font-weight: normal;
		}
		.cardInhaltMass .beschriftungTeaserbild  .produktTyp {
			color:var(--btn2Bg);
		}
		.cardInhaltFertiggroessen .beschriftungTeaserbild  .produktTyp {
			color:var(--btn1Bg);
		}
			.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{
	/*height: 100%;*/
    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;
	}

		/* .modelle > span { */
			/* padding: 0.3em !important; */
		/* } */

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

		.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/seo/cards/befestigung_schrauben_mass.svg);				
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_schrauben span:before {
					content: url(/bilder/seo/cards/befestigung_schrauben_fertig.svg);				
				}
				
				
			.cardsWrapper .iconsBefestigung .befestingung_klemmen span:before {
				content: url(/bilder/seo/cards/befestigung_klemmen_mass.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_klemmen span:before {
					content: url(/bilder/seo/cards/befestigung_klemmen_fertig.svg);
				}	
				
				
			.cardsWrapper .iconsBefestigung .befestingung_kleben span:before {
				content: url(/bilder/seo/cards/befestigung_kleben_mass.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_kleben span:before {
					content: url(/bilder/seo/cards/befestigung_kleben_fertig.svg);
				}			
			/*
			.cardsWrapper .iconsBefestigung .befestingung_schrauben{
				background-image: url(/bilder/seo/cards/befestigung_schrauben_mass.svg);				
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_schrauben{
					background-image: url(/bilder/seo/cards/befestigung_schrauben_fertig.svg);				
				}
				
				
			.cardsWrapper .iconsBefestigung .befestingung_klemmen{
				background-image: url(/bilder/seo/cards/befestigung_klemmen_mass.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_klemmen{
					background-image: url(/bilder/seo/cards/befestigung_klemmen_fertig.svg);
				}	
				
				
			.cardsWrapper .iconsBefestigung .befestingung_kleben{
				background-image: url(/bilder/seo/cards/befestigung_kleben_mass.svg);
			}
				.cardsWrapper .cardInhaltFertiggroessen .iconsBefestigung .befestingung_kleben{
					background-image: url(/bilder/seo/cards/befestigung_kleben_fertig.svg);
				}		*/	

	.cardsWrapper .lieblingsprodukt{
		background: url(/bilder/seo/cards/icon_herz_mass.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-style: italic;
			}

	.cardsWrapper .vergleichinfo:not(.cardsWrapper .vergleichinfo.modelle), .cardsWrapper .uebersichtModelle .modell, .cardsWrapper .uebersichtProdukt .hinweisCard{
		background-image: url(/bilder/seo/cards/haken_mass.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/seo/cards/haken_fertig.svg);
		}
	
		.cardsWrapper .uebersichtModelle .modell.highlight{
			background-image: url(/bilder/seo/cards/haken_akzent.svg);
			color: var(--accent-color);
		}
	
		.cardsWrapper .wrapperHinweisCard {
			background-color: var(--secondary-color-light);
			font-style: italic;
		}
		.cardsWrapper .uebersichtProdukt .auflistungDachfensterTypen {
			font-size: .75em;
			display: block;
		}
		.cardsWrapper .cardInhaltFertiggroessen .wrapperHinweisCard{
			background-color: var(--primary-color-light);
			font-style: italic;
		}

		.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 .cardEnd{
			grid-area: preis;
			display: flex;	
			justify-content: space-around;	
			align-items: flex-end;	
			flex-wrap: wrap;
		}*/

								

				

				




.cardsWrapper > p{
	width: 60%;
}

/*
@media only screen and (max-width: 700px){
	.cardsWrapper{
		font-size: 0.75em;
	}
}*/


/* seo startseitencards ende */