@charset "UTF-8";

html		{overflow:scroll !important;}

.navigation	{flex-wrap:nowrap;
       		 display:flex;
       		 justify-content:space-between;
			 width:100%;
			 height:100%;
			 align-items: center;
			 font-size: 18px;
			 color:white;
			 justify-content: space-between;}

.impr		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

.kon		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

.kun		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

.new		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

.lei		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

.hom		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:0px;}

#logo		{opacity:0;
		 	 transition:opacity 0.3s ease;
			 margin-left:15px;
			 margin-top:5px;
			 z-index:100;}

.head		{display:grid;
		 	 grid-template-columns: 0.2fr 2fr 5fr 1.5fr 0.3fr 0fr;
			 width:100%;
		 	 height:100px;
		 	 align-items: center;}

.icons		{margin-right:20px;
			 display:grid;
			 grid-template-columns: 1fr 1fr;
			 position: relative;
			 top:7px;}

.menue		{display:none;
		 	 cursor: pointer;}

.home-container		{display:grid;
					 grid-template-columns: 1fr 1fr;
					 width:100%;}

.schuh				{border:3px solid #4F8CC9;
					 border-radius: 10px;
					 background-color: white;
					 margin-top:30px;
					 padding-bottom:5px;
					 margin-left: 20px;
					 margin-right:20px;
					 width:410px;
				  	 height:410px;
					}

.produktfotografie	{margin-top:30px;
					 line-height:150%;
					 margin-left:40px;
					 margin-bottom:30px;}

.produktfotografie1	{margin-top:30px;
					 line-height:150%;
					 margin-left:40px;
					 margin-bottom:30px;}

.header		{background-color:#A7C5E4;
			 width:100%;
			 height:100%;
			 display:flex;}

.header-test{height:384px;
			 margin:0px auto;
			 width:768px;}



/*LEISTUNGEN...................................*/
.leistung-container1-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container2-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container3-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container4-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container5-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container6-tablet {display:block;
						  	 background-color:#e4e4e4;}

.leistung-container1 {display:none;}
.leistung-container2 {display:none;}
.leistung-container3 {display:none;}
.leistung-container4 {display:none;}

dl {display:grid;
	grid-template-columns: 1fr 1fr;
	width:100%;}

dd  {display:none;}


/*Medienvorstufe...................................*/
#medienimg-tablet		{vertical-align: middle;
						 z-index:100;
				 		 position:relative;
						 display:flex;
				 		 postion:relative;
				 		 top:30px;
				 		 background-image: url("img/leistungen/medienvorstufe.svg");
				 		 width:100px;
				 		 height:100px;
						 cursor: pointer;}

#bildwechsel1-tablet:hover #medienimg-tablet {background-image: url("img/leistungen/medienvorstufe_hover.svg");
							   		 	      transition:all 0.5s ease;}

#leistungsinfo-tablet:active {color:black;
		  		  	  		  text-decoration: none;}

#leistungsinfo-tablet:visited {color:black;
		  		  			   text-decoration: none;}

#leistungsinfo-tablet		   {color:black;
		  		  				text-decoration: none;}

.medienvorstufe	{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testeins 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*Illustration...................................*/
#illuimg-tablet		{vertical-align: middle;
				 	z-index:100;
				 	position:relative;
					display:flex;
				 	postion:relative;
				 	top:30px;
				 	background-image: url("img/leistungen/illustration.svg");
				 	width:100px;
				 	height:100px;
					cursor: pointer;}

#bildwechsel2-tablet:hover #illuimg-tablet {background-image: url("img/leistungen/illustration_hover.svg");
							   				transition:all 0.5s ease;}

#leistungsinfo1-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo1-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo1-tablet		   {color:black;
		  		  				text-decoration: none;}

.illustration	{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testzwei 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:-97.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*Produktbilder...................................*/
#proimg-tablet			{vertical-align: middle;
				 		 z-index:100;
						 position:relative;
						 display:flex;
						 postion:relative;
						 top:30px;
						 background-image: url("img/leistungen/produktfoto.svg");
						 width:100px;
						 height:100px;
						 cursor: pointer;}

#bildwechsel3-tablet:hover #proimg-tablet {background-image: url("img/leistungen/produktfoto_hover.svg");
							   			   transition:all 0.5s ease;}

#leistungsinfo2-tablet:active {color:black;
		  		  	  		   text-decoration: none;}

#leistungsinfo2-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo2-tablet		   {color:black;
		  		  				text-decoration: none;}

.produktfoto	{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testdrei 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}



