/*
		18.08.2016 07:07 Tim			Tabs Mass/Standard eingeabaut, offcanvasfilter zu filter umgebaut
		10.09.2019		 Jannick		Artikel Alle Box nun display: flex imd float entfernt
		27.01.2020		Tim				neues (mobiles) Layout eingebaut
		20.03.2020		Tim				listing_box1 entfernt
		20.03.2020		Tim				Layout fuer 1 bildrige Boxen (nicht Sensuna, nicht mobil) korrigiert
		08.04.2020		Tim				.ueberschrift, .artikel_alle .mainRight > h1 sowie text_before bei Bildschirm < 500px wieder eingeschalten - Sortierung hinzugefuegt, dass im mobilen text_before unter dem Listing erscheint
		01.10.2020		David D.	Änderungen Listing repsonsive von Plissee übernommen
		29.10.2020		David S.		Alle "order:" Anpassungen auskommentiert (im Rahmen von einem neuen mobilen Layout)
		05.01.2021		David S. 		bei ".versandzeit img" aus height max-height gemacht und von 27px auf 50px gesetzt
		01.08.2023		David S.		display: none; von #erweiterteInfos entfernt, weil der Hinweis sonst nicht kam, wenn das Listing zum Artikel nachladen zu klein war
*/

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



.text_before a:link {
	color: #de8903;   /* altes orange: FFE900 -- ist aber sehr grell, deshalb jetzt etwas dunkler */
}

.text_before a:visited {
	color: #815000;
}

a img {
		border: 0;
}

.auswahl_standard_mass span.label {
	line-height:36px;
}
input[type=number] {
		/* z.B. das Mengenfeld */
		-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus */
}

.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;
}






/* mass_listing */



.artikel_alle {
		margin: 1em 2em;
		display: flex;
}



.artikel_alle .listing {
		margin-bottom: 3em;		/* Abstand zum Trenner-Banner */
		font-size: 0.95em;
		display: flex;
		flex-wrap: wrap;
}
/*	Listing neu		*/

