.fensterZweiSpalten {
		display: flex;
		flex: 1 0 0;
		overflow: auto;
}
		.fensterZweiSpalten > .buttonAusklapp {
				display: none;

				position: absolute;
				left: 0px;
				z-index: 2;
				font-weight: bold;
				cursor: pointer;
				top: 100px;
		}
				.fensterZweiSpalten > .buttonAusklapp img {
						height: 40px;
						display: block;
				}
		.fensterZweiSpalten > .left {
				border-right: 1px solid #cecece;
				overflow: auto;
				height: 100%;
				box-sizing: border-box;
				flex: 0 1 290px;
		}
		.fensterZweiSpalten > .right {
				padding-left: 2.5%;
				overflow: auto;
				height: 100%;
				box-sizing: border-box;
				position: relative;		/* fuer die absolut positionierten Ausblend-Balken oben und unten */
				flex: 4.8 1 0;
				display: flex;
				flex-direction: column;
		}
				.fensterZweiSpalten > .left .ueberschrift {
						color: #ffffff;
						background-color: #444444;
						font-size: 18px;
						text-align: center;
						padding: 0.5em;
				}
				.fensterZweiSpalten > .right .ueberschrift {
						text-align: center;
						margin: 0;
						font-size: 16px;
						font-weight: 400;
						padding: 0.5em;
						color: #000000;
				}

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

		}
		.fensterZweiSpalten > .left {
				position: absolute;
				left: 0;
				top: 0;
				background-color: #ffffff;
				width: 0;
				padding-right: 0;
				z-index: 10;
		}
}

				.fensterZweiSpalten > .left h3 {
						font-size: 16px;
						border-bottom: 2px solid #000000;
						padding-bottom: 0.5em;
						text-transform: uppercase;
						margin-top: 2em;
				}
						.fensterZweiSpalten > .left h3 img {
								vertical-align: middle;
								margin-right: 0.5em;
						}


.fensterDesign {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		overflow-x: hidden;
		height: 100%;
		box-sizing: border-box;
		position: relative;
}
		.fensterDesign input[type="checkbox"] {
				vertical-align: middle;
		}

		.fensterDesign .close {
				position: absolute;
				top: 0.6em;		/* hier etwas weniger, als wie bei right, weil das Zeichen leicht unten innerhalb der der div-box angeordnet ist */
				right: 0.7em;
				cursor: pointer;
				font-size: 16px;
		}
				.fensterDesign .close:hover {
						font-weight: bold;
				}


#formDesign {
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;
}

.clickAreaDetails, .clickAreaApply {
		cursor: pointer;
}


.listDesigns {
		overflow: auto;
		height: 100%;
}
		.listDesigns:before {
				/* Uebergang ins Transparente */
				position: absolute;
				z-index: 1;
				top: 2em;
				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%;


		}
						.listDesigns .zwischenueberschrift .logobezeichnung {
								float: left;

								display: flex;
								justify-content: space-between;
								align-items: center;
								flex-wrap: wrap;
						}
								.listDesigns .zwischenueberschrift .logobezeichnung .logo {
										flex: 0 1 auto;
										margin-right: 1em;
								}
										.listDesigns .zwischenueberschrift .logobezeichnung .logo > img {
												max-height: 50px;
												max-width: 100%;
										}
								.listDesigns .zwischenueberschrift .logobezeichnung .bezeichnung {
										flex: 1 1 auto;
								}

				.listDesigns .zwischenueberschrift .ansicht {
						float: right;
				}

						.listDesigns .zwischenueberschrift .ansicht form {
								display: inline;
						}
						.listDesigns .zwischenueberschrift .ansicht_bezeichnung {
								font-weight: bold;
								margin-right: 1em;
						}
						.listDesigns .zwischenueberschrift .ansicht_wahl {

						}
								.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;
										background-color: #ffffff;
										padding: 0;
										border-radius: 0;
										font-size: 1em;

										-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;
												vertical-align: baseline;		/* das ist mittiger als middle (gesetzt in layout.css) */
										}

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

.listDesignsMarke.einzel {
		position: relative; 	/* fuer die Positionsbesteimmung eines Stoffes mit offsetLeft - fuer die Position des Pfeils */
		margin-left: 2%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		grid-column-gap: 2%;
		margin-right: 2%;
}


