/*
		2021 Mai - Tim - Layout-Komplettumbau
		20.07.2021 - Anpassung der Ausklappbox vom Optionset an das neue Layout
		21.07.2021 - Hoehe vom Markenlogo rausgenommen
		28.09.2021 - Patrick - erhöhen der höhe der artikel beschreibung
		14.08.2023 - Xaver - verändern der Top, vom Sortier Button weil er in die H1 geragt hat
*/

.hinweis_artikel_aus {
	padding:1em;
	background-color:#f00;
	color:#fff;
	font-weight:bold;
	text-align:center;
}
.artikel_nichtlieferbar_banner {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    background-color: rgba(255, 0, 0, .2);
    color: #fff;
    width: 100%;
    white-space: normal;
    padding: 1em;
}
.bestandsinfo { /*margin-top:24px;*/ margin-bottom:24px;display: inline-flex; gap: 0.5em; align-items: center; }
.bestandsinfo .red {color:darkred;}
.bestandsinfo .orange {color:orange;}
.bestandsinfo .green {color:#009D66;}
.bestandsinfo .hauptwort {margin-left: 0.5em; margin-right: 0.5em;}
.bestandsinfo strong {font-weight: 600;}
.bestandsinfo > * { vertical-align: middle; }

.konfektionwrap{
	display: flex;
	width: 100%;
}
.konfektionwrap * {
    box-sizing: border-box;
}
.konfektion .icon {
    display: inline;
    height: 20px;
    width: 20px;
}
.auswahl_variation_box {float:left;}

div.selectBox
			{
				display: block;
				cursor:default;
				text-align:left;
                font-size:1em;
			}
			.optionsetwrapper{
				width: 100%;
			}
			.boxSelect{
				display: flex;
				width: 237px;
				min-width: 237px;
			}
			div.selectBox span.selected, .optionsetHeader
			{
				padding: 0px;
				text-align:center;
				border:1px solid #FFDF00;
				border-right:none;
				background:#FFF7BF;
				vertical-align: top;
				display: flex;
				padding-right: 10px;
				align-items: center;
				font-size: 14px;
			}
			.optionsetHeader{
				display: flex;
				justify-content: space-between;
				padding: 0;
			}
			.optionsetwrapper.active .optionsetHeader{
				margin-bottom: 2em;
			}
				.optionsetHeader .optionsetHeaderLeft{
					display: flex;
					align-items: center;
				}
			.optionsetwrapper .optionbox{
				margin: 2em;
			}
			.optionsetwrapper .optionbox:not(.optionsetwrapper.active .optionbox){
				display: none;
			}
			div.selectBox span.selected{
				width: 198px;
			}

			.selectedDiv{
				display: flex;
			}

			.buttonDown{
				width: 30px;
				display: block;
			}
            div.selectBox span.selected.sel
			{
				line-height:19px;
			}
            div.selectBox span.selected.sel span {
                display: block;
                text-align: center;
            }
			div.selectBox span.selectArrow
			{
				width:42px;
				height: 42px;
                /*transform: scale(2, 1);*/
				border:1px solid #FFDF00;
				/*border-top-right-radius:5px;
				border-bottom-right-radius:5px;*/
				text-align:center;
				font-size:12px;
				align-items: center;
				justify-content: center;
				display: flex !important;
                color:#fff;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				user-select: none;
				background:#FFDF00;
			}
            div.selectBox span.selectArrow.sel
			{

                color:#1a73ff;

				background:#fff;
				vertical-align: top;
			}
            div.selectBox span.selectArrow span {
                display: inline-block;
                transform: scale(1.6, 1);
            }
			div.selectBox span.selectArrow span.sel {

                transform: rotate(180deg) scale(1.6, 1);
            }
			div.selectBox span.selectArrow,span.selected
			{
				height:42px;
				display: inline-block;
			}



			.selectOptions {
				width: 237px;
				min-width: 220px;
				padding: 10px;
			}

			div.selectBox div.selectOptions, .optionsetwrapper:not(.optionsetKederschienen){
				border-left:1px solid #FFDF00;
				border-right:1px solid #FFDF00;
				border-bottom:1px solid #FFDF00;
			}
			div.selectBox div.selectOptions, .optionsetwrapper
			{
				background:#fff;
				display:none;
			}

			div.selectBox span.selectOption {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                width: 100%;
            }

			div.selectBox .selectOptions input[type="number"], div.selectBox .selectOptions input[type="text"] {
					width:45px;
					height: 30px;;
			}

			.trueeaccept {
				display: flex;
				align-items: center;
			}

			.falseaccept {
				display: block;
				align-items: center;
			}

			.falseaccept #acceptLeangth{
				display: none;
			}

			.laengeanpassenDivWarning {
				width: 237px;
				height: 42px;
				z-index: 100;
				position: absolute;
				background: #ffffff;
				border: solid 1px red;
				box-shadow: 0px 0px 5px 0px rgb(224,0,0,0.75);
				-webkit-box-shadow: 0px 0px 5px 0px rgb(224,0,0,0.75);
				-moz-box-shadow: 0px 0px 5px 0px rgb(224,0,0,0.75);
				font-size: 12px;
				align-items: center;
				justify-content: center;
				padding: 5px;
			}

			.laengeanpassenDivWarning strong{
				text-decoration: underline;
			}

			.off {
				display: none;
			}

			.on {
				display: flex;
			}

			#acceptLeangth {
				width: 25px;
				height: 25px;
			}



/* Auswahl eingrenzen */


.auswahl_eingrenzen .aktive_heading {
		font-weight:bold;
}

.auswahl_eingrenzen .auswahlBox {
		color: #3d546c;
}
		.auswahl_eingrenzen .auswahlBoxFarbe {
				padding-top: 15px;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
				grid-column-gap: 8px;
		}

.auswahl_eingrenzen .farbbox {
		border: 1px solid #f1f1f1;
		cursor: pointer;
		float: left;
		font-weight: bold;
		text-align: center;
		width: 40px;
		height: 40px;
		border-radius: 21px;		/* die Haelfte von Breite / Hoehe */
		line-height: 40px;
		font-size: 20px;
		margin-bottom: 8px;
		background-size: 100% 100%;
}

#layout_filter .layout_menu_group_support {
		margin-top: 5em;
}

