/* Huisstijl gelijk aan heatuup.com: Instrument Sans (koppen), Inter Tight (tekst), JetBrains Mono (labels),
   warm beige, terracotta als accent. De groene actieknop en de bosgroene secties blijven (conversie). */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/inter-tight.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono.woff2) format('woff2'); }

:root {
  --inkt: #292019;
  --grijs: #6e6053;
  --rand: #d9d0c0;
  --creme: #e8e0d0;
  --papier: #efe9dc;
  --wit: #f7f4ee;
  --accent: #9f472a;  /* terracotta van heatuup.com (#ba5636), iets dieper voor leesbare kleine tekst */
  --accent-2: #d9774f;
  --actie: #00b67a;
  --actie-2: #009a68;
  --bos: #10261f;
  --bos-2: #1a3a30;
  --groen: #00b67a;
  --kop: 'Instrument Sans', system-ui, sans-serif;
  --tekst: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --breed: 1200px;
  --rond: 10px;
  --schaduw: 0 24px 60px -36px rgba(41, 32, 25, .4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 1.0625rem/1.65 var(--tekst); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--kop); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .45em; font-weight: 600; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
.binnen { width: min(var(--breed), 100% - 32px); margin-inline: auto; }
.smal { width: min(760px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--wit); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 30; background: rgba(239, 233, 220, .88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(41, 32, 25, .07); }
.kop .binnen { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.merk svg { width: 30px; height: 30px; flex: none; }
.merk span { font: 700 1.45rem/1 var(--kop); letter-spacing: -.04em; }
.merk small { display: block; font: 500 .7rem/1.2 var(--tekst); letter-spacing: .01em; color: var(--grijs); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { white-space: nowrap; text-decoration: none; padding: 10px 13px; border-radius: 999px; font-weight: 500; font-size: .96rem; color: #3b3632; }
.nav a:hover, .nav a[aria-current] { color: var(--inkt); background: rgba(41, 32, 25, .05); }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; font: 700 1rem/1 var(--tekst); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.knop.vol { background: var(--inkt); color: var(--wit); }
.knop.vol:hover { background: #3a2e25; transform: translateY(-1px); }
a.knop.vol:is([href="/gratis-proberen/"], [href="/free-trial/"]), .formulier .knop.vol, .oproep a.knop.vol:is([href="/gratis-proberen/"], [href="/free-trial/"]), .artikel-oproep a.knop.vol { background: var(--actie); color: var(--wit); animation: gloei 2.4s ease-in-out infinite; }
a.knop.vol:is([href="/gratis-proberen/"], [href="/free-trial/"]):hover, .formulier .knop.vol:hover, .artikel-oproep a.knop.vol:hover { background: var(--actie-2); }
@keyframes gloei { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 182, 122, .45), 0 8px 26px -6px rgba(0, 182, 122, .6); } 50% { box-shadow: 0 0 0 8px rgba(0, 182, 122, 0), 0 10px 34px -4px rgba(0, 182, 122, .85); } }
@media (prefers-reduced-motion: reduce) { a.knop.vol:is([href="/gratis-proberen/"], [href="/free-trial/"]), .formulier .knop.vol, .artikel-oproep a.knop.vol { animation: none; } }
.knop.vol::after { content: '\2192'; transition: transform .15s; }
.knop.vol:hover::after { transform: translateX(3px); }
.knop.rand { border: 1.5px solid rgba(41, 32, 25, .22); color: var(--inkt); background: transparent; }
.knop.rand:hover { border-color: var(--inkt); }
.kop .knop { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.menu-knop { display: none; }
.nav .knop { display: none; }

@media (max-width: 1300px) {
  .nav { display: none; }
  .menu-knop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--rand); background: var(--wit); color: inherit; cursor: pointer; }
  .menu-knop svg { width: 22px; height: 22px; }
  .kop .knop { display: none; }
  .kop.open .nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); padding: 8px 16px 18px; border-bottom: 1px solid var(--rand); box-shadow: var(--schaduw); }
  .kop.open .nav a { padding: 14px 8px; font-size: 1.08rem; border-radius: 10px; }
  .kop.open .nav .knop { display: flex; margin-top: 10px; color: var(--wit); }
}

/* ---------- held ---------- */
.held { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); background: radial-gradient(ellipse 60% 70% at 85% 35%, rgba(186, 86, 54, .10), transparent 70%), radial-gradient(ellipse 40% 50% at 10% 90%, rgba(0, 182, 122, .05), transparent 70%); }
.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.held h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.held .ondertitel { margin: 14px 0 20px; font: 600 clamp(1.25rem, 2.4vw, 1.75rem)/1.25 var(--kop); letter-spacing: -.02em; color: var(--bos); }
.held .lead { max-width: 540px; font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: #4a443f; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.held-prijs { margin: 14px 0 0; font-size: .92rem; color: var(--grijs); }
#rekenhulp { scroll-margin-top: 90px; }
.label { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--wit); border: 1px solid var(--rand); font: 500 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 24px; color: #3b3632; }
.label img { width: 24px; height: 24px; border-radius: 50%; }
.held-beeld { position: relative; width: 100%; max-width: 500px; justify-self: end; }
.held-beeld .foto { border-radius: var(--rond); overflow: hidden; aspect-ratio: 4 / 5; background: var(--creme); box-shadow: var(--schaduw); }
.held-beeld .foto img { width: 100%; height: 100%; object-fit: cover; }
.held-beeld.duo { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 901px) { .held-raster:has(.duo) { grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); } }
.held-beeld .kleurbalk { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 14px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); max-width: calc(100% - 24px); }
.held-beeld .kleurbalk .kleuren { margin: 0; flex-wrap: nowrap; }
.held-beeld .kleurbalk span { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.feiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--rand); }
.feiten div { padding: 22px 20px 0 0; }
.feiten strong { display: block; font: 600 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--kop); letter-spacing: -.03em; }
.feiten span { font-size: .92rem; color: var(--grijs); }
.feiten strong.warm { color: var(--accent); }
.feiten div { border-top: 3px solid transparent; margin-top: -2px; }
.feiten div:nth-child(2) { border-top-color: var(--accent); }
@media (max-width: 900px) {
  .held-raster { grid-template-columns: 1fr; }
  .held-beeld { justify-self: center; }
  .held-beeld .kleurbalk span { display: none; }
}
@media (max-width: 720px) { .feiten { grid-template-columns: 1fr 1fr; row-gap: 8px; } }
@media (max-width: 420px) { .held-beeld .kleurbalk { gap: 6px; padding: 8px 10px; } .held-beeld .kleurbalk .kleur { width: 22px; height: 22px; } .held-beeld .kleurbalk .kleuren { gap: 6px; } }

