@import url("/css/variables.css");

input[type="text"], input[type="number"], select {
	font-size:16px;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}
select option {
    width:100%;
    text-overflow:ellipsis;
    overflow:hidden;
}
.box_optionen .optionen {
    -webkit-transition: max-height 800ms ease;
    -moz-transition: max-height 800ms ease;
    -o-transition: max-height 800ms ease;
    transition: max-height 800ms ease;
    height:auto;
    max-height:600px;
}
.box_optionen .optionen[style*="display: none"] {
    
    max-height:0;
}
.anzTraeger {}
ul.modell_typen li:only-child {
    display: none;
}
.konfigurator_box_main, .modellwahl_wrap, .box_optionen, form#konfigurator {
    
    margin: 0 auto;
   /* max-width: 1200px;*/
}
.fehlerErklaerung:before {
	content:"";
	display:block;
	clear:both;
}
.fehlerErklaerung {font-size:1.1em;font-weight:bold;color:#f00;}
form#konfigurator {position: relative;}
.montageanleitung  {margin-top:1em;display:block}
.empfohlene_auswahl {
    margin-left: 15px;
    position: relative;
}
.empfohlene_auswahl::before, .hinweis_empfohlen::before {
    border-bottom: 6px solid transparent;
    border-left: 6px solid green;
    border-top: 6px solid transparent;
    content: "";
    height: 0;
    left: -10px;
    position: absolute;
    top: 0;
    width: 0;
}
.hinweis_empfohlen::before {
    
    left: 0;
   
}
.hinweis_empfohlen {
    padding-left: 10px;
    position: relative;
    margin-left: 30px;
    color:green;
	display: inline-block;
	float: right;
}
#auswahl_befestigungen {margin-top:29px;}
#profilfarbewahl {
	display:none;
	background-color: #ffe;
    border: 3px solid #888;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #ccc;
    left: 5px;
    padding: 20px;
    position: absolute;
    top: 100px;
    width: 300px;
    z-index: 99999;
}
#profilfarbewahl li:not(.ueberschrift) {
	float:left;
	width:70px;
	height:50px;
	margin:2px;
	box-shadow: 1px 1px 1px #ccc;
	cursor:pointer;
	font-size:.7em;
	text-align:center;
}
#profilfarbewahl li:not(.ueberschrift) div {
	
	width:70px;
	height:30px;
	margin:2px;
	box-shadow: 1px 1px 1px #ccc;
	cursor:pointer;
	font-size:.7em;
}
#profilfarbewahl li > span {
	color:#000;

}
#auswahl_abschlussprofil td {
    color: #fff;
}
.empfohlene_auswahl, .hinweis_empfohlen {text-shadow: 0 0 0 #000;}

.befestigung_gruppe, optgroup {
	/*color:#fff;
	background-color:#888;*/
	display: inline-block;
    padding: 3px;
    width: 100%;
	font-weight:normal;
	font-style: italic;
}
.sprechblase.gruen {border:2px solid #0f0;cursor:pointer;}
#auswahl_befestigungen td, #auswahl_seitenfuehrungen td {

    
    padding-bottom: 5px;
}
.optionen.trenner {
    display:none!important;
    background: url("/jalousie/konfigurator/pfeil-duenn-gruen.svg") no-repeat scroll center top 90px, rgba(0, 0, 0, 0) url("/jalousie/konfigurator/pfeil-duenn-hellgrau.svg") no-repeat scroll center bottom;
    width: 20px;
    height:0;
}
.optionen.trenner.ohne {
    background: url("/jalousie/konfigurator/pfeil-duenn-hellgrau.svg") no-repeat scroll center top 90px, rgba(0, 0, 0, 0) url("/jalousie/konfigurator/pfeil-duenn-gruen.svg") no-repeat scroll center bottom;
}
/*.box_optionen option:checked {background: linear-gradient(var(--btn4Bg, #444), var(--btn4Bg, #444));font-weight:bold;}*/
#auswahl_befestigungen td[colspan="2"], #auswahl_seitenfuehrungen td[colspan="2"] {
    margin-bottom: 5px;
    padding-bottom: 0;
	border-bottom: 1px dotted #888;
}
.box_optionen option, .box_optionen select {overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;}
input[type=range] {
  -webkit-appearance: none;
  margin: 18px;
  width: 90%;
  display:none;
  position:absolute;
}
input[type=range].vertikal {
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr;
	height: 300px;
	width: 8.4px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 90%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #cecece, 0px 0px 1px #0d0d0d;
  background: #658f38;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
  
}
input[type=range].vertikal::-webkit-slider-runnable-track {
  width: 8.4px;
  height: 300px;
}
input[type=range]::-webkit-slider-thumb {

  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #cecece;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
.vertikal::-webkit-slider-thumb {
-webkit-appearance: none;
  height: 16px;
  width: 36px;
  margin-left: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  
}
input[type=range]::-moz-range-track {
  width: 90%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #658f38;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range].vertikal::-moz-range-track {
  width: 8.4px;
  height: 300px;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #cecece;
  cursor: pointer;
}
input[type=range].vertikal::-moz-range-thumb {

  height: 16px;
  width: 36px;
  margin-left: -14px;
}
input[type=range]::-ms-track {
  width: 90%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range].vertikal::-ms-track {
  width: 8.4px;
  height: 300px;
}
input[type=range]::-ms-fill-lower {
  background: #658f38;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #658f38;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].vertikal::-ms-thumb {

  height: 16px;
  width: 36px;
  margin-left: -14px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #658f38;
}
input[type=range]:focus::-ms-fill-upper {
  background: #658f38;
}
#fancybox-wrap {
    left: 0;
   padding: 0;

}
.important_notices_open {display:none;padding:10px;}
.highlighted {background:#0ff;}
.modelle_input_wrap { display:none;}
#des_lamellengroesse_auswahl {margin-top:15px;}
.mass_erweitert li {margin: 0.5em 0;}
.mass_erweitert li span {white-space:nowrap;}
.modellfilter {display:none;}
.bildmasslink {display:none;}
.pakethoehe {display:none;}
.mass_erweitert label {
    display: inline-block;
    /*  height: 25px;*/
    width: 150px;
}
ul.stegband, .mass_erweitert ul, ul.modell_typen, ul.modelle, ul.design_liste {list-style-type:none;padding:0;margin:0;}
ul.stegband li, ul.modell_typen li, ul.modelle li, ul.design_liste li {padding:5px;float:left;}
		ul.auswahl_modelltyp_informationen li {padding:3px;float:none;}
ul.modelle li {width:17.4%;padding:0;margin-left: 1em;}
ul.modell_typen:after, .auswahl_lamellenbreite:after {content:' ';clear:both;display: block;}
/* fuer Touch-Geraete einfach die Klasse .touchDevice davor schreiben (Erkennuzng und Setzung der Klasse in Javascript) */
fieldset {border:0;}
.mass_erweitert_modell label {display:block;}

.mass_erweitert_modell label > span { float:right;}

.mass_bild_h1 {
		box-shadow: -5px 0 0 0 #658f38;
}

.mass_bild_h2 {		
		box-shadow: 5px 0 0 0 #658f38;
}
.mass_bild_b1 {		
		box-shadow: 0 5px 0 0 #658f38;
}
.mass_bild_b2 {		
		box-shadow: 0 -5px 0 0 #658f38;
}
.modelle img {max-width:60px;height:auto;width:auto;max-height:70px;}
.clear { clear: both; }

  body .konfigurator, .konfigurator p, .konfigurator li, .konfigurator td, .konfigurator select, .konfigurator input
, body #fancybox-content, #fancybox-content p, #fancybox-content li, #fancybox-content td
{
		
		color: #444444;
}



#fancybox-content {		/* nicht ".touchDevice #fancybox-content" - die Div Box mit IFRAM befindet sich ausserhalb der Klasse .touchDevice
		/* Diese Angabe ist dazu da, um auf dem IPad im IFrame (Modellbeschreibung) scrollen zu koennen   */
		-webkit-overflow-scrolling: touch;
		overflow: auto;
}

