html 	{	width: 100.0%; height: 100.0%; min-width: 375px; } 
body 	{	width: 100.0%; height: 100.0%; min-width: 375px; }

	*	{	list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; }
img, ul	{	display: block; }

hr		{	margin: 1.20rem 0; border-top-width: 1px; }

.section				{	position: relative; z-index: 2; width: 100.0%; padding: 6vh 0; display: flex; flex-flow: row wrap; justify-content: center; border-bottom-width: 1px; }
.section > div 			{	position: relative; width: 100.0%; max-width: 1200px; overflow: hidden; }
.section > div > div	{	position: relative; padding: 0 3.00%; display: flex; flex-flow: row wrap; justify-content: center; }

			.col		{	flex: 1 1 100.0%; position: relative; margin: 1.20rem 3.00%; }
			.col.large,
			.col.bigger	{	flex: 1 1 600px; }
			.col.semi	{	flex: 1 1 400px; margin: 0; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; align-items: flex-start; }
			.col.small	{	flex: 1 1 200px; }
			
			.col.middle			{	display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }

			.col.center			{	display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; align-items: flex-start; }
			#intro .col.center	{	padding-top: 2.40rem; border-top-width: 1px; }
									
			.col img	{	width: 100.0%; height: auto; margin-bottom: 2.40rem; }
			.col video	{	width: 100.0%; height: auto; border-width: 1px;}
						
	.heighscreen	{	min-height: calc(100.0% - 74px - 400px); justify-content: center; align-content: center; align-items: center; }

		#start 		{	height: 80.00%; padding: 0; border-bottom-width: 0; }
		#brand 		{	height: 19.00%; padding: 0 0 0 0; border-bottom-width: 0; align-content: flex-end; align-items: flex-end; }
		#intro		{	padding-top: 0; padding-bottom: 2vh; }
		
		#plan > div > div 		{	align-content: center; align-items: center; }

						.slider	{	padding: 0; }

/* --- # Motiv --- */

#motiv			{	position: fixed; z-index: 1; width: 100.0%; height: 80.00%; min-height: 400px; padding: 0; }
#motiv > div	{	position: absolute; top: 0; width: 100.0%; height: 100.0%; opacity: 1.0; overflow: hidden; }

/* --- # Start --- */

#start				{	min-height: 400px; padding: 0; }
#start > div		{	display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-end; align-items: flex-end; }
#start > div > div	{	position: relative; margin-bottom: 80px; flex: 0; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-end; align-items: flex-end; }
#start > div.slope	{	position: absolute; bottom: 0; left: 0; max-width: 100.0%; height: 80px; margin: 0; padding: 0; }

#start.small				{	height: calc(25.00% - 74px); padding-top: 74px; min-height: 126px; }
#start.small > div 			{	justify-content: center; align-content: center; align-items: center; }
#start.small > div > div	{	margin-bottom: 0; flex: 1; }

/* --- # FMP --- */

#fmp				{	min-height: 100.0%; padding: 0; align-content: center; align-items: center; }
#fmp img			{	width: 180px; margin-bottom: 2.40rem; }

/* --- # OEM --- */

	.oembox 		{	flex: 1 1 100.00%; margin: 0; display: flex; flex-flow: row wrap; justify-content: center; }
	.oem 			{	flex: 0 80px; margin: 0.30rem; padding: 0.60rem; border-width: 0; }
	.oem span		{	display: block; border-top-width: 1px; }
	.oem span.logo	{	height: 60px; margin: 0 auto 1.20rem; border: 0; }

/* --- # Kontakt --- */

#asp.section > div > div.center	{	justify-content: center; }

.asp 				{	flex: 0 0 260px; }
.asp img 			{	width: 100.0%; }
.asp span 			{	display: block; margin-bottom: 0.30rem; }
.asp a	 			{	margin-top: 0.60rem; }
.fb-front > span 	{	position: absolute;	top: 0; right: 0; padding: 0.30rem 0.50rem; }
.fb-back			{	display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }

	/* --- Flipbox ---- */

	.fb-box 	{	position: relative; height: 100.0%; width: 100.0%; }
	.flipper	{	position: relative; height: 260px; margin-bottom: 1.80rem;
	
					transition: 		all 3.2s ease-in-out;
					perspective: 		2000px;
					transform-style:	preserve-3d; }
								
	.fb-back, .fb-front 	{	position: absolute;	top: 0; left: 0; width: 100.0%; height: 100.0%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
								backface-visibility:	hidden;			
								transition: 			all 1.2s ease-in-out;
								transform-style: 		preserve-3d; }
							
	.flipper .fb-front			{	transform: rotateY(0deg); }
	.flipper .fb-back			{	transform: rotateY(-180deg); }
					
	.flipper:hover .fb-front	{	transform: rotateY(180deg); }
	.flipper:hover .fb-back		{	transform: rotateY(0deg); }

