@import url("oem.css");

html, body 	{	width: 100.0%; scroll-behavior: smooth; } 
      body 	{	min-width: 375px; overflow-y: scroll; } 

::before, 
::after, *	{	margin: 0; padding: 0; border: 0; border-style: solid; box-sizing: border-box; }
img, video	{	display: block; width: 100.0%; height: auto; }
iframe	 	{	position: relative; display: block; width: 100.0%; aspect-ratio: 16/9; }
		hr	{	display: block; width: 100.0%; grid-column: 1 / -1; border-top-width: 1px; } 
	 table	{ 	width: 100.0%; border-collapse: collapse; border-spacing: 0; }

	 body	{	--vh: clamp(2.00em, 5.00vh, 7.50em);  
	 			--pa: clamp(1.00em, 5.00vw, 2.00em); } 

header, nav, main, .control, footer 		{	width: 100.0%; }
	
header > div, nav > div, main > article, 
#intro, .control > div, footer > div > div 	{	width: 100.0%; max-width: 1600px; margin: 0 auto; }

main 		{	max-width: 100.0%; display: grid; padding: var(--vh) 0; gap: var(--vh); overflow: hidden; }

/* --- Header --- */	

header			{ 	position: sticky; z-index: 5; top: 0; left: 0; height: 5.50em; }
header > div	{ 	position: relative; height: 100.0%; display: flex; gap: 5.00em; flex-flow: row wrap; justify-content: space-between; overflow: hidden; }

header > div > .brand	{ 	height: 100.0%; flex: 1 1 320px; max-width: 30.00em; display: flex; flex-flow: row wrap; justify-content: space-between; }
header > div > .brand > span			{ 	flex: 1 1 50.00%; background-image: url('../img/logos/Logo_FSN-Industriefahrzeuge_small.svg'); background-size: 80.00% auto; background-repeat: no-repeat; background-position: center; }
header > div > .brand > span + span		{ 	flex: 1 1 50.00%; }

header > div > .nav			{ 	flex: 1 1 320px; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; }
header > div > .nav	> a		{ 	flex: 0 0 auto; position: relative; height: 100.0%; padding: 0 var(--pa); display: grid; place-items: center; }
header > div > .nav	.link	{ 	margin-left: var(--pa); }
header > div > .nav	> a:after			{ 	content: ''; position: absolute; bottom: 0; left: 0; width: 100.0%; height: 0; }
header > div > .nav	> a:hover:after		{ 	height: 0.25em; }

header > div > .hh			{ 	position: absolute; top: 0; right: 0; width: 3.00em; height: 100.0%; display: none; place-items: center; }
header > div > .hh:before 	{ 	content: 'menu_open'; }

/* --- Nav --- */	

nav						{ 	position: sticky; z-index: 4; top: 3.50em; left: 0; max-height: 0; overflow: hidden; }
nav > div				{ 	position: relative; padding: 2.00em var(--pa); overflow: hidden; }
nav > div > div			{ 	width: 100.0%; display: none; }

nav > .nav-small > div:target,
nav > .nav-large > div:target 	{ 	display: block; }
	
			nav a:not(.close)	{ 	display: block; padding: 1.00em 0.50em; border-bottom-width: 2px; }
			nav a:after 		{ 	display: inline-block; float: right; margin-left: 1.00em; }
			nav a.for:after 	{ 	content: 'chevron_right'; transform: scale(1.5); }
			nav a.ex:after 		{ 	content: 'launch'; display: inline-block; margin-left: 1.00em; }
			nav a.icon.close 	{ 	position: absolute; top: 0.25em; right: var(--pa); }
			
