fix(tutorial): Maussimulation fuer Toggle-Schieberegler in Schritt 6+7

Cursor bewegt sich jetzt zum sichtbaren Toggle-Switch statt zum
versteckten Checkbox-Input. Klick-Animation (Scale-Pulse) zeigt
die Betaetigung visuell an.

Neue Hilfsmethoden: _clickAtCursor() und _cursorToToggle()

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/static/css/style.css

@@ -5194,6 +5194,15 @@ a.map-popup-article:hover {
 .tutorial-cursor-resize {
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 22H20V20H22V22ZM22 18H18V22H16V16H22V18ZM18 18V14H22V12H16V18H18ZM14 22H12V16H18V14H10V22H14Z' fill='%23fff' stroke='%23000' stroke-width='0.3'/%3E%3C/svg%3E") no-repeat center/contain;
 }
+.tutorial-cursor.clicking {
+    animation: tutorial-cursor-click 0.3s ease;
+}
+
+@keyframes tutorial-cursor-click {
+    0%   { transform: scale(1); }
+    40%  { transform: scale(0.75); }
+    100% { transform: scale(1); }
+}
 
 /* Chat Tutorial-Hinweis */
 .chat-tutorial-hint {

src/static/js/tutorial.js

@@ -1720,6 +1720,40 @@ const Tutorial = {
         this._els.cursor.classList.remove('visible');
     },
 
+    _clickAtCursor() {
+        var c = this._els.cursor;
+        c.classList.remove('clicking');
+        void c.offsetWidth;
+        c.classList.add('clicking');
+        var self = this;
+        return new Promise(function(resolve) {
+            setTimeout(function() {
+                c.classList.remove('clicking');
+                resolve();
+            }, 300);
+        });
+    },
+
+    _cursorToToggle(checkboxSelector, fromX, fromY) {
+        var cb = document.querySelector(checkboxSelector);
+        if (!cb) return this._cursorToElement(checkboxSelector, fromX, fromY);
+        var toggle = cb.parentElement ? cb.parentElement.querySelector('.toggle-switch') : null;
+        if (!toggle) return this._cursorToElement(checkboxSelector, fromX, fromY);
+        var rect = toggle.getBoundingClientRect();
+        if (!rect.width && !rect.height) return this._cursorToElement(checkboxSelector, fromX, fromY);
+        var tx = rect.left + rect.width / 2;
+        var ty = rect.top + rect.height / 2;
+        var self = this;
+        if (fromX !== undefined && fromY !== undefined) {
+            return this._animateCursor(fromX, fromY, tx, ty, 500).then(function() {
+                return self._wait(200).then(function() { return { x: tx, y: ty }; });
+            });
+        } else {
+            this._showCursor(tx, ty, 'default');
+            return this._wait(200).then(function() { return { x: tx, y: ty }; });
+        }
+    },
+
     _animateCursor(fromX, fromY, toX, toY, ms) {
         var self = this;
         return new Promise(function(resolve) {
@@ -2094,18 +2128,31 @@ const Tutorial = {
         var intlLabel = intlCheckbox ? intlCheckbox.closest('.toggle-label') : null;
         if (intlLabel) {
             this._highlightSub('#inc-international');
-            var pos = await this._cursorToElement('#inc-international');
-            await this._wait(1500);
+            var pos = await this._cursorToToggle('#inc-international');
+            await this._wait(600);
+
+            // Klick simulieren: International deaktivieren
+            await this._clickAtCursor();
+            intlCheckbox.checked = false;
+            await this._wait(1200);
+
+            // Wieder aktivieren
+            await this._clickAtCursor();
+            intlCheckbox.checked = true;
+            await this._wait(800);
             this._clearSubHighlights();
 
             // Telegram-Toggle
             var telegramCheckbox = document.getElementById('inc-telegram');
             if (telegramCheckbox) {
                 this._highlightSub('#inc-telegram');
-                pos = await this._cursorToElement('#inc-telegram', pos.x, pos.y);
-                // Aktivieren
+                pos = await this._cursorToToggle('#inc-telegram', pos.x, pos.y);
+                await this._wait(600);
+
+                // Klick simulieren: Telegram aktivieren
+                await this._clickAtCursor();
                 telegramCheckbox.checked = true;
-                await this._wait(1500);
+                await this._wait(1200);
                 this._clearSubHighlights();
             }
         }
@@ -2126,18 +2173,20 @@ const Tutorial = {
         var checkbox = document.getElementById('inc-visibility');
         if (checkbox) {
             this._highlightSub('#inc-visibility');
-            var pos = await this._cursorToElement('#inc-visibility');
-            await this._wait(1000);
+            var pos = await this._cursorToToggle('#inc-visibility');
+            await this._wait(600);
 
-            // Umschalten auf Privat
+            // Klick simulieren: Umschalten auf Privat
+            await this._clickAtCursor();
             checkbox.checked = false;
             var textEl = document.getElementById('visibility-text');
-            if (textEl) textEl.textContent = 'Privat \u2014 nur f\u00fcr dich sichtbar';
+            if (textEl) textEl.textContent = 'Privat — nur für dich sichtbar';
             await this._wait(1500);
 
-            // Zur\u00fcck auf \u00d6ffentlich
+            // Klick simulieren: Zurueck auf Oeffentlich
+            await this._clickAtCursor();
             checkbox.checked = true;
-            if (textEl) textEl.textContent = '\u00d6ffentlich \u2014 f\u00fcr alle Nutzer sichtbar';
+            if (textEl) textEl.textContent = 'Öffentlich — für alle Nutzer sichtbar';
             await this._wait(800);
             this._clearSubHighlights();
         }