/* ======================================================================
   publiek-v2.css — v2-vormgeving voor de publieke marketingpagina's
   ====================================================================== */

.pv2 {
  --bg: #EFEDEA;
  --card: #FFFFFF;
  --panel: #F8F6F4;
  --ink: #242220;
  --muted: #615D58;
  --faint: #9E9890;
  --line: #E4E0DB;
  --tint: #EAE6E1;
  --dark: #211F1D;
  --onDark: #F7F4F0;
  --accent: #3E627C;
  --pos: #4A7A5A;

  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pv2 .pv2-footer { margin-top: auto; }
.pv2 a { color: var(--accent); text-decoration: none; }
.pv2 a:hover { color: #2F4C60; }
.pv2 * { box-sizing: border-box; }

.pv2-container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.pv2-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}

.pv2-section { max-width: 1180px; margin: 0 auto; padding: 76px 40px 0; }
.pv2-section:last-of-type { padding-bottom: 0; }
.pv2-section--slot { padding-bottom: 76px; }
.pv2-section--slot:last-of-type { padding-bottom: 76px; }
.pv2-section-head {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center; margin: 0 auto 32px; max-width: 640px;
}
.pv2-section-head h2 { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.028em; margin: 0; }
.pv2-section-head p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ---------- knoppen ---------- */
.pv2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 21px; border-radius: 12px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, filter .15s;
}
.pv2-btn:hover { text-decoration: none; }
.pv2-btn i { font-size: .92em; }
.pv2-btn--onhero { color: var(--dark); background: var(--onDark); }
.pv2-btn--onhero:hover { background: #FFFFFF; color: var(--dark); }
.pv2-btn--ghost { color: var(--onDark); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.pv2-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: var(--onDark); }
.pv2-btn--dark { color: var(--onDark); background: var(--dark); }
.pv2-btn--dark:hover { background: #312E2B; color: var(--onDark); }
.pv2-btn--outline { color: var(--ink); background: var(--card); border-color: var(--line); }
.pv2-btn--outline:hover { border-color: #DCD7D1; }
.pv2-btn--block { width: 100%; }
/* dubbele klasse: knopkleur wint van de algemene ".pv2 a"-linkkleur */
a.pv2-btn.pv2-btn--onhero, a.pv2-btn.pv2-btn--onhero:hover { color: var(--dark); }
a.pv2-btn.pv2-btn--ghost, a.pv2-btn.pv2-btn--ghost:hover { color: var(--onDark); }
a.pv2-btn.pv2-btn--dark, a.pv2-btn.pv2-btn--dark:hover { color: var(--onDark); }
a.pv2-btn.pv2-btn--outline, a.pv2-btn.pv2-btn--outline:hover { color: var(--ink); }

/* ======================================================================
   Foto-hero — gedeeld basisframe (dark bg, achtergrondfoto, gradient)
   ====================================================================== */
.pv2-hero { position: relative; overflow: hidden; background: var(--dark); }
.pv2-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pv2-hero-overlay { position: absolute; inset: 0; }
.pv2-hero-overlay--diag {
  background: linear-gradient(100deg, rgba(26, 23, 21, .95) 0%, rgba(26, 23, 21, .87) 44%,
              rgba(26, 23, 21, .55) 78%, rgba(26, 23, 21, .7) 100%);
}
.pv2-hero-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 48px 40px 84px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.pv2-hero-content, .pv2-hero-card { min-width: 0; }
.pv2-hero-content { display: flex; flex-direction: column; gap: 20px; }
.pv2-hero h1 {
  font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em;
  margin: 0; color: var(--onDark); text-wrap: pretty;
}
.pv2-hero-sub {
  font-size: 17px; line-height: 1.6; color: rgba(247, 244, 240, .76);
  margin: 0; max-width: 480px; text-wrap: pretty;
}
.pv2-hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.pv2-hero-mini {
  display: flex; align-items: center; gap: 20px; font-size: 13.5px;
  color: rgba(247, 244, 240, .62); font-weight: 500; flex-wrap: wrap; margin-top: 6px;
}
.pv2-hero-mini span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pv2-hero-mini i { font-size: 16px; }

/* simpele centrale hero (FAQ, contact): geen kaart naast de tekst */
.pv2-hero--simple .pv2-hero-inner {
  grid-template-columns: 1fr; max-width: 760px; padding: 56px 40px 74px;
  text-align: center; justify-items: center;
}
.pv2-hero--simple .pv2-hero-cta,
.pv2-hero--simple .pv2-hero-mini { justify-content: center; }
.pv2-hero--simple .pv2-hero-sub { max-width: 560px; }

/* ---- witte kaart in de hero (prijzen / hoe-werkt-het) ---- */
.pv2-hero-card {
  background: var(--card); border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 30px 70px rgba(0, 0, 0, .35);
}

/* prijzen: "wat u gratis doet" */
.pv2-gratis-kaart { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pv2-gratis-label { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-gratis-stap { display: flex; align-items: center; gap: 12px; }
.pv2-gratis-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px;
}
.pv2-gratis-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-gratis-tekst b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-gratis-tekst span { font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.pv2-gratis-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pos); background: #E7F0E9; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
}
.pv2-gratis-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.pv2-gratis-divider .lijn { flex: 1; height: 1px; background: var(--line); }
.pv2-gratis-divider span.tekst {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--faint);
  font-weight: 600; white-space: nowrap;
}
.pv2-gratis-slot {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; padding: 14px;
}
.pv2-gratis-slot .pv2-gratis-icon { background: var(--dark); color: var(--onDark); }
.pv2-gratis-slot .prijs { font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }

/* hoe-werkt-het: mini-draaiboek */
.pv2-draaiboek-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
  border-radius: 18px 18px 0 0;
}
.pv2-draaiboek-balk .naam { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pv2-draaiboek-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pos); background: #E7F0E9;
  padding: 4px 8px; border-radius: 6px;
}
.pv2-draaiboek-status span { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); }
.pv2-draaiboek-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.pv2-draaiboek-blok {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 11px;
}
.pv2-draaiboek-nr {
  width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 10.5px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-draaiboek-type {
  display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}
.pv2-draaiboek-titel {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv2-draaiboek-meta { font-size: 11px; color: var(--faint); white-space: nowrap; }

/* bloktype-kleuren, gedeeld tussen hero-kaart en stap-visuals */
.pv2-type--binnenkomst { color: #6E6A63; background: #EDEAE5; }
.pv2-type--spreker { color: #3E627C; background: #E9EEF3; }
.pv2-type--muziek { color: #6B5A8A; background: #EEEAF3; }
.pv2-type--live { color: #4A7A5A; background: #E7F0E9; }
.pv2-type--video { color: #8A6D3B; background: #F2EADB; }
.pv2-type--afscheid { color: #7A5C55; background: #F4EAE7; }

@media (max-width: 1024px) {
  .pv2-hero-inner { grid-template-columns: minmax(0, 1fr); padding: 32px 32px 56px; gap: 32px; }
  .pv2-hero h1 { font-size: 38px; }
  .pv2-hero-card { max-width: 480px; }
  .pv2-hero-card--draaiboek { display: none; }
}
@media (max-width: 620px) {
  .pv2-hero-inner { padding: 28px 20px 44px; }
  .pv2-hero h1 { font-size: 30px; }
  .pv2-hero-sub { font-size: 15.5px; }
  .pv2-hero-cta { flex-direction: column; align-items: stretch; }
  .pv2-hero-cta .pv2-btn { width: 100%; }
  .pv2-hero--simple .pv2-hero-inner { padding: 28px 20px 44px; }
}

/* ======================================================================
   Kaarten (algemeen)
   ====================================================================== */
.pv2-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
  transition: border-color .16s, box-shadow .16s;
}
.pv2-card:hover {
  border-color: #DCD7D1;
  box-shadow: 0 2px 3px rgba(32, 29, 26, .03), 0 16px 34px rgba(32, 29, 26, .08);
}

/* ======================================================================
   CTA-band (foto met paneel) — gedeeld door alle vier de pagina's
   ====================================================================== */
.pv2-cta { position: relative; overflow: hidden; margin-top: 70px; }
.pv2-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-cta-overlay { position: absolute; inset: 0; background: rgba(26, 23, 21, .5); }
.pv2-cta-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 64px 40px; }
.pv2-cta-panel {
  background: var(--card); border-radius: 20px; padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.pv2-cta-text { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; gap: 9px; }
.pv2-cta-text h2 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.pv2-cta-text p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 620px) {
  .pv2-cta-inner { padding: 40px 20px; }
  .pv2-cta-panel { padding: 24px; }
  .pv2-cta-panel .pv2-btn { width: 100%; }
}

/* ======================================================================
   Footer — gedeeld door alle vier de pagina's
   ====================================================================== */
.pv2-footer { background: var(--panel); border-top: 1px solid var(--line); }
.pv2-footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 50px 40px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px;
}
.pv2-footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
.pv2-footer-brand img { height: 34px; width: auto; display: block; }
.pv2-footer-brand p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-footer-contact { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pv2-footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.pv2-footer-contact a:hover { color: var(--ink); }
.pv2-footer-contact i { font-size: 15px; color: var(--accent); }
.pv2-footer-col { display: flex; flex-direction: column; gap: 11px; }
.pv2-footer-col-title { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-footer-col a, .pv2-footer-col button {
  font-size: 13.5px; color: var(--muted); text-decoration: none; font-weight: 500;
  background: none; border: 0; padding: 0; text-align: left; font-family: inherit; cursor: pointer;
}
.pv2-footer-col a:hover, .pv2-footer-col button:hover { color: var(--ink); }
.pv2-footer-bottom { max-width: 1180px; margin: 0 auto; padding: 0 40px 34px; }
.pv2-footer-bottom-inner {
  border-top: 1px solid var(--line); padding-top: 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint);
}
@media (max-width: 900px) {
  .pv2-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .pv2-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 28px; }
  .pv2-footer-bottom { padding: 0 20px 28px; }
}

@media (max-width: 620px) {
  .pv2-section { padding: 52px 20px 0; }
  .pv2-section--slot, .pv2-section--slot:last-of-type { padding-bottom: 52px; }
  .pv2-section-head h2 { font-size: 27px; }
}

/* ======================================================================
   PRIJZEN — pakketten
   ====================================================================== */
.pv2-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pv2-price-card {
  position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03); transition: border-color .16s, box-shadow .16s;
}
.pv2-price-card:hover { border-color: #DCD7D1; box-shadow: 0 2px 3px rgba(32, 29, 26, .03), 0 16px 34px rgba(32, 29, 26, .08); }
.pv2-price-card--top {
  border-color: var(--dark);
  box-shadow: 0 4px 8px rgba(32, 29, 26, .05), 0 22px 44px rgba(32, 29, 26, .1);
}
.pv2-price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--onDark); background: var(--dark);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.pv2-price-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pv2-price-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.pv2-price-head h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.pv2-price-saving {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--pos); background: #E7F0E9;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
}
.pv2-price-amount { display: flex; flex-direction: column; gap: 5px; }
.pv2-price-amount .bedrag { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pv2-price-amount .getal { font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.pv2-price-amount .per { font-size: 14px; color: var(--faint); font-weight: 500; }
.pv2-price-amount .sub { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.pv2-price-hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.pv2-price-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv2-price-features li {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.pv2-price-features i { font-size: 12px; color: var(--pos); margin-top: 4px; flex-shrink: 0; }
.pv2-price-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; padding: 14px; border-radius: 12px;
  color: var(--onDark); background: var(--dark); border: 1px solid var(--dark);
}
.pv2-price-cta:hover { background: #312E2B; color: var(--onDark); }
.pv2-price-cta--outline { color: var(--ink); background: var(--card); border-color: var(--line); }
.pv2-price-cta--outline:hover { border-color: #DCD7D1; color: var(--ink); background: var(--card); }
/* dubbele klasse: knopkleur wint van de algemene ".pv2 a"-linkkleur */
a.pv2-price-cta, a.pv2-price-cta:hover { color: var(--onDark); }
a.pv2-price-cta.pv2-price-cta--outline, a.pv2-price-cta.pv2-price-cta--outline:hover { color: var(--ink); }
.pv2-price-meta {
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 26px; font-size: 13.5px; color: var(--muted); font-weight: 500;
}
.pv2-price-meta span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pv2-price-meta i { font-size: 16px; color: var(--faint); }

@media (max-width: 900px) {
  .pv2-price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* ---------- inbegrepen ---------- */
.pv2-included {
  max-width: 1180px; margin: 0 auto; padding: 76px 40px 0;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start;
}
.pv2-included-intro { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 14px; }
.pv2-included-intro h2 { font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-included-intro p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-included-intro .pv2-btn { align-self: flex-start; margin-top: 4px; }
.pv2-included-list { display: flex; flex-direction: column; gap: 12px; }
.pv2-included-item { padding: 20px; display: flex; gap: 15px; }
.pv2-included-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px;
}
.pv2-included-item .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pv2-included-item b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.pv2-included-item p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
  .pv2-included { grid-template-columns: 1fr; gap: 24px; }
  .pv2-included-intro { position: static; }
}

/* ---------- mini-faq (prijzen) ---------- */
.pv2-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto; }
.pv2-faq-card { padding: 18px 20px; display: flex; gap: 12px; }
.pv2-faq-card i { font-size: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pv2-faq-card .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pv2-faq-card b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.pv2-faq-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-faq-more { display: flex; justify-content: center; margin-top: 22px; }
.pv2-faq-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pv2-faq-more a:hover { color: var(--accent); }
@media (max-width: 700px) {
  .pv2-faq-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   HOE WERKT HET — stappen
   ====================================================================== */
.pv2-steps { max-width: 1180px; margin: 0 auto; padding: 66px 40px 20px; display: grid; grid-template-columns: 210px 1fr; gap: 48px; align-items: start; }
.pv2-steps-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.pv2-steps-nav-title { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 12px 10px; }
.pv2-step-link {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--muted);
  font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px;
  transition: background .15s, color .15s;
}
.pv2-step-link:hover { background: var(--tint); color: var(--ink); }
a.pv2-step-link { color: var(--muted); }
a.pv2-step-link:hover { color: var(--ink); }
.pv2-step-nr {
  width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--ink);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-steps-nav .pv2-btn { margin-top: 14px; }

.pv2-steps-list { display: flex; flex-direction: column; gap: 16px; }
.pv2-step-card {
  scroll-margin-top: 24px;
  padding: 26px 28px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
}
.pv2-step-text { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; gap: 11px; }
.pv2-step-head { display: flex; align-items: center; gap: 11px; }
.pv2-step-badge {
  width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: var(--onDark);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-step-text h2 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: pretty; }
.pv2-step-text > p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-step-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv2-step-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pv2-step-points i { font-size: 13px; color: var(--pos); margin-top: 4px; flex-shrink: 0; }
.pv2-step-points strong { color: var(--ink); font-weight: 700; }

.pv2-step-visual {
  flex: 0 1 300px; min-width: 250px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  align-self: stretch; justify-content: center;
}
.pv2-step-visual-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-types { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-types span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.pv2-fotos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pv2-foto-vak {
  position: relative; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; border: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, rgba(32, 29, 26, .055) 0 6px, transparent 6px 12px);
}
.pv2-regels { display: flex; flex-direction: column; gap: 7px; }
.pv2-regel {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px;
}
.pv2-regel i { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.pv2-regel .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-regel b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pv2-regel span.sub { font-size: 11.5px; color: var(--faint); }

@media (max-width: 1024px) {
  .pv2-steps { grid-template-columns: 170px 1fr; gap: 26px; padding: 54px 28px 20px; }
  .pv2-steps-nav-title { padding: 0 10px 8px; }
  .pv2-step-link { font-size: 12.5px; padding: 8px 10px; gap: 9px; }
  .pv2-step-card { padding: 22px; gap: 18px; }
}
@media (max-width: 760px) {
  .pv2-steps { display: block; padding: 0; }
  .pv2-steps-nav { display: none; }
  .pv2-steps-list { padding: 16px 16px 0; gap: 12px; }
  .pv2-step-card { padding: 18px; flex-direction: column; gap: 14px; }
  .pv2-step-text { min-width: 0; }
  .pv2-step-visual { flex-basis: auto; min-width: 0; width: 100%; }
}

/* sticky voortgangsbalk — alleen op mobiel */
.pv2-step-progress { display: none; }
@media (max-width: 760px) {
  .pv2-step-progress {
    display: flex; flex-direction: column; gap: 8px;
    position: sticky; top: 0; z-index: 15;
    background: rgba(239, 237, 234, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); padding: 11px 16px 10px;
  }
  .pv2-step-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pv2-step-progress-head .stap { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv2-step-progress-head .teller { font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; }
  .pv2-step-progress-track { display: flex; gap: 4px; }
  .pv2-step-progress-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .2s; }
  .pv2-step-progress-seg.is-klaar,
  .pv2-step-progress-seg.is-actief { background: var(--dark); }
}

/* ---------- daarna ---------- */
.pv2-daarna-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv2-daarna-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pv2-daarna-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.pv2-daarna-card b { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.pv2-daarna-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
  .pv2-daarna-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pv2-daarna-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   VEELGESTELDE VRAGEN
   ====================================================================== */
.pv2-faq-rubriek { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 14px; }
.pv2-section + .pv2-section .pv2-faq-rubriek { margin-top: 6px; }
.pv2-faq-kaart { padding: 6px 24px; margin-bottom: 40px; }
.pv2-faq-item { border-bottom: 1px solid var(--line); }
.pv2-faq-item:last-child { border-bottom: 0; }
.pv2-faq-item summary {
  padding: 18px 28px 18px 0; position: relative; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink);
}
.pv2-faq-item summary::-webkit-details-marker { display: none; }
.pv2-faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 16px; font-size: 20px; font-weight: 400;
  color: var(--faint); transition: transform .15s;
}
.pv2-faq-item[open] summary::after { transform: rotate(45deg); }
.pv2-faq-item summary:hover { color: var(--accent); }
.pv2-faq-item p { margin: 0 0 22px; color: var(--muted); line-height: 1.65; max-width: 680px; }
.pv2-faq-item a { color: var(--accent); }

/* ======================================================================
   CONTACT
   ====================================================================== */
.pv2-contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
.pv2-contact-redenen { display: flex; flex-direction: column; gap: 12px; }
.pv2-contact-reden { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.pv2-contact-reden-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.pv2-contact-reden .tekst { flex: 1; min-width: 0; }
.pv2-contact-reden b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: block; margin-bottom: 3px; }
.pv2-contact-reden p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pv2-contact-kanalen { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pv2-contact-kanaal {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
}
.pv2-contact-kanaal i { font-size: 19px; color: var(--accent); flex-shrink: 0; }
.pv2-contact-kanaal .tekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pv2-contact-kanaal .onder { overflow-wrap: anywhere; }
.pv2-contact-kanaal .boven { font-size: 12px; color: var(--faint); font-weight: 500; }
.pv2-contact-kanaal .onder { font-size: 14px; font-weight: 700; color: var(--ink); }

.pv2-contact-form-kaart { padding: 26px 28px 28px; }
.pv2-contact-form-kaart h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.pv2-contact-form-kaart .sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.pv2-veld { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pv2-veld .opt { font-weight: 500; color: var(--faint); }
.pv2-veld input, .pv2-veld textarea, .pv2-veld select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 13px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.pv2-veld input:focus, .pv2-veld textarea:focus, .pv2-veld select:focus {
  outline: none; border-color: var(--accent); background: var(--card);
}
.pv2-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pv2-contact-form .pv2-btn { width: 100%; margin-top: 4px; }
.pv2-form-melding { margin-top: 12px; font-size: 13.5px; color: var(--muted); min-height: 1em; }
.pv2-faq-tip {
  display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13px; color: var(--muted);
}
.pv2-faq-tip i { font-size: 15px; color: var(--accent); flex-shrink: 0; }
.pv2-privacy-note { text-align: center; font-size: 12.5px; color: var(--faint); margin: 16px 0 0; }

@media (max-width: 900px) {
  .pv2-contact-grid { grid-template-columns: 1fr; }
  .pv2-veld-rij { grid-template-columns: 1fr; }
}

/* compat: site-header (style.css) binnen body.pv2 */
.pv2 :where(.site-nav) a { color: var(--muted); }
.pv2 .site-header:not(.op-foto) { background: rgba(239, 237, 234, .88); }

/* ======================================================================
   SEO-landingssjabloon (pv2-land-*)
   ====================================================================== */

/* ---------- prose-paneel met lopende tekst ---------- */
/* bewust geen .pv2-card (geen hover-effect) */
.pv2-land-paneel {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 32px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 20px 44px rgba(32, 29, 26, .07);
}
.pv2-land-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pv2-land-kolom { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pv2-land-paneel > .pv2-land-kolom { max-width: 840px; }
.pv2-land-kolom h2 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-land-kolom h3 { font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.pv2-land-kolom p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-land-kolom a { font-weight: 600; }
.pv2-land-kolom a:hover { text-decoration: underline; }

/* duo-kaart h2: zelfde maat als h3 */
.pv2-duo-kaart h2 {
  font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em;
  margin: 0; text-wrap: pretty;
}

.pv2-land-paneel + .pv2-land-paneel,
.pv2-panelband + .pv2-land-paneel,
.pv2-kaartrij + .pv2-land-paneel,
.pv2-land-paneel + .pv2-donkerband { margin-top: 14px; }

/* ---------- FAQ-accordeon ---------- */
/* hergebruikt .pv2-faq-kaart/.pv2-faq-item van Veelgestelde vragen */
.pv2-land-faq { max-width: 820px; margin: 0 auto; }

/* ---------- ankersprongen (#faq, #uitleg, #vergelijking, #aanleveren …) ---------- */
.pv2 .pv2-section[id] { scroll-margin-top: 28px; }

@media (max-width: 1024px) {
  .pv2-land-paneel { padding: 26px 26px; }
  .pv2-land-kolommen { gap: 30px; }
}
@media (max-width: 900px) {
  .pv2-land-kolommen { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 620px) {
  .pv2-land-paneel { padding: 20px; border-radius: 16px; gap: 18px; }
  .pv2-land-kolom h2 { font-size: 23px; }
  .pv2-land-kolom h3 { font-size: 17px; }
  .pv2-duo-kaart h2 { font-size: 21px; }
}

/* ======================================================================
   v2.1-componenten uit de Onderdelen/VUO-mockups
   ====================================================================== */

/* ---------- 1. hero-uitbreidingen ---------- */
/* kicker op donker: streepje + onDark-kleuren */
.pv2-hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 244, 240, .6); font-weight: 700;
}
.pv2-hero-kicker::before {
  content: ""; width: 20px; height: 1.5px; flex-shrink: 0;
  background: rgba(247, 244, 240, .5);
}

/* terug-link boven de h1 ("Alle informatie") */
.pv2-hero-terug {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 13px; font-weight: 600;
}
.pv2-hero-terug i { font-size: 12px; }
/* dubbele klasse: wint van de algemene ".pv2 a"-linkkleur */
a.pv2-hero-terug { color: rgba(247, 244, 240, .62); }
a.pv2-hero-terug:hover { color: var(--onDark); }

/* foto-kolom rechts in de hero (i.p.v. .pv2-hero-card) */
.pv2-hero-visual {
  min-width: 0; margin: 0; overflow: hidden; border-radius: 18px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .14), 0 30px 70px rgba(0, 0, 0, .4);
}
.pv2-hero-visual--breed { aspect-ratio: 16 / 10; }
.pv2-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 2. overlap-sectie + kaartrijen ---------- */
/* schuift met een negatieve marge over de onderrand van de hero heen */
.pv2-overlap {
  position: relative; z-index: 5;
  max-width: 1180px; margin: -40px auto 0; padding: 0 40px;
}
.pv2-overlap--diep { margin-top: -44px; }

.pv2-kaartrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pv2-kaartrij--2 { grid-template-columns: 1fr 1fr; }
.pv2-kaartrij--4 { grid-template-columns: repeat(4, 1fr); }

/* zwaardere kaartschaduw voor kaarten die over de hero heen liggen */
.pv2-card--zwevend { box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 18px 40px rgba(32, 29, 26, .08); }
.pv2-card--zwevend:hover {
  border-color: #DCD7D1;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .05), 0 22px 46px rgba(32, 29, 26, .11);
}

/* ---------- 3. icoontegel + kaart met icoon ---------- */
.pv2-icoon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.pv2-icoon--accent { color: var(--accent); }
.pv2-icoon--groot { width: 44px; height: 44px; border-radius: 12px; font-size: 21px; }
.pv2-icoon--donker { background: var(--dark); color: var(--onDark); }
.pv2-icoon--opdonker { background: rgba(255, 255, 255, .1); color: var(--onDark); }
.pv2-icoon--omkaderd { background: var(--card); border: 1px solid var(--line); color: var(--accent); }

/* horizontale kaart: icoontegel links, tekst rechts (techniek-kaarten) */
.pv2-icoonkaart { padding: 20px; display: flex; gap: 14px; }
.pv2-icoonkaart .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pv2-icoonkaart b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; text-wrap: pretty; }
.pv2-icoonkaart p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
/* zelfde kaart, maar met het icoon bóven de tekst (pijlerkaarten) */
.pv2-icoonkaart--boven { flex-direction: column; gap: 11px; }
.pv2-icoonkaart--boven b { font-size: 15.5px; }

/* ---------- 4. donkere accentbanner ---------- */
.pv2-donkerband {
  background: var(--dark); border-radius: 16px; padding: 24px 26px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pv2-kaartrij + .pv2-donkerband { margin-top: 14px; }
.pv2-donkerband .pv2-icoon { width: 42px; height: 42px; font-size: 20px; }
.pv2-donkerband-tekst { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; gap: 5px; }
.pv2-donkerband-tekst b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--onDark); }
.pv2-donkerband-tekst p { font-size: 14px; line-height: 1.55; color: rgba(247, 244, 240, .72); margin: 0; text-wrap: pretty; }

/* ---------- 5. panel-band (twee kolommen) ---------- */
.pv2-panelband {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.pv2-panelband-tekst { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.pv2-panelband-tekst h2 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-panelband-tekst p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-panelband-lijst { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pv2-panelband-item {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px;
}
.pv2-panelband-item .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-panelband-item b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-panelband-item .tekst > span { font-size: 12.5px; color: var(--muted); text-wrap: pretty; }

/* ---------- 6. gedrag-pills ---------- */
.pv2-pil {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.pv2-pil i { font-size: 13px; }
.pv2-pil--groen { color: #33604A; background: #E7F0E9; border-color: #CFE0D4; }
.pv2-pil--neutraal { color: var(--ink); background: var(--panel); border-color: var(--line); }
.pv2-pil--blauw { color: #3E627C; background: #F1F3F6; border-color: #DDE4EA; }
/* grotere variant, bv. het gedragslabel in een blokkop */
.pv2-pil--groot { font-size: 12.5px; font-weight: 700; padding: 8px 13px; }
.pv2-pil--groot i { font-size: 14px; }

/* ---------- 7. callouts ---------- */
/* "wanneer u het gebruikt": paneelvlak met accentrand links */
.pv2-callout {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel); border-left: 2px solid var(--accent);
  border-radius: 0 11px 11px 0; padding: 14px 16px;
}
.pv2-callout > i { font-size: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pv2-callout .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-callout .label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-callout .waarde { font-size: 14.5px; line-height: 1.55; color: var(--ink); font-weight: 500; text-wrap: pretty; }

/* tip-callout (blauwgrijs, met lightbulb) */
.pv2-tip {
  display: flex; align-items: flex-start; gap: 11px;
  background: #F1F3F6; border: 1px solid #DDE4EA; border-radius: 12px; padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.pv2-tip > i { font-size: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pv2-tip strong { color: var(--ink); font-weight: 700; }

/* ---------- 8. checklijst met bold aanhef ---------- */
.pv2-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv2-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.58; color: var(--muted); text-wrap: pretty; }
.pv2-checks i { font-size: 12px; color: var(--pos); margin-top: 5px; flex-shrink: 0; }
.pv2-checks strong { color: var(--ink); font-weight: 700; }

/* ---------- 9. sticky zij-index ---------- */
.pv2-index-layout {
  max-width: 1180px; margin: 0 auto; padding: 70px 40px 0;
  display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start;
}
.pv2-index { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv2-index-titel { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 12px 10px; }
.pv2-index-link {
  display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; transition: background .15s, color .15s;
}
.pv2-index-link i { font-size: 17px; color: var(--accent); flex-shrink: 0; }
a.pv2-index-link { color: var(--muted); }
a.pv2-index-link:hover, a.pv2-index-link.actief { background: var(--tint); color: var(--ink); }
.pv2-index-cta {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
}
.pv2-index-cta b { font-size: 14px; font-weight: 700; letter-spacing: -.015em; text-wrap: pretty; }
.pv2-index-cta p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-index-cta .pv2-btn { width: 100%; font-size: 13.5px; padding: 11px; }
.pv2-index-inhoud { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- 10. link met pijl ---------- */
.pv2-link-pijl { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 14.5px; font-weight: 600; }
.pv2-link-pijl i { font-size: 13px; }
.pv2-link-pijl-midden { display: flex; justify-content: center; margin-top: 22px; }

/* ---------- 11. duo-kaarten en productmocks ---------- */
/* duo-kaarten/mocks: bewust geen .pv2-card (geen hover-effect) */
.pv2-duo-kaart {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.pv2-duo-kaart h3 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: pretty; }
.pv2-duo-kaart > p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
/* paneelvlak onderin een duo-kaart (logboek, deellink) */
.pv2-paneelvak {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 14px;
}
.pv2-paneelvak-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }

/* mock van het instructiedocument */
.pv2-mock {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 18px 40px rgba(32, 29, 26, .07);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.pv2-mock-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pv2-mock-logo {
  width: 44px; height: 44px; border-radius: 10px; background: var(--tint); border: 1px dashed #CFC9C2;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; text-align: center; line-height: 1.2;
}
.pv2-mock-head .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv2-mock-head b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-mock-head .tekst > span { font-size: 12px; color: var(--faint); }
.pv2-mock-merk {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; white-space: nowrap;
}
.pv2-mock-merk i { font-size: 14px; color: var(--accent); }
.pv2-mock-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-mock-regels { display: flex; flex-direction: column; gap: 8px; }
.pv2-mock-regel {
  display: flex; align-items: center; gap: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
}
.pv2-mock-regel .dia { font-size: 12px; font-weight: 700; color: var(--faint); width: 34px; flex-shrink: 0; }
.pv2-mock-regel .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-mock-regel .tekst b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pv2-mock-regel .tekst > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-mock-actie {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.pv2-mock-actie i { font-size: 13px; }
.pv2-mock-actie--auto { color: var(--pos); background: #E7F0E9; }
.pv2-mock-actie--klik { color: var(--muted); background: var(--tint); }
.pv2-mock-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); text-wrap: pretty; }
.pv2-mock-note i { font-size: 15px; flex-shrink: 0; }

/* logboekregel (avatar + wie/wat + tijd) */
.pv2-log-rij { display: flex; align-items: center; gap: 10px; }
.pv2-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
}
.pv2-log-rij .wat { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-log-rij .wat b { font-weight: 600; }
.pv2-log-rij .tijd { font-size: 11.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }

/* deellinkregel + bestandsregels */
.pv2-deellink {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
.pv2-deellink i { flex-shrink: 0; font-size: 15px; color: var(--faint); }
.pv2-deellink i:first-child { font-size: 16px; color: var(--accent); }
.pv2-deellink .url {
  flex: 1; min-width: 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv2-bestand-rij { display: flex; align-items: center; gap: 11px; }
.pv2-bestand-rij .pv2-icoon { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.pv2-bestand-rij .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv2-bestand-rij b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-bestand-rij .meta { font-size: 11.5px; color: var(--faint); }
.pv2-bestand-rij > i { font-size: 15px; color: var(--faint); flex-shrink: 0; }

/* smallere prijzenrij (drie kaarten zonder vinklijst) */
.pv2-price-grid--smal { max-width: 900px; margin: 0 auto; }

/* ---------- 12. responsief ---------- */
@media (max-width: 1024px) {
  .pv2-hero-visual { max-width: 520px; width: 100%; }
  .pv2-overlap { padding: 0 32px; }
  .pv2-panelband { padding: 28px 28px; gap: 28px; }
  .pv2-index-layout { grid-template-columns: 190px 1fr; gap: 26px; padding: 54px 28px 0; }
  .pv2-index-link { font-size: 13px; padding: 9px 10px; gap: 9px; }
  .pv2-duo-kaart { padding: 20px; }
  .pv2-mock { padding: 18px; }
}
@media (max-width: 900px) {
  .pv2-kaartrij, .pv2-kaartrij--4 { grid-template-columns: 1fr 1fr; }
  .pv2-kaartrij--2 { grid-template-columns: 1fr; }
  .pv2-panelband { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pv2-price-grid--smal { max-width: 440px; }
  .pv2-index-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 20px 0; }
  .pv2-index {
    position: static; flex-direction: row; gap: 7px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 20px 4px; margin: 0 -20px;
  }
  .pv2-index-titel, .pv2-index-cta { display: none; }
  .pv2-index-link {
    flex: none; white-space: nowrap; font-size: 12.5px; padding: 8px 13px;
    border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  }
  .pv2-index-link i { font-size: 14px; }
}
@media (max-width: 760px) {
  .pv2-donkerband { padding: 20px; gap: 14px; }
  .pv2-duo-kaart h3 { font-size: 21px; }
}
@media (max-width: 620px) {
  .pv2-hero-visual { aspect-ratio: 16 / 10; border-radius: 14px; }
  .pv2-overlap { margin-top: -28px; padding: 0 20px; }
  .pv2-kaartrij, .pv2-kaartrij--2, .pv2-kaartrij--4 { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  /* kaartrij--veeg: veegbare rij tot schermrand */
  .pv2-kaartrij--veeg {
    display: flex; gap: 11px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding: 2px 20px 4px; margin: 0 -20px;
  }
  .pv2-kaartrij--veeg > * { flex: none; width: 236px; scroll-snap-align: start; }
  .pv2-icoonkaart { padding: 16px; gap: 12px; }
  .pv2-donkerband { border-radius: 14px; }
  .pv2-donkerband-tekst { flex-basis: 100%; min-width: 0; }
  .pv2-panelband { padding: 20px; border-radius: 16px; }
  .pv2-panelband-tekst h2 { font-size: 23px; }
  .pv2-duo-kaart { padding: 18px; border-radius: 16px; }
  .pv2-mock { padding: 16px; border-radius: 16px; gap: 13px; }
  .pv2-mock-regel { padding: 10px 12px; gap: 10px; }
  .pv2-mock-regel .dia { width: auto; font-size: 11px; }
  .pv2-mock-actie { font-size: 11px; padding: 4px 8px; }
  .pv2-checks li { font-size: 14px; }
  .pv2-index-layout { padding: 26px 20px 0; }
}