/*	=================================
	Sofa, Color of the Year
    ================================= */
    
:root			{	--sofa: 		rgba(240,238,233,1.00);  /* #F0EEE9 */
					--sofa-txt: 	rgba(129,130,125,1.00);  /* #81827d */ }

::-moz-selection	{	}
::selection			{	} 

	#intro > div:before, #menu a:before, .cat:before, nav,.teaser span > span:nth-child(2):before, .work, .work > span:before, #quote, /* #kunden, */ #cookies:before, #coty .cat:before, .coty
	{	background-color: var(--sofa); color: var(--sofa-txt); }	
	
	.cat, .abc span, p.ini::first-letter, /**/ .work *, #quote * 
	{	color: var(--sofa-txt); }
	
	#kunden 
	{	background-color: var(--sofa-txt); }

	input:focus, textarea:focus
	{	border-color: var(--sofa-txt); }
								
/*	=================================
		BG-Colors
	================================= */	
	
	/* BG White cover */  

	{	background-color: rgba(255,255,255,0.60); color: rgba(000,000,000,1.00); }
	
	/* BG White */  
	header, #menu, main, #quick > div > div, #cookies:before
	{	background-color: rgba(255,255,255,1.00); color: rgba(000,000,000,1.00); }

	/* BG Gray cover */  
	#print, #kontakt, #coty, #konzept	
	{	background-color: rgba(190,201,206,0.12); }
	
	/* BG Gray light (#bec9ce) */  
	ul.item li:before	
	{	background-color: rgba(190,201,206,1.00); color: rgba(255,255,255,1.00); }
	
	/* BG Gray dark (#8e9ea6) */
	#quick > div, .quicktab  
	{	background-color: var(--sofa-txt);  /* background-color: rgba(142,158,166,1.00); */ color: rgba(255,255,255,1.00); }

/*	=================================
		TXT-Colors
	================================= */
	
	/* TXT White */  
	nav a, #start *, /* .work *, #quote *, */ #thanks *, #quick > div > div:nth-child(1) *, .quicktab > span
	{	color: rgba(255,255,255,1.00); }
	
	/* TXT Gray (#4f636c) */  
	*, input, textarea 
	{	color:  rgba(079,099,108,1.0); }
	
	/* TXT Black */  
	a, strong, h1, h3, input:focus, textarea:focus, #cookies, .teaser span span:nth-child(3), .sub
	{	color: rgba(000,000,000,1.00); }

/*	=================================
		BORDERS-Colors
	================================= */
	
	/* Border Standard (transparent) */
	*
	{	border-color: rgba(000,000,000,0.15); }

/*	=================================
		BORDERS-Illu's
	================================= */

#kompetenz .illu 	{	background-image: 		url('../img/illu/typometer/typometer-left.png'), url('../img/illu/typometer/typometer-right.png'), url('../img/icon/icons_kogw-concept.svg'); 
						background-repeat:		no-repeat, no-repeat, no-repeat;
						background-position:	left, right, center;													
						background-size: 		auto 100.0%, auto 100.0%, auto 38.20%; }

#print .illu 		{	background-image: 		url('../img/illu/popart.svg'); 
						background-repeat:		no-repeat;
						background-position:	top -10px right;													
						background-size: 		100.0% auto; }

#print				{	background-image: 		url('../img/illu/passer/passer-lo.svg'), 
												url('../img/illu/passer/passer-ro.svg'), 
												url('../img/illu/passer/passer-ru.svg'), 
												url('../img/illu/passer/passer-lu.svg'), 
												url('../img/illu/passer/passer-mm.svg'), 
												url('../img/illu/passer/passer-mm.svg'), 
												url('../img/illu/passer/passer-mo.svg'), 
												url('../img/illu/passer/passer-mu.svg'), 
												url('../img/illu/passer/passer-line-cmyk.svg'),
												url('../img/illu/passer/passer-line-gray.svg');
						
						background-repeat:		no-repeat,
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat, 
												no-repeat;
			
						background-position:	left top,
												right top, 
												right bottom, 
												left bottom, 
												left center, 
												right center, 
												top center, 
												bottom center, 
												left  6.00vmin bottom 1.00vmin, 
												right 6.00vmin bottom 1.00vmin;
			
						background-size:		auto 3.00vmin,
												auto 3.00vmin, 
												auto 3.00vmin, 
												auto 3.00vmin, 
												3.00vmin auto, 
												3.00vmin auto, 
												auto 3.00vmin, 
												auto 3.00vmin, 
												auto 1.50vmin, 
												auto 1.50vmin; }
								
