/* ============================================================
   Klixo Operator Ledger — design system (redesign 2026-06)
   Geldt alleen op templates die body class 'klixo-ledger' hebben.
   Doseringsregels:
   - papier + zandgrijs ~80%, navy ~15%, accenten samen ~5%
   - amber/clay NOOIT als tekst op papier (contrast), alleen als
     vlak, badge of markering met ink-tekst
   - steel blue uitsluitend in data-context (portal, grafieken, UI)
   - primaire CTA = ink navy; audit/quickscan-CTA's = amber
   ============================================================ */

.klixo-ledger {
  /* — Tokens — */
  --papier: #FAF6EE;
  --ink: #162033;
  --staal: #1E3D59;
  --groen: #2F6F5E;
  --amber: #E4A21A;
  --amber-hover: #D2950F;
  --clay: #C65A2E;
  --zandgrijs: #E8DED0;
  --ink-60: rgba(22, 32, 51, 0.64);
  --ink-40: rgba(22, 32, 51, 0.42);
  --papier-60: rgba(250, 246, 238, 0.66);
  --groen-tint: rgba(47, 111, 94, 0.12);
  --amber-tint: rgba(228, 162, 26, 0.18);
  --clay-tint: rgba(198, 90, 46, 0.14);
  --amber-text: #8A6210;   /* enige toegestane "amber" tekstkleur op papier */
  --clay-text: #A4481F;    /* idem voor clay, alleen grote labels */

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 6px 24px rgba(22, 32, 51, 0.08);
  --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.3);
  --wrap: 1180px;

  background: var(--papier);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* — Reset binnen ledger-scope — */
.klixo-ledger *, .klixo-ledger *::before, .klixo-ledger *::after { box-sizing: border-box; }

.klixo-ledger .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .klixo-ledger .wrap { padding: 0 32px; } }

.klixo-ledger .mono { font-family: var(--mono); }

/* — Typografie — */
.klixo-ledger h1, .klixo-ledger h2, .klixo-ledger h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.klixo-ledger h1 { font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.08; }
.klixo-ledger h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
.klixo-ledger h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
.klixo-ledger p { margin: 0; }
.klixo-ledger .lead { font-size: 1.08rem; color: var(--ink-60); }
@media (min-width: 768px) { .klixo-ledger .lead { font-size: 1.13rem; } }

/* Markeerstift-accent in koppen: <span class="mark">woord</span> */
.klixo-ledger .mark { position: relative; white-space: nowrap; z-index: 0; }
.klixo-ledger .mark::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 0.08em;
  height: 0.34em;
  background: var(--amber);
  opacity: 0.4;
  z-index: -1;
}

/* Eyebrow: mono-label boven een kop */
.klixo-ledger .eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--groen);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.klixo-ledger .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--groen); flex-shrink: 0; }

/* — Knoppen — */
.klixo-ledger .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.klixo-ledger .btn:focus-visible { outline: 3px solid var(--staal); outline-offset: 2px; }

.klixo-ledger .btn-ink { background: var(--ink); color: var(--papier); }
.klixo-ledger .btn-ink:hover { background: var(--staal); color: var(--papier); }

.klixo-ledger .btn-amber { background: var(--amber); color: var(--ink); }
.klixo-ledger .btn-amber:hover { background: var(--amber-hover); color: var(--ink); }

.klixo-ledger .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.klixo-ledger .btn-outline:hover { background: rgba(22, 32, 51, 0.05); }

/* Op donkere secties */
.klixo-ledger .sec-dark .btn-outline { border-color: var(--papier); color: var(--papier); }
.klixo-ledger .sec-dark .btn-outline:hover { background: rgba(250, 246, 238, 0.08); }

/* — Links — */
.klixo-ledger a { color: var(--ink); }
.klixo-ledger .content a { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.klixo-ledger .content a:hover { text-decoration-color: var(--ink); }

/* — Badges — */
.klixo-ledger .badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 500;
  display: inline-block;
}
.klixo-ledger .badge-groen { background: var(--groen-tint); color: var(--groen); }
.klixo-ledger .badge-amber { background: var(--amber-tint); color: var(--amber-text); }
.klixo-ledger .badge-clay { background: var(--clay-tint); color: var(--clay-text); }

/* — Secties — */
.klixo-ledger section { padding: 64px 0; }
@media (min-width: 768px) { .klixo-ledger section { padding: 110px 0; } }

.klixo-ledger .sec-head { margin-bottom: 40px; }
@media (min-width: 900px) {
  .klixo-ledger .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
  .klixo-ledger .sec-head h2 { max-width: 16em; }
  .klixo-ledger .sec-head p { max-width: 26em; }
}
.klixo-ledger .sec-head p { color: var(--ink-60); font-size: 1.02rem; margin-top: 16px; }
@media (min-width: 900px) { .klixo-ledger .sec-head p { margin-top: 0; } }

/* Donkere sectie (max 1 per pagina: portal/USP) */
.klixo-ledger .sec-dark { background: var(--ink); color: var(--papier); }
.klixo-ledger .sec-dark h2, .klixo-ledger .sec-dark h3 { color: var(--papier); }
.klixo-ledger .sec-dark p, .klixo-ledger .sec-dark .sec-head p { color: var(--papier-60); }

/* Amber band (audit/quickscan CTA) */
.klixo-ledger .sec-amber { background: var(--amber); }
.klixo-ledger .sec-amber h2, .klixo-ledger .sec-amber h3 { color: var(--ink); }
.klixo-ledger .sec-amber p { color: rgba(22, 32, 51, 0.75); }

/* — Ledger-strip (metric-rij met grootboeklijnen) — */
.klixo-ledger .ledger-strip { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--zandgrijs); }
.klixo-ledger .ledger-strip .wrap { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .klixo-ledger .ledger-strip .wrap { grid-template-columns: repeat(4, 1fr); } }
.klixo-ledger .ledger-cell { padding: 20px 16px 22px 0; }
@media (min-width: 768px) {
  .klixo-ledger .ledger-cell { padding: 26px 28px 30px; border-right: 1px solid var(--zandgrijs); }
  .klixo-ledger .ledger-cell:first-child { padding-left: 0; }
  .klixo-ledger .ledger-cell:last-child { border-right: none; }
}
.klixo-ledger .ledger-cell .num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--groen);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .klixo-ledger .ledger-cell .num { font-size: 1.9rem; } }
.klixo-ledger .ledger-cell .lbl {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 6px;
}

/* — Grootboek-tabel — */
.klixo-ledger .ledger-table { border-top: 1.5px solid var(--ink); }
.klixo-ledger .ledger-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--zandgrijs);
}
@media (min-width: 900px) {
  .klixo-ledger .ledger-row { grid-template-columns: 110px 1fr 220px 170px; gap: 32px; align-items: baseline; padding: 30px 0; }
}
.klixo-ledger .ledger-row .ref { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-60); }
.klixo-ledger .ledger-row .what { font-size: 1.05rem; font-weight: 500; }
.klixo-ledger .ledger-row .what small { display: block; font-weight: 400; color: var(--ink-60); font-size: 0.9rem; margin-top: 3px; }
.klixo-ledger .ledger-row .delta {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--groen);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .klixo-ledger .ledger-row .delta { font-size: 1.65rem; text-align: right; } }
.klixo-ledger .ledger-row .tag { justify-self: start; }
@media (min-width: 900px) { .klixo-ledger .ledger-row .tag { justify-self: end; } }

/* — Kaarten — */
.klixo-ledger .card {
  background: #FFFFFF;
  border: 1px solid var(--zandgrijs);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.klixo-ledger .card-accent { border-left: 3px solid var(--amber); }

/* — Portal-frame (steel blue, alleen data-context) — */
.klixo-ledger .portal-frame { background: var(--staal); border-radius: 12px; padding: 8px; box-shadow: var(--shadow-deep); }
@media (min-width: 768px) { .klixo-ledger .portal-frame { padding: 10px; } }
.klixo-ledger .portal-inner { background: #16314A; border-radius: 8px; overflow: hidden; }
.klixo-ledger .portal-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(250, 246, 238, 0.08); }
@media (min-width: 768px) { .klixo-ledger .portal-bar { padding: 16px 24px; } }
.klixo-ledger .portal-bar .t { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 246, 238, 0.55); }
.klixo-ledger .feed-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid rgba(250, 246, 238, 0.06); font-size: 0.9rem; }
@media (min-width: 768px) { .klixo-ledger .feed-row { gap: 18px; padding: 17px 24px; font-size: 0.93rem; } }
.klixo-ledger .feed-row .time { font-family: var(--mono); font-size: 0.74rem; color: rgba(250, 246, 238, 0.45); width: 46px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.klixo-ledger .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.klixo-ledger .dot-groen { background: var(--groen); box-shadow: 0 0 0 3px rgba(47, 111, 94, 0.25); }
.klixo-ledger .dot-amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(228, 162, 26, 0.22); }
.klixo-ledger .dot-clay { background: var(--clay); box-shadow: 0 0 0 3px rgba(198, 90, 46, 0.25); }
.klixo-ledger .feed-row .msg { color: rgba(250, 246, 238, 0.88); min-width: 0; }
.klixo-ledger .feed-row .msg b { color: #FFFFFF; font-weight: 600; }
.klixo-ledger .feed-row .st { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; }
.klixo-ledger .st-groen { color: #6FC2AB; }
.klixo-ledger .st-amber { color: var(--amber); }
.klixo-ledger .st-clay { color: #E8906B; }

/* — FAQ accordion (bestaand patroon, nieuwe huid) — */
.klixo-ledger .faq-accordion details { border-bottom: 1px solid var(--zandgrijs); }
.klixo-ledger .faq-accordion details:first-child { border-top: 1.5px solid var(--ink); }
.klixo-ledger .faq-accordion summary {
  font-weight: 600;
  font-size: 1.02rem;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.klixo-ledger .faq-accordion summary::-webkit-details-marker { display: none; }
.klixo-ledger .faq-accordion summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--groen);
}
.klixo-ledger .faq-accordion details[open] summary::after { content: "\2212"; }
.klixo-ledger .faq-accordion details > div, .klixo-ledger .faq-accordion details > p { padding: 0 0 24px; color: var(--ink-60); }

/* — Forms — */
.klixo-ledger input[type="text"], .klixo-ledger input[type="email"], .klixo-ledger input[type="tel"],
.klixo-ledger input[type="url"], .klixo-ledger textarea, .klixo-ledger select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 1.5px solid var(--zandgrijs);
  border-radius: var(--radius);
  min-height: 48px;
}
.klixo-ledger input:focus, .klixo-ledger textarea:focus, .klixo-ledger select:focus {
  outline: none;
  border-color: var(--staal);
  box-shadow: 0 0 0 3px rgba(30, 61, 89, 0.15);
}
.klixo-ledger label { font-weight: 500; font-size: 0.92rem; display: block; margin-bottom: 6px; }

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .klixo-ledger *, .klixo-ledger *::before, .klixo-ledger *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Chrome-overrides: nav + footer + gedeelde widgets op de
   ledger-huid. Scoped op body.klixo-ledger zodat oude pagina's
   onaangetast blijven.
   ============================================================ */

/* — Nav — */
.klixo-ledger nav[role="navigation"] {
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--zandgrijs);
  box-shadow: none;
}
.klixo-ledger .nav-links a { color: var(--ink-60); }
.klixo-ledger .nav-links a:hover,
.klixo-ledger .nav-links a.is-active { color: var(--ink); }
.klixo-ledger .nav-links a.is-active { border-color: var(--amber); }
.klixo-ledger .nav-cta {
  background: var(--ink) !important;
  color: var(--papier) !important;
  border-color: var(--ink) !important;
}
.klixo-ledger .nav-cta:hover { background: var(--staal) !important; }
.klixo-ledger .nav-login { color: var(--ink-60); border-color: var(--zandgrijs); }
.klixo-ledger .nav-login:hover { color: var(--ink); }
.klixo-ledger .nav-hamburger span { background: var(--ink); }
.klixo-ledger .klixo-scroll-progress { background: var(--amber); }
.klixo-ledger .skip-link { background: var(--ink); color: var(--papier); }