/* paginakop (subpagina's) */
.paginakop { padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--rand); background: linear-gradient(180deg, var(--creme), var(--papier)); }
.paginakop h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 18ch; }
.paginakop .lead { max-width: 640px; font-size: 1.15rem; color: #4a443f; margin: 0; }
.kruimel { font-size: .9rem; color: var(--grijs); margin-bottom: 16px; }
.kruimel a { text-decoration: none; display: inline-block; padding: 6px 0; }
.kruimel a:hover { color: var(--inkt); text-decoration: underline; }

/* ---------- secties ---------- */
.sectie { padding: clamp(64px, 9vw, 120px) 0; }
.sectie.creme { background: var(--creme); }
.boventitel { display: inline-block; font: 500 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.intro { max-width: 700px; margin-bottom: clamp(32px, 5vw, 56px); }
.intro p { font-size: 1.12rem; color: var(--grijs); }

.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: stap; list-style: none; padding: 0; margin: 0; }
.stappen li { counter-increment: stap; }
.stappen img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--rond); margin-bottom: 20px; }
.stappen h3::before { content: counter(stap, decimal-leading-zero); display: block; font: 500 .8rem/1 var(--mono); color: var(--accent); margin-bottom: 10px; letter-spacing: .08em; }
.stappen p { color: var(--grijs); margin: 0; }
@media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }

