Mehrwörtige Wort-Einträge verhindern + orange highlighten

- Backend: _sanitize_word() splittet Komma-Listen und filtert Mehrwörter raus
- Frontend: Chips mit Leerzeichen/Komma werden orange markiert (Tooltip)

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

frontend/src/pages/GenerateIt.tsx

@@ -443,8 +443,10 @@ export default function GenerateIt() {
               <div className="empty-state">–</div>
             ) : (
               <div style={{ overflowY: 'auto', flex: 1, padding: '4px 8px', display: 'flex', flexWrap: 'wrap', gap: 4, alignContent: 'flex-start' }}>
-                {objWords.map(w => (
-                  <span key={w.id} className="word-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
+                {objWords.map(w => {
+                  const isInvalid = /[\s,;]/.test(w.title_de)
+                  return (
+                  <span key={w.id} className="word-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 3, ...(isInvalid ? { background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning, #f0a500)', color: 'var(--warning-fg, #7a4f00)' } : {}) }} title={isInvalid ? 'Mehrwortiger Eintrag – bitte löschen' : undefined}>
                     {w.title_de}
                     <button
                       onClick={() => handleDeleteWord(w.id)}
@@ -452,7 +454,8 @@ export default function GenerateIt() {
                       title="Löschen"
                     >✕</button>
                   </span>
-                ))}
+                  )
+                })}
               </div>
             )}
           </div>