.listDesignsMarke.einzel .listDesignsDesign .uebernehmen > div {
		font-size: 13px;
}
@media (max-width: 1500px) {
		.listDesignsMarke.einzel {
				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		}
		.listDesignsMarke.einzel .listDesignsDesign .uebernehmen > div {
				font-size: 12px;
		}
}
@media (max-width: 1000px) {
		.listDesignsMarke.einzel {
				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		}
		.listDesignsMarke.einzel .listDesignsDesign .uebernehmen > div {
				font-size: 11px;
		}
}


		.listDesignsMarke.einzel .listDesignsDesign {
				display: inline-block;
				padding-right: 6%;
				border-right: 1px solid #cecece;
				margin-bottom: 2.45em;
		}
		.listDesignsMarke.einzel .listDesignsDesign.active {
				background-color: #f8f8f8;
		}
				.listDesignsMarke.einzel .listDesignsAreaActivateDetails {
						cursor: pointer;
						position: relative;
				}
						.listDesignsMarke.einzel .listDesignsGroupBilder > * {
								float: left;
						}
						.listDesignsMarke.einzel .listDesignsGroupBilder > *:last-child {		/* clear-<br> */
								float: none;
						}
								.listDesignsMarke.einzel .listDesignsDesign .listDesignsDesignbild {
										margin-right: 5px;
										position: relative;
								}
										.listDesignsMarke.einzel .listDesignsDesign .listDesignsDesignbild .design {
												display: block;
												width: 100%;
												min-height: 180px;		/* wenn das Bild fehlt */
										}
										.listDesignsMarke.einzel .listDesignsDesign .listDesignsDesignbild .farbtropfen {
												width: 122px;
												height: 122px;
												position: absolute;
												top: calc(50% - 61px);
												left: calc(50% - 61px);
										}
								.listDesignsMarke.einzel .iconSpezial {
										/*
										width: 23px;
										height: 23px;
										*/
										width: 12%;
										margin-bottom: 5px;
								}

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


	.listDesignsMarke.einzel .listDesignsBez, .listDesigns .listDesignsErsetztbez {
			font-size: 11px;
			color: #888888;
			text-align: center;
	}
	.listDesignsMarke.einzel .listDesignsErsetztbez {
			font-style: italic;
	}
	.listDesignsMarke.einzel .abpreis {
			text-align: center;
			font-weight: bold;
	}

	  .listDesignsMarke.einzel .listDesignsDesign .listDesignsDesignbild
	, .listDesignsMarke.einzel .infoDetailansicht
	, .listDesignsMarke.einzel .listDesignsGroupBottom
	, .listDesignsMarke.einzel .listDesignsDesign .uebernehmen
	{
			width: 82%;
	}

	.listDesignsMarke.einzel .listDesignsGroupBottom {
			margin-top: 0.5em;
			margin-bottom: 0.5em;
	}

	.listDesignsMarke.einzel .infoDetailansicht {
			position: absolute;
			left: 0;
			text-align: center;
			top: 77px;
			display: none;
	}
			.listDesignsMarke.einzel .infoDetailansicht img {
					width: 23px;
			}
	.listDesignsMarke.einzel .listDesignsDesign .uebernehmen {
			text-align: center;
	}
			.listDesignsMarke.einzel .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;
					border-radius: 3px;
			}
			.listDesignsMarke.einzel .listDesignsDesign .uebernehmen > div:hover {
					background-color: #3580bb;
					color: #ffffff;
			}







