/* ==========================================================================
   De Printkamer · info.css — Contact, Over ons, FAQ, Klantenservice, juridische pagina's en 404.
   Ontwerp: tab 6 (67:2618, 67:2868, 67:3115, 193:1215, 193:1500; mobiel 69:3057, 69:3220, 69:3394,
   193:1808, 193:1996) en tab 7 (70:2618 e.v.). Tablet (768–1279) zelf ontworpen in dezelfde stijl.
   ========================================================================== */

@media (min-width: 768px) { .v-mobiel { display: none !important; } }
@media (max-width: 767px) { .v-groot { display: none !important; } }

.info-bg--wit { background: var(--kleur-wit); }
.info-bg--creme { background: var(--kleur-creme); }
.info-bg--lavendel-licht { background: var(--kleur-lavendel-licht); }

/* Gedeelde koptypes */
.info-h1 { font: 600 clamp(38px, 31.31px + 1.714vw, 56px)/1.02 var(--font-display); letter-spacing: -0.025em; }

/* ==========================================================================
   Paginakop (lavendel, gecentreerd) + FAQ-zoekveld
   ========================================================================== */
.paginakop { background: var(--kleur-lavendel); padding-block: 64px; }
.paginakop__binnen { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 880px; text-align: center; }
.paginakop__titel { font: 600 clamp(38px, 31.31px + 1.714vw, 56px)/1.02 var(--font-display); letter-spacing: -0.025em; }
.paginakop__tekst { max-width: 680px; font-size: var(--fs-groot); line-height: 1.55; }

.faq-zoek {
	position: relative; display: flex; align-items: center; gap: 10px;
	width: min(600px, 100%); min-height: 62px; padding: 0 16px 0 20px;
	border: 2px solid transparent; border-radius: var(--radius-rond); background: var(--kleur-wit);
	transition: border-color var(--snel) var(--ease);
}
.faq-zoek:focus-within, .faq-zoek.is-gevuld { border-color: var(--kleur-inkt); }
.faq-zoek__icoon { width: 22px; height: 22px; flex: none; }
.faq-zoek__invoer { flex: 1; min-width: 0; height: 58px; border: 0; background: none; font-size: var(--fs-groot); line-height: 1.55; outline: none; -webkit-appearance: none; appearance: none; }
.faq-zoek__invoer::placeholder { color: var(--kleur-grijs); opacity: 1; }
.faq-zoek__invoer::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-zoek__wis { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 14px; background: var(--kleur-lavendel-licht); }
.faq-zoek__wis::before { content: ""; position: absolute; inset: -8px; }
.faq-zoek__wis .icoon { width: 14px; height: 14px; }
.faq-zoek__teller { min-height: 20px; margin-top: -4px; font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-grijs); }
.faq-zoek__teller:empty { display: none; }

@media (max-width: 767px) {
	.paginakop { padding-block: 36px; }
	.paginakop__binnen { align-items: flex-start; text-align: left; }
	.paginakop__titel { line-height: 1.06; letter-spacing: -0.02em; }
	.paginakop__tekst { font-size: var(--fs-basis); }
	.faq-zoek { width: 100%; min-height: 58px; padding: 0 14px 0 16px; gap: 10px; }
	.faq-zoek__icoon { width: 20px; height: 20px; }
	.faq-zoek__invoer { height: 54px; font-size: var(--fs-basis); }
}

/* ==========================================================================
   Vraagkaart (accordeon): FAQ, snelle antwoorden
   ========================================================================== */
