/* Lasmeesters, nieuw ontwerp: fijn en strak. Eén letter, één raster van 12 kolommen, dunne lijnen, producten los op één tegelkleur, echte foto's zonder sluier, één accent uit het logo. Geen stencil, geen hoofdletters, geen zware vlakken. */
@font-face { font-family: Hanken; src: url(hanken.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Hanken; src: url(hanken-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --w: 1320px; --gut: 40px; --gat: 24px; --r: 4px; --r2: 6px;
  --inkt: #17181a; --sub: #595c60; --zacht: #6c6f73;
  --lijn: #e8e8e5; --lijn2: #d4d4d0;
  --vlak: #f4f4f2; --vlak2: #ecebe8;
  --oranje: #e8841a; --oranje2: #d77813; --link: #a4570a;
  --groen: #12845b; --geel: #b4690e; --rood: #bb3a2c;
  --sec: 104px; --sec-s: 72px; --kop1: 72px; --kop2: 45px; --kop-h: 117px;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body.menu-uit { --kop-h: 72px; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 137px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: Hanken, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; color: var(--inkt); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, b, strong { font-weight: 500; }
small { font-size: 13px; }
em { font-style: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea, select, button { outline: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.naar-inhoud { position: fixed; top: 8px; left: 8px; z-index: 80; padding: 10px 14px; border-radius: var(--r); background: var(--inkt); color: #fff; font-size: 14px; transform: translateY(-200%); }
.naar-inhoud:focus { transform: none; }
.w { width: 100%; max-width: calc(var(--w) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.sec.klein { padding-block: var(--sec-s); }
.sec + .sec { padding-top: 0; }
.vlak-sec { background: var(--vlak); }
.vlak-sec + .sec, .sec + .vlak-sec { padding-top: var(--sec); }

/* ---------- letters: vaste reeks 13, 14, 15, 16, 18, 22, 28, 40, 60 ---------- */
.h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.h2 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; }
.h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.lead { font-size: 16px; line-height: 1.55; color: var(--sub); max-width: 60ch; }
.stil { font-size: 13px; line-height: 1.45; color: var(--sub); }
.tnum, .pr, .t-nr { font-variant-numeric: tabular-nums; }
.meer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.meer svg { transition: transform .15s; }
.meer:hover svg { transform: translateX(3px); }
.link { color: var(--link); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.skop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; margin-bottom: 32px; }
.skop .lead { margin-top: 8px; }

/* ---------- knoppen: 44 hoog, klein 36; één hoofdknop in het merkblauw, de rest licht ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--oranje); border-radius: var(--r); background: var(--oranje); color: var(--inkt); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s; }
.knop:hover { background: var(--oranje2); border-color: var(--oranje2); }
.knop.groot { height: 48px; padding: 0 24px; }
.knop.klein { height: 36px; padding: 0 14px; font-size: 14px; }
.knop.breed { width: 100%; }
.knop.twee { background: #fff; border-color: var(--lijn2); }
.knop.twee:hover { background: #fff; border-color: var(--inkt); }
.knop[disabled] { opacity: .45; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }

/* ---------- velden ---------- */
.veld { display: block; }
.veld > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.veld small { font-weight: 400; color: var(--sub); }
.inv, .veld input, .veld select, .veld textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; font-size: 15px; line-height: 1.4; appearance: none; transition: border-color .12s; }
.veld select, select.inv { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354646f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.inv:focus, .veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); }
.veld textarea { min-height: 112px; resize: vertical; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gat); }
.velden .heel { grid-column: 1 / -1; }
.bestand { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px dashed var(--lijn2); border-radius: var(--r); font-size: 14px; color: var(--sub); cursor: pointer; }
.bestand:hover { border-color: var(--inkt); }
.bestand input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.keus { display: grid; gap: 8px; }
.keus-k { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--lijn2); border-radius: var(--r); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.keus-k:hover { border-color: var(--inkt); }
.keus-k:has(input:checked) { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); }
.keus-k input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--lijn2); border-radius: 50%; background: #fff; }
.keus-k input:checked { border: 5px solid var(--inkt); }
.keus-k small { display: block; font-size: 13px; color: var(--sub); }
.keus-k b { font-size: 15px; font-weight: 500; }
.keus-k em { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 51; background: #fff; }
.kop-r { display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; column-gap: 24px; align-items: center; height: var(--kop1); }
.logo { display: block; width: 211px; }
.logo img { display: block; width: 100%; height: auto; }
.menuknop { display: none; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; }
.zoek { position: relative; display: flex; align-items: center; height: 44px; max-width: 640px; border-radius: var(--r); background: var(--vlak); transition: background .12s, box-shadow .12s; }
.zoek:hover { background: var(--vlak2); }
.zoek:focus-within, .zoek.open { background: #fff; box-shadow: inset 0 0 0 1px var(--lijn2); }
.zk-i { flex: none; display: grid; place-items: center; width: 44px; color: var(--sub); }
.zoek input { flex: 1; min-width: 0; height: 44px; padding: 0 44px 0 0; border: 0; background: none; font-size: 15px; appearance: none; }
.zoek input::placeholder { color: var(--sub); opacity: 1; }
.zoek input::-webkit-search-cancel-button { display: none; }
.zoek-weg { position: absolute; top: 0; right: 0; display: none; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--sub); }
.zoek.open .zoek-weg { display: grid; }
.zoek-tel { display: none; }
.kop-acties { display: flex; align-items: center; gap: 24px; }
.kop-tel { display: grid; line-height: 1.3; white-space: nowrap; text-align: right; font-size: 13px; }
.kop-tel b { font-size: 15px; font-variant-numeric: tabular-nums; }
.kop-tel:hover b { color: var(--link); }
.nuopen { display: inline-flex; align-items: center; justify-content: inherit; gap: 6px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.nuopen i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lijn2); }
.nuopen.open i { background: var(--groen); }
.kop-tel .nuopen { justify-content: flex-end; }
.actie { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.actie:hover { color: var(--link); }
.zoek-knop, .actie-tel { display: none; }
.actie-wagen b { display: none; }
[data-wagen-tot] { min-width: 44px; font-variant-numeric: tabular-nums; }

.balk { position: sticky; top: var(--kop1); z-index: 50; background: #fff; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); transition: transform .2s ease; }
.menu-uit .balk { transform: translateY(-100%); }
.balk-r { display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; column-gap: 24px; align-items: stretch; height: 43px; }
.balk-m { display: flex; gap: 24px; min-width: 0; }
.balk-rest { display: flex; align-items: stretch; gap: 24px; }
.balk-m > a, .balk-rest > a, .mk { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 15px; white-space: nowrap; box-shadow: inset 0 0 0 transparent; transition: box-shadow .12s, color .12s; }
.mk { justify-self: start; font-weight: 500; }
.balk-m > a:hover, .balk-m > a.aan, .balk-m > a.open-m, .mk:hover, .mk.open-m, .balk-rest > a:hover { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.balk-rest > a { font-size: 14px; color: var(--sub); }
.balk-rest > a:hover { color: var(--inkt); }
.btw { display: inline-flex; align-self: center; height: 28px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.btw button { min-width: 44px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); }
.btw button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(23,24,26,.14); }

/* paneel onder de menubalk */
.mega { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - 124px); overflow-y: auto; background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 32px 48px -32px rgba(23,24,26,.22); }
.mega.open { display: block; animation: paneel .14s ease-out; }
@keyframes paneel { from { opacity: 0; transform: translateY(-4px); } }
.mega-paneel { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 28px 36px; }
.mega-paneel.aan { display: grid; }
.mega-l { grid-column: span 9; min-width: 0; }
.mega-kop { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.mega-kop h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.mega-kop h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mega-kol { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 0 var(--gat); }
.mg { min-width: 0; }
.mg-los { margin-top: 20px; }
.mg-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
a.mg-t:hover { color: var(--link); }
.mg-t small { color: var(--sub); font-weight: 400; font-variant-numeric: tabular-nums; }
.ms { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: var(--r); font-size: 14px; line-height: 1.3; }
.ms:hover { background: var(--vlak); }
.ms .tg { width: 40px; height: 40px; border-radius: 4px; }
.ms small { display: block; color: var(--sub); font-variant-numeric: tabular-nums; }
.mega-r { grid-column: 10 / span 3; min-width: 0; }
.mega-r h4 { margin-bottom: 8px; font-size: 14px; }
.mh { display: block; padding: 8px 0; font-size: 14px; line-height: 1.35; color: var(--sub); }
.mh:hover { color: var(--inkt); }
.mega-alles { grid-column: 1 / -1; }
.mega-raster { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gat); }
.mt { display: block; min-width: 0; }
.mt .tg { aspect-ratio: 1; border-radius: var(--r2); }
.mt b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; }
.mt small { color: var(--sub); font-variant-numeric: tabular-nums; }
.mt:hover .tg { background: var(--vlak2); }
.mega-service { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; }
.mega-service a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sluier { position: fixed; inset: 0; z-index: 41; display: none; background: rgba(23,24,26,.28); }
.sluier.aan { display: block; }
@media (min-width: 1025px) { .sluier.boven { z-index: 50; } }

/* zoekpaneel */
.zoek-pan { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: none; width: calc(min(100vw - 2 * var(--gut), var(--w)) - 256px); max-height: calc(100vh - 96px); overflow-y: auto; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -16px rgba(23,24,26,.28); }
.zoek.open .zoek-pan { display: block; animation: paneel .12s ease-out; }
.zs-k { display: grid; grid-template-columns: minmax(0, 1fr); }
.zs-k.twee { grid-template-columns: 300px minmax(0, 1fr); }
.zs-links { padding: 16px; }
.zs-rechts { padding: 16px; }
.zs-k.twee .zs-rechts { border-left: 1px solid var(--lijn); }
.zs-t { margin: 16px 0 6px 8px; font-size: 13px; color: var(--sub); }
.zs-t:first-child { margin-top: 0; }
.zs-rij { display: block; padding: 8px; border-radius: var(--r); font-size: 14px; line-height: 1.35; }
.zs-rij:hover, .zs-rij.act { background: var(--vlak); }
.zs-rij small { display: block; color: var(--sub); }
.zs-rij mark, .zs-a mark { background: none; color: inherit; font-weight: 600; }
.zs-a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 6px 8px; }
.zs-a .tg { width: 56px; height: 56px; border-radius: 4px; }
.zs-a b { display: block; font-weight: 400; }
.zs-a small { display: flex; flex-wrap: wrap; gap: 0 12px; }
.zs-a em { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zs-a em small { display: block; font-weight: 400; text-align: right; }
.zs-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--lijn); font-size: 14px; font-weight: 500; }
.zs-voet:hover, .zs-voet.act { background: var(--vlak); }
.zs-niets { padding: 24px; font-size: 14px; color: var(--sub); }
.zs-niets b { color: var(--inkt); }
.zs-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zs-tegel { display: block; padding: 4px; }
.zs-tegel .tg { aspect-ratio: 4 / 3; border-radius: var(--r); }
.zs-tegel span:last-child { display: block; margin-top: 6px; line-height: 1.3; }
.zs-laad { padding: 24px; font-size: 14px; color: var(--sub); }

/* telefoonmenu en lade */
.tel-menu { display: none; border-bottom: 1px solid var(--lijn); }
.tel-menu > div { display: flex; justify-content: space-between; padding-inline: var(--gut); }
.tel-menu a, .tm-meer { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0; border: 0; background: none; font-size: 15px; white-space: nowrap; }
.tel-menu a.aan { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.tm-meer { font-weight: 500; }
.lade-sluier { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(23,24,26,.34); }
.lade-sluier.aan { display: block; }
.lade { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(420px, 100vw); overflow: hidden; background: #fff; transform: translateX(-102%); transition: transform .24s ease; }
.lade.open { transform: none; }
html.lade-open { overflow: hidden; }
.lade-k { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--lijn); }
.lade-k img { height: 26px; width: auto; }
.lade-k button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; }
.lade-vel { position: absolute; top: 57px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 8px 16px 40px; background: #fff; transform: translateX(100%); visibility: hidden; transition: transform .24s ease, visibility .24s; }
.lade-vel.aan { transform: none; visibility: visible; }
.lade-start { transform: none; visibility: visible; }
.lade-start.weg { transform: translateX(-24%); visibility: hidden; }
.lade h4 { margin: 20px 0 4px; font-size: 13px; font-weight: 400; color: var(--sub); }
.la { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--lijn); background: none; font-size: 15px; line-height: 1.3; text-align: left; }
.la .tg { width: 44px; height: 44px; border-radius: 4px; }
.la small { display: block; color: var(--sub); font-variant-numeric: tabular-nums; }
.la svg:not(.geen) { color: var(--sub); }
.lb { display: flex; align-items: center; min-height: 44px; font-size: 15px; border-bottom: 1px solid var(--lijn); }
.terug { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--sub); }
.lade-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--lijn); }
.lade-kop h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.lade-open-nu { display: flex; padding: 12px 0 0; }

