*{
	padding: 0;
	margin: 0 ;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');

@font-face { font-family: Inter; src: url('Inter/Inter-VariableFont_slnt,wght.ttf'); } 


.main-box{
  position: relative;
  font-family: "Inter";
  width: 100%;
  height: auto;
  padding-top:30px;
  padding-bottom:60px;
  border-bottom: 2px solid #f38501;
  border-top: 2px solid #f38501;
  margin-top:20px;
}

.fortschritt-box{
  position: relative;
  width: auto;
  width: 90%;
  margin-left: 5%;
  max-width: 600px;
  height: 10px;
  background-color: #6e6e6e;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.fortschritt-box1{
  position: relative;
  width: 20%;
  height: 100%;
  background-color: #f38501;
  display: block;
}
.fortschritt-box2{
  position: relative;
  width: 20%;
  height: 100%;
  background-color: #f38501;
  display: none;
}

.fortschritt-box3{
  position: relative;
  width: 20%;
  height: 100%;
  background-color: #f38501;
  display: none;
}

.fortschritt-box4{
  position: relative;
  width: 20%;
  height: 100%;
  background-color: #f38501;
  display: none;
}

.fortschritt-box5{
  position: relative;
  width: 20%;
  height: 100%;
  background-color: #f38501;
  display: none;
}


.box1{
    position: relative;
    width: auto;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
    padding-top: 20px;
}

.box2{
  position: relative;
  width: auto;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  padding-top: 20px;
}

.box3{
  position: relative;
  width: auto;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  padding-top: 20px;
}

.box4{
  position: relative;
  width: auto;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  padding-top: 20px;
}

.box5{
  position: relative;
  width: auto;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  padding-top: 20px;
}

#box1{
  display: block;
}

#box2{
  display: none;
}

#box3{
  display: none;
}

#box4{
  display: none;
}

#box5{
  display: none;
}

.box1-headline{
  position: relative;
  width: auto;
  text-align: center;
  color:#000;
  font-size:27px;
}

.box1-infotext{
  position: relative;
  width: 90%;
  max-width: 600px;
  height: auto;
  color:#000;
  line-height: 1.3;
  font-size:16px;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
}

.box1-headline-p-2{
  position: relative;
  width: 90%;
  max-width: 600px;
  line-height: 1.3;
  font-size:18px;
  margin-top:30px;
  font-weight: bold;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}


.div-info-kredit-summe{
  position: relative;
  display: flex;
  width: auto;
  width: 90%;
  max-width: 500px;
  margin-top: 10px;
}

.div-info-kredit-summe2{
  position: relative;
  display: flex;
  display: flex;
  width: auto;
  width: 90%;
  max-width: 500px;
  margin-top: 20px;
}

.div-info-kredit-summe-bx1{
  position: relative;
  font-family: "Inter";
  font-size:19px;
  font-weight: bold;
  width: 60%;
  text-align: left;
}



.div-info-kredit-summe-bx2{
  position: relative;
  font-family: "Inter";
  font-size:15px;
  text-align: right;
  width: 40%;
  top:3px;
}


.kreditsumme-range{
  position: relative;
  display: flex;
  width: auto;
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px;
}

.input-box{
  position: relative;
  width: auto;
  width: 90%;
  max-width: 500px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}



.dsgvo-box{
  position: relative;
  width: 100%;
  display: flex;
}

.dsgvo-checkbox{
  position: relative;
  width: 20px;
  height: 20px;
}

.dsgvo-box-b2{
  position: relative;
  margin-left: 10px;
  font-size: 14px;
  line-height: 1.3;
}

.pflichtfelder-hinweis{
  position: relative;
  font-size: 14px;
  font-weight: bold;
  margin-top:15px;
}


