@import url("/xartikelsystem/minikonfiguratoren/assets/css/dialog.css");
@import url("/xartikelsystem/minikonfiguratoren/assets/css/pswp.css");
#ansicht3D .abbildungaehnlich,#container3D .abbildungaehnlich {
  position: absolute;
  left: 1em;
  bottom: 1em;
  background-color: #ffffff;
  color: #444444;
  padding: 5px;
  display:none;
}
#ansicht3D:after,#container3D:after {
 position: absolute;
  content:var(--AbbildungAehnlich);
  left: 0;
  right:0;
  top: 1em;
  margin: auto;
  width: 200px;
  background-color: #ffffff;
  color: #444444;
  padding: 5px;
  font-size:.85em;
  box-shadow: var(--dlg-bxsh, 0px 0.3em 0.5em #00000040);
}
#ansicht3D:hover::after, #container3D:hover::after {
  display: none;
}
#ansicht3D.previewC3Dactive:after, #container3D.previewC3Dactive:after {
  display: none;
}


/*
neues css accordion start
*/
.artikelMass .accordion .accordion_ueberschrift + .eingabeBox.konfektion {
    /*margin-top: 0em;
    margin-left: 0em;
    margin-bottom: 0em;
    display: none;*/
	transition:max-height .5s ease-in-out;
	display:block!important;
	height:auto;
    overflow: hidden;
	max-height:0;
	
}
.artikelMass .accordion .accordion_ueberschrift.active + .eingabeBox.konfektion {
    /*margin-top: 0em;
    margin-left: 0em;
    margin-bottom: 0em;
    display: none;
	transition:max-height .5s ease-in-out;
	*/
	padding: 1em;
	display:block!important;
	height:auto;
	max-height:200vH;
	overflow: auto;
	padding-top:2em;
	/*transition:all 1s ease-in-out;
	
	transition:max-height 1s ease-in-out;
	*/
}
.window-fashion .artikelMass .accordion .accordion_ueberschrift.active + .eingabeBox.konfektion {
	padding-top:2em;
	border: 2px solid #F2F2F4;
	margin-bottom:1em;
}
.massEingeben {
	cursor:pointer;
	color:blue;
	text-decoration:underline;
}
@media screen and (max-width: 1024px) {
	.artikelMass .accordion .accordion_ueberschrift.active + .eingabeBox.konfektion {
		max-height:400vH;
	}
}
/*
neues css accordion ende
*/
/* schneller workaround als reminder, kommt dann ins css von ar */
.ARModus #ansicht3D:after, .ARModus #container3D:after {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: var(--hintergrundfarbe);
}
/* schneller workaround als reminder, kommt dann ins css von ar ENDE */
.mgWindow, .mgWindow * {
  box-sizing: border-box!important;
}

.lighttoggler {
	position:fixed;
	top:70px;
	right:1em;
	width:50px;
	height:50px;
	background-color:#ddd;
	background-image:url('/xArtikelsystem/bilder/eigenproduktion/icons/abdunkelnd.svg');
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
	z-index:666666;
	border-radius:100%;
}
.lightMode .lighttoggler {
	background-image:url('/xArtikelsystem/bilder/eigenproduktion/icons/transparent.svg');
	background-repeat:no-repeat;
	background-position:center;
}


@media screen and (min-width: 1500px) {
	.mgWindowClose {
	  transform: scale(.8);
	  top: -10px;
	  right: -10px;
	  position: absolute!important;
	}
}



/* sondercss f. modellbeschreibung */
.mgWindowClose
{
  /*position: fixed!important;*/
  margin: 6px !important;
  font-size: 40px !important;
  line-height: 40px !important;
  width: 40px !important;
  background-color: transparent !important;
  color: #333 !important;
  font-weight: 400 !important;
  text-shadow: #eee 1px 0 1px !important;
}