/* ---------- productfoto in een tegel ---------- */
.tg { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--vlak); isolation: isolate; transition: background .15s; }
.tg img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tg.vol img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; mix-blend-mode: normal; }
.tg.rand img { inset: 0 !important; width: 100% !important; height: 100% !important; object-position: var(--x, center) var(--y, center); }
.r-l { --x: left; } .r-r { --x: right; } .r-t { --y: top; } .r-b { --y: bottom; }
.tg .geen { position: absolute; top: 50%; left: 50%; width: 36%; transform: translate(-50%, -50%); color: var(--lijn2); }

/* ---------- prijs, voorraad, koop ---------- */
.pr { white-space: nowrap; }
.pr b { font-weight: 500; }
.per { font-size: 13px; color: var(--sub); }
.log { font-size: 13px; color: var(--link); white-space: nowrap; }
.log:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vr { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--lijn2); background: #fff; }
.vr.ja { color: var(--inkt); }
.vr.ja i { border-color: var(--groen); background: var(--groen); }
.kp { display: inline-flex; overflow: hidden; border-radius: var(--r); background: var(--vlak); transition: background .1s, box-shadow .1s; }
.kp:focus-within { box-shadow: inset 0 0 0 1px var(--lijn2); background: #fff; }
.t-rij:not(.t-kop):hover .kp, .t-hier .kp { background: #fff; }
.aantal { width: 44px; height: 32px; padding: 0; border: 0; background: none; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.in { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0; box-shadow: inset 1px 0 0 var(--lijn2); background: none; transition: background .12s, box-shadow .12s; }
.in:hover, .in.klaar { box-shadow: none; background: var(--oranje); }

/* ---------- kruimelpad ---------- */
.kruimel { padding-block: 20px 0; font-size: 13px; color: var(--sub); }
.kr-breed { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.kr-breed a:hover { color: var(--inkt); }
.kr-breed span { color: var(--inkt); }
.kr-breed svg { color: var(--lijn2); }
.kr-terug { display: none; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; color: var(--inkt); }

/* ---------- start ---------- */
.open-t { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: end; padding-block: 48px 36px; }
.open-t h1 { grid-column: 1 / span 7; font-size: 76px; line-height: 1; letter-spacing: -.042em; font-weight: 500; }
.open-r { grid-column: 8 / span 5; }
.open-r p { font-size: 16px; line-height: 1.55; color: var(--sub); }
.open-r .knoppen { margin-top: 20px; }
.open-b { display: block; overflow: hidden; height: clamp(280px, min(39vw, 100vh - 320px), 720px); background: #1b1c1e; }
.open-b img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%; animation: open-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes open-in { from { transform: scale(1.035); } }
.feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 32px 8px; }
.feit { display: block; padding-top: 14px; border-top: 1px solid var(--lijn2); transition: border-color .12s; }
a.feit:hover { border-color: var(--inkt); }
.feit b { display: block; font-size: 22px; line-height: 1.2; letter-spacing: -.018em; font-variant-numeric: tabular-nums; }
.feit span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--sub); }

.groepen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); }
.gt { display: block; min-width: 0; }
.gt .tg { aspect-ratio: 4 / 3; border-radius: var(--r2); }
.gt .tg:not(.vol) img { inset: 9% 16%; width: 68%; height: 82%; }
.gt:hover .tg { background: var(--vlak2); }
.gt:hover .tg img, .sub-t:hover .tg img, .pk:hover .tg img, .art:hover img { transform: scale(1.025); }
.gt-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.gt-k b { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.gt-k small { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt p { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--sub); }

.snel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; }
.snel-t { grid-column: 1 / span 4; }
.snel-t .lead { margin-top: 12px; }
.snel-t .knoppen { margin-top: 24px; }
.snel-k { grid-column: 6 / span 7; min-width: 0; }
.sb { --sbr: 64px; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn); overflow: hidden; }
.sb-kop, .sb-romp { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.sb.groot .sb-kop, .sb.groot .sb-romp { grid-template-columns: 320px minmax(0, 1fr); }
.sb-kop { border-bottom: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.sb-kop span { padding: 10px 16px; }
.sb-kop span:first-child, .sb-in { border-right: 1px solid var(--lijn); }
.sb-in { min-width: 0; }
.sb-in textarea { display: block; width: 100%; padding: 0 16px; border: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sbr) - 1px), var(--lijn) calc(var(--sbr) - 1px), var(--lijn) var(--sbr)); font-family: var(--mono); font-size: 14px; line-height: var(--sbr); resize: none; overflow: hidden; white-space: pre; }
.sb-in textarea::placeholder { color: var(--zacht); opacity: 1; }
.sb-uit { min-width: 0; }
.sb-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: var(--sbr); padding: 0 16px; border-bottom: 1px solid var(--lijn); font-size: 14px; line-height: 1.3; }
.sb-rij .tg { width: 44px; height: 44px; border-radius: 4px; }
.sb-rij a:hover { color: var(--link); }
.sb-rij small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 2px; color: var(--sub); }
.sb-rij em { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sb-rij.mis { grid-template-columns: minmax(0, 1fr); color: var(--rood); }
.sb-rij.hint { grid-template-columns: minmax(0, 1fr); color: var(--sub); }
.sb-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.sb-voet b { display: block; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sb-voet small { color: var(--sub); }

.kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); }
.pk { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; min-width: 0; position: relative; }
.pk-f .tg { border-radius: var(--r2); }
.pk:hover .tg { background: var(--vlak2); }
.pk-n { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.pk-n a:hover { color: var(--link); }
.pk-m { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--sub); font-variant-numeric: tabular-nums; }
.pk-o { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; }
.pk-p { min-width: 0; font-size: 16px; }
.pk-p .pr b { font-weight: 500; }
.pk-h { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--sub); }
.pk-hu:empty { display: none; }
.pk-h:hover { color: var(--inkt); }
.pk-in { flex: none; }
.opa { color: var(--sub); font-weight: 400; }
.pk-p .opa { font-size: 14px; }
.pk-v { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 6px; border-radius: var(--r); background: rgba(255,255,255,.92); font-size: 13px; color: var(--sub); cursor: pointer; opacity: 0; transition: opacity .12s; }
.pk-f { position: relative; }
.pk:hover .pk-v, .pk-v:has(input:checked), .pk-v:focus-within { opacity: 1; }
.pk-v input, .tb-v input, .koop-v input { appearance: none; flex: none; width: 15px; height: 15px; margin: 0; border: 1px solid var(--lijn2); border-radius: 3px; background: #fff; cursor: pointer; }
.pk-v input:checked, .tb-v input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500 10 17.500 19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }

.advies { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; }
.advies-f { grid-column: 1 / span 7; overflow: hidden; border-radius: var(--r2); aspect-ratio: 16 / 10; background: var(--vlak); }
.advies-f img { width: 100%; height: 100%; object-fit: cover; }
.advies-t { grid-column: 9 / span 4; }
.advies-t .lead { margin-top: 12px; }
.stappen { margin-top: 24px; }
.stappen li { padding-block: 12px; border-top: 1px solid var(--lijn); }
.stappen li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.stappen li > a b, .stappen li > a span { grid-column: 1; }
.stappen li > a svg { grid-column: 2; grid-row: 1 / span 2; color: var(--sub); transition: transform .15s; }
.stappen li > a:hover svg { transform: translateX(3px); color: var(--inkt); }
.stappen li:last-child { border-bottom: 1px solid var(--lijn); }
.stappen b { display: block; font-size: 15px; }
.stappen span { display: block; font-size: 14px; color: var(--sub); }
.advies-t .knoppen { margin-top: 24px; }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.tm-f { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r2); background: var(--vlak); }
.tm-f img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.tm b { display: block; margin-top: 12px; font-size: 15px; }
.tm span { display: block; font-size: 14px; color: var(--sub); }
.tm small { display: block; margin-top: 6px; color: var(--sub); line-height: 1.4; font-size: 14px; }
.tm a { display: inline-block; margin-top: 2px; font-size: 14px; color: var(--link); overflow-wrap: anywhere; }
.tm a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gat); }
.art { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; min-width: 0; }
.art .art-f { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r2); background: var(--vlak); }
.art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.art h3 { margin-top: 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; text-wrap: pretty; }
.art small { display: block; margin-top: 4px; color: var(--sub); }
.art:hover h3 { color: var(--link); }

/* ---------- hoofdgroep ---------- */
.pkop { padding-block: 24px 40px; }
.pkop h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.pkop .lead { margin-top: 12px; }
.pkop-r { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.hub-b { display: block; overflow: hidden; height: clamp(180px, 20vw, 340px); margin-bottom: 56px; background: var(--vlak2); }
.hub-b img { width: 100%; height: 100%; object-fit: cover; }
.hub-g { padding-bottom: 56px; }
.hub-g h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.hub-g h2 a:hover { color: var(--link); }
.hub-k { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.subs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px var(--gat); }
.sub-t { display: block; min-width: 0; }
.sub-t .tg { border-radius: var(--r2); }
.sub-t:hover .tg { background: var(--vlak2); }
.sub-los { margin-top: 20px; font-size: 14px; color: var(--sub); }
.sub-los a { color: var(--inkt); font-weight: 500; }
.sub-los a:hover { color: var(--link); }
.sub-t b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; font-weight: 400; overflow-wrap: anywhere; hyphens: auto; }
.sub-t small { color: var(--sub); font-variant-numeric: tabular-nums; }

/* ---------- categorie ---------- */
.cat-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; padding-block: 16px 32px; }
.cat-kop h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.cat-kop .lead { margin-top: 10px; }
.cat { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 56px; align-items: start; padding-bottom: 96px; }
.zij { position: sticky; top: calc(var(--kop-h) + 20px); max-height: calc(100vh - var(--kop-h) - 40px); overflow-y: auto; padding-right: 12px; margin-right: -12px; scrollbar-width: thin; transition: top .2s ease, max-height .2s ease; }
.boom { padding-bottom: 20px; border-bottom: 1px solid var(--lijn); }
.boom a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 5px; font-size: 14px; line-height: 1.35; color: var(--sub); }
.boom a:hover { color: var(--inkt); }
.boom a small { font-variant-numeric: tabular-nums; color: var(--zacht); }
.boom a.aan { color: var(--inkt); font-weight: 500; }
.boom .bm-terug { justify-content: flex-start; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--inkt); }
.boom .bm-in { padding-left: 12px; }
.bmk { margin-top: 2px; }
.flt { padding-block: 16px; border-bottom: 1px solid var(--lijn); }
.flt:last-child { border-bottom: 0; }
.flt h3 { margin-bottom: 8px; font-size: 14px; }
.flt-sw { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--lijn2); transition: background .12s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .12s; }
input:checked + .sw { background: var(--inkt); }
input:checked + .sw::after { transform: translateX(14px); }
.fv { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.fv input { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--lijn2); border-radius: 3px; background: #fff; }
.fv input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.500 19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fv span { flex: 1; min-width: 0; }
.fv small { flex: none; color: var(--zacht); font-variant-numeric: tabular-nums; }
.fv.leeg { color: var(--zacht); }
.fm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fm button { height: 32px; min-width: 0; padding: 0 2px; border: 0; border-radius: 4px; background: var(--vlak); font-size: 13px; font-variant-numeric: tabular-nums; transition: background .12s; }
.fm button:hover { background: var(--vlak2); }
.fm button.aan { background: var(--inkt); color: #fff; }
.fm button:disabled { background: none; color: var(--lijn2); cursor: default; }
.flt-meer { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; }
.flt-meer:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lijst-balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 12px; }
.lijst-tel { font-size: 14px; color: var(--sub); }
.lijst-tel b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.lijst-acties { display: flex; align-items: center; gap: 8px; }
.lijst-zoek { width: 220px; height: 36px; min-height: 36px; padding: 0 12px; font-size: 14px; }
select.klein { width: auto; height: 36px; min-height: 36px; padding: 0 30px 0 12px; font-size: 14px; }
.seg { display: inline-flex; height: 36px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); white-space: nowrap; }
.seg button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(23,24,26,.14); }
.filterknop { display: none; }
.actief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 12px; }
.actief:empty { display: none; }
.af { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--vlak); font-size: 13px; }
.af:hover { background: var(--vlak2); }
.af-wis { padding: 0 4px; border: 0; background: none; font-size: 13px; font-weight: 500; }