.button-box{
  position: relative;
  width: auto;
  width: 90%;
  max-width: 300px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.button-box-b1{
position: relative;
width: 20%;
}
.button-box-b2{
  position: relative;
  width: 70%;
  margin-left: 10%;
}

.button-zuruck{
  position: relative;
  width: 100%;
  height: 35px;
  background-color: #919191;
  color:#fff;
  font-size: 18px;
  border:none;
  border-radius: 5px;
  transition: 0.5s;
}
.button-zuruck:hover{
  background-color: #757575;
  cursor: pointer;
}

.button-weiter{
  position: relative;
  width: 100%;
  height: 35px;
  background-color: #f38501;
  color:#fff;
  font-size: 18px;
  border:none;
  border-radius: 5px;
  transition: 0.5s;
}

.button-weiter:hover{
  background-color: #d67600;
  cursor: pointer;
}

.button-weiter-send-disabled{
    position: relative;
    width: 100%;
    height: 35px;
    background-color: #6d6d6d;
    color:#fff;
    font-size: 18px;
    border:none;
    border-radius: 5px;
    transition: 0.5s;
    cursor: not-allowed;
  }
  
  .button-weiter-send-disabled:hover{
    background-color: #575757;
    cursor: not-allowed;
  }

  .button-weiter-send{
    position: relative;
    display: none;
    width: 100%;
    height: 35px;
    background-color: #f38501;
    color:#fff;
    font-size: 18px;
    border:none;
    border-radius: 5px;
    transition: 0.5s;
    cursor: pointer;
  }
  
  .button-weiter-send:hover{
    background-color: #d67600;
    cursor: pointer;
  }



/* Actual code example */
.form-field {
  display: block;
  margin-bottom: 16px;
}
#label_hover:hover {
  cursor: text;
}
.form-field--is-active .form-field__control::after {
  border-bottom: 2px solid #f38501;
  transform: scaleX(150);
}
.form-field--is-active .form-field__label {
  color: #f38501;
  font-size: 0.75rem;
  transform: translateY(-14px);
}
.form-field--is-filled .form-field__label {
  font-size: 0.75rem;
  transform: translateY(-14px);
}

.form-field__label {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  left: 0;
  margin: 0;
  padding: 18px 12px 0;
  position: absolute;
  top: 0;
  transition: all 0.4s;
  width: 100%;
}

.form-field__control {
  background: #eee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.form-field__control::after {
  border-bottom: 2px solid #f38501;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: all 0.4s;
  width: 1%;
}

.form-field__input,
.form-field__textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #999;
  color: #333;
  display: block;
  font-size: 1rem;
  margin-top: 24px;
  outline: 0;
  padding: 0 12px 10px 12px;
  width: 100%;
}

.form-field__textarea {
  height: 150px;
}

.laufender-kredit-headline{
  position: relative;
  width: 100%;
  max-width: 600px;
  line-height: 1.3;
  font-size:18px;
  margin-top:30px;
  font-weight: bold;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.laufender-kredit-headline-2{
  position: relative;
  width: 100%;
  max-width: 600px;
  line-height: 1.3;
  font-size:18px;
  margin-top:5px;
  font-weight: bold;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.weiterer_kredit_box{
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  margin-top:5px;
}

.weiterer_kredit_box_1{
  position: relative;
  height: auto;
  width: 48%;
}

.weiterer_kredit_box_2{
  position: relative;
  height: auto;
  width: 48%;
  margin-left: 4%;
}

#weiterer_kredit_1{
display: none;
}
#weiterer_kredit_2{
  display: none;  
}
#weiterer_kredit_3{
  display: none;
}
#weiterer_kredit_4{
  display: none;
}




.accordion-box{
  position: relative;
  margin:10px auto;
  width: auto;
  width: 90%;
  max-width: 500px;
  border:1px solid rgb(224, 224, 224);
}

.accordion {
  background-color: #f5b7b7a1;
  border:1px solid #ac0909;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 17px;
  font-family: "Inter";
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #f18a8aa1; 
}

.accordion:after {
  content: '\002B';
  color: #f18a8aa1;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}


.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  font-family: "Inter";
  line-height: 1.3;
  transition: max-height 0.2s ease-out;
}


#weiterer_job_1{
  display: none;
  }
  #weiterer_job_2{
    display: none;  
  }



.bottom-menu{
    position: relative;
    width: auto;
    width: 100%;

    margin-top:30px;
    margin-left: auto;
    margin-right: auto;
}

.bottom-menu-h{
    position: relative;
    font-family: "Inter";
    color:#000;
    font-size: 20px;
}
.bottom-menu-h2{
    position: relative;
    font-family: "Inter";
    color:#000;
    font-size: 24px;
}