#print-2 .illu 		{	background-image: 		url('../img/illu/illu-print.jpg'); 
						background-repeat:		no-repeat;
						background-position:	left, center;													
						background-size: 		contain; }

#print-cd .illu 	{	background-image: 		url('../img/illu/illu-cd.jpg'); /* Fehlt! */ 
						background-repeat:		no-repeat;
						background-position:	left, center;													
						background-size: 		contain; }
						
#print-ed .illu 	{	background-image: 		url('../img/illu/illu-ed.jpg'); /* Fehlt! */ 
						background-repeat:		no-repeat;
						background-position:	left, center;													
						background-size: 		contain; }
	
#coty .illu 		{	background-image: 		url('../img/illu/coty/Logo_Pantone.svg'), url('../img/illu/coty/bg_coty.jpg'); 
						background-repeat:		no-repeat, no-repeat;
						background-position:	top 20.00% center, center;													
						background-size: 		auto 50.00%, 100.0% auto; }

#online-2 .illu 	{	background-image: 		url('../img/illu/illu-online.jpg'); /* Fehlt! */ 
						background-repeat:		no-repeat;
						background-position:	left, center;													
						background-size: 		contain; }
												
#fibel .illu 		{	background-image: 		url('../img/illu/illu-fibel.png'); 
						background-repeat:		no-repeat;
						background-position:	left, center;													
						background-size: 		contain; }
					
/*	=================================
		Konkret
	================================= */

.work		{	background-size: 100.0%; background-repeat: no-repeat; background-position: center; }
.work:hover	{	background-size: 180.0%; }

.work-01	{	background-image: url('../img/works/itt.jpg'); }
.work-02	{	background-image: url('../img/works/ott.jpg'); }
.work-03	{	background-image: url('../img/works/jue.jpg'); }
.work-04	{	background-image: url('../img/works/dur.jpg'); }	
.work-05	{	background-image: url('../img/works/myt.jpg'); }
.work-06	{	background-image: url('../img/works/ger.jpg'); }	
.work-07	{	background-image: url('../img/works/drk.jpg'); }	
.work-08	{	background-image: url('../img/works/sel.jpg'); }
.work-09	{	background-image: url('../img/works/com.jpg'); }
.work-10	{	background-image: url('../img/works/reu.jpg'); }	
.work-11	{	background-image: url('../img/works/rbk.jpg'); }

			.work > span.cover > a 		{	background-size: auto 3.60rem; background-repeat: no-repeat; background-position: top center; }
			.work-03 > span.cover > a 	{	padding-top: 4.20rem; background-image: url('../img/works/Logo-MB.svg');  }
			.work-04 > span.cover > a 	{	padding-top: 4.20rem; background-image: url('../img/works/Logo-MB.svg');  }
			.work-05 > span.cover > a 	{	padding-top: 4.20rem; background-image: url('../img/works/Logo-myt.svg'); }
			.work-07 > span.cover > a 	{	padding-top: 6.00rem; background-image: url('../img/works/Logo-DRK.svg');  background-size: auto 4.80rem; }
			.work-08 > span.cover > a 	{	padding-top: 6.00rem; background-image: url('../img/works/Logo-SL.svg');   background-size: auto 4.80rem; }
			.work-09 > span.cover > a 	{	padding-top: 6.00rem; background-image: url('../img/works/Logo-BASF.svg'); background-size: auto 6.00rem; }			
			.work-10 > span.cover > a 	{	padding-top: 4.20rem; background-image: url('../img/works/Logo-RP.svg');  }
			.work-11 > span.cover > a 	{	padding-top: 5.40rem; background-image: url('../img/works/Logo-RBK.svg');  background-size: auto 4.80rem; }
		
