/* Thuisbatterijscan: stijl van de scan, alles onder .tbs zodat hij op de homepage en op de losse
   pagina hetzelfde oogt en niets van de omliggende pagina overneemt of overschrijft.
   Leunt op de tokens uit dysun.css. Goud is het enige signaal: de gekozen tegel, de voortgang en
   de hoofdknop. Antwoorden zijn tegels met een lijnicoon (CSS-masker op data-q/data-i, geen
   bestanden); het resultaat komt op met een korte beweging en de bedragen tellen op.
   Hoort bij assets/js/thuisbatterijscan.js. */

.tbs { max-width: 720px; margin: 0 auto; text-align: left; width: 100%; scroll-margin-top: 96px; /* onder de vaste navigatie */ }
.tbs [hidden] { display: none !important; }

/* Afteller: dezelfde chip als op de homepage. */
.tbs-urgent { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 8px 16px;
              background: var(--c-yellow-dim); border: 1px solid var(--c-border-yellow); border-radius: var(--r-full); font-size: 13px; color: var(--c-text-soft); }
.tbs-urgent strong { color: var(--c-gold-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.tbs-urgent a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-border-yellow); text-underline-offset: 3px; }
.tbs-urgent a:hover { color: var(--c-gold-text); opacity: 1; }
.tbs-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); flex-shrink: 0; animation: tbsPulse 1.6s ease-in-out infinite; }
@keyframes tbsPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 var(--c-yellow-glow); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(253,197,0,0); } }

