/*
		16.10.2026	Claude (KI)	Umbau Jalousie-Konfigurator (Layout/Accordion und Modulaufbau wie Rollo, Plissee, Insektenschutz): 2-spaltiges Layout mit Accordion, Praefix jalousie_, unbenutzte Selektoren, IE-, Volant- und Rollo-Reste entfernt, Warenkorb-Fenster, SEO-Texte in der rechten Spalte, Preis-/Warenkorbbox sticky, Test-Schieberegler (b1_slide usw.) entfernt, auskommentierten Alt-Code entfernt, Zeile Profil-/Schienenfarbe (Farbfeld und Auswahl) unabhaengig von den Shop-Grundeinstellungen
*/

@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;
}
.anzTraeger {}
ul.modell_typen li:only-child {
    display: none;
}
.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;
}
#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;

}
.empfohlene_auswahl, .hinweis_empfohlen {text-shadow: 0 0 0 #000;}

.befestigung_gruppe, optgroup {
	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;
}
#auswahl_befestigungen td[colspan="2"], #auswahl_seitenfuehrungen td[colspan="2"] {
    margin-bottom: 5px;
    padding-bottom: 0;
	border-bottom: 1px dotted #888;
}
.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;
    width: 150px;
}
ul.stegband, .mass_erweitert ul, ul.modell_typen, ul.modelle {list-style-type:none;padding:0;margin:0;}
ul.stegband li, ul.modell_typen li {padding:5px;float:left;}
		ul.auswahl_modelltyp_informationen li {padding:3px;float:none;}
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;
}
.clear { clear: both; }

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


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


		.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;		08.01.2026 - Tim - habe im Konfigurator keinen Fall mehr gesehen wo das noch passt */
		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;
}


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

		}


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


						.auswahl_modelltyp_relative {
								position: relative;
								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;
								}
								.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_img {
																margin-top: 2px;
																margin-left: 30px;
																margin-right: 30px;
																margin-bottom: 2px;
																width: 50px;
																height:68px;


														}
														.auswahl_modelltyp_highlighted .auswahl_modelltyp_img {
																width: 150px;
																height:203px;
														}


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


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


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

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


#auswahl_seitenfuehrung  {vertical-align:top;overflow:hidden;}
#auswahl_befestigungen table {
		border-spacing: 0;
}
		#auswahl_befestigungen table td {
				vertical-align: middle;
		}
		.befestigung_gruppe {
		}

						.optionen {
								display: none;		/* wird per Javascript je nach Modell eingeblendet */
								margin: 0 0 1.2em 0;
						}
						#hinweis_montagearten {
    white-space: normal !important;
	margin-top:1em;
	font-weight:bold;
}
						#auswahl_befestigung {
								white-space: normal;
						}
						#auswahl_bedienseite_getrennt {margin-left:0;}


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


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

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


/*
		Farbuebersicht.css
*/


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


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

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


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

				}
		.design_kl, .design_kl img {
				width: auto;
		}
		.design_kl, .design_kl img {
				height: 45px;
				margin: 5px 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;
}


#des_bez {

		font-weight:bold;
}


#des_bild_kl {
		text-align: center;
}


.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: 500px) {
		select {
				width: 100%;
		}
}


/* ========================================================================== */
/*
		Layout fuer den Jalousie-Konfigurator: 2 Spalten mit Accordion (angelehnt an Rollo / Plissee Window Fashion AG)
		- links das konfigurierte Modellbild (mitlaufend), rechts die Eingabe im Accordion
		- Preis/Warenkorb am Ende der rechten Spalte, beim Scrollen unten mitlaufend (sticky), im einspaltigen Layout (<= 800px) am Ende der Eingabe
*/

:root {
		--jalousie-kopfhoehe: 54px;		/* wird per JS auf die Hoehe des Seitenkopfs gesetzt */
		--jalousie-schrift-ue: "Roboto Slab", Roboto, sans-serif;
		--jalousie-grau-dunkel: #444444;
		--jalousie-grau: #888888;
		--jalousie-linie: #cecece;
		--jalousie-hell: #f5f5f5;
}