/* een reeks: één foto, alle maten eronder */
.rk { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 32px; align-items: start; padding-block: 28px; border-top: 1px solid var(--lijn); }
.rk-f .tg { border-radius: var(--r2); }
.rk:hover .rk-f .tg { background: var(--vlak2); }
.rk h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.rk h2 a:hover { color: var(--link); }
.rk-z { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.tabel { margin-top: 12px; }
.t-rij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1fr) 84px; column-gap: 16px; align-items: center; min-height: 44px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.3; transition: background .1s, box-shadow .1s; }
.t-kop { min-height: 28px; border-top: 0; font-size: 13px; color: var(--sub); }
.t-rij:not(.t-kop):hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.t-hier { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
/* bezoeker: één keer de vraag om in te loggen, boven de tabel, niet op elke regel */
.t-rij:not(.t-kop) .t-pr .log { display: none !important; }
.t-maat { padding-block: 8px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.t-maat:hover { color: var(--link); }
.t-nr { font-family: var(--mono); font-size: 13px; color: var(--sub); }
.t-pr { text-align: right; white-space: nowrap; }
.t-kp { justify-self: end; }
.rk-meer { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; }
.rk-meer:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabel.dicht .t-rij.t-weg { display: none; }
.rk.los { grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; padding-block: 16px; align-items: center; }
.rk.los .rk-rij { display: grid; grid-template-columns: minmax(0, 3fr) minmax(88px, 1fr) minmax(104px, 1fr) 84px; column-gap: 16px; align-items: center; }
.rk.los h2 { font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.rk.los .rk-z { margin-top: 2px; font-size: 13px; }
.rk.los .t-nr { display: block; margin-top: 2px; }
.lijst-kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); border-top: 1px solid var(--lijn); padding-top: 28px; }
.lijst-meer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 40px; border-top: 1px solid var(--lijn); }
.lijst-meer small { color: var(--sub); font-variant-numeric: tabular-nums; }
.lijst-niets { padding-block: 64px; border-top: 1px solid var(--lijn); text-align: center; color: var(--sub); }
.lijst-niets b { display: block; font-size: 18px; color: var(--inkt); }
.flt-zoek { display: none; }
.flt-klaar { display: none; }
.flt-sluit { display: none; }

/* ---------- productpagina ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; padding-block: 16px 72px; }
.pdp-l { min-width: 0; }
.galerij { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.gal-h { grid-column: 2; }
.gal-h .tg { aspect-ratio: 16 / 9; border-radius: var(--r2); }
.gal-h .tg img { inset: 6% 20%; width: 60%; height: 88%; }
.galerij.een { grid-template-columns: minmax(0, 1fr); }
.galerij.een .gal-h { grid-column: 1; }
.duimen { grid-column: 1; grid-row: 1; display: grid; align-content: start; gap: 8px; }
.duim { padding: 0; border: 0; border-radius: var(--r); background: none; box-shadow: 0 0 0 0 var(--inkt); }
.duim .tg { border-radius: var(--r); }
.duim.aan { box-shadow: 0 0 0 1.5px var(--inkt); }
.pdp-sec { padding-top: 48px; }
.pdp-sec h2 { margin-bottom: 16px; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.tk { max-width: 68ch; font-size: 15px; line-height: 1.65; color: #33363a; }
.tk p + p, .tk ul, .tk ol, .tk h3 + p, .tk .tk-tabel { margin-top: 12px; }
.tk h3, .tk h4 { margin-top: 24px; font-size: 16px; color: var(--inkt); }
.tk ul li { position: relative; padding-left: 16px; }
.tk ul li::before { content: ""; position: absolute; top: .75em; left: 0; width: 5px; height: 1px; background: var(--sub); }
.tk ol { counter-reset: n; }
.tk ol li { position: relative; padding-left: 24px; counter-increment: n; }
.tk ol li::before { content: counter(n); position: absolute; left: 0; color: var(--sub); font-variant-numeric: tabular-nums; }
.tk a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tk-tabel { overflow-x: auto; }
.tk-tabel table { min-width: 100%; border-collapse: collapse; font-size: 14px; }
.tk-tabel th { padding: 8px 16px 8px 0; font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--sub); }
.tk-tabel td { padding: 10px 16px 10px 0; border-top: 1px solid var(--lijn); font-variant-numeric: tabular-nums; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding-block: 10px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.spec dt { color: var(--sub); }
.koop { position: sticky; top: calc(var(--kop-h) + 20px); transition: top .2s ease; }
.koop h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.022em; text-wrap: pretty; }
.koop-nr { margin-top: 8px; font-size: 13px; color: var(--sub); }
.koop-nr span { font-family: var(--mono); }
.koop-maat { margin-top: 20px; }
.koop-maat > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.koop-maat > div:first-child span { color: var(--sub); }
.koop-maat > div:first-child a { font-size: 13px; font-weight: 500; }
.koop-maat > div:first-child a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.koop-maat select { width: 100%; }
.mt-r { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-k { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 36px; padding: 0 10px; border: 1px solid var(--lijn2); border-radius: var(--r); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .12s; }
.mt-k:hover { border-color: var(--inkt); }
.mt-k.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); font-weight: 500; }
.mt-k.nee { color: var(--zacht); border-style: dashed; }
.koop-p { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.koop-pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.koop-pr.opa b { font-size: 22px; color: var(--inkt); }
.koop-pr b { font-size: 28px; line-height: 1.15; letter-spacing: -.022em; font-weight: 500; font-variant-numeric: tabular-nums; }
.koop-pr span { font-size: 14px; color: var(--sub); }
.koop-p .log { display: inline-block; font-size: 15px; font-weight: 500; }
.koop-p .stil { margin-top: 2px; }
.koop-vr { margin-top: 12px; }
.koop-vr .vr { font-size: 14px; white-space: normal; }
.koop-rij { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.teller { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; height: 48px; border: 1px solid var(--lijn2); border-radius: var(--r); transition: border-color .12s; }
.teller:focus-within { border-color: var(--inkt); }
.teller button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sub); }
.teller button:hover { color: var(--inkt); }
.teller input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.koop-rij .knop { height: 48px; }
.koop-som { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; }
.koop-som b { font-size: 16px; color: var(--inkt); }
.koop-acties { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 14px; }
.koop-acties a, .koop-acties button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sub); }
.koop-acties a:hover, .koop-acties button:hover { color: var(--inkt); }
.koop-zek { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.koop-zek li { display: flex; align-items: flex-start; gap: 10px; padding-block: 4px; color: var(--sub); }
.koop-zek svg { flex: none; margin-top: 1px; }
.koop-zek a:hover { color: var(--inkt); }
.koop-in { display: grid; gap: 8px; margin-top: 16px; }
.pdp-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; }
.ook { padding-bottom: 96px; }
.ook .h2 { margin-bottom: 24px; }

/* ---------- wagen en afrekenen ---------- */
.wagen { display: grid; grid-template-columns: minmax(0, 1fr) 368px; column-gap: 64px; align-items: start; padding-bottom: 96px; }
.wg-rij { display: grid; grid-template-columns: 88px minmax(0, 1fr) 104px 104px 32px; column-gap: 20px; align-items: center; padding-block: 16px; border-top: 1px solid var(--lijn); }
.wg-rij .tg { border-radius: var(--r); }
.wg-n { min-width: 0; font-size: 15px; line-height: 1.35; }
.wg-n a:hover { color: var(--link); }
.wg-n small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 4px; color: var(--sub); }
.wg-n .t-nr { font-size: 13px; }
.wg-t { text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-t small { display: block; font-weight: 400; color: var(--sub); }
.wg-weg { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--sub); }
.wg-weg:hover { background: var(--vlak); color: var(--inkt); }
.wg-rij .teller { height: 36px; grid-template-columns: 28px minmax(0, 1fr) 28px; }
.wg-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; }
.wg-tools > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wg-tools button, .wg-tools a { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sub); }
.wg-tools button:hover, .wg-tools a:hover { color: var(--inkt); }
.som { position: sticky; top: calc(var(--kop-h) + 20px); padding: 24px; border-radius: var(--r2); background: var(--vlak); transition: top .2s ease; }
.som h2 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.som-r { display: flex; justify-content: space-between; gap: 16px; padding-block: 5px; font-size: 14px; font-variant-numeric: tabular-nums; }
.som-r span:first-child { color: var(--sub); }
.som-t { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn2); font-size: 18px; }
.som-t span:first-child { color: var(--inkt); }
.som-t span:last-child { font-weight: 500; }
.som .knop { margin-top: 16px; }
.som .meer { margin-top: 12px; }
.som-regels { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn2); }
.som-regel { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding-block: 6px; font-size: 13px; line-height: 1.3; }
.som-regel .tg { width: 44px; height: 44px; border-radius: 4px; background: #fff; }
.som-regel em { font-variant-numeric: tabular-nums; white-space: nowrap; }
.leeg-w { padding-block: 64px 120px; text-align: center; }
.leeg-w h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.leeg-w p { margin-top: 8px; color: var(--sub); }
.leeg-w .knoppen { justify-content: center; margin-top: 20px; }
.stap-sec { padding-block: 28px; border-top: 1px solid var(--lijn); }
.stap-sec:first-child { padding-top: 0; border-top: 0; }
.stap-sec h2 { margin-bottom: 16px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.klaar-v { padding-block: 40px 96px; max-width: 720px; }
.klaar-i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--oranje); }
.klaar-v .lead { margin-top: 12px; }
.klaar-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-top: 32px; padding-block: 24px; border-block: 1px solid var(--lijn); font-size: 14px; }
.klaar-g small { display: block; color: var(--sub); }

/* snel bestellen als pagina */
.sb-pagina { padding-bottom: 96px; }
.hulp3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-top: 32px; font-size: 14px; }
.hulp3 b { display: block; font-size: 15px; }
.hulp3 span { color: var(--sub); }

/* ---------- account ---------- */
.acc { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 56px; align-items: start; padding-bottom: 96px; }
.acc-nav { position: sticky; top: calc(var(--kop-h) + 20px); display: grid; gap: 2px; transition: top .2s ease; }
.acc-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; margin-left: -10px; border-radius: var(--r); font-size: 14px; color: var(--sub); }
.acc-nav a:hover { color: var(--inkt); }
.acc-nav a.aan { background: var(--vlak); color: var(--inkt); font-weight: 500; }
.acc-kop { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.acc-kop h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-bottom: 40px; }
.cijfer { display: block; padding: 20px; border-radius: var(--r2); background: var(--vlak); }
a.cijfer:hover { background: var(--vlak2); }
.cijfer small { display: block; color: var(--sub); }
.cijfer b { display: block; margin-top: 4px; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; font-variant-numeric: tabular-nums; }
.lr { display: grid; align-items: center; column-gap: 16px; min-height: 52px; padding-block: 8px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.35; }
.lr.kopr { min-height: 28px; padding-block: 0 6px; border-top: 0; font-size: 13px; color: var(--sub); }
.lr:not(.kopr):hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.lr .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-bes { grid-template-columns: 130px 104px minmax(0, 1fr) 128px 104px; }
.lr-fac { grid-template-columns: 130px 104px 104px minmax(0, 1fr) 104px 88px; }
.lr-lij { grid-template-columns: minmax(0, 1fr) 96px 104px 104px; }
.lr b { font-weight: 500; }
.lr > * { min-width: 0; overflow-wrap: anywhere; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn2); }
.st.groen i { background: var(--groen); }
.st.blauw i { background: var(--oranje); }
.st.geel i { background: var(--geel); }
.acc-sec { margin-top: 40px; }
.acc-sec h2 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.acc-vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.vak { padding: 20px; border-radius: var(--r2); background: var(--vlak); font-size: 14px; line-height: 1.5; }
.vak h3 { margin-bottom: 4px; font-size: 15px; }
.vak p { color: var(--sub); }
.vak .meer { margin-top: 10px; }
.tijdlijn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; }
.tl { padding-top: 12px; border-top: 2px solid var(--lijn); font-size: 14px; line-height: 1.35; }
.tl.aan { border-top-color: var(--oranje); }
.tl small { display: block; color: var(--sub); }

/* ---------- informatie ---------- */
.info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-bottom: 96px; }
.info-l { grid-column: 1 / span 7; min-width: 0; }
.info-r { grid-column: 9 / span 4; min-width: 0; }
.info-sticky { position: sticky; top: calc(var(--kop-h) + 20px); transition: top .2s ease; }
.paneel { padding: 24px; border-radius: var(--r2); background: var(--vlak); font-size: 14px; line-height: 1.5; }
.paneel + .paneel { margin-top: var(--gat); }
.paneel h2, .paneel h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.paneel .knop { margin-top: 12px; }
.uren { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.uren dt { color: var(--sub); }
.uren .nu { color: var(--inkt); font-weight: 500; }
.groot-b { display: block; overflow: hidden; height: clamp(220px, 28vw, 480px); margin-bottom: 64px; background: var(--vlak2); }
.groot-b img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.drie > div { padding-top: 12px; border-top: 1px solid var(--lijn2); }
.drie b { display: block; font-size: 16px; }
.drie span { display: block; margin-top: 2px; font-size: 14px; color: var(--sub); }
.artikel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-bottom: 96px; }
.artikel-h { grid-column: 1 / span 8; }
.artikel-h h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.artikel-h .stil { margin-top: 12px; }
.artikel-f { margin-top: 24px; overflow: hidden; border-radius: var(--r2); background: var(--vlak); }
.artikel-f img { width: 100%; }
.artikel-t { grid-column: 1 / span 8; margin-top: 32px; }
.artikel-t.tk { max-width: none; }
.artikel-r { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.artikel-r .info-sticky > h3 { margin-bottom: 8px; font-size: 14px; }
.artikel-r a.rl { display: block; padding-block: 8px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.35; color: var(--sub); }
.artikel-r a.rl:hover { color: var(--inkt); }
.inlog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 32px 96px; }
.inlog-l { grid-column: 1 / span 5; }
.inlog-r { grid-column: 7 / span 6; }
.inlog-l h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.inlog-l form { display: grid; gap: 16px; margin-top: 24px; }
.ok-melding { display: none; padding: 12px 16px; border-radius: var(--r); background: var(--vlak); font-size: 14px; }
.ok-melding.aan { display: block; }

