$js = "
            document.addEventListener('DOMContentLoaded', function() {
                const canvas = document.getElementById('anc-drawing-canvas');
                const container = document.getElementById('anc-canvas-container');
                const viewport = document.getElementById('anc-viewport');
                if (!canvas || !container) return;
                const ctx = canvas.getContext('2d');

                let baseWidth = 0;
                let baseHeight = 0;
                const a4Ratio = 1.4141;

                function updateLayoutDimensions() {
                    const vWidth = viewport.clientWidth;
                    const vHeight = viewport.clientHeight;

                    baseWidth = vWidth - 40; 
                    baseHeight = baseWidth * a4Ratio;

                    if (baseHeight > vHeight - 40) {
                        baseHeight = vHeight - 40;
                        baseWidth = baseHeight / a4Ratio;
                    }

                    const dpr = window.devicePixelRatio || 1;
                    
                    const tempCanvas = document.createElement('canvas');
                    const tempCtx = tempCanvas.getContext('2d');
                    tempCanvas.width = canvas.width;
                    tempCanvas.height = canvas.height;
                    if (canvas.width > 0 && canvas.height > 0) {
                        tempCtx.drawImage(canvas, 0, 0);
                    }

                    canvas.width = baseWidth * dpr;
                    canvas.height = baseHeight * dpr;
                    container.style.width = baseWidth + 'px';
                    container.style.height = baseHeight + 'px';

                    ctx.scale(dpr, dpr);
                    if (tempCanvas.width > 0) {
                        ctx.drawImage(tempCanvas, 0, 0, baseWidth, baseHeight);
                    }

                    panX = (vWidth - baseWidth) / 2;
                    panY = (vHeight - baseHeight) / 2;
                    scale = 1;
                    updateTransform();
                }

                let scale = 1;
                let panX = 0;
                let panY = 0;
                let isDrawing = false;
                let currentTool = 'pen';
                let currentColor = '#000000';
                let currentSize = 3;
                let currentMode = 'draw';
                let lastX = 0;
                let lastY = 0;

                updateLayoutDimensions();
                window.addEventListener('resize', updateLayoutDimensions);

                const btnDraw = document.getElementById('anc-mode-draw');
                const btnNav = document.getElementById('anc-mode-nav');

                btnDraw.addEventListener('click', function() {
                    currentMode = 'draw';
                    btnDraw.classList.add('active');
                    btnNav.classList.remove('active');
                });

                btnNav.addEventListener('click', function() {
                    currentMode = 'nav';
                    btnNav.classList.add('active');
                    btnDraw.classList.remove('active');
                });

                document.getElementById('anc-pen').addEventListener('click', function() {
                    currentTool = 'pen';
                    this.classList.add('active');
                    document.getElementById('anc-eraser').classList.remove('active');
                });

                document.getElementById('anc-eraser').addEventListener('click', function() {
                    currentTool = 'eraser';
                    this.classList.add('active');
                    document.getElementById('anc-pen').classList.remove('active');
                });

                document.getElementById('anc-color').addEventListener('input', function(e) {
                    currentColor = e.target.value;
                });

                document.getElementById('anc-size').addEventListener('input', function(e) {
                    currentSize = e.target.value;
                });

                document.getElementById('anc-clear').addEventListener('click', function() {
                    ctx.clearRect(0, 0, baseWidth, baseHeight);
                });

                function updateTransform() {
                    container.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')';
                }

                function getCanvasPoint(clientX, clientY) {
                    const rect = container.getBoundingClientRect();
                    return {
                        x: (clientX - rect.left) / scale,
                        y: (clientY - rect.top) / scale
                    };
                }

                let activeTouchPoints = new Map();
                let lastPanCenter = null;
                let lastPinchDist = null;

                canvas.addEventListener('pointerdown', function(e) {
                    if (e.pointerType !== 'touch') {
                        e.preventDefault();
                    }

                    activeTouchPoints.set(e.pointerId, { x: e.clientX, y: e.clientY });

                    if (currentMode === 'nav' || (e.pointerType === 'touch' && activeTouchPoints.size > 1)) {
                        if (activeTouchPoints.size === 1) {
                            lastPanCenter = { x: e.clientX, y: e.clientY };
                        } else if (activeTouchPoints.size === 2) {
                            const points = Array.from(activeTouchPoints.values());
                            lastPinchDist = Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
                        }
                        return;
                    }

                    if (currentMode === 'nav') return;

                    isDrawing = true;
                    const pt = getCanvasPoint(e.clientX, e.clientY);
                    lastX = pt.x;
                    lastY = pt.y;
                }, { passive: false });

                canvas.addEventListener('pointermove', function(e) {
                    if (!activeTouchPoints.has(e.pointerId)) return;
                    activeTouchPoints.set(e.pointerId, { x: e.clientX, y: e.clientY });

                    if (currentMode === 'nav' || (e.pointerType === 'touch' && activeTouchPoints.size > 1)) {
                        if (activeTouchPoints.size === 1 && lastPanCenter) {
                            const dx = e.clientX - lastPanCenter.x;
                            const dy = e.clientY - lastPanCenter.y;
                            panX += dx;
                            panY += dy;
                            lastPanCenter = { x: e.clientX, y: e.clientY };
                            updateTransform();
                        } else if (activeTouchPoints.size === 2 && lastPinchDist) {
                            const points = Array.from(activeTouchPoints.values());
                            const dist = Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
                            const factor = dist / lastPinchDist;
                            
                            scale = Math.max(1, Math.min(5, scale * factor));
                            lastPinchDist = dist;
                            updateTransform();
                        }
                        return;
                    }

                    if (!isDrawing) return;
                    if (currentMode === 'nav') return;

                    const events = (typeof e.getCoalescedEvents === 'function') ? e.getCoalescedEvents() : [e];
                    
                    ctx.beginPath();
                    ctx.moveTo(lastX, lastY);

                    for (let i = 0; i < events.length; i++) {
                        const subPt = getCanvasPoint(events[i].clientX, events[i].clientY);
                        ctx.lineTo(subPt.x, subPt.y);
                        lastX = subPt.x;
                        lastY = subPt.y;
                    }

                    if (currentTool === 'eraser') {
                        ctx.strokeStyle = '#ffffff';
                        ctx.lineWidth = currentSize * 4;
                    } else {
                        ctx.strokeStyle = currentColor;
                        ctx.lineWidth = currentSize;
                    }

                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    ctx.stroke();
                }, { passive: false });

                function endTouch(e) {
                    activeTouchPoints.delete(e.pointerId);
                    if (activeTouchPoints.size < 2) lastPinchDist = null;
                    if (activeTouchPoints.size < 1) lastPanCenter = null;
                    isDrawing = false;
                }

                canvas.addEventListener('pointerup', endTouch);
                canvas.addEventListener('pointerout', endTouch);
                canvas.addEventListener('pointercancel', endTouch);
            });
        ";<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://server.fm63.de/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://server.fm63.de/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://server.fm63.de/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://server.fm63.de/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://server.fm63.de/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>