/*	=================================
		Kunden
	================================= */

#kunden *				{	background-size: 100.0% auto; background-repeat: no-repeat; background-position: center; }
	
	#kunden .basf		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_BASF-white.svg'); }
	#kunden .dkes		{	background-size: auto 100.0%; background-image: url('../img/brands/Logo_DK-Elektro-Service_rund-white.svg'); }
	#kunden .drk		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_DRK-white.svg'); }
	#kunden .eikboom	{	background-size: auto 90.00%; background-image: url('../img/brands/Logo_Eikboom-white.svg'); }
	#kunden .ford		{	background-size: 90.00% auto; background-image: url('../img/brands/Logo_Ford-white.svg'); }
	#kunden .fsn		{	background-size: auto 70.00%; background-image: url('../img/brands/Logo_FSN-white.svg'); }
	#kunden .futter		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_Futterhaus-white.svg'); }
	#kunden .glasurit	{	background-size: auto 80.00%; background-image: url('../img/brands/Logo_Glasurit-white.svg'); }
	#kunden .joker		{	background-size: auto 100.0%; background-image: url('../img/brands/Logo_Taxijoker.svg'); }
	#kunden .itt		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_ITT-white.svg'); }
	#kunden .loboclean	{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_loboclean-white.svg'); }
	#kunden .mb			{	background-size: auto 80.00%; background-image: url('../img/brands/Logo_MB-white.svg'); }
	#kunden .myt		{	background-size: 90.00% auto; background-image: url('../img/brands/Logo_mytire-white.svg'); }
	#kunden .partfit	{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_PARTFIT-24-white.svg'); }
	#kunden .rp			{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_Reuterpassage-white.svg'); }
	#kunden .sdn		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_SDNord-white.svg'); }
	#kunden .seat		{	background-size: auto 80.00%; background-image: url('../img/brands/Logo_Seat-white.svg'); }
	#kunden .sl			{	background-size: auto 90.00%; background-image: url('../img/brands/Logo_SL-white.svg'); }
	#kunden .swla		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_Switch-Lane_white.svg'); }
	#kunden .task		{	background-size: 90.00% auto; background-image: url('../img/brands/Logo_Toyota-TASK-white.svg'); }
	#kunden .tuev		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_TUeV-NORD-Mobilitaet-white.svg'); }
	#kunden .vita		{	background-size: 90.00% auto; background-image: url('../img/brands/Logo_VitaVitalis-white.svg'); }
	#kunden .volvo		{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_Volvo-Word-white.svg'); }
	#kunden .vw			{	background-size: auto 80.00%; background-image: url('../img/brands/Logo_VW-white.svg'); }
	#kunden .webasto	{	background-size: 100.0% auto; background-image: url('../img/brands/Logo_Webasto-white.svg'); }
	#kunden .gg			{	background-size: auto 100.0%; background-image: url('../img/brands/Logo_GG-white.svg'); }
	#kunden .hsr		{	background-size: auto 100.0%; background-image: url('../img/brands/Logo_HSR-white.svg'); }