#custom-fancybox-close {
    background: url("/rollos/konfigurator/fancybox.png") repeat scroll -40px 0 rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 30px;
    z-index: 1103;
}

.touchDevice .box_properties_area img {
		/* dass man das auf den Geraeten besser druecken kann */
		width: 20px;
		height: 20px;
		vertical-align: top;
}

.touchDevice img[src*="frage_9"] {
		width: 14px;
        vertical-align: middle;
}
.touchDevice a, .touchDevice label {
		margin-top: 14px;
		line-height:14px;
}
input[type="radio"], input[type="checkbox"] {
		margin: 1em 1em 0 1em;
}
[onclick], input[type="radio"], input[type="checkbox"], label {
		cursor: pointer;
}

.ajax_lade {
		visibility: hidden;
}

.konfigurator {
		padding: 2.5%;
}

.konfigurator_box_main {
		border-top: 6px solid #cecece;
		border-left: 1px solid #cecece;
		border-right: 1px solid #cecece;
		border-bottom: 1px solid #cecece;
	
}

.tabelle_masse {
		width: 100%;
		border-spacing: 0;
}
		.tabelle_masse > tr > td, .tabelle_masse > tbody > tr > td {
				vertical-align: top;
				padding: 0;
		}

.schritt_ueberschrift {
		padding-left: 43px;
		font-weight: bold;
		margin-top: 2em;
		margin-bottom: 1em;
		position: relative;
}
		.schritt_ueberschrift_pfeil {
				position: absolute;
				left: 0;
				top: -1px;
		}
				.schritt_ueberschrift_pfeil_img {
						display: block;
				}
				.schritt_ueberschrift_pfeil_text {
						position: absolute;
						left: 13px;
						top: 1px;
						color: #ffffff;
				}

.schritt_box {
		margin-left: 43px;
		margin-top: 1em;
		padding-bottom: 12px;
}

		.tbl_design {
				border-spacing: 0;
		}
				.tbl_design > tr > td, .tbl_design > tbody > tr > td {
						vertical-align: top;
						padding-left: 0;
						padding-top: 0;
						padding-bottom: 0;
						padding-right: 10px;
				}

