/*
		2020.01.28		Tim			neues, mobiles Layout fuer Plissees
		2020.02.14		Tim			.notfound hinzugefuegt
		08.04.2020		Tim			h1 sowie text_before bei Bildschirm < 500px wieder eingeschalten - Sortierung hinzugefuegt, dass im mobilen text_before unter dem Listing erscheint
		09.06.2020		Tim			Fuer ".artikel_alle .listDesignsBoxDetailsWrap" grid-column-Eigenschaften hinzugefuegt (ist ja jetzt grid-Listing und kein Flex-Listing mehr)
		10.06.2020		David S.	Klasse aktiv bei button_accessoires entfernt
		24.06.2020		Tim			Bei mobilem Layout .einzelartikel_trenner und .ambiente_alle in Sortierung mit reingenommen (hier hatte ich die order vergessen, somit waren die Boxen oben dran)
		20.07.2021		Tim			bei .ambienteZurVariation im Farbverlauf Farbe "transparnt" mit "rgba(255,255,255,0)" ersetzt. (Der Mac nimmt sonst gra als Grundfarbe an)
		20211028		carstn		auskommentiertes css für breite bilder (gardinenschal, flaechenvorhang) auf anfrage danielas wieder einkommentiert (welcher pfosten war das denn und warum??)
		07.07.2023		X.L.K		.gardinenschal enfernt da wir den Mouse-Over-Effekt mit Detailbild auch bei anderen Produkten brauchten
		12.07.2023		David S.	.hauptbild > img max-wdith: 100% hinzugefügt, weil es das Stoffballen-Listing sonst zerschossen hat (riesige Bilder)
		11.09.2023		David S. 	box2 umgebaut, damit die SALE Artikel Kennzeichnung im Layout passt
*/

/*neu carsten aus /kategorie/ambiente.css */

.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 */
			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 {
					
					margin-right: 1em;
			}


	.versandzeit, .einzelartikel_trenner {
		display: flex;
		grid-column: 1 / -1;
		align-items: center;
		gap: 1em;
	}
	.versandzeit img {
		width: 2em;
	}


.artikel_alle {
	margin-top: 0.5em;
	display: flex;
	position: relative;
	justify-content: space-between;
	
}

	.artikel_alle .ajax_lade {
			visibility: hidden;
			position: fixed;
			top: calc(50%);
			left: calc(50%);
			z-index: 99;
			width: 3em;
			transform: translate(-50%, -50%);
	}
	@media (max-width: 500px) {		/* mobiles Layout */
			.artikel_alle .ajax_lade {
					position: fixed;
					width: 10vw;
			}
	}


