/* ============================================================
   Adequaat — premium UI-laag
   Twee thema's op dezelfde markup:
     body.theme-verfijnd  -> licht & luchtig
     body.theme-premium   -> diep & contrasterend
   ============================================================ */

/* ---------- Thema-variabelen ---------- */
body.theme-verfijnd {
  --ph-bg: linear-gradient(135deg, #f4f9fc 0%, #e2eff7 100%);
  --ph-text: #005784;
  --ph-sub: #4a6b7d;
  --ph-badge-bg: #ada388;
  --ph-badge-text: #00344e;
  --ph-accent: #ada388;
  --icon-bg: #e3eff7;
  --icon-fg: #005784;
  --stat-num: #7d6f47;
  --step-bg: #005784;
  --step-num: #ffffff;
  --quote-bg: #f7f4ee;
  --quote-border: #ada388;
}

body.theme-premium {
  --ph-bg: linear-gradient(120deg, #00344e 0%, #005784 55%, #0d6ea3 100%);
  --ph-text: #ffffff;
  --ph-sub: #cfe4f0;
  --ph-badge-bg: #ada388;
  --ph-badge-text: #00344e;
  --ph-accent: #ada388;
  --icon-bg: #ffffff;
  --icon-fg: #005784;
  --stat-num: #7d6f47;
  --step-bg: #ada388;
  --step-num: #00344e;
  --quote-bg: #f7f4ee;
  --quote-border: #ada388;
}

/* ---------- Page hero (vervangt .page-hero op nieuwe pagina's) ---------- */
.phero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 4rem;
  background: var(--ph-bg);
  color: var(--ph-text);
}
.phero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* subtiel stip-patroon (verfijnd) */
.theme-verfijnd .phero::before {
  background-image: radial-gradient(rgba(0, 87, 132, .07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
/* zachte organische gloed (premium) — bewust géén diagonale lijnen zodat phero ≠ hero */
.theme-premium .phero::before {
  background-image:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .12), transparent 42%),
    radial-gradient(circle at 6% 92%, rgba(173, 163, 136, .16), transparent 40%);
}
/* optionele foto-achtergrond */
.phero.has-photo .phero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.phero.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.theme-verfijnd .phero.has-photo::after { background: linear-gradient(120deg, rgba(244, 249, 252, .94), rgba(226, 239, 247, .82)); }
.theme-premium .phero.has-photo::after { background: linear-gradient(120deg, rgba(0, 52, 78, .92), rgba(0, 87, 132, .78)); }
.phero .container { position: relative; z-index: 2; }

.phero .badge {
  display: inline-block;
  background: var(--ph-badge-bg);
  color: var(--ph-badge-text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 1.2rem;
}
.phero h1 {
  color: var(--ph-text);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 2.9rem);
  line-height: 1.12;
  max-width: 760px;
  margin-bottom: 1rem;
}
.phero .case-label { margin-bottom: 1.2rem; }
.phero .lead {
  font-size: 1.2rem;
  color: var(--ph-sub);
  max-width: 700px;
  margin: 0;
}
.phero .lead + .btn, .phero .lead + .cta-row, .phero .lead + p { margin-top: 1.6rem; }
.phero .accent-bar {
  --kort: 64px;
  width: var(--kort);
  height: 5px;
  background: var(--ph-accent);
  border-radius: 3px;
  margin-bottom: 1.4rem;
}

/* ---------- Merk-signatuur: gouden streep onder sectie-titels ---------- */
.section-head h2, .waarom-head h2, .werkwijze-head h2 { position: relative; padding-bottom: .6rem; }
.section-head h2::after, .waarom-head h2::after, .werkwijze-head h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  --kort: 52px;
  width: var(--kort);
  height: 4px;
  border-radius: 2px;
  background: var(--goud);
}
/* Streep onder koppen trekt door tot de volle breedte van de kop en krimpt dan terug naar
   het korte streepje. --kop-w = tekstbreedte van de kop (main.js meet de langste regel),
   --kort = de rustbreedte. Paginakop bij laden, sectiekoppen zodra ze in beeld komen. */
@keyframes streep-door {
  0% { width: 0; animation-timing-function: cubic-bezier(.25, .7, .3, 1); }
  42%, 58% { width: var(--kop-w, var(--kort)); animation-timing-function: cubic-bezier(.6, 0, .25, 1); }
  100% { width: var(--kort); }
}
:is(.section-head, .waarom-head, .werkwijze-head).reveal.in h2::after { animation: streep-door 1.7s .25s backwards; }

/* ---------- Iconen ---------- */
.icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex: 0 0 auto;
}
.icon-badge svg {
  width: 27px;
  height: 27px;
  stroke: var(--icon-fg);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-premium .section-dark .icon-badge { background: rgba(255, 255, 255, .1); }
.theme-premium .section-dark .icon-badge svg { stroke: #ada388; }

/* ---------- Kaarten ---------- */
/* Alleen kaarten die in hun geheel een link zijn, reageren op hover */
.card { transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; }
.card:has(> a.card-link) { position: relative; }
.card > a.card-link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card:has(> a.card-link):hover {
  transform: translateY(-4px);
  border-color: #c9dae5;
  box-shadow: 0 16px 34px rgba(0, 50, 75, .13);
}
.card:has(> a.card-link):hover .card-link::after { transform: translateX(3px); }
.card:has(> a.card-link:focus-visible) { box-shadow: 0 0 0 3px var(--blauw); }
.card > a.card-link:focus-visible { outline: none; }
.card.card-icon { border-top: 4px solid var(--blauw); }
.theme-premium .card.card-icon { border-top-color: var(--goud); }

.card .card-titel { font-size: 1.25rem; margin: 0 0 .5rem; }

/* ---------- Donkere sectie (past zich aan per thema) ---------- */
.theme-verfijnd .section-dark { background: #eef5fa; color: var(--tekst); }
.theme-premium .section-dark {
  background: linear-gradient(135deg, #00344e 0%, #005784 100%);
  color: #eaf4fa;
}
.theme-premium .section-dark h2,
.theme-premium .section-dark h3 { color: #ffffff; }
.theme-premium .section-dark p { color: #cfe4f0; }
.theme-premium .section-dark .card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.theme-premium .section-dark .card h3 { color: #ffffff; }
.theme-premium .section-dark .card p { color: #cfe4f0; }
.theme-premium .section-dark .card a.card-link { color: #c9e8f8; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.stat { text-align: center; padding: 1.4rem 1rem; }
.stat .num {
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, .9rem + 2.8vw, 2.7rem);
  line-height: 1;
  color: var(--stat-num);
}
.stat .lbl {
  display: block;
  margin-top: .55rem;
  font-size: .95rem;
  color: var(--tekst-licht);
}
.theme-premium .section-dark .stat .lbl { color: #cfe4f0; }
.theme-premium .section-dark .stat .num { color: #ada388; }

/* ---------- Stappenlijn ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: step;
  margin: 1.5rem 0;
}
.step { position: relative; }
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--step-bg);
  color: var(--step-num);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 16px rgba(0, 50, 75, .18);
}
.step h3 { margin-top: 0; }
.step p { color: var(--tekst-licht); font-size: .97rem; }
.theme-premium .section-dark .step p { color: #cfe4f0; }

/* ---------- Pull-quote ---------- */
.pullquote {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  border-left: 4px solid var(--quote-border);
  background: var(--quote-bg);
  padding: 1.5rem 1.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--blauw-donker);
  margin: 2.2rem 0;
}
.pullquote::before {
  content: '';
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: .1rem;
  background: var(--goud);
  -webkit-mask: 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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Twee-koloms (tekst + beeld) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split .split-media img {
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 45, 70, .2);
  display: block;
  width: 100%;
}
.split.rev .split-media { order: 2; }

/* ---------- CTA-banner ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 3.5rem 2.5rem;
  text-align: center;
  color: #ffffff;
  background: #00344e;
  border-top: 5px solid var(--goud);
  margin: 3rem 0;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 95% at 50% 0%, rgba(173, 163, 136, .20), transparent 70%);
  pointer-events: none;
}
.cta-banner h2 { color: #ffffff; margin-top: 0; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2rem); position: relative; }
.cta-banner p { max-width: 620px; margin: 0 auto 1.6rem; color: #d8ecf6; position: relative; }
.cta-banner .btn { position: relative; }
.cta-banner .cta-alt { display: block; margin-top: 1rem; color: #cfe4f0; font-size: .95rem; position: relative; }
.cta-banner .cta-alt a { color: #ffffff; font-weight: 700; }

/* CTA-banner met contactpersoon rechts (portret + scheidslijn) */
.cta-banner:has(.cta-persoon) {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  text-align: left;
}
.cta-banner:has(.cta-persoon) .cta-main p { margin: 0 0 1.6rem; }
.cta-persoon {
  position: relative;
  display: flex;
  gap: 1.3rem;
  align-items: center;
  padding-left: 3rem;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.cta-persoon picture { flex: 0 0 auto; position: relative; }
.cta-persoon picture::before {
  content: '';
  position: absolute;
  inset: 8px -8px -8px 8px;
  border: 1.5px solid var(--goud);
  border-radius: var(--radius);
  transition: transform .4s var(--ease);
}
.cta-banner:hover .cta-persoon picture::before { transform: translate(2px, 2px); }
.cta-persoon img {
  position: relative;
  display: block;
  width: 104px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
}
.cta-persoon-tekst { min-width: 0; padding-left: .5rem; }
.cta-banner .cta-persoon-tekst p { margin: 0; max-width: none; }
.cta-banner .cta-persoon-intro { font-size: .9rem; margin-bottom: .6rem; }
.cta-banner .cta-persoon-naam { font-family: var(--font-head); font-weight: 700; color: #ffffff; font-size: 1.05rem; line-height: 1.3; }
.cta-banner .cta-persoon-rol { font-size: .82rem; color: var(--goud); letter-spacing: .03em; margin-bottom: .7rem; }
.cta-tel {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: #ffffff;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.cta-mail { display: block; font-size: .88rem; color: #cfe4f0; overflow-wrap: break-word; }
.cta-tel:hover, .cta-mail:hover { color: #ffffff; }
@media (max-width: 860px) {
  .cta-banner:has(.cta-persoon) { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .cta-banner .cta-main, .cta-banner .cta-persoon { min-width: 0; }
  .cta-banner .btn { white-space: normal; text-align: center; }
  .cta-persoon { padding: 2rem 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 560px) {
  .cta-persoon img { width: 84px; height: 105px; }
  .cta-tel { font-size: 1.15rem; }
}
@media (max-width: 380px) {
  .cta-persoon { gap: 1rem; }
  .cta-persoon img { width: 72px; height: 90px; }
  .cta-tel { font-size: 1.05rem; }
  .cta-mail { font-size: .82rem; }
}

/* ---------- Vormen-tabs (sectie "Onze vormen van ...") ---------- */
.vormen-tabs { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 3rem; align-items: start; }
.vt-lijst { display: flex; flex-direction: column; min-width: 0; }
.vt-fase {
  font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--goud); padding: 1.1rem 1.1rem .4rem;
}
.vt-fase:first-child { padding-top: 0; }
.vt-tab {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  background: none; border: 0; border-left: 3px solid rgba(255,255,255,.15);
  padding: .85rem 1.1rem; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: #cfe4f0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.vt-tab span { font-weight: 800; color: var(--goud); font-size: .82rem; }
.vt-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.vt-tab.on { border-left-color: var(--goud); color: #fff; background: rgba(255,255,255,.07); }
/* met JS neemt een schuivende indicator de gouden rand over (main.js, tabs) */
.vt-lijst { position: relative; }
.vt-lijst.met-indicator .vt-tab.on { border-left-color: rgba(255,255,255,.15); }
.vt-indicator {
  position: absolute; left: 0; top: 0; width: 3px; height: 1px;
  background: var(--goud); transform-origin: 0 0; pointer-events: none;
}
.vt-indicator.klaar { transition: transform .32s var(--ease); }
/* vanzelf doorlopen (main.js): lijntje onder de actieve tab loopt vol, daarna de volgende tab */
.vt-tab { position: relative; }
.vormen-tabs.auto .vt-tab.on::after {
  content: ''; position: absolute; left: 3px; right: 0; bottom: 0; height: 2px;
  background: rgba(173, 163, 136, .7); transform-origin: left center;
  animation: vt-timer 7s linear forwards;
}
.vormen-tabs.auto.pauze .vt-tab.on::after { animation-play-state: paused; }
@keyframes vt-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vt-auto {
  display: inline-flex; align-items: center; gap: .55rem; justify-self: start; margin-top: -1.9rem; /* grid-rij-afstand is 3rem */
  padding: .45rem 1.1rem; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: #cfe4f0; transition: color .2s ease;
}
.vt-auto:hover { color: #fff; }
.vt-auto svg { width: 11px; height: 11px; fill: var(--goud); flex: 0 0 auto; }
.vt-panelen { min-width: 0; }
.vt-pane { display: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 2.4rem; }
.vt-pane.on { display: block; animation: vt-in .28s var(--ease); }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.vt-icon { display: inline-flex; width: 46px; height: 46px; margin-bottom: 1.2rem; }
.vt-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--goud); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vt-pane h3 { font-size: 1.45rem; margin: 0 0 .8rem; color: #fff; }
.vt-pane p { color: #cfe4f0; margin: 0 0 1.4rem; max-width: 560px; }
.vt-link { font-family: var(--font-head); font-weight: 700; color: var(--goud); }
.vt-link:hover { color: #fff; text-decoration: none; }
.vt-link .pijl { display: inline-block; transition: transform .2s var(--ease); }
.vt-link:hover .pijl { transform: translateX(3px); }
@media (max-width: 960px) {
  /* verticale lijst in plaats van een afgekapte scrollstrook */
  .vormen-tabs { grid-template-columns: 1fr; gap: 1.4rem; }
  .vt-fase { display: none; }
  .vt-tab { padding: .8rem 1rem; }
  .vt-pane { scroll-margin-top: 90px; }
  .vt-auto { display: none; }
}
@media (max-width: 560px) {
  .vt-pane { padding: 1.6rem 1.3rem; }
}

/* ---------- Checkmark-lijst ---------- */
.check-list { list-style: none; margin: 0 0 1rem; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--icon-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005784' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.theme-premium .section-dark .check-list li::before {
  background-color: rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ada388' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Belicoon rinkelt kort bij hover/focus (header, mobiele belknop, belbalk) ---------- */
@keyframes rinkel {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-9deg); }
  60% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
}
:is(.header-phone, .belbalk):is(:hover, :focus-visible) svg { animation: rinkel .5s ease-in-out; }

/* ---------- Leesvoortgang (cases en vacatures, body.leesstuk) ----------
   De blauwe onderrand van de header loopt goud vol naarmate u verder leest.
   CSS scroll-driven animation; browsers zonder ondersteuning tonen niets. */
@supports (animation-timeline: scroll()) {
  body.leesstuk .site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: var(--goud); transform-origin: left center; pointer-events: none;
    animation: leesvoortgang linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes leesvoortgang { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  body.leesstuk .site-header::after { display: none; }
}

/* ---------- Scroll-reveal ----------
   JS zet .in (zichtbaar) en daarna .klaar, zodat eigen hover-transities
   van kaarten en knoppen na de reveal weer gelden. --i = volgorde binnen
   een groep voor een lichte stagger. */
.js .reveal:not(.klaar) {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal:not(.in) { opacity: 0; transform: translateY(16px); }

/* ---------- Lijnen tekenen in bij de reveal ----------
   Zonder JS staat de gewone rand er; met JS wordt die rand een pseudo-element
   dat intekent, met dezelfde stagger (--i) als de reveal zelf. */
.js .trustbar-item.reveal { position: relative; border-left-color: transparent; }
.js .trustbar-item.reveal::before {
  content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--goud); transform-origin: top; transform: scaleY(0);
  transition: transform .8s var(--ease) calc(.15s + var(--i, 0) * 70ms);
}
.js .waarom-tile.reveal { position: relative; border-bottom-color: transparent; }
.js .waarom-tile.reveal::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: rgba(255, 255, 255, .22); transform-origin: left; transform: scaleX(0);
  transition: transform 1s var(--ease) calc(.1s + var(--i, 0) * 70ms);
}
.js .trustbar-item.reveal.in::before, .js .waarom-tile.reveal.in::after { transform: none; }
@media (max-width: 860px) {
  /* stats krijgen op smalle schermen een gouden linkerrand (zie Responsive) */
  .js .stat.reveal { position: relative; border-left-color: transparent; }
  .js .stat.reveal::before {
    content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
    background: var(--goud); transform-origin: top; transform: scaleY(0);
    transition: transform .8s var(--ease) calc(.15s + var(--i, 0) * 70ms);
  }
  .js .stat.reveal.in::before { transform: none; }
}

/* ---------- Hero-intro bij laden ---------- */
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes balk-in { from { width: 0; } }
.hero-grid > div:first-child > *,
.phero .container > * { animation: hero-in .7s var(--ease) both; }
.hero-grid > div:first-child > :nth-child(2), .phero .container > :nth-child(2) { animation-delay: .08s; }
.hero-grid > div:first-child > :nth-child(3), .phero .container > :nth-child(3) { animation-delay: .16s; }
.hero-grid > div:first-child > :nth-child(4), .phero .container > :nth-child(4) { animation-delay: .24s; }
.hero-grid > div:first-child > :nth-child(5), .phero .container > :nth-child(5) { animation-delay: .32s; }
.hero .hero-grid .accent-bar { animation: balk-in .8s var(--ease) .3s both; }
.phero .container > .accent-bar { animation: streep-door 1.8s .35s backwards; }

/* ---------- Foto's: wipe van links, daarna valt het gouden kader op zijn plek ----------
   De clip-path houdt 90px marge aan zodat de foto-schaduw meekomt. Alleen 'backwards':
   na afloop gelden weer de gewone (hover-)stijlen. --kader = verspringing van het kader.
   In-out-curve: de wipe opent als een gordijn in plaats van meteen weg te schieten. */
@keyframes foto-wipe {
  from { clip-path: inset(-90px 100% -90px 0); }
  to { clip-path: inset(-90px); }
}
@keyframes kader-op-plek { from { opacity: 0; transform: translate(calc(-1 * var(--kader)), calc(-1 * var(--kader))); } }
/* homepage-hero: bij laden */
.hero-img img { animation: foto-wipe 1.1s cubic-bezier(.65, 0, .3, 1) .2s backwards; }
.hero-img picture::after { --kader: 12px; animation: kader-op-plek .7s var(--ease) 1s backwards; }
/* split-foto's: de wipe vervangt de fade van de reveal */
.js .split-media.reveal:not(.in) { opacity: 1; transform: none; }
.js .split-media.reveal:not(.in) img { clip-path: inset(0 100% 0 0); }
.split-media.reveal.in img { animation: foto-wipe 1.1s cubic-bezier(.65, 0, .3, 1) backwards; }
/* portret in de waarom-kaart en in de CTA-banners: wipe nadat het vlak is ingefade */
.waarom-feature.reveal.in .waarom-portrait img,
.cta-banner.reveal.in .cta-persoon img { animation: foto-wipe .9s cubic-bezier(.65, 0, .3, 1) .3s backwards; }
.waarom-feature.reveal.in .waarom-portrait::after { --kader: 10px; animation: kader-op-plek .6s var(--ease) 1s backwards; }
.cta-banner.reveal.in .cta-persoon picture::before { --kader: 8px; animation: kader-op-plek .6s var(--ease) 1s backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
  .card:has(> a.card-link):hover { transform: none; }
}


/* ---------- Homepage (hero + ingangen) ---------- */
.theme-premium .hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #00344e 0%, #005784 55%, #0d6ea3 100%);
}
.theme-premium .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* zelfde zachte gloed als .phero (premium), komt bij laden langzaam op */
  background-image:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .12), transparent 42%),
    radial-gradient(circle at 6% 92%, rgba(173, 163, 136, .16), transparent 40%);
  pointer-events: none;
  animation: gloed-in 1.4s ease .1s backwards;
}
@keyframes gloed-in { from { opacity: 0; } }
.theme-premium .hero .container { position: relative; z-index: 2; }
.theme-premium .hero h1 { color: #ffffff; }
.theme-premium .hero p { color: #cfe4f0; }
.theme-premium .hero .accent-bar {
  width: 64px; height: 5px; background: var(--goud);
  border-radius: 3px; margin: 0 0 1.4rem;
}
.theme-premium .hero-img img { box-shadow: 0 24px 56px rgba(0, 0, 0, .4); }

/* Versprongen gouden kader om foto's (zelfde motief als .cta-persoon picture) */
.hero-img picture { position: relative; display: block; }
.hero-img picture::after {
  content: ''; position: absolute; inset: 12px -12px -12px 12px;
  border: 1.5px solid var(--goud); border-radius: var(--radius);
  pointer-events: none; transition: transform .4s var(--ease);
}
.hero-img:hover picture::after { transform: translate(3px, 3px); }

/* Gouden onderstreep onder het slotwoord van de homepage-kop;
   tekent in na de hero-entrance (reduced-motion: direct zichtbaar).
   Vervangt de losse .accent-bar — anders twee lijnen onder elkaar. */
.kop-accent { position: relative; white-space: nowrap; }
.kop-accent::after {
  content: ''; position: absolute; left: .02em; right: .02em; bottom: -.14em; height: .1em;
  background: var(--goud); border-radius: 3px; transform-origin: left center;
  animation: koplijn-in .9s var(--ease) .55s backwards;
}
@keyframes koplijn-in { from { transform: scaleX(0); } }
.theme-premium .hero h1 { margin-bottom: 1.7rem; }


/* Dienstlinks in de ingangen gedragen zich als een menu: bij hover/focus wordt het
   opsommingsteken een gouden pijl en schuift de tekst iets op. De link blijft inline, zodat
   lange namen op mobiel gewoon doorlopen en het opsommingsteken bij de eerste regel blijft;
   de pijl staat absoluut op de plek van het opsommingsteken en neemt geen ruimte in.
   Lege alt-tekst bij de pijl: schermlezers slaan hem over. */
.ingang ul li { position: relative; }
.ingang ul a { position: relative; left: 0; transition: left .2s var(--ease); }
.ingang ul li::before {
  content: '\2192'; content: '\2192' / '';
  position: absolute; left: -1.25em; top: 0;
  color: var(--goud); font-weight: 700; pointer-events: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s var(--ease);
}
.ingang ul a:is(:hover, :focus-visible) { left: 4px; }
.ingang li:has(> a:is(:hover, :focus-visible))::before { opacity: 1; transform: none; }
.ingang li:has(> a:is(:hover, :focus-visible))::marker { color: transparent; }

/* ingang-kaarten: gouden rand in premium (geen hover-lift: de kaart zelf is geen link) */
.theme-premium .ingang { border-top-color: var(--blauw); }
.theme-premium .ingang.zakelijk { border-top-color: var(--goud); }

/* donkere variant van een sectie op de homepage */
.theme-premium .section-dark .ingang {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 5px solid var(--goud);
}
.theme-premium .section-dark .ingang h2 { color: #ffffff; }
.theme-premium .section-dark .ingang p { color: #cfe4f0; }
.theme-premium .section-dark .ingang ul a { color: #c9e8f8; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.rev .split-media { order: 0; }
  /* compacte rijen in trustbar-stijl */
  .stats { grid-template-columns: 1fr; gap: 1rem; }
  .stat { text-align: left; padding: .3rem 0 .3rem 1.2rem; border-left: 3px solid var(--goud); }
  .stat .num { font-size: 2.1rem; }
  .stat .lbl { margin-top: .35rem; }
  .steps { grid-template-columns: 1fr; }
  .cta-banner { padding: 2.5rem 1.4rem; }
}


/* ---------- Werkwijze-band ("Zo werken wij", homepage) ---------- */
.werkwijze { background: linear-gradient(120deg, #00344e 0%, var(--blauw-donker) 60%, #0d6ea3 100%); color: #fff; padding: 3.8rem 0; }
/* twee donkere banden achter elkaar: zelfde gradient + haarlijn als bewuste hoofdstukgrens */
.section-dark + .werkwijze {
  background: linear-gradient(135deg, #00344e 0%, #005784 100%);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.werkwijze-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.werkwijze-head { max-width: 680px; margin-bottom: 2.4rem; }
.werkwijze-head h2 { color: #fff; margin: 0 0 .9rem; }
.werkwijze-head p { color: #cfe4f0; margin: 0; font-size: 1.05rem; }
/* Tijdlijn: stippen op een lijn. Werkt voor 3 t/m 6 stappen; horizontaal op brede schermen,
   verticaal (lijn links) als de stappen niet naast elkaar passen. De geometrie staat in
   variabelen op .werkwijze-steps zodat beide richtingen dezelfde regels gebruiken.
   main.js meet de lijnlengte (--rail) en laat een gouden lichtje van stap naar stap lopen
   (--vul = hoe ver de lijn is opgelicht, .loopt / .actief / .gehad). */
.werkwijze-steps {
  --n: 3;
  --as: 1;                         /* 1 = horizontaal, 0 = verticaal */
  --richting: h;
  --kolommen: repeat(var(--n), minmax(0, 1fr));
  --rij-pad: 1.7rem 0 0 0;
  --stap-pad: 0 2rem 0 0;
  --stip-top: -1.43rem;
  --stip-left: 0px;
  --num-maat: 2.3rem;
  --num-marge: .8rem;
  --lijn-top: .55rem;
  --lijn-b: var(--rail, calc(100% - 100% / var(--n)));
  --lijn-h: 1px;
  --vul-hoek: 90deg;
  display: grid; grid-template-columns: var(--kolommen); position: relative; padding: var(--rij-pad);
}
.werkwijze-steps:has(> .werkwijze-step:nth-child(4)) { --n: 4; }
.werkwijze-steps:has(> .werkwijze-step:nth-child(5)) { --n: 5; }
.werkwijze-steps:has(> .werkwijze-step:nth-child(6)) { --n: 6; }
/* lijn (::before) en het opgelichte deel (::after) delen dezelfde maat; schalen langs de lijn */
.werkwijze-steps::before, .werkwijze-steps::after {
  content: ''; position: absolute; left: 4px; top: var(--lijn-top);
  width: var(--lijn-b); height: var(--lijn-h);
  transform-origin: left top; pointer-events: none;
  transform: scale(calc(1 - var(--as) + var(--as) * var(--s)), calc(var(--as) + (1 - var(--as)) * var(--s)));
}
.werkwijze-steps::before {
  --s: 1;
  background: rgba(173, 163, 136, .55);
  transition: transform 1.1s var(--ease) .15s;
}
/* tekent in zodra de eerste stap in beeld komt */
.js .werkwijze-steps::before { --s: 0; }
.werkwijze-steps:has(.werkwijze-step.in)::before { --s: 1; }
/* opgelicht deel: 3px dik over de lijn heen, met een lichte kop waar het lichtje is */
.werkwijze-steps::after {
  --s: var(--vul, 0);
  margin: calc(-1px * var(--as)) 0 0 calc(-1px * (1 - var(--as)));
  width: calc(var(--lijn-b) + 2px * (1 - var(--as)));
  height: calc(var(--lijn-h) + 2px * var(--as));
  border-radius: 2px;
  background: linear-gradient(var(--vul-hoek), rgba(173, 163, 136, .25), var(--goud) 70%, #f6eed6);
  opacity: 0;
  transition: transform .9s cubic-bezier(.45, 0, .2, 1), opacity .5s ease;
}
.werkwijze-steps.loopt::after { opacity: 1; }
.werkwijze-steps.loopt.herstart::after { opacity: 0; transition: opacity .5s ease; }
.werkwijze-step { position: relative; padding: var(--stap-pad); }
.werkwijze-step:last-child { padding-right: 0; padding-bottom: 0; }
/* stip op de lijn; poppt mee met de eigen reveal-stagger van de stap */
.werkwijze-step::before {
  content: ''; position: absolute; top: var(--stip-top); left: var(--stip-left); width: 9px; height: 9px;
  background: var(--goud); border-radius: 50%;
  transition: transform .45s var(--ease) .1s, background-color .4s ease, box-shadow .5s ease;
}
.js .werkwijze-step::before { transform: scale(0); }
.werkwijze-step.in::before { transform: scale(1); }
.werkwijze-num {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: var(--num-maat); line-height: 1;
  color: var(--goud); margin-bottom: var(--num-marge);
  transition: color .5s ease, text-shadow .6s ease;
}
.werkwijze-step h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.2rem; }
.werkwijze-step p { color: #cfe4f0; margin: 0; font-size: .97rem; }
/* het lichtje: de actieve stap licht op (stip groter met gloed, nummer lichter goud);
   komende stippen staan gedimd. Nummers worden niet gedimd: die blijven leesbaar. */
.werkwijze-steps.loopt .werkwijze-step:not(.actief, .gehad)::before { background-color: rgba(173, 163, 136, .5); }
.werkwijze-steps.loopt .werkwijze-step.actief::before {
  transform: scale(1.7);
  box-shadow: 0 0 0 4px rgba(173, 163, 136, .18), 0 0 14px 2px rgba(246, 238, 214, .55);
}
.werkwijze-steps.loopt .werkwijze-step.actief .werkwijze-num { color: #f1e8cc; text-shadow: 0 0 22px rgba(246, 238, 214, .5); }
/* verticaal: lijn links langs de stappen */
@media (max-width: 1100px) {
  .werkwijze-steps:has(> .werkwijze-step:nth-child(4)) {
    --as: 0; --richting: v; --kolommen: minmax(0, 1fr); --rij-pad: 0 0 0 1.9rem; --stap-pad: 0 0 1.9rem 0;
    --stip-top: calc(var(--num-maat) / 2 - 4.5px); --stip-left: -1.9rem; --num-maat: 1.9rem; --num-marge: .5rem;
    --lijn-top: calc(var(--num-maat) / 2); --lijn-b: 1px; --lijn-h: var(--rail, 0px); --vul-hoek: 180deg;
  }
}
@media (max-width: 800px) {
  .werkwijze-steps {
    --as: 0; --richting: v; --kolommen: minmax(0, 1fr); --rij-pad: 0 0 0 1.9rem; --stap-pad: 0 0 1.9rem 0;
    --stip-top: calc(var(--num-maat) / 2 - 4.5px); --stip-left: -1.9rem; --num-maat: 1.8rem; --num-marge: .5rem;
    --lijn-top: calc(var(--num-maat) / 2); --lijn-b: 1px; --lijn-h: var(--rail, 0px); --vul-hoek: 180deg;
  }
}


/* ---------- Trustbar onder hero (cijfers met teller) ---------- */
.trustbar { background: var(--grijs-bg); border-bottom: 1px solid #dce8f0; padding: 2.4rem 0; }
.trustbar-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.trustbar-item { text-align: left; padding: .35rem 0 .35rem 1.2rem; border-left: 3px solid var(--goud); }
.trustbar-item b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.55rem, .6rem + 2.4vw, 2.1rem); white-space: nowrap; line-height: 1.1; color: var(--blauw-donker); font-variant-numeric: lining-nums tabular-nums; }
.trustbar-item span { display: block; margin-top: .35rem; font-size: .95rem; color: var(--tekst-licht); }
@media (max-width: 700px) {
  .trustbar-rij { grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; }
  .trustbar { padding: 1.8rem 0; }
}

/* ---------- Waarom-sectie homepage (sticky feature + rijen) ---------- */
.waarom-head { max-width: 720px; margin-bottom: 2.6rem; }
.waarom-head h2 { margin: 0; }
.waarom-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 3rem; align-items: start; }
.waarom-feature { position: sticky; top: 100px; border: 1px solid rgba(255,255,255,.24); border-top: 4px solid var(--goud); border-radius: 6px; padding: 2rem 1.9rem; background: rgba(255,255,255,.05); }
.waarom-medal { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--goud); color: var(--goud); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.waarom-feature h3 { color: #fff; font-size: 1.4rem; margin: 0 0 .6rem; }
.waarom-feature p { margin-bottom: 1rem; }
.waarom-feature .card-link { color: #fff; font-weight: 700; }
.waarom-portrait { margin: 1.8rem 0 0; max-width: 300px; aspect-ratio: 4 / 3; position: relative; }
.waarom-portrait picture, .over-foto picture { display: block; height: 100%; }
.waarom-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: var(--radius); }
.waarom-portrait::after {
  content: ''; position: absolute; inset: 10px -10px -10px 10px;
  border: 1.5px solid var(--goud); border-radius: var(--radius);
  pointer-events: none; transition: transform .4s var(--ease);
}
.waarom-portrait:hover::after { transform: translate(3px, 3px); }
.waarom-tiles { border-top: 1px solid rgba(255,255,255,.28); }
.waarom-tile {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: .8rem 2rem;
  align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.waarom-tile h3 { color: #fff; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.3; margin: 0; }
.waarom-tile p { color: #cfe4f0; font-size: .95rem; line-height: 1.65; margin: 0; }
@media (max-width: 860px) {
  .waarom-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .waarom-feature { position: static; }
  .waarom-portrait { max-width: 280px; }
  .waarom-tiles { margin-top: .4rem; }
}
@media (max-width: 700px) {
  .waarom-tile { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------- Pipeline-bord zakelijke telemarketing ---------- */
.pipeline { margin-top: 2.6rem; }
.zp1-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zp1-board { display: grid; grid-template-columns: 1fr auto .72fr auto 1fr; gap: 1.1rem; align-items: stretch; }
.zp1-col { background: var(--grijs-bg); border: 1px solid #dfe9f0; border-radius: 8px; padding: 1.2rem; }
.zp1-stage {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stat-num, #7d6f47); margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(173,163,136,.4);
}
.zp1-sep { align-self: center; color: var(--goud); font-size: 1.4rem; font-weight: 700; }
.zp1-card { background: #fff; border: 1px solid #dfe9f0; border-radius: 6px; padding: 1.15rem 1.1rem; scroll-margin-top: 110px; }
.zp1-card + .zp1-card { margin-top: .8rem; }
.zp1-card h3 { font-size: 1rem; margin: 0 0 .3rem; }
.zp1-card p { font-size: .85rem; color: var(--tekst-licht); margin: 0; }
.zp1-ic { color: var(--blauw-donker); margin-bottom: .6rem; }
.zp1-band {
  margin-top: 1.1rem; display: flex; align-items: center; gap: 1.2rem;
  background: #fff; border: 1px solid #dfe9f0; border-left: 3px solid var(--goud);
  border-radius: 6px; padding: 1.1rem 1.4rem;
}
.zp1-band h3 { font-size: 1rem; margin: 0 0 .2rem; }
.zp1-band p { font-size: .88rem; color: var(--tekst-licht); margin: 0; }
.zp1-band .zp1-ic { margin-bottom: 0; flex: 0 0 auto; }
.zp1-btext { flex: 1; }
.zp1-band .card-link { white-space: nowrap; font-weight: 700; }
@media (max-width: 900px) {
  .zp1-board { grid-template-columns: 1fr; }
  .zp1-sep { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 560px) {
  .zp1-band { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ---------- Over-ons: tekst + meescrollende foto ---------- */
.over-a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: start; }
.over-a .text-block { font-size: 1.1rem; }
.over-a .text-block p, .over-a .text-block li { line-height: 1.8; }
.over-a .text-block h2 { margin-top: 2.6rem; }
.over-a .text-block h2:first-child { margin-top: 0; }
.over-foto { margin: 0; position: sticky; top: 110px; }
.over-foto img { display: block; width: 100%; border-radius: var(--radius); }
.over-foto figcaption { font-size: .92rem; color: var(--tekst-licht); margin-top: .8rem; }
@media (max-width: 900px) {
  .over-a { grid-template-columns: 1fr; gap: 2.4rem; }
  .over-foto { position: static; max-width: 360px; order: -1; }
}


/* ---------- Formulierkaart (contact, werken-bij, vacatures) ---------- */
.form-kaart {
  background: #ffffff;
  border: 1px solid #dfe9f0;
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(0, 45, 70, .07);
}
.form-kaart h2 { margin-top: 0; }
@media (max-width: 560px) {
  .form-kaart { padding: 1.4rem 1.2rem; }
}

/* ---------- Contactkaart (donker, naast het formulier) ---------- */
.contact-kaart {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.2rem;
  color: #d8ecf6;
  background: #00344e;
  border-top: 5px solid var(--goud);
  border-radius: var(--radius);
}
.contact-kaart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 55% at 100% 0%, rgba(173, 163, 136, .22), transparent 70%);
  pointer-events: none;
}
.contact-kaart > * { position: relative; }
.contact-kaart h2, .contact-kaart h3 { color: #ffffff; margin: 0; }
.contact-kaart h3 { font-size: 1rem; letter-spacing: .02em; }
.contact-kaart .contact-adres { margin: 0; line-height: 1.9; }
.contact-kaart .contact-adres strong { color: #ffffff; }
.contact-kaart a { color: #ffffff; }
.contact-kaart .contact-direct {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 1.1rem 0 .4rem;
  text-decoration: none;
}
.contact-kaart .contact-direct:hover { text-decoration: underline; }
/* Embleem tussen de gegevens en 'Volg ons': alleen het icoon, geen woordmerk. Het vult de ruimte
   die de kaart overheeft (hij is zo hoog als het formulier ernaast): groeit mee tot 8,5rem, heeft
   minimaal 5,5rem, en de negatieve marge maakt de afstand tot de tekst erboven en eronder strakker. */
.contact-merk { flex: 1 1 0; min-height: 5.5rem; margin: -.5rem 0; display: flex; align-items: center; }
.contact-merk img { display: block; height: 100%; width: auto; max-height: 8.5rem; aspect-ratio: 1; object-fit: contain; }
.contact-volg { margin-top: auto; }
.contact-volg .social-links { margin-top: .8rem; flex-wrap: wrap; }
.contact-kaart .social-links a { text-decoration: none; }
@media (max-width: 560px) {
  .contact-kaart { padding: 1.6rem 1.3rem; }
}

/* ---------- Solliciteren-banner (contact, werken-bij, vacatures) ---------- */
.cta-solliciteren .cta-main { text-align: left; }
.cta-solliciteren .label-klein { margin: 0 0 .5rem; color: var(--goud); position: relative; }
.cta-solliciteren h2 { margin: 0 0 1rem; }
.cta-solliciteren a.link-tekst { color: #ffffff; }
.cta-banner.cta-solliciteren:has(.cta-persoon) .cta-main p { margin: 0 0 1rem; max-width: 62ch; }
.cta-banner.cta-solliciteren:has(.cta-persoon) .cta-main p:last-child { margin-bottom: 0; }

/* ---------- Merkpictogrammen bij sociale links ---------- */
.social-links a { display: inline-flex; align-items: center; gap: .55rem; }
.social-links .ic { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: 0 0 auto; }

/* ---------- Werken-bij: voordelen in een donkere band ---------- */
.bieden-lijst { columns: 2; column-gap: 3.5rem; margin-top: .4rem; }
.bieden-lijst li { break-inside: avoid; font-size: 1.08rem; padding-left: 2.2rem; margin-bottom: 1rem; color: #eaf4fa; }
.bieden-lijst li::before { top: .2em; }
@media (max-width: 760px) {
  .bieden-lijst { columns: 1; }
}