#hinweisMasseingabe, #linkMasseingabeMessanleitung {
    margin-bottom: 1em;
}
.design_big_bildbox_ohnezoom img {
  height: 40vH;
}
.bewertungen button, .bewertungen .button, .bewertungen a.button, .bewertungen input[type="submit"] {
    color: #fff;
    background-color: #357DBC;
    border: 0;
    border-radius: 2px;
    box-shadow: 4px 4px 5px 0 rgba(0,0,0,0.1);
}
.artikel .mediathek .box .box_text {
    padding-top: 7px;

}
/*artzikel_produktion.css */
.artikelMass .accordion {
				margin-top: 1em;
		}
				.artikelMass .accordion_ueberschrift {
						border-top: 1px solid #cecece;
						border-bottom: 1px solid transparent;
						padding-top: 1em;
						padding-bottom: 1em;
						margin-top: 0;
						margin-bottom: 0;
						position: relative;
						cursor: pointer;
						font-weight: normal;
						/*
						farbe erstmal raus damit es bei swiss das blau erbt..
						color: #888888;
						*/
						font-size: initial;

						display: flex;
						justify-content: space-between;
						align-items: center;
				}
				.swiss_plissees .artikelMass .accordion_ueberschrift, .window-fashion .artikelMass .accordion_ueberschrift, .rollo-express .artikelMass .accordion_ueberschrift, .Plissee-Held .artikelMass .accordion_ueberschrift {
					border: 1px solid #F2F2F4;
					margin-bottom:1em;
					padding-top: .5em;
					padding-bottom: .5em;
				}
				.artikelMass .accordion_ueberschrift:first-child {
						border-top: 0;
				}
				.artikelMass .accordion_ueberschrift.initialNone {		/* die Ueberschriften, die je nach Konfiguration mal an und mal aus sein koennen initial auf aus stellen, dass sie beim Laden nicht kurz zu sehen sind und dann wieder verschwinden  */
						display: none;
				}
				.artikelMass .accordion_ueberschrift.active {
						/*
						farbe erstmal raus damit es bei swiss das blau erbt..color: #444444;
						*/
						font-weight: 600;
						margin-bottom:0;
				}
				.swiss_plissees .artikelMass .accordion_ueberschrift.active, .window-fashion .artikelMass .accordion_ueberschrift.active, .rollo-express .artikelMass .accordion_ueberschrift.active, .Plissee-Held .artikelMass .accordion_ueberschrift.active {
					background:#F2F2F4;
				}
						.artikelMass .accordion_ueberschrift .eingabeGewaehltIcon {
								flex: 0 0 auto;
						}

						.artikelMass .accordion_ueberschrift .eingabeGewaehltUe {
								flex: 1 1 auto;
								padding-right: 1em;
								
						}
						
						.artikelMass .accordion_ueberschrift .eingabeGewaehltUe::first-letter {
							text-transform: capitalize;
						}

						.artikelMass .accordion_ueberschrift > img {
								vertical-align: middle;
								margin-left: 0.5em;
								margin-right: 1em;
						}
						.artikelMass .accordion_ueberschrift .eingabeGewaehltBez {
								font-style: italic;
								font-weight: normal;
								font-size: 90%;
								text-align: right;

								flex: 1 1 auto;
						}
								.artikelMass .accordion_ueberschrift.active .eingabeGewaehltBez {		/* das hier wieder in Standard-Farben anzeigen */
										color: #444444;
								}

						.artikelMass .accordion_ueberschrift .eingabeGewaehltHaken {
								margin-left: 1em;
								margin-right: 0.5em;

								flex: 0 0 auto;
						}

		.artikelMass .liste_modelle > * {
				color: #d9d9d9;
				border: 1px solid #d9d9d9;
				padding: 0.5em;
				margin: 0.5em;
				text-decoration: none;
				display: inline-block;
		}
				.artikelMass .liste_modelle > *.active {
						color: #565656;
						cursor: default;
				}

				.artikelMass .accordion > .eingabeBox {
				margin-top: 0em;
				margin-left: 0em;
				margin-bottom: 0em;
				/*display: none;*/
				overflow: hidden;		/* fuer die Animation */
				padding-left: 10px;
		}
				.artikelMass .accordion_zwischenueberschrift {
						font-weight: normal;
						margin-top: 0;
						margin-bottom: 1em;
				}

		.artikelMass .groupButtonsBottom {
				text-align: right;
				margin-top: 1em;
				margin-bottom: 1em;
		}
				.artikelMass .groupButtonsBottom > *{
						margin-right: 1em;
				}
				.artikelMass .btnNextBox {
						border: 1px solid #357dbc;
						padding-top: 0.25em;
						padding-bottom: 0.25em;
						padding-left: 1em;
						padding-right: 1em;
						display: inline-block;
						cursor: pointer;
				}

		
				.tabs > * {
						display: inline-block;
						/*border: 1px solid #cecece;*/
						/*margin-right: 6px;*/
						padding: 1em;
						position: relative;
						left: 0;
						top: 1px;
						cursor: pointer;
						color: #cecece;
						background-color: #ffffff;
				}
				.tabs > div {
						display: flex;
						align-items: center;
						gap: 1em;
						min-height: 2em;
						color: #888888;
						background-color: #f1f1f1;
				}
				.tabs > *.active {
						border: 1px solid #cecece;
						border-bottom: 1px solid #ffffff;
						color: #444444;
						background: #fff;
				}
						.tabs > * > img {
								vertical-align: middle;
						}
						.tabs > * > .bez {
								/*margin-left: 1em;*/
						}
						#eingabe.elemLt650 #tabModell .bez {
								display: none;
						}
						#eingabe.elemLt650 #tabBefestigung .bez {
								display: none;
						}
				.tabFenster {
						border: 1px solid #cecece;
				}
						.tabFenster > * {
								display: none;
								padding: 1em;
								max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
						}
		/* Ende Tabs im Extra-Design-Fenster */













