#konfiguratorGesamt * {
	box-sizing: content-box;
	/* 
	Der Konfigurator wurde mit "box-sizing: content-box" konzipiert.
	Das Layout setzt mit einem Stern-Selector * alle Elemente auf "box-sizing: border-box".
	Zur Korrektur wird das wieder zurueck gesetzt (betrifft auch die Elemente um den Scrollbereich herum).
	*/
}


label {
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



.inhalt {
	min-height: 0px !important; /* dieser Wert wurde per Hand ermittelt, bei nicht ausgeklapptem Menue */
}




input[type=number] {
	-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus - ausserdem haben wir eigene Spin-Buttons (+ / -) */
}
input[type=number]::-webkit-inner-spin-button, 		/* fuer den Chrome - die Spin-Buttons nehmen so viel Platz weg, dass bei einem Input-Feld der Breite 3ch nur Platz guer eine Ziffer ist (ohne Spin-Buttons passen 3 Ziffern rein) */
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.link {		/* Elemente (z.b: <span>) die wie Links aussehen sollen (wenn ihnen z.B. per Javascript ein Ereignis zugeordnet wurde) - z.B. Bei der Dachfenster-Typen-Wahl wenn Hersteller mit Plissee-System nicht zusammen passt */
	cursor: pointer;
	text-decoration: underline;
}

.clear {
	clear: both;
	height: 0;
	width: 0;
	overflow: hidden;
}

.flexFiller {
	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 !important;
	padding-bottom: 0 !important;
	border-top: 0;
	border-bottom: 0;
	border-right: 1px solid transparent;
}

.icon {
	/* Vector-Grafik (SVG) braucht immer Breiten-/Hoehenangabe */
	width: 22px;
	height: 22px;
}

.btnPfeil {
	background-image: url(pfeile/pfeil_rechts_weiss.svg);
	background-repeat: no-repeat;
	background-position: 96% center;
	padding-right: 2em !important;
	display: inline-block;
	background-color: #357dbc;
	color: #ffffff;
	padding-left: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-decoration: none;
}

.listStyleTypeRaquo ul, ul.listStyleTypeRaquo {
	list-style-type: none;
}
	.listStyleTypeRaquo ul > li:before, ul.listStyleTypeRaquo > li:before {
			content: "\00BB\0020";
	}
	.listStyleTypeRaquo ul > li, ul.listStyleTypeRaquo > li {
			text-indent: -1em;
			margin-left: 1em;
	}


#konfigurator {
	position: relative;
	display: block;
}
#konfigurator, .extrafenster {
	color: #444444;
}