.nav-on		{ 	max-height: 50.00em; overflow: visible; }

	/* --- Nav Large --- */	

	nav > .nav-large			{ 	padding: 2.00em calc(var(--pa) * 2); display: grid; gap: var(--pa); grid-template-columns: 1fr 1fr 1fr; }
	
	nav.nav-110-on  > .nav-large > #block-110	{ 	display: block; }
	nav.nav-111-on  > .nav-large > #block-111	{ 	display: block; }

	nav.nav-120-on  > .nav-large > #block-120	{ 	display: block; }
	nav.nav-121-on  > .nav-large > #block-121	{ 	display: block; }

	nav.nav-130-on  > .nav-large > #block-130	{ 	display: block; }
	nav.nav-131-on  > .nav-large > #block-131	{ 	display: block; }

	nav.nav-140-on  > .nav-large > #block-140	{ 	display: block; }
	nav.nav-141-on  > .nav-large > #block-141	{ 	display: block; }

	nav.nav-150-on  > .nav-large > #block-150	{ 	display: block; }
	nav.nav-151-on  > .nav-large > #block-151	{ 	display: block; }

	nav.nav-160-on  > .nav-large > #block-160	{ 	display: block; }
	nav.nav-161-on  > .nav-large > #block-161	{ 	display: block; }

	nav.nav-170-on  > .nav-large > #block-170	{ 	display: block; }
	nav.nav-171-on  > .nav-large > #block-171	{ 	display: block; }

/* --- Footer + Contact + SM --- */	

footer > div					{ 	position: relative; max-width: 100.0%; }
footer > div > div				{ 	padding: calc(var(--vh) / 2) var(--pa); display: flex; gap: var(--vh) calc(var(--pa) * 2); flex-flow: row wrap; justify-content: space-between; }
footer > div > div > div		{ 	flex: 38.20 1 320px; }
footer > div > div > div + div	{ 	flex: 61.20 1 auto; }
footer > div > div > div > span	{ 	display: block; width: 100.0%; }
	
	footer > .foot > div > div + div 	{ 	display: flex; gap: 1.00em; flex-flow: column wrap; justify-content: space-between; }

		footer :is(.line, .sm)	{ 	display: inline-flex; gap: 0.50em 1.00em; flex-flow: row wrap; justify-content: flex-start; align-items: center; }
		footer .sm				{ 	justify-content: flex-end; }
		footer .sm > a			{ 	opacity: 0.50; width: 2.00em; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: contain; }
		footer .sm > a:hover	{ 	opacity: 1.00; }
		footer .sm > a.yt		{ 	background-image: url('../img/sm/Logo_YouTube.svg');   }
		footer .sm > a.fb		{ 	background-image: url('../img/sm/Logo_Instagram.svg'); }
		footer .sm > a.ig		{ 	background-image: url('../img/sm/Logo_Facebook.svg');  }

/* --- Intro (Slider) --- */	

#intro		{ 	position: relative; padding-bottom: 3.00em; width: 100.0%; }

	.intro a					{ 	display: flex; flex-flow: row wrap; justify-content: space-between; overflow: hidden; }
	.intro a > * 				{ 	flex: 1 1 38.2%; order: 2; min-width: 320px; padding: 1.50em var(--pa); display: flex; gap: 1.50em; flex-flow: column wrap; justify-content: center; overflow: hidden; }
	.intro a > div + figure 	{ 	flex: 1 1 61.2%; padding: 0; }

/*	=================================
		Article
	================================= */
	
article		{ 	width: 100.0%; position: relative; padding: 0 var(--pa); display: grid; gap: var(--pa); grid-template-columns: repeat(auto-fill, minmax(17.50em, 1fr)); overflow: hidden; }

