/*----------------------------------------------------------------------------------------------------------*/
/*------------------------------------------SEO STARTSEITEN CARDS-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/
 
/*@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");*/
@import url('/css/variables.css?cache=10000015');
.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;
}
.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 {
	}
	.cardsWrapper .teaserbildWrapper {	
	}
	.rollo .cardsWrapper .card .cardInhalt, .rollo .cardsWrapper .card.defaultHighlight .cardInhalt {
		position:relative;
		background-color:#fff;
		z-index:2;
	}
	.rollo .cardsWrapper .card .cardInhalt.inactive, .rollo .cardsWrapper .card.defaultHighlight .cardInhalt.inactive {
		position:absolute;
		top: 40px;
		right: 0;
		height: calc(100% - 60px);
		z-index: 1;
		width: calc(100% - 13px);
		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: block;
}
.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: 0px;
		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";*/
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis";
	
	outline: 1px solid #E6E6E6;
	transition: all .5s ease-in-out;
}
.cardsWrapper .btn2::before{
					background-repeat: no-repeat;
					content: '';
					width: 1em;
					height: 1.3em;
					padding: 0px;
					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 {
		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%;
	}
	.abPreis {
	
	}
	.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 .btn2::before{
	padding: 10px;
	}
	.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 {
		top: -63px;
		left: 0px;
		padding: 4px 1.5em;
		transform: scale(.7);
		transform-origin: center left;
		display: none;
	}
	.cardsWrapper .iconsBefestigung {
		display: none !important;
	}
	.cardsWrapper .uebersichtModelle {
		display: none !important;
	}
	.hinweisBeispielpreis {
		display: none;
		/*width: 60vw;
		top: 65px;
		font-size: .8em;
		background: #fff;
		padding-right: 10px;
		right: 0;*/
	}
	.hinweisBeispielpreis br {
	  display: none;
	}
	.cardsWrapper .lieblingsprodukt {
		display: none;
	}
	.cardsWrapper .beschriftungTeaserbild {
	  font-size: 1em!important;
	  margin-bottom:0em!important;
	  height: 100%!important;
	}
	.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;
		/*position: relative;
		left: -230px;
		height:100%!important;
		width:auto!important;*/
	}
}

.cardEnd .button {
	display:block;
}
.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: 0em 0em;
	flex-flow: row wrap;
	gap: 3em;
	/*align-items: flex-start;*//*dies verhindert gleiche höhe der cards!*/
}

.beschriftungTeaserbildSmall {
	display:none;
}
.cardsWrapper .card {
   /* 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";
	*/
    "titel titel"
	"bild bild"
    "beschreibung beschreibung"
    "preis";
	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: 2px;
		right: 0;
		left: unset;
		padding: 0 .5em;
		height: 85px;
		width: 80px;
		text-align: center;
	}
	
	
}
@media screen and (min-width: 1400px) {
	
	.cardsWrapper .unserTipp { 
		top: 2px;
		height: 80px;
		width: 115px;
		text-align: center;
	}
	.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;*/
		box-shadow: 0px 0px 7px #16A160 !important;
		border: 1px solid #31CC84;
	}
	.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: 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;
			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;
	}

	.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 */