.vraag { border: 1px solid var(--kleur-lijn); border-radius: 20px; background: var(--kleur-wit); transition: border-color var(--snel) var(--ease); }
.vraag:has([aria-expanded="true"]) { border-color: var(--kleur-lavendel); }
.vraag__kop { font: inherit; }
.vraag__knop {
	display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px;
	padding: 18px 22px 18px 24px; text-align: left; border-radius: 20px;
	font: 500 var(--fs-h4)/1.25 var(--font-display); letter-spacing: -0.002em;
}
.vraag__tekst { flex: 1; }
.vraag__toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--kleur-lavendel-licht); transition: background-color var(--snel) var(--ease); }
.vraag__toggle .icoon { width: 16px; height: 16px; grid-area: 1 / 1; }
.vraag__min { display: none; }
.vraag__knop[aria-expanded="true"] .vraag__toggle { background: var(--kleur-limoen); }
.vraag__knop[aria-expanded="true"] .vraag__plus { display: none; }
.vraag__knop[aria-expanded="true"] .vraag__min { display: block; }
.vraag__knop:hover .vraag__toggle { background: var(--kleur-lavendel); }
.vraag__knop[aria-expanded="true"]:hover .vraag__toggle { background: #c2ec82; }
.vraag__antwoord { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.vraag__antwoord > div { overflow: hidden; }
.vraag__antwoord p { padding: 0 22px 20px 24px; margin-top: 0; color: var(--kleur-grijs); line-height: 1.55; }
.vraag__antwoord a { color: inherit; }
.vraag:has([aria-expanded="true"]) .vraag__antwoord { grid-template-rows: 1fr; }
mark.faq-treffer { background: none; color: var(--kleur-lavendel-donker); font-weight: 600; }
.vraag__knop mark.faq-treffer { font-weight: 600; }

@media (max-width: 767px) {
	.vraag { border-radius: 18px; }
	.vraag__knop { gap: 12px; min-height: 62px; padding: 16px 16px 16px 18px; border-radius: 18px; font: 600 15px/1.25 var(--font-tekst); letter-spacing: 0; }
	.vraag__toggle { width: 30px; height: 30px; }
	.vraag__antwoord p { padding: 0 16px 16px 18px; margin-top: 0; font-size: var(--fs-klein); line-height: 1.45; }
	.vraag--niet-mobiel { display: none; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contactblok { background: var(--kleur-creme); padding-block: 64px; }
.contactblok__binnen { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.contactblok__formulier { display: grid; gap: 18px; padding: 36px; border-radius: 28px; background: var(--kleur-wit); }
.contactblok__titel { font: 600 24px/1.2 var(--font-display); letter-spacing: -0.005em; }
.contactblok__privacy { font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-grijs); }
.contactblok__privacy a { color: inherit; }
.contactblok__gegevens { display: grid; gap: 16px; }

.contactkaart { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; background: var(--kleur-wit); text-decoration: none; transition: box-shadow var(--snel) var(--ease); }
a.contactkaart:hover { box-shadow: 0 0 0 1px var(--kleur-lavendel); }
.contactkaart__icoon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--kaart-kleur, var(--kleur-lavendel)); }
.contactkaart__icoon .icoon { width: 26px; height: 26px; }
.contactkaart__tekst { display: grid; gap: 2px; min-width: 0; }
.contactkaart__label { font: 700 13px/1.2 var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-grijs); }
.contactkaart__waarde { font: 600 15px/1 var(--font-tekst); overflow-wrap: anywhere; }
.contactkaart__sub { font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-grijs); }
.contactblok__bedrijf { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--kleur-lijn); border-radius: 20px; font-size: var(--fs-klein); line-height: 1.45; }
.contactblok__bedrijf-kop { font: 700 13px/1.2 var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-grijs); }

/* Contact Form 7 (eigen markup; CF7-CSS staat uit) */
.contactform .wpcf7 { margin: 0; }
.contactform form { display: grid; gap: 18px; }
.contactform .hidden-fields-container, .contactform form > div:first-child:has(> input[type="hidden"]) { display: none; }
.contactform .screen-reader-response { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contactform__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contactform .veld { gap: 8px; }
.contactform .veld__label { line-height: 1; }
.contactform .wpcf7-form-control-wrap { display: block; }
.contactform .veld input[type="text"], .contactform .veld input[type="email"], .contactform .veld select, .contactform .veld textarea {
	min-height: 56px; padding: 15px 16px; border-radius: 14px; line-height: 1.55;
}
.contactform .veld select { padding-right: 44px; background-size: 16px; }
.contactform .veld select:invalid, .contactform .veld select.is-leeg { color: var(--kleur-grijs); }
.contactform .veld textarea { height: 150px; min-height: 150px; resize: vertical; display: block; }
.contactform .wpcf7-not-valid { background: var(--kleur-perzik-licht) !important; border: 2px solid var(--kleur-inkt) !important; padding: 14px 15px !important; }
.contactform .wpcf7-not-valid-tip {
	display: flex; gap: 6px; align-items: flex-start; margin-top: 8px;
	font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-inkt);
}
.contactform .wpcf7-not-valid-tip::before {
	content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%;
	background: var(--kleur-perzik) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5v5.25' stroke='%232F2F40' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='1.05' fill='%232F2F40'/%3E%3C/svg%3E") center/18px no-repeat;
}
.contactform__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.contactform__chips:empty { display: none; }
.contactform__chips { align-items: center; }
.contactform__chips-label { margin-right: 2px; color: var(--kleur-grijs); font-size: var(--fs-klein); line-height: 1.45; }
.contactchip { min-height: 37px; padding: 8px 14px; border-radius: var(--radius-rond); background: var(--kleur-wit); border: 1px solid var(--kleur-lijn); font-weight: 600; font-size: var(--fs-klein); line-height: 1.45; transition: background-color var(--snel) var(--ease), border-color var(--snel) var(--ease), color var(--snel) var(--ease); position: relative; }
.contactchip::before { content: ""; position: absolute; inset: -4px 0; }
.contactchip:hover { border-color: var(--kleur-inkt); background: var(--kleur-lavendel-licht); }
.contactchip[aria-pressed="true"] { background: var(--kleur-inkt); border-color: var(--kleur-inkt); color: var(--kleur-wit); }
.contactform__verstuur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contactform .wpcf7-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--kleur-lijn); border-top-color: var(--kleur-inkt); visibility: hidden; animation: dpk-spin .7s linear infinite; }
.contactform form.submitting .wpcf7-spinner { visibility: visible; }
.contactform .wpcf7-response-output { margin: 0; padding: 16px 18px; border-radius: var(--radius-kaart-s); border: 1px solid var(--kleur-perzik); background: var(--kleur-perzik-licht); font-size: var(--fs-klein); line-height: 1.45; }
.contactform form.init .wpcf7-response-output, .contactform form.resetting .wpcf7-response-output, .contactform form.submitting .wpcf7-response-output { display: none; }
.contactform form.sent .wpcf7-response-output { border-color: var(--kleur-limoen); background: var(--kleur-limoen-licht); }