/* Extra-Fenster Stoffauswahl */
#extrafenster {
		display: none;
}
		.extrafenster {
				/* das hier sollte in der colorbox.css gestaltet werden! - oder besser nicht, so sind wir einem evtuellen Austausch der Colorbox unabhaengiger */
				background-color: #fff;
				/*padding: 2em;*/
				height: 100%;
				box-sizing: border-box;
		}
				.extrafenster .ajax_lade {
						visibility: hidden;
						float: left;
						margin-left: 1em;
						width: 20px;
						height: 20px;
				}
		@media (max-width: 800px) {
				.extrafenster {
						padding: 1em;
				}
		}
		.fensterDesign {
				display: flex;
				flex-direction: column;
		}
		.fensterDesign .logoMarke {
			max-width:200px;
			margin: 0 auto;
			display: block;
		}
				.fensterDesign input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
						flex: 0 0 auto;
				}
						.extrafenster .head .left {
								float: left;
						}
						.extrafenster .head .right {
								float: right;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 14px;
								padding: 0;
								margin: 0;
						}
						.fensterZweiSpalten {
								display: flex;
								flex: 1 0 0;
								overflow: auto;
						}
								.fensterZweiSpalten > .right .ueberschrift {
									text-align: center;
									margin: 0;
									font-size: 16px;
									font-weight: 400;
									padding: 0.5em;
									color: #000;
								}
								.fensterDesign .close {
									position: absolute;
									top: 0.6em;
									right: 0.7em;
									cursor: pointer;
									font-size: 16px;
								}
								@media screen and (pointer:coarse) {
									.fensterDesign .close, .fensterDesign .listDesignsBoxDetails .schliessen {
										transform:scale(1.5);
									}
								}
								.fensterZweiSpalten > .buttonAusklapp {
										display: none;

										position: fixed;
										left: 0px;
										z-index: 2;
										font-weight: bold;
										cursor: pointer;
										top: 100px;
								}
										.fensterZweiSpalten > .buttonAusklapp img {
												height: 40px;
												display: block;
										}
								.fensterZweiSpalten > .left {
										/*padding-top: 2em;
										padding-right: 1em;
										border-right: 1px solid #cecece;*/
										overflow: auto;
										height: 100%;
										box-sizing: border-box;
								}
										.fensterZweiSpalten > .left .ueberschrift {
												color: #fff;
												background-color: #444;
												font-size: 18px;
												text-align: center;
												padding: 0.5em;
										}
										#formDesign::before {
												content: unset !important;
												padding: 2em;
												background-color: #333;
												color: #fff;
												font-weight: 600;
												margin: 0;
												width: 200px;
												display: flex;
												text-align: center;
										}
								.fensterZweiSpalten > .right {
									padding-left: 2.5%;
									overflow: auto;
									height: 100%;
									box-sizing: border-box;
									position: relative;
									flex: 4.8 1 0;
									display: flex;
									flex-direction: column;
								}
								/*
								.fensterZweiSpalten > .right {
										padding-left: 2.5%;
										padding-top: 1em;
										overflow: auto;
										height: 100%;
										box-sizing: border-box;
										position: relative;		/ * fuer die absolut positionierten Ausblend-Balken * /
								}
								*/
								.fensterDesign .fensterZweiSpalten > .left {
										flex: 0 1 290px;
								}
								.fensterDesign .fensterZweiSpalten > .right {
										flex: 4.8 1 0;
								}
								#formDesign {
										padding-left: 1em;
										padding-right: 1em;
										padding-bottom: 1em;
								}
								.fensterDesign .suche {
										margin-top: 2em;
										margin-bottom: 2em;
								}
								.fensterDesign .suche {
									width: 100% !important;
									padding: 0 !important;
								}
								.fensterDesign .suche input {
									background-image: url(/xartikelsystem/bilder/eigenproduktion/icons/lupe.svg);
									background-repeat: no-repeat;
									background-position: 5% center;
									background-size: 18px 18px;
									padding-left: 40px;
									padding-right: 1em;
									padding-top: 0.7em;
									padding-bottom: 0.7em;
									border: none;
									box-sizing: border-box;
									width: 100%;
									background-color: #f1f1f1;
									border-radius: 2em;
									font-size: 16px;
								}
								.fensterDesign .suche input:focus {
									outline: auto;
								}
								.fensterDesign .suche input::placeholder {
										color: #222;
								}

						@media (max-width: 1000px) {
								/* ab hier die links Spalte zum einklappen */
								.fensterDesign .fensterZweiSpalten {
										display: block;
										position: relative;
								}
								.fensterDesign .fensterZweiSpalten > .buttonAusklapp {
										display: block;

								}
								.fensterDesign .fensterZweiSpalten > .left {
										position: absolute;
										left: 0;
										top: 0;
										background-color: #ffffff;
										width: 0;
										padding-right: 0;
										z-index: 10;
								}
						}
										/*
										.fensterZweiSpalten > .left h3 {
												font-size: 13px;
												border-bottom: 1px solid #cecece;
												padding-bottom: 0.5em;
												text-transform: capitalize;
										}
										*/
										.fensterZweiSpalten > .left h3 {
												font-size: 16px;
												border-bottom: 2px solid #000;
												padding-bottom: 0.5em;
												text-transform: uppercase;
												/*margin-top: 2em;*/
												display: flex;
												gap: .5em;
												align-items: center;
												grid-column: 1 / -1;
										}
										.fensterZweiSpalten > .left h3 img {
												width: 24px;
										}
										.fensterZweiSpalten > .left .group {
												margin-bottom: 2em;
										}
										.fensterZweiSpalten > .left .group.color {
												display: grid;
												grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
												column-gap: 25px;
												row-gap: 15px;
												margin-left: 7px;
												margin-right: 7px;
										}
										.group.color h3::before {
											content: unset !important;
										}
										.fensterZweiSpalten label::first-letter {
											text-transform: capitalize;
										}
										.fensterZweiSpalten > .left .boxSlider {
												width: 90%;
												display: flex;
										}
												.fensterZweiSpalten > .left .boxSlider .min {
														flex: 0 0 auto;
												}
												.fensterZweiSpalten > .left .boxSlider input {
														flex: 1 1 auto;
												}
												.fensterZweiSpalten > .left .boxSlider .max {
														flex: 0 0 auto;
												}


										.fensterModellDetails {
												display: flex;
												margin-top: 1.5em;
												flex-direction: row;
										}
												.fensterModellDetails .left {
														flex: 0 1 370px;
														text-align: center;
												}
														.fensterModellDetails .left img.fensterModellDetailsModellbild {
																width: 170px;
														}
												.fensterModellDetails .right {
														flex: 1 1 auto;
												}
														.fensterModellDetails .right .tabs.elemLt410 .bez {
																display: none;
														}
														.fensterModellDetails .tabFenster ul {
																margin: 0;
																padding: 0;
														}
										.fensterModellDetails.elemLt550 {
												flex-direction: column;
										}
												.fensterModellDetails.elemLt550 .left {
														flex: 0 1 auto;
														margin-bottom: 1em;
												}
										.fensterModellDetails.alternativ {

										}
												.fensterModellDetails.alternativ > .left {
														opacity: 0.1;
												}

						.extrafensterDetailsBottom {
								text-align: right;
						}
								.extrafensterDetailsBottom .abpreis {
										font-size: 16px
								}

								.extrafenster .buttons {
										margin-top: 3em;
								}
										.extrafenster .buttons button {
												margin-left: 1em;
												border: none;
												padding: 0.5em;
												font-size: 13px;
												cursor: pointer;
										}
										.extrafenster .buttons .stoffprobe {
												background-color: #cecece;
												color: #444444;
										}
												.extrafenster .buttons .stoffprobe:hover {
														background-color: #bebebe;
												}
										.extrafenster .buttons .uebernehmen {
												background-color: #357dbc;
												color: #ffffff;
												position: absolute;
												right: 0;
												bottom: 0;
										}
												.extrafenster .buttons .uebernehmen:hover {
														background-color: #458dcc;
												}



								.listDesigns {
										overflow: auto;
										/*padding-top: 1em;*/
										height: 100%;
										box-sizing: border-box;
								}
										.listDesigns:before {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												top: 0;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
												width: 100%;
												height: 10px;
												content: ' ';
										}
										.listDesigns:after {
												/* Uebergang ins Transparente */
												position: absolute;
												z-index: 1;
												bottom: 0;
												left: 0;
												background-color: transparent;
												background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
												width: 100%;
												height: 10px;
												content: ' ';
										}

										.listDesigns .zwischenueberschrift {
												margin-top: 2em;
												margin-bottom: 2em;
												margin-right: 2%;

												display: flex;
												justify-content: space-between;
												align-items: center;
										}
												.listDesigns .zwischenueberschrift .logo {
														flex: 0 0 auto;
												}
														.listDesigns .zwischenueberschrift .logo > img {
																margin-right: 1em;
														}
												.listDesigns .zwischenueberschrift .bezeichnung {
														flex: 1 1 auto;
												}
												.listDesigns .zwischenueberschrift .ansicht_bezeichnung {
														flex: 0 0 auto;
														font-weight: bold;
														margin-right: 1em;
												}
												.listDesigns .zwischenueberschrift .ansicht_wahl {
														flex: 0 0 auto;
												}
														.listDesigns .zwischenueberschrift .ansicht_wahl .button {
																display: inline-block;
																width: 93px;
																height: 22px;
																line-height: 22px;
																border: 1px solid #cecece;
																text-align: center;
																color: #888888;
																margin-left: 4px;

																-webkit-touch-callout: none; /* iOS Safari */
																-webkit-user-select: none;   /* Chrome/Safari/Opera */
																-khtml-user-select: none;    /* Konqueror */
																-moz-user-select: none;      /* Firefox */
																-ms-user-select: none;       /* IE/Edge */
																user-select: none;           /* non-prefixed version, currently not supported by any browser */
														}
														.listDesigns .zwischenueberschrift .ansicht_wahl .button:hover {
																color: #444444;
														}
																.listDesigns .zwischenueberschrift .ansicht_wahl input {
																		display: none;
																}
																.listDesigns .zwischenueberschrift .ansicht_wahl .button > img {
																		display: none;
																		width: 11px;
																		height: 10px;
																		margin-left: 1em;
																}

																.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button {
																		color: #ffffff;
																		background-color: #3781bd;
																		border: 1px solid #3781bd;
																}
																		.listDesigns .zwischenueberschrift .ansicht_wahl input:checked + .button > img {
																				display: inline;
																		}
										.listDesigns .notFound {
													margin-top: 5em;
													font-style: italic;
													text-align: center;
													color: #999999;
										}

								/*	Stoffauswahl neu	*/
								.listDesignsMarke {
										/*
										position: relative; 	/ * fuer die Positionsbesteimmung eines Stoffes mit offsetLeft - fuer die Position des Pfeils * /
										margin-left: 2%;

										display: flex;
										flex-wrap: wrap;
										*/
										position: relative;
										display: grid;
										grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
										gap: 30px;
										margin-right: 2%;
								}
								.listDesignsMarke .listDesignsDesign {
										border: 1px solid #ccc;
										/*max-height:360px;*/
								}
								.listDesignsBezGroup {
									min-height: 3em;
									display: flex;
									align-items: center;
									justify-content: center;
								}
								.clickAreaDetails, .clickAreaApply {
									cursor: pointer;
								}
								.listDesignsDesignbilder {
									display: flex;
									align-items:unset;
									/*max-height:280px;*/
								}
								.MKS20_kissen .listDesignsDesignbilderGroup {
								  padding: 1em 0 0 0;
								} 
								.listDesignsDesignbilder img {
									/*width: 100%; fuehrt im chrome zum overflow-x und die bilder sind tatsaechlich 100% von listDesignsDesignbilder, ging aber im ff */
									width: 50%;
									/*height:fit-content;
									macht die bilder in den boxen hundert prozent am iphone / ipad */
									height:auto;
									
								}
								.listDesignsDesignbilder img:only-child {
									width: 100%;
								}
								.listDesignsDesign .details {
									font-size: small;
									text-decoration: underline;
								}
								.listDesignsIcons {
									display: flex;
									align-items: center;
									/*justify-content: space-evenly;
									margin-top: 20px;*/
									margin: 20px 1em 0 1em;
									justify-content: space-between
								}
								.listDesignsIcons .icons {
									display: flex;
									gap: .5em;
									align-items: center;
								}
								.listDesignsIcons .iconLogo {
									margin-right: .5em;
									width: auto;
									height: 20px;
								}
								.listDesignsGroupBottom {
									display: flex;
									align-items: center;
									margin: 1em;
									font-weight: 400;
									gap: 1em;
								}
								.listDesignsGroupBottom .uebernehmen {
									padding-top: 0.5em;
									padding-bottom: 0.5em;
									background-color: #edf3f5;
									color: #0082c0;
									flex: 2 0 0;
									transition-duration: 0.2s;
								}
								.listDesignsGroupBottom .uebernehmen:hover {
									background-color: #0082c0;
									color: #fff;
								}
								.listDesignsGroupBottom .haken {
									width: 0px;
									display: inline-block;
									overflow: hidden;
									text-align: right;
									transition-duration: 0.2s;
									vertical-align: bottom;
								}
								.listDesignsGroupBottom .uebernehmen:hover .haken {
									width: 16px;
								}
								/*	Stoffauswahl neu Ende	*/
										/*
										.listDesignsMarke .listDesignsDesign {
												display: inline-block;
												padding-right: 1%;
												border-right: 1px solid #cecece;
												margin-right: 2%;
												margin-bottom: 2.45em;
												vertical-align: top;

												/ * width: 178px; * /
												flex: 1 1 162px;	/ * flex-basis maximal 177px, ansonsten ist es zu gross * /
										}
										*/
												.listDesignsMarke .listDesignsAreaActivateDetails {
														cursor: pointer;
														position: relative;
												}
														.listDesignsMarke .listDesignsGroupBilder > * {
																float: left;
														}
														.listDesignsMarke .listDesignsGroupBilder > *:last-child {		/* clear-<br> */
																float: none;
														}
																.listDesignsMarke .listDesignsDesign .listDesignsDesignbild {
																		margin-right: 5px;
																		margin-bottom: 1em;
																}
																		.listDesignsMarke .listDesignsDesign .listDesignsDesignbild img {
																				display: block;
																				width: 100%;
																				min-height: auto;/*180px;*/		/* wenn das Bild fehlt */
																		}
																.listDesignsMarke .iconSpezial {
																		
																		width: auto;
																		height: 20px;
																		margin: auto;
																		
																		/*
																		width: 12%;
																		margin-bottom: 5px;
																		*/
																}

														.listDesignsMarke .listDesignsAreaActivateDetails:hover .infoDetailansicht {
																display: block;
														}
														.listDesignsMarke .listDesignsAreaActivateDetails:hover .listDesignsDesignbild {
																opacity: 0.5;
														}

										.listDesignsMarke .listDesignsBoxDetailsWrap {
												overflow: hidden;		/* fuer die Animation height: 0 */
												margin-bottom: 2em;
												grid-column: 1 / -1;
												min-height: 55vh;
										}

										.listDesignsMarke .listDesignsBoxDetails {
												display: flex;
												flex-direction: row;
												gap: 4%;
												border: 2px solid #cecece;
												padding: 1.8%;
												position: relative;
												box-sizing: border-box;
												font-size: 1em;
												line-height: 1.4em;
										}
										.listDesignsMarke .listDesignsBoxDetails.elemLt500 {
												flex-direction: column;
										}
												.listDesignsMarke .listDesignsBoxDetails .schliessen {
														position: absolute;
														top: 1em;
														right: 1em;
														cursor: pointer;
														z-index: 100;
												}
												.listDesignsMarke .pfeilOben {
														position: absolute;
														height: 12px;
														font-size: 20px;
												}
												.listDesignsMarke .listDesignsBoxDetails > .left {
														flex: 1 0 auto;
														/*margin-right: 4%;*/
														overflow: hidden;		/* fuer grosse / lange (Flaechenvorhang-)bilder (z.B.: 300x699px) */
												}
														.listDesignsMarke .listDesignsBoxDetails > .left img.boxDetailsDesignbild {
																max-height: 100%;
																  display: block;
																  width: auto;
																  max-width: 100%;
														}
												.listDesignsMarke .listDesignsBoxDetails > .right {
														flex: 10 5 auto;
														position: relative;
												}
														.listDesignsMarke .listDesignsBoxDetails > .right h3 {
																font-size: 15px;
														}
														.listDesignsMarke .listDesignsBoxDetails > .right .versand {
																color: #00900a;
																font-size: 13px;
														}
																.listDesignsMarke .listDesignsBoxDetails > .right .versand .haken {
																		font-size: 16px;
																		font-weight: bold;
																}
														.listDesignsMarke .listDesignsBoxDetails .eigenschaften {
																-moz-column-width: 170px;
																-webkit-column-width: 170px;
																column-width: 170px;
																line-height: 20px;
																padding-left: 5%;		/* das spiegelt die Standardeinsteellung im Firefox 44 wider (40px), verkleinert sich jetzt aber passenderweise bei kleinen Layouts */
														}
																.listDesignsMarke .listDesignsBoxDetails .eigenschaften li {
																		white-space: nowrap;
																}

														.listDesignsMarke .listDesignsBoxDetails .licht {
																line-height: 20px;
														}


												.listDesignsMarke .listDesignsBoxDetails .design_big_bildbox {
														position: relative;
														width: 250px;
														margin-left: 1em;
														height: 333.33px;		/* Die Bilder sollten eigentlich 400x300Px vorliegen. Das sind aber leider nicht alle! (Achtung, der Code gilt fuer Rollos UND Flaechenvorhaenge! - Hier bei den Flaechenvorhaengen habe ich ein Bild der Groesse 300x699) Deshalb hier auch die Hoehe beschraenken sonst veraendert sich das Layout bei unterschiedlichen Bildgroessen. - Das Bild wird auch nicht gezerrt, weil das hier nur der Container um das eigentliche Bild herum ist */
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
														width: 180px;
												}
												.listDesignsMarke .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
														/* hier jetzt untereinander 
														margin-left: auto;
														margin-right: auto;
														*/
														margin-bottom: 1em;
														width: 200px;

												}
														.listDesignsMarke .listDesignsBoxDetails .design_big_bild {

														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_lupe {
																position: absolute;
																top: 15px;
																right: -1px;
																cursor: pointer;
														}

														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_left, .listDesignsMarke .listDesignsBoxDetails .design_big_nav_right {
																position: absolute;
																top: 160px;
																cursor: pointer;
														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_left {
																left: -20px;
														}
														.listDesignsMarke .listDesignsBoxDetails .design_big_nav_right {
																right: -20px;
														}
												.listDesignsMarke .listDesignsBoxDetails .design_big_preview {
														margin-top: 7px;
														margin-left: 1em;
												}
														.listDesignsMarke .listDesignsBoxDetails .design_big_preview > img {
																border: 1px solid #cccccc;
																margin-right: 3px;
																width: 30px;
																height: 40px;
																/* cursor: pointer; 		-- solange es mouseover, statt click triggert, hier vielleicht kein cursor: pointer */
														}
																.listDesignsMarke .listDesignsBoxDetails .design_big_preview > img.active {
																		border: 1px solid #454545;
																}

												.extrafenster .tabsDesign {
														margin-top: 1em;
														display: flex;
														gap: 6px;
												}
														.extrafenster .tabsDesign.elemLt700 .bez {
																display: none;
														}

												#tabFensterDesign ul {
														padding-left: 1em;
												}
														#tabFensterDesignKunden {
																max-height: 202px;
																overflow: auto;
														}
																.meinung_eigene {
																  display: block;
																}
																.meinung_text {
																		font-style: italic;
																		margin-bottom: 1em;
																}
																.meinung_keine {
																		font-style: italic;
																		text-align: center;
																		margin-top: 2em;
																}

												.kundenmeinungen {
														max-height: 220px;
														overflow: auto;
												}

								.listDesignsBez {
										display: flex;
										flex-flow: column;
										gap: .25em;
										margin: 0 1.25em .5em 1.25em;
								}
								.listDesignsBez, .listDesigns .listDesignsErsetztbez {
										font-size: 11px;
										color: #888888;
										font-weight: 600;
										text-align: center;
								}
								.listDesignsMarke .listDesignsErsetztbez {
										font-style: italic;
								}
								.listDesignsMarke .abpreis {
										/*
										text-align: right;
										font-weight: bold;
										margin-top: 4px;
										margin-bottom: 2px;
										*/
										font-size: 11px;
								}
								
								.listDesignsMarke .abpreis span {
										display: inline-block;
										width: min-content;
										text-align: center;
								}

								  .listDesignsMarke .listDesignsDesign .listDesignsDesignbild
								, .listDesignsMarke .infoDetailansicht
								, .listDesignsMarke .listDesignsGroupBottom
								, .listDesignsMarke .listDesignsDesign .uebernehmen
								{
										/* width: 150px; */
										/*width: 100%;*/
								}

								.listDesignsMarke .infoDetailansicht {
										position: absolute;
										left: 0;
										text-align: center;
										top: 77px;
										display: none;
								}
										.listDesignsMarke .infoDetailansicht img {
												width: 23px;
										}
								.listDesignsMarke .listDesignsDesign .uebernehmen {
										text-align: center;
								}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div {		/* .listDesignsUebernehmenButton */
												background-color: #cecece;
												color: #ffffff;
												padding-left: 1em;
												padding-right: 1em;
												padding-top: 0.5em;
												padding-bottom: 0.5em;
												display: inline-block;
												cursor: pointer;
										}
										.listDesignsMarke .listDesignsDesign .uebernehmen > div:hover {
												background-color: #3580bb;
												color: #ffffff;
										}

								.listDesignsDesign.filler {
										height: 0;
										/*
										margin: 0;
										padding: 0;
										border: 0;
										margins, paddings und borders fuer die breitenberechnung so lassen wie sie sind

										... aber die Hoehe runtersetzen
										*/
										margin-top: 0;
										margin-bottom: 0;
										padding-top: 0;
										padding-bottom: 0;
										border-top: 0;
										border-bottom: 0;
										border-right: 1px solid transparent;
								}

						.fensterDesign input[type="checkbox"] {
								margin-right: 7px;
						}
						.fensterDesign .icon {
								vertical-align: middle;
								width: 22px;
								height: 22px;
								margin-left: 0;
								/*margin-right: 7px;*/
						}
						.extrafenster .schliessen {
								vertical-align: middle;
						}
						.fensterDesign .filterImgWrap {
							display:flex;
							align-items: center;
						}
						.fensterDesign label.check::before {
						  width: 22px;
						  height: 22px;
						  margin-right: .5em;
						  content: "";
						  outline: 1px solid rgba(0,0,0,.1);
						}
						.fensterDesign label.check.licht.lichtFiltertransparent::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/transparent.svg);
						}
						.fensterDesign label.check.licht.lichtFilterlichtdurchlaessig::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/lichtdurchlaessig.svg);
						}
						.fensterDesign label.check.licht.lichtFilterhalbtransparent::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/halbtransparent.svg);
						}
						.fensterDesign label.check.licht.lichtFilterabdunkelnd::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/abdunkelnd.svg);
						}
						.fensterDesign label.check.licht.lichtFilterdimout::before {
						  content: url(/xartikelsystem/bilder/eigenproduktion/icons/dimout.svg);
						}
						label.check.spezial.spezialFilterOekotexStandard100::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/spezial-oekotex_100.svg);
 						}
						label.check.spezial.spezialFilterWaermeschutz::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/spezial-waermeschutz.svg);
 						}
						label.check.spezial.spezialFilterschwerentflammbar::before {
						  content: url(/xArtikelsystem/bilder/eigenproduktion/icons/spezial-schwerentflammbar.svg);
						}
						label.check.spezial.spezialFilterKinderzimmergeeignet::before {
						  content: url(/xArtikelsystem/minikonfiguratoren/assets/icons/icon_kinderzimmer.svg);
						}
				.fensterDesign .check label {
						display: block;
						/*text-indent: -2em;
						margin-left: 2em;*/
						margin-top: 5px;
						margin-bottom: 5px;
						font-weight: 400;
						display: flex;
						align-items: center;
				}
				.fensterDesign .check.licht label {
						display: inline-flex;
				}
						.fensterDesign .check label img {
								width: 22px;
								height: 22px;
						}
						/*
						.suche {		/ * .fensterDesign, sowie #fensterModell * /
								background-image: url(/xartikelsystem/bilder/eigenproduktion/icons/lupe.svg);
								background-repeat: no-repeat;
								background-position: 96% center;
								background-size: 24px 24px;
								padding-left: 15px;
								padding-right: 15px;
								padding-top: 15px;
								padding-bottom: 15px;
								border: 1px solid #cecece;
								box-sizing: border-box;
								width: 100%;

						}
						*/

		/* Verwendet in der Artikel- Detail - Stofflisting */
		.group .farbbox {
				display: block;
				width: 25px;
				height: 25px;
				line-height: 25px;
				float: left;
				text-align: center;
				font-weight: bold;
				cursor: pointer;
				font-size: 15px;
		}
		/*
		.group .farbbox {
			border: 1px solid #f1f1f1;
			cursor: pointer;
			float: left;
			font-weight: bold;

			height: 18px;
			line-height: 18px;
			text-align: center;
			width: 18px;
			margin: 3px;
		}
		*/
		@media (pointer: coarse) {
			.group .farbbox {
			  height: 30px;
			  line-height: 30px;
			  width: 30px;
			  margin: 5px;
			}
		}
		.color .beige {
			background-color: #d4be8d;
			color: #ffffff;
		}
		.group  .blau {
			background-color: #3485ff;
			color: #ffffff;
		}
		.group  .braun {
			background-color: #6f3e18;
			color: #ffffff;
		}
		.group  .gelb {
			background-color: #fffc00;
			color: #888888;
		}
		.group  .gruen {
			background-color: #73b525;
			color: #ffffff;
		}
		.group  .orange {
			background-color: #ff6501;
			color: #ffffff;
		}
		.group  .rosa {
			background-color: #ed008c;
			color: #ffffff;
		}
		.group  .rot {
			background-color: #ea0001;
			color: #ffffff;
		}
		.group  .schwarz {
			background-color: #000000;
			color: #ffffff;
		}
		.group  .violett {
			background-color: #9349aa;
			color: #ffffff;
		}
		.group  .weiss {
			background-color: #fff;
			color: #888;
			border: 1px solid #f1f1f1;
		}
		.group  .grau {
			background-color: #838383;
			color: #ffffff;
		}
		.group  .silber {
			background-color: #c0c0c0;
			background-image: url("/i/xartikelsystem/farben/silber.svg");
			color: #ffffff;
		}
		.group  .gold {
			background-color: #ffd700;
			background-image: url("/i/xartikelsystem/farben/gold.png");
			color: #ffffff;
		}
		.group  .messing {
			background-color: #ae884b;
			background-image: url("/i/xartikelsystem/farben/messing.svg");
			color: #ffffff;
		}

		/* Ende Verwendet in der Artikel- Detail - Stofflisting */