.auswahl_eingrenzen .beige, .artikelbox .beige { background-color: #d4be8d; color: #ffffff; }
.auswahl_eingrenzen .blau , .artikelbox  .blau{ background-color: #3485ff; color: #ffffff; }
.auswahl_eingrenzen .braun , .artikelbox  .braun{ background-color: #6f3e18; color: #ffffff; }
.auswahl_eingrenzen .gelb , .artikelbox  .gelb { background-color: #fffc00; color: #888888; }
.auswahl_eingrenzen .gruen, .artikelbox  .gruen { background-color: #73b525; color: #ffffff; }
.auswahl_eingrenzen .orange, .artikelbox .orange { background-color: #ff6501; color: #ffffff; }
.auswahl_eingrenzen .rosa, .artikelbox .rosa { background-color: #ed008c; color: #ffffff; }
.auswahl_eingrenzen .rot, .artikelbox .rot { background-color: #ea0001; color: #ffffff; }
.auswahl_eingrenzen .schwarz, .artikelbox .schwarz { background-color: #000000; color: #ffffff; }
.auswahl_eingrenzen .violett, .artikelbox .violett { background-color: #9349aa; color: #ffffff; }
.auswahl_eingrenzen .weiss , .artikelbox .weiss{ background-color: #ffffff; color: #888888; }
.auswahl_eingrenzen .grau, .artikelbox .grau { background-color: #838383; color: #ffffff; }
.auswahl_eingrenzen .silber, .artikelbox .silber { background-color: #c0c0c0; background-image: url("/bilder/filter/farben/silber.svg"); color: #ffffff; }
.auswahl_eingrenzen .gold, .artikelbox .gold { background-color: #ffd700; background-image: url("/bilder/filter/farben/gold.png"); color: #ffffff; }
.auswahl_eingrenzen .messing, .artikelbox .messing { background-color: #ae884b; background-image: url("/bilder/filter/farben/messing.svg"); color:#ffffff; }

.auswahl_eingrenzen .mehrfarbig, .artikelbox .mehrfarbig { background-color: #fff; background-image: url("/bilder/filter/farben/mehrfarbig.svg"); color:#ffffff; }

.auswahl_eingrenzen .transparent, .artikelbox .transparent { background-color: #ffffff; background: linear-gradient(to bottom right, #e1e1e1 0%, #e1e1e1 50%, #ffffff 50%, #ffffff 100%); color:#888888; }




.elemAuswahlWrap {
		display:none;
}

.artikel_alle .auswahl_eingrenzen {
		/* flex: 1 1 0; eigentlich diese Angabe, statt der naechsten, aber der IE11 macht wieder alles kaputt (beim Edge passt es aber) */
		/* flex: 1; */
		flex: 1 0 220px;

		padding-left: 11px;
		padding-right: 11px;
		font-size: 16px;
		border-left: 1px solid #efefef;
		border-right: 1px solid #efefef;
		margin-left: 0;
		margin-right: 22px;
		margin-bottom: 1em;
		font-weight: 300;
}

.auswahl_eingrenzen .unklappbar {
		background-image: none;
		cursor: default;
}



.auswahl_eingrenzen .auswahlUeberschrift {
		padding-top: 1em;
		padding-bottom: 0.2em;
		margin-top: 1px;
		margin-bottom: 0;
		background-image: url(/bilder/filter/steuerung/arrow_inactive.svg);		/* Icon auch in Javascript definiert */
		background-repeat: no-repeat;
		background-position: 94% center;
		background-size: 16px auto;
		cursor: pointer;
		text-align: left;
		color: #6a85a0;
		border-bottom: 1px solid #cfd8dc;
}
		.auswahl_eingrenzen .auswahlUeberschrift:first-child {
				margin-top: 0;
		}


.auswahl_eingrenzen .auswahlUeberschrift.unklappbar {
		background-image: none;
}





.auswahl_eingrenzen .icon:not(.farbbox), .stoffe_alle .auswahl_eingrenzen .icon:not(.farbbox) {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
	text-align: center;
}
.auswahl_eingrenzen h3.auswahlUeberschrift  {
	font-weight: normal;
}

.auswahl_eingrenzen a {
    color: #444;
    text-decoration: none;
	display: inline-block;		/* mit display: block geht der Klickbereich nicht nur ueber den Text, sondern ueber den ganzen Block */
}


.auswahl_eingrenzen label {
		padding-bottom: 6px;
		padding-top: 6px;
		display: block;
		cursor: pointer;

		background-repeat: no-repeat;
		background-position: 96% center;
		background-image: url(/bilder/filter/_schalter_aus.svg);
}
		.auswahl_eingrenzen label.active {
				background-image: url(/bilder/filter/_schalter_an.svg);
				color: #009D66;
		}

.auswahl_eingrenzen label:nth-last-child(+1) {
			border-bottom: 0;
}

		.auswahl_eingrenzen label input[type="checkbox"] {
				vertical-align: middle;
				margin: 4px;
		}

		.auswahl_eingrenzen label img {
				vertical-align: middle;
				margin-left: 0;
				margin-right: 2px;
				margin-top: 0;
				margin-bottom: 0;
		}
		.auswahl_eingrenzen .filterElemBez {		/* .noRange und .hasRange */
				/* white-space: nowrap; */
				display: inline-block;
				/* overflow: hidden; */
				/* text-overflow: ellipsis; */
				vertical-align: middle;
		}
		.auswahl_eingrenzen .noRange .filterElemBez {
				width: 55%;
		}
		.auswahl_eingrenzen .hasRange .filterElemBez {
				background-color: #ffffff;
				color: #3d546c;

				padding-left: 1em;
				padding-right: 1em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				border: 1px solid #d9e1e4;
				border-radius: 3px;
				width: 55%;
		}
		.auswahl_eingrenzen .hasRange.active .filterElemBez {
				color: #009D66;
		}


.auswahl_eingrenzen .linkWrap {

}
.auswahl_eingrenzen .wrap {
		float: none;
}
.auswahl_eingrenzen .link {
		text-decoration: none;
		text-align: center;
		margin-top: 2em;
		cursor: pointer;
		color: #55697e;
		border: 1px solid #e6e6e6;
		border-radius: 23px;
		font-size: 0.9em;
		height: 44px;
		line-height: 44px;
		box-shadow: 0px 2px 3px #2D3E5080;
}
		.link_zuruecksetzen_bez {
				vertical-align: middle;
		}
		.link_zuruecksetzen_img {
				vertical-align: middle;
				height: 24px;
				margin-left: 10px;
		}
.auswahl_eingrenzen .link:hover {
		color: #000000;
		border-color: #888888;
		box-shadow: none;
		position: relative;
		top: 1px;
		left: 1px;
}

.auswahl_eingrenzen .link:active {
		color: #000000;
		border-color: #888888;
		border-style: inset;
}

.rangeHead {
		color: #6A85A0;
		margin-top: 15px;
		margin-bottom: 4px;
		font-size: 14px;
}

.range_input_numbers {
		display: flex;
}
		.range_input_numbers .range_input_numbers_input {
				flex: 50 0 0;
		}
				.range_input_numbers .range_input_numbers_input input {
						font-size: 14px;
				}
		.range_input_numbers .range_input_numbers_separator {
				flex:  4 0 0;
		}
				.range_input_numbers span input {
						width: 100%;
						border-radius: 3px;
						border: 1px solid #d9e1e4;
						padding: 10px;
						box-sizing: border-box;
						color: #009d66;
				}
				.range_input_numbers span input::placeholder {
						color: #d9e1e4;
						opacity: 1;		/* for Firefox */
				}



.btn_range_submit {
		margin-top: 8px;
		text-transform: uppercase;
}



.btn_hover_green {		/* im Filter bie der MAsseingabe - bei den Kundenmeinungen, der Abschicken-Button */
		background-color: #D9E1E4;
		border: 0;
		color: #ffffff;
		width: 100%;
		font-size: 16px;
		padding-top: 10px;
		padding-bottom: 10px;
		border-radius: 3px;
}
.btn_hover_green:hover {
		background-color: #009d66;
}
		.btn_hover_green img {
				margin-left: 10px;
				height: 18px;
		}














a img {
		border: 0;
}

input[type=number] {
		/* z.B. das Mengenfeld */
		-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus */
}

/* Wir haben teilweise eigene Spinner-Buttons eingebaut. Da brauchen wir die vom System nicht zusaetzlich noch */
/* In Chrome/Safari geht es dann so */
/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	  -webkit-appearance: none;
	  margin: 0; /* Removes leftover margin */
}

/* Adds a box around the numeric value in Safari and Chrome */
input[type=number]::-webkit-textfield-decoration-container {

}




/*
		.warenkorb.normal: Ansicht im Ambiente/Artikel
		.warenkorb.box: Ansicht im Warenkorb-Fenster
*/
.warenkorb.box {
		background-color: #e6e6e6;
		color: #444444;
		border: 0;
}
		.button.deaktiviert {
				opacity: 0.4;
				cursor: not-allowed;
		}

.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;
}

/* Ambiente Uebersicht */
.auswahl_motivgruppe {
		text-align: center;
}
		.auswahl_motivgruppe h2 {
				font-weight: normal;
				margin-bottom: 0.3em;
		}
		.auswahl_motivgruppe p {
				margin-top: 0.3em;
				margin-bottom: 1.5em;
		}
		.auswahl_motivgruppe a {
				text-decoration: none;
				display: inline-block;
				position: relative;
		}
				.auswahl_motivgruppe .motivgruppe_out {
						width: 115px;
						height: 120px;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #000000;
						opacity: 0;
				}

		.ambiente_alle .auswahl_eingrenzen .farbbox {
				margin-left: 5px;
		}

/* .ambiente_alle */
.ambiente_alle .listing {
		padding-left: 2.4%;
		padding-right: 2.4%;
		margin-right: -3.6%;
}

.ambiente_alle .listing a {
		display: inline-block;
		width: 300px;
		text-decoration: none;
		margin-right: 3.6%;
		margin-bottom: 1.4em;
		position: relative;
		color: #444444;
}

/*
.ambiente_alle .listing a:nth-child(3n) {		// das geht leider nur, wenn 3 Elemente nebeneinander sind - bei kleinen Bilschirmen mit 2 oder ein Spalten, braeuchten wir 2nth bzw. 1st child - Neue Loesung:  Ich ziehe beim umgebenden DIV margin-right den Wert ab, den ich hier gesetzt haette
		margin-right: 0;
}
*/

		.ambiente_alle .listing .box_detail {
				display: none;
				border: 1px solid #cfcfcf;
				height: 462px;
				left: -10px;
				position: absolute;
				top: -10px;
				width: 310px;
				z-index: 20;
				background-color: #ffffff;
		}
		.ambiente_alle .listing a:hover .box_detail {
				display: block;
		}
		.ambiente_alle .listing a:hover .box_normal {
				z-index: 21;
				position: relative;		/* z-index funktioniert nur in Kombination von position */
		}

				.ambiente_alle .listing .box_detail_bottom {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
				}
						.ambiente_alle .listing .box_detail_bottom .left {
								text-align: left;
								margin: 10px;
						}
						.ambiente_alle .listing .box_detail_bottom .right {
								text-align: right;
								margin: 10px;
						}
								.ambiente_alle .listing .box_detail_bottom .box_detail_bottom_weiter {
										padding: 10px;
										background-color: #888888;
										color: #ffffff;
										font-size: 0.85em;
										display: inline-block;
								}

		.ambiente_hauptbild {
				text-align: center;
				float: left;
		}
				.ambiente_hauptbild img {

				}
		.ambiente_alle .listing .ambiente_hauptbild {
				width: 250px;		/* Die Massangaben dienen als Platzhalter, dass durch .imgPostload nicht gleich alle Bilder geladen werden - aber nur in der Ambiente-Uebersicht, nicht auf der Ambiente-Detailseite */
				height: 376px;
		}
		.ambiente_ueberschrift_set {
				display: inline-block;
				background-color: #888888;
				color: #ffffff;
				width: 31px;
				text-align: center;
				text-transform: uppercase;
				padding: 3px;
				margin-left: 4px;
				margin-bottom: 4px;
				font-size: 11px;
				position: relative;
		}
				.ambiente_ueberschrift_set:after {
						top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(191, 0, 8, 0); border-top-color: #888888; border-width: 5px; margin-left: -5px;
				}

		.ambiente_alle .listing a:hover .ambiente_ueberschrift_set {
				background-color: #bf0008;
		}
				.ambiente_alle .listing a:hover .ambiente_ueberschrift_set:after {
						border-top-color: #bf0008;
				}

		.ambiente_alle .listing .ambiente_artikel {
				float: left;
				margin-left: 1.6%;
				margin-left: 1.6%;
				padding-bottom: 8px;
		}

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

				.box_suche {
						text-align: right;
						position: absolute;
						right: 0;
						top: -35px;
				}
						.box_suche input[type="text"] {
								border-left: 1px solid #d2d2d2;
								border-top: 1px solid #d2d2d2;
								border-bottom: 1px solid #d2d2d2;
								border-right: 0;
								color: #bbbbbb;
								font-size: 10px;
								width: 88px;
								padding: 4px;
								height: 13px;
						}
						.box_suche input[type="submit"], .box_suche button[type="submit"] {
								border-left: 0;
								border-top: 1px solid #d2d2d2;
								border-bottom: 1px solid #d2d2d2;
								border-right: 1px solid #d2d2d2;
								vertical-align: bottom;
								background-color: #f4f4f4;
								background-image: url(/i/stoffuebersicht_lupe.png);
								background-repeat: no-repeat;
								background-position: 3px 3px;
								width: 22px;
								height: 23px;
						}















/* Listing */



.artikel_alle {
		border-top: 2px solid #F6F6F6;
		padding-top: 1.5em;
}

		.artikel_alle h2 {
				margin-top: 0;
				margin-bottom: 0;
		}



		.ueberschrift_suche {
				margin-top: 0;
				padding-top: 0;
				margin-bottom: 75px;	/*Xaver: sortier Button ragt sonst in die H1*/
				position: relative;		/* fuer das absolut positionierte Sortier-Feld */
		}

				.ueberschrift_suche h1 {
						font-size: 32px;
						font-weight: lighter;
						margin: 0;
						padding: 0;
						text-align: center;
				}
						.ueberschrift_suche h1 .ueberschriftTeil1 {		/* wenn wir nicht gerade eine SEO-Seite mit SEO-Ueberschrift haben, steht da "Artikel" [...] */
								font-weight: bold;
						}
				.ueberschrift_suche #sortierung {
						position: absolute;
						right: 0;
						top: 50px;
						background-color: #F9FAFA;
						background-image: url(/artikel/bilder/icons/sortierung.svg);
						background-repeat: no-repeat;
						background-position: 5% 50%;
						padding-top: 15px;
						padding-bottom: 15px;
						padding-left: 40px;
						padding-right: 15px;
						border-radius: 3px;
						border: 1px solid #CFD8DC;
						box-shadow: 0px 2px 4px #3D546C29;
						color: #6A85A0;
						-webkit-appearance: none;
				}
				.ueberschrift_suche #sortierung:hover {
						background-color: #3D546C;
						color: #ffffff;
						background-image: url(/artikel/bilder/icons/sortierung-weiss.svg);
						-webkit-appearance: none;
				}
				.ueberschrift_suche #sortierung[data-chosen='preis_asc'] {
						background-image: url(/artikel/bilder/icons/sortierung-auf.svg);
				}
				.ueberschrift_suche #sortierung[data-chosen='preis_asc']:hover {
						background-image: url(/artikel/bilder/icons/sortierung-auf-weiss.svg);
				}
				.ueberschrift_suche #sortierung[data-chosen='preis_desc'] {
						background-image: url(/artikel/bilder/icons/sortierung-ab.svg);
				}
				.ueberschrift_suche #sortierung[data-chosen='preis_desc']:hover {
						background-image: url(/artikel/bilder/icons/sortierung-ab-weiss.svg);
				}

						.ueberschrift_suche #sortierung option {
								background-color: #ffffff;
								color: #3D546C;
								box-shadow: 0px 1px 3px #00000029;
								border: 1px solid #CFD8DC;
								border-radius: 3px;
								padding-top: 15px;
								padding-bottom: 15px;
						}
						/*
						.ueberschrift_suche #sortierung:hover option {
								background-color: blue;
								color: #3D546C;
								border-radius: 3px;
								border: 1px solid #cfd8dc;
						}

						.ueberschrift_suche #sortierung option:hover {
								/ - * geht irgendwie nicht (im Firefox 89.0.1) * - /
								color: #009D66;
								background-color: green !important;

						}
						.ueberschrift_suche #sortierung:hover option:hover {
								/ - * geht irgendwie nicht (im Firefox 89.0.1) * - /
								color: #009D66;
								background-color: green !important;

						}
						*/

				@media (max-width: 1200px) {
						.ueberschrift_suche {
								text-align: centeR;
						}
						.ueberschrift_suche #sortierung {
								position: static;
								right: auto;
								top: auto;
								margin-top: 1em;
						}
				}


.artikel_alle .listing {
		margin-bottom: 3em;		/* Abstand zum Trenner-Banner */
}
		.artikel_alle .listing .listing_group {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));		/* Soll: 220px */
				grid-column-gap: 20px;
		}
		@media (max-width: 700px) {
				.artikel_alle .listing .listing_group {
						grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
				}
		}
		@media (max-width: 400px) {
				.artikel_alle .listing .listing_group {
						grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
				}
		}

				.artikel_alle .listing .listing_group .artikelbox {
						margin-bottom: 1em;
						position: relative;
						vertical-align: top;
						text-align: center;
				}
						.artikel_alle .listing .listing_group .artikelbox a {
								text-decoration: none;
								color: #080808;
								display: block;
						}

								.artikel_alle .listing .listing_group .artikelbox .shadowbox {
										box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
										border-radius: 3px;
										overflow: hidden;		/* am die abgerundeten Ecken abzuschneiden */
										padding-bottom: 1.5em;
								}


										.artikel_alle .listing .listing_group .hauptbild {
												text-align: center;
												width: 100%;
												min-height: 120px;
												position: relative;
										}
												.artikel_alle .listing .listing_group .hauptbild img {
														display: block;
														width: 100%;
												}
												.artikel_alle .listing .listing_group .hauptbild .hoverBackground {
														display: none;
														position: absolute;
														left: 0;
														top: 0;
														width: 100%;
														height: 100%;
														background-color: #080808;
														opacity: 0.4;
												}
												.artikel_alle .listing .listing_group .hauptbild .hover {
														display: none;
														position: absolute;
														left: 0;
														top: 40%;
														width: 100%;
												}
														.artikel_alle .listing .listing_group .hauptbild .hover > div {
																padding-top: 1em;
																padding-bottom: 1em;
																padding-left: 2em;
																padding-right: 2em;
																border: 2px solid #ffffff;
																color: #ffffff;
																text-transform: uppercase;
																margin: auto;
																display: inline-block;
																font-size: 18px;
																font-weight: 300;
														}
												  .artikel_alle .listing .listing_group .artikelbox a:hover .hoverBackground
												, .artikel_alle .listing .listing_group .artikelbox a:hover .hover
												{
														display: block;
												}

										.artikel_alle .listing .listing_group .artikelbox .farbboxen {
												margin-top: 1em;
										}
												.artikel_alle .listing .listing_group .artikelbox .farbbox {
														width: 18px;
														height: 18px;
														line-height: 18px;
														display: inline-block;
														border: 1px solid #cacaca;
														text-align: center;
														font-weight: bold;
														cursor: pointer;
														margin-right:3.8%;
												}
												.artikel_alle .listing .listing_group .bezeichnung {
														font-size: 13px;
														font-weight: 300;
														margin: 12px;
														text-align: left;

														/*
														Diese Box soll immer zwei Zeilen hoch sein. Auch wenn nur Text im Wert von einer Zeile da ist. Text im Wert von 3 Zeilen soll nicht vorkommen.
														Height auf 2em setzen reicht nicht aus. 1em = aktuelle font-size
														Die Zeilenhoehe ist aber groesser als 1em (font-size)
														*/
														line-height: 1.4em;			/* Wahrsscheinlich die Standardeinstellung von Firefox */
														height: 4.2em;			/* Ein Vielfaches von line-height. In diesem Fall 2 Zeilen. - min-height statt height: Falls es dochmal mehr als zwei Zeilen werden sollen */
														overflow: hidden; text-overflow: ellipsis;

												}
												.artikel_alle .listing .listing_group .preis {
														font-weight: 600;
														text-align: center;
														font-size: 13px;
														color: #ffffff;
														background-color: #009D66;
														padding: 13px;
														box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
														border-radius: 30px;
														position: relative;
														bottom: 20px;
														display: inline-block;
												}

		.artikel_alle .listing .listing_zwischenueberschrift {

		}

.einzelartikel_trenner {
		text-align: center;
		margin-top: 1em;
		margin-bottom: 1em;
		border-top: 1px solid #e6e6e6;
		position: relative;
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
}
		.einzelartikel_trenner img.trenner {
				max-width: 970px;		/* die eigentliche Bildgroesse */
				width: 100%;			/* so wird es responsive dynamisch gross */
				display: block;			/* so koennen die Margins zwischen diesem und dem darauf folgenden Element zusammenfallen */
				margin-left: auto;
				margin-right: auto;
				margin-top: 3em;
				margin-bottom: 2em;
		}
		.einzelartikel_trenner .text {
				font-size: 0.85em;
				margin: 2em;
		}

.text_after {
		margin-top: 1em;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox, ab Version 2 mit -moz-, auch in Version 49 immernoch mit Praefix */
		column-count: 2;

		-webkit-column-gap: 5em;
		-moz-column-gap: 5em;
		column-gap: 5em;


		border-top: 1px solid #e6e6e6;
		padding-top: 2em;
		margin-bottom: 2em;
}
		.text_after > *:first-child {
				margin-top: 0;
				padding-top: 0;
		}
.noCols {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
}
@media (max-width: 1000px) {
		.text_after {
				-webkit-column-count: 1;
				-moz-column-count: 1;
				column-count: 1;
		}
}











/* Einzelnes Ambiente mit Bestellmoeglichkeit */
.ambiente {

}
		.ambiente h2.titel {
				font-weight: normal;
				margin-top: 0;
				margin-bottom: 0;
				font-size: 1.5em;
		}


		.ambiente > .details_head {
				padding-top: 8px;
				padding-bottom: 8px;
				margin: 0;
				font-size: 11px;
				font-weight: normal;
				cursor: pointer;
		}
		.ambiente > .details_head:first-child {
				border-top: 1px solid #e6e6e6;
		}
				.ambiente > .details_head span {		/* der Pfeil */
						display: inline-block;
				}
		.ambiente > .details_box {
				/* display: none; */
				height: 0;
				overflow: hidden;
				font-size: 0.85em;
		}


		.ambiente .block_number_set {
				display: inline-block;
				background-color: #bf0008;
				color: #ffffff;
				padding-top: 7px;
				padding-bottom: 7px;
				padding-left: 19px;
				padding-right: 19px;
				text-transform: uppercase;
				font-size: 0.85em;
				margin-bottom: 2px;
				position: relative;
				text-align: center;
		}
				.ambiente .block_number_set:after {
						top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(191, 0, 8, 0); border-top-color: #bf0008; border-width: 2px; margin-left: -2px;
				}
		.ambiente .block_number {
				display: inline-block;
				background-color: #888888;
				color: #ffffff;
				padding-top: 7px;
				padding-bottom: 7px;
				padding-left: 19px;
				padding-right: 19px;
				text-transform: uppercase;
				font-size: 0.85em;
				margin-bottom: 2px;
				position: relative;
				text-align: center;
		}
				.ambiente .block_number:after {
						top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(191, 0, 8, 0); border-top-color: #888888; border-width: 2px; margin-left: -2px;
				}

		.ambiente .bestellung {
				clear: both;
				margin-top: 3em;
		}

		.ambiente .box_bottom_artikel_title {
				font-size: 0.85em;
				margin-top: 4px;
				margin-bottom: 4px;
		}


		.ambiente .ambienteUebersicht {
				margin-top: 1.5em;
		}
				.ambiente .ambienteUebersicht > div {
						vertical-align: top;
						display: table-cell;
				}
						.ambiente .ambienteUebersicht > .left {

						}

						.ambiente .ambiente_hauptbild {
								width: 100%;
						}

						.ambiente .artikelbild {
								display: block;
								max-width: 161px;		/* Groesse vom Artikelbild */
								float: left;
								margin-left: 2.5%;
								position: relative;
								text-decoration: none;
								color: #444444;
								position: relative;		/* um den Hinweis "nicht verfuegbar" platzieren zu koennen */
						}
								.ambiente .artikelbild img {
										border: 0;
										display: block;
										width: 100%;
								}
								.ambiente .artikel_nichtlieferbar_bild {
										opacity: 0.4;
								}
								.ambiente .artikel_nichtlieferbar_banner {
										position: absolute;
										width: 100%;
										left: 0;
										top: 40%;
										color: #ffffff;
										background-color: #bf0008;
										text-align: center;
										padding: 0.5em;
										box-sizing: border-box;
								}
								.ambiente .operator {
										position: absolute;
										top: 130px;
										left: -30px;
										font-size: 2em;
										width: 50px;
										height: 50px;
										line-height: 50px;
										text-align: center;
										z-index: 0;
										color: #444444;
								}
										.ambiente .operator:after {
												content: "";
												background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMAAwYNJkJYZHGAj6/A5vkjOo6/AAAA3ElEQVR4XnWUPQ4BURRGrxEkNJYwhZ4dSPQyeo1aww4sYZZApaWxDNEoJbMDEiYMMa5B5sfLO6c9eb/3flcyWuPt8bDsiYkz1B8b91+UfU2JOkVRmmnOrSk5fS2yz0VV/xllZm6YeyrqarKAJdmi/BTzJM9iwu9bAouJP2+qqY1pYrpWc0mMbzWRiKN2XKmAGUgDzFraYM7igQllAuYqKzAP2YF5SgAmlhOYFxvejW/At+aX8u/wj3IVuHJcbe4Q7iruRO5e7nhOCSeL08gJ5tTzpODpwhOJpxhPvjcyL8pgyaS6UgAAAABJRU5ErkJggg==');	/* white circle */
												opacity: 0.7;
												top: 0;
												left: 0;
												bottom: 0;
												right: 0;
												position: absolute;
												background-repeat: no-repeat;
												z-index: -1;
										}
								.ambiente .artikelbild .linktext {
										display: inline-block;
										color: #888888;
										background-color: #e6e6e6;
										padding: 11px;
										font-size: 0.85em;
								}



@media (max-width: 500px) {
		.ambiente .ambienteUebersicht > .left {
				display: block;
				float: none;
				width: auto !important;
		}
		.ambiente .ambienteUebersicht > .right {
				display: none;
		}
}

.artikelTrenner {
		border-top: 1px solid #e6e6e6;
		position: relative;
}
		  .artikelTrenner .icon_plus				/* Artikel-Trenner im Ambiente */
		, .einzelartikel_trenner .icon_plus		/* Ambiente-Artikel-Trenner in der Artikel-Uebersicht */
		{
				position: absolute;
				left: 50%;
				margin-left: -27px;
				top: -27px;
		}

.artikel {
		margin-top: 1.4em;
		margin-bottom: 3em;
}

		.artikel .logo {
				max-width: 150px;
				margin-bottom: 0.2em;
		}
		.artikel .logo.m_4decor {

		}
		.artikel .logo.m_lysel {

		}
		.artikel .logo.m_basic_shades {

		}

		.artikel .markenueberschrift {
				color: #888888;
				font-size: 0.85em;
		}

		.artikel .titel {
				font-weight: lighter;
				font-size: 18px;
				color: #000000;
				margin-top: 0.3em;
				margin-bottom: 10px;
		}
		.artikel .artikelnummer_top {
				display: none;		/* intended for small layout */
		}
		.artikel .artikelnummer {
				font-size: 16px;
		}

		.artikel .artikel_table_main {
				display: grid;
				align-items: start;

				grid-template-columns: 35fr 21fr 42fr;
				grid-template-rows: auto 1fr;
				gap: 70px;
				grid-template-areas:
						"produktbild bezeichnung bestellung"
						"produktbild bemassung bestellung";


		}
				  .artikel .artikel_table_main > .produktbild
				, .artikel .artikel_table_main > .bezeichnung
				, .artikel .artikel_table_main > .bemassung
				, .artikel .artikel_table_main > .bestellung {

				}

				.artikel .artikel_table_main > .produktbild {
						grid-area: produktbild;
						text-align: center;
						box-sizing: border-box;
				}
				.artikel .artikel_table_main > .produktbild .middleContainer {
						max-width: 500px;		/* reale Pixel-Breite vom Bild */
						position: relative;		/* um den Schriftzug "Artikel nicht verfuegbar" platzieren zu koennen */

						white-space: nowrap;

						overflow: auto;



						/* hide scrollbar, but keep functionality (instead of "overflow: hidden"), scroll-functionality is needed on touch defice */
						-ms-overflow-style: none;  /* IE and Edge */
						scrollbar-width: none;  /* Firefox */
				}
				.artikel .artikel_table_main > .produktbild .middleContainer::-webkit-scrollbar {
						display: none;
				}


						.artikel .artikel_table_main > .produktbild .artikelbild_gross {
								width: 100%;
						}
						.artikel .preview {
								text-align: left;
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.artikel .preview > img {
										margin-right: 2%;
										cursor: pointer;
										width: 50px;
								}
						.artikel .link_dekobeispiele {
								display: none;	/* wird per PHP/Javascript auf 'block' gesetzt */
								margin-left: auto;
								margin-right: auto;
								text-align: left;
								text-decoration: none;
								font-size: 0.85em;
								background-color: #bf0008;
								padding: 0.5em;
						}

								.artikel .link_dekobeispiele .icon {
										vertical-align: middle;
										display: inline-block;
										/* width: 20%; */
										padding-left: 0.5em;
										padding-right: 0.5em;
								}
										.artikel .link_dekobeispiele .icon img {
												display: block;
												width: 100%;
										}
								.artikel .link_dekobeispiele .text {
										vertical-align: middle;
										display: inline-block;
										color: #ffffff;
										padding-left: 0.5em;
										padding-right: 0.5em;
								}
								.artikel .link_dekobeispiele .pfeil {
										vertical-align: middle;
										display: inline-block;
										color: #ffffff;
										padding-left: 0.5em;
										padding-right: 0.5em;
								}
								.artikel .zeichnung {
										margin-top: 2em;
								}
										.zeichnung_bild {
												text-align: center;
										}
												.artikel .zeichnung img {
														margin-top: 1em;
														width: 48%;
														/*border: 1px solid #efefef;*/
														max-height: 500px;
												}
								.artikel .bemassung {
										text-align: center;
								}
										.artikel .bemassung ul {
												list-style-type: none;
												display: inline-block;
												padding: 0;		/* die Browser (z.B. aktueller Firefox 89) machen beim ul standardmaessig eine pading-left ran, den ich hiermit wieder an dieser Stelle weg haben wikk */
										}
								.artikel #colorBoxHiddenContent {
										display: none;
								}


				.artikel .artikel_table_main > .bezeichnung {
						grid-area: bezeichnung;
				}
				.artikel .artikel_table_main > .bemassung {
						grid-area: bemassung;
				}
						.kundenbewertung {
								margin-top: 1em;
								margin-bottom: 2em;
						}
								.kundenbewertung_bezeichnung {
										vertical-align: middle;
								}
								.sternewertung {
										font-size: 0.85em;
								}
										.sternewertung img {
												vertical-align: middle;
												height: 16px;
												margin-left: 6px;
										}
										.sternewertung img:first-child {
												margin-left: 0;
										}
						.artikel .link_kundenmeinungen {
								cursor: pointer;
								display: block;
								text-decoration: none;
								color: #6b6b6b;
								font-size: 11px;
						}
						.artikel .link_kundenbilder {
								cursor: pointer;
								display: flex;
								text-decoration: none;
								color: #888888;
								font-size: 0.9em;
								margin-top: 1em;
								align-content: center;
								align-items: center;
								column-gap: 1em;
						}
						.artikel .link_kundenbilder img {
							max-height:50px;
						}


						.box_ergaenzend {
								margin-top: 4em;
								border-top: 1px solid #e6e6e6;
								padding-top: 8px;
								padding-bottom: 8px;
								margin-bottom: 3em;
								font-size: 0.85em;
						}

								.box_ergaenzend .ergaenzend_ueberschrift {
										font-size: 1.4em;
								}
								.box_ergaenzend .ergaenzend_leiste {
										display: flex;
										margin-top: 1em;
								}
										.box_ergaenzend .ergaenzend_scroll_button {
												cursor: pointer;
												user-select: none;
												flex: 0 0 40px;
												background-color: #ffffff;
												z-index: 1;		/* ueber den drunter scrollenden Inhalt */
										}
										.box_ergaenzend .ergaenzend_scroll_button.top {
												text-align: left;
										}
										.box_ergaenzend .ergaenzend_scroll_button.bottom {
												text-align: right;
										}
												.box_ergaenzend .ergaenzend_scroll_button img {
														height: 30px;
														position: relative;
														top: 90px;
												}


										.box_ergaenzend .box_ergaenzend_scroll {
												display: flex;
												flex: 1 0 0;

												overflow: auto;
												/* hide scrollbar, but keep functionality (instead of "overflow: hidden"), scroll-functionality is needed on touch defice */
												-ms-overflow-style: none;  /* IE and Edge */
												scrollbar-width: none;  /* Firefox */

												margin-left: -25px;
												margin-right: -25px;
										}
										.box_ergaenzend .box_ergaenzend_scroll::-webkit-scrollbar {

										}


												.box_ergaenzend .ergaenzend_artikel
												{
														color: #444444;
														flex: 0 0 200px;
														text-decoration: none;
														padding-left: 25px;
														padding-right: 25px;
												}
														.box_ergaenzend .ergaenzend_artikel .img
														{

														}
														.box_ergaenzend .ergaenzend_artikel .text
														{
																text-align: center;
																margin-top: 0.5em;
														}
																.box_ergaenzend .ergaenzend_artikel .text .preis
																{
																		font-weight: bold;
																		margin-right: 0.4em;
																}
																.box_ergaenzend .ergaenzend_artikel .text .raquo_ansehen
																{
																		white-space: nowrap;
																		margin-left: 0.4em;
																}
																.box_ergaenzend .ergaenzend_artikel .text .raquo
																{
																		text-decoration: none;
																}
																.box_ergaenzend .ergaenzend_artikel .text .ansehen
																{

																}

												.box_ergaenzend .ergaenzend_artikel img
												{
														max-width: 100%;
												}

										.box_ergaenzend .ergaenzend_artikel, .ergaenzend_artikel:visited {
												color: #444444;
										}
												.box_ergaenzend .ergaenzend_weitere_img {
														max-width: 100%;
												}

				.artikel .artikel_table_main > .bestellung {
						grid-area: bestellung;
				}
						.artikel .auswahl_ueberschrift {
								font-size: 15px;
								font-weight: normal;
								margin-bottom: 1em;
								margin-top: 0;
						}
								.auswahl_groesse_part {
										display: inline-block;
										width: 40%;
										margin-right: 5%;
								}
								.artikel .auswahl_zwischenueberschrift {		/* bei den Select-boxen "Breite", "Hoehe" */
										font-size: 0.85em;
										font-weight: normal;
										margin-top: 0;
										margin-bottom: 0.4em;
								}
								.artikel .groessen_info {
										margin-top: 2em;
										margin-bottom: 1em;
								}
										.artikel .groessen_info img {
												width: 269px;
										}

						.trenner_auswahl_info {
								border: 0;
								height: 0;
								margin-top: 0.5em;
								margin-bottom: 0;
								padding: 0;
						}

						.artikel .details_head, .artikel .accordeon_head {
								padding-left: 15px;
								padding-right: 15px;
								/*height: 55px;*/
								height: 69px;
								margin: 0;
								font-size: 16px;
								font-weight: normal;
								cursor: pointer;
								display: flex;
								justify-content: space-between;
								align-items: center;
						}
						.artikel .details_head {
								border-bottom: 1px solid #e6e6e6;
						}
								.artikel .accordeon_head_gewaehlt {
										display: none;
										font-size: 12px;
								}
										.artikel .accordeon_head_gewaehlt img {
												height: 50px;
												display: block;
										}
								.artikel .accordeon_head_pfeil {

								}
						.artikel .accordeon_head.box {
								border: 1px solid #CFD8DC;
								box-shadow: 0px 1px 3px #00000029;
								border-radius: 3px;
						}
						.artikel .accordeon_head.line {
								border-bottom: 1px solid #e6e6e6;
						}
						.artikel .details_head:first-child, .artikel .accordeon_head:first-child {
								border-top: 1px solid #e6e6e6;
						}
								.artikel .details_head span, .artikel .accordeon_head span {		/* der Pfeil */
										display: inline-block;
								}
						.artikel .details_box {
								/* display: none; */
								height: 0;
								overflow: hidden;
								font-size: 0.85em;
						}
						.artikel .accordeon_box {
								/* display: none; */
								height: 0;
								overflow: hidden;
								font-size: 0.85em;
								margin-bottom: 8px;
						}
								.artikel .accordeon_box_inner {
										padding: 1em;
								}
								.artikel .mediathek {
										margin-top: 12px;
								}
										.artikel .mediathek .box {
												display: inline-block;
												/*border: 1px solid #e6e6e6;*/
												color: #444444;
												text-decoration: none;
												margin-right: 2%;
												margin-bottom: 2%;
												/*width: 47%;*/
												width: 30%;
										}
										@media (max-width: 900px) {
												.artikel .mediathek .box {
														width: 97%;
												}
										}
												.artikel .mediathek .box .box_icon, .artikel .mediathek .box .box_text {
														float: left;
												}
														.artikel .mediathek .box .box_icon img {
																display: block;
																width: 32px;
																height: 32px;
														}
												.artikel .mediathek .box .box_text {
														padding-left: 10px;
														padding-top: 2px;
														vertical-align: top;
														font-size: 11px;
												}
												.artikel .mediathek .box .montageanleitung {
														padding-top: 7px;
												}

						.artikel .auswahl_variation {
								margin-top: 1em;
								margin-bottom: 1em;
						}
								.artikel .auswahl_variation_box {
										display: inline-block;
										margin-bottom: 1em;
										margin-right: 0.4em;
										cursor: pointer;
										text-align: center;
										/* width: 112px; die Boxen sind zu verschieden um hier eine feste Breite ansetzen zu koennen */

										border: 2px solid #ffffff;
										box-shadow: 0px 3px 6px #00000029;
										color: #000000;

										padding: 7px;
										font-size: 12px;
										text-align: left;
										/*max-height: 45px;*/
										max-height: 74px;
								}
								.options{
									display: flex;
									flex-wrap: wrap;
								}
								#laengeanpassenDiv {
									width:250px;
								}

								@media(min-width: 2214px){
									#laengeanpassenDiv {
										margin-left: 55px;
										margin-top:10px;
									}
								}
								@media(max-width: 2214px){
									#laengeanpassenDiv {
										width: 305px;
									}
								}
								@media(max-width: 1550px) {
									.boxSelect{
										display: flex;
										width: 237px;
										min-width: 237px;
									}
								}
								.artikel .auswahl_variation_box:hover {
										border-color: #999999;
										color: #444444;
								}
								.artikel .auswahl_variation_box.selected {
										border-color: #009D66;
								}
								  .artikel .auswahl_variation_box.disabled
								, .artikel .auswahl_variation_box.disabled:hover {
										cursor: not-allowed;
										color: #cccccc;
										box-shadow: none;
										border-color: #eeeeee;
								}

									.artikel .auswahl_variation_box img {
											width: 50px;
									}


									.artikel .auswahl_variation_select {
											background-color: #f1f1f1;
											color: #444444;
											border: 1px solid #cccccc;
											font-size: 11px;
											padding: 0.5em;
											width: 100%;
									}
											.artikel .auswahl_variation_select option:disabled {
													color: #cccccc;
													cursor: not-allowed;
											}

						.artikel .massanfertigung {
								border-top: 1px dashed #bde5bf;
								border-bottom: 1px dashed #bde5bf;
								color: #00900a;
								font-size: 0.85em;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
								padding-left: 30px;
								background-image: linear-gradient(to right, #ffffff 0%, #e8fcea 50%, #ffffff 100%);
								/*list-style-image: url(/flaechenvorhang/bilder/haken.png);*/
								margin-bottom: 0;
						}
								.artikel .massanfertigung li {
										padding-top: 0.25em;
										padding-bottom: 0.25em;
								}
										.artikel .massanfertigung li a {
												color: #00900a;
										}

						.linkArtikel {			/* Link Muster / Link Konfigurator */
								margin-top: 2em;
								white-space: nowrap;
								display: inline-block;		/* auch a-Tags ist diese Klasse zuegordnet */
								background-color: #e5f5ef;
								border: 1px solid #009D66;
								border-radius: 2em;
						}
							.linkMuster {
									cursor: pointer;
							}
							.linkZuschhnitt {

							}
							.LangenhinweissDiv {
								width: 258px;
								height: 53px;
								margin-top: 2em;
								background-color: #e5f5ef;
								border: 1px solid #009D66;
								border-radius: 2em;
								display: flex;
								align-items: center;
								overflow: hidden;
								border:solid 1px #FFDF00;
								background: #FFDF0040;
								justify-content: center;
							}
							.LangenhinweissDiv div{
								width: 100px;
								display: flex;
								justify-content: center;
								background: red;
								height: 100%;
								align-items: center;
								background: #FFDF00;
								padding-left: 5px;
							}
							.LangenhinweissDiv div img{
								width: 70%;
								margin-bottom: 4px;;
							}
							.LangenhinweissDiv span{
								margin-left: 14px;
								font-size: 13px;
							}
								.linkArtikelText, .linkArtikelSymbol {
										display: inline-block;
										line-height: 27px;
										height: 27px;
										vertical-align: middle;
								}
								.linkArtikelText {
										text-align: center;
										padding-top: 13px;
										padding-bottom: 13px;
										padding-left: 23px;
										padding-right: 23px;
										color: #009D66;
										width: 160px;		/*  So dass die Buttons "Muster", "Palene Konfigurieren" und "Haube Konfigurieren" gleich breit sind */
								}
										.lighter {
												font-weight: lighter;
										}
										.linkArtikelText a, .linkArtikelText a:link, .linkArtikelText a:hover, .linkArtikelText a:visited, .linkArtikelText a:active {		/* fuer den Livezilla-Link */
												text-decoration: none;
												color: #009D66;
										}
								.linkArtikelSymbol {
										background-repeat: no-repeat;
										background-position: 0% 50%;
										background-size: 25px 25px;
										width: 50px;
										padding-left: 0;
										padding-right: 0;
								}
								@media (max-width: 560px){
									.LangenhinweissDiv {
										transform: translateX(-50%);
										margin-left: 50%;
									}
								}
								@media (max-width: 500px) {
										.linkArtikelSymbol {
												padding-left: 0;
										}

								}
								.linkMuster .linkArtikelSymbol {
										background-image: url('/artikel/bilder/icon_stoffmuster.svg');
								}
								.linkZuschnitt .linkArtikelSymbol {
										background-image: url('/artikel/bilder/icon_plane_gruen.svg');
								}
								.linkHaube .linkArtikelSymbol {
										background-image: url('/artikel/bilder/icon_haube_gruen.svg');
								}

				.artikel .artikel_table_main .preisMengeWarenkorb {
						display: block;
						width: auto;
						max-width: 330px;
						text-align: right;
						margin-left: auto;
						margin-right: auto;
				}
				.artikel .packungsgroesse_rabatt {
						text-align: center;
						margin-top: 2em;
						margin-bottom: 2em;
				}
						.artikel .packungsgroesse_rabatt table {
								border-spacing: 0;
								margin-top: 1em;
								margin-left: auto;
								margin-right: auto;
						}
								.artikel .packungsgroesse_rabatt table td {
										padding-right: 0;
										padding-left: 1em;
										border-bottom: 1px solid #cfd8dc;
										padding-top: 0.5em;
										padding-bottom: 0.5em;
										vertical-align: top;
								}
								.artikel .packungsgroesse_rabatt table tr:last-child td {
										border-bottom: none;
								}
								.artikel .packungsgroesse_rabatt .rabatt_preis {
										font-weight: lighter;
								}
								.artikel .packungsgroesse_rabatt .rabatt_preisQm {
										font-size: 12px;
										font-weight: lighter;
								}
								.artikel .packungsgroesse_rabatt table tr > td:first-child {
										padding-left: 0;
								}
								.artikel .verpackungseinheit_bezeichnung {
										text-align: right;
								}
								.artikel .verpackungseinheit_preis {
										font-weight: lighter;
								}
				@media (max-width: 500px) {
						.artikel .artikel_table_main .preisMengeWarenkorb,  .artikel .packungsgroesse_rabatt {
								display: block;
						}
								.artikel .packungsgroesse_rabatt table {
										width: 100%;
								}

				}
						.artikel .preis {
								font-size: 1.5em;
								margin-top: 10px;
								font-weight: bold;
						}
						.artikel .gp, .artikel_alle .listing .gp {
								font-size: 12px;
								font-weight: normal;
								display: block;
								color: #666666;
						}
						.artikel_alle .listing .gp {
								position: relative;
								bottom: 15px;
						}
						.artikel .zusatz {
								font-size: 10px;
								color: #888888;
						}

						.artikel .anderesMass {
								text-align: center;
								margin-bottom: 1em;
						}
						.artikel .menge {
								text-align: center;
								margin-top: 1em;
								margin-bottom: 1em;
								white-space: nowrap;
								display: flex;
								align-items: center;
						}
						.artikel .menge, .artikel .menge input {
								font-size: 16px;
						}
								.artikel .menge * {
										vertical-align: middle;
								}
								.artikel .menge_wort {
										margin-left: 0.5em;
										margin-right: 0.5em;
										display: inline-block;
								}
								.artikel .menge_box {
										display: inline-block;
										white-space: normal;
								}

										.artikel .menge .up, .artikel .menge .down,
										.artikel .menge input {
												padding: 1px;
												display: inline-block;
										}

										.artikel .menge .up, .artikel .menge .down {
												width: 14px;
												background-color:#f9f9f9;
												color:#cdcdcd;
												font-size:11px;
												cursor: pointer;
												user-select: none;
												border: 1px solid #cdcdcd;
												width: 44px;
												height: 44px;
												line-height: 44px;
												box-shadow: 0px 3px 6px #00000029;
										}
										.artikel .menge .up:active, .artikel .menge .down:active {
												box-shadow: none;
										}
										.artikel .menge input {
												border-top: 1px solid #cdcdcd;
												border-bottom: 1px solid #cdcdcd;
												border-left: 0 !important;
												border-right: 0 !important;
												height: 40px;
										}

								.artikel input[type="text"], .artikel input[type="number"] {
										width: 80px;
										color: #444444;
										text-align: center;
								}


						.rabatt_prozent {		/* fuer Mengeneinheit und Rabatt */
								color: #ff033e;
								font-weight: bold;
						}
						.artikel .artikel_table_main .sonderwunsch {
								margin-top: 2em;
								margin-bottom: 2em;
						}
								.artikel .artikel_table_main .sonderwunsch textarea {
										width: 100%;
										height: 4em;
										border: 1px solid #e6e6e6;
										padding: 6px;
										max-width: 100%;
										box-sizing: border-box;
										font-size: 16px;
								}
								.artikel .artikel_table_main .sonderwunsch textarea::placeholder {
										background-image: url(/artikel/bilder/stift.svg);
										background-repeat: no-repeat;
										background-position: 5% 50%;
										padding-left: 5%;
										line-height: 3em;
										text-align: center;
								}
										.artikel .artikel_table_main .sonderwunsch textarea.big {
												width: 100%;
												height: 6em;
										}
										.artikel .artikel_table_main .sonderwunsch textarea.big::placeholder {
												line-height: 5em;
										}


				.artikel .warenkorb {
						margin-left: auto;
						margin-right: auto;
						margin-top: 2em;
						text-align: center;
						width: 100%;
						box-sizing: border-box;
				}

				@media (max-width: 1400px) {
						.artikel .artikel_table_main {
								grid-template-columns: 4fr 2fr 3fr;
								grid-template-rows: auto 1fr;
								gap: 40px;
						}
				}


				@media (max-width: 1200px) {
						.artikel .artikel_table_main {
								grid-template-columns: 1fr 300px;
								grid-template-rows: auto auto auto;

								grid-template-areas:
										"produktbild bezeichnung"
										"produktbild bestellung"
										"bemassung bemassung";
						}

				}

				@media (max-width: 1000px) {
						.artikel .artikel_table_main {
								grid-template-columns: 75fr 41fr 100fr;
								grid-template-rows: auto 1fr;
								grid-template-areas:
										"produktbild bezeichnung bestellung"
										"produktbild bemassung bestellung";
						}
				}

				@media (max-width: 900px) {
						.artikel .artikel_table_main {
								grid-template-columns: 1fr 1fr;
								grid-template-rows: auto auto auto;

								grid-template-areas:
										"produktbild bezeichnung"
										"produktbild bestellung"
										"bemassung bemassung";
						}

				}

				@media (max-width: 550px) {

						.artikel .artikel_table_main {
								grid-template-columns: 1fr;
								grid-template-rows: auto auto auto auto;

								grid-template-areas:
										"produktbild"
										"bezeichnung"
										"bemassung"
										"bestellung";
						}

						.artikel {
								margin-top: 0;
						}
								.artikel .preview {
										text-align: center;
								}
										.artikel .preview > img {
												width: 0;
												border: 5px solid #CFD8DC;
												border-radius: 5px;
										}
												.artikel .preview > img.active {
														border-color: #009D66;
														box-shadow: 0px 0px 7px green;
												}
								.artikel .artikelnummer_top {
										display: block;
										font-size: 12px;
										margin-bottom: 4px;
								}

										.artikel .artikel_table_main > .produktbild {
												padding-right: 0;
										}
										.artikel .artikel_table_main > .bezeichnung {
												text-align: center;
										}
										.artikel .artikel_table_main > .bemassung {
												text-align: center;
										}
										.artikel .artikel_table_main > .bestellung {

										}
										.artikel .artikel_table_main > .bezeichnung .middleContainer {
												max-width: none;
										}
										.artikel .titel {
												font-size: 16px;
												font-weight: lighter;
										}
										.artikel .logo {
												height: 60px !important;
										}
										.artikel .artikel_table_main .sonderwunsch textarea {
												width: 100%;
												height: 4em;
										}

										.artikel .link_dekobeispiele {
												display: none;
										}

										.markenueberschrift {
												display: none;
										}
										.artikel .bestandsinfo {
												text-align: center;
										}
										.artikel .group_preis {
												text-align: center;
										}
												.artikel .warenkorb {
														width: 100%;
														margin-left: 0;
														margin-right: 0;
														padding-left: 0;
														padding-right: 0;
														padding-top: 5px;
														padding-bottom: 5px;
														font-size: 18px;
														font-weight: 500;
												}
/*
										.kundenbewertung {
												display: none;		 betrifft nur die Sterne im oberen Berecih, nicht die eigentliche Bewertung 
										}*/
				}

.artikelEinzelseite {
}
		.artikelEinzelseite .linkAmbiente {
				display: block;
				margin-top: 5em;
		}
				.artikelEinzelseite .linkAmbiente img {
						max-width: 970px;		/* die eigentliche Bildgroesse */
						width: 100%;			/* so wird es responsive skalierbar */
				}
#group_listing_artikel {
		display: none;		/* befindet sich auf der Artikelseite - wird per Javascript eingeschaltet, wenn jemand im Filter was klickt und das Listing aktiviert */
}


#fenster_warenkorb {
		width: 600px;
}
#fenster_warenkorb #fenster_warenkorb_top {
		padding: 40px;
}
		#fenster_warenkorb #fenster_warenkorb_top_left {
				float: left;
				width: 34%;
				position: relative;
		}
				#fenster_warenkorb #warenkorb_box_produktbild {
						/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
						max-height: 250px;
						max-width: 161px;
				}
				#fenster_warenkorb #warenkorb_icon_hinzugefuegt {
						position: absolute;
						top: 50%;
						margin-top: -27px;
						left: 50%;
						margin-left: -27px;
						display: none;
				}
		#fenster_warenkorb #fenster_warenkorb_top_right {
				float: right;
				width: 64%;
		}
				#fenster_warenkorb #warenkorb_box_status {
						border-bottom: 1px solid #e6e6e6;
						padding-bottom: 7px;
						margin-bottom: 20px;
						font-size: 1.2em;
				}
				#fenster_warenkorb #warenkorb_box_titel {
						font-size: 1.1em;
						font-weight: bold;
				}
				#fenster_warenkorb #warenkorb_box_groesse {

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

		#fenster_warenkorb_top_buttons {
				margin-top: 28px;
		}
				#fenster_warenkorb_top_buttons .left {
						float: left;
						display: block;
						text-transform: uppercase;
						border: 2px solid #bf0008;
						background-color: #ffffff;
						color: #bf0008;
						padding-left: 1em;
						padding-right: 46px;
						cursor: pointer;
				}
				#fenster_warenkorb_top_buttons .right {
						float: right;
				}

