/* @RETRUN JUST CALCULATED VALUES! */
body,
html {
  background-color: #f8f2ea;
  font-family: sans-serif; }

.easycalculatorouter {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #e6dcc9;
  border-radius: 20px;
  overflow: hidden; }

.easymetalcalculator {
  display: inline; }

.easymetalcalculatorheader {
  background-color: #221d16;
  color: #fff;
  padding: 10px 20px; }

.easymetalcalculatorcontent {
  padding: 15px 25px; }

.easymetalcalculatormetalbuttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 10px 0;
  gap: 10px;
  /* background-color: $color-light; */ }
  .easymetalcalculatormetalbuttons .mainmetal {
    width: 100%;
    background-color: #fbf8f3;
    border: 1px solid #e6dcc9;
    border-radius: 5px;
    padding: 8px 80px;
    color: #b47e58; }
    .easymetalcalculatormetalbuttons .mainmetal.active {
      background-color: #b47e58;
      border: 1px solid #b47e58;
      color: #fff; }
    .easymetalcalculatormetalbuttons .mainmetal:hover {
      background-color: #b47e58;
      border: 1px solid #b47e58;
      color: #fff; }
  .easymetalcalculatormetalbuttons > * {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }

.selectfieldwrapper,
.easymetallegierungen {
  background-color: #f3ecdf;
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 10px; }
  .selectfieldwrapper select,
  .easymetallegierungen select {
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
    background-color: #fff;
    border: 0;
    width: 100%;
    border-radius: 4px;
    padding: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer; }
  .selectfieldwrapper.dark,
  .easymetallegierungen.dark {
    background-color: #f5ebd8; }

.easymetalcalcresultinner .small,
.easymetalweight .small {
  font-size: .7em;
  text-transform: uppercase;
  display: block; }

.easymetalweight .easymetalweightwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column; }
  .easymetalweight .easymetalweightwrapper .easymetalweightinner {
    background-color: #fbf8f3;
    border: 1px solid #e6dcc9;
    border-radius: 4px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .easymetalweight .easymetalweightwrapper .easymetalweightinner input[type='text'] {
      background: transparent;
      border: 0;
      padding: 15px;
      width: 100%; }

.easymetalcalformsubmit input[type='submit'] {
  width: 100%;
  background-color: #b47e58;
  border: 1px solid #b47e58;
  color: #fff;
  border-radius: 5px;
  padding: 20px 80px;
  text-transform: uppercase; }

.easymetalcalcresultouter {
  margin-top: 10px; }

.easymetalcalcresultinner {
  background-color: #f8efe0;
  padding: 20px;
  border-radius: 5px; }

.easymetalcalcresultresult {
  padding-top: 20px;
  font-family: "Playfair Display", Sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2em; }

.easymetalcalcresultouter {
  display: none; }

.easymetalcalculatorheaderlist {
  padding: 0 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px; }

.easymetalcalculatorheaderlist li {
  padding-right: 20px; }

.easymetalcalculatorheaderlist li.gold::marker {
  color: gold; }

.easymetalcalculatorheaderlist li.silber::marker {
  color: silver; }

.easymetalcalculatorheaderlist .metal {
  color: #a4a29f; }

.easymetalcalculatorheaderlist .pricevalue {
  font-family: "Playfair Display", Sans-serif;
  font-size: 1.4em;
  font-weight: 600; }

.uvp {
  font-size: .8em;
  color: #8a857d;
  display: block;
  margin-top: 10px;
  line-height: 1.4em; }