refactor(app): Sticky-Note durch Widget-System ersetzen

Migration alter Sticky-Daten in das neue Widget-System, Notes.init() statt initStickyNote(), Toolbar-Position in Settings, JSON-Export/Import um Notes erweitert, Onboarding-Text aktualisiert.
feat(widgets): Widget-System mit Notes, Checklisten und Notebook-Sidebar
2026-03-21 19:40:43 +01:00 · 2026-03-21 19:40:26 +01:00 · 2026-03-21 19:17:07 +01:00 · 2026-03-21 19:08:45 +01:00 · 2026-03-21 19:08:31 +01:00 · 2026-03-21 19:08:17 +01:00
34 changed files with 3228 additions and 637 deletions
@@ -18,43 +18,56 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v4
-      - name: HTML-Validierung (newtab.html existiert)
+      - name: Projektstruktur prüfen
        run: |
          echo "Prüfe Projektstruktur..."
          test -f manifest.json || (echo "FEHLER: manifest.json fehlt!" && exit 1)
          test -f manifest.firefox.json || (echo "FEHLER: manifest.firefox.json fehlt!" && exit 1)
          test -f manifest.opera.json || (echo "FEHLER: manifest.opera.json fehlt!" && exit 1)
          test -f newtab.html || (echo "FEHLER: newtab.html fehlt!" && exit 1)
          test -d src/js || (echo "FEHLER: src/js/ fehlt!" && exit 1)
          test -d src/js/opera || (echo "FEHLER: src/js/opera/ fehlt!" && exit 1)
          test -d src/css || (echo "FEHLER: src/css/ fehlt!" && exit 1)
          test -d assets/icons || (echo "FEHLER: assets/icons/ fehlt!" && exit 1)
          test -d assets/themes || (echo "FEHLER: assets/themes/ fehlt!" && exit 1)
          test -d assets/fonts || (echo "FEHLER: assets/fonts/ fehlt!" && exit 1)
          echo "Projektstruktur OK"
-      - name: Manifest-Validierung
+      - name: Manifest-Validierung (alle 3)
        run: |
-          echo "Prüfe manifest.json..."
+          echo "Prüfe Manifests..."
          python3 -c "
          import json, sys
          with open('manifest.json') as f:
              m = json.load(f)
-          assert m.get('manifest_version') == 3, 'Manifest V3 erwartet'
+          assert m.get('manifest_version') == 3, 'Chrome: Manifest V3 erwartet'
-          assert m.get('name'), 'Name fehlt'
+          assert m.get('name'), 'Chrome: Name fehlt'
-          assert m.get('version'), 'Version fehlt'
+          assert m.get('version'), 'Chrome: Version fehlt'
-          assert 'storage' in m.get('permissions', []), 'Storage Permission fehlt'
+          assert 'storage' in m.get('permissions', []), 'Chrome: Storage Permission fehlt'
          print('manifest.json (V3) OK — Version:', m['version'])
          with open('manifest.firefox.json') as f:
              mf = json.load(f)
-          assert mf.get('manifest_version') == 2, 'Firefox Manifest V2 erwartet'
+          assert mf.get('manifest_version') == 3, 'Firefox: Manifest V3 erwartet'
-          assert mf['version'] == m['version'], 'Versionen stimmen nicht überein!'
+          assert mf['version'] == m['version'], 'Firefox: Version stimmt nicht mit Chrome überein!'
-          print('manifest.firefox.json (V2) OK — Version:', mf['version'])
+          assert 'browser_specific_settings' in mf, 'Firefox: browser_specific_settings fehlt'
          print('manifest.firefox.json (V3) OK — Version:', mf['version'])
          with open('manifest.opera.json') as f:
              mo = json.load(f)
          assert mo.get('manifest_version') == 3, 'Opera: Manifest V3 erwartet'
          assert mo['version'] == m['version'], 'Opera: Version stimmt nicht mit Chrome überein!'
          assert 'tabs' in mo.get('permissions', []), 'Opera: Tabs Permission fehlt'
          assert 'background' in mo, 'Opera: Background Service Worker fehlt'
          print('manifest.opera.json (V3) OK — Version:', mo['version'])
          "
      - name: JavaScript Syntax-Check
        run: |
          echo "Prüfe JavaScript-Syntax..."
          ERRORS=0
