/* Final presentation layer for the Mr-Money PHP include. Keep this last. */
.calculator-page {
  --calc-font-xs: clamp(.75rem, .72rem + .1vw, .81rem);
  --calc-font-sm: clamp(.8rem, .77rem + .12vw, .87rem);
  --calc-font-base: clamp(.86rem, .82rem + .15vw, .92rem);
  --calc-control-font: clamp(.76rem, .73rem + .1vw, .82rem);
  --calc-control-height: clamp(2.2rem, 2.12rem + .3vw, 2.43rem);
  --calc-frame-pad: clamp(.58rem, .4rem + .65vw, .9rem);
}
.calculator-main { padding-top: clamp(.9rem, 1.5vw, 1.35rem); }
.calculator-page .calculator-title-row { margin-bottom: .65rem; }
.calculator-page .calculator-title-row h1 {
  max-width: 100%; font-size: clamp(1.32rem, 1.22rem + .45vw, 1.6rem);
  line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: auto;
}
.calculator-page .calculator-notice { margin-bottom: .65rem; padding: .5rem .65rem; }
.calculator-page .calculator-notice,
.calculator-page .calculator-notice p { font-size: var(--calc-font-xs) !important; }
.calculator-page .calculator-title-row .text-link {
  display: inline-flex; align-items: baseline; width: max-content; max-width: 100%;
  color: var(--blue); font-size: var(--action-link-font) !important;
  font-weight: 800; text-decoration: underline;
  text-decoration-thickness: .07em; text-underline-offset: .18em;
}
.calculator-page .calculator-title-row .text-link::after {
  content: none !important; display: none !important;
}
.calculator-page .calculator-frame { padding: var(--calc-frame-pad); }
.calculator-page .calculator-frame #vvergleich .eingabeBox .line .cell,
.calculator-page .calculator-frame #vvergleich .eingabeBox .line label,
.calculator-page .calculator-frame #vvergleich p,
.calculator-page .calculator-frame #vvergleich li { font-size: var(--calc-font-base) !important; line-height: 1.35 !important; }
.calculator-page .calculator-frame #vvergleich input.form-text,
.calculator-page .calculator-frame #vvergleich select.form-select,
.calculator-page .calculator-frame #vvergleich textarea { min-height: var(--calc-control-height) !important; font-size: var(--calc-font-sm) !important; }
.calculator-page .calculator-frame #vvergleich input.form-button,
.calculator-page .calculator-frame #vvergleich input[type="submit"],
.calculator-page .calculator-frame #vvergleich .vergleichbutton { min-height: var(--calc-control-height) !important; font-size: var(--calc-control-font) !important; padding: .34rem .7rem !important; }

/* The calculator name is already the page heading. Vendor banners repeat it
   with a different colour and typeface, so remove only that duplicate row. */
.calculator-page .calculator-frame #vvergleich .eingabeBox > .line.header_line {
  display: none !important;
}

/* All form variants use the same compact help affordance. The vendor's
   background sprite can collapse to a three-pixel strip in the mobile grid. */
.calculator-page .calculator-frame #vvergleich .eingabeBox .line .cell.sp3 {
  min-width: 1rem !important;
  margin-bottom: 0 !important;
}
.calculator-page .calculator-frame #vvergleich .eingabeBox a.infoicon {
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: .9rem !important;
  min-width: .9rem !important;
  height: .9rem !important;
  margin: 0 !important;
  border: 1px solid var(--blue) !important;
  border-radius: 50% !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.calculator-page .calculator-frame #vvergleich .eingabeBox a.infoicon::after {
  content: 'i';
  color: var(--blue);
  font-family: var(--calculator-font-body);
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
}
.calculator-page .calculator-frame #vvergleich .eingabeBox a.infoicon:hover,
.calculator-page .calculator-frame #vvergleich .eingabeBox a.infoicon:focus-visible {
  border-color: var(--navy) !important;
  background: var(--ice) !important;
}

.calculator-empty-results-page .calculator-frame #vvergleich > p {
  margin: 0 0 .8rem !important;
}
.calculator-empty-results-page .calculator-frame #vvergleich p.error {
  margin: .5rem 0 .7rem !important;
  padding: .65rem .75rem !important;
  border: 1px solid var(--line) !important;
  border-left: .2rem solid var(--blue) !important;
  border-radius: .25rem !important;
  background: #f9fbfc !important;
  color: var(--ink) !important;
  font-family: var(--calculator-font-body) !important;
  font-size: var(--calc-font-base) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.calculator-empty-results-page .calculator-frame #vvergleich #calc-empty-consultation {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 0 .8rem !important;
  box-shadow: none !important;
}
.calculator-empty-results-page .calculator-frame #vvergleich form > div[style*="height: 150px"] {
  display: none !important;
}
body.calculator-results-page .calculator-frame #vvergleich .resultFilter .slide_filterbox.calc-filter-empty {
  display: none !important;
}

/* The vendor toggles conditional questions with inline display:none. Older
   responsive grid rules must never re-expose those questions. */
.calculator-page .calculator-frame #vvergleich .eingabeBox .line[style*="display: none"],
.calculator-page .calculator-frame #vvergleich .eingabeBox .line[style*="display:none"] {
  display: none !important;
}

.calculator-results-page .calculator-main { width: min(70rem, calc(100% - clamp(.8rem, 2vw, 1.6rem))); }
.calculator-results-page .calculator-frame #vvergleich { max-width: none !important; }

