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

.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-top: 21px;
}



.artikel_alle .listing {
		margin-bottom: 3em;		/* Abstand zum Trenner-Banner */
		font-size: 0.95em;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-column-gap: 10px;
		grid-row-gap: 1.4em;
}

		.listing a {
				color: #444444;
				vertical-align: bottom;
				text-align: center;
				text-decoration: none;
				border: 1px solid #e6e6e6;
				position: relative;
				box-sizing: border-box;			/*  fuer die width Angabe (z.B. width: 100%) bei schmaleren Layouts (media Queries) */
		}

		.listing_box2 {
				padding-left: 2px;
				padding-right: 2px;
		}
		.listing_box1 {
				/*width: 120px;*/
		}










.versandzeit {
		margin-top: 0;
		margin-bottom: 1em;
		font-size: 1rem;
		flex: 1 0 100%;
}
		.versandzeit > img {
				vertical-align: middle;
				margin-right: 1ex;
				max-height: 50px;
		}

.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, .listing_box_icon_active {
						position: absolute;
						top: -4%;
						right: 0;
						width: 100%;
						z-index: 0;
				}
				.listing_box_icon_active {
						display: none;
				}

				.noTouch .listing a:hover .listing_box_icon_active {
						display: block;
				}
				.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 */
				}
				.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_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: 8%;
						}
						.listing_box_img {
								display: block;
								margin-top: 1em;

								/* height: 149px; */
								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: 44.8%;
						}
								.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{
						color: #00A944;
						font-weight: 800;
				}
				.discount_box {
						display: grid;
						grid-template-columns: 43px auto 43px;
						padding-bottom: 0.5em;
						height: 21px;
						width: calc(100% + 3px);
				}
				.discount_box *{
						display: flex !important;
						justify-content: center;
						align-items: center;
				}
				.discount_box .discount_old_price{
						display: block;
						grid-column: 2;
				}
				.discount_box .discount_percent{
						color: #fff;
						grid-column: 3;
						background-color: #00A944;
						height: 21px;
						width: 43px;
						font-size: 12px;
						border-radius: 1px 0px 0px 1px;
						font-weight: 600;
				}
				.discount_box_massdesign .discount_old_price{
						display: block;
						margin-top: 0.5em;
						margin-bottom: 0.5em;
				}			
				.discount_box_massdesign .discount_strike{
						border-top: solid 3px #000;
						transform: translateY(-0.5em);
						max-width: 115px;
						margin-left: calc(100% - 115px);
				}				
				.discount_box_massdesign .discount_percent{
						color: #fff;
						grid-column: 3;
						background-color: #00A944;
						height: 28px;
						width: 50px;
						font-size: 14px;
						display: flex !important;
						justify-content: center;
						align-items: center;
						border-radius: 1px;
						display: block;
						animation: discountMovement 2s;
						animation-iteration-count: 2;
						margin-left: calc(100% - 50px);
				}
				@keyframes discountMovement {
						0%   {transform: scale(1) translateX(0);}
						50%  {transform: scale(1.5) translateX(-5%);;}
						100% {transform: scale(1) translateX(0);;}
				}
				.design_abpreis_hervorgehoben{					
						color: #00A944;
						font-weight: 600;
						display: block;
						margin-top: 0.5em;
						margin-bottom: 0.5em;
						white-space: nowrap;
				}
				a.design_link_mass {
					box-sizing: border-box !important;
					/*width: 8em;*/
					padding: 1.06em 3em 1.06em 1em !important;
					margin: 2em auto 0 auto !important;
					font-size: 15px !important;
					font-weight: bold !important;
					background-image: url("../assets/img/next_black.svg") !important;
					background-repeat: no-repeat !important;
					background-position: 95% 50% !important;
					background-size: 1.5em auto !important;
					text-transform: uppercase !important;
					transition-delay: 0s !important;
					height: 50px;
				}	
				a.design_link_muster {
					background-color: #fff;
					border: solid 1px #000;
					padding: 1.06em 3em 1.06em 1em !important;
					margin: 1em auto 0 auto !important;
					font-size: 15px !important;
					font-weight: bold !important;
					background-image: url("/img/stoffuebersicht/icon_stoffmuster_grau.svg") !important;
					background-repeat: no-repeat !important;
					background-position: 95% 50% !important;
					background-size: 1.5em auto !important;
					text-transform: uppercase !important;
					transition-delay: 0s !important;
					height: 50px;
				}	
				a.design_link_mass:hover {
					background-image: url("../assets/img/next_white.svg") !important;
					color: #fff;
					background-color: #000;
					box-shadow: 0 0.25em 0.25em rgb(0 0 0 / 10%), 0.25em 0 0.25em rgb(0 0 0 / 10%), 0 -0.25em 0.25em rgb(0 0 0 / 10%), -0.25em 0 0.25em rgb(0 0 0 / 10%);
					transition-delay: 0.5s;
				}	
				.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;
				}


/* .artikel_alle */


.artikel_alle .mainRight {
		width: 81.3%;
/*		margin-right: 1%;*/
		margin-bottom: 2em;
		display: flex;
		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;
	max-width: none;
}

.artikel_alle {
	display:flex;
}

.artikel_alle .mainRight {
	margin-left: 2%;

}



/* "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 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%;
		}
		@keyframes discountMovement {
				0%   {transform: scale(1) translateX(0);}
				50%  {transform: scale(1.15) translateX(-0.5em); !important}
				100% {transform: scale(1) translateX(0);;}
		}
	
}

@media (max-width: 1024px) {
		.artikel_alle .mainRight { width: 100%; float:none; margin-left: 0;}
		.artikel_alle { margin-top:0; display: block;}
		.ueberschrift, .artikel_alle .mainRight > h1 { line-height:1.2em; }
}