/* Total Lease — strak en modern. Logo-blauw + oranje punt als accent, veel lucht,
   zachte schaduwen in plaats van harde randen. */
:root {
  --blauw: #0b14a6;
  --navy: #0b1a5c;
  --oranje: #ff8a1f;
  --oranje-2: #f27400;
  --oranje-zacht: #fff3e8;
  --blauw-zacht: #eef0fd;
  --inkt: #0f1733;
  --tekst: #3d4562;
  --grijs: #6b7290;
  --lijn: #e7e9f2;
  --bg: #f6f7fb;
  --wit: #fff;
  --r: 16px;
  --r-s: 10px;
  --schaduw: 0 1px 2px rgba(15, 23, 51, .04), 0 8px 24px -8px rgba(15, 23, 51, .10);
  --schaduw-hover: 0 2px 4px rgba(15, 23, 51, .05), 0 18px 40px -12px rgba(15, 23, 51, .22);
  --max: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blauw); text-decoration: none; }
h1, h2, h3 { color: var(--inkt); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 800; }
h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 760px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; }
.lead { font-size: 18px; color: var(--grijs); max-width: 640px; }
.label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oranje-2); margin-bottom: 10px; }
.label-licht { color: var(--oranje); }

/* knoppen */
.knop, .knop-licht { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font: 700 15px/1 "Plus Jakarta Sans", sans-serif; padding: 15px 24px; cursor: pointer; border: 0; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.knop { background: var(--oranje); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 138, 31, .7); }
.knop:hover { background: var(--oranje-2); transform: translateY(-1px); color: #fff; }
.knop-licht { background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.knop-licht:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.knop-klein { padding: 11px 18px; font-size: 14px; }
.knop-blok { width: 100%; }
.knop .ic, .knop-licht .ic { width: 18px; height: 18px; }
.knop[disabled] { opacity: .6; cursor: wait; }
.tekstknop { background: none; border: 0; color: var(--blauw); font: 600 14px "Plus Jakarta Sans"; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.pijllink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--inkt); }
.pijllink:hover { color: var(--oranje-2); }
.pijllink .ic { width: 18px; height: 18px; transition: transform .15s; }
.pijllink:hover .ic { transform: translateX(3px); }

/* kop */
.kop { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--lijn); }
.kop-in { display: flex; align-items: center; gap: 36px; height: 72px; }
.logo img { height: 28px; width: auto; }
.hoofdmenu { display: flex; gap: 4px; flex: 1; }
.hoofdmenu a { color: var(--inkt); font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 999px; transition: background .15s; }
.hoofdmenu a:hover { background: var(--bg); }
.hoofdmenu a.actief { background: var(--blauw-zacht); color: var(--blauw); }
.kop-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icoonknop { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: var(--inkt); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icoonknop:hover { background: var(--bg); }
.menuknop { display: none; }
.zoekpaneel { border-top: 1px solid var(--lijn); background: var(--wit); }
.zoekpaneel .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.zoekpaneel .wrap > .ic { color: var(--grijs); }
.zoekpaneel input[type=search] { flex: 1; border: 0; outline: none; font: 500 17px "Plus Jakarta Sans"; color: var(--inkt); background: none; padding: 8px 0; }
.catbalk { border-top: 1px solid var(--lijn); }
.catbalk-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-top: 9px; padding-bottom: 9px; }
.catbalk-in::-webkit-scrollbar { display: none; }
.catbalk a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 999px; color: var(--tekst); font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .15s, color .15s; }
.catbalk a .ic { width: 19px; height: 19px; color: var(--grijs); }
.catbalk a:hover { background: var(--bg); color: var(--inkt); }
.catbalk a.actief { background: var(--navy); color: #fff; }
.catbalk a.actief .ic { color: var(--oranje); }

/* hero */
.hero { padding: 56px 0 0; background: radial-gradient(1000px 520px at 82% 20%, #edf0ff 0%, rgba(237, 240, 255, 0) 62%), var(--wit); }
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--blauw); margin-bottom: 18px; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; z-index: 0; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .18em; background: var(--oranje); opacity: .8; border-radius: 4px; z-index: -1; }
.hero .lead strong { color: var(--inkt); }
.vinkjes { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 11px; }
.vinkjes li { position: relative; padding-left: 34px; font-weight: 600; color: var(--inkt); }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: var(--oranje); }
.vinkjes li::after { content: ""; position: absolute; left: 8.5px; top: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-beeld img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(11, 26, 92, .12)); }
.zoekkaart { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 14px; align-items: end; background: var(--wit); border-radius: 20px; padding: 20px; box-shadow: 0 30px 60px -30px rgba(11, 26, 92, .35), 0 0 0 1px var(--lijn); transform: translateY(42px); margin-top: -10px; position: relative; z-index: 2; }
.zoekkaart .veld { margin: 0; }
.zoekkaart .knop { height: 50px; }

