/*
		2020.01.28		Tim			neues, mobiles Layout fuer Plissees
		2020.02.14		Tim			.notfound hinzugefuegt
		08.04.2020		Tim			h1 sowie text_before bei Bildschirm < 500px wieder eingeschalten - Sortierung hinzugefuegt, dass im mobilen text_before unter dem Listing erscheint
		09.06.2020		Tim			Fuer ".artikel_alle .listDesignsBoxDetailsWrap" grid-column-Eigenschaften hinzugefuegt (ist ja jetzt grid-Listing und kein Flex-Listing mehr)
		10.06.2020		David S.	Klasse aktiv bei button_accessoires entfernt
		24.06.2020		Tim			Bei mobilem Layout .einzelartikel_trenner und .ambiente_alle in Sortierung mit reingenommen (hier hatte ich die order vergessen, somit waren die Boxen oben dran)
		20.07.2021		Tim			bei .ambienteZurVariation im Farbverlauf Farbe "transparnt" mit "rgba(255,255,255,0)" ersetzt. (Der Mac nimmt sonst gra als Grundfarbe an)
*/

/*neu carsten aus /kategorie/ambiente.css */

.notfound {
		display: none;
}
		.msg_notfound {
				color: #888888;
				font-style: italic;
				margin: 40px;
				text-align: center;
		}

		.msg_notfound_icon {		/* z.B. die Meldung mit dem Icon */
				color: #888888;
				font-style: italic;
				margin-left: 40px;
				margin-right: 40px;
				margin-top: 100px;
				margin-bottom: 40px;
				text-align: left;
				line-height: 2em;
				margin-left: 5em;
		}
				.msg_notfound_icon img {
						float: left;
						margin-right: 1em;
				}

.link_weitere {
		text-align: center;
		margin-right: 1em;
		margin-top: 2em;
		margin-bottom: 2em;
}
.hover_underline, .hover_underline_active {
				font-size: 10px;
				color: #888888;
				margin-left: 4px;
		}

				.hover_underline:hover {
						text-decoration: underline;
				}

		.hover_underline_active {
				color: #de8904;
		}


				.box_suche {
						text-align: right;
						position: absolute;
						right: 0;
						top: -35px;
				}
						.box_suche input[type="text"] {
								border-left: 1px solid #d2d2d2;
								border-top: 1px solid #d2d2d2;
								border-bottom: 1px solid #d2d2d2;
								border-right: 0;
								color: #bbbbbb;
								font-size: 10px;
								width: 88px;
								padding: 4px;
								height: 13px;
						}
						.box_suche input[type="submit"], .box_suche button[type="submit"] {
								border-left: 0;
								border-top: 1px solid #d2d2d2;
								border-bottom: 1px solid #d2d2d2;
								border-right: 1px solid #d2d2d2;
								vertical-align: bottom;
								background-color: #f4f4f4;
								background-image: url(/i/stoffuebersicht_lupe.png);
								background-repeat: no-repeat;
								background-position: 3px 3px;
								width: 22px;
								height: 23px;
						}
.artikel_alle {
		/* dran denken, dass nicht alle Seiten die listing.css haben --- https://www.plissee-held.de/top/fensterbilder/fensterbilder.html hat diese css nicht */
		margin: 1em 2em;
		display: flex;
}

		.artikel_alle .ajax_lade {
				visibility: hidden;
				position: absolute;
				top: -30px;
				right: 10px;
		}
		@media (max-width: 500px) {		/* mobiles Layout */
				.artikel_alle .ajax_lade {
						position: fixed;
						top: calc(50% - 5vw);
						left: calc(50% - 5vw);
						right: auto;
						z-index: 99;
						width: 10vw;
				}
		}


.artikel_alle .mainRight {
	margin-bottom: 2em;
	display: flex;			/* Tim: um die Reihenfolge der einzelnen Boxen im mobilen Layout zu veraendern */
	flex-direction: column;
	width: calc( 92% - 250px); /*Restbreite (abzüglich Abstände und Filter)*/
	margin-left: 7%;
}
.layout_option_header_schmal .artikel_alle .mainRight {
		/* padding-left: 0; */
}
.layout_option_header_schmal .auswahl_eingrenzen {
	/*width: 12%;*/
}

		.artikel_alle .mainRight > h1 {
				margin-top: 0;
				padding-bottom: 25px;
				line-height:0.8em;
		}

		.artikel_alle h2 {
				margin-top: 0;
				margin-bottom: 0;
		}

.artikel_alle .listing {
		/*margin-bottom: 3em;		 Abstand zum Trenner-Banner */
}

		/*
		#listing_artikel{

				/* flex als fallback-loesung zum grid * /
				display: flex;
				flex-wrap: wrap;
				/*justify-content: center;* /

				/* css grid layout * /
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));		/* .stoffe .blockListing, .gardinenstore .blockListing, .tischdecken .blockListing, .kissen .blockListing * /
				grid-column-gap: 40px;

				/* nicht mehr im grid (gehoerte zum flex)
				margin-left: -0.95%;
				margin-right: -0.95%;
				* /
		}
		*/
		/*	Listing neu			*/
		
		.xListing {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			grid-gap: 2em;
			margin-bottom: 1em;
		}
		.xListing h1 {
			grid-column: 1 / -1;
		}
		.listingBox, .listingBox *:not(strong) {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			background-color: #fff;
		}
		.listingBox {
			display: flex;
			flex-direction: column;
			max-width: 300px;
			min-width: 190px;
			width: 100%;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
			text-align: center;
			margin: auto;
			font-size: 0.85em;
		}
		.listingBox > a {
			text-decoration: none;
			color: #0E0E0F;
			
		}

		.listingBox .herstellerLogo {
			padding: 0;
			margin-bottom: -0.5em;
		}
		.listingBox .herstellerLogo object {
			width: 1.5em;
			height: 1.5em;
			margin-top: -0.75em;
		}
		.listingBox .artikelBez {
			font-weight: 100;
			line-height: 1.5em;
			height: 60px;
			overflow: hidden;
			padding: 0;
			border: 10px solid #fff;
		}

		.artikelBild .kennzeichnungSale {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #FACF00;
			height: 2.0625em;
			font-weight: normal;
		}

		.listingBox .artikelBild {
			display: flex;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		.listingBox.listingBox1 .artikelBild img {
			max-width: 112px;
		}
		.listingBox .artikelBild img {
			max-width: 100%;
			max-height: 350px;
			margin: auto;
		}
		.listingBox .artikelKonfi {
			display: flex;
			padding: 10px;
			font-size: larger;
		}
		.listingBox .artikelKonfi span {
			padding: 15px 0;
		}
		.listingBox .artikelKonfi ~ span {
			padding: 10px;
			line-height: 20px;
			display: flex;
			justify-content: center;
			background: #F2F2F4;
			font-weight: 400;
		}
			.listingBox .artikelKonfi ~ span::before {
				width: 1.3em;
				margin-right: 1em;
				display: block;
				background-image: url(/i/stoffuebersicht/icon_details.svg);
				background-size: 100%;
				content: '';
				background-position: 50%;
				background-repeat: no-repeat;
			}		
		.listingBox .artikelKonfi span:first-child {
			flex: 1 1 70%;
			background: #F2CB05 url("konfigurieren.svg") no-repeat 0.5em 50%;
			background-size: 1.2em;
			margin-right: 5px;
			text-align: left;
			padding-left: 2em;
			letter-spacing: -0.75px;
		}
		.listingBox .zumArtikel {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			text-align: center;
		}
		.listingBox .zumArtikel > span {
			width: calc(40% - 5px);
			margin-left: 5px;
			display: block;
			padding: 10px;
		}
		.listingBox .zumArtikel > span:first-child {
			width: calc(60% - 5px);
			margin-left: 0;
			margin-right: 5px;
			background: #000;
			color: #fff;
		}
		.listingBox .zumArtikel .preisContainer{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding-top: 0;
			padding-bottom: 0;
		}
		.listingBox .zumArtikel .preisContainer > span:first-child{
			font-size: 10px;
			line-height: 1.4em;
			text-decoration: line-through
		}
		.listingBox .zumArtikel .preisContainer > span:nth-child(2) {
			line-height: 1.4em;
		}
		/*
		.listingBox .artikelKonfi span:last-child {
			flex: 1 1 30%;
			margin-left: 5px;
		}

		.listingBox a:last-child {
			background: #F2F2F4;
			font-size: smaller;
			display: block;
		}
		*/
		/*
		.listingBox a:first-child span {
			background: url("details.svg") no-repeat 0 50%;
			background-size: 1.2em;
			padding: 1em 5px 1em 1.5em;
			display: block;
		}
		*/
		/*
		.listingBox a:last-child {
			background: url("details.svg") no-repeat 0 50%;
			background-size: 1.2em;
			padding: 15px 15px 15px 2em;
			display: block;
			position: absolute;
			left: 10px;
			bottom: 50px;
			z-index: 20;
			
			flex: 1 1 70%;
			background: #F2CB05 url("/i/stoffuebersicht/icon_konfigurieren.svg") no-repeat 0.5em 50%;
			background-size: 1.2em;
			text-align: left;
			padding-left: 2em;
			letter-spacing: -0.75px;
			font-size: larger;
		}
		*/
		@media only screen and (max-width: 768px) {
			/*
			.listingBox .artikelKonfi span:first-child {
				font-size: smaller;
			}
			*/
		}
		
		/*	Listing neu Ende	*/
		/*
		.gardinenschal #listing_artikel, .zubehoer #listing_artikel, .flaeche #listing_artikel {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				margin-left: -0.95%;
				margin-right: -0.95%;
		}
		*/
		.gardinenschal #listing_artikel, .gardinenschal #listing_artikel *, .zubehoer #listing_artikel, .zubehoer #listing_artikel *, .flaeche #listing_artikel, .flaeche #listing_artikel * {
			box-sizing: border-box;
		}
		#listing_artikel.listing_box2 {		/* 2 Bilder pro Artikel */
				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				grid-column-gap: 30px;
		}
