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

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+
+ko_fi: hellionmedia

.gitignore

@@ -16,6 +16,10 @@ dist/
 node_modules/
 /xpi/
 v2-planning.md
+themes-v2.md
+
+# Firefox Update-Manifest (wird auf hellion-media.de gehostet)
+updates.json
 
 # Persönliche Backup-Dateien (nicht ins Repo)
 favorites_*.html

README.md

@@ -1,6 +1,6 @@
-# ⬡ Hellion Dashboard v1.5.2
+# ⬡ Hellion Dashboard v1.9.0
 
-![Version](https://img.shields.io/badge/Version-1.5.2-blue)
+![Version](https://img.shields.io/badge/Version-1.9.0-blue)
 ![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla%20ES2020-F7DF1E?logo=javascript&logoColor=black)
 ![Manifest](https://img.shields.io/badge/Manifest-V3-green)
 ![License](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-orange)

docs/architecture.md

@@ -0,0 +1,163 @@
+# Hellion Dashboard — Architecture
+
+## Overview
+
+Hellion Dashboard is a browser extension (NewTab replacement) built with **Vanilla JavaScript ES2020**, **CSS Custom Properties**, and **zero dependencies**. No build step, no framework, no bundler — files are loaded directly via `<script>` tags.
+
+**Storage:** `chrome.storage.local` with `localStorage` fallback.
+**Manifest:** V3 for Chromium browsers, V3 for Firefox (separate manifest).
+
+---
+
+## File Structure
+
+```
+HOM_NewTab_Project/
+├── newtab.html              # Single HTML entry point
+├── manifest.json            # Chrome/Edge/Brave/Vivaldi (MV3)
+├── manifest.firefox.json    # Firefox (MV3)
+├── manifest.opera.json      # Opera/Opera GX (MV3 + workarounds)
+├── src/
+│   ├── css/
+│   │   └── main.css         # All styles, themes, responsive breakpoints
+│   └── js/
+│       ├── storage.js        # Storage abstraction layer
+│       ├── state.js          # Global state, defaults, helpers
+│       ├── themes.js         # Theme definitions & application
+│       ├── boards.js         # Board/bookmark rendering & events
+│       ├── drag.js           # Drag & drop (Pointer Events API)
+│       ├── settings.js       # Settings panel, toggles, theme picker
+│       ├── search.js         # Search bar (Google, DuckDuckGo, Bing)
+│       ├── widgets.js        # Widget manager (registry, drag, resize)
+│       ├── notes.js          # Notes/checklists (multi-instance widgets)
+│       ├── calculator.js     # Calculator widget (single-instance)
+│       ├── timer.js          # Timer/countdown widget (single-instance)
+│       ├── image-ref.js      # Image reference widget (multi-instance)
+│       ├── onboarding.js     # First-run onboarding flow
+│       ├── data.js           # JSON export/import (backup & restore)
+│       ├── app.js            # Init, clock, global events (entry point)
+│       └── dialog.js         # Custom dialog system (alert, confirm)
+├── assets/
+│   ├── icons/                # Extension icons (16-512px)
+│   └── themes/               # Theme background images
+└── docs/                     # Documentation (you are here)
+```
+
+---
+
+## Module Responsibilities
+
+Each module has exactly one responsibility. They communicate through global references (no import/export — this is a browser extension without a bundler).
+
+| Module | Responsibility |
+|---|---|
+| `storage.js` | **Only** place that touches `chrome.storage` / `localStorage`. All other modules go through `Store.get()` / `Store.set()`. |
+| `state.js` | Global `boards` and `settings` arrays, default values, `uid()`, `escHtml()`, `getFaviconUrl()`. |
+| `themes.js` | Theme CSS variable application. 8 themes, each with its own `[data-theme]` block in CSS. |
+| `boards.js` | Renders boards and bookmarks. Event delegation on board containers. |
+| `drag.js` | Board and bookmark reordering via Pointer Events API. |
+| `settings.js` | Settings panel UI, toggle handlers, theme modal, background upload. |
+| `search.js` | Search bar with engine switching (Google, DuckDuckGo, Bing). |
+| `widgets.js` | Widget manager — creates DOM, handles drag/resize/z-index, provides registry. See [widget-schema.md](widget-schema.md). |
+| `notes.js` | Notes and checklists as widgets. Multi-instance (max 5). Notebook sidebar. Also handles widget toolbar events. |
+| `calculator.js` | Calculator widget. Single-instance. Shunting-yard expression parser (no `eval()`). |
+| `timer.js` | Timer/countdown widget. Single-instance. Presets, Web Audio API alarm, tab-title blink. |
+| `image-ref.js` | Image reference widget. Multi-instance (max 3). Canvas API WebP conversion, sessionStorage for image data. |
+| `onboarding.js` | Multi-slide onboarding flow. Gaming starter board opt-in. |
+| `data.js` | JSON export/import with validation. Handles boards, notes, calculator history, timer presets. |
+| `app.js` | Entry point. Calls `init()` on DOMContentLoaded. Clock, global event binding. |
+| `dialog.js` | `HellionDialog.alert()` and `HellionDialog.confirm()` — custom styled dialogs replacing native browser dialogs. |
+
+---
+
+## Init Sequence
+
+```
+DOMContentLoaded
+  → init()
+    → Store.get('boards')          # Load saved boards
+    → Store.get('settings')        # Load saved settings
+    → applySettings()              # Apply theme, toggles, etc.
+    → renderBoards()               # Render all boards
+    → startClock()                 # Start clock/date display
+    → bindGlobalEvents()           # Header buttons, modals
+    → bindSettingsEvents()         # Settings toggles, theme picker
+    → initSearch()                 # Search bar
+    → migrateSticky()              # Legacy sticky note migration
+    → Notes.init()                 # Notes + widget toolbar
+    → Calculator.init()            # Calculator widget
+    → Timer.init()                 # Timer widget
+    → ImageRef.init()              # Image reference widget
+    → initDataButtons()            # Export/import buttons
+    → Onboarding check             # First-run onboarding
+```
+
+---
+
+## Script Load Order
+
+Scripts are loaded in `newtab.html` in dependency order:
+
+```html
+<script src="src/js/dialog.js"></script>
+<script src="src/js/storage.js"></script>
+<script src="src/js/state.js"></script>
+<script src="src/js/themes.js"></script>
+<script src="src/js/boards.js"></script>
+<script src="src/js/drag.js"></script>
+<script src="src/js/settings.js"></script>
+<script src="src/js/search.js"></script>
+<script src="src/js/onboarding.js"></script>
+<script src="src/js/widgets.js"></script>
+<script src="src/js/notes.js"></script>
+<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/data.js"></script>
+<script src="src/js/app.js"></script>
+```
+
+**Rule:** A module may only reference modules loaded before it.
+
+---
+
+## Z-Index Hierarchy
+
+| Layer | z-index | Elements |
+|---|---|---|
+| Background | 0-2 | `#bgLayer`, boards |
+| Search bar | 90 | `.search-bar-wrapper` |
+| Widgets + Toolbar | 100+ | `.widget`, `.widget-toolbar` |
+| Header | 100 | `#header` |
+| Settings panel | 200 | `#settingsPanel` |
+| Dialogs / Modals | 300 | `.hellion-dialog-overlay`, modals |
+| Onboarding | 400 | `#onboardingOverlay` |
+
+Widgets use incrementing z-index (`WidgetManager._topZ++`) to stack above each other on click.
+
+---
+
+## Storage Keys
+
+| Key | Type | Content |
+|---|---|---|
+| `boards` | Array | Board objects with bookmarks |
+| `settings` | Object | User preferences (theme, toggles, etc.) |
+| `widgetStates` | Object | All widget data (see [widget-schema.md](widget-schema.md)) |
+| `onboardingDone` | Boolean | Whether onboarding has been completed |
+| `lastBackupReminder` | Number | Timestamp of last backup reminder |
+
+---
+
+## Browser Compatibility
+
+| Browser | Engine | Manifest |
+|---|---|---|
+| Chrome | Chromium MV3 | `manifest.json` |
+| Edge | Chromium MV3 | `manifest.json` |
+| Brave | Chromium MV3 | `manifest.json` |
+| Vivaldi | Chromium MV3 | `manifest.json` |
+| Opera / GX | Chromium MV3 | `manifest.opera.json` |
+| Firefox | Gecko MV3 | `manifest.firefox.json` |
+
+Changes affecting manifest fields must be synchronized across all three manifest files.

docs/patterns.md

@@ -0,0 +1,310 @@
+# Hellion Dashboard — Code Patterns & Conventions
+
+## Core Principles
+
+- **Vanilla JS ES2020** — No frameworks, no TypeScript, no build step
+- **Zero dependencies** — Everything is built from scratch
+- **`createElement` only** — Never use `innerHTML` (XSS prevention)
+- **CSS Custom Properties** — No hardcoded colors, everything through `var(--name)`
+- **Event delegation** — One listener per container, not per element
+- **Storage abstraction** — All storage access through `Store.get()` / `Store.set()`
+
+---
+
+## Pattern: Storage Abstraction
+
+**File:** `src/js/storage.js`
+
+All persistent data goes through the `Store` object. Never access `chrome.storage` or `localStorage` directly.
+
+```javascript
+// Reading
+const boards = await Store.get('boards');       // Returns null if not found
+const settings = await Store.get('settings');
+
+// Writing
+await Store.set('boards', boards);
+await Store.set('settings', settings);
+
+// Quota check (chrome.storage only, 10 MB limit)
+await Store.checkQuota();
+```
+
+**Why?** The `Store` handles the chrome.storage / localStorage fallback transparently. It also provides unified error handling (shows a dialog when storage is full).
+
+---
+
+## Pattern: Event Delegation
+
+Instead of attaching listeners to each element, attach one to the container and use `closest()` to find the target.
+
+```javascript
+// GOOD — one listener, handles all bookmarks
+container.addEventListener('click', (e) => {
+  const bmItem = e.target.closest('.bm-item');
+  if (!bmItem) return;
+  const id = bmItem.dataset.id;
+  // Handle click
+});
+
+// BAD — listener per element
+bookmarks.forEach(bm => {
+  bm.addEventListener('click', handler);  // Don't do this!
+});
+```
+
+**Used in:** `boards.js` (board/bookmark events), `notes.js` (toolbar), `calculator.js` (button grid)
+
+---
+
+## Pattern: createElement over innerHTML
+
+Always build DOM with `document.createElement()`. This prevents XSS and is the project's #1 security rule.
+
+```javascript
+// GOOD
+const link = document.createElement('a');
+link.href = bookmark.url;
+link.textContent = bookmark.title;
+container.appendChild(link);
+
+// BAD — XSS risk!
+container.innerHTML = `<a href="${url}">${title}</a>`;
+```
+
+---
+
+## Pattern: Shared Storage Key
+
+Multiple widget modules share the `widgetStates` key. Every module must read-before-write and preserve other modules' data.
+
+```javascript
+async save() {
+  const data = await Store.get('widgetStates') || {};
+
+  // Write your own data
+  data.yourKey = { /* ... */ };
+
+  // DON'T overwrite — the key already contains other modules' data
+  await Store.set('widgetStates', data);
+}
+```
+
+See [widget-schema.md](widget-schema.md) for the full `widgetStates` structure.
+
+---
+
+## Pattern: Widget Lifecycle Hooks
+
+Single-instance widgets (Calculator, Timer) need to know when they're closed, minimized, or reopened. They wrap `WidgetManager` methods in their `init()`:
+
+```javascript
+async init() {
+  // Wrap close
+  const prevClose = WidgetManager.close;
+  const self = this;
+  WidgetManager.close = function(id) {
+    prevClose.call(WidgetManager, id);
+    if (id === self.WIDGET_ID) {
+      self.onClose();
+    }
+  };
+
+  // Wrap minimize
+  const prevMinimize = WidgetManager.minimize;
+  WidgetManager.minimize = async function(id) {
+    await prevMinimize.call(WidgetManager, id);
+    if (id === self.WIDGET_ID) {
+      self._isOpen = false;
+      await self.save();
+    }
+  };
+}
+```
+
+**Important:** Multiple widgets chain these wraps. Calculator wraps first, Timer wraps Calculator's already-wrapped version, and so on. The chain must not break.
+
+---
+
+## Pattern: Debounced Save
+
+For frequent updates (typing in notes, moving widgets), use debounced saves to avoid excessive storage writes:
+
+```javascript
+_saveTimer: null,
+
+_debouncedSave() {
+  clearTimeout(this._saveTimer);
+  this._saveTimer = setTimeout(() => this.save(), 500);
+}
+
+// Usage: call _debouncedSave() instead of save() for frequent events
+textarea.addEventListener('input', () => {
+  noteData.content = textarea.value;
+  this._debouncedSave();
+});
+```
+
+**Used in:** `notes.js` (text editing), `image-ref.js` (label editing)
+
+---
+
+## Pattern: Theme System
+
+All themes use CSS Custom Properties defined in `[data-theme="name"]` blocks:
+
+```css
+[data-theme="nebula"] {
+  --bg-primary: #0a0e17;
+  --bg-board: rgba(15, 20, 35, 0.65);
+  --text-primary: #e0e6f0;
+  --accent: #7db3ff;
+  --border: rgba(125, 179, 255, 0.12);
+  /* ... more variables */
+}
+```
+
+**Never hardcode colors in JS.** Use CSS classes or variables:
+
+```javascript
+// GOOD — let CSS handle colors
+element.classList.add('active');
+
+// BAD — hardcoded color
+element.style.color = '#7db3ff';
+```
+
+8 themes are available: Nebula, Crescent, Event Horizon, Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy.
+
+---
+
+## Pattern: Onboarding Slides
+
+The onboarding system (`onboarding.js`) uses a data-driven slide array. Each slide is an object with rendering hints:
+
+```javascript
+{
+  hero: '🎮',                    // Large emoji/icon
+  title: 'Slide Title',          // Heading
+  text: 'Description...',        // Optional text paragraph
+  features: ['Item 1', ...],     // Optional bullet list
+  showThemes: true,              // Optional theme grid
+  interactive: 'gaming-board'    // Optional custom buttons
+}
+```
+
+The `_render()` method reads these properties and builds the DOM. To add a new slide, just add an object to the `slides` array.
+
+---
+
+## Pattern: Dialog System
+
+Custom dialogs replace native `alert()` and `confirm()`:
+
+```javascript
+// Alert (informational)
+await HellionDialog.alert('Message text', {
+  type: 'info',        // 'info', 'success', 'warning', 'danger'
+  title: 'Title'
+});
+
+// Confirm (yes/no)
+const ok = await HellionDialog.confirm('Are you sure?', {
+  type: 'danger',
+  title: 'Delete',
+  confirmText: 'Delete',     // Custom button text
+  cancelText: 'Cancel'
+});
+if (ok) { /* user confirmed */ }
+```
+
+---
+
+## Pattern: Pointer Events for Drag
+
+Widget dragging and board reordering use the Pointer Events API (not mouse events):
+
+```javascript
+element.addEventListener('pointerdown', (e) => {
+  element.setPointerCapture(e.pointerId);
+
+  function onMove(ev) {
+    // Update position
+  }
+
+  function onUp() {
+    element.releasePointerCapture(e.pointerId);
+    element.removeEventListener('pointermove', onMove);
+    element.removeEventListener('pointerup', onUp);
+  }
+
+  element.addEventListener('pointermove', onMove);
+  element.addEventListener('pointerup', onUp);
+});
+```
+
+**Why Pointer Events over Mouse Events?** They work with both mouse and touch, and `setPointerCapture` ensures events continue even if the cursor leaves the element.
+
+---
+
+## Pattern: Canvas API Image Processing
+
+The image reference widget converts uploaded images to WebP for smaller size:
+
+```javascript
+_processFile(file) {
+  return new Promise((resolve, reject) => {
+    const objectUrl = URL.createObjectURL(file);
+    const img = new Image();
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+      const webpUrl = canvas.toDataURL('image/webp', 0.85);
+      URL.revokeObjectURL(objectUrl);
+      resolve(webpUrl);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error('Image could not be loaded'));
+    };
+
+    img.src = objectUrl;
+  });
+}
+```
+
+**Important:** Always call `URL.revokeObjectURL()` to free memory.
+
+---
+
+## Coding Rules Summary
+
+| Rule | Rationale |
+|---|---|
+| `createElement` only, never `innerHTML` | XSS prevention |
+| All storage through `Store` | Browser compatibility |
+| CSS variables, no hardcoded colors | Theme support |
+| Event delegation | Performance, dynamic content |
+| `const`/`let`, never `var` | Block scoping |
+| No external dependencies | Extension simplicity |
+| No build step | Direct development |
+| JSDoc comments on public functions | Documentation |
+| URL validation before `href` | Security |
+| Error handling on storage operations | Graceful failure |
+
+---
+
+## Manifest Synchronization
+
+Three manifest files must stay in sync:
+
+- `manifest.json` — Chrome, Edge, Brave, Vivaldi
+- `manifest.firefox.json` — Firefox
+- `manifest.opera.json` — Opera, Opera GX
+
+When changing version numbers, permissions, or content script entries, update all three files.

docs/widget-schema.md

@@ -0,0 +1,330 @@
+# Hellion Dashboard — Widget Schema
+
+## Overview
+
+The widget system provides draggable, resizable floating panels managed by `WidgetManager` (`src/js/widgets.js`). Each widget type has its own module that handles content rendering and state management.
+
+---
+
+## Widget Types
+
+| Type | Module | Instance | Max | Storage |
+|---|---|---|---|---|
+| `note` | `notes.js` | Multi | 5 | Persistent (`widgetStates.notes`) |
+| `calculator` | `calculator.js` | Single | 1 | Persistent (`widgetStates.calculator`) |
+| `timer` | `timer.js` | Single | 1 | Persistent (`widgetStates.timer`) |
+| `image` | `image-ref.js` | Multi | 3 | Meta: persistent, Image data: sessionStorage |
+
+---
+
+## WidgetManager API
+
+### `create(type, config) → string`
+
+Creates a widget and appends it to the DOM.
+
+```javascript
+const id = WidgetManager.create('note', {
+  id: 'note_abc123',       // Optional, auto-generated if omitted
+  title: 'My Note',        // Default: 'Note'
+  x: 120,                  // Left position in px
+  y: 80,                   // Top position in px
+  width: 280,              // Width in px (min: 200)
+  height: 220,             // Height in px (min: 150)
+  open: true               // Visible state (default: true)
+});
+```
+
+### `getBody(id) → HTMLElement | null`
+
+Returns the `.widget-body` element for content rendering.
+
+```javascript
+const body = WidgetManager.getBody('widget_calculator');
+if (body) Calculator.renderBody(body);
+```
+
+### `getState(id) → Object | null`
+
+Returns the current widget state (position, size, open status).
+
+```javascript
+const state = WidgetManager.getState('widget_timer');
+// → { id, type, title, x, y, width, height, open }
+```
+
+### `close(id)`
+
+Permanently removes a widget from the DOM and registry.
+
+### `minimize(id)`
+
+Hides a widget with animation. Widget remains in registry with `open: false`.
+
+### `openWidget(id)`
+
+Restores a minimized widget with animation.
+
+### `bringToFront(id)`
+
+Increments z-index to bring widget above all others.
+
+### `save() → Array`
+
+Returns an array of all `type: 'note'` widget states. Used by `Notes.save()` to merge with note content data.
+
+### `restore(renderCallback)`
+
+Loads widget states from storage and recreates all note widgets. Only handles notes — single-instance widgets (calculator, timer) restore themselves in their own `init()`.
+
+---
+
+## Shared Storage Key: `widgetStates`
+
+All widget modules share a single storage key. Each module's `save()` method must preserve other modules' data.
+
+```javascript
+// Structure of widgetStates
+{
+  notes: [
+    {
+      id: 'note_abc123',
+      title: 'My Note',
+      content: 'Hello world',
+      template: 'text',         // 'text' or 'checklist'
+      x: 120, y: 80,
+      width: 280, height: 220,
+      open: true,
+      checklistItems: [],       // For checklist template
+      checkedItems: []          // Checked item IDs
+    }
+  ],
+  calculator: {
+    x: 400, y: 120,
+    width: 280, height: 400,
+    open: false,
+    history: [
+      { expr: '2 + 3', result: '5' }
+    ]
+  },
+  timer: {
+    x: 600, y: 80,
+    width: 260, height: 360,
+    open: false,
+    muted: false,
+    presets: [
+      { name: 'Forschung', seconds: 2700 }
+    ]
+  },
+  imageRef: {
+    images: [
+      {
+        id: 'image_0',
+        label: 'Bauplan',
+        x: 200, y: 120,
+        width: 320, height: 280,
+        open: true
+      }
+    ]
+  }
+}
+```
+
+### Save Pattern — Preserving Other Modules' Data
+
+Every module that saves to `widgetStates` must read existing data first and preserve keys it doesn't own:
+
+```javascript
+// Example from notes.js
+async save() {
+  const existing = await Store.get(this.STORAGE_KEY);
+  const saveData = { notes: mergedNotes };
+
+  // Preserve other modules
+  if (existing && existing.calculator) saveData.calculator = existing.calculator;
+  if (existing && existing.timer) saveData.timer = existing.timer;
+  if (existing && existing.imageRef) saveData.imageRef = existing.imageRef;
+
+  await Store.set(this.STORAGE_KEY, saveData);
+}
+```
+
+---
+
+## Creating a New Widget Type
+
+### Step 1: Choose Single or Multi-Instance
+
+- **Single-instance** (like Calculator, Timer): One widget with a fixed ID. `toggle()` opens/closes.
+- **Multi-instance** (like Notes, ImageRef): Multiple widgets with dynamic IDs. `create()` adds new ones.
+
+### Step 2: Create the Module (`src/js/your-widget.js`)
+
+```javascript
+const YourWidget = {
+  WIDGET_ID: 'widget_yourwidget',   // Fixed ID for single-instance
+  STORAGE_KEY: 'widgetStates',
+  _isOpen: false,
+
+  // Load state from storage
+  async load() {
+    const data = await Store.get(this.STORAGE_KEY);
+    if (data && data.yourWidget) {
+      // Restore your state
+    }
+  },
+
+  // Save state, preserving other modules
+  async save() {
+    const data = await Store.get(this.STORAGE_KEY) || {};
+    if (data.notes === undefined) data.notes = [];
+
+    const widgetState = WidgetManager.getState(this.WIDGET_ID);
+    data.yourWidget = {
+      x: widgetState ? widgetState.x : 400,
+      y: widgetState ? widgetState.y : 120,
+      width: widgetState ? widgetState.width : 280,
+      height: widgetState ? widgetState.height : 300,
+      open: this._isOpen,
+      // ... your custom data
+    };
+
+    await Store.set(this.STORAGE_KEY, data);
+  },
+
+  // Open widget
+  async open() {
+    if (this._isOpen) {
+      WidgetManager.bringToFront(this.WIDGET_ID);
+      return;
+    }
+
+    const data = await Store.get(this.STORAGE_KEY);
+    const saved = (data && data.yourWidget) ? data.yourWidget : {};
+
+    WidgetManager.create('yourwidget', {
+      id: this.WIDGET_ID,
+      title: 'Your Widget',
+      x: saved.x || 400,
+      y: saved.y || 120,
+      width: saved.width || 280,
+      height: saved.height || 300,
+      open: true
+    });
+
+    const body = WidgetManager.getBody(this.WIDGET_ID);
+    if (body) this.renderBody(body);
+
+    this._isOpen = true;
+    await this.save();
+  },
+
+  // Toggle open/close
+  async toggle() {
+    if (this._isOpen) {
+      const entry = WidgetManager._widgets.get(this.WIDGET_ID);
+      if (entry && entry.state.open) {
+        await WidgetManager.minimize(this.WIDGET_ID);
+        this._isOpen = false;
+        await this.save();
+      } else if (entry) {
+        await WidgetManager.openWidget(this.WIDGET_ID);
+        this._isOpen = true;
+        await this.save();
+      }
+    } else {
+      await this.open();
+    }
+  },
+
+  // Render widget content
+  renderBody(bodyEl) {
+    bodyEl.textContent = '';
+    // Build your UI with createElement (never innerHTML!)
+  },
+
+  // Initialize and hook into lifecycle
+  async init() {
+    await this.load();
+
+    // Restore if was open last time
+    const data = await Store.get(this.STORAGE_KEY);
+    if (data && data.yourWidget && data.yourWidget.open) {
+      await this.open();
+    }
+
+    // Hook into close event
+    const self = this;
+    const prevClose = WidgetManager.close;
+    WidgetManager.close = function(id) {
+      prevClose.call(WidgetManager, id);
+      if (id === self.WIDGET_ID) {
+        self._isOpen = false;
+        self.save();
+      }
+    };
+
+    // Hook into minimize event
+    const prevMinimize = WidgetManager.minimize;
+    WidgetManager.minimize = async function(id) {
+      await prevMinimize.call(WidgetManager, id);
+      if (id === self.WIDGET_ID) {
+        self._isOpen = false;
+        await self.save();
+      }
+    };
+
+    // Hook into open event
+    const prevOpen = WidgetManager.openWidget;
+    WidgetManager.openWidget = async function(id) {
+      await prevOpen.call(WidgetManager, id);
+      if (id === self.WIDGET_ID) {
+        self._isOpen = true;
+        const body = WidgetManager.getBody(self.WIDGET_ID);
+        if (body && body.children.length === 0) {
+          self.renderBody(body);
+        }
+        await self.save();
+      }
+    };
+  }
+};
+```
+
+### Step 3: Integration Checklist
+
+1. **`newtab.html`** — Add `<script>` tag (after `widgets.js`, before `data.js`)
+2. **`newtab.html`** — Add toolbar button: `<button class="widget-toolbar-btn" data-action="your-action">`
+3. **`notes.js`** — Add toolbar handler in `initToolbar()`: `} else if (action === 'your-action') { YourWidget.toggle(); }`
+4. **`notes.js`** — Preserve your data in `save()`: `if (existing && existing.yourWidget) saveData.yourWidget = existing.yourWidget;`
+5. **`app.js`** — Add `await YourWidget.init();` to the init sequence
+6. **`src/css/main.css`** — Add widget-specific CSS styles
+7. **`data.js`** — Add export/import logic (if data should be included in backups)
+
+---
+
+## Widget DOM Structure
+
+Every widget created by `WidgetManager.create()` has this structure:
+
+```html
+<div class="widget" data-widget-id="widget_abc123"
+     style="left: 120px; top: 80px; width: 280px; height: 220px;">
+  <div class="widget-header">
+    <span class="widget-title">Title</span>
+    <div class="widget-actions">
+      <button class="widget-btn widget-minimize">─</button>
+      <button class="widget-btn widget-close">✕</button>
+    </div>
+  </div>
+  <div class="widget-body">
+    <!-- Your content goes here (via renderBody) -->
+  </div>
+  <div class="widget-resize-handle"></div>
+</div>
+```
+
+- **Header** is the drag handle (Pointer Events)
+- **Title** supports double-click to edit (contentEditable, max 20 chars)
+- **Body** is where your module renders content
+- **Resize handle** appears on hover (bottom-right corner)

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hellion NewTab",
-  "version": "1.5.2",
+  "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",
@@ -18,6 +18,7 @@
   "browser_specific_settings": {
     "gecko": {
       "id": "hellion-newtab@hellion-media.de",
+      "update_url": "https://hellion-media.de/extensions/firefox/updates.json",
       "strict_min_version": "142.0",
       "data_collection_permissions": {
         "required": [

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Hellion NewTab",
-  "version": "1.5.2",
+  "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.5.2",
+  "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

@@ -35,9 +35,9 @@
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
         Note
       </button>
-      <button class="btn-icon" id="btnTheme" title="Theme wählen">
+      <button class="btn-icon" id="btnTheme" title="Darstellung & Theme">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 100 20 4 4 0 01-1-7.9 1 1 0 011-.1h1a2 2 0 002-2V7a5 5 0 00-3-4.5"/><circle cx="7" cy="10" r="1.5"/><circle cx="13" cy="6" r="1.5"/><circle cx="17" cy="10" r="1.5"/><circle cx="9" cy="17" r="1.5"/></svg>
-        Theme
+        Darstellung
       </button>
       <button class="btn-icon" id="btnSettings" title="Einstellungen">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
@@ -105,84 +105,11 @@
   <div class="panel-overlay" id="settingsOverlay"></div>
   <aside class="settings-panel" id="settingsPanel">
     <div class="panel-header">
-      <span>Settings</span>
+      <span>Einstellungen</span>
       <button class="btn-close" id="btnCloseSettings">✕</button>
     </div>
     <div class="panel-body">
 
-      <!-- APPEARANCE -->
-      <section class="settings-section" data-section="appearance">
-        <button class="settings-section-title" type="button">
-          <span class="section-chevron">▸</span>
-          APPEARANCE
-        </button>
-        <div class="section-content">
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Compact mode</span>
-              <span class="setting-desc">Reduce spacing to show more bookmarks</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
-          </div>
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Shorten long titles</span>
-              <span class="setting-desc">Shorten title to one line with "…"</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
-          </div>
-        </div>
-      </section>
-
-      <!-- BEHAVIOR -->
-      <section class="settings-section" data-section="behavior">
-        <button class="settings-section-title" type="button">
-          <span class="section-chevron">▸</span>
-          BEHAVIOR
-        </button>
-        <div class="section-content">
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Open links in new tab</span>
-              <span class="setting-desc">Open bookmarks in a new browser tab</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingNewTab" checked /><span class="slider"></span></label>
-          </div>
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Show bookmark descriptions</span>
-              <span class="setting-desc">Display saved descriptions below bookmark titles</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
-          </div>
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Hide extra bookmarks in long boards</span>
-              <span class="setting-desc">Automatically hides extra bookmarks in long boards</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingHideExtra" /><span class="slider"></span></label>
-          </div>
-          <div class="setting-row" id="visibleCountRow">
-            <div class="setting-info">
-              <span class="setting-label">Visible bookmarks before hide</span>
-              <span class="setting-desc">Choose how many bookmarks are shown</span>
-            </div>
-            <select class="select-input" id="settingVisibleCount">
-              <option value="5">5</option>
-              <option value="10" selected>10</option>
-              <option value="20">20</option>
-            </select>
-          </div>
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Suchleiste anzeigen</span>
-              <span class="setting-desc">Suchleiste unter dem Header ein/aus</span>
-            </div>
-            <label class="toggle"><input type="checkbox" id="settingShowSearch" checked /><span class="slider"></span></label>
-          </div>
-        </div>
-      </section>
-
       <!-- WIDGETS -->
       <section class="settings-section" data-section="widgets">
         <button class="settings-section-title" type="button">
@@ -193,7 +120,7 @@
           <div class="setting-row">
             <div class="setting-info">
               <span class="setting-label">Toolbar-Position</span>
-              <span class="setting-desc">Widget-Toolbar links oder rechts</span>
+              <span class="setting-desc">Widget-Toolbar links oder rechts anzeigen</span>
             </div>
             <select class="select-input" id="settingToolbarPos">
               <option value="right" selected>Rechts</option>
@@ -213,38 +140,35 @@
         </div>
       </section>
 
-      <!-- DATA -->
+      <!-- DATEN & HILFE -->
       <section class="settings-section" data-section="data">
         <button class="settings-section-title" type="button">
           <span class="section-chevron">▸</span>
-          DATA
+          DATEN & HILFE
         </button>
         <div class="section-content">
           <div class="setting-row">
             <div class="setting-info">
-              <span class="setting-label">Export Boards</span>
+              <span class="setting-label">Backup exportieren</span>
-              <span class="setting-desc">Alle Boards als JSON sichern</span>
+              <span class="setting-desc">Alle Boards, Notes und Einstellungen als JSON sichern</span>
             </div>
             <button class="btn-small" id="btnExportJSON">Export</button>
           </div>
           <div class="setting-row">
             <div class="setting-info">
-              <span class="setting-label">Import Boards</span>
+              <span class="setting-label">Backup importieren</span>
               <span class="setting-desc">JSON-Backup wiederherstellen</span>
             </div>
             <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>
-      </section>
-
-      <!-- HELP -->
-      <section class="settings-section" data-section="help">
-        <button class="settings-section-title" type="button">
-          <span class="section-chevron">▸</span>
-          HELP
-        </button>
-        <div class="section-content">
           <div class="setting-row">
             <div class="setting-info">
               <span class="setting-label">Onboarding wiederholen</span>
@@ -255,16 +179,30 @@
         </div>
       </section>
 
-      <!-- ABOUT / IMPRESSUM -->
+      <!-- DANGER ZONE -->
-      <section class="settings-section" data-section="about">
+      <section class="settings-section" data-section="danger">
-        <button class="settings-section-title" type="button">
+        <button class="settings-section-title danger" type="button">
           <span class="section-chevron">▸</span>
-          ABOUT
+          DANGER ZONE
         </button>
         <div class="section-content">
+          <div class="setting-row">
+            <div class="setting-info">
+              <span class="setting-label">Alles zurücksetzen</span>
+              <span class="setting-desc">Löscht alle Boards, Notes und Einstellungen</span>
+            </div>
+            <button class="btn-danger" id="btnResetAll">Reset</button>
+          </div>
+        </div>
+      </section>
+
+    </div>
+
+    <!-- ABOUT — fixiert am unteren Rand -->
+    <div class="panel-footer">
       <div class="about-block">
         <div class="about-logo">⬡ HELLION NEWTAB</div>
-            <div class="about-version">Version 1.5.2 · 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">
@@ -328,48 +266,28 @@
         </div>
       </div>
     </div>
-      </section>
-
-      <!-- DANGER ZONE -->
-      <section class="settings-section" data-section="danger">
-        <button class="settings-section-title danger" type="button">
-          <span class="section-chevron">▸</span>
-          DANGER ZONE
-        </button>
-        <div class="section-content">
-          <div class="setting-row">
-            <div class="setting-info">
-              <span class="setting-label">Reset all data</span>
-              <span class="setting-desc">Deletes all boards and bookmarks</span>
-            </div>
-            <button class="btn-danger" id="btnResetAll">Reset</button>
-          </div>
-        </div>
-      </section>
-
-    </div>
   </aside>
 
   <!-- THEME PICKER MODAL -->
   <div class="modal-overlay" id="themeOverlay">
     <div class="theme-modal" id="themeModal">
       <div class="modal-header">
-        <span>Theme wählen</span>
+        <span>Darstellung</span>
         <button class="btn-close" id="btnCloseTheme">✕</button>
       </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>
@@ -379,48 +297,119 @@
           <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">BACKGROUND</h3>
+        <h3 class="settings-section-title">HINTERGRUND</h3>
         <div class="setting-row">
           <div class="setting-info">
-            <span class="setting-label">Background image URL</span>
+            <span class="setting-label">Bild-URL</span>
-            <span class="setting-desc">Custom wallpaper URL</span>
+            <span class="setting-desc">Eigenes Hintergrundbild per URL</span>
           </div>
-          <button class="btn-small" id="btnChangeBg">Change</button>
+          <button class="btn-small" id="btnChangeBg">Ändern</button>
         </div>
         <div class="setting-row hidden" id="bgInputRow">
-          <input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... or leave empty for default" />
+          <input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... oder leer für Standard" />
-          <button class="btn-small" id="btnApplyBg">Apply</button>
+          <button class="btn-small" id="btnApplyBg">Übernehmen</button>
         </div>
         <div class="setting-row">
           <div class="setting-info">
-            <span class="setting-label">Background file upload</span>
+            <span class="setting-label">Datei hochladen</span>
-            <span class="setting-desc">Use a local image as background</span>
+            <span class="setting-desc">Lokales Bild als Hintergrund verwenden</span>
           </div>
           <button class="btn-small" id="btnBgFile">Upload</button>
           <input type="file" id="bgFileInput" accept="image/*" class="hidden" />
         </div>
       </div>
+      <div class="theme-modal-section">
+        <h3 class="settings-section-title">DARSTELLUNG</h3>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Kompaktmodus</span>
+            <span class="setting-desc">Weniger Abstand für mehr Bookmarks</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Lange Titel kürzen</span>
+            <span class="setting-desc">Titel auf eine Zeile mit „…" kürzen</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Suchleiste anzeigen</span>
+            <span class="setting-desc">Suchleiste unter dem Header ein/aus</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingShowSearch" checked /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Links in neuem Tab</span>
+            <span class="setting-desc">Bookmarks in neuem Browser-Tab öffnen</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingNewTab" checked /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Beschreibungen anzeigen</span>
+            <span class="setting-desc">Gespeicherte Beschreibung unter Bookmarks</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <span class="setting-label">Bookmarks ausblenden</span>
+            <span class="setting-desc">Überzählige Bookmarks in langen Boards verstecken</span>
+          </div>
+          <label class="toggle"><input type="checkbox" id="settingHideExtra" /><span class="slider"></span></label>
+        </div>
+        <div class="setting-row" id="visibleCountRow">
+          <div class="setting-info">
+            <span class="setting-label">Sichtbare Bookmarks</span>
+            <span class="setting-desc">Anzahl vor dem Ausblenden</span>
+          </div>
+          <select class="select-input" id="settingVisibleCount">
+            <option value="5">5</option>
+            <option value="10" selected>10</option>
+            <option value="20">20</option>
+          </select>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -497,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
    ============================================ */
@@ -537,7 +628,13 @@ body.show-desc .bm-desc { display: block; }
   font-family: var(--font-display); font-size: 15px; font-weight: 600;
   letter-spacing: 2px; color: var(--accent); text-transform: uppercase;
 }
-.panel-body { flex: 1; overflow-y: auto; padding: 12px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+.panel-body { flex: 1; overflow-y: auto; padding: 12px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; min-height: 0; }
+.panel-footer {
+  flex-shrink: 0; border-top: 1px solid var(--border);
+  max-height: 45vh; overflow-y: auto;
+  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
+}
+.panel-footer .about-block { padding: 12px 18px 16px; }
 
 .settings-section { margin-bottom: 4px; }
 .settings-section-title {
@@ -606,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;
@@ -639,11 +739,12 @@ body.show-desc .bm-desc { display: block; }
 
 /* INPUTS */
 .select-input {
-  padding: 5px 8px; background: rgba(255,255,255,0.06);
+  padding: 5px 8px; background: var(--bg-board, rgba(255,255,255,0.06));
   border: 1px solid var(--border); border-radius: var(--radius-sm);
   color: var(--text-primary); font-family: var(--font-body); font-size: 12px;
   cursor: pointer; min-width: 70px;
 }
+.select-input option { background: var(--bg-primary, #0a0e17); color: var(--text-primary); }
 .select-input:focus { outline: none; border-color: var(--border-accent); }
 
 .text-input {
@@ -1794,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.7.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.7.0',
+      version: '1.11.1',
       exported: new Date().toISOString(),
       boards,
       settings,

src/js/onboarding.js

@@ -24,18 +24,20 @@ const Onboarding = {
     },
     {
       hero: '\uD83C\uDFA8',
-      title: '8 handgefertigte Themes',
+      title: '11 handgefertigte Themes',
-      text: 'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
+      text: 'Klicke auf den \u201ETheme\u201C Button im Header um dein Theme zu w\u00E4hlen. Jedes hat seinen eigenen Stil und Farbpalette.',
       showThemes: true
     },
     {
-      hero: '\u26A1',
+      hero: '\uD83E\uDDF0',
-      title: 'Weitere Features',
+      title: 'Widget-Toolbar',
       features: [
-        'Suchleiste mit Google, DuckDuckGo oder Bing',
+        'Die schwebenden Buttons rechts \u00F6ffnen Widgets',
-        'Widget-Toolbar rechts \u2014 Notes und Checklisten erstellen',
+        'Notes und Checklisten f\u00FCr schnelle Notizen',
-        'Notebook-Sidebar \u00FCber den \u201ENote\u201C Button oder die Toolbar',
+        'Taschenrechner mit History',
-        'Funktioniert komplett offline \u2014 alles lokal gespeichert'
+        'Timer/Countdown mit speicherbaren Presets',
+        'Bild-Referenz Widgets (aktivierbar in Settings)',
+        'Notebook-Sidebar zeigt alle Notes auf einen Blick'
       ]
     },
     {
@@ -43,10 +45,16 @@ const Onboarding = {
       title: 'Backups nicht vergessen!',
       text: 'Deine Daten sind lokal im Browser gespeichert. Wenn du Browserdaten l\u00F6schst, gehen sie verloren! Sichere regelm\u00E4\u00DFig \u00FCber Settings \u2192 Data \u2192 Export. Wir erinnern dich alle 7 Tage daran.'
     },
+    {
+      hero: '\uD83C\uDFAE',
+      title: 'Gaming Starter Board',
+      text: 'Spielst du Games wie Satisfactory, Factorio oder Star Citizen? Ich kann ein Board mit n\u00FCtzlichen Community-Links anlegen.',
+      interactive: 'gaming-board'
+    },
     {
       hero: '\uD83D\uDE80',
       title: 'Bereit!',
-      text: 'Klicke auf \u201E+ Board\u201C um dein erstes Board zu erstellen, oder nutze den \u201EImport\u201C Button im Header um deine Browser-Lesezeichen zu importieren.'
+      text: 'Erstelle dein erstes Board mit \u201E+ Board\u201C oder importiere deine Browser-Lesezeichen \u00FCber den Import-Button im Header. Viel Spa\u00DF!'
     }
   ],
 
@@ -119,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';
@@ -160,7 +168,27 @@ const Onboarding = {
       nav.appendChild(backBtn);
     }
 
-    if (isLast) {
+    if (slide.interactive === 'gaming-board') {
+      // Interaktive Slide: Zwei Buttons statt "Weiter"
+      const noBtn = document.createElement('button');
+      noBtn.className = 'btn-secondary';
+      noBtn.textContent = 'Nein danke';
+      noBtn.addEventListener('click', () => {
+        this.currentSlide++;
+        this._render();
+      });
+
+      const yesBtn = document.createElement('button');
+      yesBtn.className = 'btn-primary';
+      yesBtn.textContent = 'Ja, gerne';
+      yesBtn.addEventListener('click', async () => {
+        await this._createGamingBoard();
+        this.currentSlide++;
+        this._render();
+      });
+
+      nav.append(noBtn, yesBtn);
+    } else if (isLast) {
       const startBtn = document.createElement('button');
       startBtn.className = 'btn-primary';
       startBtn.textContent = 'Los geht\u2019s!';
@@ -181,6 +209,34 @@ const Onboarding = {
     modal.appendChild(footer);
   },
 
+  /**
+   * Gaming Starter Board erstellen
+   * Vorbefuelltes Board mit Community-Links fuer Factory/Space Games
+   */
+  async _createGamingBoard() {
+    const gamingBoard = {
+      id: uid(),
+      title: '\uD83C\uDFAE Gaming',
+      bookmarks: [
+        { id: uid(), title: 'Satisfactory Wiki', url: 'https://satisfactory.wiki.gg', desc: '' },
+        { id: uid(), title: 'Satisfactory Calculator', url: 'https://satisfactorytools.com', desc: '' },
+        { id: uid(), title: 'Factorio Wiki', url: 'https://wiki.factorio.com', desc: '' },
+        { id: uid(), title: 'Factorio Cheatsheet', url: 'https://factoriocheatsheet.com', desc: '' },
+        { id: uid(), title: 'Avorion Wiki', url: 'https://wiki.avorion.net', desc: '' },
+        { id: uid(), title: 'Minecraft Wiki', url: 'https://minecraft.wiki', desc: '' },
+        { id: uid(), title: 'Modrinth (Mods)', url: 'https://modrinth.com', desc: '' },
+        { id: uid(), title: 'Star Citizen Wiki', url: 'https://starcitizen.tools', desc: '' },
+        { id: uid(), title: 'UEX Corp (Trading)', url: 'https://uexcorp.space', desc: '' },
+        { id: uid(), title: 'Hellion TradeCenter', url: 'https://hellion-initiative.online/tradecenter', desc: 'Trade Center f\u00FCr Star Citizen' }
+      ],
+      blurred: false
+    };
+
+    boards.push(gamingBoard);
+    await saveBoards();
+    renderBoards();
+  },
+
   /** Keyboard-Navigation */
   _bindKeyboard() {
     this._keyHandler = (e) => {

src/js/settings.js

@@ -25,7 +25,7 @@ function closeThemeModal() {
 
 // ---- ACCORDION ----
 function initAccordion() {
-  const defaultOpen = new Set(['appearance', 'behavior', 'widgets', 'data', 'help']);
+  const defaultOpen = new Set(['widgets']);
   const sections = document.querySelectorAll('.settings-section[data-section]');
 
   sections.forEach(section => {

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) {