:root {

  /* =====================================================

   COLORS

===================================================== */



  --hsb-green: #4d7e6b;

  --hsb-green-soft: #84978f;

  --hsb-green-light: #bbd2ca;



  --hsb-gold: #c7ac76;

  --hsb-cream: #f7f4ee;



  --hsb-text: #1f3b34;



  /* =====================================================

   TYPOGRAPHY

===================================================== */



  --hsb-font: "Montserrat", sans-serif;



  --hsb-font-light: 300;

  --hsb-font-regular: 400;

  --hsb-font-medium: 500;

  --hsb-font-bold: 700;



  /* Fluid Type Scale */



  --hsb-text-xs: clamp(12px, 0.7vw, 13px);

  --hsb-text-sm: clamp(13px, 0.8vw, 14px);

  --hsb-text-md: clamp(14px, 0.9vw, 16px);

  --hsb-text-lg: clamp(16px, 1.2vw, 20px);

  --hsb-text-xl: clamp(18px, 1.5vw, 22px);

  --hsb-text-xxl: clamp(22px, 2vw, 28px);



  /* =====================================================

   SPACING SCALE

===================================================== */



  --hsb-space-xs: clamp(6px, 0.4vw, 8px);

  --hsb-space-sm: clamp(10px, 0.7vw, 14px);

  --hsb-space-md: clamp(14px, 1vw, 20px);

  --hsb-space-lg: clamp(20px, 1.5vw, 28px);

  --hsb-space-xl: clamp(28px, 2vw, 40px);



  /* =====================================================

   COMPONENT TOKENS

===================================================== */



  --hsb-radius-sm: 4px;

  --hsb-radius-pill: 20px;

}



/* =====================================================

   WRAPPER

===================================================== */



.hsb-cost-calculator {

  background: var(--hsb-cream);

  padding: var(--hsb-space-xl);

  font-family: var(--hsb-font);

  color: var(--hsb-text);

  width: 100%;

}



/* =====================================================

   HEADER

===================================================== */



.hsb-cost-header {

  margin-bottom: var(--hsb-space-md);

}



.hsb-cost-heading {

  font-size: var(--hsb-text-xxl);

  font-weight: var(--hsb-font-medium);

  margin: 0;

}



/* =====================================================

   CURRENT AMOUNT

===================================================== */



.hsb-cost-current {

  text-align: center;

  font-size: var(--hsb-text-lg);

  font-weight: var(--hsb-font-light);

  margin-bottom: var(--hsb-space-sm);

}



/* =====================================================

   SLIDER

===================================================== */



.hsb-cost-slider-wrap {

  width: 100%;

}



.hsb-cost-slider {

  appearance: none;

  -webkit-appearance: none;



  width: 100%;

  height: 4px;



  background: var(--hsb-green);

  border-radius: 2px;



  outline: none;

  margin: 0;

}



/* Chrome Thumb */



.hsb-cost-slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 18px;

  height: 18px;

  background: var(--hsb-green);

  border-radius: 50%;

  cursor: pointer;

  border: none;

}



/* Firefox Track */



.hsb-cost-slider::-moz-range-track {

  background: var(--hsb-green);

  height: 4px;

  border-radius: 2px;

}



/* Firefox Thumb */



.hsb-cost-slider::-moz-range-thumb {

  width: 18px;

  height: 18px;

  background: var(--hsb-green);

  border-radius: 50%;

  border: none;

  cursor: pointer;

}



/* =====================================================

   RANGE LABELS

===================================================== */



.hsb-cost-range {

  display: flex;

  justify-content: space-between;

  margin-top: var(--hsb-space-xs);

  font-size: var(--hsb-text-sm);

  color: var(--hsb-text);

}



/* =====================================================

   RESULT BOXES

===================================================== */



.hsb-cost-boxes {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--hsb-space-lg);

  margin-top: var(--hsb-space-lg);

}



.hsb-cost-box {

  background: #fff;

  padding: var(--hsb-space-md);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

}



/* =====================================================

   BOX TITLE

===================================================== */



.hsb-cost-title {

  font-size: var(--hsb-text-lg);

  line-height: 1.5;

  margin-bottom: var(--hsb-space-xs);



  display: flex;

  align-items: flex-start;

  gap: var(--hsb-space-xs);

}



/* =====================================================

   INFO ICON

===================================================== */



