@charset "utf-8";


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/pxiGyp8kv8JHgFVrLPTucHtA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*		{ margin: 0px; padding: 0px; border: 0px;  box-sizing:border-box;}

html {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}


 div#topnews{ 
 	font-family: 'Poppins', sans-serif;
	line-height: 1.000;
	font-size: 20px;
	font-weight: 300;
	font-style: normal;
	color: red;
	background:#000000;
 top: 0px; 
  position: fixed;
text-align:center;
  width: 100%;
  height: 10px;
     z-index: 989;
	 padding: 10px;
	 
}

iframe
{
width: 100%;
min-height:50%;

	
}






div#slider {  
margin-left:auto;
margin-right:auto;
margin-top: 100px; 
max-width: 100%;
position: relative;
width: 100%;
z-index: 0;	  
}

 div#slider-info { 
padding: 35px;
position: absolute; 
top: 200px; 
max-width: 1000px;
background-color: rgba(255,255,255,0.6);
z-index: 988;
}



video#bgvideo {
    width: 100% ;
    height: 100%;
z-index: 100;
}

img {
float:left:
}


  /* ENDE HERO Hintergundbild */		


div#LOGO { 
  position: fixed;
 top: 20px; 
 width: 489px; 
 height: 1809px; 
 margin-left: 5%; 
 background: url(../images/logo_300.png) no-repeat; 
   z-index: 999;
 }


 
 h1 {
	line-height: 1.000;
	font-size: 1.800em;
	font-weight: 300;
	font-style: normal;
	}

	h2 {

	line-height: 1.000;
	font-size: 1.500em;
	font-weight: 300;
	font-style: normal;
	}

h3{
	line-height: 1.000;
	font-size: 1.300em;
	font-weight: 300;
	font-style: normal;
	}
	
	p {
	line-height: 1.000;
	font-size: 1.000em;
	font-weight: 300;
	font-style: normal;
	}

 
 
 
	.TelefonStart {
	line-height: 1.000;
	font-size: 18px;
	font-weight: 300;
	font-style: normal;
	color: #000000;
	}
 
 
 @media screen and (max-width: 1000px) {
 
 
 div#slider-info { 
padding: 35px;
position: absolute; 
top: 200px; 
max-width: 1000px;
background-color: rgba(255,255,255,0.6);
z-index: 988;
}
 

 .large-font {
  font-size: 28px;
}

.xlarge-font {
  font-size: 34px
}


}
 
 
 
 
a {color:#FFFFFF; text-decoration:none;}

a:hover {color:#FFFFFF; text-decoration:none;}
 
 
 a.LinkKontakt:link {
 font-size: 18px;
  color:#FFFFFF;
  }
 a.LinkKontakt:visited {
  color:#FFFFFF;
  }
 a.LinkKontakt:hover {
  color:#FFFFFF;
  }
 
  a.LinkKontaktBlack:link {
  color:#000000;
  }
 a.LinkKontaktBlack:visited {
  color:#000000;
  }
 a.LinkKontaktBlack:hover {
  color:#000000;
  }
 
 
 
  /* Start Navigation */		


.menue-button {
	display: none;
}	
#topmenu {
	 top: 0px; 
  position: fixed;
  width: 100%;
  height: 90px;
  background: #000000;
  font-size: 18px;
  text-align: right;
  display: block;
  color: #fff;
  text-decoration: none;
  padding-right: 110px;
  box-shadow: 0 2px 2px white;
     z-index: 998;
}
	#topmenu li {
		top: 10px;
		display:inline;
	    font-size:18;
	    padding:0;
	    position:relative;
		color: #fff;
	}
	#topmenu li a {
	    padding:30px 15px;
		color:#FFFFFF;
	    text-decoration:none;
	    display:inline-block;
		position: relative;
	}
	 
	 	nav ul > li.parent > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}
	
	nav ul > li.parent:hover > a:after {
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
} 
	#topmenu li a:hover {
	 
	    color:#FFFFFF;
		border-radius: 0px;
	}
	
	#topmenu li a.first {
	  color: #fff;
	}
	#topmenu li a.last {
		background:#000000;
	 color: #fff;
	} 
	#topmenu li:hover > a {
	    background:#0B2D53;
	}

	#topmenu li:hover > ul
	{
	/*these 2 styles are very important, 
	being the ones which make the drop-down to appear on hover */
	    visibility:visible;
	    opacity:1;
	}