#konfigurator h3 {
	font-size: 100%;
}

	#modellbild_preview img {
			border: 1px solid #cccccc;
			margin-right: 10px;
			margin-bottom: 5px;
			height: 54px;
			cursor: pointer;
	}
			#modellbild_preview img.active {
					outline: 1px solid #454545;
			}

	#modellbild_steuerung {
			color: #888888;
			font-size: 11px;
			/* position: absolute; */
			position: fixed;
			/* bottom: 0; */
			bottom: 1%;
			/* left: 0; */
			left: 2%;
			width: 100%;

			display: flex;
			align-items: center;
			position: fixed;

			padding-top: 2em;

	}

			#modellbild_steuerung .selected {
				border: 0;
				border-radius: 0.2em;
				box-shadow: 0 0 0 3pt #888888;
			}

			#modellbild_steuerung_left {
					/* flex: 0 1 33%; */
					/* flex: 0 1 100%; */
					display: flex;
					align-items: center;
					position: fixed;
					bottom: 1%;
					/* padding-top: 2em; */
					/* border-top: 1px solid #cacaca; */
					/* width: 50%; */
					/* justify-content: center; */
			}
					#modellbild_steuerung_animation {
							cursor: pointer;
					}
			#modellbild_preview {
					flex: 1 0 auto;
			}
			#modellbild_steuerung_right {
					flex: 0 1 33%;
			}
			.graphSetBackground {
					cursor: pointer;
					height: 65px;
					margin: 0 0.2em;
			}
			.graphSetBackground_border {
					width: 65px;
					overflow: hidden;
					display: flex;
					justify-content: center;
			}

			.hinweis_saum {
				width: 65px;
				height: 65px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}

			.hinweis_saum img {
				width: 45px;
				height: 45px;
			}

	.modellbild_steuerung_ansicht_wechseln {
		text-align: left;
		padding-right: 1em;
	}

	.befestigungLink {
		color: #444444;
		text-decoration: none;
	}

	#box_group {
		display: flex;
		align-items: center;
	}
		#box_group div {
			margin-right: 1em;
		}

	.box_group {
		display: inline-block;
		text-align: left;
	}

	.box {
		border: 1px solid #cacaca;
		border-radius: 1px;
		cursor: pointer;
		width: 50px;
		height: 50px;
		display: inline-flex;
		align-items: center;
	}

			#link_save {
					text-decoration: none;
			}
					#link_save .icon {
							font-size: 24px;
					}
					#link_save .icon {

					}
			#link_save_data {
					display: none;
			}

	.gruppe_warenkorb {
			/* background-color: #ffffff; */
			background-color: #f5f5f5;
			padding: 10px;

			position: fixed;
			bottom: 0;
			right: 0;
			/* width: 100%; */
			box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
			/* border: 1px solid #99ebcb; */
			/* border: 1px solid #b00c28; */

			margin-top: 1em;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
	}
			.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_symbol {
					display: inline-block;
					height: 35px;
					line-height: 35px;
					background-size: auto 35px;
					background-repeat: no-repeat;
					background-position: center;
					width: 40px;
					background-image: url(../wk_weiss.svg);
			}

			.warenkorb_text {
					padding-right: 12px;
					display: inline-block;
					height: 35px;
					line-height: 35px;
			}

			.warenkorb_extrafenster {
					cursor: pointer;
					flex: 1 0 auto;
					text-align: right;
			}

			.warenkorb_konfi {
					cursor: pointer;
					padding-top: 5px !important;
					padding-bottom: 5px !important;
					padding-left: 1em !important;
					padding-right: 1em !important;
			}



					.warenkorb_extrafenster .warenkorb_text, .warenkorb_extrafenster .warenkorb_symbol {
							display: inline-block;
							height: 43px;
							line-height: 43px;
							padding-left: 12px;
							padding-right: 12px;
					}
							.warenkorb_extrafenster > * {
									color: #444444;
							}

					.warenkorb_extrafenster .warenkorb_text {
							text-transform: uppercase;
							border-right: 1px solid #ffffff;
					}
							.warenkorb_extrafenster .warenkorb_text {
									background-color: #e6e6e6;
							}
					.warenkorb_extrafenster .warenkorb_symbol {
							background-size: auto 30px;
							background-repeat: no-repeat;
							background-position: center;
							width: 40px;
					}
							.warenkorb_extrafenster .warenkorb_symbol {
									background-color: #e6e6e6;
									background-image: url(wk_schwarz.svg);
									/* background-image: url(wk_weiss.svg); */
							}


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

		#spalten2 {
				position: fixed;
				/* bottom: 0; nur f�r RTS*/
				left: 0;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: stretch;
		}
				#spalten2 > * {
						overflow: auto;
				}
				#spalten2 #visualisierung {
						flex: 1 0 0;
						text-align: center;
						position: relative;
						padding-left: 2%;
				}
						.ajax_lade {
								position: absolute;
								right: 0;
								top: 0;
								visibility: hidden;
								width: 50px;
								height: 50px;
						}

					#modellbild_ueberschrift {
							margin-bottom: 1em;
					}

					#paper {
							margin: auto;
					}

							#ansicht3dInteraktion {
									display: none;
									position: absolute;

									top: 50%;
									left: 50%;
									transform: translate(-50%,-50%);
									white-space: nowrap;
							}
									#ansicht3dInteraktion > * {
											border-radius: 16px;
											color: #ffffff;
											cursor: pointer;
											display: inline-block;
									}
									#ansicht3dInteraktionOn {
											background-color: #0082c0;
									}
									#ansicht3dInteraktionOff {
											background-color: #434343;
									}
											#ansicht3dInteraktion > * > * {
													vertical-align: middle;
											}
											#ansicht3dInteraktion > * img {
													margin-top: 1px;
													margin-left: 1px;
													margin-bottom: 1px;
											}
											#ansicht3dInteraktion > * span {
													margin-left: 0.5em;
													margin-right: 0.5em;
											}

							#ansicht3dInteraktionPointer {
									display: none;
									pointer-events: none;
									position: absolute;

									top: 50%;
									left: 50%;
									transform: translate(-50%,-50%);
									white-space: nowrap;

									background-color: rgba(200, 200, 200, 0.9);
									border-radius: 35px;
									padding: 15px;
							}
									#ansicht3dInteraktionPointer img {
											width: 60px;
											display: block;
									}




					.modellbild {		/* das Ganze als Klasse definieren, nicht als ID, weil beim Zoom, die Elemente geklont werden und dort die ID umbennat ist, die Klasse aber nicht */
							position: relative;
							padding-bottom: 0.5em;/*2em;*/
							/* border-bottom: 1px solid #cacaca; */
					}
							.modellbildImg {
									max-width: 100%;
									z-index: 1;
									position: relative;
									display: block;
							}

					#modellbild_bezeichnung_img {
							margin-left: auto;
							width: 50%;
					}

					#spalten2 #visualisierung {
							text-align: center;
							/* margin-bottom: 1em; */
					}
							#modellbild_ueberschrift {
									text-align: left;
							}
									#spalten2 #visualisierung .ueberschrift1 {
											font-size: 16px;
									}
									#spalten2 #visualisierung .ueberschrift2 {
											font-weight: bold;
											font-size: 16px;
									}

					#visualisierung svg {
							max-width: 100%;
					}

			#spalten2 #trenner {
					flex: 0 0 10px;
					background-color: #cdcdcd;
					cursor: col-resize;
					/* visibility: hidden;		hover on hidden element funktioniert nicht (mit einem extra div haette es zwar wieder funktionier, aber ich mache es jitzt mit opacit) */
					opacity: 0;
					margin-left: 1%;
					margin-right: 1%;
			}
					#spalten2 #trenner:hover {
							opacity: 1;
					}


			#spalten2 #eingabe {
					flex: 1 0 0;
					position: relative;
					padding-right: 2%;
			}
					#eingabe .bereichsueberschrift {
							/* background-color: #00cc7e; */
							background-color: #444444;
							color: #ffffff;
							font-weight: normal;
							padding: 1em;
							text-align: left;
							margin-top: 0;
							margin-bottom: 0;
							font-size: 1.2em;
					}
					#accordion {
							overflow: auto;
							padding-top: 8px;
							margin-bottom: 18em;
					}
					#eingabe .eingabeBox {
							margin-top: 1em;
							margin-left: 2em;
							margin-bottom: 1em;
							display: none;
							overflow: hidden;		/* fuer die Animation */
					}
							#eingabe .accordion_zwischenueberschrift {
									font-weight: normal;
									margin-top: 0;
									margin-bottom: 1em;
							}

							#eingabe .erklaerung {
									font-size: 90%;
									color: #888888;
							}

									.tabs > * {
											display: inline-block;
											border: 1px solid #f1f1f1;
											margin-right: 6px;
											padding: 1em;
											position: relative;
											left: 0;
											top: 1px;
											cursor: pointer;
											color: #888888;
											background-color: #ffffff;
									}
									.tabs > *.active {
											border-bottom: 1px solid #ffffff;
											color: #444444;
									}
											.tabs > * > img {
													vertical-align: middle;
											}
											.tabs > * > .bez {
													margin-left: 1em;
											}
											/* #eingabe.elemLt350 #tabForm .bez {		/* auf den Tabs die Ueberschrift */
											#tabForm {
													display: none;
											}
									.tabs > .noTab {
											border: 0;
											text-decoration: none;
											color: #444444;
									}
									.tabFenster {
											/* border-top: 1px solid #f1f1f1; */
									}
											.tabFenster > * {
													display: none;
													/* padding: 1em; */
													padding: 0 1em;
													max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
											}


							.tabFensterMain ul {
									list-style-type: none;
									padding: 0;
									margin: 0;

									/*
									display: flex;
									flex-wrap: wrap;
									geht mit der letzten Zeile nicht so richtig
									*/
									display: grid;
									grid-template-columns: repeat(auto-fit,minmax(75px, 1fr));		/*  auto-fit, statt auto-fill  - fit nutzt zur verfuegung stehenden Platz aus, fit nimmt den Mnidest-Platz  */
									grid-column-gap: 30px;

							}
									.tabFensterMain ul li {
									}
									.tabFensterMain ul li label {
									}
											.tabFensterMain ul li img {
													vertical-align: middle;
													margin-top: 1em;
													margin-bottom: 1em;
											}
											.formBildVorauswahl {
													height: 80px;
											}

									#tabFensterForm ul li {
											margin: 0 0.5em;
									}
											#tabFensterForm ul li label {
													display: flex;
													flex-direction: column;
													align-items: center;

													/* radio buttons auf eine Hoehe bringen */
													height: 100%;
													justify-content: space-between;
											}
													#tabFensterForm ul li label > * {
															text-align: center;
													}
													#tabFensterForm ul li .input {
													}

													#tabFensterForm ul li .img {
															padding: 0.5em 1em;
													}
													#tabFensterForm ul li .bezeichnung {
															padding-bottom: 1em;
													}
															#tabFensterForm ul li .bezeichnung .zusatz {
																	color: #888888;
																	display: block;
															}

													#tabFensterForm ul li .price {
															text-align: left;
															padding-left: 1em;
															padding-right: 1em;
													}
													#tabFensterForm ul li .info {
															width: 47px;
															cursor: pointer;
															text-align: center;
													}

													.auswahl_aktiv {
														background-color: #f5f5f5;
														border: 3px solid #444;
													}

													.auswahl_inaktiv {
														background-color: transparent;
														border: 3px solid transparent;
													}

													/* #eingabe Element kleiner als 450 (lower than (lt)) */
													/* die Klassen werden per Javascript gesetzt */
													/* margins und paddings verkleinern */
													/*
													#eingabe.elemLt650 #tabFensterForm ul li .input {
															margin: 0;
													}
													*/

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

							#linkDesignwahl {
									display: inline-block;
							}

					#group_masseingabe {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
					}
							#group_masseingabe label, #groupVolanthoehe label, #volantverlaengerungMasseingabe label, #auswahlVolantverlaengerung label{
									display: flex;
									align-items: center;
									flex-wrap: wrap;

							}
							.auswahl_optionen_wrapper label{
									display: flex;
									align-items: center;
							}
							#group_masseingabe label, #groupVolanthoehe label{
									margin-top: 1.5em;
							}
									#group_masseingabe label > * , #groupVolanthoehelabel > *, #groupAuswahlVolantverlaengerung > *{
											vertical-align: middle;
									}
									.mass_bez {
											display: inline-block;
											width: 120px;
											vertical-align: middle;
											margin-right: 1em;
									}
									.mass_bez strong {
										padding-right: 5px;
									}
									.mass_grenze {
											font-size: 80%;
											color: #888888;
											margin-left: 1em;
											white-space: nowrap;
									}

							#group_masseingabe input[type=number], #group_masseingabe input[type=text], #groupVolanthoehe input[type=number], #groupAuswahlVolantverlaengerung input[type=number]{		/* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
									background-color: #ececec;
									border: 1px solid #cecece;
									padding: 6px;
									margin-right: 5px;
									text-align: right;
									width: 60px;
							}

					#group_masseingabe_anleitungen {
						display: flex;
						margin: 0 auto;
					}
						#group_masseingabe_anleitungen > div {
							padding: 1em 2em;
						}

					.kuerzelEinheit {
						font-weight: bolder;
					}

					#hinweisMasseingabe {
							display: none;
							margin-top: 2em;
							background-color: #fdf8f8;
							font-size: 90%;
							padding: 1em;
					}
							.boxIconLeft {
									display: flex;
									align-items: center;
							}
									.boxIconLeft > .left {
											flex: 0 0 auto;
											padding: 1em;
									}
									.boxIconLeft > .right {
											flex: 1 1 0;
									}

											.hinweisMasseingabeUeberschrift {
													font-weight: bold;
											}
											#hinweisMasseingabeList {
													margin-left: 0;
													padding-left: 1em;
													margin-top: 0;
													margin-bottom: 0;
													padding-top: 0;
													padding-bottom: 0;

													list-style-type: none;
											}
													#hinweisMasseingabeList > li {
															text-indent: -1.5ex;
													}
													#hinweisMasseingabeList > li:before {
															content: "\002D\0020";
													}

					#masseingabe_stoffbreite{
							display: none;
							width: 100%;
					}

					#auswahlVolantverlaengerung{
							display: flex;
							align-items: center;
							margin-top: 1.5em;
					}
							#volantverlaengerungMasseingabe label{
									margin-top: 0.5em;
							}


					  #tabFensterVorauswahl .bezeichnung
					, #tabFensterVolant .bezeichnung
					, #tabFensterSaumHinten .bezeichnung
					, #tabFensterSaumVorn .bezeichnung
					{
						text-align: center;
					}

					  #auswahlRandList .bezeichnung
					, #auswahlBefestigungspunktList .bezeichnung
					, #auswahlDrehverschlussList .bezeichnung
					, .befestigungLink
					{
							font-size: 1rem;
							margin-top: 0.5em;
							margin-bottom: 0.5em;
					}
					.eingabeBox .preis_einzel {
							text-align: right;
					}
					.eingabeBox .preis_gesamt {
							text-align: right;
							color: #1a73ff;
					}
					#auswahlRandList .erklaerung_grau {
							color: #a3a3a3;
							margin-top: 0.5em;
							margin-bottom: 0.5em;
					}
					#auswahlRandList #input_hohlsaumDurchmesser {
							width: 2ch;
							text-align: right;
					}
					#auswahlRandList #input_hohlsaumDurchmesser::-webkit-inner-spin-button,
					#auswahlRandList #input_hohlsaumDurchmesser::-webkit-outer-spin-button {
							-webkit-appearance: none;
							margin: 0;
					}

					#auswahl_vorauswahl {
							display: flex;
					}
							#auswahl_vorauswahl > * {
									flex: 1;
									text-align: center;
									padding-right: 4%;
									padding-left: 4%;
									padding-top: 1em;
									padding-bottom: 1em;
									border-right: 1px solid #cacaca;
							}
									#auswahl_vorauswahl > * .bez {
											display: block;
											margin-top: 0.5em;
											margin-bottom: 0.5em;
									}
									#auswahl_vorauswahl > * .input {
											display: block;
									}
							#auswahl_vorauswahl > *:last-child {
									border-right: none;
							}
							#auswahl_vorauswahl > *:hover {
									background-color: #f9f9f9;
							}
							#auswahl_vorauswahl > *.active
							, #auswahl_vorauswahl > *.active:hover
							{
									background-color: #f1f1f1;
							}

							#auswahl_vorauswahl > * > img {
									max-width: 100%;
									height: 10em;
							}




					  .auswahl_vorauswahl
					, .auswahl_volant
					, .auswahl_saum_hinten
					, .auswahl_saum_vorn
					{
							cursor: pointer;
					}
							  .auswahl_rand .bild
							, .auswahl_befestigungspunkt .bild
							, .auswahl_befestigung .bild
							, .auswahl_streifenverlauf .bild
							, .auswahl_drehverschluss .bild

							, .auswahl_vorauswahl .bild
							/* , .auswahl_volant .bild
							, .auswahl_saum_hinten .bild
							, .auswahl_saum_vorn .bild */
							{
									margin-bottom: 1em;
									border: 3px solid transparent;
									/* padding: 4px; */
									height: 12em;
									display: flex;
							}


									.auswahl_vorauswahl .bild img
									/* , .auswahl_volant .bild img
									, .auswahl_saum_hinten .bild img
									, .auswahl_saum_vorn .bild img */
									{
											display: block;
									}

							 .auswahl_vorauswahl.aktiv .bild
							/* , .auswahl_volant.aktiv .bild
							, .auswahl_saum_hinten.aktiv .bild
							, .auswahl_saum_vorn.aktiv .bild */
							{
									border: 3px solid #444;
							}

							.auswahl_optionen_wrapper{
									display: flex;
									align-items: center;
									margin: 1em 0;
							}


							.flexCenter {
								justify-content: center;
							}

							#flexSpaceBetween {
								justify-content: space-between;
							}

							#flexSpaceEvenly {
								justify-content: space-evenly;
							}
					.infoHerstellerNr{
							text-align: center;
							font-weight: 600;
							margin: 1em auto;
					}
					.info{
							margin: 1em;
							display: flex;
							align-items: center;
					}
					.aufpreis{
							font-weight: 600;
					}



					#zoomWindow {
							position: fixed;
							top: 100px;
							/*left: 100;*/
							width: 500px;
							height: 500px;
							background-color: #ffffff;
							border: 1px solid #999999;
							display: none;
							overflow: hidden;
					}


