/* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../font/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../font/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-800 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: bold;
    font-weight: 800;
    src: url('../font/montserrat-v25-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/montserrat-v25-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/montserrat-v25-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../font/montserrat-v25-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/montserrat-v25-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-italic - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../font/montserrat-v25-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/montserrat-v25-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/montserrat-v25-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/montserrat-v25-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('../font/montserrat-v25-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../font/montserrat-v25-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  
:root{
    --main-text-color: #3C3C3C;
    --title-color: #004664;
    --input-color: #00466480;
    --green: #00CD50;
    --button-blue: #376EE1;
    --white: #FFFFFF;
    --box-blue: #004664;
    --box-background: #F1F4F6;
    --main-font: Montserrat;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

div{
  overflow:auto;
}

body {
    padding-top: 10px;
    background-color: var(--white);
    color: var(--main-text-color);
    font-family: var(--main-font);
    font-size:16px;
    line-height: 22px;
  }


.container {
    width: 100%;
    margin: 0 auto;
    min-width: 800px;
  }

  .page {
    width:95%;
    min-width:720px;
    max-width:1200px;
    margin:0 auto;
    text-align:left;
  }

  .row{
    width:100%;
    clear:both;
  }

  .left{
    text-align:left;
  }

  .right{
    text-align:right;
  }

  .fett{
    font-weight:bold;
  }

  h1{
    font-style:bold;
    font-size: 50px;
    color: var(--title-color);
    line-height:61px;
  }

  h3{
    font-style:bold;
    font-size: 24px;
    line-height: 29px;
    color: var(--title-color);
  }

  h4{
    font-style:bold;
    font-size: 20px;
    line-height: 24px;
    color: var(--title-color);
  }

.row-half{
    width:49%;
    float:left;
}
  
.blue-button{
  cursor: pointer;
  padding-left:10px;
  padding-right:10px;
  height: 47px;
  background: var(--button-blue) 0% 0% no-repeat padding-box;
  border-radius: 6px;
  color: var(--white);
  text-align: center;
  font: normal normal medium 14px/18px var(--main-font);
  text-decoration:none;
  vertical-align:middle;
  display:inline-block;
  line-height:45px;
}

.green-button{
  cursor: pointer;
  padding-left:10px;
  padding-right:10px;
  height: 47px;
  background: var(--green) 0% 0% no-repeat padding-box;
  border-radius: 6px;
  color: var(--white);
  text-align: center;
  font: normal normal medium 14px/18px var(--main-font);
  text-decoration:none;
  vertical-align:middle;
  display:inline-block;
  line-height:45px;
}

div.footer {
  line-height: 55px;
  background: #004664 0% 0% no-repeat padding-box;
  opacity: 1;
  margin: 30px 0 0 0;
  color: #fff;
  left: 0;
  bottom: 0;
  width: 100%;

}

.footer a {
  font: 12px/20px normal Montserrat, Arial;
  color: #fff;
  text-decoration: none;
 margin-left: 10px;
 margin-right: 10px;
}

.footer a:hover {

  text-decoration: underline;

}

.footer_inn {
  margin:auto; display: flex;justify-content: space-between;
  width: 95%;
  min-width: 720px;
  max-width: 1200px;
}

.footer_inn img {
height: 50px;
}

.footer_small{
  display:none;
}

.links{
  float:left;
}

.rechts{
  float:right;
}

.links2{
  float:left;
}

.rechts2{
  float:right;
}

.accordion_btn {
 
  text-align: center !important;
  border: 2px solid;
  border-radius: 50%;
  line-height: 40px;
  max-width: 40px;
  color: #00CD50!important;
  height: 40px;
  float: right;
  width: 40px;
  font-size: 30px;

}


.accordion {
  background-color: var(--box-blue);;
  color: #FFFFFF;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: var(--box-blue);;
}

.panel {
  padding: 0px 30px;
  max-height: 0;
  overflow: hidden;
  border: 1px solid #004664;
  background-color: white;
  transition: max-height 0.2s ease-out;
}

.active{
  display:blocK !important;
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  background: url(../img/x-icon.png);
  color: #aaaaaa;
  float: right;
  font-size: 0px;
  width: 25px;
  height: 25px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.logo {
  width: 100%;
  text-align: right;
  clear: both;
}

.logo img {

  margin: 20px;
  width: auto;
height:84px;
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  h1{
    font-style:bold;
    font-size: 30px;
    color: var(--title-color);
    line-height:35px;
  }

    body {
      padding-top: 5px;
      background-color: var(--white);
      color: var(--main-text-color);
      font-family: var(--main-font);
      font-size:16px;
      line-height: 22px;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      min-width: 760px;
    }

    .page {
      width:100%;
      min-width:760px;
      max-width:768px;
      margin:0 auto;
      text-align:left;
    }

    #head_text_long{
      display:none;
    }

    .footer_inn {
      width: 80%;
    }

    .row{
      width:99%;
    }

    h4{
      font-size:17px;
    }

    .footer_small {
      display:none;
    }


    .logo img {
      width: 40%;
height:84px;
    }

    
    .blue-box-counter-number img {
      width: 34px !important;
    }

}

@media screen and (max-width: 767px) {
  div.footer{
    display:none;
  }

  h1{
    font-style:bold;
    font-size: 22px;
    color: var(--title-color);
    line-height:28px;
  }

    body {
      padding-top: 5px;
      background-color: var(--white);
      color: var(--main-text-color);
      font-family: var(--main-font);
      font-size:15px;
      line-height: 22px;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      min-width: 360px;
    }

    .page {
      width:100%;
      min-width:360px;
      max-width:767px;
      margin:0;
      text-align:left;
    }

    #head_text_long{
      display:none;
    }

    .footer_inn {
      width:90%;
      min-width:360px;
      max-width:767px;
      display:block;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .row{
      width:99%;
    }

    h4{
      font-size:17px;
    }

  h3{
      font-style:bold;
      font-size: 19px;
      line-height: 35px;
      color: var(--title-color);
    }

    .footer_small {
      display:block;
      text-align:left;
      line-height: 25px;
      background: #004664 0% 0% no-repeat padding-box;
      opacity: 1;
      margin: 30px 0 0 0;
      color: #fff;
      left: 0;
      bottom: 0;
      width:100%;
 
    }
    
    .footer_small a {
      font: 12px/20px normal Montserrat, Arial;
      color: #fff;
      text-decoration: none;
     margin-left: 10px;
     margin-right: 10px;
    }
    
    .footer_small a:hover {
    
      text-decoration: underline;
    
    }

    .footer{
      display:none;
    }

    .logo img {
      width: 40%;
    }

    .left h1 {
    width: 90%;
    margin: auto;
    font-size: 22px;

    }

    .blue-box-counter-number img {
      width: 34px !important;
    }
    
 

    .blue-box-counter {
      padding: 20px !important;
      width: 80% !important;
      min-height: 0 !important;
      margin: 10px auto !important;
     
    }
    .box-third {
      padding: 20px !important;
      width: 80% !important;
      min-height: 100px !important;
    }
    .row-blue-h2 {
      font-size: 22px !important;
    }

    .input-01 {
      width: 80% !important;
    }

    .box-kalkulieren {
      padding: 20px !important;
      width: auto !important;
    }

    .div-02 {

      width: 100% !important;
      text-align: left !important;
      padding: 0 !important;
      margin-bottom: 5px !important;
    }

    .registrieren .input-01 {
      width: 100% !important;
      padding: 0 !important;
    }
    
    .box-registrieren {

      padding: 25px !important;
      width: auto !important;
    }

    .blue-button {
      margin-bottom: 5px;
    }

    .green-button {
      margin-bottom: 5px;
    }
    
    .input-04 {
      width: 75% !important;
    }
}