.artikel_alle .mainRight {
	width: calc(95% - max(280px, 20%));
	display: flex;			/* Tim: um die Reihenfolge der einzelnen Boxen im mobilen Layout zu veraendern */
	flex-direction: column;
}



	#listing_artikel, #listing_ambiente {
			/* css grid layout */
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			grid-gap: 30px;
	}
	#listing_artikel.listing_box2, .raffrollo #listing_artikel, .balkon #listing_artikel, .markisen #listing_artikel, .jalousie #listing_artikel, .aussenrollo #listing_artikel, .plissee #listing_artikel{
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	#listing_artikel .listing_box_icons_wrapper{
		position: relative;
		grid-area: artikelIcons;
		display: flex;
		justify-content: center;
	}
	@media (max-width: 500px) {
		#listing_artikel .listing_box_icons_wrapper{
			justify-content: start;
		}
	}
	#listing_artikel .listing_box_icons{
		background-color: rgba(255, 255, 255, 0.8);
		padding: 0.2em;
		border-radius: 8px;
		transform: translate(0, -100%);
		position: absolute;
		top: 0;
	}
		#listing_artikel .listing_box_icons img {
			width: 1.5em;
			margin: 0.2em;
		}
		.listing_box {
			border: 2px solid var(--softWhite);
			box-shadow: 0px 3px 4px var(--secondaryHeaderLineShadow);
			height: 100%;
			display: grid;
			grid-template-areas: 
				'artikelbild artikelbild artikelbild artikelbild'
				'passendeArtikel passendeArtikel passendeArtikel passendeArtikel'
				'artikelIcons artikelIcons artikelIcons artikelIcons' 
				'farbboxen farbboxen farbboxen farbboxen'
				'artikeltitel artikeltitel artikeltitel bewertungen'
				'preis preis buttons buttons '
				;
			align-items: center;
			position: relative;
			grid-template-columns: 25% 25% 25% 25%;
			padding-bottom: 1em;
			overflow: hidden;
		}
		.fensterbild .listing_box{
			grid-template-areas: 
				'artikelbild artikelbild artikelbild artikelbild'
				'passendeArtikel passendeArtikel passendeArtikel passendeArtikel'
				'artikelIcons artikelIcons artikelIcons artikelIcons' 
				'farbboxen farbboxen farbboxen farbboxen'
				'artikeltitel artikeltitel artikeltitel artikeltitel'
				'preis preis buttons buttons '
				;			
		}
		.fensterbild .listing_box .groesse{
			margin-top: 1em;
		}

		.artikelbox_wrapper{
			height: 100%;
			position: relative;
		}
		.listing_box_logo {						
			position: absolute;
			top: 0;
			right: 0;
			width: 2.5em;
			padding: 5px;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 0 0 0 8px;
			z-index: 1;
		}
			.listing_box_logo img {
					width: 100%;
			}
		
		
		.listing_box_bez, .listing_box_meinung, .listing_box_pg, .listing_box_group_bez, .listing_box_buttons, .farbboxen_artikel_wrp{
			padding: 0.5em 1em;
		}

		.listing_box_pg {
			font-weight: 500;
			font-size: 1.3em;
			grid-area: preis;		
		}
		.listing_box_pg .gp{
			font-size: 0.875rem;
			font-weight: 300;
		}
		.listing_box_pg .wortlautPG{
			font-size: 0.875rem;
			display: block;
			hyphens: auto;
		}
		.listing_box_buttons.fertiggroesseButton{
			text-align: right;
		}
		.listing_box_buttons.fertiggroesseButton svg{
			width: 1.5em;
			--svgColor: #000;
		}
		.listing_box_meinung {
			order: 2;
			display: flex;
			align-items: center;
			gap: 0.5em;
			font-size: 0.778em;
			grid-area: bewertungen;
			justify-content: end;
		}
			.listing_box_meinung img{
				max-width: 2em;
			}
	.artikel_alle .listing .farbboxen_artikel_wrp{
		display: flex;
		grid-area: farbboxen;
		align-items: center;
	}
			.artikel_alle .listing .farbbox {
				margin-right: 0.5em;
				width: 1em;
				height: 1em;
				background-size: 100%;
				background-repeat: no-repeat;
				display: block;
				border: 1px solid black;
				border-radius: 50%;
				padding: 0.5em;
			}
			.artikel_alle .listing .farbbox.weitere {
					width: auto;
					font-style: italic;
			}

	.passendeArtikelWrapper	{
		grid-area: passendeArtikel;
		display: flex;
		justify-content: flex-end;
	}	
	.button_accessoires{
		transform: translate(0, -100%);
		background-color: rgba(255, 255, 255, 0.8);
		padding: 0.5em;
		border-top-left-radius: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
	}
	.blockListing .listDesignsBoxDetailsWrap{
		grid-column: 1 / -1;
		background-color: #fff;
		padding: 2em;
		border: 1px solid #000;
		overflow: hidden;
		transition: 0.5s;
		max-height: 0;
	}
	.blockListing .listDesignsBoxDetailsWrap .listingtitle{
		padding: 1em 
	}
	.blockListing .listDesignsBoxDetailsWrap .wrapperBilder{
		text-align:  center;
	}
	.blockListing .listDesignsBoxDetailsWrap .listDesignsBoxHead{
		display: flex;
		justify-content: right;
	}
	.blockListing .listDesignsBoxDetailsWrap .schliessen svg{
		width: 2em;
		cursor: pointer;
	}
	.accessoires_wrap{
		display: flex;
	}
		.accessoires_wrap a {
			max-width: 300px;
			border: 2px solid var(--softWhite);
		    box-shadow: 0px 3px 4px var(--secondaryHeaderLineShadow);
			flex-shrink: 0;
			margin: 0 1em;
		}
		.accessoires_wrap .accessoire{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 1em;
			height: 100%;
			padding: 1em;
			margin: 0 1em;
		}
		.accessoires_wrap .accessoire img{
			max-width: 100%;
			max-height: 200px;
		}
		.accessoires_wrap .accessoire .preis{
			font-weight: 500;
			text-align: center;
		}