/* --- Qick-Menue--- */

#quick			{	position: fixed; z-index: 3; top: calc(50.00% - 13.00rem); right: 0; width: 0;  height: 26.00rem; transition: width 420ms ease-in-out 0ms; }
#quick > div	{	position: absolute; top: 0; left; width: 100.0%; height: 100.0%; border-radius: 0 0 0 0.60rem; background: rgba(255,255,255,0.84); overflow: hidden; border-width: 1px 0 1px 1px; }

#quick > div > span		{	font-size: 1.00rem; line-height: 1.20; }
#quick > div > a		{	font-size: 1.05rem; }
#quick > a.flag			{	font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.24em; font-family: sofi-300; }

#quick span, #quick a	{	 display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; overflow: hidden; }

	#quick span			{	height: 6.00rem; width: calc(17.00rem - 1.20rem); padding-left: 1.20rem; }
	#quick .link		{	height: 3.00rem; width: calc(17.00rem - 3.90rem); padding-left: 3.90rem; border-top-width: 1px; background-repeat: no-repeat; background-position: left 1.20rem center; background-size: 2.00rem; }

			#quick > div > .link:nth-child(2)	{	background-image: url(../img/pict/ic_phone_blue_24px.svg); }
			#quick > div > .link:nth-child(3)	{	background-image: url(../img/pict/ic_mail_outline_blue_24px.svg); }
			#quick > div > .link:nth-child(4)	{	background-image: url(../img/pict/ic_account_box_blue_24px.svg); }
			#quick > div > .link:nth-child(5)	{	background-image: url(../img/pict/ic_euro_symbol_blue_24px.svg); }
			#quick > div > .link:nth-child(6)	{	background-image: url(../img/pict/ic_desktop_windows_blue_24px.svg); }
					
					#quick > div > .link:hover:nth-child(2)	{	background-image: url(../img/pict/ic_phone_white_24px.svg); }
					#quick > div > .link:hover:nth-child(3)	{	background-image: url(../img/pict/ic_mail_outline_white_24px.svg); }
					#quick > div > .link:hover:nth-child(4)	{	background-image: url(../img/pict/ic_account_box_white_24px.svg); }
					#quick > div > .link:hover:nth-child(5)	{	background-image: url(../img/pict/ic_euro_symbol_white_24px.svg); }
					#quick > div > .link:hover:nth-child(6)	{	background-image: url(../img/pict/ic_desktop_windows_white_24px.svg); }

#quick > div > span:last-child	{	height: 4.00rem; border-top-width: 1px;  }

	#quick .flag 	{	position: absolute; top: 0; left: 1px; height: 3.00rem; padding: 0 1.50rem 0 3.60rem; transform: rotate(90deg); border-radius: 0 0 0.30rem 0.30rem ; transform-origin: 0 0; 
						background-image: url(../img/pict/ic_arrow_downward_white_24px.svg); background-repeat: no-repeat; background-position: left 1.20rem center; background-size: 1.50rem; }

#quick.quick-out 		{	width: 17.00rem; }
#quick.quick-out .flag 	{	background-image: url(../img/pict/ic_arrow_upward_white_24px.svg); }

/* --- Header + Footer --- */

header					{	position: fixed; z-index: 3; width: 100.0%; height: 74px; display: flex; flex-flow: row wrap; justify-content: center; }
header div				{	position: absolute; left: 0; display: flex; flex-flow: row wrap; align-items: center; }
header div:nth-child(1)	{	top: 0; z-index: 2; width: 94.00%; height: 72px; padding: 0 3.00%; justify-content: space-between; }
header div:nth-child(2)	{	bottom: 0; z-index: 1; width: 100.0%; height: 36px; justify-content: center; }

