:root{--calculator-font-body:Figtree,Arial,sans-serif;--calculator-font-heading:Figtree,Arial,sans-serif;--navy:#123447;--blue:#1E6F93;--sky:#CFDDE2;--mist:#EAF3F6;--ice:#EAF3F6;--pink:#C56F50;--ink:#24343C;--surface:#F7F4ED;--line:#CFDDE2;--shadow-soft:0 7px 26px rgba(18,52,71,.05);--action-link-font:.9rem}
.calculator-main{padding-block:64px 80px}.calculator-title-row h1{font-size:clamp(32px,4vw,50px);line-height:1.2;margin-bottom:20px}.calculator-frame{margin-top:32px;min-height:220px;padding:28px;background:white;border-radius:16px;border:1px solid var(--line)}.calculator-page #vvergleich,.calculator-page #vvergleich input,.calculator-page #vvergleich select,.calculator-page #vvergleich button{font-family:var(--calculator-font-body)!important}.calculator-error,.offline-calculator{max-width:680px;line-height:1.65}.offline-calculator h2{font-size:28px;line-height:1.25;margin-bottom:18px}.calculator-error .button{display:inline-flex;margin-top:20px;padding:12px 20px;border-radius:12px;background:var(--blue);color:white;font-weight:600}.calculator-error p,.offline-calculator p{margin-top:14px}.calculator-page .ak-wrap{width:100%}.calculator-page h1,.calculator-page h2,.calculator-page h3{font-family:Figtree,Arial,sans-serif}
@media(max-width:760px){.calculator-main{padding-block:40px 64px}.calculator-frame{padding:18px}}@media(max-width:420px){.calculator-frame{padding:14px}}
.calculator-page .calculator-main{padding-inline:56px}.calculator-page .calculator-title-row{display:block}.calculator-page .calculator-title-row h1{font-size:clamp(32px,4vw,50px);max-width:none}.calculator-frame #vvergleich.offline-calculator h2{font-size:28px;line-height:1.25}.calculator-frame #vvergleich.offline-calculator p{font-size:16px;line-height:1.65}.calculator-frame #vvergleich{--schaltflaeche-hintergrund-farbe:var(--blue)}
@media(max-width:1050px){.calculator-page .calculator-main{padding-inline:32px}}@media(max-width:760px){.calculator-page .calculator-main{padding-inline:24px}}@media(max-width:420px){.calculator-page .calculator-main{padding-inline:20px}}

/* Brand skin only: keep the delivered responsive grids and control sizes. */
.calculator-page .calculator-frame #vvergleich {
  --text-farbe: var(--ink);
  --eingabefeld-hintergrund-farbe: var(--mist);
  --eingabefeld-rahmen-farbe: var(--blue);
  --schaltflaeche-hintergrund-farbe: var(--blue);
  color: var(--ink) !important;
}
.calculator-page .calculator-frame #vvergleich input.form-text,
.calculator-page .calculator-frame #vvergleich select.form-select,
.calculator-page .calculator-frame #vvergleich textarea {
  border-color: var(--blue) !important;
  border-radius: 12px !important;
  background: var(--mist) !important;
  color: var(--ink) !important;
}
.calculator-page .calculator-frame #vvergleich input.form-text:focus,
.calculator-page .calculator-frame #vvergleich select.form-select:focus,
.calculator-page .calculator-frame #vvergleich textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(30,111,147,.15) !important;
}
.calculator-page .calculator-frame #vvergleich .vergleichbutton,
.calculator-page .calculator-frame #vvergleich a.lnk_antrag,
.calculator-page .calculator-frame #vvergleich a.antrag,
.calculator-page .calculator-frame #vvergleich a.angebot,
.calculator-page .calculator-frame #vvergleich input.form-button,
.calculator-page .calculator-frame #vvergleich input[type="button"],
.calculator-page .calculator-frame #vvergleich input[type="submit"],
.calculator-page .calculator-frame #vvergleich button[type="button"] {
  border-color: var(--blue) !important;
  border-radius: 12px !important;
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(18,52,71,.10) !important;
}
.calculator-page .calculator-frame #vvergleich :is(.vergleichbutton,a.lnk_antrag,a.antrag,a.angebot,input.form-button,input[type="button"],input[type="submit"],button[type="button"]):hover {
  border-color: var(--navy) !important;
  background: var(--navy) !important;
}
.calculator-page .calculator-frame #vvergleich :is(input,select,textarea,button,a):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.calculator-page .calculator-frame #vvergleich :is(input[type="radio"],input[type="checkbox"]) {
  accent-color: var(--blue);
}
.calculator-page .calculator-frame #vvergleich :is(.resultFilter_out,.ergebnisBox:not(.ergebnisHeader),.tarifdetails-box-out,.calc-empty-consultation-card) {
  border-color: var(--line) !important;
  border-radius: 16px !important;
}
.calculator-page .calculator-frame #vvergleich .resultFilter_out {
  background: var(--surface) !important;
}
.calculator-page .calculator-frame #vvergleich :is(.htext,.ui-tooltip,.ui-tooltip-content) {
  background: var(--mist) !important;
  color: var(--ink) !important;
  font-family: var(--calculator-font-body) !important;
}
.calculator-page .calculator-notice {
  border-color: var(--line);
  border-left-color: var(--blue);
  background: var(--mist);
}

/* Result rules are more specific than the input skin; change appearance only. */
body.calculator-page.calculator-results-page .calculator-frame #vvergleich {
  --result-ui-radius: 12px;
}
body.calculator-page.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .cell.sp7 :is(a.antrag,a.angebot),
body.calculator-page.calculator-results-page .calculator-frame #vvergleich :is(input.btn-neuervgl,input.vergleichbutton) {
  border-color: var(--blue) !important;
  border-radius: 12px !important;
  background: var(--blue) !important;
  color: #fff !important;
}
body.calculator-page.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .cell.sp7 :is(a.antrag,a.angebot):hover,
body.calculator-page.calculator-results-page .calculator-frame #vvergleich :is(input.btn-neuervgl,input.vergleichbutton):hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
body.calculator-page.calculator-results-page .calculator-frame #vvergleich a.button_send {
  border-radius: 12px !important;
}
body.calculator-page.calculator-results-page .calculator-frame #vvergleich .resultFilter_out {
  border-color: var(--line) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
}
body.calculator-page.calculator-results-page .calculator-frame #vvergleich .ergebnisBox .line .innerbox {
  border-color: var(--line) !important;
  border-radius: 16px !important;
}