feat(app): 3 neue Themes, WebP-Konvertierung und Browser-Bookmark-Import

- Satisfactory, Avorion und Hellion Stealth als neue Themes
- Alle 11 Theme-Bilder von JPG/PNG nach WebP konvertieren (~12 MB → 1.1 MB)
- Browser-Lesezeichen direkt importieren mit Ordner-Auswahl Modal
- Duplikat-Erkennung, URL-Validierung, Chrome/Firefox-Kompatibilität
- Version auf 1.11.1 aktualisieren (Manifeste, data.js, newtab.html, app.js)

.github/CODEOWNERS

@@ -0,0 +1,4 @@
+# Hellion NewTab — Code Owners
+# Alle Änderungen müssen von @JonKazama-Hellion approved werden
+
+* @JonKazama-Hellion

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hellion NewTab",
-  "version": "1.9.0",
+  "version": "1.11.1",
   "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
   "author": "Hellion Online Media - Florian Wathling",
   "homepage_url": "https://hellion-media.de",

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hellion NewTab",
-  "version": "1.9.0",
+  "version": "1.11.1",
   "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
   "author": "Hellion Online Media - Florian Wathling",
   "homepage_url": "https://hellion-media.de",

manifest.opera.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hellion Dashboard (GX Native)",
-  "version": "1.9.0",
+  "version": "1.11.1",
   "description": "Ersetzt die Opera GX Startseite durch dein persönliches, leistungsoptimiertes Hellion Dashboard. Schnell, sauber und werbefrei.",
   "author": "Hellion Online Media - Florian Wathling",
   "homepage_url": "https://hellion-media.de",

newtab.html

@@ -162,6 +162,13 @@
             <button class="btn-small" id="btnImportJSON">Import</button>
             <input type="file" id="jsonImportInput" accept=".json" class="hidden" />
           </div>
+          <div class="setting-row" id="browserImportRow">
+            <div class="setting-info">
+              <span class="setting-label">Browser-Lesezeichen</span>
+              <span class="setting-desc">Lesezeichen direkt aus dem Browser importieren</span>
+            </div>
+            <button class="btn-small" id="btnBrowserImport">Import</button>
+          </div>
           <div class="setting-row">
             <div class="setting-info">
               <span class="setting-label">Onboarding wiederholen</span>
@@ -195,7 +202,7 @@
     <div class="panel-footer">
       <div class="about-block">
         <div class="about-logo">⬡ HELLION NEWTAB</div>
-        <div class="about-version">Version 1.9.0 · by Hellion Online Media</div>
+        <div class="about-version">Version 1.11.1 · by Hellion Online Media</div>
 
         <div class="about-links">
           <a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
@@ -270,17 +277,17 @@
       </div>
       <div class="theme-grid">
         <div class="theme-card active" data-value="nebula">
-          <img class="theme-card-img" src="assets/themes/bg-nebula.jpg" alt="Nebula" />
+          <img class="theme-card-img" src="assets/themes/bg-nebula.webp" alt="Nebula" />
           <span class="theme-card-label">Nebula</span>
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="crescent">
-          <img class="theme-card-img" src="assets/themes/bg-crescent.jpg" alt="Crescent" />
+          <img class="theme-card-img" src="assets/themes/bg-crescent.webp" alt="Crescent" />
           <span class="theme-card-label">Crescent</span>
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="event-horizon">
-          <img class="theme-card-img" src="assets/themes/bg-event-horizon.jpg" alt="Event Horizon" />
+          <img class="theme-card-img" src="assets/themes/bg-event-horizon.webp" alt="Event Horizon" />
           <span class="theme-card-label">Event Horizon</span>
           <span class="theme-card-check">✓</span>
         </div>