/* Drop-Down topmenue */
	ul#topmenue li:hover > ul
	{
	/*these 2 styles are very important, 
	being the ones which make the drop-down to appear on hover */
	    visibility:visible;
	    opacity:1;
		  background:#000000;
	} 
	#topmenu ul li ul {
		text-align:left;
	    list-style: none;
	    margin: 0;
	    padding: 0;    
	/*the next 2 styles are very important, 
	being the ones which make the drop-down to stay hidden */
	    visibility:hidden;
	    opacity:0;
	    position: absolute;
	    z-index: 99999;
	    background:#f8f8f8;

	/* css3 transitions for smooth hover effect */
	    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	    transition:opacity 0.2s linear, visibility 0.2s linear;     
	} 
	#topmenu ul {
	    top: 35px;
	    left: 1px;
	}

	#topmenu ul  ul li {
	    clear:both;
	    border:0 none;
	    border-bottom:1px solid #c9c9c9;
	}
	 
	#topmenu ul  ul li a {

	    padding:9px 15px;
	    color:#000000;
	    text-decoration:none;
	    display:inline-block;
	    border:0 none;
	    float:left;
	    clear:both;
	    width:300px;
		background:#FFFFFF;
		text-align: left;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

  @media only screen and (max-width:1700px) {
	  
	   div#slider-info { 
padding: 35px;
position: absolute; 
top: 250px; 
max-width: 1000px;
background-color: rgba(255,255,255,0.6);
z-index: 988;
}
	  
#topmenu {
	 top: 0px; 
  position: fixed;
  width: 100%;
  background: #000000;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  margin: 0 auto;
  padding: 0;
  text-align: right;
  display: block;
  color: #fff;
  text-decoration: none;
     z-index: 998;
}

div#LOGO { 
  position: fixed;
 top: 0px; 
 width: 385px; 
 height: 180px; 
 margin-left: 0%; 
 background: url(../images/logo_300.png) no-repeat; 
   z-index: 999;
 }



 }	
	
	
	
	/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:1200px) {
	
	 div#slider-info { 
padding: 35px;
position: absolute; 
top: 140px; 
max-width: 1000px;
background-color: rgba(255,255,255,0.6);
z-index: 988;
}

	.menue-button {
		display: block;
	}
	.menue-button {
	padding-right:1em; 
	background:url(../images/icon-navigation.png) no-repeat 90% center;
	z-index: 998;
		width:100%;
		height: 115px;
		background-color: #000000;
		display: block;
		position: fixed;
		right: 10;
		top: 0px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	#topmenu {
		
		width:100%;
		display:block;
		top:90px;
		float: left;
		background: #000000;	
		display: none;
		z-index: 99998;
		text-align:left;
		height: 0px;
		 
	}	
	#topmenu li {	
		  display:inline;
	    font-size:14px;
	    font-weight:bold;
	    margin:0;
	    padding:0;
	    float:left;
	    position:relative;
		width: 100%;
		border-bottom: 2px solid #FFFFFF;
	}	
	
	#topmenu li a {	width:100%;
		   border-right:1px solid #f5f5f5;
	    border-left:1px solid #f5f5f5;
		background: #000000;
		
		
	}
	 #topmenu ul li ul {
	    list-style: none;
	    margin: 20px;
		margin-left: 130px;
	    padding: 10px;   

	 }
	 
	 	#topmenu ul  ul li a {
	    max-width:400px;

	}
	 
	 
	
	.menue-button:hover {
		padding-right:1em; 
	background:url(../images/icon-navigation.png) no-repeat 90% center;
	z-index: 998;
		width:100%;
		background-color: #000000;
		display: block;
		position: absolute;
		right: 10;
		top: 0px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}
	
	
	div#LOGO { 
  position: fixed;
 top: 0px; 
 width: 285px; 
 height: 180px; 
 margin-left: 0%; 
 background: url(../images/logo_300.png) no-repeat; 
   z-index: 999;
 }
	
	
	
}