#spalten2.jalousie_layout {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 3%;
		width: 100%;
		box-sizing: border-box;
		padding: 1em 2% 0 2%;
}

/* ***** linke Spalte: Modellbild ***** */

#spalten2.jalousie_layout #visualisierung {
		flex: 1 1 0;
		min-width: 0;
		position: sticky;
		top: calc(var(--jalousie-kopfhoehe) + 1em);
		text-align: center;
}
		#spalten2.jalousie_layout #modellbild_ueberschrift {
				text-align: left;
				margin-bottom: 1em;
				font-size: 16px;
		}
				#spalten2.jalousie_layout #modellbild_ueberschrift .ueberschrift2 {
						font-weight: bold;
				}
		#spalten2.jalousie_layout .bemassung_bild {
				padding: 0 0 1em 0;		/* ohne grauen Rahmen wie bei Rollo/Plissee - die Zeichnung hat schon eine eigene weisse Flaeche */
				box-sizing: border-box;
		}
				#spalten2.jalousie_layout #bemassung_bild {
						--jalousie-bild-verhaeltnis: 0.74;		/* Breite / Hoehe der Zeichnung, wird beim Laden des Bildes aus der viewBox gesetzt (konfigurator.js getSvg) */
						display: inline-block;		/* der Hintergrund (Lamellenfarbe) soll nur hinter dem Bild liegen */
						width: auto;
						max-width: 100%;
						margin: 0 auto;
						vertical-align: top;
				}
						#spalten2.jalousie_layout #bemassung_bild svg,
						#spalten2.jalousie_layout #bemassung_bild img {
								/*
										Hoehe nach dem Fenster (220px bis 650px), die Breite ergibt sich aus dem Seitenverhaeltnis der Zeichnung.
										Die Hoehe wird nicht fest gesetzt, sondern folgt der Breite: wird das Bild in einer schmalen Spalte kleiner (max-width),
										wird es auch niedriger - sonst bleibt ueber und unter der Zeichnung leerer Platz, in dem die Lamellenfarbe als Balken zu sehen ist
								*/
								display: block;		/* kein Freiraum unter dem Bild (Grundlinie), in dem die Hintergrundfarbe durchscheint */
								width: calc(clamp(220px, 100vh - var(--jalousie-kopfhoehe) - 230px, 650px) * var(--jalousie-bild-verhaeltnis));
								max-width: 100%;
								height: auto;
								aspect-ratio: var(--jalousie-bild-verhaeltnis);
						}
		#spalten2.jalousie_layout .visualisierung_links {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 0.5em 2em;
				margin-top: 1em;
				font-size: 14px;
		}
				#spalten2.jalousie_layout .visualisierung_links img {
						height: 18px;
						vertical-align: middle;
						margin-right: 0.3em;
				}


/* ***** rechte Spalte: Eingabe ***** */

