New: EspoCRM API naar formulier bedrijf aanmelden

hugo_stats.json

@@ -68,11 +68,13 @@
       "border-start-0",
       "border-top",
       "btn",
+      "btn-lg",
       "btn-outline",
       "btn-outline-primary",
       "btn-primary",
       "btn-secondary",
       "btn-sm",
+      "btn-success",
       "btn-white",
       "builder-card",
       "card",
@@ -149,6 +151,7 @@
       "flex-grow-1",
       "flex-sm-row",
       "flex-wrap",
+      "font-italic",
       "font-small",
       "footer-menu",
       "footnote-backref",
@@ -162,10 +165,10 @@
       "form-control-sm",
       "form-group",
       "form-inline",
-      "form-text",
       "fw-bold",
       "g-2",
       "gap-2",
+      "gy-3",
       "gy-4",
       "h-100",
       "h3",
@@ -210,6 +213,7 @@
       "ms-sm-2",
       "mt-2",
       "mt-3",
+      "mt-4",
       "mt-5",
       "mt-auto",
       "mt-sm-0",
@@ -355,6 +359,7 @@
       "bouwwijze",
       "builder-filters",
       "builders-grid",
+      "char-count",
       "checking-municipal-requirements",
       "ciz-indicatie-en-sociale-wijkteams",
       "ciz-indication-and-social-district-teams",
@@ -423,7 +428,6 @@
       "goed-verblijven",
       "het-bewijs-van-zorgbehoefte",
       "het-proces-van-fabriek-naar-tuin",
-      "houtbouw",
       "huurkoop",
       "impact-on-property-value",
       "impact-op-de-woningwaarde",
@@ -431,6 +435,7 @@
       "important-fiscal-and-financial-considerations",
       "inrichting-en-zorgspecifieke-aanpassingen",
       "interior-and-care-specific-adjustments",
+      "intro",
       "juridische-definitie",
       "juridische-en-fiscale-aspecten",
       "kangaroo-housing-kangoeroewoning",
@@ -440,8 +445,6 @@
       "key-considerations-per-type",
       "key-features-in-the-nl",
       "kvk",
-      "landelijk",
-      "lead_time",
       "lease",
       "legal-definition-in-the-netherlands",
       "lname",
@@ -452,7 +455,7 @@
       "medical-confirmation",
       "medische-bevestiging",
       "message",
-      "modern",
+      "modulair",
       "multi-step-form",
       "navigation",
       "negative",
@@ -475,10 +478,12 @@
       "postal_code",
       "pre-informal-care-home",
       "pre-mantelzorgwoning",
+      "prefab",
       "prefab-bouw",
       "prefab-construction",
       "prefab-informal-care-home",
       "prefab-mantelzorgwoning",
+      "prefill-status",
       "preparation-and-consultation",
       "procedural-requirements",
       "procedurele-eisen",
@@ -488,23 +493,31 @@
       "reason",
       "regulation-through-the-environmental-plan",
       "removability-and-residual-value",
-      "rolstoel",
+      "review-btn",
       "search-by",
       "search-result-body",
       "searchInput",
       "searchModal",
       "second_hand",
       "select-language",
-      "service_contract",
       "sett-living",
       "site-administrator-details",
+      "slogan",
+      "slogan-count",
       "sloop-of-verwijdering-van-de-woning",
       "solilux",
       "step-1",
       "step-2",
       "step-3",
-      "stock",
+      "step-4",
+      "step-5",
       "submit-btn",
+      "summary-build",
+      "summary-custom",
+      "summary-intro",
+      "summary-name",
+      "summary-slogan",
+      "telephone",
       "temporary-and-modular-units",
       "termination-of-informal-care",
       "the-challenge-of-temporariness",
@@ -516,7 +529,6 @@
       "the-situation-after-informal-care-ends",
       "the-sustainable-informal-care-dwelling",
       "tijdelijke-en-modulaire-units",
-      "tillen",
       "top-totaal-blijf-ook-wonen",
       "transport-and-crane-work",
       "transport-en-hijswerk",

layouts/_default/bedrijf-aanmelden.html

