/* fuer Touch-Geraete einfach die Klasse .touch davor schreiben (Erkennuzng und Setzung der Klasse in Javascript) */

input[type="text"], input[type="number"] {
		border: 1px solid #eeeded;
		color: #333333;
		font-size: 10px;
		text-align: right;
		width: 34px;
		padding: 0.5em;
		margin: 1px;
}

select {
		font-size: 10px;
		border-width: 1px;
}

[onclick], input[type="radio"], input[type="checkbox"], label {
		cursor: pointer;
}

/*
input[type="radio"][onclick] {
		cursor: default;
}
*/
input[type="checkbox"] {
		vertical-align: top;
}

/* Radio Buttons*/

		label {
				cursor: pointer;
		}
		label select, label input[type="text"], label input[type="number"] {
				background-color: #d4d0c8;
				color: #808080;
		}
		  input[type="radio"]:checked + label, label input[type="radio"]:checked ~ *
		, input[type="checkbox"]:checked + label, label input[type="checkbox"]:checked ~ *
		{
				color: #444444;
		}


				  input[type="radio"]:checked + label select, label input[type="radio"]:checked ~ * select
				, input[type="radio"]:checked + label input[type="text"], label input[type="radio"]:checked ~ * input[type="text"]
				, input[type="radio"]:checked + label input[type="number"], label input[type="radio"]:checked ~ * input[type="number"]
				{
						background-color: #ffffff;
						color: #000000;
				}

/* die Werte hier nochmal ueberschreiben, weil sie hier nicht ganz passen - Radiobuttons ueber dem Label */
		#display_farbe input[type="radio"] + label:before {
				margin-right: 0px;
				margin-left: 9px;
		}


/* Checkboxen bei der Stoffauswahl */

		#stoffwahl_einschraenkung input[type="checkbox"] {
				display: none;
		}
		#stoffwahl_einschraenkung input[type="checkbox"] + label:before {
				content: url(checkbox_off.png);
				padding-right: 6px;
		}
		#stoffwahl_einschraenkung input[type="checkbox"]:checked + label:before {
				content: url(checkbox_on.png);
		}
		#stoffwahl_einschraenkung input[type="checkbox"] + label {
				color: #999999;
				margin-right: 15px;
				line-height: 18px;
				cursor: pointer;
		}
		#stoffwahl_einschraenkung input[type="checkbox"]:checked + label {
				color: #444444;
		}

#konfigurator {
		font-weight: 300;
		font-size: 13px;
}

		#konfigurator h1 {
				font-size: 18px;
				font-weight: 300;
		}
		#konfigurator h2 {
				font-size: 16px;
				font-weight: 600;
		}
		#konfigurator h3 {
				font-size: 13px;
				font-weight: 400;
				margin-top: 0;
				margin-bottom: 1em;
				position: relative; /* fuer evtl. absolut positioniertes Icon in der Ueberschrift */
		}
				#konfigurator h3 .info {
						position: absolute;
						right: 0;
						top: 0;
				}

		.gruppeUeberschrift {
			
		}
				.gruppeUeberschrift img.icon {
						vertical-align: middle;
						margin-right: 0.5em;
						width: 23px;
						height: 23px;
				}

hr {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		border-top: 1px solid #444444;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
}















.modelle {
		display: flex;
		justify-content: space-between;
		margin-top: 1em;
		border: 0;
		margin-bottom: 1em;
}

		.modelle > * {
				flex: 0 1 120px;
				font-size: 13px;
				font-weight: 300;
				word-wrap: break-word;
				color:#000000;
				text-align: center;
				vertical-align: top;
				padding-top: 16px;
				padding-bottom: 16px;
				padding-left: 3px;		/* wird bei Mouse-Over mit dem border ersetzt */
				padding-right: 3px;
		}
		.modelle > *:hover {
				background-color: #f5faff;
		}
		.modelle > *.checked {
				padding-top: 13px;		/* "normaler" gewollter Wert, abzueglich border-Dicke */
				padding-bottom: 13px;
				padding-left: 0;
				padding-right: 0;
				border: 3px solid #357dbc;
				background-color: #f5faff;
		}
				.modelle > * input {
						display: none;
				}
				.modelle_bez {
						margin-top: 0.5em;
						display: block;
				}