@media (min-width: 768px) and (max-width: 1023px) {
	.contactblok__binnen { grid-template-columns: 1fr; }
	.contactblok__gegevens { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.contactblok__binnen { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
}
@media (max-width: 767px) {
	.contactblok { padding: 24px 0 48px; }
	.contactblok__binnen { display: flex; flex-direction: column-reverse; gap: 24px; }
	.contactblok__gegevens { gap: 16px; width: 100%; }
	.contactkaart { gap: 14px; padding: 14px 16px 14px 14px; border-radius: 20px; }
	.contactkaart__icoon { width: 46px; height: 46px; border-radius: 14px; }
	.contactkaart__icoon .icoon { width: 24px; height: 24px; }
	.contactkaart__tekst { gap: 0; }
	.contactkaart__label { font: 400 var(--fs-klein)/1.45 var(--font-tekst); letter-spacing: 0; text-transform: none; }
	.contactkaart__sub, .contactblok__bedrijf { display: none; }
	.contactblok__formulier { gap: 14px; padding: 22px 20px 24px; border-radius: 24px; width: 100%; }
	.contactblok__titel { font-size: 21px; line-height: 1.22; letter-spacing: -0.004em; }
	.contactform form { gap: 14px; }
	.contactform__rij { grid-template-columns: 1fr; gap: 14px; }
	.contactform .veld { gap: 6px; }
	.contactform .veld input[type="text"], .contactform .veld input[type="email"], .contactform .veld textarea { padding: 14px; }
	.contactform .veld textarea { height: 130px; min-height: 130px; }
	.contactform__onderwerp, .contactform__chips { display: none; }
	.contactform__verstuur .knop { width: 100%; padding-left: 28px; }
}

/* ==========================================================================
   Snelle antwoorden
   ========================================================================== */
.snel { padding-block: 64px; }
.snel__binnen { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.snel__kop { display: grid; gap: 14px; justify-items: start; }
.snel__titel { font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -0.015em; }
.snel__vragen { display: grid; gap: 12px; }
.snel__knop--onder { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
	.snel__binnen { grid-template-columns: 1fr; gap: 32px; }
	.snel__kop { grid-template-columns: 1fr auto; align-items: end; }
	.snel__kop .eyebrow { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.snel__binnen { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767px) {
	.snel { padding-block: 40px; }
	.snel__binnen { grid-template-columns: 1fr; gap: 16px; }
	.snel__titel, .snel__knop--boven { display: none; }
	.snel__vragen { gap: 16px; }
	.snel__knop--onder { display: inline-flex; }
}

/* ==========================================================================
   Over ons · hero met foto's
   ========================================================================== */
.bhero { padding-top: 24px; background: var(--kleur-creme); }
.bhero__kaart { display: flex; align-items: center; gap: 48px; padding: 64px 48px 64px 64px; border-radius: 40px; background: var(--kleur-lavendel); overflow: hidden; }
.bhero__tekst { flex: 1 1 0; min-width: 0; display: grid; gap: 20px; justify-items: start; }
.bhero__titel { max-width: 560px; font: 600 clamp(38px, 31.31px + 1.714vw, 56px)/1.02 var(--font-display); letter-spacing: -0.025em; }
.bhero__intro { max-width: 540px; font-size: var(--fs-groot); line-height: 1.55; }
.bhero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.bhero__beelden { position: relative; flex: none; width: 520px; height: 460px; }
.bhero__foto { position: absolute; overflow: hidden; }
.bhero__foto img { width: 100%; height: 100%; object-fit: cover; }
.bhero__foto--1 { left: 0; top: 0; width: 320px; height: 420px; border-radius: 28px; }
.bhero__foto--2 { left: 280px; top: 150px; width: 240px; height: 300px; border: 8px solid var(--kleur-lavendel); border-radius: 24px; }
.bhero__foto--2 img { border-radius: 16px; }
.bhero__sticker {
	position: absolute; left: 366px; top: 14px; display: grid; place-items: center; align-content: center; gap: 2px;
	width: 112px; height: 112px; border-radius: 50%; background: var(--kleur-limoen);
	font: 600 15px/1 var(--font-tekst); transform: rotate(-6deg);
}
.bhero__sticker .icoon { width: 28px; height: 28px; }
@media (max-width: 1279px) {
	.bhero__kaart { flex-direction: column; align-items: stretch; padding: 48px; gap: 40px; }
	.bhero__beelden { align-self: center; }
}
@media (max-width: 767px) {
	.bhero { padding-top: 12px; }
	.bhero__kaart { flex-direction: column-reverse; gap: 16px; padding: 24px 20px; border-radius: 28px; }
	.bhero__tekst { gap: 16px; }
	.bhero__titel { line-height: 1.06; letter-spacing: -0.02em; }
	.bhero__intro { font-size: var(--fs-basis); }
	.bhero__knoppen { width: 100%; }
	.bhero__knoppen .knop { width: 100%; padding-left: 28px; }
	.bhero__knop-2 { display: none !important; }
	.bhero__beelden { position: static; width: 100%; height: auto; }
	.bhero__foto--1 { position: relative; width: 100%; height: 230px; border-radius: 20px; }
	.bhero__foto--2, .bhero__sticker { display: none; }
}

/* ==========================================================================
   Citaat (Waarom)
   ========================================================================== */
.citaat { background: var(--kleur-creme); padding-block: var(--sectie-ruimte); }
.citaat__binnen { display: flex; align-items: center; gap: 80px; max-width: 1080px; }
.citaat__kop { flex: 1 1 0; min-width: 0; display: grid; gap: 16px; }
.citaat__tekst { margin: 0; font: 600 clamp(25px, 19.8px + 1.2vw, 38px)/1.08 var(--font-display); letter-spacing: -0.015em; max-width: 620px; }
.citaat__uitleg { flex: 0 0 400px; display: grid; gap: 14px; color: var(--kleur-grijs); line-height: 1.55; }
@media (max-width: 1023px) {
	.citaat__binnen { flex-direction: column; align-items: flex-start; gap: 24px; }
	.citaat__uitleg { flex: none; max-width: 620px; }
}
@media (max-width: 767px) {
	.citaat { padding-block: 40px; }
	.citaat__binnen { gap: 16px; }
	.citaat__tekst { line-height: 1.12; letter-spacing: -0.012em; }
}

/* ==========================================================================
   Waarden
   ========================================================================== */
.waarden { background: var(--kleur-lavendel-licht); padding-block: var(--sectie-ruimte); }
.waarden__kop { display: grid; gap: 12px; margin-bottom: 40px; }
.waarden__titel { max-width: 720px; font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -0.015em; }
.waarden__tekst { max-width: 640px; font-size: var(--fs-groot); line-height: 1.55; color: var(--kleur-grijs); }
.waarden__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.waarde { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: 28px; background: var(--kleur-wit); }
.waarde__icoon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--kaart-kleur, var(--kleur-limoen)); }
.waarde__icoon .icoon { width: 28px; height: 28px; }
.waarde__tekst { display: grid; gap: 12px; }
.waarde__titel { font: 600 24px/1.2 var(--font-display); letter-spacing: -0.005em; }
.waarde__uitleg { color: var(--kleur-grijs); line-height: 1.55; }
@media (max-width: 1023px) {
	.waarden__lijst { grid-template-columns: 1fr; gap: 16px; }
	.waarde { display: flex; align-items: center; gap: 20px; padding: 20px 24px; }
	.waarde__icoon { flex: none; }
	.waarde__tekst { gap: 4px; }
}
@media (max-width: 767px) {
	.waarden { padding-block: 40px; }
	.waarden__kop { margin-bottom: 16px; gap: 0; }
	.waarden__titel, .waarden__tekst { display: none; }
	.waarde { gap: 14px; padding: 16px; border-radius: 20px; }
	.waarde__icoon { width: 48px; height: 48px; border-radius: 16px; }
	.waarde__icoon .icoon { width: 24px; height: 24px; }
	.waarde__tekst { gap: 2px; }
	.waarde__titel { font: 600 15px/1 var(--font-tekst); letter-spacing: 0; padding-bottom: 2px; }
	.waarde__uitleg { font-size: var(--fs-klein); line-height: 1.45; }
}

/* ==========================================================================
   TikTok-raster (Kijk mee)
   ========================================================================== */
.tiktokraster { background: var(--kleur-creme); padding-block: var(--sectie-ruimte); }
.tiktokraster__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.tiktokraster__tekst { display: grid; gap: 10px; }
.tiktokraster__titel { font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -0.015em; }
.tiktokraster__volg {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
	padding: 14px 22px 14px 16px; border-radius: var(--radius-rond); background: var(--kleur-inkt); color: var(--kleur-wit);
	font: 600 var(--fs-knop)/1 var(--font-tekst); text-decoration: none; white-space: nowrap; --icoon-accent: var(--kleur-limoen);
	transition: background-color var(--snel) var(--ease);
}
.tiktokraster__volg:hover { background: #22222f; }
.tiktokraster__volg .icoon { width: 20px; height: 20px; }
.tiktokraster__volg--onder { display: none; }
.tiktokraster__lijst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tiktokraster__video { position: relative; display: block; aspect-ratio: 305 / 400; border-radius: 24px; overflow: hidden; background: var(--kleur-lavendel-licht); }
.tiktokraster__video img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
a.tiktokraster__video:hover img, button.tiktokraster__video:hover img { transform: scale(1.04); }
button.tiktokraster__video { width: 100%; padding: 0; border: 0; cursor: pointer; }
.tiktokraster__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kleur-wit); transform: translate(-50%, -50%); }
.tiktokraster__play .icoon { width: 28px; height: 28px; }
@media (max-width: 1023px) {
	.tiktokraster__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tiktokraster { padding-block: 40px; }
	.tiktokraster__kop { margin-bottom: 16px; }
	.tiktokraster__kop .eyebrow, .tiktokraster__kop .tiktokraster__volg { display: none; }
	.tiktokraster__titel { line-height: 1.12; letter-spacing: -0.012em; }
	.tiktokraster__lijst { gap: 12px; }
	.tiktokraster__video { aspect-ratio: auto; height: 230px; border-radius: 20px; }
	.tiktokraster__play { width: 44px; height: 44px; }
	.tiktokraster__play .icoon { width: 22px; height: 22px; }
	.tiktokraster__volg--onder { display: flex; width: 100%; margin-top: 16px; padding-right: 20px; }
}

/* ==========================================================================
   Balk met actie (Kom langs)
   ========================================================================== */
.ctabalk { background: var(--kleur-creme); padding-bottom: var(--sectie-ruimte); }
.ctabalk:first-child, .paginakop + .ctabalk { padding-top: var(--sectie-ruimte); }
.ctabalk__kaart { display: flex; align-items: center; gap: 40px; padding: 40px 48px; border-radius: 32px; background: var(--kaart-kleur, var(--kleur-perzik)); }
.ctabalk__icoon { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 22px; background: var(--kleur-wit); }
.ctabalk__icoon .icoon { width: 36px; height: 36px; }
.ctabalk__tekst { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; }
.ctabalk__titel { font: 600 24px/1.2 var(--font-display); letter-spacing: -0.005em; }
.ctabalk__uitleg { max-width: 640px; line-height: 1.55; }
@media (min-width: 768px) and (max-width: 1023px) {
	.ctabalk__kaart { flex-wrap: wrap; gap: 24px; padding: 32px; }
	.ctabalk__tekst { flex-basis: calc(100% - 96px); }
}
@media (max-width: 767px) {
	.ctabalk { padding-bottom: 48px; }
	.ctabalk__kaart { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border-radius: 24px; }
	.ctabalk__icoon { width: 30px; height: 30px; background: none; border-radius: 0; }
	.ctabalk__icoon .icoon { width: 30px; height: 30px; }
	.ctabalk__tekst { gap: 10px; }
	.ctabalk__titel { font-size: 21px; line-height: 1.22; letter-spacing: -0.004em; }
	.ctabalk__knop { width: 100%; padding-left: 28px; }
}

/* ==========================================================================
   Contactkaart (lavendel): FAQ, juridische pagina's
   ========================================================================== */
.info-contactkaart { display: flex; align-items: center; gap: 20px; padding: 28px 32px; border-radius: 28px; background: var(--kleur-lavendel); }
.info-contactkaart__icoon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--kleur-wit); }
.info-contactkaart__icoon .icoon { width: 28px; height: 28px; }
.info-contactkaart__tekst { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; line-height: 1.55; }
.info-contactkaart__titel { font: 500 19px/1.25 var(--font-display); letter-spacing: -0.002em; }
.info-contactkaart a:not(.knop) { color: inherit; text-decoration: none; }
.info-contactkaart a:not(.knop):hover { text-decoration: underline; }
.info-contactkaart--klein { gap: 16px; padding: 22px 24px; border-radius: 22px; }
.info-contactkaart--klein .info-contactkaart__icoon { width: 48px; height: 48px; border-radius: 16px; }
.info-contactkaart--klein .info-contactkaart__icoon .icoon { width: 24px; height: 24px; }
.info-contactkaart--klein .info-contactkaart__tekst { gap: 2px; font-size: var(--fs-klein); line-height: 1.45; }
.info-contactkaart--klein .info-contactkaart__titel { font: 600 15px/1 var(--font-tekst); letter-spacing: 0; padding-bottom: 2px; }
@media (min-width: 768px) and (max-width: 1023px) {
	.info-contactkaart { flex-wrap: wrap; }
	.info-contactkaart__tekst { flex-basis: calc(100% - 76px); }
}
@media (max-width: 767px) {
	.info-contactkaart, .info-contactkaart--klein { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border-radius: 24px; }
	.info-contactkaart__icoon, .info-contactkaart--klein .info-contactkaart__icoon { width: 28px; height: 28px; background: none; border-radius: 0; }
	.info-contactkaart__icoon .icoon, .info-contactkaart--klein .info-contactkaart__icoon .icoon { width: 28px; height: 28px; }
	.info-contactkaart__tekst { gap: 10px; font-size: var(--fs-klein); line-height: 1.45; }
	.info-contactkaart__titel { font: 600 15px/1 var(--font-tekst); letter-spacing: 0; }
	.info-contactkaart__knop { width: 100%; padding-left: 28px; }
}