@@ -9,32 +9,45 @@
       <div class="col-lg-8">
         <div class="p-4 p-sm-5 shadow rounded content">
           <h2 class="section-title">{{ .Title }}</h2>
+          <div id="prefill-status" class="small fw-bold mb-3 text-primary"></div>
+          
           <form id="multi-step-form">
+            
             <div class="step" id="step-1">
-              <h4 class="mb-4">Stap 1: Bedrijfsgegevens</h4>
               <div class="row gy-4">
                 <div class="form-group col-md-12">
-                  <label for="company_name">Officiële Bedrijfsnaam</label>
+                  <label for="company_name" class="h4">Officiële Bedrijfsnaam</label>
                   <input type="text" class="form-control text-dark" id="company_name" name="accountName" placeholder="Zoals vermeld bij de KvK" required>
                 </div>
                 
                 <div class="form-group col-md-6">
-                  <label for="kvk">KvK Nummer</label>
+                  <label for="kvk" class="h4">KvK Nummer</label>
-                  <input type="text" class="form-control text-dark" id="kvk" name="kvk_number" required>
+                  <input type="tel" class="form-control text-dark" id="kvk" name="kvk_number" pattern="[0-9]*" inputmode="numeric" maxlength="8" required>
                 </div>
 
                 <div class="form-group col-md-6">
-                  <label for="website">Website</label>
+                  <label for="website" class="h4">Website</label>
                   <input type="url" class="form-control text-dark" id="website" name="website" placeholder="https://www.uwbedrijf.nl">
                 </div>
 
-                <div class="form-group col-md-8">
+                <div class="form-group col-md-6">
-                  <label for="address">Straat + Huisnummer</label>
+                  <label for="telephone" class="h4">Telefoon</label>
+                  <input type="tel" class="form-control text-dark" id="telephone" name="telephone" placeholder="+31 000 000 000">
+                </div>
+
+                <div class="form-group col-md-6">
+                  <label for="email" class="h4">E-mail</label>
+                  <input type="email" class="form-control text-dark" id="email" name="email" placeholder="info@uwbedrijf.nl">
+                </div>
+                
+                <h3 class="pt-4">Bezoekadres</h3>
+                <div class="form-group col-md-6">
+                  <label for="address" class="h4">Straat + Huisnummer</label>
                   <input type="text" class="form-control text-dark" id="address" name="address">
                 </div>
-                <div class="form-group col-md-4">
+                <div class="form-group col-md-6">
-                  <label for="postal_code">Postcode</label>
+                  <label for="postal_code" class="h4">Postcode</label>
-                  <input type="text" class="form-control text-dark" id="postal_code" name="postalCode">
+                  <input type="text" class="form-control text-dark" id="postal_code" name="postalCode" placeholder="1234 AB" maxlength="7">
                 </div>
 
                 <div class="col-md-12 mt-5">
@@ -44,25 +57,22 @@
             </div>
 
             <div class="step d-none" id="step-2">
-              <h4 class="mb-4">Stap 2: Bedrijfsvoering & Aanbod</h4>
               <div class="row gy-4">
-                
                 <div class="form-group col-md-8">
-                  <label for="factory">Beschikt u over eigen fabriek(en)?</label>
+                  <label for="factory" class="h4">Beschikt u over eigen fabriek(en)?</label>
                   <select class="form-control text-dark" id="factory" name="has_factory" required>
                     <option value="Nee">Nee, wij besteden de bouw uit</option>
                     <option value="Ja">Ja, wij bouwen in eigen beheer</option>
                   </select>
-                  <small class="form-text text-muted">Let op: conform de voorwaarden dient dit feitelijk juist te zijn[cite: 73].</small>
                 </div>
                 
                 <div class="form-group col-md-4">
-                  <label for="factory_count">Aantal locaties</label>
+                  <label for="factory_count" class="h4">Aantal locaties</label>
-                  <input type="number" class="form-control text-dark" id="factory_count" name="factory_count" placeholder="0" min="0">
+                  <input type="number" class="form-control text-dark" id="factory_count" name="factory_count" value="0" min="0">
                 </div>
 
                 <div class="form-group col-md-12">
