/*
		18.11.2021 - David S. - preis_alt eingebaut
*/

#konfiguratorGesamt {
	background-color: #ffffff;
}

label {
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
label input[type=radio] {
	cursor: pointer;
}



input[type="text"], input[type="number"] {
	font-size: 16px;		/* iOs Safari zoom in das Feld beim Betreten hinein, wenn die Schriftgroesse kleiner als 15px ist und zoomz beim Verlassen NICHT wieder hinaus */
}


input[type=number] {
	-moz-appearance: textfield;		/* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus */
}
input[type=radio] {
	vertical-align: middle;
	margin-top: 0;
	margin-bottom: 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;
}

.switch {
	width: 48px;
}
.boxSlider {
	width: 90%;
	display: flex;
}
	.boxSlider .min {
			flex: 0 0 auto;
	}
	.boxSlider input {
			flex: 1 1 auto;
	}
	.boxSlider .max {
			flex: 0 0 auto;
	}

.btnPfeil {
	background-image: url(bilder/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;
	cursor: pointer;
}

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









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

	.stoff_bild img {
			display: inline-block;
			max-width: 100%;
	}

	.stoff_ueberschrift {
			color: #444444;
			margin-bottom: 1em;
			text-align: left;
	}
	.stoff_group {
			display: flex;
	}
	.stoff.elemLt600 .stoff_group {
			display: block;
	}
			.stoff_bild {
					text-align: left;
					flex: 0 0 300px;
					overflow: hidden;
			}
			.stoff.elemLt600 .stoff_bild {
					text-align: center;
			}
			.stoff_space {
					flex: 0 1 45px;
			}
			.stoff.elemLt600 .stoff_space {
					flex: 0 1 2em;
			}
			.stoff_box {
					text-align: left;
					flex: 1 1 370px;
					overflow: auto;
					padding-right: 1em;		/* Abstand zu eventuellem Scrollbalken */
			}
			.stoff.elemLt600 .stoff_box {
					max-width: 370px;
					margin-left: auto;
					margin-right: auto;
					margin-top: 1em;
			}
			@media (max-width: 800px) {		/* Layout einspaltig */
					.stoff_box {
							max-height: 400px
					}
			}
					.stoff_box_ueberschrift {
							margin-top: 2em;
							margin-bottom: 2em;
					}
							.stoff_box_ueberschrift:first-child {
									margin-top: 0;
							}
							.stoff_box_ueberschrift img {
									vertical-align: middle;
									margin-right: 1em;
							}

					.stoff_box_eigenschaften {

					}
					.stoff_box_eigenschaften, .stoff_box_eigenschaften a {
							color: #444444;
					}
							.stoff_box_eigenschaften ul {
									list-style: none;
									margin: 0;
									padding: 0;
							}
									.stoff_box_eigenschaften ul li:before {
											content: "\002D \0020";
									}
									.stoff_box_eigenschaften ul li {
											margin-bottom: 2px;
									}

					.stoff_box_highlights {

					}
							.stoff_box_highlights > * {
									display: inline-block;
									margin-left: 2em;
									margin-right: 0;
									vertical-align: top;
							}
									.stoff_box_highlights > * > * {
											text-align: center;
											font-size: 65%;
											width: 40px;
											max-width: 100%;

											hyphens: auto;			/* aktuell (08.10.2020 nur firefox) */
											overflow: hidden;		/* fuer die Browser, die hyphens nicht unterstuetzen (Chrome / Edge) */
									}
											.stoff_box_highlights img {
													width: 100%;
											}

					.stoff_box_stoffprobe {
							font-weight: bold;
							text-decoration: underline;
					}
							.stoff_box_stoffprobe span {
									text-decoration: none;
							}
					.stoff_box_beschr {
							max-height: 600px;
							overflow: auto;
							line-height: 1.6em;
					}











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

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


	#modellbild_steuerung {
			color: #888888;
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			left: 0;

			display: flex;
			flex-direction: column;
			align-items: flex-start;

			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none;   /* Chrome/Safari/Opera */
			-khtml-user-select: none;    /* Konqueror */
			-moz-user-select: none;      /* Firefox */
			-ms-user-select: none;       /* IE/Edge */
			user-select: none;           /* non-prefixed version, currently not supported by any browser */

			pointer-events: none;		/* im transparenten Bereich dieser Box ist die darunter liegende 3D-Zeichnung nicht mehr steuernbach */

	}
			#modellbild_steuerung > * {
					display: block;		/* das das ausdruecklich auch fuer das label-Element gilt */
					background-color: #f1f1f1;
					padding: 8px;
					border-top: 1px solid #ffffff;
					border-right: 1px solid #ffffff;
					border-bottom: 1px solid #ffffff;
					border-top-right-radius: 5em;
					border-bottom-right-radius: 5em;
					cursor: pointer;
					pointer-events: auto;		/* weil wir die pointer-events im ueberliegenden Objekt ausgeschalten haben, muessen wir sie hier wieder einschalten */
			}
			#modellbild_steuerung > *.initialNone {
					display: none;
			}
					#modellbild_steuerung .bez {
							width: 0;		/* nicht display: none, so dass diese mit Animation eingefahren werden kann */
							max-width: 0;
							margin-right: 0;
							transition: max-width 0.5s, margin-right 0.5s;


							display: inline-block;
							overflow: hidden;
							white-space: nowrap;
							vertical-align: middle;
					}
							#modellbild_steuerung .bez .button_fileupload {
									display: inline-block;
									background-image: linear-gradient(to bottom, #9e9e9e 0%, #9e9e9e 50%, #828282 50%, #828282 100%);
									color: #ffffff;
									border: 0px;
									border-radius: 3px;
									padding-left: 0.5em;
									padding-right: 0.5em;
									padding-top: 0.2em;
									padding-bottom: 0.2em;
									margin-left: 0.5em;
									margin-right: 0.5em;
							}
					#modellbild_steuerung > * input[type="file"] {
							display: none;
					}
					#modellbild_steuerung .iconAction {
							vertical-align: middle;
							height: 28px;
					}
			  #modellbild_steuerung > *:hover .bez
			, #modellbild_steuerung > *.active .bez
			{
					width: auto;
					max-width: 300px;
					margin-right: 0.5em;
			}

	#modellbild_bottom {
			position: fixed;
			bottom: 0;
			left: 0%;
			width: 50%;
			display: none;
	}


			#box_schalter_hintergrund {
					margin-top: 1em;
					margin-bottom: 1em;
					text-align: left;
					margin-left: 7em;

					display: none;		/* erstmal nicht einblenden */
			}
					#box_schalter_hintergrund > * {
							vertical-align: middle;
					}
					#box_schalter_hintergrund > img {
							height: 28px;
							cursor: pointer;
					}

	#box_finish {
			box-sizing: border-box;		/* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
			z-index: 2;	/* um ueber das benachbarte Accordion zu kommen (Elemente Traegerprofil, Profilfarbe ragen sonst ueber die Warenkorb-Box) */
	}

	#box_finish:not(.iFrame #box_finish){
		position: fixed;
		right: 0;
		bottom: 0;
	}

			.box_print {
					display: none;	/* flex */
					justify-content: space-between;
					background-color: #f6f6f6;
					border: 1px solid #080808;
					cursor: pointer;
			}
					.box_print .box_print_tropfen {
							flex: 0 0 52px;
							display: flex;
							justify-content: center;
							align-items: center;
					}
							.box_print .box_print_tropfen img {
									/* Box-Groesse in Vorlage 52px */
									width: 22px;
									height: 30.5px;
							}
					.box_print .box_print_text {
							flex: 1 0 0;
							padding-top: 5px;
							padding-bottom: 5px;
					}
							.box_print .box_print_text .box_print_text_headline {
									font-weight: bolder;
							}
							.box_print .box_print_text .box_print_text_description {
									font-size: 88%;
									font-style: italic;
							}
					.box_print .box_print_haken {
							margin-left: 1em;
							margin-right: 0.5em;
							flex: 0 0 24px;
							display: flex;
							justify-content: center;
							align-items: center;
					}
			.gruppe_warenkorb {
					background-color: #f5f5f5;
					padding: 10px;

					box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.10);

					margin-top: 1em;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					align-items: center;

					z-index: 10;		/* fuer die .auswahlbox - diese haben einen z-index. Die Warenkorb-Box soll wieder drueber liegen */
			}
					.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;
							display: none;
							
					}
							.sonderwunsch textarea, .sonderwunsch input[type="text"] {
									width: 100%;
									border: 1px solid #e6e6e6;
									box-sizing: border-box;
									border-radius: 3px;
							}
							.sonderwunsch textarea {
									height: 50px;
							}
							.sonderwunsch input[type="text"] {
									/* Kommission Label */
							}
							.sonderwunsch input[type="text"]::placeholder {
									font-size: 12px;
							}
					.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;
					}
					.preis {
							font-size: 0.45cm;
							font-weight: bold;
					}

					#einzelpreis{
							display: flex;
							flex-direction: column;
					}
					.preis_alt{
							text-decoration: line-through;
							text-decoration-thickness: from-font;
					}
					.preis_neu{
							color: #ee1f26;
					}

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

					.box_warenkorb {
							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;
							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(bilder/wk_schwarz.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 {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: stretch;
	}
	#spalten2:not(.iFrame #spalten2){
		position: fixed;
		bottom: 0;
		left: 0;
	}
			#spalten2 > * {
					overflow: auto;
			}
			#spalten2 #visualisierung {
					flex: 1 0 0px;
					text-align: center;
					position: relative;
					padding-left: 2%;
			}
					@media (max-width: 800px) {
							#spalten2 #visualisierung {
									padding-left: 0;
							}
					}
			#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 0px;
					position: relative;
					padding-right: 2%;
			}

					/* von den Dachfenster-generierten Seiten */
					#text_vor_konfigurator {
							margin-bottom: 3em;
					}
					#text_nach_konfigurator {
							margin-top: 40em;
							margin-bottom: 18em;
					}


					/* SEO-Dachfenster */
					.dachfenster_liste_0 {
							list-style-type: none;
							padding: 0;
							margin: 0;
					}
							.dachfenster_liste_0 li {
									display: inline-block;
							}
									.dachfenster_liste_0 li a {
											font-weight: 400;
											font-style: italic;
											text-decoration: underline;
											background-color: #f8f8f8;
											color: #000000;
											border-radius: 3px;
											box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
											padding: 1em;
											margin-bottom: 1em;
											margin-right: 1em;
											display: inline-block;
									}

					.dachfenster_liste_12 {
							list-style-type: square;
							padding: 0;
							margin: 0;
							display: grid;
							grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
							margin-left: 1em;
					}
							.dachfenster_liste_12 li {
									display: inline-block;
									position: relative;
							}
							.dachfenster_liste_12 li::before {
									/* li {display: inline-block}, removes the list-style-type -- with li::before and 'content' I readd the liststyle-type-icon */
									content: '\25fc\a0';
									font-size: 6px;
									position: absolute;
									left: -2em;
									top: 1em;
							}
									.dachfenster_liste_12 li a {
											font-weight: 400;
											color: #000000;
											margin-bottom: 0.5em;
											margin-right: 1em;
											display: inline-block;
											text-decoration: none;
									}
					.dachfenster_navigation {
							width: 100%;
							margin-top: 20px;
					}
							.dachfenster_navigation th {
									/* hyphens: auto; kann nicht jeder browser ausreichend gut */		/* bewirkt, dass bei Handy, z.B. Iphone XS der Begriff "Dachfensterrollos" umgebrochen wird. Anderseits passt das nicht hin und die gesamte Seite wird horizontal scrollbar, was nicht schoen ist */
							}
							@media (max-width: 850px) {
									.dachfenster_navigation th {
													/* bewirkt, dass bei Handy, z.B. Iphone XS der Begriff "Dachfensterrollos" umgebrochen wird. Anderseits passt das nicht hin und die gesamte Seite wird horizontal scrollbar, was nicht schoen ist */
													word-break: break-word;
													overflow-wrap: break-word;
									}
							}
									.dachfenster_navigation a {
											color: #444444;
									}
					/* Ende SEO-Dachfenster */




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

					#modellbild_ueberschrift {
							margin-bottom: 1em;
					}
					@media (max-width: 800px) {
							#modellbild_ueberschrift {
									margin-top: 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 umbenannt ist, die Klasse aber nicht */
							position: relative;
							text-align: center;		/* so das auch das geklonte Bild mittig im Container ist */
					}
							.modellbild > * {
									object-fit: contain;
									z-index: 1;
									max-width: 100%;
									max-height: 100%;
							}
							.modellbild > svg {
									background-position: 50% 50%;
							}

					.infobereich {		/* zur Initialisierung alles aus haben */
							display: none;
					}

					#spalten2 #visualisierung {
							text-align: center;
							/* margin-bottom: 1em; */
					}
							#modellbild_ueberschrift {
									text-align: left;
							}
									#spalten2 #visualisierung .ueberschrift1 {
											font-size: 16px;
									}
									#spalten2 #visualisierung .ueberschrift2 {
											font-weight: bold;
											font-size: 16px;
									}
					#visualisierung svg {
							max-width: 100%;
					}
					#ansicht3D {		/* per Javascript uebertragen die 3D-Leute die Groesse dieses Elements auf das innere Element. Allerdings wird die Groesse in Pixel gerundet in Ganzzahl uebetragen. aus 400.6px werden 401px. Das verursacht Scrollbalken, die hiermit ausgeschalten werden sollen. - Aufgetreten im Safari   */
							overflow: hidden;
					}
							/*
							Beim Laden sind Steuer-Elemente von der AR-Ansicht zu sehen, die erst waehrend des Ladevorgangs mit Javascript ausgeschalten werden.
							Weil das immernoch so ist, schalte ich die Elemente hier schonmal per CSS aus. Diese werden dann per Javascript wieder angeschalten.
							*/
							#ansicht3D .background-controls > * {
									display: none;
							}


					#eingabe .bereichsueberschrift {
							background-color: #444444;
							color: #ffffff;
							font-size: 16px;
							font-weight: normal;
							padding: 1em;
							text-align: left;
							margin-top: 0;
					}
					@media (max-width: 800px) {
							#eingabe .bereichsueberschrift {
									display: none;
							}
					}

					/* bei den Optionen */
					#auswahl-optionen input[type=checkbox] {
							display: none;
					}
					#eingabe .switch {
							margin-right: 1em;
							margin-top: 4px;
							margin-bottom: 4px;
					}

					#auswahl-grundform {
							display: flex;
					}
							#auswahl-grundform > * {
									flex: 1;
									text-align: center;
									padding-right: 4%;
									padding-left: 4%;
									padding-top: 1em;
									padding-bottom: 1em;
									border-right: 1px solid #cacaca;


									/* fuer den <a>-Tag Dachfenster (statt normalem <label>) */
									text-decoration: none;
									color: #444444;

							}
									#auswahl-grundform > * .bez {
											display: block;
											margin-top: 0.5em;
											margin-bottom: 0.5em;
									}
									#auswahl-grundform > * .input {
											display: block;
									}
							#auswahl-grundform > *:last-child {
									border-right: none;
							}
							#auswahl-grundform > *:hover {
									background-color: #f9f9f9;
							}
							#auswahl-grundform > *.active
							, #auswahl-grundform > *.active:hover
							{
									background-color: #f1f1f1;
							}

							@media (max-width: 700px) {
									#auswahl-grundform > * {
											font-size: 11px;
									}
							}
							@media (max-width: 600px) {
									#auswahl-grundform > * {
											font-size: 10px;
									}
							}
							@media (max-width: 500px) {
									#auswahl-grundform > * {
											font-size: 9px;
									}
							}
							@media (max-width: 400px) {
									#auswahl-grundform > * {
											font-size: 8px;
									}
							}
							#auswahl-grundform > * > img {
									max-width: 100%;
									width: 100px;
							}

					#eingabe .eingabeBox {
							margin-top: 1em;
							margin-left: 2em;
							margin-bottom: 1em;
							display: none;
							overflow: hidden;		/* fuer die Animation */
					}
					@media (max-width: 600px) {
							#eingabe .eingabeBox {
									margin-left: 1em;	/* statt 2em */
							}
					}
					@media (max-width: 500px) {
							#eingabe .eingabeBox {
									margin-left: 0;
							}
					}
							#eingabe .erklaerung {
									font-size: 90%;
									color: #888888;
							}

					.flexTable {
							/*
									- Modell-Uebersichts-Tabelle
									- Bedienung-Uebersichts-Tabelle
							*/
					}

							.flexTable > * {
									display: flex;
									justify-content: space-between;
									align-items: stretch;
							}
							.flexTable > *:nth-child(even):not(.ueberschrift):not(.active) {
									background-color: #fbfbfb;
							}
							.flexTable > *:nth-child(odd):not(.ueberschrift):not(.active) {

							}
							.flexTable > .active {
									color: #004A82;
									background-color: #e1ecf5;
							}
							.flexTable > *:not(.active):not(.ueberschrift):hover {
									background-color: #f2fdff !important;
							}
							#eingabe .flexTable > * {
									font-size: 90%;
							}
							#eingabe.elemLt800 .flexTable > * {
									font-size: 80%;
							}
							#eingabe.elemLt650 .flexTable > * {
									font-size: 70%;
							}
							.flexTable > .ueberschriftGroup {
									color: #888888;
									text-align: center;
							}
									.flexTable > .ueberschriftGroup .empty {
											flex: 4 0 0px;
											/*
											padding-left: 0.5em;					/  * Uebernimmt das Padding der darunterliegenden Spalten *  /
											padding-right: calc(0.5em + 1px);		/  * Uebernimmt das Padding der darunterliegenden Spalten sowie die Summer aller darunterliegenden border *  /
											*/
											padding-right: 1px;
									}
									.flexTable.flexTableOhnePreis > .ueberschriftGroup .empty {
											flex: 5 0 0px;
									}
									.flexTable > .ueberschriftGroup .stromversorgung {
											flex: 2 0 0px;
											border-left: 1px solid #f1f1f1;

											padding-right: 1px;		/* Die Breite aller zusammengefassten border */
									}
									.flexTable > .ueberschriftGroup .steuerung {
											flex: 6 0 0px;
											border-left: 1px solid #f1f1f1;
											border-right: 1px solid #f1f1f1;

											padding-left: 2px;		/* Die Breite aller zusammengefassten border */
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl1 {
											flex: 1 0 0px;
											padding-left: 0px;
											padding-right: 0px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl2 {
											flex: 2 0 0px;
											padding-left: 0px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl3 {
											flex: 3 0 0px;
											padding-left: 1px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl4 {
											flex: 4 0 0px;
											padding-left: 2px;
											padding-right: 1px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl5 {
											flex: 5 0 0px;
											padding-left: 2px;
											padding-right: 2px;
									}
									.flexTable > .ueberschriftGroup .steuerung.anzahl6 {
											flex: 6 0 0px;
											padding-left: 3px;
											padding-right: 2px;
									}
							.flexTable > *.ueberschrift {
									color: #888888;
									text-align: center;
							}
							@media (max-width: 450px) {
									.flexTable > *.ueberschrift {
											font-size: 60% !important;
									}
							}
							@media (max-width: 350px) {
									.flexTable > *.ueberschrift {
											font-size: 50% !important;
									}
							}
									.flexTable .ueberschrift label {
											cursor: default;		/* label sind an anderer Stelle mit cursor:pointer deklariert - das soll aber bei der Ueberschrift nicht sein */
									}
									.flexTable .box {
											display: flex;
											flex-direction: column;
											justify-content: center;
											align-items: center;
											padding-top: 0.5em;
											padding-bottom: 0.5em;
									}
									.flexTable > *.ueberschrift > * {
											justify-content: flex-start;
									}


									/*
											Hinweis IE11-Bug
											Bei der Flex-Massangabe muss fuer den IE11 an die letzte Zahl immer eine Einheit ran!
											Bsp.: "flex: 1 0 0px" statt "flex: 1 0 0"
									*/

									.flexTable > * .input {
											flex: 1 0 0px;
											text-align: center;
									}

									.flexTable > * .img {
											flex: 1 0 0px;
									}
											.flexTable > * .img img {
													width: 90%;		/* nicht volle Breite, so ist rechts noch Platz zur Schrift */
											}
									.flexTable > * .bezeichnung {
											flex: 2 0 0px;		/* wird in der Ueberschrift nicht ueberschrieben */
											text-align: left;
											align-items: flex-start;
											padding-left: 0.5em;
											padding-right: 0.5em;
									}
									.flexTable > * .bezeichnung.motor {
											flex: 2 0 0px;
									}
									.flexTable > * .bezeichnung.laenge {
											flex: 3 0 0px;
									}
									.flexTable > * .bezeichnung.ohne {
											flex: 10 0 0px;		/* .laenge 3 + .bedienlaenge 7 = 10 */
									}
											.flexTable > * .bezeichnung .zusatz {
													color: #888888;
													display: block;
											}
											.flexTable > * .bezeichnung .zusatzlink {
													display: block;
													/* font-size: 13px; */
											}
													.flexTable > * .bezeichnung .zusatzlink a {
															color: #888888;
															text-decoration: none;
															border-bottom: 1px dashed #888888;
													}
									.flexTable > * .info {
											flex: 1 0 0px;
											text-align: center;
									}
											.flexTable > * .info img {
													cursor: pointer;
											}
									.flexTable > * .bedienlaenge {
											flex: 7 0 0px;
											display: block;
									}
											.flexTable > * .bedienlaenge > * {
													vertical-align: middle;
											}
											.flexTable > * .bedienlaenge input {
												
											}
													.auswahl-bedienlaenge {
															margin-left: 1em;
															margin-right: 0.5em;
															border: 1px solid #cecece;
													}
													input[type=number].auswahl-bedienlaenge {		/* bei diskreten Werten (4decor) ist das eine drop-down box, ansonten (simply) ein eingabefeld type="number" */
															width: 5ch;
															box-sizing: content-box;
													}
									.flexTable > * .detail {
											flex: 1 0 0px;
											text-align: center;
											border-left: 1px solid #d5d5d5;
									}
									.flexTable > * .detail:last-child {
											border-right: 1px solid #d5d5d5;
									}
									#eingabe.elemLt800 .flexTable > * .detail img {		/* der Haken */
											width: 10px;
									}
									#eingabe.elemLt550 .flexTable > * .detail.lessSpaceNone {
											display: none;
									}

					.flexTableBefestigung {
							/*
									- Befestigung-Uebersichts-Tabelle
							*/
					}

							.flexTableBefestigung > * {
									display: flex;
									justify-content: space-between;
									align-items: stretch;
							}
							#eingabe .flexTableBefestigung > * {
									font-size: 90%;
							}
							#eingabe.elemLt800 .flexTableBefestigung > * {
									font-size: 80%;
							}
							#eingabe.elemLt650 .flexTableBefestigung > * {
									font-size: 70%;
							}
							.flexTableBefestigung > .active {
									background-color: #fafafa;
							}
							.flexTableBefestigung > .ueberschriftGroup {
									color: #888888;
									text-align: center;
							}
									.flexTableBefestigung label {
											display: flex;
									}
									.flexTableBefestigung label.mitAnleitungen {
											flex:  7;			/* 1 + 2 + 4 */
									}
									.flexTableBefestigung label.ohneAnleitungen {
											flex: 11;			/* 1 + 2 + 8 */
									}

									.flexTableBefestigung .box {
											display: flex;
											flex-direction: column;
											justify-content: center;
											align-items: center;
											padding-top: 0.5em;
											padding-bottom: 0.5em;
									}
									.flexTableBefestigung > * .input {
											flex: 1 0 0px;
											text-align: center;
									}

									.flexTableBefestigung > * .img {
											flex: 1 0 0px;
									}
											.flexTableBefestigung > * .img img {
													width: 44px;
											}
									.flexTableBefestigung > * .bezeichnung {
											align-items: flex-start;
											padding-left: 0.5em;
											padding-right: 0.5em;
									}
									.flexTableBefestigung > * .bezeichnung.mitAnleitungen {
											flex: 4 0 0px;
									}
									.flexTableBefestigung > * .bezeichnung.ohneAnleitungen {
											flex: 8 0 0px;
									}
											.flexTableBefestigung > * .bezeichnung .ueberschrift {
													font-weight: bold;
													text-align: left;
													margin-top: 0;
													margin-bottom: 0.5em;
													font-size: 120%;
											}
									.flexTableBefestigung > * .anleitungen {
											flex: 4 0 0px;
											text-align: left;
											align-items: flex-start;
											padding-left: 0.5em;
											padding-right: 0.5em;
									}
											.flexTableBefestigung > * .anleitungen a {
													display: flex;
													align-items: center;
													color: #888888;
													text-decoration: none;
											}
													.flexTableBefestigung > * .anleitungen a img {
															flex: 0 0 23px;
													}
													.flexTableBefestigung > * .anleitungen a span {
															flex: 1 0 0px;
															padding-left: 0.5em;
													}
									.flexTableBefestigung > * .info {
											flex: 1 0 0px;
											text-align: center;
									}
											.flexTableBefestigung > * .info img {
													cursor: pointer;
											}

							.groupButtonsBottom {
									text-align: right;
									margin-top: 2em;
									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;
									}

					#info_traegerprofil {
							cursor: pointer;
					}

					#linkDesignwahl_1 {
							margin-top: 1em;
					}

					#doppelstoff-empfehlung-abdunkelung-oben {
							margin-top: 1em;
					}


					#group_masseMitStandardgroessen {
							display: flex;
							flex-direction: row;
					}

					#group_masse {
							display: flex;
							/* flex: 1 1 0; eigentlich so hier, aber Safari, positioniert diese Box absolut ueber die erste Box (Masseingabe) drueber */
							flex: 1 1 auto;
					}
					#eingabe.elemLt550 #group_masse {
							display: block;
					}
							#group_masse > .left {
									flex: 0 0 auto;
									padding-right: 5em;
							}
									#group_masse > .left img {
											width: 180px;
									}
							#eingabe.elemLt550 #group_masse > .left {
									padding-right: 0;
									margin-bottom: 2em;
									text-align: center;
							}
									#eingabe.elemLt550 #group_masse > .left img {
											width: 100%;
											max-width: 200px;
									}
							#group_masse > .right {
									flex: 1 1 0px;
							}
									#group_masseingabe label {
											display: none;
											margin-top: 1.5em;
									}
									#group_masseingabe label:first-child {
											margin-top: 0;
									}
											#group_masseingabe label > * {
													/* vertical-align: middle;  ohne diese Angabe wird es irgendwie mittiger */
											}
											.mass_bez {
													display: inline-block;
													width: 122px;
											}
													.mass_bez .zusatz {
															font-weight: lighter;
															font-style: italic;
															color: #888888;
													}
											.mass_umrechnung {
													color: #888888;
											}
											.mass_grenze {
													font-size: 80%;
													color: #888888;
													margin-left: 1em;
													display: inline;
											}
											#group_anlagenbreite {
													display: none;
													margin-top: 1.5em;
											}
													#mass_anlagenbreite {
															display: inline-block;
															width: 100px;
															text-align: right;
													}
									#linkMasseingabeMessanleitung {
											margin-top: 0.5em;
											margin-bottom: 1em;
											color: #357dbc;
											font-weight: bold;
											text-transform: uppercase;
									}
									#anleitungen_messen > a {
											text-decoration: none;
											color: #888888;
											margin-right: 1em;
									}
									#anleitungen_messen > a:last-child {
											margin-right: 0;
									}
											#anleitungen_messen > a > * {
													vertical-align: middle;
											}
											#anleitungen_messen > a > img {
													width: 23px;
													margin-right: 0.2em;
											}
											#anleitungen_messen > a > span {
													font-size: 90%;
											}
									#link_standard {
											display: inline-block;
											position: relative;
									}
											#link_standard .unsertipp {
													position: absolute;
													top: 0;
													left: 0;
													width: 100%;
													color: #ffffff;
													text-align: center;
													padding: 1em;
													box-sizing: border-box;
													text-transform: uppercase;
											}
											#link_standard .linktext {
													position: absolute;
													bottom: 0;
													left: 0;
													width: 100%;
													color: #000000;
													text-align: center;
													padding: 1em;
													margin-bottom: 3em;
													box-sizing: border-box;
											}
											#link_standard .button {
													position: absolute;
													bottom: 0;
													left: 50%;
													transform: translate(-50%, 0);
													background-color: #ffffff;
													border: 0;
													border-radius: 3px;
													color: #000000;
													padding-top: 0.5em;
													padding-bottom: 0.5em;
													padding-left: 1em;
													padding-right: 1em;
													margin-bottom: 1em;
													font-size: 14px;
													font-weight: bold;
													margin-top: 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;
									}
									/*		wuerde es in iOs schon beim Tippen und nicht erst bei onchange anzeigen
									#group_masseingabe input[type=number]:out-of-range {
											outline: 1px solid #ff0000;
									}
									*/
									@media (max-width: 500px) {
											.mass_bez {
													width: 80px;
											}
									}
									@media (max-width: 400px) {
											.mass_grenze {
													display: block;
											}
									}
							#standardgroessen {
									flex: 0 0 180px;
									text-align: center;
							}
									#standardgroessen .desktop {
											display: block;
									}
									#standardgroessen .mobile {
											display: none;
									}
							@media (max-width: 1700px) {
									#group_masseMitStandardgroessen {
											flex-direction: column;
									}
											#standardgroessen .desktop {
													display: none;
											}
											#standardgroessen .mobile {
													display: block;
													max-width: 100%;
											}
											#standardgroessen {
													flex: 0 0 auto;
													margin-top: 2em;
													margin-bottom: 2em;
											}

											#link_standard .unsertipp {
													left: 8%;
													top: 14%;
													width: auto;
													margin: 0;
													padding: 0;
													font-size: 2.0vw;
											}
											#link_standard .linktext {
													margin: 0;
													padding: 0;
													left: 8%;
													top: 50%;
													bottom: auto;
													right: auto;
													width: 50%;
													font-size: 1.5vw;
													text-align: left;
											}
											#link_standard .button {
													bottom: auto;
													left: auto;
													right: 22.5%;
													top: 50%;
													transform: translate(50%, -50%);
													margin: 0;
													background-color: #000000;
													color: #ffffff;
													font-weight: normal;
													padding-top: 2%;
													padding-bottom: 2%;
													padding-left: 4%;
													padding-right: 4%;
													font-size: 1.15vw;
											}
							}
							@media (max-width: 1500px) {		/* Layout einspaltig */
											#link_standard .unsertipp {
													font-size: 2.4vw;
											}
											#link_standard .linktext {
													font-size: 1.7vw;
											}
											#link_standard .button {
													font-size: 1.7vw;
											}
							}
							@media (max-width: 800px) {		/* Layout einspaltig */
											#link_standard .unsertipp {
													font-size: 4.5vw;
											}
											#link_standard .linktext {
													font-size: 3.4vw;
											}
											#link_standard .button {
													font-size: 3vw;
											}
							}
							@media (max-width: 600px) {
											#link_standard .unsertipp {

											}
											#link_standard .linktext {
													font-size: 4vw;
											}
											#link_standard .button {

											}
							}

					#group_masseingabe_bemassung_bildtext {
							font-size: 0.8em;
							padding: 0px 0px 0px 10px;
					}

					#wahl_dachfenster {
							display: none;
					}
							#wahl_dachfenster select {
									width: 220px;
									margin-left: 2em;
									border: 1px solid #cecece;
									padding: 6px;
							}
							@media (max-width: 400px) {
									#wahl_dachfenster select {
											width: 100%;
											margin-left: 0;
									}
							}
							#wahl_dachfenster .normal {
									color: #000000;
									background-color: #ececec;
							}
							#wahl_dachfenster .anfrage {
									color: #ff0000;
									background-color: #ff9999;
							}
									/*
									#wahl_dachfenster .anfrage:after {
											content: " !";
									}
									*/
							#wahl_dachfenster select:disabled {
									color: #aaaaaa;
							}

							#wahl_dachfenster .legende .ueberschrift {
									font-weight: bold;
									font-size: 70%;
							}
							#wahl_dachfenster .legende ul {
									list-style-type: none;
									margin-top: 0;
									margin-bottom: 0;
									padding-top: 0;
									padding-bottom: 0;
									font-size: 70%;
							}
							#wahl_dachfenster .meldung {
									border: 1px solid #ff0000;
									margin-top: 1em;
									margin-bottom: 2em;
									padding: 1em;
									display: none;
							}

							#wahl_dachfenster table {
									border-spacing: 0;
									width: 100%;
									max-width: 400px;
							}
									#wahl_dachfenster table td {
											padding-left: 0;
											padding-right: 8px;
											padding-top: 4px;
											padding-bottom: 4px;
									}

							.dach_hinweis {
									/* Das (i) zum Klicken/Tippen */
									display: none;
									vertical-align: middle;
									cursor: pointer;
							}
							.windowHinweisDach {
									/* Das Extra-Fenster */
									padding: 1em;
							}
							.dach_eingabe_frame {
							}
									.dach_eingabe_frame > table {
											margin-bottom: 1em;
									}

					/*
					#masseingabe_oder {
							margin-top: 1em;
							margin-bottom: 1em;
							text-transform: uppercase;
					}
					*/
					#dachKontakt {
							display: none;
							margin-top: 1em;
					}

					#linkDachfensterTypenschild {
							margin-bottom: 1em;
					}
					#auswahl_d_traeger {
							display: none;
					}

					#hinweisMasseingabe {
							margin-top: 4em;
					}
							.boxIconLeft {
									display: flex;
									align-items: stretch;
							}
									.boxIconLeft > .left {
											flex: 0 0 auto;
											width: 50px;
											min-height: 50px;
											line-height: 50px;
											text-align: center;
									}
											.boxIconLeft > .left > img {
													vertical-align: middle;
											}
									.boxIconLeft > .right {
											flex: 1 1 0px;
											padding-left: 1em;
											padding-right: 1em;

											display: flex;
											align-items: center;
									}
									.boxIconLeft.achtung > .left {
											background-color: #ffde0e;
									}
									/*
											.boxIconLeft.achtung > .left img {
													background-color: #ffde0e;
											}
									*/
									/*
									.boxIconLeft.achtung > .right {
											background-color: #fef9db;
									}
									*/
									.boxIconLeft.messen > .left {
											background-color: #357dbc;
									}
									/*
											.boxIconLeft.messen > .left img {
													background-color: #357dbc;
											}
									*/
									.boxIconLeft.messen > .right {
											/* background-color: #e9f2f9; */
									}

											#hinweisMasseingabeList {
													margin-top: 0.5em;
													margin-bottom: 0.5em;
													padding: 0;

													list-style-type: none;
											}
													#hinweisMasseingabeList > li {
															margin-top: 0.5em;
															margin-bottom: 0.5em;
													}
													.hinweisbox {
															display: none;
													}


					.aufpreis {
							color: #3580bb;
							font-weight: bold;
					}
					.scrollContainer .aufpreis {
							display: block;
					}
					.auswahlbox .aufpreis {
							position: absolute;
							left: 0;
							bottom: -20px;
							text-align: center;
							width: 100%;
							font-size: 12px;
					}

					.xArtikelsystem {
							display: grid;
							grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
							grid-column-gap: 5%;
					}

							.xArtikelsystem .xArtikel {
									display: flex;
									margin-bottom: 2em;
							}
									.xArtikelsystem .xArtikel .action {
											display: block;
											flex: 1 0 0px;
									}
									.xArtikelsystem .xArtikel .icons {
											flex: 0 0 34px;
											text-align: right;
									}
											.xArtikelsystem .xArtikel .action img {
													width: 100%;
											}
											.xArtikelsystem .xArtikel .icons img {
													width: 24px;
											}
											.xArtikelsystem .xArtikel input{
													width: 2ch;
													box-sizing: content-box;
													text-align: right;
											}

					#link_fenster_bedienelemente {
							font-size: 90%;
							margin-top: 0.5em;
							margin-bottom: 1em;
					}
					#fensterBedienlaenge, #fensterBedienlaenge p {
							color: #444444;
							font-size: 11px;
					}
					.msgboxhtml_head {
							text-align: center;
							background-color: #5f5f5f;
							color: #ffffff;
							padding: 1em;
					}
							.msgboxhtml_head .first {
									font-weight: bold;
									font-size: 13px;
							}
							.msgboxhtml_head .second {
									font-size: 11px;
							}
					.msgboxhtml_body {
							padding: 1em;
					}
							.msgboxhtml_body img {
									float: right;
									margin-left: 1em;
									margin-bottom: 1em;
							}


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

					.auswahlboxContainer {
							display: none;
							margin-right: 2em;
					}
					#eingabe.elemLt450 .auswahlboxContainer {
							margin-right: 1.5em;
					}
					.auswahlboxContainer:last-child {
							margin-right: 0;
					}
							.auswahlboxContainer .accordion_zwischenueberschrift {
									margin-left: 0.5em;		/* weil .auswahlbox auch ein ueberstehenden Bereich hat - damit das gleich aussieht */
									margin-top: 2em;
							}

							.auswahlbox {
									margin-left: 0.5em;		/* wegen dem ueberstehendem Bereich */
									margin-bottom: 1em;
							}

									.auswahlbox label {
											background-color: #f1f1f1;
											color: #444444;
											display: inline-block;
											padding-left: 2em;
											padding-right: 2em;
											padding-top: 1em;
											padding-bottom: 1em;
											border-right: 1px solid #ffffff;

											position: relative;		/* fuer den innenliegenden Aufpreis */
											z-index: 1;
									}
									#eingabe.elemLt450 .auswahlbox label {
											padding-left: 1.5em;
											padding-right: 1.5em;
											font-size: 85%;
									}
									.auswahlbox label.active {
											background-color: #3580bb;
											color: #ffffff;
											border-radius: 3px;
											transform: scale(1.1);
											box-shadow: 0 8px 6px -6px #000000;
											z-index: 2;
									}
											.auswahlbox label input {
													display: none;
											}
					#anleitungen_traegerprofil {
							margin-top: 1em;
					}

					#auswahl-optionen label {
							display: block;
					}
							#auswahl-optionen label > * {
									vertical-align: middle;
							}

			#box_abzugsmass {
					background-color: #cdcdcd;
					display: none;		/* wird beim Anschalten auf flex gesetzt. */
					align-items: center;
					cursor: pointer;
					border-top: 1px solid #cecece;
			}
					#box_abzugsmass > * {
							vertical-align: middle;
					}
					#box_abzugsmass > #box_abzugsmass_icon {
							flex: 0 0 50px;
							height: 50px;
							background-color: #ffdd00;
							display: flex;
							justify-content: center;
					}
							#box_abzugsmass img {
									background-color: #ffdd00;
									width: 25px;
							}
					#box_abzugsmass #info_abzugsmass {
							padding-left: 1em;
							padding-right: 1em;
							flex: 1 0 0px;
					}

			#last_element:not(.iFrame #last_element) {
					margin-bottom: 18em;				/* das letzte Element vor .gruppe_warenkorb schafft den Platz nach unten */
			}

			.iFrame #last_element{
					margin-bottom: 10em;				/* das letzte Element vor .gruppe_warenkorb schafft den Platz nach unten */
			}





