/*
 * Tuinkamer Online by pimvdhurk.nl
 * Maten 1-op-1 gemeten op de Elementor-site (1440 en 375 breed).
 * Let op: Pencilino zet ingelogd elke tekst in span.pencil-field. Nooit opmaak op algemene span-selectors.
 */

/* ---------- Fonts (lokaal) ---------- */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/schibsted-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/schibsted-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hanken-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hanken-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/hanken-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

/* ---------- Basis ---------- */
:root {
	--tk-navy: #16233f;
	--tk-navy-donker: #0f1a2e;
	--tk-oranje: #e08a1c;
	--tk-oranje-hover: #c97a14;
	--tk-tekst: #16233f;
	--tk-grijs: #5c6779;
	--tk-licht: #f2f4f7;
	--tk-zand: #f7f5f1;
	--tk-rand: #e7e3db;
	--tk-wit: #fff;
	--tk-kop: "Schibsted Grotesk", system-ui, sans-serif;
	--tk-body: "Hanken Grotesk", system-ui, sans-serif;
	--tk-breed: 1140px;
	--tk-zij: 50px;
	--tk-radius: 10px;
}
@media (max-width: 767px) { :root { --tk-zij: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--tk-wit); color: var(--tk-tekst); font-family: var(--tk-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.tk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.tk-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 10px 16px; background: var(--tk-wit); color: var(--tk-navy); }
.tk-skip:focus { left: 8px; }
.tk-icoon { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--tk-oranje); outline-offset: 2px; }

.tk-wrap { width: 100%; max-width: calc(var(--tk-breed) + 2 * var(--tk-zij)); margin: 0 auto; padding: 0 var(--tk-zij); }
.tk-sectie { padding: 100px 0; }
.tk-sectie--licht { background: var(--tk-licht); }
.tk-sectie--donker { background: var(--tk-navy); color: var(--tk-wit); }
.tk-stack { display: flex; flex-direction: column; gap: 55px; }
@media (max-width: 767px) { .tk-sectie { padding: 40px 0; } }

/* Koppen en tekst */
.tk-kopblok { display: flex; flex-direction: column; gap: 20px; }
.tk-kopblok--smal { max-width: 616px; }
.tk-kopblok--stappen { max-width: 524px; }
.tk-label { font-family: var(--tk-body); font-size: 14px; line-height: 1; font-weight: 700; text-transform: uppercase; color: var(--tk-oranje); }
.tk-label--ruim { line-height: 24px; }
.tk-titel { font-family: var(--tk-kop); font-size: 42px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-sectie--donker .tk-titel, .tk-cta .tk-titel { color: var(--tk-wit); }
.tk-intro, .tk-intro p { font-size: 17px; line-height: 1.6; color: var(--tk-grijs); }
.tk-intro p + p, .pencil-richtext p + p { margin-top: 1em; }
@media (max-width: 767px) { .tk-titel { font-size: 28px; } }

/* Knoppen */
.tk-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; border: 1px solid var(--tk-oranje); border-radius: var(--tk-radius); background: var(--tk-oranje); color: var(--tk-wit); font-family: var(--tk-body); font-size: 17px; line-height: 1; font-weight: 700; text-decoration: none; text-align: center; transition: background-color .2s, border-color .2s, color .2s; }
.tk-knop:hover, .tk-knop:focus-visible { background: var(--tk-oranje-hover); border-color: var(--tk-oranje-hover); color: var(--tk-wit); }
.tk-knop .tk-icoon { width: 16px; height: 16px; }
.tk-knop--groot { padding: 20px 20px; min-height: 59px; }
.tk-knop--wit { background: var(--tk-wit); border-color: var(--tk-wit); color: var(--tk-navy); }
.tk-knop--wit:hover, .tk-knop--wit:focus-visible { background: var(--tk-licht); border-color: var(--tk-licht); color: var(--tk-navy); }
.tk-knop--rand { background: var(--tk-wit); border-color: var(--tk-oranje); color: var(--tk-oranje); }
.tk-knop--rand:hover, .tk-knop--rand:focus-visible { background: var(--tk-oranje); color: var(--tk-wit); }
.tk-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
@media (max-width: 767px) { .tk-knoppen { grid-template-columns: 1fr; } }