#fenster_warenkorb #fenster_warenkorb_bottom {
		display: none;
		border-top: 5px solid #e6e6e6;
		padding: 2em;
}
		.fenster_warenkorb_bottom_ueberschrift {
				font-size: 13pt;
		}
		.warenkorbAehnlichArtikel {
				display: inline-block;
				width: 161px;
				vertical-align: top;
				margin-top: 1em;
				margin-right: 1em;
				color: #444444;
				text-decoration: none;
		}
				.warenkorbAehnlichArtikel img {
						width: 161px;
						border: none;
				}
				.warenkorbAehnlichArtikelTitel {
						font-size: 85%;
						text-align: center;
				}
				.warenkorbAehnlichArtikelPreis {
						font-size: 85%;
						font-weight: bold;
						text-align: center;
				}

@media (max-width: 650px) {
		#fenster_warenkorb {
				width: auto;
		}
				#fenster_warenkorb_top_left {
						display: none;
				}
				#fenster_warenkorb #fenster_warenkorb_top_right {
						width: auto;
						float: none;
				}
						#fenster_warenkorb_top_buttons .left {
								margin-bottom: 1em;
						}
}


.ambienteZurVariation {
		width: 600px;
		margin: 30px;
		background-image: linear-gradient(to right, #ffffff 0%, transparent 20%, transparent 80%, #ffffff 100%);
}
		.ambienteZurVariation .ambiente {

		}

				.ambienteZurVariation .ambiente .titel {
						margin-top: 1em;
				}
				.ambienteZurVariation .ambiente .link {
						display: block;
						width: 180px;
						margin-left: auto;
						margin-right: 0;
						background-color: #888888;
						color: #ffffff;
						margin-top: 1em;
						padding: 0.8em;
						text-decoration: none;
				}

				.ambienteZurVariation .ambiente .box_image {
						width: 300px;
						margin-left: auto;
						margin-right: auto;
				}
				/* fuer das carousel */
				.ambienteZurVariation .ambiente.slick-slide {
						margin-top: 25px;
						/* border: 1px solid red; */
				}
				.ambienteZurVariation .ambiente.slick-slide img {
						height: 400px;
				}
				.ambienteZurVariation .ambiente.slick-slide .titel {
						display: none;
				}
				.ambienteZurVariation .ambiente.slick-slide .link {
						display: none;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active {
						margin-top: 0;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active img {
						height: 451px;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active .titel {
						display: block;
				}
				.ambienteZurVariation .ambiente.slick-slide.slick-active .link {
						display: block;
				}
				.ambienteZurVariation .left {
						position: absolute;
						left: -25px;
						top: 200px;
						margin-top: -25px;
						cursor: pointer;
				}
				.ambienteZurVariation .right {
						position: absolute;
						right: -25px;
						top: 200px;
						margin-top: -25px;
						cursor: pointer;
				}

.meinungen {
		font-size: 0.85em;
		margin-top: 4em;
		margin-bottom: 3em;
}
@media print {
		.meinungen {
				display: none;
		}
}
		.meinungen .details_box {
				/* display: none; */
				height: 0;
				overflow: hidden;
		}
		.meinungen .meinungen_ueberschrift {
				margin-top: 1em;
				margin-bottom: 1em;
		}
		.meinungen .meinungen_alle table {
				width: 100%;
				border-collapse: collapse;
				margin-top: 1em;
				table-layout: fixed;
		}
				.meinungen .meinungen_alle table td {
						vertical-align: top;
						border: 1px solid #e6e6e6;
						padding: 1.5em;
				}
				.meinungen .meinungen_alle table td.lyt {
						border: 1px solid #e6e6e6;
						padding: 1.5em;
				}
				@media (max-width: 450px) {
						.meinungen .meinungen_alle table td, .meinungen .meinungen_alle table td.lyt {
								padding: 0.8em;
						}
				}

.meinungen .details_head {
		padding-top: 8px;
		padding-bottom: 8px;
		margin: 0;
		font-weight: bold;
		cursor: pointer;
		border-top: 1px solid #e6e6e6;
}

		.meinungen .details_head span {		/* der Pfeil */
				display: inline-block;
		}

.ambiente .meinungen {
		display: none;		/* die Box nur bei Einzelartikeln, nicht aber im Ambiente anzeigen - kann dann per JAvascript eingeschalten werden */
}



.meinung_eigene {
		margin-top: 1em;
		/* border-top: 1px solid #e6e6e6; hier ist schon ein border-top dran, das waere dann doppelt  */
		display: flex;
		flex-direction: row;
		align-items: flex-end;
}

		.meinung_eigene table {
				border-spacing: 0;
		}
				.meinung_eigene td {
						padding: 0;
				}

						.meinung_eigene table.sternewahl {
								border-spacing: 2px;
								color: #6A85A0;
								margin-top: 2em;
								margin-bottom: 2em;
						}
								.meinung_eigene table.sternewahl td {
										padding: 2px;
										text-align: center;
								}

		.meinung_eigene input[type="text"], .meinung_eigene textarea {
				border: 1px solid #D9E1E4;
				border-radius: 3px;
				padding: 11px;
				box-sizing: border-box;
				margin-top: 4px;
		}
		.meinung_eigene input[type="text"] {
				font-size: 0.9em;
				width: 100%;
		}
		.meinung_eigene textarea {

		}
		.meinung_eigene input[type="text"]::placeholder {
				color: #6A85A0;
		}
		.meinung_eigene .meinung_eigene_block {
				margin-top: 1em;
		}

		.meinung_eigene .left {
				flex: 2 0 0;
		}
		.meinung_eigene .center {
				flex: 0 0 5%;
		}
		.meinung_eigene .right {
				flex: 1 0 0;
		}



		@media(max-width: 550px){

				.boxSelect {
					min-width: 98% !important;
				}
				.selectOptions {
					min-width: 98% !important;
				}
				div.selectBox span.selected {
					width: 90%;
				}
				.options {
					display: flex !important;
					flex-direction: column !important;
				}
				#laengeanpassenDiv {
					width: 100%;
				}
				.laengeanpassenDivWarning{
					width: 83%;
				}
		}

		@media (max-width: 450px) {
				.meinung_eigene {
						flex-direction: column;
						align-items: stretch;
				}
						.meinung_eigene input[type="text"] {
								width: 100%;
						}
		}

	.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;
			}



			.ak-hidden { display: none; }
			#ak-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				margin: 0;
				padding: 0;
			}
			#ak-mainPage {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
			}
			#ak-absorberForm {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 1.875em; /* 30px -> 1.875em (16px base) */
				min-width: 20em;     /* 320px -> 20em */
			}
			#ak-absorberForm label,
			#ak-absorberForm input {
				margin-bottom: 0;
			}
			#ak-absorberForm .ak-eingabegruppe {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 1.125em; /* 18px -> 1.125em */
				width: 100%;
			}
			#ak-absorberForm label {
				margin-bottom: 0;
				margin-right: 0.625em; /* 10px -> 0.625em */
			}
			#ak-absorberForm input[type="number"] {
				width: 6.25em; /* 100px -> 6.25em */
			}
			#ak-produktdatenAnzeige {
				width: 100%;
				box-sizing: border-box;
				text-align: center;
			}
			#ak-detailsPage {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
			}
		
		.ak-back-button,
		#ak-berechnenBtn {
			background-color: #e5f5ef;
			color: #009D66;
			border: 1px solid #009D66;
			border-radius: 4px;
			padding: 0.6em 1.5em;
			font-size: 1em;
			cursor: pointer;
			margin-top: 0.5em;
			transition: background 0.2s, color 0.2s, border 0.2s;
		}
		.ak-back-button:hover,
		.ak-back-button:focus,
		#ak-berechnenBtn:hover,
		#ak-berechnenBtn:focus {
			background-color: #d0ede3;
			color: #007a4d;
			border-color: #007a4d;
		}