html 
 {
    background: white; 
    height: 100%;
   
 }

main 
{
	padding: 0;
    
}

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

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

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

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



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



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

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

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


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

h1  
{
    color:   steelblue;
   text-align: center;
 line-height: 1.6em;
     margin-top: 0.4em;
   /* margin-left: 4.7em;*/
}

/*
h1  
{
    color:   steelblue;
    font-weight: 600;
    line-height: 1.6em;
     margin-top: 0.4em;
    margin-left: 4.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.kontakt 
{
     text-align: center;
   margin-left: +0em;
    margin-top: +5em;
    font-size: 1.3em;
}

p.die_neue_s 
{
    text-align: center;
   /*margin-left:  15em;*/
    margin-top: +3em;
    font-size: 1.7em;
}


p.blinkklasse 
{
    animation: blink 2s linear infinite;
    margin-top: +10em;
  /*  margin-left:  35em;*/
    text-align: center;
    color: blue; 
    
}

p.schleifstation_textblock1 
{
   
    margin-left:  1em;
    margin-top: 1em;
    margin-bottom: 5em;
    color: black; 
    
}


p.schleifstation_textblock2 
{
   
    margin-left:  +1em;
    margin-top: -3em;
    margin-bottom: 5em;
    color: black; 
   
}

p.schleifstation_textblock3 
{
   
    margin-left:  1em;
    margin-top: -3em;
    margin-bottom: 5em;
    color: black;
   
    
}

p.schleifstation_textblock4 
{
   
    margin-left:  1em;
    margin-top: +0em;
    margin-bottom: 0em;
     
    color:black;
   
    
}

p.schleifarmkonzept_textblock1 
{
   
    margin-left:  1em;
    margin-top: 1em;
    margin-bottom: 5em;
    color: black;
   
    
}
/***********************************/
p.links_ueberschrift
{
   text-align: center;
  
    margin-top: +1em;
     margin-bottom: +5em;
    font-size: 1.7em;
}
/***********************************/
p.downloads_ueberschrift
{
   text-align: center;
  
    margin-top: +1em;
     margin-bottom: +5em;
    font-size: 1.7em;
}

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

p.downloads_ueberschrift1
{
   text-align: left;
  
    margin-top: +1em;
     margin-bottom: +1em;
    font-size: 1.2em;
}


p.downloads_download1_datenblatt
{
   text-align: left;
  
    margin-top: +0em;
     margin-bottom: +5em;
    font-size: 1.0em;
}

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