body.calculator-results-page .calculator-frame #vvergleich {
  --result-ui-font: clamp(.69rem, .65rem + .15vw, .76rem);
  --result-ui-control-height: 1.7rem;
  --result-ui-radius: .26rem;
  font-family: var(--calculator-font-body) !important;
  font-size: var(--result-ui-font) !important;
  p, li { font-size: var(--result-ui-font) !important; }
  > p {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    gap: .4rem !important; margin: 0 0 .55rem !important;
    input.btn-neuervgl, a.btn_sendtoemail_default {
      display: inline-flex !important; flex: 0 0 auto !important;
      align-items: center !important; justify-content: center !important;
      box-sizing: border-box !important;
      height: var(--result-ui-control-height) !important;
      min-height: var(--result-ui-control-height) !important; margin: 0 !important;
      padding: .22rem .5rem !important; border-radius: var(--result-ui-radius) !important;
      font-family: inherit !important; font-size: var(--result-ui-font) !important;
      line-height: 1.15 !important; white-space: nowrap !important;
      box-shadow: none !important;
    }
  }
  .vergleichbutton-box.abstand, a.btn_sendtoemail_mobile { display: none !important; }
  .resultFilter_out {
    margin: 0 0 .45rem !important; padding: .32rem .45rem .35rem !important;
    border: 1px solid var(--line) !important; border-radius: .35rem !important;
    background: #f9fbfc !important; box-shadow: none !important;
  }
  .resultFilter_legend {
    margin: 0 0 .5rem !important; padding: 0 !important; border: 0 !important; background: none !important;
    a {
      display: block !important; padding: 0 !important; background-image: none !important;
      color: var(--ink) !important; font-family: inherit !important;
      font-size: var(--result-ui-font) !important; font-weight: 800 !important;
      line-height: 1.15 !important; text-decoration: none !important;
      cursor: default !important; pointer-events: none !important;
      &::before, &::after { display: none !important; }
    }
  }
  .resultFilter {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .38rem .5rem !important; width: 100% !important; padding: 0 !important;
    margin: 0 !important; background: transparent !important;
    .slide_filterbox {
      display: grid !important; grid-template-rows: auto auto !important; align-content: start !important;
      gap: .22rem !important; min-width: 0 !important; width: 100% !important;
      height: auto !important; min-height: 0 !important; margin: 0 !important;
      padding: 0 !important; border: 0 !important; background: transparent !important;
    }
    .leftside {
      display: flex !important; flex-wrap: wrap !important; align-items: center !important;
      gap: .04rem .12rem !important; min-width: 0 !important; width: 100% !important;
      height: auto !important; margin: 0 !important; padding: 0 !important;
      color: var(--ink) !important; font-family: inherit !important;
      font-size: var(--result-ui-font) !important; line-height: 1.15 !important;
      strong, span { font-size: inherit !important; line-height: inherit !important; }
    }
    .filter-value-with-help {
      display: inline-flex !important; align-items: baseline !important;
      gap: .08rem !important; max-width: 100% !important; white-space: nowrap !important;
    }
    .inline-help-sup { display: inline-flex !important; position: relative !important; top: -.85em !important; line-height: 1 !important; }
    .infoicon {
      display: inline-grid !important; place-items: center !important;
      width: .53rem !important; height: .53rem !important;
      margin: 0 .08rem 0 0 !important; padding: 0 !important;
      box-sizing: border-box !important; flex: 0 0 .53rem !important;
      border: 1px solid var(--blue) !important; border-radius: 50% !important;
      background: none !important; text-decoration: none !important;
      &::after { content: 'i'; color: var(--blue); font-size: .36rem; font-weight: 800; line-height: 1; }
    }
    .filter-value-with-help .infoicon { margin: 0 !important; }
    .ui-slider {
      width: calc(100% - .7rem) !important; height: .2rem !important;
      margin: .12rem .35rem .3rem !important; padding: 0 !important;
      justify-self: center !important; background: var(--ice) !important;
    }
    .ui-slider-handle {
      top: -.18rem !important; width: .6rem !important; height: .6rem !important;
      margin: 0 0 0 -.3rem !important; border: 1px solid var(--blue) !important;
      border-radius: 50% !important; background: #fff !important;
      box-shadow: 0 1px 3px rgba(24, 37, 64, .14) !important;
    }
    .gefunden {
      grid-column: 1 / -1 !important; margin: 0 !important;
      padding: .16rem 0 0 !important; border-top: 1px solid var(--line) !important;
      color: var(--ink) !important; font-family: inherit !important;
      font-size: var(--result-ui-font) !important; line-height: 1.15 !important;
      text-align: right !important;
    }
  }
  .resultFilter > .sortierung { display: none !important; }
  .searchQueryBox {
    display: flex !important; align-items: center !important; gap: .35rem !important;
    width: 100% !important; max-width: 100% !important; margin: 0 0 .55rem !important;
  }
  .searchQueryBoxLabel { display: none !important; }
  #searchQuery {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important;
    min-height: var(--result-ui-control-height) !important; height: var(--result-ui-control-height) !important;
    padding: .22rem .5rem !important; border-radius: var(--result-ui-radius) !important;
    font-family: inherit !important; font-size: var(--result-ui-font) !important;
  }
  #searchQuery::placeholder { color: #526075 !important; opacity: 1 !important; }
  #btnSearchQueryStart, #btnSearchQueryReset {
    flex: 0 0 auto !important; min-width: 3.7rem !important; width: auto !important;
    min-height: var(--result-ui-control-height) !important; height: var(--result-ui-control-height) !important;
    margin: 0 !important; padding: .22rem .5rem !important; border-radius: var(--result-ui-radius) !important;
    font-family: inherit !important; font-size: var(--result-ui-font) !important; box-shadow: none !important;
  }
  #vergleichbuttonOben, .btn-leivgl-unten, .vergleichen-button-box { display: none !important; }

  #ergebnisBox-out > .calc-results-heading {
    color: var(--ink) !important;
    font-family: var(--calculator-font-heading) !important;
    font-size: clamp(.86rem, .82rem + .1vw, .92rem) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
  }
  #ergebnisBox-out > .tipp-box-and-info,
  #ergebnisBox-out > .ergebnisBox.tipp .tipp_header { display: none !important; }
  #ergebnisBox-out > .ergebnisBox.tipp {
    padding: 0 !important; border: 0 !important;
    background-color: #fff !important; background-image: none !important;
  }
  #ergebnisBox-out > .calc-results-heading {
    display: block !important;
    margin: .9rem 0 .45rem !important;
    padding: 0 !important;
  }
  #ergebnisBox-out > .calc-results-heading + .sortOrder:not(:has(+ .calc-sort-control)) {
    margin-top: .35rem !important;
  }
  #ergebnisBox-out > .calc-results-heading + .sortOrder + .calc-sort-control {
    margin-top: .35rem !important;
  }

  .sortInfo {
    color: var(--ink) !important; font-family: var(--calculator-font-body) !important;
    font-size: var(--result-ui-font) !important; font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  #ergebnisBox-out > .sortOrder {
    display: none !important;
  }
  #ergebnisBox-out > .sortOrder:not(:has(+ .calc-sort-control)) {
    display: block !important;
    margin: 1.5rem 0 .65rem !important;
    color: var(--ink) !important;
    font-family: inherit !important;
    font-size: var(--result-ui-font) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  #ergebnisBox-out > .sortOrder:not(:has(+ .calc-sort-control))::before,
  #ergebnisBox-out > .sortOrder:not(:has(+ .calc-sort-control))::after {
    content: none !important;
  }
  #ergebnisBox-out > .calc-sort-control {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: .3rem .5rem !important; width: 100% !important; margin: 1.5rem 0 .65rem !important;
    font-family: inherit; font-size: var(--result-ui-font); scroll-margin-top: 5rem;
  }
  .calc-sort-control .calc-sort-label {
    display: inline-flex !important; flex-wrap: wrap !important; align-items: baseline !important;
    gap: .08rem .18rem !important; color: var(--ink) !important; font-family: inherit !important;
    font-size: var(--result-ui-font) !important; font-weight: 800 !important; line-height: 1.2 !important;
  }
  .calc-sort-control .calc-sort-label strong {
    font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important;
  }
  .calc-sort-control .inline-help-sup {
    display: inline-flex !important; position: relative !important; top: -.85em !important; line-height: 1 !important;
  }
  .calc-sort-control .infoicon {
    display: inline-grid !important; place-items: center !important;
    width: .53rem !important; height: .53rem !important; margin: 0 !important;
    padding: 0 !important; border: 1px solid var(--blue) !important; border-radius: 50% !important;
    background: none !important; text-decoration: none !important;
    &::after { content: 'i'; color: var(--blue); font-size: .36rem; font-weight: 800; line-height: 1; }
  }
  .calc-sort-control .calc-sort-select {
    flex: 0 1 auto !important; width: auto !important; min-width: 10.5rem !important;
    max-width: 100% !important; height: var(--result-ui-control-height) !important;
    margin: 0 !important; padding: .15rem .45rem !important;
    border: 1px solid var(--line) !important; border-radius: var(--result-ui-radius) !important;
    background: #fff !important; color: var(--ink) !important;
    font-family: inherit !important; font-size: var(--result-ui-font) !important;
    font-weight: 600 !important; line-height: 1.2 !important;
    box-shadow: none !important; cursor: pointer;
  }
  .calc-sort-control .calc-sort-select:hover { border-color: var(--blue) !important; }
  .calc-sort-control .calc-sort-select:focus-visible { outline: 2px solid var(--blue); outline-offset: .15rem; }
  .calc-sort-control .calc-sort-select:disabled { opacity: .55; cursor: default; }
  #ergebnisBox-out > .ergebnisBox[data-calc-page-hidden="true"] { display: none !important; }
  #ergebnisBox-out > .calc-pagination-footer {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: .4rem .65rem; margin: .9rem 0 .35rem;
    color: var(--ink); font-family: inherit; font-size: var(--result-ui-font); line-height: 1.25;
  }
  .calc-pagination-footer .calc-results-range { justify-self: start; color: #526075; }
  .calc-pagination-footer label {
    display: inline-flex; align-items: center; justify-self: end;
    gap: .35rem; white-space: nowrap;
  }
  .calc-pagination-footer select {
    min-width: 3.35rem; height: var(--result-ui-control-height);
    padding: .1rem .4rem; border: 1px solid var(--line); border-radius: var(--result-ui-radius);
    background: #fff; color: var(--ink); font-family: inherit; font-size: inherit;
    cursor: pointer;
  }
  .calc-pagination-footer .calc-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    justify-self: center; gap: .16rem;
    font-family: inherit; font-size: var(--result-ui-font);
  }
  .calc-pagination-footer .calc-pagination[hidden] { display: none !important; }
  .calc-pagination button {
    display: inline-grid; place-items: center;
    min-width: 1.45rem; height: 1.45rem; padding: 0 .22rem;
    border: 1px solid var(--line); border-radius: var(--result-ui-radius);
    background: #fff; color: var(--navy); font-family: inherit;
    font-size: inherit; font-weight: 650; line-height: 1; cursor: pointer;
  }
  .calc-pagination button:hover:not(:disabled),
  .calc-pagination button:focus-visible { border-color: var(--blue); background: var(--ice); }
  .calc-pagination button[aria-current="page"] {
    border-color: var(--blue); background: var(--blue); color: #fff; cursor: default;
  }
  .calc-pagination button:disabled { opacity: .4; cursor: default; }
  .calc-pagination .calc-page-gap { padding: 0 .1rem; color: #526075; }
  .prozent_info {
    color: #526075 !important; font-family: var(--calculator-font-body) !important;
    font-size: var(--result-ui-font) !important; line-height: 1.4 !important;
  }
  #dialog-box, #dialog-box #dialog-message, #dialog-box .buttons,
  .BubbleStyle {
    font-family: var(--calculator-font-body) !important;
    font-size: var(--result-ui-font) !important;
  }
  #dialog-box #dialog-message > strong:first-child,
  #dialog-box .caption2, #dialog-box .caption2 label,
  #dialog-box a.button.ecke { font-size: var(--result-ui-font) !important; }
  #dialog-box #email_angebot, #dialog-box #lnk_email_angebot_zusenden {
    min-height: var(--result-ui-control-height) !important;
    height: var(--result-ui-control-height) !important;
    padding: .22rem .5rem !important; border-radius: var(--result-ui-radius) !important;
    font-family: var(--calculator-font-body) !important;
    font-size: var(--result-ui-font) !important;
  }
  #dialog-box a.button.ecke {
    width: var(--result-ui-control-height) !important;
    min-width: var(--result-ui-control-height) !important;
    height: var(--result-ui-control-height) !important;
    min-height: var(--result-ui-control-height) !important;
  }
  #dialog-box #email_angebot_ok:empty,
  #dialog-box .buttons:empty { display: none !important; }

  .ergebnisBox {
    --result-font-label: clamp(.66rem, .63rem + .13vw, .72rem);
    --result-font-value: clamp(.69rem, .65rem + .15vw, .76rem);
    --result-font-detail: clamp(.67rem, .63rem + .13vw, .73rem);
    --result-font-price: clamp(.78rem, .74rem + .14vw, .84rem);
    margin: 0 0 .38rem !important; max-width: 100% !important;
    .tipp_header {
      padding: .12rem .6rem !important; background: #eaf2f6 !important;
      a, .tipp-header-caption { font-size: var(--result-ui-font) !important; font-weight: 650 !important; line-height: 1.1 !important; }
    }
    .line .innerbox {
      display: grid !important;
      grid-template-columns: clamp(5.5rem, 10vw, 8rem) max-content max-content max-content clamp(4.2rem, 9vw, 7rem) !important;
      grid-template-rows: auto auto !important;
      column-gap: .5rem !important; row-gap: .32rem !important;
      justify-content: space-between !important;
      align-items: center !important; min-width: 0 !important; width: 100% !important;
      min-height: 0 !important; padding: .52rem .65rem !important;
      > .cell {
        position: static !important; float: none !important; min-width: 0 !important;
        min-height: 0 !important; width: 100% !important; max-width: 100% !important;
        height: auto !important; padding: 0 !important; margin: 0 !important;
        border: 0 !important; overflow: visible !important;
      }
      > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; }
      > .cell.sp2 { grid-column: 2 !important; grid-row: 1 / 3 !important; width: 100% !important; max-width: none !important; }
      > .cell.sp8 { grid-column: 3 !important; grid-row: 1 / 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; contain: none !important; isolation: auto !important; }
      > .cell.sp4 { grid-column: 4 !important; grid-row: 1 / 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; contain: none !important; isolation: auto !important; }
      > .cell.sp5 { display: none !important; }
      > .cell.sp7 { grid-column: 5 !important; grid-row: 1 / 3 !important; width: 100% !important; }
      > .cell.sp6 { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; max-width: none !important; }
    }
    .tarif_gesinfo {
      display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important;
      .gesell_logo_sprite { width: auto !important; max-width: min(100%, 4.6rem) !important; max-height: 1.2rem !important; margin: 0 0 .1rem !important; }
      .label {
        display: block !important; max-width: 100% !important; overflow: visible !important;
        color: var(--ink) !important; font-size: var(--result-font-value) !important; line-height: 1.16 !important;
        text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important;
        -webkit-line-clamp: unset !important;
      }
    }
    .bewertung { justify-content: flex-start !important; margin: .12rem 0 0 !important; }
    .settings-box-out {
      display: grid !important; grid-template-columns: max-content !important;
      grid-template-rows: repeat(3, min-content) !important;
      justify-content: start !important; row-gap: .1rem !important;
      align-content: center !important; width: 100% !important; max-width: none !important;
      min-width: 0 !important; margin: 0 !important; text-align: left !important;
    }
    .setting:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
    .setting:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
    .setting:nth-child(5) { grid-column: 1 !important; grid-row: 3 !important; }
    .setting:nth-child(n) {
      display: grid !important; grid-template-columns: max-content max-content !important;
      gap: clamp(.12rem, .08rem + .2vw, .22rem) !important;
      align-items: baseline !important; align-content: start !important; justify-content: start !important;
      width: max-content !important; max-width: 100% !important;
      min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    }
    .setting:nth-child(3), .setting:nth-child(4), .setting:nth-child(6) { display: none !important; }
    .setting_left, .setting_right {
      min-width: 0 !important; width: max-content !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
      font-size: var(--result-font-value) !important;
      line-height: 1.15 !important; text-align: left !important; white-space: normal !important;
    }
    .setting_left { color: #697487 !important; font-size: var(--result-font-label) !important; }
    .setting_right { color: var(--ink) !important; font-size: var(--result-font-value) !important; font-weight: 550 !important; white-space: nowrap !important; }
    .cell.sp4 .setting.setting-price {
      grid-template-columns: minmax(0, 1fr) !important; align-self: center !important;
      width: max-content !important; max-width: 100% !important;
    }
    .setting-price .setting_left { display: none !important; }
    .setting-price .setting_right { display: block !important; justify-self: start !important; text-align: left !important; }
    .tariflstg-box-out {
      display: flex !important; flex-direction: column !important; align-items: flex-start !important;
      justify-content: center !important; gap: .08rem !important; width: 100% !important;
      height: auto !important; max-width: 100% !important; overflow: visible !important;
    }
    .score-points-block {
      display: inline-flex !important; flex-direction: row !important; align-items: center !important;
      align-self: flex-start !important; justify-content: flex-start !important; gap: .26rem !important; width: auto !important;
      max-width: 100% !important; min-width: 0 !important; overflow: visible !important;
    }
    .cell.sp8 .balken {
      display: flex !important; align-items: flex-end !important; flex: 0 0 2.25rem !important;
      width: 2.25rem !important; height: .6rem !important; gap: .04rem !important;
      margin: 0 !important; overflow: hidden !important;
      > span { position: static !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
      .b1 { height: 45% !important; } .b2 { height: 55% !important; } .b3 { height: 65% !important; }
      .b4 { height: 75% !important; } .b5 { height: 87% !important; } .b6 { height: 100% !important; }
    }
    .cell.sp8 .punkte {
      width: auto !important; margin: 0 !important; font-size: var(--result-font-detail) !important;
      line-height: 1.05 !important; white-space: nowrap !important;
      br, span[style] { display: none !important; }
    }
    .tarifdetails-box {
      display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important;
      font-size: 0 !important; line-height: 0 !important;
      a {
        display: inline-flex !important; align-items: center !important; width: auto !important;
        font-size: 0 !important; line-height: 1.1 !important;
        &::after {
          content: 'Leistungsdetails'; color: var(--sky) !important; font-size: var(--result-font-detail) !important;
          font-weight: 650 !important; text-decoration: underline !important;
          text-decoration-color: transparent !important; text-underline-offset: .15em !important;
        }
        &:hover::after, &:focus-visible::after { text-decoration-color: currentColor !important; }
      }
      .tl-arrow-img { display: none !important; }
    }
    .setting-price .beitrag-antrag-box-out {
      display: inline-flex !important; flex-direction: row !important; align-items: baseline !important;
      justify-content: flex-start !important; width: max-content !important; max-width: 100% !important;
      height: auto !important; gap: 0 !important; overflow: visible !important; text-align: left !important;
    }
    .setting-price .beitrag-antrag-box-out > .rabSelector { display: none !important; }
    .setting-price .betrag {
      display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important;
      font-size: var(--result-font-price) !important;
      line-height: 1.1 !important; font-weight: 900 !important;
      text-shadow: .03em 0 currentColor, -.03em 0 currentColor !important;
      text-align: left !important; white-space: nowrap !important;
    }
    .setting-price .zahlweise, .setting-price .rabSelector, .setting-price .zwSelector {
      display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important;
      font-size: var(--result-font-detail) !important;
      line-height: 1.1 !important; font-weight: 400 !important; text-align: left !important; white-space: nowrap !important;
    }
    .setting-price .zahlweise::before { content: ' / '; white-space: pre !important; }
    .cell.sp7 .button-antrag-outer-box { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; line-height: 1 !important; }
    .cell.sp7 a.antrag, .cell.sp7 a.angebot {
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      width: 100% !important; min-height: 1.85rem !important; margin: 0 !important;
      padding: .28rem .45rem !important; border-radius: .26rem !important;
      font-size: 0 !important; box-shadow: none !important;
      &::after { content: 'Abschließen'; font-size: var(--result-font-value) !important; line-height: 1.1 !important; font-weight: 650 !important; }
    }
    .line .innerbox > .cell.sp6 {
      display: flex !important; flex-direction: column !important; align-items: center !important;
      justify-content: center !important; gap: .1rem !important; text-align: center !important;
    }
    .cell.sp6 input[type='checkbox'] { flex: 0 0 .78rem !important; width: .78rem !important; height: .78rem !important; margin: 0 !important; }
    .comparison-option-label {
      display: block !important; max-width: none !important; color: #526075 !important;
      font-size: var(--result-font-label) !important; line-height: 1.1 !important; white-space: nowrap !important;
    }
  }

  /* Expanded tariff details stay part of the same visual system. */
  .tl-details-box {
    width: 100% !important; max-width: 100% !important; margin: .35rem 0 .8rem !important;
    border: 1px solid var(--line) !important; border-radius: .3rem !important;
    background: #fff !important; box-shadow: none !important; overflow: visible !important;
    .tl-details-head {
      position: sticky !important; top: 4.7rem !important; z-index: 5 !important;
      display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.8rem !important;
      gap: .28rem !important; align-items: stretch !important; width: 100% !important;
      margin: 0 !important; padding: .4rem !important;
      border-bottom: 1px solid var(--line) !important; background: #fff !important;
    }
    .tl-details-elem {
      display: flex !important; flex-direction: column !important; justify-content: center !important;
      gap: .12rem !important; min-width: 0 !important; width: auto !important;
      margin: 0 !important; padding: .3rem .35rem !important;
      border: 1px solid var(--line) !important; border-radius: .25rem !important;
      background: var(--surface) !important; color: var(--ink) !important;
      cursor: pointer !important;
    }
    .tl-details-elem.tl-active {
      border-color: rgba(28, 66, 147, .32) !important; background: var(--mist) !important;
    }
    .tl-details-elem-one, .tl-details-elem-two {
      display: block !important; width: auto !important; margin: 0 !important;
      font-size: var(--result-ui-font) !important; line-height: 1.12 !important; text-align: left !important;
    }
    .tl-details-elem-one { font-weight: 750 !important; }
    .lvg-icon { width: .9rem !important; height: .9rem !important; margin: 0 .15rem 0 0 !important; vertical-align: middle !important; }
    .tl-details-close {
      display: grid !important; place-items: center !important; align-self: start !important;
      width: 1.8rem !important; height: 1.8rem !important; min-width: 1.8rem !important;
      margin: 0 !important; padding: 0 !important; border: 1px solid var(--line) !important;
      border-radius: 50% !important; background: var(--surface) !important;
      color: var(--navy) !important; font-size: .75rem !important; line-height: 1 !important;
      cursor: pointer !important;
    }
    .tl-details-close:hover, .tl-details-close:focus-visible {
      border-color: var(--sky) !important; background: var(--ice) !important;
    }
    .tl-details-content {
      width: 100% !important; min-width: 0 !important; padding: .15rem .4rem .4rem !important;
      background: #fff !important;
    }
    .tl-details-tbl-tr {
      display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
      gap: .45rem !important; min-width: 0 !important; width: 100% !important;
      margin: 0 !important; padding: .42rem .25rem !important;
      border-bottom: 1px solid var(--line) !important;
    }
    .tl-details-tbl-td {
      float: none !important; min-width: 0 !important; width: auto !important;
      height: auto !important; margin: 0 !important; padding: 0 !important;
      font-size: var(--result-ui-font) !important; line-height: 1.25 !important;
    }
    .tl-details-tbl-td-q a, .tl-details-tbl-td-q span,
    .tl-details-tbl-td-a .tl-details-a {
      font-size: inherit !important; line-height: inherit !important;
      overflow-wrap: anywhere !important;
    }
    .tl-details-tbl-td-a { color: #526075 !important; }
    .tl-details-tbl-td.tl-subheader {
      grid-column: 1 / -1 !important; padding: .35rem 0 .05rem !important;
      color: var(--navy) !important; font-weight: 750 !important;
    }
  }
}

/* Other lines of business can expose four or more tariff attributes (for
   example bicycle theft and battery cover). Never inherit PHV's deliberate
   three-fact selection, otherwise real benefits silently disappear. */
body.calculator-results-page:not(.calculator-module-phv) .calculator-frame #vvergleich .ergebnisBox {
  .settings-box-out {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: min-content !important;
    row-gap: .13rem !important;
    width: 100% !important;
  }
  .setting:nth-child(n) {
    display: grid !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
    align-items: baseline !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .setting_left, .setting_right {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .setting_right { overflow: visible !important; }
  .cell.sp4 .setting-price,
  .setting-price .beitrag-antrag-box-out {
    width: max-content !important;
    max-width: none !important;
  }
  .cell.sp4 .setting-price { display: block !important; }
  .cell.sp4 .setting-price .setting_right {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
  }
}

@media (max-width: 600px) {
  body.calculator-results-page .calculator-frame #vvergleich #ergebnisBox-out > .calc-pagination-footer {
    display: flex; flex-direction: column; align-items: stretch; gap: .45rem;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-pagination-footer .calc-results-range {
    align-self: flex-start;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-pagination-footer .calc-pagination {
    align-self: center;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-pagination-footer label {
    align-self: flex-end;
  }
}

@media (min-width: 801px) {
  body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox {
    .line > .tl-box { margin-top: 0 !important; }
    .line .innerbox > .cell.sp6 {
      flex-direction: row !important; align-items: center !important;
      justify-content: flex-start !important; gap: .16rem !important; text-align: left !important;
    }
  }
}

@media (max-width: 900px) {
  body.calculator-results-page .calculator-frame #vvergleich {
    .resultFilter { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
}

@media (max-width: 800px) {
  .calculator-results-page .calculator-main { width: calc(100% - .55rem); }
  .calculator-page .calculator-title-row h1 { font-size: clamp(1.28rem, 3.8vw, 1.44rem); }
  body.calculator-results-page .calculator-frame #vvergleich {
    .tl-details-box .tl-details-head { top: 4.2rem !important; }
    .resultFilter { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .2rem .35rem !important; }
    .ergebnisBox {
      /* Keep typography at the same readable scale when columns change. */
      .tarif_gesinfo .gesell_logo_sprite { max-width: 3.65rem !important; max-height: 1rem !important; }
      .settings-box-out {
        grid-template-columns: max-content !important;
        justify-content: start !important;
        row-gap: .06rem !important;
      }
      .setting:nth-child(n) { grid-template-columns: max-content max-content !important; gap: .1rem !important; }
      .setting_left, .setting_right, .setting-price .zahlweise { white-space: nowrap !important; }
      .setting-deductible .setting_left { font-size: 0 !important; }
      .setting-deductible .setting_left::after { content: 'Selbstb.'; font-size: var(--result-font-label) !important; }
      .score-points-block { flex-direction: column !important; align-items: center !important; gap: .05rem !important; }
      .cell.sp8 .balken { flex: 0 0 auto !important; width: 1.8rem !important; height: .45rem !important; }
      .cell.sp7 a.antrag, .cell.sp7 a.angebot { min-height: 1.75rem !important; padding: .25rem .12rem !important; }
      .cell.sp6 input[type='checkbox'] { flex-basis: .65rem !important; width: .65rem !important; height: .65rem !important; }

      /* Safe default while the content-width check initializes: two columns. */
      .line .innerbox {
        grid-template-columns: minmax(0, 1fr) minmax(5.6rem, auto) !important;
        grid-template-rows: auto auto auto auto !important;
        gap: .24rem .45rem !important; padding: .45rem .5rem !important;
        > .cell.sp1 { grid-column: 1 / -1 !important; grid-row: 1 !important; }
        > .cell.sp2 {
          grid-column: 1 !important; grid-row: 2 !important; padding: .28rem 0 !important;
          border: 0 !important;
        }
        > .cell.sp8 {
          grid-column: 2 !important; grid-row: 2 !important; padding: .28rem 0 !important;
          border: 0 !important;
        }
        > .cell.sp4 { grid-column: 1 !important; grid-row: 3 / 5 !important; justify-content: flex-start !important; align-self: center !important; }
        > .cell.sp7 { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; width: min(7.2rem, 100%) !important; }
        > .cell.sp6 { grid-column: 2 !important; grid-row: 4 !important; justify-content: flex-start !important; }
      }
      .tariflstg-box-out { align-items: flex-start !important; }
      .line .innerbox > .cell.sp6 { flex-direction: row !important; align-items: center !important; gap: .2rem !important; }
      .comparison-option-label { white-space: normal !important; }
    }
  }
}

@media (max-width: 390px) {
  body.calculator-results-page .calculator-frame #vvergleich {
    .resultFilter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
}

/* The grid variant comes from measured tariff contents, not a viewport cutoff. */
@media (max-width: 800px) {
  body.calculator-results-page[data-result-layout='five'] .calculator-frame #vvergleich .ergebnisBox {
    .line .innerbox {
      grid-template-columns: clamp(5.5rem, 10vw, 6rem) max-content max-content max-content clamp(4.2rem, 9vw, 6rem) !important;
      grid-template-rows: auto auto !important;
      column-gap: .7rem !important; row-gap: .32rem !important;
      justify-content: space-between !important;
      align-items: center !important; padding: .35rem .4rem !important;
      > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; }
      > .cell.sp2 { grid-column: 2 !important; grid-row: 1 / 3 !important; padding: 0 !important; border: 0 !important; }
      > .cell.sp8 { grid-column: 3 !important; grid-row: 1 / 3 !important; padding: 0 !important; border: 0 !important; }
      > .cell.sp4 { grid-column: 4 !important; grid-row: 1 / 3 !important; align-self: center !important; justify-content: center !important; }
      > .cell.sp7 { grid-column: 5 !important; grid-row: 1 / 3 !important; width: 100% !important; }
      > .cell.sp6 { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; }
    }
    .line .innerbox > .cell.sp6 {
      flex-direction: row !important; align-items: center !important;
      justify-content: flex-start !important; gap: .16rem !important; text-align: left !important;
    }
    .line > .tl-box { margin-top: 0 !important; }
    .comparison-option-label { text-align: left !important; white-space: nowrap !important; }
  }

  body.calculator-results-page[data-result-layout='four'] .calculator-frame #vvergleich .ergebnisBox {
    .line .innerbox {
      grid-template-columns: clamp(5.5rem, 10vw, 6rem) max-content max-content max-content !important;
      grid-template-rows: auto auto !important;
      column-gap: .6rem !important; row-gap: .12rem !important;
      justify-content: space-between !important; padding: .4rem .45rem .2rem !important;
      > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; }
      > .cell.sp2 { grid-column: 2 !important; grid-row: 1 / 3 !important; align-self: center !important; padding: 0 !important; border: 0 !important; }
      > .cell.sp8 { grid-column: 3 !important; grid-row: 1 / 3 !important; align-self: center !important; padding: 0 !important; border: 0 !important; }
      > .result-checkout-group {
        grid-column: 4 !important; grid-row: 1 / 3 !important;
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important; gap: .3rem !important;
        width: max-content !important; min-width: 4.2rem !important; max-width: 100% !important;
        min-height: 0 !important; margin: 0 !important; padding: 0 !important;
        > .cell {
          position: static !important; float: none !important; min-width: 0 !important;
          width: 100% !important; max-width: 100% !important; height: auto !important;
          min-height: 0 !important; margin: 0 !important; padding: 0 !important;
          order: 0 !important; overflow: visible !important;
        }
        > .cell.sp4 { display: flex !important; justify-content: center !important; }
        > .cell.sp7 { display: block !important; }
      }
      > .cell.sp6 { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; }
    }
    .line .innerbox > .cell.sp6 {
      flex-direction: row !important; align-items: center !important;
      justify-content: flex-start !important; gap: .16rem !important;
      padding-top: .3rem !important; text-align: left !important;
    }
    .line > .tl-box { margin-top: 0 !important; }
    .comparison-option-label { text-align: left !important; white-space: nowrap !important; }
  }

  body.calculator-results-page[data-result-layout='two'] .calculator-frame #vvergleich .ergebnisBox {
    .line .innerbox {
      grid-template-rows: auto auto auto !important;
      row-gap: .12rem !important;
      > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; }
      > .cell.sp6 {
        grid-column: 1 !important; grid-row: 3 !important;
        justify-self: start !important; align-self: center !important; width: max-content !important;
      }
      > .cell.sp2 {
        grid-column: 1 !important; grid-row: 2 !important;
        align-self: center !important; padding: 0 !important; border: 0 !important;
      }
      > .cell.sp4 {
        grid-column: 2 !important; grid-row: 2 !important;
        justify-content: center !important; align-self: center !important;
        padding: 0 !important; border: 0 !important;
      }
      > .cell.sp8 {
        grid-column: 2 !important; grid-row: 1 !important;
        justify-content: center !important; align-self: center !important;
        padding: 0 !important; border: 0 !important;
      }
      > .cell.sp7 {
        grid-column: 2 !important; grid-row: 3 !important;
        justify-self: center !important; align-self: center !important;
        width: min(7.2rem, 100%) !important;
      }
    }
    .line .innerbox > .cell.sp6 { justify-content: flex-start !important; padding: 0 !important; }
    .cell.sp8 .tariflstg-box-out { align-items: center !important; text-align: center !important; }
    .cell.sp8 .score-points-block { align-self: center !important; align-items: center !important; }
    .cell.sp8 .punkte { text-align: center !important; }
    .cell.sp8 .tarifdetails-box { align-self: center !important; text-align: center !important; }
    .line > .tl-box { margin-top: 0 !important; }
    .comparison-option-label { white-space: nowrap !important; }
  }