.modellen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.model { display: flex; flex-direction: column; position: relative; }
.model .foto { border-radius: var(--rond); aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 18px; background: var(--creme); }
.model .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform .5s; }
.model:hover .foto img { transform: scale(1.03); }
.model h3 { font-size: 1.6rem; margin-bottom: 4px; }
.model h3 a { text-decoration: none; }
.model h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.model p { color: var(--grijs); font-size: .98rem; margin-bottom: 12px; }
.model .prijs { margin-top: auto; font-size: .95rem; color: var(--grijs); }
.model .prijs strong { font: 600 1.3rem var(--kop); color: var(--inkt); }
.kleuren { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; position: relative; z-index: 2; }
.kleur { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--wit); box-shadow: 0 0 0 1px rgba(41, 32, 25, .15); cursor: pointer; padding: 0; flex: none; }
.kleur[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--inkt); }
.tag.warm { background: var(--accent); color: var(--wit); }
.tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(247, 244, 238, .94); color: var(--inkt); font: 500 .68rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; }
@media (max-width: 900px) { .modellen { grid-template-columns: 1fr; } }

.splits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.splits.om > :first-child { order: 2; }
.splits img.groot { border-radius: var(--rond); width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.splits img.groot.staand { aspect-ratio: 4 / 5; }
.splits img.breed { border-radius: var(--rond); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 860px) { .splits { grid-template-columns: 1fr; } .splits.om > :first-child { order: 0; } }

.vinken { list-style: none; padding: 0; margin: 0 0 1.6em; }
.vinken li { position: relative; padding: 7px 0 7px 34px; }
.vinken li::before { content: ''; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* fotostrook */
.strook { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.strook img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rond); }
.strook img:first-child { aspect-ratio: auto; }
.strook.twee { grid-template-columns: 1.5fr 1fr; }
.strook.twee img { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .strook.twee { grid-template-columns: 1fr; } .strook { grid-template-columns: 1fr 1fr; } .strook img:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; } }