.xListing {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 2em;
	margin-bottom: 1em;
}
.xListing .versandzeit {
	grid-column: 1 / -1;
}
.listingBox, .listingBox * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background-color: #fff;
}
.listing h1 {
	grid-column: 1 / -1;
}
.listingBox {
	display: flex;
	flex-direction: column;
	max-width: 260px;
	min-width: 190px;
	width: 100%;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
	text-align: center;
	margin: auto;
	position: relative;
	z-index: 5;
	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 {
	padding: 10px 0;
	font-weight: 100;
	font-size: 0.875em;
	line-height: 1.5em;
}
.listingBox .artikelBez span {
	display: block;
	font-weight: 400;
	font-size: 1.14em;
}
.listingBox .artikelBild {
	display: flex;
	width: 100%;
	text-align: center;
}
.listingBox.listingBox1 .artikelBild img {
	max-width: 112px;
}
.listingBox .artikelBild img {
	width: 100%;
	margin: auto;
}
.listingBox .artikelKonfi {
	display: flex;
	padding: 10px;
}
.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 55.5%;
	/*background: #F2CB05 url("/i/stoffuebersicht/icon_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 .artikelKonfi span:last-child {
	flex: 1 1 40%;
	font-weight: 500;
}
.listingBox a:last-child {
	background: #F2F2F4;
	display: block;
}

.listingBox a:last-child {
	background-size: 1.2em;
	padding: 13.5px 13px 13.5px 2.5em;
	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.8em 50%;
	background-size: 1.5em;
	text-align: left;
	padding-left: 2.9em;
	font-weight: 400;
	width: 55.5%;
	text-align: center;
}
@media only screen and (max-width: 768px) {
	.listingBox a:last-child {
		font-size: unset;
	}
}

/*	Listing neu Ende	*/
		.listing a {
				color: #444444;
				vertical-align: bottom;
				text-align: center;

				text-decoration: none;
				border: 1px solid #e6e6e6;
				position: relative;

		}

		.listing_box {
				padding-left: 2px;
				padding-right: 2px;
				margin-right: 1.9%;
				margin-bottom: 1.4em;
		}
		.listing_box2 {
				flex: 1 1 220px;
		}
		.listing_box1 {
				flex: 1 1 150px;
		}

		.flex_filler {
				height: 0;

				padding-top: 0;
				padding-bottom: 0;
				margin-top: 0;
				margin-bottom: 0;
		}








.versandzeit {
		flex: 1 0 100%;
		margin-top: 0;
		margin-top: 1em;
		margin-bottom: 1em;
		font-size: 1rem;
		display: flex;
		align-items: center;
}
		.versandzeit_flex_icon {
				flex: 1 1 0;
		}
		.versandzeit_flex_text {
				flex: 10 1 0;
		}

				/* .versandzeit > img {
						vertical-align: middle;
						margin-right: 1px;
						height: 27px;
				} */

				.versandzeit img {
						vertical-align: middle;
						margin-right: 1em;
						max-height: 50px;
				}

				.versandzeit_auskunft {
						font-weight: bold;
				}

				.listing_box_haken, .listing_box_haken_active {
						position: absolute;
						top: -9px;
						right: 4px;
				}
				.listing_box_haken_active {
						display: none;
				}
				.listing a:hover .listing_box_haken_active {
						display: block;
				}

				.listing_box_icon, .listing_box_icon_active {
						position: absolute;
						right: 0;
						width: 100%;
						z-index: 0;
				}
				.listing_box2 .listing_box_icon, .listing_box2 .listing_box_icon_active {
						/* top: -8px;  auf Grund, dass das Bild 100% und damit unterschiedlich gross ist, muss die Verschiebung ebenfalls relativ sein */
						top: -4.1%;
				}
				.listing_box1 .listing_box_icon, .listing_box1 .listing_box_icon_active {
						/* top: -8px;  auf Grund, dass das Bild 100% und damit unterschiedlich gross ist, muss die Verschiebung ebenfalls relativ sein */
						top: -5.1%;
				}
				.listing_box_icon_active {
						display: none;
				}

				.listing a:hover .listing_box_icon_active {
						display: block;
				}
				.listing_box_bez {
						display: block;
						margin-bottom: 5px;
						margin-top: 15px;
						min-height: 4.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 */
				}
				.listing_box_ersetzt_bez {
						display: block;
						font-style: italic;
						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 */
				}
				.listing_box .listing_box_imggroup {
						display: inline-flex;

						z-index: 1;		/* damit das Bild 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 */
				}
				.listing_box2  .listing_box_imggroup {
						width: 90%;
				}
				.listing_box1  .listing_box_imggroup {
						width: 86%;
				}
						.listing_box_imggroup > * {
								margin-left: 0.8% !important;
								margin-top: 0.8% !important;
						}
						.listing_box_imggroup > img {		/* die Icons */
								width: 8%;
						}
						.listing_box_img {
								flex: 1 1 112px;
								margin-top: 1em;
								overflow: hidden;/* fuer versehentlich zu grosse Bilder */
						}

								.listing_box_img img {
										width: 100%;
										display: block;		/* um im mobilen Layout den unteren Platz unter der Baseline verschwinden zu lassen */
								}
				  .listing_box_plus
				, .listing_box_logo
				, .listing_box_meinung
				, .listing_box_bezmobile
				{
						display: none;		/* nur im mobilen Layout verwendet */
				}

				.listing_box_info {
						vertical-align: top;
						display: inline-block;
				}
				.listing_box2 .listing_box_info {
						width: 8%;
				}
				.listing_box1 .listing_box_info {
						width: 12%;
				}
				.listing_box .listing_box_icons {
						display: inline-block;
						width: 100%;
				}
						.listing_box .listing_box_icons img {
								width: 100%;
								margin-left: 1px;
								margin-right: 1px;
						}
				.reg {
						vertical-align : super;
						font-size: 90%;
				}
				.listing_box_ersetzt {
						display: block;
				}

				.listing_box_bottom {
				}
						.listing_box_button {
								display: none;
						}
						.listing_box_pg {
								display: block;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
						}
				.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 .listing a:hover .listing_box_konfi {
						display: block;
				}
				.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;
				}





.artikel_alle .auswahl_eingrenzen label input[type=checkbox], .artikel_alle .auswahl_eingrenzen span input[type=checkbox] {

		display: none!important;
}



.musterungbox, .lichtbox, .eignungbox { color:#de8903;}


/* Einschraenkung der Eigenschaften */

		.hover_underline, .hover_underline_active {
				font-size: 10px;
				color: #888888;
				margin-left: 4px;
		}

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

		.hover_underline_active {
				color: #de8904;
		}


				.ajax_lade {
						visibility: hidden;
						position: absolute;
						top: 45px;
						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;
						}
						.ueberschrift, .artikel_alle .mainRight > h1{
								padding-bottom: 0;
								margin-bottom: 0;
								padding-top: 1em;
								
						}
				}


