Planner: Äquivalenz-Hinweise verfeinert

- Grüner Hinweis wenn Äquivalent verfügbar (z.B. → Kerachole (SGE)?)
- Roter Hinweis "→ Kein Äquivalent!" wenn kein Ersatz vorhanden
- Grau-kursiv "→ Job zuordnen" bei Abilities ohne Job-Zuordnung

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

css/planner.css

@@ -426,11 +426,28 @@
 }
 
 .badge-equiv-hint {
-  font-size:  11px;
+  font-size:   11px;
-  color:      var(--red);
+  color:       var(--green);
   white-space: nowrap;
-  padding:    0 2px;
+  padding:     0 2px;
-  cursor:     default;
+  cursor:      default;
+}
+
+.badge-no-equiv-hint {
+  font-size:   11px;
+  color:       var(--red);
+  white-space: nowrap;
+  padding:     0 2px;
+  cursor:      default;
+}
+
+.badge-job-hint {
+  font-size:   11px;
+  color:       var(--t3);
+  white-space: nowrap;
+  padding:     0 2px;
+  cursor:      default;
+  font-style:  italic;
 }
 
 /* ── Folder Sidebar ──────────────────────────────────────────────────────────── */

js/planner.js

@@ -363,8 +363,12 @@ function renderMechanicListHtml(plan) {
                 const hintHtml    = suggestions.map(s =>
                     `<span class="badge-equiv-hint">→ ${escHtml(s.ability)} (${escHtml(s.job)})?</span>`
                 ).join('');
-                return suggestions.length > 0
+                const noEquivHint = isMissing && suggestions.length === 0
-                    ? `<span class="badge-with-hint">${badgeHtml}${hintHtml}</span>`
+                    ? `<span class="badge-no-equiv-hint">→ Kein Äquivalent!</span>` : '';
+                const jobHint     = !a.job ? `<span class="badge-job-hint">→ Job zuordnen</span>` : '';
+                const needsWrap   = suggestions.length > 0 || !!noEquivHint || !!jobHint;
+                return needsWrap
+                    ? `<span class="badge-with-hint">${badgeHtml}${hintHtml}${noEquivHint}${jobHint}</span>`
                     : badgeHtml;
             }).join('');