/*
		06.02.2020 - Tim - Style fuer .artikel_liste_button_darueber hinzugefegt
		13.02.2020 - David S. - bei der Klasse .boxSeoPosition den Innenabstand und die H?he angepasst, damit auch 2 Buttons auf das Hintergrundbild passen
		20.05.2020 - David S. - .SeoVideo hinzugef?gt
		29.10.2020 - David S. - .boxSeo max-width auf 500px angepasst (damit es mit dem mobilen Layout ?bereinstimmt) + Datei um boxSeoMobile erweitert + mobiles Layout f?r .artikelbox angepasst
		02.02.2021 - David S. - Farbboxen im mobilen Layout neu angeordnet
		16.06.2021 - David S. - Anpassungen f?r neue Gardinen SEO Seite (noch im Testbetrieb)
    31.08.2021 - David D. - Klasse Hinweis hinzugef?gt, f?r neue Hinweisboxen (Plissee-Held)
    02.09.2021 - David D. - neues CSS f?r Plissee Held hinzugef?gt
    07.10.2021 - David S. - clear: both von h2,h3 entfernt, da es sonst unter dem Filter erscheint
    27.10.2021 - David D. - neues CSS f?r Plissee Held hinzugef?gt
*/

table {
  width: 100%;
  border-collapse: collapse;
}

  table, th, td {
    border: 3px solid #fff;
  }

th {
  background-color: #2f2f2f;
  color: #f2f2f4;
}
  th, td {
    padding: 0.5em;
	font-weight: 400;
  }

td {
  background-color: #f2f2f4;
}

.mainRight h1 span {
  font-size: 0.75em;
  vertical-align: middle;
}

#text_inhalt {
  width: 90%;
}
  #text_inhalt * {
      box-sizing: border-box;
  }
  #text_inhalt a:not(.button), .text_inhalt a:not(.button), #text_after a:not(.button), .text_after a:not(.button), #text_before a:not(.button), .text_before a:not(.button) {
    color: #2F2F2F;
    font-weight: 400;
  }
  #text_inhalt h1, #text_inhalt h2, #text_inhalt h3 {
    margin: 0;
    padding: 0;
  }
  #text_inhalt h1 {
    font-size: 1.75em;
	line-height: 1.2em;
  }
  #text_inhalt h2, #text_inhalt h3 {
    font-weight: 500;
  }
  #text_inhalt h2 {
    font-size: 1.5em;
  }
  #text_inhalt h3 {
    font-size: 1.375em;
  }
  #text_inhalt p {
    font-size: 1.125em;
  }

#topBanner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.auswahl_eingrenzen {
  box-sizing: border-box;
  padding: 0 1%;
}

.bannerGross, .bannerKlein, .bannerMax {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0.5em 0;
  box-shadow: 0px 2px 4px #5656567F;
  text-decoration: none;
  color: #2F2F2F;
}

.bannerGross  {
  width: 49%
}

.bannerMax {
	width: 100% !important;
}

.bannerKlein  {
  width: 24%
}

.gardinenKategorien {
	display:  flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gardinenKategorien .item{
	display:  flex;
	flex-wrap: wrap;
	align-items: flex-end;
	width: 260px;
	height: 220px;
	margin: 8px 0;
}

.gardinenKategorien .item a{
	text-decoration: none;
}

.gardinenKategorien .item div{
	width: 100%;
	height: 60px
}

.gardinenKategorien .item div:nth-of-type(2){
	box-shadow: 0px 0px 10px #00000029;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
}

.gardinenKategorien .item div:first-child{
	height: 160px
}

.gardinenKategorien .item div:first-child img{
	width: 100%;
}

.bannerTitel {
  width: 100%;
  background: white;
  padding: 1.5em 0.5em;
  text-align: center;
  font-size: 1.3em;
  font-weight: lighter !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 1;
}
  .bannerTitel span {
    font-weight: 500;
    padding-left: 0.5em;
  }

.bannerInhalt {
  height: 50vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
  .bannerInhalt img {
    margin: 0 1.5em;
    display: flex;
    align-items: center;
    padding: 10px;
    transform: translate(0px, 50%);
    box-shadow: 0px 2px 4px #5656567F;
  }

.bannerZweispaltig a {
  width: 35%;
}
  .bannerZweispaltig a:first-child {
    width: 63%;
  }






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

/*eigentlich ist der Style der active Buttons hier der default button style. Das passt aber hier im PH nicht deswegen setze ich das hier oben nochmal explizit*/
#cards .button { 
	background-color: #626262;
	color: #FFFFFF;
}

#cards .btn2 { 
	background-color: #FACF00;
	color: #0E0E0F;
}

/*@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");*/
#cards , #cards * {
    box-sizing: border-box;
}
#cards {
    display: flex;
    justify-content: center;
}


#cards .card {
    width: 30%;
    max-width: 450px;
	order: 2;
	margin: 0 2%;
}

#cards .cardInhalt {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0px 2px 4px #00000042;
    height: 94%;
}
	#cards .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 */

	#cards .defaultHighlight .cardInhalt:not(#cards:hover .defaultHighlight .cardInhalt), #cards .card:hover .cardInhalt{
		box-shadow: 0px 4px 40px #00000042;
	}