.tbs-title { font-size: clamp(26px, 5vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; }
.tbs-sub { color: var(--c-text-soft); font-size: 16px; line-height: 1.55; margin: 0 0 24px; }

/* Voortgang: vijf segmenten in plaats van één lijn. */
.tbs-progress { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--c-text-muted); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.tbs-bar { height: 6px; border-radius: var(--r-full); background: var(--c-surface-3); overflow: hidden; margin-bottom: 26px; position: relative; }
.tbs-bar > i { display: block; height: 100%; width: 0; background: var(--c-yellow); border-radius: var(--r-full); transition: width .35s cubic-bezier(.2,.7,.2,1); }

.tbs-q { font-size: clamp(22px, 4vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; }
.tbs-hint { color: var(--c-text-soft); font-size: 15px; margin: 0 0 20px; line-height: 1.5; }

/* Tegels */
.tbs-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tbs-opt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 100%; min-height: 136px; text-align: left;
           font: inherit; color: var(--c-text); cursor: pointer; background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
           border-radius: var(--r-lg); padding: 50px 16px 16px; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.tbs-opt::before { content: ""; position: absolute; top: 16px; left: 16px; width: 26px; height: 26px; background: var(--c-text-soft);
                   -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: background .15s; }
.tbs-opt:hover, .tbs-opt:focus-visible { border-color: var(--c-border-yellow); background: var(--c-surface-3); transform: translateY(-2px); box-shadow: var(--shadow-yellow); }
.tbs-opt:hover::before, .tbs-opt:focus-visible::before { background: var(--c-gold-text); }
.tbs-opt:active { transform: translateY(0); }
.tbs-opt:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 2px; }
.tbs-opt strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.tbs-opt span { display: block; color: var(--c-text-soft); font-size: 13px; line-height: 1.4; }

/* Iconen per vraag en volgnummer (lijnen, 24-raster, kleur komt uit het masker). */
.tbs-opt[data-q="zon"][data-i="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4'/></svg>"); }
.tbs-opt[data-q="zon"][data-i="1"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h18M6.5 14a5.5 5.5 0 0 1 11 0M12 4v3M5 8l1.5 1.5M19 8l-1.5 1.5M9 20h6'/></svg>"); }
.tbs-opt[data-q="zon"][data-i="2"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18h10a4 4 0 0 0 .6-8A6 6 0 0 0 6 11.6 3.3 3.3 0 0 0 7 18z'/></svg>"); }
.tbs-opt[data-q="panelen"][data-i="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='7' width='12' height='9' rx='1'/><path d='M12 7v9M9 16l-1 3M15 16l1 3'/></svg>"); }
.tbs-opt[data-q="panelen"][data-i="1"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='16' height='9' rx='1'/><path d='M9.3 7v9M14.7 7v9M4 11.5h16M8 16l-1 3M16 16l1 3'/></svg>"); }
.tbs-opt[data-q="panelen"][data-i="2"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='19' height='9' rx='1'/><path d='M7.25 7v9M12 7v9M16.75 7v9M2.5 11.5h19M7 16l-1 3M17 16l1 3'/></svg>"); }
.tbs-opt[data-q="panelen"][data-i="3"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='12' rx='1'/><path d='M7 5v12M12 5v12M17 5v12M2 9h20M2 13h20M7 17l-1 3M17 17l1 3'/></svg>"); }
.tbs-opt[data-q="verbruik"][data-i="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.3'/><path d='M6 20a6 6 0 0 1 12 0'/></svg>"); }
.tbs-opt[data-q="verbruik"][data-i="1"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M3 20a6 6 0 0 1 12 0M15.5 5.3a3 3 0 0 1 0 5.4M17 14.2a5.2 5.2 0 0 1 4 5.8'/></svg>"); }
.tbs-opt[data-q="verbruik"][data-i="2"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11l8-7 8 7v9H4z'/><path d='M12.8 10.5l-2.3 4.2h3l-2.3 4.3'/></svg>"); }
.tbs-opt[data-q="verbruik"][data-i="3"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 15l2-5.5h14L21 15v4H3z'/><circle cx='7' cy='17' r='1.3'/><circle cx='17' cy='17' r='1.3'/><path d='M12 3v3M10 6h4'/></svg>"); }
.tbs-opt[data-q="fase"][data-i="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='4' width='6' height='16' rx='1.5'/><path d='M12 8v4'/></svg>"); }
.tbs-opt[data-q="fase"][data-i="1"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='5' height='16' rx='1.2'/><rect x='9.5' y='4' width='5' height='16' rx='1.2'/><rect x='16.5' y='4' width='5' height='16' rx='1.2'/><path d='M5 8v3M12 8v3M19 8v3'/></svg>"); }
.tbs-opt[data-q="contract"][data-i="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l4-6 4 4 4-8 6 7'/><path d='M3 20h18'/></svg>"); }
.tbs-opt[data-q="contract"][data-i="1"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18M6 9v6M18 9v6'/><path d='M3 20h18'/></svg>"); }
/* "Weet ik niet" is overal het laatste vakje. */
.tbs-opt[data-q="panelen"][data-i="4"], .tbs-opt[data-q="verbruik"][data-i="4"], .tbs-opt[data-q="fase"][data-i="2"], .tbs-opt[data-q="contract"][data-i="2"] {
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.4 9.6a2.7 2.7 0 1 1 3.8 2.5c-.8.4-1.2 1-1.2 1.9M12 17.2h.01'/></svg>"); }

.tbs-back { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0 4px; margin-top: 14px; color: var(--c-text-soft);
            font: inherit; font-size: 14px; cursor: pointer; border-radius: var(--r-sm); }
.tbs-back:hover { color: var(--c-text); }
.tbs-back:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 2px; }

/* Resultaat: komt op met een korte beweging; de tweede kaart iets later. */
[data-r="p-result"] .tbs-card { animation: tbsRise .5s cubic-bezier(.2,.7,.2,1) both; }
[data-r="p-result"] .tbs-card + .tbs-card { animation-delay: .12s; }
@keyframes tbsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tbs-card { background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-xl); padding: 26px; margin-bottom: 14px; }
.tbs-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
.tbs-big { font-size: clamp(36px, 8.5vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 10px 0 8px; color: var(--c-text);
           font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tbs-note { color: var(--c-text-soft); font-size: 14px; line-height: 1.5; }
.tbs-note--pb { margin-top: 12px; }
.tbs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; border-top: 1px solid var(--c-border-strong); }
.tbs-mini { padding: 16px 0 4px; background: none; border: 0; border-radius: 0; }
.tbs-mini + .tbs-mini { padding-left: 20px; border-left: 1px solid var(--c-border-strong); }
.tbs-mini b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tbs-why { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--c-text-soft); }
.tbs-why li { padding-left: 18px; position: relative; }
.tbs-why li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--c-gold-text); }

/* Formulier */
.tbs-lead h3 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 6px; }
.tbs-lead p { color: var(--c-text-soft); font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.tbs-lead ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px; }
.tbs-lead ul li { padding-left: 22px; position: relative; }
.tbs-lead ul li::before { content: ""; position: absolute; left: 1px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--c-success-text);
                          border-bottom: 2px solid var(--c-success-text); transform: rotate(-45deg); }
.tbs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tbs-f { display: flex; flex-direction: column; margin-bottom: 10px; }
.tbs-f label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--c-text-soft); }
.tbs-f input[type=text], .tbs-f input[type=email], .tbs-f input[type=tel] {
  font: inherit; color: var(--c-text); background: var(--c-surface-3); border: 1px solid var(--c-border-strong); border-radius: var(--r);
  padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.tbs-f input:focus-visible { outline: none; border-color: var(--c-yellow); box-shadow: 0 0 0 3px var(--c-yellow-dim); }
.tbs-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--c-text-soft); line-height: 1.5; margin: 6px 0 16px; min-height: 44px; }
.tbs-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-yellow); flex-shrink: 0; }
.tbs-check input:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 2px; }
.tbs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tbs-cta { width: 100%; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; border: 0; border-radius: var(--r); background: var(--c-yellow); color: #0A0A0A;
           padding: 15px 18px; min-height: 54px; transition: background .15s, transform .15s, box-shadow .15s; }