p.textunten_index
{
    width: auto;
     /* width: 79em;*/
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 20em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_index
{
     width: auto;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_schleifstation
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 55em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_schleifstation
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}


/***********************************/
p.textunten_caddesign
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 7em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_caddesign
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_kontakt
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 25em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_kontakt
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_datenschutz
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 28em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_datenschutz
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_impressum
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 23em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_impressum
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_schleifarmkonzept
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 13.5em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_schleifarmkonzept
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_links
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 49em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_links
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/
p.textunten_downloads
{
    width: 79em;
    height: 10em;
    margin-left:  -2em;
    margin-right:  -2em;
    margin-top: 49em;
    margin-bottom: 3em;
    color: gray;
    background: rgb(46,49,53); 
     text-align: center;
}

p.textunten2_downloads
{
    width: 79em;
    margin-left:  -2em;
    margin-right:  -2em;
      margin-top: -9em;
     margin-bottom: 4em;
    color: gray;
    text-align: center;
   
}
/***********************************/


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



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

img.bildtyp1 
{
    animation: colorize 5.0s cubic-bezier(0, 0, .78, .36) 1; 
    background: transparent;
    border: 5px solid black; 
    border-radius: 5px; 
    padding: 0px; 
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

img.hrlogo 
{
    
     width: 20%;
    
     /*width: 20%;*/
     float: right; 
     margin-top: -57px;
     margin-right: 7px;
     border: 2px solid #4682b4;
     border-radius: 10px; 
     padding: 5px;
}


img.hrbanner
{
    
     width: 90%;   
     float: right; 
     margin-top: -64.5px;
     margin-right: 1px;
    /* border: 2px solid #4682b4;*/
     border-radius: 10px; 
     padding: 5px;
}

img.caddesign 
{
     float: right;
     width: auto;
     height: auto;
     margin-top: 11em;
     margin-right: 2em;
     border-radius: 15px;  
}

img.quote_main 
{
     float: right;
     width: auto;
     height: auto;
     transform: rotate(-30deg);
     margin-top: -35em;
     margin-right: +54em;
     border-radius: 5px;  
}

img.quote_lets 
{
    float: right;
    width: auto;
    height: auto;
    transform: rotate(-30deg);   
    margin-top: -39em;
    margin-right: +46em;
    border-radius: 5px;  
  
}



img.quote 
{
    float: right;
    width: auto;
    height: auto;
    transform: rotate(-30deg);
    margin-top: -40em;
    margin-right: +50em;
    border-radius: 5px; 
}

img.quote_cad 
{
     float: right;
     width: auto;
     height: auto;
     transform: rotate(-30deg);
     margin-top: -38em;
     margin-right: +50em;
     border-radius: 5px;   
}

img.typewriter 
{
    float: right;
    width: 45%;
    height: 45%;
    margin-top: 10em;
  
    margin-right: 1em;
    border-radius: 10px; 
}




/**************************/
img.werkzeugwechsel1
{
    
    border-radius: 10px; 
}

div.figure_werkzeugwechsel1
{
    float: right;
    width: 40%;
    height: 40%;
    margin-top: -25em;
    margin-bottom: -10em;
    margin-right: 1em;
    text-align: center;
    
}
/**************************/
img.arm1
{
    
    border-radius: 10px; 
    width: 55%;
    height: 55%;
}

div.figure_arm1
{
    float: right;
    width: 80%;
    height: 80%;
    margin-top: +5em;
    margin-right: 28em;
    margin-left: auto;
    margin-bottom: -15em;
    text-align: center;
    
}

/**************************/
img.arm2
{
    
    border-radius: 10px; 
    width: 55%;
    height: 55%;
}

div.figure_arm2
{
    float: right;
    width: 80%;
    height: 80%;
    margin-top: -38.9em;
    margin-right: -13.9em;
    margin-left: auto;
    margin-bottom: -40em;
    text-align: center;
    
}


/**************************/
img.glasaufbildschirm
{
    width: 100%;
    height: 100%;
     border-radius: 10px;  
}

div.figure_glasaufbildschirm
{
    float: right;
  
    margin-top: 8em;
    margin-bottom: 3em;
    margin-right: 40em;
    text-align: center;
    
}
/**************************/
img.fertigesglas
{
      border-radius: 15px;  
}


div.figure_fertigesglas
{
    float: right;
   
   margin-top: -42.5em;
    margin-right: 1em;
    text-align: center;
    
}
/**************************/

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

/********************************************************************************************************************************************************************************/
/*************************************Bewegte Bilder anfang**********************************************************************************************************************/
/********************************************************************************************************************************************************************************/


/*************************************Bewegte Bilder scroll main seite anfang****************************************************************************************/



#gallery 
{
	 width: 100%;
    height: 100%;
    
   
     float: center; 
  
	overflow: hidden;
    border-radius: 10px; 
}

@media (min-width: 40em) 
{
	#gallery 
    {
		width: 40em;
		height: 30em;
    }
}

@media (max-width: 60em) 
{
	#gallery 
    {
		width: 100%;
		height: 45em;
	}
}

#gallery figure 
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

#gallery figcaption 
{
	position: relative;
    /*position: absolute;*/
	left: 1em;
	bottom: 2em;
	color: black;
}

#gallery img 
{
	width: 100%;
	margin: 0;
	padding: 0;
    border-radius: 10px; 
}


#gallery figure 
{
	height: 100%;
	animation: slide 28s infinite ease-in-out;
    
}

#gallery:hover figure 
{
	animation-play-state: paused;
}

@keyframes slide 
{
	0%{
		top: 0
	   }
	12%{
		top: 0
	   }
	16%{
		top: -100%
	   }
	28%{
		top: -100%
	   }
	32%{
		top: -200%
	   }
	44%{
		top: -200%
	   }
	48%{
		top: -300%
	   }
	60%{
		top: -300%
	   }
	65%{
		top: -400% 
	   }
	78%{
		top: -400%
	   }

	100%{
        top: 0 
	   }
}


/*************************************Bewegte Bilder scroll main seite ende******************************************************************************************/

/*************************************Bewegte Bilder scroll schleifstation seite anfang******************************************************************************/




#gallery1 
{
    
    width: 100%;
    height: 100%;
    
    /*margin-left: 40em;*/
     float: center; 
   /* margin-top: -27em;
    margin-bottom: 5em;*/
	overflow: hidden;
    border-radius: 10px; 
}

@media (min-width: 40em) 
{
	#gallery1 
    {
		width: 35em;
		height: 26.25em;
    }
}

@media (max-width: 60em) 
{
	#gallery1 
    {
		width: 100%;
		height: 45em;
	}
}

#gallery1 figure 
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

#gallery1 figcaption 
{
	position: absolute;
	left: 1em;
	bottom: 2em;
	color: black;
}

#gallery1 img 
{
	width: 100%;
	margin: 0;
	padding: 0;
    border-radius: 10px; 
}


#gallery1 figure 
{
	height: 100%;
	animation: slide1 28s infinite ease-in-out;
    
}

#gallery1:hover figure 
{
	animation-play-state: paused;
}

@keyframes slide1 
{
	0%{
		top: 0
	   }
	12%{
		top: 0
	   }
	16%{
		top: -100%
	   }
	28%{
		top: -100%
	   }
	32%{
		top: -200%
	   }
	44%{
		top: -200%
	   }
	48%{
		top: -300%
	   }
	60%{
		top: -300%
	   }
	65%{
		top: -400% 
	   }
	78%{
		top: -400%
	   }
	100%{
        top: 0 
	   }
}

/*************************************Bewegte Bilder scroll schleifstation seite ende********************************************************************************/



/*************************************Bewegte Bilder scroll schleifarmkonzept seite anfang****************************************************************************************/



#gallery3 
{
	  width: 100%;
    height: 100%;
	margin: 0 auto;
	overflow: hidden;
    border-radius: 10px;
     float: center;
   
   /*  border: 3px solid black;
     padding: 1px;*/
}

@media (min-width: 40em) 
{
	#gallery3 
    {
		width: 40em;
		height: 30em;
    }
}

@media (max-width: 60em) 
{
	#gallery3 
    {
		width: 100%;
		height: 45em;
	}
}

#gallery3 figure 
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

#gallery3 figcaption 
{
	position: absolute;
	left: 1em;
	bottom: 1em;
	color: black;
}

#gallery3 img 
{
	width: 100%;
	margin: 0;
	padding: 0;
    border-radius: 10px; 
}


#gallery3 figure 
{
	height: 100%;
	animation: slide3 20s infinite ease-in-out;
    
}

#gallery3:hover figure 
{
	animation-play-state: paused;
}

@keyframes slide3 
{
	0%{
		top: 0
	   }
	24%{
		top: 0
	   }
	33%{
		top: -100%
	   }
	57%{
		top: -100%
	   }
	66%{
		top: -200%
	   }
	90%{
		top: -200%
	   }
    
    /*
    
    0%{
		top: 0
	   }
	12%{
		top: 0
	   }
	16%{
		top: -100%
	   }
	28%{
		top: -100%
	   }
	32%{
		top: -200%
	   }
	44%{
		top: -200%
	   }
    
    */
    
	100%{
        top: 0 /*!important*/
	   }
}


/*************************************Bewegte Bilder scroll schleifarmkonzept seite ende******************************************************************************************/



/********************************************************************************************************************************************************************************/
/*************************************Bewegte Bilder ende************************************************************************************************************************/
/********************************************************************************************************************************************************************************/


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


/********************************/
a.linktyp1:link 
{
    color: black; 
    text-decoration: none;
    text-align: center;
}

a.linktyp1:visited 
{
    color: grey; 
    text-decoration: none;
}
a.linktyp1:hover 
{
    color: red; 
    text-decoration: none;
}
/********************************/
a.linktyp2:link 
{
    color: blue; 
    text-decoration: none;
}

a.linktyp2:visited 
{
    color: grey; 
    text-decoration: none;
}
a.linktyp2:hover 
{
    color: #2c723a; 
    text-decoration: none;
}
/********************************/
a.linktyp3:link 
{
    color: blue; 
    
}

a.linktyp3:visited 
{
    color: grey; 
   
}
a.linktyp3:hover 
{
    color: red; 
    text-decoration: none;
}
/********************************/
a.index_linktyp1:link 
{
    color: blue;
   
    font-size: 1.2em;
  float: center;
   
   
}

a.index_linktyp1:visited 
{
    color: grey; 
    
}
a.index_linktyp1:hover 
{
    color: black; 
    text-decoration: none;
}
/********************************/
a.linktyp_email1:link 
{
    color: blue; 
    font-size: 1.0em;
    text-decoration: none;
   
}

a.linktyp_email1:visited 
{
    color: grey; 
   
}
a.linktyp_email1:hover 
{
    color: green; 
    text-decoration: none;
   
}
/********************************/
a.linktyp5:link 
{
    color: blue; 
   
}

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

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

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

a.footer1:visited 
{
    color: steelblue; 
    text-decoration: none;
}
a.footer1:hover 
{
    color: red; 
    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.linktyp1_schleifstation:link 
{
    font-size: 1.2em;
    color: black; 
   text-decoration: none;
    margin-left: 1em;
    
}

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

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

a.linktyp2_schleifstation:link 
{
    color: blue; 
    
}

a.linktyp2_schleifstation:visited 
{
    color: blue; 
    text-decoration: none;
}
a.linktyp2_schleifstation:hover 
{
    color: white; 
    text-decoration: none;
}


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

a.linktyp1_schleifarmkonzept:link 
{
    font-size: 1.2em;
    color: black; 
    margin-top: 1em;
  text-align: center;
  
    
}

a.linktyp1_schleifarmkonzept:visited 
{
    color: black; 
    text-decoration: none;
}
a.linktyp1_schleifarmkonzept:hover 
{
    color: white; 
    text-decoration: none;
}

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

a.linktyp1_links:link 
{
    font-size: 1.2em;
    color: black; 
   
    margin-left: 1em;
    
}

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

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

a.linktyp1_downloads:link 
{
    font-size: 1.2em;
    color: black; 
    margin-left: 1em;
    text-decoration: none;
}

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

/********************************/
a.janologo:link 
{
   /* margin-right: -35em;*/
    margin-left: 45em;
    margin-top: -25em;
   /* margin-bottom: -1em;*/
    /*float:right;*/
    display: inline-block;
    
}





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




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


footer 
{
    
     position:fixed;
    /*  position:fixed;*/
     left: 0;
     bottom: 0;
     width: 100%;
    
     color: steelblue; 
     background-color: #111;
     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;
    
}


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

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



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

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


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



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

/*orig

.navbar{
  background-color:#3b5998;
  overflow:hidden;
  height:63px;
}
orig*/


.navbar a
{
  float:left;
  display:block;
  color:steelblue;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;;
  font-size:17px;
}

/*orig

.navbar a{
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
}

orig*/

.navbar ul
{
  margin:8px 0 0 0;
  list-style:none;;
}

/*orig
.navbar ul{
  margin:8px 0 0 0;
  list-style:none;
}

orig*/

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

/*orig

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

orig*/

.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;
}

/*orig

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

orig*/

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

/*orig

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-size:22px;
  color:#ccc;
  display:block;
  transition:0.3s;
}
orig*/

.sidenav a:hover
{
  color:red;
}
    
/*orig

.side-nav a:hover{
  color:#fff;
}

orig*/

/*new*/
.sidenav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:36px;
  margin-left:50px;
}

/*new*/
#main{
  transition:margin-left 0.5s;
  padding:20px;
  overflow:hidden;
  width:100%;
}