#cards .reiterGroup {
	display: flex;
	position: relative;
	overflow: hidden; 	/* f?r die abgeschr?gten Ecken bei 2 Reitern */
}
	#cards .reiterGroup .reiter {
		padding: 0.5em 1em;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFE770;
		color: #0E0E0F;
		text-decoration: none;
		width: 50%;
		font-weight: 400;
		transition: 0.5s;
		cursor: pointer;
	}
	#cards .reiterGroup .reiter.fertiggroessen {
		background: #626262;
		color: #FFFFFF;
	}


	/*
		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)
	*/	
	#cards .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)*/
	, #cards .card.defaultHighlight .reiterGroup .reiter.massanfertigung:not(.reiter.inactive,#cards:hover .card.defaultHighlight .reiterGroup .reiter){ /*den mit defaultHighlight highligten solange man nicht ?ber irgendwas hovert*/
		background: #FACF00;
		color: #0E0E0F;	
	}
	#cards .card:hover .reiterGroup .reiter.fertiggroessen.active /*den Reiter Highlighten ?ber dessen Card man grade hovert wenn er aktiv ist (also wenn mass inaktiv ist)*/
	, #cards .card:hover .reiterGroup .reiter.fertiggroessen:first-child /*wenn keinen mass Tab gibt soll das auch als "active" angesehen werden*/
	, #cards .card.defaultHighlight .reiterGroup .reiter.fertiggroessen:first-child:not(#cards:hover .card.defaultHighlight .reiterGroup .reiter) /*wenn keinen mass Tab gibt soll das auch als "active" angesehen werden*/
	, #cards .card.defaultHighlight .reiterGroup .reiter.fertiggroessen.active:not(#cards:hover .card.defaultHighlight .reiterGroup .reiter){ /*den mit defaultHighlight highligten solange man nicht ?ber irgendwas hovert*/
		background: #626262;
		color: #FFFFFF;				
	}	

	#cards .reiterGroup.abgeschraegt .reiter.fertiggroessen:after{
			content: "";
			width: 0.5em;
			position: absolute;
			left: calc(50% - 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;
	}

  #cards .teaserbildWrapper{
	position: relative;
}
	#cards .teaserbild{
		width: 100%;
		vertical-align: middle; /*ohne diese Eigenschaft ist ein kleiner Rand unter dem Bild -> alternativ k?nnte auch der wrapper auf flex gesetzt werden*/ 
	}
		#cards .iconTeaserbild{
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 5em;
			height: 5em;
			background-color: rgba(255,255,255,0.5);
			border-radius: 100%;
			padding: 1em;
			z-index: 1;
		}
		
		#cards .beschriftungTeaserbild{
			font-size: 1.25em;
			position: absolute;
			bottom: 0.4em;
			left: 1em;
			z-index: 1;		
			color: 	#FFFFFF;
			display: flex;
			align-items: center;
			text-transform: uppercase;
		}
			#cards .beschriftungTeaserbild img{
				width: 2em;
				margin-right: 0.5em;
			}
			#cards .beschriftungTeaserbild span{
				font-weight: 500;
			}
			#cards .beschriftungTeaserbild .beschriftungTeaserbildSmall{
				font-weight: 300;
				font-size: 0.8rem;
				display: block;
			}
		#cards .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;
		}
			#cards .wrapperLogoLysel img{
					width: 5em; 
			}
		#cards .teaserBildBackgroundLayer{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			background-color: #0000005e;
			transition: 0.5s;			
		}
			#cards .cardInhalt:hover .teaserBildBackgroundLayer{
				background-color: transparent;
			}
			

#cards .uebersichtProdukt{
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;	
}

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

	#cards .uebersichtProdukt .vergleichinfo{
		display: flex; 
		justify-content: space-between;
	}
		#cards .uebersichtProdukt .vergleichinfo span{
			font-weight: 500;
		}

	#cards .iconsBefestigung{
		display: flex;
		flex-wrap: wrap;
		padding-top: 0.5em;
		font-size: 0.875em;
	}
		#cards .iconsBefestigung > div{
			padding-left: 1.5em;
			padding-right: 1em;
			background-repeat: no-repeat;
			background-position: 0 50%;
		}
			
			#cards .iconsBefestigung .befestingung_schrauben{
				background-image: url(/bilder/seo/cards/befestigung_schrauben_mass.svg);				
			}
				#cards .cardInhaltFertiggroessen .iconsBefestigung .befestingung_schrauben{
					background-image: url(/bilder/seo/cards/befestigung_schrauben_fertig.svg);				
				}
				
				
			#cards .iconsBefestigung .befestingung_klemmen{
				background-image: url(/bilder/seo/cards/befestigung_klemmen_mass.svg);
			}
				#cards .cardInhaltFertiggroessen .iconsBefestigung .befestingung_klemmen{
					background-image: url(/bilder/seo/cards/befestigung_klemmen_fertig.svg);
				}	
				
				
			#cards .iconsBefestigung .befestingung_kleben{
				background-image: url(/bilder/seo/cards/befestigung_kleben_mass.svg);
			}
				#cards .cardInhaltFertiggroessen .iconsBefestigung .befestingung_kleben{
					background-image: url(/bilder/seo/cards/befestigung_kleben_fertig.svg);
				}			

	#cards .lieblingsprodukt{
		background: url(/bilder/seo/cards/icon_herz_mass.svg) no-repeat 0.5em 50%;
		background-size: 1.3em auto;
		padding-left: 2.5em;			
	}			

	#cards .modelle {
		padding: 0;
	}
	#cards .uebersichtModelle{
		display: flex;
		flex-direction: column;
	}
		#cards .uebersichtProdukt .uebersichtModelle .modell{
			display: flex;
			align-items: center;
			margin: 0.3em 0;
			hyphens: auto;
		}
	
			#cards .uebersichtModelle .modell img{
				margin-right: 1.5em;
			}
			#cards .uebersichtModelle .modell .anmerkung{
				font-style: italic;
			}

	#cards .vergleichinfo:not(#cards .vergleichinfo.modelle), #cards .uebersichtModelle .modell, #cards .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;
	}
		#cards .cardInhaltFertiggroessen .vergleichinfo:not(#cards .cardInhaltFertiggroessen .vergleichinfo.modelle), #cards .cardInhaltFertiggroessen .uebersichtModelle .modell{
			background-image: url(/bilder/seo/cards/haken_fertig.svg);
		}
	
		#cards .uebersichtModelle .modell.highlight{
			background-image: url(/bilder/seo/cards/haken_akzent.svg);
			color: #C00D0D;
		}
	
		#cards .wrapperHinweisCard{
			background-color: #FFFADE;
			font-style: italic;
		}

		#cards .stoffanzahl, #cards .profilfarbe{
			display: flex;
			align-items: center;
		}
			#cards .stoffanzahl::before, #cards .profilfarbe::before{
				content: '';
				height: 100%;
				width: 1.7em;			
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 0 50%;
				margin-right: 0.5em;
			}
			#cards .stoffanzahl::before{
					background-image: url(/bilder/seo/cards/farbpunkte.svg);
			}
			#cards .profilfarbe::before{
					background-image: url(/bilder/seo/cards/farbpunkte_grau.svg);
			}
		#cards .cardEnd{
			display: flex;	
			justify-content: space-between;	
			align-items: center;	
			flex-wrap: wrap;
		}

				#cards .cardEnd .abPreis span:first-child{
					font-size: 0.875rem;
				}
				#cards .cardEnd .abPreis span:nth-child(2){
					font-size: 1.5rem;
					font-weight: 700;
				}	
				#cards .cardEnd .abPreis span:nth-child(3){
					font-size: 1.125rem;
					font-weight: 700;
				}					

				#cards .cardEnd .button{
					display: flex;
					align-items: center;
					padding: 0.8em 1.2em;
					max-width: 95%;
				}
					#cards .cardEnd .btn2{
						padding: 0.8em 0.5em;
					}

				#cards .cardEnd .btn2::before{
					background-repeat: no-repeat;
					content: '';
					width: 1.3em;
					height: 1.3em;
					padding: 0 0.5em;
					margin-right: 0.5em;
					transition: transform 0.15s;
					background-position: 50%;
					background-size: contain;
				}
					#cards .cardEnd .button:not(#cards .card:hover .cardEnd .button, #cards .card.defaultHighlight .cardEnd .button:not(#cards:hover .defaultHighlight .cardEnd .button) ){
						background-color: #626262;
						color: #FFFFFF;						
					}	
					
					#cards .cardEnd .btn2:not(#cards .card:hover .cardEnd .btn2, #cards .card.defaultHighlight .cardEnd .btn2:not(#cards:hover .defaultHighlight .cardEnd .btn2) ){
						background-color: #FFE770;
						color: #0E0E0F;						
					}
				
						#cards .cardEnd .btn2::before, #cards:hover .defaultHighlight .cardEnd .btn2::before{
							background-image: url(/bilder/seo/cards/zahnrad_dark.svg);
						}
						#cards .cardEnd .btn2:hover::before{
							transform: rotate(360deg);
						}

