{"id":14333,"date":"2026-09-02T12:39:01","date_gmt":"2026-09-02T12:39:01","guid":{"rendered":"https:\/\/steentijdvondsten.nl\/post\/?page_id=14333"},"modified":"2026-09-04T12:24:29","modified_gmt":"2026-09-04T12:24:29","slug":"kenmerken","status":"publish","type":"page","link":"https:\/\/steentijdvondsten.nl\/post\/index.php\/kenmerken\/","title":{"rendered":"Kenmerken"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"236\" src=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/09\/kantel_ipad.png\" alt=\"\" class=\"wp-image-14487\" style=\"width:68px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"template-frame\">\n  <div class=\"afbeelding-kader\">\n    <div class=\"tekst-kader\">\n\n      <h1><\/h1>\n\n      <h2 id=\"tijdschriften\">\n        <a href=\"#\" class=\"nummer-icoon nummer-1\">1<\/a>\n      <\/h2>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* Template container *\/\n.template-frame {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* Afbeelding container *\/\n.afbeelding-kader {\n  width: 100%;\n  aspect-ratio: 1200\/200;\n  background-image: url('https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/04\/cropped-sierlijn.png');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Tekstkader *\/\n.tekst-kader {\n  display: inline-block;\n  background-color: white;\n  padding: 2mm 5mm;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n\/* Nummer-rondje *\/\n.nummer-icoon {\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: 50%;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 18px;\n  font-weight: bold;\n  line-height: 1;\n\n  text-decoration: none;\n}\n\n\/* Zwart rondje met witte 1 *\/\n.nummer-icoon.nummer-1 {\n  background: #000 !important;\n  color: #fff !important;\n}\n\n\/* Hover *\/\n.nummer-icoon:hover {\n  transform: scale(1.08);\n}\n\n\/* H2 standaardmarges verwijderen *\/\n#tijdschriften {\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n<\/style>\n\n\n\n        <div class=\"cmk-module\" id=\"cmk-285743\">\n\n            <!-- =====================================================\n                 HEADER\n            ====================================================== -->\n\n            <header class=\"cmk-header\">\n\n                <div class=\"cmk-header-mark\">\n                    <span class=\"cmk-header-mark-inner\">\ud83d\udccf<\/span>\n                <\/div>\n\n                <div class=\"cmk-header-content\">\n\n                    <span class=\"cmk-eyebrow\">\n                        ARCHEOLOGISCHE DOCUMENTATIE\n                    <\/span>\n\n                    <h2>Artefact op centimeter schalen 1:1<\/h2>\n\n                    <p>\n                        Plaats, schaal en documenteer een\n                        artefactafbeelding met een referentieschaal.\n                    <\/p>\n\n                <\/div>\n\n                <div class=\"cmk-header-status\">\n                    <span class=\"cmk-status-dot\"><\/span>\n                    Werkblad\n                <\/div>\n\n            <\/header>\n\n\n            <!-- =====================================================\n                 TOOLBAR\n            ====================================================== -->\n\n            <section class=\"cmk-toolbar\">\n\n                <div class=\"cmk-toolbar-main\">\n\n                    <label\n                        class=\"cmk-upload\"\n                        for=\"cmk-285743-file\"\n                    >\n\n                        <span class=\"cmk-upload-icon\">+<\/span>\n\n                        <span>Afbeelding laden<\/span>\n\n                        <input\n                            id=\"cmk-285743-file\"\n                            type=\"file\"\n                            class=\"cmk-file\"\n                            accept=\"image\/jpeg,image\/png,image\/webp,image\/gif,image\/*\"\n                        >\n\n                    <\/label>\n\n                    <span class=\"cmk-file-status\">\n                        JPG, PNG of WebP\n                    <\/span>\n\n                <\/div>\n\n\n                <div class=\"cmk-toolbar-actions\">\n\n                    <button\n                        type=\"button\"\n                        class=\"cmk-button cmk-button-light cmk-reset\"\n                    >\n                        <span>\u21ba<\/span>\n                        Reset\n                    <\/button>\n\n                    <button\n                        type=\"button\"\n                        class=\"cmk-button cmk-button-dark cmk-rotate\"\n                    >\n                        <span>\u21bb<\/span>\n                        Draai 90\u00b0\n                    <\/button>\n\n                    <button\n                        type=\"button\"\n                        class=\"cmk-button cmk-button-green cmk-download\"\n                    >\n                        <span>\u2193<\/span>\n                        Exporteer\n                    <\/button>\n\n                <\/div>\n\n            <\/section>\n\n\n            <!-- =====================================================\n                 STATUS\n            ====================================================== -->\n\n            <section class=\"cmk-statusbar\">\n\n                <div class=\"cmk-status-current\">\n\n                    <span class=\"cmk-status-label\">\n                        REFERENTIESCHAAL\n                    <\/span>\n\n                    <strong>1 cm<\/strong>\n\n                <\/div>\n\n                <div class=\"cmk-status-help\">\n                    Klik op + om een afbeelding toe te voegen.\n                    Sleep daarna de schaalbalk.\n                <\/div>\n\n            <\/section>\n\n\n            <!-- =====================================================\n                 MAIN\n            ====================================================== -->\n\n            <div class=\"cmk-layout\">\n\n\n                <!-- =================================================\n                     SETTINGS\n                ================================================== -->\n\n                <aside class=\"cmk-panel cmk-settings\">\n\n                    <div class=\"cmk-panel-heading\">\n\n                        <div>\n\n                            <span class=\"cmk-panel-eyebrow\">\n                                DOCUMENTATIE\n                            <\/span>\n\n                            <h3>Afmetingen<\/h3>\n\n                        <\/div>\n\n                        <span class=\"cmk-panel-number\">\n                            01\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"cmk-panel-body\">\n\n                        <div class=\"cmk-setting-group\">\n\n                            <label>\n                                Breedte\n                                <span>mm<\/span>\n                            <\/label>\n\n                            <div class=\"cmk-input-wrap\">\n\n                                <input\n                                    type=\"number\"\n                                    class=\"cmk-width\"\n                                    min=\"1\"\n                                    step=\"0.1\"\n                                    inputmode=\"decimal\"\n                                >\n\n                                <span>mm<\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"cmk-setting-group\">\n\n                            <label>\n                                Hoogte\n                                <span>mm<\/span>\n                            <\/label>\n\n                            <div class=\"cmk-input-wrap\">\n\n                                <input\n                                    type=\"number\"\n                                    class=\"cmk-height\"\n                                    min=\"1\"\n                                    step=\"0.1\"\n                                    inputmode=\"decimal\"\n                                >\n\n                                <span>mm<\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"cmk-divider\"><\/div>\n\n\n                        <div class=\"cmk-section-label\">\n                            BEWERKING\n                        <\/div>\n\n\n                        <button\n                            type=\"button\"\n                            class=\"cmk-wide-button cmk-cut\"\n                        >\n                            <span>\u2317<\/span>\n                            Selectie uitsnijden\n                        <\/button>\n\n\n                        <button\n                            type=\"button\"\n                            class=\"cmk-wide-button cmk-reset-secondary\"\n                        >\n                            <span>\u21ba<\/span>\n                            Terug naar origineel\n                        <\/button>\n\n\n                        <div class=\"cmk-divider\"><\/div>\n\n\n                        <div class=\"cmk-scale-card\">\n\n                            <div class=\"cmk-scale-card-icon\">\n                                1\n                            <\/div>\n\n                            <div>\n\n                                <strong>1 cm schaal<\/strong>\n\n                                <p>\n                                    De schaalbalk kan onafhankelijk\n                                    van de afbeelding worden verplaatst, maar komt in de exporteer afbeelding altijd onder je artefact afbeelding te staan.\n                                <\/p>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/aside>\n\n\n                <!-- =================================================\n                     WORKSPACE\n                ================================================== -->\n\n                <main class=\"cmk-workspace\">\n\n                    <div class=\"cmk-workspace-heading\">\n\n                        <div>\n\n                            <span class=\"cmk-panel-eyebrow\">\n                                WERKBLAD\n                            <\/span>\n\n                            <h3>Artefactafbeelding<\/h3>\n\n                        <\/div>\n\n                        <div class=\"cmk-image-info\">\n\n                            <span class=\"cmk-image-state\">\n                                Geen afbeelding\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"cmk-canvas-area\">\n\n                        <div class=\"cmk-canvas-shell\">\n\n                            <canvas class=\"cmk-canvas\"><\/canvas>\n\n\n                            <div class=\"cmk-loading\">\n\n                                <div class=\"cmk-spinner\"><\/div>\n\n                                <span>\n                                    Afbeelding laden\u2026\n                                <\/span>\n\n                            <\/div>\n\n\n                            <button\n                                type=\"button\"\n                                class=\"cmk-empty\"\n                                aria-label=\"Afbeelding toevoegen\"\n                            >\n\n                                <span class=\"cmk-empty-icon\">\n                                    +\n                                <\/span>\n\n                                <strong>\n                                    Afbeelding toevoegen\n                                <\/strong>\n\n                                <span>\n                                    Klik hier om een afbeelding te kiezen.\n                                <\/span>\n\n                            <\/button>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"cmk-workspace-footer\">\n\n                        <div class=\"cmk-tip\">\n\n                            <span class=\"cmk-tip-icon\">\n                                i\n                            <\/span>\n\n                            <span>\n                                Wijzig de breedte of hoogte om het\n                                formaat aan te passen. De afbeelding\n                                wordt automatisch opnieuw gecentreerd.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/main>\n\n            <\/div>\n\n\n            <!-- =====================================================\n                 INFORMATION\n            ====================================================== -->\n\n            <section class=\"cmk-information\">\n\n                <div class=\"cmk-information-icon\">\n                    i\n                <\/div>\n\n                <div>\n\n                    <strong>Werkwijze<\/strong>\n\n                    <p>\n                        Laad een foto via de knop bovenaan of klik op\n                        de grote <strong>+<\/strong> in het werkblad.\n                        Trek vervolgens een selectie over het gewenste\n                        gebied en kies <strong>Selectie uitsnijden<\/strong>.\n                        De afmetingen kunnen daarna worden aangepast.\n                    <\/p>\n\n                <\/div>\n\n            <\/section>\n\n        <\/div>\n\n\n        <style>\n\n        \/* =============================================================\n           BASIS\n        ============================================================= *\/\n\n        #cmk-285743 {\n\n            --cmk-bg: #f2efe8;\n            --cmk-paper: #ffffff;\n            --cmk-paper-soft: #faf9f5;\n            --cmk-border: #ddd8ce;\n            --cmk-border-dark: #c8c0b3;\n            --cmk-text: #292824;\n            --cmk-muted: #756f65;\n            --cmk-dark: #30312d;\n            --cmk-green: #536a56;\n            --cmk-green-dark: #435646;\n            --cmk-shadow: 0 14px 40px rgba(40,35,28,.08);\n\n            width: 100%;\n            max-width: 1500px;\n\n            margin: 30px auto;\n\n            color: var(--cmk-text);\n\n            font-family:\n                Inter,\n                -apple-system,\n                BlinkMacSystemFont,\n                \"Segoe UI\",\n                Arial,\n                sans-serif;\n\n            font-size: 15px;\n            line-height: 1.5;\n        }\n\n\n        #cmk-285743 *,\n        #cmk-285743 *::before,\n        #cmk-285743 *::after {\n\n            box-sizing: border-box;\n        }\n\n\n        \/* =============================================================\n           HEADER\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-header {\n\n            position: relative;\n\n            display: flex;\n            align-items: center;\n\n            gap: 20px;\n\n            padding: 27px 30px;\n\n            background:\n                linear-gradient(\n                    135deg,\n                    #343530 0%,\n                    #252622 100%\n                );\n\n            color: #e1ddd5;\n\n            border-radius: 17px 17px 0 0;\n\n            overflow: hidden;\n        }\n\n\n        #cmk-285743 .cmk-header::after {\n\n            content: \"\";\n\n            position: absolute;\n\n            width: 320px;\n            height: 320px;\n\n            right: -130px;\n            top: -180px;\n\n            border: 1px solid rgba(255,255,255,.08);\n\n            border-radius: 50%;\n        }\n\n\n        #cmk-285743 .cmk-header-mark {\n\n            position: relative;\n            z-index: 2;\n\n            width: 62px;\n            height: 62px;\n\n            flex: 0 0 62px;\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            border: 1px solid rgba(255,255,255,.16);\n\n            border-radius: 14px;\n\n            background: rgba(255,255,255,.05);\n        }\n\n\n        #cmk-285743 .cmk-header-mark-inner {\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 39px;\n            height: 39px;\n\n            border: 1px solid rgba(217,196,168,.35);\n\n            border-radius: 50%;\n\n            color: #d9c4a8;\n\n            font-size: 12px;\n            font-weight: 800;\n        }\n\n\n        #cmk-285743 .cmk-header-content {\n\n            position: relative;\n            z-index: 2;\n\n            min-width: 0;\n        }\n\n\n        #cmk-285743 .cmk-eyebrow,\n        #cmk-285743 .cmk-panel-eyebrow {\n\n            display: block;\n\n            margin-bottom: 5px;\n\n            color: #b99b78;\n\n            font-size: 10px;\n            font-weight: 800;\n\n            letter-spacing: .17em;\n\n            text-transform: uppercase;\n        }\n\n\n        #cmk-285743 .cmk-header h2 {\n\n            margin: 0 0 5px;\n\n            color: #dedbd4 !important;\n\n            font-size: 27px;\n            font-weight: 700;\n\n            line-height: 1.2;\n        }\n\n\n        #cmk-285743 .cmk-header p {\n\n            max-width: 720px;\n\n            margin: 0;\n\n            color: rgba(222,219,212,.68) !important;\n\n            font-size: 13px;\n        }\n\n\n        #cmk-285743 .cmk-header-status {\n\n            position: relative;\n            z-index: 2;\n\n            margin-left: auto;\n\n            display: flex;\n            align-items: center;\n\n            gap: 7px;\n\n            padding: 7px 11px;\n\n            border: 1px solid rgba(255,255,255,.12);\n\n            border-radius: 999px;\n\n            color: #cfcac1;\n\n            font-size: 10px;\n            font-weight: 700;\n\n            white-space: nowrap;\n        }\n\n\n        #cmk-285743 .cmk-status-dot {\n\n            width: 7px;\n            height: 7px;\n\n            border-radius: 50%;\n\n            background: #93a994;\n        }\n\n\n        \/* =============================================================\n           TOOLBAR\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-toolbar {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: space-between;\n\n            gap: 15px;\n\n            padding: 14px 20px;\n\n            background: #fff;\n\n            border-left: 1px solid var(--cmk-border);\n            border-right: 1px solid var(--cmk-border);\n            border-bottom: 1px solid var(--cmk-border);\n        }\n\n\n        #cmk-285743 .cmk-toolbar-main,\n        #cmk-285743 .cmk-toolbar-actions {\n\n            display: flex;\n\n            align-items: center;\n\n            gap: 9px;\n        }\n\n\n        #cmk-285743 .cmk-upload {\n\n            display: inline-flex;\n\n            align-items: center;\n            justify-content: center;\n\n            gap: 8px;\n\n            min-height: 41px;\n\n            padding: 0 15px;\n\n            border-radius: 8px;\n\n            background: var(--cmk-dark);\n\n            color: #fff;\n\n            cursor: pointer;\n\n            font-size: 12px;\n            font-weight: 700;\n\n            transition:\n                transform .15s ease,\n                background .15s ease;\n        }\n\n\n        #cmk-285743 .cmk-upload:hover {\n\n            background: #20211e;\n\n            transform: translateY(-1px);\n        }\n\n\n        #cmk-285743 .cmk-upload input {\n\n            position: absolute;\n\n            width: 1px;\n            height: 1px;\n\n            opacity: 0;\n\n            pointer-events: none;\n        }\n\n\n        #cmk-285743 .cmk-upload-icon {\n\n            font-size: 19px;\n            line-height: 1;\n        }\n\n\n        #cmk-285743 .cmk-file-status {\n\n            color: var(--cmk-muted);\n\n            font-size: 11px;\n\n            max-width: 300px;\n\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n\n        \/* =============================================================\n           BUTTONS\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-button {\n\n            display: inline-flex;\n\n            align-items: center;\n            justify-content: center;\n\n            gap: 7px;\n\n            min-height: 41px;\n\n            padding: 0 13px;\n\n            border: 1px solid var(--cmk-border);\n\n            border-radius: 8px;\n\n            background: #fff;\n\n            color: var(--cmk-text);\n\n            cursor: pointer;\n\n            font-family: inherit;\n\n            font-size: 12px;\n            font-weight: 700;\n\n            transition:\n                transform .15s ease,\n                background .15s ease,\n                border-color .15s ease;\n        }\n\n\n        #cmk-285743 .cmk-button:hover {\n\n            transform: translateY(-1px);\n\n            background: #f7f4ef;\n\n            border-color: var(--cmk-border-dark);\n        }\n\n\n        #cmk-285743 .cmk-button span {\n\n            font-size: 17px;\n            line-height: 1;\n        }\n\n\n        #cmk-285743 .cmk-button-dark {\n\n            background: var(--cmk-dark);\n\n            border-color: var(--cmk-dark);\n\n            color: #fff;\n        }\n\n\n        #cmk-285743 .cmk-button-dark:hover {\n\n            background: #20211e;\n\n            border-color: #20211e;\n        }\n\n\n        #cmk-285743 .cmk-button-green {\n\n            background: var(--cmk-green);\n\n            border-color: var(--cmk-green);\n\n            color: #fff;\n        }\n\n\n        #cmk-285743 .cmk-button-green:hover {\n\n            background: var(--cmk-green-dark);\n\n            border-color: var(--cmk-green-dark);\n        }\n\n\n        \/* =============================================================\n           STATUS\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-statusbar {\n\n            display: flex;\n\n            align-items: center;\n\n            gap: 15px;\n\n            padding: 12px 20px;\n\n            background: #eeebe4;\n\n            border-left: 1px solid var(--cmk-border);\n            border-right: 1px solid var(--cmk-border);\n            border-bottom: 1px solid var(--cmk-border);\n        }\n\n\n        #cmk-285743 .cmk-status-current {\n\n            display: flex;\n\n            align-items: center;\n\n            gap: 10px;\n        }\n\n\n        #cmk-285743 .cmk-status-label {\n\n            color: var(--cmk-muted);\n\n            font-size: 9px;\n            font-weight: 800;\n\n            letter-spacing: .12em;\n        }\n\n\n        #cmk-285743 .cmk-status-current strong {\n\n            display: inline-flex;\n\n            align-items: center;\n            justify-content: center;\n\n            min-width: 46px;\n            height: 25px;\n\n            padding: 0 9px;\n\n            border-radius: 999px;\n\n            background: #343530;\n\n            color: #fff;\n\n            font-size: 11px;\n        }\n\n\n        #cmk-285743 .cmk-status-help {\n\n            margin-left: auto;\n\n            color: var(--cmk-muted);\n\n            font-size: 11px;\n        }\n\n\n        \/* =============================================================\n           LAYOUT\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-layout {\n\n            display: grid;\n\n            grid-template-columns:\n                minmax(270px, 320px)\n                minmax(0, 1fr);\n\n            gap: 18px;\n\n            margin-top: 18px;\n        }\n\n\n        #cmk-285743 .cmk-panel,\n        #cmk-285743 .cmk-workspace {\n\n            min-width: 0;\n\n            background: #fff;\n\n            border: 1px solid var(--cmk-border);\n\n            border-radius: 14px;\n\n            box-shadow: var(--cmk-shadow);\n\n            overflow: hidden;\n        }\n\n\n        #cmk-285743 .cmk-panel-heading,\n        #cmk-285743 .cmk-workspace-heading {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: space-between;\n\n            padding: 19px 20px;\n\n            border-bottom: 1px solid var(--cmk-border);\n        }\n\n\n        #cmk-285743 .cmk-panel-heading h3,\n        #cmk-285743 .cmk-workspace-heading h3 {\n\n            margin: 0;\n\n            color: var(--cmk-text);\n\n            font-size: 18px;\n            font-weight: 700;\n\n            line-height: 1.2;\n        }\n\n\n        #cmk-285743 .cmk-panel-number {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 31px;\n            height: 27px;\n\n            border-radius: 7px;\n\n            background: #eeebe4;\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n            font-weight: 800;\n        }\n\n\n        #cmk-285743 .cmk-panel-body {\n\n            padding: 20px;\n        }\n\n\n        \/* =============================================================\n           INPUTS\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-setting-group {\n\n            margin-bottom: 14px;\n        }\n\n\n        #cmk-285743 .cmk-setting-group label {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: space-between;\n\n            margin-bottom: 6px;\n\n            color: #4f4b45;\n\n            font-size: 11px;\n            font-weight: 750;\n        }\n\n\n        #cmk-285743 .cmk-setting-group label span {\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n        }\n\n\n        #cmk-285743 .cmk-input-wrap {\n\n            position: relative;\n        }\n\n\n        #cmk-285743 .cmk-input-wrap input {\n\n            width: 100%;\n\n            height: 42px;\n\n            padding: 0 42px 0 12px;\n\n            border: 1px solid #dcd7ce;\n\n            border-radius: 8px;\n\n            background: #faf9f6;\n\n            color: var(--cmk-text);\n\n            font-family: inherit;\n\n            font-size: 13px;\n            font-weight: 650;\n\n            outline: none;\n        }\n\n\n        #cmk-285743 .cmk-input-wrap input:focus {\n\n            background: #fff;\n\n            border-color: #9c8b75;\n\n            box-shadow:\n                0 0 0 3px rgba(154,121,85,.10);\n        }\n\n\n        #cmk-285743 .cmk-input-wrap > span {\n\n            position: absolute;\n\n            right: 12px;\n            top: 50%;\n\n            transform: translateY(-50%);\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n            font-weight: 700;\n        }\n\n\n        #cmk-285743 .cmk-divider {\n\n            height: 1px;\n\n            margin: 20px 0;\n\n            background: var(--cmk-border);\n        }\n\n\n        #cmk-285743 .cmk-section-label {\n\n            margin-bottom: 9px;\n\n            color: var(--cmk-muted);\n\n            font-size: 9px;\n            font-weight: 800;\n\n            letter-spacing: .14em;\n        }\n\n\n        \/* =============================================================\n           SECONDARY BUTTONS\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-wide-button {\n\n            display: flex;\n\n            align-items: center;\n\n            width: 100%;\n\n            min-height: 41px;\n\n            margin-bottom: 8px;\n\n            padding: 0 12px;\n\n            gap: 8px;\n\n            border: 1px solid #ded9d0;\n\n            border-radius: 8px;\n\n            background: #faf9f6;\n\n            color: #45413b;\n\n            cursor: pointer;\n\n            font-family: inherit;\n\n            font-size: 11px;\n            font-weight: 700;\n\n            text-align: left;\n\n            transition:\n                transform .15s ease,\n                background .15s ease;\n        }\n\n\n        #cmk-285743 .cmk-wide-button:hover {\n\n            background: #f1eee8;\n\n            border-color: #c9c0b4;\n\n            transform: translateY(-1px);\n        }\n\n\n        #cmk-285743 .cmk-wide-button span {\n\n            display: inline-flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 23px;\n            height: 23px;\n\n            border-radius: 6px;\n\n            background: #343530;\n\n            color: #fff;\n\n            font-size: 13px;\n        }\n\n\n        \/* =============================================================\n           SCALE CARD\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-scale-card {\n\n            display: flex;\n\n            align-items: flex-start;\n\n            gap: 10px;\n\n            padding: 13px;\n\n            border: 1px solid #e4dfd6;\n\n            border-radius: 10px;\n\n            background: #f7f5f0;\n        }\n\n\n        #cmk-285743 .cmk-scale-card-icon {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 29px;\n            height: 29px;\n\n            flex: 0 0 29px;\n\n            border-radius: 7px;\n\n            background: #343530;\n\n            color: #fff;\n\n            font-size: 11px;\n            font-weight: 800;\n        }\n\n\n        #cmk-285743 .cmk-scale-card strong {\n\n            display: block;\n\n            margin-bottom: 3px;\n\n            color: var(--cmk-text);\n\n            font-size: 11px;\n        }\n\n\n        #cmk-285743 .cmk-scale-card p {\n\n            margin: 0;\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n\n            line-height: 1.5;\n        }\n\n\n        \/* =============================================================\n           WORKSPACE\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-image-info {\n\n            padding: 6px 10px;\n\n            border-radius: 999px;\n\n            background: #f3f0e9;\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n            font-weight: 700;\n        }\n\n\n        #cmk-285743 .cmk-canvas-area {\n\n            position: relative;\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            min-height: 570px;\n\n            padding: 25px;\n\n            background:\n                radial-gradient(\n                    circle at center,\n                    #ffffff 0,\n                    #f4f1ea 100%\n                );\n\n            overflow: auto;\n        }\n\n\n        #cmk-285743 .cmk-canvas-shell {\n\n            position: relative;\n\n            display: inline-block;\n\n            max-width: 100%;\n\n            border-radius: 5px;\n\n            box-shadow:\n                0 18px 45px rgba(39,35,29,.15);\n        }\n\n\n        #cmk-285743 .cmk-canvas {\n\n            display: block;\n\n            max-width: 100%;\n\n            height: auto;\n\n            border-radius: 4px;\n\n            background: #fff;\n\n            cursor: crosshair;\n\n            touch-action: none;\n        }\n\n\n        #cmk-285743 .cmk-canvas.cmk-dragging {\n\n            cursor: grabbing;\n        }\n\n\n        \/* =============================================================\n           EMPTY STATE\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-empty {\n\n            position: absolute;\n\n            inset: 0;\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            flex-direction: column;\n\n            gap: 6px;\n\n            width: 100%;\n            height: 100%;\n\n            margin: 0;\n            padding: 20px;\n\n            border: 0;\n\n            background:\n                linear-gradient(\n                    135deg,\n                    rgba(250,249,246,.97),\n                    rgba(242,239,232,.97)\n                );\n\n            color: var(--cmk-muted);\n\n            text-align: center;\n\n            cursor: pointer;\n\n            font-family: inherit;\n\n            appearance: none;\n\n            transition:\n                background .15s ease;\n        }\n\n\n        #cmk-285743 .cmk-empty:hover {\n\n            background:\n                linear-gradient(\n                    135deg,\n                    rgba(247,245,239,.99),\n                    rgba(238,234,225,.99)\n                );\n        }\n\n\n        #cmk-285743 .cmk-empty-icon {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 58px;\n            height: 58px;\n\n            margin-bottom: 6px;\n\n            border: 1px solid #d4cec3;\n\n            border-radius: 14px;\n\n            background: rgba(255,255,255,.55);\n\n            color: #8a765e;\n\n            font-size: 31px;\n            font-weight: 300;\n\n            transition:\n                transform .15s ease,\n                border-color .15s ease;\n        }\n\n\n        #cmk-285743 .cmk-empty:hover .cmk-empty-icon {\n\n            transform: scale(1.06);\n\n            border-color: #9a7955;\n        }\n\n\n        #cmk-285743 .cmk-empty strong {\n\n            color: #4d4942;\n\n            font-size: 14px;\n        }\n\n\n        #cmk-285743 .cmk-empty span:last-child {\n\n            max-width: 260px;\n\n            font-size: 10px;\n\n            line-height: 1.5;\n        }\n\n\n        \/* =============================================================\n           LOADING\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-loading {\n\n            position: absolute;\n\n            inset: 0;\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            flex-direction: column;\n\n            gap: 9px;\n\n            background: rgba(248,246,241,.94);\n\n            color: #666158;\n\n            font-size: 11px;\n\n            opacity: 0;\n\n            visibility: hidden;\n\n            pointer-events: none;\n\n            transition:\n                opacity .2s ease,\n                visibility .2s ease;\n        }\n\n\n        #cmk-285743 .cmk-loading.is-active {\n\n            opacity: 1;\n\n            visibility: visible;\n        }\n\n\n        #cmk-285743 .cmk-spinner {\n\n            width: 27px;\n            height: 27px;\n\n            border: 3px solid #ddd7cd;\n\n            border-top-color: #6f4f33;\n\n            border-radius: 50%;\n\n            animation:\n                cmk-spin-cmk-285743                .8s linear infinite;\n        }\n\n\n        @keyframes cmk-spin-cmk-285743 {\n\n            to {\n                transform: rotate(360deg);\n            }\n\n        }\n\n\n        \/* =============================================================\n           FOOTER\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-workspace-footer {\n\n            padding: 13px 18px;\n\n            border-top: 1px solid var(--cmk-border);\n\n            background: #fff;\n        }\n\n\n        #cmk-285743 .cmk-tip {\n\n            display: flex;\n\n            align-items: flex-start;\n\n            gap: 8px;\n\n            color: var(--cmk-muted);\n\n            font-size: 10px;\n\n            line-height: 1.5;\n        }\n\n\n        #cmk-285743 .cmk-tip-icon {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 20px;\n            height: 20px;\n\n            flex: 0 0 20px;\n\n            border: 1px solid #cfc8bd;\n\n            border-radius: 50%;\n\n            font-size: 10px;\n            font-weight: 800;\n        }\n\n\n        \/* =============================================================\n           INFORMATION\n        ============================================================= *\/\n\n        #cmk-285743 .cmk-information {\n\n            display: flex;\n\n            align-items: flex-start;\n\n            gap: 12px;\n\n            margin-top: 18px;\n\n            padding: 18px 20px;\n\n            border: 1px solid var(--cmk-border);\n\n            border-radius: 12px;\n\n            background: #eeebe4;\n        }\n\n\n        #cmk-285743 .cmk-information-icon {\n\n            display: flex;\n\n            align-items: center;\n            justify-content: center;\n\n            width: 29px;\n            height: 29px;\n\n            flex: 0 0 29px;\n\n            border-radius: 50%;\n\n            background: #343530;\n\n            color: #d9c4a8;\n\n            font-size: 12px;\n            font-weight: 800;\n        }\n\n\n        #cmk-285743 .cmk-information strong {\n\n            color: var(--cmk-text);\n\n            font-size: 12px;\n        }\n\n\n        #cmk-285743 .cmk-information p {\n\n            max-width: 900px;\n\n            margin: 4px 0 0;\n\n            color: #68635b;\n\n            font-size: 10px;\n\n            line-height: 1.65;\n        }\n\n\n        \/* =============================================================\n           FOCUS\n        ============================================================= *\/\n\n        #cmk-285743 button:focus-visible,\n        #cmk-285743 input:focus-visible {\n\n            outline: 3px solid rgba(82,102,83,.22);\n\n            outline-offset: 2px;\n        }\n\n\n        \/* =============================================================\n           TABLET\n        ============================================================= *\/\n\n        @media (max-width: 1050px) {\n\n            #cmk-285743 .cmk-layout {\n\n                grid-template-columns: 1fr;\n            }\n\n\n            #cmk-285743 .cmk-settings {\n\n                order: 2;\n            }\n\n\n            #cmk-285743 .cmk-workspace {\n\n                order: 1;\n            }\n\n\n            #cmk-285743 .cmk-canvas-area {\n\n                min-height: 500px;\n            }\n\n        }\n\n\n        \/* =============================================================\n           MOBILE\n        ============================================================= *\/\n\n        @media (max-width: 720px) {\n\n            #cmk-285743 {\n\n                margin: 15px auto;\n            }\n\n\n            #cmk-285743 .cmk-header {\n\n                padding: 23px 18px;\n            }\n\n\n            #cmk-285743 .cmk-header-mark {\n\n                display: none;\n            }\n\n\n            #cmk-285743 .cmk-header h2 {\n\n                font-size: 22px;\n            }\n\n\n            #cmk-285743 .cmk-header p {\n\n                font-size: 11px;\n            }\n\n\n            #cmk-285743 .cmk-header-status {\n\n                display: none;\n            }\n\n\n            #cmk-285743 .cmk-toolbar {\n\n                flex-direction: column;\n\n                align-items: stretch;\n            }\n\n\n            #cmk-285743 .cmk-toolbar-main,\n            #cmk-285743 .cmk-toolbar-actions {\n\n                width: 100%;\n            }\n\n\n            #cmk-285743 .cmk-toolbar-actions {\n\n                display: grid;\n\n                grid-template-columns:\n                    repeat(3, minmax(0, 1fr));\n            }\n\n\n            #cmk-285743 .cmk-upload {\n\n                flex: 1;\n            }\n\n\n            #cmk-285743 .cmk-file-status {\n\n                display: none;\n            }\n\n\n            #cmk-285743 .cmk-statusbar {\n\n                align-items: flex-start;\n\n                flex-direction: column;\n            }\n\n\n            #cmk-285743 .cmk-status-help {\n\n                margin-left: 0;\n            }\n\n\n            #cmk-285743 .cmk-canvas-area {\n\n                min-height: 350px;\n\n                padding: 12px;\n            }\n\n        }\n\n\n        @media (max-width: 480px) {\n\n            #cmk-285743 .cmk-toolbar-actions {\n\n                grid-template-columns:\n                    1fr 1fr 1fr;\n\n                gap: 5px;\n            }\n\n\n            #cmk-285743 .cmk-button {\n\n                padding: 0 6px;\n\n                font-size: 9px;\n            }\n\n\n            #cmk-285743 .cmk-button span {\n\n                font-size: 14px;\n            }\n\n\n            #cmk-285743 .cmk-canvas-area {\n\n                min-height: 300px;\n            }\n\n\n            #cmk-285743 .cmk-panel-body {\n\n                padding: 16px;\n            }\n\n        }\n\n        <\/style>\n\n\n        <script>\n        (function () {\n\n            'use strict';\n\n\n            \/* =========================================================\n               ROOT\n            ========================================================== *\/\n\n            const root =\n                document.getElementById(\n                    'cmk-285743'\n                );\n\n\n            if (!root) {\n                return;\n            }\n\n\n            \/* =========================================================\n               ELEMENTEN\n            ========================================================== *\/\n\n            const canvas =\n                root.querySelector('.cmk-canvas');\n\n            const ctx =\n                canvas.getContext('2d');\n\n            const fileInput =\n                root.querySelector('.cmk-file');\n\n            const emptyButton =\n                root.querySelector('.cmk-empty');\n\n            const fileStatus =\n                root.querySelector('.cmk-file-status');\n\n            const widthInput =\n                root.querySelector('.cmk-width');\n\n            const heightInput =\n                root.querySelector('.cmk-height');\n\n            const cutButton =\n                root.querySelector('.cmk-cut');\n\n            const resetButton =\n                root.querySelector('.cmk-reset');\n\n            const resetSecondary =\n                root.querySelector('.cmk-reset-secondary');\n\n            const rotateButton =\n                root.querySelector('.cmk-rotate');\n\n            const downloadButton =\n                root.querySelector('.cmk-download');\n\n            const loading =\n                root.querySelector('.cmk-loading');\n\n            const empty =\n                root.querySelector('.cmk-empty');\n\n            const imageState =\n                root.querySelector('.cmk-image-state');\n\n\n            \/* =========================================================\n               CONFIG\n            ========================================================== *\/\n\n            const MAX_CANVAS_WIDTH = 1600;\n\n            \/*\n             * Interne documentatieschaal.\n             *\/\n            const PIXELS_PER_MM = 3.7;\n\n            \/*\n             * 1 cm referentie.\n             *\n             * E\u00e9n blok = 10 mm.\n             * Zeven blokken = 70 mm.\n             *\n             * De tekstuele aanduiding hieronder blijft 1 cm\n             * als referentie-indicator.\n             *\/\n            const SCALE_BLOCKS = 7;\n\n            const SCALE_BLOCK_WIDTH =\n                10 * PIXELS_PER_MM;\n\n            const SCALE_BLOCK_HEIGHT = 20;\n\n            const SCALE_WIDTH =\n                SCALE_BLOCK_WIDTH *\n                SCALE_BLOCKS;\n\n            const SCALE_GAP =\n                5 * PIXELS_PER_MM;\n\n            const EXPORT_MARGIN =\n                10 * PIXELS_PER_MM;\n\n\n            \/* =========================================================\n               STATE\n            ========================================================== *\/\n\n            let originalImage = null;\n\n            let displayedImage = null;\n\n            let originalFileName = 'artefact';\n\n            let cutWidth = 0;\n\n            let cutHeight = 0;\n\n            let imageX = 0;\n\n            let imageY = 0;\n\n            let rotation = 0;\n\n            let isSelecting = false;\n\n            let isDraggingImage = false;\n\n            let isDraggingScale = false;\n\n            let selectionStartX = 0;\n\n            let selectionStartY = 0;\n\n            let selectionWidth = 0;\n\n            let selectionHeight = 0;\n\n            let dragOffsetX = 0;\n\n            let dragOffsetY = 0;\n\n            let scaleX = 50;\n\n            let scaleY = 50;\n\n            let canDragImage = false;\n\n\n            \/* =========================================================\n               HELPERS\n            ========================================================== *\/\n\n            function setLoading(active) {\n\n                loading.classList.toggle(\n                    'is-active',\n                    active\n                );\n            }\n\n\n            function clamp(value, min, max) {\n\n                if (max < min) {\n                    return min;\n                }\n\n                return Math.min(\n                    Math.max(value, min),\n                    max\n                );\n            }\n\n\n            function updateEmptyState() {\n\n                empty.style.display =\n                    displayedImage\n                        ? 'none'\n                        : 'flex';\n            }\n\n\n            function updateImageState() {\n\n                imageState.textContent =\n                    displayedImage\n                        ? 'Afbeelding geladen'\n                        : 'Geen afbeelding';\n            }\n\n\n            \/* =========================================================\n               DIMENSIONS\n            ========================================================== *\/\n\n            function setDimensionsFromPixels() {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n                widthInput.value =\n                    (\n                        cutWidth \/\n                        PIXELS_PER_MM\n                    ).toFixed(1);\n\n                heightInput.value =\n                    (\n                        cutHeight \/\n                        PIXELS_PER_MM\n                    ).toFixed(1);\n            }\n\n\n            \/* =========================================================\n               CANVAS POSITION\n            ========================================================== *\/\n\n            function getCanvasPosition(event) {\n\n                const rect =\n                    canvas.getBoundingClientRect();\n\n                return {\n\n                    x:\n                        (\n                            event.clientX -\n                            rect.left\n                        ) *\n                        (\n                            canvas.width \/\n                            rect.width\n                        ),\n\n                    y:\n                        (\n                            event.clientY -\n                            rect.top\n                        ) *\n                        (\n                            canvas.height \/\n                            rect.height\n                        )\n\n                };\n            }\n\n\n            \/* =========================================================\n               AFBEELDING ALTIJD CENTREREN\n            ========================================================== *\/\n\n            function centerImage() {\n\n                imageX =\n                    (\n                        canvas.width -\n                        cutWidth\n                    ) \/ 2;\n\n                imageY =\n                    (\n                        canvas.height -\n                        cutHeight\n                    ) \/ 2;\n            }\n\n\n            \/*\n             * Deze functie wordt gebruikt nadat de breedte of hoogte\n             * verandert.\n             *\n             * De afbeelding wordt dus NIET vanaf de oude positie\n             * verder geschaald, maar volledig opnieuw gecentreerd.\n             *\/\n\n            function resizeAndCenterImage() {\n\n                centerImage();\n\n                keepScaleInsideImage();\n\n                redraw();\n            }\n\n\n            \/* =========================================================\n               SCALE HIT TEST\n            ========================================================== *\/\n\n            function isOnScale(pos) {\n\n                return (\n\n                    pos.x >= scaleX &&\n\n                    pos.x <=\n                        scaleX +\n                        SCALE_WIDTH &&\n\n                    pos.y >= scaleY &&\n\n                    pos.y <=\n                        scaleY +\n                        SCALE_BLOCK_HEIGHT\n\n                );\n            }\n\n\n            \/* =========================================================\n               IMAGE HIT TEST\n            ========================================================== *\/\n\n            function isOnImage(pos) {\n\n                return (\n\n                    pos.x >= imageX &&\n\n                    pos.x <=\n                        imageX +\n                        cutWidth &&\n\n                    pos.y >= imageY &&\n\n                    pos.y <=\n                        imageY +\n                        cutHeight\n\n                );\n            }\n\n\n            \/* =========================================================\n               SCALE BINNEN AFBEELDING HOUDEN\n            ========================================================== *\/\n\n            function keepScaleInsideImage() {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n\n                const maxX =\n                    imageX +\n                    Math.max(\n                        0,\n                        cutWidth -\n                        SCALE_WIDTH\n                    );\n\n\n                const maxY =\n                    imageY +\n                    Math.max(\n                        0,\n                        cutHeight -\n                        SCALE_BLOCK_HEIGHT\n                    );\n\n\n                scaleX =\n                    clamp(\n                        scaleX,\n                        imageX,\n                        maxX\n                    );\n\n\n                scaleY =\n                    clamp(\n                        scaleY,\n                        imageY,\n                        maxY\n                    );\n            }\n\n\n            \/* =========================================================\n               SCALE CENTREREN\n            ========================================================== *\/\n\n            function centerScale() {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n\n                scaleX =\n                    imageX +\n                    Math.max(\n                        0,\n                        (\n                            cutWidth -\n                            SCALE_WIDTH\n                        ) \/ 2\n                    );\n\n\n                scaleY =\n                    imageY +\n                    Math.max(\n                        0,\n                        cutHeight -\n                        SCALE_BLOCK_HEIGHT -\n                        8\n                    );\n\n\n                keepScaleInsideImage();\n            }\n\n\n            \/* =========================================================\n               DRAW SCALE\n            ========================================================== *\/\n\n            function drawScaleBar() {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n\n                keepScaleInsideImage();\n\n\n                ctx.save();\n\n\n                ctx.strokeStyle =\n                    '#000000';\n\n                ctx.lineWidth = 2;\n\n\n                for (\n                    let i = 0;\n                    i < SCALE_BLOCKS;\n                    i++\n                ) {\n\n                    ctx.fillStyle =\n                        i % 2 === 0\n                            ? '#000000'\n                            : '#ffffff';\n\n\n                    ctx.fillRect(\n\n                        scaleX +\n                        i *\n                        SCALE_BLOCK_WIDTH,\n\n                        scaleY,\n\n                        SCALE_BLOCK_WIDTH,\n\n                        SCALE_BLOCK_HEIGHT\n\n                    );\n                }\n\n\n                ctx.strokeRect(\n\n                    scaleX,\n                    scaleY,\n\n                    SCALE_WIDTH,\n                    SCALE_BLOCK_HEIGHT\n\n                );\n\n\n                ctx.fillStyle =\n                    '#000000';\n\n                ctx.font =\n                    '600 12px Arial, sans-serif';\n\n                ctx.textAlign =\n                    'left';\n\n                ctx.textBaseline =\n                    'top';\n\n\n                ctx.fillText(\n\n                    '1 cm',\n\n                    scaleX,\n\n                    scaleY +\n                    SCALE_BLOCK_HEIGHT +\n                    7\n\n                );\n\n\n                ctx.restore();\n            }\n\n\n            \/* =========================================================\n               REDRAW\n            ========================================================== *\/\n\n            function redraw() {\n\n                ctx.clearRect(\n\n                    0,\n                    0,\n\n                    canvas.width,\n                    canvas.height\n\n                );\n\n\n                if (!displayedImage) {\n\n                    updateEmptyState();\n\n                    updateImageState();\n\n                    return;\n                }\n\n\n                ctx.save();\n\n\n                ctx.translate(\n\n                    imageX +\n                    cutWidth \/ 2,\n\n                    imageY +\n                    cutHeight \/ 2\n\n                );\n\n\n                ctx.rotate(\n\n                    rotation *\n                    Math.PI \/\n                    2\n\n                );\n\n\n                ctx.drawImage(\n\n                    displayedImage,\n\n                    -cutWidth \/ 2,\n                    -cutHeight \/ 2,\n\n                    cutWidth,\n                    cutHeight\n\n                );\n\n\n                ctx.restore();\n\n\n                drawScaleBar();\n\n\n                if (isSelecting) {\n\n                    ctx.save();\n\n                    ctx.strokeStyle =\n                        '#9a3f3f';\n\n                    ctx.lineWidth = 2;\n\n                    ctx.setLineDash([\n                        7,\n                        5\n                    ]);\n\n\n                    ctx.strokeRect(\n\n                        selectionStartX,\n                        selectionStartY,\n\n                        selectionWidth,\n                        selectionHeight\n\n                    );\n\n\n                    ctx.setLineDash([]);\n\n                    ctx.restore();\n                }\n\n\n                updateEmptyState();\n\n                updateImageState();\n            }\n\n\n            \/* =========================================================\n               INITIALIZE CANVAS\n            ========================================================== *\/\n\n            function initializeCanvas() {\n\n                canvas.width = 1100;\n\n                canvas.height = 700;\n\n                redraw();\n            }\n\n\n            \/* =========================================================\n               LOAD IMAGE\n            ========================================================== *\/\n\n            function loadImage(src, name) {\n\n                setLoading(true);\n\n\n                const image =\n                    new Image();\n\n\n                image.onload =\n                    function () {\n\n                        originalImage =\n                            image;\n\n                        displayedImage =\n                            image;\n\n                        originalFileName =\n                            name ||\n                            'artefact';\n\n                        rotation = 0;\n\n                        canDragImage = false;\n\n\n                        let width =\n                            image.naturalWidth;\n\n                        let height =\n                            image.naturalHeight;\n\n\n                        if (\n                            width >\n                            MAX_CANVAS_WIDTH\n                        ) {\n\n                            const ratio =\n                                MAX_CANVAS_WIDTH \/\n                                width;\n\n\n                            width =\n                                Math.round(\n                                    width *\n                                    ratio\n                                );\n\n\n                            height =\n                                Math.round(\n                                    height *\n                                    ratio\n                                );\n                        }\n\n\n                        cutWidth = width;\n\n                        cutHeight = height;\n\n\n                        const availableWidth =\n                            canvas.width - 70;\n\n                        const availableHeight =\n                            canvas.height - 70;\n\n\n                        const fit =\n                            Math.min(\n\n                                1,\n\n                                availableWidth \/\n                                cutWidth,\n\n                                availableHeight \/\n                                cutHeight\n\n                            );\n\n\n                        cutWidth =\n                            Math.round(\n                                cutWidth *\n                                fit\n                            );\n\n\n                        cutHeight =\n                            Math.round(\n                                cutHeight *\n                                fit\n                            );\n\n\n                        centerImage();\n\n                        centerScale();\n\n\n                        setDimensionsFromPixels();\n\n\n                        fileStatus.textContent =\n                            name ||\n                            'Afbeelding geladen';\n\n\n                        setLoading(false);\n\n                        redraw();\n\n                    };\n\n\n                image.onerror =\n                    function () {\n\n                        setLoading(false);\n\n                        alert(\n                            'De afbeelding kon niet worden geladen.'\n                        );\n\n                    };\n\n\n                image.src = src;\n            }\n\n\n            \/* =========================================================\n               FILE INPUT\n            ========================================================== *\/\n\n            fileInput.addEventListener(\n                'change',\n                function () {\n\n                    const file =\n                        this.files &&\n                        this.files[0];\n\n\n                    if (!file) {\n                        return;\n                    }\n\n\n                    if (\n                        !file.type ||\n                        !file.type.startsWith(\n                            'image\/'\n                        )\n                    ) {\n\n                        alert(\n                            'Selecteer een geldige afbeelding.'\n                        );\n\n                        this.value = '';\n\n                        return;\n                    }\n\n\n                    const reader =\n                        new FileReader();\n\n\n                    reader.onload =\n                        function (event) {\n\n                            if (\n                                !event.target ||\n                                !event.target.result\n                            ) {\n\n                                alert(\n                                    'De afbeelding kon niet worden gelezen.'\n                                );\n\n                                return;\n                            }\n\n\n                            const filename =\n                                file.name.replace(\n                                    \/\\.[^\/.]+$\/,\n                                    ''\n                                );\n\n\n                            loadImage(\n\n                                event.target.result,\n\n                                filename\n\n                            );\n                        };\n\n\n                    reader.onerror =\n                        function () {\n\n                            alert(\n                                'De afbeelding kon niet worden gelezen.'\n                            );\n                        };\n\n\n                    reader.readAsDataURL(file);\n\n                    this.value = '';\n\n                }\n            );\n\n\n            \/* =========================================================\n               GROTE PLUS\n            ========================================================== *\/\n\n            emptyButton.addEventListener(\n                'click',\n                function (event) {\n\n                    event.preventDefault();\n\n                    if (displayedImage) {\n                        return;\n                    }\n\n                    fileInput.click();\n                }\n            );\n\n\n            \/* =========================================================\n               POINTER DOWN\n            ========================================================== *\/\n\n            function pointerDown(event) {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n\n                event.preventDefault();\n\n\n                const pos =\n                    getCanvasPosition(event);\n\n\n                if (isOnScale(pos)) {\n\n                    isDraggingScale = true;\n\n\n                    dragOffsetX =\n                        pos.x -\n                        scaleX;\n\n\n                    dragOffsetY =\n                        pos.y -\n                        scaleY;\n\n\n                    canvas.classList.add(\n                        'cmk-dragging'\n                    );\n\n\n                    try {\n\n                        canvas.setPointerCapture(\n                            event.pointerId\n                        );\n\n                    } catch (error) {}\n\n                    return;\n                }\n\n\n                if (\n                    canDragImage &&\n                    isOnImage(pos)\n                ) {\n\n                    isDraggingImage = true;\n\n\n                    dragOffsetX =\n                        pos.x -\n                        imageX;\n\n\n                    dragOffsetY =\n                        pos.y -\n                        imageY;\n\n\n                    canvas.classList.add(\n                        'cmk-dragging'\n                    );\n\n\n                    try {\n\n                        canvas.setPointerCapture(\n                            event.pointerId\n                        );\n\n                    } catch (error) {}\n\n                    return;\n                }\n\n\n                selectionStartX =\n                    pos.x;\n\n                selectionStartY =\n                    pos.y;\n\n                selectionWidth = 0;\n\n                selectionHeight = 0;\n\n                isSelecting = true;\n\n                redraw();\n            }\n\n\n            \/* =========================================================\n               POINTER MOVE\n            ========================================================== *\/\n\n            function pointerMove(event) {\n\n                if (!displayedImage) {\n                    return;\n                }\n\n\n                if (\n                    !isSelecting &&\n                    !isDraggingImage &&\n                    !isDraggingScale\n                ) {\n                    return;\n                }\n\n\n                event.preventDefault();\n\n\n                const pos =\n                    getCanvasPosition(event);\n\n\n                if (isDraggingScale) {\n\n                    scaleX =\n                        pos.x -\n                        dragOffsetX;\n\n                    scaleY =\n                        pos.y -\n                        dragOffsetY;\n\n\n                    keepScaleInsideImage();\n\n                    redraw();\n\n                    return;\n                }\n\n\n                if (isDraggingImage) {\n\n                    imageX =\n                        pos.x -\n                        dragOffsetX;\n\n                    imageY =\n                        pos.y -\n                        dragOffsetY;\n\n\n                    keepScaleInsideImage();\n\n                    redraw();\n\n                    return;\n                }\n\n\n                if (isSelecting) {\n\n                    selectionWidth =\n                        pos.x -\n                        selectionStartX;\n\n\n                    selectionHeight =\n                        pos.y -\n                        selectionStartY;\n\n\n                    redraw();\n                }\n            }\n\n\n            \/* =========================================================\n               POINTER UP\n            ========================================================== *\/\n\n            function pointerUp(event) {\n\n                isSelecting = false;\n\n                isDraggingImage = false;\n\n                isDraggingScale = false;\n\n\n                canvas.classList.remove(\n                    'cmk-dragging'\n                );\n\n\n                if (\n                    event &&\n                    event.pointerId !== undefined\n                ) {\n\n                    try {\n\n                        canvas.releasePointerCapture(\n                            event.pointerId\n                        );\n\n                    } catch (error) {}\n                }\n\n\n                redraw();\n            }\n\n\n            canvas.addEventListener(\n                'pointerdown',\n                pointerDown\n            );\n\n\n            canvas.addEventListener(\n                'pointermove',\n                pointerMove\n            );\n\n\n            canvas.addEventListener(\n                'pointerup',\n                pointerUp\n            );\n\n\n            canvas.addEventListener(\n                'pointercancel',\n                pointerUp\n            );\n\n\n            \/* =========================================================\n               UITSNIJDEN\n            ========================================================== *\/\n\n            cutButton.addEventListener(\n                'click',\n                function () {\n\n                    if (!originalImage) {\n\n                        alert(\n                            'Laad eerst een afbeelding.'\n                        );\n\n                        return;\n                    }\n\n\n                    const width =\n                        Math.abs(\n                            selectionWidth\n                        );\n\n\n                    const height =\n                        Math.abs(\n                            selectionHeight\n                        );\n\n\n                    if (\n                        width < 5 ||\n                        height < 5\n                    ) {\n\n                        alert(\n                            'Selecteer eerst een gebied op de afbeelding.'\n                        );\n\n                        return;\n                    }\n\n\n                    let selectX =\n                        selectionWidth >= 0\n                            ? selectionStartX\n                            : selectionStartX +\n                              selectionWidth;\n\n\n                    let selectY =\n                        selectionHeight >= 0\n                            ? selectionStartY\n                            : selectionStartY +\n                              selectionHeight;\n\n\n                    \/*\n                     * Selectie binnen de afbeelding houden.\n                     *\/\n\n                    selectX =\n                        clamp(\n                            selectX,\n                            imageX,\n                            imageX + cutWidth\n                        );\n\n\n                    selectY =\n                        clamp(\n                            selectY,\n                            imageY,\n                            imageY + cutHeight\n                        );\n\n\n                    const safeWidth =\n                        Math.min(\n                            width,\n                            (\n                                imageX +\n                                cutWidth\n                            ) -\n                            selectX\n                        );\n\n\n                    const safeHeight =\n                        Math.min(\n                            height,\n                            (\n                                imageY +\n                                cutHeight\n                            ) -\n                            selectY\n                        );\n\n\n                    if (\n                        safeWidth < 5 ||\n                        safeHeight < 5\n                    ) {\n\n                        alert(\n                            'De selectie valt buiten de afbeelding.'\n                        );\n\n                        return;\n                    }\n\n\n                    const sourceScaleX =\n                        originalImage.naturalWidth \/\n                        cutWidth;\n\n\n                    const sourceScaleY =\n                        originalImage.naturalHeight \/\n                        cutHeight;\n\n\n                    const sourceX =\n                        (\n                            selectX -\n                            imageX\n                        ) *\n                        sourceScaleX;\n\n\n                    const sourceY =\n                        (\n                            selectY -\n                            imageY\n                        ) *\n                        sourceScaleY;\n\n\n                    const sourceWidth =\n                        safeWidth *\n                        sourceScaleX;\n\n\n                    const sourceHeight =\n                        safeHeight *\n                        sourceScaleY;\n\n\n                    const tempCanvas =\n                        document.createElement(\n                            'canvas'\n                        );\n\n\n                    tempCanvas.width =\n                        Math.max(\n                            1,\n                            Math.round(safeWidth)\n                        );\n\n\n                    tempCanvas.height =\n                        Math.max(\n                            1,\n                            Math.round(safeHeight)\n                        );\n\n\n                    const tempCtx =\n                        tempCanvas.getContext(\n                            '2d'\n                        );\n\n\n                    tempCtx.imageSmoothingEnabled =\n                        true;\n\n\n                    tempCtx.imageSmoothingQuality =\n                        'high';\n\n\n                    tempCtx.drawImage(\n\n                        originalImage,\n\n                        sourceX,\n                        sourceY,\n\n                        sourceWidth,\n                        sourceHeight,\n\n                        0,\n                        0,\n\n                        tempCanvas.width,\n                        tempCanvas.height\n\n                    );\n\n\n                    const cropped =\n                        new Image();\n\n\n                    cropped.onload =\n                        function () {\n\n                            displayedImage =\n                                cropped;\n\n\n                            cutWidth =\n                                safeWidth;\n\n\n                            cutHeight =\n                                safeHeight;\n\n\n                            const fit =\n                                Math.min(\n\n                                    1,\n\n                                    (\n                                        canvas.width -\n                                        40\n                                    ) \/\n                                    cutWidth,\n\n                                    (\n                                        canvas.height -\n                                        40\n                                    ) \/\n                                    cutHeight\n\n                                );\n\n\n                            if (fit < 1) {\n\n                                cutWidth =\n                                    Math.round(\n                                        cutWidth *\n                                        fit\n                                    );\n\n\n                                cutHeight =\n                                    Math.round(\n                                        cutHeight *\n                                        fit\n                                    );\n                            }\n\n\n                            \/*\n                             * BELANGRIJK:\n                             *\n                             * Na uitsnijden wordt de nieuwe afbeelding\n                             * altijd opnieuw exact gecentreerd.\n                             *\/\n\n                            centerImage();\n\n\n                            \/*\n                             * Schaalbalk opnieuw onderaan centreren.\n                             *\/\n\n                            centerScale();\n\n\n                            canDragImage = true;\n\n\n                            selectionWidth = 0;\n\n                            selectionHeight = 0;\n\n\n                            rotation = 0;\n\n\n                            setDimensionsFromPixels();\n\n\n                            redraw();\n\n                        };\n\n\n                    cropped.src =\n                        tempCanvas.toDataURL(\n                            'image\/png'\n                        );\n\n                }\n            );\n\n\n            \/* =========================================================\n               BREEDTE WIJZIGEN\n            ========================================================== *\/\n\n            widthInput.addEventListener(\n                'input',\n                function () {\n\n                    if (!displayedImage) {\n                        return;\n                    }\n\n\n                    const value =\n                        parseFloat(\n                            this.value\n                        );\n\n\n                    if (\n                        !Number.isFinite(value) ||\n                        value <= 0\n                    ) {\n\n                        return;\n                    }\n\n\n                    cutWidth =\n                        value *\n                        PIXELS_PER_MM;\n\n\n                    \/*\n                     * BELANGRIJK:\n                     *\n                     * Na iedere breedtewijziging wordt de afbeelding\n                     * opnieuw exact gecentreerd.\n                     *\/\n\n                    centerImage();\n\n\n                    \/*\n                     * De schaal blijft binnen de nieuwe afbeelding.\n                     *\/\n\n                    keepScaleInsideImage();\n\n\n                    redraw();\n\n                }\n            );\n\n\n            \/* =========================================================\n               HOOGTE WIJZIGEN\n            ========================================================== *\/\n\n            heightInput.addEventListener(\n                'input',\n                function () {\n\n                    if (!displayedImage) {\n                        return;\n                    }\n\n\n                    const value =\n                        parseFloat(\n                            this.value\n                        );\n\n\n                    if (\n                        !Number.isFinite(value) ||\n                        value <= 0\n                    ) {\n\n                        return;\n                    }\n\n\n                    cutHeight =\n                        value *\n                        PIXELS_PER_MM;\n\n\n                    \/*\n                     * BELANGRIJK:\n                     *\n                     * Na iedere hoogtewijziging wordt de afbeelding\n                     * opnieuw exact gecentreerd.\n                     *\/\n\n                    centerImage();\n\n\n                    \/*\n                     * De schaal blijft binnen de nieuwe afbeelding.\n                     *\/\n\n                    keepScaleInsideImage();\n\n\n                    redraw();\n\n                }\n            );\n\n\n            \/* =========================================================\n               RESET\n            ========================================================== *\/\n\n            function resetToOriginal() {\n\n                if (!originalImage) {\n                    return;\n                }\n\n\n                displayedImage =\n                    originalImage;\n\n\n                rotation = 0;\n\n                canDragImage = false;\n\n\n                let width =\n                    originalImage.naturalWidth;\n\n\n                let height =\n                    originalImage.naturalHeight;\n\n\n                if (\n                    width >\n                    MAX_CANVAS_WIDTH\n                ) {\n\n                    const ratio =\n                        MAX_CANVAS_WIDTH \/\n                        width;\n\n\n                    width =\n                        Math.round(\n                            width *\n                            ratio\n                        );\n\n\n                    height =\n                        Math.round(\n                            height *\n                            ratio\n                        );\n                }\n\n\n                const fit =\n                    Math.min(\n\n                        1,\n\n                        (\n                            canvas.width -\n                            70\n                        ) \/\n                        width,\n\n                        (\n                            canvas.height -\n                            70\n                        ) \/\n                        height\n\n                    );\n\n\n                cutWidth =\n                    Math.round(\n                        width *\n                        fit\n                    );\n\n\n                cutHeight =\n                    Math.round(\n                        height *\n                        fit\n                    );\n\n\n                \/*\n                 * Altijd opnieuw centreren.\n                 *\/\n\n                centerImage();\n\n                centerScale();\n\n\n                setDimensionsFromPixels();\n\n\n                redraw();\n            }\n\n\n            resetButton.addEventListener(\n                'click',\n                resetToOriginal\n            );\n\n\n            resetSecondary.addEventListener(\n                'click',\n                resetToOriginal\n            );\n\n\n            \/* =========================================================\n               ROTEREN\n            ========================================================== *\/\n\n            rotateButton.addEventListener(\n                'click',\n                function () {\n\n                    if (!displayedImage) {\n\n                        alert(\n                            'Laad eerst een afbeelding.'\n                        );\n\n                        return;\n                    }\n\n\n                    rotation =\n                        (\n                            rotation +\n                            1\n                        ) % 4;\n\n\n                    \/*\n                     * Rotatie verandert de visuele ori\u00ebntatie,\n                     * maar de positie blijft gecentreerd.\n                     *\/\n\n                    centerImage();\n\n                    redraw();\n\n                }\n            );\n\n\n            \/* =========================================================\n               DOWNLOAD\n            ========================================================== *\/\n\n            downloadButton.addEventListener(\n                'click',\n                function () {\n\n                    if (!displayedImage) {\n\n                        alert(\n                            'Laad eerst een afbeelding.'\n                        );\n\n                        return;\n                    }\n\n\n                    const rotatedWidth =\n                        rotation % 2 === 0\n                            ? cutWidth\n                            : cutHeight;\n\n\n                    const rotatedHeight =\n                        rotation % 2 === 0\n                            ? cutHeight\n                            : cutWidth;\n\n\n                    const outputWidth =\n                        rotatedWidth +\n                        (\n                            EXPORT_MARGIN *\n                            2\n                        );\n\n\n                    const outputHeight =\n                        rotatedHeight +\n                        (\n                            EXPORT_MARGIN *\n                            2\n                        ) +\n                        SCALE_GAP +\n                        SCALE_BLOCK_HEIGHT +\n                        20;\n\n\n                    const output =\n                        document.createElement(\n                            'canvas'\n                        );\n\n\n                    output.width =\n                        Math.ceil(\n                            outputWidth\n                        );\n\n\n                    output.height =\n                        Math.ceil(\n                            outputHeight\n                        );\n\n\n                    const outputCtx =\n                        output.getContext(\n                            '2d'\n                        );\n\n\n                    outputCtx.fillStyle =\n                        '#ffffff';\n\n\n                    outputCtx.fillRect(\n\n                        0,\n                        0,\n\n                        output.width,\n                        output.height\n\n                    );\n\n\n                    \/* IMAGE *\/\n\n                    outputCtx.save();\n\n\n                    outputCtx.translate(\n\n                        EXPORT_MARGIN +\n                        rotatedWidth \/ 2,\n\n                        EXPORT_MARGIN +\n                        rotatedHeight \/ 2\n\n                    );\n\n\n                    outputCtx.rotate(\n\n                        rotation *\n                        Math.PI \/\n                        2\n\n                    );\n\n\n                    outputCtx.drawImage(\n\n                        displayedImage,\n\n                        -cutWidth \/ 2,\n                        -cutHeight \/ 2,\n\n                        cutWidth,\n                        cutHeight\n\n                    );\n\n\n                    outputCtx.restore();\n\n\n                    \/* SCALE *\/\n\n                    const exportScaleX =\n                        EXPORT_MARGIN +\n                        (\n                            rotatedWidth -\n                            SCALE_WIDTH\n                        ) \/ 2;\n\n\n                    const exportScaleY =\n                        EXPORT_MARGIN +\n                        rotatedHeight +\n                        SCALE_GAP;\n\n\n                    for (\n                        let i = 0;\n                        i < SCALE_BLOCKS;\n                        i++\n                    ) {\n\n                        outputCtx.fillStyle =\n                            i % 2 === 0\n                                ? '#000000'\n                                : '#ffffff';\n\n\n                        outputCtx.fillRect(\n\n                            exportScaleX +\n                            i *\n                            SCALE_BLOCK_WIDTH,\n\n                            exportScaleY,\n\n                            SCALE_BLOCK_WIDTH,\n\n                            SCALE_BLOCK_HEIGHT\n\n                        );\n                    }\n\n\n                    outputCtx.strokeStyle =\n                        '#000000';\n\n\n                    outputCtx.lineWidth = 2;\n\n\n                    outputCtx.strokeRect(\n\n                        exportScaleX,\n                        exportScaleY,\n\n                        SCALE_WIDTH,\n                        SCALE_BLOCK_HEIGHT\n\n                    );\n\n\n                    outputCtx.fillStyle =\n                        '#000000';\n\n\n                    outputCtx.font =\n                        '600 12px Arial, sans-serif';\n\n\n                    outputCtx.textAlign =\n                        'left';\n\n\n                    outputCtx.textBaseline =\n                        'top';\n\n\n                    outputCtx.fillText(\n\n                        '1 cm',\n\n                        exportScaleX,\n\n                        exportScaleY +\n                        SCALE_BLOCK_HEIGHT +\n                        7\n\n                    );\n\n\n                    \/* DOWNLOAD *\/\n\n                    try {\n\n                        const dataURL =\n                            output.toDataURL(\n                                'image\/jpeg',\n                                0.95\n                            );\n\n\n                        const link =\n                            document.createElement(\n                                'a'\n                            );\n\n\n                        link.href =\n                            dataURL;\n\n\n                        link.download =\n                            (\n                                originalFileName ||\n                                'artefact'\n                            ) +\n                            '_cm_kenmerk.jpg';\n\n\n                        document.body.appendChild(\n                            link\n                        );\n\n\n                        link.click();\n\n\n                        document.body.removeChild(\n                            link\n                        );\n\n                    } catch (error) {\n\n                        console.error(\n                            'CM Kenmerk export error:',\n                            error\n                        );\n\n\n                        alert(\n                            'De afbeelding kon niet worden ge\u00ebxporteerd.'\n                        );\n                    }\n\n                }\n            );\n\n\n            \/* =========================================================\n               START\n            ========================================================== *\/\n\n            initializeCanvas();\n\n            updateEmptyState();\n\n            updateImageState();\n\n        })();\n        <\/script>\n\n        \n\n\n\n<div class=\"template-frame\">\n  <div class=\"afbeelding-kader\">\n    <div class=\"tekst-kader\">\n\n      <h1><\/h1>\n\n      <h2 id=\"tijdschriften\">\n        <a href=\"#\" class=\"nummer-icoon nummer-1\">2<\/a>\n      <\/h2>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* Template container *\/\n.template-frame {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* Afbeelding container *\/\n.afbeelding-kader {\n  width: 100%;\n  aspect-ratio: 1200\/200;\n  background-image: url('https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/04\/cropped-sierlijn.png');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Tekstkader *\/\n.tekst-kader {\n  display: inline-block;\n  background-color: white;\n  padding: 2mm 5mm;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n\/* Nummer-rondje *\/\n.nummer-icoon {\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: 50%;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 18px;\n  font-weight: bold;\n  line-height: 1;\n\n  text-decoration: none;\n}\n\n\/* Zwart rondje met witte 1 *\/\n.nummer-icoon.nummer-1 {\n  background: #000 !important;\n  color: #fff !important;\n}\n\n\/* Hover *\/\n.nummer-icoon:hover {\n  transform: scale(1.08);\n}\n\n\/* H2 standaardmarges verwijderen *\/\n#tijdschriften {\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n<\/style>\n\n\n\n        <div class=\"vuiststeen-leer-container\">\n\n            <!-- HEADER -->\n            <header class=\"vsl-header\">\n\n                <div class=\"vsl-header-icon\">\n                    \ud80c\udd53\n                <\/div>\n\n                <div class=\"vsl-header-text\">\n\n                    <span class=\"vsl-kicker\">\n                        STEENTIJDVONDSTEN.NL\n                    <\/span>\n\n                    <h2>\n                        Artefacten annotatie\n                    <\/h2>\n\n                    <p>\n                        Markeer technologische, morfologische en natuurlijke\n                        kenmerken rechtstreeks op de afbeelding.\n                    <\/p>\n\n                <\/div>\n\n            <\/header>\n\n\n            <!-- TOOLBAR -->\n            <section class=\"vsl-toolbar\">\n\n                <div class=\"vsl-toolbar-left\">\n\n                    <label\n                        class=\"vsl-upload-button\"\n                        for=\"uploadImage\"\n                    >\n\n                        <span class=\"vsl-button-icon\">\n                            \uff0b\n                        <\/span>\n\n                        <span>\n                            Eigen afbeelding\n                        <\/span>\n\n                        <input\n                            type=\"file\"\n                            id=\"uploadImage\"\n                            accept=\"image\/jpeg,image\/png,image\/webp,image\/gif,image\/*\"\n                        >\n\n                    <\/label>\n\n                    <span\n                        class=\"vsl-upload-status\"\n                        id=\"uploadStatus\"\n                    >\n                        JPG, PNG of WebP\n                    <\/span>\n\n                <\/div>\n\n\n                <div class=\"vsl-toolbar-right\">\n\n                    <button\n                        type=\"button\"\n                        id=\"clear\"\n                        class=\"vsl-action-button vsl-reset\"\n                    >\n                        <span>\u21ba<\/span>\n                        Reset\n                    <\/button>\n\n                    <button\n                        type=\"button\"\n                        id=\"exportJPG\"\n                        class=\"vsl-action-button vsl-export\"\n                    >\n                        <span>\u2193<\/span>\n                        Exporteer JPG\n                    <\/button>\n\n                <\/div>\n\n            <\/section>\n\n\n            <!-- CURRENT TOOL -->\n            <section class=\"vsl-current-tool\">\n\n                <div class=\"vsl-current-indicator\"><\/div>\n\n                <div class=\"vsl-current-content\">\n\n                    <span class=\"vsl-current-label\">\n                        Geselecteerd kenmerk\n                    <\/span>\n\n                    <strong id=\"currentToolLabel\">\n                        Breuklijn\n                    <\/strong>\n\n                <\/div>\n\n                <div class=\"vsl-current-help\">\n                    Klik vervolgens op de steen om het kenmerk te plaatsen.\n                <\/div>\n\n            <\/section>\n\n\n            <!-- MAIN GRID -->\n            <div class=\"vsl-main-grid\">\n\n\n                <!-- TOOLS -->\n                <aside class=\"vsl-tools-panel\">\n\n                    <!-- PANEL HEADING -->\n                    <div class=\"vsl-panel-heading\">\n\n                        <div>\n\n                            <span class=\"vsl-panel-kicker\">\n                                ANNOTATIE\n                            <\/span>\n\n                            <h3>\n                                Kenmerken\n                            <\/h3>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-panel-heading-actions\">\n\n                            <button\n                                type=\"button\"\n                                class=\"vsl-help-button\"\n                                aria-label=\"Bekijk uitleg van de kenmerken\"\n                                title=\"Uitleg kenmerken\"\n                            >\n                                Uitleg kenmerken\n                            <\/button>\n\n                            <span class=\"vsl-tool-count\">\n                                43\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <!-- 01 TECHNOLOGIE -->\n                    <section class=\"vsl-tool-section\">\n\n                        <div class=\"vsl-section-title\">\n\n                            <span class=\"vsl-section-number\">\n                                01\n                            <\/span>\n\n                            <div>\n\n                                <strong>\n                                    Technologische kenmerken\n                                <\/strong>\n\n                                <small>\n                                    Bewerking en productie\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-tool-grid\">\n\n                            <button type=\"button\" data-type=\"breuk\">\n                                Breuklijn\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"slagrichting\">\n                                Slagrichting\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"slagbult\">\n                                Slagbult\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"retouche\">\n                                Retouche\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"ribben\">\n                                Ribben\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"platform\">\n                                Platform\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"conchoidale_breuk\">\n                                Conchoidale breuk\n                            <\/button>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 02 OPPERVLAK -->\n                    <section class=\"vsl-tool-section\">\n\n                        <div class=\"vsl-section-title\">\n\n                            <span class=\"vsl-section-number\">\n                                02\n                            <\/span>\n\n                            <div>\n\n                                <strong>\n                                    Oppervlakte &amp; gebruik\n                                <\/strong>\n\n                                <small>\n                                    Verwering en gebruikssporen\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-tool-grid\">\n\n                            <button type=\"button\" data-type=\"cortex\">\n                                Cortex\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"patina\">\n                                Patina\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"windlak\">\n                                Windlak\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"verbranding\">\n                                Verbranding\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"vorstschade\">\n                                Cryoglaciale fracturen\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"slijtage\">\n                                Slijtage\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"frictieglans\">\n                                Frictieglans\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"striae\">\n                                Krassporen\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"microfractuur\">\n                                Microfractuur\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"impactspoor\">\n                                Impactspoor\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"cryogene_verwering\">\n                                Cryogene verwering\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"podlits\">\n                                Podlits\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"vorstsplijtringen\">\n                                Vorstsplijtringen\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"percussiesporen\">\n                                Percussiesporen\n                            <\/button>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 03 MORFOLOGIE -->\n                    <section class=\"vsl-tool-section\">\n\n                        <div class=\"vsl-section-title\">\n\n                            <span class=\"vsl-section-number\">\n                                03\n                            <\/span>\n\n                            <div>\n\n                                <strong>\n                                    Morfologie \/ anatomie\n                                <\/strong>\n\n                                <small>\n                                    Ori\u00ebntatie van het artefact\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-tool-grid\">\n\n                            <button type=\"button\" data-type=\"ventraal\">\n                                Ventrale zijde\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"dorsaal\">\n                                Dorsale zijde\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"distaal\">\n                                Distaal uiteinde\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"proximaal\">\n                                Proximaal uiteinde\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"linkerrand\">\n                                Linker snijrand\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"rechterrand\">\n                                Rechter snijrand\n                            <\/button>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 04 EXTRA -->\n                    <section class=\"vsl-tool-section\">\n\n                        <div class=\"vsl-section-title\">\n\n                            <span class=\"vsl-section-number\">\n                                04\n                            <\/span>\n\n                            <div>\n\n                                <strong>\n                                    Extra kenmerken\n                                <\/strong>\n\n                                <small>\n                                    Bijzondere observaties\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-tool-grid\">\n\n                            <button type=\"button\" data-type=\"kerf\">\n                                Kerf \/ Notch\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"boorpunt\">\n                                Boorpunt\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"schrabberrand\">\n                                Schrabberrand\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"stekerpunt\">\n                                Stekerpunt\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"kernrest\">\n                                Kernrest\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"silexknol\">\n                                Silexknol\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"ijzerinfiltratie\">\n                                IJzerinfiltratie\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"liesegangen\">\n                                Liesegangen\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"recente_beschadiging\">\n                                Recente beschadiging\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"fossiele_rest\">\n                                Fossiele rest\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"rolsteen_slijtage\">\n                                Rolsteen-slijtage\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"watererosie\">\n                                Watererosie\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"afslag\">\n                                Afslag \/ Flake\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"blade\">\n                                Blade\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"microflake\">\n                                Microflake\n                            <\/button>\n\n                            <button type=\"button\" data-type=\"retouched_flake\">\n                                Retouched flake\n                            <\/button>\n\n                        <\/div>\n\n                    <\/section>\n\n                <\/aside>\n\n\n                <!-- WORKSPACE -->\n                <main class=\"vsl-workspace-panel\">\n\n                    <div class=\"vsl-workspace-header\">\n\n                        <div>\n\n                            <span class=\"vsl-panel-kicker\">\n                                WERKBLAD\n                            <\/span>\n\n                            <h3>\n                                Artefact\n                            <\/h3>\n\n                        <\/div>\n\n                        <div class=\"vsl-workspace-info\">\n\n                            <span id=\"markCount\">\n                                0 markeringen\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"vsl-canvas-wrapper\">\n\n                        <div class=\"vsl-canvas-inner\">\n\n                            <canvas id=\"steenCanvas\"><\/canvas>\n\n                            <div\n                                class=\"vsl-loading\"\n                                id=\"canvasLoading\"\n                            >\n\n                                <div class=\"vsl-spinner\"><\/div>\n\n                                <span>\n                                    Afbeelding laden\u2026\n                                <\/span>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"vsl-canvas-footer\">\n\n                        <div class=\"vsl-tip\">\n\n                            <span class=\"vsl-tip-icon\">\n                                i\n                            <\/span>\n\n                            <span>\n                                Klik op de afbeelding om een kenmerk te plaatsen.\n                                Versleep een markering om deze te verplaatsen.\n                                Rechtsklik om een markering te verwijderen.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/main>\n\n            <\/div>\n\n\n            <!-- ========================================================= -->\n            <!-- UITLEG POPUP -->\n            <!-- ========================================================= -->\n\n            <div\n                class=\"vsl-help-overlay\"\n                aria-hidden=\"true\"\n            >\n\n                <div\n                    class=\"vsl-help-modal\"\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-labelledby=\"vsl-help-title\"\n                >\n\n                    <button\n                        type=\"button\"\n                        class=\"vsl-help-close\"\n                        aria-label=\"Sluiten\"\n                    >\n                        &times;\n                    <\/button>\n\n\n                    <div class=\"vsl-help-modal-header\">\n\n                        <span class=\"vsl-panel-kicker\">\n                            HANDLEIDING\n                        <\/span>\n\n                        <h3 id=\"vsl-help-title\">\n                            Uitleg van de kenmerken\n                        <\/h3>\n\n                        <p>\n                            Hieronder vind je een korte uitleg van de kenmerken\n                            die je in de annotatiemodule kunt markeren.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <!-- 01 TECHNOLOGIE -->\n                    <section class=\"vsl-help-section\">\n\n                        <div class=\"vsl-help-section-title\">\n\n                            <span>01<\/span>\n\n                            <div>\n                                <strong>\n                                    Technologische kenmerken\n                                <\/strong>\n\n                                <small>\n                                    Bewerking en productie\n                                <\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-help-items\">\n\n                            <div>\n                                <strong>Breuklijn<\/strong>\n                                <p>\n                                    Een zichtbare lijn waar het materiaal\n                                    is gebroken of waar een breukvlak overgaat\n                                    in een ander oppervlak.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Slagrichting<\/strong>\n                                <p>\n                                    De richting waarin de kracht van een slag\n                                    of afsplitsing zich over het materiaal\n                                    heeft voortgeplant.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Slagbult<\/strong>\n                                <p>\n                                    Een bolle verhoging op het breukvlak,\n                                    meestal aan de ventrale zijde van een afslag.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Retouche<\/strong>\n                                <p>\n                                    Secundaire bewerking waarbij kleine\n                                    afslagen langs een rand zijn verwijderd.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Ribben<\/strong>\n                                <p>\n                                    Reli\u00ebfranden tussen negatieve afslagvlakken\n                                    op een artefact.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Platform<\/strong>\n                                <p>\n                                    Het slagvlak of contactvlak waarop kracht\n                                    werd uitgeoefend om een afslag te produceren.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Conchoidale breuk<\/strong>\n                                <p>\n                                    Schelpvormige breuk met gebogen breuklijnen,\n                                    kenmerkend voor bros materiaal zoals vuursteen.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 02 OPPERVLAK -->\n                    <section class=\"vsl-help-section\">\n\n                        <div class=\"vsl-help-section-title\">\n\n                            <span>02<\/span>\n\n                            <div>\n                                <strong>\n                                    Oppervlakte &amp; gebruik\n                                <\/strong>\n\n                                <small>\n                                    Verwering en gebruikssporen\n                                <\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-help-items\">\n\n                            <div>\n                                <strong>Cortex<\/strong>\n                                <p>\n                                    De oorspronkelijke buitenzijde van een\n                                    vuursteenknol.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Patina<\/strong>\n                                <p>\n                                    Veranderde kleur of structuur van het\n                                    oppervlak door langdurige aantasting.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Windlak<\/strong>\n                                <p>\n                                    Oppervlakteglans of afslijting die kan\n                                    samenhangen met wind- en sedimentwerking.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Verbranding<\/strong>\n                                <p>\n                                    Sporen van verhitting zoals verkleuring,\n                                    craquel\u00e9 of thermische breuken.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Cryoglaciale fracturen<\/strong>\n                                <p>\n                                    Breuken die verband kunnen houden met\n                                    vorst- en dooiprocessen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Slijtage<\/strong>\n                                <p>\n                                    Materiaalverlies of afronding door\n                                    mechanische belasting of gebruik.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Frictieglans<\/strong>\n                                <p>\n                                    Glans of polish die door herhaalde\n                                    wrijving kan zijn ontstaan.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Krassporen<\/strong>\n                                <p>\n                                    Lineaire groeven of krasjes op het oppervlak.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Microfractuur<\/strong>\n                                <p>\n                                    Een zeer kleine breuk die soms alleen bij\n                                    goede verlichting of vergroting zichtbaar is.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Impactspoor<\/strong>\n                                <p>\n                                    Plaatselijk spoor door een botsing, stoot\n                                    of geconcentreerde mechanische belasting.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Cryogene verwering<\/strong>\n                                <p>\n                                    Oppervlakteverandering door herhaald\n                                    bevriezen en ontdooien.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Podlits<\/strong>\n                                <p>\n                                    Kleine putjes of lokale oppervlaktekenmerken\n                                    die als podlits zijn aangeduid.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Vorstsplijtringen<\/strong>\n                                <p>\n                                    Ring- of boogvormige breukpatronen die\n                                    kunnen samenhangen met vorstspanningen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Percussiesporen<\/strong>\n                                <p>\n                                    Sporen die samenhangen met het slaan of\n                                    percuteren van de steen.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 03 MORFOLOGIE -->\n                    <section class=\"vsl-help-section\">\n\n                        <div class=\"vsl-help-section-title\">\n\n                            <span>03<\/span>\n\n                            <div>\n                                <strong>\n                                    Morfologie \/ anatomie\n                                <\/strong>\n\n                                <small>\n                                    Ori\u00ebntatie van het artefact\n                                <\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-help-items\">\n\n                            <div>\n                                <strong>Ventrale zijde<\/strong>\n                                <p>\n                                    De zijde van een afslag waarop onder andere\n                                    de slagbult zichtbaar kan zijn.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Dorsale zijde<\/strong>\n                                <p>\n                                    De tegenoverliggende zijde, vaak met\n                                    eerdere negatieve afslagvlakken en eventueel\n                                    cortex.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Distaal uiteinde<\/strong>\n                                <p>\n                                    Het uiteinde tegenover het proximale\n                                    gedeelte of slagvlak.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Proximaal uiteinde<\/strong>\n                                <p>\n                                    Het gedeelte bij het oorspronkelijke\n                                    platform of de slagzone.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Linker snijrand<\/strong>\n                                <p>\n                                    De linker laterale rand volgens de gekozen\n                                    ori\u00ebntatie van het artefact.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Rechter snijrand<\/strong>\n                                <p>\n                                    De rechter laterale rand volgens de gekozen\n                                    ori\u00ebntatie van het artefact.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- 04 EXTRA -->\n                    <section class=\"vsl-help-section\">\n\n                        <div class=\"vsl-help-section-title\">\n\n                            <span>04<\/span>\n\n                            <div>\n                                <strong>\n                                    Extra kenmerken\n                                <\/strong>\n\n                                <small>\n                                    Bijzondere observaties\n                                <\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"vsl-help-items\">\n\n                            <div>\n                                <strong>Kerf \/ Notch<\/strong>\n                                <p>\n                                    Een duidelijke inkeping in een rand.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Boorpunt<\/strong>\n                                <p>\n                                    Een puntvormig spoor of schade die met\n                                    boren of perforeren kan samenhangen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Schrabberrand<\/strong>\n                                <p>\n                                    Een bewerkte, relatief steile rand die\n                                    als schrabberrand kan zijn gebruikt.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Stekerpunt<\/strong>\n                                <p>\n                                    Een puntvormig kenmerk dat met een\n                                    stekerachtige bewerking kan samenhangen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Kernrest<\/strong>\n                                <p>\n                                    Restant van een kern waarvan afslagen\n                                    zijn verwijderd.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Silexknol<\/strong>\n                                <p>\n                                    Een natuurlijke knol of brok vuursteen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>IJzerinfiltratie<\/strong>\n                                <p>\n                                    Roodbruine, oranje of donkere verkleuring\n                                    die met ijzerhoudende mineralen kan samenhangen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Liesegangen<\/strong>\n                                <p>\n                                    Ring- of bandvormige patronen die door\n                                    mineraalmigratie kunnen ontstaan.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Recente beschadiging<\/strong>\n                                <p>\n                                    Schade die waarschijnlijk na de archeologische\n                                    depositie is ontstaan.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Fossiele rest<\/strong>\n                                <p>\n                                    Een fossiele insluiting of biologische\n                                    rest in het gesteente.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Rolsteen-slijtage<\/strong>\n                                <p>\n                                    Afronding of slijtage die kan passen bij\n                                    transport als rolsteen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Watererosie<\/strong>\n                                <p>\n                                    Oppervlakteverandering door waterwerking\n                                    of sedimenttransport.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Afslag \/ Flake<\/strong>\n                                <p>\n                                    Een afgeslagen stuk steen dat van een\n                                    kern of uitgangsmateriaal is losgekomen.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Blade<\/strong>\n                                <p>\n                                    Een relatief langgerekte afslag waarbij\n                                    de lengte duidelijk groter is dan de breedte.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Microflake<\/strong>\n                                <p>\n                                    Een zeer kleine afslag, vaak afkomstig\n                                    van fijne bewerking of retouche.\n                                <\/p>\n                            <\/div>\n\n                            <div>\n                                <strong>Retouched flake<\/strong>\n                                <p>\n                                    Een afslag waarop na de oorspronkelijke\n                                    productie extra randbewerking is aangebracht.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/section>\n\n\n                    <!-- FOOTER -->\n                    <div class=\"vsl-help-modal-footer\">\n\n                        <p>\n                            <strong>Tip:<\/strong>\n                            gebruik de markeringen als visuele annotaties.\n                            Een markering beschrijft een waargenomen kenmerk\n                            en is op zichzelf geen definitieve typologische\n                            of functionele determinatie.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- INFORMATION -->\n            <section class=\"vsl-information-panel\">\n\n                <div class=\"vsl-information-icon\">\n                    i\n                <\/div>\n\n                <div>\n\n                    <strong>\n                        Werkwijze\n                    <\/strong>\n\n                    <p>\n                        Kies links een kenmerk. Klik daarna op de gewenste\n                        positie op het artefact. Markeringen kunnen achteraf\n                        worden versleept of met de rechtermuisknop verwijderd.\n                        Met <strong>Eigen afbeelding<\/strong> kun je een eigen\n                        JPG, PNG of WebP-afbeelding laden.\n                    <\/p>\n\n                <\/div>\n\n            <\/section>\n\n        <\/div>\n\n\n        <!-- ========================================================= -->\n        <!-- POPUP JAVASCRIPT -->\n        <!-- ========================================================= -->\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function () {\n\n            const containers = document.querySelectorAll(\n                '.vuiststeen-leer-container'\n            );\n\n            containers.forEach(function (container) {\n\n                const helpButton = container.querySelector(\n                    '.vsl-help-button'\n                );\n\n                const helpOverlay = container.querySelector(\n                    '.vsl-help-overlay'\n                );\n\n                const helpClose = container.querySelector(\n                    '.vsl-help-close'\n                );\n\n                if (!helpButton || !helpOverlay || !helpClose) {\n                    return;\n                }\n\n\n                function openHelpPopup() {\n\n                    helpOverlay.classList.add('is-open');\n\n                    helpOverlay.setAttribute(\n                        'aria-hidden',\n                        'false'\n                    );\n\n                    document.body.classList.add(\n                        'vsl-help-open'\n                    );\n\n                    helpClose.focus();\n                }\n\n\n                function closeHelpPopup() {\n\n                    helpOverlay.classList.remove(\n                        'is-open'\n                    );\n\n                    helpOverlay.setAttribute(\n                        'aria-hidden',\n                        'true'\n                    );\n\n                    document.body.classList.remove(\n                        'vsl-help-open'\n                    );\n\n                    helpButton.focus();\n                }\n\n\n                helpButton.addEventListener(\n                    'click',\n                    function (event) {\n\n                        event.preventDefault();\n\n                        openHelpPopup();\n\n                    }\n                );\n\n\n                helpClose.addEventListener(\n                    'click',\n                    function (event) {\n\n                        event.preventDefault();\n\n                        closeHelpPopup();\n\n                    }\n                );\n\n\n                helpOverlay.addEventListener(\n                    'click',\n                    function (event) {\n\n                        if (event.target === helpOverlay) {\n                            closeHelpPopup();\n                        }\n\n                    }\n                );\n\n\n                document.addEventListener(\n                    'keydown',\n                    function (event) {\n\n                        if (\n                            event.key === 'Escape' &&\n                            helpOverlay.classList.contains('is-open')\n                        ) {\n                            closeHelpPopup();\n                        }\n\n                    }\n                );\n\n            });\n\n        });\n        <\/script>\n\n\n        <!-- ========================================================= -->\n        <!-- POPUP CSS -->\n        <!-- ========================================================= -->\n\n        <style>\n\n            \/*\n             * Knop \"Uitleg kenmerken\"\n             * Compact en horizontaal in plaats van een vierkant.\n             *\/\n            .vsl-panel-heading-actions .vsl-help-button {\n                width: auto !important;\n                min-width: 0 !important;\n                height: 30px !important;\n                min-height: 30px !important;\n                padding: 5px 9px !important;\n                margin: 0 !important;\n\n                border: 1px solid rgba(0,0,0,.14) !important;\n                border-radius: 6px !important;\n\n                background: #fff !important;\n                color: #222 !important;\n\n                font-family: inherit !important;\n                font-size: 11px !important;\n                font-weight: 600 !important;\n                line-height: 1 !important;\n\n                white-space: nowrap !important;\n                display: inline-flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n\n                cursor: pointer;\n                box-sizing: border-box;\n\n                transition: all .2s ease;\n            }\n\n\n            .vsl-panel-heading-actions .vsl-help-button:hover {\n                transform: translateY(-1px);\n                box-shadow: 0 3px 8px rgba(0,0,0,.10);\n            }\n\n\n            .vsl-panel-heading-actions {\n                display: flex;\n                align-items: center;\n                gap: 8px;\n            }\n\n\n            \/* POPUP OVERLAY *\/\n            .vsl-help-overlay {\n                position: fixed;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0,0,0,.78);\n                z-index: 999999;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                padding: 20px;\n                box-sizing: border-box;\n\n                opacity: 0;\n                visibility: hidden;\n                pointer-events: none;\n\n                transition:\n                    opacity .2s ease,\n                    visibility .2s ease;\n            }\n\n\n            .vsl-help-overlay.is-open {\n                opacity: 1;\n                visibility: visible;\n                pointer-events: auto;\n            }\n\n\n            \/* POPUP *\/\n            .vsl-help-modal {\n                position: relative;\n\n                width: 100%;\n                max-width: 820px;\n                max-height: 88vh;\n\n                overflow-y: auto;\n\n                box-sizing: border-box;\n\n                background: #fff;\n                color: #222;\n\n                border-radius: 14px;\n\n                padding: 30px;\n\n                box-shadow:\n                    0 30px 80px rgba(0,0,0,.35);\n\n                transform:\n                    translateY(12px)\n                    scale(.98);\n\n                transition:\n                    transform .2s ease;\n            }\n\n\n            .vsl-help-overlay.is-open .vsl-help-modal {\n                transform:\n                    translateY(0)\n                    scale(1);\n            }\n\n\n            \/* SLUITKNOP *\/\n            .vsl-help-close {\n                position: absolute;\n\n                top: 14px;\n                right: 14px;\n\n                width: 38px;\n                height: 38px;\n\n                border: 0;\n                border-radius: 50%;\n\n                background: #f1f1f1;\n                color: #222;\n\n                font-size: 28px;\n                line-height: 1;\n\n                cursor: pointer;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                padding: 0 0 3px 0;\n            }\n\n\n            .vsl-help-close:hover {\n                background: #e5e5e5;\n            }\n\n\n            \/* POPUP HEADER *\/\n            .vsl-help-modal-header {\n                padding-right: 45px;\n                margin-bottom: 28px;\n            }\n\n\n            .vsl-help-modal-header h3 {\n                margin: 6px 0 10px;\n                font-size: 28px;\n                line-height: 1.2;\n            }\n\n\n            .vsl-help-modal-header p {\n                margin: 0;\n                color: #666;\n                line-height: 1.6;\n            }\n\n\n            \/* SECTIES *\/\n            .vsl-help-section {\n                border-top: 1px solid #e5e5e5;\n                padding: 24px 0;\n            }\n\n\n            .vsl-help-section:first-of-type {\n                border-top: 0;\n            }\n\n\n            .vsl-help-section-title {\n                display: flex;\n                align-items: center;\n                gap: 14px;\n                margin-bottom: 18px;\n            }\n\n\n            .vsl-help-section-title > span {\n                width: 38px;\n                height: 38px;\n                min-width: 38px;\n\n                border-radius: 9px;\n\n                background: #f0f0f0;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                font-size: 12px;\n                font-weight: 800;\n            }\n\n\n            .vsl-help-section-title strong {\n                display: block;\n                font-size: 17px;\n                line-height: 1.3;\n            }\n\n\n            .vsl-help-section-title small {\n                display: block;\n                margin-top: 3px;\n                color: #777;\n                font-size: 12px;\n            }\n\n\n            \/* UITLEG ITEMS *\/\n            .vsl-help-items {\n                display: grid;\n                grid-template-columns:\n                    repeat(2, minmax(0, 1fr));\n\n                gap: 12px;\n            }\n\n\n            .vsl-help-items > div {\n                background: #f8f8f8;\n\n                border: 1px solid #ececec;\n\n                border-radius: 10px;\n\n                padding: 14px 15px;\n            }\n\n\n            .vsl-help-items strong {\n                display: block;\n                margin-bottom: 6px;\n                font-size: 14px;\n            }\n\n\n            .vsl-help-items p {\n                margin: 0;\n                color: #666;\n                font-size: 13px;\n                line-height: 1.55;\n            }\n\n\n            \/* POPUP FOOTER *\/\n            .vsl-help-modal-footer {\n                border-top: 1px solid #e5e5e5;\n                padding-top: 20px;\n                margin-top: 8px;\n            }\n\n\n            .vsl-help-modal-footer p {\n                margin: 0;\n\n                padding: 14px 16px;\n\n                background: #f5f5f5;\n\n                border-radius: 10px;\n\n                color: #555;\n\n                font-size: 13px;\n                line-height: 1.55;\n            }\n\n\n            \/* BODY LOCK *\/\n            body.vsl-help-open {\n                overflow: hidden;\n            }\n\n\n            \/* MOBIEL *\/\n            @media (max-width: 700px) {\n\n                .vsl-help-overlay {\n                    padding: 10px;\n                    align-items: center;\n                }\n\n\n                .vsl-help-modal {\n                    max-height: 94vh;\n                    padding: 22px 17px;\n                    border-radius: 12px;\n                }\n\n\n                .vsl-help-modal-header h3 {\n                    font-size: 23px;\n                }\n\n\n                .vsl-help-items {\n                    grid-template-columns: 1fr;\n                }\n\n\n                .vsl-help-section {\n                    padding: 20px 0;\n                }\n\n\n                .vsl-help-close {\n                    top: 10px;\n                    right: 10px;\n                }\n\n\n                .vsl-panel-heading-actions .vsl-help-button {\n                    height: 28px !important;\n                    min-height: 28px !important;\n                    padding: 4px 7px !important;\n                    font-size: 10px !important;\n                }\n\n            }\n\n        <\/style>\n\n        \n","protected":false},"excerpt":{"rendered":"<p>1 2<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width-blank.php","meta":{"footnotes":""},"class_list":["post-14333","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/14333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/comments?post=14333"}],"version-history":[{"count":13,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/14333\/revisions"}],"predecessor-version":[{"id":14512,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/14333\/revisions\/14512"}],"wp:attachment":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/media?parent=14333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}