-                  <label class="d-block mb-2">Financiële mogelijkheden (meerdere opties mogelijk)</label>
+                  <label class="d-block mb-3 h3">Financiële mogelijkheden</label>
                   <div class="form-check form-check-inline">
                     <input class="form-check-input" type="checkbox" id="huurkoop" name="finance_options" value="Huurkoop">
                     <label class="form-check-label" for="huurkoop">Huur(-koop)</label>
@@ -74,18 +84,10 @@
                 </div>
 
                 <div class="form-group col-md-12">
-                  <label for="second_hand">Biedt u geregeld tweedehands modellen aan?</label>
+                  <label for="second_hand" class="h4">Biedt u geregeld tweedehands modellen aan?</label>
                   <select class="form-control text-dark" id="second_hand" name="second_hand">
                     <option value="Nee">Nee, uitsluitend nieuwbouw</option>
-                    <option value="Ja">Ja, wij hebben een wisselend tweedehands aanbod</option>
+                    <option value="Ja">Ja, wij hebben een wisselend aanbod</option>
-                  </select>
-                </div>
-
-                <div class="form-group col-md-12">
-                  <label for="service_contract">Biedt u nazorg middels een service-overeenkomst?</label>
-                  <select class="form-control text-dark" id="service_contract" name="service_contract">
-                    <option value="Nee">Nee</option>
-                    <option value="Ja">Ja, wij bieden structurele nazorg/onderhoud</option>
                   </select>
                 </div>
 
@@ -97,63 +99,28 @@
             </div>
 
             <div class="step d-none" id="step-3">
-              <h4 class="mb-4">Stap 3: Bouwstijl & Levering</h4>
               <div class="row gy-4">
-                
                 <div class="form-group col-md-12">
-                  <label class="d-block mb-2">Welke bouwstijlen hanteert u? (meerdere opties mogelijk)</label>
+                  <label class="d-block mb-3 h4">Bouwwijze</label>
-                  <div class="form-check form-check-inline">
+                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="modern" name="build_style" value="Modern">
+                    <input class="form-check-input" type="checkbox" id="prefab" name="build_method" value="Prefab">
-                    <label class="form-check-label" for="modern">Modern</label>
+                    <label class="form-check-label" for="prefab"><strong>Prefab:</strong> Volledig in fabriek</label>
                   </div>
-                  <div class="form-check form-check-inline">
+                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="landelijk" name="build_style" value="Landelijk">
+                    <input class="form-check-input" type="checkbox" id="modulair" name="build_method" value="Modulair">
-                    <label class="form-check-label" for="landelijk">Landelijk</label>
+                    <label class="form-check-label" for="modulair"><strong>Modulair:</strong> Units/modules</label>
-                  </div>
-                  <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" id="houtbouw" name="build_style" value="Houtbouw">
-                    <label class="form-check-label" for="houtbouw">Houtbouw / Chaletstijl</label>
                   </div>
                 </div>
 
-                <div class="form-group col-md-12">
+                <div class="form-group col-md-6">
-                  <label for="customization">In hoeverre is maatwerk mogelijk?</label>
+                  <label for="customization" class="h4">Maatwerk</label>
                   <select class="form-control text-dark" id="customization" name="customization" required>
-                    <option value="Volledig">Volledig maatwerk (architectonisch)</option>
+                    <option value="Volledig">Volledig architectonisch maatwerk</option>
-                    <option value="Modulair">Modulair (aanpasbare standaardmodellen)</option>
+                    <option value="Aanpasbaar">Standaardmodellen met opties</option>
-                    <option value="Standaard">Uitsluitend standaardmodellen</option>
+                    <option value="Standaard">Uitsluitend vaste modellen</option>
                   </select>
                 </div>
 