/* Mobiel uitklapmenu */
@media (max-width: 980px) {
  .klixo-ledger .nav-links {
    background: var(--papier);
    border-color: var(--zandgrijs);
  }
  .klixo-ledger .nav-links a { color: var(--ink); }
}

/* — Footer — */
.klixo-ledger .footer-top {
  background: var(--ink);
  border-top: none;
}
.klixo-ledger .footer-top p { color: var(--papier-60); }
.klixo-ledger .footer-nav a { color: var(--papier-60); }
.klixo-ledger .footer-nav a:hover { color: var(--papier); }
.klixo-ledger .footer-nav a.footer-link-highlight { color: var(--amber); }
.klixo-ledger .footer-cta-block p { color: var(--papier-60); }
.klixo-ledger .footer-top .btn-primary {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
  box-shadow: none;
}
.klixo-ledger .footer-top .btn-primary:hover { background: var(--amber-hover); }
.klixo-ledger .footer-bottom {
  background: #101827;
  border-top: 1px solid rgba(250, 246, 238, 0.08);
}
.klixo-ledger .footer-bottom-info, .klixo-ledger .footer-bottom-info span,
.klixo-ledger .footer-bottom-info a, .klixo-ledger .footer-bottom-links a {
  color: rgba(250, 246, 238, 0.55);
}
.klixo-ledger .footer-bottom-info a:hover, .klixo-ledger .footer-bottom-links a:hover { color: var(--papier); }

/* — Audit-widget (deel van conversiepad, behoudt eigen dark data-look) — */
.klixo-ledger .audit-widget {
  background: var(--staal);
  border: 1px solid rgba(228, 162, 26, 0.25);
  box-shadow: var(--shadow-deep);
}
.klixo-ledger .audit-submit {
  background: var(--amber);
  color: var(--ink);
}
.klixo-ledger .audit-submit:hover { background: var(--amber-hover); }

/* — Cookiebanner op ledger-huid — */
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: #FFFFFF !important;
  border: 1px solid var(--zandgrijs) !important;
}
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner h1,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner h2,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner p {
  color: var(--ink) !important;
}
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-accept,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-accept-all {
  background: var(--ink) !important;
  color: var(--papier) !important;
}
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner a { color: var(--groen) !important; }
/* Weigeren zichtbaar maken: de banner-tekst belooft "of weiger" en AVG vraagt
   weigeren even makkelijk als accepteren. Knop bestaat al in de DOM. */
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-deny {
  display: flex !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
/* Voorkeuren opslaan was oud teal (#00D4AA) -> ink. */
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-save-preferences {
  background: var(--ink) !important;
  color: var(--papier) !important;
  border: 1px solid var(--ink) !important;
}
/* Voorkeuren-knop was licht #C8D8E8 (oud, onleesbaar op wit) -> ink. */
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-view-preferences,
.klixo-ledger #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-manage-options {
  color: var(--ink) !important;
  background: transparent !important;
}

/* — Witte klantlogo's leesbaar op papier — */
.klixo-ledger .trust-logo { filter: brightness(0) opacity(0.55); transition: opacity 0.2s; }
.klixo-ledger .l-trust-logos:hover .trust-logo { opacity: 0.8; }

/* — Contactformulier (klixo_contact_form output) — */
.klixo-ledger .klixo-contact-submit {
  background: var(--ink);
  color: var(--papier);
  border: none;
}
.klixo-ledger .klixo-contact-submit:hover { background: var(--staal); }

/* ============================================================
   Homepage-componenten (front-page.php, mobile-first)
   ============================================================ */

/* — Hero — */
.klixo-ledger .l-hero { padding: 48px 0 0; }
@media (min-width: 980px) { .klixo-ledger .l-hero { padding: 90px 0 0; } }
.klixo-ledger .l-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 980px) { .klixo-ledger .l-hero-grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
/* Live-audit verticaal centreren t.o.v. de (langere) tekstkolom — staat zo iets lager en in het midden */
@media (min-width: 980px) { .klixo-ledger .l-hero-grid .audit-widget { align-self: center; } }
.klixo-ledger .l-hero-sub { max-width: 34em; margin-top: 24px; }
.klixo-ledger .l-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.klixo-ledger .l-hero-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--ink-60); margin-top: 22px;
}
.klixo-ledger .l-hero-note svg { color: var(--groen); }
.klixo-ledger .l-author { display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.klixo-ledger .l-author img { border-radius: 50%; border: 2px solid var(--zandgrijs); display: block; }
.klixo-ledger .l-author-name { display: block; font-weight: 600; font-size: 0.95rem; }
.klixo-ledger .l-author-role { display: block; font-size: 0.72rem; color: var(--ink-60); margin-top: 2px; }
.klixo-ledger .l-usp-strip { margin-top: 64px; }
@media (min-width: 980px) { .klixo-ledger .l-usp-strip { margin-top: 90px; } }
.klixo-ledger .l-usp-titel { font-weight: 600; font-size: 0.98rem; }
.klixo-ledger .l-usp-strip .lbl { margin-top: 5px; text-transform: none; letter-spacing: 0.02em; }

/* — Trust — */
.klixo-ledger .l-trust { padding: 40px 0; border-bottom: 1px solid var(--zandgrijs); }
.klixo-ledger .l-trust .wrap { display: flex; flex-direction: column; gap: 20px; align-items: center; }
@media (min-width: 768px) { .klixo-ledger .l-trust .wrap { flex-direction: row; justify-content: center; gap: 48px; } }
.klixo-ledger .l-trust-label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }
.klixo-ledger .l-trust-logos { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; justify-content: center; }
.klixo-ledger .l-trust-logos img { height: 24px; width: auto; max-width: 130px; object-fit: contain; }

/* — Kaarten-grids — */
.klixo-ledger .l-cards-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .klixo-ledger .l-cards-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.klixo-ledger .l-cards-3 .card h3 { margin-top: 16px; }
.klixo-ledger .l-cards-3 .card p { color: var(--ink-60); font-size: 0.97rem; margin-top: 10px; }

/* — Vergelijking — */
.klixo-ledger .l-vergelijk { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 56px; }
@media (min-width: 900px) { .klixo-ledger .l-vergelijk { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.klixo-ledger .l-verg-col { background: #FFFFFF; border: 1px solid var(--zandgrijs); border-radius: var(--radius-lg); padding: 26px; }
.klixo-ledger .l-verg-col.l-verg-klixo { border: 2px solid var(--ink); position: relative; }
.klixo-ledger .l-verg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--zandgrijs); margin-bottom: 16px; }
.klixo-ledger .l-verg-head .mono { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); }
.klixo-ledger .l-verg-klixo .l-verg-head .mono:first-child { color: var(--groen); font-weight: 600; }
.klixo-ledger .l-verg-prijs { font-weight: 600; color: var(--ink) !important; }
.klixo-ledger .l-verg-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.klixo-ledger .l-verg-col li { font-size: 0.93rem; color: var(--ink-60); padding-left: 18px; position: relative; }
.klixo-ledger .l-verg-col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--zandgrijs); }
.klixo-ledger .l-verg-klixo li { color: var(--ink); }
.klixo-ledger .l-verg-klixo li::before { background: var(--groen); }
.klixo-ledger .l-leverage-foot { margin-top: 40px; padding: 22px 26px; border-left: 3px solid var(--amber); background: #FFFFFF; border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-60); font-size: 0.98rem; max-width: 60em; }

/* — Diensten — */
.klixo-ledger .l-prijs-anchor { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--ink-60); margin: -20px 0 36px; }
.klixo-ledger .l-prijs-anchor strong { color: var(--ink); }
.klixo-ledger .l-dienst { display: flex; flex-direction: column; }
.klixo-ledger .l-dienst-combo { border: 2px solid var(--ink); }
.klixo-ledger .l-dienst-combo .badge { align-self: flex-start; }
.klixo-ledger .l-features { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.klixo-ledger .l-features li { font-size: 0.92rem; color: var(--ink-60); padding-left: 20px; position: relative; }
.klixo-ledger .l-features li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--groen-tint); border: 1.5px solid var(--groen); }
.klixo-ledger .l-dienst-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--zandgrijs); }
.klixo-ledger .l-prijs { font-size: 0.85rem; color: var(--ink-60); }
.klixo-ledger .l-prijs strong { font-size: 1.25rem; color: var(--ink); font-weight: 600; }
.klixo-ledger .l-prijs-voordeel { font-size: 0.72rem; color: var(--groen); }
.klixo-ledger .l-dienst-foot > a:not(.btn) { font-weight: 600; font-size: 0.93rem; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* — Werkwijze — */
.klixo-ledger .l-stappen { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1.5px solid var(--ink); }
@media (min-width: 900px) { .klixo-ledger .l-stappen { grid-template-columns: repeat(4, 1fr); } }
.klixo-ledger .l-stap { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--zandgrijs); }
@media (min-width: 900px) {
  .klixo-ledger .l-stap { border-bottom: none; border-right: 1px solid var(--zandgrijs); padding: 32px 28px; }
  .klixo-ledger .l-stap:first-child { padding-left: 0; }
  .klixo-ledger .l-stap:last-child { border-right: none; }
}
.klixo-ledger .l-stap-num { font-size: 0.85rem; font-weight: 600; color: var(--amber-text); }
.klixo-ledger .l-stap h3 { margin-top: 10px; }
.klixo-ledger .l-stap p { color: var(--ink-60); font-size: 0.93rem; margin-top: 10px; }

