/* Thuisbatterij: pagina, rekenmodule en aanvraagformulier.
   Zelfde inkt, zelfde oranje en dezelfde rustige opbouw als de rest van de site. */

.tb { color: #14171f; }
.tb-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.tb-blok { padding: 3.5rem 1.25rem; }
.tb h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .6rem; letter-spacing: -.015em; }
.tb h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.tb-sub { color: #5a6270; max-width: 60ch; line-height: 1.6; margin: 0 0 1.6rem; }
.tb-noot { color: #5a6270; font-size: .95rem; line-height: 1.6; max-width: 68ch; margin: 1.4rem 0 0; }
.tb a { color: #ff6a1a; }
.tb a.tb-knop, .tb a.tb-knop:hover, .tb button.tb-knop { color: #fff; }

.tb-hero { background: linear-gradient(180deg, #14171f 0%, #1d2230 100%); color: #fff; padding: 4rem 0 3.5rem; }
.tb-hero .tb-wrap { padding: 0 1.25rem; }
.tb-label { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff8b4d; }
.tb-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; margin: .7rem 0 1.1rem; letter-spacing: -.02em; }
.tb-lead { color: #cfd4dd; font-size: 1.05rem; line-height: 1.65; max-width: 62ch; margin: 0 0 1rem; }
.tb-knoppen { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }

.tb-knop { display: inline-block; background: #ff6a1a; color: #fff; border: 0; border-radius: 999px; padding: .85rem 1.7rem; font-size: 1rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.tb-knop:hover { filter: brightness(.94); color: #fff; }
.tb-knop-licht { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); }
.tb-knop-klein { padding: .6rem 1.2rem; font-size: .92rem; margin-top: .9rem; }

.tb-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.tb-kaart { border: 1px solid #e2e5ea; border-radius: 14px; padding: 1.4rem 1.6rem; background: #fff; }
.tb-kaart ul { margin: 0; padding-left: 1.1rem; color: #3d4450; line-height: 1.65; }
.tb-kaart li { margin: .35rem 0; }

.tb-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1rem; }
.tb-pakket { position: relative; border: 1px solid #e2e5ea; border-radius: 14px; padding: 1.6rem; background: #fff; display: flex; flex-direction: column; }
.tb-pakket-accent { border-color: #ff6a1a; box-shadow: 0 8px 30px rgba(255, 106, 26, .12); }
.tb-tag { position: absolute; top: -.7rem; left: 1.5rem; background: #ff6a1a; color: #fff; border-radius: 999px; padding: .15rem .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tb-maat { color: #ff6a1a; font-weight: 700; font-size: .92rem; margin-bottom: .6rem; }
.tb-pakket p { color: #3d4450; line-height: 1.6; margin: 0 0 .8rem; }
.tb-pakket ul { margin: 0 0 1rem; padding-left: 1.1rem; color: #5a6270; font-size: .94rem; line-height: 1.6; }
.tb-prijs { margin-top: auto; font-weight: 700; font-size: 1.02rem; }

.tb-stappen { counter-reset: tb; list-style: none; margin: 0; padding: 0; max-width: 62rem; }
.tb-stappen li { counter-increment: tb; position: relative; padding: 0 0 1.1rem 3rem; color: #3d4450; line-height: 1.65; }
.tb-stappen li::before { content: counter(tb); position: absolute; left: 0; top: -.15rem; width: 2rem; height: 2rem; border-radius: 2rem; background: #eceff3; color: #14171f; font-weight: 700; font-size: .9rem; display: grid; place-items: center; }
.tb-stappen li:first-child::before { background: #ff6a1a; color: #fff; }

/* de rekenmodule */
.tb-rekenen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: end; background: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 14px; padding: 1.5rem; }
.tb-veld { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.tb-veld label { font-size: .9rem; color: #3d4450; font-weight: 600; }
.tb-veld input, .tb-veld select { padding: .75rem .9rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.tb-veld input:focus, .tb-veld select:focus { outline: 2px solid #ff6a1a; outline-offset: 1px; }
.tb-eenheid { position: absolute; right: .9rem; bottom: .8rem; color: #8a90a0; font-size: .85rem; pointer-events: none; }
.tb-rekenen .tb-knop { align-self: end; }
.tb-uitkomst { display: block; margin-top: 1.2rem; border: 1px solid #e2e5ea; border-left: 4px solid #ff6a1a; border-radius: 0 12px 12px 0; padding: 1.3rem 1.5rem; background: #fff; line-height: 1.65; }
.tb-uitkomst b { color: #14171f; }
.tb-uitkomst .tb-groot { font-size: 1.5rem; font-weight: 700; display: block; margin: .3rem 0 .5rem; }
.tb-uitkomst small { color: #5a6270; }

/* het formulier */
.tb-form { background: #fff; border: 1px solid #e2e5ea; border-radius: 14px; padding: 1.6rem; }
.tb-form fieldset { border: 0; border-top: 1px solid #eceff3; margin: 0 0 1.4rem; padding: 1.4rem 0 0; }
.tb-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.tb-form legend { font-weight: 700; font-size: 1.05rem; padding: 0 .6rem 0 0; }
.tb-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tb-rij-vol { grid-template-columns: 1fr; }
.tb-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; color: #3d4450; font-weight: 600; position: relative; }
.tb-form input[type=text], .tb-form input[type=email], .tb-form input[type=tel], .tb-form input[type=number], .tb-form select, .tb-form textarea, .tb-form input[type=file] { padding: .75rem .9rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; font-weight: 400; background: #fff; width: 100%; }
.tb-form textarea { resize: vertical; }
.tb-form input:focus, .tb-form select:focus, .tb-form textarea:focus { outline: 2px solid #ff6a1a; outline-offset: 1px; }
.tb-verplicht { color: #ff6a1a; margin-left: .15rem; }
.tb-vol { display: block; margin-bottom: 1rem; }
.tb-hint { display: block; font-weight: 400; color: #8a90a0; font-size: .85rem; margin-top: .3rem; }
.tb-vraag { font-size: .92rem; font-weight: 600; color: #3d4450; display: block; margin-bottom: .5rem; }
.tb-vinkjes { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.tb-vinkje { flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; background: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 999px; padding: .45rem .9rem; }
.tb-vinkje input { accent-color: #ff6a1a; }
.tb-akkoord { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; line-height: 1.5; }
.tb-akkoord input { accent-color: #ff6a1a; margin-top: .2rem; }
.tb-honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tb-verzend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tb-melding { font-size: .95rem; color: #5a6270; }
.tb-melding.tb-fout { color: #c0392b; }
.tb-melding.tb-goed { color: #137a3e; }

@media (max-width: 640px) {
  .tb-hero { padding: 2.8rem 0 2.4rem; }
  .tb-blok { padding: 2.5rem 1.25rem; }
  .tb-knoppen .tb-knop { width: 100%; text-align: center; }
}