.video img, .info {
		width: 18px;
		vertical-align: top;
		cursor: pointer;
}
.video {
		display: inline-block;
}
		.video img {
			
		}

#ajax_lade {
		display: none;
		position: fixed;
		top: 10px;
		right: 10px;
}

table {
		border-spacing: 0;
}

		table td {
				padding: 0;
		}

#konfigurator {
		color: #444444;
}
#konfigurator_alles {
		max-width: 900px;
		min-width: 658px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3em;
		margin-bottom: 5em;
		padding-left: 50px;
		padding-right: 50px;
		border-left: 1px solid #dcdcdc;
		border-right: 1px solid #dcdcdc;
}

#display_konfiguration_standard {
		text-align: center;
		margin-bottom: 1em;
}

#display_anlage {
		position: relative;
}

		.link_button {
				margin-top: 1.5em;
				margin-bottom: 1.5em;
				background-image: url(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;


		}
		
		.eingabe_gesamtgroesse .bezeichnung {
				display: inline-block;
				width: 110px;
		}

		#display_konfiguration_paneeleinstellungen {
				margin-bottom: 0.5em;
		}

		#display_ueberlappung {
				margin-top: 1em;
		}
		#display_anordnung {
				margin-top: 1em;
		}

				.hinweisUeberlappung {
						display: none;
						background-color: #ff0000;
						color: #ffffff;
						font-weight: bold;
						cursor: help;
						padding-left: 4px;
						padding-right: 4px;
						padding-top: 2px;
						padding-bottom: 2px;
						margin-left: 0.5em;
				}




.zsf {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
}
		/*
		.zsf > * {
				flex: 0 0 30%;
				flex: 0 1 auto;
		}
		*/
		.zsf_left {
				flex: 0 1 26%;
		}
		.zsf_middle {
				flex: 0 1 38%;
		}
				.notizen {
						border: 1px solid #d8d8d8;
						font-size: 12px;
						width: 100%; box-sizing: border-box;
						height: 115px;
						padding: 1em;
				}
		.zsf_right {
				flex: 0 1 26%;
				text-align: right;
				position: relative;
		}
				.fragen {
						text-align: right;
						font-weight: 400;
						margin-top: 1em;
						margin-bottom: 1em;
				}
				#zsf_menge {
						position: absolute;
						left: 0;
						top: 0;
						text-align: center;
						font-size: 12px;
				}
						#zsf_menge input {
								text-align: center;
								padding: 1em;
								font-size: 11px;
								width: 20px;
						}

				#zsf_preis {
						margin-top: 1em;
				}
						#zsf_preis table {
								width: 100%;
						}
								#zsf_preis table td {
										padding-top: 6px;
										padding-bottom: 6px;
								}
				#gesamtpreis {
						font-size: 30px;
						font-weight: 400;
				}
				#endstueckpreis_mwst {
						font-size: 11px;
				}
				#versandkosten {
						font-size: 11px;
						margin-top: 0.5em;
						margin-bottom: 0.5em;
				}
						#versandkosten a {
								color: #444444;
						}


.warenkorb_btn 	{
		background-color: #de8903;
		color: #ffffff;
		border: 1px solid #de8903;
		width: 100%;
		margin-top: 1em;
		font-size: 18px;
		font-weight: 400;
}

/* Die Hauptstoffauswahl */
.fancyboxfenster {
		background-color: #ffffff; /* IE7 */
}

#fenster_stoffauswahl {
		max-width: 980px;
		color: #333333;
		overflow: hidden;				/* IE8 und aelter */
		position: relative;
}
#stoffauswahl_table {
		width: 100%;
}
#stoffwahl_einschraenkung {
		width: 350px;
		vertical-align: top;
}
		#stoffwahl_einschraenkung table {
				border-spacing: 0;
				width: 100%;
		}
				#stoffwahl_einschraenkung table td {
						padding: 0;
						vertical-align: top;
				}

