/*
		01.04.2019 - Tim - Merhere Bilder bei "Ansicht wechseln" eingebaut
		01.11.2023 - Swen - CSS für Kundenbilder eingebaut
*/

/* vom layout ueberschreiben */
#layout_touch {
		min-height: 0;
}
.inhalt{
	max-width: 100%;
}
/* Ende Layout */


label {
		cursor: pointer;

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

}
		label input[type=checkbox] {
				cursor: pointer;
		}





/*
		IE-Label-Img-Event-Bug
		- betrifft nur IE 11 (nicht IE10 und auch nicht Edge12) oder andere Browser
		- Bild <img> ist nicht anklickbar wenn <img> innerhalb von <label> und das Ganze innerhalb eines <form> - Text innerhalb von Label funktioniert aber korrekt
		- dies ist der Fall -im Fenster Modellauswahl bei dem Filter auf der linken Seite oder -im Profiltab wahl der Optionen (Profilfarbe, Schienenprofil+)

		siehe auch
		http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11
*/

		label {
				display: inline-block;
		}
		label img{
				pointer-events: none;
		}
/*
		Ende IE-Label-Img-Event-Bug
*/







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

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

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

		#picture_design {
				overflow: auto;
				display: inline-block;
				max-width: 700px;
				margin: auto;
				text-align: left;
				padding-right: 1em;		/* Platz zwischen Text und evtl. eingeblendetem Scrollbalken */
		}

				#picture_design img {
						display: inline-block;
						max-width: 100%;
				}

				.picture_design_ueberschrift {
						color: #444444;
						margin-bottom: 1em;
						text-align: left;
				}
				.picture_design_group {
						display: flex;
						flex-direction: row;
				}
				#picture_design.elemLt600 .picture_design_group {
						flex-direction: column;
				}
						.picture_design_bild {
								text-align: left;
								flex: 0 0 300px;
						}
						#picture_design.elemLt600 .picture_design_bild {
								text-align: center;
						}
						.picture_design_space {
								flex: 0 1 45px;
						}
						#picture_design.elemLt600 .picture_design_space {
								flex: 0 1 2em;
						}
						.picture_design_box {
								text-align: left;
								flex: 1 1 370px;
						}
								.picture_design_box_ueberschrift {
										margin-top: 2em;
										margin-bottom: 2em;
								}
										.picture_design_box_ueberschrift:first-child {
												margin-top: 0;
										}
										.picture_design_box_ueberschrift img {
												vertical-align: middle;
												margin-right: 1em;
										}

								.picture_design_box_eigenschaften {

								}
								.picture_design_box_eigenschaften, .picture_design_box_eigenschaften a {
										color: #444444;
								}

										.picture_design_box_eigenschaften ul {
												list-style: none;
												margin: 0;
												padding: 0;
										}
												.picture_design_box_eigenschaften ul li:before {
														content: "\002D \0020";
												}
												.picture_design_box_eigenschaften ul li {
														margin-bottom: 2px;
												}
								.picture_design_box_stoffprobe {
										font-weight: bold;
										text-decoration: underline;
								}
										.picture_design_box_stoffprobe span {
												text-decoration: none;
										}
								.picture_design_box_beschr {
										max-height: 600px;
										overflow: auto;
										line-height: 1.6em;
								}
				

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