.tbs-cta:hover { background: var(--c-yellow-hover); transform: translateY(-1px); box-shadow: var(--shadow-yellow); }
.tbs-cta:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.tbs-cta:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.tbs-err { margin-top: 12px; padding: 12px 14px; background: var(--c-danger-dim); border: 1px solid rgba(239,68,68,.3); border-radius: var(--r); color: var(--c-danger-text); font-size: 14px; line-height: 1.5; }
.tbs-ok { padding: 18px; background: var(--c-success-dim); border-radius: var(--r); color: var(--c-text); line-height: 1.55; }
.tbs-fine { color: var(--c-text-muted); font-size: 12.5px; line-height: 1.55; margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .tbs-bar > i, .tbs-opt, .tbs-opt::before, .tbs-cta, .tbs-f input { transition: none; }
  .tbs-pulse { animation: none; }
  [data-r="p-result"] .tbs-card { animation: none; }
  .tbs-opt:hover, .tbs-opt:focus-visible, .tbs-cta:hover { transform: none; }
}
@media (max-width: 480px) {
  .tbs-row { grid-template-columns: 1fr; gap: 0; }
  .tbs-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tbs-opt:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 100px; }
  .tbs-opt { min-height: 124px; padding: 46px 14px 14px; }
  .tbs-opt::before { top: 14px; left: 14px; width: 24px; height: 24px; }
  .tbs-grid { grid-template-columns: 1fr; }
  .tbs-mini + .tbs-mini { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-border-strong); margin-top: 8px; }
}

/* Telt het bedrag op: de echte tekst blijft voor schermlezers staan, het getal dat beweegt is verborgen voor ze. */
.tbs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Uitlijning: alles gecentreerd, zoals de kop van de homepage erboven. Formulierveldjes en de
   lijstjes met uitleg blijven links leesbaar binnen hun blok. */
.tbs { text-align: center; }
.tbs-sub, .tbs-hint { max-width: 520px; margin-left: auto; margin-right: auto; }
[data-r="start"] { display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.tbs-opt { align-items: center; text-align: center; padding-top: 58px; }
.tbs-opt::before { left: 50%; transform: translateX(-50%); }
.tbs-back { display: flex; justify-content: center; width: fit-content; margin: 14px auto 0; }
.tbs-card { text-align: center; }
.tbs-why { justify-items: center; }
.tbs-why li { padding-left: 0; }
.tbs-why li::before { display: none; }
.tbs-lead ul { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
.tbs-f, .tbs-check, .tbs-err, .tbs-ok { text-align: left; }
.tbs-fine { text-align: center; }
/* Tegels: drie per rij, een onvolledige laatste rij staat in het midden. */
.tbs-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tbs-opt { width: auto; flex: 0 1 calc((100% - 20px) / 3); }
@media (max-width: 480px) {
  .tbs-opts { gap: 8px; }
  .tbs-opt { padding-top: 54px; flex-basis: calc((100% - 8px) / 2); }
  .tbs-opt:last-child:nth-child(odd) { flex-basis: 100%; }
}