#stoffwahl_trenner {
		background-image: url(stoffauswahl_verlauf.png);
		background-repeat: repeat-y;
		width: 14px;
		border-right: 1px solid #ffffff;
}

#stoffwahl_auswahldetails {
		text-align: center;
		vertical-align: top;
}
		#stoffwahl_auswahldetails_ueberschrift {
				background-color: #eeeeee;
				padding: 10px;
				font-weight: bold;
				text-align: center;
				font-size: 12px;
		}

.stoffeZurAuswahl {
		margin-left: 10px;
		margin-right: auto;
		text-align: left;
		background-color: #eeeeee;
		padding-top: 2px;
		padding-bottom: 2px;
		padding-left: 5px;
		padding-right: 5px;
}

#liste_stoffe_container {
		margin-left: 0;
		margin-right: auto;
		width: 136px;
		overflow: hidden;
		/* height: 600px; das war ausgelegt, auf eine Bildhoehe der kleinen Bilder von 80px. die neuen Stoffe jetzt haben eine Bildhoehe von 90px */
		min-height: 616px;		/* Weil zum Zeitpunkt des Oeffnen des Fenster die Bild-Elemente noch nicht geladen sind, diese aber die Hoehe des aufgehenden Fensters mit bestimmen, setze ich hier eine Mindesthoehe (fuer Bilder 90px, statt 80px). So erscheint im Fenster kein Scrollbalken, wenn die Bilder geladen wurden */
		max-height: 650px;
}

#liste_stoffe {
		width: 10000px;
}

		.acht_box {		/* eigentlich 8er_box - aber CSS-Klassennamen duerfen nicht mit einer Ziffer beginnen (und firefox interpretiert diese auch nicht) */
				width: 136px;
				float: left;
		}

		#liste_stoffe > table {

		}

				#liste_stoffe > table td {
						vertical-align: top;
				}
						.liste_stoffe_box {
								display: inline-block;
								text-align: center;
								width: 62px;
								background-image: url('slide-background.png');
								background-repeat: repeat-x;
								margin: 3px;
						}
								.liste_stoffe_preis {
										background-color: #eeeded;
										color: #444444;
										font-size: 9px;
										padding-top: 3px;
										padding-bottom: 3px;
								}
								.liste_stoffe_bild {
										width: 62px;
								}
								.liste_stoffe_bezeichnung {
										background-color: #535353;
										color: #e4e3e3;
										font-size: 9px;
										/* height: 25px; */
										padding-top: 4px;
										padding-bottom: 4px;
										width: 62px;
										overflow: hidden;
								}

		.zoom {
			  -moz-transform:scale(1.1,1.1);
			  -webkit-transform:scale(1.1,1.1);
			  -ms-transform: scale(1.1,1.1);
			  -o-transform:scale(1.1,1.1);
			  transform:scale(1.1,1.1);
		}

.keine_stoffe {
		padding: 30px;
		margin-left: 3px;
		margin-right: 3px;
		width: 68px;
		margin-top: 50px;
		font-style: italic;
		line-height: 22px;
}

.dreieck_stoffauswahl_obenlinks {
		display: inline-block;
		border-top: 4px solid transparent;
		border-left: none;
		border-right: 4px solid #333333;
		border-bottom: 4px solid transparent;
		width: 0;
		height: 0;
}

.dreieck_stoffauswahl_obenrechts {
		display: inline-block;
		border-top: 4px solid transparent;
		border-left: 4px solid #333333;
		border-right: none;
		border-bottom: 4px solid transparent;
		width: 0;
		height: 0;
}

