@charset "UTF-8";

html		{overflow:scroll !important;}

.logo		{width:250px;
			margin-left:10px;}

.menue		{display:block;
		     margin-right:20px;
			 cursor: pointer;}

nav 		{background-color:#0063A6;
	  	 	 height:85px;
		 	 position: sticky;
			 z-index:200;
		 	 top:0;}

.icon-container {display:none;
				 grid-template-columns: 1fr;
				 grid-template-rows: 1fr 1fr;
				 justify-content: space-between;}

.navpunkt	{display:none;}

.home-container		{display:grid;
					 grid-template-columns: 1fr;
					 grid-template-rows:auto;
					 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:450px;
				  	 height:450px;
					}

.produktfotografie	{margin-top:20px;
					 line-height: 150%;
					 margin-right:0px;
					 margin-left:20px;}

.produktfotografie1	{margin-top:-30px;
					 line-height: 150%;
					 margin-right:0px;
					 margin-left:20px;}

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

.header-test{height:225px;
			 margin:0px auto;
			 width:450px;}


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

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

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

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

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

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

.leistung-container7-mobil {display:block;
						  	background-color:#e4e4e4;}

.leistung-container8-mobil {display:block;
						  	background-color:#e4e4e4;}

.leistung-container9-mobil {display:block;
						  	background-color:#e4e4e4;}

.leistung-container10-mobil {display:block;
						  	background-color:#e4e4e4;}

.leistung-container11-mobil {display:block;
						  	background-color:#e4e4e4;}


.leistung-container1-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container2-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container3-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container4-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container5-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container6-tablet {display:none;
						  	 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;
	width:100%;}

dd  {display:none;}

.info-container	{display:grid;
				 grid-template-columns:1fr;
				 grid-template-rows:0.7fr 1fr;}

.info-container-illu{display:grid;
				 grid-template-columns:1fr;
				 grid-template-rows: 0.7fr 1fr;}

.info-container-bild{display:grid;
				 grid-template-columns:1fr;
				 grid-template-rows: 0.7fr 1fr;}

.info-container-web{display:grid;
				 grid-template-columns:1fr;
				 grid-template-rows: 0.3fr 1fr;}

.info-container-ren{display:grid;
				 grid-template-columns:1fr;
				 grid-template-rows: 0.3fr 1fr;}

.info           {display:grid;
				 grid-template-columns:0.2fr 2fr;
				 grid-template-rows:1fr 1fr;}

.info-ani           {display:grid;
				 grid-template-columns:0.2fr 2fr;
				 grid-template-rows:1fr;}

.info-bild           {display:grid;
				 grid-template-columns:0.2fr 2fr;
				 grid-template-rows:1fr 1fr;}

.info2           {display:grid;
				 grid-template-columns:0.2fr 2fr;
				 grid-template-rows:1fr 1fr;}

/*Medienvorstufe...................................*/
#medienimg-mobil		{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-mobil:hover #medienimg-mobil {background-image: url("img/leistungen/medienvorstufe_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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




/*Illustration...................................*/
#illuimg-mobil			{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-mobil:hover #illuimg-mobil {background-image: url("img/leistungen/illustration_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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



/*Produktbilder...................................*/
#proimg-mobil			{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-mobil:hover #proimg-mobil {background-image: url("img/leistungen/produktfoto_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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


/*App...................................*/
#appimg-mobil			{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-mobil:hover #appimg-mobil {background-image: url("img/leistungen/app_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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



/*Webdesign...................................*/
#webimg-mobil			{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-mobil:hover #webimg-mobil {background-image: url("img/leistungen/webdesign_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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

.vorschau17		{background-image: url("img/webdesign.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-position: center;}

/*CD-Produktion...................................*/
#cdimg-mobil			{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-mobil:hover #cdimg-mobil {background-image: url("img/leistungen/cd_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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



/*Bildbearbeitung...................................*/
#bildimg-mobil			{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-mobil:hover #bildimg-mobil {background-image: url("img/leistungen/bildbearbeitung_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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




/*Offsetdruck...................................*/
#offsetimg-mobil		{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-mobil:hover #offsetimg-mobil {background-image: url("img/leistungen/offset_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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


/*Animation...................................*/
#aniimg-mobil			{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-mobil:hover #aniimg-mobil {background-image: url("img/leistungen/animation_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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


/*Datenkonvertierung...................................*/
#datenimg-mobil			{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-mobil:hover #datenimg-mobil {background-image: url("img/leistungen/daten_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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


/*PDF-Formulare...................................*/
#pdfimg-mobil			{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-mobil:hover #pdfimg-mobil {background-image: url("img/leistungen/pdf_hover.svg");
							   		 	    transition:all 0.5s ease;}

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

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

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

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

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




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

#bildwechsel19-mobil:hover #rendernimg-mobil {background-image: url("img/leistungen/rendern_hover.svg");
							   		 	    transition:all 0.5s ease;}

#leistungsinfo19-mobil:active {color:black;
		  		  	  		 text-decoration: none;}

#leistungsinfo19-mobil:visited {color:black;
		  		  			  text-decoration: none;}

#leistungsinfo19-mobil		 {color:black;
		  		  			  text-decoration: none;}

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

.testelf	 	{background-color:white;
				 display:none;
				 width:89%;
				 position:relative;
				 top:0px;
				 left:0%;
				 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:0px;}

.news				{margin-bottom:50px;}

.news-1				{background-color:white;
					 width:87.5%;
					 height:250px;
					 border-radius: 10px;
					 padding:20px;
					 display:grid;
					 grid-template-columns:1fr;
					 margin-bottom:30px;
					 margin-top:0px;}

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

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

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

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

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

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

/*Gewinnspiel...................................*/
#gewinn			{background-color:none;
				 width:88%;
				 height:80%;
				 border-radius:10px;
				 position:relative;
				 top:5px;
				 left:0%;
				 z-index:3;
				 padding:20px;
				 display:flex;
				 margin:3%;
				 padding-bottom:-20px;}


.gewinntextausklapp 		{background-color:#e4e4e4;
				 			display:none;
				 			width:88%;
							top:10px;
				 			left:0%;
							right:0%;
				 			z-index: 100;
							padding:20px;
							margin:3%;
							border-radius:10px;}

.gewinntext1		{width:95%;}

.gewinntext2		{width:95%;}

.infogewinn			{display:grid;
				 		grid-template-columns:1fr;}

.infotitelgewinn		{font-size: 25px;
						 margin-left:0px;
				 		 color:black;}

.ueberschriftgewinn		{font-size:20px;
						font-weight: 800;}


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

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

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

.slider-mobil       {width:450px;
                 	  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:1fr;
			   width:100%;
			   padding:20px;}

.kontaktklein	{width:90%;
				margin-left:20px;
				margin-bottom:20px;}

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

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

.verantwortlich		{margin-top:25px;
					 margin-left:30px;}


/*Cookies..........................*/
.cookies-container	{background-color:#747c85;
		 			 height:100px;
					 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;
					 border-top:1px solid white;}

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