/* ==========================================================
   Roomcility besparing
   Rekentool met twee balken, de uitkomst in tijd en een
   tabel per stap. Alles wordt opgebouwd in rc-besparing.js.
   ========================================================== */

.rc-bs{--rc-bs-bg:var(--rc-bg);--rc-bs-old:#B42318;--rc-bs-old-soft:#FBE3E1;background:var(--rc-bs-bg);color:var(--rc-ink)}
.rc-bs__wrap{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.rc-bs__hand{margin:0 0 8px;font-size:30px;color:var(--rc-ink-2);transform:rotate(-4deg)}
.rc-bs__title{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.rc-bs__lead{margin:20px 0 0;max-width:52ch;font-size:17px;line-height:1.65;color:var(--rc-ink-2)}

.rc-bs__intro{padding:120px 0 40px;text-align:center}
.rc-bs__intro .rc-bs__hand{font-size:32px}
.rc-bs__h1{margin:0 auto;max-width:15ch;font-size:clamp(40px,4.6vw,64px);line-height:1.03;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.rc-bs__intro .rc-bs__lead{margin:22px auto 0;font-size:17.5px}

/* rekentool */
.rc-bs__calc{margin-top:10px;padding:40px;border-radius:32px;background:#fff;box-shadow:var(--rc-shadow)}
.rc-bs__q{margin:0 0 16px;font-size:15px;font-weight:700;color:var(--rc-ink-2)}
.rc-bs__tiles{display:flex;flex-wrap:wrap;gap:10px}
.rc-bs__tile{position:relative;display:inline-flex;align-items:center;height:48px;padding:0 6px 0 0;border:1.5px solid #DCE4F2;border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:var(--rc-ink-2);transition:border-color .2s,background .2s,color .2s}
.rc-bs__tile .rc-bs__tg{display:inline-flex;align-items:center;gap:10px;height:100%;padding:0 10px 0 8px;border:0;border-radius:999px;background:none;font:inherit;color:inherit;cursor:pointer}
.rc-bs__tile.is-fixed .rc-bs__tg{cursor:default}
.rc-bs__inf{display:inline-grid;place-items:center;flex-shrink:0;width:24px;height:24px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;font:700 12px/1 Georgia,serif;font-style:italic;color:#9AA6BD;cursor:pointer;opacity:.85;transition:color .2s,background .2s}
.rc-bs__inf:hover,.rc-bs__inf[aria-expanded=true]{background:var(--rc-accent);border-color:var(--rc-accent);color:#fff;opacity:1}
.rc-bs__tile.is-on .rc-bs__inf{color:var(--rc-accent)}
.rc-bs__tile.is-on .rc-bs__inf:hover,.rc-bs__tile.is-on .rc-bs__inf[aria-expanded=true]{color:#fff}
.rc-bs__calc{position:relative}
.rc-bs__pop{position:absolute;z-index:5;width:320px;max-width:calc(100% - 32px);padding:16px 18px;border-radius:16px;background:var(--rc-ink);color:#fff;font-size:14px;line-height:1.55;box-shadow:0 20px 40px rgba(19,26,42,.25);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s}
.rc-bs__pop.is-open{opacity:1;transform:none;pointer-events:auto}
.rc-bs__pop b{display:block;margin-bottom:4px;font-size:14.5px}
.rc-bs__pop small{display:block;margin-top:8px;color:#9DBDF0;font-size:12.5px;font-weight:600}
.rc-bs__pop::before{content:"";position:absolute;left:var(--ax,30px);top:-6px;width:12px;height:12px;background:var(--rc-ink);transform:rotate(45deg);border-radius:2px}
.rc-bs__tile .rc-ic{--rc-ic-size:32px;border-radius:50%;background:#EEF2F8;color:var(--rc-ink-2);transition:background .2s,color .2s}
.rc-bs__tile small{font-size:12.5px;font-weight:600;color:#9AA6BD}
.rc-bs__tile.is-on{border-color:var(--rc-accent);background:var(--rc-accent-soft);color:var(--rc-ink)}
.rc-bs__tile.is-on .rc-ic{background:var(--rc-accent);color:#fff}
.rc-bs__tile.is-on small{color:var(--rc-accent)}

.rc-bs__race{margin-top:36px;display:flex;flex-direction:column;gap:22px}
.rc-bs__lane{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:18px}
.rc-bs__lane-l b{display:block;font-size:15px}
.rc-bs__lane-l span{font-size:13px;color:var(--rc-ink-2)}
.rc-bs__track{position:relative;height:46px;border-radius:12px;background:#F1F4F9;overflow:hidden}
.rc-bs__segs{position:absolute;inset:0;display:flex;gap:3px}
.rc-bs__seg{position:relative;display:block;padding:0 4px;line-height:46px;text-align:center;min-width:0;height:100%;border-radius:9px;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:width .6s var(--rc-ease),opacity .4s}
.rc-bs__lane--old .rc-bs__seg{background:var(--rc-bs-old-soft);color:var(--rc-bs-old)}
.rc-bs__lane--old .rc-bs__seg:nth-child(even){background:var(--rc-bs-old-soft);filter:brightness(.96)}
.rc-bs__lane--new .rc-bs__seg{background:linear-gradient(90deg,#3E9BE9,#1E5FC4);color:#fff}
.rc-bs__lane-t{font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:right}
.rc-bs__lane--old .rc-bs__lane-t{color:var(--rc-bs-old)}
.rc-bs__lane--new .rc-bs__lane-t{color:var(--rc-accent)}

.rc-bs__out{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;margin-top:40px;padding-top:36px;border-top:1px solid #EEF2F8}
.rc-bs__sl{display:flex;flex-direction:column;gap:26px}
.rc-bs__sl label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600}
.rc-bs__sl output{font-size:22px;font-weight:800;color:var(--rc-accent)}
.rc-bs__sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:14px 0 0;border-radius:9px;background:linear-gradient(90deg,var(--rc-accent) var(--p,30%),#E3E9F3 var(--p,30%));outline:none}
.rc-bs__sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--rc-accent);box-shadow:0 4px 12px rgba(21,103,206,.3);cursor:pointer}
.rc-bs__sl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--rc-accent);cursor:pointer}

.rc-bs__res{position:relative;display:grid;grid-template-columns:200px 1fr;gap:10px 28px;align-items:center;padding:28px 30px;border-radius:24px;background:linear-gradient(135deg,#3E9BE9,#1E5FC4 55%,#1B3E9C);color:#fff;overflow:hidden}
.rc-bs__res::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
.rc-bs__big{position:relative;grid-row:span 2;text-align:center;padding:4px 10px}
.rc-bs__num{position:relative;display:inline-block;padding:6px 26px}
.rc-bs__big b{display:block;font-size:64px;line-height:1;font-weight:800;letter-spacing:-.04em}
.rc-bs__lbl{display:block;margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.8)}
.rc-bs__num .rc-pen{position:absolute;left:-6px;top:-10px;width:calc(100% + 12px);height:calc(100% + 18px);--rc-pen:#fff;--rc-pen-width:2.4}
.rc-bs__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rc-bs__stats div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12)}
.rc-bs__stats b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.rc-bs__stats span{font-size:12.5px;color:rgba(255,255,255,.8)}
.rc-bs__foot{grid-column:2;margin:0;font-size:12px;color:rgba(255,255,255,.7)}

/* hoe we rekenen */
.rc-bs__how{padding:100px 0 110px}
.rc-bs__how-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.rc-bs__tbl{border-radius:22px;background:#fff;box-shadow:var(--rc-shadow);overflow:hidden}
.rc-bs__tr{display:grid;grid-template-columns:1fr 190px 70px 90px;gap:12px;align-items:center;padding:14px 22px;border-bottom:1px solid #F1F4F9;font-size:14.5px}
.rc-bs__tr:last-child{border-bottom:0}
.rc-bs__tr.is-head{background:#F6F8FC;font-size:12px;font-weight:700;color:#9AA6BD;letter-spacing:.04em}
.rc-bs__tr .rc-bs__tool{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--rc-bs-old-soft);color:var(--rc-bs-old);font-size:11.5px;font-weight:700}
.rc-bs__tr .o{color:var(--rc-bs-old);font-weight:700;text-align:right}
.rc-bs__tr .n{color:var(--rc-accent);font-weight:700;text-align:right}
.rc-bs__tr.is-head .o,.rc-bs__tr.is-head .n{color:#9AA6BD}
.rc-bs__tr.is-total{background:#F6F8FC;font-weight:800}
.rc-bs__tr .rc-bs__nm{display:flex;align-items:center;gap:10px}
.rc-bs__tr .rc-bs__tool{white-space:normal;line-height:1.3}
.rc-bs__tx{padding:0 22px 16px 56px;border-bottom:1px solid #F1F4F9;font-size:14px;line-height:1.55;color:var(--rc-ink-2);display:none}
.rc-bs__tx.is-open{display:block}
.rc-bs__tr.is-open-row{border-bottom:0}
.rc-bs__note{margin:22px 0 0;font-family:var(--rc-hand);font-size:24px;font-weight:600;color:var(--rc-pen);transform:rotate(-2deg);transform-origin:0 50%}

@media (max-width:1100px){
  .rc-bs__wrap{padding:0 20px}
  .rc-bs__intro{padding:84px 0 24px}
  .rc-bs__h1{font-size:38px}
  .rc-bs__intro .rc-bs__lead{font-size:16px}
  .rc-bs__calc{padding:24px 18px;border-radius:24px}
  .rc-bs__tile{height:44px;font-size:14px}
  .rc-bs__lane{grid-template-columns:1fr auto;gap:8px 12px}
  .rc-bs__lane-l{grid-column:1}
  .rc-bs__lane-t{grid-column:2;grid-row:1;font-size:19px}
  .rc-bs__track{grid-column:1/-1;height:38px}
  .rc-bs__seg{font-size:0;line-height:38px}
  .rc-bs__out{grid-template-columns:1fr}
  .rc-bs__how-in{grid-template-columns:1fr;gap:28px}
  .rc-bs__how{padding:70px 0 80px}
}
@media (max-width:700px){
  .rc-bs__tiles{gap:8px}
  .rc-bs__tile small{margin-left:auto}
  .rc-bs__res{grid-template-columns:1fr;padding:24px 20px;text-align:center}
  .rc-bs__big{grid-row:auto;margin:0 auto}
  .rc-bs__stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .rc-bs__stats div{padding:10px 8px}
  .rc-bs__stats b{font-size:17px}
  .rc-bs__foot{grid-column:1}
  .rc-bs__tr{grid-template-columns:1fr 56px 86px;gap:8px;padding:12px 16px;font-size:13.5px}
  .rc-bs__tx{padding:0 16px 14px 50px;font-size:13.5px}
  .rc-bs__tile{width:100%}
  .rc-bs__tile .rc-bs__tg{flex:1}
  .rc-bs__tr > :nth-child(2){display:none}
}
.rc-bs button{-webkit-tap-highlight-color:transparent}

/* Knoppen loskoppelen van de standaard knopstijl van het thema */
.rc-bs .rc-bs__tg,
.rc-bs .rc-bs__tg:hover,
.rc-bs .rc-bs__tg:focus { background: none; color: inherit; text-transform: none; letter-spacing: normal; }
.rc-bs .rc-bs__inf { border: 1.5px solid currentColor; padding: 0; background: none; color: #9AA6BD; }
.rc-bs .rc-bs__tile.is-on .rc-bs__inf { color: var(--rc-accent); }
.rc-bs .rc-bs__inf:hover,
.rc-bs .rc-bs__inf:focus-visible,
.rc-bs .rc-bs__inf[aria-expanded=true] { border-color: var(--rc-accent); background: var(--rc-accent); color: #fff; }
.rc-bs .rc-bs__tg:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }
.rc-bs .rc-bs__inf { width: 24px; height: 24px; border-radius: 50%; font: italic 700 12px/1 Georgia, serif; }
.rc-bs__tr.is-head { text-transform: uppercase; }
.rc-bs__pop { left: 16px; top: 0; visibility: hidden; }
.rc-bs__pop.is-open { visibility: visible; }