/* — Track record — */
.klixo-ledger .l-track .sec-head { margin-bottom: 32px; }
.klixo-ledger .l-track-detail { font-size: 0.85rem; color: var(--ink-60); margin-top: 10px; max-width: 24em; }

/* — Tools — */
.klixo-ledger .l-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .klixo-ledger .l-tools-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .klixo-ledger .l-tools-grid { grid-template-columns: repeat(7, 1fr); } }
.klixo-ledger .l-tool {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--zandgrijs); border-radius: var(--radius);
  padding: 20px 12px; text-align: center;
}
.klixo-ledger .l-tool svg { height: 28px; width: auto; max-width: 90px; }
.klixo-ledger .l-tool span { font-size: 0.78rem; color: var(--ink-60); font-weight: 500; }

/* — Garantie-band — */
.klixo-ledger .l-garantie { padding: 56px 0; }
@media (min-width: 900px) { .klixo-ledger .l-garantie { padding: 72px 0; } }
.klixo-ledger .l-garantie-inner { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
@media (min-width: 900px) { .klixo-ledger .l-garantie-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } }
.klixo-ledger .l-garantie h2 { max-width: 15em; }
.klixo-ledger .l-garantie p { margin-top: 14px; max-width: 42em; font-size: 0.98rem; }
.klixo-ledger .l-garantie .btn { flex-shrink: 0; }

/* CTA-blok in de amber band: knop plus onderschrift, zodat de knop niet los
   in het vlak zweeft maar als afgerond blok leest. */
.klixo-ledger .l-garantie-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; }
@media (min-width: 900px) { .klixo-ledger .l-garantie-cta { align-items: flex-end; } }
.klixo-ledger .l-garantie-cta .btn {
  padding: 16px 30px;
  min-height: 54px;
  font-size: 1rem;
  box-shadow: 0 2px 0 rgba(22, 32, 51, 0.22);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.klixo-ledger .l-garantie-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(22, 32, 51, 0.26); }
.klixo-ledger .l-garantie-cta .btn svg { transition: transform 0.18s ease; }
.klixo-ledger .l-garantie-cta .btn:hover svg { transform: translateX(3px); }
.klixo-ledger .l-garantie-note { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink); opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
  .klixo-ledger .l-garantie-cta .btn,
  .klixo-ledger .l-garantie-cta .btn svg { transition: none; }
  .klixo-ledger .l-garantie-cta .btn:hover { transform: none; }
  .klixo-ledger .l-garantie-cta .btn:hover svg { transform: none; }
}

/* — FAQ — */
.klixo-ledger .l-faq-list { max-width: 780px; }

/* — Over — */
.klixo-ledger .l-over-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .klixo-ledger .l-over-grid { grid-template-columns: 5fr 7fr; gap: 72px; } }
.klixo-ledger .l-over-foto img { width: 100%; max-width: 420px; border-radius: var(--radius-lg); display: block; }
.klixo-ledger .l-over-p { color: var(--ink-60); margin-top: 16px; }
.klixo-ledger .l-values { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .klixo-ledger .l-values { grid-template-columns: 1fr 1fr; } }
.klixo-ledger .l-values li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.klixo-ledger .l-values svg { color: var(--groen); flex-shrink: 0; }

