<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*







Achtung: Datei ist im shop_abgleich Kopiertask enthalten und wird ggf. regelmäßig überschrieben. Anpassungen müssen im entsprechend definierten Quellshop gemacht werden.
















*/

/* Mobile (Handy, nicht Tablet-Layout) 
	18.10.21	Patrick - untereAuswahlleiste zentriert
*/

body {
		/*font-size: 15px;*/
}
body.noscroll {
		overflow: hidden;
}

#layout_mobile_head_ueberschrift {
		display: none;
}


#layout_mobile_head_schliessen {
		display: none;
}



#layout_mobile_overlay {
		display: none;

		position: fixed;
		bottom: 70px;
		top: 62px;
		/*left: 0;*/
		right: 0;
        min-width: 500px;
		overflow: scroll;
		/*border: solid 10px #000;
		border-bottom: solid 37px #000;
		border-top: solid 1px #00000040;*/
		bottom: 0 !important;
		padding-bottom: 70px !important;
		-webkit-overflow-scrolling: touch;		/* bewirkt weiches iOs "Momentum"-Scrolling (welches Standardmaessig an ist, aber nicht bei position fixed elements) */

		padding-top: 2em;
		padding-left: 2em;
		padding-right: 2em;
		background-color: #fff;
		/*background-color: #2F2F2F;*/

		z-index: 1000;		/* weil im normalen Inhalt, bei manchen Elementen der z-index gesetzt ist, versuche ich hiermit drueber zu kommen */

		transition: bottom 0.25s ease-out;	/* wie #layout_mobile_navigation */
}
#layout_mobile_overlay.active {
		display: block;
}



.layout_mobile_bottom_sticky {
		display: none;
}
#layout_mobile_navigation {
		display: none;
}