-          for f in src/js/*.js; do
+          for f in src/js/*.js src/js/opera/*.js; do
            if ! node --check "$f" 2>&1; then
              echo "SYNTAX-FEHLER in $f"
              ERRORS=$((ERRORS + 1))
@@ -77,12 +90,18 @@ jobs:
        run: |
          MANIFEST_VER=$(python3 -c "import json; print(json.load(open('manifest.json'))['version'])")
          FIREFOX_VER=$(python3 -c "import json; print(json.load(open('manifest.firefox.json'))['version'])")
          OPERA_VER=$(python3 -c "import json; print(json.load(open('manifest.opera.json'))['version'])")
          HTML_VER=$(grep -oP 'Version \K[0-9]+\.[0-9]+\.[0-9]+' newtab.html || echo 'NICHT GEFUNDEN')
          echo "manifest.json:         $MANIFEST_VER"
          echo "manifest.firefox.json: $FIREFOX_VER"
          echo "manifest.opera.json:   $OPERA_VER"
          echo "newtab.html:           $HTML_VER"
          if [ "$MANIFEST_VER" != "$FIREFOX_VER" ]; then
-            echo "FEHLER: Versionen in Manifests stimmen nicht überein!"
+            echo "FEHLER: Chrome/Firefox Versionen stimmen nicht überein!"
            exit 1
          fi
          if [ "$MANIFEST_VER" != "$OPERA_VER" ]; then
            echo "FEHLER: Chrome/Opera Versionen stimmen nicht überein!"
            exit 1
          fi
          if [ "$MANIFEST_VER" != "$HTML_VER" ]; then
@@ -1,4 +1,4 @@
-# Release — erstellt ZIP-Pakete für Chrome und Firefox bei neuem Tag
+# Release — erstellt ZIP-Pakete für Chrome, Firefox und Opera bei neuem Tag
 name: Release
 on:
@@ -25,18 +25,25 @@ jobs:
        run: |
          mkdir -p dist
          zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip" \
-            manifest.json newtab.html src/ assets/ \
+            manifest.json newtab.html src/js/*.js src/css/ assets/ \
-            -x "*.git*" "dist/*" ".github/*"
+            -x "*.git*" "dist/*" ".github/*" "src/js/opera/*"
-      - name: Firefox ZIP erstellen (Manifest V2)
+      - name: Firefox ZIP erstellen (Manifest V3)
        run: |
          # manifest.firefox.json wird zu manifest.json für Firefox
          cp manifest.json manifest.chrome-backup.json
          cp manifest.firefox.json manifest.json
          zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip" \
-            manifest.json newtab.html src/ assets/ \
+            manifest.json newtab.html src/js/*.js src/css/ assets/ \
-            -x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.firefox.json"
+            -x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.firefox.json" "src/js/opera/*"
-          # Wiederherstellen
+          mv manifest.chrome-backup.json manifest.json
      - name: Opera/Opera GX ZIP erstellen (Manifest V3 + Workaround)
        run: |
          cp manifest.json manifest.chrome-backup.json
          cp manifest.opera.json manifest.json
          zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip" \
            manifest.json newtab.html src/js/*.js src/js/opera/ src/css/ assets/ \
            -x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.opera.json"
          mv manifest.chrome-backup.json manifest.json
      - name: SHA256 Checksummen erstellen
@@ -53,8 +60,9 @@ jobs:
            ## Hellion NewTab ${{ steps.version.outputs.tag }}
            ### Installation
-            - **Chrome / Edge / Brave / Opera / Vivaldi:** `hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip` herunterladen und entpacken
+            - **Chrome / Edge / Brave / Vivaldi:** `hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip`
-            - **Firefox:** `hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip` herunterladen und entpacken
+            - **Firefox:** `hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip`
            - **Opera / Opera GX:** `hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip`
            Siehe [README](README.md) für die vollständige Installationsanleitung.
@@ -63,5 +71,6 @@ jobs:
          files: |
            dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip
            dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip
            dist/hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip
            dist/checksums-sha256.txt
          generate_release_notes: true
@@ -2,7 +2,7 @@
 .DS_Store
 Thumbs.db
 desktop.ini
-
+CLAUDE.md
 # Editor
 .vscode/
 .idea/
@@ -14,6 +14,8 @@ dist/
 *.zip
 *.tar.gz
 node_modules/
 /xpi/
 v2-planning.md
 # Persönliche Backup-Dateien (nicht ins Repo)
 favorites_*.html
@@ -0,0 +1,92 @@
 # ⬡ Hellion Dashboard — Changelog
 Alle relevanten Änderungen pro Version. Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/).
 ---
 ### v1.5.2 — 21.03.2026
 #### Neue Features
 - **Custom Dialog-System** — Native `confirm()` und `alert()` durch Frosted-Glass-Dialoge ersetzt (`dialog.js`)
 - **Onboarding** — 6-stufiger Willkommens-Flow beim ersten Start mit Boards, Themes, Features und Backup-Hinweis
 - **Backup-Reminder** — Erinnert alle 7 Tage an JSON-Export, warnt vor Datenverlust bei Browser-Reset
 - **Theme-Modal** — Theme-Picker als eigenes Modal aus Settings ausgelagert, eigener Header-Button
 - **Accordion-Settings** — Alle Settings-Sektionen einklappbar mit Chevron (About/Danger Zone standardmäßig zu)
 #### Verbesserungen
 - Fonts von Google Fonts API auf lokale WOFF2-Dateien umgestellt (DSGVO)
 - Ungenutzte Font-Dateien entfernt (~388 KB gespart)
 - `innerHTML` komplett durch `createElement`/`createElementNS` ersetzt (XSS-Schutz)
 - SVG-Icons via `createElementNS` statt Inline-HTML
 - Drag & Drop: Inline-Styles durch CSS-Klassen ersetzt (`.drag-ghost`, `.drag-over`, `.dragging-source`)
 - Suchleisten-Toggle von DATA nach BEHAVIOR verschoben
 - Nicht implementiertes "Quick Save" UI-Element entfernt
 - Onboarding wiederholbar über Settings → Help
 #### Opera / Opera GX
 - `manifest.opera.json` hinzugefügt (MV3 mit Workaround-Skripten)
 - `src/js/opera/background.js` — Tab-Management gegen Opera Speed Dial
 - `src/js/opera/redirect.js` — Content Script Redirect bei `document_start`
 #### Firefox
 - `manifest.firefox.json` auf Manifest V3 migriert
 - `browser_specific_settings` mit Gecko-ID und `data_collection_permissions`
 #### Build & CI
 - GitHub Actions: Release erstellt jetzt 3 ZIP-Pakete (Chrome, Firefox, Opera)
 - Quality-Check prüft alle 3 Manifests und Opera-Ordner
 ---
 ### v1.2.0 — 20.03.2026
 - Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
 - JS in 10 Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
 - Firefox-Kompatibilität (`manifest.firefox.json`, Manifest V3)
 - Vivaldi bestätigt kompatibel
 - Theme-Bildpfade korrigiert (Settings Preview)
 - URL-Validierung bei Bookmark-Erstellung
 - JSON-Import mit Board- und Bookmark-Struktur-Validierung
 - XSS-Schutz: `createElement` statt `innerHTML` für Bookmarks
 - Storage-Quota-Prüfung mit Warnung bei 8 MB+
 - Event Delegation für Bookmark-Klicks (Performance)
 - Responsive Design (Tablet 768px, Smartphone 480px)
 - Sticky Note Header-Kollision behoben
 - FileReader-Fehlerbehandlung für Hintergrundbild-Upload
 - GitHub Actions: Security Scan, Code Quality, Release Automation
 - 3 Themes ersetzt: Astronaut → Nebula, Cosmic Clock → Crescent, Void Mage → Event Horizon
 - Alle Theme-Bilder lizenzrechtlich geprüft und dokumentiert
 - LICENSE (CC BY-NC-SA 4.0), SECURITY.md und DISCLAIMER.md hinzugefügt
 ---
 ### v1.1.0 — 20.03.2026
 - 5 neue Themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
 - Suchleiste (Google / DuckDuckGo / Bing)
 - Sticky Note Widget
 - JSON Export & Import
 - Datum neben der Uhr
 - About / Impressum in Settings
 - Board Blur-Funktion (Privat-Modus)
 - Drag & Drop auf Pointer Events umgestellt
 - Opera / Opera GX Kompatibilität
 ---
 ### v1.0.0 — 20.03.2026
 - Initiales Release
 - Boards & Bookmarks mit Drag & Drop
 - 3 Themes (Nebula, Crescent, Event Horizon)
 - HTML-Import (Browser-Lesezeichen)
 - Settings Panel
 ---
 **Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
@@ -44,4 +44,4 @@ Der Entwickler behält sich das Recht vor, diese Extension jederzeit zu ändern,
 ---
-**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
+**Hellion NewTab** — [Hellion Online Media - Florian Wathing](https://hellion-media.de) — JonKazama-Hellion
@@ -1,10 +1,11 @@
-# ⬡ Hellion NewTab v1.2.0
+# ⬡ Hellion Dashboard v1.5.2
-![Version](https://img.shields.io/badge/Version-1.2.0-blue)
+![Version](https://img.shields.io/badge/Version-1.5.2-blue)
 ![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla%20ES2020-F7DF1E?logo=javascript&logoColor=black)
-![Manifest](https://img.shields.io/badge/Manifest-V3%20%7C%20V2-green)
+![Manifest](https://img.shields.io/badge/Manifest-V3-green)
 ![License](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-orange)
 ![Privacy](https://img.shields.io/badge/Privacy-100%25%20Lokal-448f45)
 [![Ko-fi](https://img.shields.io/badge/Support-Ko--fi-ff5e5b?logo=ko-fi)](https://ko-fi.com/hellionmedia)
 **Kein Account. Kein Abo. Keine Cloud. Alle Daten bleiben 100% lokal.**
@@ -12,7 +13,7 @@ Ein persönlicher Bookmark-Dashboard als Browser-Extension.
 Boards, Drag & Drop, 8 Themes, Suchleiste, Sticky Notes — alles im Browser, alles offline.
 Keine externe Datenübertragung, keine Tracker, keine Analytics, keine Werbung.
-Entwickelt von **[Hellion Online Media](https://hellion-media.de)** — JonKazama-Hellion.
+Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion.
 ---
@@ -54,20 +55,20 @@ Was angezeigt wird, ist was gespeichert ist. Keine Magie.
 ### 8 Themes
 | Theme | Akzent | Stil |
-| --- | --- | --- |
+|---|---|---|
-| Nebula | Magenta | Cosmic Nebula |
+| Nebula | `#b359ff` Magenta | Cosmic Nebula |
-| Crescent | Gold | Minimalist Night |
+| Crescent | `#d4bd8a` Gold | Minimalist Night |
-| Event Horizon | Orange | Deep Space |
+| Event Horizon | `#9d5cff` Purple | Deep Space |
-| Merchantman | Teal | Industrial Sci-Fi |
+| Merchantman | `#2eb8b8` Emerald | Industrial Sci-Fi |
-| Julia & Jin | Blau | FFXIV Night |
+| Julia & Jin | `#7db3ff` Aetherial Blue | FFXIV Night |
-| SC Sunset | Amber | Planet-Side |
+| SC Sunset | `#ff8c3d` Amber | Planet-Side |
-| Hellion HUD | Grün | Circuit Board |
+| Hellion HUD | `#32ff6a` Neon Green | Circuit Board |
-| Hellion Energy | Matrix-Grün | Tactical |
+| Hellion Energy | `#1eff8e` Acid Green | Tactical |
 ### Bild-Credits
 | Theme | Quelle | Lizenz |
-| --- | --- | --- |
+|---|---|---|
 | Nebula | [Temel / mrwashingt0n](https://pixabay.com/de/users/mrwashingt0n-15745216/) auf Pixabay | Pixabay License (frei) |
 | Crescent | [Daniil Silantev](https://unsplash.com) auf Unsplash | Unsplash License (frei) |
 | Event Horizon | Eigenes Werk — Stillframe von [hellion-initiative.online](https://hellion-initiative.online) | Hellion Online Media |
@@ -77,55 +78,83 @@ Was angezeigt wird, ist was gespeichert ist. Keine Magie.
 | Hellion HUD | Eigenes Werk — AI-generiert und nachbearbeitet für hellion-media.de | Hellion Online Media |
 | Hellion Energy | Eigenes Werk — AI-generiert für hellion-media.de | Hellion Online Media |
-### Settings
+### Onboarding & Dialoge
 - 6-stufiger Willkommens-Flow beim ersten Start
 - Custom Frosted-Glass-Dialoge statt nativer Browser-Popups
 - Backup-Reminder alle 7 Tage (warnt vor Datenverlust bei Browser-Reset)
 ### Settings (Accordion)
 - Einklappbare Sektionen mit Chevron — About/Danger Zone standardmäßig geschlossen
 - Compact Mode — reduziert Abstände für mehr Bookmarks
 - Shorten Titles — kürzt lange Titel auf eine Zeile
 - Open in New Tab — Bookmarks in neuem Tab öffnen
 - Show Descriptions — Beschreibungen unter Bookmarks anzeigen
 - Hide Extra Bookmarks — Boards ab 5/10/20 Bookmarks einklappen
 - Hintergrundbild — URL oder lokaler Upload
 - Suchleiste ein/ausblenden
 - JSON Export / Import
 - Onboarding wiederholbar
 - Danger Zone — Reset aller Daten
 ### Theme-Picker (eigener Header-Button)
 - 8 Themes als zentriertes Modal
 - Hintergrundbild per URL oder lokaler Upload
 ---
 ## Browser-Kompatibilität
 | Browser | Status | Manifest |
-| --- | --- | --- |
+|---|---|---|
-| Chrome | Kompatibel | V3 (`manifest.json`) |
+| Chrome | ✅ Kompatibel | V3 (`manifest.json`) |
-| Edge | Kompatibel | V3 (`manifest.json`) |
+| Edge | ✅ Kompatibel | V3 (`manifest.json`) |
-| Brave | Kompatibel | V3 (`manifest.json`) |
+| Brave | ✅ Kompatibel | V3 (`manifest.json`) |
-| Opera | Kompatibel | V3 (`manifest.json`) |
+| Opera | ✅ Kompatibel | V3 (`manifest.opera.json`) |
-| Opera GX | Kompatibel | V3 (`manifest.json`) |
+| Opera GX | ✅ Kompatibel | V3 (`manifest.opera.json`) |
-| Vivaldi | Kompatibel | V3 (`manifest.json`) |
+| Vivaldi | ✅ Kompatibel | V3 (`manifest.json`) |
-| Firefox | Kompatibel | V2 (`manifest.firefox.json`) |
+| Firefox | ✅ Kompatibel | V3 (`manifest.firefox.json`) |
-> **Firefox-Hinweis:** Firefox verwendet aktuell Manifest V2. Mozilla arbeitet an MV3-Support —
+> **Firefox-Hinweis:** Ab v1.2.0 läuft die Extension auf Manifest V3 — identisch zu Chrome/Edge.
-> sobald stabil, wird die Extension migriert. MV2 wird von Mozilla weiterhin unterstützt.
+> `manifest.firefox.json` bleibt als separate Datei erhalten für Firefox-spezifische Anpassungen.
 ---
 ## Installation
-### Chrome / Edge / Brave / Opera / Opera GX / Vivaldi
+### Chrome / Edge / Brave / Vivaldi
 ```text
 1. Repository als ZIP herunterladen oder git clone
-2. chrome://extensions öffnen (oder edge:// / brave:// / opera://)
+2. chrome://extensions öffnen (bzw. edge:// / brave://)
 3. Entwicklermodus aktivieren
 4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt
 5. Neuen Tab öffnen
 ```
-### Firefox
+### Opera / Opera GX
 Firefox benötigt `manifest.json` im Format V2.
 ```bash
-# manifest.json durch Firefox-Version ersetzen:
+# manifest.opera.json als manifest.json verwenden:
 copy manifest.opera.json manifest.json   # Windows
 cp manifest.opera.json manifest.json     # Linux/Mac
 ```
 ```text
 1. opera://extensions öffnen
 2. Entwicklermodus aktivieren
 3. "Entpackte Erweiterung laden" → Ordner auswählen
 4. Neuen Tab öffnen
 ```
 > **Opera-Hinweis:** Opera GX priorisiert Speed Dial — der enthaltene Workaround
 > übernimmt die New-Tab-Seite zuverlässig. Details: [src/js/opera/README.md](src/js/opera/README.md)
 ### Firefox
 ```bash
 # manifest.firefox.json als manifest.json verwenden:
 copy manifest.firefox.json manifest.json   # Windows
 cp manifest.firefox.json manifest.json     # Linux/Mac
 ```
@@ -144,7 +173,7 @@ cp manifest.firefox.json manifest.json     # Linux/Mac
 ## Browser-Bookmarks exportieren & importieren
 | Browser | Export-Pfad |
-| --- | --- |
+|---|---|
 | Chrome / Edge | Einstellungen → Lesezeichen → Exportieren |
 | Firefox | Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren |
@@ -166,11 +195,11 @@ Die exportierte `.html`-Datei über den **Import**-Button in der Extension laden
 ## Tech-Stack
 | Komponente | Details |
-| --- | --- |
+|---|---|
 | Sprache | JavaScript (Vanilla ES2020, keine Frameworks) |
 | Styling | CSS Custom Properties (Theme-System) |
-| Fonts | Google Fonts (Rajdhani, Inter, Cinzel) |
+| Fonts | Lokale Fonts (Rajdhani, Inter, Cinzel) |
-| Storage | chrome.storage.local / localStorage Fallback |
+| Storage | `chrome.storage.local` / `localStorage` Fallback |
 | Favicons | Google Favicons API (`/s2/favicons`) |
 | Drag & Drop | Pointer Events API (nativ) |
 | Build | Kein Build-Schritt — direkt lauffähig |
@@ -182,10 +211,12 @@ Die exportierte `.html`-Datei über den **Import**-Button in der Extension laden
 ```text
 hellion-newtab/
-├── manifest.json                   # Chrome, Edge, Brave, Opera, Vivaldi (MV3)
+├── manifest.json                   # Chrome, Edge, Brave, Vivaldi (MV3)
-├── manifest.firefox.json           # Firefox (MV2)
+├── manifest.firefox.json           # Firefox (MV3)
 ├── manifest.opera.json             # Opera / Opera GX (MV3 + Workaround)
 ├── newtab.html                     # Haupt-HTML (UI-Struktur, Modals, Settings Panel)
 ├── LICENSE                         # CC BY-NC-SA 4.0
 ├── CHANGELOG.md                    # Versionshistorie
 ├── SECURITY.md                     # Sicherheitsrichtlinie und Meldeprozess
 ├── DISCLAIMER.md                   # Haftungsausschluss
 │
@@ -193,27 +224,25 @@ hellion-newtab/
 │   ├── js/
 │   │   ├── storage.js              # Storage Abstraction + Quota-Prüfung
 │   │   ├── state.js                # Globaler State, Defaults, Hilfsfunktionen
 │   │   ├── dialog.js               # Custom Dialog-System (HellionDialog.alert/confirm)
 │   │   ├── themes.js               # Theme-Definitionen & Anwendungslogik
 │   │   ├── boards.js               # Board/Bookmark Rendering, Event Delegation, Modals
 │   │   ├── drag.js                 # Drag & Drop (Pointer Events, Board + Bookmark)
-│   │   ├── settings.js             # Settings Panel (Toggles, Theme-Picker, Background)
+│   │   ├── settings.js             # Settings Panel, Theme-Modal, Accordion
 │   │   ├── search.js               # Suchleiste (Google, DuckDuckGo, Bing)
 │   │   ├── sticky.js               # Sticky Note Widget (Drag, Persist, Toggle)
 │   │   ├── data.js                 # JSON Export / Import mit Validierung
-│   │   └── app.js                  # Init, Clock, globale Events (Einstiegspunkt)
+│   │   ├── onboarding.js           # Mehrstufiger Willkommens-Flow
 │   │   ├── app.js                  # Init, Clock, globale Events (Einstiegspunkt)
 │   │   └── opera/                  # Opera GX Workaround-Skripte
 │   │       ├── background.js       # Tab-Management gegen Speed Dial
 │   │       └── redirect.js         # Content Script Redirect
 │   └── css/
 │       └── main.css                # Styles + Theme-System + Responsive Breakpoints
 │
 ├── assets/
 │   ├── fonts/                      # Lokale Fonts (Rajdhani, Inter, Cinzel)
 │   ├── themes/                     # 8 Theme-Hintergrundbilder
 │   │   ├── bg-nebula.jpg
 │   │   ├── bg-crescent.jpg
 │   │   ├── bg-event-horizon.jpg
 │   │   ├── bg-merchantman.webp
 │   │   ├── bg-julia-jin.png
 │   │   ├── bg-sc-sunset.jpg
 │   │   ├── bg-hellion-hud.png
 │   │   └── bg-hellion-energy.jpg
 │   └── icons/
 │       ├── icon16.png
 │       ├── icon48.png
@@ -223,16 +252,16 @@ hellion-newtab/
    └── workflows/
        ├── security.yml            # CodeQL-Analyse + Dependency Review
        ├── quality.yml             # Struktur, Manifest, Syntax, Versions-Konsistenz
-        └── release.yml             # ZIP-Pakete (Chrome + Firefox) + SHA256 Checksummen
+        └── release.yml             # ZIP-Pakete (Chrome + Firefox + Opera) + SHA256
 ```
 ### Design-Prinzipien
 - **Zero Dependencies** — Kein npm, kein Build, kein Framework. Direkt lauffähig
 - **Privacy First** — Alle Daten lokal, kein Server-Kontakt
- **Modular** — 10 JS-Dateien mit klarer Zuständigkeit
+- **Modular** — 12 JS-Dateien mit klarer Zuständigkeit
 - **Responsive** — Tablet (768px) und Smartphone (480px) Breakpoints
- **Secure** — createElement statt innerHTML, URL-Validierung, Storage-Fehlerbehandlung
+- **Secure** — `createElement` statt `innerHTML`, URL-Validierung, Storage-Fehlerbehandlung
 - **Event Delegation** — Ein Listener pro Board-Liste statt pro Bookmark (Performance)
 - **Theme-System** — CSS Custom Properties, 8 Themes, Custom-Background-Support
@@ -257,14 +286,14 @@ hellion-newtab/
 ### Release (`release.yml`)
 - **Trigger** — Bei Git-Tag (`v*`)
- **Pakete** — Chrome-ZIP (MV3) + Firefox-ZIP (MV2)
+- **Pakete** — Chrome-ZIP + Firefox-ZIP + Opera-ZIP (alle MV3)
 - **Checksummen** — SHA256 für alle Artefakte
 - **GitHub Release** — Automatisch mit Installationsanleitung
 ```bash
 # Release erstellen:
-git tag v1.2.0
+git tag v1.5.2
-git push origin v1.2.0
+git push origin v1.5.2
 # → GitHub Action erstellt automatisch Release mit ZIP-Dateien
 ```
@@ -304,57 +333,14 @@ Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
 Vollständige Lizenz: [LICENSE](LICENSE) | [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
 | | |
-| --- | --- |
+|---|---|
 | **Entwickler** | Florian Wathling |
 | **Unternehmen** | Hellion Online Media |
 | **Web** | [hellion-media.de](https://hellion-media.de) |
 | **Impressum** | [hellion-media.de/impressum](https://hellion-media.de/impressum) |
 | **Bug Reports** | [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de?subject=Hellion%20NewTab%20%E2%80%93%20Bug%20Report) |
 | **Security** | [SECURITY.md](SECURITY.md) |
-
+| **Support** | [Ko-fi](https://ko-fi.com/hellionmedia) |
 ---
 ## Changelog
 ### v1.2.0 — 20.03.2026
 - Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
 - JS in 10 Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
 - Firefox-Kompatibilität (`manifest.firefox.json`, Manifest V2)
 - Vivaldi bestätigt kompatibel
 - Theme-Bildpfade korrigiert (Settings Preview)
 - URL-Validierung bei Bookmark-Erstellung
 - JSON-Import mit Board- und Bookmark-Struktur-Validierung
 - XSS-Schutz: createElement statt innerHTML für Bookmarks
 - Storage-Quota-Prüfung mit Warnung bei 8 MB+
 - Event Delegation für Bookmark-Klicks (Performance)
 - Responsive Design (Tablet 768px, Smartphone 480px)
 - Sticky Note Header-Kollision behoben
 - FileReader-Fehlerbehandlung für Hintergrundbild-Upload
 - GitHub Actions: Security Scan, Code Quality, Release Automation
 - 3 Themes ersetzt: Astronaut → Nebula, Cosmic Clock → Crescent, Void Mage → Event Horizon
 - Alle Theme-Bilder lizenzrechtlich geprüft und dokumentiert
 - LICENSE (CC BY-NC-SA 4.0), SECURITY.md und DISCLAIMER.md hinzugefügt
 ### v1.1.0 — 20.03.2026
 - 5 neue Themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
 - Suchleiste (Google / DuckDuckGo / Bing)
 - Sticky Note Widget
 - JSON Export & Import
 - Datum neben der Uhr
 - About / Impressum in Settings
 - Board Blur-Funktion (Privat-Modus)
 - Drag & Drop auf Pointer Events umgestellt
 - Opera / Opera GX Kompatibilität
 ### v1.0.0 — 20.03.2026
 - Initiales Release
 - Boards & Bookmarks mit Drag & Drop
 - 3 Themes (Nebula, Crescent, Event Horizon)
 - HTML-Import (Browser-Lesezeichen)
 - Settings Panel
 ---
@@ -364,4 +350,6 @@ AI (Claude Code, Opus 4.6 von Anthropic) wurde als Hilfsmittel eingesetzt — f
 ---
 > Vollständige Versionshistorie: [CHANGELOG.md](CHANGELOG.md)
 **Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
@@ -73,4 +73,4 @@ Keine Permissions für: Tabs, History, Web Requests, Downloads, Clipboard oder H
 ---
-**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
+**Hellion Dashboard** — [Hellion Online Media - Florian Wathling](https://hellion-media.de) — JonKazama-Hellion
@@ -1,23 +1,37 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
  "name": "Hellion NewTab",
-  "version": "1.2.0",
+  "version": "1.5.2",
  "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
-  "author": "Florian Wathling – hellion-media.de",
+  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "storage",
    "bookmarks"
  ],
  "browser_specific_settings": {
    "gecko": {
      "id": "hellion-newtab@hellion-media.de",
-      "strict_min_version": "109.0"
+      "strict_min_version": "142.0",
      "data_collection_permissions": {
        "required": [
          "none"
        ]
      }
    }
  },
  "web_accessible_resources": [
    {
      "resources": ["assets/fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ],
  "icons": {
    "16":  "assets/icons/icon16.png",
    "48":  "assets/icons/icon48.png",
@@ -1,9 +1,9 @@
 {
  "manifest_version": 3,
  "name": "Hellion NewTab",
-  "version": "1.2.0",
+  "version": "1.5.2",
  "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
-  "author": "Florian Wathling – hellion-media.de",
+  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
@@ -12,6 +12,12 @@
    "storage",
    "bookmarks"
  ],
 "web_accessible_resources": [
    {
      "resources": ["assets/fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ],
  "icons": {
    "16":  "assets/icons/icon16.png",
    "48":  "assets/icons/icon48.png",
@@ -0,0 +1,47 @@
 {
  "manifest_version": 3,
  "name": "Hellion Dashboard (GX Native)",
  "version": "1.5.2",
  "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",
  "permissions": [
    "tabs",
    "storage",
    "bookmarks"
  ],
  "background": {
    "service_worker": "src/js/opera/background.js"
  },
  "content_scripts": [
    {
      "matches": [
        "https://*.opera.com/startpage*",
        "http://*.opera.com/startpage*"
      ],
      "js": ["src/js/opera/redirect.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
 "web_accessible_resources": [
    {
      "resources": ["assets/fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ],
  "action": {
    "default_title": "Hellion Dashboard"
  },
  "icons": {
    "16": "assets/icons/icon16.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  }
 }
@@ -3,10 +3,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Hellion NewTab</title>
+  <title>Hellion Dashboard</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="src/css/main.css" />
 </head>
 <body>
@@ -38,6 +35,10 @@
        <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">
        <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
      </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>
        Settings
@@ -58,25 +59,38 @@
    </div>
  </div>
-  <!-- STICKY NOTE -->
+  <!-- WIDGET TOOLBAR -->
-  <div class="sticky-note" id="stickyNote">
+  <div class="widget-toolbar" id="widgetToolbar">
-    <div class="sticky-note-header" id="stickyNoteHeader">
+    <button class="widget-toolbar-btn" data-action="new-note" title="Note erstellen">
-      <span class="sticky-note-title">
+      <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>
-        <svg width="11" height="11" 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>
+    </button>
-        Note
+    <button class="widget-toolbar-btn" data-action="new-checklist" title="Checkliste erstellen">
-      </span>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
-      <button class="sticky-note-close" id="stickyNoteClose">✕</button>
+    </button>
-    </div>
+    <button class="widget-toolbar-btn" data-action="notebook" title="Alle Notes">
-    <textarea class="sticky-note-body" id="stickyNoteBody" placeholder="Quick note…" spellcheck="false"></textarea>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
    </button>
  </div>
  <!-- NOTEBOOK SIDEBAR -->
  <div class="notebook-overlay" id="notebookOverlay"></div>
  <aside class="notebook-panel" id="notebookPanel">
    <div class="notebook-header">
      <span class="notebook-header-title">Notebook <span class="notebook-count" id="notebookCount">0 / 5</span></span>
      <button class="btn-close" id="btnCloseNotebook">✕</button>
    </div>
    <div class="notebook-slots" id="notebookSlots">
      <!-- dynamisch via JS -->
    </div>
  </aside>
  <!-- BOARDS CONTAINER -->
  <main class="boards-wrapper" id="boardsWrapper">
    <!-- dynamisch via JS -->
  </main>
  <!-- HIDDEN FILE INPUT FOR IMPORT -->
-  <input type="file" id="importInput" accept=".html,.htm" style="display:none" />
+  <input type="file" id="importInput" accept=".html,.htm" class="hidden" />
  <!-- SETTINGS PANEL -->
  <div class="panel-overlay" id="settingsOverlay"></div>
@@ -88,248 +102,308 @@
    <div class="panel-body">
      <!-- APPEARANCE -->
-      <section class="settings-section">
+      <section class="settings-section" data-section="appearance">
-        <!-- THEME PICKER -->
+        <button class="settings-section-title" type="button">
-        <h3 class="settings-section-title">THEME</h3>
+          <span class="section-chevron">▸</span>
-        <div class="theme-grid">
+          APPEARANCE
-          <div class="theme-card active" data-value="nebula">
+        </button>
-            <img class="theme-card-img" src="assets/themes/bg-nebula.jpg" alt="Nebula" />
+        <div class="section-content">
-            <span class="theme-card-label">Nebula</span>
+          <div class="setting-row">
-            <span class="theme-card-check">✓</span>
+            <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="theme-card" data-value="crescent">
+          <div class="setting-row">
-            <img class="theme-card-img" src="assets/themes/bg-crescent.jpg" alt="Crescent" />
+            <div class="setting-info">
-            <span class="theme-card-label">Crescent</span>
+              <span class="setting-label">Shorten long titles</span>
-            <span class="theme-card-check">✓</span>
+              <span class="setting-desc">Shorten title to one line with "…"</span>
-          </div>
+            </div>
-          <div class="theme-card" data-value="event-horizon">
+            <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
            <img class="theme-card-img" src="assets/themes/bg-event-horizon.jpg" alt="Event Horizon" />
            <span class="theme-card-label">Event Horizon</span>
            <span class="theme-card-check">✓</span>
          </div>
          <div class="theme-card" data-value="merchantman">
            <img class="theme-card-img" src="assets/themes/bg-merchantman.webp" alt="Merchantman" />
            <span class="theme-card-label">Merchantman</span>
            <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 & 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" />
            <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" />
            <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" />
            <span class="theme-card-label">Energy</span>
            <span class="theme-card-check">✓</span>
          </div>
        </div>
      </section>
-        <h3 class="settings-section-title">APPEARANCE</h3>
+      <!-- BEHAVIOR -->
-
+      <section class="settings-section" data-section="behavior">
-        <div class="setting-row">
+        <button class="settings-section-title" type="button">
-          <div class="setting-info">
+          <span class="section-chevron">▸</span>
-            <span class="setting-label">Compact mode</span>
+          BEHAVIOR
-            <span class="setting-desc">Reduce spacing to show more bookmarks</span>
+        </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>
-          <label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
+          <div class="setting-row">
-        </div>
+            <div class="setting-info">
-
+              <span class="setting-label">Show bookmark descriptions</span>
-        <div class="setting-row">
+              <span class="setting-desc">Display saved descriptions below bookmark titles</span>
-          <div class="setting-info">
+            </div>
-            <span class="setting-label">Shorten long titles</span>
+            <label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
-            <span class="setting-desc">Shorten title to one line with "…"</span>
+          </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>
          <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
        </div>
      </section>
      <!-- WIDGETS -->
      <section class="settings-section" data-section="widgets">
        <button class="settings-section-title" type="button">
          <span class="section-chevron">▸</span>
          WIDGETS
        </button>
        <div class="section-content">
          <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>
            </div>
            <select class="select-input" id="settingToolbarPos">
              <option value="right" selected>Rechts</option>
              <option value="left">Links</option>
            </select>
          </div>
        </div>
      </section>
      <!-- DATA -->
      <section class="settings-section" data-section="data">
        <button class="settings-section-title" type="button">
          <span class="section-chevron">▸</span>
          DATA
        </button>
        <div class="section-content">
          <div class="setting-row">
            <div class="setting-info">
              <span class="setting-label">Export Boards</span>
              <span class="setting-desc">Alle Boards 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-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>
      </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>
              <span class="setting-desc">Willkommens-Tour erneut anzeigen</span>
            </div>
            <button class="btn-small" id="btnRestartOnboarding">Start</button>
          </div>
        </div>
      </section>
      <!-- ABOUT / IMPRESSUM -->
      <section class="settings-section" data-section="about">
        <button class="settings-section-title" type="button">
          <span class="section-chevron">▸</span>
          ABOUT
        </button>
        <div class="section-content">
          <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-links">
              <a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                Impressum
              </a>
              <a href="https://hellion-media.de" target="_blank" class="about-link">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
                hellion-media.de
              </a>
            </div>
            <div class="about-divider"></div>
            <div class="about-info-row">
              <span class="about-info-label">Entwickler</span>
              <span class="about-info-value">Florian Wathling</span>
            </div>
            <div class="about-info-row">
              <span class="about-info-label">Unternehmen</span>
              <span class="about-info-value">Hellion Online Media</span>
            </div>
            <div class="about-info-row">
              <span class="about-info-label">Lizenz</span>
              <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="about-info-value about-link-subtle">CC BY-NC-SA 4.0</a>
            </div>
            <div class="about-info-row">
              <span class="about-info-label">Datenspeicherung</span>
              <span class="about-info-value">100% lokal · Kein Server · Kein Account</span>
            </div>
            <div class="about-divider"></div>
            <div class="about-bugreport">
              <span class="about-info-label about-info-label-block">Bug Report / Feedback</span>
              <a href="mailto:kontakt@hellion-media.de?subject=Hellion NewTab – Bug Report" class="about-link-mail">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                kontakt@hellion-media.de
              </a>
            </div>
            <div class="about-bugreport">
              <span class="about-info-label about-info-label-block">Support</span>
              <a href="https://ko-fi.com/hellionmedia" target="_blank" class="about-link">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
                Ko-fi — hellionmedia
              </a>
            </div>
            <div class="about-browsers">
              <span class="about-info-label about-info-label-block">Kompatible Browser</span>
              <div class="about-browser-tags">
                <span class="browser-tag">Chrome</span>
                <span class="browser-tag">Edge</span>
                <span class="browser-tag">Firefox</span>
                <span class="browser-tag">Opera</span>
                <span class="browser-tag">Opera GX</span>
                <span class="browser-tag">Brave</span>
                <span class="browser-tag">Vivaldi</span>
              </div>
            </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>
        <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" />
          <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" />
          <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" />
          <span class="theme-card-label">Event Horizon</span>
          <span class="theme-card-check">✓</span>
        </div>
        <div class="theme-card" data-value="merchantman">
          <img class="theme-card-img" src="assets/themes/bg-merchantman.webp" alt="Merchantman" />
          <span class="theme-card-label">Merchantman</span>
          <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" />
          <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" />
          <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" />
          <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" />
          <span class="theme-card-label">Energy</span>
          <span class="theme-card-check">✓</span>
        </div>
      </div>
      <div class="theme-modal-section">
        <h3 class="settings-section-title">BACKGROUND</h3>
        <div class="setting-row">
          <div class="setting-info">
-            <span class="setting-label">Background image</span>
+            <span class="setting-label">Background image URL</span>
-            <span class="setting-desc">Custom wallpaper URL or upload</span>
+            <span class="setting-desc">Custom wallpaper URL</span>
          </div>
          <button class="btn-small" id="btnChangeBg">Change</button>
        </div>
-
+        <div class="setting-row hidden" id="bgInputRow">
        <div class="setting-row" id="bgInputRow" style="display:none">
          <input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... or leave empty for default" />
          <button class="btn-small" id="btnApplyBg">Apply</button>
        </div>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label">Background file upload</span>
            <span class="setting-desc">Use a local image as background</span>
          </div>
          <button class="btn-small" id="btnBgFile">Upload</button>
-          <input type="file" id="bgFileInput" accept="image/*" style="display:none" />
+          <input type="file" id="bgFileInput" accept="image/*" class="hidden" />
        </div>
-
+      </div>
      </section>
      <!-- BEHAVIOR -->
      <section class="settings-section">
        <h3 class="settings-section-title">BEHAVIOR</h3>
        <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">Quick Save shortcut</span>
            <span class="setting-desc">Save current page to a board quickly</span>
          </div>
          <span class="setting-badge" id="quickSaveBadge">Not set</span>
        </div>
      </section>
      <!-- ABOUT / IMPRESSUM -->
      <section class="settings-section">
        <h3 class="settings-section-title">ABOUT</h3>
        <div class="about-block">
          <div class="about-logo">⬡ HELLION NEWTAB</div>
          <div class="about-version">Version 1.2.0 · by Hellion Online Media</div>
          <div class="about-links">
            <a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              Impressum
            </a>
            <a href="https://hellion-media.de" target="_blank" class="about-link">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
              hellion-media.de
            </a>
          </div>
          <div class="about-divider"></div>
          <div class="about-info-row">
            <span class="about-info-label">Entwickler</span>
            <span class="about-info-value">Florian Wathling</span>
          </div>
          <div class="about-info-row">
            <span class="about-info-label">Unternehmen</span>
            <span class="about-info-value">Hellion Online Media</span>
          </div>
          <div class="about-info-row">
            <span class="about-info-label">Lizenz</span>
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="about-info-value" style="color:var(--text-secondary);text-decoration:none">CC BY-NC-SA 4.0</a>
          </div>
          <div class="about-info-row">
            <span class="about-info-label">Datenspeicherung</span>
            <span class="about-info-value">100% lokal · Kein Server · Kein Account</span>
          </div>
          <div class="about-divider"></div>
          <div class="about-bugreport">
            <span class="about-info-label" style="display:block;margin-bottom:6px">Bug Report / Feedback</span>
            <a href="mailto:kontakt@hellion-media.de?subject=Hellion NewTab – Bug Report" class="about-link-mail">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              kontakt@hellion-media.de
            </a>
          </div>
          <div class="about-browsers">
            <span class="about-info-label" style="display:block;margin-bottom:6px">Kompatible Browser</span>
            <div class="about-browser-tags">
              <span class="browser-tag">Chrome</span>
              <span class="browser-tag">Edge</span>
              <span class="browser-tag">Firefox</span>
              <span class="browser-tag">Opera</span>
              <span class="browser-tag">Opera GX</span>
              <span class="browser-tag">Brave</span>
              <span class="browser-tag">Vivaldi</span>
            </div>
          </div>
        </div>
      </section>
      <!-- DATA -->
      <section class="settings-section">
        <h3 class="settings-section-title">DATA</h3>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label">Export Boards</span>
            <span class="setting-desc">Alle Boards 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-desc">JSON-Backup wiederherstellen</span>
          </div>
          <button class="btn-small" id="btnImportJSON">Import</button>
          <input type="file" id="jsonImportInput" accept=".json" style="display:none" />
        </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>
      </section>
      <!-- DANGER ZONE -->
      <section class="settings-section">
        <h3 class="settings-section-title danger">DANGER ZONE</h3>
        <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>
      </section>
    </div>
-  </aside>
+  </div>
  <!-- ADD BOARD MODAL -->
  <div class="modal-overlay" id="addBoardOverlay">
@@ -356,8 +430,8 @@
      </div>
      <div class="modal-body">
        <input type="text" class="text-input full-width" id="newBmTitle" placeholder="Title..." maxlength="60" />
-        <input type="url" class="text-input full-width" id="newBmUrl" placeholder="https://..." style="margin-top:8px" />
+        <input type="url" class="text-input full-width modal-input-spaced" id="newBmUrl" placeholder="https://..." />
-        <input type="text" class="text-input full-width" id="newBmDesc" placeholder="Description (optional)" style="margin-top:8px" />
+        <input type="text" class="text-input full-width modal-input-spaced" id="newBmDesc" placeholder="Description (optional)" />
      </div>
      <div class="modal-footer">
        <button class="btn-primary" id="btnConfirmBookmark">Add</button>
@@ -381,10 +455,17 @@
    </div>
  </div>
  <!-- ONBOARDING -->
  <div class="dialog-overlay" id="onboardingOverlay">
    <div class="onboarding-modal" id="onboardingModal"></div>
  </div>
  <!-- Storage muss zuerst -->
  <script src="src/js/storage.js"></script>
  <!-- State & Hilfsfunktionen -->
  <script src="src/js/state.js"></script>
  <!-- Dialog-System (vor Features, wird überall gebraucht) -->
  <script src="src/js/dialog.js"></script>
  <!-- Theme-System -->
  <script src="src/js/themes.js"></script>
  <!-- Features -->
@@ -392,8 +473,11 @@
  <script src="src/js/boards.js"></script>
  <script src="src/js/settings.js"></script>
  <script src="src/js/search.js"></script>
-  <script src="src/js/sticky.js"></script>
+  <script src="src/js/widgets.js"></script>
  <script src="src/js/notes.js"></script>
  <script src="src/js/data.js"></script>
  <!-- Onboarding -->
  <script src="src/js/onboarding.js"></script>
  <!-- Einstiegspunkt zuletzt -->
  <script src="src/js/app.js"></script>
 </body>
@@ -0,0 +1,101 @@
 # ⬡ Hellion Dashboard — Design & Theme-System
 Leitfaden für das visuelle Design des Hellion Dashboards. Definiert wie Themes aufgebaut
 sind und welche Patterns konsistent eingehalten werden — für eine immersive, fokussierte
 Nutzererfahrung.
 ---
 ## Design-Säulen
 | Säule | Beschreibung |
 |---|---|
 | **Immersion** | Das Interface wirkt wie ein HUD das über der Szenerie schwebt — kein Fremdkörper |
 | **Visual Clarity** | Gezielter `blur`-Einsatz trennt UI und Hintergrundbild — reduziert Reizüberflutung |
 | **Harmonie** | Jedes Theme zieht seine Farben aus den dominanten Lichtquellen des Hintergrundbildes |
 ---
 ## Anatomie eines Themes
 Jedes Theme folgt dieser Variablen-Struktur in `main.css`.
 Für ein neues Theme diesen Block kopieren und anpassen:
 ```css
 [data-theme="dein-theme-name"] {
  /* 1. AKZENTE — Die Lichtquelle */
  --accent:          #HEXCODE;             /* Hauptfarbe (Neon/Licht) */
  --accent-dim:      rgba(R, G, B, 0.12);  /* Subtiler Hintergrund */
  --accent-glow:     rgba(R, G, B, 0.08);  /* Glow für Logo & Uhr */
  --border-accent:   rgba(R, G, B, 0.25);  /* Fokus-Rahmen */
  /* 2. BASIS — Das Fundament */
  --bg-primary:      #HEXCODE;             /* Dunkelster Punkt im Bild */
  --bg-board:        rgba(R, G, B, 0.55);  /* Glas-Effekt der Boards */
  /* 3. TEXT — Kontrast */
  --text-primary:    #FFFFFF;              /* Klar lesbar, leicht getönt */
  --text-secondary:  #A0A0A0;             /* Entsättigt für weniger Rauschen */
  /* 4. OVERLAY — Vignette */
  --overlay-bg: radial-gradient(
    circle at center,
    transparent 0%,
    var(--bg-primary) 100%
  );
 }
 ```
 ---
 ## UI-Patterns
 ### Frosted Glass
 Hardware-beschleunigter Blur für Lesbarkeit auf komplexen Hintergründen:
 ```css
 backdrop-filter: blur(8px);
 ```
 Erzeugt Tiefe und visuelle Ruhe hinter Text und UI-Elementen.
 ### Typografie-Hierarchie
 | Font | Einsatz |
 |---|---|
 | **Rajdhani** | Display — Uhr, Titel, Logo. Alles was nach "System" aussieht |
 | **Inter** | Body — Bookmark-Titel, Listen, interaktive Elemente |
 | **Cinzel** | Fantasy — Exklusiv für Themes mit majestätischem oder antikem Vibe (Crescent, Julia & Jin) |
 ---
 ## Theme-Übersicht
 | Theme | Akzentfarbe | Stimmung |
 |---|---|---|
 | Nebula | `#b359ff` Magenta | Chill, Cosmic |
 | Crescent | `#d4bd8a` Gold | Luxury, Night |
 | Event Horizon | `#9d5cff` Purple | Deep Space, Void |
 | Merchantman | `#2eb8b8` Emerald | Industrial, Alien |
 | Julia & Jin | `#7db3ff` Aetherial Blue | FFXIV Night |
 | SC Sunset | `#ff8c3d` Amber | Emotional, Horizon |
 | Hellion HUD | `#32ff6a` Neon Green | Tactical, Admin |
 | Hellion Energy | `#1eff8e` Acid Green | Overdrive, Power |
 ---
 ## ADHS-Optimierung
 Bei Hintergrundbildern mit vielen Details (z.B. Julia & Jin) den Board-Alpha erhöhen
 und den Blur verstärken — das dimmt das Hintergrundrauschen und lässt das Gehirn
 schneller die relevanten Informationen erfassen:
 ```css
 --bg-board: rgba(R, G, B, 0.65);
 backdrop-filter: blur(12px);
 ```
 ---
 Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