body.calculator-results-page[data-result-layout='one'] .calculator-frame #vvergleich .ergebnisBox {
    .line .innerbox {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: repeat(6, auto) !important;
      gap: .78rem !important; padding: .45rem .5rem !important;
      > .cell.sp1, > .cell.sp2, > .cell.sp8,
      > .cell.sp4, > .cell.sp7, > .cell.sp6 { grid-column: 1 !important; }
      > .cell.sp6 { grid-row: 1 !important; width: max-content !important; justify-self: start !important; justify-content: flex-start !important; }
      > .cell.sp1 { grid-row: 2 !important; }
      > .cell.sp2 { grid-row: 3 !important; padding: 0 !important; border: 0 !important; }
      > .cell.sp8 { grid-row: 4 !important; padding: 0 !important; border: 0 !important; justify-content: flex-start !important; }
      > .cell.sp4 { grid-row: 5 !important; justify-content: flex-start !important; }
      > .cell.sp7 { grid-row: 6 !important; width: min(5.6rem, 100%) !important; justify-self: start !important; }
    }
  }
}

/* Some products (for example Cyber and Öltank) have no score graphic. Give their price a
   real cell and let the remaining groups use the available space. */
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-zero-score .score-points-block {
  display: none !important;
}
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score > .cell.sp8 {
  display: none !important;
}
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score .tariflstg-box-out {
  display: none !important;
}
body.calculator-results-page[data-result-layout='five'] .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score {
  grid-template-columns: clamp(5.5rem, 10vw, 6rem) minmax(0, 1fr) max-content clamp(4.2rem, 9vw, 6rem) !important;
  > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; }
  > .cell.sp2 { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  > .cell.sp4 { grid-column: 3 !important; grid-row: 1 / 3 !important; }
  > .cell.sp7 { grid-column: 4 !important; grid-row: 1 / 3 !important; }
  > .cell.sp6 { grid-column: 1 !important; grid-row: 2 !important; }
}
body.calculator-results-page[data-result-layout='four'] .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score {
  grid-template-columns: clamp(5.5rem, 10vw, 6rem) minmax(0, 1fr) max-content !important;
  > .cell.sp1 { grid-column: 1 !important; grid-row: 1 !important; }
  > .cell.sp2 { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  > .result-checkout-group { grid-column: 3 !important; grid-row: 1 / 3 !important; }
  > .cell.sp6 { grid-column: 1 !important; grid-row: 2 !important; }
}
body.calculator-results-page[data-result-layout='two'] .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score > .cell.sp4 {
  justify-content: flex-start !important;
}
body.calculator-results-page[data-result-layout='one'] .calculator-frame #vvergleich .ergebnisBox .line .innerbox.result-no-score {
  grid-template-rows: repeat(5, auto) !important;
  > .cell.sp4 { grid-row: 4 !important; }
  > .cell.sp7 { grid-row: 5 !important; }
}

