/*
			14.	01.	2016 09:33 Andy Schmidt		Artikel Simple Layout anpassung Responsive
			14.	01.	2016 08:16 Andy Schmidt		Artikel Simple Layout anpassung Responsive
			13.	01.	2016 16:24 Andy Schmidt		Artikel Simple ans Layout angepasst
			07. 04. 2020 10:27 Tim				Nach E-Mail von Marcus Anpassung bei ".artikel_simple .artikel_table_main .stoff_inhalt ul li" gemahct
*/

.clr { clear:both; }

.artikel_simple {
		border: 2px solid #cecece;
		float: right;
		margin-bottom: 3.5%;
		/*margin-right: 3.4%;*/
		width: 95.5%;
		position:relative;
		margin-top:20px;
		width:99.5%;
}


		/*.artikel_simple .pfeil_nach_unten {
				bottom: -11px;
				left: 10%;
				position: absolute;
		}*/


		.artikel_simple .artikel_table_main { /*...*/ }

				.artikel_simple .artikel_table_main .top {
						border-bottom: 1px solid #cecece;
						display: inline-block;
						margin-bottom: 2%;
						margin-right: 3%;
						padding: 1% 1% 2% 0;
						position: relative;
						width: 96%;
				}

						.artikel_simple .artikel_table_main .top .logo {
								float: left;
								height: 20px;
								margin-right: 2%;
								margin-top:1%;
						}

						.artikel_simple .artikel_table_main .top .markenueberschrift {
								color: #888888;

						}

						.artikel_simple .artikel_table_main .top .titel {
								color: #000000;
								font-size: 1.2em;
								font-weight: normal;
								margin: 4px;
								margin-left:0;
								display:inline-block;
								margin-right: 10%;
						}

						.artikel_simple .artikel_table_main .top .artikelnummer {
								color: #888888;

						}

						.artikel_simple .artikel_table_main .top .btn_close {
								position:absolute;
								right:0%;
								top:30%;
								cursor:pointer;
						}


				.artikel_simple .artikel_table_main > .left, .artikel_simple .artikel_table_main > .right {
						display: inline-block;
						vertical-align: top;
				}
				.artikel_simple .artikel_table_main > .left {
						width: 30%;
						padding-left:2%;
						padding-top:2%;
				}

						.artikel_simple .artikel_table_main > .left .leftContainer {
								position:relative;
								width:100%;
						}

								.artikel_simple .artikel_table_main > .left .artikelbild_gross {
										width: 100%;
										max-width: 250px;
								}

								.artikel_simple .artikel_table_main .artikel_nichtlieferbar_bild {
										opacity: 0.4;
								}
								.artikel_simple .artikel_table_main .artikel_nichtlieferbar_banner {
										width: 100%;
										color: #ffffff;
										background-color: #bf0008;
										text-align: center;
										padding: 0.5em;
										box-sizing: border-box;
								}

				.artikel_simple .artikel_table_main .right {
						width: 66%;
						padding-left:2%;
						float:right;

				}

						.artikel_simple .artikel_table_main .right .farb_motiv_wrap {
								margin-left:0%;
						}

						.artikel_simple .artikel_table_main .right .auswahl_ueberschrift {

								font-weight: bold;
								margin-bottom: 1em;
								margin-top: 0;
						}

						.artikel_simple .artikel_table_main .right .auswahl_variation_box {
								display: inline-block;
								margin-bottom: 1em;
								margin-right: 0.4em;
								cursor: pointer;
								text-align: center;
						}
								.artikel_simple .artikel_table_main .right .auswahl_variation_box a, .artikel_simple .artikel_table_main .right .auswahl_variation_box img {
										width:100%;
								}

						.artikel_simple .artikel_table_main .right .markenueberschrift {
								color: #888888;
								font-size: 0.85em;
						}

						.artikel_simple .artikel_table_main .right .titel {
								font-weight: normal;
								font-size: 1.2em;
								color: #000000;
						}

						.artikel_simple .artikel_table_main .right .artikelnummer {
								color: #888888;
								font-size: 0.85em;
						}

						.artikel_simple .artikel_table_main .right .kundenbewertung {
								margin-top: 2em;
						}
								.artikel_simple .artikel_table_main .right .kundenbewertung .sternewertung {

								}
										.artikel_simple .artikel_table_main .right .kundenbewertung .sternewertung img {
												vertical-align: middle;
												height: 13px;
										}

				.artikel_simple .artikel_table_main .preis_wrap {
						float: right;
						margin-right: 3%;
				}

						.artikel_simple .artikel_table_main .preis_wrap .preis {
								text-align: right;

								font-weight: bold;
								margin-top: 10px;
								display:inline;
						}
						.artikel_simple .artikel_table_main  .preis_wrap .zusatz {
								text-align: right;
								display:inline;
						}



				.artikel_simple .artikel_table_main  .stoff_inhalt {
						display:inline-block;
						margin-bottom:37px;
						margin-left:0%;
						width:98%;
				}


						.artikel_simple .artikel_table_main  .stoff_inhalt .ueberschrift,
						.artikel_simple .artikel_table_main  .stoff_text .ueberschrift		{
								display: inline-block;

								font-weight: bold;
								margin-bottom: 10px;
						}

						.artikel_simple .artikel_table_main  .stoff_inhalt .googlefeed {
								cursor:pointer;
						}

						.artikel_simple .artikel_table_main  .stoff_inhalt ul {
								list-style:none;
								margin: 0;
								padding: 0;
								padding-left:3%
						}
						.artikel_simple .artikel_table_main .stoff_inhalt ul li {
								/* white-space: nowrap;  Tim: warum nowrap? Das geht im mobilen Layout ueber den Rand hinaus. um beim Zeileumbruch linksbuendig zu bleiben, habe ich volgende 2 Zeilen:  */
								
								text-indent: -10px;
								margin-left: 10px;		/* Tim: dieser wert muss im absoluten Betrag gleich mit dem Wert darueber sein */

						}
						.artikel_simple .artikel_table_main  .stoff_inhalt ul li:before {
								content: "\00BB\0020";
						}

				.artikel_simple .artikel_table_main  .stoff_text {
						display:inline-block;
						margin-bottom:5px;
						margin-left:0%;
						width:98%;
				}


				.artikel_simple .artikel_table_main  .btn_detail_link {
						border: 1px solid #cecece;
						float: right;
						height: 34px;
						margin-right: 3%;
						text-decoration: none;

						margin-bottom:5px;

				}

				.artikel_simple .artikel_table_main  .btn_konfi_link {
						width:211px;
float:right;
						background-color: #949494;
						background-image: -moz-linear-gradient(center top , #949494 0%, #949494 50%, #888888 50%, #888888 100%);
						border: 1px solid #828282;
						color: #ffffff;
						height: 34px;
						margin-right: 3%;
						margin-bottom:5px;
						font-size: 0.9em;
						font-weight: bold;
						line-height: 34px;
						margin-left: 5px;
						text-align:center;

						text-decoration: none;

				}

						.artikel_simple .artikel_table_main  .btn_detail_link .btn_detailseite {
								color: #666;
								display: inline-block;
								float: left;
								font-size: 0.9em;
								height: 34px;
						}
								.artikel_simple .artikel_table_main  .btn_detail_link .btn_detailseite span {
										display: inline-block;
										padding: 10px 16px;
								}

						.artikel_simple .artikel_table_main  .btn_detail_link .btn_lupe {
								float: right;
								padding: 7px 13px 7px 0;
								width: 21px;
						}





/* gesonderte MEDIA angaben */

@media (max-width: 800px) {
		/*.artikel_simple .pfeil_nach_unten {
				left: 13%;
		}*/
}


@media (max-width: 624px) {

		.artikel_simple .artikel_table_main > .left {
				width: 27%;
		}

		.artikel_simple .artikel_table_main .right {
				width: 68%;
		}

		/*.artikel_simple .pfeil_nach_unten {
				left: 19%;
		}*/

		.artikel_simple .artikel_table_main .right .auswahl_variation_box {
				margin-right: 1px;
				width:13%;
		}




		.artikel_simple .artikel_table_main  .preis_wrap {
				transform: scale(0.8);
				bottom:52px;
		}

		.artikel_simple .artikel_table_main  .btn_detail_link {
				border: 2px solid #cecece;
				bottom:10px;
				font-size: 11px;
				width: 162px;
				height: 28px;
		}

				.artikel_simple .artikel_table_main .btn_detail_link .btn_detailseite {
						height: 28px;
				}
				.artikel_simple .artikel_table_main .btn_detail_link .btn_detailseite span {
						padding: 8px 11px;
				}

		.artikel_simple .artikel_table_main .btn_konfi_link {
				width: 183px;
		}

		.artikel_simple .artikel_table_main  .stoff_inhalt {
				margin-bottom:20px;
		}

}




@media (max-width: 525px) {
		.artikel_simple .artikel_table_main .top .btn_close {
				right:3%;
				top:35%;
				width:4%;
		}
}



@media (max-width: 430px) {

		/*.artikel_simple .pfeil_nach_unten {
				left: 22%;
		}*/
}