@media (max-width: 500px) {
	.button_accessoires{
		transform: none;
		background-color: transparent;
	}
}


	.artikelbox.nichtVerfuegbar::after {
		content: "Dieser Artikel ist derzeit nicht bestellbar";
		position: absolute;
		left: 0;
		top: 30%;
		font-size: 24px;
		color: #fff;
		background-color: #f00;
		font-weight: bolder;
		text-align: center;
		padding: 0.5em;
	}



	.artikel_alle .listing a {
			text-decoration: none;
			color: #000;
	}






		
	.listing_box_bez, .listing_box_group_bez {
			grid-area: artikeltitel;
	}
	.listing_box_group_bez{
		padding-right: 2em;
	}
	.listing_box_ersetzt{
		display: block;
	}
	.listing_box_imggroup {
			display: inline-flex;
			width: 100%;
			align-items: center;
			position: relative;	
			grid-area: artikelbild;
			align-self: flex-start;
			justify-content: center;
	}
	.listing_box_imggroup .hoveronly{
		position: absolute;
		top: 0;
		left: 50%;
		transition: 0.5s;
		opacity: 0;
		transform: translate(-50%);
	}
	.listing_box_imggroup:hover .hoveronly{
		opacity: 1;
	}

	.listing_box_imggroup.bilderKlein {
		width: 70%;
		margin: 1em auto;
	}
	
	.listing_box_img img, .hauptbild img {
			max-width: 100%;
			max-height: 400px;
	}
	.fensterbild .hauptbild{
		text-align: center;
	}
		.fensterbild .hauptbild img{
			width: auto;
			height: auto;
		}

	.listing_box_buttons{
		grid-area: buttons;
		padding-left: 0;
	}
		.listing_box_buttons .konfiButton{
			font-size: 0.778em;
			gap: 0.5em;
			padding: 0.5em;
		}

	
	.listing_box_pg .oldPrice, .preis .oldPrice {
		position: relative;
		font-size: 0.778em;
		text-decoration: line-through;
		margin-right: 0.8em;
	}


	.listing_box_pg .currentPrice, .preis .currentPrice {
		font-weight: 500;
		color: var(--primaryColor);
	}







@media (max-width: 1024px) {
	.artikel_alle .mainRight {
			width: 100%;
	}
}
			
/* Mobile Layout */
@media (max-width: 500px) {

	#listing_artikel:not(.listing_box2){
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}	

	.listing_box, .listing_box_mass {
		grid-template-areas: 
			'artikelbild artikelbild artikelbild'
			'artikeltitel artikeltitel artikeltitel'
			'farbboxen farbboxen farbboxen'
			'bewertungen bewertungen bewertungen'
			'artikelIcons artikelIcons artikelIcons'
			'preis buttons buttons'
			'passendeArtikel passendeArtikel passendeArtikel';
		grid-template-columns: 50% 25% 25%;
		padding-bottom: 0;
		
	}

	.listing_box2 .listing_box, .listing_box2 .listing_box_mass {
		grid-template-areas: 
			'artikelbild artikeltitel artikeltitel'
			'artikelbild farbboxen farbboxen'
			'artikelbild bewertungen bewertungen'
			'artikelbild artikelIcons artikelIcons'
			'artikelbild preis buttons'
			'passendeArtikel passendeArtikel passendeArtikel';
	}



	.listing_box_img{
		overflow: hidden;
		display: flex;
	}
	.listing_box_img:last-child{	/*damit bei Wabenplissees die Wabenstruktur sichtbar bleibt beim 2. Bild den linken Teil weg schneiden*/
		justify-content: end;
	}
	.listing_box2 .listing_box_img img{
		max-width: 180%;
	}

		.listing_box_bez, .listing_box_group_bez{
			hyphens: auto;
		}
		.listing_box_pg{
			font-size: 1rem;
		}
			.listing_box_pg .oldPrice, .preis .oldPrice {
				margin-right: 0.3em;
			}
		.listing_box_meinung{
			justify-content: flex-start;
		}



		#listing_artikel .listing_box_icons	{
			position: static;
			transform: none;
		}

		.listing_box_buttons .konfiButton {
			border: none;
		}
			.listing_box_buttons .konfiButton svg{
				width: 2.5em;
			}
			.listing_box_buttons .konfiButton .buttonTextLang{
				display: none;
			}

	.listing_box_bez, .listing_box_meinung, .listing_box_pg, .listing_box_group_bez, .listing_box_buttons, .farbboxen_artikel_wrp {
		padding: 0.5em;
	}		
	
	.listing_box_buttons{
		display: flex;
		align-items: center;
		justify-self: end;
		padding-right: 1em;
	}
		.listing_box_buttons:not(.listing_box_buttons.fertiggroesseButton)::after {
			content: '';
			background-image: url(/bilder/icons/simpleArrowRight.svg);
			width: 2em;
			height: 2em;
			display: block;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}



}
@media (max-width: 350px) {
	.listing_box2 .listing_box_img img{
		max-width: 200%;
	}
}