.listDesignsMarke.doppel {
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 30px;
		margin-right: 2%;
}
		.listDesignsMarke.doppel .listDesignsDesign {
				border: 1px solid #cccccc;
		}
				.listDesignsMarke.doppel .listDesignsBezGroup {
						min-height: 3em;
						display: flex;
						align-items: center;
						justify-content: center;
				}
						.listDesignsMarke.doppel .listDesignsBez {
								text-align: center;		/* relevant wenn der Text hier umbricht */
						}
						.listDesignsMarke.doppel .listDesignsBez .name {
								font-weight: 600;
						}
						.listDesignsMarke.doppel .listDesignsBez .number {
								font-weight: 300;
						}
						.listDesignsMarke.doppel .listDesignsDesignbilderGroup {
								position: relative;
						}
								.listDesignsMarke.doppel .listDesignsDesignbilder {
										display: flex;
								}
										.listDesignsMarke.doppel .listDesignsDesignbilder .bild {
												flex: 1 0 0;		/* wird relevant, wenn ein Bild nicht geladen werden konnte */
										}
										.listDesignsMarke.doppel .listDesignsDesignbilder .bild.front {
												/* bei Dachfenster aus dem Artikelsystem haben die Bilder unterschiedliche Seitenverhaeltnisse - mit diesen CSS-Angabe versuche ich das auszugleichen (Bei der Front-Ansicht oben abschneiden) */
												position: relative;
												overflow: hidden;
										}
												.listDesignsMarke.doppel .listDesignsDesignbilder .bild img {
														width: 100%;
														display: block;
												}
												.listDesignsMarke.doppel .listDesignsDesignbilder .bild.front img {
														position: absolute;
														bottom: 0;
														left: 0;
												}
								.listDesignsMarke.doppel .farbtropfen {
										position: absolute;
										width: 122px;
										top: calc(50% - 61px);
										left: calc(50% - 61px);
								}

				.listDesignsMarke.doppel .listDesignsIcons {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						margin-top: 20px;
				}
						.listDesignsMarke.doppel .icon {
							
						}
								.listDesignsMarke.doppel .icon img {
										display: inline-block;
								}
						.listDesignsMarke.doppel .details {
								text-decoration: underline;
								font-weight: 400;
						}
				.listDesignsMarke.doppel .abpreis {
						text-align: center;
				}

				.listDesignsMarke.doppel .listDesignsGroupBottom {
						display: flex;
						align-items: center;
						margin: 1em;
						font-weight: 400;
						gap: 8%;
				}
						.listDesignsMarke.doppel .listDesignsGroupBottom > * {
								text-align: center;
						}

								.listDesignsMarke.doppel .listDesignsGroupBottom .uebernehmen {
										padding-top: 0.5em;
										padding-bottom: 0.5em;
										background-color: #edf3f5;
										color: #0082c0;
										flex: 2 0 0;
										transition-duration: 0.2s;
								}
										.listDesignsMarke.doppel .listDesignsGroupBottom .haken {
												width: 0px;
												display: inline-block;		/* nur bei inline-block oder block geht width */
												overflow: hidden;
												text-align: right;
												transition-duration: 0.2s;
												vertical-align: bottom;
										}
								.listDesignsMarke.doppel .listDesignsGroupBottom .uebernehmen:hover {
										background-color: #0082c0;
										color: #ffffff;
								}
										.listDesignsMarke.doppel .listDesignsGroupBottom .uebernehmen:hover .haken {
												width: 16px;
										}



		.listDesigns .notFound {
					margin-top: 5em;
					font-style: italic;
					text-align: center;
					color: #999999;
		}

		.listDesignsDesign.grayout {
				opacity: 0.3;
		}




		.listDesignsMarke .listDesignsBoxDetailsWrap {
				overflow: hidden;		/* fuer die Animation height: 0 */
				margin-bottom: 2em;

				grid-column-start: 1;
				grid-column-end: -1;

				box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		}

		.listDesignsMarke .listDesignsBoxDetails {
				display: flex;
				flex-direction: row;
				border: 1px solid #aaaaaa;
				padding: 1.8%;
				position: relative;
				box-sizing: border-box;
		}
		@media (max-width: 800px) {
				.listDesignsMarke .listDesignsBoxDetails{
						flex-direction: column;
				}
		}
				.listDesignsMarke .listDesignsBoxDetails .schliessen {
						position: absolute;
						top: 1em;
						right: 1em;
						cursor: pointer;
						font-size: 16px;
				}
						.listDesignsMarke .listDesignsBoxDetails .schliessen:hover {
								font-weight: bold;
						}
				.listDesignsMarke .pfeilOben {
						position: absolute;
						height: 12px;
						font-size: 20px;
				}
				.listDesignsMarke .listDesignsBoxDetails > .left {
						flex: 1 0 auto;
						margin-right: 4%;
				}
						.listDesignsMarke .listDesignsBoxDetails > .left img.boxDetailsDesignbild {
								max-width: 100%;
								max-height: 100%;
								display: block;		/* wegen dem Space unter der Baseline */
								margin-left: auto;
								margin-right: auto;
						}
				.listDesignsMarke .listDesignsBoxDetails > .right {
						flex: 10 5 auto;
				}
				.listDesignsMarke .listDesignsBoxDetails.elemLt500 > .right {
						margin-top: 1em;
				}
						.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 {
								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 .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! - Auch die Bilder fuer die Dachfenster-Rollos aus dem Artikelsystem haben andere Abmessungen
														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;
						height: auto;
						margin-bottom: 2em;
				}
				.listDesignsMarke .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
						/* hier jetzt untereinander */
						margin-left: auto;
						margin-right: auto;
						margin-bottom: 2em;
						width: 200px;
						height: auto;
				}
						.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;
								}




				.fensterDesign .tabsDesign {
						margin-top: 1em;
				}
						.fensterDesign .tabsDesign.elemLt800 .bez {
								display: none;
						}

				.listDesignsBoxDetails ul {
						list-style-type: square;
				}

				#tabFensterDesign ul {
						padding-left: 1em;
				}
						#tabFensterDesignKunden {
								max-height: 202px;
								overflow: auto;
						}

								.meinung_text {
										font-style: italic;
										margin-bottom: 1em;
								}
								.meinung_keine {
										font-style: italic;
										text-align: center;
										margin-top: 2em;
										margin-bottom: 2em;
								}

				.kundenmeinungen {
						max-height: 220px;
						overflow: auto;
				}
						.meinung_ueberschrift {
								margin-top: 1em;
								margin-bottom: 0.5em;
						}
								.wertung_stern img {
										vertical-align: middle;
								}