.masseingabe select {

		width: 150px;
}
.masseingabe input[type="text"], input[type="number"] {
		text-align: right;
		border: 1px solid #d1d1d1;
		border-radius: 3px;
		background-color: #f8f8f8;
		margin-left: 1em;
		box-shadow: inset 0 0 2px #dddddd;
		width:6em;

}

.masseingabe input[type="text"]:focus, .masseingabe input[type="number"]:focus {
		box-shadow: 0 0 3px #aaaaaa;
}
.touchDevice .masseingabe select, .touchDevice input[type="text"], .touchDevice input[type="number"] {		/* Platz fuer die Finger schaffen */
		margin-top: 0.4em;
		margin-bottom: 0.4em;
}


.konfigurator select {
		border: 1px solid #d1d1d1;
		border-radius: 3px;
		background-color: #f8f8f8;

}
.konfigurator select:focus {
		box-shadow: 0 0 3px #aaaaaa;
}


#dach_oder {

		font-weight: bold;
		margin-bottom: 20px;
		margin-top: 20px;
}

#auswahl_d_traeger {
		margin-top: 1em;
		display: none;
		opacity: 0;
}
		#auswahl_d_traeger input[type="checkbox"] {
				vertical-align: middle;
				margin: 0;
				padding: 0;
		}

/* Das grosse Stoffbild */

.big_bildbox {
		position: relative;
		margin: auto;
	/*	width: 302px;		/* die 2 Pixel sind dem Rahmen vom inneren Bild geschuldet, der den Massen aufaddiert wird */
		/*height: 402px;*/
}

		.big_bild, .big_layerbild {
				/*position: absolute;
				left: 0;
				top: 0;*/
				border: 1px solid #cccccc;
				width:98%;
				max-width: 300px;
				height: auto;
		}

		.big_lupe {
				position: absolute;
				right: 15px;
				top: 15px;
		}

		.big_nav_left, .big_nav_right {
				position: absolute;
				top: 190px;
		}
		.big_nav_left {
				left: 0;
		}
		.big_nav_right {
				right: 0;
		}

#bild_gr_preview {
		margin-top: 7px;
}
		#bild_gr_preview > img {
				border: 1px solid #cccccc;
				margin-right: 3px;
				width: 30px;
				height: 40px;
		}

#des_stoffprobe {
		text-align: center;
		margin-bottom: 5px;
}
		#des_stoffprobe button {
				background-color: #FFFFFF;
				border-color: #F8FFF8;

		}

#hinweis_farbe_abdeckkappen {
		display: none;
}

.hinweis {
		color: #FF0000;
		font-weight: bold;
}

#fenster_volant {
		color: #444444;
}
		#fenster_volant input[type="radio"] {
				margin-top: 0;
				vertical-align: bottom;
		}
		#fenster_volant > table {
				border-spacing: 0;
		}

		.volant_ueberschrift {
				padding: 1em;
				background-color: #cecece;
				position: relative;
				margin-bottom: 6px;
		}
				.volant_ueberschrift_ohne {
						position: absolute;
						right: 6px;
						top: 6px;
						background-color: #dd8903;
						border: 1px solid #ffffff;
						color: #ffffff;
						padding-top: 0.3em;
						padding-bottom: 0.3em;
						padding-left: 1em;
						padding-right: 1em;
				}

		.volant_list {
				margin: 0;
				padding-left: 2em;
				list-style-type: circle;
		}
		.volant_img {
				margin-top: 6px;
		}
		.volant_preis {
				text-align: center;
		}
		.volant_beschreibung {
				background-color: #f4f4f4;
				padding: 1em;
				width: 250px;
				vertical-align: top;
		}
		.volant_ueberschrift1 {
				font-weight: bold;
		}
		.volant_ueberschrift2 {
				margin-top: 1em;
				font-weight: bold;
		}
		.volant_cell {
				padding: 2em;
		}
		.volant_hr {
				height: 6px;
				border-bottom: 1px solid #d2d2d2;
		}
		.volant_ueberschrift_rechts {
				padding-top: 2em;
				padding-left: 2em;
				font-weight: bold;
		}