/*
		#listing_artikel::after{
			content: '';
			flex-grow: 1000000;
		}
*/
		.artikel_alle .listing .farbbox {
				margin-right:2.0%;
				width: 13px;
				height: 13px;
				margin-left:0;
				cursor:pointer;
				background-size: 100%;
				background-repeat: no-repeat;
		}
		.artikel_alle .listing .farbbox.weitere {
				width: auto;
				height: 11px;
				font-size:.85em;
				font-style: italic;
				line-height:18px;
		}
/*
test carsten anzeige aller farbboxen bei gardinenschal
		.artikel_alle .listing .farbbox:nth-child(8n) {
				margin-right:0;
				border:none;
		}
*/

		.artikel_alle .listing .artikelbox {

				margin-bottom: 3em;
				position: relative;
				vertical-align: top;
				flex: 1 1 180px;

				/*  nicht mehr im grid layout
				padding-left: 20px;
				padding-right: 20px;
				*/
		}
		

		
		.artikelbox.nichtVerfuegbar::after {
			content: "Dieser Artikel ist derzeit nicht bestellbar";
			position: absolute;
			left: 0;
			top: 30%;
			font-size: 24px;
			color: #fff;
			background-color: #f00;
			font-weight: bolder;
			text-align: center;
			border-radius: 10px;
			padding: .5em;
		}



		.artikel_alle .listing a {
				text-decoration: none;
				color: #444444;
				display:inline-block;
				width: 100%;
		}
		.zurueckZumHauptbild {
							position:absolute;
							right:0;
							top:0;
							display:none;
						}
		.artikelbox.konfiartikel .stoffbildToggler, .artikelbox.standardartikelNeu .stoffbildToggler {
				display:none;
		}
		@media screen and (pointer: coarse) {
			/*
			.gardinenschal .artikelbox.konfiartikel .zurueckZumHauptbild {
							display:block
						}*/
			 /* .hauptbild.konfiartikel, .hauptbild.standardartikelNeu*/
			.gardinenschal .artikel_alle .listing .artikelbox.konfiartikel:before, .gardinenschal .artikel_alle .listing .artikelbox.standardartikelNeu:before {
				/*display:block;
				content:"";*/
				left:calc(50% - 25px);
				top:10px;
				width:50px;
				height:50px;
				background-image:url(/xArtikelsystem/bilder/add_circle_outline_black_24dp.svg);
				background-size:cover;
				position: absolute;
				z-index:6;
			}
			.artikelbox.konfiartikel .stoffbildToggler, .artikelbox.standardartikelNeu .stoffbildToggler {
				display:inline-block;
				left:calc(50% - 25px);
				top:calc(50% - 80px);
				width:50px;
				height:50px;
				background-image:url(/xArtikelsystem/bilder/add_circle_outline_black_24dp.svg);
				background-size:cover;
				position: absolute;
				z-index:6;
                border-radius:100%;
			}
			@media (max-width: 769px) {
				.artikelbox.konfiartikel .stoffbildToggler {
					/*right: 50px;
					left: unset;*/
				}
			}
			@media (max-width: 501px) {
				.artikelbox.konfiartikel .stoffbildToggler {
					/*left: unset;
					right:0;*/
				}
			}
			.artikelbox.konfiartikel.stoffBildaktiv .stoffbildToggler, .artikelbox.standardartikelNeu.stoffBildaktiv .stoffbildToggler {
				background-image:url(/xArtikelsystem/bilder/remove_circle_outline_black_24dp.svg);
			}
			/* .hauptbild.konfiartikel*/
			.gardinenschal .artikel_alle .listing .artikelbox.konfiartikel.stoffBildaktiv:before, .gardinenschal .artikel_alle .listing .artikelbox.standardartikelNeu.stoffBildaktiv:before {
				/*content:"";*/
				background-image:url(/xArtikelsystem/bilder/remove_circle_outline_black_24dp.svg);
				font-size: 34px;
				line-height: 19px;
				text-indent: 7px;
			}
			.gardinenschal .artikel_alle .listing .artikelbox.konfiartikel a:first-child {
				/*pointer-events:none;*/
			}

			/*
			.gardinenschal .artikelbox.konfiartikel:hover img:first-child, .gardinenschal .artikelbox.konfiartikel:active img:first-child {
				visibility:hidden;
			}
			.gardinenschal .artikelbox.konfiartikel:hover img.hoveronly, .gardinenschal .artikelbox.konfiartikel:active img.hoveronly {
				visibility:visible!important;
				display:block!important;
			}
			.gardinenschal .artikelbox.konfiartikel:hover .hauptbild.konfiartikel:before, .gardinenschal .artikelbox.konfiartikel:active .hauptbild.konfiartikel:before {
				display:none!important;
			}
			*/
			.gardinenschal .artikelbox.konfiartikel.stoffBildaktiv img:first-child, .gardinenschal .artikelbox.standardartikelNeu.stoffBildaktiv img:first-child {
				visibility:hidden;
			}
			.gardinenschal .artikelbox.konfiartikel.stoffBildaktiv img.hoveronly, .gardinenschal .artikelbox.standardartikelNeu.stoffBildaktiv img.hoveronly {
				visibility:visible!important;
				display:block!important;
/*				transform: perspective(700px) translate3d(50px, 100px, 50px);
							top: -100px;
							left: -100px;*/
			}
			/*
			.gardinenschal .artikelbox.konfiartikel:hover .hauptbild.konfiartikel:before, .gardinenschal .artikelbox.konfiartikel:active .hauptbild.konfiartikel:before {
				display:none!important;
			}
			*/
		}

				.artikel_alle .listing .hauptbild {
						position:relative;
						text-align: center;

						width: 100%;
						padding: 0;
						border:1px solid transparent;


				}
				.gardinenschal .artikel_alle .listing .artikelbox.konfiartikel .hauptbild, .gardinenschal .artikel_alle .listing .artikelbox.standardartikelNeu .hauptbild, .flaeche .artikel_alle .listing .artikelbox.konfiartikel .hauptbild, .flaeche .artikel_alle .listing .artikelbox.standardartikelNeu .hauptbild {
					overflow:hidden;
				}
				.gardinenschal .artikel_alle .blockListing .listing .hauptbild, .zubehoer .artikel_alle .blockListing .listing .hauptbild, .flaeche .artikel_alle .blockListing .listing .hauptbild {

						width: auto;
					}
				.artikel_alle .listing div.listingtitle {
					padding:0;
					width: 100%;
					text-align: left;
					position:relative;
				}
				.artikel_alle .listing div.listingtitle img {
					display:none;
					position:absolute;
					left:42%;
					bottom:-4px;
					z-index: 99999;
                    width: 30px;
				}
				.artikel_alle .listing .listingtitle.hervorgehoben img {
					display:block;

				}
						.artikel_alle .listing .hauptbild img {
								/*display: block;*/
								width: 100%;
						}
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild > img:first-child, .gardinenschal .artikel_alle .blockListing .listing .hauptbild > img.hoveronly, .zubehoer .artikel_alle .blockListing .listing .hauptbild > img:first-child, .flaeche .artikel_alle .blockListing .listing .hauptbild > img:first-child {
							max-height: 350px;
							width: auto;
							margin: auto;
							
						}

						.artikel_alle .listing .hauptbild .listing_logo {
								width: 40%;
								position: absolute;
								bottom: -3px;
								right: 0;
								opacity: 0.85;

						}
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild .listing_logo, .zubehoer .artikel_alle .blockListing .listing .hauptbild .listing_logo {
							width: unset;
							max-height:30px;
							bottom: -3px;
							right: 0;
						}
						
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild img.hoveronly {
							/*display:none;*/
							transition: all .5s ease-in-out;
							visibility:hidden;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
						}
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild img.first-child {
							transition: visibility .5s ease-in-out;
							opacity: 1; 
   transition: opacity 1s;
						}
					@media screen and (pointer: fine) {
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild.konfiartikel:hover img:first-child, .gardinenschal .artikel_alle .blockListing .listing .hauptbild.standardartikelNeu:hover img:first-child {
							/*display:none;*/
							visibility:hidden;
							opacity: 0; 
   transition: opacity 1s;
						}
						.gardinenschal .artikel_alle .blockListing .listing .hauptbild.konfiartikel:hover img.hoveronly, .gardinenschal .artikel_alle .blockListing .listing .hauptbild.standardartikelNeu:hover img.hoveronly {
							display:block;
							visibility:visible;
							/*transform: perspective(700px) translate3d(50px, 100px, 50px);
							top: -100px;
							left: -100px;*/
							opacity: 1; 
   transition: opacity 1s;
						}
					}


				@media (max-width: 800px) {
				/*
				.artikel_alle .listing .artikelbox {
						flex: 1 1 160px;
				}
				.gardinenschal .artikel_alle .listing .artikelbox {
					max-width: 40%;
				}
				
				.artikel_alle .listing, #listing_artikel {
						grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
						grid-column-gap: 30px;
				}
				*/
				.gardinenschal #listing_artikel, .flaeche #listing_artikel{
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						margin-left: -0.95%;
						margin-right: -0.95%;
				}
				
				.artikel_alle .listing.listing_box2, #listing_artikel.listing_box2 {		/* 2 Bilder pro Artikel */
						grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
						grid-column-gap: 30px;
				}
		}
		@media (max-width: 500px) {
				.artikel_alle .mainRight .call_filter_mobile {
						order: 1;
				}
				.artikel_alle .mainRight .blockListing {
						order: 2;
				}
				.artikel_alle .mainRight .einzelartikel_trenner {
						order: 3;
				}
				.artikel_alle .mainRight .ambiente_alle {
						order: 4;
				}
				.artikel_alle .mainRight h1 {
						order: 5;
				}
				  .artikel_alle .mainRight #text_before
				, .artikel_alle .mainRight .text_before
				{
						order: 6;
				}
				  .artikel_alle .mainRight #text_after
				, .artikel_alle .mainRight .text_after
				{
						order: 7;
				}


				.artikel_alle .listing .artikelbox {
						/*flex: 1 1 110px;*/
						width: auto;
						margin-bottom: 1em;
				}
				.gardinenschal .artikel_alle .blockListing .listing .hauptbild > img:first-child, .gardinenschal .artikel_alle .blockListing .listing .hauptbild > img.hoveronly, .flaeche .artikel_alle .blockListing .listing .hauptbild > img:first-child {
					max-height: 250px;
					width: initial;
					min-width: 80px;
					max-width: 100%;
				}
				.gardinenschal .artikel_alle .blockListing .listing .artikelbox, .gardinenschal .artikel_alle .listing .artikelbox, .zubehoer .artikel_alle .blockListing .listing .artikelbox, .zubehoer .artikel_alle .listing .artikelbox, .flaeche .artikel_alle .blockListing .listing .artikelbox, .flaeche .artikel_alle .listing .artikelbox {
					max-width: 46%;
				}
				.zubehoer .artikel_alle .blockListing .listing .artikelbox, .zubehoer .artikel_alle .listing .artikelbox {
					max-width: none;
				}
				/*
				.artikel_alle .listing, #listing_artikel {
						grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
						grid-column-gap: 20px;
				}
				*/
				.gardinenschal #listing_artikel, .gardinenschal .artikel_alle .listing {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						margin-left: 0;
						margin-right: 0;
				}
				.artikel_alle .listing.listing_box2, #listing_artikel.listing_box2 {		/* 2 Bilder pro Artikel */
						grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
						grid-column-gap: 20px;
				}
				
				.listingBox .artikelBild img{
						max-width: 50%;
				}
				
		}
				.artikel_alle .listing .listingtitle.hervorgehoben {

								font-size: 0;
								background:#fff;
						}
				.farbboxen_artikel_wrp {


					margin: 0;


				}

				.artikel_alle .listing h3.listingtitle {
					text-align:center!important;
					margin: 18px 20px;
				}
				.artikel_alle .listing .vorschauWeitere {
						float: left;
						margin-left: 5.7%;
						margin-right: 5.7%;
						display: block;
						text-align: center;
						width: 20%;
						font-weight: bold;
						font-size: 12pt;
						height: 9pt;
						line-height: 9pt;
				}
				.artikel_alle .listing div.listingtitle {
					min-height:36px;
					line-height:1.2em;
					vertical-align:middle;
                    font-size: .85em;
					-moz-hyphens: auto;
					-o-hyphens: auto;
					-webkit-hyphens: auto;
					-ms-hyphens: auto;
					hyphens: auto;
					word-wrap:break-word;
					padding-top: 5px;
				}
				.artikel_alle .listing .bottom {
						clear: both;
						padding-top: .15em;

				}
						.artikel_alle .listing .bottom .preis {
								font-weight: bold;
								text-align:left;
						}
						.artikel_alle .listing .bottom .preis {
                            text-align:center;
                            height: 32px;
                            border: 1px solid #f1f1f1;
                            background-image: url(/bilder/pfeil-rechts.svg);
                            background-repeat: no-repeat;
                            background-position: 94% center;
                            background-size: 6px 9px;
                            line-height: 32px;
							margin-top: 0;
							padding-top: 0;

                         }

						.artikel_alle .listing .bottom .preis.smallbox {
                            border: 1px solid #f1f1f1;
                            background-image:url(/bilder/pfeil-rechts.svg);
                            height: 32px;
                            line-height: 32px;
                            background-size: 6px 9px;
							background-position:94% center;
							background-repeat:no-repeat;}
						.artikel_alle .listing .bottom .preis.bigbox {
                                border: 1px solid #f1f1f1;
                                line-height:2em;
                                background-image:url(/bilder/pfeil-rechts.svg);
                                /*height:68px;*/
                                line-height: 32px;
								background-repeat:no-repeat;
                        }

						.artikel_alle .listing .bottom .preis_ergaenzend {
								font-weight: bold;
								text-align:left;
						}
						.artikel_alle .listing .bottom .preis_ergaenzend {
                            text-align:center;
                            height: 32px;
                            border: 1px solid #f1f1f1;
                            background-image: url(/bilder/pfeil-rechts.svg);
                            background-repeat: no-repeat;
                            background-position: 94% center;
                            background-size: 6px 9px;
                            line-height: 32px;
							margin-top: 0;
							padding-top: 0;

                         }

						.artikel_alle .listing .bottom .preis_ergaenzend.smallbox {
                            border: 1px solid #f1f1f1;
                            background-image:url(/bilder/pfeil-rechts.svg);
                            height: 32px;
                            line-height: 32px;
                            background-size: 6px 9px;
							background-position:94% center;
							background-repeat:no-repeat;}
						.artikel_alle .listing .bottom .preis_ergaenzend.bigbox {
                                border: 1px solid #f1f1f1;
                                line-height:2em;
                                background-image:url(/bilder/pfeil-rechts.svg);
                                height:68px;
                                line-height: 32px;
								background-repeat:no-repeat;
                        }







						.artikel_alle .listing .bottom .preis.bigbox span {
                                font-weight:normal;
                                text-decoration:underline;
                        }
						/*.artikel_alle .listing .bottom .preis .mass_button  {

									border: 1px solid #f1f1f1;
									padding: 5px 6px 5px 0;
									box-sizing: border-box;
									width: 100%;
									font-weight: normal;
									text-align: center;
									background-image:url(/bilder/pfeil-rechts.svg);
									background-size: 6px 9px;
									background-position:94% center;
									background-repeat:no-repeat;
									font-size:1em;
									height: 32px;
								}*/
								.artikel_alle .artikelbox .button_accessoires  {

									/*background-color: #f1f1f1;*/
									border: 1px solid #f1f1f1;
									padding: 5px 6px 5px 0;
									box-sizing: border-box;
									width: 100%;
									font-weight: normal;
									text-align: center;
									background-size: 6px 9px;
									background-position:94% center;
									background-repeat:no-repeat;
									font-size:1em;
									height: 32px;
								}
								.artikel_alle .listDesignsBoxDetails .accessoires .accessoire span.preis  {

									/*background-color: #f1f1f1;*/
									border: 1px solid #f1f1f1;
									padding: 5px 6px 5px 0;
									box-sizing: border-box;
									width: 100%;
									font-weight: normal;
									text-align: center;
									background-image:url(/bilder/pfeil-rechts.svg);
									background-size: 6px 9px;
									background-position:94% center;
									background-repeat:no-repeat;
									font-size:1em;
									height: 32px;
								}
								.artikel_alle .listing .bottom .preis .mass_button {
									font-weight: bold;
									text-decoration:underline;

								}
								.artikel_alle .artikelbox .button_accessoires {
									margin-top: 4px;
									cursor:pointer;
									background-image:none;
								}


										.artikel_alle .listing .bottom .preis .mass_button img{
											float: right;
											margin-left: 10px;
											margin-top: 3px;
											position: absolute;
											right: 2px;
										}



