@charset "utf-8";
/* CSS Document */

/* Allgemein */
* 					{margin:0;padding:0;} 
body  				{font-family: "Abel",sans-serif; font-size: 1em; margin:auto !important;padding:0px; height:100%;}
.container			{height:100%; top:120px; position:relative;}
#bg					{background:rgba(255, 255, 255, 0.0);  padding-bottom:20px;}
a 					{color:black; text-decoration:none;}
a:hover 			{color:#ED1922;}
h1, h3 					{margin-bottom:20px;}
h2 					{margin-bottom:10px;}
hr                  {margin-bottom:30px;}
p  					{margin-top:10px; margin-bottom:15px;}
#content a  		{color:#ED1922; text-decoration:none;}
.justify 			{text-align:justify;}
#breadcrumbs		{margin:0px 0px 30px 0px;height:28px; padding: 5px 5px 0px;}
#breadcrumbs a		{margin:1px;display:inline-block; text-decoration:underline;}
#content ul 		{padding-left:20px;}
.clear  			{clear:both; padding-top:10px;}
.zitat 				{position:absolute; margin:0 auto; top:300px; z-index:100; width:50%; margin-left:25%; color:#fff;opacity: 0; -webkit-transition: all 2s linear;
-moz-transition: all 1.5s linear; -o-transition: all 2s linear; transition: all 2s linear; background:rgba(0,0,0,0.6); padding:20px; color:#fff; font-size:20px; border-radius:4px;}

/* Menü */
#menu {position:relative; float:right; top:78px;}
#header {height:120px; margin:auto; width:96%; padding-left:2%; padding-right:2%;box-shadow: 2px 2px 2px 0 rgba(200, 200, 200, 0.7); position:fixed; background:white; z-index:1500;}
#innerHead {max-width: 960px; margin:0 auto; position:relative;}
#Trenner {-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);background-color: grey; box-shadow: 4px 4px 8px black; height: 3px;float:left; position: relative; top: 57px; transform: rotate(125deg); width: 150px;}
#logo {position:relative; float:left;}
#menu li {position: relative;}
.arrow {width:130%;}
#menu li:hover a {}
#menu ul ul {position: absolute; z-index: 500; top:30px; margin:0px -8px; border-radius:4px;padding-top:2px;}
#menu ul li {padding: 5px; background:white; top:5px; float:left;margin-top:2px; border-radius:4px; }
#menu ul ul ul {position: absolute; top: 0; left: 106%; padding-top:0px;}
#menu ul li ul li {top:0px; width:100%;border:1px solid #ccc;}
#menu ul ul ul a:hover {color:#d92719; }
#menu ul li ul li a:hover  {color:#d92719; }
#menu ul li ul li ul li:hover a {color:#d92719; }
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
#menu a, #menu h2 		{display: block; margin: 0; padding: 2px 3px;}
#menu ul 				{list-style: none; margin: 0; padding: 0px; float: left; z-index:1000;}
#menu ul li ul li:hover a  {color:black;}
.level2  				{left:10px;}
#mobile-header 			{display: none;position:fixed;z-index:1500;top:30px;left:10px;padding:10px; max-width:40px;border-radius:5px;}
#mobile-header a 		{color:#D8D8D8;text-decoration:none; font-size:1.1em}
.kontaktHead 			{position:absolute; font-size:0.7em; right:0px;}
#responsive-menu-button img {width:30px;}



/* Startseite */
#naviMitte 				{margin:auto; display:flex;display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content:space-around; flex-direction:row; align-items:baseline;}
#ueberUns  				{float:left;  margin: 5%; position:relative; width:250px;}
#unserSortiment 		{float:left; padding-left:4%; position:relative; width:250px;}
#angebote 	 			{position:relative; }
.contentText_keyvisual 	{float:right; width:250px; margin-left:30px;}
.swiper-container:hover .zitat {opacity: 1;} 
.swiper-slide img {width:100%;}
.swiper-wrapper {max-height:700px; top:-120px;}
.swiper-button-next, .swiper-button-prev {display:none !important;}
#erkunden {margin:20px auto;}

/* Unterseiten */
.content 				{height:100%; min-height:800px; width:60%; position:relative; margin: 0 auto; background-color: rgba(220,220,220,0.93); padding:20px; max-width: 960px;}
.beispiele 				{float:right; position:relative; padding-left:40px;}
.infobox 				{padding: 10px; float:right; border: 1px solid #d92719; position: absolute; top: 0px; background:white; right:-195px;}
.infobox img 			{width:30px !important;}
.infobox a 				{color:red;}
.infobox a:hover 		{border-bottom: 1px solid red;}
#contentPictures .image {float:left; padding: 10px; height:100%; max-width:30%; background:#eee; margin: 5px; max-height:500px;overflow:hidden; min-height:500px}
#contentPictures .image:hover {max-height:none;}
#contentPictures .image img {margin:0 auto; display:block;max-width:90%; max-height:165px}
#contentPictures .image a:hover {color:black;}
geraeteBeschreibung:hover  {max-height:auto;}

.inlineImage			{float:right; margin-top:5px; margin-bottom:10px; margin-left:20px; position:relative; height:auto !important;}
.inlineImage img 		{width:300px !important;}
 .imageOverlay					{transition:opacity 0.4s ease-in-out 0s;z-index:100;position:absolute;height:auto;width:290px;padding:5px;background-color:rgba(217,39,25,0.9);color:#fff;overflow:hidden;text-align:left;bottom:0px;right:0px;line-height:1em;opacity:0;}
 .inlineImage:hover .imageOverlay		{opacity:1}
 .imageOverlay .imageTitle		{font-size:14px;}
 .imageOverlay .imageText		{font-size:12px;}
 .prospekt						{float:left; text-align:center; margin:20px;}
 .prospekt img 					{heigth:200px; width:100%; max-width:141px;}
 .anfrage {margin-bottom:10px;}
 
 
/* Sortiment */
.sortiment 				{padding-bottom:50px;}
.sortiment img 			{margin-right:30px;}
.geraeteBeschreibung 	{overflow:hidden;}


/* Ansprechpartner */
.Ansprechpartner		{width:320px; float:left; margin:5px; padding:5px; border:1px solid; border-radius:5px; height:170px;}
.Ansprechpartner	p 	{margin:0 auto;}
.Ansprechpartner img 	{float:left; padding-right:10px; height:100%;}
.Ansprechpartner hr 	{margin:0;}
.Ansprechpartner .contacts {bottom:0px; position:relative; display:inline-block;}
.description 				{padding-top:1em;}
.mobileShow 				{display:none;}
.Ansprechpartner  a 				{font-size:0.8em}

/* Kontakt */
fieldset 				{border:0;padding:10px;}
form 					{width:50%;}
#recaptcha   {max-width:100%;}
input, select, textarea {border: 1px solid #cccccc; padding: 10px !important; display: inline-block;border-radius: 4px;}
input 					{width:calc(100% - 20px) !important;font-size:1em;}
textarea 				{width:calc(100% - 20px) !important;font-size:1em; height: 10em;}
#recaptcha		 		{padding:10px;}
input[type="submit"] 	{background-color:#d92719;color:#fff;width:100% !important;}

/* Aufzählungen */
#contentText ul 			{padding-left:20px;}
#contentText ul li  		{padding-left:10px;}

/* Footer */
footer 					{background:#1a1a1a;width:100%;clear:both; color:#fff; line-height:25px; text-shadow: 1px 1px 1px #000; text-align:center; list-style-type:none; position:relative; top:100px;}
.footerInner 			{max-width: 960px; padding-top: 20px; margin:0 auto; width:100%; display:flex; color:#eee;}
footer a 				{color:#ccc;} 
footer h3 				{color:#ddd}
footer ul				{float:left; text-align:left; margin-right:13px;list-style-type:none; position:relative; width:33%; border-right:1px solid #eee;color:#ccc;}
footer ul:last-child 	{margin-right:0 }
.firstChild 			{border-left:1px solid #eee; padding-left:13px;}
footer a:hover 			{text-decoration: none; border-bottom: 1px solid #fff; color:#fff; }
.Info 					{clear:both; text-align:center; color:#fff; background:black; position:relative; top:100px;}	
.philosophie 			{max-width:960px; color:#ccc; margin:0 auto;font-size:0.8em; text-align:left; padding:30px 0;}
.partner 				{text-align:left; max-width:960px; margin:0 auto; padding:30px 0;}
.partner p 				{clear:both;}
.partner img 			{width:100px;float:left; margin-right:5px;}

@media (max-width: 1100px) { 
  #menu ul ul ul 		{}
  #headerLinks 			{display:none;}
  .businessView 		{display:none;}
  #contentPictures 		{display:block}
  .infobox				{right:-175px;}
  }

@media (max-width: 1000px) { 
	#mobile-header  	{display: block;}	
	#menu 				{display:none;}
	#logo 				{float:right;}
	.kontaktHead		{display:none;}	
	#Trenner		F	{float:right;}
	.infobox			{display:none;}
	.content			{padding: 0px auto; width:95%;}
	#contentText 		{width:90%;}
	#contentPictures 	{}}


@media (max-width: 800px){
	#breadcrumbs		{padding-bottom:20px;}
	#Trenner			{display:none;}
	#contentText 		{width:90%; margin:auto;}
	#contentPictures 	{margin:auto; width:90%;}
	#menu				{display:none;}

	#naviMitte			{width:auto;}
	.swiper-wrapper		{top:0px;}
	.infobox 			{display:none;}
    .businessView 		{display:none;}
    .content			{padding: 0px auto; width:90%;}
	.container			{top:105px;}
	footer 				{top:70px;}
	.Info				{top:70px;}
    #header 			{border-bottom:none !important; height:105px;}
    .paragraph 			{width:90%; margin:auto;}
    h1  				{margin:auto;}
	.angebote 			{display:none;}
	#logo				{float:right;}
    #ueberUns 			{margin:5%; width:auto;}
	#unserSortiment 	{padding:5%; width:auto;}
	.Katalog  			{width:auto;}
	form 				{width:100%;}
	ul h3 		{margin-top:25px; margin-bottom:5px;}
	.infobox 			{display:none;}
	#contentPictures .image {max-width:44%;}
	}
	
@media (max-width: 600px){
	#partner			{display:none;}
	footer ul			{width:100%;}
	footer 				{width:100%;}
	.footerInner 		{display:block;}
	.footer div 		{width:95%;padding:0 10px;}
	.firstChild			{border:none;padding-left:0;}
	footer ul			{border:none;}
	#contentPictures .image {max-width:100%; margin:5px auto;}
	.philosophie {width:calc(100% - 20px);}
	.footerInner {width:calc(100% - 20px);}	
	.partner {width:calc(100% - 20px); margin-top:20px;}
	iframe  {width:100%;}
	#erkunden {display:none;}			
	}  
@media (max-width: 400px){  	
	#contentPictures img {width:90% !important;}
	#contentText {position:relative; padding:10px;}
	#contentPictures .image {max-height:none;}
	#breadcrumbs{display:none;}
	.beispiele  {display:none;}
	#naviMitte  {border-top:none;}
	
	#erkunden   {width:95%;margin: auto;}
	.slide-desc { display:none;}
	#logo 		{float:right;}
	.skdslider  {height:300px;}
	.content	{padding:0; margin:auto; width:100%;}
	#naviMitte  {width:90%; margin:auto; display:block;}
	#ueberUns	{margin:0px 10px 20px 10px; margin-bottom:20px; border-bottom:1px solid #d92719; width:auto; position:relative; float:none;}
	#angebote 	{ width:90%;margin:auto;}
	#unserSortiment {padding-left:0; width:auto; margin:0px 10px 20px 10px; position:relative; float:none;}
	h1 {margin-bottom:20px; font-size:1.5em;}
	#Impressum {margin-left:10px;}
	#Datenschutzerklaerung {margin-left:10px;}
	.inlineImage img 		{width:200px !important;}
	.inlineImage:hover .imageOverlay		{opacity:0}
	.Katalog p {display:none;}
	#partner	{border-bottom:1px solid #d92719; margin:0 10px 20px; padding-bottom:15px; display:block;}
	.Katalog img {display:block; margin-left:auto; margin-right:auto;}	
	#mobile-header {display: block;}
	.contentText_keyvisual {width:100%;}
	.Ansprechpartner {width:120px; height:300px;}
	.Ansprechpartner p {float:none;}
	.Ansprechpartner img {width:100%; height:auto; }
	.description 			{display:none;}
	.contacts 				{display:block !important;}
	.mobileNone 			{display:none;}
	.mobileShow 			{display:block;}}