@@ -16,9 +16,100 @@ async function init() {
  bindGlobalEvents();
  bindSettingsEvents();
  initSearch();
-  initStickyNote();
+  await migrateSticky();
  await Notes.init();
  initDataButtons();
  Store.checkQuota();
  // Onboarding beim ersten Start
  const onboardingDone = await Store.get('onboardingDone');
  if (!onboardingDone) {
    Onboarding.start();
  } else {
    // Backup-Reminder (nur wenn Onboarding schon durch ist)
    await checkBackupReminder();
  }
 }
 // ---- STICKY NOTE MIGRATION ----
 async function migrateSticky() {
  const stickyText = await Store.get('stickyNote');
  const stickyPos = await Store.get('stickyPos');
  const existingWidgets = await Store.get('widgetStates');
  // Nur migrieren wenn alte Daten vorhanden UND noch keine Widgets existieren
  if (!stickyText && !stickyPos) return;
  if (existingWidgets && Array.isArray(existingWidgets.notes) && existingWidgets.notes.length > 0) return;
  const noteData = {
    id: 'note_' + uid(),
    title: (stickyText || '').split('\n')[0].trim().slice(0, 20) || 'Note',
    content: stickyText || '',
    template: 'text',
    x: stickyPos ? stickyPos.x : 120,
    y: stickyPos ? stickyPos.y : 80,
    width: 280,
    height: 220,
    open: true,
    checkedItems: [],
    checklistItems: []
  };
  await Store.set('widgetStates', { notes: [noteData] });
  // Alte Keys aufraeumen
  try {
    if (typeof chrome !== 'undefined' && chrome.storage) {
      chrome.storage.local.remove(['stickyNote', 'stickyPos', 'stickyVisible']);
    } else {
      localStorage.removeItem('stickyNote');
      localStorage.removeItem('stickyPos');
      localStorage.removeItem('stickyVisible');
    }
  } catch (e) {
    console.warn('Sticky-Migration: Alte Keys konnten nicht entfernt werden', e);
  }
 }
 // ---- BACKUP REMINDER ----
 const BACKUP_INTERVAL_MS = 7 * 24 * 60 * 60 * 1000; // 7 Tage
 async function checkBackupReminder() {
  const lastReminder = await Store.get('lastBackupReminder');
  const now = Date.now();
  // Beim allerersten Mal: Timestamp setzen, aber noch nicht nerven
  if (!lastReminder) {
    await Store.set('lastBackupReminder', now);
    return;
  }
  if (now - lastReminder < BACKUP_INTERVAL_MS) return;
  // Nur erinnern wenn es Boards gibt die sich lohnen zu sichern
  if (boards.length === 0) return;
  const doBackup = await HellionDialog.confirm(
    'Du hast seit über einer Woche kein Backup gemacht. Beim Löschen der Browserdaten gehen deine Boards verloren. Jetzt sichern?',
    { type: 'warning', title: 'Backup-Erinnerung', confirmText: 'Jetzt sichern', cancelText: 'Später' }
  );
  if (doBackup) {
    // JSON-Export auslösen (gleiche Logik wie btnExportJSON)
    const widgetData = await Store.get('widgetStates');
    const notesData = (widgetData && Array.isArray(widgetData.notes)) ? widgetData.notes : [];
    const data = { version: '1.6.0', exported: new Date().toISOString(), boards, settings, notes: notesData };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url;
    a.download = 'hellion-newtab-backup-' + new Date().toISOString().slice(0, 10) + '.json';
    a.click();
    URL.revokeObjectURL(url);
  }
  // Timestamp immer aktualisieren (egal ob gesichert oder "Später")
  await Store.set('lastBackupReminder', now);
 }
 // ---- CLOCK & DATE ----