.abschlussprofil_wahl_box > div {
		display: inline-block;
		margin: 4px;
		width: 190px;
		vertical-align: top;
}
		.abschlussprofil_wahl_box > div:first-child {
				margin-left: 0;
		}
		.abschlussprofil_wahl_box > div:last-child {
				margin-right: 0;
		}
		.listAbschlussprofilHolz {

		}
				.listAbschlussprofilHolz > label {
						display: inline-block;
						margin-bottom: 1em;
				}

				.abschlussprofil_wahl_box img, .listAbschlussprofilHolz img {
						width: 190px;
				}

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

		.modellwahl td {
				padding: 0;
		}

		.modellwahl_ueberschrift_mass {
				font-weight: normal;
				background-color: #444;
				color: #ffffff;
				padding: 0.5em;
                border: 1px solid #cecece;
		}
		.modellwahl_ueberschrift_platzhalter {
				width: 7px;
		}
		.modellwahl_ueberschrift_standard {
				width: 108px;
				background-color: #cecece;
				text-transform: uppercase;
				font-weight: normal;
				color: #ffffff;
				padding: 0.5em;
				text-align: center;
		}

				.modelle {
						width: 100%;
						table-layout: fixed;
						border-spacing: 0;
				}
						.modelle li {
								padding: 0;
								text-align: center;
								word-wrap: break-word;
								background-color: #f4f4f4;
								border-top: 0;
								border-bottom: 0;
								border-left: 9px solid #f4f4f4;
								border-right: 9px solid #f4f4f4;
						}
								.modelle li div {
										padding: 4px;
										border-top: 9px solid #f4f4f4;
										border-bottom: 9px solid #f4f4f4;
										border-left: 0;
										border-right: 0;
								}
						.modelle li.modell_selected {
								background-color: #cecece;
								font-weight: bold;
								border-top: 0;
								border-bottom: 0;
								border-left: 9px solid #ffffff;
								border-right: 9px solid #ffffff;
						}
						.modelle li.modell_selected:first-child {
								border-left: 9px solid #cecece;
						}
						.modelle li.modell_selected:last-child {
								border-right: 9px solid #cecece;
						}
								.modelle li.modell_selected div {
										border-top: 9px solid #cecece;
										border-bottom: 9px solid #cecece;
										border-left: 0;
										border-right: 0;
								}

						.modelle li input[type="radio"] {
								margin: 10px;
								padding: 0;
						}

						.modellwahl_auswahl_standard {
								text-align: center;
								cursor: pointer;
								vertical-align: top;
						}
								.modellwahl_auswahl_standard > div {
										border: 1px solid #f4f4f4;
										height: 117px;
										padding: 4px;
										color: #888888;
										margin-top: 9px;
								}