@media (max-width: 500px) {
    #layout_mobile_overlay {
            left: 0;
            min-width: auto;
    }
		/* aus dem desktop-layout */
		#layout_header {
				display: none;
		}

		.inhalt{
				max-width: 500px;
				margin: 0 auto;
		}



		#layout_footer {
				display: none; 
		} 
			
		#layout_footer_content{
			flex-flow: column;
			padding-top: 3em;
		}	
			#layout_footer_content .footer_abschnitt_logo{
				order: 2;
			}
			
			#layout_footer_content .bottom_center{
				order: 3;
				padding-bottom: 2em;
			}
		
		/* Ende aus dem desktop-layout */

		body {
				margin: 0;
				padding: 0;
		}

		#layout_entirePage {
				margin-bottom: 90px;		/* wenn die untere Leiste position: sticky gesetzt ist, brauchen wir das hier nicht - wir brauchen das aber wenn die untere Leiste position: fixed gesetzt ist */
		}

		/* Kopf-Bereich */
		#layout_mobile_head_ueberschrift {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				height: 50px;
				color: var(--primary-brand);
				/*box-shadow: 0 3px 6px #00000029;*/
				box-shadow: 0px 20px 40px #CECECEB3;
				margin-bottom: 1.5em;
				border-top: 3px solid;
		}
				#layout_mobile_head_ueberschrift &gt; * {

				}

						#layout_mobile_head_ueberschrift &gt; .left {
								text-align: left;
								flex: 1 1 10%;
								margin-left: 2em;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								display: flex;
								align-items: center;
								gap: 1em;
						}							
								#layout_mobile_head_ueberschrift img {
										width: 2em;
										height: 2em;
								}							
								#layout_mobile_head_ueberschrift &gt; .left a {
								}
										#layout_mobile_head_ueberschrift &gt; .left a .arrow {
												margin-right: 0.3em;
										}
												#layout_mobile_head_ueberschrift &gt; .left a .arrow img {
														height: 20px;
														vertical-align: middle;
												}
										#layout_mobile_head_ueberschrift &gt; .left a .bez {

										}
										#layout_mobile_head_ueberschrift &gt; .left .current {
												cursor: default;
										}
										
						#layout_mobile_head_ueberschrift &gt; .center {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 500;
						}		
						
						#layout_mobile_head_ueberschrift &gt; .right {
								flex: 1 0 10%;
								margin-right: 2em;
								position: relative;		/* fuer die absolut positionierte Nummer */
								display: flex; 
								justify-content: end;
								align-items: center;
						}
								#layout_mobile_head_ueberschrift &gt; .right img {
										font-size: 35px;		/* Als img-alt-Text habe ich das Unicode-Symbol von einem Warenkorb hinterlegt. Die alt-Zeichen sind Text welcher mit der Schriftgroesse font-size geaendert werden kann */
										width: 1.1em;
										height: 1.1em;
								}
								#layout_mobile_head_ueberschrift &gt; .right span {
										color: #fff;
										text-align: center;
										background: var(--primary-brand);
										position: absolute;
										width: 1.4em;
										height: 1.4em;
										line-height: 1.4em;
										border-radius: 100%;
										font-size: .875em;
										top: 0;
										right: 2em;
								}
				#layout_mobile_head_ueberschrift a {
						color: #0E0E0F;
						text-decoration: none;
				}
						#layout_mobile_head_warenkorb_number {
								color: #FFFFFF;
								height: 16px;
								width: 16px;
								background-color: #F50B30;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								/* border: 2px solid #0E0E0F; */
								font-weight: bold;
								position: absolute;
								right: 0px;
								top: 0px;
								font-size: 10px;
						}
		#layout_mobile_head_schliessen {
				display: none;
				/* display: flex; */
				align-items: center;
				justify-content: space-between;
				/*background-color: #2F2F2F;
				border:solid 8px #000;*/
				padding: 0 1em 7px 1em;
				height: 62px;

				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				/*color: #A7A7A8;*/
				font-family: var(--secondaryFont);
				border-top: 4px solid #000;
				z-index: 1000;		/* weil im normalen Inhalt, bei manchen Elementen der z-index gesetzt ist, versuche ich hiermit drueber zu kommen */
				background: rgb(255,255,255);
				background: linear-gradient(180deg, rgba(255,255,255,1) 85%, rgba(204,204,204,1) 85%, rgba(255,255,255,1) 100%);

		}
				#layout_mobile_head_schliessen &gt; * {
						flex: 1 0 0;
				}
						#layout_mobile_head_schliessen &gt; .middle {
								/*font-size: 15px;*/
								font-size: 1.125em;
								font-weight: 400;
								text-align: center;
								flex: 6 0 0 !important;
						}
						#layout_mobile_head_schliessen &gt; .left {
								text-align: left;
								cursor: pointer;
								display: flex;
						}
						#layout_mobile_head_schliessen &gt; .left &gt; img{
								transform: rotate(-90deg)
						}
						#layout_mobile_head_schliessen &gt; .right {
								text-align: right;
								cursor: pointer;
								display: flex;
								justify-content: end;
						}
								#layout_mobile_head_schliessen &gt; .right img {
										width: 2em;
								}
								#layout_mobile_head_schliessen &gt; .right &gt; * {
										/*vertical-align: middle;*/
										/*display: inherit;*/
								}
						
		/* Ende Kopf-Bereich */

		.layout_mobile_bottom {
			position: fixed;
			bottom: 60px;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0.75);
			padding: 1rem;
			backdrop-filter: blur(1em);
		}

		/* auf einzelnen Seiten kann im mobilen Layout an die untere Leiste mit dieser Klasse (Javascript-optimiert) weiterer Sticky-Content gesetzt werden, z.B. http://test-lay.raumtextilienshop.de/plissees/cosiflor-209.27.html */
		.layout_mobile_bottom_sticky {
				position: -webkit-sticky;
				position: sticky;
				bottom: 80px;
				transition: bottom 0.25s ease-out;	/* wie #layout_mobile_navigation */
		}
		.artikelKonfigurieren {
				display:flex;
				flex-flow: row wrap;
				gap: 0.5rem;
				border: 1px solid #b1b1b1;
				padding: 1rem 0.5rem;
				/*background-color: #ffffff;
				border-top: 1px solid #dadbdd;
				padding-left: 0;
				padding-right: 0;
				padding-top: 1em;
				padding-bottom: 2em;*/
				justify-content: center;
				align-items: center;
				background: rgba(255,255,255,0.75);
				backdrop-filter: blur(5px);
		}
		
				.artikelKonfigurieren .wuenscheHinweis {
						flex: 1 1 calc(65% - 0.25rem);
						font-size: 0.875rem;
						font-weight: 400;
						text-align: center;
						padding: 0.5rem 0rem;
						border: 2px solid #000;
						box-sizing: border-box;
						cursor: pointer;
						/*background: url("/rollos/konfigurator/icons/haken_aktiv.svg") no-repeat 0.5rem 50%;
						background-size: 1rem auto;*/
						display: flex;
						flex-flow: row nowrap;
						align-items: center;
						justify-content: space-around;
				}
				
						.artikelKonfigurieren .wuenscheHinweis img {
								width: 1.25rem;
								filter: grayscale(100%);
								opacity: 0.25;
						}
						.artikelKonfigurieren .wuenscheHinweis.hinweisOk img {
								filter: grayscale(0%);
								opacity: 1;
						}
				
				.artikelKonfigurieren .layout_mobile_bottom_sticky_right {
						/* flex: 1 1 calc(35% - 0.25rem); */
						flex: 1 1 100%;
						display: flex;
						align-items: center;
						gap: 0.25em;
				}

				.artikelKonfigurieren .buttonKonfigurierenMobile, a[id^="button_stoffprobe_mobile_"] {
						display: flex;
						gap: 1em;
						justify-content: center;
						align-items: center;
						/*font-size: 14px;*/
						border:0;
						padding: 0.75rem 0;
						text-decoration:none;
						flex: 5 0 0;
						text-align:center;
						cursor: pointer;
						font-weight: 500;
						color: #fff;
						background: #000;
				}
						.artikelKonfigurieren .child_buttonKonfigurierenMobile{
								display: flex;
								justify-content: space-between;
								align-items: center;
								gap: 0.5em;
								flex-flow: row nowrap;
								/*padding: 0.5rem;*/
								/*padding-left:1em;
								padding-right:1em;*/
						}
								
								.artikelKonfigurieren .child_buttonKonfigurierenMobile img{
										width: 100%;
										min-width: 1em;
										max-width: 2em;
										/*margin-left: 1em;*/
								}
								
				.layout_mobile_bottom_sticky_amount {
						flex: 2 0 0;
						text-align: center;
				}
						#layout_mobile_bottom_sticky_amount_input {
								-moz-appearance: none;
								-webkit-appearance: none;
								appearance: none;

								border: 2px solid #f2f3f5;
								padding-top: 0.4em;
								padding-bottom: 0.4em;
								padding-left: 1em;
								padding-right: 1em;
								background-color: #ffffff;
								color: #0E0E0F;
								width: 9ch;
						}
						#layout_mobile_bottom_sticky_amount_input {
								background-image: linear-gradient(45deg, transparent 50%, #0E0E0F 50%), linear-gradient(135deg, #0E0E0F 50%, transparent 50%);
								background-position: calc(100% - 15px) calc(1em + 0px), calc(100% - 10px) calc(1em + 0px);
								background-size: 5px 5px, 5px 5px;
								background-repeat: no-repeat;
						}
						#layout_mobile_bottom_sticky_amount_input:focus {
								background-image: linear-gradient(45deg, #0E0E0F 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #0E0E0F 50%);
								background-position: calc(100% - 10px) calc(1em - 2px), calc(100% - 15px) calc(1em - 2px);
								background-size: 5px 5px, 5px 5px;
								background-repeat: no-repeat;
								border-color: #c2c3c5;
								outline: 0;
						}

				.layout_mobile_bottom_sticky_right {
						flex: 2 0 0;
						text-align: right;
				}
						.artikelKonfigurieren .textPreisMobile{
								color: #0E0E0F;
								margin-top: 0 !important;
								font-weight: 600;
						}
						.layout_mobile_bottom_sticky_mwst {
								font-size: 11px;
						}


		/* Navigation unten */
		@media(max-width: 500px) {

		}
		
		#layout_mobile_navigation * {
				box-sizing: border-box;
				color: #fff;
		}
		
		#layout_mobile_navigation {
				display: flex;
				align-items: stretch;
				
				height: 60px;
				/*
				position: -webkit-sticky;
				position: sticky;
				bei position: sticky ist die Leiste bei wenig HTML-Inhalt zu weit oben. Sie klebt unterhalb des contents
				bei position fixed muss sichergestellt werden, dass die untere Leiste keine benoetigten Inhalte verdeckt (wenn bis runter gescrollt wurde)
				*/
				position: fixed;
				bottom: 0;
				/*width: calc(100% - 20px);*/		/* diese Angabe ist noetig, wenn es ueberbreite Elemente (z.B. grosse Tabelle) auf der Seite gibt, z.B. /top/insektenschutz/fliegengitter-pollenschutz.html */
				width: 100%;
				transition: bottom 0.25s ease-out;
				z-index: 1850;		/* wenn Elemente im Seitenlayout einen hohen z-index haben. So dass das hier noch drueber liegt */
				/*margin-top: 4px;*/
				background-color: #0E0E0F;
				/*border-radius: 3em;*/
				/*right: 50%;
				transform: translateX(50%);*/
				overflow: hidden;
		}
		#layout_mobile_navigation &gt; div {
				cursor: pointer;
				flex: 1 1 25%;
				border-bottom: 4px solid var(--primary-brand);
				transition: border 0.5s ease-in;
		}
		#layout_mobile_navigation ul, #layout_mobile_navigation li {
				padding: 0;
				margin: 0;
				list-style: none;
		}