/* velden */
.veld { display: block; margin-bottom: 16px; }
.veld > span:first-child { display: block; font-size: 13px; font-weight: 700; color: var(--inkt); margin-bottom: 7px; }
input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea { width: 100%; font: 500 15px "Plus Jakarta Sans", sans-serif; color: var(--inkt); background: var(--bg); border: 1.5px solid transparent; border-radius: var(--r-s); padding: 13px 14px; outline: none; transition: border .15s, background .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--blauw); background: var(--wit); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230f1733' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }
.euro { position: relative; display: block; }
.euro::before { content: "€"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grijs); font-weight: 600; pointer-events: none; }
.euro input { padding-left: 32px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* secties */
.sectie { padding: 72px 0 0; }
.hero + .sectie { padding-top: 120px; }
.sectie-kop { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.sectie-kop h2 { margin: 0; }
.cattegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cattegel { display: flex; align-items: center; gap: 14px; background: var(--wit); border-radius: var(--r); padding: 18px; box-shadow: var(--schaduw); color: var(--inkt); transition: transform .2s, box-shadow .2s; }
.cattegel:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.cattegel-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--blauw-zacht); color: var(--blauw); display: flex; align-items: center; justify-content: center; flex: none; transition: background .2s, color .2s; }
.cattegel-ic .ic { width: 26px; height: 26px; }
.cattegel:hover .cattegel-ic { background: var(--blauw); color: #fff; }
.cattegel-t { flex: 1; min-width: 0; }
.cattegel strong { display: block; font-size: 16px; line-height: 1.25; }
.cattegel small { color: var(--grijs); font-size: 13.5px; }
.cattegel .pijl { color: var(--grijs); width: 18px; transition: transform .2s, color .2s; }
.cattegel:hover .pijl { transform: translateX(3px); color: var(--oranje); }

/* merkencarrousel */
.carrousel { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.carrousel + .carrousel { margin-top: 8px; }
/* De band beweegt alleen mee met scrollen (js/app.js, merkenCarrousel). */
.band { display: flex; gap: 12px; width: max-content; will-change: transform; }
.merklink { display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 22px 0 16px; background: var(--wit); border-radius: 14px; box-shadow: 0 0 0 1px var(--lijn); color: var(--inkt); font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: box-shadow .2s, transform .2s; }
.merklink img { height: 36px; width: 58px; object-fit: contain; }
.merklink:hover { box-shadow: 0 0 0 1.5px var(--blauw), var(--schaduw); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .carrousel { overflow-x: auto; } }

/* tabs en subcategorieën */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button, .subcats button { border: 0; background: var(--wit); box-shadow: inset 0 0 0 1.5px var(--lijn); color: var(--tekst); font: 600 14px "Plus Jakarta Sans"; padding: 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tabs button:hover, .subcats button:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); color: var(--inkt); }
.tabs button.actief, .subcats button.actief { background: var(--inkt); color: #fff; box-shadow: none; }
.subcats small { opacity: .6; margin-left: 5px; font-weight: 600; }

/* productkaarten */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.raster-4 { grid-template-columns: repeat(4, 1fr); }
.pkaart { display: flex; flex-direction: column; background: var(--wit); border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); color: inherit; transition: transform .2s, box-shadow .2s; }
.pkaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.pkaart-foto { position: relative; aspect-ratio: 4/3; background: #eef0f5; overflow: hidden; }
.pkaart-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pkaart:hover .pkaart-foto img { transform: scale(1.05); }
.pkaart-badge { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .95); color: var(--inkt); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.pkaart-badge.nieuw { background: var(--oranje); color: #fff; }
.pkaart-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.pkaart-merk { font-size: 12px; font-weight: 700; color: var(--grijs); text-transform: uppercase; letter-spacing: .05em; }
.pkaart-titel { font-weight: 700; color: var(--inkt); font-size: 16px; line-height: 1.35; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.specs-mini { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; color: var(--grijs); margin-bottom: 14px; }
.specs-mini span { white-space: nowrap; }
.specs-mini span + span::before { content: "•"; margin: 0 8px; color: #c5c9d8; }
.specs-mini .accent { color: var(--oranje-2); font-weight: 700; }
.pkaart-onder { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.pkaart-prijs { font-size: 12px; color: var(--grijs); line-height: 1.3; }
.pkaart-prijs b { display: block; font-size: 15px; color: var(--inkt); }
.pkaart-lease { text-align: right; font-size: 12px; color: var(--grijs); line-height: 1.3; }
.pkaart-lease b { display: block; font-size: 20px; color: var(--oranje-2); font-weight: 800; letter-spacing: -.01em; }
.pkaart-lease b small { font-size: 12px; font-weight: 600; color: var(--grijs); margin-left: 2px; }

/* calcband + minicalc */
.calcband { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: radial-gradient(600px 300px at 100% 0%, #1b2f9c 0%, rgba(27, 47, 156, 0) 70%), var(--navy); color: #c9cff0; border-radius: 28px; padding: 48px; }
.calcband h2 { color: #fff; }
.minicalc { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 26px; }
.minicalc label > span { display: flex; justify-content: space-between; font-weight: 600; color: #fff; margin-bottom: 12px; }
.minicalc input[type=range] { width: 100%; accent-color: var(--oranje); margin: 0 0 20px; }
.mc-uitkomst { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 20px; padding-top: 18px; }
.mc-uitkomst strong { font-size: 34px; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.looptijden { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.looptijden.licht { grid-template-columns: repeat(5, 1fr); }
.looptijden button { border: 0; background: var(--bg); color: var(--inkt); font: 700 14px "Plus Jakarta Sans"; padding: 11px 0; border-radius: var(--r-s); cursor: pointer; transition: background .15s, color .15s; }
.looptijden.licht button { background: rgba(255, 255, 255, .08); color: #dfe3fb; }
.looptijden button:hover { background: var(--blauw-zacht); }
.looptijden.licht button:hover { background: rgba(255, 255, 255, .16); }
.looptijden button.actief, .looptijden.licht button.actief { background: var(--oranje); color: #fff; }

/* stappen, faq, cta */
.stappen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stappen li { background: var(--wit); border-radius: var(--r); padding: 28px; box-shadow: var(--schaduw); }
.stap-nr { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: var(--oranje-zacht); color: var(--oranje-2); font-weight: 800; align-items: center; justify-content: center; margin-bottom: 16px; }
.stappen p { margin: 0; color: var(--grijs); }
.faq-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq details { background: var(--wit); border-radius: 14px; margin-bottom: 10px; box-shadow: var(--schaduw); }
.faq summary { cursor: pointer; padding: 18px 54px 18px 22px; font-weight: 700; color: var(--inkt); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border: solid var(--grijs); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--grijs); }
.ctaband { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: linear-gradient(120deg, var(--oranje-zacht), #fff 70%); border-radius: 28px; padding: 40px 48px; box-shadow: 0 0 0 1px #ffe1c4; }
.ctaband h2 { font-size: clamp(22px, 2.2vw, 28px); }
.ctaband p { margin: 0; color: var(--grijs); }

/* paginakop + voorraad */
.paginakop { padding: 34px 0 6px; }
.paginakop-rij { display: flex; align-items: center; gap: 16px; }
.paginakop-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--wit); color: var(--blauw); display: flex; align-items: center; justify-content: center; box-shadow: var(--schaduw); flex: none; margin-bottom: .5em; }
.paginakop-ic .ic { width: 28px; height: 28px; }
.merklogo { width: 76px; height: 76px; border-radius: 18px; background: var(--wit); box-shadow: var(--schaduw); display: flex; align-items: center; justify-content: center; padding: 12px; flex: none; margin-bottom: .5em; }
.merklogo img { max-height: 100%; object-fit: contain; }
.paginakop h1 { font-size: clamp(28px, 3.4vw, 42px); }
.kruimel { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--grijs); margin-bottom: 14px; }
.kruimel a { color: var(--grijs); }
.kruimel a:hover { color: var(--inkt); }
.kruimel span { color: #c5c9d8; }
.kruimel-los { padding-top: 26px; }
.vr { padding: 14px 0 20px; }
.subcats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 20px; }
.subcats::-webkit-scrollbar { display: none; }
.subcats:empty { display: none; }
.vr-in { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
.filters { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.filters-kop { display: none; }
.fgroep { padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.fgroep:first-of-type { padding-top: 2px; }
.fgroep h3 { font-size: 14px; margin-bottom: 10px; }
.fgroep.uit { opacity: .35; pointer-events: none; }
.vink { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; font-size: 14.5px; color: var(--tekst); }
.vink input { width: 18px; height: 18px; accent-color: var(--blauw); margin: 0; flex: none; }
.vink em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--grijs); background: var(--wit); border-radius: 999px; padding: 1px 8px; }
.meer { background: none; border: 0; color: var(--blauw); font: 700 13.5px "Plus Jakarta Sans"; cursor: pointer; padding: 6px 0 0; }
.bereik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bereik input, .fgroep select { padding: 10px 12px; font-size: 14px; background-color: var(--wit); border-color: var(--lijn); }
.wis { width: 100%; margin-top: 16px; }
.werkbalk { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.vr-aantal { font-weight: 700; color: var(--inkt); }
.sorteer { margin-left: auto; }
.sorteer select { padding: 10px 38px 10px 14px; font-size: 14px; background-color: var(--wit); border-color: var(--lijn); }
.filterknop { display: none; padding: 11px 16px; }
#filter-aantal:not(:empty) { background: var(--oranje); color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 7px; }
.actief-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.actief-filters:empty { display: none; }
.actief-filters button { border: 0; background: var(--blauw-zacht); color: var(--blauw); border-radius: 999px; padding: 6px 12px; font: 600 13px "Plus Jakarta Sans"; cursor: pointer; }
.actief-filters button::after { content: "×"; margin-left: 7px; font-size: 15px; }
.paginering { display: flex; gap: 6px; justify-content: center; padding: 32px 0 6px; flex-wrap: wrap; }
.paginering button { min-width: 44px; height: 44px; border: 0; background: var(--wit); color: var(--inkt); font: 700 14px "Plus Jakarta Sans"; border-radius: 12px; cursor: pointer; box-shadow: var(--schaduw); }
.paginering button.actief { background: var(--inkt); color: #fff; }
.leeg { grid-column: 1 / -1; padding: 60px 30px; text-align: center; background: var(--wit); border-radius: var(--r); box-shadow: var(--schaduw); }
.fijn { font-size: 12.5px; color: var(--grijs); margin: 14px 0 0; }

/* product */
.pd { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; padding: 4px 0 10px; }
.pd-links { min-width: 0; }
.galerij { background: var(--wit); border-radius: 20px; padding: 12px; box-shadow: var(--schaduw); }
.groot { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: #eef0f5; }
.groot img { width: 100%; height: 100%; object-fit: contain; }
.duimen { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: thin; }
.duimen:empty { display: none; }
.duimen button { flex: none; width: 92px; aspect-ratio: 4/3; border: 2px solid transparent; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #eef0f5; opacity: .7; }
.duimen button.actief { border-color: var(--oranje); opacity: 1; }
.duimen img { width: 100%; height: 100%; object-fit: cover; }
.pd-kop { padding: 26px 4px 4px; }
.pd-kop h1 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--inkt); background: var(--wit); border-radius: 999px; padding: 6px 12px; box-shadow: inset 0 0 0 1.5px var(--lijn); }
.chip .ic { width: 16px; height: 16px; color: var(--blauw); }
.chip.accent { background: var(--oranje-zacht); box-shadow: none; color: var(--oranje-2); }
a.chip:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.prijsregel { display: flex; gap: 32px; flex-wrap: wrap; align-items: baseline; }
.prijsregel div > span { display: block; font-size: 13px; color: var(--grijs); }
.prijsregel b { font-size: 28px; color: var(--inkt); font-weight: 800; letter-spacing: -.02em; }
.prijsregel small { font-size: 13px; color: var(--grijs); font-weight: 600; margin-left: 4px; }
.prijsregel .lease b { color: var(--oranje-2); }
.aanbieder { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 14px 16px; background: var(--wit); border-radius: 14px; font-size: 14px; box-shadow: var(--schaduw); }
.aanbieder .ic { color: var(--blauw); }
.pd-info { padding: 28px 4px 0; }
.pd-info h2 { font-size: 22px; margin-top: 8px; }
.specraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 26px; }
.specraster div { background: var(--wit); border-radius: 12px; padding: 13px 16px; box-shadow: var(--schaduw); }
.specraster span { display: block; font-size: 12.5px; color: var(--grijs); }
.specraster b { color: var(--inkt); font-size: 15px; }
.opties { columns: 2; padding-left: 18px; margin: 0 0 20px; color: var(--grijs); }
.pd-rechts { position: sticky; top: 140px; }
.calc { background: var(--wit); border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(11, 26, 92, .3), 0 0 0 1px var(--lijn); }
.calc h2 { font-size: 22px; margin-bottom: 18px; }
.veldrij { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-radius: var(--r-s); padding: 14px 16px; margin-bottom: 16px; }
.veldrij span { font-size: 13px; font-weight: 700; color: var(--inkt); }
.veldrij strong { font-size: 18px; color: var(--inkt); }
.uitkomst { display: flex; justify-content: space-between; align-items: baseline; background: var(--navy); color: #c9cff0; border-radius: 14px; padding: 18px 20px; margin: 18px 0 10px; }
.uitkomst span { font-weight: 600; }
.uitkomst strong { font-size: 30px; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.uitkomst strong small { font-size: 14px; color: #c9cff0; font-weight: 600; margin-left: 3px; }
.calc-detail { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; color: var(--grijs); margin-bottom: 16px; padding: 0 4px; }
.calc-detail b { color: var(--inkt); }
.calc .tekstknop { display: block; margin: 14px auto 0; }
.schema { max-height: 320px; overflow: auto; margin-top: 12px; border-radius: 12px; background: var(--bg); }
.schema table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.schema th, .schema td { padding: 7px 10px; text-align: right; }
.schema th { position: sticky; top: 0; background: #e9ecf4; color: var(--inkt); }
.schema td:first-child, .schema th:first-child { text-align: left; }
.schema tr + tr td { border-top: 1px solid var(--lijn); }

/* formulieren + tekstpagina's */
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 36px; padding-bottom: 20px; align-items: start; }
.uitleg h1 { color: var(--blauw); font-size: clamp(30px, 3.6vw, 44px); }
.uitleg.midden { text-align: center; padding: 36px 0 10px; }
.uitleg.midden .lead { margin: 0 auto 26px; }
.uitleg.midden .kruimel { justify-content: center; }
.uitlegkaart { background: var(--wit); border-radius: var(--r); padding: 24px; box-shadow: var(--schaduw); margin: 26px 0; }
.uitlegkaart h2 { font-size: 18px; }
.uitlegkaart .vinkjes { margin: 6px 0 0; }
.uitlegkaart .vinkjes li { font-weight: 500; }
.chipwolk { display: flex; flex-wrap: wrap; gap: 8px; }
.gegevens div { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.gegevens .ic { color: var(--blauw); margin-top: 2px; }
.formkaart { background: var(--wit); border-radius: 22px; padding: 30px; box-shadow: 0 30px 60px -30px rgba(11, 26, 92, .3), 0 0 0 1px var(--lijn); }
.formtussen { font-size: 15px; margin: 6px 0 14px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.samenvatting { background: var(--oranje-zacht); border-radius: 12px; padding: 14px 16px; font-size: 14px; margin-bottom: 18px; color: var(--inkt); }
.akkoord { display: flex; gap: 10px; font-size: 13.5px; align-items: flex-start; margin: 4px 0 20px; color: var(--grijs); }
.akkoord input { margin-top: 3px; accent-color: var(--blauw); width: 17px; height: 17px; flex: none; }
.honing { position: absolute; left: -9999px; }
.melding { padding: 13px 16px; border-radius: 12px; font-size: 14px; margin-top: 14px; }
.melding.fout { background: #fdeceb; color: #b42318; }
.bedankt { text-align: center; padding: 20px 0; }
.bedankt-ic { width: 64px; height: 64px; border-radius: 50%; background: #e7f7ee; color: #12805c; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.bedankt-ic .ic { width: 30px; height: 30px; }
.tekstpagina { padding-top: 36px; }
.tekstpagina h2 { font-size: 20px; margin-top: 30px; }

/* merken */
.merkenpagina h2 { font-size: 22px; margin: 34px 0 16px; }
.merkraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.merkraster.klein { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.merktegel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--wit); border-radius: 14px; padding: 18px 10px 14px; box-shadow: var(--schaduw); color: var(--inkt); font-weight: 600; font-size: 14px; text-align: center; transition: transform .2s, box-shadow .2s; }
.merktegel img { height: 44px; width: 80px; object-fit: contain; }
.merktegel b { height: 44px; display: flex; align-items: center; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.merktegel.tekst span { color: var(--grijs); font-weight: 500; font-size: 12.5px; }
.merktegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); }
.kop-klein { font-size: 22px; }

/* voet */
.voet { background: var(--navy); color: #aab3dd; margin-top: 90px; font-size: 14.5px; }
.voet-boven { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.voet h2 { color: #fff; font-size: 15px; letter-spacing: 0; margin-bottom: 14px; }
.voet .h2-tussen { margin-top: 26px; }
.voet a, .voet-boven span { display: block; color: #aab3dd; padding: 4px 0; }
.voet a:hover { color: #fff; }
.voet-logo { height: 28px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.voet-merk p { max-width: 320px; }
.voet-merk a.knop { display: inline-flex; color: #fff; margin-top: 6px; padding: 13px 20px; }
.voet-onder { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }

/* laden */
.laden { background: linear-gradient(90deg, #eceef4 25%, #f6f7fb 50%, #eceef4 75%) !important; background-size: 200% 100% !important; animation: laad 1.2s infinite; box-shadow: none !important; }
.pkaart.laden { min-height: 340px; }
@keyframes laad { to { background-position: -200% 0; } }

/* responsief */
@media (max-width: 1180px) {
  .raster-4 { grid-template-columns: repeat(3, 1fr); }
  .cattegels { grid-template-columns: repeat(2, 1fr); }
  .hoofdmenu a { padding: 9px 10px; }
  .kop-in { gap: 18px; }
}
@media (max-width: 1020px) {
  .menuknop { display: inline-flex; }
  .hoofdmenu { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 10px 16px 18px; border-bottom: 1px solid var(--lijn); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .2); }
  .hoofdmenu.open { display: flex; }
  .hoofdmenu a { padding: 13px 14px; font-size: 16px; }
  .hero-in, .tweeluik, .faq-in, .calcband { grid-template-columns: 1fr; }
  .hero-beeld { max-width: 640px; margin: 0 auto; }
  .zoekkaart { grid-template-columns: 1fr 1fr; }
  .zoekkaart .knop { grid-column: 1 / -1; }
  .vr-in { grid-template-columns: 1fr; }
  .filterknop { display: inline-flex; }
  .filters { position: fixed; inset: 0 auto 0 0; top: 0; width: min(360px, 90vw); max-height: none; background: var(--bg); z-index: 90; padding: 0 20px 30px; transform: translateX(-105%); transition: transform .25s; }
  .filters.open { transform: none; box-shadow: 0 0 0 100vmax rgba(15, 23, 51, .45); }
  .filters-kop { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--bg); padding: 18px 0 12px; z-index: 1; }
  .filters-kop h2 { margin: 0; font-size: 20px; }
  .pd { grid-template-columns: 1fr; }
  .pd-rechts { position: static; }
  .raster { grid-template-columns: repeat(2, 1fr); }
  .voet-boven { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  body { font-size: 15px; }
  .kop-in { height: 62px; }
  .hoofdmenu { top: 62px; }
  .logo img { height: 22px; }
  .kop-rechts .knop-klein { display: none; }
  .hero { padding-top: 30px; }
  .lead { font-size: 16px; }
  .zoekkaart { grid-template-columns: 1fr; transform: translateY(30px); padding: 16px; }
  .hero + .sectie { padding-top: 90px; }
  .sectie { padding-top: 54px; }
  .cattegels { grid-template-columns: 1fr; gap: 10px; }
  .raster, .raster-4 { grid-template-columns: 1fr; }
  .calcband, .ctaband { padding: 28px 22px; border-radius: 22px; }
  .ctaband { flex-direction: column; align-items: flex-start; }
  .twee { grid-template-columns: 1fr; }
  .calc .twee { grid-template-columns: 1fr 1fr; }
  .tweeluik { gap: 30px; }
  .formkaart, .calc { padding: 20px; }
  .looptijden { grid-template-columns: repeat(3, 1fr); }
  .voet-boven { grid-template-columns: 1fr; gap: 26px; }
  .werkbalk { flex-wrap: wrap; }
  .vr-aantal { order: 3; width: 100%; font-size: 14px; }
  .opties { columns: 1; }
  .merklink { height: 60px; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}

/* ---------------------------------------------------------------- categoriekaarten (horizontaal scrollen) */
.schuifknoppen { display: flex; gap: 8px; }
.schuif { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow .15s, background .15s, opacity .15s; }
.schuif:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.schuif[disabled] { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1.5px var(--lijn); }
.catscroll { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 10px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 30px; scroll-padding: 0 max(24px, calc((100vw - var(--max)) / 2 + 24px)); }
.catscroll::-webkit-scrollbar { display: none; }
.catkaart { position: relative; flex: 0 0 272px; scroll-snap-align: start; background: var(--wit); border-radius: 24px; padding: 18px 20px 22px; box-shadow: var(--schaduw); color: var(--inkt); transition: transform .25s, box-shadow .25s; overflow: hidden; }
.catkaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-hover); }
.catkaart-beeld { position: relative; height: 178px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.catkaart-beeld::before { content: ""; position: absolute; left: 50%; top: 0; width: 176px; height: 176px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #eef0fd 68%, #e4e8fb 100%); box-shadow: inset 0 0 0 1px rgba(11, 20, 166, .05); transition: background .3s; }
.catkaart:hover .catkaart-beeld::before { background: radial-gradient(circle at 50% 35%, #ffffff 0%, #fff1e3 68%, #ffe4cc 100%); }
.catkaart-beeld img { position: relative; max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(11, 26, 92, .2)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.catkaart:hover .catkaart-beeld img { transform: scale(1.06) translateY(-4px); }
.catkaart-t h3 { font-size: 18px; margin: 0 0 4px; }
.catkaart-aantal { display: block; font-size: 14px; color: var(--grijs); }
.catkaart-aantal b { color: var(--inkt); font-weight: 700; }
.catkaart-vanaf { display: block; margin-top: 12px; max-width: calc(100% - 48px); font-size: 13px; font-weight: 600; color: var(--grijs); line-height: 1.45; min-height: 38px; }
.catkaart-vanaf:empty { display: none; }
.catkaart-pijl { position: absolute; right: 18px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--inkt); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; }
.catkaart-pijl .ic { width: 18px; height: 18px; }
.catkaart:hover .catkaart-pijl { background: var(--oranje); color: #fff; transform: translateX(2px); }

/* ---------------------------------------------------------------- werkwijze (tijdlijn) */
.werkwijze { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; background: var(--wit); border-radius: 28px; padding: 52px; box-shadow: var(--schaduw); }
.werkwijze-intro { position: sticky; top: 150px; }
.werkwijze-intro .lead { font-size: 17px; }
.garanties { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.garanties li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--inkt); font-size: 15px; }
.garanties .ic { width: 20px; height: 20px; color: #fff; background: var(--blauw); border-radius: 50%; padding: 3px; stroke-width: 3; }
.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.tijdlijn li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: #d3d8f6; }
.tijdlijn li:nth-last-child(2)::before { background: linear-gradient(#d3d8f6, var(--oranje)); }
.tijdlijn li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 34px; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tl-ic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; background: var(--blauw-zacht); color: var(--blauw); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--wit); }
.tl-ic .ic { width: 26px; height: 26px; }
.tijdlijn li:last-child .tl-ic { background: var(--oranje); color: #fff; box-shadow: 0 0 0 6px var(--wit), 0 10px 24px -8px rgba(255, 138, 31, .8); }
.tl-t { background: var(--bg); border-radius: 18px; padding: 18px 22px; }
.tl-stap { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin-bottom: 6px; }
.tl-stap em { font-style: normal; text-transform: none; letter-spacing: 0; background: var(--wit); color: var(--blauw); padding: 3px 10px; border-radius: 999px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--lijn); }
.tijdlijn li:last-child .tl-stap em { color: var(--oranje-2); }
.tl-t h3 { font-size: 18px; margin-bottom: 4px; }
.tl-t p { margin: 0; color: var(--grijs); font-size: 15px; }

/* fotoverantwoording */
.tabelscroll { overflow-x: auto; margin: 20px 0; }
.credits { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--wit); border-radius: 14px; overflow: hidden; box-shadow: var(--schaduw); }
.credits th, .credits td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--lijn); }
.credits th { color: var(--inkt); background: #eef0f6; }

@media (max-width: 1020px) {
  .werkwijze { grid-template-columns: 1fr; gap: 34px; padding: 36px 28px; }
  .werkwijze-intro { position: static; }
}
@media (max-width: 640px) {
  .catkaart { flex-basis: 236px; padding: 14px 16px 18px; }
  .catkaart-beeld { height: 150px; }
  .catkaart-beeld::before { width: 148px; height: 148px; }
  .catkaart-beeld img { max-height: 124px; }
  .schuifknoppen { display: none; }
  .werkwijze { padding: 26px 18px; border-radius: 22px; }
  .tijdlijn li { grid-template-columns: 46px 1fr; gap: 14px; }
  .tl-ic { width: 46px; height: 46px; border-radius: 14px; }
  .tijdlijn li:not(:last-child)::before { left: 22px; top: 46px; }
  .tl-t { padding: 14px 16px; }
}