.einzelartikel_trenner {
		text-align: center;
		margin-top: 1em;
		margin-bottom: 1em;
		border-top: 1px solid #e6e6e6;
		position: relative;
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
}
		.einzelartikel_trenner img.trenner {
				max-width: 970px;		/* die eigentliche Bildgroesse */
				width: 100%;			/* so wird es responsive dynamisch gross */
				display: block;			/* so koennen die Margins zwischen diesem und dem darauf folgenden Element zusammenfallen */
				margin-left: auto;
				margin-right: auto;
				margin-top: 3em;
				margin-bottom: 2em;
		}
		.einzelartikel_trenner .text {
				font-size: 0.85em;
				margin: 2em;
		}
.artikelTrenner {
		border-top: 1px solid #e6e6e6;
		position: relative;
}
		  .artikelTrenner .icon_plus				/* Artikel-Trenner im Ambiente */
		, .einzelartikel_trenner .icon_plus		/* Ambiente-Artikel-Trenner in der Artikel-Uebersicht */
		{
				position: absolute;
				left: 50%;
				margin-left: -27px;
				top: -27px;
		}
.artikelEinzelseite {
		margin: 0;
}
		.artikelEinzelseite .linkAmbiente {
				display: block;
				margin-top: 5em;
		}
				.artikelEinzelseite .linkAmbiente img {
						max-width: 970px;		/* die eigentliche Bildgroesse */
						width: 100%;			/* so wird es responsive skalierbar */
				}