/* vergelijking */
.tabel-wrap { overflow-x: auto; border-radius: var(--rond); border: 1px solid var(--rand); background: var(--wit); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--rand); vertical-align: top; font-size: .98rem; }
thead th { font-family: var(--kop); font-size: 1.05rem; background: var(--papier); }
tbody th { font-weight: 600; width: 34%; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
td.goed { color: #0a7a52; font-weight: 600; }

/* prijzen en rekenhulp */
.prijskaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.prijskaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 32px; }
.prijskaart .bedrag { font: 600 3rem/1 var(--kop); letter-spacing: -.03em; margin: 10px 0 6px; }
.prijskaart .bedrag small { font: 500 1rem var(--tekst); color: var(--grijs); letter-spacing: 0; }
.prijskaart ul { padding-left: 20px; margin: 18px 0 0; color: #4a443f; }
.prijskaart li { margin-bottom: 6px; }
@media (max-width: 760px) { .prijskaarten { grid-template-columns: 1fr; } }

.reken { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.reken label { display: block; font-weight: 600; margin-bottom: 10px; }
.reken input[type=range] { width: 100%; accent-color: var(--accent); height: 32px; }
.reken select { width: 100%; min-height: 50px; border-radius: 6px; border: 1.5px solid var(--rand); background: var(--papier); color: var(--inkt); padding: 0 14px; font: 500 16px var(--tekst); margin-bottom: 22px; }
.aantal { font: 600 2.8rem/1 var(--kop); letter-spacing: -.03em; }
.uitkomst { display: grid; gap: 12px; }
.uitkomst div { background: var(--papier); border: 1px solid var(--rand); border-radius: 8px; padding: 18px 22px; }
.uitkomst span { display: block; font-size: .9rem; color: var(--grijs); }
.uitkomst strong { font: 600 2.1rem/1.2 var(--kop); letter-spacing: -.03em; }
.uitkomst .klein, .reken .klein { font-size: .85rem; color: var(--grijs); margin: 4px 0 0; }
@media (max-width: 820px) { .reken { grid-template-columns: 1fr; } }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 30px; display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 22px; font-size: 1.1rem; line-height: 1.55; }
.review figcaption { margin-top: auto; font-size: .92rem; color: var(--grijs); }
.review figcaption strong { display: block; color: var(--inkt); font-size: 1rem; }
.sterren { color: #f5a524; letter-spacing: 2px; margin-bottom: 14px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* platforms */
.kaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 30px; position: relative; transition: transform .2s, box-shadow .2s; }
.kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw); }
.kaart h3 a { text-decoration: none; }
.kaart h3 a::after { content: ''; position: absolute; inset: 0; }
.kaart p { color: var(--grijs); margin: 0; }
.kaart .url { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--accent); }
.kaart.zon { background: linear-gradient(160deg, #fff4d4, var(--wit) 55%); }
.kaart.warm { background: linear-gradient(160deg, #ffe4d3, var(--wit) 55%); }
@media (max-width: 760px) { .kaarten { grid-template-columns: 1fr; } }

/* veelgestelde vragen */
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; min-height: 44px; font: 700 1.12rem var(--kop); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem/1 var(--tekst); color: var(--accent); flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--grijs); max-width: 720px; }

/* oproep */
.oproep { position: relative; overflow: hidden; border-radius: var(--rond); color: var(--wit); background: radial-gradient(ellipse at 90% 0%, rgba(186, 86, 54, .35), transparent 55%), var(--inkt); display: flex; align-items: center; isolation: isolate; }
.oproep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.oproep > div { padding: clamp(36px, 6vw, 72px); max-width: 720px; }
.oproep h2 { margin-bottom: 12px; }
.oproep p { opacity: .9; margin: 0; }
.oproep .knop.vol { background: var(--wit); color: var(--inkt); }
.oproep .knop.vol:hover { background: #f1ede7; }
.oproep .knop.rand { color: var(--wit); border-color: rgba(255, 255, 255, .5); }
.oproep .knop.rand:hover { border-color: var(--wit); }

/* formulier */
.formulier { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: clamp(24px, 4vw, 40px); box-shadow: var(--schaduw); }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.veld.heel { grid-column: 1 / -1; }
.veld label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.veld input, .veld select, .veld textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--rand); border-radius: 6px; padding: 12px 14px; font: 400 16px var(--tekst); color: var(--inkt); background: var(--papier); }
.veld textarea { min-height: 110px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 4px rgba(41, 32, 25, .08); }
.keuze { display: flex; gap: 10px; flex-wrap: wrap; }
.keuze label { flex: 1 1 200px; display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--rand); border-radius: 8px; padding: 14px 16px; cursor: pointer; font-weight: 500; background: var(--papier); }
.keuze label:has(input:checked) { border-color: var(--inkt); background: var(--wit); }
.keuze input { margin-top: 4px; accent-color: var(--inkt); width: 18px; height: 18px; }
.keuze strong { display: block; }
.keuze small { color: var(--grijs); }
.akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--grijs); }
.akkoord input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--inkt); flex: none; }
.fax { position: absolute; left: -9999px; }
.melding { border-radius: 8px; padding: 14px 16px; margin-top: 16px; display: none; }
.melding.fout { display: block; background: #fdecea; color: #8a1c12; }
.melding.goed { display: block; background: #e6f7f0; color: #075c3d; }
.formulier .knop { width: 100%; margin-top: 20px; min-height: 56px; font-size: 1.08rem; }
@media (max-width: 640px) { .velden { grid-template-columns: 1fr; } }

/* artikel */
.artikel { padding: clamp(48px, 7vw, 80px) 0; }
.artikel h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 1.6em; }
.artikel h3 { margin-top: 1.4em; }
.artikel p, .artikel li { font-size: 1.08rem; }
.artikel img { border-radius: var(--rond); margin: 28px 0; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.artikel .meta { color: var(--grijs); font-size: .95rem; }
.artikel a { color: var(--accent); }
.artikel ul, .artikel ol { padding-left: 22px; }
.bronnen { font-size: .92rem; color: var(--grijs); border-top: 1px solid var(--rand); margin-top: 40px; padding-top: 18px; }
.nieuwslijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nieuwsitem { position: relative; display: flex; flex-direction: column; }
.nieuwsitem img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--rond); margin-bottom: 16px; }
.nieuwsitem h2 a, .nieuwsitem h3 a { text-decoration: none; }
.nieuwsitem h2 a::after, .nieuwsitem h3 a::after { content: ''; position: absolute; inset: 0; }
.nieuwsitem p { color: var(--grijs); font-size: .97rem; margin: 0; }
.nieuwsitem time { font-size: .85rem; color: var(--grijs); display: block; margin-bottom: 8px; }
@media (max-width: 900px) { .nieuwslijst { grid-template-columns: 1fr; } }

/* productpagina */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.product .podium { border-radius: var(--rond); aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 92px; background: var(--creme); }
.product .podium img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.product dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.product dt { font-weight: 600; }
.product dd { margin: 0; color: var(--grijs); }
.product .kleur { width: 32px; height: 32px; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } .product .podium { position: relative; top: 0; } }