article	> a				{ 	position: relative; border-radius: 0.25em; overflow: hidden; }
article	> a > span		{ 	display: block; }
article#list > h3		{ 	grid-column: 1 / -1; padding-bottom: 0.50em; border-bottom-width: 1px; }

	/* --- Start --- */	
	
	.start 				{ 	display: block; }
	.start > div		{ 	display: grid; gap: calc(var(--vh) / 4) 0; max-width: 50.00em; margin: 0 auto; }
	
	/* --- OEMs --- */	
	
	#oems 				{ 	grid-template-columns: repeat(auto-fill, minmax(15.00em, 1fr)); }
	#oems * > figure	{ 	aspect-ratio: 5/3; margin-bottom: 0.50em; }
		
		#oems .com > figure	{ 	background-color: rgba(003,105,054,1.00); 	background-size: 72.00% auto; background-image: url('../img/logos/Logo_CombiLift_inv.svg'); 		}
		#oems .hau > figure	{ 	background-color: rgba(249,174,000,1.00); 	background-size: 72.00% auto; background-image: url('../img/logos/Logo_Haulotte.svg'); 			}
		#oems .ins > figure	{ 											 	background-size: 72.80% auto; background-image: url('../img/logos/Logo_Industry-Solutions.svg'); 	}
		#oems .jcb > figure	{ 	background-color: rgba(252,176,038,1.00); 	background-size: 61.80% auto; background-image: url('../img/logos/Logo_JCB.svg'); 				}
		#oems .kae > figure	{ 	background-color: 						; 	background-size: 61.80% auto; background-image: url('../img/logos/Logo_Kaercher-FSN.svg'); 		}
		#oems .kon > figure	{ 	background-color: rgba(247,028,028,1.00); 	background-size: 80.00% auto; background-image: url('../img/logos/Logo_Konecranes_inv.svg');		}
		#oems .lin > figure	{ 	background-color: rgba(160,000,032,1.00); 	background-size: 80.00% auto; background-image: url('../img/logos/Logo_Linde-MH.svg');			}
		#oems .mov > figure	{ 												background-size: 61.80% auto; background-image: url('../img/logos/Logo_Movexx.svg'); 			}
		#oems .sen > figure	{ 	background-color: rgba(072,168,037,1.00); 	background-size: 72.00% auto; background-image: url('../img/logos/Logo_Sennebogen_inv.svg'); 		}
		#oems .aka > figure	{ 												background-size: 80.00% auto; background-image: url('../img/logos/Logo_FSN-Akademie.svg'); 		}

	/* --- Top10 --- */	
	
	#top10					{ 	display: block; max-width: 100.0%; }
	#top10 > div + div 		{	position: relative; width: 100.0%; max-width: 1600px; height: 3.00em; margin: 0 auto; }
	#top10 > .swiper.top10 	{ 	width: calc(100.0% - (var(--pa) * 2)); margin: calc(var(--vh) / 3) auto; overflow: visible; }
	#top10 > .swiper a.pro	{ 	padding-bottom: 0; }
		
		
			a.pro			{ 	border-radius: 0.25em; padding-bottom: 2.00em; border-width: 1px; overflow: hidden; }
			a.pro figure	{ 	aspect-ratio: 1/1; }
	
			a.pro table							{ 	width: calc(100.0% - 3.00em); margin: 1.00em 1.50em 1.50em; border-width: 0; }
			a.pro table td						{ 	border-width: 0; padding: 0; }			
			a.pro table td + td					{ 	padding-left: 1.00em; text-align: right; } 
			a.pro table tr + tr > td			{ 	opacity: 0.50; padding-top: 1.00em; text-decoration: line-through; }  
			a.pro table tr + tr > td:last-child	{ 	opacity: 1.00; text-decoration: none; text-align: right; }  

			a.pro .link		{ 	position: absolute; bottom: 1.00em; right: 1.50em; }

	/* --- Facts --- */	

	#cats 	 			{ 	display: flex; flex-flow: row wrap; justify-content: center; overflow: hidden; }
	#cats a 			{ 	width: calc(33.33% - (var(--vh) / 1.5)); min-width: 20.00em; }
	#cats a > .link 	{ 	position: absolute; bottom: 0; right: 0; }

	/* --- Facts --- */	

	#fact	 					{ 	grid-template-columns: repeat(auto-fill, minmax(22.50em, 1fr)); }
	#fact > :is(a, span, div) 	{ 	padding: 0 1.50em 1.50em; border-radius: 0.25em; }
	#fact > a 					{ 	padding-bottom: 3.50em; }
	#fact > * > figure			{ 	width: calc(100.0% + 3.00em); margin-left: -1.50em; }
	#fact > * > .link 			{ 	position: absolute; bottom: 1.00em; right: 1.00em; }

	/* --- Local --- */	

	.local 	 					{ 	grid-template-columns: repeat(auto-fill, minmax(22.50em, 1fr)); }
	.local div 					{ 	position: relative; padding: 1.50em; border-radius: 0.25em; border-width: 1px; }	
	.local div:has(.link)		{ 	padding-bottom: 3.00em; }	
	.local > * > .link 			{ 	position: absolute; bottom: 1.00em; right: 1.50em; }

	.semi + .local 			{ 	margin-top: calc(1.50em - var(--vh)); }

	/* --- Edit/Red. --- */	

	#edit 	 					{ 	display: block; }
	#edit section 				{ 	display: flex; gap: 0; flex-flow: row wrap; justify-content: space-between; }
	#edit section + section		{ 	margin-top: calc(var(--pa) * 2); }
	#edit section:nth-child(2n)	{ 	flex-direction: row-reverse; } 

	#edit section > *			{ 	flex: 38.20 1 20.00em; }
	#edit section > * + *		{ 	flex: 61.80 1 20.00em; display: flex; flex-flow: column wrap; justify-content: center; }
	
	#edit section > div			{ 	padding: 0 calc(var(--pa) * 2); }
	#edit section > .img		{ 	padding: 0; }
	
	#edit section.box > div > figure	{ 	aspect-ratio: unset; height: 100.0%; }
	#edit section.box > div + div		{ 	padding: calc(var(--pa) * 2); }

	#edit.legal section > * 	{ 	justify-content: flex-start; }

	.semi					{ 	display: flex; gap: var(--pa); flex-flow: row wrap; justify-content: space-between; }
	.semi > *:not(h2, p) 	{ 	flex: 1 1 40.00%; min-width: 20.00em; padding: var(--pa); border-radius: 0.25em; border-width: 1px; }
	.semi hr 				{ 	margin: 1.00em auto; }


	.semi .col		{ 	display: grid; grid: 0.50em 1.00em; grid-template-columns: repeat(auto-fill, minmax(15.00em, 1fr)); }

	/* --- Quote. --- */	

	#quote 	 						{ 	display: block; }
	#quote section 					{ 	display: flex; gap: 0; flex-flow: row wrap; justify-content: space-between; }
	#quote section + section		{ 	margin-top: calc(var(--pa) * 2); }
	#quote section:nth-child(2n)	{ 	flex-direction: row-reverse; } 

	#quote section > *				{ 	width: 17.50em; }
	#quote section > * + *			{ 	flex: 1 1 40.00em; display: flex; flex-flow: column wrap; justify-content: center; }
	
	#quote section > div			{ 	padding: 0 calc(var(--pa) * 2); }
	#quote section > .img			{ 	padding: 0; }
			
		#quote section figure 			{ 	aspect-ratio: 4/3; border-radius: 0.25em; justify-content: flex-end; }
		#quote section figure img		{ 	object-position: 70% 50%; }
		#quote section figure:before, 
		#quote section figure:after		{ 	content: ''; position: absolute; z-index: 2; top: 0; bottom: auto; right: -20.00%; width: 40.00%; height: 50.00%; border-radius: 0 0 0 0.25em; transform: skewY(30deg); }
		#quote section figure:after		{ 	top: auto; bottom: 0; height: 50.00%; border-radius: 0.25em 0 0 0; transform: skewY(-30deg); }

	#quote section:nth-child(2n) figure		{ 	transform: scale(-1, 1); } 
	#quote section:nth-child(2n) figure	img	{ 	transform: scale(-1, 1); object-position: 30% 50%; } 

	/* --- SM --- */	

	#sm 	 			{ 	grid-template-columns: repeat(auto-fill, minmax(22.50em, 1fr)); }
	#sm > * + *			{ 	height: 30.00em; border-radius: 0.25em; overflow: hidden; }
	#sm > * > iframe	{ 	width: 100.0%; height: 100.0%; }

	/* --- News --- */	

	#news a 			{ 	padding-bottom: 2.50em; }
	#news a > figure	{ 	border-radius: 0.25em; }
	#news a > .link 	{ 	position: absolute; bottom: 0; right: 0; } 
	
	#news a:has(.link.akt) 	{ 	grid-column: 1 / -1;  } 

	/* --- ASP --- */	

	#asp				{ 	grid-template-columns: repeat(auto-fill, minmax(15.00em, 1fr)); }
	#asp figure			{ 	aspect-ratio: 4/3; border-radius: 0.25em; }
	#asp .box			{ 	padding: 1.50em 1.00em 1.00em; }
	
	/* --- Form --- */	

	.history			{ 	position: relative; display: flex; flex-flow: column wrap; justify-content: space-between; cursor: n-resize; }
	.history > div		{ 	height: 35.00em; margin: 1.00em -2.00em -2.00em; border-top-width: 1px; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--sofa) transparent; }
	.history > div > div		{ 	width: 100.0%; padding-right: 2.00em; display: grid; grid-template-columns: 5.00em auto; }
	.history > div > div > div	{ 	padding: 1.00em 0 1.00em 2.00em; }
	.history > div > div > div + div	{ 	border-top-width: 1px; border-top-style: dotted; padding: 1.00em 1.00em 1.00em 0; }
	.history > div > :last-child 		{ 	margin-bottom: 6.00em; }

	.history:before		{ 	content: 'height'; position: absolute; z-index: 2; bottom: 1.00em; right: 0.75em; transform: scale(2); }
	.history:after		{ 	content: ''; position: absolute; bottom: 0; left: 0; width: 100.0%; height: 10.0em; background-image: linear-gradient(0deg, white, transparent); }

	/* --- Form --- */	

	#form				{ 	display: flex; gap: var(--pa); flex-flow: row wrap; justify-content: space-between; }
	#form > div			{ 	flex: 1 1 20.00em; }
	#form > form		{ 	flex: 1 1 61.80%; padding: 1.50em var(--pa); border-radius: 0.25em; display: flex; gap: var(--pa); flex-flow: row wrap; justify-content: space-between; }
	#form > form > div	{ 	flex: 1 1 20.00em; display: flex; gap: 0.50em; flex-flow: column wrap; justify-content: space-between; }
	#form > form > div:last-child	{ 	flex: 0 0 100.0%; gap: 2.00em; flex-flow: row wrap; justify-content: space-between; align-items: center; }