/* Ende Extra-Fenster Stoffauswahl */
.eingabeBox select {
    display: inline-block;
    color: #444444;
    font-size: 11px;
    padding: 0.5em;
    padding-left: 11px;
    margin-bottom: 3px;
    width: 100%;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
    background: url(/XArtikelsystem/bilder/pfeil-unten-grau.svg), linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f1f1f1 50%, #f1f1f1 100%);
		background-position: 93% center, center center;
		background-repeat: no-repeat;
		background-size: 12px 8px, 100% 100%;
    border: 1px solid #cccccc;
}

.eingabeBox select:disabled {
    opacity: 0.5;
}


.dritteEbeneStandard {
    padding-left: 3em;
    display: none;
}

.inputFrontendHidden {
  display: none;
}

.warenkorbFixed {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 10000;
}

.eigenschaften {
  column-width: auto !important;
}

input[type=number]:invalid{
    box-shadow: 0px 0px 2px 2px red;
}

#buttonShowFilter {
  color: #000;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  width: 2.5em;
  height: 10em;
  position: fixed;
  left: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  display: none;
}

#cboxLoadedContent {
  overflow: hidden !important;
}

#fensterDesignZweiSpaltenRight {
  overflow: hidden !important;
}
.bgs {
    padding:.4em .8em;
    display:inline-block;
    display:none;
	user-select:none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.upload.bgs {
    display: inline-block;
	display:none;
}
.bgs input {
    display:none;
}
.bgs.needspic {
    display:none;
}
.hasCustomImage .bgs.needspic {
    display:block;
}
div#container3D {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#container3D #customdownload {
    background-image: url(modules/3DAR/ar-controls/download.svg);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    height: 40px;
    line-height: 25px;
    font-size: 0;
    /*background-color: #fff;*/
    /*border: 2px solid #0082c0;*/
    position:absolute;
	width: 40px;
	bottom: 10px;
	left: calc(50% + 50px);
	display:none;
}