/* ==========================================================================
   FAQ (onderwerpen + lijsten + geen resultaten)
   ========================================================================== */
.faq { background: var(--kleur-creme); padding: 56px 0 var(--sectie-ruimte); }
.faq__binnen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.faq__onderwerpen { position: sticky; top: calc(var(--header-h) + 24px); }
.admin-bar .faq__onderwerpen { top: calc(var(--header-h) + 56px); }
.faq__onderwerpen ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.faq-onderwerp {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 14px; border-radius: 14px;
	font: 600 15px/1 var(--font-tekst); color: var(--kleur-grijs); text-decoration: none;
	transition: background-color var(--snel) var(--ease), color var(--snel) var(--ease);
}
.faq-onderwerp .icoon { width: 20px; height: 20px; color: var(--kleur-inkt); }
.faq-onderwerp:hover { color: var(--kleur-inkt); background: rgba(255, 255, 255, .6); }
.faq-onderwerp[aria-current="true"] { background: var(--kleur-wit); color: var(--kleur-inkt); }
.faq__lijsten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; min-width: 0; }
.faq-groep { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-groep__titel { font: 600 24px/1.2 var(--font-display); letter-spacing: -0.005em; }
.faq-groep__vragen { display: grid; gap: 12px; }
.faq-geen { display: grid; justify-items: center; gap: 14px; padding: 48px 24px; border-radius: 24px; background: var(--kleur-wit); text-align: center; }
.faq-geen__icoon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kleur-lavendel-licht); }
.faq-geen__icoon .icoon { width: 28px; height: 28px; }
.faq-geen__titel { font: 500 19px/1.25 var(--font-display); letter-spacing: -0.002em; }
.faq-geen__tekst { color: var(--kleur-grijs); line-height: 1.55; }
.faq-geen__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faq-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 37px; padding: 8px 14px; border: 1px solid var(--kleur-lijn); border-radius: var(--radius-rond); background: var(--kleur-wit); font-size: var(--fs-klein); line-height: 1.45; position: relative; transition: border-color var(--snel) var(--ease); }
.faq-chip::before { content: ""; position: absolute; inset: -4px 0; }
.faq-chip:hover { border-color: var(--kleur-inkt); }
.faq-chip .icoon { width: 14px; height: 14px; }
@media (min-width: 768px) and (max-width: 1023px) {
	.faq__binnen { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.faq__binnen { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
	.faq { padding: 24px 0 48px; }
	.faq__binnen { grid-template-columns: 1fr; gap: 16px; }
	.faq__onderwerpen { position: static; }
	.faq__onderwerpen ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.faq-onderwerp { min-height: 34px; padding: 9px 14px; gap: 0; border: 1px solid var(--kleur-lijn); border-radius: var(--radius-rond); background: var(--kleur-wit); font-size: var(--fs-klein); color: var(--kleur-inkt); position: relative; }
	.faq-onderwerp::before { content: ""; position: absolute; inset: -5px 0; }
	.faq-onderwerp .icoon { display: none; }
	.faq-onderwerp[aria-current="true"] { background: var(--kleur-inkt); border-color: var(--kleur-inkt); color: var(--kleur-wit); }
	.faq-onderwerp:hover { background: var(--kleur-wit); border-color: var(--kleur-inkt); }
	.faq-onderwerp[aria-current="true"]:hover { background: var(--kleur-inkt); }
	.faq__lijsten { gap: 16px; }
	.faq-groep { gap: 16px; }
	.faq-groep__vragen { gap: 16px; }
	.faq-groep__titel { font-size: 21px; line-height: 1.22; letter-spacing: -0.004em; }
	.faq-geen { padding: 32px 20px; gap: 12px; }
}

/* ==========================================================================
   Klantenservice-overzicht
   ========================================================================== */
.service { background: var(--kleur-creme); padding-block: 64px; }
.service__kop { display: grid; gap: 12px; margin-bottom: 32px; }
.service__titel { font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -0.015em; }
.service__lijst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.servicekaart {
	position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 28px 28px 72px;
	border-radius: 28px; background: var(--kleur-wit); text-decoration: none;
	transition: transform var(--snel) var(--ease), box-shadow var(--snel) var(--ease);
}
.servicekaart:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--kleur-lavendel); }
.servicekaart__icoon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 18px; background: var(--kaart-kleur, var(--kleur-lavendel)); }
.servicekaart__icoon .icoon { width: 28px; height: 28px; }
.servicekaart__titel { font: 600 21px/1.22 var(--font-display); letter-spacing: -0.004em; }
.servicekaart__tekst { color: var(--kleur-grijs); line-height: 1.55; }
.servicekaart__pijl { position: absolute; left: 28px; bottom: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kleur-inkt); color: var(--kleur-wit); transition: transform var(--snel) var(--ease); }
.servicekaart__pijl .icoon { width: 18px; height: 18px; }
.servicekaart:hover .servicekaart__pijl { transform: translateX(3px); }
.service__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; font-size: var(--fs-klein); line-height: 1.45; }
.service__links-kop { color: var(--kleur-grijs); }
.service__links a { font-weight: 600; text-underline-offset: .18em; }
.service__links a:hover { color: var(--kleur-lavendel-donker); }
@media (max-width: 1279px) { .service__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.service { padding-block: 40px 24px; }
	.service__kop { margin-bottom: 16px; }
	.service__lijst { grid-template-columns: 1fr; gap: 12px; }
	.servicekaart { grid-template-columns: 48px minmax(0, 1fr) 36px; align-items: center; gap: 2px 14px; padding: 16px; border-radius: 20px; }
	.servicekaart__icoon { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; border-radius: 16px; }
	.servicekaart__icoon .icoon { width: 24px; height: 24px; }
	.servicekaart__titel { font: 600 15px/1.25 var(--font-tekst); letter-spacing: 0; }
	.servicekaart__tekst { grid-column: 2; font-size: var(--fs-klein); line-height: 1.45; }
	.servicekaart__pijl { position: static; grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; }
}