/*	=================================
		Detail + Compare
	================================= */

#detail					{	display: flex; gap: 2.00em; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; }  
#detail	> div			{	flex: 62.80 1 320px; display: sticky; top: 7.50em; }  
#detail	> div + div		{	flex: 38.20 1 320px; display: grid; place-items: center; }  

#detail	> div + div	> div	{	display: grid; gap: 0; width: clamp(320px, 62.80%, 40.00em); margin: 0 auto; }  
#detail	.link				{	margin-top: 1.00em }  
#detail	.btn				{	margin-top: 2.50em }  

	#gallery				{	display: grid; gap: 1.00em; padding-bottom: 0.125em; grid-template-columns: repeat(auto-fill, minmax(4.00em, 1fr)); }  
	#gallery > *			{	border-width: 1px; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: var(--gray-1); }  
	#gallery > div			{	grid-column: 1 / -1; aspect-ratio: 1/1; display: none; place-items: center; overflow: hidden; }  
	#gallery > div > iframe			{	display: block; box-shadow: 0 0 0 100.0em black; }  
	#gallery > div > figure			{ 	width: 100.0%; height: 100.0%; aspect-ratio: 1/1; background-image: none; }
	#gallery > div > figure	> img	{ 	object-fit: contain; }
	
	#gallery > label			{	aspect-ratio: 1/1; } 
	#gallery > label > figure	{ 	width: 100.0%; height: 100.0%; aspect-ratio: 1/1; background-image: none; }
		
	#gallery input#gallery-01:checked ~ div.img-01,  
	#gallery input#gallery-02:checked ~ div.img-02, 
	#gallery input#gallery-03:checked ~ div.img-03,  
	#gallery input#gallery-04:checked ~ div.img-04, 
	#gallery input#gallery-05:checked ~ div.img-05,  
	#gallery input#gallery-06:checked ~ div.img-06,  
	#gallery input#gallery-07:checked ~ div.img-07, 
	#gallery input#gallery-08:checked ~ div.img-08, 
	#gallery input#gallery-09:checked ~ div.img-09		{	display: grid; }  
	
	#gallery input#gallery-01:checked ~ label[for=gallery-01],  
	#gallery input#gallery-02:checked ~ label[for=gallery-02],
	#gallery input#gallery-03:checked ~ label[for=gallery-03],  
	#gallery input#gallery-04:checked ~ label[for=gallery-04],  
	#gallery input#gallery-05:checked ~ label[for=gallery-05],  
	#gallery input#gallery-06:checked ~ label[for=gallery-06], 
	#gallery input#gallery-07:checked ~ label[for=gallery-07],  
	#gallery input#gallery-08:checked ~ label[for=gallery-08],  
	#gallery input#gallery-09:checked ~ label[for=gallery-09] 	{	border-width: 0; box-shadow: 0 0 0 0.125em var(--cta); }	
	
