/*TOPBANNER--------------------------------------------------------------------------------------------------------------START*/
#top_banner {
  text-align: center;
}

#top_banner_preise,
#top_banner_verlauf {
  background-color: #F7F7F8;
  /*background-image: radial-gradient(circle, #F7F7F8, #F7F7F8, white);*/
}


#top_banner_tool {
  background-color: #D7EAFC;
  /*background-image: radial-gradient(circle, #D7EAFC, #D7EAFC, white);*/

}

#top_banner_innen {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}


#top_banner_innen_padding_bottom {
  padding-bottom: 80px;
}

#top_banner_preise_innen,
#top_banner_verlauf_innen {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;
  padding-top: 100px;
}

#top_banner h1,
#top_banner_tool h1 {
  text-align: center;
  text-align: center;
  margin: 0px;
  padding: 0px;
  padding-top: 120px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: #008CFF;
  font-weight: 600;

}

#top_banner h2,
#top_banner_tool h2 {
  text-align: center;
  text-align: center;
  margin: 0px;
  padding: 0px;
  font-size: 55px;
  line-height: 62px;
  font-weight: 500;
  padding-bottom: 40px;
  font-weight: 600;

}

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

  #top_banner h2,
  #top_banner_tool h2 {
    text-align: center;
    text-align: center;
    margin: 0px;
    padding: 20px;
    font-size: 30px;
    line-height: 32px;

  }
}

#top_banner_blog h2 {
   color: white;
}

#top_banner p {

  padding-bottom: 50px;
}

#top_banner_blog p {
  color: white;
  padding-bottom: 50px;
}

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

  #top_banner h1,
  #top_banner_tool h1 {
    text-align: center;
    color: #00AAE9;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-top: 100px;
    font-size: 20px;
    line-height: 22px;
    font-weight: normal;

  }
  #top_banner h2,
  #top_banner_tool h2 {
    text-align: center;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    font-size: 30px;
    line-height: 32px;

  }

  #top_banner_innen {

      padding: 30px;
  }

    #top_banner_innen p {

      text-align: left;
  }

}
/*TOPBANNER--------------------------------------------------------------------------------------------------------------ENDE*/




/*TOOLS UND VORLAGEN*/


.element_tools_vorlagen_preview {
  background-color: #D7EAFC;
  -webkit-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
}

.element_tools_vorlagen_preview_img {
  padding-top: 20px;
  max-width: 150px;
  padding-bottom: 20px;
  margin: auto;
}

/*TOOLS UND VORLAGEN*/





/*TOOLS_UND_VORLAGEN----------------------------------------------------------------------------------------------------------START*/

/*TOOLS*/
#tools,
#vorlagen {
  background-color: rgb(229, 246, 252);
}

#tools_innen,
#vorlagen_innen {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 150px;
  padding-bottom: 150px;
}

.font_one {
  font-size: 23px;
  line-height: 36px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  color: #646A7D;
}

.tool_attribut_innen {
  padding: 0px;
}

.tool_attribut {
  display: inline-block;
  width: 33%;
  text-align: center;
  vertical-align: top;
}

.vorlage_attribut {
  display: inline-block;
  width: 33%;
  text-align: center;
  vertical-align: top;
}

#top_vorlage {
  padding-bottom: 0px;
}

.tool_attribut h3,
.vorlage_attribut h3 {
  padding-top: 50px;
  padding-bottom: 10px;
}

.tool_attribut h3 a:link,
.tool_attribut h3 a:visited, 
.vorlage_attribut h3 a:link,
.vorlage_attribut h3 a:visited {
  text-decoration: none;
  color: rgb(43, 40, 71);
}

.tool_attribut_link,
.vorlage_attribut_link {
  margin-top: 50px;
}

.tool_attribut_link a:link,
.tool_attribut_link a:visited,
.vorlage_attribut_link a:link,
.vorlage_attribut_link a:visited {
  background-color: #00AAE9;
  text-align: center;
  text-decoration: none;
  color: white;
  border: 2px solid #00AAE9;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  padding: 15px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 19px;
  line-height: 30px;
}



.tool_attribut_link a:hover,
.vorlage_attribut_link a:hover {
  border: 2px solid rgb(73, 204, 254);
  background-color: rgb(73, 204, 254);

}


#tool_icon_banner {
  width: 100%;
  background: linear-gradient(transparent 50%, white 50%);

  height: 300px;
  margin: 0px;
  padding: 0px;
}

