.help {
  margin-top: 5px;
}

.minimum-help {
  margin: 15px 0 0;
  color: var(--deep);
  font-size: 11px;
}

.field-error {
  margin: 8px 0 0;
  color: #a52a2a;
  font-size: 11px;
  font-weight: 800;
}

.input-unit:has(input[aria-invalid="true"]) {
  border-color: #b74242;
  box-shadow: 0 0 0 3px rgba(183, 66, 66, .1);
}

.quick-estimate {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.quick-estimate b {
  color: #fff;
  font-size: 10px;
}

.quick-estimate span {
  max-width: 190px;
  color: #bde2e8 !important;
  font-size: 9px !important;
  line-height: 1.35;
}

.personal-net-note {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.personal-net-note b {
  color: #fff;
  font-size: 10px;
}

.personal-net-note span {
  max-width: 220px;
  color: #bde2e8 !important;
  font-size: 9px !important;
  line-height: 1.4;
}

.calculation-basis {
  display: grid;
  gap: 3px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  background: #fff;
  color: var(--deep);
}

.calculation-basis span,
.calculation-basis small {
  color: var(--muted);
  font-size: 10px;
}

.private-health-fields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.private-health-fields > p {
  margin: 0 0 14px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 800;
}

.year-warning {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #fff0c8;
  color: #644b00;
  font-size: 11px;
  font-weight: 700;
}

.net-breakdown,
.payroll-comparison {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(0,24,42,.15);
}

.net-breakdown summary,
.payroll-comparison summary {
  padding: 14px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.net-lines {
  display: grid;
  gap: 7px;
  padding: 0 14px 14px;
}

.net-lines span,
.comparison-grid span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #b9dce2;
  font-size: 10px;
}

.net-lines b,
.comparison-grid b {
  color: #fff;
  white-space: nowrap;
}

.net-lines .net-total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-weight: 800;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 14px 14px;
}

.comparison-grid > div {
  padding: 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
}

.comparison-grid h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 11px;
}

.comparison-grid span + span { margin-top: 6px; }

.form-grid > .form-field {
  min-width: 0;
  color: #3a4e5c;
  font-size: 12px;
  font-weight: 750;
}

.help-field { position: relative; }

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

.info-trigger {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #8ebbc4;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.info-trigger:hover,
.info-trigger:focus-visible,
.info-trigger[aria-expanded="true"] {
  border-color: var(--cyan);
  background: var(--soft);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(9,167,186,.12);
}

.info-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(330px, calc(100vw - 56px));
  padding: 15px 16px;
  border: 1px solid #b9d4d9;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(14,48,66,.18);
  font-weight: 400;
}

.info-popover b {
  display: block;
  color: var(--deep);
  font-size: 10px;
}

.info-popover p {
  margin: 3px 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.info-popover p:last-child { margin-bottom: 0; }

.additional-tax-details {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.65);
}

.additional-tax-details summary {
  cursor: pointer;
  color: var(--deep);
}

.additional-tax-details summary span,
.additional-tax-details summary small {
  display: block;
}

.additional-tax-details summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.additional-tax-details > .form-grid { margin-top: 18px; }
.form-field.is-muted { opacity: .58; }
.form-field.is-muted:focus-within { opacity: 1; }

.print-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 14px;
}

.print-actions button {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}