/*	=================================
		Elements
	================================= */
	
.control				{	position: sticky; z-index: 3; top: 3.50em; left: 0; }
.control > div			{	height: 4.00em; padding: 0 var(--pa); }
.control > div > div	{	height: 100.0%; border-bottom-width: 1px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; }
.control > div span		{	display: flex; gap: 1.00em; flex-flow: row wrap; justify-content: space-between; align-content: center; }

.btn			{	position: relative; height: 3.00em; padding: 0 1.00em 0 3.00em; display: inline-grid; place-items: center start; border-radius: 0.125em; }
.btn:before		{ 	position: absolute; top: 0; left: 0; height: 100.0%; aspect-ratio: 1/1; display: grid; place-items: center; }

	.btn:before			{ 	content: 'east'; } 						.btn:after			{ 	content: 'Mehr erfahren'; }
	.btn.all:before		{ 	content: 'local_offer'; } 				.btn.all:after		{ 	content: 'Alle Angebote'; }
	.btn.con:before		{ 	content: 'perm_phone_msg'; } 			.btn.con:after		{ 	content: 'Kontakt'; }
	.btn.form:before	{ 	content: 'sell'; } 						.btn.form:after		{ 	content: 'Angebot anfordern'; }
	.btn.form2:before	{ 	content: 'send'; } 						.btn.form2:after	{ 	content: 'Kontaktformular'; }
	.btn.sale:before	{ 	content: 'add_shopping_cart'; } 		.btn.sale:after		{ 	content: 'Warenkorb'; }
	.btn.send:before	{ 	content: 'send'; } 						.btn.send:after		{ 	content: 'Nachricht senden'; }