@media (max-width: 800px) {
	/* einspaltig untereinander (und nicht mehr 2 Spalten) */
	/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */

	#spalten2 {
			flex-direction: column;
			margin-top: 2em;
			position: static;
	}
			#spalten2 > *{
					flex: none !important;
			}

					#modellbild_steuerung {
							position: static;
							margin-bottom: 2em;
					}
			#spalten2 #trenner {
					display: none;
			}
			#spalten2 #eingabe {
					padding-left: 2%;
			}
					#accordion {
							margin-bottom: 2em;
					}
					.gruppe_warenkorb {
							margin-top: 5em;
							margin-left: 0;
							margin-right: 0;
							margin-bottom: 1em;
							border-left: none;
							border-right: none;
							border-bottom: none;
							position: static;
					}
}

@media (max-width: 600px) {
	#modellbild_steuerung {
			display: block;
	}
}

@media (max-width: 500px) {
	#eingabe .eingabeBox {
			margin-left: 1em;	/* statt 2em */
	}

}

#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: #ffffff;
			padding: 2em;
			height: 100%;
			box-sizing: border-box;
	}
	@media (max-width: 800px) {
			.extrafenster {
					padding: 1em;
			}
	}
	.fensterDesign {
			display: flex;
			flex-direction: column;
	}
			.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 > .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 {
									padding-top: 2em;
									padding-right: 1em;
									border-right: 1px solid #cecece;
									overflow: auto;
									height: 100%;
									box-sizing: border-box;
							}
							.fensterZweiSpalten > .right {
									padding-left: 2.5%;
									padding-top: 2em;
									overflow: auto;
									height: 100%;
									box-sizing: border-box;

									position: relative;		/* fuer die absolut positionierten Ausblend-Balken */
							}

									.fensterZweiSpalten > .right: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: ' ';
									}
									.fensterZweiSpalten > .right: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: ' ';
									}

							.fensterDesign .fensterZweiSpalten > .left {
									flex: 0 1 290px;
							}
							.fensterDesign .fensterZweiSpalten > .right {
									flex: 4.8 1 0;
							}

					@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 {
											border-bottom: 1px solid #cecece;
											padding-bottom: 0.5em;
											margin-bottom: 1em;
									}

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

							.extrafenster .buttons {
									margin-top: 1em;
							}
									.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;
									}
											.extrafenster .buttons .uebernehmen:hover {
													background-color: #458dcc;
											}


							.listDesigns {
									overflow: auto;
									position: relative; 	/* fuer die Positionsbesteimmung eines Stoffes mit offsetLeft - fuer die Position des Pfeils */
									margin-left: 2%;

									display: flex;
									flex-wrap: wrap;

									padding-top: 1em;		/* fuer die transparenten Uebergangsbereiche */
									padding-bottom: 1em;
									height: 100%;
									box-sizing: border-box;
							}

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


									.listDesigns .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 200px; */
											flex: 1 1 300px;
									}
											.listDesigns .listDesignsAreaActivateDetails {
													cursor: pointer;
													position: relative;
											}
													.listDesigns .listDesignsGroupBilder > * {
															float: left;
													}
													.listDesigns .listDesignsGroupBilder > *:last-child {		/* clear-<br> */
															float: none;
													}
															.listDesigns .listDesignsDesign .listDesignsDesignbild {
																	margin-right: 5px;
																	margin-bottom: 1em;
															}
																	.listDesigns .listDesignsDesign .listDesignsDesignbild img {
																			display: block;
																			width: 100%;
																			min-height: 180px;		/* wenn das Bild fehlt */
																	}
															.listDesigns .iconSpezial {
																	/*
																	width: 23px;
																	height: 23px;
																	*/
																	width: 12%;
																	margin-bottom: 5px;
															}

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

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

									.listDesigns .listDesignsBoxDetails {
											display: flex;
											flex-direction: row;

											border: 2px solid #cecece;
											padding: 1.8%;
											position: relative;
											box-sizing: border-box;
									}
									.listDesigns .listDesignsBoxDetails.elemLt500 {
											flex-direction: column;
									}
											.listDesigns .listDesignsBoxDetails .schliessen {
													position: absolute;
													top: 1em;
													right: 1em;
													cursor: pointer;
											}
											.listDesigns .pfeilOben {
													position: absolute;
													height: 12px;
													font-size: 20px;
											}
											.listDesigns .listDesignsBoxDetails > .left {
													flex: 1 0 auto;
													margin-right: 4%;
													display: flex;
													align-items: center;
											}
													.listDesigns .listDesignsBoxDetails > .left img.boxDetailsDesignbild {
															width: 100%;
															/* height: 100%; */
															display: block;		/* wegen dem Space unter der Baseline */
													}
											.listDesigns .listDesignsBoxDetails > .right {
													flex: 10 5 auto;
											}
													.listDesigns .listDesignsBoxDetails > .right h3 {
															font-size: 15px;
													}
													/*
													.listDesigns .listDesignsBoxDetails > .right .versand {
															color: #00900a;
															font-size: 13px;
													}
															.listDesigns .listDesignsBoxDetails > .right .versand .haken {
																	font-size: 16px;
																	font-weight: bold;
															}
													*/
													.listDesigns .listDesignsBoxDetails .eigenschaften {
															column-width: 200px;
															line-height: 20px;
															padding-left: 5%;		/* das spiegelt die Standardeinsteellung im Firefox 44 wider (40px), verkleinert sich jetzt aber passenderweise bei kleinen Layouts */
													}

													.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt {
															margin-left: 3em;
															margin-top: 2em;
													}
															.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt a {
															}
															.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt img {
																	vertical-align: middle;
															}

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


											.listDesigns .listDesignsBoxDetails .design_big_bildbox {
													position: relative;
													width: 350px;
													margin-left: 1em;
													/* height: 333.33px;		/* Die Bilder sollten eigentlich 400x300Px vorliegen. Das sind aber leider nicht alle! 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  */
													overflow: hidden;
													border: 1px solid #cecece;
											}
											.listDesigns .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
													width: 180px;
											}
											.listDesigns .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
													/* hier jetzt untereinander */
													margin-left: auto;
													margin-right: auto;
													margin-bottom: 1em;
													width: 90%;

											}
													.listDesigns .listDesignsBoxDetails .design_big_bild {

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

													.listDesigns .listDesignsBoxDetails .design_big_nav_left, .listDesigns .listDesignsBoxDetails .design_big_nav_right {
															position: absolute;
															top: 160px;
															cursor: pointer;
															width: 12px;
													}
													.listDesigns .listDesignsBoxDetails .design_big_nav_left {
															left: -20px;
													}
													.listDesigns .listDesignsBoxDetails .design_big_nav_right {
															right: -20px;
													}
											.listDesigns .listDesignsBoxDetails .design_big_preview {
													margin-top: 7px;
													margin-left: 1em;
											}
													.listDesigns .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 */
													}
															.listDesigns .listDesignsBoxDetails .design_big_preview > img.active {
																	border: 1px solid #454545;
															}

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

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

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


							.listDesigns .listDesignsBez, .listDesigns .listDesignsErsetztbez {
									color: #888888;
							}
							.listDesigns .listDesignsErsetztbez {
									font-style: italic;
							}
							.listDesigns .abpreis {
									text-align: right;
									font-weight: bold;
									margin-top: 4px;
									margin-bottom: 2px;
							}

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

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

					.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 .check label {
					display: block;
					text-indent: -2em;
					margin-left: 2em;
					margin-top: 5px;
					margin-bottom: 5px;
			}

			label .bild {
					border: 3px solid transparent;
					height: 8em;
					margin-bottom: 1em;
			}
			label.checked .bild {
					border: 3px solid #060606;
			}
			label.box_klein input {
					display: none;
			}
			label.box_klein {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 0.5em;
			}

			#wrapFormSuche {
					text-align: right;
					margin-bottom: 1em;
			}

					.suche {		/* .fensterDesign */
							background-image: url(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%;

					}

			.group.color label {
					display: inline-block;
					margin-right: 4%;
					margin-bottom: 4%;
			}

			.farbbox {
					display: block;
					width: 30px;
					height: 30px;
					line-height: 30px;
					float: left;
					border: 1px solid #f1f1f1;
					text-align: center;
					font-weight: bold;
					cursor: pointer;
					font-size: 20px;
			}
			.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.violett { background-color: #9349aa; color: #ffffff; }
			.farbbox.weiss { background-color: #ffffff; color: #888888; }
			.farbbox.grau { background-color: #838383; color: #ffffff; }
			.farbbox.silber { background-color: #C0C0C0; color: #ffffff; background-image: url(bilder/farben/silber.svg); }
			.farbbox.schwarz { background-color: #000000; color: #ffffff; }
			.farbbox.transparent { background-color: #ffffff; background: linear-gradient(to bottom right, #e1e1e1 0%, #e1e1e1 50%, #ffffff 50%, #ffffff 100%); color:#888888; }



#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
	/* padding: 40px; */
	padding: 8%;
}
	#fensterWarenkorb #fensterWarenkorb_top_left {
			float: left;
			width: 30%;
			margin-right: 4%;
			position: relative;
	}
			#fensterWarenkorb #warenkorb_box_produktbild {
					width: 100%;
					max-height: 340px;
					max-width: 161px;
			}
			#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
					position: absolute;
					top: 50%;
					margin-top: -27px;
					left: 50%;
					margin-left: -27px;
					display: none;
			}
	#fensterWarenkorb #fensterWarenkorb_top_right {
			float: right;
			width: 64%;
	}
			#fensterWarenkorb #warenkorb_box_status {
					border-bottom: 1px solid #e6e6e6;
					padding-bottom: 7px;
					margin-bottom: 20px;
					font-size: 1.2em;
			}
			#fensterWarenkorb #warenkorb_box_titel {
					font-size: 1.1em;
					font-weight: bold;
			}
			#fensterWarenkorb #warenkorb_box_groesse {

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

	#fensterWarenkorb_top_buttons {
			margin-top: 28px;
	}
			#fensterWarenkorb_top_buttons .left {
					float: left;
					display: block;
					text-transform: uppercase;
					border: 2px solid #bf0008;
					height: 39px;		/* so hat es mit seinen bordern die gleiche Hoehe wie das Warnkorb-Icon */
					line-height: 39px;
					color: #bf0008;
					padding-left: 1em;
					/* padding-right: 46px; */
					padding-right: 8%;
					cursor: pointer;
			}
			#fensterWarenkorb_top_buttons .right {
					float: right;
			}
			@media (max-width: 530px) {
					#fensterWarenkorb_zurueck_einkaufen {
							display: none;
					}
			}