/* ---------- Bovenbalk ---------- */
.tk-topbalk { background: var(--tk-navy); color: var(--tk-wit); font-size: 14px; line-height: 22.4px; }
.tk-topbalk__wrap { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.tk-topbalk__usps { display: flex; flex: 0 1 855px; justify-content: space-between; }
.tk-topbalk__usp { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.tk-topbalk__usp .tk-icoon { width: 14px; height: 14px; color: var(--tk-oranje); }
.tk-topbalk__score { display: flex; align-items: center; gap: 10px; }
.tk-topbalk__cijfer { font-family: var(--tk-kop); font-size: 12px; line-height: 1; font-weight: 600; }
.tk-sterren { display: inline-flex; gap: 1px; color: #f0ad1b; }
.tk-sterren .tk-icoon { width: 13px; height: 13px; }
.tk-google { width: 20px; height: 20px; }
@media (max-width: 767px) {
	.tk-topbalk__wrap { min-height: 40px; justify-content: center; padding: 0 10px; }
	.tk-topbalk__score { display: none; }
	.tk-topbalk__usps { flex: none; position: relative; width: 100%; height: 40px; }
	.tk-topbalk__usp { position: absolute; inset: 0; justify-content: center; gap: 6px; font-size: 15px; opacity: 0; transition: opacity .5s; }
	.tk-topbalk__usp.is-actief { opacity: 1; }
	.tk-topbalk__usp .tk-icoon { width: 16px; height: 16px; }
}

/* ---------- Kop ---------- */
.tk-kop { position: sticky; top: 0; z-index: 200; background: var(--tk-wit); border-bottom: 1px solid var(--tk-rand); }
.admin-bar .tk-kop { top: 32px; }
.tk-kop__wrap { display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding-top: 16px; padding-bottom: 16px; }
.tk-kop__logo { display: block; width: 220px; flex: none; }
.tk-kop__logo img { width: 220px; height: 39px; }
.tk-nav { flex: 1; display: flex; justify-content: center; }
.tk-nav__lijst { display: flex; align-items: center; gap: 32px; }
.tk-nav__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tk-body); font-size: 16px; line-height: 1; font-weight: 500; color: var(--tk-navy); text-decoration: none; padding: 12px 0; }
.tk-nav__link:hover, .tk-nav__item.is-actief > .tk-nav__link, .tk-nav__item.is-open > .tk-nav__link { color: var(--tk-oranje); }
.tk-nav__pijl { width: 12px; height: 12px; transition: transform .2s; }
.tk-nav__item.is-open .tk-nav__pijl { transform: rotate(180deg); color: var(--tk-oranje); }
.tk-kop__knop { flex: none; padding: 12px 24px; white-space: nowrap; }
.tk-kop__menuknop { display: none; color: var(--tk-navy); }
.tk-kop__menuknop .tk-icoon { width: 25px; height: 25px; }

/* Megamenu */
.tk-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--tk-wit); box-shadow: 0 18px 17px -13px rgba(0, 0, 0, .07); padding: 30px 0 40px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.tk-nav__item.is-open .tk-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.tk-mega__kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tk-mega__kaarten:has(> li:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.tk-mega__kaart { position: relative; display: flex; align-items: flex-end; height: 120px; padding: 24px; border-radius: 14px; overflow: hidden; text-decoration: none; isolation: isolate; }
.tk-mega__kaart > .pencil-managed-region, .tk-mega__foto { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.tk-mega__foto { object-fit: cover; transition: transform .4s; }
.tk-mega__kaart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 35, 63, 0) 0%, var(--tk-navy) 100%); opacity: .7; }
.tk-mega__kaart:hover .tk-mega__foto { transform: scale(1.05); }
.tk-mega__titel { font-family: var(--tk-kop); font-size: 19px; line-height: 1; font-weight: 700; color: var(--tk-wit); }

@media (max-width: 1024px) {
	.tk-nav, .tk-kop__knop { display: none; }
	.tk-kop__menuknop { display: inline-flex; }
	.tk-kop__wrap { min-height: 80px; padding-top: 20px; padding-bottom: 20px; }
}

/* Mobiel menu */
.tk-mobielmenu { position: fixed; inset: 0; z-index: 1000; }
.tk-mobielmenu__achtergrond { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s; }
.tk-mobielmenu__paneel { position: absolute; top: 0; right: 0; bottom: 0; width: min(450px, 100%); display: flex; flex-direction: column; background: var(--tk-wit); transform: translateX(100%); transition: transform .3s ease; }
.tk-mobielmenu.is-open .tk-mobielmenu__achtergrond { opacity: 1; }
.tk-mobielmenu.is-open .tk-mobielmenu__paneel { transform: none; }
.tk-mobielmenu__balk { display: flex; justify-content: flex-end; align-items: center; min-height: 60px; padding: 0 20px; background: var(--tk-navy); color: var(--tk-wit); flex: none; }
.tk-mobielmenu__sluit .tk-icoon { width: 22px; height: 22px; }
.tk-mobielmenu__lijsten { position: relative; flex: 1; overflow-x: hidden; overflow-y: auto; }
.tk-mm__lijst > li { border-bottom: 1px solid rgba(0, 0, 0, .33); }
.tk-mm__link { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 20px; font-family: var(--tk-body); font-size: 22px; line-height: 26px; font-weight: 700; color: var(--tk-navy); text-decoration: none; text-align: left; }
.tk-mm__pijl { width: 14px; height: 14px; color: var(--tk-oranje); }
.tk-mm__paneel { position: absolute; inset: 0; min-height: 100%; background: #f5f5f5; padding-bottom: 50px; transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; }
.tk-mm__paneel.is-open { transform: none; }
.tk-mm__terug { display: flex; width: 100%; align-items: center; gap: 10px; padding: 20px; background: var(--tk-wit); border-bottom: 1px solid rgba(0, 0, 0, .33); font-family: var(--tk-body); font-size: 22px; line-height: 26px; font-weight: 700; color: var(--tk-navy); }
.tk-mm__kop { padding: 20px 20px 10px; font-size: 19px; line-height: 22px; font-weight: 500; color: var(--tk-oranje); }
.tk-mm__sub > li { border-bottom: 1px solid rgba(0, 0, 0, .2); }
.tk-mm__sublink { display: block; padding: 16px 20px; font-size: 19px; line-height: 22px; font-weight: 500; color: var(--tk-navy); text-decoration: none; }
.tk-mobielmenu__voet { flex: none; padding: 20px; border-top: 1px solid rgba(0, 0, 0, .2); background: var(--tk-wit); }
.tk-mobielmenu__knop { width: 100%; padding: 16px 22px; font-size: 15px; font-weight: 500; border-radius: 4px; }
.tk-mobielmenu__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 30px; font-size: 14px; line-height: 22.4px; }
.tk-mobielmenu__contact a { display: flex; align-items: center; gap: 10px; color: var(--tk-navy); text-decoration: none; }
.tk-mobielmenu__contact .tk-icoon { width: 14px; height: 14px; color: var(--tk-oranje); }
body.tk-menu-open { overflow: hidden; }

