*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --brand:#005DAA;--brand-dark:#004882;--brand-light:#E6F1FB; --accent-dark:#E85A25; --text:#1A1A2E;--text-muted:#5A6478;--text-light:#8A93A6; --bg:#F7F8FA;--surface:#FFFFFF;--border:#E2E6EF;--border-strong:#C8D0E0; --radius:12px;--radius-sm:8px; --shadow:0 2px 12px rgba(0,93,170,0.08);--shadow-hover:0 6px 24px rgba(0,93,170,0.15); --tr:0.18s cubic-bezier(0.4,0,0.2,1); } body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem} .tool-wrapper{width:100%;max-width:700px} .tool-header{text-align:center;margin-bottom:1.75rem} .logo-badge{background:var(--brand);color:white;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:4px;display:inline-block;margin-bottom:.75rem} .tool-header h1{font-family:'DM Serif Display',serif;font-size:28px;font-weight:400;line-height:1.25;margin-bottom:.4rem} .tool-header p{color:var(--text-muted);font-size:15px} .progress-bar{display:flex;gap:6px;margin-bottom:1.5rem;justify-content:center} .progress-dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:background var(--tr)} .progress-dot.active{background:var(--brand)} .progress-dot.done{background:var(--brand-light);border:1.5px solid var(--brand)} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .card-header{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);padding:1.4rem 1.75rem;color:white} .step-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:5px} .card-header h2{font-size:19px;font-weight:500;line-height:1.3} .card-body{padding:1.4rem 1.75rem} .options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .options-grid.cols1{grid-template-columns:1fr} .options-grid.cols3{grid-template-columns:1fr 1fr 1fr} .option-btn{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:13px 15px;cursor:pointer;text-align:left;transition:all var(--tr);display:flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text)} .option-btn:hover{border-color:var(--brand);background:var(--brand-light);color:var(--brand-dark);box-shadow:var(--shadow-hover);transform:translateY(-1px)} .opt-icon{width:34px;height:34px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;transition:background var(--tr)} .option-btn:hover .opt-icon{background:white} .opt-sub{display:block;font-weight:400;font-size:12px;color:var(--text-muted);margin-top:2px} .option-btn:hover .opt-sub{color:var(--brand)} .back-btn{background:none;border:none;color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px;padding:0;margin-bottom:1.1rem;transition:color var(--tr)} .back-btn:hover{color:var(--brand)} .result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:slideUp .28s ease} @keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .result-header{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);padding:1.2rem 1.75rem;color:white;display:flex;align-items:center;gap:12px} .check-badge{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0} .check-badge svg{width:17px;height:17px} .rh-meta{font-size:12px;opacity:.7;margin-bottom:2px} .rh-name{font-size:19px;font-weight:600} .result-body{padding:1.5rem 1.75rem;display:flex;gap:1.5rem;align-items:flex-start} .prod-img-box{flex-shrink:0;width:130px;height:130px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#f0f4f8;display:flex;align-items:center;justify-content:center;overflow:hidden} .prod-img-box img{width:100%;height:100%;object-fit:contain;padding:10px;display:block} .prod-img-box svg{width:90px;height:90px} .img-skeleton{width:100%;height:100%;background:linear-gradient(90deg,#e8edf2 25%,#dde3ea 50%,#e8edf2 75%);background-size:200% 100%;animation:shimmer 1.4s infinite} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .result-info{flex:1;min-width:0} .result-info h4{font-size:16px;font-weight:600;margin-bottom:5px;color:var(--text)} .sub{font-size:13px;font-weight:400;color:var(--text-muted)} .desc{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:11px} .feat-list{list-style:none;margin-bottom:13px} .feat-list li{font-size:12px;color:var(--text-muted);display:flex;align-items:flex-start;gap:6px;margin-bottom:4px;line-height:1.45} .feat-list li::before{content:'✓';color:var(--brand);font-weight:700;flex-shrink:0} .advice-note{background:#FFFBF0;border:1px solid #F5DCA0;border-radius:var(--radius-sm);padding:9px 13px;font-size:12px;color:#7A6020;margin-bottom:11px;line-height:1.5} .price-row{display:flex;align-items:baseline;gap:7px;margin-bottom:14px;flex-wrap:wrap;min-height:32px} .price-now{font-size:23px;font-weight:700;color:var(--text)} .price-was{font-size:13px;color:var(--text-light);text-decoration:line-through} .price-per{font-size:12px;color:var(--text-muted)} .sale-badge{background:#FFF0EB;color:var(--accent-dark);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;border:1px solid #FACCB8;align-self:center} .price-custom{font-size:14px;color:var(--text-muted);font-style:italic} .price-skeleton{width:120px;height:28px;border-radius:6px;background:linear-gradient(90deg,#e8edf2 25%,#dde3ea 50%,#e8edf2 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;display:inline-block} .btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;padding:10px 20px;border-radius:var(--radius-sm);border:none;cursor:pointer;text-decoration:none;transition:all var(--tr)} .btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,93,170,.25)} .btn-primary svg{width:13px;height:13px;flex-shrink:0} .result-divider{border:none;border-top:1px solid var(--border);margin:0 1.75rem} .other-products{padding:1.1rem 1.75rem} .other-products h5{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:10px} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border-strong);border-radius:20px;padding:5px 13px;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all var(--tr);font-family:'DM Sans',sans-serif} .chip:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark)} .restart-row{text-align:center;padding:.9rem 1.75rem 1.4rem;border-top:1px solid var(--border)} .restart-btn{background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:13px;padding:7px 16px;cursor:pointer;transition:all var(--tr)} .restart-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)} .screen{animation:fadeIn .22s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}} .body-wrap{transition:opacity .18s ease,transform .18s ease} .body-wrap.fading{opacity:0;transform:translateY(5px)} @media(max-width:500px){ .options-grid,.options-grid.cols3{grid-template-columns:1fr} .result-body{flex-direction:column} .prod-img-box{width:100px;height:100px} }// ───────────────────────────────────────────────────────────── // PHP-endpoint op cadkoop.nl dat live prijzen + afbeeldingen // levert. Zet sketchup-prijzen.php in de root van cadkoop.nl. // ───────────────────────────────────────────────────────────── const PRICE_ENDPOINT = '/sketchup-prijzen.php';// Live data cache (gevuld bij laden) let liveData = {};// Fallback prijzen — worden overschreven door live data zodra // het endpoint bereikbaar is const fallback = { go: { price: null, priceWas: null, image: null }, pro: { price: '€379,00', priceWas: null, image: null }, proAdvanced: { price: '€446,25', priceWas: '€525,00', image: null }, proScan: { price: '€403,75', priceWas: '€475,00', image: null }, studioWindows: { price: '€778,00', priceWas: null, image: null }, studioStudent: { price: '€79,00', priceWas: null, image: null }, studioDocent: { price: '€79,00', priceWas: null, image: null }, studioNonProfit:{ price: '€79,00', priceWas: null, image: null }, adviceMac: { price: '€379,00', priceWas: null, image: null }, };async function loadLiveData() { try { const r = await fetch(PRICE_ENDPOINT, { signal: AbortSignal.timeout(4000) }); if (!r.ok) return; liveData = await r.json(); } catch(e) { // Endpoint niet bereikbaar — gebruik fallback stilzwijgend } }function getData(key) { // Live data heeft voorrang; anders fallback return Object.assign({}, fallback[key] || {}, liveData[key] || {}); }// ── Inline SVG illustraties (fallback als geen productfoto) ── const SVG = { pro: ` `, proAdvanced: ` B `, proScan: ` `, studio: ` `, edu: ` `, nonprofit: ` `, go: ` `, };// ── Productdefinities ── const products = { go:{ name:'SketchUp Go', subtitle:'Browser & iPad', svgKey:'go', priceLabel:'Prijzen via cadkoop.nl', url:'https://cadkoop.nl/produkt-kategorie/sketchup/', ctaLabel:'Bekijk SketchUp Go', description:'Werk overal vanuit de browser of op je iPad. Ideaal voor lichtgewicht 3D-ontwerp onderweg, helemaal zonder installatie.', features:['Volledig browser-gebaseerd & iPad-app','Basismodellering en -weergave','10 GB cloudopslag via Trimble Connect','Geen installatie vereist'], note:null }, pro:{ name:'SketchUp Pro', subtitle:'Commercieel / Particulier', svgKey:'pro', url:'https://cadkoop.nl/product/sketchup-pro-2026-1-jaar-auto-renew/', ctaLabel:'Bekijk product', description:'De volledige desktop-versie voor professioneel 3D-ontwerp. Inclusief LayOut voor presentaties en Style Builder voor eigen visuele stijlen.', features:['Volledige 3D-modelleertool (Win & Mac)','LayOut voor technische tekeningen & presentaties','DWG/DXF import & export','Uitgebreide extensiebibliotheek'], note:null }, proAdvanced:{ name:'SketchUp ProAdvanced', subtitle:'Met RVT / BIM import', svgKey:'proAdvanced', url:'https://cadkoop.nl/product/sketchup-pro-advanced-2026-1-jaar-autorenew/', ctaLabel:'Bekijk product', description:'SketchUp Pro aangevuld met krachtige Revit (RVT) en IFC/BIM-importmogelijkheden. Perfect voor samenwerking in professionele BIM-omgevingen.', features:['Alles van SketchUp Pro','Import van Revit (.RVT) bestanden','IFC/BIM-workflow ondersteuning','Ideaal voor architectuur & bouw'], note:null }, proScan:{ name:'SketchUp ProScan', subtitle:'Met puntenwolk / laserscans', svgKey:'proScan', url:'https://cadkoop.nl/product/sketchup-pro-scan-2026-1-jaar-autorenew/', ctaLabel:'Bekijk product', description:'SketchUp Pro met ingebouwde ondersteuning voor puntenwolken en laserscans. Ideaal voor renovatie, as-built documentatie en scan-to-BIM projecten.', features:['Alles van SketchUp Pro','Import van puntenwolken & laserscans','Ondersteuning voor .RCP, .RCS en .E57','Scan-to-BIM workflows'], note:null }, studioWindows:{ name:'SketchUp Studio (Windows)', subtitle:'Met V-Ray renders', svgKey:'studio', url:'https://cadkoop.nl/product/sketchup-studio-bundel-windows-1-jaar-autorenew/', ctaLabel:'Bekijk product', description:'De meest complete SketchUp bundel voor Windows, inclusief een V-Ray versie voor fotorealistische visualisaties. Alles in één pakket.', features:['Alles van SketchUp Pro','V-Ray for SketchUp (beperkte versie, alleen Windows)','RVT/BIM import mogelijkheden','Puntenwolk ondersteuning'], note:'Let op: de ingebouwde V-Ray versie is beperkt. Voor volledige functionaliteit adviseren wij SketchUp Pro + een losse Chaos Enscape of V-Ray licentie.' }, adviceMac:{ name:'SketchUp Pro + Chaos Enscape / V-Ray', subtitle:'Advies voor Mac-gebruikers', svgKey:'studio', url:'https://cadkoop.nl/product/sketchup-pro-2026-1-jaar-auto-renew/', ctaLabel:'Bekijk SketchUp Pro', description:'Op Mac is er geen Studio-bundel met geïntegreerde render. Ons advies: koop SketchUp Pro en voeg Chaos Enscape of V-Ray als losse licentie toe.', features:['SketchUp Pro 2026 (volledig Mac-compatibel)','Koppel met Chaos Enscape voor real-time renders','Of kies V-Ray for SketchUp (losse licentie)','Maximale flexibiliteit en kwaliteit'], note:'Advies: klik op de knop voor SketchUp Pro en voeg apart een losse render-licentie toe.' }, studioStudent:{ name:'SketchUp Studio – Studentenlicentie', subtitle:'Voor studenten', svgKey:'edu', url:'https://cadkoop.nl/product/sketchup-studio-studentenlicentie-1-jaar-2/', ctaLabel:'Bekijk product', description:'De volledige Studio-versie voor studenten, inclusief alle pro-functies en V-Ray, voor een sterk gereduceerde prijs.', features:['Alle Studio-functies (inclusief V-Ray)','Sterk gereduceerde prijs voor studenten','1 jaar geldig','Bewijs van inschrijving vereist'], note:null }, studioDocent:{ name:'SketchUp Studio – Docentenlicentie', subtitle:'Voor docenten / leraren', svgKey:'edu', url:'https://cadkoop.nl/product/sketchup-studio-leraren-licentie-1-jaar/', ctaLabel:'Bekijk product', description:'De volledige Studio-versie voor leraren en docenten, beschikbaar tegen educatief tarief.', features:['Alle Studio-functies (inclusief V-Ray)','Educatief tarief voor docenten','1 jaar geldig','Bewijs van functie vereist'], note:null }, studioSchool:{ name:'SketchUp Netwerklicenties voor Scholen', subtitle:'Voor scholen & instellingen', svgKey:'edu', priceLabel:'Prijs op aanvraag', url:'https://cadkoop.nl/contact/', ctaLabel:'Neem contact op', description:'Voor scholen bieden wij speciale netwerklicenties met centraal beheer en educatieve tarieven. Neem contact op voor een offerte op maat.', features:['Meerdere gebruikers tegelijk','Speciaal educatief tarief','Gecentraliseerd beheer','Ondersteuning door CADkoop'], note:'Neem contact op via 088–328 0000 of het contactformulier voor een passende offerte.' }, studioNonProfit:{ name:'SketchUp Studio – Non-Profit', subtitle:'Voor non-profit organisaties', svgKey:'nonprofit', url:'https://cadkoop.nl/product/sketchup-studio-nonprofit-1-jaar/', ctaLabel:'Bekijk product', description:'De volledige Studio-versie voor erkende non-profit organisaties (ANBI), beschikbaar tegen sterk gereduceerd tarief. Let op: zonder V-Ray.', features:['Alle Studio-functies inbegrepen (zonder V-Ray)','Speciaal non-profit tarief (ANBI-status vereist)','1 jaar licentie','Officieel organisatie-e-mailadres vereist'], note:null }, };const allLinks=[ {key:'pro',label:'SketchUp Pro'},{key:'proAdvanced',label:'ProAdvanced'}, {key:'proScan',label:'ProScan'},{key:'studioWindows',label:'Studio Windows'}, {key:'studioStudent',label:'Studio Student'},{key:'studioDocent',label:'Studio Docent'}, {key:'studioSchool',label:'School Netwerklicentie'},{key:'studioNonProfit',label:'Studio Non-Profit'}, {key:'go',label:'SketchUp Go'}, ];const flow={ start:{question:'Wat is je gebruikerstype?',stepLabel:'Stap 1 van 3',options:[ {label:'Educatief',sub:'School, student of docent',icon:'🎓',next:'eduWho'}, {label:'Non-profit',sub:'Non-profit organisatie',icon:'🏛️',next:'result_studioNonProfit'}, {label:'Commercieel / Particulier',sub:'Bedrijf of privé gebruik',icon:'💼',next:'browserOrIpad'}, ]}, eduWho:{question:'Wie ben je?',stepLabel:'Stap 2 van 3',options:[ {label:'Student',sub:'Ingeschreven student',icon:'📚',next:'result_studioStudent'}, {label:'Docent / Leraar',sub:'Werkzaam in onderwijs',icon:'🧑‍🏫',next:'result_studioDocent'}, {label:'School / Instelling',sub:'Meerdere gebruikers',icon:'🏫',next:'result_studioSchool'}, ]}, browserOrIpad:{question:'Werk je alleen via de browser of op een iPad?',stepLabel:'Stap 2 van 5',options:[ {label:'Ja',sub:'Alleen browser of iPad',icon:'🌐',next:'result_go'}, {label:'Nee',sub:'Desktop-applicatie',icon:'💻',next:'laserscans'}, ]}, laserscans:{question:'Werk je met laserscans of puntenwolken?',stepLabel:'Stap 3 van 5',options:[ {label:'Ja',sub:'Scan-to-BIM of as-built',icon:'📡',next:'rvtBimScan'}, {label:'Nee',sub:'Geen puntenwolken nodig',icon:'✖️',next:'rvtBimNoScan'}, ]}, rvtBimScan:{question:'Heb je ook RVT / BIM import nodig?',stepLabel:'Stap 4 van 5',options:[ {label:'Ja',sub:'Revit-bestanden importeren',icon:'🏗️',next:'result_proAdvanced'}, {label:'Nee',sub:'Alleen laserscans',icon:'✖️',next:'result_proScan'}, ]}, rvtBimNoScan:{question:'Heb je RVT / BIM import nodig?',stepLabel:'Stap 4 van 5',options:[ {label:'Ja',sub:'Revit-bestanden importeren',icon:'🏗️',next:'result_proAdvanced'}, {label:'Nee',sub:'Geen BIM import nodig',icon:'✖️',next:'renders'}, ]}, renders:{question:'Heb je mooie renders of visualisaties nodig?',stepLabel:'Stap 5 van 5',options:[ {label:'Nee',sub:'Standaard weergave volstaat',icon:'✖️',next:'result_pro'}, {label:'Ja',sub:'Fotorealistische renders',icon:'🎨',next:'windowsOrMac'}, ]}, windowsOrMac:{question:'Op welk besturingssysteem werk je?',stepLabel:'Stap 5 van 5',options:[ {label:'Windows',sub:'Studio-bundel beschikbaar',icon:'🪟',next:'result_studioWindows'}, {label:'Mac',sub:'Advies: Pro + losse render',icon:'🍎',next:'result_adviceMac'}, ]} };let history=[], currentKey=null; const TOTAL=5;function renderProgress(n){ const bar=document.getElementById('progressBar'); bar.innerHTML=''; for(let i=0;i ${history.length?`← Vorige vraag`:''}

${st.stepLabel}

${st.question}

${st.options.map((o,i)=>`

${o.icon}

${o.label}${o.sub}

`).join('')}