@media (max-width: 800px) {

	/* einspaltig untereinander (und nicht mehr 2 Spalten) */


	#spalten2 {
			flex-direction: column;
			position: static !important;
	}
			#spalten2 > *{
					flex: none !important;
			}
			#spalten2 #trenner {
					display: none;
			}
			#spalten2 #eingabe {
					padding-left: 2%;
			}
					#accordion {
							margin-bottom: 2em;
					}
					#box_finish {
							position: static!important;
							margin-top: 4em;
					}
							#box_print {
									margin-bottom: 3em;
							}
							.gruppe_warenkorb {
									margin-left: 0;
									margin-right: 0;
									margin-bottom: 1em;
									border-left: none;
									border-right: none;
									border-bottom: none;
							}

	#modellbild_steuerung {
			position: static;
			width: 100%;
			transform: none;
			flex-direction: row;
			justify-content: space-evenly;
			margin-top: 1em;
			margin-bottom: 0;
			padding-bottom: 1em;
			border-bottom: 1px solid #d7d7d7;
			flex-wrap: wrap;
	}
			#modellbild_steuerung .group {
					display: inline-flex;
			}
			#modellbild_steuerung .bez {
					display: none;
			}
					#modellbild_steuerung > * {
							flex: 0 1 42px;
							border-radius: 5em;
							border: 3px solid #ffffff;
							padding: 0;
					}
					#modellbild_steuerung > *:hover {
							border: 3px solid #cccccc;
					}
					#modellbild_steuerung > *.active {
							border: 3px solid #000000;
					}
							#modellbild_steuerung > * .iconAction {
									width: 100%;
							}


	#modellbild_bottom {
			position: static;
			width: auto;
	}

	#last_element {
			display: none;
	}

}