#spalten2.jalousie_layout #eingabe {
		flex: 1 1 0;
		min-width: 0;
		padding-bottom: 2em;
		text-align: left;
}
		#spalten2.jalousie_layout #eingabe .bereichsueberschrift {
				background-color: var(--jalousie-grau-dunkel);
				color: #ffffff;
				font-family: var(--jalousie-schrift-ue);
				font-size: 16px;
				font-weight: normal;
				padding: 1em;
				margin: 0 0 0.4em 0;
		}

		/* Accordion-Ueberschriften */
		#spalten2.jalousie_layout .accordion_ueberschrift {
				display: none;
				justify-content: space-between;
				align-items: center;
				position: relative;
				margin: 0;
				padding: 18px 0;
				border-top: 1px solid var(--jalousie-linie);
				cursor: pointer;
				font-family: var(--jalousie-schrift-ue);
				font-size: 18px;
				font-weight: normal;
				color: var(--jalousie-grau);
				user-select: none;
		}
				#spalten2.jalousie_layout .accordion_ueberschrift.visible {
						display: flex;
				}
				#spalten2.jalousie_layout #accordion > .accordion_ueberschrift.visible:first-child,
				#spalten2.jalousie_layout .bereichsueberschrift + #accordion > .accordion_ueberschrift:first-child {
						border-top: 0;
				}
				#spalten2.jalousie_layout .accordion_ueberschrift.open {
						color: var(--jalousie-grau-dunkel);
						font-weight: bold;
				}
				#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltIcon {
						flex: 0 0 auto;
						width: 22px;
						height: 22px;
						margin: 0 14px 0 8px;		/* in px statt em: die Ueberschrift ist 18px gross, 1em Abstand zum Titel war zu weit */
				}
				#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltUe {
						flex: 1 1 auto;		/* fuellt den Platz bis zur Zusammenfassung - so steht der Haken immer am rechten Rand (Woerter werden nicht getrennt, schmaler wird die Zusammenfassung) */
						padding-right: 1em;		/* ein langer Titel (z.B. "Montage / Befestigung") bricht um, damit die Zusammenfassung daneben genug Platz hat */
				}
				#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltBez {
						display: -webkit-box;		/* hoechstens zwei Zeilen, danach "..." - die vollstaendige Auswahl steht im aufgeklappten Abschnitt */
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						overflow: hidden;
						flex: 0 1 auto;
						max-width: 45%;		/* eine lange Zusammenfassung bricht um (hoechstens zwei Zeilen), statt den Haken aus der Zeile zu schieben */
						min-width: 0;		/* darf schmaler werden als ihr laengstes Wort - der Titel daneben nicht */
						font-style: italic;
						font-weight: normal;
						font-size: 90%;
						text-align: right;
						color: var(--jalousie-grau);
				}
						#spalten2.jalousie_layout .accordion_ueberschrift.open .eingabeGewaehltBez {
								color: var(--jalousie-grau-dunkel);
						}
						#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltBez .alert {
								color: #ff4444;
						}
				#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltHaken {
						flex: 0 0 auto;
						width: 24px;
						height: 24px;
						margin: 0 0.5em 0 1em;
				}

		/* Accordion-Inhalt */
		#spalten2.jalousie_layout .eingabeBox {
				display: none;
				margin: 0 0 1em 0;
				padding: 0.5em 0 0.5em 2em;
				box-sizing: border-box;
				font-size: 15px;
		}
				#spalten2.jalousie_layout .eingabeBox .jalousie_teil + .jalousie_teil {
						margin-top: 1em;
				}
				#spalten2.jalousie_layout .groupButtonsBottom {
						text-align: right;
						margin-top: 2em;
				}
						#spalten2.jalousie_layout .jalousie_weiter {
								background-color: #ffffff;
								border: 1px solid #2c6aa0;
								color: var(--jalousie-grau-dunkel);
								font-size: 16px;
								padding: 0.6em 2.5em;
								cursor: pointer;
						}
								#spalten2.jalousie_layout .jalousie_weiter:hover {
										background-color: #2c6aa0;
										color: #ffffff;
								}

		/* Eingabefelder */
				/* Profil-/Schienenfarbe: Farbfeld und Auswahl in einer Zeile - alle Werte ausdruecklich setzen, weil Shops fuer select unterschiedliche Grundeinstellungen haben (z.B. width: 100%) */
				#spalten2.jalousie_layout .jalousie_profilfarbe_zeile {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						gap: 0.6em;
						max-width: 100%;
				}
				#spalten2.jalousie_layout .jalousie_profilfarbe_zeile #id_profilfarbe_wahl {
						flex: 0 0 auto;
						width: 1.8em;
						height: 1.8em;
						margin: 0;
						float: none;
						box-sizing: border-box;
						border: 1px solid var(--jalousie-linie, #d1d1d1);
						border-radius: 3px;
						background-size: cover;
				}
				#spalten2.jalousie_layout .jalousie_profilfarbe_zeile #select_profilfarbe {
						flex: 1 1 auto;
						width: auto;
						min-width: 0;
						max-width: 100%;
						margin: 0;
						float: none;
						vertical-align: middle;
				}
				#spalten2.jalousie_layout .eingabeBox select,
				#spalten2.jalousie_layout .eingabeBox input[type=number] {
						font-size: 15px;
						padding: 0.4em;
						border: 1px solid var(--jalousie-linie);
						box-sizing: border-box;
						max-width: 100%;
				}
				#spalten2.jalousie_layout .eingabeBox select {
						min-width: 220px;
				}

		/* Wahl des Schienensystems als Kacheln ohne Rahmen und Trennlinien - bei 3 + 2 Kacheln liefen die Linien der beiden Zeilen versetzt */
		#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				list-style: none;
		}
				#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle > a {
						display: contents;
						color: inherit;
						text-decoration: none;
				}
				#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li {
						flex: 1 1 0;
						min-width: 90px;
						width: auto;
						margin: 0;
						padding: 0;
						border: 0;
						background-color: #ffffff;
						cursor: pointer;
						text-align: center;
						font-size: 15px;		/* wie der uebrige Text in den Abschnitten */
				}

						#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li:hover {
								background-color: #f9f9f9;
						}
						#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li div {
								border: 0;
								padding: 0.8em 0.4em;
						}
						#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li.modell_selected {
								background-color: #ffffff;		/* markiert durch fette Schrift und das farbige Vorschaubild */
								font-weight: bold;
						}
						#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li img {
								mix-blend-mode: multiply;		/* die weisse Flaeche der Vorschaubilder nimmt die Hintergrundfarbe der Kachel an (z.B. beim Ueberfahren mit der Maus) */
								display: block;
								margin: 10px auto 0 auto;		/* etwa so viel Abstand zur Bezeichnung wie oben und unten in der Kachel */
								max-height: 76px;
								max-width: 90px;
						}
						#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li br {
								display: none;		/* die Zeilenumbrueche im HTML ergaben eine Leerzeile zwischen Bezeichnung und Bild (das Bild steht ohnehin als Block darunter) */
						}
				#spalten2.jalousie_layout .modellwahl_auswahl_standard {
						display: flex;
						align-items: center;
						gap: 0.6em;
						margin-top: 30px;		/* so viel Abstand wie darunter bis zum Weiter-Button (.groupButtonsBottom) - die Standardgroessen sind ein eigenes Angebot */
						font-size: 13px;
						color: var(--jalousie-grau);
						cursor: pointer;
						text-align: left;
				}
						#spalten2.jalousie_layout .modellwahl_auswahl_standard br {
								display: none;
						}
						#spalten2.jalousie_layout .modellwahl_auswahl_standard img {
								height: 24px;
								width: auto;
						}
						#spalten2.jalousie_layout .modellwahl_auswahl_standard .jalousie_alternativ_ue {
								font-weight: bold;
						}

		/* Modell-Typen (Rechteck, Slope, Trapez, ...) als umbrechende Kacheln */
		#spalten2.jalousie_layout #auswahl_modelltyp {
				margin: 0;
		}
				#spalten2.jalousie_layout .auswahl_modelltyp_bezeichnung {
						font-size: 15px;		/* wie der uebrige Text in den Abschnitten */
				}
				#spalten2.jalousie_layout .auswahl_modelltyp_preis {
						font-size: 14px;
				}
				#spalten2.jalousie_layout #auswahl_modelltyp > table,
				#spalten2.jalousie_layout #auswahl_modelltyp > table > tbody,
				#spalten2.jalousie_layout #auswahl_modelltyp > table > tbody > tr,
				#spalten2.jalousie_layout #auswahl_modelltyp > table > tr {
						display: flex;
						flex-wrap: wrap;
						width: 100%;
						gap: 0.6em;
				}
						#spalten2.jalousie_layout #auswahl_modelltyp > table td {
								display: block;
								padding: 0 !important;
						}

		/* Masse: Beschriftung so gross wie der uebrige Text */
		#spalten2.jalousie_layout .mass_erweitert label {
				font-size: 15px;
		}

		/* Befestigung und Seitenfuehrung: Optionsfeld oben an der ersten Textzeile, Info-Symbol direkt hinter dem Text */
		#spalten2.jalousie_layout #auswahl_befestigungen td,
		#spalten2.jalousie_layout #auswahl_seitenfuehrungen td {
				vertical-align: top;
		}
				#spalten2.jalousie_layout #auswahl_befestigungen td input[type=radio],
				#spalten2.jalousie_layout #auswahl_seitenfuehrungen td input[type=radio] {
						margin-top: 3px;		/* (Zeilenhoehe 17px - Optionsfeld 13px) / 2 + 1px, weil die Schrift in der Zeile etwas tiefer sitzt */
				}
				#spalten2.jalousie_layout #auswahl_befestigungen label,
				#spalten2.jalousie_layout #auswahl_seitenfuehrungen label {
						display: inline;
						font-size: 15px;		/* wie der uebrige Text */
				}
				#spalten2.jalousie_layout #auswahl_befestigungen td img,
				#spalten2.jalousie_layout #auswahl_seitenfuehrungen td img {
						height: 1.2em;		/* so hoch wie der Text (die Datei ist 24px hoch) - sonst wird die Zeile hoeher und der Text rutscht unter das Optionsfeld */
						width: auto;
						vertical-align: text-bottom;
				}

		/* Laenge der Bedienelemente: je Element eine Zeile "Bezeichnung [Auswahl] mm" */
		#spalten2.jalousie_layout label.jalousie_bedienlaenge {
				display: flex;
				align-items: center;
				gap: 0.5em;
				margin: 0.4em 0;
				font-size: 15px;		/* wie der uebrige Text */
		}
				#spalten2.jalousie_layout label.jalousie_bedienlaenge > span {
						flex: 0 0 7em;
				}
				#spalten2.jalousie_layout label.jalousie_bedienlaenge select,
				#spalten2.jalousie_layout label.jalousie_bedienlaenge input {
						min-width: 0;
						width: 8em;
				}
				#spalten2.jalousie_layout label.jalousie_bedienlaenge input {
						text-align: left;		/* wie der Wert in der Auswahlliste (z.B. Wendestab) - das Eingabefeld (z.B. Schnur) waere sonst rechtsbuendig */
				}

		/* Hinweise (ehemals rechte Seitenleiste) */
		#spalten2.jalousie_layout .sidebar_info .icon_achtung {
				display: none;
		}

		/* Hinweis bei fester Profilfarbe (Abschnitt "Lamelle / Farbe") */
		#spalten2.jalousie_layout .jalousie_hinweis {
				margin-top: 1em;
				color: var(--jalousie-grau);
				font-style: italic;
		}

		/* Schienenfarbe bei Lamellen aus dem Jalousiemix: Auswahl im Abschnitt "Profilfarbe" */
		#spalten2.jalousie_layout #profilfarbewahl {
				position: static;
				width: auto;
				margin-top: 1em;
				padding: 1em;
				border: 1px solid var(--jalousie-linie);
				border-radius: 4px;
				box-shadow: none;
		}
				#spalten2.jalousie_layout #profilfarbewahl h2,
				#spalten2.jalousie_layout #profilfarbewahl h3 {
						font-size: 16px;
						margin: 0.5em 0;
				}
				#spalten2.jalousie_layout #profilfarbewahl ul::after {
						content: '';
						display: block;
						clear: both;
				}