#konfigurator h3 {
		font-size: 100%;		/* "normale" Schriftgroesse */
}
		#konfigurator h3:first-child {
				margin-top: 0;
		}

		#modellbild_steuerung {
				font-size: 11px;
				position: fixed;
				bottom: 0;
				left: 2%;
				width: 48%;
				display: flex;
				align-items: center;
				/*margin-bottom: 5em;*/
				border-top: 1px solid #cacaca;
				padding-top: 1em;
				background-color: #ffffff;
		}
				#modellbild_steuerung .modellbild_steuerung_ansicht_wechseln {
						text-align: left;
						padding-right: 1em;
				}
				#modellbild_steuerung .boxGroup {
						display: inline-block;
						text-align: left;
				}
						#modellbild_steuerung > .boxGroup > * {
								margin-right: 1em;
								margin-bottom: 1em;
								vertical-align: middle;
								display: inline-block;
						}
						#modellbild_steuerung .box {
								border: 1px solid #cacaca;
								border-radius: 1px;
								cursor: pointer;
								width: 50px;
								height: 50px;
								
								display: inline-flex;
								align-items: center;		/* um das Ganze vertikal mittig auszurichten */
						}
						#modellbild_steuerung .boxFenster {
								display: none;
						}
								#modellbild_steuerung .box img {
										max-width: 100%;
										max-height: 100%;
										flex: 1 1 0px;		/* diese Angabe ist fuer Internet Explorer 11 und aelter, dass das auch da toll aussieht */
								}
								#modellbild_steuerung .box.active {
										outline: 1px solid #454545;
								}
						#modellbild_steuerung .box.selected {
								/*
								border: 3px solid #888888;
								border-radius: 3px;
								*/
								/*
								outline: 3px solid #888888;		 hat leider keine gerundeten Ecken
								*/
								border: 0;
								box-shadow: 0 0 0 3pt #888888
						}
				


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

				position: fixed;
				bottom: 0;
				right: 0.5%;
				width: 48%;
				box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
				box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.10);

				margin-top: 1em;
				display: -webkit-flex;
				display: flex;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				-webkit-flex-direction: row;
				flex-direction: row;
				-webkit-align-items: center;
				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 {
						-webkit-flex: 1 1 280px;
						flex: 1 1 280px;
				}
						.sonderwunsch textarea {
								width: 100%;
								height: 50px;
								border: 1px solid #e6e6e6;
								box-sizing: border-box;
						}
				.box_menge {
						text-align: right;
						-webkit-flex: 3 0 auto;
						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 {
						-webkit-flex: 1 0 auto;
						flex: 1 0 auto;
						text-align: right;
				}
				.box_warenkorb {
						-webkit-flex: 1 0 auto;
						flex: 1 0 auto;
						text-align: right;
				}
						.warenkorb_konfi {
								cursor: pointer;
								padding-top: 5px !important;		/* Paddings vom Layout ueberschreiben - das HR-Layout bringt noch einen 5Pixel Border-Bottom mit, der hier auch abgezogen ist */
								padding-bottom: 5px !important;
								padding-left: 1em !important;
								padding-right: 1em !important;
						}



					.warenkorb_extrafenster {
						cursor: pointer;
						-webkit-flex: 1 0 auto;
						flex: 1 0 auto;
						text-align: right;
				}
						.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);
								}


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

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

		#spalten2 {
				/* margin-top: 120px; */
				/* margin-bottom: 120px; */		/* in etwa so gross wie die untere Warenkorbleiste ist, + gewuenschtem zusaetzlichen Platz */
				padding-bottom: 120px;		/* in Firefox (59.0.1) faellt der margin-bottom mit einem anderen margin zusammen ("collapsing margin") - um den Abstand zu garantieren nehme ich hier padding statt margin */
		}
				#spalten2 #visualisierung {
						position: fixed;
						z-index: 1;		/* wenn ich den z-index von diesem fixed-Element nicht setze, greift der z-index vom inneren Zoom-Div (ebenfalls fixed) nicht */
						/* top: 120px; wenn hier nichts gesetzt ist, sollte die aktuelle Position passen */
						left: 2%;
						width: 48%;
						text-align: center;
				}
				#kundenbilder {
					padding-top: 2em;
					box-sizing: border-box;
					height: calc(100% - 4em);
					grid-template-rows: 3em auto;
				}
				#kundenbilder h1 {
					font-size: 1.5em;
				}
				#kundenbilder > a {
					display: flex;
					flex-flow: column;
					gap: 1em;
					margin: auto;
					align-items: center;
					text-decoration: none;
					color: inherit;
					font-size: 1em;
					background: url("/seilspannsonnensegel/konfigurator/load.svg") no-repeat 50% 60%;
					background-size: 3em auto;
					min-width: 5em;
					min-height: 10em;
					margin: auto;
				}
				#kundenbilder .design_buttons_kunden_1 {
					text-decoration: underline;
				}
				#kundenbilder img {
					max-width: 100%;
					/*width: 75%;
					max-width: 300px;
					max-height: 500px;
					*/
				}
				@media (max-width: 1400px) {

						#spalten2 {
								margin-top: 100px;
						}
								#spalten2 #visualisierung {
										top: 100px;
								}

				}

				@media (max-width: 1100px) {

						#spalten2 {
								margin-top: 80px;
						}
								#spalten2 #visualisierung {
										top: 80px;
								}
				}




						.ajax_lade {
								position: absolute;
								right: 0;
								top: 0;
								visibility: hidden;
								width: 50px;
								height: 50px;
						}

						#modellbild_ueberschrift {
								margin-bottom: 1em;
						}

						#paper {
								display: none;
								margin: auto;
						}
						.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 */
								/* display: none; */
						}

								#modellbild_ueberschrift {
										text-align: left;
								}
										#spalten2 #visualisierung .modellbild_ueberschrift_text {
												display: inline-block;
												vertical-align: top;
												margin-right: 2em;
										}
												#spalten2 #visualisierung .ueberschrift1 {
														font-size: 16px;
												}
												#spalten2 #visualisierung .ueberschrift2 {
														font-weight: bold;
														font-size: 16px;
												}
										#spalten2 #visualisierung .ueberschrift_logo {
												display: inline-block;
												vertical-align: top;
												height: 45px;
										}
						#visualisierung svg {
								max-width: 100%;
						}
				#spalten2 #eingabe {
						margin-left: 48%;
						padding-left: 4%;
						padding-right: 1.2%;
				}
						#eingabe .bereichsueberschrift {
								background-color: #444444;
								color: #ffffff;
								font-size: 16px;
								font-weight: normal;
								padding: 1em;
								text-align: left;
						}
						#eingabe .accordion_ueberschrift {
								border-top: 1px solid #cecece;
								border-bottom: 1px solid transparent;
								padding-top: 1em;
								padding-bottom: 1em;
								margin-top: 0;
								margin-bottom: 0;
								position: relative;
								cursor: pointer;
								font-weight: normal;
								color: #888888;

								display: -webkit-flex;
								display: flex;
								-webkit-justify-content: space-between;
								justify-content: space-between;
								-webkit-align-items: center;
								align-items: center;
						}
						#eingabe .accordion_ueberschrift:first-child {
								border-top: 0;
						}
						#eingabe .accordion_ueberschrift.initialNone {		/* die Ueberschriften, die je nach Konfiguration mal an und mal aus sein koennen initial auf aus stellen, dass sie beim Laden nicht kurz zu sehen sind und dann wieder verschwinden  */
								display: none;
						}
						#eingabe .accordion_ueberschrift.active {
								color: #444444;
								font-weight: bold;
						}
								#eingabe .accordion_ueberschrift .eingabeGewaehltIcon {
										-webkit-flex: 0 0 auto;
										flex: 0 0 auto;
								}

								#eingabe .accordion_ueberschrift .eingabeGewaehltUe {
										-webkit-flex: 1 1 auto;
										flex: 1 1 auto;
										padding-right: 1em;
								}

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

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

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

										-webkit-flex: 0 0 auto;
										flex: 0 0 auto;
								}

						#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 #groupSchienenprofil .accordion_zwischenueberschrift {
												margin-top: 2em;
										}
								#eingabe .erklaerung {
										font-size: 90%;
										color: #888888;
								}

										.tabs > * {
												display: inline-block;
												border: 1px solid #cecece;
												margin-right: 6px;
												padding: 1em;
												position: relative;
												left: 0;
												top: 1px;
												cursor: pointer;
												/* color: #cecece;  das waere zu hell, deshalb jetzt dunkler */		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.elemLt650 #tabModell .bez {
														display: none;
												}
												#eingabe.elemLt650 #tabBefestigung .bez {
														display: none;
												}
										.tabs > .noTab {
												border: 0;
												text-decoration: none;
												color: #444444;
										}
										.tabFenster {
												border-top: 1px solid #cecece;
										}
												.tabFenster > * {
														display: none;
														padding: 1em;
														max-width: 800px;		/* max-width hilft uebergeordneten Flex-Elementen bei der Breitenbestimmung*/
												}

								#eingabe .befestigung li {
										display: -webkit-flex;
										display: flex;
										-webkit-justify-content: space-between;
										justify-content: space-between;
										-webkit-align-items: center;
										align-items: center;
										border-bottom: 1px solid #cecece;
								}
										#eingabe .befestigung li label {
												display: -webkit-flex;
												display: flex;
												-webkit-justify-content: space-between;
												justify-content: space-between;
												-webkit-align-items: center;
												align-items: center;
												flex: 1 2 auto;
										}
								#eingabe .befestigung li:last-child {
										border-bottom: none;
								}
										#eingabe .befestigung li .input {
												-webkit-flex: 0 2 45px;
												flex: 0 2 45px;
												text-align: left;
										}
										#eingabe .befestigung li .bezeichnung {
												-webkit-flex: 1 3 auto;		/* eigentlich flex: 1 1 0; - aber in IE11 (nicht Edge) und ich glaube im Safari (nicht Chrome) geht das mit auto hier besser */
												flex: 1 3 auto;		/* eigentlich flex: 1 1 0; - aber in IE11 (nicht Edge) und ich glaube im Safari (nicht Chrome) geht das mit auto hier besser */
												text-align: left;
												padding-top: 1em;
												padding-bottom: 1em;
										}
										#eingabe .befestigung li .info {
												display: block; /* wegen dem a-Tag */
												-webkit-flex: 0 1 47px;
												flex: 0 1 47px;
												cursor: pointer;
												text-align: center;
										}
										#eingabe.elemLt350 .befestigung li .input input {
												margin: 0;
										}

								#hinweis_keinbefestigungsmaterial  {
										display: none;
										margin-top: 2em;
										margin-bottom: 2em;
										font-style: italic;
								}

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

								.einabeAuswahl {
										/* height: 80px; */
								}

										.einabeAuswahl ul li {
												display: flex;
												display: -webkit-flex;
												-webkit-justify-content: space-between;
												justify-content: space-between;
												-webkit-align-items: center;
												align-items: center;
												border-bottom: 1px solid #cecece;
										}
												.einabeAuswahl ul li label {
														display: flex;
														display: -webkit-flex;
														-webkit-justify-content: space-between;
														justify-content: space-between;
														-webkit-align-items: center;
														align-items: center;
														flex: 1 2 60%;
												}
												.einabeAuswahl ul li .input {
														-webkit-flex: 0 0 5.6%;
														flex: 0 0 5.6%;
														text-align: left;
												}

												.einabeAuswahl ul li .img {
														width: 69px;
														-webkit-flex: 0 0 69px;
														flex: 0 0 69px;
														margin-left: 1em;
														margin-right: 1em;
												}
												.einabeAuswahl ul li img {
														vertical-align: middle;
														margin-top: 1em;
														margin-bottom: 1em;
												}
												.einabeAuswahl ul li .bezeichnung {
														-webkit-flex: 1 3 auto;		/* eigentlich flex: 1 3 0; - aber in IE11 (nicht Edge) und ich glaube im Safari (nicht Chrome) geht das mit auto hier besser */
														flex: 1 3 auto;		/* eigentlich flex: 1 3 0; - aber in IE11 (nicht Edge) und ich glaube im Safari (nicht Chrome) geht das mit auto hier besser */
														text-align: left;
														padding-left: 1em;
														padding-top: 1em;
														padding-bottom: 1em;
												}
														.einabeAuswahl ul li .bezeichnung .zusatz {
																color: #888888;
														}
														.einabeAuswahl ul li .bezeichnung .zusatzlink {
																display: block;
																/* font-size: 13px; */
														}
																#groupModell ul li .bezeichnung .zusatzlink a {
																		color: #888888;
																		text-decoration: none;
																		border-bottom: 1px dashed #888888;
																}
												.einabeAuswahl ul li .price {
														-webkit-flex: 0 0 auto;
														flex: 0 0 auto;
														text-align: left;
														padding-left: 1em;
														padding-right: 1em;
												}
												.einabeAuswahl ul li .info {
														-webkit-flex: 0 1 47px;
														flex: 0 1 47px;
														cursor: pointer;
														text-align: center;
												}

												/* #eingabe Element kleiner als 450 (lower than (lt)) */
												/* die Klassen werden per Javascript gesetzt */
												/* margins und paddings verkleinern */
												#eingabe.elemLt650 .einabeAuswahl ul li .input {
														margin: 0;
												}
												#eingabe.elemLt650 .einabeAuswahl ul li .bezeichnung {
														padding-left: 0;
												}
												#eingabe.elemLt650 .einabeAuswahl ul li .price {
														-webkit-flex: 0 1 auto;
														flex: 0 1 auto;
												}
												/* untereinander darstellen */
												#eingabe.elemLt350 .einabeAuswahl ul li {
														/*
														hier ist zu wenig Text um das untereinander darstellen zu muessen
														display: block;
														*/
												}
												#eingabe.elemLt350 .einabeAuswahl ul li .bezeichnung {
														display: block;
														padding-top: 0;
														padding-bottom: 0;
												}
												#eingabe.elemLt350 .einabeAuswahl ul li .img {
														width: 50%;
												}
												#eingabe.elemLt350 .einabeAuswahl ul li .price {
														padding-left: 0;
														padding-right: 0;
												}
												#eingabe.elemLt350 .einabeAuswahl ul li .info {
														margin-left: 1em;
												}


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

						#group_masseingabe {
								display: -webkit-flex;
								display: flex;
						}
								#group_masseingabe .left {
										-webkit-flex: 0 0 auto;
										flex: 0 0 auto;
										padding-right: 3em;
								}
								#group_masseingabe .right {
										-webkit-flex: 1 1 0;
										flex: 1 1 0;
								}
										#group_masseingabe label, #group_masseingabe .label {
												display: block;
												margin-top: 1.5em;
										}
												#group_masseingabe label > *, #group_masseingabe .label > * {
														vertical-align: middle;
												}
												.mass_bez {
														display: inline-block;
														width: 122px;
												}
												.mass_umrechnung {
														color: #888888;
												}
												.mass_grenze {
														font-size: 80%;
														color: #888888;
														margin-left: 1em;
												}
										#linkMasseingabeMessanleitung {
												margin-bottom: 1em;
										}

										#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;
												text-align: right;
												width: 60px;
										}
										@media (max-width: 700px) {
												.mass_bez {
														width: auto;
												}
										}
										@media (max-width: 600px) {
												.mass_grenze {
														display: block;
												}
										}
										@media (max-width: 450px) {
												.mass_grenze {
														display: block;
												}
										}
						/*
						#abstandLaufhakenVal {
								font-weight: bold;
						}
						*/
				
										
						.spinner_button {
								display: inline-block;
								background-color: #eeeeee;

								/* make elemeent unselektable */
										-webkit-user-select: none;  /* Chrome all / Safari all */
										-moz-user-select: none;     /* Firefox all */
										-ms-user-select: none;      /* IE 10+ */

										/* No support for these yet, use at own risk */
										-o-user-select: none;
										user-select: none;
								/* end unselectable */

								border: 1px solid #eeeeee;
								padding: 6px;
						}
								.spinner_button:active {
										border: 1px inset #eeeeee;
								}
						.touch .spinner_button {
								width: 18px;
								height: 18px;
								text-align: center;
						}


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

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

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

						.groupOptionen {
								display: none;
								margin-bottom: 1em;
						}
						.groupZubehoer {
								display: none;
								margin-bottom: 2em;
								width: 225px;
								padding-right: 33px;
								margin-right: 35px;
								border-right: 1px solid #cecece;
								vertical-align: top;
						}
						.groupZubehoer:last-child {		/* beruecksichtigt leider display:none-Elemente so als waeren sie display:irgendwas - z.B. wenn das letzte Elemet diplay:none ist, greift das css:last-child trotzdem auf das letzte (ausgeblendete) Element - fuer unsere Zwecke hier sollte es aber so reichen */
								margin-right: 0;
								border-right: none;
						}
								.groupZubehoerWrapImg {
										margin-top: 10px;
								}
										.groupZubehoerImg {
												float: left;
												width: 169px;
												height: 169px;
												border: 3px solid #cecece;
										}
										.groupZubehoerIcon {
												float: left;
												margin-left: 24px;
												cursor: pointer;
												margin-bottom: 5px;
										}
								.groupZubehoer select {		/* Bedienstab */
										width: 100%;
										margin-top: 10px;
										border: 1px solid #cecece;
										background-color: #ececec;
										color: #000000;
										padding: 4px;
								}
								.groupZubehoer label {		/* Bedienstange */
										display: block;
										margin-top: 10px;
										border: 1px solid #cecece;
										background-color: #ececec;
										color: #000000;
										padding: 4px;
								}
						#masseingabe_soforthinweise {
								display: none;
								margin-top: 1em;
								margin-bottom: 2em;
								padding: 1em;
								border: 1px solid #bb0000;
						}
						.zoomWindow {
								position: fixed;
								/* top: 100px; */
								/*left: 100;*/
								width: 500px;
								height: 500px;
								background-color: #ffffff;
								border: 1px solid #999999;
								display: none;
								overflow: hidden;
								z-index: 10000;
						}

						
						#auswahlProfilfarbe label {
								display: inline-block;
								text-align: center;
								margin-right: 24px;
						}

								#auswahlProfilfarbe label img {
										margin-bottom: 0.3em;
								}
								#auswahlProfilfarbe label input[type=radio] {
										margin-top: 0.3em;
								}

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

		/* rts */
		#leisteNavigationWrap {
				position: static;
		}
		/* HR */
		#layout_header {
				position: static;
		}

		#spalten2 {
				margin-bottom: 0;
		}
		#spalten2 #visualisierung {
				width: 100%;
				position: static;
				box-sizing: border-box;
		}
		#modellbild_steuerung {
				position: static;
				width: 100%;
				box-sizing: border-box;
				height: auto;
				margin-bottom: 1em;
		}
		#spalten2 #eingabe {
				margin-left: 0;
				padding-left: 0;
				padding-right: 0;
		}

		.gruppe_warenkorb {
				position: static;
				width: 100%;
				box-sizing: border-box;
				margin-top: 2em;
		}
}