/* Kruimelpad */
.tk-kruimel { padding: 14px 0; border-bottom: 1px solid var(--tk-rand); font-size: 14px; line-height: 1; color: var(--tk-navy); }
.tk-kruimel a { color: var(--tk-grijs); text-decoration: none; }
.tk-kruimel a:hover { color: var(--tk-oranje); }
.tk-kruimel .breadcrumb_last { color: var(--tk-navy); }

/* ---------- Hero ---------- */
.tk-sectie--hero { padding: 40px 0; }
.tk-hero { position: relative; display: flex; padding: 70px; border-radius: 22px; overflow: hidden; background: var(--tk-navy); isolation: isolate; }
.tk-hero > .pencil-managed-region, .tk-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.tk-hero__foto { object-fit: cover; object-position: center; }
.tk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--tk-navy) 56%, rgba(22, 35, 63, 0) 100%); opacity: .95; }
.tk-hero__inhoud { width: 56%; display: flex; flex-direction: column; gap: 20px; color: var(--tk-wit); }
.tk-hero__titel { font-family: var(--tk-kop); font-size: 56px; line-height: 1; font-weight: 700; }
.tk-hero__tekst, .tk-hero__tekst p { font-size: 17px; line-height: 1.6; color: var(--tk-licht); }
@media (max-width: 1024px) { .tk-hero__inhoud { width: 100%; } }
@media (max-width: 767px) {
	.tk-hero { padding: 30px; }
	.tk-hero::before { opacity: 1; }
	.tk-hero__titel { font-size: 36px; }
}