.print-button { border: 0; background: #fff; color: var(--deep); }
.pdf-button { border: 1px solid rgba(255,255,255,.38); background: transparent; color: #fff; }
.print-actions button:disabled { cursor: not-allowed; opacity: .45; }
.print-actions small { grid-column: 1/-1; color: #a8d0d8; font-size: 9px; }

.print-status {
  grid-column: 1/-1;
  min-height: 0;
  margin: 0;
  color: #d8f5f6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.print-status:empty { display: none; }
.print-status.is-error { color: #ffe0d7; }

.pdf-download-link {
  grid-column: 1/-1;
  justify-self: start;
  padding: 9px 13px;
  border-radius: 8px;
  background: #09a7ba;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}

.pdf-download-link:hover { background: #12b7c9; }

.embedded-browser-note {
  grid-column: 1/-1;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  background: rgba(0,28,48,.28);
  color: #d4e8ec;
  font-size: 10px;
  line-height: 1.45;
}

.embedded-browser-note b { color: #fff; }

.external-browser-button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.external-browser-button:hover { border-color: #7ce4eb; color: #9df2f4; }

.print-document { display: none; }

@page { size: A4 portrait; margin: 14mm 14mm 18mm; }

@media print {
  html, body { background: #fff !important; }
  body.print-mode > :not(#printDocument) { display: none !important; }
  body.print-mode #printDocument { display: block !important; }
  .print-document { color: #172d3b; font: 9.5pt/1.4 Arial, Helvetica, sans-serif; }
  .print-document * { box-sizing: border-box; }
  .print-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20mm; padding-bottom: 5mm; border-bottom: 1.5pt solid #003d61; }
  .print-header div { display: grid; gap: 1mm; }
  .print-header b { color: #003d61; font-size: 17pt; }
  .print-header span { font-size: 9pt; }
  .print-header img { width: 34mm; height: auto; max-height: 17mm; object-fit: contain; }
  .print-meta { display: flex; justify-content: space-between; gap: 10mm; margin: 4mm 0 7mm; color: #455f6e; font-size: 8pt; }
  .print-document h1 { margin: 0 0 6mm; color: #102f43; font-size: 22pt; line-height: 1.08; }
  .print-section { margin: 0 0 5mm; break-inside: avoid; }
  .print-section h2 { margin: 0 0 3mm; padding-bottom: 1.5mm; border-bottom: .7pt solid #9fb4bc; color: #003d61; font-size: 12.5pt; }
  .print-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7mm 7mm; }
  .print-facts span, .print-list span, .print-net-grid span { display: flex; justify-content: space-between; gap: 6mm; padding-bottom: 1mm; border-bottom: .4pt solid #d9e1e4; }
  .print-facts b, .print-list b, .print-net-grid b { text-align: right; white-space: nowrap; }
  .print-highlight-section { padding: 4mm; border: 1.2pt solid #003d61; }
  .print-highlight-section > p { margin: 3mm 0 0; font-size: 10.5pt; }
  .print-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; gap: 3mm; align-items: center; }
  .print-equation span { display: grid; gap: 1mm; }
  .print-equation span b { font-size: 13pt; }
  .print-equation i { color: #487080; font-size: 16pt; font-style: normal; }
  .print-equation strong { display: grid; padding: 3mm; border-left: 3pt solid #09a7ba; background: #f2f7f7 !important; }
  .print-equation strong small, .print-equation strong em { font-size: 7.5pt; font-style: normal; }
  .print-equation strong b { color: #003d61; font-size: 18pt; }
  .print-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; break-inside: avoid; }
  .print-list, .print-net-grid { display: grid; gap: 1.5mm; }
  .print-list .total, .print-net-grid .total { padding-top: 1.5mm; border-top: 1pt solid #708a96; border-bottom: 0; font-weight: 700; }
  .print-net-grid { grid-template-columns: 1fr 1fr; column-gap: 8mm; }
  .print-document table { width: 100%; border-collapse: collapse; break-inside: avoid; }
  .print-document th, .print-document td { padding: 2mm 2.5mm; border: .5pt solid #b8c6cc; text-align: right; }
  .print-document th:first-child, .print-document td:first-child { text-align: left; }
  .print-document th { background: #eef3f4 !important; color: #102f43; }
  .print-difference { margin: 4mm 0 0; padding: 3mm; border-left: 3pt solid #09a7ba; font-size: 13pt; }
  .print-comparison-note { margin: 3mm 0 0; color: #455f6e; font-size: 8pt; line-height: 1.45; }
  .print-capital-results { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 4mm; }
  .print-capital-results > div { display: grid; gap: 1mm; padding: 4mm; border: 1pt solid #9fb4bc; }
  .print-capital-results strong { color: #003d61; font-size: 20pt; }
  .print-capital-results b { font-size: 7.5pt; }
  .print-chart-section img { display: block; width: 100%; height: auto; max-height: 160mm; object-fit: contain; }
  .print-chart-legend { display: flex; gap: 9mm; margin-top: 3mm; font-size: 8pt; }
  .print-chart-legend i { display: inline-block; width: 12mm; height: 2pt; margin-right: 2mm; vertical-align: middle; }
  .print-chart-legend .basis { background: #003d61 !important; }
  .print-chart-legend .bonus { border-top: 2pt dashed #09a7ba; }
  .print-benefit { padding: 4mm; border: 1pt solid #8aa8b2; }
  .print-benefit strong { color: #003d61; font-size: 15pt; }
  .print-benefit p { margin: 2mm 0 0; }
  .print-legal { padding-top: 4mm; border-top: .7pt solid #9fb4bc; color: #455f6e; font-size: 7.5pt; break-inside: avoid; }
  .print-legal p { margin: 0 0 2mm; }
  .print-footer { position: fixed; right: 0; bottom: -11mm; left: 0; display: flex; justify-content: space-between; padding-top: 2mm; border-top: .5pt solid #aab9bf; color: #5f737c; font-size: 7.5pt; }
  .print-page-break { break-before: page; page-break-before: always; }
}

.headline-result strong.net-pending {
  max-width: 235px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.model-badge {
  max-width: 260px;
  text-align: right;
  line-height: 1.35;
}

.existing-capital-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid #bcd8dc;
  border-radius: 14px;
  background: #f2f8f8;
}

.existing-capital-panel > div > p {
  margin: 0 0 3px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.existing-capital-panel h3 {
  margin: 0 0 16px;
  font-size: 17px;
}

.existing-capital-panel > label {
  display: block;
  max-width: 320px;
  color: #3a4e5c;
  font-size: 12px;
  font-weight: 750;
}

.capital-composition {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.capital-composition summary {
  cursor: pointer;
  color: var(--deep);
  font-size: 12px;
  font-weight: 800;
}

.capital-composition > p {
  color: var(--muted);
  font-size: 10px;
}

.metric-grid .metric-breakdown {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 9px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  background: transparent;
}

.metric-breakdown em {
  color: #91c5cf;
  font-size: 8px;
  font-style: normal;
  text-transform: uppercase;
}

.metric-breakdown span {
  color: #c5e0e5 !important;
  font-size: 8px !important;
  line-height: 1.35;
}

.metric-breakdown span b {
  display: inline;
  color: #fff;
  font-size: 14px;
}

.metric-breakdown > i {
  color: #83e5ec;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.metric-breakdown .breakdown-line {
  font-size: 9px !important;
}

.metric-breakdown .breakdown-total {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: #fff !important;
  font-size: 9px !important;
}

.metric-breakdown .breakdown-total i {
  margin-right: 5px;
  color: #83e5ec;
  font-style: normal;
}

.leverage > span {
  display: block;
  margin-top: 3px;
  color: #9cdce3;
  font-size: 9px;
}

.vorsorge-overview {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(0,25,44,.18);
}

.vorsorge-overview h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
}

.vorsorge-overview > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
}

.vorsorge-overview span {
  display: flex;
  min-height: 55px;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  padding: 10px;
  background: rgba(0,30,51,.25);
  color: #add5dc;
  font-size: 8px;
  line-height: 1.35;
}

.vorsorge-overview b {
  color: #fff;
  font-size: 13px;
}

.guarantee-warning {
  display: block;
  margin-top: 7px;
  color: #fff4bf;
  font-size: 11px;
  line-height: 1.35;
}

.capital-split em {
  margin-right: auto;
  padding: 1px 5px;
  border-radius: 5px;
  background: #fff4bf;
  color: #6e6018;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}

.capital-split span {
  align-items: center;
}

.capital-split .bonus-split {
  display: grid;
  gap: 4px;
  margin-top: 5px;
  padding: 11px;
  border-radius: 9px;
  background: #f7f3df;
}

.capital-split .bonus-split > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capital-split .bonus-split > div > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.capital-split .bonus-split > div > b {
  flex: none;
  color: var(--ink);
}

.capital-split .bonus-split small {
  color: var(--muted);
  font-size: 8px;
}

.capital-split .bonus-split small b {
  color: var(--deep);
}

footer .legal {
  font-size: 11.5px;
  line-height: 1.7;
}

@media (min-width: 981px) {
  .calculator-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mode-bar {
    overflow: hidden;
    border: 1px solid #cfdddf;
    border-radius: 30px 30px 0 0;
  }

  .workspace {
    align-items: start;
  }

  .inputs-panel {
    border-right: 1px solid #cfdddf;
    border-bottom: 1px solid #cfdddf;
    border-left: 1px solid #cfdddf;
    border-radius: 0 0 0 30px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(25,54,65,.08);
  }

  .results-panel {
    border-right: 1px solid #cfdddf;
    border-bottom: 1px solid #cfdddf;
    border-radius: 0 0 30px 0;
    box-shadow: 0 24px 80px rgba(25,54,65,.11);
  }
}

@media (max-width: 640px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .vorsorge-overview > div {
    grid-template-columns: 1fr;
  }

  .vorsorge-overview span {
    min-height: auto;
  }

  footer .legal {
    font-size: 12px;
  }
}
