#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 (+ / -) */
	
	width: 3ch;					/* im RTS Layout ist hier 100% definiert. Das ist hier zu viel */
	font-size: 16px;
}

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;
	height: 100%;
	box-sizing: border-box;
}

#konfigurator .accordion_ueberschrift {
	font-size: 14px;
}

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

	.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;
					font-size: 15px;
					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;
					font-size: 15px;
			}

			.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;
					display: flex;
			}



					.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;
			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_kopf {
							margin-bottom: 1em;
							display: flex;
							justify-content: space-between;
					}
							#modellbild_ueberschrift {
									flex: 1 1 0;
									text-align: left;
							}
							#modellbild_logo {
									flex: 0 0 110px;
							}
									#modellbild_logo img {
											width: 100%;
									}
							#modellbild_kopf_rechts {
									flex: 1 1 0;
							}

					#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; */
					}
							#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-size: 16px;
							font-weight: normal;
							padding: 1em;
							text-align: left;
							margin-top: 0;
							margin-bottom: 0;
					}
					#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 {
									display: block;
									margin-top: 1.5em;
							}
									#group_masseingabe label > * {
											vertical-align: middle;
									}
									.mass_bez {
											display: inline-block;
											width: 120px;
									}
									.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] {		/* 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;
							}

					.kuerzelEinheit {
						font-weight: bolder;
					}

					#messbereich_form {
						margin-right: 2em;
					}

					#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_soforthinweise {
							display: none;
							margin-top: 1em;
							margin-left: 2em;
							padding: 1em;
							border: 2px solid #bb0000;
							border-radius: 2px;
							width: 100%;
							text-align: center;
							background-color: #f7c4c4;
					}
					#masseingabe_berechnung {
							display: none;
							margin-top: 1em;
							margin-left: 3em;
							padding: 1em;
							border: 1px solid #eeeeee;
							cursor: default;
					}
							.masseingabe_berechnung_block {
									margin-top: 1em;
							}
							.masseingabe_berechnung_block:first-child {
									margin-top: 0;
							}

					  #auswahlRandList .bezeichnung
					, #auswahlBefestigungspunktList .bezeichnung
					, #auswahlDrehverschlussList .bezeichnung
					, .befestigungLink
					{
							font-size: 1rem;
							margin-top: 0.5em;
							margin-bottom: 0.5em;
					}
					.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_seiten {

					}
							.seite {
									display: inline-block;
									color: #ffffff;
									padding: 1em;
									text-align: center;
									cursor: pointer;
									width: 1rem;		/* weil wir keine monospace-Schriftart haben. So sind die Boxen alle gleich breit. -- Wenn ich breite und Hoehe auf feste Pixel setze, bin ich wider abhaenig von der Schriftgroesse */
									height: 1rem;		/* den gleichen Wert fuer Breite verwenden, so dass das Kaestche quadratisch ist */

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

							}
									.auswahl_seiten .seite {		/* nur bei der Auswahl Seiten, nicht bei der anzahl der Oesen */
											margin-bottom: 4px;
									}
							.seite.inaktiv {
									background-color: #cacaca;
									text-decoration: line-through;
									transition: background-color 0.5s;
							}

							.seite.inaktiv:hover {
									/* transform: scale(1.1); */

									/* Style vom Aktiven */
									background-color: #5e9dff;

							}

							.seite.aktiv {
									background-color: #1a73ff;
							}

					.auswahl_rand .bild {
							cursor: pointer;
					}
					  .auswahl_befestigungspunkt
					, .auswahl_befestigung
					, .auswahl_streifenverlauf
					, .auswahl_drehverschluss
					{
							cursor: pointer;
					}
							  .auswahl_rand .bild
							, .auswahl_befestigungspunkt .bild
							, .auswahl_befestigung .bild
							, .auswahl_streifenverlauf .bild
							, .auswahl_drehverschluss .bild
							{
									margin-bottom: 1em;
									border: 5px solid transparent;
							}
									  .auswahl_rand .bild img
									, .auswahl_befestigungspunkt .bild img
									, .auswahl_befestigung .bild img
									, .auswahl_streifenverlauf .bild img
									, .auswahl_drehverschluss .bild img
									{
											display: block;
									}
							  .auswahl_rand.aktiv .bild
							, .auswahl_befestigungspunkt.aktiv .bild
							, .auswahl_befestigung.aktiv .bild
							, .auswahl_streifenverlauf.aktiv .bild
							, .auswahl_drehverschluss.aktiv .bild
							{
									border: 3px solid #444;
									padding: 4px;
							}

							.auswahl_rand .bild {
									position: relative;
							}
									.auswahl_rand .bild .ribbon {
											position: absolute;
											right: -10px;
											top: 20px;
									}

					#ueberschriftAuswahlBefestigungspunktAnzahl {
							margin-top: 2em !important;		/* Angabe von .line ueberschreiben */
							font-weight: bold;
							/* background-color: #ebfbf5; */
							background-color: #888888;
							margin-bottom: 5px;
							padding-top: 0.5em;
							padding-bottom: 0.5em;
							color: #ffffff;
					}
							#ueberschriftAuswahlBefestigungspunktAnzahl .icon {
									width: 20px;
									height: 20px;
									margin-left: 0.3em;
									cursor: pointer;
									vertical-align: middle;
							}
							#ueberschriftAuswahlBefestigungspunktAnzahl .lineAbstand > * {		/* fuer das Info (i) in der Ueberschrift (und den unmittelbaren Text davor im <span>-Element) */
									vertical-align: middle;
							}
					#groupBefestigungspunkt .line {
							display: flex;
							align-items: center;
							padding-top: 5px;				/* padding-top, statt margin-top, weil sonst die Browser mit der Aufteilung der Elemente durcheinander kommen (bei 3 Elementen wuerden in der 1. Spalte ein Element sein und in der 2. Spalte 2 Element sein) - Chrome hatte da sogar vorher das eine div aufgespalten */
							-webkit-column-break-inside: avoid;		/* aus Kompatibilitaetsgruenden (09.12.2019) - wenn etwas Zeit vergangen ist, kann diese Zeile auch wieder raus */
							page-break-inside: avoid;		/* aus Kompatibilitaetsgruenden (09.12.2019) - wenn etwas Zeit vergangen ist, kann diese Zeile auch wieder raus */
							break-inside: avoid;			/* Safari wuerde sonst, bei nur einem Element umbrechen */
					}
							#groupBefestigungspunkt .line .lineSeite {
									flex: 0 0 80px;
									padding-left: 1em;
							}
							#groupBefestigungspunkt .line .lineAnzahl {
									flex: 0 0 auto;
									white-space: nowrap;
									margin-left: 5px;
									margin-right: 5px;
							}
							#groupBefestigungspunkt .line .lineAbstand {
									flex: 0 0 100px;
							}
									.btnIncDec {
											background-color: #ffffff;
											background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #f5f5f5 50%, #f5f5f5 100%);
											color: #424242;
											font-size: 1.2em !important;
											border: 1px solid #cfcfcf;
											padding: 0;
											width: 1.5em;
											/* height: 1.5em; laesst das Zeichen vertikal nichrt mehr mittig erscheinen, warum auch immer */
											line-height: 1.5em;
											vertical-align: middle;
									}
									.input_befestigungspunkt_anzahl {
											text-align: center;
											padding-left: 1em;
											padding-right: 1em;
											width: 3ch;
											padding-top: 4px;
											padding-bottom: 4px;
											margin-left: 4px;
											margin-right: 4px;
											vertical-align: middle;
									}

							.oesenanzahlEingabe {
								display: flex;
								flex-direction: column;
								gap: 2em;
								margin-top: 1em;
								margin-bottom: 1em;
							}

							.oesenanzahlEingabeZeile {
								display: flex;
							}

							.flexCenter {
								justify-content: center;
							}

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

							#flexSpaceEvenly {
								justify-content: space-evenly;
							}



					#eingabe.elemLt600 #groupBefestigungspunkt .line {
							text-align: center;
					}
					#eingabe.elemLt600 #groupBefestigungspunkt .line .lineSeite {
						padding-left: 0;
					}
					#eingabe.elemLt600 .oesenanzahlEingabe {
							gap: 0;
					}
					#eingabe.elemLt600 .flexCenter
					, #eingabe.elemLt600 .oeseneingabeLinks .line
					, #eingabe.elemLt600 .oeseneingabeRechts .line {
							justify-content: flex-start;
					}
					#eingabe.elemLt600 .oesenanzahlEingabeZeile {
							flex-wrap: wrap;
					}
					#eingabe.elemLt600 .oeseneingabeLinks, .oeseneingabeRechts {
							flex: 1 1 100%;
					}





					#groupAuswahlDrehverschluss {
							margin-top: 3em;
							display: none;
					}
							#auswahlDrehverschluss {
									margin-top: 2em;
									display: none;
							}

					#liste_seiten table {
							width: 100%;
					}
							#liste_seiten td {
									padding-top: 1em;
									padding-bottom: 1em;
									white-space: nowrap;
									text-align: center;
									cursor: default;
							}
							#liste_seiten .input_befestigungspunkt {
									width: 100px;
							}
							#liste_seiten .input_anzahl_oese {
									margin-left: 0.5em;
									margin-right: 0.5em;
									margin-top: 0;
							}
							#liste_seiten .input_abstand_rand {
									width: 2ch;
							}
							#liste_seiten .cell_anzahl_oese {

							}
									#liste_seiten .cell_anzahl_oese > * {
											vertical-align: top;
									}
									#liste_seiten .anzahl_oese_extrem {
											opacity: 0.6;
									}
									#liste_seiten .group_input_anzahl_oese {
											position: relative;
									}
											#liste_seiten .input_anzahl_oese_show {
													position: absolute;
													bottom: -9px;
													left: calc(50% - 1ch);
											}
							#liste_seiten .trenner {
									border-top: 1px solid #cccccc;
							}
							#liste_seiten .alle {

							}

					#zoomWindow {
							position: fixed;
							top: 100px;
							/*left: 100;*/
							width: 500px;
							height: 500px;
							background-color: #ffffff;
							border: 1px solid #999999;
							display: none;
							overflow: hidden;
					}
	/* Swen 03.11.2021	*/		
	.oeseneingabeLinks, .oeseneingabeRechts {
			flex: 1 1 50%;
	}
	.oeseneingabeLinks .line, .oeseneingabeRechts .line {
			justify-content: center;
	}
	/* Swen 03.11.2021 Ende	*/

@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;
	}
	@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 {
											font-size: 13px;
											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 */
																			border: 1px solid #888888;
																	}
															.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;
											align-items: center;
									}
									.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%;
											}
													.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: 200px;

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

			#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 */

/*
body {
	/ - * solange im aLayout (layout.css) keine ordentliche Schriftgroesse gesetzt ist (aktuell: 1em), mache ich das hier * - /
	font-size: 13px !important;		/* important: so dass es auch im Extra-Stoffauswahl-Fenster geht */
}
*/


#konfiguratorGesamt {
	margin-top: 2em;		/* hat nur Auswirkung im PS-Shop */
}


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