/*	=================================
		ABC
	================================= */
	
	.abc div.grid-item:nth-of-type(1)  span::after	{	content: '01'; }
	.abc div.grid-item:nth-of-type(2)  span::after	{	content: '02'; }
	.abc div.grid-item:nth-of-type(3)  span::after	{	content: '03'; }
	.abc div.grid-item:nth-of-type(4)  span::after	{	content: '04'; }
	.abc div.grid-item:nth-of-type(5)  span::after	{	content: '05'; }
	.abc div.grid-item:nth-of-type(6)  span::after	{	content: '06'; }
	.abc div.grid-item:nth-of-type(7)  span::after	{	content: '07'; }
	.abc div.grid-item:nth-of-type(8)  span::after	{	content: '08'; }
	.abc div.grid-item:nth-of-type(9)  span::after	{	content: '09'; }
	.abc div.grid-item:nth-of-type(10) span::after	{	content: '10'; }

	.abc div.grid-item:nth-of-type(11) span::after	{	content: '11'; }
	.abc div.grid-item:nth-of-type(12) span::after	{	content: '12'; }
	.abc div.grid-item:nth-of-type(13) span::after	{	content: '13'; }
	.abc div.grid-item:nth-of-type(14) span::after	{	content: '14'; }
	.abc div.grid-item:nth-of-type(15) span::after	{	content: '15'; }
	.abc div.grid-item:nth-of-type(16) span::after	{	content: '16'; }
	.abc div.grid-item:nth-of-type(17) span::after	{	content: '17'; }
	.abc div.grid-item:nth-of-type(18) span::after	{	content: '18'; }
	.abc div.grid-item:nth-of-type(19) span::after	{	content: '19'; }
	.abc div.grid-item:nth-of-type(20) span::after	{	content: '20'; }

	.abc div.grid-item:nth-of-type(21) span::after	{	content: '21'; }
	.abc div.grid-item:nth-of-type(22) span::after	{	content: '22'; }
	.abc div.grid-item:nth-of-type(23) span::after	{	content: '23'; }
	.abc div.grid-item:nth-of-type(24) span::after	{	content: '24'; }
	.abc div.grid-item:nth-of-type(25) span::after	{	content: '25'; }
	.abc div.grid-item:nth-of-type(26) span::after	{	content: '26'; }
	.abc div.grid-item:nth-of-type(27) span::after	{	content: '27'; }
	.abc div.grid-item:nth-of-type(28) span::after	{	content: '28'; }
	.abc div.grid-item:nth-of-type(29) span::after	{	content: '29'; }
	.abc div.grid-item:nth-of-type(30) span::after	{	content: '30'; }
	
	.abc div.grid-item:nth-of-type(31) span::after	{	content: '31'; }
	.abc div.grid-item:nth-of-type(32) span::after	{	content: '32'; }
	.abc div.grid-item:nth-of-type(33) span::after	{	content: '33'; }
	.abc div.grid-item:nth-of-type(34) span::after	{	content: '34'; }
	.abc div.grid-item:nth-of-type(35) span::after	{	content: '35'; }
	.abc div.grid-item:nth-of-type(36) span::after	{	content: '36'; }
	.abc div.grid-item:nth-of-type(37) span::after	{	content: '37'; }
	.abc div.grid-item:nth-of-type(38) span::after	{	content: '38'; }
	.abc div.grid-item:nth-of-type(39) span::after	{	content: '39'; }
	.abc div.grid-item:nth-of-type(40) span::after	{	content: '40'; }

	.abc div.grid-item:nth-of-type(41) span::after	{	content: '41'; }
	.abc div.grid-item:nth-of-type(42) span::after	{	content: '42'; }
	.abc div.grid-item:nth-of-type(43) span::after	{	content: '43'; }
	.abc div.grid-item:nth-of-type(44) span::after	{	content: '44'; }
	.abc div.grid-item:nth-of-type(45) span::after	{	content: '45'; }
	.abc div.grid-item:nth-of-type(46) span::after	{	content: '46'; }
	.abc div.grid-item:nth-of-type(47) span::after	{	content: '47'; }
	.abc div.grid-item:nth-of-type(48) span::after	{	content: '48'; }
	.abc div.grid-item:nth-of-type(49) span::after	{	content: '49'; }
	.abc div.grid-item:nth-of-type(50) span::after	{	content: '50'; }

	.abc div.grid-item:nth-of-type(51) span::after	{	content: '51'; }
	.abc div.grid-item:nth-of-type(52) span::after	{	content: '52'; }
	.abc div.grid-item:nth-of-type(53) span::after	{	content: '53'; }
	.abc div.grid-item:nth-of-type(54) span::after	{	content: '54'; }
	.abc div.grid-item:nth-of-type(55) span::after	{	content: '55'; }
	.abc div.grid-item:nth-of-type(56) span::after	{	content: '56'; }
	.abc div.grid-item:nth-of-type(57) span::after	{	content: '57'; }
	.abc div.grid-item:nth-of-type(58) span::after	{	content: '58'; }
	.abc div.grid-item:nth-of-type(59) span::after	{	content: '59'; }
	.abc div.grid-item:nth-of-type(60) span::after	{	content: '60'; }

	.abc div.grid-item:nth-of-type(61) span::after	{	content: '61'; }
	.abc div.grid-item:nth-of-type(62) span::after	{	content: '62'; }
	.abc div.grid-item:nth-of-type(63) span::after	{	content: '63'; }
	.abc div.grid-item:nth-of-type(64) span::after	{	content: '64'; }
	.abc div.grid-item:nth-of-type(65) span::after	{	content: '65'; }
	.abc div.grid-item:nth-of-type(66) span::after	{	content: '66'; }
	.abc div.grid-item:nth-of-type(67) span::after	{	content: '67'; }
	.abc div.grid-item:nth-of-type(68) span::after	{	content: '68'; }
	.abc div.grid-item:nth-of-type(69) span::after	{	content: '69'; }
	.abc div.grid-item:nth-of-type(70) span::after	{	content: '70'; }

	.abc div.grid-item:nth-of-type(71) span::after	{	content: '71'; }
	.abc div.grid-item:nth-of-type(72) span::after	{	content: '72'; }
	.abc div.grid-item:nth-of-type(73) span::after	{	content: '73'; }
	.abc div.grid-item:nth-of-type(74) span::after	{	content: '74'; }
	.abc div.grid-item:nth-of-type(75) span::after	{	content: '75'; }
	.abc div.grid-item:nth-of-type(76) span::after	{	content: '76'; }
	.abc div.grid-item:nth-of-type(77) span::after	{	content: '77'; }
	.abc div.grid-item:nth-of-type(78) span::after	{	content: '78'; }
	.abc div.grid-item:nth-of-type(79) span::after	{	content: '79'; }
	.abc div.grid-item:nth-of-type(80) span::after	{	content: '80'; }

	.abc div.grid-item:nth-of-type(81) span::after	{	content: '81'; }
	.abc div.grid-item:nth-of-type(82) span::after	{	content: '82'; }
	.abc div.grid-item:nth-of-type(83) span::after	{	content: '83'; }
	.abc div.grid-item:nth-of-type(84) span::after	{	content: '84'; }
	.abc div.grid-item:nth-of-type(85) span::after	{	content: '85'; }
	.abc div.grid-item:nth-of-type(86) span::after	{	content: '86'; }
	.abc div.grid-item:nth-of-type(87) span::after	{	content: '87'; }
	.abc div.grid-item:nth-of-type(88) span::after	{	content: '88'; }
	.abc div.grid-item:nth-of-type(89) span::after	{	content: '89'; }
	.abc div.grid-item:nth-of-type(90) span::after	{	content: '90'; }

	.abc div.grid-item:nth-of-type(91) span::after	{	content: '91'; }
	.abc div.grid-item:nth-of-type(92) span::after	{	content: '92'; }
	.abc div.grid-item:nth-of-type(93) span::after	{	content: '93'; }
	.abc div.grid-item:nth-of-type(94) span::after	{	content: '94'; }
	.abc div.grid-item:nth-of-type(95) span::after	{	content: '95'; }
	.abc div.grid-item:nth-of-type(96) span::after	{	content: '96'; }
	.abc div.grid-item:nth-of-type(97) span::after	{	content: '97'; }
	.abc div.grid-item:nth-of-type(98) span::after	{	content: '98'; }
	.abc div.grid-item:nth-of-type(99) span::after	{	content: '99'; }
	.abc div.grid-item:nth-of-type(100) span::after	{	content: '100'; }

/*	=================================
		Ende
	================================= */