/*
 * Drukhuis – Project Aanvragen
 * Extracted near-verbatim from the approved prototype's inline <style>
 * block, then scoped under .dpa-app so nothing here can leak into the
 * surrounding theme (the original assumed it owned the whole document:
 * `*`, `body`, `html`, `header`, `footer`, `::selection` were all bare
 * tag selectors). Self-hosted Montserrat replaces the Google Fonts CDN.
 */

@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

html{scroll-behavior:smooth}

.dpa-app{
  --roze:#cf0098; --blauw:#00b8ff; --helderblauw:#0057ff; --geel:#ffbf00;
  --zwart:#000000; --grijs:#777777; --lichtgrijs:#a8a8a8; --lijn:#e6e6e6; --vlak:#efefef;
  --groen:#1e8a4c; --rood:#c22525;
  font-family:'Montserrat',Arial,sans-serif;color:#000;background:#fff;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.dpa-app, .dpa-app *{box-sizing:border-box;margin:0;padding:0}
.dpa-app ::selection{background:var(--roze);color:#fff}
.dpa-app .wrap{max-width:860px;margin:0 auto;padding:34px 22px 10px}

.dpa-app .sub{color:var(--grijs);margin:8px 0 26px;max-width:640px;font-size:14px}

/* stappenbalk in documentstijl */
.dpa-app .steps{display:flex;gap:0;margin-bottom:30px;border-bottom:1px solid var(--zwart);padding-bottom:14px}
.dpa-app .steps div{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--lichtgrijs);cursor:pointer;user-select:none}
.dpa-app .steps .bol{width:24px;height:24px;border-radius:50%;background:var(--vlak);color:#999;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.dpa-app .steps div.act{color:#000}
.dpa-app .steps div:nth-child(1).act .bol{background:var(--roze);color:#fff}
.dpa-app .steps div:nth-child(2).act .bol{background:var(--blauw);color:#fff}
.dpa-app .steps div:nth-child(3).act .bol{background:var(--geel);color:#fff}
.dpa-app .steps div:nth-child(4).act .bol{background:var(--helderblauw);color:#fff}
.dpa-app .steps div.done{color:var(--groen)}
.dpa-app .steps div.done .bol{background:var(--groen);color:#fff}

.dpa-app .panel{margin-bottom:20px}
.dpa-app h2{font-size:18px;font-weight:700;margin-bottom:2px}
.dpa-app .hint{color:var(--grijs);font-size:13px;margin-bottom:20px}

.dpa-app label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lichtgrijs);margin:16px 0 5px}
.dpa-app label .req{color:var(--roze)}
.dpa-app label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--lichtgrijs)}
.dpa-app input[type=text],.dpa-app input[type=email],.dpa-app input[type=tel],.dpa-app input[type=number],.dpa-app select,.dpa-app textarea{
  width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:6px;font-family:inherit;font-size:14px;background:#fff;color:#000}
.dpa-app input:focus,.dpa-app select:focus,.dpa-app textarea:focus{outline:none;border-color:var(--roze)}
.dpa-app textarea{min-height:72px;resize:vertical}
.dpa-app .row{display:flex;gap:16px;flex-wrap:wrap}
.dpa-app .row>div{flex:1;min-width:170px}
.dpa-app .row.tight>div{min-width:115px}

/* keuze-pills */
.dpa-app .pills{display:flex;gap:8px;flex-wrap:wrap}
.dpa-app .pills label{margin:0;flex:none;text-transform:none;letter-spacing:0}
.dpa-app .pills input{display:none}
.dpa-app .pills span{display:inline-block;padding:8px 16px;border:1px solid var(--lijn);border-radius:18px;font-size:13px;font-weight:600;cursor:pointer;color:#444}
.dpa-app .pills input:checked+span{background:var(--zwart);border-color:var(--zwart);color:#fff}

/* objectkaart in documentstijl */
.dpa-app .obj{border:1px solid var(--lijn);border-radius:10px;margin-bottom:18px;overflow:hidden}
.dpa-app .obj-head{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#fff;border-bottom:1px solid var(--lijn);cursor:pointer}
.dpa-app .obj-head .nr{width:28px;height:28px;border-radius:50%;background:var(--roze);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.dpa-app .obj-head .ttl{font-weight:700;flex:1}
.dpa-app .obj-head .status{font-size:12px;font-weight:600}
.dpa-app .obj-head .status.ok{color:var(--groen)} .dpa-app .obj-head .status.todo{color:#b8860b}
.dpa-app .obj-head button{background:none;border:none;color:var(--lichtgrijs);cursor:pointer;font-size:12.5px;font-family:inherit}
.dpa-app .obj-body{padding:4px 18px 20px}
.dpa-app .obj.closed .obj-body{display:none}
.dpa-app .obj.closed .obj-head{border-bottom:none}

.dpa-app .fotoknoppen{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.dpa-app .fotobtn{flex:1;min-width:160px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;border-radius:12px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}
.dpa-app .fotobtn.cam{background:var(--roze);color:#fff;border:none}
.dpa-app .fotobtn.cam:hover{background:#b00082}
.dpa-app .fotobtn.upl{background:#fff;border:1.5px dashed var(--lijn);color:#444}
.dpa-app .fotobtn.upl:hover{border-color:var(--roze);color:var(--roze)}
.dpa-app .fotos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.dpa-app .foto{width:132px;border:1px solid var(--lijn);border-radius:8px;overflow:hidden;font-size:11px}
.dpa-app .foto img{width:100%;height:88px;object-fit:cover;display:block}
.dpa-app .foto select{font-size:11px;padding:5px 6px;border:none;border-top:1px solid var(--lijn);border-radius:0}
.dpa-app .foto .del{display:block;width:100%;background:#fff;border:none;border-top:1px solid var(--lijn);color:var(--rood);padding:4px;cursor:pointer;font-size:11px;font-family:inherit}
.dpa-app .fotoregels{font-size:12px;margin-top:8px}
.dpa-app .fotoregels span{margin-right:14px;font-weight:600}
.dpa-app .fotoregels .ok{color:var(--groen)} .dpa-app .fotoregels .no{color:var(--rood)}

.dpa-app .add-obj{width:100%;padding:14px;border:1.5px dashed var(--roze);background:none;border-radius:10px;color:var(--roze);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
.dpa-app .add-obj:hover{background:#fff5fc}

.dpa-app .nav{display:flex;justify-content:space-between;margin-top:22px;border-top:1px solid var(--zwart);padding-top:16px}
.dpa-app button.btn{padding:12px 26px;border-radius:8px;border:none;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.dpa-app .btn.primary{background:var(--zwart);color:#fff}
.dpa-app .btn.ghost{background:none;border:1px solid var(--lijn);color:#000}
.dpa-app .btn.dl{background:var(--roze);color:#fff}
.dpa-app .btn:disabled{opacity:.4;cursor:not-allowed}

/* samenvatting */
.dpa-app .sum-obj{border:1px solid var(--lijn);border-radius:10px;padding:13px 16px;margin-bottom:12px;font-size:13.5px}
.dpa-app .sum-obj b{display:block;margin-bottom:3px}
.dpa-app .sum-obj .miss{color:var(--rood);font-weight:600}
.dpa-app .klaar,.dpa-app .nietklaar{border-top:1px solid var(--zwart);border-bottom:1px solid var(--zwart);padding:12px 0;font-size:14px;margin:16px 0;color:#444}
.dpa-app .klaar b{color:var(--groen)} .dpa-app .nietklaar b{color:var(--rood)}

.dpa-app .infoblok{border-top:1px solid var(--zwart);border-bottom:1px solid var(--zwart);padding:11px 0;margin:16px 0;font-size:13px;color:#444}
.dpa-app .infoblok b{color:var(--roze)}

/* melding na verzenden / bij fout */
.dpa-app .verzendmelding{border-radius:10px;padding:16px 18px;margin:16px 0;font-size:14px}
.dpa-app .verzendmelding.succes{background:#eafaf1;border:1px solid var(--groen);color:#0f5c2e}
.dpa-app .verzendmelding.fout{background:#fdecec;border:1px solid var(--rood);color:#8a1c1c}
.dpa-app .verzendmelding b{display:block;margin-bottom:4px}
.dpa-app .voortgang{font-size:13px;color:var(--grijs);margin-top:10px}

/* ---------- landing (rustig, één actie) ---------- */
.dpa-app #dpa-landing .hero{min-height:56vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:46px 0 12px;position:relative}
.dpa-app .hero img.hlogo{width:122px;margin-bottom:36px}
.dpa-app .hero h1{font-size:40px;font-weight:700;line-height:1.14;letter-spacing:-.6px;max-width:580px}
.dpa-app .hero h1 span{color:var(--roze)}
.dpa-app .hero p.lead{color:var(--grijs);font-size:16.5px;line-height:1.6;max-width:500px;margin:16px 0 30px}
.dpa-app .startbtn{background:var(--roze);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:17px;padding:18px 48px;border-radius:12px;cursor:pointer;box-shadow:0 10px 26px rgba(207,0,152,.28);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.dpa-app .startbtn:hover{background:#b00082;transform:translateY(-2px);box-shadow:0 14px 32px rgba(207,0,152,.34)}
.dpa-app .subnote{margin-top:13px;font-size:13px;color:var(--lichtgrijs)}
.dpa-app .eerstlezen{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:13.5px;font-weight:600;color:var(--roze);background:#fff;border:1px solid #ffdbf8;border-radius:30px;padding:10px 24px;text-decoration:none;transition:background .15s,border-color .15s}
.dpa-app .eerstlezen:hover{background:#fff5fc;border-color:var(--roze)}
.dpa-app .ministrip{display:flex;justify-content:center;gap:14px;padding:6px 10px 34px;font-size:13.5px;color:#444;flex-wrap:wrap}
.dpa-app .ministrip span{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--lijn);border-radius:30px;padding:10px 20px;font-weight:600}
.dpa-app .ministrip i{font-style:normal;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.dpa-app .docskop{text-align:center;font-size:21px;font-weight:700;border-top:none;padding-top:10px}
.dpa-app .docssub{text-align:center;font-size:13px;color:var(--grijs);margin-bottom:24px}
.dpa-app .docs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding-bottom:26px}
.dpa-app a.dockaart{display:flex;gap:16px;align-items:center;border:1px solid var(--lijn);border-radius:14px;padding:16px 20px;width:380px;max-width:100%;text-decoration:none;color:#000;transition:border-color .15s,box-shadow .15s,transform .15s}
.dpa-app a.dockaart:hover{border-color:var(--roze);box-shadow:0 10px 26px rgba(0,0,0,.07);transform:translateY(-2px)}
.dpa-app a.dockaart img{width:88px;border:1px solid var(--lijn);border-radius:6px;display:block;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dpa-app a.dockaart b{display:block;font-size:14.5px;margin-bottom:4px;line-height:1.3}
.dpa-app a.dockaart p{font-size:12.5px;color:var(--grijs);margin:0 0 8px;line-height:1.5}
.dpa-app a.dockaart span{color:var(--roze);font-weight:700;font-size:13px}
.dpa-app i.docnr{font-style:normal;display:inline-flex;width:19px;height:19px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-right:7px;vertical-align:-3px}
.dpa-app .contactrow{text-align:center;font-size:12.5px;color:var(--lichtgrijs);padding:22px 0 8px;border-top:1px solid var(--lijn)}
.dpa-app .contactrow a{color:var(--grijs);text-decoration:none}

/* hero: zachte merkkleur-gloed */
.dpa-app #dpa-landing .hero::before{content:"";position:absolute;inset:-20px -60px;z-index:-1;pointer-events:none;background:
  radial-gradient(460px 300px at 16% 24%, #ffdbf866, transparent 70%),
  radial-gradient(460px 300px at 84% 72%, #b6ebff59, transparent 70%),
  radial-gradient(340px 240px at 58% 8%, #ffe39140, transparent 70%)}
.dpa-app .kicker{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--roze);margin-bottom:16px}

/* faq */
.dpa-app .faq{max-width:660px;margin:0 auto;padding-bottom:34px}
.dpa-app .faq details{border:1px solid var(--lijn);border-radius:12px;padding:0;margin-bottom:8px;background:#fff;transition:border-color .15s}
.dpa-app .faq details[open],.dpa-app .faq details:hover{border-color:#d9d9d9}
.dpa-app .faq summary{font-weight:600;font-size:14.5px;cursor:pointer;padding:15px 44px 15px 18px;list-style:none;position:relative}
.dpa-app .faq summary::-webkit-details-marker{display:none}
.dpa-app .faq summary::after{content:"+";position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:19px;font-weight:600;color:var(--roze)}
.dpa-app .faq details[open] summary::after{content:"\2013"}
.dpa-app .faq p{font-size:13.5px;color:#444;line-height:1.6;padding:0 18px 16px;margin:0}

/* ---------- funnel-kop ---------- */
.dpa-app .funneltop{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dpa-app .funneltop img{width:96px}
.dpa-app .funneltop a{font-size:13px;color:var(--grijs);cursor:pointer;text-decoration:none;transition:color .15s}
.dpa-app .funneltop a:hover{color:#000}
.dpa-app .funneltitel{font-size:24px;font-weight:700;letter-spacing:-.3px;margin-bottom:16px}
.dpa-app .funneltitel span{color:var(--roze)}

.dpa-app .obj,.dpa-app .sum-obj{border-radius:14px}
.dpa-app .add-obj{border-radius:14px}
.dpa-app button.btn{border-radius:10px;transition:background .15s,transform .1s}
.dpa-app .btn.primary:hover{background:#252525}
.dpa-app .btn.dl:hover{background:#b00082}
.dpa-app .btn.ghost:hover{border-color:#bbb}
.dpa-app input[type=text],.dpa-app input[type=email],.dpa-app input[type=tel],.dpa-app input[type=number],.dpa-app select,.dpa-app textarea{border-radius:9px;transition:border-color .15s,box-shadow .15s}
.dpa-app input:focus,.dpa-app select:focus,.dpa-app textarea:focus{box-shadow:0 0 0 3px #ffdbf8}
.dpa-app .pills span{border-radius:20px;transition:border-color .12s,background .12s,color .12s}
.dpa-app .pills span:hover{border-color:#bbb}
.dpa-app .foto{border-radius:10px}

.dpa-app .dpa-footer{width:100%;margin-top:48px}
.dpa-app .dpa-footer img{width:100%;display:block}
.dpa-app .hide{display:none!important}

@media(max-width:620px){
  .dpa-app .steps div span.lbl{display:none}
  .dpa-app .hero h1{font-size:28px;letter-spacing:-.3px}
  .dpa-app .ministrip{gap:10px}
  .dpa-app .startbtn{width:100%;padding:17px 20px}
  .dpa-app a.dockaart{width:100%}
  .dpa-app .wrap{padding:24px 16px 10px}
  .dpa-app input[type=text],.dpa-app input[type=email],.dpa-app input[type=tel],.dpa-app input[type=number],.dpa-app select,.dpa-app textarea{font-size:16px;padding:12px 13px}
  .dpa-app .pills span{padding:11px 18px;font-size:14px}
  .dpa-app .nav{gap:10px}
  .dpa-app .nav .btn{flex:1;padding:14px 12px}
  .dpa-app .nav span{display:none}
  .dpa-app .obj-head{flex-wrap:wrap;padding:12px 14px}
  .dpa-app .obj-body{padding:4px 14px 18px}
  .dpa-app .foto{width:calc(50% - 5px)}
  .dpa-app .foto img{height:110px}
  .dpa-app .funneltitel{font-size:20px}
  .dpa-app .steps{gap:6px}
}
@media(min-width:621px) and (max-width:900px){
  .dpa-app .row>div{min-width:150px}
  .dpa-app a.dockaart{width:340px}
}