/* Funding Block */


:root{
  --off:#f4f7f9;--off2:#e8edf2;
  --text:#1a2a38;--muted:#6b8096;--white:#ffffff;
}

.erspanis-header{text-align:center;margin-bottom:35px;}
.erspanis-header .topline{margin:0 auto 1rem;}

.testi-save-card{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;border:1.5px solid var(--off2);box-shadow:0 8px 32px rgba(47,71,92,.1);margin-bottom:12px;width:80%;margin:0 auto 25px;}
.tsc-left{background:var(--brand-primary-color);padding:36px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;height:100%;}
.tsc-left::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(164,198,20,.15),transparent 70%);}
.tsc-quote{font-size:125%;font-weight:700;color:var(--white);line-height:1.55;margin-bottom:14px;position:relative;z-index:1;}
.tsc-quote::before{content:'\201E';color:var(--brand-accent-color);font-size:2rem;line-height:.4;display:block;margin-bottom:10px;}
.tsc-meta-name{font-size:100%;font-weight:700;color:var(--white);position:relative;z-index:1;}
.tsc-meta-detail{font-size:85%;color:rgba(255,255,255,.45);position:relative;z-index:1;}
.tsc-right{padding:36px;background:var(--white);display:flex;flex-direction:column;justify-content:center;}
.tsc-label{font-size:85%;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.tsc-before-after{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.tsc-ba{text-align:center;}
.tsc-ba-label{font-size:85%;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.tsc-ba-val{font-size:225%;font-weight:900;letter-spacing:-.03em;}
.tsc-ba-val.before{color:var(--muted);text-decoration:line-through;opacity:.6;}
.tsc-ba-val.after{color:var(--brand-accent-color);}
.tsc-ba-sub{font-size:85%;color:var(--muted);}
.tsc-arrow-icon{font-size:150%;color:var(--brand-accent-color);}
.tsc-saving-box{background:var(--off);border-radius:12px;padding:16px 18px;border-left:4px solid var(--brand-accent-color);margin-bottom:14px;}
.tsc-saving-label{font-size:85%;font-weight:700;color:var(--muted);margin-bottom:3px;}
.tsc-saving-val{font-size:225%;font-weight:900;color:var(--brand-primary-color);letter-spacing:-.04em;line-height:1;}
.tsc-saving-val em{color:var(--brand-accent-color);font-style:normal;}
.tsc-saving-year{font-size:85%;color:var(--muted);margin-top:2px;}
.tsc-comps{display:flex;gap:6px;flex-wrap:wrap;}
.tsc-comp{background:var(--off2);border-radius:100px;padding:3px 11px;font-size:85%;font-weight:700;color:var(--brand-primary-color);}
.partial-note{background:rgba(164,198,20,.08);border:1px solid rgba(164,198,20,.25);border-radius:12px;padding:14px 20px;font-size:100%;color:var(--brand-primary-color);line-height:1.6;margin-bottom:28px;display:flex;gap:10px;align-items:flex-start;width:75%;margin:25px auto 0;}
.partial-note::before{content:'💡';flex-shrink:0;}




#sparrechner{margin-bottom:-2.5rem;}

.rechnerwrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 75%;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0,0,0,0.10);
    margin:0 auto;
  }

/* LEFT PANEL */
  .left {
    background: #ffffff;
    padding: 2rem;
  }

  .panel-title {
    font-size: 125%;
    font-weight: 600;
    color: var(--brand-primary-color);
    margin-bottom: .25rem;
  }
  .panel-sub {
    font-size: 100%;
    color: #999;
    margin-bottom: 1.75rem;
  }

  .field-label {
    font-size: 90%;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .field-label span {
    font-size: 100%;
    font-weight: 500;
    color: var(--brand-primary-color);
    letter-spacing: 0;
    text-transform: none;
  }

  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: #e0e0e0;
    outline: none;
    cursor: pointer;
    margin-bottom: .25rem;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary-color);
    cursor: pointer;
    border: none;
  }
  input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary-color);
    cursor: pointer;
    border: none;
  }
  .range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 90%;
    color: #bbb;
    margin-bottom: 1.25rem;
  }

  .tog-group {
    display: flex;
    gap: 6px;
    margin-bottom: 1.25rem;
  }
  .tog {
    padding: 6px 16px;
    border-radius: 100px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 100%;
    color: #666;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
  }
  .tog:hover { border-color: #999; color: var(--brand-primary-color); }
  .tog.on { background: var(--brand-primary-color); color: #fff; border-color: var(--brand-primary-color); }

  .divider { height: 1px; background: #f0f0f0; margin: 1.25rem 0; }

  .pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pcard {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all .15s;
    background: #fff;
  }
  .pcard:hover { border-color: #bbb; }
  .pcard.selected { border: 2px solid var(--brand-primary-color); background: #fafafa; }
  .pcard-kwp { font-size: 115%; font-weight: 500; color: var(--brand-primary-color); }
  .pcard-sub { font-size: 90%; color: #aaa; margin-top: 2px; }

  /* RIGHT PANEL */
  .right {
    background: var(--brand-primary-color);
    padding: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
  }

  .saving-label {
    font-size: 90%;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: .4rem;
  }
  .saving-val {
    font-size: 52px;
    font-weight: 700;
    color: var(--brand-accent-color);
    line-height: 1;
    margin-bottom: .2rem;
  }
  .saving-sub {
    font-size: 100%;
    color: #ffffff;
    margin-bottom: 1.25rem;
  }

  .stats {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--brand-primary-color);
    margin-bottom: 1.25rem;
  }
  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--brand-primary-color);
    font-size: 100%;
  }
  .stat-l { color: #ffffff; }
  .stat-r { font-weight: 500; color: #fff; }
  .stat-r.accent { color: var(--brand-accent-color); }

  .bar-section { margin-bottom: 1.25rem; }
  .bar-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 90%;
    color: #ffffff;
    margin-bottom: 5px;
  }
  .bar-track {
    height: 8px;
    border-radius: 100px;
    background: var(--brand-primary-color);
    display: flex;
    overflow: hidden;
  }
  .bar-seg { height: 100%; transition: width .4s; }
  .bar-legend {
    display: flex;
    gap: 12px;
    margin-top: 7px;
    flex-wrap: wrap;
  }
  .leg { display: flex; align-items: center; gap: 5px; font-size: 90%; color: #ffffff; }
  .leg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  .envi-block {
    background: var(--brand-primary-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 1.25rem;
  }
  .envi-title {
    font-size: 90%;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 8px;
  }
  .envi-row {
    display: flex;
    justify-content: space-between;
    font-size: 100%;
    padding: 4px 0;
    border-bottom: 1px solid var(--brand-primary-color);
  }
  .envi-row:last-child { border-bottom: none; }
  .envi-l { color: #ffffff; }
  .envi-r { font-weight: 500; color: #fff; }
  .envi-r.save { color: var(--brand-accent-color); }

  .amort-block {
    background: var(--brand-primary-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 1.5rem;
    margin-top: auto;
  }
  .amort-label {
    font-size: 90%;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: .4rem;
  }
  .amort-val {
    font-size: 26px;
    font-weight: 600;
    color: var(--brand-accent-color);
  }

  /* LEAD FORM */
  .lead-section {
    border-top: 1px solid var(--brand-primary-color);
    padding-top: 1.25rem;
    margin-top: auto;
  }
  .lead-label {
    font-size: 90%;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: .85rem;
  }
  .lead-input {
    width: 100%;
    background: var(--brand-primary-color);
    border: 1px solid var(--brand-primary-color);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 100%;
    color: #fff;
    font-family: inherit;
    outline: none;
    margin-bottom: 8px;
    transition: border-color .15s;
  }
  .lead-input::placeholder { color: #4d6080; }
  .lead-input:focus { border-color: var(--brand-accent-color); }
  .lead-btn {
    width: 100%;
    background: var(--brand-accent-color);
    color: var(--brand-primary-color);
    border: none;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    margin-top: 2px;
  }
  .lead-btn:hover { background: var(--brand-accent-color); }

  .disc {
    font-size: 90%;
    color: #ffffff;
    line-height: 1.6;
    margin-top: 1rem;
    opacity:0.6;
  }






.rechner-inputs{padding:44px;border-right:1px solid var(--off2);}
.r-title{font-size:125%;font-weight:600;color:var(--brand-primary-color);margin-bottom:6px;}
.r-sub{font-size:100%;color:#999;margin-bottom:32px;line-height:1.6;}
.field-group{margin-bottom:26px;}
.field-label{font-size:100%;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#aaa;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.field-label span{font-size:100%;font-weight:600;color:var(--brand-primary-color);letter-spacing:0;text-transform:none;}
.toggle-row{display:flex;gap:8px;flex-wrap:wrap;}
.tog{padding:9px 18px;border-radius:100px;border:1.5px solid var(--off2);background:var(--white);font-size:100%;font-weight:700;color:#aaa;cursor:pointer;transition:.2s;font-family:'Lato',sans-serif;}
.tog:hover{border-color:var(--brand-primary-color);color:var(--brand-primary-color);}
.tog.active{background:var(--brand-primary-color);color:var(--white);border-color:var(--brand-primary-color);}
/* input[type=range]{width:100%;-webkit-appearance:none;height:5px;border-radius:100px;background:var(--off2);outline:none;cursor:pointer;} */
/* input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brand-primary-color);box-shadow:0 2px 8px rgba(47,71,92,.3);cursor:pointer;} */
.range-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:90%;color:#aaa;}
.price-input-wrap{display:flex;align-items:center;gap:0;border:1.5px solid var(--off2);border-radius:10px;overflow:hidden;background:var(--white);transition:border-color .2s;}
.price-input-wrap:focus-within{border-color:var(--brand-primary-color);}
.price-input{flex:1;border:none;outline:none;padding:11px 14px;font-size:115%;font-weight:700;color:var(--brand-primary-color);font-family:'Lato',sans-serif;background:transparent;}
.price-input::-webkit-outer-spin-button,.price-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.price-unit{padding:0 16px;font-size:100%;font-weight:700;color:#aaa;background:var(--off);align-self:stretch;display:flex;align-items:center;border-left:1.5px solid var(--off2);}
.price-hint{font-size:90%;color:#aaa;margin-top:6px;line-height:1.5;}
.rechner-result{padding:44px;background:var(--brand-primary-color);display:flex;flex-direction:column;justify-content:space-between;}
.res-label{font-size:90%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgb(255,255,255);margin-bottom:6px;}
.res-saving{font-size:clamp(42px,4vw,60px);font-weight:600;color:var(--brand-accent-color);letter-spacing:-.04em;line-height:1;margin-bottom:4px;}
.res-saving-sub{font-size:100%;color:rgb(255,255,255);margin-bottom:20px;}
.res-context{background:rgba(164,198,20,.06);border:1px solid rgba(164,198,20,.15);border-radius:10px;padding:12px 16px;margin-bottom:16px;}
.res-context-label{font-size:85%;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgb(255,255,255);margin-bottom:5px;}
.res-context-val{font-size:100%;color:rgb(255,255,255);line-height:1.5;}
.res-context-val strong{color:var(--brand-accent-color);font-weight:600;}
.res-breakdown{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.res-row{display:flex;justify-content:space-between;align-items:center;}
.res-row-label{font-size:100%;color:rgb(255,255,255);}
.res-row-val{font-size:115%;font-weight:700;color:var(--white);}
.res-row-val.green{color:var(--brand-accent-color);}
.res-divider{height:1px;background:rgba(255,255,255,.08);}
.res-amort{background:rgba(164,198,20,.1);border:1px solid rgba(164,198,20,.25);border-radius:12px;padding:14px 18px;margin-bottom:24px;}
.res-amort-label{font-size:90%;color:rgb(255,255,255);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
.res-amort-val{font-size:125%;font-weight:600;color:var(--brand-accent-color);}
.res-amort-note{font-size:90%;color:rgb(255,255,255);margin-top:2px;}
.rechner-disclaimer{font-size:90%;color:rgba(255,255,255,.4);margin-top:20px;line-height:1.5;text-align:center;}

  @media (max-width: 620px) {
    .card { grid-template-columns: 1fr; }
    .pkg-grid { grid-template-columns: repeat(1, 1fr); }
    .saving-val { font-size: 40px; }
  }



/* Responsive */
@media (max-width: 1480px) {

  .hero-title{font-size:3.5rem;}
  .konzept-card-topline{font-size:80%;}
  .rechnerwrapper{max-width:100%;}

}

@media (max-width: 1199px) {
  .hero-title{font-size:3rem;}
}

@media(max-width: 991px){
  .rechnerwrapper{display:block;margin-bottom:1.5rem;}
}

@media(max-width:575px){
  .rechner-result{
    padding:20px;
  }
  .rechner-inputs{
    padding:20px;
  }
  .left,
  .right{
    padding:1rem;
  }
  #sparrechner{
    margin-bottom:1.5rem;
  }
}