/* — Contact — */
.klixo-ledger .l-contact { background: transparent; padding: 64px 0 90px; }
@media (min-width: 900px) { .klixo-ledger .l-contact { padding: 110px 0 130px; } }
.klixo-ledger .l-contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .klixo-ledger .l-contact-grid { grid-template-columns: 5fr 7fr; gap: 72px; } }
.klixo-ledger .l-contact-details { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.klixo-ledger .l-contact-details li { display: flex; gap: 14px; align-items: flex-start; }
.klixo-ledger .l-contact-details svg { color: var(--groen); margin-top: 4px; flex-shrink: 0; }
.klixo-ledger .l-contact-details strong { display: block; font-size: 0.92rem; }
.klixo-ledger .l-contact-details span { color: var(--ink-60); font-size: 0.92rem; }
.klixo-ledger .l-contact-card { padding: 32px; }
.klixo-ledger .l-contact-card .form-group { margin-bottom: 16px; }
.klixo-ledger .l-contact-card .form-disclaimer { font-size: 0.8rem; color: var(--ink-40); margin-top: 14px; }
.klixo-ledger .klixo-hp { position: absolute; left: -9999px; }

/* — Portaal-sectie details — */
.klixo-ledger .l-portaal .ps-row { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 980px) { .klixo-ledger .l-portaal .ps-row { grid-template-columns: 6fr 6fr; gap: 64px; } }
.klixo-ledger .l-portaal .ps-text > p { margin-top: 18px; }
.klixo-ledger .l-portaal .ps-text .btn { margin-top: 32px; }
.klixo-ledger .l-portaal .ps-features { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.klixo-ledger .l-portaal .ps-features li { display: flex; gap: 16px; padding: 14px 16px; border-radius: var(--radius); cursor: pointer; }
.klixo-ledger .l-portaal .ps-features li.active { background: rgba(250, 246, 238, 0.06); }
.klixo-ledger .l-portaal .ps-num { font-family: var(--mono); font-size: 0.78rem; color: var(--amber); font-weight: 600; padding-top: 3px; }
.klixo-ledger .l-portaal .ps-features strong { display: block; color: var(--papier); font-size: 0.98rem; }
.klixo-ledger .l-portaal .ps-features span { display: block; color: var(--papier-60); font-size: 0.88rem; margin-top: 3px; }

/* ID-overrides op oude style.css/audit.css regels */
.klixo-ledger #portaal { background: var(--ink); }
.klixo-ledger #contact { background: var(--papier); }
.klixo-ledger .faq-accordion summary { color: var(--ink); }

/* ============================================================
   Conversiepad-LP's (quickscan + audit)
   ============================================================ */
.klixo-ledger .l-hero-compact { padding: 48px 0 0; }
@media (min-width: 980px) { .klixo-ledger .l-hero-compact { padding: 80px 0 0; } }
.klixo-ledger .l-hero-narrow { max-width: 760px; }
.klixo-ledger .l-hero-narrow .lead { margin-top: 24px; }
.klixo-ledger .l-hero-narrow .l-hero-ctas { margin-top: 32px; }

/* Answer-blok (direct antwoord voor SEO/AEO) */
.klixo-ledger .l-answer { padding: 40px 0; background: var(--surface, #F1EAE0); border-top: 1px solid var(--zandgrijs); border-bottom: 1px solid var(--zandgrijs); }
.klixo-ledger .l-answer-text { max-width: 760px; font-size: 1.12rem; line-height: 1.7; }
.klixo-ledger .l-answer-text strong { color: var(--ink); }

/* Voor-wie lijst */
.klixo-ledger .l-voorwie-list { list-style: none; margin: 0; padding: 0; max-width: 800px; display: flex; flex-direction: column; gap: 16px; }
.klixo-ledger .l-voorwie-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.04rem; line-height: 1.6; }
.klixo-ledger .l-voorwie-list svg { color: var(--groen); margin-top: 5px; flex-shrink: 0; }

/* Audit-hero quote */
.klixo-ledger .l-audit-quote { display: flex; gap: 16px; align-items: flex-start; margin-top: 32px; padding: 20px 22px; background: #FFFFFF; border: 1px solid var(--zandgrijs); border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; }
.klixo-ledger .l-audit-quote img { border-radius: 50%; flex-shrink: 0; border: 2px solid var(--zandgrijs); }
.klixo-ledger .l-audit-quote span { font-size: 0.95rem; color: var(--ink-60); font-style: italic; line-height: 1.55; }

/* Checks-grid */
.klixo-ledger .l-checks-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .klixo-ledger .l-checks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .klixo-ledger .l-checks-grid { grid-template-columns: repeat(3, 1fr); } }
.klixo-ledger .l-checks-grid .card p { color: var(--ink-60); font-size: 0.95rem; margin-top: 10px; }
.klixo-ledger .l-check-meta { display: block; margin-top: 16px; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--amber-text); }

/* ============================================================
   Teal-restanten in portal + audit-widget remappen naar ledger.
   Dark/steel context: lichtgroen (#6FC2AB) voor positieve data,
   amber voor live/nu-indicatoren.
   ============================================================ */
.klixo-ledger { --groen-licht: #6FC2AB; }

/* Audit-widget header */
.klixo-ledger .audit-tag { color: var(--amber) !important; }
.klixo-ledger .audit-tag .dot,
.klixo-ledger .audit-widget .dot { background: var(--amber) !important; color: var(--amber) !important; }
.klixo-ledger .foot-pill { border-color: rgba(228,162,26,0.25) !important; }

/* Telefoon-mockup interne accenten */
.klixo-ledger .pp-phone-brand { color: var(--amber) !important; }
.klixo-ledger .pp-live-dot { background: var(--groen-licht) !important; }
.klixo-ledger .pp-act-module.ads { color: var(--amber) !important; background: rgba(228,162,26,0.14) !important; }
.klixo-ledger .pp-act-module.seo { color: var(--groen-licht) !important; background: rgba(111,194,171,0.14) !important; }
.klixo-ledger .pp-act-outcome { color: var(--groen-licht) !important; }
.klixo-ledger .pp-act-outcome svg { color: var(--groen-licht) !important; }
.klixo-ledger .pp-trend-delta.up { color: var(--groen-licht) !important; }
.klixo-ledger .pp-rank-new { color: var(--groen-licht) !important; }
.klixo-ledger .pp-rank-jump svg { color: var(--groen-licht) !important; }
.klixo-ledger .pp-cal-label { color: var(--amber) !important; }
.klixo-ledger .pp-cal li.done { color: var(--groen-licht) !important; }
.klixo-ledger .pp-cal li.done::before,
.klixo-ledger .pp-cal li.done::marker { color: var(--groen-licht) !important; }

/* Portal feature-nummers + float badges */
.klixo-ledger .l-portaal .ps-num { background: transparent !important; color: var(--amber) !important; }
.klixo-ledger .ps-float-icon { color: var(--groen-licht) !important; }
.klixo-ledger .ps-float-icon-live .ps-float-dot,
.klixo-ledger .ps-float-dot { background: var(--amber) !important; }

/* Footer-highlight chip */
.klixo-ledger .footer-link-highlight { background: transparent !important; color: var(--amber) !important; }

/* Resterende teal-tinten (achtergronden/randen/strong) in portal+widget */
.klixo-ledger .audit-tag { background: rgba(228,162,26,0.14) !important; border-color: rgba(228,162,26,0.25) !important; }
.klixo-ledger .audit-meta strong,
.klixo-ledger [data-audit-counter] strong { color: var(--amber) !important; }
.klixo-ledger .ps-features li.active { border-color: rgba(228,162,26,0.3) !important; }
.klixo-ledger .pp-act-module.ads { border-color: rgba(228,162,26,0.25) !important; }
.klixo-ledger .pp-act-module.seo { border-color: rgba(111,194,171,0.25) !important; }
.klixo-ledger .pp-trend-delta.up { background: rgba(111,194,171,0.14) !important; }
.klixo-ledger .pp-rank-new { background: rgba(111,194,171,0.14) !important; }
.klixo-ledger .ps-float-icon { border-color: rgba(111,194,171,0.3) !important; }
.klixo-ledger .ps-float-icon-live { border-color: rgba(228,162,26,0.3) !important; }
.klixo-ledger .footer-link-highlight { border-color: transparent !important; }

/* ============================================================
   Dienstenpagina's (google-ads, seo, *-uitbesteden) — compat-laag.
   Hermapt de legacy style.css-variabelen binnen .klixo-ledger naar
   het Operator Ledger-palet, zodat de bestaande markup de nieuwe
   huid adopteert zonder per-template rewrite. Copy/structuur intact.
   ============================================================ */
.klixo-ledger:not(.home) {
  --navy: #FAF6EE;
  --navy-light: #F1EAE0;
  --navy-card: #FFFFFF;
  --teal: #2F6F5E;
  --teal-dark: #245C4D;
  --white: #162033;
  --text-light: rgba(22,32,51,0.72);
  --text-muted: rgba(22,32,51,0.52);
  --border: #E8DED0;
  --radius: 10px;
  --radius-sm: 6px;
  background: var(--papier);
  color: var(--ink);
}

/* Serif-koppen + mono-niets, net als de rest van de site */
.klixo-ledger:not(.home) h1,
.klixo-ledger:not(.home) h2,
.klixo-ledger:not(.home) h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.klixo-ledger:not(.home) .section-label {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--groen);
}

/* Primaire knop = ink navy (consistent met homepage); secundair = outline */
.klixo-ledger:not(.home) .btn-primary {
  background: var(--ink);
  color: var(--papier);
  border: 1.5px solid var(--ink);
  box-shadow: none;
}
.klixo-ledger:not(.home) .btn-primary:hover { background: var(--staal); color: var(--papier); }
.klixo-ledger:not(.home) .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.klixo-ledger:not(.home) .btn-secondary:hover { background: rgba(22,32,51,0.05); }

/* Kaarten + accenten */
.klixo-ledger:not(.home) .dienst-card,
.klixo-ledger:not(.home) .audit-card,
.klixo-ledger:not(.home) .quickscan-block,
.klixo-ledger:not(.home) .price-box {
  background: #FFFFFF;
  border: 1px solid var(--zandgrijs);
}
.klixo-ledger:not(.home) .dienst-icon,
.klixo-ledger:not(.home) .quickscan-icon { color: var(--groen); }
.klixo-ledger:not(.home) .dienst-features li::before,
.klixo-ledger:not(.home) .price-box-inclusief li::before { color: var(--groen); }
.klixo-ledger:not(.home) .step-number { color: var(--amber-text); font-family: var(--mono); }
.klixo-ledger:not(.home) .metric-value { color: var(--groen); font-family: var(--mono); }

/* Foto-hero blijft een bewust donker eiland (ink ipv navy-foto) */
.klixo-ledger:not(.home) .hero-photo { background: var(--ink); }
.klixo-ledger:not(.home) .hero-photo .hero-overlay { background: linear-gradient(180deg, rgba(22,32,51,0.72), rgba(22,32,51,0.88)); }
.klixo-ledger:not(.home) .hero-photo h1,
.klixo-ledger:not(.home) .hero-photo p,
.klixo-ledger:not(.home) .hero-photo .hero-text { color: var(--papier); }
.klixo-ledger:not(.home) .hero-photo h1 { color: #FFFFFF; }
.klixo-ledger:not(.home) .hero-photo .hero-badge {
  background: rgba(228,162,26,0.18);
  color: var(--amber);
  border: 1px solid rgba(228,162,26,0.3);
}
.klixo-ledger:not(.home) .hero-photo .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.klixo-ledger:not(.home) .hero-photo .btn-primary:hover { background: var(--amber-hover); }
.klixo-ledger:not(.home) .hero-photo .btn-secondary { border-color: var(--papier); color: var(--papier); }

/* Inclusief-strip (de smalle balk onder de hero) */
.klixo-ledger:not(.home) .inclusief-strip { background: var(--ink); }
.klixo-ledger:not(.home) .inclusief-item { color: var(--papier); }
.klixo-ledger:not(.home) .inclusief-item svg { color: var(--amber); }

/* Vergelijkingstabel */
.klixo-ledger:not(.home) .compare-table th,
.klixo-ledger:not(.home) .compare-table td { border-color: var(--zandgrijs); color: var(--ink); }
.klixo-ledger:not(.home) .compare-us,
.klixo-ledger:not(.home) .compare-us-cell { background: rgba(47,111,94,0.08); color: var(--groen); }

/* Section-accent band → amber */
.klixo-ledger:not(.home) .section-accent { background: var(--amber); }
.klixo-ledger:not(.home) .section-accent h2,
.klixo-ledger:not(.home) .section-accent .section-label { color: var(--ink); }
.klixo-ledger:not(.home) .section-accent p { color: rgba(22,32,51,0.78); }
.klixo-ledger:not(.home) .section-accent .section-label { color: rgba(22,32,51,0.7); }

/* FAQ-kaarten op deze pagina's (gebruiken .audit-card als accordion) */
.klixo-ledger:not(.home) details.audit-card summary { color: var(--ink) !important; }

/* Contactformulier-submit */
.klixo-ledger:not(.home) .form-submit,
.klixo-ledger:not(.home) .klixo-contact-submit { background: var(--ink); color: var(--papier); }
.klixo-ledger:not(.home) .form-submit:hover,
.klixo-ledger:not(.home) .klixo-contact-submit:hover { background: var(--staal); }

/* Scroll-reveals uit op ledger-pagina's: content altijd zichtbaar
   (geen blank-tot-scroll, voorkomt de AI-template-uitstraling) */
.klixo-ledger .reveal,
.klixo-ledger [class*="reveal-delay"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero-kop accent (em) op donker hero-eiland = amber, niet donkergroen */
.klixo-ledger:not(.home) .hero-photo h1 em,
.klixo-ledger:not(.home) .hero-photo h1 .accent { color: var(--amber); font-style: normal; }

/* ============================================================
   Blog: single-post + archief op de ledger-huid.
   post-content kleuren komen grotendeels mee via de var-remap
   (white->ink, teal->groen). Hieronder: donker hero-eiland,
   hardcoded teal-tinten en de audit-CTA.
   ============================================================ */

/* Single-post hero blijft een donker foto-eiland */
.klixo-ledger .single-post-hero .hero-overlay {
  background: linear-gradient(180deg, rgba(22,32,51,0.45) 0%, rgba(22,32,51,0.82) 65%, rgba(22,32,51,0.93) 100%) !important;
}
.klixo-ledger .single-post-hero-inner { color: var(--papier) !important; }
.klixo-ledger .single-post-hero h1 { color: #FFFFFF !important; font-family: var(--serif); }
.klixo-ledger .single-post-hero .single-post-author { color: #FFFFFF !important; }
.klixo-ledger .single-post-hero .single-post-meta { color: rgba(250,246,238,0.78) !important; }
.klixo-ledger .single-post-hero .section-label {
  background: rgba(228,162,26,0.18) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(228,162,26,0.3) !important;
}

/* Body-typografie: serif koppen, mono niets */
.klixo-ledger .post-content h2,
.klixo-ledger .post-content h3 { font-family: var(--serif); color: var(--ink); }
.klixo-ledger .post-content h2::before { background: var(--amber); }
/* Dubbele titel + publicatiedatum uit de body verbergen: de hero toont titel
   en datum al. content_writer zet ze (nog) ook in de body -> die verbergen we
   zodat de pagina niet twee keer dezelfde kop + datum laat zien. */
.klixo-ledger .post-content > h1:first-child { display: none !important; }
.klixo-ledger .post-content > p:has(> time:only-child) { display: none !important; }

/* Nette, gecontroleerde drop-cap op de eerste echte alinea (niet het
   direct-answer-callout). Float + grootte expliciet zodat 'ie niet gedrongen is. */
.klixo-ledger .post-content > p:not(.direct-answer):not(.direct-antwoord):first-of-type::first-letter {
  float: left !important;
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: 3.1em !important;
  line-height: 0.82 !important;
  margin: 0.04em 0.12em 0 0 !important;
  color: var(--groen) !important;
}

/* Direct-answer callout. HTML-class is 'direct-answer' (EN); 'direct-antwoord'
   (NL) is legacy en houden we erbij voor oudere pieces. */
.klixo-ledger .post-content p.direct-answer,
.klixo-ledger .post-content p.direct-antwoord {
  background: rgba(228,162,26,0.10) !important;
  border-left: 3px solid var(--amber) !important;
  color: var(--ink) !important;
}
.klixo-ledger .post-content p.direct-answer::before,
.klixo-ledger .post-content p.direct-antwoord::before { color: var(--amber-text) !important; }
.klixo-ledger .post-content ul li::before { background: var(--groen) !important; }
.klixo-ledger .post-content ol li::before { color: var(--groen) !important; background: rgba(47,111,94,0.1) !important; }
.klixo-ledger .post-content th { background: rgba(47,111,94,0.1) !important; color: var(--ink) !important; }
.klixo-ledger .post-content a { color: var(--groen); text-decoration-color: rgba(47,111,94,0.4); }
.klixo-ledger .post-content a:hover { text-decoration-color: var(--groen); }
.klixo-ledger .post-content a.btn-primary { color: var(--papier); background: var(--ink); }
.klixo-ledger .post-content a.btn-primary:hover { background: var(--staal); color: var(--papier); }

/* Audit-CTA onderaan post = witte kaart met amber-accent */
.klixo-ledger .post-audit-cta {
  background: #FFFFFF !important;
  border: 1px solid var(--zandgrijs) !important;
  border-left: 3px solid var(--amber) !important;
}
.klixo-ledger .post-audit-cta strong { color: var(--ink) !important; }
.klixo-ledger .post-audit-cta p { color: var(--ink-60) !important; }
.klixo-ledger .post-audit-cta .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.klixo-ledger .post-audit-cta .btn-primary:hover { background: var(--amber-hover); }
.klixo-ledger .single-post-back { color: var(--ink-60); }
.klixo-ledger .single-post-back:hover { color: var(--groen); }

/* Blog-archief kaarten */
.klixo-ledger .post-card,
.klixo-ledger .blog-card,
.klixo-ledger article.post { background: #FFFFFF; border: 1px solid var(--zandgrijs); }

/* Hardcoded teal-tint ACHTERGRONDEN uit style.css (lopen niet via var,
   dus de var-remap miste ze). Icoon-cirkels, step-nummers, tabel-headers,
   contact-iconen, quickscan-iconen -> groen-tint. */
.klixo-ledger:not(.home) .dienst-icon,
.klixo-ledger:not(.home) .quickscan-icon,
.klixo-ledger:not(.home) .step-number,
.klixo-ledger:not(.home) .contact-detail-icon,
.klixo-ledger:not(.home) .metric-row .metric-value,
.klixo-ledger:not(.home) .audit-features li::before {
  background: rgba(47,111,94,0.10) !important;
}
.klixo-ledger:not(.home) .compare-table td.compare-us-cell { background: rgba(47,111,94,0.06) !important; }
.klixo-ledger:not(.home) .post-content th,
.klixo-ledger:not(.home) .compare-table th.compare-us { background: rgba(47,111,94,0.10) !important; }
/* step-number rand was teal-tint via --border (al gemapt), kleur groen */
.klixo-ledger:not(.home) .step-number { color: var(--amber-text) !important; }
.klixo-ledger:not(.home) .dienst-icon,
.klixo-ledger:not(.home) .quickscan-icon,
.klixo-ledger:not(.home) .contact-detail-icon { color: var(--groen) !important; }
.klixo-ledger:not(.home) .compare-table thead th { background: rgba(47,111,94,0.08) !important; }

/* Blog/algemene FAQ-accordion teal-accenten -> ledger */
.klixo-ledger .post-content .post-faq-title::before { background: var(--amber) !important; }
.klixo-ledger .faq-accordion .faq-item:hover { border-color: rgba(47,111,94,0.25) !important; }
.klixo-ledger .faq-accordion .faq-item[open] { border-color: rgba(47,111,94,0.4) !important; background: rgba(47,111,94,0.03) !important; }

/* Sfeerband: full-bleed warm beeld als visuele adempauze tussen secties */
.klixo-ledger .l-sfeer-band { width: 100%; overflow: hidden; line-height: 0; }
.klixo-ledger .l-sfeer-band picture { display: block; }
.klixo-ledger .l-sfeer-band img {
  width: 100%;
  height: clamp(220px, 38vw, 460px);
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Potentie-rekentool: calc-* teal + cyaan-gradient -> ledger groen/amber */
.klixo-ledger .potentie-hero h1 em {
  background: linear-gradient(120deg, var(--groen) 0%, #3FA07E 100%) !important;
  -webkit-background-clip: text; background-clip: text;
}
.klixo-ledger .calc-preset-btn:hover { border-color: rgba(47,111,94,0.4) !important; color: var(--ink) !important; }
.klixo-ledger .calc-preset-btn.active { background: rgba(47,111,94,0.12) !important; border-color: var(--groen) !important; color: var(--groen) !important; }
.klixo-ledger .calc-uplift-btn:hover { border-color: rgba(47,111,94,0.3) !important; color: var(--ink) !important; }
.klixo-ledger .calc-uplift-btn.active { background: rgba(228,162,26,0.14) !important; border-color: var(--amber) !important; color: var(--amber-text) !important; }
.klixo-ledger .calc-output-eyebrow { color: var(--amber-text) !important; background: rgba(228,162,26,0.14) !important; }
.klixo-ledger .calc-output-card { border-top-color: var(--groen) !important; }
.klixo-ledger .calc-output-cta { background: rgba(47,111,94,0.10) !important; }
.klixo-ledger .calc-bar-fill-potential { background: linear-gradient(90deg, var(--groen) 0%, #3FA07E 100%) !important; box-shadow: 0 0 16px rgba(47,111,94,0.35) !important; }

/* Potentie: hero-glow + calc-output card/cta borders -> ledger */
.klixo-ledger .hero-glow { background: radial-gradient(circle, rgba(228,162,26,0.12) 0%, transparent 65%) !important; }
.klixo-ledger .calc-output-card { border-color: rgba(47,111,94,0.25) !important; }
.klixo-ledger .calc-output-cta { border-color: rgba(47,111,94,0.25) !important; background: rgba(47,111,94,0.08) !important; }

/* Contact-pagina: step-num + fit-icon teal -> groen */
.klixo-ledger .contact-step-num { background: rgba(47,111,94,0.12) !important; color: var(--groen) !important; }
.klixo-ledger .fit-yes .fit-icon { background: rgba(47,111,94,0.12) !important; color: var(--groen) !important; }

/* Generieke hero-badge (lichte hero's zoals zwolle/seo-uitbesteden) */
.klixo-ledger .hero-badge { background: rgba(228,162,26,0.14) !important; color: var(--amber-text) !important; }
.klixo-ledger .hero-badge::before { background: var(--amber) !important; }
/* Op donker hero-eiland brighter amber tekst */
.klixo-ledger .hero-photo .hero-badge { color: var(--amber) !important; }

/* Referentiecases (pilot): hero-bg-glow + pilot-spot open + cta-secondary -> ledger */
.klixo-ledger .hero-bg-glow {
  background: radial-gradient(ellipse 60% 50% at 30% 0%, rgba(228,162,26,0.10) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 80% 30%, rgba(47,111,94,0.08) 0%, transparent 70%) !important;
}
.klixo-ledger .pilot-spot[data-state="open"] { border-color: rgba(47,111,94,0.4) !important; background: rgba(47,111,94,0.05) !important; }
.klixo-ledger .pilot-spot-num { color: var(--groen) !important; }
.klixo-ledger .pilot-cta-secondary { border-color: var(--groen) !important; color: var(--groen) !important; }

/* Blog .highlight-callout teal -> amber-accent */
.klixo-ledger .post-content .highlight {
  background: linear-gradient(135deg, rgba(228,162,26,0.08) 0%, rgba(228,162,26,0.02) 100%) !important;
  border-left: 3px solid var(--amber) !important;
}
.klixo-ledger .post-content .highlight strong { color: var(--amber-text) !important; }

/* Alle hero-accenten (h1 em) uniform amber, ook lichte/compacte hero's
   zonder hero-photo (zwolle e.d.) die anders de groene base-regel pakken */
.klixo-ledger .hero-text h1 em,
.klixo-ledger .hero-compact h1 em { color: #E4A21A !important; font-style: normal; }
.klixo-ledger .potentie-hero h1 em { background: none !important; -webkit-text-fill-color: #E4A21A !important; color: #E4A21A !important; }

/* Donkere compacte hero (zwolle): tekst was wit -> via remap ink ->
   onzichtbaar op donkere hero. Behandel als donker eiland. */
.klixo-ledger .hero-compact { background: var(--ink); }
.klixo-ledger .hero-compact .hero-overlay { background: linear-gradient(180deg, rgba(22,32,51,0.55), rgba(22,32,51,0.85)) !important; }
.klixo-ledger .hero-compact .hero-text,
.klixo-ledger .hero-compact .hero-text p { color: var(--papier) !important; }
.klixo-ledger .hero-compact .hero-text h1 { color: #FFFFFF !important; }
.klixo-ledger .hero-compact .hero-badge { color: var(--amber) !important; }
.klixo-ledger .hero-compact .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.klixo-ledger .hero-compact .btn-primary:hover { background: var(--amber-hover); }
.klixo-ledger .hero-compact .btn-secondary,
.klixo-ledger .hero-compact .hero-cta-jump.alt { border-color: var(--papier); color: var(--papier); }

/* Zwolle dark-hero CTA's met #hero-specificiteit */
.klixo-ledger #hero.hero-compact .btn-primary { background: #E4A21A !important; color: #162033 !important; border-color: #E4A21A !important; }
.klixo-ledger #hero.hero-compact .btn-primary:hover { background: #D2950F !important; }
.klixo-ledger #hero.hero-compact .hero-secondary-link { color: var(--papier) !important; opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }
.klixo-ledger #hero.hero-compact .hero-secondary-link:hover { opacity: 1; }

/* .accent (oude hero-accent klasse) uniform amber */
.klixo-ledger .accent { color: #E4A21A; }

/* Referentiecases audit-hero op lichte huid: badge + pills leesbaar */
.klixo-ledger #audit-hero .hero-badge { background: rgba(228,162,26,0.16) !important; color: #8A6210 !important; border: 1px solid rgba(228,162,26,0.3) !important; }
.klixo-ledger #audit-hero .hero-badge .pulse-dot { background: var(--amber) !important; }
.klixo-ledger #audit-hero .audit-foot { color: var(--ink-60) !important; }
.klixo-ledger #audit-hero .audit-foot > span:first-child { color: var(--ink-60) !important; }
.klixo-ledger #audit-hero .foot-pill { background: #FFFFFF !important; border: 1px solid var(--zandgrijs) !important; color: var(--ink) !important; }

/* Teal box-shadow glows (gemist in eerdere scan) -> amber */
.klixo-ledger .audit-tag .dot { background: var(--amber) !important; box-shadow: 0 0 8px rgba(228,162,26,0.6) !important; }
.klixo-ledger .dot.teal, .klixo-ledger .dot.green { background: var(--groen) !important; box-shadow: 0 0 10px rgba(47,111,94,0.45) !important; }

/* Foto's: object-fit cover zodat portretten niet uitrekken */
.klixo-ledger .l-author img { object-fit: cover; object-position: center top; }
.klixo-ledger .l-over-foto img { object-fit: cover; }
.klixo-ledger .over-foto img,
.klixo-ledger .author-avatar img,
.klixo-ledger .audit-author img,
.klixo-ledger .l-audit-quote img { object-fit: cover !important; }

/* Hero met side-card (seo-uitbesteden, google-ads-uitbesteden):
   herstel 2-koloms grid die door oude '#hero .hero-inner{display:block}' kapot ging */
.klixo-ledger #hero .hero-inner:has(.hero-image),
.klixo-ledger #hero .hero-inner:has(.hero-card) {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
@media (max-width: 880px) {
  .klixo-ledger #hero .hero-inner:has(.hero-image),
  .klixo-ledger #hero .hero-inner:has(.hero-card) { display: block; }
}
/* Hero-card op lichte huid: witte kaart, leesbare rij-randen */
.klixo-ledger .hero-card { background: #FFFFFF; border: 1px solid var(--zandgrijs); max-width: 420px; }
.klixo-ledger .hero-card .metric-row { border-bottom: 1px solid var(--zandgrijs); }
.klixo-ledger .hero-card .metric-value { color: var(--ink); }
.klixo-ledger .hero-card .metric-label { color: var(--ink-60); }
.klixo-ledger .hero-card .metric-change { color: var(--groen); background: rgba(47,111,94,0.1); }

/* Resterende teal in box-shadows + gradients (gemist: box-shadow niet eerder gescand) */
.klixo-ledger .klixo-scroll-progress { background: linear-gradient(90deg, var(--amber), #F0B84A) !important; box-shadow: none !important; }
.klixo-ledger .pp-live-dot { box-shadow: 0 0 8px rgba(111,194,171,0.6) !important; }
.klixo-ledger .ps-float-icon { background: linear-gradient(135deg, rgba(111,194,171,0.22), rgba(111,194,171,0.04)) !important; }
.klixo-ledger .ps-float-icon-live { background: linear-gradient(135deg, rgba(228,162,26,0.22), rgba(228,162,26,0.04)) !important; }
.klixo-ledger .klixo-contact-submit { box-shadow: none !important; }
.klixo-ledger .pp-phone { box-shadow: 0 30px 70px rgba(22,32,51,0.45) !important; }

/* Audit-widget input focus + submit hover-glow -> amber */
.klixo-ledger .audit-input-wrap:focus-within { border-color: var(--amber) !important; box-shadow: 0 0 0 4px rgba(228,162,26,0.18) !important; }
.klixo-ledger .audit-submit:hover { background: var(--amber-hover) !important; box-shadow: 0 8px 24px rgba(228,162,26,0.3) !important; }

/* Audit-widget titel staat op staalblauw -> wit ipv ink (globale kop-regel
   maakte 'm donker = onzichtbaar op donkere widget) */
.klixo-ledger .audit-widget .audit-title { color: #FFFFFF !important; }
.klixo-ledger .audit-widget .audit-desc { color: rgba(250,246,238,0.82) !important; }

/* ============================================================
   Contrast-pass 2026-09-04
   Oorzaak: '.klixo-ledger:not(.home)' remapt de legacy-variabelen
   (--white, --text-light, --text-muted, --navy, --teal) naar ink-tinten.
   Donkere eilanden (audit-widget, portaal-mockups, pilot-widget, foto-
   hero's) gebruiken diezelfde variabelen en werden daardoor ink-op-ink.
   Hieronder krijgen die eilanden hun lichte waarden terug, plus een
   reeks kleine contrast-fixes op papier.
   ============================================================ */

/* 1. Muted tekst op papier iets donkerder (WCAG AA op 13-15px) */
.klixo-ledger:not(.home) {
  --text-light: rgba(22,32,51,0.8);
  --text-muted: rgba(22,32,51,0.66);
}
.klixo-ledger { --amber-text: #7F5A0E; }
.klixo-ledger .form-disclaimer,
.klixo-ledger .l-trust-label { color: var(--ink-60); }
.klixo-ledger .l-trust-logos .trust-logo { filter: brightness(0) opacity(0.62); }

/* 2. Donkere eilanden: lichte legacy-variabelen + papier-tekst */
.klixo-ledger .audit-widget,
.klixo-ledger .sec-dark,
.klixo-ledger .pp-phone,
.klixo-ledger .pd-mock,
.klixo-ledger .afsp-portaal-mock,
.klixo-ledger .calc-output-card,
.klixo-ledger .hero-photo,
.klixo-ledger .hero-compact,
.klixo-ledger .inclusief-strip,
.klixo-ledger .single-post-hero,
.klixo-ledger #audit-hero,
.klixo-ledger .footer-top,
.klixo-ledger .footer-bottom {
  --white: #FFFFFF;
  --text-light: rgba(250,246,238,0.84);
  --text-muted: rgba(250,246,238,0.64);
  --navy: #162033;
  --navy-light: #1E3D59;
  --navy-card: #16314A;
  --teal: #6FC2AB;
  --teal-dark: #8ED3BF;
  --teal-soft: rgba(111,194,171,0.14);
  --border: rgba(250,246,238,0.12);
  color: var(--papier);
}
.klixo-ledger:not(.home) :is(.audit-widget, .sec-dark, .pp-phone, .pd-mock, .afsp-portaal-mock, .calc-output-card, .hero-photo, .hero-compact, .single-post-hero, #audit-hero) :is(h1, h2, h3, h4) { color: #FFFFFF; }
.klixo-ledger .sec-dark .eyebrow { color: var(--groen-licht); }
.klixo-ledger .sec-dark .eyebrow::before { background: var(--groen-licht); }
.klixo-ledger .sec-dark .mark::after { opacity: 0.9; }

/* Audit-widget: meta, prefix, foot en pills leesbaar op staal */
.klixo-ledger .audit-widget .audit-tag { color: #F2BC4E; background: rgba(228,162,26,0.16); }
.klixo-ledger .audit-widget .audit-meta { color: var(--text-muted); }
.klixo-ledger .audit-widget .audit-meta strong,
.klixo-ledger .audit-widget [data-audit-counter] { color: #F2BC4E; }
.klixo-ledger .audit-widget .audit-prefix { color: rgba(250,246,238,0.7); }
.klixo-ledger .audit-widget .audit-input-wrap input { color: var(--ink); background: #FFFFFF; }
.klixo-ledger .audit-widget .audit-foot { color: var(--text-muted); }
.klixo-ledger .audit-widget .foot-pill { color: var(--text-light); border-color: rgba(250,246,238,0.18); background: rgba(250,246,238,0.06); }
.klixo-ledger .audit-widget .audit-step .step-label { color: var(--text-light); }

/* Portaal-demo mockup: lichte browserbalk behouden, rest donker */
.klixo-ledger .pd-mock-bar { background: var(--zandgrijs); border-bottom-color: rgba(22,32,51,0.08); }
.klixo-ledger .pd-mock-dot { background: rgba(22,32,51,0.18); }
.klixo-ledger .pd-mock-url { color: var(--ink-60); }
.klixo-ledger .pd-mock-url strong { color: var(--ink); }
.klixo-ledger .pd-mock .pd-screen-sub,
.klixo-ledger .pd-section-label,
.klixo-ledger .pd-kpi-label,
.klixo-ledger .pd-kpi-sub,
.klixo-ledger .pd-activity-date,
.klixo-ledger .pd-activity-waarom,
.klixo-ledger .pd-chart-legend,
.klixo-ledger .pd-table thead th,
.klixo-ledger .pd-file-info,
.klixo-ledger .pd-advies-meta { color: var(--text-muted); }
.klixo-ledger .pd-table tbody td { color: var(--text-light); }
.klixo-ledger .pd-rank-old-num { color: var(--text-muted); }

/* Afspraak-pagina portaal-mockup */
.klixo-ledger .afsp-portaal-mock-bar { background: rgba(250,246,238,0.05); }
.klixo-ledger .afsp-portaal-pill.done { color: var(--groen-licht); background: rgba(111,194,171,0.14); }
.klixo-ledger .afsp-cta-tag { color: #245C4D; }

/* Potentie: resultaatkaart */
.klixo-ledger .calc-output-card { background: linear-gradient(160deg, #1E3D59 0%, #162033 100%); }
.klixo-ledger .calc-output-title { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; background: none; }
.klixo-ledger .calc-output-eyebrow { color: #F2BC4E; background: rgba(228,162,26,0.16); }
.klixo-ledger .calc-output-extra-value.teal,
.klixo-ledger .calc-output-card .teal { color: var(--groen-licht); }

/* Referentiecases (pilot) hero: bewust donker foto-eiland, net als seo/ads */
.klixo-ledger #audit-hero .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(22,32,51,0.72) 0%, rgba(22,32,51,0.88) 70%, #162033 100%),
    linear-gradient(90deg, rgba(22,32,51,0.6) 0%, transparent 40%, transparent 60%, rgba(22,32,51,0.6) 100%);
}
.klixo-ledger #audit-hero .hero-grid-bg { opacity: 0.35; }
.klixo-ledger #audit-hero .audit-h1 { color: #FFFFFF; }
.klixo-ledger #audit-hero .audit-h1 .accent { color: var(--amber); }
.klixo-ledger #audit-hero .hero-sub { color: var(--text-light); }
.klixo-ledger #audit-hero .hero-badge { background: rgba(228,162,26,0.18) !important; color: var(--amber) !important; border-color: rgba(228,162,26,0.35) !important; }
.klixo-ledger #audit-hero .audit-foot,
.klixo-ledger #audit-hero .audit-foot > span:first-child { color: var(--text-muted) !important; }
.klixo-ledger #audit-hero .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.klixo-ledger #audit-hero .btn-primary:hover { background: var(--amber-hover); }
.klixo-ledger .pilot-spot { background: rgba(250,246,238,0.04) !important; border-color: rgba(250,246,238,0.12) !important; }
.klixo-ledger .pilot-spot[data-state="open"] { border-color: rgba(111,194,171,0.5) !important; background: rgba(111,194,171,0.08) !important; }
.klixo-ledger .pilot-spot-num { color: var(--groen-licht) !important; }
.klixo-ledger .pilot-spot[data-state="taken"] .pilot-spot-num { color: rgba(250,246,238,0.35) !important; }
.klixo-ledger .pilot-spot-state { color: var(--text-muted) !important; }
.klixo-ledger .pilot-spot[data-state="open"] .pilot-spot-state { color: var(--groen-licht) !important; }
.klixo-ledger .pilot-stat span:last-child { color: var(--text-muted) !important; }
.klixo-ledger .pilot-cta-secondary { border-color: rgba(250,246,238,0.35) !important; color: var(--papier) !important; }
.klixo-ledger .pilot-cta-secondary:hover { border-color: var(--amber) !important; color: var(--amber) !important; }

/* 3. Footer: CTA-knop amber (won van de generieke :not(.home)-btn-regel) */
.klixo-ledger:not(.home) .footer-top .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.klixo-ledger:not(.home) .footer-top .btn-primary:hover { background: var(--amber-hover); color: var(--ink); }

/* 4. Amber band: label en 'Audit aanvragen' leesbaar */
.klixo-ledger:not(.home) .section-accent .section-label { color: rgba(22,32,51,0.85); }
.klixo-ledger:not(.home) .audit-cta a { background: var(--ink); color: var(--papier); }
.klixo-ledger:not(.home) .audit-cta a:hover { background: var(--staal); }

/* 5. Kop-accent op lichte hero's: amber tekst op papier haalt geen contrast
   (brandgids: amber nooit als tekst op papier). Zelfde markeerstift als de
   homepage: ink-tekst met amber onderstreping. Donkere hero's houden amber. */
.klixo-ledger .potentie-hero h1 em,
.klixo-ledger .pd-hero h1 em,
.klixo-ledger #hero.lm-hero h1 em,
.klixo-ledger .hero-text:not(.hero-photo .hero-text, .hero-compact .hero-text) h1 em {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-style: normal;
  background: linear-gradient(transparent 64%, rgba(228,162,26,0.55) 64%, rgba(228,162,26,0.55) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.04em;
}
.klixo-ledger .hero-photo .hero-text h1 em,
.klixo-ledger .hero-compact .hero-text h1 em {
  color: var(--amber) !important;
  -webkit-text-fill-color: var(--amber) !important;
  background: none;
  padding: 0;
}

/* Na-controle 2026-09-04: restpunten met hogere specificiteit */
.klixo-ledger .audit-widget .audit-tag { color: #F2BC4E !important; }
.klixo-ledger .l-contact-card .form-disclaimer,
.klixo-ledger .klixo-contact-form .form-disclaimer { color: var(--ink-60); }
.klixo-ledger .pd-mock-url { color: var(--ink); }
.klixo-ledger .afsp-cta-tag.primary,
.klixo-ledger .afsp-cta-tag.alt { color: #245C4D; background: rgba(47,111,94,0.14); }
.klixo-ledger .pilot-spot[data-state="taken"] .pilot-spot-num { color: rgba(250,246,238,0.55) !important; }

/* Mobiel/tablet: hero-content stond onder de vaste nav (81px) */
@media (max-width: 979px) {
  .klixo-ledger .l-hero { padding-top: 112px; }
  .klixo-ledger .l-hero-note { white-space: nowrap; font-size: 0.72rem; }
}
/* Referentiecases: 4 stappen-kaarten stapelen (inline grid-template won van media query) */
@media (max-width: 880px) {
  .klixo-ledger #hoe-het-werkt .diensten-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .klixo-ledger #hoe-het-werkt .diensten-grid { grid-template-columns: 1fr !important; }
}
/* Audit-widget: invoerveld als één wit veld met prefix erin (prefix werd op mobiel afgesneden) */
.klixo-ledger .audit-widget .audit-input-wrap { background: #FFFFFF !important; border: 1px solid transparent !important; }
.klixo-ledger .audit-widget .audit-prefix { color: var(--ink-40); padding-left: 14px; }
.klixo-ledger .audit-widget .audit-input-wrap input { background: transparent !important; color: var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding-left: 4px !important; }
.klixo-ledger .audit-widget .audit-input-wrap input::placeholder { color: var(--ink-40); }
.klixo-ledger .audit-widget .audit-input-wrap { border: 1px solid var(--zandgrijs) !important; }
.klixo-ledger .audit-widget .audit-input-wrap input { border: 0 !important; outline: 0 !important; height: auto !important; }
@media (max-width: 979px) {
  .klixo-ledger .l-hero-note { flex-wrap: nowrap; gap: 6px; }
}
@media (max-width: 360px) {
  .klixo-ledger .l-hero-note { white-space: normal; flex-wrap: wrap; }
}

/* ============================================================
   Eilanden 2026-09-04: donkere, amber en zandgrijze secties niet meer
   full-bleed met harde randen, maar afgeronde vlakken met ruimte op het
   papier. Content blijft uitgelijnd met de papier-secties (wrap-padding
   valt weg binnen het eiland, de eiland-marge neemt die rol over).
   ============================================================ */
.klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare),
.klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"]) {
  border-radius: 20px;
  margin: 24px 12px;
  padding: 56px 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden;
}
.klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare) :is(.wrap, .container),
.klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"]) :is(.wrap, .container) {
  padding-left: 8px; padding-right: 8px;
}
@media (min-width: 768px) {
  .klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare),
  .klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"]) {
    border-radius: 32px;
    margin: 40px 32px;
    padding: 88px 0;
  }
  .klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare) :is(.wrap, .container),
  .klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"]) :is(.wrap, .container) {
    padding-left: 0; padding-right: 0;
  }
}
/* Twee eilanden direct na elkaar: één tussenruimte, niet dubbel */
.klixo-ledger :is(.sec-dark, .sec-amber, .l-garantie, .section-accent, section[style*="navy-light"]) + :is(.sec-dark, .sec-amber, .l-garantie, .section-accent, section[style*="navy-light"]) { margin-top: 0; }

/* Donkere hero's bovenaan (foto-hero, pilot-hero, zwolle): zelfde gutter + afgeronde onderkant */
.klixo-ledger:not(.home) :is(.hero-photo, #audit-hero, .hero-compact) {
  margin: 0 12px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.klixo-ledger:not(.home) .hero-photo:has(+ .inclusief-strip) { border-radius: 0; margin-bottom: 0; }
.klixo-ledger:not(.home) .inclusief-strip {
  margin: 0 12px 24px;
  border-radius: 0 0 20px 20px;
  border-top: 1px solid rgba(250,246,238,0.08) !important;
  overflow: hidden;
}
.klixo-ledger:not(.home) :is(.hero-photo, #audit-hero, .hero-compact, .inclusief-strip) :is(.wrap, .container) { padding-left: 8px; padding-right: 8px; }
@media (min-width: 768px) {
  .klixo-ledger:not(.home) :is(.hero-photo, #audit-hero, .hero-compact) { margin: 0 32px; border-radius: 0 0 32px 32px; }
  .klixo-ledger:not(.home) .inclusief-strip { margin: 0 32px 40px; border-radius: 0 0 32px 32px; }
  .klixo-ledger:not(.home) :is(.hero-photo, #audit-hero, .hero-compact, .inclusief-strip) :is(.wrap, .container) { padding-left: 0; padding-right: 0; }
}

/* Footer: afgeronde bovenkant, zodat het laatste blok zacht overloopt */
.klixo-ledger .footer-top { border-radius: 20px 20px 0 0; margin-top: 8px; }
@media (min-width: 768px) { .klixo-ledger .footer-top { border-radius: 32px 32px 0 0; margin-top: 16px; } }

/* Audit-hero: ademruimte onder het citaat voor het donkere eiland begint */
.klixo-ledger .l-audit-hero { padding-bottom: 24px; }
@media (min-width: 980px) { .klixo-ledger .l-audit-hero { padding-bottom: 40px; } }
/* Foto-hero + inclusief-strip vormen één eiland: hero zonder onderronding als er
   verderop een strip volgt (algemene sibling, want er kan markup tussen zitten) */
.klixo-ledger:not(.home) .hero-photo:has(~ .inclusief-strip) { border-radius: 0 !important; margin-bottom: 0 !important; }
.klixo-ledger:not(.home) .inclusief-strip { margin-top: -1px; }
/* Referentiecases-badge had twee stippen (::before uit style.css + .pulse-dot) */
.klixo-ledger #audit-hero .hero-badge::before { display: none !important; }
/* Eilanden: binnenmarge op mobiel/tablet niet te krap tegen de ronding */
.klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare) :is(.wrap, .container),
.klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"], .hero-photo, #audit-hero, .hero-compact, .inclusief-strip) :is(.wrap, .container) { padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) {
  .klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare) :is(.wrap, .container),
  .klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"], .hero-photo, #audit-hero, .hero-compact, .inclusief-strip) :is(.wrap, .container) { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1260px) {
  .klixo-ledger :is(.sec-dark, #portaal, .sec-amber, .l-garantie, .pd-compare) :is(.wrap, .container),
  .klixo-ledger:not(.home) :is(.section-accent, section[style*="navy-light"], .hero-photo, #audit-hero, .hero-compact, .inclusief-strip) :is(.wrap, .container) { padding-left: 0; padding-right: 0; }
}

/* Twee zandgrijze eilanden direct na elkaar (seo/ads: vergelijking + geschikt-voor)
   smelten samen tot één vlak met een hairline ertussen. Verschillende kleuren
   houden de tussenruimte (marges collapsen tot 40px). */
.klixo-ledger:not(.home) section[style*="navy-light"]:has(+ section[style*="navy-light"]) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; padding-bottom: 64px;
}
.klixo-ledger:not(.home) section[style*="navy-light"] + section[style*="navy-light"] {
  border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; padding-top: 64px; position: relative;
}
.klixo-ledger:not(.home) section[style*="navy-light"] + section[style*="navy-light"]::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: rgba(22,32,51,0.08);
}
/* #contact is op papier gezet: geen eiland-marge/ronding nodig */
.klixo-ledger:not(.home) section#contact[style*="navy-light"] { margin: 0; border-radius: 0; padding: 96px 0; }
.klixo-ledger:not(.home) section#contact[style*="navy-light"] .container { padding-left: 24px; padding-right: 24px; }

/* Klixo-logo in vergelijkingstabellen en -kolommen i.p.v. tekst */
.klixo-ledger .compare-logo { height: 18px; width: auto; display: inline-block; vertical-align: middle; }
.klixo-ledger .compare-table thead th.compare-us { line-height: 1; }
.klixo-ledger .l-verg-logo .compare-logo { height: 16px; }
.klixo-ledger .compare-logo { height: 26px; }
.klixo-ledger .l-verg-logo .compare-logo { height: 18px; }
/* Logo-SVG heeft veel witruimte in de viewBox: groter zetten voor leesbaar woordmerk */
.klixo-ledger .compare-logo { height: 32px; }
.klixo-ledger .l-verg-logo .compare-logo { height: 24px; margin: -4px 0; }
/* Footer-onderbalk: juridische links beter zichtbaar (was 55% opacity) */
.klixo-ledger .footer-bottom-info, .klixo-ledger .footer-bottom-info span,
.klixo-ledger .footer-bottom-info a, .klixo-ledger .footer-bottom-links a { color: rgba(250,246,238,0.78); }
.klixo-ledger .footer-bottom-links a { text-decoration: underline; text-decoration-color: rgba(250,246,238,0.25); text-underline-offset: 3px; }
.klixo-ledger .audit-widget .audit-prefix { color: var(--ink-60); }

/* Eind-check 2026-09-04: horizontale overflow op 3 pagina's */
/* Blog-hero: width:100% + eiland-marge = 12px te breed */
.klixo-ledger .single-post-hero.hero-photo { width: auto !important; }
/* Tabellen in blogposts scrollen binnen hun eigen kader */
.klixo-ledger .post-content table { display: block; overflow-x: auto; max-width: 100%; }
/* Inline 2-koloms grids (over-pagina e.d.) stapelen op mobiel */
@media (max-width: 640px) {
  .klixo-ledger [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
.klixo-ledger #hero { overflow: hidden; }
/* Markeerstift in koppen mag op smalle schermen afbreken */
@media (max-width: 480px) {
  .klixo-ledger h1 .mark { white-space: normal; background: linear-gradient(transparent 62%, rgba(228,162,26,0.4) 62%, rgba(228,162,26,0.4) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .klixo-ledger h1 .mark::after { display: none; }
}
/* Blog-hero: tekst niet tegen de rand van het eiland */
.klixo-ledger .single-post-hero-inner { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
@media (min-width: 768px) { .klixo-ledger .single-post-hero-inner { padding-left: 24px; padding-right: 24px; } }

/* Donkere hero-eilanden compacter (feedback Daan 2026-09-04: donkerblauwe balk te hoog).
   .klixo-ledger section zet 110px boven en onder, plus min-height 480px op de blog-hero:
   dat gaf een blok van bijna 500px met vooral leegte. Nu: nav-hoogte + tekst + korte marge. */
.klixo-ledger .single-post-hero.hero-photo { min-height: 0 !important; padding: 124px 24px 40px !important; }
.klixo-ledger #hero.hero-compact { padding: 124px 0 48px !important; }
@media (max-width: 767px) {
  .klixo-ledger .single-post-hero.hero-photo { padding: 100px 20px 32px !important; }
  .klixo-ledger #hero.hero-compact { padding: 100px 0 40px !important; }
}
/* hero-compact (zwolle/quickscan): tekst over de volle breedte in plaats van een halve kolom,
   dan past de intro in minder regels en wordt het donkere blok lager. */
.klixo-ledger #hero.hero-compact .hero-inner { display: block; max-width: 880px; }
.klixo-ledger #hero.hero-compact .hero-text p { max-width: 720px; }
/* Accent-secties: geen vol amber vlak meer (feedback Daan 2026-09-04: te hard, past niet bij de
   5%-regel uit de brandgids). Zachte amber-tint die aan boven- en onderkant in het papier vervloeit,
   zonder eiland-radius: het is een band, geen blok. Kaarten erop blijven wit. */
.klixo-ledger:not(.home) .section-accent {
  background: linear-gradient(180deg, rgba(228,162,26,0) 0%, rgba(228,162,26,0.15) 18%, rgba(228,162,26,0.15) 82%, rgba(228,162,26,0) 100%) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 72px 0 !important;
}
@media (min-width: 768px) { .klixo-ledger:not(.home) .section-accent { padding: 96px 0 !important; } }
.klixo-ledger:not(.home) .section-accent + .section-accent { padding-top: 24px !important; }
.klixo-ledger:not(.home) .section-accent .section-label { color: var(--amber-text) !important; }
.klixo-ledger:not(.home) .section-accent .dienst-card { background: #FFFFFF; border-color: rgba(22,32,51,0.08); }
/* /zwolle/ pillar: minder witte kaartjes (feedback Daan 2026-09-04). Kolommen met grootboeklijnen,
   genummerde stappen, tijdlijn-rijen en twee-koloms proza. Alleen prijzen blijven kaarten. */
.klixo-ledger .ledger-strip.l-strip-3 { margin-top: 40px; }
.klixo-ledger .ledger-strip.l-strip-3 .wrap { grid-template-columns: 1fr; }
@media (min-width: 768px) { .klixo-ledger .ledger-strip.l-strip-3 .wrap { grid-template-columns: repeat(3, 1fr); } }
.klixo-ledger .l-strip-3 .l-usp-titel { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1.25; }
.klixo-ledger .l-strip-3 .l-cell-tekst { margin: 12px 0 0; font-size: 0.97rem; color: var(--ink-60); line-height: 1.65; }
.klixo-ledger .l-prose-2 { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .klixo-ledger .l-prose-2 { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.klixo-ledger .l-prose-2 h2 { margin: 12px 0 16px; }
.klixo-ledger .l-prose-intro { color: var(--ink-60); font-size: 1.05rem; }
.klixo-ledger .l-prose-body p { color: var(--ink-60); font-size: 1rem; line-height: 1.7; margin: 0 0 18px; }
.klixo-ledger .l-prose-body p strong { color: var(--ink); }
.klixo-ledger .l-prose-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.klixo-ledger .l-steps { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1.5px solid var(--ink); max-width: 880px; }
.klixo-ledger .l-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--zandgrijs); }
@media (min-width: 768px) { .klixo-ledger .l-steps li { grid-template-columns: 96px 1fr; gap: 32px; padding: 32px 0; } }
.klixo-ledger .l-step-num { font-family: var(--mono); font-size: 1.4rem; color: var(--amber-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.klixo-ledger .l-steps h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 10px; color: var(--ink); }
.klixo-ledger .l-steps p { margin: 0; color: var(--ink-60); line-height: 1.7; }
.klixo-ledger .l-niet-passen { max-width: 760px; margin: 48px auto 0; padding: 28px 32px; border-left: 3px solid var(--amber); background: rgba(228,162,26,0.08); border-radius: 0 12px 12px 0; }
.klixo-ledger .l-niet-passen h3 { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.25rem; margin: 0 0 10px; }
.klixo-ledger .l-niet-passen p { margin: 0; color: var(--ink-60); line-height: 1.7; }
.klixo-ledger .l-tijdlijn { margin-top: 48px; max-width: 980px; }
@media (min-width: 900px) { .klixo-ledger .l-tijdlijn .ledger-row { grid-template-columns: 150px 260px 1fr; } }
.klixo-ledger .l-tijdlijn .ref { color: var(--amber-text); font-weight: 600; }
.klixo-ledger .l-tijdlijn .what { font-family: var(--serif); font-size: 1.15rem; }
.klixo-ledger .l-row-tekst { margin: 0; color: var(--ink-60); line-height: 1.65; font-size: 0.97rem; }
/* FAQ op de Zwolle-pagina als grootboekregels in plaats van witte kaarten */
.klixo-ledger.page-template-page-zwolle #faq details.audit-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--zandgrijs) !important; border-radius: 0 !important; padding: 18px 0 !important; box-shadow: none !important; }
.klixo-ledger.page-template-page-zwolle #faq details.audit-card:first-of-type { border-top: 1.5px solid var(--ink) !important; }
.klixo-ledger.page-template-page-zwolle #faq details.audit-card p { color: var(--ink-60); }
.klixo-ledger.page-template-page-zwolle #faq .container > div[style*="gap: 16px"] { gap: 0 !important; }
/* /zwolle/: afwisseling (feedback Daan 2026-09-08). Foto-tekst-split met lijst, en een cijferstrip met 2 bedragen. */
.klixo-ledger .l-split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .klixo-ledger .l-split { grid-template-columns: 5fr 6fr; gap: 64px; } }
.klixo-ledger .l-split-media { margin: 0; }
.klixo-ledger .l-split-img { width: 100%; height: 100%; min-height: 320px; max-height: 560px; object-fit: cover; border-radius: 20px; display: block; }
.klixo-ledger .l-split-tekst h2 { margin: 12px 0 16px; }
.klixo-ledger .l-doelgroepen { list-style: none; margin: 28px 0 0; padding: 0; }
.klixo-ledger .l-doelgroepen li { position: relative; padding: 0 0 18px 26px; margin: 0 0 18px; border-bottom: 1px solid var(--zandgrijs); color: var(--ink-60); line-height: 1.7; }
.klixo-ledger .l-doelgroepen li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.klixo-ledger .l-doelgroepen li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.klixo-ledger .l-doelgroepen li strong { color: var(--ink); }
.klixo-ledger .ledger-strip.l-strip-2 { margin-top: 40px; max-width: 900px; margin-left: auto; margin-right: auto; }
.klixo-ledger .ledger-strip.l-strip-2 .wrap { grid-template-columns: 1fr; }
@media (min-width: 768px) { .klixo-ledger .ledger-strip.l-strip-2 .wrap { grid-template-columns: repeat(2, 1fr); } }
.klixo-ledger .l-strip-2 .l-cell-tekst { margin: 14px 0 0; font-size: 0.97rem; color: var(--ink-60); line-height: 1.65; }
.klixo-ledger .l-strip-2 .num { color: var(--ink); }
/* /zwolle/: echt portret i.p.v. AI-beeld, en voor-wie als lijst + kanttekening naast elkaar */
.klixo-ledger .l-split-portret { align-items: start; }
@media (min-width: 900px) { .klixo-ledger .l-split-portret { grid-template-columns: 4fr 7fr; } }
.klixo-ledger .l-split-img-portret { max-height: 520px; object-position: top; background: var(--zandgrijs); }
.klixo-ledger .l-split-tekst .l-prose-body { margin-top: 20px; }
.klixo-ledger .l-voorwie { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) { .klixo-ledger .l-voorwie { grid-template-columns: 7fr 4fr; gap: 56px; } }
.klixo-ledger .l-voorwie .l-doelgroepen { margin-top: 0; }
.klixo-ledger .l-voorwie .l-niet-passen { margin: 0; }

/* ============================================================
   Opmaak-pass 2026-09-16
   1. Titelblok en tekst plakten aan elkaar: de afstand tussen h1 en
      .post-content was gemeten 0px.
   2. De FAQ binnen .post-content bleef op de card-styling uit style.css
      staan. Die selector (.post-content .faq-accordion .faq-item, 0-3-0) is
      specifieker dan de ledger-FAQ regels (.klixo-ledger .faq-accordion
      details, 0-2-1). Gevolg: het open item kreeg een afwijkende tint plus
      groene rand, en er stonden twee indicatoren naast elkaar (de chevron
      uit style.css en de +/- uit ledger.css).
   ============================================================ */

.klixo-ledger .single-post-header h1 { margin-bottom: 26px; }
@media (min-width: 768px) { .klixo-ledger .single-post-header h1 { margin-bottom: 36px; } }

.klixo-ledger .post-content .faq-accordion { gap: 0; }

/* let op: regel ~901 zet de tint met !important, dus die is hier nodig */
.klixo-ledger .post-content .faq-accordion .faq-item,
.klixo-ledger .post-content .faq-accordion .faq-item:hover,
.klixo-ledger .post-content .faq-accordion .faq-item[open] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--zandgrijs) !important;
  border-radius: 0 !important;
}
.klixo-ledger .post-content .faq-accordion .faq-item:first-child { border-top: 1.5px solid var(--ink) !important; }

.klixo-ledger .post-content .faq-accordion summary { color: var(--ink); padding: 22px 0; }
.klixo-ledger .post-content .faq-accordion .faq-body { padding: 0 0 24px; color: var(--ink-60); }
.klixo-ledger .post-content .faq-accordion .faq-body p { color: var(--ink-60); }

/* chevron uit style.css weg, de +/- indicator van ledger blijft over */
.klixo-ledger .post-content .faq-accordion .faq-arrow { display: none; }