Generieren-Seite: Objekte-Sidebar, Prompt-Editor mit Layouts, Wörter-Spalte

- Details-Panel unter dem Bild entfernt
- Prompt-Editor unter dem Bild mit Layout-Speicherung (localStorage)
- Standard-Layout mit verbessertem Sprachlern-Prompt (10 Niveaus + Wortliste)
- Neue Wörter-Spalte (links neben Sätze) extrahiert Tokens aus Sätzen
- Sidebar --words CSS-Klasse ergänzt

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

frontend/src/index.css

@@ -283,6 +283,12 @@ body {
   border-left: 1px solid var(--border);
 }
 
+.sidebar--words {
+  width: 180px;
+  border-left: 1px solid var(--border);
+  border-right: none;
+}
+
 .sidebar::-webkit-scrollbar { width: 4px; }
 .sidebar::-webkit-scrollbar-track { background: transparent; }
 .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
@@ -915,6 +921,104 @@ select:focus {
   font-style: italic;
 }
 
+/* =====================================================
+   WORDS CLOUD
+   ===================================================== */
+.words-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.word-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: var(--r-full);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-1);
+  cursor: default;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.word-chip:hover {
+  background: var(--primary-muted);
+  border-color: var(--primary);
+  color: var(--primary-muted-fg);
+}
+
+/* =====================================================
+   PROMPT EDITOR
+   ===================================================== */
+.prompt-editor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  padding: 10px;
+  flex: 1;
+  min-height: 0;
+}
+
+.prompt-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.prompt-layout-select {
+  width: auto !important;
+  min-width: 120px;
+  max-width: 200px;
+  font-size: 12.5px !important;
+  padding: 4px 8px !important;
+}
+
+.prompt-save-dialog {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+}
+
+.prompt-save-dialog input[type="text"] {
+  flex: 1;
+  padding: 5px 8px;
+  font-size: 12.5px;
+}
+
+.prompt-textarea {
+  width: 100%;
+  flex: 1;
+  min-height: 180px;
+  resize: vertical;
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--text-1);
+  font-family: var(--font);
+  font-size: 12.5px;
+  line-height: 1.6;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.prompt-textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(92,108,246,.12);
+  background: var(--surface);
+}
+
 /* =====================================================
    STATUS MESSAGE
    ===================================================== */