.link			{	position: relative; height: 2.00em; padding-right: 2.50em; display: inline-grid; place-items: center end; }
p > .link		{	float: right; }
.link:before	{ 	position: absolute; top: -0.125em; right: 0; height: 100.0%; aspect-ratio: 1/1; display: grid; place-items: center start; }

	.link:before		{ 	content: 'east'; } 						.link:after 		{ 	content: 'Mehr erfahren'; }
	.link.blank:before	{ 	content: 'help_center'; } 				.link.blank:after 	{ 	content: ''; }
	.link.akt:before	{ 	content: 'archive'; } 					.link.akt:after		{ 	content: 'Weitere Pressmitteilungen'; }
	.link.asp:before	{ 	content: 'person'; } 					.link.asp:after		{ 	content: 'Ansprechpartner'; }
	.link.con:before	{ 	content: 'perm_phone_msg'; } 			.link.con:after		{ 	content: 'Kontakt'; }
	.link.form:before	{ 	content: 'send'; } 						.link.form:after	{ 	content: 'Kontaktformular'; }
	.link.loc:before	{ 	content: 'place'; } 					.link.loc:after 	{ 	content: ''; }
	.link.job:before	{ 	content: 'person_search'; } 			.link.job:after		{ 	content: none; }
	.link.offer:before	{ 	content: 'download'; } 					.link.offer:after 	{ 	content: 'Downlod Angebot'; }
	.link.pdf:before	{ 	content: 'download'; } 					.link.pdf:after 	{ 	content: 'Downlod Prospekt'; }
	.link.pdf2:before	{ 	content: 'download'; } 					.link.pdf2:after 	{ 	content: ''; }
	.link.pro:before	{ 	content: 'east'; } 						.link.pro:after 	{ 	content: ''; }
	
	.link[href^="#edit"]:before		{ 	content: 'description'; } 	.link[href^="#edit"]:after 		{ 	content: 'Beschreibung'; }
	.link[href^="#detail"]:before	{ 	content: 'list'; } 			.link[href^="#detail"]:after 	{ 	content: 'Details'; }

