/* ==========================================================================
   DHB Beveiligingsplan

   Het formulier van drie stappen dat in de bannerkaart staat. Los bestand,
   want twee widgets gebruiken het: Hero Banner en Hero Plan. De kaart eromheen
   komt van de widget zelf; dit is alles wat erin staat.

   De accentkleur komt uit --nh-accent, met --dhbhp-oranje als terugval voor
   Hero Plan, die zijn eigen variabele gebruikt.
   ========================================================================== */

/* ---------- Beveiligingsplan: het formulier in de kaart ----------
   Overgenomen uit het ontwerp dhb-beveiligingsplan-formulier. De kaart zelf
   (.dhbp-kaart hieronder) draagt de lopende lichtboog;
   dit is alles wat erin staat. De accentkleur komt uit --nh-accent, zodat de
   kleurinstelling van de widget blijft werken. */

.dhbp-kaart{
  --p-soft:#FF9B70;
  --p-text:#F6F3F0;
  --p-muted:rgba(246,243,240,.62);
  --p-line:rgba(255,255,255,.09);
  --p-line-2:rgba(255,255,255,.17);
  --p-groen:#3DDC84;
  --p-ease:cubic-bezier(.22,.61,.36,1);
  color:var(--p-text);
}

/* ---------- De kaart zelf ----------
   De schil om het formulier, met de lichtboog die eromheen loopt. Stond eerst
   bij Hero Banner, maar hoort bij het formulier nu drie widgets hem gebruiken.
   De kleuren gaan via variabelen, zodat de lichte variant hieronder alleen die
   hoeft om te zetten. */
@property --dhbp-boog{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* De kaart komt rustig omhoog. Deze keyframe hoort hier en niet bij een van
   de widgets: zonder hem blijft de kaart op opacity 0 staan en zie je niets. */
@keyframes dhbp-kaart-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.dhbp-kaart{
  position:relative;
  width:100%;
  border-radius:28px;
  padding:clamp(24px,2.4vw,34px);
  background:linear-gradient(160deg,var(--dhbp-vlak-1,rgba(24,22,21,.82)),var(--dhbp-vlak-2,rgba(15,14,14,.62)));
  border:1px solid var(--dhbp-rand,rgba(255,255,255,.12));
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  animation:dhbp-kaart-in .7s ease .45s forwards;
}
.dhbp-kaart::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    radial-gradient(62% 48% at 88% -4%,color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 16%,transparent),transparent 70%),
    radial-gradient(50% 42% at -6% 104%,color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 8%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);
  pointer-events:none;
}
.dhbp-kaart > *{position:relative;z-index:1;}
/* Lopende lichtboog om het formulier, dezelfde als om de contactwidget.
   Twee lagen over elkaar: bovenop de boog die ronddraait, daaronder de rustige
   rand die er altijd staat zodat de kaart ook een omtrek houdt als de boog aan
   de andere kant zit. De maskertruc knipt het midden eruit, waardoor alleen de
   rand van anderhalve pixel overblijft.
   De stops komen uit de popup: bijna driekwart van de cirkel blijft doorzichtig,
   daarna zwelt het accent aan tot een lichte piek en dooft het weer uit. Dat
   smalle stukje licht is wat je ziet lopen. */
.dhbp-kaart::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:29.5px;
  padding:1.5px;
  background:
    conic-gradient(from var(--dhbp-boog),
      transparent 0 250deg,
      var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 305deg,
      color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 35%,#fff) 325deg,
      transparent 348deg),
    linear-gradient(140deg,color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 55%,transparent),transparent 42%,rgba(255,255,255,.12) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  /* Vijfenhalve seconde per ronde, precies het tempo van de popup. */
  animation:dhbp-boog 5.5s linear infinite;
}
@keyframes dhbp-boog{to{--dhbp-boog:360deg;}}