#container3D.hasCustomImage.downloadEnabled #customdownload.bgs {
	display:block!important;
}
.hasCustomImage.bgsizeEnabled .bgs.needspic {
    display:block;
}
.bgs.needspic[for] {
    min-width: 25px;
}
#container3D .orbitAus, #container3D .orbitAn {
	border-radius: 16px;
	background-image:url(assets/3d-objekt-aktivieren.svg);
	background-repeat:no-repeat;
	background-position:0 center;
	background-size:28px;
	line-height:30px;
	color:#fff;
	cursor:pointer;
	padding-left:30px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#container3D .orbitAus	{
		height: 30px;
		width: 150px;
		top: 0;
		left: calc(100% - 200px);
		position: absolute;
		opacity: 0;
		background-color: #434343;
		font-size:0;
		content: "3D Objekt sperren";
}
#container3D .orbitAus:after	{
	content: "3D Objekt sperren";
	font-size:12px;
}
#container3D .orbitAn	{
		height: 30px;
		width: 180px;
		position: absolute;
		top: 49%;
		left: calc(50% - 90px);
		background-color:#0082c0;

}
#container3D .orbitAn	img {
		display:none;
}
#container3D .dreiDhinweis {
	color: #fff;
	text-align: center;
	height: 130px;
	width: 270px;
	position:absolute;
	background-color: rgba(80, 80, 80, 0.9);
	left: 0;
	right:0;
	top: 0;
	bottom:0;
	border-radius: 5px;
	pointer-events: none;
	margin: auto;
}
#container3D .dreiDhinweis * {
    box-sizing: border-box;
}
#container3D .dreiDhinweis svg {
	width: 89%;
	height: auto;
	margin-top: 1em;
	display:none;
}
#container3D .dreiDhinweis svg > g > g {
	position:relative;
	display:inline-block;
	border: 2px solid orange;
}
#container3D .dreiDhinweis .hinweistext {
	display:inline-block;
	width:90px;
	padding:1em;
	text-align:center;
	background-image: url("assets/overlay-tuch-ohne-text-gruppiert.svg");
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 280px 80px;
	padding-top: 90px;
	/*border:1px solid #888;*/
}
/*
.gruppe_warenkorb {
    background-color: #f5f5f5;
    padding: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    box-shadow: 0px -2px 5px rgb(0 0 0 / 10%);
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    z-index: 10;
}*/
#container3D .dreiDhinweis .hinweistext#dreiDzoominfo {
	background-position: 5px 10px;
}
#container3D .dreiDhinweis .hinweistext#dreiDmoveinfo {
	background-position: -200px 10px;
}
.bereichsueberschrift {
    background-color: #444444;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    padding: 1em;
    text-align: left;
    margin-top: 0;
	line-height: 1.5em;
}
.bereichsueberschrift strong {
  text-transform: capitalize;
}
.meinung_meinung {
	margin-bottom: 2em;
	border-bottom: 1px solid #f1f1f1;
	background-color: #357DBC;
	color: #fff;
	font-weight: 500;
	border-radius: 12px 12px 0 0;
	box-shadow: 0px 3px 7px #ddd;
	margin-left: auto;
	margin-right: auto;
	width: 98%;
}
.zubehoer_standalone img {
    max-width: 80px;
    height: auto;
}
.meinung_meinung span.bold {
		display: none;
}
.meinung_meinung > span {
		display: inline-block;
		width: 28%;
		margin: 5px 2em;
		line-height: 45px;

}
.meinung_meinung div {
		padding: 2em;
		width: 100%;
		background-color: #fff;
		color: #444;
		text-align: left;
		background: #FFFFFF 0% 0% no-repeat padding-box;

}
.boxIconLeft {
    display: flex;
    align-items: stretch;
}
.boxIconLeft.achtung > .lila {
    background-color: #ffde0e;
}
.boxIconLeft > .lila {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    line-height: 50px;
    text-align: center;
	display:flex;
	align-items:center;
	align-content:center;
}
.boxIconLeft > .lila > img {
    max-width: 70%;
    margin: auto;
}
.boxIconLeft > .rosa {
    flex: 1 1 0;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    align-items: center;
}
#hinweisMasseingabeList {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0;
    list-style-type: none;
}
#hinweisMasseingabeList > li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.boxIconLeft.messen > .lila {
    background-color: #357dbc;
}
.boxIconLeft > .lila {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    line-height: 50px;
    text-align: center;
}
#linkMasseingabeMessanleitung {
    color: #357dbc;
    font-weight: bold;
    text-transform: uppercase;
	white-space: nowrap;
}
.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;
}