/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #topmenu {
	display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	
/* Allgemein Anweisungen */






.section-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.flexbox-item {
  flex: 1 1 25%;
  opacity: 0;
  transform: translateX(-250px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.flexbox-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.flexbox-item.right {
  transform: translateX(250px);
}
.flexbox-item.right.visible {
  transform: translateX(0);
}


.flexbox-item.bild {
  flex: 0 1 35%;
}
.flexbox-item.bild {
  transform: translateX(250px);
}
.flexbox-item.bild.visible {
  transform: translateX(0);
}


.flexbox-item.tabelle {
  flex: 0 1 60%;
}
.flexbox-item.tabelle {
  transform: translateX(-250px);
}
.flexbox-item.tabelle.visible {
  transform: translateX(0);
}







@media (max-width: 768px) {
  .flexbox-container {
    flex-direction: column;
  }

  .flexbox-item {
    flex: 1 1 100%;
    transform: translateY(30px);
  }

  .flexbox-item.visible {
    transform: translateY(0);
  }
}




.buttonAnfrageStartBlue {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #012060;
width: 100%;
}


/* Content Startseite */


.container {
  padding: 40px;
  
}

.container-x {
  padding: 40px;
  max-width:1400px;
  margin-left:auto;
margin-right:auto;
  
}

.row:after {
  content: "";
  display: table;
  clear: both;

}

.column-100{
  float: left;
  width: 100%;
 position: relative;
padding: 15px;
}


.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;
}
.column-50{
  float: left;
  width: 50%;
 position: relative;
padding: 15px;;
}


.column-xx{
  float: left;
  width: 50%;
 position: relative;
padding: 15px;
}

.column-auswahl{
  float: left;
 position: relative;
  margin-bottom: 16px;
  padding: 0 8px;

}

.column-33 {
  float: left;
  width: 33.33333%;
}

.large-font {
  font-size: 48px;
}

.xlarge-font {
  font-size: 54px;

}

.button {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #012060;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
  .column-66,
  .column-33,
  .column-50, 
  .column-auswahl  {
    width: 100%;
    text-align: center;
  }
  img {
    margin: auto;
  }

}



div#content { 
width: 100%;
max-height: 100%; 
float:left;
background-color: #000000;
}



div#component{ 
 z-index: 9999;
max-width:100%;
margin-left:auto;
margin-right:auto;
padding: 0px;
background-color: #000000;
}

div#content1 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-1{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;
background-color: #F3F3F3;

}


div#content2 { 
width: 100%;
max-height: 100%; 
float:right;
background-color: #FFFFFF;
}


div#component-2{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;
color: #FFFFFF;
  background-color: #464241;
}


div#content3 { 
width: 100%;
max-height: 100%; 
float:left;
color: #FFFFFF;
background-color: #000000;
}


div#component-3{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;
color: #FFFFFF;

}



div#content4 { 
width: 100%;
max-height: 100%; 
float:left;
color: #FFFFFF;
}


div#component-4{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;
color: #FFFFFF;
  background-color: #464241;
}


div#content5 { 
width: 100%;
max-height: 100%; 
float:left;
}


div#component-5{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}

div#content6 { 
width: 100%;
max-height: 100%; 
float:left;
background-color: #000000;
}


div#component-6{ 
 z-index: 9999;
max-width:1400px;
margin-left:auto;
margin-right:auto;

}


div#content7{ 
width: 100%;
max-height: 100%; 
float:left;
background-color: #565656;
}

div#footer { 
 z-index: 9999;
width: 100%;
margin-left:auto;
margin-right:auto;
background-color: #565656;
color: #FFFFFF;
}




div#contentProdukte{ 
 z-index: 9999;
max-width:1100px;
margin-left:auto;
margin-right:auto;
padding: 10px;
}


.buttonAnfrage {
  border: none;
  color: white;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  background-color: #1B4B79;
width: 100%;
border-radius: 5px;

}