/* ---------- Productkaarten ---------- */
.tk-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tk-kaarten--2 { grid-template-columns: repeat(2, 1fr); }
.tk-kaart { display: flex; }
.tk-kaart__link { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--tk-rand); border-radius: 14px; overflow: hidden; background: var(--tk-wit); text-decoration: none; transition: box-shadow .2s; }
.tk-kaart__link:hover { box-shadow: 0 10px 30px rgba(22, 35, 63, .08); }
.tk-kaart__foto { width: 100%; height: 270px; object-fit: cover; }
.tk-kaart__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 28px; }
.tk-kaart__titel { font-family: var(--tk-kop); font-size: 20px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-kaart__tekst { font-size: 17px; line-height: 1.6; color: var(--tk-grijs); }
.tk-kaart__meer { font-size: 17px; line-height: 1.6; font-weight: 700; color: var(--tk-oranje); text-decoration: underline; }
@media (max-width: 1024px) { .tk-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .tk-kaarten, .tk-kaarten--2 { grid-template-columns: 1fr; } }

/* ---------- Cijfers ---------- */
.tk-sectie--cijfers { padding: 70px 0; }
.tk-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 30px; }
.tk-cijfer { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, .25); }
.tk-cijfer:last-child { border-right: 0; }
.tk-cijfer__waarde { font-family: var(--tk-kop); font-size: 42px; line-height: 1; font-weight: 700; color: var(--tk-wit); }
.tk-cijfer__label { font-size: 15px; line-height: 1; color: #b9c1d2; }
.tk-cijfer__link { font-size: 15px; line-height: 1; color: var(--tk-oranje); }
@media (max-width: 1024px) {
	.tk-cijfers { grid-template-columns: repeat(2, 1fr); }
	.tk-cijfer { border-bottom: 1px solid rgba(255, 255, 255, .25); }
}
@media (max-width: 767px) {
	.tk-sectie--cijfers { padding: 40px 0; }
	.tk-cijfers { grid-template-columns: 1fr; row-gap: 30px; }
	.tk-cijfer { border-right: 0; }
}

/* ---------- Stappen ---------- */
.tk-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: none; }
.tk-stap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; background: var(--tk-wit); border: 1px solid var(--tk-rand); border-radius: 14px; box-shadow: 0 2px 2px rgba(0, 0, 0, .08); }
.tk-stap__nummer { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tk-navy); color: var(--tk-wit); font-family: var(--tk-kop); font-size: 20px; line-height: 1; font-weight: 800; }
.tk-stap__titel { font-family: var(--tk-kop); font-size: 18px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-stap__tekst, .tk-stap__tekst p { font-size: 16px; line-height: 1.6; color: var(--tk-navy); }
@media (max-width: 1024px) { .tk-stappen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .tk-stappen { grid-template-columns: 1fr; } }

/* ---------- Tekst naast foto ---------- */
.tk-twee { display: flex; align-items: center; gap: 55px; }
.tk-twee > * { flex: 1 1 0; min-width: 0; }
.tk-twee__foto { width: 100%; height: 300px; object-fit: contain; object-position: bottom center; }
.tk-twee__tekst { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.tk-twee__tekst .tk-knop { align-self: stretch; }
.tk-sectie:has(.tk-twee) { padding: 80px 0; }
@media (max-width: 767px) {
	.tk-twee { flex-direction: column; align-items: stretch; gap: 55px; }
	.tk-sectie:has(.tk-twee) { padding: 40px 0; }
}

/* ---------- Blok met knop (cta) ---------- */
.tk-cta { display: flex; justify-content: space-between; gap: 30px; padding: 70px; border-radius: 22px; background: var(--tk-navy); color: var(--tk-wit); }
.tk-cta__kop { max-width: 500px; }
.tk-cta .tk-intro, .tk-cta .tk-intro p { color: var(--tk-licht); }
.tk-cta__actie { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 310px; flex: none; }
.tk-cta__knop { width: 100%; }
.tk-cta__notitie { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22.4px; color: var(--tk-licht); }
.tk-cta__notitie .tk-icoon { width: 14px; height: 14px; color: var(--tk-oranje); }
@media (max-width: 1024px) { .tk-cta { flex-direction: column; } .tk-cta__actie { width: 100%; } }
@media (max-width: 767px) {
	.tk-cta { padding: 30px; }
	.tk-cta .tk-titel { font-size: 25px; }
}

/* ---------- Offertesectie ---------- */
.tk-offerte { padding: 100px 0; }
.tk-offerte__wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.tk-offerte__links { width: 490px; flex: none; display: flex; flex-direction: column; gap: 40px; }
.tk-offerte__links .tk-kopblok { gap: 0; }
.tk-offerte__intro, .tk-offerte__intro p { color: #c7cedd; }
.tk-score { display: flex; align-items: center; gap: 10px; }
.tk-score__cijfer { font-family: var(--tk-kop); font-size: 16px; line-height: 1; font-weight: 600; color: var(--tk-wit); }
.tk-score .tk-sterren .tk-icoon { width: 15px; height: 15px; }
.tk-vinklijst { display: flex; flex-direction: column; gap: 9px; font-size: 17px; line-height: 27.2px; }
.tk-vinklijst li { display: flex; align-items: center; gap: 10px; }
.tk-vinklijst .tk-icoon { width: 20px; height: 20px; color: var(--tk-wit); }
.tk-persoon { display: flex; align-items: center; gap: 20px; width: 377px; max-width: 100%; padding: 10px; border-radius: 12px; background: var(--tk-navy-donker); }
.tk-persoon__foto, .tk-persoon > .pencil-managed-region { width: 88px; height: 88px; flex: none; border-radius: 12px; object-fit: cover; }
.tk-persoon__info { display: flex; flex-direction: column; }
.tk-persoon__naam { font-size: 17px; line-height: 1; font-weight: 600; }
.tk-persoon__functie { margin: 3px 0 9px; font-size: 15px; line-height: 1; font-weight: 500; font-style: italic; color: #b4b4b4; }
.tk-persoon__contact, .tk-voet__contact { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 22.4px; }
.tk-persoon__contact a, .tk-voet__contact a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.tk-persoon__contact .tk-icoon, .tk-voet__contact .tk-icoon { width: 14px; height: 14px; color: var(--tk-oranje); }
.tk-offerte__kaart { flex: 0 1 627px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 44px; border-radius: 22px; background: var(--tk-wit); color: var(--tk-navy); scroll-margin-top: 100px; }
.tk-offerte__kop { display: flex; flex-direction: column; gap: 8px; }
.tk-offerte__titel { font-family: var(--tk-kop); font-size: 20px; line-height: 1; font-weight: 700; }
.tk-offerte__sub { font-size: 15px; line-height: 24px; color: var(--tk-grijs); }
@media (max-width: 1024px) {
	.tk-offerte__wrap { flex-direction: column; align-items: stretch; }
	.tk-offerte__links { width: auto; }
	.tk-offerte__kaart { flex-basis: auto; }
}
@media (max-width: 767px) {
	.tk-offerte { padding: 40px 0; }
	.tk-offerte__links { gap: 30px; }
	.tk-offerte__kaart { padding: 20px; }
}

/* ---------- Formulier ---------- */
.tk-form { display: flex; flex-direction: column; gap: 10px; }
.tk-form__vraag { font-size: 17px; line-height: 27.2px; font-weight: 600; color: var(--tk-grijs); }
.tk-form__soorten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.tk-form__soort input { position: absolute; opacity: 0; pointer-events: none; }
.tk-form__soort > span { display: inline-block; padding: 15px 35px; border-radius: 8px; background: #f1f2f3; color: var(--tk-navy); font-size: 17px; line-height: 1; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.tk-form__soort input:checked + span { background: var(--tk-oranje); color: var(--tk-wit); }
.tk-form__soort input:focus-visible + span { outline: 2px solid var(--tk-oranje); outline-offset: 2px; }
.tk-form__velden { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.tk-form__veld { width: 100%; padding: 0 5px; margin-bottom: 15px; }
.tk-form__veld--half { width: 50%; }
.tk-form__label { display: block; padding-bottom: 8px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--tk-navy); }
.tk-form__ster { margin-left: 6px; color: var(--tk-oranje); }
.tk-form input[type=text], .tk-form input[type=email], .tk-form input[type=tel], .tk-form select, .tk-form textarea { width: 100%; min-height: 54px; padding: 16px; border: 1px solid var(--tk-rand); border-radius: 10px; background: var(--tk-zand); color: var(--tk-navy); font-family: var(--tk-body); font-size: 14px; line-height: 19.6px; appearance: none; }
.tk-form textarea { min-height: 112px; resize: vertical; }
.tk-form ::placeholder { color: #8a93a3; opacity: 1; }
.tk-form input:focus, .tk-form select:focus, .tk-form textarea:focus { outline: none; border-color: var(--tk-oranje); }
.tk-form__select { position: relative; }
.tk-form__select::after { content: ""; position: absolute; right: 16px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-top-color: var(--tk-navy); pointer-events: none; }
.tk-form__opties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.tk-form__opties[hidden] { display: none; }
.tk-form__optie { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 16px; border: 1px solid var(--tk-rand); border-radius: 10px; background: var(--tk-zand); font-size: 14px; line-height: 19.6px; color: #243352; cursor: pointer; }
.tk-form__opties--radio .tk-form__optie { min-height: 64px; gap: 14px; border-radius: 12px; }
.tk-form__optie input { flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #c9c3b6; border-radius: 6px; background: var(--tk-wit); appearance: none; display: grid; place-items: center; cursor: pointer; }
.tk-form__optie input[type=radio] { border-radius: 50%; }
.tk-form__optie input:checked { border-color: var(--tk-oranje); background: var(--tk-oranje); }
.tk-form__optie input[type=checkbox]:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--tk-wit); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.tk-form__optie input[type=radio]:checked { background: var(--tk-wit); }
.tk-form__optie input[type=radio]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tk-oranje); }
.tk-form__optie:has(input:checked) { border-color: var(--tk-oranje); }
.tk-form__akkoord label { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 24px; color: var(--tk-navy); cursor: pointer; }
.tk-form__akkoord input { margin: 6px 0 0; flex: none; }
.tk-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tk-form__verstuur { width: 100%; min-height: 59px; }
.tk-form__verstuur .tk-icoon { width: 17px; height: 17px; }
.tk-form__verstuur[disabled] { opacity: .6; cursor: wait; }
.tk-form__melding--fout { padding: 12px 16px; border-radius: 10px; background: #fdecea; color: #a12622; font-size: 15px; }
.tk-form [aria-invalid=true] { border-color: #d63638 !important; }
@media (max-width: 767px) {
	.tk-form__veld--half { width: 100%; }
	.tk-form__opties { grid-template-columns: 1fr; }
	.tk-form__soort > span { padding: 15px 20px; }
}

/* ---------- Voet ---------- */
.tk-voet { padding: 80px 0 40px; background: var(--tk-navy-donker); color: #aeb7c8; font-size: 14px; }
.tk-voet__boven { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 50px; }
.tk-voet__merk { width: 285px; display: flex; flex-direction: column; gap: 20px; }
.tk-voet__logo img { width: 220px; height: 39px; }
.tk-voet__tekst, .tk-voet__tekst p { font-size: 15px; line-height: 1.4; color: #8b96ab; }
.tk-voet__meer { font-size: 14px; line-height: 22.4px; color: #aeb7c8; text-decoration: underline; }
.tk-voet__kolom { display: flex; flex-direction: column; gap: 18px; }
.tk-voet__kop { font-size: 16px; line-height: 1; font-weight: 600; color: var(--tk-wit); }
.tk-voet__links { display: flex; flex-direction: column; gap: 17px; line-height: 14px; }
.tk-voet__link { font-size: 14px; line-height: 1; color: #aeb7c8; text-decoration: none; }
.tk-voet__link:hover, .tk-voet__meer:hover, .tk-voet__contact a:hover, .tk-voet__klein:hover { color: var(--tk-wit); }
.tk-voet__contact { gap: 6px; }
.tk-voet__adres { margin-top: 0; line-height: 22.4px; }
.tk-voet__onder { display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); color: #6e7a90; }
.tk-voet__copy { line-height: 1; }
.tk-voet__juridisch { display: flex; gap: 17px; }
.tk-voet__klein { font-size: 14px; line-height: 1; color: #6e7a90; text-decoration: none; }
@media (max-width: 1024px) { .tk-voet__boven { flex-wrap: wrap; } .tk-voet__merk { width: 100%; } }
@media (max-width: 767px) {
	.tk-voet { padding: 40px 0; }
	.tk-voet__boven { flex-direction: column; gap: 50px; }
	.tk-voet__onder { flex-direction: column; align-items: center; text-align: center; }
	.tk-voet__copy { line-height: 1.4; }
}

/* ---------- Cookiebanner ---------- */
.tk-cookies { position: fixed; left: 20px; bottom: 20px; z-index: 900; width: min(440px, calc(100% - 40px)); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.tk-cookies.is-open { opacity: 1; transform: none; }
.tk-cookies__kaart { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 14px; background: var(--tk-wit); box-shadow: 0 12px 40px rgba(15, 26, 46, .22); color: var(--tk-navy); }
.tk-cookies__titel { font-family: var(--tk-kop); font-size: 18px; line-height: 1.2; font-weight: 700; }
.tk-cookies__tekst, .tk-cookies__tekst p { font-size: 14px; line-height: 1.5; color: var(--tk-grijs); }
.tk-cookies__voorkeuren { display: flex; flex-direction: column; gap: 10px; }
.tk-cookies__voorkeuren[hidden] { display: none; }
.tk-cookies__optie { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--tk-grijs); }
.tk-cookies__optie input { margin-top: 3px; accent-color: var(--tk-oranje); }
.tk-cookies__optie strong { color: var(--tk-navy); }
.tk-cookies__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-cookies__knoppen .tk-knop { flex: 1 1 auto; padding: 12px 16px; font-size: 15px; }
.tk-cookies__knoppen .tk-knop[hidden] { display: none; }
.tk-knop--rand.tk-knop { background: var(--tk-wit); color: var(--tk-oranje); }
.tk-knop--rand.tk-knop:hover { background: var(--tk-oranje); color: var(--tk-wit); }
.tk-cookies__links { display: flex; gap: 16px; font-size: 13px; }
.tk-cookies__link { color: var(--tk-grijs); text-decoration: underline; }

/* ---------- Gewone pagina (juridisch) ---------- */
.tk-tekstpagina { max-width: 820px; }
.tk-tekstpagina h1 { font-family: var(--tk-kop); font-size: 42px; line-height: 1.05; font-weight: 700; margin-bottom: 30px; }
.tk-inhoud { color: var(--tk-grijs); }
.tk-inhoud h2, .tk-inhoud h3 { font-family: var(--tk-kop); color: var(--tk-navy); line-height: 1.15; margin: 1.6em 0 .5em; }
.tk-inhoud h2 { font-size: 26px; }
.tk-inhoud h3 { font-size: 20px; }
.tk-inhoud p, .tk-inhoud ul, .tk-inhoud ol { margin-bottom: 1em; }
.tk-inhoud ul { list-style: disc; padding-left: 1.3em; }
.tk-inhoud ol { list-style: decimal; padding-left: 1.3em; }
.tk-inhoud a { color: var(--tk-oranje); }
@media (max-width: 767px) { .tk-tekstpagina h1 { font-size: 30px; } }

/* Pijl achter een Pencilino-knop: via CSS, omdat Pencilino geen SVG in knoppen toestaat. */
.tk-knop--pijl-omlaag::after, .tk-knop--pijl-rechts::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--tk-pijl) center / contain no-repeat; mask: var(--tk-pijl) center / contain no-repeat; }
.tk-knop--pijl-omlaag { --tk-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.tk-knop--pijl-rechts { --tk-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* ========== Modelpagina ========== */
.tk-midden { display: flex; justify-content: center; }
.tk-stack--40 { gap: 40px; }
.tk-kopblok--midden { align-items: center; text-align: center; margin: 0 auto; }
.tk-kopblok--581 { max-width: 581px; }
.tk-sterren--groot { gap: 2px; color: var(--tk-oranje); }
.tk-sterren--groot .tk-icoon { width: 16px; height: 16px; }
.tk-knop--grijsrand { background: var(--tk-wit); border-color: var(--tk-rand); color: var(--tk-navy); }
.tk-knop--grijsrand:hover, .tk-knop--grijsrand:focus-visible { background: var(--tk-licht); border-color: var(--tk-rand); color: var(--tk-navy); }

/* Bovenste deel: galerij en info */
.tk-model-top { padding: 55px 0 140px; }
.tk-model-top__wrap { display: flex; gap: 60px; align-items: flex-start; }
.tk-model-top__galerij { width: 616px; flex: none; min-width: 0; }
.tk-model-top__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.tk-model-top__kop { display: flex; flex-direction: column; gap: 10px; }
.tk-model-top__titel { font-family: var(--tk-kop); font-size: 38px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-model-top__ondertitel { font-size: 20px; line-height: 32px; font-weight: 600; color: var(--tk-navy); }
.tk-model-top__score { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 24px; color: var(--tk-navy); text-decoration: none; }
.tk-usps { display: flex; flex-direction: column; gap: 6px; }
.tk-usps li { display: flex; align-items: center; gap: 15px; font-size: 17px; line-height: 27.2px; color: var(--tk-navy); }
.tk-usps__icoon { width: 20px; height: 20px; flex: none; }
.tk-model-top__knoppen { display: flex; flex-direction: column; gap: 12px; }
.tk-model-top__knoppen .tk-knop { width: 100%; }
.tk-keurmerken { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding-top: 24px; border-top: 1px solid var(--tk-rand); font-size: 14px; line-height: 22.4px; color: var(--tk-navy); }
.tk-keurmerken li { display: flex; align-items: center; gap: 8px; }
.tk-keurmerken .tk-icoon { width: 15px; height: 15px; color: #3f6b53; }

/* Galerij */
.tk-galerij__hoofd { position: relative; aspect-ratio: 616 / 411; border-radius: 22px; overflow: hidden; background: var(--tk-licht); }
.tk-galerij__dia { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.tk-galerij__dia.is-actief { opacity: 1; }
.tk-galerij__foto { width: 100%; height: 100%; object-fit: cover; }
.tk-galerij__pijl { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tk-wit); color: var(--tk-navy); box-shadow: 0 2px 10px rgba(15, 26, 46, .18); transition: background-color .2s, color .2s; }
.tk-galerij__pijl:hover, .tk-galerij__pijl:focus-visible { background: var(--tk-oranje); color: var(--tk-wit); }
.tk-galerij__pijl .tk-icoon { width: 16px; height: 16px; }
.tk-galerij__pijl--vorige { left: 14px; }
.tk-galerij__pijl--volgende { right: 14px; }
.tk-galerij__strook .tk-galerij__pijl { width: 32px; height: 32px; }
.tk-galerij__strook .tk-galerij__pijl .tk-icoon { width: 13px; height: 13px; }
.tk-galerij__strook .tk-galerij__pijl--vorige { left: 6px; }
.tk-galerij__strook .tk-galerij__pijl--volgende { right: 6px; }
.tk-galerij__strook .tk-galerij__pijl[hidden] { display: none; }
.tk-galerij__zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tk-wit); color: #6b6b6b; }
.tk-galerij__zoom svg { width: 18px; height: 18px; }
.tk-galerij__strook { position: relative; margin-top: 10px; overflow: hidden; }
.tk-galerij__duimen { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tk-galerij__duimen::-webkit-scrollbar { display: none; }
.tk-galerij__duimen li { flex: 0 0 calc((100% - 30px) / 4); scroll-snap-align: start; }
.tk-galerij__duim { display: block; width: 100%; height: 90px; border-radius: 10px; overflow: hidden; opacity: .7; transition: opacity .2s; }
.tk-galerij__duim.is-actief, .tk-galerij__duim:hover { opacity: 1; }
.tk-galerij__duim.is-actief { box-shadow: inset 0 0 0 2px var(--tk-oranje); }
.tk-galerij__duim.is-actief img { position: relative; z-index: -1; }
.tk-galerij__duim img { width: 100%; height: 100%; object-fit: cover; }
.tk-lightbox { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 40px; background: rgba(10, 16, 30, .9); }
.tk-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.tk-lightbox__sluit { position: absolute; top: 16px; right: 16px; color: var(--tk-wit); }
.tk-lightbox__sluit .tk-icoon { width: 28px; height: 28px; }

/* Over het model: kaart over video of foto */
.tk-over__wrap { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1500px; margin: 0 auto; padding: 0 50px; }
.tk-over__kaart { position: relative; z-index: 3; width: 553px; flex: none; margin-right: -80px; display: flex; flex-direction: column; gap: 20px; padding: 30px 40px; border-radius: 10px; background: var(--tk-wit); box-shadow: 0 4px 24px rgba(0, 0, 0, .05); }
.tk-over__titel { font-family: var(--tk-kop); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--tk-navy); }
.tk-over__media { flex: 1; min-width: 0; margin-top: 60px; }
.tk-over__foto { width: 100%; height: 700px; object-fit: cover; border-radius: 16px; }
.tk-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--tk-navy); }
.tk-video__foto, .tk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.tk-video__knop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .2s; }
.tk-video__knop:hover { transform: translate(-50%, -50%) scale(1.06); }
.tk-video__icoon { width: 57px; height: 57px; }
.tk-video__toestemming { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 20px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--tk-navy); font-size: 14px; line-height: 1.4; }
.tk-video__toestemming[hidden] { display: none; }
.tk-video__toestemming .tk-knop { padding: 10px 16px; font-size: 15px; }
@media (max-width: 1024px) {
	.tk-over__wrap { flex-direction: column; gap: 40px; }
	.tk-over__kaart { width: 100%; margin-right: 0; }
	.tk-over__media { width: 100%; margin-top: 0; }
	.tk-over__foto { height: 400px; }
}
@media (max-width: 767px) {
	.tk-over__wrap { padding: 0 20px; }
	.tk-over__kaart { padding: 30px; }
	.tk-over__foto { height: 200px; }
}

/* Waarom: kaarten met icoon */
.tk-voordelen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tk-voordeel { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--tk-rand); border-radius: 14px; background: var(--tk-wit); box-shadow: 0 2px 2px rgba(0, 0, 0, .08); }
.tk-voordeel__icoon { width: 60px; height: 60px; object-fit: cover; }
.tk-voordeel__titel { font-family: var(--tk-kop); font-size: 20px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-voordeel__tekst { font-size: 17px; line-height: 1.6; color: var(--tk-navy); }

/* Uitbreidingen: fotokaarten */
.tk-fotokaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tk-fotokaart { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 230px; padding: 24px; border-radius: 14px; overflow: hidden; background: var(--tk-navy); box-shadow: 0 2px 2px rgba(0, 0, 0, .08); isolation: isolate; color: var(--tk-wit); }
.tk-fotokaart__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tk-fotokaart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 35, 63, 0) 0%, var(--tk-navy) 100%); opacity: .7; }
.tk-fotokaart__titel { font-family: var(--tk-kop); font-size: 19px; line-height: 1; font-weight: 700; }
.tk-fotokaart__tekst { font-size: 15px; line-height: 1.1; }
@media (max-width: 1024px) { .tk-voordelen, .tk-fotokaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .tk-voordelen, .tk-fotokaarten { grid-template-columns: 1fr; } }

/* Afmetingen */
.tk-maten { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.tk-maten__tabel { width: 537px; flex: none; display: flex; flex-direction: column; gap: 18px; }
.tk-tabel { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--tk-rand); border-radius: 22px; overflow: hidden; background: var(--tk-wit); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font-size: 17px; line-height: 27.2px; color: var(--tk-navy); }
.tk-tabel th, .tk-tabel td { padding: 0 0 0 20px; text-align: left; width: 33.33%; }
.tk-tabel th { height: 50px; background: var(--tk-zand); font-weight: 700; text-transform: uppercase; }
.tk-tabel td { height: 60px; border-top: 1px solid var(--tk-rand); }
.tk-tabel__extra { font-size: 15px; line-height: 24px; font-weight: 700; color: #c7c7c7; }
.tk-maten__noot { display: flex; gap: 6px; font-size: 14px; line-height: 1.3; color: var(--tk-grijs); }
.tk-maten__noot .tk-icoon { width: 16px; height: 16px; margin-top: 1px; }
.tk-maatwerk { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 50px; border-radius: 22px; background: var(--tk-navy); color: var(--tk-wit); }
.tk-maatwerk__kop { display: flex; flex-direction: column; gap: 6px; }
.tk-maatwerk__titel { font-family: var(--tk-kop); font-size: 32px; line-height: 1; font-weight: 700; }
.tk-maatwerk__tekst, .tk-maatwerk__tekst p { font-size: 17px; line-height: 1.6; color: #c3cada; }
.tk-maatwerk__cijfers { display: grid; grid-template-columns: repeat(3, 1fr); }
.tk-maatwerk__cijfers li { display: flex; flex-direction: column; gap: 10px; }
.tk-maatwerk__waarde { font-family: var(--tk-kop); font-size: 32px; line-height: 1; font-weight: 700; }
.tk-maatwerk__uitleg { font-size: 15px; line-height: 1; color: #b9c1d2; }
@media (max-width: 1024px) { .tk-maten { flex-direction: column; align-items: stretch; } .tk-maten__tabel { width: 100%; } }
@media (max-width: 767px) {
	.tk-maatwerk { padding: 30px; }
	.tk-maatwerk__titel, .tk-maatwerk__waarde { font-size: 26px; }
	.tk-tabel th, .tk-tabel td { padding-left: 14px; font-size: 15px; }
}

/* Geschikt voor: woningtypes als doorlopende strook */
.tk-geschikt { padding: 70px 0; }
.tk-woningen { overflow: hidden; background: var(--tk-licht); }
.tk-woningen__baan { display: flex; width: max-content; will-change: transform; }
/* Pas laten lopen als de kopieën er staan (JS), met een vaste snelheid: duur = breedte / snelheid. */
.tk-woningen__baan.is-klaar { animation: tk-strook var(--tk-duur, 60s) linear infinite; }
.tk-woning { position: relative; flex: none; width: 420px; height: 310px; display: flex; align-items: flex-end; padding: 0 24px 24px; isolation: isolate; }
.tk-woning > .pencil-managed-region, .tk-woning__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tk-woning::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 35, 63, 0) 50%, rgba(22, 35, 63, .55) 100%); }
.tk-woning__titel { font-family: var(--tk-kop); font-size: 18px; line-height: 1; font-weight: 700; color: var(--tk-wit); }
@keyframes tk-strook { to { transform: translateX(var(--tk-verschuif, -50%)); } }
@media (prefers-reduced-motion: reduce) { .tk-woningen__baan { animation: none; } .tk-woningen { overflow-x: auto; } }

/* Reviews */
.tk-reviews__kop { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.tk-reviews__score { display: flex; align-items: center; gap: 16px; }
.tk-reviews__cijfer { font-family: var(--tk-kop); font-size: 42px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-reviews__sterren { display: flex; align-items: flex-end; gap: 10px; }
.tk-reviews__aantal { margin-top: 10px; font-size: 14px; line-height: 1; font-weight: 500; color: var(--tk-grijs); }
.tk-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tk-review { display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 30px; border-radius: 14px; background: var(--tk-wit); box-shadow: 0 2px 2px rgba(0, 0, 0, .08); }
.tk-review__boven { display: flex; justify-content: space-between; align-items: center; }
.tk-review__tekst { flex: 1; min-height: 126px; }
.tk-review__tekst, .tk-review__tekst p { font-size: 17px; line-height: 1.6; color: var(--tk-navy); }
.tk-review__naam { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-family: var(--tk-kop); font-size: 15px; line-height: 1; font-weight: 700; color: var(--tk-navy); }
.tk-review__foto, .tk-review__naam > .pencil-managed-region { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
@media (max-width: 1024px) { .tk-reviews { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .tk-reviews__kop { flex-direction: column; align-items: flex-start; } .tk-reviews__cijfer { font-size: 36px; } }

/* FAQ */
.tk-faq__wrap { display: flex; justify-content: space-between; gap: 55px; }
.tk-faq__kop { width: 407px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.tk-faq__lijst { flex: 0 1 678px; min-width: 0; }
.tk-vraag { border-top: 1px solid var(--tk-rand); }
.tk-vraag__titel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 24px 0; font-size: 18px; line-height: 28.8px; font-weight: 500; color: #1f2124; cursor: pointer; list-style: none; }
.tk-vraag__titel::-webkit-details-marker { display: none; }
.tk-vraag__icoon { width: 32px; height: 32px; flex: none; transition: transform .2s; }
.tk-vraag[open] .tk-vraag__icoon { transform: rotate(180deg); }
.tk-vraag__antwoord { padding: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--tk-grijs); }
.tk-vraag__antwoord p + p { margin-top: 1em; }
@media (max-width: 1024px) { .tk-faq__wrap { flex-direction: column; } .tk-faq__kop { width: auto; } }

/* Offerte op een modelpagina */
.tk-offerte--model .tk-offerte__links { gap: 30px; }
.tk-offerte--model .tk-offerte__links .tk-kopblok { gap: 20px; }
.tk-offerte--model .tk-vinklijst { margin-top: -10px; }
.tk-offerte--model .tk-offerte__kaart { flex-basis: 570px; }
.tk-offerte__contact { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .28); }
.tk-contactregel { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; line-height: 22.4px; }
.tk-contactregel a { display: inline-flex; align-items: center; gap: 9px; color: var(--tk-wit); text-decoration: none; }
.tk-contactregel .tk-icoon { width: 14px; height: 14px; color: var(--tk-oranje); }

@media (max-width: 1024px) {
	.tk-model-top__wrap { flex-direction: column; gap: 40px; }
	.tk-model-top__galerij { width: 100%; }
}
@media (max-width: 767px) {
	.tk-model-top { padding: 30px 0 60px; }
	.tk-model-top__titel { font-size: 32px; }
	.tk-galerij__duim { height: 60px; }
	.tk-galerij__pijl { width: 34px; height: 34px; }
	.tk-woning { width: 300px; height: 260px; }
}

/* Beheerde gebieden van Pencilino (div) mogen de tussenruimte van hun ouder niet breken. */
.tk-stack > .pencil-managed-region,
.tk-kopblok > .pencil-managed-region,
.tk-over__kaart > .pencil-managed-region,
.tk-model-top__info > .pencil-managed-region,
.tk-model-top__kop > .pencil-managed-region { display: flex; flex-direction: column; gap: inherit; }