@media (pointer: coarse) and (orientation: portrait) {
    #container3D {
        max-width: calc(100% - 60px);
        margin: 0 auto;
		/*max-height:60vH;*/
    }
	.ARModus #container3D {
       /* max-width: none;
        margin: 0;*/
    }
}
.warenkorb_konfi .warenkorb_symbol {
    background-size: auto 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #bf0008;
    width: 40px;
    background-image: url(assets/wk_weiss.svg);
}
.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
    display: inline-block;
    height: 43px;
    line-height: 43px;
    padding-left: 12px;
    padding-right: 12px;
}
/*
.warenkorb_konfi > * {
    color: #ffffff;
}*/
.gruppe_warenkorb {
				background-color: #f5f5f5;
				padding: 10px;
color:#444;
				/*position: fixed;*/
				bottom: 0;
				right: 0;
				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.10);

				margin-top: 1em;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;

				z-index: 10;		/* fuer die .auswahlbox - diese haben einen z-index. Die Warenkorb-Box soll wieder drueber liegen */
		}
				.gruppe_warenkorb > * {
						vertical-align: middle;
						padding-left: 0.5em;
						padding-right: 0.5em;
				}
				.gruppe_warenkorb > *:first-child {
						padding-left: 0;
				}
				.gruppe_warenkorb > *:last-child {
						padding-right: 0;
				}
				.sonderwunsch {
						flex: 1 1 280px;
				}
						.sonderwunsch textarea {
								width: 100%;
								height: 50px;
								border: 1px solid #e6e6e6;
								box-sizing: border-box;
						}
				.box_menge {
						text-align: right;
						flex: 3 0 auto;
				}
						.menge {
								text-align: center;
								display: inline-block;
						}
								.menge input[type="text"], .menge input[type="number"] {
										border: 1px solid #cccccc;
										border-radius: 2px;
										width: 40px;
										color: #444444;
										text-align: center;
										margin-bottom: 0.2em;
								}
				.box_preis {
						flex: 1 0 auto;
						text-align: right;
				}
				.box_warenkorb {
						flex: 1 0 auto;
						text-align: right;
				}
						.warenkorb_konfi {
								cursor: pointer;
								padding-top: 5px !important;		/* Paddings vom Layout ueberschreiben - das HR-Layout bringt noch einen 5Pixel Border-Bottom mit, der hier auch abgezogen ist */
								padding-bottom: 5px !important;
								padding-left: 1em !important;
								padding-right: 1em !important;
						}

		@media (min-width: 800px) and (max-width: 1200px) {
				#button_warenkorb_text {
						display: none;
				}
		}
		@media (max-width: 600px) {

				.gruppe_warenkorb {
						flex-wrap: wrap;
				}
						.gruppe_warenkorb > * {
								text-align: right;
								margin-top: 1em;
								margin-bottom: 1em;
						}
		}