/* CTXR — palet site-breed: rozerood uit de kubus + blush, geel voor de primaire actie, lettertype Urbanist.
   Geldt voor alle pagina's behalve de homepage (die heeft palet-v2.css met dezelfde tokens).
   De specificiteit van P (html body:has(#app):has(header#top):not(:has(.page-home-v2))) is bewust
   hoog, omdat de per-pagina inline stijlen met !important anders winnen. */
:root {
	--ink:    #2e0f22;   /* donkerste tint: tekst op licht, donkere banden */
	--wine:   #5e1e43;   /* rozerood uit de kubus */
	--rose:   #8f6f84;   /* secundaire tekst, iconen, lijnen (niet voor kleine tekst op licht) */
	--rose-text: #6e5068; /* kleine kopjes (kicker) en scheidingstekens op licht: 6.5:1 op paper */
	--rose-soft: #d9bfcc; /* kicker en links op donkere banden */
	--blush:  #f1e6ec;   /* lichte band */
	--paper:  #fbf7f9;   /* basis */
	--line:   #e2d2db;   /* haarlijnen, kaartranden */
	--signal: #ffde17;   /* merk-geel: alleen de primaire actie */
}

@font-face { font-family: 'Urbanist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/theme/static/fonts/urbanist/urbanist-latin-wght-normal.woff2') format('woff2'); }