/*App...................................*/
#appimg-tablet			{vertical-align: middle;
				 		 z-index:100;
				 		 position:relative;
						 display:flex;
				 		 postion:relative;
				 		 top:30px;
				 		 background-image: url("img/leistungen/app.svg");
				 		 width:100px;
				  		 height:100px;
						 cursor: pointer;}

#bildwechsel4-tablet:hover #appimg-tablet {background-image: url("img/leistungen/app_hover.svg");
							   			   transition:all 0.5s ease;}

#leistungsinfo3-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo3-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo3-tablet		   {color:black;
		  		  				text-decoration: none;}

.app			{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testvier 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:-97.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*Webdesign...................................*/
#webimg-tablet			{vertical-align: middle;
						 z-index:100;
				 		 position:relative;
				 		 display:flex;
				 		 postion:relative;
				 		 top:30px;
				 		 background-image: url("img/leistungen/webdesign.svg");
				 		 width:100px;
				 		 height:100px;
						 cursor: pointer;}

#bildwechsel5-tablet:hover #webimg-tablet {background-image: url("img/leistungen/webdesign_hover.svg");
							   			   transition:all 0.5s ease;}

#leistungsinfo4-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo4-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo4-tablet		   {color:black;
		  		  				text-decoration: none;}

.webdesign		{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testfuenf 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*CD-Produktion...................................*/
#cdimg-tablet			{vertical-align: middle;
						 z-index:100;
				 		 position:relative;
				 		 display:flex;
				 		 postion:relative;
				 		 top:30px;
				 		 background-image: url("img/leistungen/cd.svg");
				 		 width:100px;
				 		 height:100px;
						 cursor: pointer;}

#bildwechsel6-tablet:hover #cdimg-tablet {background-image: url("img/leistungen/cd_hover.svg");
							   			   transition:all 0.5s ease;}

#leistungsinfo5-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo5-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo5-tablet		   {color:black;
		  		  				text-decoration: none;}

.cd				{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testsechs 		{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:-97.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*Bildbearbeitung...................................*/
#bildimg-tablet		{vertical-align: middle;
				 	 z-index:100;
				 	 position:relative;
				 	 display:flex;
				 	 postion:relative;
				 	 top:30px;
				 	 background-image: url("img/leistungen/bildbearbeitung.svg");
				 	 width:100px;
				 	 height:100px;
					 cursor: pointer;}

#bildwechsel7-tablet:hover #bildimg-tablet {background-image: url("img/leistungen/bildbearbeitung_hover.svg");
							   				transition:all 0.5s ease;}

#leistungsinfo6-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo6-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo6-tablet		   {color:black;
		  		  				text-decoration: none;}

.bildbearbeitung{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testsieben 	{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}



/*Offsetdruck...................................*/
#offsetimg-tablet		{vertical-align: middle;
				 	 	 z-index:100;
				 	 	 position:relative;
				 	 	 display:flex;
				 	 	 postion:relative;
				 	 	 top:30px;
				 	 	 background-image: url("img/leistungen/offset.svg");
				 	 	 width:100px;
				 	 	 height:100px;
						 cursor: pointer;}

#bildwechsel8-tablet:hover #offsetimg-tablet {background-image: url("img/leistungen/offset_hover.svg");
							   				  transition:all 0.5s ease;}

#leistungsinfo7-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo7-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo7-tablet		   {color:black;
		  		  				text-decoration: none;}

.offsetdruck	{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testacht	 	{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:-97.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}



/*Animation...................................*/
#aniimg-tablet			{vertical-align: middle;
				 	 	 z-index:100;
				 	 	 position:relative;
				 	 	 display:flex;
				 	 	 postion:relative;
				 	 	 top:30px;
				 	 	 background-image: url("img/leistungen/animation.svg");
				 	 	 width:100px;
				 	 	 height:100px;
						 cursor: pointer;}

#bildwechsel9-tablet:hover #aniimg-tablet {background-image: url("img/leistungen/animation_hover.svg");
							   				  transition:all 0.5s ease;}

#leistungsinfo8-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo8-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo8-tablet		   {color:black;
		  		  				text-decoration: none;}

.animation		{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testneun	 	{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}



/*Datenkonvertierung...................................*/
#datenimg-tablet			{vertical-align: middle;
				 	 	 	 z-index:100;
				 	 	 	 position:relative;
				 	 	 	 display:flex;
				 	 		 postion:relative;
				 	 	 	 top:30px;
				 	 	 	 background-image: url("img/leistungen/daten.svg");
				 	 	 	 width:100px;
				 	 	 	 height:100px;
							 cursor: pointer;}

#bildwechsel10-tablet:hover #datenimg-tablet {background-image: url("img/leistungen/daten_hover.svg");
							   				  transition:all 0.5s ease;}