.hsb-info {

  position: relative;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  width: 16px;

  height: 16px;



  font-size: var(--hsb-text-xs);

  font-weight: var(--hsb-font-medium);



  border-radius: 50%;

  background: var(--hsb-green);

  color: #fff;



  cursor: default;

}



/* =====================================================

   TOOLTIP

===================================================== */



.hsb-tooltip {

  position: absolute;

  bottom: calc(100% + 8px);

  right: 0;

  left: auto;

  transform: none;



  max-width: min(220px, 70vw);

  width: 220px;



  background: var(--hsb-green);

  color: #fff;

  padding: 8px 10px;

  font-size: var(--hsb-text-xs);

  line-height: 1.4;

  white-space: normal;

  text-align: left;



  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease;

}



.hsb-tooltip::after {

  content: "";

  position: absolute;

  top: 100%;

  right: 10px;

  left: auto;

  transform: none;



  border-width: 6px;

  border-style: solid;

  border-color: var(--hsb-green) transparent transparent transparent;

}



.hsb-info:hover .hsb-tooltip {

  opacity: 1;

}



/* =====================================================

   VALUE

===================================================== */



.hsb-cost-value {

  font-size: var(--hsb-text-xl);

  font-weight: var(--hsb-font-bold);

}



/* =====================================================

   OVERLAY

===================================================== */



.hsb-cost-popup-overlay {

  position: fixed;

  inset: 0;



  background: rgba(0, 0, 0, 0.5);



  display: flex;

  align-items: center;

  justify-content: center;



  z-index: 9999;



  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.hsb-cost-popup-overlay.active {

  visibility: visible;

  opacity: 1;

}



/* =====================================================

   POPUP

===================================================== */



.hsb-cost-popup {

  width: 900px;

  max-width: 80vw;

  max-height: 85vh;

  box-sizing: border-box;

  overflow-y: auto;



  background: var(--hsb-cream);

  padding: var(--hsb-space-xl);



  position: relative;

}



/* =====================================================

   CLOSE ICON

===================================================== */



.hsb-cost-popup-close {

  position: absolute;



  top: 20px;

  right: 24px;



  cursor: pointer;



  font-size: var(--hsb-text-xl);

  font-weight: var(--hsb-font-regular);



  color: var(--hsb-text);



  transition: opacity 0.2s ease;

}



.hsb-cost-popup-close:hover {

  opacity: 0.6;

}



/* =====================================================

   TRIGGER BUTTON

===================================================== */



.hsb-cost-popup-trigger {

  font-family: inherit;



  background: var(--hsb-gold) !important;

  color: #fff;



  padding: 12px 26px;



  border-radius: var(--hsb-radius-pill) !important;

  border: none;



  cursor: pointer;

}

/* Default bleibt wie bisher */



.hsb-cost-popup-trigger.is-rec {

  font-family: var(--hsb-font);



  font-size: var(--hsb-text-sm);

  font-weight: var(--hsb-font-medium);

  border-radius: 0px !important;

  display: block;

  margin: 0 auto;

  background: var(--hsb-green) !important;

}



/* Optional: Hover */

.hsb-cost-popup-trigger.is-rec:hover {

  background: var(--hsb-green);

}



/* =====================================================

   RESPONSIVE

===================================================== */



@media (max-width: 768px) {

  .hsb-cost-calculator {

    padding: 24px;

    width: 100%;

  }



  .hsb-cost-current {

    font-size: 20px;

  }



  .hsb-cost-boxes {

    grid-template-columns: 1fr;

    width: 100%;

  }



  .hsb-cost-popup {

    width: 100%;

    max-height: 90vh;

    padding: var(--hsb-space-lg);

  }



  .hsb-cost-heading {

    font-size: var(--hsb-text-xl);

    line-height: 1.2;

  }



  .hsb-cost-current {

    font-size: var(--hsb-text-md);

    margin-bottom: var(--hsb-space-sm);

  }



  .hsb-cost-slider-wrap {

    margin: var(--hsb-space-md) 0;

    width: 100%;

  }



  .hsb-cost-range {

    font-size: var(--hsb-text-sm);

  }



  .hsb-cost-boxes {

    grid-template-columns: 1fr;

    gap: var(--hsb-space-md);

  }



  .hsb-cost-boxes {

    grid-template-columns: 1fr;

    gap: var(--hsb-space-md);

  }



  .hsb-cost-title {

    font-size: var(--hsb-text-md);

  }



  .hsb-cost-value {

    font-size: var(--hsb-text-lg);

  }



  .hsb-tooltip {

    max-width: min(220px, 80vw);

  }

}