#cards .hinweisBeispielpreis{
	 font-size: 0.7rem;
	 line-height: 1em;
	 font-weight: 500;
}	 
		#cards .hinweisBeispielpreis span{
			font-size: 0.6rem;
			font-weight: 300;
		}
#cards .unserTipp {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.8em;
	background-color: #C00D0D;
	color: #fff;
	z-index: 1;
}
#cards .unserTipp span {
	font-weight: 500;
	font-size: 1.1em;
	text-transform: uppercase;

}




@media only screen and (max-width: 1400px){

    #cards {
      flex-direction: column;
    }
		#cards .card {
			width: 100%;
			margin: 1.5em auto;
			max-width: none;
		}
			#cards .card.defaultHighlight{
				order: 1;
			}		
		#cards .cardInhalt{
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: auto 1fr;			
		}
			#cards .teaserbildWrapper{
				grid-column: 2;
				grid-row: 1;
			}
			#cards .uebersichtProdukt{
				grid-row-start: 1;
				grid-row-end: span 2;
			}
			#cards .cardEnd{
				grid-column: 2;
				grid-row: 2;
				margin: 0;
				align-self: center;
			}
			#cards .uebersichtProdukt > div:last-child{
				border: none;
			}
}

@media only screen and (max-width: 700px){
	#cards{
		font-size: 0.75em;
	}
}

@media only screen and (max-width: 500px){
	#cards .reiterGroup{
		width: 80%;
	}
	#cards .cardInhalt{
		grid-template-columns: 100%;
		padding-bottom: 0.5em;
	}
	#cards .iconTeaserbild{
		display: none;
	}

	#cards .beschriftungTeaserbild{
		font-size: 1em;
		bottom: 0.5em;
		left: 0.5em;
		line-height: 1em;
	}

	#cards .teaserbildWrapper{
			grid-column: 1;
			grid-row: 1;
	}
	#cards .uebersichtProdukt{
			grid-column: 1;
			grid-row: 2;
	}
	#cards .cardEnd{
			grid-column: 1;
			grid-row: 3;
			margin: 1em 2em;
	}


	#cards .unserTipp{
		line-height: 1em;
	}

	#cards .uebersichtProdukt{
		padding: 0.5em 0;
		margin: 0 1.5em;
	}
	
	#cards .uebersichtProdukt > div, #cards .cardEnd{
		padding: 0;
	}

	#cards .lieblingsprodukt{
		display: none;
	}

	#cards .uebersichtModelle .modell img{
		margin-right: 0.5em;
	}

	#cards .uebersichtProdukt .vergleichinfo:not(#cards .uebersichtProdukt .vergleichinfo.modelle), #cards .uebersichtProdukt .uebersichtModelle .modell,  #cards .uebersichtProdukt .hinweisCard{
		background-size: 1em auto;
		padding-right: 1.5em;
	}
	
	#cards .uebersichtBefestigung{	
		position: relative;
	}
		#cards .iconsBefestigung{
			position: absolute; /*entweder m?sste ich die icons 2 x im HTML haben oder das absolut positionieren, weil sonst bekomme ich das nicht von unter "vergleichsinfo" zu in "vergleichsinfo" verschoben (zumindest nicht ohne dass der haken dann verschoben ist) */
			top: 0; 
			right: 3em;
		}
			#cards	.iconsBefestigung > div{
				background-size: contain;
				height: 1.5em;
				padding: 0 0.8em;
			}
			#cards .iconsBefestigung span{
				display: none;
			}

}




#cardsV2, #cardsV2 * {
	box-sizing: border-box;
	font-size: 1rem;
	font-size: 0.86799vw;
	font-size: clamp(12px, 0.86799vw, 1em);
	font-weight: 400;
}

#cardsV2 {
	display: flex;
	justify-content: space-between;
	gap: 2.5em;
	padding: 0 1.5em;
	margin-bottom: 4em;
}


#cardsV2 .card {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	color: #444;
	display: flex;
	flex-flow: column;
	flex: 1 1 33.3333333333%;
	max-width: 430px;
	position: relative;
	margin-top: 3em;
}


#cardsV2 .card > div:not(.reiter) {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0px 20px 40px #08080800;
	transition: box-shadow .25s;
}

#cardsV2 .card.dfFertig > div:not(.reiter) {
	box-shadow: 0px 20px 40px #0808084D;
}

#cardsV2 .card:hover > div:not(.reiter) {
	box-shadow: 0px 20px 40px #0808084D;
}
#cardsV2 .card.dfMass:hover ~ .card.dfFertig > div,
#cardsV2 .card.dfPlissee:hover ~ .card.dfFertig > div {
	box-shadow: 0px 20px 40px #03030300;
}
#cardsV2 .reiter, #cardsV2 .head {
	background: #FFE461;
	color: #444;
}
#cardsV2 .dfFertig .reiter, #cardsV2 .dfFertig .head,
#cardsV2 .dfPlissee .reiter, #cardsV2 .dfPlissee .head 
,#cardsV2 .cardSekundaer .reiter, #cardsV2 .cardSekundaer .head	{
	background: #FACF00;
	color: #444;
}
#cardsV2 .dfPlissee .reiter, #cardsV2 .dfPlissee .head  {
	background: #E6E6E6;
}
#cardsV2 .cardGhost .reiter, #cardsV2 .cardGhost .head{
	background: #626262;
	color: #ffffff;
}


#cardsV2 .reiter {
	padding: .625em;
	border-radius: .75em .75em 0 0;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, -102%);		
}
#cardsV2 .head,
#cardsV2 .dfFertig .head > div:first-child {
	display: flex;
	flex-flow: column;
	padding: .625em;
	border: 1px solid #E6E6E6;
	border-bottom: 0;
	font-weight: 300;
}
#cardsV2 .dfMass .head,
#cardsV2 .dfFertig .head > div:first-child,
#cardsV2 .dfPlissee .head {
	font-size: 1.0625em;
	/*font-size: clamp(12px, 1vw, 17px);*/
}
#cardsV2 .dfFertig .head {
	flex-flow: row;
	justify-content: space-between;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}