a.ico			{	position: relative; height: 2.00em; padding-left: 2.00em; display: inline-grid; place-items: center; }
a.ico:before	{	content: 'east'; position: absolute; top: -0.125em; left: 0; height: 100.0%; aspect-ratio: 1/1; display: grid; place-items: center start; }
		
	a.ico.hot:before	{	top: 0; }
	a.ico.fax:before	{	content: 'fax'; }
	a.ico.form:before	{	content: 'forward_to_inbox'; }
	a.ico.mail:before	{	content: 'mail_outline'; }
	a.ico.mob:before	{	content: 'phone_iphone'; transform: rotate(-36deg); left: -0.125em; }		
	a.ico.tel:before	{	content: 'phone'; }
								
.icon 					{	width: 2.50em; aspect-ratio: 1/1; display: inline-grid; place-items: center; }							
.icon:before 			{ 	content: 'east'; }
.icon.close:before 		{ 	content: 'close'; }

figure				{ 	position: relative; aspect-ratio: 16/9; overflow: hidden; }
figure.free			{ 	aspect-ratio: unset; }
figure > img 		{ 	width: 100.0%; height: 100.0%; margin: 0 auto; object-fit: cover; object-position: 50% 50%; }
figure.top > img 	{ 	object-position: 50% 0%; }

details summary					{ 	position: relative; width: 100.0%; padding-left: 3.00em; height: 3.00em; display: inline-grid; place-items: center start; }
details summary:before			{ 	content: 'add_circle_outline'; position: absolute; top: 0; left: 0m; height: 100.0%; width: 1.00em; display: inline-grid; place-items: center right; }
details[open] summary:before	{ 	content: 'remove_circle_outline'; }

			details	> div		{ 	max-height: 0; }
			details[open] > div	{ 	max-height: 1000em; }
			
			details	table		{ 	border-width: 0; }
			details	td			{ 	vertical-align: bottom; }
			details	tr:last-child > td 	{ 	padding-bottom: 0; }

table				{ 	width: 100.0%; margin: 0; border-width: 1px 0; }  
table tr > td		{ 	padding: 0.50em 0; vertical-align: top; }  
table tr + tr > td	{ 	border-top-width: 1px; }  
table td + td		{ 	padding-left: 1.00em; text-align: right; white-space: nowrap; vertical-align: bottom; } 
table td:last-child:not(td[colspan])	{ 	padding-left: 0.50em; text-align: left; vertical-align: bottom; } 

.icon.toplink 			{ 	position: fixed; z-index: 5; bottom: 0; right: 0; }
.icon.toplink:before	{ 	content: 'expand_less'; }

