{"id":9884,"date":"2024-10-21T09:25:24","date_gmt":"2024-10-21T09:25:24","guid":{"rendered":"https:\/\/simple-simon.com\/startseite\/"},"modified":"2026-10-29T10:09:47","modified_gmt":"2026-10-29T10:09:47","slug":"startseite","status":"publish","type":"page","link":"https:\/\/simple-simon.com\/de\/","title":{"rendered":"Startseite"},"content":{"rendered":"\n<!-- =====================================================================\n     Simple-Simon | Hero der aktuellen Startseite, deutsche Fassung\n     Paste this whole file into ONE Custom HTML block.\n     All styling sits inside .ssh-hero, so it cannot affect anything else\n     on your page. No JavaScript.\n\n     Die Begriffe stammen von Ihrer eigenen deutschen Website.\n\n     All images, links and copy come from your own site.\n     ===================================================================== -->\n\n<style>\n.ssh-hero{\n  --ssh-vlak:#0f4054;\n  --ssh-cyan:#4ec0e7;\n  --ssh-wit:#ffffff;\n  --ssh-zacht:#cfe4ec;\n\n  background:var(--ssh-vlak);\n  color:var(--ssh-wit);\n  font-family:\"Montserrat\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\n  -webkit-font-smoothing:antialiased;\n  padding:64px 0 56px;\n}\n.ssh-hero,.ssh-hero *{box-sizing:border-box}\n.ssh-hero p{margin:0}\n.ssh-hero a{text-decoration:none;color:inherit}\n.ssh-hero :focus-visible{outline:3px solid #ff6a00;outline-offset:3px;border-radius:4px}\n\n.ssh-wrap{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;gap:40px;align-items:center}\n@media (min-width:980px){ .ssh-wrap{grid-template-columns:1fr 1fr;gap:48px} }\n\n.ssh-hero h1{\n  margin:0 0 20px;\n  font-size:clamp(32px,4.4vw,48px);\n  line-height:1.12;\n  letter-spacing:-0.015em;\n  font-weight:800;\n  color:var(--ssh-wit);\n}\n.ssh-sub{font-size:clamp(18px,2.1vw,22px);line-height:1.45;margin-bottom:22px !important}\n.ssh-met{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-0.01em;margin-bottom:14px !important}\n.ssh-claim{font-style:italic;font-weight:700;color:var(--ssh-cyan);font-size:17px;margin-bottom:26px !important}\n\n.ssh-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:470px;margin-bottom:30px}\n@media (max-width:520px){ .ssh-knoppen{grid-template-columns:1fr} }\n.ssh-knop{\n  display:flex;align-items:center;justify-content:center;text-align:center;\n  padding:14px 18px;border-radius:6px;font-weight:700;font-size:16px;color:#fff;\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);\n  background-origin:border-box;\n  transition:filter .15s ease,transform .15s ease;\n}\n.ssh-knop:hover{filter:brightness(1.06);transform:translateY(-1px)}\n\n.ssh-visual img{width:100%;height:auto;display:block}\n\n.ssh-onder{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}\n.ssh-badge img{height:46px;width:auto;display:block}\n.ssh-rating{\n  display:inline-flex;align-items:center;gap:9px;\n  background:#fff;color:#04313c;border-radius:6px;padding:8px 14px;\n  font-size:14.5px;font-weight:600;\n}\n.ssh-sterren{display:flex;gap:2px}\n\n@media (max-width:979px){\n  .ssh-hero{padding:48px 0 40px}\n  .ssh-onder{justify-content:flex-start}\n}\n@media (prefers-reduced-motion: reduce){\n  .ssh-knop{transition:none}\n}\n<\/style>\n\n<section class=\"ssh-hero\">\n  <div class=\"ssh-wrap\">\n\n    <div>\n      <h1>Sofort den \u00dcberblick \u00fcber Ihren Au\u00dfendienst.<\/h1>\n\n      <p class=\"ssh-sub\">\n        Nie wieder einen Arbeitsauftrag verlieren.<br>\n        Nie wieder Umsatz verpassen.\n      <\/p>\n\n      <p class=\"ssh-met\">Mit Simple-Simon<\/p>\n\n      <p class=\"ssh-claim\">Schnell startklar, in k\u00fcrzester Zeit unterwegs<\/p>\n\n      <div class=\"ssh-knoppen\">\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/de\/funktionen\/arbeitsauftrags-app\/\">Arbeitsauftrags App<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/de\/funktionen\/digitale-plantafel\/\">Digitale Plantafel<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/de\/zeiterfassung-pro\/\">Zeiterfassung<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/de\/asset-management-pro\/\">Asset Management<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"ssh-visual\">\n      <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/08\/Customer-Case-Announcement-1-NL-e1787227719900.webp\"\n           alt=\"Simple-Simon Arbeitsauftrags-App auf Desktop, Tablet und Smartphone\"\n           loading=\"lazy\">\n\n      <div class=\"ssh-onder\">\n        <a class=\"ssh-badge\" href=\"https:\/\/apps.apple.com\/nl\/app\/simple-simon\/id897884395\">\n          <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/04\/appstore.png.webp\" alt=\"Im App Store laden\" loading=\"lazy\">\n        <\/a>\n        <a class=\"ssh-badge\" href=\"https:\/\/play.google.com\/store\/apps\/details?id=net.simplesimon.simon\">\n          <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/04\/playstore.png.webp\" alt=\"Jetzt bei Google Play\" loading=\"lazy\">\n        <\/a>\n\n        <span class=\"ssh-rating\">\n          <span class=\"ssh-sterren\" aria-hidden=\"true\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n          <\/span>\n          4,8\/5 bewertet\n        <\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Simple-Simon ist perfekt fuer ... (Deutsch)\r\n     Fuegen Sie diese Datei in EINEN Custom-HTML-Block auf Ihrer Seite ein.\r\n     Es gibt kein <html>, <head> oder <body>: das hat Ihre Seite bereits.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   Simple-Simon | blok: Simple-Simon is perfect voor...\r\n   Licht van zichzelf, zodat het aansluit op de andere blokken.\r\n   Alles is afgeschermd binnen .ss-sectoren, dus deze CSS raakt niets\r\n   anders op je pagina. Geen JavaScript nodig.\r\n   ===================================================================== *\/\r\n.ss-sectoren{\r\n  \/* diese Zeile auf #ffffff setzen, wenn der Block neben einem hellblauen Block steht *\/\r\n  --ss-vlak:#e5f5fa;\r\n  --ss-kaart:#ffffff;\r\n  --ss-tekst:#04313c;\r\n  --ss-tekst-zacht:#2a5468;\r\n  --ss-lijn:#c3dfeb;\r\n  --ss-icoon:#2a9fc0;\r\n  --ss-accent:#42a8cf;\r\n  --ss-schaduw:0 8px 24px rgba(4,49,60,.10);\r\n\r\n  background:var(--ss-vlak);\r\n  color:var(--ss-tekst);\r\n  font-family:\"Montserrat\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  padding:56px 0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n\/* donkere modus van het thema *\/\r\nbody.theme-dark .ss-sectoren{\r\n  --ss-vlak:#0f4054;\r\n  --ss-kaart:#14566a;\r\n  --ss-tekst:#eef8fb;\r\n  --ss-tekst-zacht:#bcdbe7;\r\n  --ss-lijn:rgba(174,214,230,.26);\r\n  --ss-icoon:#00cdef;\r\n  --ss-accent:#4ec0e7;\r\n  --ss-schaduw:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\r\n.ss-sectoren,.ss-sectoren *{box-sizing:border-box}\r\n.ss-sectoren h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;font-weight:800;color:var(--ss-tekst)}\r\n.ss-sectoren p{margin:0}\r\n.ss-sectoren a{text-decoration:none;color:inherit}\r\n.ss-sectoren :focus-visible{outline:3px solid #ff6a00;outline-offset:3px;border-radius:4px}\r\n\r\n.ss-sectoren .ss-wrap{max-width:1100px;margin:0 auto;padding:0 24px}\r\n.ss-sectoren .ss-lead{color:var(--ss-tekst-zacht);max-width:58ch}\r\n\r\n.ss-vakken{margin-top:32px;display:grid;gap:12px}\r\n@media (min-width:600px){ .ss-vakken{grid-template-columns:1fr 1fr} }\r\n@media (min-width:980px){ .ss-vakken{grid-template-columns:repeat(4,1fr)} }\r\n\r\n.ss-vak{\r\n  display:flex;flex-direction:column;gap:10px;\r\n  background:var(--ss-kaart);border:1px solid var(--ss-lijn);border-radius:12px;\r\n  padding:18px;min-height:112px;\r\n  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;\r\n}\r\n.ss-vak:hover{border-color:var(--ss-accent);box-shadow:var(--ss-schaduw);transform:translateY(-3px)}\r\n.ss-vak svg{color:var(--ss-icoon);flex:none}\r\n.ss-vak b{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ss-tekst)}\r\n\r\n\/* de achtste tegel: de uitweg, even groot maar duidelijk anders *\/\r\n.ss-ander{background:transparent;border-style:dashed}\r\n.ss-ander:hover{background:var(--ss-kaart)}\r\n.ss-ander b{color:var(--ss-tekst-zacht);font-weight:600}\r\n.ss-ander:hover b{color:var(--ss-tekst)}\r\n.ss-mee{font-size:13.5px;color:var(--ss-accent);font-weight:700;margin-top:auto}\r\n\r\n@media (max-width:599px){\r\n  .ss-sectoren{padding:44px 0}\r\n  .ss-vak{min-height:0;padding:16px}\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-vak{transition:none}\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-sectoren\" id=\"ss-sectoren\">\r\n  <div class=\"ss-wrap\">\r\n    <h2>Simple-Simon ist perfekt f\u00fcr\u2026<\/h2>\r\n    <p class=\"ss-lead\">Sieben Branchen, in denen wir die meisten Unternehmen betreuen. Machen Sie etwas anderes? Sie geh\u00f6ren trotzdem dazu.<\/p>\r\n\r\n    <div class=\"ss-vakken\" id=\"ss-vakken\">\r\n      <a class=\"ss-vak\" data-i=\"0\" href=\"https:\/\/simple-simon.com\/de\/branchen\/installationstechnik\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"12\" rx=\"2.5\"><\/rect><path d=\"M8 8v12M12 8v12M16 8v12\"><\/path><path d=\"M8 5c0-1.2 1.5-1.2 1.5-2.4\"><\/path><path d=\"M14.5 5c0-1.2 1.5-1.2 1.5-2.4\"><\/path><\/svg>\r\n        <b>Installations- und Klimatechnik<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"1\" href=\"https:\/\/simple-simon.com\/de\/branchen\/sicherheit\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2.8l7.5 3v5.4c0 4.7-3.2 8.4-7.5 10-4.3-1.6-7.5-5.3-7.5-10V5.8z\"><\/path><path d=\"M12.8 7.6L9.8 12.4h2.9l-.5 3.9 3.2-4.9h-2.9z\"><\/path><\/svg>\r\n        <b>Sicherheits- und Elektrotechnik<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"2\" href=\"https:\/\/simple-simon.com\/de\/branchen\/turtechnik\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3.2\" y=\"3.5\" width=\"17.6\" height=\"17\" rx=\"2\"><\/rect><path d=\"M3.2 8.2h17.6M3.2 12.5h17.6M3.2 16.8h17.6\"><\/path><path d=\"M14.5 18.6h3\"><\/path><\/svg>\r\n        <b>T\u00fcr- und Tortechnik<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"3\" href=\"https:\/\/simple-simon.com\/de\/branchen\/maschinenwartung\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"><\/circle><path d=\"M12 2.6v2.8M12 18.6v2.8M2.6 12h2.8M18.6 12h2.8M5.3 5.3l2 2M16.7 16.7l2 2M18.7 5.3l-2 2M7.3 16.7l-2 2\"><\/path><\/svg>\r\n        <b>Maschinenwartung<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"4\" href=\"https:\/\/simple-simon.com\/de\/branchen\/kaffeemaschinen\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 10.5h12V16a4 4 0 01-4 4H8a4 4 0 01-4-4z\"><\/path><path d=\"M16 12h1.8a2.6 2.6 0 010 5.2H16\"><\/path><path d=\"M7.5 3.2v3M11 3.2v3\"><\/path><\/svg>\r\n        <b>Kaffeemaschinen und K\u00fcchentechnik<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"5\" href=\"https:\/\/simple-simon.com\/de\/branchen\/abwassertechnik\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v8\"><\/path><path d=\"M8 8l4 4 4-4\"><\/path><path d=\"M3.5 15c1.5-1.3 3-1.3 4.5 0s3 1.3 4.5 0 3-1.3 4.5 0 3 1.3 4.5 0\"><\/path><path d=\"M3.5 19c1.5-1.3 3-1.3 4.5 0s3 1.3 4.5 0 3-1.3 4.5 0 3 1.3 4.5 0\"><\/path><\/svg>\r\n        <b>Abwassertechnik<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"6\" href=\"https:\/\/simple-simon.com\/de\/branchen\/brandschutz\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"2\"><\/rect><path d=\"M9 3.5h6a1 1 0 011 1v1H8v-1a1 1 0 011-1z\"><\/path><path d=\"M8.5 12.5l2 2 4-4.5\"><\/path><path d=\"M8 17h6\"><\/path><\/svg>\r\n        <b>Brandschutz<\/b><\/a>\r\n\r\n      <a class=\"ss-vak ss-ander\" href=\"https:\/\/simple-simon.com\/de\/branchen\/andere-branchen\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3.4\" y=\"3.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><rect x=\"13.4\" y=\"3.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><rect x=\"3.4\" y=\"13.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><path d=\"M17 13.9v6.2M13.9 17h6.2\"><\/path><\/svg>\r\n        <b>Ihre Branche ist nicht dabei?<\/b>\r\n        <span class=\"ss-mee\">Andere Branchen ansehen<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\n\n\n\n\n\t<section class=\"theme-section  theme-video-banner__wrapper  theme-p-sm-t theme-p-sm-b mb-5 mb-md-0\">\n\t\t<div class=\"container\">\n\n\t\t\t<div class=\"row justify-content-center\">\n\t\t\t\t\t\t\t\t\t<div class=\"col-md-8\">\n\t\t\t\t\t\t<div class=\"theme-video-banner__title\">\n\t\t\t\t\t\t\t<p><iframe loading=\"lazy\" title=\"Simple-Simon | DE\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-4GzSkf6M7A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Kommt Ihnen das bekannt vor? (Deutsch)\r\n     Fuegen Sie diese Datei in EINEN Custom-HTML-Block ein.\r\n     Kein <html>, <head> oder <body>: das hat Ihre Seite bereits.\r\n     Alles ist innerhalb von .ss-herken gekapselt.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n.ss-herken{\r\n  \/* auf #ffffff setzen, wenn der Block neben einem hellblauen Block steht *\/\r\n  --ss-vlak:#e5f5fa;\r\n  --ss-nu:#ffffff;\r\n  --ss-straks:#04313c;\r\n  --ss-tekst:#04313c;\r\n  --ss-tekst-zacht:#2a5468;\r\n  --ss-lijn:#c3dfeb;\r\n  --ss-lijn-donker:rgba(174,214,230,.20);\r\n  --ss-kop-straks:#9fcddc;\r\n  --ss-vink:#4ec0e7;\r\n\r\n  background:var(--ss-vlak);\r\n  color:var(--ss-tekst);\r\n  font-family:\"Montserrat\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  padding:64px 0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n\/* donkere modus van het thema *\/\r\nbody.theme-dark .ss-herken{\r\n  --ss-vlak:#0f4054;\r\n  --ss-nu:#06323c;\r\n  --ss-straks:#15718a;\r\n  --ss-tekst:#eef8fb;\r\n  --ss-tekst-zacht:#bcdbe7;\r\n  --ss-lijn:rgba(174,214,230,.26);\r\n  --ss-lijn-donker:rgba(255,255,255,.18);\r\n  --ss-kop-straks:#d6ecf3;\r\n}\r\n\r\n.ss-herken,.ss-herken *{box-sizing:border-box}\r\n.ss-herken h2{margin:0 0 28px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;font-weight:800;color:var(--ss-tekst)}\r\n.ss-herken .ss-wrap{max-width:1100px;margin:0 auto;padding:0 24px}\r\n\r\n\/* ---------- de tabel ---------- *\/\r\n\/* table-layout fixed + 50% per kolom houdt beide helften exact even breed,\r\n   ongeacht hoe lang de zinnen zijn *\/\r\n.ss-tabel{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px 0;text-align:left}\r\n.ss-tabel th{width:50%}\r\n.ss-tabel caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\r\n\r\n.ss-tabel th{\r\n  font-size:18.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;\r\n  padding:24px 26px 16px;vertical-align:bottom;\r\n}\r\n.ss-tabel td{\r\n  font-size:16px;line-height:1.45;font-weight:400;\r\n  padding:18px 26px;vertical-align:middle;\r\n}\r\n.ss-tabel th:first-child,.ss-tabel td:first-child{background:var(--ss-nu);color:var(--ss-tekst-zacht)}\r\n.ss-tabel th:last-child,.ss-tabel td:last-child{background:var(--ss-straks);color:#fff;font-weight:600}\r\n.ss-tabel th:first-child{color:var(--ss-tekst-zacht);border-bottom:1px solid var(--ss-lijn)}\r\n.ss-tabel th:last-child{color:var(--ss-kop-straks);border-bottom:1px solid var(--ss-lijn-donker)}\r\n.ss-tabel tbody tr:not(:last-child) td:first-child{border-bottom:1px solid var(--ss-lijn)}\r\n.ss-tabel tbody tr:not(:last-child) td:last-child{border-bottom:1px solid var(--ss-lijn-donker)}\r\n\r\n.ss-tabel thead th:first-child{border-radius:24px 0 0 0}\r\n.ss-tabel thead th:last-child{border-radius:0 24px 0 0}\r\n.ss-tabel tbody tr:last-child td:first-child{border-radius:0 0 0 24px}\r\n.ss-tabel tbody tr:last-child td:last-child{border-radius:0 0 24px 0}\r\n\r\n.ss-tabel td:last-child{position:relative;padding-left:52px}\r\n.ss-tabel td:last-child::before{\r\n  content:\"\";position:absolute;left:24px;top:50%;width:16px;height:12px;margin-top:-7px;\r\n  background:var(--ss-vink);\r\n  -webkit-mask:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 16'><path d='M2 8.5l5 5 11-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'\/>\") center\/contain no-repeat;\r\n  mask:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 16'><path d='M2 8.5l5 5 11-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'\/>\") center\/contain no-repeat;\r\n}\r\n\r\n\/* ---------- onder 820px: per rij het probleem met zijn oplossing eronder ---------- *\/\r\n@media (max-width:819px){\r\n  .ss-herken{padding:48px 0}\r\n  .ss-tabel,.ss-tabel tbody,.ss-tabel tr,.ss-tabel td{display:block;width:100%}\r\n  .ss-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\r\n  .ss-tabel tr{margin-bottom:12px}\r\n  .ss-tabel td{padding:16px 20px;border-bottom:0 !important}\r\n  .ss-tabel td:first-child{border-radius:14px 14px 0 0 !important}\r\n  .ss-tabel td:last-child{border-radius:0 0 14px 14px !important;padding-left:46px}\r\n  .ss-tabel td:last-child::before{left:20px}\r\n  .ss-tabel td::after{\r\n    display:block;margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;\r\n  }\r\n  .ss-tabel td:first-child::after{content:\"Wie es heute l\u00e4uft\"}\r\n  .ss-tabel td:last-child::after{content:\"Mit Simple-Simon\"}\r\n}\r\n\r\n\/* ---------- beweging alleen als er JavaScript draait ----------\r\n   Zonder deze voorwaarde zou de tekst op opacity:0 blijven staan voor\r\n   iedereen die de pagina leest zonder te scrollen, waaronder crawlers\r\n   die de pagina wel renderen maar nooit scrollen. *\/\r\n.ss-herken.ss-js .ss-tabel tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr{opacity:1;transform:none}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(2){transition-delay:.1s}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(3){transition-delay:.2s}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(4){transition-delay:.3s}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-herken.ss-js .ss-tabel tbody tr{opacity:1 !important;transform:none !important;transition:none !important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-herken\" id=\"ss-herken-de\">\r\n  <div class=\"ss-wrap\">\r\n    <h2>Kommt Ihnen das bekannt vor?<\/h2>\r\n\r\n    <table class=\"ss-tabel\">\r\n      <caption>Wie es heute bei Installations- und Servicebetrieben l\u00e4uft, und wie es mit Simple-Simon l\u00e4uft<\/caption>\r\n      <thead>\r\n        <tr>\r\n          <th scope=\"col\">Wie es heute l\u00e4uft<\/th>\r\n          <th scope=\"col\">Mit Simple-Simon<\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody>\r\n        <tr>\r\n          <td>Wir tippen alles doppelt ein, erst auf den Auftrag und dann noch einmal ins System.<\/td>\r\n          <td>Der Auftrag wird einmal ausgef\u00fcllt und steht sofort in Ihrer Buchhaltung.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Meine Monteure rufen den ganzen Tag an wegen Informationen, die sie auf ihrem Handy sehen k\u00f6nnten.<\/td>\r\n          <td>Adresse, Historie und Absprachen stehen in der App. Anrufen ist nicht mehr n\u00f6tig.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Arbeitsauftr\u00e4ge kommen zu sp\u00e4t zur\u00fcck, manchmal gar nicht. Dann verz\u00f6gert sich die Rechnungsstellung.<\/td>\r\n          <td>Unterschrieben und vollst\u00e4ndig zur\u00fcck am Tag des Auftrags.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Die Planung ist ein einziges Chaos, niemand wei\u00df genau, wer was macht.<\/td>\r\n          <td>Eine Plantafel, auf der alle denselben Tag sehen.<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sec = document.getElementById(\"ss-herken-de\");\r\n  if(!sec) return;\r\n  \/* pas nu mag de inhoud verborgen beginnen: er draait JavaScript *\/\r\n  sec.classList.add(\"ss-js\");\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"ss-go\"); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  io.observe(sec);\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Vom Auftrag zur Rechnung (Deutsch)\r\n     Fuegen Sie diese Datei in EINEN Custom-HTML-Block ein.\r\n     Kein <html>, <head> oder <body>: das hat Ihre Seite bereits.\r\n\r\n     Staan er meer Simple-Simon blokken op dezelfde pagina? Knip dan het\r\n     stuk tussen GEDEELD BASISBLOK en ALLEEN VOOR DIT BLOK hieronder weg.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Van klus tot factuur\r\n   ===================================================================== *\/\r\n\/* ========== AFSPELER ========== *\/\r\n.ss-speler{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}\r\n.ss-stappen,.ss-scherm{min-width:0}\r\n@media (min-width:900px){ .ss-speler{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center} }\r\n.ss-stappen{display:grid;gap:4px}\r\n.ss-stap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px;border-radius:var(--radius-md);\r\n  background:transparent;border:0;text-align:left;font-family:var(--font-body);cursor:pointer;color:var(--ink);transition:background-color .2s ease}\r\n.ss-stap:hover{background:rgba(78,192,231,.12)}\r\n.ss-stap .ss-k{width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--ink-muted);display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--font-display);transition:background-color .25s ease,color .25s ease}\r\n.ss-stap[aria-current=\"true\"]{background:var(--surface);box-shadow:var(--shadow-sm)}\r\n.ss-stap[aria-current=\"true\"] .ss-k{background:var(--brand-blue);color:#04313c}\r\n.ss-stap h3{font-size:17.5px;margin-bottom:4px}\r\n.ss-stap p{font-size:15px;color:var(--ink-muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease}\r\n.ss-stap[aria-current=\"true\"] p{max-height:160px;opacity:1}\r\n.ss-prog{display:none;height:3px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}\r\n.ss-stap[aria-current=\"true\"] .ss-prog{display:block}\r\n.ss-prog i{display:block;height:100%;width:0;background:var(--brand-blue-deep)}\r\n.ss-stap[aria-current=\"true\"] .ss-prog i{animation:vullen 5s linear forwards}\r\n.ss-speler.ss-pauze .ss-prog i{animation-play-state:paused}\r\n@keyframes vullen{from{width:0}to{width:100%}}\r\n\r\n.ss-scherm{background:#fff;color:#04313c;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:22px;min-height:330px}\r\n.ss-scr[hidden]{display:none}\r\n.ss-scr{animation:zacht .4s ease}\r\n@keyframes zacht{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\r\n.ss-scr-kop{font-size:13px;color:#33617d;padding-bottom:12px;border-bottom:1px solid #e3eff4;margin-bottom:14px}\r\n.ss-mboard{display:grid;grid-template-columns:54px repeat(4,minmax(0,1fr));gap:5px;font-size:11px;min-width:0}\r\n.ss-mboard>*{min-width:0}\r\n.ss-mboard .ss-jb b,.ss-mboard .ss-jb span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\r\n.ss-mboard .ss-hd{color:#33617d;font-weight:700;font-size:11px}\r\n.ss-mboard .ss-nm{font-weight:700;font-size:12px;display:flex;align-items:center}\r\n.ss-mboard .ss-sl{height:38px;border-radius:var(--radius-sm);background:#f2f8fb;border:1px solid #e6f1f6}\r\n.ss-mboard .ss-jb{height:38px;border-radius:var(--radius-sm);background:#aae1f4;border:1px solid #7fcfe9;padding:5px 6px;line-height:1.2}\r\n.ss-mboard .ss-jb b{display:block;font-size:11px}\r\n.ss-mboard .ss-jb span{font-size:10px;color:#2b5d76}\r\n.ss-mboard .ss-val{opacity:0;transform:translate(-26px,-26px)}\r\n.ss-scr.ss-aan .ss-mboard .ss-val{animation:valin .7s cubic-bezier(.3,1.3,.5,1) .3s forwards}\r\n@keyframes valin{to{opacity:1;transform:none}}\r\n.ss-ping{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;background:#e5f5fa;border-radius:var(--radius-md);padding:10px 14px;opacity:0}\r\n.ss-scr.ss-aan .ss-ping{animation:omhoog .45s ease 1.1s forwards}\r\n@keyframes omhoog{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\r\n.ss-mrij{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eef5f8;font-size:14.5px;opacity:0}\r\n.ss-scr.ss-aan .ss-mrij{animation:omhoog .4s ease forwards}\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(1){animation-delay:.2s}\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(2){animation-delay:.6s}\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(3){animation-delay:1s}\r\n.ss-mrij .ss-k{color:#33617d}\r\n.ss-mrij .ss-v{font-weight:700}\r\n.ss-msig{margin-top:14px;border:1px dashed #bcdbe7;border-radius:var(--radius-md);padding:12px 14px;background:#f7fcfe}\r\n.ss-msig div{font-size:12px;color:#33617d;margin-bottom:4px}\r\n.ss-msig path{stroke:#04313c;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240}\r\n.ss-scr.ss-aan .ss-msig path{animation:tekenen 1.1s ease 1.4s forwards}\r\n@keyframes tekenen{to{stroke-dashoffset:0}}\r\n.ss-minv{border:1px solid #e3eff4;border-radius:var(--radius-md);overflow:hidden}\r\n.ss-minv .ss-h{display:grid;grid-template-columns:minmax(0,1fr) 56px 76px;gap:10px;background:#f2f8fb;padding:10px 14px;font-size:12px;color:#33617d;font-weight:700}\r\n.ss-minv .ss-r{display:grid;grid-template-columns:minmax(0,1fr) 56px 76px;gap:10px;padding:12px 14px;border-top:1px solid #eef5f8;font-size:14px;opacity:0}\r\n.ss-scr.ss-aan .ss-minv .ss-r{animation:inschuiven .5s ease forwards}\r\n.ss-scr.ss-aan .ss-minv .ss-r:nth-of-type(1){animation-delay:.3s}\r\n.ss-scr.ss-aan .ss-minv .ss-r:nth-of-type(2){animation-delay:.7s}\r\n@keyframes inschuiven{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}\r\n.ss-okbalk{margin-top:16px;display:flex;align-items:center;gap:10px;background:#04313c;color:#fff;border-radius:var(--radius-md);padding:12px 14px;font-size:14px;opacity:0}\r\n.ss-scr.ss-aan .ss-okbalk{animation:omhoog .45s ease 1.2s forwards}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-mboard .ss-val,.ss-ping,.ss-mrij,.ss-minv .ss-r,.ss-okbalk{opacity:1 !important;transform:none !important;animation:none !important}\r\n  .ss-msig path{stroke-dashoffset:0;animation:none}\r\n}\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section\" id=\"hoe-de\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Vom Auftrag zur Rechnung, ohne Zwischenschritt<\/h2>\r\n      <p class=\"ss-lead\">Planen Sie Ihre Auftr\u00e4ge, schlie\u00dfen Sie Arbeitsauftr\u00e4ge ab und stellen Sie Rechnungen. Ohne doppelte Arbeit.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-speler\">\r\n      <div class=\"ss-stappen\" role=\"tablist\" aria-label=\"Stappen\">\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"true\" data-i=\"0\">\r\n          <span class=\"ss-k\">1<\/span>\r\n          <span>\r\n            <h3>Sie planen den Auftrag<\/h3>\r\n            <p>Setzen Sie den Auftrag auf die Plantafel, mit Adresse, Beschreibung und dem richtigen Monteur. Er sieht ihn sofort in der App, auch eine \u00c4nderung von heute Morgen.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"false\" data-i=\"1\">\r\n          <span class=\"ss-k\">2<\/span>\r\n          <span>\r\n            <h3>Der Monteur f\u00fcllt den Auftrag aus<\/h3>\r\n            <p>Vor Ort: Stunden, Material, Fotos, Checkliste und die Unterschrift des Kunden. Funktioniert auch ohne Empfang und synchronisiert, sobald er wieder online ist.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"false\" data-i=\"2\">\r\n          <span class=\"ss-k\">3<\/span>\r\n          <span>\r\n            <h3>Der Auftrag steht in Ihrer Buchhaltung<\/h3>\r\n            <p>Vollst\u00e4ndig und unterschrieben, bereit zur Abrechnung. Sie m\u00fcssen nur noch pr\u00fcfen und versenden.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"ss-scherm\">\r\n        <div class=\"ss-scr\" data-s=\"0\">\r\n          <div class=\"ss-scr-kop\">Plantafel, Mittwoch 24. September<\/div>\r\n          <div class=\"ss-mboard\">\r\n            <div class=\"ss-hd\"><\/div><div class=\"ss-hd\">Mo<\/div><div class=\"ss-hd\">Di<\/div><div class=\"ss-hd\">Mi<\/div><div class=\"ss-hd\">Do<\/div>\r\n            <div class=\"ss-nm\">Rick<\/div>\r\n            <div class=\"ss-jb\"><b>Verheij<\/b><span>Wartung<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb ss-val\"><b>De Groot<\/b><span>St\u00f6rung<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-nm\">Joost<\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Jansen<\/b><span>Installation<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Meijer<\/b><span>Wartung<\/span><\/div>\r\n            <div class=\"ss-nm\">Karin<\/div>\r\n            <div class=\"ss-jb\"><b>Dekker<\/b><span>St\u00f6rung<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Van Loon<\/b><span>Pr\u00fcfung<\/span><\/div>\r\n          <\/div>\r\n          <div class=\"ss-ping\">\r\n            <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n            Rick hat den Auftrag auf seinem Handy\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ss-scr\" data-s=\"1\" hidden=\"\">\r\n          <div class=\"ss-scr-kop\">Arbeitsauftrag 24-1187, De Groot in Tilburg<\/div>\r\n          <div class=\"ss-mrij\"><span class=\"ss-k\">Stunden<\/span><span class=\"ss-v\">2,5 Stunden<\/span><\/div>\r\n          <div class=\"ss-mrij\"><span class=\"ss-k\">Material<\/span><span class=\"ss-v\">Remeha Filter<\/span><\/div>\r\n          <div class=\"ss-mrij\"><span class=\"ss-k\">Fotos<\/span><span class=\"ss-v\">3 hinzugef\u00fcgt<\/span><\/div>\r\n          <div class=\"ss-msig\">\r\n            <div>Unterschrift des Kunden<\/div>\r\n            <svg viewbox=\"0 0 132 34\" height=\"34\" width=\"132\" aria-hidden=\"true\"><path d=\"M4 26c8-16 13-19 16-9s6 12 11 2 8-13 12-4 6 13 11 5 9-11 13-3 8 9 14 3 10-8 14-5 8 6 12 4\"><\/path><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ss-scr\" data-s=\"2\" hidden=\"\">\r\n          <div class=\"ss-scr-kop\">Ihre Buchhaltung, noch abzurechnen<\/div>\r\n          <div class=\"ss-minv\">\r\n            <div class=\"ss-h\"><span>Kunde<\/span><span>Stunden<\/span><span>Betrag<\/span><\/div>\r\n            <div class=\"ss-r\"><span>De Groot<\/span><span>2,5<\/span><b>\u20ac 237,50<\/b><\/div>\r\n            <div class=\"ss-r\"><span>Verheij<\/span><span>1,5<\/span><b>\u20ac 142,50<\/b><\/div>\r\n          <\/div>\r\n          <div class=\"ss-okbalk\">\r\n            <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#4ec0e7\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n            Niemand hat etwas abgetippt\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"go\"); klaar(e.target); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){ io.observe(el); });\r\n\r\n  function klaar(el){ if(el.id === 'hoe-de') startSpeler(); }\r\n\r\nfunction startSpeler(){\r\n  var sec = document.getElementById(\"hoe-de\");\r\n  if(!sec || sec.dataset.gestart) return;\r\n  sec.dataset.gestart = \"1\";\r\n\r\n  var speler   = sec.querySelector(\".ss-speler\");\r\n  var knoppen  = Array.prototype.slice.call(sec.querySelectorAll(\".ss-stap\"));\r\n  var schermen = Array.prototype.slice.call(sec.querySelectorAll(\".ss-scr\"));\r\n  var rustig   = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n  var DUUR = 5000;\r\n  var i = 0, timer = null;\r\n  var inBeeld = false, zweeft = false, handmatig = false;\r\n\r\n  function teken(n){\r\n    i = n;\r\n    knoppen.forEach(function(k, x){ k.setAttribute(\"aria-current\", x === n ? \"true\" : \"false\"); });\r\n    schermen.forEach(function(sc, x){ sc.hidden = x !== n; sc.classList.toggle(\"ss-aan\", x === n); });\r\n  }\r\n\r\n  function stop(){\r\n    clearTimeout(timer); timer = null;\r\n    if(speler) speler.classList.add(\"ss-pauze\");\r\n  }\r\n\r\n  \/* blijft rondlopen: na stap 3 weer naar stap 1 *\/\r\n  function tik(){\r\n    clearTimeout(timer); timer = null;\r\n    if(rustig || handmatig || !inBeeld || zweeft){ if(speler) speler.classList.add(\"ss-pauze\"); return; }\r\n    if(speler) speler.classList.remove(\"ss-pauze\");\r\n    timer = setTimeout(function(){ teken((i + 1) % schermen.length); tik(); }, DUUR);\r\n  }\r\n\r\n  \/* klikt iemand zelf een stap aan, dan neemt hij het over en stopt het rondlopen *\/\r\n  knoppen.forEach(function(k){\r\n    k.addEventListener(\"click\", function(){\r\n      handmatig = true; stop();\r\n      teken(parseInt(k.dataset.i, 10));\r\n    });\r\n  });\r\n\r\n  \/* alleen tellen zolang het blok in beeld staat, zodat het nooit is afgelopen\r\n     tegen de tijd dat de bezoeker er aankomt *\/\r\n  var kijker = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){\r\n      inBeeld = e.isIntersecting;\r\n      if(inBeeld) tik(); else stop();\r\n    });\r\n  }, {threshold:.35});\r\n  kijker.observe(sec);\r\n\r\n  \/* staat de muis erop, dan leest iemand mee: even wachten *\/\r\n  if(speler){\r\n    speler.addEventListener(\"mouseenter\", function(){ zweeft = true; stop(); });\r\n    speler.addEventListener(\"mouseleave\", function(){ zweeft = false; tik(); });\r\n  }\r\n\r\n  teken(0);\r\n  tik();\r\n}\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Wor\u00fcber Sie die Kontrolle bekommen (Deutsch)\r\n     Paste this whole file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body> in here: your page has that.\r\n\r\n     Gleiches Markup, gleiche Gestaltung und gleiches Script wie beim\r\n     niederl\u00e4ndischen Block. Nur die Texte und die vier Links sind anders.\r\n\r\n     Running more Simple-Simon blocks on the same page? Cut out the part\r\n     between GEDEELD BASISBLOK and ALLEEN VOOR DIT BLOK below.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Waar je grip op krijgt\r\n   ===================================================================== *\/\r\n\/* ========== MINDMAP ========== *\/\r\n.ss-mindmap{position:relative;max-width:860px;margin:0 auto;min-height:460px}\r\n.ss-mlijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}\r\n.ss-mlijnen .ss-ln{fill:none;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}\r\n.ss-go .ss-mlijnen .ss-ln{animation:lijn .75s ease forwards}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(1){animation-delay:.05s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(2){animation-delay:.2s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(3){animation-delay:.35s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(4){animation-delay:.5s}\r\n@keyframes lijn{to{stroke-dashoffset:0}}\r\n.ss-mhub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:156px;height:156px;border-radius:50%;\r\n  background:var(--brand-blue-soft);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 12px rgba(170,225,244,.3);opacity:0}\r\n.ss-go .ss-mhub{animation:plop .55s cubic-bezier(.3,1.4,.5,1) forwards}\r\n.ss-mhub img{width:92px;height:auto}\r\n@keyframes plop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}\r\n.ss-mnode{position:absolute;width:252px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);\r\n  padding:18px;box-shadow:var(--shadow-sm);z-index:2;opacity:0;transform:translateY(10px) scale(.97);\r\n  transition:border-color .18s ease,box-shadow .18s ease}\r\n.ss-go .ss-mnode{animation:knoopin .45s cubic-bezier(.3,1.2,.5,1) forwards}\r\n.ss-go .ss-m1{animation-delay:.5s} .ss-go .ss-m2{animation-delay:.68s}\r\n.ss-go .ss-m3{animation-delay:.86s} .ss-go .ss-m4{animation-delay:1.04s}\r\n@keyframes knoopin{to{opacity:1;transform:none}}\r\n.ss-mnode:hover{border-color:var(--brand-blue);box-shadow:var(--shadow-card)}\r\n.ss-mnode h3{font-size:17px;margin-bottom:6px}\r\n.ss-mnode p{font-size:14.5px;color:var(--ink-muted);line-height:1.45}\r\n.ss-m1{left:0;top:14px} .ss-m2{right:0;top:14px}\r\n.ss-m3{left:0;bottom:14px} .ss-m4{right:0;bottom:14px}\r\n.ss-mbtn{display:inline-block;margin-top:13px;text-decoration:none;font-family:var(--font-display);font-weight:700;\r\n  font-size:13.5px;color:#fff;padding:8px 15px;border-radius:8px;\r\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);transition:filter .15s ease,transform .15s ease}\r\n.ss-mbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}\r\n\/* ---------- onder 900px: geen mindmap meer, maar een stapel ---------- *\/\r\n@media (max-width:899px){\r\n  .ss-mindmap{min-height:0;display:grid;gap:12px}\r\n\r\n  \/* de lijnen en de mascotte dragen de betekenis van een mindmap.\r\n     Zonder lijnen is de mascotte alleen nog een plaatje dat ruimte kost,\r\n     dus die blijft op mobiel weg. *\/\r\n  .ss-mlijnen{display:none}\r\n  .ss-mhub{display:none}\r\n\r\n  .ss-mnode{position:static;width:auto;padding:16px 18px}\r\n  .ss-mnode h3{font-size:16.5px;margin-bottom:5px}\r\n  .ss-mnode p{font-size:14.5px}\r\n  .ss-mbtn{margin-top:12px;padding:9px 16px}\r\n\r\n  \/* de opbouw hoeft niet meer op de lijnen te wachten *\/\r\n  .ss-go .ss-m1{animation-delay:.04s}\r\n  .ss-go .ss-m2{animation-delay:.12s}\r\n  .ss-go .ss-m3{animation-delay:.20s}\r\n  .ss-go .ss-m4{animation-delay:.28s}\r\n}\r\n\r\n\/* tussen tablet en desktop passen er twee naast elkaar *\/\r\n@media (min-width:700px) and (max-width:899px){\r\n  .ss-mindmap{grid-template-columns:1fr 1fr;gap:14px}\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-mnode,.ss-mhub{opacity:1 !important;transform:none !important;animation:none !important}\r\n  .ss-mlijnen .ss-ln{stroke-dashoffset:0;animation:none}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section ss-tint\" id=\"sectoren\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Wor\u00fcber Sie die Kontrolle bekommen<\/h2>\r\n      <p class=\"ss-lead\">Vier starke Funktionen, ein einfaches System. Mehr \u00dcberblick, weniger Verwaltung.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-mindmap\" id=\"mindmap\">\r\n      <svg class=\"ss-mlijnen\" id=\"mlijnen\" viewbox=\"0 0 860 460\" preserveaspectratio=\"none\" aria-hidden=\"true\"><\/svg>\r\n      <div class=\"ss-mhub\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/07\/SS-logo.png\" alt=\"Simple-Simon\" width=\"246\" height=\"299\"\/><\/div>\r\n\r\n      <div class=\"ss-mnode ss-m1\">\r\n        <h3>Arbeitsauftrags App<\/h3>\r\n        <p>Digitale Arbeitsauftr\u00e4ge mit Stunden, Material, Fotos und Unterschrift. Auch offline nutzbar.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/de\/funktionen\/arbeitsauftrags-app\/\">Arbeitsauftrags App<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m2\">\r\n        <h3>Digitale Plantafel<\/h3>\r\n        <p>Alle Auftr\u00e4ge und Monteure in einem \u00dcberblick. Verschieben Sie einen Auftrag und jeder wei\u00df Bescheid.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/de\/funktionen\/digitale-plantafel\/\">Digitale Plantafel<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m3\">\r\n        <h3>Zeiterfassung<\/h3>\r\n        <p>Stunden, die direkt am Auftrag erfasst werden, nicht hinterher aus dem Ged\u00e4chtnis.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/de\/zeiterfassung-pro\/\">Zeiterfassung<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m4\">\r\n        <h3>Asset Management<\/h3>\r\n        <p>Jeder Heizkessel oder jede Anlage mit eigener Historie, eigenem Vertrag und n\u00e4chstem Wartungstermin.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/de\/asset-management-pro\/\">Asset Management<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"ss-go\"); klaar(e.target); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){ io.observe(el); });\r\n\r\n  function klaar(el){ if(el.id === 'sectoren') bouwLijnen(); }\r\n\r\nvar RAILS = [\r\n  \"M368,186 C312,186 312,100 256,100\",\r\n  \"M492,186 C548,186 548,100 604,100\",\r\n  \"M368,274 C312,274 312,360 256,360\",\r\n  \"M492,274 C548,274 548,360 604,360\"\r\n];\r\nfunction bouwLijnen(){\r\n  var svg = document.getElementById(\"mlijnen\");\r\n  if(!svg) return;\r\n  var rustig = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n  svg.innerHTML =\r\n    RAILS.map(function(d){ return '<path class=\"ss-ln\" d=\"'+d+'\" stroke=\"#42a8cf\" stroke-width=\"2.5\"\/>'; }).join(\"\") +\r\n    (rustig ? \"\" : RAILS.map(function(){ return '<circle class=\"ss-stip\" r=\"4.5\" fill=\"#f97617\" opacity=\"0\"\/>'; }).join(\"\"));\r\n\r\n  if(rustig) return;\r\n\r\n  \/* De stippen worden met requestAnimationFrame over de lijn bewogen.\r\n     Eerder gebeurde dat met SMIL (animateMotion), maar die rekent zijn\r\n     starttijd vanaf het laden van de pagina en dat liep mis zodra iemand\r\n     pas later naar dit blok scrolde. *\/\r\n  var paden   = svg.querySelectorAll(\"path\");\r\n  var stippen = svg.querySelectorAll(\"circle\");\r\n  var lengtes = Array.prototype.map.call(paden, function(p){ return p.getTotalLength(); });\r\n\r\n  var CYCLUS = 2000;   \/* milliseconden per ronde *\/\r\n  var LOOP   = 0.65;   \/* dit deel van de ronde is de stip onderweg *\/\r\n  var VERSCHUIF = 0.09;\/* onderlinge vertraging tussen de vier stippen *\/\r\n  var start = null;\r\n\r\n  function teken(t){\r\n    if(start === null) start = t;\r\n    var ms = t - start;\r\n    for(var i = 0; i < stippen.length; i++){\r\n      var fase = ((((ms \/ CYCLUS) - i * VERSCHUIF) % 1) + 1) % 1;\r\n      if(fase > LOOP){ stippen[i].setAttribute(\"opacity\", 0); continue; }\r\n      var punt = paden[i].getPointAtLength(lengtes[i] * (fase \/ LOOP));\r\n      stippen[i].setAttribute(\"cx\", punt.x);\r\n      stippen[i].setAttribute(\"cy\", punt.y);\r\n      var o = fase < 0.06 ? fase \/ 0.06\r\n            : (fase > LOOP - 0.06 ? (LOOP - fase) \/ 0.06 : 1);\r\n      stippen[i].setAttribute(\"opacity\", o);\r\n    }\r\n    requestAnimationFrame(teken);\r\n  }\r\n  \/* even wachten tot de lijnen getekend zijn *\/\r\n  setTimeout(function(){ requestAnimationFrame(teken); }, 800);\r\n}\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Ihre eigenen Systeme bleiben f\u00fchrend (Deutsch)\r\n     Paste this whole file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body> in here: your page has that.\r\n\r\n     Same markup, styling and script as the Dutch block. The copy follows\r\n     your own English homepage. The links point to \/en\/integrations\/.\r\n\r\n     Die 15 Systeme stammen aus Ihrer eigenen deutschen Integrationsuebersicht\r\n     und sind damit genau die, die in Deutschland verfuegbar sind.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --ss-zoek-zacht:#4d7488;   \/* plaatshouder en loepje in het zoekveld *\/\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --ss-zoek-zacht:#aed3e0;\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Koppelingen\r\n   ===================================================================== *\/\r\n\/* ========== KOPPELINGEN ========== *\/\r\n\/* het zoekveld heeft javascript nodig; zonder script blijft het verborgen\r\n   en houd je gewoon de bladerbare lijst over *\/\r\n.ss-zoekveld,.ss-zoekuit{display:none}\r\n.ss-js .ss-zoekveld{display:block}\r\n.ss-js .ss-zoekuit{display:block}\r\n.ss-zoekveld{max-width:520px;position:relative}\r\n.ss-zoekveld input{width:100%;font-family:var(--font-body);font-size:17px;color:var(--ink);background:var(--surface);\r\n  border:2px solid var(--line);border-radius:var(--radius-pill);padding:15px 20px 15px 50px;outline:none}\r\n.ss-zoekveld input:focus{border-color:var(--brand-blue)}\r\n\/* tekst, cursor, plaatshouder en het loepje volgen allemaal de modus *\/\r\n.ss-zoekveld input{caret-color:var(--brand-blue-deep)}\r\n.ss-zoekveld input::placeholder{color:var(--ss-zoek-zacht);opacity:1}\r\n.ss-zoekveld input::-webkit-input-placeholder{color:var(--ss-zoek-zacht);opacity:1}\r\n.ss-loep{position:absolute;left:19px;top:16px;pointer-events:none;color:var(--ss-zoek-zacht)}\r\n@media (max-width:599px){ .ss-zoekveld input{font-size:15.5px;padding:14px 16px 14px 46px} .ss-loep{left:17px;top:15px} }\r\n.ss-zoekuit{margin-top:14px;min-height:28px}\r\n.ss-treffers{display:flex;flex-wrap:wrap;gap:10px}\r\n.ss-kchip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);\r\n  border-radius:var(--radius-pill);padding:9px 17px;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);\r\n  white-space:nowrap;transition:color .15s ease,border-color .15s ease,transform .15s ease}\r\n.ss-kchip:hover,.ss-kchip:focus-visible{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;border-color:transparent;color:#fff;transform:translateY(-1px)}\r\n.ss-kchip:hover svg,.ss-kchip:focus-visible svg{color:#fff}\r\n.ss-kchip svg{color:var(--brand-blue-deep)}\r\n.ss-zmeta{margin-top:16px;font-size:15px;color:var(--ink-muted)}\r\n.ss-zgeen{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand-orange);\r\n  border-radius:var(--radius-md);padding:16px 20px;font-size:16px;max-width:600px}\r\n.ss-band{margin:22px auto 0;max-width:calc(var(--maxw) - 2 * var(--space-5));overflow:hidden;transition:opacity .25s ease;\r\n  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);\r\n  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}\r\n.ss-baan{display:flex;gap:12px;width:max-content;animation:schuif 34s linear infinite}\r\n.ss-baan.ss-terug{animation-direction:reverse;animation-duration:42s;margin-top:12px}\r\n.ss-band:hover .ss-baan{animation-play-state:paused}\r\n@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n#koppelingen-de.ss-zoekt .ss-band{opacity:.35}\r\n#koppelingen-de.ss-zoekt .ss-baan{animation-play-state:paused}\r\n\/* padding in plaats van margin: een margin kan door het thema worden\r\n   teruggezet of samenvallen met een andere marge, padding vrijwel nooit *\/\r\n.ss-bandvoet{margin-top:0 !important;padding-top:56px !important}\r\n.ss-bandvoet p{margin:0}\r\n.ss-bandvoet p{font-size:16px;color:var(--ink-muted)}\r\n\r\n@media (prefers-reduced-motion: reduce){ .ss-baan{animation:none !important;transform:none} }\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section\" id=\"koppelingen-de\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Ihre eigenen Systeme bleiben f\u00fchrend<\/h2>\r\n      <p class=\"ss-lead\">Simple-Simon l\u00e4sst sich mit 15 Systemen verbinden, von Buchhaltung und ERP \u00fcber CRM bis zum Kalender. So arbeiten alle Ihre Systeme zusammen, ohne doppelte Eingabe.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-zoekveld\">\r\n      <svg class=\"ss-loep\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><path d=\"M13.5 13.5L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\r\n      <input type=\"search\" id=\"zoek-de\" placeholder=\"Ihr ERP-, CRM- oder Buchhaltungssystem suchen\" aria-label=\"Ihr ERP-, CRM- oder Buchhaltungssystem suchen\"\/>\r\n    <\/div>\r\n    <div class=\"ss-zoekuit\" id=\"zoekuit-de\" aria-live=\"polite\"><p class=\"ss-zmeta\">Oder st\u00f6bern Sie in der Liste unten.<\/p><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ss-band\" id=\"band-de\">\r\n    <!-- Die Chips stehen fest im HTML, damit das Karussell auch ohne Script funktioniert. -->\r\n    <div class=\"ss-baan\" id=\"baan1-de\"><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/exact\/\">Exact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/microsoft-business-central\/\">Microsoft Business Central<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/microsoft-bookings\/\">Microsoft Bookings<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/hubspot\/\">HubSpot<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/bjorn-lunden\/\">Bjorn Lunden<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/billit\/\">Billit<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/topdesk\/\">Topdesk<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/intuit-quickbooks\/\">Intuit QuickBooks<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/exact\/\">Exact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/microsoft-business-central\/\">Microsoft Business Central<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/microsoft-bookings\/\">Microsoft Bookings<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/hubspot\/\">HubSpot<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/bjorn-lunden\/\">Bjorn Lunden<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/billit\/\">Billit<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/topdesk\/\">Topdesk<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/intuit-quickbooks\/\">Intuit QuickBooks<\/a><\/div>\r\n    <div class=\"ss-baan ss-terug\" id=\"baan2-de\"><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sage-tech-partner\/\">Sage<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/easybill\/\">easybill<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sevdesk\/\">sevDesk<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sap-business-one\/\">SAP Business One<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/apple-kalender\/\">Apple Kalender<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/outlook-kalender\/\">Outlook Kalender<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/google-kalendar\/\">Google Kalender<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sage-tech-partner\/\">Sage<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/easybill\/\">easybill<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sevdesk\/\">sevDesk<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/sap-business-one\/\">SAP Business One<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/apple-kalender\/\">Apple Kalender<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/outlook-kalender\/\">Outlook Kalender<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/de\/integrationen\/google-kalendar\/\">Google Kalender<\/a><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ss-wrap ss-bandvoet\">\r\n    <p>Ihr System ist nicht dabei? Fragen Sie einfach nach, wir erg\u00e4nzen regelm\u00e4\u00dfig neue Integrationen.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/* ---------- koppelingen: zoeken en de twee banen ---------- *\/\r\n(function(){\r\n  var PAKKETTEN = [\r\n  [\"Exact\",\"exact\"],\r\n  [\"Microsoft Business Central\",\"microsoft-business-central\"],\r\n  [\"Microsoft Bookings\",\"microsoft-bookings\"],\r\n  [\"HubSpot\",\"hubspot\"],\r\n  [\"Bjorn Lunden\",\"bjorn-lunden\"],\r\n  [\"Billit\",\"billit\"],\r\n  [\"Topdesk\",\"topdesk\"],\r\n  [\"Intuit QuickBooks\",\"intuit-quickbooks\"],\r\n  [\"Sage\",\"sage-tech-partner\"],\r\n  [\"easybill\",\"easybill\"],\r\n  [\"sevDesk\",\"sevdesk\"],\r\n  [\"SAP Business One\",\"sap-business-one\"],\r\n  [\"Apple Kalender\",\"apple-kalender\"],\r\n  [\"Outlook Kalender\",\"outlook-kalender\"],\r\n  [\"Google Kalender\",\"google-kalendar\"]\r\n  ];\r\n  var BASIS = \"https:\/\/simple-simon.com\/de\/integrationen\/\";\r\n  function kchip(item, vink){\r\n    var v = vink ? '<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"currentColor\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' : '';\r\n    return '<a class=\"ss-kchip\" href=\"'+BASIS+item[1]+'\/\">'+v+item[0]+'';\r\n  }\r\n\r\n  var sec = document.getElementById(\"koppelingen-de\");\r\n  var inp = document.getElementById(\"zoek-de\");\r\n  var uit = document.getElementById(\"zoekuit-de\");\r\n  if(!inp || !uit || !sec) return;\r\n  sec.classList.add(\"ss-js\");   \/* pas nu mag het zoekveld zichtbaar worden *\/\r\n\r\n  function toon(){\r\n    var q = inp.value.trim().toLowerCase();\r\n    sec.classList.toggle(\"ss-zoekt\", q.length > 0);\r\n    if(!q){ uit.innerHTML = '<p class=\"ss-zmeta\">Oder st\u00f6bern Sie in der Liste unten.'; return; }\r\n    var hits = PAKKETTEN.filter(function(it){ return it[0].toLowerCase().indexOf(q) > -1; });\r\n    if(hits.length){\r\n      uit.innerHTML = '<div class=\"ss-treffers\">'+hits.map(function(it){ return kchip(it,true); }).join(\"\")+'<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Zufriedene Kunden, grossartige Ergebnisse (Deutsch)\r\n     Gleiche Gestaltung wie die niederlaendische Fassung, nur uebersetzt.\r\n     Die Zitate stammen von niederlaendischen Kunden; die deutschen Saetze\r\n     sind Uebersetzungen, keine Originalzitate.\r\n     ===================================================================== -->\r\n\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Zufriedene Kunden, gro\u00dfartige Ergebnisse<\/title>\r\n<style>\r\n  :root {\r\n    --sb-dark: #06323C;\r\n    --sb-cyan: #08C8EA;\r\n    --sb-orange-1: #FF9F00;\r\n    --sb-orange-2: #FF4D00;\r\n    --sb-card: #FFFFFF;\r\n    --sb-ink: #06323C;\r\n    --sb-ink-soft: #5C7176;\r\n    --sb-line: #E3E7E6;\r\n    --sb-divider: #4A6A70;\r\n    --sb-badge-bg: #FFFFFF;\r\n    --sb-badge-shadow: 0 1px 4px rgba(6,50,60,0.12);\r\n    --sb-heading: #04313C;\r\n    --sb-badge-selected-bg: var(--sb-dark);\r\n    --sb-badge-selected-text: #fff;\r\n    --sb-badge-selected-sub: #9FB0B3;\r\n    --sb-gradient-rgb: 6,50,60;\r\n    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  }\r\n\r\n  body.theme-dark {\r\n    --sb-card: #0E4450;\r\n    --sb-ink: #F2F6F6;\r\n    --sb-ink-soft: #A9C0C3;\r\n    --sb-line: rgba(255,255,255,0.18);\r\n    --sb-divider: rgba(255,255,255,0.28);\r\n    --sb-badge-bg: rgba(255,255,255,0.08);\r\n    --sb-badge-shadow: none;\r\n    --sb-heading: #F2F6F6;\r\n    --sb-badge-selected-bg: var(--sb-cyan);\r\n    --sb-badge-selected-text: #06323C;\r\n    --sb-badge-selected-sub: #0E3A42;\r\n    --sb-gradient-rgb: 2,10,12;\r\n  }\r\n\r\n  * { box-sizing: border-box; }\r\n\r\n  section.cases {\r\n    font-family: \"Montserrat\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    -webkit-font-smoothing: antialiased;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    padding: 88px 32px 96px;\r\n  }\r\n\r\n  .cases-head {\r\n    margin: 0 0 56px;\r\n    text-align: left;\r\n  }\r\n\r\n  .cases-head h2 {\r\n    font-size: clamp(26px, 3.4vw, 38px);\r\n    line-height: 1.15;\r\n    letter-spacing: -0.015em;\r\n    margin: 0 0 14px;\r\n    font-weight: 800;\r\n    color: var(--sb-heading);\r\n  }\r\n\r\n  .cases-head p {\r\n    margin: 0;\r\n    max-width: 640px;          \/* de kop mag de volle breedte, de ondertitel blijft leesbaar smal *\/\r\n    font-size: 17px;\r\n    line-height: 1.5;\r\n    color: var(--sb-ink-soft);\r\n  }\r\n\r\n  \/* Sector badges *\/\r\n  .logobar {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: 28px 24px;\r\n    margin-bottom: 64px;\r\n    border-top: 1px solid var(--sb-divider);\r\n    border-bottom: 1px solid var(--sb-divider);\r\n  }\r\n\r\n  .sector-badge {\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    gap: 1px;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    background: var(--sb-badge-bg);\r\n    box-shadow: var(--sb-badge-shadow);\r\n    white-space: nowrap;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    text-align: left;\r\n    text-decoration: none;\r\n    color: inherit;\r\n    transition: background 0.15s ease, transform 140ms var(--ease-out);\r\n  }\r\n\r\n  .sector-badge:active { transform: scale(0.97); }\r\n  .sector-badge.is-selected { background: var(--sb-badge-selected-bg); }\r\n  .sector-badge.is-selected .sector { color: var(--sb-badge-selected-text); }\r\n  .sector-badge.is-selected .company { color: var(--sb-badge-selected-sub); }\r\n  .sector-badge .sector { font-size: 13px; font-weight: 700; color: var(--sb-heading); }\r\n  .sector-badge .company { font-size: 11.5px; color: var(--sb-ink-soft); }\r\n\r\n  \/* Single-case stage *\/\r\n  .stage-wrap {\r\n    max-width: 920px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n  }\r\n\r\n  .stage-arrow {\r\n    flex-shrink: 0;\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    border: 1px solid var(--sb-line);\r\n    background: var(--sb-card);\r\n    color: var(--sb-heading);\r\n    font-size: 18px;\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: transform 150ms var(--ease-out), border-color 0.15s ease;\r\n  }\r\n\r\n  .stage-arrow:active { transform: scale(0.93); }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .stage-arrow:hover { border-color: var(--sb-cyan); }\r\n  }\r\n\r\n  .stage { position: relative; flex-grow: 1; min-width: 0; }\r\n\r\n  \/* Full-bleed photo card with text overlay *\/\r\n  .case-card {\r\n    display: none;\r\n    position: relative;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    aspect-ratio: 16 \/ 9;\r\n    background-size: cover;\r\n    background-position: center;\r\n    opacity: 1;\r\n    transition: opacity 200ms var(--ease-out);\r\n  }\r\n\r\n  .case-card.is-active { display: flex; align-items: flex-end; }\r\n  .case-card.is-leaving { opacity: 0; }\r\n\r\n  .case-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(var(--sb-gradient-rgb),0) 22%, rgba(var(--sb-gradient-rgb),0.42) 52%, rgba(var(--sb-gradient-rgb),0.93) 100%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .case-content {\r\n    position: relative;\r\n    z-index: 1;\r\n    width: 100%;\r\n    padding: 36px 40px 34px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  .result {\r\n    font-size: 28px;\r\n    line-height: 1.2;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    letter-spacing: -0.01em;\r\n    text-shadow: 0 1px 12px rgba(0,0,0,0.15);\r\n  }\r\n\r\n  .result .accent { color: #5FD3EA; }\r\n\r\n  .quote {\r\n    font-size: 15.5px;\r\n    line-height: 1.55;\r\n    color: #E3ECEE;\r\n    margin: 0;\r\n    max-width: 46em;\r\n  }\r\n\r\n  .person {\r\n    display: flex;\r\n    align-items: center;\r\n    padding-top: 16px;\r\n    border-top: 1px solid rgba(255,255,255,0.25);\r\n  }\r\n\r\n  .person-name { font-size: 13.5px; line-height: 1.4; }\r\n  .person-name strong { display: block; font-weight: 700; color: #fff; }\r\n  .person-name span { color: #B9C9CB; }\r\n\r\n  \/* Dots *\/\r\n  .dots {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 28px;\r\n  }\r\n\r\n  .dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 100px;\r\n    background: var(--sb-line);\r\n    border: none;\r\n    padding: 0;\r\n    cursor: pointer;\r\n    transition: width 220ms var(--ease-out), background 0.15s ease, transform 140ms var(--ease-out);\r\n  }\r\n\r\n  .dot:active { transform: scale(0.9); }\r\n  .dot.is-active { width: 24px; background: var(--sb-cyan); }\r\n\r\n  \/* CTA row *\/\r\n  .cta-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    margin-top: 56px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .btn {\r\n    display: inline-block;\r\n    padding: 13px 26px;\r\n    border-radius: 8px;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    text-decoration: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: transform 150ms var(--ease-out);\r\n  }\r\n\r\n  .btn:active { transform: scale(0.97); }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .btn:hover { transform: scale(1.02); }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .btn, .btn:hover, .btn:active,\r\n    .stage-arrow, .stage-arrow:active,\r\n    .dot, .dot:active,\r\n    .case-card { transform: none !important; transition: none !important; }\r\n  }\r\n\r\n  .btn-primary {\r\n    background: linear-gradient(90deg, var(--sb-orange-1), var(--sb-orange-2));\r\n    color: #fff;\r\n  }\r\n\r\n  .btn-secondary {\r\n    background: transparent;\r\n    color: var(--sb-heading);\r\n    border: 1.5px solid var(--sb-line);\r\n  }\r\n\r\n  @media (max-width: 700px) {\r\n    section.cases { padding: 56px 20px 64px; }\r\n    .logobar { gap: 8px; }\r\n    .stage-wrap { gap: 8px; }\r\n    .case-content { padding: 26px 24px 24px; }\r\n    .result { font-size: 22px; }\r\n    .quote { font-size: 14px; }\r\n    .stage-arrow { width: 34px; height: 34px; font-size: 16px; }\r\n  }\r\n<\/style>\r\n\r\n\r\n\r\n<section class=\"cases\">\r\n\r\n  <div class=\"cases-head\">\r\n    <h2>Zufriedene Kunden, gro\u00dfartige Ergebnisse<\/h2>\r\n    <p>Sechs Unternehmen, f\u00fcnf Branchen, ein Muster: weniger Aufwand und mehr \u00dcberblick, sobald der Arbeitsauftrag digital ist.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"logobar\">\r\n    <button class=\"sector-badge\" data-case=\"cor\"><span class=\"sector\">Abwassertechnik<\/span><span class=\"company\">COR<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"savona\"><span class=\"sector\">Installationstechnik<\/span><span class=\"company\">Savona<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"okhygiene\"><span class=\"sector\">Reinigung &#038; Hygiene<\/span><span class=\"company\">OK Hygi\u00ebne<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"pmt\"><span class=\"sector\">Sicherheit<\/span><span class=\"company\">PMT Smartpoint<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"campenaar\"><span class=\"sector\">Kaffeemaschinen<\/span><span class=\"company\">Campenaar<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"filax\"><span class=\"sector\">Andere Branchen<\/span><span class=\"company\">Filax<\/span><\/button>\r\n  <\/div>\r\n\r\n  <div class=\"stage-wrap\">\r\n    <button class=\"stage-arrow\" id=\"prevBtn-de\" aria-label=\"Vorheriger Kundenfall\">\u2039<\/button>\r\n\r\n    <div class=\"stage\">\r\n\r\n      <div class=\"case-card is-active\" data-case=\"campenaar\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Coffee-Campenaar.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">Von 3,5 Stunden auf <span class=\"accent\">30 Minuten<\/span> pro Tag<\/div>\r\n          <p class=\"quote\">\u201eFr\u00fcher brauchten wir etwa 3,5 Stunden pro Tag f\u00fcr die Bearbeitung der Arbeitsauftr\u00e4ge. Jetzt sind wir in einer halben Stunde fertig.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Geert-Jan Snoeier<\/strong>\r\n              <span>Betriebsleiter, Campenaar Koffie<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"okhygiene\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/OK-hygien.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\"><span class=\"accent\">8 bis 10 Stunden<\/span> pro Woche gespart<\/div>\r\n          <p class=\"quote\">\u201eSeit wir mit Simple-Simon arbeiten, sparen wir sicher 8 bis 10 Stunden pro Woche, und es werden deutlich weniger Fehler gemacht.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>OK Hygi\u00ebne<\/strong>\r\n              <span>Familienbetrieb, landesweit t\u00e4tig<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"pmt\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/PMT-uitzoom.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">Rund 900 Arbeitsauftr\u00e4ge pro Woche, <span class=\"accent\">2 Tage<\/span> schneller abrechnen<\/div>\r\n          <p class=\"quote\">\u201eWir erstellen rund 900 Arbeitsauftr\u00e4ge pro Woche. Dank der Anbindung an Exact sind wir jetzt sicher zwei Tage pro Woche fr\u00fcher mit der Rechnungsstellung fertig.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Milan Navis<\/strong>\r\n              <span>Operations Manager, PMT Smartpoint<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"savona\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Savona.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\"><span class=\"accent\">10 Minuten<\/span> Zeitersparnis pro Arbeitsauftrag<\/div>\r\n          <p class=\"quote\">\u201ePro Arbeitsauftrag spart das schnell 10 Minuten, und auf die Woche gerechnet l\u00e4uft das ordentlich auf.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Thomas Verwoerd van Wanroy<\/strong>\r\n              <span>Service &#038; Planung, Savona<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"cor\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/COR-Riooltechniek.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">Halbierung der Anzahl <span class=\"accent\">Telefonate<\/span><\/div>\r\n          <p class=\"quote\">\u201eArbeitsauftr\u00e4ge werden ohne Hin-und-her-Telefonieren eingeplant oder verschoben, was zu einer Halbierung der Telefonate gef\u00fchrt hat.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Ronald van Buuren<\/strong>\r\n              <span>Coppelmans Rohrreinigung<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"filax\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Filax.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">Ein Portal, <span class=\"accent\">vollst\u00e4ndiger \u00dcberblick<\/span><\/div>\r\n          <p class=\"quote\">\u201eEffizienz steht bei uns an erster Stelle, und wie einfach es ist, alles in einem Portal im Blick zu haben, ist nicht zu untersch\u00e4tzen.&#8220;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Filax<\/strong>\r\n              <span>Teil von Bruns, Messe- und Museumstechnik<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <button class=\"stage-arrow\" id=\"nextBtn-de\" aria-label=\"N\u00e4chster Kundenfall\">\u203a<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"dots\" id=\"dots-de\">\r\n    <button class=\"dot is-active\" data-case=\"campenaar\" aria-label=\"Campenaar Koffie\"><\/button>\r\n    <button class=\"dot\" data-case=\"okhygiene\" aria-label=\"OK Hygi\u00ebne\"><\/button>\r\n    <button class=\"dot\" data-case=\"pmt\" aria-label=\"PMT Smartpoint\"><\/button>\r\n    <button class=\"dot\" data-case=\"savona\" aria-label=\"Savona\"><\/button>\r\n    <button class=\"dot\" data-case=\"cor\" aria-label=\"COR\"><\/button>\r\n    <button class=\"dot\" data-case=\"filax\" aria-label=\"Filax\"><\/button>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  (function () {\r\n    var order = ['campenaar', 'okhygiene', 'pmt', 'savona', 'cor', 'filax'];\r\n    var current = 'campenaar';\r\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    var stage = document.querySelector('.stage');\r\n    var badges = document.querySelectorAll('.sector-badge');\r\n    var dots = document.querySelectorAll('.dot');\r\n\r\n    function syncControls(key) {\r\n      badges.forEach(function (b) {\r\n        b.classList.toggle('is-selected', b.getAttribute('data-case') === key);\r\n      });\r\n      dots.forEach(function (d) {\r\n        d.classList.toggle('is-active', d.getAttribute('data-case') === key);\r\n      });\r\n    }\r\n\r\n    function activate(key) {\r\n      if (key === current) return;\r\n      var currentCard = stage.querySelector('.case-card.is-active');\r\n      var nextCard = stage.querySelector('.case-card[data-case=\"' + key + '\"]');\r\n      if (!nextCard) return;\r\n\r\n      current = key;\r\n      syncControls(key);\r\n\r\n      if (reduceMotion || !currentCard) {\r\n        if (currentCard) currentCard.classList.remove('is-active');\r\n        nextCard.classList.add('is-active');\r\n        return;\r\n      }\r\n\r\n      currentCard.classList.add('is-leaving');\r\n      setTimeout(function () {\r\n        currentCard.classList.remove('is-active', 'is-leaving');\r\n        nextCard.style.opacity = '0';\r\n        nextCard.classList.add('is-active');\r\n        requestAnimationFrame(function () {\r\n          requestAnimationFrame(function () {\r\n            nextCard.style.opacity = '';\r\n          });\r\n        });\r\n      }, 180);\r\n    }\r\n\r\n    function step(delta) {\r\n      var idx = order.indexOf(current);\r\n      var nextIdx = (idx + delta + order.length) % order.length;\r\n      activate(order[nextIdx]);\r\n    }\r\n\r\n    badges.forEach(function (b) {\r\n      b.addEventListener('click', function () { activate(b.getAttribute('data-case')); });\r\n    });\r\n    dots.forEach(function (d) {\r\n      d.addEventListener('click', function () { activate(d.getAttribute('data-case')); });\r\n    });\r\n    document.getElementById('prevBtn-de').addEventListener('click', function () { step(-1); });\r\n    document.getElementById('nextBtn-de').addEventListener('click', function () { step(1); });\r\n  })();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | Block: Zwei Wege, um zu starten (Deutsch)\r\n     Fuegen Sie diese Datei in EINEN Custom-HTML-Block ein.\r\n     Kein <html>, <head> oder <body>: das hat Ihre Seite bereits.\r\n\r\n     Staan er meer Simple-Simon blokken op dezelfde pagina? Knip dan het\r\n     stuk tussen GEDEELD BASISBLOK en ALLEEN VOOR DIT BLOK hieronder weg.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Twee manieren om te beginnen\r\n   ===================================================================== *\/\r\n\/* ========== TWEE PADEN ========== *\/\r\n.ss-paren{display:grid;gap:20px}\r\n@media (min-width:820px){ .ss-paren{grid-template-columns:1fr 1fr;gap:24px} }\r\n.ss-pkaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;\r\n  display:flex;flex-direction:column;opacity:0;transform:translateY(16px);\r\n  transition:opacity .55s ease,transform .3s cubic-bezier(.3,1.1,.5,1),box-shadow .3s ease,border-color .3s ease}\r\n.ss-go .ss-pkaart{opacity:1;transform:none}\r\n.ss-go .ss-pkaart:nth-child(2){transition-delay:.14s,.14s,0s,0s}\r\n.ss-pkaart:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(4,49,60,.16);border-color:var(--brand-blue)}\r\n.ss-pkaart h3{font-size:23px;margin-bottom:18px}\r\n.ss-plijst{display:grid;gap:13px;margin-bottom:26px}\r\n.ss-pkaart .ss-btn{margin-top:auto;align-self:flex-start}\r\n.ss-vk{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.45}\r\n.ss-vk svg{flex:none;margin-top:4px}\r\n.ss-vk svg path{stroke-dasharray:22;stroke-dashoffset:22}\r\n.ss-go .ss-vk svg path{animation:tik .4s ease forwards}\r\n@keyframes tik{to{stroke-dashoffset:0}}\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(1) svg path{animation-delay:.5s}\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(2) svg path{animation-delay:.68s}\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(3) svg path{animation-delay:.86s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(1) svg path{animation-delay:.64s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(2) svg path{animation-delay:.82s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(3) svg path{animation-delay:1s}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-pkaart{opacity:1 !important;transform:none !important;animation:none !important}\r\n  .ss-vk svg path{stroke-dashoffset:0;animation:none}\r\n}\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section ss-tint\" id=\"prijzen-de\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Zwei Wege, um zu starten<\/h2>\r\n      <p class=\"ss-lead\">Welcher passt zu Ihrem Betrieb?<\/p>\r\n    <\/div>\r\n    <div class=\"ss-paren\">\r\n      <div class=\"ss-pkaart\" id=\"demo-de\">\r\n        <h3>Gemeinsam durchgehen<\/h3>\r\n        <div class=\"ss-plijst\">\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Wir gehen Ihren Arbeitsablauf durch, keine Standardpr\u00e4sentation<\/span>\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Sie sehen sofort, wie die Anbindung an Ihr System funktioniert<\/span>\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Sie sehen, was der Umstieg an Zeit kostet, nicht nur an Geld<\/span>\r\n        <\/div>\r\n        <a class=\"ss-btn ss-btn-primary\" href=\"https:\/\/simple-simon.com\/de\/live-demo-planen\/\">Demo planen<\/a>\r\n      <\/div>\r\n      <div class=\"ss-pkaart\" id=\"trial-de\">\r\n        <h3>Selbst ausprobieren<\/h3>\r\n        <div class=\"ss-plijst\">\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Heute aktivieren, sofort Auftr\u00e4ge in der Planung<\/span>\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Keine Kreditkarte n\u00f6tig, einfach 2 Wochen kostenlos testen<\/span>\r\n          <span class=\"ss-vk\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>Hilfe beim Einrichten? Rufen Sie an oder planen Sie eine kostenlose Demo<\/span>\r\n        <\/div>\r\n        <a class=\"ss-btn ss-btn-ghost\" href=\"https:\/\/app.simple-simon.net\/Login\/Signup\/Trial.aspx\">Kostenlos testen<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"ss-go\"); klaar(e.target); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){ io.observe(el); });\r\n\r\n  function klaar(el){  }\r\n})();\r\n<\/script>\n\n\n\n\n\n<section class=\"theme-faq__wrapper  theme-m-sm\">\n\n\t<div class=\"container\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-md-9 text-center\">\n\t\t\t\t<div class=\"theme-faq__branding\">\n\n\t\t\t\t<\/div>\n\t\t\t\t<h2>H\u00e4ufig gestellte Fragen. Einfache Antwort.<\/h2>\n\n\n\n\t\t\t\t<form action=\"\/\" method=\"GET\" autocomplete=\"off\" class=\"theme-faq__form\">\n\n\t\t\t\t\t<input type=\"text\" name=\"s\" placeholder=\"Stellen Sie Ihre Frage\">\n\t\t\t\t\t<button class=\"theme-btn theme-btn__blue\" type=\"submit\">Suchen\t\t\t\t\t<\/button>\n\n\t\t\t\t<\/form>\n\n\n\n\t\t\t\t<div class=\"theme-faq__row\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\"><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">Scrollen in der Wochenplanung von Google Chrome ist extrem langsam. Wie kann ich das beheben?<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">Durch ein Update von Google Chrome kann es vorkommen, dass das Scrollen in der Wochenplanung sehr langsam ist.\r\nUm dieses Problem zu beheben, k\u00f6nnen Sie folgende Schritte durchf\u00fchren:\r\n\r\n1. \u00d6ffnen Sie Google Chrome und geben Sie in die URL-Leiste Folgendes ein: chrome:\/\/flags\r\n2. Suchen Sie oben auf dieser Seite nach: Smooth Scrolling\r\n3. Setzen Sie diese Option auf \u201eDisabled\u201d (Deaktiviert)\r\n4. Schlie\u00dfen Sie alle Registerkarten und starten Sie Google Chrome neu<\/div><\/div><\/div><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">Minimale Anforderungen App<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">Die Simon-App wurde f\u00fcr Ger\u00e4te entwickelt, die mit den neuesten Technologien laufen. Daher wird empfohlen, die Simon-App nur auf Ger\u00e4ten zu installieren, die bestimmte Anforderungen erf\u00fcllen. <a href=\"https:\/\/simple-simon.com\/minimale-vereisten-simon-app\/\">Hier finden Sie<\/a> die Mindestanforderungen f\u00fcr ein Ger\u00e4t (Android &amp; iOS).<\/div><\/div><\/div><\/div>\n\n\t\t\t\t<p><a class=\"theme-btn theme-btn__blue-gradient mx-auto\" href=\"https:\/\/simple-simon.com\/de\/haeufig-gestellte-fragen\/\">Alle h\u00e4ufig gestellten Fragen<\/a><\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n\n<!-- Simple-Simon webinar: plaats dit \u00e9\u00e9n keer, alleen op de homepage. -->\r\n<style>\r\n#ssw261029{all:initial;display:block;position:fixed;right:24px;bottom:24px;z-index:99990;width:400px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #d2e4e9;border-radius:20px;background:#fff;color:#073440;box-shadow:0 14px 52px #07344033;font:16px\/1.5 Arial,sans-serif;isolation:isolate}\r\n#ssw261029[hidden]{display:none!important}\r\n#ssw261029,#ssw261029 *{box-sizing:border-box}\r\n#ssw261029 .ssw-head{display:flex;align-items:center;gap:18px;padding:16px 60px 16px 20px;background:#e6f6fa}\r\n#ssw261029 .ssw-img{display:block;width:112px;height:112px;object-fit:contain;border-radius:10px;flex-shrink:0}\r\n#ssw261029 .ssw-label{margin:0 0 6px;color:#385e68;font:700 12px\/1.4 Arial,sans-serif;letter-spacing:.06em}\r\n#ssw261029 .ssw-brand{font:700 21px\/1.2 Arial,sans-serif}\r\n#ssw261029 .ssw-close{all:unset;box-sizing:border-box;position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #c4dce3;border-radius:50%;background:#fff;color:#073440;cursor:pointer;font:26px\/1 Arial,sans-serif}\r\n#ssw261029 .ssw-body{padding:22px 24px 20px}\r\n#ssw261029 .ssw-title{margin:0 0 12px;font:700 28px\/1.12 Arial,sans-serif;color:#073440;letter-spacing:-.5px}\r\n#ssw261029 .ssw-copy{margin:0 0 16px;font:16px\/1.5 Arial,sans-serif;color:#385e68}\r\n#ssw261029 .ssw-date{margin:0 0 18px;font:700 15px\/1.5 Arial,sans-serif;color:#073440}\r\n#ssw261029 .ssw-cta{display:flex;justify-content:center;align-items:center;gap:12px;min-height:50px;padding:13px 14px;border-radius:10px;background:linear-gradient(90deg,#ffa500 0%,#ff4500 100%);color:#fff;text-decoration:none;font:700 17px\/1.4 Arial,sans-serif;transition:filter 160ms ease-out}\r\n#ssw261029 .ssw-foot{margin:12px 0 0;font:12px\/1.5 Arial,sans-serif;color:#49656f}\r\n#ssw261029 :is(a,button):focus-visible{outline:3px solid #073440;outline-offset:3px}\r\n#ssw261029.ssw-enter{animation:ssw261029-in 200ms ease-out}\r\n@keyframes ssw261029-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}\r\n@media(hover:hover){#ssw261029 .ssw-cta:hover{filter:brightness(.94)}}\r\n@media(max-width:600px){#ssw261029{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:360px;max-height:calc(100dvh - 32px - env(safe-area-inset-bottom))}#ssw261029 .ssw-img{width:88px;height:88px}#ssw261029 .ssw-title{font-size:25px}#ssw261029 .ssw-body{padding:18px 20px}}\r\n@media(prefers-reduced-motion:reduce){#ssw261029.ssw-enter{animation:none}#ssw261029 .ssw-cta{transition:none}}\r\n<\/style>\r\n<aside id=\"ssw261029\" role=\"region\" aria-labelledby=\"ssw261029-title\" hidden=\"\">\r\n  <button class=\"ssw-close\" type=\"button\" aria-label=\"Webinaruitnodiging sluiten\">\u00d7<\/button>\r\n  <div class=\"ssw-head\">\r\n    <img class=\"ssw-img\" width=\"112\" height=\"112\" alt=\"\" decoding=\"async\"\/>\r\n    <div><p class=\"ssw-label\">GRATIS WEBINAR<\/p><span class=\"ssw-brand\">Route Optimalisatie met Simon <span style=\"color:#f97617\">PRO<\/span><\/span><\/div>\r\n  <\/div>\r\n  <div class=\"ssw-body\">\r\n    <h2 class=\"ssw-title\" id=\"ssw261029-title\">Minder reistijd,<br\/>meer werkbonnen?<\/h2>\r\n    <p class=\"ssw-copy\">Ontdek slimme route optimalisatie tijdens ons gratis webinar.<\/p>\r\n    <p class=\"ssw-date\"><time datetime=\"2026-10-29T10:00:00+01:00\">Do 29 oktober 2026 \u00b7 10:00 uur<\/time><br\/><span style=\"font-weight:400\">Nederlandse tijd<\/span><\/p>\r\n    <a class=\"ssw-cta\" href=\"https:\/\/simple-simon.webinargeek.com\/simon-pro-minder-reistijd-meer-werkbonnen-met-slimme-routeoptimalisatie\">Schrijf je gratis in <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <p class=\"ssw-foot\">Webinar Route optimalisatie met Simon PRO<\/p>\r\n  <\/div>\r\n<\/aside>\r\n<script>\r\n(() => {\r\n  'use strict';\r\n  const cfg = {\r\n    enabled: true,\r\n    \/\/ VERVANG door de bestands-URL uit WordPress > Media:\r\n    imageUrl: 'https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/10\/Werkbon-NL-16-1.png',\r\n    \/\/ Optioneel: URL van de 720px-versie voor scherpe schermen.\r\n    image2xUrl: '',\r\n    trigger: 'delay', \/\/ 'delay' OF 'scroll'; test apart, niet tegelijk.\r\n    delayMs: 3000,\r\n    scrollFraction: 0.40,\r\n    \/\/ 29 oktober is wintertijd: Europe\/Amsterdam = UTC+01:00.\r\n    \/\/ Eindtijd onbekend: uit voorzorg verbergen vanaf de start.\r\n    stopAt: '2026-10-29T10:00:00+01:00',\r\n    storageKey: 'ss-webinar-route-20261029',\r\n    \/\/ 'off', 'gtag' of 'gtm'. Kies \u00e9\u00e9n route, voorkom dubbeltelling.\r\n    analytics: 'off'\r\n  };\r\n  const root = document.getElementById('ssw261029');\r\n  if (!root || root.dataset.initialized) return;\r\n  root.dataset.initialized = 'true';\r\n  \/\/ Buiten de theme-container plaatsen voorkomt afknippen door overflow\/transform.\r\n  document.body.appendChild(root);\r\n  const stop = Date.parse(cfg.stopAt);\r\n  if (!cfg.enabled || !Number.isFinite(stop) || Date.now() >= stop) { root.remove(); return; }\r\n  let shown = false, disposed = false, timer, expiry;\r\n  const img = root.querySelector('img');\r\n  const cta = root.querySelector('.ssw-cta');\r\n  const closeButton = root.querySelector('button');\r\n  const absoluteImage = value => {try {return new URL(value).protocol === 'https:';} catch {return false;}};\r\n  \/\/ Tekst en CTA blijven bruikbaar als de afbeelding ontbreekt.\r\n  img.addEventListener('error', () => { img.hidden = true; img.style.display = 'none'; });\r\n  function suppressed() {\r\n    for (const storageName of ['localStorage','sessionStorage']) {\r\n      try {if (window[storageName].getItem(cfg.storageKey)) return true;} catch {}\r\n    }\r\n    return false;\r\n  }\r\n  function remember(reason) {\r\n    for (const storageName of ['localStorage','sessionStorage']) {\r\n      try {window[storageName].setItem(cfg.storageKey, reason);} catch {}\r\n    }\r\n  }\r\n  \/\/ Alleen gebruiken met bestaande GA4\/CMP-inrichting die consent afhandelt.\r\n  function track(action, reason) {\r\n    const params = {webinar_id:'route_20261029',popup_concept:'slide_in',trigger:cfg.trigger};\r\n    if (reason) params.reason = reason;\r\n    try {\r\n      if (cfg.analytics === 'gtag' && typeof window.gtag === 'function') {\r\n        window.gtag('event', 'webinar_popup_' + action, params);\r\n      } else if (cfg.analytics === 'gtm') {\r\n        window.dataLayer = window.dataLayer || [];\r\n        window.dataLayer.push({event:'webinar_popup_' + action,...params});\r\n      }\r\n    } catch {} \/\/ Tracking mag de CTA nooit blokkeren.\r\n  }\r\n  function clearTriggers() {\r\n    clearTimeout(timer);\r\n    window.removeEventListener('scroll', onScroll);\r\n    document.removeEventListener('visibilitychange', onVisibility);\r\n    document.removeEventListener('focusout', retry);\r\n  }\r\n  function dispose(reason, persist = false) {\r\n    if (disposed) return;\r\n    if (persist) remember(reason);\r\n    if (shown && reason !== 'expired' && reason !== 'other_tab') track('close', reason);\r\n    \/\/ Focus alleen herstellen wanneer deze zich in de slide-in bevindt.\r\n    if (root.contains(document.activeElement)) {\r\n      const target = document.querySelector('main h1, h1, main');\r\n      if (target) {\r\n        const old = target.getAttribute('tabindex');\r\n        target.setAttribute('tabindex','-1');target.focus({preventScroll:true});\r\n        if (old === null) target.removeAttribute('tabindex');else target.setAttribute('tabindex',old);\r\n      }\r\n    }\r\n    disposed = true;root.hidden = true;clearTriggers();clearTimeout(expiry);\r\n    document.removeEventListener('keydown', onKey);\r\n    window.removeEventListener('storage', onStorage);\r\n    document.removeEventListener('visibilitychange', checkExpiry);\r\n    root.remove();\r\n  }\r\n  function show() {\r\n    if (disposed || shown) return;\r\n    if (Date.now() >= stop) {dispose('expired');return;}\r\n    if (suppressed()) {dispose('other_tab');return;}\r\n    if (document.hidden) return;\r\n    \/\/ Niet verschijnen tijdens typen of terwijl een dialoog open staat.\r\n    const active = document.activeElement;\r\n    if ((active && active.matches('input,textarea,select,[contenteditable=\"true\"]')) ||\r\n        document.querySelector('dialog[open], [aria-modal=\"true\"]')) {timer = setTimeout(show,1000);return;}\r\n    if (absoluteImage(cfg.imageUrl)) {\r\n      img.src = cfg.imageUrl;\r\n      if (absoluteImage(cfg.image2xUrl)) img.srcset = cfg.imageUrl + ' 1x, ' + cfg.image2xUrl + ' 2x';\r\n    } else {img.hidden = true;img.style.display = 'none';}\r\n    root.hidden = false;root.classList.add('ssw-enter');shown = true;\r\n    \/\/ Geen focus overnemen en geen focus trap: dit is een niet-modale regio.\r\n    remember('shown');track('view');clearTriggers();\r\n  }\r\n  function onScroll() {\r\n    const available = document.documentElement.scrollHeight - innerHeight;\r\n    if (available > 0 && scrollY \/ available >= cfg.scrollFraction) show();\r\n  }\r\n  function retry() { if (cfg.trigger === 'scroll') onScroll(); }\r\n  function onVisibility() {\r\n    if (document.hidden) return;\r\n    if (cfg.trigger === 'scroll') onScroll();else show();\r\n  }\r\n  function checkExpiry() {if(Date.now() >= stop) dispose('expired');}\r\n  function onKey(event) {if(event.key === 'Escape' && root.contains(document.activeElement)) dispose('escape',true);}\r\n  function onStorage(event) {if(event.key === cfg.storageKey && event.newValue) dispose('other_tab');}\r\n  closeButton.addEventListener('click', () => dispose('button',true));\r\n  cta.addEventListener('click', event => {\r\n    if (Date.now() >= stop) {event.preventDefault();dispose('expired');return;}\r\n    remember('clicked');track('click'); \/\/ Klik is nog geen voltooide inschrijving.\r\n  });\r\n  document.addEventListener('keydown',onKey);\r\n  window.addEventListener('storage',onStorage);\r\n  document.addEventListener('visibilitychange',checkExpiry);\r\n  if (suppressed()) {dispose('other_tab');return;}\r\n  function scheduleExpiry() {\r\n    const remaining = stop - Date.now();\r\n    if (remaining <= 0) {dispose('expired');return;}\r\n    expiry = setTimeout(scheduleExpiry, Math.min(remaining,2147483647));\r\n  }\r\n  scheduleExpiry();\r\n  \/\/ visibilitychange pas activeren wanneer de vertraging verstreken is.\r\n  if (cfg.trigger === 'scroll') {\r\n    window.addEventListener('scroll',onScroll,{passive:true});\r\n    document.addEventListener('visibilitychange',onVisibility);\r\n    document.addEventListener('focusout',retry);onScroll();\r\n  } else {\r\n    timer = setTimeout(() => {\r\n      document.addEventListener('visibilitychange',onVisibility);show();\r\n    },cfg.delayMs);\r\n  }\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"Sofort den \u00dcberblick \u00fcber Ihren Au\u00dfendienst. Nie wieder einen Arbeitsauftrag verlieren. Nie wieder Umsatz verpassen. Mit Simple-Simon Schnell startklar, in k\u00fcrzester Zeit unterwegs Arbeitsauftrags App Digitale Plantafel Zeiterfassung Asset Management 4,8\/5 bewertet Simple-Simon ist perfekt f\u00fcr\u2026 Sieben Branchen, in denen wir die meisten Unternehmen betreuen. Machen Sie etwas anderes? Sie geh\u00f6ren trotzdem dazu. Installations- und [&hellip;]","protected":false},"author":12,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"tags":[],"class_list":["post-9884","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/pages\/9884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/comments?post=9884"}],"version-history":[{"count":16,"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/pages\/9884\/revisions"}],"predecessor-version":[{"id":20888,"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/pages\/9884\/revisions\/20888"}],"wp:attachment":[{"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/media?parent=9884"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simple-simon.com\/de\/wp-json\/wp\/v2\/tags?post=9884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}