/* ---------- Content Highlight Block ---------- */
.content-highlight { position: relative; width: 100%; padding: 90px 0; color: var(--textColor); background: #F6F3F0; }
.content-highlight--light { background: #F7F5F3; }
.content-highlight + .content-highlight--white,
.content-highlight--white + .content-highlight--white { border-top: 1px solid rgba(15, 15, 15, .06); }
.content-highlight__container { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 70px; align-items: start; width: calc(100% - 40px); max-width: var(--container-width); margin: 0 auto; }
.content-highlight--no-card .content-highlight__container { grid-template-columns: minmax(0, 820px); justify-content: center; }
.content-highlight--card-left .content-highlight__card { order: -1; }

.content-highlight__eyebrow { margin: 0 0 5px; color: var(--backgroundColorOrange); font-size: 14px; line-height: 1.4; font-weight: 600; text-transform: uppercase; }
.content-highlight__title { margin: 0 0 34px; color: var(--textColor); font-size: clamp(28px, 2.2vw, 38px); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.content-highlight__title span { color: var(--backgroundColorOrange); }
.content-highlight__text { font-size: 17px; line-height: 1.8; }
.content-highlight__text > :first-child { margin-top: 0; }
.content-highlight__text > :last-child { margin-bottom: 0; }
.content-highlight__text p { margin: 0 0 18px; }
.content-highlight__text h3 { margin: 30px 0 10px; font-size: 21px; line-height: 1.3; }
.content-highlight__text ul,
.content-highlight__text ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.content-highlight__text ol { counter-reset: kami-ch; }
.content-highlight__text li { position: relative; margin: 0 0 10px; padding-left: 28px; }
.content-highlight__text ul li::before { position: absolute; top: .72em; left: 4px; width: 8px; height: 8px; content: ""; background: var(--backgroundColorOrange); border-radius: 50%; }
.content-highlight__text ol li { counter-increment: kami-ch; }
.content-highlight__text ol li::before { position: absolute; top: 0; left: 0; content: counter(kami-ch) "."; color: var(--backgroundColorOrange); font-weight: 700; }
.content-highlight__text a { color: var(--backgroundColorOrange); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.content-highlight__text a:hover { text-decoration: none; }
.content-highlight__text strong { font-weight: 600; }

/* Dark card with the key points; sticks while reading on desktop. */
.content-highlight__card { position: sticky; top: 120px; overflow: hidden; padding: 38px 36px; color: #fff; background: radial-gradient(circle at 110% -10%, rgba(var(--backgroundColorOrangeRGB), .35) 0%, rgba(var(--backgroundColorOrangeRGB), 0) 55%), var(--backgroundColorBlack); border: 1px solid rgba(255, 255, 255, .06); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 15, 15, .18); }
.content-highlight__card::before { position: absolute; top: 0; left: 36px; width: 60px; height: 3px; content: ""; background: var(--backgroundColorOrange); border-radius: 0 0 3px 3px; }
.content-highlight__card-title { margin: 0 0 22px; color: #fff; font-size: 22px; line-height: 1.3; font-weight: 700; }
.content-highlight__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.content-highlight__list-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; }
.content-highlight__check { position: relative; width: 26px; height: 26px; margin-top: -1px; background: rgba(var(--backgroundColorOrangeRGB), .18); border: 1px solid rgba(var(--backgroundColorOrangeRGB), .55); border-radius: 50%; }
.content-highlight__check::after { position: absolute; top: 6px; left: 9px; width: 6px; height: 11px; content: ""; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.content-highlight__button { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 13px 22px; color: #fff; background: var(--buttonPrimary); border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .25s ease; }
.content-highlight__button:hover,
.content-highlight__button:focus-visible { color: #fff; background: var(--buttonHover); text-decoration: none; }
.content-highlight__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.content-highlight__button-arrow { transition: transform .25s ease; }
.content-highlight__button:hover .content-highlight__button-arrow { transform: translateX(3px); }

@media (max-width: 1100px) {
	.content-highlight { padding: 80px 0; }
	.content-highlight__container { gap: 44px; }
	.content-highlight__card { padding: 32px 28px; }
	.content-highlight__card::before { left: 28px; }
}

@media (max-width: 900px) {
	.content-highlight__container { grid-template-columns: 1fr; gap: 34px; }
	.content-highlight--card-left .content-highlight__card { order: 0; }
	.content-highlight__card { position: relative; top: auto; }
}

@media (max-width: 767px) {
	.content-highlight { padding: 60px 0; }
	.content-highlight__eyebrow { font-size: 13px; }
	.content-highlight__title { margin-bottom: 28px; font-size: 26px; line-height: 1.15; }
	.content-highlight__text { font-size: 16px; line-height: 1.7; }
	.content-highlight__card { padding: 28px 22px; border-radius: 14px; }
	.content-highlight__card::before { left: 22px; }
	.content-highlight__card-title { font-size: 19px; }
	.content-highlight__list-item { font-size: 15px; }
}

/* ---------- Strakker (27-09) ---------- */
@media (min-width:768px) {
.content-highlight { padding-top:var(--section-pad); padding-bottom:var(--section-pad); }
.content-highlight__eyebrow { margin-bottom:8px; }
.content-highlight__title { font-size:var(--h2-size); line-height:1.18; }
.content-highlight__card { border-radius:var(--radius-card-lg); box-shadow:var(--shadow-card-strong); }
}

/* ---------- Tables in the text (cookiebeleid, 09-10-2026) ---------- */
.content-highlight__text table { width: 100%; margin: 6px 0 26px; font-size: 15px; line-height: 1.55; text-align: left; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid rgba(15, 15, 15, .1); border-radius: var(--radius-card, 12px); overflow: hidden; }
.content-highlight__text th { padding: 13px 16px; color: #fff; background: var(--backgroundColorBlack); font-weight: 600; vertical-align: bottom; }
.content-highlight__text td { padding: 13px 16px; border-top: 1px solid rgba(15, 15, 15, .1); vertical-align: top; }
.content-highlight__text td:first-child { font-weight: 600; white-space: nowrap; }
.content-highlight__text td code { font-size: .95em; }

/* Phones: every row becomes a card; the column name comes from data-label. */
@media (max-width: 767px) {
	.content-highlight__text table,
	.content-highlight__text tbody,
	.content-highlight__text tr,
	.content-highlight__text td { display: block; width: 100%; }
	.content-highlight__text table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
	.content-highlight__text thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.content-highlight__text tr { margin: 0 0 14px; padding: 6px 16px; background: #fff; border: 1px solid rgba(15, 15, 15, .1); border-radius: var(--radius-card, 12px); }
	.content-highlight__text td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid rgba(15, 15, 15, .08); }
	.content-highlight__text tr td:first-child { border-top: 0; white-space: normal; overflow-wrap: anywhere; }
	.content-highlight__text td::before { content: attr(data-label); color: var(--backgroundColorBlack); font-weight: 600; }
}
@media (min-width: 768px) {
	.content-highlight__text .kami-cookie-table th:nth-child(3) { width: 34%; }
}