@media(max-width:568px)
{
  .navbar-nav
    {
        display:none;
    }
}

/*orig

@media(max-width:568px){
  .navbar-nav{display:none}
}

orig*/

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

/*orig

@media(min-width:568px){
  /*.open-slide{display:none}
}
orig*/

/********************************************************************************************************************************************************************************/
/*********************************************************************************JS an Burgermenü Ende**************************************************************************/
/********************************************************************************************************************************************************************************/


.container {
    display: flex;
    align-items: flex-start; /* Align items at the top (or you can use center, etc.) */
    /*  gap: 100px; /* Adds space between the image and the text */
}

.imageleft {
  /*  max-width: 200px; /* Set an appropriate size for your image */
     margin-top: 4em;
     margin-left: 1em; 
    width: 20%;
    height: 17%;
}

.imageright {
  /*  max-width: 200px; /* Set an appropriate size for your image */
     margin-top: 4em;
     margin-right: 1em; 
    width: 40%;
    height: 37%;
}

.text {
    /* You can freely position the text block within the flex container */
    margin-top: 5em; /* Example: moves the text down a bit */
     margin-left: 2em; 
    text-align: left; /* Align the text as needed */
    max-width: 600px; /* Define a max width to control the text area */
}

.text1 {
    /* You can freely position the text block within the flex container */
 
    text-align: left; /* Align the text as needed */
    max-width: 600px; /* Define a max width to control the text area */
}

.bullet-headline::before {
    content: "• "; /* Adds a bullet point */
    color: #007bff;   /* Bullet color */
    font-size: 1.2em; /* Adjust size to match text */
    margin-right: 5px; /* Space between bullet and text */
}

.hook-headline::before {
    content: "✔ "; /* Adds a bullet point */
    color: green;  /* Bullet color */
    font-size: 1.2em; /* Adjust size to match text */
    margin-right: 5px; /* Space between bullet and text */
}




.toc {
    margin-top: 20px;
margin-left: 2em;
}

.toc a {
    text-decoration: none;
    color: #007bff;
    display: block;
    margin: 5px 0;
}

.section {
    margin-top: 50px;
    
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 5px;
}