@@ -290,25 +297,40 @@
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="julia-jin">
-          <img class="theme-card-img" src="assets/themes/bg-julia-jin.png" alt="Julia &amp; Jin" />
+          <img class="theme-card-img" src="assets/themes/bg-julia-jin.webp" alt="Julia &amp; Jin" />
           <span class="theme-card-label">Julia &amp; Jin</span>
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="sc-sunset">
-          <img class="theme-card-img" src="assets/themes/bg-sc-sunset.jpg" alt="SC Sunset" />
+          <img class="theme-card-img" src="assets/themes/bg-sc-sunset.webp" alt="SC Sunset" />
           <span class="theme-card-label">SC Sunset</span>
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="hellion-hud">
-          <img class="theme-card-img" src="assets/themes/bg-hellion-hud.png" alt="Hellion HUD" />
+          <img class="theme-card-img" src="assets/themes/bg-hellion-hud.webp" alt="Hellion HUD" />
           <span class="theme-card-label">HUD</span>
           <span class="theme-card-check">✓</span>
         </div>
         <div class="theme-card" data-value="hellion-energy">
-          <img class="theme-card-img" src="assets/themes/bg-hellion-energy.jpg" alt="Hellion Energy" />
+          <img class="theme-card-img" src="assets/themes/bg-hellion-energy.webp" alt="Hellion Energy" />
           <span class="theme-card-label">Energy</span>
           <span class="theme-card-check">✓</span>
         </div>
+        <div class="theme-card" data-value="satisfactory">
+          <img class="theme-card-img" src="assets/themes/bg-satisfactory.webp" alt="Satisfactory" />
+          <span class="theme-card-label">Satisfactory</span>
+          <span class="theme-card-check">✓</span>
+        </div>
+        <div class="theme-card" data-value="avorion">
+          <img class="theme-card-img" src="assets/themes/bg-avorion.webp" alt="Avorion" />
+          <span class="theme-card-label">Avorion</span>
+          <span class="theme-card-check">✓</span>
+        </div>
+        <div class="theme-card" data-value="hellion-stealth">
+          <img class="theme-card-img" src="assets/themes/bg-scPolaris.webp" alt="Hellion Stealth" />
+          <span class="theme-card-label">Stealth</span>
+          <span class="theme-card-check">✓</span>
+        </div>
       </div>
       <div class="theme-modal-section">
         <h3 class="settings-section-title">HINTERGRUND</h3>
@@ -464,6 +486,7 @@
   <script src="src/js/calculator.js"></script>
   <script src="src/js/timer.js"></script>
   <script src="src/js/image-ref.js"></script>
+  <script src="src/js/bookmark-import.js"></script>
   <script src="src/js/data.js"></script>
   <!-- Onboarding -->
   <script src="src/js/onboarding.js"></script>

src/css/main.css

@@ -298,6 +298,97 @@
   box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05);
 }
 
