/*
		18.08.2016 07:07 Tim			Tabs Mass/Standard eingeabaut, offcanvasfilter zu filter umgebaut
		19.07.2017 14:05 Andy			Merge aus Heimtex
		10.09.2019		 Jannick		Artikel Alle Box nun display: flex imd float entfernt
*/

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


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

/*	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: 50%;
	margin: auto;
}

.listingBox.img1 .artikelBild img {
	max-width: 150px;
}

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

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

.listing a {
	color: #444444;
	vertical-align: bottom;
	text-align: center;
	margin-bottom: 1.4em;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #e6e6e6;
	position: relative;
	box-sizing: border-box;
	/*  fuer die width Angabe (z.B. width: 100%) bei schmaleren Layouts (media Queries) */
	margin-right: 1.9%;
	transition: box-shadow 0.2s;
	/*width:140px;*/
	padding: 1em;
	border: 2px solid #eee;
	border-radius: 4px;

}

.listing a .bezeichner,
.listing a .minpreis {
	font-weight: bold;
}

.listing a:hover {
	box-shadow: 2px 3px 3px #e5e5e5, 2px 3px 3px #e5e5e5;
}

.listing a:hover .schnellink {
	display: block;
}

.listing_box2 {
	/*width: 17.88%;*/
	padding-left: 2px;
	padding-right: 2px;
	flex: 1 1 220px;
	max-width: 280px;
}

.listing_box1 {
	/*width: 15% !important;
				width: 124px !important;*/
	flex: 1 1 150px;
	max-width: 180px;
}

.gruppenTrenner {
	flex: 0 0 100%;
	margin: 0;
	height: 0;
	border: 0;
	visibility: hidden;
}








.versandzeit {
	margin-top: 0;
	margin-bottom: 1em;
	font-size: 1rem;
	flex: 1 0 100%;
}

.versandzeit>img {
	vertical-align: middle;
	margin-right: 1ex;
}

.listing {}

.listing_box_haken,
.listing_box_haken_active {
	position: absolute;
	top: -9px;
	right: 4px;
}

.listing_box_haken_active {
	display: none;
}

.noTouch .listing a:hover .listing_box_haken_active {
	display: block;
}

.listing_box_icon_active {
	display: none;
}

.listing a:hover .listing_box_icon_active {
	display: block;
}

.listing_box_icon,
.listing_box_icon_active {
	position: absolute;
	top: -4.1%;
	width: 100%;
	z-index: 0;
	right: 0;
}

.listing_box_icon_active {
	display: none;
}

.noTouch .listing a:hover .listing_box_icon_active {
	display: block;
}