.stoffauswahl_oben {
		width: 100%;
		border-spacing: 0;
}

		.stoffauswahl_oben_nr {
				padding: 3px;
				width: 20px;
				background-color: #eeeeee;
				border-top: 1px solid #ffffff;
				border-right: 1px solid #ffffff;
				border-left: 1px solid #d7d7d7;
		}
				.stoffauswahl_oben_nr:first-child {
						border-left: 0;
				}
				.stoffauswahl_oben_nr:last-child {
						border-right: 0;
				}

		.stoffauswahl_oben_nr_highlighted {
				padding: 3px;
				width: 68px;
				background-color: #444444;
				border-top: 1px solid #ffffff;
				border-right: 1px solid #ffffff;
				border-left: 1px solid #d7d7d7;
				color: #ffffff;
				font-weight: bold;
		}

#paneele_stoffauswahl_preis {
		display: none;
		font-weight: bold;
		font-size: 18px;
}

#stoffauswahl_paneele_details {
		padding-top: 1em;	/* Mindest-Abstand */
}

.button_fertig {
		background-image: url('button_fertig.png');
		width: 119px;
		height: 28px;
		padding-left: 0;
		padding-right: 20px;
		padding-top: 0;
		padding-bottom: 3px;
		border: 0;
		color: #ffffff;
		font-weight: bold;
		font-size: 12px;
}

.group_zeichnung {
		display: flex;
}
		.group_zeichnung_eingabe {
				display: flex;
				flex: 1;		/* eigentlich "1 0 0", aber fuer IE11 die verkuerzte Angabe, sonst geht es da nicht */
		}
		.group_zeichnung_eingabe.wenigPlatz {
				flex-wrap: wrap;
				padding-bottom: 2em;
		}
		.group_zeichnung_eingabe.vielPlatz {
				flex-wrap: nowrap;
				margin-left: -2em;
				margin-right: -2em;
		}
				.group_zeichnung > .group_zeichnung_eingabe > * {
						margin-top: 1em;
				}
				.group_zeichnung_eingabe.wenigPlatz > * {
						flex: 1 0 auto;
						margin-top: 2em;
				}
				.group_zeichnung_eingabe.wenigPlatz > *:first-child {
						margin-top: 0;
				}
				.group_zeichnung_eingabe.vielPlatz > * {
						flex: 1 0 auto;
						margin-left: 2em;
						margin-right: 2em;
						margin-top: 0;
				}
	

				.group_zeichnung > .group_zeichnung_canvas {
						flex: 3;		/* eigentlich "3 0 0", aber fuer IE11 die verkuerzte Angabe, sonst geht es da nicht */
						padding-left: 2em;
				}
		#hinweis_zeichnung {
				font-size: 11px;
				font-weight: 300;
				color: #888888;
				margin-top: 1em;
				margin-bottom: 1em;
				width: 55%;
				min-width: 200px;
				margin-left: auto;
				margin-right: 0;
				text-align: right;
		}

.auswahlmoeglichkeit > * {
		border-bottom: 1px solid #eeeded;
		padding-bottom: 5px;
		margin-bottom: 5px;
		display: flex;
		align-items: flex-start;

}

		.auswahlmoeglichkeit > * label {
				display: flex;
				align-items: flex-start;
				flex: 1 0 0;
		}
				.auswahlmoeglichkeit > * input[type="radio"], .auswahlmoeglichkeit > * input[type="checkbox"] {
						margin-right: 1em;
				}
				.auswahlmoeglichkeit > * label .labelWithoutInput {

				}
		.auswahlmoeglichkeit > * .video, .auswahlmoeglichkeit > * .info {
				margin-left: 1em;
		}
.auswahlmoeglichkeit > *:last-child {
		border-bottom: none;
}



#group_paneele {
		display: flex;
		margin-top: 1em;
}
		#group_paneele > * {
		}
		#group_paneele > #group_paneele_eingabe {
				flex: 1 0 0;
				padding-right: 1em;
		}
		#group_paneele > #group_paneele_liste {
				flex: 3 0 0;
				border-left: 1px solid #444444;
				padding-left: 1em;
		}

#display_schienenlaengeIstGesamtbreite {
		margin-bottom: 1em;
}