#cardsV2 .dfFertig .head > div:first-child {
	border: 0;
	padding: 0;
	margin: .625em 0;
}
#cardsV2 .tipp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	background: #c00;
	color: #fff;
	padding: 0 .75em;
	text-transform: uppercase;
	clip-path: polygon(    10% 0%,
						0% 100%,
						100% 100%,
						100% 0%);
}
#cardsV2 .tipp small {
	font-weight: 600;
	font-size: 1.0625em;
	/*font-size: clamp(12px, 1vw, 17px);*/
	line-height: 1em;
}
#cardsV2 .tipp span {
	font-weight: 600;
	font-size: 1.75em;
	/*font-size: clamp(20px, 1vw, 28px);*/
	line-height: 1em;
}
#cardsV2 .head b {
	font-weight: 600;
	font-size: 1.1em;
	/*font-size: clamp(14px, 1vw, 19.5px);*/
}
#cardsV2 .cardContent {
	border: 1px solid #E6E6E6;
	border-top: 0;
	display: grid;
	grid-template-areas: "imgs"
						 "details"
						 "preisContent"
						 "konfiBtn";
	height: 100%;
}
#cardsV2 .imgs {
	grid-area: imgs;
	position: relative;
}
#cardsV2 .imgs img:first-child {
	display: block;
	width: 100%;
}
#cardsV2 .imgs > .massIcon,
#cardsV2 .imgs > .logo {
	position: absolute;
	right: 1em;
	transform: translate(0, -66%);
}
#cardsV2 .imgs > .massIcon{
	box-shadow: 0 3px 6px rgba(0,0,0,0.15);
	border-radius: 5px;
}
#cardsV2 .imgs > .logo {
	left: 0;
	transform: translate(0, -100%);
	box-sizing: border-box;
	width: 40%;
	padding: 3% 22% 3% 5%;
	background: linear-gradient(to right, rgba(255, 255, 255, .5), rgba(255, 255, 255, .3) 100%);
}
	#cardsV2 .imgs > .logo.logoLyselHome{
		padding: 0;	
	}

#cardsV2 .details, #cardsV2 .preisContent, #cardsV2 .konfiBtn {
	padding: 0 1.5em;
}
#cardsV2 .details .typen,
#cardsV2 .dfFertig .details .typenUe,
#cardsV2 .details .modelle,
#cardsV2 .details .stoffe,
#cardsV2 .details .befestigung,
#cardsV2 .details .profile {
	border-bottom: 2px solid #e4e4e4;
	padding-bottom: .5rem;
}
#cardsV2 .modelle li:first-child {
	font-weight: 400;
	padding: 0;
}
#cardsV2 .dfFertig .details .typen {
	border-bottom: 0;
	padding: 0;
}
#cardsV2 .details {
	grid-area: details;
	margin-top: .75em;
	display: flex;
	flex-flow: column;
}
#cardsV2 .details .typen {
	font-size: .8125em;
}
#cardsV2 .modelle, #cardsV2 .stoffe, #cardsV2 .profile, #cardsV2 .preisContent {
	padding-top: .5em;
	padding-bottom: .5em;
}
#cardsV2 .modelle ul, #cardsV2 .modelle li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#cardsV2 .modelle ul {
	margin: .75em  0 0 .75em;
}
#cardsV2 .modelle li {
	display: flex;
	gap: 1.25em;
	margin-bottom: .5em;
	align-items: center;
}
#cardsV2 .modelle .motor, #cardsV2 .modelle .highlight {
	color: #444;
}


#cardsV2 .modelle li:last-child {
	margin-bottom: 0;
}
#cardsV2 .stoffe, #cardsV2 .profile {
	display: flex;
	justify-content: space-between;
	padding-right: 2em;
}
#cardsV2 .stoffe span, #cardsV2 .profile span {
	display: flex;
	gap: .5em;
}
#cardsV2 .stoffe span::before, #cardsV2 .profile span::before {
	content: "";
	width: 2em;
	background: url("/bilder/seo/rollo/icon_stoff_farben.svg") no-repeat 100% 50%;
	background-size: 2em auto;
}
#cardsV2 .profile span::before {
	background-image: url("/bilder/seo/rollo/icon_profil_farben.svg");
}


#cardsV2 .befestigung{
	margin: 1em 0;
}
	#cardsV2 .befestigungHead{
		display: flex;
		justify-content: space-between;
	}
	#cardsV2 .befestigung span:not(.befestigungHead span){
		padding-left: 1.5em;
		background: url("/bilder/seo/befestigung-schrauben.svg") no-repeat 0 50%;
		background-size: 1em auto;
		width: auto;
		font-size: 0.8125em;
		padding-right: 1em;
	}
	#cards .befestigung span.klemmen{
		background-image: url("/bilder/seo/befestigung-klemmen.svg");
	}
	#cards .befestigung span.kleben{
		background-image: url("/bilder/seo/befestigung-kleben.svg");
	}


#cardsV2 .preisContent {
	grid-area: preisContent;
	display: flex;
	gap: 1em;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .75em;
}
#cardsV2 .preisContent > span:first-child {
	display: flex;
	flex-flow: column;
}
#cardsV2 .preisContent > span:first-child small {
	font-size: .75em;
}
#cardsV2 .preisContent > span:last-child small {
	font-size: .875em;
}
#cardsV2 .preisContent > span:last-child b {
	font-weight: 700;
	font-size: 1.5em;
}
#cardsV2 .preisContent > span:last-child span {
	font-weight: 700;
	font-size: 1.125em;
	text-transform: uppercase;
}
#cardsV2 .konfiBtn {
	grid-area: konfiBtn;
	background: #FFE461;
	color: #444;
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: center;
	padding: .75em 0;
	margin: 0 1.5rem 1.5rem 1.5rem;
	border-radius: 3px;
}
#cardsV2 .konfiBtn .desktop {
	display: none;
}
#cardsV2 .dfFertig .konfiBtn, #cardsV2 .cardSekundaer .konfiBtn {
	background: #FACF00;
}
#cardsV2 .dfPlissee .konfiBtn , #cardsV2 .cardGhost .konfiBtn{
	background: #626262;
}
#cardsV2 .konfiBtn img {
	width: 1.375rem;
	transform: rotate(0deg);.uebersichtKategorien .mass
	transition: transform .2s;
}
#cardsV2 .konfiBtn:hover img {
	transform: rotate(360deg);
}
#cardsV2 .konfiBtn {
	font-size: 1.125em;
}
#cardsV2 .haken,
#cardsV2 .modelle li:first-child.haken {
	background-image: url("/bilder/seo/icon_haken.svg");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 1.375rem auto;
	padding-right: 2rem !important;
}
#cardsV2 + p {
	margin-bottom: 6.66666666666666667em;
}