#tool_icon {
  height: 300px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#stundenzettel_vorlagen_breite {
  max-width: 1105px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

#stundenzettel_vorlagen {
  width: 800px;
  display: inline-block;
  vertical-align: top;
  
}

#vorlage_bewerten {
  width: 300px;
  display: inline-block;
  vertical-align: top
}

#tool_bewerten {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

  #tool_bewerten_innen {
    padding-left: 0px;
    padding-right: 0px;
  }

@media screen and (max-width:1400px) {
  #tool_bewerten_innen {
    padding-left: 40px;
    padding-right: 40px;
  }
}

#stundenzettel_vorlagen h2,
#vorlage_bewerten h2,
#tool_bewerten h2 {
  font-size: 27px;
  line-height: 32px;
  margin: 0px;
  padding: 0px;
  padding-top: 30px;
  padding-bottom: 20px;
}

#tool_bewerten h2 {
  color: rgb(43, 40, 71);
}


#stundenzettel_vorlagen_innen,
#vorlage_bewerten_innen {
  padding: 20px;
}

#stundenzettel_vorlagen h3 {
  color: rgb(43, 40, 71);
  margin: 0px;
  padding: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}

#stundenzettel_vorlagen ul {
  margin: 0px;
  padding: 0px;
  list-style-position: inside;
  list-style: none;
}

#stundenzettel_vorlagen ul li {
  margin: 0px;
  padding: 0px;
  line-height: 50px;

}

#stundenzettel_vorlagen ul li a:link,
#stundenzettel_vorlagen ul li a:visited {
  /*color: #000A3D;
  color: #008CFF;*/
  color: #000A3D;
  text-decoration: none;
  border: 1px solid #646A7D;
  padding: 5px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 15px;
  -webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
display: block;
line-height: 30px;
  background: url('https://lrtest.de/tenx_vorlagen/download_icon_vorlagen.svg') right 20px center no-repeat; 
  padding-right: 30px;
  line-height: 33px;
}

#stundenzettel_vorlagen ul li a:hover {
 
  color: white;
  text-decoration: none;
  border: 1px solid #008CFF;
  padding: 5px;
  margin-bottom: 15px;
  padding-left: 25px;
  -webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
  background: url('https://lrtest.de/tenx_vorlagen/download_icon_vorlagen_white.svg') right 20px center no-repeat; 
   background-color: #008CFF;
}

@media screen and (max-width:1100px) {
  #stundenzettel_vorlagen {
    width: 100%;
    display: block;
    vertical-align: top;
    
  }

  #vorlage_bewerten {
    width: 100%;
    display: block;
    vertical-align: top
  }
}

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

#tools_innen,
#vorlagen_innen {
  width: 100%;
  display: block;
  margin: 0px;
  padding: 0px;
  padding-top: 50px;
  padding-bottom: 50px;
}

#stundenzettel_vorlagen h2 {
  font-size: 20px;
  line-height: 24px;
  margin: 0px;
  padding: 0px;
  padding-top: 20px;
  padding-bottom: 5px;
}

.tool_attribut_innen {
  padding: 20px;
}

  .tool_attribut {
    display: block;
    width: 100%;
    text-align: center;
  }

  .vorlage_attribut {
    display: block;
    width: 100%;
    text-align: center;
  }

  #top_vorlage {
  padding-bottom: 70px;
}


.tool_attribut_link,
.vorlage_attribut_link {
  margin-top: 20px;
  margin-bottom: 40px;
}

  #tool_icon_banner {
    width: 100%;
    background-image: url('https://arbeitszeiterfassung.com/img/arbeitszeitrechner_icon_banner_mobile.png'); 
    background-repeat: repeat-x;
    height: 150px;
    margin: 0px;
    padding: 0px;
  }

    #tool_icon {
    height: 150px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
  } 
}

/*TOOLS_UND_VORLAGEN----------------------------------------------------------------------------------------------------------ENDE*/


/*MOCKUP_BANNER---------------------------------------------------------------------------------------------------------START*/
#mockup_banner {
  display: block;
  width: 100%;
  background-color: #F1F1F1;
  height: auto;
  background-image: url(https://arbeitszeiterfassung.com/fw_frontend/img/banner_konto_erstellen_mockup.png);
  background-repeat: no-repeat;
  background-position: right; 
  background-size: contain;
}

#mockup_banner_text{
  display: inline;
  margin-left: 0px;
  margin-right: auto;
  width: 49%;
}
#mockup_banner_text_innen {
  padding-left: 100px;
  padding-top: 250px;
  padding-bottom: 350px;
}