/* voet */
.voet { background: var(--creme); color: #4a443f; padding: 64px 0 32px; font-size: .95rem; border-top: 1px solid var(--rand); }
.voet-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.voet .merk { margin-bottom: 14px; color: var(--inkt); }
.voet .voet-kop { font: 500 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--inkt); margin: 6px 0 14px; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li a { text-decoration: none; display: inline-block; padding: 6px 0; }
.voet a:hover { color: var(--inkt); text-decoration: underline; }
.voet-onder { border-top: 1px solid var(--rand); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .86rem; color: var(--grijs); }
.partner { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 7px 14px 7px 7px; border: 1px solid var(--rand); background: var(--wit); border-radius: 999px; text-decoration: none; font-weight: 500; }
.partner img { width: 26px; height: 26px; border-radius: 50%; }
@media (max-width: 860px) { .voet-raster { grid-template-columns: 1fr 1fr; } .voet-raster > :first-child { grid-column: 1 / -1; } }

/* vaste knop mobiel */
.vast { display: none; }
@media (max-width: 760px) {
  .vast:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; gap: 10px; }
  .vast .knop { flex: 1; min-height: 52px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
  .vast .knop.bel { flex: 0 0 52px; padding: 0; background: var(--wit); color: var(--inkt); border: 1px solid var(--rand); }
  .vast .knop.bel svg { width: 22px; height: 22px; }
  body { padding-bottom: 84px; }
}
@media (max-width: 360px) { .vast .knop { white-space: nowrap; font-size: .94rem; padding: 0 16px; gap: 6px; } }

/* blog */
.blogmeta { display: block; font-size: .85rem; color: var(--grijs); margin-bottom: 8px; }
.nieuwsitem h2 { font-size: 1.3rem; }
.uitgelicht { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.uitgelicht img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rond); }
.uitgelicht h2 a { text-decoration: none; }
.uitgelicht p { color: var(--grijs); font-size: 1.08rem; }
@media (max-width: 860px) { .uitgelicht { grid-template-columns: 1fr; } }
.artikel .inhoudsopgave { background: var(--creme); border-radius: 8px; padding: 20px 24px; margin: 8px 0 32px; }
.inhoudsopgave p { font-weight: 700; margin: 0 0 8px; }
.inhoudsopgave ol { margin: 0; padding-left: 20px; }
.inhoudsopgave li { margin: 4px 0; font-size: 1rem; }
.inhoudsopgave a { color: var(--inkt); }
.artikeltekst h2 { scroll-margin-top: 90px; }
.artikeltekst table { width: 100%; min-width: 0; margin: 20px 0; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.artikeltekst th, .artikeltekst td { font-size: .95rem; padding: 12px 14px; }
.artikeltekst thead th { background: var(--creme); }
.artikel-oproep { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--inkt); color: var(--wit); border-radius: 8px; padding: 22px 26px; margin: 40px 0; }
.artikel-oproep p { margin: 4px 0 0; opacity: .8; font-size: 1rem; }
.artikel-oproep .knop.vol { background: var(--wit); color: var(--inkt); }
.auteur { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--rand); margin-top: 40px; padding-top: 24px; }
.auteur svg { width: 44px; height: 44px; flex: none; }
.auteur p { margin: 4px 0 0; font-size: .95rem; color: var(--grijs); }