@media (max-width: 1200px) {
		.einabeAuswahl ul li{
				flex-wrap: wrap;				
		}
		.einabeAuswahl ul li label{
				flex: 1 0 100%;
		}
}

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

		.einabeAuswahl ul li label{
			flex-wrap: wrap;
			justify-content: start;
		}
		
		.einabeAuswahl ul li .img {
			flex: 0 0 100px;
		}
}





#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 input[type="checkbox"] {
						vertical-align: middle;
				}
				.extrafenster .head {
						padding-bottom: 1em;
						border-bottom: 1px solid #cecece;
				}
						.extrafenster .head .left {
								float: left;
						}
						.extrafenster .head .right {
								float: right;
						}
								.extrafensterClose {
										cursor: pointer;
								}
						.extrafenster h2 {
								font-size: 14px;
								padding: 0;
								margin: 0;
						}
						.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;
												}

						.extrafenster .schliessen {
								vertical-align: middle;
						}

/* Extra-Fenster */








#liste_designs {
	
}
		.list_design {
				display: inline-block;
				width: 152px;
				margin-right: 2em;
				margin-bottom: 3em;
		}
				.list_design_groupWahl {
						cursor: pointer;
				}
						.list_design_ueberschrift {
							
						}
						.list_design_bild {
								border: 1px solid #bcbcbc;
								margin-top: 0.5em;
								position: relative;
						}
								.list_design_bild_img {
										display: block;
										width: 150px;
								}
								.list_design_bild_haken {
										position: absolute;
										top: 50%;
										left: 50%;
										margin-top: -17px;
										margin-left: -17px;
								}

				.list_design_stoffprobe {
						border: 1px solid #bcbcbc;
						margin-top: 1px;
						padding: 0.5em;

						display: block;
						color: #444444;
						text-decoration: none;
				}