/* ==========================================================================
   Juridische pagina's
   ========================================================================== */
.jur-kop { background: var(--kleur-lavendel); padding-block: 56px; }
.jur-kop__binnen { display: grid; gap: 12px; justify-items: start; }
.jur-kop__kruimel { gap: 8px; }
.jur-kop__kruimel .kruimelpad__sep { width: 14px; height: 14px; transform: rotate(-90deg); opacity: 1; color: var(--kleur-grijs); }
.jur-kop__label { display: none; text-decoration: none; }
.jur-kop__titel { font: 600 clamp(32px, 26.06px + 1.524vw, 52px)/1.02 var(--font-display); letter-spacing: -0.025em; }
.jur-kop__datum { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--radius-rond); background: var(--kleur-wit); font-size: var(--fs-klein); line-height: 1.45; }
.jur-kop__datum .icoon { width: 14px; height: 14px; }

.jur { background: var(--kleur-creme); padding: 56px 0 var(--sectie-ruimte); }
.jur__binnen { display: grid; grid-template-columns: 300px minmax(0, 760px); gap: 64px; align-items: start; }
.jur__zijbalk { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.admin-bar .jur__zijbalk { top: calc(var(--header-h) + 56px); }
.jur-toc { display: grid; gap: 10px; padding: 20px; border-radius: 20px; background: var(--kleur-wit); }
.jur-toc__kop, .jur-nav__kop { font: 700 13px/1.2 var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-grijs); }
.jur-toc__knop { display: none; }
.jur-toc__lijst { display: grid; gap: 10px; }
.jur-toc__link { position: relative; display: block; font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-grijs); text-decoration: none; transition: color var(--snel) var(--ease), padding var(--snel) var(--ease); }
.jur-toc__link:hover { color: var(--kleur-inkt); }
.jur-toc__link[aria-current="true"] { padding-left: 11px; font-weight: 600; color: var(--kleur-inkt); }
.jur-toc__link[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; border-radius: 2px; background: var(--kleur-lavendel-donker); transform: translateY(-50%); }
.jur-nav { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--kleur-lijn); border-radius: 20px; }
.jur-nav__lijst { display: grid; gap: 0; }
.jur-nav__link { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-klein); line-height: 1.45; color: var(--kleur-grijs); text-decoration: none; transition: background-color var(--snel) var(--ease), color var(--snel) var(--ease); }
.jur-nav__link span { flex: 1; }
.jur-nav__link .icoon { width: 14px; height: 14px; color: var(--kleur-inkt); --icoon-accent: transparent; }
.jur-nav__link:hover { color: var(--kleur-inkt); background: var(--kleur-lavendel-licht); }
.jur-nav__link[aria-current="page"] { background: var(--kleur-lavendel-licht); color: var(--kleur-inkt); }
.jur-nav--onder { display: none; }