/* bosgroen: premium ankerkleur */
.sectie.bos { background: radial-gradient(ellipse 50% 60% at 90% 0%, rgba(186, 86, 54, .18), transparent 70%), var(--bos); color: #f3efe7; }
.sectie.bos .intro p { color: rgba(243, 239, 231, .75); }
.sectie.bos .boventitel { color: var(--accent-2); }
.sectie.bos .review { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.sectie.bos .review figcaption { color: rgba(243, 239, 231, .7); }
.sectie.bos .review figcaption strong { color: var(--wit); }
.prijskaart.uitgelicht { background: var(--bos); color: #f3efe7; border-color: var(--bos); }
.prijskaart.uitgelicht .bedrag small, .prijskaart.uitgelicht ul { color: rgba(243, 239, 231, .75); }
.prijskaart.uitgelicht .boventitel { color: var(--accent-2); }
.oproep { background: radial-gradient(ellipse at 90% 0%, rgba(186, 86, 54, .38), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(0, 182, 122, .14), transparent 50%), var(--bos) !important; }
.artikel-oproep { background: var(--bos); }

/* rekenhulp uitgebreid */
.reken { align-items: start; }
.aantal-rij { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.aantal-rij input[type=range] { flex: 1; }
.aantal-rij input[type=number] { width: 96px; min-height: 48px; border: 1.5px solid var(--rand); border-radius: 6px; padding: 0 12px; font: 700 18px var(--tekst); text-align: center; background: var(--papier); }
.reken-extra { border-top: 1px solid var(--rand); padding: 4px 0; }
.reken-extra summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.reken-extra summary::-webkit-details-marker { display: none; }
.reken-extra summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; font-weight: 400; }
.reken-extra[open] summary::after { content: '\2212'; }
.reken-extra summary small { color: var(--grijs); font-weight: 400; margin-left: 6px; margin-right: auto; }
.velden-klein { display: grid; gap: 12px; padding-bottom: 12px; }
.velden-klein label { font-weight: 500; font-size: .95rem; margin: 0; display: grid; gap: 6px; }
.velden-klein input { width: 100%; min-height: 48px; border: 1.5px solid var(--rand); border-radius: 6px; padding: 0 14px; font: 500 16px var(--tekst); background: var(--papier); }
.invoer-euro, .invoer-procent { position: relative; display: block; }
.invoer-euro input { padding-left: 32px; }
.invoer-euro::before { content: '\20AC'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grijs); }
.invoer-procent input { padding-right: 34px; }
.invoer-procent::after { content: '%'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--grijs); }
.uitkomst-omzet { background: rgba(0, 182, 122, .08) !important; border-color: rgba(0, 182, 122, .35) !important; }
.uitkomst-omzet strong { color: #0a7a52; }
.uitkomst-besparing strong { color: var(--bos); }
.reken .klein { margin-top: 10px; }
.uitkomst-besparing { background: rgba(0, 182, 122, .08) !important; border-color: rgba(0, 182, 122, .35) !important; }
.uitkomst-besparing strong { color: #0a7a52; }
.uitkomst-besparing.negatief { background: var(--papier) !important; border-color: var(--rand) !important; }
.uitkomst .uitkomst-besparing.negatief strong { color: var(--inkt); font-size: 1.6rem; }


/* prijzenpagina compact */
.prijzen-compact { padding-top: 40px; }
.pk-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pk-raster.pk-twee { grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
.pk { display: flex; gap: 16px; align-items: center; background: var(--wit); border: 1px solid var(--rand); border-radius: 8px; padding: 12px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.pk:hover { border-color: var(--inkt); box-shadow: var(--schaduw); }
.pk img { width: 84px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 6px; flex: none; }
.pk-hw img { width: 120px; aspect-ratio: 3 / 2; }
.pk div { display: grid; gap: 2px; }
.pk-naam { font: 600 1.2rem var(--kop); letter-spacing: -.02em; }
.pk-prijs { font-size: .95rem; color: var(--grijs); }
.pk-prijs strong { font: 600 1.35rem var(--kop); color: var(--inkt); letter-spacing: -.02em; }
.pk-sub { font-size: .85rem; color: var(--grijs); }
.pk-inbegrepen { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: #3b3632; }
.pk-inbegrepen li { position: relative; padding-left: 22px; }
.pk-inbegrepen li::before { content: ''; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--actie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pk-voorwaarden { margin-top: 44px; border-top: 1px solid var(--rand); padding-top: 28px; }
.pk-voorwaarden h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pk-voorwaarden dl { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 10px 18px; margin: 0; font-size: .95rem; }
.pk-voorwaarden dt { font-weight: 700; }
.pk-voorwaarden dd { margin: 0; color: var(--grijs); }
@media (max-width: 960px) { .pk-raster { grid-template-columns: 1fr; } .pk-voorwaarden dl { grid-template-columns: auto 1fr; } }
@media (max-width: 640px) { .pk-raster.pk-twee { grid-template-columns: 1fr; } }

/* rekentool compact */
.reken { display: block !important; padding: clamp(18px, 2.5vw, 28px) !important; border-radius: var(--rond); }
.reken-rij { display: grid; grid-template-columns: 1fr 2fr; gap: 14px 18px; margin-bottom: 14px; }
.reken-opt { grid-template-columns: repeat(4, 1fr); padding-top: 14px; border-top: 1px solid var(--rand); }
.rv { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; color: #3b3632; margin: 0 !important; align-content: start; }
.rv small { font-weight: 400; color: var(--grijs); }
.reken .rv select, .reken .rv input[type=number] { width: 100%; min-height: 44px; margin: 0; border: 1.5px solid var(--rand); border-radius: 10px; padding: 0 12px; font: 500 16px var(--tekst); background: var(--papier); color: var(--inkt); }
.reken .aantal-rij { margin: 0; }
.reken .aantal-rij input[type=number] { width: 84px; flex: none; text-align: center; font-weight: 700; }
.reken .rv .invoer-euro input[type=number] { padding-left: 28px; }
.reken .rv .invoer-procent input[type=number] { padding-right: 30px; }
.reken .invoer-euro::before { left: 12px; }
.reken .uitkomst { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.reken .uitkomst div { padding: 12px 14px; border-radius: 8px; }
.reken .uitkomst span { font-size: .8rem; }
.reken .uitkomst strong { font-size: 1.55rem; line-height: 1.2; }
.reken .uitkomst .klein { font-size: .76rem; line-height: 1.4; margin-top: 4px; }
.reken .uitkomst-besparing.negatief strong { font-size: 1.3rem; }
.reken-noot { margin: 10px 0 0 !important; font-size: .78rem !important; color: var(--grijs); }
@media (max-width: 860px) { .reken-rij { grid-template-columns: 1fr; } .reken-opt { grid-template-columns: 1fr 1fr; } }

/* mobiel: tikvlakken en tabellen */
.kleur { position: relative; }
.kleur::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.voet-onder a { display: inline-block; padding: 12px 0; }
.akkoord a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.reken input[type=range] { height: 44px; }
.artikeltekst table { table-layout: fixed; width: 100%; }
.artikeltekst th, .artikeltekst td { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) {
  .artikeltekst th, .artikeltekst td { padding: 9px 8px; font-size: .84rem; }
  .model .kleur { width: 28px; height: 28px; }
  .kleuren { gap: 10px; }
  .held-beeld .kleurbalk .kleur { width: 24px; height: 24px; }
}

/* nieuwsbrief */
.nb-blok { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; background: var(--creme); border: 1px solid var(--rand); border-radius: var(--rond); padding: clamp(22px, 4vw, 40px); }
.nb-blok h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.nb-blok p { color: var(--grijs); margin: 0; }
.nb-rij { display: flex; gap: 8px; }
.nb-rij input[type=email] { flex: 1; min-width: 0; min-height: 50px; border: 1.5px solid var(--rand); border-radius: 999px; padding: 0 18px; font: 400 16px var(--tekst); background: var(--wit); color: var(--inkt); }
.nb-knop { flex: none; background: var(--actie) !important; color: var(--wit) !important; }
.nb-knop:hover { background: var(--actie-2) !important; }
.nb-knop::after { content: none !important; }
.nb-akkoord { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--grijs); margin-top: 10px; }
.nb-akkoord input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--actie); }
.nb-akkoord a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.nb-voet { margin-top: 26px; }
.nb-voet p { font-size: .9rem; margin: 0 0 10px; }
.nb-voet .nb-rij input[type=email] { min-height: 46px; }
.nb-voet .nb-knop { min-height: 46px; padding: 0 18px; }
form[data-nieuwsbrief] .melding { margin-top: 10px; }
@media (max-width: 760px) { .nb-blok { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .nb-rij { flex-direction: column; } .nb-knop { width: 100%; } }

/* ---------- maatwerk ---------- */
.maatwerk .intro p { max-width: 760px; }
.maatwerk-punten { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.maatwerk-punten li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 22px 22px 20px; }
.maatwerk-punten strong { display: block; font: 700 1.18rem/1.25 var(--kop); letter-spacing: -.01em; margin-bottom: 6px; color: var(--wit); }
.maatwerk-punten span { color: rgba(243, 239, 231, .75); font-size: .97rem; }
.maatwerk .knoppen { margin-top: 30px; }
.maatwerk .knop.rand { color: var(--wit); border-color: rgba(255, 255, 255, .35); }
.maatwerk-stappen { list-style: none; counter-reset: stap; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.maatwerk-stappen li { counter-increment: stap; border-top: 2px solid var(--inkt); padding-top: 16px; }
.maatwerk-stappen li::before { content: counter(stap, decimal-leading-zero); display: block; font: 600 1.6rem/1 var(--kop); color: var(--accent); margin-bottom: 10px; }
.maatwerk-stappen strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.maatwerk-stappen span { color: var(--grijs); }
@media (max-width: 860px) { .maatwerk-punten, .maatwerk-stappen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .maatwerk-punten, .maatwerk-stappen { grid-template-columns: 1fr; } }
.maatwerk .knop.vol { background: var(--actie); color: var(--wit); }

/* Cookiebalk (alleen zichtbaar als er een Meta-pixel is ingesteld) */
.cookiebalk { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; background: var(--inkt); color: var(--wit);
  border-radius: 8px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cookiebalk p { margin: 0; flex: 1 1 300px; font-size: .95rem; line-height: 1.45; }
.cookiebalk a { color: inherit; text-decoration: underline; }
.cookiebalk .cookieknoppen { display: flex; gap: 10px; }
.cookiebalk .knop.rand { color: var(--wit); border-color: rgba(255,255,255,.5); }

/* Bijpassende stoelen op de home */
.stoelkaart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 20px; display: block; }
.pk-tekst { padding: 18px 20px; }
.stoel-vink { display: flex; gap: 8px; align-items: center; font-weight: 500; min-height: 44px; }
.stoel-vink input { width: 20px; height: 20px; accent-color: var(--accent); }
.stoel-vink { display: flex; gap: 8px; align-items: center; font-weight: 500; min-height: 44px; }
.stoel-vink input { width: 20px; height: 20px; }

/* blog zonder foto's (Andu, 21-10-2026) */
.nieuwsitem.blogtekst { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 24px; }
.uitgelicht.blogtekst { display: block; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: clamp(24px, 4vw, 40px); max-width: 860px; }

/* HeatUup-zegel naast het Jemtec-logo */
.merk-hu { display: inline-flex; align-items: center; padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(41, 32, 25, .18); }
.zegel { position: relative; display: block; width: 56px; height: 56px; flex: none; }
.zegel img { width: 100%; height: 100%; display: block; }
/* batterijpercentage in het zegel, loopt op met het scrollen (zoals heatuup.com) */
.merk .zegel-pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32%; height: 32%; border-radius: 50%;
  background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.label { padding: 7px 14px; }
@media (max-width: 760px) { .zegel { width: 50px; height: 50px; } .merk .zegel-pct { font-size: 10px; } }
@media (max-width: 360px) { .merk-hu { padding-left: 8px; } .zegel { width: 44px; height: 44px; } .merk .zegel-pct { font-size: 9px; } }

/* compactere ruimtes tussen blokken (Andu, 21-10-2026) */
.sectie { padding: clamp(40px, 5.5vw, 72px) 0; }
.intro { margin-bottom: clamp(20px, 3vw, 36px); }
.held { padding: clamp(28px, 4vw, 52px) 0 clamp(32px, 4.5vw, 56px); }
.feiten { margin-top: clamp(28px, 4vw, 44px); }
.paginakop { padding: clamp(32px, 5vw, 56px) 0 clamp(22px, 3vw, 32px); }
.artikel { padding: clamp(32px, 5vw, 56px) 0; }
.voet { padding-top: 48px; }

/* taalkiezer NL | EN rechtsboven */
.taal { display: inline-flex; align-items: center; gap: 4px; font: 500 .78rem/1 var(--mono); letter-spacing: .08em; margin-left: 4px; }
.taal a { text-decoration: none; color: var(--grijs); padding: 10px 6px; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.taal a:hover { color: var(--inkt); }
.taal a[aria-current] { color: var(--inkt); font-weight: 600; }
.taal span { color: var(--rand); }
@media (max-width: 1300px) { .taal { margin-left: auto; } .kop .menu-knop { margin-left: 4px; } }
.kop .knop, .merk small, .nav a { white-space: nowrap; }
.kop .binnen { gap: 14px; }
.nav a { padding: 10px 10px; }
@media (max-width: 1440px) and (min-width: 1301px) { .nav a { padding: 10px 7px; font-size: .92rem; } }