/*
 * DHB Camera Configurator
 * Styling volgens de DHB-huisstijl: Montserrat voor koppen en labels,
 * Poppins voor bodytekst, oranje als enige accent, warme grijstinten.
 */

/* ============================================================
   1. Tokens en basis
   ============================================================ */

.dhb-cc{
	/* merk */
	--oranje:#FF4400;
	--oranje-hover:#E63D00;
	--oranje-soft:#FFF0EA;
	--ink:#161616;

	/* ondergrond */
	--bg:#F5F4F2;
	--card:#FFFFFF;
	--veld:#FAFAF8;
	--line:#E9E7E3;
	--line-donker:#D6D3CE;
	--muted:#7A7671;

	/* semantisch */
	--groen:#15803D;   --groen-bg:#E4F5E9;
	--amber:#B45309;   --amber-bg:#FCF0DA;
	--rood:#D92D20;    --rood-bg:#FDEBE9;
	--blauw:#1D4ED8;   --blauw-bg:#E8EEFC;
	--grijs:#57534E;   --grijs-bg:#F0EEEB;

	/* vormtaal */
	--r:14px;
	--r-tegel:12px;
	--r-knop:10px;
	--shadow:0 1px 2px rgba(22,22,22,.05),0 8px 24px -12px rgba(22,22,22,.10);
	--shadow-op:0 2px 4px rgba(22,22,22,.06),0 14px 32px -14px rgba(22,22,22,.16);

	background:var(--bg);
	color:var(--ink);
	font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	font-size:14px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}

.dhb-cc *,
.dhb-cc *::before,
.dhb-cc *::after{ box-sizing:border-box; }

.dhb-cc [hidden]{ display:none !important; }

.dhb-cc h1,.dhb-cc h2,.dhb-cc h3,.dhb-cc h4{
	font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	color:var(--ink);
	margin:0;
	letter-spacing:-.02em;
	line-height:1.16;
}

.dhb-cc p{ margin:0; }
.dhb-cc ul{ margin:0; padding:0; list-style:none; }
.dhb-cc b,.dhb-cc strong{ font-weight:600; }
.dhb-cc a{ color:var(--ink); text-underline-offset:3px; }
.dhb-cc img{ max-width:100%; }
.dhb-cc button{ font-family:inherit; cursor:pointer; }
.dhb-cc input,.dhb-cc textarea{ font-family:'Poppins',sans-serif; }

.dhb-cc .dhb-ico{ width:15px; height:15px; flex:none; }

.dhb-wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }

/* Koppen boven een sectie */
.dhb-kop{ position:relative; text-align:center; max-width:720px; margin:0 auto 26px; }
.dhb-kop h1{ font-size:clamp(26px,3.4vw,38px); font-weight:800; }
.dhb-kop h2{ font-size:clamp(22px,2.7vw,31px); font-weight:800; }
.dhb-eyebrow{
	display:inline-block; font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; color:var(--oranje);
	background:var(--oranje-soft); border-radius:99px; padding:5px 11px; margin-bottom:11px;
}
.dhb-lead{ color:var(--muted); font-size:15px; margin-top:9px; }
.dhb-lead em{ font-style:normal; color:var(--ink); font-weight:500; }

/* Het schildmotief, precies één keer per scherm */
.pagehead::before{
	content:""; position:absolute; right:-30px; top:-56px; width:180px; height:180px;
	pointer-events:none; opacity:.05;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 110"><path d="M50 4 92 26v40L50 106 8 66V26Z" fill="none" stroke="%23161616" stroke-width="6"/></svg>') no-repeat center/contain;
}

/* ============================================================
   2. Knoppen en chips
   ============================================================ */

.dhb-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; line-height:1;
	border-radius:var(--r-knop); padding:13px 18px; border:1px solid transparent;
	text-decoration:none; white-space:nowrap; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.dhb-btn:focus-visible{ outline:2px solid var(--oranje); outline-offset:2px; }