/* An offer request is not an online contract conclusion. Keep the vendor's
   actual action wording if a different product uses an offer-only tariff. */
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .cell.sp7 a.angebot {
  font-size: var(--result-font-value) !important;
}
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .cell.sp7 a.angebot::after {
  content: none !important;
}

body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .setting_right a.infoicon {
  display: inline-grid !important;
  place-items: center !important;
  width: .78rem !important;
  min-width: .78rem !important;
  height: .78rem !important;
  padding: 0 !important;
  border: 1px solid var(--blue) !important;
  border-radius: 50% !important;
  background: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .setting_right a.infoicon > span {
  display: none !important;
}
body.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .setting_right a.infoicon::after {
  content: 'i';
  color: var(--blue);
  font-family: var(--calculator-font-body);
  font-size: .52rem;
  font-weight: 800;
}

/* Touch devices get discrete, full-size controls instead of tiny drag handles.
   The original Mr-Money sliders remain in the DOM and retain all filter logic. */
.calc-mobile-filter-control { display: none !important; }
@media (max-width: 900px), (pointer: coarse) {
  body.calculator-results-page .calculator-frame #vvergleich .resultFilter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .resultFilter .slide_filterbox.calc-has-stepper {
    gap: .22rem !important;
    padding: .15rem 0 !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .slide_filterbox.calc-has-stepper > .ui-slider {
    display: none !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .slide_filterbox.calc-has-stepper
    .filter-value-with-help > span[class$="SliderValue"] {
    display: none !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-mobile-filter-control {
    display: grid !important;
    gap: .3rem !important;
    width: 100% !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem !important;
    align-items: center !important;
    gap: .25rem !important;
    width: 100% !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper output {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 2.2rem !important;
    padding: .24rem .4rem !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--result-ui-radius) !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-family: var(--calculator-font-body) !important;
    font-size: var(--result-ui-font) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper button[type="button"] {
    display: grid !important;
    place-items: center !important;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--result-ui-radius) !important;
    background: #fff !important;
    color: var(--blue) !important;
    box-shadow: none !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper button[type="button"]:hover,
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper button[type="button"]:focus-visible {
    border-color: var(--blue) !important;
    background: var(--ice) !important;
    outline: none !important;
  }
  body.calculator-results-page .calculator-frame #vvergleich .calc-filter-stepper button[type="button"]:disabled {
    color: #8c98a8 !important;
    background: var(--surface) !important;
    cursor: default !important;
  }
}

@media (max-width: 700px) {
  body.calculator-results-page .calculator-frame #vvergleich .resultFilter {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}