.jur__inhoud { display: grid; gap: 30px; min-width: 0; }
.jur__tekst > * + * { margin-top: 14px; }
.jur__tekst > p:first-child { font-size: var(--fs-groot); line-height: 1.55; color: var(--kleur-inkt); }
.jur__tekst p, .jur__tekst li { color: var(--kleur-grijs); line-height: 1.55; }
.jur__tekst h2 { margin-top: 30px; font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.005em; scroll-margin-top: calc(var(--header-h) + 24px); }
.admin-bar .jur__tekst h2 { scroll-margin-top: calc(var(--header-h) + 56px); }
.jur__tekst h3 { margin-top: 18px; font: 600 16px/1.3 var(--font-tekst); color: var(--kleur-inkt); }
.jur__tekst h3 + p { margin-top: 6px; }
.jur__tekst ul { display: grid; gap: 14px; padding: 0; list-style: none; }
.jur__tekst ul li { position: relative; padding-left: 18px; margin: 0; }
.jur__tekst ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--kleur-lavendel-donker); }
.jur__tekst a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: .18em; }
.jur__tekst a:hover { color: var(--kleur-lavendel-donker); }
.jur__tekst strong { color: var(--kleur-inkt); font-weight: 600; }
.jur__tekst .kader { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--kleur-lavendel-licht); }
.jur__tekst .kader p { color: var(--kleur-inkt); margin: 0; }
.jur__tekst .kader p:first-child strong { display: block; font-size: 15px; line-height: 1; padding: 2px 0; }
.jur__tekst .kader--perzik { background: var(--kleur-perzik-licht); }
.jur__tekst .kader--limoen { background: var(--kleur-limoen-licht); }
.jur__tekst .jur-betaallogos { display: flex; gap: 12px; }
.jur__tekst .jur-betaallogos span { display: grid; place-items: center; width: 48px; height: 36px; border: 1px solid var(--kleur-lijn); border-radius: 8px; background: var(--kleur-wit); overflow: hidden; }
.jur__tekst .jur-betaallogos svg { width: 48px; height: 36px; }
.jur__tekst .knop-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-weight: 600; color: var(--kleur-lavendel-donker); text-decoration: underline; text-underline-offset: .18em; }