#fenster_warenkorb {
		width: 600px;
}
#fenster_warenkorb #fenster_warenkorb_top {
		padding: 40px;
}
		#fenster_warenkorb #fenster_warenkorb_top_left {
				float: left;
				width: 34%;
				position: relative;
		}
				#fenster_warenkorb #warenkorb_box_produktbild {
						/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
						max-height: 250px;
						max-width: 161px;
				}
				#fenster_warenkorb #warenkorb_icon_hinzugefuegt {
						position: absolute;
						top: 50%;
						margin-top: -27px;
						left: 50%;
						margin-left: -27px;
						display: none;
				}
		#fenster_warenkorb #fenster_warenkorb_top_right {
				float: right;
				width: 64%;
		}
				#fenster_warenkorb #warenkorb_box_status {
						border-bottom: 1px solid #e6e6e6;
						padding-bottom: 7px;
						margin-bottom: 20px;
						font-size: 1.2em;
				}
				#fenster_warenkorb #warenkorb_box_titel {
						font-size: 1.1em;
						font-weight: bold;
				}
				#fenster_warenkorb #warenkorb_box_groesse {

				}
				#fenster_warenkorb #warenkorb_box_preis {
						color: #888888;
				}
				#fenster_warenkorb #warenkorb_box_sonderwunsch_ueberschrift {
						display: none;		/* wird ueber Javascript angeschalten */
						margin-top: 2em;
				}
				#fenster_warenkorb #warenkorb_box_sonderwunsch {
						font-style: italic;
						color: #888888;
				}

		#fenster_warenkorb_top_buttons {
				margin-top: 28px;
		}
				#fenster_warenkorb_top_buttons .left {
						float: left;
						display: block;
						text-transform: uppercase;
						border: 2px solid #bf0008;
						height: 43px;
						line-height: 43px;
						color: #bf0008;
						padding-left: 1em;
						padding-right: 46px;
						cursor: pointer;
				}
				#fenster_warenkorb_top_buttons .right {
						float: right;
				}