/* ---------- Status: open of gesloten ---------- */
.dhbp-status{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--p-line);}
.dhbp-avatar{position:relative;flex:none;width:54px;height:54px;}
.dhbp-avatar .dhbp-ph{
  width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-weight:800;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)),#9c2a00);
  box-shadow:0 0 0 2px #1b1918,0 0 0 3.5px color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 50%,transparent);
}
.dhbp-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.dhbp-dot{
  position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;
  border:3px solid #1b1918;background:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));
}
.dhbp-avatar.is-open .dhbp-dot{background:var(--p-groen);animation:dhbp-puls 2s infinite;}
@keyframes dhbp-puls{
  0%{box-shadow:0 0 0 0 rgba(61,220,132,.55);}
  70%{box-shadow:0 0 0 8px rgba(61,220,132,0);}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0);}
}
.dhbp-status-txt{flex:1;min-width:0;}
.dhbp-status-txt b{display:block;font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:15px;font-weight:700;color:#fff;}
.dhbp-status-txt span{font-size:14px;color:var(--p-muted);}
.dhbp-bel{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;font-size:13px;font-weight:500;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid var(--p-line-2);
  transition:border-color .2s,background-color .2s;
}
.dhbp-bel:hover{border-color:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 60%,transparent);background:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 10%,transparent);}
.dhbp-bel svg{width:15px;height:15px;stroke:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));fill:none;stroke-width:1.9;}

/* ---------- Titel en stapbalk ---------- */
.dhbp-titel{margin:22px 0 0;font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:clamp(24px,3.4vw,29px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:#fff;}
.dhbp-titel em{font-style:normal;color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-lead{margin-top:6px;font-size:14.5px;color:var(--p-muted);}

.dhbp-stapbalk{margin-top:24px;}
.dhbp-stapbalk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.dhbp-stapbalk-top b{font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:17px;font-weight:700;color:#fff;}
.dhbp-stapbalk-top span{font-size:13px;color:var(--p-muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.dhbp-bars{display:flex;gap:6px;margin-top:12px;}
.dhbp-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;}
.dhbp-bars i::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)),var(--p-soft));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.dhbp-bars i.on::after{transform:scaleX(1);}

.dhbp-paneel{display:none;margin-top:18px;}
.dhbp-paneel.show{display:block;animation:dhbp-in .45s cubic-bezier(.2,.7,.2,1);}
@keyframes dhbp-in{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}

/* ---------- Stap 1: fotokaarten ---------- */
.dhbp-keuzes{display:grid;gap:12px;}
.dhbp-keuze{position:relative;display:block;cursor:pointer;}
.dhbp-keuze input{position:absolute;opacity:0;pointer-events:none;}
.dhbp-keuze .dhbp-kaartje{
  position:relative;display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:18px;
  padding:10px 18px 10px 10px;border-radius:20px;
  background:rgba(255,255,255,.035);border:1px solid var(--p-line);
  transition:background-color .25s,border-color .25s,transform .25s var(--p-ease);
}
.dhbp-keuze:hover .dhbp-kaartje{background:rgba(255,255,255,.06);border-color:var(--p-line-2);transform:translateY(-1px);}
.dhbp-foto{position:relative;height:92px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#3b3431,#211d1b);}
.dhbp-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--p-ease);}
.dhbp-keuze:hover .dhbp-foto img{transform:scale(1.06);}
.dhbp-foto .dhbp-terugval{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35);}
.dhbp-foto .dhbp-terugval svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;}
.dhbp-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.dhbp-keuze-txt b{display:block;font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:17px;font-weight:700;color:#fff;}
.dhbp-keuze-txt small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--p-muted);}
.dhbp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.dhbp-tags span{font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--p-line);color:rgba(255,255,255,.75);}
.dhbp-radio{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.28);transition:.25s var(--p-ease);}
.dhbp-radio svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.25s var(--p-ease);}

/* De vier hoekjes die om de gekozen kaart springen. */
.dhbp-vf{position:absolute;inset:-5px;pointer-events:none;opacity:0;transform:scale(1.03);transition:opacity .3s,transform .3s var(--p-ease);}
.dhbp-vf i{position:absolute;width:16px;height:16px;border:0 solid var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-vf i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:10px;}
.dhbp-vf i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:10px;}
.dhbp-vf i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:10px;}
.dhbp-vf i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:10px;}