/* .artikel_alle */


.artikel_alle .mainRight {
		/*float: right;*/
		width: 100%;
/*		margin-right: 1%;*/
		margin-bottom: 2em;
		margin-left: 7%;
		display: flex;			/* Tim: um die Reihenfolge der einzelnen Boxen im mobilen Layout zu veraendern */
		flex-direction: column;
}

.design .oben_flex_wrapper .zusatz, .artikel .artikel_table_main .right, .artikelMass .artikel_table_main > .spalte_info, .artikel .artikel_table_main .artikelBottom {
	min-width: 0;
}


/* "Alle Filter loeschen", wenn in der Suche kein Ergebnis gefunden */
.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;
			}




@media (max-width: 1260px) {
		.artikel_alle .mainRight {
				width: 78.3%;
		}


}

@media (max-width: 1024px) {
		.artikel_alle .mainRight { width: 100%; float:none;}
		.artikel_alle { margin-top:0; flex-direction:column;}
		.ueberschrift, .artikel_alle .mainRight > h1 { line-height:1.2em; }
/*	29.10.2020 David S.	auskommentiert weil es ein neues mobiles layout gibt 
		.artikel_alle .mainRight #text_before
		, .artikel_alle .mainRight .text_before
		{
				order: 1;
		}
		.artikel_alle .mainRight #text_after {
				order: 2;
		}
*/
}



/* Mobile Layout */
@media (max-width: 500px) {
/*	29.10.2020 David S.	auskommentiert weil es ein neues mobiles layout gibt 
		.artikel_alle .mainRight .call_filter_mobile {
				order: 1;
		}
		.artikel_alle .mainRight .blockListing {
				order: 2;
		}

		.artikel_alle .mainRight h1 {
				order: 3;
		}
		  .artikel_alle .mainRight #text_before
		, .artikel_alle .mainRight .text_before
		{
				order: 4;
		}
		.artikel_alle .mainRight #text_after {
				order: 5;
		}
*/
		.listing_box {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				flex: 1 1 230px;
				padding-left: 0;
				padding-right: 0;
		}
				.listing_box .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;
				}
				.listing_box .listing_box_logo {
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						height: 20px;
						z-index: 1;		/* weil die anderen Elemente auch einen z-index haben */
				}

				.listing_box .listing_box_icon, .listing_box_icon_active {		/* Ueberschrifts-Logo */
						display: none;
				}
				.listing_box .listing_box_bez {
						display: none;
				}
				.listing a:hover .listing_box_icon_active {
						/* Die Einstellung vom Desktop-Layout ueberschreiben */
						display: none;
				}
				.listing_box .listing_box_imggroup {
						flex: 1 0 0;
						display: flex;
						position: relative;	/* fuer das absolut positionierte + auf den Bildern */
				}
						.listing_box_imggroup > * {
								display: block;
								float: none;
								margin-left: 0;
								margin-top: 0;
						}
						.listing_box_img {
								display: inline;
								margin-top: 0;
						}
				.listing_box .listing_box_info {
						flex: 1 0 0;
				}
						.listing_box .listing_box_bezmobile {
								display: block;
								margin-bottom: 1em;
								font-size: 14px;
								padding-left: 5%;
								padding-right: 5%;
						}
						.listing_box .listing_box_icons {
								width: auto;		/* vom desktop-layout ueberschreiben */
								display: block;
						}
								.listing_box .listing_box_icons img {
										width: auto;
										margin-left: 0.3em;
										margin-right: 0.3em;
										height: 22px;
								}
						.listing_box .listing_box_meinung {
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 1em;
						}
								.listing_box .listing_box_meinung_durchschnitt {
										color: #f7c801;
										font-weight: bold;
								}
								.listing_box .listing_box_meinung img {
										width: 20px;
										margin-left: 0.5em;
										margin-right: 0.5em;
								}
								.listing_box .listing_box_meinung_anzahl {
								}

				.listing_box .listing_box_bottom {
						flex: 0 0 100%;
						display: flex;
						align-items: center;
						padding-top: 13px;
						padding-bottom: 13px;
						border-top: 1px solid #d8dcdf;
				}
						.listing_box .listing_box_button {
								display: block;
								flex: 1 1 auto;
								background-image: url(/i/stoffuebersicht/icon_konfigurator.svg);
								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;
						}
						.listing_box .listing_box_pg {
								display: block;
								flex: 1 1 auto;
								color: #f18719;
								font-weight: bold;
								font-size: 130%;
						}

}
/* Ende Mobile Layout */