#fenster_warenkorb #fenster_warenkorb_bottom {
		display: none;
		border-top: 5px solid #e6e6e6;
		padding: 2em;
}
		.fenster_warenkorb_bottom_ueberschrift {
				font-size: 13pt;
		}
		.warenkorbAehnlichArtikel {
				display: inline-block;
				width: 161px;
				vertical-align: top;
				margin-top: 1em;
				margin-right: 1em;
				color: #444444;
				text-decoration: none;
		}
				.warenkorbAehnlichArtikel img {
						width: 161px;
						border: none;
				}
				.warenkorbAehnlichArtikelTitel {
						font-size: 85%;
						text-align: center;
				}
				.warenkorbAehnlichArtikelPreis {
						font-size: 85%;
						font-weight: bold;
						text-align: center;
				}

#fenster_warenkorb .warenkorb {
		display: inline-block;
		cursor: pointer;
}

		#fenster_warenkorb .warenkorb .warenkorb_text, #fenster_warenkorb .warenkorb .warenkorb_symbol {
				display: inline-block;
				height: 43px;
				line-height: 43px;
				color: #444444;
		}
		#fenster_warenkorb .warenkorb .warenkorb_text {
				text-transform: uppercase;
				border-right: 1px solid #ffffff;
				width: 160px;
				text-align: center;
				background-color: #e6e6e6;
		}
		#fenster_warenkorb .warenkorb .warenkorb_symbol {
				padding-left: 12px;
				padding-right: 12px;
				background-size: auto 30px;
				background-repeat: no-repeat;
				background-position: center;
				width: 40px;
				background-color: #e6e6e6;
				background-image: url(bilder/wk_schwarz.svg);
		}
		#fenster_warenkorb .warenkorb.deaktiviert {
				opacity: 0.4;
				cursor: not-allowed;
		}
.ambienteZurVariation {
		width: 600px;
		margin: 30px;
		background-image: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #ffffff 100%);
}
		.ambienteZurVariation .ambiente {

		}

				.ambienteZurVariation .ambiente .titel {
						margin-top: 1em;
				}
				.ambienteZurVariation .ambiente .link {
						display: block;
						width: 180px;
						margin-left: auto;
						margin-right: 0;
						background-color: #888888;
						color: #ffffff;
						margin-top: 1em;
						padding: 0.8em;
						text-decoration: none;
				}

				.ambienteZurVariation .ambiente .box_image {
						width: 300px;
						margin-left: auto;
						margin-right: auto;
				}
				/* fuer das carousel */
				.ambienteZurVariation .ambiente.slick-slide {
						margin-top: 25px;
						/* border: 1px solid red; */
				}
				.ambienteZurVariation .ambiente.slick-slide img {
						height: 400px;
				}
				.ambienteZurVariation .ambiente.slick-slide .titel {
						display: none;
				}
				.ambienteZurVariation .ambiente.slick-slide .link {
						display: none;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active {
						margin-top: 0;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active img {
						height: 451px;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active .titel {
						display: block;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active .link {
						display: block;
				}
				.ambienteZurVariation .left {
						position: absolute;
						left: -25px;
						top: 200px;
						margin-top: -25px;
						cursor: pointer;
				}
				.ambienteZurVariation .right {
						position: absolute;
						right: -25px;
						top: 200px;
						margin-top: -25px;
						cursor: pointer;
				}
.link_Button {
			display: inline-block;
			text-decoration: none;
			margin: 0px 40px 40px 5em;
			cursor: pointer;
			color: #888888;
			border: 1px solid #e6e6e6;
			background-color: #f1f1f1;
			padding: 0.3em;
			font-size: 0.9em;
	}
			.link_Button:hover {
					color: #000000;
					border-color: #888888;
			}
			.link_Button:active {
					color: #000000;
					border-color: #888888;
					border-style: inset;
			}





#pflegeeigenschaften {
		margin-top:40px;
}

		#pflegeeigenschaften strong {
				margin-top: 4em;
				margin-bottom: 1em;
				font-size: 1.1em;
				font-weight: bold;
		}

		#pflegeeigenschaften .pflegesymbol {
				display: inline-block;
				font-size: 0.9em;
				margin-left: 1em;
				text-align: center;
				vertical-align: top;
				width: 110px;
		}

				#pflegeeigenschaften .pflegesymbol img {
						width: 50px;
						height: 50px;
						margin-top:5px;
						margin-right: 5px;
				}


@media (max-width: 1024px) {
		.artikel_alle .mainRight {
				float: none;
				width: 100%;
				margin-left: 0.7%;
				/* padding-left: 0% !important; */
				padding-top:7px;
		}
		.artikel_alle {
				flex-direction:column;
		}
}



		.artikel_alle .artikelbox .button_accessoires:hover {
				background-color:#f1f1f1;
		}




.artikel_alle .listDesignsBoxDetailsWrap {		/* das ist die grosse Box, die auf geht, wenn man auf "passend dazu" unter einem Artikel klickt */
		overflow: hidden;		/* fuer die Animation height: 0 */
		margin-bottom: -4em;
		margin-left: 5px;

		/* Tim: Im RTS habe ich, im Zuge der Erstellung des mobilen Layouts, das Listing von flex auf grid umgestellt. die Aenderungen hier gehoeren zum grid-Layout */
		grid-column-start: 1;
		grid-column-end: -1;
}

		.artikel_alle .listDesignsBoxDetailsWrap .zurueck {
				position: absolute;
				top: 44%;
				z-index: 100;
				left: 2%;
				cursor:pointer;
                background: #fff;
				padding: .6em 1em;
				border-radius: 100%;
		}

		.artikel_alle .listDesignsBoxDetailsWrap .vor {
				position: absolute;
				top: 44%;
				z-index: 100;
				right: 2%;
				cursor:pointer;
				background: #fff;
				padding: .6em 1em;
				border-radius: 100%;
		}