#auswahl_modelltyp {
		margin-top: 1em;
		margin-right: 1em;
}

		#auswahl_modelltyp > table {
				table-layout: fixed;
				border-spacing: 0;
		}

				#auswahl_modelltyp > table > tr > td, #auswahl_modelltyp > table > tbody > tr > td {
						vertical-align: top;
						padding-top: 0;
						padding-bottom: 0;
						padding-left: 8px;
						padding-right: 8px;
				}

						.auswahl_modelltyp_relative {
								position: relative;
								/* width: 118px; */
								max-width: 130px;		/* so das "Soft-Mittelzug Automatik" in der Bezeichnung umbricht */
						}

								.auswahl_modelltyp {
										color: #a0a0a0;
										border: 1px solid #dedede;
										z-index: 1;
										background-color: #ffffff;
										/*
										transition: all 1s;
										-webkit-transition: all 1s;  geht leider nur teilweise */ /* Safari */
								}
								.auswahl_modelltyp_activated {
										color: #444444;
										box-shadow: 2px 2px 2px #999999;
								}

								.auswahl_modelltyp_highlighted {
										position: absolute;
										z-index: 2;
								}

										.auswahl_modelltyp_upper {
												text-align: center;
												margin: 1px;
												min-height: 100px;
										}

												.auswahl_modelltyp_bezeichnung {
														padding: 6px;
														background-color: #f4f4f4;
												}
												.auswahl_modelltyp_highlighted .auswahl_modelltyp_bezeichnung {
														font-weight: bold;
														color: #444444;
												}
												.auswahl_modelltyp_activated .auswahl_modelltyp_bezeichnung {
														font-weight: bold;
														color: #444444;
														background-color: #cecece;
												}

												.auswahl_modelltyp_kassettenform {
														width: 100%;
														border-spacing: 0;
														border-collapse: collapse;
														color: #888888;
														display: none;
												}
												.auswahl_modelltyp_highlighted .auswahl_modelltyp_kassettenform  {
														display: table;
												}
														.auswahl_modelltyp_kassettenform > tr > td, .auswahl_modelltyp_kassettenform > tbody > tr > td {
																padding-left: 0;
																padding-right: 0;
																padding-top: 6px;
																padding-bottom: 6px;
																border-top: 1px solid #cecece;
																border-bottom: 1px solid #cecece;
														}
														.auswahl_modelltyp_kassettenform > tr > td:first-child, .auswahl_modelltyp_kassettenform > tbody > tr > td:first-child {
																border-right: 1px solid #cecece;
														}
														.auswahl_modelltyp_kassettenform_td_activated {
																color: #444444;
																background-color: #f4f4f4;
														}
														.auswahl_modelltyp_img {
																margin-top: 2px;
																margin-left: 30px;
																margin-right: 30px;
																margin-bottom: 2px;
																width: 50px;
																height:68px;

																/* -ms-interpolation-mode: bicubic; */
																/* transform: rotate( .0001deg ); */
														}
														.auswahl_modelltyp_highlighted .auswahl_modelltyp_img {
																width: 150px;
																height:203px;
														}

												.auswahl_modelltyp_info {
														display: none;
														text-align: center;
														margin: 1em;
												}
														.auswahl_modelltyp_highlighted .auswahl_modelltyp_info {
																display: block;
														}
														.auswahl_modelltyp_info_link {
																cursor: help;
														}


										.auswahl_modelltyp_informationen {
												/*
												padding-left: 12px;
												margin: 10px;*/
												text-align: left;
												list-style-type: circle;
												display: none;
										}
										#modell_beschreibung_sidebar {margin-top:1em;}
										.auswahl_modelltyp_highlighted .auswahl_modelltyp_informationen, #modell_beschreibung_sidebar .auswahl_modelltyp_informationen {
												display: block;
										}
												.auswahl_modelltyp_informationen li {
														font-size: 10px;
														line-height:11px;
												}

										.auswahl_modelltyp_preis {
												text-align: right;
												padding-right: 7px;
												padding-top: 4px;
												padding-bottom: 4px;

												background-image: -webkit-linear-gradient(90deg, #ffffff 50%, #dedede 100%);
												background-image: -moz-linear-gradient(90deg, #ffffff 50%, #dedede 100%);
												background-image: -o-linear-gradient(90deg, #ffffff 50%, #dedede 100%);
												background-image: linear-gradient(90deg, #ffffff 50%, #dedede 100%);
										}
										.auswahl_modelltyp_highlighted .auswahl_modelltyp_preis {
												font-weight: bold;
										}
										.auswahl_modelltyp_activated .auswahl_modelltyp_preis {
												font-weight: bold;
										}

										.auswahl_modelltyp_waehlen {
												text-align: center;
												margin-top: 10px;
												margin-left: 20px;
												margin-right: 20px;
												margin-bottom: 10px;
												padding: 3px;
												border: 1px solid #ffffff;
												border-radius: 1px;
												box-shadow: 1px 1px 3px 0px #e0e0e0;
												display: none;
										}
										.auswahl_modelltyp_highlighted .auswahl_modelltyp_waehlen {
												display: block;
										}


.msg_keinerollomodelle {
		color: #888888;
		font-style: italic;
}

.konfigurator_link {
		color: var(--btn4Bg, #444);
		line-height: 2em;
		text-decoration: none;
}
		.konfigurator_link:before {
				content: "\00BB \00A0";
				color: var(--btn4Bg, #444);
		}
		.konfigurator_link > span{
				color: var(--btn4Bg, #444) !important;
				text-decoration: underline;
		}

		#btn_messen, #btn_dachfenstertypbestimmung {
				display: none;
		}

.sidebar_info {

		max-width: 124px;
		color: #888888;

}
		.sidebar_info > div {
				margin-top: 1em;
				border-left: 1px solid #cecece;
				border-bottom: 1px solid #cecece;
				position: relative;

				background-image: -webkit-linear-gradient(45deg, #f4f4f4 0%, #ffffff 50%);
				background-image: -moz-linear-gradient(45deg, #f4f4f4 0%, #ffffff 50%);
				background-image: -o-linear-gradient(45deg, #f4f4f4 0%, #ffffff 50%);
				background-image: linear-gradient(45deg, #f4f4f4 0%, #ffffff 50%);

				padding: 1em;
		}
				.sidebar_info > div .icon_achtung {
						position: absolute;
						left: -13px;
						top: -3px;
				}

		#hinweisbilder img {
				margin-top: 1em;
				margin-bottom: 1em;
		}

		.hinweisbox {
				margin-top: 1em;
				margin-bottom: 1em;
		}

		.hinweisbild_fluegeltyp {
				display: none;
				margin-top: 1em;
				margin-bottom: 2em;
		}
		
		#hinweis_selbstklebend img {
				float:left;
				margin-right:5px;
		}

#link_modellbeschreibung {
		position: relative;
		margin-left: 30px;
		color: var(--btn4Bg, #444);
		font-weight: normal;
}
		#link_modellbeschreibung > img {
				vertical-align: middle;
			  border: 0;
			  display: inline;
		}
		#link_modellbeschreibung > span {

				color: var(--btn4Bg, #444);
		}

#bemassung_bild {
		max-width: 80%;
		width:auto;
		margin-top: 20px;
		line-height: 0;
}
#bemassung_bild svg {
    width: 100%;
    height: auto;
}
.zsf {
		width: 260px;
		margin-left: auto;
		margin-right: 0;
		margin-bottom: 1em;
		text-align: right;
}

		.zsf_info {
				background-color: #cecece;
				padding: 10px;
		}
				#einzelpreis {
						font-size: 20px;
						font-weight:bold;
				}
				.zsf_menge {
						width: 40px;
						border: 0;
						border-radius: 1px;
						margin-top: 4px;

				}
				.plusminus {
						border: 0;
						width: 7px;
						height: 15px;
						vertical-align: bottom;
				}

		.notizen {
				width: 100%;
				margin: 0;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
				   -ms-box-sizing: border-box;
						box-sizing: border-box;
				padding: 4px;
				border-left: 1px solid #D8D8D8;
				border-right: 1px solid #D8D8D8;
				border-top: 0;
				border-bottom: 0;

		}


		.warenkorb_btn {
				background-color: var(--btn4Bg, #444);
				border-color: var(--btn4Bg, #444);
				border-width: 1px;
				color: #FFFFFF;
                background-position:left center;
				text-align: right;
				width: 100%;
				position: relative;
				font-size: 16px;
		}
				.warenkorb_btn .warenkorb_text {
						font-weight: bold;
						text-transform: uppercase;
						font-size: .8em;
				}
				.warenkorb_btn img {
						position: absolute;
						left: 15px;
						top: 15px;
				}
#auswahl_seitenfuehrung  {vertical-align:top;overflow:hidden;}
#auswahl_seitenfuehrung  select {padding:12px; margin:-5px -24px -5px -5px;}
#auswahl_befestigungen table {
		border-spacing: 0;
}
		#auswahl_befestigungen table td {
				vertical-align: middle;
		}
		.befestigung_gruppe {
				/*border-bottom: 1px dotted #444444;*/
		}

.box_optionen {
		background-color: #f4f4f4;
		padding-top: 12px;
		padding-right: 12px;
		padding-bottom: 12px;
		margin-top: 5px;
		margin-bottom: 5px;
		/*width: 28%;
		float:right;*/
}
		.box_optionen input[type="text"] {
				border-width: 1px;
		}
		.box_optionen input[type="checkbox"] {
				margin-left: 4px;
				margin-right: 3px;
				margin-top: 2px;		/* wenn die Zeile durch dieses Element zu gross wird funktioniert das floaten nicht richtig */
				margin-bottom: 2px;
		}
		
		.box_optionen > table {
				border-spacing: 0;
				width: 100%;
		}
				/* .box_optionen > table > tr > td, .box_optionen > table > tbody > tr > td { */
				.box_optionen td {			/* gilt jetzt auch fuer Unter-Tabellenzellen, z.B. bei Einfall(, Einlauf)profil */
						vertical-align: middle;
				}
						.optionen {
							/*	white-space: nowrap;*/
								padding-left: 1ex;
								padding-right: 1ex;
								display: none;
								float: left;
								margin-left: 12px;
								margin-top: 1em;
								max-width: 500px;
						}
						#hinweis_montagearten {
    white-space: normal !important;
	max-width: 220px;
	width: 220px;
	margin-top:1em;
	font-weight:bold;
}
						.optionen.klappbox {float:right;margin-left:0;}
						#auswahl_befestigung, #auswahl_profilunten {
								white-space: normal;
						}
						#auswahl_bedienseite_getrennt {margin-left:0;}

						.box_optionen > table > tr > td select, .box_optionen > table > tbody > tr > td select {

						}

				.optionen_ue {

						margin-top: 8px;
						margin-bottom: 4px;
						font-weight: bold;
				}

		#id_profilfarbe_wahl, #id_bedienfarbe_wahl {
				width: 10px;
				height: 10px;		/* nicht groesser machen, sonst wirds im IE 9/10 zu gross und die nachfolgenden Boxen werden daneben, statt da drunter gefloatet */
				border: 1px solid #000000;
				display: inline-block;
				vertical-align: middle;
		}

		#auswahl_traegerprofil {
				margin-bottom: 0.5em;
		}

		.box_optionen_box {
				display: block;
				padding: 0.5em;
				background-color: #ffffff;
				border-left: 1px solid #cecece;
				border-right: 1px solid #cecece;
				border-bottom: 1px solid #cecece;
		}

				.box_optionen_box img {
						float: left;
						margin-right: 1em;
						width: 100%;
				}
		.box_optionen_select {
				background-color: #f0f0f0;
				background-image: -webkit-linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 50%, #e9e9e9 50%, #e9e9e9 100%);
				background-image: -moz-linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 50%,#e9e9e9 50%, #e9e9e9 100%);
				background-image: -o-linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 50%,#e9e9e9 50%, #e9e9e9 100%);
				background-image: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 50%,#e9e9e9 50%, #e9e9e9 100%);
				border-left: 1px solid #cecece;
				border-right: 1px solid #cecece;
				border-bottom: 1px solid #cecece;
				position: relative;
		}
				.box_optionen_select > table {
						width: 100%;
						border-spacing: 0;
				}
						.box_optionen_select > table td {
								padding: 0;
						}
						.box_optionen_select > table td:first-child {
								padding-left: 1em;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
						}
						.box_optionen_select > table td:last-child {
								width: 15px;
								background-color: #ffffff;
								text-align: center;
								vertical-align: middle;
						}