@@ -50,12 +141,18 @@ function bindGlobalEvents() {
    const file = e.target.files[0];
    if (!file) return;
    const imported = parseBookmarkHtml(await file.text());
-    if (imported.length === 0) { alert('Keine Bookmarks gefunden.'); return; }
+    if (imported.length === 0) {
      await HellionDialog.alert('Keine Bookmarks in dieser Datei gefunden.', { type: 'warning', title: 'Import' });
      return;
    }
    boards = [...boards, ...imported];
    await saveBoards();
    renderBoards();
    e.target.value = '';
-    alert(`✓ ${imported.length} Board(s) mit ${imported.reduce((s,b) => s + b.bookmarks.length, 0)} Bookmarks importiert.`);
+    await HellionDialog.alert(
      `${imported.length} Board(s) mit ${imported.reduce((s,b) => s + b.bookmarks.length, 0)} Bookmarks importiert.`,
      { type: 'success', title: 'Import erfolgreich' }
    );
  });
  // Add Board Modal
@@ -86,7 +183,7 @@ function bindGlobalEvents() {
    const url   = document.getElementById('newBmUrl').value.trim();
    const desc  = document.getElementById('newBmDesc').value.trim();
    if (!title || !url) return;
-    try { new URL(url); } catch { alert('Ungültige URL. Bitte mit https:// beginnen.'); return; }
+    try { new URL(url); } catch { await HellionDialog.alert('Ungültige URL. Bitte mit https:// beginnen.', { type: 'warning', title: 'URL ungültig' }); return; }
    const board = boards.find(b => b.id === pendingBookmarkBoardId);
    if (!board) return;
    board.bookmarks.push({ id: uid(), title, url, desc });
@@ -6,16 +6,67 @@
 let pendingBookmarkBoardId = null;
 let pendingRenameCallback  = null;
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /**
 * Erzeugt ein SVG-Element mit Attributen und Kinder-Elementen.
 * @param {string} tag - SVG-Tag (z.B. 'svg', 'circle', 'line')
 * @param {Object} attrs - Attribute als Key-Value
 * @param {Array} children - Kind-Elemente
 * @returns {SVGElement}
 */
 function svgEl(tag, attrs, children) {
  const el = document.createElementNS(SVG_NS, tag);
  if (attrs) {
    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
  }
  if (children) {
    for (const child of children) el.appendChild(child);
  }
  return el;
 }
 /** Erzeugt das 6-Punkt Drag-Handle SVG */
 function createDragHandleSvg() {
  return svgEl('svg', { width: '10', height: '14', viewBox: '0 0 10 14', fill: 'currentColor' }, [
    svgEl('circle', { cx: '2', cy: '2', r: '1.5' }),
    svgEl('circle', { cx: '8', cy: '2', r: '1.5' }),
    svgEl('circle', { cx: '2', cy: '7', r: '1.5' }),
    svgEl('circle', { cx: '8', cy: '7', r: '1.5' }),
    svgEl('circle', { cx: '2', cy: '12', r: '1.5' }),
    svgEl('circle', { cx: '8', cy: '12', r: '1.5' }),
  ]);
 }
 /** Erzeugt das Plus-Icon SVG */
 function createPlusSvg() {
  return svgEl('svg', { width: '11', height: '11', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' }, [
    svgEl('line', { x1: '12', y1: '5', x2: '12', y2: '19' }),
    svgEl('line', { x1: '5', y1: '12', x2: '19', y2: '12' }),
  ]);
 }
 // ---- RENDER ----
 function renderBoards() {
  const wrapper = document.getElementById('boardsWrapper');
-  wrapper.innerHTML = '';
+  wrapper.replaceChildren();
  if (boards.length === 0) {
-    wrapper.innerHTML = `<div class="empty-state">
+    const empty = document.createElement('div');
-      No boards yet. Click <strong style="color:var(--accent)">+ Board</strong> to create one,
+    empty.className = 'empty-state';
-      or use <strong style="color:var(--accent)">Import</strong> to load your browser bookmarks.
+
-    </div>`;
+    const boardStrong = document.createElement('strong');
    boardStrong.className = 'accent-text';
    boardStrong.textContent = '+ Board';
    const importStrong = document.createElement('strong');
    importStrong.className = 'accent-text';
    importStrong.textContent = 'Import';
    empty.append(
      'No boards yet. Click ', boardStrong, ' to create one, or use ', importStrong, ' to load your browser bookmarks.'
    );
    wrapper.appendChild(empty);
    return;
  }
@@ -31,43 +82,59 @@ function createBoardEl(board) {
  // Header
  const header = document.createElement('div');
  header.className = 'board-header';
-  header.innerHTML = `
+
-    <span class="board-drag-handle" title="Board verschieben">
+  const dragHandle = document.createElement('span');
-      <svg width="10" height="14" viewBox="0 0 10 14" fill="currentColor">
+  dragHandle.className = 'board-drag-handle';
-        <circle cx="2" cy="2" r="1.5"/><circle cx="8" cy="2" r="1.5"/>
+  dragHandle.title = 'Board verschieben';
-        <circle cx="2" cy="7" r="1.5"/><circle cx="8" cy="7" r="1.5"/>
+  dragHandle.appendChild(createDragHandleSvg());
-        <circle cx="2" cy="12" r="1.5"/><circle cx="8" cy="12" r="1.5"/>
+
-      </svg>
+  const titleSpanHeader = document.createElement('span');
-    </span>
+  titleSpanHeader.className = 'board-title';
-    <span class="board-title" title="${escHtml(board.title)}">${escHtml(board.title)}</span>
+  titleSpanHeader.title = board.title;
-    <div class="board-actions">
+  titleSpanHeader.textContent = board.title;
-      <button class="board-action-btn btn-blur-board"   title="${board.blurred ? 'Unblur' : 'Blur (privat)'}">🔒</button>
+
-      <button class="board-action-btn btn-rename-board" title="Umbenennen">✎</button>
+  const actions = document.createElement('div');
-      <button class="board-action-btn btn-delete-board" title="Löschen">✕</button>
+  actions.className = 'board-actions';
-    </div>
+
-  `;
+  const btnBlur = document.createElement('button');
  btnBlur.className = 'board-action-btn btn-blur-board';
  btnBlur.title = board.blurred ? 'Unblur' : 'Blur (privat)';
  btnBlur.textContent = '\uD83D\uDD12';
  const btnRename = document.createElement('button');
  btnRename.className = 'board-action-btn btn-rename-board';
  btnRename.title = 'Umbenennen';
  btnRename.textContent = '\u270E';
  const btnDelete = document.createElement('button');
  btnDelete.className = 'board-action-btn btn-delete-board';
  btnDelete.title = 'Löschen';
  btnDelete.textContent = '\u2715';
  actions.append(btnBlur, btnRename, btnDelete);
  header.append(dragHandle, titleSpanHeader, actions);
  // Blur-Overlay
  const blurOverlay = document.createElement('div');
  blurOverlay.className = 'board-blur-overlay';
  div.appendChild(blurOverlay);
-  header.querySelector('.btn-blur-board').addEventListener('click', async e => {
+  btnBlur.addEventListener('click', async e => {
    e.stopPropagation();
    board.blurred = !board.blurred;
    div.classList.toggle('blurred', board.blurred);
-    e.currentTarget.title = board.blurred ? 'Unblur' : 'Blur (privat)';
+    btnBlur.title = board.blurred ? 'Unblur' : 'Blur (privat)';
    await saveBoards();
  });
  blurOverlay.addEventListener('click', async () => {
    board.blurred = false;
    div.classList.remove('blurred');
-    header.querySelector('.btn-blur-board').title = 'Blur (privat)';
+    btnBlur.title = 'Blur (privat)';
    await saveBoards();
  });
-  header.querySelector('.btn-rename-board').addEventListener('click', e => {
+  btnRename.addEventListener('click', e => {
    e.stopPropagation();
    openRenameModal(board.title, async newName => {
      if (!newName.trim()) return;
@@ -77,11 +144,16 @@ function createBoardEl(board) {
    });
  });
-  header.querySelector('.btn-delete-board').addEventListener('click', e => {
+  btnDelete.addEventListener('click', async e => {
    e.stopPropagation();
-    if (confirm(`Board "${board.title}" löschen?`)) {
+    const ok = await HellionDialog.confirm(
      `Board "${board.title}" wirklich löschen?`,
      { type: 'danger', title: 'Board löschen', confirmText: 'Löschen' }
    );
    if (ok) {
      boards = boards.filter(b => b.id !== board.id);
-      saveBoards().then(renderBoards);
+      await saveBoards();
      renderBoards();
    }
  });
@@ -127,7 +199,8 @@ function createBoardEl(board) {
  // Add Bookmark
  const addBtn = document.createElement('button');
  addBtn.className = 'add-bm-btn';
-  addBtn.innerHTML = `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add link`;
+  addBtn.appendChild(createPlusSvg());
  addBtn.append(' Add link');
  addBtn.addEventListener('click', () => openAddBookmarkModal(board.id));
  div.appendChild(addBtn);
@@ -148,13 +221,12 @@ function createBmEl(bm) {
  favicon.height = 14;
  favicon.src = getFaviconUrl(bm.url);
  favicon.addEventListener('error', function() {
-    this.style.display = 'none';
+    this.classList.add('hidden');
-    this.nextElementSibling.style.display = 'flex';
+    this.nextElementSibling.classList.remove('hidden');
  });
  const fallback = document.createElement('div');
-  fallback.className = 'bm-favicon-fallback';
+  fallback.className = 'bm-favicon-fallback hidden';
  fallback.style.display = 'none';
  fallback.textContent = bm.title.charAt(0).toUpperCase();
  const textDiv = document.createElement('div');
@@ -9,9 +9,16 @@ function initDataButtons() {
  const jsonInput = document.getElementById('jsonImportInput');
  if (!btnExport || !btnImport) return;
-  // Export
+  // Export (inkl. Notes)
-  btnExport.addEventListener('click', () => {
+  btnExport.addEventListener('click', async () => {
-    const data = { version: '1.2.0', exported: new Date().toISOString(), boards, settings };
+    const widgetData = await Store.get('widgetStates');
    const data = {
      version: '1.6.0',
      exported: new Date().toISOString(),
      boards,
      settings,
      notes: widgetData && Array.isArray(widgetData.notes) ? widgetData.notes : []
    };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
@@ -42,13 +49,43 @@ function initDataButtons() {
        return true;
      });
      if (validBoards.length === 0) throw new Error('Keine gültigen Boards gefunden');
-      if (!confirm(`${validBoards.length} Boards importieren? Bestehende Daten bleiben erhalten.`)) return;
+      const ok = await HellionDialog.confirm(
        `${validBoards.length} Boards importieren? Bestehende Daten bleiben erhalten.`,
        { type: 'info', title: 'JSON Import' }
      );
      if (!ok) return;
      boards = [...boards, ...validBoards];
      await saveBoards();
      renderBoards();
-      alert(`✓ ${validBoards.length} Board(s) importiert.`);
+
      // Notes importieren (falls vorhanden)
      let notesImported = 0;
      if (Array.isArray(data.notes) && data.notes.length > 0) {
        const existingWidgets = await Store.get('widgetStates');
        const existingNotes = (existingWidgets && Array.isArray(existingWidgets.notes)) ? existingWidgets.notes : [];
        const importNotes = data.notes.filter(n => {
          if (!n || !n.id || !n.template) return false;
          n.checklistItems = Array.isArray(n.checklistItems) ? n.checklistItems : [];
          return true;
        });
        // Limit beachten
        const spaceLeft = Notes.MAX_NOTES - existingNotes.length;
        const toImport = importNotes.slice(0, spaceLeft);
        if (toImport.length > 0) {
          const merged = [...existingNotes, ...toImport];
          await Store.set('widgetStates', { notes: merged });
          Notes._notes = merged;
          notesImported = toImport.length;
        }
      }
      const noteMsg = notesImported > 0 ? ` + ${notesImported} Note(s)` : '';
      await HellionDialog.alert(
        `${validBoards.length} Board(s)${noteMsg} erfolgreich importiert.`,
        { type: 'success', title: 'Import erfolgreich' }
      );
    } catch (err) {
-      alert('Fehler beim Import: ' + err.message);
+      await HellionDialog.alert('Fehler beim Import: ' + err.message, { type: 'danger', title: 'Import fehlgeschlagen' });
    }
    e.target.value = '';
  });
@@ -0,0 +1,154 @@
 /* =============================================
   HELLION NEWTAB — dialog.js
   Custom Dialog System (ersetzt native alert/confirm)
   ============================================= */
 const HellionDialog = {
  /** SVG-Icons je nach Dialog-Typ */
  _icons: {
    info: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
    success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
    warning: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
    danger: '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>'
  },
  /**
   * Erzeugt das SVG-Icon-Element
   * @param {string} type - info | success | warning | danger
   * @returns {SVGElement}
   */
  _createIcon(type) {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', '20');
    svg.setAttribute('height', '20');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('fill', 'none');
    svg.setAttribute('stroke', 'currentColor');
    svg.setAttribute('stroke-width', '2');
    svg.setAttribute('stroke-linecap', 'round');
    svg.setAttribute('stroke-linejoin', 'round');
    svg.className.baseVal = 'dialog-icon type-' + type;
    // SVG-Pfade müssen per innerHTML gesetzt werden (kein User-Input, nur statische Pfade)
    svg.innerHTML = this._icons[type] || this._icons.info;
    return svg;
  },
  /**
   * Erstellt und zeigt einen Dialog
   * @param {Object} config
   * @returns {Promise<boolean>}
   */
  _show(config) {
    return new Promise(resolve => {
      const overlay = document.createElement('div');
      overlay.className = 'dialog-overlay';
      const box = document.createElement('div');
      box.className = 'dialog-box';
      // Header
      const header = document.createElement('div');
      header.className = 'dialog-header';
      header.appendChild(this._createIcon(config.type));
      const titleSpan = document.createElement('span');
      titleSpan.textContent = config.title;
      header.appendChild(titleSpan);
      // Body
      const body = document.createElement('div');
      body.className = 'dialog-body';
      body.textContent = config.message;
      // Actions
      const actions = document.createElement('div');
      actions.className = 'dialog-actions';
      function cleanup(result) {
        overlay.classList.remove('active');
        document.removeEventListener('keydown', keyHandler);
        setTimeout(() => overlay.remove(), 200);
        resolve(result);
      }
      // Cancel-Button (nur bei confirm)
      if (config.isConfirm) {
        const cancelBtn = document.createElement('button');
        cancelBtn.className = 'btn-secondary';
        cancelBtn.textContent = config.cancelText;
        cancelBtn.addEventListener('click', () => cleanup(false));
        actions.appendChild(cancelBtn);
      }
      // Confirm/OK-Button
      const confirmBtn = document.createElement('button');
      confirmBtn.className = config.type === 'danger' && config.isConfirm ? 'btn-danger' : 'btn-primary';
      confirmBtn.textContent = config.confirmText;
      confirmBtn.addEventListener('click', () => cleanup(config.isConfirm ? true : undefined));
      actions.appendChild(confirmBtn);
      box.append(header, body, actions);
      overlay.appendChild(box);
      // Overlay-Klick schließt
      overlay.addEventListener('click', e => {
        if (e.target === overlay) cleanup(config.isConfirm ? false : undefined);
      });
      // Keyboard
      function keyHandler(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          cleanup(config.isConfirm ? true : undefined);
        }
        if (e.key === 'Escape') {
          e.preventDefault();
          cleanup(config.isConfirm ? false : undefined);
        }
      }
      document.addEventListener('keydown', keyHandler);
      document.body.appendChild(overlay);
      // Nächster Frame für CSS-Transition
      requestAnimationFrame(() => {
        overlay.classList.add('active');
        confirmBtn.focus();
      });
    });
  },
  /**
   * Zeigt einen Alert-Dialog (ersetzt window.alert)
   * @param {string} message - Nachricht
   * @param {Object} [options] - { title, confirmText, type }
   * @returns {Promise<void>}
   */
  alert(message, options) {
    const opts = options || {};
    return this._show({
      message,
      title: opts.title || 'Hinweis',
      confirmText: opts.confirmText || 'OK',
      cancelText: '',
      type: opts.type || 'info',
      isConfirm: false
    });
  },
  /**
   * Zeigt einen Confirm-Dialog (ersetzt window.confirm)
   * @param {string} message - Nachricht
   * @param {Object} [options] - { title, confirmText, cancelText, type }
   * @returns {Promise<boolean>}
   */
  confirm(message, options) {
    const opts = options || {};
    return this._show({
      message,
      title: opts.title || 'Bestätigung',
      confirmText: opts.confirmText || 'OK',
      cancelText: opts.cancelText || 'Abbrechen',
      type: opts.type || 'info',
      isConfirm: true
    });
  }
 };
@@ -37,13 +37,11 @@ function initBoardDragDrop() {
      // Ghost
      const ghost = boardEl.cloneNode(true);
-      ghost.style.cssText = `
+      ghost.className += ' drag-ghost';
-        position:fixed; left:${rect.left}px; top:${rect.top}px;
+      ghost.style.left = rect.left + 'px';
-        width:${rect.width}px; height:${rect.height}px;
+      ghost.style.top = rect.top + 'px';
-        opacity:0.75; pointer-events:none; z-index:9999;
+      ghost.style.width = rect.width + 'px';
-        transform:rotate(1.5deg) scale(1.02);
+      ghost.style.height = rect.height + 'px';
        box-shadow:0 12px 40px rgba(0,0,0,0.6);
      `;
      document.body.appendChild(ghost);
      // Placeholder
@@ -104,29 +102,42 @@ function initBoardDragDrop() {
 function initBookmarkDragDrop(listEl, board) {
  let dragSrcBmId = null;
-  listEl.querySelectorAll('.bm-item').forEach(item => {
+  listEl.addEventListener('dragstart', e => {
-    item.addEventListener('dragstart', e => {
+    const item = e.target.closest('.bm-item');
-      dragSrcBmId = item.dataset.bmId;
+    if (!item) return;
-      e.dataTransfer.effectAllowed = 'move';
+    dragSrcBmId = item.dataset.bmId;
-      setTimeout(() => item.style.opacity = '0.4', 0);
+    e.dataTransfer.effectAllowed = 'move';
-    });
+    setTimeout(() => item.classList.add('dragging-source'), 0);
-    item.addEventListener('dragend',  () => { item.style.opacity = ''; });
+  });
-    item.addEventListener('dragover', e => {
+
-      e.preventDefault();
+  listEl.addEventListener('dragend', e => {
-      item.style.background = 'rgba(255,160,50,0.07)';
+    const item = e.target.closest('.bm-item');
-    });
+    if (item) item.classList.remove('dragging-source');
-    item.addEventListener('dragleave', () => { item.style.background = ''; });
+  });
-    item.addEventListener('drop', async e => {
+
-      e.preventDefault(); e.stopPropagation();
+  listEl.addEventListener('dragover', e => {
-      item.style.background = '';
+    e.preventDefault();
-      const targetBmId = item.dataset.bmId;
+    const item = e.target.closest('.bm-item');
-      if (!dragSrcBmId || dragSrcBmId === targetBmId) return;
+    if (item) item.classList.add('drag-over');
-      const srcIdx = board.bookmarks.findIndex(b => b.id === dragSrcBmId);
+  });
-      const tgtIdx = board.bookmarks.findIndex(b => b.id === targetBmId);
+
-      const [moved] = board.bookmarks.splice(srcIdx, 1);
+  listEl.addEventListener('dragleave', e => {
-      board.bookmarks.splice(tgtIdx, 0, moved);
+    const item = e.target.closest('.bm-item');
-      await saveBoards();
+    if (item) item.classList.remove('drag-over');
-      renderBoards();
+  });
-    });
+
  listEl.addEventListener('drop', async e => {
    e.preventDefault(); e.stopPropagation();
    const item = e.target.closest('.bm-item');
    if (!item) return;
    item.classList.remove('drag-over');
    const targetBmId = item.dataset.bmId;
    if (!dragSrcBmId || dragSrcBmId === targetBmId) return;
    const srcIdx = board.bookmarks.findIndex(b => b.id === dragSrcBmId);
    const tgtIdx = board.bookmarks.findIndex(b => b.id === targetBmId);
    const [moved] = board.bookmarks.splice(srcIdx, 1);
    board.bookmarks.splice(tgtIdx, 0, moved);
    await saveBoards();
    renderBoards();
  });
 }
@@ -0,0 +1,555 @@
 /* =============================================
   HELLION NEWTAB — notes.js
   Notes: Freitext, Checklisten, Notebook-Sidebar
   ============================================= */
 const Notes = {
  MAX_NOTES: 5,
  MAX_CHARS: 2500,
  STORAGE_KEY: 'widgetStates',
  /** @type {Array<Object>} */
  _notes: [],
  _saveTimer: null,
  /**
   * Notes aus Storage laden
   * @returns {Promise<Array>}
   */
  async load() {
    const data = await Store.get(this.STORAGE_KEY);
    if (data && Array.isArray(data.notes)) {
      this._notes = data.notes;
    }
    return this._notes;
  },
  /**
   * Alle Notes in Storage speichern
   */
  async save() {
    // Widget-States mit Note-Daten mergen
    const widgetStates = WidgetManager.save ? await WidgetManager.save() : [];
    // Note-Daten mit aktuellen Widget-Positionen mergen
    const merged = this._notes.map(note => {
      const ws = widgetStates.find(w => w.id === note.id);
      if (ws) {
        note.x = ws.x;
        note.y = ws.y;
        note.width = ws.width;
        note.height = ws.height;
        note.open = ws.open;
        note.title = ws.title;
      }
      return note;
    });
    await Store.set(this.STORAGE_KEY, { notes: merged });
  },
  /**
   * Debounced Save (fuer Auto-Save bei Input)
   */
  _debouncedSave() {
    clearTimeout(this._saveTimer);
    this._saveTimer = setTimeout(() => this.save(), 500);
  },
  /**
   * Neue Note erstellen
   * @param {'text'|'checklist'} template
   * @returns {Promise<string|null>} widget-id oder null bei vollem Limit
   */
  async create(template) {
    if (this._notes.length >= this.MAX_NOTES) {
      await HellionDialog.alert(
        'Maximale Anzahl erreicht! Du kannst maximal ' + this.MAX_NOTES + ' Notes gleichzeitig haben. Lösche eine bestehende Note um eine neue zu erstellen.',
        { type: 'warning', title: 'Limit erreicht' }
      );
      return null;
    }
    const noteData = {
      id: 'note_' + uid(),
      title: template === 'checklist' ? 'Checkliste' : 'Note',
      content: '',
      template: template,
      x: 120 + (this._notes.length * 30),
      y: 80 + (this._notes.length * 30),
      width: 280,
      height: 220,
      open: true,
      checkedItems: [],
      checklistItems: []
    };
    this._notes.push(noteData);
    // Widget erstellen
    const widgetId = WidgetManager.create('note', {
      id: noteData.id,
      title: noteData.title,
      x: noteData.x,
      y: noteData.y,
      width: noteData.width,
      height: noteData.height,
      open: true
    });
    // Body rendern
    const body = WidgetManager.getBody(widgetId);
    if (body) this.renderBody(noteData, body);
    await this.save();
    return widgetId;
  },
  /**
   * Note-Body rendern (in Widget-Body einfuegen)
   * @param {Object} noteData
   * @param {HTMLElement} bodyEl
   */
  renderBody(noteData, bodyEl) {
    bodyEl.textContent = '';
    if (noteData.template === 'checklist') {
      this._renderChecklistBody(noteData, bodyEl);
    } else {
      this._renderTextBody(noteData, bodyEl);
    }
  },
  /**
   * Freitext-Body: Textarea mit Zeichenzaehler
   * @param {Object} noteData
   * @param {HTMLElement} bodyEl
   */
  _renderTextBody(noteData, bodyEl) {
    const textarea = document.createElement('textarea');
    textarea.className = 'widget-textarea';
    textarea.placeholder = 'Notiz schreiben...';
    textarea.spellcheck = false;
    textarea.value = noteData.content || '';
    textarea.maxLength = this.MAX_CHARS;
    const counter = document.createElement('span');
    counter.className = 'widget-char-count';
    counter.textContent = (noteData.content || '').length + ' / ' + this.MAX_CHARS;
    textarea.addEventListener('input', () => {
      noteData.content = textarea.value;
      const len = textarea.value.length;
      counter.textContent = len + ' / ' + this.MAX_CHARS;
      counter.classList.toggle('limit', len >= this.MAX_CHARS);
      // Auto-Titel aus erster Zeile
      const firstLine = textarea.value.split('\n')[0].trim().slice(0, 20);
      if (firstLine) {
        noteData.title = firstLine;
        const widgetEntry = WidgetManager._widgets.get(noteData.id);
        if (widgetEntry) {
          const titleEl = widgetEntry.el.querySelector('.widget-title');
          if (titleEl && titleEl.contentEditable !== 'true') {
            titleEl.textContent = firstLine;
          }
          widgetEntry.state.title = firstLine;
        }
      }
      this._debouncedSave();
    });
    bodyEl.append(textarea, counter);
  },
  /**
   * Checklisten-Body: Items mit Checkboxen
   * @param {Object} noteData
   * @param {HTMLElement} bodyEl
   */
  _renderChecklistBody(noteData, bodyEl) {
    const list = document.createElement('ul');
    list.className = 'widget-checklist';
    // Bestehende Items rendern
    if (!Array.isArray(noteData.checklistItems)) {
      noteData.checklistItems = [];
    }
    const renderItems = () => {
      list.textContent = '';
      noteData.checklistItems.forEach((item, idx) => {
        const li = this._createChecklistItem(noteData, item, idx, renderItems);
        list.appendChild(li);
      });
    };
    renderItems();
    // Eingabefeld fuer neue Items
    const addRow = document.createElement('div');
    addRow.className = 'checklist-add';
    const addInput = document.createElement('input');
    addInput.className = 'checklist-add-input';
    addInput.type = 'text';
    addInput.placeholder = 'Neues Item...';
    addInput.maxLength = 100;
    addInput.addEventListener('keydown', async (e) => {
      if (e.key === 'Enter') {
        const text = addInput.value.trim();
        if (!text) return;
        noteData.checklistItems.push({ text, checked: false });
        addInput.value = '';
        renderItems();
        this._updateChecklistContent(noteData);
        await this.save();
      }
    });
    addRow.appendChild(addInput);
    bodyEl.append(list, addRow);
  },
  /**
   * Einzelnes Checklisten-Item erstellen
   * @param {Object} noteData
   * @param {Object} item - { text, checked }
   * @param {number} idx
   * @param {Function} rerenderFn
   * @returns {HTMLElement}
   */
  _createChecklistItem(noteData, item, idx, rerenderFn) {
    const li = document.createElement('li');
    li.className = 'checklist-item' + (item.checked ? ' checked' : '');
    const checkbox = document.createElement('span');
    checkbox.className = 'checklist-checkbox';
    checkbox.textContent = item.checked ? '\u2713' : '';
    checkbox.addEventListener('click', async () => {
      item.checked = !item.checked;
      li.classList.toggle('checked', item.checked);
      checkbox.textContent = item.checked ? '\u2713' : '';
      this._updateChecklistContent(noteData);
      await this.save();
    });
    const text = document.createElement('span');
    text.className = 'checklist-text';
    text.textContent = item.text;
    const removeBtn = document.createElement('button');
    removeBtn.className = 'checklist-remove';
    removeBtn.textContent = '\u2715';
    removeBtn.addEventListener('click', async () => {
      noteData.checklistItems.splice(idx, 1);
      rerenderFn();
      this._updateChecklistContent(noteData);
      await this.save();
    });
    li.append(checkbox, text, removeBtn);
    return li;
  },
  /**
   * Checklisten-Content fuer Export/Vorschau aktualisieren
   * @param {Object} noteData
   */
  _updateChecklistContent(noteData) {
    const total = noteData.checklistItems.length;
    const done = noteData.checklistItems.filter(i => i.checked).length;
    noteData.content = noteData.checklistItems.map(i => (i.checked ? '[x] ' : '[ ] ') + i.text).join('\n');
    // Auto-Titel: "X/Y erledigt" falls kein manueller Titel
    const widgetEntry = WidgetManager._widgets.get(noteData.id);
    if (widgetEntry) {
      const defaultTitle = done + '/' + total + ' erledigt';
      const titleEl = widgetEntry.el.querySelector('.widget-title');
      if (titleEl && titleEl.contentEditable !== 'true') {
        // Nur wenn Titel noch Standard ist
        if (noteData.title === 'Checkliste' || /^\d+\/\d+ erledigt$/.test(noteData.title)) {
          noteData.title = defaultTitle;
          titleEl.textContent = defaultTitle;
          widgetEntry.state.title = defaultTitle;
        }
      }
    }
  },
  /**
   * Note anhand ID finden
   * @param {string} id
   * @returns {Object|null}
   */
  getNote(id) {
    return this._notes.find(n => n.id === id) || null;
  },
  /**
   * Note loeschen
   * @param {string} id
   */
  async deleteNote(id) {
    const idx = this._notes.findIndex(n => n.id === id);
    if (idx === -1) return;
    const ok = await HellionDialog.confirm(
      'Note endgültig löschen? Das kann nicht rückgängig gemacht werden.',
      { type: 'danger', title: 'Note löschen', confirmText: 'Löschen' }
    );
    if (!ok) return;
    this._notes.splice(idx, 1);
    WidgetManager.close(id);
    await this.save();
  },
  /**
   * Note als .md exportieren
   * @param {Object} noteData
   */
  exportNote(noteData) {
    let md = '# ' + noteData.title + '\n\n';
    if (noteData.template === 'checklist') {
      noteData.checklistItems.forEach(item => {
        md += (item.checked ? '- [x] ' : '- [ ] ') + item.text + '\n';
      });
    } else {
      md += noteData.content || '';
    }
    md += '\n\n---\n*Exportiert aus Hellion Dashboard*\n';
    const blob = new Blob([md], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = (noteData.title || 'note').replace(/[^a-zA-Z0-9äöüÄÖÜß_-]/g, '_') + '.md';
    a.click();
    URL.revokeObjectURL(url);
  },
  // ---- NOTEBOOK SIDEBAR ----
  /**
   * Notebook-Sidebar oeffnen
   */
  openNotebook() {
    const overlay = document.getElementById('notebookOverlay');
    const panel = document.getElementById('notebookPanel');
    if (overlay) overlay.classList.add('active');
    if (panel) panel.classList.add('open');
    this._renderNotebookSlots();
  },
  /**
   * Notebook-Sidebar schliessen
   */
  closeNotebook() {
    const overlay = document.getElementById('notebookOverlay');
    const panel = document.getElementById('notebookPanel');
    if (overlay) overlay.classList.remove('active');
    if (panel) panel.classList.remove('open');
  },
  /**
   * Notebook-Slots rendern
   */
  _renderNotebookSlots() {
    const container = document.getElementById('notebookSlots');
    const countEl = document.getElementById('notebookCount');
    if (!container) return;
    container.textContent = '';
    if (countEl) countEl.textContent = this._notes.length + ' / ' + this.MAX_NOTES;
    // Belegte Slots
    this._notes.forEach(note => {
      const slot = this._createNotebookSlot(note);
      container.appendChild(slot);
    });
    // Leere Slots
    const remaining = this.MAX_NOTES - this._notes.length;
    for (let i = 0; i < remaining; i++) {
      const emptySlot = this._createEmptySlot();
      container.appendChild(emptySlot);
    }
  },
  /**
   * Belegten Notebook-Slot erstellen
   * @param {Object} note
   * @returns {HTMLElement}
   */
  _createNotebookSlot(note) {
    const slot = document.createElement('div');
    slot.className = 'notebook-slot';
    // Header
    const header = document.createElement('div');
    header.className = 'notebook-slot-header';
    const title = document.createElement('span');
    title.className = 'notebook-slot-title';
    const typeIcon = document.createElement('span');
    typeIcon.className = 'notebook-slot-type';
    typeIcon.textContent = note.template === 'checklist' ? '\u2611' : '\u270E';
    title.append(typeIcon);
    title.append(document.createTextNode(' ' + note.title));
    header.appendChild(title);
    // Preview
    const preview = document.createElement('div');
    preview.className = 'notebook-slot-preview';
    if (note.template === 'checklist') {
      const total = note.checklistItems ? note.checklistItems.length : 0;
      const done = note.checklistItems ? note.checklistItems.filter(i => i.checked).length : 0;
      preview.textContent = done + '/' + total + ' erledigt';
    } else {
      preview.textContent = (note.content || '').slice(0, 50) || 'Leer';
    }
    // Actions
    const actions = document.createElement('div');
    actions.className = 'notebook-slot-actions';
    const btnExport = document.createElement('button');
    btnExport.className = 'notebook-slot-btn';
    btnExport.textContent = 'Export';
    btnExport.addEventListener('click', (e) => {
      e.stopPropagation();
      this.exportNote(note);
    });
    const btnDelete = document.createElement('button');
    btnDelete.className = 'notebook-slot-btn danger';
    btnDelete.textContent = '\uD83D\uDDD1';
    btnDelete.addEventListener('click', async (e) => {
      e.stopPropagation();
      await this.deleteNote(note.id);
      this._renderNotebookSlots();
    });
    actions.append(btnExport, btnDelete);
    slot.append(header, preview, actions);
    // Klick oeffnet Note als Widget
    slot.addEventListener('click', async () => {
      if (WidgetManager.isOpen(note.id)) {
        WidgetManager.bringToFront(note.id);
      } else {
        await WidgetManager.openWidget(note.id);
      }
      this.closeNotebook();
    });
    return slot;
  },
  /**
   * Leeren Notebook-Slot erstellen
   * @returns {HTMLElement}
   */
  _createEmptySlot() {
    const slot = document.createElement('div');
    slot.className = 'notebook-slot-empty';
    const label = document.createElement('span');
    label.textContent = '+ Note erstellen';
    slot.appendChild(label);
    // Klick zeigt Typ-Auswahl
    let chooserOpen = false;
    slot.addEventListener('click', () => {
      if (chooserOpen) return;
      chooserOpen = true;
      label.style.display = 'none';
      const chooser = document.createElement('div');
      chooser.className = 'notebook-type-chooser';
      const btnText = document.createElement('button');
      btnText.className = 'notebook-type-btn';
      btnText.textContent = '\u270E Freitext';
      btnText.addEventListener('click', async (e) => {
        e.stopPropagation();
        await this.create('text');
        this._renderNotebookSlots();
      });
      const btnCheck = document.createElement('button');
      btnCheck.className = 'notebook-type-btn';
      btnCheck.textContent = '\u2611 Checkliste';
      btnCheck.addEventListener('click', async (e) => {
        e.stopPropagation();
        await this.create('checklist');
        this._renderNotebookSlots();
      });
      chooser.append(btnText, btnCheck);
      slot.appendChild(chooser);
    });
    return slot;
  },
  // ---- TOOLBAR EVENTS ----
  /**
   * Widget-Toolbar initialisieren
   */
  initToolbar() {
    const toolbar = document.getElementById('widgetToolbar');
    if (!toolbar) return;
    toolbar.addEventListener('click', async (e) => {
      const btn = e.target.closest('.widget-toolbar-btn');
      if (!btn) return;
      const action = btn.dataset.action;
      if (action === 'new-note') {
        await this.create('text');
      } else if (action === 'new-checklist') {
        await this.create('checklist');
      } else if (action === 'notebook') {
        this.openNotebook();
      }
    });
  },
  // ---- INIT ----
  /**
   * Notes-System initialisieren (ersetzt initStickyNote)
   */
  async init() {
    await this.load();
    // Widgets wiederherstellen
    await WidgetManager.restore((noteData, bodyEl) => {
      this.renderBody(noteData, bodyEl);
    });
    // Toolbar initialisieren
    this.initToolbar();
    // Notebook-Sidebar Events
    const notebookOverlay = document.getElementById('notebookOverlay');
    if (notebookOverlay) {
      notebookOverlay.addEventListener('click', () => this.closeNotebook());
    }
    const btnCloseNotebook = document.getElementById('btnCloseNotebook');
    if (btnCloseNotebook) {
      btnCloseNotebook.addEventListener('click', () => this.closeNotebook());
    }
    // Header btnNote oeffnet Notebook
    const btnNote = document.getElementById('btnNote');
    if (btnNote) {
      btnNote.addEventListener('click', () => this.openNotebook());
    }
  }
 };
@@ -0,0 +1,208 @@
 /* =============================================
   HELLION NEWTAB — onboarding.js
   Mehrstufiger Willkommens-Flow beim ersten Start
   ============================================= */
 const Onboarding = {
  currentSlide: 0,
  slides: [
    {
      hero: '\u2B21',
      title: 'Willkommen bei Hellion Dashboard',
      text: 'Dein neuer Browser-Startbildschirm. Minimalistisch, schnell und vollst\u00E4ndig lokal \u2014 keine Cloud, kein Account, keine Datensammlung.'
    },
    {
      hero: '\uD83D\uDCCB',
      title: 'Boards & Bookmarks',
      features: [
        'Erstelle Boards mit dem \u201E+ Board\u201C Button oben',
        'Importiere Browser-Lesezeichen \u00FCber den \u201EImport\u201C Button im Header',
        'Drag & Drop zum Umsortieren von Boards und Links',
        'Blur-Modus f\u00FCr private Boards (\uD83D\uDD12 Icon)'
      ]
    },
    {
      hero: '\uD83C\uDFA8',
      title: '8 handgefertigte Themes',
      text: 'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
      showThemes: true
    },
    {
      hero: '\u26A1',
      title: 'Weitere Features',
      features: [
        'Suchleiste mit Google, DuckDuckGo oder Bing',
        'Widget-Toolbar rechts \u2014 Notes und Checklisten erstellen',
        'Notebook-Sidebar \u00FCber den \u201ENote\u201C Button oder die Toolbar',
        'Funktioniert komplett offline \u2014 alles lokal gespeichert'
      ]
    },
    {
      hero: '\uD83D\uDEE1\uFE0F',
      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: '\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.'
    }
  ],
  /** Startet das Onboarding */
  start() {
    this.currentSlide = 0;
    this._render();
    this._bindKeyboard();
    const overlay = document.getElementById('onboardingOverlay');
    requestAnimationFrame(() => overlay.classList.add('active'));
  },
  /** Schlie\u00DFt das Onboarding und speichert den Status */
  async _finish() {
    const overlay = document.getElementById('onboardingOverlay');
    overlay.classList.remove('active');
    document.removeEventListener('keydown', this._keyHandler);
    await Store.set('onboardingDone', true);
  },
  /** Rendert den aktuellen Slide */
  _render() {
    const modal = document.getElementById('onboardingModal');
    modal.replaceChildren();
    const slide = this.slides[this.currentSlide];
    const isLast = this.currentSlide === this.slides.length - 1;
    // Skip-Button (nicht auf letztem Slide)
    if (!isLast) {
      const skip = document.createElement('button');
      skip.className = 'onboarding-skip';
      skip.textContent = '\u00DCberspringen';
      skip.addEventListener('click', () => this._finish());
      modal.appendChild(skip);
    }
    // Slide-Content
    const slideEl = document.createElement('div');
    slideEl.className = 'onboarding-slide';
    const hero = document.createElement('div');
    hero.className = 'onboarding-hero';
    hero.textContent = slide.hero;
    slideEl.appendChild(hero);
    const title = document.createElement('div');
    title.className = 'onboarding-title';
    title.textContent = slide.title;
    slideEl.appendChild(title);
    if (slide.text) {
      const text = document.createElement('div');
      text.className = 'onboarding-text';
      text.textContent = slide.text;
      slideEl.appendChild(text);
    }
    if (slide.features) {
      const list = document.createElement('ul');
      list.className = 'onboarding-feature-list';
      slide.features.forEach(f => {
        const li = document.createElement('li');
        li.textContent = f;
        list.appendChild(li);
      });
      slideEl.appendChild(list);
    }
    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'];
      themeNames.forEach(name => {
        const chip = document.createElement('div');
        chip.className = 'onboarding-theme-chip';
        chip.textContent = name;
        grid.appendChild(chip);
      });
      slideEl.appendChild(grid);
    }
    modal.appendChild(slideEl);
    // Footer
    const footer = document.createElement('div');
    footer.className = 'onboarding-footer';
    // Dots
    const dots = document.createElement('div');
    dots.className = 'onboarding-dots';
    for (let i = 0; i < this.slides.length; i++) {
      const dot = document.createElement('div');
      dot.className = 'onboarding-dot' + (i === this.currentSlide ? ' active' : '');
      dots.appendChild(dot);
    }
    footer.appendChild(dots);
    // Navigation
    const nav = document.createElement('div');
    nav.className = 'onboarding-nav';
    if (this.currentSlide > 0) {
      const backBtn = document.createElement('button');
      backBtn.className = 'btn-secondary';
      backBtn.textContent = 'Zur\u00FCck';
      backBtn.addEventListener('click', () => {
        this.currentSlide--;
        this._render();
      });
      nav.appendChild(backBtn);
    }
    if (isLast) {
      const startBtn = document.createElement('button');
      startBtn.className = 'btn-primary';
      startBtn.textContent = 'Los geht\u2019s!';
      startBtn.addEventListener('click', () => this._finish());
      nav.appendChild(startBtn);
    } else {
      const nextBtn = document.createElement('button');
      nextBtn.className = 'btn-primary';
      nextBtn.textContent = 'Weiter';
      nextBtn.addEventListener('click', () => {
        this.currentSlide++;
        this._render();
      });
      nav.appendChild(nextBtn);
    }
    footer.appendChild(nav);
    modal.appendChild(footer);
  },
  /** Keyboard-Navigation */
  _bindKeyboard() {
    this._keyHandler = (e) => {
      if (e.key === 'ArrowRight' || e.key === 'Enter') {
        e.preventDefault();
        if (this.currentSlide < this.slides.length - 1) {
          this.currentSlide++;
          this._render();
        } else {
          this._finish();
        }
      }
      if (e.key === 'ArrowLeft' && this.currentSlide > 0) {
        e.preventDefault();
        this.currentSlide--;
        this._render();
      }
      if (e.key === 'Escape') {
        e.preventDefault();
        this._finish();
      }
    };
    document.addEventListener('keydown', this._keyHandler);
  }
 };
@@ -0,0 +1,47 @@
 # ⬡ Opera GX — New-Tab Workaround
 Opera GX priorisiert die eigene Speed Dial Seite und ignoriert `chrome_url_overrides`
 für entpackte Erweiterungen. Um das Hellion Dashboard trotzdem als New-Tab-Seite
 zu etablieren, kommen zwei zusätzliche Skripte zum Einsatz.
 ---
 ## Warum zwei extra Skripte?
 | Browser | New-Tab Override | Zusatzaufwand |
 |---|---|---|
 | Chrome / Edge / Brave / Vivaldi | `chrome_url_overrides` | Keiner |
 | Firefox | `chrome_url_overrides` (MV2) | Eigenes Manifest |
 | Opera / Opera GX | Blockiert durch Speed Dial | Workaround nötig |
 ---
 ## Was passiert hier?
 ### `background.js` — Tab-Management
 Überwacht Tab-Aktivitäten im Hintergrund und greift ein bevor Opera seine Startseite lädt.
 - Erkennt `opera://startpage/` und `chrome://startpage/`
 - Leitet per `chrome.tabs.update` auf `newtab.html` um
 - Prüft zusätzlich bei `onActivated` — auch im Hintergrund geladene Tabs werden sofort aktualisiert
 ### `redirect.js` — In-Page Redirect
 Einige Opera-Systemprozesse sind so isoliert dass ein externer Eingriff nicht zuverlässig greift.
 - Wird als Content Script in Opera-Startseiten-Bereiche injiziert
 - Löst den Redirect bei `document_start` aus — minimale Verzögerung, kein Flackern
 ---
 ## Datenschutz
 Kein Tracking, keine Speicherung, keine externen Requests.
 Ausschließlich Standard-Browser-APIs — `chrome.tabs` — um die Kontrolle über den New Tab zurückzugewinnen.
 **100% lokal. 0% Analytics. Wie im gesamten Hellion NewTab Projekt.**
 ---
 Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
@@ -0,0 +1,34 @@
 const dashboardUrl = chrome.runtime.getURL("newtab.html");
 // Diese URLs wollen wir abfangen
 const targetUrls = [
    "chrome://startpage/",
    "opera://startpage/",
    "chrome://startpageshared/",
    "about:blank"
 ];
 function forceRedirect(tabId, url) {
    if (url && targetUrls.some(target => url.startsWith(target))) {
        chrome.tabs.update(tabId, { url: dashboardUrl });
    }
 }
 // 1. Check beim Erstellen
 chrome.tabs.onCreated.addListener((tab) => {
    forceRedirect(tab.id, tab.pendingUrl || tab.url);
 });
 // 2. Check beim Aktualisieren (Wichtig für Opera GX!)
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === "loading" || changeInfo.url) {
        forceRedirect(tabId, tab.url);
    }
 });
 // 3. Intervall-Check: Falls Opera den Event verschluckt
 chrome.tabs.onActivated.addListener((activeInfo) => {
    chrome.tabs.get(activeInfo.tabId, (tab) => {
        if (tab) forceRedirect(tab.id, tab.url);
    });
 });
@@ -0,0 +1,6 @@
 (function() {
    const dashboardUrl = chrome.runtime.getURL("newtab.html");
    if (window.location.href !== dashboardUrl) {
        window.location.href = dashboardUrl;
    }
 })();
@@ -1,8 +1,9 @@
 /* =============================================
   HELLION NEWTAB — settings.js
-   Settings Panel: Toggles, Hintergrund, Theme-Picker
+   Settings Panel, Theme-Modal, Accordion, Toggles
   ============================================= */
 // ---- SETTINGS PANEL ----
 function openSettings()  {
  document.getElementById('settingsPanel').classList.add('open');
  document.getElementById('settingsOverlay').classList.add('active');
@@ -12,6 +13,43 @@ function closeSettings() {
  document.getElementById('settingsOverlay').classList.remove('active');
 }
 // ---- THEME MODAL ----
 function openThemeModal() {
  const overlay = document.getElementById('themeOverlay');
  overlay.classList.add('active');
 }
 function closeThemeModal() {
  const overlay = document.getElementById('themeOverlay');
  overlay.classList.remove('active');
 }
 // ---- ACCORDION ----
 function initAccordion() {
  const defaultOpen = new Set(['appearance', 'behavior', 'widgets', 'data', 'help']);
  const sections = document.querySelectorAll('.settings-section[data-section]');
  sections.forEach(section => {
    const name = section.dataset.section;
    const title = section.querySelector('.settings-section-title');
    if (defaultOpen.has(name)) {
      section.classList.add('open');
    }
    title.addEventListener('click', () => {
      section.classList.toggle('open');
    });
    title.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        section.classList.toggle('open');
      }
    });
  });
 }
 // ---- APPLY SETTINGS ----
 function applySettings() {
  const body = document.body;
  body.classList.toggle('compact',        settings.compact);
@@ -24,7 +62,7 @@ function applySettings() {
  document.getElementById('settingShowDesc').checked     = settings.showDesc;
  document.getElementById('settingHideExtra').checked    = settings.hideExtra;
  document.getElementById('settingVisibleCount').value   = String(settings.visibleCount);
-  document.getElementById('visibleCountRow').style.opacity = settings.hideExtra ? '1' : '0.4';
+  document.getElementById('visibleCountRow').classList.toggle('dim', !settings.hideExtra);
  // showSearch: undefined (alter Save) → true
  if (settings.showSearch === undefined) settings.showSearch = true;
@@ -33,6 +71,11 @@ function applySettings() {
  const showSearchEl = document.getElementById('settingShowSearch');
  if (showSearchEl) showSearchEl.checked = settings.showSearch;
  // Toolbar-Position
  document.body.classList.toggle('toolbar-left', settings.toolbarPos === 'left');
  const toolbarPosEl = document.getElementById('settingToolbarPos');
  if (toolbarPosEl) toolbarPosEl.value = settings.toolbarPos || 'right';
  applyTheme(settings.theme || 'nebula', !!settings.bgUrl);
  if (settings.bgUrl) {
@@ -40,13 +83,21 @@ function applySettings() {
  }
 }
 // ---- BIND EVENTS ----
 function bindSettingsEvents() {
-  // Panel
+  // Settings Panel
  document.getElementById('settingsOverlay').addEventListener('click', closeSettings);
  document.getElementById('btnCloseSettings').addEventListener('click', closeSettings);
  document.getElementById('btnSettings').addEventListener('click', openSettings);
-  // Theme-Picker
+  // Theme Modal
  document.getElementById('btnTheme').addEventListener('click', openThemeModal);
  document.getElementById('btnCloseTheme').addEventListener('click', closeThemeModal);
  document.getElementById('themeOverlay').addEventListener('click', e => {
    if (e.target === document.getElementById('themeOverlay')) closeThemeModal();
  });
  // Theme-Picker (Cards im Theme-Modal)
  document.querySelectorAll('.theme-card').forEach(card => {
    card.addEventListener('click', async () => {
      const name = card.dataset.value;
@@ -59,6 +110,9 @@ function bindSettingsEvents() {
    });
  });
  // Accordion initialisieren
  initAccordion();
  // Toggles
  const toggleMap = {
    settingCompact:   v => { settings.compact       = v; document.body.classList.toggle('compact', v); },
@@ -67,7 +121,7 @@ function bindSettingsEvents() {
    settingShowDesc:  v => { settings.showDesc       = v; document.body.classList.toggle('show-desc', v); },
    settingHideExtra: v => {
      settings.hideExtra = v;
-      document.getElementById('visibleCountRow').style.opacity = v ? '1' : '0.4';
+      document.getElementById('visibleCountRow').classList.toggle('dim', !v);
      renderBoards();
    },
    settingShowSearch: v => {
@@ -92,20 +146,19 @@ function bindSettingsEvents() {
    renderBoards();
  });
-  // Background URL
+  // Background URL (im Theme-Modal)
  document.getElementById('btnChangeBg').addEventListener('click', () => {
-    const row = document.getElementById('bgInputRow');
+    document.getElementById('bgInputRow').classList.toggle('hidden');
    row.style.display = row.style.display === 'none' ? 'flex' : 'none';
  });
  document.getElementById('btnApplyBg').addEventListener('click', async () => {
    const url = document.getElementById('bgUrlInput').value.trim();
    settings.bgUrl = url;
    document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : '';
    await saveSettings();
-    document.getElementById('bgInputRow').style.display = 'none';
+    document.getElementById('bgInputRow').classList.add('hidden');
  });
-  // Background File Upload
+  // Background File Upload (im Theme-Modal)
  document.getElementById('btnBgFile').addEventListener('click', () => {
    document.getElementById('bgFileInput').click();
  });
@@ -119,18 +172,39 @@ function bindSettingsEvents() {
      await saveSettings();
    };
    reader.onerror = () => {
-      alert('Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.');
+      HellionDialog.alert('Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.', { type: 'danger', title: 'Dateifehler' });
    };
    reader.readAsDataURL(file);
  });
  // Toolbar-Position Setting
  const toolbarPosEl = document.getElementById('settingToolbarPos');
  if (toolbarPosEl) {
    toolbarPosEl.value = settings.toolbarPos || 'right';
    toolbarPosEl.addEventListener('change', async (e) => {
      settings.toolbarPos = e.target.value;
      document.body.classList.toggle('toolbar-left', e.target.value === 'left');
      await saveSettings();
    });
  }
  // Onboarding wiederholen
  document.getElementById('btnRestartOnboarding').addEventListener('click', () => {
    closeSettings();
    Onboarding.start();
  });
  // Reset All
  document.getElementById('btnResetAll').addEventListener('click', async () => {
-    if (!confirm('Wirklich alle Boards und Einstellungen löschen? Nicht rückgängig machbar.')) return;
+    const ok = await HellionDialog.confirm(
      'Wirklich alle Boards und Einstellungen löschen? Das kann nicht rückgängig gemacht werden.',
      { type: 'danger', title: 'Alles zurücksetzen', confirmText: 'Alles löschen' }
    );
    if (!ok) return;
    boards   = [];
    settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
                 hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
-                 showSearch: true, searchEngine: 'google' };
+                 showSearch: true, searchEngine: 'google', toolbarPos: 'right' };
    await saveBoards();
    await saveSettings();
    applySettings();
@@ -15,7 +15,8 @@ let settings = {
  bgUrl:         '',
  theme:         'nebula',
  showSearch:    true,
-  searchEngine:  'google'
+  searchEngine:  'google',
  toolbarPos:    'right'
 };
 function uid() {
@@ -23,7 +23,7 @@ const Store = {
        chrome.storage.local.set({ [key]: value }, () => {
          if (chrome.runtime.lastError) {
            console.error('Storage-Fehler:', chrome.runtime.lastError.message);
-            alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.');
+            HellionDialog.alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.', { type: 'danger', title: 'Speicher voll' });
            reject(new Error(chrome.runtime.lastError.message));
            return;
          }
@@ -35,7 +35,7 @@ const Store = {
          resolve();
        } catch (e) {
          console.error('Storage-Fehler:', e.message);
-          alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.');
+          HellionDialog.alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.', { type: 'danger', title: 'Speicher voll' });
          reject(e);
        }
      }
@@ -0,0 +1,365 @@
 /* =============================================
   HELLION NEWTAB — widgets.js
   Widget-Manager: Registry, Drag, Resize, Z-Index, Persistierung
   ============================================= */
 const WidgetManager = {
  /** @type {Map<string, {el: HTMLElement, type: string, state: Object}>} */
  _widgets: new Map(),
  _topZ: 51,
  STORAGE_KEY: 'widgetStates',
  /**
   * Widget erstellen und in DOM einfuegen
   * @param {string} type - 'note'
   * @param {Object} config - { id, title, x, y, width, height, open }
   * @returns {string} widget-id
   */
  create(type, config) {
    const id = config.id || ('widget_' + uid());
    const state = {
      id,
      type,
      title: config.title || 'Note',
      x: config.x || 120,
      y: config.y || 80,
      width: config.width || 280,
      height: config.height || 220,
      open: config.open !== false
    };
    const el = this._buildDOM(state);
    document.body.appendChild(el);
    this._widgets.set(id, { el, type, state });
    this._initDrag(el);
    this._initResize(el);
    this.bringToFront(id);
    return id;
  },
  /**
   * Widget-DOM erzeugen (createElement, kein innerHTML)
   * @param {Object} state
   * @returns {HTMLElement}
   */
  _buildDOM(state) {
    const widget = document.createElement('div');
    widget.className = 'widget';
    widget.dataset.widgetId = state.id;
    widget.style.left = state.x + 'px';
    widget.style.top = state.y + 'px';
    widget.style.width = state.width + 'px';
    widget.style.height = state.height + 'px';
    // Header
    const header = document.createElement('div');
    header.className = 'widget-header';
    const title = document.createElement('span');
    title.className = 'widget-title';
    title.textContent = state.title;
    // Doppelklick auf Titel zum Editieren
    title.addEventListener('dblclick', () => {
      title.contentEditable = 'true';
      title.focus();
      // Text selektieren
      const range = document.createRange();
      range.selectNodeContents(title);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    });
    title.addEventListener('blur', async () => {
      title.contentEditable = 'false';
      const newTitle = title.textContent.trim().slice(0, 20);
      title.textContent = newTitle || 'Note';
      const entry = this._widgets.get(state.id);
      if (entry) {
        entry.state.title = title.textContent;
        await this.save();
      }
    });
    title.addEventListener('keydown', e => {
      if (e.key === 'Enter') {
        e.preventDefault();
        title.blur();
      }
    });
    const actions = document.createElement('div');
    actions.className = 'widget-actions';
    const btnMin = document.createElement('button');
    btnMin.className = 'widget-btn widget-minimize';
    btnMin.title = 'Minimieren';
    btnMin.textContent = '\u2500';
    btnMin.addEventListener('click', () => this.minimize(state.id));
    const btnClose = document.createElement('button');
    btnClose.className = 'widget-btn widget-close';
    btnClose.title = 'Schließen';
    btnClose.textContent = '\u2715';
    btnClose.addEventListener('click', () => this.close(state.id));
    actions.append(btnMin, btnClose);
    header.append(title, actions);
    // Body
    const body = document.createElement('div');
    body.className = 'widget-body';
    // Resize Handle
    const resizeHandle = document.createElement('div');
    resizeHandle.className = 'widget-resize-handle';
    widget.append(header, body, resizeHandle);
    // Klick auf Widget bringt es nach vorne
    widget.addEventListener('pointerdown', () => {
      this.bringToFront(state.id);
    });
    return widget;
  },
  /**
   * Widget-Body-Element holen
   * @param {string} id
   * @returns {HTMLElement|null}
   */
  getBody(id) {
    const entry = this._widgets.get(id);
    if (!entry) return null;
    return entry.el.querySelector('.widget-body');
  },
  /**
   * Widget entfernen (endgueltig loeschen)
   * @param {string} id
   */
  close(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.el.remove();
    this._widgets.delete(id);
  },
  /**
   * Widget minimieren (aus DOM verstecken, bleibt im Notebook)
   * @param {string} id
   */
  async minimize(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.state.open = false;
    entry.el.classList.add('widget-minimized');
    setTimeout(() => {
      entry.el.style.display = 'none';
    }, 250);
    await this.save();
  },
  /**
   * Widget oeffnen (aus minimiertem Zustand wiederherstellen)
   * @param {string} id
   */
  async openWidget(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    entry.state.open = true;
    entry.el.style.display = 'flex';
    // Naechster Frame fuer Animation
    requestAnimationFrame(() => {
      entry.el.classList.remove('widget-minimized');
    });
    this.bringToFront(id);
    await this.save();
  },
  /**
   * Widget in den Vordergrund bringen
   * @param {string} id
   */
  bringToFront(id) {
    const entry = this._widgets.get(id);
    if (!entry) return;
    this._topZ++;
    entry.el.style.zIndex = this._topZ;
  },
  /**
   * Drag initialisieren (Pointer Events auf Header)
   * @param {HTMLElement} widgetEl
   */
  _initDrag(widgetEl) {
    const header = widgetEl.querySelector('.widget-header');
    const self = this;
    header.addEventListener('pointerdown', function onDown(e) {
      if (e.target.closest('.widget-btn') || e.target.closest('.widget-title[contenteditable="true"]')) return;
      e.preventDefault();
      header.setPointerCapture(e.pointerId);
      const rect = widgetEl.getBoundingClientRect();
      const offX = e.clientX - rect.left;
      const offY = e.clientY - rect.top;
      function onMove(ev) {
        const maxX = window.innerWidth - widgetEl.offsetWidth;
        const maxY = window.innerHeight - widgetEl.offsetHeight;
        widgetEl.style.left = Math.max(0, Math.min(maxX, ev.clientX - offX)) + 'px';
        widgetEl.style.top = Math.max(48, Math.min(maxY, ev.clientY - offY)) + 'px';
      }
      async function onUp() {
        header.releasePointerCapture(e.pointerId);
        header.removeEventListener('pointermove', onMove);
        header.removeEventListener('pointerup', onUp);
        // State aktualisieren
        const id = widgetEl.dataset.widgetId;
        const entry = self._widgets.get(id);
        if (entry) {
          entry.state.x = parseFloat(widgetEl.style.left);
          entry.state.y = parseFloat(widgetEl.style.top);
          await self.save();
        }
      }
      header.addEventListener('pointermove', onMove);
      header.addEventListener('pointerup', onUp);
    });
  },
  /**
   * Resize initialisieren (Pointer Events auf Handle)
   * @param {HTMLElement} widgetEl
   */
  _initResize(widgetEl) {
    const handle = widgetEl.querySelector('.widget-resize-handle');
    const self = this;
    handle.addEventListener('pointerdown', function onDown(e) {
      e.preventDefault();
      e.stopPropagation();
      handle.setPointerCapture(e.pointerId);
      const startW = widgetEl.offsetWidth;
      const startH = widgetEl.offsetHeight;
      const startX = e.clientX;
      const startY = e.clientY;
      function onMove(ev) {
        widgetEl.style.width = Math.max(200, startW + (ev.clientX - startX)) + 'px';
        widgetEl.style.height = Math.max(150, startH + (ev.clientY - startY)) + 'px';
      }
      async function onUp() {
        handle.releasePointerCapture(e.pointerId);
        handle.removeEventListener('pointermove', onMove);
        handle.removeEventListener('pointerup', onUp);
        const id = widgetEl.dataset.widgetId;
        const entry = self._widgets.get(id);
        if (entry) {
          entry.state.width = widgetEl.offsetWidth;
          entry.state.height = widgetEl.offsetHeight;
          await self.save();
        }
      }
      handle.addEventListener('pointermove', onMove);
      handle.addEventListener('pointerup', onUp);
    });
  },
  /**
   * Alle Widget-States aus Storage laden und wiederherstellen
   * @param {Function} renderCallback - Funktion die den Body rendert (noteData, bodyEl)
   */
  async restore(renderCallback) {
    const data = await Store.get(this.STORAGE_KEY);
    if (!data || !Array.isArray(data.notes)) return;
    for (const noteData of data.notes) {
      const id = this.create('note', {
        id: noteData.id,
        title: noteData.title,
        x: noteData.x,
        y: noteData.y,
        width: noteData.width,
        height: noteData.height,
        open: noteData.open
      });
      // Body rendern lassen (von Notes-Modul)
      if (renderCallback) {
        const body = this.getBody(id);
        if (body) renderCallback(noteData, body);
      }
      // Falls minimiert, sofort verstecken
      if (!noteData.open) {
        const entry = this._widgets.get(id);
        if (entry) {
          entry.el.classList.add('widget-minimized');
          entry.el.style.display = 'none';
        }
      }
    }
  },
  /**
   * Alle Widget-States speichern
   */
  async save() {
    const notes = [];
    for (const [id, entry] of this._widgets) {
      if (entry.type === 'note') {
        notes.push({
          ...entry.state,
          // Zusaetzliche Note-Daten werden von Notes.save() ergaenzt
        });
      }
    }
    // Nicht direkt speichern — Notes-Modul merged die Daten
    return notes;
  },
  /**
   * Widget-State fuer eine bestimmte ID holen
   * @param {string} id
   * @returns {Object|null}
   */
  getState(id) {
    const entry = this._widgets.get(id);
    return entry ? entry.state : null;
  },
  /**
   * Pruefen ob Widget offen ist
   * @param {string} id
   * @returns {boolean}
   */
  isOpen(id) {
    const entry = this._widgets.get(id);
    return entry ? entry.state.open : false;
  },
  /**
   * Anzahl aller Widgets
   * @returns {number}
   */
  count() {
    return this._widgets.size;
  },
  /**
   * Alle Widget-IDs
   * @returns {string[]}
   */
  getAllIds() {
    return Array.from(this._widgets.keys());
  }
 };
Author	SHA1	Message	Date
JonKazama-Hellion	18a04b884c	refactor(app): Sticky-Note durch Widget-System ersetzen Migration alter Sticky-Daten in das neue Widget-System, Notes.init() statt initStickyNote(), Toolbar-Position in Settings, JSON-Export/Import um Notes erweitert, Onboarding-Text aktualisiert.	2026-03-21 19:40:43 +01:00
JonKazama-Hellion	7a16462358	feat(widgets): Widget-System mit Notes, Checklisten und Notebook-Sidebar Neues modulares Widget-System als Ersatz für die alte Sticky Note. Widget-Manager (Drag, Resize, Z-Index, Persistierung), Freitext-Notes mit Zeichenzähler, Checklisten mit Toggle/Add/Remove, Notebook-Sidebar mit 5 Slots, Widget-Toolbar am rechten Rand.	2026-03-21 19:40:26 +01:00
JonKazama-Hellion	ed11827321	chore(meta): Ko-fi-Link einbauen und v2-Planung aus Git ausschliessen - README: Ko-fi Badge und Link in Impressum-Tabelle - newtab.html: Ko-fi-Link in About-Section mit Kaffeetassen-Icon - .gitignore: v2-planning.md ausschliessen	2026-03-21 19:17:07 +01:00
JonKazama-Hellion	6172332be7	docs(release): CHANGELOG, README und GitHub Actions aktualisieren - CHANGELOG.md mit v1.5.2 Eintrag erstellt - README.md Architektur-Baum aktualisiert (dialog.js, onboarding.js, opera/) - release.yml erstellt 3 ZIP-Pakete (Chrome, Firefox, Opera) - quality.yml prueft alle 3 Manifests auf V3 und Versions-Konsistenz	2026-03-21 19:08:45 +01:00
JonKazama-Hellion	74e3eaefcf	refactor(settings): Theme-Modal auslagern, Accordion-Sektionen - Theme-Picker als eigenes Modal mit Header-Button aus Settings entfernt - Background-Optionen (URL + Upload) ins Theme-Modal verschoben - Alle Settings-Sektionen einklappbar mit Chevron-Animation - About und Danger Zone standardmaessig eingeklappt - Suchleisten-Toggle von DATA nach BEHAVIOR verschoben - Quick Save Placeholder-Element entfernt - STYLE_GUIDE.md fuer Theme-System hinzugefuegt	2026-03-21 19:08:31 +01:00
JonKazama-Hellion	00baa0231b	feat(ui): Custom Dialog-System, Onboarding und Backup-Reminder - HellionDialog.alert/confirm ersetzt alle nativen confirm() und alert() Aufrufe - 6-stufiger Onboarding-Flow beim ersten Start (Boards, Themes, Features, Backup) - Backup-Reminder erinnert alle 7 Tage an JSON-Export - innerHTML komplett durch createElement/createElementNS ersetzt (XSS-Schutz) - Drag & Drop Inline-Styles durch CSS-Klassen ersetzt	2026-03-21 19:08:17 +01:00
JonKazama-Hellion	36bf38a92c	feat(compat): Opera GX Workaround, Firefox MV3, lokale Fonts und Icon-Update - manifest.opera.json mit Service Worker und Content Script fuer Opera GX Speed Dial - src/js/opera/background.js und redirect.js fuer Tab-Uebernahme - manifest.firefox.json auf Manifest V3 migriert mit Gecko-ID - Fonts von Google Fonts API auf lokale WOFF2-Dateien umgestellt (DSGVO) - Extension-Icons aktualisiert - SECURITY.md und DISCLAIMER.md ueberarbeitet	2026-03-21 19:08:03 +01:00
JonKazama-Hellion	b430b67df9	Manifestfile füe Mozilla Firefox endlich hinbekommen, das der Bot Check dort klappt	2026-03-21 01:01:22 +01:00
`@@ -44,4 +44,4 @@ Der Entwickler behält sich das Recht vor, diese Extension jederzeit zu ändern,`

	`---`	`---`

	`Hellion NewTab — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion`	`Hellion NewTab — [Hellion Online Media - Florian Wathing](https://hellion-media.de) — JonKazama-Hellion`
`@@ -73,4 +73,4 @@ Keine Permissions für: Tabs, History, Web Requests, Downloads, Clipboard oder H`

	`---`	`---`

	`Hellion NewTab — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion`	`Hellion Dashboard — [Hellion Online Media - Florian Wathling](https://hellion-media.de) — JonKazama-Hellion`