.input_left {
		display: inline-block;
		width: 110px;
		vertical-align: middle;
}
.input_right_block {
		display: inline-block;
		vertical-align: top;
}
.paneele_details {

}

		.paneele_details table {
				width: 100%;
		}

				.paneele_details table th {
						color: #999999;
						text-align: left;
				}

				.paneele_details table td {
						text-align: left;
						vertical-align: middle;
						height: 22px;
						border-bottom: 1px solid #eeeeee;
				}

		.paneele_details .paneele_tbl_box, .paneele_details .paneele_tbl_box_highlighted, .paneele_details .paneele_tbl_box_hover {
				text-align: center;
				color: #999999;
				vertical-align: top;
		}

				.paneele_details .paneele_tbl_box_ready {
						color: #000000;
				}

/*		das wird durch .paneele_tbl_box_hover ersetzt, weil ich das Ganze auch von einer anderen stelle mit JAvascript aufrufe
				.paneele_details .paneele_tbl_box:hover td, .paneele_details .paneele_tbl_box_highlighted:hover td {
						background-color: #eeeeee;
				}

						.paneele_details .paneele_tbl_box:hover td:first-child, .paneele_details .paneele_tbl_box_highlighted:hover td:first-child {
								background-color: transparent;
						}
*/
				.paneele_details .paneele_tbl_box:first-child , .paneele_details .paneele_tbl_box_highlighted:first-child, .paneele_details .paneele_tbl_box_hover:first-child {
						border-left: 0;
				}

				.paneele_details .paneele_tbl_box {
						background-color: transparent;
				}
				.paneele_details .paneele_tbl_box_highlighted {
						text-shadow: 0px 0px 1px #bbbbbb;		/* weil es kein anti-aliasing gibt, mit dieser Angabe etwas lebhafter machen */
						color: #333333;
				}
				.paneele_details .paneele_tbl_box_hover,
				.paneele_details .paneele_tbl_box_hover .paneele_tbl_breite input, .paneele_details .paneele_tbl_box_hover .paneele_tbl_hoehe input {
						background-color: #eeeeee;
				}

				.paneele_details .paneele_tbl_nr {
						width: 15px;
				}
				
				.paneele_details .paneele_tbl_status {
						width: 50px;
						padding-right: 20px;
						text-align: center;
				}
						.paneele_details .paneele_tbl_status img {		/* Haken */
								vertical-align: middle;
						}

				.paneele_details .paneele_tbl_bezeichnung {
						/* width: 170px; ist auf fuer Tablets zu viel */
				}

						.paneele_details .paneele_tbl_bezeichnung img {
								width: 10px;
								vertical-align: bottom;
								margin-right: 5px;
						}

				.paneele_details .paneele_tbl_breite:after, .paneele_details .paneele_tbl_hoehe:after {
						content: 'mm';
				}

				.paneele_details .paneele_tbl_breite input, .paneele_details .paneele_tbl_hoehe input {			/* Masseingabe in der Tabelle in der Stoffauswahl */
						border: 0;
						width: 28px;
						color: #999999;
						text-align: left;
						padding: 0;
				}
						.paneele_details .paneele_tbl_box_highlighted .paneele_tbl_breite input, .paneele_details .paneele_tbl_box_highlighted .paneele_tbl_hoehe input {
								color: #333333;
						}

						 .paneele_details .paneele_tbl_box_ready input {
								color: #000000;
						 }

				#display_paneele.paneele_details .paneele_tbl_breite input, #display_paneele.paneele_details .paneele_tbl_hoehe input {		/* im Konfigurator - nicht im Extra-Fenster */
						cursor: pointer;
				}
				#display_paneele.paneele_details .paneele_tbl_aendern {
						text-align: center;
				}

				#stoffauswahl_paneelpreis {
						margin-top: 1em;
						color: #999999;
						margin-left: auto;
						margin-right: 0;
						font-size: 8pt;
						text-align: right;
				}
						#stoffauswahl_paneelpreis_preis {
								font-weight: bold;
								font-size: 9pt;
						}

				#stoffauswahl_gesamtpreis {
						color: #999999;
						margin-left: auto;
						margin-right: 0;
						font-size: 8pt;
						text-align: right;
				}
						#stoffauswahl_gesamtpreis_preis {
						}

				#stoffauswahl_fertig_unten {
						margin-top: 1em;
				}