.kennzeichnungSale{
	background-color: var(--primaryColor);
	color: white;
	padding: 0 0.7em;
	font-weight: 400;
	display: inline-block;
	height: 2em;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	border-bottom-right-radius: 10px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
}

.kennzeichnungXLWabe{
	position: absolute;
    display: inline-block;
    top: 1rem;
    left: -1.8rem;
    background-color: #357dbc;
    color: #ffffff;
    transform: rotate(315deg);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
}




#fenster_warenkorb {
max-width: 600px;
display: flex;
flex-wrap: wrap;
justify-content:center;
}
#fenster_warenkorb #fenster_warenkorb_top {
padding: 40px;
gap: 2em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#fenster_warenkorb #fenster_warenkorb_top_left {
		width: calc(40% - 1em);
}
	#fenster_warenkorb .warenkorb_box_produktbild_wrapper {
			position: relative;
	}
		#fenster_warenkorb #warenkorb_box_produktbild {
				/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
				max-width: 100%;
		}
		#fenster_warenkorb #warenkorb_icon_hinzugefuegt {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 3em;
				height: 3em;
				background-color: #fff;
				padding: 0.5em;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
		}
			#fenster_warenkorb #warenkorb_icon_hinzugefuegt svg{
				--svgColor: var(--primaryColor);
			}
#fenster_warenkorb #fenster_warenkorb_top_right {
		width: calc(60% - 1em);
}
		#fenster_warenkorb #warenkorb_box_status {
				border-bottom: 1px solid #000;
				padding-bottom: 0.5em;
				margin-bottom: 1em;
		}
		#fenster_warenkorb #warenkorb_box_titel {
				margin-bottom: 0.5em;
				font-weight: bold;
		}

		#fenster_warenkorb #warenkorb_box_sonderwunsch_ueberschrift {
				display: none;		/* wird ueber Javascript angeschalten */
				margin-top: 2em;
		}
		#fenster_warenkorb #warenkorb_box_sonderwunsch {
				font-style: italic;
		}


#fenster_warenkorb #fenster_warenkorb_bottom {
	display: none;
	border-top: 5px solid #e6e6e6;
	padding: 2em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#fenster_warenkorb .warenkorb.deaktiviert {
		opacity: 0.4;
		cursor: not-allowed;
}


#fenster_warenkorb_top_buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	gap: 1em;
}

#fenster_warenkorb_top_buttons > *{
	flex-grow: 1;
}
#fenster_warenkorb_top_buttons svg{
	--svgColor: var(--primaryColor);
}


#warenkorb_box_preis{
	font-weight: 500;
}

#warenkorb_box_attribute{
	word-wrap: break-word;
}
#warenkorb_box_attribute, #warenkorb_box_groesse{
	font-weight: 300;
}
#warenkorb_box_konfigurationsinfos{
	font-size: 0.889em;
}

@media (max-width: 500px) {
	#fenster_warenkorb #fenster_warenkorb_top {
			width: 90%;
			padding: 40px 0 40px 0;
	}
	#fenster_warenkorb #fenster_warenkorb_top_left, #fenster_warenkorb #fenster_warenkorb_top_right{
		width: 100%;
	}
	#fenster_warenkorb #warenkorb_box_produktbild_wrapper{
		width: 90%;
		margin: 0 auto;
	}
	#fenster_warenkorb{
			width: auto;
	}

}