.artikel_alle .listDesignsBoxDetails {
		display: -webkit-flex;
		display: flex;
		flex-wrap:wrap;
		padding: 1em 1em 2.5em 1em;
		border: 1px solid #cfcfcf;
		position: relative;
		box-sizing: border-box;
		background-color:#fff;

}

		.artikel_alle .listDesignsBoxDetails h2 {

				display: block;
				height: 50px;
				flex: 1 1 100%;
				text-align: center;
				color: #c4c4c4;
				font-size: 23px;

		}
		.artikel_alle .listDesignsBoxDetails h3 {

				display: block;
				flex: 1 1 90%;
				text-align: center;

		}
		.artikel_alle .listDesignsBoxDetails .accessoires {

				display: block;
				flex: 1 1 100%;
				overflow: hidden;
				white-space: nowrap;
				text-align: center;

		}

				.artikel_alle .listDesignsBoxDetails .accessoires_wrap {
						display: block;
						/*width: 200%;*/
						position:relative;
				}



				.artikel_alle .listDesignsBoxDetails .accessoires a {
							color: inherit;
							text-decoration: none;
				}

								.artikel_alle .listDesignsBoxDetails .accessoires .accessoire {
/*	ausgebaut Swen
						display: inline-block;
						width: 183px;
						margin-right: 27px;
						text-align:center;
*/
				}
				.artikel_alle .listDesignsBoxDetails .accessoires .accessoires_wrap {
						display: flex;
				}
				.artikel_alle .listDesignsBoxDetails .accessoires .accessoires_wrap a {
						/*flex: 1;*/
						padding-right: 1em;
						width: 24%;
						min-width: 200px;
						float: left;
						box-sizing: border-box;
						margin: 0 auto;
						align-self: flex-end;
				}
				/*
				.artikel_alle .listDesignsBoxDetails .accessoires .accessoires_wrap a:nth-child(3n+2) {
						margin-right: 1em;
						margin-left: 1em;
				}
				*/

						.artikel_alle .listDesignsBoxDetails .accessoires .accessoire img {
								width:98%;
								display:block;
								margin: auto;
								max-width: 180px;
								height: auto;
								min-width: 100px;

						}

						.artikel_alle .listDesignsBoxDetails .accessoires .accessoire span.title {
								display:block;
								margin: 14px 0;
								white-space: normal;
								text-align: center;
						}

						.artikel_alle .listDesignsBoxDetails .accessoires .accessoire span.preis {
								display: block;
								margin-top: 2px;
								font-weight: bold;
								text-align: center;
						}
						/*
						.artikel_alle .listDesignsBoxDetails .accessoires .accessoire span.preis .mass_button {
								background-color: #f1f1f1;
								padding: 6px;
						}
						*/
						.artikel_alle .listDesignsBoxDetails .accessoires .accessoire span.preis .mass_button img {
								float: right;
								margin-left: 10px;
								margin-top: 3px;
								width:7px;
						}

				.artikel_alle .listDesignsBoxDetails .schliessen {
						position: absolute;
						top: 1em;
						right: 1em;
						cursor: pointer;
				}
				@media (max-width: 1024px) {
		.artikel_alle .mainRight { margin:0 auto; }

		.artikel_alle .auswahl_eingrenzen { padding:0; float:none !important; } /*toto: gehört in die Filter.css*/
		.artikelEinzelseite { margin:0; }
/*
		.artikel .artikel_table_main { display:flex; flex-wrap: wrap; }
		.artikel .artikel_table_main > .left { flex: 1 1 auto; order:1; }
		.artikel .artikel_table_main > .middle { flex: 1 1 auto;  order:2;}
		.artikel .artikel_table_main > .right { flex: 1 1 100%; order:3; padding: 0; margin-bottom: 30px;}
		.kundenbewertung { display:none; }
		#pflegeeigenschaften { display:none; } /* werden eigendlich gebraucht..wenn keine schreit dann im Februar neu designen * /
		.artikel .artikel_table_main .preisMengeWarenkorb { display:block; }
		.artikel .artikel_table_main .artikelBottom { text-align:left; }
		.artikel .artikel_table_main .preisMengeWarenkorb { display:block }
		.artikel .artikel_table_main .sonderwunsch textarea { box-sizing: border-box; width: 100%; height: 60px; padding: 1%; }
		.artikel .box_menge { width: 36px; box-sizing: border-box; }
			.artikel input[type="text"], .artikel input[type="number"] { height: 24px; width:100%; margin-right: 1%;}
		/*.artikel .warenkorb { width: 92%; }
				.artikel .warenkorb .warenkorb_text { width:90% }
				.artikel .warenkorb .warenkorb_symbol { width: 9%; box-sizing: border-box; }* /

*/

		.artikel_alle { 
			margin-top: 0; 
		}

}

@media (max-width: 768px) {
		.artikel_alle .listDesignsBoxDetails .accessoires_wrap {
				display: block;
				/*width: 600%;*/
				position:relative;
		}
		.artikel_alle .listDesignsBoxDetails .accessoires .accessoires_wrap a img,
		.artikel_alle .listDesignsBoxDetails .accessoires .accessoires_wrap a img ~ span {
				max-width: 200px;
				display: block;
				margin: auto;
		}
}

/* Responisve Warenkorb Bestellungsansicht */

#fenster_warenkorb{
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
}

#fenster_warenkorb #fenster_warenkorb_top {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
}

#fenster_warenkorb_top_buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
}

#fenster_warenkorb_top_buttons .button.highlight.right{
	margin: 2%;
}

#fenster_warenkorb #fenster_warenkorb_bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
}

#fenster_warenkorb_aehnlich{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
}

#warenkorb_box_preis{
		color: #000 !important;
		font-weight: 400;
}

#warenkorb_box_attribute{
		word-wrap: break-word;
}

@media (max-width: 500px) {
		#fenster_warenkorb #fenster_warenkorb_top {
				width: 90%;
				padding: 40px 0 40px 0;
		}

		#fenster_warenkorb{
				width: auto;
		}

		#fenster_warenkorb #fenster_warenkorb_top_right {
				float: unset !important;
				width:100% !important;
		}

		#fenster_warenkorb #warenkorb_box_groesse{
				margin-top: 10%;
		}

		#fenster_warenkorb #warenkorb_box_preis{
				margin-top: 20%;
				float: right;
		}
}



		.raffrollo #listing_artikel {
		  align-items: center;
		  /* um dann hoehenunterschiede zwischen minikonfi und standard ausgleichen fuers gemischte raffrollo listing:
			align-items: unset;
			
		  */
		  gap: 2em;
		  padding-top: 2em;
		  display: grid;
		  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		}
		/*
		fuers gemischte raffrollo listing START
		
		.raffrollo .artikel_alle .listing .artikelbox {
	      display: flex;
		  margin-bottom: 1em;
		  position: relative;
		  flex: 1 0 230px;
		  border: 1px solid #ededed;
		  padding: 1em 10px .5em 10px;
		  height: unset;
		  align-content: center;
		  flex-direction: column;
		  align-items: center;
		  border-radius: 20px;
		}
		.raffrollo .artikel_alle .listing .artikelbox a {
		  display: inline-flex;
		  width: 100%;
		  flex-direction: column;
		}
		.raffrollo .artikel_alle .listing .artikelbox a:hover {
		  box-shadow: 0px 12px 20px #0000004D;
		}
		.raffrollo .artikel_alle .listing .artikelbox a > * {
		  order: 2;
		}
		.raffrollo .artikel_alle .listing .artikelbox a > .listingtitle {
		  order: 1 !important;
		  font-size: 14px !important;
		  margin-bottom: 1em;
		}
		fuers gemischte raffrollo listing ENDE
		mobil fehlt noch und buttons auch carschtn 20240315
		*/
		.layout_option_header_schmal .raffrollo .artikel_alle .mainRight {
			padding-left: 0 !important;
		}														