.dhb-btn-primair{ background:var(--oranje); color:#fff; }
.dhb-btn-primair:hover{ background:var(--oranje-hover); color:#fff; }
.dhb-btn-tweede{ background:var(--card); color:var(--ink); border-color:var(--line); }
.dhb-btn-tweede:hover{ border-color:var(--line-donker); background:var(--veld); }
.dhb-btn-klein{ padding:10px 14px; font-size:12px; }
.dhb-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.dhb-chip{
	display:inline-flex; align-items:center; gap:7px; border-radius:99px;
	background:var(--card); border:1px solid var(--line); color:var(--ink);
	font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600; padding:7px 13px;
}
.dhb-chip .dhb-ico{ width:14px; height:14px; color:var(--oranje); }

/* ============================================================
   3. Hero
   ============================================================ */

.dhb-hero{ padding:34px 0 8px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:34px; align-items:center; }
.hero-tekst h1{ font-size:clamp(27px,3.5vw,40px); font-weight:800; margin-bottom:10px; }
.hero-tekst .dhb-lead{ max-width:540px; }

.hero-actie{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:22px 0 14px; }
.hero-prijs{ display:flex; flex-direction:column; line-height:1.1; }
.hero-prijs .vanaf{
	font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.hero-prijs .bedrag{ font-family:'Montserrat',sans-serif; font-size:30px; font-weight:800; letter-spacing:-.02em; }
.hero-prijs .hero-van{ font-size:12px; color:var(--muted); }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

.hero-incl{
	display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink);
	background:var(--oranje-soft); border-radius:var(--r-knop); padding:10px 14px; width:fit-content;
}
.hero-incl .dhb-ico{ color:var(--oranje); stroke-width:2.6; }

.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.hp-kaart{
	background:var(--card); border:1px solid var(--line); border-radius:var(--r);
	box-shadow:var(--shadow); padding:18px;
}
.hp-kop{
	display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif;
	font-size:13px; font-weight:700; margin-bottom:16px;
}
.hp-ico{
	width:30px; height:30px; flex:none; border-radius:9px; background:var(--oranje-soft);
	color:var(--oranje); display:grid; place-items:center;
}
.hp-strook{
	display:flex; align-items:center; justify-content:space-between; gap:6px;
	background:var(--veld); border:1px solid var(--line); border-radius:var(--r-tegel); padding:12px 10px;
}
.hp-item{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; flex:1; }
.hp-item i{
	font-style:normal; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
	letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center;
}
.hp-item .dhb-camsvg{ width:46px; height:38px; }
.hp-blok{ width:40px; height:38px; display:grid; place-items:center; color:var(--ink); }
.hp-blok .dhb-ico{ width:22px; height:22px; }
.hp-plus{ color:var(--line-donker); font-weight:700; flex:none; }
.hp-usps{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.hp-usps li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; }
.hp-usps .dhb-ico{ color:var(--oranje); stroke-width:2.6; margin-top:3px; }

/* ============================================================
   4. Configurator-raamwerk
   ============================================================ */

.dhb-cfg{ padding:30px 0 46px; }
.cfg-layout{ display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:26px; align-items:start; }
.cfg-steps{ position:relative; display:flex; flex-direction:column; gap:18px; min-width:0; }

/* De verticale rail tussen de stapnummers */
.cfg-steps::before{
	content:""; position:absolute; left:41px; top:46px; bottom:46px; width:2px;
	background:var(--line); z-index:0;
}

.cfg-stap{
	position:relative; z-index:1; background:var(--card); border:1px solid var(--line);
	border-radius:var(--r); box-shadow:var(--shadow); padding:22px 24px; min-width:0;
	transition:border-color .2s ease,box-shadow .2s ease;
}
.cfg-stap.in-beeld{ border-color:var(--line-donker); box-shadow:var(--shadow-op); }

.cfg-kop{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.cfg-nr{
	width:34px; height:34px; flex:none; border-radius:50%; background:var(--ink); color:#fff;
	font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; display:grid; place-items:center;
	box-shadow:0 0 0 5px var(--card); position:relative; z-index:2; transition:background .2s ease;
}
.cfg-stap.in-beeld .cfg-nr{ background:var(--oranje); }
.cfg-titel{ font-family:'Montserrat',sans-serif; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.cfg-sub{ font-size:12.5px; color:var(--muted); margin-top:1px; }

/* ============================================================
   5. Keuzekaarten (vorm en kwaliteit)
   ============================================================ */

.niveaus{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }

.niveau{
	position:relative; display:flex; flex-direction:column; cursor:pointer;
	background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-tegel);
	padding:18px 16px 16px; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.niveau:hover{ border-color:var(--line-donker); box-shadow:var(--shadow); transform:translateY(-2px); }
.niveau.gekozen{ border-color:var(--oranje); box-shadow:0 0 0 3px var(--oranje-soft); }
.niveau input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.niveau:focus-within{ box-shadow:0 0 0 3px var(--oranje-soft); border-color:var(--oranje); }

.niveau-badge{
	position:absolute; top:-10px; left:14px; display:inline-flex; align-items:center; gap:5px;
	border-radius:99px; padding:4px 10px; font-family:'Montserrat',sans-serif; font-size:10px;
	font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.niveau-badge .dhb-ico{ width:11px; height:11px; }
.niveau-badge.grijs{ background:var(--grijs-bg); color:var(--grijs); }
.niveau-badge.oranje{ background:var(--oranje); color:#fff; }
.niveau-badge.blauw{ background:var(--blauw-bg); color:var(--blauw); }
.niveau-badge.groen{ background:var(--groen-bg); color:var(--groen); }

.niveau-foto{
	height:96px; display:grid; place-items:center; margin:6px 0 10px;
	background:linear-gradient(160deg,#FBFAF8,#F0EEEB); border-radius:var(--r-knop);
}
.niveau-foto img{ max-height:88px; width:auto; object-fit:contain; }
.niveau-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.niveau-naam{ font-family:'Montserrat',sans-serif; font-size:15px; font-weight:700; }
.niveau-mp{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.niveau-sub{ font-size:12px; color:var(--muted); margin:8px 0 12px; flex:1; }

.niveau-radio{
	width:20px; height:20px; flex:none; border-radius:50%; border:1.5px solid var(--line-donker);
	display:grid; place-items:center; background:var(--card); transition:border-color .15s ease;
}
.niveau-radio span{ width:10px; height:10px; border-radius:50%; background:transparent; transition:background .15s ease; }
.niveau.gekozen .niveau-radio{ border-color:var(--oranje); }
.niveau.gekozen .niveau-radio span{ background:var(--oranje); }

.niveau-prijs .bedrag{ font-family:'Montserrat',sans-serif; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.niveau-prijs .bedrag small{ font-size:11px; font-weight:600; color:var(--muted); }
.niveau-prijs .inbegrepen{ font-size:16px; color:var(--groen); }
.niveau-richt{ font-size:10.5px; color:var(--muted); margin-top:3px; }
.niveau-note{ font-size:11.5px; color:var(--muted); margin-top:14px; }

/* Camera-illustraties */
.dhb-camsvg{ width:100%; height:88px; }
.dhb-camsvg .c-body{ fill:#F0EEEB; stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round; }
.dhb-camsvg .c-basis,.dhb-camsvg .c-kap{ fill:#E4E1DC; stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round; }
.dhb-camsvg .c-lens{ fill:var(--ink); }
.dhb-camsvg .c-glas{ fill:#3B3B3B; }
.dhb-camsvg .c-vonk{ fill:#FFFFFF; opacity:.55; }
.dhb-camsvg .c-ir{ fill:var(--oranje); }
.dhb-camsvg .c-lijn,.dhb-camsvg .c-beugel,.dhb-camsvg .c-draai{
	fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round;
}
.niveau.gekozen .dhb-camsvg .c-body{ fill:var(--oranje-soft); }

/* ============================================================
   6. Stap 2: aantal, kleur, maatwerk
   ============================================================ */

.aantal-bar{
	display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--veld);
	border:1px solid var(--line); border-radius:var(--r-tegel); padding:13px 18px; margin-bottom:18px;
}
.aantal-label{
	display:inline-flex; align-items:center; gap:11px; font-family:'Montserrat',sans-serif;
	font-size:14px; font-weight:700;
}
.aantal-vorm{
	width:52px; height:46px; flex:none; display:grid; place-items:center; background:var(--card);
	border:1px solid var(--line); border-radius:11px; padding:3px;
}
.aantal-vorm .dhb-camsvg{ height:38px; }
.aantal-vorm img{ max-height:38px; width:auto; object-fit:contain; }
.teller{
	display:inline-flex; align-items:center; gap:4px; background:var(--card);
	border:1px solid var(--line); border-radius:var(--r-tegel); padding:4px;
}
.teller-knop{
	width:36px; height:36px; border:none; border-radius:9px; background:var(--veld); color:var(--ink);
	font-size:21px; font-weight:600; line-height:1; display:grid; place-items:center;
	transition:background .15s ease,color .15s ease;
}
.teller-knop:hover:not(:disabled){ background:var(--ink); color:#fff; }
.teller-knop:disabled{ opacity:.35; cursor:not-allowed; }
.teller-waarde{
	min-width:46px; text-align:center; font-family:'Montserrat',sans-serif; font-size:19px;
	font-weight:800; font-variant-numeric:tabular-nums;
}
.aantal-hint{ font-size:11.5px; color:var(--muted); }

.keuzeblok{ margin-bottom:20px; }
.keuzeblok:last-child{ margin-bottom:0; }
.keuzeblok-kop{
	font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.11em;
	text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.kb-sub{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--muted); opacity:.85; }

.kleur-groep{ display:flex; gap:10px; flex-wrap:wrap; }
.kleur-optie{
	display:inline-flex; align-items:center; gap:9px; cursor:pointer; background:var(--card);
	border:1.5px solid var(--line); border-radius:99px; padding:8px 16px 8px 10px;
	font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:600;
	transition:border-color .15s ease,background .15s ease;
}
.kleur-optie input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.kleur-optie:hover{ border-color:var(--line-donker); }
.kleur-optie.gekozen{ border-color:var(--oranje); background:var(--oranje-soft); }
.kleur-swatch{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line-donker); }
.kleur-swatch.wit{ background:#fff; }
.kleur-swatch.zwart{ background:#232323; border-color:#232323; }

.maatwerk{
	display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
	background:var(--amber-bg); border:1px solid rgba(180,83,9,.18); border-radius:var(--r-tegel); padding:14px 16px;
}
.maatwerk .mw-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.maatwerk b{ font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700; color:var(--amber); }
.maatwerk span span,.maatwerk .mw-txt span{ font-size:12.5px; color:var(--ink); }

/* ============================================================
   7. Stap 3: 'Zie het verschil'
   ============================================================ */

.kdemo{
	margin-top:16px; background:var(--veld); border:1px solid var(--line);
	border-radius:var(--r-tegel); padding:14px; --dhb-blur:0px;
}
.kdemo-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:11px; }
.kdemo-top .t{
	display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif;
	font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.kdemo-top .t .dhb-ico{ color:var(--oranje); }
.kdemo-res{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.kdemo-res b{ font-family:'Montserrat',sans-serif; color:var(--ink); }

.kdemo-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; align-items:stretch; }
.kdemo-stage{
	position:relative; border-radius:var(--r-knop); overflow:hidden; background:var(--ink);
	aspect-ratio:16/10; border:1px solid var(--line);
}
.kdemo-foto{ width:100%; height:100%; object-fit:cover; display:block; }
.kdemo-mp{
	position:absolute; left:9px; top:9px; z-index:3; background:rgba(22,22,22,.72); color:#fff;
	font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em;
	border-radius:99px; padding:4px 9px; backdrop-filter:blur(3px);
}
.kdemo-zoombox{
	position:absolute; left:54%; top:57%; width:15%; height:17%; z-index:2;
	border:2px solid var(--oranje); border-radius:4px; box-shadow:0 0 0 999px rgba(22,22,22,.28);
	transition:all .25s ease;
}
.kdemo-loep{
	position:absolute; right:9px; bottom:9px; z-index:3; width:47%; aspect-ratio:4/3;
	border-radius:var(--r-knop); border:2px solid var(--oranje); background-repeat:no-repeat;
	background-size:520% 520%; background-position:60% 64%;
	filter:blur(var(--dhb-blur)); transition:filter .28s ease;
	box-shadow:0 10px 26px -10px rgba(22,22,22,.55);
}
.loeplabel{
	position:absolute; left:6px; top:6px; display:inline-flex; align-items:center; gap:5px;
	background:rgba(22,22,22,.74); color:#fff; border-radius:99px; padding:3px 8px;
	font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; filter:blur(0);
}
.loeplabel .dhb-ico{ width:11px; height:11px; }

.kdemo-side{ display:flex; flex-direction:column; gap:11px; justify-content:center; }
.kdemo-oordeel{
	display:inline-flex; align-items:center; gap:9px; border-radius:99px; padding:7px 13px;
	font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; width:fit-content;
}
.kdemo-oordeel .vico{ display:grid; place-items:center; }
.kdemo-oordeel .dhb-ico{ width:13px; height:13px; stroke-width:2.8; }
.kdemo-oordeel.basis{ background:var(--grijs-bg); color:var(--grijs); }
.kdemo-oordeel.matig{ background:var(--blauw-bg); color:var(--blauw); }
.kdemo-oordeel.goed{ background:var(--groen-bg); color:var(--groen); }

.kdemo-meter .lbl{
	display:flex; justify-content:space-between; font-family:'Montserrat',sans-serif;
	font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--muted); margin-bottom:6px;
}
.kdemo-meter .lbl b{ color:var(--ink); }
.kdemo-bar{ height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
.kdemo-bar span{ display:block; height:100%; border-radius:99px; background:var(--oranje); width:0; transition:width .3s ease; }
.kdemo-hint{ font-size:11.5px; color:var(--muted); }

/* ============================================================
   8. Stap 4: nachtzicht
   ============================================================ */

.nz-groep{ display:flex; flex-direction:column; gap:9px; }
.nz-optie{
	position:relative; display:flex; align-items:center; gap:13px; cursor:pointer;
	background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-tegel);
	padding:11px 14px; transition:border-color .15s ease,box-shadow .15s ease;
}
.nz-optie:hover{ border-color:var(--line-donker); }
.nz-optie.gekozen{ border-color:var(--oranje); box-shadow:0 0 0 3px var(--oranje-soft); }
.nz-optie input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }

.nz-demo{
	width:66px; height:48px; flex:none; border-radius:9px; overflow:hidden; background:var(--ink);
	position:relative; border:1px solid var(--line);
}
.nz-demo img{ width:100%; height:100%; object-fit:cover; display:block; }
.nz-optie[data-nz="infrarood"] .nz-demo img{ filter:grayscale(1) brightness(.6) contrast(1.2); }
.nz-optie[data-nz="starlight"] .nz-demo img{ filter:sepia(.5) saturate(.75) brightness(.7) contrast(1.05); }
.nz-optie[data-nz="fullcolor"] .nz-demo img{ filter:brightness(.78) saturate(1.05); }
.nz-optie[data-nz="pro"] .nz-demo img{ filter:brightness(.9) saturate(1.15); }
.nz-optie[data-nz="pro"] .nz-demo::after{
	content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.4),transparent 62%);
}

.nz-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.nz-body .t{
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700;
}
.nz-body .d{ font-size:12px; color:var(--muted); }
.nz-badge{
	border-radius:99px; padding:3px 9px; font-family:'Montserrat',sans-serif; font-size:9.5px;
	font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.nz-badge.grijs{ background:var(--grijs-bg); color:var(--grijs); }
.nz-badge.oranje{ background:var(--oranje); color:#fff; }
.nz-badge.groen{ background:var(--groen-bg); color:var(--groen); }
.nz-badge.blauw{ background:var(--blauw-bg); color:var(--blauw); }

.nz-prijs{
	flex:none; text-align:right; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700;
	display:flex; flex-direction:column; line-height:1.2;
}
.nz-prijs small{ font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:400; color:var(--muted); }
.nz-radio{
	width:20px; height:20px; flex:none; border-radius:50%; border:1.5px solid var(--line-donker);
	display:grid; place-items:center;
}
.nz-radio span{ width:10px; height:10px; border-radius:50%; background:transparent; }
.nz-optie.gekozen .nz-radio,.opslag-optie.gekozen .nz-radio{ border-color:var(--oranje); }
.nz-optie.gekozen .nz-radio span,.opslag-optie.gekozen .nz-radio span{ background:var(--oranje); }

/* Dag- en nachtdemo */
.nachtdemo{ margin-top:16px; background:var(--veld); border:1px solid var(--line); border-radius:var(--r-tegel); padding:14px; }
.nd-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:11px; }
.nd-top .t{
	display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif;
	font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.nd-top .t .dhb-ico{ color:var(--oranje); }
.nd-seg{ display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px; }
.nd-seg-btn{
	border:none; background:transparent; border-radius:99px; padding:7px 13px;
	font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:600; color:var(--muted);
	transition:background .15s ease,color .15s ease;
}
.nd-seg-btn.actief{ background:var(--ink); color:#fff; }

.nd-stage{
	position:relative; border-radius:var(--r-knop); overflow:hidden; background:var(--ink);
	aspect-ratio:21/9; border:1px solid var(--line);
}
.nd-foto{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .4s ease; }
.nachtdemo[data-staat="dag"] .nd-foto{ filter:none; }
.nachtdemo[data-staat="nacht"] .nd-foto{ filter:grayscale(1) brightness(.42) contrast(1.3); }
.nachtdemo[data-staat="pro"] .nd-foto{ filter:brightness(.72) saturate(1.12) contrast(1.05); }
.nd-glow{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.nachtdemo[data-staat="pro"] .nd-glow{
	opacity:1; background:radial-gradient(circle at 50% 8%,rgba(255,244,230,.42),transparent 58%);
}
.nd-stempel{
	position:absolute; left:9px; top:9px; z-index:2; display:inline-flex; align-items:center; gap:7px;
	background:rgba(22,22,22,.72); color:#fff; border-radius:99px; padding:4px 10px;
	font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.nd-stempel .pt{ width:6px; height:6px; border-radius:50%; background:var(--oranje); }
.nd-rec{
	position:absolute; right:9px; top:9px; z-index:2; display:inline-flex; align-items:center; gap:6px;
	background:rgba(22,22,22,.72); color:#fff; border-radius:99px; padding:4px 10px;
	font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em;
}
.nd-rec .rd{ width:6px; height:6px; border-radius:50%; background:var(--rood); animation:dhbKnipper 1.6s ease-in-out infinite; }
@keyframes dhbKnipper{ 0%,100%{opacity:1} 50%{opacity:.25} }
.nd-caption{ font-size:11.5px; color:var(--muted); margin-top:9px; }
.nd-caption em{ font-style:normal; opacity:.8; }

/* ============================================================
   9. Stap 5: opslag, extra's, panorama
   ============================================================ */

.opslag-groep{ display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:9px; }
.opslag-optie{
	position:relative; display:flex; align-items:center; gap:11px; cursor:pointer;
	background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-tegel);
	padding:11px 13px; transition:border-color .15s ease,box-shadow .15s ease;
}
.opslag-optie:hover{ border-color:var(--line-donker); }
.opslag-optie.gekozen{ border-color:var(--oranje); box-shadow:0 0 0 3px var(--oranje-soft); }
.opslag-optie input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opslag-body{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.opslag-body .ot{
	display:flex; align-items:center; gap:7px; flex-wrap:wrap;
	font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700;
}
.opslag-body .od{ font-size:11.5px; color:var(--muted); }
.opslag-badge{
	border-radius:99px; background:var(--groen-bg); color:var(--groen); padding:2px 8px;
	font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.opslag-prijs{ font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; white-space:nowrap; }
.opslag-note{ font-size:11.5px; color:var(--muted); margin-top:10px; }

.optie{
	position:relative; display:flex; align-items:center; gap:14px; cursor:pointer;
	background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-tegel);
	padding:14px 16px; margin-bottom:9px; transition:border-color .15s ease,box-shadow .15s ease;
}
.optie:last-child{ margin-bottom:0; }
.optie:hover{ border-color:var(--line-donker); }
.optie.aan{ border-color:var(--oranje); box-shadow:0 0 0 3px var(--oranje-soft); }
.optie-ico{
	width:44px; height:44px; flex:none; border-radius:11px; background:var(--oranje-soft);
	color:var(--oranje); display:grid; place-items:center;
}
.optie-ico .dhb-ico{ width:21px; height:21px; }
.optie-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.optie-body .t{ font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700; }
.optie-body .d{ font-size:12px; color:var(--muted); }
.optie-prijs{
	flex:none; text-align:right; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700;
	display:flex; flex-direction:column; line-height:1.2;
}
.optie-prijs small{ font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:400; color:var(--muted); }

.combi{ display:flex; flex-direction:column; gap:1px; margin-top:3px; }
.combi .los{ font-size:11.5px; color:var(--muted); }
.combi .nu{ font-size:12px; font-weight:600; }
.combi-voordeel{
	display:inline-flex; align-items:center; gap:6px; width:fit-content; margin-top:5px;
	background:var(--groen-bg); color:var(--groen); border-radius:99px; padding:3px 9px;
	font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700;
}
.combi-voordeel .dhb-ico{ width:12px; height:12px; }

/* Schakelaar */
.switch{ position:relative; width:46px; height:26px; flex:none; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.switch .track{
	position:absolute; inset:0; border-radius:99px; background:var(--line);
	transition:background .18s ease;
}
.switch .knob{
	position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
	background:#fff; box-shadow:0 1px 3px rgba(22,22,22,.25); transition:transform .18s ease;
}
.optie.aan .switch .track,.switch input:checked ~ .track{ background:var(--oranje); }
.optie.aan .switch .knob,.switch input:checked ~ .knob{ transform:translateX(20px); }

/* Panorama-stepper */
.pano{
	background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-tegel);
	overflow:hidden; transition:border-color .15s ease,box-shadow .15s ease;
}
.pano.aan{ border-color:var(--oranje); box-shadow:0 0 0 3px var(--oranje-soft); }
.pano-beeld{ position:relative; aspect-ratio:32/9; background:var(--ink); overflow:hidden; }
.pano-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.pano-badge{
	position:absolute; left:9px; top:9px; background:rgba(22,22,22,.72); color:#fff; border-radius:99px;
	padding:4px 10px; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.07em;
}
.pano-tag{
	position:absolute; left:9px; bottom:9px; right:9px; color:#fff; font-size:11.5px;
	text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.pano-onder{ display:flex; align-items:center; gap:14px; padding:13px 15px; flex-wrap:wrap; }
.pano-body{ display:flex; flex-direction:column; gap:2px; min-width:150px; flex:1; }
.pano-body .pt{ font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700; }
.pano-body .pd{ font-size:12px; color:var(--muted); }
.pano-stepper{
	display:inline-flex; align-items:center; gap:4px; background:var(--veld);
	border:1px solid var(--line); border-radius:var(--r-tegel); padding:3px;
}
.pano-btn{
	width:32px; height:32px; border:none; border-radius:8px; background:var(--card); color:var(--ink);
	font-size:18px; font-weight:600; line-height:1; display:grid; place-items:center;
}
.pano-btn:hover:not(:disabled){ background:var(--ink); color:#fff; }
.pano-btn:disabled{ opacity:.35; cursor:not-allowed; }
.pano-count{
	min-width:34px; text-align:center; font-family:'Montserrat',sans-serif; font-size:16px;
	font-weight:800; font-variant-numeric:tabular-nums;
}
.pano-prijs{
	flex:none; text-align:right; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700;
	display:flex; flex-direction:column; line-height:1.2;
}
.pano-prijs small{ font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:400; color:var(--muted); }

/* ============================================================
   10. Samenvattingspaneel
   ============================================================ */

.summary{
	position:sticky; top:22px; background:var(--card); border:1px solid var(--line);
	border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
	display:flex; flex-direction:column; max-height:calc(100vh - 44px);
}
.summary h3{ font-size:13px; font-weight:700; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.summary h3 span{ color:var(--oranje); }
.sum-scroll{ overflow-y:auto; padding:14px 18px; flex:1; min-height:0; }

.summary-lines li{
	display:flex; align-items:baseline; justify-content:space-between; gap:12px;
	font-size:12.5px; padding:7px 0; border-bottom:1px dashed var(--line);
}
.summary-lines li:last-child{ border-bottom:none; }
.summary-lines li span:first-child{ color:var(--muted); min-width:0; }
.summary-lines li b{ color:var(--ink); font-weight:600; }
.summary-lines li span:last-child{
	flex:none; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; white-space:nowrap;
}

.summary-voordeel{
	background:var(--groen-bg); border-radius:var(--r-tegel); padding:11px 13px; margin-top:12px;
	display:flex; flex-direction:column; gap:5px;
}
.sv-van{ font-size:11.5px; color:var(--groen); }
.sv-van-lbl{ font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.sv-badge{
	display:inline-flex; align-items:center; gap:7px; font-family:'Montserrat',sans-serif;
	font-size:12.5px; font-weight:700; color:var(--groen);
}
.sv-geldig{ font-size:11px; color:var(--groen); opacity:.85; }

.summary-incl{ margin-top:14px; border:1px solid var(--line); border-radius:var(--r-tegel); background:var(--veld); }
.si-titel{
	list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
	gap:10px; padding:11px 13px; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700;
}
.si-titel::-webkit-details-marker{ display:none; }
.si-titel .dhb-ico{ transition:transform .2s ease; color:var(--muted); }
.summary-incl[open] .si-titel .dhb-ico{ transform:rotate(180deg); }
.summary-incl ul{ padding:0 13px 12px; display:flex; flex-direction:column; gap:7px; }
.summary-incl li{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); }
.summary-incl li b{ color:var(--ink); }
.summary-incl .dhb-ico{ color:var(--oranje); stroke-width:2.6; width:13px; height:13px; margin-top:3px; }

.sum-monteur{
	display:flex; align-items:center; gap:11px; margin-top:14px; background:var(--oranje-soft);
	border-radius:var(--r-tegel); padding:11px 13px; font-size:12px;
}
.sm-ico{ width:30px; height:30px; flex:none; border-radius:9px; background:#fff; color:var(--oranje); display:grid; place-items:center; }

.sum-voet{ border-top:1px solid var(--line); background:var(--veld); padding:14px 18px 16px; }
.summary-vanaf{ font-size:11px; color:var(--muted); margin-bottom:8px; }
.summary-totaal{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	background:var(--ink); color:#fff; border-radius:var(--r-tegel); padding:13px 15px;
}
.summary-totaal .l{
	display:flex; flex-direction:column; font-family:'Montserrat',sans-serif; font-size:11px;
	font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.summary-totaal .l small{
	font-family:'Poppins',sans-serif; font-size:10px; font-weight:400; letter-spacing:0;
	text-transform:none; opacity:.72; margin-top:2px;
}
.summary-totaal .v{
	font-family:'Montserrat',sans-serif; font-size:25px; font-weight:800; letter-spacing:-.02em;
	white-space:nowrap; font-variant-numeric:tabular-nums;
}
.summary-termijn{ display:none; font-size:11.5px; color:var(--muted); margin-top:8px; }
.summary-termijn.zichtbaar{ display:block; }
.samenstel-acties{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.samenstel-acties .dhb-btn{ width:100%; }
.summary-reviews{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:10px; justify-content:center; }
.summary-reviews .dhb-ico{ width:13px; height:13px; color:var(--oranje); fill:var(--oranje); }
.summary-contact{ font-size:11.5px; color:var(--muted); margin-top:8px; text-align:center; }
.summary-contact a{ color:var(--oranje); font-weight:500; }
.summary-note{ display:flex; gap:7px; font-size:10.5px; color:var(--muted); margin-top:10px; line-height:1.4; }
.summary-note .dhb-ico{ width:12px; height:12px; margin-top:2px; }

.prijs-pulse{ animation:dhbPuls .55s ease; }
@keyframes dhbPuls{ 0%{transform:scale(1)} 35%{transform:scale(1.045)} 100%{transform:scale(1)} }

/* ============================================================
   11. Afronden: certificaat en formulier
   ============================================================ */

.cfg-afronden{ margin-top:38px; padding-top:32px; border-top:1px solid var(--line); }
.afr-duo{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px; align-items:start; }

.cert{
	position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
	box-shadow:var(--shadow); padding:20px 22px 16px; overflow:hidden;
}
.cert::before{
	content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--oranje);
}
.cert-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cert-merk{ font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.cert-merk b{ font-weight:800; }
.cert-schild{ width:34px; height:34px; border-radius:10px; background:var(--oranje-soft); color:var(--oranje); display:grid; place-items:center; }
.cert-schild .dhb-ico{ width:18px; height:18px; }
.cert-titel{
	font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.cert-spec{ display:flex; align-items:center; gap:14px; }
.cert-vorm{
	width:74px; height:62px; flex:none; display:grid; place-items:center; border-radius:var(--r-knop);
	background:linear-gradient(160deg,#FBFAF8,#F0EEEB);
}
.cert-vorm .dhb-camsvg{ height:52px; }
.cert-vorm img{ max-height:52px; width:auto; object-fit:contain; }
.cert-recap{ font-size:12.5px; color:var(--ink); }
.cert-scheur{
	height:1px; margin:15px -22px; background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 13px);
}
.cert-prijsrij{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.cp-l{
	display:flex; flex-direction:column; font-family:'Montserrat',sans-serif; font-size:11px;
	font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.cp-l small{
	font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:400; letter-spacing:0;
	text-transform:none; margin-top:3px;
}
.cp-r{ font-family:'Montserrat',sans-serif; font-size:27px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.cert-strip{
	display:flex; align-items:flex-start; gap:9px; background:var(--oranje-soft); border-radius:var(--r-tegel);
	padding:10px 12px; margin-top:14px; font-size:12px;
}
.cert-strip .dhb-ico{ color:var(--oranje); stroke-width:2.6; margin-top:3px; }
.cert-voet{
	display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
	font-size:10.5px; color:var(--muted);
}
.cert-nr b{ font-family:'Montserrat',sans-serif; color:var(--ink); letter-spacing:.02em; }
.cert-stempel{
	border:1.5px dashed var(--line-donker); border-radius:8px; padding:4px 9px;
	font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--muted); transform:rotate(-3deg);
}

.afr-actie{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; }
.afr-slider{
	position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
	background:var(--veld); border:1px solid var(--line); border-radius:var(--r-tegel); padding:4px; margin-bottom:16px;
}
.afr-slider input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.afr-pil{
	position:absolute; left:4px; top:4px; bottom:4px; width:calc((100% - 8px) / 3);
	background:var(--ink); border-radius:9px; transition:transform .28s cubic-bezier(.33,1.3,.4,1);
}
.afr-slider label{
	position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1px;
	padding:9px 8px; cursor:pointer; text-align:center; transition:color .2s ease; color:var(--muted);
}
.afr-slider label b{ font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; }
.afr-slider label small{ font-size:10.5px; }
#afrDoelOfferte:checked ~ label[for="afrDoelOfferte"],
#afrDoelAdvies:checked ~ label[for="afrDoelAdvies"],
#afrDoelBestel:checked ~ label[for="afrDoelBestel"]{ color:#fff; }

.afr-kop-rij{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.afr-stap-lbl{
	font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--muted);
}
.afr-stippen{ display:flex; gap:5px; }
.afr-stippen li{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s ease; }
.afr-stippen li.aan{ background:var(--oranje); }
.afr-balkspoor{ height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:14px; }
.afr-balk{ display:block; height:100%; width:25%; border-radius:99px; background:var(--oranje); transition:width .28s ease; }

.afr-strip{
	display:none; align-items:flex-start; gap:9px; border-radius:var(--r-tegel); padding:11px 13px;
	margin-bottom:13px; font-size:12px; background:var(--oranje-soft);
}
.afr-strip .dhb-ico{ color:var(--oranje); margin-top:2px; }
.afr-strip.advies{ background:var(--groen-bg); }
.afr-strip.advies .dhb-ico{ color:var(--groen); }
.afr-flow[data-doel="bestelling"] #afrKoopStrip{ display:flex; }
.afr-flow[data-doel="advies"] #afrAdviesStrip{ display:flex; }

.afr-stap{ display:none; }
.afr-stap.actief{ display:block; animation:dhbInschuif .28s ease; }
@keyframes dhbInschuif{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.afr-rij{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }

.dhb-cc .afr-rij input,
.dhb-cc .afr-rij textarea{
	width:100%; background:var(--veld); border:1px solid var(--line); border-radius:var(--r-knop);
	padding:13px 14px; font-size:14px; color:var(--ink); transition:border-color .15s ease,background .15s ease;
}
.dhb-cc .afr-rij input:focus,
.dhb-cc .afr-rij textarea:focus{ outline:none; border-color:var(--oranje); background:#fff; }
.dhb-cc .afr-rij .afr-fout-veld{ border-color:var(--rood); background:var(--rood-bg); }
.dhb-cc .afr-rij textarea{ resize:vertical; min-height:66px; }
.dhb-cc .afr-rij input::placeholder,
.dhb-cc .afr-rij textarea::placeholder{ color:var(--muted); }

.afr-knoppen{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.afr-terug{
	display:inline-flex; align-items:center; gap:7px; background:none; border:none; color:var(--muted);
	font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:600; padding:8px 4px;
}
.afr-terug:hover{ color:var(--ink); }
.afr-hint{ font-size:11.5px; color:var(--muted); margin-top:9px; }
.afr-hint .h-koop{ display:none; }
.afr-flow[data-doel="bestelling"] .afr-hint .h-std{ display:none; }
.afr-flow[data-doel="bestelling"] .afr-hint .h-koop{ display:inline; }

.afr-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.afr-plan{ margin-top:14px; border:1px solid var(--line); border-radius:var(--r-tegel); overflow:hidden; background:var(--veld); }
.ap-kop{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-bottom:1px solid var(--line); }
.ap-kop b{ display:flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; }
.ap-kop b .dhb-ico{ color:var(--oranje); }
.ap-kop span{ font-size:11.5px; color:var(--muted); }
.ap-agenda iframe{ display:block; width:100%; height:460px; border:0; background:#fff; }

.afr-dank{
	display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
	background:var(--groen-bg); border-radius:var(--r-tegel); padding:22px 18px;
}
.afr-dank .ad-ico{
	width:42px; height:42px; border-radius:12px; background:var(--groen); color:#fff; display:grid; place-items:center;
}
.afr-dank .ad-ico .dhb-ico{ width:22px; height:22px; stroke-width:2.8; }
.afr-dank b{ font-family:'Montserrat',sans-serif; font-size:15px; font-weight:700; color:var(--groen); }
.afr-dank p{ font-size:12.5px; color:var(--ink); }
.afr-dank a{ color:var(--groen); font-weight:600; }
.afr-ref{ font-size:11.5px; color:var(--muted); }
.afr-flow[data-klaar="1"] .afr-stap,
.afr-flow[data-klaar="1"] .afr-kop-rij,
.afr-flow[data-klaar="1"] .afr-balkspoor,
.afr-flow[data-klaar="1"] .afr-strip{ display:none !important; }

.afr-fout{
	background:var(--rood-bg); color:var(--rood); border-radius:var(--r-tegel); padding:11px 13px;
	font-size:12.5px; margin-top:12px;
}
.afr-fout a{ color:var(--rood); font-weight:600; }
.afr-note{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); margin-top:12px; }
.afr-note .dhb-ico{ width:13px; height:13px; }
.afr-spot{ animation:dhbSpot 1.3s ease; }
@keyframes dhbSpot{ 0%,100%{box-shadow:none} 30%{box-shadow:0 0 0 4px var(--oranje-soft)} }

/* ============================================================
   12. Mobiele balken en sheet
   ============================================================ */

.cfg-stepbar{
	position:fixed; left:0; right:0; top:0; z-index:59; display:none; align-items:center;
	justify-content:space-between; gap:12px; padding:9px 16px; background:var(--card);
	border-bottom:1px solid var(--line); box-shadow:0 6px 20px -14px rgba(22,22,22,.4);
}
.csb-label{ font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csb-label b{ color:var(--oranje); }
.csb-dots{ display:flex; gap:5px; flex:none; }
.csb-dot{
	width:30px; height:30px; border-radius:9px; border:1.5px solid var(--line); background:var(--card);
	color:var(--muted); font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:700;
	display:grid; place-items:center; padding:0;
}
.csb-dot.actief{ background:var(--ink); border-color:var(--ink); color:#fff; }
@media (max-width:380px){
	.csb-naam-wrap{ display:none; }
	.csb-dot{ width:27px; height:27px; font-size:11.5px; }
}

.mobielbalk{
	position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center;
	justify-content:space-between; gap:12px; background:var(--card); border-top:1px solid var(--line);
	padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px -12px rgba(22,22,22,.35);
}
.mb-prijs{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.mb-label{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-rij{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.mb-bedrag{ font-family:'Montserrat',sans-serif; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.mb-voordeel{
	display:inline-flex; align-items:baseline; gap:4px; background:var(--groen-bg); color:var(--groen);
	border-radius:99px; padding:2px 9px; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700;
}

.mobiel-overlay{
	position:fixed; inset:0; z-index:70; background:rgba(22,22,22,.45); backdrop-filter:blur(3px);
	opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mobiel-overlay.open{ opacity:1; pointer-events:auto; }
.mobiel-sheet{
	position:fixed; left:0; right:0; bottom:0; z-index:71; background:var(--card);
	border-radius:18px 18px 0 0; padding:8px 18px calc(20px + env(safe-area-inset-bottom));
	transform:translateY(102%); transition:transform .26s cubic-bezier(.33,1,.4,1);
	max-height:86vh; display:flex; flex-direction:column;
}
.mobiel-sheet.open{ transform:none; }
.ms-grip{ display:grid; place-items:center; padding:6px 0 10px; }
.ms-grip span{ width:42px; height:4px; border-radius:99px; background:var(--line-donker); }
.ms-sluit{
	position:absolute; right:14px; top:12px; width:32px; height:32px; border-radius:9px;
	border:1px solid var(--line); background:var(--card); color:var(--ink); display:grid; place-items:center;
}
.ms-scroll{ overflow-y:auto; min-height:0; }
.mobiel-sheet h3{ font-size:16px; font-weight:800; }
.ms-sub{ font-size:12px; color:var(--muted); margin:2px 0 12px; }
.ms-lijn{
	display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px;
	padding:7px 0; border-bottom:1px dashed var(--line);
}
.ms-lijn span:first-child{ color:var(--muted); }
.ms-lijn b{ color:var(--ink); font-weight:600; }
.ms-lijn span:last-child{ flex:none; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; }
.ms-voordeel{ background:var(--groen-bg); border-radius:var(--r-tegel); padding:11px 13px; margin-top:12px; }
.msv-van{ font-size:11.5px; color:var(--groen); }
.msv-badge{ display:flex; align-items:center; gap:7px; font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:700; color:var(--groen); margin-top:3px; }
.msv-geldig{ font-size:11px; color:var(--groen); opacity:.85; margin-top:3px; }
.ms-totaal{
	display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
	background:var(--ink); color:#fff; border-radius:var(--r-tegel); padding:13px 15px;
}
.ms-totaal .l{ font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ms-totaal .v{ font-family:'Montserrat',sans-serif; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.ms-sub2{ font-size:11px; color:var(--muted); margin-top:8px; }
.ms-acties{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ms-acties .dhb-btn{ width:100%; }

.dhb-cc-vast{ overflow:hidden; }

/* ============================================================
   13. Responsief
   ============================================================ */

@media (max-width:1080px){
	.cfg-layout{ grid-template-columns:1fr; }
	.summary{ position:static; max-height:none; }
	.sum-scroll{ overflow:visible; }
	.hero-grid{ grid-template-columns:1fr; gap:24px; }
	.afr-duo{ grid-template-columns:1fr; }
	.niveaus{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
	.kdemo-grid{ grid-template-columns:1fr; }
	.kdemo-side{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; }
	.kdemo-meter{ flex:1; min-width:170px; }
	.kdemo-hint{ flex-basis:100%; }
	.afr-slider{ grid-template-columns:1fr; }
	.afr-pil{ width:calc(100% - 8px); height:calc((100% - 8px) / 3); bottom:auto; }
	.afr-slider label{ flex-direction:row; gap:8px; justify-content:flex-start; text-align:left; }
	.afr-slider label small{ opacity:.8; }
}

@media (max-width:640px){
	.dhb-wrap{ padding:0 16px; }
	.dhb-cfg{ padding:20px 0 84px; }
	.dhb-hero{ padding:20px 0 4px; }
	.cfg-steps::before{ display:none; }
	.cfg-stap{ padding:18px 16px; }
	.cfg-kop{ gap:11px; }
	.cfg-nr{ width:30px; height:30px; font-size:14px; box-shadow:none; }
	.niveaus{ grid-template-columns:1fr; }
	.niveau{ flex-direction:row; align-items:center; gap:14px; padding:16px 14px; flex-wrap:wrap; }
	.niveau-foto{ width:86px; height:70px; margin:0; flex:none; }
	.niveau-foto .dhb-camsvg{ height:62px; }
	.niveau-head{ flex:1; min-width:130px; }
	.niveau-sub{ flex-basis:100%; margin:0; order:4; }
	.niveau-prijs{ order:5; flex-basis:100%; }
	.niveau-richt{ order:6; flex-basis:100%; }
	.niveau-badge{ top:-9px; }
	.nz-optie{ flex-wrap:wrap; }
	.nz-demo{ width:56px; height:42px; }
	.nz-body{ flex-basis:calc(100% - 140px); }
	.nz-prijs{ margin-left:auto; }
	.optie{ flex-wrap:wrap; }
	.optie-body{ flex-basis:calc(100% - 130px); }
	.aantal-bar{ gap:12px; }
	.aantal-hint{ flex-basis:100%; }
	.summary{ display:none; }
	.mobielbalk{ display:flex; }
	.cfg-stepbar.zichtbaar{ display:flex; }
	.hero-actie{ gap:16px; }
	.hero-cta{ width:100%; }
	.hero-cta .dhb-btn{ flex:1; }
	.cert-prijsrij{ flex-direction:column; align-items:flex-start; gap:6px; }
	.pagehead::before{ width:130px; height:130px; right:-24px; top:-40px; }
	body.dhb-afronden-zichtbaar .mobielbalk{ transform:translateY(110%); transition:transform .25s ease; }
}

@media (prefers-reduced-motion:reduce){
	.dhb-cc *,
	.dhb-cc *::before,
	.dhb-cc *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   14. Printweergave: het certificaat blijft leesbaar
   ============================================================ */

@media print{
	.cfg-steps,.summary,.mobielbalk,.cfg-stepbar,.mobiel-sheet,.mobiel-overlay,.afr-actie,.dhb-hero{ display:none !important; }
	.dhb-cc{ background:#fff; }
	.cert{ box-shadow:none; border:1px solid #999; }
}