#leistungsinfo9-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo9-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo9-tablet		   {color:black;
		  		  				text-decoration: none;}

.daten			{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testzehn	 	{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:-97.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}


/*PDF...................................*/
#pdfimg-tablet				{vertical-align: middle;
				 	 	 	 z-index:100;
				 	 	 	 position:relative;
				 	 	 	 display:flex;
				 	 		 postion:relative;
				 	 	 	 top:30px;
				 	 	 	 background-image: url("img/leistungen/pdf.svg");
				 	 	 	 width:100px;
				 	 	 	 height:100px;
							 cursor: pointer;}

#bildwechsel11-tablet:hover #pdfimg-tablet {background-image: url("img/leistungen/pdf_hover.svg");
							   				  transition:all 0.5s ease;}

#leistungsinfo10-tablet:active {color:black;
		  		  	   		   text-decoration: none;}

#leistungsinfo10-tablet:visited {color:black;
		  		  				text-decoration: none;}

#leistungsinfo10-tablet		   {color:black;
		  		  				text-decoration: none;}

.pdfformulare	{background-color:white;
				 width:90%;
				 height:170px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.testelf	 	{background-color:white;
				 display:none;
				 width:188%;
				 position:relative;
				 top:0px;
				 left:2.5%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}




/*News...................................*/
.news-container-1	{display:grid;
					 grid-template-columns:1fr;
					 grid-template-rows:;
					 width:100%;
					 margin-top:30px;}

.news				{margin-bottom:50px;}

.jahr1				{display:grid;
					 grid-template-columns: 1fr 1fr;
					 margin-top:50px;
					 width:100%;}

.jahresbild1		{background-color:white;
					 width:87.5%;
					 height:90%;
					 border-radius: 10px;
					 padding:20px;
					 background-image:url("img/newsbild.jpg");
					 background-size: cover;
					 background-position: center;}

.jahresbild2		{background-color:white;
					 width:87.5%;
					 height:90%;
					 border-radius: 10px;
					 padding:20px;
					 background-image:url("img/newsbild1.jpg");
					 background-size: cover;
					 background-position: center;}

.jahreswechsel1		{background-color:#e4e4e4;
					 width:87.5%;
					 height:90%;
					 border-radius: 10px;
					 padding:20px;}

.jahr2				{display:grid;
					 grid-template-columns: 1fr 1fr;
					 margin-top:50px;
					 width:100%;}

.jahreswechsel2		{background-color:#e4e4e4;
					 width:87.5%;
					 height:90%;
					 border-radius: 10px;
					 padding:20px;}


/*Kunden Karusell...................................*/
.container		     {display:none;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.container-mobil	{display:none;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.container-tablet	{display:grid;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.slider-tablet       {width:800px;
                 	  margin:0 auto;
                	  display:grid;
                 	  grid-template-columns: 1fr;
                	  grid-template-rows: 1fr 1fr 1fr;
				 	  margin-top:30px;
				 	  margin-bottom:30px;}

.logo-kunden		{width:180px;
                	height:auto;
					filter: grayscale(1);}


/*Kontakt...................................*/
.kontaktdaten {display:grid;
			   grid-template-columns:0.8fr 2fr;
			   width:100%;
			   padding:20px;}



.rostock:link	{color:#0063A6;
				 text-decoration: none;}

.rostock:visited	{color:#0063A6;
				 text-decoration: none;}

.rostock:hover	{color:#747C85;
				 text-decoration:none;
				 transition:color 0.5s ease;}

.map1			{display:none;}
.map2			{display:block;}
.map3			{display:none;}


/*Impressum...................................*/
.impressum-info		{display:grid;
					 grid-template-columns:1fr 2fr 1fr;
					 padding-top:20px;		
					 width:100%;}

.datenschutz		{width:100%;
					 margin-top:20px;
					 padding:20px;}

.adresse			{margin-left:30px;}

.datenschutzinfo	{margin-left:10px;
					 margin-right:50px;}

.infotitel-datenschutz	{font-size: 25px;
				 		margin-left:10px;
				 		color:black;}

.haftungstext		{margin-left:10px;
					 margin-right:50px;}


/*Cookies..........................*/
.cookies-container	{background-color:#747c85;
		 			 height:80px;
					 width:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:14px;
		 			 vertical-align:middle;
					 padding-top:20px;
					 padding-bottom:15px;
					 position:fixed;
					 bottom:0px;
					 visibility: visible;
					 z-index: 20000;
					 animation: cookies 2s ease;
				 	 animation-iteration-count:1;
					 border-top:1px solid white;}

.cookies			{width:100%;
					 display:grid;
					 grid-template-columns:1fr;
					 text-align:center;
					
					 padding-bottom:10px;}