/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/static/Einsparrechner/style.css ***!
  \************************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

[name='Einsparrechner'] {
  margin-block-start: 40px;
}

[name='Einsparrechner'] .einsparrechner {
    padding: 24px;
  }

[name='Einsparrechner'] .intro-text {
    margin-block-end: 16px;
  }

:is([name='Einsparrechner'] .intro-text) h1,:is([name='Einsparrechner'] .intro-text) h2,:is([name='Einsparrechner'] .intro-text) h3,:is([name='Einsparrechner'] .intro-text) h4,:is([name='Einsparrechner'] .intro-text) h5,:is([name='Einsparrechner'] .intro-text) h6 {
      margin-block: 0 8px;
      font-size: 24px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: normal;
    }

:is([name='Einsparrechner'] .intro-text) p {
      line-height: normal;
    }

:is(:is([name='Einsparrechner'] .intro-text) p):last-child {
        margin-block-end: 0;
      }

[name='Einsparrechner'] input,[name='Einsparrechner'] select {
    margin-block-end: 0;
  }

:is([name='Einsparrechner'] .calculator-form) .form-fields {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: end;
    }

:is([name='Einsparrechner'] .calculator-form) .field {
      display: flex;
      flex-direction: column;
      flex: 1 1 220px;
    }

.tonnen:is(:is([name='Einsparrechner'] .calculator-form) .field) {
        flex: 0 0 150px;
      }

:is(:is([name='Einsparrechner'] .calculator-form) .field) label {
        font-size: 12px;
        color: var(--clr-grey-dark-muted);
        margin-block-end: 4px;
      }

:is(:is([name='Einsparrechner'] .calculator-form) .field) select,:is(:is([name='Einsparrechner'] .calculator-form) .field) input[type='number'] {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--clr-grey-200, #e5e5e5);
        font-size: 16px;
        line-height: 1.5;
      }

:is([name='Einsparrechner'] .calculator-form) .field--button {
      flex: 0 0 auto;
    }

[name='Einsparrechner'] .result {
    margin-block: 24px;
  }

:is([name='Einsparrechner'] .result) .result-text {
      font-size: 16px;
      font-weight: 500;
      margin: 0;
      color: var(--clr-grey-dark);
      line-height: normal;
    }

:is([name='Einsparrechner'] .outro) p {
      color: var(--clr-grey-dark-muted);
      font-size: 12px;
      margin-block: 24px;
      line-height: normal;
    }

:is([name='Einsparrechner'] .outro):first-child {
      margin-block-start: 0;
    }

:is([name='Einsparrechner'] .outro):last-child p {
        margin-block-end: 0;
      }


/*# sourceMappingURL=style.min.css.map*/