.sprechblase {

		display: block;		/* ueberschreibt die Angabe in der Haupt-Css-Datei (css.css) */
		padding: 1em;
z-index:999999;
width:auto;
		border: 1px solid #ff0000;
		position: absolute;
		text-align: left;

		/*
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		*/
		background: #ffffff;
		color: #000000;
		top: 0;
		left: 0;

		background-image: -webkit-linear-gradient(166deg, #ffffff 47%, #dddddd 100%);
		background-image: -moz-linear-gradient(166deg, #ffffff 47%, #dddddd 100%);
		background-image: -o-linear-gradient(166deg, #ffffff 47%, #dddddd 100%);
		background-image: linear-gradient(166deg, #ffffff 47%, #dddddd 100%);
}
		.sprechblase:before {
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: 10px;
				bottom: -14px;
				border: 7px solid;
				border-color: #ff0000 transparent transparent #ff0000;
		}
		.sprechblase.gruen:before {
				
				border-color: #0f0 transparent transparent #0f0;
				
		}
		
		.sprechblase:after {
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: 11px;
				bottom: -12px;
				border: 6px solid;
				border-color: #ffffff transparent transparent #ffffff;
		}
		


#stoffwahl_spalte_stoffe {
		vertical-align: top;
		width: 40%;
}

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

#stoffwahl_spalte_bild {
		padding-left: 2em;
		padding-right: 1em;
		vertical-align: top;
}

#stoffwahl_spalte_text {
		vertical-align: top;
	/*	width: 20%;*/
		color: #808080;
}
/*
#liste_stoffe_container {
		width: 136px;
		overflow: hidden;
		height: 600px;
}
*/

#liste_stoffe {
		overflow: auto;
		height: 389px;
		position: relative;		/* position: relative ist fuer den IE7, sonst fliegen die Stoffe statisch aus der Div-Box */
}