#mockup_banner_link {
  margin-top: 40px;
}

#mockup_banner_link a:link, 
#mockup_banner_link a:visited {
   color: white;
background-color: #009B39;
  -webkit-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
margin: 0px;
}



#mockup_banner_link a:hover {
background-color: #00742B;
}


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

  #mockup_banner_text_innen {
  padding-left: 100px;
  padding-top: 150px;
  padding-bottom: 250px;
}
  
  #mockup_banner {
    display: block;
    width: 100%;
    background-color: #F1F1F1;
    height: auto;
    background-image: url(https://arbeitszeiterfassung.com/fw_frontend/img/banner_konto_erstellen_mockup.png);
    background-repeat: no-repeat;
    background-position: bottom right; 
    background-size: 50%, 50%;
  }
}

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

  #mockup_banner_text_innen {
  padding-left: 100px;
  padding-top: 250px;
  padding-bottom: 250px;
}
  
  #mockup_banner {
    display: block;
    width: 100%;
    background-color: #F1F1F1;
    height: auto;
    background-image: none;
  }
}



/*MOCKUP_BANNER---------------------------------------------------------------------------------------------------------ENDE*/


/*TIPP BOX-------------------------------------------------------------------------------------------------------------START*/
#tipp_box {
  background-color: #D7EAFC;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  -webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

}

#tipp_box_innen {
 padding: 70px; 
}

#tipp_box_innen_icon {
  display: inline-block;
  width: 29%;
  vertical-align: top;

}

#tipp_box_innen_text {
  display: inline-block;
  width: 70%;
  vertical-align: top;
  text-align: left;
}

#tipp_box_innen_text p {
  font-size: 23px;
  line-height: 36px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  color: #646A7D;
}

#tipp_box_innen_text h2 {

    margin: 0px;
  padding: 0px;
  padding-top: 20px;
  padding-bottom: 10px;
}

@media screen and (max-width: 1025px) {
  #tipp_box {
  margin-bottom: 0px;
  }

  #tipp_box_innen {
    padding: 20px;
  }

  #tipp_box_innen_icon {
  display: block;
  width: 100%;
  vertical-align: top;
  text-align: center;

}

#tipp_box_innen_text {
  display: block;
  width: 100%;
  vertical-align: top;
}
}

/*TIPP BOX-------------------------------------------------------------------------------------------------------------ENDE*/


/*FAQ--------------------------------------------------------------------------------------------------------------------START*/
#faq_vorlagen_und_tools {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;

}


.accordion {
  color: rgb(43, 40, 71);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  display: block;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  border-top: 2px solid rgb(213, 216, 217);
  background-image: url('https://arbeitszeiterfassung.com/img/div_aufklappen.svg'); 
  background-repeat: no-repeat;
   background-position: 99% 50%;
   background-color: white; 
}

#last_accordion {
  border-bottom: 2px solid rgb(213, 216, 217);
}


.panel {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  display: none;
  overflow: hidden;
  margin: 0px;
}
/*FAQ--------------------------------------------------------------------------------------------------------------------ENDE*/










/* The Modal (background) */
#popup_frontend_background {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
#popup_frontend {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  max-width: 600px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
  -webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

#popup_frontend_innen {
  padding: 20px;
}

#popup_frontend_innen h2 {
  padding-top: 20px; 
  display: block; 
  width: 100%; 
  font-size: 24px;
  text-align: center;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}


  #google_icon {
        width: 75px;
        margin: auto;
        margin-top: 35px;
        margin-bottom: 35px;
      }

      #google_link {
        width: 300px;
        margin: auto;
      }

      #google_link a:link,
      #google_link a:visited {
        display: block;
        width: 100%;
        background-color: #FDA130;
        color: white;
        text-align: center;
        padding: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 500;
        text-decoration: none;
        -webkit-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
font-weight: 500;
      }

      #google_link a:hover {
        opacity: 0.75;
      }


      #button_close_popup_bewertung {
        display: block;
        width: 100%;
        outline: none;
        border: none;
        margin:  0px;
        padding:  0px;
        cursor:  pointer;
        background-color: white;
        font-size: 30px;
        color: black;
        text-align: right;
      }

#close_popup {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}


#button_close_popup {
  background-color: white;
  text-decoration: underline;
  border: none;
  color:  grey;
  cursor: pointer;
  text-align: center;
}

#button_close_popup:hover {
  color: black;
}