/* =====================================================================
   Dakkapel Configurator v4 — huisstijl Dakkapel Haaglanden
   ===================================================================== */

/* ---------- Schermvullend sjabloon ---------- */
body.dkc-fs{ margin:0; background:#f3f4f1; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#1a1a1a; }
.dkc-fs-bar{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; background:#006d2d; color:#fff; flex-wrap:wrap; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.dkc-fs-home{ color:#fff; text-decoration:none; font-weight:700; font-size:14px; }
.dkc-fs-home:hover{ text-decoration:underline; }
.dkc-fs-title{ font-weight:800; font-size:15px; flex:1; text-align:center; min-width:120px; }
.dkc-fs-cta{ background:#ffed00; color:#1a1a1a; text-decoration:none; font-weight:800; font-size:13.5px; padding:8px 14px; border-radius:9px; white-space:nowrap; }
.dkc-fs-cta:hover{ background:#e6d600; }
.dkc-fs-intro{ max-width:1320px; margin:18px auto 0; padding:0 20px; color:#555; font-size:15px; }
.dkc-fs-main{ max-width:1360px; margin:0 auto; padding:14px 14px 48px; }
@media (max-width:560px){ .dkc-fs-title{ order:3; flex-basis:100%; text-align:left; } }

/* ---------- Basis ---------- */
.dkc{
	--g:#006d2d; --g-dark:#00521f; --g-tint:#e9f5ed; --g-line:#bfe0c9; --y:#ffed00; --y-hover:#f2e000;
	--ink:#16181a; --ink2:#3c4043; --muted:#6b7075; --line:#e3e5e1; --paper:#fff; --bg:#f6f7f5;
	--r:14px; --shadow:0 1px 2px rgba(16,24,20,.05),0 8px 28px rgba(16,24,20,.08);
	--dkc-h:700px;
	display:flex; gap:16px; align-items:stretch; max-width:1360px; margin:0 auto; box-sizing:border-box;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color:var(--ink); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.dkc *, .dkc *::before, .dkc *::after{ box-sizing:border-box; }
.dkc button{ font-family:inherit; }
.dkc :focus-visible{ outline:3px solid rgba(0,109,45,.35); outline-offset:2px; }

/* ---------- Stage (3D) ---------- */
.dkc-stage{ position:relative; flex:1 1 auto; min-width:0; height:var(--dkc-h); border-radius:20px; overflow:hidden; background:#e9eee9; box-shadow:var(--shadow); isolation:isolate; }
.dkc-canvaswrap{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 18%,#ffffff 0%,#eef2ee 48%,#dde4de 100%); cursor:grab; }
.dkc-canvaswrap.is-house{ background:linear-gradient(180deg,#cfe3f2 0%,#e8f1f7 55%,#f3f6f2 100%); }
.dkc-canvaswrap.is-dragging{ cursor:grabbing; }
.dkc-canvas{ width:100%; height:100%; display:block; touch-action:none; }

.dkc-svgwrap{ position:absolute; inset:0; padding:70px 20px 20px; overflow:auto; background:#fafbf9; }
.dkc-svgwrap svg{ max-width:100%; height:auto; border-radius:10px; box-shadow:0 1px 0 var(--line); }

/* Bovenbalk (zwevende pillen) */
.dkc-topbar{ position:absolute; top:14px; left:14px; right:14px; z-index:6; display:flex; align-items:center; gap:10px; flex-wrap:wrap; pointer-events:none; }
.dkc-topbar > *{ pointer-events:auto; }
.dkc-viewtabs{ display:flex; gap:2px; padding:4px; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.dkc-viewtab{ padding:7px 12px; border:0; background:transparent; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer; transition:background .15s,color .15s; }
.dkc-viewtab:hover{ background:rgba(0,0,0,.05); }
.dkc-viewtab.is-active{ background:var(--g); color:#fff; box-shadow:0 2px 6px rgba(0,109,45,.3); }
.dkc-topctl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.dkc-modeswitch{ border:0; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:9px 14px; border-radius:12px; font-size:12.5px; font-weight:700; color:var(--g-dark); cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.08); transition:background .15s,color .15s; }
.dkc-modeswitch:hover{ background:#fff; }
.dkc-modeswitch.is-on{ background:var(--g); color:#fff; }
.dkc-roofswitch{ display:flex; align-items:center; gap:4px; padding:4px 4px 4px 10px; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.dkc-rs-label{ font-size:12px; font-weight:700; color:var(--muted); margin-right:2px; }
.dkc-rs-btn{ display:flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border:0; background:transparent; border-radius:9px; font-size:12px; font-weight:700; color:var(--ink2); cursor:pointer; }
.dkc-rs-btn span{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); display:block; }
.dkc-rs-btn.is-active{ background:var(--g-tint); color:var(--g-dark); box-shadow:inset 0 0 0 1.5px var(--g); }

/* Camera-knoppen */
.dkc-camctl{ position:absolute; right:14px; bottom:14px; z-index:5; display:flex; flex-direction:column; gap:2px; padding:4px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.dkc-camctl button{ width:36px; height:36px; border:0; background:transparent; border-radius:9px; font-size:18px; font-weight:700; color:var(--ink2); cursor:pointer; line-height:1; }
.dkc-camctl button:hover{ background:rgba(0,0,0,.06); }
.dkc-camctl button.is-on{ color:var(--g); }
.dkc-hint3d{ position:absolute; left:16px; bottom:14px; z-index:4; margin:0; font-size:11.5px; color:rgba(30,40,34,.55); font-weight:600; pointer-events:none; }

/* Maatlabels */
.dkc-dimlabels{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.dkc-dimlabels span{ position:absolute; left:0; top:0; padding:3px 8px; border-radius:7px; background:var(--g); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap; box-shadow:0 2px 8px rgba(0,60,25,.25); font-variant-numeric:tabular-nums; transition:opacity .2s; }

/* Loader */
.dkc-loader{ position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; color:var(--g-dark); background:#eef2ee; font-size:13px; }
.dkc-loader span{ width:20px; height:20px; border-radius:50%; border:3px solid var(--g-line); border-top-color:var(--g); animation:dkcSpin .8s linear infinite; }
@keyframes dkcSpin{ to{ transform:rotate(360deg); } }

/* ---------- Wizard ---------- */
.dkc-wizard{ flex:none; width:400px; height:var(--dkc-h); display:flex; flex-direction:column; background:var(--paper); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.dkc-wiz-head, .dkc-progress, .dkc-steps, .dkc-step-head, .dkc-nav{ flex:none; }
.dkc-wiz-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px 8px; }
.dkc-wiz-name{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--g); }
.dkc-step-count{ font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.dkc-progress{ height:4px; margin:0 20px; background:var(--g-tint); border-radius:4px; overflow:hidden; }
.dkc-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--g),#2fa45f); border-radius:4px; transition:width .45s cubic-bezier(.4,0,.2,1); }

.dkc-steps{ display:flex; gap:6px; padding:12px 20px 4px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.dkc-steps::-webkit-scrollbar{ display:none; }
.dkc-stepchip{ flex:none; display:flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border:0; background:#f2f3f1; border-radius:20px; cursor:pointer; color:var(--muted); font-size:12px; font-weight:700; transition:background .15s,color .15s; }
.dkc-stepchip span{ width:20px; height:20px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.dkc-stepchip em{ font-style:normal; }
.dkc-stepchip:hover{ background:#e8eae6; }
.dkc-stepchip.is-done{ color:var(--g-dark); background:var(--g-tint); }
.dkc-stepchip.is-done span{ background:var(--g); color:#fff; box-shadow:none; }
.dkc-stepchip.is-current{ background:var(--g); color:#fff; }
.dkc-stepchip.is-current span{ background:var(--y); color:var(--ink); box-shadow:none; }
.dkc-stepchip:disabled{ cursor:default; }

.dkc-step-head{ padding:10px 20px 2px; }
.dkc-step-title{ margin:0 0 3px !important; padding:0 !important; font-size:21px !important; line-height:1.2 !important; font-weight:800 !important; color:var(--ink) !important; letter-spacing:-.01em; border:0 !important; }
.dkc-step-sub{ margin:0 !important; color:var(--muted) !important; font-size:13.5px !important; line-height:1.45 !important; }
.dkc-step-body{ padding:14px 20px 20px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; flex:1 1 auto; min-height:0; scrollbar-width:thin; animation:dkcIn .28s ease; }
@keyframes dkcIn{ from{ opacity:.0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.dkc-nav{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); background:#fcfcfb; }
.dkc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border:0; border-radius:12px; font-size:14px; font-weight:800; cursor:pointer; text-decoration:none; transition:background .15s,transform .15s,box-shadow .15s,opacity .15s; }
.dkc-btn:active{ transform:translateY(1px); }
.dkc-btn-back{ background:#f0f1ee; color:var(--ink2); }
.dkc-btn-back:hover{ background:#e6e8e4; }
.dkc-btn-back:disabled{ opacity:.35; cursor:default; }
.dkc-btn-next{ margin-left:auto; min-width:150px; background:var(--g); color:#fff; box-shadow:0 4px 14px rgba(0,109,45,.28); }
.dkc-btn-next:hover{ background:var(--g-dark); }
.dkc-btn-next::after{ content:"→"; font-weight:800; }
.dkc-btn-cta{ width:100%; padding:16px; font-size:16px; background:var(--y); color:var(--ink); box-shadow:0 6px 18px rgba(230,214,0,.45); }
.dkc-btn-cta:hover{ background:var(--y-hover); }
.dkc-btn-cta:disabled{ opacity:.7; cursor:progress; }
.dkc-btn-cta.is-busy::before{ content:""; width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(0,0,0,.2); border-top-color:var(--ink); animation:dkcSpin .8s linear infinite; }
.dkc-btn-wa{ background:#25d366; color:#fff; }
.dkc-btn-ghost{ background:#fff; color:var(--g-dark); box-shadow:inset 0 0 0 2px var(--g-line); }

/* ---------- Velden ---------- */
.dkc-field{ display:flex; flex-direction:column; gap:8px; }
.dkc-field-label{ font-size:13.5px; font-weight:800; color:var(--ink); }
.dkc-field-hint{ font-weight:500; color:var(--muted); font-size:12.5px; }
.dkc-group{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--g); padding-top:6px; margin-bottom:-6px; border-top:1px solid var(--line); padding-top:16px; }
.dkc-help{ font-size:12.5px; color:var(--muted); margin:-8px 0 0 !important; line-height:1.5; }
.dkc-help.dkc-note{ margin:0 !important; background:#fff9cc; color:#5a5200; padding:10px 12px; border-radius:10px; }
.dkc-center{ text-align:center; margin:0 !important; }
.dkc-link{ color:var(--g) !important; font-weight:700; text-decoration:underline !important; text-underline-offset:2px; white-space:nowrap; }

/* Keuzekaarten */
.dkc-cards{ display:grid; grid-template-columns:1fr; gap:8px; }
.dkc-cards--2{ grid-template-columns:1fr 1fr; }
.dkc-card{ position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:11px 12px; text-align:left; background:#fff; border:0; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; color:var(--ink); transition:box-shadow .15s,background .15s,transform .1s; }
.dkc-card:hover{ box-shadow:inset 0 0 0 1.5px #b9c2bb; background:#fbfcfb; }
.dkc-card:active{ transform:scale(.99); }
.dkc-card.is-on{ background:var(--g-tint); box-shadow:inset 0 0 0 2px var(--g); }
.dkc-card-tick{ flex:none; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #c7ccc8; display:flex; align-items:center; justify-content:center; color:transparent; background:#fff; transition:background .15s,color .15s; }
.dkc-card-tick svg{ width:14px; height:14px; }
.dkc-card.is-on .dkc-card-tick{ background:var(--g); color:#fff; box-shadow:none; }
.dkc-cards[role=group] .dkc-card-tick{ border-radius:6px; }
.dkc-card-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dkc-card-title{ font-size:13.5px; font-weight:700; line-height:1.3; }
.dkc-card-desc{ font-size:12px; color:var(--muted); font-weight:500; line-height:1.35; }
.dkc-cards--compact .dkc-card{ min-height:42px; padding:9px 11px; }
.dkc-cards--compact .dkc-card-title{ font-size:13px; }
.dkc-card.has-img{ flex-direction:column; align-items:stretch; padding:8px; }
.dkc-card.has-img .dkc-card-tick{ position:absolute; top:12px; right:12px; }
.dkc-card-img{ display:block; border-radius:8px; overflow:hidden; background:#fff; aspect-ratio:4/3; }
.dkc-card-img img{ width:100%; height:100%; object-fit:contain; display:block; margin:0 !important; }

/* Afbeelding-hulp */
.dkc-imghelp{ border-radius:12px; background:var(--bg); overflow:hidden; }
.dkc-imghelp summary{ cursor:pointer; list-style:none; padding:11px 14px; font-size:13px; font-weight:700; color:var(--g-dark); display:flex; justify-content:space-between; }
.dkc-imghelp summary::-webkit-details-marker{ display:none; }
.dkc-imghelp summary::after{ content:"+"; font-size:17px; line-height:1; }
.dkc-imghelp[open] summary::after{ content:"−"; }
.dkc-imghelp img{ display:block; width:100%; height:auto; margin:0 !important; border-radius:0 !important; }

/* Tekstvelden */
.dkc-select, .dkc-textin{ width:100%; padding:12px 13px; border:0; border-radius:11px; box-shadow:inset 0 0 0 1.5px var(--line); font-size:16px; font-family:inherit; background:#fff; color:var(--ink); transition:box-shadow .15s; -webkit-appearance:none; appearance:none; margin:0; }
.dkc-select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 7.5 10 12.3l4.8-4.8 1.2 1.2-6 6-6-6z' fill='%23006d2d'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px; }
.dkc-select:focus, .dkc-textin:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--g), 0 0 0 4px rgba(0,109,45,.12); }
.dkc-textin::placeholder{ color:#a3a8a5; }
.dkc .dkc-select, .dkc input.dkc-textin{ height:auto !important; min-height:50px !important; line-height:1.35 !important; padding-top:12px !important; padding-bottom:12px !important; box-sizing:border-box !important; }
.dkc .dkc-select{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15.5px !important; padding-right:40px !important; }
textarea.dkc-textin{ resize:vertical; min-height:64px; line-height:1.45; }
.dkc-field.is-error .dkc-textin{ box-shadow:inset 0 0 0 2px #c0392b; background:#fff8f7; }
.dkc-field.is-error .dkc-field-label{ color:#a62d22; }
.dkc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dkc-grid2--wide{ grid-template-columns:1fr 92px; }
.dkc-grid2--pc{ grid-template-columns:120px 1fr; }

/* Vinkje */
.dkc-check{ position:relative; display:flex; gap:11px; align-items:flex-start; padding:12px; border-radius:12px; background:var(--bg); cursor:pointer; transition:background .15s; }
.dkc-check input{ position:absolute; top:12px; left:12px; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.dkc-check-box{ flex:none; width:22px; height:22px; border-radius:7px; background:#fff; box-shadow:inset 0 0 0 1.5px #bfc5c1; display:flex; align-items:center; justify-content:center; color:transparent; transition:background .15s; }
.dkc-check-box svg{ width:15px; height:15px; }
.dkc-check.is-on{ background:var(--g-tint); }
.dkc-check.is-on .dkc-check-box{ background:var(--g); color:#fff; box-shadow:none; }
.dkc-check input:focus-visible + .dkc-check-box{ outline:3px solid rgba(0,109,45,.35); outline-offset:2px; }
.dkc-check-title{ display:block; font-size:13.5px; font-weight:700; }
.dkc-check-desc{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.dkc-check.is-error{ box-shadow:inset 0 0 0 2px #c0392b; background:#fff8f7; }

/* Schuifbalk + invulveld */
.dkc-range-row{ display:flex; align-items:center; gap:14px; }
.dkc-range{ --p:50%; flex:1; min-width:0; height:28px; margin:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
.dkc-range::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:linear-gradient(90deg,var(--g) var(--p),#e1e5e1 var(--p)); }
.dkc-range::-moz-range-track{ height:6px; border-radius:6px; background:#e1e5e1; }
.dkc-range::-moz-range-progress{ height:6px; border-radius:6px; background:var(--g); }
.dkc-range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 2px var(--g),0 3px 8px rgba(0,0,0,.2); }
.dkc-range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 2px var(--g),0 3px 8px rgba(0,0,0,.2); }
.dkc-range:active::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--g),0 0 0 8px rgba(0,109,45,.15); }
.dkc-range-num{ display:flex; align-items:center; gap:5px; flex:none; }
.dkc-numin{ width:82px; padding:9px 10px; border:0; border-radius:10px; box-shadow:inset 0 0 0 1.5px var(--line); font-size:15px; font-weight:800; text-align:right; font-family:inherit; font-variant-numeric:tabular-nums; margin:0; -moz-appearance:textfield; }
.dkc-numin::-webkit-inner-spin-button, .dkc-numin::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.dkc-numin:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--g); }
.dkc-range-unit{ font-size:12.5px; font-weight:700; color:var(--muted); min-width:22px; }
.dkc-range-scale{ display:flex; justify-content:space-between; margin:-6px 110px 0 0; font-size:11px; color:#9aa09c; font-variant-numeric:tabular-nums; }

/* Stepper */
.dkc-stepper{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line); }
.dkc-step-btn{ width:42px; height:42px; border:0; background:var(--bg); border-radius:9px; font-size:22px; font-weight:700; color:var(--g); cursor:pointer; line-height:1; }
.dkc-step-btn:hover{ background:var(--g-tint); }
.dkc-step-val{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }

/* Ramen */
.dkc-ramen{ display:flex; flex-wrap:wrap; gap:8px; }
.dkc-raam{ position:relative; width:64px; padding:8px 4px 7px; border:0; background:#fff; border-radius:11px; box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; text-align:center; line-height:1.1; }
.dkc-raam i{ display:block; width:26px; height:30px; margin:0 auto 5px; border-radius:3px; background:#dcecf5; box-shadow:inset 0 0 0 3px #9aa6ad; }
.dkc-raam.is-kiep i{ background:linear-gradient(to top right,transparent 48%,#4a6b86 49%,#4a6b86 52%,transparent 53%) ,linear-gradient(to top left,transparent 48%,#4a6b86 49%,#4a6b86 52%,transparent 53%),#dcecf5; box-shadow:inset 0 0 0 3px var(--g); }
.dkc-raam b{ display:block; font-size:12px; }
.dkc-raam span{ display:block; font-size:9.5px; white-space:nowrap; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin-top:2px; }
.dkc-raam.is-kiep{ background:var(--g-tint); box-shadow:inset 0 0 0 2px var(--g); }
.dkc-raam.is-kiep span{ color:var(--g-dark); }

/* Info-blok */
.dkc-info{ display:flex; flex-direction:column; gap:6px; background:var(--bg); border-radius:12px; padding:12px 14px; font-size:13px; }
.dkc-info div{ display:flex; justify-content:space-between; gap:10px; }
.dkc-info span{ color:var(--muted); }
.dkc-info b{ font-variant-numeric:tabular-nums; }
.dkc-info-tot{ border-top:1px solid var(--line); padding-top:6px; }
.dkc-info-tot b{ color:var(--g); }

/* Kleuren */
.dkc-ktabs{ display:flex; gap:4px; padding:4px; background:var(--bg); border-radius:12px; overflow-x:auto; scrollbar-width:none; }
.dkc-ktabs::-webkit-scrollbar{ display:none; }
.dkc-ktab{ flex:1 0 auto; padding:8px 10px; border:0; background:transparent; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer; white-space:nowrap; }
.dkc-ktab.is-active{ background:#fff; color:var(--g-dark); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.dkc-swatches{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.dkc-sw{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:#fff; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; font-size:12.5px; font-weight:700; text-align:left; color:var(--ink); }
.dkc-sw:hover{ box-shadow:inset 0 0 0 1.5px #b9c2bb; }
.dkc-sw-dot{ flex:none; width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.15); display:block; }
.dkc-sw-dot--same{ background-image:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.8) 46%,rgba(255,255,255,.8) 54%,transparent 55%) !important; }
.dkc-sw.is-active{ background:var(--g-tint); box-shadow:inset 0 0 0 2px var(--g); }

/* Upload */
.dkc-drop{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; border-radius:12px; border:2px dashed #c9d3cc; background:var(--bg); color:var(--g-dark); font-weight:700; font-size:13px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s; }
.dkc-drop:hover, .dkc-drop.is-over{ background:var(--g-tint); border-color:var(--g); }
.dkc-drop input{ position:absolute; opacity:0; width:1px; height:1px; }
.dkc-drop-ic{ width:28px; height:28px; border-radius:50%; background:var(--g); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.dkc-files{ list-style:none; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:6px; }
.dkc-files li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:var(--bg); border-radius:10px; font-size:12.5px; font-weight:600; margin:0 !important; }
.dkc-files li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dkc-files li em{ font-style:normal; color:var(--muted); font-weight:500; }
.dkc-files button{ flex:none; width:26px; height:26px; border:0; border-radius:50%; background:#fff; color:#a62d22; font-size:16px; cursor:pointer; line-height:1; }
.dkc-filemsg{ margin:0 !important; font-size:12.5px; color:#a62d22; }
.dkc-filemsg:empty{ display:none; }

/* Laatste stap */
.dkc-openbox{ background:#fff9cc; border-radius:12px; padding:12px 14px; font-size:13px; color:#4f4800; }
.dkc-openbox p{ margin:4px 0 8px !important; font-size:12.5px; }
.dkc-openlist{ display:flex; flex-wrap:wrap; gap:6px; }
.dkc-openlist button{ border:0; background:#fff; border-radius:20px; padding:5px 10px; font-size:12px; font-weight:700; color:#4f4800; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.dkc-openlist button:hover{ background:var(--y); }
.dkc-summary{ border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line); }
.dkc-summary > summary{ cursor:pointer; list-style:none; padding:12px 14px; font-weight:800; font-size:13.5px; color:var(--g-dark); display:flex; justify-content:space-between; }
.dkc-summary > summary::-webkit-details-marker{ display:none; }
.dkc-summary > summary::after{ content:"+"; font-size:18px; line-height:1; }
.dkc-summary[open] > summary::after{ content:"−"; }
.dkc-sum-sec{ padding:4px 14px 10px; border-top:1px solid var(--line); }
.dkc-sum-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 0 4px; font-size:12.5px; color:var(--g); text-transform:uppercase; letter-spacing:.04em; }
.dkc-sum-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:12.5px; }
.dkc-sum-row span{ color:var(--muted); }
.dkc-sum-row b{ text-align:right; font-weight:700; }
.dkc-sum-open{ color:#8a7a00; font-weight:700; font-style:italic; }
.dkc-linkbtn{ border:0; background:none; color:var(--g); font-weight:700; font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
.dkc-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.dkc-formmsg{ margin:-8px 0 0 !important; font-size:13px; color:#a62d22; font-weight:600; text-align:center; }
.dkc-formmsg:empty{ display:none; }

/* Succes */
.dkc-success{ text-align:center; padding:26px 6px 10px; animation:dkcIn .4s ease; }
.dkc-success-ic{ width:68px; height:68px; margin:0 auto 14px; border-radius:50%; background:var(--g); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 10px var(--g-tint); }
.dkc-success-ic svg{ width:36px; height:36px; }
.dkc-success h4{ margin:0 0 10px !important; font-size:22px !important; color:var(--ink) !important; }
.dkc-success p{ margin:0 0 12px !important; color:var(--ink2); font-size:14px; }
.dkc-ref{ display:inline-block; background:var(--bg); border-radius:12px; padding:10px 18px; font-size:12px !important; color:var(--muted) !important; }
.dkc-ref b{ font-size:20px; color:var(--g-dark); letter-spacing:.02em; }
.dkc-small{ font-size:12.5px !important; color:var(--muted) !important; }
.dkc-success-cta{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .dkc-wizard{ width:360px; } }
@media (max-width:820px){
	.dkc{ flex-direction:column; gap:12px; }
	.dkc-stage{ order:1; height:46vh; min-height:300px; border-radius:16px; }
	.dkc-wizard{ order:2; width:auto; height:auto; min-height:0; border-radius:16px; }
	.dkc-step-body{ overflow:visible; }
	.dkc-nav{ position:sticky; bottom:0; z-index:5; box-shadow:0 -6px 16px rgba(0,0,0,.06); }
	.dkc-topbar{ top:10px; left:10px; right:10px; gap:6px; }
	.dkc-viewtab{ padding:6px 9px; font-size:12px; }
	.dkc-topctl{ margin-left:0; }
	.dkc-hint3d{ display:none; }
	.dkc-camctl{ right:10px; bottom:10px; flex-direction:row; }
	.dkc-camctl button{ width:34px; height:34px; }
}
@media (max-width:420px){
	.dkc-step-head, .dkc-step-body{ padding-left:16px; padding-right:16px; }
	.dkc-wiz-head, .dkc-steps, .dkc-nav{ padding-left:16px; padding-right:16px; }
	.dkc-progress{ margin:0 16px; }
	.dkc-cards--2{ grid-template-columns:1fr; }
	.dkc-cards--2.dkc-cards--compact{ grid-template-columns:1fr 1fr; }
	.dkc-swatches{ grid-template-columns:1fr; }
	.dkc-grid2{ grid-template-columns:1fr; }
	.dkc-grid2--wide{ grid-template-columns:1fr 84px; }
	.dkc-grid2--pc{ grid-template-columns:110px 1fr; }
	.dkc-btn-next{ min-width:0; flex:1; }
}
@media (prefers-reduced-motion:reduce){
	.dkc *, .dkc *::before{ animation:none !important; transition:none !important; }
}

/* ---------- v5: kozijnen bewerken ---------- */
.dkc-kozijn{ border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line); padding:10px 12px 12px; margin-top:8px; }
.dkc-kozijn.is-warn{ box-shadow:inset 0 0 0 2px #e0b400; background:#fffdf0; }
.dkc-kozijn-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.dkc-kozijn-head em{ font-style:normal; color:var(--muted); font-size:12px; margin-left:4px; }
.dkc-mini{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink2); }
.dkc-mini button{ width:28px; height:28px; border:0; border-radius:8px; background:var(--bg); color:var(--g); font-size:17px; font-weight:800; cursor:pointer; line-height:1; }
.dkc-mini button:hover{ background:var(--g-tint); }
.dkc-kozijn .dkc-ramen{ gap:6px; }
.dkc-kozijn .dkc-raam{ width:auto; flex:1 1 60px; min-width:58px; }
.dkc-raam b{ font-size:11px; }
.dkc-raam.is-kiep.dir-links i{ box-shadow:inset 6px 0 0 -2px var(--g), inset 0 0 0 3px var(--g); }
.dkc-raam.is-kiep.dir-rechts i{ box-shadow:inset -6px 0 0 -2px var(--g), inset 0 0 0 3px var(--g); }
.dkc-btn-small{ padding:9px 12px; font-size:12.5px; align-self:flex-start; }

/* ---------- v5: woning (Kadaster / 3D BAG) ---------- */
.dkc-woning-intro{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; background:var(--bg); }
.dkc-woning-intro p{ margin:2px 0 0 !important; font-size:12.5px; color:var(--muted); line-height:1.45; }
.dkc-woning-intro b{ font-size:14px; }
.dkc-woning-ic{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--g-tint); color:var(--g); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; }
.dkc-grid2--adres{ grid-template-columns:1.3fr 1fr 0.7fr; }
.dkc-btn-zoek{ width:100%; padding:14px; background:var(--g); color:#fff; box-shadow:0 4px 14px rgba(0,109,45,.25); }
.dkc-btn-zoek:hover{ background:var(--g-dark); }
.dkc-btn-zoek:disabled{ opacity:.75; cursor:progress; }
.dkc-btn-zoek.is-busy::before{ content:""; width:15px; height:15px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:dkcSpin .8s linear infinite; }
.dkc-skip{ align-self:center; font-size:13.5px !important; text-decoration:none !important; padding:6px 0 !important; color:var(--ink2) !important; }
.dkc-skip:hover{ color:var(--g) !important; }
@media (max-width:420px){ .dkc-grid2--adres{ grid-template-columns:1fr 1fr 0.8fr; } }
.dkc-dakladen{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:var(--g-tint); color:var(--g-dark); font-size:13px; font-weight:700; }
.dkc-spin{ flex:none; width:16px; height:16px; border-radius:50%; border:2.5px solid var(--g-line); border-top-color:var(--g); animation:dkcSpin .8s linear infinite; }

/* v5.5 — breedte per kozijn, kleurtabs over meerdere regels */
.dkc .dkc-kozijn-maat{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px; font-size:13px; font-weight:700; color:var(--ink2); }
.dkc .dkc-kozijn-maat label{ display:flex; align-items:center; gap:8px; }
.dkc .dkc-kozijn-maat .dkc-numin{ width:96px; }
.dkc .dkc-kozijn-maat .dkc-numin:disabled{ background:var(--bg); color:var(--muted); }
.dkc .dkc-kozijn-maat em{ font-style:normal; font-weight:600; font-size:12px; color:var(--muted); }
.dkc .dkc-ktabs{ flex-wrap:wrap; }
.dkc .dkc-ktab{ flex:1 1 auto; }

/* v5.5.1 — compleet logo linksboven in het 3D-vlak, onder de weergaveknoppen */
.dkc .dkc-stagelogo{ position:absolute; top:70px; left:18px; z-index:5; width:170px; height:auto; pointer-events:none; filter:drop-shadow(0 1px 2px rgba(255,255,255,.8)); }
@media (max-width:820px){ .dkc .dkc-stagelogo{ top:58px; left:12px; width:118px; } }

/* v5.5.1 — tekeningen zoomen; ruimte voor het logo linksboven */
.dkc .dkc-svgwrap{ padding-top:136px; }
.dkc .dkc-zoomin{ min-width:100%; }
.dkc .dkc-zoomin svg{ max-width:none; width:100%; }
.dkc .dkc-svgwrap.is-zoom{ cursor:grab; }
.dkc .dkc-svgwrap.is-sleep{ cursor:grabbing; user-select:none; }
.dkc .dkc-tekzoom{ z-index:7; }
@media (max-width:820px){ .dkc .dkc-svgwrap{ padding-top:108px; } }

/* v5.6.1 — opnieuw beginnen + bevestigingspop-up */
.dkc .dkc-reset-rij{ flex-basis:100%; display:flex; justify-content:flex-end; }
.dkc .dkc-reset{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:0; border-radius:12px; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 2px 10px rgba(0,0,0,.08); color:var(--ink2); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
.dkc .dkc-reset:hover{ background:#fff; color:#c0392b; }
.dkc .dkc-reset svg{ width:15px; height:15px; }
.dkc .dkc-pop{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,30,18,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.dkc .dkc-pop[hidden]{ display:none; }
.dkc .dkc-pop__kaart{ width:100%; max-width:420px; padding:26px 24px 22px; background:#fff; border-radius:18px; border-top:5px solid var(--y); box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; animation:dkc-pop-in .18s ease-out; }
.dkc .dkc-pop__ic{ width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:#fff4d6; color:#a86b00; font-size:24px; font-weight:900; line-height:48px; }
.dkc .dkc-pop h4{ margin:0 0 8px; font-size:20px; color:var(--ink); }
.dkc .dkc-pop p{ margin:0 0 20px; color:var(--ink2); font-size:14.5px; line-height:1.5; }
.dkc .dkc-pop__knoppen{ display:flex; gap:10px; }
.dkc .dkc-pop__knoppen .dkc-btn{ flex:1; }
.dkc .dkc-pop__ja{ background:#c0392b; color:#fff; }
.dkc .dkc-pop__ja:hover{ background:#a93226; }
@keyframes dkc-pop-in{ from{ transform:translateY(8px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
@media (max-width:820px){ .dkc .dkc-reset{ padding:7px 11px; font-size:12px; } }

.dkc .dkc-wiz-head{ gap:10px; }
.dkc .dkc-wiz-name, .dkc .dkc-step-count{ white-space:nowrap; }
.dkc .dkc-wiz-name{ overflow:hidden; text-overflow:ellipsis; min-width:0; }

.dkc .dkc-tekzoom[hidden]{ display:none; }

/* Desktop: stappen als nette tijdlijn (bolletjes met lijnen), naam bij hover */
@media (min-width:821px){
	.dkc .dkc-progress{ display:none; }
	.dkc .dkc-steps{ gap:0; padding:14px 20px 10px; overflow:visible; align-items:center; }
	.dkc .dkc-stepchip{ flex:1 1 0; min-width:0; padding:0; gap:0; background:none !important; border-radius:0; position:relative; }
	.dkc .dkc-stepchip:last-child{ flex:none; }
	.dkc .dkc-stepchip::after{ content:''; flex:1; height:2px; margin:0 3px; border-radius:2px; background:var(--line); transition:background .3s; }
	.dkc .dkc-stepchip:last-child::after{ display:none; }
	.dkc .dkc-stepchip.is-done::after{ background:var(--g); }
	.dkc .dkc-stepchip span{ flex:none; width:26px; height:26px; font-size:12px; background:#fff; color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line); transition:transform .15s, box-shadow .15s, background .15s; }
	.dkc .dkc-stepchip:hover span{ box-shadow:inset 0 0 0 1.5px var(--g); color:var(--g); }
	.dkc .dkc-stepchip.is-done span{ background:var(--g); color:#fff; box-shadow:none; }
	.dkc .dkc-stepchip.is-current span{ background:var(--y); color:var(--ink); box-shadow:0 0 0 2px var(--g), 0 0 0 6px var(--g-tint); transform:scale(1.08); }
	.dkc .dkc-stepchip em{ position:absolute; top:calc(100% + 8px); left:13px; transform:translate(-50%,-3px); z-index:20; white-space:nowrap; padding:4px 8px; border-radius:6px; background:var(--ink); color:#fff; font-size:11px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; }
	.dkc .dkc-stepchip:hover em, .dkc .dkc-stepchip:focus-visible em{ opacity:1; transform:translate(-50%,0); }
	.dkc .dkc-stepchip:first-child em{ left:0; transform:none; }
	.dkc .dkc-stepchip:last-child em{ left:auto; right:0; transform:none; }
}

/* 5.8.0: maten-knop, raambreedtes per raam */
.dkc .dkc-reset-rij{ gap:6px; }
.dkc .dkc-matenknop{ color:var(--ink2); }
.dkc .dkc-matenknop.is-on{ color:var(--g); }
.dkc .dkc-matenknop:hover{ color:var(--g); }
.dkc .dkc-camctl [data-cam=dims]{ display:none; }
.dkc .dkc-raamcel{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dkc .dkc-raamcel .dkc-raam{ width:100%; }
.dkc .dkc-raam.is-warn{ box-shadow:inset 0 0 0 2px #e0b400; background:#fffdf0; }
.dkc .dkc-raammaat{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }
.dkc .dkc-raammaat input{ width:86px; min-height:36px; padding:4px 8px; text-align:right; font-weight:800; font-size:14px; }
.dkc .dkc-raammaat.is-vast input{ box-shadow:inset 0 0 0 2px var(--g); }
.dkc .dkc-kozijn .dkc-raamcel{ flex:1 1 64px; min-width:64px; }
.dkc .dkc-raammaat{ gap:4px; }
.dkc .dkc-raammaat input{ width:100%; min-width:0; max-width:96px; padding:4px 6px; }

/* ---------- Bekijk in AR ---------- */
.dkc .dkc-arknop{ position:absolute; left:14px; bottom:14px; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border:0; border-radius:999px; background:linear-gradient(135deg,#00843a 0%,var(--g) 55%,var(--g-dark) 100%); color:#fff; font-size:13.5px; font-weight:800; letter-spacing:.01em; cursor:pointer; box-shadow:0 6px 18px rgba(0,82,31,.35),inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .15s,box-shadow .15s; }
.dkc .dkc-arknop svg{ width:22px; height:22px; flex:none; }
.dkc .dkc-arknop:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(0,82,31,.42),inset 0 0 0 1px rgba(255,255,255,.12); }
.dkc .dkc-arknop::after{ content:""; position:absolute; inset:-4px; border-radius:inherit; box-shadow:0 0 0 2px rgba(0,109,45,.35); animation:dkc-ar-puls 2.6s ease-out infinite; pointer-events:none; }
@keyframes dkc-ar-puls{ 0%{ opacity:.9; transform:scale(.96); } 70%,100%{ opacity:0; transform:scale(1.12); } }
.dkc-canvaswrap.has-ar .dkc-hint3d{ display:none; }

.dkc .dkc-ar{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,30,18,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:background .2s,backdrop-filter .2s; }
.dkc .dkc-ar[hidden]{ display:none; }
.dkc .dkc-ar.is-open{ background:rgba(10,30,18,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.dkc .dkc-ar__kaart{ position:relative; width:100%; max-width:440px; padding:22px 20px 20px; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.28); transform:translateY(16px); opacity:0; transition:transform .22s ease-out,opacity .22s; }
.dkc .dkc-ar.is-open .dkc-ar__kaart{ transform:none; opacity:1; }
.dkc .dkc-ar__sluit{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:var(--bg); color:var(--ink2); font-size:22px; line-height:1; cursor:pointer; }
.dkc .dkc-ar__sluit:hover{ background:#eceee9; }
.dkc .dkc-ar__kop{ display:flex; gap:12px; align-items:flex-start; padding-right:36px; margin-bottom:16px; }
.dkc .dkc-ar__badge{ flex:none; width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#00843a,var(--g-dark)); color:#fff; box-shadow:0 6px 14px rgba(0,82,31,.3); }
.dkc .dkc-ar__badge svg{ width:26px; height:26px; }
.dkc .dkc-ar h4{ margin:2px 0 4px; font-size:18px; line-height:1.25; color:var(--ink); }
.dkc .dkc-ar__kop p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--muted); }
.dkc .dkc-ar__stap{ display:flex; flex-direction:column; gap:10px; }
.dkc .dkc-ar__stap[hidden]{ display:none; }
.dkc .dkc-ar__optie{ display:flex; align-items:center; gap:14px; width:100%; padding:14px; border:0; border-radius:16px; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line); text-align:left; cursor:pointer; color:var(--ink); transition:box-shadow .15s,background .15s,transform .15s; }
.dkc .dkc-ar__optie:hover, .dkc .dkc-ar__optie:focus-visible{ background:var(--g-tint); box-shadow:inset 0 0 0 2px var(--g); outline:none; }
.dkc .dkc-ar__optie:active{ transform:scale(.99); }
.dkc .dkc-ar__ic{ flex:none; width:58px; height:58px; border-radius:14px; background:#fff; color:var(--g); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.dkc .dkc-ar__ic svg{ width:40px; height:40px; }
.dkc .dkc-ar__tekst{ flex:1; min-width:0; }
.dkc .dkc-ar__tekst b{ display:block; font-size:15.5px; margin-bottom:2px; color:var(--g-dark); }
.dkc .dkc-ar__tekst span{ display:block; font-size:12.8px; line-height:1.45; color:var(--ink2); }
.dkc .dkc-ar__pijl{ flex:none; font-size:26px; line-height:1; color:var(--g); font-weight:300; }
.dkc .dkc-ar__stap[data-fase=bezig], .dkc .dkc-ar__stap[data-fase=klaar], .dkc .dkc-ar__stap[data-fase=fout]{ align-items:center; text-align:center; padding:10px 4px 2px; }
.dkc .dkc-ar__stap > b{ font-size:16px; color:var(--ink); }
.dkc .dkc-ar__stap > span{ font-size:13.5px; line-height:1.5; color:var(--ink2); max-width:340px; }
.dkc .dkc-ar__spin{ width:44px; height:44px; border-radius:50%; border:4px solid var(--g-tint); border-top-color:var(--g); animation:dkcSpin .8s linear infinite; margin-bottom:4px; }
.dkc .dkc-ar__klaar{ width:48px; height:48px; border-radius:50%; background:var(--g); color:#fff; font-size:24px; font-weight:900; line-height:48px; }
.dkc .dkc-ar__klaar.is-fout{ background:#fff4d6; color:#a86b00; }
.dkc .dkc-ar [data-role=ar-open]{ width:100%; margin-top:6px; }
.dkc .dkc-ar__open{ gap:10px; }
.dkc .dkc-ar__open img{ position:absolute; width:1px; height:1px; opacity:0; }
.dkc .dkc-ar__open svg{ width:22px; height:22px; }
.dkc .dkc-ar__terug{ border:0; background:none; color:var(--g-dark); font-size:13px; font-weight:700; cursor:pointer; padding:6px; }
.dkc .dkc-ar__stap[data-fase=fout] .dkc-btn{ width:100%; margin-top:6px; }
@media (max-width:820px){
	.dkc .dkc-arknop{ left:10px; bottom:10px; padding:9px 14px 9px 10px; font-size:13px; }
	.dkc .dkc-ar{ align-items:flex-end; padding:0; }
	.dkc .dkc-ar__kaart{ max-width:none; border-radius:22px 22px 0 0; padding:22px 18px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%); opacity:1; }
	.dkc .dkc-ar__kaart::before{ content:""; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:#d9dcd6; }
}
@media (prefers-reduced-motion:reduce){ .dkc .dkc-arknop::after{ animation:none; } }