.stoffeZurAuswahl {
		padding: 2px;
		color: #444444;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
}

/*
		Farbuebersicht.css
*/

		/* Einschraenkung der Eigenschaften */

		.hover_underline:hover {
				text-decoration: underline;
		}

		.farbuebersicht_headline {
				background-color: #cecece;
				color: #444444;
				padding: 0.5em;
				font-size: 1.2em;
				position: relative;
		}
				#suchfeld {
						border-width: 1px;
						color: #cccccc;

						width: 88px;
						position: absolute;
						right: 6px;
						top: 6px;
				}

		#farbuebersicht_head {
				height: 65px;
				position: relative;
				z-index: 3;
				/*min-width: 642px;*/
				background-color: #f4f4f4;
				border-bottom: 1px solid #cecece;
		}

		#text_before {
				color: #666666;
				margin-top: 1em;
				margin-bottom: 1em;
		}

		#text_after {
				margin-top: 20px;
				margin-bottom: 20px;
		}

		.box_group {
				top: 26px;
				left: 0;
				position: absolute;
				z-index: 19;
				height: 0;		/* das wird fuer Touch-Geraete benoetigt - wenn die Box zu gross ist und andere Elemente verdeckt koennen die nich mehr getoucht werden die inneren Elemente ragen heraus */
		}

		.box_properties {
				float: left;
				color: #595959;
				z-index: 13;
				margin-left: 13px;
		}

				body { behavior: url('/autosites/csshover3.htc'); }		/* only IE, ahmt das Hover-Verhalten nach! */

				.box_properties:hover .box_properties_area {
						display: block;
				}

		.box_properties_head {
				width: 100%;
				border-spacing: 0;
				background-color: #ffffff;
				border: 1px solid #d2d2d2;
				position: relative;
				z-index: 12;
		}
				.box_properties_head_bez {
						text-align: left;
						padding-left: 6px;
						padding-top: 0;
						padding-bottom: 0;
						padding-right: 0;
						cursor: default;		/* sonst machen die Browser es zu 'text', was hier nicht so gut passt */
				}
				.box_properties_head_img {
						text-align: center;
						padding-top: 0;
						padding-bottom: 0;
						background-color: #888888;
						width: 13px;
				}


		.box_properties_area {
				background-color: #ffffff;
				border: 1px solid #dcdcdc;
				margin-top: 2px;
				padding: 4px;
				position: relative;
				display: none;
				position: relative;
				z-index: 10;
		}

				.box_properties_area table {
						width: 100%;
						z-index: 9
				}
				.box_properties_area div {
						z-index: 9
				}

		#farbuebersicht_head_volant {
				position: absolute; top: 15px; right: 10px;
		}

		#farbuebersicht_head_sonderpreise {
				position: absolute; top: 34px; right: 10px;
		}

		@media all and (max-width: 980px) {
				#farbuebersicht_head_volant {
						position: absolute; top: 2px; right: 10px;
				}

				#farbuebersicht_head_sonderpreise {
						position: absolute; top: 2px; right: 10px;
				}
		}

		/* Listing der Stoffe */

		#liste_stoffe table {
				table-layout: fixed;
				width: 100%;
		}

				.listing_box {
						color: #888888;
						vertical-align: top;
						text-align: center;
						padding-top: 4px;
						padding-bottom: 4px;
						float:left;
						min-height: 85px;
						width: 23%;
						border: 1px solid transparent;		/* damit beim Mouseover, wennd der Rahmen hinzugerechnet wird, die Box nicht so komisch "springen" */
				}
				.listing_box input[type=radio] {display:none;}
				.listing_box:hover {
						border: 1px solid #cecece;
				}

						.listing_box img {
								border: 1px solid #cccccc;
						}
				.listing_box_activated {
						background-color: #cecece;
						color: #444444;
				}
						.listing_box_activated img {
								border: 1px solid #ffffff;
						}

		.msg_notfound {
				color: #666666;
				font-style: italic;
				margin-top: 60px;
				text-align: center;
		}

		.design_kl {			/* im Konfigurator */
				position: relative;
				margin-left: auto;
				margin-right: auto;
		}
				.design_kl img {
						display: inline-block;

				}
				.design_kl_system {
						position: absolute;
						text-align: center;
						top: 10px;
						left: 0;
				}
		.design_kl, .design_kl img, .design_kl_system {
				width: auto;
		}
		.design_kl, .design_kl img {
				height: 45px;
				margin: 5px 0;
		}

		.bild_kl {			/* bei der Stoffwahl */
				position: relative;
				width: auto;
				height: 40px;
				margin-left: auto;
				margin-right: auto;
		}
				.bild_kl_img {
						display: inline-block;
						width: 60px;
						height: auto;
				}
				.bild_kl_system {
						width: 60px;
						position: absolute;
						text-align: center;
						top: 10px;
						left: 0;
				}
				.bild_kl_na {		/* klein not avalable */
						position: absolute;
						left: 0;
						top: 0;
				}