@media (max-width: 1260px) {
	#cardsV2, #cardsV2 * {
		font-size: clamp(13px, 1.19047vw, 1em);
	}
	#cardsV2 {
		margin-bottom: 1.875em;
		flex-flow: column;
	}
	#cardsV2 + p {
		margin-bottom: 6.25em;
	}


	#cardsV2 .card {
		margin: 2em auto;
	}
	
	
	#cardsV2 .card.dfMass {
		order: 2;
	}
	#cardsV2 .card.dfPlissee {
		order: 3;
	}
	#cardsV2 .details .stoffe {
		border-bottom: 0;
	}
	#cardsV2 {
		padding: 0;
	}
	#cardsV2 .card {
		max-width: none;
		width: calc(100% - 8em);
	}
	#cardsV2 .haken {
		padding-right: 2em !important;
	}
	#cardsV2 .cardContent {

		grid-template-columns: 20% 25% 27.5% 27.5%;
		grid-template-rows: auto auto;
		grid-template-areas: "details details imgs imgs"
							 "details details preisContent konfiBtn";
	}
	#cardsV2 .preisContent {
		flex-flow: column;
		gap: 0;
		align-items: start;
		margin-top: auto;
		padding: .5em 1em 0 0;
	}
	#cardsV2 .konfiBtn {
		margin: auto auto 1em auto;
		width: 100%;
	}
	#cardsV2 .details .typen {
		font-size: .625em;
	}
	#cardsV2 .imgs > .massIcon {
		width: 3.125em;
		height: 3.125em;
		right: .5em;
		transform: translate(0, -50%);
	}

	#cardsV2 .modelle ul {
		margin-left: 0;
	}
	#cardsV2 .modelle li img {
		width: 1.666666667em;
		margin: 0;
	}
	#cardsV2 .konfiBtn {
		gap: .3em;
	}
	#cardsV2 .preisContent > span:first-child span {
		/*font-size: .75em;*/
		font-size: clamp(12px, 1.06667em, 1.06667em);
	}
	#cardsV2 .preisContent > span:first-child small {
		font-size: .8em;
	}
	#cardsV2 .imgs > .logo {
		width: 60%;
	}

}
@media (max-width: 768px) {
	#cardsV2, #cardsV2 * {
		font-size: clamp(13px, 2.0869vw, 1em);
	}
	#cardsV2 .card {
		width: calc(100% - 2.25em);
	}
	#cardsV2 .cardContent {
		font-size: .8125em;
	}
	#cardsV2 .preisContent {
		flex-flow: row wrap;
		gap: 0 .5em;
	}
	#cardsV2 .preisContent > span:last-child b {
		font-size: 1.84615em;
	}
	#cardsV2 .cardContent {
		grid-template-columns: 60% 40%;
		grid-template-rows: auto auto 5em;
		grid-template-areas: "details imgs"
							 "details preisContent"
							 "details konfiBtn";
	}
}
@media (max-width: 500px) {

	#cardsV2, #cardsV2 * {
		font-size: clamp(13px, 3.2vw, 1em);
	}
	#cardsV2 .card {
		margin: 2em 0;
		width: 100%;
	}
	#cardsV2 {
		margin-bottom: 4em;
	}
	#cardsV2 .cardContent {
		grid-template-columns: 100%;
		/*grid-template-rows: auto auto auto 5em;*/
		grid-template-rows: auto;
		/*grid-template-areas: "details imgs" "details preisContent" "details konfiBtn";*/
		grid-template-areas: "imgs"
							 "details"
							 "preisContent"
							 "konfiBtn";
	}
	#cardsV2 .details .stoffe {
		border-bottom: 2px solid #e4e4e4;
	}
	#cardsV2 .preisContent {
		flex-flow: row;
		align-items: center;
	}
	#cardsV2 .preisContent > span:last-child b {
		font-size: 1.4em;
	}
	#cardsV2 .konfiBtn {
		margin: auto;
		padding: 1em;
	}
	#cardsV2 .konfiBtn span {
		font-size: 1.25em;
	}
	#cardsV2 .modelle li {
		gap: .75em;
	}
	#cardsV2 .details, #cardsV2 .preisContent {
		padding: 0 1em;
	}

}


.seo.farbuebersicht li.weiss { background-image:url(/bilder/seo/tropfen-weiss.svg)}
.seo.farbuebersicht li.grau { background-image:url(/bilder/seo/tropfen-grau.svg)}
.seo.farbuebersicht li.beige { background-image:url(/bilder/seo/tropfen-beige.svg)}
.seo.farbuebersicht li.gelb { background-image:url(/bilder/seo/tropfen-gelb.svg)}
.seo.farbuebersicht li.orange { background-image:url(/bilder/seo/tropfen-orange.svg)}
.seo.farbuebersicht li.rot { background-image:url(/bilder/seo/tropfen-rot.svg)}
.seo.farbuebersicht li.violett { background-image:url(/bilder/seo/tropfen-violett.svg)}
.seo.farbuebersicht li.blau { background-image:url(/bilder/seo/tropfen-blau.svg)}
.seo.farbuebersicht li.gruen { background-image:url(/bilder/seo/tropfen-gruen.svg)}
.seo.farbuebersicht li.braun { background-image:url(/bilder/seo/tropfen-braun.svg)}
.seo.farbuebersicht li.schwarz { background-image:url(/bilder/seo/tropfen-schwarz.svg)}
.seo.farbuebersicht li.rosa { background-image:url(/bilder/seo/tropfen-rosa.svg)}
.seo.farbuebersicht li.silber { background-image:url(/bilder/seo/tropfen-silber.svg)}
.seo.farbuebersicht li.holzoptik { background-image:url(/bilder/seo/tropfen-holzoptik.svg)}