/*
		2019 / 2020 uebernommen aus /plissee/mass_listing.css
		Tim
		Listing mit 2 Bildern pro Artikel (uebernommen Plissee Mass, aber angepasst fuer das X-Artikelsystem)
*/
		.box2 {
				padding-left: 2px;
				padding-right: 2px;
				margin-right: 0.95%;
				margin-left: 0.95%;
				margin-bottom: 1.4em;
				flex: 1 1 220px;

				/* von .listing a (aus /plissee/mass_listing.css) */
				color: #444444;
				vertical-align: bottom;
				text-align: center;

				text-decoration: none;
				border: 1px solid #e6e6e6;
				position: relative;
		}
				.box2 .listing_box_bez {
						display: block;
						margin-bottom: 5px;
						margin-top: 15px;
						min-height: 2.5em;
						z-index: 1;		/* damit der Text ueber dem Logo liegt (irgendwie hat das (wohl durch position absolute bei dem anderen Element) nicht mehr geklappt) */
						position: relative;	/* damit der z-index Wirkung zeigt */
				}

				.box2 .listing_box_imggroup {
						display: inline-flex;
						width: 88%;
				}
						.box2 .listing_box_img {
								/* nicht fuer mobile - fuer desktop noch nachbauen
								display: block;
								margin-top: 1em;
								overflow: hidden;	*/	/* fuer versehentlich zu grosse Bilder */

								flex: 1 0 0%;			/* der IE11 freut sich ueber das %-Zeichen */

								margin-left: 0.8%;
						}
						.box2 .listing_box_img:first-child {
								margin-left: 0;
						}

								.box2 .listing_box_img img {
										width: 100%;
										display: block;		/* um im mobilen Layout den unteren Platz unter der Baseline verschwinden zu lassen */
								}
				.box2 .listing_box_icons {
						display: inline-block;
						width: 100%;
				}
						.box2 .listing_box_icons img {
								width: 100%;
						}
				.listing_box1 .listing_box_icons {
						display: block;
						margin-top: 2px;
				}
						.box2 .listing_box_icons img {
								margin-left: 1px;
								margin-right: 1px;
						}
				  .box2 .listing_box_plus
				, .box2 .listing_box_logo
				, .box2 .listing_box_bezmobile
				, .box2 .listing_box_meinung
				{
						display: none;		/* nur im mobilen Layout */
				}
				.box2 .listing_box_info {
						vertical-align: top;
						display: inline-block;
						width: 8%;
				}

				.box2 .listing_box_bottom {
				}
						.box2 .listing_box_button {
								display: none;
						}
						.box2 .listing_box_pg {
								display: block;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
						}
				.box2 .listing_box_konfi {
						display: none;
						position: absolute;
						bottom: 0;
						left: -1px;
						width: 100%;
						z-index: 2;		/* wenn ich fuer die Bilder einen z-index definiere, dann muss ich das hier auch machen und die Box ganz oben drauf legen */
				}
				.noTouch .box2 a:hover .listing_box_konfi {
						display: block;
				}
				.box2 .listing_box_konfi > span {
						display: block;
						color: #ffffff;
						background-color: #444444;
						padding: 10px;
						font-weight: bold;
						margin: 5px;
						border-top: 5px solid #ffffff;
						position: relative;
						background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAL0lEQVQI12P88ePHfwYCgJGBgYEBn0IODg5GRhgHm0IODg5GuEnYFMIUYAXYTAQAw5YT07b+ZT8AAAAASUVORK5CYII=');
						background-repeat: no-repeat;
						background-position: center top;
				}
				.box2_wrapper {
				padding-left: 2px;
				padding-right: 2px;
				margin-right: 0.95%;
				margin-left: 0.95%;
				margin-bottom: 1.4em;
				flex: 1 1 220px;

				/* von .listing a (aus /plissee/mass_listing.css) */
				color: #444444;
				vertical-align: bottom;
				

				text-decoration: none;
				max-width: 280px;
				position: relative;
		}
		.raffrollo .box2_wrapper.lysel_home {
			max-width:unset;
			flex: 1 1 250px;
			margin-left: 0;
			margin-right: 0;
		}
		
		
		
		.raffrollo .box2_wrapper.lysel_home::after {
		  position: absolute;
		  background-color: #fff;
		  content: url(/i/stoffuebersicht/icon_design_lyselhome.svg);
		  display: block;
		  top: -1em;
		  left: 0;
		  right: 0;
		  width: 2em;
		  margin: auto;
		  pointer-events:none;
		  border-radius: 100%;
		}
		.raffrollo .box2_wrapper.lysel_home .preis {
		  background: #444;
          color: #fff;
		  text-transform: uppercase;
		  font-size: smaller;
		  padding: 1em calc(1em + 20px) 1em 1em;
		  font-weight: 500;
		  border: 1px solid;
		  border-radius: 4px;
		  background-image:url(/i/layout/icon-konfi-2.svg);
		  background-repeat:no-repeat;
		  background-position: calc(100% - .5em) center;
		  background-size:20px;
		  width: 100%;
		  display: inline-block;
		  text-align:center;
		}
		.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_bez .wenigerwichtig {
		  font-size: 14px;
		}
		.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_bez .wichtig {
		  font-size: 16px;
		}
				.box2 {
						border: 1px solid #e6e6e6;
						text-align: center;
						position: relative;
				}
				.raffrollo .box2_wrapper.lysel_home .box2 {
					border: 1px solid #e6e6e6;
					position: relative;
					border-radius: 15px;
					padding: 0 .5em 1em .5em;
				
				}
				.raffrollo .box2_wrapper.lysel_home .box2:hover {
						box-shadow: 0px 12px 20px #0000004D;
				}
				
						.box2 .listing_box_bez {
								display: block;
								margin-bottom: 5px;
								margin-top: 15px;
								min-height: 2.5em;
								z-index: 1;		/* damit der Text ueber dem Logo liegt (irgendwie hat das (wohl durch position absolute bei dem anderen Element) nicht mehr geklappt) */
								position: relative;	/* damit der z-index Wirkung zeigt */
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_bez {
						  display: flex;
						  margin-bottom: 1em;
						  margin-top: 1.5em;
						  justify-content: start;
						  flex-flow: column nowrap;
						  
						}

						.box2 .listing_box_imggroup {
								display: inline-flex;
								width: 88%;
								align-items: center;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_imggroup {
						  display: flex;
						  width: 100%;
						  align-items: center;
						}
				
								.box2 .listing_box_img {
										/* nicht fuer mobile - fuer desktop noch nachbauen
										display: block;
										margin-top: 1em;
										overflow: hidden;	*/	/* fuer versehentlich zu grosse Bilder */

										flex: 1 0 0%;			/* der IE11 freut sich ueber das %-Zeichen */

										margin-left: 0.8%;
								}
								.box2 .listing_box_img:first-child {
										margin-left: 0;
								}
								.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_img {
										display:flex;
								}

										.box2 .listing_box_img img {
												width: 100%;
												display: block;		/* um im mobilen Layout den unteren Platz unter der Baseline verschwinden zu lassen */
										}
						.box2 .listing_box_icons {
								display: inline-block;
								width: 100%;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_icons {
						  display: flex;
						  width: 100%;
						  margin: 5px;
						  justify-content: center;
						  column-gap: 1em;
						}
								.box2 .listing_box_icons img {
										width: 100%;
								}
								
						.listing_box1 .listing_box_icons {
								display: block;
								margin-top: 2px;
						}
								.box2 .listing_box_icons img {
										margin-left: 1px;
										margin-right: 1px;
								}
								.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_icons img {
										width: 25px;
										height:25px;
								}
						.box2 .listing_box_plus
						, .box2 .listing_box_logo
						, .box2 .listing_box_bezmobile
						, .box2 .listing_box_meinung
						{
								display: none;		/* nur im mobilen Layout */
						}
						.box2 .listing_box_info {
								vertical-align: top;
								display: inline-block;
								width: 8%;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_info {
						  display: flex;
						  margin: auto;
						  column-gap:10px;
						  padding: 1em 0;
						  width: 100%;
						}

	   .box2 .listing_box_bottom {
						}
								.box2 .listing_box_button {
										display: none;
								}
								.listing_box_pg {
										display: flex;
										justify-content: center;
										gap: 1em;
										padding-top: 0.5em;
										padding-bottom: 0.5em;
								}
								.listing_box_pg .oldPrice, .artikel_simple .artikel_table_main .right .preis_wrap .preis .oldPrice, .artikel_alle .listing .bottom .preis .oldPrice {
									position: relative;
								}

								.artikel_alle .listing .bottom .preis.smallbox .oldPrice{
									margin-right: 0.5em;
								}

								.listing_box_pg .oldPrice::after, .artikel_simple .artikel_table_main .right .preis_wrap .preis .oldPrice:after, .artikel_alle .listing .bottom .preis.smallbox .oldPrice:after {
									content: '';
									position: absolute;
									width: 100%;
									border-bottom: solid 2px;
									top: 56%;
									left: 50%;
									transform: translate(-50%, -50%);
								}
								.listing_box_pg .currentPrice, .artikel_simple .artikel_table_main .right .preis_wrap .preis .currentPrice , .artikel_alle .listing .bottom .preis.smallbox .currentPrice {
									font-weight: bold;
									color: #F18719;
								}
						.box2 .listing_box_konfi {
								display: none;
								position: absolute;
								bottom: 0;
								left: -1px;
								width: 100%;
								z-index: 2;		/* wenn ich fuer die Bilder einen z-index definiere, dann muss ich das hier auch machen und die Box ganz oben drauf legen */
						}
						.noTouch .box2 a:hover .listing_box_konfi {
								display: block;
						}
						.box2 .listing_box_konfi > span {
								display: block;
								color: #ffffff;
								background-color: #444444;
								padding: 10px;
								font-weight: bold;
								margin: 5px;
								border-top: 5px solid #ffffff;
								position: relative;
								background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAL0lEQVQI12P88ePHfwYCgJGBgYEBn0IODg5GRhgHm0IODg5GuEnYFMIUYAXYTAQAw5YT07b+ZT8AAAAASUVORK5CYII=');
								background-repeat: no-repeat;
								background-position: center top;
						}						 
/* Mobile Layout */
@media (max-width: 500px) {
		.box2_wrapper {
				flex: 1 1 100%;
		}
		.raffrollo .box2_wrapper.lysel_home::after {
			display:none;
		}

		.box2 {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				flex: 1 1 230px;
				padding-left: 0;
				padding-right: 0;
		}
		.artikel_alle .listing a.box2 {		/* ich muss das so schreiben, weil .box2 von .artikel_alle .listing a ueberschrieben wird  */
				display: flex;
		}
				.box2 .listing_box_bez {
						display: none;
				}
				.box2 .listing_box_imggroup {
						flex: 1 0 0;
						display: flex;
						position: relative;	/* fuer das absolut positionierte + auf den Bildern */
						width: auto;		/* vom desktop-layout ueberschreiben */
				}
						.box2 .listing_box_plus {
								display: block;
								position: absolute;
								top: calc(50% - 15px);		/* Mitte, - halbe Bildbeite */
								left: calc(50% - 15px);
								z-index: 1;		/* weil die anderen Elemente auch einen z-index haben */
								background-color: #ffffff;
								border-radius: 50%;
								width: 30px;
								height: 30px;
								opacity: 0.4;
						}
						.box2 .listing_box_logo {
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								width: 17%;
								padding: 5px;
								background-color: rgba(255, 255, 255, 0.8);
								z-index: 1;		/* weil die anderen Elemente auch einen z-index haben */
						}
								.box2 .listing_box_logo img {
										display: block;
										width: 100%;
										z-index: 1;		/* weil die anderen Elemente auch einen z-index haben */
								}

				.box2 .listing_box_info {
						flex: 1 0 0;
						padding-left: 0;		/* Angabe vom Desktop-Layout wieder ueberschreiben */
						padding-right: 0;
				}
						.box2 .listing_box_bezmobile {
								display: block;
								margin-bottom: 1em;
								font-size: 14px;
								padding-left: 5%;
								padding-right: 5%;
						}
						.box2 .listing_box_icons {
								width: auto;		/* vom desktop-layout ueberschreiben */
								display: block;
						}
								.box2 .listing_box_icons img {
										width: auto;
										margin-left: 0.3em;
										margin-right: 0.3em;
										height: 22px;
								}
						.box2 .listing_box_meinung {
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 1em;
						}
								.box2 .listing_box_meinung_durchschnitt {
										color: #f7c801;
										font-weight: bold;
								}
								.box2 .listing_box_meinung img {
										width: 20px;
										margin-left: 0.5em;
										margin-right: 0.5em;
								}
								.box2 .listing_box_meinung_anzahl {
								}

				.box2 .listing_box_bottom {
						flex: 0 0 100%;
						display: flex;
						align-items: center;
						padding-top: 13px;
						padding-bottom: 13px;
						border-top: 1px solid #d8dcdf;
				}
						.box2 .listing_box_button {
								display: block;
								flex: 1 1 auto;
								background-repeat: no-repeat;
								background-size: 22px 22px;
								background-position: 90% center;
								background-color: #f2f3f5;
								border-radius: 2em;
								padding-left: 0;
								padding-top: 1em;
								padding-bottom: 1em;
								padding-right: 22px;		/* diese Zahl soll der Groesse des Icons (Zahnrad-Symbol) entsprechen */
								margin-left: 1em;
								margin-right: 1em;
						}
						.box2 .listing_box_button.anzeigen {
								background-image: url(/i/stoffuebersicht/icon_konfigurator.svg);
						}
						.box2 .listing_box_button.konfigurieren {
								background-image: url(/i/stoffuebersicht/icon_konfigurator.svg);
						}
						
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_button.konfigurieren, .raffrollo .box2_wrapper.lysel_home .box2 .listing_box_bezmobile {
							display:none;
						}
						.raffrollo .box2_wrapper.lysel_home .preis {
						  display: inline-block;
						  width: 98%;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_imggroup {
							flex: auto;
							display: flex;
							position: relative;
							width: auto;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_bez {
						  min-height: unset;
						  display:flex;
						  margin-left: auto;
						  margin-right: auto;
						  margin-top: 0;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 > * {
						  order:2;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_logo {
							order:1;
							width:100%;
							padding:0;
							position:relative;
						}
						.raffrollo .box2_wrapper.lysel_home .box2 .listing_box_logo img {
							width: 60%;
							margin: 0 auto;
						}
						.box2 .listing_box_pg {
								display: block;
								flex: 1 1 auto;
								color: #f18719;
								font-weight: bold;
								font-size: 130%;
						}
}