/*
		Ende Farbuebersicht

*/
input[type="text"]:disabled, input[type="number"]:disabled {
		border:0!important;
		box-shadow: 0 0 0!important;
		background-color: #f4f4f4;
}
#stoffwahl_des_head {
		position: relative;
}
		#stoffwahl_des_head .ajax_lade {
				position: absolute;
				right: 20px;
				top: 0;
		}

		#stoffwahl_des_bez {

				font-weight: bold;
				color: #444444;
		}

		#stoffwahl_des_ersetzt_bez {
				display: none;

				color: #444444;
				font-style: italic;
		}

		#stoffwahl_des_versandzeit {
				margin-top: 1em;
				color: #444444;
		}

.stoffauswahl_bottom_hinweise {
		color: #888888;
		margin-top: 2em;
}

.stoffwahl_des_ue {
		padding-top: 10px;
		padding-bottom: 10px;
		border-top: 1px solid #d2d2d2;
		color: #444444;
}

.stoffwahl_des_box {
		overflow: auto;
		display: none;
		padding: 10px;

}

#des_bez {

		font-weight:bold;
}

.msg_nichtverfuegbar {
		font-style: italic;
}

#des_bild_kl {
		text-align: center;
}

.stoffauswahl_bottom {
		text-align: right;
		margin-top: 1em;
}
		.stoffauswahl_bottom > div {
				background-color: #444444;
				color: #ffffff;
				border: 1px solid #ffffff;
				width: 80px;
				margin-left: auto;
				margin-right: 4px;		/* um den Schatten noch zu sehen */
				margin-bottom: 4px;
				text-align: center;
				padding: 4px;
				box-shadow: 0 0 6px #d3d3d3;
				position: relative;
		}
				.stoffauswahl_bottom > div > div {
						position: absolute;
						right: 7px;
						top: 3px;
				}

.button-design {/* font-family:Tahoma */;padding:1px 1px 1px 8px;background:#333;color:#fff;margin-top: 1em;display:inline-block;width:150px;line-height:20px;border: 1px solid #333;}
.button-design span {/* font-family:Tahoma */;float:right;font-size:20px;}
.button-design-muster {/* font-family:Tahoma */;padding:1px 1px 1px 8px;background:#fff;color:#333;margin-top: 1em;display:inline-block;width:150px;line-height:20px;border: 1px solid #333;}
.button-design-muster span {/* font-family:Tahoma */;float:right;font-size:20px;}
.button-design, .button-design-muster {
	padding:1em;
	width:100%;
}
.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;
		}
		
		
/* aus der Datei /css/layout_rollo.css fuer den Text unter dem Konfigurator */

.text_unten { margin-top: 40px; }
.text_unten p {margin-top:10px; color:#444444; text-align:justify}
.text_unten h1 {color:#444444; text-align:left; font-weight:lighter;}

/* Ende Datei /css/layout_rollo.css */
@media all and (max-width: 1020px) {
						ul.modelle li {
								width:17%;
						}
						
				}
@media all and (max-width: 790px) {
						ul.modelle li {
								width:16%;
						}
						.listing_box {
						
								max-width:49%;
								
						}
						
				}
@media all and (max-width: 630px) {
						.modellwahl tr {
						  display: flex;
						  flex-wrap: wrap;
						}
						.modellwahl_ueberschrift_mass {
						  width: 100%;
						}
						th.modellwahl_ueberschrift_standard {display:none;}
						td.modellwahl_auswahl_standard {display:inline;}
						#modellwahl_auswahl_standard_bez::before {
						  content: "Alternativ: ";
						  display: inline;
						}
						.tabelle_masse > tr > td, .tabelle_masse > tbody > tr > td {
						  vertical-align: top;
						  padding: 0;
						  max-width: none !important;
						  display: flex;
						  flex-direction: row;
						  flex-wrap: wrap;
						}
						.tbl_design td {float:left;}
				}

@media all and (max-width: 500px) {
						select {
						  width: 100%;
						}
						.modelle input[type=radio], .modelle img, .tabelle_masse > tr > td, .tabelle_masse > tbody > tr > td.sidebar_info {display:none;}
						.schritt_box {
							margin-left: 4px;

						}
						.important_notices_open {display:block;}
						.schritt_ueberschrift {padding-left:4px;display: block; width: 100%;}
						/*.bildmasslink {display:inline-block;}*/ 
						ul.modelle li {
								width:16%;
								overflow:hidden;
						}
						.schritt_ueberschrift_pfeil {display:none;}
						#farbuebersicht_head {height:100px;}
						.box_properties {margin-top:10px;}
						/*
						.sidebar_info {
							width:300px;
							position:absolute;
							background:#0f0;
							right: -100px;
							z-index:99999;
						}
						.sidebar_info:hover {
							background:transparent;
							right: -1px;
							
						}*/
						.listing_box {
						
								max-width:99%;
								
						}
				}
@media all and (max-width: 410px) {
						
						ul.modelle li {
								width:43.5%;
						}

				}