header div:nth-child(1) > a					{	display: block; height: 60px; padding-left: 60px; } 	
header div:nth-child(1) > a > span 			{	display: inline-block; } 	
header div:nth-child(1) > a > span > span	{	display: inline-block; margin-left: 1.20rem; } 	
header div:nth-child(1) > span 				{	margin-right: 4.00rem; }
header div:nth-child(1) > span > a			{	margin-left: 6px; }

	header.sticky 					{	height: 36px; }
	header.sticky div:nth-child(1)	{	top: -72px; }
	
	/* --- BTN Menue */

	body.navi header .menue			{	position: fixed; display: block; z-index: 5; top: 20px; right: 3.00%; width: 2.40rem; height: 2.40rem; margin: 0; border: 0; 
										background-repeat: no-repeat; background-position: center; background-size: 1.80rem; background-image: url("../img/pict/ic_menu_black_24px.svg"); }
	body.navi header.sticky .menue	{	top: 0; background-image: url(../img/pict/ic_menu_white_24px.svg); }						

	/* --- Footer --- */
	
	footer			{	position: relative; z-index: 2; width: 100.0%; padding: 1.80rem 0; display: flex; flex-flow: row wrap; justify-content: center; }
	footer a		{	margin: 1.20rem 0.60rem 0 0; }
	footer p		{	opacity: 0.60; }
	footer img		{	width: auto; height: 3.00rem; margin-bottom: 1.20rem; }

	footer > div	{	z-index: 2; width: 94.00%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; }
	
	/* --- Popup-NL --- */
	
	#popup-nl				{	position: fixed; z-index: 7; bottom: 8.00%; right: 8.00%; width: calc(84.00% - 3.60rem); max-width: 480px; padding: 1.80rem; border-radius: 0.60rem; box-shadow: inset 0 0 0  0.60rem #fff; border-width: 1px; }
	#popup-nl .close		{	position: absolute; top: -2.10rem; right: -2.10rem; padding: 1.20rem; border-radius: 100.0%;  
								background-repeat: no-repeat; background-position: center; background-size: 1.80rem; background-image: url("../img/pict/ic_close_white_24px.svg"); }

	#popup-nl:target		{	bottom: -100.0%; }
			    
	/* --- NL-Archiv --- */

	table.nl-line				{	margin-bottom: 0; border-top-width: 1px; font-size: 16px; text-align: left; }
	.nl-line td					{	color: #000000; font-weight: bold; border-bottom-width: 1px; padding: 12px 12px 12px 0; }
	.nl-line td	a				{	color: #497db2; font-weight: normal; }
	.nl-line td	a:hover			{	text-decoration: underline; }
	.nl-line tr:last-child td	{	border: 0; }

	/* --- Sonstiges --- */

	pre 	{	display: block; padding: 0 1.00vw; }
	
	#akkordeon							{	border-bottom-width: 1px; }					
	#akkordeon input + label			{	display: block; width: calc(100.0% - 12px - 36px); margin: 0; padding: 12px 36px 12px 12px; border-top-width: 1px; cursor: pointer;
											background-image: url(../img/pict/baseline-add-24px.svg); background-repeat: no-repeat; background-position: right 6px top 11px; background-size: 18px auto; }		
	#akkordeon input + label + div		{	display: block; width: 100.0%; height: auto; max-height: 0; padding: 0; font-size: 14px; line-height: 1.4; overflow: hidden; 
											transition: max-height 600ms ease-in-out 0ms; }
	#akkordeon input + label + div > p	{	margin: 0 12px 12px; }
										
			#akkordeon input:checked + label + div	{	max-height: 600px; }
			#akkordeon input:checked + label		{	background-image: url(../img/pict/baseline-close-24px.svg); }
			#akkordeon input:checked + label,
			#akkordeon input:checked + label + div	{	background-color: rgba(240,240,240,0.30); }
				
	/* --- Cookies --- */
	
	#cookies			{ 	position: fixed; bottom: 0; right: 0; z-index: 999; width: 100.0%; min-width: 375px; padding: 0.60rem 0; border-top-width: 1px;
							display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: center; align-items: center; }
	#cookies:target		{ 	display: none; }
	.cookie-container	{ 	flex: 4 1 400px; margin: 0.60rem 1.20rem; line-height: 1.2; }
	#cookies a			{ 	flex: 1 1 100px; display: inline-block; margin: 0.60rem 1.20rem; }

/*	=================================
		SCREENS
	================================= */
		
@media screen and (min-width : 0) and (max-width : 767px)
{	
	header div:nth-child(1) span, 
	header div:nth-child(2) span:nth-child(2),
	header div:nth-child(1) > a > span > span,
	#brand,
	.section > div > div.slider-products .swiper-slide > div > div.illu,
	.section > div > div.slider-reference,
	#model .flap .illu,
	#quick	
	{	display: none; }
	@media screen and (orientation : portrait)
	{		
	}
	@media only screen and (orientation : landscape)
	{	
	}
}
@media screen and (min-width : 768px) and (max-width : 1024px)
{	
	header div:nth-child(1) span {	display: none; }
	@media screen and (orientation : portrait)
	{	
		 
		.section > div > div.slider-products .swiper-slide > div > div.illu,
		#model #flap .illu,
		#quick	
		{	display: none; }
	}
	@media screen and (orientation : landscape)
	{	
	}
}
@media screen and (min-width : 1025px)
{		
}

@media screen and (orientation : portrait)
{		
}

.comment	{	color: rgba(255,000,255,1.0); }
	
/*	=================================
		Test
	================================= 
			
		*	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.10) !important; } 
		*	{	background-color: 	rgba(000,000,000,0.05) 					!important; } 
		div	{	background-color: 	rgba(255,000,000,0.05) 					!important; } 
		div	{	background-image: 	none				 					!important; } 
		*	{	color: 				rgba(000,000,000,1.0) 					!important; } 
		img	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.40) !important; } 
		
/*	=================================
		END
	================================= */