#extrafenster {
	display: none;
}
	.extrafenster {
			background-color: #ffffff;
			padding: 2em;
			overflow-x: hidden;
			height: 100%;
			box-sizing: border-box;
	}
	@media (max-width: 800px) {
			.extrafenster {
					padding: 1em;
			}
	}

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

									#tabsModell {
											margin-top: 1.5em;
									}


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

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

									.boxInfoModell {
											padding: 1.8%;
									}
											.boxInfoModell h3 {
													margin-top: 0;
											}
											.boxInfoModell .alternativBox {
													background-color: #fdf8f8;
													padding: 1em;
													display: flex;
													align-items: center;
											}
													.boxInfoModell .alternativBox > .left {
															flex: 0 0 auto;
															padding: 1em;
													}
															.boxInfoModell .marke {
																	text-transform: uppercase;
															}
													.boxInfoModell .alternativBox > .right {
															flex: 1 1 0px;
															padding-left: 1em;
															color: #444444;
													}
															.boxInfoModell .alternativHinweis {
																	font-weight: bold;
																	font-size: 120%;
															}
															.boxInfoModell .alternativErklaerung {
																	margin-top: 1em;
																	font-size: 90%;
															}


											.boxInfoModell .fensterModellMinMax {
													display: inline-block;
													margin-right: 3em;
													margin-top: 1em;
											}
													.boxInfoModell .fensterModellMinMax img {
															display: inline-block;
															vertical-align: top;
													}
													.boxInfoModell .fensterModellMinMax img {
															margin-right: 1em;
													}
													.boxInfoModell .fensterModellMinMax ul {
															list-style-type: none;
															margin: 0;
															padding: 0;
													}


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