#fensterWarenkorb #fensterWarenkorb_bottom {
	display: none;
	border-top: 5px solid #e6e6e6;
	padding: 2em;
}
	.fensterWarenkorb_bottom_ueberschrift {
			margin-bottom: 1em;
			font-size: 13pt;
	}
	.warenkorbAehnlichArtikel {
			display: inline-block;
			width: 161px;
			vertical-align: top;
			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) {
	#fensterWarenkorb {
			width: auto;
	}
			#fensterWarenkorb_top_left {
					display: none;
			}
			#fensterWarenkorb #fensterWarenkorb_top_right {
					/* width: auto;
					float: none; */
			}
					#fensterWarenkorb_top_buttons .left {
							margin-bottom: 1em;
					}
}





/* ehemals shop.css */







.gruppe_warenkorb {

}

	.preis {
			/* font-size: 0.45cm; */
			/* font-weight: bold; */
			font-size: 30px;
			font-weight: 400;
	}

	/* nur RTS
	#anbieterkennzeichnung {
			text-align: right;
			cursor: pointer;
			text-decoration: underline;
			font-size: 11px;
	}
	 */


	/* Warenkorb Button */

	.warenkorb_konfi {

	}


/* Ende ehemals shop.css */



.preis_alt{
display: block;
text-decoration: line-through;
}
.preis_neu{
display: block;
color: #ee1f26;
}

#fensterWarenkorb .preis_alt{
display: inline;
}