+/* ============================================
+   THEME: SATISFACTORY (Industrial Desert)
+   ============================================ */
+[data-theme="satisfactory"] {
+  --accent:              #00b4d8;
+  --accent-dim:          rgba(0, 180, 216, 0.12);
+  --accent-glow:         rgba(0, 180, 216, 0.08);
+  --border-accent:       rgba(0, 180, 216, 0.35);
+  --bg-primary:          #1a0f08;
+  --bg-board:            rgba(26, 15, 8, 0.65);
+  --border:              rgba(0, 180, 216, 0.15);
+  --text-primary:        #f0faff;
+  --text-secondary:      #a89f98;
+  --text-muted:          #635a54;
+  --font-display:        'Rajdhani', sans-serif;
+  --font-body:           'Inter', sans-serif;
+  --overlay-bg:          linear-gradient(180deg,
+                           rgba(26,15,8,0.85) 0%,
+                           rgba(26,15,8,0.15) 50%,
+                           rgba(26,15,8,0.90) 100%);
+  --header-bg:           rgba(26,15,8,0.95);
+  --board-hover-border:  rgba(0, 180, 216, 0.25);
+  --toggle-on-bg:        rgba(0, 180, 216, 0.20);
+  --logo-shadow:         rgba(0, 180, 216, 0.40);
+}
+[data-theme="satisfactory"] .logo        { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
+[data-theme="satisfactory"] .clock       { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
+[data-theme="satisfactory"] .board-title { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
+[data-theme="satisfactory"] .board       { border-color: rgba(0, 180, 216, 0.20); backdrop-filter: blur(12px); }
+[data-theme="satisfactory"] .bm-item:hover { background: rgba(0, 180, 216, 0.10); }
+
+/* ============================================
+   THEME: AVORION (Deep Void)
+   ============================================ */
+[data-theme="avorion"] {
+  --accent:              #2ec4a0;
+  --accent-dim:          rgba(46, 196, 160, 0.12);
+  --accent-glow:         rgba(46, 196, 160, 0.08);
+  --border-accent:       rgba(46, 196, 160, 0.30);
+  --bg-primary:          #020d0c;
+  --bg-board:            rgba(2, 13, 12, 0.60);
+  --border:              rgba(46, 196, 160, 0.12);
+  --text-primary:        #e6fffa;
+  --text-secondary:      #8abdb3;
+  --text-muted:          #40615a;
+  --font-display:        'Rajdhani', sans-serif;
+  --font-body:           'Inter', sans-serif;
+  --overlay-bg:          radial-gradient(circle at center,
+                           transparent 0%,
+                           rgba(2, 13, 12, 0.95) 100%);
+  --header-bg:           rgba(2, 13, 12, 0.94);
+  --board-hover-border:  rgba(46, 196, 160, 0.22);
+  --toggle-on-bg:        rgba(46, 196, 160, 0.18);
+  --logo-shadow:         rgba(46, 196, 160, 0.50);
+}
+[data-theme="avorion"] .logo        { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; }
+[data-theme="avorion"] .clock       { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); }
+[data-theme="avorion"] .board-title { font-family: 'Rajdhani', sans-serif; font-weight: 500; text-transform: uppercase; }
+[data-theme="avorion"] .board       { border-color: rgba(46, 196, 160, 0.15); backdrop-filter: blur(8px); }
+[data-theme="avorion"] .bm-item:hover { background: rgba(46, 196, 160, 0.08); }
+
+/* ============================================
+   THEME: HELLION STEALTH (Tactical Recon)
+   ============================================ */
+[data-theme="hellion-stealth"] {
+  --accent:              #5ec2ff;
+  --accent-dim:          rgba(94, 194, 255, 0.12);
+  --accent-glow:         rgba(94, 194, 255, 0.08);
+  --border-accent:       rgba(94, 194, 255, 0.35);
+  --bg-primary:          #0d0f12;
+  --bg-board:            rgba(13, 15, 18, 0.70);
+  --border:              rgba(94, 194, 255, 0.15);
+  --text-primary:        #e0f4ff;
+  --text-secondary:      #8a9499;
+  --text-muted:          #4a5257;
+  --font-display:        'Rajdhani', sans-serif;
+  --font-body:           'Inter', sans-serif;
+  --overlay-bg:          radial-gradient(circle at center,
+                           transparent 0%,
+                           rgba(13, 15, 18, 0.90) 100%);
+  --header-bg:           rgba(13, 15, 18, 0.96);
+  --board-hover-border:  rgba(94, 194, 255, 0.25);
+  --toggle-on-bg:        rgba(94, 194, 255, 0.20);
+  --logo-shadow:         rgba(94, 194, 255, 0.45);
+}
+[data-theme="hellion-stealth"] .logo        { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 4px; }
+[data-theme="hellion-stealth"] .clock       { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
+[data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; }
+[data-theme="hellion-stealth"] .board       { border-color: rgba(94, 194, 255, 0.15); backdrop-filter: blur(10px); }
+[data-theme="hellion-stealth"] .bm-item:hover { background: rgba(94, 194, 255, 0.10); border-left: 2px solid var(--accent); }
+
 /* ============================================
    BASE STYLES
    ============================================ */
@@ -612,6 +703,9 @@ body.show-desc .bm-desc { display: block; }
 .theme-card[data-value="sc-sunset"]       .theme-card-label { color: #ff8c3d; } /* Amber Sunset */
 .theme-card[data-value="hellion-hud"]     .theme-card-label { color: #32ff6a; } /* Neon Green */
 .theme-card[data-value="hellion-energy"]  .theme-card-label { color: #1eff8e; } /* Acid Green */
+.theme-card[data-value="satisfactory"]   .theme-card-label { color: #00b4d8; } /* Cyan LED */
+.theme-card[data-value="avorion"]        .theme-card-label { color: #2ec4a0; } /* Turquoise */
+.theme-card[data-value="hellion-stealth"] .theme-card-label { color: #5ec2ff; } /* Tech Blue */
 .theme-card:hover .theme-card-label {
     text-shadow: 0 0 8px currentColor;
     transition: text-shadow 0.2s ease;
@@ -1801,6 +1895,90 @@ body.show-desc .bm-desc { display: block; }
   display: flex; gap: 8px;
 }
 
+/* ============================================
+   BROWSER BOOKMARK IMPORT MODAL
+   ============================================ */
+.bm-import-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+.bm-import-overlay.active { opacity: 1; pointer-events: all; }
+
+.bm-import-modal {
+  background: rgba(8,8,16,0.96);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  backdrop-filter: blur(28px);
+  max-width: 480px; width: 90%;
+  max-height: 75vh;
+  display: flex; flex-direction: column;
+  transform: translateY(12px) scale(0.97);
+  transition: transform 0.25s ease;
+}
+.bm-import-overlay.active .bm-import-modal {
+  transform: translateY(0) scale(1);
+}
+
+.bm-import-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid var(--border);
+  font-size: 14px; font-weight: 600;
+  color: var(--text-primary);
+}
+.bm-import-close {
+  background: none; border: none; color: var(--text-muted);
+  font-size: 20px; cursor: pointer; padding: 0 4px;
+  transition: color 0.15s;
+}
+.bm-import-close:hover { color: var(--text-primary); }
+
+.bm-import-info {
+  padding: 10px 18px;
+  font-size: 12px; color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.bm-import-list {
+  flex: 1; overflow-y: auto; padding: 4px 0;
+  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
+  max-height: 45vh;
+}
+
+.bm-import-folder {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; cursor: pointer;
+  transition: background 0.15s;
+  font-size: 13px; color: var(--text-primary);
+}
+.bm-import-folder:hover {
+  background: rgba(255,255,255,0.04);
+}
+
+.bm-import-checkbox {
+  accent-color: var(--accent);
+  width: 16px; height: 16px;
+  cursor: pointer; flex-shrink: 0;
+}
+
+.bm-import-folder-name {
+  flex: 1; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+
+.bm-import-folder-meta {
+  font-size: 11px; color: var(--text-muted);
+  white-space: nowrap; flex-shrink: 0;
+}
+
+.bm-import-footer {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 18px; border-top: 1px solid var(--border);
+  gap: 8px;
+}
+
 /* ============================================
    THEME PICKER MODAL
    ============================================ */

src/js/app.js

@@ -21,6 +21,7 @@ async function init() {
   await Calculator.init();
   await Timer.init();
   await ImageRef.init();
+  BrowserBookmarkImport.init();
   initDataButtons();
   Store.checkQuota();
 
@@ -103,7 +104,7 @@ async function checkBackupReminder() {
     const notesData = (widgetData && Array.isArray(widgetData.notes)) ? widgetData.notes : [];
     const calcHistory = (widgetData && widgetData.calculator) ? widgetData.calculator.history || [] : [];
     const timerPresets = (widgetData && widgetData.timer) ? widgetData.timer.presets || [] : [];
-    const data = { version: '1.9.0', exported: new Date().toISOString(), boards, settings, notes: notesData, calculator: calcHistory, timerPresets };
+    const data = { version: '1.11.1', exported: new Date().toISOString(), boards, settings, notes: notesData, calculator: calcHistory, timerPresets };
     const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
     const url  = URL.createObjectURL(blob);
     const a    = document.createElement('a');

src/js/bookmark-import.js

@@ -0,0 +1,303 @@
+/* =============================================
+   HELLION NEWTAB — bookmark-import.js
+   Direkt-Import von Browser-Lesezeichen
+   via chrome.bookmarks.getTree() / browser.bookmarks.getTree()
+   ============================================= */
+
+const BrowserBookmarkImport = {
+
+  /** Initialisiert den Import-Button */
+  init() {
+    const btn = document.getElementById('btnBrowserImport');
+    const row = document.getElementById('browserImportRow');
+    if (!btn || !row) return;
+
+    // API-Verfuegbarkeit pruefen (nicht vorhanden im normalen Browser-Tab)
+    const api = this._getApi();
+    if (!api) {
+      row.style.display = 'none';
+      return;
+    }
+
+    btn.addEventListener('click', () => this._openFolderModal());
+  },
+
+  /**
+   * Gibt die Bookmarks-API zurueck (Chrome oder Firefox)
+   * @returns {object|null}
+   */
+  _getApi() {
+    if (typeof chrome !== 'undefined' && chrome.bookmarks) return chrome.bookmarks;
+    if (typeof browser !== 'undefined' && browser.bookmarks) return browser.bookmarks;
+    return null;
+  },
+
+  /** Oeffnet das Ordner-Auswahl Modal */
+  async _openFolderModal() {
+    const api = this._getApi();
+    if (!api) return;
+
+    let tree;
+    try {
+      tree = await api.getTree();
+    } catch (err) {
+      await HellionDialog.alert(
+        'Zugriff auf Browser-Lesezeichen nicht möglich. Stelle sicher, dass die Extension die nötigen Berechtigungen hat.',
+        { type: 'warning', title: 'Lesezeichen-Import' }
+      );
+      return;
+    }
+
+    const folders = this._extractFolders(tree[0]);
+    if (folders.length === 0) {
+      await HellionDialog.alert(
+        'Keine Lesezeichen-Ordner gefunden.',
+        { type: 'warning', title: 'Lesezeichen-Import' }
+      );
+      return;
+    }
+
+    this._renderModal(folders);
+  },
+
+  /**
+   * Extrahiert alle Ordner rekursiv aus dem Bookmark-Baum
+   * @param {object} node - Bookmark-Tree Node
+   * @param {number} depth - Einrueckungstiefe
+   * @returns {Array}
+   */
+  _extractFolders(node, depth) {
+    if (depth === undefined) depth = 0;
+    const result = [];
+
+    if (!node.children) return result;
+
+    for (const child of node.children) {
+      if (child.children) {
+        const bookmarkCount = child.children.filter(function(c) { return c.url; }).length;
+        const subfolderCount = child.children.filter(function(c) { return c.children; }).length;
+
+        result.push({
+          id: child.id,
+          title: child.title || 'Unbenannt',
+          depth: depth,
+          bookmarkCount: bookmarkCount,
+          subfolderCount: subfolderCount,
+          node: child
+        });
+
+        const subFolders = this._extractFolders(child, depth + 1);
+        for (const sf of subFolders) {
+          result.push(sf);
+        }
+      }
+    }
+
+    return result;
+  },
+
+  /**
+   * Rendert das Ordner-Auswahl Modal
+   * @param {Array} folders - Liste der Ordner
+   */
+  _renderModal(folders) {
+    // Overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'bm-import-overlay';
+    overlay.id = 'bmImportOverlay';
+
+    const modal = document.createElement('div');
+    modal.className = 'bm-import-modal';
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'bm-import-header';
+
+    const title = document.createElement('span');
+    title.textContent = 'Browser-Lesezeichen importieren';
+    header.appendChild(title);
+
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'bm-import-close';
+    closeBtn.textContent = '\u00D7';
+    closeBtn.addEventListener('click', () => this._closeModal());
+    header.appendChild(closeBtn);
+
+    modal.appendChild(header);
+
+    // Info
+    const info = document.createElement('div');
+    info.className = 'bm-import-info';
+    info.textContent = 'Wähle die Ordner aus, die als Boards importiert werden sollen. Jeder Ordner wird ein eigenes Board.';
+    modal.appendChild(info);
+
+    // Ordner-Liste
+    const list = document.createElement('div');
+    list.className = 'bm-import-list';
+
+    for (const folder of folders) {
+      const row = document.createElement('label');
+      row.className = 'bm-import-folder';
+      row.style.paddingLeft = (12 + folder.depth * 20) + 'px';
+
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.className = 'bm-import-checkbox';
+      checkbox.dataset.folderId = folder.id;
+      row.appendChild(checkbox);
+
+      const label = document.createElement('span');
+      label.className = 'bm-import-folder-name';
+      label.textContent = folder.title;
+      row.appendChild(label);
+
+      const meta = document.createElement('span');
+      meta.className = 'bm-import-folder-meta';
+      const parts = [];
+      if (folder.bookmarkCount > 0) {
+        parts.push(folder.bookmarkCount + ' Link' + (folder.bookmarkCount !== 1 ? 's' : ''));
+      }
+      if (folder.subfolderCount > 0) {
+        parts.push(folder.subfolderCount + ' Ordner');
+      }
+      if (parts.length === 0) {
+        parts.push('leer');
+      }
+      meta.textContent = parts.join(', ');
+      row.appendChild(meta);
+
+      list.appendChild(row);
+    }
+
+    modal.appendChild(list);
+
+    // Footer
+    const footer = document.createElement('div');
+    footer.className = 'bm-import-footer';
+
+    const selectAll = document.createElement('button');
+    selectAll.className = 'btn-secondary';
+    selectAll.textContent = 'Alle auswählen';
+    selectAll.addEventListener('click', () => {
+      const boxes = list.querySelectorAll('.bm-import-checkbox');
+      const allChecked = Array.from(boxes).every(function(cb) { return cb.checked; });
+      boxes.forEach(function(cb) { cb.checked = !allChecked; });
+      selectAll.textContent = allChecked ? 'Alle auswählen' : 'Alle abwählen';
+    });
+    footer.appendChild(selectAll);
+
+    const importBtn = document.createElement('button');
+    importBtn.className = 'btn-primary';
+    importBtn.textContent = 'Importieren';
+    importBtn.addEventListener('click', () => this._importSelected(folders));
+    footer.appendChild(importBtn);
+
+    modal.appendChild(footer);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    // Animation
+    requestAnimationFrame(() => overlay.classList.add('active'));
+  },
+
+  /** Schliesst das Modal */
+  _closeModal() {
+    const overlay = document.getElementById('bmImportOverlay');
+    if (!overlay) return;
+    overlay.classList.remove('active');
+    setTimeout(() => overlay.remove(), 250);
+  },
+
+  /**
+   * Importiert die ausgewaehlten Ordner als Boards
+   * @param {Array} folders - Alle Ordner
+   */
+  async _importSelected(folders) {
+    const checkboxes = document.querySelectorAll('.bm-import-checkbox:checked');
+    if (checkboxes.length === 0) {
+      await HellionDialog.alert(
+        'Bitte wähle mindestens einen Ordner aus.',
+        { type: 'warning', title: 'Lesezeichen-Import' }
+      );
+      return;
+    }
+
+    // Bestehende URLs sammeln fuer Duplikat-Erkennung
+    const existingUrls = new Set();
+    for (const board of boards) {
+      for (const bm of board.bookmarks) {
+        existingUrls.add(bm.url);
+      }
+    }
+
+    const selectedIds = new Set();
+    checkboxes.forEach(function(cb) { selectedIds.add(cb.dataset.folderId); });
+
+    let totalImported = 0;
+    let totalSkipped = 0;
+    let boardsCreated = 0;
+
+    for (const folder of folders) {
+      if (!selectedIds.has(folder.id)) continue;
+
+      const bookmarks = [];
+      for (const child of folder.node.children) {
+        if (!child.url) continue;
+
+        // Nur http/https URLs
+        try {
+          const parsed = new URL(child.url);
+          if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') continue;
+        } catch (e) {
+          continue;
+        }
+
+        // Duplikat-Check
+        if (existingUrls.has(child.url)) {
+          totalSkipped++;
+          continue;
+        }
+
+        bookmarks.push({
+          id: uid(),
+          title: child.title || child.url,
+          url: child.url,
+          desc: ''
+        });
+
+        existingUrls.add(child.url);
+        totalImported++;
+      }
+
+      if (bookmarks.length === 0) continue;
+
+      boards.push({
+        id: uid(),
+        title: folder.title,
+        bookmarks: bookmarks,
+        blurred: false
+      });
+      boardsCreated++;
+    }
+
+    if (boardsCreated > 0) {
+      await saveBoards();
+      renderBoards();
+    }
+
+    this._closeModal();
+
+    // Ergebnis-Dialog
+    const lines = [];
+    lines.push(boardsCreated + ' Board' + (boardsCreated !== 1 ? 's' : '') + ' erstellt');
+    lines.push(totalImported + ' Lesezeichen importiert');
+    if (totalSkipped > 0) {
+      lines.push(totalSkipped + ' Duplikat' + (totalSkipped !== 1 ? 'e' : '') + ' übersprungen');
+    }
+
+    await HellionDialog.alert(
+      lines.join('\n'),
+      { type: 'success', title: 'Import abgeschlossen' }
+    );
+  }
+};

src/js/data.js

@@ -13,7 +13,7 @@ function initDataButtons() {
   btnExport.addEventListener('click', async () => {
     const widgetData = await Store.get('widgetStates');
     const data = {
-      version: '1.9.0',
+      version: '1.11.1',
       exported: new Date().toISOString(),
       boards,
       settings,

src/js/onboarding.js

@@ -24,7 +24,7 @@ const Onboarding = {
     },
     {
       hero: '\uD83C\uDFA8',
-      title: '8 handgefertigte Themes',
+      title: '11 handgefertigte Themes',
       text: 'Klicke auf den \u201ETheme\u201C Button im Header um dein Theme zu w\u00E4hlen. Jedes hat seinen eigenen Stil und Farbpalette.',
       showThemes: true
     },
@@ -127,7 +127,7 @@ const Onboarding = {
     if (slide.showThemes) {
       const grid = document.createElement('div');
       grid.className = 'onboarding-theme-grid';
-      const themeNames = ['Nebula', 'Crescent', 'Event Horizon', 'Merchantman', 'Julia & Jin', 'SC Sunset', 'Hellion HUD', 'Hellion Energy'];
+      const themeNames = ['Nebula', 'Crescent', 'Event Horizon', 'Merchantman', 'Julia & Jin', 'SC Sunset', 'Hellion HUD', 'Hellion Energy', 'Satisfactory', 'Avorion', 'Hellion Stealth'];
       themeNames.forEach(name => {
         const chip = document.createElement('div');
         chip.className = 'onboarding-theme-chip';

src/js/themes.js

@@ -4,14 +4,17 @@
    ============================================= */
 
 const THEMES = {
-  'nebula':          { bg: 'assets/themes/bg-nebula.jpg' },
+  'nebula':          { bg: 'assets/themes/bg-nebula.webp' },
-  'crescent':        { bg: 'assets/themes/bg-crescent.jpg' },
+  'crescent':        { bg: 'assets/themes/bg-crescent.webp' },
-  'event-horizon':   { bg: 'assets/themes/bg-event-horizon.jpg' },
+  'event-horizon':   { bg: 'assets/themes/bg-event-horizon.webp' },
   'merchantman':    { bg: 'assets/themes/bg-merchantman.webp' },
-  'julia-jin':      { bg: 'assets/themes/bg-julia-jin.png' },
+  'julia-jin':      { bg: 'assets/themes/bg-julia-jin.webp' },
-  'sc-sunset':      { bg: 'assets/themes/bg-sc-sunset.jpg' },
+  'sc-sunset':      { bg: 'assets/themes/bg-sc-sunset.webp' },
-  'hellion-hud':    { bg: 'assets/themes/bg-hellion-hud.png' },
+  'hellion-hud':    { bg: 'assets/themes/bg-hellion-hud.webp' },
-  'hellion-energy': { bg: 'assets/themes/bg-hellion-energy.jpg' }
+  'hellion-energy': { bg: 'assets/themes/bg-hellion-energy.webp' },
+  'satisfactory':   { bg: 'assets/themes/bg-satisfactory.webp' },
+  'avorion':        { bg: 'assets/themes/bg-avorion.webp' },
+  'hellion-stealth': { bg: 'assets/themes/bg-scPolaris.webp' }
 };
 
 function applyTheme(themeName, skipBgOverride) {