@media (min-width: 1024px) and (max-width: 1279px) {
	.jur__binnen { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1023px) {
	.jur { padding-top: 32px; }
	.jur__binnen { grid-template-columns: 1fr; gap: 12px; }
	.jur__zijbalk { position: static; max-height: none; overflow: visible; }
	.jur-nav--zijbalk { display: none; }
	.jur-nav--onder { display: grid; }
	.jur-toc { gap: 0; padding: 0; border: 1px solid var(--kleur-lijn); border-radius: 16px; }
	.jur-toc__kop { display: none; }
	.jur-toc__knop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 14px 16px; font: 600 15px/1 var(--font-tekst); border-radius: 16px; }
	.jur-toc__knop .icoon { width: 18px; height: 18px; transition: transform var(--snel) var(--ease); }
	.jur-toc__knop[aria-expanded="true"] .icoon { transform: rotate(180deg); }
	.jur-toc__lijst { display: none; padding: 4px 16px 16px; }
	.jur-toc__knop[aria-expanded="true"] + .jur-toc__lijst { display: grid; }
	.jur-toc__link { padding-block: 4px; }
}
@media (max-width: 767px) {
	.jur-kop { padding: 32px 0 28px; }
	.jur-kop__binnen { gap: 10px; }
	.jur-kop__kruimel { display: none; }
	.jur-kop__label { display: block; }
	.jur-kop__titel { line-height: 1.06; letter-spacing: -0.02em; }
	.jur-kop__datum { padding: 0; background: none; }
	.jur-kop__datum .icoon { display: none; }
	.jur { padding: 20px 0 48px; }
	.jur__inhoud { gap: 28px; }
	.jur__tekst > * + * { margin-top: 12px; }
	.jur__tekst h2 { font-size: 21px; line-height: 1.22; margin-top: 24px; }
}

