/* .gf-progress{
  display:flex;
  justify-content:center;
  gap:24px;
  margin:0 0 28px;
} */

.gf-progress{
  display:flex;
  justify-content:space-between; /* Maximaler Abstand */
  align-items:flex-start;
  margin:0 0 40px;
}

#gf_progressbar_wrapper_1 {
  visibility: hidden;
  margin-bottom: 0;
}

.gf-step{
  flex:1 1 0;
  min-width:0;                   /* sorgt für responsive Umbruch   */
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;             /* Basis für die Linie (::after)  */
  box-sizing:border-box;
}

.gf-step img {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 6px;
  /*padding: 12px;*/
  background-color: #EEEAE8;
  border-radius: 80px;
  filter: grayscale(100);
}

/* Grundlinie (hell) */
.gf-step::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(64%);
  width: calc(100% - 70px);
  height: 4px;
  background: #EEEAE8;
  z-index: -1;
}

/* letzte Box braucht keine Linie  */
.gf-step:last-child::after{ display:none; }

/* ------------- Zustände färben ---------------------------------- */

/* erledigt  (= .done) */
.gf-step.done .gf-icon{ background:#50DA7D; }
.gf-step.done::after{ background:#50DA7D; }
.gf-step.done .gf-step__text{ color:#0d3331; opacity:.9; }

/* aktiv (= .active) */
.gf-step.active .gf-icon{ background:#27c373; }
.gf-step.active .gf-step__text{ color:#0d3331; font-weight:600; }

/* noch offen (= .todo) */
.gf-step.todo  .gf-icon{ background:#eee;  }
.gf-step.todo  .gf-step__text{ color:#adb3b7; opacity:.6; }

/* aktuelle Seite */
.gf-step.active{
  opacity:1;
  font-weight:600;
}

.gf-step.active img {
  background-color: #50DA7D;
  filter: grayscale(0);
}

/* erledigte Schritte */
.gf-step.done{
  opacity: 1;
}
.gf-step.done img{
  filter:none;
  opacity: 1;
  background-color: #50DA7D;
}

/* Grundzustand */
.gf-step__text{
  display:block;          /* Zeilenumbruch unter dem Icon */
  font-size: 18px;
  line-height: 28px;
  color: #003838;
  opacity:.35;            /* wie Icon ausgegraut */
  transition:.2s;
  text-align:center;
  white-space:normal;            /* Zeilenumbruch erlauben          */
  word-break:break-word;
}

/* erledigte Schritte & active */
.gf-step.done .gf-step__text, .gf-step.active .gf-step__text{
  opacity:1;
  font-weight:600;
}


/* Formularanpassungen */
#gform_wrapper_1 {
  max-width: 640px;
  margin: 48px auto;
}

.gform-theme--framework .gf_progressbar_title {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #003838 !important;
  margin-bottom: 8px;
}

.gf_progressbar.gf_progressbar_custom {
  height: 32px;
  background-color: #EEEAE8;
}

.gf_progressbar_percentage {
  background-color: #50DA7D !important;
  height: 32px;
  block-size: 32px !important;
}


.gf-page-heading {
  font-size: 22px;
  line-height: 32px;
  color: #002E2D;
  text-align: center;
  font-weight: 600;
  margin-bottom: 0;
}

.gfield_label.gform-field-label,
.address-recommendation-section label {
  font-size: 16px !important;
  line-height: 26px !important;
  color: #003838 !important;
  margin-bottom: 6px;
  font-weight: 600 !important;
  padding-top: 40px;
}

#field_1_15 label, #field_1_16 label, #field_1_17 .gfield_label.gform-field-label, #field_1_36 label, #field_1_38 label, #field_1_29 .gfield_label.gform-field-label, #field_1_36 label, #field_1_41 .gfield_label.gform-field-label {
    padding-top: 0;
}

.ginput_container.ginput_container_text .pac-target-input,
.ginput_complex.ginput_container input,
.address-recommendation-section select.success-multiple,
.ginput_container.ginput_container_text input,
.ginput_container input.large, .gform-theme--foundation .gfield select.large {
  border-radius: 8px;
  border-color: #C8BEB9;
  background-color: #FCFBFA;
  padding: 16px;
  height: 64px;
  font-size: 18px;
  line-height: 28px;
  color: #002E2D;
  font-weight: 400;
}

.ginput_container.ginput_container_text input, .ginput_container input.large {
  margin-bottom: 40px;
}

.ginput_container.ginput_container_text .pac-target-input:focus,
#checkAddress:focus,
.ginput_complex.ginput_container input:focus,
.gform_next_button:focus, .ginput_container.ginput_container_text input:focus,
.ginput_container input.large:focus, .gfield_checkbox input.gfield-choice-input:focus,
.ginput_container.ginput_container_consent input:focus, #gform_submit_button_1:focus,
.gform-theme--foundation .gfield select.large:focus, .gform_previous_button:focus {
  /* border-color: #668888; */
  outline-color: #668888 !important;
}

.gform_next_button:focus, #update-consumption:focus,
.ginput_container.ginput_container_text input.small:focus, button#btn-fix,
.gform-theme--foundation .gfield select.large:focus, .gform_previous_button:focus {
  --gf-local-outline-color: #668888 !important;
}

.ginput_container.ginput_container_text .pac-target-input::placeholder,
.ginput_complex.ginput_container input::placeholder {
  color: #567878;
}


.gform-theme.gform-theme--framework.gform_wrapper .custom-button,
.gform_next_button, .gform_previous_button, button#btn-fix, #gform_submit_button_1 {
  padding: 16px 32px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  margin-bottom: 16px;
  display: inline-block;
  font-weight: 600 !important;
  color: #002E2D !important;
  font-size: 22px !important;
  line-height: 30px !important;
  margin-top: 64px;
  border: 1px solid #D3C606 !important;
  text-align: center !important;
  background: linear-gradient(277deg, #FFEB00 8.33%, #FFF9B2 78.8%) !important;
  box-shadow: 0 4px 20px 4px rgba(255, 235, 0, 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease-in-out !important;
  background-size: 200% 100% !important;
  background-position: 15% 50% !important;
  height: 64px !important;
}

.gform-theme.gform-theme--framework.gform_wrapper .custom-button:hover,
.gform_next_button:hover, button#btn-fix:hover, #gform_submit_button_1:hover {
  background: linear-gradient(86deg, #FFEB00 8.33%, #FFF9B2 78.8%) !important;
  background-size: 200% 100% !important;
  background-position: 15% 50% !important;
  box-shadow: 0 2px 12px -2px rgba(211, 198, 6, 0.60) !important;
  color: #000;
}

.gform_previous_button {
  background: #FCFBFA !important;
  border-color: #668888 !important;
  box-shadow: unset !important;
}

.gform_previous_button:hover {
  background: #E5EAEA !important;
}

.gform-theme--framework .gfield_description {
  font-size: 16px;
  line-height: 26px;
  color: #003838;
  font-weight: 400;
  margin: 0px auto 0px!important;
}

.gfield .loading {
  font-size: 18px;
  line-height: 28px;
  color: #003838;
  font-weight: 400;
}

.gform-theme--foundation .gfield--width-half {
   /* grid-column: 1/ 1; */
  /* min-inline-size: max-content;  */
}

.gform-theme--foundation .ginput_complex label.gform-field-label,
.address-recommendation-section label,
.fetchingData .address-recommendation-section .success-multiple, .gform_fields .fetchingData {
  color: #003838;
  font-family: 'macan';
}

.gform_fields .fetchingData, #checkAddress {
  margin-top: 40px;
}

.order-summary .os-container {
  display: block;
}

.gform_fields .fetchingData .success {
  border: 3px solid #50DA7D;
  padding: 27px;
  border-radius: 12px;
}

.gform-theme--foundation .gform_fields {
  display: block;
}

.user-instruction p {
  text-align: left;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  font-family: 'macan' !important;
  color: #003838;
  margin: 60px auto 8px;
}

.gform-page-footer.gform_page_footer.top_label {
  width: 100%;
  display: inline-grid;
  grid-template-columns: 49% 49%;
  gap: 10px;
}
/*
@media (min-width: 640px) {
  .gform-theme--foundation .gfield--width-half {
    grid-column: 1/-1;
    min-inline-size: 0;
  }
}*/

.introduction-text p {
  color: #003838;
}

.number {
  fill: #D5D7DA;
  font-family: 'macan';
  font-size: 56px;
  letter-spacing: -2%;
  line-height: 60px;
  font-weight: 600;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid #668888;
}

.number.selected {
  fill: #000 !important;
  stroke: unset !important;
  background-color: #50DA7D !important;
}

.num-svg {
  /* width: 118px; */
  height: 96px;
  text-anchor: middle;
  dominant-baseline: mathematical;
}

.animation-container{
  display:inline-block;          /* Border sichtbar machen   */
  border:1px solid #668888;
  border-radius:12px;
  padding:6px 10px;              /* etwas Innenabstand       */
}

.animation-container .number{    /* Zahl grau                */
  fill:#d5d7da;
  font-family:macan,sans-serif;
  font-weight:600;
}

.animation-container:has(.number.selected){
  background:#50da7d;
}
.animation-container:has(.number.selected) .number{
  fill:#000;
}

.icon-number-inner {
  display: inline-grid;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 12px;
  grid-template-columns: 19% 19% 19% 19% 19%;
  max-width: 620px;
}

.gfield .introduction-text h2 {
  margin-top: 60px;
  font-size: 22px;
  line-height: 32px;
  color: #002E2D;
}

.tariffs-container {
  display: block;
  margin: auto;
  position: relative;
}

.fix.tariffs-grid-element {
  border: 1px solid #688;
  padding: 40px 32px;
  max-width: 384px;
  border-radius: 24px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.tariffs-container .fix h2 {
  font-size: 22px;
  font-weight: 600;
  font-family: 'macan';
  margin-bottom: 16px;
  line-height: 32px;
  color: #002E2D;
}

.tariffs-section .price {
  text-align: center;
  color: #002e2d;
  margin-bottom: 32px;
}

.fill-in-price-assumption {
  font-family: 'macan';
  font-size: 42px;
  line-height: 52px;
  color: #002E2D;
  font-weight: 600;
}

.tariffs-section .price span {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.tariffs-benefits {
  padding: 0px 0px !important;
  list-style-position: outside !important;
  margin: 0;
}

.tariffs-benefits li {
  color: #002E2D;
  font-weight: 600;
  font-family: 'macan';
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 20px;
}

.button-tariff #btn-fix {
  width: 100%;
  margin-top: 0;
}

.tariffs-pricing {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 1fr;
  color: #002E2D;
  font-size: 18px;
  line-height: 26px;
  font-family: 'macan';
  font-weight: 400;
}

.tariffs-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tariffs-benefits > li{
  position: relative;
  padding-left: 36px;              /* 24 px Icon + 12 px Abstand   */
  margin-bottom: 20px;
}

.tariffs-benefits > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                        /* vertikal mittig …            */
  transform: translateY(-50%);     /* … durch 50 % / -50 % Trick   */
  width: 24px;
  height: 24px;
  background: url("../img/check_purple.svg") center / contain no-repeat;
  /* verhindert Schrumpfen, wenn Text zu lang wird */
  flex-shrink: 0;
}

.cust-gf-spinner.ls-is-cached.lazyloaded {
  height: 20px;
  margin-top: 62px;
  margin-left: 20px;
}

/*
#input_1_14.gform-grid-row > .gform-grid-col{
  flex: 1 1 0%;
  max-width: 100%;
  padding-inline: 0;
}

#input_1_14.gform-grid-row{
  column-gap: 12px;
} */

.gfield_checkbox input.gfield-choice-input, .ginput_container.ginput_container_consent input {
  --gf-local-border-color: #C8BEB9 !important;
  border-radius: 6px;
  height: 24px;
  width: 24px;
}

.gchoice .gform-field-label {
  font-size: 18px;
  font-weight: 400;
  color: #002E2D;
}

#gfield_description_1_62 {
  margin: 8px auto 40px !important;
}

#input_1_62 {
  margin-bottom: 8px;
}

.gfield_description.validation_message.gfield_validation_message {
  color: #D92D20;
  font-size: 16px;
  line-height: 26px;
}

.gform-field-label.gform-field-label--type-inline.gfield_consent_label {
  color: #002E2D;
  font-size: 16px;
  margin-bottom: 16px;
}

#gform_submit_button_1 {
  margin-top: 0 !important;
  font-size: 18px !important;
}

#gform_confirmation_message_1 {
  font-size: 22px;
  line-height: 32px;
  color: #002e2d;
  text-align: center;
  margin: 60px auto;
}

#gform_page_1_2 .gform-page-footer.gform_page_footer.top_label {
  display: none;
}

img.meter {
  width: 100%;
}

#validation_message_1_15, #validation_message_1_16, #validation_message_1_62,
#validation_message_1_36, #validation_message_1_37, #validation_message_1_38 {
  margin-top: -40px !important;
  display: block;
  position: relative;
  margin-bottom: 40px !important;
}

#field_1_53 {
  padding-top: 24px;
}

@media (max-width: 999px) {
  .gf-progress {
    display: none;
  }

  #gf_progressbar_wrapper_1 {
    visibility: visible;
    margin-bottom: 60px;
  }
}


@media (max-width: 1250px) {
  .gf-step::after {
    left: calc(88px);
    width: calc(100%);
  }
}