Tutorial: bubbleTarget - Pfeil zeigt auf spezifische Formularfelder statt aufs gesamte Modal

Jeder Modal-Schritt hat jetzt ein bubbleTarget:
- Schritt 4: Titel-Feld
- Schritt 5: Typ-Dropdown
- Schritt 6: International-Toggle
- Schritt 7: Sichtbarkeit
- Schritt 8: Aktualisierungsmodus
- Schritt 9: Aufbewahrung
- Schritt 10: Benachrichtigungen

src/static/js/tutorial.js

@@ -592,6 +592,7 @@ const Tutorial = {
             {
                 id: 'form-title-desc',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-title',
                 title: 'Titel und Beschreibung',
                 text: 'Geben Sie einen aussagekräftigen <strong>Titel</strong> ein, der das Ereignis klar beschreibt. '
                     + 'Die <strong>Beschreibung</strong> liefert zusätzlichen Kontext für die Recherche.<br><br>'
@@ -616,6 +617,7 @@ const Tutorial = {
             {
                 id: 'form-type',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-type',
                 title: 'Art der Lage',
                 text: '<strong>Live-Monitoring</strong> beobachtet ein Ereignis in Echtzeit. Hunderte Quellen werden '
                     + 'laufend durchsucht. Ideal für aktuelle Krisen und sich entwickelnde Lagen.<br><br>'
@@ -644,6 +646,7 @@ const Tutorial = {
             {
                 id: 'form-sources',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-international',
                 title: 'Quellen konfigurieren',
                 text: '<strong>Internationale Quellen</strong> bezieht englischsprachige und internationale Medien '
                     + 'ein (Reuters, BBC, Al Jazeera etc.). Erhöht die Abdeckung, aber auch den Analyseumfang.<br><br>'
@@ -665,6 +668,7 @@ const Tutorial = {
             {
                 id: 'form-visibility',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-visibility',
                 title: 'Sichtbarkeit',
                 text: '<strong>Öffentlich</strong> bedeutet, dass alle Nutzer Ihrer Organisation diese Lage sehen '
                     + 'und darauf zugreifen können.<br><br>'
@@ -686,6 +690,7 @@ const Tutorial = {
             {
                 id: 'form-refresh',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-refresh-mode',
                 title: 'Aktualisierung',
                 text: '<strong>Manuell</strong>: Sie starten Aktualisierungen selbst per Button.<br>'
                     + '<strong>Automatisch</strong>: Der Monitor aktualisiert im eingestellten Intervall.<br><br>'
@@ -707,6 +712,7 @@ const Tutorial = {
             {
                 id: 'form-retention',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-retention',
                 title: 'Aufbewahrung',
                 text: 'Legen Sie fest, wie lange die Lage aktiv bleibt. Nach Ablauf der Frist '
                     + 'wird sie automatisch ins <strong>Archiv</strong> verschoben.<br><br>'
@@ -728,6 +734,7 @@ const Tutorial = {
             {
                 id: 'form-notifications',
                 target: '#modal-new .modal',
+                bubbleTarget: '#inc-notify-summary',
                 title: 'E-Mail-Benachrichtigungen',
                 text: 'Lassen Sie sich per E-Mail informieren bei:<br><br>'
                     + '<strong>Neues Lagebild</strong> - Wenn eine aktualisierte Zusammenfassung vorliegt<br>'
@@ -1517,7 +1524,8 @@ const Tutorial = {
             return;
         }
 
-        var el = document.querySelector(step.target);
+        var bubbleSelector = step.bubbleTarget || step.target;
+        var el = document.querySelector(bubbleSelector);
         if (!el) {
             bubble.className = 'tutorial-bubble visible tutorial-pos-center';
             bubble.style.top = '50%';