.buttonAnfrageStartRed {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #FF0000;
width: 100%;
}

.buttonAnfrageStartBlue {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #012060;
width: 100%;
}


.ProduktP1  { 
padding-left: 0px;
}



 #pic-left { 
 max-height: 300px;
 float:left;
 margin: 10px;


}

 #pic-left400 { 
max-height: 400px;
float:left;
box-shadow:0px 10px 10px grey;
}




  .rwd-table td:before {
    display: none;
  }
.rwd-table th, .rwd-table td {
  text-align: left;
}
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0px;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0px;
  }
.rwd-table {
	margin-top:10px;
	padding: 0;
	max-width: 878px;
	font-size: 14px;
	color:#000000;
background-color:#ffffff;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table td {
	margin:0;
	padding: 0;
	width: 578px;
	background: #F3F4F6;
}
.rwd-table .psdg-left {
	
	color:#000000;
	
	
}
.rwd-table th {
	margin:0;
	padding: 0;
	max-width: 578px;
	height: 10px;
	border-top: 2px solid #FFF;
	color:#FFFFFF;
	background: #012060;
}
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #FFFFFF
}

@media screen and (max-width: 580px) {


.rwd-table th {
  display: none;
}
.rwd-table td {
width: 100%;
  display: block;
}

.rwd-table td:before {
	padding-left: .5em;
  content: attr(data-th) "";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}

.rwd-table {
width: 100%;
	margin-top:10px;
	padding: 0;
	font: 14px Arial, Helvetica, sans-serif;
	color:#000000;
background-color:#ffffff;
}
.rwd-table tr {
  border-color: #46637f;
}

.buttonAnfrage {
  font-size: 14px;
}
 .ProduktP1 { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
 #pic-left { 
 max-height: 300px;
}

 #pic-left400 { 
 max-height: 200px;
}


}



/*Anweisungen Anhaenger Produkte CSS*/



.flex-container {
font-size: 30px;

display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin-left: auto;
margin-right:auto;
flex-direction: row;
}


.flex-containerStart {
font-size: 15px;
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin-left: auto;
margin-right:auto;
flex-direction: row;
}

.flex-Produkt {
font-size: 30px;
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin-left: auto;
margin-right:auto;
}


.flex-footer {
font-size: 30px;
display: flex;
flex-wrap: wrap;
max-width: 1600px;
margin-left: auto;
margin-right:auto;
}

.flex-item-leftStart {
  padding: 0px;
  width: 55%;
}

.flex-item-rightStart {
  padding: 10px;
	width: 45%;
}


.flex-item-left {
  padding: 10px;
  width: 40%;
}

.flex-item-right {
  padding: 30px;
	width: 60%;
}

.flex-item-left-Konfig {
 float:left;
  padding: 30px;
  width: 50%;
}

.flex-item-right-Konfig {
  padding: 30px;
width: 50%;
  text-align: left;
}




.flex-item-left-Vermietung {
 float:right;
  padding: 10px;
  width: 50%;
    text-align: left;
}

.flex-item-right-Vermietung {
  padding: 30px;
width: 50%;
  text-align: left;
}



.flex-containerS {
font-size: 25px;
display: flex;
flex-wrap: wrap;
max-width: 1600px;
margin-left: auto;
margin-right:auto;
}



.flex-item-left-V {
 float:right;
  padding: 10px;
  width: 50%;
    text-align: left;

}

.flex-item-right-V {
  padding: 10px;
width: 50%;
  text-align: left;
}




.flex-item-33 {
  padding: 30px;
width: 33%;
  text-align: center;
}


.responsive {
width: 100%;
max-width: 600px;
height: auto;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 1000px) {
  .flex-item-right, .flex-item-left ,.flex-item-rightStart ,.flex-item-leftStart,.flex-item-right-20, .flex-item-left-20,.flex-item-right-Konfig, .flex-item-left-Konfig,.flex-item-right-Vermietung, .flex-item-left-Vermietung,.flex-item-33{
    flex: 100%;
	
  }
  
  .flex-item-leftStart{
	padding: 10px;  
  }
  
}