feat: favorites preview in result view before export

Shows amber banner with up to 4 thumbnails, overflow count,
and favorite total — only visible when favorites exist.
Built with DOM methods (no innerHTML) to avoid XSS risk.

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

index.html

@@ -227,6 +227,13 @@
     .feat-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.35rem; }
     .feat-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text); cursor: pointer; }
     .feat-check input[type=checkbox] { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; }
+    /* Favorites preview */
+    .fav-preview { display: flex; align-items: center; gap: 0.75rem; background: rgba(245,158,11,0.08); border: 1.5px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 0.65rem 0.9rem; margin-bottom: 1rem; }
+    .fav-preview-thumbs { display: flex; gap: 0.3rem; flex-shrink: 0; }
+    .fav-preview-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; border: 1.5px solid rgba(245,158,11,0.4); }
+    .fav-preview-more { width: 36px; height: 36px; border-radius: 5px; background: rgba(245,158,11,0.15); color: #B45309; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .fav-preview-text { font-size: 0.83rem; color: #92400E; line-height: 1.4; }
+    .fav-preview-text strong { color: #B45309; }
 
     /* ── Ordner-Auswahl-Button in Drop-Zone ── */
     #folder-picker-btn:hover { border-color: var(--blue); color: var(--blue); }
@@ -418,6 +425,9 @@
     <!-- Schnell-Download (ohne Verarbeitung) -->
     <a class="primary" id="download-btn" style="display:none; text-decoration:none; text-align:center;">⬇ Schnell-Download (Original)</a>
 
+    <!-- Favoriten-Vorschau -->
+    <div id="fav-preview" class="fav-preview" style="display:none"></div>
+
     <!-- Exportoptionen -->
     <details class="export-opts" id="export-opts">
       <summary>⚙ Exportoptionen — Umbenennen · Bildeditor · Wasserzeichen</summary>
@@ -1505,6 +1515,39 @@
         dlBtn.style.display = "";
       }
 
+      // Favorites preview
+      const favArr = [...favoritePaths];
+      const favBox = el("fav-preview");
+      favBox.textContent = "";
+      if (favArr.length > 0) {
+        const MAX_THUMBS = 4;
+        const thumbWrap = document.createElement("div");
+        thumbWrap.className = "fav-preview-thumbs";
+        favArr.slice(0, MAX_THUMBS).forEach(p => {
+          const img = document.createElement("img");
+          img.src = "preview?path=" + encodeURIComponent(p);
+          img.alt = "";
+          thumbWrap.appendChild(img);
+        });
+        if (favArr.length > MAX_THUMBS) {
+          const more = document.createElement("div");
+          more.className = "fav-preview-more";
+          more.textContent = "+" + (favArr.length - MAX_THUMBS);
+          thumbWrap.appendChild(more);
+        }
+        const textWrap = document.createElement("div");
+        textWrap.className = "fav-preview-text";
+        const strong = document.createElement("strong");
+        strong.textContent = "★ " + favArr.length + (favArr.length === 1 ? " Favorit" : " Favoriten");
+        textWrap.appendChild(strong);
+        textWrap.appendChild(document.createTextNode(" — erhalten beim Export das FAV_-Präfix"));
+        favBox.appendChild(thumbWrap);
+        favBox.appendChild(textWrap);
+        favBox.style.display = "flex";
+      } else {
+        favBox.style.display = "none";
+      }
+
       showView("view-result");
     }