#bild_messen {
		margin-top: 2em;
		text-align: center;
}
		#bild_messen img {
				max-width: 100%;
		}
#canvas {
		height: 180px;
}


/* Extra-Befestigungsfenster */
.infoHead {
		padding-top: 1em;
		padding-left: 1em;
		padding-right: 1em;
		font-size: 120%;
}
.infoCellBottom {
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 1em;
}








#fensterWarenkorb {

}
#fensterWarenkorb #fensterWarenkorb_top {
		/* padding: 40px; */
		padding: 8%;
}
		#fensterWarenkorb #fensterWarenkorb_top_left {
				float: left;
				width: 34%;
				position: relative;
		}
				#fensterWarenkorb #warenkorb_box_produktbild {
						/* width: 161px; */	/* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
						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;
						}
}







/* z.B. Schienenprofil+ */
.msgboxhtml {
		font-size: 10px;
		line-height: 1.5em;
}
		.window_wk_ueberschrift_main {
				text-align: center;
				background-color: #5f5f5f;
				color: #ffffff;
				padding: 1em;
		}
		.window_wk_ueberschrift_main_1 {
				font-weight: bold;
				font-size: 13px;
		}
		.window_wk_ueberschrift_main_2 {
				font-size: 11px;
		}
		.window_wk_ueberschrift_erklaerung {
				 text-align: center;
				 padding: 1em;
		}
		.window_wk_ueberschrift_pfeil {
				 text-align: center;
		}
		.window_wk_zwischenzeile {
				height: 10px;
		}
		.window_wk_zwischenspalte {
				width: 10px;
				min-width: 10px;		/* greift beim td irgendwie nicht so richtig - Das Konzept habe ich in diesem Fall leider noch nciht so richtig verstanden */
		}

		.window_wk_table_auswahl {
				border-spacing: 0;
		}
				.window_wk_table_auswahl td {
						cursor: pointer;
						padding: 0;
				}
				.window_wk_ue_box {
						padding-top: 1em;
				}
						.window_wk_ue {
								font-weight: bold;
								font-size: 13px;
						}
				.window_wk_radiobox {
						border: 1px solid #d7d7d7;
				}
		.msgboxhtml_buttons {
				margin-top: 0.5em;
				text-align: right;
		}
				.msgboxhtml_buttons > div {
						display: inline-block;
						text-decoration: underline;
						cursor: pointer;
						padding-top: 0.5em;
						padding-bottom: 0.5em;
						padding-left: 1em;
						padding-right: 1em;
				}

						.msgboxhtmlButtonsHighlight {
								background-color: #444444;
								color: #ffffff;
								margin-left: 0.5em;
						}

						
						
						
						
/* Slider Anfang */

.sliderinput {
		width: 30px;
		text-align: right;
}



.slider_b {
		display: inline-block;
		width: 150px;
		background-color: #ffffff;
		border: 1px solid #d8d8d8;
		height: 6px;
		position: relative;
}
.handle_b {
		display: block;
		width: 4px;
		height: 12px;
		background-color: #444444;
		cursor: e-resize;
		position: absolute;
		top: -3px;
}
.innerbar_b {
		display: block;
		width: 0px;
		height: 4px;
		background-color: #d8d8d8;
		position: absolute;
		top: 1px;
		left: 1px;
		cursor: default;
}
.slider_h {
		display: block;
		width:4px;
		background-color:#cccccc;
		height:100px;
		position: relative;
}
.handle_h {
		display: block;
		width:20px;
		height:10px;
		background-color:#ffffff;
		border: 1px solid #999999;
		cursor:s-resize; position:
		absolute; left: -8px;
}

/* Slider Ende */


.disabled label {
		/* z.B. Schlaufen gehen nicht bei jeder Bedienung */
		cursor: not-allowed;
		color: #999999;
}