-                <div class="form-group col-md-6">
-                  <label for="stock">Levert u direct uit voorraad?</label>
-                  <select class="form-control text-dark" id="stock" name="delivery_stock">
-                    <option value="Nee">Nee, alles op bestelling</option>
-                    <option value="Ja">Ja, wij hebben showmodellen/voorraad direct leverbaar</option>
-                  </select>
-                </div>
-
-                <div class="form-group col-md-6">
-                  <label for="lead_time">Indicatieve levertijd (gemiddeld)</label>
-                  <select class="form-control text-dark" id="lead_time" name="lead_time">
-                    <option value="Snel">Minder dan 3 maanden</option>
-                    <option value="Gemiddeld">3 tot 6 maanden</option>
-                    <option value="Lang">Meer dan 6 maanden</option>
-                  </select>
-                </div>
-
-                <div class="form-group col-md-12">
-                  <label class="d-block mb-2">Specifieke zorgfaciliteiten mogelijk?</label>
-                  <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" id="rolstoel" name="care_features" value="Rolstoeltoegankelijk">
-                    <label class="form-check-label" for="rolstoel">Volledig rolstoeltoegankelijk</label>
-                  </div>
-                  <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" id="tillen" name="care_features" value="Plafondlift">
-                    <label class="form-check-label" for="tillen">Voorbereiding voor til-/plafondliften</label>
-                  </div>
-                </div>
-
                 <div class="col-md-12 mt-5">
                   <button type="button" class="btn btn-secondary prev-step">Vorige</button>
                   <button type="button" class="btn btn-primary next-step">Volgende stap</button>
@@ -161,6 +128,48 @@
               </div>
             </div>
 
+            <div class="step d-none" id="step-4">
+              <div class="row gy-4">
+                <div class="form-group col-md-12">
+                  <label for="slogan" class="h4">Slogan (Max. 30 tekens)</label>
+                  <input type="text" class="form-control text-dark" id="slogan" name="slogan" maxlength="30" placeholder="Duurzaam bouwen met hart voor de zorg">
+                  <small>Nog <span id="slogan-count">30</span> tekens</small>
+                </div>
+
+                <div class="form-group col-md-12">
+                  <label for="intro" class="h4">Bedrijfsintroductie (Max. 320 tekens)</label>
+                  <textarea id="intro" name="intro_text" class="form-control text-dark" rows="4" maxlength="320" placeholder="Wat maakt uw bedrijf uniek?"></textarea>
+                  <small class="text-muted">Nog <span id="char-count">320</span> tekens over.</small>
+                </div>
+
+                <div class="col-md-12 mt-5">
+                  <button type="button" class="btn btn-secondary prev-step">Vorige</button>
+                  <button type="button" class="btn btn-primary next-step" id="review-btn">Gegevens controleren</button>
+                </div>
+              </div>
+            </div>
+
+            <div class="step d-none" id="step-5">
+              <div class="row gy-3">
+                <div class="col-md-12">
+                  <div class="p-3 bg-light rounded border">
+                    <p><strong>Bedrijf:</strong> <span id="summary-name"></span></p>
+                    <p><strong>Slogan:</strong> <span id="summary-slogan"></span></p>
+                    <p><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
+                    <p><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
+                    <hr>
+                    <p><strong>Introductie:</strong></p>
+                    <p class="font-italic" id="summary-intro" style="white-space: pre-wrap;"></p>
+                  </div>
+                </div>
+
+                <div class="col-md-12 mt-4">
+                  <button type="button" class="btn btn-secondary prev-step">Aanpassen</button>
+                  <button type="submit" id="submit-btn" class="btn btn-success btn-lg">Definitief verzenden</button>
+                </div>
+              </div>
+            </div>
+
           </form>
         </div>
       </div>
@@ -169,36 +178,144 @@
 </section>
 
 <script>