.uebersichtKategorien{
	display: flex;
	margin-bottom: 5em;
	justify-content: space-between;
}
	.uebersichtKategorien .mass, .uebersichtKategorien .fertig{
		display: flex;
		flex-direction: column;
		width: 48%;
	}
		.uebersichtKategorien .mass{
			background: transparent linear-gradient(180deg, rgba(241,135,25,0.05) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
			border-top: 3px solid #FACF00;
		}

		.uebersichtKategorien .fertig{
			background: transparent linear-gradient(180deg, rgba(160,185,222,0.05) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
			border-top: 3px solid #0E0E0F;
		}

		.uebersichtKategorien .uebersichtKategorienHeader{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.5em 1em;
			font-weight: 600;
			font-size: 1.1em;
		}
			.uebersichtKategorien .uebersichtKategorienHeader img{
				max-width: 2.5em;
			}
			.uebersichtKategorien .mass .uebersichtKategorienHeader img{
				box-shadow: 0 3px 6px rgba(0,0,0,0.15);
				border-radius: 5px;
			}

		.uebersichtKategorien .kategorien{
			display: grid;	
			grid-template-columns: repeat(3, minmax(120px, 200px));
			grid-gap: 1em;
			justify-content: space-around;
		}
			.uebersichtKategorien .kategorien a{
				box-shadow: 0px 3px 6px #00000029;
				border-radius: 4px 4px 0 0;
				color: #444444;
				text-decoration: none;
				display: flex;
				flex-flow: column;
			}
				.uebersichtKategorien .kategorien .kategoriebez{
					padding: 1.5em 1em;
					font-weight: 400;
					display: flex;
					height: 100%;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
				}

			.uebersichtKategorien .kategorien img{
				max-width: 100%;
			}

			@media (max-width: 1500px) {
					.uebersichtKategorien{
						flex-direction: column;
						align-items: center;
					}
					.uebersichtKategorien .mass, .uebersichtKategorien .fertig{
						width: 70%;
						margin: 2em;
					}
			}
			@media (max-width: 768px) {
					.uebersichtKategorien .mass, .uebersichtKategorien .fertig{
						width: 100%;
					}
					.uebersichtKategorien .kategorien{
						grid-template-columns: repeat(auto-fit, minmax(120px, 200px));
					}
			}	
			@media (max-width: 500px) {
					.uebersichtKategorien .kategorien{
						grid-template-columns: repeat(auto-fit, 120px);
					}				
			}

			

  .artikel_liste * {box-sizing:border-box;}

  .artikel_liste {
  	display:flex;
  	justify-content: flex-start;
  	-webkit-justify-content: flex-start;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
  	margin-bottom: 0;
  }

  .artikel_liste .artikelbox {
  	width: calc(24.9% - 15px);
  	margin-bottom: 2em;
  	margin-right:20px;
  	position: relative;
  	max-width: 350px;
  	min-width: 100px;
  }

  .artikel_liste .artikelbox_modell {
  	width: calc(24.9% - 15px);
  	margin-bottom: 2em;
  	margin-right:20px;
  	position: relative;
  	max-width: 260px;
  	min-width: 150px;
  }

  .artikel_liste .artikelbox.empty {
  	margin: 0;
  }

  .boxZweispaltig .artikelbox {
  	flex: 1 1 45%;
  	margin-right: 20px !important;

  }

  .artikelbox:nth-child(4n) {
  	margin-right:0;
  }

  .artikel_liste .artikelbox span {
  	/*font-size:12pt;*/
  	font-size: 1.2em;
  	padding-bottom: 0.5em;
  	display: block;
  }

  .artikel_liste .artikelbox span.hidden {
  	font-size: inherit;
  	padding-bottom: 0;
  	display: inline-block;
  }

  .artikel_liste .artikelbox .box_wrapper {
  	position:relative;
  	display: block;
  }

  .artikel_liste .artikelbox .box_wrapper > img {
  	width:100%;
  }

  .artikel_liste .artikelbox .box_wrapper > .artikel_liste_button {
  	bottom:1.25em;
  	right:1em;
  	background-color: #fff;
  	color:#000;
  	position:absolute;
  	padding: 0.5em 1em;
  	text-align:center;
  	transition: background 0.25s, color 0.25s;
  }

  .artikel_liste .artikelbox .box_wrapper > .artikel_liste_button:hover {
  	background: #444;
  	color: #fff;
  }

  .artikel_liste .artikelbox_modell .box_wrapper {
  	position:relative;
  	display: block;
  }

  .artikel_liste .artikelbox_modell .box_wrapper > img {
  	width:100%;
  }

  .artikel_liste .artikelbox_modell .box_wrapper > .artikel_liste_button {
  	bottom:1.25em;
  	right:1em;
  	background-color: #fff;
  	color:#000;
  	position:absolute;
  	padding: 0.5em 1em;
  	text-align:center;
  	transition: background 0.25s, color 0.25s;
  }

  .artikel_liste .artikelbox_modell .box_wrapper > .artikel_liste_button:hover {
  	background: #444;
  	color: #fff;
  }

  section.spalten {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      column-gap: 40px;
  }
  section.spalten article {
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;*/
      margin-bottom: 2em;

  }
    section.spalten article.pageBreakAuto {
      -webkit-column-break-inside: auto;
      page-break-inside: auto;
      break-inside: auto;
    }

        section.spalten article p {
          margin-top: 0;
          margin-bottom: 2em;
        }

  .SeoVideo{
  	width:100%;
  	height:20em;
  }


  .slider_banner .seo_ribbon_wrapper > img{
  		min-height: 300px;
  		max-height: 400px;
  }

  .glide__slide img, .kategorieuebersicht img{
  		vertical-align: bottom;
  }
  .pfeil_slider{
  		position: absolute;
  		top: calc(50% - 1.5em);
  		width: 3em;
  		height: 3em;
  		background-position: 50%;
  		background-repeat: no-repeat;
  		background-size: cover;
  }
  	.pfeil_slider.pfeil_slider_links{
  		transform: rotate(180deg);
  	}

  .slider_banner .pfeil_slider{
  		background-color: #b1b7bb;
  		border-radius: 100%;
  		background-image: url(/bilder/slider_weiss.svg);
  }
  		.slider_banner .pfeil_slider.pfeil_slider_rechts{
  				right: 2em;
  				cursor: pointer;
  		}
  		.slider_banner .pfeil_slider.pfeil_slider_links{
  				left: 2em;
  				cursor: pointer;
  		}



  .karussell .pfeil_slider{
  		background-image: url(/bilder/slider_blau.svg);
  }
  		.karussell .pfeil_slider.pfeil_slider_rechts{
  				right: 0;
  		}
  		.karussell .pfeil_slider.pfeil_slider_links{
  				left: 0;
  		}


  .seo_ribbon_wrapper{
  	position: relative;
  	background-size: cover;
  	height: 350px;
  	background-position: 50%;
  }
  	.seo_ribbon_wrapper .seo_ribbon{
  			position: absolute;
  			right: 0;
  			top: 0;
  			height: 100%;
  			width: 42%;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			flex-direction: column;
  			padding-right: 5em;
  	}
  		.seo_ribbon .seo_ribbon_logo{
  			width: 75%;
  			margin: 0 auto;
  		}
  		.seo_ribbon .seo_ribbon_text{
  				margin-bottom:1em;
  				text-align: center;
  				font-weight: 300;
  		}
  			.seo_ribbon .seo_ribbon_text .haupttext{
  					font-size: 1.8em;
  					font-style: italic;
  					font-weight: 400;
  			}
  		.seo_ribbon .button.highlight{
  				font-size: 1em;
  				border-radius: 6px;
  				padding: 1em 2em;
  				max-width: 80%;

  		}
  	.seo_ribbon_wrapper .abPreis{
  			position: absolute;
  			width: 7em;
  			height: 7em;
  			top: calc(50% - 3.5em);
  			right: 21.5em;
  			background-color: #3583f7;
  			border-radius: 100% 100% 0 100%;
  			padding: 1em;
  			font-weight: bold;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			flex-direction: column;
  	}
  		.seo_ribbon_wrapper .abPreis span{
  				font-size: 1.8em;
  		}
  	.seo_ribbon_wrapper .seo_ribbon_info{
  			position: absolute;
  			top: 0;
  			right: 20em;
  			background-color: #63bea6;
  			padding: 0.5em 1em;
  			font-weight: bold;
  	}




.fettMarkiert {
  font-weight: 500;
}



.farben {
  display: flex;
  flex-wrap: wrap;
}
  .farben a {
    text-decoration: none;
    color: #444;
    margin: 1em;
  }

.farbeEinzeln {
  display: flex;
  flex-direction: column;
  text-align: center;
}
  .farbeEinzeln img {
    width: 7em;
    height: 7em;
    border-radius: 50%;
    box-shadow: 0 3px 5px #A7A7A8;
    margin-bottom: 1em;
  }

.gradient {
  border: 0px solid black;
  border-radius: 50%;
  box-shadow: 0px 3px 6px #00000029;
  width: 7em;
  height: 7em;
  margin-bottom: 1em;
}
.gradientWeiss { background: transparent linear-gradient(180deg, #E7E7E7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; }
.gradientSilber { background: transparent linear-gradient(180deg, #BFBFBF 0%, #F0F0F0 100%) 0% 0% no-repeat padding-box; }
.gradientGold { background: transparent linear-gradient(180deg, #FFD700 0%, #B8860B 100%) 0% 0% no-repeat padding-box; }
.gradientGrau { background: transparent linear-gradient(180deg, #EAEAEA 0%, #9A9A9A 100%) 0% 0% no-repeat padding-box; }
.gradientSchwarz { background: transparent linear-gradient(180deg, #464444 0%, #0C0B0B 100%) 0% 0% no-repeat padding-box; }
.gradientBeige { background: transparent linear-gradient(180deg, #FCE0AC 0%, #E6BF77 100%) 0% 0% no-repeat padding-box; }
.gradientBraun { background: transparent linear-gradient(180deg, #984F10 0%, #482304 100%) 0% 0% no-repeat padding-box; }
.gradientRot { background: transparent linear-gradient(180deg, #FB2D41 0%, #BF0012 100%) 0% 0% no-repeat padding-box; }
.gradientOrange { background: transparent linear-gradient(180deg, #FE903F 0%, #DB4100 100%) 0% 0% no-repeat padding-box; }
.gradientGelb { background: transparent linear-gradient(180deg, #FEDC37 0%, #EBBF00 100%) 0% 0% no-repeat padding-box; }
.gradientGruen { background: transparent linear-gradient(180deg, #0A6700 0%, #10AD00 100%) 0% 0% no-repeat padding-box; }
.gradientBlau { background: transparent linear-gradient(180deg, #2D65EB 0%, #0033AD 100%) 0% 0% no-repeat padding-box; }
.gradientLila { background: transparent linear-gradient(180deg, #AB0C9F 0%, #5B0554 100%) 0% 0% no-repeat padding-box; }
.gradientRosa { background: transparent linear-gradient(180deg, #FEA9D9 0%, #C1478B 100%) 0% 0% no-repeat padding-box; }

.modelle {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 2em 0;
}

.modellEinzeln {
  display: flex;
  flex-direction: column;
  max-width: 16em;
  margin: 0.5em;
  margin-bottom: 2em;
  box-shadow: 0 0 5px #A7A7A8;
  text-decoration: none;
}
  .modellEinzeln img {
    padding: 0 3em 1em 3em;
  }

.modellTitel {
  text-align: center;
  font-weight: 500;
  font-size: 1.067em;
}
  .modellTitel span {
    font-size: 0.75em;
    font-weight: lighter;
  }

.modellText {
  display: flex;
  flex-direction: column;
  padding: 1em;
  height: 100%;
  font-weight: 300;
}
  .modellText p {
    padding: 0;
    margin: 0;
    font-size: 0.933em !important;
  }

.konfiguratorModelle a img {
  width: 200px;
  height: 200px;
}

.konfiguratorModelle a span {
  max-width: 200px;
}

.hinweis {
  display: flex;
  background-color: #F2F2F4;
  color: #2F2F2F;
  padding: 2em 4em;
  margin: 2em 10%;
}
  .hinweis span {
    padding-right: 1em;
    font-weight: 500;
  }
  .hinweis p {
    color: #2F2F2F;
    padding: 0;
    margin: 0;
  }

.box_inhalt {
  margin-bottom: 5em;
}
  .box_inhalt p + p {
    margin-top: 0.5em !important;
  }
  .box_inhalt > p {
    margin: 1em 0;
  }

.box_zweispaltig {
  width: 100%;
  display: flex;
  flex-direction: row !important;
}
  .box_zweispaltig div {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
  }
    .box_zweispaltig div:first-child {
      padding-right: 3em;
    }
    .box_zweispaltig div h3 {
      font-size: 1.6em;
      font-weight: normal !important;
    }
    .box_zweispaltig div p {
      margin: 0;
    }
    .box_zweispaltig div .box_zweispaltig { /* wenn noch eine zweispaltige Box in einer zweispaltigen Box drin ist, ist der Abstand zu gro? */
      margin: 0;
    }
    .box_zweispaltig div .box_zweispaltig div:first-child {
      padding-right: 1em;
    }

.box_einspaltig {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  margin: 0 0.5em 2em 0.5em;
}



ol li {
	margin-bottom: 15px;
}

ol li::marker {
	font-weight: bold;
}

  .box_einspaltig img {
    padding: 1em 0;
  }

.box_mehrspaltig {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.inhalt_vertikal_zentriert div {
  /* muss display: flex sein! */
  justify-content: space-evenly;
}

.filterButton {
  padding-left: 7em !important;
  padding-right: 7em !important;
  color: #FFF !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}
/* so viel mit !important zu arbeiten ist eigentlich kacke, aber anders gehts net (geht sicher, aber nicht ohne jetzt zu viel Zeit daf?r zu verschwenden) */
  .filterButton img {
    margin-right: 0.5em;
  }

.garLightButtons {
	width: 80%;
	margin-left: 10%;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: 50px 50px;
	grid-gap: 17px;
}
  .garLightButtons a {
  	display: flex;
  	align-items: center;
  	justify-content: flex-start;
  	background: #F2F2F4;
  	width: 260px;
    text-decoration: none;
  }
  .garLightButtons img {
  	padding: 0 1em;
  }

.descIconMainbox {
	display: grid;
	grid-template-columns: 160px auto;
}

.descIconMainbox .descIconBox {
	display: flex;
	align-items: center;
}

.descIconMainbox .descIconBox div{
	width: 122px;
	height: 122px;
	background: #F2F2F4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.darkButton {
	width: 260px;
	height: 50px;
	display: grid;
	grid-template-columns: 180px auto;
	border: none;
	padding-left: 0;
	align-items: center;
	margin-top: 1em;
  background-color: #2F2F2F;
  color: white !important;
  text-decoration: none;
}

.darkButton span{
	width: 100%;
	text-align: right;
	font-size: 18px;
}


.darkButton img{
	margin-left: 20px;
}

.lammelenart {
	width: 100%;
	display: flex;
}

.lammelenart div{
	width: 20%;
	text-align: center;
}

.lammelenart img{
	max-width: 100%;
}

@media(max-width: 1275px) {
	.garLightButtons {
		grid-template-columns: auto auto;
		grid-template-rows: 50px 50px 50px;
	}
}

@media(max-width: 700px) {
	.lammelenart {
		flex-direction: column;
	}

	.lammelenart div{
		width: 100%;
		text-align: center;
	}
}

@media(max-width: 650px) {
	.garLightButtons {
		grid-template-columns: 100%;
		grid-template-rows: 50px 50px 50px 50px 50px 50px;
	}

	.garLightButtons a {
		width: 100%;
	}

	.descIconMainbox {
		display: grid;
		grid-template-columns:auto;
		grid-template-rows: auto auto;
	}

	.descIconMainbox .descIconBox {
		justify-content: center;
		margin-bottom: 15px;
	}
}


@media(max-width: 501px) {
  .artikel_liste.artikel_liste_mobil{
    display: none;
  }
  .artikel_liste .artikelbox {
    box-shadow: 0 3px 6px #00000029;
    max-width: 48%;
    margin: 1%;
    border-radius: 4px;
  }
  .artikel_liste .artikelbox span{
    display: none !important;
  }
  .artikel_liste .artikelbox .box_wrapper{
    text-decoration: none;
  }
  .artikel_liste .artikelbox .box_wrapper .box_wrapper_button_darueber{
    position: relative;
  }
  .artikel_liste .artikelbox .box_wrapper img{
    display: block;
    border-radius: 4px 4px 0 0;
  }
  .artikel_liste .artikelbox .box_wrapper .box_wrapper_button_darueber .artikel_liste_button_darueber{
    left: 0;
    right: 0;
    bottom: 4px;
  }
  .artikel_liste .artikelbox .box_wrapper > .artikel_liste_button{
    position: initial;
    display: block;
  }

  .artikel_liste .artikelbox .box_wrapper > .artikel_liste_button {
    font-size: 0.8em;
  }
}

@media(max-width: 350px) {
  .artikel_liste .artikelbox {
		max-width: 100% !important;
	}
}

@media (max-width: 1500px) {
    .artikel_liste {
      margin-top:0;
    }
    .artikelbox:nth-child(4n) {
      margin-right:0;
    }
    .artikel_liste .artikelbox {
      position: relative;
    }
}

@media (max-width: 1260px) {
    .artikel_liste .artikelbox {
        position: relative;
    }
    .artikelbox:nth-child(2n) {
        margin-right:0;
    }
    .artikel_liste .artikelbox {
      width: calc(50% - 10px);
      max-width: calc(50% - 10px);
    }
    .artikel_liste .artikelbox:nth-child(2n),
    .artikel_liste .artikelbox:nth-child(4n) {
      margin-right: 0;
    }
}

@media (max-width: 768px) {
    section.spalten {
      column-count: 1;
    }
    .artikel_liste .artikelbox:nth-child(2n) {
      margin-right: 0;
    }

    .artikel_liste .artikelbox .mass_icon{
        bottom: 6em;
    }
}

@media (max-width: 1024px) {
  #text_inhalt {
    width: 100%;
  }

  .mainRight {
    box-sizing: border-box;
    /* padding: 0 10%; */
  }

  .filterButton {
    display: none !important;
  }
}

@media (max-width: 800px) {
  #text_inhalt h1 {
    font-weight: 500;
    font-size: 1.2em;
  }
    #text_inhalt h1 span {
      font-size: 0.9em;
    }

  #text_inhalt h2, #text_inhalt h3 {
    font-size: 1em;
  }

  #text_inhalt p {
    font-size: 1em;
  }

  #topBanner {
    flex-direction: column;
  }

  .bannerGross  {
    width: 100%;
    height: 50vh;
  }

  .bannerKlein  {
    width: 100%;
    height: 40vh;
  }

  .bannerTitel {
    padding: 1.1em 0;
    font-size: 1.1em;
  }

  .bannerZweispaltig a {
    width: 100%;
  }
    .bannerZweispaltig a:first-child {
      width: 100%;
    }

  .box_zweispaltig {
    flex-direction: column !important;
  }
    .box_zweispaltig div:first-child {
      padding-right: 0;
    }
    .box_zweispaltig div h3 {
      font-weight: 500 !important;
    }

  .farben {
    justify-content: center;
  }

  .farbeEinzeln img, .farbeEinzeln .gradient {
    width: 4em;
    height: 4em;
  }

  .hinweis {
    flex-direction: column;
    padding: 1em 2em;
    margin: 1em 5%;
  }

  .bannerTitel img {
    padding: 5px;
    translate: 0px 10px;
  }

  .inhalt_vertikal_zentriert {
    margin: 3em 0;
  }
    .inhalt_vertikal_zentriert img {
      margin: 0 auto;
    }


  .slider_banner{
    display: none;
  }
}

@media (max-width: 500px) {
  #text_inhalt h1 {
      margin: 1.6em 0;
  }

  #topBanner a:first-child {
    margin-top: 0;
  }

  .box_inhalt {
    margin-bottom: 2em;
  }

  .box_banner {
    display: flex;
    flex-direction: column;
  }
    .box_banner p:first-child {
      order: 1;
    }
}




/* EventBanner */

  .eventcontainer{
    position: relative;
    width: 100%;
  }

  .eventcontainer .overLayer{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .eventcontainer .BackgroundImages img{
    width: 100%;
  }

  .eventcontainer .BackgroundImages .px_900{
    display: none;
  }

  .eventcontainer .BackgroundImages .px_500{
    display: none;
  }
  .eventcontainer .BackgroundImages .px_300{
	display: none;
  }
  @media (max-width: 900px) {
    .eventcontainer .BackgroundImages .full{
      display: none;
    }
    .eventcontainer .BackgroundImages .px_900{
      display: block;
    }
  }
  @media (max-width: 500px) {
    .eventcontainer .BackgroundImages .px_900{
      display: none;
    }
    .eventcontainer .BackgroundImages .px_500{
      display: block;
    }
  }
  @media (max-width: 300px) {
    .eventcontainer .BackgroundImages .px_500{
      display: none;
    }
    .eventcontainer .BackgroundImages .px_300{
      display: block;
    }
  }

/* Black Friday Stuff */

  .blackFridayContainer .overLayer .btn {
    position: absolute;
    display: block;
    background-color: #FACF00;
    left: 16.4%;
    bottom: 20.8%;
    width: 18.8%;
    height: 16.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000;
  }
  @media (max-width: 900px) {
    .blackFridayContainer .overLayer .btn {
      left: 11.6%;
      bottom: 18.5%;
      width: 24.1%;
      height: 16.5%;
    }
  }
  @media (max-width: 500px) {
    .blackFridayContainer .overLayer .btn {
      left: 50%;
      transform: translateX(-50%);
      bottom: 10.7%;
      width: 44.6%;
      height: 18.3%;
    }
  }