/*
		28.01.2020 - Tim - Anpassung mobiles Layout
*/

.clr { clear:both; }

.artikel_simple {
		border: 2px solid #cecece;
		float: left;
		margin: 1.5% 2.3%;
		display: inline-block;
		position:relative;
		max-width: 75%; /* Tim: diese Zeile wegen dem float-Llayout hinzugefuegt. - Noetig bei grosser Box (bei z.B. Rollos mit hunderten Farben in der Auswahll) */
}

@media (max-width: 1024px) {
		.artikel_simple {
				float: none;
				width: 100%;
				max-width: none;
				margin-left: 0;
				margin-right: 0;
		}
}


		.artikel_simple .pfeil_nach_unten {
				bottom: -11px;
				left: 6%;
				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;
								font-size: 0.85em;
						}

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

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

						.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: 20%;
						padding-left:2%;
						padding-bottom: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%;
								}

								.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: 76%;
						padding-left:2%;
						float:right;

				}
				
						.artikel_simple .artikel_table_main .right .farb_motiv_wrap {
								margin-left:0%;
								max-height: 400px;		/* Tim: fuer die Rollos, da haben wir hunderte Farben zur Auswahl */
								overflow: auto;
						}

						.artikel_simple .artikel_table_main .right .auswahl_ueberschrift {
								font-size: 0.85em;
								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 {
										font-size: 0.85em;
								}
										.artikel_simple .artikel_table_main .right .kundenbewertung .sternewertung img {
												vertical-align: middle;
												height: 13px;
										}

						.artikel_simple .artikel_table_main .right .preis_wrap {
								display: inline-block;
								position: absolute;
								right: 20px;
								bottom: 16%;
						}
						.artikel_simple .artikel_table_main .right .preis_wrap .preis .oldPrice {
						  font-weight: normal;
						  margin-right: .5em;
						}

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



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

								.artikel_simple .artikel_table_main .right .stoff_inhalt .ueberschrift {
										display: inline-block;
										font-size: 0.85em;
										font-weight: bold;
										margin-bottom: 10px;
								}

								.artikel_simple .artikel_table_main .right .stoff_inhalt ul {
										list-style:none;
										margin: 0;
										padding: 0;
										padding-left:3%
								}
								.artikel_simple .artikel_table_main .right .stoff_inhalt ul li {
										white-space: nowrap;
										font-size:0.85em;
								}
								.artikel_simple .artikel_table_main .right .stoff_inhalt ul li:before {
										content: "\00BB\0020";
								}
								
								
						.artikel_simple .artikel_table_main .right .btn_detail_link {
								border: 1px solid #cecece;
								bottom: 4%;
								display: inline-block;
								height: 34px;
								position: absolute;
								right: 3%;
								text-decoration: none;
								width: 183px;
						}
								.artikel_simple .artikel_table_main .right .btn_detail_link .btn_detailseite {
										color: #666;
										display: inline-block;
										float: left;
										font-size: 0.9em;
										height: 34px;										
								}
										.artikel_simple .artikel_table_main .right .btn_detail_link .btn_detailseite span {
												display: inline-block;
												padding: 10px 16px;
										}
										
								.artikel_simple .artikel_table_main .right .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: 9%;
		}	
}

@media (max-width: 750px) {
		.artikel_simple .artikel_table_main .right .preis_wrap {
				bottom:13%;
		}
}

@media (max-width: 600px) {
		.artikel_simple .artikel_table_main > .left {
				width: 27%;				
		}
		
		.artikel_simple .artikel_table_main .right {
				width: 68%;
		}
		
		.artikel_simple .pfeil_nach_unten {
				left: 13%;
		}
		
		.artikel_simple .artikel_table_main .right .auswahl_variation_box {
				margin-right: 1px;
				width:13%;		
		}
		
		.artikel_simple .artikel_table_main .right .preis_wrap {
				transform: scale(0.8);
				bottom:11%;
		}
		
		.artikel_simple .artikel_table_main .right .btn_detail_link {
				border: 2px solid #cecece;
				transform:scale(0.8);
				bottom:2%;
		}
		
		.artikel_simple .artikel_table_main .right .stoff_inhalt {
				margin-bottom:80px;
		}
		
}


@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: 30%;
		}		
}