.wagen_details {

}

		.wagen_details table {
				width: 100%;
				table-layout: fixed;
		}

				.wagen_details table th {
						color: #999999;
						text-align: center;
						cursor: default;
				}

				.wagen_details table td {
						text-align: center;
						vertical-align: middle;
						height: 22px;
						border-bottom: 1px solid #eeeeee;
				}

		.wagen_details .paneele_tbl_box, .wagen_details .paneele_tbl_box_highlighted, .wagen_details .paneele_tbl_box_hover {
				text-align: center;
				color: #999999;
				vertical-align: top;
		}

				.wagen_details .paneele_tbl_box:first-child , .wagen_details .paneele_tbl_box_highlighted:first-child, .wagen_details .paneele_tbl_box_hover:first-child {
						border-left: 0;
				}

				.wagen_details .paneele_tbl_box {
						background-color: transparent;
				}

				.wagen_details .paneele_tbl_nr {

				}

				.wagen_details .paneele_tbl_breite:after {
						content: ' mm';
				}

				.wagen_details .paneele_tbl_breite input {
						width: 28px;
						color: #999999;
				}

#slide-left, #slide-right {
		display: inline-block;
}

#slide-left-arrow {
		display: inline-block;
		border-right: 5px solid #3b3b3b;
		border-top: 5px solid transparent;
		border-left: none;
		border-bottom: 5px solid transparent;
		width: 0;
		height: 0;
}
#slide-right-arrow {
		display: inline-block;
		border-right: none;
		border-top: 5px solid transparent;
		border-left: 5px solid #3b3b3b;
		border-bottom: 5px solid transparent;
		width: 0;
		height: 0;
}

.liste_stoffe_paging {
		text-align: right;
		margin-right: 1em;
}

		#liste_stoffe_page_first, #liste_stoffe_page_last {
				display: inline-block;
				border: 1px solid #3b3b3b;
				padding: 2px;
		}
		#liste_stoffe_page_current {
				display: inline-block;
				color: #ffffff;
				background-color: #3b3b3b;
				padding: 2px;
		}

.boxcontainer {

		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: auto;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #eeeeee;
		width: 158px;

}

		.boxcontainer:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
		}

		.stoffwahl_ueberschrift {
				font-weight: bold;
				font-size: 12px;
				margin-bottom: 16px;
		}

		.boxkopf {
				font-weight: bold;
				margin-bottom: 6px;
		}

		.boxzelle {

		}

/* Ende Stoffauswahl Classic */



#stoffwahl_bestaetigung {
		text-align: right;
		vertical-align: bottom;
		padding-left: 27px;
		padding-right: 27px;
}