.dhbp-keuze input:checked + .dhbp-kaartje{
  background:linear-gradient(120deg,color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 18%,transparent),color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 3%,transparent) 60%);
  border-color:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 50%,transparent);
}
.dhbp-keuze input:checked + .dhbp-kaartje .dhbp-radio{background:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));border-color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));box-shadow:0 6px 16px -4px color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 70%,transparent);}
.dhbp-keuze input:checked + .dhbp-kaartje .dhbp-radio svg{opacity:1;transform:none;}
.dhbp-keuze input:checked ~ .dhbp-vf{opacity:1;transform:none;}
.dhbp-keuze input:focus-visible + .dhbp-kaartje{outline:2px solid var(--nh-accent,var(--dhbhp-oranje,#FF4C00));outline-offset:4px;}

/* ---------- Stap 2: onderdelen ---------- */
.dhbp-q{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 12px;font-size:14.5px;font-weight:600;color:#fff;}
.dhbp-q small{font-size:12px;font-weight:400;color:var(--p-muted);}
.dhbp-systemen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.dhbp-sys{position:relative;cursor:pointer;display:block;}
.dhbp-sys input{position:absolute;opacity:0;pointer-events:none;}
.dhbp-sys .dhbp-box{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px 12px 12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--p-line);transition:.2s;}
.dhbp-sys:hover .dhbp-box{border-color:var(--p-line-2);background:rgba(255,255,255,.06);}
.dhbp-sys .dhbp-ic{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 22%,transparent);
  color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));transition:.2s;
}
.dhbp-sys .dhbp-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.dhbp-sys b{display:block;font-size:14px;font-weight:600;color:#fff;}
.dhbp-sys small{display:block;font-size:12px;color:var(--p-muted);line-height:1.35;}
.dhbp-tick{margin-left:auto;width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:.2s;}
.dhbp-tick svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;opacity:0;}
.dhbp-sys input:checked + .dhbp-box{border-color:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 50%,transparent);background:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 10%,transparent);}
.dhbp-sys input:checked + .dhbp-box .dhbp-ic{background:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));color:#fff;border-color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-sys input:checked + .dhbp-box .dhbp-tick{background:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));border-color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-sys input:checked + .dhbp-box .dhbp-tick svg{opacity:1;}
.dhbp-sys input:focus-visible + .dhbp-box{outline:2px solid var(--nh-accent,var(--dhbhp-oranje,#FF4C00));outline-offset:2px;}
.dhbp-sys.is-breed{grid-column:1 / -1;}

/* ---------- Momentkeuze ---------- */
.dhbp-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.dhbp-chip{position:relative;cursor:pointer;}
.dhbp-chip input{position:absolute;opacity:0;pointer-events:none;}
.dhbp-chip span{display:block;text-align:center;padding:11px 6px;border-radius:12px;font-size:13.5px;font-weight:500;color:var(--p-text);background:rgba(255,255,255,.04);border:1px solid var(--p-line);transition:.2s;}
.dhbp-chip:hover span{border-color:var(--p-line-2);}
.dhbp-chip input:checked + span{border-color:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 55%,transparent);background:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 12%,transparent);color:#fff;}
.dhbp-chip input:focus-visible + span{outline:2px solid var(--nh-accent,var(--dhbhp-oranje,#FF4C00));outline-offset:2px;}

/* ---------- Stap 3: velden ---------- */
.dhbp-rij{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dhbp-veld{position:relative;margin-bottom:10px;}
.dhbp-veld input{
  width:100%;font:inherit;font-size:15px;color:#fff;
  padding:24px 16px 9px 46px;border-radius:14px;
  background:rgba(0,0,0,.3);border:1px solid var(--p-line);outline:none;transition:.2s;
}
.dhbp-veld label{position:absolute;left:46px;top:16px;font-size:14.5px;color:var(--p-muted);pointer-events:none;transition:.2s;}
.dhbp-veld > svg{position:absolute;left:16px;top:17px;width:18px;height:18px;stroke:var(--p-muted);fill:none;stroke-width:1.7;transition:.2s;}
.dhbp-veld input:focus{border-color:color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 60%,transparent);background:rgba(0,0,0,.42);box-shadow:0 0 0 4px color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 12%,transparent);}
.dhbp-veld input:focus ~ svg{stroke:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-veld input:focus ~ label,
.dhbp-veld input:not(:placeholder-shown) ~ label{top:7px;font-size:11.5px;color:var(--p-soft);}
.dhbp-veld .dhbp-msg{display:none;font-size:12px;color:#ff9b8b;margin:6px 0 0 4px;}
.dhbp-veld.err input{border-color:#ff5a4a;}
.dhbp-veld.err .dhbp-msg{display:block;}

/* Het honingpotje: alleen een robot vult dit in. */
.dhbp-hp{position:absolute;left:-9999px;opacity:0;width:1px;height:1px;}

/* ---------- Samenvatting ---------- */
.dhbp-lijst{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:28px;}
.dhbp-lijst .dhbp-tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:12.5px;font-weight:500;color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--p-line-2);
  animation:dhbp-pop .35s cubic-bezier(.34,1.56,.64,1);
}
.dhbp-lijst .dhbp-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
@keyframes dhbp-pop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}

/* ---------- Knoppen ---------- */
.dhbp-voet{display:flex;align-items:center;gap:12px;margin-top:22px;}
.dhbp-terug{background:none;border:0;color:var(--p-muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:10px 6px;display:none;align-items:center;gap:6px;}
.dhbp-terug.on{display:inline-flex;}
.dhbp-terug:hover{color:#fff;}
.dhbp-terug svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;}
.dhbp-next{
  flex:1;position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 8px 8px 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:16.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#FF6128,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)));
  box-shadow:0 14px 32px -12px color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--p-ease),box-shadow .25s,filter .3s;
}
.dhbp-next .dhbp-arr{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;transition:transform .3s var(--p-ease);}
.dhbp-next .dhbp-arr svg{width:18px;height:18px;stroke:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.dhbp-next::before{content:"";position:absolute;right:8px;top:50%;width:46px;height:46px;border-radius:50%;background:#1f1d1c;transform:translateY(-50%) scale(0);transition:transform .55s var(--p-ease);z-index:-1;}
.dhbp-next:not(:disabled):hover::before{transform:translateY(-50%) scale(16);}
.dhbp-next:not(:disabled):hover{transform:translateY(-2px);}
.dhbp-next:not(:disabled):hover .dhbp-arr{transform:translateX(2px);}
.dhbp-next:disabled{filter:grayscale(.65) brightness(.55);box-shadow:none;cursor:not-allowed;}
.dhbp-next:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.dhbp-next.bezig{pointer-events:none;opacity:.75;}

.dhbp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;}
.dhbp-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--p-muted);}
.dhbp-trust svg{width:14px;height:14px;stroke:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));fill:none;stroke-width:2.4;}

/* ---------- Bedankt ---------- */
.dhbp-done{text-align:center;padding:10px 0 4px;}
.dhbp-ring{
  width:84px;height:84px;margin:6px auto 18px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 25%,transparent),transparent 70%);
  border:1px solid color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 40%,transparent);
}
.dhbp-ring svg{width:36px;height:36px;stroke:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:dhbp-teken .6s .2s forwards;}
@keyframes dhbp-teken{to{stroke-dashoffset:0;}}
.dhbp-done h3{font-family:var(--nh-font,var(--dhbhp-kop,inherit));font-size:23px;font-weight:800;color:#fff;margin:0;}
.dhbp-done p{margin:8px auto 0;max-width:38ch;color:var(--p-muted);font-size:14.5px;line-height:1.55;}
.dhbp-kaart.is-done .dhbp-stapbalk,
.dhbp-kaart.is-done .dhbp-voet{display:none;}

/* ---------- Klein scherm ---------- */
@media (max-width:520px){
  .dhbp-bel{display:none;}
  .dhbp-keuze .dhbp-kaartje{grid-template-columns:84px 1fr auto;gap:12px;padding:8px 12px 8px 8px;}
  .dhbp-foto{height:84px;}
  .dhbp-keuze-txt b{font-size:15.5px;}
  .dhbp-keuze-txt small{font-size:12.5px;}
  .dhbp-tags{display:none;}
  .dhbp-systemen{grid-template-columns:1fr;}
  .dhbp-rij{grid-template-columns:1fr;gap:0;}
  .dhbp-chip span{font-size:12.5px;}
}

/* ---------- Kleuren vastzetten ----------
   De twee knoppen hieronder zijn <button>-elementen, en een Elementor-kit of
   thema stijlt knoppen vaak globaal - meestal een witte vulling met de
   themakleur bij het aanwijzen. De wrapper staat er dubbel in zodat deze
   regels zwaarder wegen. De keuzes zelf zijn labels en lopen dat risico niet. */
.dhbp-kaart.dhbp-kaart .dhbp-next,
.dhbp-kaart.dhbp-kaart .dhbp-next:hover,
.dhbp-kaart.dhbp-kaart .dhbp-next:focus{
  color:#fff;
  background:linear-gradient(180deg,#FF6128,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)));
}
.dhbp-kaart.dhbp-kaart .dhbp-terug,
.dhbp-kaart.dhbp-kaart .dhbp-terug:focus{background:none;border:0;color:var(--p-muted);}
.dhbp-kaart.dhbp-kaart .dhbp-terug:hover{background:none;border:0;color:#fff;}
/* De vraagregels zijn <p>-elementen en worden door de kit anders blauw. */
.dhbp-kaart.dhbp-kaart .dhbp-q{color:#fff;}
.dhbp-kaart.dhbp-kaart .dhbp-q small{color:var(--p-muted);}
.dhbp-kaart.dhbp-kaart .dhbp-keuze-txt small,
.dhbp-kaart.dhbp-kaart .dhbp-keuze-txt small,
.dhbp-kaart.dhbp-kaart .dhbp-sys small{color:var(--p-muted);}
.dhbp-kaart.dhbp-kaart .dhbp-keuze-txt b,
.dhbp-kaart.dhbp-kaart .dhbp-sys b{color:#fff;}
.dhbp-kaart.dhbp-kaart .dhbp-titel{color:#fff;}
.dhbp-kaart.dhbp-kaart .dhbp-titel em{color:var(--nh-accent,var(--dhbhp-oranje,#FF4C00));}
.dhbp-kaart.dhbp-kaart .dhbp-done h3{color:#fff;}
.dhbp-kaart.dhbp-kaart .dhbp-done p,
.dhbp-kaart.dhbp-kaart .dhbp-lead{color:var(--p-muted);}
.dhbp-kaart.dhbp-kaart .dhbp-bel,
.dhbp-kaart.dhbp-kaart .dhbp-bel:hover{color:#fff;}
.dhbp-kaart.dhbp-kaart .dhbp-veld input{color:#fff;}

.dhb-hero-section .dhb-btn--primary,
.dhb-hero-section .dhb-btn--primary:hover{color:#fff!important;}

/* Minder beweging: de knop houdt zijn vulling maar beweegt niet. */
@media (prefers-reduced-motion:reduce){
  .dhbp-next{animation:none!important;}
}

/* ---------- Lichte variant ----------
   Dezelfde kaart op een licht vlak. Alles wat wit of doorschijnend wit was
   wordt donker, want op een lichte ondergrond leest dat andersom. */
.dhbp-kaart.is-licht{
  --dhbp-vlak-1:rgba(255,255,255,.92);
  --dhbp-vlak-2:rgba(248,246,245,.88);
  --dhbp-rand:rgba(22,22,22,.10);
  --p-text:#161616;
  --p-muted:rgba(22,22,22,.62);
  --p-line:rgba(22,22,22,.10);
  --p-line-2:rgba(22,22,22,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
}
.dhbp-kaart.is-licht .dhbp-status-txt b,
.dhbp-kaart.is-licht .dhbp-stapbalk-top b,
.dhbp-kaart.is-licht .dhbp-keuze-txt b,
.dhbp-kaart.is-licht .dhbp-sys b,
.dhbp-kaart.is-licht .dhbp-q,
.dhbp-kaart.is-licht .dhbp-titel,
.dhbp-kaart.is-licht .dhbp-done h3{color:#161616;}
.dhbp-kaart.is-licht .dhbp-keuze .dhbp-kaartje,
.dhbp-kaart.is-licht .dhbp-sys .dhbp-box,
.dhbp-kaart.is-licht .dhbp-chip span{background:rgba(22,22,22,.03);}
.dhbp-kaart.is-licht .dhbp-keuze:hover .dhbp-kaartje,
.dhbp-kaart.is-licht .dhbp-sys:hover .dhbp-box{background:rgba(22,22,22,.06);}
.dhbp-kaart.is-licht .dhbp-tags span{background:rgba(22,22,22,.04);color:rgba(22,22,22,.72);}
.dhbp-kaart.is-licht .dhbp-radio,
.dhbp-kaart.is-licht .dhbp-tick{border-color:rgba(22,22,22,.28);}
.dhbp-kaart.is-licht .dhbp-veld input{background:rgba(22,22,22,.04);color:#161616;}
.dhbp-kaart.is-licht .dhbp-veld input:focus{background:rgba(22,22,22,.06);}
.dhbp-kaart.is-licht .dhbp-bel{background:rgba(22,22,22,.04);color:#161616;}
.dhbp-kaart.is-licht .dhbp-lijst .dhbp-tag{background:rgba(22,22,22,.05);color:#161616;}
.dhbp-kaart.is-licht .dhbp-bars i{background:rgba(22,22,22,.10);}
.dhbp-kaart.is-licht .dhbp-avatar .dhbp-ph,
.dhbp-kaart.is-licht .dhbp-dot{box-shadow:0 0 0 2px #fff,0 0 0 3.5px color-mix(in srgb,var(--nh-accent,var(--dhbhp-oranje,#FF4C00)) 50%,transparent);}
.dhbp-kaart.is-licht .dhbp-dot{border-color:#fff;}

/* De afscherming tegen de kit noemt hierboven witte kleuren; op de lichte
   kaart moeten die weer donker zijn, dus die staat hier nog eens. */
.dhbp-kaart.is-licht.is-licht .dhbp-titel,
.dhbp-kaart.is-licht.is-licht .dhbp-q,
.dhbp-kaart.is-licht.is-licht .dhbp-done h3,
.dhbp-kaart.is-licht.is-licht .dhbp-keuze-txt b,
.dhbp-kaart.is-licht.is-licht .dhbp-sys b{color:#161616;}
.dhbp-kaart.is-licht.is-licht .dhbp-bel{color:#161616;}

/* ---------- In het raster van Hero Plan ----------
   Daar staat de kaart in de rechterkolom van 470px; op smallere schermen gaat
   hij onder de tekst staan en krijgt hij zijn eigen maximum. */
.dhbhp .dhbp-kaart{width:100%;}
@media (max-width:1100px){
  .dhbhp .dhbp-kaart{max-width:580px;margin-left:auto;margin-right:auto;}
}

/* ---------- Als losse widget ---------- */
.dhbp-sectie{display:flex;justify-content:center;padding:72px 20px;}
.dhbp-sectie .dhbp-kaart{max-width:560px;}

/* Het lege fotovlak en de uitgeschakelde knop zijn op de donkere kaart bewust
   donker. Op de lichte kaart valt dat als een gat uit, dus die draaien mee. */
.dhbp-kaart.is-licht .dhbp-foto{background:linear-gradient(135deg,#e8e4e1,#d8d3cf);}
.dhbp-kaart.is-licht .dhbp-terugval{color:rgba(22,22,22,.30);}
.dhbp-kaart.is-licht .dhbp-next:disabled{filter:grayscale(.5) brightness(1.25) opacity(.6);}
.dhbp-kaart.is-licht .dhbp-next::before{background:#f2efed;}