/* ***** Preis / Warenkorb ***** */

#spalten2.jalousie_layout #box_finish {
		position: sticky;		/* unten am Bildschirm, solange die rechte Spalte zu sehen ist - am Ende der Spalte bleibt sie stehen und ueberdeckt den SEO-Text darunter nicht */
		bottom: 0;
		z-index: 20;
		box-sizing: border-box;
}

/* SEO-Texte in der rechten Spalte (wie bei Rollo): oben ueber dem Accordion nur auf den Dachfenster-Seiten, unten weit abgesetzt, damit sie beim Konfigurieren nicht stoeren */
#spalten2.jalousie_layout #text_vor_konfigurator {
		margin-bottom: 3em;
}
#spalten2.jalousie_layout #text_nach_konfigurator, #spalten2.jalousie_layout #eingabe > .text_unten {
		margin-top: 40em;
}
		#spalten2.jalousie_layout .gruppe_warenkorb {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;		/* wenn die Spalte schmal ist, stehen die Sonderwuensche in einer eigenen Zeile ueber Menge, Preis und Warenkorb */
				align-items: center;
				justify-content: space-between;
				gap: 0.6em 1em;
				width: auto;
				margin: 0;
				padding: 10px;
				text-align: left;
				background-color: var(--jalousie-hell);
				box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.10);
		}
				#spalten2.jalousie_layout .gruppe_warenkorb .notizen {
						flex: 1 1 220px;		/* in einer Zeile mit Menge, Preis und Warenkorb, wenn die Spalte breit genug ist */
						min-width: 0;
						height: 2.6em;
						resize: none;
						font-size: 14px;
						padding: 0.6em;
						border: 1px solid #dddddd;
						box-sizing: border-box;
				}
				#spalten2.jalousie_layout .gruppe_warenkorb .jalousie_menge {
						flex: 0 0 auto;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 14px;
				}
						#spalten2.jalousie_layout .gruppe_warenkorb .jalousie_menge input {
								width: 3em;
								padding: 0.4em;
								text-align: center;
								border: 1px solid #dddddd;
								-moz-appearance: textfield;
						}
				#spalten2.jalousie_layout .gruppe_warenkorb .jalousie_preis {
						flex: 0 0 auto;
						display: flex;
						flex-direction: column;
						align-items: center;
						white-space: nowrap;
				}
						#spalten2.jalousie_layout .gruppe_warenkorb #einzelpreis {
								font-weight: bold;
								font-size: 16px;
						}
						#spalten2.jalousie_layout .gruppe_warenkorb .jalousie_mwst {
								font-size: 14px;
						}
				#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_btn {
						flex: 0 0 auto;
						display: flex;
						align-items: stretch;
						padding: 0;
						margin: 0;
						border: 0;
						background: none;
						cursor: pointer;
						height: 43px;
				}
						#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_text {
								display: flex;
								align-items: center;
								padding: 0 12px;
								background-color: #888888;
								color: #ffffff;
								text-transform: uppercase;
								border-right: 1px solid #ffffff;
								font-size: 14px;
						}
						#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_symbol {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 40px;
								background-color: #bf0008;
						}
								#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_symbol img {
										height: 26px;
										filter: brightness(0) invert(1);
								}


