html 
 {
    background: rgb(209, 220, 226); /*Hintergrundfarbe*/
   /* background-image: linear-gradient(270deg, blue 50%, red 0%); /*Hintergrundfarbe 2 farbing, Winkel der Teilung*/
    height: 100%;
   
 }

main 
{
	padding: 0;
    
}



/*********************************************************************************Seite Mittelteil formatierung anfang **************************************************************/


#p_index 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 5em;  
    height: 100%;
}

#p_software 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 15em;  
    height: 100%;
}


#p_controls 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 2em;  
    height: 100%;
}

#p_control2720update 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 15em;  
    height: 100%;
}

#p_simulation 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 25em;  
    height: 100%;
}

#p_robotics 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 36em;  
    /*padding: 1em 2em 2em;  */
    height: 100%;
}

#p_downloads 
{
    background: #fff;   
    background-color: white;     
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 15em;  
    height: 100%;
}

#p_links 
{
    background: #fff;   
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 2em ;  
    height: 100%;
}

#p_contact 
{
    background: #fff;
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    
    padding: 1em 2em 1em;
    
    height: 100%;
}

#p_dsgvo 
{
    background: #fff;
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 220em;  
    height: 100%;
}

#p_impressum 
{
    background: #fff;
    background-color: white;   
    color: black;
    font-family:  Arial,"Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto; 
    max-width: 1200px; 
   
    padding: 1em 2em 22em;  
    height: 100%;
}


/********************************************************************************************************************************************************************************/
/*********************************************************************************text formatierung anfang **********************************************************************/  
/********************************************************************************************************************************************************************************/

h1  
{
    text-align: center;
    color:   white;
    font-weight: 600;
    line-height: 1.6em;
     margin-top: 0.4em;
    margin-left: 4.7em;
}

h1_1  
{
    text-align: center;
    color:   white;
    font-weight: 600;
    line-height: 1.6em;
    margin-top: 0.4em;
    margin-left: 14.7em;
}

h2  
{
    color: steelblue;
    text-align: left;
    font-weight: 600;
    font-size: 1.4em;
    line-height: 1.3;
    margin-top: 0.3em;
    margin-left: 36.8em;
}


h3  
{
    color: #17c124;
    font-weight: 600;
    line-height: 1.6em;
     margin-top: 0.4em;
    margin-left: 1em;
}

h4  
{
    color: #17c124;
    font-weight: 600;
    line-height: 1.6em;
     margin-top: 5em;
    margin-left: 5em;
}



p.contact 
{
     text-align: center;
   margin-left: +10em;
    margin-top: +15em;
    font-size: 1.3em;
}



/***********************************/

p.headline 
{
    font-size:x-large;
    font-weight:bold;
    text-align:left;
    line-height:initial;
    margin-left:10em;
    color:blue; 
}
p.headline1 
{
    font-size:x-large;
    font-weight:bold;
    text-align:left;
    line-height:initial;
    margin-left:6em;
    color:blue; 
}
p.headline2
{
    font-size:x-large;
    font-weight:normal;
    text-align:left;
    text-decoration: underline;
    line-height:initial;
    margin-left:-9em;
    margin-top:-0em;
    color:blue; 
}


/***********************************/

p.standardtext 
{
    font-size:medium;
    font-weight:normal;
    text-align:justify;
    line-height:initial;
    margin-left:16em;
    max-width:600px;
    color:black; 
}

/***********************************/
p.links_ueberschrift
{
   text-align: center;
  
    margin-top: +1em;
     margin-bottom: +3em;
    font-size: 1.7em;
}

/***********************************/
p.impressum
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}

/***********************************/

p.impressum1
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}

/***********************************/
/*
p.dsgvo
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}

*/

/***********************************/
p.WordSection1
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}



/***********************************/
p.Paragraph
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}

/***********************************/
p.Headline2
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +1em;
     margin-left: +14em;
    font-size: 1.0em;
}


/***********************************/

p.bottomtext_1
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
   
    color: gray;
    background: rgb(46,49,53); 
    text-align: center;

    margin-top: 11em;
    margin-bottom: -10em;
}

p.bottomtext_2
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
   
    color: gray;
    text-align: center;

    margin-top: 3em;
    margin-bottom: 0em;
}

div.textbildhrm
{
   /* float: right;*/
  
  /*  margin-top: 8em;*/
    margin-bottom: -3em; 
    margin-left: 26em;
  /*  text-align: right;*/
  /*  margin-right: -10em;*/
}

/********************************************************************************************************************************************************************************/
/*********************************************************************************text formatierung ende ************************************************************************/       
/********************************************************************************************************************************************************************************/



/*********************************************************************************************************************************************************************************/
/*********************************************************************************bilder formatierung anfang *********************************************************************/
/*********************************************************************************************************************************************************************************/