.sprechblase_wrap {
		/* dieses div-Element wird benoetig um die Sprechblase beim Eingabefeld zu halten */
		display: inline-block;
		position: relative;
}

		.sprechblase {

				display: none;

				padding: 1em;

				border: 2px solid #6c6869;
				position: absolute;
				text-align: left;
				font-size: 10px;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
				background: #ffffff;
				color: #000000;
				top: 0;
				left: 18px;

				background-image: -webkit-linear-gradient(135deg, #f4be4d 0%, #ffffff 50%);
				background-image: -moz-linear-gradient(135deg, #f4be4d 0%, #ffffff 50%);
				background-image: -o-linear-gradient(135deg, #f4be4d 0%, #ffffff 50%);
				background-image: linear-gradient(135deg, #f4be4d 0%, #ffffff 50%);
		}
				.sprechblase:before {
						content: ' ';
						position: absolute;
						width: 0;
						height: 0;
						left: 10px;
						bottom: -16px;
						border: 8px solid;
						border-color: #6c6869 transparent transparent #6c6869;
				}
				.sprechblase:after {
						content: ' ';
						position: absolute;
						width: 0;
						height: 0;
						left: 12px;
						bottom: -12px;
						border: 6px solid;
						border-color: #fae2b0 transparent transparent #fae2b0;
				}

.btn_animation {
		white-space: nowrap;
}
		.btn_animation > * {
				vertical-align: middle;
		}
		.btn_animation > img {
				margin-right: 0.2em;
		}


.btn_waehlen {
		border: 1px solid #357dbc;
		background-color: #ffffff;
		color: #357dbc;
		display: inline-block;
		padding-left: 2em;
		padding-right: 2em;
		text-align: center;
		
}

#konfiguration_schiebe_vorhang_1 {
		text-align: right;
}

#slideToAnimateSlideOuter {

		border-radius: 10px;
		border: 1px solid #bababa;
		width: 158px;
		margin: auto;
		height: 34px;
		text-align: center;
		position: absolute;
		left: 50%;
		margin-left: -78px;
		top: 40px;
		overflow: hidden;
		display: none;		/* soll nur auf Geraeten mit Touch-Bedienung sichtbar sein */
}

.touch #slideToAnimateSlideOuter {
		display: block;
}
		#slideToAnimateSlideInner {
				line-height: 34px;
				margin-left: 40px;
				text-align: center;

		}

				#slideToAnimateSlider {
						display: inline-block;
						cursor: pointer;
						padding: 2px;
						position: absolute;
						left: 0;
						top: 0;
						height: 30px;
						vertical-align: middle;
				}

#display_konfiguration_canvas_vorhang {
		margin-top: 1em;
		position: relative;
}

		#canvas_vorhang {
				width: 656px;
				margin-left: auto;
				margin-right: auto;
		}

		.wahl_ambiente {
				color: #aaaaaa;
				padding-top: 4px;
				padding-bottom: 4px;
		}
				.wahl_ambiente span {
						font-size: 13px;
						font-weight: 400;
				}
				.wahl_ambiente label {
						display: inline-block;
						margin-right: 0.3em;
						font-size: 13px;
						font-weight: 300;
				}
						.wahl_ambiente label input[type="radio"] {
								vertical-align: top;
						}

#display_konfiguration_canvas_schiene {
		margin-top: 2em;
		margin-bottom: 2em;
}

.list_optionen {
		display: flex;
		flex-wrap: wrap;
		margin-top: 2em;
		margin-left: -3em;
		margin-right: -3em;
}
		.list_optionen > * {
				margin-left: 3em;
				margin-right: 3em;
				margin-bottom: 3em;
				flex: 1 1 auto;
				max-width: 400px;
		}

#hinweis_befestigung {
		max-width: 326px;
		font-size: 9px;
}

.fenster_formation_schnellwahl {
		text-align: center;
}
		.fenster_formation_schnellwahl a {
				color: #000000;
				margin-left: 1em;
				margin-right: 1em;
		}

.box_formation {
		cursor: pointer;
		border: 3px solid #eeeeee;
		margin: 1em;
		padding: 1em;
}

		.box_formation:hover {
				border: 3px outset #999999;
		}

		.box_formation table {		/* boxformation ist per Javascript generiert */
				width: 100%;
		}
				.box_formation  > * {
						text-align: center;
				}

		.box_formation h2 {
				padding-top: 0;
				margin-top: 0;
		}
		.box_formation h2 {
				text-align: left;
		}

		.box_formation img {
				margin: 1em;
		}


#display_anzLaeufe {
		margin-bottom: 1em;
}

#konfiguration_schienepaneelwagen {
		position: relative;
}
		#hinweis_schiene {
				margin-top: 2em;
				font-size: 10px;
		}

/* Detailseite (fuers Design) */