/* ***** Fenster nach dem Legen in den Warenkorb (wie bei Rollo, Plissee, Insektenschutz) ***** */

#fensterWarenkorb {
		padding: 40px;
		color: var(--jalousie-grau-dunkel);
}
		#fensterWarenkorb_top {
				display: flex;
				align-items: flex-start;
				gap: 2em;
		}
				#fensterWarenkorb_top_left {
						flex: 0 0 34%;
				}
						#warenkorb_box_produktbild {
								display: block;
								width: 100%;
						}
				#fensterWarenkorb_top_right {
						flex: 1 1 auto;
						min-width: 0;
				}
						#warenkorb_box_status {
								border-bottom: 1px solid #e6e6e6;
								padding-bottom: 7px;
								margin-bottom: 20px;
								font-size: 1.2em;
						}
						#warenkorb_box_titel {
								font-size: 1.1em;
								font-weight: bold;
						}
						#warenkorb_box_preis {
								color: var(--jalousie-grau);
						}
						#warenkorb_box_sonderwunsch_ueberschrift {
								display: none;		/* wird ueber Javascript angeschalten */
								margin-top: 2em;
						}
						#warenkorb_box_sonderwunsch {
								font-style: italic;
								color: var(--jalousie-grau);
						}
				#fensterWarenkorb.jalousie_fehler #fensterWarenkorb_top_left {
						display: none;
				}
		#fensterWarenkorb_buttons {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 1em;
				margin-top: 28px;
		}
				#fensterWarenkorb_zurueck {
						display: flex;
						align-items: center;
						box-sizing: border-box;
						height: 43px;
						padding: 0 1em;
						border: 2px solid #bf0008;
						color: #bf0008;
						text-transform: uppercase;
						cursor: pointer;
				}
				#fensterWarenkorb_zumWarenkorb {
						display: flex;
						height: 43px;
						text-decoration: none;
				}
						#fensterWarenkorb_zumWarenkorb .warenkorb_text {
								display: flex;
								align-items: center;
								padding: 0 12px;
								background-color: #888888;
								color: #ffffff;
								text-transform: uppercase;
								border-right: 1px solid #ffffff;
						}
						#fensterWarenkorb_zumWarenkorb .warenkorb_symbol {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 40px;
								background-color: #bf0008;
						}
								#fensterWarenkorb_zumWarenkorb .warenkorb_symbol img {
										height: 26px;
										filter: brightness(0) invert(1);
								}