/* ---------- voet ---------- */
.voet { flex-shrink: 0; background: #17181a; color: rgba(255,255,255,.72); font-size: 14px; }
.voet a { transition: color .12s; }
.voet a:hover { color: #fff; }
.voet-kop { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; padding-block: 56px 40px; }
.voet-zin { display: flex; align-items: center; gap: 20px; min-width: 0; }
.voet-zin img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 0; background: rgba(255,255,255,.12); }
.voet-zin p { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; font-weight: 500; color: #fff; text-wrap: balance; }
.voet-kop .knop { flex: none; }
.voet-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-top: 56px; }
.voet-kop + .voet-contact { padding-top: 0; }
.vc { display: block; min-width: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.vc small { display: block; line-height: 1.4; color: rgba(255,255,255,.62); }
.vc b { display: block; margin-top: 2px; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; letter-spacing: -.014em; font-weight: 500; color: #fff; }
.vc > span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.62); }
.vc .nuopen { display: inline-flex; color: rgba(255,255,255,.62); }
.vc .nuopen i { background: rgba(255,255,255,.3); }
.vc .nuopen.open i { background: #3ecf97; }
.voet-kol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 48px 40px; }
.voet-logo img { width: 211px; height: auto; }
.voet-merk p { margin-top: 12px; color: rgba(255,255,255,.62); }
.voet-groep { min-width: 0; }
.voet-groep h4 { margin-bottom: 10px; font-size: 14px; color: #fff; }
.voet-groep h4 button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0; border: 0; background: none; font-weight: 500; text-align: left; cursor: default; }
.voet-groep h4 svg { display: none; }
.voet-groep li { padding-block: 3px; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.62); }
.voet-onder ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* afrekenen: niets dat afleidt */
body.kassa { --kop-h: 72px; }
.kop-kassa { border-bottom: 1px solid var(--lijn); }
.kop-kassa .kop-r { grid-template-columns: auto minmax(0, 1fr) auto; }
.kop-kassa .kop-acties { grid-column: 3; gap: 24px; }
.kop-kassa .meer { min-height: 44px; }
.voet-kaal { flex-shrink: 0; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.voet-kaal > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; }
.voet-kaal a:hover { color: var(--inkt); }
.voet-kaal ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- mockupbalk en melding ---------- */
.mkbalk { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 8px 24px -8px rgba(23,24,26,.2); font-size: 13px; color: var(--sub); transition: opacity .15s; }
@media (min-width: 1025px) {
  .mkbalk > :not(.mk-t) { display: none; }
  .mkbalk:hover, .mkbalk:focus-within { height: 40px; padding: 0 6px 0 14px; }
  .mkbalk:hover > :not(.mk-t), .mkbalk:focus-within > :not(.mk-t) { display: inline-flex; }
}
.mkbalk.weg { opacity: 0; pointer-events: none; }
.mkbalk a:hover { color: var(--inkt); }
.mk-t { color: var(--inkt); font-weight: 500; }
.mk-stand { display: inline-flex; height: 28px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.mk-stand button { padding: 0 8px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); }
.mk-stand button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(23,24,26,.14); }
.melding { position: fixed; top: 16px; right: 16px; z-index: 70; display: none; width: min(380px, calc(100vw - 32px)); padding: 12px; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 16px 40px -12px rgba(23,24,26,.28); font-size: 14px; line-height: 1.35; }
.melding.aan { display: block; animation: paneel .14s ease-out; }
.ml { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ml .tg { width: 52px; height: 52px; border-radius: 4px; }
.ml small { display: block; color: var(--sub); }
.ml-k { display: flex; gap: 8px; grid-column: 1 / -1; margin-top: 10px; }
.ml-k .knop { flex: 1; }

/* ---------- overzichtspagina van het ontwerp ---------- */
.ow-beeld { overflow: hidden; border-radius: var(--r2); box-shadow: 0 0 0 1px var(--lijn); }
.ow-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.ow-twee figcaption { margin-bottom: 8px; font-size: 14px; color: var(--sub); }
.ow-sec { padding-bottom: 72px; }
.ow-sec h2 { margin-bottom: 20px; }
.ow-lijst { columns: 3; column-gap: var(--gat); font-size: 14px; }
.ow-lijst a { display: block; padding-block: 5px; break-inside: avoid; color: var(--link); }
.ow-lijst a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ow-lijst b { display: block; margin-top: 16px; font-size: 14px; color: var(--inkt); break-after: avoid; }
.ow-lijst b:first-child { margin-top: 0; }
.ow-rij { display: grid; grid-template-columns: 280px minmax(0, 1fr) 132px; column-gap: var(--gat); padding-block: 12px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.45; }
.ow-rij span:nth-child(2) { color: var(--sub); }
.ow-rij.kopr { padding-block: 0 8px; border-top: 0; font-size: 13px; color: var(--sub); }
.ow-punten li { padding-block: 10px; border-top: 1px solid var(--lijn); font-size: 15px; line-height: 1.5; }
.ow-punten b { display: block; }
.ow-punten span { color: var(--sub); }

/* ---------- tussenmaten ---------- */
@media (max-width: 1360px) {
  .balk-m { gap: 20px; }
  .balk-rest { gap: 16px; }
  .kop-acties { gap: 20px; }
  .open-t h1 { font-size: 56px; }
}
@media (max-width: 1240px) {
  :root { --sec: 88px; --gut: 32px; }
  .kop-r, .balk-r { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .zoek-pan { width: calc(100vw - 2 * var(--gut) - 224px); }
  .logo { width: 186px; }
  .balk-m > a, .balk-rest > a, .mk { font-size: 14px; }
  .balk-m { gap: 16px; }
  .balk-rest > a:nth-child(2) { display: none; }
  .open-t h1 { font-size: 52px; }
  .pdp { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; }
  .wagen { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
  .cat { grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; }
  .subs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kop-tel .nuopen { display: none; }
  .t-rij { grid-template-columns: minmax(0, 1.4fr) 88px 80px 100px 80px; column-gap: 12px; }
  .rk { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; }
  .wg-rij { grid-template-columns: 72px minmax(0, 1fr) 96px 96px 32px; column-gap: 16px; }
  .acc { grid-template-columns: 180px minmax(0, 1fr); column-gap: 40px; }
  .snel-t { grid-column: 1 / span 5; }
  .snel-k { grid-column: 6 / span 7; }
}
@media (max-width: 1100px) {
  .balk-rest > a { display: none; }
  .t-nr { display: none; }
  .t-rij { grid-template-columns: minmax(0, 1fr) 80px 100px 80px; }
  .t-kop > span:nth-child(2) { display: none; }
  .rk.los .t-nr { display: none; }
  .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) 80px 100px 80px; }
  .lr-fac { grid-template-columns: 112px 96px 96px minmax(0, 1fr) 96px 80px; }
}
/* ---------- tablet: menu in een lade, zoekbalk eronder ---------- */
@media (max-width: 1024px) {
  .kop-kassa .logo { justify-self: start; grid-column: 1; }
  body.kassa { --kop-h: 56px; }
  :root { --kop1: 56px; --kop-h: 56px; --sec: 72px; --sec-s: 56px; --gut: 24px; }
  body.menu-uit { --kop-h: 56px; }
  html { scroll-padding-top: 72px; }
  .balk { display: none; }
  .kop { border-bottom: 1px solid var(--lijn); }
  .kop-r { position: relative; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 8px; height: 56px; }
  .menuknop { display: inline-flex; justify-self: start; margin-left: -4px; }
  .logo { width: 172px; justify-self: center; }
  .kop-r > .zoek { display: none; }
  .kop-acties { justify-self: end; gap: 4px; margin-right: -3px; }
  .kop-tel { display: none; }
  .actie { justify-content: center; width: 40px; }
  .actie span { display: none; }
  .actie-tel { display: inline-flex; }
  .actie-acc { display: none; }
  .actie-wagen b[hidden] { display: none; }
  .actie-wagen b { position: absolute; top: 3px; left: 20px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--oranje); color: var(--inkt); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
  .zoek-uit .actie-tel { display: none; }
  .zoek-uit .zoek-knop { display: inline-flex; }
  .zoek-tel { display: flex; max-width: none; height: 44px; margin: 12px var(--gut) 8px; }
  .zoek-tel input { font-size: 16px; }
  .zoek-pan { position: fixed; top: 112px; left: var(--gut); right: var(--gut); width: auto; max-height: calc(100vh - 128px); }
  .zs-k.twee { grid-template-columns: minmax(0, 1fr); }
  .zs-k.twee .zs-rechts { order: -1; border-left: 0; border-bottom: 1px solid var(--lijn); }
  .tel-menu { display: block; }
  .tel-menu > div { padding-inline: var(--gut); }
  .aantal, .teller input, .inv, .veld input, .veld select, .veld textarea, select.klein, .lijst-zoek, .sb-in textarea { font-size: 16px; }
  .koop-acties a, .koop-acties button, .koop-zek a, .koop-maat > div:first-child a, .log { display: inline-flex; align-items: center; min-height: 40px; }
  .koop-zek li { align-items: center; padding-block: 0; }
  .wg-tools button, .wg-tools a { min-height: 40px; }
  .mkbalk { position: static; order: 9; justify-content: center; flex-wrap: wrap; height: auto; min-height: 48px; padding: 8px 16px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--lijn); }
  .melding { top: auto; bottom: 16px; right: 16px; }

  .open-t { padding-block: 40px 32px; row-gap: 16px; }
  .open-t h1 { grid-column: 1 / -1; font-size: 44px; }
  .open-r { grid-column: 1 / span 9; }
  .feiten { padding-block: 32px; }
  .feit b { font-size: 22px; }
  .snel-t { grid-column: 1 / -1; margin-bottom: 24px; }
  .snel-k { grid-column: 1 / -1; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kaarten > :nth-child(4) { display: none; }
  .advies-f { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .advies-t { grid-column: 1 / -1; margin-top: 24px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kennis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art h3 { font-size: 16px; }
  .cat { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .zij { position: fixed; inset: 0; z-index: 62; display: none; max-height: none; margin: 0; padding: 0 var(--gut) 88px; background: #fff; overflow-y: auto; }
  .zij.open { display: block; }
  .flt-sluit { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 56px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); background: #fff; border-bottom: 1px solid var(--lijn); font-size: 18px; font-weight: 500; }
  .flt-sluit button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; }
  .flt-klaar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 63; display: block; padding: 12px var(--gut); background: #fff; border-top: 1px solid var(--lijn); }
  .boom { padding-top: 12px; }
  .filterknop { display: inline-flex; }
  .cat-boom { display: block; margin-bottom: 16px; }
  .pdp { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; padding-block: 12px 56px; }
  .wagen { grid-template-columns: minmax(0, 1fr); }
  .som { position: static; margin-top: 24px; }
  .acc { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .acc-nav { position: static; display: flex; gap: 4px; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); margin-bottom: 24px; scrollbar-width: none; }
  .acc-nav a { flex: none; margin: 0; white-space: nowrap; }
  .info-l { grid-column: 1 / -1; }
  .info-r { grid-column: 1 / -1; margin-top: 40px; }
  .info-sticky { position: static; }
  .artikel-h, .artikel-t { grid-column: 1 / -1; }
  .artikel-r { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .inlog-l { grid-column: 1 / -1; }
  .inlog-r { grid-column: 1 / -1; margin-top: 40px; }
  .voet-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .vc b { font-size: 20px; }
  .voet-kol { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 40px; }
  .voet-merk { grid-column: 1 / -1; margin-bottom: 32px; }
  .ow-lijst { columns: 2; }
}
@media (min-width: 1025px) { .cat-boom { display: none; } }
@media (max-width: 860px) {
  .subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdp { display: flex; flex-direction: column; align-items: stretch; }
  .pdp-l { display: contents; }
  .galerij { order: 1; margin-bottom: 20px; }
  .koop { position: static; order: 2; }
  .pdp-onder { order: 3; min-width: 0; }
}
/* ---------- telefoon ---------- */
@media (max-width: 760px) {
  :root { --gut: 16px; --gat: 16px; --sec: 64px; --sec-s: 48px; }
  .h1, .pkop h1, .cat-kop h1, .artikel-h h1 { font-size: 30px; }
  .h2 { font-size: 24px; }
  .skop { margin-bottom: 20px; }
  .kruimel { padding-top: 4px; }
  .kr-breed { display: none; }
  .kr-terug { display: inline-flex; margin-left: -4px; }
  .tel-menu a:nth-child(n+3):not(:nth-child(6)) { display: none; }
  .logo { width: 156px; }
  .open-t { padding-block: 28px 24px; }
  .open-t h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.034em; }
  .open-r { grid-column: 1 / -1; }
  .open-r p { font-size: 15px; }
  .open-r .knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-r .knoppen .knop { padding: 0 8px; }
  .open-b { height: 210px; }
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block: 28px 0; }
  .feit b { font-size: 20px; }
  .feit span { margin-top: 2px; font-size: 13px; }
  .groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .gt .tg { aspect-ratio: 4 / 3; }
  .gt .tg img { inset: 8% 14%; width: 72%; height: 84%; }
  .gt-k { margin-top: 10px; display: block; }
  .gt-k b { display: block; font-size: 15px; }
  .gt-k small { display: block; }
  .gt p { display: none; }
  .sb-kop { display: none; }
  .sb-romp, .sb.groot .sb-romp { grid-template-columns: minmax(0, 1fr); }
  .sb-in { border-right: 0; border-bottom: 1px solid var(--lijn); }
  .sb-in textarea { padding-block: 12px; background: none; font-size: 16px; line-height: 28px; }
  .sb-rij { height: auto; min-height: 64px; padding-block: 8px; }
  .sb-rij.leeg { display: none; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .kaarten > :nth-child(4) { display: grid; }
  .pk-o { flex-wrap: wrap; }
  .aantal { width: 48px; height: 40px; }
  .in { width: 44px; height: 40px; }
  .team { gap: 16px; }
  .tm b { font-size: 14px; }
  .kennis { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kennis .art { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .kennis .art .art-f { grid-row: span 2; aspect-ratio: 4 / 3; border-radius: var(--r); }
  .kennis .art h3 { margin-top: 0; font-size: 15px; }
  .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .hub-g { padding-bottom: 40px; }
  .hub-b { margin-bottom: 32px; }
  .pkop { padding-block: 12px 24px; }
  .pkop-r, .cat-kop { display: block; }
  .cat-kop { padding-block: 8px 20px; }
  .lijst-balk { gap: 8px; }
  .lijst-tel { width: 100%; order: -1; }
  .lijst-acties { flex-wrap: wrap; width: 100%; }
  .knop.filterknop { flex: 1; height: 44px; }
  .lijst-zoek { display: none; }
  .lead-2 { display: none; }
  select.klein { flex: 1; height: 44px; min-height: 44px; }
  .seg { display: none; }
  .flt-zoek { display: block; padding-block: 16px 0; }
  .flt-zoek input { width: 100%; }
  .rk { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding-block: 20px; }
  .rk h2 { font-size: 15px; line-height: 1.35; letter-spacing: 0; }
  .rk-z { font-size: 13px; }
  .rk .tabel { grid-column: 1 / -1; margin-top: 12px; }
  .rk-b { display: contents; }
  .rk-meer { grid-column: 1 / -1; }
  .rk-koptekst { align-self: center; }
  .t-kop { display: none; }
  .t-rij:not(.t-kop), .bezoeker .t-rij:not(.t-kop) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m p" "v k"; column-gap: 12px; row-gap: 2px; padding-block: 10px; min-height: 0; }
  .t-maat { grid-area: m; padding-block: 0; }
  .t-pr { grid-area: p; }
  .t-vr { grid-area: v; align-self: center; }
  .t-kp { grid-area: k; }
  .t-rij:not(.t-kop):hover { background: none; box-shadow: none; }
  .rk.los { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .rk.los .rk-rij, .bezoeker .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "v p" "v k"; row-gap: 6px; }
  .rk.los .rk-n { grid-area: n; }
  .rk.los .t-vr { grid-area: v; align-self: start; }
  .rk.los .t-pr { grid-area: p; }
  .rk.los .t-kp { grid-area: k; }
  .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .galerij { grid-template-columns: minmax(0, 1fr); }
  .gal-h { grid-column: 1; }
  .gal-h .tg { aspect-ratio: 1; }
  .gal-h .tg img { inset: 7%; width: 86%; height: 86%; }
  .duimen { grid-column: 1; grid-row: 2; grid-auto-flow: column; grid-auto-columns: 56px; justify-content: start; }
  .koop h1 { font-size: 22px; }
  .pdp-sec { padding-top: 36px; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .pdp-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #fff; border-top: 1px solid var(--lijn); transform: translateY(110%); transition: transform .18s; }
  .pdp-balk.aan { transform: none; }
  .pdp-balk b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
  .pdp-balk small { color: var(--sub); }
  .ook { padding-bottom: 64px; }
  .wg-rij { grid-template-columns: 64px minmax(0, 1fr) 32px; grid-template-areas: "f n x" "f t s"; column-gap: 12px; row-gap: 8px; align-items: start; }
  .wg-f { grid-area: f; }
  .wg-n { grid-area: n; font-size: 14px; }
  .wg-weg { grid-area: x; margin: -6px -6px 0 0; }
  .wg-rij .teller { grid-area: t; width: 124px; height: 40px; grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .wg-t { grid-area: s; grid-column: 2 / span 2; justify-self: end; align-self: center; }
  .klaar-g { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cijfer { padding: 16px; }
  .cijfer b { font-size: 20px; }
  .acc-vakken { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lr-bes, .lr-fac, .lr-lij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .lr.kopr { display: none; }
  .lr .mob-weg { display: none; }
  .tijdlijn { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .drie, .hulp3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .groot-b { margin-bottom: 40px; }
  .voet-kop { display: block; padding-block: 40px 28px; }
  .voet-zin { align-items: flex-start; gap: 14px; }
  .voet-zin img { width: 48px; height: 48px; }
  .voet-zin p { font-size: 22px; }
  .voet-kop .knop { width: 100%; margin-top: 20px; }
  .voet-contact { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-top: 40px; }
  .voet-kop + .voet-contact { padding-top: 0; }
  .vc b { font-size: 18px; }
  .voet-kol { display: block; padding-block: 32px 16px; }
  .voet-groep { border-top: 1px solid rgba(255,255,255,.14); }
  .voet-groep h4 { margin: 0; }
  .voet-groep h4 button { height: 48px; cursor: pointer; }
  .voet-groep h4 svg { display: block; transition: transform .15s; }
  .voet-groep.open h4 svg { transform: rotate(180deg); }
  .voet-groep ul { display: none; padding-bottom: 12px; }
  .voet-groep.open ul { display: block; }
  .voet-groep li { padding-block: 6px; }
  .voet-onder { flex-direction: column; }
  .ow-twee { grid-template-columns: minmax(0, 1fr); }
  .ow-lijst { columns: 1; }
  .ow-rij { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ow-rij.kopr { display: none; }
}
@media (max-width: 400px) {
  .logo { width: 140px; }
  .tel-menu a, .tm-meer { font-size: 14px; }
}
@media (hover: none) {
  .t-rij:not(.t-kop):hover, .lr:not(.kopr):hover { background: none; box-shadow: none; }
  .aantal, .teller input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* ---------- Lasmeesters: lasprocessen op de startpagina ---------- */
.skop-a { flex: none; }
.pts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px var(--gat); }
.pt { display: block; min-width: 0; }
.pt-f { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r2); background: var(--vlak2); }
.pt-f img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pt:hover .pt-f img { transform: scale(1.025); }
.pt-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.pt-k b { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.pt-k small { color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt p { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--sub); }

/* ---------- huren ---------- */
.huur-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: start; }
.huur-t { grid-column: 1 / span 4; position: sticky; top: calc(var(--kop-h) + 32px); }
.huur-t .lead { margin-top: 12px; }
.huur-t .knoppen { margin-top: 24px; }
.huur-k { grid-column: 6 / span 7; min-width: 0; }
.seg-los { margin-bottom: 12px; background: var(--vlak2); }
.vlak-sec .seg-los button { padding-inline: 14px; }
.hr { border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn); overflow: hidden; }
.hr-rij { display: grid; grid-template-columns: 64px minmax(0, 1fr) 112px 112px 18px; column-gap: 16px; align-items: center; padding: 10px 16px 10px 10px; border-top: 1px solid var(--lijn); transition: background .1s; }
.hr-rij:first-child { border-top: 0; }
.hr-rij:hover { background: var(--vlak); }
.hr-rij .tg { width: 64px; height: 64px; border-radius: var(--r); }
.hr-rij .tg img { inset: 6%; width: 88%; height: 88%; }
.hr-n { min-width: 0; font-size: 15px; line-height: 1.3; }
.hr-n b { display: block; }
.hr-n small { display: block; margin-top: 2px; color: var(--sub); font-variant-numeric: tabular-nums; }
.hr-p { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.hr-p b { display: block; font-size: 16px; }
.hr-p small { color: var(--sub); }
.hr-go { color: var(--sub); }

/* ---------- twee grote foto's: demo en lasschool ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.duo-k { display: block; min-width: 0; }
.duo-f { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r2); background: var(--vlak2); margin-bottom: 16px; }
.duo-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.duo-k:hover .duo-f img { transform: scale(1.02); }
.duo-k > b { display: block; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.duo-z { display: block; margin-top: 6px; color: var(--sub); max-width: 56ch; }

/* ---------- merken ---------- */
.merk-sec { padding-top: 0 !important; }
.mrk-r { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; padding-top: 32px; border-top: 1px solid var(--lijn); }
.mrk-t { grid-column: 1 / span 6; }
.mrk-t p { margin-top: 4px; font-size: 14px; color: var(--sub); max-width: 58ch; }
.mrks { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mrk { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r2); box-shadow: 0 0 0 1px var(--lijn); transition: box-shadow .12s; }
.mrk:hover { box-shadow: 0 0 0 1px var(--inkt); }
.mrk img { width: 100%; height: 100%; object-fit: cover; }
.mk-r { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px var(--gat); }
.mk-k { display: block; min-width: 0; }
.mk-l { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r2); box-shadow: 0 0 0 1px var(--lijn); }
.mk-l img { width: 100%; height: 100%; object-fit: cover; }
.mk-k b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; }
.mk-k small { color: var(--sub); line-height: 1.35; display: block; }
.mrk-kop { margin-top: 56px; margin-bottom: 20px; }
.mk-l2 { columns: 4; column-gap: var(--gat); font-size: 14px; }
.mk-l2 a { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid var(--lijn); break-inside: avoid; }
.mk-l2 a:hover { color: var(--link); }
.mk-l2 small { color: var(--sub); font-variant-numeric: tabular-nums; }

/* ---------- blokken op informatiepagina's ---------- */
.blokken { padding-bottom: 72px; }
.bl { padding-block: 40px; }
.bl:first-child { padding-top: 0; }
.bl .skop { margin-bottom: 24px; }
.bl-smal { max-width: 780px; }
.bl-form { max-width: 780px; }
.bl-t { margin-bottom: 8px; }
.bl-l { margin-bottom: 24px; }
.pkop-k { margin-top: 20px; }
.pk2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: end; }
.pk2 h1 { grid-column: 1 / span 7; font-size: 52px; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.pk2 > div { grid-column: 8 / span 5; }
.pkop-ruim { padding-block: 32px 40px; }
.pkop .lead p + p { margin-top: 8px; }
.kop-foto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; padding-block: 24px 64px; }
.kop-foto > div:first-child { grid-column: 1 / span 6; }
.kop-foto h1 { font-size: 52px; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.kop-foto .lead { margin-top: 16px; }
.kop-foto-f { grid-column: 8 / span 5; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r2); background: var(--vlak); }
.kop-foto-f img { width: 100%; height: 100%; object-fit: cover; }
.krs { display: grid; gap: 40px var(--gat); }
.krs.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.krs.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kr { min-width: 0; font-size: 14px; line-height: 1.5; }
.kr-f { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 14px; border-radius: var(--r2); background: var(--vlak); }
.kr-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kr > b { display: block; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.kr > small { display: block; margin-top: 2px; color: var(--sub); }
.kr p { margin-top: 6px; color: var(--sub); }
.kr .meer { margin-top: 12px; }
.kr-ul { margin-top: 10px; }
.kr-ul li { position: relative; padding-left: 16px; padding-block: 2px; color: var(--sub); }
.kr-ul li::before { content: ""; position: absolute; top: .8em; left: 0; width: 6px; height: 1px; background: var(--sub); }
.kr-dl { margin-top: 10px; }
.kr-dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding-block: 6px; border-top: 1px solid var(--lijn); }
.kr-dl dt { color: var(--sub); }
.mstr { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 16px 24px 16px 16px; border-radius: var(--r2); background: var(--vlak); font-size: 14px; line-height: 1.5; }
.mstr-f { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r); background: #fff; }
.mstr-f img { width: 100%; height: 100%; object-fit: cover; }
.mstr small { display: block; color: var(--sub); }
.mstr b { display: block; font-size: 16px; }
.mstr p { margin-top: 2px; color: var(--sub); max-width: 62ch; }
.mstr .knop { margin-top: 10px; }
.info-sticky .mstr { grid-template-columns: 88px minmax(0, 1fr); margin-top: var(--gat); padding: 16px; }
.fqs { margin-top: 16px; }
.fq { border-top: 1px solid var(--lijn); }
.fq:last-child { border-bottom: 1px solid var(--lijn); }
.fq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding-block: 10px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary svg { flex: none; color: var(--sub); transition: transform .15s; }
.fq[open] summary svg { transform: rotate(180deg); }
.fq .tk { padding-bottom: 16px; }
.stap-r { display: grid; gap: var(--gat); margin-top: 20px; counter-reset: st; }
.stap-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stap-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stap-r li { padding-top: 12px; border-top: 1px solid var(--lijn2); font-size: 14px; line-height: 1.45; }
.st-n { display: block; margin-bottom: 8px; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.stap-r b { display: block; font-size: 16px; line-height: 1.3; }
.stap-r span:last-child { display: block; margin-top: 2px; color: var(--sub); }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 32px; border-radius: var(--r2); background: var(--vlak); }
.cta b { display: block; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.cta p { margin-top: 4px; color: var(--sub); }
.cta .knop { flex: none; }
.tk-lead { color: var(--sub); margin-top: 12px; font-size: 16px; line-height: 1.55; }
.tk-lead p + p { margin-top: 8px; }
.advies-t > .h2 + .stappen, .advies-t .tk-lead + .stappen { margin-top: 20px; }
.p-ruim { margin-top: 8px; }
.p-open { margin-bottom: 10px; }
.paneel .kr-ul { margin-top: 4px; }
.p-boven { margin-top: var(--gat); }
.kennis-los { padding-bottom: 96px; }
.artikel { margin-top: 24px; }
.artikel-k { margin-top: 16px; }
.artikel-t .bl { padding-block: 24px; }
.artikel-t .krs.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artikel-t .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.artikel-t .tk + .tk { margin-top: 16px; }
.artikel-t .tk { max-width: 68ch; }
.artikel-t .tk-tabel { max-width: 100%; }
.artikel-f { aspect-ratio: 16 / 9; }
.artikel-f img { height: 100%; object-fit: cover; }

/* formulieren */
.f-kop { margin-top: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.velden > .f-kop:first-child { margin-top: 0; }
.f-t { margin-bottom: 4px; }
.f-s { margin-bottom: 20px; font-size: 14px; }
.f-zin { flex: 1 1 240px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.chip span, .veld .chip span { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid var(--lijn2); border-radius: var(--r); font-size: 14px; font-weight: 400; transition: border-color .12s; }
.chip:hover span { border-color: var(--inkt); }
.chip input:checked + span { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--oranje); outline-offset: 2px; }
.keus-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keus-k { grid-template-columns: 20px minmax(0, 1fr); }
.keus-k input[type=checkbox] { border-radius: 3px; }
.keus-k input[type=checkbox]:checked { border: 5px solid var(--inkt); }
.keus-k:has(em) { grid-template-columns: 20px minmax(0, 1fr) auto; }
.fv-los { font-size: 15px; }

/* de keuzehulp */
.kh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: start; margin-top: 8px; }
.kh-v { grid-column: 1 / span 6; display: grid; gap: 24px; }
.kh-t { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.012em; }
.kh-t span { font-size: 13px; font-weight: 400; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.kh-q.wacht { opacity: .45; }
.chip-k { min-height: 44px; padding: 0 16px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; font-size: 15px; transition: border-color .12s, background .12s; }
.chip-k:hover:not(:disabled) { border-color: var(--inkt); }
.chip-k.aan { border-color: var(--inkt); background: var(--inkt); color: #fff; }
.chip-k:disabled { cursor: default; }
.kh-u { grid-column: 8 / span 5; min-width: 0; }
.kh-a { padding: 24px; border-radius: var(--r2); background: var(--vlak); }
.kh-a small { display: block; color: var(--sub); }
.kh-a h3 { margin-top: 2px; font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.kh-a p { margin-top: 8px; color: var(--sub); }
.kh-a .knoppen { margin-top: 16px; }
.kh-tips { margin-top: 12px; }
.kh-tip { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-block: 10px; border-top: 1px solid var(--lijn); }
.kh-tip:first-child { border-top: 0; }
.kh-tip .tg { width: 72px; height: 72px; border-radius: var(--r); }
.kh-tip small { display: block; color: var(--sub); }
.kh-tip b { display: block; font-size: 15px; line-height: 1.3; }
.kh-tip em { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--sub); }

/* ---------- menu ---------- */
.mega-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gat); }
.mt-f .tg { aspect-ratio: 1; }
.mega-r { display: grid; align-content: start; gap: 20px; }
.mh-m { display: flex; justify-content: space-between; gap: 12px; padding-block: 5px; color: var(--inkt); }
.mh-m small { color: var(--sub); font-variant-numeric: tabular-nums; }
.ms-i { grid-template-columns: 40px minmax(0, 1fr); }
.ms-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--vlak); }
.ms:hover .ms-ic { background: #fff; }
.mega-foto { display: block; }
.mega-foto span { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r2); background: var(--vlak); }
.mega-foto img { width: 100%; height: 100%; object-fit: cover; }
.mega-foto small { display: block; margin-top: 8px; color: var(--sub); line-height: 1.35; }
.lade-btw { display: inline-flex; height: 36px; margin-top: 4px; }
.lade-btw button { padding-inline: 12px; }

/* ---------- lijst ---------- */
.cat-a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.geen-f.rk { grid-template-columns: minmax(0, 1fr); }
.geen-f.rk.los { grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
.kleurstip { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; vertical-align: 0; box-shadow: inset 0 0 0 1px rgba(23,24,26,.18); }
.lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb { font-size: 14px; line-height: 1.3; border-top: 1px solid var(--lijn); }
.tb-rij { display: grid; grid-template-columns: 48px minmax(0, 1fr) repeat(var(--tk, 4), 76px) 104px 64px; column-gap: 12px; align-items: center; min-height: 64px; padding-block: 8px; border-top: 1px solid var(--lijn); }
.tb-rij:not(.tb-kop):hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.tb-kop { position: sticky; top: var(--kop-h); z-index: 3; min-height: 40px; padding-block: 0; border-top: 0; border-bottom: 1px solid var(--lijn); background: #fff; font-size: 13px; color: var(--sub); transition: top .2s ease; }
.tb-kop button { padding: 0; border: 0; background: none; font-size: 13px; color: var(--sub); text-align: left; white-space: nowrap; }
.tb-kop button:hover { color: var(--inkt); }
.tb-kop i { margin-left: 3px; font-style: normal; color: var(--inkt); }
.tb-kop + .tb-rij { border-top: 0; }
.tb-f .tg { width: 48px; height: 48px; border-radius: 4px; }
.tb-n { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.tb-n:hover { color: var(--link); }
.tb-w { font-variant-numeric: tabular-nums; }
.tb-p { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
button.tb-p { text-align: right; }
.tb-v { display: flex; justify-content: center; align-items: center; }
.tb-kop .tb-v { font-size: 13px; }

/* vergelijken */
.vgl-balk { position: fixed; left: 50%; bottom: 16px; z-index: 44; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; border-radius: var(--r2); background: var(--inkt); color: #fff; font-size: 14px; transform: translateX(-50%); box-shadow: 0 16px 40px -12px rgba(23,24,26,.5); white-space: nowrap; }
.vgl-balk b { font-variant-numeric: tabular-nums; }
.vgl-balk .knop.twee { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.vgl-balk .knop.twee:hover { border-color: #fff; background: transparent; }
.knop.uit { opacity: .45; cursor: default; }
.vg-balk { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; }
.vg-sw { gap: 12px; }
.vg { overflow-x: auto; padding-bottom: 96px; }
.vg-rij { display: grid; grid-template-columns: 200px repeat(var(--kol), minmax(180px, 1fr)); column-gap: var(--gat); border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.vg-kop { border-top: 0; padding-bottom: 16px; }
.vg-l { padding-block: 10px; color: var(--sub); }
.vg-w { padding-block: 10px; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vg-rij.zelfde .vg-w { color: var(--sub); }
.vg-k { position: relative; min-width: 0; }
.vg-k .tg { border-radius: var(--r2); }
.vg-n { display: block; margin-top: 10px; font-weight: 500; font-size: 15px; line-height: 1.35; min-height: 62px; }
.vg-n:hover { color: var(--link); }
.vg-p { margin-block: 6px 10px; min-height: 42px; font-size: 16px; }
.vg-p b { font-weight: 500; font-variant-numeric: tabular-nums; }
.vg-weg { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r); background: rgba(255,255,255,.92); color: var(--sub); }
.vg-weg:hover { color: var(--inkt); }

/* ---------- productpagina ---------- */
.gal-h .tg { aspect-ratio: 4 / 3; }
.gal-h .tg img { inset: 5% 14%; width: 72%; height: 90%; }
.koop-mrk { margin-bottom: 4px; font-size: 14px; color: var(--sub); }
.cijf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gat); margin-top: 20px; }
.cijf.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cijf > div { padding-block: 10px; border-top: 1px solid var(--lijn); }
.cijf dt { font-size: 13px; color: var(--sub); line-height: 1.3; }
.cijf dd { margin-top: 2px; font-size: 18px; line-height: 1.25; letter-spacing: -.012em; font-weight: 500; font-variant-numeric: tabular-nums; }
.koop-st { margin-top: 4px; }
.koop-2 { margin-top: 8px; height: 48px; }
.pdp-huur { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; column-gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--vlak); font-size: 14px; line-height: 1.35; transition: background .12s; }
.pdp-huur:hover { background: var(--vlak2); }
.pdp-huur b { display: block; }
.pdp-huur small { display: block; color: var(--sub); }
.koop-v { display: inline-flex; color: var(--sub); cursor: pointer; }
.koop-v input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.koop-v span { display: inline-flex; align-items: center; gap: 6px; }
.koop-v:hover { color: var(--inkt); }
.koop-v input:checked + span { color: var(--inkt); font-weight: 500; }
.pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; font-size: 15px; line-height: 1.45; }
.pm ul:empty { display: none; }
.pm li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; padding-block: 8px; border-top: 1px solid var(--lijn); }
.pm li svg { margin-top: 3px; }
.pm .plus svg { color: var(--groen); }
.pm .min svg { color: var(--sub); }
.pm .min span { color: var(--sub); }
.skop-k h2 { margin-bottom: 16px; }
.ebjs { border-top: 1px solid var(--lijn); }
.ebj { display: grid; grid-template-columns: 18px 56px minmax(0, 1fr) 104px; column-gap: 14px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.ebj input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--lijn2); border-radius: 3px; background: #fff; cursor: pointer; }
.ebj input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500 10 17.500 19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ebj-f .tg { width: 56px; height: 56px; border-radius: 4px; }
.ebj-t { min-width: 0; font-size: 14px; line-height: 1.35; }
.ebj-t small { display: block; color: var(--sub); }
.ebj-t a { display: block; font-size: 15px; font-weight: 500; }
.ebj-t a:hover { color: var(--link); }
.ebj-t span { display: block; margin-top: 1px; color: var(--sub); }
.ebj-p { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.ebj-p .opa { font-size: 14px; }
.ebj-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; }
.ebj-voet b { display: block; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ebj-voet small { color: var(--sub); }
.tk-dicht { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* wagen */
.som-m { margin-block: 10px 2px; padding: 10px 12px; border-radius: var(--r); background: #fff; font-size: 14px; line-height: 1.4; }
.som-s { margin-top: 8px; }
.som-2 { margin-top: 8px; }
.ml-s { display: block; color: var(--sub); }
.of-w { margin-bottom: 24px; padding: 16px; border-radius: var(--r2); background: var(--vlak); }
.of-w h2 { margin-bottom: 8px; font-size: 15px; }
.of-w .som-regel .tg { background: #fff; }

/* tussenmaten en kleinere schermen voor de nieuwe onderdelen */
@media (max-width: 1360px) { .open-t h1 { font-size: 68px; } }
@media (max-width: 1240px) {
  .open-t h1 { font-size: 60px; }
  .hr-rij { grid-template-columns: 56px minmax(0, 1fr) 96px 100px 16px; column-gap: 12px; }
  .hr-rij .tg { width: 56px; height: 56px; }
  .huur-t { grid-column: 1 / span 5; }
  .huur-k { grid-column: 6 / span 7; }
  .tb-rij { grid-template-columns: 48px minmax(0, 1fr) repeat(var(--tk, 4), 66px) 96px 56px; column-gap: 8px; }
  .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk2 h1, .kop-foto h1 { font-size: 44px; }
}
@media (max-width: 1100px) {
  .tb-rij { grid-template-columns: 48px minmax(0, 1fr) repeat(var(--tk, 4), 60px) 92px 44px; }
  .tb-kop .tb-v { font-size: 0; }
  .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .open-t h1 { font-size: 56px; }
  .open-r { grid-column: 1 / span 9; }
  .open-b { height: 44vw; min-height: 260px; }
  .groepen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .pt p { display: none; }
  .pt-k { display: block; }
  .pt-k b, .pt-k small { display: block; }
  .huur-t { grid-column: 1 / -1; position: static; margin-bottom: 24px; }
  .huur-k { grid-column: 1 / -1; }
  .mrk-t { grid-column: 1 / -1; margin-bottom: 16px; }
  .mrks { grid-column: 1 / span 8; }
  .pk2 h1 { grid-column: 1 / -1; margin-bottom: 12px; }
  .pk2 > div { grid-column: 1 / span 9; }
  .kop-foto > div:first-child { grid-column: 1 / -1; margin-bottom: 24px; }
  .kop-foto-f { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .kh-v { grid-column: 1 / -1; }
  .kh-u { grid-column: 1 / -1; margin-top: 24px; }
  .stap-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-r { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-l2 { columns: 2; }
  .pk-v { opacity: 1; }
  .cat-a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
  .cat-kop { flex-wrap: wrap; }
  .vgl-balk { bottom: 12px; }
}
@media (max-width: 860px) {
  .pts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-rij { grid-template-columns: 48px minmax(0, 1fr) 96px 44px; grid-template-areas: "f n p v" "f k k k"; }
  .tb-f { grid-area: f; }
  .tb-n { grid-area: n; }
  .tb-p { grid-area: p; }
  .tb-v { grid-area: v; }
  .tb-w { display: none; }
  .tb-kop { grid-template-areas: "x m p v"; }
  .tb-kop > span:first-child { grid-area: x; }
  .tb-kop > button:nth-child(2) { grid-area: m; }
  .tb-kop > .tb-p { grid-area: p; }
  .tb-kop > .tb-v { grid-area: v; }
}
@media (max-width: 760px) {
  .open-t h1 { font-size: 48px; line-height: 1.02; }
  .open-r { grid-column: 1 / -1; }
  .open-b { height: 62vw; min-height: 220px; }
  .open-b img { object-position: 42% 62%; }
  .feiten { padding-block: 24px 0; }
  .feit { padding-top: 10px; }
  .feit b { font-size: 16px; }
  .pts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pt { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-block: 8px; border-top: 1px solid var(--lijn); }
  .pt-f { aspect-ratio: 1; border-radius: var(--r); }
  .pt-k { display: flex; margin-top: 0; }
  .pt-k b, .pt-k small { display: inline; }
  .pt p { display: block; }
  .pt-k b { font-size: 16px; }
  .gt .tg:not(.vol) img { inset: 9% 14%; width: 72%; height: 82%; }
  .hr-rij { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "f n p" "f v p"; column-gap: 12px; row-gap: 0; padding-block: 10px; }
  .hr-rij .tg { grid-area: f; }
  .hr-n { grid-area: n; }
  .hr-v { grid-area: v; }
  .hr-p { grid-area: p; }
  .hr-go { display: none; }
  .seg-los { display: inline-flex; }
  .seg-los button { min-height: 40px; }
  .duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .team.zes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrks { grid-column: 1 / -1; }
  .mrk-t p { max-width: none; }
  .pk2 h1, .kop-foto h1 { font-size: 30px; }
  .pk2 > div { grid-column: 1 / -1; }
  .kop-foto { padding-block: 12px 32px; }
  .krs.k3, .krs.k2, .artikel-t .krs.k3 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .artikel-t .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mstr { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 12px 16px 12px 12px; }
  .stap-3, .stap-4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cta { display: block; padding: 20px; }
  .cta .knop { width: 100%; margin-top: 12px; }
  .keus-2 { grid-template-columns: minmax(0, 1fr); }
  .chip span, .veld .chip span { min-height: 44px; }
  .mk-r { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .mk-l2 { columns: 1; }
  .kh-a { padding: 20px; }
  .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .pk-o { flex-direction: column; align-items: stretch; }
  .pk-in { width: 100%; height: 40px; }
  .pk-v span { display: none; }
  .pk-v { padding: 0 6px; }
  .cijf dd { font-size: 16px; }
  .pm { grid-template-columns: minmax(0, 1fr); }
  .pm ul + ul { margin-top: 0; }
  .ebj { grid-template-columns: 18px 56px minmax(0, 1fr); grid-template-areas: "c f t" "c f p"; row-gap: 2px; }
  .ebj input { grid-area: c; }
  .ebj-f { grid-area: f; }
  .ebj-t { grid-area: t; }
  .ebj-p { grid-area: p; text-align: left; }
  .ebj-voet { flex-direction: column; align-items: stretch; }
  .tk-tabel { font-size: 13px; }
  .vg-rij { grid-template-columns: repeat(var(--kol), minmax(150px, 1fr)); column-gap: 12px; }
  .vg-l { grid-column: 1 / -1; padding-block: 10px 0; font-size: 13px; }
  .vg-kop .vg-l { display: none; }
  .vg-w { padding-block: 2px 10px; }
  .vgl-balk { left: 12px; right: 12px; transform: none; justify-content: space-between; gap: 8px; }
  .vgl-balk > span { white-space: normal; line-height: 1.25; }
}

/* ---------- verhuur ---------- */
.pkop-huur h1 { font-size: 52px; line-height: 1.06; letter-spacing: -.034em; }
.hp { display: grid; grid-template-columns: 200px 200px 96px minmax(0, 1fr); column-gap: var(--gat); align-items: end; padding: 20px 24px; border-radius: var(--r2); background: var(--vlak); }
.hp-tel small { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.hp-tel b { display: block; height: 44px; line-height: 44px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-snel { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hp-snel .knop { height: 44px; }
.hm-gr { display: inline-flex; margin-block: 24px 0; }
.hm { display: grid; grid-template-columns: 148px minmax(0, 1fr) 248px 176px; column-gap: var(--gat); align-items: start; padding-block: 24px; border-top: 1px solid var(--lijn); }
.hm:first-child { margin-top: 16px; }
.hm[hidden] { display: none; }
.hm-f .tg { border-radius: var(--r2); }
.hm-n h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.014em; }
.hm-n h2 a:hover { color: var(--link); }
.hm-s { margin-top: 2px; font-size: 14px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.hm-z { margin-block: 6px 8px; font-size: 14px; line-height: 1.45; color: var(--sub); max-width: 58ch; }
.hm-tar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gat); }
.hm-t small { display: block; color: var(--sub); }
.hm-t b { display: block; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-p { display: grid; justify-items: end; text-align: right; line-height: 1.3; }
.hm-p small { color: var(--sub); }
.hm-p b { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-p span { font-size: 13px; color: var(--sub); min-height: 18px; }
.hm-p .knop { margin-top: 10px; }
.hm-v { margin-block: 8px 72px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.specs-een { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.specs-een .spec { grid-template-columns: minmax(0, 1fr) auto; }
.specs-een dd { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.spec dt small { display: block; font-size: 13px; color: var(--zacht); }

.hk-top { padding-bottom: 32px; }
.koop-los { position: static; }
.hk-spec { margin-top: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.hk-vr { margin-top: 10px; }
.hk-tekst { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--sub); }
.hk-tar { margin-top: 20px; }
.hk-res { padding-bottom: 40px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.hk-uit { margin-bottom: 16px; font-size: 14px; }
.hk-pc { margin-top: 12px; }
.hk-z { align-self: end; padding-bottom: 12px; font-size: 14px; }
.hk-teller { width: 124px; }
.keus-x { grid-template-columns: 20px 44px minmax(0, 1fr) auto !important; min-height: 64px; padding-block: 8px; }
.keus-x .tg { width: 44px; height: 44px; border-radius: 4px; }
.kal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.kl-m { min-width: 0; }
.kl-k { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; height: 36px; margin-bottom: 8px; text-align: center; font-size: 15px; }
.kl-k b { text-transform: none; }
.kl-k button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--sub); }
.kl-k button:hover { background: var(--vlak); color: var(--inkt); }
.kl-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kl-w { display: grid; place-items: center; height: 28px; font-size: 13px; color: var(--sub); }
.kl-l { height: 40px; }
.kl-d { display: grid; place-items: center; width: 100%; height: 40px; padding: 0; border: 0; background: none; font-size: 14px; transition: background .08s; }
button.kl-d:hover { background: var(--vlak2); border-radius: var(--r); }
.kl-d.voorbij, .kl-d.dicht { color: var(--zacht); opacity: .55; }
.kl-d.aan { background: var(--vlak2); }
.kl-d.rand { background: var(--inkt); color: #fff; border-radius: var(--r); }
button.kl-d.rand:hover { background: var(--inkt); }
.kl-v { display: none; }
.kl-m:first-child .kl-k { grid-template-columns: 32px minmax(0, 1fr) 32px; }

/* mijn huur en mijn machines */
.acc-tus { height: 24px; }
.acc-z { font-size: 14px; }
.acc-eerst { margin-top: 0; }
.acc-l { margin-bottom: 24px; }
.skop-k2 { margin-bottom: 12px; }
.cijfers-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wagen-a { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; padding-bottom: 0; }
.som-los { position: static; }
.wg-rij-a { grid-template-columns: 72px minmax(0, 1fr) 72px 104px; }
.wg-a { font-size: 14px; }
.lr-geb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; }
.velden-m { max-width: 720px; }
.klaar-k { margin-top: 24px; }
.hu { display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px; column-gap: 20px; align-items: start; padding-block: 16px; border-top: 1px solid var(--lijn); }
.hu-f .tg { border-radius: var(--r); }
.hu-t { min-width: 0; font-size: 14px; line-height: 1.45; }
.hu-t small { display: block; font-size: 13px; color: var(--sub); }
.hu-t h3 { font-size: 16px; line-height: 1.3; }
.hu-t h3 a:hover { color: var(--link); }
.hu-t p { color: var(--sub); }
.hu-t .st { font-size: 14px; color: var(--inkt); }
.hu-k { margin-top: 10px; gap: 8px; }
.hu-p { text-align: right; font-variant-numeric: tabular-nums; }
.hu-p b { display: block; font-size: 16px; }
.hu-p small { color: var(--sub); }
.hu-bar { height: 4px; margin-block: 8px 6px; border-radius: 2px; background: var(--vlak2); overflow: hidden; }
.hu-bar i { display: block; height: 100%; background: var(--oranje); }
.hu-rep { grid-template-columns: 96px minmax(0, 1fr); border-top: 0; padding-top: 0; }
.tijdlijn-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; }
.rep-k { margin-top: 16px; }
.vak .som-r { padding-block: 3px; }
.drie-een { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.inlog-n { margin-top: 16px; font-size: 14px; }
.inlog-breed { grid-column: 1 / span 7; }
.inlog-smal { grid-column: 9 / span 4; }
.inlog-t { margin-top: 8px; }
.inlog-breed form { margin-top: 24px; }
.inlog-l form.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gat); }

@media (max-width: 1240px) {
  .hm { grid-template-columns: 112px minmax(0, 1fr) 208px 148px; column-gap: 16px; }
  .hp { grid-template-columns: 180px 180px 88px minmax(0, 1fr); }
  .kal { gap: 24px; }
}
@media (max-width: 1100px) {
  .hm { grid-template-columns: 112px minmax(0, 1fr) 148px; }
  .hm-tar { grid-column: 2 / span 2; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
  .hp { grid-template-columns: repeat(2, minmax(0, 1fr)) 88px; row-gap: 12px; }
  .hp-snel { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 1024px) {
  .pkop-huur h1 { font-size: 44px; }
  .hk-res { display: block; }
  .cijfers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wagen-a { grid-template-columns: minmax(0, 1fr); }
  .inlog-breed, .inlog-smal { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pkop-huur h1 { font-size: 30px; }
  .hp { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; column-gap: 12px; }
  .hp-tel { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .hp-tel small { margin: 0; }
  .hp-tel b { height: auto; line-height: 1.4; }
  .hp-snel .knop { flex: 1 1 40%; padding: 0 8px; }
  .hm-gr { display: flex; flex-wrap: wrap; height: auto; }
  .hm-gr button { min-height: 40px; }
  .hm { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; padding-block: 20px; }
  .hm-n h2 { font-size: 16px; }
  .hm-z { display: none; }
  .hm-tar { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .hm-t b { font-size: 14px; }
  .hm-p { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; margin-top: 12px; align-items: center; column-gap: 12px; }
  .hm-p small { grid-column: 1; }
  .hm-p b { grid-column: 1; }
  .hm-p span { grid-column: 1; }
  .hm-p .knop { grid-column: 2; grid-row: 1 / span 3; margin: 0; height: 44px; }
  .kal { grid-template-columns: minmax(0, 1fr); }
  .kl-2e { display: none; }
  .kl-v { display: block; }
  .kl-d { height: 44px; }
  .hu { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; }
  .hu-p { grid-column: 2; text-align: left; margin-top: 8px; }
  .tijdlijn-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-rij-a { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "f n n" "f a t"; column-gap: 12px; }
  .wg-rij-a .wg-a { grid-area: a; align-self: center; }
  .wg-rij-a .wg-t { grid-area: t; grid-column: auto; }
  .lr-geb { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .inlog-l form.velden { grid-template-columns: minmax(0, 1fr); }
}
.hub-1 { padding-bottom: 72px; }
.rk .tabel { margin-top: 8px; }
.t-kop { min-height: 24px; }

/* overzicht, team en tekst */
.ow-kop { padding-top: 40px; }
.ow-paar { padding-bottom: 40px; }
.ow-paar .h3 { margin-bottom: 12px; }
.ow-leeg { aspect-ratio: 1440 / 900; background: var(--vlak); }
.ow-l { margin-bottom: 16px; }
.team.zes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px var(--gat); }
.krs.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.krs.k4 .kr-f { aspect-ratio: 1; }
.tk h2 { margin-top: 32px; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; color: var(--inkt); }
.tk h2:first-child { margin-top: 0; }
.tk h2 + p, .tk h2 + ul, .tk h3 + p, .tk h3 + ul { margin-top: 8px; }
.tk > * + ul, .tk > * + ol, .tk > * + .tk-tabel { margin-top: 12px; }
@media (max-width: 1024px) { .team.zes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .krs.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .team.zes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .krs.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .tm small { font-size: 13px; } }

.hub-1 .meer { white-space: normal; }
.spec dt { overflow-wrap: anywhere; }
.start-secs { display: flex; flex-direction: column; }
.start-secs > section { min-width: 0; }
@media (max-width: 1024px) {
  .logo { padding-block: 10px; }
  .vg-weg { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .sec-groepen { order: -1; padding-top: var(--sec-s) !important; }
  .start-secs > .sec-pro { padding-top: var(--sec-s) !important; }
  .skop { flex-direction: column; align-items: flex-start; gap: 6px; }
  .krs.k4 .kr-dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}

/* ---------- rijen op één lijn: kaarten delen hun rijen, knoppen en links staan onderaan gelijk ---------- */
.kr { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
.kr > * { min-width: 0; }
.kr-k:empty, .kr > span:empty { display: block; height: 0; }
.kr-k { align-self: end; }
.kr > b { margin-top: 0; }
.drie > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 2px; }
.vak { display: flex; flex-direction: column; align-items: flex-start; }
.vak .meer { margin-top: auto; padding-top: 10px; }
.vak .som-r { width: 100%; }
.cijfers-4 { gap: var(--gat); }
.keus-2 { grid-template-columns: minmax(0, 1fr); }
.veld input:not([type=file]), .veld select, .inv:not(textarea) { height: 44px; min-height: 44px; }
.pts { column-gap: var(--gat); }
.pdp .knop:not(.klein), .pdp-balk .knop { height: 48px; }
.hp-snel .knop { height: 44px !important; }
.lijst-zoek, select.klein { height: 36px !important; min-height: 36px !important; }
@media (max-width: 760px) {
  .hr-rij, .ebj, .kennis .art { align-items: start; }
  .lr-bes > b, .lr-fac > b { order: 1; }
  .lr-bes > .r, .lr-fac > .r { order: 2; }
  .lr-bes > span:not(.r):not(.mob-weg), .lr-fac > span:not(.r):not(.mob-weg) { order: 3; grid-column: 1 / -1; color: var(--sub); }
  .hp-snel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .hp-snel .knop { padding: 0 8px; }
  select.klein { height: 44px !important; min-height: 44px !important; }
}

.feit { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
@media (max-width: 760px) {
  .open-r .knoppen { column-gap: var(--gat); }
  .vak { padding: 16px; }
}

@media (max-width: 1024px) and (min-width: 761px) { .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* kaarten delen hun rijen; de afstand tussen kaartrijen zit onderin de kaart, anders tellen lege vakken mee als gat */
.krs { row-gap: 0; }
.kr { padding-bottom: 40px; }
.tl-k { grid-row: span 4; }
.kr-t p { margin-top: 6px; }
@media (max-width: 760px) { .krs.k3, .krs.k2, .artikel-t .krs.k3 { row-gap: 0; } .kr { padding-bottom: 32px; } .krs.k4 { row-gap: 0; } }
.vg-k .tg { aspect-ratio: 4 / 3; }
.vg-k .tg img { inset: 6% 14%; width: 72%; height: 88%; }


/* ---------- ronde na de criticus ---------- */
.open-t h1 { font-size: 68px; line-height: 1.02; font-weight: 450; letter-spacing: -.04em; }
.pk2 h1, .kop-foto h1, .pkop-huur h1 { font-size: 44px; line-height: 1.1; letter-spacing: -.03em; }
.mrk-r, .hk-res { border-top: 0; background: linear-gradient(var(--lijn), var(--lijn)) no-repeat top center / calc(100% - 2 * var(--gut)) 1px; }

/* kaarten: voorraad op elke kaart, vier per rij */
.lijst-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); }
.lijst-kaarten .pk-n { font-size: 14px; line-height: 1.35; }
.pk-hu { display: grid; row-gap: 1px; margin-top: 8px; }
.pk-hu .vr { font-size: 13px; }
.pk-h { margin-top: 0; }
.pk-p .pr b { font-size: 16px; }

/* lijst: één rijopbouw, één linkerrand, één kolomraster */
.t-rij { grid-template-columns: minmax(0, 1.5fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1fr) 96px; }
.lijst-rk .rk { grid-template-columns: 144px minmax(0, 1fr); }
.lijst-rk:not(.met-f) .rk { grid-template-columns: minmax(0, 1fr); }
.lijst-rk:not(.met-f) .rk-f { display: none; }
.lijst-rk .rk.los { grid-template-columns: 144px minmax(0, 1fr); column-gap: 32px; padding-block: 12px; align-items: center; }
.lijst-rk:not(.met-f) .rk.los { grid-template-columns: minmax(0, 1fr); }
.rk.los .rk-f .tg { width: 72px; border-radius: var(--r); }
.rk.los .rk-rij { grid-template-columns: minmax(0, 1.5fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1fr) 96px; }
.rk.los h2 { font-size: 14px; font-weight: 500; line-height: 1.35; }
.rk-n small { display: block; margin-top: 1px; color: var(--sub); font-variant-numeric: tabular-nums; }
.rk.los .t-nr { display: inline; margin: 0; }
.t-kp { justify-self: end; }
.t-aan { width: 96px; height: 32px; padding: 0; }
.lijst-rk > .rk:first-child { border-top: 1px solid var(--lijn); }

/* filters: groepen klappen in */
.flt h3 { margin-bottom: 0; }
.flt-k { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; margin-bottom: 8px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; text-align: left; }
.flt-k svg { color: var(--sub); transition: transform .12s; transform: rotate(180deg); }
.flt.dicht .flt-k { margin-bottom: 0; }
.flt.dicht .flt-k svg { transform: none; }
.flt { padding-block: 14px; }

/* menu */
.mega-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mt .tg { aspect-ratio: 4 / 3; }
.mt-f .tg { aspect-ratio: 1; }
.mega { border-bottom: 1px solid var(--lijn); }
.mega-l > .mega-service { margin-top: 20px; }
.mega-paneel { padding-block: 24px 28px; }

/* startpagina: team als rustige regel */
.tmks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gat); }
.tmk { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; font-size: 14px; line-height: 1.35; }
.tmk b { display: block; font-size: 15px; }
.tmk span:not(.tm-f) { display: block; color: var(--sub); }
.tmk small { display: block; margin-top: 2px; color: var(--sub); font-size: 13px; }
.tmk .tm-f { border-radius: var(--r); }
.sub-los { margin-top: 24px; }
.sub-los a { font-weight: 500; }

/* productpagina: één oranje knop, de rest rustige regels */
.koop-vr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 10px; font-size: 14px; }
.koop-vr .vr { font-size: 14px; }
.koop-vr-t { color: var(--sub); }
.koop-rs { margin-top: 16px; border-bottom: 1px solid var(--lijn); }
.koop-r { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; column-gap: 12px; align-items: center; min-height: 56px; padding-block: 8px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.35; }
.koop-r:hover b { color: var(--link); }
.koop-r b { display: block; font-weight: 500; }
.koop-r small { display: block; color: var(--sub); }
.koop-r > svg { color: var(--sub); }
.koop-acties { margin-top: 12px; }
.koop-zek { margin-top: 14px; padding-top: 0; border-top: 0; font-size: 13px; }
.koop-zek li { display: block; padding-block: 2px; }
.geen-gal .pdp-sec:first-child { padding-top: 8px; }
.geen-gal .pdp-l { min-height: 1px; }
.som-m { margin-block: 12px 4px; padding: 0; background: none; font-size: 14px; line-height: 1.4; color: var(--sub); }

/* huren: één totaal en één regel met tarieven */
.hm { grid-template-columns: 148px minmax(0, 1fr) 184px; }
.hm-z { margin-block: 4px 0; max-width: 72ch; }
.hm-tar { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 8px; font-size: 14px; color: var(--sub); }
.hm-tar b { font-weight: 500; color: var(--inkt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-p .vr { margin-top: 4px; }
.hm-p .knop { margin-top: 10px; }
.kl-d.dicht.aan { background: var(--vlak2); opacity: 1; }

/* diensten */
.drie.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 1025px) { .menu-uit .mkbalk { opacity: 0; pointer-events: none; } }
@media (max-width: 1360px) { .open-t h1 { font-size: 64px; } .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1240px) { .open-t h1 { font-size: 56px; } .pk2 h1, .kop-foto h1, .pkop-huur h1 { font-size: 40px; } .hm { grid-template-columns: 112px minmax(0, 1fr) 168px; } .t-rij { grid-template-columns: minmax(0, 1.4fr) 88px 88px 100px 96px; } .rk.los .rk-rij { grid-template-columns: minmax(0, 1.4fr) 88px 88px 100px 96px; } .tmks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .t-rij, .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) 88px 100px 96px; } .rk.los .t-nr { display: none; } .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .open-t h1 { font-size: 52px; } .drie.d4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega { display: none; } }
@media (max-width: 760px) {
  .open-t h1 { font-size: 44px; }
  .pk2 h1, .kop-foto h1, .pkop-huur h1 { font-size: 30px; }
  .tmks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .pk-v { display: none; }
  .lijst-rk .rk, .lijst-rk .rk.los { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; }
  .lijst-rk:not(.met-f) .rk, .lijst-rk:not(.met-f) .rk.los, .lijst-rk .rk:has(> .rk-f:empty) { grid-template-columns: minmax(0, 1fr); }
  .rk-f:empty { display: none; }
  .rk.los .rk-f .tg { width: 72px; }
  .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "v p" "v k"; row-gap: 6px; }
  .rk .tabel { grid-column: 1 / -1; }
  .t-rij:not(.t-kop) { grid-template-columns: minmax(0, 1fr) auto; }
  .gal-h .tg { aspect-ratio: 3 / 2; }
  .gal-h .tg img { inset: 5% 12%; width: 76%; height: 90%; }
  .koop-mrk { margin-bottom: 2px; }
  .cijf { margin-top: 12px; }
  .cijf > div { padding-block: 8px; }
  .koop-p { margin-top: 14px; padding-top: 14px; }
  .koop-rij { margin-top: 12px; }
  .hm { grid-template-columns: 88px minmax(0, 1fr); }
  .hm-p .knop { grid-row: 1 / span 4; }
  .hm-z { display: none; }
  .hm-tar { gap: 2px 14px; }
  .mrks { grid-column: 1 / -1; }
}
.pk-n, .sub-t b, .rk h2, .t-maat, .hm-n h2 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  /* op aanvraag op de telefoon: de knop zegt het al, één regel per maat */
  .t-rij:has(.t-aan):not(.t-kop) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m k"; align-items: center; padding-block: 6px; }
  .t-rij:has(.t-aan) .t-pr, .t-rij:has(.t-aan) .t-vr { display: none; }
  .t-aan { height: 40px; }
}