/*		#layout_mobile_navigation &gt; div:not(:first-child) &gt; ul {*/
		#layout_mobile_navigation &gt; div &gt; ul {
				margin-top: -60px;
				transition: margin 0.5s ease-in;
		}
		#layout_mobile_navigation &gt; div.active {
				border-color: var(--accent-color);
		}
		#layout_mobile_navigation &gt; div.active &gt; ul {
				margin-top: 0;
		}
		#layout_mobile_navigation li {
				height: 60px;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				justify-content: center;
				font-size: small;
		}
		#layout_mobile_navigation &gt; div li img {
				height: 80%;
				height: 60%;
				display: block;
				margin: 0 auto;
		}
		#layout_mobile_navigation &gt; div li:last-child img {
				padding-top: 0.5em;
		}
		/*
		#layout_mobile_navigation &gt; div.active li img {
				padding-top: 0;
		}
		*/
		#layout_mobile_navigation &gt; div li:first-child img {
				/*margin: 0.25em auto 0 auto;*/
		}
		#layout_mobile_navigation span {
			line-height: 1em;
			margin-bottom: 0.75em;
		}
		/* Ende Navigation unten */

		.layout_mobile_search {
				
				display: flex;
				flex-flow: row nowrap;
				width: 100%;
				box-sizing: border-box;
				padding: 0 0.5rem;
				margin-bottom: 1rem;
				/*
				position: relative;
				width: 100%;
				display: block;
				margin-left: auto;
				margin-right: auto;
				margin-top: 12px;
				margin-bottom: 12px;
				*/
		}
				.layout_mobile_search input,
				.layout_mobile_search input:focus {
						border-bottom: 2px solid;
				}
				.layout_mobile_search input[type="search"] {
						background: #F6F6F6;
						flex: 100% 1 1;
						outline: 0;
						/*
						width: 100%;
						border-radius: 27px;		/ * gewuenschter Radius + padding * /
						padding-left: 27px;
						padding-right: 12px;
						padding-top: 13px;
						padding-bottom: 13px;
						border: 2px solid #A7A7A8;
						background-color: #2F2F2F;
						font-size: 18px;		/ * Die Browser nutzen fuer die Input-Felder eigene Schriftart und Groessen.  Im mobile Safari ist das, ohne explizite Angabe, zu klein * /
						outline: none;
						color: #A7A7A8;
						*/
				}
				.layout_mobile_search input[type="search"]:focus {
						outline: 0;
				}
				.layout_mobile_search input[type="search"]::placeholder {
						font-size: 1rem;
						font-weight: 400;
						opacity: 1;
						color: var(--primary-brand) !important;
						/*text-align: center;*/
				}
				
				
				
				
				.layout_mobile_search input[type="search"]:focus::placeholder {
						display: none;
						align-items: center;
						color: transparent !important;		/* weil "display:none" bei mir (firefox 68.0.2) nicht funktioniert, hier color transparent */
				}
				.layout_mobile_search input[type="submit"] {
						background: #F6F6F6 url("/layout/mobile/main/icon-suche.svg") no-repeat 50% 50%;
						background-size: 80% auto;
						flex: 3rem 0 0;
						/*
						position: absolute;
						right: 3px;
						top: 50%;
						background-color: transparent;
						background-image: url("/layout/mobile/main/icon_suche_grau.svg");
						background-position: center center;
						background-repeat: no-repeat;
						background-size: 70%;
						border: none;
						border-radius: 50% !important;		/ * in der layout.css sind die buttons mit important auf border-radius 0 gesetzt * /
						padding: 20px;
						margin-top: -20px;
						width: 0;
						height: 0;
						*/
				}



		/* Button "Auswahl verfeinern" auf den Stoff-Seiten und im Listing */
		.call_filter_mobile {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				cursor:pointer;
				font-weight: 400;
				width: 275px;
				margin: 0 auto 2em auto;
		}
				.call_filter_mobile img {
						width: 24px;
						margin-right: .6em;
				}


}
</pre></body></html>