.detail {
		margin-left: 27px;
		margin-right: 27px;
		margin-top: 2em;
}

		.detail > table {
				width: 100%;
		}

		.detail h1 {		/* im Detailbild */
				font-size: 10px;
				text-align: left;
				color: #ffffff;
				margin: 0;
				padding: 4px;
		}
		.detail h2 {
				font-size: 16px;
				text-align: center;
		}


		/* Das grosse Stoffbild */

				.design_big_bildbox {
						width: 200px;
						height: 300px;
						border: 1px solid #eeeeee;
						background-image: url('design_schraffur.jpg');
						position: relative;
				}

				.des_detail_pic_nopic_text {
						margin-top: 98px;
						text-align: center;
						font-weight: bold;
						font-size: 14px;
				}

				.des_detail_pic_nopic_box {
						margin-top: 21px;
						padding-top: 10px;
						padding-bottom: 10px;
						border-top: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						background-color: #d9d9d9;
						font-size: 13px;
						color: #ffffff;
						position: relative;
						text-align: left;
				}

				.des_detail_pic_nopic_boxextension {
						padding-top: 10px;
						padding-bottom: 10px;
						position: absolute;
						top: -1px;
						left: -5px;
						width: 5px;
						border-top: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						background-color: #d9d9d9;
				}

				.des_detail_pic_nopic_arrow {
						border-right: 23px solid #d9d9d9;
						border-top: 25px solid transparent;
						border-left: none;
						border-bottom: 25px solid transparent;
						width: 0;
						height: 0;
						position: absolute;
						top: -7px;
						left: -26px;
				}

				.big_bild {
						width: 200px;
						height: 300px;
						display: block;
				}

						.design_big_nav_left, .design_big_nav_right {
								position: absolute;
								top: 50%;
								margin-top: -20px;
								cursor: pointer;
								width: 20px;
								height: 40px;
						}
						.design_big_nav_left {
								left: 0;
						}
						.design_big_nav_right {
								right: 0;
						}
				
						.design_big_preview {
								margin-top: 7px;
								text-align: left;
						}
								.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 */
								}
										.design_big_preview > img.active {
												border: 1px solid #454545;
										}

		.detail_ueberschrift {		/* in der Stoffauswahl */
				text-align: center;
				width: 202px;		/* Bildbreite + Borderbreite */
				background-color: #eeeeee;
				color: #444444;
				font-weight: bold;
				font-size: 12px;
				padding-top: 3px;
				padding-bottom: 3px;
		}
		
		#nicht_auf_lager {
				display: none;
				color: #ff0000;
				margin-top: 1em;
				margin-bottom: 1em;
		}
		
		.det_left {
				vertical-align: top;
				padding-right: 14px;
		}

		.det_right {
				text-align: left;
				vertical-align: top;
		}
		.det_key {
				/* font-weight: bold; */
		}
				#det_right_bottom {
						margin-top: 1em;
						visibility: hidden;
				}
						#det_right_bottom button {
								background-color: #f5f5f5;
								border-width: 1px;
								color: #333333;
								padding: 15px 25px;
								width: 100%;
						}
								#det_right_bottom button img {
										vertical-align: baseline;
										margin-right: 0.3em;
								}

				.det_right_text {
						height: 171px;
						overflow: auto;
						padding-right: 0.5em;
				}


		.det_stoffprobe {
				display: none;
				text-align: center;
				text-decoration: none;
				border: 1px outset #999999;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 7px;
				background-color: #444444;
				width: 150px;
				background-image: url('pfeil_rechts_weiss_8_14.png');
				background-repeat: no-repeat;
				background-position: 7px center;
				font-size: 10px;
				margin-top: 1px;
		}
				.det_stoffprobe:link, .det_stoffprobe:visited, .det_stoffprobe:active, .det_stoffprobe:hover {
						color: #ffffff;
				}
				.det_stoffprobe:active {
						border: 1px inset #999999;
				}


.farbkasten {
		display: inline-block;
		width: 13px;
		height: 13px;
		border: 1px solid #000000;
}



@keyframes drehen {
    from { transform: rotate(0deg);  }
    to { transform: rotate(360deg);  }
}
img[src$="info.svg"] {
	transform: rotate(0deg);
    animation-name: drehen;
    animation-duration: 2s;
	animation-delay: 300s;
	animation-iteration-count: 1;
}