@media (max-width: 650px) {
		#fensterWarenkorb {
				padding: 1.5em;
		}
				#fensterWarenkorb_top_left {
						display: none;
				}
}
@media (max-width: 530px) {
		#fensterWarenkorb_zurueck_einkaufen {
				display: none;
		}
}


/* ***** einspaltig (Tablet hochkant / Handy) ***** */

@media (max-width: 1100px) {
		#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_text {
				display: none;
		}
}

@media (max-width: 800px) {
		#spalten2.jalousie_layout {
				flex-direction: column;
				align-items: stretch;
				padding: 0.5em 4% 0 4%;
				gap: 0;
		}
				#spalten2.jalousie_layout #visualisierung {
						position: static;
				}
						#spalten2.jalousie_layout .bemassung_bild {
								padding: 0 0 1em 0;
						}
								#spalten2.jalousie_layout #bemassung_bild svg,
								#spalten2.jalousie_layout #bemassung_bild img {
										width: calc(40vh * var(--jalousie-bild-verhaeltnis));		/* einspaltig: hoechstens 40% der Fensterhoehe */
								}
				#spalten2.jalousie_layout #eingabe {
						padding-bottom: 2em;
						margin-top: 1.5em;
				}
						#spalten2.jalousie_layout #eingabe .bereichsueberschrift {
								display: none;
						}
						#spalten2.jalousie_layout .accordion_ueberschrift {
								font-size: 16px;
						}
								#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltUe {
										white-space: normal;
								}
						#spalten2.jalousie_layout .eingabeBox {
								padding-left: 0;
						}
								#spalten2.jalousie_layout .eingabeBox select {
										min-width: 0;
										width: 100%;
								}
				#spalten2.jalousie_layout #box_finish {
						position: static;
						width: auto !important;
						margin-top: 2em;
				}
						#spalten2.jalousie_layout .gruppe_warenkorb {
								flex-wrap: wrap;
						}
								#spalten2.jalousie_layout .gruppe_warenkorb .notizen {
										flex: 1 1 100%;
								}
								#spalten2.jalousie_layout .gruppe_warenkorb .warenkorb_text {
										display: flex;
								}
}

@media (max-width: 1250px) {
		/* rechte Spalte zu schmal fuer alles in einer Zeile: Sonderwuensche allein in der ersten Zeile, darunter Menge, Preis und Warenkorb */
		#spalten2.jalousie_layout .gruppe_warenkorb .notizen {
				flex-basis: 100%;
		}
}

@media (max-width: 480px) {
		#spalten2.jalousie_layout .jalousie_modellwahl ul.modelle li {
				flex: 1 1 30%;
				min-width: 0;
				font-size: 12px;
		}
		#spalten2.jalousie_layout .accordion_ueberschrift .eingabeGewaehltIcon {
				margin-left: 0;
				margin-right: 0.6em;
		}
}