html body:has(#app):has(header#top):not(:has(.page-home-v2)) { background: var(--paper) !important; color: var(--ink) !important; font-family: 'Urbanist', system-ui, sans-serif !important; }

/* koppen: rustig, in de tekstkleur van het blok, geen roze */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main h1,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main h2,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main h3 { color: inherit !important; font-weight: 650 !important; letter-spacing: -.015em; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main h2 { line-height: 1.15; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .kicker { color: var(--rose-text) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; opacity: 1 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main a:not(.cta):not(.button) { color: var(--wine); }

/* header: wijnkleur, logo geel, hamburger en menulinks wit */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top { background: var(--wine) !important; color: var(--paper) !important; border-bottom: 1px solid var(--wine) !important; }
/* op mobiel (onder 768px): sticky, en verbergen bij scrollen omlaag / terug bij scrollen omhoog (klasse header-hidden van site.js) */
@media (max-width: 767px) {
	html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top { position: sticky !important; top: 0 !important; z-index: 250 !important; transition: transform .25s ease, margin-bottom .25s ease !important; }
	html body.header-hidden:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:not(.menu-open) { transform: translateY(-100%) !important; margin-bottom: calc(-1 * var(--hdr-h, 100px)) !important; }
}
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top::before,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top::after { display: none !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top figure { background: transparent !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top figure,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top figcaption,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top a { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top svg,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top svg path { fill: var(--signal) !important; color: var(--signal) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a { background: var(--signal) !important; color: var(--ink) !important; padding: .45em 1em; border-radius: 999px; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a span { color: var(--ink) !important; }
/* scheidingstekens in de menubalk */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) li.nav-pipe { color: var(--rose-soft) !important; }
/* hamburger in de header: wit */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top button.nav-toggle { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top button.nav-toggle span { background-color: var(--paper) !important; color: var(--paper) !important; }

/* mobiel menu geopend: het volledige scherm (nav) is wijnkleur, alle tekst en iconen wit, links 25% groter.
   De hamburger wordt het sluitkruis: geen eigen vlak, alleen de witte streepjes. */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) > nav,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav { background: var(--wine) !important; color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) { background: var(--wine) !important; border-bottom-color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav a,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav span,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav li.nav-pipe,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav figcaption,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav p,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav div { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav a { font-size: 1.25em !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav li.nav-pipe { color: var(--rose-soft) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav * { border-color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) button.nav-toggle { background: transparent !important; color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) button.nav-toggle span { background-color: var(--paper) !important; color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) svg,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) svg path { fill: var(--paper) !important; color: var(--paper) !important; }
/* Gratis sandbox in het open menu: geen geel vlak, witte omlijning en witte tekst */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a { background: transparent !important; border: 1px solid var(--paper) !important; color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) header#top:has(button.nav-toggle[aria-expanded="true"]) nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a span { color: var(--paper) !important; }

/* heroband: blush over de volle breedte (boven, onder, links en rechts van de tekst), zonder tussenruimte eronder.
   Boven de titel: ruimte onder de header (mobiel 96px totaal, desktop 117.76px). */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.page-hero { background: var(--blush) !important; background-image: none !important; color: var(--ink) !important; width: 100vw !important; max-width: none !important; box-sizing: border-box !important; margin: -56px calc(50% - 50vw) 0 !important; padding: 96px max(32px, calc(50vw - 430px)) 52px !important; }
@media (min-width: 768px) {
	html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.page-hero { margin-top: -77.76px !important; padding-top: 117.76px !important; }
}
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.page-hero::before,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.page-hero::after { display: none !important; }

/* handleiding: geel vlak wordt blush */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main.page-manual,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) aside.float-nav { background: var(--blush) !important; color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main.page-manual h1,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main.page-manual h2,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) main.page-manual h3 { color: var(--wine) !important; }

/* wijnkleurige rijen (portfolio, nieuws, artikelen): titels en tekst licht, geen geel op wijn */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) :is(time, span, p, li, blockquote, figcaption, .pf-meta, .news-row-text > *, .article-row-inner > *) { color: #e6cfd9 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) :is(h2, h3) { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) a:not(.cta) { color: var(--paper) !important; }

/* gele rijen en vlakken: blush, met wijnkleurige titels */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--yellow, .article-row--yellow, section.pj-band--yellow, div.pf-quiz, div.card-demo) { background: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--yellow, .article-row--yellow, section.pj-band--yellow, div.pf-quiz) :is(h2, h3) { color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--yellow, .article-row--yellow, section.pj-band--yellow, div.pf-quiz) :is(p, li, span, time, b, i, blockquote, .pf-meta) { color: var(--ink) !important; }

/* donkerwijnkleurige vlakken (services, aanvraagkaarten, vergelijkingen, portfolio-band): tekst licht */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(section.plan-fit, div.quiz, label.plan-card, div.wk-ctxr, section.pj-band--brown, div.lane) :is(h1, h2, h3, h4, span, b, i, em, strong, dt, dd, small, figcaption, label, p, li, div) { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(section.plan-fit, div.quiz, label.plan-card, div.wk-ctxr, section.pj-band--brown, div.lane) :is(p, li, dt, dd) { color: #e6cfd9 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(section.plan-fit, div.quiz, label.plan-card, div.wk-ctxr, section.pj-band--brown) a:not(.cta) { color: var(--paper) !important; }

/* vragenlijst (pf-quiz, plan-fit): de kaart is blush, dus tekst donker en keuzeknoppen op papier */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.pf-quiz.pf-quiz :is(h1, h2, h3, h4, span, b, i, em, strong, label, p, li, div, small) { color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.pf-quiz.pf-quiz button.opt { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section#plan-fit.plan-fit { background: var(--wine) !important; }

/* wijn- en inktvlakken: losse tekst die licht moet zijn (tabs, actieve staten, links) */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(span.on, span.jf.on) { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.band--brown a:not(.cta) { color: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section.band--brown .kicker { color: var(--rose-soft) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) nav.wp-side { background: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) nav.wp-side, html body:has(#app):has(header#top):not(:has(.page-home-v2)) nav.wp-side span { color: var(--blush) !important; }

/* quotes: wijnkleurig blok met lichte tekst en binnenmarge (ook de link erin); .quote.quote wint van de gele-rij-regel */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) p.quote.quote { background: var(--wine) !important; color: var(--paper) !important; padding: .9em 1.1em !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) p.quote.quote a { color: var(--blush) !important; }

/* quizzen en wijnkleurige dozen: donkere restkleur 640d0d wordt wijn */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(div.quiz, div#chal.quiz, div#quiz.quiz) { background: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) section#plan-fit.plan-fit, html body:has(#app):has(header#top):not(:has(.page-home-v2)) section#plan-fit.plan-fit * { border-color: var(--rose) !important; }

/* aanvraag-segmenten: gekozen optie wijn met lichte tekst; ongekozen blijft donker op wit */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .wk-seg label:has(input:checked) span { background-color: var(--wine) !important; color: var(--paper) !important; }

/* magenta indicatoren (vergelijkingen en plan-stap): wijnkleur */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(span.jf.on, span.dotv, span.wk-bar-dot, i.wk-key--ctxr, span.on) { background: var(--wine) !important; }

/* prijsschakelaar: actieve maand in wijn i.p.v. geel op wit */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.switch button.active { background: var(--wine) !important; color: var(--paper) !important; }

/* rekenmodule: schuifregelaars in wijn i.p.v. magenta */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) input[type="range"] { accent-color: var(--wine) !important; }

/* vergelijkingen: productmockups, diagrammen, rekenmodule en prijskaarten in het palet */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(div.mgr-panel, div.mgr-panel--cms, div.byo, div.byo-flow, div.byo-agents, p.byo-step, p.byo-note, div.ag-step, div.ag-step.ag-right, div.ag-step.ag-actions, span.byo-box, span.byo-box--draft, span.byo-eu, span.node.node--bad, div.lane--ctxr) { color: var(--blush) !important; border-color: var(--rose) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.node.node--ok { background: var(--blush) !important; color: var(--ink) !important; border-color: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.node.node--bad { color: var(--blush) !important; border-color: var(--rose) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.byo-arrow { color: var(--rose) !important; border-color: var(--rose) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.byo-agent { background: var(--blush) !important; color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.byo-agent--eu { border-color: var(--rose) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(span.bubble, span.bubble--agent) { background: var(--blush) !important; color: var(--ink) !important; border-color: var(--rose) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.draft { background: var(--blush) !important; color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.badge { background: var(--blush) !important; color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(span.mini-btn.mini-btn--go, span.wp-btn.wp-btn--go) { background: var(--signal) !important; color: var(--ink) !important; border-color: var(--signal) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.wp { background: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.wp-top { background: var(--wine) !important; color: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(span.wp-logo, span.wp-site, span.wp-user) { color: var(--blush) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.hl { background: var(--wine) !important; color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) div.calc { background: var(--blush) !important; color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) article.why-tier { background: var(--paper) !important; border-color: var(--line) !important; color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) article.why-tier.is-match { border-color: var(--wine) !important; }

/* banden: tinten in plaats van geel/blauw/bruin */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band--brown  { --bg: var(--ink);   --fg: var(--paper); }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band--yellow { --bg: var(--blush); --fg: var(--ink); }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band--blue   { --bg: var(--paper); --fg: var(--ink); }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band { background-color: var(--bg) !important; color: var(--fg) !important; background-image: none !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band::before,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .band::after { display: none !important; }

/* footer: grotere, witte tekst (ook op de foto-band 'Zoek je een oplossing op maat?' en de slotregel) */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer { background: var(--ink) !important; color: #ffffff !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer :is(h1, h2, h3, h4, p, li, span, small, div, a, label, dt, dd) { color: #ffffff !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer :is(h2, h3) { font-weight: 600 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer h2 span { color: var(--signal) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer p { font-size: 1.2rem !important; line-height: 1.5 !important; opacity: 1 !important; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer p.closure { font-size: .95rem !important; opacity: 1 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer a { text-decoration-color: rgba(255,255,255,.6) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer a.cta, html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer a.cta span { color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) footer#bottom { background: var(--ink) !important; color: #ffffff !important; }

/* sliders en tijdslijnen in de nieuwe tinten */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .hs-time { background: var(--line) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .hs-time > i { background: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .hs-dot.on { background: var(--wine) !important; border-color: var(--wine) !important; }

/* nieuwsbalk */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .latest-news-bar { background-color: var(--blush) !important; border-bottom: 1px solid var(--line) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .latest-news-bar a,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .latest-news-bar .sep { color: var(--ink) !important; }

/* aanvraagstappen: wijn en blush i.p.v. magenta en geel, ook de stappenlijn */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) span.wizard-num { background: var(--blush) !important; color: var(--wine) !important; border: 2px solid var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .wizard-node.is-current span.wizard-num { background: var(--wine) !important; color: var(--paper) !important; border-color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .wizard-dots::before,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .wizard-dots::after { border-color: var(--wine) !important; }

/* mobiele menuknop */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) button.float-nav-toggle { background: var(--wine) !important; color: var(--paper) !important; }

/* knoppen: primair geel (de enige felle kleur), secundair als lijn. Staat onderaan: wint op alle vlakken. */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta { background: var(--signal) !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 999px !important; font-weight: 600 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta span { color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) a.cta.cta :is(span, b, i, em, strong, small) { color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta::before,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta::after { display: none !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta.cta--ghost,
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .button { background: transparent !important; color: inherit !important; border: 1px solid currentColor !important; border-radius: 999px !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .cta.cta--ghost :is(span, b, i, em, strong, small) { color: inherit !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) a.cta.cta--ghost :is(span, b, i, em, strong, small) { color: inherit !important; }

/* portfolio-rijen: bruine rijen worden wijn, tekst licht, knoppen 'Bekijk project' met zwarte tekst */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) { background: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) :is(.pf-row-text, .pf-row-text *, .pf-row-inner, .pf-row-media figcaption) { color: #e6cfd9 !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--brown, .article-row--brown) :is(h2, h3, h4) { color: var(--paper) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(.news-row--yellow, .article-row--yellow) :is(.pf-row-text, .pf-row-text *:not(.cta), .pf-row-inner) { color: var(--ink) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) .pf-row .cta, html body:has(#app):has(header#top):not(:has(.page-home-v2)) .pf-row .cta span { color: #000000 !important; }

/* portfolio-items: bruine banden worden wijn; bijschriften onder beelden licht, niet zwart op bruin/wijn */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(section.pj-band--brown, .pj-band--brown) { background: var(--wine) !important; background-color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(figure.pj-img, figure.pj-img figcaption) { background: var(--wine) !important; background-color: var(--wine) !important; }
html body:has(#app):has(header#top):not(:has(.page-home-v2)) figure.pj-img.pj-img figcaption, html body:has(#app):has(header#top):not(:has(.page-home-v2)) figure.pj-img.pj-img figcaption * { color: var(--paper) !important; }

/* homepage: kicker en hint in de kubus leesbaar (palet-v2 staat op de homepage; hogere specificiteit) */
html body:has(main.page-home-v2) main :is(.kicker, span.kicker) { color: var(--rose-text) !important; }
html body:has(main.page-home-v2) :is(section.band--brown, section.hv-close) :is(.kicker, span.kicker) { color: var(--rose-soft) !important; }
html body:has(main.page-home-v2) #xr .cc-hint.cc-hint { color: var(--ink) !important; }

/* lettertype voor de tekstelementen */
html body:has(#app):has(header#top):not(:has(.page-home-v2)) :is(h1, h2, h3, h4, p, li, a, button, label, span, small, dt, dd, figcaption, summary, div) { font-family: 'Urbanist', system-ui, sans-serif !important; }