.fensterDesign .left input[type="checkbox"] {
		margin-right: 10px;
}

.fensterDesign .left .icon {
		vertical-align: middle;
		width: 22px;
		height: 22px;
		margin-left: 0;
		margin-right: 7px;
}










.fensterDesign .check label {
		display: block;
		text-indent: -2em;
		margin-left: 2em;
		margin-top: 5px;
		margin-bottom: 5px;
		/* opacity: 0.5; das wirkt wie disabled und nicht benutzbar */
		font-weight: 400;
		font-size: 16px;
}
		
		.fensterDesign .check label.active {
				/* opacity: 1; */
		}


/* Stofflisting Zwischenueberschrift - und Stofflisting-Detailbereich */
.fensterDesign .logo {
		display: inline-block;
		position: relative;
		max-width: calc(100% - 1em);
}
		.fensterDesign .logo .claim {
				font-size: 12px;
				right: -2px;
				letter-spacing: 2.9px;
				text-transform: uppercase;
				position: absolute;
				bottom: 3px;
				color: #444444;
		}


.fensterDesign .grundform {
		/* Modellfilter bei der Stoffauswahl */
		display: none;
}

		.fensterDesign .suche {
				margin-top: 2em;
				margin-bottom: 2em;
		}

				.fensterDesign .suche input {		/* .fensterDesign */
						background-image: url(../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;
				}
				.fensterDesign .suche input::placeholder {
						color: #222222;
				}


.farbauswahl {
		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 label {
		display: inline-block;
}

.group.color label input {
		display: none;
}


.farbbox {
		display: block;
		width: 25px;
		height: 25px;
		line-height: 25px;
		float: left;
		text-align: center;
		font-weight: bold;
		cursor: pointer;
		font-size: 15px;
}
.farbbox.beige { background-color: #d4be8d; color: #ffffff; }
.farbbox.blau { background-color: #3485ff; color: #ffffff; }
.farbbox.braun { background-color: #6f3e18; color: #ffffff; }
.farbbox.gelb { background-color: #fffc00; color: #888888; }
.farbbox.gruen { background-color: #73b525; color: #ffffff; }
.farbbox.orange { background-color: #ff6501; color: #ffffff; }
.farbbox.rosa { background-color: #ed008c; color: #ffffff; }
.farbbox.rot { background-color: #ea0001; color: #ffffff; }
.farbbox.schwarz { background-color: #000000; color: #ffffff; }
.farbbox.violett { background-color: #9349aa; color: #ffffff; }
.farbbox.weiss { background-color: #ffffff; color: #888888; border: 1px solid #f1f1f1; }
.farbbox.grau { background-color: #838383; color: #ffffff; }



















.fensterDesign .buttons {
		margin-top: 1em;
}
		.fensterDesign .buttons button {
				margin-left: 1em;
				border: none;
				padding: 0.5em;
				font-size: 13px;
				cursor: pointer;
		}
		.fensterDesign .buttons .stoffprobe {
				background-color: #edf3f5;
				color: #0082c0;
		}
				.fensterDesign .buttons .stoffprobe:hover {
						background-color: #dedede;
				}
		.fensterDesign .buttons .uebernehme {
				background-color: #0082c0;
				color: #ffffff;
		}
				.fensterDesign .buttons .uebernehmen:hover {
						background-color: #458dcc;
				}