/* ==========================================================================
   404
   ========================================================================== */
.nietgevonden { background: var(--kleur-creme); padding: 24px 0 var(--sectie-ruimte); }
.nietgevonden__kaart { position: relative; display: grid; place-items: center; min-height: 540px; padding: 96px 64px; border-radius: 40px; background: var(--kleur-lavendel); overflow: hidden; text-align: center; }
.nietgevonden__vorm { position: absolute; right: -140px; bottom: -180px; width: 460px; height: 460px; border-radius: 50%; background: var(--kleur-limoen); }
.nietgevonden__vorm::after { content: ""; position: absolute; inset: -28px; border: 2px dashed rgba(47, 47, 64, .22); border-radius: 50%; }
.nietgevonden__inhoud { position: relative; display: grid; justify-items: center; gap: 24px; max-width: 760px; }
.nietgevonden__titel { font: 600 var(--fs-h1)/1.02 var(--font-display); letter-spacing: -0.025em; }
.nietgevonden__tekst { max-width: 560px; font-size: var(--fs-groot); line-height: 1.55; }
.nietgevonden__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 767px) {
	.nietgevonden { padding: 12px 0 48px; }
	.nietgevonden__kaart { min-height: 0; padding: 48px 20px 140px; border-radius: 28px; }
	.nietgevonden__vorm { right: 50%; bottom: -150px; width: 240px; height: 240px; margin-right: -120px; }
	.nietgevonden__inhoud { gap: 16px; }
	.nietgevonden__titel { line-height: 1.06; letter-spacing: -0.02em; }
	.nietgevonden__knoppen { width: 100%; }
	.nietgevonden__knoppen .knop { width: 100%; padding-left: 28px; }
}

/* Maatwerk: bestand uploaden (foto of voorbeeld). */
.veld--bestand input[type="file"] { width: 100%; padding: 10px; border: 1.5px dashed var(--kleur-lijn); border-radius: 16px; background: var(--kleur-wit); color: var(--kleur-grijs); font: 400 15px/1.4 var(--font-tekst); cursor: pointer; transition: border-color var(--snel) var(--ease); }
.veld--bestand input[type="file"]:hover { border-color: var(--kleur-inkt); }
.veld--bestand input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 0; border-radius: var(--radius-rond); background: var(--kleur-inkt); color: var(--kleur-wit); font: 600 14px/1 var(--font-tekst); cursor: pointer; }
.jur__tekst .jur-betaallogos span.betaallogos-rij { display: inline-flex; width: auto; height: auto; border: 0; border-radius: 0; background: none; overflow: visible; gap: 8px; }

/* Bevestiging na verzenden (contact en maatwerk). */
.contactform__bedankt { display: grid; justify-items: start; gap: 14px; padding: 32px; border-radius: 24px; background: var(--kleur-limoen-licht); outline: none; }
.contactform__bedankt[hidden] { display: none; }
.contactform__bedankt-icoon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kleur-inkt); }
.contactform__bedankt-icoon .icoon { width: 26px; height: 26px; color: var(--kleur-wit); --icoon-accent: var(--kleur-limoen); }
.contactform__bedankt-titel { font: 600 26px/1.2 var(--font-display); letter-spacing: -0.005em; }
.contactform__bedankt-knoppen { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
@media (max-width: 767px) { .contactform__bedankt { padding: 24px 20px; } .contactform__bedankt-titel { font-size: 22px; } .contactform__bedankt-knoppen .knop { width: 100%; } }