.listing_box_bez {
	display: block;
	padding-left: 1em;
	padding-right: 1em;
	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_bez + span img {
								width: 16px;
								margin-right: 5px;
						}*/
.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_imggroup {
	/* momentan nur Plissee */
	display: block;
	/* width: 250px; */
	margin-left: auto;
	margin-right: auto;

	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_box .listing_box_imggroup {
	display: inline-flex;
	z-index: 1;
	position: relative;
}

.listing_box2 .listing_box_imggroup {
	width: 90%;
	display: inline-flex;
	z-index: 1;
	position: relative;
}

.listing_box_img img {
	width: 100%;
	display: block;
}

.listing_box_imggroup>* {
	/*								display: block;
								float: left;*/
	margin-left: 0.8% !important;
	margin-top: 0.8% !important;
}

.listing_box_imggroup_clear {
	width: 0;
	height: 0;
	float: none;
	clear: both;
}

.listing_box_imggroup>img {
	/* die Icons */
	width: 6%;
}

.listing_box_img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	/* fuer versehentlich zu grosse Bilder */
}

.listing_box1 .listing_box_img {
	width: 112px;
}

.listing_box2 .listing_box_img {
	width: 49%;
}

.listing_box_img img {
	width: 100%;
}

.reg {
	vertical-align: super;
	font-size: 90%;
}

.listing_box_ersetzt {
	display: block;
}

.listing_box_iconsbelow {
	display: block;
	clear: both;
	margin-top: 2px;
}

.listing_box_iconsbelow img {
	margin-left: 1px;
	margin-right: 1px;
}

.listing_box_pg {
	display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.listing_box_pg span {
	font-weight: 600;
}

.listing_box_pg span {
	font-weight: 600;
}

.noTouch .listing a[class*=listing_box] {
	transition: box-shadow 0.2s;
}

.noTouch .listing a[class*=listing_box]:hover {
	box-shadow: 2px 3px 3px #e5e5e5, 2px 3px 3px #e5e5e5;
}

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

.listing a:hover .listing_box_konfi {
	display: block;
}

.listing_box_konfi>span {
	display: block;
	color: #ffffff;
	background-color: #444444;
	padding: 10px 5px;
	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;
}


/* .artikel_alle */


.artikel_alle .mainRight {
	margin-bottom: 2em;
	margin-left: 7%;
	width: 100%;
}

/*
.layout_option_header_schmal .artikel_alle .mainRight {
		width: 80.3%;
		margin-left: calc(250px + 2.5em);
}
*/
.design .oben_flex_wrapper .zusatz,
.artikel .artikel_table_main .right,
.artikelMass .artikel_table_main>.spalte_info,
.artikel .artikel_table_main .artikelBottom {
	min-width: 0;
}

.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 Einstellungen
 *
 *		Ich versuche mit 4 Media angaben hinzukommen
 *
 *		> 	1260 	ist standard
 *		<= 	1260
 *		<= 	1024
 *		<=	786
 *		<=	480
 *
 *********************************************/

@media (max-width: 1024px) {
	.artikel_alle .mainRight {
		margin-left: 0;

	}

	.artikel_alle {
		flex-direction: column;
	}
}

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

	.listing_box1 {
		width: 17.6% !important;
	}

	.artikel_alle .listing_box2 {
		width: calc(23.8% - 1.9%);
	}




}

@media (max-width: 1024px) {
	.artikel_alle .mainRight {
		width: 100%;
		float: none;
	}

	.artikel_alle {
		margin-top: 0;
	}

	/*		.artikel_alle .listing_box2 { width: 30.8%; }*/
	.artikel_alle .listing_box2 {
		width: 22.7%;
	}

	.ueberschrift,
	.artikel_alle .mainRight>h1 {
		line-height: 1.2em;
	}
}

@media (max-width: 768px) {
	.listing_box1 {
		width: 30.8% !important;
	}

	.artikel_alle .listing_box2 {
		width: 30.9%;
	}

}

@media (max-width: 480px) {
	.listing_box1 {
		width: 47.4% !important;
	}

	.artikel_alle .listing_box2 {
		width: 47.3%;
	}


}


/*********************************************
 *
 *		MEDIA Einstellungen
 *
 *		Ich versuche mit 4 Media angaben hinzukommen
 *
 *		> 	1260 	ist standard
 *		<= 	1260
 *		<= 	1024
 *		<=	786
 *		<=	480
 *
 *********************************************/

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

	.listing_box1 {
		width: 17.6% !important;
	}

	.artikel_alle .listing_box2 {
		width: calc(23.8% - 1.9%);
	}

	.listing a {
		width: calc(16.65% - 1.9%);
	}


}

@media (max-width: 1024px) {
	.artikel_alle .mainRight {
		width: 100%;
		float: none;
	}

	.artikel_alle {
		margin-top: 0;
	}

	/*		.artikel_alle .listing_box2 { width: 30.8%; }*/
	.artikel_alle .listing_box2 {
		width: 22.7%;
	}

	.ueberschrift,
	.artikel_alle .mainRight>h1 {
		line-height: 1.2em;
	}
}

@media (max-width: 768px) {
	.listing_box1 {
		width: 30.8% !important;
	}

	.artikel_alle .listing_box2 {
		width: 30.9%;
	}

	.listing a {
		width: calc(24.85% - 1.9%);
	}
}

@media (max-width: 480px) {
	.listing_box1 {
		width: 47.4% !important;
	}

	.artikel_alle .listing_box2 {
		width: 47.3%;
	}

	.listing a {
		width: calc(32.85% - 1.9%);
	}
}