-document.querySelectorAll('.next-step').forEach(button => {
+(() => {
-    button.addEventListener('click', () => {
+  'use strict';
-        const currentStep = button.closest('.step');
-        const nextStep = currentStep.nextElementSibling;
 
-        // Simpele validatie check
+  const CFG = {
-        const inputs = currentStep.querySelectorAll('input[required]');
+    prefillEndpoint: '/api/prefill/account',
-        let valid = true;
+    useProxyForSubmit: false,
-        inputs.forEach(i => { if(!i.value) valid = false; });
+    submitEndpointDirect: 'https://crm.start-it.nl/api/v1/LeadCapture/38887b5457c35e15f669c4c3ce69fe52',
+    fallbackEmail: 'info@mantelzorgwoning.info',
+    queryParamId: 'id'
+  };
 
-        if(valid && nextStep) {
+  const $ = (sel, root = document) => root.querySelector(sel);
-            currentStep.classList.add('d-none');
+  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
-            nextStep.classList.remove('d-none');
+
-            window.scrollTo(0, 0); // Terug naar boven voor de focus
+  const getVal = (id) => {
-        } else {
+    const el = document.getElementById(id);
-            alert('Vul a.u.be. de verplichte velden in.');
+    return el ? (el.value || '').trim() || '-' : '-';
+  };
+
+  const getChecked = (name) => {
+    const picked = $$(`input[name="${CSS.escape(name)}"]:checked`).map(cb => cb.value);
+    return picked.length ? picked.join(', ') : 'Geen';
+  };
+
+  function setFieldValue(fieldId, value) {
+    const el = document.getElementById(fieldId);
+    if (!el || !value) return false;
+    if (el.value.trim() && el.value !== 'https://') return false; 
+    el.value = value;
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+    return true;
+  }
+
+  function showInlineStatus(msg) {
+    const box = document.getElementById('prefill-status');
+    if (box) box.textContent = msg;
+  }
+
+  // Formatting helpers
+  const kvkEl = document.getElementById('kvk');
+  if (kvkEl) kvkEl.addEventListener('input', e => e.target.value = e.target.value.replace(/\D/g, '').slice(0, 8));
+
+  // Counters
+  const setupCounter = (fId, cId, max) => {
+    const el = document.getElementById(fId), cnt = document.getElementById(cId);
+    if (!el || !cnt) return;
+    const up = () => { cnt.innerText = max - el.value.length; };
+    el.addEventListener('input', up);
+    up();
+  };
+  setupCounter('slogan', 'slogan-count', 30);
+  setupCounter('intro', 'char-count', 320);
+
+  // Navigation
+  $$('.next-step').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const curr = btn.closest('.step');
+      const inputs = $$('[required]', curr);
+      let valid = true;
+      inputs.forEach(i => { if(!i.checkValidity()) { valid = false; i.classList.add('is-invalid'); } else { i.classList.remove('is-invalid'); }});
+      
+      if (!valid) return;
+
+      const next = curr.nextElementSibling;
+      if (next) {
+        if (next.id === 'step-5') {
+            document.getElementById('summary-name').innerText = getVal('company_name');
+            document.getElementById('summary-slogan').innerText = getVal('slogan');
+            document.getElementById('summary-custom').innerText = getVal('customization');
+            document.getElementById('summary-intro').innerText = getVal('intro');
+            document.getElementById('summary-build').innerText = getChecked('build_method');
         }
+        curr.classList.add('d-none');
+        next.classList.remove('d-none');
+        window.scrollTo(0,0);
+      }
     });
-});
+  });
 
-document.querySelectorAll('.prev-step').forEach(button => {
+  $$('.prev-step').forEach(btn => {
-    button.addEventListener('click', () => {
+    btn.addEventListener('click', () => {
-        const currentStep = button.closest('.step');
+      const curr = btn.closest('.step'), prev = curr.previousElementSibling;
-        const prevStep = currentStep.previousElementSibling;
+      if (prev) { curr.classList.add('d-none'); prev.classList.remove('d-none'); }
-        if(prevStep) {
-            currentStep.classList.add('d-none');
-            prevStep.classList.remove('d-none');
-        }
     });
-});
+  });
+
+  // Prefill Logic
+  async function prefillCRM() {
+    const id = new URLSearchParams(window.location.search).get(CFG.queryParamId);
+    if (!id) return;
+    showInlineStatus('Bezig met ophalen gegevens...');
+    try {
+      const res = await fetch(`${CFG.prefillEndpoint}?id=${id}`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      
+      setFieldValue('company_name', data.name);
+      setFieldValue('website', data.website);
+      setFieldValue('address', data.billingAddressStreet);
+      setFieldValue('postal_code', data.billingAddressPostalCode);
+      setFieldValue('kvk', data.cKvk);
+      setFieldValue('telephone', data.phoneNumber);
+      setFieldValue('email', data.emailAddress || data.emailAddressData?.[0]?.emailAddress);
+      
+      showInlineStatus('Gegevens succesvol geladen.');
+    } catch (e) {
+      showInlineStatus('Kon geen gegevens vinden voor dit ID.');
+    }
+  }
+
+  document.getElementById('multi-step-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const btn = document.getElementById('submit-btn');
+    btn.disabled = true; btn.innerText = 'Verzenden...';
+
+    const payload = {
+      lastName: getVal('company_name'),
+      website: getVal('website'),
+      emailAddress: getVal('email') !== '-' ? getVal('email') : CFG.fallbackEmail,
+      description: `KVK: ${getVal('kvk')}\nINTRO: ${getVal('intro')}\nBOUW: ${getChecked('build_method')}`
+    };
+
+    try {
+      const res = await fetch(CFG.submitEndpointDirect, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+      if (res.ok) window.location.href = '/bedankt?bedrijf=' + encodeURIComponent(getVal('company_name'));
+      else throw new Error();
+    } catch (err) {
+      alert('Fout bij verzenden.');
+      btn.disabled = false; btn.innerText = 'Definitief verzenden';
+    }
+  });
+
+  document.addEventListener('DOMContentLoaded', prefillCRM);
+})();
 </script>
 
 {{ end }}

static/prefill.php

@@ -0,0 +1,28 @@
+<?php
+// prefill.php
+$apiKey = '31b69c04fc1944c905bcf895789c1c98';
+$crmBaseUrl = 'https://crm.start-it.nl/api/v1/Account/';
+$id = $_GET['id'] ?? '';
+
+if (!$id || !preg_match('/^[a-z0-9]+$/', $id)) {
+    http_response_code(400);
+    die(json_encode(['error' => 'Invalid ID']));
+}
+
+$opts = [
+    "http" => [
+        "method" => "GET",
+        "header" => "X-Api-Key: $apiKey\r\nContent-Type: application/json\r\n"
+    ]
+];
+
+$context = stream_context_create($opts);
+$response = @file_get_contents($crmBaseUrl . $id, false, $context);
+
+if ($response === false) {
+    http_response_code(404);
+    echo json_encode(['error' => 'CRM record not found']);
+} else {
+    header('Content-Type: application/json');
+    echo $response;
+}

themes/godocs-1/assets/scss/_common.scss

@@ -430,54 +430,35 @@ $quote-color: #918e91;
   pointer-events: none;
 }
 
-/* Container voor filters */
+.form-check-input {
-#builder-filters {
+  width: 24px;
-  --primary-color: #4c9e81; /* Komt overeen met je 'Bezoek de website' knop */
+  height: 24px;
-  --checkbox-size: 24px;    /* Ongeveer 50% groter dan standaard */
-}
-
-/* De checkbox groter maken en kleur geven */
-.filter-checkbox {
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
   margin-top: 0;
   cursor: pointer;
   border: 2px solid #ced4da;
   transition: all 0.2s ease-in-out;
 }
 
-/* Kleur bij actieve/checked status */
+.form-check-input:checked {
-.filter-checkbox:checked {
+  background-color: $color-primary;
-  background-color: var(--primary-color);
+  border-color: $color-primary;
-  border-color: var(--primary-color);
 }
 
-/* Focus staat voor toegankelijkheid */
+.form-check-input:focus {
-.filter-checkbox:focus {
   box-shadow: 0 0 0 0.25 margin rgba(76, 158, 129, 0.25);
   border-color: var(--primary-color);
 }
 
-/* De labels beter uitlijnen en leesbaarder maken */
 .form-check-label {
   padding-left: 10px;
   cursor: pointer;
-  font-size: 1.1rem; /* Iets groter voor leesbaarheid */
+  line-height: 24px;
-  line-height: var(--checkbox-size);
   vertical-align: middle;
   display: inline-block;
 }
 
-/* Groepering van de checkbox en label */
 .form-check {
   display: flex;
   align-items: center;
-  margin-bottom: 1rem !important; /* Meer witruimte tussen de opties */
+  margin-bottom: 1rem !important; 
-}
-
-/* De "Filters wissen" link ook iets duidelijker maken */
-#clear-filters {
-  font-size: 1rem;
-  text-decoration: underline;
-  margin-top: 15px;
 }