img.bildtyp1 
{
    animation: colorize 5.0s cubic-bezier(0, 0, .78, .36) 1; /*Bild langsam einblenden in s*/
    background: transparent;
    border: 5px solid black; /*Rahmendicke und Farbe solid rgba(0, 0, 0, 0.12) */
    border-radius: 5px; /*Radius der Ecken des Rahmens**/
    padding: 0px; /*Enfernung Rahmen zum Bild*/
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

img.hclogo 
{
    
  
     width: 20%;   
     float: right; 
     margin-top: +1em;
     margin-right: -1em;
    /* border: 2px solid #4682b4;
     border-radius: 10px; */
     padding: 5px;
}


img.HRM
{
    width: 60%;
    height: 60%;
    margin-left: -6em;
     border-radius: 10px;  
}

/*




/**************************/
img.language_de
{
    
      
    
     margin-top: 0em;
     margin-left: 8em;
      margin-right: -8em;
    margin-bottom: -0em;
    /* border: 2px solid #4682b4;
     border-radius: 10px; 
     padding: 5px;*/
}
/**************************/
img.language_en
{
    
      
    
     margin-top: 0em;
     margin-left: 9em;
      margin-right: -8em;
    margin-bottom: -0em;
    /* border: 2px solid #4682b4;
     border-radius: 10px; 
     padding: 5px;*/
}
/**************************/
img.janologo
{
    
      
    
     margin-top: 1em;
     margin-left: 50em;
      margin-right: 1em;
    margin-bottom: 1em;
    
}
/**************************/
img.glasaufbildschirm
{

     border-radius: 15px;  
}

div.figure_glasaufbildschirm
{
    float: right;
    
    margin-top: 2em;
    margin-bottom: 3em;
    margin-right: 40em;
    text-align: center;
    
}


/********************************************************************************************************************************************************************************/
/*********************************************************************************bilder formatierung ende **********************************************************************/       
/********************************************************************************************************************************************************************************/

/********************************************************************************************************************************************************************************/
/*********************************************************************************video formatierung anfang **********************************************************************/  
/********************************************************************************************************************************************************************************/

 video  
{
    position:relative;
    top: 0em;
    left: 15em;
}

video1 
{
    position:relative;
    top: 0em;
    left: 15em;
}

video2 
{
    position:relative;
    top: 0em;
    left: 15em;
}

video3 
{
    position:relative;
    top: 0em;
    left: 20em;
}

video4 
{
    position:relative;
    top: 0em;
    left: 20em;
}

/********************************************************************************************************************************************************************************/
/*********************************************************************************video formatierung ende************************************************************************/  
/********************************************************************************************************************************************************************************/

/********************************************************************************************************************************************************************************/
/*********************************************************************************Link Formatierung Anfang***********************************************************************/
/********************************************************************************************************************************************************************************/
linktyp_controller

/********************************/
a.linktyp_controller:link 
{
    color: black; 
    text-decoration: none;
}

a.linktyp_controller:visited 
{
    color: grey; 
    text-decoration: none;
}
a.linktyp_controller:hover 
{
    color: red; 
    text-decoration: none;
}
/********************************/
a.index_linktyp1:link 
{
    color: blue;
    /*color: green;*/
    font-size: 1.6em;
    margin-top: 0em;
    margin-left: 15em;
    text-decoration: none;
}

a.index_linktyp1:visited 
{
    color: grey; 
    
}
a.index_linktyp1:hover 
{
    color: black; 
    text-decoration: none;
}
/********************************/
/********************************/

a.linktyp1_links:link 
{
    color: black; 
    text-decoration: none;
   
    font-size: 1.2em;
    margin-bottom: 20em;
    margin-left: 15em;
}

a.linktyp1_links:visited 
{
    color: grey; 
    text-decoration: none;
}
a.linktyp1_links:hover 
{
    color: red; 
    text-decoration: none;
}

/********************************/
a.impressum_linktyp1:link 
{
    color: blue; 
    text-decoration: none;
    margin-left: 1em;
}

a.impressum_linktyp1:visited 
{
    color: grey; 
    text-decoration: none;
}
a.impressum_linktyp1:hover 
{
    color: black; 
    text-decoration: none;
}
/********************************/

a.impressum_linktyp2:link 
{
    color: blue; 
    text-decoration: none;
    margin-left: 14em;
}

a.impressum_linktyp2:visited 
{
    color: grey; 
    text-decoration: none;
}
a.impressum_linktyp2:hover 
{
    color: black; 
    text-decoration: none;
}
/********************************/


a.footer:link 
{
    color: white; 
    /* color: #17c124;*/
    /*text-decoration: none;*/
}

a.footer:visited 
{
    color: white; 
    text-decoration: none;
}
a.footer:hover {
    color: yellow; 
    text-decoration: none;
}
/********************************/
a.footer1:link 
{
    color: white; 
}

a.footer1:visited 
{
    color: white; 
    text-decoration: none;
}
a.footer1:hover 
{
    color: yellow; 
    text-decoration: none;
}
/********************************/




a.footerlg:link 
{
    color: white; 
    /* color: #17c124;*/
    /*text-decoration: none;*/
}

a.footerlg:visited 
{
    color: white; 
    text-decoration: none;
}
a.footerlg:hover {
    color: yellow; 
    text-decoration: none;
}



/********************************/






a.linktyp_unten:link 
{
    color: gray; 
    text-decoration: none;
    margin-left: 4em;
    
}

a.linktyp_unten:visited 
{
    color: gray; 
    text-decoration: none;
}
a.linktyp_unten:hover 
{
    color: white; 
    text-decoration: none;
}


/********************************/
a.linktyp_email1:link 
{
    color: blue; 
   margin-left: 0em;
    text-decoration: none;
  
}

a.linktyp_email1:visited 
{
    color: grey; 
   
}
a.linktyp_email1:hover 
{
     color: black; 
   
    text-decoration: none;
    
}

a.janologo:link 
{
   
    margin-left: -8em;
    margin-top: 0em;
    display: inline-block;
    
}



/********************************************************************************************************************************************************************************/
/*********************************************************************************Link Formatierung Ende*************************************************************************/
/********************************************************************************************************************************************************************************/




/********************************************************************************************************************************************************************************/
/*********************************************************************************Footer Anfang**********************************************************************************/
/********************************************************************************************************************************************************************************/


footer 
{
    
     position:fixed;
   /*  left: 0;*/
     bottom: 0;
     width: 79em;
    float: center;
   margin-left: -2em;
      /*width: 100%;*/
   
    color: white; 
    
     background-color: blue;
     /*background-color: #152736;*/
     height: 3.3em;
}

footer p.right 
{
    text-align: left;
    margin-left: +2em;
    margin-top: -2.5em;
    
}

footer p.middle 
{
    text-align: center;
    margin-top: 0.7em;
      margin-left: +13em;
    
}


/********************************************************************************************************************************************************************************/
/*********************************************************************************Footer Ende************************************************************************************/
/********************************************************************************************************************************************************************************/



/********************************************************************************************************************************************************************************/
/*********************************************************************************JS aus Ersatzmenü Anfang***********************************************************************/
/********************************************************************************************************************************************************************************/


 .jsless-menu 
{
      margin-left:  0em;
    margin-top:    -25em; 
    /*margin-top:    0em; */
      margin-bottom:    -23em; /*werte kleiner verschiebung nach oben*/
      width: 200px;
}


.jsless-menu a 
{
  background-color: blue;
     /*background-color: #111;*/
  border-radius: 10px; 
  color: white;
  display: block;
  padding: 12px;
    
  text-decoration: none;
}

.jsless-menu a:hover
{
  background-color: gray;
}

/*
.vertical-menu a.active 
{
  background-color: #111;
  color: steelblue;
}
  */  
/********************************************************************************************************************************************************************************/
/*********************************************************************************JS aus Ersatzmenü Ende*************************************************************************/
/********************************************************************************************************************************************************************************/

/********************************************************************************************************************************************************************************/
/*********************************************************************************JS an Burgermenü Anfang************************************************************************/
/********************************************************************************************************************************************************************************/



.navbar
{
  background-color:blue;
  overflow:hidden;
  height:63px;
  border-radius: 10px; 
}

.navbar_1
{
    background-color:white;
    overflow:hidden;
    height: 400px;
    border-radius: 10px; 
    margin-left:  58em;
    margin-top:  0em;
}

.navbar_2
{
    background-color:white;
    overflow:hidden;
    height: 360px;
    border-radius: 10px; 
    margin-left:  59em;
    margin-right:  1em;
    margin-top:  -23.5em;
}

.navbar a
{
  float:left;
  display:block;
  color:white;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;;
  font-size:17px;
}
/*
.navbar ul
{
  margin:8px 0 0 0;
  list-style:none;;
}


.navbar a:hover
{
  background-color:red;
  color:#000;
}

.sidenav
{
  height:100%;
  width:0;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  background-color:#111;
  opacity:0.985;
  overflow-x:hidden;
  padding-top:60px;
  transition:0.6s;
}

.sidenav a
{
  padding:10px 10px 10px 30px;
  text-decoration:none;;
  font-size:22px;
  color:steelblue;
  display:block;
  transition:0.3s;
}

.sidenav a:hover
{
  color:red;
}
    
@media(max-width:568px)
{
  .navbar-nav
    {
        display:none;
    }
}

@media(min-width:568px)
{
  /*.open-slide{display:none;}
}
*/
/********************************************************************************************************************************************************************************/
/*********************************************************************************JS an Burgermenü Ende**************************************************************************/
/********************************************************************************************************************************************************************************/

p.blinkklasse 
{
    animation: blink 2s linear infinite;
    margin-top: +1em;
    margin-left:  30em;
    color: blue; 
    
}

 /********************************************************************************************************************************************************************************/
/********************************************************************************* Blinkfunktion Anfang**************************************************************************/
/********************************************************************************************************************************************************************************/



@keyframes blink
{
    from {
        opacity: 0;
         }
    to   {
        opacity: 1;
         }  
}

/********************************************************************************************************************************************************************************/
/********************************************************************************* Blinkfunktion Ende****************************************************************************/
/********************************************************************************************************************************************************************************/