#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 - welcher Fall? Bitte dokumentieren */
					/*
					max-height: 340px;
					max-width: 161px;
					im Fehlerfall, nachdem das Bild fehlerhaft generiert wird, wird das Modellbild-SVG verwendet, welches mit der max-width-Angabe zu klein (47 * 54 px) waere
					*/
					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;
					}
}



/*  SEO Drop Down  */
	.select-seo {
			position: relative;
	}
			.select-seo .select-seo-input {
					box-sizing: border-box;
					background-color: #e6e6e6;
					display: flex;
					justify-content: space-between;
					align-items: center;
					cursor: pointer;
					padding-left: 0.5em;
					padding-right: 0.5em;
					padding-top: 0.25em;
					padding-bottom: 0.25em;
			}
			.select-seo:hover .select-seo-input {
					outline: 1px solid #aaaaaa;
			}
					.select-seo.disabled .select-seo-input {
							cursor: default;
					}
					.select-seo.disabled:hover .select-seo-input {
							outline: none;
					}
							.select-seo .select-seo-input-text {
									font-weight: bold;
							}
							.select-seo .select-seo-input-arrow {

							}
									.select-seo.active .select-seo-input-arrow {

									}
											.select-seo.active .select-seo-input-arrow > * {
													transform: rotate(180deg);
											}
			.select-seo .select-seo-choice {
					display: none;
					max-height: 200px;
					overflow: auto;
					box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
					padding: 0;
					margin: 0;
					list-style-type: none;
					position: absolute;
					left: 0;
					right: 0;
					background-color: #ffffff;
					z-index: 1;		/* bei mehreren Select-Boxen */
			}
					.select-seo.active .select-seo-choice {
							display: block;
					}

					.select-seo .select-seo-choice li a {
							color: #000000;
							text-decoration: none;
							padding-left: 0.5em;
							padding-right: 0.5em;
							padding-top: 0.25em;
							padding-bottom: 0.25em;
							display: block;
					}
							.select-seo .select-seo-choice li a:hover {
									background-color: #e0e0e6;
							}

/*  Ende SEO Drop Down  */







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