a[href^="javascript:history.back()"]		{	position: relative; height: 2.00em; padding-left: 2.00em; display: inline-grid; place-items: center end; }
a[href^="javascript:history.back()"]:before	{	content: 'arrow_back'; position: absolute; top: 0; left: 0; height: 100.0%; aspect-ratio: 1/1; display: grid; place-items: center start; }
		
/* --- Indicator --- */

.indi:after		{	content: ''; position: absolute; z-index: 2; top: 0; left: auto; right: 0; width: 5.00em; aspect-ratio: 2/1; background-repeat: no-repeat; background-position: center; }

	.indi.com:after	{	background-color: rgba(003,105,054,1.00); 	background-size: 62.80% auto; background-image: url('../img/logos/Logo_CombiLift_inv.svg'); }  
	.indi.hau:after	{	background-color: var(--gray-8); 			background-size: 72.00% auto; background-image: url(../img/logos/Logo_Haulotte_inv.svg); 	}
	.indi.jcb:after	{	background-color: rgba(252,176,038,1.00); 	background-size: 62.80% auto; background-image: url(../img/logos/Logo_JCB.svg); 			} 
	.indi.kae:after	{	background-color: rgba(255,237,000,1.00); 	background-size: 62.80% auto; background-image: url(../img/logos/Logo_Kaercher_black.svg); 	}	  
	.indi.kon:after	{	background-color: rgba(247,028,028,1.00); 	background-size: 82.00% auto; background-image: url(../img/logos/Logo_Konecranes_inv.svg); 	}
	.indi.lin:after	{	background-color: rgba(160,000,032,1.00); 	background-size: 62.80% auto; background-image: url(../img/logos/Logo_Linde.svg); 		}
	.indi.mov:after	{	background-color: var(--gray-9);  			background-size: 62.80% auto; background-image: url(../img/logos/Logo_Movexx_inv.svg); 	} 
	.indi.sen:after	{	background-color: rgba(072,168,037,1.00); 	background-size: 72.00% auto; background-image: url(../img/logos/Logo_Sennebogen_inv.svg);	}

	.intro a.indi:after 	{ 	width: 7.50em; top: 0; left: auto; right: 0; }
	
	.indi.top:after	{	content: 'Sonderangebot!'; position: absolute; z-index: 2; top: 0; left: auto; right: 0; width: auto; aspect-ratio: unset; padding: 0.50em; background-color: red; color: white; }

/*	=================================
		Effects
	================================= */

::before, ::after, * 	{	transition: all 150ms ease-in-out 0ms; }

.btn:hover 	{ 	box-shadow: inset 0 0 0 3.00em rgba(000,000,000,0.25); }

body.sticky header, body.sticky .hh { 	height: 3.50em; }

article	> a:hover > figure > img,
a.pro:hover figure > img,
#asp div:hover figure > img			{ 	transform: scale(1.20); }

.lazyImage img 			{ 	opacity: 1; transform: scale(1); transition: opacity .5s, transform .5s; }
.lazyImageWaiting img 	{ 	opacity: 0; transform: scale(0); transition: none; }

/*	=================================
		Mobil
	================================= */
	
@media ( max-width: 940px ) { 	
	.intro a > div + figure { 	order: 1; }
	header > div > .brand	{ 	max-width: 20.00em; }
	header > div > .hh 		{ 	display: grid; }
	section > .img,
	header > div > .nav 	{ 	display: none; }
	article#oems			{ 	grid-template-columns: repeat(auto-fill, minmax(10.00em, 1fr)); }
	
	header > div > .hh 		{ 	display: grid; }
	nav #block-00			{ 	display: block; }
	}

@media ( max-width: 940px ) { 	nav > .nav-small	{ 	display: block; } 	nav > .nav-large	{ 	display: none; }}
@media ( min-width: 941px ) { 	nav > .nav-large	{ 	display: grid; } 	nav > .nav-small	{ 	display: none; }}

/*	=================================
		Layout
	================================= 
	
	*	{	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
	================================= */